/* =====================================================================
   InovaTech Global — Thème "Celtiis-like"
   Mise en page inspirée de celtiis.bj (Montserrat, bleu marine + accent),
   adaptée à la charte du logo InovaTech. Chargée en dernier (surcharge).
   ===================================================================== */

:root {
    --ig-primary:      #1C3B72;  /* bleu marine (primaire, comme Celtiis) */
    --ig-primary-dark: #12294E;
    --ig-primary-2:    #24488A;
    --ig-blue:         #2E90FA;  /* azur (accent InovaTech) */
    --ig-blue-600:     #1C74D8;
    --ig-cyan:         #38BDF8;
    --ig-green:        #93C01F;  /* accent Celtiis (option) */
    --ig-accent:       var(--ig-blue);  /* <-- change en var(--ig-green) pour l'accent vert */

    --ig-ink:          #14213D;
    --ig-muted:        #5B6B82;
    --ig-line:         #E7ECF3;
    --ig-bg-soft:      #F4F7FC;
    --ig-white:        #ffffff;

    --ig-grad:         linear-gradient(135deg, #2E90FA 0%, #1C74D8 100%);
    --ig-grad-deep:    linear-gradient(135deg, #12294E 0%, #1C3B72 60%, #24488A 100%);

    --ig-shadow:       0 20px 45px rgba(19, 41, 78, .12);
    --ig-shadow-sm:    0 10px 26px rgba(19, 41, 78, .08);
    --ig-radius:       18px;
    --ig-font:         'Montserrat', 'Inter', sans-serif;
}

/* ---------- Base ---------- */
body.defult-home, body {
    font-family: var(--ig-font);
    color: var(--ig-ink);
    background: var(--ig-white);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
h1,h2,h3,h4,h5,h6,.title,.it-title,.services-title,.widget-title {
    font-family: var(--ig-font);
    color: var(--ig-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}
a { color: var(--ig-blue-600); transition: all .25s ease; }
a:hover { color: var(--ig-blue); }
img { max-width: 100%; }
.container { max-width: 1200px; }

/* ---------- Boutons ---------- */
.readon, .readon.learn-more, .submit-btn,
input.submit-btn, button.submit-btn, .ig-btn {
    display: inline-block;
    background: var(--ig-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 34px !important;
    font-family: var(--ig-font);
    font-weight: 700 !important;
    font-size: 15px;
    letter-spacing: .2px;
    box-shadow: 0 12px 24px rgba(46,144,250,.28);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    cursor: pointer;
}
.readon:hover, .readon.learn-more:hover, .submit-btn:hover,
input.submit-btn:hover, .ig-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(46,144,250,.38);
    filter: brightness(1.05);
    color: #fff !important;
}
.ig-btn.ghost, .readon.ghost {
    background: transparent !important;
    color: var(--ig-primary) !important;
    border: 2px solid var(--ig-line) !important;
    box-shadow: none;
}
.ig-btn.ghost:hover, .readon.ghost:hover { border-color: var(--ig-blue) !important; color: var(--ig-blue) !important; }
.ig-btn.white { background:#fff !important; color: var(--ig-primary) !important; box-shadow: 0 12px 24px rgba(0,0,0,.15); }

/* ---------- Titres de section ---------- */
.sec-title .sub-text, .sec-title2 .sub-text, .sub-text, .ig-eyebrow {
    color: var(--ig-accent) !important;
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    font-size: 13px; display: inline-block; margin-bottom: 12px;
}
.sec-title .title, .sec-title2 .title, .ig-h2 { color: var(--ig-primary) !important; font-weight: 800; }
.heading-line { width: 66px; height: 4px; border-radius: 4px; background: var(--ig-accent); margin: 16px auto 0; }
.gray-color { background: var(--ig-bg-soft) !important; }
.ig-section { padding: 96px 0; }
.ig-section.soft { background: var(--ig-bg-soft); }
.ig-center { text-align: center; }
.ig-lead { color: var(--ig-muted); font-size: 17px; max-width: 720px; margin: 0 auto; }

/* =====================================================================
   TOPBAR
   ===================================================================== */
.topbar-area { background: var(--ig-primary-dark) !important; border: none !important; padding: 11px 0; }
.topbar-area .contact-info span:first-child { color: var(--ig-cyan) !important; }
.topbar-area .rs-contact-info li, .topbar-area .contact-info, .topbar-area .contact-info a { color: #D7E2F3 !important; }
.topbar-area .rs-contact-info li i { color: var(--ig-cyan) !important; }
.topbar-area .contact-part.no-border { border: none; }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.menu-area { background: #fff !important; box-shadow: 0 6px 22px rgba(19,41,78,.06); padding: 6px 0; }
.menu-sticky.sticky { background: #fff !important; box-shadow: 0 8px 30px rgba(19,41,78,.10) !important; }
.rs-menu-area .nav-menu > li > a {
    color: var(--ig-primary) !important; font-family: var(--ig-font);
    font-weight: 600; font-size: 15px; position: relative;
}
.rs-menu-area .nav-menu > li > a:hover,
.rs-menu-area .nav-menu > li.current-menu-item > a { color: var(--ig-blue) !important; }
.rs-menu-area .nav-menu > li.current-menu-item > a::after,
.rs-menu-area .nav-menu > li > a:hover::after {
    content: ""; position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 3px; border-radius: 3px; background: var(--ig-accent);
}
.logo-part img, .logo-area img, .footer-logo img, .mobile-logo img { max-height: 50px; width: auto; }
.toolbar-sl-share ul.social li a, .expand-btn-inner .sidebarmenu-search a i { color: var(--ig-primary) !important; }
.toolbar-sl-share ul.social li a:hover { color: var(--ig-blue) !important; }

/* Bouton CTA dans le menu */
.ig-nav-cta {
    background: var(--ig-accent); color: #fff !important;
    padding: 10px 22px !important; border-radius: 50px;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 10px 20px rgba(46,144,250,.28);
}
.ig-nav-cta:hover { color:#fff !important; transform: translateY(-2px); }

/* =====================================================================
   HERO (façon Celtiis : titre + tuiles)
   ===================================================================== */
.ig-hero {
    background: var(--ig-grad-deep);
    position: relative; overflow: hidden;
    padding: 110px 0 90px;
    color: #fff;
}
.ig-hero::before {
    content:""; position:absolute; top:-160px; right:-120px; width:520px; height:520px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.40), rgba(46,144,250,.08) 55%, transparent 70%);
}
.ig-hero::after {
    content:""; position:absolute; bottom:-180px; left:-140px; width:440px; height:440px; border-radius:50%;
    background: radial-gradient(circle at 50% 50%, rgba(46,144,250,.28), transparent 68%);
}
.ig-hero .inner { position: relative; z-index: 2; text-align: center; max-width: 860px; margin: 0 auto; }
.ig-hero .badge {
    display:inline-block; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    color:#E4EDFB; padding:8px 18px; border-radius:50px; font-size:13px; font-weight:600; margin-bottom:22px;
}
.ig-hero h1 { color:#fff !important; font-size: 54px; line-height:1.08; font-weight:800; margin-bottom:20px; }
.ig-hero h1 .accent { color: var(--ig-cyan); }
.ig-hero p.lead { color:#C7D6EE; font-size:19px; max-width:640px; margin:0 auto 30px; }
.ig-hero .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }
.ig-hero .cta .ghost { background: rgba(255,255,255,.08) !important; border:1.5px solid rgba(255,255,255,.35) !important; color:#fff !important; box-shadow:none; }
.ig-hero .cta .ghost:hover { background: rgba(255,255,255,.16) !important; }

/* Tuiles de fonctionnalités du hero */
.ig-hero-tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position:relative; z-index:2; }
.ig-tile {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--ig-radius);
    padding: 30px 24px; text-align:center;
    backdrop-filter: blur(6px);
    transition: transform .28s ease, background .28s ease;
}
.ig-tile:hover { transform: translateY(-6px); background: rgba(255,255,255,.12); }
.ig-tile .ic {
    width:66px; height:66px; border-radius:16px; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(56,189,248,.30), rgba(46,144,250,.18));
    color: var(--ig-cyan); font-size:28px;
}
.ig-tile h3 { color:#fff !important; font-size:19px; margin-bottom:8px; }
.ig-tile p { color:#B9C8E2; font-size:14.5px; margin:0; }

/* En-tête pages internes */
.rs-breadcrumbs .breadcrumbs-inner, .page-header { background: var(--ig-grad-deep) !important; }
.rs-breadcrumbs .breadcrumbs-inner .page-title,
.rs-breadcrumbs .breadcrumbs-inner .title { color:#fff !important; }
.rs-breadcrumbs .breadcrumbs-inner ul li a { color: var(--ig-cyan) !important; }

/* =====================================================================
   BLOC IMAGE + TEXTE (feature row, façon Celtiis "MyCeltiis")
   ===================================================================== */
.ig-feature { padding: 90px 0; }
.ig-feature .txt .ig-eyebrow { display:block; }
.ig-feature .txt h2 { font-size:36px; margin-bottom:18px; }
.ig-feature .txt p { color: var(--ig-muted); font-size:16.5px; margin-bottom:14px; }
.ig-feature ul.checks { list-style:none; padding:0; margin:20px 0 28px; }
.ig-feature ul.checks li { position:relative; padding-left:32px; margin-bottom:12px; color: var(--ig-ink); font-weight:500; }
.ig-feature ul.checks li::before {
    content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; left:0; top:2px; color:#fff; background: var(--ig-accent);
    width:22px; height:22px; border-radius:50%; font-size:11px;
    display:flex; align-items:center; justify-content:center;
}
.ig-feature .img-wrap { position:relative; }
.ig-feature .img-wrap img { border-radius: 22px; box-shadow: var(--ig-shadow); }
.ig-feature .img-wrap .blob {
    position:absolute; inset:auto; z-index:-1; width:80%; height:80%;
    background: var(--ig-grad); border-radius: 30px; filter: blur(6px); opacity:.20;
    top:10%; left:10%;
}

/* =====================================================================
   CARTES SERVICES
   ===================================================================== */
.services-item {
    background:#fff; border:1px solid var(--ig-line); border-radius: var(--ig-radius);
    padding: 32px 26px; height:100%; box-shadow: var(--ig-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position:relative; overflow:hidden;
}
.services-item::before {
    content:""; position:absolute; top:0; left:0; width:100%; height:4px;
    background: var(--ig-accent); transform: scaleX(0); transform-origin:left; transition: transform .35s ease;
}
.services-item:hover { transform: translateY(-8px); box-shadow: var(--ig-shadow); border-color: transparent; }
.services-item:hover::before { transform: scaleX(1); }
.services-item .services-icon .image-part {
    width:74px; height:74px; border-radius:16px; margin-bottom:20px;
    background: linear-gradient(135deg, rgba(46,144,250,.12), rgba(56,189,248,.12));
    display:flex; align-items:center; justify-content:center;
}
.services-item .services-icon .image-part img { max-width:40px; max-height:40px; }
.services-item .services-title a { color: var(--ig-primary); }
.services-item .services-title a:hover { color: var(--ig-blue); }
.services-item .services-desc p { color: var(--ig-muted); line-height:1.7; }

/* =====================================================================
   CARTES OFFRES / DOMAINES (façon cartes fibre Celtiis)
   ===================================================================== */
.ig-offers { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.ig-offer {
    background:#fff; border:1px solid var(--ig-line); border-radius: 20px; overflow:hidden;
    box-shadow: var(--ig-shadow-sm); transition: transform .3s ease, box-shadow .3s ease;
    display:flex; flex-direction:column;
}
.ig-offer:hover { transform: translateY(-8px); box-shadow: var(--ig-shadow); }
.ig-offer .head { background: var(--ig-grad-deep); color:#fff; padding: 30px 28px; }
.ig-offer.featured .head { background: var(--ig-grad); }
.ig-offer .head .ic { font-size: 30px; color: var(--ig-cyan); margin-bottom:12px; }
.ig-offer.featured .head .ic { color:#fff; }
.ig-offer .head h3 { color:#fff !important; font-size:22px; margin:0; }
.ig-offer .body { padding: 26px 28px; flex:1; display:flex; flex-direction:column; }
.ig-offer .body p { color: var(--ig-muted); }
.ig-offer .body ul { list-style:none; padding:0; margin:0 0 24px; }
.ig-offer .body ul li { padding:8px 0; border-bottom:1px dashed var(--ig-line); color: var(--ig-ink); font-size:14.5px; }
.ig-offer .body ul li i { color: var(--ig-accent); margin-right:8px; }
.ig-offer .body .ig-btn { margin-top:auto; text-align:center; }

/* =====================================================================
   AVANTAGES (3 cartes icônes)
   ===================================================================== */
.ig-advantages { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.ig-adv { background:#fff; border:1px solid var(--ig-line); border-radius: var(--ig-radius); padding: 36px 28px; text-align:center; box-shadow: var(--ig-shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.ig-adv:hover { transform: translateY(-6px); box-shadow: var(--ig-shadow); }
.ig-adv .ic { width:78px; height:78px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(46,144,250,.14), rgba(56,189,248,.14)); color: var(--ig-blue); font-size:32px; }
.ig-adv h3 { font-size:20px; margin-bottom:10px; }
.ig-adv p { color: var(--ig-muted); margin:0; }

/* =====================================================================
   COMPTEURS
   ===================================================================== */
.rs-counter .counter-top-area.bg2 {
    background: var(--ig-grad-deep) !important; border-radius: 22px; padding: 55px 30px;
    box-shadow: var(--ig-shadow); position:relative; overflow:hidden;
}
.rs-counter .counter-top-area.bg2::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(56,189,248,.22), transparent 45%); }
.rs-counter .count-number .rs-count { color:#fff !important; font-family: var(--ig-font); font-weight:800; font-size:48px; }
.rs-counter .count-number .rs-count.plus::after { content:"+"; color: var(--ig-cyan); }
.rs-counter .counter-list .title { color:#C7D6EE !important; font-weight:600; }

/* =====================================================================
   BLOCS CONTACT (rangée façon Celtiis)
   ===================================================================== */
.ig-contacts { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.ig-contact-card {
    background:#fff; border:1px solid var(--ig-line); border-radius: var(--ig-radius);
    padding: 30px 22px; text-align:center; box-shadow: var(--ig-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ig-contact-card:hover { transform: translateY(-6px); box-shadow: var(--ig-shadow); }
.ig-contact-card .ic { width:64px; height:64px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background: var(--ig-grad-deep); color: var(--ig-cyan); font-size:24px; }
.ig-contact-card h4 { font-size:16px; margin-bottom:6px; }
.ig-contact-card a, .ig-contact-card p { color: var(--ig-muted); font-size:14.5px; word-break:break-word; }
.ig-contact-card a:hover { color: var(--ig-blue); }

/* =====================================================================
   DIRECTION GÉNÉRALE
   ===================================================================== */
.ig-direction { background: var(--ig-bg-soft); padding: 100px 0; overflow:hidden; }
.ig-direction .photo-wrap { position:relative; text-align:center; }
.ig-direction .photo-wrap .glow { position:absolute; top:6%; left:6%; width:88%; height:88%; border-radius:24px; background: var(--ig-grad); filter: blur(2px); transform: rotate(-3deg); opacity:.85; z-index:0; }
.ig-direction .photo-wrap img { position:relative; z-index:1; border-radius:20px; filter: drop-shadow(0 30px 45px rgba(19,41,78,.30)); }
.ig-direction .badge-exp { position:absolute; z-index:2; right:6%; bottom:8%; background:#fff; border-radius:16px; padding:16px 22px; box-shadow: var(--ig-shadow); text-align:center; }
.ig-direction .badge-exp strong { display:block; font-family: var(--ig-font); color: var(--ig-blue); font-size:26px; }
.ig-direction .badge-exp span { color: var(--ig-muted); font-size:13px; }
.ig-direction .quote { font-size:23px; line-height:1.5; color: var(--ig-primary); font-weight:700; padding-left:24px; margin:18px 0 24px; border-left:4px solid var(--ig-accent); }
.ig-direction .dg-name { font-weight:800; color: var(--ig-primary); font-size:20px; }
.ig-direction .dg-role { color: var(--ig-blue); font-weight:600; }
.ig-direction .dg-desc { color: var(--ig-muted); line-height:1.8; margin-top:16px; }

/* =====================================================================
   ACTUALITÉS / TÉMOIGNAGES / PARTENAIRES / PROJETS
   ===================================================================== */
.blog-item, .rs-blog .blog-item, .testimonial-item, .rs-testimonial .testi-item,
.project-item, .rs-project .project-item, .portfolio-item {
    background:#fff; border:1px solid var(--ig-line); border-radius: var(--ig-radius);
    overflow:hidden; box-shadow: var(--ig-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.blog-item:hover, .project-item:hover, .portfolio-item:hover, .testimonial-item:hover { transform: translateY(-6px); box-shadow: var(--ig-shadow); }
.blog-item .blog-title a, .blog-item .title a, .project-content .title a { color: var(--ig-primary); }
.blog-item .blog-title a:hover, .project-content .title a:hover { color: var(--ig-blue); }
.blog-item .date, .blog-meta li i { color: var(--ig-accent); }
.testimonial-item, .testi-item { padding:32px; }
.testimonial-item .desc, .testi-item .desc { color: var(--ig-muted); line-height:1.75; }
.testi-information .name, .testimonial-item .name { color: var(--ig-primary); font-weight:700; }
.testi-information .designation, .testimonial-item .designation { color: var(--ig-blue); }
.partner-item img, .rs-partner img { filter: grayscale(100%); opacity:.6; transition: all .3s ease; }
.partner-item:hover img, .rs-partner img:hover { filter: grayscale(0); opacity:1; }

/* =====================================================================
   FORMULAIRE RDV / CONTACT
   ===================================================================== */
.ig-form-card { background:#fff; border-radius:22px; padding:36px; box-shadow: var(--ig-shadow); border:1px solid var(--ig-line); }
.ig-form-card .title { color: var(--ig-primary) !important; font-size:24px; }
.ig-form-card .desc { color: var(--ig-muted) !important; }
.from-control, form input[type="text"], form input[type="email"], form input[type="tel"], form textarea {
    width:100%; background: var(--ig-bg-soft) !important; border:1.5px solid var(--ig-line) !important;
    border-radius:10px !important; padding:13px 16px !important; color: var(--ig-ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.from-control:focus, form input:focus, form textarea:focus {
    border-color: var(--ig-blue) !important; box-shadow: 0 0 0 4px rgba(46,144,250,.12) !important; outline:none;
}

/* =====================================================================
   FOOTER (multi-colonnes)
   ===================================================================== */
#rs-footer.rs-footer { background: var(--ig-grad-deep) !important; }
#rs-footer .footer-top { padding: 72px 0 46px; }
#rs-footer .textwidget p, #rs-footer .address-widget .desc, #rs-footer .address-widget .desc a,
#rs-footer .widget-desc, #rs-footer .site-map li a { color:#B9C8E2 !important; }
#rs-footer .widget-title { color:#fff !important; position:relative; padding-bottom:12px; margin-bottom:22px; }
#rs-footer .widget-title::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; border-radius:3px; background: var(--ig-accent); }
#rs-footer .site-map li a:hover, #rs-footer .address-widget .desc a:hover { color: var(--ig-cyan) !important; }
#rs-footer .address-widget li i { color: var(--ig-cyan) !important; }
#rs-footer .footer-social li a span { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; transition:all .25s ease; }
#rs-footer .footer-social li a:hover span { background: var(--ig-accent); border-color:transparent; transform: translateY(-3px); }
#rs-footer .footer-bottom { background: rgba(0,0,0,.25); padding: 20px 0; }
#rs-footer .footer-bottom, #rs-footer .copyright p, #rs-footer .copy-right-menu li a { color:#A9BAD6 !important; }
#rs-footer .copy-right-menu li a:hover { color:#fff !important; }
#rs-footer .footer-top input[type="email"] { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#fff; padding:12px 14px; width:100%; }
#rs-footer .footer-top input[type="email"]::placeholder { color:#91A4C4; }

/* ---------- Divers ---------- */
#loader.loader { background: var(--ig-primary); }
.loader .loader-container, .loader .loader-container:before { border-color: rgba(255,255,255,.2); border-top-color: var(--ig-cyan); }
::selection { background: var(--ig-blue); color:#fff; }
#scrollUp, .scroll-up, .scrollUp { background: var(--ig-accent) !important; border-radius:12px !important; color:#fff !important; box-shadow:0 10px 22px rgba(46,144,250,.35); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
    .ig-hero h1 { font-size: 38px; }
    .ig-hero-tiles, .ig-offers, .ig-advantages, .ig-contacts { grid-template-columns: 1fr; }
    .ig-feature .img-wrap { margin-top: 40px; }
    .ig-feature .txt h2 { font-size: 30px; }
    .rs-menu .nav-menu > li > a { color: var(--ig-primary) !important; }
    .ig-section, .ig-feature { padding: 64px 0; }
    .ig-direction { padding: 64px 0; }
}
@media (max-width: 767px) {
    .ig-contacts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .ig-hero h1 { font-size: 30px; }
    .ig-contacts { grid-template-columns: 1fr; }
    .rs-counter .count-number .rs-count { font-size: 38px; }
}