@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&display=swap');


html
{
	scroll-behavior: smooth;
}

body 
{
    padding-top: 56px;
	background-color:white;
	font-family: "Patrick Hand", cursive;
	font-weight: 400;
	font-style: normal;
	margin:auto;
	overflow-x: hidden;
	width:100%;
	
	background-image:url("img/fond-crayons3.2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:right;
	
}

.container h3, .container p, .container-accueil p, footer, .bodycontact, .container-ressources
{
	 font-family: "Noto Sans", sans-serif;
}
.container-accueil p a, nav, h1
{
	font-family: "Patrick Hand", cursive;
}

/*-------------NAVIGATION----------------*/ 
nav
{
	background-color:#FFDF92;
	font-size:1.5em;
	
	
}
.navbar-brand
{
	color:;
	font-size:1.5em;
}

.navbar-collapse
{
	justify-content:right;
}

.nav-link:hover
{
	color:#FF5249;
}

.dropdown-menu
{
	background-color:#FFDF92;
	font-size:1em;
}
.dropdown-item:hover
{
	background-color:#FFDF92;
	color:#FF5249;
}

.navbar-nav .nav-link.active 
{
    color: #FF5249; 
    
}


/*---------JUMBOTRON----------*/

.jumbotron 
{
	background-image:url("img/fond-crayons2.4.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	color:white;
	padding-top:100px;
	padding-bottom:100px;
	font-size:1.3em;
}

.btn-primary-res
{
	background-color:#B8B8F3;
	font-size:1em;
	border:2px solid #B8B8F3;
	border-radius:10px;
}
.btn-primary-res:hover, .btn-primary-res:focus
{
	background-color:white;
	border:2px solid #B8B8F3;
	color:black;
}

.tlogo
{
	font-size:3em;
}

.lead
{
	font-size:1.2em;
}

.flechebas
{
	margin-top:20px;
	margin-bottom:-80px;
	color:white;
}

/*----------Contenu accueil-------*/

.container-accueil .row
{
	display:flex;
	justify-content:center;
}

.container-accueil .col-lg-4-1
{
	border:;
	border-radius:10px;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.33);
	margin:10px;
	padding:10px;
	max-width:400px;
	font-size:1.1em;
	background-color:white;
	
	display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	
}

.container-accueil .r01
{
	text-align:center;
	
	
	width:85%;
	margin:auto;
}
.container-accueil .r02
{
	text-align:center;
	
	padding-bottom:10px;
	width:85%;
	margin:auto;
}

.container-accueil .r01>h2
{
	font-size:3em;
	background-color:white;
	margin-top:20px;
	border-radius:20px;
}
.container-accueil .r02>h2
{
	font-size:3em;
	background-color:white;
	margin-top:20px;
	border-radius:20px;
	
}

.container-accueil .col-lg-6
{
	border:;
	border-radius:10px;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.33);
	margin:10px;
	padding:10px;
	max-width:400px;
	font-size:1.1em;
	background-color:white;
	
	display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.container-accueil img
{
	width:100%;
	
}

.container-accueil .btn-secondary-math
{
	background-color:#7BB9EC;
	font-size:1.5em;
	border:2px solid #7BB9EC;
	border-radius:10px;
	
}
.container-accueil .btn-secondary-math:hover, .container-accueil .btn-secondary-math:focus
{
	background-color:white;
	
	color:black;
}

.container-accueil .btn-secondary-fr
{
	background-color:#FF5249;
	font-size:1.5em;
	border:2px solid #FF5249;
	border-radius:10px;
	margin-top:26px;
}
.container-accueil .btn-secondary-fr:hover, .container-accueil .btn-secondary-fr:focus
{
	background-color:white;
	
	color:black;
}

.container-accueil .btn-secondary-eveil
{
	background-color:#7BEC8B;
	font-size:1.5em;
	border:2px solid #7BEC8B;
	border-radius:10px;
}
.container-accueil .btn-secondary-eveil:hover, .container-accueil .btn-secondary-eveil:focus
{
	background-color:white;
	
	color:black;
}

/*-------TAB - Niveau scolaire------*/
.tabcontent {
    display: none;
}

.tab 
{
	display:flex;
	margin-bottom:50px;
}
.tab button 
{
	
	margin:0;
	border:none;
	width:100px;
	height:50px;
	font-size:1.3em;
	
}
.tab button:hover, .tab button:focus
{
	
	background-color:#FFDF92;
	
}


#tab1 {
    display: block;
}


/*----------Math-------*/

.container-math
{
	padding:80px 20px 20px 20px;
	width:70%;
	margin:auto;
	height:;
	margin-bottom:200px;
}

.container-math h1:first-of-type
{	
	text-align:center;
	margin-bottom:30px;
	font-size:3em;
	background-color:#7BB9EC;
	border-radius:20px;
}

.container-math .Ex01 p
{
	font-size:1.4em;
}

.container-math .Ex01 .repcache
{
	color:#22C029;
	font-weight:bold;
	font-size:;
}

.container-math .Ex01 a.rep
{
	background-color:#7BB9EC;
	margin-left:10px;
	padding:5px;
	border-radius:10px;
	color:black;
	text-decoration:none;
}

.container-math h2
{
	margin-bottom:20px;
}

