/**
 * CRASS — couche UI/UX sobre
 * Bleu = couleur principale | Vert = accent rare | Neutres = respiration
 */

:root {
  --primary: #0B4F8C;
  --primary-hover: #083A6B;
  --primary-dark: #052848;
  --accent: #1F7A4D;
  --accent-soft: #EAF6F0;
  --surface: #FFFFFF;
  --surface-muted: #F5F7FA;
  --border-soft: #E4E9F0;
  --text-body: #5A6570;
  --title: #13283A;
  --secondary: #1A2A3A;

  --bs-primary: #0B4F8C;
  --bs-primary-rgb: 11, 79, 140;
  --bs-success: #1F7A4D;
  --bs-success-rgb: 31, 122, 77;
  --bs-link-color: #0B4F8C;
  --bs-link-hover-color: #083A6B;
  --bs-body-color: #5A6570;
  --bs-heading-color: #13283A;
  --bs-light: #F5F7FA;
}

/* ——— Boutons : un seul langage (bleu) ——— */
.btn-primary,
.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0B4F8C;
  --bs-btn-border-color: #0B4F8C;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #083A6B;
  --bs-btn-hover-border-color: #083A6B;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #052848;
  --bs-btn-active-border-color: #052848;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0B4F8C;
  --bs-btn-disabled-border-color: #0B4F8C;
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

.btn-success,
.btn.btn-success {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-success:hover,
.btn.btn-success:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

/* Vert réservé aux états de succès / validation — pas à la déco */
.text-success {
  color: var(--accent) !important;
}

.bg-success {
  background-color: var(--accent) !important;
}

/* Liens contenu */
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.social-list a) {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.social-list a):hover {
  color: var(--primary-hover);
}

/* ——— Typographie & sections : clarté ——— */
.page-content {
  color: var(--text-body);
}

.page-content .title,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  color: var(--title);
  font-weight: 700;
}

