/* ===== DOOH CONSULTING - RESPONSIVE FIXES ===== */
/* Inject via <style id="dooh-responsive-fix"> in each page */

/* === 1. IMAGES: prevent overflow === */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* === 2. LOGO: responsive sizing === */
img.h-28,
nav img[class*="h-28"],
header img[class*="h-28"] {
  height: 48px !important; /* h-12 on mobile */
  width: auto !important;
}
@media (min-width: 640px) {
  img.h-28,
  nav img[class*="h-28"],
  header img[class*="h-28"] {
    height: 64px !important; /* h-16 on tablet */
  }
}
@media (min-width: 1024px) {
  img.h-28,
  nav img[class*="h-28"],
  header img[class*="h-28"] {
    height: 112px !important; /* h-28 on desktop (original) */
  }
}

/* === 3. NAV BAR: responsive padding === */
nav > div,
header > div,
[style*="max-width:1440px"] {
  padding-left: 16px !important;  /* px-4 mobile */
  padding-right: 16px !important;
}
@media (min-width: 768px) {
  nav > div,
  header > div,
  [style*="max-width:1440px"] {
    padding-left: 24px !important;  /* px-6 tablet+ */
    padding-right: 24px !important;
  }
}

/* === 4. DROPDOWN MENU: responsive width === */
#doohMenuDropdown {
  width: 280px !important;
  max-width: calc(100vw - 16px) !important;
  right: 8px !important;
}
@media (max-width: 360px) {
  #doohMenuDropdown {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
  }
}

/* === 5. CHAT WIDGET: better mobile positioning === */
#njChatContainer {
  right: 12px !important;
  bottom: 80px !important;
}
@media (max-width: 440px) {
  #njChatContainer {
    right: 8px !important;
    bottom: 70px !important;
  }
  #njChatFab {
    width: 56px !important;
    height: 56px !important;
  }
}

/* === 6. PREMIUM CHAT: full width on small screens === */
@media (max-width: 440px) {
  #njPremiumChat {
    width: calc(100vw - 16px) !important;
    max-width: 380px !important;
    height: 70vh !important;
    max-height: 600px !important;
  }
}

/* === 7. MODALS: better mobile padding === */
.admin-modal-content {
  padding: 20px !important;
  margin: 8px !important;
  max-width: calc(100vw - 32px) !important;
}
@media (min-width: 640px) {
  .admin-modal-content {
    padding: 28px !important;
    max-width: 400px !important;
  }
}

/* === 8. HERO SECTIONS: responsive text === */
section[class*="min-h-\\[70vh\\]"] h1,
section[class*="min-h-\\[70vh\\]"] .font-display,
[class*="text-display"] {
  font-size: clamp(1.75rem, 5vw, 3rem) !important; /* 28px-48px */
  line-height: 1.1 !important;
}
section[class*="min-h-\\[70vh\\]"] p,
.hero-text {
  font-size: clamp(0.95rem, 2.5vw, 1.375rem) !important;
}

/* === 9. BENTO GRID responsive gaps === */
section .bento-grid,
[class*="grid-cols-12"] {
  gap: 16px !important;
}
@media (min-width: 768px) {
  section .bento-grid,
  [class*="grid-cols-12"] {
    gap: 24px !important;
  }
}

/* === 10. SECTION PADDING responsive === */
section[class*="py-xl"],
[class*="py-xl"] {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
@media (min-width: 768px) {
  section[class*="py-xl"],
  [class*="py-xl"] {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* px-margin responsive */
[class*="px-margin"] {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 768px) {
  [class*="px-margin"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* === 11. GLASS PANELS overflow === */
.glass-panel,
.glass-card,
[class*="rounded-full"][class*="glass"],
[style*="border-radius:60px"] {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Prevent long words from overflowing */
* {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* === 12. FIX: white-space nowrap overflow === */
[style*="white-space:nowrap"] {
  white-space: normal !important;
}
@media (min-width: 768px) {
  [style*="white-space:nowrap"] {
    white-space: nowrap !important;
  }
}

/* === 13. MODAL overlay inside methodologie page === */
#methodoModal {
  padding: 8px !important;
}
#methodoModal > div {
  max-height: 90vh !important;
}
@media (max-width: 640px) {
  #methodoModal > div {
    border-radius: 16px !important;
  }
  #methodoModal [class*="p-lg"],
  #methodoModal [class*="p-xl"] {
    padding: 16px !important;
  }
}

/* === 14. ADMIN DASHBOARD specific fixes === */
/* Tab buttons wrap on small screens */
.tab-btn {
  font-size: 11px !important;
  padding: 6px 12px !important;
}
@media (min-width: 640px) {
  .tab-btn {
    font-size: 13px !important;
    padding: 8px 18px !important;
  }
}

/* === 15. BUTTON touch target minimum === */
button, 
a[onclick],
.btn-primary,
.btn-ghost,
[style*="cursor:pointer"] {
  min-height: 44px !important;
}
button[style*="font-size:10px"],
button[style*="font-size:11px"],
button[style*="font-size:12px"] {
  min-height: 36px !important;
}
/* Restore original min-height on larger buttons */
button[style*="padding:12px"],
button[style*="padding:14px"] {
  min-height: 44px !important;
}

/* === 16. PREMIUM BUTTONS in menu === */
#doohMenuBtn {
  padding: 6px 14px !important;
  font-size: 12px !important;
}
@media (min-width: 640px) {
  #doohMenuBtn {
    padding: 8px 20px !important;
    font-size: 14px !important;
  }
}

/* === 17. CONTACT PAGE - background responsive === */
.page-overlay::before {
  width: 100% !important;
}

/* === 18. EXPAND BUTTON (methodologie) responsive === */
#expandBtn {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 16px 24px !important;
  min-height: 80px !important;
}
#expandBtn [class*="text-\\[1\\.5rem\\]"] {
  font-size: 1.1rem !important;
}
#expandBtn span[style*="font-size:1.3rem"] {
  font-size: 0.95rem !important;
}
@media (min-width: 768px) {
  #expandBtn {
    min-width: 320px !important;
    width: auto !important;
    height: 105px !important;
    padding: 24px 40px !important;
  }
  #expandBtn [class*="text-\\[1\\.5rem\\]"] {
    font-size: 1.5rem !important;
  }
  #expandBtn span[style*="font-size:1.3rem"] {
    font-size: 1.3rem !important;
  }
}

