/* ------------------------------------------ */
/*         Création Didier DEQUIN             */
/*         MODIFIER LE : 09/04/2024           */
/* -------------------------------------------*/
/* 01/12 - Changement de la partie Portfolio  */
/* 15/12 - Ajout Menu slide de droite (NF)    */
/*       - Modification de la Nav aussi       */
/* 05/01 - Mise en place du Captcha V2.0      */
/* 24/03 - Ajout du Slide Partenaires         */
/* -------------------------------------------*/

:root {
  --color-primary-400: rgb(252, 85, 85);
  --color-secondary-700: rgb(115, 103, 91);
  --color-neutral-100: rgb(52,58, 64);
  
  --font-family-primary: Rougant, sans-serif;
  --font-family-secondary: Inconsolata, serif;

  --font-size-100: 0.875rem; 
  --font-size-200: 1.125rem; 

  --para-size-300: 30ch;
  --para-size-400: 40ch;
  
  --space-100: 0.625rem; 
  --space-200: 1.25rem; 
  --space-400: 2.5rem; 
  --space-500: 3.125rem; 
  --space-header: clamp(1.25rem, 10vw, 6.25rem); 
}

/* Header 
------- */
header {
  background: url("img/workspace-1280538_1280.jpg");
  background-size: cover;
  background-position: center;
  height: 95vh;
  border-bottom: 1px solid #000;
}

/* Attention à la compatibilité 
------------------------------- */
html {
  scroll-behavior: smooth;
}

.text-intro {
  padding-top: 300px;
  padding-bottom: 200px;
}

.maphotointro {
    border-radius: 35px 10px 35px 10px;
}

/* ----------------------------
Pour le bouton .opener-icons
----------------------------- */
#top .opener-icons{
  float: left;
  font-size:17px;
  text-align: center;
  padding: 5px 0 0;
  width:39px;
  height:39px;
  border:2px solid #fff;
  -webkit-transition:all .4s ease;
  transition:all .4s ease
}

#top .opener-icons:hover{
  background:#e74c3c;
  text-decoration:none;
  border-color:transparent
}

.input-group-addon {
  border-radius: 0;
  border: 1px solid #eee;
}

/* ----------------------------
 Customisation du anchorTJM
------------------------------*/

#anchorTJM {
  color: #99a2ac;
  text-align: center;
  font-family: "kaushan script";
}

/* ----------------------------
 Pour aligner le Captcha
------------------------------*/
.g-recaptcha {
  padding-left: 15px;
}

/* ----------------------------
 Les blocs en Erreurs
------------------------------*/
.help-block.with-errors {
  color: #ff5050;
  margin-top: 3px;
}


/* ----------------------------
 Customisation de la scrollbar
------------------------------*/

* {
    scrollbar-width: auto;
    scrollbar-color: var(--color-secondary-700) var(--color-neutral-100);
}

*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--color-neutral-100);
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--color-secondary-700);
    background: repeating-linear-gradient(
        45deg,
        var(--color-primary-400),
        var(--color-primary-400) 10px
      );
}

/* ----------------------
Concepteur & Développeur 
-----------------------*/
.preTxt {
  font-size: 45px;
  font-family: "kaushan script";
  margin: 0;
  color: var(--color-primary-400);
  line-height: 0.5;
}

h1 {
  font-size: 40px;
  color: #ffffff;
  font-family: "kaushan script";
  font-weight: 700;
}

.photo {
  padding-top: 10px;
}

.infos {
  padding-top: 50px;
  left: 20px;
}

/* Navbar */
/* effet js*/
#main-nav {
  transition: all 1s ease;
}

/* ----------------
Agit sur mon Nom 
---------------- */
.navbar-brand {
  font-size: 30px !important;
  font-family: "Kaushan Script" !important;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* -----------------------------
Agit sur Accueil, Langages ..... 
----------------------------- */
.navbar a {
  color: #fff !important;
  font-family: "lato";
  font-size: 16px;
  font-weight: 700;
  transition: all 0.4s ease;
}

.navbar.opaque .navbar-brand {
  font-size: 22px !important;
  /* transition pour le retour */
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar.opaque a {
  font-size: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* Opacité de la barre de Navigation */
#main-nav {
  opacity: 0.75;
}

/* --------------------------------
Soulignement du Texte dans le Menu
-------------------------------- */
li a:after {
  content: "";
  display: block;
  margin: auto;
  height: 3px;
  width: 0;
  background-color: var(--color-primary-400);
  transition: width 0.5s ease, background-color 1.5s ease;
}

li a:hover:after {
  width: 100%;
  background: #fff;
}

/* Zone déroulante A propos de Moi
avec la couleur de la Nav Bar */
.card-header {
  background-color: #343a40;
}

/* Texte du Bouton */
/* --------------- */
.card-header button {
  font-family: "Kaushan Script";
  font-size: 1.2rem;
  color: #fff !important;
}

/* ----------*/
/* A Propos */
/* ------- */
#aPropos {
  margin-top: 75px;
  padding-bottom: 75px;
  border-bottom: 1px dashed #000;
}

/* Trois Icones */
/* ------------ */
#icones {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ban1 premiere banniere */
/* ---------------------- */
#ban1 {
  position: relative;
  background: url("img/banniere1.png");
  background-size: cover;
  min-height: 250px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* pour centrer le bouton et les textes */
  text-align: center;
}

