/* Ajustement global */
.blob {
  width: 9.375rem;
  height: 9.375rem;
  position: absolute;
  left: 50%;
  top: 9%;
  transform: translate(-50%, -50%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background-color: rgb(0, 21, 43);
  background-image: url("images/photo_pp.jpg"),
    linear-gradient(
      90deg,
      rgba(0, 21, 43, 1) 0%,
      rgba(3, 23, 193, 1) 35%,
      rgba(111, 86, 255, 1) 100%
    );
  background-size: cover, cover; /* Le premier 'cover' pour l'image, le second pour le dégradé */
  background-repeat: no-repeat, no-repeat; /* Pas de répétition de l'image et du dégradé */
  background-position: center, center; /* Centrer l'image et le dégradé */
  -webkit-animation: blob 5s linear 0s infinite;
  animation: blob 5s linear 0s infinite;
}

@keyframes blob {
  0% {
    border-radius: 35% 65% 75% 25% / 45% 35% 65% 55%;
  }
  20% {
    border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%;
  }
  40% {
    border-radius: 60% 40% 55% 45% / 55% 50% 45% 60%;
  }
  60% {
    border-radius: 65% 35% 50% 50% / 60% 45% 55% 40%;
  }
  80% {
    border-radius: 70% 30% 40% 60% / 50% 55% 45% 65%;
  }
  100% {
    border-radius: 35% 65% 75% 25% / 45% 35% 65% 55%;
  }
}
.spacer {
  height: 22rem;
}
body {
  font-family: "Arial", sans-serif;
  background-color: #f7f7f7;
  line-height: 1.6;
  overflow-x: hidden; /* Désactive le défilement horizontal */
}
#back {
  height: 102.5vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url("images/code.jpg");
  background-size: cover; /* L'image couvre toute la section */
  background-position: center center; /* L'image est centrée */
  background-repeat: no-repeat; /* Pas de répétition de l'image */
  left: 0;
}
section h2 {
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
/* Sidebar - Bootstrap */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 17%; /* Ajustez la largeur de la barre latérale ici */
  background-color: #1a1a1a;
  z-index: 1000;
  transform: translateX(0); /* Par défaut, la sidebar est cachée */
  transition: transform 0.3s ease; /* Animation de transition */
}

#sidebar.active {
  transform: translateX(0); /* Affiche la sidebar lorsqu'elle est active */
}
/*Petit bouton pour les petits écran*/
#sidebarToggle {
  position: fixed;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 9999;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  padding: 0;
}

#sidebar .nav-link {
  font-size: 1.125rem;
  padding: 0.5rem 1.25rem; /* Plus d'espace pour rendre les liens cliquables */
  display: block;
  color: white;
  text-decoration: none;
}

/* Réapplique le padding pour les navigateurs non-Chrome */
@supports not (-webkit-appearance: none) {
  #sidebar .nav-link {
    padding: 0.7375rem 1.25rem;
  }
}

.profile h4 {
  font-weight: bold;
  margin-top: 0.625rem;
  margin-bottom: 1.25rem;
}

/* Style pour les icônes sociales */
.icon-circle {
  width: 3.125rem;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* Pour entourer l'icône dans un cercle */
  background-color: #fff; /* Fond blanc */
  color: #333; /* Couleur de l'icône */
  text-decoration: none; /* Supprime le soulignement des liens */
  transition: background-color 0.3s, color 0.3s; /* Animation pour le survol */
  border: 0.125rem solid transparent; /* Bordure invisible au départ */
}

.icon-circle i {
  font-size: 1.5rem; /* Taille des icônes */
}

.icon-circle:hover {
  background-color: #b0e0e6; /* Bleu clair au survol */
  color: #fff; /* Couleur des icônes au survol */
  border-color: #b0e0e6; /* Affiche la bordure bleu clair au survol */
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.9375rem;
  color: #ddd;
  text-decoration: none;
}

.nav-link i {
  font-size: 1.5rem;
  margin-right: 0.625rem;
  transition: color 0.3s ease;
}
/* Couleur des icônes actives (bleu clair) */
.nav-link.active i {
  color: #d31c1c; /* Bleu clair pour l'icône active */
}

