/* =========================================================
   RESPONSIVE - TABLETTES ET TELEPHONES
   ========================================================= */

/* -------------------------
   TABLETTES
   768px à 1100px
   ------------------------- */

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

    /* HEADER */
    #header {
        position: relative;
        height: auto;
        width: 100%;
    }

    .header_images {
        height: 113px;
        background-size: cover;
        background-position: left;
        background-image: url("../images/header_tel.jpg");
    }

    #menu {
        display: none;
    }

    .image_menu {
        display: none;
    }

    .menu_texte {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .item_menu {
        float: none;
        min-width: 120px;
        flex: 1 1 auto;
        box-sizing: border-box;
        padding: 12px 8px;
    }

    .menu_connexion {
        display: none;
    }

    /* CITATION */
    #citation {
        height: auto;
        min-height: 38px;
    }

    .image_citation {
        flex: 0 0 200px;
        background-size: cover;
        background-position: center;
        background-image: url("../images/citation.jpg");
    }

    .citation {
        padding: 10px;
        box-sizing: border-box;
    }

    /* PAGE */
    #page {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin-top: auto;
    }

    #index_gauche {
        float: none !important;
        position: static !important;

        width: 100% !important;
        height: auto;

        padding: 15px;

        box-sizing: border-box;

        order: 1;
    }

    #index_droit {
        display: flow-root;
        float: none !important;
        position: static !important;

        width: 100% !important;
        height: auto !important;

        max-height: none !important;

        margin: 0;
        padding: 20px;

        box-sizing: border-box;

        overflow: visible;

        order: 2;
    }
    
    #index_droit .petit_titre,
    #index_droit .editorial,
    #index_droit .paysan_vosgien {
        float: none;
        width: 100%;
        height: auto;

        box-sizing: border-box;
    }

    #index_droit .petit_titre {
        margin: 5px 0;
    }

    #index_droit .editorial {
        margin: 0;
        overflow: visible;
    }

    #index_droit .paysan_vosgien {
        margin: 0;
        overflow: visible;
    }
    /* BLOCS ACTUALITES */
    .bloc_actualite {
        width: calc(50% - 40px);
        height: auto;
        min-height: 400px;
        box-sizing: border-box;
    }

    .bloc_actualite img {
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: cover;
    }

    /* TEXTES */
    .texte_fond_blanc,
    .texte_fond_gris {
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 15px;
        box-sizing: border-box;
    }

    /* CONTENU */
    .contenu_pleine_page {
        padding: 20px;
    }

    /* BLOCS 50/50 -> 100% */
    .bloc_50_pourcent {
        float: none;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    /* PARTENAIRES */
    .bloc_partenaire {
        width: calc(50% - 40px);
        max-width: 250px;
    }

    /* RECHERCHE */
    #bloc_gauche_pour_recherche {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

    #bloc_droit_recherche {
       display: flow-root;
        float: none !important;
        position: static !important;

        width: 100% !important;
        height: auto !important;

        max-height: none !important;

        margin: 0;
        padding: 20px;

        box-sizing: border-box;

        overflow: visible;

        order: 2;
    }

    /* FORMULAIRES */
    .formulaire_contact {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .formulaire_contact input,
    .formulaire_contact select,
    .formulaire_contact textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .formulaire_connexion input[type="text"],
    .formulaire_connexion input[type="number"],
    .formulaire_connexion input[type="button"],
    .formulaire_connexion input[type="tel"],
    .formulaire_connexion input[type="email"] {
        width: 80%;
        max-width: 400px;
        box-sizing: border-box;
    }

    .case_a_cocher_nous_rejoindre {
        width: 80%;
        max-width: 400px;
        box-sizing: border-box;
    }

    /* LIENS ANCRES */
    .lien_ancre_page {
        width: calc(50% - 30px);
        box-sizing: border-box;
    }

    /* FOOTER */
    #footer {
        height: auto;
        min-height: 127px;
        display: flex;
        flex-wrap: wrap;
    }

    .footer_adresse,
    .footer_zone1,
    .footer_zone2 {
        width: 33%;
        min-width: 0;
        box-sizing: border-box;
    }

    #icone_menu { display: block; position: fixed; top: 10px; right: 10px; width: 220px; z-index: 1000; color: white; } /* On cache la checkbox */ 
    #menu_mobile_toggle { position: absolute; opacity: 0; pointer-events: none; } /* Bouton MENU */ 
    .bouton_menu_mobile { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 45px; background-color: #467755; color: white; cursor: pointer; box-sizing: border-box; transition: background-color 0.3s ease; } 
    .bouton_menu_mobile:hover { background-color: #365d42; } .icone_hamburger { font-size: 24px; line-height: 1; } /* Contenu fermé */ 
    .menu_mobile_contenu { display: none; width: 100%; background-color: #467755; box-shadow: 0 4px 10px rgba(0,0,0,0.25); box-sizing: border-box; } /* Contenu ouvert */ 
    #menu_mobile_toggle:checked ~ .menu_mobile_contenu { display: block; } /* Liens */ .menu_mobile_contenu a { display: block; width: 100%; color: white; text-decoration: none; } 
    .sous_menu { width: 100%; height: auto; min-height: 45px; display: flex; align-items: center; justify-content: center; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.25); box-sizing: border-box; color: white; text-align: center; } 
    .hover_sous_menu { transition: background-color 0.3s ease; } 
    .hover_sous_menu:hover { cursor: pointer; }
}


/* =========================================================
   TELEPHONES
   max-width: 767px
   ========================================================= */

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

    /* RESET GENERAL */
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
    }

    /* TITRES */
    .gros_titre {
        float: none;
        width: auto;
        height: auto;
        margin: 5px 10px 15px 10px;
        padding: 5px 0;
        font-size: 20px;
        line-height: 1.3;
    }

    .petit_titre {
        float: none;
        width: auto;
        height: auto;
        margin: 5px 10px 15px 10px;
        padding: 5px 0;
        font-size: 17px;
        line-height: 1.3;
    }

    .sous_titre {
        float: none;
        width: auto;
        margin: 0px;
    }

    /* HEADER */
    #header {
        position: relative;
        width: 100%;
        height: auto;
    }

    .header_images {
        width: 100%;
        height: 80px;
        background-size: cover;
        background-position: left;
    }

    /* MENU DESKTOP */
    #menu {
        display: none;
    }

    /* MENU MOBILE */
    #icone_menu {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        float: right;
        width: 100%;
        height: 40px;
        margin: 0;
        z-index: 100;
        box-sizing: border-box;
        text-align: center;
    }

    #icone_menu:hover {
        height: auto;
    }

    .sous_menu {
        height: 30px;
        padding-top: 10px;
        box-sizing: border-box;
    }

    /* CITATION */
    #citation {
        display: block;
        width: 100%;
        height: auto;
        min-height: 38px;
        margin: 0;
        overflow: hidden;
    }

    .image_citation {
        display: none;
    }

    .citation {
        width: 100%;
        height: auto;
        min-height: 38px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 13px;
    }

    /* PAGE */
    #page {
        width: 100%;
        margin-top: 0;
        padding: 0;
    }

    /* COLONNE PRINCIPALE */
    #index_gauche {
        float: none;
        width: 100%;
        height: auto;
        padding: 10px;
        box-sizing: border-box;
    }

    /* COLONNE DROITE */
    #index_droit {
        float: none;
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 15px;
        box-sizing: border-box;
        overflow: visible;
    }

    /* ACTUALITES */
    .bloc_actualite {
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 10px 0;
        box-sizing: border-box;
    }

    .bloc_actualite img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .contenu_actualite {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
    }

    .nom_auteur {
        float: none;
        width: 100%;
        margin-top: 15px;
        text-align: right;
    }

    /* MINIATURES */
    .miniature {
        float: none;
        display: block;
        max-width: 100%;
        height: auto;
        margin: 10px auto;
    }

    /* ACTU PRECEDENTE / SUIVANTE */
    .actu_precedente,
    .actu_suivante {
        float: none;
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
    }

    /* TEXTES */
    .texte_fond_blanc,
    .texte_fond_gris {
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 15px;
        box-sizing: border-box;
    }

    /* IMAGES RESPONSIVES */
    .image_responsive {
        max-width: 100%;
        height: auto;
    }

    .grande_miniature {
        max-width: 100%;
        height: auto;
    }

    /* ESPACE PRATIQUE */
    #groupe_espace_pratique {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .espace_pratique_texte {
        float: none;
        width: 100%;
        margin: 10px 0 20px 0;
        box-sizing: border-box;
    }

    .espace_pratique_texte p {
        font-size: 16px;
    }

    /* CONTENU PLEINE PAGE */
    .contenu_pleine_page {
        float: none;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    

    .lien_grande_page {
        float: none;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    /* RECHERCHE */
    #bloc_gauche_pour_recherche {
        float: none;
        width: 100%;
        height: auto;
        padding: 10px;
        box-sizing: border-box;
    }

    #bloc_droit_recherche {
        float: none;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 15px;
        box-sizing: border-box;
    }

    /* PARTENAIRES */
    .bloc_partenaire {
        float: none;
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 300px;
        margin: 15px auto;
        box-sizing: border-box;
    }

    .bloc_partenaire img {
        width: 100%;
        max-height: none;
        height: auto;
    }

    .bloc_partenaire_texte {
        float: none;
        width: 100%;
    }

    /* LIENS ANCRES */
    .lien_ancre_page {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        min-height: 35px;
        margin: 10px 0;
        padding: 15px 5px;
        box-sizing: border-box;
    }

    /* FORMULAIRE CONTACT */
    .formulaire_contact {
        float: none;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .formulaire_contact input,
    .formulaire_contact select,
    .formulaire_contact textarea {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* FORMULAIRE CONNEXION */
    .formulaire_connexion {
        float: none;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .formulaire_connexion input[type="text"],
    .formulaire_connexion input[type="number"],
    .formulaire_connexion input[type="button"],
    .formulaire_connexion input[type="tel"],
    .formulaire_connexion input[type="email"] {
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
    }

    .case_a_cocher_nous_rejoindre {
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
    }

    /* CHECKBOX */
    #inputPreview {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    /* FOOTER */
   #footer {
        width: 100%;

        min-height: 0;
        height: auto;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        clear: both;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Réseaux sociaux
       ----------------------------------------------------- */

    .reseaux_sociaux {
        width: 70px;
        min-width: 0;
        height: 70px;
        min-height: 70px;

        display: flex;

        align-items: center;
        justify-content: center;

        box-sizing: border-box;
    }

    .reseaux_sociaux img {
        position: static;

        display: inline-block;

        margin: 8px;
    }


    /* -----------------------------------------------------
       Adresse
       ----------------------------------------------------- */

    .footer_adresse {
        width: 100%;
        min-width: 0;

        min-height: 0;
        height: auto;

        flex: none;

        padding: 15px 10px;

        box-sizing: border-box;

        display: block;

        text-align: center;
    }


    /* -----------------------------------------------------
       Zone 1
       ----------------------------------------------------- */

    .footer_zone1 {
        width: 100%;
        min-width: 0;

        min-height: 0;
        height: auto;

        flex: none;

        padding: 15px 10px;

        box-sizing: border-box;

        display: block;

        text-align: center;
    }


    /* -----------------------------------------------------
       Zone 2
       ----------------------------------------------------- */

    .footer_zone2 {
        width: 100%;
        min-width: 0;

        min-height: 0;
        height: auto;

        flex: none;

        padding: 15px 10px;

        box-sizing: border-box;

        display: block;

        text-align: center;
    }

    /* IMAGE EN POPUP */
    .div_cache_contenu {
        width: 100%;
        height: 90%;
        margin: 5px 0;
        padding: 5px;
        box-sizing: border-box;
    }

    #grande_image {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }

    .div_image_cache {
        width: 100%;
        height: auto;
    }

    /* TEXTES DIVERS */
    .nombre_vert {
        font-size: 21px;
    }

    p.titre {
        font-size: 15px;
    }

    p.rubrique {
        font-size: 14px;
    }

    li {
        height: auto;
        min-height: 25px;
    }

    /* ELEMENTS QUI DEPASSENT */
    img,
    iframe,
    video {
        max-width: 100%;
        height: auto;
    }

    #icone_menu { top: 0px; right: 0px; width:100%;} 
    .bouton_menu_mobile { height: 40px; } 
    .sous_menu { min-height: 44px; font-size: 15px; } }
   


/* =========================================================
   PETITS TELEPHONES
   max-width: 480px
   ========================================================= */

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

    body,
    html {
        font-size: 14px;
    }

    .header_images {
        height: 65px;
    }

    #icone_menu {
        font-size: 14px;
    }

    .citation {
        font-size: 12px;
        padding: 8px;
    }

    .gros_titre {
        font-size: 18px;
    }

    .petit_titre {
        font-size: 16px;
    }

    .index_gauche,
    #index_gauche {
        padding: 5px;
    }

    .bloc_actualite {
        margin: 8px 0;
    }

    .contenu_actualite {
        padding: 10px;
    }

    .bloc_50_pourcent {
        padding: 10px;
    }

    .contenu_pleine_page {
        padding: 10px;
    }

    #index_droit {
        padding: 10px;
    }

    .footer_adresse,
    .footer_zone1,
    .footer_zone2 {
        padding: 12px 8px;
    }

    .formulaire_contact,
    .formulaire_connexion {
        padding: 5px;
    }
 }