/* Photos */
/* ------ */
#galerie {
  padding-bottom: 100px;
}

#galerie .container p {
  padding-bottom: 40px;
}

/* seconde banniere */
/* ---------------- */
#ban2 {
  position: relative;
  min-height: 250px;
  background: url("img/Banniere2.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* pour tout centrer dont le btn ;) */
  text-align: center;
}

#carouselContent {
  margin-top: 70px;
  font-size: 35px;
  color: #000;
  font-weight: 400;
}

/* Class pour les arrondis sur les vignettes */
/* ----------------------------------------- */
.img-vignettes {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
}

/* Survol des Vignettes */
/* ------------------- */
.img-vignettes:hover {
  transform: scale(1.1);
  background-color: #353232;
}

/*  H2 de certaines sections */
/* --------------------------*/
.offreH,
.skillsH {
  font-size: 70px;
  padding-top: 80px;
  padding-bottom: 50px;
  font-family: "Kaushan Script";
}

.h2Photos,
.h2APropos {
  padding-top: 50px;
  padding-bottom: 20px;
  font-family: "Kaushan Script";
  font-size: 70px;
}

#cartes {
  padding: 50px 0 100px 0;
}

/* ICI ce sont les 3 cartes du TJM */
/* ------------------------------- */
.threeCards {
  width: 300px;
  height: 560px;
  margin: 30px auto;
  position: relative;
  transition: 0.2s ease-in;
  box-shadow: 0px 10px 30px black;
}

.threeCards:hover {
  transform: scale(1.1);
}

.header {
  height: 200px;
  width: 300px;
  position: relative;
  background: rgba(216, 216, 216, 0.5);
}

.header h2 {
  margin: 0;
  position: relative;
  top: 130px;
  text-align: center;
  font-family: "Lato";
  font-size: 15px;
}

#spanPrix {
  font-size: 40px;
}

/* Icones ajoutés dans la partie Langage */
/* ------------------------------------- */
.dev-icons {
  font-size: 3rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Concerne la carte rouge */
/* ----------------------- */
.price {
  height: 120px;
  width: 300px;
  /* Couleur du Titre */
  background: var(--color-primary-400);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  position: absolute;
  top: 0;
}

.price h2 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: "Kaushan Script";
  font-size: 30px;
  position: relative;
  top: 30px;
}

/* Concerne la première carte en Vert */
/* ---------------------------------- */
.pricev {
  height: 120px;
  width: 300px;
  /* Couleur du Titre */
  background: rgba(98, 180, 95, 0.876);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  position: absolute;
  top: 0;
}

.pricev h2 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: "Kaushan Script";
  font-size: 30px;
  position: relative;
  top: 30px;
}

/* Concerne la première carte en bleue */
/* ----------------------------------- */
.priceb {
  height: 120px;
  width: 300px;
  /* Couleur du Titre */
  background:  rgba(65, 92, 243, 0.904);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  position: absolute;
  top: 0;
}

.priceb h2 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: "Kaushan Script";
  font-size: 30px;
  position: relative;
  top: 30px;
}

/* Concerne le détails dans les cartes */
/* ----------------------------------- */

.details {
  background: white;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-family: "Lato";
  transition: all 0.2s ease-in;
}

.details:hover {
  background: rgba(34, 167, 240, 0.1);
  color: #e74c3c;
}

#btn {
  background: white;
  height: 80px;
}

#btn a {
  text-decoration: none;
  font-family: "lato";
  height: 50px;
  width: 120px;
  display: block;
  margin: auto;
  text-align: center;
  line-height: 50px;
  position: relative;
  top: 10px;
  border-radius: 30px;
  border: 1px solid #22a7f0;
  transition: all 0.2s ease-in;
}

#btn a:hover {
  background: rgba(6, 136, 206, 0.8);
  color: white;
}

/* Une ligne en pointillé comme séparation */
/* -------------------------------------- */
.ligneHorizontale {
  border-top: 1px dashed;
}

/* Clients */
/* ------- */
#clients {
  border-top: 1px dashed black;
  border-bottom: 1px solid black;
  padding-top: 50px;
  padding-bottom: 50px;
}

