@font-face {
    font-family: 'Abril';
    src: url('../polices/Abril_Fatface/AbrilFatface-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Bebas';
    src: url('../polices/Bebas_Neue/BebasNeue-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Crimson';
    src: url('../polices/Crimson_Text/CrimsonText-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    src: url('../polices/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}


:root{
    --backgroundColorDiv : #ecf0f1;
    --backgroundColorDiv2: white;
    --backgroundColorBody: #D3D3D31F;
    --border: 1px solid #0E4C92;
    --borderRadius: 0.2vw;
    --fontColorTitle: #4A8CB2;
    --fontColorHover: #D69718;
    --policeTitre: Montserrat;
    --policeContenu: Crimson;
    --boxShadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}



body{
    margin: 0;
    display: block;
    background-color: var(--backgroundColorBody);
    font-family: Georgia, 'Times New Roman', Times, serif
}


body button{
    align-self: center;
    background-color: #fff;
    background-image: none;
    background-position: 0 90%;
    background-repeat: repeat no-repeat;
    background-size: 4px 3px;
    border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
    border-style: solid;
    border-width: 2px;
    box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
    box-sizing: border-box;
    color: #41403e;
    cursor: pointer;
    display: inline-block;
    font-family: Georgia;
    font-size: 1rem;
    line-height: 23px;
    outline: none;
    padding: .75rem;
    text-decoration: none;
    transition: all 235ms ease-in-out;
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  body button:hover {
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
    transform: translate3d(0, 2px, 0);
  }
  
  body button:focus {
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
  }



/****************************** BASE.HTML.TWIG *****************************************/

headerOrdi{
    top: 0;
    display: flex;
    border-bottom: var(--border);
    justify-content: space-between;
    background-color: #f9f9f9;
}

nav{
    width: 100%;
}

.navOrdi{
    display: flex;
   /* margin-top: 4%;
    padding-left: 3.5%;
    padding-right: 2%;
    width: 68%;
    margin-bottom: 3%;
    gap: 5%;*/
    width: 90%;
    margin-top: 4%;
    margin-bottom: 1%;
}

.navAdmin{
    padding-left: 4.5%;
    padding-right: 2%;
    gap: 3.5%;
    display: flex;
    width: 100%;
    z-index: 3;
}

.navUser{
    padding-left: 4.5%;
    padding-right: 2%;
    gap: 3%;
    width: 100%;
    display: flex;
    z-index: 3;
}

.navAdmin a {
    text-decoration: none;
    color: #4a8cb2;
    padding-bottom: 4%;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.8s ease;
    font-size: 1.0vw;
    font-family: Georgia;
    font-weight: bold;
    margin-bottom: 6%;
}

.navUser a {
    text-decoration: none;
    color: #4a8cb2;
    padding-bottom: 2%;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.8s ease;
    font-size: 1.1vw;
    font-family: Georgia;
    font-weight: bold;
    margin-bottom: 3%;
}

.navUser a h1{
    padding-bottom: 2%;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.8s ease;
    font-size: 1.1vw;
    font-family: Georgia;
    font-weight: bold;
    margin-bottom: 3%;
    line-height: 1.5;
}

.navAdmin a:hover {
    border-bottom: 1px solid #D69718;
    color: #4a8cb2;
}

.navUser a:hover {
    border-bottom: 1px solid #D69718;
    color: #4a8cb2;
}

.headerLogo{
    text-align: center;
    position: absolute;
    z-index: 2;
    width: 100%;
}

.headerLogo img{
    width: 13%;
    display: block;
    margin: auto; 
    background-color: white;
    border-radius: 47%;
}

.headerDrapeaux{
    margin-top: 3%;
 /*   padding-right: 0.4%;*/
 /*   border: var(--border);*/
    width: 24%;
    padding-left: 0.4%;
    text-align: center;
 /*   margin-right: 2%;*/
    margin-bottom: 2%;
 /*   background-color: #62929e5e;*/
    right: 0;
    position: absolute;
  /*  border-radius: 1.2vw;*/
    z-index: 3;
}

.headerDrapeaux a{
    font-size: 2.5vw;
    text-decoration: none;
  /*  padding-right: 1%;*/
}

.headerDrapeaux a img{
    width: 11%;
    margin-right: 0%;
    transition: 0.5s ease;
}

.headerDrapeaux a img:hover{
    border: 3px solid #0052b4;
    border-radius: 50%;
}


/*
.headerDrapeauxAdmin{
    margin-top: 5%;
    padding-right: 0.4%;
    border: var(--border);
    width: 14%;
    padding-left: 0.4%;
    text-align: center;
    margin-right: 2%;
    margin-bottom: 2%;
    background-color: #4fb4cd5e;
    right: 0;
    position: absolute;
    border-radius: 1.2vw;
    padding-top: 1%;
    padding-bottom: 1%;
}

.headerDrapeauxAdmin a{
    font-size: 1.1vw;
    text-decoration: none;
    padding-right: 1%;
}*/

.headerDrapeauxAdmin{
    margin-top: 3%;
    margin-bottom: 2%;
    margin-right: 2%;
    text-align: right;
    width: 90%;
    z-index: 3;
}

.headerDrapeauxAdmin button{
    appearance: none;
    background-color: #FFFFFF;
    border-width: 0;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-family: Clarkson,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1em;
    margin: 0;
    opacity: 1;
    outline: 0;
    padding: 1.5em 2.2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-rendering: geometricprecision;
    text-transform: uppercase;
    transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
  }
  
  .headerDrapeauxAdmin button:before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #148ED440;
    clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
    width: 100%;
  }
  
  .headerDrapeauxAdmin button:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
  }
  
  .headerDrapeauxAdmin button:after {
    background-color: #4A8CB2;
  }
  
  .headerDrapeauxAdmin button {
    z-index: 1;
    position: relative;
  } 


.headerBandeau{
    width: 100%;
    height: 20vh;
    overflow: hidden;
    box-shadow: 0vh 0.3vh 1vh rgba(0, 0, 0, 0.2);
}

.headerBandeau img{
    width: 100%;
    object-fit: cover;
}

.parallax{
    z-index: 1;
    overflow: hidden;
}

.simpleParallax{
    position: relative;
    display: inline-block;    
    width: 100%;
}

.divTitrePage{
    border: 1px solid black;
    margin-top: 5%;
    padding: 2%;
    width: 92.8%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    font-family: Bebas;
    font-size: 2.4vw;
}

.divTitrePage h2{
    margin-top: 1%;
    margin-bottom: 1%;
}

.divHeaderMessages{
    border: 1px solid black;
    margin-top: 5%;
    padding: 2%;
    width: 92.5%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
}

.bandeauTitre{
    position: absolute;
    bottom: 17%;
    left: 30%;
    right: 30%;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1% 5%;
    border-radius: 5px;
    font-size: 1.5vw;
    text-align: center;
}

.misEnAvant{
    display: flex;
    border: 1px solid black;
    border-radius: var(--borderRadius);
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
    width: 92.7%;
    background-color: var(--backgroundColorDiv);
    box-shadow: var(--boxShadow);
}

.misEnAvant h5{
    font-size: 1.4vw;
}

.contenuGaucheDroite{
    display: flex;
    text-align: center;
}

.contenuGauche{
    flex: 2;
    margin-left: 3.52%;
}

.contenuDroite{
    flex: 1;
}

.bandeauYoutube{
    background-image: url('/projethenrilasserre/public/photos/feuille-notes-musique.jpg');
    background-position: right;
    text-align: center;
    border: var(--border);
    margin-left: auto;
    margin-right: auto;
    padding-top: 4%;
    padding-bottom: 4%;
    margin-top: 6%;
    font-size: 2.9vw;
    color: #65637e;
    border-radius: 0.3vw;
    width: 93%;
    box-shadow: 0vh 1.9vh 5vh rgba(187, 183, 202, 0.63);
    transition: 0.8s ease;
}

.bandeauYoutube:hover{
    border: 4px solid var(--fontColorTitle);
}

.bandeauYoutube:hover h3{
    color: var(--fontColorTitle);
}

.bandeauYoutube h3{
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4vw;
    font-family: Bebas;
    letter-spacing: 0.8vw;
    transition: 0.8s ease;
}

footer{
    bottom:0;
    margin-top: 10%;
    border-top: 1px solid black;
    padding-top: 6%;
    padding-left: 5%;
    padding-right: 5%;
    display: block;
    background-color: #18335B;
    color: white;
}

.footerDivs{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
    gap: 12%;
}

.footerLogo{
    flex:1;
}

.footerLogo img{
    width: 100%;
    background-color: #f9f9f9fc;
    border-radius: 50%;
}

.footerCoordonnees{
    flex: 2;
    font-size: 1.6vw;
    margin-top: 1%;
    font-family: Crimson;
    text-align: center;
}

.footerLiens{
    display: block;
    flex: 2;
    font-family: Crimson;
    font-size: 1.3vw;
}

.footerLiens a{
    color:white;
    text-decoration: none;
    transition: 0.5s ease;
    display: block;
}

.footerLiens a h1{
    font-family: Crimson;
    font-size: 1.3vw;
}

.footerLiens a:hover{
    color: #8f8f8f;
}

.navAdminFooter{
    padding-left: 4.5%;
    padding-right: 1%;
    width: 100%;
    display: block;
}

.navUserFooter{
    padding-left: 9.5%;
    padding-right: 2%;
    display: block;
    line-height: 257%;
}

.footerBas{
    display: flex;
    justify-content: space-between;    
}

.footerAdmin a{
    text-decoration: none;
    transition: 0.8s ease;
}

.footerAdmin a:hover{
    color: var(--fontColorHover);
}

.footerBas a{
    text-decoration: none;
    color: white;
}

.footerMention a{
    transition: 0.8s ease;
}

.footerMention a:hover{
    color: var(--fontColorHover);
    font-weight: bold;
}



/* ***************************************** MENTIONS LEGALES ********************/

.mentionsLegales{
    display:block; 
    text-align: justify; 
    font-size: 1.2vw;
}



/* ***************************************** INCLUDE A PROPOS DE MOI ********************/


.includeAProposDeMoi{
    width: 77%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.includeAProposDeMoi img{
    width: 80%;
    margin-top: 5%;
    margin-bottom: 3%;
    height: 50vh;
    object-fit: cover;
}

.includeAProposDeMoi p{
    font-size: 1.1vw;
    text-align: justify;
    padding-left: 9%;
    padding-right: 9%;
    padding-bottom: 2%;
    padding-top: 10%;
}

.includeAProposDeMoi h3{
    font-size: 2.4vw;
    margin-top: 12%;
    font-family: Bebas;
    letter-spacing: 0.1vw;
    margin-bottom: 5%;
}

.includeAProposDeMoiNom{
    font-family: var(--fontColorTitle); 
    font-size: 1.5vw; 
    margin-bottom: 5%; 
    margin-top:5%;
}

.includeAProposDeMoiNomRusse{
    font-family: var(--fontColorTitle); 
    font-size: 1.3vw; 
    margin-bottom: 5%; 
    margin-top: 0%;
}




/* ***************************************** INCLUDE SUIVEZ-MOI ********************/

.includeSuivezMoi{
    display: block;
    padding-bottom: 10%;
    padding-top: 10%;
    width: 77%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.includeSuivezMoi h3{
    margin-bottom: 14%;
    font-size: 1.9vw;
}

.includeLiensReseaux{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10%;
}

.includeLiensReseaux img{
    width: 45%;
}


/* ***************************************** INCLUDE YOUTUBE ********************/

.includeYoutube{
    padding-top: 10%;
    display: block;
    padding-bottom: 10%;
    padding-top: 10%;
    width: 77%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 9%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    transition: 1.8s ease;
}

.includeYoutube:hover{
    background-color: #d42927;
}

.includeYoutube h3{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.5vw;
    line-height: 230%;
    color: #d42927;
    font-family: Bebas;
}

.includeYoutube:hover h3{
    color: white;
}

.lienIncludeYoutube{
    text-decoration: none;
}

.includeSuivezMoi h3{
    margin-bottom: 14%;
    font-size: 3.0vw;
    margin-top: 7%;
    font-family: Bebas;
    letter-spacing: 0.1vw;
}




/* ***************************************** INCLUDE DERNIERE VIDEO ********************/

.includeDerniereVideo{
    height: 40vh;
    display: block;
    padding-bottom: 10%;
    padding-top: 10%;
    width: 77%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.includeDerniereVideo iframe{
    width: 100%;
    height: 100%;
}


/* ***************************************** INCLUDE DERNIER ARTICLE  ********************/

.includeDernierArticle{
    display: block;
    padding-bottom: 10%;
    padding-top: 10%;
    width: 77%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.includeDernierArticle img{
    width: 100%;
    height: 33vh;
}




/* ***************************************** INCLUDE DEMANDER PARTITIONS ********************/

.includeDemandePartitions{
    display: block;
    padding-top: 4%;
    width: 77%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    transition: 0.8s ease;
}

.includeDemandePartitions h3{
    font-size: 2.5vw;
    line-height: 223%;
    margin-top: 13%;
    margin-bottom: 13%;
    font-family: Bebas;
}

.includeDemandePartitions:hover{
    color: var(--fontColorHover);
}

.includeDemandePartitions a{
    border:1px solid black;
    padding: 1%;
    text-decoration: none;
    color: black;
}

.lienDemanderUnePartition{
    text-decoration: none;
    color: black;
}


/* ********************** COMMENTAIRE *************** */

.commentaireDate{
    font-style: italic; 
    font-size: 1.0vw; 
    margin-bottom: 1.7%;
}




/* *********************** ACCUEIL ******************* */


.articleChoisiGauche{
    flex: 1;
}

.articleChoisiGauche h3{
    color: #4A8CB2;
    font-size: 1.6vw;
    font-family: var(--policeTitre);
    margin-bottom: 5%;
}

.articleChoisiGauche p{
    font-size: 1.25vw;
    text-align: justify;
    font-family: var(--policeContenu);
}

.articleChoisiDroite{
    flex: 1;
    width: 100%;
   /* height: 55vh;*/
   height: 78vh;
    overflow: hidden;
}

.articleChoisiDroite img{
    width: 97%;
    padding-left: 10%;
    padding-right: 0%;
}

.accueilDerniereVideo{
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backgroundColorDiv);
    padding: 5%;
    margin-bottom: 8%;
    box-shadow: var(--boxShadow);
}

.accueilDerniereVideoPresentationH2{
    font-size: 2.2vw;
    margin-top: 0.5%;
    margin-bottom: 1%;
}

.accueilDerniereVideoPresentationTexte{
    text-align: justify;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 1%;
    font-size: 1.2vw;
    background-color: #ecf0f1e5;
    border-radius: var(--borderRadius);
    margin-bottom: 3%;
    line-height: 127%;
}

.accueilDerniereVideoPresentationTexte h2{
    text-align: center;
    color: #4A8CB2;
    font-size: 1.6vw;
    padding-bottom: 2%;
}

.accueilDerniereVideo iframe{
    width: 100%;
    height: 73vh;
    padding-bottom: 0.5%;
}

.accueilDerniersArticles{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5%;
}

.accueilDernierArticle{
    width: 100%;
    background-repeat: round;
    padding-top: 4%;
    padding-bottom: 5%;
}

.accueilDernierArticle a{
    text-decoration: none;
}

.accueilDernierArticle h5{
    color: #4A8CB2;
    font-size: 1.2vw;
    margin-top: 5%;
}



/* ***********************  ARTICLES ******************* */

.articlesDiv{
    box-shadow: var(--boxShadow);
}

.articlesDiv a{
    text-decoration: none;
    color: black;
}

.articlesDiv a:hover h4 {
    color: #D69718;
}

.articlesDiv a:hover p {
    color: black;
}

.articlesArticle{
    border: 1px solid black;
    margin-bottom: 5%;
    display: block;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.articlesArticleInfos{
    display: flex;
}

.articleGauche{
    flex: 1;
    padding-top: 5%;
    padding-left: 4%;
    padding-right: 4%;
    text-align: justify;
    font-size: 1.2vw;
}

.articleGauche h4{
    margin-bottom: 10%;
    color: #4a8cb2;
    transition: 0.5s ease;
}

.articleGauche p{
    margin-right: 6%;
    line-height: 134%;
}

.articleDroite{
    flex: 1;
    padding-top: 3%;
    padding-bottom: 0%;
    padding-right: 4%;
    padding-left: 2%;
    width: 95%;
    height: 41vh;
    display:none;
}

.articleDroite img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.articleTexte{
    text-align: left;
    padding-left: 4%;
    line-height: 0.4vw;
    font-style: italic;
    font-size: 0.9vw;
}


/* *********************** CONSULTER ARTICLE ******************* */

.divArticle{
    width: 92.8%;
    margin-left: auto;
    margin-right: auto;
}

.consulterArticle{
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 3%;
    margin-bottom: 5%;
    text-align: justify;
    line-height: 4vh;
    font-size: 1.2vw;
    background-color: var(--backgroundColorDiv2);
    padding-left: 8%;
    padding-right: 8%;
}

.consulterArticle h2{
    color: #4A8CB2;
    padding-bottom: 2%;
}

.consulterArticleMisEnAvant{
    text-align: center;
}

.consulterArticleMisEnAvantDiv{
    width: 100%;
}

#consulterArticleMisEnAvantId{
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.consulterArticleMisEnAvantDiv a{
    color: black;
    text-decoration: none;   
    font-size: 1.8vw;
    font-family: Bebas;
    transition: 0.8s ease;
}

.consulterArticleMisEnAvantDiv a:hover{
    color: #4a8cb2; 
}

.consulterArticleMisEnAvant p{
    color: black;
    text-decoration: none;  
}

.consulterArticleVideo{
    display: block;
    width: 65%;
    border: var(--border);
    border-radius: var(--borderRadius);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    height: 51vh;
}

.consulterArticleVideo iframe{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.consulterArticleVisuel{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 82vh;
    overflow: hidden;
}

.consulterArticleVisuel img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: top;
}

.consulterArticleVisuel iframe{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consulterArticlePublie{
    padding-top: 8%;
    display: block;
    padding-bottom: 10%;
    padding-top: 10%;
    width: 71%;
    padding-left: 2%;
    padding-right: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.consulterArticleExtrait{
    padding-top: 8%;
    display: block;
    padding-top: 10%;
    width: 65%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
    font-style: italic;
}

.consulterArticlePhotographe{
    margin-bottom: 8%;
    font-style: italic;
    text-align: right;
}


/* *********************** OEUVRES ******************* */

.oeuvreLienVideo{
    text-decoration: none;
    color: black;
}

.oeuvreVideo{
    width: 98%;
    display: flex;
    margin-right: auto;
    margin-left: 0;

    margin-bottom: 5%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.oeuvreGauche{
    display: block;
    flex: 1;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
}

.oeuvreGauche h4{
    padding-bottom: 5%;
    font-size: 1.5vw;
    padding-left: 2%;
    padding-right: 2%;
}

.oeuvreVideoPres{
    text-align: justify;
    padding-left: 6%;
}

.oeuvreDroite{
    flex: 1;
    width: 41%;
    height: 55vh;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
}

.oeuvreDroite img{
    width: 78%;
    padding-top: 8%;
    padding-bottom: 5%;
    padding-right: 6%;
    padding-left: 5%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.oeuvreVideoLien{
    text-align: center;
    margin-top: 12%;
    font-size: 1.3vw;
}

.accueilDernierArticleImage{
    height: 100%;
}

.accueilDernierArticle img{
    object-fit: cover;
    width: 100%;
    height: 74%;
    object-position: top;
}

.accueilDernierArticleLienH5{
    text-decoration: none;
    color:black;
}

.accueilDernierArticleLienH5 h5{
    text-decoration: none;
    color:black;
}

.accueilDerniersArticles{
    display: block;
    background-repeat: round;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    box-shadow: var(--boxShadow);
}

.accueilDerniersArticles h2{
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 2.2vw;
}

.accueilDernierArticle{
    width: 100%;
    background-repeat: round;
    border-top: var(--border);
    background-color: #ecf0f1;
}

.accueilDernierArticle:hover{
    background-color: #CDE9EF;
    transition: 0.3s ease;
}

.accueilDernierArticle h5{
    color: #4A8CB2;
    font-size: 1.6vw;
    margin-top: 2.5%;
    transition: 0.3s ease;
}

.accueilDernierArticle h5:hover{
    color: #D69718;
}

/* *********************** CONSULTER VIDEO ******************* */

.consulterVideoVideo{
    margin-bottom: 12%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.consulterVideoVideo iframe{
    width: 90%;
    height: 80vh;
    margin-bottom: 5%;
}

.consulterVideoVideo h3{
    font-size: 2.3vw;
}

.ecrireCommentaire{
    margin-bottom: 4%;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: #4a8cb203;
    padding: 2%;
}

.ecrireCommentaire form{
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.commentaire{
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 4%;
    text-align: left;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-right: 5%;
    font-size: 1.1vw;
}

.commentaire a{
    text-align: center;
    color: var(--fontColorTitle);
    transition: 0.8s ease;
    text-decoration: none;
}

.commentaire a:hover{
    color: var(--fontColorHover);
}

.inputCreerCommContenu{
    width: 93%;
    height: 23vh;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #ecf0f114;
    font-family: Georgia;
    font-size: 1.0vw;
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: white;
    border: none;
    box-shadow: var(--boxShadow);
}

.inputCreerCommEmail{
    width: 93%;
    height: 6vh;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #ecf0f114;
    font-family: Georgia;
    font-size: 1.0vw;
    padding-top: 0.4%;
    padding-bottom: 0.4%;
    background-color: white;
    border: none;
    box-shadow: var(--boxShadow);
}

.inputCreerCommPrenom{
    width: 93%;
    height: 6vh;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #ecf0f114;
    font-family: Georgia;
    font-size: 1.0vw;
    padding-top: 0.4%;
    padding-bottom: 0.4%;
    background-color: white;
    border: none;
    box-shadow: var(--boxShadow);
}

.validerCommentaireBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}

.commentaireAucunComm{
    text-align: center;
}

#creer_commentaire_admin_contenuCommentaire{
    width: 93%;
    height: 23vh;
    padding-left: 2%;
    padding-right: 2%;
    background-color: white;
}

.ecrireCommentaireAdminBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}

.ecrireCommentaire h3{
    margin-bottom: 3%;
    text-align: center;
    font-family: var(--policeTitre);
    font-size: 1.5vw;
    color: var(--fontColorTitle);
}

.aucunCommentaireAdmin{
    text-align: center;
}


/* *********************** A PROPOS DE MOI ******************* */

.aProposMisEnAvant{
    display: flex;
    width: 100%;
}

.aProposPhoto{
    flex: 1;
    width: 40%;
    height: 55vh;
}

.aProposPhoto img{
    width: 77%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border: var(--border);
}

.aProposBio{
    flex:2;
    display: block;
}

.aProposTitre{
    text-align: center;
}

.aProposTitre h2{
    font-size: 5vw;
    letter-spacing: 2.2vw;
    text-align: center;
    margin-bottom: 6%;
}

.aProposPresentation{
    border: var(--border);
    background-color: var(--backgroundColorDiv2);
    width: 96%;
}

.aProposPresentation h3{
    font-size: 1.7vw;
    text-align: left;
    padding-left: 4%;
}

.aProposPresentation p{
    font-size: 1.5vw;
    text-align: justify;
    padding-left: 4%;
    padding-right: 4%;
}

.aProposExperience{
    border: 1px solid black;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
    padding: 3%;
    height: 94vh;
}

.aProposExperience p{
    text-align: left;
    padding: 3%;
}

.aProposFormation{
    border: 1px solid black;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
    padding: 3%;
    height: 94vh;
}

.aProposFormation p{
    text-align: left;
    padding: 3%;
}


/* *********************** CONTACT / DDE PARTITION ******************* */

.ContactFormulaire{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 2%;
}

.ContactFormulaire h2{
    margin-bottom: 7%;
}

.ContactFormulaire p{
    font-size: 1.4vw;
    margin-top: 2%;
    margin-bottom: 2%;
    font-family: Crimson;
}

.ContactFormulaire form{
    margin-top: 4%;
}

#contact_nom, #demander_partition_nomContact, #contact_nomContact{
    width: 57%;
    height: 6vh;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #f9f9f9;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.2vw;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 1vh;
}

#contact_email, #demander_partition_emailContact, #contact_emailContact{
    width: 57%;
    height: 6vh;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #f9f9f9;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.2vw;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 1vh;
}

#contact_message, #demander_partition_messageContact, #contact_messageContact{
    width: 57%;
    height: 50vh;
    padding: 2%;
    background-color: #f9f9f9;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.2vw;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: 1px 1px 1px black;
    border-bottom: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 1vh;
}

.contactBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}


/* *********************** SE CONNECTER ******************* */

.divFormulaireConnexion{
    width: 100%;
    text-align: center;
}

.formulaireConnexion{
    display: block;
    text-align: center;
}

.formulaireConnexion input{
    text-align: center;
}

#inputUsername{
    margin-bottom: 3%;
    height: 5vh;
    font-size: 1.2vw;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    text-align: center;
    width: 24%;
}

#inputPassword{
    margin-bottom: 3%;
    height: 5vh;
    font-size: 1.2vw;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    text-align: center;
    width: 24%;
}

.btn-btn-lg-btn-primary{
    font-size: 1.0vw;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 0.7%;
    padding-bottom: 0.7%;
}

.loginTexte{
    margin-top: 4%;
    margin-bottom: 4%;
    font-style: italic;
}


/* ***********************  ADMIN INTERFACE ******************* */

.adminInterfaceDerniersPublies{
    display: flex;;
    width: 100%;
    gap: 5%;
}

.adminInterfaceDernierArticle{
    flex:1;
    background-size: cover;
    opacity: 75%;
    overflow: hidden;
    transition: 0.8s ease;
}

.adminInterfaceDernierArticle a{
    color: black;
    text-decoration: none;
}

.adminInterfaceDernierArticle:hover a{
    color: var(--fontColorTitle);
}

.adminInterfaceDernierArticleArticle img{
    width: 93%;
    object-fit: cover;
    height: 47vh;
    object-position: top;
}

.adminInterfaceDerniereVideo{
    flex:1;
    background-size: cover;
    opacity: 75%;
    overflow: hidden;
}

.adminInterfaceDerniereVideoVideo img{
    width: 100%;
    object-fit: cover;
    height: 50vh;
}

.adminInterfaceDerniereVideoVideo iframe{
    width: 100%;
    object-fit: cover;
    height: 50vh;
}

.adminInterfaceDerniersPublies h4{
    color: black;
    font-size: 1.7vw;
    font-family: Georgia;
}

.adminInterfaceDerniersPublies a h4{
    color: black;
    font-size: 1.3vw; 
    font-family: Georgia;
}

.adminInterfaceArticleMisEnValeur{
    display: block;
    border: 1px solid black;
    border-radius: var(--borderRadius);
    margin-bottom: 5%;background-color: var(--backgroundColorDiv2);
}

.adminInterfaceArticleMisEnValeur h4{
    font-size: 1.7vw;
    font-family: Bebas;
    margin-top: 4%;
    margin-bottom: 3%;
    color: var(--fontColorTitle);
}

.adminInterfaceArticleMisEnValeurDiv{
    display: flex;
}

.adminInterfaceArticleMisEnValeurDiv p{
    width: 100%;
}

.adminInterfaceArticleMisEnValeurForm{
    border: 1px solid black;
    border-radius: var(--borderRadius);
    margin-bottom: 5%;
    background-color: var(--backgroundColorDiv2);
}

.adminInterfaceArticleMisEnValeurForm form p{
    font-size: 1.1vw;
}

.adminInterfaceArticleMisEnValeurForm h4{
    font-size: 1.3vw;
    padding-top: 2%;
    font-size: 1.7vw;
    font-family: Bebas;
    margin-top: 3%;
    margin-bottom: 3%;
    color: var(--fontColorTitle);
}

#mettre_un_article_en_valeur_articleChoisi,
#mettre_lettre_en_valeur_LettreChoisie,
#mettre_video_en_valeur_videoChoisie,
#mettre_en_valeur_femme_estChoisie{
    font-size: 1.0vw;
    padding-left: 1.5%;
    padding-top: 1%;
    padding-right: 1%;
    margin-right: 6%;
    padding-bottom: 1%;
    width: 68%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2%;
}

.adminInterfaceArticleMisEnValeurForm button{
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 1.0vw;
    margin-bottom: 3%;
}

.adminInterfaceArticleMisEnValeurForm h5 {
    font-size: 1.1vw;
}

.adminInterfaceStats{
    display: flex;
    width: 100%;
    gap: 15%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 6%;
    width: 96%;
}

.adminInterfaceStats h3{
    font-size: 1.4vw;
    line-height: 0%;
    margin: 1%;
    padding-top: 5%;
}

.adminInterfaceStats h4{
    font-size: 5vw;
    line-height: 0%;
    margin: 27%;
    padding-top: 2%;
}

.adminInterfaceStatsArticles{
    flex:1;
    border:1px solid black;
    border-radius: var(--borderRadius);
    padding: 2%;
    background-color: var(--backgroundColorDiv);
}

.adminInterfaceStatsVideos{
    flex:1;
    border:1px solid black;
    border-radius: var(--borderRadius);
    padding: 2%;
    background-color: var(--backgroundColorDiv);
}

.adminInterfaceStatsComm{
    flex:1;
    border:1px solid black;
    border-radius: var(--borderRadius);
    padding: 2%;
    background-color: var(--backgroundColorDiv);
}

.adminArticleChoisiGauche{
    flex:1;
    padding-left: 6%;
    padding-right: 3%;
    padding-bottom: 3%;
}

.adminArticleChoisiGauche p{
    text-align: justify;
}

.adminArticleChoisiDroite{
    flex: 1;
    width: 100%;
    height: 51vh;
    overflow: hidden;
    object-fit: cover;
}

.adminArticleChoisiDroite img{
    width: 78%;
    height: 87%;
    object-fit: cover;
    object-position: top;
}

.adminInterfaceAffichageCommentaires{
    padding-left: 6%;
    padding-right: 6%;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    width: 74%;
    margin-left: auto;
    margin-right: auto;
}

.adminInterfaceCommentaire{
    border-bottom: 1px dotted black;
    padding-bottom: 2%;
    padding-top: 2%;
}

.adminInterfaceCommentaire h5{
    font-family: var(--policeTitre);
    font-size: 1.1vw; 
    margin-top: 4%;
}

.adminInterfaceAffichageCommentaires h4{
    font-size: 1.7vw;
    font-family: Bebas;
    margin-top: 11%;
    margin-bottom: 3%;
    color: var(--fontColorTitle);
}

.adminInterfaceAffichageCommentaires p{
    text-align: justify;
}

.adminInterfaceCommentaireP{
    font-size: 1.0vw;
    font-style: italic;
}

.adminInterfacePhotoAccueil{
    border: 1px solid black;
    border-radius: var(--borderRadius);
    padding: 2%;
    background-color: var(--backgroundColorDiv);
    height: 50vh;
    display: flex;
    margin-bottom: 5%;
}

.adminInterfacePhotoAccueilImg{
    flex: 1;
}

.adminInterfacePhotoAccueilImg img{
    width: 80%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.adminInterfacePhotoAccueilForm{
    flex:1;
}

.adminInterfacePhotoAccueilForm h3{
    font-family: Bebas;
    color: var(--fontColorTitle);
    margin-top: 6%;
    font-size: 2.2vw;
}

.adminInterfaceBoutonLien{
    color: var(--fontColorHover);
    text-decoration: none;
    transition: 0.8s ease;
}

.adminInterfaceBoutonLien:hover{
    color: var(--fontColorTitle);
}

#modifier_auteur_photo1Auteur{
    margin-top: 10%;
    margin-bottom: 9%;
    font-family: Georgia;
}


/* ***********************  ADMIN ARTICLES ******************* */

.adminArticlesCreerArticle{
    width: 100%;
    text-decoration: none;
    color: black;
    font-size: 1.1vw;
    transition: 0.8s ease;
}

.adminArticlesCreerArticle:hover{
    color: var(--fontColorTitle);
}

.adminArticlesDiv a{
    text-decoration: none;
    color: black;
}

.adminArticlesArticle{
    border: var(--border);
    border-radius: var(--borderRadius);
    margin-bottom: 5%;
    display: block;
    background-color: var(--backgroundColorDiv2);
}

.adminArticlesArticleInfos{
    display: flex;
    transition: 0.8s ease;
    color: black;
}

.adminArticlesArticle h4{
    transition: 0.8s ease;
}

.adminArticlesArticle:hover h4{
    color: var(--fontColorTitle);
}

.adminArticlesArticle:hover p{
    color: black;
}

.adminArticleGauche{
    flex: 1;
    padding-top: 5%;
    padding-left: 4%;
    text-align: justify;
    font-size: 1.2vw;
}

.adminArticleGauche h4{
    margin-bottom: 10%;
    font-family: var(--policeTitre);
    font-size: 1.2vw;
}

.adminArticleGauche p{
    margin-right: 6%;
    line-height: 134%;
    font-family: var(--policeContenu);
    font-size: 1.2vw;
}

.adminArticleDroite{
    flex: 1;
    padding-top: 3%;
    padding-bottom: 0%;
    padding-right: 2%;
    padding-left: 2%;
    overflow: hidden;

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.adminArticleDroite img{
    max-height: 50vh;
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.adminArticleTexte{
    text-align: left;
    padding-left: 4%;
    line-height: 0.4vw;
    font-style: italic;
    font-size: 0.9vw;
}

.adminArticlesStats{
    width: 77%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    background-color: var(--backgroundColorDiv2);
    padding-top: 5%;
    padding-bottom: 5%;
}

.adminArticlesStats p{
    font-size: 1.2vw;
}



/* ***********************  ADMIN CONSULTER ARTICLE ******************* */

.adminConsulterArticlePublie{
    width: 100%;
    font-size: 1.5vw;
}

.adminConsulterArticleContenu{
    margin-bottom: 10%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 5%;
    text-align: justify;
    background-color: var(--backgroundColorDiv2);
    font-size: 1.4vw;
}

.adminConsulterArticleContenu p{
    font-family: var(--policeContenu);
}

.adminConsulterArticleContenu h2{
    color: #4A8CB2;
    margin-bottom: 4%;
    font-family: var(--policeTitre);
}

.adminConsulterArticleVideo{
    margin-bottom: 10%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 5%;
    background-color: var(--backgroundColorDiv2);
    height: 74vh;
}

.adminConsulterArticleVideo iframe{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adminConsulterArticleVisuel{
    margin-bottom: 10%;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    padding: 5%;
}

.adminConsulterArticleVisuel img{
    width: 100%;
    height: 72vh;
    object-fit: cover;
    object-position: top;
}

.adminConsulterArticleVisuel p{
    font-size: 1.2vw; 
    font-family: Crimson; 
    margin-top: 5%; 
    font-style: italic;
}

.adminConsulterArticleDatePub{
    display: block;
    width: 77%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 12%;
    background-color: var(--backgroundColorDiv2);
}

.adminConsulterArticleExtrait{
    display: block;
    width: 77%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 12%;
    background-color: var(--backgroundColorDiv2);
}

.adminConsulterArticleExtrait h3{
    font-size: 1.3vw;
}

.adminConsulterArticleModifier{
    display: block;
    width: 77%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 12%;
    background-color: var(--backgroundColorDiv2);
}

.adminConsulterArticleModifier a{
    display: block;
    color: black;
    text-decoration: none;
    font-size: 1.3vw;
}

.adminConsulterArticleModifierLien1{
    margin-bottom: 13%;    
}

.adminConsulterArticleTraduction{
    display: block;
    width: 77%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 12%;
    background-color: var(--backgroundColorDiv2);
}

.adminConsulterArticleTraduction h3{
    font-size: 1.3vw;
    margin-bottom: 13%;
}

.adminConsulterArticleTraduction a{
    display: block;
    color: black;
    text-decoration: none;
    margin-bottom: 13%;
    font-size: 1.3vw;
}

.commArticle form{
    width: 98%;
}

.commArticle form textarea{
    background-color: white;
}


/* ***********************  ADMIN CREER ARTICLE ******************* */


.adminCreerArticleForm{
    font-size: 1.2vw;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.adminCreerArticleForm1{
    padding: 4%;
    font-size: 1.2vw;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    width: 77%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
}

.adminCreerArticleForm1 p{
    font-size: 1.2vw; 
    font-weight: bold; 
    margin-top: 9%;
}

.adminCreerArticleForm2{
    font-size: 1.2vw;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-right: 0%;
    height: 210vh;
}

.adminCreerArticleForm2 p{
    margin-bottom: 0;
}

#creer_article_titre{
    width: 95%;
    padding-top: 0.8%;
    padding-bottom: 0.8%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.0vw;
}

#creer_article_contenuArticle{
    width: 91%;
    height: 80vh;  
}

#creer_article_photographe{
    width: 89%;
}

#creer_article_videoArticle{
    width: 91%;
    padding-top: 0.8%;
    padding-bottom: 0.8%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.0vw;
    height: 22vh;
}

#creer_article_contenuArticle {
    width: 100%;
    height: 210vh;
    font-size: 1.3vw;
    padding-left: 3%;
    padding-top: 2%;
    padding-bottom: 1%;
    padding-right: 2%;
    font-family: Crimson;
    border: none;
    border-radius: var(--borderRadius);
  }

#creer_article_extraitArticle{
    width: 89%;
    padding-top: 0.8%;
    padding-bottom: 0.8%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.0vw;
    height: 13vh;
}