.nav-link:hover {
  background-color: #333;
  color: #fff;
  border-radius: 0.3125rem;
}

.nav {
  flex-grow: 1; /* Prend l'espace disponible au centre */
}
footer {
  font-size: 0.75rem;
  text-align: center;
  margin-top: auto; /* Assure que le footer reste en bas */
  padding-top: 0%;
}

/* Contenu principal */
main {
  margin-left: 18%; /* Ajuste en fonction de la largeur de la sidebar */
  padding: 1.25rem;
}

/* Sections */
.section {
  padding: 5rem 1.25rem;
  text-align: center;
}

.section h2 {
  margin-bottom: 1.25rem;
  font-size: 2.25rem;
}

/* Section d'accueil */
#home {
  left: 0;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
/* Style pour le curseur clignotant */
.cursor {
  display: inline-block;
  background-color: white; /* Couleur du curseur */
  width: 0.125rem; /* Largeur du curseur */
  height: 1.875rem; /* La hauteur doit correspondre à la taille de la police du texte */
  animation: blink 0.7s steps(1) infinite; /* Animation de clignotement */
}

/* Animation de clignotement du curseur */
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1.25rem;
  color: white;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 1.875rem;
  color: white;
}

.cta-btn {
  padding: 0.625rem 1.25rem;
  background-color: #00aaff;
  border: none;
  color: white;
  border-radius: 0.3125rem;
  text-decoration: none;
}

.cta-btn:hover {
  background-color: #007bff;
}

/* Formulaire de contact */
form input,
form textarea {
  width: 100%;
  margin-bottom: 0.9375rem;
  padding: 0.625rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid #ccc;
}

form button {
  padding: 0.625rem 1.25rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.3125rem;
  cursor: pointer;
}
/* Section container */
#about {
  background-color: #f7f7f7;
  border-radius: 0.625rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  text-align: left; /* Aligner tout le contenu à gauche */
}

/* Titre principal */
#about h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
  text-align: left; /* Aligner le titre principal à gauche */
}

#about .icon {
  font-size: 1.5rem;
}

/* Sous-titres */
#about h3 {
  font-size: 1.6rem;
  color: #003b79;
  font-weight: bold;
  margin-bottom: 0.9375rem;
  text-align: left; /* Aligner les sous-titres à gauche */
}

#about p.lead {
  font-size: 1.1rem;
  line-height: 1.7;
  text-align: left; /* Aligner le paragraphe principal à gauche */
}

/* Liste des informations */
#about ul {
  margin-top: 0.9375rem;
  text-align: left; /* Aligner les listes à gauche */
}

#about ul li {
  font-size: 1.1rem;
  margin-bottom: 0.625rem;
}

/* Boutons CV */
#about .btn {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
}

#about .btn-dark {
  background-color: #808080;
  color: white;
  border: none;
}

#about .btn-dark:hover {
  background-color: #555;
  color: white;
}

#about .btn-dark:focus {
  outline: none;
  box-shadow: none;
}

/* Container for section */
#parcours {
  background-color: #f7f7f7;
  border-radius: 0.625rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

#parcours h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
}

#parcours h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  margin-bottom: 1.875rem;
  padding-left: 2.5rem;
  border-left: 0.125rem solid #b22a2a;
}

.timeline-item:before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 0;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 50%;
  background-color: #b22a2a;
}

.timeline-date {
  font-weight: bold;
  color: #b22a2a;
}

.timeline-item h4 {
  margin-top: 0;
  font-size: 1.2rem;
}

.timeline-item p {
  margin-bottom: 0;
}

/* Section contact container */
#contact {
  background-color: #f7f7f7;
  border-radius: 0.625rem;
  padding: 2.5rem 1.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

#contact h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
}

#contact p {
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
}

