/* @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Noto+Sans+Armenian:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Armenian:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap'); */


.mb0{ margin-bottom: 0; }
.mb1{ margin-bottom: 1rem; }
.mb2{ margin-bottom: 3rem; }
.mb3{ margin-bottom: 9rem; }
.mb4{ margin-bottom: 18rem; }
.mb5{ margin-bottom: 54rem; }
/* .mb6{ margin-bottom: 162rem; } */
/* .mb7{ margin-bottom: 486rem; } */

/* .pt0{ padding-top: 0; } */
/* .pt1{ padding-top: 1rem; } */
/* .pt2{ padding-top: 3rem; } */
.pt3{ padding-top: 9rem; }
/* .pt4{ padding-top: 18rem; } */
/* .pt5{ padding-top: 54rem; } */
/* .pt6{ padding-top: 162rem; } */
/* .pt7{ padding-top: 486rem; } */

.py3{ padding-top: 9rem;padding-bottom: 9rem; }
.oh{ overflow: hidden; }
.lh1{
    line-height: 1;
}

/* MAQUETTE ZONING */
img {
    max-width: 20rem;
}
html{
    scroll-behavior: smooth
}
html,body{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family:  "Noto_Sans" , sans-serif  ;
}
body > * > div {
    min-width: 3rem;
    min-height: 3rem;
}
header{
    /* background-color: darkblue; */
    padding: 1rem;

}
a{
    text-decoration-color:transparent;
    transition: .5s;
}
a:hover{
    text-decoration-color:initial;
}
a[target="_blank"]::after{
    content: '➚';
}
h1,h2,h3,h4,h5,h6{
    font-family: "Cinzel_Decorative" , "Noto_Serif", serif ;
    font-weight: normal;
}
h1{ font-size: 3.5rem    ; }
h2{ font-size: 2.5rem    ; }
h3{ font-size: 1.5rem    ; }


#header1{
    /* background-color: lightcyan; */

    display: flex;
    justify-content: space-between;
}
#header1_fin{
    /* background-color: cyan; */

    display: flex;
}
#header2{
    /* background-color: lightblue; */
}
main{
    /* background-color: pink; */

    flex-grow: 1;
    padding: 0rem;

}
#main_gauche1{
    /* background-color: lightcoral; */
}
#main_gauche2{
    /* background-color: lightpink; */
}
#main_centre{
    /* background-color: pink; */
    flex-grow: 1;
}
#main_droite1{
    /* background-color: lavender; */
}
#main_droite2{
    /* background-color: mediumpurple; */
}
footer{
    background-color: black;
    padding: 1rem;
    border-top: solid 2px #424242;
}
#footer_ruban{
    /* background-color: darkolivegreen; */
    display: flex;
    justify-content: flex-end;
}
#footer_social{
    /* background-color: darkcyan; */
}
#footer_main{
    /* background-color: blueviolet; */

    display: flex;
    justify-content: space-between;
}
footer, footer a {
    color:white ;
}
#footer_main_debut{
    /* background-color: black; */
}
#footer_main_fin{
    /* background-color: grey; */
}
#footer_copy{
    /* background-color: darkviolet; */
    text-align: center;
}
video{
    max-width: 80vw;
}
/*FIN MAQUETTE ZONING*/


html[lang=""] [href="?lang="] {
    font-weight: 900;
}
strong{ font-weight: normal; }
em{ font-style: normal; }





.liste_3 { /* NOTE: il faudrait appeler ça "liste 30rem" plutot*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
width: 100%;
max-width: 100%;
}

.tal,.tas{text-align: start;}
.tac{ text-align:center; }
.tar,.tae{ text-align:end; }
.taj{text-align: justify;}


section {
    /* background-color: crimson; */
    /* background-color: gainsboro; */
    margin-bottom: 7rem;
}
.wrap{
    padding: 0 5rem;
}
.conteneur{
    /* background-color: blue; */
    margin: 0 auto;
    max-width: 70rem;
}
.wrap_txt_center{
    /* max-width: 50rem; */
    max-width: 40rem;
    margin: 0 auto;
}
.wrap_txt_left{
    /* max-width: 50rem; */
    max-width: 40rem;
}
.i{ font-style: italic; }
.ellipse{ border-radius: 50%; }
.oblong{ border-radius: 99vw; }
.horizontal{
    display: flex;
    flex-wrap: nowrap;
    flex-direction:row;
}


