html {
    scroll-behavior: smooth;
}

body {
    /* font-family: "IBM Plex Sans Arabic", sans-serif; */
    /* font-family: "Almarai", sans-serif; */
    font-family: "Alexandria", sans-serif;
    margin: 0;
    background: #f8f9fa;

}

:root{
    --main-color:rgb(64, 152, 93);
}

/* nav.scrolled{
    background:rgba(250, 250, 250, 0.8);
}
nav.transparent{
    background: rgba(250, 250, 250, 0.3) !important;
    border-bottom: none;

} */

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    padding: 10px 10%;    
    /* background-color: rgb(255, 255, 255); */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgb(186, 186, 186);
    z-index: 100;
}
nav .flex h1{
    margin: 5px;
    background: linear-gradient(90deg, #53dd7a 0%, #1a3e22 100%);

  /* 2. On "coupe" le fond pour qu'il épouse la forme des lettres */
    -webkit-background-clip: text; /* Pour Chrome, Safari, Edge */
    background-clip: text;         /* Standard */

    /* 3. On rend la couleur du texte transparente pour laisser voir le dégradé */
    color: transparent !important;

    /* Optionnel : on booste le gras pour que le dégradé soit bien visible */
    font-weight: 800;
    /* text-shadow: 1px 1px 1px rgb(124, 123, 123); */
}
nav .flex h1 a{
    color:  transparent;
}

.login_a{
    padding: 10px;
    background: linear-gradient(to right, rgb(72, 235, 121), rgb(43, 133, 60));
    color: white;
    transition: 0.3s;
    border-radius: 50px;
}
.subs_a{
    padding: 10px;
    /* border: 1px solid var(--main-color); */
    /* background: linear-gradient(rgb(122, 9, 197), rgb(87, 0, 128)); */
    color: rgb(64, 152, 93);
    transition: 0.3s;
    /* background-color: rgb(24, 214, 100); */
    border: 1px solid var(--main-color);
    border-radius: 50px;
}
nav a{
    text-decoration: none;
    color: rgb(67, 67, 67);
}
nav .flex{
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 15px;
}
nav .logo{
    width: 160px;
}
/* #burger{
    width: 25px;
    display: none;
}
#burger div{
    padding: 2px;
    background-color: rgb(51, 4, 96);
  
    margin: 4px 0px;
    border-radius: 2px;
} */


#burger {
    width: 35px;
    height: 30px;
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    cursor: pointer;
    display: none;
    
}

#burger div {
    height: 4px;
    background-color: #000;
    border-radius: 2px;
    transition: all 0.4s ease;
    margin: 4px 0px;
}

/* Lorsque le burger est actif */
#burger.active div:nth-child(1) {
    transform: rotate(43deg) translate(6px, 6px);
}

#burger.active div:nth-child(2) {
    opacity: 0;
}

#burger.active div:nth-child(3) {
    transform: rotate(-43deg) translate(6px, -6px);
}

.subs_a:hover, .login_a:hover{
    box-shadow: 0px 0px 10px lightgray;
    transform: scale(1.04);
    transition: 0.3s;
}



#ulinks{
    position: fixed;
    /* top: 100px; */
    padding: 15px 10%;
    /* background-color: rgb(245, 245, 245); */
    left: 0;
    width: 80%;
    z-index: 500;
    height: 100%;
    display: none;
    background: rgba(90, 90, 90, 0.7); /* obligatoire */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#ulinks a{
    display: block;
    margin: 10px 0px;
    color: rgb(222, 222, 222);
    padding-bottom: 10px;
    transition: 0.3s;
    border-bottom: 1px solid lightgray;
    text-align: right;
    /* width: fit-content; */
}

#ulinks a:hover{
    color: rgb(24, 24, 24);
    transition: 0.3s;
}






#banner{
    background:linear-gradient(rgba(14, 14, 14, 0.85), rgba(22, 4, 40, 0.5) ), url('../imgs/banner2.jpg') ;
    height: 700px;
    margin-top: 0px;
    background-position: center;
    background-size: cover;
}

