/* TABLETTE (max 768px) */
@media (max-width: 768px) {
  
  /* Logo plus petit sur mobile - RESTE ROND */
  .logo {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
  }
  
  body.dark-mode .logo-dark {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
  }
  
  .logo-title {
    font-size: 18px !important;
  }
  
  .logo-subtitle {
    font-size: 11px !important;
  }
  
  /* Menu responsive */
  .navbar-collapse {
    margin-top: 1rem;
  }
  
  .nav-item {
    text-align: center;
    margin: 0.5rem 0 !important;
  }
  
  .nav-link {
    display: block;
    padding: 0.5rem 0 !important;
  }
  
  .btn-danger.ms-2 {
    width: 100% !important;
    margin: 1rem 0 0 0 !important;
  }
  
  .toggle-theme {
    margin: 1rem auto 0 auto !important;
  }
  
  /* Hero responsive */
  .hero {
    min-height: 400px !important;
    padding: 60px 20px !important;
  }
  
  .hero h1 {
    font-size: 1.8rem !important;
  }
  
  .hero p {
    font-size: 1rem !important;
  }
  
  /* Features responsive */
  section.feature {
    padding: 60px 20px !important;
  }
  
  .feature .container {
    flex-direction: column !important;
  }
  
  .feature .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 2rem !important;
  }
  
  .feature h2 {
    font-size: 1.6rem !important;
    text-align: center;
  }
  
  .feature p {
    font-size: 1rem !important;
    text-align: center;
  }
  
  .feature .btn {
    display: block;
    margin: 0 auto;
  }
  
  .feature img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    display: block;
  }
  
  /* Image transition responsive */
  .image-transition {
    height: 300px !important;
    max-width: 100% !important;
  }
  
  /* Pricing responsive */
  .custom-pricing {
    padding: 60px 20px !important;
  }
  
  .custom-heading {
    font-size: 1.8rem !important;
  }
  
  .custom-subheading {
    font-size: 1rem !important;
  }
  
  .promo-banner {
    font-size: 0.9rem !important;
    padding: 1rem !important;
  }
  
  .custom-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .custom-card {
    padding: 1.5rem !important;
  }
  
  /* Contact responsive */
  .contact-page {
    padding: 60px 20px !important;
  }
  
  .contact-page h1 {
    font-size: 1.8rem !important;
  }
  
  .form-container {
    padding: 1.5rem !important;
  }
  
  .input-container .col-md-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Formulaire devis responsive */
  .devis-form-card {
    width: 90% !important;
    padding: 1.5rem !important;
    max-height: 80vh !important;
  }
  
  /* Footer responsive */
  .footer .row {
    flex-direction: column;
    text-align: center;
  }
  
  .footer .col-md-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem;
  }
  
  .footer-links ul {
    padding-left: 0;
  }
  
  .footer-bottom {
    text-align: center !important;
  }
  
  .footer-bottom .text-md-end {
    text-align: center !important;
  }
  
  .log {
    margin: 2rem 0 !important;
    justify-content: center;
  }
  
  .logo-light-footer,
  .logo-dark-footer {
    max-width: 80px;
  }
}

/* PETIT MOBILE (max 480px) */
@media (max-width: 480px) {
  
  .logo {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
  }
  
  body.dark-mode .logo-dark {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
  }
  
  .logo-title {
    font-size: 16px !important;
  }
  
  .logo-subtitle {
    font-size: 10px !important;
  }
  
  .hero {
    min-height: 350px !important;
    padding: 40px 15px !important;
  }
  
  .hero h1 {
    font-size: 1.5rem !important;
  }
  
  .hero p {
    font-size: 0.9rem !important;
  }
  
  .btn.inscr {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }
  
  section.feature {
    padding: 40px 15px !important;
  }
  
  .feature h2 {
    font-size: 1.4rem !important;
  }
  
  .feature p {
    font-size: 0.95rem !important;
  }
  
  .image-transition {
    height: 250px !important;
  }
  
  .custom-heading {
    font-size: 1.5rem !important;
  }
  
  .custom-subheading {
    font-size: 0.9rem !important;
  }
  
  .custom-card h3 {
    font-size: 1.3rem !important;
  }
  
  .promo-banner {
    font-size: 0.85rem !important;
  }
  
  .devis-form-card {
    width: 95% !important;
    padding: 1rem !important;
  }
  
  .devis-form-card h3 {
    font-size: 1.3rem !important;
  }
  
  .contact-page h1 {
    font-size: 1.5rem !important;
  }
  
  .form-container {
    padding: 1rem !important;
  }
}