body {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1500px;
    margin: 25px auto;
    padding: 20px;
    background-color: #f9f9f9;
    
}

header {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


.entete{
    padding: 5px;
    text-align: center;

}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
  margin: 1rem;
  margin-top: 50px;
}

/** --Debut-- Armoirie de la République**/
/*#logo1 {
    margin-left: 940px;
    padding: 35%;
    height: 200px;
    
}*/
/*@media screen and (max-width: 1500px ) {
    .logo1 {
        margin-top: -26%;
        width: 45%;
        margin-left: 55%;
    }

    #logo1 {
        margin-top: 22%;
        width: 45%;
        margin-left: 55%;
    }

    .logo {
        margin-top: 10%;
        width: 45%;
        margin-right: 55%;
    }

    #logo {
        margin-top: -20%;
        width: 45%;
        margin-right: 55%;
    }
    /*body{
        width: 100%;
    }
}*/

/*.logo1{
      margin-top: 10px;
      width: 10px;
      height: 10px;
}*/

@media screen and (max-width: 1500px){
     .logo1 {
        margin-top: -26%;
        width: 45%;
        margin-left: 55%;
    }

    #logo1 {
        margin-top: 18%;
        width: 45%;
        margin-left: 55%;
    }
}

@media screen and (max-width: 1500px){
     .logo {
        margin-top: 10%;
        width: 45%;
        margin-right: 55%;
    }

    #logo {
        margin-top: -20%;
        width: 45%;
        margin-right: 55%;
    }
}
/** --Fin-- Armoirie de la République **/


/************** nav (Menu)*****************************************************/
nav {
    background-color: #3498db;
    padding: 1em;
    border-radius: 8px;
    margin-top: 20px;
}
nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

/***** Pour éliminer le soulinement des liens****/
nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s ease;
}
/***** Pour éliminer le soulinement des liens fin ****/


/****** Pour le survolement du texte **************/
nav ul li a:hover {
    color: #ff4081;
}
/****** Pour le survolement du texte fin **************/

/************** nav (Menu) fin ***************************************************/

/************** Section revue début ***************************************************/
:root {
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --accent-color: #e74c3c;
}

/*******************---------------- Style pour les revues début ----------------------*******************/


/*******************---------------- Début Section Première Publication N°5 Décembre 2024 ---------**************************/

/*******************---------------- Début Carte 00000 ----------------------*******************/

.journal-card00000 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  
}

.journal-card00000:hover {
  transform: translateY(-5px);
}

.journal-cover00000 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00000 {
  margin-bottom: 15px;
}

.journal-title00000 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00000 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
/*************************---------- Fin Carte 00000 ---------***************************************************/


/*************************---------- Début Carte 00001 -------***************************************************/
.journal-card00001 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -490px;
  
}

.journal-card00001:hover {
  transform: translateY(-5px);
}

.journal-cover00001 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00001 {
  margin-bottom: 15px;
}

.journal-title00001 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00001 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/******************************------- Fin Carte 00001 ----------*******************************************************/

/******************************------- Début Carte 00002 ----------*****************************************************/
.journal-card00002 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -440px;
  
}


.journal-card00002:hover {
  transform: translateY(-5px);
}

.journal-cover00002 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00002 {
  margin-bottom: 15px;
}

.journal-title00002 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}



.btn00002 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/******************************------- Fin Carte 00002 ---------*******************************************************/

/******************************------- Début Carte 00003 ---------*******************************************************/
.journal-card00003 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 30px;
  
}


.journal-card00003:hover {
  transform: translateY(-5px);
}

.journal-cover00003 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00003 {
  margin-bottom: 15px;
}

.journal-title00003 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}



.btn00003 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*************************-------- Fin Carte 00003 ----------*********************************************************/

/*************************-------- Début Carte 00004 ----------*********************************************************/
.journal-card00004 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -530px;
  
}


.journal-card00004:hover {
  transform: translateY(-5px);
}

.journal-cover00004 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00004 {
  margin-bottom: 15px;
}

.journal-title00004 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}



.btn00004 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/********************----------- Fin Carte 00004 ----------************************************************************/

/********************----------- Fin Carte 00005 ----------************************************************************/
.journal-card00005 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -470px;
  
}


