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

:root{

    --primary:#0057D9;
    --primary-dark:#001F54;

    --secondary:#00C2A8;
    --accent:#7C3AED;

    --gold:#FFD166;

    --dark:#071A2F;
    --text:#64748B;
    --white:#FFFFFF;

    --radius:32px;

    --shadow-sm:0 15px 35px rgba(15,23,42,.05);

    --shadow:0 25px 60px rgba(15,23,42,.08);

    --shadow-lg:0 40px 100px rgba(15,23,42,.14);

    --transition:all .45s ease;
}

/* ==================================================
   HERO REALISATIONS
================================================== */

.realisations-hero{

    position:relative;
    overflow:hidden;

    padding:170px 0 130px;

    background:linear-gradient(
        135deg,
        #04162D 0%,
        #0E2C66 45%,
        #4C1D95 100%
    );
}

.realisations-hero::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-250px;
    right:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,194,168,.25) 0%,
        transparent 70%
    );

    filter:blur(80px);
    z-index:1;
}

.realisations-hero::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    bottom:-200px;
    left:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(124,58,237,.25) 0%,
        transparent 70%
    );

    filter:blur(100px);
    z-index:1;
}

.hero-content{

    position:relative;
    z-index:2;
}

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 28px;

    border-radius:60px;

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

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    color:var(--gold);

    font-weight:700;

    margin-bottom:35px;
}

.hero-content h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5.5rem);

    font-weight:900;

    line-height:1.08;

    margin-bottom:30px;
}

.hero-content p{

    max-width:900px;

    margin:auto;

    color:rgba(255,255,255,.88);

    font-size:1.2rem;

    line-height:2;
}

/* ==================================================
   PORTFOLIO PREMIUM
================================================== */

.portfolio-section{

    padding:100px 0;

    background:#f8fafc;
}

.portfolio-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    height:100%;

    transition:.5s ease;

    position:relative;

    box-shadow:
    0 10px 40px rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;
}

.portfolio-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,59,142,.15);
}

/* IMAGE */

.portfolio-image{

    position:relative;

    height:280px;

    overflow:hidden;
}

.portfolio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s ease;
}

.portfolio-card:hover img{

    transform:scale(1.08);
}

/* OVERLAY */

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.15)
    );

    opacity:0;

    transition:.4s;

    display:flex;

    justify-content:center;

    align-items:center;
}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;
}

.portfolio-btn{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:var(--primary);

    font-size:1.6rem;

    text-decoration:none;

    transition:.3s;
}

.portfolio-btn:hover{

    transform:scale(1.1);

    color:var(--secondary);
}

/* CONTENT */

.portfolio-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex-grow:1;
}

/* CATEGORY */

.portfolio-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(0,191,166,.12);

    color:var(--secondary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:18px;
}

/* TITLE */

.portfolio-content h3{

    font-size:1.45rem;

    font-weight:800;

    color:var(--dark);

    line-height:1.4;

    margin-bottom:15px;

    min-height:70px;
}

/* DESCRIPTION */

.portfolio-content p{

    color:#6c757d;

    line-height:1.9;

    flex-grow:1;

    margin-bottom:25px;
}

/* FOOTER */

.portfolio-footer{

    border-top:1px solid #eef2f7;

    padding-top:20px;
}

.read-more{

    text-decoration:none;

    color:var(--primary);

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.3s;
}

.read-more i{

    transition:.3s;
}

.read-more:hover{

    color:var(--secondary);
}

.read-more:hover i{

    transform:translateX(6px);
}

/* EMPTY STATE */

.empty-state{

    background:#fff;

    border-radius:30px;

    text-align:center;

    padding:80px 40px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.05);
}

.empty-state i{

    font-size:5rem;

    color:var(--secondary);

    margin-bottom:20px;
}

.empty-state h4{

    font-size:2rem;

    font-weight:800;

    margin-bottom:15px;

    color:var(--dark);
}

.empty-state p{

    color:#6c757d;

    margin:0;
}

/* RESPONSIVE */

@media(max-width:991px){

    .portfolio-image{

        height:240px;
    }

    .portfolio-content{

        padding:25px;
    }
}

@media(max-width:768px){

    .portfolio-section{

        padding:70px 0;
    }

    .portfolio-image{

        height:220px;
    }

    .portfolio-content h3{

        min-height:auto;
    }
}

/* ==================================================
   SOLUTIONS STRATÉGIQUES
================================================== */

