/* =====================================================================
   VELCOLS — MOBILE LIGHT MODE v2
   Appliqué uniquement sur mobile (≤ 767px)
   Approche : overrides directs + body[data-mobile] pour les custom props
   Design iOS · Fond blanc · Inter + DM Serif Display
   ===================================================================== */

/* ── TOKENS : redéfinition globale sur mobile ─────────────────────────
   Note : :root dans @media ne fonctionne pas partout — on les définit
   directement sur :root sans media query mais avec spécificité mobile
   via les sélecteurs ci-dessous
   ──────────────────────────────────────────────────────────────────── */

/* On écrase les variables au niveau :root sur mobile via un hack :
   le fichier est chargé avec media="(max-width:767px)"
   donc il est ignoré sur desktop → on peut redéfinir :root directement */
:root {
  --bg:            #FFFFFF;
  --bg-2:          #F5F5F5;
  --bg-3:          #FAFAFA;
  --panel:         #FFFFFF;

  --ink:           #1C1C1E;
  --ink-2:         #3A3A3C;
  --ink-3:         #6C6C70;
  --ink-4:         #AEAEB2;

  --rule:          #E5E5EA;
  --rule-2:        #D1D1D6;

  /* Accent vert iOS — remplace oklch */
  --accent:        #16a34a;
  --accent-ink:    #FFFFFF;
  --accent-soft:   rgba(22, 163, 74, 0.10);
  --accent-2:      #16a34a;
  --accent-3:      #007AFF;

  /* Ombres légères iOS */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 0 rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.08);

  /* Polices */
  --sans:  "Inter", -apple-system, ui-sans-serif, system-ui, sans-serif;
  --serif: "DM Serif Display", ui-serif, Georgia, serif;
}

