/* =====================================================
MIDELECT 2026
STYLE PREMIUM ELECTRICIEN
===================================================== */

:root{

 
--primary:#031C4B;
--primary-light:#072B6D;

--secondary:#F6C342;

--white:#FFFFFF;

--dark:#0F172A;

--text:#1E293B;

--gray:#64748B;

--light:#F8FAFC;
 

}

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

body{

 
margin:0;

padding:0;

background:#f5f7fb;

color:var(--text);

font-family:
Inter,
Segoe UI,
Arial,
sans-serif;

overflow-x:hidden;
 

}

/* =====================================================
TITRES
===================================================== */

h1,h2,h3,h4,h5{

 
font-weight:800;

color:var(--dark);
 

}

.section-title{

 
font-size:2.2rem;

font-weight:800;

margin-bottom:30px;
 

}

/* =====================================================
NAVBAR
===================================================== */

.navbar{

 
background:
linear-gradient(
    90deg,
    #021538,
    #072B6D
) !important;

padding:18px 0;

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

}

.navbar-brand{

 
font-size:2rem;

font-weight:900;

color:white !important;
 

}

.navbar-brand span{

 
color:var(--secondary);
 

}

.nav-link{

 
color:rgba(255,255,255,.85) !important;

font-weight:500;

margin-left:10px;
 

}

.nav-link:hover{

 
color:white !important;
 

}

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

.hero-electric{

 
background:
linear-gradient(
    135deg,
    #021538,
    #072B6D
);

border-radius:30px;

padding:80px 60px;

position:relative;

overflow:hidden;

color:white;

margin-bottom:60px;

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

}

.hero-electric::before{

    content:"";

    position:absolute;

    top:-150px;

    right:-150px;

    width:400px;

    height:400px;

    background:
    radial-gradient(
        rgba(246,195,66,.15),
        transparent 70%
    );

    border-radius:50%;

    pointer-events:none;

    z-index:1;

}

.hero-electric h1{

 
color:white;

font-size:4rem;

line-height:1.1;

font-weight:900;

margin-bottom:25px;
 

}

.hero-electric .highlight{

 
color:var(--secondary);
 

}

.hero-electric p{

 
font-size:1.15rem;

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

}

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

.hero-search{

 
margin-top:35px;
 

}

.hero-search .form-control{

 
height:60px;

border:none;

border-radius:15px;

font-size:1rem;

padding-left:20px;
 

}

.hero-search .btn{

 
height:60px;

border-radius:15px;
 

}

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

.btn-primary{

 
background:var(--secondary);

color:#111;

border:none;

font-weight:700;

padding:12px 28px;
 

}

.btn-primary:hover{

 
background:#e7b62e;

color:#111;
 

}

.footer-midelect .cta-button{

    display:block;

    width:100%;

    background:#fff;

    color:var(--primary);

    text-align:center;

    padding:18px 20px;

    border-radius:18px;

    font-weight:800;

    font-size:1.05rem;

    text-decoration:none;

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

    transition:.25s;

}

.footer-midelect .cta-button:hover{

    background:#F6C342;

    color:#031C4B;

    transform:translateY(-3px);

}



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

.stats-wrapper{

 
margin-top:40px;
 

}

.stat-card{

 
background:white;

border-radius:20px;

padding:25px;

text-align:center;

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

transition:.3s;
 

}

.stat-card:hover{

 
transform:translateY(-5px);
 

}

.stat-number{

 
font-size:2rem;

font-weight:900;

color:var(--primary);
 

}

.stat-label{

 
color:var(--gray);

font-size:.95rem;
 

}

/* =====================================================
BLOCS BLANCS
===================================================== */

.bg-white{

 
border-radius:25px;

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

}

/* =====================================================
RECHERCHES POPULAIRES
===================================================== */

.city-link{

 
display:inline-block;

padding:12px 18px;

margin:5px;

background:white;

border-radius:50px;

color:var(--primary);

text-decoration:none;

font-weight:600;

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

transition:.3s;
 

}

