/*-------------------------------------------------------------------------------------------------*/
/*                                   css pour page accueil balades photographiques                 */
/*-------------------------------------------------------------------------------------------------*/
html, body {
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
	background : linear-gradient(45deg, rgb(46, 48, 52), rgb(130, 130, 130), rgb(187, 185, 180));
	border: 0px solid transparent;
	color: rgb(240,240,240);
	font-family: Constantia;
	font-size: 1em; /* Ideal: 16px */
}
* {
    margin: 0;
    padding: 0;
  }
html { 	
	zoom: 1.0;
}
a:link {
	color: rgb(240,240,240);
	text-align: center;
	text-decoration: none;
}
a:visited {
	color: rgb(240,240,240);
	text-align: center;
}
ul {
	padding-left: 0;
}
img, object, embed, canvas, video, audio, picture {
    max-width: 100%;
    height: auto;
    display: block;
    list-style: none;
}
figure {
	margin: auto;
}
.clear {
	clear: both;
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                   Page                                                                               */
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                            Structure principale                                                                      */
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
#content {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-areas:
        "header"
        "article"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 6vh 90vh 4vh;
    /*background-color: #119955;*/
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Entête                                   */
/*-------------------------------------------------------------------------------------------------*/
    header {
        grid-area: header;
        text-align: center;
        font-family: Constantia;
        font-style: Italic;
        font-size: clamp(0.4rem, 1.8vw, 2.2rem);
        color: rgb(240,240,240);
        overflow: hidden;
        /*background-color: #442255;*/
    }
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Corps                                    */
/*-------------------------------------------------------------------------------------------------*/
    article {
        grid-area: article;
        display: grid;
        grid-template-rows: 6vh 84vh;
        /*background-color: #668855;*/
/*-------------------------------------------------------------------------------------------------*/
/*                                                    Traitement menu                              */
/*-------------------------------------------------------------------------------------------------*/
        .content-index-menu {
            margin-left: 10%;
            margin-right: 10%;
            border: 1px solid rgb(190,190,190);
            font-size: clamp(0.5rem, 1.4vw, 1.8rem);
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 1%;
            /*background-color: #882266;*/
            .content-index-menu-news {
                overflow: visible;
                justify-content: center;
                align-content: center;
                text-align: center;
            }

            .content-index-menu-galerie {
                overflow: visible;
                justify-content: center;
                align-content: center;
                text-align: center;
            }

            .content-index-menu-auteur {
                overflow: visible;
                justify-content: center;
                align-content: center;
                text-align: center;
            }

            .content-index-menu-liens {
                overflow: visible;
                justify-content: center;
                align-content: center;
                text-align: center;
            }

            .content-index-menu-contact {
                overflow: visible;
                justify-content: center;
                align-content: center;
                text-align: center;
                /*background-color: #882266;*/
            }
        }
    }
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement pied                          */
/*-------------------------------------------------------------------------------------------------*/
    footer {
        grid-area: footer;
        text-align: center;
        font-family: Constantia;
        font-style: Italic;
        font-size: clamp(0.3rem, 1vw, 1rem);
        color: rgb(240,240,240);
        /*background-color: #663311;*/
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement page menu                     */
/*-------------------------------------------------------------------------------------------------*/
.content-menu {
    position: absolute;
    top: 11.3vh;
    height: 84vh;
    width: 90%;
    overflow: hidden;
    border: 1px solid rgb(190,190,190);
    display: grid;
    grid-template-columns: 8% 84% 8%;
    justify-content: space-around;
    align-content: space-around;
    display: none;

    .content-menu-left {
        width: 8%;
        height: 84vh;
        writing-mode: vertical-rl;
        text-orientation: upright;
        /*-ms-writing-mode: tb-lr;*/
        font-size: clamp(0.7rem, 1.3vw, 1.5rem);
        color: rgb(240,240,240);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #448822;*/
    }

    .content-menu-body {
        width: 84%;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        /*background-color: #445566;*/
    }

    .content-menu-right {
        width: 8%;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #778899;*/
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement menu nouveautés               */
/*-------------------------------------------------------------------------------------------------*/
.content-index-menu-news:hover {
    color: #000000;
}

.content-index-menu-news:hover .content-menu {
    left: 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    color: rgb(240,240,240);
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
    /*background-color: #663311;*/
}

.content-news-menu-poils {
    width: 100%;
    height: 20vh;
    writing-mode: horizontal-tb;
    overflow: visible;
    color: rgb(240,240,240);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /*background-color: #446688;*/
}

.content-news-menu-plumes {
    width: 100%;
    height: 20vh;
    writing-mode: horizontal-tb;
    overflow: visible;
    color: rgb(240,240,240);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /*background-color: #776655;*/
}

.content-news-menu-macros {
    width: 100%;
    height: 20vh;
    writing-mode: horizontal-tb;
    overflow: visible;
    color: rgb(240,240,240);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /*background-color: #771199;*/
}

.content-news-menu-paysage {
    width: 100%;
    height: 20vh;
    writing-mode: horizontal-tb;
    overflow: visible;
    color: rgb(240,240,240);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /*background-color: #116633;*/
}
.content-news-menu-poils:hover {
    color: #000000;
}

.content-news-menu-plumes:hover {
   color: #000000;
}

.content-news-menu-macros:hover {
    color: #000000;
}

.content-news-menu-paysage:hover {
    color: #000000;
}
.content-news {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: space-around;
    position: absolute;
    display: none;
    height: 84vh;
    width: 84%;
    top: 0;
    left: 8%;
    overflow: hidden;
    background: linear-gradient(45deg, rgb(66, 68, 72), rgb(130, 130, 130), rgb(171, 169, 164));
    /*background-color: #552288;*/
    .vign-news {
        width: 30%;
        margin: auto;
        overflow: hidden;
    }
}

.content-news-menu-poils:hover .content-news {
    display: flex;
    color: rgb(240,240,240);
    overflow: hidden;
}

.content-news-menu-plumes:hover .content-news {
    display: flex;
    color: rgb(240,240,240);
    overflow: hidden;
}

.content-news-menu-macros:hover .content-news {
    display: flex;
    color: rgb(240,240,240);
    overflow: hidden;
}

.content-news-menu-paysage:hover .content-news {
    display: flex;
    color: rgb(240,240,240);
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement galerie                       */
/*-------------------------------------------------------------------------------------------------*/
.content-index-menu-galerie:hover {
    color: #000000;
}

.content-galerie {
    position: absolute;
    top: 10.8vh;
    height: 84vh;
    width: 90%;
    overflow: hidden;
    border: 1px solid rgb(190,190,190);
    display: grid;
    grid-template-rows: 6vh 78vh;
    justify-content: center;
    align-content: center;
    display: none;
    /*background-color: #331199;*/
}

.content-index-menu-galerie:hover .content-galerie {
    left: 5%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
    /*background-color: #446688;*/
/*-----------------------------------------menu galerie (Paysages Poils Plumes Macros)-------------*/
    .content-galerie-menu {
        height: 6vh;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        overflow: visible;
        color: rgb(240,240,240);
        border: 1px solid rgb(190,190,190);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        /*background-color: #882266;*/

       .content-galerie-menu-poils {
           height: 6vh;
           overflow: visible;
           color: rgb(240,240,240);
           justify-content: center;
           align-content: center;
           text-align: center;
           /*background-color: #112233;*/
       }

       .content-galerie-menu-plumes {
           height: 6vh;
           overflow: visible;
           color: rgb(240,240,240);
           justify-content: center;
           align-content: center;
           text-align: center;
           /*background-color: #445566;*/
       }

       .content-galerie-menu-macros {
           height: 6vh;
           overflow: visible;
           color: rgb(240,240,240);
           justify-content: center;
           align-content: center;
           text-align: center;
           /*background-color: #778899;*/
       }

       .content-galerie-menu-paysage {
           height: 6vh;
           overflow: visible;
           color: rgb(240,240,240);
           justify-content: center;
           align-content: center;
           text-align: center;
           /*background-color: #115599;*/
       }

       .content-galerie-menu-poils:hover {
           color: #000000;
       }

       .content-galerie-menu-plumes:hover {
           color: #000000;
       }

       .content-galerie-menu-macros:hover {
           color: #000000;
       }

       .content-galerie-menu-paysage:hover {
           color: #000000;
       }
    }

    .content-galerie-body {
        height: 78vh;
        width: 100%;
        overflow: visible;
        display: grid;
        grid-template-columns: 15% 70% 15%;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #337799;*/

        .content-galerie-body-left {
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            height: 78vh;
            overflow: visible;
            /*background-color: #338811;*/
        }

        .content-galerie-body-gal {
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            height: 78vh;
            overflow: visible;
            /*background-color: #888811;*/
        }

        .content-galerie-body-right {
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            height: 78vh;
            overflow: visible;
            /*background-color: #117744;*/
        }
    }
}

.content-galerie-rubrique {
    position: absolute;
    top: 6vh;
    height: 78vh;
    width: 100%;
    overflow: hidden;
    border-right: 1px solid rgb(190,190,190);
    border-left: 1px solid rgb(190,190,190);
    border-bottom: 1px solid rgb(190,190,190);
    display: none;
    /*background-color: #331199;*/
}

.content-galerie-menu-poils:hover .content-galerie-rubrique {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    left: 0;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
    /*background-color: #998877;*/
}

.content-galerie-menu-plumes:hover .content-galerie-rubrique {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    left: 0;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
    /*background-color: #998877;*/
}

.content-galerie-menu-macros:hover .content-galerie-rubrique {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    left: 0;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
    /*background-color: #998877;*/
}

.content-galerie-menu-paysage:hover .content-galerie-rubrique {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    left: 0;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
    /*background-color: #998877;*/
}

.content-galerie-rub-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    height: 78vh;
    overflow: visible;
    /*background-color: #447722;*/
}

.content-galerie-rub-body {
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    height: 78vh;
    overflow: visible;
    border-top: 1px solid rgb(190,190,190);
    /*background-color: #888811;*/
}

.content-galerie-rub-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    height: 78vh;
    overflow: visible;
    /*background-color: #117744;*/
}


.content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: absolute;
    display: none;
    top: 0;
    left: 15%;
    width: 70%;
    height: 78vh;
    overflow: hidden;
    border-top: 1px solid rgb(190,190,190);
    color: rgb(240,240,240);
    background: linear-gradient(45deg, rgb(75, 78, 79), rgb(131, 131, 131), rgb(165, 164, 160));

    .content-vign-galerie {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /*background-color: #887755;*/
        .diaporama {
            display: flex;
            /*background-color: #226688;*/
            .diaporama a {
                overflow: hidden;
            }

            .diaporama a img {
                max-height: 72vh;
                aspect-ratio: 3 / 2;
                overflow: hidden;
            }
        }
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Galerie poils Chevreuil                  */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-chevreuil {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-chevreuil:hover a {
    color: #000000;
}

.content-galerie-left-chevreuil:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Galerie poils Cerfs                      */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-cerf {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-cerf:hover a {
    color: #000000;
}

.content-galerie-left-cerf:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Galerie poils Renards                    */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-renard {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-renard:hover a {
    color: #000000;
}

.content-galerie-left-renard:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                              Galerie chat sauvage                               */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-chat {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-chat:hover a {
    color: #000000;
}

.content-galerie-left-chat:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                               Galerie poils Dvers                               */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-divers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-divers:hover a {
    color: #000000;
}

.content-galerie-left-divers:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                  Galerie plumes En vol                          */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-envol {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-envol:hover a {
    color: #000000;
}

.content-galerie-left-envol:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                   Galerie plumes Etang                          */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-etang {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-etang:hover a {
    color: #000000;
}

.content-galerie-left-etang:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                   Galerie plumes Oiseaux                        */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-left-oiseaux {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-left-oiseaux:hover a {
    color: #000000;
}

.content-galerie-left-oiseaux:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Galerie Macros                           */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-right-macros {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-right-macros:hover a {
    color: #000000;
}

.content-galerie-right-macros:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Galerie Printemps                        */
/*-------------------------------------------------------------------------------------------------*/
.content-galerie-right-printemps {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-right-printemps:hover a {
    color: #000000;
}

.content-galerie-right-printemps:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content-galerie-right-ete {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-right-ete:hover a {
    color: #000000;
}

.content-galerie-right-ete:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content-galerie-right-automne {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-right-automne:hover a {
    color: #000000;
}

.content-galerie-right-automne:hover .content-galerie-rub-image {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content-galerie-right-hiver {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 100%;
    overflow: visible;
}

.content-galerie-right-hiver:hover a {
    color: #000000;
}

.content-galerie-right-hiver:hover .content-galerie-rub-image {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Auteur                                   */
/*-------------------------------------------------------------------------------------------------*/
.content-menu-auteur {
    position: absolute;
    top: 11.9vh;
    height: 84vh;
    width: 90%;
    overflow: hidden;
    border: 1px solid rgb(190,190,190);
    display: grid;
    grid-template-columns: 8% 84% 8%;
    justify-content: space-around;
    align-content: space-around;
    display: none;

    .content-menu-auteur-left {
        width: 8%;
        height: 84vh;
        writing-mode: vertical-rl;
        text-orientation: upright;
        /*-ms-writing-mode: tb-lr;*/
        font-size: clamp(0.7rem, 1.3vw, 1.5rem);
        color: rgb(240,240,240);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #448822;*/
    }

    .content-menu-auteur-body {
        width: 84%;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        /*background-color: #445566;*/
    }

    .content-menu-auteur-right {
        width: 8%;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #778899;*/
    }
}

.content-index-menu-auteur:hover {
    color: #000000;
}

.content-index-menu-auteur:hover .content-menu-auteur {
    left: 5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content-texte-auteur {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: auto;
    color: rgb(240,240,240);
    font-size: clamp(0.8rem, 1.3vw, 1.5rem);
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Liens                                    */
/*-------------------------------------------------------------------------------------------------*/
.content-menu-liens {
    position: absolute;
    top: 11.3vh;
    height: 84vh;
    width: 90%;
    overflow: hidden;
    border: 1px solid rgb(190,190,190);
    display: grid;
    grid-template-columns: 8% 84% 8%;
    justify-content: space-around;
    align-content: space-around;
    display: none;

    .content-menu-liens-left {
        width: 8%;
        height: 84vh;
        writing-mode: vertical-rl;
        text-orientation: upright;
        /*-ms-writing-mode: tb-lr;*/
        font-size: clamp(0.7rem, 1.3vw, 1.5rem);
        color: rgb(240,240,240);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #448822;*/
    }

    .content-menu-liens-body {
        width: 84%;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
    }

    .content-menu-liens-right {
        width: 8%;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: space-around;
        /*background-color: #778899;*/
    }
}

.content-index-menu-liens:hover {
    color: #000000;
}

.content-index-menu-liens:hover .content-menu-liens {
    left: 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    color: rgb(240,240,240);
    background: linear-gradient(45deg, rgb(60, 62, 66), rgb(130, 130, 130), rgb(177, 175, 170));
}

.content-liens {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: space-around;
    position: absolute;
    height: 84vh;
    width: 84%;
    overflow: hidden;
    /*background-color: #552288;*/
    .vign-liens {
        width: 30%;
        margin: auto;
        overflow: hidden;
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Contact                                  */
/*-------------------------------------------------------------------------------------------------*/
.content-index-menu-contact:hover a {
    color: #000000;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement Diaporamas                    */
/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement diaporama article             */
/*-------------------------------------------------------------------------------------------------*/
.content-index-article {
    display: grid;
    grid-template-columns: 8% 84% 8%;
    overflow: hidden;
    /*background-color: #112233;*/
    .content_filler {
    }

    .content-index-diaporama {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /*background-color: #887755;*/
        .diaporama {
            display: flex;
            /*background-color: #226688;*/
            .diaporama ul {
                overflow: hidden;
            }
            .diaporama ul li img {
                    aspect-ratio: 3 / 2;
                    max-height: 82vh;
                    overflow: hidden;
            }
        }
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement diaporama news                */
/*-------------------------------------------------------------------------------------------------*/
.content-diaporama-news {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*background-color: #887755;*/
    .diaporama {
        display: flex;
        /*background-color: #226688;*/
        .diaporama ul {
            overflow: hidden;
        }
        .diaporama ul li img {
            aspect-ratio: 3 / 2;
            max-height: 82vh;
            overflow: hidden;
        }
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement diaporama galerie             */
/*-------------------------------------------------------------------------------------------------*/
.content-diaporama-galerie {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*background-color: #887755;*/
    .diaporama {
        display: flex;
        /*background-color: #226688;*/
        .diaporama ul {
            overflow: hidden;
        }
        .diaporama ul li img {
            max-height: 75vh;
            aspect-ratio: 3 / 2;
            overflow: hidden;
        }
    }
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                        Traitement des textes                    */
/*-------------------------------------------------------------------------------------------------*/
.texte_vignette {
    float: left;
    font-size: clamp(0.5rem, 1vw, 1.5rem);
}

.texte_petit {
    float: right;
    margin: 1% 0 0 0;
    color: rgb(240,240,240);
    font-size: clamp(0.6rem, 1.0vw, 1.5rem);
}

.texte_maj {
    text-align: center;
    font-size: clamp(0.5rem, 0.85vw, 1.5rem);
}