.required{
    margin-right: 11%;
    margin-left: 2%;
}

.adminCreerArticleBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}

/* ***********************  ADMIN MODIFIER ARTICLE ******************* */

.adminConsulterArticleRetour{
    width: 100%;
    font-size: 1.5vw;
    text-decoration: none;
    color: black;
}

.adminModifierArticleForm{
    border: var(--border);
    font-size: 1.2vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 4%;
}

.adminModifierArticleInfos{
    width: 76%;
    border: 1px solid black;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
}

.adminModifierArticleInfos p{
    margin-top: 4%;
    margin-bottom: 5%;
}

.adminModifierArticleInfos ul{
    text-align: left;
}

#modifier_article_titre{
    width: 97%;
    padding-top: 1.5%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #afadad;
    font-family: var(--policeTitre);
    text-align: center;
}

#modifier_article_contenuArticle{
    width: 100%;
    padding-top: 4%;
    padding-bottom: 1.5%;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 1.3vw;
    height: 80vh;
    background-color: white;
    font-family: Crimson;
    border: none;
}

#modifier_article_videoArticle{
    width: 80%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.0vw;
    background-color: white;
    font-family: Georgia;
}

#modifier_article_extraitArticle{
    width: 100%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 4%;
    padding-right: 4%;
    font-size: 1.2vw;
    height: 19vh;
    background-color: white;
    font-family: Crimson;
    border: none;
}