#banner div{
    /* padding-top: 100px; */
    text-align: center;
    max-width: 800px;
    margin: auto;
    padding: 220px 15px 10px;
}
#banner div h1{
    text-shadow: 2px 2px 2px black;
    letter-spacing: 1px;
    color: white;
    font-size: 40px;
}
#banner div h1 span{
    color: var(--main-color);
}
#banner div p {
    color: rgb(194, 194, 194);
}
#banner div a{
    padding: 10px 20px;
    display: block;
    width: fit-content;
    /* margin-top: 10px; */
    border: 1px solid white;
    color: white;
    transition: 0.2s;
    text-decoration: none;
    margin: 15px auto;
}
#banner div a:hover{
    color: black;
    background-color: white;
    transition: 0.2s;
}



#stats {
   display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 20px;
    /* background: radial-gradient(circle at center, #7b2ff7 0%, #3a0ca3 70%); */
    background: radial-gradient(circle at top, #383838, #0f0f0f 60%);
    color: rgb(77, 248, 128);
    text-align: center;
    flex-wrap: wrap;
    margin: -100px 100px 20px;
    border-radius: 10px;
}

.stat-box {
    margin: 10px;
}
.stat-box i{
    font-size: 30px;
}

.stat-box h2 {
    font-size: 25px;
    margin-bottom: 10px;
}

.stat-box p {
    font-size: 18px;
}



#subjects {
    padding: 80px 20px;
    text-align: center;
    background: #ffffff;
}

#subjects h2 {
    font-size: 32px;
    margin-bottom: 50px;
}

.subjects-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 800px;
    margin: auto;
}

#whyus{
    margin-top: 100px;
    background:linear-gradient(to bottom, rgba(11, 225, 175, 0), rgb(1, 33, 64)) ;
    padding: 30px 10px 100px;
    direction: rtl;

    font-family: "IBM Plex Sans Arabic", sans-serif;
}
.why_container{
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.why_container div{
    height: 500px;
    color: white;
}
#one{
    background:linear-gradient(rgba(0, 0, 0, 0.551), rgba(0, 0, 0, 0.617)), url('../imgs/one.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgb(0, 0, 49);
    height: 800px;
    margin-top: -40px;
}
#two{
    background:linear-gradient(rgba(0, 16, 61, 0.763), rgba(3, 1, 38, 0.8)), url('../imgs/two2.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgb(0, 0, 57);
    height: 800px;
    margin-top: -80px;
    padding: 15px;
}
#three{
    background:linear-gradient(rgb(0, 13, 70), rgb(1, 0, 33));
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgb(0, 0, 68);
    padding: 15px;
}
.why_container div ul li {
    margin-top: 20px;
    color: rgb(214, 214, 214);
}

.subject-box {
    background: #f3f3f3;
    width: fit-content;
    padding: 10px 20px;
    border-radius: 50px;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.subject-box:hover {
    background: #21d886;
    color: white;
    transform: translateY(-3px);
    cursor: pointer;
}
.subject-box h3{
    font-size: 16px;
    font-weight: normal;
    margin: 5px;
}
.subject-box i {
    font-size: 16px;
    /* margin-bottom: 15px; */
}


.in_link {
    display: none;
}


.subject-btn{
    padding: 10px 20px;
    background-color: rgb(0, 121, 79);
    color: white;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0px 0px 10px lightgray;
    display: inline-block;
    margin-top: 30px;
}



#about-platform {
    padding: 80px 8%;
    /* background: #f8f9fa; */
    background-color: transparent;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* TEXT */
.about-text {
    text-align: right;
    flex: 1;
}

.about-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #555;
}

.about-btn {
    display: inline-block;
    padding: 12px 25px;
    background: #2ec16e;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;
}

.about-btn:hover {
    background: #0cab5b;
}

/* IMAGE */
.about-image {
    flex: 1;
    text-align: right;
}

.about-image img {
    width: 100%;
    max-width: 450px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}









