/* ===== Fishera — DA « Deep Water » : SOMBRE par défaut (:root) · CLAIR « Émeraude » ([data-theme="light"]) ===== */
/* ===== Polices AUTO-HÉBERGÉES (offline-safe, zéro CDN) : Plus Jakarta Sans (corps) + Archivo (titres) ===== */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/archivo-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/archivo-latin-900-normal.woff2') format('woff2'); }
:root {
  color-scheme: dark;
  --bg: #07201a; --bg-2: #0b2620;
  --bg-grad: radial-gradient(1200px 800px at 15% -10%, #0f3128 0%, #07201a 55%, #061b16 100%);
  --card: #102e27; --surface: #102e27; --surface-2: #163a31; --surface-3: #1c463b;
  --glass-border: rgba(255,255,255,.10); --glass-hi: rgba(255,255,255,.14); --on-brand: #06231c;
  --text: #eafff7; --text-2: #8fb8ab; --text-3: #5f8478;
  --muted: #8fb8ab;
  --ink: #0b2620;            /* compat : fonds/gradients sombres (le texte est passé à --text) */
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
  --brand: #1fd39a; --brand-strong: #2fe0b0; --brand-dark: #17c48f;
  --brand-wash: rgba(31,211,154,.14); --brand-line: rgba(47,224,176,.34);
  --viz-dim: rgba(31,211,154,.38); /* audit visuel P2 : barres secondaires des graphes (wash = invisible) */
  --brand-text: var(--brand); /* texte vert lisible (surclassé en clair par un vert foncé AA) */
  --r-card: 16px; /* rayon unique des cartes du carnet (14/16/18 disparates avant) */
  --accent: #ff6b3d; --accent-strong: #ff855c; --accent-deep: #e8551f;
  --accent-wash: rgba(255,107,61,.15); --accent-line: rgba(255,107,61,.42);
  --gold: #ffd23f; --gold-deep: #e0a813; --gold-wash: rgba(255,210,63,.15); --gold-line: rgba(255,210,63,.40);
  --glacier: #5ad1e0; --glacier-wash: rgba(90,209,224,.14);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 8px 30px -8px rgba(31,211,154,.5);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 34px -8px rgba(255,107,61,.55);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 8px 28px -10px rgba(255,210,63,.45);
  --glow-glacier: 0 0 24px -6px rgba(90,209,224,.5);
  --shadow: 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -22px rgba(0,0,0,.7);
  --radius: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px;
  --focus-ring: 0 0 0 3px rgba(47,224,176,.45);
  --font-title: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* ===== Motion (DA upgrade) : un seul « feel » partout ===== */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 400ms; --dur-4: 700ms; /* révélations héros (jauge, count-up, barre XP) */
  --ease-out: cubic-bezier(.2, .6, .2, 1);        /* sorties nettes */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* rebond léger (pop, état actif) */
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4fbf8; --bg-2: #ffffff;
  --bg-grad: linear-gradient(180deg, #f7fdfa, #f4fbf8);
  --card: #ffffff; --surface: #ffffff; --surface-2: #f2f8f5; --surface-3: #eaf3ef;
  --glass-border: rgba(14,42,36,.09); --glass-hi: rgba(255,255,255,.9);
  --text: #1b1b1a; --text-2: #5f7a71; --text-3: #8a9d96;
  --muted: #5f7a71;
  --ink: #0e2a24;
  --border: rgba(14,42,36,.10); --border-strong: rgba(14,42,36,.18);
  --brand: #12b886; --brand-strong: #0fa878; --brand-dark: #0c8a63;
  --brand-wash: rgba(18,184,134,.10); --brand-line: rgba(18,184,134,.30);
  --viz-dim: rgba(18,184,134,.30);
  --brand-text: #087F5B; /* vert texte AA (4,5:1) — #12b886 réservé aux fonds/pastilles */
  --accent: #ff6b3d; --accent-strong: #ef5a2a; --accent-deep: #e8551f;
  --accent-wash: rgba(255,107,61,.10); --accent-line: rgba(255,107,61,.32);
  --gold: #ffd23f; --gold-deep: #e0a813; --gold-wash: rgba(255,210,63,.18); --gold-line: rgba(224,168,19,.40);
  --glacier: #0e9fbf; --glacier-wash: rgba(14,159,191,.10);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 8px 22px -10px rgba(18,184,134,.35);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 26px -10px rgba(255,107,61,.35);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 8px 22px -10px rgba(224,168,19,.3);
  --glow-glacier: 0 0 18px -6px rgba(14,159,191,.35);
  --shadow: 0 2px 10px rgba(14,42,36,.06);
  --shadow-lg: 0 12px 34px -14px rgba(14,42,36,.2);
  --focus-ring: 0 0 0 3px rgba(18,184,134,.35);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font-family: var(--font-body); color: var(--text); background: var(--bg); overflow-x: hidden; }
#map { position: absolute; inset: 0; }

/* ---- shell : barre du haut + vues ---- */
/* En-tête responsive (design retenu : 3 zones brand|nav|actions, collapse asymétrique des CTA) */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: calc(52px + env(safe-area-inset-top, 0px)); z-index: 10; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: env(safe-area-inset-top, 0px) 14px 0; background: var(--card); border-bottom: 1px solid var(--border); }
/* Topbar 3 colonnes : notif | logo centré | actions */
.topbar-left { flex: 1; display: flex; align-items: center; justify-content: flex-start; min-width: 40px; }
#topbar .brand { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
#topbar .brand .logo { width: 36px; height: 36px; display: block; flex: none; object-fit: contain; }
#topbar .brand .brand-name { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; line-height: 1; color: var(--text); white-space: nowrap; }
.topbar-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Onglets desktop (conservés pour admin/back) */
#toptabs { display: none; }
.tabs { flex: 1 1 auto; display: flex; justify-content: center; gap: 4px; min-width: 0; overflow: hidden; }
.tab { appearance: none; background: none; border: none; font-size: 14px; line-height: 1; padding: 7px 12px; border-radius: 9px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tab:hover { background: var(--surface-2); }
.tab.active { background: var(--brand); color: #fff; }
/* Navigation en haut sur desktop (remplace la barre du bas, réservée au mobile) */
#topnav { display: none; }
@media (min-width: 900px) {
  #topnav { display: flex; flex: 1 1 auto; justify-content: center; gap: 6px; }
  #topnav .tab { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 8px 15px; border-radius: 10px; }
  #topbar .topbar-left, #topbar .topbar-right { flex: 0 0 auto; }
  #bottomnav { display: none !important; }
}
/* Mobile : marque FISHERA centrée dans la topbar (cloche à gauche, + à droite) */
@media (max-width: 899px) {
  #topbar .brand { position: absolute; left: 50%; transform: translateX(-50%); gap: 7px; }
  #topbar .brand .logo { width: 30px; height: 30px; }
}
/* Boutons topbar */
.pub-btn { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid transparent; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .14s ease, transform .09s ease; }
.pub-btn:active { transform: scale(.96); }
.pub-btn .ic { width: 17px; height: 17px; flex: none; }
.pub-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pub-btn.catch { background: var(--brand); color: #fff; border-color: var(--brand); }
.pub-btn.catch:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.pub-btn.spot { background: var(--card); color: var(--accent); border-color: var(--accent); }
.pub-btn.spot:hover { background: rgba(255,107,61,.08); }
.pub-btn .lbl.is-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ≤480px : « Spot » → icône seule */
@media (max-width: 480px) {
  .pub-btn.spot { width: 38px; min-width: 38px; padding: 0; gap: 0; }
  .pub-btn.spot .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pub-btn.spot .ic { width: 20px; height: 20px; }
}
/* ≤360px : « J'ai pêché » aussi en icône */
@media (max-width: 360px) {
  #topbar .brand .brand-name { display: none; }
  .pub-btn.catch { width: 38px; min-width: 38px; padding: 0; gap: 0; }
  .pub-btn.catch .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pub-btn.catch .ic { width: 20px; height: 20px; }
}

/* ---- carnet (stats Strava) ---- */
.carnet-head { max-width: 760px; margin: 0 auto; padding: 18px 16px 4px; display: flex; align-items: center; justify-content: space-between; }
.carnet-head h2 { margin: 0; font-size: 20px; }
.carnet-head .btn { flex: none; min-width: 0; width: auto; }
.catch-card .btn { flex: none; min-width: 0; }
.carnet-stats { max-width: 760px; margin: 0 auto; padding: 16px 16px 6px; display: flex; flex-direction: column; gap: 18px; } /* #2 : plus de respiration entre les blocs */
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.stat-v { font-size: 22px; font-weight: 700; color: var(--brand); }
.stat-l { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.carnet-feed { max-width: 760px; margin: 0 auto; padding: 8px 16px 60px; display: flex; flex-direction: column; gap: 10px; }
.catch-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 10px; }
.catch-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; background: var(--surface-2); }
.catch-body { flex: 1; min-width: 0; }
.catch-title { font-size: 15px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } /* audit : césure « 25 / cm » entre valeur et unité sur mobile */
.catch-title span { font-weight: 400; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.catch-title span.catch-demo { background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 99px; vertical-align: middle; }
.catch-meta { font-size: 12px; color: var(--text-2); }
/* feed social des prises (grandes images) */
.cp-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cp-more { grid-column: 1 / -1; justify-self: center; margin-top: 4px; padding: 9px 18px; border: 1px solid var(--border); border-radius: 99px; background: var(--card); font-size: 13px; font-weight: 700; color: var(--brand-dark); cursor: pointer; }
/* Carrousel « Pêcheurs à suivre » (anti cold-start) */
.fsug { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 14px 14px 16px; margin: 12px 12px 14px; }
.fsug-h { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; margin-bottom: 10px; }
.fsug-h b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--text); }
.fsug-h b .phi { width: 17px; height: 17px; color: var(--brand); }
.fsug-x { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 8px; } .fsug-x .phi { width: 16px; height: 16px; }
.fsug-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.fsug-row::-webkit-scrollbar { height: 0; }
.fsug-card { scroll-snap-align: start; flex: 0 0 128px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--card); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 10px; }
.fsug-av { position: relative; width: 52px; height: 52px; border: none; padding: 0; background: none; cursor: pointer; }
.fsug-av img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.fsug-av .cp-av-ph { position: absolute; inset: 0; width: 52px; height: 52px; color: var(--text-3); }
.fsug-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text); }
.fsug-sub { font-size: 11px; color: var(--muted); line-height: 1.2; min-height: 26px; display: flex; align-items: center; }
.fsug-follow { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--brand); color: var(--on-brand); border: none; border-radius: 99px; padding: 7px 0; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.fsug-follow .phi { width: 14px; height: 14px; }
.fsug-follow.on { background: var(--surface-2); color: var(--brand-dark); border: 1px solid var(--brand-line); }
.fsug-inline { margin: 14px auto 0; max-width: 640px; }
.cp-more:hover { border-color: var(--brand); }
.catch-post { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(14,42,36,.06), 0 8px 24px -12px rgba(14,42,36,.18); transition: transform .18s var(--ease-out, cubic-bezier(.4,0,.2,1)), box-shadow .18s var(--ease-out, cubic-bezier(.4,0,.2,1)), border-color .18s ease; }
/* Raffinement premium (feed) : la carte « prend vie » au survol / à l'appui, ombre teintée Deep Water */
.cp-feed .catch-post:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(14,42,36,.08), 0 16px 34px -12px rgba(14,42,36,.26); border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); }
.cp-feed .catch-post:active { transform: translateY(0) scale(.997); }
@media (hover: none) { .cp-feed .catch-post:hover { transform: none; box-shadow: 0 1px 2px rgba(14,42,36,.06), 0 8px 24px -12px rgba(14,42,36,.18); border-color: var(--border); } }
/* feed communautaire : le post est cliquable (ouvre la page /prise) → affordance sur les zones non interactives */
.cp-feed .catch-post .cp-cap { cursor: pointer; } /* la photo = double-clic like (n'ouvre plus le post) */
.cp-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.cp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-media.cp-noimg { background: linear-gradient(135deg, var(--surface-2), var(--brand-wash)); }
.cp-media.cp-noimg img { display: none; }
.cp-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgba(4,18,24,.62), rgba(4,18,24,0)); pointer-events: none; z-index: 1; }
.cp-media.cp-noimg::after { display: none; }
.cp-sp, .cp-demo, .cp-count, .cp-dots, .cp-arrow { z-index: 2; }
.cp-sp { position: absolute; left: 10px; bottom: 9px; z-index: 2; color: #fff; font-size: 17px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 12px rgba(0,0,0,.55); max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-demo { position: absolute; top: 9px; right: 9px; background: rgba(14,42,36,.82); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 99px; }
/* carrousel multi-photos */
.cp-carousel { position: absolute; inset: 0; }
.cp-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cp-track::-webkit-scrollbar { display: none; }
.cp-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; }
.cp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.cp-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.45); cursor: pointer; transition: background .2s, transform .2s; }
.cp-dots span.on { background: var(--card); transform: scale(1.3); }
.cp-count { position: absolute; top: 9px; right: 9px; background: rgba(14,42,36,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
/* vignette multi-photos (carnet) */
.catch-thumb-wrap { position: relative; flex: none; }
.catch-thumb-badge { position: absolute; bottom: 3px; right: 3px; background: rgba(14,42,36,.82); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 99px; }
/* titre de partage sur la page de résultat */
.ca-share-title { text-align: center; font-size: 15px; font-weight: 800; color: var(--text); margin: 16px 0 10px; }
.cp-cap { padding: 9px 12px 11px; }
.cp-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cp-meas { font-size: 14px; font-weight: 700; color: var(--accent); }
.cp-pts { font-size: 11px; font-weight: 800; color: var(--brand-strong, var(--brand-dark)); background: var(--brand-wash); border-radius: 99px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.cp-l2 { margin-top: 4px; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; line-height: 1.35; }
.cp-desc { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* #43 — bandeau « Conditions de la prise » (météo/pression/lune/mer figées) */
.cond-strip { margin-top: 8px; padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.cond-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.cond-score { font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.cond-score small { font-weight: 700; font-size: 9px; color: var(--text-3); }
.cond-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cond-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* #43 — panneau conditions RICHE (pleine page /prise) */
.condp { margin-top: 10px; padding: 12px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; }
.condp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; }
.condp-score { display: inline-flex; align-items: baseline; gap: 3px; }
.condp-score b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.condp-score small { font-size: 10px; font-weight: 700; color: var(--text-3); }
.condp-score span { font-size: 11px; font-weight: 800; margin-left: 5px; text-transform: none; }
.condp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.condp-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 9px 6px; }
.condp-ic { font-size: 18px; line-height: 1; }
.condp-v { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.condp-l { font-size: 10.5px; color: var(--text-2); line-height: 1.15; }
.condp-foot { margin-top: 9px; font-size: 10.5px; color: var(--text-3); text-align: center; }
.catch-poster { flex: none; }

/* ---- affiche partageable ---- */
.ca-result { max-width: 620px; margin: 0 auto; padding: 0 18px 60px; }
.poster-wrap { display: flex; justify-content: center; margin: 8px 0 14px; }
.poster-img { max-width: 320px; width: 100%; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.2); }

/* ---- liste & fiche espèce ---- */
.sp-list-grid { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp-lcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 12px 8px; cursor: pointer; }
.sp-verif { position: absolute; top: 6px; right: 6px; font-size: 9px; line-height: 1; padding: 3px 6px; border-radius: 99px; background: var(--gold-wash); color: #b5710d; border: 1px solid var(--gold-wash); font-weight: 600; }
.sp-verif-badge { display: inline-block; margin-top: 6px; margin-left: 6px; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--gold-wash); color: #b5710d; border: 1px solid var(--gold-wash); }
.sp-lcard:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.sp-lill { width: 96px; height: 56px; display: flex; align-items: center; justify-content: center; }
.sp-lill svg, .sp-lill img { width: 96px; height: 56px; object-fit: contain; }
.sp-lname { font-size: 13px; font-weight: 500; text-align: center; }
.sp-lmilieu { font-size: 10px; padding: 2px 8px; border-radius: 99px; }
.sp-lmilieu.douce { background: var(--surface-2); color: #185fa5; }
.sp-lmilieu.mer { background: var(--surface-2); color: var(--brand-dark); }
.sp-fiche-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
/* bouton favori (pilule libellée) dans l'en-tête de la fiche espèce */
.sp-fiche-txt { flex: 1; min-width: 0; }
.f-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-fav-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); color: var(--text-2); font-size: 13px; font-weight: 600; font-family: inherit; padding: 7px 14px; border-radius: 99px; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.sp-fav-pill .sp-fav-ic { font-size: 15px; line-height: 1; }
.sp-fav-pill:hover { border-color: var(--gold-wash); color: #8a5a00; background: var(--surface-2); }
.sp-fav-pill.on { background: var(--gold-wash); border-color: var(--gold-wash); color: #8a5a00; }
.sp-fiche-ill { width: 220px; height: 150px; flex: none; display: flex; align-items: center; justify-content: center; }
.sp-fiche-ill svg, .sp-fiche-ill img { width: 220px; height: 150px; object-fit: contain; }
.sp-sci { font-style: italic; color: var(--text-2); font-size: 13px; margin: 2px 0 6px; }
.sp-milieu-badge { font-size: 12px; padding: 3px 10px; border-radius: 99px; }
.sp-milieu-badge.douce { background: var(--surface-2); color: #185fa5; }
.sp-milieu-badge.mer { background: var(--surface-2); color: var(--brand-dark); }
.sp-sec { font-size: 16px; font-weight: 600; margin: 22px 0 10px; }
/* --- fiche développée --- */
.sp-tagline { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-2); max-width: 52ch; }
.sp-mini-h { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 18px 0 8px; }
.sp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; margin-top: 14px; }
.sp-fact { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.sp-fact-ic { font-size: 18px; line-height: 1; flex: none; }
.sp-fact-txt { display: flex; flex-direction: column; min-width: 0; }
.sp-fact-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-2); }
.sp-fact-val { font-size: 14px; font-weight: 600; color: var(--text); }
.sp-rating { display: inline-flex; gap: 3px; align-items: center; }
.sp-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--surface-2); display: inline-block; }
.sp-rating[data-n="1"] .sp-dot.on { background: #22c55e; }
.sp-rating[data-n="2"] .sp-dot.on { background: #84cc16; }
.sp-rating[data-n="3"] .sp-dot.on { background: #f59e0b; }
.sp-rating[data-n="4"] .sp-dot.on { background: #f97316; }
.sp-rating[data-n="5"] .sp-dot.on { background: #ef4444; }
.sp-gauge-lab { font-size: 11px; color: var(--text-2); font-weight: 600; vertical-align: middle; margin-left: 3px; }
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.15em; flex: none; }
.sp-season-bar { display: flex; gap: 3px; }
.sp-mo { flex: 1; min-width: 0; text-align: center; font-size: 10px; font-weight: 600; padding: 7px 1px; border-radius: 6px; color: #6a6a64; }
.sp-season-peak { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--brand-wash); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; color: #0c5a43; line-height: 1.4; }
.sp-season-peak-ic { font-size: 16px; flex: none; }
/* Code couleur vert/jaune/orange (audit 19/07) — texte foncé pour un contraste AA sur les 3 fonds vifs */
.sp-mo-off { background: #f2a052; color: #3d1f08; } /* Calme = orange */
.sp-mo-ok  { background: var(--gold); color: #3a2e00; } /* Correct = jaune */
.sp-mo-top { background: var(--brand); color: #06231c; } /* Top = vert */
.sp-season-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--text-2); }
.sp-season-leg span { display: inline-flex; align-items: center; gap: 5px; }
.sp-season-leg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
/* panneau "Conditions idéales" (météo + contexte) — icônes + chiffres */
.sp-conds { margin-top: 16px; }
.sp-cond-synth { font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--surface-2); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; line-height: 1.5; }
.sp-cond-synth b { color: var(--brand-strong); }
/* audit 19/07 : hauteurs de cartes homogènes (grid-auto-rows:1fr) + alignement haut + valeurs longues gérées */
.sp-cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 8px; }
.sp-cond { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; transition: border-color .14s ease, box-shadow .14s ease, transform .09s ease; }
.sp-cond:hover { border-color: var(--border); box-shadow: 0 3px 12px rgba(0,0,0,.06); }
.sp-cond-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: none; background: var(--surface-2); color: var(--muted); }
.sp-cond-ic .ic { width: 19px; height: 19px; stroke-width: 1.9; }
.sp-cond-b { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sp-cond-lab { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #9a9994; }
.sp-cond-val { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; word-break: break-word; }
/* pastilles colorées par type de condition */
.sp-ci-temp { background: var(--accent-wash); color: #d6453f; }
.sp-ci-moments { background: var(--gold-wash); color: #b8780b; }
.sp-ci-meteo { background: var(--surface-2); color: #2f6fb0; }
.sp-ci-pression { background: var(--surface-2); color: #6b46c1; }
.sp-ci-maree { background: var(--surface-2); color: #0e7aa8; }
.sp-ci-eau { background: var(--brand-wash); color: #0c7a6b; }
.sp-ci-lune { background: var(--surface-2); color: #4b5079; }
/* --- comparateur interactif --- */
.sp-rank { margin-top: 16px; background: linear-gradient(135deg, var(--surface-2), var(--surface-2)); border: 1px solid var(--brand-wash); border-radius: 16px; padding: 14px 16px 16px; }
.sp-rank-head { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-rank-sub { font-size: 11px; font-weight: 500; color: var(--muted); }
.sp-rk-block { margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 11px 13px; }
.sp-rk-lab { font-size: 13px; color: var(--text-2); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sp-rk-lab b { color: var(--text); font-size: 15px; }
.sp-slider { width: 100%; accent-color: var(--brand); height: 24px; cursor: pointer; margin: 0 0 8px; display: block; }
.sp-rk-badge { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); transition: background 0.2s, border-color 0.2s; }
.sp-rk-badge.tier-gold { background: linear-gradient(135deg, var(--gold-wash), var(--gold-wash)); border-color: var(--gold-wash); }
.sp-rk-badge.tier-silver { background: linear-gradient(135deg, var(--surface-2), var(--surface-2)); border-color: var(--surface-2); }
.sp-rk-badge.tier-bronze { background: linear-gradient(135deg, var(--accent-wash), var(--gold-wash)); border-color: var(--gold-wash); }
.sp-rk-emo { font-size: 22px; line-height: 1; flex: none; }
.sp-rk-pct { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; }
.sp-rk-tt { font-size: 13px; color: var(--text-2); margin-left: auto; }
.sp-rk-perso { margin-top: 11px; font-size: 12.5px; color: var(--brand-dark); background: var(--surface-2); border-radius: 9px; padding: 8px 11px; }
.sp-rk-actions { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.sp-rk-actions .btn { flex: 1; min-width: 140px; font-size: 13px; }
.sp-rk-save { background: var(--brand); color: #fff; border-color: var(--brand); }
.sp-rk-save:hover { background: #178a65; }
/* célébration BIG FISH (remplace les confettis) */
.bigfish-ov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(8,30,22,.55); cursor: pointer; animation: bf-fade .25s ease both; }
.bigfish-ov.bf-out { animation: bf-fade .4s ease reverse both; }
@keyframes bf-fade { from { opacity: 0; } to { opacity: 1; } }
.bf-scene { position: relative; width: 320px; height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: bf-pop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes bf-pop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bf-splash { position: absolute; top: 34px; left: 50%; margin-left: -110px; width: 220px; height: 150px; background: radial-gradient(closest-side, var(--surface-2), #5cc6d6 68%, rgba(92,198,214,0) 100%); border-radius: 50%; filter: blur(1px); opacity: .9; animation: bf-splashpop .5s ease both; }
@keyframes bf-splashpop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: .9; } }
.bf-fish { position: relative; width: 196px; height: auto; margin-top: 6px; transform: rotate(-18deg); filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); animation: bf-jump .65s cubic-bezier(.2,1.2,.4,1) both; }
.bf-fish-fallback { font-size: 120px; line-height: 1; filter: none; }
@keyframes bf-jump { 0% { transform: translateY(70px) rotate(-18deg) scale(.6); opacity: 0; } 100% { transform: translateY(0) rotate(-18deg) scale(1); opacity: 1; } }
.bf-title { font: italic 900 62px/1 system-ui, Arial, sans-serif; color: var(--gold); letter-spacing: -1px; transform: skewX(-6deg); text-shadow: -2px -2px 0 #0e2a24, 2px -2px 0 #0e2a24, -2px 2px 0 #0e2a24, 2px 2px 0 #0e2a24, 3px 3px 0 #0e2a24, 0 12px 20px rgba(0,0,0,.4); margin-top: -4px; animation: bf-rise .5s .12s ease both; }
@keyframes bf-rise { from { transform: skewX(-6deg) translateY(26px); opacity: 0; } to { transform: skewX(-6deg) translateY(0); opacity: 1; } }
.bf-sub { margin-top: 12px; font: 800 13px system-ui; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); animation: bf-subrise .5s .2s ease both; }
@keyframes bf-subrise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bf-drop { position: absolute; top: 110px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 1px rgba(255,255,255,.5); opacity: 0; animation: bf-drop .8s ease forwards; }
@keyframes bf-drop { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
/* barre tout déplier */
.sp-acc-bar { display: flex; justify-content: flex-end; margin-top: 18px; margin-bottom: -8px; }
.sp-acc-toggle { background: none; border: none; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
/* titre collant dans la barre */
.page-bar-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* collection */
.sp-coll { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-coll-txt { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.sp-coll-txt .phi { width: 15px; height: 15px; color: var(--brand); }
.sp-coll-txt b { color: var(--brand); font-variant-numeric: tabular-nums; }
.sp-coll-bar { flex: 1; min-width: 120px; max-width: min(260px, 100%); height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.sp-coll-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-strong)); border-radius: 99px; transition: width 0.5s ease; }
.sp-coll-n { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sp-lcard.caught { border-color: #bfe3d4; }
.sp-lcaught { position: absolute; top: 6px; right: 6px; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 99px; background: var(--surface-2); color: #0a4a36; border: 1px solid var(--brand-wash); }
.sp-ldetail { position: absolute; top: 6px; left: 6px; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 99px; background: var(--gold-wash); color: #7d4d00; border: 1px solid var(--gold-wash); }
/* étoile favori cliquable (remplace l'ancien badge "fiche") */
.sp-fav { position: absolute; top: 4px; left: 4px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--surface-2); cursor: pointer; border-radius: 50%; background: rgba(255,255,255,.72); transition: transform .12s ease, color .12s ease; }
.sp-fav:hover { color: #f4b400; transform: scale(1.18); }
.sp-fav.on { color: #f4b400; }
.sp-fav-empty { grid-column: 1 / -1; text-align: center; padding: 44px 18px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.6; }
.sp-fav-empty span { font-weight: 400; font-size: 12.5px; }
.sp-filters { display: flex; gap: 10px; margin: 12px auto 0; flex-wrap: wrap; align-items: stretch; max-width: 760px; }
/* Segmented « milieu » : pilule à icônes, actif = vert de marque (texte lisible via --on-brand) */
#sp-f-milieu { flex: 1 1 100%; border-radius: 12px; }
#sp-f-milieu button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
#sp-f-milieu button .ui-ic { margin: 0; }
#sp-f-milieu button .ui-ic .phi { width: 15px; height: 15px; }
#sp-f-milieu button.on { background: var(--brand); color: var(--on-brand); font-weight: 700; }
/* Deux sélecteurs : le composant maison « cux » fournit le bouton + le chevron ▾ ; on n'ajoute
   qu'une icône de gauche, et on aligne hauteur/rayon/couleurs sur le segmented (thème compatible). */
.sp-selrow { display: flex; gap: 10px; flex: 1 1 100%; }
.sp-selwrap { position: relative; flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.sp-selwrap .cux { flex: 1; min-width: 0; display: flex; } /* le trigger cux remplit toute la moitié */
.sp-sel-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--text-3); pointer-events: none; display: flex; }
.sp-sel-ic .phi { width: 15px; height: 15px; }
/* .sp-sel s'applique au <select> caché ET au bouton .cux-trigger généré (qui hérite de la classe) */
.sp-sel { width: 100%; height: 44px; font-size: 13px; font-weight: 600; padding: 0 12px 0 34px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.sp-selwrap .cux-trigger.sp-sel { gap: 8px; }
.sp-selwrap .cux-lbl { flex: 1; text-align: left; }
.sp-selwrap .cux-caret { color: var(--text-3); font-size: 11px; }
.sp-sel:hover { border-color: var(--border-strong); }
.sp-selwrap .cux-trigger.open { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px var(--brand-wash); }
.sp-selwrap .cux-trigger.open .cux-caret { color: var(--brand); }
/* rendu statique pré-généré (SEO, remplacé par l'app au boot) */
.sp-block-static { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 14px; }
.sp-block-static > h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.seo-stats { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; font-size: 13.5px; color: var(--text); }
.seo-related { margin-top: 16px; }
.seo-related > h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.seo-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seo-related a { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; font-size: 13px; color: var(--brand-dark); text-decoration: none; background: var(--card); }
.seo-related a:hover { border-color: var(--brand); }
/* pages légales (mentions, confidentialité, CGU) — autonomes */
.legal-body { margin: 0; background: var(--surface-2); color: var(--ink, #14302a); font-family: var(--font-body); line-height: 1.6; -webkit-text-size-adjust: 100%; }
.legal-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top,0)) 18px 12px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.legal-back { color: var(--brand, var(--brand)); font-weight: 700; text-decoration: none; font-size: 15px; }
.legal-brandname { font-weight: 900; letter-spacing: .3px; }
.legal { max-width: 760px; margin: 0 auto; padding: 24px 20px calc(48px + env(safe-area-inset-bottom,0)); }
.legal h1 { font-size: 26px; margin: 8px 0 4px; }
.legal h2 { font-size: 17px; margin: 26px 0 6px; }
.legal p, .legal li { font-size: 15px; color: #2c3a36; }
.legal ul { padding-left: 22px; margin: 6px 0; }
.legal li { margin: 4px 0; }
.legal a { color: var(--brand-dark, #0d8f68); }
.legal-upd { color: #7a8a85; font-size: 13px; margin-top: 0; }
.legal-lead { background: var(--surface-2); border: 1px solid rgba(18,184,134,.25); border-radius: 12px; padding: 12px 14px; }
.legal-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
/* liens légaux dans l'app (profil/accueil) + notice de confidentialité */
.pf-legal { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.pf-legal a { color: var(--brand-dark, #0d8f68); text-decoration: none; }
.app-footer { margin: 24px auto 8px; padding: 16px; text-align: center; font-size: 12.5px; color: var(--muted, var(--text-2)); }
.app-footer a { color: var(--muted, var(--text-2)); text-decoration: underline; }
.privacy-note { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(72px + env(safe-area-inset-bottom,0)); width: min(560px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 13px 15px; z-index: 60; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.privacy-note p { margin: 0; flex: 1; color: var(--text); }
.privacy-note a { color: var(--brand-dark); }
.privacy-note button { flex: none; border: 0; background: var(--brand); color: #fff; font-weight: 700; border-radius: 9px; padding: 8px 14px; cursor: pointer; }
/* Bandeau de consentement RGPD (opt-in) */
.consent-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(72px + env(safe-area-inset-bottom,0)); width: min(620px, calc(100vw - 20px)); background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 36px rgba(0,0,0,.22); padding: 14px 16px; z-index: 14000; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; }
.consent-txt { flex: 1; min-width: 220px; margin: 0; color: var(--text); line-height: 1.45; }
.consent-txt a { color: var(--brand-dark); }
.consent-btns { display: flex; gap: 8px; flex: none; }
.consent-btns .btn { padding: 9px 16px; }
@media (max-width: 520px) { .consent-banner { bottom: calc(64px + env(safe-area-inset-bottom,0)); } .consent-btns { width: 100%; } .consent-btns .btn { flex: 1; } }
/* Invitation à créer un compte — overlay CENTRÉ, fond FLOUTÉ (1re arrivée sur la carte). Dismissible (× / Plus tard / clic sur le fond). */
.signup-prompt { position: fixed; inset: 0; z-index: 13500; display: grid; place-items: center; padding: 20px; background: rgba(8,30,26,.5); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); animation: sup-fade .28s ease both; }
@keyframes sup-fade { from { opacity: 0; } to { opacity: 1; } }
.signup-card { position: relative; width: min(400px, calc(100vw - 36px)); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--card); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.32); padding: 26px 22px 20px; text-align: center; animation: sup-pop .34s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes sup-pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.signup-card .sup-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 24px; line-height: 1; color: #b3bbb8; cursor: pointer; padding: 4px 6px; }
.signup-card .sup-x:hover { color: var(--muted); }
.sup-hero { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 16px; }
.sup-badge { width: 76px; height: 76px; object-fit: contain; display: block; margin-bottom: 2px; filter: drop-shadow(0 6px 14px rgba(12,138,99,.28)); }
.sup-hero b { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.sup-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sup-perks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; text-align: left; }
.sup-perks li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text); line-height: 1.3; }
.sup-perks li span { font-size: 16px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); }
.sup-btns { display: flex; flex-direction: column; gap: 8px; }
.sup-go { width: 100%; padding: 14px; font-size: 15px; font-weight: 700; font-family: inherit; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #14b886, var(--brand-dark)); box-shadow: 0 8px 20px rgba(12,138,99,.35); cursor: pointer; transition: transform .08s ease, box-shadow .14s ease; }
.sup-go:hover { box-shadow: 0 10px 26px rgba(12,138,99,.45); }
.sup-go:active { transform: scale(.98); }
.sup-later { background: none; border: 0; color: var(--muted); font-size: 13.5px; font-weight: 600; font-family: inherit; padding: 9px; cursor: pointer; border-radius: 10px; transition: background .14s ease, color .14s ease; }
.sup-later:hover { color: var(--text); background: var(--surface-2); }
/* Barrière d'âge : réutilise l'overlay .signup-prompt/.signup-card, au-dessus du bandeau cookies, non fermable au fond. */
.age-gate { z-index: 14500; }
.age-gate .ag-emoji { font-size: 42px; line-height: 1; margin-bottom: 8px; }
.age-gate h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--text); }
.age-gate p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.age-gate .sup-go { margin-bottom: 4px; }
/* perks réutilisés dans la modale d'auth : version compacte */
.auth-perks { margin: 2px 0 12px; gap: 8px; }
.auth-perks li { font-size: 12.5px; }
.auth-perks li span { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
/* Bouton admin « Voir la fiche complète » d'un spot en modération */
.sd-view-full { width: 100%; margin: 6px 0 10px; justify-content: center; border-color: var(--brand-dark); color: var(--brand-dark); font-weight: 600; }
/* Profil public d'un pêcheur (view-uprofile) */
/* Bannière profil public : image uploadée (banner_url) si présente, sinon dégradé décoratif. */
.up-banner { height: 124px; border-radius: 18px 18px 0 0; background: linear-gradient(150deg, #1d6ba8, #0e3a6e 60%, #061e3c); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.up-banner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.13) 1.5px, transparent 1.5px); background-size: 18px 18px; pointer-events: none; }
.up-banner.has-img::before { display: none; } /* pas de pointillés par-dessus une vraie photo */
.up-head { text-align: center; padding: 0 16px 10px; margin-top: -42px; position: relative; } /* l'avatar chevauche la bannière */
.up-av { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-size: 38px; background: radial-gradient(circle at 50% 30%, #2f6fb4, #103a6b); color: #fff; overflow: hidden; border: 4px solid #fff; box-shadow: 0 4px 18px rgba(0,0,0,.22); }
.up-av img { width: 100%; height: 100%; object-fit: cover; }
.up-name { font-size: 21px; font-weight: 800; color: var(--text); }
.up-bio { font-size: 14px; color: var(--text-2); margin: 6px auto 0; max-width: 460px; line-height: 1.4; }
.up-stats { display: flex; justify-content: center; gap: 22px; margin: 12px 0 6px; font-size: 14px; color: var(--text-2); }
.up-stats b { color: var(--text); font-size: 18px; }
.up-av .up-lvl { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: var(--brand-dark); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.up-av { position: relative; }
.up-rang { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.up-xpbar { width: min(300px, 85%); height: 9px; border-radius: 5px; background: var(--surface-2); margin: 10px auto 0; overflow: hidden; }
.up-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #0c8f6a); border-radius: 5px; }
.up-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.up-share, .up-admin { border-color: var(--brand-dark); color: var(--brand-dark); font-weight: 600; }
.up-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 6px 14px 4px; }
.up-ds { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; box-shadow: 0 1px 4px rgba(14,42,36,.05); }
.up-ds-ic { font-size: 18px; }
.up-ds b { display: block; font-size: 15px; color: var(--text); line-height: 1.1; }
.up-ds span { font-size: 11px; color: #6a7672; }
.up-since { text-align: center; font-size: 13px; color: var(--text-2); padding: 8px 14px 0; }
.up-feed-h { font-weight: 700; color: var(--text); padding: 14px 14px 0; }
.up-admin { margin-top: 10px; }
.up-feed { padding: 8px 12px 24px; display: grid; gap: 12px; }
@media (max-width: 520px) { .up-grid { grid-template-columns: repeat(2, 1fr); } }
/* Barre de modération admin sur la fiche d'un spot cloud */
.f-cloudbar { margin: 12px 0; display: grid; gap: 10px; }
.f-admin-mod { border: 1px solid rgba(18,184,134,.4); background: var(--surface-2); border-radius: 14px; padding: 12px; }
.f-admin-h { font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; }
.f-admin-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.f-admin-edit input { flex: 1; min-width: 120px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.f-admin-acts { display: flex; gap: 8px; }
.f-admin-acts .btn { flex: 1; }
/* Social : auteur cliquable + like dans les posts */
.cp-author { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-dark); font-weight: 600; cursor: pointer; }
.cp-author-demo { cursor: default; }
.cp-spot { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-spot:hover { color: var(--brand-dark); }
.cp-like { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; line-height: 1; }
.cp-like.on { color: #e0245e; }
.cp-comment { background: none; border: 0; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; line-height: 1; color: var(--muted); }
.cp-comment:hover { color: var(--text); }
/* Vue commentaires */
.comm-scroll { flex: 1; overflow-y: auto; }
.comm-post { padding: 12px 14px 6px; border-bottom: 1px solid var(--border); }
.comm-post .catch-post { max-width: 520px; margin: 0 auto; }
.comm-post .cp-comment { display: none; } /* sur la page du post, pas de bouton « aller aux commentaires » */
.comm-post-h { max-width: 520px; margin: 10px auto 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
.comm-share { background: none; border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); cursor: pointer; font-family: inherit; }
.comm-share:hover { border-color: var(--brand); }
.comm-list { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 0 auto; }
.comm-thread { display: flex; flex-direction: column; gap: 10px; }
.comm-replies { margin-left: 41px; display: flex; flex-direction: column; gap: 10px; }
.comm-actions { display: flex; gap: 16px; margin-top: 5px; }
.comm-actions button { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.comm-actions button:hover { color: var(--text); }
.comm-like { background: none; border: 0; cursor: pointer; padding: 2px 0 0; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 1px; flex: none; align-self: flex-start; line-height: 1; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.comm-like:active { transform: scale(1.25); }
.comm-like-n { font-size: 11px; color: var(--muted); font-weight: 600; min-height: 12px; }
.comm-reply-hint { max-width: 520px; margin: 0 auto; padding: 7px 14px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); display: flex; align-items: center; gap: 8px; }
.comm-reply-hint b { color: var(--text); }
.comm-reply-hint button { margin-left: auto; background: none; border: 0; color: var(--brand-dark); font-weight: 700; cursor: pointer; font-size: 12.5px; font-family: inherit; }
.comm-row { display: flex; gap: 9px; align-items: flex-start; }
.comm-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.comm-av-pl { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.comm-body { flex: 1; background: var(--card); border-radius: 12px; padding: 7px 11px; border: 1px solid var(--border); }
.comm-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.comm-meta strong { color: var(--text); font-weight: 700; }
.comm-text { font-size: 14px; color: var(--text); line-height: 1.4; word-break: break-word; }
.comm-del { flex: none; background: none; border: 0; cursor: pointer; font-size: 14px; padding: 4px; opacity: .6; align-self: center; }
.comm-empty { text-align: center; color: var(--muted); padding: 36px 16px; font-size: 14px; }
.comm-footer { flex: 0 0 auto; padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; background: var(--card); }
.comm-input { flex: 1; border: 1px solid var(--border); border-radius: 18px; padding: 9px 14px; font-size: 14px; font-family: inherit; resize: none; outline: none; line-height: 1.4; max-height: 100px; overflow-y: auto; }
.comm-input:focus { border-color: var(--brand); }
.comm-send { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: var(--brand); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: transform .09s; }
.comm-send:active { transform: scale(.93); }
.comm-send:disabled { opacity: .5; cursor: default; }
.comm-send svg { width: 17px; height: 17px; }
@keyframes cp-heart-pop { 0% { transform: scale(0); opacity: 1; } 55% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.cp-heart-anim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: cp-heart-pop .65s ease forwards; z-index: 5; }
.cp-heart-anim .phi { width: 76px; height: 76px; color: #fff; filter: drop-shadow(0 4px 16px rgba(0,0,0,.45)); }
.cp-l1 { display: flex; align-items: center; gap: 8px; }
/* Profil : compteurs sociaux, follow, trophées */
.up-social { display: flex; justify-content: center; gap: 22px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.up-social b { color: var(--text); font-size: 16px; }
.up-follow.on { background: var(--surface-2); color: var(--brand-dark); border-color: var(--brand-dark); }
.up-troph-h { font-weight: 700; color: var(--text); padding: 14px 14px 4px; }
.up-troph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 4px 14px 14px; }
.up-medal { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 10.5px; color: var(--text-2); gap: 4px; }
.up-medal svg, .up-medal img.tr-hex { width: 100%; height: auto; }
.up-medal span { display: block; line-height: 1.2; }
/* Contrôle segmenté du feed (Pour toi / Récents / Abonnements) — plein largeur, style iOS */
.feed-scope { display: flex; gap: 3px; width: 100%; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.fs-tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 6px; font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; border: none; background: none; color: var(--text-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.fs-tab .phi { width: 13px; height: 13px; flex: none; }
.fs-tab.on { background: var(--brand-dark); color: #fff; font-weight: 800; box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--brand) 55%, transparent); }
.fs-tab:active { transform: scale(.97); }
/* Cloche de notifications + badge */
.notif-bell { position: relative; appearance: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.notif-bell .ic { width: 23px; height: 23px; }
.notif-bell:active { transform: scale(.92); }
.notif-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #e0245e; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
/* Feed de notifications */
.nf-row { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; background: var(--card); border: 0; border-bottom: 1px solid var(--border); padding: 12px 14px; cursor: pointer; font: inherit; }
.nf-row.unread { background: var(--surface-2); border-left: 3px solid var(--brand); }
.nf-row:active { background: var(--surface-2); }
.nf-av { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 18px; background: radial-gradient(circle at 50% 30%, #2f6fb4, #103a6b); color: #fff; }
.nf-av img { width: 100%; height: 100%; object-fit: cover; }
.nf-txt { flex: 1; min-width: 0; font-size: 14px; color: var(--text); line-height: 1.35; }
.nf-ago { display: block; font-size: 12px; color: #8a948f; margin-top: 2px; }
/* Notifs d'onboarding (CTA synthétiques) : ton accent, action au clic + croix pour ignorer */
.nf-cta { background: var(--brand-wash); border-bottom-color: var(--brand-line); }
.nf-cta:active { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.nf-cta-av { background: linear-gradient(150deg, var(--brand-strong), var(--brand-dark)) !important; }
.nf-cta-av .phi { width: 20px; height: 20px; color: #fff; }
.nf-cta-t { display: block; font-weight: 800; font-size: 14px; color: var(--text); }
.nf-cta-s { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.35; }
.nf-cta-go { flex: none; display: flex; color: var(--brand); }
.nf-cta-go .phi { width: 18px; height: 18px; }
.nf-cta-x { flex: none; background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; margin-left: 2px; -webkit-tap-highlight-color: transparent; }
.nf-cta-x .phi { width: 13px; height: 13px; }
/* Notif d'achievement (niveau / trophée / record) — avatar doré festif */
.nf-ach-av { background: linear-gradient(150deg, #ffd23f, #e0a813) !important; }
.nf-ach-av .phi { width: 20px; height: 20px; color: #5a4200; }
.nf-ach .nf-txt > b { font-size: 14px; font-weight: 800; color: var(--text); }
.nf-ach-s { display: block; font-size: 12px; color: var(--text-2); margin-top: 1px; line-height: 1.35; }
/* En-tête checklist d'onboarding + tâche validée (cochée) */
.nf-onb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.nf-onb-head b { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.nf-onb-prog { font-size: 12px; font-weight: 800; color: var(--brand-dark); background: var(--brand-wash); border: 1px solid var(--brand-line); border-radius: 99px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.nf-cta-done { opacity: .72; }
.nf-cta-done .nf-cta-av.done { background: var(--brand) !important; }
.nf-cta-done .nf-cta-t { font-weight: 700; }
.nf-cta-done .nf-cta-s { color: var(--brand-dark); font-weight: 700; }
/* bouton « Contester » sur une notif de refus de spot */
.nf-contest { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--brand-dark); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px 11px; cursor: pointer; font-family: inherit; }
.nf-contest:hover { border-color: var(--brand); }
.pf-erase { background: var(--surface-2); border: 1px solid rgba(220,80,60,.3); color: #c0392b; border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; margin-top: 8px; }
.pf-erase:hover { border-color: #c0392b; }
/* accessibilité : focus clavier visible */
.sp-block > summary.sp-sec:focus-visible, .sp-slider:focus-visible, .sp-sel:focus-visible, .sp-acc-toggle:focus-visible, .seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* cibles tactiles confortables sur mobile */
@media (max-width: 520px) {
  .sp-slider { height: 34px; }
  .seg button { padding: 12px 6px; min-height: 44px; }
  .page-bar-title { max-width: 58vw; }
}
.sp-acc { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sp-block { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sp-block > summary.sp-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 15px 16px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.sp-block > summary.sp-sec::-webkit-details-marker { display: none; }
.sp-block > summary.sp-sec:hover { background: var(--surface-2); }
.sp-chev { font-size: 22px; line-height: 1; color: #c4c2b8; transition: transform 0.18s ease; flex: none; }
.sp-block[open] > summary.sp-sec { border-bottom: 1px solid var(--border); }
.sp-block[open] .sp-chev { transform: rotate(90deg); color: var(--accent); }
.sp-block-in { padding: 6px 16px 16px; }
.sp-block-reg { background: var(--surface-2); border-color: var(--gold-wash); }
.sp-block-reg[open] > summary.sp-sec { border-bottom-color: #f0d49a; }
.sp-lead { font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 10px 0 2px; }
/* planche d'identification comparative (pleine largeur, cliquable) */
.sp-ident { margin: 12px 0 14px; }
.sp-ident-img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.09); cursor: zoom-in; }
.sp-ident-cap { margin: 6px 2px 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.sp-ident-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.sp-ident-links-lab { font-size: 12px; color: var(--text-2); margin-right: 2px; }
.sp-ident-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 100px; border: 1.5px solid rgba(18,184,134,.4); background: var(--bg); color: var(--brand-dark); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.sp-ident-link:hover { background: var(--brand-wash); border-color: var(--brand); }
.sp-ident-link svg, .sp-ident-link img { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* mini-navigation des sections (longues fiches) */
.sp-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.sp-nav button { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 5px 11px; cursor: pointer; }
.sp-nav button:hover { background: var(--brand-wash); color: var(--brand-dark); }
.sp-mini-h2 { color: #8a5a12; margin-top: 16px; }
.sp-tips-err li { color: #6a4a12; }
.sp-ir { padding: 9px 0; border-top: 1px solid var(--border); }
.sp-ir:first-of-type { border-top: none; }
.sp-ir-l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-2); margin-bottom: 2px; }
.sp-ir-v { font-size: 14px; line-height: 1.5; color: var(--text); }
.sp-techs { display: grid; gap: 8px; margin: 8px 0 4px; }
.sp-tech { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.sp-tech-n { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sp-tech-d { font-size: 13px; line-height: 1.45; color: var(--text-2); margin-top: 2px; }
.sp-reg-warn { margin-top: 12px; font-size: 12px; line-height: 1.45; color: #8a5a12; background: var(--gold-wash); border: 1px solid var(--gold-wash); border-radius: 9px; padding: 9px 11px; }
.sp-tips { margin: 6px 0 0; padding-left: 20px; }
.sp-tips li { font-size: 13.5px; line-height: 1.5; color: var(--text); margin-bottom: 6px; }
.sp-cuisine { display: flex; gap: 11px; align-items: flex-start; margin-top: 12px; background: var(--bg); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.sp-cuisine-ic { font-size: 20px; flex: none; }
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gear-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; text-decoration: none; color: var(--text); }
.gear-card:hover { border-color: var(--accent); background: var(--surface-2); }
.gear-body { flex: 1; min-width: 0; }
.gear-type { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-2); }
.gear-name { font-size: 13.5px; font-weight: 500; }
.gear-cta { font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.gear-note { font-size: 11.5px; color: var(--text-2); margin-top: 9px; }
@media (max-width: 520px) {
  .sp-list-grid { grid-template-columns: repeat(2, 1fr); }
  /* en-tête fiche : on reste EN LIGNE (poisson à gauche du titre) + illustration réduite,
     pour que les stats passent au-dessus de la ligne de flottaison sur mobile */
  .sp-fiche-head { gap: 12px; align-items: flex-start; }
  .sp-fiche-ill { width: 108px; height: 74px; }
  .sp-fiche-ill svg, .sp-fiche-ill img { width: 108px; height: 74px; }
  .f-title { font-size: 20px; }
  .f-title-row { gap: 8px; }
}
#views { position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }
/* Desktop (≥900px) : la nav du bas est masquée → #views occupe toute la hauteur, sinon il reste une bande vide en bas. */
@media (min-width: 900px) { #views { bottom: 0; } }
/* iOS : police >=16px sur les champs en mobile -> empeche le zoom auto au focus */
@media (max-width: 760px) { input, select, textarea { font-size: 16px !important; } }
.view { position: absolute; inset: 0; }
/* overflow-x: hidden explicite → sinon `overflow-y:auto` + x `visible` recalcule x en `auto` (spec CSS)
   et la page devient glissable horizontalement au moindre dépassement (scroll vertical uniquement). */
#view-list, #view-fiche, #view-add, #view-catch, #view-carnet, #view-sortie, #view-enregistrer, #view-species-list, #view-species, #view-trophees, #view-home, #view-profil, #view-uprofile, #view-notifs, #view-evolution, #view-peche, #view-admin, #view-stats, #view-mod, #view-accounts, #view-especes, #view-spots, #view-recherches, #view-regions { overflow-y: auto; overflow-x: hidden; background: var(--bg); }
#view-comments { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }

/* ===== Support / Aide ===== */
.pf-support-btn { width: 100%; justify-content: flex-start; font-size: 13.5px; background: var(--surface-2); color: var(--brand-dark); border-color: rgba(12,138,99,.2); box-shadow: none; min-height: 42px; margin-top: 6px; }
.support-content { max-width: 620px; margin: 0 auto; padding: 16px 16px 60px; }
.sup-intro { font-size: 14px; color: var(--text); line-height: 1.5; background: var(--surface-2); border: 1px solid var(--brand-wash); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.sup-form { display: flex; flex-direction: column; gap: 12px; }
.sup-f-lab { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sup-sel, .sup-inp, .sup-area { font-family: inherit; font-size: 14px; color: var(--text); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; background: var(--card); outline: none; width: 100%; box-sizing: border-box; }
.sup-area { resize: vertical; line-height: 1.45; min-height: 96px; }
.sup-sel:focus, .sup-inp:focus, .sup-area:focus { border-color: var(--brand); }
.sup-send { width: 100%; margin-top: 4px; }
.sup-mine-h { font-size: 15px; font-weight: 800; color: var(--text); margin: 26px 0 10px; }
.sup-ticket { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; }
.sup-t-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sup-t-sub { font-size: 14px; font-weight: 700; color: var(--text); }
.sup-t-msg { font-size: 13px; color: var(--text-2); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sup-t-date { font-size: 11px; color: var(--muted); margin-top: 5px; }
.sup-t-reply { margin-top: 9px; padding: 9px 11px; background: var(--surface-2); border-radius: 10px; font-size: 13px; color: #0c5a43; line-height: 1.45; white-space: pre-wrap; }
.sup-t-st { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.sup-st-open { background: var(--gold-wash); color: #b8780b; }
.sup-st-in_progress { background: var(--surface-2); color: #2f6fb0; }
.sup-st-resolved { background: var(--surface-2); color: var(--brand-dark); }
/* admin */
.st-sec-h { max-width: 760px; margin: 14px auto 8px; padding: 0 4px; font-size: 15px; font-weight: 800; color: var(--text); }
.sup-adm-chips { max-width: 760px; margin: 0 auto 12px; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 7px; }
.sup-chip { background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.sup-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sup-adm-list { max-width: 760px; margin: 0 auto; padding: 0 4px; }
.sup-adm-row { align-items: center; }
.sup-open { flex: none; min-width: 0; padding: 7px 14px; }
.sup-d-h { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.sup-d-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.sup-d-msg { font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--surface-2); border-radius: 11px; padding: 12px 14px; margin-bottom: 14px; }
/* Support — fil de conversation (bulles user/support) + ticket cliquable + zone de réponse */
.sup-ticket-btn { display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.sup-ticket-btn:hover { border-color: var(--brand); }
.sup-thread-box { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; margin-bottom: 12px; }
.sup-bubble { border-radius: 12px; padding: 8px 12px; border: 1px solid var(--border); background: var(--card); }
.sup-bubble.adm { background: var(--surface-2); border-color: var(--brand-wash); }
.sup-b-who { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.sup-bubble.adm .sup-b-who { color: var(--brand-dark); }
.sup-b-body { font-size: 13.5px; color: var(--text); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sup-empty { text-align: center; color: var(--muted); padding: 18px; font-size: 13px; }
.sup-reply-row { display: flex; gap: 8px; align-items: flex-end; }
.sup-reply-row .sup-area { min-height: 42px; }
.sup-reply-row .btn { flex: none; }
.sup-adm-prev { color: var(--text-2); font-size: 12.5px; display: block; margin: 2px 0; }
/* Page d'un ticket (admin) : barre + carte demandeur */
.sup-tk-bar { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sup-req { max-width: 760px; margin: 0 auto 14px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.sup-req-row { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--text); }
.sup-req-lab { flex: 0 0 82px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.sup-req-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand-dark); cursor: pointer; text-decoration: none; text-align: left; }
.sup-req-link:hover { text-decoration: underline; }
.sup-req-muted { color: var(--muted); font-weight: 400; }
.sup-req-account { align-self: flex-start; margin-top: 4px; padding: 7px 13px; font-size: 12.5px; }
.sup-tk-send { max-width: 760px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.sup-tk-send .btn { flex: none; }
#sup-tk-thread, #view-supportadm .sup-thread-box, #view-supportadm .sup-f-lab, #view-supportadm .sup-reply-row { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- vue liste (annonces) ---- */
.list-head { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--border); padding: 16px 16px 14px; }
/* Recherche : loupe À L'INTÉRIEUR du champ, pilule douce, halo au focus */
.list-search { position: relative; max-width: 760px; margin: 0 auto; }
.list-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: flex; }
.list-search-ic .phi { width: 18px; height: 18px; }
.list-search input { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 14px; padding: 0 14px 0 42px; font-size: 15px; outline: none; background: var(--surface-2); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.list-search input::placeholder { color: var(--text-3); }
.list-search input:focus { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px var(--brand-wash); }
.list-chips { display: flex; flex-wrap: wrap; gap: 7px; max-width: 760px; margin: 10px auto 0; }
.list-meta { max-width: 760px; margin: 13px auto 0; font-size: 12.5px; color: var(--text-2); }
.list-grid { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.gcard { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; cursor: pointer; padding: 0; }
.gcard:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.g-img { position: relative; height: 140px; background: var(--surface-2); }
.g-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-badge { position: absolute; left: 8px; top: 8px; color: #fff; font-size: 10.5px; padding: 3px 8px; border-radius: 7px; }
.g-body { padding: 9px 11px; }
.g-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; display: flex; gap: 8px; }
.g-note { color: #ba7517; font-weight: 600; }
.g-price { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }

/* ---- barre de page + fiche pleine page ---- */
.page-bar { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--border); padding: 11px 16px; display: flex; align-items: center; gap: 12px; }
.page-bar-flush { position: static; border-bottom: 0; background: transparent; padding: 2px 0 8px; }
.page-back { display: inline-flex; align-items: center; gap: 5px; flex: none; background: var(--surface-2); color: var(--brand-dark); border: 1px solid rgba(18,184,134,.22); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; padding: 9px 15px 9px 12px; min-height: 38px; border-radius: 99px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .14s ease, border-color .14s ease, transform .09s ease, box-shadow .14s ease; }
.page-back:hover { background: var(--surface-2); border-color: rgba(18,184,134,.45); box-shadow: 0 2px 8px rgba(18,184,134,.16); }
.page-back:active { transform: scale(.94); background: var(--brand-wash); }
.fiche-page { max-width: 720px; margin: 0 auto; padding: 20px 18px 64px; background: var(--card); min-height: calc(100% - 46px); }
.fiche-page .gallery img, .fiche-page .aerial img { height: 220px; }
.fiche-page .f-title { font-size: 24px; }

/* ---- formulaire ajouter ---- */
.add-form { max-width: 620px; margin: 0 auto; padding: 18px 18px 64px; display: flex; flex-direction: column; gap: 13px; }
.add-form > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.add-form input, .add-form select, .add-form textarea { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; color: var(--text); background: var(--card); }
.add-form input:focus, .add-form select:focus, .add-form textarea:focus { border-color: var(--brand); }
.af-loc { border: 1px dashed var(--border); border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.af-label { font-size: 13px; color: var(--text-2); font-weight: 500; }
.af-or { text-align: center; font-size: 12px; color: var(--text-2); }
.af-coords { font-size: 13px; color: var(--text-2); }
.af-coords.ok { color: var(--brand); font-weight: 500; }
.af-prices { border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; }
.af-prices legend { font-size: 13px; color: var(--text-2); padding: 0 4px; }
.af-prices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.af-prices-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.af-error { font-size: 13px; color: #e24b4a; min-height: 1em; }
.af-submit { margin-top: 4px; }

/* ---- sélecteur d'espèce illustré ---- */
.species-pick { position: relative; }
.sp-trigger { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; background: var(--card); font-size: 14px; cursor: pointer; text-align: left; min-height: 42px; }
.sp-trigger .sp-caret { margin-left: auto; color: var(--text-2); }
#sp-trigger-icon { width: 42px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; }
#sp-trigger-icon svg, #sp-trigger-icon .sp-photo { width: 42px; height: 28px; object-fit: contain; }
.sp-photo { width: 100%; height: 100%; object-fit: contain; }
.sp-panel { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 10px; }
#sp-search { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; font-size: 13px; margin-bottom: 9px; outline: none; }
#sp-search:focus { border-color: var(--brand); }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 300px; overflow-y: auto; }
.sp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; }
.sp-item:hover { border-color: var(--brand); background: var(--surface-2); }
.sp-item.fav { border-color: var(--gold-wash); background: var(--surface-2); }
.sp-item-star { position: absolute; top: 4px; right: 5px; font-size: 11px; color: #f4b400; line-height: 1; }
.sp-ill { width: 70px; height: 44px; display: flex; align-items: center; justify-content: center; }
.sp-ill svg { width: 64px; height: 38px; }
.sp-name { font-size: 11px; color: var(--text); text-align: center; line-height: 1.15; }
.sp-credit { font-size: 10.5px; color: var(--text-2); text-align: center; margin-top: 9px; }
@media (max-width: 520px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- quiz « J'ai pêché » (formulaire pas-à-pas) ---- */
.quiz-progress { max-width: 620px; margin: 0 auto; padding: 14px 18px 0; display: flex; align-items: center; gap: 12px; }
.quiz-bar-track { flex: 1; height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.quiz-bar { display: block; height: 100%; width: 16%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); transition: width .28s cubic-bezier(.4,0,.2,1); }
.quiz-count { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.catch-quiz .quiz-step { display: flex; flex-direction: column; gap: 12px; animation: qz-in .26s ease both; }
.catch-quiz .quiz-step[hidden] { display: none; }
@keyframes qz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz-q { font-family: 'Archivo', system-ui, sans-serif; font-size: 23px; font-weight: 800; color: var(--text); margin: 2px 0 0; line-height: 1.15; }
.quiz-sub { font-size: 13.5px; color: var(--muted); margin: -6px 0 2px; }
.qz-search { width: 100%; }
.qz-grid { max-height: 46vh; max-height: 46dvh; }
.sp-item.sel { border-color: var(--brand); background: var(--surface-2); box-shadow: 0 0 0 2px rgba(18,184,134,.25); }
.qz-mesure { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.qz-mesure label { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.catch-quiz .qz-mesure input { width: 100%; font-size: 40px; font-weight: 800; letter-spacing: -1px; text-align: center; padding: 14px 36px 14px 14px; color: var(--text); transition: color .2s; }
.catch-quiz .qz-mesure input.tier-gold { color: var(--gold-deep); }
.catch-quiz .qz-mesure input.tier-silver { color: #6b7d88; }
.catch-quiz .qz-mesure input.tier-bronze { color: #b07a45; }
.catch-quiz .qz-mesure input.tier-base { color: var(--text); }
.qz-unit { position: absolute; right: 14px; bottom: 22px; font-size: 15px; font-weight: 700; color: var(--muted); pointer-events: none; }

/* carte de classement live « top X% de l'espèce » */
.qz-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); animation: qzStatIn .25s ease; }
.qz-stat[hidden] { display: none; }
.qz-stat.tier-gold { background: linear-gradient(135deg, var(--gold-wash), var(--gold-wash)); border-color: var(--gold-wash); }
.qz-stat.tier-silver { background: linear-gradient(135deg, var(--surface-2), var(--surface-2)); border-color: var(--surface-2); }
.qz-stat.tier-bronze { background: linear-gradient(135deg, var(--accent-wash), var(--gold-wash)); border-color: var(--gold-wash); }
.qz-stat-emo { font-size: 34px; line-height: 1; flex: none; }
.qz-stat-main { flex: 1; min-width: 0; }
.qz-stat-pct { font-size: 15px; font-weight: 700; color: var(--text); }
.qz-stat-pct b { font-size: 28px; font-weight: 900; letter-spacing: -.5px; }
.qz-stat-sub { font-size: 12.5px; color: #555; margin-top: 1px; line-height: 1.3; }
.qz-stat-bar { height: 7px; border-radius: 99px; background: rgba(0,0,0,.08); margin-top: 8px; overflow: hidden; }
.qz-stat-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); transition: width .3s cubic-bezier(.4,0,.2,1); }
.qz-stat.tier-gold .qz-stat-bar span { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.qz-stat-2nd { flex: none; text-align: right; font-size: 12px; font-weight: 700; color: #555; line-height: 1.3; }
@keyframes qzStatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qz-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.qz-now { align-self: flex-start; background: var(--surface-2); color: var(--brand-dark); border: 1px solid rgba(18,184,134,.3); border-radius: 99px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.qz-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 16px; border: 2px dashed var(--border); border-radius: 14px; color: var(--brand-dark); font-size: 14px; font-weight: 600; cursor: pointer; background: var(--surface-2); text-align: center; }
.qz-photo-ic { font-size: 30px; }
.qz-recap-card { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: var(--card); box-shadow: 0 4px 18px rgba(14,42,36,.06); }
.qz-recap-sp { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.qz-recap-sp .sp-ill { width: 84px; height: 52px; flex: none; }
.qz-recap-sp .sp-ill svg { width: 80px; height: 48px; }
.qz-recap-sp b { font-size: 19px; font-weight: 800; color: var(--text); }
.qz-recap-rows { display: flex; flex-direction: column; gap: 9px; }
.qz-recap-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 14px; }
.qz-recap-rows span { color: var(--muted); }
.qz-recap-rows b { color: var(--text); font-weight: 700; text-align: right; }
/* récap modifiable : chaque ligne saute à son étape */
.qz-recap-sp { background: none; border-top: 0; border-left: 0; border-right: 0; width: 100%; cursor: pointer; text-align: left; font-family: inherit; -webkit-appearance: none; appearance: none; }
.qz-recap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; background: none; border: none; border-radius: 8px; padding: 5px 6px; margin: 0 -6px; font-size: 14px; cursor: pointer; text-align: left; font-family: inherit; }
.qz-recap-row.qz-recap-static { cursor: default; }
.qz-recap-row:not(.qz-recap-static):active, .qz-recap-row:not(.qz-recap-static):hover, .qz-recap-sp:hover { background: var(--surface-2); }
.qz-recap-row > b { flex: 1; }
.qz-edit { flex: none; font-size: 12px; opacity: .55; }
.qz-recap-sp .qz-edit { margin-left: auto; }
.qz-recap-hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; }
.qz-recap-pts { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.qz-pts-v { font-size: 34px; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.qz-pts-l { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.quiz-nav { display: flex; gap: 10px; margin-top: 18px; }
.quiz-nav .btn { flex: 1; min-width: 0; padding: 14px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.quiz-nav .btn:disabled { opacity: .4; cursor: not-allowed; }
.quiz-nav .qz-prev { flex: 0 0 auto; min-width: 104px; background: var(--surface-2); color: var(--text); }
/* sélecteur de spot (étape lieu) */
.qz-spot-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.qz-chip-btn { background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.qz-chip-btn.accent { background: var(--surface-2); border-color: rgba(18,184,134,.3); color: var(--brand-dark); }
.qz-chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.qz-spot-list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; max-height: 42dvh; overflow-y: auto; }
.qz-spot-sec { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 10px 2px 2px; }
.qz-spot-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; cursor: pointer; }
.qz-spot-row.sel { border-color: var(--brand); background: var(--surface-2); box-shadow: 0 0 0 2px rgba(18,184,134,.25); }
.qz-spot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qz-spot-n { font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-spot-m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-spot-d { flex: none; font-size: 12px; font-weight: 700; color: var(--brand-dark); }
.qz-spot-fav { flex: none; font-size: 18px; color: #c8c8c4; line-height: 1; padding: 4px; }
.qz-spot-fav.on { color: #f4b400; }
.qz-spot-hint { font-size: 13px; color: var(--muted); text-align: center; padding: 22px 14px; line-height: 1.5; }
/* garde-fous anti-doublon */
.qz-spot-warn { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; margin: 10px 0 0; line-height: 1.45; }
.qz-ns-warn { font-size: 12.5px; font-weight: 600; color: #8a5a00; background: var(--gold-wash, rgba(245,197,66,.14)); border: 1px solid var(--gold-wash, rgba(245,197,66,.3)); border-radius: 10px; padding: 8px 11px; line-height: 1.45; }
:root:not([data-theme="light"]) .qz-ns-warn { color: #f5c542; }
/* boutons d'une carte de prise (carnet) : Affiche + Changer le spot */
.cn-card-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.cn-card-btns .btn { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.rs-list { max-height: 52vh; overflow-y: auto; margin-top: 4px; }
/* sélecteur d'espèces dans l'éditeur admin de spot */
.ae-esp-list { max-height: 34vh; overflow-y: auto; margin-top: 4px; }
#ae-esp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
/* anti-doublon : « ces spots existent déjà tout près » (création de spot) */
.ns-near { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ns-near-h { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ns-near-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; cursor: pointer; font: inherit; color: var(--text); }
.ns-near-row.close { border-color: var(--accent); }
.ns-near-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ns-near-b b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-near-b span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-near-d { flex: none; font-size: 12px; font-weight: 800; color: var(--brand-dark); background: var(--surface-2); border-radius: 99px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.ns-near-hint { font-size: 11.5px; color: var(--text-3); }
.ns-near-sat { flex: none; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
/* alerte « pas sur un plan d'eau » (anti-doublon / mauvais placement) */
.ns-water-warn { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text); margin-top: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 12px; padding: 10px 12px; }
.ns-water-warn .phi { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 1px; }
/* Fusion par SÉLECTION MULTIPLE dans la liste des spots du secteur (admin only) */
#sel-toggle { display: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 99px; padding: 4px 10px; margin-left: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s, border-color .2s; }
#sel-toggle .phi { width: 14px; height: 14px; }
#sel-toggle.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* case à cocher sur chaque carte en mode sélection */
.results.sel-mode .card { padding-left: 42px; position: relative; }
.results.sel-mode .card::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--glass-border); background: var(--card);
  transition: background .18s cubic-bezier(0.32,0.72,0,1), border-color .18s; z-index: 1; }
.results.sel-mode .card.sel::before { background: var(--accent); border-color: var(--accent); }
.results.sel-mode .card.sel::after { content: ""; position: absolute; left: 19px; top: 50%; width: 5px; height: 10px; z-index: 1;
  border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: translateY(-62%) rotate(45deg); }
.results.sel-mode .card.sel { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* barre d'action flottante (bas de la carte) */
#sel-bar { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); box-shadow: 0 12px 30px -14px rgba(1,14,11,.65);
  animation: mmUp .3s cubic-bezier(0.32,0.72,0,1) both; }
@keyframes mmUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#sel-bar .sb-count { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
#sel-bar .sb-count b { color: var(--accent); }
#sel-bar .sb-merge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--on-brand);
  background: var(--accent); border: none; border-radius: 99px; padding: 9px 15px; cursor: pointer;
  transition: transform .2s cubic-bezier(0.32,0.72,0,1), filter .2s; -webkit-tap-highlight-color: transparent; }
#sel-bar .sb-merge:active { transform: scale(0.97); }
#sel-bar .sb-merge[disabled] { opacity: .45; filter: grayscale(.4); pointer-events: none; }
#sel-bar .sb-merge .phi { width: 15px; height: 15px; }
/* chooser « quel spot garder ? » */
.mgc-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 2px 0 12px; }
.mgc-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.mgc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--glass-border); border-radius: 13px; padding: 9px 11px; color: var(--text);
  transition: border-color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.mgc-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mgc-sat { flex: none; width: 42px; height: 42px; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.mgc-b { flex: 1; min-width: 0; }
.mgc-b b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgc-b span { font-size: 11px; color: var(--text-3); }
.mgc-keep { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); opacity: 0; transition: opacity .2s; }
.mgc-row.on .mgc-keep { opacity: 1; }
/* visite guidée (1re visite) */
.tour-ov { position: fixed; inset: 0; z-index: 60; background: rgba(5,18,15,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tour-card { position: relative; width: min(400px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: no-preference) { .tour-card { animation: viewIn var(--dur-2, .22s) var(--ease-out, ease) both; } }
.tour-skip { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 18px; color: var(--text-3); cursor: pointer; padding: 4px 8px; }
.tour-ic { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.tour-t { margin: 0 0 8px; font-size: 20px; font-weight: 900; color: var(--text); }
.tour-s { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--surface-3); transition: width .18s ease; }
.tour-dots i.on { background: var(--brand); width: 18px; }
.tour-btns { display: flex; gap: 8px; }
.tour-btns .btn { flex: 1; }
/* tuto « Installer l'app » */
.inst-hero { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.inst-appicon { width: 54px; height: 54px; border-radius: 13px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.inst-hero-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inst-hero-b b { font-size: 14.5px; color: var(--text); }
.inst-hero-b span { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.inst-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; padding: 4px; margin-bottom: 10px; }
.inst-seg-btn { border: 0; background: none; border-radius: 10px; padding: 10px 6px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: background .15s ease, color .15s ease; }
.inst-seg-btn.on { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(18,184,134,.3); }
.inst-box { display: flex; flex-direction: column; gap: 8px; }
.inst-step { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.inst-n { flex: none; width: 22px; height: 22px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.inst-emo { flex: none; font-size: 18px; width: 24px; text-align: center; }
.inst-txt { font-size: 13.5px; line-height: 1.4; color: var(--text); min-width: 0; }
.inst-txt small { color: var(--text-2); }
.inst-foot { margin-top: 10px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; line-height: 1.4; }
.inst-ok { font-size: 13.5px; font-weight: 700; color: var(--brand-dark); background: var(--surface-2); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }
.inst-native { width: 100%; margin: 0 0 10px; }
/* panneau nouveau spot */
.qz-newspot { display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(18,184,134,.3); background: var(--surface-2); border-radius: 14px; padding: 14px; }
.qz-ns-title { font-size: 15px; font-weight: 800; color: var(--text); margin: 0; }
.qz-ns-pos { display: flex; gap: 8px; }
.qz-ns-pos .btn { flex: 1; min-width: 0; padding: 11px; font-size: 13px; }
.qz-ns-actions { display: flex; gap: 8px; }
.qz-ns-actions .btn { flex: 1; min-width: 0; padding: 11px; }
/* toggle approximatif + astuce */
.qz-approx { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; line-height: 1.4; }
.qz-approx input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--brand); }
/* P1-A — technique de pêche (chips single-select COLORÉS) + relâché/gardé */
.qz-field-lab { font-size: 13px; font-weight: 700; color: var(--text); margin: 2px 0 -4px; }
.qz-tech { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-tech-chip { --tc: #8a9d96; background: color-mix(in srgb, var(--tc) 12%, var(--surface-2)); color: var(--text); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.qz-tech-chip:hover { border-color: var(--tc); }
.qz-tech-chip.on { background: var(--tc); border-color: var(--tc); color: #fff; }
/* palette par technique (formulaire + tags des cartes) */
.qz-tech-chip[data-t="leurre"], .cp-tag-t[data-t="leurre"] { --tc: #e8551f; }
.qz-tech-chip[data-t="appat"], .cp-tag-t[data-t="appat"] { --tc: #a9722f; }
.qz-tech-chip[data-t="coup"], .cp-tag-t[data-t="coup"] { --tc: #2f9e44; }
.qz-tech-chip[data-t="feeder"], .cp-tag-t[data-t="feeder"] { --tc: #66a80f; }
.qz-tech-chip[data-t="bouillette"], .cp-tag-t[data-t="bouillette"] { --tc: #b8860b; }
.qz-tech-chip[data-t="mouche"], .cp-tag-t[data-t="mouche"] { --tc: #7048e8; }
.qz-tech-chip[data-t="toc"], .cp-tag-t[data-t="toc"] { --tc: #1c7ed6; }
.qz-tech-chip[data-t="surface"], .cp-tag-t[data-t="surface"] { --tc: #0ca678; }
.qz-tech-chip[data-t="vif"], .cp-tag-t[data-t="vif"] { --tc: #e64980; }
.qz-tech-chip[data-t="verticale"], .cp-tag-t[data-t="verticale"] { --tc: #3b5bdb; }
.qz-tech-chip[data-t="surfcasting"], .cp-tag-t[data-t="surfcasting"] { --tc: #1098ad; }
.qz-tech-chip[data-t="traine"], .cp-tag-t[data-t="traine"] { --tc: #f08c00; }
.qz-tech-chip[data-t="autre"], .cp-tag-t[data-t="autre"] { --tc: #8a9d96; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cp-tag { font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px; }
.cp-tag-t { --tc: #8a9d96; color: var(--tc); border-color: color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 10%, var(--surface-2)); }
.cp-tag-rel { color: var(--brand-dark); border-color: rgba(18,184,134,.4); background: rgba(18,184,134,.08); }
/* bascule relâché/gardé : poisson à l'endroit + cadre vert / poisson ventre en l'air + cadre orangé */
.qz-released .qz-rel-ic { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.qz-released .qz-rel-ic svg { width: 24px; height: 24px; transition: transform .25s ease, color .25s; }
@media (prefers-reduced-motion: reduce) { .qz-released .qz-rel-ic svg { transition: none; } }
.qz-released.on { border-color: rgba(18,184,134,.55); background: rgba(18,184,134,.08); }
.qz-released.on .qz-rel-ic svg { color: var(--brand); }
.qz-released.off { border-color: rgba(232,101,63,.45); background: rgba(232,101,63,.07); }
.qz-released.off .qz-rel-ic svg { transform: scaleY(-1); color: #e0653f; }
/* mini-boutons Modifier / Supprimer du carnet */
.cn-mini-row { display: flex; gap: 6px; }
.cn-mini { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 0; cursor: pointer; color: var(--text-2); }
.cn-mini svg { width: 15px; height: 15px; }
.cn-mini:hover { border-color: var(--brand); color: var(--text); }
.cn-del:hover { border-color: #e0653f; color: #e0653f; }

/* P1-B — session vivante : chip persistante + panneau + mini-carte « où ça a mordu » */
.live-chip { position: fixed; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 8px; background: var(--brand); color: #06231a; border: none; border-radius: 999px; padding: 11px 16px; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: livechip-halo 2s ease-in-out infinite; }
.live-chip[hidden] { display: none; }
.live-chip:active { transform: scale(.97); }
/* halo qui pulse autour de tout le bouton (anneau en expansion) */
@keyframes livechip-halo {
  0%   { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb, var(--brand) 70%, transparent); }
  70%  { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 12px color-mix(in srgb, var(--brand) 0%, transparent); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
}
.live-pulse { width: 10px; height: 10px; border-radius: 50%; background: #e8551f; flex: none; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,85,31,.5); } 50% { box-shadow: 0 0 0 6px rgba(232,85,31,0); } }
@media (prefers-reduced-motion: reduce) { .live-pulse, .live-chip { animation: none; } }
.live-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 15px; }
.live-head b { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.live-spot { color: var(--text-2); font-size: 13px; margin-left: auto; text-align: right; }
.live-map { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); aspect-ratio: 1; max-height: 260px; }
.live-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-map-cap { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.live-dot-c { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #ff6b3d; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.live-dot-s { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.live-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 180px; overflow-y: auto; }
.live-row { display: flex; align-items: baseline; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.live-row span { color: var(--text-2); }
.live-row small { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.live-empty { font-size: 13.5px; color: var(--text-2); margin: 4px 0 12px; }
.live-add { width: 100%; margin-bottom: 8px; }
.live-endbtn { width: 100%; margin-bottom: 10px; }
.live-cancel { background: none; border: none; color: var(--text-3); font-size: 12px; text-decoration: underline; cursor: pointer; display: block; margin: 0 auto; }
.enr-ic-live { display: flex; align-items: center; justify-content: center; }
.enr-card-live { border-color: rgba(18,184,134,.45); }
.qz-tip { font-size: 12.5px; color: #8a5a00; background: var(--gold-wash); border: 1px solid var(--gold-wash); border-radius: 12px; padding: 11px 13px; line-height: 1.45; }
.qz-tip[hidden] { display: none; }
/* avertissement réserve de pêche (pêche interdite) — détail de spot */
.f-reserve-warn { display: flex; gap: 8px; align-items: flex-start; background: var(--accent-wash); border: 1px solid var(--accent-wash); color: #8a1f1a; border-radius: 12px; padding: 11px 13px; margin: 8px 0 2px; font-size: 13px; line-height: 1.45; }
.f-reserve-warn b { color: #6e1410; }
.c-reserve { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #8a1f1a; background: var(--accent-wash); border: 1px solid var(--accent-wash); border-radius: 7px; padding: 2px 8px; }
.g-reserve { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 800; color: #fff; background: #c0392b; border-radius: 7px; padding: 3px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* étape photo : boutons prendre/ajouter + grille d'aperçus (jusqu'à 6) */
.qz-photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-photo-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 10px; border-radius: 14px; border: 1.5px solid rgba(18,184,134,.28); background: var(--surface-2); color: var(--brand-dark); font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.2; transition: background .14s ease, border-color .14s ease, transform .09s ease; -webkit-tap-highlight-color: transparent; }
.qz-photo-btn.cam { background: var(--brand); border-color: var(--brand); color: #fff; }
.qz-photo-btn:hover { border-color: var(--brand); }
.qz-photo-btn:active { transform: scale(.97); }
.qz-photo-btn.full { opacity: .45; pointer-events: none; }
.qz-photo-btn-ic { font-size: 24px; line-height: 1; }
.qz-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.qz-photo-grid:empty { margin-top: 0; }
.qz-ph-thumb { position: relative; aspect-ratio: 1/1; border-radius: 11px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.qz-ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qz-ph-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(20,20,20,.62); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.qz-ph-del:hover { background: #c0392b; }

/* suggestion « tu es probablement à <spot> » (sélecteur de spot) */
.qz-spot-suggest { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 13px; margin-bottom: 8px; border-radius: 13px; border: 1.5px solid var(--brand); background: linear-gradient(135deg, var(--surface-2), var(--surface-2)); cursor: pointer; transition: transform .09s ease, box-shadow .14s ease; -webkit-tap-highlight-color: transparent; }
.qz-spot-suggest:hover { box-shadow: 0 3px 14px rgba(18,184,134,.22); }
.qz-spot-suggest:active { transform: scale(.985); }
.qz-sugg-ic { font-size: 22px; flex: none; }
.qz-sugg-b { display: flex; flex-direction: column; min-width: 0; }
.qz-sugg-t { font-size: 14px; color: var(--text); }
.qz-sugg-s { font-size: 12px; color: var(--brand-dark); font-weight: 700; margin-top: 1px; }

/* badge « localisation vérifiée » */
.geo-verif { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: #0c6b4f; background: var(--surface-2); border: 1px solid var(--brand-wash); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.ca-result-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--muted); margin: 6px 0 2px; }
/* photos */
.qz-photo.done { border-style: solid; border-color: var(--brand); background: var(--surface-2); color: var(--brand-dark); }
.qz-proof { margin-top: 4px; }
.qz-proof[hidden] { display: none; }
.qz-proof-head { font-size: 12px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; }
.qz-proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.qz-photo.sm { padding: 16px 10px; font-size: 12.5px; }
.qz-photo.sm .qz-photo-ic { font-size: 22px; }
.qz-photo-ic .phi { width: 24px; height: 24px; }
.qz-photo.sm .qz-photo-ic .phi { width: 21px; height: 21px; }
/* bannière « placer un point » sur la carte (avec bouton retour) */
.pick-banner { position: absolute; top: 0; left: 0; right: 0; z-index: 25; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: var(--brand-dark); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.pick-banner[hidden] { display: none; }
/* pendant le placement : la recherche/filtres du haut sont masqués (la bannière prend le haut) */
#view-map.picking #map-chips { display: none; }            /* placement : on masque les filtres… */
#view-map.picking #map-top { top: var(--pick-h, 64px); }   /* …mais on garde la recherche, sous la bannière */
/* vision satellite d'un spot : bannière retour vers la fiche, on décale la barre du haut */
.sat-banner { background: #15332b; }                       /* nuance distincte du mode placement */
#view-map.sat-view #map-chips { display: none; }
#view-map.sat-view #map-top { top: var(--sat-h, 64px); }
/* marqueur « moi » sur la carte = photo de profil (remplace le point bleu par défaut) */
.user-loc-marker { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--brand); background: var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.4); overflow: hidden; display: grid; place-items: center; }
.user-loc-marker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-loc-marker span { font-size: 22px; line-height: 1; }
.maplibregl-user-location-dot { display: none !important; }
.pick-cancel { flex: none; background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 99px; padding: 8px 15px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pick-msg { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.pick-confirm-btn { flex: none; background: #fff; color: var(--brand-dark); border: none; border-radius: 99px; padding: 9px 16px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); -webkit-tap-highlight-color: transparent; }
.pick-confirm-btn:active { transform: scale(.97); }
.pick-confirm-btn[hidden] { display: none; }

/* ---- marque ---- */
.brand { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.brand .logo { font-size: 20px; }
.seg { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; border: none; background: var(--card); padding: 8px 4px; font-size: 12.5px; color: var(--text-2); cursor: pointer; border-left: 1px solid var(--border); }
.seg button:first-child { border-left: none; }
.seg button.on { background: var(--brand); color: #fff; }
.chips-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.cmini { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 99px; background: var(--card); font-size: 11.5px; line-height: 1; cursor: pointer; color: var(--text); }
.cmini .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmini.on { border-color: var(--brand); background: var(--surface-2); }
.cmini:not(.on) { opacity: 0.4; }
/* filtre espèce custom (popover : recherche + favoris → courantes → toutes) */
.pop-species { width: min(360px, calc(100vw - 24px)); padding: 8px; }
.fsp-search { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-size: 16px; outline: none; margin-bottom: 6px; box-sizing: border-box; }
.fsp-search:focus { border-color: var(--brand); }
.fsp-list { max-height: 50vh; max-height: 50dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
/* chips catégorie en haut du filtre espèce (carnassier, carpe…) */
.fsp-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.fsp-cat { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 99px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .09s ease; }
.fsp-cat:hover { border-color: var(--brand); }
.fsp-cat:active { transform: scale(.96); }
.fsp-cat.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fsp-sec { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 9px 4px 2px; }
.fsp-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 6px 8px; cursor: pointer; color: var(--text); }
.fsp-row:hover { background: var(--surface-2); }
.fsp-row.sel { background: var(--surface-2); }
.fsp-ic { width: 40px; height: 26px; flex: none; display: grid; place-items: center; }
.fsp-ic svg { width: 40px; height: 26px; }
.fsp-ic img.sp-photo { max-width: 40px; max-height: 26px; object-fit: contain; }
.fsp-ic.fsp-all { font-size: 18px; }
.fsp-n { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsp-fav { flex: none; font-size: 15px; color: #c8c8c4; padding: 2px 5px; line-height: 1; }
.fsp-fav.on { color: #f4b400; }
.fsp-reset .fsp-n { font-weight: 700; }
.fsp-empty { font-size: 13px; color: var(--muted); padding: 16px; text-align: center; }
.fsp-chk { margin-left: auto; color: var(--brand); font-size: 14px; font-weight: 700; flex: none; }
.fsp-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 2px; border-bottom: 1px solid var(--border); }
.fsp-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); color: var(--brand-dark); font-size: 12px; font-weight: 600; padding: 3px 6px 3px 9px; border-radius: 20px; }
.fsp-tag-x { background: none; border: none; color: var(--brand-dark); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; opacity: .65; }
.fsp-tag-x:hover { opacity: 1; }
.list-filters { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin: 10px auto 0; position: relative; }
.list-filters .map-pop { top: calc(100% + 6px); left: 0; position: absolute; }
/* menu déroulant custom générique (remplace tous les <select> natifs) */
.cux { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.cux-block { display: flex; width: 100%; }
select.cux-native { display: none !important; }
.cux-trigger { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; max-width: 100%; }
.cux-block .cux-trigger { width: 100%; }
.cux-trigger .cux-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cux-caret { font-size: 10px; opacity: .65; flex: none; margin-left: auto; }
.cux-trigger:not(.fchip):not(.sp-sel) { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 16px; background: var(--card); color: var(--text); text-align: left; }
.cux-trigger:not(.fchip):not(.sp-sel).open { border-color: var(--brand); }
.cux-panel { position: fixed; z-index: 12000; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 5px; max-height: 52vh; max-height: 52dvh; overflow-y: auto; min-width: 150px; }
.cux-panel[hidden] { display: none; }
.cux-opt { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; }
.cux-opt:hover { background: var(--surface-2); }
.cux-opt.on { background: var(--surface-2); font-weight: 700; color: var(--brand-dark); }
/* quiz ajout de spot : grille des types + note de vérification + badge en attente */
.af-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.af-cat-card { display: flex; align-items: center; gap: 9px; padding: 13px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; color: var(--text); }
.af-cat-card .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.af-cat-card.sel { border-color: var(--brand); background: var(--surface-2); box-shadow: 0 0 0 2px rgba(18,184,134,.25); }
.qz-verify-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #8a5a00; background: var(--gold-wash); border: 1px solid var(--gold-wash); border-radius: 12px; padding: 12px 14px; }
/* multi-sélecteur d'espèces (ajout de spot) */
.afe-grid { max-height: 42vh; max-height: 42dvh; overflow-y: auto; margin-top: 4px; }
.afe-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.afe-selected:empty { display: none; }
.afe-chip { background: var(--brand); color: #fff; border: none; border-radius: 99px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
/* --- Étape « Infos pratiques » : sections en cartes + menu déroulant espèces --- */
.afi-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 9px; }
.afi-card-h, .af-prices.afi-card legend { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: var(--text); }
.afi-ic { font-size: 17px; line-height: 1; }
.afi-opt { font-weight: 500; font-size: 12px; color: var(--muted); }
.afi-textarea, .afi-card > input:not([type=file]), .afi-card > select, .afi-card > textarea, .afi-card label.qz-field input, .afi-card label.qz-field select, .afi-card label.qz-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--text); background: var(--card); outline: none; resize: vertical; }
.afi-textarea:focus, .afi-card > input:focus, .afi-card > select:focus, .afi-card > textarea:focus, .afi-card label.qz-field input:focus, .afi-card label.qz-field textarea:focus { border-color: var(--brand); }
.afi-card select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230e2a24' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
/* en modale, cartes plus légères (pas de double cadre lourd) */
.modal-card .afi-card { background: var(--surface-2); padding: 11px 12px; margin-bottom: 9px; gap: 8px; }
.af-prices.afi-card { border: 1px solid var(--border); }
.af-prices.afi-card legend { padding: 0; float: none; }
/* puces de sélection */
.afi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.afi-empty { font-size: 12.5px; color: var(--muted); }
/* menu déroulant */
.afi-dd { position: relative; }
.afi-toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); color: var(--brand-dark); border: 1px dashed rgba(18,184,134,.5); border-radius: 11px; padding: 10px 14px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; justify-content: center; transition: background .14s ease; }
.afi-toggle:hover { background: var(--surface-2); }
.afi-caret { transition: transform .18s ease; }
.afi-toggle.open .afi-caret { transform: rotate(180deg); }
.afi-panel { margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.afi-panel[hidden] { display: none; }
.afi-list { max-height: 38vh; max-height: 38dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.afi-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 6px 8px; cursor: pointer; color: var(--text); }
.afi-row:hover { background: var(--surface-2); }
.afi-row.on { background: var(--surface-2); }
.afi-row-ic { width: 46px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 7px; }
.afi-row-ic svg, .afi-row-ic img { max-width: 44px; max-height: 26px; object-fit: contain; }
.afi-row-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.afi-row-chk { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 14px; color: var(--muted); border: 1px solid var(--border); }
.afi-row.on .afi-row-chk { background: var(--brand); color: #fff; border-color: var(--brand); }
.geo-retry { background: var(--brand); color: #fff; border: none; border-radius: 99px; padding: 3px 11px; font-size: 12px; font-weight: 700; cursor: pointer; margin-left: 4px; }
.catch-spot-lock { max-width: 620px; margin: 8px auto 0; padding: 9px 18px 0; font-size: 13px; color: var(--brand-dark); }
.catch-spot-lock[hidden] { display: none; }
/* autocomplétion d'adresse (suggestions BAN) */
#map-search { position: relative; }
.addr-ac { position: relative; display: block; }
.addr-ac input { width: 100%; box-sizing: border-box; }
.addr-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 5px; max-height: 44vh; max-height: 44dvh; overflow-y: auto; }
.addr-suggest[hidden] { display: none; }
.addr-opt { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.addr-opt:hover { background: var(--surface-2); }
.addr-opt b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.addr-opt span { font-size: 11.5px; color: var(--muted); }
/* effets festifs */
.confetti-cv { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.poster-img { animation: poster-stamp .5s cubic-bezier(.2,.8,.25,1.4) both; }
@keyframes poster-stamp { 0% { opacity: 0; transform: scale(.62) rotate(-4deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.rw-line.rec, .rw-line.first { color: #b8860b; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .poster-img { animation: none; } }
/* Pack récap visuel : icônes type + mini-carte du lieu + pin qui tombe */
.af-cat-emo { font-size: 20px; flex: none; }
.af-cat-name { line-height: 1.15; }
.qz-recap-map { position: relative; display: block; width: 100%; height: 140px; padding: 0; border: none; border-radius: 12px; overflow: hidden; margin-bottom: 12px; cursor: pointer; background: var(--surface-2); }
.qz-recap-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qz-recap-mappin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); animation: pin-drop .5s cubic-bezier(.2,.8,.25,1.4) both; }
@keyframes pin-drop { 0% { opacity: 0; transform: translate(-50%, -185%); } 100% { opacity: 1; transform: translate(-50%, -100%); } }
.af-coords.ok { animation: coords-pop .35s ease both; }
@keyframes coords-pop { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qz-recap-mappin, .af-coords.ok { animation: none; } }
/* Pack fluidité carte : ripple au tap + état vide */
.spot-ripple { width: 16px; height: 16px; border-radius: 50%; background: rgba(18,184,134,.55); animation: spot-ripple .85s ease-out forwards; }
@keyframes spot-ripple { 0% { transform: scale(.4); opacity: .85; } 100% { transform: scale(4.6); opacity: 0; } }
.results-empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.results-empty .re-emo { font-size: 34px; display: block; margin-bottom: 8px; }
.results-empty p { font-size: 14px; margin: 0 0 14px; line-height: 1.5; }
/* section « Prises sur ce spot » (fiche d'un spot) */
.f-prises { margin-top: 16px; }
.f-prises-h { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
/* fiche spot réorganisée : actions rapides, sections, infos repliables, bouton météo */
.f-cta { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.f-cta .btn { flex: 1; min-width: 0; padding: 12px; font-size: 14px; font-weight: 700; }
/* Réservation vers la source (rentalake…) : CTA accentué, prend toute la largeur (intention forte) */
.f-book { flex: 1 0 100% !important; background: var(--accent); color: #fff; border: none; box-shadow: 0 4px 14px rgba(255,107,61,.28); }
.f-book:hover { background: var(--accent-deep); }
.f-book .phi { color: #fff; }
.f-book-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); margin: 2px 2px 8px; }
.f-book-star { width: 14px; height: 14px; color: var(--gold, #f2b736); }
.f-sec { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
.f-esp-decl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.f-infos { margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.f-infos summary { cursor: pointer; padding: 13px 14px; font-weight: 700; font-size: 14px; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.f-infos summary::-webkit-details-marker { display: none; }
.f-infos summary::after { content: "▾"; color: var(--muted); font-size: 12px; transition: transform .2s ease; }
.f-infos[open] summary::after { transform: rotate(180deg); }
.f-infos-body { padding: 2px 14px 12px; }
.bite { margin: 12px 0; }
.bite-more { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; padding: 10px 13px; background: var(--surface-2); border: 1px solid var(--brand-wash); border-radius: 10px; font-size: 13px; font-weight: 600; color: #0c6b4f; cursor: pointer; text-align: left; gap: 6px; }
.bite-more span { font-size: 18px; opacity: .55; line-height: 1; flex: none; }
.bite-more:active { background: var(--brand-wash); }
.pe-back-fiche { display: inline-flex; align-items: center; margin-bottom: 8px; padding: 4px 0; font-weight: 700; }
/* contribuer : photo + revendiquer (pills jumelles, sous la galerie) */
.f-contrib { display: flex; gap: 8px; margin: 8px 0 4px; }
.f-contrib .add-photo, .f-contrib .claim-btn { flex: 1; min-width: 0; margin: 0; padding: 10px; text-align: center; border-radius: 10px; font-size: 13px; font-weight: 700; border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.f-contrib .add-photo { color: var(--brand-dark); }
.f-contrib .add-photo:hover, .f-contrib .claim-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
/* avis soignés */
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.rev-sec { margin: 0 !important; }
.rev-avg { background: var(--gold-wash); color: #b8860b; font-weight: 800; padding: 4px 11px; border-radius: 99px; font-size: 13px; }
.rev-list { display: flex; flex-direction: column; gap: 8px; }
.rev-av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; font-size: 13px; }
.rev-hb { display: flex; flex-direction: column; line-height: 1.2; }
.rev-hb .rev-date { margin-left: 0; }
.rev-h .rev-stars { margin-left: auto; }
.rev-form-t { font-weight: 800; font-size: 14px; color: var(--text); }
.rv-stars { font-size: 28px; }
/* retour tactile global : léger enfoncement au toucher (off si animations réduites) */
@media (prefers-reduced-motion: no-preference) {
  .btn, .bnav, .fchip, .cmini, .sp-item, .card, .gcard, .af-cat-card, .qz-spot-row, .fsp-row, .cux-opt, .addr-opt, .seg button, .qz-chip-btn, .pf-fav, .catch-card, .qz-recap-row, .af-cat-emo { transition: transform .09s ease; }
  .btn:active, .bnav:active, .fchip:active, .cmini:active, .sp-item:active, .card:active, .gcard:active, .af-cat-card:active, .qz-spot-row:active, .fsp-row:active, .cux-opt:active, .addr-opt:active, .seg button:active, .qz-chip-btn:active, .pf-fav:active, .catch-card:active, .qz-recap-row:active { transform: scale(.97); }
}
.pending-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #8a5a00; background: var(--gold-wash); border: 1px solid var(--gold-wash); border-radius: 99px; padding: 2px 9px; }
/* back-office (validation des spots) */
.pf-admin-btn { width: 100%; justify-content: flex-start; font-size: 13.5px; background: var(--surface-2); color: var(--muted); border-color: var(--border); box-shadow: none; min-height: 42px; margin-top: 6px; }
.admin-page { max-width: 720px; margin: 0 auto; padding: 16px 16px 64px; }
.admin-sub { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.admin-empty { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; padding: 48px 20px; }
.admin-card { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(14,42,36,.05); }
.admin-thumb { width: 84px; height: 84px; flex: none; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.admin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-title { font-size: 15px; font-weight: 800; color: var(--text); }
.admin-meta { font-size: 12.5px; color: var(--muted); }
.admin-actions { display: flex; gap: 8px; margin-top: 8px; }
.admin-actions .btn { flex: 1; min-width: 0; padding: 9px; font-size: 13px; }
.admin-sec-h { font-size: 14px; font-weight: 800; color: var(--text); margin: 18px 0 10px; padding-bottom: 5px; border-bottom: 2px solid rgba(18,184,134,.25); }
.admin-sec-h:first-child { margin-top: 0; }
.admin-empty-sm { color: var(--muted); font-size: 13px; padding: 6px 2px 12px; }
.admin-card-edit { border-left: 3px solid #ba7517; }
.admin-tag { display: inline-block; background: var(--gold-wash); color: #b8690b; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 99px; }
.admin-edit-msg { font-size: 13.5px; color: var(--text); line-height: 1.45; margin: 6px 0; white-space: pre-wrap; }
.admin-no { color: #c0392b; border-color: #f3c0b8; }
.chips { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.chip { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 5px 9px; border: 1px solid var(--border); border-radius: 9px; user-select: none; }
.chip.off { opacity: 0.45; }
.chip input { accent-color: var(--brand); }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
/* Contrôles carte empilés (bas-droite) : conteneur flex -> plus jamais de chevauchement, quel que soit l'écran ou le nombre de boutons. */
#map-switches { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* z-index 5 > légendes (4) : le menu des couches passe DEVANT la jauge de profondeur */
#map-switches.sheet-covered { opacity: 0; pointer-events: none; }
.map-switch { display: inline-flex; align-items: center; gap: 7px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 8px 13px 8px 11px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: opacity .2s ease, background .18s ease, color .18s ease; }
.map-switch:hover { background: var(--surface-2); }
/* Légende du filtre espèce : code couleur des points (attesté vs supposition) */
.esp-legend { align-self: flex-start; max-width: 100%; display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: 10px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.12); pointer-events: none; }
.esp-legend[hidden] { display: none; }
.esp-legend i { color: var(--text-2); font-weight: 500; font-style: italic; }
.esp-legend .el-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.esp-legend .el-dot:not(:first-child) { margin-left: 7px; }
.esp-legend .el-avere { background: var(--brand); }
.esp-legend .el-reg { background: #ff9f1c; }
.map-switch .ms-layers { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.map-switch.sheet-covered { opacity: 0; pointer-events: none; }
.map-switch.on { background: var(--ink); color: #fff; border-color: var(--text); }
.map-switch.on:hover { background: #15332b; }
.map-switch-hydro .ms-drop { font-size: 16px; line-height: 1; }
.map-switch-hydro.on { background: var(--glacier); color: #04202a; border-color: var(--glacier); }
.map-switch-hydro.on:hover { background: #7fe0ee; }
.map-switch-wind .ms-drop { font-size: 15px; line-height: 1; }
.map-switch-wind.on { background: #3d83c6; color: #fff; border-color: #3d83c6; }
.map-switch-wind.on:hover { background: #356fb0; }
.map-switch-marine .ms-anchor { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-switch-marine.on { background: #1c5674; color: #fff; border-color: #1c5674; }
.map-switch-marine.on:hover { background: #174a64; }
/* Objets identifiés au tap (popup carte marine) */
.bty-pop-obj { margin-top: 7px; }
.bty-pop-obj b { display: block; font-size: 12.5px; line-height: 1.3; }
.bty-pop-obj span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.map-switch-legend { padding: 6px 11px 6px 9px; font-size: 12px; }
.map-switch-legend .ms-anchor { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Légende de la carte marine (modale) — images de légende OFFICIELLES SHOM sur fond blanc */
.mleg { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow-y: auto; padding: 2px 2px 6px; margin-top: 10px; }
.mleg-sec { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin: 6px 2px 0; }
/* ligne = icône officielle SHOM (sprite dpi 270 = grande, pastille blanche) + texte lisible */
.mleg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }
.mgl-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mgl-i { width: 115px; height: 111px; flex: none; background-color: #fff; background-repeat: no-repeat; background-size: 115px auto; border: 1px solid var(--border); border-radius: 14px; }
.mgl-t { min-width: 0; }
.mgl-t b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.25; }
.mgl-t span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
/* Bouton jour/nuit : icône SEULE (lune/soleil), bouton carré compact */
.map-switch-daynight { padding: 9px; gap: 0; }
.map-switch-daynight .phi { width: 20px; height: 20px; display: block; }
/* Bouton jour/nuit déplacé dans la pile de contrôles carte (haut-droite, sous zoom + géoloc) */
.ms-dn-ctrl { overflow: hidden; }
.ms-dn-ctrl .map-switch-daynight { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--card); display: flex; align-items: center; justify-content: center; }
.ms-dn-ctrl .map-switch-daynight:hover { background: var(--surface-2); }
.ms-dn-ctrl .map-switch-daynight .phi { width: 19px; height: 19px; }
/* ---- Bouton « France » + menu des couches (remplace la pile de 5 boutons) ---- */
.lay-wrap { position: relative; }
.lay-btn { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,0.22); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: background .18s ease, color .18s ease, transform .12s ease; }
.lay-btn:hover { background: var(--surface-2); }
.lay-btn:active { transform: scale(0.93); }
.lay-btn.open { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.lay-btn .lay-fr { width: 27px; height: 27px; display: block; fill: currentColor; }
.lay-btn .lay-dot { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card); display: none; }
.lay-btn.has-layer .lay-dot { display: block; }
.lay-btn.open .lay-dot { display: none; }
/* Bouton unique de la carte : entonnoir « Filtres & couches » (remplace la silhouette France) */
.lay-btn .lay-ic-btn { width: 23px; height: 23px; display: block; }
.lay-btn .flt-count { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--brand); color: var(--on-brand); border: 2px solid var(--card); font-size: 11px; font-weight: 900; line-height: 15px; display: none; }
.lay-btn.has-filter .flt-count:not(:empty) { display: block; }
.lay-btn.has-filter { border-color: var(--brand); }
#map-top.filters-off #map-chips { display: none; }
/* Section « Filtrer les spots » du panneau */
.lay-row-flt .lay-arrow { margin-left: auto; color: var(--text-3); font-size: 17px; }
/* Tarif : segmenté sur sa propre ligne, pleine largeur (en ligne il débordait du panneau) */
.lay-panel .lay-row-price { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; cursor: default; }
.lay-panel .lay-seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--surface-2); border-radius: 10px; }
.lay-seg button { border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 4px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.lay-seg button.on { background: var(--card); color: var(--brand-text, var(--brand)); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.lay-row-reset .lay-lbl { color: var(--text-2); }
.lay-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 250px; max-height: 62vh; overflow-y: auto; overflow-x: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 6px; box-shadow: 0 14px 38px rgba(0,0,0,0.34); display: flex; flex-direction: column; gap: 1px; z-index: 5; }
.lay-panel[hidden] { display: none; }
.lay-panel.anim { animation: layPop .24s cubic-bezier(0.32,0.72,0,1); }
@keyframes layPop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.lay-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); padding: 8px 12px 5px; }
.lay-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-radius: 12px; padding: 9px 11px; color: var(--text); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; transition: background .15s ease, transform .1s ease; }
.lay-row:hover { background: var(--surface-2); }
.lay-row:active { transform: scale(0.985); }
.lay-row .lay-ic { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }
.lay-row .lay-ic .phi { width: 22px; height: 22px; }
.lay-row .lay-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lay-row .lay-lbl { font-size: 14px; font-weight: 600; }
.lay-row .lay-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.lay-row .lay-chk { width: 22px; height: 22px; flex: none; color: var(--brand); opacity: 0; transform: scale(0.6); transition: opacity .15s ease, transform .15s ease; }
.lay-row .lay-chk .phi { width: 22px; height: 22px; }
.lay-row.on { background: var(--brand-wash); }
.lay-row.on .lay-ic { color: var(--brand); }
.lay-row.on .lay-lbl { color: var(--brand-strong); }
.lay-row.on .lay-chk { opacity: 1; transform: none; }
.lay-row-legend { border-top: 1px solid var(--border); margin-top: 3px; }
.lay-row-legend .lay-arrow, .lay-row-dl .lay-arrow { flex: none; color: var(--text-3); font-size: 20px; line-height: 1; width: 22px; text-align: center; }
.lay-row-dl { border-top: 1px solid var(--border); }
.lay-row-dl .lay-ic { color: var(--brand); }
/* Modale « Télécharger cette zone hors-ligne » */
.dlz-body { padding: 4px 2px 2px; }
.dlz-bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 8px 0; }
.dlz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--glacier)); border-radius: 99px; transition: width .25s ease; }
.dlz-txt { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: center; }
.dlz-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 10px 0 6px; }
.dlz-done .phi { width: 34px; height: 34px; color: var(--brand); }
.dlz-done b { font-size: 16px; }
.dlz-done span { font-size: 13px; color: var(--text-2); max-width: 32ch; line-height: 1.4; }
/* Mobile : menu + bouton plus COMPACTS (le panneau mangeait trop d'écran) */
@media (max-width: 640px) {
  .lay-btn { width: 42px; height: 42px; }
  .lay-btn .lay-fr, .lay-btn .lay-ic-btn { width: 21px; height: 21px; }
  .lay-btn .lay-dot { top: 4px; right: 4px; width: 9px; height: 9px; }
  /* le panneau porte maintenant AUSSI les filtres → un peu plus large qu'à l'époque « couches seules » */
  .lay-panel { width: 232px; padding: 4px; bottom: calc(100% + 8px); border-radius: 14px; }
  .lay-head { font-size: 9.5px; padding: 6px 10px 3px; }
  .lay-row { gap: 9px; padding: 6px 8px; border-radius: 10px; }
  .lay-row .lay-ic { width: 20px; height: 20px; }
  .lay-row .lay-ic .phi { width: 18px; height: 18px; }
  .lay-row .lay-lbl { font-size: 12.5px; }
  .lay-row .lay-sub { font-size: 9.5px; }
  .lay-row .lay-chk { width: 17px; height: 17px; }
  .lay-row .lay-chk .phi { width: 17px; height: 17px; }
  .lay-row-legend .lay-arrow { font-size: 17px; width: 17px; }
}
#map-search .ms-ico .phi { width: 20px; height: 20px; display: block; margin: 0 auto; }
/* Icônes SVG du menu ☰ + FAB (règle « jamais d'emoji ») */
.drawer-item > span .phi, .fab-item-ic .phi { width: 20px; height: 20px; display: block; margin: 0 auto; }
/* Icônes en ligne (barres de page, boutons de formulaire, labels) */
.ui-ic { display: inline-flex; align-items: center; vertical-align: -0.18em; margin-right: 0.12em; }
.ui-ic .phi { width: 1.1em; height: 1.1em; }
/* Attribution carto : ⓘ discret à gauche du bouton ; le panneau s'ouvre vers la gauche/haut, sans chevaucher le bouton */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { margin: 0 128px 17px 0; border-radius: 11px; background: rgba(255,255,255,.85); }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; min-width: 22px; }
.maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 5px 26px 5px 11px; max-width: 220px; font-size: 10px; line-height: 1.5; box-shadow: 0 3px 12px rgba(0,0,0,.14); }
.maplibregl-ctrl-attrib-button { background-color: rgba(0,0,0,.05); }
.maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib { color: #6a7a73; }
.hint { margin-top: 10px; font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

#loading { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 7; background: var(--brand); color: #fff; font-size: 13px; padding: 7px 14px; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
#loading.done { display: none; }

#list-view, #detail-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.results-meta { padding: 9px 14px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.results { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }

/* ===== Carte plein écran + barre flottante + feuille (option 3, style Google Maps) ===== */
#map-top { position: absolute; top: 12px; left: 12px; z-index: 5; width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; }
#map-search { display: flex; align-items: center; gap: 4px; background: var(--card); border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.16); padding: 4px; height: 48px; box-sizing: border-box; }
#map-search .ms-ico { width: 38px; height: 40px; flex: none; border: none; background: none; font-size: 16px; cursor: pointer; border-radius: 11px; color: var(--text); }
#map-search .ms-ico:hover { background: var(--surface-2); }
#map-search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 15px; background: none; color: var(--text); }
#map-search .ms-loc { width: 40px; height: 40px; flex: none; border: none; border-radius: 11px; background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .18s ease; }
#map-search .ms-loc:hover { background: var(--brand-dark); }
#map-search .ms-loc svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
#map-search .ms-loc.locating svg { animation: loc-pulse 1s ease-in-out infinite; }
@keyframes loc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

#map-chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
#map-chips::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.1); white-space: nowrap; }
.fchip:hover { background: var(--surface-2); }
.fchip.on, .fchip.pop-open { background: var(--brand); border-color: var(--brand); color: #fff; }
.fchip.on b, .fchip.pop-open b { color: #fff; }
.fchip b { color: var(--brand-dark); }
.fchip-sel { -webkit-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230e2a24' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.fchip-sel.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fchip-reset { position: sticky; right: 0; flex: none; width: 36px; padding: 0; justify-content: center; font-size: 17px; color: var(--accent-deep); border-color: #ffc7b2; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.fchip-reset:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.map-pop { position: absolute; top: 104px; left: 12px; z-index: 6; background: var(--card); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: 11px 13px; width: min(300px, calc(100vw - 24px)); box-sizing: border-box; }
#pop-types { width: min(440px, calc(100vw - 24px)); }
.pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 7px; }
.pop-radius { font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 9px; }
.pop-radius b { color: var(--brand-dark); }
.pop-radius input[type="range"] { width: 100%; accent-color: var(--brand); }
.pop-radius-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.pop-radius-toggle input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.pop-radius-hint { font-size: 11.5px; color: var(--text-2); line-height: 1.35; margin-top: 8px; }

#sheet { position: absolute; left: 12px; bottom: 0; z-index: 4; width: 380px; max-width: calc(100vw - 24px); height: 96px; background: var(--card); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.16); display: flex; flex-direction: column; overflow: hidden; }
#sheet-head { flex: none; cursor: grab; touch-action: none; user-select: none; }
#sheet-head:active { cursor: grabbing; }
#sheet-grip { display: block; width: 100%; border: none; background: none; padding: 9px 0 5px; cursor: pointer; }
.grip-bar { display: block; width: 38px; height: 4px; border-radius: 3px; background: var(--surface-2); margin: 0 auto; }
#sheet .results-meta { padding: 3px 16px 11px; font-size: 13px; font-weight: 500; color: var(--text); border: none; display: flex; align-items: center; justify-content: space-between; }
.sheet-chevron { flex: none; margin-left: 8px; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(18,184,134,.4); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.sheet-chevron:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(18,184,134,.5); }
.sheet-chevron:active { transform: translateY(0); }
.sheet-chevron svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s cubic-bezier(.4,0,.2,1); }
.sheet-chevron.down svg { transform: rotate(180deg); }
#sheet .results { flex: 1; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 8px; }

.card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 8px; cursor: pointer; }
.card:hover { border-color: var(--brand); background: var(--surface-2); }
.thumb { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; flex: none; }
.thumb.ph { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.c-body { flex: 1; min-width: 0; }
.c-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sub { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.c-note { color: #ba7517; font-weight: 600; }
.c-loc { font-size: 11.5px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-price { font-size: 13px; font-weight: 700; color: var(--accent); flex: none; align-self: flex-start; }
/* Badge espèce sur les cards filtrées : avéré (vert plein) vs présence régionale supposée (ambre, pointillé) */
.c-esp { margin-top: 4px; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1.5px 7px; display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.c-esp-ok { background: rgba(18,184,134,.15); color: var(--brand-dark); }
.c-esp-reg { background: rgba(255,159,28,.14); color: #b5651d; border: 1px dashed rgba(181,101,29,.45); }

/* ---- fiche détaillée ---- */
.detail { flex: 1; overflow-y: auto; padding: 14px 16px; }
.back { background: none; border: none; color: var(--brand); font-size: 13px; cursor: pointer; padding: 12px 14px 4px; }
.f-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.f-note { font-size: 13px; color: #ba7517; font-weight: 600; }
.f-note small { color: var(--text-2); font-weight: 400; }
.f-title { font-size: 18px; font-weight: 600; margin: 8px 0 2px; }
.f-loc { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.gallery { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.gallery img { height: 140px; width: 180px; border-radius: 10px; flex: none; background: var(--surface-2); object-fit: cover; cursor: zoom-in; }
.gallery .aerial { position: relative; flex: none; display: block; text-decoration: none; }
.gallery .aerial img { cursor: pointer; }
.aerial-cap { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; }
.add-photo { display: inline-block; font-size: 13px; color: var(--brand); cursor: pointer; padding: 4px 0 12px; }
.claim-btn { width: 100%; background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 10px; font-size: 13px; cursor: pointer; color: var(--text-2); margin-bottom: 4px; }
.claim-btn:hover { border-color: var(--brand); color: var(--brand); }
.prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 12px; }
.price { background: var(--bg); border-radius: 9px; padding: 8px 10px; }
.price span { display: block; font-size: 11.5px; color: var(--text-2); }
.price b { font-size: 16px; }
.f-desc { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0 0 12px; }
/* fiche enrichie Rentalake (pêche & séjour) */
.rl-src { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-2); }
.rl-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rl-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rl-badge { font-size: 12px; font-weight: 700; background: #e6f6f0; color: #0c6b4f; border-radius: 8px; padding: 4px 9px; }
.rl-block { margin-top: 10px; }
.rl-h { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.fish-secteur { font-size: 13px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 9px 11px; margin: 10px 0; }
.fish-secteur .fish-src { color: var(--text-2); font-size: 11px; }
.fish-secteur .fish-sup { display: inline-block; font-size: 10px; font-weight: 700; color: #b5651d; background: rgba(255,159,28,.15); border: 1px dashed rgba(181,101,29,.45); border-radius: 5px; padding: 0 5px; vertical-align: middle; }

/* ===================== Fiche spot — refonte immersive ===================== */
#fiche-content.fiche-page { background: var(--surface-2); }
/* apparition en cascade des blocs */
.fs-anim { animation: fsUp .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--d, 0) * 55ms); }
@keyframes fsUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* HÉRO immersif (pleine largeur : annule le padding de .fiche-page) */
.fs-hero { position: relative; margin: -20px -18px 14px; height: 232px; overflow: hidden; isolation: isolate; }
.fs-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.03); animation: fsZoom 18s ease-in-out infinite alternate; }
@keyframes fsZoom { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.fs-hero-grad { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 46%, rgba(8,30,22,.85) 100%); }
.fs-hero-top { position: absolute; z-index: 3; top: 12px; left: 12px; right: 100px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fs-cat { font-size: 11.5px; font-weight: 800; color: #fff; padding: 4px 11px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.28); white-space: nowrap; }
.fs-hero-top .fs-note { font-size: 13px; font-weight: 800; color: #fff; background: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 99px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fs-hero-top .fs-note small { color: rgba(255,255,255,.78); font-weight: 600; }
.fs-hero-sat { position: absolute; z-index: 3; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(6,26,22,.6); border: 1px solid rgba(255,255,255,.28); border-radius: 99px; padding: 6px 12px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .14s ease; }
.fs-hero-sat:hover { background: rgba(6,26,22,.82); }
.fs-hero-sat .phi { color: #fff; }
.fs-hero-cap { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; }
.fs-title { font-family: 'Archivo', system-ui, sans-serif; font-size: 26px; font-weight: 900; line-height: 1.12; margin: 0; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.fs-loc { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.93); margin-top: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.fs-loc a { color: #fff; }
/* chips de faits clés */
.fs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.fs-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 6px 11px; box-shadow: 0 1px 4px rgba(14,42,36,.05); }
.fs-chip.price { background: var(--accent-wash); color: var(--accent-deep); border-color: var(--gold-wash); }
/* onglets Prises / Avis en bas de fiche */
.fs-tabs-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(14,42,36,.06); margin-bottom: 12px; touch-action: pan-y; }
.fs-tab-bar { display: flex; background: var(--bg); border-bottom: 1px solid var(--border); }
.fs-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 14px 8px; background: none; border: none; border-bottom: 2.5px solid transparent; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.fs-tab-btn.is-on { color: var(--brand); border-bottom-color: var(--brand); background: var(--card); }
.fs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; }
.fs-tab-btn:not(.is-on) .fs-tab-badge { background: var(--surface-2); color: #6a706d; }
.fs-tab-pane { background: var(--card); padding: 13px; }
.fs-tab-pane .reviews { margin-top: 0; border-top: none; padding-top: 0; }
.fs-tab-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* sections en cartes qui ressortent sur le fond légèrement teinté */
.fs-card { margin-bottom: 12px; box-shadow: 0 2px 12px rgba(14,42,36,.05); }
.fs-card .f-esp-decl, .fs-card .fish-secteur:last-child, .fs-card .f-desc, .fs-card .prices, .fs-card .f-infos-body, .fs-card .cp-feed, .fs-card .reviews { margin-bottom: 0; }
.fs-card .f-infos-body .row:first-child { border-top: none; padding-top: 0; }
.fs-card .reviews { margin-top: 0; }
/* galerie plus compacte (l'image principale est déjà dans le héro) */
#fiche-content .gallery img, #fiche-content .gallery .aerial img { height: 150px; min-width: 140px; }
@media (prefers-reduced-motion: reduce) { .fs-anim { animation: none; } .fs-hero-bg { animation: none; } }
.fish-tags { margin-top: 6px; }
.bite { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.bite-head { font-size: 14px; font-weight: 600; }
.bite-sub { font-size: 11px; color: var(--text-2); font-weight: 400; }
.bite-today { display: flex; align-items: center; gap: 14px; margin: 10px 0; padding: 10px 12px; border: 1px solid; border-radius: 11px; }
.bite-score { font-size: 34px; font-weight: 700; line-height: 1; }
.bite-score small { font-size: 14px; font-weight: 400; color: var(--text-2); }
.bite-meta { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.bite-meta b { font-size: 14px; }
.bite-days { display: flex; gap: 5px; }
.bite-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-2); padding: 6px 2px; border-radius: 8px; }
.bite-day.we { background: var(--surface-2); }
.bite-bar { width: 14px; height: 54px; background: #eee; border-radius: 7px; display: flex; align-items: flex-end; overflow: hidden; }
.bite-bar > div { width: 100%; border-radius: 7px; }
.bite-day b { font-size: 12px; color: var(--text); }
.bite-hint { font-size: 11px; color: var(--text-2); margin-top: 9px; line-height: 1.4; }
.f-loc a, .row a { color: #185fa5; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.row > span { color: var(--text-2); flex: none; display: inline-flex; align-items: center; gap: 8px; }
.row > b { text-align: right; font-weight: 500; }
/* ===== Fiche spot — icônes Phosphor (taille/couleur) + raffinement premium ===== */
.fiche-page .phi { vertical-align: -0.15em; }
.afi-card-h { display: flex; align-items: center; gap: 8px; }
.afi-ic { display: inline-flex; }
.afi-ic .phi { width: 19px; height: 19px; color: var(--brand); }
.row > span .phi { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.fs-chip .phi { width: 15px; height: 15px; }
.fs-hero-sat .phi, .fs-loc .phi, .pending-badge .phi { width: 14px; height: 14px; }
.fish-secteur .phi { width: 15px; height: 15px; color: var(--text-2); vertical-align: -0.22em; }
.f-attested .phi { width: 16px; height: 16px; color: #0c6b4e; vertical-align: -0.22em; }
.f-reserve-warn .phi { width: 19px; height: 19px; color: #8a1f1a; flex: none; }
.f-cta .btn .phi, .f-actions .btn .phi, .f-cloudbar .btn .phi, .add-photo .phi, .claim-btn .phi, .fs-tab-btn .phi { width: 17px; height: 17px; vertical-align: -0.22em; }
.f-admin-h .phi { width: 15px; height: 15px; vertical-align: -0.2em; }
/* premium : cartes qui respirent + profondeur teintée + léger lift au survol (desktop) */
.afi-card, .fs-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(14,42,36,.05), 0 8px 22px -14px rgba(14,42,36,.14); transition: box-shadow .18s ease, border-color .18s ease; }
@media (hover: hover) { .afi-card:hover, .fs-card:hover { box-shadow: 0 2px 6px rgba(14,42,36,.07), 0 14px 30px -14px rgba(14,42,36,.2); } }
/* hero : titre/localisation lisibles sur TOUTE photo */
.fs-title { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.42); }
.fs-loc { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Carte Espèces : groupes « Identifiées » / « Suppositions » + puces cliquables vers la fiche espèce */
.esp-group + .esp-group { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.esp-group-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-bottom: 8px; }
.esp-group-h .esp-gh-ic { width: 14px; height: 14px; color: var(--text-3); }
.esp-sup-badge { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 10.5px; color: #b5651d; background: rgba(255,159,28,.15); border: 1px dashed rgba(181,101,29,.45); border-radius: 6px; padding: 1px 7px; }
.esp-tags, .fish-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.esp-tags-inline { display: inline-flex; margin-top: 5px; }
.tag-sp { cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 99px; transition: border-color .15s ease, color .15s ease, transform .09s ease; }
.tag-sp:hover { border-color: var(--brand); color: var(--brand-strong, var(--brand)); }
.tag-sp:active { transform: scale(.97); }
.fish-src { font-size: 11px; color: var(--text-3); margin-bottom: 7px; }
.fish-secteur .esp-loading { color: var(--text-3); font-size: 13px; }
.tag { display: inline-block; background: var(--surface-2); color: var(--text-2); font-size: 11.5px; padding: 2px 8px; border-radius: 7px; margin: 0 0 3px 4px; }
.f-disclaimer { display: flex; gap: 6px; font-size: 11.5px; color: var(--text-2); background: var(--bg); border-radius: 9px; padding: 8px 10px; margin: 12px 0; }
.f-tarifs-txt { font-size: 12.5px; color: var(--text-2); margin: 8px 2px 2px; line-height: 1.45; } /* détail tarifs texte (spots collectés) */
/* sentiment général — synthèse anonyme des avis publics (spots collectés) */
.f-recap { font-size: 13.5px; line-height: 1.55; margin: 8px 2px 6px; }
.f-recap-note { margin-left: auto; color: #f5b301; font-size: 13px; font-weight: 700; }
.f-recap-src { font-size: 12px; color: var(--text-2); }
/* bloc « Conditions en mer » (fiches littoral) */
.mer-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 4px; }
.mer-tides { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 6px 2px 2px; }
.mer-sep { color: var(--text-2); }
/* message d'erreur inline des formulaires (revendication…) */
.form-err { color: #e5484d; font-size: 12.5px; padding: 4px 2px; }
.f-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.btn { flex: 1; min-width: 120px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); color: var(--text); background: var(--card); cursor: pointer; box-shadow: 0 1px 4px rgba(14,42,36,.07); }
.btn.primary { background: var(--brand); color: var(--on-brand); border-color: transparent; box-shadow: 0 2px 10px rgba(18,184,134,.28); }
/* Bouton doré = ACTION Fishera+ (le doré est le symbole du premium ; le CTA vert brisait le fil visuel) */
.btn.gold { background: var(--gold); color: #3a2e00; border-color: transparent; box-shadow: var(--glow-gold); }
.btn.gold:hover { background: var(--gold-deep); }
.btn.gold:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.f-src { font-size: 11px; color: #aaa9a3; margin-top: 4px; }
/* menu de partage du bulletin */
.share-grid { display: flex; gap: 8px; margin: 2px 0 12px; }
.share-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; line-height: 1.1; }
.share-btn .share-ic { width: 24px; height: 24px; display: block; }
.share-btn.wa { background: #25D366; }
.share-btn.ig { background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 55%, #cc2366 75%, #bc1888); }
.share-btn.fb { background: #1877F2; }
.share-btn:active { transform: scale(0.97); }
/* Partage : 3 boutons Télécharger / Lien / Partager (Partager = partage natif, affiche les logos wa/fb/ig) */
.share3-row { display: flex; gap: 8px; margin: 2px 0 12px; }
.share3 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; padding: 10px 6px; border-radius: 13px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.1; transition: transform .08s ease, box-shadow .14s ease; }
.share3:active { transform: scale(0.97); }
.share3 .s3-ic { font-size: 20px; line-height: 1; }
.share3.s3-nat { background: linear-gradient(135deg, #14b886, var(--brand-dark)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(12,138,99,.3); }
.share3.s3-nat:hover { box-shadow: 0 8px 20px rgba(12,138,99,.42); }
.s3-logos { display: inline-flex; align-items: center; gap: 5px; }
.s3-logos .share-ic { width: 18px; height: 18px; display: block; }
.share-link { width: 100%; margin-top: 2px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 9px; background: var(--surface-2); color: #3a554c; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.share-link:active { background: var(--surface-2); }

/* ---- avis des pêcheurs ---- */
.reviews { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.rev-head { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.rev-avg { color: #ba7517; }
.rev-list { display: flex; flex-direction: column; gap: 9px; }
.rev { background: var(--bg); border-radius: 10px; padding: 9px 11px; }
.rev-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rev-h b { font-weight: 600; }
.rev-stars { color: #ba7517; letter-spacing: 1px; }
.rev-date { margin-left: auto; color: var(--text-2); font-size: 11px; }
.rev-t { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.45; }
.rev-ph { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.rev-ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.rev-empty { font-size: 13px; color: var(--text-2); padding: 20px 4px; text-align: center; }
.rev-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 11px; }
.rv-stars { font-size: 24px; color: #ba7517; cursor: pointer; letter-spacing: 3px; user-select: none; }
.rv-stars span { cursor: pointer; }
.rev-form input, .rev-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.rev-form input:focus, .rev-form textarea:focus { border-color: var(--brand); }
.rv-file { display: inline-block; font-size: 13px; color: var(--brand); cursor: pointer; padding: 4px 0; }
.rv-count { font-size: 11.5px; color: var(--text-2); }


.maplibregl-popup-content { border-radius: 12px; padding: 12px 14px; font-family: inherit; }

/* ---- lightbox (photo en grand) ---- */
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.86); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox img { max-width: 92vw; max-height: 88vh; max-height: 88dvh; border-radius: 10px; touch-action: none; transform-origin: center center; will-change: transform; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lightbox img.zoomed { cursor: grab; }
.lb-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 12px; background: rgba(0,0,0,.42); padding: 5px 13px; border-radius: 99px; pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.lb-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

/* ---- modale (revendication) ---- */
.modal { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: var(--card); border-radius: 14px; width: 100%; max-width: 420px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; padding: 18px 20px; }
/* Panneau riche (stats d'un spot) : bien plus large sur grand écran, pleine largeur sur mobile */
.modal-card.modal-wide { max-width: 760px; }
/* Page de vente Fishera+ : le POINT D'ARRIVÉE de toutes les portes premium → surface la plus soignée de l'app */
.modal:has(.modal-card--plus) { background: rgba(6,27,22,.55); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); }
.modal-card--plus { border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--border)); animation: sup-pop .34s cubic-bezier(.2,.9,.3,1.3) both; }
/* Enveloppe + flèches de défilement (PC uniquement : au doigt on pousse le bandeau) */
.hs-wrap { position: relative; min-width: 0; }
.hs-wrap--cn-tabs-in { flex: 1; min-width: 0; }
.hs-wrap--sp-chips { position: sticky; top: 0; z-index: 3; }
.hs-wrap--sp-chips > .sp-chips { position: static; }
.hs-arw { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-2);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px -3px rgba(1,14,11,.35); transition: transform .12s ease, color .15s ease; }
.hs-arw:hover { color: var(--brand-text, var(--brand)); }
.hs-arw:active { transform: translateY(-50%) scale(.9); }
.hs-arw-l { left: -2px; }
.hs-arw-r { right: -2px; }
@media (hover: hover) and (pointer: fine) {
  .hs-on.hs-start ~ .hs-arw-l { display: flex; }
  .hs-on.hs-end ~ .hs-arw-r { display: flex; }
}
/* Rangées qui défilent horizontalement : dégradé sur le bord tant qu'il reste du contenu */
.hs-on { position: relative; -webkit-mask-image: none; }
.hs-on.hs-end { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 82%, transparent 100%); }
.hs-on.hs-start.hs-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 82%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 82%, transparent 100%); }
.hs-on.hs-start:not(.hs-end) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%); mask-image: linear-gradient(to right, transparent 0, #000 8%); }
.modal-h { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.modal-h .x { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-2); line-height: 1; }
.modal-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 8px 0 14px; }
.claim-form { display: flex; flex-direction: column; gap: 9px; }
.claim-form input, .claim-form select, .claim-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: inherit; outline: none; }
.claim-form input:focus, .claim-form select:focus, .claim-form textarea:focus { border-color: var(--brand); }

/* ---- toast ---- */
.toast { position: fixed; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 21000; background: var(--ink); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 22px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); max-width: calc(100vw - 28px); text-align: center; }
/* Sur la CARTE, le bas est encombré (tiroir de liste + switches + attribution) → le toast remonte JUSTE SOUS les filtres. */
body.on-map #toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 210px); }

@media (max-width: 760px) {
  #map-top { top: 8px; left: 8px; right: 8px; width: auto; }
  .map-pop { top: 100px; left: 8px; right: 8px; width: auto; }
  #sheet { left: 0; right: 0; width: auto; max-width: none; border-radius: 18px 18px 0 0; }
  #map-switches { bottom: 108px; right: 12px; }
  #loading { top: 108px; }
  .maplibregl-ctrl-top-right { top: 110px; }
  /* sur mobile le sheet occupe tout le bas : on remonte l'attribution à gauche, à l'opposé du bouton satellite */
  .maplibregl-ctrl-bottom-right { bottom: 100px; right: auto; left: 8px; }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { margin: 0; }
}

/* ===== Trophées / gamification ===== */
.troph-page { max-width: 640px; margin: 0 auto; padding: 16px 16px 44px; }
.tr-hero { background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 72%, var(--ink) 135%); color: #fff; border-radius: 22px; padding: 18px 20px 20px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 16px 36px rgba(12,138,99,.28); }
.tr-hero-top { display: flex; justify-content: space-between; align-items: center; }
.tr-brand { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: rgba(255,255,255,.85); }
.tr-hero-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--gold); }
.tr-avatar { width: 76px; height: 76px; margin: 12px auto 8px; border-radius: 50%; background: rgba(255,255,255,.14); border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; }
.tr-avatar span { font-size: 30px; font-weight: 900; color: #fff; }
.tr-rang { font-size: 21px; font-weight: 900; }
.tr-next { font-size: 12px; color: rgba(255,255,255,.78); margin-top: 2px; }
.tr-xpbar { height: 12px; border-radius: 8px; background: rgba(0,0,0,.22); overflow: hidden; margin: 14px 4px 0; }
.tr-xpbar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--gold), var(--gold-wash)); }
.tr-xprow { display: flex; justify-content: space-between; font-size: 12px; margin: 7px 4px 0; color: rgba(255,255,255,.85); }
.tr-xprow b { color: #fff; } .tr-xprow span { color: var(--gold); font-weight: 700; }
.tr-stats { display: flex; gap: 10px; margin-top: 16px; }
.tr-stats div { flex: 1; background: rgba(255,255,255,.12); border-radius: 12px; padding: 9px 4px; }
.tr-stats b { display: block; font-size: 20px; font-weight: 900; color: #fff; }
.tr-stats span { font-size: 11px; color: rgba(255,255,255,.8); }
.tr-streak { display: inline-block; margin-top: 14px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; padding: 7px 16px; border-radius: 99px; box-shadow: 0 6px 14px rgba(255,107,61,.4); }
.tr-challenge { background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 16px; margin-top: 14px; border: 1px solid rgba(255,107,61,.45); }
.tr-ch-head { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--accent); display: flex; justify-content: space-between; }
.tr-ch-head span { color: var(--gold); }
.tr-ch-title { font-size: 15px; font-weight: 700; margin: 6px 0 9px; }
.tr-prog { height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.tr-prog i { display: block; height: 100%; border-radius: 8px; background: var(--brand); }
.tr-prog.ch { background: rgba(255,255,255,.15); }
.tr-prog.ch i { background: var(--accent); }
.tr-ch-prog { font-size: 11px; color: rgba(255,255,255,.8); text-align: right; margin-top: 5px; }
.tr-challenge.done { border-color: rgba(31,210,155,.5); }
.tr-ch-done { font-size: 13px; font-weight: 800; color: #1fd29b; margin-top: 8px; }
.tr-sec { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 800; color: var(--text); margin: 22px 4px 12px; }
.tr-sec span { font-size: 12px; font-weight: 700; color: var(--brand-dark); }
/* frise d'évolution 8 stades (page Trophées) */
.tr-evo { position: relative; overflow: hidden; background: linear-gradient(160deg, #143a6b, #0a1d38 70%, #061020); color: #fff; border-radius: 16px; padding: 14px 16px 16px; margin-top: 14px; border: 1px solid rgba(91,141,239,.45); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tr-evo:active { transform: scale(0.995); }
.tr-evo-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.tr-evo-head span { font-size: 12px; font-weight: 700; color: var(--gold); }
.tr-evo-scroll { position: relative; }
.tr-evo-track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; padding: 9px 6px 3px; }
.tr-evo-track::-webkit-scrollbar { display: none; }
.tr-evo-step { flex: 1 0 auto; width: 112px; display: flex; flex-direction: column; align-items: center; position: relative; }
.tr-evo-step::before { content: ""; position: absolute; top: 50px; right: 50%; width: 100%; height: 3px; background: var(--seg, transparent); z-index: 0; }
.tr-evo-fade { position: absolute; top: 0; right: -2px; bottom: 24px; width: 56px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; pointer-events: none; background: linear-gradient(90deg, rgba(10,29,56,0), #0a1d38 75%); color: var(--gold); font-size: 30px; font-weight: 900; line-height: 1; transition: opacity .2s; }
.tr-evo-step:first-child::before { display: none; }
.tr-evo-ic { width: 94px; height: 94px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 32%, #2f6fb4, #103a6b); border: 3px solid rgba(255,255,255,.28); position: relative; z-index: 1; overflow: hidden; }
.tr-evo-ic svg, .tr-evo-ic img { width: 80px; height: auto; }
.tr-evo-step.done .tr-evo-ic { border-color: var(--brand); }
.tr-evo-step.cur .tr-evo-ic { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,210,63,.25); }
.tr-evo-step.off .tr-evo-ic { opacity: .5; }
.tr-evo-lab { font-size: 10px; margin-top: 5px; color: rgba(255,255,255,.5); font-weight: 700; }
.tr-evo-step.cur .tr-evo-lab { color: var(--gold); }
.tr-evo-step.done .tr-evo-lab { color: rgba(31,210,155,.9); }
.tr-evo-bar { height: 7px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 14px; }
.tr-evo-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--gold)); }
.tr-evo-sub { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 7px; }
.tr-evo-sub b { color: #fff; }
/* fond aquatique : rayons de lumière (::before) + bulles qui remontent (::after) */
.tr-evo::before, .ev-head::before, .ev-list::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(108deg, rgba(150,210,255,0) 0 30px, rgba(165,216,255,.10) 30px 48px, rgba(150,210,255,0) 48px 86px);
  animation: evoRayShimmer 9s ease-in-out infinite alternate;
}
/* les rayons (lumière de surface) s'éteignent vers le Mosasaure (à droite sur la frise, en bas sur la page) */
.tr-evo::before { -webkit-mask-image: linear-gradient(to right, #000 20%, rgba(0,0,0,.18) 76%, transparent 97%); mask-image: linear-gradient(to right, #000 20%, rgba(0,0,0,.18) 76%, transparent 97%); }
.ev-list::before { -webkit-mask-image: linear-gradient(to bottom, #000 6%, rgba(0,0,0,.22) 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 6%, rgba(0,0,0,.22) 72%, transparent 100%); }
.tr-evo::after, .ev-head::after, .ev-list::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 92%, rgba(198,233,255,.30) 3px, transparent 4px),
    radial-gradient(circle at 33% 64%, rgba(198,233,255,.20) 5px, transparent 6px),
    radial-gradient(circle at 54% 84%, rgba(198,233,255,.16) 2px, transparent 3px),
    radial-gradient(circle at 72% 50%, rgba(198,233,255,.24) 4px, transparent 5px),
    radial-gradient(circle at 88% 78%, rgba(198,233,255,.18) 3px, transparent 4px),
    radial-gradient(circle at 24% 32%, rgba(198,233,255,.14) 2px, transparent 3px);
  background-size: 240px 320px; background-repeat: repeat;
  animation: evoBubbles 15s linear infinite;
}
.ev-list::after { animation-duration: 19s; }
.tr-evo > *, .ev-head > *, .ev-list > * { position: relative; z-index: 1; }
@keyframes evoRayShimmer { from { opacity: .5; } to { opacity: 1; } }
@keyframes evoBubbles { to { background-position: 0 -320px; } }
@media (prefers-reduced-motion: reduce) { .tr-evo::before, .ev-head::before, .ev-list::before, .tr-evo::after, .ev-head::after, .ev-list::after { animation: none; } }
/* fiche détail d'un trophée (modale) */
.tr-medal[data-tid] { cursor: pointer; }
.td-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; }
.td-head-ic .tr-hex { width: 74px; height: 74px; }
.td-head-state { font-size: 14px; color: var(--muted); }
.td-head-state b { color: var(--text); }
.td-head-note { font-size: 13px; color: #8aa39a; margin-top: 2px; }
.td-sec { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8aa39a; margin: 0 2px 8px; }
.td-list { display: flex; flex-direction: column; gap: 8px; }
.td-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid rgba(14,42,36,.07); }
.td-ic { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.td-ic .tr-hex { width: 52px; height: 52px; margin: 0; }
.td-row:not(.done) .td-ic { opacity: .55; filter: grayscale(.35); }
.td-row.done { background: var(--surface-2); border-color: rgba(18,184,134,.32); }
.td-row.next { background: var(--accent-wash); border-color: var(--gold-deep); }
.td-info { flex: 1; display: flex; flex-direction: column; }
.td-info b { font-size: 14px; color: var(--text); }
.td-info span { font-size: 12px; color: var(--muted); }
.td-ok { font-size: 12px; font-weight: 800; color: var(--brand-dark); }
.td-prog { font-size: 12px; font-weight: 800; color: var(--gold-deep); }
.td-lock { font-size: 16px; opacity: .55; }
.td-soon { opacity: .9; }
.td-soon .td-ic { filter: blur(3px) grayscale(.4); opacity: .5; }
.td-soon .td-info b::after { content: " ✨"; }
.tr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tr-medal { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 6px 12px; text-align: center; }
.tr-hex { width: 88px; height: 88px; display: block; margin: 0 auto 6px; }
.tr-pill { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 99px; border: 1px solid; margin-top: 2px; }
.tr-medal.locked { background: var(--surface-2); }
.tr-disc { width: 58px; height: 58px; margin: 0 auto 8px; border-radius: 50%; background: var(--card); border: 3px solid var(--ring, var(--surface-2)); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.tr-medal.locked .tr-disc { background: var(--surface-2); border-color: var(--surface-2); }
.tr-medal.locked .tr-emoji { filter: grayscale(.85); opacity: .55; }
.tr-emoji { font-size: 26px; line-height: 1; }
.tr-lock { position: absolute; right: -4px; bottom: -4px; font-size: 13px; background: var(--card); border-radius: 50%; padding: 1px; }
.tr-name { font-size: 12px; font-weight: 800; color: var(--text); }
.tr-tier { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--brand-dark); margin-top: 2px; }
.tr-tier.sub { color: var(--muted); font-weight: 600; margin-top: 1px; }
.tr-medal.locked .tr-tier { color: var(--muted); }
.tr-medal .tr-prog { margin: 8px 8px 0; }
.tr-share { width: 100%; margin-top: 20px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; font-size: 15px; padding: 14px; }
.tr-share:hover { background: var(--accent-deep); }
.tr-empty { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); background: var(--card); border: 1px dashed var(--brand-wash); border-radius: 14px; padding: 16px; }

/* ===== Navigation du bas (unifiée mobile + desktop) ===== */
#bottomnav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 20; display: flex; align-items: center; justify-content: space-around; background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(14,42,36,.07); }
@media (min-width: 760px) { #bottomnav { max-width: 520px; margin: 0 auto; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 14px 14px 0 0; } }
.bnav { flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--muted); font-size: 10px; font-weight: 600; }
.bnav .bn-ic { font-size: 20px; line-height: 1; }
.bnav.active { color: var(--brand-dark); }
/* FAB centré */
.bnav-fab-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.bnav-fab { width: 54px; height: 54px; border-radius: 50%; background: var(--brand); color: #fff; border: 3px solid #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(14,42,36,.38); transform: translateY(-12px); transition: transform .2s ease, background .15s ease; flex: none; -webkit-tap-highlight-color: transparent; }
.bnav-fab.open { background: var(--brand-dark); transform: translateY(-12px) rotate(45deg); }
.bnav-fab .fab-ic { width: 24px; height: 24px; flex: none; }
/* FAB speed-dial */
#fab-menu { position: fixed; bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 70px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; z-index: 22; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; transform-origin: bottom center; }
#fab-menu.open { opacity: 1; pointer-events: auto; }
.fab-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: none; border-radius: 24px; padding: 10px 18px; box-shadow: 0 3px 14px rgba(0,0,0,.2); cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform .09s ease; }
.fab-item:active { transform: scale(.96); }
.fab-item .fab-item-ic { font-size: 20px; }
.fab-item-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 16px rgba(14,42,36,.35); }
/* Backdrop */
#fab-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(14,42,36,.45); }

/* ===== Accueil (hub services + touche gamification) ===== */
.home-page { max-width: 680px; margin: 0 auto; padding: 18px 16px 40px; }
.hm-head { margin-bottom: 14px; }
.hm-hello { font-family: var(--font-title); font-size: 26px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; color: var(--text); }
.hm-sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.hm-gami { width: 100%; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border: none; border-radius: 16px; padding: 12px 16px; cursor: pointer; text-align: left; }
.hm-lvl { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; flex: none; }
.hm-gami-mid { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-rang { font-weight: 700; font-size: 14px; }
.hm-xpbar { height: 7px; border-radius: 6px; background: rgba(0,0,0,.22); overflow: hidden; }
.hm-xpbar i { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.hm-gami-r { font-weight: 800; font-size: 13px; white-space: nowrap; }
.hm-defi { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ink); color: #fff; border: 1px solid rgba(255,107,61,.4); border-radius: 14px; padding: 11px 15px; margin-top: 10px; cursor: pointer; font-size: 13.5px; }
.hm-defi b { color: var(--gold); }
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.hm-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; cursor: pointer; text-align: left; box-shadow: 0 3px 10px rgba(14,42,36,.05); }
.hm-card:hover { border-color: var(--brand); }
.hm-card.act { background: linear-gradient(135deg, var(--surface-2), var(--accent-wash)); border-color: var(--gold-wash); }
.hm-ic { font-size: 28px; }
.hm-t { font-size: 15px; font-weight: 800; color: var(--text); margin-top: 4px; }
.hm-d { font-size: 12px; color: var(--muted); }
.hm-soon { text-align: center; font-size: 12px; color: var(--muted); margin-top: 18px; }
/* Classement (aperçu, prises d'exemple) */
.hm-lb { margin-top: 22px; }
.lb-demo { display: inline-block; margin-left: 8px; background: var(--surface-2); color: var(--text-2); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 99px; vertical-align: middle; }
.lb-list { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--border); font-size: 14px; }
.lb-row:last-child { border-bottom: none; }
.lb-row.top { background: var(--surface-2); }
.lb-rank { flex: 0 0 26px; text-align: center; font-weight: 800; color: var(--text-2); font-size: 15px; }
.lb-name { flex: 1 1 auto; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-stat { flex: 0 0 auto; color: var(--text-2); font-size: 12.5px; }
.lb-stat b { color: var(--brand); }
.lb-foot { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
/* Classement cloud — lignes cliquables (bouton), avatar, surlignage « toi », podium */
button.lb-row { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lb-row:hover { background: var(--surface-2); }
.lb-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 16px; line-height: 1; }
.lb-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lb-best { font-weight: 600; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.lb-you { background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 7px; border-radius: 99px; }
.lb-row.me { background: var(--brand-wash); }
.lb-row.me .lb-rank { color: var(--brand-strong); }
.lb-row.top .lb-rank { font-size: 17px; }
.lb-all { margin-left: auto; background: none; border: 0; color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
/* Page Classement (/classement) */
.clm-page { max-width: 640px; margin: 0 auto; padding: 14px 16px calc(90px + env(safe-area-inset-bottom)); }
.clm-intro { font-size: 13px; color: var(--text-2); margin: 2px 2px 12px; line-height: 1.45; }
.clm-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.clm-tab { flex: 1 1 auto; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.clm-tab.sm { padding: 7px 8px; font-size: 12.5px; }
.clm-tab.on { background: var(--brand-wash); color: var(--brand-strong); border-color: var(--brand); }
.clm-hint { font-size: 11.5px; color: var(--text-3); margin: 2px 2px 12px; }
/* Bandeau « lots à gagner » */
.clm-prize { background: linear-gradient(90deg, var(--brand-wash), var(--glacier-wash)); border: 1px solid var(--brand); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; color: var(--text); margin-bottom: 12px; line-height: 1.4; }
/* Sélecteur d'espèce (dropdown recherchable) */
.clm-species { position: relative; margin-bottom: 8px; }
.clm-sp-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.clm-sp-caret { color: var(--text-3); }
.clm-sp-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 8px; }
.clm-sp-search { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.clm-sp-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.clm-sp-opt { text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.clm-sp-opt:hover { background: var(--surface-2); }
.clm-sp-opt.on { background: var(--brand-wash); color: var(--brand-strong); font-weight: 700; }
/* Podium top 3 (2e — 1er surélevé — 3e), avec aperçu de la prise */
.clm-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 8px 0 16px; }
.clm-pod { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; cursor: pointer; color: var(--text); }
.clm-pod-ph { position: relative; }
.clm-pod-ph img, .clm-pod-noimg { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2); border: 2px solid var(--border); }
.clm-pod-noimg { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.clm-pod-1 .clm-pod-ph img, .clm-pod-1 .clm-pod-noimg { width: 74px; height: 74px; border-color: #f4c430; box-shadow: 0 0 0 3px rgba(244,196,48,.28); }
.clm-pod-medal { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.clm-pod-name { font-weight: 800; font-size: 13px; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.clm-pod-score { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.clm-pod-best { font-size: 10.5px; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm-pod-step { margin-top: 5px; width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; font-family: var(--font-title); font-weight: 800; font-size: 16px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.clm-pod-1 .clm-pod-step { height: 52px; background: var(--brand-wash); color: var(--brand-strong); border-color: var(--brand); }
.clm-pod-2 .clm-pod-step { height: 38px; }
.clm-pod-3 .clm-pod-step { height: 28px; }
.clm-pod.me .clm-pod-name { color: var(--brand-strong); }

/* ===== Profil ===== */
.profil-page { max-width: 680px; margin: 0 auto; padding: 18px 16px 40px; }
.pf-hero { display: flex; gap: 14px; align-items: center; background: linear-gradient(150deg, var(--brand), var(--brand-dark) 80%, var(--ink)); color: #fff; border-radius: 20px; padding: 18px; }
.pf-emblem { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.16); border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 32px; flex: none; }
.pf-id { flex: 1; min-width: 0; }
.pf-name { font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.pf-edit { background: rgba(255,255,255,.2); border: none; border-radius: 8px; cursor: pointer; font-size: 12px; padding: 3px 7px; }
.pf-rang { font-size: 13px; color: rgba(255,255,255,.85); margin: 2px 0 8px; }
.pf-xpbar { height: 10px; border-radius: 7px; background: rgba(0,0,0,.22); overflow: hidden; }
.pf-xpbar i { display: block; height: 100%; background: var(--gold); border-radius: 7px; }
.pf-xprow { font-size: 11.5px; color: rgba(255,255,255,.85); margin-top: 6px; }
.pf-xprow b { color: #fff; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.pf-stats div { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 13px 4px 11px; text-align: center; box-shadow: 0 1px 4px rgba(14,42,36,.06); }
.pf-stats b { display: block; font-size: 22px; font-weight: 900; color: var(--brand-dark); line-height: 1.1; }
.pf-stats span { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: 3px; display: block; }
.pf-sec { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); margin: 34px 0 12px; }
.pf-sec > span:first-child { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.pf-link { background: none; border: none; color: var(--brand-dark); font-weight: 700; font-size: 13px; cursor: pointer; }
.pf-add { flex: none; width: auto; min-width: 0; font-size: 13px; padding: 8px 14px; }
.pf-troph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pf-tr { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pf-tr .tr-hex { width: 100%; height: 100%; margin: 0; }

/* ===== Évolution (descente dans les profondeurs) ===== */
.ev-wrap { max-width: 640px; margin: 0 auto; padding: 14px 16px 40px; }
.ev-head { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; background: linear-gradient(150deg, #1d4f86, #0f2d52); color: #fff; border-radius: 18px; padding: 16px; }
.ev-cur-crea { width: 104px; height: 60px; flex: none; }
.ev-cur-crea svg, .ev-crea svg { width: 100%; height: 100%; display: block; }
.ev-cur-info { flex: 1; min-width: 0; }
.ev-stade { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--gold); }
.ev-cur-n { font-size: 23px; font-weight: 900; }
.ev-bar { height: 10px; border-radius: 7px; background: rgba(0,0,0,.25); overflow: hidden; margin: 9px 0 6px; }
.ev-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-wash)); border-radius: 7px; }
.ev-cur-sub { font-size: 12px; color: rgba(255,255,255,.85); }
.ev-cur-sub b { color: var(--gold); }
.ev-tagline { text-align: center; font-size: 13px; color: var(--muted); margin: 16px 0 12px; }
.ev-tagline b { color: var(--brand-dark); }
.ev-list { position: relative; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #143a6b 0%, #0a1d38 55%, #061020 100%); padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.ev-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 10px 13px; color: #fff; }
.ev-row.cur { border-color: var(--gold); background: rgba(255,210,63,.16); box-shadow: 0 0 0 1px var(--gold); }
.ev-row.off { opacity: .72; }
.ev-row.ult { background: rgba(255,107,61,.18); border-color: rgba(255,107,61,.55); }
.ev-crea { width: 128px; height: 80px; flex: none; }
.ev-info { flex: 1; min-width: 0; }
.ev-n { font-size: 15px; font-weight: 800; }
.ev-n b { font-size: 10px; color: var(--accent); letter-spacing: 1px; }
.ev-d { font-size: 11.5px; color: rgba(255,255,255,.72); }
.ev-state { flex: none; font-size: 13px; }
.ev-here { background: var(--gold); color: #0e2a24; font-weight: 800; font-size: 10px; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.ev-ok { color: var(--gold); font-weight: 900; font-size: 16px; }
.ev-lock { opacity: .6; }
/* grille collection (Pokédex) — créatures en grand */
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: linear-gradient(180deg, #143a6b 0%, #0a1d38 60%, #061020 100%); border-radius: 18px; padding: 14px; }
.ev-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 13px; text-align: center; color: #fff; }
.ev-card.cur { background: rgba(255,210,63,.16); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ev-card.off { opacity: .55; }
.ev-card.ult { background: rgba(255,107,61,.18); border-color: rgba(255,107,61,.55); }
.ev-card-crea { width: 100%; aspect-ratio: 1.55 / 1; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.ev-card-crea img, .ev-card-crea svg { width: 96%; height: 96%; object-fit: contain; display: block; }
.ev-card-n { font-weight: 800; font-size: 16px; }
.ev-card-n b { font-size: 10px; color: var(--accent); letter-spacing: 1px; }
.ev-card-d { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px; }
/* teaser évolution dans le profil */
.pf-evo { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 10px 14px; cursor: pointer; text-align: left; }
.pf-evo-crea { width: 60px; height: 36px; flex: none; }
.pf-evo-crea svg { width: 100%; height: 100%; }
.pf-evo-txt { flex: 1; display: flex; flex-direction: column; }
.pf-evo-txt b { font-size: 14px; } .pf-evo-txt span { font-size: 12px; color: rgba(255,255,255,.7); }
.pf-evo-go { font-size: 22px; color: var(--gold); }

/* images IA (si présentes) */
img.tr-hex { object-fit: contain; }
img.tr-hex.tr-locked { filter: grayscale(1); opacity: .5; }
.ev-cur-crea img, .ev-crea img, .pf-evo-crea img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* fond clair derrière les créatures (vertes) pour qu'elles ressortent sur les fonds verts/sombres */
.ev-cur-crea { background: rgba(255,255,255,.1); border-radius: 14px; padding: 4px; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.pf-evo-crea { background: linear-gradient(160deg, #1d4f86, #0f2d52); border-radius: 10px; padding: 4px; box-sizing: border-box; }

/* ===== Profil social (étape 1) ===== */
.pf-banner { height: 150px; border-radius: 18px; position: relative; overflow: hidden; }
.pf-banner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.5px, transparent 1.5px); background-size: 20px 20px; pointer-events: none; }
.pf-banner .pf-edit { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); color: var(--brand-dark); border: none; border-radius: 10px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); }
.pf-banner .pf-edit:hover { background: var(--card); }
.pf-head { padding: 0 4px; margin-top: -46px; }
.pf-av { width: 92px; height: 92px; border-radius: 50%; background: var(--card); border: 4px solid #fff; box-shadow: 0 4px 18px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; position: relative; }
.pf-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pf-av-emoji { font-size: 40px; }
.pf-av-lvl { position: absolute; bottom: -3px; right: -6px; background: var(--gold); color: #7a5a00; font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 8px; border: 2px solid var(--card); }
.pf-name { font-size: 22px; font-weight: 900; color: var(--text); margin-top: 10px; }
.pf-rang { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pf-head .pf-xpbar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.pf-head .pf-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #0ea572); border-radius: 6px; }
.pf-head .pf-xprow { font-size: 12px; color: var(--muted); margin-top: 5px; }
.pf-bio { font-size: 13px; color: var(--text-2); margin-top: 9px; line-height: 1.5; }
/* boutons d'action top profil */
.pf-cta-row { display: flex; gap: 9px; align-items: stretch; margin-top: 16px; }
.pf-cta-row .btn { flex: 1; min-width: 0; }
.pf-share { flex: none; margin-top: 0; background: var(--card); color: var(--brand-dark); border: 1.5px solid rgba(18,184,134,.4); border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pf-share:active { background: var(--surface-2); }
.pf-onboard { font-size: 13px; color: var(--muted); text-align: center; background: var(--bg); border: 1px solid rgba(18,184,134,.15); border-radius: 12px; padding: 13px 14px; margin-top: 10px; line-height: 1.55; }
.pf-dstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.pf-ds { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.pf-ds-ic { font-size: 19px; flex: none; }
.pf-ds b { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.pf-ds span { font-size: 11px; color: var(--muted); }
/* stat-cards colorées par catégorie (liseré gauche + valeur teintée) */
.pf-ds-green { border-left: 3px solid var(--brand); } .pf-ds-green b { color: #0a8f64; }
.pf-ds-gold { border-left: 3px solid #d4a017; } .pf-ds-gold b { color: #9a7008; }
.pf-ds-blue { border-left: 3px solid #2f7fc4; } .pf-ds-blue b { color: #1f5f9c; }
.pf-ds-purple { border-left: 3px solid #6a60c8; } .pf-ds-purple b { color: #534ab7; }
/* audit : les couleurs de valeurs pensées pour le clair étaient illisibles en Deep Water */
:root:not([data-theme="light"]) .pf-ds-green b { color: #35d39d; }
:root:not([data-theme="light"]) .pf-ds-gold b { color: #e8c25a; }
:root:not([data-theme="light"]) .pf-ds-blue b { color: #7ab8e8; }
:root:not([data-theme="light"]) .pf-ds-purple b { color: #a79df0; }
/* records par espèce (stats expertes) + note explicative */
.pf-pb { display: flex; flex-direction: column; gap: 6px; }
.pf-pb-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; }
.pf-pb-esp { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pb-val { font-size: 12.5px; font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.pf-pb-n { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 2px 8px; flex: none; }
.pf-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 9px 2px 2px; }
.pf-note b { color: var(--brand-dark); }

/* Sticky header : barre compacte qui se colle sous la topbar quand on fait défiler le profil */
.pf-stickybar { position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 9; background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border-bottom: 0.5px solid var(--border); padding: 7px 16px; transform: translateY(-125%); transition: transform .22s ease; }
.pf-stickybar.visible { transform: translateY(0); }
.pf-stickybar-in { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.pf-sb-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.pf-sb-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-sb-av .pf-av-emoji { font-size: 18px; }
.pf-sb-name { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-sb-lvl { font-size: 11px; font-weight: 800; color: var(--brand-dark); background: var(--surface-2); border-radius: 8px; padding: 2px 7px; flex: none; }
.pf-sb-share { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-sb-follow { margin-left: auto; flex: none; font-size: 12.5px; padding: 6px 13px; min-height: 0; width: auto; }
.pf-sb-follow + .pf-sb-share { margin-left: 8px; }
/* badge hors-ligne (profil public affiché depuis le cache) */
.up-offline { max-width: 560px; margin: 11px auto 0; background: var(--gold-wash); color: #8a5a00; border: 1px solid var(--gold-wash); border-radius: 11px; padding: 8px 13px; font-size: 12px; font-weight: 600; text-align: center; }
.pf-heatblocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 13px; }
.pf-mname { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.pf-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pf-cell { aspect-ratio: 1; border-radius: 2px; background: var(--surface-2); }
.pf-cell.pf-cell-out { background: transparent; }
/* audit : rampe en paliers FRANCS de --brand (l1 wash était invisible, l3/l4 indiscernables) */
.pf-cell.l0 { background: var(--surface-2); border: 1px solid rgba(14,42,36,.05); } .pf-cell.l1 { background: rgba(18,184,134,.25); } .pf-cell.l2 { background: rgba(18,184,134,.5); } .pf-cell.l3 { background: rgba(18,184,134,.75); } .pf-cell.l4 { background: #12b886; }
.pf-heatfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; font-size: 12px; color: var(--muted); }
.pf-heatleg { display: flex; align-items: center; gap: 3px; }
.pf-heatleg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pf-heatleg i.l0 { background: var(--surface-2); border: 1px solid rgba(14,42,36,.05); } .pf-heatleg i.l1 { background: rgba(18,184,134,.25); } .pf-heatleg i.l2 { background: rgba(18,184,134,.5); } .pf-heatleg i.l3 { background: rgba(18,184,134,.75); } .pf-heatleg i.l4 { background: #12b886; }
/* performances (façon Strava) */
.pf-perf { display: flex; flex-direction: column; gap: 11px; }
.pf-perf-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.pf-perf-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.pf-perf-h b { font-size: 12px; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.pf-area { width: 100%; height: auto; display: block; }
.pf-perf-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.pf-dn-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pf-dn-day { background: var(--gold); } .pf-dn-night { background: var(--ink); }
:root:not([data-theme="light"]) .pf-dn-day { background: color-mix(in srgb, var(--gold) 72%, transparent); }
:root:not([data-theme="light"]) .pf-dn-night { background: color-mix(in srgb, var(--glacier) 72%, transparent); } /* audit : aplats saturés qui criaient en sombre + nuit invisible (ink sur carte sombre) */
.pf-dn-leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }
.pf-moon { display: flex; align-items: flex-end; gap: 5px; }
.pf-moonbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pf-moonbar-n { font-size: 10px; color: var(--muted); height: 12px; line-height: 12px; }
.pf-moonbar-track { width: 100%; max-width: 20px; height: 48px; display: flex; align-items: flex-end; }
.pf-moonbar-fill { width: 100%; background: var(--viz-dim); border-radius: 4px 4px 0 0; min-height: 3px; } /* audit : wash quasi invisible */
.pf-moonbar.best .pf-moonbar-fill { background: var(--brand); }
.pf-moonbar-e { font-size: 13px; color: var(--text-2); }
.pf-moonbar-e svg { width: 14px; height: 14px; display: block; margin: 0 auto; } /* glyphes de phase PHI (ex-émojis) */
.pf-bars { display: flex; align-items: flex-end; gap: 6px; }
.pf-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pf-bar-n { font-size: 10px; color: var(--muted); height: 12px; line-height: 12px; }
.pf-bar-track { width: 100%; max-width: 30px; height: 56px; display: flex; align-items: flex-end; }
.pf-bar-fill { width: 100%; background: var(--viz-dim); border-radius: 4px 4px 0 0; min-height: 3px; } /* audit : wash quasi invisible */
.pf-bar.best .pf-bar-fill { background: var(--brand); }
.pf-bar-l { font-size: 10.5px; color: var(--muted); }
.pf-pres-load { font-size: 12px; color: var(--muted); padding: 10px 0; }
.pf-favs { display: flex; flex-direction: column; gap: 8px; }
.pf-fav { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 8px; cursor: pointer; text-align: left; width: 100%; }
.pf-fav:hover { border-color: var(--brand); }
.pf-fav-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: var(--brand-wash); display: flex; align-items: center; justify-content: center; }
.pf-fav-ph { font-size: 20px; }
.pf-fav-b { flex: 1; min-width: 0; }
.pf-fav-b b { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-fav-b span { font-size: 12px; color: var(--muted); }
.pf-fav-cnt { font-size: 12px; font-weight: 800; color: var(--brand-dark); background: var(--surface-2); border-radius: 9px; padding: 4px 9px; flex: none; }

/* ===== Profil — refonte (chantier design : hero, XP, stats, ruche, accordéon, compte) ===== */
.pf-hero2 { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; min-height: 200px; display: flex; align-items: flex-end; } /* isolate : le contenu (badges Niv/rang) reste sous la barre Retour au scroll */
.pf-hero2-banner { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pf-hero2-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,32,24,.92) 0%, rgba(6,32,24,.4) 45%, rgba(6,32,24,.12) 100%); }
.pf-hero2-pattern { position: absolute; inset: 0; opacity: .06; pointer-events: none; background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 0 22px), repeating-linear-gradient(-45deg, #fff 0 1px, transparent 0 22px); }
.pf-hero2-edit { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff; border-radius: 20px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-hero2-edit:hover { background: rgba(255,255,255,.28); }
.pf-hero2-body { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 13px; padding: 16px; width: 100%; }
.pf-hero2-avwrap { position: relative; flex: none; }
.pf-hero2-av { width: 82px; height: 82px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.pf-hero2-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-hero2-av .pf-av-emoji { font-size: 40px; }
.pf-hero2-lvl { position: absolute; bottom: -4px; right: -6px; background: var(--gold); color: #6b4e00; font-size: 11px; font-weight: 800; border-radius: 11px; padding: 2px 8px; border: 2px solid #fff; }
.pf-hero2[data-tier="blue"] .pf-hero2-lvl { background: #3b9de8; color: #06243f; }
.pf-hero2[data-tier="purple"] .pf-hero2-lvl { background: #8b80e8; color: #221b4a; }
.pf-hero2-info { flex: 1; min-width: 0; padding-bottom: 4px; }
.pf-hero2-name { color: #fff; font-size: 23px; font-weight: 900; line-height: 1.1; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.pf-hero2-rang { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 10px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-hero2-share { flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff; font-size: 17px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; }
.pf-hero2-share:hover { background: rgba(255,255,255,.28); }
.pf-bio2 { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 11px 4px 0; }

.pf-xp2 { margin-top: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px; }
.pf-xp2-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; }
.pf-xp2-pill { background: var(--surface-2); color: var(--brand-dark); font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 10px; }
.pf-xp2-track { height: 13px; background: var(--surface-2); border-radius: 13px; overflow: hidden; margin: 8px 0 5px; }
.pf-xp2-track i { display: block; height: 100%; border-radius: 13px; background: linear-gradient(90deg, var(--brand-dark), var(--brand), #20d4a0); transition: width .6s ease; }
.pf-xp2-det { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.pf-xp2-rem { color: var(--brand-dark); font-weight: 700; }
.pf-xp2-next { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12.5px; color: var(--muted); }
.pf-xp2-next b { color: var(--text); }
.pf-xp2-nic { width: 28px; height: 28px; border-radius: 50%; background: var(--gold-wash); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.pf-xp2-delta { margin-top: 9px; font-size: 12px; color: var(--brand-dark); font-weight: 700; background: var(--surface-2); border-radius: 9px; padding: 7px 10px; }
.pf-xp2[data-tier="blue"] .pf-xp2-track i { background: linear-gradient(90deg, #0e4fa0, #185fa5, #3b9de8); }
.pf-xp2[data-tier="gold"] .pf-xp2-track i { background: linear-gradient(90deg, #a05c00, #d4a017, var(--gold-wash)); }
.pf-xp2[data-tier="purple"] .pf-xp2-track i { background: linear-gradient(90deg, #3b3490, #534ab7, #7a72d4); }
.pf-xp2[data-tier="gold"] .pf-xp2-pill { background: var(--gold-wash); color: #9a7008; }
.pf-xp2[data-tier="gold"] .pf-xp2-rem { color: #9a7008; }

.pf-sig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.pf-sig-it { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 13px 4px; }
.pf-sig-v { font-size: 21px; font-weight: 900; color: var(--brand-dark); line-height: 1; }
.pf-sig-l { font-size: 10.5px; color: var(--muted); text-align: center; }

.pf-cta2 { width: 100%; margin: 18px 0 8px; min-height: 52px; font-size: 16px; }
.pf-hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pf-hscroll::-webkit-scrollbar { display: none; }
.pf-hc { flex: none; width: 150px; border-radius: 13px; overflow: hidden; scroll-snap-align: start; background: var(--card); border: 1px solid var(--border); text-align: left; cursor: pointer; padding: 0; }
.pf-hc-imgwrap { width: 100%; height: 96px; background: var(--brand-wash); overflow: hidden; }
.pf-hc-img { width: 100%; height: 100%; object-fit: cover; }
.pf-hc-body { padding: 8px 10px; }
.pf-hc-sp { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-hc-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

.pf-honey { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 4px; }
.pf-hexrow { display: flex; gap: 10px; }
.pf-hexcell { width: 64px; height: 64px; padding: 0; border: none; background: none; cursor: pointer; position: relative; }
.pf-hexcell .tr-hex { width: 100%; height: 100%; margin: 0; }
.pf-hexlock { filter: grayscale(.85) opacity(.35); } /* audit : à .6 un trophée verrouillé se confondait avec un badge argent */
@media (min-width: 720px) { .pf-hexcell { width: 88px; height: 88px; } } /* audit : ruche naine sur desktop */
.pf-hexcell:active { transform: scale(.94); }

.pf-acc { margin-top: 18px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); }
.pf-acc-sum { list-style: none; display: flex; align-items: center; gap: 8px; padding: 15px 16px; font-size: 14.5px; font-weight: 800; color: var(--text); cursor: pointer; }
.pf-acc-sum::-webkit-details-marker { display: none; }
.pf-acc-arr { margin-left: auto; font-size: 20px; color: var(--muted); transition: transform .2s; }
.pf-acc[open] .pf-acc-arr { transform: rotate(90deg); }
.pf-acc-body { padding: 0 14px 16px; }
.pf-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); margin: 34px 2px 12px; } /* même échelle que .cn-sec */

.pf-compte { margin-top: 26px; border-top: 2px solid var(--border); }
.pf-compte-div { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; padding: 18px 2px 6px; }
.pf-crow { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 4px; font-size: 14px; color: var(--text); background: none; border: none; border-top: 1px solid var(--border); cursor: pointer; text-align: left; text-decoration: none; }
.pf-crow:hover { color: var(--brand-dark); }
.pf-crow-ic { font-size: 17px; flex: none; }
.pf-crow-l { flex: 1; min-width: 0; }
/* raccourci « Statistiques approfondies » → onglet Analyses du carnet */
.pf-statlink { margin: 14px 0 4px; }
.pf-statlink .pf-crow-l { display: flex; flex-direction: column; gap: 2px; font-weight: 800; }
.pf-statlink .pf-crow-l em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-2); }
.pf-statlink .pf-acc-arr { color: var(--text-3); font-size: 18px; }
.pf-crow-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 1px 8px; flex: none; }
.pf-compte .pf-erase { margin-top: 18px; }

/* Anti-zoom iOS : inputs ≥16px sur mobile (sinon Safari zoome au focus) */
@media (max-width: 760px) { input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; } }

/* ===== Profil public — sous-bloc, « en un coup d'œil », Top 3 ===== */
.up2-sub { text-align: center; padding: 12px 16px 2px; }
.up-snap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px 4px; max-width: 560px; margin: 0 auto; }
.up-snap-it { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--text); line-height: 1.35; font-weight: 600; }
.up-snap-ic { font-size: 17px; flex: none; }
.up-sub2 { max-width: 560px; margin-left: auto; margin-right: auto; padding: 0 2px; }
.up-top3 { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto; padding: 0 14px; }
.up-top3-it { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; padding-right: 12px; position: relative; }
.up-top3-rank { position: absolute; top: 6px; left: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #6b4e00; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.up-top3-img { width: 84px; height: 72px; object-fit: cover; flex: none; background: var(--brand-wash); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.up-top3-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.up-top3-info b { font-size: 14px; font-weight: 800; color: var(--text); }
.up-top3-info span { font-size: 12px; color: var(--muted); }
.up-top3-dt { font-size: 11px !important; }
.up-hero2 .pf-hero2-share { font-size: 16px; }
/* bandeau de conversion (visiteur non connecté qui regarde un profil public) */
.up-join { max-width: 560px; margin: 13px auto 2px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 4px 16px rgba(12,138,99,.28); }
.up-join-ic { font-size: 26px; flex: none; }
.up-join-txt { flex: 1; min-width: 170px; }
.up-join-txt b { display: block; font-size: 15px; font-weight: 800; }
.up-join-txt span { font-size: 12.5px; color: rgba(255,255,255,.92); line-height: 1.4; }
.up-join-btn { flex: none; background: var(--card); color: var(--brand-dark); border: none; font-weight: 800; }
.up-join-btn:hover { background: var(--surface-2); }
@media (max-width: 420px) { .up-join-btn { width: 100%; } }

/* Skeleton shimmer (chargement du profil public) */
@keyframes pf-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-2) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: pf-shimmer 1.4s infinite; border-radius: 8px; }
.up-skel-hero { height: 200px; border-radius: 20px; }
.up-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px 4px; }
.up-skel-av { width: 70px; height: 70px; border-radius: 50%; flex: none; }
.up-skel-lines { flex: 1; }
.skel-line { height: 14px; margin: 8px 0; }
.up-skel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.up-skel-stat { height: 70px; border-radius: 14px; }

/* éditeur de profil */
.pfe { display: flex; flex-direction: column; gap: 12px; }
.pfe-banprev { height: 70px; border-radius: 12px; background: var(--brand); }
.pfe-lab { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.pfe-hint { font-weight: 400; color: var(--muted); }
.pfe-lab input, .pfe-lab textarea { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 14px; font-family: inherit; outline: none; resize: vertical; }
.pfe-lab input:focus, .pfe-lab textarea:focus { border-color: var(--brand); }
.pfe-avrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pfe-avprev { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; flex: none; }
.pfe-avprev img { width: 100%; height: 100%; object-fit: cover; }
.pfe-upl { font-size: 13px; padding: 8px 12px; cursor: pointer; flex: none; }
.pfe-embs { display: flex; gap: 5px; flex-wrap: wrap; }
.pfe-emb { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); font-size: 18px; cursor: pointer; }
.pfe-emb.on { border-color: var(--brand); background: var(--surface-2); }
.pfe-photorow { display: flex; align-items: center; gap: 12px; }
.pfe-photo-cta { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; border: 2px dashed var(--brand); border-radius: 12px; background: var(--surface-2); color: var(--brand-dark); font-weight: 800; font-size: 15px; cursor: pointer; }
.pfe-photo-cta:active { transform: scale(.99); }
.pfe-photo-hint { font-size: 12px; color: var(--muted); margin-top: 7px; }
.pfe-avs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.pfe-av { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.pfe-av.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,184,134,.4); }
.pfe-banrow { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pfe-preset { width: 46px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.pfe-preset.on { border-color: var(--text); }
.pfe-bans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pfe-banimg { width: 100%; aspect-ratio: 5 / 2; border-radius: 10px; border: 2px solid var(--border); background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; padding: 0; }
.pfe-banimg.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }

/* ===== Page Activité des poissons / Météo (10 jours, en direct) ===== */
.peche-page { max-width: 680px; margin: 0 auto; padding: 16px 16px 44px; }
.pe-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pe-loc { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 900; color: var(--text); }
.pe-search { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-near { background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 600; cursor: pointer; flex: none; }
.pe-near:hover { background: var(--brand-dark); }
.pe-inp { display: flex; flex: 1; min-width: 170px; gap: 6px; position: relative; }
.pe-inp input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-size: 14px; outline: none; }
.pe-inp input:focus { border-color: var(--brand); }
.pe-inp #pe-go { background: var(--ink); color: #fff; border: none; border-radius: 10px; padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pe-load { padding: 44px 0; text-align: center; color: var(--muted); font-size: 14px; }
.pe-sec { font-size: 15px; font-weight: 800; color: var(--text); margin: 22px 2px 11px; }
.pe-hint { margin-top: 16px; font-size: 11.5px; color: var(--muted); line-height: 1.5; background: var(--surface-2); border-radius: 12px; padding: 11px 13px; }
.pe-cnav { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.pe-arrow { width: 36px; height: 36px; flex: none; border: 1px solid var(--border); background: var(--card); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text); }
.pe-arrow:disabled { opacity: .35; cursor: default; }
.pe-arrow:not(:disabled):hover { background: var(--surface-2); border-color: var(--brand); }
.pe-dstrip { flex: 1; min-width: 0; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 13px 2px 2px; }
.pe-dstrip::-webkit-scrollbar { display: none; }
.pe-dtab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 56px; padding: 7px 11px; border: 1px solid var(--border); background: var(--card); border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; line-height: 1.2; }
.pe-dtab span { font-size: 11px; font-weight: 500; color: var(--muted); }
.pe-dtab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pe-dtab.on span { color: rgba(255,255,255,.85); }
.pe-day-view { will-change: transform, opacity; }
@keyframes peSlideR { from { opacity: .25; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes peSlideL { from { opacity: .25; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.pe-verdict { background: var(--card); border: 1px solid var(--border); border-left: 6px solid var(--c); border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.07); margin-bottom: 12px; }
.pe-vd-top { display: flex; align-items: center; gap: 12px; }
.pe-vd-wmo { font-size: 34px; }
.pe-vd-score { font-size: 34px; font-weight: 900; color: var(--c); line-height: 1; }
.pe-vd-score small { font-size: 14px; font-weight: 600; color: var(--muted); }
.pe-vd-badge { margin-left: auto; color: #fff; font-size: 13px; font-weight: 800; border-radius: 20px; padding: 4px 12px; }
.pe-vd-head { font-size: 18px; font-weight: 900; color: var(--text); margin-top: 10px; }
.pe-vd-ph { font-size: 13.5px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
/* jauge radiale + verdict héros */
.pe-vd-grid { display: flex; align-items: center; gap: 16px; }
.pe-vd-gauge { width: 110px; flex: none; }
.pe-gauge { width: 110px; height: 110px; display: block; }
.pe-gauge.pulse { animation: peGaugePulse 2.4s ease-in-out infinite; }
@keyframes peGaugePulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(12,138,99,0)); } 50% { filter: drop-shadow(0 0 7px rgba(12,138,99,.55)); } }
.pe-vd-text { flex: 1; min-width: 0; }
.pe-vd-text .pe-vd-badge { display: inline-block; margin: 0 0 7px; }
.pe-bull-btn { width: 100%; margin-top: 13px; background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pe-bull-btn:hover { background: var(--accent-deep); }
.pe-verdict { box-shadow: 0 10px 30px rgba(14,42,36,.12); }
/* onglets-comparateur */
.pe-dtab { position: relative; min-width: 60px; }
.pe-dtab-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pe-dtab-crown .phi { width: 15px; height: 15px; color: var(--gold); display: block; }
.pe-dtab.lk { opacity: 1; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, var(--card)); }
/* jour verrouillé : la pastille montre un cadenas au lieu du score (sinon la valeur premium fuite dans le DOM) */
.pe-dtab-pill-lk { background: var(--gold) !important; display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; }
.pe-dtab-pill-lk .phi { width: 11px; height: 11px; color: #3a2e00; display: block; }
.pe-dtab .pe-dtab-d { font-size: 13px; font-weight: 700; color: var(--text); }
.pe-dtab.on .pe-dtab-d { color: #fff; }
.pe-dtab .pe-dtab-date { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.pe-dtab.on .pe-dtab-date { color: rgba(255,255,255,.85); }
.pe-dtab .pe-dtab-pill { margin-top: 4px; font-size: 11px; font-weight: 800; color: #fff; border-radius: 8px; padding: 1px 8px; }
.pe-dtab.best { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
/* cartes 2 niveaux + titres */
.pe-wind, .pe-essentials, .pe-sol, .pe-cv, .pe-perf-card { box-shadow: 0 2px 10px rgba(14,42,36,.05); }
.pe-sec { display: flex; align-items: center; gap: 8px; }
.pe-sec::before { content: ""; width: 4px; height: 15px; border-radius: 3px; background: var(--brand); flex: none; }
.pe-alert { margin-top: 10px; background: var(--accent-wash); border: 1px solid var(--gold-wash); color: var(--accent-deep); border-radius: 10px; padding: 8px 11px; font-size: 13px; font-weight: 600; }
.pe-essentials { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.pe-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 2px 2px; font-size: 12px; color: var(--muted); }
.pe-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pe-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.pe-legend em { font-style: normal; color: var(--text); font-weight: 600; }
.pe-broad { margin: 26px 2px 12px; font-size: 17px; font-weight: 900; color: var(--text); padding-top: 16px; border-top: 2px solid var(--border); }
/* Deux vues de la météo : Aujourd'hui / 7 jours (remplace l'ancien repliable « Comparer les 7 jours ») */
.pe-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--chip-bg, var(--card)); border: 1px solid var(--border); border-radius: 16px; padding: 5px; margin: 4px 0 14px; }
.pe-mtab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 8px; border: none; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; text-align: center; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.pe-mtab b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.pe-mtab span { font-size: 11px; font-weight: 500; opacity: .85; }
.pe-mtab:hover { color: var(--text); }
.pe-mtab.on { background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--brand-text, var(--brand)); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
/* Tableau comparatif des 7 jours : score + meilleur créneau + facteur limitant */
.pe-wk { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); }
.pe-wk-head, .pe-wk-row { display: grid; grid-template-columns: 62px 44px 1fr 1fr; align-items: center; gap: 10px; padding: 10px 12px; }
.pe-wk-head { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.pe-wk-row { width: 100%; border: none; border-top: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; position: relative; transition: background .18s ease; }
.pe-wk-row:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.pe-wk-row.top { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.pe-wk-d { display: flex; flex-direction: column; line-height: 1.15; }
.pe-wk-d b { font-size: 14px; font-weight: 800; }
.pe-wk-d i { font-style: normal; font-size: 11px; color: var(--muted); }
.pe-wk-s { justify-self: start; min-width: 34px; padding: 4px 7px; border-radius: 9px; color: #fff; font-size: 14px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.pe-wk-w { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pe-wk-w svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.pe-wk-l { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-wk-star { position: absolute; top: 6px; right: 8px; display: inline-flex; }
.pe-wk-star svg { width: 14px; height: 14px; color: var(--gold); }
@media (max-width: 400px) {
  .pe-wk-head, .pe-wk-row { grid-template-columns: 54px 40px 1fr; gap: 8px; padding: 9px 10px; }
  .pe-wk-head span:last-child, .pe-wk-l { display: none; }
}
.pe-week-cta { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; margin: 22px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); cursor: pointer; text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.pe-week-cta:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pe-week-cta:active { transform: scale(.985); }
.pe-week-t { grid-column: 1; font-size: 15px; font-weight: 800; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.pe-week-t svg { width: 18px; height: 18px; flex: none; color: var(--brand-text, var(--brand)); }
.pe-week-sub { grid-column: 1; font-size: 12px; color: var(--muted); }
.pe-week-chev { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--muted); }
/* CTA « Débloque les 7 jours » (non-abonné, sous les 3 jours gratuits) */
.pe-week-lock { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; margin: 18px 0 4px; padding: 14px 16px; cursor: pointer; text-align: left; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 12%, var(--card)); transition: transform .18s ease, box-shadow .18s ease; }
.pe-week-lock:hover { box-shadow: var(--glow-gold); }
.pe-week-lock:active { transform: scale(.985); }
.pe-week-lock-t { grid-column: 1; font-size: 15px; font-weight: 800; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.pe-week-lock-t .phi { width: 17px; height: 17px; flex: none; color: var(--gold-deep); }
.pe-week-lock-sub { grid-column: 1; font-size: 12px; color: var(--text-2); }
.pe-week-lock-arr { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; color: var(--gold-deep); }
.pe-week-lock-arr .phi { width: 20px; height: 20px; }
.pe-rely { font-size: 11.5px; color: var(--muted); margin: 10px 2px 0; font-style: italic; }
.pe-spec { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.pe-spec-l { font-size: 13px; font-weight: 700; color: var(--text); }
.pe-spec-chip { border: 1px solid var(--border); background: var(--card); border-radius: 16px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.pe-spec-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* « Choisir une espèce » : appel à l'action BIEN visible (19/07) — c'est la porte vers les 294 espèces */
.pe-spec-pick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 13px; font-weight: 800;
  background: color-mix(in srgb, var(--brand) 12%, var(--card)); border: 1.5px solid var(--brand); color: var(--brand-dark);
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--brand) 55%, transparent); }
.pe-spec-pick:hover { background: color-mix(in srgb, var(--brand) 20%, var(--card)); }
.pe-spec-pick svg { width: 15px; height: 15px; flex: none; }
:root:not([data-theme="light"]) .pe-spec-pick { color: var(--brand-strong); }
.pe-spec-pick.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pe-pick-clear { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 2px; border-radius: 50%; background: color-mix(in srgb, var(--on-brand) 22%, transparent); font-size: 13px; line-height: 1; }
.pe-pick-clear:hover { background: color-mix(in srgb, var(--on-brand) 38%, transparent); }
/* #6 : bouton « bon jour pour pêcher X ? » en pleine largeur sous les 2 actions */
.sp-weather-btn { flex: 1 1 100%; justify-content: center; }
/* #7 : widget activité des poissons entièrement cliquable → météo */
.hub-click { cursor: pointer; }
.hub-click:hover { border-color: var(--brand-line); }
.hub-click:active { transform: scale(.995); }
/* P2 — puces sous le verdict : facteur limitant / fenêtre favorable / fiabilité */
.pe-fx { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 2px 2px; }
.pe-fx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--card); color: var(--muted); border: 1px solid var(--border); }
.pe-fx-chip svg { width: 15px; height: 15px; flex: none; }
.pe-fx-chip b { color: var(--text); }
.pe-fx-lim { background: color-mix(in srgb, #e8951f 14%, var(--card)); border-color: color-mix(in srgb, #e8951f 40%, var(--border)); }
.pe-fx-win { background: color-mix(in srgb, var(--brand) 12%, var(--card)); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.pe-fx-conf.c1 { opacity: .78; }
.pe-tips { display: flex; flex-direction: column; gap: 7px; }
.pe-tip-row { background: var(--accent-wash); border: 1px solid var(--gold-wash); border-radius: 11px; padding: 9px 12px; font-size: 13px; color: #6b4423; line-height: 1.45; }
:root:not([data-theme="light"]) .pe-tip-row { color: #f3d4ad; border-color: var(--accent-line); } /* sombre : brun illisible → crème chaud lisible */
.pe-sol { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.pe-sol-moon { font-size: 12.5px; color: var(--muted); margin-bottom: 9px; }
.pe-sol-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.pe-sol-row:first-of-type { border-top: none; }
.pe-sol-row b { color: var(--text); }
.pe-sol-badge { flex: none; font-size: 11px; font-weight: 800; color: #5d7280; background: var(--surface-2); border-radius: 7px; padding: 2px 8px; }
.pe-sol-row.maj .pe-sol-badge { color: #fff; background: var(--brand); }
.pe-sol-sub { color: var(--muted); font-size: 12px; margin-left: auto; }
.pe-sol-note { font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 9px; }
.pe-pt { cursor: pointer; }
.pe-tip { position: fixed; z-index: 11000; transform: translate(-50%, -100%); background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.pe-tip[hidden] { display: none; }
.pe-wind { display: flex; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.pe-compass { width: 118px; height: 118px; flex: none; }
.pe-compass-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.pe-compass-leg { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; color: var(--muted); }
.pe-compass-leg span { display: inline-flex; align-items: center; }
.pe-compass-leg .lg-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.lg-dot.lg-red { background: var(--accent-deep); }
.lg-dot.lg-em { background: var(--brand-strong); }
/* Rose des vents (petite + grande boussole) — deux aiguilles, thème-aware */
.pec-face { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1.4; }
.pec-tick { stroke: var(--text-3); }
.pec-card { fill: var(--muted); }
.pec-n { fill: var(--accent-deep); }
.pec-nn-n { fill: var(--accent-deep); stroke: rgba(255,255,255,.5); stroke-width: .5; }
.pec-nn-s { fill: var(--muted); opacity: .75; }
.pec-wind-shaft, .pec-wind-head { fill: var(--brand-strong); }
.pec-wind-head { filter: drop-shadow(0 1px 2px rgba(31,211,154,.45)); }
.pec-wind-src { fill: var(--brand-strong); stroke: var(--card); stroke-width: 1.4; }
.pec-hub { fill: var(--text-2); }
.pe-wind-info { flex: 1; min-width: 0; }

/* ===== 🌊 Page MARÉES & MER ===== */
.mar-page { padding: 12px 14px 40px; max-width: 640px; margin: 0 auto; }
.mar-locbar { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; margin-bottom: 12px; }
.mar-loc { min-width: 0; }
.mar-loc-name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; color: var(--text); }
.mar-loc-name .phi { width: 17px; height: 17px; color: var(--brand); flex: none; }
.mar-loc-warn { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.mar-loc-btns { display: flex; gap: 6px; }
.mar-lbtn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); color: var(--brand-dark); border: 1px solid var(--brand-line); border-radius: var(--radius-pill); padding: 7px 12px; font: 700 12.5px var(--font-body); cursor: pointer; transition: background .2s var(--ease-out, ease), transform .1s; }
.mar-lbtn:hover { background: var(--brand-wash); } .mar-lbtn:active { transform: scale(.96); }
.mar-lbtn .phi { width: 15px; height: 15px; }
.mar-searchwrap { grid-column: 1 / -1; position: relative; }
.mar-search { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; font: 500 15px var(--font-body); color: var(--text); }
.mar-search::placeholder { color: var(--text-3); }
.mar-search:focus { outline: none; border-color: var(--brand-line); box-shadow: var(--glow-brand); }

/* Hero live */
.mar-hero { display: flex; align-items: stretch; gap: 16px; padding: 16px 18px; }
.mar-gauge { flex: none; display: flex; align-items: center; }
.tide-gauge { width: 116px; height: auto; }
.tg-tube { fill: var(--surface-3); }
.tg-frame { fill: none; stroke: var(--glass-border); stroke-width: 2; }
.tg-shimmer { opacity: .5; }
.tg-mark { stroke-width: 1.4; stroke-dasharray: 3 3; } .tg-mark.hi { stroke: var(--brand-strong); } .tg-mark.lo { stroke: var(--accent); }
.tg-cap { font: 800 10.5px var(--font-body); } .tg-cap.hi { fill: var(--brand-strong); } .tg-cap.lo { fill: var(--accent); }
.mar-live { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.mar-h { font-family: var(--font-title); font-weight: 900; line-height: .9; color: var(--text); }
.mar-h span { font-size: 58px; font-variant-numeric: tabular-nums; } .mar-h small { font-size: 20px; color: var(--muted); font-weight: 800; margin-left: 3px; }
.mar-trend { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; padding: 4px 0; }
.mar-trend .phi { width: 17px; height: 17px; }
.mar-trend.up { color: var(--brand); } .mar-trend.dn { color: var(--accent); } .mar-trend.etale { color: var(--muted); }
.mar-count-box { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
.mar-count-lbl { font-size: 12.5px; color: var(--muted); } .mar-count-lbl b { color: var(--text); font-weight: 800; }
.mar-count { font-family: var(--font-title); font-weight: 900; font-size: 30px; color: var(--brand); line-height: 1.05; font-variant-numeric: tabular-nums; }
.mar-count.pulse { animation: peGaugePulse 1.6s ease-in-out infinite; }
.mar-count-sub { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.mar-sec { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin: 18px 2px 8px; }
.mar-sec-sub { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-3); opacity: .85; margin-left: 4px; }

/* Cartes PM/BM du jour */
.mar-tides { display: flex; flex-wrap: wrap; gap: 8px; }
.mar-tide { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 9px 13px; flex: 1 1 140px; }
.mar-tide .phi { width: 20px; height: 20px; flex: none; }
.mar-tide b { display: block; font-size: 13px; font-weight: 800; color: var(--text); } .mar-tide span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mar-tide.pm .phi { color: var(--brand); } .mar-tide.bm .phi { color: var(--accent); } .mar-tide.marn .phi { color: var(--muted); }
.mar-tide.cur { box-shadow: var(--glow-brand); border-color: var(--brand-line); }

/* Coefficient estimé */
.mar-coef { margin-top: 10px; padding: 14px 18px; }
.mar-coef-top { display: flex; align-items: center; gap: 14px; }
.mar-coef-n { font-family: var(--font-title); font-weight: 900; font-size: 46px; line-height: .9; color: var(--text); font-variant-numeric: tabular-nums; }
.mar-coef.low .mar-coef-n { color: var(--brand); } .mar-coef.mid .mar-coef-n { color: var(--gold-deep); } .mar-coef.big .mar-coef-n { color: var(--accent-deep); }
.mar-coef-lbl { font-size: 15px; font-weight: 800; color: var(--text); }
.mar-coef-badge { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
.mar-coef-bar { position: relative; height: 8px; border-radius: 99px; margin: 14px 0 5px; background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 55%, var(--accent-deep) 100%); }
.mar-coef-bar i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--text); transform: translate(-50%, -50%); }
.mar-coef-scale { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mar-coef.faible .mar-coef-lbl { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--muted); }
.mar-coef.faible .mar-coef-lbl .phi { width: 18px; height: 18px; color: var(--brand); flex: none; }

/* Tokens couleur « mer » (vagues) — bleu distinct du vert marque */
:root { --sea: #4aa8e0; }
:root[data-theme="light"] { --sea: #2f80c4; }

/* Courbe du jour — refonte */
.mar-curve { padding: 14px 12px 10px; }
.tide-curve { width: 100%; height: auto; display: block; overflow: visible; }
.tc-night { fill: var(--text); opacity: .07; }
.tc-slot { fill: var(--brand); opacity: .12; }
.tc-grid { stroke: var(--text); opacity: .05; stroke-width: 1; }
.tc-ext .tc-ring { stroke-width: 2; fill: var(--card); }
.tc-ext.pm .tc-ring { stroke: var(--brand); } .tc-ext.bm .tc-ring { stroke: var(--accent); }
.tc-ext.pm .tc-core { fill: var(--brand); } .tc-ext.bm .tc-core { fill: var(--accent); }
.tc-elab { font: 800 10px var(--font-body); fill: var(--text-2); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.tc-cur { stroke: var(--brand-strong); stroke-width: 1.6; stroke-dasharray: 2 3; opacity: .7; }
.tc-dot-halo { fill: var(--brand-strong); opacity: .2; animation: tcPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tc-dot { fill: var(--brand-strong); stroke: var(--card); stroke-width: 2; }
@keyframes tcPulse { 0%, 100% { opacity: .12; } 50% { opacity: .34; } }
@media (prefers-reduced-motion: reduce) { .tc-dot-halo { animation: none; } }
.tc-ax { font: 700 10px var(--font-body); fill: var(--text-3); }
.mar-curve-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding: 0 4px; font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.mar-curve-leg span { display: inline-flex; align-items: center; gap: 5px; }
.mar-curve-leg i { width: 9px; height: 9px; border-radius: 50%; }
.mar-curve-leg .cl-pm { background: var(--brand); } .mar-curve-leg .cl-bm { background: var(--accent); }
.mar-curve-leg .cl-slot { background: var(--brand); opacity: .35; border-radius: 2px; } .mar-curve-leg .cl-night { background: var(--text); opacity: .18; border-radius: 2px; }

/* Conditions en mer — vagues + eau + vent */
.mar-sea { padding: 14px 14px 10px; }
.sea-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sea-m { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px 11px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); position: relative; }
.sea-ic { color: var(--text-3); margin-bottom: 2px; }
.sea-ic .phi { width: 20px; height: 20px; }
.sea-v { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; font-size: 26px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.sea-v small { font-size: 12px; font-weight: 800; color: var(--text-3); margin-left: 2px; }
.sea-k { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.25; }
.sea-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
.sea-wave .sea-ic { color: var(--sea); }
.sea-wave.calm .sea-tag { color: #35b37e; } .sea-wave.light .sea-tag { color: var(--sea); }
.sea-wave.mod .sea-tag { color: #e0902f; } .sea-wave.rough .sea-tag { color: var(--accent-deep); }
.sea-temp .sea-ic { color: var(--accent); }
.sea-spark { margin-top: 12px; }
.wave-spark { width: 100%; height: auto; display: block; overflow: visible; color: var(--sea); }
.wv-cur { stroke: var(--sea); stroke-width: 1.4; stroke-dasharray: 2 3; opacity: .6; }
.wv-dot { fill: var(--sea); stroke: var(--card); stroke-width: 1.8; }
.wv-ax { font: 700 9.5px var(--font-body); fill: var(--text-3); }
.sea-scale { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; padding: 0 2px; font-size: 11px; font-weight: 700; color: var(--text-3); }
.sea-scale span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.sea-scale .phi { width: 13px; height: 13px; color: var(--sea); }
.sea-scale b { color: var(--text-2); }
.sea-noswell { margin-top: 12px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.sea-noswell .phi { width: 15px; height: 15px; flex: none; }
@media (max-width: 380px) { .sea-v { font-size: 22px; } .sea-k { font-size: 10px; } }

.mar-cond { margin-top: 8px; }
.mar-page .hyl-mapbtn { margin-top: 16px; width: 100%; }
.mar-mb-sub { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.mar-hint { margin-top: 16px; } .mar-hint a { color: var(--brand-dark); font-weight: 700; }
.mar-toofar { text-align: center; padding: 34px 20px; color: var(--muted); }
.mar-toofar .phi { width: 46px; height: 46px; color: var(--brand); opacity: .7; }
.mar-toofar h3 { margin: 10px 0 4px; font-size: 18px; color: var(--text); } .mar-toofar p { font-size: 14px; margin: 0 auto 16px; max-width: 320px; }
@media (prefers-reduced-motion: no-preference) { .tg-shimmer { animation: tgShimmer 5.5s ease-in-out infinite; } }
@keyframes tgShimmer { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.pe-wind-card { font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.1; }
.pe-wind-card span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.pe-wind-spd { margin-top: 8px; font-size: 15px; color: var(--text); }
.pe-wind-spd b { font-size: 22px; font-weight: 900; color: var(--brand-dark); }
.pe-wind-spd em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 7px; padding: 2px 7px; margin-left: 4px; }
.pe-wind-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.pe-wind-when { font-size: 11px; font-weight: 700; color: var(--brand-dark); margin-top: 6px; text-transform: uppercase; letter-spacing: .4px; }
.pe-compass-btn { margin-top: 10px; background: var(--surface-2); color: var(--brand-dark); border: 1px solid var(--brand-wash); border-radius: 9px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pe-compass-btn:hover { background: var(--surface-2); }
.pe-compass-mark { opacity: 0; }
.pe-compass-live .pe-compass-mark { opacity: 1; }
.bc { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bc .modal-h { width: 100%; }
.bc-compass { width: 240px; max-width: 78vw; height: auto; display: block; }
.bc-info { text-align: center; }
.bc-card { font-size: 30px; font-weight: 900; color: var(--text); line-height: 1.1; }
.bc-card span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.bc-spd { font-size: 13.5px; color: var(--text); margin-top: 5px; }
.bc-spd b { font-weight: 900; color: var(--brand-dark); }
.bc-hint { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.45; }
.bc-enable { width: auto; }
.pe-cv { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 9px; }
.pe-cv-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pe-cv-h b { font-size: 13px; font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.pe-cv-h small { font-size: 11px; font-weight: 500; color: var(--muted); }
.pe-cv-svg { width: 100%; height: auto; display: block; }
.pe-ax { font-size: 10px; fill: #9bb0a8; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.pe-cross { stroke: #7e97a3; stroke-width: 1; stroke-dasharray: 3 3; }
.pe-cross-dot { fill: #fff; stroke-width: 2.4; }
.pe-cv-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); margin-top: 3px; padding: 0 3px; }
.pe-cv-axis span { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.pe-cv-axis span i { font-style: normal; }
.pe-sec-sub { font-size: 12px; font-weight: 500; color: var(--muted); }
/* lignes explicatives (« L'essentiel ») + analyse heure par heure — page Météo */
.dd-row { display: flex; gap: 11px; align-items: flex-start; }
.dd-ic { font-size: 19px; flex: none; width: 24px; text-align: center; }
/* P2 polish — icônes PHI dans les en-têtes de graphiques & rangées météo (ex-émojis) */
.dd-ic svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--brand-dark); }
.dd-mini-h svg, .pe-cv-h svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; color: var(--muted); }
.dd-row b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.dd-row p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.dd-deep-in { display: flex; flex-direction: column; gap: 12px; }
.dd-best { background: var(--surface-2); border: 1px solid var(--brand-wash); border-radius: 11px; padding: 9px 12px; font-size: 13px; color: var(--text); }
.dd-best b { font-weight: 800; }
.dd-mini { }
.dd-mini-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.dd-strip { width: 100%; height: auto; display: block; }
.dd-strip-leg { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.dd-haxis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); margin-top: 2px; padding: 0 2px; }
.dd-deep-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }

/* ===== Récompense après une prise ===== */
.reward-ov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(8,30,22,.6); padding: 20px; animation: bf-fade .25s ease both; cursor: pointer; }
.reward-card { background: var(--card); border-radius: 22px; padding: 24px 22px 20px; max-width: 360px; width: 100%; text-align: center; cursor: default; animation: bf-pop .45s cubic-bezier(.2,1.3,.4,1) both; box-shadow: 0 20px 50px rgba(0,0,0,.32); }
.rw-burst { font-size: 38px; line-height: 1; }
.rw-xp { font-size: 40px; font-weight: 900; color: var(--brand); letter-spacing: -1px; margin-top: 2px; }
.rw-catch { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.rw-xpbar { height: 12px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.rw-xpbar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand), var(--gold)); transition: width 1s cubic-bezier(.2,.8,.3,1) .15s; }
.rw-xprow { font-size: 12px; color: var(--muted); margin-top: 7px; }
.rw-extra { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rw-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 11px; }
.rw-line.top1 { background: var(--gold-wash); border-color: var(--gold-wash); }
.rw-line.lvl { background: var(--surface-2); border-color: var(--brand-wash); }
.rw-line.evo { background: var(--surface-2); border-color: var(--brand-wash); }
.rw-line.defi { background: var(--gold-wash); border-color: var(--gold-wash); }
.rw-ic { font-size: 18px; }
.rw-crea { width: 42px; height: 26px; flex: none; }
.rw-crea svg, .rw-crea img { width: 100%; height: 100%; object-fit: contain; }
.rw-badge { width: 40px; height: 40px; flex: none; }
.rw-badge .tr-hex { width: 100%; height: 100%; }
.rw-ok { width: 100%; margin-top: 16px; }

/* ===== Onboarding ===== */
.ob-card { text-align: center; }
.ob-logo { width: 76px; height: 76px; object-fit: contain; display: block; margin: 0 auto; }
.ob-title { font-size: 21px; font-weight: 900; color: var(--text); margin-top: 4px; }
.ob-sub { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin: 8px 0 16px; }
.ob-input { width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; text-align: center; }
.ob-input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.ob-emblems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
.ob-emb { font-size: 26px; padding: 8px 0; border: 2px solid var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; }
.ob-emb.on { border-color: var(--brand); background: var(--surface-2); }
.ob-photo-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; padding: 12px; border: 2px dashed var(--brand); border-radius: 12px; background: var(--surface-2); color: var(--brand-dark); font-weight: 800; cursor: pointer; }
.ob-photo-prev { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); background-size: cover; background-position: center; font-size: 18px; flex: none; }
.ob-pick-lab { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 8px; }
.ob-avs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.ob-av { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.ob-av.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,184,134,.35); }

/* ===== Popup espèces cours d'eau ===== */
.wi-popup .maplibregl-popup-content { padding: 0; overflow: hidden; }
.wi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 12px 6px; border-bottom: 1px solid var(--border); }
.wi-head b { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wi-src { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.wi-intro { font-size: 11.5px; color: var(--muted); margin: 6px 12px 2px; }
.wi-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 10px 8px; }
.wi-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 3px; border-radius: 100px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; transition: background .12s; }
.wi-chip.wi-fiche { border-color: rgba(18,184,134,.4); color: var(--brand-dark); }
.wi-chip:hover { background: var(--brand-wash); border-color: var(--brand); }
.wi-chip .sp-photo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.wi-chip svg { width: 20px; height: 20px; flex-shrink: 0; }
.wi-unknown { background: rgba(0,0,0,.04); color: var(--muted); cursor: default; border-color: transparent; font-size: 11px; }
.wi-note { font-size: 10.5px; color: var(--muted); margin: 2px 12px 8px; line-height: 1.4; font-style: italic; opacity: .9; }
.wi-loading, .wi-empty { font-size: 12.5px; color: var(--muted); padding: 10px 12px; margin: 0; line-height: 1.45; }
.wi-add { display: block; width: 100%; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--brand); border: none; border-top: 1px solid var(--border); background: transparent; text-align: center; cursor: pointer; font-family: inherit; }
.wi-add:hover { background: var(--surface-2); }
/* mini-menu appui long sur la carte (pin + 2 choix) */
/* marqueur : positionné par maplibre (ne PAS lui mettre de transform/animation, ça écraserait son positionnement) */
.lp-pin { width: 26px; height: 34px; cursor: default; }
/* élément interne : porte l'animation + l'ombre + le point précis */
.lp-pin-in { position: relative; width: 26px; height: 34px; line-height: 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); transform-origin: 50% 100%; animation: lp-drop .25s cubic-bezier(.3,1.3,.5,1) both; }
.lp-pin-in svg { display: block; }
/* point très précis pile à la pointe (= position cliquée) */
.lp-pin-in::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.4); }
@keyframes lp-drop { from { transform: translateY(-12px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-popup .maplibregl-popup-content { padding: 8px; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.lp-menu { display: flex; flex-direction: column; gap: 6px; min-width: 178px; }
.lp-menu-h { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0 4px; }
.lp-opt { display: flex; align-items: center; gap: 8px; justify-content: center; width: 100%; padding: 11px 12px; border-radius: 11px; border: 1px solid transparent; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .09s ease, background .14s ease; }
.lp-opt:active { transform: scale(.96); }
.lp-catch { background: var(--brand); color: #fff; }
.lp-catch:hover { background: var(--brand-dark); }
.lp-spot { background: var(--card); color: var(--accent); border-color: var(--accent); }
.lp-spot:hover { background: rgba(255,107,61,.08); }

/* ===== Compte / connexion (Profil) ===== */
.pf-account { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; background: var(--surface-2); border: 1px solid rgba(18,184,134,.22); border-radius: 14px; padding: 13px 14px; margin: 4px 0 8px; }
.pf-account-out { background: linear-gradient(135deg,var(--surface-2),var(--surface-2)); }
.pf-acc-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 200px; }
.pf-acc-ic { font-size: 22px; line-height: 1; }
.pf-acc-txt { display: flex; flex-direction: column; min-width: 0; }
.pf-acc-txt b { font-size: 14px; }
.pf-acc-txt span { font-size: 12px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.pf-acc-in { flex: 0 0 auto; }
.pf-acc-out { flex: 0 0 auto; }
#auth-email[readonly] { opacity: .65; }
.auth-ok { background: var(--surface-2); border: 1px solid rgba(18,184,134,.3); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--brand-dark); line-height: 1.4; margin: 4px 0; }
.auth-social { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.auth-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-weight: 700; padding: 11px 12px; border: 1px solid var(--border); background: var(--card); color: #1a1a1a; }
.auth-oauth svg { width: 18px; height: 18px; flex: 0 0 auto; }
.auth-fb { background: #1877f2; color: #fff; border-color: #1877f2; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
.auth-legal { font-size: 11px; color: var(--muted); margin: 10px 2px 0; line-height: 1.45; }
.auth-legal a { color: var(--brand); }
.auth-or::before, .auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(0,0,0,.12); }
/* ── Popup Connexion/Inscription REFONDU (popup de conversion) ─────────────── */
.modal-card:has(.aum-hero) { position: relative; padding-top: 0; overflow-x: hidden; }
.aum-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, transform .12s ease; }
.aum-x:hover { color: var(--text); background: var(--surface-2); }
.aum-x:active { transform: scale(.92); }
/* Hero pleine largeur : halo radial de marque qui « sort » de la carte */
.aum-hero { position: relative; margin: 0 -20px 14px; padding: 26px 20px 16px; text-align: center; overflow: hidden; }
.aum-hero::before { content: ""; position: absolute; inset: -40% -20% auto; height: 150%; background: radial-gradient(ellipse 65% 80% at 50% 0%, var(--brand-wash), transparent 70%); pointer-events: none; }
.aum-logo { position: relative; width: 54px; height: 54px; border-radius: 16px; box-shadow: 0 0 0 1px var(--brand-line), 0 10px 26px -12px rgba(31,211,154,.55); animation: aumPop .45s cubic-bezier(0.32,0.72,0,1) both; }
.aum-title { position: relative; margin: 12px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); text-wrap: balance; }
.aum-chips { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.aum-chips span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-wash); border: 1px solid var(--brand-line); border-radius: 99px; padding: 3px 9px; }
.aum-chips .phi { width: 11px; height: 11px; }
/* Avantages : pastilles icône + texte, entrée en cascade */
.aum-perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.aum-perks li { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 550; color: var(--text); line-height: 1.3; opacity: 0; animation: aumRise .4s cubic-bezier(0.32,0.72,0,1) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
.aum-pk-ic { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand-wash); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand-line); }
.aum-pk-ic .phi { width: 16px; height: 16px; }
@keyframes aumRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes aumPop { from { opacity: 0; transform: scale(.7) translateY(6px); } to { opacity: 1; transform: none; } }
/* Google : carte blanche qui « lève » au survol */
.aum-google { border-radius: 13px; padding: 12px; font-size: 14px; background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(10,30,25,.08), 0 8px 20px -12px rgba(10,30,25,.25); transition: transform .18s cubic-bezier(0.32,0.72,0,1), box-shadow .18s ease; }
.aum-google:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(10,30,25,.08), 0 12px 26px -12px rgba(10,30,25,.3); }
.aum-google:active { transform: scale(.985); }
.aum-or { margin: 12px 0; }
.aum-form { display: flex; flex-direction: column; gap: 9px; }
.aum-input { width: 100%; box-sizing: border-box; font-size: 16px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.aum-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.aum-cta { width: 100%; justify-content: center; font-size: 15px; font-weight: 800; padding: 13px; border-radius: 13px; box-shadow: var(--glow-brand); transition: transform .15s cubic-bezier(0.32,0.72,0,1), box-shadow .2s ease, background .15s ease; }
.aum-cta:hover { transform: translateY(-1px); }
.aum-cta:active { transform: scale(.985); }
.aum-ok { border-radius: 13px; }
.aum-legal { text-align: center; margin-top: 4px; }
/* Teaser « compte requis » : flou par-dessus le contenu (sous le header, au-dessus de la nav) */
.gate-teaser { position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(8,30,26,.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: bf-fade .2s ease both; }
@media (max-width: 760px) { .gate-teaser { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } }
.gate-card { background: var(--card); border-radius: 18px; box-shadow: 0 14px 44px rgba(0,0,0,.2); padding: 24px 22px; max-width: 330px; width: 100%; text-align: center; }
.gate-card .gate-ic { font-size: 34px; line-height: 1; }
.gate-card h3 { margin: 8px 0 6px; font-size: 18px; }
.gate-card p { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.gate-card .btn { width: 100%; }
.hm-sec-h { font-weight: 800; font-size: 15px; margin: 20px 12px 8px; }
/* ===== Dashboard admin ===== */
.stats-page { padding: 12px 12px 90px; }
.st-period { display: flex; gap: 8px; margin: 4px 0 12px; }
.st-per { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); font-weight: 700; font-size: 13px; cursor: pointer; }
.st-per.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.st-grid-sm { margin: 0; }
.st-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.st-kpi-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.st-kpi-v { font-size: 26px; font-weight: 800; line-height: 1.1; }
.st-kpi-s { font-size: 11px; color: var(--muted); }
.st-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.st-h { font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.st-h small { font-weight: 500; color: var(--muted); font-size: 12px; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .st-two { grid-template-columns: 1fr; } }
.st-series { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.st-cols { width: 100%; height: 38px; display: block; }
.st-bars { display: flex; flex-direction: column; gap: 7px; }
.st-bar { display: grid; grid-template-columns: 128px 1fr 46px; align-items: center; gap: 8px; font-size: 12.5px; }
.st-bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bt { background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; }
.st-bt i { display: block; height: 100%; border-radius: 6px; }
.st-bv { text-align: right; font-weight: 700; }
/* skeleton loaders */
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sk-av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); flex: none; animation: sk-pulse 1.5s ease-in-out infinite; }
.sk-body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-line { height: 13px; border-radius: 6px; background: var(--surface-2); animation: sk-pulse 1.5s ease-in-out infinite; }
.sk-short { width: 45%; height: 10px; border-radius: 5px; background: var(--surface-2); animation: sk-pulse 1.5s ease-in-out infinite .2s; }
.sk-hero { height: 84px; width: 84px; border-radius: 50%; background: var(--surface-2); margin: 0 auto; animation: sk-pulse 1.5s ease-in-out infinite; }
.sk-title { height: 18px; width: 130px; border-radius: 8px; background: var(--surface-2); margin: 12px auto 0; animation: sk-pulse 1.5s ease-in-out infinite .1s; }
.sk-sub { height: 12px; width: 90px; border-radius: 6px; background: var(--surface-2); margin: 7px auto 0; animation: sk-pulse 1.5s ease-in-out infinite .2s; }
.sk-wrap { padding: 28px 16px 0; text-align: center; }
.st-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
.st-modrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.st-modrow:first-child { border-top: 0; }
.st-modinfo { display: flex; flex-direction: column; min-width: 0; }
.st-modinfo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-modinfo span { font-size: 12px; color: var(--muted); }
.st-modbtns { display: flex; gap: 6px; flex: 0 0 auto; }
.st-modbtns .btn { padding: 6px 12px; font-size: 13px; }
.st-utable { display: flex; flex-direction: column; font-size: 12.5px; }
.st-utr { display: grid; grid-template-columns: 2fr 1fr 1fr 0.5fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); align-items: center; }
.st-uth { font-weight: 700; color: var(--muted); border-top: 0; }
.st-uemail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-gomod { width: 100%; margin-top: 4px; }
@media (min-width: 560px) { .st-period { flex-wrap: wrap; } .st-gomod { width: auto; margin-left: auto; margin-top: 0; } }
/* Espace admin : menu vertical à gauche (desktop) + reste de la page en colonne 2 */
.stats-page { display: grid; grid-template-columns: 192px minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-content: start; }
.stats-page > :not(.adm-menu) { grid-column: 2; min-width: 0; }
.adm-menu { grid-column: 1; grid-row: 1 / span 99; align-self: start; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.adm-tab { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--card); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 14px; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: .15s; }
.adm-tab:hover { border-color: var(--accent); color: var(--accent); }
.adm-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(20,163,184,.3); }
/* Mobile : le menu repasse en haut, horizontal et défilable */
@media (max-width: 600px) {
  .stats-page { display: block; }
  .adm-menu { position: static; flex-direction: row; gap: 6px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-tab { width: auto; flex: 0 0 auto; text-align: center; border-radius: 999px; padding: 8px 14px; }
}
/* Table Comptes (vue dédiée, 6 colonnes) */
.acc-utr { grid-template-columns: 2fr 1.1fr .5fr .8fr 1.2fr .5fr .5fr; }
.acc-utr .conf-badge { padding: 1px 7px; font-size: 11px; }
.spe-utr { grid-template-columns: 2.4fr .8fr .8fr .9fr .5fr; }
.hm-admin { background: linear-gradient(135deg, var(--brand-wash), var(--brand-wash)); border-color: var(--brand-wash); }
/* Bloc Visiteurs (Vue d'ensemble) */
.st-vis { background: linear-gradient(180deg, var(--surface-2), var(--card)); border-color: var(--surface-2); }
/* Cartes-résumé par domaine (cliquables) */
.st-domgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.st-domcard { text-align: left; cursor: pointer; border: 1px solid var(--border); transition: .15s; font: inherit; color: inherit; }
.st-domcard:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20,163,184,.15); transform: translateY(-1px); }
.st-domh { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.st-domv { font-size: 22px; font-weight: 800; margin: 2px 0; }
.st-doms { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
/* Lignes cliquables (drill-down) */
.spe-row, .acc-row, .reg-row, .spot-card { cursor: pointer; }
.spe-row:hover, .acc-row:hover { background: var(--surface-2); }
/* Champs admin (recherche, édition dans le drawer) */
.adm-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; margin: 0 0 10px; }
.adm-kv { font-size: 13px; margin: 6px 0; color: #333; }
.adm-kv b { color: var(--muted); font-weight: 700; margin-right: 6px; }
.adm-danger { color: #c0392b; border-color: #f0b9b1; }
.admin-edit { border-color: #b6e6d8; color: var(--brand-dark); }
/* Modale suggestion : valeur actuelle / proposition */
.ed-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 8px 0 3px; }
.ed-cur { background: var(--surface-2); color: #555; }
/* Suggestions admin : comparatif avant → après */
.sg-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
.sg-head { font-size: 14px; margin-bottom: 6px; }
.sg-diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin: 4px 0 8px; }
.sg-col { border-radius: 10px; padding: 7px 9px; font-size: 13px; word-break: break-word; }
.sg-col span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; margin-bottom: 2px; }
.sg-before { background: var(--accent-wash); color: #8a2a20; }
.sg-after { background: var(--brand-wash); color: #0c6b4e; }
.sg-arrow { align-self: center; font-size: 18px; color: var(--muted); }
.sg-note { background: var(--surface-2); border-radius: 10px; padding: 7px 9px; font-size: 13px; margin: 4px 0 8px; }
.sg-hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 480px) { .sg-diff { grid-template-columns: 1fr; } .sg-arrow { transform: rotate(90deg); justify-self: center; } }
/* Badge « espèce attestée » sur la fiche spot */
.f-attested { margin: 6px 0 2px; padding: 8px 11px; background: var(--brand-wash); border: 1px solid var(--brand-wash); border-radius: 10px; font-size: 13.5px; color: #0c6b4e; }
.f-attested b { color: #0c6b4e; }
/* Badge « record communauté » sur la fiche espèce */
.sp-comm-record { margin: 10px 0 4px; padding: 10px 13px; background: linear-gradient(135deg, var(--gold-wash), var(--gold-wash)); border: 1px solid var(--gold-wash); border-radius: 12px; font-size: 14px; color: #8a5a00; }
.sp-comm-record b { color: #8a5a00; }
.sp-cr-by-txt { color: var(--gold-deep); font-weight: 600; }
/* nom du titulaire du record : bouton → profil public (audit 19/07) */
.sp-cr-by { color: var(--gold-deep); font-weight: 700; border: none; background: none; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold-deep) 45%, transparent); text-underline-offset: 2px; }
.sp-cr-by:hover { text-decoration-color: var(--gold-deep); }
:root:not([data-theme="light"]) .sp-cr-by, :root:not([data-theme="light"]) .sp-cr-by-txt { color: var(--gold); }
/* Badge de fiabilité (candidats d'enrichissement) + crédibilité (compte) */
.conf-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.conf-badge.hi { background: var(--brand-wash); color: #0c6b4e; }
.conf-badge.mid { background: var(--gold-wash); color: #9a6300; }
.conf-badge.lo { background: var(--surface-2); color: #6b6b66; }
.trust-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.trust-detail { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.trust-bars { display: flex; flex-direction: column; gap: 5px; }
.tb-row { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 8px; font-size: 12px; }
.tb-l { color: #444; }
.tb-t { height: 7px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.tb-t i { display: block; height: 100%; background: linear-gradient(90deg, #14a3b8, var(--brand)); border-radius: 99px; }
.tb-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adm-drawer-actions .btn, .adm-drawer-actions a.btn { flex: 1; min-width: 130px; text-align: center; text-decoration: none; }
/* Drawer (panneau détail) */
.adm-drawer-ov { position: fixed; inset: 0; z-index: 13000; background: rgba(10,30,28,.45); display: flex; align-items: flex-end; justify-content: center; animation: admfade .15s ease; }
@keyframes admfade { from { opacity: 0; } to { opacity: 1; } }
.adm-drawer { position: relative; width: 100%; max-width: 520px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; background: var(--card); border-radius: 18px 18px 0 0; padding: 18px 18px 26px; box-shadow: 0 -8px 32px rgba(0,0,0,.25); animation: admup .2s ease; }
@keyframes admup { from { transform: translateY(20px); } to { transform: translateY(0); } }
.adm-drawer-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,.06); font-size: 16px; cursor: pointer; }
@media (min-width: 560px) { .adm-drawer-ov { align-items: center; } .adm-drawer { border-radius: 18px; } }
.mod-list { display: flex; flex-direction: column; gap: 12px; }
.mod-card { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.mod-media { position: relative; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.mod-media img { width: 100%; height: 100%; object-fit: cover; }
.mod-noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; }
.mod-badge { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; color: #fff; }
.mod-badge.vis { background: var(--brand); }
.mod-badge.flag { background: #ff9f1c; }
.mod-badge.hid { background: #8a8f8c; }
.mod-badge.exemple { background: #8b5cf6; }
/* Tag « Exemple » dans la liste admin des comptes (repère les comptes de démo) */
.acc-demo-tag { display: inline-block; margin-left: 6px; background: color-mix(in srgb, #8b5cf6 18%, transparent); color: #a78bfa; border: 1px solid color-mix(in srgb, #8b5cf6 45%, transparent); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 99px; vertical-align: middle; }
.mod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mod-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mod-top b { font-size: 15px; }
.mod-top span { font-size: 12.5px; color: var(--muted); }
.mod-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-note { font-size: 12.5px; background: var(--accent-wash); border: 1px solid var(--gold-wash); border-radius: 8px; padding: 5px 8px; }
.mod-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mod-actions .btn { padding: 5px 11px; font-size: 12.5px; }
.mod-req summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 12.5px; }
.mod-req textarea { width: 100%; margin: 6px 0; padding: 8px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 13px; box-sizing: border-box; resize: vertical; min-height: 56px; }
.mod-page { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.mod-count { font-weight: 600; }


/* ===== Réglages (Deep Water) ===== */
.reglages-page { max-width: 640px; margin: 0 auto; padding: 14px 16px calc(90px + env(safe-area-inset-bottom, 0px)) 16px; }
.reg-sec { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.reg-sec-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text-2); text-transform: uppercase; margin-bottom: 12px; }
.reg-profile { display: flex; align-items: center; gap: 12px; }
.reg-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-2); display: grid; place-items: center; font-size: 26px; }
.reg-av img { width: 100%; height: 100%; object-fit: cover; }
.reg-pf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reg-pf-info b { font-size: 17px; color: var(--text); }
.reg-pf-info span { font-size: 13px; color: var(--text-2); }
.reg-edit { flex: none; min-height: 40px; }
.reg-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reg-theme-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background .15s ease, box-shadow .18s ease; }
.reg-theme-opt .reg-th-ic { font-size: 22px; line-height: 1; }
.reg-theme-opt .reg-th-l { font-size: 14px; font-weight: 700; color: var(--text); }
.reg-theme-opt .reg-th-d { font-size: 11px; color: var(--text-3); }
.reg-theme-opt.on { border-color: var(--brand); background: var(--brand-wash); box-shadow: var(--glow-brand); }
.reg-hint { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.45; }
.reg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 2px; font-size: 14px; color: var(--text); background: none; border: 0; border-top: 1px solid var(--border); text-align: left; font-family: inherit; }
.reg-sec .reg-row:first-of-type { border-top: 0; }
.reg-row-btn { cursor: pointer; }
.reg-row-l { color: var(--text-2); }
.reg-row-v { color: var(--text); font-weight: 600; }
.reg-row-v .phi { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.reg-row-v.reg-ok { color: var(--brand-dark); }      /* stockage durable OK */
.reg-row-v.reg-warn { color: var(--accent-deep); }   /* non garanti → installer */
.reg-offline .reg-row:first-child { border-top: 0; }
.reg-row-chev { color: var(--text-3); font-size: 18px; }
.reg-block { width: 100%; justify-content: center; margin-top: 12px; }
.reg-logout { color: var(--accent); border-color: var(--accent-line); }
.reg-support:empty { display: none; }
.reg-appfoot { text-align: center; font-size: 11.5px; color: var(--text-3); margin: 6px 0 4px; }
.reg-appfoot a { color: var(--text-2); }

/* Carte : fond sombre pendant le chargement des tuiles (mode sombre) */
#map, .maplibregl-map { background: var(--bg-2); }


/* =====================================================================
   RAFFINEMENTS DEEP WATER (workflow verifie) — append-only, sombre-scoppe
   ===================================================================== */

/* ---- verre-halos ---- */
/* ============================================================
   VERRE + HALOS — surfaces vitrines, SOMBRE uniquement
   (mode clair « Émeraude » intouché : tout est préfixé
    :root:not([data-theme="light"]) )
   Réf. : design/deepwater-system.css .glass
   Appendé en fin de fichier -> gagne par cascade, pas besoin
   d'éditer les règles existantes.
   ============================================================ */

/* 1) Relief du fond : le blur n'a d'effet que sur un dégradé.
   --bg-grad est défini (l.5) mais n'était appliqué nulle part.
   Les .view (position:absolute; inset:0; overflow-y:auto)
   peignent un aplat opaque var(--bg) PAR-DESSUS le body, donc on
   pose le dégradé sur le body ET sur les vues qui hébergent les
   cartes vitrines.
   NB : PAS de background-attachment:fixed sur les .view — ce sont
   des conteneurs scrollables et `fixed` y provoque du jank de
   repaint + des bugs de rendu sur iOS Safari/WKWebView (cible
   native Capacitor). Le dégradé défile naturellement et révèle
   les stops sombres du bas = profondeur voulue. `fixed` reste sur
   body (conforme à deepwater-system.css, sans risque). */
:root:not([data-theme="light"]) body {
  background-image: var(--bg-grad);
  background-attachment: fixed;
}
:root:not([data-theme="light"]) #view-home,
:root:not([data-theme="light"]) #view-profil,
:root:not([data-theme="light"]) #view-uprofile,
:root:not([data-theme="light"]) #view-carnet,
:root:not([data-theme="light"]) #view-catch,
:root:not([data-theme="light"]) #view-species,
:root:not([data-theme="light"]) #view-trophees {
  background: var(--bg-grad);
}

/* 2) Cartes-verre des surfaces vitrines.
   Voile translucide (lisible AA sur fond profond), filet
   --glass-border, blur+saturate, reflet haut subtil en
   inset box-shadow (pas de pseudo -> aucun risque de clipping,
   on ne touche ni position ni overflow des cartes). */
:root:not([data-theme="light"]) .catch-post,
:root:not([data-theme="light"]) .catch-card,
:root:not([data-theme="light"]) .stat,
:root:not([data-theme="light"]) .cp-more,
:root:not([data-theme="light"]) .pf-stats div,
:root:not([data-theme="light"]) .pf-ds,
:root:not([data-theme="light"]) .pf-sig-it,
:root:not([data-theme="light"]) .pf-hc,
:root:not([data-theme="light"]) .pf-acc,
:root:not([data-theme="light"]) .hm-card {
  background-color: color-mix(in srgb, var(--surface) 58%, transparent);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(13px) saturate(1.1);
  backdrop-filter: blur(13px) saturate(1.1);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
}

/* Survol : le verre s'éclaircit légèrement (garde la lisibilité) */
:root:not([data-theme="light"]) .hm-card:hover,
:root:not([data-theme="light"]) .cp-more:hover {
  background-color: color-mix(in srgb, var(--surface-2) 66%, transparent);
  border-color: var(--brand-line);
}
/* Feed sombre : le lift au survol garde le reflet verre + une ombre portée plus profonde */
:root:not([data-theme="light"]) .cp-feed .catch-post:hover {
  background-color: color-mix(in srgb, var(--surface-2) 64%, transparent);
  border-color: var(--brand-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 34px -12px rgba(0,0,0,.5);
}

/* 3) Halos dosés — 2 éléments phares seulement.
   Ils conservent leur propre dégradé ; on ajoute juste la lueur. */
:root:not([data-theme="light"]) .hm-gami {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--glow-brand);
}
:root:not([data-theme="light"]) .pf-hero2 {
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glow-glacier), var(--shadow-lg);
}


/* ---- rampes ---- */
/* ============================================================
   RAMPES DE DONNEES — corrections mode SOMBRE uniquement
   (append : gagne par cascade, n'edite pas les regles existantes)
   Tout est prefixe :root:not([data-theme="light"]) pour ne PAS
   toucher le mode clair (deja bon).
   ============================================================ */

/* --- 1. Heatmap du carnet : rampe verte monotone et lisible ---
   Corrige : l0/l1 quasi invisibles + l4 (brand-dark) plus sombre que l3 (rampe cassee).
   Progression : sombre-eteint -> --brand lumineux (luminance strictement croissante). */
:root:not([data-theme="light"]) .pf-cell.l0,
:root:not([data-theme="light"]) .pf-heatleg i.l0 { background: var(--surface-2); }
:root:not([data-theme="light"]) .pf-cell.l1,
:root:not([data-theme="light"]) .pf-heatleg i.l1 { background: #26735a; } /* audit : paliers plus francs en sombre */
:root:not([data-theme="light"]) .pf-cell.l2,
:root:not([data-theme="light"]) .pf-heatleg i.l2 { background: #2f9873; }
:root:not([data-theme="light"]) .pf-cell.l3,
:root:not([data-theme="light"]) .pf-heatleg i.l3 { background: var(--brand-dark); }
:root:not([data-theme="light"]) .pf-cell.l4,
:root:not([data-theme="light"]) .pf-heatleg i.l4 {
  background: var(--brand);
  box-shadow: 0 0 6px var(--brand-wash);
}

/* --- 2. Badges de rang : corps SOMBRE metallise + bordure/accent brillants ---
   PIEGE CORRIGE : les enfants texte (.sp-rk-pct, .qz-stat-pct...) portent leur
   propre color (--text quasi-blanc), donc un `color:` sur le parent est inerte,
   et un degrade metallique PLEIN & clair derriere ce texte casse le contraste AA
   (blanc sur or/argent clair = ~1.5:1). -> corps sombre teinte-metal (texte --text
   lisible, ratio >12), l'effet "metal" passe par la BORDURE + un accent lateral. */
:root:not([data-theme="light"]) .sp-rk-badge.tier-gold,
:root:not([data-theme="light"]) .qz-stat.tier-gold {
  background:
    linear-gradient(90deg, var(--gold) 0 3px, transparent 3px),
    linear-gradient(135deg, #2a2410, #3a3115);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 var(--gold-wash), 0 0 0 1px var(--gold-line);
}
:root:not([data-theme="light"]) .sp-rk-badge.tier-silver,
:root:not([data-theme="light"]) .qz-stat.tier-silver {
  background:
    linear-gradient(90deg, #c7d2db 0 3px, transparent 3px),
    linear-gradient(135deg, #20262e, #2b333d);
  border-color: #9aa8b4;
  box-shadow: inset 0 1px 0 rgba(199,210,219,.20), 0 0 0 1px rgba(154,168,180,.45);
}
:root:not([data-theme="light"]) .sp-rk-badge.tier-bronze,
:root:not([data-theme="light"]) .qz-stat.tier-bronze {
  background:
    linear-gradient(90deg, #cd7f32 0 3px, transparent 3px),
    linear-gradient(135deg, #2a1a10, #3a2415);
  border-color: #cd7f32;
  box-shadow: inset 0 1px 0 rgba(205,127,50,.22), 0 0 0 1px rgba(205,127,50,.45);
}
/* Emoji met en valeur l'accent metal (le corps reste sombre) */
:root:not([data-theme="light"]) .qz-stat.tier-gold .qz-stat-emo,
:root:not([data-theme="light"]) .sp-rk-badge.tier-gold .sp-rk-emo { filter: drop-shadow(0 0 4px var(--gold-wash)); }

/* Texte des cartes stat lisible sur corps sombre : le #555 herite echoue en
   sombre (ratio ~1.7 sur --surface-2), y compris hors gradient -> --text-2. */
:root:not([data-theme="light"]) .qz-stat .qz-stat-sub,
:root:not([data-theme="light"]) .qz-stat .qz-stat-2nd { color: var(--text-2); }

/* barre de stat quiz "or" : rampe or pleine (lisible sur corps sombre) */
:root:not([data-theme="light"]) .qz-stat.tier-gold .qz-stat-bar span {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

/* --- 3. Barre jour/nuit : rendre les deux segments distincts ---
   Corrige : .pf-dn-night = --ink (#0b2620) ≈ piste --surface-2 (invisible).
   Piste --surface-3, jour --gold (soleil), nuit --glacier (cyan lune). */
:root:not([data-theme="light"]) .pf-dn-bar { background: var(--surface-3); }
:root:not([data-theme="light"]) .pf-dn-day { background: var(--gold); }
:root:not([data-theme="light"]) .pf-dn-night { background: var(--glacier); }

/* --- 4. Pistes de barres de data cassees sur fond sombre ---
   #eee / rgba(0,0,0,.06) / rgba(0,0,0,.08) -> --surface-2. Le fill reste inline (JS/token). */
:root:not([data-theme="light"]) .bite-bar { background: var(--surface-2); }
:root:not([data-theme="light"]) .st-bt { background: var(--surface-2); }
:root:not([data-theme="light"]) .quiz-bar-track,
:root:not([data-theme="light"]) .qz-stat-bar { background: var(--surface-2); }

/* --- 5. Barre d'evolution ev-bar : rampe or pleine (au lieu de fondre en wash) --- */
:root:not([data-theme="light"]) .ev-bar i {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

/* ---- contraste-completude ---- */
/* ===================================================================
   PATCH CONTRASTE + COMPLETUDE — mode SOMBRE uniquement
   Corrige les textes/hex sombres restes sur fonds devenus sombres,
   les blocs restes clairs, la carte Defi peu contrastee et le corps
   des pages legales (illisible en sombre).
   Scope :root:not([data-theme="light"]) => le mode clair ne bouge pas.
   =================================================================== */

/* --- Carte "Defi" de l'accueil : --ink se fond dans le bg sombre.
       On la remonte sur --surface-2 avec un liseré corail lisible. --- */
:root:not([data-theme="light"]) .hm-defi {
  background: var(--surface-2);
  border-color: var(--accent-line);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255,107,61,.10);
}
:root:not([data-theme="light"]) .hm-defi b { color: var(--gold); }

/* --- Badges milieu "eau douce" : bleu sombre #185fa5 -> glacier vif --- */
:root:not([data-theme="light"]) .sp-lmilieu.douce,
:root:not([data-theme="light"]) .sp-milieu-badge.douce { color: var(--glacier); }

/* --- Bandeau saison + synthese conditions : vert sombre #0c5a43 illisible --- */
:root:not([data-theme="light"]) .sp-season-peak { color: var(--text); }
:root:not([data-theme="light"]) .sp-season-peak b { color: var(--brand-strong); }
:root:not([data-theme="light"]) .sp-cond-synth b { color: var(--brand-strong); }

/* --- Pastille "deja peche" : vert tres sombre #0a4a36 -> brand --- */
:root:not([data-theme="light"]) .sp-lcaught { color: var(--brand-strong); }

/* --- Pastilles conditions ideales : hex sombres -> teintes vives semantiques.
       Violet/indigo (pression/lune) : aucun token dedie -> lavandes claires AA
       sur --surface-3 sombre. --- */
:root:not([data-theme="light"]) .sp-ci-meteo    { background: var(--glacier-wash); color: var(--glacier); }
:root:not([data-theme="light"]) .sp-ci-pression { background: var(--surface-3);    color: #b9a6ff; }
:root:not([data-theme="light"]) .sp-ci-maree    { background: var(--glacier-wash); color: var(--glacier); }
:root:not([data-theme="light"]) .sp-ci-lune     { background: var(--surface-3);    color: #9aa0d8; }

/* --- Frise des mois : code couleur vert/jaune/orange conservé en sombre (fonds vifs, texte foncé lisible) --- */
:root:not([data-theme="light"]) .sp-mo-off { background: #e08a3c; color: #2a1605; }
:root:not([data-theme="light"]) .sp-mo-ok  { background: var(--gold); color: #2a2100; }
:root:not([data-theme="light"]) .sp-mo-top { background: var(--brand-strong); color: #06231c; }

/* --- Libelle condition (uppercase) : #9a9994 trop terne sur sombre --- */
:root:not([data-theme="light"]) .sp-cond-lab { color: var(--text-2); }

/* --- Select filtre especes : texte #3a3a36 quasi noir sur --card sombre --- */
:root:not([data-theme="light"]) .sp-sel { color: var(--text); }

/* --- Liens dans les listes/rangees : bleu sombre #185fa5 -> glacier --- */
:root:not([data-theme="light"]) .f-loc a,
:root:not([data-theme="light"]) .row a { color: var(--glacier); }

/* --- Reponse support + badge geo-verifie + bouton "plus de morsures" :
       verts sombres #0c5a43 / #0c6b4f illisibles --- */
:root:not([data-theme="light"]) .sup-t-reply { color: var(--text); }
:root:not([data-theme="light"]) .geo-verif   { color: var(--brand-strong); }
:root:not([data-theme="light"]) .bite-more   { color: var(--brand-strong); }

/* --- Encart "atteste" + badges fiabilite/credibilite --- */
:root:not([data-theme="light"]) .f-attested   { color: var(--text); }
:root:not([data-theme="light"]) .f-attested b  { color: var(--brand-strong); }
:root:not([data-theme="light"]) .conf-badge.hi { color: var(--brand-strong); }
:root:not([data-theme="light"]) .conf-badge.lo { color: var(--text-2); }

/* --- Libelle des barres de confiance (back-office) : #444 sur sombre --- */
:root:not([data-theme="light"]) .tb-l { color: var(--text-2); }

/* --- Hover/actif de la pilule favori : #8a5a00 (or sombre) illisible --- */
:root:not([data-theme="light"]) .sp-fav-pill:hover,
:root:not([data-theme="light"]) .sp-fav-pill.on { color: var(--gold); }

/* --- Bloc Visiteurs (admin) : le gradient finissait en #fff = bloc blanc --- */
:root:not([data-theme="light"]) .st-vis {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
}

/* --- Track du "bite-bar" : #eee = barre claire brillante en sombre --- */
:root:not([data-theme="light"]) .bite-bar { background: var(--surface-3); }

/* --- Liseré carte "collection complete" : vert clair faible sur sombre --- */
:root:not([data-theme="light"]) .sp-lcard.caught { border-color: var(--brand-line); }

/* --- Pages legales (cgu / confidentialite / mentions-legales) : fichiers
       autonomes SANS data-theme => :root:not([data-theme="light"]) matche
       et le corps (.legal p/li #2c3a36, .legal-upd #7a8a85, h1/h2 heritant
       de --ink sombre) reste texte-sombre-sur-fond-sombre. On repasse le
       fond sur --bg-2 ET tout le corps sur les rampes claires. Ces classes
       n'existent QUE dans les fichiers legaux, jamais dans l'app => aucun
       risque cote in-app. --- */
:root:not([data-theme="light"]) .legal-body { background: var(--bg-2); color: var(--text); }
:root:not([data-theme="light"]) .legal h1,
:root:not([data-theme="light"]) .legal h2 { color: var(--text); }
:root:not([data-theme="light"]) .legal p,
:root:not([data-theme="light"]) .legal li { color: var(--text); }
:root:not([data-theme="light"]) .legal-upd { color: var(--text-2); }
:root:not([data-theme="light"]) .legal a { color: var(--brand-strong); }
:root:not([data-theme="light"]) .legal-back { color: var(--brand-strong); }
:root:not([data-theme="light"]) .legal-lead { background: var(--surface-2); border-color: var(--brand-line); color: var(--text); }
:root:not([data-theme="light"]) .legal-foot { color: var(--text-2); border-top-color: var(--border); }

/* La carte n'est PLUS teintée par le thème de l'app (l'inversion CSS du canvas créait
   deux variantes jour/nuit supplémentaires en thème sombre — retirée, demande user 14/07/2026).
   Ses 2 seuls modes = jour/nuit via applyMapTheme (préférence sp_mapnight, indépendante). */


/* ===== Communauté : feed social dédié ===== */
.communaute-page { max-width: 680px; margin: 0 auto; padding: 10px 14px calc(90px + env(safe-area-inset-bottom, 0px)) 14px; }
/* Feed = colonne unique (fini la grille multi-colonnes façon Pinterest) */
#comm-feed { display: flex; flex-direction: column; gap: 14px; }
#comm-feed .cp-media { aspect-ratio: 1 / 1; } /* photo carrée façon Instagram (fini le 4:3 « bizarre ») */
.comm-main { min-width: 0; }
.comm-rail { display: none; }
/* Desktop : colonne de posts centrée + rail droit collant (classement + CTA) */
@media (min-width: 900px) {
  .communaute-page { max-width: 900px; padding-bottom: 34px; } /* + retire la bande basse inutile (pas de nav mobile sur PC) */
  .comm-layout { display: grid; grid-template-columns: minmax(0, 540px) 300px; gap: 30px; justify-content: center; align-items: start; margin: 0 auto; }
  .comm-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; margin-top: 96px; } /* aligné sur le 1er post (sous le titre + filtres) */
}
.crail-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 13px; }
.crail-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.crail-h .phi { width: 16px; height: 16px; color: #f4c430; }
.crail-all { margin-left: auto; background: none; border: 0; color: var(--brand); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.crail-cta-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 800; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.crail-cta-h .phi { width: 17px; height: 17px; color: var(--glacier, var(--brand)); }
.crail-cta p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.crail-cta .btn { width: 100%; }
/* Mobile : posts pleine largeur, bord-à-bord, photo carrée (façon Instagram), séparation minimale */
@media (max-width: 620px) {
  .communaute-page { padding-left: 0; padding-right: 0; }
  .comm-head, .feed-filters, .feed-radius, .comm-end { padding-left: 14px; padding-right: 14px; }
  #comm-feed { gap: 0; }
  #comm-feed .catch-post, #comm-feed .cp-skel { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  #comm-feed .catch-post { border-top: 0; border-bottom: 1px solid var(--border); } /* fin séparateur (au lieu de la grosse bande) */
}
.comm-head { padding: 8px 2px 10px; }
.comm-quick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.comm-quick::-webkit-scrollbar { display: none; }
.comm-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .09s ease, border-color .14s ease; }
.comm-chip:hover { border-color: var(--border-strong); }
.comm-chip:active { transform: scale(.96); }
.comm-ptr { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: height .12s ease; }
.comm-ptr-spin { font-size: 20px; display: inline-block; }
.comm-ptr.ready .comm-ptr-spin { color: var(--brand); }
.comm-ptr.spin .comm-ptr-spin { animation: comm-spin .7s linear infinite; }
@keyframes comm-spin { to { transform: rotate(360deg); } }
.comm-sentinel { height: 1px; }
.comm-end { text-align: center; color: var(--text-3); font-size: 13px; padding: 18px 0 6px; }

/* FAB speed-dial de la nav centrale */
#fab-menu { position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%) translateY(8px); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 41; }
#fab-menu.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* Vues scrollables : la liste #view-* d origine avait oublie ces nouvelles vues */
#view-communaute, #view-reglages, #view-accueil { overflow-y: auto; }

/* Notif : nom cliquable (profil) ; le reste de la ligne mène à la prise */
.nf-row { cursor: pointer; }
.nf-who { cursor: pointer; }
.nf-who:hover { text-decoration: underline; }

/* Notifications : distinction lu/non-lu renforcée + avatar cliquable */
.nf-row { position: relative; }
.nf-row.unread { background: var(--surface-2); border-left: 3px solid var(--brand); }
.nf-row.unread::after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand-line); }
.nf-av { cursor: pointer; }


/* ===== Menu tiroir (☰) ===== */
.appdrawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 82vw); z-index: 20000; background: var(--bg-2); border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 20px; transform: translateX(-105%); transition: transform .22s ease; overflow-y: auto; }
.appdrawer.open { transform: translateX(0); }
#drawer-backdrop { position: fixed; inset: 0; z-index: 19999; background: rgba(0,0,0,.5); }
.drawer-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer-title { font-family: var(--font-title); font-weight: 900; font-size: 20px; color: var(--text); }
.drawer-close { background: none; border: 0; color: var(--text-2); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.drawer-sec { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 14px 4px 6px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-radius: 12px; padding: 12px; font-family: inherit; font-size: 15px; color: var(--text); cursor: pointer; }
.drawer-item > span { font-size: 19px; width: 24px; text-align: center; flex: none; }
.drawer-item:hover, .drawer-item:active { background: var(--surface-2); }

/* Menu [+] : déroule depuis le topbar (haut-gauche) */
#fab-menu { position: fixed; top: calc(50px + env(safe-area-inset-top, 0px)); bottom: auto; left: 12px; transform: translateY(-8px); align-items: flex-start; }
#fab-menu.open { transform: translateY(0); }

/* Topbar : [+] seul à droite, son menu déroule depuis la droite */
.topbar-add { width: 40px; min-width: 40px; padding: 0; gap: 0; }
#fab-menu { left: auto; right: 12px; align-items: flex-end; }

/* Interrupteur jour/nuit dans le tiroir ☰ */
.drawer-toggle .drawer-switch { margin-left: auto; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); position: relative; transition: background .18s ease; flex: none; }
.drawer-toggle .drawer-switch > i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .18s ease, background .18s ease; }
.drawer-toggle.on .drawer-switch { background: var(--brand); border-color: var(--brand); }
.drawer-toggle.on .drawer-switch > i { transform: translateX(18px); background: #fff; }

/* Carrousel multi-photos : flèches (PC) — swipe natif sur mobile */
.cp-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 27px; height: 27px; border-radius: 50%; border: 0; background: rgba(8,30,26,.5); color: #fff; font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer; z-index: 3; opacity: .75; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s ease, opacity .15s ease; }
.cp-arrow:hover { opacity: 1; }
.cp-prev { left: 8px; } .cp-next { right: 8px; }
.cp-arrow:hover { background: rgba(8,30,26,.85); }
@media (hover: none) and (pointer: coarse) { .cp-arrow { display: none; } }

/* ===== Carnet — dashboard de stats (façon Strava) ===== */
/* Titres de section — UNE seule échelle (18px) + rythme 34/12 : l'espace au-dessus est ~3x
   celui du dessous, donc le titre APPARTIENT visuellement au bloc qui suit (audit 19/07). */
.cn-sec { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); margin: 34px 2px 12px; }
.cn-pane > .cn-sec:first-child { margin-top: 6px; } /* le 1er titre ne décolle pas de la barre d'onglets */
/* accès rapide carnet (mes spots / mes prises) + hint de section */
.cn-quicknav { display: flex; gap: 8px; margin: 12px 2px 2px; }
.cn-qn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; font-size: 13px; font-weight: 700;
  color: var(--text); background: var(--card); border: 1px solid var(--glass-border); border-radius: 13px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-hi); transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1), border-color .25s; -webkit-tap-highlight-color: transparent; }
.cn-qn:hover { border-color: var(--glass-hi); }
.cn-qn:active { transform: scale(0.97); }
.cn-qn .phi { width: 15px; height: 15px; color: var(--brand); }
.cn-sec-hint { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0; line-height: 1.4; }
/* micro-explications de clarté (audit utilisateur) */
.cn-card-hint { font-size: 11.5px; color: var(--text-3); margin: -4px 0 10px; line-height: 1.5; }
.cn-records-leg, .cn-scatter-leg { font-size: 11px; color: var(--text-2); line-height: 1.55; margin-top: 9px; padding: 0 2px; } /* audit : légendes trop pâles (scopé, on ne touche pas --text-3) */
.cn-scatter-leg b { color: var(--text-2); font-weight: 700; }
/* état vide accueillant (0 prise) */
.cn-empty0 { text-align: center; padding: 34px 18px 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cn-empty0-ic { width: 46px; height: 46px; color: var(--brand); opacity: .9; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--brand) 40%, transparent)); }
.cn-empty0-t { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-top: 8px; }
.cn-empty0-s { font-size: 13px; line-height: 1.6; color: var(--text-2); max-width: 30rem; margin: 2px auto 0; }
.cn-empty0-cta { margin-top: 16px; }
.cn-empty0-cta .phi { width: 16px; height: 16px; vertical-align: -0.2em; margin-right: 4px; }
.cn-sec-c { font-size: 13px; font-weight: 700; color: var(--text-2); }
/* Période fusionnée dans la barre d'onglets (choix Arthur 19/07) */
.cn-tabs-in { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cn-tabs-in::-webkit-scrollbar { display: none; }
/* Filtre de période : doit se LIRE comme un filtre actif, pas comme un bouton éteint (demande 19/07) */
.cn-per-trig { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand-text, var(--brand)); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .18s ease, transform .12s ease; }
.cn-per-trig:hover { background: color-mix(in srgb, var(--brand) 20%, var(--card)); }
.cn-per-trig:active { transform: scale(.97); }
.cn-per-trig .phi { width: 13px; height: 13px; flex: none; opacity: .85; }
/* Podium des plus belles prises (remplace le nuage taille×poids) */
.cn-podium { display: flex; flex-direction: column; gap: 8px; }
.cn-pod-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 9px 12px 9px 10px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .15s ease, transform .1s ease; }
.cn-pod-row:hover { border-color: var(--brand-line); }
.cn-pod-row:active { transform: scale(.99); }
.cn-pod-rank { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; background: var(--surface-3); color: var(--text-2); }
.cn-pod-rank.r1 { color: #1d1500; background: linear-gradient(160deg, #ffd75e, #d99a18); }
.cn-pod-rank.r2 { color: #101c18; background: linear-gradient(160deg, #e3eae7, #9fb0a9); }
.cn-pod-rank.r3 { color: #2a1608; background: linear-gradient(160deg, #e0aa72, #b57840); }
.cn-pod-th { position: relative; flex: none; width: 46px; height: 46px; border-radius: 11px; overflow: hidden; background: var(--surface-2); }
.cn-pod-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-pod-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-pod-b b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-pod-b span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-pod-meas { flex: none; font-size: 13px; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; text-align: right; }
:root:not([data-theme="light"]) .cn-pod-meas { color: var(--brand-strong); }
/* Onglet Trophées — niveau + créature (« quel poisson tu es ») */
.cn-evo-card { background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 14px 15px; }
.cn-evo-lvl { display: flex; align-items: center; gap: 11px; }
.cn-evo-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 900; }
.cn-evo-lvl-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-evo-lvl-b b { font-size: 14.5px; font-weight: 800; }
.cn-evo-lvl-b span { font-size: 11.5px; color: var(--text-2); }
.cn-evo-track { margin-top: 11px; height: 8px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.cn-evo-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--brand), var(--glacier)); }
.cn-evo-track-crea i { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.cn-evo-crea { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 14px; padding: 10px 11px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--surface-2); cursor: pointer; font-family: inherit; color: var(--text); }
.cn-evo-crea:hover { border-color: var(--brand-line); }
.cn-evo-img { flex: none; width: 74px; height: 42px; display: grid; place-items: center; }
.cn-evo-img svg, .cn-evo-img img { width: 100%; height: 100%; object-fit: contain; }
.cn-evo-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-evo-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); }
.cn-evo-b b { font-size: 16px; font-weight: 800; }
.cn-evo-d { font-size: 11.5px; color: var(--text-2); }
.cn-evo-arr { flex: none; color: var(--text-3); }
.cn-evo-arr .phi { width: 16px; height: 16px; }
.cn-evo-next { margin-top: 8px; font-size: 12px; color: var(--text-2); text-align: center; }
.cn-card { background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 14px 15px; } /* audit : rayon unique 16px sur les cartes du carnet */
.cn-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cn-card-h > span:first-child { font-size: 14px; font-weight: 800; color: var(--text); flex-shrink: 0; white-space: nowrap; } /* #2 : titres de carte un poil plus gros */
.cn-card-sub { font-size: 11px; color: var(--text-2); white-space: nowrap; min-width: 0; text-align: right; }
/* Carte de France du carnet : silhouette + bulles des prises */
.cfm-card .cn-card-h { margin-bottom: 4px; }
.cfm-map { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 0; }
.cfm-land { fill: var(--surface-2); stroke: var(--glass-border); stroke-width: 2.4; stroke-linejoin: round; }
.cfm-dot { fill: var(--accent); fill-opacity: .78; stroke: var(--card); stroke-width: 2.5; transition: fill-opacity .2s; }
.cfm-dot:hover { fill-opacity: .95; }
/* Carte de pêche interactive (MapLibre) du carnet */
.cn-map-holder { position: relative; width: 100%; height: 340px; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--glass-border); }
.cn-map-canvas { position: absolute; inset: 0; }
:root:not([data-theme="light"]) .cn-map-canvas .maplibregl-canvas { filter: brightness(.72) saturate(.85); } /* audit : rectangle clair éblouissant en Deep Water (vrai style nuit = chantier carto différé) */
.cn-map-holder.cn-map-svg { display: flex; align-items: center; justify-content: center; height: auto; padding: 6px; }
.cn-map-svg .cfm-map { max-width: 320px; }
/* épingle = photo de la prise (repli illustration d'espèce) */
.cn-mk { width: 46px; height: 46px; padding: 0; border: none; background: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 3px 6px rgba(1,14,11,.4)); transition: transform .15s cubic-bezier(0.32,0.72,0,1); }
.cn-mk img { width: 46px; height: 46px; border-radius: 50%; object-fit: contain; padding: 5px; background: #fff; border: 2.5px solid #fff; display: block; } /* audit : cover recadrait les PNG d'espèces en ronds d'écailles non identifiables */
.cn-mk::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #fff; }
.cn-mk-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-brand); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; }
.cn-mk:active { transform: scale(.92); }
/* popup « poissons pris à ce spot » */
/* ===== Profondeurs (bathymétrie) ===== */
.bathy-attrib { position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4; font-size: 10px; line-height: 1.3; color: #fff; background: rgba(4, 24, 20, .58); padding: 3px 9px; border-radius: 9px; pointer-events: none; max-width: 70%; }
/* Échelle verticale du vent (même gabarit que la légende profondeur) ; si les deux sont
   visibles, le vent se range À CÔTÉ (à gauche) de la profondeur — jamais dessous. */
/* Conteneur commun des jauges (profondeur + vent) : empilées l'une SOUS l'autre quand les
   deux sont actives, alignées à droite, au-dessus du bouton France (jamais de chevauchement). */
#map-legends { position: absolute; right: 10px; bottom: 76px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
@media (max-width: 640px) { #map-legends { bottom: 162px; right: 12px; } } /* mobile : juste au-dessus du bouton France (bottom 108 + 42 + marge) */
#bathy-legend { order: 1; }
#wind-legend { order: 2; }
/* Les DEUX jauges actives ensemble → barres raccourcies pour que la pile tienne sous les contrôles */
#map-legends:has(#bathy-legend:not([hidden])):has(#wind-legend:not([hidden])) :is(.lgr-bar, .lgr-lbls) { height: 78px; }
.bathy-legend { transition: opacity .2s ease; }
.bathy-legend.sheet-covered { opacity: 0; } /* liste dépliée par-dessus la carte → légendes masquées */
/* jauge verticale (profondeur / vent) : carte compacte, LARGEUR COMMUNE aux deux jauges */
.bathy-legend { width: 54px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
  background: rgba(6, 22, 17, .66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 6px 7px; pointer-events: none;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .55); }
/* rampe dégradée continue (Vent / Profondeur / Lacs) — compacte : ne doit rien recouvrir */
.lgr-t { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .92); margin-bottom: 5px; text-align: center; }
.lgr-t .phi { width: 13px; height: 13px; display: block; color: rgba(255, 255, 255, .92); } /* titre-icône (jauge fine, sans le mot) */
.lgr-t-prof { display: inline-block; font-size: 5px; letter-spacing: -0.01em; } /* « PROFONDEUR » en tout petit : réduit pour tenir AVEC marge dans la jauge (40px utiles) → vraiment centré */
.lgr-body { display: flex; gap: 6px; }
.lgr-bar { display: block; width: 7px; height: 92px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); flex: none; }
.lgr-lbls { display: flex; flex-direction: column; justify-content: space-between; height: 92px; font-size: 8px; font-weight: 700; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.01em; }
.lgr-u { margin-top: 4px; font-size: 8px; font-weight: 700; letter-spacing: .03em; color: rgba(255, 255, 255, .55); text-align: center; }
.bty-leg-sec[hidden] { display: none; }
/* popup profondeur */
.bty-pop .maplibregl-popup-content { border-radius: 12px; padding: 9px 12px; background: var(--card); color: var(--text); box-shadow: 0 12px 28px -10px rgba(1,14,11,.55); border: 1px solid var(--glass-border); }
.bty-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--card); }
.bty-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--card); }
.bty-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--card); }
.bty-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--card); }
.bty-pop-d { font-size: 13px; font-weight: 600; }
.bty-pop-d b { color: var(--brand); font-weight: 800; }
.bty-pop-lk { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.bty-intro { font-size: 13.5px; line-height: 1.6; }
.bty-legal { margin-top: 9px; font-size: 11px; color: var(--text-3); line-height: 1.55; }
.bty-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.bty-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--glass-border); border-radius: 13px; padding: 10px 12px; color: var(--text); transition: transform .15s cubic-bezier(0.32,0.72,0,1), border-color .2s; -webkit-tap-highlight-color: transparent; }
.bty-row:hover { border-color: var(--glass-hi); }
.bty-row:active { transform: scale(.985); }
.bty-b { flex: 1; min-width: 0; }
.bty-b b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bty-b span { font-size: 11.5px; color: var(--text-3); }
.bty-go { flex: none; font-size: 12px; font-weight: 800; color: var(--brand); }
.bty-spot { font-size: 13px; line-height: 1.55; margin: 4px 0 8px; }
.bty-view { width: auto; }
.cn-pop .maplibregl-popup-content { border-radius: 14px; padding: 10px 11px; background: var(--card); color: var(--text); box-shadow: 0 14px 32px -12px rgba(1,14,11,.55); border: 1px solid var(--glass-border); }
.cn-pop .maplibregl-popup-close-button { color: var(--text-2); font-size: 18px; padding: 0 6px; }
.cn-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.cn-pop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.cn-pop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--card); }
.cn-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.cn-pop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.cn-pop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--card); }
.cn-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--card); }
.cn-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--card); }
.cnp-h { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.cnp-list { display: flex; flex-direction: column; gap: 7px; max-height: 220px; overflow-y: auto; }
.cnp-row { display: flex; align-items: center; gap: 9px; }
.cnp-th { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--surface-2); }
.cnp-b { min-width: 0; }
.cnp-b b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnp-b span { font-size: 11px; color: var(--text-3); }
.cn-lock-msg { font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-align: center; padding: 8px 4px; }
.cn-lock-msg b { color: var(--brand); }
.mut { color: var(--text-2); }
/* Hero niveau */
.cn-hero { background: linear-gradient(135deg, var(--card), var(--surface-2)); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 15px; }
.cn-hero-top { display: flex; align-items: center; gap: 12px; }
.cn-hero-badge { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--brand); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.cn-hero-lvl { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); background: var(--brand); color: var(--bg-2); font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.cn-hero[data-tier="gold"] .cn-hero-badge { border-color: var(--gold); } .cn-hero[data-tier="gold"] .cn-hero-lvl { background: var(--gold); color: #6b4e00; }
.cn-hero[data-tier="blue"] .cn-hero-badge { border-color: var(--glacier); } .cn-hero[data-tier="blue"] .cn-hero-lvl { background: var(--glacier); color: var(--bg-2); }
.cn-hero-info { flex: 1; min-width: 0; }
.cn-hero-rang { font-size: 15px; font-weight: 800; color: var(--text); }
.cn-hero-xp { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.cn-hero-track { margin-top: 13px; height: 9px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
[data-theme="light"] .cn-hero-track { background: rgba(14,42,36,.08); } /* audit : piste invisible en clair */
.cn-hero-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--glacier)); transition: width .6s ease; }
.cn-hero-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-top: 6px; color: var(--text-2); }
.cn-hero-rem { color: var(--accent); font-weight: 700; }
[data-theme="light"] .cn-hero-rem { color: #087F5B; } /* audit : orange criard + échec AA en clair — l'orange reste pour le streak */
/* Filtre de période */
.cn-period { display: flex; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 4px; gap: 3px; }
.cn-per-btn { flex: 1; background: none; border: none; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 8px 4px; border-radius: 9px; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; }
/* audit : segmented NEUTRE — le vert plein est réservé aux onglets .cn-tab.on (deux rangées vertes identiques avant) */
.cn-per-btn.on { background: var(--surface-3); color: var(--text); font-weight: 800; }
[data-theme="light"] .cn-per-btn.on { background: #fff; box-shadow: 0 1px 3px rgba(1,14,11,.12); border: 1px solid rgba(14,42,36,.10); }
/* P1-C — onglets du carnet : Résumé / Analyses / Trophées */
.cn-tabs { display: flex; gap: 6px; margin: 12px 0 4px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0; box-shadow: 0 8px 16px -12px rgba(1,14,11,.25); } /* audit : le contenu passait à ras du bandeau sticky sans transition */
.cn-tab { flex: 1; background: var(--card); border: 1px solid var(--glass-border); color: var(--text-2); font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 4px; border-radius: 12px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.cn-tab:hover { color: var(--text); }
.cn-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 800; box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.cn-pane { display: flex; flex-direction: column; }
/* deux blocs qui se suivent SANS titre entre eux ne doivent plus se coller (jamais cumulé
   avec les marges de .cn-sec : un bloc précédé d'un titre n'est pas ciblé). */
.cn-pane > *:not(.cn-sec) + *:not(.cn-sec) { margin-top: 14px; }
.cn-pane[hidden] { display: none; }
.cn-pane-empty { margin-top: 16px; }
/* prise du mois (mise en avant photo) */
.cn-pom { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--glass-border); border-radius: 16px; padding: 10px; cursor: pointer; font-family: inherit; transition: border-color .15s ease, transform .1s ease; }
.cn-pom:hover { border-color: var(--brand); }
.cn-pom:active { transform: scale(.99); }
.cn-pom-img { flex: none; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.cn-pom-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-pom-esp { font-size: 16px; letter-spacing: -.01em; }
.cn-pom-meas { font-size: 13.5px; font-weight: 700; color: var(--brand-dark); }
.cn-pom-meta { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-pom-arr { flex: none; color: var(--text-3); font-size: 22px; padding-right: 4px; }
/* 4 chiffres-clés */
.cn-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cn-kpi { background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 13px 14px; }
.cn-kpi-v { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.cn-kpi-v.gold { color: var(--gold); }
[data-theme="light"] .cn-kpi-v.gold { color: #B45309; } /* audit : le jaune --gold sur blanc = 1,4:1 illisible */
.cn-kpi-l { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.cn-kpi-sub { font-size: 10px; font-weight: 700; margin-top: 4px; }
.cn-kpi-sub.up { color: var(--brand-text); } .cn-kpi-sub.down { color: var(--accent); } .cn-kpi-sub.mut { color: var(--text-2); font-weight: 500; } /* audit : vert texte AA en clair */
/* Graphes maison */
.pf-area.cn-xp, .pf-area.cn-step, .pf-area.cn-scatter { width: 100%; height: auto; display: block; }
.cn-step-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-2); margin-top: 3px; }
/* .cn-scatter-leg : phrase pleine largeur (règle unique plus haut, display block par défaut) */
.cn-accent { color: var(--accent); } .cn-gold { color: var(--gold); }
.cn-esp-sel { background: var(--surface-2); color: var(--text); border: 1px solid var(--glass-border); font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 8px; font-family: inherit; max-width: 45%; }
/* Prises par mois N vs N-1 */
.cn-legend { font-size: 10px; color: var(--text-2); display: inline-flex; align-items: center; }
.cn-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.cn-legend .sw.cur { background: var(--brand); } .cn-legend .sw.prev { background: var(--surface-3); }
.cn-yoy { display: flex; align-items: flex-end; gap: 5px; height: 84px; }
.cn-yoy-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cn-yoy-pair { width: 100%; display: flex; gap: 1px; align-items: flex-end; height: 66px; }
.cn-yoy-pair i { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.cn-yoy-prev { background: var(--surface-3); }
.cn-yoy-cur { background: var(--brand); }
.cn-yoy-cur.best { background: var(--gold); }
.cn-yoy-l { font-size: 9px; color: var(--text-2); }
/* Insights */
.cn-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; } /* #5 : grille scannable au lieu d'une longue liste */
.cn-insight { background: var(--card); border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; padding: 11px 13px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.cn-insight[data-c="accent"] { border-left-color: var(--accent); }
.cn-insight[data-c="glacier"] { border-left-color: var(--glacier); }
.cn-insight b { font-weight: 800; }
.cn-ins-mut { color: var(--text-2); font-weight: 400; }
/* Icônes Phosphor du Carnet (refonte v237) : accentuées dans les titres, colorées par type dans les insights */
.cn-sec .phi { width: 20px; height: 20px; color: var(--brand); flex: none; }
.cn-card-h > span:first-child .phi { width: 16px; height: 16px; color: var(--brand); vertical-align: -0.18em; }
.pf-sub .phi { width: 20px; height: 20px; color: var(--brand); flex: none; vertical-align: 0; }
.cn-adv-t .phi { width: 16px; height: 16px; color: var(--accent); vertical-align: -0.18em; }
.cn-insight { display: flex; align-items: center; gap: 9px; }
.cn-ins-ic { width: 18px; height: 18px; color: var(--brand); flex: none; }
.cn-insight[data-c="accent"] .cn-ins-ic { color: var(--accent); }
.cn-insight[data-c="glacier"] .cn-ins-ic { color: var(--glacier); }
.cn-flame { width: 13px; height: 13px; color: var(--accent); vertical-align: -0.12em; }
.catch-thumb-badge .phi { width: 12px; height: 12px; color: #fff; vertical-align: -0.1em; }
.cn-reassign .phi { width: 14px; height: 14px; vertical-align: -0.2em; }
.geo-verif .phi { width: 12px; height: 12px; vertical-align: -0.12em; }
/* Analyses avancées (perfSectionHTML, partagé Carnet + Profil) */
.pf-sec .phi { width: 20px; height: 20px; color: var(--accent); flex: none; vertical-align: 0; }
/* ============ Lot A — passe premium (skills high-end + redesign) ============
   Surfaces : ombre ambiante TEINTÉE Deep Water + liseré lumineux interne (1px haut)
   → les cartes semblent usinées, posées sur le fond, éclairées par le haut. */
.cn-card, .cn-kpi, .cn-records, .cn-hunt, .cn-seas, .cn-insight, #view-carnet .pf-perf-card {
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 28px -20px rgba(1, 14, 11, .55);
}
/* chiffres = tabulaires partout (colonnes stables, lecture données) */
.cn-kpi-v, .cn-sec-c, .cn-hunt-top .mut, .cn-seas-n, .cn-insight b, .cn-rec-r b, .pf-perf-h b { font-variant-numeric: tabular-nums; }
.cn-kpi-v { letter-spacing: -0.02em; }

/* --- Insights : capsule d'icône imbriquée (teintée par type) + texte --- */
.cn-insight { border-left: none; border-radius: 14px; padding: 10px 12px; gap: 11px; position: relative; overflow: hidden; }
.cn-insight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px; background: var(--brand); opacity: .9; }
.cn-insight[data-c="accent"]::before { background: var(--accent); }
.cn-insight[data-c="glacier"]::before { background: var(--glacier); }
.cn-ins-cap { flex: none; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 13%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.cn-insight[data-c="accent"] .cn-ins-cap { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cn-insight[data-c="glacier"] .cn-ins-cap { background: color-mix(in srgb, var(--glacier) 14%, transparent); }
.cn-ins-ic { width: 16px; height: 16px; color: var(--brand); flex: none; }
.cn-ins-tx { flex: 1; min-width: 0; }
/* cascade d'entrée à ressort (transform+opacity only, GPU-safe) */
@keyframes cnIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.cn-in { animation: cnIn .55s cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) { .cn-in { animation: none; } }

/* --- Rose des vents --- */
.pf-rose { width: 100%; max-width: 196px; margin: 4px auto 0; display: block; }
.pf-rose-leg { text-align: center; font-size: 11px; color: var(--text-2); margin-top: 5px; letter-spacing: .1px; }

/* --- Bandes ciel / température : la gagnante respire (dégradé + libellés éclairés) --- */
.pf-band-grp { margin-top: 8px; }
/* Coach perso : « Ce qui marche pour toi » */
.cn-cond-dim { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); }
.cn-slot-meta { font-size: 10.5px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.cn-perf-note { display: flex; align-items: center; gap: 6px; text-align: left; margin: 0 0 10px; }
.cn-perf-note .phi { width: 13px; height: 13px; flex: none; }
/* .fc-row-static : voir après les règles de base .fc-row (sélecteurs composés, sinon écrasés) */
.so-teaser { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-2); margin: 10px auto 2px; max-width: 420px; line-height: 1.45; }
.so-teaser .phi { width: 15px; height: 15px; flex: none; color: var(--brand); }
.so-teaser b { color: var(--text); }
.pf-band-grp .cn-hunt-row { margin-bottom: 7px; }
.pf-band-grp .cn-hunt-track { height: 9px; }
.pf-band-grp .cn-hunt-row.win .cn-hunt-track i { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--glacier))); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--brand) 55%, transparent); }
.pf-band-grp .cn-hunt-row.win .cn-hunt-top span:first-child { color: var(--text); font-weight: 800; }
.pf-band-grp .cn-hunt-row.win .cn-hunt-top .mut { color: var(--brand); font-weight: 800; }
.pf-band-t { font-size: 12px; font-weight: 700; color: var(--text-2); margin: 12px 0 7px; }
.pf-band-t .phi { width: 13px; height: 13px; color: var(--brand); vertical-align: -0.15em; }
.pf-rain-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-top: 9px; }
.pf-rain-line .phi { width: 14px; height: 14px; color: var(--glacier, #7fc7e8); }

/* --- Marée : eau qui monte (glacier) / qui descend (neutre) --- */
.pf-tide-bar { height: 16px; border-radius: 9px; }
.pf-tide-up { background: linear-gradient(90deg, color-mix(in srgb, var(--glacier) 80%, var(--brand)), var(--glacier)); }
.pf-tide-down { background: var(--surface-3); }

/* --- Saisons : pastille saisonnière + espèce cliquable + compteur tabulaire --- */
.cn-seas { background: var(--card); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; }
.cn-seas-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--glass-border); transition: background .25s cubic-bezier(0.32, 0.72, 0, 1); }
.cn-seas-row:hover { background: rgba(255, 255, 255, .025); }
.cn-seas-row:last-child { border-bottom: none; }
.cn-seas-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px -1px currentColor; }
.cn-seas-row[data-s="printemps"] .cn-seas-dot { background: #7ed6a0; color: #7ed6a0; }
.cn-seas-row[data-s="été"] .cn-seas-dot { background: var(--gold, #f2b736); color: var(--gold, #f2b736); }
.cn-seas-row[data-s="automne"] .cn-seas-dot { background: var(--accent); color: var(--accent); }
.cn-seas-row[data-s="hiver"] .cn-seas-dot { background: var(--glacier, #7fc7e8); color: var(--glacier, #7fc7e8); }
.cn-seas-l { flex: 0 0 76px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cn-seas-e { flex: 1; font-size: 13.5px; font-weight: 800; color: var(--text); min-width: 0; }
.cn-seas-e .tag-sp { font-size: 12.5px; }
.cn-seas-n { font-size: 13px; font-weight: 800; color: var(--text); }
.cn-seas-n em { font-style: normal; font-weight: 500; color: var(--text-3); font-size: 11px; }

/* --- Tes spots : classement premium cliquable --- */
.cn-spots { display: flex; flex-direction: column; gap: 8px; }
.cn-spot-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; cursor: pointer;
  background: var(--card); border: 1px solid var(--glass-border); border-radius: 15px; color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 28px -20px rgba(1, 14, 11, .55);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), border-color .3s; -webkit-tap-highlight-color: transparent; }
.cn-spot-row:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .12); }
.cn-spot-row:active { transform: scale(0.985); }
/* #7 : vignette photo (vue aérienne) du spot, avec le rang en pastille dans le coin */
.cn-spot-thumb { flex: none; position: relative; width: 52px; height: 52px; border-radius: 13px; overflow: hidden; background: var(--surface-2); }
.cn-spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-spot-thumb-ph { background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); }
.cn-spot-rank { position: absolute; left: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--text-2); background: var(--surface-3); box-shadow: 0 1px 4px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.cn-spot-rank.r1 { color: #1d1500; background: linear-gradient(160deg, var(--gold, #f2b736), #d99a18); }
.cn-spot-rank.r2 { color: #101c18; background: linear-gradient(160deg, #cfd8d4, #9fb0a9); }
.cn-spot-rank.r3 { color: #2a1608; background: linear-gradient(160deg, #d9a06b, #b57840); }
.cn-spot-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cn-spot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cn-spot-top b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-spot-n { font-size: 13px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.cn-spot-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-spot-track { display: block; height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.cn-spot-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--glacier))); }
.cn-spot-row:first-child .cn-spot-track i { box-shadow: 0 0 10px -2px color-mix(in srgb, var(--brand) 55%, transparent); }

/* --- Ta régularité (#3 refonte) : accroche « série » + ruban + axe temporel + pastilles à icône --- */
.cn-regu-headline { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.cn-regu-big { font-size: 34px; font-weight: 900; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cn-regu-big-l { font-size: 13px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.cn-regu-flame { width: 16px; height: 16px; color: var(--accent); }
.cn-regu-strip { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; margin: 4px 0 4px; }
.cn-regu-strip i { display: block; aspect-ratio: 1; border-radius: 3.5px; background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.cn-regu-strip i.on { background: linear-gradient(160deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--glacier))); box-shadow: 0 0 7px -2px color-mix(in srgb, var(--brand) 60%, transparent); }
.cn-regu-strip i.now { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.cn-regu-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3); margin: 0 1px 12px; }
.cn-regu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cn-regu-s { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.cn-regu-s-ic { width: 16px; height: 16px; color: var(--brand); margin-bottom: 1px; }
.cn-regu-s b { display: block; font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cn-regu-s span { font-size: 10.5px; color: var(--text-3); }
.cn-regu-leg { font-size: 11px; color: var(--text-2); margin-top: 10px; text-align: center; }
/* légende explicative de la carte de France (#8) */
.cn-map-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--text-2); line-height: 1.4; margin-top: 10px; }
.cn-map-hint .phi { width: 15px; height: 15px; flex: none; color: var(--brand); margin-top: 1px; }
/* #11 — onglet « Par espèce » (Fishera+) */
/* Badge ★ = SYMBOLE UNIVERSEL des outils Fishera+ (payants). À réutiliser partout (onglets, entrées de menu, cartes). */
/* Gemme dorée = marqueur Fishera+ : dégradé + halo + reflet vitré + balayage lumineux (accroche l'œil, thème-safe) */
.plus-badge { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 6px; border-radius: 50%; background: linear-gradient(135deg, #ffe987 0%, var(--gold) 44%, var(--gold-deep) 100%); color: #3a2e00; vertical-align: -4px; flex: none; box-shadow: 0 0 0 1px rgba(224,168,19,.35), 0 2px 7px -1px rgba(224,168,19,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.plus-badge .phi { position: relative; z-index: 1; width: 11px; height: 11px; display: block; }
/* Cadenas Fishera+ sur la rangée « Carte marine » du menu des couches (affiché si non-abonné) */
.lay-lock { display: none; margin-left: auto; }
.lay-row.lay-locked .lay-lock { display: inline-grid; }
.lay-row.lay-locked .lay-chk { display: none; }
.plus-badge::after { content: ""; position: absolute; top: -40%; left: 0; width: 45%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); transform: translateX(-260%) rotate(20deg); pointer-events: none; animation: plusShine 5s ease-in-out infinite; }
@keyframes plusShine { 0%, 66% { transform: translateX(-260%) rotate(20deg); } 80%, 100% { transform: translateX(420%) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) { .plus-badge::after, .cn-pane-plus-ic::after { animation: none; opacity: 0; } }
.cn-tab { display: inline-flex; align-items: center; justify-content: center; } /* le libellé + l'étoile restent centrés ensemble */
.cn-plus-teaser { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); background: color-mix(in srgb, var(--gold) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--border)); border-radius: 12px; padding: 9px 12px; margin-bottom: 4px; }
.cn-plus-teaser .phi { width: 15px; height: 15px; flex: none; color: var(--gold-deep); }
.cn-plus-teaser b { color: var(--text); }
.cn-spec-pick { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 12px 14px; }
.cn-spec-pick > .cn-hunt-img { width: 54px; height: 54px; }
.cn-spec-sels { flex: 1; min-width: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.cn-spec-sel { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cn-spec-sel > span { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
.cn-spec-sel select { -webkit-appearance: none; appearance: none; width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.cn-spec-sel select:focus { border-color: var(--brand); outline: none; }
/* Déclencheurs à APERÇU (19/07) : remplacent les <select> natifs de l'onglet « Par espèce » */
.cn-spec-pick { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .cn-spec-pick { grid-template-columns: 1fr 1fr; } }
.cn-trig { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 9px 11px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .15s ease, transform .1s ease; }
.cn-trig:hover { border-color: var(--brand-line); }
.cn-trig:active { transform: scale(.99); }
.cn-trig-th { position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.cn-trig-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* posée PAR-DESSUS le repère */
.cn-trig-ph, .cnp-th-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.cn-trig-ph .phi, .cnp-th-ph .phi { width: 18px; height: 18px; }
.cn-trig-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-trig-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); }
.cn-trig-v { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-trig-s { font-size: 11px; color: var(--text-2); }
.cn-trig-arr { flex: none; color: var(--text-3); }
.cn-trig-arr .phi { width: 14px; height: 14px; }
/* Listes des modales de choix (espèce / spot) */
.cnp-list { max-height: 62vh; max-height: 62dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.cnp-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--glass-border); border-radius: 13px; padding: 8px 10px; cursor: pointer; font-family: inherit; color: var(--text); }
.cnp-row:hover { border-color: var(--brand-line); }
.cnp-row.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.cnp-th { position: relative; flex: none; width: 48px; height: 48px; border-radius: 11px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.cnp-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* illustrations d'espèces : PNG détourés → jamais rognés, contrairement aux vues satellite */
.cnp-th--fish img { object-fit: contain; padding: 3px; }
.cn-trig-th img.cn-trig-fish { object-fit: contain; padding: 4px; } /* poisson détouré 300×79 : « cover » le hachait */
.cnp-sec { margin: 12px 2px 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cnp-sec:first-child { margin-top: 2px; }
.cnp-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cnp-b b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnp-b span { font-size: 11.5px; color: var(--text-2); }
.cnp-ck { flex: none; color: var(--brand); }
.cnp-ck .phi { width: 18px; height: 18px; }
/* score météo du jour pour l'espèce (validé 19/07) — carte cliquable → météo filtrée */
.cn-spec-wx { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 12px 14px; cursor: pointer; color: var(--text); font-family: inherit; transition: border-color .15s ease, transform .1s ease; }
.cn-spec-wx:hover { border-color: var(--brand-line); }
.cn-spec-wx:active { transform: scale(.99); }
.cn-spec-wx-score { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.cn-spec-wx-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-spec-wx-b b { font-size: 13.5px; font-weight: 800; }
.cn-spec-wx-b span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-spec-wx-arr { flex: none; color: var(--text-3); font-size: 20px; }
/* sticker du temps du jour — même vocabulaire visuel que le héros du hub */
.cn-spec-wx-fx { flex: none; margin: -6px 2px -6px 4px; font-size: 46px; line-height: 1; user-select: none; filter: drop-shadow(0 6px 12px rgba(6,20,16,.26)); animation: hubWxFloat 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cn-spec-wx-fx { animation: none; } }
.cn-spec-wx-load { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cn-spec-wx-load .phi { width: 16px; height: 16px; color: var(--brand); }
.cn-spec-wx-load em { font-style: normal; color: var(--text-3); }
/* XP compacté dans le bandeau « Mon carnet » (#12) */
.pb-xp { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex: none; }
.pb-xp-lvl { font-size: 11.5px; font-weight: 800; color: var(--on-brand); background: var(--brand); border-radius: 999px; padding: 2px 9px; letter-spacing: .2px; }
.pb-xp[data-tier="gold"] .pb-xp-lvl { background: var(--gold); color: #3a2e00; }
.pb-xp[data-tier="purple"] .pb-xp-lvl { background: #7a6bf0; color: #fff; }
.pb-xp-bar { width: 54px; height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.pb-xp-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--glacier)); }
.pb-xp-n { font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 380px) { .pb-xp-n { display: none; } }

/* barres mensuelles (N vs N-1) : dégradé + lueur sur le pic */
.cn-yoy-cur { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 75%, var(--glacier)), var(--brand)) !important; }
.cn-yoy-cur.best { box-shadow: 0 0 10px -2px color-mix(in srgb, var(--brand) 60%, transparent); }

/* ============ PANNEAU SPOT (spec panel d'experts) ============ */
.sp-hero { margin: 8px 0 10px; }
.sp-hero-meta { font-size: 12.5px; color: var(--text-2); }
.sp-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-badge-gab { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #1d1500;
  background: linear-gradient(160deg, var(--gold, #f2b736), #d99a18); border-radius: 99px; padding: 4px 10px;
  box-shadow: 0 3px 10px -4px rgba(242, 183, 54, .55); }
.sp-badge-gab .phi { width: 12px; height: 12px; }
.sp-badge-sm { padding: 3px 6px; }
.sp-badge-win { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 99px; padding: 4px 10px; }
.sp-badge-win .phi { width: 12px; height: 12px; }
/* chips espèces : rangée sticky, défilement horizontal */
.sp-chips { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 10px; position: sticky; top: 0; z-index: 3;
  background: var(--bg-2); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .06); border-radius: 99px; cursor: pointer;
  transition: all .25s cubic-bezier(0.32, 0.72, 0, 1); -webkit-tap-highlight-color: transparent; }
.sp-chip em { font-style: normal; font-weight: 800; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sp-chip.on { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.sp-chip.on em { color: color-mix(in srgb, var(--on-brand) 70%, transparent); }
.sp-chip:active { transform: scale(0.96); }
.sp-card { margin-bottom: 10px; }
.sp-sub-note { font-size: 10.5px; font-weight: 500; color: var(--text-3); }
/* état vide honnête : « n=X/Y prises pour cette stat » */
.sp-need { display: flex; align-items: center; gap: 10px; padding: 6px 0 2px; }
.sp-need-t { flex: 1; font-size: 12px; color: var(--text-2); }
.sp-need-bar { flex: 0 0 70px; height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.sp-need-bar i { display: block; height: 100%; border-radius: 4px; background: var(--surface-3); }
.sp-need-n { font-size: 11px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* échelle de gabarit : rail + boîte P25-P75 + médiane + fantôme médiane globale */
.sp-scale { padding: 10px 2px 0; }
.sp-scale-rail { position: relative; height: 14px; border-radius: 8px; background: var(--bg-2); }
.sp-scale-box { position: absolute; top: 2px; bottom: 2px; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 85%, var(--glacier)));
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--brand) 55%, transparent); }
.sp-scale-med { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--text); box-shadow: 0 0 6px color-mix(in srgb, var(--text) 50%, transparent); transform: translateX(-1.5px); }
.sp-scale-ghost { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--text-3); opacity: .8; }
.sp-scale-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 7px; }
.sp-scale-lbl b { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-gab-line { font-size: 11.5px; color: var(--text-2); margin-top: 8px; }
.sp-gab-line .sp-up { color: var(--brand); } .sp-gab-line .sp-down { color: var(--accent); }
.sp-ghost-leg { color: var(--text-3); font-size: 10.5px; }
/* calendrier du spot : 12 barres (ou 4 saisons), gris = pas de donnée */
.sp-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 84px; margin-top: 6px; }
.sp-cal4 { grid-template-columns: repeat(4, 1fr); }
.sp-cal-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-cal-track { flex: 1; display: flex; align-items: flex-end; border-radius: 5px; }
.sp-cal-track i { display: block; width: 100%; border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, var(--glacier)), var(--brand)); }
.sp-cal-track i.off { background: var(--bg-2); }
.sp-cal-col span { text-align: center; font-size: 9.5px; color: var(--text-3); }
.sp-cal-col.now span { color: var(--accent); font-weight: 800; }
.sp-cal-leg, .sp-cal-note { font-size: 10.5px; color: var(--text-3); margin-top: 7px; }
.sp-cal-note { color: var(--text-2); margin: 2px 0 4px; }
.sp-tide-top { font-size: 12px; color: var(--glacier, #7fc7e8); }
/* recettes : dernière réussite + top 3 avec pastilles conditions */
.sp-rec { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.sp-rec:last-of-type { border-bottom: none; }
.sp-rec img { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.sp-rec-b { flex: 1; min-width: 0; }
.sp-rec-l1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sp-rec-l1 b { font-size: 13px; }
.sp-rec-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent); border-radius: 6px; padding: 2.5px 7px; }
.sp-rec-mes { font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.sp-rec-date { font-size: 11px; color: var(--text-3); margin: 2px 0 5px; }
.sp-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border-radius: 8px; padding: 3.5px 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); font-variant-numeric: tabular-nums; }
.sp-pill .phi { width: 12px; height: 12px; color: var(--brand); }
.sp-pill-mut { color: var(--text-3); }
/* historique compact */
.sp-hist { margin-top: 6px; }
.sp-hist-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--glass-border); font-size: 12px; }
.sp-hist-row:last-child { border-bottom: none; }
.sp-hist-row b { flex: none; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sp-hist-mes { flex: none; color: var(--accent); font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sp-pills-inline { flex: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap; }
.sp-hist-date { flex: none; color: var(--text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.sp-foot { margin-top: 4px; }
/* ---- « Où aller demain ? » : widget carnet + strip 7 jours du panneau ---- */
.fc-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 4px; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--glass-border); color: var(--text);
  transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1); -webkit-tap-highlight-color: transparent; }
.fc-row:last-of-type { border-bottom: none; }
.fc-row:hover { background: rgba(255, 255, 255, .02); }
.sp-chip:hover:not(.on) { border-color: var(--glass-hi); color: var(--text); }
.so-seg-btn:hover:not(.on) { border-color: var(--glass-hi); color: var(--text); }
.so-x:hover { color: var(--accent); }
.fc-row:active { transform: scale(0.985); }
/* variante NON cliquable (« Quand y retourner ») : neutralise pointer/hover/press du fc-row de base */
.fc-row.fc-row-static { cursor: default; }
.fc-row.fc-row-static:hover { background: none; }
.fc-row.fc-row-static:active { transform: none; }
/* Score en jauge circulaire : l'anneau montre le niveau, le chiffre reste roi */
.fc-score { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
.fc-score svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-score circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.fc-score .fc-ring-bg { stroke: var(--surface-2); }
.fc-score b { position: relative; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fc-score.hot .fc-ring { stroke: var(--brand); }
.fc-score.hot b { color: var(--brand-text, var(--brand)); }
.fc-score.ok .fc-ring { stroke: var(--gold); }
.fc-score.ok b { color: var(--text); }
.fc-score.low .fc-ring { stroke: var(--text-3); }
.fc-score.low b { color: var(--text-3); }
.fc-b { flex: 1; min-width: 0; }
.fc-l1 { display: flex; align-items: baseline; gap: 8px; }
.fc-l1 b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-when { flex: none; font-size: 11.5px; font-weight: 700; color: var(--brand-text); }
.fc-proof { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.fc-arr { flex: none; color: var(--text-3); font-size: 18px; }
/* Vignette satellite du spot + sticker du temps prévu */
.fc-th { position: relative; flex: none; width: 52px; height: 52px; border-radius: 15px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center;
  box-shadow: 0 3px 10px -4px rgba(1,14,11,.35), inset 0 0 0 1px var(--glass-border); }
.fc-th-scrim { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.16), transparent 45%, rgba(1,14,11,.22)); pointer-events: none; }
/* une tuile satellite de plein lac est presque noire : le repère blanc la rend lisible comme « un lieu » */
.fc-th img { filter: saturate(1.12) brightness(1.06); }
.fc-th-pin { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.fc-th-pin .phi { width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); }
.fc-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-th-ph .phi { width: 18px; height: 18px; color: var(--text-3); }
.fc-wx { flex: none; font-size: 26px; line-height: 1; margin: -4px 0; user-select: none; filter: drop-shadow(0 3px 6px rgba(6,20,16,.22)); }
@media (max-width: 380px) { .fc-th { display: none; } } /* écran étroit : le score et le nom priment */
.fc-leg { font-size: 11px; color: var(--text-2); margin-top: 8px; text-align: center; letter-spacing: .1px; }
.fc-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 4px; }
.fc-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 11px;
  background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.fc-cell b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-3); }
.fc-cell span { font-size: 9px; color: var(--text-3); }
.fc-cell-d { font-variant-numeric: tabular-nums; }
.fc-cell.ok b { color: var(--text); }
.fc-cell.ok { background: var(--surface-2); }
.fc-cell.hot { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.fc-cell.hot b { color: var(--brand); }
.fc-cell.best { outline: 1.5px solid var(--brand); outline-offset: 1px; box-shadow: 0 0 12px -4px color-mix(in srgb, var(--brand) 60%, transparent); }
.fc-best { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); margin-top: 10px; }
.fc-best .phi { width: 14px; height: 14px; color: var(--brand); flex: none; }
.fc-best b { color: var(--text); }
/* ---- Signature + combo du spot ---- */
.sp-sig, .sp-combo { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text);
  padding: 10px 12px; border-radius: 13px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--brand) 8%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sp-combo { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sp-sig-ic { width: 17px; height: 17px; flex: none; color: var(--brand); margin-top: 1px; }
.sp-combo .sp-sig-ic { color: var(--accent); }
.sp-lift { font-size: 11px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 6px; padding: 1.5px 6px; font-variant-numeric: tabular-nums; }
/* ---- Comparateur de mes spots ---- */
.cmp-rows { display: flex; flex-direction: column; }
.cmp-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--glass-border); }
.cmp-row:last-child { border-bottom: none; }
.cmp-l { flex: 1; min-width: 0; }
.cmp-l b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-meta { font-size: 10.5px; color: var(--text-3); }
.cmp-r { flex: none; display: flex; align-items: center; gap: 10px; }
.cmp-n { font-size: 14px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.cmp-med { font-size: 11.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cmp-med.best { color: var(--gold, #f2b736); }
.cmp-rate { color: var(--brand); font-variant-numeric: tabular-nums; }
/* ---- Formulaire « Ma sortie » (lot B1) ---- */
.so-sec { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--text); margin: 14px 0 8px; }
.so-sec .phi { width: 15px; height: 15px; color: var(--brand); }
.so-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.so-times { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.so-times input { flex: 1; min-width: 0; }
.so-arrow { color: var(--text-3); }
.so-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.so-seg-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; font-size: 13.5px; font-weight: 800;
  color: var(--text-2); background: var(--surface-2); border: 1.5px solid rgba(255, 255, 255, .07); border-radius: 14px; cursor: pointer;
  transition: all .25s cubic-bezier(0.32, 0.72, 0, 1); -webkit-tap-highlight-color: transparent; }
.so-seg-btn .phi { width: 16px; height: 16px; }
/* actif : vert profond + texte blanc → tranche nettement (fini le vert-sur-vert terne), lisible en clair ET sombre */
.so-seg-btn.on { color: #fff; background: #0a7d59; border-color: #0a7d59; box-shadow: 0 4px 14px -6px rgba(10,125,89,.7); }
.so-seg-btn.on .phi { color: #fff; }
.so-seg-btn:active { transform: scale(0.97); }
.so-hint { display: block; font-size: 11.5px; line-height: 1.55; color: var(--text-2);
  background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 12px; padding: 9px 11px; margin: 10px 0 0; }
.so-hint.mut { background: var(--surface-2); color: var(--text-3); }
.so-hint .phi { width: 14px; height: 14px; color: var(--brand); vertical-align: -0.2em; margin-right: 3px; }
.so-line { display: grid; grid-template-columns: 1fr 62px 62px 62px 26px; gap: 6px; align-items: center; margin-top: 8px; }
.so-line input { min-width: 0; padding: 10px 6px; font-size: 13px; }
/* unité permanente et colorée à droite de chaque case (nb / cm / kg) */
.so-field { display: flex; align-items: center; gap: 3px; min-width: 0; }
.so-field input { flex: 1; text-align: right; }
.so-field .so-unit { flex: none; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.so-field-nb .so-unit { color: var(--brand-dark); }
.so-field-cm .so-unit { color: #1c7ed6; }
.so-field-kg .so-unit { color: #e8951f; }
/* Bouton « espèce » du comptage session → ouvre le picker à photos (jamais de menu natif) */
.so-esp-btn { display: inline-flex; align-items: center; gap: 7px; min-width: 0; min-height: 42px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-1) var(--ease-out); }
.so-esp-btn.has { color: var(--text); border-color: var(--brand-line); }
.so-esp-btn:active { transform: scale(.98); }
.so-esp-btn > .phi { width: 16px; height: 16px; flex: none; color: var(--brand-strong); }
.so-esp-ill { flex: none; width: 30px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.so-esp-ill img, .so-esp-ill svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.so-esp-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-esp-n.mut { color: var(--text-3); font-weight: 600; }
/* Modale picker d'espèce à photos (réutilisable) */
.spk-search { margin-bottom: 4px; }
.spk-list { max-height: 62vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.spk-sec { margin: 13px 2px 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.spk-sec:first-child { margin-top: 4px; }
.spk-list .sp-grid { max-height: none; overflow: visible; }
/* Picker de spot réutilisable (modale) + lieu lié de la session */
.spp-near { width: 100%; margin: 4px 0 8px; }
.spp-list { max-height: 56vh; overflow-y: auto; }
.so-pickspot { width: 100%; margin-top: 8px; }
.so-spotlink { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand-strong); display: inline-flex; align-items: center; gap: 6px; }
.so-spotlink .phi { width: 15px; height: 15px; }
[data-theme="light"] .so-spotlink { color: var(--brand-dark); }
.so-photo-acts { margin-top: 8px; }
.pf-sortie-ph { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; display: block; }
/* LA carte principale embarquée dans les formulaires (prise + session) */
.pick-mapwrap { position: relative; margin: 10px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.pick-map { position: relative; width: 100%; aspect-ratio: 1 / 1; height: auto; max-height: 440px; overflow: hidden; }
.pick-map #map { position: absolute; inset: 0; } /* la vraie carte remplit le cadre */
/* Mode PLACEMENT d'un nouveau spot : repère fixe au centre + bandeau d'aide */
.pick-mapwrap .place-pin { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 6; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.pick-mapwrap.placing .place-pin { display: block; }
.pick-mapwrap .place-hint { display: none; position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6; background: rgba(8,26,30,.85); color: #fff; font-size: 12px; font-weight: 600; text-align: center; padding: 6px 10px; border-radius: 10px; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pick-mapwrap.placing .place-hint { display: block; }
.pick-mapwrap.placing .pick-map-hint { display: none; }
/* Barre « Valider la position » (étape 1 du nouveau spot) sous la carte */
.place-go { margin: 10px 0; padding: 12px; background: var(--brand-wash); border: 1px solid var(--brand-line); border-radius: 14px; }
.place-go-coords { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 9px; }
.place-go-coords .phi { width: 15px; height: 15px; color: var(--brand); flex: none; }
.place-go-coords small { font-variant-numeric: tabular-nums; font-weight: 600; }
.place-go .place-go-btn { width: 100%; }
body.map-embedded .pick-map .maplibregl-ctrl-top-right { transform: scale(.88); transform-origin: top right; }
body.map-embedded .pick-map .maplibregl-ctrl-geolocate, body.map-embedded .pick-map #daynight-toggle { display: none; } /* cadre réduit : on garde seulement le zoom */
/* Proposition « à valider » après un tap sur la carte / la liste */
.pick-confirm { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--brand-line); border-radius: 14px; box-shadow: var(--shadow); }
.pick-confirm .pickc-img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }
.pick-confirm .pickc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick-confirm .pickc-b b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-confirm .pickc-b span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-confirm .pickc-ok { flex: none; }
.pick-confirm .pickc-x { flex: none; background: none; border: none; color: var(--text-3); cursor: pointer; padding: 6px; border-radius: 8px; }
.pick-confirm .pickc-x .phi { width: 16px; height: 16px; }
/* Rangée « Voir l'adresse sur la carte » (recherche adresse/commune/code postal) */
.qz-geo-row { display: flex; align-items: center; gap: 8px; width: 100%; margin: 6px 0; padding: 11px 13px; background: var(--surface-2); border: 1px dashed var(--brand-line); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; }
.qz-geo-row .phi { width: 16px; height: 16px; flex: none; color: var(--brand-strong); }
.qz-geo-row .qz-geo-sub { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); }
[data-theme="light"] .qz-geo-row .phi { color: var(--brand-dark); }
.pick-map-hint { position: absolute; left: 8px; bottom: 8px; z-index: 3; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; pointer-events: none; }
.so-freewrap { margin-top: 10px; }
.so-freewrap summary { font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; padding: 6px 2px; list-style-position: inside; }
.so-freewrap input { margin-top: 8px; }
.so-x { background: none; border: none; color: var(--text-3); font-size: 15px; cursor: pointer; padding: 6px 2px; }
.so-addline { width: 100%; margin-top: 10px; font-size: 13px; }
.so-addline .phi { width: 14px; height: 14px; vertical-align: -0.18em; }
/* questionnaire pleine page */
.sortie-body { max-width: 560px; margin: 0 auto; padding: 14px 16px 90px; }
.so-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 20px; }
.so-prog i { display: block; height: 4px; border-radius: 3px; background: var(--surface-2); transition: background .4s cubic-bezier(0.32, 0.72, 0, 1); }
.so-prog i.on { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--glacier))); box-shadow: 0 0 8px -2px color-mix(in srgb, var(--brand) 60%, transparent); }
.so-step-t { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 6px; }
.so-step-t .phi { width: 20px; height: 20px; color: var(--brand); }
.so-step-s { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 16px; }
.so-chips-mt { margin-top: 12px; }
.so-nav { display: flex; gap: 10px; margin-top: 22px; }
.so-nav .btn { flex: 1; padding: 13px; font-size: 14.5px; font-weight: 800; }
.so-nav #so-prev { flex: 0 0 32%; }
.so-done { text-align: center; padding: 40px 10px 20px; }
.so-done-ic { width: 54px; height: 54px; color: var(--brand); filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 45%, transparent)); }
.so-done-t { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 6px; }
.so-done-s { font-size: 13px; color: var(--text-2); margin-bottom: 22px; }
.so-done-acts { flex-direction: column; }
.so-done-acts .btn { width: 100%; }
/* ---- Duo photo « Prendre / Galerie » (avis + fiche) ---- */
.ph-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ph-duo .rv-file { justify-content: center; text-align: center; }
.ph-duo .rv-file .phi, .add-photo .phi { width: 15px; height: 15px; vertical-align: -0.2em; margin-right: 4px; color: var(--brand); }
.ae-photo-opts { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.ae-upload { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ae-upload .phi { width: 15px; height: 15px; }
.ae-addurl { display: flex; gap: 8px; }
.ae-addurl input { flex: 1; min-width: 0; }
.ae-addurl .btn { flex: none; white-space: nowrap; }
.ae-addurl .phi { width: 14px; height: 14px; vertical-align: -0.18em; }
/* ---- Récap de sortie + description ---- */
.so-desc { width: 100%; resize: vertical; font-family: inherit; line-height: 1.5; }
.so-recap { padding: 13px 15px; }
.so-rec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.so-rec-row b { font-weight: 800; } .so-rec-row span { color: var(--text-2); font-size: 12.5px; }
.so-rec-row .phi { width: 14px; height: 14px; color: var(--brand); vertical-align: -0.18em; }
.so-rec-desc { font-size: 12.5px; font-style: italic; color: var(--text-2); border-top: 1px solid var(--glass-border); margin-top: 8px; padding-top: 9px; line-height: 1.5; }
.so-nav-col { flex-direction: column; }
.so-nav-col .btn { width: 100%; }
.sheet-sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 1px; }
/* ---- Carte « Dernière sortie » (profils) ---- */
.pf-sortie { background: var(--card); border: 1px solid var(--glass-border); border-radius: 15px; padding: 12px 14px; margin-bottom: 14px;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 28px -20px rgba(1, 14, 11, .55); }
.pf-sortie-l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.pf-sortie-l1 b { font-weight: 800; }
.pf-sortie-l1 .phi { width: 15px; height: 15px; color: var(--brand); vertical-align: -0.2em; }
.pf-sortie-dt { font-size: 11.5px; color: var(--text-3); }
.pf-sortie-res { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.pf-sortie-res .phi { width: 13px; height: 13px; color: var(--brand); vertical-align: -0.18em; }
.pf-sortie-desc { font-size: 12.5px; font-style: italic; color: var(--text-2); border-top: 1px solid var(--glass-border); margin-top: 9px; padding-top: 9px; line-height: 1.55; }
/* la feuille de choix garde ses libellés sur une colonne */
.sheet-act { flex-wrap: wrap; }
/* ---- Page « Enregistrer » : le choix prise / sortie en grandes cartes ---- */
.enr-spot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border-radius: 99px; padding: 6px 12px; margin: 2px 0 16px; }
.enr-spot .phi { width: 13px; height: 13px; color: var(--brand); }
.enr-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 17px 16px; margin-bottom: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--glass-border); border-radius: 18px; color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 32px -22px rgba(1, 14, 11, .55);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), border-color .3s; -webkit-tap-highlight-color: transparent; }
.enr-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .12); }
.enr-card:active { transform: scale(0.98); }
.enr-ic { flex: none; width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.enr-ic .phi { width: 23px; height: 23px; color: var(--brand); }
.enr-ic-2 { background: color-mix(in srgb, var(--glacier, #7fc7e8) 14%, transparent); }
.enr-ic-2 .phi { color: var(--glacier, #7fc7e8); }
.enr-b { flex: 1; min-width: 0; }
.enr-b b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 3px; }
.enr-b span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.enr-arr { flex: none; font-size: 22px; color: var(--text-3); }
.enr-tip { font-size: 11.5px; line-height: 1.55; color: var(--text-2); background: color-mix(in srgb, var(--brand) 7%, transparent);
  border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.enr-tip .phi { width: 13px; height: 13px; color: var(--brand); vertical-align: -0.18em; margin-right: 3px; }
.pf-perf-h .phi { width: 15px; height: 15px; color: var(--brand); vertical-align: -0.18em; }
.pf-dn-ic { width: 12px; height: 12px; vertical-align: -0.1em; opacity: .85; }
/* Icône du titre de page (page-bar) */
.pbt-ic { width: 18px; height: 18px; color: var(--brand); vertical-align: -0.2em; margin-right: 2px; }
/* Records par espèce */
.cn-records { background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); overflow: hidden; }
.cn-rec-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--glass-border); }
.cn-rec-row:last-child { border-bottom: none; }
.cn-rec-b { flex: 1; min-width: 0; }
.cn-rec-b b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-rec-b span { font-size: 10.5px; color: var(--text-2); }
.cn-rec-r { text-align: right; flex: none; }
.cn-rec-r b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.cn-rec-r span { display: block; font-size: 10px; }
/* Tableau de chasse */
/* Tableau de chasse (#6) : vignette d'illustration + barre, dans une carte respirée */
.cn-hunt { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 14px 15px; }
.cn-hunt-row { display: flex; align-items: center; gap: 12px; }
.cn-hunt-img { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.cn-hunt-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cn-hunt-img-ph { color: var(--text-3); }
.cn-hunt-img-ph .phi { width: 20px; height: 20px; }
.cn-hunt-img-ph { font-size: 13px; font-weight: 800; color: var(--text-2); }
.cn-hunt-main { flex: 1; min-width: 0; }
.cn-hunt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.cn-hunt-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-hunt-n { flex: none; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.cn-hunt-track { height: 9px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.cn-hunt-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--glacier))); border-radius: 5px; min-width: 4px; }
.cn-hunt-track i.alt { background: var(--surface-3); }
/* Ruche de trophées (réutilise .pf-honey / .pf-hexrow / .pf-hexcell) */
.cn-honey { margin-top: 2px; }
/* Analyses avancées (accordéon) */
.cn-adv { display: block; background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--r-card); overflow: hidden; }
.cn-adv-head { padding: 14px 15px 4px; } /* #9 : plus de summary/toggle — section toujours ouverte */
.cn-adv-t { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.25; }
.cn-adv-s { font-size: 11px; color: var(--text-2); margin-top: 3px; }
.cn-adv-body { padding: 4px 15px 15px; }
/* rang INFÉRIEUR à l'intérieur de la carte : 15px, sinon les sous-titres écraseraient
   « Analyses avancées », leur propre titre de carte. */
.cn-adv-body .pf-sub, .cn-adv-body .pf-sec { font-size: 15px; letter-spacing: -0.01em; margin-top: 26px; margin-bottom: 10px; }
.cn-adv-body .pf-sub .phi, .cn-adv-body .pf-sec .phi { width: 17px; height: 17px; }
.cn-adv-body > *:first-child { margin-top: 0; }
/* Objectif de la semaine */
.cn-goal { background: linear-gradient(135deg, var(--surface-2), var(--card)); border: 1px solid var(--accent-line); border-radius: 14px; padding: 14px 15px; }
.cn-goal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cn-goal-h > span:first-child { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cn-goal-n { font-size: 12px; font-weight: 800; color: var(--accent); }
.cn-goal-t { font-size: 12.5px; color: var(--text-2); margin-bottom: 9px; }
.cn-goal-track { height: 8px; background: var(--surface-3); border-radius: 5px; overflow: hidden; } /* audit : piste invisible en sombre */
.cn-goal-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 5px; }
.cn-goal-xp { font-size: 10px; color: var(--gold); font-weight: 700; margin-top: 6px; text-align: right; }
/* Titre de la liste des prises (en bas) */
.cn-feed-h { padding: 6px 0 2px; }

/* ============================================================
   LANDING / PAGE D'ACCUEIL MARKETING (#view-accueil, préfixe .lp-)
   THÈME SOMBRE « Deep Water » FIXE — consigne produit : la landing reste
   TOUJOURS sombre, même si l'app est en mode clair ([data-theme="light"]).
   → On redéclare LOCALEMENT tous les tokens Deep Water sombres sur #view-accueil
     (et sur .lp) : les ~90 var(--…) de la landing résolvent alors des valeurs
     sombres quel que soit le thème racine. Ne PAS remplacer par [data-theme]. */
#view-accueil {
  color-scheme: dark;
  --bg: #07201a; --bg-2: #0b2620;
  --bg-grad: radial-gradient(1200px 800px at 15% -10%, #0f3128 0%, #07201a 55%, #061b16 100%);
  --card: #102e27; --surface: #102e27; --surface-2: #163a31; --surface-3: #1c463b;
  --glass-border: rgba(255,255,255,.10); --glass-hi: rgba(255,255,255,.14); --on-brand: #06231c;
  --text: #eafff7; --text-2: #8fb8ab; --text-3: #5f8478;
  --muted: #8fb8ab;
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
  --brand: #1fd39a; --brand-strong: #2fe0b0; --brand-dark: #17c48f;
  --brand-wash: rgba(31,211,154,.14); --brand-line: rgba(47,224,176,.34);
  --accent: #ff6b3d; --accent-strong: #ff855c; --accent-deep: #e8551f;
  --accent-wash: rgba(255,107,61,.15); --accent-line: rgba(255,107,61,.42);
  --gold: #ffd23f; --gold-deep: #e0a813; --gold-wash: rgba(255,210,63,.15); --gold-line: rgba(255,210,63,.40);
  --glacier: #5ad1e0; --glacier-wash: rgba(90,209,224,.14);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 8px 30px -8px rgba(31,211,154,.5);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 34px -8px rgba(255,107,61,.55);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 8px 28px -10px rgba(255,210,63,.45);
  --glow-glacier: 0 0 24px -6px rgba(90,209,224,.5);
  --shadow: 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -22px rgba(0,0,0,.7);
  --focus-ring: 0 0 0 3px rgba(47,224,176,.45);
}
/* Landing plein écran : elle a son PROPRE en-tête → on masque le chrome de l'app
   (topbar/bottomnav/FAB) et on étend #views sur toute la hauteur. */
body.on-accueil #topbar,
body.on-accueil #bottomnav,
body.on-accueil #fab-menu,
body.on-accueil #fab-backdrop { display: none !important; }
body.on-accueil #views { top: 0 !important; bottom: 0 !important; }

/* ── Bandeau bêta : fixé juste sous le topbar, pousse #views vers le bas (masqué sur la landing). ── */
.beta-banner { position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 9; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, var(--card)), var(--card) 72%); border-bottom: 1px solid var(--border); }
.beta-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
.beta-tag { flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent); padding: 3px 8px; border-radius: 999px; }
.beta-txt { font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.beta-txt b { color: var(--text); font-weight: 700; }
.beta-txt u { color: var(--brand); text-decoration: none; font-weight: 700; white-space: nowrap; }
.beta-x { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.beta-x:hover { background: var(--surface-2); color: var(--text); }
body.has-beta #views { top: calc(52px + env(safe-area-inset-top, 0px) + var(--beta-h, 44px)); }
body.has-beta .pf-stickybar { top: calc(52px + env(safe-area-inset-top, 0px) + var(--beta-h, 44px)); }
body.on-accueil .beta-banner { display: none !important; }

/* Fond sombre TOUJOURS (les tokens ci-dessus sont sombres quel que soit le thème). */
#view-accueil {
  background:
    radial-gradient(900px 620px at 88% -6%, var(--brand-wash) 0%, transparent 55%),
    radial-gradient(760px 560px at 6% 8%, var(--glacier-wash) 0%, transparent 52%),
    var(--bg-grad);
}
.lp { color: var(--text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100%; }
.lp * { box-sizing: border-box; }
.lp h1, .lp h2, .lp h3 { font-family: var(--font-title); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--text); margin: 0; }
.lp .lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp a { color: inherit; }

/* Verre */
.lp-glass { position: relative; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg); }

/* Boutons */
.lp-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .09s ease, filter .15s ease, background .15s ease, border-color .15s ease; }
.lp-btn:active { transform: scale(.97); }
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn-primary { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #2a0f05; border-color: transparent; box-shadow: var(--glow-accent); }
.lp-btn-primary:hover { filter: brightness(1.06); }
.lp-btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.lp-btn-ghost:hover { background: var(--surface-2); }
.lp-btn-block { width: 100%; }
.lp-btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.lp-btn-sm { min-height: 38px; padding: 0 15px; font-size: 13px; }
.lp-btn-goog { background: #fff; color: #1a1a1a; border-color: transparent; box-shadow: 0 8px 26px -12px rgba(0,0,0,.6); }
.lp-btn-goog:hover { filter: brightness(.97); }
.lp-gmark { display: inline-grid; place-items: center; width: 19px; height: 19px; font-family: var(--font-title); font-weight: 900; font-size: 14px; line-height: 1; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* En-tête */
.lp-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border-bottom: 1px solid var(--glass-border); }
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-logo { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.lp-brand-name { font-family: var(--font-title); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 21px; line-height: 1; color: var(--text); white-space: nowrap; }
.lp-head-right { display: flex; align-items: center; gap: 14px; }
.lp-login { color: var(--text-2); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .15s; }
.lp-login:hover { color: var(--text); }

.lp-wrap { padding: 32px 22px 40px; max-width: 1120px; margin: 0 auto; }
.lp-eyebrow { font-family: var(--font-title); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); }

/* HERO */
.lp-hero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "copy stage" "cta stage" "trust trust"; column-gap: 26px; row-gap: 0; align-items: center; }
/* Photo de fond (rivière brumeuse) TRÈS assombrie : donne de la profondeur au hero
   sans concurrencer le visuel flottant ni nuire à la lisibilité. Reste sombre. */
.lp-hero::before {
  content: ""; position: absolute; z-index: 0; inset: -32px -22px 0;
  background:
    linear-gradient(180deg, rgba(7,32,26,.82) 0%, rgba(7,32,26,.72) 45%, rgba(7,32,26,.94) 100%),
    url("/brand/lp-hero.jpg") center 22% / cover no-repeat;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
  opacity: .5; pointer-events: none;
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero-copy { grid-area: copy; align-self: end; }
.lp-hero-cta { grid-area: cta; align-self: start; }
.lp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--brand-wash); color: var(--brand); border: 1px solid var(--brand-line); font-size: 13px; font-weight: 600; line-height: 1; }
.lp-pill svg { width: 15px; height: 15px; }
.lp .lp-h1 { font-size: clamp(29px, 4.6vw, 42px); letter-spacing: -.022em; line-height: 1.07; margin: 28px 0 0; }
.lp-g-b { color: var(--brand-strong); } .lp-g-c { color: var(--glacier); } .lp-g-o { color: var(--accent-strong); }
.lp-sub { color: var(--text-2); font-size: 15.5px; line-height: 1.6; margin: 15px 0 0; max-width: 42ch; }
.lp-sub b { color: var(--text); font-weight: 700; }

.lp-authbox { margin-top: 22px; padding: 16px; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg); }
.lp-divx { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lp-divx::before, .lp-divx::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.lp-mailrow { display: flex; gap: 8px; }
.lp-fld { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.lp-fld svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.lp-fld input { width: 100%; min-height: 44px; padding: 0 14px 0 38px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.lp-fld input::placeholder { color: var(--text-3); }
.lp-fld input:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-wash); }
.lp-mailrow .lp-btn { flex: none; }
.lp-legal { font-size: 11.5px; line-height: 1.5; color: var(--text-3); margin: 10px 2px 0; }
.lp-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

.lp-reassure { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; }
.lp-reassure.lp-center { justify-content: center; margin-top: 14px; }
.lp-r { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.lp-r svg { width: 14px; height: 14px; color: var(--brand); }
.lp-explore { margin-top: 16px; }
.lp-explore a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13.5px; font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--border-strong); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.lp-explore a:hover { color: var(--text); border-color: var(--brand-line); }
.lp-explore a svg { width: 16px; height: 16px; }

/* HERO visuel — composition FLOTTANTE (téléphone incliné + cartes-verre qui se chevauchent) */
.lp-stage { position: relative; grid-area: stage; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.lp-halo { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.lp-halo.a { width: 240px; height: 240px; background: rgba(31,211,154,.34); top: 2%; right: 0%; }
.lp-halo.b { width: 190px; height: 190px; background: rgba(90,209,224,.30); bottom: 4%; left: 2%; }
.lp-halo.c { width: 150px; height: 150px; background: rgba(255,210,63,.16); top: 44%; right: 12%; }

.lp-phone { position: relative; z-index: 3; width: 236px; border-radius: 34px; padding: 9px; background: linear-gradient(160deg, #153f35, #0a2620); border: 1px solid var(--glass-hi); box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg), 0 0 60px -14px rgba(31,211,154,.35); transform: rotate(-6deg) translateX(4px); }
.lp-screen { position: relative; border-radius: 26px; overflow: hidden; background: var(--bg); background-image: radial-gradient(400px 300px at 20% -10%, #0f3128, transparent 60%); padding: 12px 11px 14px; }
.lp-appbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.lp-bell { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--glass-border); display: grid; place-items: center; color: var(--text-2); }
.lp-bell svg { width: 15px; height: 15px; }
.lp-bell-d { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.lp-fcard { background: var(--surface); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; }
.lp-fhead { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.lp-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #123c33; border: 1px solid var(--brand-line); box-shadow: 0 0 0 2px var(--surface); font-family: var(--font-title); font-weight: 900; font-size: 10px; color: var(--brand-strong); }
.lp-fnames { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.lp-fn { font-size: 12px; font-weight: 700; color: var(--text); }
.lp-fm { font-size: 10.5px; color: var(--text-3); }
.lp-fphoto { position: relative; height: 100px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, #12463a 0%, #0a2c25 55%, #071f19 100%); }
.lp-fphoto::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 40%, rgba(90,209,224,.10) 60%, transparent 72%), linear-gradient(180deg, transparent 45%, rgba(7,32,26,.8) 100%); }
.lp-fphoto-fish { width: 46px; height: 46px; color: rgba(234,255,247,.20); }
.lp-fphoto .lp-fcap { position: absolute; left: 10px; bottom: 8px; z-index: 1; font-family: var(--font-title); font-weight: 900; font-size: 14px; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.lp-fact { display: flex; align-items: center; gap: 14px; padding: 8px 11px; color: var(--text-2); font-size: 11px; font-weight: 700; }
.lp-fact-like { color: var(--accent-strong); }
.lp-badge-rec { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold-line); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; position: absolute; top: 8px; right: 8px; z-index: 1; }
.lp-badge-rec svg { width: 13px; height: 13px; }
.lp-wx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
.lp-wx .lp-c, .lp-wxmini .lp-c { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.lp-c .v { font-family: var(--font-title); font-weight: 900; font-size: 12.5px; color: var(--text); line-height: 1; }
.lp-c .l { font-size: 10.5px; color: var(--text-3); line-height: 1; }
.lp-xpwrap { margin-top: 9px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 12px; padding: 9px 10px; }
.lp-xprow { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.lp-xprow .lp-lv { color: var(--brand); }
.lp-xpbar { position: relative; height: 10px; width: 100%; border-radius: var(--radius-pill); background: var(--surface-3); border: 1px solid var(--glass-border); overflow: hidden; }
.lp-xpbar > i { display: block; height: 100%; width: 62%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--brand), var(--glacier)); }

/* Cartes-verre flottantes autour du téléphone */
.lp-float { position: absolute; z-index: 5; padding: 11px 13px; border-radius: 16px; animation: lp-float 6s ease-in-out infinite; }
.lp-fl-ttl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.lp-fl-ttl svg { width: 14px; height: 14px; color: var(--brand); }
.lp-fl-map { top: 14px; left: -6px; width: 156px; animation-delay: -1.5s; }
.lp-fl-rec { bottom: 40px; left: -14px; width: 176px; display: flex; align-items: center; gap: 10px; animation-delay: -3s; }
.lp-fl-wx { top: 30px; right: -10px; width: 150px; display: flex; align-items: center; gap: 10px; animation-delay: -4.5s; }
.lp-fl-ic { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--gold-wash); border: 1px solid var(--gold-line); color: var(--gold-deep); box-shadow: 0 8px 28px -10px rgba(255,210,63,.5); }
.lp-fl-rec .lp-fl-ic { background: var(--brand-wash); border-color: var(--brand-line); color: var(--brand); box-shadow: 0 8px 28px -10px rgba(31,211,154,.5); }
.lp-fl-ic.gold { background: var(--gold-wash); border-color: var(--gold-line); color: var(--gold-deep); }
.lp-fl-ic svg { width: 18px; height: 18px; }
.lp-fl-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.lp-fl-v { font-family: var(--font-title); font-weight: 900; font-size: 17px; color: var(--text); }
.lp-fl-l { font-size: 10.5px; color: var(--text-3); }
.lp-minimap.sm { position: relative; height: 72px; border-radius: 11px; overflow: hidden; background: radial-gradient(90% 90% at 30% 20%, #0f382d, #08251e); border: 1px solid var(--glass-border); }
.lp-minimap.sm .lp-rd { position: absolute; height: 2px; border-radius: 2px; background: rgba(90,209,224,.4); }
.lp-minimap.sm .lp-rd.r1 { width: 80%; top: 40%; left: 8%; transform: rotate(-12deg); }
.lp-minimap.sm .lp-rd.r2 { width: 56%; top: 66%; left: 26%; transform: rotate(8deg); }
.lp-minimap.sm .lp-sp { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-strong); box-shadow: 0 0 10px 2px rgba(47,224,176,.7); }
.lp-pin.sm { position: absolute; top: 24%; left: 50%; width: 19px; height: 19px; color: var(--accent); filter: drop-shadow(0 4px 8px rgba(255,107,61,.5)); }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .lp-float { animation: none; } }

/* BARRE DE PREUVE */
.lp-trust { grid-area: trust; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.lp-t { text-align: center; padding: 22px 12px; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--glass-hi) inset; }
.lp-t .v { display: block; font-family: var(--font-title); font-weight: 900; font-size: 30px; line-height: 1; }
.lp-t .l { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-top: 8px; line-height: 1.35; }
.lp-t.brand .v { color: var(--brand); } .lp-t.glac .v { color: var(--glacier); } .lp-t.gold .v { color: var(--gold-deep); }

/* EN-TÊTES DE SECTION */
.lp-sec-head { margin-top: 54px; text-align: center; }
.lp-sec-head.tight { margin-top: 46px; }
.lp-sec-head h2 { font-size: clamp(23px, 3.5vw, 30px); margin-top: 6px; }
.lp-sec-head p { color: var(--text-2); font-size: 14.5px; margin: 9px auto 0; max-width: 54ch; }

/* ÉTAPES */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.lp-step { position: relative; overflow: hidden; padding: 0; }
/* En-tête photo de chaque carte : image en cover + dégradé sombre qui fond vers la carte. */
.lp-step-img { position: relative; height: 138px; overflow: hidden; }
.lp-step-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-step-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,32,26,.35) 0%, rgba(7,32,26,.15) 40%, var(--surface) 100%); }
.lp-no { position: absolute; z-index: 1; top: 12px; right: 15px; font-family: var(--font-title); font-weight: 900; font-size: 34px; line-height: 1; color: rgba(234,255,247,.92); text-shadow: 0 2px 12px rgba(7,32,26,.85); }
.lp-si { position: absolute; z-index: 1; left: 15px; bottom: -23px; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-wash); border: 1px solid var(--brand-line); color: var(--brand); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px -6px rgba(7,32,26,.9); }
.lp-si svg { width: 23px; height: 23px; }
.lp-step-body { padding: 30px 18px 22px; }
.lp-step h3 { font-size: 16.5px; margin-top: 0; }
.lp-step p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin-top: 8px; }
.lp-steps-foot { margin-top: 16px; text-align: center; color: var(--text-3); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; }
.lp-steps-foot svg { width: 15px; height: 15px; color: var(--brand); }

/* PILIERS */
.lp-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.lp-pill-card { padding: 24px 22px; }
.lp-pill-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; }
.lp-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.lp-ico svg { width: 24px; height: 24px; }
.lp-ico.ic-brand { background: var(--brand-wash); border: 1px solid var(--brand-line); color: var(--brand); }
.lp-ico.ic-glac { background: var(--glacier-wash); border: 1px solid var(--glacier); color: var(--glacier); }
.lp-ico.ic-gold { background: var(--gold-wash); border: 1px solid var(--gold-line); color: var(--gold-deep); }
.lp-ico.ic-accent { background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent-strong); }
.lp-pill-card h3 { font-size: 19px; margin-top: 14px; }
.lp-pill-card.wide h3 { margin-top: 12px; }
.lp-pill-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin-top: 10px; }
.lp-kv { margin-top: 14px; display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: 13px; background: var(--brand-wash); border: 1px solid var(--brand-line); }
.lp-kv svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 1px; }
.lp-kv span { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.lp-wxmini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 14px; }
.lp-statsmini { margin-top: 14px; }
.lp-lvl { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.lp-lvl .lv { color: var(--brand); font-family: var(--font-title); font-weight: 900; font-size: 13px; }
.lp-sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.lp-s { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 12px; padding: 11px 12px; }
.lp-s .sv { display: block; font-family: var(--font-title); font-weight: 900; font-size: 19px; color: var(--text); line-height: 1; }
.lp-s .sv.g { color: var(--gold-deep); }
.lp-s .sl { display: block; font-size: 11px; color: var(--text-3); margin-top: 5px; }
.lp-spchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.lp-sc { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--glass-border); font-size: 12px; font-weight: 600; color: var(--text-2); }

/* BANDEAU COMMUNAUTÉ (photo 2 pêcheurs au coucher de soleil, assombrie) */
.lp-community-band { position: relative; overflow: hidden; margin-top: 22px; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg); min-height: 200px; display: flex; align-items: flex-end; }
.lp-community-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.lp-community-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,32,26,.92) 0%, rgba(7,32,26,.72) 45%, rgba(7,32,26,.55) 100%), linear-gradient(0deg, rgba(7,32,26,.6) 0%, transparent 55%); }
.lp-community-band-txt { position: relative; z-index: 1; padding: 22px 24px; max-width: 60ch; }
.lp-community-band-txt p { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.5; margin: 8px 0 0; text-shadow: 0 1px 10px rgba(7,32,26,.7); }

/* APERÇU FEED */
.lp-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.lp-post { overflow: hidden; }
.lp-pimg { position: relative; height: 150px; background: radial-gradient(130% 130% at 72% 24%, var(--surface-3) 0%, var(--surface) 60%); }
.lp-pimg.v3 { background: radial-gradient(120% 120% at 24% 78%, var(--surface-3) 0%, var(--surface) 60%); }

/* Photos de prises (cartes démo). Le ::before = la photo ; si le fichier n'existe pas encore, il est transparent et le fond dégradé de la carte reste visible (repli gracieux). Landing SOMBRE FIXE → voiles rgba sombres en dur. */
.lp-pimg::before, .lp-fphoto::before { content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0; }
.lp-pimg.v2::before { background-image:url('/brand/lp-catch-sandre.jpg'); }
.lp-pimg.v3::before { background-image:url('/brand/lp-catch-bar.jpg'); }
.lp-fphoto::before  { background-image:url('/brand/lp-catch-brochet.jpg'); z-index:1; } /* au-dessus du poisson SVG de repli */
.lp-pimg::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,32,26,.06) 30%, rgba(7,32,26,.42) 62%, rgba(7,32,26,.8) 100%); }
.lp-pimg .lp-tag, .lp-pimg .lp-pcap, .lp-pimg .lp-badge-rec { z-index:2; }
.lp-pcap { text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.55); color:#fff; }
/* Carte hero */
.lp-fphoto-fish { z-index:0; } /* repli SOUS la photo */
.lp-fphoto .lp-badge-rec, .lp-fphoto .lp-fcap { z-index:3; }
.lp-tag { position: absolute; left: 12px; top: 11px; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--brand-wash); color: var(--brand); border: 1px solid var(--brand-line); font-size: 11.5px; font-weight: 700; }
.lp-pcap { position: absolute; left: 13px; bottom: 11px; font-family: var(--font-title); font-weight: 900; font-size: 19px; color: #fff; letter-spacing: -.01em; }
.lp-pbody { padding: 12px 14px 14px; display: flex; align-items: center; justify-content: space-between; }
.lp-pmeta { font-size: 12px; color: var(--text-3); }
.lp-pact { display: flex; gap: 14px; color: var(--text-2); font-size: 12.5px; font-weight: 700; }

/* RÉASSURANCE */
.lp-safe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.lp-s.lp-glass { display: flex; align-items: flex-start; gap: 13px; padding: 16px; }
.lp-ssi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-wash); border: 1px solid var(--brand-line); color: var(--brand); }
.lp-ssi svg { width: 20px; height: 20px; }
.lp-safe h3 { font-size: 14.5px; }
.lp-safe p { color: var(--text-2); font-size: 12.5px; line-height: 1.55; margin-top: 5px; }

/* CTA FINAL + INSTALL */
.lp-final { position: relative; overflow: hidden; margin-top: 54px; text-align: center; padding: 40px 24px 36px; border-radius: var(--radius-xl); background: radial-gradient(140% 130% at 100% 0%, var(--brand-wash), transparent 55%), radial-gradient(120% 130% at 0% 100%, var(--glacier-wash), transparent 50%), var(--surface); border: 1px solid var(--glass-border); box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-lg); }
/* Fond photo (pêcheur en bord de mer) TRÈS assombri : ambiance premium, texte + boutons lisibles. */
.lp-final-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.lp-final::before { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(7,32,26,.82) 0%, rgba(7,32,26,.8) 42%, rgba(7,32,26,.9) 100%), radial-gradient(120% 130% at 0% 100%, rgba(90,209,224,.18), transparent 50%); }
.lp-final > *:not(.lp-final-bg) { position: relative; z-index: 1; }
.lp-final h2 { font-size: clamp(25px, 4vw, 34px); text-shadow: 0 2px 16px rgba(7,32,26,.6); }
.lp-final p { color: var(--text); font-size: 14.5px; margin: 11px auto 0; max-width: 46ch; text-shadow: 0 1px 10px rgba(7,32,26,.7); }
.lp-cbtn { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-cbtn .lp-btn { min-width: 280px; }
.lp-install { margin-top: 22px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; text-align: left; }
.lp-il { display: flex; align-items: flex-start; gap: 13px; }
.lp-install h3 { font-size: 15px; }
.lp-install p { color: var(--text-2); font-size: 12.5px; line-height: 1.5; margin-top: 5px; }

/* FAQ — accordéon <details>/<summary> natif (le texte des réponses reste dans le DOM même fermé → SEO ok) */
.lp-faq { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.lp-qa { padding: 0; overflow: hidden; }
.lp-qa > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 19px; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.lp-qa > summary::-webkit-details-marker { display: none; }
.lp-qa > summary h3 { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.lp-qa > summary:hover { background: var(--surface-2); }
.lp-qa > summary:focus-visible { outline: none; box-shadow: var(--focus-ring) inset; }
.lp-qa-chev { flex: none; width: 18px; height: 18px; color: var(--text-3); transition: transform .22s ease, color .15s; }
.lp-qa[open] > summary { background: var(--surface-2); }
.lp-qa[open] > summary .lp-qa-chev { transform: rotate(180deg); color: var(--brand); }
.lp-qa-a { padding: 0 19px 17px; }
.lp-qa-a p { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }

/* FOOTER */
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--glass-border); }
.lp-fbrand { display: flex; align-items: center; gap: 10px; }
.lp-copy { color: var(--text-3); font-size: 12px; margin-left: 6px; }
.lp-flinks { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-flinks a { color: var(--text-3); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: color .15s; }
.lp-flinks a:hover { color: var(--text-2); }

@media (max-width: 760px) {
  .lp-wrap { padding: 26px 16px 32px; }
  .lp-head { padding: 12px 16px; }
  .lp-brand-name { font-size: 16px; }
  .lp-head-right { gap: 9px; }
  .lp-head .lp-btn-sm { padding: 0 12px; gap: 6px; }
  .lp-txt-full { display: none; }
  .lp-hero { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "trust" "cta"; gap: 10px; }
  .lp-trust { margin-top: 14px; }
  /* Le visuel flottant a besoin d'un peu d'air sous le contenu ; on borne aussi les débordements latéraux. */
  .lp-stage { min-height: 440px; margin-top: 8px; overflow: visible; }
  .lp-fl-map { left: 0; }
  .lp-fl-rec { left: 0; }
  .lp-fl-wx { right: 0; }
  .lp-sub { max-width: none; }
  .lp-trust { grid-template-columns: 1fr; gap: 10px; }
  .lp-t { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; padding: 16px 18px; }
  .lp-t .v { margin: 0; font-size: 26px; } .lp-t .l { margin: 0; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-pillars { grid-template-columns: 1fr; }
  .lp-pill-card.wide { grid-column: auto; grid-template-columns: 1fr; gap: 18px; }
  .lp-feed { grid-template-columns: 1fr; }
  .lp-safe { grid-template-columns: 1fr; }
  .lp-install { grid-template-columns: 1fr; }
  .lp-cbtn .lp-btn { min-width: 0; width: 100%; }
}
/* Très petits écrans : le trio phone + 2 cartes larges ne tient plus côte à côte → on resserre
   le téléphone, on réduit les cartes et on les recolle aux bords pour éviter tout débordement. */
@media (max-width: 400px) {
  .lp-stage { min-height: 420px; }
  .lp-phone { width: 208px; transform: rotate(-5deg); }
  .lp-fl-map { width: 132px; top: 8px; left: -4px; padding: 9px 10px; }
  .lp-fl-rec { width: 154px; bottom: 30px; left: -6px; padding: 9px 10px; }
  .lp-fl-wx { width: 128px; top: 22px; right: -4px; padding: 9px 10px; }
  .lp-fl-v { font-size: 15px; }
  .lp-minimap.sm { height: 60px; }
}

/* ===== Modération : menu ⋯ prise, feuille d'actions, signalement commentaire, comptes bloqués ===== */
.cp-menu { margin-left: auto; background: none; border: 0; color: var(--text-2); font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.cp-menu:hover { color: var(--text); background: var(--surface-2); }
/* ===== Icônes Phosphor + post façon réseau social (feed) ===== */
.phi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
/* En-tête posé sur le haut de la photo : avatar + pseudo + Suivre */
.cp-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: linear-gradient(to bottom, rgba(4,18,24,.62), rgba(4,18,24,0)); }
.cp-av { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 1.5px solid rgba(255,255,255,.65); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-av-ph { width: 18px; height: 18px; color: rgba(255,255,255,.85); }
.cp-name { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: #fff; font-weight: 700; font-size: 13.5px; text-shadow: 0 1px 4px rgba(0,0,0,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cp-name-static { cursor: default; }
.cp-demo-i { flex: none; background: rgba(255,255,255,.92); color: #0e2a24; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 6px; border-radius: 99px; }
.cp-follow { flex: none; display: inline-flex; align-items: center; gap: 3px; background: var(--brand); color: #fff; border: 0; border-radius: 99px; padding: 5px 11px 5px 8px; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.28); transition: transform .12s var(--ease-out, ease); }
.cp-follow .phi { width: 13px; height: 13px; }
.cp-follow.on { background: rgba(255,255,255,.18); }
.cp-follow:active { transform: scale(.95); }
/* like / commentaire : plus gros, avec icônes */
.cp-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.cp-actions .cp-like, .cp-actions .cp-comment { margin: 0; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; font-variant-numeric: tabular-nums; line-height: 1; }
.cp-actions .cp-like .phi, .cp-actions .cp-comment .phi { width: 23px; height: 23px; }
.cp-actions .cp-like:hover, .cp-actions .cp-comment:hover { background: var(--surface-2); color: var(--text); }
.cp-actions .cp-like.on { color: #e0245e; }
.cp-actions .cp-menu { margin: 0; padding: 6px 6px; font-size: 0; color: var(--text-3); }
.cp-actions .cp-menu .phi { width: 20px; height: 20px; }
/* compteur photos : passe en bas (l'en-tête occupe le haut) */
.cp-count { top: auto; bottom: 9px; }
/* Coup de projecteur éditorial (admin) : chip ★ dans l'en-tête + liseré doré discret */
.cp-feat-i { flex: none; display: inline-flex; align-items: center; gap: 3px; background: rgba(244,196,48,.95); color: #3d2e00; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 99px; }
.cp-feat-i .phi { width: 11px; height: 11px; }
.catch-post.featured { border-color: rgba(244,196,48,.55); }
/* Mesures (taille · poids) : bas-GAUCHE, texte orange NU (pas de pastille), au-dessus du nom d'espèce.
   Lisibilité garantie sur toute photo : double text-shadow + le dégradé bas du média. */
.cp-measimg { position: absolute; left: 11px; bottom: 37px; z-index: 2; color: var(--accent, #ff8a3d); font-size: 15.5px; font-weight: 900; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 2px 12px rgba(0,0,0,.55); font-variant-numeric: tabular-nums; }
/* compteur photos redondant avec les points (dots) → masqué dans le feed */
#comm-feed .cp-count { display: none; }
/* Aperçu du 1er commentaire (le clic sur le post ouvre les commentaires) */
.cp-fc { margin-top: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }
.cp-fc b { color: var(--text); font-weight: 700; }
.cp-fc-more { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); }
/* Skeletons de chargement (silhouettes de cartes) */
.cp-skel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.cp-skel-m { aspect-ratio: 4 / 3; background: var(--surface-2); position: relative; overflow: hidden; }
.cp-skel-b { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.cp-skel-l { height: 12px; border-radius: 6px; background: var(--surface-2); position: relative; overflow: hidden; width: 72%; }
.cp-skel-l.sm { width: 46%; height: 10px; }
.cp-skel-m::after, .cp-skel-l::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent); animation: skelShine 1.4s infinite; }
@keyframes skelShine { to { transform: translateX(100%); } }
/* Entrée en cascade des cartes du feed */
.catch-post.cp-in { animation: cpIn .5s var(--ease-out, cubic-bezier(.4,0,.2,1)) both; }
@keyframes cpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* Conditions COMPACTES (1 ligne) dans le feed — le détail vit sur la page du post */
.cond-mini { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.cond-mini b { font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cond-mini b small { font-size: 9px; color: var(--text-3); font-weight: 700; }
.cond-mini-t { overflow: hidden; text-overflow: ellipsis; }
/* Onglets + titre collants au scroll (on garde le contexte en descendant le fil) */
.comm-head { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Pastille « Nouveaux posts » */
.comm-new { position: sticky; top: 52px; z-index: 6; align-self: center; margin: 0 auto 10px; display: block; background: var(--brand); color: #fff; border: 0; border-radius: 99px; padding: 8px 16px; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); animation: cpIn .3s var(--ease-out, ease) both; }
/* Pop « ressort » du cœur quand on like */
.cp-actions .cp-like.on .phi { animation: likePop .38s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes likePop { 0% { transform: scale(.4); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* Rail : pêcheurs à suivre */
.crail-fol { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.crail-fol .lb-av { flex: 0 0 30px; width: 30px; height: 30px; }
.crail-fol-n { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.crail-fol .cp-follow { box-shadow: none; padding: 4px 10px 4px 7px; font-size: 11.5px; }
.crail-h-u { color: var(--brand) !important; }
/* États vides composés */
.feed-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 44px 20px; }
.feed-empty .fe-ic { width: 44px; height: 44px; color: var(--text-3); margin-bottom: 4px; }
.feed-empty h3 { margin: 0; font-family: var(--font-title); font-size: 18px; color: var(--text); }
.feed-empty p { margin: 0 0 10px; font-size: 13px; color: var(--text-2); max-width: 300px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .catch-post.cp-in { animation: none; } .cp-skel-m::after, .cp-skel-l::after { animation: none; } }
/* Feuille d'actions (réutilise .modal-card) */
.sheet-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.sheet-act { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 14.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sheet-act:hover { border-color: var(--border-strong); }
.sheet-act.on { color: var(--brand-dark); }
.sheet-act .phi { width: 18px; height: 18px; color: var(--brand); flex: none; }
.sheet-act:active { transform: scale(0.985); transition: transform .15s cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-act.danger { color: #e5484d; border-color: color-mix(in srgb, #e5484d 30%, transparent); }
.sheet-act.danger .phi { color: #e5484d; }
.sheet-act.danger:hover { border-color: color-mix(in srgb, #e5484d 55%, transparent); background: color-mix(in srgb, #e5484d 10%, var(--surface-2)); }
.sheet-empty { color: var(--text-2); font-size: 13px; padding: 8px 2px; }
/* Puce 🚩 signaler un commentaire */
.comm-report { background: none; border: 0; padding: 2px 4px; font-size: 12px; cursor: pointer; opacity: .55; -webkit-tap-highlight-color: transparent; }
.comm-report:hover { opacity: 1; }
/* Réglages : comptes bloqués */
.reg-blocks { display: flex; flex-direction: column; gap: 8px; }
.reg-blk-row { display: flex; align-items: center; gap: 10px; }
.reg-blk-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 16px; }
.reg-blk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.reg-blk-un { padding: 6px 12px; font-size: 13px; flex: 0 0 auto; }
/* Admin : cartes de signalement de contenu (badges inline, aperçu) */
.rp-card .st-modinfo b { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-card .mod-badge { position: static; top: auto; left: auto; }
.rp-card .rp-prev { color: var(--text); font-size: 13px; margin-top: 3px; word-break: break-word; }
.rp-card .rp-note { color: var(--text-2); font-style: italic; margin-top: 2px; word-break: break-word; }
@media (max-width: 560px) {
  .rp-card { flex-direction: column; align-items: stretch; }
  .rp-card .st-modbtns { flex-wrap: wrap; }
}

/* ============================================================================
   DA UPGRADE · Pack A — motion & polish (04/07/2026)
   Règle : transform/opacity, coupé par prefers-reduced-motion.
   ============================================================================ */

/* 1.3 — Accessibilité : couper les animations décoratives */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 9.2 — Chiffres tabulaires : plus de saut de largeur sur les compteurs/stats */
.bite-score, .bite-day b, .c-price, .g-price, .fs-chip, .pf-xprow, .cn-kpi-v,
.st-num, .conf-badge, .mer-chips .fs-chip, .cp-measure, .rev-avg { font-variant-numeric: tabular-nums; }

/* 2.2 — Nav basse : icône active en pastille + petit lift (feel natif) */
.bnav .bn-ic { transition: transform var(--dur-2) var(--ease-spring), color var(--dur-1) var(--ease-out); }
.bnav svg.bn-ic, .bnav .bn-ic svg { width: 23px; height: 23px; display: block; }
.bnav.active .bn-ic { transform: translateY(-1px) scale(1.04); }
.bnav .bn-l { transition: color var(--dur-1) var(--ease-out); letter-spacing: .01em; }
.bnav.active { color: var(--brand-dark); }
.bnav.active .bn-l { font-weight: 800; }
/* Indicateur actif : encadré arrondi qui englobe l'ICÔNE ET le TEXTE (pas seulement l'icône) */
.bnav::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 50%; width: calc(100% - 8px); border-radius: 14px; background: var(--brand-wash); box-shadow: inset 0 0 0 1px var(--brand-line); transform: translateX(-50%) scale(.82); opacity: 0; transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-1) var(--ease-out); pointer-events: none; }
.bnav { position: relative; }
.bnav.active::before { transform: translateX(-50%) scale(1); opacity: 1; }
/* topnav (desktop) : icône SVG alignée */
#topnav .tab svg { width: 18px; height: 18px; }

/* 2.3 — FAB (+) morphe en × à l'ouverture du menu */
#fab-btn .ic { transition: transform var(--dur-2) var(--ease-spring); }
#fab-btn.open .ic { transform: rotate(135deg); }

/* 4.3 — Jauge d'activité des poissons : les barres 7 jours poussent (hauteur animée depuis 0) */
.bite-bar > div { transition: height var(--dur-3) var(--ease-out); }
.bite-anim .bite-bar > div { height: 0 !important; }

/* 6.1 — Barre XP : remplissage animé + reflet qui balaie */
.pf-xpbar i, .up-xpbar i, .tr-xpbar i, .hm-xpbar i { transition: width var(--dur-3) var(--ease-out); position: relative; overflow: hidden; }
.pf-xpbar i::after, .tr-xpbar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: xpShine 5.5s ease-in-out 1.2s infinite; }
@keyframes xpShine { 0%, 62% { transform: translateX(-120%); } 78%, 100% { transform: translateX(120%); } }

/* 1.4 — Stagger utilitaire : items d'une liste en cascade */
.stagger-in > * { animation: staggerUp var(--dur-3) var(--ease-out) both; }
.stagger-in > *:nth-child(1){animation-delay:0ms}.stagger-in > *:nth-child(2){animation-delay:35ms}.stagger-in > *:nth-child(3){animation-delay:70ms}.stagger-in > *:nth-child(4){animation-delay:105ms}.stagger-in > *:nth-child(5){animation-delay:140ms}.stagger-in > *:nth-child(6){animation-delay:175ms}.stagger-in > *:nth-child(7){animation-delay:210ms}.stagger-in > *:nth-child(8){animation-delay:245ms}
@keyframes staggerUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


/* ============================================================================
   DA UPGRADE · Pack B — signature (04/07/2026)
   ============================================================================ */

/* 7.3 / 5.3 — Bouchon de pêche (bobber) : loader + pull-to-refresh */
.fish-loader { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 12px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.fl-stage { position: relative; width: 60px; height: 52px; }
.fl-bobber { position: absolute; left: 50%; top: 0; width: 24px; margin-left: -12px; transform-origin: 50% 90%; animation: bobFloat 1.9s ease-in-out infinite; }
.fl-water { position: absolute; left: 50%; bottom: 4px; width: 46px; height: 11px; margin-left: -23px; border: 2px solid var(--brand-line); border-radius: 50%; border-bottom-color: transparent; animation: bobRipple 1.9s ease-in-out infinite; }
@keyframes bobFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes bobRipple { 0%, 100% { transform: scaleX(.75); opacity: .25; } 50% { transform: scaleX(1.15); opacity: .55; } }

/* PTR : le bouchon flotte pendant le tirage, puis PLONGE au relâchement */
.comm-ptr .fl-bobber { width: 22px; position: static; margin: 0; }
.comm-ptr.ready .fl-bobber { animation: bobFloat 1s ease-in-out infinite; }
.comm-ptr.spin .fl-bobber { animation: bobberPlunge .66s var(--ease-out); }
@keyframes bobberPlunge { 0% { transform: translateY(0) scale(1); } 32% { transform: translateY(11px) scale(.9, 1.08); } 60% { transform: translateY(2px); } 100% { transform: translateY(0) scale(1); } }

/* 4.6 — Reveal des photos : flou → net (masque le pop au chargement réseau) */
.cp-media img, .cp-slide img, .gallery img:not(.aerial img), .rev-ph img { animation: mediaReveal .55s var(--ease-out) both; }
@keyframes mediaReveal { from { opacity: 0; filter: blur(10px); transform: scale(1.015); } to { opacity: 1; filter: blur(0); transform: none; } }

/* 8.2 — Caustiques : lumière d'eau qui ondule lentement en tête de fiche */
.fs-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(60% 40% at 25% 20%, rgba(120,230,255,.5), transparent 60%), radial-gradient(50% 45% at 80% 75%, rgba(31,211,154,.45), transparent 60%);
  animation: caustics 14s ease-in-out infinite alternate; }
@keyframes caustics { 0% { transform: translate(0, 0) scale(1); opacity: .55; } 100% { transform: translate(-16px, 12px) scale(1.12); opacity: .9; } }

/* 1.2 — Transitions de vues : entrée en fondu + léger rise (hors carte) */
.view-enter { animation: viewIn var(--dur-2) var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Photo d'un post (page /prise) : zoomable → loupe en haut-gauche (zone libre) */
.cp-zoomable { cursor: zoom-in; }
.cp-zoomable::after { content: "🔍"; position: absolute; top: 9px; left: 9px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; font-size: 13px; background: rgba(8,30,22,.55); border-radius: 50%; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; opacity: .92; }

/* Admin · ligne de tri des posts */
.mod-sort { align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); flex-wrap: wrap; }

/* ============================================================================
   Dashboard admin « à la Shopify » (04/07/2026)
   ============================================================================ */
.sh-vs { margin-left: auto; font-size: 11.5px; color: var(--text-2); align-self: center; }
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sh-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px 8px; }
.sh-kpi-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px; color: var(--text-2); }
.sh-kpi-row { display: flex; align-items: baseline; gap: 8px; margin: 3px 0 5px; }
.sh-kpi-v { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }
.sh-delta { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.sh-delta.up { color: #12b886; background: var(--brand-wash); }
.sh-delta.down { color: #e5484d; background: rgba(229,72,77,.13); }
.sh-delta.flat { color: var(--text-2); background: var(--surface-2); }
.sh-spark { display: block; width: 100%; height: 26px; }
/* courbe principale */
.sh-chart { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "y plot" ". x" ". legend"; margin: 4px 0 2px; }
.sh-ylab { grid-area: y; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 0 8px 0 0; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sh-plot { grid-area: plot; position: relative; height: 170px; touch-action: pan-y; }
.sh-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sh-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.sh-grid-base { stroke-dasharray: none; stroke: var(--border-strong); }
.sh-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-3); opacity: .55; pointer-events: none; }
.sh-tip { position: absolute; top: 6px; transform: translateX(-50%); background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-2); pointer-events: none; z-index: 3; white-space: nowrap; }
.sh-tip b { color: var(--text); font-variant-numeric: tabular-nums; }
.sh-tip span { display: flex; align-items: center; gap: 5px; }
.sh-tip i, .sh-legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; flex: none; }
.sh-xlab { grid-area: x; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); padding-top: 4px; }
.sh-legend { grid-area: legend; display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); padding-top: 6px; }
.sh-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* Admin : éléments cliquables vers les fiches (audit admin 04/07) */
.adm-link { cursor: pointer; }
.adm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mod-media.adm-link:hover { opacity: .88; }

/* Éditeur admin : photos en miniatures avec ✕ */
.ae-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.ae-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.ae-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-ph.bad { outline: 2px solid #e5484d; }
.ae-ph.bad img { opacity: .25; }
.ae-ph-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(8,30,22,.72); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ae-ph-x:hover { background: #e5484d; }
.ae-ph-empty { grid-column: 1 / -1; padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 9px; }
/* .ae-addurl : définition unique plus haut (section photos) */

/* Pare-feu admin : mur pour les non-admins (aucun menu ni donnée) */
.adm-wall { max-width: 420px; margin: 12vh auto 0; text-align: center; padding: 32px 22px; }
.adm-wall-ic { font-size: 46px; margin-bottom: 8px; }
.adm-wall h2 { font-family: var(--font-title); font-size: 22px; font-weight: 900; margin: 0 0 8px; color: var(--text); }
.adm-wall p { font-size: 14px; color: var(--text-2); line-height: 1.5; margin: 0 0 20px; }
.adm-wall .adm-wall-back { max-width: 220px; margin: 0 auto; }

/* Admin : annonce (broadcast) */
.bc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.bc-count { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; margin: 4px 2px 0; }
.bc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bc-form { display: flex; flex-direction: column; }
.bc-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-2); margin: 14px 2px 5px; }
.bc-lbl .mut { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.bc-form textarea.adm-search { resize: vertical; line-height: 1.5; }
.bc-img-wrap { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); min-height: 120px; display: grid; place-items: center; }
.bc-img-wrap img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.bc-img-wrap.bc-empty { border-style: dashed; }
.bc-img-ph { color: var(--text-3); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 26px 0; }
.bc-img-ph .phi { width: 18px; height: 18px; }
.bc-img-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bc-upl { cursor: pointer; }
.bc-res { font-size: 12px; color: var(--text-2); }
.bc-send { margin-top: 18px; }
.bc-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 12px; }
.bc-preview { max-height: 60vh; overflow-y: auto; border-radius: var(--radius); }
/* La carte d'annonce (petite page + apercu admin) */
.ann-card { max-width: 620px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow, 0 8px 30px -12px rgba(0,0,0,.35)); }
.ann-hero { width: 100%; background: var(--surface-2); }
.ann-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.ann-body { padding: 20px 22px 24px; }
.ann-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); }
.ann-eyebrow .phi { width: 15px; height: 15px; }
.ann-title { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; font-size: clamp(22px, 5vw, 30px); line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 12px; color: var(--text); text-wrap: balance; }
.ann-text { font-size: 15.5px; line-height: 1.65; color: var(--text); word-break: break-word; }
.ann-date { font-size: 12.5px; color: var(--text-3); margin-top: 16px; }
.ann-cta { margin-top: 18px; }
/* Historique des annonces */
.bc-recent { display: flex; flex-direction: column; gap: 2px; }
.bcr-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.bcr-row:hover { background: var(--surface-2); }
.bcr-th { width: 44px; height: 44px; flex: none; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.bcr-th-ph { display: grid; place-items: center; color: var(--text-3); }
.bcr-th-ph .phi { width: 20px; height: 20px; }
.bcr-info { min-width: 0; }
.bcr-t { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcr-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 860px) {
  .bc-grid { grid-template-columns: 1fr; }
  .bc-side { position: static; }
}
/* Reglages e-mails (admin) */
.em-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-2); margin: 12px 2px 5px; }
.em-smtp-h { margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--border); font-weight: 700; color: var(--text); }
.em-opt { font-weight: 400; font-size: 12px; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.em-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.em-prev { margin: 14px 0 0; }
.em-prev-h { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin: 0 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-prev-frame { width: 100%; height: 380px; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: block; }
.em-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.em-nav-b { appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 13px; font: 600 13px/1 inherit; cursor: pointer; white-space: nowrap; }
.em-nav-b:active { transform: scale(.96); }
.nl-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.nl-photos:empty { display: none; }
.nl-thumb { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.nl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; line-height: 18px; font-size: 15px; padding: 0; }
.nl-add { display: inline-block; margin: 0 0 8px; }
.nl-actions { display: inline-flex; gap: 8px; }
/* Reglages : interrupteurs e-mails & notifications */
.reg-prefs { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px; }
.reg-tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; cursor: pointer; }
.reg-tog:last-child { border-bottom: none; }
.reg-tog input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; cursor: pointer; }
.reg-tog-sub { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; margin-top: 2px; }
/* Panneau « Personnaliser » du bandeau de consentement */
.consent-panel { width: 100%; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.consent-tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; cursor: pointer; }
.consent-tog span { font-size: 13.5px; } .consent-tog small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 1px; }
.consent-tog input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.consent-save { width: 100%; margin-top: 6px; }
/* Filtres du feed (espèce + proximité) */
.feed-filters { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.feed-chip { appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 9px 14px; font: 600 13.5px/1 inherit; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.feed-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.feed-chip .feed-chip-arr { opacity: .6; font-size: 11px; }
.feed-chip:disabled { opacity: .6; }
.feed-radius { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 4px 2px; }
.feed-radius-l { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.feed-radius input[type=range] { flex: 1; min-width: 0; accent-color: var(--brand); }
.feed-radius-v { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
/* Picker d'espèces du feed (modale) */
.fesp-search { margin: 0 0 8px; }
.fesp-list { max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }

/* Admin vague 3 : attestation preuve, barre modération post, note admin */
.att-proof-btn { margin-top: 6px; font-size: 12px; padding: 5px 10px; }
.att-proof { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
.att-cap { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border-radius: 8px; padding: 5px; }
.att-cap-ph { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; flex: none; font-size: 18px; }
.att-cap-ph img { width: 100%; height: 100%; object-fit: cover; }
.att-cap-b { display: flex; flex-direction: column; min-width: 0; }
.att-cap-b b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-cap-b span { font-size: 11px; color: var(--text-2); }
.cp-adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cp-adminbar .btn { flex: none; min-width: 0; min-height: 34px; padding: 6px 10px; font-size: 12.5px; }
.adm-note { background: var(--accent-wash); border-radius: 8px; padding: 7px 9px; }

/* Support utilisateur : 2 onglets (nouvelle demande / suivi) */
.sup-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.sup-tab { flex: 1; appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 8px; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.sup-tab.on { background: var(--brand); color: #fff; border-color: transparent; }
.sup-tab-n { background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; }
.sup-tab.on .sup-tab-n { background: rgba(255,255,255,.28); }

/* Badges « réponse support non lue » (guide l'utilisateur, en rouge) */
.notif-bell.has-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #e0245e; box-shadow: 0 0 0 2px var(--card); }
.drawer-badge { margin-left: auto; background: #e0245e; color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; }
/* pastille rouge « a traiter » sur les onglets admin (Spots/Signalements/Revendications/Support) */
.adm-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #e0245e; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; vertical-align: middle; }
.adm-tab.on .adm-tab-badge { background: #fff; color: var(--accent); }
.sup-tab-n.muted { background: var(--surface-3); color: var(--text-2); }
.sup-ticket.sup-unread { border-color: #e0245e; box-shadow: 0 0 0 1px #e0245e inset; }
.sup-ticket.sup-unread .sup-t-sub::after { content: "●"; color: #e0245e; font-size: 10px; margin-left: 6px; vertical-align: middle; }

/* ── Page Partenaires (affiliation) ─────────────────────────────────────────── */
.part-page { max-width: 720px; margin: 0 auto; padding: 14px 16px calc(90px + env(safe-area-inset-bottom)); }
.part-hero { text-align: center; padding: 14px 6px 20px; }
.part-hero-ic { font-size: 40px; line-height: 1; }
.part-hero-h { font-family: var(--font-title); font-size: 26px; margin: 8px 0; color: var(--text); }
.part-hero-p { color: var(--text-2); font-size: 15px; line-height: 1.55; max-width: 520px; margin: 0 auto; }
.part-hero-p b { color: var(--text); }
/* Bannières « à la une » */
.part-banners { display: grid; gap: 12px; margin: 6px 0 22px; }
.part-banner { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); text-decoration: none; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); background-size: cover; background-position: center; }
.part-banner-in { min-height: 132px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; padding: 16px; background: linear-gradient(180deg, rgba(4,18,12,0) 25%, rgba(4,18,12,.8) 100%); }
.part-banner-name { font-family: var(--font-title); font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.part-banner-tag { color: rgba(255,255,255,.9); font-size: 13px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
/* Filtres par type de pêche */
.part-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.part-filters::-webkit-scrollbar { display: none; }
.part-chip { flex: 0 0 auto; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.part-chip.on { background: var(--brand-wash); color: var(--brand-strong); border-color: var(--brand-line); }
/* Grille de cartes partenaires */
.part-grid { display: grid; gap: 12px; }
.part-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; text-decoration: none; box-shadow: var(--shadow); transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1); }
.part-card:hover { transform: translateY(-2px); border-color: var(--brand-line); }
.part-logo { width: 58px; height: 58px; border-radius: 14px; object-fit: contain; background: #fff; flex: 0 0 auto; }
.part-logo-ph { display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 800; font-size: 24px; color: var(--brand-strong); background: var(--brand-wash); }
.part-body { flex: 1; min-width: 0; }
.part-name { font-weight: 800; color: var(--text); font-size: 16px; display: flex; align-items: center; gap: 6px; }
.part-verif { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; background: var(--brand); color: #04120c; border-radius: 50%; font-size: 11px; font-weight: 900; flex: 0 0 auto; }
.part-tagline { color: var(--text-2); font-size: 13px; margin-top: 3px; line-height: 1.4; }
.part-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.part-tag { background: var(--surface-2); color: var(--text-3); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.part-promo { margin-top: 8px; color: var(--gold-deep); font-size: 12px; }
.part-promo b { color: var(--text); }
.part-card .part-cta { flex: 0 0 auto; }
.part-cta { display: inline-block; background: var(--brand); color: #04120c; font-weight: 700; border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.part-cta-lg { padding: 9px 16px; font-size: 14px; }
/* États vides + « devenir partenaire » + mention légale */
.part-empty, .part-join { text-align: center; padding: 28px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.part-empty-ic { font-size: 40px; }
.part-empty h2, .part-join-h { font-family: var(--font-title); font-size: 20px; color: var(--text); margin: 10px 0 6px; }
.part-empty p, .part-join-p { color: var(--text-2); font-size: 14px; max-width: 460px; margin: 0 auto; line-height: 1.5; }
.part-empty-sm { color: var(--text-2); text-align: center; padding: 22px; }
.part-join { margin-top: 22px; background: var(--brand-wash); border-color: var(--brand-line); }
.part-join-btn { margin-top: 16px; }
.part-legal { color: var(--text-3); font-size: 11.5px; text-align: center; margin: 18px auto 0; max-width: 520px; line-height: 1.5; }
.part-legal a { color: var(--brand); }
/* Back-office partenaires */
.pa-count { font-size: 13px; color: var(--text-3); font-weight: 600; }
.pa-list { display: grid; gap: 10px; margin-top: 14px; }
.pa-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.pa-th { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #fff; flex: 0 0 auto; }
.pa-th-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--brand-strong); background: var(--brand-wash); }
.pa-info { flex: 1; min-width: 0; }
.pa-name { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.pa-badge { font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.pa-off { background: #e0245e22; color: #ff88a6; }
.pa-feat { background: var(--gold-wash); color: var(--gold-deep); }
.pa-ok { background: var(--brand-wash); color: var(--brand-strong); }
.pa-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pa-mini { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pa-mini:hover:not([disabled]) { border-color: var(--brand-line); }
.pa-mini[disabled] { opacity: .35; cursor: default; }
.pa-del:hover { border-color: #e0245e; color: #ff88a6; }
.pa-f { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pa-f .adm-search { margin-top: 5px; width: 100%; }
.pa-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pa-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pa-cat { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.pa-cat input { accent-color: var(--brand); }
.pa-wrap { margin: 6px 0; min-height: 0; }
.pa-prev { max-width: 80px; max-height: 80px; border-radius: 10px; border: 1px solid var(--border); background: #fff; object-fit: contain; }
.pa-prev-lg { max-width: 100%; max-height: 130px; border-radius: var(--radius); object-fit: cover; }
.pa-res { font-size: 12px; color: var(--brand-strong); margin-left: 8px; }
.pa-toggles { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pa-tog { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; cursor: pointer; }
.pa-tog input { width: 18px; height: 18px; accent-color: var(--brand); }
.pa-form-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 560px) { .pa-2col { grid-template-columns: 1fr; } .pa-row { flex-wrap: wrap; } .pa-acts { width: 100%; } }
/* Sous-onglets Partenaires | Demandes */
.pa-subtabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.pa-subtab { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 15px; font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.pa-subtab.on { background: var(--brand-wash); color: var(--brand-strong); border-color: var(--brand-line); }
.pa-subdot { background: #e0245e; color: #fff; border-radius: 9px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/* Cartes demande de partenariat */
.prq { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.prq-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.prq-head b { color: var(--text); font-size: 15px; }
.prq-date { margin-left: auto; color: var(--text-3); font-size: 12px; }
.prq-meta { color: var(--text-2); font-size: 13px; margin-top: 5px; }
.prq-meta a { color: var(--brand); }
.prq-msg { color: var(--text); font-size: 13.5px; margin-top: 8px; padding: 8px 10px; background: var(--surface-3); border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.prq .pa-acts { justify-content: flex-start; margin-top: 10px; }
/* Formulaire public "Devenir partenaire" */
.pr-title { font-family: var(--font-title); font-size: 21px; color: var(--text); margin: 2px 0 4px; }
.pr-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pr-form .adm-search { width: 100%; }
.pr-form select.adm-search { appearance: auto; }
.pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modal-x { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--text-2); font-size: 26px; line-height: 1; cursor: pointer; }
/* Segments & mailing cible (Comptes + composer) */
.nl-seg-count { color: var(--brand-strong); font-size: 12.5px; margin: 6px 0 2px; }
.seg-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.seg-item { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.seg-lbl { flex: 1; font-size: 13px; color: var(--text); font-weight: 600; min-width: 0; }
.seg-n { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--brand-strong); }
.seg-mail { flex: 0 0 auto; }
/* Panneau de ciblage des comptes (filtre -> liste cochable -> mail groupe) */
.tgt-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.tgt-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.tgt-f .adm-search { width: 100%; }
.tgt-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); align-self: end; padding-bottom: 9px; }
.tgt-chk input { width: 17px; height: 17px; accent-color: var(--brand); }
.tgt-actions { display: flex; gap: 10px; margin-top: 12px; }
.tgt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; flex-wrap: wrap; }
.tgt-all { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); cursor: pointer; }
.tgt-all input { width: 18px; height: 18px; accent-color: var(--brand); }
.tgt-list { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; }
.tgt-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.tgt-row:hover { background: var(--surface-2); }
.tgt-cb { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; }
.tgt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.tgt-dot.on { background: #37d67a; }
.tgt-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.tgt-email { color: var(--text-2); font-size: 12.5px; }
.tgt-stat { flex: 0 0 auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tgt-off { color: #ff88a6; }
.nl-sel-banner { background: var(--brand-wash); border: 1px solid var(--brand-line); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin: 4px 0 8px; }
.linklike { background: none; border: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* ── 💧 Niveau d'eau (fiche spot + bulletin météo) ─────────────────────────── */
.hyd-up { color: var(--glacier); }
.hyd-down { color: var(--accent-strong); }
.hyd-warn { background: var(--accent-wash); color: var(--accent-strong); border-color: var(--accent-line); }
.hyd-viz { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.hyd-spark { width: 100%; height: 34px; display: block; background: var(--glacier-wash); border-radius: 8px; }
.hyd-gauge { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hyd-g-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--glacier-wash), var(--glacier)); }
.hyd-g-bar i { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--glacier); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--glacier); }
.pe-hydro { margin: 10px 12px 0; }
.hyd-more { margin-top: 10px; width: 100%; }
.hyd-lock { margin-top: 10px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 9px; padding: 8px 10px; line-height: 1.45; }
.hyd-map-pin { font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); cursor: default; animation: hydpin .5s var(--ease-spring); }
@keyframes hydpin { from { transform: translateY(-8px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* ── Panneau riche Station hydro ──────────────────────────────────────────── */
.modal-card:has(.hydro-panel) { max-width: 560px; width: 100%; padding: 0; }
.hydro-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.hydp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hydp-title b { display: block; font-family: var(--font-title); font-size: 19px; color: var(--text); }
.hydp-title span { font-size: 13px; color: var(--text-2); }
.hydp-switch { position: relative; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.hydp-swlbl { flex: 0 0 auto; }
.hydp-stbtn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.hydp-stbtn.open { border-color: var(--glacier); }
.hydp-stcar { color: var(--text-3); }
.hydp-stmenu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 6; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 264px; overflow-y: auto; padding: 4px; }
.hydp-stopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.hydp-stopt:hover { background: var(--surface-2); }
.hydp-stopt.on { background: var(--glacier-wash); color: var(--glacier); font-weight: 700; }
.hydp-stopl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hydp-stkm { flex: 0 0 auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hydp-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; align-self: flex-start; }
.hydp-g { border: 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: var(--radius-pill); cursor: pointer; }
.hydp-g.on { background: var(--brand); color: #04120c; }
.hydp-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.hydp-r { flex: 1 0 auto; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hydp-r.on { background: var(--glacier-wash); color: var(--glacier); border-color: var(--glacier); }
.hydp-r.locked { opacity: .62; }
.hydp-gate { font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 9px; padding: 8px 10px; margin-top: 8px; line-height: 1.45; }
.hydp-custom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hydp-custom input { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.hydp-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hydp-val { font-family: var(--font-title); font-size: 30px; font-weight: 800; color: var(--text); }
.hydp-ctx { font-size: 12.5px; font-weight: 800; border-radius: var(--radius-pill); padding: 3px 12px; }
.hydp-ctx i { font-style: normal; font-weight: 600; opacity: .72; margin-left: 6px; font-size: 10.5px; }
.hyd-low { background: var(--accent-wash); color: var(--accent-strong); }
.hyd-mid { background: var(--brand-wash); color: var(--brand-strong); }
.hyd-high { background: var(--glacier-wash); color: var(--glacier); }
.hydp-lbl { font-size: 12px; color: var(--text-3); }
.hydp-chart { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; position: relative; min-height: 150px; }
.hydc { width: 100%; height: auto; display: block; touch-action: pan-y; }
.hydc-grid { stroke: var(--border); stroke-width: .5; }
.hydc-yl, .hydc-xl { fill: var(--text-3); font-size: 7px; font-family: var(--font-body); }
.hydc-cur { stroke: var(--text-3); stroke-width: .6; stroke-dasharray: 2 2; }
.hydc-ref { stroke: var(--accent-strong, #e0872b); stroke-width: .9; stroke-dasharray: 4 3; opacity: .85; }
.hydc-refl { fill: var(--accent-strong, #e0872b); font-size: 6.5px; font-weight: 700; font-family: var(--font-body); }
.hydc-dot { fill: var(--glacier); stroke: var(--card); stroke-width: 1.5; }
.hydc-tip { position: absolute; top: 6px; background: var(--ink); color: #fff; font-size: 11.5px; padding: 4px 8px; border-radius: 7px; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
:root[data-theme="light"] .hydc-tip { background: #0e2a24; }
.hydc-empty { color: var(--text-2); font-size: 13px; text-align: center; padding: 40px 16px; line-height: 1.5; }
.hydp-stats { display: flex; gap: 8px; }
.hydp-stat { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.hydp-stat span { display: block; font-size: 11px; color: var(--text-3); }
.hydp-stat b { font-size: 14px; color: var(--text); }
.hydp-stat-ref { background: var(--accent-wash); border-color: var(--accent-strong); }
.hydp-stat-ref b, .hydp-stat-ref span { color: var(--accent-strong); }
.hydp-foot { display: flex; flex-direction: column; gap: 8px; }
.hydp-foot .btn { width: 100%; }
.hydp-src { font-size: 11px; color: var(--text-3); text-align: center; }
/* Bandeau de redirection auto (« cette station n'émet pas → voici la voisine ») */
.hydp-redir { display: flex; align-items: center; gap: 7px; background: var(--glacier-wash); border: 1px solid var(--glacier); color: var(--text); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.35; }
.hydp-redir[hidden] { display: none; }
.hydp-redir .phi { width: 15px; height: 15px; flex: none; color: var(--glacier); }
.hydp-redir b { font-weight: 700; }
/* Panneau station en PAGE (pas pop-up) : pas de double marge, en-tête épuré */
.hydro-panel:has(.hydp-head-page) { padding: 0; }
.hydp-head-page { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
@media (max-width: 560px) { .modal-card:has(.hydro-panel) { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .hydp-val { font-size: 26px; } }
/* ── Page Niveaux d'eau (liste cours d'eau -> stations) ───────────────────── */
.hyl-page { max-width: 640px; margin: 0 auto; padding: 14px 16px calc(90px + env(safe-area-inset-bottom)); }
.hyl-mapbtn { width: 100%; background: var(--glacier-wash); border-color: var(--glacier); color: var(--glacier); font-weight: 700; }
.hyl-search { width: 100%; margin: 12px 0 6px; }
.hyl-count { font-size: 12.5px; color: var(--text-3); margin: 4px 2px 10px; }
.hyl-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; }
.hyl-azb { min-width: 26px; padding: 4px 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.hyl-azb:hover { border-color: var(--glacier); }
.hyl-azb.on { background: var(--glacier-wash); color: var(--glacier); border-color: var(--glacier); }
.hyl-azall { min-width: auto; }
.hyl-list { display: flex; flex-direction: column; gap: 6px; }
.hyl-row, .hyl-st { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; cursor: pointer; color: var(--text); }
.hyl-row:hover, .hyl-st:hover { border-color: var(--glacier); background: var(--surface-2); }
.hyl-name, .hyl-st-place { flex: 1; font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hyl-n { font-size: 12px; font-weight: 700; color: var(--glacier); background: var(--glacier-wash); border-radius: var(--radius-pill); padding: 2px 9px; }
.hyl-arr { color: var(--text-3); font-size: 18px; }
.hyl-st-val { font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hyl-st-dead { opacity: .58; }
.hyl-st-dead .hyl-st-val { color: var(--text-3); font-weight: 600; font-style: italic; }
.hyl-back2 { margin-bottom: 12px; }
.hyl-river { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 12px; }
.hyl-river b { font-family: var(--font-title); font-size: 21px; color: var(--text); }
.hyl-river span { font-size: 13px; color: var(--text-2); }
.hyl-note { font-size: 12px; color: var(--text-3); margin: 14px 2px 0; line-height: 1.5; }

/* ═══════════════ HUB « Menu » (onglet 1 de la barre du bas) ═══════════════
   Page d'accueil applicative à widgets — héro activité des poissons, collections à
   compteurs, outils de l'eau, matériel (marketplace), compte. 100 % tokens
   (Deep Water + Émeraude), transform/opacity only, cascade une fois/session. */
.hub-wrap { max-width: 560px; margin: 0 auto; padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
/* Teintes des squircles (une classe = une famille) */
.hub-sq { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--tint); background: linear-gradient(145deg, color-mix(in srgb, var(--tint) 22%, transparent), color-mix(in srgb, var(--tint) 9%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 26%, transparent); }
.hub-sq .phi { width: 21px; height: 21px; }
.hub-sq.t-brand { --tint: var(--brand); }
.hub-sq.t-gold { --tint: var(--gold); }
[data-theme="light"] .hub-sq.t-gold { --tint: var(--gold-deep); } /* jaune pur illisible sur blanc */
.hub-sq.t-accent { --tint: var(--accent); }
.hub-sq.t-glacier { --tint: var(--glacier); }
.hub-sq.t-mut { --tint: var(--text-2); }
/* Header : date éditoriale + salutation */
.hub-head { padding: 6px 2px 14px; }
.hub-date { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--text-2); }
.hub-hello { margin: 4px 0 0; font-family: var(--font-title); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); text-wrap: balance; }
.hub-hello span { color: var(--brand-strong); }
.hub-hello-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
/* Eyebrow signature (le tiret de la référence) */
.hub-eyebrow { display: flex; align-items: center; gap: 8px; margin: 26px 2px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); }
.hub-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); }
[data-theme="light"] .hub-eyebrow { color: #52695f; }
[data-theme="light"] .hub-eyebrow::before { background: var(--accent-deep); }
/* ── HÉRO activité des poissons ── */
.hub-hero { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 16px 14px; box-shadow: var(--shadow); }
.hub-hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 120%; background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--score-c) 16%, transparent), transparent 70%); pointer-events: none; animation: hubAmbient 16s ease-in-out infinite alternate; }
[data-theme="light"] .hub-hero::before { background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--score-c) 12%, transparent), transparent 70%); }
@keyframes hubAmbient { from { transform: translate3d(-4%, 0, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.07); } }
.hub-hero.is-bad { --score-c: var(--accent); }        /* sombre : accent plein (4.3:1) */
.hub-hero.is-mid { --score-c: var(--gold-deep); }
.hub-hero.is-good { --score-c: var(--brand); }
.hub-hero.is-top { --score-c: var(--brand-strong); }
.hub-hero { --score-c: var(--brand); } /* défaut avant le 1er paint */
[data-theme="light"] .hub-hero.is-bad { --score-c: var(--accent-deep); }
[data-theme="light"] .hub-hero.is-mid { --score-c: #b8860b; }
[data-theme="light"] .hub-hero.is-good { --score-c: #0c8a63; }
[data-theme="light"] .hub-hero.is-top { --score-c: #0c8a63; }
.hub-loc { position: relative; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.hub-loc .phi { width: 14px; height: 14px; color: var(--text-3); }
.hub-loc b { color: var(--text); font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-loc-d { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-2); flex: none; }
.hub-idx-lab { position: relative; margin-top: 12px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--text-2); }
.hub-score { position: relative; display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.hub-score span:first-child { font-family: var(--font-title); font-weight: 900; font-size: clamp(56px, 17vw, 72px); line-height: .95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--score-c); }
.hub-score small { font-size: 15px; font-weight: 700; color: var(--text-2); }
.hub-pill { font-size: 12px; font-weight: 800; color: var(--score-c); background: color-mix(in srgb, var(--score-c) 15%, transparent); border-radius: 999px; padding: 3px 10px; transform: translateY(-6px); }
[data-theme="light"] .hub-pill { color: color-mix(in srgb, var(--score-c) 72%, #06231c); background: color-mix(in srgb, var(--score-c) 13%, transparent); }
:root:not([data-theme="light"]) .hub-hero.is-bad .hub-pill { color: var(--accent-strong); }
@keyframes hubPop { from { transform: translateY(-6px) scale(.6); opacity: 0; } to { transform: translateY(-6px) scale(1); opacity: 1; } }
.hub-in .hub-pill { animation: hubPop .4s var(--ease-spring) .35s both; }
.hub-gauge { position: relative; height: 6px; border-radius: 999px; background: var(--surface-3); margin-top: 10px; }
.hub-gauge i { position: relative; display: block; height: 100%; width: 0; border-radius: 999px; background: var(--score-c); overflow: hidden; transition: width var(--dur-4) var(--ease-out); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--score-c) 55%, transparent); }
[data-theme="light"] .hub-gauge i { box-shadow: 0 0 10px -1px color-mix(in srgb, var(--score-c) 35%, transparent); }
.hub-gauge i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%); transform: translateX(-130%); animation: hubShine 4s var(--ease-out) infinite; }
@keyframes hubShine { 0% { transform: translateX(-130%); } 40%, 100% { transform: translateX(130%); } }
.hub-metrics { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 6px; border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.hub-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-m span { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.hub-m span .phi { width: 11px; height: 11px; flex: none; color: var(--text-3); }
.hub-u { font-size: 9px; font-weight: 700; color: var(--text-3); margin-left: 2px; }
.hub-m b { font-family: var(--font-title); font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-cta { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 14px; padding: 0 16px; border-radius: 14px; border: none; background: var(--text); color: var(--card); font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.hub-cta:active { transform: scale(.985); }
.hub-cta .hub-chev { color: inherit; }
.hub-chev { flex: none; display: inline-flex; color: var(--text-3); }
.hub-chev .phi { width: 15px; height: 15px; }
[data-theme="light"] .hub-chev { color: var(--text-2); }
.hub-shop-link .phi { width: 13px; height: 13px; margin-left: 2px; }
/* ── Bandeau progression (niveau + XP + défi + série) ── */
.hub-gami { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 7%, var(--card)), var(--card) 45%); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform var(--dur-1) var(--ease-out); }
.hub-gami:active { transform: scale(.985); }
.hub-lvl { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: var(--gold-deep); background: var(--gold-wash); box-shadow: inset 0 0 0 1.5px var(--gold-line); font-variant-numeric: tabular-nums; }
.hub-gami-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hub-rang { font-size: 13.5px; font-weight: 800; }
.hub-xpbar { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hub-xpbar i { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
[data-theme="light"] .hub-xpbar i { background: var(--gold-deep); }
[data-theme="light"] .hub-lvl { color: #8a5a00; }
.hub-defi { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-defi .phi { width: 12px; height: 12px; color: var(--gold-deep); flex: none; }
.hub-defi b { color: var(--text); font-variant-numeric: tabular-nums; }
.hub-gami-r { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hub-gami-r .phi { width: 14px; height: 14px; color: var(--accent); }
/* ── Actions rapides (3 colonnes) ── */
.hub-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hub-act { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 6px 11px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; font-family: inherit; color: var(--text); transition: transform var(--dur-1) var(--ease-out); }
.hub-act:active { transform: scale(.96); }
.hub-act b { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }
.hub-act .hub-sq { width: 36px; height: 36px; border-radius: 12px; }
.hub-act .hub-sq .phi { width: 19px; height: 19px; }
.hub-act-main { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card) 75%); border-color: var(--accent-line); }
.hub-act-main:active { transform: scale(.94); }
.hub-act-main .hub-sq { background: var(--accent); color: #fff; box-shadow: var(--glow-accent); }
/* ── Grille collections 2×2 ── */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 108px; padding: 13px; background: linear-gradient(165deg, color-mix(in srgb, var(--tint, transparent) 7%, var(--card)), var(--card) 62%); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.hub-card:active { transform: scale(.97); }
.hub-card > b { margin-top: 10px; font-size: 15px; font-weight: 800; }
.hub-count { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.35; }
.hub-count b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ht-brand { --tint: var(--brand); } .ht-gold { --tint: var(--gold); } .ht-accent { --tint: var(--accent); } .ht-glacier { --tint: var(--glacier); }
[data-theme="light"] .ht-gold { --tint: var(--gold-deep); }
[data-theme="light"] .hub-card { background: linear-gradient(165deg, color-mix(in srgb, var(--tint, transparent) 9%, var(--card)), var(--card) 62%); }
/* ── Rangées outils ── */
.hub-rows { display: flex; flex-direction: column; gap: 10px; }
.hub-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform var(--dur-1) var(--ease-out); }
.hub-row:active { transform: scale(.985); }
.hub-row .hub-sq { width: 38px; height: 38px; }
.hub-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-row-t b { font-size: 14.5px; font-weight: 800; }
.hub-row-t span { font-size: 12px; color: var(--text-2); line-height: 1.35; }
/* ── Matériel recommandé (emplacement marketplace) ── */
.hub-shop { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 15px 14px; }
.hub-shop::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--brand-wash), transparent 70%); opacity: .5; pointer-events: none; }
.hub-shop-ghosts { position: relative; display: flex; gap: 8px; margin-bottom: 12px; }
.hub-shop-ghosts span { width: 58px; height: 58px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; }
.hub-shop-ghosts .phi { width: 22px; height: 22px; color: var(--text-3); opacity: .5; }
.hub-shop-t { position: relative; display: block; font-size: 15px; font-weight: 800; }
.hub-shop-p { position: relative; margin: 5px 0 0; font-size: 12.5px; font-weight: 550; color: var(--text-2); line-height: 1.5; }
.hub-shop-cta { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.hub-shop-link { display: inline-flex; align-items: center; min-height: 44px; background: none; border: none; padding: 0 4px; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--brand-strong); cursor: pointer; }
[data-theme="light"] .hub-shop-link { color: #0c8a63; }
.hub-shop-chip { display: inline-flex; align-items: center; min-height: 40px; font-size: 12.5px; font-weight: 700; color: var(--text-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: transform var(--dur-1) var(--ease-out); }
.hub-shop-chip:active { transform: scale(.96); }
/* ── Groupe compte (façon réglages iOS) ── */
.hub-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hub-g-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px; background: none; border: none; border-top: 1px solid var(--border); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: background var(--dur-1) ease; }
.hub-g-row:first-child { border-top: none; }
.hub-g-row:active { background: var(--surface-2); }
.hub-g-row .hub-sq { width: 32px; height: 32px; border-radius: 50%; }
.hub-g-row .hub-sq .phi { width: 17px; height: 17px; }
.hub-g-row > b { flex: 1; font-size: 14px; font-weight: 700; }
/* Switch mode nuit — le seul rebond de la page */
.hub-sw { flex: none; width: 46px; height: 27px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background var(--dur-2) ease; }
.hub-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.12); box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-2) var(--ease-spring); }
[data-theme="light"] .hub-sw { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.hub-sw.on { background: var(--brand); }
.hub-sw.on::after { transform: translateX(19px); }
/* ── Cascade d'entrée (une fois par session, plafonnée au fold) ── */
@keyframes hubUp { from { opacity: 0; transform: translateY(var(--hub-dy, 10px)); } to { opacity: 1; transform: none; } }
.hub-in > .app-footer { --i: 7; }
.hub-in > .hub-hero { animation-duration: .55s; --hub-dy: 14px; }
.hub-in .hub-xpbar i { transform-origin: left; animation: hubBarIn var(--dur-4) var(--ease-out) 320ms both; }
@keyframes hubBarIn { from { transform: scaleX(0); } }
.hub-in > * { animation: hubUp .45s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 7) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  .hub-in > *, .hub-hero::before, .hub-gauge i::after, .hub-wx-fx, .hub-in .hub-pill, .hub-in .hub-xpbar i, .hub-me-halo { animation: none; }
  .hub-gauge i, .hub-sw, .hub-sw::after { transition: none; }
  .hub-me-halo { opacity: .5; }
  .hub-geo.is-loading .phi { animation: none; opacity: .5; }
}
/* Point rouge « à lire/traiter » sur l'onglet Menu (remplace celui du ☰ retiré) */
.bnav.has-dot, #topnav .tab.has-dot { position: relative; }
.bnav.has-dot::after, #topnav .tab.has-dot::after { content: ""; position: absolute; top: 5px; right: calc(50% - 17px); width: 8px; height: 8px; border-radius: 50%; background: #e0245e; }
#topnav .tab.has-dot::after { top: 4px; right: 6px; }
/* Perf bas de page */
.hub-late { content-visibility: auto; contain-intrinsic-size: 1px 300px; }

/* ── Héro v2 : bouton géoloc + bandeau 7 jours ── */
.hub-geo { flex: none; width: 30px; height: 30px; margin-left: 2px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.hub-geo:active { transform: scale(.9); }
.hub-geo .phi { width: 14px; height: 14px; }
.hub-days { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.hub-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 5px; border-radius: 9px; font-size: 10px; font-weight: 800; color: var(--text-2); }
.hub-day.on { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.hub-day i { display: block; width: 100%; max-width: 26px; height: 18px; border-radius: 6px; background: linear-gradient(to top, var(--dc, var(--surface-3)) calc(var(--h, 0) * 100%), var(--surface-3) calc(var(--h, 0) * 100%)); }
.hub-day i.is-bad { --dc: var(--accent); } .hub-day i.is-mid { --dc: var(--gold-deep); } .hub-day i.is-good { --dc: var(--brand); } .hub-day i.is-top { --dc: var(--brand-strong); }
[data-theme="light"] .hub-day i.is-mid { --dc: #b8860b; }
[data-theme="light"] .hub-day i.is-good, [data-theme="light"] .hub-day i.is-top { --dc: #0c8a63; }
/* ── Aperçu carte + chips de couches ── */
.hub-mapcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 8px 4px; }
.hub-map-holder { position: relative; height: 180px; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.hub-map-canvas { width: 100%; height: 100%; }
.hub-map-open { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border: none; border-radius: 999px; background: var(--text); color: var(--card); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform var(--dur-1) var(--ease-out); }
.hub-map-open:active { transform: scale(.95); }
.hub-map-open .phi { width: 15px; height: 15px; }
/* Marqueur central « moi » : photo de profil posée sur ma position, halo qui pulse + points de spots autour */
.hub-me-pin { position: relative; width: 46px; height: 46px; display: grid; place-items: center; pointer-events: none; }
.hub-me-pin img, .hub-me-ph { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.42); background: var(--surface-2); }
.hub-me-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-strong); }
.hub-me-ph .phi { width: 22px; height: 22px; }
.hub-me-halo { position: absolute; z-index: 1; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%); animation: hubMeHalo 2.4s ease-out infinite; }
.hub-geo.is-loading .phi { animation: hubGeoPulse .9s ease-in-out infinite; }
@keyframes hubGeoPulse { 50% { opacity: .25; } }
@keyframes hubMeHalo { 0% { transform: scale(.7); opacity: .85; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }

/* ── Audit esthétique v328 : profondeur, typographie, tactile, hover desktop, météo incarnée ── */
/* Profondeur teintée (thème clair = la carte blanche plate de la capture ; sombre = respiration brand) */
[data-theme="light"] .hub-hero { box-shadow: 0 1px 2px rgba(14,42,36,.05), 0 10px 28px -12px rgba(12,138,99,.20), 0 22px 44px -24px rgba(14,42,36,.18); border-color: rgba(12,138,99,.16); }
:root:not([data-theme="light"]) .hub-hero { box-shadow: var(--shadow), 0 0 42px -18px rgba(31,211,154,.28); }
.hub-hero.is-top { border-color: color-mix(in srgb, var(--score-c) 35%, var(--border)); }
[data-theme="light"] :is(.hub-gami, .hub-card, .hub-row, .hub-act, .hub-shop, .hub-mapcard, .hub-group) { box-shadow: 0 1px 2px rgba(14,42,36,.04), 0 6px 18px -10px rgba(14,42,36,.10); }
/* Gros score : dégradé clippé + lueur — SOMBRE uniquement (en clair l'aplat AA prime) */
@supports (-webkit-background-clip: text) {
  :root:not([data-theme="light"]) .hub-score span:first-child { background: linear-gradient(180deg, color-mix(in srgb, var(--score-c) 72%, #ffffff) 0%, var(--score-c) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--score-c) 30%, transparent)); }
}
/* Typo : Archivo sur les titres cliquables (3 tailles nettes : 11 eyebrow / 12 secondaire / 15 titre) */
.hub-card > b, .hub-row-t b, .hub-rang { font-family: var(--font-title); letter-spacing: -0.01em; }
.hub-row-t b, .hub-rang { font-size: 15px; }
/* Météo incarnée : watermark WMO flottant derrière le score (exception emoji météo) */
.hub-wx-fx { position: absolute; top: 40px; right: 10px; font-size: 60px; line-height: 1; opacity: 1; pointer-events: none; user-select: none; filter: drop-shadow(0 7px 15px rgba(6,20,16,.28)); animation: hubWxFloat 8s ease-in-out infinite; }
@keyframes hubWxFloat {
  0%   { transform: translate3d(0, 0, 0) rotate(-2deg); }
  25%  { transform: translate3d(-4px, -6px, 0) rotate(1.5deg); }
  50%  { transform: translate3d(2px, -9px, 0) rotate(2.5deg); }
  75%  { transform: translate3d(5px, -4px, 0) rotate(-1deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
}
/* Tactile : appui net (120ms), relâchement avec micro-rebond (220ms spring) */
.hub-cta, .hub-gami, .hub-act, .hub-card, .hub-row, .hub-g-row, .hub-geo, .hub-map-open, .hub-shop-chip, .hub-shop-link, .hub-map-holder { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* focus INSET → l'encadré reste entièrement dans la tuile, jamais rogné par un conteneur */
.hub-cta:focus-visible, .hub-gami:focus-visible, .hub-act:focus-visible, .hub-card:focus-visible, .hub-row:focus-visible, .hub-g-row:focus-visible, .hub-geo:focus-visible, .hub-map-open:focus-visible, .hub-shop-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hub-cta, .hub-gami, .hub-act, .hub-card, .hub-row, .hub-geo, .hub-map-open, .hub-shop-chip { transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-1) var(--ease-out); }
.hub-cta:active, .hub-gami:active, .hub-act:active, .hub-card:active, .hub-row:active, .hub-geo:active, .hub-map-open:active, .hub-shop-chip:active { transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
/* Hover desktop uniquement (gardé @media : plus de hover « collant » après le tap iOS) */
@media (hover: hover) and (pointer: fine) {
  .hub-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); transform: translateY(-2px); }
  .hub-row:hover, .hub-gami:hover, .hub-act:hover { transform: translateY(-1px); border-color: var(--border-strong); }
  .hub-cta:hover, .hub-map-open:hover { transform: translateY(-1px); }
  .hub-g-row:hover { background: var(--surface-2); }
  .hub-geo:hover, .hub-shop-chip:hover { border-color: var(--border-strong); color: var(--text); }
}

/* Flèches de défilement du carrousel « Pêcheurs à suivre » (desktop uniquement ; mobile = swipe doigt) */
.fsug-scroller { position: relative; }
.fsug-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.22); display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; line-height: 1; }
.fsug-arrow:active { transform: translateY(-50%) scale(.9); }
.fsug-prev { left: -2px; }
.fsug-next { right: 8px; }
@media (hover: hover) and (pointer: fine) { .fsug-scroller:hover .fsug-arrow { display: inline-flex; } }
.img-fail { display: inline-flex; align-items: center; justify-content: center; }

/* Carte interactive de placement du spot (widget du formulaire) — centre = emplacement */
.af-mapwrap { position: relative; margin: 10px 0 8px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.af-map { position: relative; width: 100%; height: 230px; }
.af-map #map { position: absolute; inset: 0; } /* la VRAIE carte remplit le cadre (embedMainMap) */
.af-place-hint { font-size: 12.5px; color: var(--text-2); line-height: 1.35; margin: 8px 2px 8px; text-align: center; }
.af-map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.af-map-hint { position: absolute; left: 8px; bottom: 8px; z-index: 3; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; pointer-events: none; }

/* Aperçus carte des pages outils (Marées / Niveaux d'eau / Profondeurs) */
.tool-mapcard { margin: 14px 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; }
.tool-map-holder { position: relative; height: 200px; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.tool-map-open { max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aperçu carte d'une station (page Niveaux d'eau) — point central marquant la station */
.hydp-mapcard { margin: 4px 0 12px; }
.hydp-map-dot { position: absolute; left: 50%; top: 50%; z-index: 2; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--glacier); border: 2.5px solid var(--card); box-shadow: 0 0 0 2px var(--glacier), 0 3px 10px rgba(0,0,0,.35); pointer-events: none; }
.hydp-map-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--glacier); opacity: .18; animation: hydDotPulse 2.4s ease-in-out infinite; }
@keyframes hydDotPulse { 0%, 100% { transform: scale(.6); opacity: .22; } 50% { transform: scale(1); opacity: .06; } }
@media (prefers-reduced-motion: reduce) { .hydp-map-dot::after { animation: none; } }
/* Case de consentement à l'inscription (mesure d'audience) */
.aum-consent { display: flex; align-items: flex-start; gap: 9px; margin: 2px 2px 10px; font-size: 12px; line-height: 1.4; color: var(--text-2); text-align: left; cursor: pointer; }
.aum-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); cursor: pointer; }
.aum-consent b { color: var(--text); font-weight: 700; }
.aum-consent a { color: var(--brand-strong); }
[data-theme="light"] .aum-consent a { color: var(--brand-dark); }
.aum-age { color: var(--text); margin-top: 4px; font-size: 12.5px; } /* attestation d'âge OBLIGATOIRE à l'inscription — plus visible que la case audience */
.aum-age b { color: var(--text); }

/* ===== P3 — Récap de la saison (gratuit) : entrée carnet + visionneuse ===== */
.cn-recap { width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px 16px; margin: 0 0 14px; cursor: pointer;
  border: 1px solid var(--brand-line, var(--border)); border-radius: var(--r-card, 16px); color: var(--text); font-family: inherit; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--card)), var(--card) 65%);
  transition: transform .14s ease, box-shadow .18s ease; }
.cn-recap:hover { box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.cn-recap:active { transform: scale(.99); }
.cn-recap-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--brand); }
.cn-recap-ic .phi { width: 22px; height: 22px; color: var(--on-brand); }
.cn-recap-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-recap-b b { font-size: 15.5px; font-weight: 900; }
.cn-recap-b span { font-size: 12px; color: var(--text-2); }
.cn-recap-arr .phi { width: 18px; height: 18px; color: var(--text-3); }
.rc-stage { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; }
/* la carte doit tenir ENTIÈREMENT dans le cadre : image en absolu, sinon elle déborde en hauteur */
.rc-frame { position: relative; flex: 1; min-width: 0; aspect-ratio: 1080 / 1920; max-height: 62vh; max-height: 62dvh; margin: 0 auto;
  border-radius: 18px; overflow: hidden; background: #04201a; }
.rc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rc-load { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px;
  font-size: 13px; font-weight: 700; color: rgba(226,255,247,.75); }
.rc-load[hidden] { display: none; }
.rc-nav { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); font-size: 21px; line-height: 1; cursor: pointer; padding: 0; }
.rc-nav:disabled { opacity: .3; cursor: default; }
.rc-nav:not(:disabled):hover { color: var(--brand-text, var(--brand)); border-color: var(--brand-line); }
.rc-dots { display: flex; justify-content: center; gap: 7px; margin: 2px 0 12px; }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--border); cursor: pointer; }
.rc-dot.on { background: var(--brand); transform: scale(1.25); }
.rc-dot-wait { opacity: .35; cursor: default; }
.rc-foot { margin-top: 0; }
.rc-free { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
@media (max-width: 640px) { .rc-nav { display: none; } } /* mobile : on glisse au doigt */

/* ===== P4 — Fishera+ : page de vente + surfaces ===== */
.plus-badge-lg { width: 30px; height: 30px; margin-right: 3px; box-shadow: 0 0 0 1px rgba(224,168,19,.4), 0 4px 14px -2px rgba(224,168,19,.7), inset 0 1px 0 rgba(255,255,255,.65); }
.plus-badge-lg .phi { width: 16px; height: 16px; }
.plus-hero { text-align: center; margin: 14px 0 12px; }
.plus-tag { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
.plus-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; }
.plus-price b { font-family: Archivo, inherit; font-size: 40px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.plus-price span { font-size: 15px; color: var(--text-2); font-weight: 700; }
.plus-price em { flex-basis: 100%; font-style: normal; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.plus-founder { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--gold) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--border));
  border-radius: 14px; padding: 11px 13px; margin: 4px 0 12px; }
.plus-founder .phi { width: 18px; height: 18px; flex: none; color: var(--gold-deep, var(--gold)); margin-top: 1px; }
.plus-perks { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 14px; }
.plus-perk { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--surface-2); border-radius: 13px; }
.plus-perk-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 18%, var(--card)); }
.plus-perk-ic .phi { width: 19px; height: 19px; color: var(--gold-deep); }
.plus-perk-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plus-perk-b b { font-size: 13.5px; font-weight: 800; }
.plus-perk-b span { font-size: 11.5px; color: var(--text-2); }
.plus-actions { flex-direction: column; gap: 8px; }
.plus-cta { width: 100%; justify-content: center; flex-wrap: wrap; gap: 0 6px; }
.plus-cta small { font-weight: 700; font-size: .82em; opacity: .68; }
/* Les 2 boutons de choix d'offre (annuel doré / mensuel secondaire) : prix en grand + détail dessous */
.plus-buy { width: 100%; flex-direction: column; gap: 2px; line-height: 1.2; padding: 9px 14px; }
.plus-buy b { font-size: 15px; font-weight: 800; }
.plus-buy small { font-size: 11.5px; font-weight: 600; opacity: .8; }
.plus-alt { text-align: center; font-size: 12.5px; color: var(--text-2); text-decoration: underline; background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px; }
.plus-reassure { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.4; margin: 10px 0 2px; }
.plus-reassure .phi { width: 15px; height: 15px; flex: none; color: var(--brand-text, var(--brand)); }
.plus-free-note { text-align: center; font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin-top: 12px; }
/* Panneau de carnet verrouillé (Analyses / Par espèce non-abonné) : teaser de vente centré */
.cn-pane-plus { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px; }
.cn-pane-plus-ic { position: relative; overflow: hidden; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffe987 0%, var(--gold) 45%, var(--gold-deep) 100%); box-shadow: 0 0 0 1px rgba(224,168,19,.4), 0 8px 24px -6px rgba(224,168,19,.75), inset 0 1px 0 rgba(255,255,255,.6); }
.cn-pane-plus-ic .phi { position: relative; z-index: 1; width: 28px; height: 28px; color: #3a2e00; }
.cn-pane-plus-ic::after { content: ""; position: absolute; top: -40%; left: 0; width: 40%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: translateX(-220%) rotate(20deg); pointer-events: none; animation: plusShine 5s ease-in-out infinite; }
.cn-pane-plus b { font-size: 16px; font-weight: 800; color: var(--text); }
.cn-pane-plus-d { font-size: 13px; line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.cn-pane-plus .btn { margin-top: 6px; max-width: 280px; flex: none; }
/* Aperçu premium FLOUTÉ (leurre) + cadenas doré + bouton Débloquer — crée l'envie sans divulguer de vraie donnée */
.cn-lockp { position: relative; overflow: hidden; border-radius: var(--r-card); min-height: 400px; }
.lockp-decoy { filter: blur(6px) saturate(.92); opacity: .6; pointer-events: none; user-select: none; display: flex; flex-direction: column; gap: 12px; padding: 2px; }
.lockp-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.lockp-h { display: block; height: 12px; width: 46%; border-radius: 6px; background: var(--surface-3); margin-bottom: 14px; }
.lockp-stats { display: flex; gap: 12px; }
.lockp-stats span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); }
.lockp-stats b { font-size: 24px; font-weight: 800; color: var(--brand-text, var(--brand)); }
.lockp-bars { display: flex; align-items: flex-end; gap: 9px; height: 96px; }
.lockp-bars i { flex: 1; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--brand) 32%, var(--card)); }
.lockp-rows { display: flex; flex-direction: column; gap: 11px; }
.lockp-rows i { display: block; height: 13px; border-radius: 6px; background: var(--surface-3); }
.lockp-rows i:nth-child(2) { width: 82%; }
.lockp-rows i:nth-child(3) { width: 63%; }
.cn-lockp-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px;
  background: radial-gradient(130% 90% at 50% 42%, color-mix(in srgb, var(--bg) 28%, transparent), color-mix(in srgb, var(--bg) 84%, transparent)); }
.cn-lockp-over b { font-size: 17px; font-weight: 800; color: var(--text); }
.cn-lockp-d { font-size: 13px; line-height: 1.5; color: var(--text-2); max-width: 32ch; }
.cn-lockp-over .btn { margin-top: 4px; max-width: 260px; flex: none; }
/* Variante compacte (« Quand y retourner ») : faux calendrier flouté */
.cn-lockp-sm { min-height: 210px; }
.lockp-cal { display: flex; align-items: flex-end; gap: 7px; height: 128px; padding: 8px 4px; }
.lockp-cd { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px 4px; }
.lockp-cd i { width: 62%; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--brand) 34%, var(--card)); }
.lockp-cd.hot i { background: var(--gold); }
.pf-plus-ic { color: var(--gold-deep, var(--gold)); }
.pf-plus-row .pf-plus-st { font-weight: 500; color: var(--text-2); font-size: 12px; margin-left: 6px; }
.cn-plus-teaser { width: 100%; text-align: left; cursor: pointer; font-family: inherit; }

/* ── Marées : navigation par jour (48 h gratuites, la suite en Fishera+) ── */
.mar-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; }
.mar-days::-webkit-scrollbar { display: none; }
.mar-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 74px; padding: 9px 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  transition: background .18s ease, border-color .18s ease, color .18s ease; }
.mar-day b { font-size: 13px; font-weight: 800; text-transform: capitalize; }
.mar-day span { font-size: 11px; opacity: .7; }
.mar-day:hover { border-color: var(--brand); color: var(--text-1); }
.mar-day.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #04211b); }
.mar-day.on span { opacity: .85; }
.mar-day.lk { opacity: 1; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); }
.mar-day.lk .phi { width: 12px; height: 12px; margin-top: 2px; color: var(--gold-deep); }
.mar-dayhead { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.mar-dayhead-t { font-size: 16px; font-weight: 800; color: var(--text-1); text-transform: capitalize;
  display: flex; align-items: center; gap: 8px; }
.mar-dayhead-t .phi { width: 18px; height: 18px; color: var(--brand); }
.mar-dayhead-s { font-size: 13px; color: var(--text-3); }

/* ── Profil : gestion de l'abonnement (discret, sous le bloc Compte) ── */
.pf-billing { display: inline-flex; align-items: center; gap: 6px; margin: 10px 2px 0;
  padding: 6px 2px; background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .18s ease; }
.pf-billing:hover { color: var(--text-1); }
.pf-billing:disabled { opacity: .55; cursor: default; text-decoration: none; }
.pf-billing .phi { width: 14px; height: 14px; }

/* ── Admin · Créateurs (contrats ?ref=, funnel, rétention) ── */
.cra-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cra-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.cra-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cra-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cra-id b { font-size: 15px; }
.cra-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.cra-on    { background: rgba(18,184,134,.14); color: var(--brand-strong, #0c8a63); }
.cra-off   { background: rgba(128,128,128,.14); color: var(--text-3); }
.cra-block { background: rgba(224,49,49,.12);  color: #c0362c; }
.cra-plat { font-size: 12px; color: var(--text-3); }
.cra-acts { display: flex; gap: 6px; }
.cra-link { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-3); margin-top: 4px; word-break: break-all; }
.cra-funnel { display: flex; align-items: center; gap: 4px; margin: 12px 0 6px; flex-wrap: wrap; }
.cra-f { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 8px 10px; border-radius: 12px; background: var(--surface-1, var(--bg)); border: 1px solid var(--border); }
.cra-f b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cra-f span { font-size: 10.5px; color: var(--text-3); text-align: center; line-height: 1.25; }
.cra-f span em { font-style: normal; opacity: .75; }
.cra-f-gold { border-color: rgba(255, 184, 0, .5); }
.cra-f-gold b { color: #b8860b; }
.cra-sep { color: var(--text-3); opacity: .5; }
.cra-sep .phi { width: 13px; height: 13px; }
.cra-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 4px; }
.cra-meta b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.cra-detail { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.cra-chart { flex: 1 1 220px; }
.cra-chart .st-cols { width: 100%; height: 46px; }
.cra-ch-l { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 4px; }
.cn-kpi-gold b { color: #b8860b; }
/* les KPI Créateurs : chiffre au-dessus du libellé (le style carnet ne s'applique pas ici) */
#creatorsadm-content .cn-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
#creatorsadm-content .cn-kpi { display: flex; flex-direction: column; align-items: center; padding: 12px 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; }
#creatorsadm-content .cn-kpi b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
#creatorsadm-content .cn-kpi span { font-size: 11px; color: var(--text-3); text-align: center; }
@media (max-width: 560px) { #creatorsadm-content .cn-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Admin · Revenus ── */
#revenus-content .cn-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 0; }
#revenus-content .cn-kpi { display: flex; flex-direction: column; align-items: center; padding: 12px 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; }
#revenus-content .cn-kpi b { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
#revenus-content .cn-kpi span { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.3; }
#revenus-content .mon-kpis .cn-kpi:first-child b { color: var(--brand-strong, #0c8a63); }
.mon-chain { margin-top: 4px; }
.mon-chain .cra-f { min-width: 96px; flex: 1 1 0; }
@media (max-width: 560px) { #revenus-content .cn-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Landing : aperçu VIVANT de la carte dans le widget « Spots proches » ── */
.lp-minimap-live { position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.lp-minimap-live.on { opacity: 1; }
.lp-minimap-live canvas { border-radius: inherit; }
/* la carte vivante prend le dessus : on efface le décor de repli pour éviter le doublon */
.lp-minimap:has(.lp-minimap-live.on) .lp-rd,
.lp-minimap:has(.lp-minimap-live.on) .lp-sp { opacity: 0; transition: opacity .4s ease; }
/* le pin reste, posé sur la vraie carte */
.lp-minimap:has(.lp-minimap-live.on) .lp-pin { filter: drop-shadow(0 3px 8px rgba(7,32,26,.75)); }

/* ── Landing : les 3 étapes — photos plus grandes, badge non rogné ── */
.lp-step-img { height: 178px; overflow: visible; }
.lp-step-img img { border-radius: inherit; }
/* le dégradé s'arrêtait sur la couleur de fond et mangeait la photo : plus court, plus léger */
.lp-step-img::after { background: linear-gradient(180deg, rgba(7,32,26,.28) 0%, rgba(7,32,26,0) 45%, rgba(7,32,26,.55) 78%, var(--surface) 100%); }
/* le badge débordait d'un conteneur en overflow:hidden → il était coupé en deux */
.lp-si { bottom: -22px; z-index: 3; }
.lp-step-body { padding-top: 34px; }
@media (max-width: 700px) { .lp-step-img { height: 156px; } }

/* Le grand aperçu du pilier « 54 000+ spots » : il n'avait AUCUN style de base
   (seul .lp-minimap.sm existait), donc la carte absolue se calait sur la carte-bloc
   entière et recouvrait le texte. On lui donne son propre cadre. */
.lp-minimap:not(.sm) { position: relative; min-height: 260px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 90% at 30% 20%, #0f382d, #08251e); border: 1px solid var(--glass-border); }
.lp-minimap:not(.sm) .lp-pin { position: absolute; top: 42%; left: 50%; width: 26px; height: 26px;
  transform: translate(-50%, -50%); color: var(--accent); filter: drop-shadow(0 5px 12px rgba(255,107,61,.55)); z-index: 2; }
.lp-minimap:not(.sm) .lp-rd { position: absolute; height: 2px; border-radius: 2px; background: rgba(90,209,224,.35); }
.lp-minimap:not(.sm) .lp-rd.r1 { width: 78%; top: 38%; left: 10%; transform: rotate(-9deg); }
.lp-minimap:not(.sm) .lp-rd.r2 { width: 54%; top: 64%; left: 28%; transform: rotate(7deg); }
.lp-minimap:not(.sm) .lp-sp { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-strong); box-shadow: 0 0 12px 3px rgba(47,224,176,.65); }
@media (max-width: 700px) { .lp-minimap:not(.sm) { min-height: 190px; } }

/* ── Admin · Revenus : graphiques 30 j ── */
.mon-chart-sec { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin: 18px 2px 10px; }
.mon-chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mon-chart { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.mon-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mon-chart-h span { font-size: 12px; color: var(--text-3); }
.mon-chart-h b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.mon-chart .st-cols { width: 100%; height: 52px; }
.mon-chart-ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3); opacity: .7; margin-top: 4px; }
@media (max-width: 720px) { .mon-chart-grid { grid-template-columns: 1fr; } }


/* ===== Natif (apps iOS/Android — classe html.native posée par app.js) ===== */
html, body { overscroll-behavior: none; } /* tue le rubber-band iOS / glow Android sur le shell fixe */
.lp-head { padding-top: calc(13px + env(safe-area-inset-top, 0px)); } /* landing sous l'encoche (natif + PWA) */
html.native #drawer-install, html.native #hub-install, html.native [data-lp="install"] { display: none !important; } /* pas de tuto « Installer » dans une app installée */
html.native input, html.native select, html.native textarea { font-size: 16px !important; } /* anti-zoom iOS toutes tailles d'écran */
html.native.kb-open #bottomnav { display: none; } /* clavier ouvert : la nav du bas ne remonte pas dessus */
html.native body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* rendu app, pas page web */
html.native input, html.native textarea, html.native [contenteditable], html.native .comm-txt, html.native .f-body, html.native .sp-desc, html.native .legal, html.native .legal-doc { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }


/* ===== Apps natives : page de connexion obligatoire (Deep Water, plein écran) ===== */
.ngate { position: fixed; inset: 0; z-index: 15000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 30px) 26px calc(env(safe-area-inset-bottom, 0px) + 26px); background: #07201a; overflow-y: auto; text-align: center; animation: ng-fade .4s ease both; }
.ngate-bg { position: absolute; inset: 0; background: radial-gradient(125% 78% at 50% -5%, #10402f 0%, #07201a 62%); pointer-events: none; }
.ngate-inner { position: relative; width: 100%; max-width: 440px; margin: auto; display: flex; flex-direction: column; align-items: center; }
.ngate-logo { width: 84px; height: 84px; border-radius: 22px; margin-bottom: 18px; box-shadow: 0 12px 44px -12px rgba(0,0,0,.65); }
.ngate-title { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: 27px; line-height: 1.12; letter-spacing: -.01em; color: #eafff7; margin: 0 0 10px; }
.ngate-sub { font-size: 15.5px; line-height: 1.55; color: #9fc7b8; margin: 0 0 24px; max-width: 34ch; }
.ngate-perks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 13px; width: 100%; max-width: 322px; }
.ngate-perks li { display: flex; align-items: center; gap: 13px; font-size: 15px; color: #dbeee6; text-align: left; }
.ngate-pk { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(31,210,155,.14); color: #3fe0aa; }
.ngate-pk .phi { width: 21px; height: 21px; }
.ngate-cta { width: 100%; max-width: 342px; margin-bottom: 12px; }
.ngate-login { width: 100%; max-width: 342px; background: transparent; color: #cfeae0; border: 1px solid rgba(255,255,255,.20); }
.ngate-legal { font-size: 11.5px; line-height: 1.5; color: #6f948a; margin: 18px 0 0; max-width: 34ch; }
.ngate-legal a { color: #9fc7b8; text-decoration: underline; }
@keyframes ng-fade { from { opacity: 0; } to { opacity: 1; } }
/* ===== Widget « Ajoute Fishera à ton écran d'accueil » (menu + notifs) — image = message ===== */
.inst-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 28px -14px rgba(0,0,0,.35); margin: 0 0 14px; }
.inst-card-ban { background: #07201a; line-height: 0; }
.inst-card-ban img { width: 100%; height: auto; display: block; }
.inst-card.no-ill .inst-card-ban { display: none; }
.inst-card-fallback { display: none; padding: 14px 16px 0; flex-direction: column; gap: 7px; }
.inst-card.no-ill .inst-card-fallback { display: flex; }
.inst-card-t { font-size: 16px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; line-height: 1.25; }
.inst-card-t .phi { width: 19px; height: 19px; color: var(--brand); flex: none; }
.inst-card-s { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.inst-card-body { padding: 12px 14px 14px; }
.inst-card-go { width: 100%; }
.inst-card-go .phi { width: 18px; height: 18px; }
.inst-card-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(4,18,24,.5); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.inst-card-x .phi { width: 15px; height: 15px; }

/* ===== Modal « Ajouter à l'écran d'accueil » — refonte icônes PHI (fin des emojis) ===== */
.inst-title { display: inline-flex; align-items: center; gap: 7px; }
.inst-title .phi { width: 19px; height: 19px; color: var(--brand); flex: none; }
.inst-seg-btn { display: flex; align-items: center; justify-content: center; gap: 7px; }
.inst-seg-btn .phi { width: 16px; height: 16px; flex: none; opacity: .85; }
.inst-seg-btn.on .phi { color: #fff; opacity: 1; }
.inst-step { gap: 11px; padding: 11px 13px; border-radius: 13px; }
.inst-emo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; font-size: 0; }
.inst-emo .phi { width: 22px; height: 22px; color: var(--text-2); }
.inst-foot { display: flex; align-items: flex-start; gap: 7px; }
.inst-foot .phi { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--text-2); }
.inst-appicon { width: 56px; height: 56px; border-radius: 14px; }
.inst-foot > span { flex: 1 1 auto; min-width: 0; }

/* ===== Widget install — variante COMPACTE (bas du panneau Notifications) ===== */
.inst-mini { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-top: 12px; }
.inst-mini-ic { width: 42px; height: 42px; border-radius: 11px; flex: none; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.inst-mini-b { flex: 1; min-width: 0; }
.inst-mini-b b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--text); }
.inst-mini-b span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--text-2); margin-top: 1px; }
.inst-mini-go { flex: none; width: auto; white-space: nowrap; padding: 8px 16px; font-size: 13px; }
.inst-mini-x { position: static; width: 26px; height: 26px; flex: none; background: var(--surface-2); color: var(--text-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.inst-mini-x .phi { width: 14px; height: 14px; }

/* ===== Chaîne de l'argent — bandeau « paniers abandonnés » (fuite du tunnel) ===== */
.mon-abandon { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 10px 14px; border-radius: 12px; background: rgba(184,134,11,.10); border: 1px solid rgba(184,134,11,.30); }
.mon-abandon .phi { width: 20px; height: 20px; color: #b8860b; flex: none; }
.mon-abandon b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: #b8860b; }
.mon-abandon span { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.mon-abandon span em { font-style: normal; opacity: .8; }

/* ===== Admin E-mails — carte « Séquences » (schéma J0/J+3/J+7 + aperçus) ===== */
.seqm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.seqm-conv { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.seqm-conv .phi { width: 16px; height: 16px; color: #b8860b; }
.seqm-conv b { color: var(--text); }
.seqm-g { margin: 16px 0 4px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); font-weight: 800; }
.seqm-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.seqm-day { flex: none; min-width: 46px; text-align: center; padding: 6px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 800; color: var(--brand-dark, #0c6b4f); font-variant-numeric: tabular-nums; }
.seqm-b { flex: 1; min-width: 0; }
.seqm-b b { display: block; font-size: 13.5px; line-height: 1.3; }
.seqm-b span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.seqm-eye { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.seqm-eye .phi { width: 15px; height: 15px; }
.seqm-frame { width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 12px; background: #eef4f1; margin: 4px 0 8px; }
#seqm-toggle { display: inline-flex; align-items: center; gap: 7px; }
#seqm-toggle .phi { width: 16px; height: 16px; }
.seqm-day-ic { display: grid; place-items: center; min-width: 40px; }
.seqm-day-ic .phi { width: 16px; height: 16px; }

/* ===== RÉCAP DE SESSION (SESSION-RECAP.md V1) ===== */
.srp { display: flex; flex-direction: column; gap: 12px; text-align: left; margin: 12px 0 4px; }
.srp-hero { display: flex; flex-direction: column; gap: 2px; }
.srp-hero > b { font-size: 18px; font-weight: 800; }
.srp-hero > span { font-size: 12.5px; color: var(--text-2); text-transform: capitalize; }
.srp-hero-n { display: flex; gap: 14px; margin-top: 8px; }
.srp-hero-n span { font-size: 13px; color: var(--text-2); }
.srp-hero-n b { font-size: 22px; font-weight: 900; color: var(--text); margin-right: 3px; font-variant-numeric: tabular-nums; }
/* hero avec la vue satellite du spot (récap « au fil de l'eau ») */
.srp-hero-ph { position: relative; overflow: hidden; border-radius: 14px; padding: 14px; min-height: 108px; justify-content: flex-end; }
.srp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.srp-hero-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,26,20,.16), rgba(3,20,16,.82)); z-index: 1; }
.srp-hero-ph > b, .srp-hero-ph > span, .srp-hero-ph .srp-hero-n { position: relative; z-index: 2; }
.srp-hero-ph > b { color: #f2fbf7; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.srp-hero-ph > span { color: rgba(210,238,226,.92); }
.srp-hero-ph .srp-hero-n b { color: #fff; }
.srp-hero-ph .srp-hero-n span { color: rgba(210,238,226,.85); }
.srp-card { display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.srp-card-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; }
.srp-card-h .phi { width: 15px; height: 15px; color: var(--brand); }
.srp-mut { color: var(--text-2); font-weight: 400; font-size: 12px; }
.srp-rec { display: flex; align-items: center; gap: 12px; border-color: rgba(184,134,11,.45); background: rgba(184,134,11,.08); }
.srp-rec > .phi { width: 26px; height: 26px; color: #b8860b; flex: none; }
.srp-rec b { display: block; font-size: 14px; line-height: 1.3; }
.srp-rec .srp-mut { display: block; margin-top: 2px; }
/* frise */
.srp-frise-wrap { margin: 2px 0; }
.srp-frise-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.srp-frise { position: relative; height: 112px; }
.srp-river { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.srp-tick { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 9.5px; color: var(--text-2); }
.srp-tick i { display: block; width: 1px; height: 6px; background: var(--border); margin: 0 auto 1px; }
.srp-rush { position: absolute; top: 10px; bottom: 18px; border-radius: 8px; background: rgba(18,184,134,.28); border-left: 1px solid rgba(18,184,134,.6); border-right: 1px solid rgba(18,184,134,.6); }
.srp-dot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(7,32,26,.72); padding: 0; cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.srp-dot img { width: 26px; height: 26px; object-fit: contain; }
.srp-dot-off { cursor: default; }
.srp-frise-cap { margin-top: 5px; font-size: 11.5px; color: var(--text-2); }
/* météo */
.srp-meteo { display: flex; flex-wrap: wrap; gap: 6px; }
.srp-meteo span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; }
.srp-meteo .phi { width: 14px; height: 14px; color: var(--text-2); }
/* toi vs toi */
.srp-pace-txt { font-size: 13.5px; line-height: 1.5; }
.srp-gauge { position: relative; height: 8px; border-radius: 99px; background: var(--surface-1, var(--bg)); border: 1px solid var(--border); margin: 9px 0 7px; overflow: hidden; }
.srp-gauge i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.srp-gauge em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-2); opacity: .6; }
.srp-badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.srp-up { background: rgba(18,184,134,.15); color: var(--brand-dark, #0c8a63); }
.srp-eq { background: var(--surface-1, var(--bg)); color: var(--text-2); }
.srp-dn { background: var(--surface-1, var(--bg)); color: var(--text-2); }
.srp-need { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.srp-need .phi { width: 16px; height: 16px; flex: none; }
.srp-gold { border-color: rgba(184,134,11,.35); }
/* badges + fun fact + compteurs */
.srp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.srp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; }
.srp-chip .phi { width: 14px; height: 14px; color: var(--brand); }
.srp-fact { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); font-style: italic; }
.srp-fact .phi { width: 15px; height: 15px; color: #b8860b; flex: none; }
.srp-life { display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.srp-life span { font-size: 12px; color: var(--text-2); }
.srp-life b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 2px; }
/* cadenas */
.srp-lock { background: var(--surface-2); border: 1px dashed rgba(184,134,11,.5); border-radius: 14px; padding: 13px 14px; }
.srp-lock-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.srp-lock-h .phi { width: 16px; height: 16px; color: #b8860b; }
.srp-lock-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 4px 0; }
.srp-lock-r .phi { width: 15px; height: 15px; flex: none; opacity: .75; }
.srp-unlock { width: 100%; margin-top: 8px; }
/* liste sessions du carnet + fiche prise */
.srp-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin: 0 0 8px; font: inherit; color: var(--text); cursor: pointer; }
.srp-row b { font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srp-row span { font-size: 12px; color: var(--text-2); flex: none; }
.srp-row .phi { width: 14px; height: 14px; color: var(--text-2); flex: none; }
.srp-cph { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }

/* ===== V2 récap : boutons un-tap live + fantômes de frise ===== */
.live-taps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 8px; }
.live-tap { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 11px; padding: 9px 4px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .1s ease, background .15s ease; }
.live-tap:active { transform: scale(.96); }
.live-tap .phi { width: 15px; height: 15px; color: var(--brand); flex: none; }
.live-ev { margin-top: 7px; font-size: 12px; color: var(--text-2); text-align: center; }
.srp-gh { position: absolute; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 50%; background: rgba(4,26,20,.85); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; }
.srp-gh .phi { width: 10px; height: 10px; color: rgba(255,255,255,.92); }
.srp-gh-lost { border-color: rgba(255,154,100,.85); }
.srp-gh-lost .phi { color: #ff9a64; }
/* V3 récap : résumé narratif + actions archive */
.srp-story { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); font-style: italic; border-left: 3px solid var(--brand); padding-left: 11px; }
.srp-arch-acts { margin-top: 12px; }

/* légende de la frise (comptes) */
.srp-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 7px; }
.srp-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.srp-lg-dot { width: 13px; height: 13px; border-radius: 50%; background: rgba(4,26,20,.85); border: 2.5px solid var(--brand); flex: none; }
.srp-lg-ev { width: 16px; height: 16px; border-radius: 50%; background: rgba(4,26,20,.85); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; flex: none; }
.srp-lg-ev .phi { width: 10px; height: 10px; color: #fff; }
.srp-lg-lost { border-color: rgba(255,154,100,.8); }
.srp-lg-lost .phi { color: #ff9a64; }