/* ============================================================ */
/* DOORZR — style.css (Version corrigée - dark mode OK) */
/* ============================================================ */

/* ---------- IMPORTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- VARIABLES (DARK MODE) ---------- */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border: #e2e8f0;
}
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border: #334155;
}

/* ---------- BASE ---------- */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
details summary::-webkit-details-marker { display: none; }

/* ---------- COULEURS PERSONNALISÉES ---------- */
.bg-navy { background-color: #0B0B0E; }
.text-doorzr-blue { color: #2563eb; }
.bg-doorzr-orange { background-color: #FA8D6B; }
.underline-blue {
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 8px;
}

/* ---------- RÉVÉLATION AU SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.reveal.active { opacity: 1; transform: translateY(0); }

.delay-75  { transition-delay: 75ms; }
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

.apple-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.apple-reveal.active { opacity: 1; transform: translateY(0) scale(1); }
.apple-delay-1 { transition-delay: 0ms; }
.apple-delay-2 { transition-delay: 150ms; }
.apple-delay-3 { transition-delay: 300ms; }
.apple-delay-4 { transition-delay: 450ms; }

/* ---------- ANIMATIONS ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes ctaVibrate {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) rotate(-1deg); }
  20% { transform: translateX(4px) rotate(1deg); }
  30% { transform: translateX(-3px) rotate(-0.5deg); }
  40% { transform: translateX(3px) rotate(0.5deg); }
  50%, 60%, 70%, 80% { transform: translateX(0); }
}
.cta-vibrate { animation: ctaVibrate 0.6s ease-in-out; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes answerReveal {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- BANDEAU PARTENAIRES (DÉFILEMENT INFINI) ---------- */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.partners-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
}
.partners-track:hover {
  animation-play-state: paused;
}
.partners-track img {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: all 0.4s ease;
  flex-shrink: 0;
}
.partners-track img:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}
[data-theme="dark"] .partners-track img {
  opacity: 0.35;
  filter: grayscale(100%) brightness(2);
}
[data-theme="dark"] .partners-track img:hover {
  opacity: 0.7;
  filter: grayscale(0%) brightness(1.2);
}

/* ---------- NAVIGATION ---------- */
.nav-link-hover { position: relative; }
.nav-link-hover::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #2563eb;
  transition: width 0.3s ease;
}
.nav-link-hover:hover::after { width: 100%; }

nav {
  background-color: var(--bg-primary) !important;
}
nav.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
nav.scrolled .nav-inner { height: 3.5rem; }
nav.scrolled .nav-logo { width: 2rem; height: 2rem; }
nav.scrolled .nav-title { font-size: 1.25rem; }
[data-theme="dark"] #main-nav {
  background-color: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(12px);
}

/* Hamburger */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #0f172a;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
[data-theme="dark"] .hamburger span { background-color: #f1f5f9; }
[data-theme="dark"] .hamburger:hover span { background-color: #60a5fa; }

/* Menu mobile */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -5px 0 30px rgba(0,0,0,0.1);
}
.mobile-menu.open { transform: translateX(0); }
[data-theme="dark"] .mobile-menu { background-color: #0f172a; }
[data-theme="dark"] .mobile-link {
  border-color: #334155;
  color: #e2e8f0;
}

/* Dropdown mobile */
.mobile-dropdown-content {
  transition: all 0.3s ease;
}
.mobile-dropdown-content.hidden { display: none; }
.mobile-dropdown-content:not(.hidden) {
  display: block;
  animation: slideDown 0.3s ease;
}
.mobile-dropdown-btn i { transition: transform 0.3s ease; }
[data-theme="dark"] .mobile-dropdown { border-color: #334155; }
[data-theme="dark"] .mobile-dropdown-btn { color: #f1f5f9; background: transparent; }
[data-theme="dark"] .mobile-dropdown-btn i { color: #94a3b8; }
[data-theme="dark"] .mobile-dropdown-content {
  background: #1e293b;
  border-radius: 12px;
  margin-top: 8px;
  padding: 8px;
}
[data-theme="dark"] .mobile-dropdown-content a {
  color: #cbd5e1;
  padding: 10px 0;
  display: block;
}
[data-theme="dark"] .mobile-dropdown-content a:hover {
  color: #60a5fa;
  background: #334155;
}

/* ============================================================ */
/* DROPDOWN SETTINGS MOBILE */
/* ============================================================ */

/* État normal (mode clair) */
#mobile-settings-menu {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: fadeInDown 0.2s ease;
  min-width: 140px;
}

#mobile-settings-menu button {
  color: #1e293b;
  font-size: 0.875rem;
  padding: 8px 12px;
  width: 100%;
  text-align: left;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#mobile-settings-menu button:hover {
  background-color: #f1f5f9;
}

#mobile-settings-menu button i {
  width: 20px;
  text-align: center;
}

/* Mode sombre */
[data-theme="dark"] #mobile-settings-menu {
  background-color: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #mobile-settings-menu button {
  color: #e2e8f0;
}

[data-theme="dark"] #mobile-settings-menu button:hover {
  background-color: #334155;
}

