@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');

* {
	box-sizing: border-box;
}

/* Set height of body and the document to 100% */
body,
html {
	height: 100%;
	margin: 0;

	font-family: montserrat, arial, sans-serif;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1.8rem;
	font-family: montserrat, Arial, sans-serif;
	font-weight: 800;
	margin-bottom: 25px;
}

svg {
	padding-bottom: 5px;
}
table{
    font-size: 0.8rem;
}
p,
span {
	font-family: montserrat, Arial, sans-serif;
	font-weight: 400;
}

/* ===== Scrollbar CSS ===== 
/* Firefox */
* {
	scrollbar-width: auto;
	scrollbar-color: #d6d722 #303030;
}

*/

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 16px;
}

*::-webkit-scrollbar-track {
	background: #303030;
}

*::-webkit-scrollbar-thumb {
	background-color: #d6d722;
	border-radius: 10px;
	border: 3px solid #303030;
}

svg {
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1));
}

.heart {
	fill: #d6d722;
	position: relative;
	top: 0px;
	width: 13px;
	animation: pulse 1s ease infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.btn-primary {
	background-color: #d6d722;
	color: #fff;
}

.btn-primary:hover {
	background-color: #303030;
	color: #fff;
	border-color: #303030 !important;
}

.primary {
	background-color: #d6d722;
	color: #fff;
}


.btn-switch {
	background-color: #303030;
	color: #fff;
	border-radius: 0;
}

.btn-switch:active {
	background-color: #d6d722 !important;
	color: #fff;
}

.btn-group .btn.btn-switch {
	background: #303030;
}

.btn-group .btn.btn-switch.active {
	background: #d6d722;
}

.text-eb {
	color: #d6d722;
}

a {
	margin: 0px;
	color: #d6d722;
}


a:link {
	color: #d6d722;
	text-decoration: none;
}

a:hover {
	color: #d6d722;
}

#myInput,
#myInput2,
#myInput3,
#myInput4 {
	border: none;
	margin-bottom: 20px;
	padding: 0 15px;
	background-color: #555;
	color: #eee;
	border-radius: 0.25rem;
}

.content {

	width: 1000px;
	margin: 0 auto;
}

.content>p,
.content>div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}

.content>p table td,
.content>div table td {
	padding: 5px;
}

.content>p table td:first-child,
.content>div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}

.content>div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
	color: #fff;
	text-decoration: none;
	background-color: #d6d722
}

/* td:hover  {
    background-color: #d6d722;
    color: black;
    }
    */

[id^="tb"] td:hover {
	background-color: #d6d722;
	color: rgb(0, 0, 0);
 }
	  


/* Style tab links */
.tablink {
	background-color: #555;
	color: white;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	font-size: 17px;
	width: 50%;
}

.tablink:hover {
	background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
	color: white;
	display: none;
	padding: 100px 20px;
	height: 100%;
}

#Home {
	border: #d6d722 solid 1px;
	height: auto;
}

#News {
	border: #d6d722 solid 1px;
	height: auto;
}

#Contact {
	border: #d6d722 solid 1px;
	height: auto;
}

#About {
	border: #d6d722 solid 1px;
	height: auto;
}

/* Plateforme elect */
@media only screen and (max-width: 844px) {
	h3 {
		font-size: 19px; 
	}

	/* Force table to not be like tables anymore */
	.no-more-tables table,
	.no-more-tables thead,
	.no-more-tables tbody,
	.no-more-tables th,
	.no-more-tables td,
	.no-more-tables tr {
		display: block;
	}

	.no-more-tables {
		padding: 0px;
		background-color: #303030;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.no-more-tables thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.no-more-tables tr {
		border: 1px solid #ccc;
		margin-bottom: 10px;
		margin-top: 15px;
		padding: 2px;

	}
	
	.no-more-tables table {
		border: none;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.no-more-tables td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-right: 5px;
		white-space: normal;
		text-align: right;
	}

	.no-more-tables td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
	}
	.no-more-tables td:last-child {
		border-bottom: none; /* Remove bottom border from the last td in each row */
	}
	/*
	Label the data
	*/
	.no-more-tables td:before {
		content: attr(data-title);
	}
	.catalogue-card {
		width: 348px;
		height: 450.23px;
		border: 1px solid #d6d722;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #303030;
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
		cursor: pointer;
		transition: transform 0.2s ease-in-out, box-shadow 0.3s;
		text-decoration: none;
	}

	.catalogue-card:hover {
		transform: scale(1.05);
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
	}

	.catalogue-card i {
		font-size: 50px;
		margin-bottom: 15px;
		color: #d6d722;
	}
}


#btu-tool *{box-sizing:border-box}
#btu-tool{font-family:montserrat,arial,sans-serif;color:#fff;background:transparent}
#btu-tool h1,#btu-tool h2{font-family:montserrat;font-weight:800;margin:0}
#btu-tool h1{font-size:1.9rem;margin-bottom:6px}
#btu-tool h2{font-size:1.35rem;margin-bottom:10px}
#btu-tool .text-eb{color:#d6d722}


#btu-tool .btu-wrap{max-width:1200px;margin:24px auto 48px;padding:0 24px}

#btu-tool .card{
  background:#222;border:1px solid #d6d722;border-radius:14px;padding:20px
}
#btu-tool .subtitle{font-size:.95rem;color:#bdbdbd;margin-top:-6px;margin-bottom:16px}
#btu-tool .legend{font-size:.95rem;color:#ccc}

#btu-tool label{display:block;font-size:.95rem;color:#ddd;margin:0 0 6px}
#btu-tool input[type="number"]{
  width:100%;padding:12px;background:#303030;color:#fff;
  border:1px solid #d6d722;border-radius:10px;font-weight:600
}
#btu-tool input[type="number"]:focus{border-color:#d6d722;box-shadow:0 0 0 3px rgba(214,215,34,.25)}

#btu-tool .out{
  display:block;width:100%;padding:5px;border-radius:10px;border:1px solid #222;
  font-weight:800;font-size:28px;background:#222;color:#d6d722
}

#btu-tool .toggle{
  display:inline-flex;align-items:center;background:#303030;border:1px solid #303030;border-radius:10px;overflow:hidden
}
#btu-tool .toggle .btn{border:0;background:#303030;color:#fff;padding:10px 16px;font-size:1rem;cursor:pointer}
#btu-tool .toggle .btn.active{background:#d6d722;color:#fff}

#btu-tool .help{font-size:.9rem;color:#aaa;margin-top:6px}
#btu-tool .note{font-size:.9rem;color:#ccc;margin-top:12px}
#btu-tool .pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#303030;color:#fff;font-size:.8rem}
#btu-tool .footer{font-size:.9rem;color:#ccc;margin-top:18px}

#btu-tool .row{margin-left:-15px;margin-right:-15px}
#btu-tool [class*="col-"]{padding-left:15px;padding-right:15px}


/* --- Popover customisé --- */
#btu-tool .popover {
	background:#222;
	border:1px solid #D6D722;
	border-radius:8px;
	max-width:260px;
  }
  #btu-tool .popover-header {
	background:#222;
	color:#fff;
	font-weight:700;
	border-bottom:1px solid #D6D722;
  }
  #btu-tool .popover-body {
	color:#fff;
	font-size:.9rem;
  }
  
  /* icône info */
  #btu-tool .svg-tip{
	cursor:pointer;
	display:inline-flex;
	vertical-align:middle;
	margin-left:8px;
  }
  #btu-tool .svg-tip svg{
	width:18px; height:18px;
	fill:#D6D722;
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
  }
  #btu-tool .svg-tip:active svg{ opacity:.7; }