/* Général */

html, body, h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", sans-serif;
}

h1 {
	font-size: 34px;
	margin-top: 20px;
}

h2 {
	font-size: 25px;
}

a {
	text-decoration: none;
	color: #4CAF50;
}

a:hover {
	color: #757575;
}

.w3-btn,.w3-button {
	padding: 10px 20px;
}

.w3-nowrap { /* le texte ne retourne pas à la ligne */
	white-space: nowrap;
}

.w3-pre { /* les espaces sont préservés et le texte ne retourne à la ligne que si il y a un retour à la ligne dans le code */
	white-space: pre;
}

.ligneBoutons { height: 47px; }

.w3-nomargin-top {
	margin-top: 0px;
}

.w3-nomargin-bottom {
	margin-bottom: 0px;
}

@media (min-width: 601px) {
	.max-width-700 { max-width: 700px; }
	.max-width-500 { max-width: 500px; }
	.max-width-400 { max-width: 400px; }
	.max-width-300 { max-width: 300px; }
}

.lien:hover {
	cursor: pointer;
	color: #4CAF50;
}

.filtres {
	margin-bottom: 10px;
}

.filtres > div, .filtres > button, .filtres > .w3-button {
	margin-top: 5px;
	margin-bottom: 5px;
}



/* Tables */

.w3-table-container {
	width: 100%;
	overflow-x: auto;
}

.w3-table td, .w3-table th {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	vertical-align: middle;
	overflow: hidden;
}

.td-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



/* Formulaires */

.w3-label {
	color: #999999;
	font-size: 0.9em;
}

select, input, textarea, div input.w3-check ~ label, .w3-check-container {
	font-size: 16px;   /* Indispensable pour éviter un zoom automatique sur iPhone */
}

input:focus, select:focus, textarea:focus {
	outline: #4CAF50 auto 2px;
}

input::placeholder {
	color: #C0C0C0;
}

input:disabled {
	background-color: #F1F1F1;
	color: #A0A0A0;
}

.w3-select {
	padding: 0 0.4em;
	margin: 2px 0;
	background-color: #fff;
	height: 2.25em;
}

.w3-textarea {
	resize: none;
	border: 1px solid #ccc;
	width: 100%;
	padding: 8px 8px;
}

textarea:disabled {
	background-color: #fff;
}

@font-face {
	font-family: 'Password';
	font-style: normal;
	font-weight: 400;
	src: url('./password.woff2') format('woff2');
}

.masquerCaracteres {
	font-family: 'Password';
	letter-spacing: 0.5px;
}

.valeurIncorrecte {
	background-color: #ffe8eb;
}



/* Icônes SVG */

.extLinkIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: scale(1.3, 1.3) translateY(0.05em);
	margin-right: 0.2em;
}

.homeIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: scale(1.2, 1.2) translateY(0.1em);
}

.settingsIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: scale(1.2, 1.2) translateY(0.1em);
}

.checkIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: scale(1.2, 1.2) translateY(0.1em);
}

.infoIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: scale(1.6, 1.6) translateY(0.05em);
}

.starIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: scale(1, 1) translateY(0.1em);
}



/* Checkbox personnalisée */

.w3-check2, .w3-check2-small {
	display: block;
	position: relative;
	cursor: pointer;
	user-select: none;
	overflow: hidden;
}

.w3-check2 {
	margin: 0px 0px;
	height: 36px;
	padding: 8px 0px 3px 35px;
}

.w3-check2-small {
	margin: 0px 0px;
	height: 28px;
	padding: 4px 0px 4px 30px;
}

.w3-check2 input, .w3-check2-small input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.w3-check2-box {
	position: absolute;
	left: 0;
	background-color: #fff;
	border: 1px solid #ccc;
}

.w3-check2 .w3-check2-box {
	height: 25px;
	width: 25px;
	top: 6px;
}

.w3-check2-small .w3-check2-box {
	height: 20px;
	width: 20px;
	top: 6px;
}

.w3-check2 input:checked ~ .w3-check2-box, .w3-check2-small input:checked ~ .w3-check2-box {
	background-color: #4CAF50;
	border: none;
}

.w3-check2-box:after {
	content: "";
	position: absolute;
	display: none;
	border: solid white;
	transform: rotate(45deg);
}

.w3-check2 .w3-check2-box:after {
	left: 9px;
	top: 5px;
	width: 7px;
	height: 14px;
	border-width: 0 3px 3px 0;
}

.w3-check2-small .w3-check2-box:after {
	left: 7px;
	top: 4px;
	width: 6px;
	height: 10px;
	border-width: 0 2.5px 2.5px 0;
}

.w3-check2 input:checked ~ .w3-check2-box:after, .w3-check2-small input:checked ~ .w3-check2-box:after {
	display: block;
}



/* Bouton radio personnalisé */

