body {
    background-color: #f4efe0; /* Couleur de fond rappelant le papier */
    margin-left: 1%;
    margin-right: 1%;
    font-family: 'Times New Roman', Times, serif;
}


.contact_img {
  display: none;
}



.card-custom {
  background-color: transparent;
  border: 0;
  box-shadow: 0;
}

.card-custom .card-header {
  background-color: transparent;
  color: black;
  padding: 10px 0; /* Espacement interne */
  border-bottom: 1px solid black;
  margin-bottom: 6px;
  font-size: 30px;
  font-weight: normal !important;
}

.card-custom .card-body {
  padding: 0 0; /* Padding généreux pour un aspect spacieux */
  color: #333; /* Texte sombre pour une meilleure lisibilité */
  font-family: 'Georgia', serif; /* Police avec empattements pour un look classique */
}

.card-custom .card-footer {
  background-color: transparent; /* Fond subtil pour le pied de carte */
  border-top: 0; /* Ligne de séparation subtile */
  text-align: right;
  padding: 8px 0;
}


.accordion-button {
  font-size: 40px !important;
  height: 50px;
  width: 100%;
  text-align: left;
  background-color: transparent;
  color: black;
  padding: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.781);
  font-weight: bolder !important;
}
.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: black;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.781);
}

.card-footer a {
  color: #000; /* Couleur initiale du lien */
  text-decoration: none; /* Pas de soulignement initial */
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Animation douce */
  font-style: italic;
}


.card-footer a i {
  margin-left: 1px; /* Espace entre le texte et l'icône */
  transition: transform 0.3s ease; /* Animation de la transformation */
}

.card-footer a:hover i {
  transform: translateX(5px); /* Déplace l'icône plus à droite */
}


/* HEADER && ABOUT */

hr {
  margin: 10px 0;
  border-top: 2px solid black;
  opacity: 1;
}

ul {
  list-style: none;
  padding: 0;
  list-style-position: inside;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
}



nav li {
  margin: 15px 0 15px 0;
}

nav a {
  text-transform: uppercase;
  text-align: center;
  font-size: 1.5em;
  color: #777;
  text-decoration: none;
  transition: color 0.3s ease, font-weight 0.3s ease, text-decoration 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

nav a:hover {
  color: #000000;
  font-weight: bold;
  opacity: 0.8;
}


nav.navigation_gauche, nav.navigation_droite{
  text-align: center;
  width: 150px;
}

#banniere img {
  width: 100%;
  border: 3px solid black;
  box-sizing: border-box;
  max-height: 550px;
  object-fit: cover;
}

nav a {
  text-decoration: none;
}


#a_propos_titre {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1em;
  letter-spacing: 2px;
}

#a_propos_titre h3, #a_propos_titre h2 {
  margin: 0 0 10px 0;

}

#a_propos_titre h3 {
  font-size: 1.5em;

}


#a_propos_partie_gauche img {
  width: 100%;
  object-fit: cover;
}

#a_propos_partie_droite h3 {
  font-size: 2.5em;
  margin: 15px 0 5px 0;
}

#a_propos_partie_gauche {
  display: flex;
  justify-content: center;
}

.colonne_pour_a_propos + div{
	column-count: 1;
	column-gap: 20px;
}

.colonne_pour_a_propos {
  margin: 0;
}

#bande_titre_liste-diplome {
  display: flex;
  justify-content: space-around;
  align-items: center;
}


/*! :::::::::::::::::::::::::::::::::::::::::::: */


header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav.navigation_gauche, nav.navigation_droite{
  text-align: center;
  width: 150px;
}

#a_propos_titre {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1em;
  letter-spacing: 2px;
}

#a_propos_titre h3, #a_propos_titre h2 {
  margin: 0 0 10px 0;

}

#a_propos_titre h3 {
  font-size: 1.5em;

}


#a_propos_partie_droite h3 {
  font-size: 2.5em;
  margin: 15px 0 5px 0;
}

#a_propos_partie_gauche {
  display: flex;
  justify-content: center;
}





