/* VERSION APPCOLLECTOR.CCS = 21-02-2026 23:34 */

/* --- TABLE DES MATIERES

00. HEADER (AppCollector)



--- */


/* ============================================= */
/*             01. INDEX  AppCollector           */
/* ============================================= */

/* AppCollector - modules "Bientôt" (garde hover, mais non cliquable) */
.module-item.is-soon{
  opacity:.45;
}
.module-item.is-soon a{
  cursor:not-allowed;
}

/* AppCollector - taille logo header */
.appcollector-logo{
  max-height: 60px;
  width: auto;
}

/* Font Awesome dans les tuiles : suit la couleur (theme) */
.module-box .fa{
  font-size: 32px;
  line-height: 1;
  color: currentColor; /* important : suit la couleur appliquée au parent */
}

/* Logo AppCollector (theme Light / Dark) */
/* Par défaut (light) */
.logo-dark{ display:none; }
.logo-light{ display:inline-block; }

/* Dark mode Bootstrap 5 */
[data-bs-theme="dark"] .logo-light{ display:none; }
[data-bs-theme="dark"] .logo-dark{ display:inline-block; }

/* ============================================= */
/*           01a. Tuiles et Icones INDEX         */
/* ============================================= */

/* Tuiles (app-icon) : hover propre sans décalage texte */
.app-icon .module-item .animated-icon,
.module-item:hover .animated-icon{
  transform: none !important; /* pas de scale sur tout le lien */
}

/* Hover uniquement sur le carré */
.app-icon .module-item .module-box{
  transition: transform .15s ease, box-shadow .15s ease;
}
.app-icon .module-item:hover .module-box{
  transform: translateY(-3px) scale(1.03);
}

