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

/* Général */

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

.honeypot {
  position: absolute;
  left: -9999px;
  top: 0;
}

.body-background {
  background: #0C1C22;
}

.about-text {
  color: var(--itip-text-color);
  opacity: var(--itip-text-opacity);
}

/* ==========================================================
   IT-IP DESIGN SYSTEM
   ========================================================== */

:root {
  --itip-bg-color: #0C1C22;
  --itip-hero-width: 490px;
  --itip-text-color: var(--bs-light);
  --itip-icon-bg: var(--bs-primary);
  --itip-title-opacity: 0.75;
  --itip-label-opacity: 0.70;
  --itip-text-opacity: 0.6;
  --itip-content-width: 350px;
  --itip-card-radius: var(--bs-border-radius-xl);
  --itip-card-text-width: 90%;
  --itip-card-border: 1px solid var(--bs-primary);
  --itip-card-shadow: var(--bs-box-shadow-sm);
  --itip-title-weight: 700;
  --itip-logo-bg: #152b33;
  --itip-section-title-color: #7CCEE6;
}

/* ==========================================================
   TYPOGRAPHIE 
   ========================================================== */

.hero-title, .section-title, .section-card-title {
  font-weight: var(--itip-title-weight);
  color: var(--itip-text-color);
  opacity: var(--itip-title-opacity);
}

.hero-text, .section-heading, .section-card-text {
  color: var(--itip-text-color);
  opacity: var(--itip-text-opacity);
}

.hero-content {
  max-width: var(--itip-hero-width);
}

.page-intro {
  color: var(--itip-text-color);
  opacity: var(--itip-title-opacity);
}

.form-label-custom {
  color: var(--itip-text-color);
}

.form-field {
  background-color: var(--bs-light-bg-subtle);
  border: 3px solid var(--bs-primary);
  border-radius: var(--bs-border-radius-lg);
}

.form-check-text {
  opacity: var(--itip-label-opacity);
}

.legal-text {
  color: var(--itip-text-color);
  opacity: var(--itip-title-opacity);
  font-size: 0.9rem;
  text-align: justify;
}

/* ==========================================================
   COLONNES
   ========================================================== */

.service-column-title {
  font-size: 2rem;
  color: var(--itip-text-color);
  opacity: var(--itip-title-opacity);
}

.service-list li::marker {
  color: var(--bs-primary);
}

/* ==========================================================
   CARTES
   ========================================================== */

.section-card-title {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.section-card-text {
  width: var(--itip-card-text-width);
  margin: 0 auto 0;
  text-align: center;
}

.card-icon {
  background-color: var(--itip-icon-bg);
  border-radius: var(--itip-card-radius);
  box-shadow: var(--itip-card-shadow);
}

.feature-card {
  background-color: transparent;
  border: var(--itip-card-border);
  border-radius: var(--itip-card-radius);
}

.card-icon-symbol {
  font-size: 1.85rem;
}

/* ==========================================================
   HERO
   ========================================================== */

/* ==========================================================
   BOUTONS
   ========================================================== */

.content-link {
  color: var(--bs-light);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .25s ease, text-decoration-color .25s ease;
}

.content-link:hover {
  color: var(--bs-primary);
  text-decoration-color: var(--bs-primary);
}

.text-link {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color .25s ease;
}

.text-link:hover {
  color: #5fd8e3;
  text-decoration: underline;
}

/* ==========================================================
  TECHNOLOGIES 
  ========================================================== */

.section-heading {
  color: var(--itip-section-title-color);
}

.logo-container {
  background-color: var(--itip-logo-bg);
  padding: 1rem;
  height: 120px;
  overflow: hidden;
  transition: background-color .2s ease;
}

.logo-container:hover {
  background-color: #1A3640;
}

.logo-container img {
  max-height: 70px;
  max-width: 80%;
  width: auto;
  height: auto;
  transition: transform .2s ease;
}

/* ==========================================================
   ROLLOVER — uniquement souris / périphérique avec vrai hover
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  .logo-container:hover img {
    transform: scale(1.08);
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo-container:hover img.logo-wide {
    transform: scale(1.45);
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo-container:hover img.logo-tall {
    transform: scale(1.28);
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo-container:hover img.logo-compact {
    transform: scale(1.65);
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo-container:hover img.logo-tiny {
    transform: scale(1.85);
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo-container:hover img.logo-Xsmall {
    transform: scale(1.99);
  }
}

/* ==========================================================
   VARIANTES DE TAILLE
   ========================================================== */

/* Logo horizontal */

.logo-wide {
  transform: scale(1.35);
}

/* Logo vertical */

.logo-tall {
  transform: scale(1.18);
}

/* Logo compact */

.logo-compact {
  transform: scale(1.55);
}

/* Logo petit */

.logo-tiny {
  transform: scale(1.75);
}

/* Logo extra petit */

.logo-Xsmall {
  transform: scale(1.89);
}

/* ==========================================================
	REFERENCES
   ========================================================== */

.company-logo-light {
  background-color: var(--bs-white);
  border-radius: var(--bs-border-radius-xl);
  padding: .5rem;
  text-align: center;
}

.company-logo-light .tooltip-inner {
  background-color: white;
  color: var(--bs-dark);
  border: 1px solid rgba(var(--bs-primary-rgb), .35);
}

.company-logo-light:hover {
  background-color: var(--bs-white);
}

.company-logo-container {
  cursor: pointer;
  height: 120px;
  padding: 1rem;
}

.company-logo-wide {
  max-width: 85%;
  max-height: 75px;
}

.company-logo-chu {
  max-height: 75px;
  max-width: 70%;
}

.company-logo-PI {
  max-height: 75px;
  max-width: 60%;
}

.company-logo-maglancers {
  width: 195px;
  height: auto;
}

.company-logo-HI {
  width: 195px;
  height: auto;
}

.company-logo-tall {
  max-height: 90px;
}

.company-logo-container img {
  max-height: 80px;
  transition: transform 0.2s ease;
}

.company-logo-container:hover img {
  transform: scale(1.09);
}

/* ==========================================================
	TEMOIGNAGES
   ========================================================== */

.testimonial-card {
  background-color: var(--itip-logo-bg);
  border: var(--itip-card-border);
}

/* ==========================================================
	MENTIONS LEGALES
   ========================================================== */

.legal-summary {
  text-align: center;
  font-size: 0.95rem;
}

.legal-summary a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color .2s ease;
}

.legal-summary a:hover {
  color: var(--itip-accent-color);
  text-decoration: underline;
}

/* ==========================================================
	TOOLTIP
   ========================================================== */

.tooltip-inner {
  background-color: var(--bs-primary);
  color: var(--bs-dark);
  font-weight: 600;
  border-radius: var(--bs-border-radius);
  padding: .45rem .75rem;
}

/* ==========================================================
   NAVBAR
   ========================================================== */

.logo-itip {
  width: 275px;
  margin-top: 5px;
  margin-left: -10px;
}

.navbar .nav-link.active {
  color: #19c3d1;
}

.nav-link {
  position: relative;
  transition: color .25s ease;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--bs-primary);
  transition: all .25s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

/* ==========================================================
   CARTES
   ========================================================== */

/* ==========================================================
   CARROUSEL
   ========================================================== */

/* ==========================================================
   FOOTER
   ========================================================== */