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

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

	
	body { 
		font-family: "Roboto", sans-serif;
		font-optical-sizing: auto;
		font-weight: <weight>;
		font-style: normal;
		font-variation-settings:
		"wdth" 100;
	}
	
	input, select, textarea {
		font-family: "Roboto", sans-serif;
	}
	
	h1, .h1, h2, .h2, h3, .h3  {
		font-family: "Roboto", sans-serif;
		font-weight:bold;
	}
	
	h4, .h4, h5, .h5  {
		font-family: "Roboto", sans-serif;
	}
	/*
	.bold  {
		font-family: 'Nom de font Bold' !important;	
		font-weight:normal !important;
	}
	*/
	.my_page h1, .my_page .h1 {
	  font-size: clamp(1.75rem, 3vw, 3rem);
	}
	
	.my_page h2, .my_page .h2 {
	  font-size: clamp(1.5rem, 1.9vw, 2.1rem);
	}

	.my_page h3, .my_page .h3 {
	  font-size: clamp(1.25rem, 1.5vw, 1.9rem);
	}
	
	.my_page h4, .my_page .h4 {
		font-size: clamp(1.125rem, 3vw, 1.5rem);
	}
	
	/* 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:#25477B}	
	
	.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:#25477B !important; }
	.bg-color-2, .my_page .bg-color-2 { background-color:#FE5A3F !important; }
	.bg-color-3, .my_page .bg-color-3 { background-color:#b3d6cc !important; }
	.bg-color-4, .my_page .bg-color-4 { background-color:#aaa !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:#25477B !important; }
	.color-2, .my_page .color-2 { color:#FE5A3F !important; }
	.color-3, .my_page .color-3 { color:#b3d6cc !important; }
	.color-4, .my_page .color-4 { color:#aaa !important; }

	.my_page .checklist > li::before, .my_page .checklist > div::before {
	  color: #13AA5B;
	}
	
	
/*--------------------------------  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 }
}

@media screen and (min-width: 1280px) {
  .my_page .my_container .gauche { width: 100%; max-width: 800px; }
  .my_page .my_container .droite { width:100%; max-width:480px }
  body { padding:40px !important }
}

@media screen and (min-width: 1400px) {
  .my_page .my_container .gauche { width: 100%; max-width: 800px; }
  .my_page .my_container .droite { width:100%; max-width:480px }
  body { padding:80px !important }
}
	/*--------------------------------- / 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('../img/picto-a.svg'); }
	.my_page .puce-b:before { background-image:url('../img/picto-b.svg'); }
	.my_page .puce-c:before { background-image:url('../img/picto-c.svg'); }
	.my_page .puce-d:before { background-image:url('../img/picto-a.svg'); }
	.my_page .puce-e:before { background-image:url('../img/picto-b.svg'); }

	
	#bg {
		background-image:url('https://dummyimage.com/1280x800/000/fff');
		background-repeat:no-repeat;
		background-position:top left;
		background-color:# !important;
		background-size:cover;
	}

	#bg-degrade {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f3f3f3+0,ffffff+100 */
		background: linear-gradient(to right,  #f3f3f3 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	
	.border-radius-2 { border-radius:8px; margin-top:-30px; }


/*--------------------------------  Form ------------------------------------*/	
		/*btn*/
		.my_page .btn, .my_page .submit-btn {
			background-color: #FE5A3F !important;
			color:#ffffff !important;
			border-radius:100px;
		}
		
		.my_page .btn:hover, .my_page .submit-btn:hover {
			background-color: rgb(0,0,0,0.8) !important;
			background-color: #ffffff !important;
			color:#25477B !important !important;
		}
		
		.my_page .btn:hover {
			background-color: rgb(0,0,0,0.8) !important;
			background-color: #ffffff !important;
			color:#25477B !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;
		}	
		
		/*Couleur du titre de la liste déroulante*/
		.my_page select {
			color:#1d1d1b !important;
			padding:0px 10px !important;

		}
		
		
		/*Couleur des options de la liste déroulante */
		.my_page option {
			color:#ffffff !important;
			background-color:#25477B !important;
		}


		
/*--------------------------------  Page de remerciement ------------------------------------*/			
		
		#merci { background-color:#ffffff; padding:0px !important;}
		
		#header-merci {
			border-bottom:2px solid #EBF2F3;
		}
		
	 /*Bouton valider TXT */
		#merci .my_page .btn {
			background-color: #FE5A3F !important;
			color:#ffffff !important;
			border-radius:100px;
		}

		#merci .my_page .btn .submit-btn {
			background-color: #FE5A3F !important;
			color:#ffffff !important;
			border-radius:100px;
		}

		#merci .my_page .btn:hover {
			background-color: rgb(0,0,0,0.8) !important;
			background-color: #ffffff !important;
			color:#25477B !important;
		}