#why-us {
    padding: 80px 20px;
    text-align: center;
    background: #f8f9fa;
}

#why-us h2 {
    font-size: 32px;
    margin-bottom: 50px;
}

.features {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}


.notes{
    text-align: right;
    margin-top: 15px;
}
.notes i{
    font-size: 14px;
    color: rgb(172, 171, 171);
}
.notes .golden{
    color: rgb(241, 195, 42) !important;
}
.feature-box {
    background: white;
    padding: 30px;
    width: 250px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.feature-box:hover {
    transform: translateY(-10px);
}

.feature-box i {
    font-size: 35px;
    margin-bottom: 15px;
    color: #2e9f54;
}






/* CARD */





.parallax-section {
    position: relative;
    height: 500px; /* Ajustez selon vos besoins */
    /* background-image: url('../imgs/ok.jpg');  */
    /* background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat; */
    /* background-size: cover; */
    background: linear-gradient(to bottom, rgb(1, 33, 64), rgb(0, 13, 26));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

/* Overlay pour rendre le texte plus lisible */


.parallax-content {
    position: relative; /* Pour passer au-dessus de l'overlay */
    z-index: 2;
    padding: 20px;
}

.parallax-content h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    /* font-family: 'Cairo', sans-serif; */
}

.parallax-content p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin: 10px;
    transition: 0.3s;
}

.btn-primary { background-color: #ff9800; color: white; }
.btn-secondary { border: 2px solid white; color: white; }




/* ============================= */
/* SECTION REVIEWS */
/* ============================= */

.reviews-section {
    padding: 60px 40px;
}

#reviews .slick-slide {
    padding: 30px 30px 30px 30px; /* top right bottom left */
    box-sizing: border-box;
}

/* corrige le débordement */
#reviews .slick-list {
    margin: -5px;
}

/* corrige le débordement causé par le padding */
#reviews .slick-list {
    margin: -5px;
}

#reviews .slick-slide > div > div {
    margin-bottom: 10px;  /* ajuste 10px à ton goût */
}

/* ============================= */
/* CARD DESIGN */
/* ============================= */

.review-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    text-align: right;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* ============================= */
/* HEADER USER */
/* ============================= */

.review-header {
    display: flex;
    align-items: right;
    justify-content: right;
    gap: 12px;
    margin-bottom: 15px;
    /* text-align: right; */
}

.review-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.review-card p {
    font-size: 14px;
    color: #555;
    text-align: right;

    line-height: 1.6;
}

.more-btn{
    padding: 10px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid rgb(59, 200, 108);
    color: rgb(59, 200, 108);
    margin: 20px auto;
    text-decoration: none;
    font-size: 20px;
    transition: 0.3s;
}
.more-btn:hover{
    transition: 0.3s;
    cursor: pointer;
    color: white;
    background-color: rgb(59, 200, 108);
    box-shadow: 0px 0px 10px lightgray;
    transform: scale(1.05);
}

.more-btn .lt-spinner{
    display: none;
}


.footer {
    background-color: #1f1f1f;
    color: #fff;
    padding: 40px 20px 20px;
    /* font-family: sans-serif; */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: auto;
    text-align: right;
}
.footer-container > div{
    max-width: 340px;
}

.footer-logo img {
    width: 120px;
    margin-bottom: 10px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 8px;
}

.footer-links ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-links ul li a:hover {
    text-decoration: underline;
}



.social-icons a {
    color: #fff;
    font-size: 24px;
    margin-right: 15px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #f0a500;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    border-top: 1px solid #444;
    padding-top: 10px;
}

.footer-container p{
    color: rgb(208, 208, 208);
    font-size: 14px;
}



#banner_login{
    margin-top: 70px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../imgs/about.jpg");
    background-position: center;
    background-size: cover;
    /* height: 250px; */
}
#banner_login div h1{
    color: white;
    text-shadow: 2px 2px 2px black;
}
#banner_login div{
    max-width: 550px;
    padding: 50px 10px 50px;
    text-align: right;
    margin: auto;
    color: white;
}
#banner_login p{
    color: rgb(233, 233, 233);
}