/* breakpoint tablette  */
@media screen and (min-width: 667px) {
  body {
    margin: 0px 5% 0px 5%;
  }

  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  nav.navigation_gauche{
    text-align: left;
  }

  nav.navigation_droite{
    text-align: right;
  }

  h1 {
    font-size: 2.5em;
  }

  #a_propos_titre {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3em;
    letter-spacing: 5px;
  }

  .colonne_pour_a_propos + div {
    column-count: 1;
    column-gap: 20px;
    font-size: 1em;
  }


  #a_propos_partie_gauche img {
    width: 90%;
    height: 400px;
  }


  #a_propos_partie_droite h3 {
    font-size: 2em;
  }

  #a_propos_partie_gauche {
    width: 100%;
    display: flex;
    justify-content: flex-start;

  }

  #a_propos_partie_droite hr{
    margin: 0;
  }

  #a_propos_contenu {
    display: flex;
  }

  #a_propos_partie_droite {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .contact_left,
  .contact_right {
    width: 100%;
    display: flex;
  }

  .contact_left {
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  }

  .contact_right {
    -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

  .contact_img {
    object-fit: cover;
    display: block;
    width: 100%;

  }

  #hidden_pictures_contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .contact_left { grid-area: 1 / 1 / 2 / 2; }
  .contact_midle { grid-area: 1 / 2 / 2 / 3; }
  .contact_right { grid-area: 1 / 3 / 2 / 4; }
}


/*? carousel */


.carousel-wrapper object{
  width: 100%;
  height: 100%;
}

/*?  footer */

h5 {
  font-size: 1.5em;
  margin: 0;
  font-weight: bolder;
}

footer a:active, footer a:visited  {
  color: black;
}

footer p {
  text-align: justify;
}

.credit {
  text-align: center;
}

footer a {
  color: black;
}
footer a:visited,
footer a:hover {
  color: rgb(43, 43, 43);
}
footer a:hover {
  text-decoration: underline;
}



@media screen and (min-width: 800px) {

  .colonne_pour_a_propos + div{
    column-count: 2;
    column-gap: 20px;
  }

  .colonne_pour_a_propos + div {
    font-size: 1.1em;
  }

  .footer_order {
    display: flex;
    flex-direction: row;
    justify-content: left;
  }

  .footer_about {
    width: 35%;
  }
  .footer_links {
    padding: 0 5% 0 5%;
  }
}


@media screen and (min-width: 800px) and (max-width: 991px) {
  .colonne_pour_a_propos + div {
    font-size: 1em;
  }

  #a_propos_partie_gauche {
    width: 70%;
  }
}

@media screen and (min-width: 1200px) {

  .colonne_pour_a_propos + div {
    column-count: 2;
    column-gap: 20px;
    font-size: 1.3em;
    margin: 15px 0;
  }
}


@media screen and (min-width: 1200px) and (max-width: 1400px) {

  .colonne_pour_a_propos + div {
    font-size: 1.18em;
  }
}







  /*? CONTACT */

  .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 0.1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: center;
    }

    .div1 { grid-area: 2 / 2 / 3 / 3; }
    .div2 { grid-area: 2 / 4 / 3 / 5; }
    .div3 { grid-area: 3 / 2 / 4 / 3; }
    .div4 { grid-area: 3 / 4 / 4 / 5; }
    .div5 { grid-area: 4 / 2 / 5 / 3; }
    .div6 { grid-area: 4 / 4 / 5 / 5; }

  .parent .div1,
  .parent .div2 {
    font-size: 2em;
  }

  .div3 p,
  .div4 p {
    font-size: 1.5em;
  }

.contact_reseaux_list {
  font-size: 2.5em;
  margin: 0;
}

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

.fa-linkedin:hover {
  color: #0274b3;
  transition: all 0.5s;
}
.fa-facebook:hover {
  color: #1977f3;
  transition: all 0.5s;
}
.fa-x-twitter:hover {
  color: rgb(114, 114, 114);
  transition: all 0.5s;
}
.fa-tiktok:hover {
  color: #00efe8;
  transition: all 0.5s;
}
.fa-instagram:hover {
  color: #d13d67;
  transition: all 0.5s;
}

#contact a:visited,
#contact a {
  color: black;
}

.contact_title {
  font-weight: bolder;
}

.contact_separator {
  width: 200px;
  margin: 0;
}

#contact h3{
  display: flex;
  justify-content: flex-end;
}






.lien-retry {
  color: rgb(21, 117, 226) !important;
  font-style: normal !important;
  font-size: 1.1em !important;
}