/*
Theme Name: Spintech Pro AIIDO
Template: spintech-pro
Author: AIIDO
Author URI: AIIDO.fr
Tags: one-column,two-columns,left-sidebar,right-sidebar,flexible-header,custom-background,custom-colors,custom-header,custom-menu,featured-image-header,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,blog,grid-layout,portfolio,photography
Version: 1.0.1752516186
Updated: 2025-07-14 19:03:06

*/
.site-description {
  display: none !important;
}
.site-title {
  display: none !important;
}

h1 {
  color: var(--bs-primary) !important;
}
/* Forcer les liens du menu principal en couleur primaire */
.softura-theme .is-sticky-menu .main-navbar:not(.breadcrumb-menu) .main-menu > li.menu-item:not(.focus):not(.active):not(:hover) > a:not(:focus):not(:hover) {
    color: var(--bs-primary) !important;
}

.above-header .above-header-list a[href^="tel:"] {
  color: var(--bs-gray-dark) !important;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline;
}
.above-header .above-header-list a[href^="mailto:"] {
  color: var(--bs-gray-dark) !important;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline;
}

.above-header a.contact-icon,
.above-header a.contact-icon i {
  color: var(--bs-white) !important;
  text-decoration: none;
}

#journey-section .timeline::after {
    content: "" !important;
}

/* === Surcharge spécifique pour la CTA "À propos" === */
.cta-section.about-cta .cta-wrapper {
  background-color: var(--bs-primary) !important; /* fond bleu AIIDO */
  padding: 30px 35px;
}

/* Bouton dans la section CTA "À propos" - avant survol */
.cta-section.about-cta .btn.btn-primary {
  background-color: var(--bs-primary) !important; 
  color: #fff !important; 
}

/* Bouton dans la section CTA "À propos" - au survol */
.cta-section.about-cta .btn.btn-primary:hover,
.cta-section.about-cta .btn.btn-primary::before,
.cta-section.about-cta .btn.btn-primary::after,
.cta-section.about-cta .btn.btn-primary:focus {
  background-color: #fff !important; 
  color: var(--bs-primary) !important;
}


/* === Surcharge spécifique pour la check list "À propos" === */
#about-section .check-list li {
  color: var(--bs-primary) !important;
}

/* ===== Personnalisation Steps ===== */
.steps-caption span {
  background-color: var(--bs-secondary); /* ← pastille */
}
.steps-caption {
  background-color: var(--bs-primary); /* ← principal */
}
.steps-caption strong a {
  color: #ffffff;          /* lien en blanc */
  text-decoration: none;   /* pas de soulignement */
}
.steps-caption strong a:hover,
.steps-caption strong a:focus {
  color: #ffffff;          /* reste blanc au survol/focus */
  text-decoration: underline;
}

/* ===== Lien téléphone toujours blanc ===== */


/* Icône de téléphone aussi en blanc (paths SVG) */
a.read-link svg path {
  fill: #ffffff;
}

/* Numéro de téléphone toujours blanc */
a.read-link .cta-label {
  color: #ffffff ;  /* force en blanc à l’état normal */
}

/* Effet au survol : reste blanc, éventuellement souligné */
a.read-link:hover .cta-label,
a.read-link:focus .cta-label {
  color: #ffffff ;
  text-decoration: underline; /* optionnel */
}

/* ===== Titre accueil  toujours blanc ===== */

/* Exception : titre et bouton du bloc hero */
.main-table-cell .main-content h1 {
  color: #fff !important; /* titre en blanc */
}

/* Bouton au repos : texte + icône + bordure blancs */
.main-table-cell .main-content .btn.btn-outline-white:link,
.main-table-cell .main-content .btn.btn-outline-white:visited {
  color: #fff !important;

}

/* Icône suit le texte */
.main-table-cell .main-content .btn.btn-outline-white i {
  color: inherit !important;
}

/* Au survol / focus : bouton devient "primary" */
.main-table-cell .main-content .btn.btn-outline-white:hover,
.main-table-cell .main-content .btn.btn-outline-white:focus {
  color: var(--bs-primary) !important; /* ton bleu thème Bootstrap */
}

.main-table-cell .main-content .btn.btn-outline-white {
  margin-top: 20px; /* ajuste la valeur (px, rem, etc.) selon ton rendu */
}



/***** SLIDER — Image height:auto (pas de crop) + Texte contenu + Anti débordement *****/

