/*
 * ADAPTATIONS TABLETTE ET MOBILE
 *
 * Toutes les règles sont dans des media queries : au-dessus de 860px
 * (largeur du bloc de page d'origine, 800px + marges) l'affichage est inchangé.
 *   - <= 860px : tablette, le bloc de page devient fluide
 *   - <= 680px : menu principal replié derrière un bouton
 *   - <= 600px : mobile, colonnes empilées
 */

/* Bouton du menu mobile : masqué par défaut (bureau et tablette) */
.menu-toggle
{
    display: none;
}

/* ===================== TABLETTE (<= 860px) ===================== */
@media (max-width: 860px)
{
    #bloc_page
    {
        width: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* article : width 100% + margin-right 15px -> dépasse de son conteneur (défilement horizontal) */
    article
    {
        margin-right: 0;
    }

    /* Les images ne dépassent jamais de leur conteneur */
    #bloc_page img
    {
        max-width: 100%;
        height: auto;
    }

    /* Liste des sorties : l'image prend 55% de la largeur au lieu de 400px fixes */
    .banniere_image_preview, .banniere_fiche_date
    {
        width: 55%;
    }
    .banniere_sortie_description
    {
        width: 40%;
    }

    /* Titres de rubrique de l'accueil décalés de -20px : ils sortiraient du bloc */
    .accueil_rubrique
    {
        margin-left: 0;
    }

    /* Diaporama de l'accueil : hauteur fixe de 300px (thème Nivo) -> hauteur de l'image */
    .theme-default .nivoSlider
    {
        height: auto;
    }

    /* Menu : espacement resserré pour tenir sur une ligne */
    nav a
    {
        letter-spacing: 0.06em;
    }
    nav li
    {
        margin-right: 8px;
    }

    /* Menu collé en haut au défilement : pleine largeur */
    nav.floatable
    {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============ ACCUEIL, TABLETTE (768px à 860px) ============
 * Colonne programme (525px) + encart contact (~245px) : la colonne prend la place restante. */
@media (min-width: 768px) and (max-width: 860px)
{
    #prog_accueil
    {
        width: calc(100% - 260px);
    }
}

/* ============ ACCUEIL, MOBILE (<= 767px) ============
 * L'encart « Contactez moi » (positionné en absolu à droite, collant au défilement)
 * rejoint le flux : sous le diaporama et la devise, avant les programmes. */
@media (max-width: 767px)
{
    #accueil
    {
        display: flex;
        flex-direction: column;
    }
    /* En flex, la marge basse du diaporama reste dans son conteneur et décale les puces
       de navigation (positionnées par rapport au conteneur) : on la reporte sur le conteneur */
    #accueil .slider-wrapper
    {
        order: 1;
        margin-bottom: 50px;
    }
    #accueil .nivoSlider
    {
        margin-bottom: 0;
    }
    #devise_accueil { order: 2; }
    #accueil aside.mobile
    {
        order: 3;
        position: static;
        display: block;
        width: auto;
        max-width: 320px;
        margin: 0 auto 10px;
        text-align: center;
    }
    #prog_accueil
    {
        order: 4;
        width: auto;
        max-width: none;
    }
    #fleche_bulle
    {
        display: none;
    }
}

/* ============ FICHES PROGRAMME (<= 860px, toute la plage tablette) ============
 * Sur bureau, les éléments de la fiche sont positionnés en absolu dans un bloc de 115px :
 * dès que le bloc de page rétrécit, ils se chevauchent (déjà à 768px). On passe à une grille :
 * image à gauche ; description, massif et infos empilés à droite.
 * Les sélecteurs #prog_banniere ont la même spécificité que #prog_accueil / #prog_activite
 * (accueil, activités) et l'emportent car cette feuille est chargée après. */
@media (max-width: 860px)
{
    #prog_banniere .banniere_fiche_titre
    {
        margin-left: 0;
        height: auto;
        font-size: 1.2em;
    }
    #prog_banniere .banniere_fiche
    {
        display: grid;
        grid-template-columns: 96px 1fr;
        column-gap: 12px;
        row-gap: 4px;
        height: auto;
        padding: 8px 34px 12px 8px;
        box-sizing: border-box;
    }
    #prog_banniere .banniere_fiche_image
    {
        grid-column: 1;
        grid-row: 1 / span 3;
        position: relative;
        left: auto;
        top: auto;
        width: 96px;
        height: 96px;
    }
    #prog_banniere .banniere_fiche_description,
    #prog_banniere .banniere_fiche_massif,
    #prog_banniere .banniere_fiche_info
    {
        grid-column: 2;
        position: static;
        width: auto;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 0;
        line-height: 1.35;
        font-size: 0.9em;
        text-align: left;
    }
    #prog_banniere .banniere_fiche_massif
    {
        font-size: 1em;
    }
}

/* ============ MENU REPLIÉ (<= 680px, en deçà il ne tient plus sur une ligne) ============ */
@media (max-width: 680px)
{
    /* Menu principal replié derrière un bouton */
    .menu-toggle
    {
        display: block;
        margin: 4px auto 6px;
        padding: 4px 14px;
        border: 1px solid #181818;
        border-radius: 3px;
        background: white;
        color: #181818;
        font-family: Dayrom, serif;
        font-size: 1.1em;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        cursor: pointer;
    }
    nav ul
    {
        display: none;
        margin-bottom: 6px;
    }
    nav.menu-ouvert ul
    {
        display: block;
    }
    nav li
    {
        display: block;
        margin-right: 0;
        padding: 6px 0;
    }
    nav.floatable
    {
        height: auto;
    }
}

/* ============ PAGES ACTIVITÉS (<= 680px) ============
 * Texte (60%) et image portrait 200x500 côte à côte ne tiennent plus :
 * l'image devient un bandeau pleine largeur sous le sous-menu, puis le texte. */
@media (max-width: 680px)
{
    #activites
    {
        display: flex;
        flex-direction: column;
        padding-right: 0;
    }
    article.activites
    {
        order: 2;
        width: 100%;
        margin-right: 0;
    }
    aside.image_activite
    {
        order: 1;
        width: 100%;
        height: 160px;
        margin: 10px 0 0;
    }
    #bloc_page img.imag_activite
    {
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
    }
}

/* ============ ICÔNES D'ACTIVITÉS DE LA PAGE PROGRAMME (<= 680px) ============
 * Deux listes séparées (icônes, puis libellés dans un bandeau) alignées par leurs largeurs :
 * en passant à la ligne elles se décalaient. Même grille de 8 colonnes pour les deux. */
@media (max-width: 680px)
{
    .nav_activite
    {
        margin-top: 0;
    }
    .nav_activite ul
    {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        column-gap: 4px;
        margin: 0;
    }
    .nav_activite li
    {
        margin-right: 0;
    }
    .nav_activite .text_icon
    {
        width: auto;
        margin-top: 2px;
        font-size: 0.62em;
        line-height: 1.15;
    }
    .nav_activite .cacheTag
    {
        height: auto;
        min-height: 40px;
        margin-top: 0;
    }
    /* Pas de survol sur écran tactile : icônes affichées entières au lieu d'être à demi cachées */
    .nav_activite .iconactivite
    {
        transform: none;
    }
}

/* ============ FICHE PROGRAMME DÉTAILLÉE (<= 680px) ============
 * Texte « Programme » flottant à 55% + points forts et encadré d'infos (280px) à droite :
 * tout passe sur une colonne. */
@media (max-width: 680px)
{
    .description_programme
    {
        clear: both;
        float: none;
        display: block;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }
    .points_forts
    {
        display: block;
        max-width: none;
        padding-left: 0;
    }
    aside.info_programme
    {
        display: block;
        max-width: 320px;
        margin: 0 auto 15px;
    }
}

/* ============ NEWSLETTERS (<= 820px) ============
 * Page autonome (templates/Prog/newsletter.html.twig) dont chaque numéro a sa propre
 * feuille (images/newsletters/<dossier>/newsletter.css) conçue pour 800px. */
@media (max-width: 820px)
{
    .page-newsletter #bloc_page
    {
        width: auto;
        padding: 0;
        margin-bottom: 0;
    }
    .page-newsletter #banniere_image_details
    {
        display: block;
        width: 100%;
        height: 37.5vw; /* proportions d'origine : 800x300 */
    }
    .page-newsletter section
    {
        display: block;
        background-size: cover;
    }
    .page-newsletter .zone_prog_newsletter
    {
        display: block;
        text-align: center;
    }
    .page-newsletter #titre_principal
    {
        top: auto;
        bottom: 10px;
        left: 12px;
    }
    .page-newsletter #logo_uiagm
    {
        top: 10px;
        right: 12px;
    }
}

/* ===================== MOBILE (<= 600px) ===================== */
@media (max-width: 600px)
{
    #bloc_page
    {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }

    /* En-tête : logo et titre plus compacts */
    #logo_uiagm
    {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 6px;
    }
    #logo
    {
        width: 70px;
    }
    #titre_principal h1
    {
        font-size: 1.7em;
        margin-top: 0.3em;
    }
    #titre_principal h2
    {
        font-size: 1em;
    }

    /* Grande image des fiches programme : 300px de haut, trop pour un écran de téléphone */
    .banniere_image_details
    {
        height: 200px;
    }

    /* Liste des sorties : titre et résumé au-dessus, puis onglet date et image pleine largeur */
    .banniere_sortie
    {
        display: flex;
        flex-direction: column;
        height: auto;
        margin-bottom: 22px;
    }
    .banniere_sortie_description
    {
        order: 1;
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 6px;
    }
    .banniere_sortie_description h1
    {
        margin: 0 0 4px;
    }
    .banniere_sortie_description h3
    {
        margin: 0;
    }
    .banniere_fiche_date
    {
        order: 2;
        position: relative;
        right: auto;
        width: 100%;
    }
    .banniere_image_preview
    {
        order: 3;
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 8 / 3;
    }

    /* Pied de page : les deux colonnes s'empilent */
    #mes_photos, #infos
    {
        width: 100%;
    }
    #mes_photos img
    {
        width: 22%;
    }
}