.city-link:hover{

 
background:var(--primary);

color:white;
 

}
/* =====================================================
CARTES ENTREPRISES
===================================================== */

.card{

 
border:none;

border-radius:20px;

overflow:hidden;

background:white;

transition:.3s;

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

}

.card:hover{

 
transform:translateY(-8px);

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

}

.card-body{

 
padding:25px;
 

}

.card-footer{

 
background:white;

border-top:1px solid #eef2f7;
 

}

.card-company{

 
min-height:280px;
 

}

.card-title{

 
font-weight:800;

margin-bottom:15px;

color:var(--dark);
 

}

/* =====================================================
LOGO ENTREPRISE
===================================================== */

.logo-company{

 
max-height:90px;

width:auto;

object-fit:contain;
 

}

/* =====================================================
BADGE PREMIUM
===================================================== */

.badge-premium{

 
background:var(--secondary);

color:#111;

padding:8px 15px;

border-radius:50px;

font-size:.85rem;

font-weight:700;
 

}

/* =====================================================
FAQ
===================================================== */

.faq-item{

 
background:white;

border-radius:20px;

padding:25px;

margin-bottom:20px;

box-shadow:
0 5px 20px rgba(0,0,0,.05);
 

}

.faq-item h5{

 
margin-bottom:10px;

font-weight:700;
 

}

.faq-item p{

 
margin:0;

color:var(--gray);
 

}

/* =====================================================
AVANTAGES
===================================================== */

.feature-box{

 
background:white;

border-radius:20px;

padding:30px;

text-align:center;

height:100%;

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

transition:.3s;
 

}

.feature-box:hover{

 
transform:translateY(-5px);
 

}

.feature-icon{

 
width:70px;

height:70px;

line-height:70px;

margin:auto;

border-radius:20px;

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

color:white;

font-size:1.8rem;

margin-bottom:20px;
 

}

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

.cta-section{

 
background:
linear-gradient(
    135deg,
    #021538,
    #072B6D
);

color:white;

border-radius:30px;

padding:60px;

text-align:center;

margin:60px 0;
 

}

.cta-section h2{

 
color:white;

font-size:2.5rem;

margin-bottom:20px;
 

}

.cta-section p{

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

margin-bottom:30px;
 

}

/* =====================================================
PAGINATION
===================================================== */

.pagination{

 
justify-content:center;

margin-top:40px;
 

}

.pagination .page-link{

 
border:none;

margin:0 4px;

border-radius:12px;

color:var(--primary);

min-width:45px;

text-align:center;

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

}

.pagination .page-item.active .page-link{

 
background:var(--primary);

color:white;
 

}

.pagination .page-link:hover{

 
background:var(--secondary);

color:#111;
 

}

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

.footer-midelect{

 
background:
linear-gradient(
    135deg,
    #021538,
    #041d4d
);
width:100%;
color:white;

padding:20px 0 40px;

margin-top:20px;
 

}

.footer-midelect h5{

 
color:white;

font-weight:800;

margin-bottom:20px;
 

}

.footer-midelect p{

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

}

.footer-midelect a{

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

text-decoration:none;

transition:.2s;
 

}

.footer-midelect a:hover{

 
color:var(--secondary);
 

}

.footer-midelect hr{

 
border-color:
rgba(255,255,255,.1);
 

}

.footer-midelect .copyright{

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

text-align:center;
 

}

/* =====================================================
ALERTES
===================================================== */

.alert{

 
border:none;

border-radius:15px;
 

}

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

.fade-up{

 
animation:
fadeUp .6s ease;
 

}

@keyframes fadeUp{

 
from{

    opacity:0;

    transform:
    translateY(20px);
}

to{

    opacity:1;

    transform:
    translateY(0);
}
 

}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:991px){

 
.hero-electric{

    padding:50px 30px;
}

.hero-electric h1{

    font-size:2.6rem;
}

.section-title{

    font-size:1.8rem;
}

.cta-section{

    padding:40px 25px;
}

.cta-section h2{

    font-size:2rem;
}
 

}