/* 1) Section slider : on coupe uniquement l’horizontal */
#slider-section,
.slider-section {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: var(--bs-secondary);
}

/* 2) Owl Carousel : empêcher les calculs de largeur de créer du scroll horizontal */
#slider-section .owl-stage-outer {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* 3) Neutraliser les 100% de hauteur du thème (qui provoquent le bug) */
#slider-section .home-slider,
#slider-section .home-slider .owl-stage-outer,
#slider-section .home-slider .owl-stage,
#slider-section .home-slider .owl-item {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
}

/* 4) Si tu avais un cadre “ratio” (option B), on l’annule */
#slider-section .home-slider .owl-item,
#slider-section .home-slider .item {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  overflow: hidden;               /* on clippe seulement si besoin */
  background-color: var(--bs-secondary);
  position: relative;
}

/* 5) Image du slider : comportement naturel => hauteur auto */
#slider-section .home-slider .owl-item > img,
#slider-section .home-slider .item > img,
#slider-section .home-slider .owl-item img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;        /* <- clé : pas de crop, hauteur adaptative */
  max-width: 100% !important;
  object-fit: initial !important;
}

/* 6) Overlay sombre : couvre la hauteur réelle du slide */
#slider-section .main-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* 7) Centrage vertical du contenu (table layout du thème) */
#slider-section .main-table {
  display: table;
  width: 100%;
  height: 100%;
}
#slider-section .main-table-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

/* 8) Bloc texte : ne déborde jamais horizontalement */
#slider-section .main-slider .main-content {
  position: relative;
  width: 100%;
  max-width: min(45rem, 92vw);     /* <- empêche le texte de dépasser sur mobile */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  overflow-wrap: anywhere;
  word-break: normal;

  /* on neutralise tes anciens margins (qui pouvaient pousser la largeur) */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-block: clamp(24px, 6vh, 80px);
}

/* 9) Typo : lisibilité tablette/mobile sans créer de débordement */
@media (max-width: 1001px) {
  #slider-section .main-content h1 {
    font-size: 2rem;
    line-height: 1.25;
  }
  #slider-section .main-content p {
    font-size: 1.1rem;
  }
}

@media (max-width: 585px) {
  #slider-section .main-slider .main-content {
    max-width: 92vw;
  }
  #slider-section .main-content h1 {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  #slider-section .main-content p {
    font-size: 1rem;
  }
}

@media (max-width: 410px) {
  #slider-section .main-slider .main-content {
    max-width: 92vw;
  }
  #slider-section .main-content h1 {
    font-size: 1.4rem;
    line-height: 1.25;
  }
  #slider-section .main-content p {
    font-size: 1rem;
  }
}

/* 10) Sécurité ultime anti-scroll horizontal (utile si un 100vw traine) */
html, body {
  overflow-x: hidden;
}

/* 11) Owl sécurité : certains thèmes masquent avant init */
#slider-section .owl-carousel {
  display: block !important;
}

/* CTA Perosnalisé inspiré du js du slider */

/* =========================================
   Bouton CTA + animation "fadeInUp spring"
   ========================================= */

/* ===============================
   Bouton CTA Elementor — AIIDO
   Orange au repos → Blanc sur fond bleu au survol
   + apparition fadeInUp
   =============================== */

:root{
  /* Couleurs */
  --aiido-accent: var(--e-global-color-accent, rgb(246,141,46)); /* ORANGE */
  --aiido-white: var(--bs-white, #fff);
  --aiido-primary: var(--bs-primary, #0d6efd);
  /* Si ton Bootstrap expose --bs-primary-rgb, on booster l'ombre au survol */
  --aiido-primary-rgb: var(--bs-primary-rgb, 13,110,253);
}

/* Apparition */
@keyframes aiidoFadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Style de base */
a.btn-cta-aiido{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;

  /* État initial (fond blanc) : ORANGE lisible */
  color: var(--aiido-accent) !important;
  border: 2px solid var(--aiido-accent) !important;
  background: transparent !important;

  /* Animation d’entrée */
  opacity: 0;
  animation: aiidoFadeInUp .8s ease forwards;
  animation-delay: .8s;

  /* Transition fluide sur le hover */
  transition: color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  will-change: transform, opacity;
  overflow: hidden; /* pour l’effet de balayage */
}

/* Icône = suit la couleur du texte */
a.btn-cta-aiido i{ color: currentColor !important; }

/* Effet de survol VISUEL renforcé :
   un voile bleu glisse sous le texte (sans toucher au layout) */
a.btn-cta-aiido::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aiido-primary);
  transform: translateX(-105%);          /* caché à gauche */
  transition: transform .35s ease;       /* vitesse du balayage */
  z-index: 0;                            /* sous le texte */
}

