/* NAV */
ul.annees{
	font-size: 1.5em;
    margin-top: .3em;	
}
li.annee{
    visibility: hidden;
    opacity: 0;
    list-style: none;
    text-align:left;
}
li.annee a{
    text-decoration: none;
    color: var(--text-color);
    opacity: .6;
    padding-left: .5em;
}
li.annee a:hover{
    color: var(--theme-color);
}
li.annee.on a{
    color: var(--theme-color);
    opacity: 1;
}
li.annee.on a:hover{
    cursor: default;
}

/* GENERAL */
.annonce{
    margin-bottom: 2em;
    margin-top: 2em;
    font-size: 1.2em;
}
.annonce > a{
	text-decoration: none;
	color: var(--theme-color);
}
.annonce > a:hover{
	color: var(--text-color);
}
.paragraphe{
    margin-top: 2em;
    margin-bottom: 2em;
    width: 100%;
    text-align: center;
    color: var(--theme-color);
    font-size: 2.2em;
    user-select: none;
    /* transform: rotateZ(90deg); */
    font-family: serif;
}
.commentaire a{
    text-decoration: none;
    color: var(--theme-color);
}
.commentaire a:hover{
    color: var(--text-color);
}
.affiche-full,
.affiche-full > img,
.affiche-full > a > img{
	max-width: 100%;
    margin-bottom: 1em;
}

.affiche-min,
.affiche-min > img,
.affiche-min > a > img{
	max-width: 80%;
    margin: auto;
    margin-bottom: 1em;
    text-align: center;
}


/* VOEUX 2025 */
@media (orientation: landscape) {
    #voeux_2025{
        position: relative;
        overflow: hidden;
        width: auto;
        height: 95vh;
        margin: auto;
        margin-bottom: 5em;
        text-align:center;
    }
    #voeux_2025 img{
        max-width: 100%;
        height: 100%;
        border-right: solid black 1px;
        border-left: solid black 1px;
    }
    #voeux_2025 .inside,
    #voeux_2025 .outside{
        height: 100%;
        cursor: pointer;
    }
    #voeux_2025 .outside{
        display: flex;
    }
    #voeux_2025 .left{
        height: 100%;
        width: 100%;
        text-align:right;
        position: absolute;
        top: 0;
        left: -50%;
        transition: all .6s ease-out;
    }
    #voeux_2025 .left.moved{
        left: -82%;
    }
    #voeux_2025 .right{
        height: 100%;
        width: 100%;
        text-align:left;
        position: absolute;
        top: 0;
        left: 50%;
        transition: all .6s ease-out;
    }
    #voeux_2025 .right.moved{
        left: 82%;
    }
    .flex-container{
        display: flex;
    }
    video.verticale{
        height: 75vh;
    }
    .commentaire.flex{
        display: flex;
        margin-left: 5vw;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
  }
  
  @media (orientation: portrait) {
    #voeux_2025{
        position: relative;
        overflow: hidden;
        width: auto;
        max-height: 95vh;
        margin: auto;
        margin-bottom: 5em;
        text-align:center;
    }
    #voeux_2025 img{
        max-width: 100%;
        height: 100%;
        border-right: solid black 1px;
        border-left: solid black 1px;
    }
    #voeux_2025 .inside,
    #voeux_2025 .outside{
        height: 100%;
        cursor: pointer;
    }
    #voeux_2025 .outside{
        display: flex;
    }
    #voeux_2025 .left{
        height: 100%;
        width: 100%;
        text-align:right;
        position: absolute;
        top: 0;
        left: -50%;
        transition: all .6s ease-out;
    }
    #voeux_2025 .left.moved{
        left: -100%;
    }
    #voeux_2025 .right{
        height: 100%;
        width: 100%;
        text-align:left;
        position: absolute;
        top: 0;
        left: 50%;
        transition: all .6s ease-out;
    }
    #voeux_2025 .right.moved{
        left: 100%;
    }
    .flex-container{
        display: block;
    }
    video.verticale{
        max-width: 100%;;
    }
    .commentaire.flex{
        display: block;
        margin-top: 1em;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
  }

@media screen and (max-width: 660px) {
    ul.annees{
        position: absolute;
        display: flex;
        font-size: 1.3em;
    }
}

@media screen and (max-width: 560px) {
    ul.annees{
        font-size: 1.2em;
    }
}

@media screen and (max-width: 410px) {
    ul.annees{
        font-size: 1.1em;
    }
}