.champ{
    display: inline-block;
    width: 100%;
    margin: 10px 0px;
}
.champ input, .champ select{
    padding: 15px;
    border: 1px solid lightgray;
    display: block;
    margin: 10px 0px;
    width: 100%;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: right;
}
.champ label{
    display: block;
    text-align: right;
}


#login_form{
    max-width: 600px;
    background-color: white;
    padding: 40px 15px;
    border-radius: 5px;
    /* box-shadow: 0px 0px 5px rgb(188, 188, 188); */
    margin: -40px auto 150px;
    /* border: 1px solid var(--main-color); */
    box-shadow: 0px 20px 20px -7px rgba(0, 0, 0, 0.15);
    border-top: 5px solid var(--main-color);

}
#login_form button{
    padding: 10px 0px;
    text-align: center;
    display: block;
    background:linear-gradient(to right, var(--main-color), rgb(0, 121, 79)) ;
    color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 20px lightgray;
    transition: 0.3s;
    width: 100%;
    border: none;
    cursor: pointer;
    margin: 10px 0px;
    font-family: inherit;
    
}
#login_form button:hover{
    background-color:  rgb(16, 170, 67);
    transition: 0.3s;
}
.err{
    color: rgb(90, 0, 0);
    background-color: rgb(249, 224, 224);
    padding: 10px;
    margin: 10px 0px;
    border: 1px solid rgb(90, 0, 0);
    text-align: center;
    border-radius: 5px;
    display: none;
}


.success{
    color: rgb(1, 64, 1);
    background-color: rgb(223, 251, 223);
    border: rgb(0, 65, 0);
    text-align: center;
    padding: 10px;
    margin: 10px 0px;
    border-radius: 5px;
    display: none;
}


#container{
    width: 100%;
    background-color: rgb(244, 244, 244);
    padding-top: 60px;
    padding-bottom: 100px;
    margin-top: -100px;
}

.container{
    max-width: 1200px;
    margin: 10px auto;
    padding: 10px;
}

#subs_form{
    max-width: 800px;
    padding: 15px;
    border-radius: 8px;
    /* box-shadow: 0px 0px 15px lightgray; */
    margin: -40px auto 120px;
    background-color: white;
    border-top: 5px solid var(--main-color);
    box-shadow: 0px 20px 20px -7px rgba(0, 0, 0, 0.15);
}
.flex{
    display: flex;
    justify-content: space-between;
}

.md{
    width: 48% !important;
}

#subs_form button{
    padding: 10px 0px;
    text-align: center;
    display: block;
    background-color: var(--main-color);
    color: white;
    border-radius: 5px;
    box-shadow: 3px 3px 10px lightgray;
    transition: 0.3s;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-top: 15px;
}
#subs_form button:hover{
    background-color:  rgb(11, 177, 94);
    transition: 0.3s;
}

#subs_form small{
    margin-top: 20px;
    display: block;
    color: rgb(36, 36, 36);
    text-align: center;
}


#providers{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* justify-content: right; */
    /* flex-wrap: wrap; */
    gap: 15px;
    direction: rtl;
    margin: 50px 0px;
}
#providers_banner div h1{
    color: white;
    text-shadow: 2px 2px 2px black;
    margin: 0px;
}

#providers_banner p{
    color: rgb(233, 233, 233);
}
#providers_banner{
    /* margin-top: 50px; */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../imgs/provsearch.jpg");
    background-position: top;
    background-size: cover;
}

.providers-intro{
    max-width: 1200px !important;
    margin: 0px auto 30px;
    text-align: right;
    padding: 120px 10px 40px;
}

