/*!
 * Dalia Beach — Thème dynamique : variables et styles
 * ---------------------------------------------------
 * Ces variables sont mises à jour en direct par daylight.js.
 * Tu n'as qu'à utiliser var(--db-...) dans le CSS de ton site
 * partout où tu veux que la couleur suive l'heure du jour.
 *
 * Les valeurs ci-dessous sont des couleurs de SECOURS (heure « jour »)
 * utilisées le temps que le script s'exécute, ou s'il est désactivé.
 */
:root {
  --db-bg:          rgb(238, 244, 247);   /* fond de page                */
  --db-sky-top:     rgb(106, 166, 224);   /* haut du dégradé du ciel     */
  --db-sky-bottom:  rgb(207, 230, 245);   /* bas du dégradé du ciel      */
  --db-surface:     rgb(255, 255, 255);   /* cartes, encadrés            */
  --db-text:        rgb(22, 50, 63);      /* texte principal             */
  --db-text-soft:   rgba(22, 50, 63, .68);/* texte secondaire            */
  --db-accent:      rgb(31, 143, 176);    /* boutons, liens, accents     */
  --db-on-accent:   rgb(255, 255, 255);   /* texte SUR un fond accent    */
  --db-overlay:     rgba(15, 45, 60, .22);/* voile sur les photos        */
  --db-glow:        rgb(255, 243, 208);   /* couleur du soleil / lune    */
}

/* ------------------------------------------------------------------
 * Classes utilitaires : applique-les sur tes éléments existants.
 * ------------------------------------------------------------------ */
.db-bg        { background-color: var(--db-bg); }
.db-surface   { background-color: var(--db-surface); }
.db-text      { color: var(--db-text); }
.db-text-soft { color: var(--db-text-soft); }
.db-accent    { color: var(--db-accent); }

/* Un dégradé de ciel prêt à l'emploi pour ta section hero */
.db-sky {
  background: linear-gradient(180deg, var(--db-sky-top) 0%, var(--db-sky-bottom) 100%);
}

/* Bouton « accent » cohérent avec le thème */
.db-btn {
  background-color: var(--db-accent);
  color: var(--db-on-accent);
  border: none;
  cursor: pointer;
}

/* Voile à poser sur une photo pour garder le texte lisible la nuit */
.db-photo-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--db-overlay);
  pointer-events: none;
}

/* ------------------------------------------------------------------
 * Bouton flottant de contrôle (auto / jour / nuit), injecté en JS.
 * ------------------------------------------------------------------ */
#db-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--db-text-soft);
  border-radius: 999px;
  background: var(--db-surface);
  color: var(--db-text);
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#db-toggle:hover { filter: brightness(1.05); }
#db-toggle:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }
.db-toggle-icon  { font-size: 15px; line-height: 1; }
.db-toggle-label { white-space: nowrap; }

@media (max-width: 600px) {
  #db-toggle { padding: 8px 11px; }
  .db-toggle-label { display: none; } /* sur mobile on garde juste l'icône */
}

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  #db-toggle { box-shadow: none; }
}