/**
 * TrueCyberSafe — Brand Color Overrides
 * =======================================
 * Palette officielle basée sur l'enseigne physique.
 * Ce fichier remplace les couleurs par défaut du template "Techo" (rouge)
 * par la charte graphique TrueCyberSafe (Bleu Marine + Violet/Indigo).
 *
 * Chargé APRÈS style.css pour surcharger les variables :root.
 * NE PAS MODIFIER style.css directement.
 */

/* ======================================================
   1. PALETTE OFFICIELLE TRUECYBERSAFE
   ======================================================
   - Primaire   : #1e3a8a  (Bleu Marine / Navy — principal)
   - Secondaire : #2563eb  (Bleu Roi — accents, hover)
   - Tertiaire  : #4c1d95  (Violet/Indigo — gradient, IA)
   - Dark       : #0f172a  (Presque Noir — fonds sombres)
   - Light      : #f0f4ff  (Bleu Très Pâle — sections légères)
   ====================================================== */

:root {
    /* Core brand colors */
    --theme-color1: #1e3a8a;          /* Navy Blue → Replaces the red */
    --theme-color2: #0f172a;          /* Deep Dark → Keep headings dark */
    --theme-color3: #f0f4ff;          /* Light Blue-Gray → Section backgrounds */
    --theme-color4: #2563eb;          /* Royal Blue → Stars, highlights */

    /* Gradient (IA / Cyber effect) */
    --brand-gradient: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
    --brand-gradient-light: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --brand-accent: #2563eb;          /* Royal Blue accent */
    --brand-violet: #4c1d95;          /* Deep Violet */

    /* Background overrides */
    --bg-theme-color1: var(--theme-color1);
    --bg-theme-color2: var(--theme-color2);
    --bg-theme-color3: var(--theme-color3);
    --bg-theme-color4: var(--theme-color4);

    /* Border overrides */
    --border-theme-color1: var(--theme-color1);
    --border-theme-color2: var(--theme-color2);

    /* Links */
    --link-color: var(--brand-accent);
    --link-hover-color: var(--theme-color1);

    /* Section title accent (les spans colorés) */
    --sec-title-subtitle-color: var(--brand-accent);

    /* Review / Stars → light blue */
    --review-color: #60a5fa;
}

/* ======================================================
   2. BUTTONS — Remplace le rouge par le Bleu Marine
   ====================================================== */

/* Primary Button (btn-style-one) */
.theme-btn.btn-style-one,
.theme-btn.btn-style-one .btn-title {
    background-color: var(--theme-color1);
    color: #ffffff;
}
.theme-btn.btn-style-one:before {
    background-color: var(--brand-accent);
}
.theme-btn.btn-style-one:hover .btn-title,
.theme-btn.btn-style-one:focus .btn-title {
    color: #ffffff;
}

/* Secondary Button (btn-style-two) */
.theme-btn.btn-style-two {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #ffffff;
}
.theme-btn.btn-style-two:before {
    background-color: var(--brand-violet);
}
.theme-btn.btn-style-two:hover {
    border-color: var(--brand-violet);
    color: #ffffff;
}
.theme-btn.btn-style-two .btn-title {
    color: #ffffff;
}

/* ======================================================
   3. HEADER — Logo zone & nav hover
   ====================================================== */

.main-header {
    --header-nav-hover: var(--brand-accent);
}

.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
    color: var(--brand-accent) !important;
}

.info-btn-two:hover {
    color: var(--brand-accent);
}

/* ======================================================
   4. SECTION TITLES — sub-title color
   ====================================================== */

.sec-title .sub-title {
    color: var(--brand-accent);
}

.sec-title .sub-title::before,
.sec-title .sub-title::after {
    background-color: var(--brand-accent);
}

.sec-title h2 .color1,
span.color1 {
    color: var(--brand-accent);
}

/* ======================================================
   5. SERVICE CARDS — Icon & hover (SERVICES PAGE)
   Service block = cards on the /nos-services page
   ====================================================== */

/* Icon Badge — uses --bg-theme-color4 (gold/yellow by default) → override to brand blue */
.service-block .image-box .icon-box {
    background: var(--brand-gradient) !important;
    color: #ffffff;
}
.service-block .image-box .icon-box i {
    color: #ffffff;
}
/* Triangle corners of icon badge */
.service-block .image-box .icon-box:before {
    border-right-color: var(--theme-color1) !important;
}
.service-block .image-box .icon-box:after {
    border-left-color: var(--theme-color1) !important;
}

/* Card border — thin left accent on normal state */
.service-block .inner-box {
    border-top: 3px solid transparent;
    transition: all 0.3s ease, border-color 0.3s ease;
}

/* Hover state — navy background */
.service-block .inner-box:hover {
    background-color: var(--theme-color1);
    border-top-color: var(--brand-accent);
}

/* Hover state — title becomes white */
.service-block .inner-box:hover .content-box .title,
.service-block .inner-box:hover .content-box .title a {
    color: #ffffff !important;
}

/* Hover state — descriptive text becomes white */
.service-block .inner-box:hover .content-box .text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hover state — "En savoir plus" becomes white */
.service-block .inner-box:hover .content-box .read-more {
    color: rgba(255, 255, 255, 0.9) !important;
}
.service-block .inner-box:hover .content-box .read-more i {
    color: #ffffff !important;
}

/* Normal read-more color → brand accent blue */
.service-block .content-box .read-more {
    color: var(--brand-accent);
}
.service-block .content-box .read-more i {
    color: var(--brand-accent);
}