/* Colonne gauche - Informations de contact */
.contact-info {
  background-color: #fff;
  border-radius: 0.625rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.contact-info h3 {
  font-size: 1.2rem;
  margin-bottom: 0.625rem;
  color: #003b79;
}

.contact-info p {
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
}

/* Formulaire de contact */
.contact-form .form-label {
  font-weight: bold;
}

.contact-form .form-control {
  border-radius: 0.3125rem;
  border: 0.0625rem solid #ccc;
  padding: 0.625rem;
  font-size: 1rem;
}

.contact-form button {
  background-color: #333;
  color: white;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 0.3125rem;
  font-size: 1rem;
  font-weight: bold;
}

.contact-form button:hover {
  background-color: #555;
}

/* Ajustement pour la carte Google Maps */
iframe {
  margin-top: 1.25rem;
  border: 0;
  border-radius: 0.625rem;
}
/* Container pour les cartes */
.equal-image {
  width: 100%;
  height: 18.75rem;
  object-fit: cover; /* S'assure que l'image garde ses proportions tout en remplissant l'espace */
  z-index: 1;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  perspective: 62.5rem; /* Perspective pour l'effet 3D */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  min-height: 21.875rem; /* Hauteur minimale plus grande */
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d; /* Permet la rotation 3D */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg); /* Rotation de la carte sur l'axe Y */
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  min-height: 21.875rem; /* Hauteur minimale plus grande */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.flip-card-front {
  background: linear-gradient(
    to bottom right,
    #95bfe2,
    #497294
  ); /* Dégradé de vert (#2ecc71) à blanc */
  color: black;
  border-radius: 0.625rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


@keyframes rotation_481 {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(360deg);
  }
}

.back-content {
  position: absolute;
  width: 99%;
  height: 99%;
  background: linear-gradient(to bottom right, #95bfe2, #497294);
  border-radius: 0.625rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;
}
.SISR_texte {
  z-index: 1;
}
.SLAM_texte {
  z-index: 1;
}
.flip-card-back {
  background-color: #696fc9; /* Une couleur différente pour le verso */
  transform: rotateY(180deg);
  z-index: 3;
}

/* Style pour les icônes à côté des options */
h4 i {
  font-size: 1.5rem; /* Taille de l'icône */
  margin-right: 0.625rem; /* Espace entre l'icône et le texte */
}
h4 i:hover {
  transform: scale(1.2); /* Agrandit l'icône au survol */
  transition: transform 0.3s ease; /* Animation douce */
}

#competences-developpement {
  background-color: #f7f7f7;
  padding: 3.75rem 0;
  border-radius: 0.625rem;
}

#competences-developpement h2 {
  font-weight: bold;
  color: #f15b2a;
  margin-bottom: 1.25rem;
}

#competences-developpement p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2.5rem;
}

.competence-card {
  border: none;
  border-radius: 0.625rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
  background-color: #ffffff;
  width: 9.375rem; /* Largeur fixe pour toutes les cartes */
  height: 7.5rem; /* Hauteur fixe pour toutes les cartes */
  margin: 0 auto; /* Centre la carte */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrer verticalement */
  align-items: center; /* Centrer horizontalement */
  text-align: center; /* Centrer le texte */
}

.competence-card:hover {
  transform: translateY(-0.625rem); /* Soulève légèrement la carte */
  background-color: #f15b2a; /* Change la couleur de fond */
}

.competence-card:hover .card-title,
.competence-card:hover img {
  color: white; /* Change la couleur du texte et des icônes au survol */
}

.competence-card .card-title {
  font-size: 1.125rem;
  font-weight: bold;
  color: #333;
}

.competence-card img {
  max-width: 3.125rem;
  height: auto;
  transition: transform 0.3s ease;
  margin-bottom: 0.625rem; /* Espace entre l'image et le titre */
  padding-top: 1.25rem;
}

.competence-card:hover img {
  transform: scale(1.1); /* Agrandit légèrement l'icône au survol */
}
#diplomes-certifications {
  background-color: #f7f7f7;
  padding: 3.75rem 0;
  border-radius: 0.625rem;
}

#diplomes-certifications h2 {
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
}

#diplomes-certifications p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2.5rem;
}

