/* LES VARIABLES CSS : */

:root {
  --main-background-color: #f7f7f7;
  --main-background-color2: #e0e0e0;
  --main-color: #2c57da;
  --main-color-hover: #2443a0;

  --main-border-radius:3px;
}



@font-face {
  font-family: 'stph-font';
  src: url('/sources/fonts/stph-font.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

.connected{display: var(--connected);}
.hh-title{
  position: absolute; 
  top: clamp(25px, 2vh, 50px);
  font-family: stph-font;
  font-size: clamp(25px, 6vw, 90px); 
  color: rgba(240, 248, 255, 0.932); 
  text-shadow: rgb(10, 10, 10) 1px 0 10px;
}
.svg_small{
  height: 30px;
}
.editor-svg{
  width: 20px;
  height: 20px;
  fill: rgb(255, 255, 255);
}
.editor-ctn-btn{
  position: relative;

}
.editor-btn-unit{
  background-color: var(--main-color);
  border-style: none;
  border-radius: 50px;
  padding: 7px;
  color: white;
  right: -20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.editor-btn-g{
  background-color: var(--main-color);
  border-style: none;
  border-radius: 50px;
  padding: 10px 20px 10px 20px;
  color: white;
  right: -20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.ctn-svg {
  /* width: 100%; */
  max-width: fit-content;
  /* height: 100%; */
  max-height: fit-content;
}
.ctn-svg svg {
  width: 100%;
  height: 100%;
}
.arm-svg {
  height: 40px;
  fill: black;
}
.arm-svg-pdf {
  height: 25px;
  fill: var(--main-color);
}
.arm-tab {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 15px;

}
/* ******************** */
/* #region MAIN SELECTORS */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: open_sans, Arial, Helvetica, sans-serif;
  background-color: var(--main-background-color);
}
body {
  display: flex;
  flex-direction: column;
  position: inherit;
}

header {
  z-index: 500;
}

a {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}
button {
  cursor: pointer;
}
ul {
  list-style-type: none;
  padding: 0;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 45px;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  text-align: center;

}

h1 {
  font-size: 30px;
  font-weight: 700;

  text-align: center;
  font-size: clamp(30px, 4vw, 48px);

}
h2 {
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 700;
}

p{
  font-size: clamp(14px, 3vw, 17px);
  margin-top: 12px;
  margin-bottom: 12px;
  text-wrap: pretty;

}

span {
  color: var(--main-color-hover);
  font-weight: 700;
}

img {
  max-width: 100%;
}

/* #endregion MAIN SELECTORS */
/* ******************** */
/* ******************** */
/* #region MEDIA QUERIES MAIN SELECTORS */
/* ******************** */

@media (min-width: 1201px) {

  main {
    position: relative;
    margin-top: 60px;
  }
}

/* ******************** */
/* #endregion MEDIA QUERIES MAIN SELECTORS*/
/* ******************** */

.hidden {
  display: none;
  transform: translateX(100%); /* Déplace la div vers la droite */
  opacity: 0; /* Rend la div transparente */
}

.l-ctn-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin-bottom: 20px;
}
.l-ctn-main img {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
@media (min-width: 850px) {
  .l-ctn-main {
    width: 70%;
  }
}


.l-dfr{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: relative;
}
.l-dfc {
  display: flex;
  flex-direction: column;
}
.l-dfr-center{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.l-dfc-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ******************** */
/* #region HEADER */

.pc-main-menu {

  background-color: var(--main-background-color);
  position: relative;
  width: 100%;
}

.pc-header {
  display: flex;
  flex-direction: row;
  background-color: var(--main-background-color);
  justify-content: space-between;
  align-items: center;
  position: fixed;
  padding-left: 3px;
  height: 35px;
  top: 0px;
  z-index: 500;
  width: 100%;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); /* Ombre vers le bas */
}

.pc-menu-sublist{
  position: fixed;
  min-width: 200px;
  top: 70px;
  padding: 15px;
  background-color: var(--main-background-color);
  border-radius: var(--main-border-radius);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);

}
.pc-menu-sublist li:not(:first-child){
  margin-top: 6px;
  padding-top: 6px;
  border-top: 2px solid #000000a9;
}
.pc-menu-ctn {
  width: 100%;
}

.pc-ctn-login {
  display: none;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-right: 15px;
}
.pc-login-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.pc-menu-list {
  display: flex;
  justify-content: center;
  /* gap: 25px; */
  gap: clamp(20px, 2vw,250px);
  width: 100%;
} 
.pc-menu-list li a {
  font-size: 1.1em ;
  font-weight: 700;
}

.mobile-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--main-background-color);
  height: 45px;
  position: fixed;
  width: 100%;
  z-index: 1700;
}