/*ACCUEIL*/
#deck_page_accueil{
    /* display: flex; */
    /* justify-content: space-between; */
    /* gap: 1rem; */

}
#deck_page_accueil > * {
    /* flex-grow: 1; */
    /* min-height: 12rem  ; */
    /* padding: 2rem; */
}
#deck_page_accueil > *:hover {
    /* background-color: gainsboro; */
}
#deck_page_accueil .wrap_img {
    /* width: 100%; */

}
/*FIN ACCUEIL*/


/*NOMBRES*/
#deck_nombres{
    display: flex;
    justify-content: space-between;
    gap: 0;
}
.carte_nombre {
    flex-grow: 1;
    font-family: "Noto_Sans" , sans-serif ;
    text-align: center;
    padding: 3rem 0;
}
.carte_nombre_titre{
    font-weight: 10 ;
    font-size: 5rem;
}
@media screen and (max-width: 800px) {
    .carte_nombre_titre{
        font-family: "Cinzel_Decorative" , "Noto_Serif", serif ;
        font-size: 1.5rem;
        font-weight: 700;
    }
}

/*FIN NOMBRES*/


body[data-nomPage="academie"] #temoignages{
    max-width:30rem;
    margin-left: auto; margin-right: auto;
    border-radius: 50%;
}
body[data-nomPage="academie"] #temoignages .temoignage_texte{
    margin-bottom: 1rem;
}

#temoignages blockquote{
    position: relative;
}

#temoignages blockquote{
    position: relative;
}
#temoignages blockquote::before{
    content : "“" ;
    font-family: "Cinzel_Decorative" , "Noto_Serif", serif  ;
    font-weight: 700;
    font-weight: 400;
    position: absolute;
    top: -1.7rem;
    left: -2.5rem;
    font-size: 8rem;
    /* color:gainsboro; */
    z-index: 0;
}
#temoignages .temoignage_texte{
    font-style: italic;
    margin: 0; /*pour bien régler les before guillemets */
    font-family: "Noto_Serif" , serif  ;
    font-weight: 360 ;
    /* line-height: 2; */
}
.temoignage_references{
    text-align: right;
    font-family: "Noto_Sans" , sans-serif  ;
    font-size: .8rem;
}
#temoignages .author-name::after{
    content : ' — ' ;
    padding: 0 .5rem;
}
/*MODALES*/
/* Style de la modal */
.modal {
    display: none; /* Par défaut, la modal est cachée */
    position: fixed; /* La modal est positionnée de manière fixe */
    z-index: 1; /* Indique la position de la modal sur l'axe z */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Couleur de fond semi-transparente */
    background-color: rgba(0,0,0,0.5);
}

/* Style du contenu de la modal */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* Style du bouton de fermeture */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/*FIN MODALES*/