/* Texte & bordure passent au blanc quand le fond bleu arrive */
a.btn-cta-aiido:hover,
a.btn-cta-aiido:focus{
  color: var(--aiido-white) !important;
  border-color: var(--aiido-primary) !important;
  transform: translateY(-2px); /* petit lift */
  box-shadow: 0 10px 24px rgba(var(--aiido-primary-rgb), .28);
}

/* Déclenche le balayage bleu */
a.btn-cta-aiido:hover::before,
a.btn-cta-aiido:focus::before{
  transform: translateX(0);
}

/* Assure que le contenu reste au-dessus du voile */
a.btn-cta-aiido > *{
  position: relative;
  z-index: 1;
}

/* Accessibilité : réduire les animations si l’utilisateur le souhaite */
@media (prefers-reduced-motion: reduce){
  a.btn-cta-aiido{
    animation-duration: .01ms;
    animation-delay: 0s;
    transition: none;
  }
  a.btn-cta-aiido::before{ transition: none; }
}

/*Amélioration accesibilité header*/
#above-header h6 {
  color: var(--bs-primary) !important;
}

/*Problème titre H1 responsive*/

/* Mobile (<768px) */
@media (max-width: 767px) {
  .breadcrumb-box .breadcrumb-content {
    transform: translateY(130%) !important; /* descend plus bas */
    margin-bottom: 1rem;
    padding: 1.5rem 1rem 1rem 1rem; /* ajoute de l'air en haut */
  }
  .breadcrumb-heading h1 {
    font-size: clamp(1.6rem, 5vw, 2rem) !important;
    line-height: 1.3em;
    font-weight: 400;
  }
  .breadcrumb-heading h1 span {
    font-size: 1.5rem !important;
    font-weight: 400;
  }
}



/* Mobiles  */
@media (max-width: 767px) {
  #content.spintech-content {
    /* espace proportionnel à la largeur du viewport */
    padding-top: calc(25vw) !important;
  }
}

/* Petite tablette */
@media (min-width: 768px) and (max-width: 899px) {
  #content.spintech-content {
    padding-top: 10rem !important;
  }
}

/* Grande tablette */
@media (min-width: 900px) and (max-width: 1199px) {
  #content.spintech-content {
    padding-top: 5rem !important;
  }
}

/***** HOME — SUPPRESSION ESPACE HEADER *****/

/* Mobile */
@media (max-width: 767px) {
  body.home #content.spintech-content,
  body.front-page #content.spintech-content {
    padding-top: 0 !important;
  }

  body.home .breadcrumb-box,
  body.front-page .breadcrumb-box {
    display: none !important;
  }
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1199px) {
  body.home #content.spintech-content,
  body.front-page #content.spintech-content {
    padding-top: 0 !important;
  }
}

/***** HEADER MOBILE — logo 70px + header compact + centrage vertical *****/
@media (max-width: 991px) {

  /* 1) Neutraliser les min-height imposés (souvent inline) */
  #main-header .navigation-wrapper {
    min-height: 0 !important;
    height: auto !important;
  }

  /* 2) Le header mobile ne doit pas imposer de hauteur */
  #main-header .main-mobile-nav {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* 3) Ligne mobile : alignement vertical strict (logo centré) */
  #main-header .main-mobile-nav .main-mobile-menu {
    display: flex !important;
    align-items: center !important;   /* <- centrage vertical */
    min-height: 0 !important;
    height: auto !important;
  }

  /* 4) Conteneur du logo : pas de “hauteur fantôme” */
  #main-header .main-mobile-nav .mobile-logo,
  #main-header .main-mobile-nav .mobile-logo .logo,
  #main-header .main-mobile-nav .mobile-logo .logo a {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5) Logo : hauteur FIXE = 70px (sans paliers) */
  #main-header .main-mobile-nav .mobile-logo img.custom-logo {
    max-width: none !important;  /* annule .logo img { max-width:12.5rem } */
    width: auto !important;
    height: 70px !important;
    max-height: 70px !important;
    display: block !important;
  }

  /* 6) Baseline sous logo : elle peut casser l’alignement -> on la masque */
  #main-header .main-mobile-nav .mobile-logo .site-description {
    display: none !important;
  }
}