/* =============================================================
   KasherHub · Responsive Patch + Typography Boost
   =============================================================
   Ce CSS s'ajoute APRÈS tous les autres styles pour les overrider.
   
   Améliorations :
   1. Typographie augmentée (+2 sur titres, sous-titres, contenu)
   2. Responsive corrigé pour tous les breakpoints
   3. Anti-débordement horizontal
   4. Boutons mobile-friendly (44x44px min)
   ============================================================= */


/* ═══════════════════════════════════════════════════════════
   1. TYPOGRAPHIE BOOST (+2 sur tout)
   ═══════════════════════════════════════════════════════════ */

/* Tous les H1 : +2px */
h1, .h1, [class*="hero-title"], [class*="page-title"],
.title-xl, .text-4xl, .text-5xl, .text-6xl {
  font-size: calc(var(--h1-size, 48px) + 4px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
}

/* Tous les H2 : +2px */
h2, .h2, [class*="section-title"], [class*="heading-2"],
.title-lg, .text-3xl {
  font-size: calc(var(--h2-size, 36px) + 4px) !important;
  line-height: 1.2 !important;
}

/* Tous les H3 : +2px */
h3, .h3, [class*="card-title"], [class*="block-title"],
.title-md, .text-2xl {
  font-size: calc(var(--h3-size, 24px) + 2px) !important;
  line-height: 1.3 !important;
}

/* Sous-titres : +2px */
.subtitle, .sous-titre, [class*="subtitle"], [class*="hero-subtitle"],
[class*="section-subtitle"], .lead, .text-xl {
  font-size: calc(var(--subtitle-size, 18px) + 2px) !important;
  line-height: 1.5 !important;
}

/* Body / contenu : +1px (modéré pour ne pas casser le design) */
body, p, .text, .content, .description,
.card-content, .article-content, [class*="card-text"],
[class*="card-desc"], [class*="card-description"] {
  font-size: calc(var(--body-size, 16px) + 1px) !important;
  line-height: 1.65 !important;
}

/* Boutons : +1px */
button, .btn, [class*="btn-"], a.btn,
[class*="cta"], [class*="button"] {
  font-size: calc(var(--btn-size, 14px) + 1px) !important;
}

/* Petits labels et meta : +1px (sauf très petits) */
.label, .meta, .badge, .tag, .breadcrumb,
[class*="meta-"], [class*="badge-"] {
  font-size: calc(var(--label-size, 12px) + 1px) !important;
}


/* ═══════════════════════════════════════════════════════════
   2. ANTI-DÉBORDEMENT GLOBAL
   ═══════════════════════════════════════════════════════════ */

* {
  max-width: 100%;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden !important;
  width: 100%;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
}


/* ═══════════════════════════════════════════════════════════
   3. RESPONSIVE — TABLETTE (≤ 1024px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  
  /* Container : padding adapté */
  .container, [class*="container"], main, section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  /* Grilles 4 colonnes → 2 colonnes */
  [class*="grid-4"], [class*="cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* H1 légèrement réduit */
  h1, .h1, [class*="hero-title"] {
    font-size: 44px !important;
  }
  
  h2, [class*="section-title"] {
    font-size: 34px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   4. RESPONSIVE — MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  
  /* Container : moins de padding */
  .container, [class*="container"], main, section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  
  /* H1 en mobile */
  h1, .h1, [class*="hero-title"], [class*="page-title"] {
    font-size: 36px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
  }
  
  /* H2 en mobile */
  h2, .h2, [class*="section-title"] {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  
  /* H3 en mobile */
  h3, [class*="card-title"], [class*="block-title"] {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  
  /* Sous-titres mobile */
  .subtitle, [class*="subtitle"], [class*="hero-subtitle"] {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  
  /* Body mobile */
  body, p, .text, .content {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  
  /* Toutes les grilles → 1 colonne */
  [class*="grid-2"], [class*="grid-3"], [class*="grid-4"],
  [class*="cols-2"], [class*="cols-3"], [class*="cols-4"],
  .grid, [class*="row"][class*="col"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Flex containers en colonne */
  [class*="flex-row"], .row, .d-flex {
    flex-direction: column !important;
  }
  
  /* Hero sections en colonne */
  [class*="hero"][class*="grid"], [class*="hero-content"],
  [class*="hero-inner"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  
  /* Padding sections réduit */
  section, .section, [class*="section-"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Hero section padding mobile */
  [class*="hero"], [class*="page-header"] {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
  }
  
  /* Boutons : minimum 44x44px (touch friendly) */
  button, .btn, [class*="btn-"], a.btn,
  input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
  }
  
  /* Inputs : taille touch friendly */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="password"],
  textarea, select {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 16px !important; /* 16px = pas de zoom auto iOS */
  }
  
  /* Cards en pleine largeur */
  .card, [class*="card-"], [class*="-card"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Images cards : ratio plus naturel mobile */
  .card img, [class*="card-image"] img {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: cover !important;
  }
  
  /* Footer en colonnes empilées */
  footer [class*="grid"], footer [class*="cols"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* Navigation mobile : cacher menu desktop */
  [class*="nav-desktop"], .nav-links:not(.mobile),
  [class*="menu-desktop"] {
    display: none !important;
  }
  
  /* Espacements verticaux entre éléments */
  h1, h2, h3 {
    margin-bottom: 18px !important;
  }
  
  p, ul, ol {
    margin-bottom: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   5. RESPONSIVE — PETIT MOBILE (≤ 480px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  
  /* Container : padding minimum */
  .container, [class*="container"], main, section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  
  /* H1 petit mobile */
  h1, .h1, [class*="hero-title"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px;
  }
  
  /* H2 petit mobile */
  h2, [class*="section-title"] {
    font-size: 24px !important;
  }
  
  /* H3 petit mobile */
  h3 {
    font-size: 20px !important;
  }
  
  /* Sous-titres petit mobile */
  .subtitle, [class*="subtitle"] {
    font-size: 16px !important;
  }
  
  /* Boutons : pleine largeur */
  .btn-primary, [class*="btn-large"], [class*="cta-button"] {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 8px 0 !important;
  }
  
  /* Hero padding minimum */
  [class*="hero"] {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }
  
  /* Tags et badges : wrap sur 2 lignes si besoin */
  [class*="tags"], [class*="badges"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   6. RESPONSIVE — LARGE DESKTOP (≥ 1440px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
  
  /* Containers max-width pour ne pas étirer infiniment */
  .container, main {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Hero plus impressionnante sur grand écran */
  h1, [class*="hero-title"] {
    font-size: 64px !important;
    line-height: 1.1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   7. ACCESSIBILITÉ & UX
   ═══════════════════════════════════════════════════════════ */

/* Focus visible pour navigation clavier */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid #C4A055 !important;
  outline-offset: 2px;
}

/* Touch targets minimum 44px sur mobile */
@media (max-width: 768px) {
  a, button, [role="button"], .clickable {
    min-height: 44px !important;
  }
}

/* Améliorer lisibilité sur écrans haute densité */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}


/* ═══════════════════════════════════════════════════════════
   8. CORRECTIONS SPÉCIFIQUES KASHERHUB
   ═══════════════════════════════════════════════════════════ */

/* Hero badge plus visible */
[class*="hero-badge"] {
  font-size: 12px !important;
  padding: 8px 18px !important;
}

/* Hero tags plus lisibles */
[class*="hero-tag"] {
  font-size: 13px !important;
  padding: 8px 16px !important;
}

/* Cards prestataires : meilleur contraste */
[class*="prestataire-card"], [class*="vendor-card"] {
  transition: transform 0.2s, box-shadow 0.2s;
}

[class*="prestataire-card"]:hover, [class*="vendor-card"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Section eyebrow (petits libellés) */
[class*="section-eyebrow"], .eyebrow {
  font-size: 13px !important;
  letter-spacing: 2.5px !important;
  font-weight: 700 !important;
}

/* Liens dans le contenu : soulignés mais discrets */
.content a, .article-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Footer : améliorer lisibilité */
footer {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Navigation : améliorer hover */
nav a {
  transition: color 0.15s;
}


/* ═══════════════════════════════════════════════════════════
   9. PRINT (impression)
   ═══════════════════════════════════════════════════════════ */

@media print {
  nav, footer, [class*="cta"], [class*="ad"], video, iframe {
    display: none !important;
  }
  
  body {
    color: #000 !important;
    background: #fff !important;
  }
}