/** break points
	480 -- 768 -- 1024 -- 1280 -- 
  phone  tablet laptop  desktop
*/


/***** VARIABLES **********/

:root {
	--vert-2: #007859;
	--vert-3: #00bb5b;
	--vert-4: rgb(0,120,89);
	--page-width: 960px;
}


/***** FONTS **********/

@font-face {
  font-family: "Freeman";
  src: url("/proj-res/fonts/freeman-v1-latin-regular.woff2") format("woff2"), url("/proj-res/fonts/freeman-v1-latin-regular.woff") format("woff"), url("/proj-res/fonts/freeman-v1-latin-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/proj-res/fonts/noto-sans-v26-latin-regular.woff2") format("woff2"), url("/proj-res/fonts/noto-sans-v26-latin-regular.woff") format("woff"), url("/proj-res/fonts/noto-sans-v26-latin-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/proj-res/fonts/noto-sans-v26-latin-700.woff2") format("woff2"), url("/proj-res/fonts/noto-sans-v26-latin-700.woff") format("woff"), url("/proj-res/fonts/noto-sans-v26-latin-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
body {
	font-family: "Noto Sans";
}
h1, h2, h3, h4, h5,
footer a h2,
header {
	font-family: Freeman, Arial, Helvetica, sans-serif;
}

/***** STRUCTURE DE BASE **********/

header, main, footer {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

header {
	border-bottom: solid 2px var(--vert-2);
	padding: 0.5%;
	top: 0px;
	position: fixed;
	z-index: 1200;
	a {
		text-decoration: none;
	}
}
main {
	margin-bottom: 20px;
	margin-top: 120px;
}
footer {
	padding-bottom: 50px;
	font-size: 0.9em;
	h2 {
		padding: 0px;
		margin: 0px;
		font-size: 1.5rem;
	}
}
footer {
	padding-top: 20px;
}
#footer-logo {
	 width: 225px;
	 /*min-width: 225px;*/
	 max-width: 100%;
	 height: 126px;
}

menu {
	position: absolute;
	right: 0px;
	bottom: 0px;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
}
#out_menu {
	width: 100%;
	position: relative;
}
#in_header,
#in_footer,
#in_main {
	max-width: 100%;
	width: var(--page-width);
	margin: auto;
}

#legal {
	display: none;
}

/***** COLORS **********/

header ,
body      { background-color: white; }
footer    { color: white; background-color: var(--vert-2); }

a         { color: var(--vert-2); }
footer a,
footer h2 { color: var(--vert-3); }
header a ,
h1, h2, h3, h4, h5,
th        { color: var(--vert-4); }
button,
.btn {
	background-color: var(--vert-2);
	color: white;
}


/** responsive-ness des blocs de taille selectionnable **/

.size16 ,
.size20 ,
.size25 ,
.size30 ,
.size33 ,
.size40 ,
.size50 ,
.size66 ,
.size75 ,
.size100 { margin: 0px; box-sizing: border-box;  }

.size16 { width: 16.666%; }
.size20 { width: 20%; }
.size25 { width: 25%; }
.size30 { width: 30%; }
.size33 { width: 33.333%; }
.size40 { width: 40%; }
.size50 { width: 50%; }
.size66 { width: 66.666%; }
.size70 { width: 70%; }
.size75 { width: 75%; }
.size100 { width: 100%; }

@media (max-width: 768px) {
	.mobile100 { width: 100%; display: block; }
	.mobile0 { display: none; }
	.size16 { width: 50%; }
	.size20 { width: 50%; }
	.size25 { width: 50%; }
	.size30 { width: 100%; }
	.size33 { width: 100%; }
	.size40 { width: 100%; }
	.size50 { width: 100%; }
	.size66 { width: 100%; }
	.size75 { width: 100%; }
	.size100 { width: 100%; }
	.sizerectangle { width: 50%; }

	.size16 ,
	.size20 ,
	.size25 ,
	.size30 ,
	.size33 ,
	.size40 ,
	.size50 ,
	.size66 ,
	.size75 ,
	.size100 { margin-bottom: 20px; }

}

/***** PRINT **********/

@media print {
	menu,
	footer { display: none; }
	header {
		break-after: avoid; 
		page-break-after: avoid;
	}
	body {
		width: 650px; 
	}
	main {
		page-break-inside: auto;
		page-break-before: avoid;
		width: 100%; 
		box-sizing: content-box; 
	}
	.mobile100 { width: 100%; display: block; }
	.mobile0 { display: none; }
	.size16 { width: 50%; }
	.size20 { width: 50%; }
	.size25 { width: 50%; }
	.size30 { width: 100%; }
	.size33 { width: 100%; }
	.size40 { width: 100%; }
	.size50 { width: 100%; }
	.size66 { width: 100%; }
	.size75 { width: 100%; }
	.size100 { width: 100%; }
}



/***** SHORTCUTS **********/

.pad5 { padding: 5px; }
.pad10 { padding: 10px; }
.padr10 { padding-right: 10px; }
.padr5 { padding-right: 5px; }
.padl10 { padding-left: 10px; }
.padl5 { padding-left: 5px; }
.pad20 { padding: 20px; }

.gap20 { gap: 20px; }