.journal-card00005:hover {
  transform: translateY(-5px);
}

.journal-cover00005 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00005 {
  margin-bottom: 15px;
}

.journal-title00005 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}



.btn00005 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/***********************---------- Fin Carte 00005 -------*************************************************************/

/***********************---------- Début Carte 00006 -------************************************************************/
.journal-card00006 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 10px;
  
}


.journal-card00006:hover {
  transform: translateY(-5px);
}

.journal-cover00006 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00006 {
  margin-bottom: 15px;
}

.journal-title00006 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00006 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*********************------- Fin Carte 00006 ---------------**********************************************************/

/*********************------- Fin Carte 00007 ---------------**********************************************************/
.journal-card00007 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -495px;
  
}

.journal-card00007:hover {
  transform: translateY(-5px);
}

.journal-cover00007 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00007 {
  margin-bottom: 15px;
}

.journal-title00007 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00007 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*********************------- Fin Carte 00007 -----------**************************************************************/

/******************------------- Fin Section Première Publication N°5 Décembre 2024 -----------************************/


/******************------------- Début Section Deuxième Publication N°4 Juin 2023 -----------**************************/


/******************------------- Début Carte 00008 -----------*********************************************************/

.journal-card00008 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 10px;
  
}

.journal-card00008:hover {
  transform: translateY(-5px);
}

.journal-cover00008 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00008 {
  margin-bottom: 15px;
}

.journal-title00008 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00008 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*****************---------- Fin Carte 00008 -----------***************************************************************/

/*****************---------- Début Carte 00009 -----------***************************************************************/

.journal-card00009 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -450px;
  
}

.journal-card00009:hover {
  transform: translateY(-5px);
}

.journal-cover00009 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00009 {
  margin-bottom: 15px;
}

.journal-title00009 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}


.btn00009 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/********************------------- Fin Carte 00009 -----------------**************************************************/


/********************------------- Début Carte 00010 -----------------**************************************************/
.journal-card00010 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -469px;
  
}

.journal-card00010:hover {
  transform: translateY(-5px);
}

.journal-cover00010 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00010 {
  margin-bottom: 15px;
}

.journal-title00010 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00010 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00010 ----------------------****************************************/

/********************------------- Début Carte 00011 -----------------**************************************************/
.journal-card00011 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 30px;
  
}

.journal-card00011:hover {
  transform: translateY(-5px);
}

.journal-cover00011 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00011 {
  margin-bottom: 15px;
}

.journal-title00011 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00011 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00011 ----------------------****************************************/

/********************------------- Début Carte 00012 -----------------**************************************************/
.journal-card00012 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 390px;
  margin-top: -469px;
  
}


.journal-card00012:hover {
  transform: translateY(-5px);
}

.journal-cover00012 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00012 {
  margin-bottom: 15px;
}

.journal-title00012 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00012 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00012 ----------------------****************************************/

/********************------------- Début Carte 00013 -----------------**************************************************/
.journal-card00013 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 770px;
  margin-top: -490px;
  
}


.journal-card00013:hover {
  transform: translateY(-5px);
}

.journal-cover00013 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00013 {
  margin-bottom: 15px;
}

.journal-title00013 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00013 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00013 ----------------------****************************************/

/********************------------- Début Carte 00014 -----------------**************************************************/
.journal-card00014 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 10px;
  
}

.journal-card00014:hover {
  transform: translateY(-5px);
}

.journal-cover00014 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00014 {
  margin-bottom: 15px;
}

.journal-title00014 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00014 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00014 ----------------------****************************************/

/********************------------- Début Carte 00015 -----------------**************************************************/
.journal-card00015 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -490px;
  
}

.journal-card00015:hover {
  transform: translateY(-5px);
}

.journal-cover00015 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00015 {
  margin-bottom: 15px;
}

.journal-title00015 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00015 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00015 ----------------------****************************************/

/********************------------- Début Carte 00016 -----------------**************************************************/
.journal-card00016 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 780px;
  margin-top: -480px;
  
}


.journal-card00016:hover {
  transform: translateY(-5px);
}

.journal-cover00016 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00016 {
  margin-bottom: 15px;
}