/*  search form in providers template */
#search_provider input{
    width: 100%;
    padding: 15px;
    border: 1px solid lightgray;
    border-radius: 3px;
    box-sizing: border-box;
    padding-right: 50px;
    text-align: right;
    font-size: 20px;
    font-size: inherit;
}
#search_provider{

    max-width: 1200px;
    margin: -50px auto 50px;
    padding: 0px 10px;
    position: relative;
}
#search_provider i{
    position: absolute;
    right: 15px;
    top: 10px;
    color: rgba(128, 128, 128, 0.552);
    font-size: 26px;
}

#search_provider .lt-spinner{
    position: absolute;
    top: 10px;
    left: 15px;
}

button{
    font-family: inherit;
}

.container-providers {
    max-width: 1400px;
    margin: 40px auto;
    padding: 10px;
}
.spinner-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 10px;
}
#filter-providers{
    padding-bottom: 10px;
    border-bottom: 1px solid lightgray;
    position: relative;
}
#filter-providers .flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#filter-providers .result{
    color: gray;
    text-align: right;
}

.msg{
    padding: 10px;
    margin: 10px 0px;
    background-color: lightblue;
    color: rgb(3, 3, 29);
    box-shadow: 0px 0px 5px lightgray;
    border-radius: 5px;
    display: none;
    text-align: center;
}








.spec-title{
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 26px;
}






#specs {
    overflow-x: auto; /* Le scroll est ici */
    direction: rtl;
    padding: 15px 0;
}

.scroll-container {
    display: block; /* Pas de grid ici ! */
    width: max-content; /* Force le conteneur à être aussi large que tes lignes */
}

.row {
    display: flex; /* On utilise flex pour que les badges se collent */
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 12px; /* Espace entre les deux lignes */
}

.spec {
    flex: 0 0 auto;
    width: auto; /* Chaque badge prend sa taille exacte */
    background: #bdbdbd;
    padding: 8px 16px;
    border-radius: 25px;
    white-space: nowrap;
}








.spec h3{
    display: inline-block;
    margin: 5px;
    font-weight: normal;
    font-size: 14px;
}

.spec.selec_spec, .spec:hover, .spec-selected{
    background-color: #212121;
    color: white;
    cursor: pointer;
}







/* Ce code ne sera lu QUE par Firefox */
@supports (-moz-appearance: none) {
    #specs  {
        scrollbar-width: thin; 
        scrollbar-color: #ccc #f1f1f1;
    }
}
/* 1. Définit la hauteur du scroll horizontal (minuscule) */
#specs::-webkit-scrollbar {
    height: 4px; /* Très fin */
}

/* 2. La piste (le fond du scroll) */
#specs::-webkit-scrollbar-track {
    background: #f1f1f1; /* Gris très clair */
    border-radius: 10px;
}

/* 3. La barre elle-même (le curseur) */
#specs::-webkit-scrollbar-thumb {
    background: #ccc; /* Gris discret */
    border-radius: 10px;
    transition: background 0.3s;
}

/* 4. Effet au survol ou au scroll */
#specs::-webkit-scrollbar-thumb:hover {
    background: #e67e22; /* Devient coloré quand on l'utilise (optionnel) */
}






.intro-video{
    width: 100%;
    margin: 20px 0px;
}

#wylearn{
    text-align: right;
}

#wylearn section{
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 0px;
    text-align: right;
    direction: rtl;
}


.note{
    padding: 15px 10px;
    background-color: rgb(223, 237, 241);
    border: 1px solid lightblue;
    line-height: 10px;
    margin: 20px 0px;
}
.note span{
    margin-right: 20px;
}




.items-cart{
    background-color: #000;
    color: white;
    padding: 5px 10px;
    border-radius: 50px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 14px;
}
:root {
    --primary-color: #2c3e50;
    --accent-color: #e67e22; /* Couleur orange pro pour le B2B */
    --text-muted: #7f8c8d;
    --bg-card: #ffffff;
}

#products{
    /* display: flex;
    justify-content: right; */
    gap: 20px;
    /* align-items: flex-start;
    flex-wrap: wrap; */
    margin: 50px 0px 100px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    direction:  rtl;
}

