/*
 * Responsive CSS pour La Castafiore
 * Rend responsive UNIQUEMENT le front-end (pas /admin)
 * Ne modifie PAS le comportement desktop (>768px reste identique)
 *
 * Media Queries:
 * - Tablettes: ≤768px
 * - Mobiles: ≤480px
 */

/* ==========================================
   DÉTECTION APPAREILS TACTILES (JavaScript)
   ========================================== */

/* Sur les appareils tactiles, désactive le hover du menu et force le click */
/* La classe .touch-device est ajoutée par JavaScript (mobile-menu.js) */
html.touch-device #menu-accordeon li:hover {
    background: inherit !important;
    background-image: url(../images/metal.jpg) !important;
}

html.touch-device #menu-accordeon li:hover li {
    max-height: 0 !important;
    overflow: hidden !important;
}

/* Utilise uniquement le click (classe .menu-open) sur tactile */
html.touch-device #menu-accordeon li.menu-open {
    background: #FF0066 !important;
    background-image: none !important;
}

html.touch-device #menu-accordeon li.menu-open li {
    max-height: 15em !important;
}

/* ==========================================
   MODE PAYSAGE TABLETTE/MOBILE (481px-1100px)
   IMPORTANT: Corrige le scroll horizontal sur tablettes paysage
   ========================================== */