.mobile-main-menu {
  margin-top: 35px;
  background-color: var(--main-background-color);
  width: calc(100% - 40px);
  position: fixed;
  padding: 20px;
  right: 0;
}


.hamburger-menu-icon {
  margin-top: 5px;
  margin-right: 5px;
  width: 35px;
}


.mobile-menu-mainlist {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 2px solid rgba(43, 1, 1, 0.363);
  border-bottom: 2px solid rgba(43, 1, 1, 0.363);
}
.mobile-menu-mainlist li {
  border-bottom: 1px solid rgba(43, 1, 1, 0.363);
}
.mobile-menu-mainlist li a{
  font-size: 25px;
  font-weight: 50;
  display: block;
  width: 100%;
}
.mobile-menu-sublist{
  margin-left: 20px; 
  padding: 10px;}
.mobile-menu-sublist li:not(:last-child) {
  margin-bottom: 15px;
}
.mobile-menu-sublist li a {
  width: 100%;
}

/* ************ */
/* mobile et pc */
/* ************ */

.href a:hover{
  text-decoration: underline;
  text-decoration-color: var(--main-color);
  text-decoration-thickness: 2px; /* Ajustez l'épaisseur de la ligne de soulignement */
  text-underline-offset: 3px; /* Ajustez la distance entre le texte et la ligne de soulignement */
}

.toto{
  text-decoration: underline;
  text-decoration-color: var(--main-color);
  text-decoration-thickness: 2px; /* Ajustez l'épaisseur de la ligne de soulignement */
  text-underline-offset: 3px; /* Ajustez la distance entre le texte et la ligne de soulignement */
}

.login-icon {
  width: 25px;
  height: 25px;
}
.logo-header {
  margin-top: 5px;
  width: 60px;
  height: 60px;
  transition: 0.3s;
}
.logo-header:hover {
  transform: scale(0.95);
}
.menu-arrow-down {
  height: 15px;
  width: 15px;
  position: relative;
  top: 1px;
}

/* #endregion HEADER */
/* ******************** */
/* ***************************** */
/* #region MEDIA QUERIES HEADER */
/* ******************** */

@media (max-width: 320px) {
  .pc-header {
    display: none;
  }
}

@media (min-width: 321px) and (max-width: 768px) {
  .pc-header {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .pc-header {
    display: none;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .pc-header {
    display: none;
  }
}

@media (min-width: 1201px) {
  .pc-header {
    height: 70px;
  }
  .mobile-header {
    display: none;
  }


  #pc-main-menu {
    display: block;
  }

  .logo-header {
    margin-top: 20px;
    width: 80px;
    height: 80px;
  }
  .pc-ctn-login {
    display: flex;
  }
  .hamburger-menu-mobile {
    display: none;
  }
}

/* ******************** */
/* #endregion MEDIA QUERIES */
/* *************************** */

/* ******************** */
/* #region FOOTER */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--main-background-color2);
  width: 100%;
  z-index: 450;
  overflow: hidden;
  padding-bottom: 30px;
  gap: 25px;
}

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-top: 50px solid var(--main-background-color);
  -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(1px 3px 1px rgba(0, 0, 0, 0.3));
}

.footer-infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;   
}

.footer-buttons {
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
  gap: 10px;
  align-items: center;
}

.footer-title {
  color: #000000;
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 10px;
}

.footer-text {
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  /* margin: 14px 0 41px; */
}

.footer-container {
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.footer-container.child{
  flex: 1;
}
.footer-container.child1{
  order: 2;
}
.footer-container.child2{
  order: 3;
}
.footer-container.child3{
  order: 1;
}


.footer-logo {
  align-items: center;
  box-sizing: border-box;
}
.footer-menu {}
.footer-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* width: 100%; */
  gap: clamp(30px, 8vw, 100px);
  list-style-type: disc;
}
.footer-btn-icons {
  width: 20px;
  height: 20px;
}
.logo-footer {
  width: 120px;
}

.front-page-button {
  background-color: var(--main-color);
  width: 300px;
  min-height: 40px;
  padding: 0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.05em;
  /* text-transform: uppercase; */
  transition: all 0.35s ease-in-out;
}
.front-page-button:hover {
  color: var(--main-background-color);
  background-color: var(--main-color-hover);
  transition: all 0.35s ease-in-out;
}
.front-page-button span {
  color: var(--main-background-color);
}

