/* Styles spécifiques pour les appareils mobiles */

/* Ajustements pour petit écran - de base */
@media screen and (max-width: 480px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  /* Optimisation du header */
  header {
    padding: 0.5rem 1rem;
  }

  .logo {
    max-height: 38px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0.2rem;
  }

  .logo-text h1 {
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .tagline {
    font-size: 0.7rem;
  }

  nav ul li {
    margin-left: 1rem;
  }

  nav ul li a {
    font-size: 0.9rem;
    padding: 0.3rem;
  }

  /* Ajustement du logo dans le footer */
  .footer-logo img.logo-small {
    max-height: 40px;
    max-width: 100%;
  }

  /* Animations désactivées sur mobile pour de meilleures performances */
  .service-card,
  .pricing-card {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  /* Section héro adaptée */
  .hero {
    /* padding: 4rem 1rem 3rem; */
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    justify-content: center;
    text-align: center;
  }

  .hero-content {
    margin: 0 auto;
    margin-left: auto;
    max-width: 100%;
    z-index: 10;
    padding: 1.5rem;
  }

  .hero-video-container {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-video {
    /* Optimisation pour mobile - réduire la qualité si nécessaire */
    width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.3) contrast(1.2);
  }

  .hero-overlay {
    /* Assurer une bonne lisibilité sur mobile */
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)),
      linear-gradient(
        135deg,
        rgba(44, 24, 16, 0.8) 0%,
        rgba(139, 90, 60, 0.95) 100%
      );
  }

  .hero h2 {
    font-size: 1.6rem;
  }

  .hero p {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  .hero-features {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin: 1.2rem 0;
  }

  .hero-feature {
    font-size: 0.9rem;
  }

  /* Boutons adaptés */
  .cta-primary,
  .cta-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    width: 100%;
    max-width: 250px;
    text-align: center;
  }

  /* Sections de contenu */
  section {
    padding: 2.5rem 1rem;
  }

  /* Cartes de services et tarifs */
  .services-grid,
  .pricing-grid {
    gap: 1rem;
  }

  .service-card,
  .pricing-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
  }

  /* Icônes */
  .service-icon {
    font-size: 2.2rem;
  }

  /* Section contact */
  .contact {
    padding: 3rem 1rem;
  }

  .contact-intro {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .contact-form-wrapper,
  .contact-direct,
  .contact-hours {
    padding: 1.5rem;
    border-radius: 10px;
  }

  .contact-form-wrapper h3,
  .contact-direct h3 {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
  }

  .contact-hours h4 {
    font-size: 1.1rem;
  }

  .contact-icon {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  .contact-item {
    margin-bottom: 1.2rem;
  }

  .btn-call,
  .btn-submit {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  /* Menu mobile optimisé */
  .mobile-menu-toggle {
    font-size: 1.8rem;
    padding: 0.5rem;
  }

  nav ul.show {
    padding: 0.5rem 0;
  }

  /* Footer réduit */
  footer {
    padding: 3rem 1rem 1.5rem;
  }

  .footer-main {
    gap: 2rem;
  }

  .footer-logo {
    margin-bottom: 0.5rem;
  }

  .footer-logo h3 {
    font-size: 1.3rem;
  }

  .footer-tagline {
    font-size: 0.7rem;
  }

  .footer-description {
    font-size: 0.9rem;
  }

  .footer-nav h4,
  .footer-contact-info h4,
  .footer-hours-info h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .footer-nav ul li {
    margin-bottom: 0.8rem;
  }

  .footer-icon {
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }

  .btn-footer-cta {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }

  .footer-hours-day {
    min-width: 65px;
  }

  .footer-bottom {
    font-size: 0.8rem;
    padding-top: 1.5rem;
  }

  /* Focus states pour accessibilité tactile */
  a:focus,
  button:focus,
  input:focus,
  textarea:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
  }
}

/* Mobiles très petits (iPhone 5/SE, etc.) */
@media screen and (max-width: 320px) {
  body {
    font-size: 14px;
  }

  .hero {
    padding: 3rem 0.8rem;
  }

  .hero h2 {
    font-size: 1.4rem;
  }

  section {
    padding: 2rem 0.8rem;
  }

  header {
    padding: 0.4rem 0.8rem;
  }

  .logo {
    max-height: 35px;
  }

  .logo-text h1 {
    font-size: 1.2rem;
  }

  .tagline {
    font-size: 0.65rem;
  }

  nav ul li {
    margin-left: 0.8rem;
  }

  nav ul li a {
    font-size: 0.85rem;
    padding: 0.25rem;
  }

  .logo-container {
    flex-direction: column;
  }

  .service-card,
  .pricing-card {
    padding: 1rem;
  }

  .service-icon {
    font-size: 2rem;
  }

  .price span {
    font-size: 1.6rem;
  }

  .footer-logo img.logo-small {
    max-height: 35px;
  }
}

/* Optimisations pour les téléphones en mode paysage */
@media screen and (max-height: 480px) and (orientation: landscape) {
  .hero {
    padding: 2rem 1rem;
    min-height: auto;
  }

  .hero h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .hero p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .cta-buttons {
    flex-direction: row;
    gap: 1rem;
  }

  .cta-primary,
  .cta-secondary {
    padding: 0.6rem 1rem;
    width: auto;
  }

  nav ul.show {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Mobile menu styles */
@media screen and (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    font-size: 1.5rem;
  }

  nav ul {
    display: none;
    width: 100%;
    flex-direction: column;
    text-align: center;
    margin-top: 0;
  }

  nav ul.show {
    display: flex;
    padding: 0.5rem 0;
  }

  nav ul li {
    margin: 0;
    padding: 0.4rem 0;
    width: 100%;
  }

  nav ul li a {
    display: block;
    padding: 0.4rem 0;
    font-size: 1rem;
  }
}