/* ======================================================
   AIS PREMIUM – VERSION ULTRA PRODUCTION 2026
   Optimisé UX / SEO / Performance
====================================================== */


/* ======================================================
   VARIABLES
====================================================== */

:root{

    --ais-primary:#0D47A1;
    --ais-secondary:#00ACC1;
    --ais-accent:#4FC3F7;

    --ais-green:#3aada0;
    --ais-lime:#b9cb65;

    --ais-dark:#0f172a;
    --ais-text:#1e293b;

}


/* ======================================================
   GLOBAL
====================================================== */

body{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    color:var(--ais-text);
    line-height:1.7;
    background:#f8fafc;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
    font-weight:700;
    letter-spacing:-0.4px;
}

a{
    text-decoration:none;
    transition:.3s ease;
}


/* ======================================================
   NAVBAR ULTRA PREMIUM
====================================================== */

.navbar{

    padding:0.6rem 1rem;
    z-index:1000;

    background:linear-gradient(
        -45deg,
        #4FC3F7,
        #00ACC1,
        #0D47A1,
        #00ACC1
    );

    background-size:400% 400%;

    animation:gradientMove 16s ease infinite;

    transition:.4s;
}


@keyframes gradientMove{

    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}

}


/* logo */

.navbar-brand{

    display:flex;
    align-items:center;
    gap:.5rem;

}

.navbar-brand img{

    height:52px;
    transition:.35s;

}

.navbar-brand img:hover{

    transform:translateY(-3px);

}

.navbar-brand span{

    font-weight:600;
    color:white;
}


/* links */

.navbar-nav .nav-link{

    color:#fff;
    font-weight:500;
    padding:.5rem .8rem;

}


.navbar-nav .nav-link:hover{

    transform:scale(1.05);
    text-shadow:0 0 10px rgba(255,255,255,0.7);

}


/* ======================================================
   EXPERTISE BAR
====================================================== */

.expertise-bar{

    font-size:.85rem;
    background:#e3f2fd;
    padding:6px 0;

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}

.expertise-bar span{

    display:flex;
    align-items:center;
    gap:6px;

}

.expertise-bar i{

    color:var(--ais-secondary);

}


/* ======================================================
   HERO SECTION ULTRA PREMIUM
====================================================== */

.hero-section{

    height:100vh;
    position:relative;
    overflow: hidden;
    display:flex;
    align-items:center;
    color:white;

}


.hero-title {
    background: linear-gradient(90deg,#00ffe0,#3aada0,#b9cb65);
    background-clip: text;
    text-shadow: 0 0 20px rgba(0,255,224,0.3);
}

.hero-text{

    max-width:720px;
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 10px rgba(0,0,0,0.25);

}

.hero-section .btn {
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0,255,224,0.3);
    transition: 0.4s ease;
}

.hero-section .btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0,255,224,0.5);
}

.hero-btn-primary{

    background:white;
    color:var(--ais-primary);
    border-radius:50px;
    font-weight:600;

}

.hero-btn-primary:hover{

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,0,0,0.2);

}

.hero-btn-secondary{

    border-radius:50px;
    font-weight:600;

}

.hero-badge {
    background: linear-gradient(135deg,#00ffe0,#3aada0);
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(0,255,224,0.5);
    border-radius: 30px;
}



/* ======================================================
   FEATURE BOX
====================================================== */

section {
    position: relative;
    overflow: hidden;
    z-index:0;
}

.bg-white, .bg-light {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,255,224,0.02));
    backdrop-filter: blur(15px);
}

.feature-box, .service-card, .testimonial-box, .p-4.shadow {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    transition: transform 0.5s, box-shadow 0.5s;
}

.feature-box:hover, .service-card:hover, .testimonial-box:hover {
    transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 25px 50px rgba(0,255,224,0.3);
}


/* ======================================================
   DOMAIN BOX
====================================================== */

.domain-box{

    background:white;
    border-radius:18px;
    transition:.35s;

}

.domain-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}


/* ======================================================
   CARDS
====================================================== */

.service-card,
.product-card,
.project-card{

    background:white;
    border-radius:20px;

    position: relative;
    overflow: hidden;
    transition: transform 0.5s, box-shadow 0.5s;

    transition:.35s;

    box-shadow:0 12px 40px rgba(0,0,0,.08);

}

.service-card:hover,
.product-card:hover,
.project-card:hover{

    transform:translateY(-10px);
    box-shadow:0 30px 80px rgba(0,0,0,.18);

}

.product-card:hover img, .project-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.1);
}

