/*Responsive*/
@media (prefers-color-scheme: light) {
	custom css 
	.Apparence {
	--navbar-bg-color: #0048c7;
--navbar-txtlogo-color: #000000;
--navbar-txtlogo-font: verdana;
--navbar-txtmenu-size: 1.2em;
--navbar-txtlogo-size: 0.6em;
--navbar-txtmenu-color: #d5dcce;
--navbar-txtmenu-font: Georgia;
--navbar-barmenu-color: #d5dcce;
--navbar-actifsoul-color: #fa330f;
--navbar-survolsoulign-menu-color: #fa330f;
--link-bg-color:#0048c7;
--link-font-color: #d5dcce;
--linkhover-bg-color: #056BD6;
--linkhover-font-color: #fa330f;
--main-section-color: #47567851;
--main-h1-text-color: #fff;
--main-h2-text-color: #050606;
--main-text-color: #050606;
--main-icon-color: 0%;
--main-txttitleform-color: #056BD6;
--main-bgform-color:#eceeeb;
--main-txtform-color: #050606;
--main-txtareabgform-color: #eceeeb;
--foot-bg-color: #545C7C;
--foot-font-color: #050606;
	}
	}
	@media (prefers-color-scheme: Dark) {
		custom css
		.Apparence {
			--navbar-bg-color: #447dcc;
			--navbar-txtlogo-color: #000000;
			--navbar-txtlogo-font: verdana;
			--navbar-txtmenu-size: 1.2em;
			--navbar-txtlogo-size: 0.6em;
			--navbar-txtmenu-color:#000;
			--navbar-txtmenu-font: Georgia;
			--navbar-barmenu-color: #000;
			--navbar-actifsoul-color: #D64141;
			--navbar-survolsoulign-menu-color: #fc645c;
			--link-bg-color:#0048c7;
			--link-font-color: #d5dcce;
			--linkhover-bg-color: #056BD6;
			--linkhover-font-color: #fa330f;
			--main-section-color: #475678f0;
			--main-h1-text-color: #ffffffde;
			--main-h2-text-color: #fff;
			--main-text-color: #ffffffde;
			--main-icon-color: 100%;
			--main-txttitleform-color: #056BD6;
			--main-bgform-color:#eceeeb;
			--main-txtform-color: #050606;
			--main-txtareabgform-color: #eceeeb;
			--foot-bg-color: #545C7C;
			--foot-font-color: #050606;
		}
		}
		/*
.light-theme {
	--navbar-bg-color: #0048c7;
	--navbar-txtlogo-color: #000000;
	--navbar-txtlogo-font: verdana;
	--navbar-txtmenu-size: 1.2em;
	--navbar-txtlogo-size: 0.6em;
	--navbar-txtmenu-color: #d5dcce;
	--navbar-txtmenu-font: Georgia;
	--navbar-barmenu-color: #d5dcce;
	--navbar-actifsoul-color: #fa330f;
	--navbar-survolsoulign-menu-color: #fa330f;
	--link-bg-color:#0048c7;
	--link-font-color: #d5dcce;
	--linkhover-bg-color: #056BD6;
	--linkhover-font-color: #fa330f;
	--main-section-color: #47567851;
	--main-h1-text-color: #fff;
	--main-h2-text-color: #050606;
	--main-text-color: #050606;
	--main-icon-color: 0%;
	--main-txttitleform-color: #056BD6;
	--main-bgform-color:#eceeeb;
	--main-txtform-color: #050606;
	--main-txtareabgform-color: #eceeeb;
	--foot-bg-color: #545C7C;
	--foot-font-color: #050606;
}
.dark-theme {
	--navbar-bg-color: #447dcc;
	--navbar-txtlogo-color: #000000;
	--navbar-txtlogo-font: verdana;
	--navbar-txtmenu-size: 1.2em;
	--navbar-txtlogo-size: 0.6em;
	--navbar-txtmenu-color:#000;
	--navbar-txtmenu-font: Georgia;
	--navbar-barmenu-color: #000;
	--navbar-actifsoul-color: #D64141;
	--navbar-survolsoulign-menu-color: #fc645c;
	--link-bg-color:#0048c7;
	--link-font-color: #d5dcce;
	--linkhover-bg-color: #056BD6;
	--linkhover-font-color: #fa330f;
	--main-section-color: #475678f0;
	--main-h1-text-color: #ffffffde;
	--main-h2-text-color: #fff;
	--main-text-color: #ffffffde;
	--main-icon-color: 100%;
	--main-txttitleform-color: #056BD6;
	--main-bgform-color:#eceeeb;
	--main-txtform-color: #050606;
	--main-txtareabgform-color: #eceeeb;
	--foot-bg-color: #545C7C;
	--foot-font-color: #050606;
}
	*/
		
