/**
* ACIM - Vitrine : couche de modernisation
* Chargée APRÈS style.css (thème Mamba). Ne modifie pas la structure HTML :
* redéfinit l'habillage visuel (couleurs, ombres, typographie, cartes) et
* neutralise les ombres rouges inline via des overrides ciblés.
* Marque : rouge ACIM #c6183d.
*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
  --acim: #c6183d;
  --acim-600: #dc2050;
  --acim-700: #9e1230;
  --acim-050: #fdf2f5;
  --acim-100: #f8d9e0;

  --ink: #1a1c22;
  --body: #4c4f5a;
  --muted: #8c909c;
  --line: #ececf1;
  --bg: #ffffff;
  --bg-soft: #f7f8fb;

  --radius: 18px;
  --radius-sm: 12px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-sm: 0 2px 6px rgba(16, 24, 40, .06), 0 8px 20px -10px rgba(16, 24, 40, .12);
  --shadow-md: 0 8px 24px -8px rgba(16, 24, 40, .14);
  --shadow-lg: 0 26px 52px -18px rgba(16, 24, 40, .28);
  --acim-glow: 0 14px 30px -12px rgba(198, 24, 61, .45);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body {
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  letter-spacing: -0.01em;
}

a { color: var(--acim); }
a:hover { color: var(--acim-700); }

img { max-width: 100%; }

/* Neutralise TOUTES les ombres rouges dures posées en inline sur la vitrine */
.icon-box .icon,
.count-box,
.buy-btn,
.btn-get-started,
.chatbot-btn,
.back-to-top,
.contacour,
.nav-menu ul li .btn-primary,
.nav-menu ul li .btn-outline-primary,
a.btn-outline-primary,
a.btn-primary {
  box-shadow: var(--shadow-sm) !important;
}

/*--------------------------------------------------------------
# Rythme des sections + titres
--------------------------------------------------------------*/
section { padding: 88px 0; }

.section-bg { background-color: var(--bg-soft); }

.section-title { padding-bottom: 44px; }

.section-title h2 {
  position: relative;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 66px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--acim), var(--acim-600));
}

.section-title p {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
}

/*--------------------------------------------------------------
# Boutons
--------------------------------------------------------------*/
.btn-get-started,
.buy-btn,
.nav-menu ul li .btn-primary,
.contacour,
.btn.btn-outline-primary {
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.btn-get-started,
.buy-btn {
  background: linear-gradient(135deg, var(--acim), var(--acim-700)) !important;
  border: 0;
  color: #fff !important;
  padding: 13px 30px;
}

.btn-get-started:hover,
.buy-btn:hover,
.nav-menu ul li .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--acim-glow) !important;
  color: #fff !important;
}

/* Bouton "featuredgold" (Business) : décline la marque en variante dorée douce */
.featuredgold .buy-btn {
  background: linear-gradient(135deg, #c9a227, #a9861a) !important;
}

/*--------------------------------------------------------------
# Top bar
--------------------------------------------------------------*/
#topbar {
  background: var(--ink);
  border-bottom: 0;
  color: #cfd2db;
  font-size: 13.5px;
}
#topbar .contact-info a { color: #cfd2db; }
#topbar .contact-info a:hover { color: #fff; }
#topbar .contact-info i { color: var(--acim-600); }
#topbar .social-links a { color: #aeb2be; }
#topbar .social-links a:hover { color: #fff; }

/*--------------------------------------------------------------
# Header / navigation
--------------------------------------------------------------*/
/* Stickiness gérée par le plugin jquery.sticky (main.js) : on ne touche pas
   au positionnement, seulement à l'habillage. */
#header {
  height: auto;
  padding: 12px 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

#header.header-scrolled,
.is-sticky #header {
  box-shadow: var(--shadow-sm);
}

.nav-menu a {
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}

.nav-menu > ul > li > a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--acim);
  transition: width .25s ease;
}
.nav-menu > ul > li > a:hover::after,
.nav-menu > ul > li.active > a::after { width: 100%; }

/* Les 2 CTA du header ne portent pas de soulignement */
.nav-menu ul li .btn-primary::after,
.nav-menu ul li .btn-outline-primary::after { display: none; }

.nav-menu ul li .btn-primary {
  background: linear-gradient(135deg, var(--acim), var(--acim-700));
  border-radius: 999px;
  text-transform: none;
  padding: 9px 20px;
}
.nav-menu ul li .btn-outline-primary {
  border: 1.5px solid var(--acim);
  border-radius: 999px;
  text-transform: none;
  padding: 9px 20px;
}

.nav-menu .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
}
.nav-menu .dropdown-menu li a {
  border-radius: 8px;
  padding: 9px 14px;
}
.nav-menu .dropdown-menu li a:hover {
  background: var(--acim-050);
  color: var(--acim);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero .carousel-item::before {
  background: linear-gradient(115deg, rgba(20, 12, 14, .82) 0%, rgba(138, 26, 35, .55) 55%, rgba(20, 12, 14, .35) 100%);
}

#hero h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 22px;
}
#hero h2 span { color: #ffa7b8; }

#hero p {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #f1eef0;
}

#hero .btn-get-started {
  padding: 15px 38px;
  font-size: 15px;
  border-radius: 999px;
  background: #fff !important;
  color: var(--acim) !important;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5) !important;
}
#hero .btn-get-started:hover {
  background: var(--acim) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