.btn-primary, .btn-outline-dark {
    background: linear-gradient(135deg,#00ffea,#3aada0);
    color:#fff;
    border:none;
    box-shadow: 0 8px 20px rgba(0,255,234,0.3);
    transition: 0.4s;
}

.btn-primary:hover, .btn-outline-dark:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,255,234,0.5);
}


/* ======================================================
   PRODUCT IMAGE
====================================================== */

.product-card img{

    height:220px;
    width:100%;
    object-fit:cover;

}


/* ======================================================
   PROJECT IMAGE
====================================================== */

.project-card img{

    height:240px;
    width:100%;
    object-fit:cover;

}


/* ======================================================
   TESTIMONIAL
====================================================== */

.testimonial-box{

    background:white;
    border-radius:16px;

    transition:.35s;

}

.testimonial-box:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 50px rgba(0,0,0,.12);

}


/* ======================================================
   COUNTER
====================================================== */

.counter{

    font-weight:800;

}


/* ======================================================
   FOOTER
====================================================== */

.footer{

    background:linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    color:white;

}

.footer a{

    color:var(--ais-green);

}

.footer a:hover{

    color:var(--ais-lime);

}


/* ======================================================
   PARTICLES SAFE
====================================================== */

#projets-particles,
#catalogue-particles,
#product-particles,
#cart-particles{

    position:absolute;
    inset:0;
    pointer-events:none;

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){

.hero-title{

    font-size:2.4rem;

}

}

@media(max-width:768px){

.hero-section{

    height:auto;
    padding:120px 0;
    text-align:center;

}

.service-card:hover,
.product-card:hover,
.project-card:hover{

    transform:none;

}
}

.feature-box, .service-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(15px);
    transition: transform 0.5s, box-shadow 0.5s;
}

.feature-box:hover, .service-card:hover {
    transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 25px 50px rgba(58,173,160,0.3);
}

.feature-box h6, .service-card h5 {
    color: #00ffea;
    text-shadow: 0 0 5px rgba(0,255,234,0.6);
}

.counter {
    color: #00ffea;
    text-shadow: 0 0 15px rgba(0,255,234,0.6), 0 0 30px rgba(58,173,160,0.3);
    font-weight: 800;
}

.counter + p {
    color: #fff;
}

.accordion-button {
    background: rgba(255,255,255,0.05);
    color: #00ffea;
    backdrop-filter: blur(10px);
    transition: background 0.3s;
}
.accordion-button:hover {
    background: rgba(0,255,234,0.2);
}

.testimonial-box {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    transition: transform 0.3s, box-shadow 0.3s;
}
.testimonial-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,255,234,0.3);
}

/* =================================
FOOTER
================================= */

.footer{
  background: linear-gradient(135deg, #110d52, #2070d1);
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}

.footer p,
.footer .footer-links a,
.footer .footer-social a{
  color: #fff;
  transition: 0.3s;
}

.footer .footer-links a:hover,
.footer .footer-social a:hover{
  color: #b9cb65; /* couleur accentuée pour hover */
  text-decoration: none;
}

.footer .footer-links{
  margin-top: 1rem;
}

.footer .footer-links a:not(:last-child)::after{
  content: "|";
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  color: #fff;
}

.footer .footer-social{
  margin-top: 1.5rem;
}

.footer .footer-social a{
  display: inline-block;
  margin: 0 0.5rem;
  font-size: 1.5rem;
}

/* ===============================
SERVICE CARDS FUTURISTES
=============================== */

.service-card{
position:relative;
transition:all .4s ease;
overflow:hidden;
border:1px solid rgba(0,0,0,0.05);
}

.service-card::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(
120deg,
transparent,
rgba(32,112,209,0.15),
transparent
);
transform:rotate(25deg);
transition:all .6s;
opacity:0;
}

.service-card:hover::before{
opacity:1;
animation:shine 2s linear infinite;
}