.flex { display: flex; flex-wrap: wrap; }
.floater { float: left; }
.right { text-align: right; }
.grow { flex-grow: 1; }
.center { text-align: center; }
.floater.right { float: right; }
.left { text-align: left; }
.padded-tb { padding: 10px 0px; }
.padded { padding: 10px; }
.padded-b { padding-bottom: 10px; }
.superpadded { padding: 20px; }
.shadowed { box-shadow: 3px 3px 3px #000; }
.marged { margin-right: 40px; }
.rounded { border-radius: 20px; border: none; }
.flex_spacer { min-width: 20px; }
.overflow_hidden { overflow: hidden; }
.marg_bottom_10 { margin-bottom: 10px; }
.nowrap { flex-wrap: nowrap; }


/***** GENERIC **********/

body, html {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}
* {
	box-sizing: border-box;
}
img {
	max-width: 100%;
}
ul {
	list-style: none;
	padding-left: 5px;
	margin-left: 5px;
}
a { cursor: pointer; }

/* *****************
	boutons & formulaires
 ***************** */

.btn img { vertical-align: middle; }
.btn:hover { box-shadow: 0px 0px 4px #000; }
.btn {
	text-decoration: none;
	box-sizing: border-box;
	display: block;
	padding: 10px;
	width: 100%;
	text-align: center;
	margin: 0px;
	cursor: pointer;
	border: none;
	font-size: 16px;
}
.form_line {
	display: flex;
	width: 100%;
	margin-bottom: 10px;
}
.form_label {
	width: 30%;
	min-width: 100px;
	max-width: 200px;
}
.form_input {
	width: 70%;
}

.favorite-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
	color: black;
}

/* État NON souhait */
.favorite-btn:hover {
  border-color: #ff7700;
  background: #fffdf5;
}
.txt_souhait { display: none; }
.souhait {
	.txt_souhait { display: block; }
	.txt_non_souhait { display: none; }
}

/* État FAVORI */
.favorite-btn.souhait {
  border-color: #f00;
  background: #fcc;
}

.favorite-btn.souhait .icon {
  color: #f00;
  transform: scale(1.1);
}
ul.bullet li {
	list-style: disc;
}
.photo {
	max-height: 400px;
}
#send_commande_form {
	width: 100%;
	max-width: 500px;
	textarea,
	input[type=text],
	input[type=email] {
		width: 100%;
		padding: 5px;
		border: solid 1px #999;
		border-radius: 4px;
	}
	textarea {
		height: 80px;
	}
}

button {
	border-radius: 5px;
	border: none;
	padding: 10px 20px;
	gap: 10px;
}

h3 {
	margin: 10px 0px;
}
.form_line {
	margin: 20px 0px;
}
.carte_blanche {
	margin: 15px 0px;
	padding: 10px;
	box-shadow: 3px 3px 6px #444;
}
.fiche_produit dl {
	display: flex;
}
.fiche_produit dl dt {
	width: 170px;
	max-width: 20%;
}
.fiche_produit img {
	max-width: 100%;
	
}
td, th {
	padding: 4px 10px ;
}
th {
	text-align: left;
}
.form_input select,
.form_input input[type=text] {
	width: 100%;
}
.slider-display-val {
	width: 180px;
}
.slider-contener {
	width: calc(100% - 200px);
}
a i.fa-heart {
	color: gray;
}
a.souhait i.fa-heart {
	color: red;
}
#recherche_box {
	width: 500px;
	border: solid 1px #00a;
	padding: 5px;
	margin: 5px;
}


div#logo_baudat img  {
	height: 100px;
}
div#logo_baudat {
	height: 100px;
}
h1,h2,h3,h4,b {
	text-decoration: none;
}



/* responsive */

.menu_toggler {
	display: none;
}
.resultats_recherche {
	width: 100%;
}
.resultats_recherche th.en-tetes {
	text-transform: capitalize;
}
.resultats_recherche tr:nth-child(even) {
	background-color: #dfd;
}

@media (max-width: 768px) {
	.resultats_recherche tr {
		display: flex;
		flex-wrap: wrap;
	}
	.resultats_recherche tr.en-tetes { display: none; }
	.resultats_recherche td:nth-child(1) { width: 30px; }
	.resultats_recherche td:nth-child(2) { width: calc(100% - 30px); }
	.resultats_recherche td:nth-child(3) , 
	.resultats_recherche td:nth-child(4) ,
	.resultats_recherche td:nth-child(5) { width: 33%; border-bottom: solid 1px #999; }

	main {
		padding: 5px;
	}

	footer {
		padding: 10px;
	}

	.menu_toggler {
		display: block;
		text-transform: uppercase;
	}
	menu a {
		display: block;
	}
	menu {
		position: relative;
		display: none;
		border-top: solid 2px var(--vert-2);
		padding: 10px;
	}
	menu .separator { display: none; }
}


/* *****************
	carte
 ***************** */

#map {
	height: calc(100vh - 150px);
	/*width: calc(100vw);*/
	border: solid 1px black;
}


/* *****************
	qr - test
 ***************** */

#codes {
	display: flex;
	flex-wrap: wrap;
	div {
		padding: 10px;
		margin: 5px;
	}
}


/* *****************
	tools
 ***************** */
#console {
	white-space: pre-line;
}
.debug {
	color: red;
	font-family: courier;
}


/* *****************
	modal
 ***************** */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
	min-height: 100px;
	box-shadow: 3px 3px 3px #333;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}