/******************** CSS Variables **************/
:root {
  	--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);
}


    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: 100px;
      margin-bottom: 20px;
	  color: var(--light);
      background-color: var(--secondaire);
      padding: 20px;
      box-sizing: border-box;
      font-size: 1.5rem;
	  text-align: center;
    }

    .boxMi1 {
      width: calc(25% - 10px);
	  height: auto;
      margin-bottom: 20px;
	  color: var(--dark);
      background-color: var(--primary);
      padding: 20px;
      box-sizing: border-box;
      font-size: 1.5rem;
	  text-align: center;
    }

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

    .boxMi3 {
      width: 100%;
	  height: 200px;
      margin-bottom: 20px;
      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) {
      .boxMi1 {
        width: 100%;
      font-size: 0.8rem;
	  height: 180px;
      }

  	 .boxMi {
    	display: none; /* Hide the boxMi2 element */
     }

    .boxMi3 {
      width: 100%;
	  height: 40px;
      padding: 2px;
      font-size: 0.5rem;
    }