@charset "UTF-8";
/*BODY*/
    body {margin: 0; padding: 0; background-color:rgb(215, 197, 197) ;font-size: 1em; font-family: "Texturina", serif;
    font-optical-sizing: auto; font-weight: 300;font-style: normal; }


/*HEADERTOP*/
    div#header-top {width:100%; height: 200px; background-image: url(img/bandeauraregem.jpg);}
    header {margin: 0 auto; width: 1140px;}

/*HEADER*/
    header img {padding: 3px;}
    header a {float: right;}
    header h1 {margin:0; padding:1.7em; text-align: center; color: aqua;}
    header a {text-decoration: wavy;}
    header h1:hover {color: #eaea44;}

/*NAV*/
    nav {text-align: center; background-color: black;}
    nav p {margin: 0; line-height: 4em; font-size: 1.4em;}
    nav a {margin: 100px; font-size: 0.8em; font-weight: bold; text-decoration: wavy;}
    nav a:link {color: white ;}
    nav a:visited {color: #99949b;}
    nav a:hover {color: #ff5cb3;}
    nav a:active {color: #f40b0b;}

/*SECTION INDEX*/
    div#section-center {padding: 15px; width: 100%; background-image: url(img/background.jpg);}
    section {margin:0 auto; width: 1140px;}
    section h2 {text-align: center;}
    section h3 {padding: 2em;}
    section p {font-weight:bold; font-size:2em; text-align:center;   color: #f2efef;} 
    div#zone-articles {display: flex;}
    section article {width: 30%; display: inline-block; text-align:center ;}
    section article img { width: 270px; border-radius: 20px; display:inline-block;}

/*SECTION CONTACT*/
    div#contact-section {margin: 0 auto; width: 1140px; background-image: url(img/background.jpg);}
    div#contact-section h1 {text-align: center; text-decoration: underline; color: #ffff;}
    div#contact-section p {margin-top: 5px; font-size: 1em; color: #ffffff;text-transform:capitalize; text-align: center;}
    div#contact-section form {margin-top: 20px;}
    div#contact-section fieldset { margin:0 auto; width: 70%; height: 500px; border-width: 9px; border-color: #ff6600;  background-color: #d5a2a2;}
    div#contact-section legend {font-weight: bold; font-size: 1.5em; text-align:center ; text-transform: uppercase; color: #22ff05;}
    div#contact-section label, input {margin-top: 20px; margin-left: 10px;font-size: 1em; font-weight: bold; display: flex;}
    
  
/*SECTION A-PPOPOS*/
    div#a-propos-section {margin: 0 auto; margin-top: 2px; margin-bottom: 8px; padding: 5px; width: 1140px; border: 2px solid black; background-image: url(img/background.jpg);}
    div#a-propos-section h1 {text-align: center; text-decoration: underline; color: #ffff;}
    div#a-propos-section h2 {margin-top: 45px; font-size: 1.3em; font-weight: 400; text-transform: uppercase; text-decoration: underline; text-align: left;}
    div#a-propos-section figure {float: right;}
    div#a-propos-section figcaption {font-size: 1.2em; font-weight: bold;}
    div#a-propos-section p {margin: 2px; font-size: 2em; font-weight: 400; text-align: left;}

/*DIV FILM-TV-SHOW*/
    div#film-tv-show {width: 100%; border: 2px solid black; background-image: url(img/background.jpg);}
    div#film-tv-show section {display: flex; margin-top: 5px; width: 1140px;} 
     div#film-tv-show h1 {text-align: center; text-decoration: underline; color: #ffff;}
    div#film-tv-show article {margin-top: 9px; }
    div#film-tv-show img {margin-top: 40px; width: 300px; height: 300px; border-radius: 0%; border: 3px solid black;}
    div#film-tv-show p {font-size: 22px; text-align: center; font-weight: bold;color: white;}
/*DIV MUSIQUES*/
    div#musiques {width: 100%; display: block; border: 2px solid black; background-image: url(img/background.jpg);}
    div#musiques h1 {text-align: center; text-decoration: underline; color: #ffff;}
    div#musiques article {margin-top: 7px; width: 100%; display: flex; align-items: center;}
    div#musique img {margin-right: 15px; width: 150px; padding:5px; border-radius: 0%; border: 3px solid black; float: left;  }
    div#musique p {font-size: 1.2em; text-align: center; font-weight: bold; color: white;}
    
/*DIV NOS-PRODUITS*/
   div#nos-produits {width: 100%; display: flex; border: 2px solid black; background-image: url(img/background.jpg);}
   div#nos-produits h1 {text-align: center; text-decoration: underline; color: #ffff;}
    div#nos-produits article {width: 1140px; display: flex;}
    div#nos-produits article img {margin-top: 60px; width: 400px; border-radius: 0%; border: 3px solid black; float: left;}
    div#nos-produits p {margin-top: 90px; font-size: 1.5em; color: white;}

/*DIV EMPLACEMENT*/
   div#emplacement {margin: 0 auto; width: 100%; border: 2px solid black; background-image: url(img/background.jpg);}
   div#emplacement h1 {text-align: center; text-decoration: underline; color: #ffffff;}
   div#emplacement iframe {margin-top: 19px; width: 1140px;}

/*DIV SE-CONNECTER*/
    div#se-connecter {margin: 0 auto; width: 100%; background-image: url(img/background.jpg);}
    div#se-connecter h1 {margin-top: 0; text-align: center; text-decoration: underline; color: #ffff;}
    .container {display: flex; justify-content: center; width: 1140px; padding: 20px;}
    div#se-connecter form {margin: o auto; padding: 4px; width: 1140px;}
    main {width: 30%; background: #c01414; padding: 3px; border-radius: 10px}
    aside {margin-left: 10px; padding: 30px; width: 50%; border-radius: 10px; background: #c01414;}
    div#se-connecter fieldset {width: 300px; height: 500px; border: 2.5px solid black; background-color: #ffff ;}
    div#se-connecter legend {font-size: 1.3em; font-weight: bold; text-align: center; text-transform: uppercase; color: rgb(51, 0, 255);}
    div#se-connecter label, input {font-size: 1.1em; font-weight: bold; margin-top: 3px; margin-bottom: 2px;}
    div#se-connecter input {border: 6px solid #463c75; ; background-color: #d4d4d4;}
    div#se-connecter button {margin-top: 9px; font-size: 1.5em; font-weight: bold; border-radius: 5px; color: #ffff; background-color: #ea0085;}
    
/*PANIER*/
    div#panier {width: 100%; background-image: url(img/background.jpg);}
    div#panier section {margin: 0 auto; width: 1140px; padding: 5px; }
    div#panier h1 {margin: 0; text-align: center; text-decoration: underline; color: #ffff;}
    div#panier form {width: 1140px}
    div#panier fieldset {margin: 0 auto; margin-top: 7px; width: 70%; height: 600px; border-width: 3px; border-color: #ff6600;  background-color: #d5a2a2;}
    div#panier input, label {margin-top: 0.9px;  margin-bottom: 0.9px; }
    div#panier label {font-size: 1em; font-weight: bold;}
    div#panier button {margin-top: 2px; font-size: 0.9em; font-weight: bold; border-radius: 2px; color: #ffff; background-color: #ea0085;}
    div#panier img {float: right;}

/*FOOTER BOTTOM*/
    div#footer-bottom {width: 100%; background-color: #9325c1;}
    footer {margin:0 auto; padding: 15px; width: 1140px;}
    blockquote { padding: 4px; font-size: 1.6em; font-style: italic; text-decoration:dotted; text-transform: uppercase;  text-align:center;}
    footer p {text-align: right; color: black;}
    footer a:hover {color: #ffff;}


/*STYLE PERSO*/
    .textedroite {text-align: right;}
    .textecentre {text-align: center;}
    .splash-regular {font-family: "Splash", cursive; font-weight: 400; font-style: normal;}
    .flottergauche {float: left;}
    .bordure {border: 5px solid #d4d4d4; border-radius: 30px;}
    .colorp {font-size: 0.8em; color:#c01414; text-align: right;}
    .input {width: 100px; height: 17px;}