.journal-title00016 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00016 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00016 ----------------------****************************************/

/********************------------- Début Carte 00017 -----------------**************************************************/
.journal-card00017 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 70px;
  
}

.journal-card00017:hover {
  transform: translateY(-5px);
}

.journal-cover00017 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00017 {
  margin-bottom: 15px;
}

.journal-title00017 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00017 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00017 ----------------------****************************************/

/********************------------- Début Carte 00018 -----------------**************************************************/
.journal-card00018 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -470px;
  
}

.journal-card00018:hover {
  transform: translateY(-5px);
}

.journal-cover00018 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00018 {
  margin-bottom: 15px;
}

.journal-title00018 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00018 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00018 ----------------------****************************************/

/********************------------- Début Carte 00019 -----------------**************************************************/
.journal-card00019 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -495px;
  
}

.journal-card00019:hover {
  transform: translateY(-5px);
}

.journal-cover00019 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00019 {
  margin-bottom: 15px;
}

.journal-title00019 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00019 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00019 ----------------------****************************************/

/********************------------- Début Carte 00020 -----------------**************************************************/
.journal-card00020 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00020:hover {
  transform: translateY(-5px);
}

.journal-cover00020 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00020 {
  margin-bottom: 15px;
}

.journal-title00020 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00020 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00020 ----------------------****************************************/


/******************------------- Début Section troisième Publication N°2 Juin 2022 -----------**************************/


/******************------------- Début Carte 00021 -----------*********************************************************/

.journal-card00021 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 10px;
  
}

.journal-card00021:hover {
  transform: translateY(-5px);
}

.journal-cover00021 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00021 {
  margin-bottom: 15px;
}

.journal-title00021 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00021 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*****************---------- Fin Carte 00021 -----------***************************************************************/

/*****************---------- Début Carte 00022 -----------***************************************************************/

.journal-card00022 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -520px;
  
}

.journal-card00022:hover {
  transform: translateY(-5px);
}

.journal-cover00022 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00022 {
  margin-bottom: 15px;
}

.journal-title00022 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}


.btn00022 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/********************------------- Fin Carte 00022 -----------------**************************************************/


/********************------------- Début Carte 00023 -----------------**************************************************/
.journal-card00023 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -515px;
  
}

.journal-card00023:hover {
  transform: translateY(-5px);
}

.journal-cover00023 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00023 {
  margin-bottom: 15px;
}

.journal-title00023 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00023 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00023 ----------------------****************************************/

/********************------------- Début Carte 00024 -----------------**************************************************/
.journal-card00024 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 60px;
  
}

.journal-card00024:hover {
  transform: translateY(-5px);
}

.journal-cover00024 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00024 {
  margin-bottom: 15px;
}

.journal-title00024 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00024 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00024 ----------------------****************************************/

/********************------------- Début Carte 00025 -----------------**************************************************/
.journal-card00025 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 390px;
  margin-top: -490px;
  
}


.journal-card00025:hover {
  transform: translateY(-5px);
}

.journal-cover00025 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00025 {
  margin-bottom: 15px;
}

.journal-title00025 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00025 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00025 ----------------------****************************************/

/********************------------- Début Carte 00026 -----------------**************************************************/
.journal-card00026 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 780px;
  margin-top: -490px;
  
}


.journal-card00026:hover {
  transform: translateY(-5px);
}

.journal-cover00026 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00026 {
  margin-bottom: 15px;
}

.journal-title00026 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00026 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00026 ----------------------****************************************/

/********************------------- Début Carte 00027 -----------------**************************************************/
.journal-card00027 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 30px;
  
}

.journal-card00027:hover {
  transform: translateY(-5px);
}

.journal-cover00027 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00027 {
  margin-bottom: 15px;
}

.journal-title00027 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00027 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00027 ----------------------****************************************/

/********************------------- Début Carte 00028 -----------------**************************************************/
.journal-card00028 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -565px;
  
}

.journal-card00028:hover {
  transform: translateY(-5px);
}

.journal-cover00028 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00028 {
  margin-bottom: 15px;
}

.journal-title00028 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00028 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00028 ----------------------****************************************/