.provider-card{
    text-align: center;
    border-radius: 5px;
    /* overflow: hidden; */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    direction: rtl; /* Important pour l'Arabe */
    border: 1px solid #eee;
    background-color: white;
    max-width: 400px;
    /* min-width: 330px; */
}
.product-card {
    background: var(--bg-card);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    direction: rtl; /* Important pour l'Arabe */
    border: 1px solid #eee;
    max-width: 330px;
}

.product-card:hover, .provider-card:hover {
    /* transform: translateY(-5px); */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Container Image */
.img-container {
    height: 200px;
    background: #f9f9f9;
    z-index: 10;

}
.product-card .img-container{
    position: relative;

}
.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-provname, .provider-provname{
    background-color: #026e38;
    font-size: 14px;
    color: white;
    border-radius: 10px;
    padding: 3px 8px;
    text-align: right;
    margin: 5px 0px;
}
/* Badge "Nouveau" */
.badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Infos produit */
.product-info, .provider-inf {
    padding: 10px 20px;
}
.product-info{
    padding-top: 20px !important;
}
.product-info h3, .provider-inf h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    /* color: var(--primary-color); */
}

.product-info h3 a, .provider-inf h3  {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}
.provider-card{
    text-decoration: none;
}

.product-info h3 a:hover, .provider-inf h3 a:hover {
    color: var(--accent-color);
}

.product-card .description, .provider-card .description {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    height: 45px; /* Limite à 2 lignes environ */
    overflow: hidden;
}

/* Meta Data (Quantité et Prix) */
.product-meta, .provider-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-bottom: 15px;
}

.provider-logo{
    /* padding:5px 10px; */

    width: 70px;
    margin: 20px auto;
    height: 70px;
    border-radius: 50%;
    /* 1. On active Flexbox */
    display: flex;
    
    /* 2. On centre horizontalement */
    justify-content: center;
    
    /* 3. On centre verticalement */
    align-items: center;
    
    /* 4. On cache ce qui dépasse (sécurité) */
    overflow: hidden;
    
}
.provider-logo img{
    

    width: 100%;
    height: 100%;
    
    /* TRÈS IMPORTANT : Garde les proportions de l'image sans la déformer, 
       comme un "background-size: cover" */
    object-fit: cover !important;
}

.packet-info {
    font-size: 0.85rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-tag {
    font-weight: bold;
    color: #27ae60;
    font-size: 0.95rem;
}

/* Bouton */
.view-details {
    display: block;
    text-align: center;
    background: #f8f9fa;
    color: var(--primary-color);
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    border: 1px solid #ddd;
}

.view-details:hover {
    background: var(--primary-color);
    color: white;
}


.provider-banner{
    height: 300px;
    /* margin-top: 60px; */
    background-position: center;
    background-size: cover;
    max-width: 1400px;
    margin: 70px auto 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.552), rgba(0, 0, 0, 0.512)), url("../imgs/provsearch.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.provider-search input{
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    text-align: right;
    font-size: 20px;
    border: none;
    border-bottom: 1px solid lightgray;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-right: 40px;
}
.provider-search {
    position: relative;
}
.provider-search .search{
    position: absolute;
    right: 12px;
    top: 20px;
    color: gray;
}

.provider-search .lt-spinner{
    position: absolute;
    top: 15px;
    left: 20px;
}
.provider-info{
    max-width: 1400px;
    display: flex;
    justify-content: right;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 20px;
    gap: 20px;
    direction: rtl;
    margin: -30px auto 30px;
}
.provider-info > div{
    margin-top: 50px;
    /* background-color: lightblue; */
}
.provider-info h3{
    margin: 5px 5px 0px 0px;
}
.provider-info p{
    color: gray;
    margin: 0px;
    margin-top: 5px;
    max-width: 800px;
}
.provider-info small{
    padding: 5px 10px;
    color: #535353;
    border: 1px solid #535353;
    /* background-color: #535353; */
    border-radius: 50px;
    font-size: 12px;
    display: inline-block;
    margin-top: 10px;
}
.provider-info .prof-container{
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    margin-top: -10px;
    overflow: hidden;
    border: 6px solid white;
    display: inline-block;

}
.provider-info img{
    width: 100%;
    object-fit: cover;    
}
.provider-container{
    max-width: 1400px;
    margin: 20px auto;
    padding: 10px 5px;
}
.provider-cats{
    text-align: right;
    border-top: 1px solid lightgray;
    padding-top: 15px;
}



