/*
styles.css
par tidann
 */

/* Variables */

:root {
  --card-bg-color: white;
  --text-color: black;
  --h3-color: grey;
  --image-brightness: 1;
  --blurred-image-brightness: 0.85;
  --link-color: rgb(49, 168, 240);
  --previsualisation-article-bg-color: #f4f4f4;
  --gradient-bg: linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
  --red-gradient-bg: linear-gradient(45deg, #d7b062 5%, #e98974 30%, #d82727);
}

[data-theme="sombre"] {
  --card-bg-color: #333;
  --text-color: white;
  --h3-color: lightgrey;
  --image-brightness: 0.8;
  --blurred-image-brightness: 0.45;
  --link-color: lightgrey;
  --previsualisation-article-bg-color: #3e3e3e;
  --gradient-bg: linear-gradient(45deg, rgba(91,99,81,1) 5%, rgba(98,119,116,1) 30%, rgba(59,66,89,1) 100%);
  --red-gradient-bg: linear-gradient(45deg, rgba(187,177,157,1) 5%, rgba(191,162,156,1) 30%, rgba(195,80,80,1) 100%);
}

/* Page */

body
{
  margin: 0px;
  background-color: #4779b3;
  background-image: url("images/overlay2.png"), url("images/overlay3.svg"), var(--gradient-bg);
  background-position: top left, center center, center center;
  background-size: auto, cover, cover;
  background-attachment: fixed;
}

#image-logo
{
  width: 60%;
  height: 300px;
  margin: auto;
  background-image: url(../../images/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position:center bottom;
}

.bloc-page
{
  margin: auto;
  width: 60%;
}

.carte
{
  background-color: var(--card-bg-color, white);
  color: var(--text-color, black);
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  font-family: 'Quicksand', 'Arial';
  text-align: justify;
  word-wrap: break-word;
}

.carte.image
{
  padding: 0px;
  background-color: transparent;
}

/* Page d’article */

.carte.carte-image-article {
  overflow: hidden;
}

img.image-article
{
  margin: auto;
  display: block;
  max-width: 700px;
  border-radius: 0;
  transition: transform 0.3s;
}


img.image-article:hover {
  transform: scale(1.1);
}

.conteneur-image-article {
  position: relative;
}

.bg-image-article {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  right: auto;
  left: auto;
  z-index: -1;
  background: url("../../images/contact.png");
  background-size: cover;
  background-position: center;
  filter: blur(15px) brightness(var(--blurred-image-brightness));
  transform: scale(1.05);
}

.carte.titre-article h2
{
  margin: 0px;
  margin-top: 10px;
  text-align: center;
}

.carte.titre-article h3
{
  margin: 0px;
  margin-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}

.carte.titre-article h4
{
  margin: 0px;
  margin-bottom: 10px;
  text-align: center;
}

.carte.titre-liste-articles h2
{
  margin: 0px;
  margin-top: 10px;
  text-align: center;
  font-weight: normal;
  font-size: 2.5em;
}

/* Navigation */

nav {
  transition: height 0.3s, box-shadow 0.3s;
}

#nav-remplacement {
  display: none;
  height: 90px;
  transition: height 0.7s;
}

.en-haut {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 87%;
  box-shadow: 0 0 8px black;
}

.menu {
  text-align: left;
  font-size: 2em;
  display: flex;
  padding-left: 10px;
}

.menu span {
  margin-left: -33px;
  text-align: center;
  width: 100%;
  display: block;
}

.menu i {
  margin-top: 6px;
  margin-left: 13px;
  transition: transform 0.3s;
}

nav ul
{
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  padding: 0px;
  margin: 2px;
}

nav li
{
  font-family: 'Source Sans';
  font-size: 1.7em;
  border-radius: 5px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 10px;
  padding-left: 10px;
  -webkit-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}

.first {
  animation-delay: 0s;
}
.second{
  animation-delay: 0.1s;
}
.third {
  animation-delay: 0.2s;
}
.fourth {
  animation-delay: 0.3s;
}
.fifth {
  animation-delay: 0.4s;
}

.nav-element {
  animation-duration: 0.5s;
}

#mode-switch {
  font-size: 30px;
  color: var(--text-color, black);
}

