/* =======================================================
   Resso CMS — Responsive CSS
   Media queries pour mobiles et tablettes
   ======================================================= */

/* ─── Tablette (< 900px) ─────────────────────────────── */

@media screen and (max-width: 900px) {
    /* 02/09 : la nav du site a son PROPRE système responsive (.site-nav,
       style.css) — on l'exempte des règles génériques d'un ancien design
       (elles décaleaient la barre de navigation). */
    nav:not(.site-nav) {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 14px;
    }
    nav:not(.site-nav) a {
        font-size: 0.9em;
        padding: 6px 10px;
    }
    .hero {
        padding: 60px 16px;
    }
    .hero h1 {
        font-size: 1.8em;
    }
    .hero p {
        font-size: 1em;
    }
    .hero .icon-big {
        font-size: 2.2em;
    }
    .container {
        padding: 16px;
    }
    
    /* Grilles */
    .articles-grid,
    .categories-grid,
    .communes-grid,
    .features-grid,
    .usecases-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 02/09 : retiré — la page recherche a son propre responsive dans
       style.css (grille 1fr 1fr < 900px, 1fr < 600px). Le min-width 100%
       !important de l'ancien design écrasait la grille actuelle. */
    
    /* Sidebar admin */
    .sidebar {
        position: relative;
        width: 100%;
        padding: 12px;
    }
    .sidebar h2 {
        font-size: 1.2em;
        margin-bottom: 14px;
    }
    .main {
        margin-left: 0;
        padding: 16px;
    }
    
    .sidebar a {
        display: inline-block;
        padding: 6px 12px;
        margin-right: 4px;
    }
    
    /* Article */
    .article-content {
        font-size: 1em;
    }
    
    /* Footer */
    footer {
        padding: 20px 14px;
    }
    
    /* Event card */
    .event-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .cat-card-img {
        height: 100px;
    }
}

/* ─── Mobile (< 480px) ───────────────────────────────── */

@media screen and (max-width: 480px) {
    nav:not(.site-nav) {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    nav:not(.site-nav) a {
        width: 100%;
        text-align: center;
    }
    .hero {
        padding: 40px 12px;
    }
    .hero h1 {
        font-size: 1.5em;
    }
    .hero p {
        font-size: 0.9em;
    }
    
    /* Grilles */
    .articles-grid,
    .categories-grid,
    .communes-grid,
    .features-grid,
    .usecases-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .article-card-body h2 {
        font-size: 1em;
    }
    
    .cat-card-img {
        height: 90px;
    }
    
    .cat-icon {
        font-size: 1.8em;
        min-width: 40px;
    }
    
    .pricing-card {
        padding: 20px;
    }
    .pack-price {
        font-size: 2em;
    }
    .pack-name {
        font-size: 1.3em;
    }
    
    /* Recherche */
    .result-card {
        padding: 14px;
    }
    .result-card h3 {
        font-size: 1em;
    }
    .result-card .meta {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .communes-tags {
        justify-content: center;
    }

    /* 02/09 : retiré — le margin négatif de l'ancien formulaire « en
       surplomb » décalait le formulaire de recherche actuel (style.css
       gère sa mise en page sous 600 px via .search-row). */
    
    /* Event */
    .event-date {
        min-width: 60px;
    }
    .event-date .day {
        font-size: 1.2em;
    }
    
    /* Admin */
    .header h1 {
        font-size: 1.3em;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .stat-card {
        padding: 14px;
    }
    .stat-card .number {
        font-size: 1.6em;
    }
    
    /* Communes */
    .communes-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Utilitaire */
    .btn {
        padding: 10px 20px;
        font-size: 0.85em;
    }
}

/* ─── Très petit écran (< 360px) ────────────────────── */

@media screen and (max-width: 360px) {
    .hero h1 {
        font-size: 1.3em;
    }
    .hero p {
        font-size: 0.8em;
    }
    .hero .icon-big {
        font-size: 1.8em;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .communes-grid {
        grid-template-columns: 1fr;
    }
}