@media screen and (min-width: 481px) and (max-width: 1100px) {

    /* Container principal */
    body {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    .container_12 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    /* Toutes les grilles en 100% pour éviter dépassement */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 0 10px !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Images - Évite dépassement */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix grids imbriqués (comme span.grid_3 dans .grid_8) */
    .grid_8 span.grid_3,
    .grid_8 .grid_3,
    .grid_10 .grid_3 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Texte - Word wrap pour éviter débordement */
    p, div, span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ==========================================
   TABLETTES (≤768px)
   ========================================== */

@media screen and (max-width: 768px) {

    /* Container principal */
    body {
        min-width: 0; /* Supprime le min-width fixe de 1200px */
    }

    .container_12 {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* Grilles - Layout simplifié pour tablette */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        float: none;
        display: block;
    }

    /* Menu latéral */
    #menu-accordeon {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Menu accordéon tablette - Désactiver hover, utiliser click */
    #menu-accordeon li:hover {
        background: none; /* Désactive le hover background */
        background-image: url(../images/metal.jpg); /* Garde l'image d'origine */
    }

    #menu-accordeon li:hover li {
        max-height: 0; /* Désactive l'ouverture au hover */
    }

    /* Menu accordéon - Affichage des sous-menus sur tablette (click seulement) */
    #menu-accordeon li.menu-open {
        background: #FF0066;
        background-image: none;
    }

    #menu-accordeon li.menu-open li {
        max-height: 15em; /* Affiche les sous-menus quand parent a classe menu-open */
    }

    /* Bandeau header - Adaptation tablette */
    .bandeau_index, .bandeau_other {
        background-size: contain;
        background-position: center top;
        background-repeat: no-repeat;
        min-height: 180px;
    }

    /* Titres */
    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 20px;
    }

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

    /* Calendrier - Wrapper pour scroll horizontal */
    .calendrier {
        display: block;
        overflow-x: auto;
        margin-bottom: 20px;
    }

    .calendrier table {
        min-width: 600px; /* Force largeur minimale pour scroll */
    }

    /* Spectacles - Affiches */
    .grid_3 img {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================
   MOBILES (≤480px)
   ========================================== */

@media screen and (max-width: 480px) {

    /* Reset complet du body */
    body {
        min-width: 0;
        font-size: 16px;
    }

    /* Container */
    .container_12 {
        width: 100%;
        padding: 0 15px; /* Augmenté de 5px à 15px */
    }

    /* Toutes les grilles en 100% */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 10px !important; /* Augmenté de 5px à 10px */
        float: none !important;
        display: block !important;
    }

    /* Titres réduits */
    h1 {
        font-size: 36px;
        letter-spacing: 0.05em;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Menu accordéon mobile - Adapté pour tactile */
    #menu-accordeon {
        width: 100%;
        margin-bottom: 20px;
    }

    #menu-accordeon a {
        font-size: 16px;
        padding: 10px 5px; /* Plus de padding pour tactile */
    }

    #menu-accordeon ul li a {
        font-size: 14px;
    }

    /* Menu accordéon - Affichage des sous-menus sur mobile (sans hover) */
    #menu-accordeon li.menu-open li {
        max-height: 15em; /* Affiche les sous-menus quand parent a classe menu-open */
    }

    #menu-accordeon li.menu-open {
        background: #FF0066;
        background-image: none;
    }

    /* Bandeau header - Responsive mobile */
    .bandeau_index, .bandeau_other {
        background-size: contain;
        background-position: center top;
        background-repeat: no-repeat;
        min-height: 150px;
        padding-top: 10px;
    }

    /* Ajustement du titre dans le bandeau pour mobile */
    .bandeau_index h3,
    .bandeau_other h3 {
        padding: 10px 15px;
        margin-top: 80px; /* Espace pour le logo */
    }

    /* Espacements BR */
    .grid_12 > BR {
        display: none; /* Masque les BR multiples */
    }

    /* Calendrier mobile */
    .calendrier {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 15px;
    }

    .calendrier table {
        min-width: 500px;
        font-size: 14px;
    }

    .calendrier th:first-child {
        width: 120px;
        font-size: 18px;
    }

    .calendrier th {
        width: 50px;
        height: 40px;
        font-size: 12px;
    }

    .calendrier td {
        width: 50px;
        height: 60px;
        font-size: 14px;
        padding: 2px;
    }

    .calendrier td img {
        max-width: 40px;
        height: auto;
    }

    /* Spectacles - Affiches en 100% */
    .grid_3 {
        width: 100% !important;
        text-align: center;
        margin-bottom: 20px;
    }

    .grid_3 img,
    .grid_2 img {
        max-width: 80%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    /* Formulaires responsive */
    form {
        width: 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* Évite le zoom iOS */
        padding: 10px;
        margin-bottom: 10px;
    }

    input[type="radio"],
    input[type="checkbox"] {
        margin-right: 8px;
    }

    label {
        display: inline-block;
        margin-bottom: 5px;
        font-size: 14px;
    }

    /* Boutons */
    input[type="submit"],
    button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        margin-top: 10px;
    }

    /* Tables génériques */
    table {
        font-size: 14px;
    }

    table td,
    table th {
        padding: 5px;
    }

    /* Alignements */
    .align_center,
    .align_justify,
    .align_right {
        padding: 0 10px;
    }

    /* Paragraphes */
    p {
        margin-bottom: 15px;
        line-height: 1.6;
    }

    /* Liens */
    a {
        word-wrap: break-word;
    }

    /* Footer */
    #_footer {
        font-size: 12px;
        padding: 10px;
        text-align: center;
    }

    /* Breadcrumbs */
    #crumbs {
        font-size: 14px;
        padding: 5px 10px;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Fix pour fiche-spectacle */
    .grid_5 {
        margin-bottom: 20px;
    }

    /* Fix pour les tableaux de tarifs */
    #prix {
        font-size: 12px;
    }

    /* CGU/CGV */
    #cgu-cgv {
        font-size: 14px;
        padding: 10px;
    }

    #cgu-cgv ul li {
        text-indent: 10px;
        margin-bottom: 5px;
    }

    /* Hide/Show elements pour mobile */
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

/* ==========================================
   TRÈS PETITS ÉCRANS (≤320px)
   ========================================== */

@media screen and (max-width: 320px) {

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
    }

    body {
        font-size: 14px;
    }

    .calendrier table {
        min-width: 450px;
    }

    .calendrier th:first-child {
        width: 100px;
        font-size: 14px;
    }

    .calendrier td img {
        max-width: 30px;
    }
}

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

@media screen and (max-width: 768px) and (orientation: landscape) {

    .bandeau_index, .bandeau_other {
        background-size: contain;
        background-position: center top;
        min-height: 120px;
    }

    .bandeau_index h3,
    .bandeau_other h3 {
        margin-top: 60px;
        font-size: 16px;
    }

    h1 {
        font-size: 40px;
    }
}

/* ==========================================
   PRINT (Bonus)
   ========================================== */

@media print {

    #menu-accordeon,
    #crumbs {
        display: none;
    }

    .container_12 {
        width: 100%;
    }

    body {
        color: #000;
        background: #fff;
    }
}