/********** CSS **********/
:root{
  --primary:linear-gradient(to right, black,#3B3B3B,#c8ab0d,yellow);
  --secondary:#5F656F;
  --light:#F5F5F5;
  --dark:#02245B;
  --primary-color:#142c88;
  --secondary-color:#ffffff;
  --background-color:#f0f2f5;
  --text-color:#333;
  --card-shadow:0 6px 12px rgba(0,0,0,0.1);
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background-color:var(--background-color);
  color:var(--text-color);
  line-height:1.6;
}
h1,h2,.h1,.h2,.fw-bold{font-weight:700!important}
h3,h4,.h3,.h4,.fw-medium{font-weight:600!important}
h5,h6,.h5,.h6,.fw-semi-bold{font-weight:500!important}

/*** Spinner ***/
#spinner{
  opacity:0;visibility:hidden;z-index:99999;
  transition:opacity .5s ease-out,visibility 0s linear .5s;
}
#spinner.show{
  visibility:visible;opacity:1;
  transition:opacity .5s ease-out,visibility 0s linear 0s;
}

/*** Buttons ***/
.btn{transition:.5s;font-weight:500}
.btn-primary,.btn-outline-primary:hover{color:#FFFFFF}
.btn-square{width:38px;height:38px}
.btn-sm-square{width:32px;height:32px}
.btn-lg-square{width:48px;height:48px}
.btn-square,.btn-sm-square,.btn-lg-square{
  padding:0;display:flex;align-items:center;justify-content:center;font-weight:normal;
}

/*** Back-to-top ***/
.back-to-top{position:fixed;display:none;right:30px;bottom:30px;z-index:99}

/*** Topbar ***/
.topbar-right{position:relative;background:#02245B}
.topbar-right::before{
  content:"";position:absolute;top:0;left:-15px;width:30px;height:100%;
  transform:skewX(-30deg);background-color:#FFF;
}

/*** Navbar ***/
.navbar.sticky-top{top:-100px;transition:.5s}
.navbar .navbar-brand{
  position:relative;padding-right:50px;height:75px;display:flex;align-items:center;background:#FFF;
}
.navbar .navbar-brand::after{
  content:"";position:absolute;top:0;right:-25px;width:35px;height:100%;
  transform:skewX(-30deg);background-color:var(--dark);
}
.navbar .navbar-nav .nav-link{
  margin-right:35px;padding:20px 0;color:var(--dark);
  font-size:18px;font-weight:500;outline:none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active{color:var(--primary)}
.navbar .dropdown-toggle::after{
  border:none;content:"\f107";font-family:"Font Awesome 5 Free";
  font-weight:900;vertical-align:middle;margin-left:8px;
}
#logo_pana{
  background:linear-gradient(to right, black,#3B3B3B,#c8ab0d,#142c8e)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent;
}

/* Navbar responsive */
@media (max-width:991.98px){
  .navbar .navbar-nav .nav-link{margin-right:0;padding:10px 0}
  .navbar .navbar-nav{border-top:1px solid #EEEEEE}
}
@media (min-width:992px){
  .navbar .nav-item .dropdown-menu{
    display:block;border:none;margin-top:0;top:150%;opacity:0;visibility:hidden;transition:.5s;
  }
  .navbar .nav-item:hover .dropdown-menu{top:100%;visibility:visible;opacity:1}
}

/*** Section Catégorie / Carousel cartes ***/
h1{text-align:center;margin:30px 0;color:var(--primary-color);font-size:2.5rem}
section.categorie{margin:50px 0}
section.categorie h2{text-align:center;color:var(--primary-color);margin-bottom:20px}

.carousel-container{
  position:relative;overflow:hidden;width:100%;max-width:1200px;margin:auto;padding:0;
}
.carousel-track{
  display:flex;transform:translateX(0);
  transition:transform .5s ease-in-out;will-change:transform;
}
.carousel-button{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background-color:var(--primary-color);color:#fff;border:none;padding:12px 20px;cursor:pointer;
  border-radius:50%;box-shadow:var(--card-shadow);
}
.carousel-button:hover{background-color:#0f1f5f}
.carousel-button.left{left:10px}
.carousel-button.right{right:10px}

.card{
  background:var(--secondary-color);border-radius:16px;box-shadow:var(--card-shadow);
  padding:20px;margin:0 10px;width:90vw;max-width:320px;flex-shrink:0;box-sizing:border-box;text-align:center;
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 24px rgba(0,0,0,.15)}
.card img{
  width:100%;height:auto;object-fit:cover;border-radius:12px;margin-bottom:15px;
}
.card .read-more{
  display:inline-block;margin-top:15px;padding:10px 20px;
  color:#142c8e;border:1px solid #142c8e;border-radius:8px;text-decoration:none;font-weight:bold;
  transition:background-color .3s ease;
}
.card .read-more:hover{background-color:#0f1f5f;color:#fff}
.card h2{font-size:1.4rem;color:var(--primary-color);margin-bottom:10px}
.card p{font-size:1rem;color:#555}

@media (max-width:768px){
  .carousel-track{justify-content:flex-start}
  .carousel-container{overflow-x:scroll}
  .carousel-button{display:block}
}
@media (min-width:600px){.card{width:300px}}

/*** Header ***/
.carousel-caption{
  top:0;left:0;right:0;bottom:0;display:flex;align-items:center;z-index:1;
  background:linear-gradient(to right, rgba(2,36,91,1) 0%, rgba(255,0,0,.5) 100%, rgba(255,0,0,0) 50%, rgba(2,36,91,.5) 55%, rgba(2,36,91,0) 100%);
}
.carousel-control-prev,.carousel-control-next{width:15%}
.carousel-control-prev-icon,.carousel-control-next-icon{
  width:3.5rem;height:3.5rem;background-color:#142c8e;border:15px solid #142c8e;border-radius:3.5rem;
}

@media (max-width:768px){
  #header-carousel .carousel-item{position:relative;min-height:450px}
  #header-carousel .carousel-item img{position:absolute;width:100%;height:100%;object-fit:cover}
}

/*** Page Header & Breadcrumb ***/
.page-header{
  background:linear-gradient(to right,#142c8e,#857108cf,#142c8e), url(../img/palmiste.png) center center no-repeat;
  background-size:cover;
}
.breadcrumb{
  display:flex;justify-content:center;align-items:center;padding:20px 0;
}
.gradient-text-dark{
  background:linear-gradient(to right, rgba(2,36,91,1), rgba(0,0,0,1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.order-lg-last{order:2}
.page-header .breadcrumb-item+.breadcrumb-item::before{color:var(--light)}
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a{font-size:18px;color:var(--light)}

/*** Footer ***/
.footer{color:#B0B9AE}
.footer .btn.btn-link{
  display:block;margin-bottom:5px;padding:0;text-align:left;color:#B0B9AE;
  font-weight:normal;text-transform:capitalize;transition:.3s;
}
.footer .btn.btn-link::before{
  content:"\f105";position:relative;margin-right:10px;
  font-family:"Font Awesome 5 Free";font-weight:900;
}
.footer .btn.btn-link:hover{color:var(--light);letter-spacing:1px;box-shadow:none}
.copyright{color:#B0B9AE;border-top:1px solid rgba(255,255,255,.1)}