#diplomes-certifications .btn {
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
}

#diplomes-certifications .card {
  border: none;
  border-radius: 0.625rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#diplomes-certifications .card:hover {
  transform: translateY(-0.625rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

#diplomes-certifications .card-img-top {
  border-radius: 0.625rem;
  height: 15.625rem;
  object-fit: cover; /* Assure que l'image couvre toute la carte */
}
.filter-btn {
  transition: background-color 0.3s ease;
}

.filter-btn.btn-dark {
  background-color: #007bff;
  color: white;
}
/* Timeline Section */
#stages {
  background-color: #f7f7f7;
  padding: 3.75rem 0;
  border-radius: 0.625rem;
}

#stages h2 {
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
}

#stages p.lead {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2.5rem;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2.5rem;
  margin-top: 1.25rem;
}

/* Box for each timeline item */
.timeline-box {
  background-color: #fff;
  border: 0.0625rem solid #ddd;
  border-radius: 0.625rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.timeline-box:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  transform: translateY(-0.3125rem);
}

/* Timeline Dates */
.timeline-date {
  font-weight: bold;
  color: #b22a2a;
}

/* Links and Hover Effects */
.timeline-item ul {
  list-style-type: none;
  padding-left: 0;
}

.timeline-item ul li a {
  text-decoration: none;
  color: #007bff;
}

.timeline-item ul li a:hover {
  text-decoration: underline;
}

/* Button Styles */
.btn-outline-primary {
  border: 0.0625rem solid #007bff;
  color: #007bff;
}

.btn-outline-primary:hover {
  background-color: #007bff;
  color: white;
}

#projets {
  background-color: #f7f7f7;
  padding: 3.75rem 0;
  border-radius: 0.625rem;
}

#projets h2 {
  font-weight: bold;
  margin-bottom: 1.25rem;
}

#projets p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2.5rem;
}

.project-card {
  border: none;
  border-radius: 0.625rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.project-card img {
  border-radius: 0.625rem 0.625rem 0 0;
}

.project-card:hover {
  transform: translateY(-0.625rem); /* L'effet de survol qui soulève la carte */
  background-color: #f15b2a; /* Change la couleur de fond */
}

.project-card:hover .card-title,
.project-card:hover .card-text {
  color: white; /* Change la couleur du texte au survol */
}

.project-card .card-title {
  font-size: 1.125rem;
  font-weight: bold;
  color: #333;
}

.project-card .card-text {
  font-size: 1rem;
  color: #555;
}

.project-card .btn {
  background-color: #007bff;
  border: none;
  color: white;
}

.project-card .btn:hover {
  background-color: #0056b3;
}
#bts {
  background-color: #f7f7f7;
  padding: 3.75rem 0;
  border-radius: 0.625rem;
}

#bts h2 {
  font-weight: bold;
  margin-bottom: 1.25rem;
}

#bts p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2.5rem;
}
#bts .flip {
  color: black;
}
#epreuves {
  background-color: #f7f7f7;
  padding: 3.75rem 0;
  border-radius: 0.625rem;
}

#epreuves h2 {
  font-weight: bold;
  color: #003b79;
  margin-bottom: 1.25rem;
}

#epreuves p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2.5rem;
}

/* Styles pour la section Épreuves */
#epreuves .card {
  border-radius: 0.625rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#epreuves .card:hover {
  transform: translateY(-0.625rem);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
}

#epreuves .card-title {
  font-size: 1.5rem;
  color: #003b79;
  font-weight: bold;
}

#epreuves .card-text {
  font-size: 1rem;
  color: #555;
}

#epreuves .btn {
  background-color: #003b79;
  border: none;
}

#epreuves .btn:hover {
  background-color: #0056b3;
}

.list-group-item {
  background-color: #ffffff;
  border: 0.0625rem solid #ddd;
  margin-bottom: 0.625rem;
  transition: background-color 0.3s ease;
}

.list-group-item:hover {
  background-color: #f1f1f1;
}

.text-decoration-none {
  color: #003b79;
}

