/**
 * CORRECTIONS MOBILE - SENES EXPERTS
 * Corrections spécifiques pour améliorer l'affichage mobile
 */

/* ==========================================
   TABLEAU COMPARATIF - CORRECTIONS MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Tableau comparatif : forcer le scroll horizontal avec indicateur */
    table {
        min-width: 700px !important;
        font-size: 13px !important;
    }
    
    table th,
    table td {
        padding: 12px 10px !important;
        font-size: 12px !important;
    }
    
    /* Améliorer le conteneur avec scroll */
    [style*="overflow-x:auto"] {
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
    }
    
    /* Indicateur de scroll */
    [style*="overflow-x:auto"]::after {
        content: "← Faites défiler →";
        display: block;
        text-align: center;
        padding: 12px;
        background: linear-gradient(90deg, rgba(24,64,124,0.1), rgba(24,64,124,0.2), rgba(24,64,124,0.1));
        color: #18407C;
        font-size: 12px;
        font-weight: 600;
        border-radius: 0 0 8px 8px;
    }
}

@media (max-width: 480px) {
    table {
        min-width: 650px !important;
        font-size: 11px !important;
    }
    
    table th,
    table td {
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
    
    table th {
        font-size: 12px !important;
    }
    
    /* Badges plus petits sur mobile */
    table span[style*="padding"] {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
}

/* ==========================================
   PAGE OFFRES & PACKS - CORRECTIONS MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Cartes pack : passer en colonne sur mobile */
    .g2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .pack {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Ajuster le positionnement du badge */
    .pack .badge {
        position: absolute;
        top: -15px;
        right: 20px;
        left: auto !important;
    }
    
    /* Liste des caractéristiques */
    .pack ul {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .pack li {
        padding-left: 30px !important;
        text-indent: 0 !important;
    }
    
    /* Titres de packs plus petits */
    .pack h3 {
        font-size: 24px !important;
    }
    
    /* Centrer le contenu des packs */
    .pack {
        text-align: center;
    }
    
    .pack ul {
        text-align: left;
    }
}

/* ==========================================
   EMAIL CLIQUABLE - CORRECTION
   ========================================== */

/* S'assurer que tous les emails sont cliquables */
a[href^="mailto:"] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

a[href^="mailto:"]:hover {
    color: #CCB892;
    text-decoration: underline;
}

/* Dans le topbar */
.topbar a[href^="mailto:"] {
    color: #181818;
}

.topbar a[href^="mailto:"]:hover {
    opacity: 0.7;
}

/* Dans le footer */
footer a[href^="mailto:"] {
    color: #CCB892;
}

footer a[href^="mailto:"]:hover {
    color: #fff;
}

/* ==========================================
   TOPBAR - AMÉLIORATIONS MOBILE
   ========================================== */

@media (max-width: 768px) {
    .topbar {
        font-size: 11px !important;
        padding: 10px 0 !important;
    }
    
    .topbar .c {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .topbar a {
        display: block;
        width: 100%;
    }
}

/* ==========================================
   HERO - AMÉLIORATIONS MOBILE
   ========================================== */

@media (max-width: 768px) {
    .hero {
        height: 500px !important;
        min-height: auto !important;
    }
    
    .hero h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    .hero .desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 450px !important;
    }
    
    .hero h1 {
        font-size: 28px !important;
    }
    
    .hero .desc {
        font-size: 14px !important;
    }
}

/* ==========================================
   SECTIONS - PADDING MOBILE
   ========================================== */

@media (max-width: 768px) {
    section {
        padding: 60px 20px !important;
    }
    
    .c {
        padding: 0 20px !important;
    }
}

@media (max-width: 480px) {
    section {
        padding: 40px 15px !important;
    }
    
    .c {
        padding: 0 15px !important;
    }
}

/* ==========================================
   GRILLES - RESPONSIVE MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Grille 2 colonnes → 1 colonne */
    .g2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Grille 3 colonnes → 1 colonne */
    .g3 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Grille 4 colonnes → 2 colonnes puis 1 */
    .g4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .g4 {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================
   MODAL CALENDLY - RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    #calendly-modal .modal-content {
        width: 95% !important;
        height: 90vh !important;
        max-height: 600px !important;
    }
    
    #calendly-modal iframe {
        height: calc(90vh - 60px) !important;
        max-height: 540px !important;
    }
}

@media (max-width: 480px) {
    #calendly-modal .modal-content {
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    
    #calendly-modal iframe {
        height: calc(100vh - 60px) !important;
        max-height: none !important;
    }
}

/* ==========================================
   BOUTONS - RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .btn {
        padding: 12px 28px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .btn {
        width: 100% !important;
        max-width: 300px !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ==========================================
   FOOTER - RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    footer .c > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px !important;
    }
    
    footer .col {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================
   MENU NAVIGATION - CORRECTIONS
   ========================================== */

@media (max-width: 768px) {
    .nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: #18407C;
        padding: 80px 30px 30px;
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    
    .nav.open {
        left: 0;
        box-shadow: 2px 0 20px rgba(0,0,0,0.3);
    }
    
    .nav a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Burger menu */
    .burger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 10px;
    }
    
    .burger span {
        width: 25px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s;
    }
    
    .burger.open span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    
    .burger.open span:nth-child(2) {
        opacity: 0;
    }
    
    .burger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* ==========================================
   TEXTES - LISIBILITÉ MOBILE
   ========================================== */

@media (max-width: 768px) {
    body {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    h1 {
        font-size: 32px !important;
    }
    
    h2 {
        font-size: 28px !important;
    }
    
    h3 {
        font-size: 20px !important;
    }
    
    .t {
        font-size: 28px !important;
    }
    
    .desc {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 28px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    .t {
        font-size: 24px !important;
    }
}

/* ==========================================
   IMAGES - RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .mission-img,
    .facture-img,
    .outil-img {
        height: 250px !important;
    }
    
    .facture-element-img {
        height: 200px !important;
    }
}

/* ==========================================
   PERFORMANCE & TOUCH
   ========================================== */

/* Améliorer le scroll tactile */
* {
    -webkit-overflow-scrolling: touch;
}

/* Désactiver le tap highlight sur iOS */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Améliorer les zones de touch */
@media (hover: none) and (pointer: coarse) {
    a, button, .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================
   FIX ORIENTATION PAYSAGE MOBILE
   ========================================== */

@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        height: 400px !important;
    }
    
    #calendly-modal .modal-content {
        height: 95vh !important;
    }
}

/* ==========================================
   CORRECTIONS CÉSURE IPHONE
   Fix pour empêcher la coupure des mots avec tiret
   ========================================== */

/* Empêcher la césure automatique sur tous les titres */
h1, h2, h3, h4, h5, h6, .t, .hero h1 {
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

/* iPhone spécifique (375px comme iPhone 11 Pro) */
@media (max-width: 400px) {
    .hero h1 {
        font-size: 24px !important;
        line-height: 1.4 !important;
        /* Empêcher la coupure des mots */
        -webkit-hyphens: none !important;
        -moz-hyphens: none !important;
        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
    
    /* Topbar plus compact sur très petit écran */
    .topbar {
        font-size: 10px !important;
    }
}

/* ==========================================
   PRINT MEDIA
   ========================================== */

@media print {
    .topbar,
    .hdr,
    .burger,
    #cookie-banner,
    footer {
        display: none !important;
    }
    
    * {
        background: #fff !important;
        color: #000 !important;
    }
}