/*-------------------------*/
/* Partenaires de Carrière */
/*-------------------------*/
#services {
  background: #f7f7f7;
  position: relative;
  padding-bottom: 10px;
  padding-top: 15px;
}

.services-block span {
  margin: 10px 0;
  position: relative;
  font-size: 13px;
  color: #292929;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
}

.services-block .separator {
  margin: 0;
  font-size: 13px;
  line-height: 22px;
}

.services-block i {
  font-size: 44px;
  color: #b8a07e;
  line-height: 24px;
}

.services-slider .swiper-pagination {
  margin-top: 50px;
  position: relative;
}

.services-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #b8a07e;
}

.services-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #b8a07e;
}

/************************* LOISIRS ***************************/

/* Toute la Zone */
/* ------------- */
#hobbies {
  padding: 50px 50px 200px 50px;
  margin: 0 0 -90px 0;
  background: #ffffff;
}

.pictures {
  display: flex;
  justify-content: center;
}

.flip-box-back div {
  margin: 0 auto;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

.flip-box-back p {
  text-transform: uppercase;
  padding: 10px;
  /* Texte en automatique */
  font-size-adjust: auto;
}

.flip-box-back {
  color: white;
  transform: rotatey(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box {
  overflow: hidden;
  background-color: transparent;
  width: 100%;
  max-width: 300px;
  height: 300px;
  perspective: 1000px;
}

/* ----------------------------------------- */
/* Effet couleurs sur le flip-box
Agir ici pour la taille de la zone
Test Fait avec height: 200px et width : 150px 
Réduire aussi les images dans le HTML */
/* ----------------------------------------- */
#courir {
  border-radius: 10px;
  box-shadow: inset 0px 0px 20px tomato;
}

#paramoteur {
  border-radius: 10px;
  box-shadow: inset 0px 0px 20px forestgreen;
}

#Danses {
  border-radius: 10px;
  box-shadow: inset 0px 0px 20px rgb(34, 150, 196);
}

#techniques {
  border-radius: 10px;
  box-shadow: inset 0px 0px 20px rgb(91, 9, 94);
}

#obstacles {
  border-radius: 10px;
  box-shadow: inset 0px 0px 20px rgb(38, 34, 49);
}

.flip-box-inner {
  position: relative;
  width: 100%; /* 100%*/
  max-width: 300px;
  height: 300px; /* 300px */
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

#contact {
  background: url("img/banniere1.png");
  background-size: cover;
}

/************************* ARROW du BAS ***************************/

.arrow {
  margin: -20 auto;
  padding-top: 15px;
  animation: arrow linear 1.5s;
  animation-iteration-count: infinite;
}

@keyframes arrow {
  0% {
    transform: translateY(0px);
  }
  38% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Uniquement ma Photo dans le trombinoscope */
/* ----------------------------------------- */
.maphoto {
  position: relative;
  border-radius: 8px 8px 8px 8px;
}

.arrow a {
  font-size: 3em;
  border: none;
  color: var(--color-primary-400);
}

.arrow:hover i {
  transform: scale(1.6);
  transition: 0.5s ease-in-out;
  color: #1bb1b6;
}

.footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #343a40;
  color: #fff;
}

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

/*-----------*/
/* Portfolio */
/*-----------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}
.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 15px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 16px 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background: rgba(216, 90, 90, 0.1);
  margin: 0 3px 10px 3px;
  transition: all 0.3s ease-in-out;
  border-radius: 4px;
}

.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  background: var(--color-primary-400);
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 35px;
  left: 35px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  margin: 0 2px;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #63eda3;
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
  top: 15px;
  left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
  bottom: 15px;
  right: 15px;
}

/*-------------------*/
/* Portfolio Details */
/*-------------------*/
.portfolio-details {
  padding-top: 40px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.portfolio-details .container {
  padding-top: 20px;
  padding-bottom: 40px;
}

.portfolio-details .portfolio-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-info {
  padding-top: 45px;
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-info p {
  font-size: 15px;
  padding: 15px 0 0 0;
}

@media (max-width: 992px) {
  .portfolio-details .portfolio-info {
    padding-top: 20px;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.3);
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #18d26e;
}

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

/************************* MEDIA QUERY ***************************/

@media screen and (max-width: 800px) {
  /* Header */

  header {
    height: 75vh;
  }

  .text-intro {
    padding-top: 300px;
    padding-bottom: 200px;
  }

  .preTxt {
    font-size: 40px;
  }

  h1 {
    font-size: 81px;
  }

  .list-inline-item {
    font-size: 28px;
  }
}

/* Barre de progrés mode petit */
/* --------------------------- */
@media screen and (max-width: 762px) {
  #progress {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .competences {
    padding-top: 50px;
  }

  .list-inline-item {
    font-size: 20px;
  }

  .text-center.offreH {
    font-size: 50px;
  }

  .text-center.skillsH {
    font-size: 50px;
  }

  .text-center.h2Photos {
    font-size: 50px;
  }

  /* Masque la disquette des autres compétences */
  /* ------------------------------------------ */
  #other-skills {
    visibility: hidden;
  }

  /* Aussi le menu de droite */
  #menu {
    visibility: hidden;
  }
}