@media screen and (max-width:768px) {

/* barre menu burger taille et posiion*/
.navbar__liens { 
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 0;
	height: calc(100vh - 65px);  
	position: absolute;
	top: 100px;
	right: 0;     
	background: var(--navbar-bg-color);     
	transform: translateX(110%);
	transition: all 1.5s ease-in-out;
  }
 /* barre menu burger posiion et translation liens */
.show-nav .navbar__liens { 
	width:100vw;    
	transform: translateX(0);
} 
.navbar__lien {    
	transform: translateX(101%);
	transition: all .5s ease-in-out;
}
	  
.show-nav .navbar__lien {        
	transform: translateX(0);    
}
.navbar__lien a {
	display: block;
	padding: 1rem;
	font-size: 1.6rem;
	color: var(--navbar-txtmenu-color);  
	transition: all .4s ease-in-out;
}

/* survol souris liens menu burger ouvert */
.navbar__lien a:hover {
	padding-left: 2rem;
	letter-spacing: 5px;
	border-bottom: 4px solid;
	border-color: var(--navbar-actifsoul-color);
	color: var(--navbar-actifsoul-color);
}
.active a {
	color: var(--navbar-actifsoul-color);
}
	  
/* icone burger */
/* position icone complète */
.burger {
	display: block;
	position: relative;
	padding: 0;
	width: 45px;
	height: 45px;
	border: none;
	background: transparent;
	cursor: pointer;
}
/* icone menu 1 barre */
.bar {
	display: block;    
	width: 45px;
	height: 4px;  
	border-radius: 3px;
	background: var(--navbar-barmenu-color); 
	transition: all .5s ease-in-out;   
}
/* ajout 2 barres à l'icone */
.bar::before, .bar::after {
	content:"";
	width: 45px;
	height: 4px;
	position: absolute; 
	left: 0;  
	background: var(--navbar-barmenu-color); 
	border-radius: 3px;    
	transition: all .5s ease-in-out;
}
.bar::before {
	transform: translateY(-12px)
}
.bar::after {
	transform: translateY(12px)
}

/* animation ouverture burger 45° */
.show-nav .bar {
	width: 0;
	background:transparent;    
}
.show-nav .bar::before {
	transform: rotate(45deg);
}
.show-nav .bar::after {
	transform: rotate(-45deg);
}  
.images {
	height: auto;
	padding-left: 80px;
	padding-right: 80px;
}
.appareil {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 60%;
	margin-top: 120px;
	flex-wrap: wrap;
}
.appareil img {

	height: 220px;
	width: min-content;
	margin:auto;
	margin-bottom: 0px;
	padding: 0;
}
.appareil p {
	margin:0;
	margin-top: 20px;
}
.responsive {
	visibility: hidden;
}
.mobile {
	margin-left: 20px;
	visibility: visible;
}

.modal-content {
	width: 90%;
	height: 90%;
	height: auto;
	padding: 10px;
}
iframe {
		width: 350px;
		height: 250px;
}
.inputtxt{
	width: 300px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-align: center;
}
.txtareacenter{
	vertical-align: center;
}
.txtareacenter{
	text-align: center;
	width: 90%;
}
textarea {
	margin: 5px;
	width: 100%;
	height: 150px;
	resize: none ;
}

form#contact p {
	color: var(--main-txttitleform-color);
	font-size: 20px;
	font-weight: bold;
}
.txtareacenter{
	text-align: center;
	width: 80%;
}
.modal {
	padding-top: 10%; /* Location of the box */
}
}












/*  ecran Ordinateur */
@media screen and (min-width:768px) {

.navbar__lien a:hover {
	color: var(--navbar-actifsoul-color);
	border-bottom: 4px solid;
	border-color: var(--navbar-actifsoul-color);
	transition: 0.8s;
}
.active a {
	color: var(--navbar-actifsoul-color);
}
#Header {
	position: fixed;
	top: 0;
	width: 100%; /* Full width */
	transition: 0.6s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
.images {
	height: auto;
	padding-left: 100px;
	padding-right: 100px;
}
.appareil {
	width: 700px;
	height: auto;
	margin-top: 150px;
	margin-bottom: 150px;
	margin-left: max(10%);
}
.resume {
	width: 700px;
	height: auto;
	margin-top: 150px;
	margin-bottom: 50px;
}
.appareil h3{
	text-align: left;
	margin-left: 50px;
}
.appareil img {
	display: block;
	float: right;
	height: 220px;
	width: auto;
	margin-left: 10px;
	margin-bottom: 2px;
	padding: 0;
}
.appareil p {
	margin: 0;
	margin-top: 150px;	
}
.responsive {
	visibility: visible;
}
.mobile {

	visibility: hidden;
}
iframe {
	width: 400px;
	height: 300px;
}
.modal {
	padding-top: 50px;
 }
.modal-content {
	width: 45%;
	padding: 30px;
}
.inputtxt {
	width: 400px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.txtareacenter{
	display: flex;
	justify-content: center;
	width: 80%;
}
textarea {
	margin: 5px;
	width: 90%;
	height: 200px;
	resize: none ;
	margin-bottom: 30px;
}
form#contact p {
	color: var(--main-txttitleform-color);
	text-align: center;
	font-size: 28px;
	font-weight: bold;
}
}