/* #endregion FOOTER */
/* ******************** */
/* ***************************** */
/* #region MEDIA QUERIES FOOTER */
/* ******************** */

@media (max-width: 320px) {
  .child1, .child2{
    text-align: center;
  }
}

@media (min-width: 321px) and (max-width: 768px) {
  .child1, .child2{
    text-align: center;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .footer-infos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding-top: 10px;
  }
  .footer-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
  .footer-infos .child1{
    text-align: end;
  }

  .footer-container.child1{
    order: 1;
    flex: 2;
  }
  .footer-container.child2{
    order: 3;
    flex: 2;
  }
  .footer-container.child3{
    order: 2;
    flex: 1;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .footer-infos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding-top: 10px;
  }
  .footer-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
  .footer-infos .child1{
    text-align: end;
  }

  .footer-container.child1{
    order: 1;
    flex: 2;
  }
  .footer-container.child2{
    order: 3;
    flex: 2;
  }
  .footer-container.child3{
    order: 2;
    flex: 1;
  }
}

@media (min-width: 1201px) {
  .footer-infos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding-top: 10px;
    width: 70%;
  }
  .footer-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }

  .footer-infos .child1{
  text-align: end;
}

  .footer-container.child1{
    order: 1;
    flex: 2;
  }
  .footer-container.child2{
    order: 3;
    flex: 2;
  }
  .footer-container.child3{
    order: 2;
    flex: 1;
  }
}

/* ******************** */
/* #endregion MEDIA QUERIES */
/* *************************** */

/* ********************* */
/* #region PAGE ACCUEIL */
/* ******************** */

/* ******************** */
/* #region SECTION HOMEHEAD */
/* ******************** */

.directs-links {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 60%;
  margin-top: -110px;
  margin-bottom: 20px;
  background-color: var(--main-background-color);
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  z-index: 150;
}
.direct-link-ct {
  width: 25%;
}
.direct-link-ct p {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.direct-link-ct-last {
  width: 25%;
  background-color: var(--main-color);
}
.direct-link-ct-last p{
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.direct-link-ct:hover {
  background-color: var(--main-color);
}
.direct-link-ct-last:hover {
  background-color: var(--main-background-color);
}
.direct-link-ct:hover div svg {
  fill: rgb(255, 255, 255);
}
.direct-link-ct:hover p {
  color: rgb(255, 255, 255);
}
.direct-link-ct-last div svg {
  fill: rgb(255, 255, 255);
}
.direct-link-ct-last p {
  color: rgb(255, 255, 255);
}
.direct-link-ct-last:hover div svg {
  fill: rgb(0, 0, 0);
}
.direct-link-ct-last:hover p {
  color: rgb(0, 0, 0);
}
.directs-links-svg {
  margin-top: 18px;
  height: 85px;
  fill: rgb(0, 0, 0);
}
.hhc-phototheque-blue {
  background-color: var(--main-color);
  fill: #e0e0e0;
}
.hhc-phototheque-blue:hover {
  background-color: var(--main-background-color);
}
/* ******************** */
/* #endregion SECTION HOMEHEAD */
/* ******************** */

/* ******************** */
/* #region SECTION ACTUALITES */

.actualites-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background-color: var(--main-background-color);
}
.actualites-container--prs {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--main-background-color);
  max-width: 90%;
  flex: 1;
  box-sizing: border-box;


}

