/* 
Fonce+	: #0A1 D34	#0A1D34
Fonce-	: #00B 8E6	#00B8E6

Clair+	: #7ED 6F5	#7ED6F5
Clair-	: #CDE BFA	#CDEBFA
*/


*{ margin:0; padding:0; box-sizing:border-box;}

body{ font-family:Arial, sans-serif; line-height:1.7; color:#333;}

a	{color: #0A5E85;} /*#7ED6F5;*/
h2	{margin-bottom:20px; color:#0f172a;}

header				{background: #fff; color:white; padding:20px 0;}
header .container	{display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:auto;}

section		{padding: 40px 0;}

footer		{background: #fff; color: #0A1D34; text-align:center; padding:25px;}
footer H2	{color: #0A1D34;}

/* MENU */
.nav				{background: #fff;}
.menu				{display: flex; list-style:none;}
.menu>li			{position: relative;}
.menu>li>a			{display: block; padding:18px 25px; color:#0A1D34; text-decoration:none;}
.menu>li>a:hover	{background: #fff; color: #00B8E6;}
.menu a.active		{color: #ff0000; border-bottom:3px solid #00CFFF;}

/* MENU - Sous-menu */
.submenu			{display:none; position:absolute; top:100%; left:0; background: #fff; min-width:220px; list-style:none;}
.submenu li a		{display:block; padding:15px 20px; color: #0A1D34; text-decoration:none;}
.submenu li a:hover	{background: #00B8E6; color: #000;}

/* MENU - Ouverture au survol sur PC */
.has-submenu:hover>.submenu{ display:block;}

/* MENU - Bouton sur mobile */
.menu-toggle { display:none; width:100%; padding:15px; background:#222; color:white; border:none; font-size:20px; cursor:pointer;}
.imageLargeBottom			{display: block; width: 100vw; height: auto;}
.imageBannerTop				{width: 100%; height: 400px; object-fit: cover;}

/* END :: MENU */









/* PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC ::  */
@media screen and (min-width: 1101px) {
	.logo img {height: 55px;}
}
/* END :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC :: PC ::  */





/* PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: */
@media (max-width:998px){
	/* Logo à gauche, bouton à droite */
	header .container	{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
	.logo				{width:auto; margin:0;}
	.logo img			{height: 50px;}
	.nav				{width:auto;}

	/* Bouton */
	.menu-toggle		{display:block; background:none; border:none; color:#0A1D34; font-size:30px; cursor:pointer; padding:10px; width:auto;}

	/* Menu sous le header */
	.menu					{display:none; flex-direction:column; width:100%; margin-top:15px; background: #f2f2f2;}
	.menu.active			{display:flex;}
	.menu > li				{width:100%;}
	.menu > li > a			{padding:15px 20px; border-top:1px solid #253866;transition: color .2s ease, background-color .2s ease;}
	.menu > li > a:active {background: #1b2d52;    color: #00B8E6;border-bottom: 3px solid #00B8E6;}


	/* Sous-menu */
	.submenu						{position:static; width:100%; background: #fff; padding-left: 10px;}
	.has-submenu:hover > .submenu	{display:none;}
	.has-submenu.open > .submenu	{display:block;}

	.containerForm {flex-direction: column;} 

}
/* END :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: PHONE :: */




.container	{width:90%; max-width:1200px; margin:auto;}
.logo		{font-size:1.8rem; font-weight:bold;}

.titleColor1 {color: #7ED6F5;}
.titleColor2 {color: #FFF;}
.titleColor3 {color: #7ED6F5;}

.topBanner		{color:white; padding:100px 20px; text-align:center; background-image:url('/images/creation-site-web-icewebside-01.jpg'); background-repeat: no-repeat; background-size: cover; /* ou contain selon le besoin */  background-position: center;}
.topBanner h1	{font-size: 3rem; margin-bottom: 20px; background-color: #0078D7;}
.topBannerText	{font-size: 1rem; margin: 10px; background-color: #0050C2; font-weight: bold;}
.btn			{display:inline-block; background:white; color:#2563eb; padding:12px 25px; margin-top:20px; text-decoration:none; border-radius:5px; font-weight:bold;}


.cards		{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px;}
.card		{border:1px solid #ddd; padding:25px; border-radius:10px; background:white;}

.listUl ul {padding-left: 40px;}

.alignVertical {display: flex; align-items: center; xjustify-content: center; min-height: 100px;}





/* PAGE: Contact */
	.containerForm	{display: flex; gap: 20px; background-color: #9bc6e877; padding: 20px;}
	.bloc			{flex: 1; }

	/* FORMULAIRE */
	.formulaire	{max-width: 500px; margin: 50px auto; padding: 30px; border: 1px solid #ddd; border-radius: 10px;        }
	input		{width: 100%; padding: 12px; margin-top: 5px; margin-bottom: 20px; box-sizing: border-box;        }
	button		{padding: 12px 25px; background: #333; color: white; border: none; cursor: pointer;}
	.contact-form								{max-width:700px; margin:auto;}
	.contact-form input, .contact-form textarea	{width:100%; padding:12px; margin-bottom:15px; border:1px solid #ccc;}
	.contact-form button						{background:#2563eb; color:white; border:none; padding:12px 25px; cursor:pointer;}
	/* END :: FORMULAIRE */
/* END :: PAGE: Contact */


















		/* ================= MOBILE : Logo et les 3 traits dessus-dessous ================= En commentaire.
@media(max-width:768px){
							header .container	{display:flex; flex-direction:column; align-items:center;}
							.logo				{width:100%; text-align:center; margin-bottom:20px;}
							.nav				{width:100%;}
							.menu-toggle		{display:block; width:100%;}
							.menu				{display:none; flex-direction:column; width:100%;}
							.menu.active		{display:flex;}
							.menu>li			{width:100%;}
							.submenu			{position:static; width:100%;}
							.has-submenu:hover>.submenu	{display:none;}
							.has-submenu.open>.submenu	{display:block;}
}
		END :: MOBILE */