/*==================================================
  IFE - Premium StyleSheet
  Version : 2.0
==================================================*/

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

:root{

    --primary:#0A4DA3;
    --primary-dark:#083a7d;

    --secondary:#118847;
    --secondary-dark:#0c6836;

    --white:#ffffff;

    --light:#f5f8fc;

    --gray:#6c757d;

    --dark:#0f172a;

    --text:#334155;

    --border:#e2e8f0;

    --shadow:
    0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:
    0 25px 60px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.35s ease;

}

/*=========================
        RESET
=========================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:#fff;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

}

section{

padding:110px 0;

position:relative;

}

.container{

width:min(1200px,92%);

margin:auto;

}

/*=========================
        TYPOGRAPHIE
=========================*/

h1,
h2,
h3,
h4{

font-weight:800;

color:var(--dark);

line-height:1.15;

}

h1{

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

}

h2{

font-size:clamp(2rem,4vw,3rem);

margin-bottom:20px;

}

h3{

font-size:1.35rem;

}

p{

font-size:1.05rem;

color:var(--text);

}

.section-header{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.section-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:50px;

background:rgba(10,77,163,.08);

color:var(--primary);

font-weight:700;

margin-bottom:20px;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:20px 0;

transition:.4s;

}

header.scrolled{

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

backdrop-filter:blur(18px);

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

padding:14px 0;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:72px;

transition:.3s;

}

header.scrolled .logo img{

height:60px;

}

.nav-menu{

display:flex;

gap:35px;

align-items:center;

}

.nav-menu a{

font-weight:600;

color:#fff;

position:relative;

}

header.scrolled .nav-menu a{

color:var(--dark);

}

.nav-menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:3px;

background:var(--secondary);

border-radius:20px;

transition:.3s;

}

.nav-menu a:hover::after{

width:100%;

}

/*=========================
      BOUTONS
=========================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

border-radius:50px;

background:var(--primary);

color:#fff;

font-weight:700;

box-shadow:var(--shadow);

transition:.35s;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

border:2px solid var(--primary);

color:var(--primary);

font-weight:700;

transition:.35s;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

.btn-whatsapp{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

border-radius:50px;

background:var(--secondary);

color:#fff;

font-weight:700;

transition:.35s;

}

.btn-whatsapp:hover{

background:var(--secondary-dark);

transform:translateY(-4px);

}
/*==================================================
                    HERO
==================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(rgba(7,18,45,.82),
    rgba(7,18,45,.88)),
    url("../images/datacenter.jpg") center center/cover no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 80% 25%,
    rgba(17,136,71,.25),
    transparent 30%),

    radial-gradient(circle at 20% 70%,
    rgba(10,77,163,.35),
    transparent 40%);

    pointer-events:none;

}

.hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-180px;

    top:-150px;

    background:rgba(10,77,163,.18);

    filter:blur(120px);

    border-radius:50%;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-120px;

    bottom:-150px;

    background:rgba(17,136,71,.18);

    filter:blur(120px);

    border-radius:50%;

}

.hero .container{

    position:relative;

    z-index:10;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.hero-left{

    color:#fff;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:60px;

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

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-weight:600;

    margin-bottom:28px;

}

.hero h1{

    color:#fff;

    margin-bottom:28px;

    font-size:clamp(3.5rem,7vw,5.8rem);

    line-height:1.05;

}

.hero h1 span{

    color:var(--secondary);

}

.hero p{

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

    max-width:620px;

    font-size:1.15rem;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

/*=========================
      HERO LOGO
=========================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-circle{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(10,77,163,.35),

    rgba(17,136,71,.10),

    transparent 70%);

    animation:pulseGlow 8s infinite;

}

.hero-logo{

    position:relative;

    width:560px;

    max-width:100%;

    z-index:5;

    animation:floatLogo 7s ease-in-out infinite;

    filter:

    drop-shadow(0 35px 55px rgba(0,0,0,.35));

}

/*=========================
    HERO STATS
=========================*/