#pvs{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}
.pvs-container{
    display: flex;
    /* grid-template-columns: 1fr 1fr 1fr; */
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.pv-card{
    width:330px ;
    display: inline-block;
    /* margin: 15px 10px; */
    box-shadow: 0px 0px 20px lightgray;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background-color: white;
}
.pv-card img{
    width: 80px;
    height: 80px;
    border-radius: 50px;
    display: block;
    margin: 20px auto;
}









/* landing page */ /* landing page *//* landing page *//* landing page *//* landing page *//* landing page *//* landing page *//* landing page */

.detail-product{
    max-width: 1400px;
    margin: 30px auto;
    text-align: right;
    box-sizing: border-box;
    /* direction: rtl; */
    padding: 10px;
}
.detail-product .flex-img{
    margin-top: 20px;
    display: flex;
    justify-content: right;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.detail-product .det-imgs{
    display: flex;
    justify-content: right;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 720px;
    box-sizing: border-box;

}
.det-imgs .immc{
    width: 160px;
    height: auto;
    overflow: hidden;
    /* box-shadow: 2px 2px 5px lightgray; */

}
.detail-product .det-imgs img{
    width: 100%;
    object-fit: cover;
    background-color: white;
}
.detail-product .main-img {
    width: 500px;
    height: 500px;
    overflow: hidden;
    box-shadow: 0px 0px 10px lightgray;

}
.detail-product .main-img img{
    width: 100%;
    /* border: 2px solid rgb(96, 216, 110); */
    box-sizing: border-box;
    object-fit: cover;

}


.tags-product, .tags-provider{
    display: flex;
    justify-content: right;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-product, .tag-provider{
    padding: 5px 8px;
    border-radius: 5px;
    background-color: rgb(237, 237, 237);
    color: black;
    font-weight: bold;
    border: 1px solid rgb(149, 149, 149);
}

.tag-provider{
    padding: 3px 5px;
    font-size: 12px;
    font-weight: normal;
}
.desc-product p{
    color: rgb(84, 84, 84);
}
.gif-product{
    text-align: center;
    padding: 20px 10px;
    max-width: 500px;
    margin: auto;
}
.gif-product img{
    width: 100%;
}





.form-product{
    padding: 10px;
    background-color: white;
    box-shadow: 0px 0px 30px lightgray;
    margin: 50px auto;
    border-radius: 10px;
    border-top: 5px solid rgb(13, 195, 56);
}

.champ {
    width: 100%;
    position: relative;
    margin: 10px 0px;
}

.champ > i{
    position: absolute;
    top: 17px;
    right: 5px;
    color: gray;
}
.form-product .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    /* grid-template-columns: 1fr 1fr; */
}
.champ.md{
    width: 48% !important;
}

.champ input{
    display: block;
    padding: 10px;
    padding-right: 30px;
    border: 1px solid lightgray;
    width: 100%;
    box-sizing: border-box;
}

.form-product h2, .form-product .center{
    text-align: center;
     font-family: "Alexandria";
     margin: 20px 0px;
}

.form-product select{
    padding: 10px;
    border: 1px solid lightgray;
    width: 100%;
    box-sizing: border-box;
}

.form-product button{
    display: block;
    margin: 20px auto;
}

.form-product .success{
    /* display: block; */
    font-family: "Alexandria";
}
.form-product .success i{
    font-size: 36px;
}

.form-product button{
    border:1px solid var(--main-color);
    color: var(--main-color);
    padding: 10px 15px;
    border-radius: 4px;
    background-color: transparent;
    display: block;
    width: fit-content;
    margin: 20px auto !important;
    cursor: pointer;
    transition: 0.3s;
}
.form-product button:hover{
    background-color: var(--main-color);
    color: white;
    transition: 0.3s;
}

.carac-product{
    text-align: right;
}
.carac-product p{
    display: flex;
    justify-content: right;
    align-items: center;
    color: rgb(85, 85, 85);
    gap: 10px;
}
.carac-product i{
    color: rgb(59, 197, 59);

}
#imgotherhidden {
    display: none;
}

/* slick */

.custom-arrow {
    background: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    display: flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: 0.3s ease;
    pointer-events: auto; /* Important */
}

 .custom-arrow i {
    font-size: 15px;
    color: #333;
}

 .slick-prev {
    left: -10px;   /* Ajuste selon ton design */
}

 .slick-next {
    right: -10px;
}

 .custom-arrow:hover {
    background: #333;
}

 .custom-arrow:hover i {
    color: #fff;
}

/* end slick */





/* cart */ /* cart */ /* cart */ /* cart *//* cart */



#cart-body{
    background-color: rgb(250, 250, 250);
    padding: 100px 10px;
    margin-top: -80px;
}
#cart-container{
    max-width: 1400px;
    margin: 20px auto;
}
#cart{
    padding: 10px;
}
.cart-item{
    padding: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px lightgray;
    border-radius: 3px;
    margin-top: 10px;
    text-align: right;
}
.cart-item .notif{
    background-color: rgb(230, 249, 255);
    text-align: right;
    color: rgb(0, 35, 68);
    margin: 10px 0px;
    padding: 10px;
    box-shadow: 0px 0px 5px lightgray;
    /* border: 1px solid rgb(0, 35, 68); */
}
.cart-item .from span{
    padding: 5px 10px;
    color: white;
    background-color: rgb(28, 28, 28);
    border-radius: 40px;
    font-size: 12px;
    /* width: fit-content; */
}
.cart-item input{
    padding: 10px;
    width: 100px;
    border: 1px solid lightgray;
    display: inline-block;
}

