/* ==========================================================
   PENDASI – Overrides non destructifs (charger EN DERNIER)
   ========================================================== */

/* --------- Variables (palette & UI) --------- */
:root{
  --brand: #2563eb;
  --brand-600:#1d4ed8;
  --brand-700:#1e40af;
  --accent:#0ea5e9;
  --ink:#0f172a;        /* titres */
  --text:#334155;       /* texte courant */
  --muted:#6b7280;      /* texte secondaire */
  --bg:#ffffff;
  --radius:12px;
  --shadow-sm:0 6px 16px rgba(2,6,23,.08);
  --shadow-md:0 12px 28px rgba(2,6,23,.12);
}

/* --------- Base / typo --------- */
body{ color:var(--text); background:var(--bg); }
p{ color:#4b5563; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--brand); }

/* --------- Boutons --------- */
.btn{
  background:var(--brand) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:10px !important;
  box-shadow:var(--shadow-sm) !important;
  padding:12px 22px !important;
}
.btn:before{ background:var(--brand-600) !important; border-radius:10px !important; }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md) !important; }
.btn:active{ transform:none; background:var(--brand-700) !important; }

/* --------- Header & navigation --------- */
.header .header-inner{ background:#fff !important; box-shadow:none; }
.header.sticky .header-inner{ box-shadow:0 10px 28px rgba(15,23,42,.08) !important; }
.header .nav li a{
  color:#1f2937 !important; font-weight:500; padding:24px 12px !important;
}
.header .nav li a::before{ background:var(--brand) !important; }
.header .nav li.active>a,
.header .nav li:hover>a{ color:var(--brand) !important; }

/* icônes / recherche */
.header .right-bar a{ background:var(--brand) !important; }
.header .search-form button{ background:var(--brand) !important; }
.header .search-form button:hover{ background:#fff !important; color:var(--brand) !important; border-left-color:#e5e7eb !important; }

/* --------- Section titles --------- */
.section{ padding:90px 0 !important; }
.section-title{ max-width:900px; margin:0 auto 54px !important; padding:0 !important; text-align:center; }
.section-title h2{ color:var(--ink); font-weight:700 !important; letter-spacing:.2px; }
.section-title h2::after{
  content:""; display:block; width:64px; height:3px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--brand),var(--accent)); border-radius:2px;
}

