/* =====================================================================
   VELCOLS — RESPONSIVE STYLES v4 — MOBILE-FIRST COMPLET
   Breakpoints : mobile ≤ 767px | tablet 768-1023px | desktop ≥ 1024px
   ===================================================================== */

/* ── BASE ─────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }

/* ── VISIBILITÉ MOBILE/DESKTOP ───────────────────────────────────── */
.desktop-nav  { display: flex !important; }
.mobile-only  { display: none !important; }
.mobile-bottom-nav     { display: none !important; }
.mobile-bottom-spacer  { display: none !important; }

/* ── TABLET (≤ 1023px) ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .desktop-nav  { display: none !important; }
  .mobile-only  { display: flex !important; }
  .mobile-bottom-nav    { display: flex !important; }
  .mobile-bottom-spacer { display: block !important; height: 64px !important; }

  /* Header */
  header > div { padding: 10px 16px !important; gap: 10px !important; }

  /* Footer — 2 colonnes sur tablette */
  footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  footer { padding: 36px 20px 100px !important; }

  /* Hero sections : hauteur auto */
  section[style*="height: 640"],
  section[style*="height: 560"],
  section[style*="height: 520"],
  section[style*="height: 440"],
  section[style*="height: 420"],
  section[style*="height: 400"] {
    height: auto !important;
    min-height: 50vh !important;
  }

  /* Conteneurs max-width */
  [style*="max-width: 1440px"], [style*="max-width: 1200px"],
  [style*="max-width: 900px"], [style*="max-width: 720px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  /* Grilles → 2 colonnes */
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(3, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(5, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(6, 1fr)\""] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  div[style*="gridTemplateColumns: \"1.4fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.3fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.2fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"2fr 1fr 1fr 1fr 1fr\""] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  div[style*="gridTemplateColumns: \"1.5fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.3fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.2fr 1fr\""],
  div[style*="gridTemplateColumns: \"1fr 1.15fr 1fr\""] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  div[style*="gridTemplateColumns: \"260px 1fr\""],
  div[style*="gridTemplateColumns: \"240px 1fr\""],
  div[style*="gridTemplateColumns: \"340px 1fr\""],
  div[style*="gridTemplateColumns: \"320px 1fr\""],
  div[style*="gridTemplateColumns: \"1fr 340px\""] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  div[style*="gridTemplateColumns: \"260px 1fr\""] > aside,
  div[style*="gridTemplateColumns: \"240px 1fr\""] > aside,
  section[style*="gridTemplateColumns: \"260px 1fr\""] > aside { display: none !important; }
  div[style*="gridTemplateColumns: \"1fr 340px\""] > aside { display: none !important; }

  /* Login page */
  div[style*="gridTemplateColumns: \"1fr 1fr\""][style*="minHeight"] {
    grid-template-columns: 1fr !important; min-height: auto !important;
  }
  div[style*="gridTemplateColumns: \"1fr 1fr\""][style*="minHeight"] > div:first-child { display: none !important; }

  /* Carte leaflet */
  div[style*="gridTemplateColumns: \"340px 1fr\""][style*="height"] {
    display: block !important; height: auto !important; min-height: 0 !important;
  }
  div[style*="gridTemplateColumns: \"340px 1fr\""][style*="height"] > aside {
    display: none !important; position: fixed !important; top: 62px !important;
    left: 0 !important; right: 0 !important; bottom: 64px !important;
    z-index: 400 !important; max-height: calc(100vh - 62px) !important;
    overflow-y: auto !important; background: var(--panel) !important;
  }
  body[data-map-filters-open="true"] div[style*="gridTemplateColumns: \"340px 1fr\""][style*="height"] > aside { display: flex !important; }
  div[style*="gridTemplateColumns: \"340px 1fr\""][style*="height"] > div[style*="relative"] { height: calc(100vh - 62px) !important; }

  /* Paddings sections */
  section[style*="padding: \"80px 40px"],
  section[style*="padding: \"72px 40px"],
  section[style*="padding: \"60px 40px"],
  section[style*="padding: \"48px 40px"],
  section[style*="padding: \"40px 40px"] { padding: 32px 20px !important; }
  section[style*="padding: \"80px"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  section[style*="padding: \"72px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  section[style*="padding: \"60px"] { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* Paddings blocs internes */
  div[style*="padding: \"48px 52px\""], div[style*="padding: \"40px 44px\""] { padding: 24px 20px !important; }
  div[style*="padding: \"72px 60px\""], div[style*="padding: \"60px 60px\""] { padding: 32px 20px !important; }

  /* Typographie */
  h1[style*="fontSize: 108"], h1[style*="fontSize: 104"],
  h1[style*="fontSize: 96"],  h1[style*="fontSize: 88"] { font-size: 44px !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; }
  h1[style*="fontSize: 76"],  h1[style*="fontSize: 72"],
  h1[style*="fontSize: 68"],  h1[style*="fontSize: 64"] { font-size: 36px !important; line-height: 1.08 !important; }
  h1[style*="fontSize: 60"],  h1[style*="fontSize: 56"],
  h1[style*="fontSize: 52"],  h1[style*="fontSize: 48"] { font-size: 30px !important; line-height: 1.1 !important; }
  h2[style*="fontSize: 56"], h2[style*="fontSize: 52"],
  h2[style*="fontSize: 46"], h2[style*="fontSize: 42"] { font-size: 28px !important; line-height: 1.1 !important; }
  h2[style*="fontSize: 40"], h2[style*="fontSize: 36"],
  h2[style*="fontSize: 34"], h2[style*="fontSize: 32"] { font-size: 24px !important; }
  h3[style*="fontSize: 44"], h3[style*="fontSize: 42"],
  h3[style*="fontSize: 40"], h3[style*="fontSize: 36"],
  h3[style*="fontSize: 32"] { font-size: 22px !important; line-height: 1.15 !important; }
  h3[style*="fontSize: 26"], h3[style*="fontSize: 24"] { font-size: 19px !important; }
  p[style*="fontSize: 22"], p[style*="fontSize: 20"],
  p[style*="fontSize: 19"], p[style*="fontSize: 18"] { font-size: 15px !important; line-height: 1.55 !important; }

  /* Margin négatif cards */
  div[style*="margin: \"-56px"], div[style*="margin: \"-40px"] { margin: -12px 12px 0 !important; }

  /* Transform reset */
  div[style*="transform: \"translateY(-20px)\""],
  div[style*="transform: \"translateY(-16px)\""] { transform: none !important; }
}

/* ── MOBILE (≤ 767px) ────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Header */
  header > div { padding: 10px 14px !important; }

  /* Bottom nav + spacer */
  .mobile-bottom-nav { height: 58px; }
  .mobile-bottom-spacer { height: 58px !important; }
  footer { padding-bottom: 80px !important; }

  /* Hero home — plus court sur mobile */
  section[style*="height: 640"],
  section[style*="height: 560"],
  section[style*="height: 520"] {
    height: auto !important;
    min-height: 55vmax !important;
    max-height: 92vh !important;
  }
  section[style*="height: 440"],
  section[style*="height: 420"],
  section[style*="height: 400"] {
    height: auto !important;
    min-height: 220px !important;
  }

  /* Hero : position du contenu */
  section[style*="height: 640"] > div[style*="absolute"],
  section[style*="height: 560"] > div[style*="absolute"],
  section[style*="height: 520"] > div[style*="absolute"] {
    padding: 20px 18px 28px !important;
    justify-content: flex-end !important;
  }

  /* Conteneurs max-width */
  [style*="max-width: 1440px"], [style*="max-width: 1200px"],
  [style*="max-width: 900px"], [style*="max-width: 720px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
  }

  /* Toutes les grilles → 1 colonne sur mobile */
  div[style*="gridTemplateColumns: \"repeat(2, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(3, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(5, 1fr)\""],
  div[style*="gridTemplateColumns: \"repeat(6, 1fr)\""],
  div[style*="gridTemplateColumns: \"1.4fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.3fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.2fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"2fr 1fr 1fr 1fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.5fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.3fr 1fr\""],
  div[style*="gridTemplateColumns: \"1.2fr 1fr\""],
  div[style*="gridTemplateColumns: \"1fr 1.15fr 1fr\""],
  div[style*="gridTemplateColumns: \"1fr 1fr\""] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Exception : compteurs live → 2 colonnes sur mobile */
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""][style*="28px 36px"] {
    grid-template-columns: 1fr 1fr !important;
    padding: 16px !important;
    gap: 14px !important;
  }
  /* Valeurs compteurs plus petites */
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""][style*="28px 36px"] .serif.num {
    font-size: 26px !important;
  }

  /* Cards cols dans la liste → 1 colonne (scroll vertical) */
  div[style*="gridTemplateColumns: \"repeat(3, 1fr)\""] a[href*="/cols/"],
  div[style*="gridTemplateColumns: \"repeat(2, 1fr)\""] a[href*="/cols/"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Featured cols : la big card en haut, les 2 autres dessous */
  div[style*="gridTemplateColumns: \"1.4fr 1fr 1fr\""] { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Carte stats home : 2 col */
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Sections padding mobile */
  section[style*="padding: \"80px 40px"],
  section[style*="padding: \"72px 40px"],
  section[style*="padding: \"60px 40px"],
  section[style*="padding: \"48px 40px"],
  section[style*="padding: \"40px 40px"] { padding: 24px 14px !important; }
  section[style*="padding: \"80px"]  { padding-top: 28px !important; padding-bottom: 28px !important; }
  section[style*="padding: \"72px"]  { padding-top: 24px !important; padding-bottom: 24px !important; }
  section[style*="padding: \"60px"]  { padding-top: 22px !important; padding-bottom: 22px !important; }
  section[style*="padding: \"32px 40px"] { padding-left: 14px !important; padding-right: 14px !important; }

  /* Blocs internes padding */
  div[style*="padding: \"48px 52px\""], div[style*="padding: \"40px 44px\""] { padding: 20px 16px !important; }
  div[style*="padding: \"72px 60px\""], div[style*="padding: \"60px 60px\""],
  div[style*="padding: \"56px 60px\""] { padding: 24px 16px !important; }
  div[style*="padding: \"32px 40px\""] { padding: 18px 14px !important; }

  /* Typographie mobile agressive */
  h1[style*="fontSize: 108"], h1[style*="fontSize: 104"],
  h1[style*="fontSize: 96"],  h1[style*="fontSize: 88"] {
    font-size: 36px !important; line-height: 1.05 !important; letter-spacing: -0.02em !important;
  }
  h1[style*="fontSize: 76"], h1[style*="fontSize: 72"],
  h1[style*="fontSize: 68"], h1[style*="fontSize: 64"] {
    font-size: 30px !important; line-height: 1.08 !important;
  }
  h1[style*="fontSize: 60"], h1[style*="fontSize: 56"],
  h1[style*="fontSize: 52"] { font-size: 26px !important; line-height: 1.1 !important; }
  h2[style*="fontSize: 56"], h2[style*="fontSize: 52"],
  h2[style*="fontSize: 46"], h2[style*="fontSize: 42"],
  h2[style*="fontSize: 40"] { font-size: 24px !important; line-height: 1.1 !important; }
  h2[style*="fontSize: 36"], h2[style*="fontSize: 34"],
  h2[style*="fontSize: 32"] { font-size: 21px !important; }
  h3[style*="fontSize: 44"], h3[style*="fontSize: 42"],
  h3[style*="fontSize: 40"], h3[style*="fontSize: 36"],
  h3[style*="fontSize: 32"], h3[style*="fontSize: 28"] { font-size: 20px !important; line-height: 1.2 !important; }
  h3[style*="fontSize: 26"], h3[style*="fontSize: 24"],
  h3[style*="fontSize: 22"] { font-size: 17px !important; }
  p[style*="fontSize: 22"], p[style*="fontSize: 20"],
  p[style*="fontSize: 19"] { font-size: 15px !important; line-height: 1.55 !important; }
  p[style*="fontSize: 18"] { font-size: 14px !important; line-height: 1.6 !important; }
  /* Stat numbers dans les cards */
  div[style*="fontSize: 34"] { font-size: 26px !important; }

  /* Barre de recherche full width */
  div[style*="maxWidth: 720"][style*="border-radius: 999"] { max-width: 100% !important; }
  div[style*="max-width: 720px"][style*="border"] { max-width: 100% !important; }

  /* Section header : titre + CTA en colonne */
  div[style*="justifyContent: \"space-between\""][style*="alignItems: \"flex-end\""] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Boutons CTA flexbox sur mobile */
  div[style*="display: \"flex\""][style*="gap: 12"][style*="flexWrap: \"wrap\""] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  div[style*="display: \"flex\""][style*="gap: 12"][style*="flexWrap: \"wrap\""] a { width: 100% !important; justify-content: center !important; }

  /* Signup band : texte plein écran */
  section[style*="padding: \"60px 40px\""] > div[style*="72px 60px"] > div[style*="maxWidth: 560"] { max-width: 100% !important; }

  /* Editorial feature strip : image cachée sur mobile */
  div[style*="gridTemplateColumns: \"1.2fr 1fr\""][style*="padding: \"48px 52px\""] { grid-template-columns: 1fr !important; }
  div[style*="gridTemplateColumns: \"1.2fr 1fr\""][style*="padding: \"48px 52px\""] > figure { display: none !important; }

  /* Cards cols stats → 4 chiffres sur 2 lignes */
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""][style*="gap: 12"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Overflow margin négatif */
  div[style*="margin: \"-56px"], div[style*="margin: \"-40px"] {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  div[style*="transform: \"translateY"] { transform: none !important; }

  /* Footer mobile */
  footer > div > div:first-child { grid-template-columns: 1fr !important; gap: 20px !important; }
  footer > div > div:last-child { flex-direction: column !important; gap: 10px !important; text-align: center !important; }

  /* Blog / articles liste */
  div[style*="gridTemplateColumns: \"1fr 1fr\""] > article,
  div[style*="gridTemplateColumns: \"repeat(3, 1fr)\""] > article { width: 100% !important; }

  /* Fiche col — profil alti full width */
  div[style*="gridTemplateColumns: \"1fr 320px\""],
  div[style*="gridTemplateColumns: \"1fr 340px\""] {
    grid-template-columns: 1fr !important;
  }

  /* Profil alti sur fiche col : hauteur réduite */
  svg[style*="width: \"100%\""][style*="height: \"auto\""] { max-height: 180px !important; }

  /* Photos hero sur fiches col */
  div[style*="aspectRatio: \"16/10\""],
  div[style*="aspectRatio: \"16 / 10\""] { aspect-ratio: 4/3 !important; }

  /* Stats 4 col dans card col → 2x2 */
  div[style*="gridTemplateColumns: \"repeat(4, 1fr)\""][style*="borderTop"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Guide cards → pleine largeur */
  div[style*="gridTemplateColumns: \"repeat(3, 1fr)\""] > a[href*="guides"],
  div[style*="gridTemplateColumns: \"repeat(2, 1fr)\""] > a[href*="guides"] { width: 100% !important; }

  /* Filters pills — scroll horizontal */
  div[style*="display: \"flex\""][style*="gap: 8"][style*="flexWrap: \"wrap\""] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  div[style*="display: \"flex\""][style*="gap: 8"][style*="flexWrap: \"wrap\""]::-webkit-scrollbar { display: none; }

  /* Carte page — carte full screen */
  div[style*="gridTemplateColumns: \"340px 1fr\""][style*="height"] > div:last-child {
    height: calc(100vh - 62px - 58px) !important;
  }

  /* Communauté — masquer sidebar */
  div[style*="gridTemplateColumns: \"1fr 340px\""] > aside,
  section[style*="gridTemplateColumns: \"1fr 340px\""] > aside { display: none !important; }

  /* Tableau classements → scroll horizontal */
  div[style*="overflow: \"auto\""] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 580px; font-size: 12px !important; }

  /* Image guides hero */
  section[style*="backgroundImage"][style*="hero-guides"] { min-height: 220px !important; }
  section[style*="backgroundImage"][style*="hero-guides"] div[style*="maxWidth: 4xl"] { padding: 20px 16px !important; }
  section[style*="backgroundImage"][style*="hero-guides"] h1 { font-size: 28px !important; }

  /* Guide card image */
  div[style*="height: 200px"],
  div[style*="height: \"200px\""] { height: 160px !important; }
  div[style*="height: 240px"],
  div[style*="height: \"240px\""] { height: 180px !important; }

  /* Compte / profil */
  div[style*="gridTemplateColumns: \"260px 1fr\""] > aside { display: none !important; }
}

/* ── TRÈS PETIT MOBILE (≤ 380px) ─────────────────────────────────── */
@media (max-width: 380px) {
  header > div { padding: 9px 12px !important; }
  h1[style*="fontSize: 108"], h1[style*="fontSize: 96"],
  h1[style*="fontSize: 88"] { font-size: 30px !important; }
  h2[style*="fontSize: 42"], h2[style*="fontSize: 40"] { font-size: 22px !important; }
}

/* ── MAP FAB ─────────────────────────────────────────────────────── */
.cf-map-mobile-fab { display: none; }
@media (max-width: 1023px) {
  body[data-route^="carte"] .cf-map-mobile-fab {
    display: flex; position: fixed; bottom: 80px; right: 16px; z-index: 500;
    padding: 12px 18px; background: var(--accent); color: var(--accent-ink); border: 0;
    border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 13px;
    box-shadow: 0 10px 24px rgba(14,26,43,0.28); cursor: pointer;
    align-items: center; gap: 8px;
  }
}


/* ===== CORRECTION OVERFLOW TITRES HERO (mobile ≤767px) ===== */
@media (max-width: 767px) {
  h1 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  h1[style*="font-size: 108px"] { font-size: 52px !important; line-height: 0.95 !important; }
  h1[style*="font-size: 88px"]  { font-size: 36px !important; line-height: 1.05 !important; }
  h1[style*="font-size: 80px"]  { font-size: 34px !important; line-height: 1.05 !important; }
  h1[style*="font-size: 76px"]  { font-size: 32px !important; line-height: 1.05 !important; }
  h1[style*="font-size: 72px"]  { font-size: 30px !important; line-height: 1.05 !important; }
  h1[style*="font-size: 56px"]  { font-size: 26px !important; line-height: 1.1  !important; }
  h1 { letter-spacing: -0.02em !important; }
  main, section, article { max-width: 100%; overflow-x: hidden; }
}

@media (max-width: 480px) {
  h1[style*="font-size: 108px"] { font-size: 44px !important; }
  h1[style*="font-size: 88px"]  { font-size: 30px !important; }
  h1[style*="font-size: 80px"]  { font-size: 28px !important; }
  h1[style*="font-size: 76px"]  { font-size: 26px !important; }
  h1[style*="font-size: 72px"]  { font-size: 26px !important; }
}


/* ===== SAFE AREA NOTCH (iPhone) ===== */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}