/* === 19. METHODOLOGIE MODAL grid === */
#modalTopicsGrid {
  gap: 16px !important;
}
@media (min-width: 768px) {
  #modalTopicsGrid {
    gap: 24px !important;
  }
}

/* === 20. SERVICE/METHODO step numbers === */
.step-number-circle {
  width: 48px !important;
  height: 48px !important;
}
@media (min-width: 640px) {
  .step-number-circle {
    width: 64px !important;
    height: 64px !important;
  }
}

/* === 21. TEMOIGNAGES carousel / cards responsive === */
.testimonial-card {
  max-width: 100% !important;
}

/* === 22. INSCRIPTION / ACCES PREMIUM - form responsive === */
input[style*="max-width:400px"],
input[style*="max-width:500px"],
select[style*="max-width:400px"],
select[style*="max-width:500px"] {
  max-width: 100% !important;
}

/* === 23. ADMIN DASHBOARD grid responsive === */
@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .admin-main-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === 24. GENERAL responsive font sizes === */
h1, h2, .font-display, .text-display {
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
}
h3, .text-headline-lg {
  font-size: clamp(1.25rem, 3vw, 2rem) !important;
}
h4, .text-headline-md {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
}

/* === 25. HERO badge with long text on mobile === */
[style*="EXCELLENCE OPÉRATIONNELLE"],
[style*="excellence"],
span[style*="white-space:nowrap"][style*="font-size:28px"] {
  white-space: normal !important;
  font-size: clamp(1rem, 3vw, 1.75rem) !important;
  display: block !important;
}
@media (min-width: 768px) {
  [style*="EXCELLENCE OPÉRATIONNELLE"],
  span[style*="white-space:nowrap"][style*="font-size:28px"] {
    white-space: nowrap !important;
  }
}

/* === 26. FIX scrollable containers === */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* === 27. PAGE OVERLAY fix for contact/acces/inscription === */
.page-overlay::before {
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 640px) {
  .page-overlay::before {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* === 28. GRID fixes for methodologie/service cards === */
@media (max-width: 640px) {
  [class*="grid-cols-3"][class*="md:grid-cols-3"],
  [class*="grid-cols-4"][class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
  [class*="md:col-span-2"] {
    grid-column: span 1 / span 1 !important;
  }
}

/* === 29. HERO badge grouping on mobile === */
@media (max-width: 640px) {
  [style*="padding:10px 28px"][style*="border-radius:60px"] {
    padding: 8px 16px !important;
    border-radius: 30px !important;
    display: block !important;
    text-align: center !important;
  }
  [style*="padding:10px 28px"][style*="border-radius:60px"] span[style*="font-size:28px"] {
    display: block !important;
    margin-top: 4px !important;
  }
}

/* === 30. RESPONSIVE container max-width for very small screens === */
@media (max-width: 480px) {
  [style*="max-width:1440px"] {
    max-width: 100% !important;
  }
  .max-w-7xl {
    max-width: 100% !important;
  }
}

/* === 31. ADMIN DASHBOARD: make sidebar/header responsive === */
@media (max-width: 768px) {
  [id*="tabContent"] .grid {
    grid-template-columns: 1fr !important;
  }
  .score-input {
    width: 60px !important;
  }
}

/* === 32. FORM buttons responsive padding === */
@media (max-width: 480px) {
  button[style*="padding:12px 24px"] {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* === 33. SERVICES PAGE — Hero image overflow fix === */
/* L'image absolute en hero peut chevaucher le texte sur mobile */
@media (max-width: 768px) {
  section.max-w-7xl > div.absolute[style*="right:0"],
  section.max-w-7xl > div.absolute[style*="z-index:-10"] {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    top: auto !important;
    right: auto !important;
    z-index: 0 !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  section.max-w-7xl > div.absolute img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
  /* S'assurer que le texte hero passe bien */
  section.max-w-7xl > div.max-w-4xl {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* === 34. SERVICES PAGE — Grid images overflow === */
@media (max-width: 768px) {
  /* Éviter que les images dans les bento cards ne débordent */
  .bento-grid img,
  [class*="rounded-lg"] img,
  [class*="rounded-xl"] img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Fix des cartes avec image à droite */
  .bento-grid .flex-row,
  .bento-grid [class*="flex-row"] {
    flex-direction: column !important;
  }
  .bento-grid [class*="w-full md:w-64"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
  }
}

/* === 35. TOUS SITES — Éviter les white-space:nowrap qui débordent === */
@media (max-width: 640px) {
  span[style*="white-space:nowrap"][style*="font-size:24px"],
  span[style*="white-space:nowrap"][style*="font-size:26px"],
  span[style*="white-space:nowrap"][style*="font-size:28px"] {
    white-space: normal !important;
    font-size: clamp(1rem, 4vw, 1.5rem) !important;
    display: block !important;
    text-align: center !important;
  }
}