/********************------------- Début Carte 00029 -----------------**************************************************/
.journal-card00029 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 780px;
  margin-top: -450px;
  
}


.journal-card00029:hover {
  transform: translateY(-5px);
}

.journal-cover00029 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00029 {
  margin-bottom: 15px;
}

.journal-title00029 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00029 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00029 ----------------------****************************************/

/********************------------- Début Carte 00030 -----------------**************************************************/
.journal-card00030 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: -10px;
  
}

.journal-card00030:hover {
  transform: translateY(-5px);
}

.journal-cover00030 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00030 {
  margin-bottom: 15px;
}

.journal-title00030 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00030 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00030 ----------------------****************************************/

/********************------------- Début Carte 00031 -----------------**************************************************/
.journal-card00031 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -690px;
  
}

.journal-card00031:hover {
  transform: translateY(-5px);
}

.journal-cover00031 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00031 {
  margin-bottom: 15px;
}

.journal-title00031 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00031 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00031 ----------------------****************************************/

/********************------------- Début Carte 00032 -----------------**************************************************/
.journal-card00032 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -400px;
  
}

.journal-card00032:hover {
  transform: translateY(-5px);
}

.journal-cover00032 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00032 {
  margin-bottom: 15px;
}

.journal-title00032 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00032 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00032 ----------------------****************************************/

/********************------------- Début Carte 00033 -----------------**************************************************/
.journal-card00033 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 70px;
  
}


.journal-card00033:hover {
  transform: translateY(-5px);
}

.journal-cover00033 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00033 {
  margin-bottom: 15px;
}

.journal-title00033 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00033 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00033 ----------------------****************************************/

/********************------------- Début Carte 00034 -----------------**************************************************/
.journal-card00034 {
  margin: 25px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -810px;
  
}

.journal-card00034:hover {
  transform: translateY(-5px);
}

.journal-cover00034 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00034 {
  margin-bottom: 15px;
}

.journal-title00034 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00034 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00034 ----------------------****************************************/

/********************------------- Début Carte 00035 -----------------**************************************************/
.journal-card00035 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -460px;
  
}


.journal-card00035:hover {
  transform: translateY(-5px);
}

.journal-cover00035 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00035 {
  margin-bottom: 15px;
}

.journal-title00035 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00035 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00035 ----------------------****************************************/

/********************------------- Début Carte 00036 -----------------**************************************************/
.journal-card00036 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 180px;
  
}


.journal-card00036:hover {
  transform: translateY(-5px);
}

.journal-cover00036 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00036 {
  margin-bottom: 15px;
}

.journal-title00036 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00036 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00036 ----------------------****************************************/

/********************------------- Début Carte 00037 -----------------**************************************************/
.journal-card00037 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -780px;
  
}


.journal-card00037:hover {
  transform: translateY(-5px);
}

.journal-cover00037 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00037 {
  margin-bottom: 15px;
}

.journal-title00037 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00037 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00037 ----------------------****************************************/

/********************------------- Début Carte 00038 -----------------**************************************************/
.journal-card00038 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -410px;
  
}


.journal-card00038:hover {
  transform: translateY(-5px);
}

.journal-cover00038 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00038 {
  margin-bottom: 15px;
}

.journal-title00038 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00038 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00038 ----------------------****************************************/

/********************------------- Début Carte 00039 -----------------**************************************************/
.journal-card00039 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 120px;
  
}


.journal-card00039:hover {
  transform: translateY(-5px);
}

.journal-cover00039 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00039 {
  margin-bottom: 15px;
}

.journal-title00039 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00039 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00039 ----------------------****************************************/

/********************------------- Début Carte 00040 -----------------**************************************************/
.journal-card00040 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 35px;
  
}


.journal-card00040:hover {
  transform: translateY(-5px);
}

.journal-cover00040 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00040 {
  margin-bottom: 15px;
}

.journal-title00040 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00040 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00040 ----------------------****************************************/

/********************------------- Début Carte 00041 -----------------**************************************************/
.journal-card00041 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -539px;
  
}


.journal-card00041:hover {
  transform: translateY(-5px);
}

.journal-cover00041 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00041 {
  margin-bottom: 15px;
}

.journal-title00041 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00041 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00041 ----------------------****************************************/