/*LIGHTBOX*/
body.lightbox_actif{
    overflow: hidden;
}
body.lightbox_actif .lightbox{
    display: flex;
}
.lightbox{
    display: none;
    background-color: #000e;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;

    justify-content: center;
    align-items: center;
    /*    DEBUG    */
    /* display: flex;  */

    cursor:pointer;/*pour faire comprendre qu'on peut fermer*/
    user-select: none;
}
.lightbox_wrap{
    /* background-color: pink; */
    /* min-width: 20rem; */
    /* max-width : 80vw; */
    width: 70vw;
    height: 70vh;
    padding: 3rem;/*pour éviter de fermer la lightbox quand on clique un petit peu à côté*/

    display: flex;
    flex-direction: column;

    cursor:auto;
}
.lightbox_body{
    /* background-color: yellow; */
    flex-grow: 1;

    display: flex;
}
.lightbox_col_gauche{
    /* background-color: indianred; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 4rem;
}
.lightbox_col_centre{
    /* background-color: palegoldenrod; */
    flex-grow: 1;

    display: flex;
    padding: 0.5rem;
}
.lightbox_img{
    /* background-color: #fff; */
    background-position: center center;
    background-repeat:no-repeat;
    background-size:contain;

    flex-grow: 1;
}
.lightbox_col_droite{
    /* background-color: gray; */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 4rem;
}
.lightbox_fleche_gauche,.lightbox_fleche_droite,.lightbox_col_droite_zoning_1,.lightbox_btn_fermer{
    /* background-color: violet; */
    width: 5rem;
    height: 5rem;

    background-repeat: no-repeat;
    background-size:contain;
    background-position : center center;
}
.lightbox_fleche_gauche,.lightbox_fleche_droite,.lightbox_btn_fermer,.lightbox_scroller_item{
    cursor:pointer;
    user-select:none;
}
.lightbox_footer{
    display: flex;
    flex-direction: column; /*ne pas confondre avec son enfant*/
    justify-content: center;
}
.lightbox_scroller_wrap{
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* gap: .5rem; */
}
.lightbox_scroller_item{
    /* background-color: maroon; */
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("../images/design/btn/scroller_icon_inactive.svg");
    background-repeat: no-repeat;
    background-size:contain;
    background-position : center center;
}
.lightbox_scroller_item.actif{
    /* background-color: yellow; */
    background-image: url("../images/design/btn/scroller_icon_active.svg");
}
.lightbox_fleche_gauche{
    background-image: url("../images/design/fleche/bt_next.png");
    transform: scaleX(-1); /*symétrie axiale*/
}
.lightbox_fleche_droite{
    background-image: url("../images/design/fleche/bt_next.png");
}
.lightbox_btn_fermer{
    background-image: url("../images/design/btn/btn-fermer 2.png");
}

.lightbox[data-etats-fleches="PREMIERE_IMAGE"] .lightbox_fleche_gauche,
.lightbox[data-etats-fleches="DERNIERE_IMAGE"] .lightbox_fleche_droite,
.lightbox[data-etats-fleches="UNE_SEULE_IMAGE"] .lightbox_fleche_gauche,
.lightbox[data-etats-fleches="UNE_SEULE_IMAGE"] .lightbox_fleche_droite{
    filter: brightness(.3);
    cursor : inherit;
}
.lightbox[data-etats-fleches="UNE_SEULE_IMAGE"] .lightbox_fleche_gauche,
.lightbox[data-etats-fleches="UNE_SEULE_IMAGE"] .lightbox_fleche_droite{
    visibility: hidden;
}



/*IMAGES DEFILANTES*/
/* .bandeau{
background-color: magenta;
width: 100vw;
padding: 2rem  0;

display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2rem;
margin-bottom: 2rem;
}
.bandeau_img{
background-color: red;
height: 10rem;
width: calc( 10rem * 1.618);
margin: 0 ;
padding: 0;

flex-shrink: 0;
} */


.bandeau_defilant , .bandeau_defilant_2{
    /* background-color: pink; */
    width: 100vw;

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

    /* margin-bottom: calc(-18vw /2); */
}

@keyframes defilementGauche {
    0% { transform: translateX(300vw); }
    100% { transform: translateX(-300vw); }
}
.bandeau_defilant_2{
    transform: translateY(-18vw);
}
.bandeau_img{
    flex-shrink: 0 ;
    /* background-color: magenta; */
    width: 28vw;
    height: 18vw;
    margin-right: 2vw;
    animation : defilementGauche  300s -150s linear infinite;

    background-position: center center;
    background-repeat:no-repeat;
    background-size:cover;

    box-shadow: 0 0 1rem 0 #b89f6055 ;

}
.bandeau_defilant_2 .bandeau_img{
    animation : defilementGauche  300s -300s linear infinite;
}




.bandeau_defilant_2 + * {
    margin-top: calc(-18vw + 2vw);
}
[data-sens="droite"] .bandeau_img{
    animation : defilementGauche  300s -150s linear infinite reverse;
}
.bandeau_defilant_2[data-sens="droite"]  .bandeau_img{
    animation : defilementGauche  300s -300s linear infinite reverse;
}