.adminModifierArticleFormText{
    font-style: italic;
    font-size: 0.9vw;
}

.adminModifierArticleBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}

.adminModifierArticleInfos{
    border: var(--border);
    padding: 7%;
    font-size: 1.0vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 8%;
}

#modifier_article_photographe{
    width: 50%;
}

#modifier_article_visuelBandeauArticle{
    margin-bottom: 2%;
}


/* ***********************  ADMIN SUPPRIMER ARTICLE ******************* */

.adminSupprimerArticle{
    display: block;
    width: 100%;
}

.adminSupprimerArticleFormulaire{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: var(--border);
    padding: 2%;
    font-size: 1.0vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 8%;
}

.adminSupprimerArticleArticle{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: var(--border);
    padding: 2%;
    font-size: 1.3vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 8%;
    text-align: justify;
    font-family: Crimson;
}

.adminSupprimerArticleBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}

#supprimer_article_supprimerArticle .required{
    font-size: 1.2vw;
}


/* ***********************  ADMIN TRADUIRE ARTICLE ******************* */

.adminTraduireArticleFinie{
    width: 100%;
    font-size: 1.5vw;
}

.adminTraduireArticleFormulaire{
    border: var(--border);
    padding: 4%;
    font-size: 1.2vw;
    margin-bottom: 6%;
    background-color: var(--backgroundColorBody);
    border-radius: var(--borderRadius);
}