/********************------------- Début Carte 00042 -----------------**************************************************/
.journal-card00042 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -500px;
  
}


.journal-card00042:hover {
  transform: translateY(-5px);
}

.journal-cover00042 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00042 {
  margin-bottom: 15px;
}

.journal-title00042 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00042 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00042 ----------------------****************************************/

/********************------------- Début Carte 00043 -----------------**************************************************/
.journal-card00043 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: -25px;
  
}


.journal-card00043:hover {
  transform: translateY(-5px);
}

.journal-cover00043 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00043 {
  margin-bottom: 15px;
}

.journal-title00043 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00043 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00043 ----------------------****************************************/

/********************------------- Début Carte 00044 -----------------**************************************************/
.journal-card00044 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -510px;
  
}


.journal-card00044:hover {
  transform: translateY(-5px);
}

.journal-cover00044 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00044 {
  margin-bottom: 15px;
}

.journal-title00044 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00044 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00044 ----------------------****************************************/

/********************------------- Début Carte 00045 -----------------**************************************************/
.journal-card00045 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -570px;
  
}


.journal-card00045:hover {
  transform: translateY(-5px);
}

.journal-cover00045 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00045 {
  margin-bottom: 15px;
}

.journal-title00045 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00045 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00045 ----------------------****************************************/

/********************------------- Début Carte 00046 -----------------**************************************************/
.journal-card00046 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: -120px;
  
}


.journal-card00046:hover {
  transform: translateY(-5px);
}

.journal-cover00046 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00046 {
  margin-bottom: 15px;
}

.journal-title00046 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00046 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00046 ----------------------****************************************/

/********************------------- Début Carte 00047 -----------------**************************************************/
.journal-card00047 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -410px;
  
}


.journal-card00047:hover {
  transform: translateY(-5px);
}

.journal-cover00047 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00047 {
  margin-bottom: 15px;
}

.journal-title00047 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00047 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00047 ----------------------****************************************/

/********************------------- Début Carte 00048 -----------------**************************************************/
.journal-card00048 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -470px;
  
}


.journal-card00048:hover {
  transform: translateY(-5px);
}

.journal-cover00048 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00048 {
  margin-bottom: 15px;
}

.journal-title00048 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00048 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00048 ----------------------****************************************/

/********************------------- Début Carte 00049 -----------------**************************************************/
.journal-card00049 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: -100px;
  
}


.journal-card00049:hover {
  transform: translateY(-5px);
}

.journal-cover00049 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00049 {
  margin-bottom: 15px;
}

.journal-title00049 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00049 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00049 ----------------------****************************************/

/********************------------- Début Carte 00050 -----------------**************************************************/
.journal-card00050 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -480px;
  
}


.journal-card00050:hover {
  transform: translateY(-5px);
}

.journal-cover00050 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00050 {
  margin-bottom: 15px;
}

.journal-title00050 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00050 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00050 ----------------------****************************************/

/********************------------- Début Carte 00051 -----------------**************************************************/
.journal-card00051 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -450px;
  
}


.journal-card00051:hover {
  transform: translateY(-5px);
}

.journal-cover00051 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00051 {
  margin-bottom: 15px;
}

.journal-title00051 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00051 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00051 ----------------------****************************************/

/********************------------- Début Carte 00052 -----------------**************************************************/
.journal-card00052 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: -30px;
  
}


.journal-card00052:hover {
  transform: translateY(-5px);
}

.journal-cover00052 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00052 {
  margin-bottom: 15px;
}

.journal-title00052 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00052 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00052 ----------------------****************************************/

/********************------------- Début Carte 00053 -----------------**************************************************/
.journal-card00053 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 400px;
  margin-top: -490px;
  
}


.journal-card00053:hover {
  transform: translateY(-5px);
}

.journal-cover00053 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00053 {
  margin-bottom: 15px;
}

.journal-title00053 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00053 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00053 ----------------------****************************************/

/********************------------- Début Carte 00054 -----------------**************************************************/
.journal-card00054 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 790px;
  margin-top: -480px;
  
}


.journal-card00054:hover {
  transform: translateY(-5px);
}

.journal-cover00054 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00054 {
  margin-bottom: 15px;
}