#hero .carousel-indicators [data-slide-to],
#hero .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  opacity: .55;
}
#hero .carousel-indicators .active { opacity: 1; background: #fff; }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .container {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.about .video-box img { padding: 0; height: 100%; object-fit: cover; }

.about .icon-box .icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--acim-050);
}
.about .icon-box .icon i { color: var(--acim); font-size: 26px; }
.about .icon-box:hover .icon {
  background: linear-gradient(135deg, var(--acim), var(--acim-700));
}
.about .icon-box .title { margin-left: 84px; font-size: 16px; }
.about .icon-box .description { margin-left: 84px; font-size: 15px; line-height: 1.7; color: var(--body); }

/*--------------------------------------------------------------
# Cartes génériques (counts, "comment ça marche")
--------------------------------------------------------------*/
.count-box {
  background: var(--bg) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 24px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.count-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md) !important;
}
.counts .count-box span { color: var(--acim); }

/*--------------------------------------------------------------
# Services / solutions  (markup .service-item non stylé à l'origine)
--------------------------------------------------------------*/
.services .service-item {
  position: relative;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .35s ease, box-shadow .35s ease;
}
.services .service-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.services .service-item .img { overflow: hidden; }
.services .service-item .img img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.services .service-item:hover .img img { transform: scale(1.06); }

.services .service-item .details { padding: 50px 26px 30px; text-align: center; }

/* Pastille d'icône flottante (remplace l'ancien style .services .icon i) */
.services .service-item .details .icon {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--acim), var(--acim-700));
  box-shadow: var(--acim-glow);
}
.services .service-item .details .icon i {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 26px !important;
}
.services .service-item .details h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.services .service-item .details h3 a { color: var(--ink); }
.services .service-item:hover .details h3 a { color: var(--acim); }
.services .service-item .details p { font-size: 15px; color: var(--body); margin-bottom: 0; }

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing { background: var(--bg-soft); }

.pricing .pricing-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 36px 30px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.pricing .pricing-item:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

/* Carte "populaire" mise en avant */
.pricing .featured {
  border: 1.5px solid var(--acim) !important;
  box-shadow: var(--shadow-md);
}
@media (min-width: 992px) {
  .pricing .featured { transform: scale(1.04); }
  .pricing .featured:hover { transform: scale(1.04) translateY(-10px); }
}

.pricing .pricing-header h3 { font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.pricing .pricing-header h4 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--ink);
  margin: 6px 0 0;
}
.pricing .pricing-header h4 sup { font-size: .9rem; color: var(--muted); top: -1.1em; }
.pricing .pricing-header h4 span { font-size: .95rem; font-weight: 500; color: var(--muted); }

.pricing .pricing-item ul { text-align: left; margin: 24px 0; }
.pricing .pricing-item ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: .96rem;
  color: var(--body);
}
.pricing .pricing-item ul li i { color: var(--acim); margin-top: 3px; }

/*--------------------------------------------------------------
# Témoignages
--------------------------------------------------------------*/
#testimonials .row > div > div {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 32px !important;
  transition: transform .3s ease, box-shadow .3s ease;
}
#testimonials .row > div > div:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md) !important;
}
#testimonials p { font-size: 1rem; line-height: 1.7; }

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
.faq .faq-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  padding: 24px 28px;
  margin-bottom: 18px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq .faq-item:hover { box-shadow: var(--shadow-sm); border-color: var(--acim-100); }
.faq .faq-item h4 { font-size: 18px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.faq .faq-item p { margin-bottom: 0; color: var(--body); }

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 30px 20px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.contact .info-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.contact .info-box i {
  border: 0;
  background: var(--acim-050);
  color: var(--acim);
  width: 60px;
  height: 60px;
  line-height: 60px;
  padding: 0;
  margin-bottom: 6px;
}
.contact .info-box h3 { color: var(--ink); font-size: 18px; }

.contact iframe { border-radius: var(--radius); border: 1px solid var(--line); }

/* Bouton flottant chatbot + retour haut de page */
.chatbot-btn {
  background: linear-gradient(135deg, var(--acim), var(--acim-700)) !important;
  border: 0;
}
.chatbot-btn:hover { transform: translateY(-3px); }
.back-to-top {
  border-radius: 12px;
  width: 44px;
  height: 44px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer { background: linear-gradient(135deg, var(--acim), var(--acim-700)) !important; }
#footer .footer-contact p,
#footer p { line-height: 1.7; }
#footer h4 {
  font-weight: 700;
  padding-bottom: 12px;
  margin-bottom: 8px;
}
#footer .footer-links ul li { padding: 7px 0; }
#footer .footer-links ul a { opacity: .92; transition: opacity .2s, padding-left .2s; }
#footer .footer-links ul a:hover { opacity: 1; padding-left: 4px; color: #fff; }
#footer .copyright { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 30px; padding-top: 24px; }
#footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: background .25s ease, transform .25s ease;
}
#footer .social-links a:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 991px) {
  section { padding: 60px 0; }
  .about .icon-box .title,
  .about .icon-box .description { margin-left: 0; }
  .about .icon-box .icon { float: none; margin-bottom: 14px; }
}