@charset "utf-8";
/* FONT FAMILY */
/*@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap");*/
/*@import url("https://fonts.googleapis.com/css2?family=Acme&family=Great+Vibes&display=swap");*/
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Marck Script", cursive;
  background-color: black;
  color: white;
  font-size: 62.5%;
}

/* NAVBAR - DESKTOP MODE */
.navbar input[type="checkbox"],
.navbar .hamburger-lines {
  display: none;
}

.navbar {
  box-shadow: 0px 5px 10px 0px #aaa;
  position: fixed;
  width: 100%;
  background: black;
  color: white;
  opacity: 1;
  height: 100px;
  z-index: 12;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.menu-items {
  order: 2;
  display: flex;
  flex-flow: row wrap;
}

.menu-items li {
  list-style: none;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.menu-items a:link,
.menu-items a:visited {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease-in-out;
}

.menu-items a:hover,
.menu-items a:active {
  color: #ffd871;
  transition: color 0.3s ease-in-out;
}

.logo {
  order: 1;
  font-size: 2.3rem;
  margin: 0.2rem;
}

.logo img {
  display: block;
  width: 100%;
}

.has-submenus {
  position: relative;
  color: white;
  cursor: pointer;
}

.has-submenus:after {
  content: "\025BC";
}

.has-submenus:hover > ul,
.has-submenus:focus > ul {
  display: block;
}

.has-submenus ul {
  display: none;
  position: absolute;
  padding: 5px 0px;
  min-width: 100%;
  border: 1px solid red;
  line-height: 2;
  white-space: nowrap;
  background-color: gray;
  border-radius: 5px;
}

.has-submenus ul a:hover,
.has-submenus ul a:active {
  color: black;
  transition: color 0.3s ease-in-out;
}

/*****
INDEX
*****/
.img_index {
  background-image: url(https://www.mllemilady.com/images/1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 90vh;
  position: relative;
}

.advise p {
	font-size: 1.6rem;
}

/*****
INDEX2
******/
.index2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	font-size: 1.6rem;
	grid-column-gap: 1.2rem;
}

.index2 img {
	display: block;
	aspect-ratio : auto;
	height: 800px;
}

.index2 p {
	font-size: 1.6rem;
}

/****************
MEMBERS SUBSCRIBE
*****************/
.members_subscribe {
	font-family: 'Arial Narrow';
}

.login_form {
	display: grid;
	grid-template-columns: 1fr;
}

.login_form label {
	font-size: 1.6rem;
	padding: 1.6rem 0;
}

.login_form input, select {
	font-size: 1.6rem;
	padding: 1.6rem 0.8rem;
	border-radius: 10px;
	width: 100%;
}

.login_form input[type="submit"] {
	display: inline-block;
	padding: 0;
	height: 4rem;
	margin-top: 3rem;
	color: black;
	background-color: #FFD871;
}

.login_form input[type="submit"]:hover {
	cursor: pointer;
	background-color: #E6C068;
}

/*******************
MEMBERS VERIFICATION
********************/
.members_informations {
display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 1.6rem;
  grid-row-gap: 1rem;
}

.form-revision {
	display: flex;
	justify-content: center;
	gap: 2rem;
}

.text-checkbox {
	font-size: 1.6rem;
}

.checkbox {
  display: grid;
  grid-template-columns: auto 4fr;
  margin-top: 1rem;
  grid-column-gap: 1rem;
}

.topmargin {
	margin-top: 1rem;
}

/**********
MEMBERS PAY
***********/
.members_payments {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1.2rem;
	grid-row-gap: 1.2rem;
	margin: 0 2rem 1.2rem;
	font-size: 1.6rem;
}

.members_subscribe p {
	font-size: 1.4rem;
	text-align: center;
}

/*************
QUESTIONNAIRE
*************/
.explications {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	font-size: 1.8rem;
	margin-top: 2.4rem;
}

.questionnaire,
.form_questionnaire {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 0.5rem;
	grid-row-gap: 1rem;
	font-size: 1.2rem;
	margin-top: 2.4rem;	
}

/***********
LES FORFAITS
************/
.lesforfaits {
	font-family: 'Arial Narrow';
}

.lesforfaits p {
  	line-height: 1.6;
	font-size: 1.6rem;	
}

.lesforfaits_prix {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
}

.lesforfaits_prix_box {
	border-radius: 11px;
	border: 2px solid #FFD871;
	/*background-color: #E6C068;
	color: black;*/
	margin: 2.4rem 0;
	font-size: 1.6rem;
}

.populaire {
  position: relative;
  overflow: hidden;
}

.populaire::after {
  content: "Meilleur";
  position: absolute;
  top: 14%;
  left: 7%;

  text-transform: uppercase;
  font-size: 1rem;
  color: white;
  background-color: red;
  padding: 0.4rem 8rem;
  transform: rotate(45deg);	
}

/***********
MESPLAISIRS
***********/
.mesplaisirs {
	font-family: 'Arial Narrow';
	display: grid;
	grid-template-columns: 0.5fr auto;
	grid-column-gap: 1.6rem;
	grid-row-gap: 1.6rem;
	font-size: 1.6rem;
	align-items: center;
}

.mesplaisirs img {
	height: 200px;
	aspect-ratio : auto;
	border-radius: 0.5rem;
	display: block;
	margin: 0 auto;
}


/************
MEMBERS AREA
************/
.membersform {
  display: flex;
  font-family: 'Arial Narrow';
  font-size: 2rem;
  flex-flow: column wrap;
  align-items: flex-start;
  gap: 1rem;
}

.membersform label {
  font-size: 2rem;
}

.membersform input {
  width: 100%;
  font-family: inherit;
  padding: 0.6rem;
  border-radius: 10px;
  font-size: 1.2rem;
  height: 50px;
}

.membersform input[type="submit"] {
  width: 400px;
}

/**************
VOIR POSSESSION
**************/
.voir_possession {
	display: grid;
	grid-template-columns: 2fr 3fr;
	font-family: 'Arial Narrow';
}

.voir_possession p {
	font-size: 1.6rem;
}

.voir_possession label {
	padding: 0.8rem 1.6rem;
	font-size: 1.6rem;
}

.possesssions_photo {
	display: block;
	width: 300px;
	aspect-ratio : auto;
	border-radius: 1rem;
	margin: 1rem auto;
}

.info_possession {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/*******
COMPTEUR
*******/
ul.counter { 
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin-left: 2rem;
  padding: 1rem 0;

  list-style: none;
  text-align: center;

}


ul.counter li span:first-child { 
   font-size: 1.2rem;  
   padding-bottom: 10px; 
   display: block;
   margin: 0;
   border-bottom: 1px solid red;
}

ul.counter li span:last-child{ 
   font-size: 1.2rem; 
   padding-top: 10px;
   padding-bottom: 40px;
   display: block;
   text-transform: uppercase;
}

/***
SIZE
****/
#size {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
	color:red;
}