.text-decoration-none:hover {
  color: #007bff;
}
.download-btn {
  display: inline-flex;
  align-items: center;
}

.bodymovinanim1 {
  margin-left: 0.5rem;
}
.consult-btn {
  display: inline-flex;
  align-items: center;
}

.bodymovinanim5 {
  margin-left: 0.5rem;
}
@media (max-width: 67.5rem) {
  html {
    font-size: 1rem;
  }
}
@media (max-width: 48rem) {
  html {
    font-size: 0.875rem;
  }
}

@media (max-width: 36rem) {
  html {
    font-size: 0.75rem;
  }
}
/* Pour les écrans de moins de 75rem de large */
@media (max-width: 75rem) {
  html,
  body {
    overflow-x: hidden; /* Désactive le défilement horizontal */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  main {
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 67.5rem) {
  #sidebar {
    width: 40%;
    transform: translateX(-100%); /* Par défaut cachée sur mobile */
  }

  #sidebarToggle {
    display: flex; /* Affiche le bouton pour les petits écrans */
  }

  main {
    margin-left: 0; /* Enlevez la marge à gauche quand la sidebar est cachée */
  }
}
/* For small screens, we can add responsiveness */
@media (max-width: 48rem) {
  .timeline-item {
    padding-left: 1.25rem;
  }

  .timeline-item:before {
    left: -0.3125rem;
  }
}

@media (max-width: 48rem) {
  .profile {
    padding-top: 10%;
  }
  .SLAM-card {
    padding-top: 15rem;
  }
}
@media (max-width: 48rem) {
  .col-md-6:nth-child(2) {
    margin-top: 25%;
  }
}
@media (min-width: 45.5rem) {
  /* Espacement entre les lignes de compétences */
  .row.text-center {
    margin-bottom: 3.75rem; /* Augmente l'espace entre les lignes de compétences */
  }

  /* Espacement supplémentaire entre les cartes */
  .col-md-4.col-lg-2 {
    padding-left: 10rem; /* Ajoute de l'espace à gauche de chaque carte */
    padding-right: 11.25rem; /* Ajoute de l'espace à droite de chaque carte */
  }
}
@media (min-width: 67.5rem) {
  /* Espacement entre les lignes de compétences */
  .row.text-center {
    margin-bottom: 3.75rem; /* Augmente l'espace entre les lignes de compétences */
  }

  /* Espacement supplémentaire entre les cartes */
  .col-md-4.col-lg-2 {
    padding-left: 5rem; /* Ajoute de l'espace à gauche de chaque carte */
    padding-right: 6.25rem; /* Ajoute de l'espace à droite de chaque carte */
  }
}
/* Ajuster le texte et les icônes sur les petits écrans */
@media (max-width: 67.5rem) {
  /* Profil */
  .profile h4 {
    font-size: 1.2rem; /* Réduire la taille du texte pour le nom */
  }

  /* Icônes sociales */
  .social-icons .icon-circle {
    width: 2.5rem;
    height: 2.5rem; /* Réduire la taille des icônes sociales */
  }

  .icon-circle i {
    font-size: 1.125rem; /* Réduire la taille des icônes à l'intérieur */
  }

  /* Navigation */
  .nav-link {
    padding: 0.625rem 0.625rem; /* Réduire l'espacement entre les liens */
    font-size: 0.875rem; /* Réduire la taille du texte des liens */
  }

  .nav-link i {
    font-size: 1.2rem; /* Réduire la taille des icônes à côté des textes */
    margin-right: 0.3125rem; /* Réduire l'espace entre les icônes et le texte */
  }

  /* Footer */
  footer p {
    font-size: 0.9rem; /* Réduire la taille du texte dans le footer */
    margin-bottom: 0.3125rem; /* Réduire l'espacement */
  }

  .blob {
    width: 6.25rem;
    height: 6.25rem; /* Réduire la taille de l'image de profil (blob) */
  }
  .nav-link span {
    font-size: 0.85rem; /* Réduire la taille des <span> dans la navigation pour les écrans larges */
  }
}