.journal-title00054 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00054 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00054 ----------------------****************************************/

/********************------------- Début Carte 00055 -----------------**************************************************/
.journal-card00055 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: -35px;
  
}


.journal-card00055:hover {
  transform: translateY(-5px);
}

.journal-cover00055 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00055 {
  margin-bottom: 15px;
}

.journal-title00055 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00055 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00055 ----------------------****************************************/

/********************------------- Début Carte 00056 -----------------**************************************************
.journal-card00056 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00056:hover {
  transform: translateY(-5px);
}

.journal-cover00056 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00056 {
  margin-bottom: 15px;
}

.journal-title00056 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00056 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00056 ----------------------****************************************

/********************------------- Début Carte 00057 -----------------**************************************************
.journal-card00057 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00057:hover {
  transform: translateY(-5px);
}

.journal-cover00057 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00057 {
  margin-bottom: 15px;
}

.journal-title00057 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00057 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00057 ----------------------****************************************

/********************------------- Début Carte 00040 -----------------**************************************************
.journal-card00040 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00040:hover {
  transform: translateY(-5px);
}

.journal-cover00040 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00040 {
  margin-bottom: 15px;
}

.journal-title00040 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00040 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00040 ----------------------****************************************

/********************------------- Début Carte 00041 -----------------**************************************************
.journal-card00041 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00041:hover {
  transform: translateY(-5px);
}

.journal-cover00041 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00041 {
  margin-bottom: 15px;
}

.journal-title00041 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00041 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00041 ----------------------****************************************

/********************------------- Début Carte 00042 -----------------**************************************************
.journal-card00042 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00042:hover {
  transform: translateY(-5px);
}

.journal-cover00042 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00042 {
  margin-bottom: 15px;
}

.journal-title00042 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00042 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00042 ----------------------****************************************

/********************------------- Début Carte 00040 -----------------**************************************************
.journal-card00040 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00040:hover {
  transform: translateY(-5px);
}

.journal-cover00040 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00040 {
  margin-bottom: 15px;
}

.journal-title00040 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00040 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00040 ----------------------****************************************

/********************------------- Début Carte 00041 -----------------**************************************************
.journal-card00041 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00041:hover {
  transform: translateY(-5px);
}

.journal-cover00041 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00041 {
  margin-bottom: 15px;
}

.journal-title00041 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00041 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00041 ----------------------****************************************

/********************------------- Début Carte 00042 -----------------**************************************************
.journal-card00042 {
  margin: 10px;
  width: 25%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-top: 45px;
  
}


.journal-card00042:hover {
  transform: translateY(-5px);
}

.journal-cover00042 {
  width: 100%;
  height: 250%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.journal-info00042 {
  margin-bottom: 15px;
}

.journal-title00042 {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}

.btn00042 {
  display: inline-block;
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/*******************---------------- Fin Carte 00042 ----------------------****************************************/

/*******************---------------- Style pour la section recherche début ----------------------*******************/

.search-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.search-header {
  text-align: center;
  margin-bottom: 30px;
}

.search-form {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: bold;
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.search-button {
  background: #4CAF50;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background 0.3s ease;
}

.search-button:hover {
  background: #45a049;
}

#results {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.result-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.result-item:last-child {
  border-bottom: none;
}
/*******************---------------- Style pour la section recherche fin  ----------------------*******************/

/************* Tous sur les cartes indivuduelle début ********************************/

  .card {
    min-width: 300px;
    height: 400px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
  }


  /*********** Section des reseaux sociaux ***********************************/

.carte .reseau img{
  width: 40px;
  border-radius: 50%;
  margin: 3px 3px;
  transition: background 0.5s;
}

.carte .reseau .img:hover{
  background: rgb(240, 90, 195);
}

footer .carte .reseau .img a{
  font-size: 20px;
  margin: 10px auto;
  max-width: 330px;
}

footer.carte .reseau .img {
  width: 40px;
  margin: 2px 2px;
  transition: background 0.5s;
}

footer .carte .reseau .img :hover{
  transform: scale(1.2);
}

/*********** Section des reseaux sociaux fin ***********************************/