.adminTraduireArticleTitreFr{
    display: block;
    width: 76%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 2%;
    padding-right: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5%;
    padding-bottom: 8%;
    padding-top: 8%;
    background-color: var(--backgroundColorBody);
    font-family: var(--policeTitre);
    font-weight: bold;
}

.adminTraduireArticleContenuFr{
    display: block;
    width: 76%;
    border: var(--border);
    border-radius: var(--borderRadius);
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 6%;
    text-align: justify;
    background-color: var(--backgroundColorBody);
    font-family: var(--policeContenu);
}

#traduire_article_anglais_titre,
#traduire_article_russe_titre,
#traduire_article_espagnol_titre
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#traduire_article_anglais_contenuArticle,
#traduire_article_russe_contenuArticle,
#traduire_article_espagnol_contenuArticle
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.3vw;
    font-family: Crimson;
    height: 115vh;
}

#traduire_article_anglais_extraitArticle,
#traduire_article_russe_extraitArticle,
#traduire_article_espagnol_extraitArticle
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.3vw;
    font-family: Crimson;
    height: 32vh;
}


/* ***********************  ADMIN MODERATION COMM ******************* */


.messagerieDiv{
    display: block;
}

.messagerieDiv h3{
    color: var(--fontColorTitle);
    font-size: 1.4vw;
    margin-top: 5%;
    margin-bottom: 4%;
}