#mode-switch:hover, #mode-switch a:hover{
  background-color: transparent;
  transition: color 1s;
}

#mode-switch a:hover{
  color: var(--text-color, black);
}

nav li:hover
{
  background-color: #d8d8d8;
  -webkit-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}

nav li a
{
  text-decoration: inherit;
  color: inherit;
  border-bottom: none;
}

nav li a:hover
{
  color: black;
}

/* Titres */

h1, h2
{
  font-family: 'Typoliner';
}

h3, h4
{
  font-family: 'Source Sans';
}

h1
{
  font-size: 3.5em;
  margin-top: 2px;
  margin-bottom: 2px;  
  font-weight: normal;
}

h2
{
  font-size: 2.7em;
  margin-top: 2px;
  margin-bottom: 2px;  
}

h3
{
  font-size: 1.8em;
  color: var(--h3-color, grey);
  margin-top: 2px;
  margin-bottom: 2px;  
}

h4
{
  font-size: 1.4em;
  margin-top: 2px;
  margin-bottom: 2px;  
}

/* Texte */

p
{
  font-family: 'Quicksand', sans-serif;
  font-size: 1.1em;
  text-align: justify;
  margin-top: 3px;
}

p strong
{
  font-weight: bold;
}

p strong i
{
  font-weight: bold;
  font-style: italic;
}

p i
{
  font-style: italic;
}

p i strong
{
  font-weight: bold;
  font-style: italic;
}

a
{
  color: var(--link-color, black);
  text-decoration: none;
  border-bottom: 2px;
  border-bottom-style: dotted;
  border-bottom-color: var(--link-color, rgb(49, 168, 240));
}

.texte-article {
  font-size: 1.2em;
}

.texte-article img {
    margin: auto;
    max-width: 700px;
    display: flex;
}

/* Médias dans le texte */

img
{
  border-radius: 20px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  max-height: 2000px;
}

/* Formulaire */

form
{
  font-family: 'Quicksand', 'Arial';
  margin-bottom: 10px;
}

.corps-formulaire
{
  display: flex;
  justify-content: space-around;
}

fieldset
{
  border-radius: 15px;
  border: 2px solid lightgrey;
  margin: 5px;
}

select
{
  /*border: 2px solid lightgrey;
  padding: 5px;
  margin-bottom: 5px;
  height: 40px;
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
  background: transparent;
  overflow: hidden; */
  
}

.style-select
{
  background: url(images/fleche-select.png) no-repeat 96% 0;
  height: 29px;
  overflow: hidden;
  width: 240px;
  border-radius: 10px;
  border: 2px solid lightgrey;
  margin-bottom: 5px;
}


.style-select select
{
  border: none;
  background: transparent;
  font-size: 14px;
  padding: 5px;
  width: 268px;
  color: var(--text-color, black)
}

input, textarea
{
  border-radius: 10px;
  border: 2px solid lightgrey;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  -webkit-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
  background-color: var(--card-bg-color, white);
  color: var(--text-color, black)
}

input.bouton.plein:disabled
{
  background-image: none;
  background-color: grey;
}

textarea
{
  width: 300px;
  max-width: 300px;
  min-width: 300px;
  max-height: 300px;
  min-height: 100px;
  margin-bottom: 15px;
}

input[type="text"], input[type="password"], input[type="email"]
{
  display: block;
  margin-bottom: 10px;
  max-width: 300px;
}

input[type="submit"]:hover
{
  color: white;
  background-image: var(--gradient-bg);
}

input[type="button"]:hover
{
  color: white;
  background-image: var(--gradient-bg);
}

input[type="reset"]:hover
{
  color: white;
  background-image: var(--gradient-bg);
}

.bloc-case-cocher
{
  display: block;
}

input[type="file"]
{
  margin-bottom: 10px;
}

#label-block
{
  display: block;
  margin-top: 10px;
}

#previsualisation-creation-article
{
  border: 3px solid lightgrey;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 5px;
  word-wrap: break-word;
}

/* Ajustements affichage */

