/* AfriQode — surcharges de marque au-dessus du thème Fexo (style.css) */

/* ==== Neutralise le opacity:0 initial d'AOS (aos.css) ====
   AOS masque tout élément [data-aos] tant que le JS de scroll-reveal n'a pas
   ajouté .aos-animate. Un outil qui ne simule pas un vrai scroll incrémental
   (capture pleine page, export PDF, crawler, JS désactivé) laisse alors le
   contenu sous la ligne de flottaison invisible en permanence. Le contenu
   doit toujours être lisible ; l'animation d'apparition n'est qu'un bonus. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ==== Header transparent superposé au hero ====
   Le thème comptait sur GSAP ScrollSmoother (retiré, voir theme.js) pour
   plaquer #smooth-wrapper en position:fixed et faire remonter le hero sous
   le header. Sans ce JS, le header (position:relative, texte blanc) restait
   posé sur le fond papier de la page — d'où le header "blanc" et le menu
   invisible. On recrée le même effet en CSS pur, indépendant du JS. */
.header-area.header-three:not(.sticky) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ==== Photos de fond (hero, etc.) : recadrage correct ====
   Le thème avait deux réglages pensés pour un effet Ken Burns au chargement
   (zoom arrière déclenché par une classe JS) mais la règle qui ramène le
   zoom à l'échelle 1 n'existe nulle part dans le CSS fourni — le zoom
   restait donc bloqué en permanence à 1.2x, en plus d'un cadrage ancré en
   bas à droite (background-position: 100% 100%). Résultat : le haut des
   photos (hero notamment) était rogné. On neutralise les deux. */
.bg_cover {
  background-position: center center;
}
.hero-wrapper_three .image-layer {
  transform: scale(1);
}

/* ==== Logo (sceau + logotype) ==== */
.brand-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.brand-logo .logo-mark {
  width: 42px;
  height: 42px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.brand-logo .logo-word {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: var(--heading-color);
  line-height: 1;
}
.brand-logo .logo-word .dot {
  color: var(--primary-color);
}
.brand-logo.brand-logo--on-dark .logo-word {
  color: var(--white-color);
}
.brand-logo.brand-logo--on-dark .logo-word .dot {
  color: var(--cobalt-on-dark);
}
.footer-logo .brand-logo .logo-word {
  color: var(--white-color);
}
.footer-logo .brand-logo .logo-word .dot {
  color: var(--cobalt-on-dark);
}

/* ==== Panneaux graphiques des produits SaaS (pas de captures d'écran réelles) ==== */
.axis-product-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 1290 / 500;
  min-height: 220px;
  border-radius: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(135deg, #0E1217 0%, #1C3A5E 100%);
  color: var(--white-color);
  overflow: hidden;
}
.axis-product-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 15%, rgba(84, 146, 236, 0.35), transparent 55%);
  pointer-events: none;
}
.axis-product-panel i {
  font-size: 46px;
  color: var(--cobalt-on-dark);
  position: relative;
  z-index: 1;
}
.axis-product-panel span {
  position: relative;
  z-index: 1;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
}

/* ==== Section "Notre méthode" : pas de photo, fond graphite plein (le dégradé existant du thème s'applique par-dessus) ====
   Le thème fixe aussi padding-top: 420px sur .axis-choose_three (pensé pour
   la section "Why Choose Us" d'origine, superposée à une grande image) —
   ça laissait un vide énorme en haut une fois la photo retirée. */
.axis-choose_three {
  background-color: var(--heading-color);
  padding-top: 115px;
}
@media screen and (max-width: 1199.98px) {
  .axis-choose_three {
    padding-top: 80px;
  }
}

/* ==== Footer : pas de photo, fond graphite plein ==== */
.main-footer {
  background-color: var(--heading-color);
}

/* ==== Stat badge "3 produits SaaS" (remplace le badge "25+ years") ==== */
.experience-box .content h2 {
  font-size: 40px;
}

/* ==== Icônes Font Awesome remplaçant les PNG colorés du template ==== */
.axis-service-card.style-two > .icon i,
.axis-service-card.style-two > .icon img {
  color: var(--primary-color);
  font-size: 26px;
}
.axis-service-card.style-two:hover > .icon i {
  color: var(--secondary-color);
}

.axis-support-box.style-one .icon i {
  color: var(--primary-color);
  font-size: 26px;
}
.axis-support-box.style-one.on-dark .icon i,
.axis-support-box.style-one.on-dark .content span,
.axis-support-box.style-one.on-dark .content h6,
.axis-support-box.style-one.on-dark .content h6 a {
  color: var(--white-color);
}
.axis-support-box.style-one.on-dark .icon i {
  color: var(--cobalt-on-dark);
}

/* ==== "Notre méthode" : grille de 4 étapes numérotées (dark, sur fond graphite) ====
   Réutilise le composant .axis-progress-item du thème (déjà utilisé pour un
   process en 4 étapes dans template/about.html) plutôt que la liste étroite
   d'origine — pensé pour un fond clair, on l'adapte ici au fond graphite. */
.axis-choose_three .section-title h2,
.axis-choose_three .section-title p {
  color: var(--white-color);
}
.axis-choose_three .axis-progress-item {
  padding: 0 10px;
}
.axis-choose_three .axis-progress-item .step {
  background-color: rgba(84, 146, 236, 0.14);
  color: var(--cobalt-on-dark);
}
.axis-choose_three .axis-progress-item .step.step-one:after,
.axis-choose_three .axis-progress-item .step.step-two:after,
.axis-choose_three .axis-progress-item .step.step-three:after,
.axis-choose_three .axis-progress-item .step.step-four:after {
  border-color: transparent;
}
.axis-choose_three .axis-progress-item .step.step-one:after {
  border-top-color: var(--cobalt-on-dark);
}
.axis-choose_three .axis-progress-item .step.step-two:after {
  border-top-color: var(--cobalt-on-dark);
  border-right-color: var(--cobalt-on-dark);
}
.axis-choose_three .axis-progress-item .step.step-three:after {
  border-top-color: var(--cobalt-on-dark);
  border-right-color: var(--cobalt-on-dark);
  border-bottom-color: var(--cobalt-on-dark);
}
.axis-choose_three .axis-progress-item .step.step-four:after {
  border-color: var(--cobalt-on-dark);
}
.axis-choose_three .axis-progress-item:hover .step {
  background-color: var(--primary-color);
  color: var(--white-color);
}
.axis-choose_three .axis-progress-item .content h5 {
  color: var(--white-color);
}
.axis-choose_three .axis-progress-item .content p {
  color: #9DA5B1;
}
.axis-choose_three .process-column {
  position: relative;
}
.axis-choose_three .arrow-shape {
  position: absolute;
  top: 50px;
  right: -18px;
  color: rgba(157, 165, 177, 0.4);
  font-size: 20px;
  z-index: 1;
}
@media screen and (max-width: 1199.98px) {
  .axis-choose_three .arrow-shape {
    display: none;
  }
}

.axis-avatar-support-box .axis-support-box.style-two .icon {
  background-color: var(--cobalt-light);
}

/* ==== Deuxième stat de la CTA contact (texte, pas de compteur) : réduire la taille ==== */
.axis-counter-box.is-label .content h2 {
  font-size: 28px;
  letter-spacing: 0.02em;
}

/* ==== Bouton secondaire sur fond sombre (hero) : style-two du thème suppose un fond clair ==== */
.theme-btn.style-two.on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white-color);
}
.theme-btn.style-two.on-dark:hover {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--heading-color);
}