@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/****************************************
                PAGE CHARGEMENT
*****************************************/

/*****************************************
                GENERAL
*****************************************/
body{
    margin : 0;
    padding: 0;
    color:#E6DFDF;
    background-color:black;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}

a{
    text-decoration:none;
    color:#E6DFDF;
    padding:0;
    margin:0;
}
H1,H2,H3,H4,H5{
    text-align:center;
    font-weight: 400;
    text-transform:uppercase;
    letter-spacing:2px;
}
H2{
    width:100vw;
    background-color:#3D1339;
}
#H2synopsis{
    width:100%;
}

/* Works on Chrome, Edge, and Safari */
body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: rgb(187 175 173 / 20%);
}
/************************************************
                    HEADER
************************************************/
header{
    height: 100vh;
    background-color:Black;
    background-image:url("img/1.png");
    background-size:cover;
}

#titre{
    top:35%;
    left:12%;
    width:76%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.bord1{
    z-index:99;
    position:absolute;
    border:solid 5px;
    border-color:#3D1339;
    border-style:double;
}

#bouton{
    top:75%;
    left:40%;
    width:20%;
    align-items:center;
    padding:0;
    background-color:#3D1339;
}

#bouton:hover{
    Box-shadow:10px 0px 10px white,-10px 0px 10px white;
    background-color:#6A2262;
}

/*****************************************
                NAV
******************************************/
#lienlogo{
    width:10%;
    display:flex;
    align-items:center;
    margin:10px;
}
#logo{
    width:100%;
    height:auto;
}
nav input[type=checkbox], .nav-mobile {
	display: none;
}
nav{
    color:#E6DFDF;
    position:fixed;
    top:0;
    width:100%;
    background-color:#3D1339;
    opacity: 93%;
    z-index:99;
    height:75px;
    display : flex;
    align-items:center;
    justify-content: end;
}
#nav{
    margin:0;
    padding:0;
    display:flex;
    list-style-type:none;
}
.choixnav{
    padding:10px;
    text-transform:uppercase;
    color:#E6DFDF;
}
.choixnav:hover{
    background-color:#6A2262;
    cursor:pointer;
    Box-shadow:10px 5px 5px black;
}

/******************************************
                MAIN
******************************************/
main{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:center;
}
#info,#modalites{
    display:flex;
    flex-direction:column;
    width:80%;
}
#synopsis,#formu{
    display:flex;
    flex-direction:column;
    width:100%;
}

.center{
    text-align:center;
}
/*INFORMATIONS*/
#info{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.armoire{
    display : flex;
    flex-direction:row;
    width:100%;
    height:30vh;
    margin-top:25px;
    margin-bottom:25px;
}
.casier1{
    display:flex;
    flex-direction : column;
    width:25%;
    height:100%;
    text-align:center;
}
.bordure{
    border-right:2px solid #6A2262;
}
.picto{
    object-fit:contain;
    height:50%;
}
#bouton2{
    justify-content:center;
    width:auto;
    padding:0;
    background-color:#3D1339;
    border:solid 5px;
    border-color:#3D1339;
    border-style:double;
}

#bouton2:hover{
    Box-shadow:10px 0px 10px white,-10px 0px 10px white;
    background-color:#6A2262;
}

/*SYNOPSIS*/
#synopsis{
    display:flex;
    flex-direction : row;
    width:100%;
    align-items:center;
}
#imgsyn{
    width:50%;
    object-fit:contain;
}
#demisyn{
    margin-left:50px;
    width:50%;
    display:flex;
    flex-direction:column;
}

/*MODALITES*/
#modalites{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.armoire2{
    width:100%;
    height:30vh;
    text-align:center;
    display:grid;
    grid-template-columns:30% 5% 30% 5% 30%;
    grid-template-rows:45% 10% 45%;
    grid-template-areas:
   "Q1 . Q2 . Q3"
   "R1 . R2 . R3";
}
#Q1{
    grid-area:Q1;
}
#R1{
    grid-area:R1;
}
#Q2{
    grid-area:Q2;
}
#R2{
    grid-area:R2;
}
#Q3{
    grid-area:Q3;
}
#R3{
    grid-area:R3;
}