.hero-stats{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.stat-card{

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

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

    backdrop-filter:blur(14px);

    border-radius:22px;

    padding:28px;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-12px);

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

}

.stat-card.featured{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

.stat-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:#fff;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    margin-bottom:18px;

}

.stat-number{

    font-size:2.3rem;

    font-weight:800;

    color:#fff;

    margin-bottom:10px;

}

.stat-card h3{

    color:#fff;

    margin-bottom:8px;

    font-size:1.15rem;

}

.stat-card p{

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

    font-size:.95rem;

}

/*=========================
    TRANSITION HERO
=========================*/

.hero-wave{

    position:absolute;

    bottom:-1px;

    left:0;

    width:100%;

    line-height:0;

}

.hero-wave svg{

    display:block;

    width:100%;

    height:120px;

    fill:#ffffff;

}
/*==================================================
                SERVICES
==================================================*/

.services{

    background:#f8fbff;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.service-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    transition:.4s ease;

    position:relative;

    overflow:hidden;

    border:1px solid #edf2f7;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.service-card:hover{

    transform:translateY(-15px);

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

}

.service-card.featured{

    transform:scale(1.03);

    border:2px solid var(--primary);

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:25px;

}

.service-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.service-top span{

    color:var(--primary);

    font-weight:700;

}

.service-card h3{

    margin-bottom:18px;

}

.service-card p{

    margin-bottom:25px;

}

.service-card ul{

    margin-bottom:30px;

}

.service-card ul li{

    margin-bottom:12px;

    padding-left:28px;

    position:relative;

}

.service-card ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:var(--secondary);

    font-weight:bold;

}

.service-card a{

    color:var(--primary);

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.service-card:hover a{

    color:var(--secondary);

}

/*==================================================
                CONTRATS
==================================================*/

.contracts{

    background:#fff;

}

.contracts-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.contract-card{

    background:#fff;

    border-radius:25px;

    padding:45px;

    border:1px solid #e8edf5;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    transition:.35s;

    position:relative;

}

.contract-card:hover{

    transform:translateY(-15px);

}

.contract-card.featured{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.contract-card.featured h3,

.contract-card.featured li,

.contract-card.featured span{

    color:#fff;

}

.popular{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    background:#fff;

    color:var(--primary);

    padding:8px 18px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:700;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.contract-head{

    margin-bottom:30px;

    text-align:center;

}

.contract-head h3{

    font-size:2rem;

    margin-bottom:10px;

}

.contract-card ul{

    margin-bottom:35px;

}

.contract-card li{

    margin-bottom:15px;

}

.contract-card li i{

    color:var(--secondary);

    margin-right:10px;

}

.contract-card.featured li i{

    color:#fff;

}

/*==================================================
            POURQUOI IFE
==================================================*/

.why{

    background:#f7fafc;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.why-card{

    background:#fff;

    padding:40px 30px;

    border-radius:22px;

    text-align:center;

    transition:.35s;

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

}

.why-card:hover{

    transform:translateY(-12px);

}

.why-card i{

    width:90px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:34px;

}

.why-card h3{

    margin-bottom:15px;

}

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

.cta{

    padding:120px 0;

}

.cta-box{

    background:linear-gradient(
        135deg,
        var(--primary),
        #1267d8,
        var(--secondary)
    );

    border-radius:35px;

    padding:80px;

    text-align:center;

    color:#fff;

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

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

    border-radius:50%;

    top:-120px;

    right:-120px;

}

.cta-box h2{

    color:#fff;

    margin-bottom:20px;

}

.cta-box p{

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

    max-width:700px;

    margin:0 auto 40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}
/*==================================================
                    CONTACT
==================================================*/

.contact{

    background:#ffffff;

}

.contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:start;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:30px;

    background:#fff;

    border-radius:20px;

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

    transition:.35s;

}

.info-card:hover{

    transform:translateY(-8px);

}

.info-card i{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:24px;

}

.info-card h3{

    margin-bottom:8px;

}

.info-card a{

    color:var(--primary);

    font-weight:700;

}

.contact-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:20px;

}

/*==================================================
                FORMULAIRE
==================================================*/

.contact-form{

    background:#fff;

    padding:45px;

    border-radius:25px;

    box-shadow:0 20px 50px rgba(0,0,0,.06);

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    margin-bottom:20px;

    padding:18px 20px;

    border:1px solid #dbe4ef;

    border-radius:15px;

    font-size:15px;

    outline:none;

    transition:.3s;

    font-family:inherit;

}

.contact-form textarea{

    resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(10,77,163,.08);

}

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

footer{

    background:#081b38;

    color:#fff;

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:45px;

}

.footer-logo{

    width:170px;

    margin-bottom:25px;

}

.footer-about p{

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

}

footer h4{

    color:#fff;

    margin-bottom:25px;

}

footer ul li{

    margin-bottom:14px;

}

footer a{

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

}

footer a:hover{

    color:#fff;

}

.footer-social{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#fff;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--secondary);

    transform:translateY(-6px);

}

.footer-bottom{

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

    margin-top:60px;

    padding-top:25px;

    text-align:center;

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

}

/*==================================================
            WHATSAPP FLOTTANT
==================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

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

    z-index:999;

    transition:.35s;

}

.whatsapp-float:hover{

    transform:scale(1.1);

}

/*==================================================
                BACK TO TOP
==================================================*/

#backToTop{

    position:fixed;

    bottom:105px;

    right:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    display:none;

    z-index:998;

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

}

