/* HERO */

.hero-image{

height:600px;

object-fit:cover;

filter:brightness(60%);

}



.carousel-caption{

bottom:180px;

}



.carousel-caption h1{

font-size:50px;

font-weight:bold;

}



.carousel-caption p{

font-size:22px;

}



@media(max-width:768px){


.hero-image{

height:450px;

}


.carousel-caption{

bottom:50px;

}


.carousel-caption h1{

font-size:30px;

}


.carousel-caption p{

font-size:16px;

}


}
/* PRODUITS */


.produit-image{

height:250px;

object-fit:cover;

}



.card{

transition:0.3s;

}



.card:hover{

transform:translateY(-8px);

}



.card-title{

color:#031b3f;

font-weight:bold;

}
/* PAGE A PROPOS */


.page-banner{

background:#0D47A1;

color:white;

padding:70px 0;

}



.page-banner h1{

font-size:45px;

font-weight:bold;

}




.info-box{

background:white;

padding:30px;

height:100%;

border-radius:10px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}



.info-box h3{

color:#0D47A1;

}



.card{

border:none;

border-radius:15px;

}
/* ESPACE SOCIAL */


.info-box{

background:#ffffff;

padding:30px;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}



.espace-social img{

height:250px;

object-fit:cover;

}



.card img{

height:220px;

object-fit:cover;

}
/* CHARTE GRAPHIQUE MAISON NOKIA */


:root{

--bleu-nuit:#0B1F3A;

--orange:#FF8C00;

--blanc:#FFFFFF;

--gris:#F5F5F5;

}



body{

background:var(--gris);

}



.navbar{

background:var(--bleu-nuit)!important;

}



.btn-warning{

background:var(--orange);

border-color:var(--orange);

color:white;

}



.btn-warning:hover{

background:#cc7000;

}



h1,h2,h3{

color:var(--bleu-nuit);

}



.card{

border-radius:15px;

overflow:hidden;

}
.page-banner{

background:linear-gradient(
90deg,
#0B1F3A,
#FF8C00
);

color:white;

padding:70px 0;

}



.page-banner h1{

color:white;

font-size:45px;

font-weight:bold;

}



.info-box{

background:white;

padding:25px;

border-radius:15px;

height:100%;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}
/* CONTACT */


.form-control{

border-radius:10px;

}



.card{

background:white;

}



.bi{

font-size:20px;

}/* SERVICES ACCUEIL */


.service-box{


background:white;

padding:35px 20px;

border-radius:15px;

height:100%;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

transition:0.3s;

}



.service-box:hover{

transform:translateY(-10px);

}



.service-icon{


font-size:45px;

color:#FF8C00;

margin-bottom:20px;

}



.service-box h4{


color:#0B1F3A;

font-weight:bold;

}






/* POURQUOI NOUS */


.why-section{


background:#0B1F3A;

padding:70px 0;

}




.why-section h3{


font-size:45px;

color:#FF8C00;

}





/* CTA */


.cta-box{


background:linear-gradient(
90deg,
#0B1F3A,
#FF8C00
);


color:white;

padding:50px;

border-radius:20px;

}



.cta-box h2{

color:white;

}

/* FOOTER MAISON NOKIA */


.footer-maison-nokia{


background:#0B1F3A;

color:white;

padding:60px 0 20px;

}




.footer-maison-nokia h3,
.footer-maison-nokia h5{


color:#FF8C00;

font-weight:bold;

}




.footer-maison-nokia ul{


padding:0;

list-style:none;

}




.footer-maison-nokia li{


margin-bottom:10px;

}




.footer-maison-nokia a{


color:white;

text-decoration:none;

}



.footer-maison-nokia a:hover{


color:#FF8C00;

}





.social-icons a{


font-size:25px;

margin-right:15px;

color:white;

}



.social-icons a:hover{


color:#FF8C00;

}

/* WHATSAPP FLOTTANT */


.whatsapp-button{


position:fixed;

bottom:25px;

right:25px;

width:60px;

height:60px;

border-radius:50%;

background:#FF8C00;

color:white;

font-size:35px;

display:flex;

align-items:center;

justify-content:center;

z-index:999;

text-decoration:none;

}



.whatsapp-button:hover{


background:#0B1F3A;

color:white;

}

/* CATALOGUE PRODUITS */


.search-box input{

height:55px;

border-radius:30px;

padding-left:25px;

}




.category-box{


background:white;

padding:30px;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}



.category-box i{


font-size:40px;

color:#FF8C00;

}




.product-card{


background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

position:relative;

transition:0.3s;

}



.product-card:hover{


transform:translateY(-10px);

}




.product-card img{


width:100%;

height:250px;

object-fit:cover;

}




.badge-product{


position:absolute;

top:15px;

left:15px;

background:#FF8C00;

color:white;

padding:8px 15px;

border-radius:20px;

font-size:14px;

}
/* DETAILS PRODUIT */


.product-detail img{


max-height:500px;

object-fit:cover;

}




.product-detail h2{


color:#0B1F3A;

font-weight:bold;

}



