/* ═══════════════════════════════════════════════════════════════
   PANDORA JOUR OVERRIDE — Couche maître mode jour « Océan Pandora »
   Chargée EN DERNIER — gagne sur toutes les autres feuilles.

   #060D1F / #0D1B3E  Fonds
   rgba(255,255,255,0.06)  Cartes type verre
   #E3F2FD  Texte
   #4FC3F7  Accent eau (mint / cyan)
   #7C4DFF  Accent violet (or du cahier)
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   0. TOKENS MAÎTRES (via html[data-theme] pour atteindre les vars héritées)
   ────────────────────────────────────────────────────────────── */
html[data-theme='light'],
html[data-mode='jour'] {
  --bg-primary: #060d1f;
  --fond-actif: #060d1f;
  color-scheme: dark;
}

body.mode-jour,
html[data-theme='light'] body {
  --fond-jour: #060d1f;
  --bg-primary: #060d1f;
  background-color: #060d1f !important;
  color-scheme: dark;

  --text: #e3f2fd;
  --text-primary: #e3f2fd;
  --text-2: rgba(227, 242, 253, 0.78);
  --text-3: rgba(227, 242, 253, 0.52);
  --text-4: rgba(227, 242, 253, 0.34);
  color: #e3f2fd;

  --teal: #4fc3f7;
  --accent-teal: #4fc3f7;
  --ambre: #4fc3f7;
  --accent-ambre: #4fc3f7;
  --violet: #7c4dff;
  --accent-violet: #7c4dff;
  --green: #5eead4;

  --glass: rgba(13, 27, 62, 0.55);
  --glass-nav: rgba(6, 13, 31, 0.9);
  --glass-card: rgba(13, 27, 62, 0.58);

  --border-card: rgba(79, 195, 247, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --c-divider: rgba(255, 255, 255, 0.1);

  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(79, 195, 247, 0.06);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.48), 0 0 0 0.5px rgba(124, 77, 255, 0.08);
  --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.52), 0 0 0 0.5px rgba(79, 195, 247, 0.08);

  --glow-teal: 0 0 22px rgba(79, 195, 247, 0.35), 0 0 52px rgba(79, 195, 247, 0.14);
  --glow-violet: 0 0 22px rgba(124, 77, 255, 0.32), 0 0 48px rgba(124, 77, 255, 0.12);
  --glow-ambre: 0 0 18px rgba(79, 195, 247, 0.28), 0 0 40px rgba(79, 195, 247, 0.1);
}

/* ──────────────────────────────────────────────────────────────
   1. NAVIGATION
   ────────────────────────────────────────────────────────────── */
