/* ============================================
   Finitions smartphone et tablette
   (chargé en dernier : corrige ce qui gêne sur petit écran)
   ============================================ */

/* ---------- Tablette et téléphone (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
    /* « Notre expertise » : photo au-dessus, contenu sur toute la largeur */
    .exp-grid { grid-template-columns: 1fr; gap: 32px; }
    .exp-img { position: relative; top: auto; }
    .exp-img img { aspect-ratio: 16 / 9; }
}

/* ---------- Téléphone (≤ 720 px) ---------- */
@media (max-width: 720px) {
    /* iPhone : un champ en dessous de 16 px fait zoomer toute la page au toucher */
    input, select, textarea,
    .bk-input, .fg input, .fg textarea, .lead-input, .chat-input { font-size: 16px !important; }

    /* Expertises : une seule colonne, cartes plus compactes */
    .exp-list { grid-template-columns: 1fr; }
    .exp-item { flex-direction: row; padding: 16px; }
    .exp-badge { position: static; margin-top: -28px; margin-left: 12px; margin-right: 12px; }

    /* Avatar Eythan : petite pastille ronde centrée sur son visage.
       (le personnage occupe le centre d'une image de 1024 px : visage vers x=535, y=255) */
    .eythan-bubble {
        right: 14px; bottom: 14px; width: 60px; height: 60px; border-radius: 50%;
        overflow: hidden; background: linear-gradient(160deg, #eef3ff, #dbe6ff);
        border: 2px solid #fff; box-shadow: 0 8px 22px -6px rgba(11, 27, 63, .45);
    }
    .eythan-img {
        position: absolute; max-width: none; width: 307px !important; height: 307px;
        left: -130px; top: -46px; filter: none; animation: none;
    }
    .exp-badge { position: relative; z-index: 2; }

    /* Zones de toucher : au moins 44 px de haut (recommandation Apple / Google) */
    .link-arrow { min-height: 44px; }
    .footer-col ul { gap: 0; }
    .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-bot-links { gap: 0 20px; }
    .footer-bot-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .contact-list a, .contact-links a, .office a { display: inline-flex; align-items: center; min-height: 44px; }
    .contact-links { gap: 0 18px; margin-top: 0; }
    .team-close, .car-pause, .bk-nav { width: 44px; height: 44px; }
    .chat-close { min-width: 44px; min-height: 44px; }
    .bk-cell { font-size: 14px; }
    .bk-grid, .bk-day-names { gap: 3px; }
    .bk-slot { min-height: 44px; font-size: 14px; }
    /* Points du carrousel : on garde le trait fin, mais la zone de toucher est haute */
    .carousel .car-dot { height: 44px; padding: 20px 0; background-clip: content-box; border-radius: 0; }
    .car-dot i { top: 20px; bottom: 20px; }
    .car-dots { gap: 6px; }

    /* Textes jamais en dessous de 12 px */
    .bk-dn, .hero-trusted-label, .step-get-label, .exp-tech-label, .marquee-label { font-size: 12px; }

    /* Calendrier de rendez-vous : téléphone et entreprise l'un sous l'autre */
    .bk-row2 { grid-template-columns: 1fr; gap: 0; }

    /* Fenêtres : plus d'air autour du contenu, défilement interne si besoin */
    .sol-popup-modal, .team-popup, .lead-popup { max-height: calc(100dvh - 32px); overflow-y: auto; }
}

/* ---------- Très petit téléphone (≤ 380 px) ---------- */
@media (max-width: 380px) {
    .hero h1 { font-size: 2.1rem; }
    .hero-btns .btn { width: 100%; }
    .train-tile .train-price b { font-size: 2.2rem; }
    .steps-cta-chips li { font-size: 12.5px; }
}

/* Un tableau ignore « width: 1px » : on le force en bloc pour qu il reste vraiment caché (sinon il élargit la page sur petit écran) */
table.sr-only { display: block; }

/* Petits téléphones : marges réduites autour du calendrier pour des cases plus grandes */
@media (max-width: 420px) {
    #rdv .container { padding-left: 12px; padding-right: 12px; }
    .audit-cta { padding: 20px 10px; }
    .bk-left, .bk-right { padding: 14px 10px; }
}