.cart-item .flex{
    display: flex;
    justify-content: right;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}
.cart-item .flex img{
    width: 260px;
    border: 3px solid rgb(203, 203, 203);
    padding: 10px;
    border-radius: 5px;
}
.item-qt{
    margin-top: 20px;
}
.except{
    background-color: rgb(122, 231, 186);
    color: #000;
    padding: 10px;
    border-radius: 4px;
}
.except i{
    color: rgb(191, 73, 0);
}
.item-qt button{
    background-color: #000;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border: none;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
}
#cart-icone{
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 10px;
    border-radius: 50px;
    color: white;
    background-color: orange;
    font-size: 30px;
    z-index: 100;
}


#voile-cart{
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 70px;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}
#vertnav-cart{
    width: 280px;
    padding: 10px;
    background-color: white;
    position: fixed;
    right: -300px;
    top: 70px;
    height: 100%;
}

#vertnav-cart img{
    width: 100%;
    box-shadow: 0px 0px 10px lightgray;
}
#vertnav-cart select{
    padding: 10px;
    font-size: 14px;
    font-style: italic;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid lightgray;
    display: block;
    margin: 10px 5px;
    text-align: right;
}
.addToCartIcon{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: rgba(133, 133, 133, 0.816);
    color: #f8f8f8;
    padding: 5px;
    /* border-radius: 5px; */
    font-size: 20px;
    cursor: pointer;
}
.addToCartIcon:hover{
    background-color: rgba(83, 83, 83, 0.649);
    color: white;
}
#vertnav-cart button{
    padding: 10px;
    width: 100px;
    text-align: center;
    display: block;
    margin: 10px auto;
    background-color: rgb(0, 121, 79);
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 10px lightgray;
    cursor: pointer;
}
#vertnav-cart h4{
    text-align: center;
}
#vertnav-cart section{
    display: none;
}
.mnspinner-container{
    display: none;
}