.container-math .Ex03 form
{
	font-size:1.2em;
	
}

.container-math .Ex03 label
{
	margin:10px 0px 10px 0px;
	
}
.container-math .Ex03 select
{
	margin-left:10px;
	width:50px;
}

.container-math .Ex03 button
{
	margin-top:10px;
	padding:10px;
	background-color:#7BB9EC;
	border:none;
	border-radius:10px;
}
.container-math .Ex03 button:hover, .container-math .Ex03 button:focus
{
	background-color:#76A1E7;
}

#result
{
	margin-top:10px;
	color:#22C029;
	font-size:1.5em;
	
}

/*----------Francais-------*/

.container-fr
{
	padding:80px 20px 20px 20px;
	width:70%;
	margin:auto;
	height:;
	margin-bottom:200px;
}

.container-fr h1:first-of-type
{	
	text-align:center;
	margin-bottom:30px;
	font-size:3em;
	background-color:#FF5249;
	border-radius:20px;
}

.container-fr h2
{
	margin-bottom:20px;
}

.container-fr .Ex01 p
{
	font-size:1.4em;
}

.container-fr .Ex01 .repcache
{
	color:#22C029;
	font-weight:bold;
	font-size:;
}

.container-fr .Ex01 a.rep
{
	background-color:#FF5249;
	margin-left:10px;
	padding:5px;
	border-radius:10px;
	color:black;
	text-decoration:none;
}

.container-fr .Ex03 form
{
	font-size:1.2em;
	
}

.container-fr .Ex03 label
{
	margin:10px 0px 10px 0px;
	
}
.container-fr .Ex03 select
{
	margin-left:10px;
	width:120px;
}

.container-fr .Ex03 button
{
	margin-top:10px;
	padding:10px;
	background-color:#FF5249;
	border:none;
	border-radius:10px;
}
.container-fr .Ex03 button:hover, .container-fr .Ex03 button:focus
{
	background-color:#EE3F3F;
}

.container-fr .Ex03 #result
{
	margin-top:10px;
	color:#22C029;
	
}

/*----------Eveil-------*/

.container-eveil
{
	
	width:70%;
	margin:auto;
	height:;
	
	padding:80px 20px 20px 20px;
	margin-bottom:300px;
}

.container-eveil h1:first-of-type
{	
	text-align:center;
	margin-bottom:30px;
	font-size:3em;
	background-color:#7BEC8B;
	border-radius:20px;
}

.container-eveil h2
{
	margin-bottom:20px;
}

.container-eveil .Ex01 p
{
	font-size:1.4em;
}

.container-eveil .Ex01 .repcache
{
	color:#22C029;
	font-weight:bold;
	font-size:;
}

.container-eveil .Ex01 a.rep
{
	background-color:#7BEC8B;
	margin-left:10px;
	padding:5px;
	border-radius:10px;
	color:black;
	text-decoration:none;
}

.container-eveil .Ex02 input
{
	width:15px;
	height:15px;
}
.container-eveil .Ex02 label
{
	font-size:25px;
}



.container-eveil .Ex03 form
{
	font-size:1.2em;
	
}

.container-eveil .Ex02 button
{
	
	padding:10px;
	background-color:#7BEC8B;
	border:none;
	border-radius:10px;
}
.container-eveil .Ex02 button:hover, .container-eveil .Ex02 button:focus
{
	background-color:#6EE097 ;
}
.container-eveil .Ex02 #resultat, #score
{
	color:#22C029;
	font-size:1.5em;
	margin-bottom:50px;
}

.container-eveil .Ex03 label
{
	margin:10px 0px 10px 0px;
	
}
.container-eveil .Ex03 select
{
	margin-left:10px;
	width:100px;
}

.container-eveil .Ex03 button
{
	margin-top:10px;
	padding:10px;
	background-color:#7BEC8B;
	border:none;
	border-radius:10px;
}
.container-eveil .Ex03 button:hover, .container-eveil .Ex03 button:focus
{
	background-color:#6EE097 ;
}

.container-eveil .Ex03 #result
{
	margin-top:10px;
	color:#22C029;
	
}


/*----------Ressources-------*/

.container-ressources
{
	padding-top:70px;
	width:70%;
	margin:auto;
	margin-bottom:20px;
}

.container-ressources h1
{	
	text-align:center;
	margin-bottom:30px;
	font-size:3em;
	background-color:#B8B8F3;
	border-radius:20px;
}

.container-ressources .embed-responsive
{
	text-align:center;
}

/*---------Contact----------*/

.container-contact
{
	padding-top:40px;
	width:70%;
	margin:auto;
}

.container-contact h1
{	
	text-align:center;
	margin-bottom:30px;
	font-size:3em;
	background-color:#FFDF92;
	border-radius:20px;
}

.container-contact iframe
{	
	
}

.container-contact form
{
	max-width:600px;
}

.container-contact iframe
{
	
	justify-content:center;
	margin-bottom:20px;
}

.container-contact button
{
	margin-top:20px;
	margin-bottom:20px;
}

/*----------FOOTER-----------*/

footer
{
	background-color:#FFDF92;
	text-align:center;
	width:100%;
	padding-bottom:30px;
	padding-top:30px;
}