/* Styles propres au projet, hors du kit Bantec.

   Volontairement separe de sass/style.css : cette feuille-la vient du kit et
   serait ecrasee a sa prochaine mise a jour. Chargee apres elle, donc elle
   gagne a specificite egale sans qu'on ait besoin de !important. */

/* Selecteur de langue du bandeau superieur.
   La couleur, la taille et l'alignement viennent deja de .top__bar-right ;
   il ne reste ici que le separateur et l'etat courant. */
.lang__switch-item {
  display: inline-block;
  padding: 0 10px;
  line-height: 1;
  text-transform: uppercase;
}

.lang__switch-item + .lang__switch-item {
  border-left: 1px solid rgba(255, 255, 255, .35);
}

/* La langue affichee n'est pas un lien : elle se distingue par la couleur
   d'accent du theme, pas par un soulignement, qui la ferait passer pour un. */
.lang__switch .is-active {
  color: var(--primary-color-1);
  font-weight: 600;
  cursor: default;
}

.lang__switch a:hover {
  color: var(--primary-color-1);
}

/* Les trois volets de la page Formation, en cartes du kit.

   Le kit style .service-qualities uniquement sous
   .service__details-content-box-single. Deplacee dans une carte
   services__three, la liste perdrait ses puces et son espacement : on lui rend
   la meme allure, mais sur une colonne au lieu de deux, la carte etant trois
   fois plus etroite que la boite d'origine. */
.services__three-single-service .service-qualities {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.services__three-single-service .service-qualities li {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}

.services__three-single-service .service-qualities li:last-child {
  margin-bottom: 0;
}

.services__three-single-service .service-qualities li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  background: var(--color-4);
  margin-right: 15px;
  border-radius: 50%;
  border: 3px solid var(--color-1);
  outline: 1px solid var(--color-4);
  transition: 0.4s;
}

.services__three-single-service .service-qualities li:hover::before {
  outline: 1px solid var(--primary-color-1);
  background: var(--primary-color-1);
}

/* Les trois volets n'ont pas le meme nombre de lignes. Sans egalisation, les
   cartes se decalent en bas de rangee : la colonne devient un conteneur flex
   et la carte y prend toute la hauteur. */
.services__three-items > [class*="col-"] {
  display: flex;
}

.services__three-items > [class*="col-"] > .services__three-single-service {
  width: 100%;
}

/* Les cartes des six metiers renvoient chacune vers leur page detaillee. Le kit
   ne prevoit pas de lien dans une carte services__three : on lui redonne l'air
   des cartes services__two, ou le bouton est detache de la liste au-dessus. */
.services__three-single-service .service-qualities + .btn-three {
  margin-top: 25px;
  padding: 12px 24px;
  font-size: 16px;
}

/* Les six metiers sont presentes en deux panneaux de trois. Une gouttiere entre
   rangees ne se verrait pas : les cartes et le panneau qui les porte ont le meme
   gris. Deux panneaux separes, eux, laissent passer le fond blanc de la page.
   La marge ne peut pas venir d'un utilitaire .mt-* : Bootstrap la pose en
   !important et ecrase le margin-top negatif qui compense la gouttiere. */
.services__three-items + .services__three-items {
  margin-top: 30px;
}

/* Deux respirations manquent aux sections de services du kit.

   La premiere tient au gabarit : ces sections sont posees en "section-padding
   pt-0", donc le titre touche le bord haut de la bande grise. La classe
   services__two--roomy leur rend un haut de section, plus court que les 120px
   du kit. On ne peut pas garder pt-0 et le corriger ici : Bootstrap pose ses
   utilitaires en !important. */
.services__two--roomy {
  padding-top: 60px;
}

/* La seconde tient au kit lui-meme : sous 1400px il resserre les cartes a
   20px 18px 26px 23px, le texte vient toucher le bord et le padding n'est meme
   pas symetrique. Corrige partout, y compris sur la page Nos services, dont la
   section n'a pas besoin du rattrapage de haut. */
@media (max-width: 1399px) {
  .services__two-single-service {
    padding: 36px 30px 34px 30px;
  }
}

/* Le titre des bandeaux passe de h2 a h1.

   Chaque page n'avait aucun h1 : le kit habille ses bandeaux par
   .banner__one-content h2 et .page__banner-content h2, et le gabarit suivait le
   kit. Un moteur de recherche lit alors une page sans titre de premier niveau.
   Le tag change dans les gabarits, la mise en forme se rattrape ici : les
   regles du kit sont recopiees a l'identique pour h1, points de rupture
   compris. Rien n'est repris de la regle h1 generale du kit (70px), qui
   n'a jamais ete prevue pour ces bandeaux. */
.banner__one-content h1 {
  font-size: 72px;
  line-height: 83px;
  margin-bottom: 20px;
  text-transform: none;
}
.banner__one-content h1 span {
  color: var(--primary-color-1);
}
.page__banner-content h1 {
  color: var(--text-white);
  margin-bottom: 25px;
  font-size: 64px;
  line-height: 1.13;
}

@media (max-width: 991px) {
  .banner__one-content h1 {
    max-width: 585px;
  }
}
@media (max-width: 767px) {
  .banner__one-content h1 {
    font-size: 60px;
  }
  .page__banner-content h1 {
    margin-bottom: 20px;
    font-size: 64px;
    line-height: 80px;
  }
}
@media (max-width: 535px) {
  .banner__one-content h1 {
    font-size: 51px;
    line-height: 66px;
  }
  .page__banner-content h1 {
    margin-bottom: 18px;
    font-size: 40px;
    line-height: 60px;
  }
}

/* La liste des services passe de quatre a cinq entrees.

   Le kit la pose en "justify-content: space-between" sans largeur de base :
   avec quatre entrees le rendu tombait juste par hasard, deux par ligne. A
   cinq, la derniere ligne n'en porte plus qu'une ou deux, et space-between les
   ecarte aux deux bords en laissant un trou au milieu. On aligne donc a gauche
   et on remplace l'ecartement par une gouttiere, ce qui donne le meme rendu a
   quatre et reste correct a n'importe quel nombre.

   La marge basse de chaque entree laisse place a la gouttiere verticale, sinon
   les deux s'additionnent. */
.about__one-content-service {
  justify-content: flex-start;
  gap: 12px 40px;
}

.about__one-content-service .service {
  margin-bottom: 0;
}