.section-head .sub-title,
.section-head .sub-title.text-primary {
  color: var(--primary) !important;
  font-size: 0.78rem !important;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.section-head .title {
  margin-top: 0.35rem;
  line-height: 1.25;
}

/* Séparateurs fins — un trait bleu discret, pas un arc-en-ciel */
.ic-separator.style-1,
.ic-separator.style-1.text-success,
.ic-separator.style-1.text-primary {
  background: var(--primary) !important;
  height: 2px !important;
  width: 48px;
  border: 0;
  opacity: 0.85;
  border-radius: 2px;
}

/* Compteur années — bleu uni, lisible */
.year-exp .year,
.counter-bx .counter.text-primary,
.counter.text-primary {
  color: var(--primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--primary) !important;
  background-clip: border-box !important;
}

/* Surfaces calmes */
.bg-light,
.content-inner.bg-white,
.bg-gray {
  background-color: var(--surface-muted) !important;
}

.bg-white,
.page-content.bg-white {
  background-color: var(--surface) !important;
}

/* Cartes services / icônes — moins de bruit */
.icon-bx-wraper.style-3,
.icon-bx-wraper.style-8 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.icon-bx-wraper.style-3:hover,
.icon-bx-wraper.style-8:hover {
  border-color: rgba(11, 79, 140, 0.28);
  box-shadow: 0 10px 28px rgba(19, 40, 58, 0.06);
  transform: translateY(-2px);
}

.icon-bx-wraper .icon-cell,
.icon-bx-wraper .icon-cell i,
.icon-bx-wraper .text-primary {
  color: var(--primary) !important;
}

.icon-bx-wraper:hover .icon-cell,
.icon-bx-wraper:hover .icon-cell.text-primary {
  color: var(--primary-hover) !important;
}

.icon-bx-wraper .title a {
  color: var(--title) !important;
  text-decoration: none;
}

.icon-bx-wraper .title a:hover {
  color: var(--primary) !important;
}

.icon-bx-wraper p {
  color: var(--text-body);
  line-height: 1.6;
}

/* ——— Header ——— */
.site-header .main-bar {
  background: #fff;
  box-shadow: 0 1px 0 var(--border-soft);
}

.header-nav .nav > li > a {
  color: #2A3A48 !important;
  font-weight: 550;
}

.header-nav .nav > li > a:hover,
.header-nav .nav > li.active > a,
.header-nav .nav > li:hover > a {
  color: var(--primary) !important;
}

/* ——— Hero / bannière : rendu d’origine CRASS ——— */
.silder-one .silder-content .overlay-slide {
  background: linear-gradient(
    90deg,
    rgba(0, 140, 74, 0.92) 0%,
    rgba(11, 79, 140, 0.55) 100%
  ) !important;
  width: 35% !important;
}

.silder-one .silder-content .sub-title {
  color: #b8f5d4 !important;
  -webkit-text-fill-color: #b8f5d4;
  letter-spacing: 2px;
  font-weight: 600;
}

.silder-one .silder-content .title {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.silder-one .silder-content .title-small {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.silder-one .btn.btn-light,
.silder-one .btn.btn-ov-secondary {
  background-color: #fff !important;
  color: #0B4F8C !important;
  border: 0 !important;
  position: relative;
  z-index: 2;
}

.silder-one .btn.btn-light:hover,
.silder-one .btn.btn-ov-secondary:hover {
  background-color: #0B4F8C !important;
  color: #fff !important;
}

.silder-one .btn.btn-ov-secondary:after {
  background: #0B4F8C !important;
}

.slidearea .side-contact-info ul li i {
  color: #008C4A !important;
}

/* ——— Footer : navy uni, accents blancs ——— */
.site-footer.style-1 {
  background: #0A2F4A !important;
  background-image: none !important;
}

.site-footer .footer-title {
  color: #fff !important;
  font-size: 1.05rem;
}

.site-footer .footer-title:after {
  background: rgba(255, 255, 255, 0.45) !important;
  height: 2px !important;
  width: 40px !important;
}

.site-footer .widget_about p,
.site-footer .copyright-text {
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.65;
}

.site-footer .text-success {
  color: #fff !important;
  font-weight: 650;
}

.site-footer a,
.site-footer .widget_services ul li a,
.site-footer .footer-link li a,
.site-footer .widget-link a {
  color: rgba(255, 255, 255, 0.82) !important;
}

.site-footer a:hover,
.site-footer .widget_services ul li a:hover,
.site-footer .footer-link li a:hover {
  color: #fff !important;
}

/* Social : pastilles discrètes, pas vert saturé */
.site-footer .social-list.style-1 li a,
.social-list.style-1 li a {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-footer .social-list.style-1 li a:hover,
.social-list.style-1 li a:hover {
  background-color: var(--primary) !important;
  border-color: transparent;
  transform: none;
}

.site-footer .social-list.style-1 li a i,
.social-list.style-1 li a i {
  color: #fff !important;
}

.site-footer.style-1 .footer-bottom {
  background-color: rgba(0, 0, 0, 0.22) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Scroll top — bleu, discret */
.scroltop {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(11, 79, 140, 0.28) !important;
  opacity: 0.92;
}

.scroltop:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  opacity: 1;
}

/* Newsletter zone : fond navy uni */
.crass-newsletter.subscribe-area,
.content-inner.bg-secondary.subscribe-area {
  background-color: #0A2F4A !important;
  background-image: none !important;
}

/* Accordion / FAQ — respiration */
.ic-accordion .accordion-button {
  color: var(--title);
  font-weight: 600;
}

.ic-accordion .accordion-body {
  color: var(--text-body);
  line-height: 1.7;
}

/* Blog cards */
.ic-blog,
.dz-card,
.blog-post {
  border-color: var(--border-soft);
}

/* Contact sidebar */
.contact-sidebar .contact-text p {
  color: var(--text-body);
  line-height: 1.65;
}

/* Form controls — focus bleu doux */
.form-control:focus {
  border-color: rgba(11, 79, 140, 0.45);
  box-shadow: 0 0 0 3px rgba(11, 79, 140, 0.12);
}

/* Réduit les ombres « marketing » trop fortes */
.shadow-primary {
  box-shadow: 0 8px 24px rgba(11, 79, 140, 0.12) !important;
}
