/* Plongée : le lagon (bleus, turquoise). Chargé après style.css : les jetons de couleur et les règles propres au sujet. */
:root {
    --encre: #112633;
    --bleu-profond: #0b3954;
    --bleu: #1b6ca8;
    --bleu-clair: #d9eaf6;
    --turquoise: #22a7b5;
    --turquoise-clair: #d4f1f3;
    --ecume: #f3f8fa;
    --lagon-clair: #e3f5f7;    /* fond bleu-vert des encadrés (plus de sable orangé, demande d'Arnaud) */
    --lagon: #27c3d3;          /* bleu lagon, l'accent du site (demande d'Arnaud : plus d'orange) */
    --lagon-sombre: #159db0;
    --rouge: #c94040;          /* seulement pour un signal : niveau confirmé, courant fort */
    --gris: #5f6f7a;
    --gris-clair: #e9eff3;
    --ligne: #dbe5ec;
    --ombre: 0 10px 30px rgba(11, 57, 84, .10);
    --ombre-legere: 0 2px 10px rgba(11, 57, 84, .08);
}
.sp-logo__icone svg { width: 30px; height: 30px; color: var(--turquoise); }
.sp-hero { position: relative; background: linear-gradient(135deg, var(--bleu-profond), var(--bleu) 70%, var(--turquoise)); color: var(--blanc); margin-bottom: 28px; overflow: hidden; }
.sp-hero--image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 32, 48, .88) 0%, rgba(8, 32, 48, .35) 55%, rgba(8, 32, 48, .05) 100%); }
.sp-chip--pays:hover { background: #1b8f9c; border-color: #1b8f9c; }
.sp-hero--accueil .sp-hero__titre { font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 820px; }
.sp-carte { background: var(--blanc); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(11, 57, 84, .05); border: 1px solid var(--ligne); transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), border-color .35s; }
.sp-carte:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(11, 57, 84, .16), 0 4px 12px rgba(11, 57, 84, .06); border-color: #c6d6e1; }
.sp-carte__voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 28, 44, .88) 0%, rgba(8, 28, 44, .34) 48%, rgba(8, 28, 44, 0) 78%); pointer-events: none; }
.sp-carte__pays { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border-radius: 10px; background: rgba(8, 28, 44, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--blanc); font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.sp-pilule--acces { background: var(--turquoise-clair); color: #137a86; }
.sp-danger--faible { background: var(--lagon-clair); color: #137a86; }
.sp-lightbox::backdrop { background: rgba(5, 15, 25, .92); }
.sp-cal > .sp-cal__mois:hover, .sp-faune-cal__point:hover { transform: translateY(-2px); z-index: 3; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--lagon), 0 4px 10px rgba(11, 57, 84, .2); }
.sp-cal > .sp-cal__mois--0:hover, .sp-faune-cal__point--0:hover { box-shadow: inset 0 0 0 1.5px var(--ligne), 0 0 0 2px var(--blanc), 0 0 0 4px var(--lagon), 0 4px 10px rgba(11, 57, 84, .2); }
.sp-cal > .sp-cal__mois:hover::after, .sp-faune-cal__point:hover::after { content: attr(data-info); position: absolute; z-index: 4; background: var(--bleu-profond); color: var(--blanc); font-size: .74rem; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: nowrap; padding: 5px 9px; border-radius: 8px; pointer-events: none; box-shadow: 0 6px 16px rgba(11, 57, 84, .25); animation: sp-bulle .15s ease-out; }
.sp-barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--ligne); box-shadow: 0 -6px 20px rgba(11, 57, 84, .12); transition: transform .2s; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(34, 167, 181, .35); }