/* Safari : la savane (brun, ocre, vert acacia). Chargé après style.css : les jetons de couleur et les règles propres au sujet. */
:root {
    --encre: #2a1f17;
    --bleu-profond: #3d2b1f;   /* brun profond : titres, bandeaux sombres */
    --bleu: #a0522d;           /* terre de Sienne : liens et boutons */
    --bleu-clair: #f3e3d3;
    --turquoise: #6b8e23;      /* vert acacia */
    --turquoise-clair: #e7efd6;
    --ecume: #faf6f0;
    --lagon-clair: #f6ecdf;    /* fond sable des encadrés */
    --lagon: #d98e2b;          /* ocre doré, l'accent du site */
    --lagon-sombre: #b8731c;
    --rouge: #c94040;          /* seulement pour un signal : paludisme, danger */
    --gris: #6f655c;
    --gris-clair: #efe9e2;
    --ligne: #e6ddd2;
    --ombre: 0 10px 30px rgba(61, 43, 31, .10);
    --ombre-legere: 0 2px 10px rgba(61, 43, 31, .08);
}
    /* Les noms des jetons viennent du thème de la plongée ; les valeurs sont celles de la savane. */
.sp-logo__icone svg { width: 30px; height: 30px; display: block; }
.sp-hero { position: relative; background: linear-gradient(135deg, var(--bleu-profond), #6b4a2f 70%, var(--lagon-sombre)); 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(40, 26, 16, .88) 0%, rgba(40, 26, 16, .35) 55%, rgba(40, 26, 16, .05) 100%); }
.sp-chip--pays:hover { background: #7a8b2e; border-color: #7a8b2e; }
/* 700 px : le titre de l'accueil tient sur trois lignes, comme celui de la plongée (plus long, il y passe à 820 px) */
.sp-hero--accueil .sp-hero__titre { font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 700px; }
.sp-carte { background: var(--blanc); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(61, 43, 31, .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(61, 43, 31, .16), 0 4px 12px rgba(61, 43, 31, .06); border-color: #c6d6e1; }
.sp-carte__voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 26, 16, .88) 0%, rgba(40, 26, 16, .34) 48%, rgba(40, 26, 16, 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(40, 26, 16, .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: #5f6e22; }
.sp-danger--faible { background: var(--lagon-clair); color: #5f6e22; }
.sp-lightbox::backdrop { background: rgba(25, 16, 10, .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(61, 43, 31, .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(61, 43, 31, .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(61, 43, 31, .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(61, 43, 31, .12); transition: transform .2s; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(217, 142, 43, .35); }

/* ------------------------------------------------------------------ */
/* Safari : Big Five, questions fréquentes, pastilles des vignettes     */
/* ------------------------------------------------------------------ */
.sp-big5 { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-big5__item { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--turquoise-clair); color: var(--encre); font-size: .88rem; font-weight: 600; }
.sp-big5__item--absent { background: var(--gris-clair); color: var(--gris); font-weight: 400; text-decoration: line-through; }
.sp-pilule--sain { background: var(--turquoise-clair); color: var(--encre); }
.sp-pilule--palu { background: #fbe7e7; color: #8a2a2a; }
.sp-pilule--auto { background: var(--bleu-clair); color: var(--encre); }