/* ============================================================
   HORIZON BASSIN — DIRECTION ARTISTIQUE
   Tous les choix graphiques sont ici : couleurs, polices,
   espacements, formes, verre, mouvements.
   Version épurée (15/11/2026) : filets plutôt que cartes, liquid glass conservé (en-tête, barre de réservation, surtitres).
   Palette guidée par la photo d'ambiance : lagon, sable, ciel, soleil.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  /* — Couleurs de marque — */
  --c-shell: #FCFBF8;          /* blanc coquillage : fond */
  --c-lagoon: #167D8D;         /* vert lagon : actions (blanc dessus : 4,8:1) */
  --c-lagoon-deep: #0E6170;    /* survol / texte lagon sur clair (6,9:1) */
  --c-ink: #153B4F;            /* bleu profond : textes (10:1) */
  --c-sun: #F4CE65;            /* jaune soleil : petites touches */
  --c-sun-soft: #FBEBC0;

  /* — Couleurs tirées de la photo — */
  --c-sand: #F5ECDA;           /* banc de sable */
  --c-sand-deep: #E8D7B4;
  --c-foam: #E3F3F0;           /* écume / eau claire */
  --c-sky: #DDEFF6;            /* ciel */
  --c-water: #0B7374;          /* eau profonde (fond de secours derrière la photo) */

  /* — Textes & états — */
  --c-text: var(--c-ink);
  --c-muted: #4B6170;          /* 6,3:1 sur coquillage */
  --c-line: #E4DED1;
  --c-white: #FFFFFF;
  --c-danger: #A4262C; --c-danger-bg: #FCEDEC;
  --c-ok: #1D6B3F;     --c-ok-bg: #E6F4EA;
  --c-warn: #7A4B00;   --c-warn-bg: #FFF3D6;

  /* Lumière du moment (sélecteur Matin / Après-midi / Journée) */
  --moment-morning: linear-gradient(135deg, #FFE7C9 0%, #FCEFD9 45%, #DDEFF6 100%);
  --moment-afternoon: linear-gradient(135deg, #CDEDE6 0%, #E7F5EE 50%, #FBE6A6 100%);
  --moment-day: linear-gradient(135deg, #DDEFF6 0%, #E9F5EF 45%, #FCEAB8 100%);

  /* — Typographie (2 familles, auto-hébergées) — */
  --font-title: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-display: clamp(2.6rem, 7.2vw, 5.6rem);
  --fs-h1: clamp(2.2rem, 5.2vw, 3.8rem);
  --fs-h2: clamp(1.9rem, 4vw, 3.1rem);
  --fs-h3: 1.3rem;
  --lh: 1.65;
  --tracking-title: -0.03em;

  /* — Espacements — */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 5rem; --sp-9: 7.5rem;
  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* — Formes — */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --tap: 48px;
  --shadow-soft: 0 1px 2px rgba(21, 59, 79, 0.08);
  --shadow-lift: 0 8px 24px -12px rgba(21, 59, 79, 0.25);

  /* — Verre (navigation, module sur la photo, panneau) — */
  --glass-bg: rgba(252, 251, 248, 0.68);
  --glass-bg-strong: rgba(252, 251, 248, 0.86);   /* formulaires sur verre */
  --glass-fallback: rgba(252, 251, 248, 0.97);    /* sans flou disponible */
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-blur: 18px;
  --glass-blur-mobile: 10px;
  --glass-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(9, 45, 60, 0.45);

  /* — Mouvements (courts, jamais bloquants) — */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}