/**
 * CONAI Theme Override
 * Remplace les couleurs violettes/mauves du template Bootstrap
 * par la palette officielle CONAI (issue de Styles/color.js)
 *
 * primary     : #D8535D  (cg1 — rouge principal)
 * primaryDark : #A64153  (cg4 — rouge foncé)
 * primaryLight: #EEB7A5  (cg2 — beige rosé)
 * bgAccent    : #FCF3F3  (cg3 — rose très clair)
 */

/* ── Variables CSS ─────────────────────────────────────────── */
:root {
  --conai-primary:       #D8535D;
  --conai-primary-dark:  #A64153;
  --conai-primary-light: #EEB7A5;
  --conai-bg-accent:     #FCF3F3;
}

/* ── Dégradés & backgrounds colorés ───────────────────────── */
.bg-overlay,
.bg-overlay::before,
.bg-overlay::after,
.welcome-area.bg-overlay,
.welcome-area.bg-overlay::before,
.work-area.bg-overlay,
.work-area.bg-overlay::before,
.work-area.bg-overlay::after {
  background: linear-gradient(135deg, var(--conai-primary-dark) 0%, var(--conai-primary) 100%) !important;
}

.gradient-bg,
.bg-gradient {
  background: linear-gradient(135deg, var(--conai-primary) 0%, var(--conai-primary-dark) 100%) !important;
}

/* ── Hero — shapes de fond (Theme 2) ───────────────────────── */
.shapes-container .bg-shape,
.shapes-container .shape,
.shapes-container > div {
  background: linear-gradient(135deg, var(--conai-primary-dark) 0%, var(--conai-primary) 100%) !important;
}

/* ── Bouton plein par défaut (classe btn seule) ─────────────── */
.welcome-intro .btn,
.welcome-area .btn {
  background: var(--conai-primary) !important;
  border-color: var(--conai-primary) !important;
  color: #fff !important;
}
.welcome-intro .btn:hover,
.welcome-area .btn:hover {
  background: var(--conai-primary-dark) !important;
  border-color: var(--conai-primary-dark) !important;
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar-sticky.sticky {
  background: var(--conai-primary-dark) !important;
}

/* ── Boutons ───────────────────────────────────────────────── */
.btn-bordered {
  border-color: var(--conai-primary) !important;
  color: var(--conai-primary) !important;
  background: transparent !important;
}
.btn-bordered:hover,
.btn-bordered:focus {
  background: var(--conai-primary) !important;
  color: #fff !important;
}

.btn-bordered-white {
  border-color: #fff !important;
  color: #fff !important;
}
.btn-bordered-white:hover {
  background: #fff !important;
  color: var(--conai-primary) !important;
}

.btn-bordered-white.navbar-btn {
  border-color: rgba(255,255,255,0.7) !important;
}

/* Bouton plein (subscribe-form, forgot-password) */
.subscribe-form button[type="submit"],
.subscribe-form .btn,
.btn.btn-lg.btn-block {
  background: var(--conai-primary) !important;
  border-color: var(--conai-primary) !important;
  color: #fff !important;
}
.subscribe-form button[type="submit"]:hover,
.btn.btn-lg.btn-block:hover {
  background: var(--conai-primary-dark) !important;
  border-color: var(--conai-primary-dark) !important;
}

/* ── Liens & textes colorés ────────────────────────────────── */
a {
  color: var(--conai-primary);
}
a:hover {
  color: var(--conai-primary-dark);
}

.contact-title,
.contact-title * {
  color: var(--conai-primary-dark) !important;
}

/* ── Section headings (trait décoratif) ────────────────────── */
.section-heading h2::after,
.section-heading h2::before {
  background: var(--conai-primary) !important;
}

/* ── Icônes colorées ───────────────────────────────────────── */
.service-icon span,
.service-icon i,
.icon-box i,
.feature-icon i,
.featured-icon i,
.work-icon i,
.social-icon i {
  color: var(--conai-primary) !important;
}

/* ── Service list & media alignement vertical ──────────────── */
.single-service.media {
  align-items: center !important;
}

/* ── Featured icon (Pourquoi CONAI, etc.) ──────────────────── */
.featured-icon {
  font-size: 2.5rem;
  line-height: 1;
}

/* ── Check-list icônes ─────────────────────────────────────── */
.check-list .icon,
.check-list .fas {
  color: var(--conai-primary) !important;
}

/* ── Badges & labels ───────────────────────────────────────── */
.badge-primary,
.label-primary {
  background: var(--conai-primary) !important;
}

/* ── Sections grisées (bg-gray) ────────────────────────────── */
.bg-gray {
  background-color: var(--conai-bg-accent) !important;
}

/* ── FAQ accordion ─────────────────────────────────────────── */
.faq-area .card-header button {
  color: var(--conai-primary-dark) !important;
}
.faq-area .card-header button::after {
  color: var(--conai-primary) !important;
}
.faq-area .card-header button:not(.collapsed) {
  color: var(--conai-primary) !important;
}

/* ── Dots carousel ─────────────────────────────────────────── */
.slick-dots li.slick-active button,
.slick-dots li.slick-active button:before {
  background: var(--conai-primary) !important;
  color: var(--conai-primary) !important;
}

/* ── Social icons (footer partage, hover) ──────────────────── */
.social-icons a:hover,
.social-icon a:hover {
  background: var(--conai-primary) !important;
  border-color: var(--conai-primary) !important;
}

/* ── Contact — cercles icônes ──────────────────────────────── */
.contact-us .social-icon {
  background: var(--conai-primary) !important;
  border-color: var(--conai-primary) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer-area .footer-top {
  background: #252525 !important;
}
.footer-area .footer-bottom {
  background: var(--conai-primary-dark) !important;
}
.footer-area .footer-bottom,
.footer-area .footer-bottom p,
.footer-area .footer-bottom a,
.footer-area .footer-bottom span,
.footer-area .footer-bottom div {
  color: rgba(255, 255, 255, 0.85) !important;
}
.footer-area .footer-bottom a:hover {
  color: #fff !important;
}

.footer-area .footer-top,
.footer-area .footer-top p,
.footer-area .footer-top span,
.footer-area .footer-top li,
.footer-area .footer-top .footer-title {
  color: rgba(255, 255, 255, 0.85) !important;
}
.footer-area .footer-top a {
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-area .footer-top a:hover {
  color: #fff !important;
}

/* ── Scroll to top ─────────────────────────────────────────── */
#scrollUp {
  background: var(--conai-primary) !important;
}
#scrollUp:hover {
  background: var(--conai-primary-dark) !important;
}

/* ── Input focus ───────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--conai-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(216, 83, 93, 0.25) !important;
}
.input-group-text {
  color: var(--conai-primary) !important;
  border-color: #dee2e6;
}

/* ── Work / steps numbers ──────────────────────────────────── */
.work-content .work-number,
.circle-number {
  background: var(--conai-primary) !important;
  border-color: var(--conai-primary) !important;
}

/* ── Étoiles review ────────────────────────────────────────── */
.rating i,
.star-rating i {
  color: var(--conai-primary) !important;
}