/*
 * yamato-mobile.css — v3.23.326
 *
 * Rend les formulaires publics + les pages Yamato lisibles et remplissables
 * confortablement depuis un smartphone.
 *
 * Stratégie : override en `!important` des styles inline problématiques
 * hérités des templates historiques (grid-template-columns fixes, padding
 * généreux, font-size trop petits, boutons trop courts pour un doigt).
 *
 * Ne touche RIEN sur desktop (>= 769px). Sécurisé.
 */

/* ═══════════════════════════════════════════════════════════
 * SECTION 1 — Micro-normalisation universelle des formulaires
 * (s'applique aussi sur desktop, sans impact visible)
 * ═══════════════════════════════════════════════════════════ */

/* Empêche le zoom auto d'iOS quand on tape dans un champ (input < 16px = zoom auto) */
.test1-form-container input,
.test1-form-container select,
.test1-form-container textarea,
.test1-registration-form input,
.test1-registration-form select,
.test1-registration-form textarea,
#ym-ft-form input,
#ym-ft-form select,
#ym-ft-form textarea,
.ym-services-form input,
.ym-services-form select,
.ym-services-form textarea {
    font-size: 16px;
}

/* Cible tactile minimum WCAG : 44×44px */
.test1-form-container button,
.test1-registration-form button,
#ym-ft-form button,
.ym-services-form button {
    min-height: 44px;
    touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════
 * SECTION 2 — Mode mobile pur (< 768px)
 * ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── FORMULAIRES : conteneurs ─── */
    .test1-form-container,
    .test1-registration-form-wrapper,
    .ym-services-form-wrapper {
        padding: 12px !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .test1-form-title,
    .test1-form-container h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin: 8px 0 16px !important;
    }

    /* ─── SECTIONS de formulaire ─── */
    .test1-form-section,
    [class*="form-section"] {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }

    .test1-form-section h3,
    [class*="form-section"] h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* ─── GRILLES à 2/3 colonnes → forcer 1 colonne mobile ─── */
    /* Cible les grid inline de type repeat(auto-fit,minmax(220px,1fr)) */
    .test1-form-container div[style*="grid-template-columns"],
    .test1-registration-form div[style*="grid-template-columns"],
    #ym-ft-form div[style*="grid-template-columns"],
    .ym-services-form div[style*="grid-template-columns"],
    form[id*="foodtruck"] div[style*="grid-template-columns"],
    form[id*="registration"] div[style*="grid-template-columns"],
    .ymt-container div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Cible les flexbox horizontales avec plusieurs colonnes */
    .test1-form-container div[style*="display:flex"][style*="gap"]:not([style*="flex-direction:column"]),
    .test1-registration-form div[style*="display:flex"][style*="gap"]:not([style*="flex-direction:column"]) {
        flex-wrap: wrap !important;
    }

    /* ─── LABELS radio/checkbox : full width, plus lisibles ─── */
    .test1-form-container label[onclick],
    .test1-registration-form label[onclick] {
        width: 100% !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    /* ─── INPUTS / SELECTS / TEXTAREAS : pleine largeur ─── */
    .test1-form-container input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    .test1-form-container select,
    .test1-form-container textarea,
    .test1-registration-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    .test1-registration-form select,
    .test1-registration-form textarea,
    #ym-ft-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    #ym-ft-form select,
    #ym-ft-form textarea,
    .ym-services-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    .ym-services-form select,
    .ym-services-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        font-size: 16px !important;
    }

    /* ─── BOUTONS : cibles tactiles confortables + pleine largeur ─── */
    .test1-form-container button,
    .test1-form-container button[type="submit"],
    .test1-registration-form button,
    #ym-ft-form button,
    .ym-services-form button {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 16px !important;
        padding: 14px 18px !important;
        margin-top: 6px !important;
    }

    /* Sauf les petits boutons "supprimer photo", "+/-", etc. */
    .test1-form-container button.ym-mini,
    .test1-registration-form button.ym-mini,
    button[title*="Retirer"],
    button[title*="Supprimer"] {
        width: auto !important;
        min-height: 40px !important;
    }

    /* ─── EVENTS SHOWCASE (cartes d'événements dans le form) ─── */
    .ym-ft-event-row,
    [class*="event-row"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* ─── TABLES : scroll horizontal si dépasse ─── */
    .test1-form-container table,
    .ymt-container table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ═══════════════════════════════════════════════════════════
     * SECTION 3 — Pages publiques Yamato (thème + shortcodes)
     * ═══════════════════════════════════════════════════════════ */

    /* Hero, sections publiques, contenu large → padding et max-width mobile */
    .ymt-hero,
    .ymt-section,
    .ymt-container,
    .ym-public-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Titres hero */
    .ymt-hero h1,
    .ymt-hero .ymt-title {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }
    .ymt-hero h2,
    .ymt-section h2 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    /* Cards exposants / food trucks / guests → 1 colonne */
    .ymt-exposants-grid,
    .ymt-foodtrucks-grid,
    .ymt-guests-grid,
    .ym-cards-grid,
    div[class*="cards-grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Footer thème yamato : colonnes → empilé */
    .ymt-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 20px 14px !important;
    }

    /* Navigation mobile : menu horizontal → menu vertical + burger */
    .ymt-nav,
    .ymt-nav ul {
        flex-wrap: wrap !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * SECTION 4 — Tables administratives publiques (billetterie…)
     * ═══════════════════════════════════════════════════════════ */

    .ymt-tickets-table {
        font-size: 13px !important;
    }
    .ymt-tickets-table th,
    .ymt-tickets-table td {
        padding: 8px 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
 * SECTION 5 — Très petits écrans (< 380px, iPhone SE 1re gen)
 * ═══════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
    .test1-form-container,
    .test1-registration-form-wrapper {
        padding: 8px !important;
    }
    .test1-form-title,
    .test1-form-container h2 {
        font-size: 18px !important;
    }
}