/* ── BASE MOBILE ──────────────────────────────────────────────────── */
html, body {
  background: #F5F5F5 !important;
  color: #1C1C1E !important;
  font-family: "Inter", -apple-system, ui-sans-serif, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER MOBILE ────────────────────────────────────────────────── */
header {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid #E5E5EA !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
}
header .serif { color: #16a34a !important; }

/* ── BOTTOM NAV — style iOS light 84px ───────────────────────────── */
.mobile-bottom-nav {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid #E5E5EA !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  height: 84px !important;
  padding-top: 10px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  align-items: flex-start !important;
}
/* Icônes bottom nav inactives : pas de fond coloré plein */
.mobile-bottom-nav a > span,
.mobile-bottom-nav a > div,
.mobile-bottom-nav button > span,
.mobile-bottom-nav button > div {
  background: transparent !important;
}
/* S'assurer qu'aucun fond coloré carré n'apparaît sur les items inactifs */
.mobile-bottom-nav a[style*="background"],
.mobile-bottom-nav a > span[style*="background"],
.mobile-bottom-nav button[style*="background"] {
  background: transparent !important;
}
.mobile-bottom-spacer { height: 84px !important; }

/* ── FOND GÉNÉRAL DES SECTIONS ────────────────────────────────────── */
/* La page mobile est sur fond #F5F5F5 avec des cards blanches */
#app, main, [id="app"] > * { background: #F5F5F5 !important; }

/* Sections avec fond panel (blanc) */
section { background: #F5F5F5 !important; }

/* Toutes les cards / panels en blanc */
div[style*="background: var(--panel)"],
div[style*="background:var(--panel)"],
div[style*='background: "var(--panel)"'] {
  background: #FFFFFF !important;
}

/* ── STAT STRIP (4 compteurs sous le hero) ───────────────────────── */
/* Fond blanc, bordure fine, coins arrondis */
div[style*="border: 1px solid var(--rule)"][style*="border-radius: 14"],
div[style*='border: "1px solid var(--rule)"'][style*="borderRadius: 14"] {
  background: #FFFFFF !important;
  border-color: #E5E5EA !important;
}

/* ── CAROUSEL COLS DE LA SEMAINE ─────────────────────────────────── */
/* Cards cols — fond blanc */
a[href*="/cols/"][style*="borderRadius: 16"],
a[href*="/cols/"][style*="border-radius: 16"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E5EA !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

/* Mini stats dans les cards cols */
div[style*="background: var(--bg-2)"][style*="borderRadius: 8"],
div[style*='background: "var(--bg-2)"'][style*="borderRadius: 8"] {
  background: #F5F5F5 !important;
}

/* ── CARD ÉDITORIALE (article vedette) ───────────────────────────── */
a[style*="borderRadius: 18"][style*="border: 1px solid var(--rule)"],
a[style*="border-radius: 18"][style*="border"] {
  border-color: #E5E5EA !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
/* Méta auteur sous la card éditoriale */
div[style*="background: var(--panel)"][style*="padding: \"11px 14px\""],
div[style*='background: "var(--panel)"'][style*="padding"] {
  background: #FFFFFF !important;
}

/* ── LISTE ARTICLES ──────────────────────────────────────────────── */
/* Container liste — fond blanc, radius 16 */
div[style*="background: var(--panel)"][style*="borderRadius: 16"],
div[style*='background: "var(--panel)"'][style*="borderRadius: 16"] {
  background: #FFFFFF !important;
  border-color: #E5E5EA !important;
}
/* Lignes de séparation dans la liste */
a[style*="borderBottom: \"1px solid var(--rule)\""],
a[style*='borderBottom: "1px solid var(--rule)"'] {
  border-bottom-color: #E5E5EA !important;
}
/* Thumbnail articles */
div[style*="borderRadius: 10"][style*="background: var(--bg-2)"],
div[style*="border-radius: 10"][style*="background"] {
  background: #F5F5F5 !important;
  border-color: #E5E5EA !important;
}

/* ── GUIDES PRATIQUES (chips scroll) ────────────────────────────── */
a[style*="background: var(--panel)"][style*="borderRadius: 16"][style*="width: 150"],
a[style*='background: "var(--panel)"'][style*="border-radius: 16"] {
  background: #FFFFFF !important;
  border-color: #E5E5EA !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
}
/* Icône emoji dans guides */
div[style*="background: linear-gradient(135deg, var(--bg-2)"] {
  background: #F5F5F5 !important;
  border-color: #D1D1D6 !important;
}

/* ── TYPOGRAPHIE MOBILE ──────────────────────────────────────────── */
h1, h2, h3 { color: #1C1C1E !important; }
p { color: #3A3A3C; }

/* Titres sections (serif) */
.serif { font-family: "DM Serif Display", ui-serif, Georgia, serif !important; }

/* ── COULEURS ACCENT ─────────────────────────────────────────────── */
/* Tous les textes avec color: var(--accent) → vert iOS */
[style*="color: var(--accent)"],
[style*='color: "var(--accent)"'] { color: #16a34a !important; }
[style*="color: var(--ink-3)"],
[style*='color: "var(--ink-3)"'] { color: #6C6C70 !important; }
[style*="color: var(--ink-4)"],
[style*='color: "var(--ink-4)"'] { color: #AEAEB2 !important; }

/* ── BOUTON "COLS AUTOUR DE MOI" ─────────────────────────────────── */
/* Conservé — bleu iOS → OK déjà bien */

/* ── BOUTON "ENREGISTRER UNE ASCENSION" ──────────────────────────── */
/* Conservé — vert si connecté, gris si non connecté → OK */

/* ── QUICK ACTIONS 2×2 ───────────────────────────────────────────── */
/* Conservées — fond photo sombre → OK */

/* ── SIGNUP BANNER ────────────────────────────────────────────────── */
/* Conservée — fond sombre photo → OK */

/* ── SEARCH BAR ──────────────────────────────────────────────────── */
/* Si présente dans d'autres pages */
input, textarea, select {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E5EA !important;
  color: #1C1C1E !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.10) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: #AEAEB2 !important; }

/* ── DRAWER MENU ─────────────────────────────────────────────────── */
.cf-mobile-drawer {
  background: #FFFFFF !important;
  border-right: 1px solid #E5E5EA !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.10) !important;
}
.cf-mobile-drawer a { color: #1C1C1E !important; border-bottom: 1px solid #F5F5F5 !important; }
.cf-mobile-drawer a:hover,
.cf-mobile-drawer a.active { background: rgba(22,163,74,0.06) !important; color: #16a34a !important; }
.cf-mobile-drawer a.cf-suggestion-cta {
  background: #16a34a !important; color: #FFFFFF !important;
  border-radius: 12px !important; margin: 8px 12px !important;
}
.cf-mobile-drawer-overlay { background: rgba(0,0,0,0.30) !important; }

/* ── FOOTER MOBILE ───────────────────────────────────────────────── */
footer {
  background: #F5F5F5 !important;
  border-top: 1px solid #E5E5EA !important;
}

/* ── LEAFLET ─────────────────────────────────────────────────────── */
.leaflet-container { background: #F5F5F5 !important; }
.leaflet-control-zoom a { background: #FFFFFF !important; color: #1C1C1E !important; border-color: #E5E5EA !important; }

/* ── LOADING SPLASH ──────────────────────────────────────────────── */
#loading { background: #FFFFFF !important; color: #6C6C70 !important; }

/* ── SCROLLBAR MASQUÉE ───────────────────────────────────────────── */
::-webkit-scrollbar { display: none !important; width: 0 !important; }
* { scrollbar-width: none !important; }

/* ── SÉLECTION ───────────────────────────────────────────────────── */
::selection { background: rgba(22,163,74,0.18) !important; color: #1C1C1E !important; }

/* ── ANIMATION ENTRÉE ─────────────────────────────────────────────── */
#app > * { animation: mobileSlideUp 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
@keyframes mobileSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}