.adminModerationCommentaireGlobal{
    display: block;
   /* border: var(--border);
    border-radius: var(--borderRadius);
    margin-bottom: 6%;
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 2%;
    background-color: #fff;
    margin-top: 4%;*/
}

.adminModerationCommentaireDiv{
    display: flex;
    border: 1px dotted black;
    margin-bottom: 3%;
  /*  background-color: #ecf0f140;*/
    border-radius: var(--borderRadius);
    padding: 2%;
    padding-left: 4%;
    background-color: white;
}

.adminModerationCommentairesCommentaire{
    display: block;
    flex:2;
    text-align: justify;
    padding-right: 5%;
}

.adminModerationCommentairesSupp{
    display: block;
    flex:1;
    margin-top: 8%;
}

.adminModerationCommentairesArticle{
    display: block;
    flex:1;
    margin-bottom: 15%;
}

.adminModerationCommentairesArticle h4{
    font-size: 1.2vw; 
    font-weight: bold;
}

.adminModerationCommentairesArticle a{
    font-size: 1.1vw;
}

.adminModerationCommentairesArtSupp{
    flex: 1.5;
    margin-top: auto;
    margin-bottom: auto;  
    border-left: 1px dotted black;
}

.adminModerationCommentairesArtSupp a{
    text-decoration: none;
    color: black;
    transition: 0.8s ease;
}

.adminModerationCommentairesArtSupp a:hover{
    color: var(--fontColorTitle);
}

#modifier_commentaire_contenuCommentaire{
    width: 100%;
    padding-top: 2.5%;
    padding-bottom: 3.5%;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 1.0vw;
    height: 40vh;
    background-color: white;
    font-family: Georgia;
    border: 1px solid gray;
}




/* ***********************  ADMIN MESSAGERIE ******************* */


.messagerieDiv{
    display: block;
    width: 100%;
}

.messagerieDiv h3{
    color: var(--fontColorTitle);
    font-size: 2.6vw;
    margin-top: 0%;
    margin-bottom: 4%;
    font-family: Bebas;
}

.adminMessagerieGlobal{
    display: block;
    margin-bottom: 6%;
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 2%;
    margin-top: 0%;
}

.adminMessagerieGlobal p{
    font-size: 1.3vw;
    font-family: var(--policeTitre);
}

.adminMessagerieDiv{
    display: flex;
    border: 1px dotted black;
    margin-bottom: 3%;
    background-color: #fff;
    border-radius: var(--borderRadius);
    padding: 2%;
    padding-left: 4%;
}

.adminMessagerieMessage{
    display: block;
    flex:2;
    text-align: justify;
    padding-right: 5%;
    background-color: #fff;
}

.adminMessagerieBouton{
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 1.2vw;
}

.adminMessagerieLienButton{
    background-color: #fff;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    padding: 1.5% 3%;
    text-align: center;
    transition: 200ms;
    width: fit-content;
    box-sizing: border-box;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.adminMessagerieLien{
    text-decoration: none;
    color: black;
    font-family: var(--policeTitre);
    font-size: 1.1vw;
}

.adminMessagerieLien:hover{
    color:black;
}

.adminMessagerieLienButton:not(:disabled):hover,
.adminMessagerieLienButton:not(:disabled):focus {
  outline: 0;
  background: #6fa3c178;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.adminMessagerieLienButton:disabled {
  filter: saturate(0.2) opacity(0.5);
  -webkit-filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}

/* ***********************  ADMIN SUPP COMM ******************* */


.commentaireCommentaireDiv{
    display:block;
    width: 100%;
}


.commentaireCommentaire{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: var(--border);
    padding: 2%;
    font-size: 1.0vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 8%;
    text-align: justify;
}

.commentaireCommentaireSupprimer{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: var(--border);
    padding: 2%;
    font-size: 1.0vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 8%;
}

.adminSupprimerCommentaireBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}


/* ***********************  ADMIN MODFIER COMM ******************* */

.modifierCommentaireDiv{
    display: block;
    width: 100%;
}

.modifierCommentaireCommentaire{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: var(--border);
    padding: 2%;
    font-size: 1.0vw;
    border-radius: var(--borderRadius);
    background-color: var(--backgroundColorDiv2);
    margin-bottom: 8%;
    text-align: justify;
}

.modifierCommentaireFormulaire{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.0vw;
    margin-bottom: 8%;
    text-align: center;
}

.adminMofifierCommentaireBouton{
    font-size: 1.1vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
}


/* *********************** ADMIN LES VIDEOS ******************* */

.adminOeuvreLienVideo{
    text-decoration: none;
    color: var(--fontColorTitle);
    transition: 0.8s ease;
}

.adminOeuvreLienVideo:hover{
    color: var(--fontColorHover);
}