.bouton{
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  background: #fff;
  color: rgb(226, 59, 184);
  padding: 10px 30px;
  border-radius: 30px;
  margin: 0px 0 0px;
}

/************* Carte Individuelle Pour Agent INRSSH Fin ******************************/

/******------- Les fléches de filement début --------------------***************/

.container {
    position: relative;
    width: 1500px;
    max-width: 1300px;
    overflow: hidden;
}
/******------- Les fléches de filement fin --------------------***************/

/******------- Permet d'Afficher les cartes côte à côte début --------------------***************/

.carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.arrow:hover {
  background-color: rgba(0,0,0,0.7);
}

.arrow-left {
  left: 10px;
}

.arrow-right {
  right: 10px;
}
.arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}
.arrow-left::before {
  transform: rotate(-135deg);
}
/*********************************************************************/
.carousel1 {
  display: flex;
  transition: transform 0.5s ease;
}
.arrow1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.arrow1:hover {
  background-color: rgba(0,0,0,0.7);
}

.arrow1-left {
  left: 10px;
}

.arrow1-right {
  right: 10px;
}

.arrow1-left::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}
.arrow1-left::before {
  transform: rotate(-135deg);
}

/*********************************************************************/
.carousel2 {
  display: flex;
  transition: transform 0.5s ease;
}
.arrow2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.arrow2:hover {
  background-color: rgba(0,0,0,0.7);
}

.arrow2-left {
  left: 10px;
}

.arrow2-right {
  right: 10px;
}

.arrow2-left::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}
.arrow2-left::before {
  transform: rotate(-135deg);
}

/*********************************************************************/
.carousel3 {
  display: flex;
  transition: transform 0.5s ease;
}
.arrow3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.arrow3:hover {
  background-color: rgba(0,0,0,0.7);
}

.arrow3-left {
  left: 10px;
}

.arrow3-right {
  right: 10px;
}

.arrow3-left::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}
.arrow3-left::before {
  transform: rotate(-135deg);
}

/*********************************************************************/
.carousel4 {
  display: flex;
  transition: transform 0.5s ease;
}
.arrow4 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.arrow4:hover {
  background-color: rgba(0,0,0,0.7);
}

.arrow4-left {
  left: 10px;
}

.arrow4-right {
  right: 10px;
}

.arrow4-left::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}
.arrow4-left::before {
  transform: rotate(-135deg);
}
/******------- Permet d'Afficher les cartes côte à côte fin --------------------***************/

  .separateur {
  color: #1a237e;
    border-bottom: 2px solid #3f51b5;
    padding-bottom: 10px;
    margin: 20px;
  }
 
/******------- Permet de créer la marge entre les cartes début --------------------***************/

.card {
    flex: 0 0 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 0 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.card1 {
  flex: 0 0 300px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 0 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

/******------- Permet de creer la marge entre les cartes fin --------------------***************/
  
.card:hover {
    transform: translateY(-5px);
}
 
/******------- Cercle de la photo début --------------------***************/
.photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
    border: 3px solid #3498db;
}
/******------- Cercle de la photo fin --------------------***************/
  
.name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
}
  .function {
    color: #777;
    margin-bottom: 15px;
  }
  .social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
  }
  .social-icon {
    width: 30px;
    height: 30px;
    fill: #3498db;
    transition: fill 0.3s ease;
  }
  .social-icon:hover {
    fill: #2980b9;
  }
  .email-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .email-btn:hover {
    background-color: #2980b9;
  }
  
/************* Tous sur les cartes indivuduelle fin ********************************/


  
/************* Footer (Peid de Page)********************************/

footer {
    background-color: #3498db;
    color: white; 
    text-align: center;
    padding: 0em;
    border-radius: 8px;
    margin-top: 20px;
    width: 1500px;
  
}

footer a:-webkit-any-link{
    color: black;
}

/******************* Section réseaux sociaux *************************/

footer img a{
    font-size: 20px;
    margin: 10px auto;
    max-width: 330px;
}

footer img{
    width: 55px;
    margin: 2px 2px;
    transition: background 0.5s;
}

footer img:hover{
    transform: scale(1.2);
}

/******************* Section réseaux sociaux fin ****************/

/************* Footer (Peid de Page) Fin *************************************************/