#backToTop.show{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
                    LOADER
==================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.spinner{

    width:70px;

    height:70px;

    border-radius:50%;

    border:6px solid #dbe7f5;

    border-top:6px solid var(--primary);

    animation:spin 1s linear infinite;

}

/*==================================================
                UTILITAIRES
==================================================*/

.text-center{

    text-align:center;

}

.mt-30{

    margin-top:30px;

}

.mb-30{

    margin-bottom:30px;

}

.shadow{

    box-shadow:var(--shadow);

}

.radius{

    border-radius:var(--radius);

}

.bg-primary{

    background:var(--primary);

    color:#fff;

}

.bg-secondary{

    background:var(--secondary);

    color:#fff;

}
/*==================================================
                ANIMATIONS
==================================================*/

@keyframes floatLogo{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes pulseGlow{

    0%{

        transform:scale(1);

        opacity:.55;

    }

    50%{

        transform:scale(1.12);

        opacity:.9;

    }

    100%{

        transform:scale(1);

        opacity:.55;

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
        APPARITION AU CHARGEMENT
==================================================*/

.hero-left{

    animation:fadeLeft .9s ease;

}

.hero-right{

    animation:fadeRight 1.2s ease;

}

.hero-stats{

    animation:fadeUp 1.3s ease;

}

.service-card{

    animation:fadeUp .8s ease both;

}

.contract-card{

    animation:zoomIn .8s ease both;

}

.why-card{

    animation:fadeUp .8s ease both;

}

.info-card{

    animation:fadeLeft .8s ease both;

}

.contact-form{

    animation:fadeRight .9s ease both;

}

/*==================================================
            HOVER PREMIUM
==================================================*/

.service-card,
.contract-card,
.why-card,
.info-card{

    will-change:transform;

}

.service-card:hover{

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

}

.contract-card:hover{

    transform:translateY(-15px) scale(1.03);

}

.why-card:hover{

    transform:translateY(-12px);

}

.info-card:hover{

    transform:translateY(-8px);

}

/*==================================================
        SÉLECTION DE TEXTE
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==================================================
            BARRE DE DÉFILEMENT
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef3f8;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*==================================================
            FOCUS ACCESSIBILITÉ
==================================================*/

a:focus,
button:focus,
input:focus,
textarea:focus{

    outline:3px solid rgba(10,77,163,.25);

    outline-offset:3px;

}

/*==================================================
                FIN
==================================================*/