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

/* -------------------------
   TABLETTES
   1101px à 1370px
   ------------------------- */

@media screen and (max-width: 1430px) {
    .menu-item, .menu_connexion {
       width: 135px;
       font-size: 15px;
    }
}
/* -------------------------
   TABLETTES
   768px à 1100px
   ------------------------- */

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

    /* HEADER */
    #header {
        position: fixed;
        top: 0px;
        height: auto;
        width: 100%;
    }

    #logo_fdsea88{top: 15px; left: 15px;}
    #menu_message{height: 45px; background-color: #0170b4; color: #ffffff; padding-top: 12px;}
		
    #header.header-cache {
        transform: none !important;
    }
    #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: 110px;
    }

    #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 */
    

    /* 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 {
        width: 100%;

        /*
         * L'image fait 244px de haut.
         * On donne donc suffisamment de hauteur au footer.
         */
        height: 260px;
        min-height: 260px;
        max-height: none;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: row;
        align-items: stretch;

        position: relative;

        box-sizing: border-box;

        overflow: visible;
    }


    /* =====================================================
       RESEAUX SOCIAUX
       ===================================================== */

    .footer_reseaux {
        flex: 0 0 70px;

        width: 70px;
        height: 260px;

        display: flex;
        flex-direction: column;

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

        gap: 8px;

        padding: 10px 5px;

        box-sizing: border-box;

        position: relative;
        z-index: 801;
    }


    .footer_reseaux .reseaux_sociaux {
        flex: none;

        width: 70px;
        height: auto;

        min-width: 0;

        float: none;

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

        padding: 0;
        margin: 0;

        box-sizing: border-box;
    }


    .footer_reseaux .reseaux_sociaux img {
        display: block;

        width: auto;
        height: auto;

        margin: 5px;
    }


    /* =====================================================
       CONTENU TEXTE
       ===================================================== */

    .footer_contenu {

        /*
         * On ne le limite plus entre les réseaux et l'image.
         */
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 260px;

        padding: 20px 200px 20px 70px;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

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

        z-index: 1;
    }


    /* =====================================================
       ADRESSE
       ===================================================== */

    .footer_contenu .footer_adresse {

        flex: none;

        width: 100%;
        min-width: 0;

        height: auto;
        min-height: 0;

        padding: 0 0 10px 0;

        margin: 0;

        box-sizing: border-box;

        overflow: visible;

        display: block;

        text-align: center;
    }


    /* =====================================================
       ZONE 1
       ===================================================== */

    .footer_contenu .footer_zone1 {

        flex: none;

        width: 100%;
        min-width: 0;

        height: auto;
        min-height: 0;

        padding: 15px 0;

        margin: 0;

        box-sizing: border-box;

        display: block;

        text-align: center;
    }


    /* =====================================================
       ZONE 2
       ===================================================== */

    .footer_contenu .footer_zone2 {

        flex: none;

        width: 100%;
        min-width: 0;

        height: auto;
        min-height: 0;

        padding: 15px 0;

        margin: 0;

        box-sizing: border-box;

        display: block;

        text-align: center;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .footer_image {

        position: absolute;

        width: 190px;
        height: 244px;

        right: 5px;
        bottom: 5px;

        margin: 0;

        display: flex;

        align-items: flex-end;
        justify-content: flex-end;

        box-sizing: border-box;

        z-index: 800;

        transition: none;
    }


    .footer_image img {
        width: auto;
        height: auto;
    }


    /* Pas de déplacement au survol */
    .footer_image:hover {
        bottom: 5px;
    }

    #icone_menu { display: block; position: fixed; top: 0px; right: 0px; width: 180px; 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: #0170b4; color: white; cursor: pointer; box-sizing: border-box; transition: background-color 0.3s ease; } 
    .bouton_menu_mobile:hover { background-color: #0170b4; } .icone_hamburger { font-size: 24px; line-height: 1; } /* Contenu fermé */ 
    .menu_mobile_contenu { display: none; width: 100%; background-color: #0170b4; 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;
        height: 100%;
        min-height: 100vh;
    }

    body {
        font-size: 14px;
    }
    main {
        min-height: 100vh;
    }
    /* TITRES */
    .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: fixed;
        top: 0px;
        width: 100%;
        height: 120px;
        margin: 0 auto;
    }

#header.header-cache {
    transform: none !important;
}
    /* 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: 30;
        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;
    }

    #logo_fdsea88{top: 30px; left: 15px;}
    /* PAGE */
    #page {
        width: 100%;
        margin-top: 160px;
        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 */
    


    .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; left: 0px; width:100%;} 
    .bouton_menu_mobile {left: 0px; 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 {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 120px;
    }

    #icone_menu {
        font-size: 14px;
    }

    #menu_message{font-size: 12px;}

    .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;
    }

    .footer_contenu {

        /*
         * On ne le limite plus entre les réseaux et l'image.
         */
        height: 280px;
    }
 }