@media(max-width:768px){

 
.hero-electric{

    text-align:center;
}

.hero-electric h1{

    font-size:2.1rem;
}

.hero-search .btn{

    margin-top:10px;
}

.stat-card{

    margin-bottom:15px;
}

.feature-box{

    margin-bottom:20px;
}
 

}

@media(max-width:576px){

 
.navbar-brand{

    font-size:1.5rem;
}

.hero-electric{

    padding:35px 20px;
}

.hero-electric h1{

    font-size:1.8rem;
}

.section-title{

    font-size:1.5rem;
}
 

}
/* =====================================================
COOKIE BANNER
===================================================== */

.cookie-banner{

position:fixed;

bottom:20px;

left:20px;

right:20px;

z-index:99999;

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

color:#fff;

border-radius:20px;

padding:25px;

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

animation:fadeUp .5s;

}

.cookie-banner h5{

color:#fff;

font-weight:800;

}

.cookie-banner p{

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

}

.cookie-banner a{

color:var(--secondary);

font-weight:700;

text-decoration:none;

}

.cookie-banner a:hover{

text-decoration:underline;

}

@media(max-width:768px){

.cookie-banner{

left:10px;

right:10px;

bottom:10px;

padding:20px;

}

}


/* =====================================================
ANNUAIRE PAR DÉPARTEMENT ET VILLE
===================================================== */

.directory-hero{
    position:relative;
    overflow:hidden;
    padding:48px;
    border-radius:28px;
    color:var(--white);
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(246,195,66,.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light)
        );
    box-shadow:0 22px 55px rgba(13,35,74,.18);
}

.directory-hero::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-110px;
    width:300px;
    height:300px;
    border:42px solid rgba(255,255,255,.05);
    border-radius:50%;
}

.directory-hero-content{
    position:relative;
    z-index:2;
    max-width:820px;
}

.directory-kicker{
    display:inline-flex;
    min-height:30px;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    color:var(--primary);
    background:var(--secondary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.directory-hero .directory-hero-title,
.directory-hero h1{
    max-width:760px;
    margin:18px 0 10px;
    color:var(--white) !important;
    font-size:clamp(30px,5vw,52px);
    font-weight:900;
    line-height:1.08;
}

.directory-hero p{
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.88);
    font-size:16px;
    line-height:1.7;
}

.directory-search{
    display:grid;
    grid-template-columns:1fr 220px;
    gap:12px;
    margin-top:28px;
    padding:12px;
    border-radius:17px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
}

.directory-search input{
    min-height:52px;
    padding:0 16px;
    border:0;
    border-radius:11px;
    background:var(--white);
}

.directory-search button{
    min-height:52px;
    border:0;
    border-radius:11px;
    color:#111;
    background:var(--secondary);
    font-weight:900;
}

.directory-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:22px;
}

.directory-stat{
    padding:18px;
    border:1px solid #e1e8f2;
    border-radius:18px;
    background:var(--white);
    box-shadow:0 12px 30px rgba(25,51,90,.06);
}

.directory-stat strong,
.directory-stat span{
    display:block;
}

.directory-stat strong{
    color:var(--primary);
    font-size:26px;
}

.directory-stat span{
    margin-top:4px;
    color:var(--gray);
    font-size:11px;
    font-weight:750;
}

.directory-section{
    margin-top:28px;
    padding:27px;
    border:1px solid #e1e8f2;
    border-radius:22px;
    background:var(--white);
    box-shadow:0 14px 35px rgba(25,51,90,.06);
}

.directory-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.directory-section-head h2{
    margin:0;
    color:var(--primary);
    font-size:23px;
}

.directory-section-head p{
    margin:5px 0 0;
    color:var(--gray);
    font-size:12px;
}

