/* ==============================================
   MOBILE.CSS — règles responsive uniquement
   Chargé en dernier dans index.php4
   Breakpoints : 800px (tablette) / 620px (mobile)
   ============================================== */

/* --------------------------------------------------
   LAYOUT GÉNÉRAL (800px)
-------------------------------------------------- */
@media only screen and (max-width: 800px) {
    div#container, div#top, div#bottom, header {
        width: 100%;
    }
    #myTopnav {
        margin-left: 0;
    }
}

/* --------------------------------------------------
   MENU NAVIGATION (800px)
-------------------------------------------------- */
@media only screen and (max-width: 800px) {
    ul.topnav li:not(:first-child) { display: none; }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
    ul.topnav.responsive { position: relative; }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}

/* --------------------------------------------------
   CATÉGORIES (620px)
-------------------------------------------------- */
@media (max-width: 620px) {
    .cat_wrap { padding: 8px 0 16px; gap: 14px; }
    .cat_card_inner { flex-direction: column; }
    .cat_imgs {
        flex-direction: row;
        flex: none;
        width: 100%;
        height: 100px;
        border-right: none;
        border-bottom: 1px solid #e8e0d8;
        overflow: hidden;
    }
    .cat_thumb {
        width: 33.33%;
        max-width: 33.33%;
        height: 100px;
        object-fit: cover;
        border-bottom: none;
        border-right: 1px solid #e8e0d8;
        flex: 1;
    }
    .cat_thumb:last-child { border-right: none; }
    .cat_content { padding: 12px 14px; }
    .cat_titre { font-size: 17px; }
    .cat_desc { font-size: 12px; }
    .cat_actions { gap: 8px; }
    .cat_btn { font-size: 12px; padding: 5px 12px; }
}

/* --------------------------------------------------
   NEWS (620px)
-------------------------------------------------- */
@media (max-width: 620px) {
    .news_card_body { flex-direction: column; }
    .news_detail_nav { flex-direction: column; }
    .news_nav_btn { max-width: 100%; }
    .news_nav_next { margin-left: 0; text-align: left; }
    .comm_row { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------
   CALENDRIER (620px)
-------------------------------------------------- */
@media (max-width: 620px) {
    .cal_mois_grid { gap: 8px; padding: 10px 12px; }
    .cal_item { width: 92px; flex: 0 0 92px; }
    .cal_item_img { height: 88px; max-width: 80px; }
    .cal_item_noimg { height: 88px; width: 70px; }
    .cal_annee_titre { font-size: 24px; }
    .cal_nav_btn { padding: 6px 14px; font-size: 13px; }
}

/* --------------------------------------------------
   DANBOARD MASCOTTE (620px)
-------------------------------------------------- */
@media (max-width: 620px) {
    .danboard_mascotte { display: none; }
}

/* --------------------------------------------------
   BANNIÈRE — image titre pleine largeur (800px)
-------------------------------------------------- */
@media only screen and (max-width: 800px) {
    div#top img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* --------------------------------------------------
   GRILLE FIGURINES — 2 colonnes (620px)
   Concerne defaut.php4 et liste.php4
-------------------------------------------------- */
@media (max-width: 620px) {

    div[align="center"],
    center {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 6px;
        box-sizing: border-box;
        text-align: left;
    }

    div[align="center"] > .titre,
    center > .titre,
    div[align="center"] > .total,
    center > .total,
    div[align="center"] > form,
    center > form,
    div[align="center"] > br,
    center > br {
        grid-column: 1 / -1;
    }

    .table_td {
        display: block !important;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        margin: 0 !important;
        padding: 6px !important;
        box-sizing: border-box;
        font-size: 12px;
    }

    .table_td_img {
        width: 100% !important;
        height: auto !important;
        max-height: 130px;
        object-fit: contain;
    }

    .table_td b,
    .table_td a {
        font-size: 12px;
        word-break: break-word;
    }

    .type_info_detail {
        width: 100% !important;
    }
}

/* --------------------------------------------------
   FICHE — artwork, hero et galeries (620px)
-------------------------------------------------- */
@media (max-width: 620px) {

    /* Artwork en bas : ne pas déborder */
    .fiche_artwork_bottom {
        text-align: center;
        padding: 8px;
        box-sizing: border-box;
    }
    .fiche_artwork_bottom_img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

    /* Hero : empiler photo et infos verticalement, centrer l'image */
    .fiche_hero {
        flex-direction: column !important;
    }
    .fiche_hero_img {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        justify-content: center;
    }
    .fiche_col_info {
        width: 100% !important;
        max-width: 100% !important;
    }
    .fiche_hero_photo {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Galeries : une image par ligne, même largeur que le hero */
    .fiche_galerie_grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .fiche_galerie_item {
        display: block !important;
        width: 100% !important;
    }
    .fiche_galerie_thumb {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block;
        border-radius: 4px;
    }

    /* "[Cliquez pour agrandir]" inutile sur mobile */
    .fiche_clique {
        display: none !important;
    }
}