/* ==============================================
   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; }
}