/* ==========================================================================
   RESPONSIVE FIXES & IMPROVEMENTS
   The Barber by Lacrim - Corrections Mobile/Tablette/Desktop
   ========================================================================== */

/* ==========================================================================
   1. HERO SECTION - Mobile Improvements
   ========================================================================== */

/* Overlay hero plus opaque pour meilleure lisibilité */
.hero-bg {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)) !important;
}

/* Masque supplémentaire pour le texte de la vidéo (optionnel) */
.hero-content {
    position: relative;
    z-index: 20; /* Au dessus de l'overlay */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6); /* Ombre portée forte */
}

/* Vidéo hero - Correction positionnement pour éviter texte coupé */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: center center; /* Centre la vidéo pour voir "FONDÉ PAR LACRIM" */
}

/* Sur desktop : réduire le zoom pour voir tout le texte */
@media (min-width: 1280px) {
    .hero-video {
        min-width: 100%;
        min-height: 100%;
        width: 100vw;
        height: auto;
        object-fit: cover;
        object-position: center 45%; /* Légèrement vers le haut */
    }
}

/* Vidéo hero optimisée mobile */
@media (max-width: 768px) {
    .hero-video {
        top: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        object-position: center 40%; /* Focus plus haut sur mobile */
    }

    /* Overlay encore plus opaque sur mobile */
    .hero-bg {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95)) !important;
    }

    /* Alternative: Image de remplacement si vidéo bloquée */
    .hero-video-container.fallback {
        background-image: url('../images/hero-fallback-mobile.jpg');
        background-size: cover;
        background-position: center;
    }

    .hero-video-container.fallback .hero-video {
        display: none;
    }
}

/* Tablette : compromis entre desktop et mobile */
@media (min-width: 769px) and (max-width: 1279px) {
    .hero-video {
        object-position: center 42%;
    }
}

/* Titre hero responsive fluide */
.hero-title {
    font-size: clamp(1.75rem, 6vw + 0.5rem, 6rem);
    padding: 0 1rem 0.5rem;
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

/* Boutons hero - Stack vertical mobile */
@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        padding: 0 1rem;
    }

    .hero-btn {
        width: 100%;
        min-height: 3.5rem; /* 56px = Standard touch target */
        font-size: 0.875rem;
        padding: 1rem 1.5rem;
        flex: none;
    }
}

/* ==========================================================================
   2. TOUCH TARGETS - Accessibilité Mobile (WCAG 2.1)
   ========================================================================== */

