/******************** CSS Variables **************/
:root {
	--fond: #D9E1F8;
  	--primary: #AABEF9;
	--secondaire: #4868CC;
	--fondactif: #132A72; 
  	--dark: #0C2470;
  	--light: #fff;
	--actif: #ECEE14;
	--actif1: #305CE8;
	--rouge: #FA0F04;
  	--shadow: 0 2px 10px rgba(104, 104, 104, 0.8);
}

h1 {
  color: #3366cc; /* Text color */
  font-size: 2em; /* Font size */
  font-weight: bold; /* Font weight (bold) */
  text-align: left; /* Text alignment */
  /* Add more styles as needed */
}

body {
  background-color: #D9E1F8;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

/******************** NAV  CSS  **************/
nav2 
{
    margin: 10px auto;
    width: 100%;
    height: 100px;
    background: var(--fond);
}
 
nav2 .main_pages 
{
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 100%;
	font-size: 1.5em;
	display: flex;
    justify-content: space-around;
}
 
nav2 .main_pages a 
{
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    text-decoration: none;
  	font-family: Arial, Helvetica, sans-serif;
  	color: var(--light);
    background: var(--secondaire);

}
 
nav2 a:hover 
{
 	background: var(--fondactif);
  	color: var(--actif);

}

/******************** mobile menu  **************/

label, #toggle2
{
    display: none;
	text-align: left;
}



@media all and (max-width: 1200px)
{
    nav2
    {
        height: 60px;
    background: var(--secondaire);
	position: relative;
	z-index: 3;

    }
 
    nav2 .main_pages 
    {
        display: none;
        flex-direction: column;
        background: var(--primary);
        height: 220px;
		/**position: absolute;**/
		font-size: 1em;
    }
 
    nav2 .main_pages a {
        width: 50%;

    }
 
    label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        cursor: pointer;
		justify-content: flex-start;
    }
 
    #toggle2:checked + .main_pages {
        display: flex;
    }

}

/******************** CSS body **************/
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .container {
      max-width: 100%;
      margin: 0 auto;
      padding: 20px;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }


    .boxMi {
      width: calc(100% - 10px);
	  height: 300px;
      margin-bottom: 20px;
	  color: var(--DARK);
      background-color: var(--primary);
      padding: 20px;
      box-sizing: border-box;
      font-size: 1.5rem;
	  text-align: left;
    }

    .boxMi1 {
      width: calc(33% - 10px);
	  height: 600px;
      margin-bottom: 20px;
	  color: var(--dark);
      background-color: var(--primary);
      padding: 20px;
      box-sizing: border-box;
      font-size: 1.2rem;
	  text-align: left;
    }
    .boxMi2 {
      width: calc(33% - 10px);
	  height: 600px;
      margin-bottom: 20px;
	  color: var(--dark);
      background-color: var(--primary);
      padding: 20px;
      box-sizing: border-box;
      font-size: 1.2rem;
	  text-align: left;
    }

.boxMi a {
  	font-family: Arial, Helvetica, sans-serif;
	background: var(--secondaire);
  	color: var(--light);
	text-decoration: none;
}
	
.boxMi a:hover {
  	font-family: Arial, Helvetica, sans-serif;
	background: var(--secondaire);
  	color: var(--actif);
	
}
.boxMi1 a {
  	font-family: Arial, Helvetica, sans-serif;
	background: var(--secondaire);
  	color: var(--light);
	text-decoration: none;
}
	
.boxMi1 a:hover {
  	font-family: Arial, Helvetica, sans-serif;
	background: var(--secondaire);
  	color: var(--actif);
	
}

    .boxMi3 {
      width: calc(33% - 10px);
	  height: 600px;
      margin-bottom: 20px;
	  color: var(--dark);
      background-color: var(--primary);
      padding: 20px;
      box-sizing: border-box;
      font-size: 1.2rem;
	  text-align: left;
    }
.boxMi3 a {
  	font-family: Arial, Helvetica, sans-serif;
	background: var(--secondaire);
  	color: var(--light);
	text-decoration: none;
}
	
.boxMi3 a:hover {
  	font-family: Arial, Helvetica, sans-serif;
	background: var(--secondaire);
  	color: var(--actif);
	
}
.boxPied {
    width: 100%;
	height: 50px;
    background-color: var(--secondaire);
  	color: var(--light);
	text-align: center;
	text-decoration: none;
    padding: 20px;
    box-sizing: border-box;
    font-size: 1rem;
    }


    /* Pour les écrans plus petits, ajustez la largeur des boîtes */
@media all and (max-width: 1200px) {
      .boxMi {
       width: 100%;
      font-size: 0.8rem;
	  height: 180px;
      }

  	 .boxMi1 {
      width: calc(33% - 10px);
      font-size: 0.8rem;
      padding: 2px;
	  height: 600px;
     }

      .boxMi2 {
      width: calc(33% - 10px);
      font-size: 0.8rem;
      padding: 2px;
	  height: 600px;
      }


    .boxMi3 {
      width: calc(33% - 10px);
	  height: 600px;
      padding: 2px;
      font-size: 0.8rem;
    }
/******************** fin **************/