/* Améliorations visuelles pour la maquette KTS */
/*chargement des plices*/
@font-face {
    font-family: 'chanteuse';
    src: url('/Fichiers/fonts/La\ Petite\ Chanteuse.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'creato';
    src: url('/Fichiers/fonts/CreatoDisplay-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'creato';
    src: url('/Fichiers/fonts/CreatoDisplay-Bold.otf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Global font: use Creato for all sections by default */
body {
    font-family: 'creato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keep hero using the other font */
.hero {
    font-family: 'chanteuse', sans-serif;
}
/* Header et navigation */
.header {
    background: red;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
/*la barre haute*/
.barre_haute {
    background-color: rgb(44, 44, 209);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: white;
}
/*la barre de navigation*/
.navbar {
    background-color:white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .nav-link {
    font-family: 'creato', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #333333;
    padding: 10px 14px;
    transition: color 160ms ease, transform 160ms ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #1f3bb3;
    transform: translateY(-2px);
}

/* fixed navbar on scroll */
.navbar.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: background-color 200ms ease, transform 200ms ease;
}

/* animate/hide top narrow bar when scrolled */
.barre_haute {
    transition: transform 200ms ease, opacity 200ms ease, height 200ms ease, padding 200ms ease;
}
.barre_haute.hidden {
    transform: translateY(-100%);
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Hero section */
.hero {
    position: relative;
    overflow: hidden;
    color: white;
    text-align: center;
    padding: 120px 20px;
    height: 100vh;
    display: flex;
    align-items: center;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    font-family: 'chanteuse', sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

/* Background slideshow inside hero */
.hero-bg-container{
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-container .hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: slideShow 12s infinite;
}

.hero-bg-container .hero-bg:nth-child(1){
    animation-delay: 0s;
}
.hero-bg-container .hero-bg:nth-child(2){
    animation-delay: 4s;
}
.hero-bg-container .hero-bg:nth-child(3){
    animation-delay: 8s;
}

@keyframes slideShow{
    0%{opacity:0}
    8%{opacity:1}
    33%{opacity:1}
    41%{opacity:0}
    100%{opacity:0}
}

.hero-content{ /* keep content above backgrounds */
    position: relative;
    z-index: 1;
}

.hero .btn {
    background: linear-gradient(90deg, #6c7ae0 0%, #8d98c9 100%);
    color: #fff;
    padding: 12px 36px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 30px;
    border: none;
    box-shadow: 0 8px 20px rgba(109,119,230,0.25);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    display: inline-block;
    letter-spacing: 0.6px;
}

.hero .btn:hover,
.hero .btn:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(109,119,230,0.32);
    opacity: 0.98;
}

.hero .btn:active {
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 10px 22px rgba(109,119,230,0.28);
}

/* la deco*/
.deco{
    height: 70vh;
    background-color: #f8f9fa;
    background-image: url("/Fichiers/Images/deco1.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

/* Services section */
.services {
    background-color: #f8f9fa;
    padding: 80px 20px;
}

.service_cctv, .service_energie_renouvelable, .service_gps, .service_access_controle, .service_alarm_intrusion, .service_wifi, .service_site_web, .service_reseaux, .service_deploiement, .service_maintenance, .service_cloture_electrique, .service_teleldistribution, .service_electricite_batiment, .service_froid, .service_vente_pc, .service_portail {
    position: relative;
    overflow: hidden;
    text-align: left;
    border-radius: 12px;
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
    border: none;
    margin-bottom: 18px;
    margin-top: 10px;
    height: 220px;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    color: #fff;
}

/* Soft overlay gradient to improve text contrast */
.services .col-md-6::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    transition: opacity 200ms ease;
}

/* Title and description placement */
.services .col-md-6 h2, .services .col-md-6 p{
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 18px 22px;
}

.services .col-md-6 h2{
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.services .col-md-6 p{
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 6px;
}

/* Hover effect */
.services .col-md-6:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 14px 32px rgba(18,32,74,0.16);
}

/* Responsive adjustments to avoid cards stacking/colliding */
@media (max-width: 992px) {
    .service_cctv, .service_energie_renouvelable, .service_gps, .service_access_controle, .service_alarm_intrusion, .service_wifi, .service_site_web, .service_reseaux, .service_cloture_electrique, .service_teleldistribution {
        height: 200px;
    }
    .services .col-md-6 h2{ font-size: 1.05rem; }
    .services .col-md-6 p{ font-size: 0.88rem; }
}

@media (max-width: 576px) {
    .service_cctv, .service_energie_renouvelable, .service_gps, .service_access_controle, .service_alarm_intrusion, .service_wifi, .service_site_web, .service_reseaux, .service_cloture_electrique, .service_teleldistribution {
        height: auto;
        min-height: 160px;
        padding-bottom: 12px;
    }
    .services .col-md-6 h2{ font-size: 1rem; }
    .services .col-md-6 p{ font-size: 0.85rem; }
}

/* Make images/backgrounds fill and stay behind content */
.service_cctv, .service_energie_renouvelable, .service_gps, .service_access_controle, .service_alarm_intrusion, .service_wifi, .service_site_web, .service_reseaux, .service_cloture_electrique, .service_teleldistribution {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_cctv{
    background: url(/Fichiers/Images/cctv.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_energie_renouvelable{
    background: url(/Fichiers/Images/panneau.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_gps{
    background: url(/Fichiers/Images/gps.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_access_controle{
    background: url(/Fichiers/Images/access_c.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_alarm_intrusion{
    background: url(/Fichiers/Images/alarm.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_wifi{
    background: url(/Fichiers/Images/wifi.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_site_web{
    background: url(/Fichiers/Images/dev_web.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service_reseaux{
    background: url(/Fichiers/Images/network.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_portail{
    background: url(/Fichiers/Images/_.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_cloture_electrique{
    background: url(/Fichiers/Images/clotture.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_teleldistribution{
    background: url(/Fichiers/Images/Vector\ tv\ with\ satellite\ equipment\ _\ Premium\ Vector.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_electricite_batiment{
    background: url(/Fichiers/Images/electirc.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_froid{
    background: url(/Fichiers/Images/froid.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service_vente_pc{
    background: url(/Fichiers/Images/pc.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Clients et réalisations */
.clients, .realisations {
    text-align: center;
    padding: 80px 20px;
}

/* Use Creato Bold for the realizations section titles and slightly larger weight for body */
.realisations {
    font-family: 'creato', sans-serif;
}
.realisations h2 {
    font-family: 'creato', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.2px;
}

/* Clients section title using local font */
.clients h2 {
    font-family: 'creato', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.4px;
}

/* Formulaires */
.devis {
    background-color: #667eea;
    color: white;
    padding: 80px 20px;
}

.devis h3 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

/* Styling for the quote form */
.devis .col-md-6:last-child {
    display: flex;
    align-items: center;
}

.devis form {
    width: 100%;
    background: #ffffff;
    color: #222;
    padding: 22px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(29,41,88,0.12);
}

.devis .form-label {
    font-weight: 600;
}

.devis .form-control, .devis .form-select {
    border-radius: 8px;
}

.devis .btn-primary {
    background: linear-gradient(90deg,#4b57d6 0%, #6c7ae0 100%);
    border: none;
}

.devis .btn-outline-secondary {
    border-radius: 8px;
}

@media (max-width: 768px) {
    .devis { padding: 40px 12px; }
    .devis .col-md-6:last-child{ margin-top: 18px; }
    .devis form { padding: 16px; }
}

/* Contact form styling */
.contact .col-8 .form-label { font-weight: 600; }
.contact form {
    width: 100%;
    background: #ffffff;
    color: #222;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(29,41,88,0.08);
}
.contact .form-control, .contact .form-select {
    border-radius: 8px;
}
.contact .btn-primary {
    background: linear-gradient(90deg,#4b57d6 0%, #6c7ae0 100%);
    border: none;
}
.contact .alert { border-radius: 8px; }

@media (max-width: 768px) {
    .contact .col-8 { padding: 0 12px; }
    .contact form { padding: 14px; }
}

/* Contact section heading font */
.contact h3 {
    font-family: 'chanteuse', 'creato', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

/* Footer styling */
.site-footer{
    border-top: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg,#0b1228 0%, #0f1726 100%);
    color: rgba(255,255,255,0.92);
}
.site-footer p{ margin: 0; }
.site-footer .small{ opacity: 0.85; font-weight: 500; }
.site-footer a{ color: #cbd5ff; text-decoration: none; }
.site-footer a:hover{ color: #fff; text-decoration: underline; }

@media (max-width: 576px){
    .site-footer .container{ padding-left: 12px; padding-right: 12px; }
    .site-footer .small{ display: block; margin-top: 6px; }
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.2rem;
    }
    
    .devis h3 {
        font-size: 2rem;
    }
}