.w3-radio2 {
	display: block;
	position: relative;
	cursor: pointer;
	user-select: none;
	margin: 10px 0 5px 0;
	height: 25px;
	padding-left: 35px;
}

.w3-radio2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.w3-radio2-box {
  position: absolute;
  top: -2px;
  left: 0;
  background-color: #fff;
	border: 1px solid #ccc;
  border-radius: 50%;
	height: 25px;
	width: 25px;
}

.w3-radio2 input:checked ~ .w3-radio2-box {
  background-color: #4CAF50;
  border: none;
}

.w3-radio2 .w3-radio2-box:after {
  content: "";
  position: absolute;
  display: none;
	border: solid white;
	
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.w3-radio2 input:checked ~ .w3-radio2-box:after {
  display: block;
}



/* Popins */

.w3-modal {
	background-color: rgba(0, 0, 0, 0.4);
  animation-name: apparitionFondNoir;
  animation-duration: 0.5s;
}

@keyframes apparitionFondNoir {
  0%   { background-color: rgba(0, 0, 0, 0.05);  }
  100% { background-color: rgba(0, 0, 0, 0.4) }
}



/* Header */

#menu {
	z-index: 3;
}

@media all and (min-width: 640px) {
	body > div.w3-container {
		padding: 0.01em calc(2.5%);
	}
	
	#menu > div.w3-bar {
		padding: 0 calc(2.5% - 16px);
	}
}



/* Footer */

#footer {
	margin-bottom: 3rem;
}



/* Composant saison */

.saison {
	margin-bottom: 1em;
	margin-top: 1em;
}

.saisonHeader {
	font-size: 0.7em;
	font-weight: 400;
	text-align: center;
}

.saison tr td {
	height: 3em;
	width: min(3em, 6.7vw);
}

.saison tr.ligne1 td, .saison tr.ligne2 td {
	background-color: #F4F4F4;
}

.saisonC1 {
	background-color: #DCDAAE !important;
}

.saisonC2 {
	background-color: #C6C265 !important;
}



/* Accueil */

#filtreNResultats {
	display: block;
	float: left;
	font-size: 0.8em;
	line-height: 1.875em;
	padding: 10px 20px;
	margin: 5px 0px;
}

@media (max-width: 900px) { #filtreNResultats { padding: 9px 16px; } }
@media (max-width: 700px) { #filtreNResultats { padding: 8px 14px; } }

#recettesTable {
	table-layout: fixed;
}

#recettesTable tr td:nth-child(2) { width: 7em; }
#recettesTable tr td:nth-child(3) { width: 7em; }

@media (max-width: 450px) { #recettesTable tr td:nth-child(3) { display: none; } }


#pEnTete .w3-small { color: #bbb; }

#pEnTete1 {	float: left; width: 60%; }
#pEnTete2 {	float: left; width: 40%; }

@media (max-width: 600px) {
	#pEnTete1 {	float: left; width: 100%; }
	#pEnTete2 {	float: left; width: 100%; }
}










/* Calendrier */

.tableCalendrier tr th { width: 2em; }
.tableCalendrier tr th:nth-child(1) { width: auto; }






/* Parametres */

.iconeIpVerifiee {
	margin-left: 1em;
	position: relative;
}

.iconeIpVerifiee > span {
	position: absolute;
	width: 6.6em;
	padding: 4px 8px;
	top: -4px;
	font-size: 0.8em;
}

.iconeIpVerifiee > span > span {
	font-size: 0.9em;
	margin-left: 0.2em;
}



/* Petits écrans */

@media all and (max-width: 900px) {
	body { font-size: 13.5px; }
	h1 { font-size: 29px; }
	h2 { font-size: 21px; }
	.w3-bar .w3-bar-item { padding: 6px 14px; }
	.w3-btn, .w3-button { padding: 9px 16px; }
	.w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th { padding: 7px 7px; }
	.w3-bar-block .w3-bar-item { padding: 6px 14px; }
	.checkedButton { padding: 9px 12px; }
	.ligneBoutons { height: 45px; }
	.w3-small { font-size: 11px!important; }
}

@media all and (max-width: 700px) {
	body { font-size: 12px; }
	h1 { font-size: 25px; }
	h2 { font-size: 18px; }
	.w3-bar .w3-bar-item { padding: 6px 12px; }
	.w3-btn, .w3-button { padding: 8px 14px; }
	.w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th { padding: 6px 6px; }
	.w3-bar-block .w3-bar-item { padding: 6px 12px; }
	.checkedButton { padding: 8px 11px; }
	.ligneBoutons { height: 43px; }
	.w3-small { font-size: 9px!important; }
	
	#menu .w3-bar-item { padding: 14px 20px; }
	#menu .w3-button, #menuDessous .w3-button  { padding: 14px 20px; }
}