/* Responsive overrides (mobile only). Goal: keep desktop look, improve layout on small screens, and guarantee legibility. */
@media (max-width: 768px) {
  /* Images et vidéos responsive */
  img, video { 
    max-width: 100%; 
    height: auto;
    display: block !important; /* Force l'affichage des images */
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Guarantee readable text everywhere (prevents white-on-white) */
  body { color: #374151; }
  main, section { background: transparent; }
  main p, section p { color: #374151 !important; }

  /* LOGO - FORCER L'AFFICHAGE EN MOBILE */
  .logo img,
  header img[alt*="Artisans"],
  header img[alt*="Logo"],
  img[src*="Logo2.png"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 60px;
    width: auto;
  }

  /* CTA BUTTONS - FOND CRÈME, TEXTE BORDEAUX, BORDURE ROUGE VIF */
  a.cta-mobile-btn,
  button.cta-mobile-btn,
  .btn-primary:not(.site-header .btn-primary):not(#mobile-menu .btn-primary),
  a[href*="contact"]:not(.site-header a):not(#mobile-menu a):not(footer a),
  a[href*="devis"]:not(.site-header a):not(#mobile-menu a):not(footer a),
  button[type="submit"]:not(.site-header button):not(#mobile-menu button) {
    display: inline-block !important;
    background: #FFF8DC !important; /* Crème */
    border: 5px solid #FF0000 !important; /* Rouge vif épais */
    color: #800020 !important; /* Bordeaux */
    border-radius: 9999px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.2;
    transition: all 0.3s ease;
  }

  /* Hover pour les CTA en mobile */
  a.cta-mobile-btn:hover,
  button.cta-mobile-btn:hover,
  .btn-primary:not(.site-header .btn-primary):not(#mobile-menu .btn-primary):hover {
    background: #FAEBD7 !important; /* Crème légèrement plus foncé */
    transform: scale(1.02);
  }
}