/*Breakpoints : 480 768 1024 1280 1920*/
/*---------------------------------------------------------------------------*/
/*------------------ PERSONNALISATION D'ELEMENTS DE TYPE LANDING PAGE ----------------------*/
/*---------------------------------------------------------------------------*/

	/*--------------------------------  Fonts ------------------------------------*/

	* {
		word-break: break-word !important;
	}
	
	.bebas  {
	  font-family: "Bebas Neue", sans-serif;
	  font-weight: 400;
	  font-style: normal;
	}	
	
	body { 
		font-family: "Roboto", sans-serif;
		font-optical-sizing: auto;
		font-weight: 200;
		font-style: normal;

	}
	
	input, select, textarea {
		font-family: "Roboto", sans-serif;
		font-optical-sizing: auto;
		font-weight: 200;
		font-style: normal;
	}

	
	h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 , .h6  {
		font-optical-sizing: auto;
		font-weight: 200;
		font-style: normal;
	}

	.my_page bold, .my_page .bold, .my_page strong, .my_page .strong  {
		font-weight:400 !important;
	}

	.my_page h1, .my_page .h1 {
	  font-size: clamp(1.75rem, 4vw, 4.5rem) !important;
	}
	
	.my_page h2, .my_page .h2 {
	  font-size: clamp(1.5rem, 2vw, 2.5rem) !important;
	}

	.my_page h3, .my_page .h3 {
	  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
	}
	
	.my_page h4, .my_page .h4 {
		font-size: clamp(1.125rem, 2vw, 1.2rem) !important;
	}
	
	/* Corps de texte */
	.my_page p, .my_page .p, .my_page li, .my_page .li, .my_page div, .my_page .div {
	  font-size: clamp(1rem, 1vw, 1rem); 
	}
	
	
	
	/*--------------------------------  Couleurs ------------------------------------*/
	* { color:#002b1f}	
	
	.bg-color-noir, .my_page .bg-color-noir { background-color:#000000; }	
	.bg-color-blanc, .my_page .bg-color-blanc { background-color:#ffffff; }
	.bg-color-gris, .my_page .bg-color-gris { background-color:#E8E8E8; }	
	.bg-color-1, .my_page .bg-color-1 { background-color:#00303d !important; }
	.bg-color-2, .my_page .bg-color-2 { background-color:#0096c7 !important; }
	.bg-color-3, .my_page .bg-color-3 { background-color:#b1cbe5 !important; }
	.bg-color-4, .my_page .bg-color-4 { background-color:#ff0000 !important; }

	.color-noir, .my_page .color-noir { color:#000000; }	
	.color-blanc, .my_page .color-blanc { color:#ffffff; }
	.color-gris, .my_page .color-gris { color:#E8E8E8; }	
	.color-1, .my_page .color-1 { color:#00303d !important; }
	.color-2, .my_page .color-2 { color:#0096c7 !important; }
	.color-3, .my_page .color-3 { color:#b1cbe5 !important; }
	.color-4, .my_page .color-4 { color:#ff0000 !important; }

	.my_page .checklist > li::before, .my_page .checklist > div::before {
	  color: #0096c7;
	}
	
.my_page ol.classic li::before {
  left: -14px !important;
  margin-right: 8px !important;
  padding: 1px 0 !important;
  top: -2px !important;
  font-size: 1.5rem !important;
  color: #0096c7 !important;
}
.my_page ol.classic > li {
  padding: 0 0 0 12px !important;
}

	
	
	
/*--------------------------------  Conteneurs : généralités ------------------------------------*/
	
	
	.my_page, .my_container {
		max-width:1280px;
		margin:0px auto;
	}
	
	
	/*--------------------------------- Gauche Droite ---------------------------------------------------------*/
@media screen and (min-width: 1024px) {
  .my_page .my_container .gauche { width: 100%; max-width: 800px; }
  .my_page .my_container .droite { width:100%; max-width:480px }
}

	/*--------------------------------- / Gauche Droite ---------------------------------------------------------*/

	.my_page .grid-container {
		
	}	

	/* Grid colonnes */

	
	/* breakpoint at 1280px */
@media screen and (min-width: 1280px) {
	.my_page .grid-container {
		grid-template-columns: 62.5% 37.5% !important;
	}
}
	
	
	/* Faire moitié / moitié > Pour couper la page en deux colonnes de même taille */
	
	/* breakpoint at 1280px
	@media screen and (min-width: 1280px) {
		.my_page .grid-container {
			grid-template-columns: 50% 50% !important;
		}
	}			
	 */
	
	/* /Grid colonnes */

/*--------------------------------  Conteneurs : spécificités ------------------------------------*/		

	.landing {
		padding-bottom:100px;
	}

	.my_page .puce-a:before { background-image:url('https://dummyimage.com/24x24/000/fff'); }
	.my_page .puce-b:before { background-image:url('https://dummyimage.com/24x24/555/fff'); }
	.my_page .puce-c:before { background-image:url('https://dummyimage.com/24x24/aaa/fff'); }
	
	#bg {
		background-image:url('https://dummyimage.com/1280x800/000/fff');
		background-repeat:no-repeat;
		background-position:top left;
		background-color:# !important;
		background-size:cover;
	}

	


/*--------------------------------  Form ------------------------------------*/	
		/*btn*/
		.my_page .btn, .my_page .submit-btn {
			background-color: #E2001A !important;
			color:#ffffff !important;
			border-radius:10px;
		}
		
		.my_page .btn:hover, .my_page .submit-btn:hover {
			background-color: rgb(0,0,0,0.8) !important;
			background-color: #000000!important;
			color:#ffffff !important;
		}
		
		.my_page .btn:hover {
			background-color: rgb(0,0,0,0.8) !important;
			background-color: #000000 !important;
			color:#ffffff !important;
		}

		
		.my_page input[type="radio"]:checked {
			border: 5px solid #EDEDF4;
			background: #ffffff;
		}	
		
		
		
		/*checkbox*/
		.my_page .form-check-input#anime { background-color: rgba(203, 203, 214, 1);  }	
		

		.my_page .form-check-input[type=checkbox]::before {
		 position:absolute;
		 content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' fill='none' stroke-width='2px' stroke='white' stroke-linecap='round' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6'%3E%3C/polyline%3E%3C/svg%3E");
		 transform:scale(0);
			top: 0.1rem;
			left: 0.1rem;
		}
		
		.my_page label:hover {
		color: #000000 !important;
		}	
		



		
/*--------------------------------  Theme fixs ------------------------------------*/			
		
	/*--------------------------------  Spectra Builder Asdd On ------------------------------------*/			
		
.uagb-forms-main-submit-button-text , .uagb-button__link {
	color:#ffffff !important;
	font-weight:bold  !important;
}

ol, ul {
  margin: 0px 0px 0px 0px !important;
}