.adminOeuvreVideo{
    width: 100%;
    display: flex;
    border: 1px solid black;
    margin-bottom: 5%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.adminOeuvreGauche{
    display: block;
    flex:1;
    padding-top: 3%;
    padding-bottom: 4%;
}

.adminOeuvreGauche h4{
    padding-bottom: 5%;
    font-size: 1.3vw;
    padding-left: 4%;
    padding-right: 4%;
    color: var(--fontColorTitle);
}

.adminOeuvreGauche p{
    padding-left: 10%;
    padding-right: 8%;
}

.adminOeuvreDroite{
    flex: 1;
    object-fit: cover;
    margin-top: auto;
    margin-bottom: auto;
}

.adminOeuvreDroite iframe{
    width: 86%;
    height: 46vh;
    object-fit: cover;
}

.adminVideosStats{
    width: 76%;
    border: 1px solid black;
    padding-left: 2%;
    padding-right: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-top: 7%;
    padding-bottom: 7%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.adminOeuvreGaucheTraduit{
    font-style: italic;
    text-align: center;
}

.adminOeuvreLienVideoDiv{
    justify-content: space-around;
    display: flex;
    margin-top: 6%;
}

.adminOeuvreGaucheContenu{
    text-align: justify;
}




/* ***********************  ADMIN CREER VIDEO ******************* */

.misEnAvant form{
    width: 100%;
}


.creerVideoForm{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.creerVideoPublier{
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    width: 93%;
    margin-bottom: 5%;
    border-radius: var(--borderRadius);
}

.creerVideoPublier h3{
    font-family: var(--policeTitre);
    font-size: 1.2vw;
    margin-top: 3%;
    margin-bottom: 3%;
}

.creerVideoAnglais,
.creerVideoEspagnol,
.creerVideoRusse
{
    border: 1px solid black;
    width: 88%;
    margin-bottom: 5%;
    background-color: var(--backgroundColorDiv2);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.creerVideoAnglais h3,
.creerVideoEspagnol h3, 
.creerVideoRusse h3
{
    font-family: var(--policeTitre);
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 1.2vw;
}

#creer_video_titreVideo{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#creer_video_presentationVideo{
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 45vh;
    border: none;
}

#creer_video_lienVideo{
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 30vh;
    border: none;
}

#creer_video_titreAnglais{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#creer_video_titreEspagnol{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#creer_video_titreRusse{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#creer_video_presentationAnglais,
#creer_video_presentationEspagnol,
#creer_video_presentationRusse
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 27vh;
}

.creerVideoBouton{
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
    font-size: 1.1vw;
    font-family: Georgia;
}

/* ***********************  ADMIN MODIFIER VIDEO ******************* */

.modifierVideoVideo{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.modifierVideoDivVideo{
    display: flex;
    gap: 5%;
}

.modifierVideoVideoGauche{
    flex:1;
}

.modifierVideoVideoGauche p{
    text-align: justify;
    padding-left: 5%;
}

.modifierVideoVideoGauche h3{
    margin-bottom: 5%;
    font-size: 1.5vw;
    margin-top: 2%;
}

.modifierVideoVideoDroite{
    flex: 1;
}

.modifierVideoForm{
    display: block;
    border: var(--border);
    width: 90%;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: var(--backgroundColorBody);
    border-radius: var(--borderRadius);
}

.modifierVideoForm p{
    margin-top: 4%; 
    font-size: 1.2vw;
}

.modifierVideoPublier{
    border: 1px solid black;
    width: 80%;
    margin-bottom: 5%;
}

.modifierVideoAnglais,
.modifierVideoEspagnol,
.modifierVideoRusse
{
    border: var(--border);
    width: 88%;
    margin-bottom: 5%;
    background-color: var(--backgroundColorBody);
    padding-top: 4%;
    padding-bottom: 4%;
    border-radius: var(--borderRadius);
}

.modifierVideoAnglais h3,
.modifierVideoEspagnol h3,
.modifierVideoRusse h3
{
    font-family: var(--policeTitre);
    font-size: 1.2vw;
    margin-top: 3%;
    margin-bottom: 6%;
}


#modifier_video_titreVideo,
#modifier_femme_nomFemme,
#modifier_femme_nomRusse
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#modifier_video_lienVideo{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 30vh;
}

#modifier_video_presentationVideo,
#modifier_femme_presentationFemme,
#modifier_femme_presentationAnglais,
#modifier_femme_presentationEspagnol,
#modifier_femme_presentationRusse
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 50vh;
}


#modifier_video_titreAnglais,
#modifier_video_titreEspagnol,
#modifier_video_titreRusse{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
}

#modifier_video_presentationAnglais,
#modifier_video_presentationEspagnol,
#modifier_video_presentationRusse{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 35vh;
}

.modifierVideoBouton{
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 3%;
    padding-right: 3%;
    margin-top: 5%;
    font-family: Georgia;
    font-size: 1.1vw;
}


/* ***********************  ADMIN CONSULTER VIDEO ******************* */

.adminConsulterVideoPubliee{
    width: 100%;
    font-size: 1.5vw;
}

.adminConsulterVideoVideo{
    margin-bottom: 10%;
    border: 1px solid black;
    padding: 5%;
}

.adminConsulterVideoDatePub{
    display: block;
    width: 61%;
    border: 1px solid black;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 12%;
}

.adminConsulterVideoModifier{
    display: block;
    width: 61%;
    border: 1px solid black;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8%;
    padding-bottom: 12%;
    padding-top: 12%;
}

.adminConsulterVideoModifier a{
    display: block;
    color: black;
    text-decoration: none;
    margin-bottom: 13%;
    font-size: 1.3vw;
}


/* ***********************  ADMIN SUPP VIDEO ******************* */

.suppVideoBouton{
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 3%;
    font-family: Georgia;
    font-size: 1.1vw;
}

#supprimer_video_supprimerVideo .required{
    margin-right: 5%;
    margin-left: 2%;
    font-size: 1.5vw;
    font-family: Crimson;
}

.suppVideoP{
    font-family: Crimson;
    font-size: 1.6vw;
    margin-bottom: 3%;
}




/* ***********************  ADMIN AJOUTER FEMME ******************* */


#ajouter_femme_nomFemme{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.2vw;
    font-family: Georgia;
    text-align: center;
}

#ajouter_femme_presentationFemme,
#ajouter_femme_presentationAnglais,
#ajouter_femme_presentationEspagnol,
#ajouter_femme_presentationRusse
{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1vw;
    font-family: Georgia;
    height: 50vh;
}

#ajouter_femme_nomRusse{
    width: 80%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
}



/* ***********************  ADMIN SUPP FEMME ******************* */



#supprimer_femme_estSupprimee .required{
    margin-right: 5%;
    margin-left: 2%;
    font-size: 1.5vw;
    font-family: Crimson;
}

.suppFemmeP{
    font-family: Crimson;
    font-size: 1.6vw;
    margin-bottom: 3%;
}




/* ################################ MEDIA QUERIES ORDI  ########################### */

@media only screen and (min-width: 1101px) {
    .headerOrdi {
        display: flex;
    }

    .headerMobile {
        display: none;
    }

}









/* ################################ MOBILE ############################### */


/* HEADER */