.featured-projects{
    position: relative;

    padding: 140px 0;

    background: linear-gradient(
        180deg,
        #F8FAFC,
        #EEF6FF
    );
}

.project-box{
    position: relative;
    overflow: hidden;

    height: 100%;

    padding: 50px 40px;

    border-radius: 35px;

    background: #fff;

    transition: all .45s ease;

    box-shadow:
        0 20px 50px rgba(15,23,42,.08);
}

.project-box::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform: translateX(-100%);

    transition: .6s ease;
}

.project-box:hover::before{
    transform: translateX(100%);
}

.project-box:hover{
    transform: translateY(-12px);

    box-shadow:
        0 30px 80px rgba(15,23,42,.15);
}

.project-icon{
    width: 90px;
    height: 90px;

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

    border-radius: 28px;

    color: #fff;

    font-size: 2.3rem;

    margin-bottom: 30px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);
}

.project-box h3{
    color: #0F172A;

    font-size: 1.6rem;

    font-weight: 800;

    margin-bottom: 18px;
}

.project-box p{
    color: #64748B;

    line-height: 1.9;

    margin-bottom: 0;
}

/* ==================================================
   MEDTRACK
================================================== */

.medtrack{
    border-top: 6px solid #0A84FF;
}

.medtrack .project-icon{
    background: linear-gradient(
        135deg,
        #0A84FF,
        #00D4FF
    );
}

/* ==================================================
   SANTÉ EXPRESS
================================================== */

.santeexpress{
    border-top: 6px solid #00C9A7;
}

.santeexpress .project-icon{
    background: linear-gradient(
        135deg,
        #00C9A7,
        #00E5C7
    );
}

/* ==================================================
   GESTION DIGITALE DES DÉCHETS MÉDICAUX
================================================== */

.dechets{
    border-top: 6px solid #22C55E;
}

.dechets .project-icon{
    background: linear-gradient(
        135deg,
        #22C55E,
        #16A34A
    );
}

/* ==================================================
   LOGICIEL MÉDICAL SUR MESURE
================================================== */

.software{
    border-top: 6px solid #7C4DFF;
}

.software .project-icon{
    background: linear-gradient(
        135deg,
        #7C4DFF,
        #5B21B6
    );
}

/* ==========================================
   KPI CARD
========================================== */

.stat-box{
    position: relative;

    height: 100%;

    padding: 40px 25px;

    border-radius: 28px;

    overflow: hidden;

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

    border: 1px solid rgba(255,255,255,.12);

    transition: all .4s ease;
}

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

/* ==========================================
   KPI COLORS
========================================== */

.stat-blue{
    background: linear-gradient(
        135deg,
        rgba(10,132,255,.25),
        rgba(0,212,255,.15)
    );
}

.stat-green{
    background: linear-gradient(
        135deg,
        rgba(0,194,168,.25),
        rgba(0,229,199,.15)
    );
}

.stat-purple{
    background: linear-gradient(
        135deg,
        rgba(124,58,237,.25),
        rgba(167,139,250,.15)
    );
}

.stat-blue:hover{
    box-shadow:
        0 25px 50px rgba(10,132,255,.25);
}

.stat-green:hover{
    box-shadow:
        0 25px 50px rgba(0,194,168,.25);
}

.stat-purple:hover{
    box-shadow:
        0 25px 50px rgba(124,58,237,.25);
}

/* ==================================================
   CTA FINAL
================================================== */

.cta-section{

    padding:150px 0;

    background:linear-gradient(
        135deg,
        #001F54,
        #003B8E,
        #00C2A8
    );
}

.cta-box{

    text-align:center;

    padding:90px 60px;

    border-radius:40px;

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

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;
}

.cta-box h2{

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:900;

    margin-bottom:25px;
}

.cta-box p{

    max-width:850px;

    margin:auto auto 40px;

    line-height:2;

    opacity:.95;
}

.btn-primary-custom{

    display:inline-block;

    padding:18px 42px;

    border-radius:60px;

    background:#fff;

    color:#003B8E;

    text-decoration:none;

    font-weight:800;

    transition:var(--transition);
}

.btn-primary-custom:hover{

    transform:translateY(-5px);

    color:#003B8E;
}

.btn-outline-custom{

    display:inline-block;

    padding:18px 42px;

    border-radius:60px;

    border:2px solid #fff;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    margin-left:15px;

    transition:var(--transition);
}

.btn-outline-custom:hover{

    background:#fff;

    color:#003B8E;
}