/* Inférieur à 500 PX */
/* ------------------ */
@media screen and (max-width: 500px) {
  /* Header */
  header {
    height: 55vh;
  }

  .text-intro {
    padding-top: 40px;
  }

  .text-intro a {
    transform: scale(0.8);
  }

  .text-intro h1 {
    font-size: 30px;
    padding-top: 40px;
  }

  /* Texte A Propos de Lui */
  .text-center.h2APropos {
    font-size: 40px;
  }

  /* Texte Quelques Projets */
  .text-center.h2Photos {
    font-size: 40px;
  }

  /* Texte TJM Freelance */
  .text-center.offreH {
    font-size: 40px;
  }

  /* Texte Développement Web & Mobiles */
  .text-center.h2Photos {
    font-size: 30px;
  }

  .navbar {
    width: 500px;
    height: auto;
  }

  .navbar-brand {
    font-size: 25px !important;
    height: auto;
  }

  .navbar-toggler {
    margin-right: auto;
  }

  .preTxt {
    font-size: 20px;
    padding-top: 70px;
  }

  h1 {
    font-size: 51px;
  }

  .list-inline-item {
    visibility: hidden;
  }

  /* Masque la disquette des autres compétences */
  /* ------------------------------------------ */
  #other-skills {
    visibility: hidden;
  }

  ul > li > a [href="#other-skills"] {
    color : red;
   }
   
   .flip-box-back p {
    font-size: 10px;
    padding-block: 1px;
  } 

  }

  /* Ajouter le 07/01/2023 suite à mes tests */
  /* Inférieur à 700PX - Pixel 7 en 412x915 */

   @media screen and (max-width: 700px) {
    /* Header */
    header {
      height: 55vh;
    }
  
    .text-intro {
      padding-top: 50px;
    }
  
    .text-intro a {
      transform: scale(0.8);
    }
  
    .text-intro h1 {
      font-size: 30px;
      padding-top: 40px;
    }
  
    /* Texte A Propos de Lui */
    .text-center.h2APropos {
      font-size: 40px;
    }
  
    /* Texte Quelques Projets */
    .text-center.h2Photos {
      font-size: 40px;
    }
  
    /* Texte TJM Freelance */
    .text-center.offreH {
      font-size: 40px;
    }
  
    /* Texte Développement Web & Mobiles */
    .text-center.h2Photos {
      font-size: 30px;
    }
  
    .navbar {
      width: 650px;
      height: auto;
    }
  
    .navbar-brand {
      font-size: 25px !important;
      height: auto;
    }

    .navbar-toggler {
      margin-right: 30px;
    }
  
    .preTxt {
      font-size: 20px;
      padding-top: 70px;
    }
  
    h1 {
      font-size: 51px;
    }
  
    .list-inline-item {
      visibility: hidden;
    }
  
    /* Masque la disquette des autres compétences */
    /* ------------------------------------------ */
    #other-skills {
      visibility: hidden;
    }
  
    ul > li > a [href="#other-skills"] {
      color : red;
     }

    .flip-box-back p {
      font-size: 10px;
      padding-block: 1px;
    }
    
    /* Ma photo que je modifie */
    .maphotointro {
      height: 120px;
      width: 80px;
      margin-left: 100px;
    }

    /* Infos Mobiles et Lieu */
    .col-sm.infos h5 {
      font-size: 14px;

    }
    /* Masque le texte dactylographique */
    .blinking-cursor {
      visibility: hidden;
    }

    /* Les deux boutons */
    .btn.btn-dark {
      visibility: hidden;
    }

    .btn.btn-outline-dark {
      visibility: hidden;
    }
}

/* Ajout pour le Texte Dactylographique */
.blinking-cursor {
  font-family: "kaushan script", sans-serif !important;
  font-weight: 400;
  margin-left: 4px;
  font-size: 60px;
  color: var(--color-primary-400) !important;
}


#menu {
  position: fixed;
  right: 2px;
  top: 45%;
  width: 200px;
  padding: 10px 0px 10px 35px;
  font-weight: bold;
  text-align: left;
  text-indent: 8px;
  color: var(--color-primary-400);
  border: 3px solid #343A40;
  border-radius: 35px 10px 10px 10px;
/* Générateur de code couleur -- http://www.workwithcolor.com/hsl-color-picker-01.htm */
z-index: 2;
}

#menu li {
  margin: 0;
}

#menu li :hover {
  color: #22a7f0;
  font-style: italic;
}

#menu a {
text-decoration: none;
color: inherit;
}