@media only screen and (max-width: 1100px) {
    .headerOrdi {
        display: none;
    }

    .headerMobile {
        display: flex;
        width: fit-content;
        position: sticky;
        border: none;
        background-color: #f8f9fa !important;
    }

    .headerMobile a{
        text-decoration: none;
        font-size: 5.5vw;
        margin-bottom: 10%;
        margin-left: 7%;
    }

    .headerMobile a img{
        width: 9%;
    }

    .btn-btn-lg-btn-primary {
        font-size: 2vw;
    }

    input{
        font-size: 3vw;
    }



    /* FOOTER */

    .footerDivs {
        display: block;
    }

    .footerLogo {
        width: 100%;
        text-align: center;
      }

      .footerLogo img {
        width: 50%;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 10%;
      }

      .footerCoordonnees {
        font-size: 4.2vw;
        border-bottom: 6px dotted white;
        padding-bottom: 8%;
      }

      .footerLiens {
        font-size: 4.2vw;
        text-align: center;
      }

      .navUserFooter,
      .navAdminFooter {
        padding-top: 9%;
      }

      .footerAdmin a {
        font-size: 3vw;
      }

      .footerMention p {
        font-size: 3vw;
      }


    /* NAV MOBILE */

    .navMobile{
        width: 100%;
        margin-top: 0;
        padding-top: 10%;
        padding-bottom: 10%;
    }

    .navbar{
        width: 100%;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }



    /* BANDEAU */

    .headerBandeau {
        height: 21vh;
    }


    /* BASE */

    .alert-message{
        font-size: 3.1vw;
    }


    .contenuGaucheDroite {
        display: block;
    }

    .contenuGauche {
        margin-left: 3.52%;
        margin-right: 3.52%;
    }

    .simpleParallax {
        height: 100%;
      }

      .headerBandeau img {
        height: 100%;
      }

      .divTitrePage h2 {
        font-size: 5vw;
      }


    /* INCLUDES */

    .includeAProposDeMoi {
        width: 93%;
        padding-right: 0%;
        padding-left: 0%;
    }

    .includeAProposDeMoi h3 {
        font-size: 4.4vw;
        margin-top: 7%;
        font-family: Bebas;
        letter-spacing: 0.1vw;
        margin-bottom: 0%;
    }

    .includeAProposDeMoi p {
        font-size: 2.6vw;
        text-align: justify;
        padding-left: 6%;
        padding-right: 6%;
        padding-bottom: 2%;
        padding-top: 4%;
    }

    .includeSuivezMoi {
        width: 93%;
    }

    .includeSuivezMoi h3 {
        font-size: 7vw;
    }

    .includeDemandePartitions {
        width: 93%;
    }

    .includeDemandePartitions h3 {
        font-size: 7.5vw;
    }

    .includeAProposDeMoi h3 {
        font-size: 6.4vw;
    }

    .includeAProposDeMoi p {
        font-size: 3.6vw;
    }

    .includeYoutube {
        width: 92%;
    }

    .includeYoutube h3 {
        font-size: 5.7vw;
    }

    .ecrireCommentaire form {
        width: 98%;
    }

    .ecrireCommentaire h3 {
        font-size: 2.5vw;
        margin-top: 3%;
        margin-bottom: 5%;
    }

    .inputCreerCommPrenom,
    .inputCreerCommEmail,
    .inputCreerCommContenu
    {
        padding-left: 4%;
        padding-right: 4%;
        font-size: 3vw;
    }

    .validerCommentaireBouton,
    .ecrireCommentaireAdminBouton,
    .adminModifierArticleBouton,
    .adminSupprimerArticleBouton {
        font-size: 4.1vw;
        margin-bottom: 3%;
        padding-left: 4%;
        padding-right: 4%;
        padding-top: 3%;
        padding-bottom: 3%;
    }

    .commentaire h4 {
        font-size: 3.6vw;
        margin-top: 4%;
    }

    .commentaire p{
        font-size: 3vw;
    }


    /* ACCUEIL */

    .articleChoisiDroite {
        height: fit-content;
        padding-top: 3%;
    }

    .articleChoisiDroite img {
        width: 100%;
        padding-left: 0;
        height: 29vh;
        object-fit: cover;
        object-position: top;
    }

    .misEnAvant {
        width: 92.7%;
        display: block;
        margin-top: 6%;
    }

    .accueilDerniereVideoPresentationH2 {
        font-size: 4.2vw;
    }

    .articleChoisiGauche h3 {
        font-size: 5.8vw;
        padding-left: 3%;
        padding-right: 3%;
    }

    .articleChoisiGauche p {
        font-size: 4.2vw;
        line-height: 119%;
        padding-left: 2%;
        padding-right: 2%;
    }

    .accueilDerniereVideo iframe {
        height: 22vh;
    }

    .accueilDernierArticle img {
        height: 33%;
    }

    .accueilDernierArticle {
        height: 15vh;
        width: 100%;
        background-repeat: round;
        border-top: var(--border);
        background-color: #ecf0f1;
    }

    .accueilDerniersArticles h2 {
        font-size: 4.2vw;
    }

    .accueilDernierArticle h5 {
        font-size: 2.6vw;
    }

    .accueilDernierArticle img {
        object-fit: cover;
        width: 100%;
        height: 72%;
        object-position: top;
    }

    .accueilDerniereVideoPresentationTexte h2 {
        font-size: 4.6vw;
    }

    .accueilDerniereVideoPresentationTexte {
        font-size: 4.2vw;
    }

    .footerAdmin p{
        font-size: 2.0vw;
    }

    .footerMention p{
        font-size: 3.0vw;
    }

    .footerCoordonnees {
        font-size: 4.2vw;
    }

    .footerLiens {
        font-size: 4.2vw;
    }

    .footerAdmin a{
        font-size: 4.0vw;
    }


    /* ARTICLES */

    .articlesArticleInfos {
        display: block;
      }

      .articleGauche{
        padding-left: 0;
        padding-right: 0;
      }

      .articleGauche h4 {
        font-size: 5.5vw;
        text-align: center;
        padding-left: 3%;
        padding-right: 3%;
      }

      .articleGauche p {
        font-size: 4.3vw;
        padding-left: 3%;
        padding-right: 3%;
        margin-right: 0;
      }

    .articleDroite {
        height: 31vh;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

    .articleTexte {
        font-size: 1.9vw;
        display: none;
      }





    /* ARTICLE */

    .consulterArticleMisEnAvantDiv a {
        font-size: 3.8vw;
    }

    .consulterArticle {
        line-height: 2.8vh;
        font-size: 5.2vw;
        font-family: Crimson;
      }

      .consulterArticle h2 {
        text-align: center;
        font-size: 6vw;
        margin-top: 5%;
        margin-bottom: 3%;
      }

    .consulterArticleVisuel {
        height: fit-content;
    }

    .consulterArticleVisuel{
        display: block;
    }

    .consulterArticleVisuel iframe {
        height: 60vh;
    }

    .consulterArticleVisuel img {
        height: 55vh;
    }

    .consulterArticlePhotographe {
        font-size: 3vw;
      }


    /* ADMIN ARTICLE */

    .adminConsulterArticleContenu h2 {
        font-size: 5vw;
      }

      .adminConsulterArticleVideo {
        font-size: 3vw;
      }

      .adminConsulterArticleVisuel img {
        height: 48vh;
      }

      #creer_commentaire_admin_contenuCommentaire {
        font-size: 3vw;
        padding: 0;
      }

      .adminConsulterArticleVideo {
        height: 40vh;
      }


      /* COMMENTAIRE USER */

      .ecrireCommentaire h3 {
        font-size: 4.5vw;
      }

      /* SUPP ARTICLE */

      .adminSupprimerArticleArticle {
        font-size: 3.3vw;
        line-height: 1;
      }


    /* CONTACT */

    #contact_message, #demander_partition_messageContact, #contact_messageContact {
        width: 87%;
        height: 20vh;
        font-size: 3.0vw;
    }

    #contact_email, #demander_partition_emailContact, #contact_emailContact {
        width: 87%;
        font-size: 3.0vw;
    }

    #contact_nom, #demander_partition_nomContact, #contact_nomContact {
        width: 87%;
        font-size: 3.0vw;
    }

    .ContactFormulaire p {
        font-size: 3.4vw;
        margin-top: 6%;
        margin-bottom: 6%;
        font-family: Crimson;
        margin-left: 2%;
        margin-right: 2%;
    }

    .contactBouton,
    button {
        font-size: 4.1vw;
        margin-bottom: 3%;
        padding-left: 4%;
        padding-right: 4%;
        padding-top: 3%;
        padding-bottom: 3%;
    }
    

    /* MENTIONS LEGALES */

    .mentionsLegales{
        font-size: 2.0vw;
    }

    .mentionsLegales p{
        font-size: 2.0vw;
    }

    .mentionsLegales li{
        font-size: 2.0vw;
    }

    .mentionsLegales li a{
        font-size: 2.0vw;
    }

    .mentionsLegales h3{
        font-size: 3.3vw;
    }

    .footerLiens a h1{
        font-size: 4.3vw;
    }

    /* LOG IN */

    #inputUsername {
        width: 79%;
        font-size: 3.2vw;
    }

    #inputPassword {
        width: 79%;
        font-size: 3.2vw;
    }


    /* INTERFACE ADMIN */

    .adminInterfaceDernierArticle h4{
        font-size: 3.3vw;
    }

    .adminInterfaceDernierArticleArticle img {
        height: 15vh;
    }

    .adminInterfaceDerniersPublies a h4 {
        font-size: 3.0vw;
    }

    .adminInterfaceArticleMisEnValeurDiv {
        display: block;
    }

    #modifier_auteur_photo1Auteur {
        width: 81%;
        overflow: hidden;
        font-size: 3vw;
    }

    .adminInterfaceAffichageCommentaires {
        width: 92%;
        margin-top: 10%;
    }

    .adminInterfaceArticleMisEnValeur h4 {
        font-size: 4.7vw;
        margin-top: 6%;
    }

    .adminArticleChoisiGauche h5{
        font-size: 4vw;
    }

    .adminArticleChoisiGauche p{
        line-height: 1.1;
        font-size: 3vw;
    }

    .adminArticleChoisiDroite img {
        width: 100%;
        height: 54%;
      }

    .adminInterfaceArticleMisEnValeurForm h4{
        font-size: 4.7vw;
    }

    .adminInterfaceArticleMisEnValeurForm form p{
        font-size: 3.1vw;
    }

    #mettre_un_article_en_valeur_articleChoisi, #mettre_lettre_en_valeur_LettreChoisie, #mettre_video_en_valeur_videoChoisie, #mettre_en_valeur_femme_estChoisie {
        font-size: 3vw;
    }

    .adminInterfaceArticleMisEnValeurForm button {
        font-size: 4.1vw;
        margin-bottom: 4%;
        margin-top: 3%;
    }

    .adminArticleChoisiDroite {
        height: fit-content;
      }

    .adminInterfaceArticleMisEnValeurForm h5 {
        font-size: 3.0vw;
    }

    .adminInterfaceStats h3 {
        font-size: 2.4vw;
    }

    .adminInterfaceAffichageCommentaires h4 {
        font-size: 4.7vw;
    }

    .adminInterfaceCommentaire h5{
        font-size: 3.1vw;
    }

    .adminInterfaceCommentaireP{
        font-size: 3.0vw;
    }

    .adminInterfacePhotoAccueil {
        height: fit-content;
        display: block;
    }

    .adminInterfacePhotoAccueilForm h3 {
        font-size: 4.7vw;
    }

    .adminInterfaceBoutonLien{
        font-size: 3vw;
    }

    .adminInterfacePhotoAccueilImg img {
        width: 88%;
        height: 35%;
    }

    .adminInterfaceArticleMisEnValeurForm button,
    .adminSupprimerCommentaireBouton,
    .adminMofifierCommentaireBouton,
    .nav-link active button,
    button {
        font-size: 4vw;
        padding-top: 3%;
        padding-bottom: 3%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .nav-link active button{
        font-size: 5.5vw;
    }

    #mettre_en_valeur_femme_choix{
        font-size: 3vw;
    }


    /* MODERATION */

    .adminModerationCommentaireDiv {
        display: block;
    }

    .adminModerationCommentairesCommentaire{
        font-size: 3vw;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .adminModerationCommentairesArticle{
        font-size: 3.2vw;
        margin-bottom: 5%;
    }

    .adminModerationCommentairesArticle a{
        font-size: 3.1vw;
    }

    .adminModerationCommentairesSupp {
        margin-bottom: 5%;
    }

    .adminModerationCommentairesArtSupp {
        border-left: none;
    }

    .adminModerationCommentairesArtSupp{
        font-size: 4.1vw;
    }

    .adminModerationCommentairesArticle h4{
        font-size: 3.2vw;
    }
    

    /* ARTICLES ADMIN */

    .adminArticleGauche h4 {
        font-size: 4.2vw;
        text-align: left;
    }

    .adminArticleGauche p {
        line-height: 119%;
        font-size: 3.2vw;
    }

    .adminArticleDroite {
        height: 25vh;
    }

    .adminArticleTexte {
        font-size: 2.0vw;
    }

    .adminArticlesStats {
        display:none;
    }
    

    /* ARTICLE ADMIN */

    .adminConsulterArticlePublie {
        font-size: 3.5vw;
    }

    .adminConsulterArticleContenu p {
        font-size: 4vw;
    }

    .adminConsulterArticleVisuel p{
        font-size: 3.2vw;
    }

    .ecrireCommentaireAdminBouton {
        font-size: 4.1vw;
        margin-bottom: 2%;
    }

    .adminConsulterArticleDatePub {
        display:none;
    }

    .adminConsulterArticleExtrait{
        display: none;
    }

    .adminConsulterArticleModifier a {
        font-size: 4.3vw;
    }

    .adminConsulterArticleTraduction h3 {
        font-size: 4.3vw;
    }

    .adminConsulterArticleTraduction a {
        font-size: 4.3vw;
    }

    .adminConsulterArticleModifier {
        width: 93%;
    }

    .adminConsulterArticleTraduction{
        width: 93%;
    }

    .adminConsulterArticleVisuel p{
        font-size: 3.2vw; 
    }

    .commentaire a {
        font-size: 3.2vw;
    }


    /* TRADUCTION */

    .adminTraduireArticleFinie {
        font-size: 3.5vw;
    }

    #traduire_article_anglais_titre, 
    #traduire_article_russe_titre, 
    #traduire_article_espagnol_titre {
        width: 93%;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        font-size: 3vw;
    }

    #traduire_article_anglais_contenuArticle, 
    #traduire_article_russe_contenuArticle, 
    #traduire_article_espagnol_contenuArticle {
        width: 93%;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        font-size: 3vw;
        height: 53vh;
    }

    #traduire_article_anglais_extraitArticle, 
    #traduire_article_russe_extraitArticle, 
    #traduire_article_espagnol_extraitArticle {
        width: 93%;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
        padding-right: 2%;
        font-size: 3vw;
        font-family: Crimson;
        height: 10vh;
    }

    .adminTraduireArticleFormulaire {
        font-size: 3.2vw;
    }

    .adminTraduireArticleTitreFr{
        margin-top: 10%;
        width: 93%;
        font-size: 4vw;
    }

    .adminTraduireArticleContenuFr {
        width: 93%;
        font-size: 3vw;
    }


    /* CREER ARTICLE */

    #creer_article_titre {
        font-size: 3vw;
    }

    #creer_article_contenuArticle {
        height: 61vh;
        font-size: 3.3vw;
    }

    .adminCreerArticleForm2 {
        margin-bottom: 8%;
    }

    .adminCreerArticleForm1 {
        width: 93%;
    }

    .adminCreerArticleForm1 p{
        font-size: 5.2vw;
        margin-top: 3%;
    }

    #creer_article_videoArticle {
        font-size: 3vw;
    }

    #creer_article_extraitArticle {
        width: 98%;
        font-size: 3vw;
    }

    #creer_article_categorieArticle .required{
        font-size: 3vw;
    }

    #creer_article_publierArticle .required{
        font-size: 3vw;
    }

    .adminCreerArticleBouton {
        font-size: 4.1vw;
    }
    

    /* MODIFIER ARTICLE */

    .adminConsulterArticleRetour {
        font-size: 2.5vw;
    }

    #modifier_article_titre {
        padding-top: 3.5%;
        padding-bottom: 1%;
        font-size: 2.8vw;
    }

    #modifier_article_contenuArticle {
        font-size: 3.0vw;
        height: 65vh;
    }

    .adminModifierArticleForm {
        font-size: 4.2vw;
    }

    .adminModifierArticleFormText {
        font-style: italic;
        font-size: 3.5vw;
        margin-left: 2%;
        margin-right: 2%;
    }

    #modifier_article_videoArticle {
        width: 90%;
        padding-top: 2.5%;
        padding-bottom: 2.5%;
        padding-left: 3%;
        padding-right: 3%;
        font-size: 3vw;
    }

    #modifier_article_photographe {
        width: 90%;
    }

    #modifier_article_extraitArticle {
        font-size: 4.2vw;
    }

    .adminModifierArticleBouton {
        font-size: 4.1vw;
    }

    .adminModifierArticleInfos{
        display : none;
    }


    /* SUPP ARTICLE */

    .adminSupprimerArticleFormulaire h3{
        font-size: 3.0vw;
    }

    #supprimer_article_supprimerArticle .required {
        font-size: 3.2vw;
    }

    .adminSupprimerArticleArticle p{
        font-size: 3vw;
    }

    .adminSupprimerArticleBouton {
        font-size: 4.1vw;
        margin-bottom: 2%;
    }

    .adminSupprimerArticleArticle h4 {
        font-size: 5vw;
    }

    /* MODIFIER COMM */

    .modifierCommentaireCommentaire h4{
        font-size: 4vw;
    }

    .modifierCommentaireCommentaire {
        font-size: 3vw;
    }

    #modifier_commentaire_contenuCommentaire {
        font-size: 3.5vw;
    }

    .adminMofifierCommentaireBouton {
        font-size: 4.1vw;
    }


    /* SUPP COMM */

    .commentaireCommentaire {
        font-size: 3vw;
    }

    .commentaireCommentaireSupprimer h4{
        font-size: 3.0vw;
    }

    .adminSupprimerCommentaireBouton {
        font-size: 4.1vw;
        margin-bottom: 5%;
    }


    /* VIDEOS */

    .adminOeuvreVideo {
        display: block;
    }

    .adminOeuvreGauche h4 {
        font-size: 4.7vw;
        padding-left: 5%;
        padding-right: 5%;
    }

    .adminOeuvreGauche p {
        padding-left: 6%;
        padding-right: 6%;
        font-size: 3vw;
    }

    .adminOeuvreLienVideoDiv {
        margin-bottom: 4%;
    }

    .adminVideosStats {
        display: none;
    }

    .adminOeuvreDroite iframe {
        height: 28vh;
    }

    .adminOeuvreLienVideo {
        font-size: 4vw;
      }

    .adminArticlesCreerArticle h4{
        font-size: 4vw;
    }


    /* CREER VIDEO */

    #creer_video_titreVideo {
        width: 97%;
        font-size: 3.1vw;
    }

    .creerVideoPublier {
        width: 100%;
    }

    #creer_video_presentationVideo {
        font-size: 3.1vw;
        height: 17vh;
    }

    #creer_video_lienVideo {
        font-size: 3.1vw;
        height: 11vh;
    }

    .creerVideoBouton {
        font-size: 4.1vw;
        margin-bottom: 6%;
    }

    .creerVideoAnglais, .creerVideoEspagnol, .creerVideoRusse {
        width: 93%;
        margin-left: auto;
        margin-right: auto;
    }

    .creerVideoAnglais h3, .creerVideoEspagnol h3, .creerVideoRusse h3 {
        font-size: 4.2vw;
    }

    #creer_video_titreAnglais,
    #creer_video_titreEspagnol,
    #creer_video_titreRusse {
        font-size: 3.1vw;
    }

    #creer_video_presentationAnglais, #creer_video_presentationEspagnol, #creer_video_presentationRusse {
        font-size: 3.1vw;
    }


    /* MODIFIER VIDEO */

    .modifierVideoVideoGauche {
        display: none;
    }

    .modifierVideoVideoDroite iframe {
        width: 100%;
        height: 30vh;
    }

    .modifierVideoForm {
        width: 100%;
    }

    #modifier_video_titreVideo, #modifier_femme_nomFemme, #modifier_femme_nomRusse {
        width: 89%;
        font-size: 3.0vw;
    }

    #modifier_video_lienVideo {
        width: 89%;
        font-size: 3.0vw;
        height: 18vh;
    }

    #modifier_video_presentationVideo, #modifier_femme_presentationFemme, #modifier_femme_presentationAnglais, #modifier_femme_presentationEspagnol, #modifier_femme_presentationRusse {
        width: 89%;
        font-size: 3.0vw;
        height: 44vh;
    }

    .modifierVideoBouton {
        font-size: 4.1vw;
    }

    .modifierVideoAnglais, .modifierVideoEspagnol, .modifierVideoRusse {
        width: 93%;
        margin-top: 8%;
        margin-left: auto;
        margin-right: auto;
        font-size: 3vw;
    }

    .modifierVideoAnglais h3, .modifierVideoEspagnol h3, .modifierVideoRusse h3 {
        font-size: 4.2vw;
    }

    #modifier_video_titreAnglais, #modifier_video_titreEspagnol, #modifier_video_titreRusse {
        font-size: 3.1vw;
    }

    #modifier_video_presentationAnglais, #modifier_video_presentationEspagnol, #modifier_video_presentationRusse {
        font-size: 3.1vw;
    }

    /* SUPP VIDEO */

    .misEnAvant form p{
        font-size: 3.6vw;
    }

    #supprimer_video_supprimerVideo .required {
        font-size: 3.5vw;
    }

    .suppVideoBouton {
        font-size: 4.1vw;
    }



    /* MESSAGERIE */

    .adminMessagerieLien {
        font-size: 2.1vw;
    }

    .messagerieDiv h3 {
        font-size: 4.6vw;
    }

    .adminMessagerieGlobal p {
        font-size: 2.3vw;
    }

    .adminMessagerieMessage h4{
        font-size: 3.0vw;
    }


    /* AJOUTER FEMME */

    #ajouter_femme_nomFemme {
        font-size: 3.2vw;
        width: 94%;
    }

    .creerVideoAnglais h3,
    .creerVideoEspagnol h3, 
    .creerVideoRusse h3
    {
        font-size: 2.8vw;
    }

    #ajouter_femme_presentationFemme, #ajouter_femme_presentationAnglais, #ajouter_femme_presentationEspagnol, #ajouter_femme_presentationRusse {
        width: 89%;
        font-size: 3.1vw;
        height: 13vh;
    }

    .creerVideoPublier{
        font-size: 3.2vw;
    }

    .creerVideoPublier h3 {
        font-size: 3.2vw;
    }

    #ajouter_femme_nomRusse {
        width: 89%;
    }



    /* MODIFIER FEMME */

    .modifierVideoForm p {
        font-size: 3.2vw;
    }

    /* SUPP FEMME */

    .suppFemmeP{
        font-size: 2.6vw;
    }

    #supprimer_femme_estSupprimee .required {
        font-size: 2.5vw;
    }


}