/* ======================================================
   5b. SERVICE-BLOCK-THREE (Homepage Features pull-up)
   ====================================================== */

.service-block-three .inner-box {
    border-top: 3px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-block-three .inner-box:hover {
    border-top-color: var(--brand-accent);
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.15);
}

.service-block-three .inner-box i.icon,
.service-block-three .inner-box .icon i {
    color: var(--brand-accent);
}

.service-block-three .inner-box .title a:hover {
    color: var(--brand-accent);
}

/* ======================================================
   6. PROGRESS BARS / SKILL BARS
   ====================================================== */

.progress-bar,
.progress-line .bar-inner,
.skills-section .skill-bar .bar-inner {
    background: var(--brand-gradient);
}

/* ======================================================
   7. PAGE TITLE — Breadcrumb & active
   ====================================================== */

.page-breadcrumb li a:hover {
    color: var(--brand-accent);
}

.page-breadcrumb li::after {
    color: var(--brand-accent);
}

/* ======================================================
   8. FOOTER — Links & bottom bar
   ====================================================== */

.main-footer a:hover,
.main-footer .user-links li a:hover {
    color: var(--brand-accent);
}

.footer-bottom {
    border-top-color: rgba(30, 58, 138, 0.3);
}

/* ======================================================
   9. FEATURES / PULL-UP CARDS
   ====================================================== */

/* Remove background from the section */
.features-section .outer-box {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Enhance the individual cards */
.service-block-three .inner-box {
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--theme-color1) !important;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.service-block-three .inner-box:hover {
    transform: translateY(-10px);
    border-top-color: var(--brand-accent) !important;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.15) !important;
    background: var(--theme-color1) !important; /* switch to navy on hover */
}

/* The pseudo element from the template interferes with the background flip */
.service-block-three .inner-box:before {
    display: none !important;
}

.service-block-three .inner-box:hover .title a,
.service-block-three .inner-box:hover .text {
    color: #ffffff !important;
}

.service-block-three .inner-box:hover i.icon,
.service-block-three .inner-box:hover .icon i {
    color: #ffffff !important;
}

/* ======================================================
   10. CONTACT DETAILS — Icons
   ====================================================== */

.contact-details__info li .icon span {
    color: var(--brand-accent);
}

.contact-details__info li .icon {
    border-color: rgba(37, 99, 235, 0.3);
    background-color: rgba(37, 99, 235, 0.05);
}

/* ======================================================
   11. NEWS / BLOG
   ====================================================== */

.news-block .inner-box .lower-content .category a,
.blog-details .category a {
    color: var(--brand-accent);
}

.news-block .inner-box:hover .image-box::before {
    background: rgba(30, 58, 138, 0.6);
}

/* ======================================================
   12. TEAM BLOCK
   ====================================================== */

.team-block .social-icon a:hover,
.team-block-two .social-icon a:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

/* ======================================================
   13. CALL TO ACTION SECTIONS
   ====================================================== */

.call-to-action-two .outer-box {
    background: var(--brand-gradient);
}

/* ======================================================
   14. SCROLL TO TOP
   ====================================================== */

.scroll-to-top {
    background-color: var(--brand-accent);
}

.scroll-to-top:hover {
    background-color: var(--theme-color1);
}

/* ======================================================
   15. PRELOADER
   ====================================================== */

.preloader:before {
    color: var(--theme-color1);
}

/* ======================================================
   16. ABOUT SECTION — Checkmarks & counters
   ====================================================== */

.about-section-six .content-box .list-style-one li,
.list-style-two li::before,
.default-list li::before {
    color: var(--brand-accent);
}

/* ======================================================
   17. MOBILE MENU
   ====================================================== */

.mobile-menu .menu-box {
    border-top: 4px solid var(--theme-color1);
}

.mobile-menu .navigation li a:hover {
    color: var(--brand-accent);
}

/* ======================================================
   18. FORM FOCUS STATE
   ====================================================== */

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

/* ======================================================
   19. SIDEBAR WIDGETS
   ====================================================== */

.sidebar__title::after {
    background-color: var(--brand-accent);
}

.sidebar__tags-list a:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

/* ======================================================
   20. ABOUT / INDUSTRIES SECTION
   ====================================================== */

.industries-section .icon-box .icon {
    background: rgba(37, 99, 235, 0.1);
    color: var(--brand-accent);
}

.industries-section .icon-box:hover .icon {
    background: var(--brand-gradient);
    color: #ffffff;
}

/* ======================================================
   21. ENGAGEMENT BLOCKS (Homepage Redesign)
   ====================================================== */

.engagement-block-inner {
    position: relative;
    margin-bottom: 30px;
}

.engagement-block-inner .inner-box {
    position: relative;
    padding: 40px 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.05);
    transition: all 0.4s ease;
    text-align: center;
    height: 100%;
}

.engagement-block-inner .inner-box:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(30, 58, 138, 0.15);
    border-bottom: 4px solid var(--brand-accent);
}

.engagement-block-inner .inner-box .icon-box {
    width: 70px;
    height: 70px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--brand-accent);
    font-size: 30px;
    line-height: 70px;
    border-radius: 50%;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.engagement-block-inner .inner-box:hover .icon-box {
    background: var(--brand-gradient);
    color: #ffffff;
    transform: rotateY(180deg);
}

.engagement-block-inner h5 {
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 15px;
    font-size: 1.15rem;
}

.engagement-block-inner .text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #64748b;
}

.step-count {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
}

.engagement-block-inner .inner-box:hover .step-count {
    transform: rotateY(-180deg);
}