.directory-reset{
    color:var(--primary-light);
    font-size:12px;
    font-weight:850;
    text-decoration:none;
}

.department-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}

.department-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:47px;
    padding:0 13px;
    border:1px solid #dfe6f0;
    border-radius:12px;
    color:var(--primary);
    background:var(--light);
    font-size:12px;
    font-weight:850;
    text-decoration:none;
    transition:.18s ease;
}

.department-link:hover,
.department-link.is-active{
    border-color:var(--primary);
    color:var(--white);
    background:var(--primary);
    transform:translateY(-1px);
}

.department-link small{
    display:inline-flex;
    min-width:28px;
    min-height:23px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:var(--gray);
    background:#edf1f6;
    font-size:9px;
}

.department-link:hover small,
.department-link.is-active small{
    color:var(--primary);
    background:var(--white);
}

.city-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.directory-section .city-link{
    display:block;
    min-height:74px;
    margin:0;
    padding:14px;
    border:1px solid #dfe6f0;
    border-radius:14px;
    color:var(--primary);
    background:var(--white);
    box-shadow:none;
    text-decoration:none;
    transition:.18s ease;
}

.directory-section .city-link:hover{
    border-color:var(--primary-light);
    color:var(--primary);
    background:var(--white);
    box-shadow:0 9px 22px rgba(3,28,75,.12);
    transform:translateY(-2px);
}

.directory-section .city-link strong,
.directory-section .city-link span,
.directory-section .city-link small{
    display:block;
}

.directory-section .city-link strong{
    font-size:13px;
}

.directory-section .city-link span{
    margin-top:4px;
    color:var(--gray);
    font-size:10px;
}

.directory-section .city-link small{
    margin-top:5px;
    color:var(--primary-light);
    font-size:9px;
    font-weight:850;
}

.company-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
}

.company-card{
    display:flex;
    min-width:0;
    min-height:100%;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dfe6f0;
    border-radius:17px;
    background:var(--white);
    transition:.18s ease;
}

.company-card:hover{
    box-shadow:0 14px 30px rgba(25,51,90,.12);
    transform:translateY(-2px);
}

.company-logo{
    display:grid;
    height:120px;
    place-items:center;
    padding:18px;
    background:var(--light);
}

.company-logo img{
    max-width:100%;
    max-height:82px;
    object-fit:contain;
}

.company-logo-placeholder{
    display:grid;
    width:58px;
    height:58px;
    place-items:center;
    border-radius:18px;
    color:var(--white);
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );
    font-size:26px;
}

.company-body{
    flex:1;
    padding:18px;
}

.company-body h3{
    margin:0;
    color:var(--primary);
    font-size:16px;
}

.company-location{
    margin:9px 0 0;
    color:var(--gray);
    font-size:12px;
}

.company-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:13px;
}

.company-footer{
    padding:0 18px 18px;
}

.company-footer a{
    display:flex;
    min-height:43px;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:#111;
    background:var(--secondary);
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

.company-footer a:hover{
    background:#e7b62e;
    color:#111;
}

.directory-empty{
    padding:40px;
    border:1px dashed #cbd5e1;
    border-radius:17px;
    color:var(--gray);
    background:var(--light);
    text-align:center;
}

.directory-pagination .page-link{
    color:var(--primary);
    border-color:#dfe6f0;
}

.directory-pagination .active .page-link{
    border-color:var(--primary);
    color:var(--white);
    background:var(--primary);
}

@media(max-width:1200px){
    .department-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .city-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:980px){
    .directory-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .department-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .city-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .company-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:680px){
    .directory-hero{
        padding:30px 22px;
    }

    .directory-search{
        grid-template-columns:1fr;
    }

    .department-grid,
    .city-grid,
    .company-grid{
        grid-template-columns:1fr;
    }

    .directory-section-head{
        align-items:flex-start;
        flex-direction:column;
    }
}