body.mode-jour nav.nav,
html[data-theme='light'] nav.nav {
  background: rgba(6, 13, 31, 0.9) !important;
  border-bottom: 1px solid rgba(79, 195, 247, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    var(--glass-shadow-sm, 0 4px 24px rgba(0, 0, 0, 0.35)) !important;
}

body.mode-jour .nav-logo,
html[data-theme='light'] .nav-logo,
body.mode-jour .nav-links a,
html[data-theme='light'] .nav-links a {
  color: #e3f2fd !important;
}

body.mode-jour .nav-links a:hover,
html[data-theme='light'] .nav-links a:hover,
body.mode-jour nav a.active,
html[data-theme='light'] nav a.active {
  color: var(--ambre, #4fc3f7) !important;
}

/* ──────────────────────────────────────────────────────────────
   2. LABELS / TAGS
   ────────────────────────────────────────────────────────────── */
body.mode-jour .label,
html[data-theme='light'] .label,
body.mode-jour [class*='label-'],
html[data-theme='light'] [class*='label-'] {
  color: var(--ambre, #4fc3f7) !important;
}

body.mode-jour .tag,
html[data-theme='light'] .tag,
body.mode-jour .badge,
html[data-theme='light'] .badge,
body.mode-jour [class*='-tag']:not(.offre-tag),
html[data-theme='light'] [class*='-tag']:not(.offre-tag) {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #b3e5fc !important;
  border-color: rgba(79, 195, 247, 0.22) !important;
}

body.mode-jour .offre-secteur-tag,
html[data-theme='light'] .offre-secteur-tag {
  background: rgba(124, 77, 255, 0.12) !important;
  color: #d1c4ff !important;
}

/* ──────────────────────────────────────────────────────────────
   3. CARTES & BLOCS
   ────────────────────────────────────────────────────────────── */
body.mode-jour .block,
html[data-theme='light'] .block,
body.mode-jour .card,
html[data-theme='light'] .card,
body.mode-jour .offre-card,
html[data-theme='light'] .offre-card,
body.mode-jour [class*='-card'],
html[data-theme='light'] [class*='-card'],
body.mode-jour .etape-card,
html[data-theme='light'] .etape-card,
body.mode-jour .tech-card,
html[data-theme='light'] .tech-card,
body.mode-jour .form-card,
html[data-theme='light'] .form-card {
  background: rgba(13, 27, 62, 0.55) !important;
  border-color: rgba(79, 195, 247, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(79, 195, 247, 0.08) !important;
  color: #e3f2fd !important;
}

body.mode-jour .block:hover,
html[data-theme='light'] .block:hover,
body.mode-jour .card:hover,
html[data-theme='light'] .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 56px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(79, 195, 247, 0.2) !important;
}

/* Blocs colorés — variantes Océan Pandora (sur fond sombre) */
body.mode-jour .block-cyan,
html[data-theme='light'] .block-cyan {
  background:
    linear-gradient(135deg, rgba(79, 195, 247, 0.18) 0%, transparent 60%), rgba(13, 27, 62, 0.62) !important;
  border-color: rgba(79, 195, 247, 0.28) !important;
}
body.mode-jour .block-violet,
html[data-theme='light'] .block-violet {
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.2) 0%, transparent 60%), rgba(13, 27, 62, 0.62) !important;
  border-color: rgba(124, 77, 255, 0.28) !important;
}
body.mode-jour .block-vert,
html[data-theme='light'] .block-vert {
  background:
    linear-gradient(135deg, rgba(94, 234, 212, 0.14) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  border-color: rgba(94, 234, 212, 0.22) !important;
}
body.mode-jour .block-ambre,
html[data-theme='light'] .block-ambre {
  background:
    linear-gradient(135deg, rgba(79, 195, 247, 0.16) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  border-color: rgba(79, 195, 247, 0.24) !important;
}
body.mode-jour .block-or,
html[data-theme='light'] .block-or {
  background:
    linear-gradient(135deg, rgba(255, 213, 79, 0.1) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  border-color: rgba(255, 213, 79, 0.22) !important;
}
body.mode-jour .block-rose,
html[data-theme='light'] .block-rose {
  background:
    linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  border-color: rgba(236, 72, 153, 0.22) !important;
}
body.mode-jour .block-neutre,
html[data-theme='light'] .block-neutre {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ──────────────────────────────────────────────────────────────
   4. SECTIONS & FONDS
   ────────────────────────────────────────────────────────────── */
body.mode-jour section,
html[data-theme='light'] section {
  color: #e3f2fd;
}

/* Sections avec fonds sombres explicites → transparents en mode-jour */
body.mode-jour [class*='-section'],
html[data-theme='light'] [class*='-section'],
body.mode-jour [class*='-hero'],
html[data-theme='light'] [class*='-hero'],
body.mode-jour .cta-final,
html[data-theme='light'] .cta-final {
  background: transparent !important;
}

/* Sections alternées : légère teinte ivoire */
body.mode-jour .section-alt,
html[data-theme='light'] .section-alt,
body.mode-jour .bg-alt,
html[data-theme='light'] .bg-alt {
  background: rgba(13, 27, 62, 0.35) !important;
}

/* Pipeline / Étapes */
body.mode-jour .pipeline-offres,
html[data-theme='light'] .pipeline-offres,
body.mode-jour .section-steps,
html[data-theme='light'] .section-steps {
  background: transparent !important;
}

/* ──────────────────────────────────────────────────────────────
   5. TEXTES — CONTRASTE CORRECT
   ────────────────────────────────────────────────────────────── */
body.mode-jour h1,
body.mode-jour h2,
body.mode-jour h3,
body.mode-jour h4,
body.mode-jour h5,
body.mode-jour h6,
html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] h4,
html[data-theme='light'] h5,
html[data-theme='light'] h6 {
  color: #e3f2fd !important;
}

body.mode-jour p,
body.mode-jour li,
body.mode-jour span,
html[data-theme='light'] p,
html[data-theme='light'] li,
html[data-theme='light'] span {
  color: rgba(227, 242, 253, 0.88);
}

body.mode-jour .hero-titre,
body.mode-jour [class*='-titre'],
body.mode-jour [class*='-title'],
html[data-theme='light'] .hero-titre,
html[data-theme='light'] [class*='-titre'],
html[data-theme='light'] [class*='-title'] {
  color: #e3f2fd !important;
}

body.mode-jour .hero-sous-titre,
body.mode-jour [class*='-sous-titre'],
body.mode-jour [class*='-subtitle'],
html[data-theme='light'] .hero-sous-titre {
  color: rgba(227, 242, 253, 0.72) !important;
}

/* Accent de texte teal / ambre */
body.mode-jour .accent,
body.mode-jour [class*='-accent'],
body.mode-jour .text-teal,
html[data-theme='light'] .accent,
html[data-theme='light'] .text-teal {
  color: #4fc3f7 !important;
}

body.mode-jour .text-ambre,
body.mode-jour [class*='-ambre'],
html[data-theme='light'] .text-ambre {
  color: #4fc3f7 !important;
}

/* Accent hero jour : gradient défini dans apple-finish.css (ne pas écraser) */

/* ──────────────────────────────────────────────────────────────
   6. BOUTONS
   ────────────────────────────────────────────────────────────── */
body.mode-jour .btn-primary,
html[data-theme='light'] .btn-primary {
  background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%) !important;
  color: #061322 !important;
  box-shadow:
    0 4px 24px rgba(79, 195, 247, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
body.mode-jour .btn-primary:hover,
html[data-theme='light'] .btn-primary:hover {
  box-shadow:
    0 8px 36px rgba(79, 195, 247, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

body.mode-jour .btn-secondary,
html[data-theme='light'] .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e3f2fd !important;
  border: 1px solid rgba(79, 195, 247, 0.35) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}
body.mode-jour .btn-secondary:hover,
html[data-theme='light'] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(79, 195, 247, 0.5) !important;
}

/* Bouton ambre (CTA secondaire jour) */
body.mode-jour .btn-ambre,
html[data-theme='light'] .btn-ambre {
  background: linear-gradient(135deg, #7c4dff 0%, #5c6bc0 100%) !important;
  color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────────
   7. PILLS / FILTRES
   ────────────────────────────────────────────────────────────── */
body.mode-jour .pill,
body.mode-jour .filtre-pill,
body.mode-jour .secteur-pill,
body.mode-jour [class*='-pill'],
html[data-theme='light'] .pill,
html[data-theme='light'] .filtre-pill,
html[data-theme='light'] [class*='-pill'] {
  background: rgba(13, 27, 62, 0.65) !important;
  color: rgba(227, 242, 253, 0.82) !important;
  border-color: rgba(79, 195, 247, 0.2) !important;
}
body.mode-jour .pill.selected,
body.mode-jour .filtre-pill.selected,
body.mode-jour [class*='-pill'].active,
html[data-theme='light'] .pill.selected,
html[data-theme='light'] .filtre-pill.selected {
  background: rgba(79, 195, 247, 0.18) !important;
  color: #e3f2fd !important;
  border-color: rgba(79, 195, 247, 0.4) !important;
}

/* ──────────────────────────────────────────────────────────────
   8. INPUTS / FORMULAIRES
   ────────────────────────────────────────────────────────────── */
body.mode-jour input,
body.mode-jour textarea,
body.mode-jour select,
html[data-theme='light'] input,
html[data-theme='light'] textarea,
html[data-theme='light'] select {
  background: rgba(6, 13, 31, 0.72) !important;
  border-color: rgba(79, 195, 247, 0.28) !important;
  color: #e3f2fd !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
body.mode-jour input::placeholder,
body.mode-jour textarea::placeholder,
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder {
  color: rgba(227, 242, 253, 0.42) !important;
}
body.mode-jour input:focus,
body.mode-jour textarea:focus,
body.mode-jour select:focus,
html[data-theme='light'] input:focus,
html[data-theme='light'] textarea:focus,
html[data-theme='light'] select:focus {
  border-color: rgba(79, 195, 247, 0.55) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
}
body.mode-jour input:focus-visible,
body.mode-jour textarea:focus-visible,
body.mode-jour select:focus-visible,
html[data-theme='light'] input:focus-visible,
html[data-theme='light'] textarea:focus-visible,
html[data-theme='light'] select:focus-visible {
  border-color: rgba(79, 195, 247, 0.65) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(79, 195, 247, 0.2),
    0 0 18px rgba(79, 195, 247, 0.12) !important;
  outline: none !important;
}

/* Labels de formulaires */
body.mode-jour label,
html[data-theme='light'] label {
  color: rgba(227, 242, 253, 0.78) !important;
}

/* ──────────────────────────────────────────────────────────────
   9. NAVIGATION MOBILE (bottom-bar)
   ────────────────────────────────────────────────────────────── */
body.mode-jour .bottom-bar,
html[data-theme='light'] .bottom-bar {
  background: rgba(6, 13, 31, 0.94) !important;
  border-top: 1px solid rgba(79, 195, 247, 0.14) !important;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.04),
    0 -8px 32px rgba(0, 0, 0, 0.45) !important;
}
body.mode-jour .bottom-bar a,
body.mode-jour .bottom-bar button,
html[data-theme='light'] .bottom-bar a,
html[data-theme='light'] .bottom-bar button {
  color: rgba(227, 242, 253, 0.52) !important;
}
body.mode-jour .bottom-bar a.active,
body.mode-jour .bottom-bar .active,
html[data-theme='light'] .bottom-bar a.active,
html[data-theme='light'] .bottom-bar .active {
  color: #4fc3f7 !important;
}

/* ──────────────────────────────────────────────────────────────
   10. FOOTER
   ────────────────────────────────────────────────────────────── */
body.mode-jour .site-footer,
body.mode-jour footer,
html[data-theme='light'] .site-footer,
html[data-theme='light'] footer {
  background: rgba(6, 13, 31, 0.88) !important;
  border-top: 1px solid rgba(79, 195, 247, 0.12) !important;
  color: rgba(227, 242, 253, 0.68) !important;
}
body.mode-jour .site-footer a,
html[data-theme='light'] .site-footer a,
body.mode-jour footer a,
html[data-theme='light'] footer a {
  color: rgba(227, 242, 253, 0.62) !important;
}
body.mode-jour .site-footer a:hover,
html[data-theme='light'] .site-footer a:hover {
  color: #4fc3f7 !important;
}

/* ──────────────────────────────────────────────────────────────
   11. SÉPARATEURS
   ────────────────────────────────────────────────────────────── */
body.mode-jour hr,
html[data-theme='light'] hr,
body.mode-jour .separator,
html[data-theme='light'] .separator,
body.mode-jour .section-separator,
html[data-theme='light'] .section-separator {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.25), transparent) !important;
}

body.mode-jour .section-separator-dot,
html[data-theme='light'] .section-separator-dot {
  background: rgba(79, 195, 247, 0.45) !important;
  box-shadow: 0 0 10px rgba(79, 195, 247, 0.35) !important;
}

/* ──────────────────────────────────────────────────────────────
   12. ANIMATIONS NUIT → MASQUÉES / ADAPTÉES
   ────────────────────────────────────────────────────────────── */
/* Filaments bioluminescents → masqués de jour (visible de nuit seulement) */
body.mode-jour .bio-filaments,
body.mode-jour .lucioles-night,
body.mode-jour .pandora-breath,
html[data-theme='light'] .bio-filaments,
html[data-theme='light'] .lucioles-night,
html[data-theme='light'] .pandora-breath {
  display: none !important;
}

/* Stars container → opacité 0 (fadeout) */
body.mode-jour .pandora-stars,
html[data-theme='light'] .pandora-stars {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────────────
   13. SCROLL INDICATOR
   ────────────────────────────────────────────────────────────── */
body.mode-jour .scroll-indicator,
html[data-theme='light'] .scroll-indicator {
  border-color: rgba(79, 195, 247, 0.35) !important;
}
body.mode-jour .scroll-chevron,
html[data-theme='light'] .scroll-chevron {
  color: rgba(79, 195, 247, 0.75) !important;
}

/* ──────────────────────────────────────────────────────────────
   14. SÉLECTION & SCROLLBAR
   ────────────────────────────────────────────────────────────── */
body.mode-jour ::selection,
html[data-theme='light'] ::selection {
  background: rgba(79, 195, 247, 0.28) !important;
  color: #061322 !important;
}
body.mode-jour *::-webkit-scrollbar-thumb,
html[data-theme='light'] *::-webkit-scrollbar-thumb {
  background: rgba(79, 195, 247, 0.32) !important;
}

/* ──────────────────────────────────────────────────────────────
   15. COMPTEURS / STATS
   ────────────────────────────────────────────────────────────── */
body.mode-jour [data-count],
html[data-theme='light'] [data-count],
body.mode-jour .stat-number,
html[data-theme='light'] .stat-number,
body.mode-jour .counter,
html[data-theme='light'] .counter {
  color: #4fc3f7 !important;
  text-shadow: 0 0 18px rgba(79, 195, 247, 0.35) !important;
}
body.mode-jour [data-count].counting,
html[data-theme='light'] [data-count].counting {
  text-shadow:
    0 0 28px rgba(79, 195, 247, 0.45),
    0 0 56px rgba(124, 77, 255, 0.2) !important;
}

/* ──────────────────────────────────────────────────────────────
   16. DRAWERS / MODALES
   ────────────────────────────────────────────────────────────── */
body.mode-jour .mobile-drawer-panel,
html[data-theme='light'] .mobile-drawer-panel {
  background: rgba(13, 27, 62, 0.96) !important;
  border-color: rgba(79, 195, 247, 0.14) !important;
}

body.mode-jour #cookie-banner,
html[data-theme='light'] #cookie-banner {
  background: rgba(13, 27, 62, 0.96) !important;
  color: #e3f2fd !important;
  border-color: rgba(79, 195, 247, 0.18) !important;
}

/* ──────────────────────────────────────────────────────────────
   17. OFFRES — éléments spécifiques
   ────────────────────────────────────────────────────────────── */
body.mode-jour .offre-prix,
html[data-theme='light'] .offre-prix,
body.mode-jour .prix-principal,
html[data-theme='light'] .prix-principal {
  color: #e3f2fd !important;
}

body.mode-jour .offre-footer,
html[data-theme='light'] .offre-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.mode-jour .offre-tag,
html[data-theme='light'] .offre-tag {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #b3e5fc !important;
  border-color: rgba(79, 195, 247, 0.22) !important;
}

/* ──────────────────────────────────────────────────────────────
   18. MOBILE OVERRIDE — cartes (surcharge nth-child)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.mode-jour .block,
  html[data-theme='light'] .block,
  body.mode-jour .card,
  html[data-theme='light'] .card,
  body.mode-jour .offre-card,
  html[data-theme='light'] .offre-card {
    background: rgba(13, 27, 62, 0.58) !important;
    border-color: rgba(79, 195, 247, 0.16) !important;
    color: #e3f2fd !important;
  }
  body.mode-jour .block-cyan,
  html[data-theme='light'] .block-cyan {
    background:
      linear-gradient(135deg, rgba(79, 195, 247, 0.18) 0%, transparent 60%), rgba(13, 27, 62, 0.62) !important;
  }
  body.mode-jour .block-violet,
  html[data-theme='light'] .block-violet {
    background:
      linear-gradient(135deg, rgba(124, 77, 255, 0.2) 0%, transparent 60%), rgba(13, 27, 62, 0.62) !important;
  }
  body.mode-jour .block-vert,
  html[data-theme='light'] .block-vert {
    background:
      linear-gradient(135deg, rgba(94, 234, 212, 0.14) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  }
  body.mode-jour .block-ambre,
  html[data-theme='light'] .block-ambre {
    background:
      linear-gradient(135deg, rgba(79, 195, 247, 0.16) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  }
  body.mode-jour .block-or,
  html[data-theme='light'] .block-or {
    background:
      linear-gradient(135deg, rgba(255, 213, 79, 0.1) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  }
  body.mode-jour .block-rose,
  html[data-theme='light'] .block-rose {
    background:
      linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, transparent 60%), rgba(13, 27, 62, 0.58) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   19. ICÔNES MODE TOGGLE
   ────────────────────────────────────────────────────────────── */
body.mode-jour .mode-toggle,
html[data-theme='light'] .mode-toggle {
  color: rgba(227, 242, 253, 0.55) !important;
}
body.mode-jour .mode-toggle:hover,
html[data-theme='light'] .mode-toggle:hover {
  color: #4fc3f7 !important;
}

/* ──────────────────────────────────────────────────────────────
   20. LOADER PANDORA JOUR
   ────────────────────────────────────────────────────────────── */
body.mode-jour #pandora-loader,
html[data-theme='light'] #pandora-loader {
  background: #060d1f !important;
}