/* Minimum 44x44px pour tous les éléments cliquables */
@media (max-width: 1024px) {
    .btn,
    .salon-btn,
    .footer-link,
    .nav-mobile-link,
    a[href],
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }

    /* Espacement entre liens footer */
    .footer-link {
        margin: 0.5rem 0;
        display: inline-block;
    }

    /* Boutons salons plus grands */
    .salon-btn {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   3. FORMS - Optimisation Mobile
   ========================================================================== */

/* Éviter zoom auto iOS (font-size min 16px) */
@media (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 1rem !important; /* 16px */
        padding: 1rem 1.25rem;
    }

    /* Franchise form */
    .form-input,
    .form-select,
    .form-textarea {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   4. SEARCH INPUT - Page "Trouve ton salon"
   ========================================================================== */

/* Correction icône de recherche chevauchée par le placeholder */
.search-input {
    padding-left: 3rem !important; /* Plus d'espace pour l'icône */
}

.search-icon {
    left: 1rem !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    z-index: 1;
}

@media (max-width: 480px) {
    .search-input {
        padding: 1rem 1rem 1rem 3rem !important;
        font-size: 1rem;
    }

    .search-icon {
        left: 1rem !important;
        width: 18px !important;
        height: 18px !important;
    }
}

/* Assurer que le placeholder ne chevauche pas l'icône */
.search-input::placeholder {
    padding-left: 0.25rem;
}

/* ==========================================================================
   5. SALON CARDS - Images Responsive
   ========================================================================== */

.salon-image {
    height: auto;
    aspect-ratio: 16 / 10;
    min-height: 180px;
    max-height: 250px;
}

.salon-image img,
.find-salon-image img {
    object-fit: cover;
    object-position: center 30%; /* Focus haut de l'image */
}

/* ==========================================================================
   6. SERVICE CARDS - Images Background Mobile
   ========================================================================== */

@media (max-width: 640px) {
    .service-card-image {
        min-height: 280px;
        background-position: center 25%;
    }
}

/* ==========================================================================
   7. FOOTER - Compact Mobile
   ========================================================================== */

@media (max-width: 640px) {
    .footer-logo {
        height: 2.5rem;
        margin-bottom: 1rem;
    }

    .footer-copyright {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .footer-section {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   8. VIDEO LAZY LOAD - Performance Mobile
   ========================================================================== */

/* Poster image visible pendant chargement */
.hero-video[poster] {
    background-size: cover;
    background-position: center;
}

/* Cache vidéo si connexion lente */
@media (prefers-reduced-data: reduce) {
    .hero-video {
        display: none;
    }

    .hero-bg {
        background-image: url('../images/hero-poster.jpg');
        background-size: cover;
        background-position: center;
    }
}

/* ==========================================================================
   9. FORMULAIRE FRANCHISE - Mobile
   ========================================================================== */

@media (max-width: 640px) {
    /* Réduire padding form */
    .franchise-form {
        padding: 0;
    }

    .contact-container {
        padding: 0 1rem;
    }

    /* Select custom arrow plus petit */
    .form-select {
        background-size: 1rem;
        padding-right: 2.5rem;
    }
}

/* ==========================================================================
   10. PROGRESS BAR - Page Rejoindre (Mobile)
   ========================================================================== */

/* Déjà corrigé dans rejoindre.html */
/* Ajout ici pour référence si besoin d'appliquer ailleurs */

@media (max-width: 640px) {
    .progress-container {
        margin-top: 6rem;
        padding: 1rem 1.25rem 0.875rem;
        max-width: calc(100% - 2rem);
    }

    .progress-info {
        font-size: 0.7rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .progress-percent {
        flex: 1 0 100%;
        text-align: center;
    }

    .progress-time {
        flex: 1 0 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   11. MEDIA LOGOS - Responsive Wrapping
   ========================================================================== */

@media (max-width: 640px) {
    .media-logos {
        gap: 1.5rem;
        justify-content: space-around;
    }

    .media-logo img {
        height: 2rem;
        max-width: 80px;
    }
}

/* ==========================================================================
   12. TESTIMONIALS - Swiper Mobile
   ========================================================================== */

@media (max-width: 640px) {
    .testimonial-card {
        padding: 1rem;
    }

    .testimonial-text {
        font-size: 0.8125rem;
    }

    .testimonials-swiper {
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   13. NAVIGATION MOBILE - Amélioration UX
   ========================================================================== */

.nav-mobile {
    /* Prevent scroll behind menu */
    overscroll-behavior: contain;
}

.nav-mobile.active ~ body {
    overflow: hidden;
}

/* Safe area iOS (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
    .nav-mobile-links {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .header-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Fix menu hamburger trop proche du bord sur mobile */
@media (max-width: 1023px) {
    .header-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (max-width: 640px) {
    .header-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Bouton hamburger avec marge pour éviter d'être coupé */
    .mobile-menu-btn {
        margin-right: 0.25rem;
    }
}

/* ==========================================================================
   14. PERFORMANCE - Reduce Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-video,
    .video-glow-spin,
    .hero-glow-circle {
        animation: none !important;
    }
}

/* ==========================================================================
   15. HIGH CONTRAST MODE - Accessibilité
   ========================================================================== */

@media (prefers-contrast: high) {
    .btn-outline,
    .salon-btn-call,
    .form-input,
    .form-select {
        border-width: 2px;
    }

    .text-gray,
    .hero-description,
    .section-subtitle {
        color: rgba(255, 255, 255, 0.9);
    }
}

/* ==========================================================================
   16. DARK MODE OVERRIDE (si système)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Déjà dark par défaut, mais on peut forcer */
    :root {
        color-scheme: dark;
    }
}

/* ==========================================================================
   17. PRINT STYLES - Bonus
   ========================================================================== */

@media print {
    .header,
    .nav-mobile,
    .mobile-menu-btn,
    .hero-video-container,
    .btn,
    .scroll-indicator {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hero,
    .about,
    .services,
    .salons {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   18. LANDSCAPE MOBILE - Orientation Fixes
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: 4rem 1rem 2rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 0.875rem;
    }

    .hero-buttons {
        margin-top: 1rem;
    }

    .scroll-indicator {
        display: none;
    }
}

/* Mode paysage mobile et tablette - Header compact */
@media (max-height: 600px) and (orientation: landscape) {
    /* Header ultra-compact */
    .header {
        padding: 0.25rem 0;
    }

    .header-container {
        height: 3.5rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .logo img {
        height: 2rem !important;
    }

    /* Réduire les sections hero */
    .hero,
    .find-salon-hero {
        padding: 4rem 1rem 2rem !important;
        min-height: 100vh;
    }

    .find-salon-hero {
        padding: 5rem 1rem 2rem !important;
    }

    /* Ajuster les premières sections */
    main > section:first-child {
        padding-top: 4rem !important;
    }

    /* Menu mobile hamburger plus petit */
    .mobile-menu-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    .mobile-menu-btn span {
        height: 2px;
    }

    /* Navigation desktop compacte */
    .nav-desktop .nav-link {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }

    .nav-desktop .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    /* Menu mobile en mode paysage */
    .nav-mobile-links {
        padding: 4rem 1.5rem 2rem !important;
    }

    .nav-mobile-link {
        font-size: 1.125rem !important;
        padding: 0.5rem 1rem !important;
    }

    .nav-mobile-btn {
        margin-top: 1rem !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Réduire tout le contenu en hauteur */
    .section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* iPad en mode paysage spécifiquement */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .header-container {
        height: 4rem !important;
    }

    .logo img {
        height: 2.5rem !important;
    }

    .nav-desktop .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    main > section:first-child {
        padding-top: 5rem !important;
    }
}

/* ==========================================================================
   19. VERY SMALL DEVICES - Galaxy Fold (280px)
   ========================================================================== */

@media (max-width: 320px) {
    .hero-title {
        font-size: 1.5rem;
        padding: 0 0.5rem;
    }

    .hero-description {
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

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

    .btn,
    .salon-btn {
        font-size: 0.75rem;
        padding: 0.75rem 0.875rem;
    }
}

/* ==========================================================================
   20. LARGE DESKTOP - Prevent Over-Stretching (2560px+)
   ========================================================================== */

@media (min-width: 2560px) {
    .container,
    .hero-content,
    .about-content,
    .services-container,
    .salons-container {
        max-width: 1920px;
    }

    .hero-title {
        font-size: 8rem;
    }

    .section-title {
        font-size: 4rem;
    }
}

/* ==========================================================================
   21. UTILITIES - Helper Classes
   ========================================================================== */

/* Force show on mobile only */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }
}

/* Prevent text selection on UI elements */
.btn,
.nav-link,
.mobile-menu-btn {
    user-select: none;
    -webkit-user-select: none;
}

/* Smooth scroll for all anchor links */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   22. LOADING STATES - Skeleton Screens
   ========================================================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   23. HEADER FIXED - Correction espacement contenu mobile
   ========================================================================== */

/* Assure que le contenu ne passe pas sous le header fixe */
@media (max-width: 1023px) {
    /* Ajustement pour toutes les sections qui commencent la page */
    main > section:first-child {
        padding-top: 6rem !important; /* Header height + extra space */
    }

    /* Correction spécifique pour les pages Tailwind avec pt-16, pt-20, etc. */
    main > section:first-child[class*="pt-"] {
        padding-top: 6rem !important;
    }
}

@media (max-width: 640px) {
    /* Sur très petit écran, encore plus d'espace */
    main > section:first-child {
        padding-top: 5.5rem !important;
    }
}

/* ==========================================================================
   24. MOBILE NAVBAR MENU - Correction débordement et scroll
   ========================================================================== */

@media (max-width: 1023px) {
    /* Empêcher le scroll du body quand le menu est ouvert */
    body.nav-mobile-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Assurer que le menu mobile prend toute la hauteur */
    .nav-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Contenu du menu mobile centré avec padding approprié */
    .nav-mobile-links {
        padding: 6rem 1.5rem 3rem; /* Top padding pour éviter le header */
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Liens du menu avec espacement approprié */
    .nav-mobile-link {
        font-size: 1.5rem;
        padding: 0.75rem 1rem;
        display: block;
    }

    /* Bouton RDV dans le menu mobile */
    .nav-mobile-btn {
        margin-top: 1.5rem;
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Petits écrans - réduire la taille des liens */
@media (max-width: 380px) {
    .nav-mobile-link {
        font-size: 1.25rem;
    }

    .nav-mobile-btn {
        font-size: 0.875rem;
        padding: 0.875rem 1.5rem;
    }
}

/* ==========================================================================
   25. HEADER HEIGHT - Assurer consistance sur tous devices
   ========================================================================== */

/* Header plus compact sur mobile */
@media (max-width: 640px) {
    .header-container {
        height: 4rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .logo img {
        height: 2.5rem;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .header-container {
        height: 4.5rem;
    }

    .logo img {
        height: 3rem;
    }
}

/* ==========================================================================
   26. Z-INDEX MANAGEMENT - Éviter les conflits de couches
   ========================================================================== */

/* Assurer l'ordre correct des couches */
.header {
    z-index: 100 !important;
}

.logo {
    z-index: 110 !important;
}

.mobile-menu-btn {
    z-index: 110 !important;
}

.nav-mobile {
    z-index: 90 !important;
}

/* Le contenu principal doit être sous le header */
main {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   27. BADGE "OUVERTURE PROCHAINE" - Responsive
   ========================================================================== */

/* Responsive badge ouverture prochaine sur les cartes salon */
@media (max-width: 640px) {
    .salon-image div[style*="Ouverture Prochaine"] div,
    .find-salon-image div[style*="Ouverture Prochaine"] div {
        padding: 0.625rem 1.25rem !important;
    }

    .salon-image div[style*="Ouverture Prochaine"] p,
    .find-salon-image div[style*="Ouverture Prochaine"] p {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 380px) {
    .salon-image div[style*="Ouverture Prochaine"] div,
    .find-salon-image div[style*="Ouverture Prochaine"] div {
        padding: 0.5rem 1rem !important;
    }

    .salon-image div[style*="Ouverture Prochaine"] p,
    .find-salon-image div[style*="Ouverture Prochaine"] p {
        font-size: 0.75rem !important;
        letter-spacing: 0.03em !important;
    }
}

/* ==========================================================================
   28. INPUT TÉLÉPHONE INTERNATIONAL - Responsive Country Selector
   ========================================================================== */

@media (max-width: 480px) {
    /* Réduire la largeur du sélecteur de pays */
    #country-code {
        flex: 0 0 110px !important;
        font-size: 0.875rem !important;
        padding-right: 2rem !important;
    }

    /* Ajuster padding de l'input téléphone */
    #phone {
        font-size: 0.9375rem !important;
    }
}

@media (max-width: 380px) {
    #country-code {
        flex: 0 0 100px !important;
        font-size: 0.8125rem !important;
    }
}

/* ==========================================================================
   29. PAGE NOS SALONS - Responsive Fixes
   ========================================================================== */

.find-salon-page {
    overflow-x: hidden;
}

/* Hero section nos salons */
@media (max-width: 640px) {
    .find-salon-hero {
        padding: 6rem 1rem 2.5rem !important;
    }

    .find-salon-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .find-salon-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.5;
    }

    .salon-search {
        padding: 0 0.5rem;
        margin-bottom: 2.5rem !important;
    }

    .search-input {
        padding: 0.875rem 1rem 0.875rem 2.75rem !important;
        font-size: 1rem !important;
    }
}

/* Salon cards grid responsive */
@media (max-width: 640px) {
    .find-salons-grid {
        gap: 1rem !important;
    }

    .find-salon-card {
        border-radius: 10px !important;
    }

    .find-salon-image {
        height: 160px !important;
    }

    .find-salon-body {
        padding: 1rem !important;
    }

    .find-salon-name {
        font-size: 1.1rem !important;
    }

    .find-salon-address {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }

    .find-salon-actions {
        gap: 0.5rem !important;
    }

    .find-salon-btn {
        padding: 0.65rem 0.75rem !important;
        font-size: 0.8rem !important;
        min-height: 44px;
    }
}

/* CTA card responsive */
@media (max-width: 640px) {
    .find-salon-cta-card,
    .salon-card-cta {
        min-height: 300px !important;
    }

    .find-salon-cta-icon,
    .salon-cta-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .find-salon-cta-icon svg,
    .salon-cta-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .find-salon-cta-title,
    .salon-cta-title {
        font-size: 1.25rem !important;
    }

    .find-salon-cta-text,
    .salon-cta-text {
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   30. PAGE DEVENIR FRANCHISE - Responsive Fixes
   ========================================================================== */

.franchise-page {
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .franchise-hero {
        padding: 6rem 1rem 3rem !important;
    }

    .franchise-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.25;
    }

    .franchise-hero-subtitle {
        font-size: 1rem !important;
    }

    .market-intro {
        font-size: 0.9rem !important;
        line-height: 1.6;
    }

    .hero-cta-btn {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        width: 100%;
        max-width: 280px;
    }

    .why-join {
        padding: 2.5rem 1rem !important;
    }

    .why-join-title {
        font-size: 1.5rem !important;
    }

    .why-join-card {
        padding: 1.5rem !important;
    }

    .why-join-card-title {
        font-size: 1.1rem !important;
    }

    .why-join-card-text {
        font-size: 0.85rem !important;
    }

    .franchise-testimonials {
        padding: 2.5rem 1rem !important;
    }

    .franchise-testimonials-title {
        font-size: 1.35rem !important;
    }

    .testimonials-grid {
        gap: 1rem !important;
    }

    .franchise-testimonial-card {
        padding: 1.25rem !important;
    }

    .requirements-section {
        padding: 2.5rem 1rem !important;
    }

    .requirements-title {
        font-size: 1.35rem !important;
    }

    .requirements-subtitle {
        font-size: 0.9rem !important;
    }

    .requirement-card {
        padding: 1.25rem !important;
    }

    .investment-cta-box {
        padding: 1.5rem 1.25rem !important;
    }

    .investment-cta-title {
        font-size: 1.15rem !important;
    }

    .investment-cta-text {
        font-size: 0.9rem !important;
    }

    .investment-cta-btn {
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
        width: 100%;
        max-width: 280px;
    }

    .contact-section {
        padding: 2.5rem 1rem !important;
    }

    .cta-banner {
        padding: 2rem 1rem !important;
    }

    .cta-banner-title {
        font-size: 1.2rem !important;
    }
}

/* Sticky CTA franchise - Mobile fixes */
@media (max-width: 640px) {
    #sticky-cta {
        padding: 1rem !important;
    }

    #sticky-cta > div {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center;
    }

    #sticky-cta p:first-child {
        font-size: 0.95rem !important;
    }

    #sticky-cta p:last-of-type {
        font-size: 0.75rem !important;
    }

    #sticky-cta a {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.85rem !important;
        width: 100%;
        justify-content: center;
    }
}

/* Safe area for sticky CTA */
@supports (padding: env(safe-area-inset-bottom)) {
    #sticky-cta {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
}

/* ==========================================================================
   31. PAGE NOUS REJOINDRE (TUNNEL) - Responsive Fixes
   ========================================================================== */

.tunnel-page {
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .tunnel-content {
        padding: 1.5rem 1rem !important;
    }

    .tunnel-title {
        font-size: 1.35rem !important;
        line-height: 1.35;
    }

    .tunnel-description {
        font-size: 0.875rem !important;
        margin-bottom: 2rem !important;
    }

    .role-options {
        gap: 0.75rem !important;
    }

    .role-btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9rem !important;
        min-height: 48px;
    }

    .tunnel-form-group {
        max-width: 100% !important;
    }

    .tunnel-input,
    .tunnel-select,
    .tunnel-textarea {
        padding: 1rem 1.25rem !important;
        font-size: 1rem !important;
    }

    .tunnel-nav {
        max-width: 100% !important;
        gap: 0.75rem;
    }

    .tunnel-btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.875rem !important;
        min-width: 100px !important;
        min-height: 48px;
    }

    .checkbox-group {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .checkbox-item {
        padding: 0.625rem !important;
    }

    .checkbox-label {
        font-size: 0.8rem !important;
    }

    .radio-card {
        padding: 0.875rem !important;
        font-size: 0.9rem !important;
        min-height: 48px;
    }

    .success-icon {
        width: 70px !important;
        height: 70px !important;
    }

    .success-icon svg {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Phone input intl-tel-input responsive */
@media (max-width: 640px) {
    .iti {
        width: 100% !important;
    }

    .iti__flag-container {
        padding: 0 !important;
    }

    .iti__selected-flag {
        padding: 0 8px 0 12px !important;
    }

    .iti__country-list {
        max-width: calc(100vw - 2rem) !important;
        left: 0 !important;
    }
}

/* ==========================================================================
   32. PAGE ESPACE FIDELITE - Responsive Fixes
   ========================================================================== */

.loyalty-page {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .login-container {
        padding: 5rem 1rem !important;
        min-height: calc(100vh - 5rem) !important;
    }

    .login-info {
        text-align: center;
    }

    .login-info-title {
        font-size: 1.5rem !important;
    }

    .login-info-text {
        font-size: 0.875rem !important;
    }

    .login-form-container {
        margin-top: 2rem !important;
    }

    .login-form-card {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }

    .login-form-title {
        font-size: 1.25rem !important;
    }

    .form-input {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
    }

    .btn-primary {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.2em !important;
    }
}

@media (max-width: 640px) {
    .benefits-section {
        padding: 3rem 1rem !important;
    }

    .benefits-title {
        font-size: 1.5rem !important;
    }

    .benefits-subtitle {
        font-size: 0.875rem !important;
    }

    .benefits-grid {
        gap: 1rem !important;
    }

    .benefit-card {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }

    .benefit-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .benefit-title {
        font-size: 1rem !important;
    }

    .benefit-text {
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   33. PAGE LA MARQUE - Responsive Fixes (Tailwind Override)
   ========================================================================== */

.la-marque-page {
    overflow-x: hidden;
}

/* Hero section La Marque */
@media (max-width: 640px) {
    .la-marque-page section:first-of-type {
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
        min-height: auto !important;
    }

    .la-marque-page section:first-of-type h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .la-marque-page section:first-of-type p {
        font-size: 0.9rem !important;
    }

    .la-marque-page section:first-of-type img {
        max-width: 200px !important;
        margin: 2rem auto 0;
    }
}

/* Timeline mobile improvements */
@media (max-width: 1023px) {
    .la-marque-page .lg\:hidden {
        padding-left: 0.5rem !important;
    }

    .la-marque-page .lg\:hidden .space-y-12 > div {
        padding-left: 0.5rem;
    }
}

/* Brand cards responsive */
@media (max-width: 640px) {
    .la-marque-page .grid.grid-cols-1.md\:grid-cols-2 > div {
        padding: 1.25rem !important;
    }
}

/* CTA section La Marque */
@media (max-width: 640px) {
    .la-marque-page section:last-of-type .rounded-3xl {
        padding: 1.5rem !important;
    }

    .la-marque-page section:last-of-type h1 {
        font-size: 1.25rem !important;
    }

    .la-marque-page section:last-of-type .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }

    .la-marque-page section:last-of-type .flex.flex-col.sm\:flex-row a {
        width: 100% !important;
        justify-content: center;
    }
}

/* ==========================================================================
   34. GENERAL RESPONSIVE - All Pages
   ========================================================================== */

/* CRITICAL: Prevent ALL horizontal overflow */
html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
}

/* Force all elements to respect viewport width */
*,
*::before,
*::after {
    box-sizing: border-box;
    max-width: 100%;
}

/* Exceptions for specific elements that need to overflow */
.swiper-wrapper,
.swiper-slide,
video,
iframe,
svg {
    max-width: none;
}

/* Ensure containers don't overflow */
.container,
section,
header,
footer,
main,
article,
aside,
nav,
div {
    max-width: 100vw;
}

/* Force text to wrap */
p, h1, h2, h3, h4, h5, h6, span, a, li, td, th, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Fix for elements with fixed widths on mobile */
@media (max-width: 768px) {
    /* Force flex items to wrap */
    .flex,
    [class*="flex"] {
        flex-wrap: wrap !important;
    }

    /* Force grid to single column if needed */
    .grid {
        min-width: 0;
    }

    /* Ensure form elements don't overflow */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        width: 100%;
    }

    /* Images must fit container */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables responsive */
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pre and code blocks */
    pre, code {
        white-space: pre-wrap;
        word-wrap: break-word;
        max-width: 100%;
    }
}

/* Better tap targets for mobile */
@media (max-width: 768px) {
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .nav-link,
    .salon-btn,
    .role-btn,
    .tunnel-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Container max-width on very large screens */
@media (min-width: 1920px) {
    .container,
    .services-container,
    .salons-container,
    .testimonials-container,
    .franchise-container,
    .find-salons-container {
        max-width: 1600px !important;
    }
}

/* Fluid typography */
html {
    font-size: 16px;
}

@media (max-width: 375px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }
}

/* Images should never overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Videos should never overflow */
video,
iframe {
    max-width: 100%;
}

/* Fix for iOS input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   35. FOOTER - Enhanced Mobile Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .footer {
        padding: 2.5rem 1rem 1.5rem !important;
    }

    .footer-grid-3 {
        gap: 1.5rem !important;
    }

    .footer-column {
        gap: 1.5rem !important;
    }

    .footer-section-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .footer-link {
        font-size: 0.8rem !important;
        padding: 0.375rem 0 !important;
    }

    .footer-address {
        font-size: 0.8rem !important;
    }

    .footer-logo-column {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .footer-logo {
        height: 2.5rem !important;
    }

    .footer-copyright {
        font-size: 0.7rem !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   36. SWIPER/CAROUSEL - Mobile Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .swiper {
        overflow: visible !important;
    }

    .swiper-wrapper {
        padding-bottom: 0.5rem;
    }

    .swiper-pagination {
        bottom: 0 !important;
    }

    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }

    .testimonials-swiper {
        padding-bottom: 2rem !important;
    }
}

/* ==========================================================================
   37. BUTTONS - Enhanced Mobile Styles
   ========================================================================== */

@media (max-width: 640px) {
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.8rem !important;
    }

    .btn-primary,
    .btn-outline,
    .btn-ghost {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hero-btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.8rem !important;
    }

    .services-cta-btn {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.85rem !important;
        width: 100%;
        max-width: 260px;
    }

    .franchise-cta-btn {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   38. CARDS - Enhanced Mobile Styles
   ========================================================================== */

@media (max-width: 640px) {
    .service-card,
    .salon-card,
    .testimonial-card,
    .franchise-benefit,
    .requirement-card {
        border-radius: 0.75rem !important;
    }

    /* Service cards with images */
    .service-card-image {
        min-height: 250px !important;
    }

    .service-card-content {
        padding: 1.25rem !important;
    }

    .service-title {
        font-size: 1.1rem !important;
    }

    .service-description {
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   39. GRIDS - Enhanced Mobile Layouts
   ========================================================================== */

/* Ensure single column on very small screens */
@media (max-width: 480px) {
    .services-grid,
    .salons-grid,
    .franchise-benefits,
    .franchise-stats,
    .requirements-grid,
    .testimonials-grid,
    .benefits-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Two columns on small tablets */
@media (min-width: 481px) and (max-width: 767px) {
    .franchise-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .franchise-benefits {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   40. SECTION PADDING - Consistent Mobile Spacing
   ========================================================================== */

@media (max-width: 640px) {
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .about,
    .services,
    .salons,
    .testimonials,
    .franchise {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .section-header {
        margin-bottom: 1.5rem !important;
    }

    .section-title {
        font-size: 1.35rem !important;
        line-height: 1.25;
    }

    .section-subtitle {
        font-size: 0.875rem !important;
        margin-top: 0.5rem !important;
    }
}

/* ==========================================================================
   41. ANIMATIONS - Reduce on mobile for performance
   ========================================================================== */

@media (max-width: 768px) {
    /* Disable hover transforms on touch devices */
    .service-card:hover,
    .salon-card:hover,
    .testimonial-card:hover,
    .franchise-benefit:hover {
        transform: none !important;
    }

    /* Keep border color change on hover */
    .service-card:active,
    .salon-card:active {
        border-color: rgba(186, 156, 112, 0.3);
    }
}

/* ==========================================================================
   42. NOTCH/SAFE AREA - iPhone X+ Support
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {
    .header {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }

    .footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .nav-mobile {
        padding-top: max(6rem, calc(env(safe-area-inset-top) + 5rem));
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Full-width sections */
    .hero,
    .about,
    .services,
    .salons,
    .testimonials,
    .franchise {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* ==========================================================================
   FIN DES CORRECTIONS RESPONSIVE
   ========================================================================== */