.casier3{
    display:flex;
    flex-direction : column;
    Margin:20px;
    width:100%;
    height:100%;
    text-align:center;
}
/*FORMULAIRE*/

#formu{
    align-items:center;
    background-image:url("img/3.jpg");
    background-size:cover;
    background-repeat: no-repeat;
}
#blanc{
    height:100%;
    width:50%;
    color:#E6DFDF;
    background-color:rgb(106 34 98 / 50%);
    padding:10px;

}
.entete{
    color:#E6DFDF;
}
input[type="radio"],input[type="checkbox"]{
    margin-bottom: 20px;
    padding:5px;  
    Background-color : rgb(106 34 98 / 70%);
    border:none;
}
input[type="text"], input[type="tel"], input[type="date"], input[type="number"], textarea[type="Msg"],input[type="submit"] {
    margin-top: 5px;
    Width: 100%;
    margin-bottom: 15px;
    padding:5px; 
    Background-color : rgb(106 34 98 / 70%);
    border:none;
    color:#E6DFDF;
}

input[type="submit"]:hover{
    background-color :#6A2262;
    font-weight:700;
    box-shadow: 1px 1px 10px 1px white;
}
input::placeholder,textarea::placeholder {
    color: #E6DFDF;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;

}

#coteacote{
    display : flex;
    flex-direction: row;
    width:50%;
    Margin-left:25%;
    border:#E6DFDF double 5px;
}
#captcha{
    margin:0;
    padding:0;
    width:50%;
}
#imgcaptcha{
    width:50%;
}
#inval{
      font-weight: 700;
      color : red;
}

/**************************************************************
                        STYLE FOOTER
***************************************************************/
footer{
	width:100%;
	Height:auto;
	Background-color:#3D1339;
    color:#E6DFDF;
    display:flex;
    flex-direction:column;
    text-align:center;
    justify-content:space-around;
    align-items:center;
}

.copyright{
    margin-bottom:0;
}


/********************************************
                    TABLETTE OU PETITS ECRANS
********************************************/
@media screen and (min-width:600px) and (max-width:1024px){
    

}



/********************************************
                    TELEPHONE
********************************************/
@media screen and (max-width:599px){

    #H2synopsis{
    width:100vw;
}
/*****HEADER****/
        header{
            width:auto;
            height:auto;
        }
        #titre{
            position:relative;
            margin-top:80px;
            left:12%;
        }
        #bouton{
            position:relative;
            width:50%;
            margin:auto;
            left:0;
        }
/*****NAV*****/
        nav{
            display:inline;
            background-color:transparent;
            height:auto;
            width:auto;
            margin-top:0;
            right:0;
        }
        #nav{
            display:none;
            position:absolute;
        }
        .nav-mobile {
            display: inline;
            color:  white;
            font-size:8vw;
            cursor: pointer;
            }
        nav input[type=checkbox]:checked ~ #nav
         {
            display: flex;
            flex-direction:column;
            justify-content:flex-start;
            align-items:flex-start;
            background-color:#212121;
            right:0;
        }
        .choixnav{
            width:100%;
        }
/*SECTION INFO*/
.armoire{
    flex-direction:column;
    align-items:center;
    width:100%;
    height:auto;

}
.bordure{
    border:none;
}
.casier1{
    align-items:center;
    width:50%;
    height:auto;
}
.picto{
    width:50%;
}

/*SECTION SYNOPSIS*/
#synopsis{
    flex-direction : column;
}
#imgsyn{
    width:80%;
    object-fit:contain;
}
#demisyn{
    margin:0px;
    width:80%;
    text-align:center;
    display:flex;
    align-items:center;
}

/*SECTION MODALITES*/
.armoire2{
    width:100%;
    height:auto;
    display:grid;
   grid-template-columns:100%;
   column-gap:0%;
   grid-template-rows:5% 10% 20% 10% 20% 10% 20% 5% ;
   grid-template-areas:
   "."
   "Q1"
   "R1"
   "Q2"
   "R2"
   "Q3"
   "R3"
   ".";
 }

}