/* --------- Hero slider (lisibilité texte) --------- */
.slider .single-slider{ position:relative; }
.slider .single-slider::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient( to right, rgba(2,6,23,.65), rgba(2,6,23,.25) 55%, transparent );
}
.slider .single-slider .text{ position:relative; z-index:1; }
.slider .single-slider h1, .slider .single-slider p{ color:#fff !important; }

/* flèches */
.slider .owl-carousel .owl-nav div{ background:var(--brand) !important; color:#fff !important; }
.slider .owl-carousel .owl-nav div:hover{ background:#0f172a !important; }

/* --------- Bande promo (pro-features) --------- */
.pro-features{ box-shadow: -4px 0 16px rgba(2,6,23,.18) !important; }
.get-pro{ background:var(--brand) !important; }

/* --------- Bloc “schedule” (cartes) --------- */
.schedule{ background:#fff; }
.schedule .single-schedule{
  background:linear-gradient(135deg,var(--brand),var(--accent)) !important;
  border-radius:14px !important; box-shadow:var(--shadow-sm);
}
.schedule .single-schedule:before{ display:none !important; }
.schedule .single-schedule .inner{ padding:30px 28px !important; }
.schedule .single-schedule .icon i{ opacity:.25 !important; }
.schedule .single-schedule *{ color:#fff !important; }
.schedule .single-schedule a:hover{ opacity:.9; }

/* --------- Features --------- */
.Feautes .single-features{ padding:10px 18px !important; }
.Feautes .single-features .signle-icon i{
  border-radius:50% !important; border-color:#e5e7eb !important; color:var(--brand) !important;
}
.Feautes .single-features:hover .signle-icon i{ background:var(--brand) !important; color:#fff !important; border-color:transparent !important; }
@media (max-width: 767px){
  .Feautes .single-features::before{ display:none !important; }
}

/* --------- Fun facts --------- */
.fun-facts.section{ padding:110px 0 !important; }
.fun-facts .single-fun i{ border-color:#fff !important; }
.fun-facts .single-fun span{ font-weight:700; }

/* --------- Why choose (vidéo bouton) --------- */
.why-choose .choose-right .video{
  background:var(--brand) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.35);
}

/* --------- Call to action --------- */
.call-action .content{ padding:90px 8vw !important; }
.call-action .content .btn{ background:#fff !important; color:var(--brand) !important; }
.call-action .content .btn.second{ border-color:#fff !important; background:transparent !important; color:#fff !important; }
.call-action .content .btn.second:hover{ background:#fff !important; color:var(--brand) !important; }

/* --------- Portfolio --------- */
.portfolio .single-pf:before{ background:var(--brand) !important; }
.portfolio .single-pf .btn{
  background:#fff !important; color:var(--brand) !important; border-radius:10px !important;
}
.portfolio .single-pf .btn:hover{ background:var(--brand) !important; color:#fff !important; }

/* --------- Blog cards --------- */
.blog .single-news{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); }
.blog .single-news .news-content:before{ background:var(--brand) !important; }

/* --------- Appointment / contact --------- */
.appointment .form input,
.appointment .form textarea,
.newsletter .common-input,
.footer .newsletter-inner input{
  border:1px solid #e5e7eb !important; border-radius:10px !important; color:#111827 !important;
  background:#fff !important;
}
.appointment .form input:focus,
.appointment .form textarea:focus{ outline:0; border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* --------- Newsletter --------- */
.newsletter{ background:#EEF4FF !important; }
.newsletter .btn{ box-shadow:0 6px 18px rgba(137,173,255,.65) !important; }
.newsletter .btn:hover{ box-shadow:var(--shadow-md) !important; }

/* --------- Clients --------- */
.clients{ padding:90px 0 !important; }
.clients .single-clients img{ filter:grayscale(100%); opacity:.85; transition:.3s; }
.clients .single-clients img:hover{ filter:none; opacity:1; }

/* --------- Footer --------- */
.footer .footer-top{ background:var(--brand) !important; }
.footer .footer-top:before{ background:#000; opacity:.08; }
.footer .single-footer h2::before{ background:#fff !important; }
.footer .single-footer .social li a{ border-color:#fff !important; color:#fff !important; }
.footer .single-footer .social li a:hover{ background:#fff !important; color:var(--brand) !important; }
.footer .copyright{ background:var(--brand) !important; }

/* --------- ScrollUp --------- */
#scrollUp{
  background:var(--brand) !important; border-radius:10px !important; box-shadow:var(--shadow-sm) !important;
}
#scrollUp:hover{ background:var(--brand-700) !important; }

/* --------- Préloader : version Pendasi --------- */
.preloaders{
  position:fixed; inset:0; z-index:9999;
  display:grid !important; place-items:center;
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(14,165,233,.18), transparent 60%),
    linear-gradient(135deg,#0b1221 0%, #031322 100%) !important;
  transition: opacity .35s ease, visibility .35s ease;
}
.preloaders.preloader-deactivate{ opacity:0; visibility:hidden; pointer-events:none; }

/* on masque l’ancien loader du thème */
.preloaders .loader-outter,
.preloaders .loader-inner,
.preloaders svg{ display:none !important; }

/* nouveau ring + logo */
.preloaders .loader{
  width:min(22vmin,120px); height:min(22vmin,120px);
  position:relative; display:grid; place-items:center;
}
.preloaders .loader::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--accent);
  border-right-color:var(--brand);
  filter: drop-shadow(0 0 10px rgba(45,120,255,.35));
  animation: pendasi-spin 1s linear infinite;
}
.preloaders .preloader-logo{
  width:min(14vmin,72px); height:min(14vmin,72px); object-fit:contain;
  animation: pendasi-pulse 1.25s ease-in-out infinite;
  display:block;
}
.preloader .indicator{
  position:static !important; inset:auto !important; transform:none !important;
  width:100%; height:100%; display:grid; place-items:center; margin:0;
}
@keyframes pendasi-spin { to { transform: rotate(360deg); } }
@keyframes pendasi-pulse { 0%,100%{ transform:scale(.96); opacity:.85;} 50%{ transform:scale(1); opacity:1;} }

/* --------- Pagination --------- */
.pagination .pagination-list li a{
  background:#f3f4f6 !important; color:#374151 !important;
  border:1px solid #e5e7eb !important; border-radius:10px !important;
}
.pagination .pagination-list li.active a,
.pagination .pagination-list li a:hover{
  background:var(--brand) !important; color:#fff !important; border-color:transparent !important;
}

/* --------- Accessibilité (motion réduite) --------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* --- Header mobile: cacher le desktop, montrer SlickNav, passer au-dessus --- */
@media (max-width: 991.98px){
  /* garder le header au-dessus et posé */
  .header .header-inner{
    position: sticky; top: 0; z-index: 1000;
    background: var(--bg);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }

  /* ne pas afficher la nav desktop en mobile */
  .header .navigation{ display: none !important; }

  /* forcer l’affichage du menu mobile (SlickNav) */
  .slicknav_menu{ display: block !important; z-index: 1000; }
  .slicknav_menu .slicknav_nav{
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .slicknav_menu .slicknav_menutxt{ display:none; }
  .slicknav_menu .slicknav_icon-bar{ background: var(--ink); }

  /* éviter la casse d’alignement */
  .topbar{ display:none; }          /* optionnel si ça pousse tout vers le bas */
  .get-quote{ display:none; }       /* ou déplace le bouton sous le menu si tu préfères */
}

/* --- Le bloc promo qui recouvre le header sur la home --- */
@media (max-width: 991.98px){
  .pro-features{ display:none !important; }  /* le plus simple en mobile */
}

/* --- Sûreté: empiler correctement au-dessus du slider --- */
.header, .header .header-inner, .slicknav_menu{ position: relative; z-index: 1000; }
/* --- Hero slider : empêcher les flèches de recouvrir le texte --- */
.hero-slider{ position: relative; }
.hero-slider .text{ position: relative; z-index: 10; }

/* positionner les flèches en bas, centrées */
@media (max-width: 991.98px){
  .hero-slider .owl-nav{
    position: absolute;
    left: 0; right: 0; bottom: 12px; top: auto;
    display: flex; justify-content: center; gap: 10px;
    z-index: 5;
  }
  .hero-slider .owl-nav .owl-prev,
  .hero-slider .owl-nav .owl-next{
    position: static !important;
    transform: none !important;
    width: 38px; height: 38px; border-radius: 999px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }

  /* Option : réduire un peu la typo du titre sur tablette */
  .slider .single-slider h1{ font-size: 28px; line-height: 1.2; }
  .slider .single-slider p{ font-size: 14px; }
}

/* sur petits téléphones on peut carrément masquer les flèches (le swipe suffit) */
@media (max-width: 575.98px){
  .hero-slider .owl-nav{ display: none !important; }
}
/* Hero slider – forcer les flèches en bas en mobile/tablette */
@media (max-width: 991.98px){
  /* le conteneur des flèches */
  .hero-slider{ position: relative; }
  .hero-slider .owl-nav{
    position: absolute !important;
    top: auto !important;            /* annule top:50% du thème */
    bottom: 10px !important;
    left: 0 !important; right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px;
    z-index: 20;
    pointer-events: none;            /* le conteneur ne bloque pas les clics */
  }
  /* les boutons eux-mêmes restent cliquables */
  .hero-slider .owl-nav .owl-prev,
  .hero-slider .owl-nav .owl-next{
    pointer-events: auto;
    position: relative !important;
    transform: none !important;      /* annule translateY(-50%) */
    top: auto !important; left: auto !important; right: auto !important;
    margin: 0 !important;
    width: 38px; height: 38px; border-radius: 999px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }

  /* mini-ajustements de texte pour éviter tout chevauchement */
  .slider .single-slider h1{ font-size: 28px; line-height: 1.2; }
  .slider .single-slider p{ font-size: 14px; }
}

/* Option : sur très petits écrans, masquer les flèches (le swipe suffit) */
@media (max-width: 575.98px){
  .hero-slider .owl-nav{ display: none !important; }
}