.img-technos:hover {
  cursor: pointer;
  opacity: 0.7;
}
.img-rust {
  width: 120px;
  height: 120px;
}
.img-openbsd {
  width: 150px;
  height: 140px;
}
.img-dragon {
  width: 150px;
  height: 140px;
}
.img-actix {
  width: 120px;
  height: 70px;
}
.img-phalcon {
  width: 100px;
  height: 130px;
}
.img-laravel {
  width: 110px;
  height: 130px;
  display: flex;
  align-items: center;
}
.img-svelte {
  width: 90px;
  height: 130px;
}
.img-node {
  width: 120px;
  height: 130px;
}
.img-fastify {
  width: 150px;
  height: 120px;
}
.img-bsd {
  width: 120px;
  height: 120px;
}
.img-git {
  width: 120px;
  height: 120px;
}
.img-debian {
  width: 100px;
}
.img-javascript {
  width: 100px;
  height: 120px;
}
.img-bash {
  width: 220px;
  height: 120px;
}
.img-redhat {
  width: 110px;
}
.img-openvpn {
  width: 110px;
}
.img-wireguard {
  width: 120px;
}
.img-ssl_vpn {
  width: 110px;
}
.img-ipsec {
  width: 150px;
}
.img-nginx {
  width: 130px;
}
.img-ubuntu {
  width: 100px;
}
.img-crowdsec {
  width: 100px;
  height: 120px;
}
.text-orange {
  color: orange;
}
#leftgear {
  /*background: conic-gradient(from 0deg, #ffc008 90deg, #00253c ) 60% 55%/150% 150% no-repeat;*/
  /* background: conic-gradient(from 0deg, #18a1b8 , #ffffff ) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;*/
  width: 200px;
  height: 200px;
}
.text-veloce1 {
  color: #00253c;
}
.text-veloce2 {
  color: #ffc008;
}
/*#ffc107*/
/*#18a1b7*/

/* Padding pour les cartes dans la section bonnes pratiques */
.card-padding {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* S'assurer que le padding interne fonctionne */
.card-padding > div {
  padding: 30px !important;
}

/* Benchmark Section Styles */
.benchmark-chart {
  margin-top: 20px;
}

.benchmark-bar-container {
  margin-bottom: 15px;
}

.benchmark-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}

.benchmark-bar-wrapper {
  position: relative;
  background-color: #1a1a1a;
  border-radius: 4px;
  height: 30px;
  overflow: hidden;
}

.benchmark-bar {
  height: 100%;
  display: flex;
  align-items: center;
  transition: width 0.8s ease-in-out;
  border-radius: 4px;
}

.benchmark-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
}

.badge {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
}

.bg-veloce2 {
  background-color: #18a1b7 !important;
}

.bg-veloce1 {
  background-color: #ffc107 !important;
}

.border-veloce2 {
  border-color: #18a1b7 !important;
}

.padding-5px-all {
  padding: 5px;
}

.padding-15px-tb {
  padding-top: 15px;
  padding-bottom: 15px;
}

.padding-20px-tb {
  padding-top: 20px;
  padding-bottom: 20px;
}

.border-radius-3 {
  border-radius: 3px;
}

.border-left {
  border-left: 1px solid;
}

/* Table Responsive */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 15px;
  vertical-align: middle;
}

code {
  background-color: #2a2a2a;
  padding: 2px 6px;
  border-radius: 3px;
  color: #18a1b7;
  font-size: 90%;
}

/* Couleurs Bootstrap manquantes pour les graphiques */
.bg-success {
  background-color: #28a745 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.text-success {
  color: #28a745 !important;
}

.text-info {
  color: #17a2b8 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-dark {
  color: #343a40 !important;
}

/* Fond de page fixe (toutes les pages). Sur l'accueil, le diaporama Vegas se
   superpose (ses diapos sont en z-index -1, celui-ci en -3) et démarre sur la
   même image, donc la transition est invisible. Ailleurs, c'est le seul fond :
   une image de 23 Ko et un voile identique à l'overlay Vegas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-color: #101321;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/bg-5.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Pages secondaires (blog, articles, prestations) : le contenu est posé sur un
   fond sombre, mais helper.css force les titres en #232323. Illisible. */
.bg-dark-transparent h1,
.bg-dark-transparent h2,
.bg-dark-transparent h3,
.bg-dark-transparent h4 {
  color: #fff;
}