.btn-success{


background:#FF8C00;

border-color:#FF8C00;

}



.btn-success:hover{


background:#0B1F3A;

border-color:#0B1F3A;

}

/* MARQUES */


.brand-box{


background:white;

height:160px;

display:flex;

align-items:center;

justify-content:center;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

transition:0.3s;

}



.brand-box:hover{


transform:scale(1.05);

}



.brand-box img{


max-width:130px;

max-height:80px;

object-fit:contain;

}

/* ACTUALITES */


.news-card{


background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

height:100%;

transition:0.3s;

}



.news-card:hover{


transform:translateY(-10px);

}



.news-card img{


height:230px;

width:100%;

object-fit:cover;

}



.news-date{


background:#FF8C00;

color:white;

padding:7px 15px;

border-radius:20px;

font-size:14px;

}
/* NOUVEL ACCUEIL */


.hero-image{

height:650px;

object-fit:cover;

filter:brightness(45%);

}




.hero-overlay{


position:absolute;

top:50%;

left:10%;

transform:translateY(-50%);

color:white;

max-width:700px;

}



.hero-overlay h1{


font-size:65px;

font-weight:900;

color:white;

}



.hero-overlay h2{

color:#FF8C00;

font-size:40px;

}





.hero-overlay p{

font-size:24px;

}




.trust-bar{


background:#0B1F3A;

color:white;

padding:40px 0;

}



.trust-bar h3{


color:#FF8C00;

font-size:45px;

}




.section-title{


text-align:center;

font-size:40px;

margin-bottom:50px;

color:#0B1F3A;

}





.solution-card{


background:white;

padding:35px;

border-radius:20px;

height:100%;

box-shadow:0 5px 20px rgba(0,0,0,.1);

transition:.3s;

}



.solution-card:hover{


transform:translateY(-10px);

}





.social-home{


background:#0B1F3A;

color:white;

padding:80px 0;

margin-top:80px;

}



.social-home h2{

color:#FF8C00;

font-size:45px;

}
/* GALERIE ACCUEIL */


.gallery-card{


height:280px;

position:relative;

overflow:hidden;

border-radius:20px;

}



.gallery-card img{


width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}




.gallery-card:hover img{


transform:scale(1.1);

}



.gallery-overlay{


position:absolute;

bottom:0;

width:100%;

padding:20px;

background:linear-gradient(
transparent,
rgba(0,0,0,.8)
);


color:white;

font-size:22px;

font-weight:bold;

}





/* PARTENAIRES */


.partners-section{


background:#F5F5F5;

padding:60px 0;

}




.partner-logo{


max-width:130px;

max-height:80px;

object-fit:contain;

filter:grayscale(100%);

transition:.3s;

}



.partner-logo:hover{


filter:none;

transform:scale(1.1);

}
/* =========================
   HEADER MAISON NOKIA
========================= */


.navbar-maison{

background:#0B1F3A;

padding:15px 0;

}



.logo-navbar{


height:55px;

width:auto;

margin-right:12px;

object-fit:contain;

}




.brand-name{


font-size:26px;

font-weight:800;

color:white;

}



.brand-name:hover{


color:#FF8C00;

}






.navbar-maison .nav-link{


color:white!important;

font-weight:500;

margin-left:10px;

}



.navbar-maison .nav-link:hover{


color:#FF8C00!important;

}
/*=========================
TOP BAR
==========================*/

.top-bar{

background:#08172B;

color:#ffffff;

font-size:14px;

padding:8px 0;

}

.top-bar span{

margin-right:20px;

}

.top-bar i{

color:#FF8C00;

margin-right:5px;

}

.top-bar a{

color:white;

margin-left:15px;

font-size:18px;

transition:.3s;

}

.top-bar a:hover{

color:#FF8C00;

}


/*=========================
NAVBAR
==========================*/

.navbar{

box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.navbar-brand{

font-size:28px;

font-weight:bold;

}

.nav-link{

font-size:16px;

transition:.3s;

}

.nav-link:hover{

color:#FF8C00!important;

}
/*=========================
CARTE PREMIUM
=========================*/

.product-ribbon{

position:absolute;

left:0;

top:20px;

background:#FF8C00;

color:white;

padding:8px 20px;

font-weight:bold;

border-radius:0 20px 20px 0;

z-index:2;

}

.product-icons{

position:absolute;

right:15px;

top:15px;

display:flex;

flex-direction:column;

gap:10px;

z-index:3;

}

.product-icons a{

width:40px;

height:40px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#0B1F3A;

box-shadow:0 5px 10px rgba(0,0,0,.15);

transition:.3s;

}

.product-icons a:hover{

background:#FF8C00;

color:white;

transform:scale(1.1);

}

.rating{

color:#FFC107;

font-size:18px;

margin-top:10px;

}

.rating span{

color:#555;

font-size:15px;

}

.stock-progress{

margin-top:15px;

}

.stock-progress small{

font-weight:bold;

}

.progress{

height:8px;

border-radius:20px;

}