/* LES DEUX CLASSES QUI SUIVENT EXISTENT CAR L'ELEMENT CHANGE DE POSITION PAR RAPPORT AUX AUTRES ELEMENTS DU CONTAINER D'OU L'INDENTATION DES CLASSES QUI MONTRE QUELLES NE SONT PAS DANS LA MËME DIV */
.g-btn-pc {
  max-width: 300px;
  width: 70%;
  height: 45px;
  font-size: 16px;
  color: var(--main-background-color);
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: var(--main-color);
  border-radius: 2px;
  border-width: 0;
  cursor: pointer;
}
.g-btn-pc:hover {
  background-color: var(--main-color-hover);
}
.g-btn-mb {
  width: 70%;
  max-width: 400px ;
  height: 45px;
  font-size: 16px;
  color: var(--main-background-color);
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: var(--main-color);
  border-radius: 2px;
  border-width: 0;
  cursor: pointer;
}
.g-btn-mb:hover {
  background-color: var(--main-color-hover);
}
.g-link-btn-pc{display: flex; justify-content: center; align-items: center; min-width:350px;}
.g-link-btn-mb{display: flex; justify-content: center; min-width: 100%;}
.actu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--main-background-color);
  /* width: 90%; */
  /* box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.15); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.actu-card:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
#actu-card-1, #actu-card-2{flex: 1;}
.actu-card-content{
  position: relative;
  left: 20px;
}
.actu-card-img {
  width: 100%;
}
.actu-card-date {
  position: relative;
  background-color: var(--main-color);
  top: -20px;
  margin: 0;
  margin-bottom: -20px;
  padding: 10px;
  border-radius: 2px;
  color: var(--main-background-color);
}
.actu-card-category {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--main-color);
}
.actu-card-title {
  font-size: 22px;
  font-weight: 700;
}
.actu-card-link {
  font-size: 18px;
}

/* #endregion */
/* ******************** */

/* ******************** */
/* #region SECTION EVENTS */

.events-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: var(--main-background-color2);
}
.events-container--prs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.events-container--prs-txt {
  font-size: 15px;
}
/* LES DEUX CLASSES QUI SUIVENT EXISTENT CAR L'ELEMENT CHANGE DE POSITION PAR RAPPORT AUX AUTRES ELEMENTS DU CONTAINER D'OU L'INDENTATION DES CLASSES QUI MONTRE QUELLES NE SONT PAS DANS LA MËME DIV */



.events-container-multicards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--main-background-color);
  width: 90%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  padding-bottom: 15px;
  cursor: pointer;
}
.event-card:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.event-card-img {
  width: 100%;
}
.event-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding-left: 30px;
}
.event-card-content p {
  margin: 0px;
}
.event-card-date {
  position: relative;
  background-color: var(--main-color);
  top: -20px;
  padding: 10px;
  border-radius: 2px;
  color: var(--main-background-color);
}
.event-card-category {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--main-color);
  padding-bottom: 15px;
}
.event-card-title {
  font-size: 22px;
  font-weight: 700;
}
.event-card-link {
  font-size: 18px;
  padding-top: 15px;
}

/* #endregion SECTION EVENTS */
/* ******************** */

/* ******************** */
/* #region SECTION WELCOME */

.welcome-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;

}
.welcome-container--prs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.welcome-container--prs-txt {
  width: 75%;
}
.welcome-container--datas {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 70%;
}
.welcome-container--datas-cards {
  display: flex;
  flex-direction: column;
}
.welcome-container--datas-cards span {
  margin: 0;
}
.welcome-container--datas-cards-numbers {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

.welcome-container--datas-cards-units {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
/* #endregion SECTION WELCOME */
/* ******************** */

/* ******************** */
/* #endregion PAGE ACCUEIL */
/* ******************** */
/* ************************************ */
/* #region MEDIA QUERIES  PAGE ACCUEIL */
/* ******************** */

@media (max-width: 320px) {

  .g-btn-pc {
    display: none;
  }
  .g-link-btn-pc {
    display: none;
  }
  #actu-card-2 {
    display: none;
  }
  #event-card-2 {
    display: none;
  }
  #event-card-3 {
    display: none;
  }
  #event-card-4 {
    display: none;
  }

  .events-container--prs-txt {
    display: none;
  }
  .events-container--prs-btn-pc {
    display: none;
  }

  .directs-links {
    display: none;
  }
}

@media (min-width: 321px) and (max-width: 768px) {

  .g-btn-pc {
    display: none;
  }
  .g-link-btn-pc {
    display: none;
  }

  #actu-card-2 {
    display: none;
  }
  #event-card-2 {
    display: none;
  }
  #event-card-3 {
    display: none;
  }
  #event-card-4 {
    display: none;
  }
  .events-container--prs-txt {
    display: none;
  }
  .events-container--prs-btn-pc {
    display: none;
  }

  .directs-links {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .actualites-container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .actu-card {
    margin: 10px;
  }

  .g-btn-mb {
    display: none;
  }
  .g-link-btn-mb {
    display: none;
  }

  #event-card-4 {
    display: none;
  }

  .events-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .events-container--prs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    margin: 10px;
  }
  .events-container-multicards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .event-card {
    margin: 10px;
  }


  .directs-links {
    display: none;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .actualites-container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .g-btn-mb {
    display: none;
  }
  .g-link-btn-mb {
    display: none;
  }
  .actu-card {
    margin: 10px;
  }

  .events-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .events-container--prs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    margin: 10px;
  }

  .events-container-multicards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .event-card {
    margin: 10px;
  }
}