@keyframes shine{
0%{transform:translateX(-100%) rotate(25deg);}
100%{transform:translateX(100%) rotate(25deg);}
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* ===============================
ICONS SERVICES
=============================== */

.service-card i{
transition:all .4s ease;
}

.service-card:hover i{
transform:scale(1.2) rotate(5deg);
color:#2070d1;
}

/* ===============================
BOUTON PREMIUM
=============================== */

.btn-primary{
background:linear-gradient(135deg,#110d52,#2070d1);
border:none;
}

.btn-primary:hover{
background:linear-gradient(270deg,#110d52,#2070d1,#110d52);
background-size:400% 400%;
animation:gradientMove 6s ease infinite;
box-shadow:0 10px 30px rgba(32,112,209,0.5);
}

@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* ===============================
SECTION DARK
=============================== */

.section-dark{
background:linear-gradient(135deg,#110d52,#2070d1);
position:relative;
overflow:hidden;
}

/* ===============================
PARTICULES CANVAS
=============================== */

#services-particles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
}

/* SECTION SERVICES BACKGROUND */

.services-section{
background: linear-gradient(135deg,#110d52,#2070d1);
overflow:hidden;
}

#services-particles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.services-section .container{
position:relative;
z-index:2;
}

/* animation carte */

.service-card{
transition:all .35s ease;
}

.service-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* PROCESS SECTION */

.process-section{
background:linear-gradient(135deg,#110d52,#2070d1);
position:relative;
overflow:hidden;
}

.process-section .container{
position:relative;
z-index:2;
}

/* numbers */

.process-number{
font-size:60px;
background:linear-gradient(45deg,#ffffff,#cfe8ff);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:10px;
}

/* step card */

.process-step{
transition:all .35s ease;
border-radius:12px;
}

.process-step:hover{
transform:translateY(-10px);
background:rgba(255,255,255,0.08);
backdrop-filter:blur(6px);
}

/* particles */

#process-particles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

/* problems section */

.services-problems{
background:linear-gradient(135deg,#110d52,#2070d1);
position:relative;
overflow:hidden;
}

.services-problems .container{
position:relative;
z-index:2;
}

/* glass cards */

.service-card{
background:rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
border-radius:14px;
transition:all .35s ease;
}

.service-card:hover{
transform:translateY(-10px);
background:rgba(255,255,255,0.15);
}

/* methodology boxes */

.feature-box{
background:rgba(255,255,255,0.08);
padding:20px;
border-radius:12px;
color:white;
transition:.3s;
}

.feature-box h6{
font-size:26px;
font-weight:700;
margin-bottom:10px;
}

.feature-box:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.15);
}

/* =====================================
CATALOGUE GRID STABLE
===================================== */

.catalogue-grid{
    align-items: stretch;
}

/* carte produit */

.catalogue-card{

    background:white;
    border-radius:18px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    height:100%;

    transition:0.35s;
    box-shadow:0 12px 35px rgba(0,0,0,0.08);

}

.catalogue-card:hover{

    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,0.15);

}


/* image */

.catalogue-img-wrapper{

    position:relative;
    height:220px;
    overflow:hidden;

}

.catalogue-img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:0.4s;

}

.catalogue-card:hover .catalogue-img{

    transform:scale(1.05);

}


/* badge catégorie */

.badge-category{

    position:absolute;
    top:10px;
    left:10px;

    background:#2070d1;
    color:white;

    font-size:12px;
    padding:4px 10px;

    border-radius:20px;

}


/* contenu */

.catalogue-content{

    padding:20px;

    display:flex;
    flex-direction:column;
    flex-grow:1;

}


/* titre */

.catalogue-title-product{

    font-weight:700;
    color:#110d52;
    margin-bottom:10px;

}


/* prix */

.catalogue-price{

    font-size:20px;
    font-weight:700;

    color:#2070d1;

    margin-bottom:10px;

}

.catalogue-price span{

    font-size:14px;
    font-weight:500;

}


/* description */

.catalogue-description{

    color:#555;
    font-size:14px;

    margin-bottom:15px;

}


/* bouton catalogue */

.btn-catalogue{

    background:linear-gradient(135deg,#110d52,#2070d1);
    color:white;

    border:none;

    border-radius:30px;

    transition:0.3s;

}

.btn-catalogue:hover{

    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(32,112,209,0.4);

}

/* =================================
PROJECT GRID FIX
================================= */

.project-card{

    display:flex;
    flex-direction:column;

    height:100%;

}

/* image */

.project-img-wrapper{

    height:240px;
    overflow:hidden;
    position:relative;

}

.project-img-wrapper img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.4s;

}

.project-card:hover img{

    transform:scale(1.08);

}

/* contenu */

.project-content{

    padding:20px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    flex-grow:1;

}

/* bouton */

.btn-projet{

    margin-top:auto;

    background:linear-gradient(135deg,#110d52,#2070d1);
    color:white;

    border-radius:30px;

}

.btn-projet:hover{

    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(32,112,209,0.35);

}

/* ================================
PROJET DETAIL
================================ */

.projet-detail-section{

background:#ffffff;
overflow:hidden;

}

/* HERO */

.projet-hero{

height:420px;
display:flex;
align-items:center;
justify-content:center;

}

.projet-hero-img{

position:absolute;
inset:0;

}

.projet-hero-img img{

width:100%;
height:100%;
object-fit:cover;

}

.hero-overlay{

position:absolute;
inset:0;

background:linear-gradient(
135deg,
rgba(17,13,82,0.8),
rgba(32,112,209,0.8)
);

}

/* titre */

.projet-title{

font-size:3rem;
font-weight:700;
color:white;

}

/* wrapper */

.projet-content-wrapper{

background:white;

border-radius:20px;

padding:40px;

box-shadow:0 20px 60px rgba(0,0,0,0.08);

}

/* blocs */

.projet-block{

margin-bottom:35px;

}

.projet-block h3{

font-weight:700;

background:linear-gradient(135deg,#110d52,#2070d1);

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:10px;

}

.projet-block p{

color:#555;
line-height:1.7;

}

/* bouton retour */

.btn-retour{

background:linear-gradient(135deg,#110d52,#2070d1);

color:white;

border-radius:30px;

padding:12px 35px;

transition:0.3s;

}

.btn-retour:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(32,112,209,0.4);

}

/* ========================================
CATALOGUE SECTION
======================================== */

.catalogue-section{
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(circle at 20% 20%, rgba(32,112,209,0.15), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(17,13,82,0.2), transparent 60%),
    #f8fbff;
}

/* TITRE */

.catalogue-title{
    font-size:2.7rem;
    font-weight:800;
    background:linear-gradient(90deg,#110d52,#2070d1);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.catalogue-grid{
    align-items:stretch;
}

.catalogue-item{
    display:flex;
}

.catalogue-card{
    border-radius:18px;
    overflow:hidden;

    background:rgba(255,255,255,0.6);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(32,112,209,0.15);

    transition:all .4s ease;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.05);
}

/* HOVER */

.catalogue-card:hover{

    transform:translateY(-8px) scale(1.02);

    box-shadow:
    0 20px 50px rgba(32,112,209,0.2);
}

.catalogue-img-wrapper{
    position:relative;
    overflow:hidden;
    height:220px;
}

.catalogue-img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.catalogue-card:hover .catalogue-img{
    transform:scale(1.1);
}

.badge-category{

    position:absolute;
    top:15px;
    left:15px;

    background:linear-gradient(135deg,#110d52,#2070d1);

    color:white;
    padding:5px 12px;
    border-radius:20px;
    font-size:0.8rem;
    font-weight:600;

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.catalogue-content{
    padding:20px;
}

/* TITRE */

.catalogue-title-product{
    font-weight:700;
    color:#110d52;
}

/* PRIX */

.catalogue-price{

    font-size:1.4rem;
    font-weight:700;

    color:#2070d1;

    margin:10px 0;
}

.catalogue-price span{
    font-size:0.8rem;
    color:#777;
}

.btn-catalogue{

    border-radius:30px;

    background:linear-gradient(135deg,#110d52,#2070d1);

    border:none;

    color:white;

    font-weight:600;

    padding:10px;

    transition:all .3s ease;
}

.btn-catalogue:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 20px rgba(32,112,209,0.3);
}

.add-to-cart-btn{

    border-radius:30px;

    font-weight:600;

    transition:all .3s ease;
}

.add-to-cart-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 20px rgba(0,0,0,0.2);
}

/* ====================================
PRODUCT SECTION
==================================== */

.product-section{
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at 20% 30%, rgba(32,112,209,0.15), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(17,13,82,0.2), transparent 60%),
    #f8fbff;
}

.product-image-wrapper{

    background:white;

    border-radius:20px;

    padding:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);

    text-align:center;

    transition:all .4s ease;
}

.product-image-wrapper:hover{
    transform:translateY(-5px);
}

.product-image{

    width:100%;
    max-height:420px;

    object-fit:contain;

    transition:transform .5s ease;
}

.product-image-wrapper:hover .product-image{
    transform:scale(1.05);
}

.product-placeholder{
    height:350px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee;
    border-radius:10px;
}

.product-title{

    font-size:2.5rem;

    font-weight:800;

    background:linear-gradient(90deg,#110d52,#2070d1);

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.product-price{

    font-size:2rem;

    font-weight:700;

    color:#2070d1;
}

.product-price span{

    font-size:1rem;

    color:#777;
}

.product-card{

    background:white;

    border-radius:16px;

    padding:20px;

    border:1px solid rgba(0,0,0,0.05);

    box-shadow:
    0 8px 20px rgba(0,0,0,0.05);
}

.product-card h4{

    font-weight:700;

    color:#110d52;

    margin-bottom:10px;
}

.product-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn-add{

    background:linear-gradient(135deg,#110d52,#2070d1);

    border:none;

    color:white;

    font-weight:600;

    padding:12px 25px;

    border-radius:30px;

    transition:all .3s ease;
}

.btn-add:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(32,112,209,0.3);
}

.btn-cart{

    border-radius:30px;

    border:1px solid #2070d1;

    color:#2070d1;

    padding:12px 25px;

    font-weight:600;

    transition:all .3s ease;
}

.btn-cart:hover{

    background:#2070d1;

    color:white;
}

.cart-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #110d52, #2070d1);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: fadeinout 2s forwards;
}

@keyframes fadeinout {
    0% {opacity:0; transform: translateY(-10px);}
    10% {opacity:1; transform: translateY(0);}
    90% {opacity:1; transform: translateY(0);}
    100% {opacity:0; transform: translateY(-10px);}
}

/* FOOTER */

.footer{
background:#0c0f2c;
color:white;
}

.footer-title{
font-weight:700;
margin-bottom:15px;
}

.footer-text{
color:#cbd5ff;
font-size:14px;
}

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

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

.footer-links a{
color:#cbd5ff;
text-decoration:none;
transition:0.3s;
}

.footer-links a:hover{
color:#00c3ff;
}

.footer-social{
display:flex;
gap:15px;
}

.social-icon{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#1a1f4f;
border-radius:50%;
color:white;
font-size:18px;
transition:0.3s;
}

.social-icon:hover{
background:#00c3ff;
transform:translateY(-3px);
}


/* LOGO CLIGNOTANT */

.footer-logo-img{
width:90px;
animation:logoBlink 3s infinite;
}

@keyframes logoBlink{

0%{opacity:1;}

50%{opacity:0.4;}

100%{opacity:1;}

}


/* SCROLL TOP */

#scrollTopBtn{

position:fixed;
bottom:30px;
right:30px;

width:45px;
height:45px;

background:#00c3ff;
color:white;

border:none;
border-radius:50%;

display:none;
align-items:center;
justify-content:center;

font-size:20px;

cursor:pointer;
z-index:9999;

transition:0.3s;

}

#scrollTopBtn:hover{
transform:translateY(-4px);
background:#009ed1;
}

.cart-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #16116d, #2070d1);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: fadeinout 2s forwards;
}
@keyframes fadeinout {
    0% {opacity:0; transform: translateY(-10px);}
    10% {opacity:1; transform: translateY(0);}
    90% {opacity:1; transform: translateY(0);}
    100% {opacity:0; transform: translateY(-10px);}
}

/* LEGAL PAGE */

.legal-card{

background:white;
padding:30px;

border-radius:12px;

margin-bottom:30px;

box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

.legal-card h2{

color:#110d52;

margin-bottom:15px;

font-size:22px;

}

.legal-card p{

color:#2070d1;

line-height:1.7;

}

.legal-card ul{

color:#2070d1;

padding-left:20px;

}

.section-dark {
    background: #1f73c2;
}

.service-card {
    background: rgba(0, 32, 64, 0.75);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    color: #fff;
    transition: all 0.3s ease;
}

/* 🔥 CORRECTION DU BUG HOVER */
.service-card:hover {
    background: rgba(0, 32, 64, 0.9) !important; /* force le dark */
    color: #fff !important;
}

/* 🔥 SÉCURITÉ TEXTE */
.service-card:hover h3,
.service-card:hover p {
    color: #fff !important;
}

/* =================================
TESTIMONIAL PREMIUM MATCH AIS
================================= */

.testimonial-card{
    position:relative;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(15px);
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.15);
    transition: all 0.4s ease;
    overflow:hidden;
}

/* effet glow */
.testimonial-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent, rgba(0,255,234,0.15), transparent);
    opacity:0;
    transition:0.5s;
}

.testimonial-card:hover::before{
    opacity:1;
    animation: shine 2s linear infinite;
}

.testimonial-card:hover{
    transform: translateY(-12px) scale(1.02);
    box-shadow:0 25px 60px rgba(0,0,0,0.4);
}

/* avatar */
.testimonial-avatar{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    padding:4px;
    background:linear-gradient(135deg,#00ffe0,#3aada0,#b9cb65);
}

.testimonial-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

/* étoiles */
.stars{
    color:#ffd700;
    font-size:18px;
    letter-spacing:2px;
    text-shadow:0 0 10px rgba(255,215,0,0.6);
}

/* canvas */
#temoignage-particles{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
}