/* Bouton d'ouverture */
#mobile-settings-btn {
  background-color: #f1f5f9;
  border: none;
  border-radius: 9999px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

#mobile-settings-btn:hover {
  background-color: #e2e8f0;
}

#mobile-settings-btn i {
  color: #334155;
  font-size: 14px;
}

[data-theme="dark"] #mobile-settings-btn {
  background-color: #334155;
}

[data-theme="dark"] #mobile-settings-btn:hover {
  background-color: #475569;
}

[data-theme="dark"] #mobile-settings-btn i {
  color: #f1f5f9;
}

/* ---------- TIMELINE ---------- */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: auto;
  height: 0;
  width: 3px;
  background: #e2e8f0;
  transform: translateX(-50%);
  transition: height 0.1s linear;
  z-index: 0;
}
[data-theme="dark"] .timeline::before { background: #334155; }

.timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, #2563eb, #3b82f6);
  transform: translateX(-50%);
  transition: height 0.1s linear;
  z-index: 1;
  border-radius: 0 0 2px 2px;
}
.tl-step { position: relative; display: flex; align-items: center; }
.tl-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  z-index: 2;
  border: 4px solid #f8fafc;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tl-step.active .tl-num {
  background: #2563eb;
  color: white;
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.15), 0 8px 30px rgba(37, 99, 235, 0.3);
}
.tl-card {
  width: calc(50% - 52px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}
.tl-left .tl-card { margin-right: auto; transform: translateX(-80px) rotate(-2deg); }
.tl-right .tl-card { margin-left: auto; transform: translateX(80px) rotate(2deg); }
.tl-step.active .tl-card { opacity: 1; transform: translateX(0) rotate(0deg); }

/* Timeline responsive */
@media (max-width: 767px) {
  .timeline::before, .timeline-progress { left: 20px; }
  .tl-num {
    left: 20px;
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    transform: translate(-50%, -50%);
  }
  .tl-step.active .tl-num { transform: translate(-50%, -50%) scale(1.15); }
  .tl-step { display: block; padding-left: 52px; }
  .tl-card { width: 100%; transform: translateY(40px) !important; margin: 0 !important; }
  .tl-step.active .tl-card { transform: translateY(0) !important; }
}

/* ---------- FAQ ---------- */
.faq-chevron {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-chevron::before,
.faq-chevron::after {
  content: '';
  position: absolute;
  background-color: #94a3b8;
  transition: all 0.3s ease;
}
.faq-chevron::before { top: 5px; left: 0; width: 12px; height: 2px; border-radius: 2px; }
.faq-chevron::after { top: 0; left: 5px; width: 2px; height: 12px; border-radius: 2px; }
.group[open] .faq-chevron { transform: rotate(135deg); }
.group[open] .faq-chevron::before,
.group[open] .faq-chevron::after { background-color: #2563eb; }
.group[open] .faq-icon { color: #2563eb; background-color: #eff6ff; animation: iconBounce 0.5s ease-out; }
.group[open] .faq-answer { animation: answerReveal 0.4s ease-out forwards; }

/* ---------- BOUTONS ---------- */
.theme-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.theme-toggle:hover { transform: scale(1.05); }

.cta-button { background: #2563eb; }
.cta-button:hover { background: #1d4ed8; }
[data-theme="dark"] .cta-button { background: #2563eb; }
[data-theme="dark"] .cta-button:hover { background: #1d4ed8; }


/* ---------- DARK MODE OVERRIDES ---------- */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-white\/90 {
  background-color: var(--bg-primary) !important;
}
[data-theme="dark"] .bg-slate-50 {
  background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-700 {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-slate-900 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200 {
  border-color: var(--border) !important;
}
[data-theme="dark"] .tl-card,
[data-theme="dark"] .bg-white.p-6,
[data-theme="dark"] .bg-slate-50.p-5 {
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] #theme-toggle,
[data-theme="dark"] #mobile-theme-toggle {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] #theme-toggle i,
[data-theme="dark"] #mobile-theme-toggle i { color: #fbbf24; }

[data-theme="dark"] details {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] details h4 { color: white; }
[data-theme="dark"] .faq-answer {
  color: #cbd5e1;
  border-top-color: #334155;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
  .inline-flex.items-center.bg-blue-600 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 11px !important;
  }
  .gap-2 { gap: 6px !important; }
  .nav-logo { width: 32px !important; height: 32px !important; }
  .nav-title { font-size: 1.25rem !important; }
  .nav-inner { height: 64px !important; }
}
@media (max-width: 380px) {
  .cta-button { padding-left: 8px !important; padding-right: 8px !important; }
  .cta-text-short { font-size: 10px !important; }
  .nav-logo { width: 28px !important; height: 28px !important; }
  .nav-title { font-size: 1.1rem !important; }
  .theme-toggle { width: 28px !important; height: 28px !important; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .inline-flex.items-center.bg-blue-600 {
    font-size: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================ */
/* BOUTON DE LANGUE - CORRECTION COULEURS */
/* ============================================================ */

/* Mode clair */
.lang-toggle {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}
.lang-toggle:hover {
  transform: scale(1.05);
  background-color: #e2e8f0 !important;
}
.lang-toggle span,
.lang-toggle i {
  color: var(--text-primary) !important;
}

/* Mode sombre */
[data-theme="dark"] .lang-toggle {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .lang-toggle:hover {
  background: #334155 !important;
}
[data-theme="dark"] .lang-toggle span,
[data-theme="dark"] .lang-toggle i {
  color: #f1f5f9 !important;
}

/* ============================================================ */
/* DROPDOWN LANGUE (DESKTOP + MOBILE) */
/* ============================================================ */

/* Desktop dropdown */
.lang-menu {
  animation: fadeInDown 0.2s ease;
}
.lang-menu .lang-option {
  color: #1e293b;
  font-weight: 500;
  cursor: pointer;
}
.lang-menu .lang-option:hover {
  background-color: #f1f5f9;
}
.lang-menu .lang-option.lang-active {
  background-color: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}
[data-theme="dark"] .lang-menu {
  background-color: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .lang-menu .lang-option {
  color: #e2e8f0;
}
[data-theme="dark"] .lang-menu .lang-option:hover {
  background-color: #334155;
}
[data-theme="dark"] .lang-menu .lang-option.lang-active {
  background-color: #1e3a5f;
  color: #60a5fa;
}

/* Chevron rotation when open */
.lang-dropdown .lang-chevron {
  transition: transform 0.2s ease;
}

/* Mobile lang sub-menu */
.mobile-lang-submenu .mobile-lang-option {
  color: #1e293b;
  cursor: pointer;
}
.mobile-lang-submenu .mobile-lang-option:hover {
  background-color: #f1f5f9;
}
.mobile-lang-submenu .mobile-lang-option.lang-active {
  background-color: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}
[data-theme="dark"] .mobile-lang-submenu .mobile-lang-option {
  color: #e2e8f0;
}
[data-theme="dark"] .mobile-lang-submenu .mobile-lang-option:hover {
  background-color: #334155;
}
[data-theme="dark"] .mobile-lang-submenu .mobile-lang-option.lang-active {
  background-color: #1e3a5f;
  color: #60a5fa;
}
[data-theme="dark"] #mobile-lang-header {
  color: #e2e8f0;
}

/* ============================================================ */
/* BOUTON CTA - CORRECTION DARK MODE */
/* ============================================================ */

/* Bouton Hero (fond #0f172a) */
.bg-\[\#0f172a\] {
  background-color: #0f172a !important;
}

[data-theme="dark"] .bg-\[\#0f172a\] {
  background-color: #1e293b !important;
  border: 1px solid #3b82f6 !important;
}

/* Bouton CTA principal (bleu) */
.cta-button {
  background-color: #2563eb !important;
}

[data-theme="dark"] .cta-button {
  background-color: #3b82f6 !important;
}

[data-theme="dark"] .cta-button:hover {
  background-color: #2563eb !important;
}

/* Bouton orange dans la section Pitch */
.bg-doorzr-orange {
  background-color: #FA8D6B !important;
  color: #1e293b !important;
}

[data-theme="dark"] .bg-doorzr-orange {
  background-color: #f97316 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-doorzr-orange:hover {
  background-color: #ea580c !important;
}

/* ---------- BOUTON REVENDEUR (NAV DESKTOP) ---------- */
[data-theme="dark"] a[data-i18n="nav.reseller"] {
  background-color: transparent !important;
  border-color: #64748b !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] a[data-i18n="nav.reseller"]:hover {
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}