@media (min-width: 1201px) {
  .actualites-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .g-btn-mb {
    display: none;
  }
  .g-link-btn-mb {
    display: none;
  }
  .actu-card {
    margin: 10px;
    width: 25%;
  }
  .events-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .events-container--prs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    margin: 10px;
  }
  .events-container-multicards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .event-card {
    margin: 10px;
  }
  .events-container--prs-btn-pc {
    width: 300px;
  }

  .welcome-container--datas-cards-numbers {
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .welcome-container--datas-cards-units {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }
}

/* ******************** */
/* #endregion MEDIA QUERIES PAGE ACCUEIL*/
/* ********************************** */

/* ********************************* */
/* #region PAGE PRESENTATION + QUERIES */
/* ******************************* */

.pprst-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 20px;
  padding: 20px;
}
.pprst-img {
  width: 80%;
}

.pprst-ct1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pprst-ct1 p {
  margin-left: 40px;
  margin-right: 40px;
}


@media (max-width: 1200px) {
  .pprst-ct1 p {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 1201px) {
  /* page de presentation  */
  .pprst-img {
    width: 50%;
  }
  .pprst-ct1 {
    flex-direction: row;
  }
}

/* ********************************* */
/* #endregion PAGE PRESENTATION + QUERIES */
/* ******************************* */

/* ********************************* */
/* #region PAGE HISTOIRE + QUERIES */
/* ******************************* */
.l-ctn-sh1,
.l-ctn-sh2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.l-ctn-sh1 .child,
.l-ctn-sh2 .child {
  flex: 1;
  width: 90%;
}

@media (min-width: 850px) {
  .l-ctn-sh1,
  .l-ctn-sh2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .l-ctn-sh1,
  .l-ctn-sh2 {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .l-ctn-sh1 .child,
  .l-ctn-sh2 .child {
    flex: 1;
    width: 50%;
  }
  .l-ctn-sh2 {
    flex-direction: row-reverse;
  }
  .l-ctn-sh1 p,
  .l-ctn-sh2 p {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* ********************************* */
/* #endregion PAGE HISTOIRE + QUERIES */
/* ******************************* */

/* ********************************* */
/* #region PAGE ARBORETUM + QUERIES */
/* ******************************* */

/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap"); */

.timeline-container *,
.timeline-container *::before,
.timeline-container *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline-container {
  --color: rgba(30, 30, 30);
  --bgColor: rgba(245, 245, 245);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: "Poppins", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}

.timeline {
  --accent-color: #182c86;
  --col-gap: 2rem;
  --row-gap: 2rem;
  --line-w: 0.25rem;
  display: grid;
  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;
  column-gap: var(--col-gap);
  list-style: none;
  width: min(60rem, 90%);
  margin-inline: auto;
}

/* line */
.timeline::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  background: rgb(225, 225, 225);
  border-radius: calc(var(--line-w) / 2);
}

/* columns*/

/* row gaps */
.timeline-item:not(:last-child) {
  margin-bottom: var(--row-gap);
}

/* card */
.timeline-item {
  grid-column: 2;
  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);
  grid-row: span 2;
  display: grid;
  grid-template-rows: min-content min-content min-content;
}

/* date */
.timeline-date {
  --dateH: 3rem;
  height: var(--dateH);
  margin-inline: calc(var(--inlineP) * -1);

  text-align: center;
  background-color: var(--accent-color);

  color: white;
  font-size: 1.25rem;
  font-weight: 700;

  display: grid;
  place-content: center;
  position: relative;

  border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* date flap */
.timeline-date::before {
  content: "";
  width: var(--inlineP);
  aspect-ratio: 1;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;

  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

/* circle */
.timeline-date::after {
  content: "";
  position: absolute;
  width: 2rem;
  aspect-ratio: 1;
  background: var(--bgColor);
  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;
  top: 50%;

  transform: translate(50%, -50%);
  right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* title descr */
.timeline-title,
.timeline-descr {
  background: var(--bgColor);
  position: relative;
  padding-inline: 1.5rem;
}
.timeline-title {
  overflow: hidden;
  padding-block-start: 1.5rem;
  padding-block-end: 1rem;
  font-weight: 500;
}
.timeline-descr {
  padding-block-end: 1.5rem;
  font-weight: 300;
}

/* shadows */
.timeline-title::before,
.timeline-descr::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
}
.timeline-title::before {
  bottom: calc(100% + 0.125rem);
}

.timeline-descr::before {
  z-index: -1;
  bottom: 0.25rem;
}

.t-ctn-img {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.t-ctn-img img {
  width: 90%;
}

@media (max-width: 320px) {
  .timeline-descr {
    display: none;
  }
}

@media (min-width: 321px) and (max-width: 768px) {
  .timeline-descr {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
}

@media (min-width: 993px) {
  .timeline {
    grid-template-columns: 1fr var(--line-w) 1fr;
  }
  .timeline::before {
    grid-column: 2;
  }
  .timeline-item:nth-child(odd) {
    grid-column: 1;
  }
  .timeline-item:nth-child(even) {
    grid-column: 3;
  }

  /* start second card */
  .timeline-item:nth-child(2) {
    grid-row: 2/4;
  }

  .timeline-item:nth-child(odd) .timeline-date::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
  }

  .timeline-item:nth-child(odd) .timeline-date::after {
    transform: translate(-50%, -50%);
    left: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  .timeline-item:nth-child(odd) .timeline-date {
    border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
  }
}

/* @media (min-width: 1201px) {
} */

/* ********************************* */
/* #endregion PAGE ARBORETUM + QUERIES */
/* ******************************* */



/* ********************************************************** */
/* ********************************************************** */
/* ********************************************************** */


#secretariat-m .l-ctn-main {
    width: 90%;
}
.lyd1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.lyd1 div h3 {
  text-align: start;
}
.lyd1 .--child1 {
  text-align: start;
}
.lyd1 .--child2 {
  text-align: center;
}  
.lyd1-1 {
    display: flex;
    flex-direction: column;  
}
.lyd1-1 div {
  display: flex;
  align-items: center;
}
.lyd1-1 div .ctn-svg svg {
width: 90%;
height: 90%;
fill: #2c57da;
}
@media (min-width: 1050px) {
    .lyd1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
}


/* ********************************************************** */
/* ********************************************************** */
/* ********************************************************** */





.tdocs-cons tbody tr{
  background-color: rgb(0, 0, 0);
  border:2px solid  var(--main-color);
  } 

  .tdocs-cons tbody tr td{
  padding: 15px;
  color: rgb(0, 0, 0);
  } 

  .tdocs-cons tbody  tr:nth-child(even) {
  background-color: #e2e2e2;/* Couleur de fond pour les lignes paires */
}

.tdocs-cons tbody  tr:nth-child(odd) {
  background-color: #ffffff; /* Couleur de fond pour les lignes impaires */
}

  table {
      border-collapse: collapse;
  }

  @media screen and (max-width: 550px) {
  tbody tr td:last-child {
  display: none;
}
.tdocs-cons tbody tr td{
  padding: 10px;
  } 
}

@media screen and (max-width: 320px) {
tr td:nth-last-child(-n+2) {
  display: none;
}}





/* ********************************************************** */
/* ********************************************************** */
/* ********************************************************** */

/* page en construction :  */

.newtons-cradle {
  --uib-size: 50px;
  --uib-speed: 1.2s;
  --uib-color: #2c57da;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-size);
  height: var(--uib-size);
 }
 
 .newtons-cradle__dot {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 25%;
  transform-origin: center top;
 }
 
 .newtons-cradle__dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 25%;
  border-radius: 50%;
  background-color: var(--uib-color);
 }
 
 .newtons-cradle__dot:first-child {
  animation: swing var(--uib-speed) linear infinite;
 }
 
 .newtons-cradle__dot:last-child {
  animation: swing2 var(--uib-speed) linear infinite;
 }
 
 @keyframes swing {
  0% {
   transform: rotate(0deg);
   animation-timing-function: ease-out;
  }
 
  25% {
   transform: rotate(70deg);
   animation-timing-function: ease-in;
  }
 
  50% {
   transform: rotate(0deg);
   animation-timing-function: linear;
  }
 }
 
 @keyframes swing2 {
  0% {
   transform: rotate(0deg);
   animation-timing-function: linear;
  }
 
  50% {
   transform: rotate(0deg);
   animation-timing-function: ease-out;
  }
 
  75% {
   transform: rotate(-70deg);
   animation-timing-function: ease-in;
  }
 }