/* Verrouille le texte (la couleur peut changer, mais pas la taille/poids) */
.app-icon .module-title{
  font-weight: 400 !important;
  font-size: 14px !important; /* ajuste si ton design est différent */
  line-height: 1.2 !important;
}
.app-icon .module-item:hover .module-title{
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Collections disponibles : pas de grossissement du texte au hover */
.li_animate .module-item .animated-icon,
.li_animate .module-item:hover .animated-icon{
  transform: none !important;
}

.li_animate .module-item .module-box{
  transition: transform .15s ease, box-shadow .15s ease;
}
.li_animate .module-item:hover .module-box{
  transform: translateY(-3px) scale(1.03);
}

/* ============================================= */
/*      01b. Taille Tuiles, Icones et Texte      */
/* ============================================= */

/* Verrouille le texte sous les Tuiles */
.li_animate .module-title{
  font-weight: 400 !important;
  font-size: 12px !important;  /* ajuste si tu veux (ex: 15px) */
  line-height: 1.2 !important;
}
/* Hover sur Texte */
.li_animate .module-item:hover .module-title{
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* Harmonisation espaces titres sous tuiles */
.dashboard-tiles .module-title{ margin-top: 6px !important; }
.my-collection-tile .module-title{ margin-top: 8px !important; }
.collections-tiles .module-title{ margin-top: 10px !important; }

/* Tableau de bord : Tuiles */
.dashboard-tiles .module-box{
  width: 60px;
  height: 60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Tableau de bord : Icones */
.dashboard-tiles .module-box .fa{
  font-size: 26px;
}

/* Mes collections : Tuiles */
.my-collection-tile .module-box{
  width: 170px;
  height: 170px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Mes collections : Icones */
.my-collection-icon{
  font-size: 72px !important;
}

/* Collections disponibles : tuiles */
.collections-tiles .module-box{
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Collections disponibles : Icones */
.collections-tiles .module-box .fa{
  font-size: 50px;
}

/* Evite décalage des Tuiles en Mobile */

@media (max-width: 767px){
  /* Evite les trous à droite quand flex-wrap */
  .dashboard-tiles,
  .app-icon,
  .collections-tiles,
  .mes-collections-tiles{
    justify-content: flex-start !important;
  }
}


/* ========================= */
/*      01c. Recherche       */
/* ========================= */

/* Bloc Recherche (header mini) */
.header-search-mini{
  width: 200px;
  margin-right: 12px;
}

.header-search-mini .search-mini-wrap{
  position: relative;
  width: 100%;
}

.header-search-mini .icon-search{
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--bs-gray-500);
  pointer-events: none;
}

/* FIX Recherche mini (header) : annule le padding-right énorme de .page-search */
.header-search-mini .page-search .form-control{
  padding-left: 46px !important;
  padding-right: 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* ========================= */
/*      01d. Image Centre    */
/* ========================= */

/* Image centrée dans le header */
.header-center{
  flex: 1;                /* prend l’espace entre gauche et droite */
  text-align: center;
  pointer-events: none;   /* optionnel: évite de gêner les clics */
}

.header-center-img{
  max-height: 40px;       /* ajuste (ex: 40–60) */
  width: auto;
  display: inline-block;
}
/* Image cachée sur Mobile */
@media (max-width: 991px){
  .header-center{ display:none; }
}

/* =========================
   Séparateur animé (max 50px)
========================= */
.ac-divider{
  height: 38px;
  position: fixed;
  top: 60px;          /* ajuste: hauteur de ta navbar */
  left: 0;
  right: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}

/* Ligne principale (gradient qui glisse) */
.ac-divider::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(108,80,191,.0) 10%,
    rgba(108,80,191,.85) 35%,
    rgba(83,189,177,.85) 55%,
    rgba(255,120,74,.85) 75%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: acLineMove 3.2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(108,80,191,.25));
  opacity: .9;
}

/* Lueur qui “passe” */
.ac-divider::after{
  content:"";
  position:absolute;
  top: 50%;
  left: -25%;
  width: 35%;
  height: 14px;
  transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,0) 70%
  );
  animation: acGlowSweep 2.4s ease-in-out infinite;
  mix-blend-mode: overlay;
  opacity: .65;
}

@keyframes acLineMove{
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

@keyframes acGlowSweep{
  0%   { left: -30%; opacity: .0; }
  25%  { opacity: .55; }
  50%  { left: 110%; opacity: .0; }
  100% { left: 110%; opacity: .0; }
}

/* Respecte “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .ac-divider::before,
  .ac-divider::after{
    animation: none !important;
  }
}

/* ------------------------------------ */

/* =========================
   Mes collections : hover inversé
   (par défaut = hover, au survol = normal)
   Scope : .mes-collections-scope uniquement
========================= */

/* PAR DÉFAUT = état hover */
.mes-collections-scope .module-item .module-box{
  background: linear-gradient(136.25deg, var(--bs-primary) 2.1%, #322559 100%) !important;
  color: var(--bs-white) !important;
}

.mes-collections-scope .module-item .module-title{
  font-weight: 700 !important;
  color: var(--bs-primary) !important;
}

/* AU SURVOL = état normal */
.mes-collections-scope .module-item:hover .module-box,
.mes-collections-scope .module-item .animated-icon:hover .module-box,
.mes-collections-scope .module-item .module-box:hover{
  background: linear-gradient(136.25deg, var(--bs-card-bg) 2.1%, var(--bs-card-bg) 100%) !important;
  color: var(--bs-body-color) !important;
}

.mes-collections-scope .module-item:hover .module-title,
.mes-collections-scope .module-item .animated-icon:hover .module-title{
  font-weight: 400 !important;
  color: var(--bs-body-color) !important;
}

/* =========================
   Module Météo
========================= */

/* Cacher le Module provisoirement */
/* .weather-info { display: none !important; } */


/* ================================
   Style de l'Index avant Dashboard
=================================== */
.py-vh-2{padding-top: 100px;padding-bottom: 100px;}
        .py-vh-3{padding-top: 120px;padding-bottom: 120px;}
        .navbar.scrolled {backdrop-filter: blur(25px);}
        .hero-banner{height: 100vh;}
        .dropdown-toggle::after{display: none;}

@media (max-width: 991.98px) {
    .py-vh-2{padding-top: 50px;padding-bottom: 50px;}
    .py-vh-3{padding-top: 60px;padding-bottom: 60px;}
    .navbar{background-color: var(--bs-card-bg); border-bottom: 2px solid var(--bs-primary);}
    .navbar .navbar-nav{flex-direction: row;gap: 20px;justify-content: space-between;margin-top: 1rem;}
    .hero-banner{height: auto; padding: 100px 0;}
}
@media (max-width: 767.98px) {
    .hero-banner{padding: 80px 0;}
    .navbar .navbar-nav{flex-direction: column;}
    .hero-banner .btn,
    #Features .btn,
    #workwithus .btn,
    .grouped-inputs .btn{width: 100%;}
}

/* ------------------------------------- */

/* AppCollector - mobile: logo à gauche, icônes à droite sur une ligne */
@media (max-width: 991.98px){
  #navScroll .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  #navScroll .navbar-collapse{
    display:flex;
    flex:0 0 auto;
  }

  #navScroll .navbar-nav{
    flex-direction:row;
    align-items:center;
    margin:0;
    gap:12px;
  }

  /* enlève les marges BS5 en mobile qui cassent l'alignement */
  #navScroll .navbar-nav .ms-4,
  #navScroll .navbar-nav .ms-lg-4{
    margin-left:0 !important;
  }
}

/* AppCollector - dropdown thème ne doit pas déplacer le header */
#navScroll .dropdown-menu{
  position: absolute;
}

/* Mobile: ancrer le dropdown sous l’icône, sans décaler */
@media (max-width: 991.98px){
  #navScroll .navbar-nav .dropdown{
    position: relative; /* référence pour l'absolu */
  }

  #navScroll .navbar-nav .dropdown-menu{
    top: 100%;
    left: auto;
    right: 0;           /* s’ouvre vers la droite (près de l’icône) */
    margin-top: 10px;
    transform: none !important;
  }
}

/* Etoiles Testimonial */
.rating-stars .fa{ color:#FFC107;
}