div[style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"]
{
  width: 0px;
  height: 0px;
}

[data-aos^="fade"][data-aos^="fade"].carte {
  transition-property: color, background, opacity,transform;
}

/* Liste d'articles */

.liste-articles
{
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  margin-top: 11px;
}

a.image
{
  border: 0px;
}

img
{
  transition: transform .2s;
  filter: brightness(var(--image-brightness));
}

a > img:hover
{
  transform: scale(1.05);
}

article h1
{
  font-size: 2.5em;
  margin: 2px;
}

article h3
{
  font-size: 1.7em;
  margin: 2px;
  text-transform: uppercase;
}

article h4
{
  font-size: 1.4em;
  margin: 2px;
}

article
{
  background-color: var(--card-bg-color, white);
  border-radius: 20px;
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  color: var(--text-color, black)
}

.conteneur-mini-article
{
  max-width: 50%;
  margin-bottom: 15px;
}

.conteneur-mini-article article {
	height: 97%;
	display: flex;
	flex-direction: column;
}

.bouton
{
  display: block;
  margin: 10px;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border: 4px solid lightgrey;
  font-family: "Quicksand", "Arial";
  text-align: center;
  font-size: 1.2em;
  border-radius: 12px;
  color: var(--text-color, black);
  -webkit-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}

.bouton:hover
{
  color: white;
  background-image: var(--gradient-bg);
}

.bouton.plein
{
  color: white;
  background-image: var(--gradient-bg);  
}

.bouton.plein.rouge
{
  background-image: var(--red-gradient-bg);  
}

a.bouton
{
  border: 4px solid lightgrey;
}

a.bouton.voir-article
{
  font-size: 2em;
}

a.bouton i {
	margin-right: 10px;
	margin-left: 10px;
  transition-duration: 0.5s;
}

.espace {
  display: block;
  margin: auto;
}

/* Tableaux */

table 
{
  border-collapse: collapse;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

table, th, td 
{
  border-bottom: 1px solid lightgrey;
}

th, td
{
  padding-left: 10px;
  text-align: left;
  font-family: 'Source Sans';
  height: 50px;
}

th
{
  font-size: 1.5em;
  color: white;
}

td
{
  color: grey;
  font-size: 1.2em;
  min-width: 200px;
  padding-right: 20px;
}

tr:first-child
{
  background-image: var(--gradient-bg);  
}

tr:nth-child(even)
{
  background-color: #ddd;
}

tr:hover 
{
  background-color: lightgrey;
}

.style-table
{
  overflow-x: auto;
}


/* Pied de page */

footer.carte
{
  background-color: #474646;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  color: grey;
}

#blocs-footer
{
  display: flex;
  justify-content: space-around;
}

footer section
{
  margin: 10px;
}

#copyright p
{
  text-align: center;
}

footer a {
  color: grey;
  border-bottom-color: grey;
}

/* Notifications */
.notification
{
	position: fixed;
	bottom: 10px;
	left: -1000px;
	background-color: black;
	color: white;
	padding: 15px;
	padding-left: 25px;
	font-family: 'Source Sans';
	font-size: 1.8em;
	opacity: 0;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	transition-property: left;
	transition-duration: 1s; 
	transition-delay: 0.4s;
	transition-timing-function: ease;
	overflow: hidden;
	display: flex;
  z-index: 100;
}

.notification:target
{
	left: -10px;
	opacity: 1;
	overflow: visible;
}

.bouton-fermer
{
	margin-left: 10px;
	border: none;
}

.succes
{
	background-color: green;
}

.erreur
{
  background-color: red;
}

.info
{
  background-color: blue;
}

/* Compte et modification de compte */

#image-infos-compte
{
  display: flex;
  flex-direction: column;
  margin: 10px;
}

#image-infos-compte *
{
  margin: auto;
  text-align: center;
}

#image-compte
{
  width: 150px;
  height: 150px;
}

#formulaire-motdepasse-changement
{
  display: flex;
}

#formulaire-motdepasse-changement input[type="button"]
{
  margin: 0px;
  margin-left: 5px;
  margin-right: 5px;
  height: 44px;
}

/* Initialisation de compte */

.page
{
  display: none;
}

.page:target
{
  display: block;
}

/* Edition d'articles */
.actions-edition-articles
{
  flex-direction: row;
}

#chargement-modification-article
{
  width: 50px;
  height: 50px;
  margin: auto;
  margin-bottom: 15px;
}

#textes-modification-article
{
  margin-right: 20px;
}

#icone-visibilite, #icone-publication
{
  width: 24px;
  height: 24px;
  margin: auto;
  margin-bottom: -7px;
}

#icone-publication
{
  margin-left: 5px;
}

#categoriesArticleAModifier
{
  display: none;
}

#texteDescriptionChargementImage
{
  margin-top: 10px;
}

label.previsualisation-article {
  min-height: 25px;
  padding-top: 10px;
  background-color: var(--previsualisation-article-bg-color, #f4f4f4);
  color: var(--text-color, black);
  padding-left: 30px;
  margin-bottom: 10px;
  border-radius: 20px;
  padding-right: 50px;
  padding-bottom: 10px;
}

label.previsualisation-article i {
  position: absolute;
  right: 30px;
  font-size: 30px;
  transition: transform 0.3s;
  transform:rotate(180deg);
}

.modal-article.input {
  max-width: 90%;
  min-width: 90%;
  width: 90%;
}

.modal-article.textarea {
  max-width: 90%;
  min-width: 90%;
  width: 90%;
  min-height: 300px;
  height: 300px;
  max-height: 1000px;
}

#image-modification-article {
  margin-right: 25%;
  margin-left: 25%;
  margin-top: 10px;
}

/* Survol d'image */

.blocConteneurImageSurvol {
  position: relative;
}

.imageSurvol {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  width: 100%;
  margin-top: 0px;
  margin-bottom: -7px;
}

.divMilieuImageSurvol {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: grey;
  border-radius: 20px;
}

.blocConteneurImageSurvol:hover .divMilieuImageSurvol {
  opacity: 0.7;
}

.divTexteImageSurvol {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.5em;
  font-family: 'Source Sans';
}

/* Edition de catégories */

.inputs-creation-categorie
{
  display: flex;
  margin-bottom: 10px;
}

.inputs-creation-categorie > input
{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 10px;
  margin-left: 0px;
}


/* Promotion page d'accueil */

.carte.promotion {
  display: flex;
  flex-direction: column;
}

.promotion-title {
  order: 1;
}

.promotion-accroche {
  order: 2;
}

.promotion-detail {
  order: 3;
}

.promotion-buttons {
  order: 4;
}

h1.promotion {
	font-family: "Caviar Dreams", "Arial";
	font-weight: normal;
	text-align: center;
	display: block;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}

.promotion-title {
	display: flex;
	flex-direction: row;
}

.promotion-title img {
	width: 100px;
	display: block;
	margin-left: auto;
	margin-right: 20px;
}

.promotion-buttons {
	display: flex;
	flex-direction: row;
}

.promotion-buttons .bouton {
  padding-top: 10px;
  padding-bottom: 10px;
}

.promotion-buttons .bouton:first-child {
	display: block;
	margin-left: auto;
	min-width: 30%;
	font-family: "Caviar Dreams", "Arial";
	font-size: 2em;
}

.promotion-buttons .bouton:last-child {
	display: block;
	margin-right: auto;
	min-width: 30%;
	font-family: "Caviar Dreams", "Arial";
	font-size: 2em;
}


/* Coupons */
.notice {
  display: block;
  font-size: 1.2em;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}

.notice i {
  font-size: 1.3em;
  margin-right: 5px;
}

.notice i.fa-exclamation-triangle {
  color: #ff4800;
}

.notice i.fa-info-circle {
  color: #0070ff;
}

.actions-list {
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  font-size: 1.5em;
  font-family: "Source Sans";
  padding-left: 10px;
  max-width: 500px;
}

.actions-list li {
  max-width: 500px;
  text-align: left;
}

.actions-list i {
  margin: 5px;
}

.coupon-code {
  margin: auto;
  width: min-content;
  display: block;
  font-size: 1.5em;
  font-family: Courier New;
  word-wrap: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #dfdede;
  padding: 2px 10px 2px 10px;
  border-radius: 5px;
  max-width: 85%;
}

/* Domaines page d'accueil */

.domaine {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.domaine-texte {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.domaine .domaine-texte.gauche{
  order: 0;
  margin-right: 20px;
}

.domaine .domaine-texte.droite{
  order: 2;
  margin-left: 20px;
}

.domaine img {
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 0px;
  min-width: 30%;
}


/* Media queries (design responsive) */

@media screen and (max-width: 1400px)  /* Tablettes paysage et notebooks */
{
	#image-logo
	{
		width: 100%;
		height: 250px;
	}
	.bloc-page
	{
		width: 80%;
	}
	nav li
	{
		font-size: 1.4em;
	}
	.conteneur-mini-article
	{
		max-width: 50%;
	}
	.corps-formulaire
	{
		flex-direction: column;
	}
	textarea
	{
  	width: 200px;
  	max-width: 200px;
  	min-width: 200px;
	}
  #infos-compte {
    margin: auto;
    min-width: 70%;
  }
}

@media screen and (max-width: 991px)  /* Tablettes */
{
	#image-logo
	{
		width: 100%;
		height: 200px;
	}
	.bloc-page
	{
		width: 80%;
	}
	nav li
	{
		font-size: 1.4em;
	}
	.conteneur-mini-article
	{
		max-width: 50%;
	}
	.corps-formulaire
	{
		flex-direction: column;
	}
	textarea
	{
  	width: 200px;
  	max-width: 200px;
  	min-width: 200px;
	}
}

@media screen and (max-width: 767px) /* Petites tablettes - Smartphones paysage */
{
	#image-logo
	{
		width: 100%;
		height: 175px;
	}
	.bloc-page
	{
		width: 80%;
	}
	nav li
	{
		font-size: 1.2em;
	}
	.conteneur-mini-article
	{
		max-width: 100%;
	}
	.corps-formulaire
	{
		flex-direction: column;
	}
	textarea
	{
  	width: 200px;
  	max-width: 200px;
  	min-width: 200px;
	}
	#blocs-footer
	{
		flex-direction: column;
	}
	footer section 
	{
		margin: auto;
	}
  .blocConteneurImageSurvol 
  {
    max-width: 200px;
    font-size: 0.5em;
  }
  #image-modification-article {
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
    width: 90%
  }
  .promotion-title {
  	flex-direction: column;
  }

  .promotion-title img {
  	margin: auto;
  }

  h1.promotion {
  	margin: auto;
  }

  .promotion-buttons {
  	flex-direction: column;
  }

  .promotion-boutons .bouton {
  	padding-top: 10px;
  	padding-bottom: 10px;
  }

  .promotion-buttons .bouton:first-child,  .promotion-buttons .bouton:last-child{
  	margin-left: 10px;
  	margin-right: 10px;
  }
  .domaine {
    flex-direction: column;
  }
  .domaine .domaine-texte.gauche, .domaine .domaine-texte.droite {
    margin: 0;
    order: 0;
  }
  .domaine img{
    max-width: 350px;
    margin: auto;
  }

  #infos-compte {
    width: 100%;
  }
}

@media screen and (max-width: 479px) /* Smartphones */
{
	#image-logo
	{
		width: 100%;
		height: 100px;
	}
	.bloc-page
	{
		width: 97%;
	}
	nav ul
	{
		flex-direction: column;
	}
	nav li
	{
		margin: auto;
		font-size: 1.7em;
	}

  h1
  {
    font-size: 3em;
  }

  h2
  {
    font-size: 2.2em;
  }

  h3
  {
    font-size: 1.3em;  
  }

  h4
  {
    font-size: 1em;  
  }

	.conteneur-mini-article
	{
		max-width: 100%;
	}
	.corps-formulaire
	{
		flex-direction: column;
	}
	textarea
	{
  	width: 200px;
  	max-width: 200px;
  	min-width: 200px;
	}
	#blocs-footer
	{
		flex-direction: column;
	}
	footer section 
	{
		margin: auto;
	}
	.notification
	{
		font-size: 1.4em;
	}
  #formulaire-motdepasse-changement
  {
    flex-direction: column;
  }
  .inputs-creation-categorie
  {
    flex-direction: column;
  }
  .inputs-creation-categorie > input
  {
    margin-bottom: 10px;
    width: 100%;
  }
  h1.promotion {
  	font-size: 2.5em;
  }
  .promotion-detail {
    order: 4;
  }

  .promotion-buttons {
    order: 3;
  }
}