/* ===========================================================
   CJJD FRAMEWORK v1.0
=========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#0B2E63;
    --secondary:#184A9C;
    --gold:#D4AF37;
    --white:#FFFFFF;
    --background:#F5F7FA;
    --text:#263238;
    --shadow:0 8px 30px rgba(0,0,0,.08);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

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

    line-height:1.6;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

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

header{

    background:white;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:var(--shadow);

    transition:.35s;

}
/*======================================================
HEADER AU SCROLL
======================================================*/

header.scrolled{

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

}

header.scrolled .container{

    padding:5px 0;

}

header.scrolled .logo img{

    width:70px;

}

header.scrolled .identity h1{

    font-size:22px;

}

header.scrolled nav a{

    padding:15px 22px;

}

.container{

    width:min(1400px,92%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

}

.logo img{

    width:90px;

}

.identity{

    flex:1;

    margin-left:20px;

}

.identity h1{

    color:var(--primary);

    font-size:26px;

    font-weight:700;

    line-height:1.2;

}

.identity p{

    color:#555;

    font-size:15px;

    margin-top:4px;

}

.social{

    display:flex;

    gap:18px;

}

.social a{

    color:var(--primary);

    font-weight:600;

}

/* ======================= MENU ======================= */

/*==================================================
MEGA MENU
==================================================*/

nav{

    background:var(--primary);

}

nav>ul{

    width:min(1400px,92%);

    margin:auto;

    display:flex;

    justify-content:center;

    list-style:none;

}

nav>ul>li{

    position:relative;

}

nav>ul>li>a{

    display:block;

    padding:18px 25px;

    color:white;

    font-weight:600;

    transition:.3s;

}

nav>ul>li:hover>a{

    background:var(--gold);

    color:#111;

}

.mega-menu{

    position:absolute;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    top:100%;

    width:650px;

    background:white;

    border-radius:18px;

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

    display:flex;

    gap:40px;

    padding:35px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.has-mega:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.mega-column{

    flex:1;

}

.mega-column h4{

    color:var(--primary);

    margin-bottom:18px;

    border-bottom:2px solid var(--gold);

    padding-bottom:8px;

}

.mega-column a{

    display:block;

    padding:10px 0;

    color:#444;

    transition:.25s;

}

.mega-column a:hover{

    color:var(--primary);

    padding-left:8px;

}

@media(max-width:1000px){

    .mega-menu{

        display:none;

    }

}

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

#hero{

    width:min(1400px,92%);

    margin:60px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.badge{

    display:inline-block;

    background:var(--gold);

    color:black;

    font-weight:bold;

    padding:8px 18px;

    border-radius:40px;

    margin-bottom:25px;

}

.hero-text h2{

    font-size:52px;

    color:var(--primary);

    line-height:1.15;

    margin-bottom:25px;

}

.hero-text p{

    font-size:18px;

    margin-bottom:35px;

}

.btn{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:16px 28px;

    border-radius:10px;

    font-weight:700;

    transition:.3s;

}

.btn:hover{

    background:var(--gold);

    color:black;

}

.hero-image img{

    border-radius:18px;

    box-shadow:var(--shadow);

}

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

@media(max-width:900px){

    .container{

        flex-direction:column;

        text-align:center;

    }

    .identity{

        margin:20px 0;

    }

    nav ul{

        flex-direction:column;

    }

    #hero{

        grid-template-columns:1fr;

    }

    .hero-text h2{

        font-size:38px;

    }

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

#services{

    width:min(1400px,92%);

    margin:90px auto;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;

    color:var(--primary);

    margin-bottom:15px;

}

.section-title p{

    color:#666;

    font-size:18px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(3,minmax(320px,420px));

    justify-content:center;

    gap:35px;

    max-width:1400px;

    margin:0 auto;

}
.card{

    background:white;

    padding:40px 30px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

}

.card-icon{

    font-size:48px;

    margin-bottom:20px;

}

.card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:24px;

}

.card p{

    margin-bottom:25px;

    color:#666;

}

.card a{

    font-weight:bold;

    color:var(--primary);

}

@media(max-width:1100px){

    .cards{

        grid-template-columns:repeat(2,minmax(320px,420px));

        justify-content:center;

    }

}

@media(max-width:700px){

    .cards{

        grid-template-columns:minmax(300px,420px);

        justify-content:center;

    }

}
/*======================================================
ACTUALITÉS
======================================================*/

#actualites{

    width:min(1400px,92%);

    margin:100px auto;

}

.news-grid{

    display:grid;

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

    gap:35px;

}

.news-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.news-card:hover{

    transform:translateY(-10px);

}

.news-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.news-content{

    padding:28px;

}

.news-date{

    display:inline-block;

    background:#EDF3FF;

    color:var(--primary);

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;

}

.news-content h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:24px;

}

.news-content p{

    color:#666;

    margin-bottom:20px;

}

.news-content a{

    color:var(--primary);

    font-weight:bold;

}

@media(max-width:1100px){

    .news-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================
PLATEFORMES
======================================================*/

#platformes{

    width:min(1400px,92%);

    margin:100px auto;

}

.platform-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(360px,500px));

    justify-content:center;

    gap:40px;

    max-width:1200px;

    margin:0 auto;

}

.platform-card{

    background:linear-gradient(135deg,#0B2E63,#184A9C);

    color:white;

    border-radius:22px;

    padding:35px;

    transition:.35s;

    box-shadow:var(--shadow);

}

.platform-card:hover{

    transform:translateY(-10px);

}

.platform-icon{

    font-size:54px;

    margin-bottom:25px;

}

.platform-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.platform-card p{

    margin-bottom:30px;

    opacity:.92;

}

.platform-card a{

    color:#D4AF37;

    font-weight:bold;

}

@media(max-width:1100px){

    .platform-grid{

        grid-template-columns:1fr;

        max-width:550px;

    }

}

@media(max-width:700px){

    .platform-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================
STATISTIQUES
======================================================*/

/*======================================================
TABLEAU DE BORD
======================================================*/

#stats{

    width:min(1200px,92%);

    margin:110px auto;

}

.dashboard{

    background:#fff;

    border-radius:24px;

    padding:50px;

    box-shadow:var(--shadow);

}

.dashboard-item{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:20px;

    padding:28px 22px;

    text-align:center;

    transition:.35s ease;

    border:1px solid rgba(12,56,120,.08);

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

}

.dashboard-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#d4af37,#f2d573);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.dashboard-item:hover::before{

    transform:scaleX(1);

}

.dashboard-item:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 38px rgba(0,0,0,.16);

}

.dashboard-item:last-child{

    border-bottom:none;

}

.dashboard-icon{

    width:74px;

    height:74px;

    margin:0 auto 18px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    background:linear-gradient(135deg,#fff8e5,#f7e1a3);

    color:#c79b15;

    transition:.35s ease;

}

.dashboard-label{

    color:var(--primary);

    font-size:21px;

    font-weight:600;

}

.dashboard-value{

    display:block;

    margin-top:10px;

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

    transition:.35s;

}
.dashboard-item:hover .dashboard-icon{

    transform:rotate(10deg) scale(1.08);

}

.dashboard-item:hover .dashboard-value{

    transform:scale(1.08);

    color:#c79b15;

}

@media(max-width:700px){

    .dashboard{

        padding:30px 20px;

    }

    .dashboard-item{

        grid-template-columns:40px 1fr;

        gap:10px;

    }

    .dashboard-value{

        grid-column:2;

        justify-self:start;

        font-size:26px;

    }

}
/*======================================================
PUBLICATIONS
======================================================*/

#publications{

    width:min(1400px,92%);

    margin:110px auto;

}

.publication-grid{

    display:grid;

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

    gap:35px;

    max-width:1400px;

    margin:0 auto;

}

.publication-card{
    grid-column:span 2;

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:var(--shadow);

    transition:.35s;

    border-top:6px solid var(--gold);
    display:flex;

flex-direction:column;

}

.publication-card:hover{

    transform:translateY(-10px);

}

.publication-icon{

    font-size:48px;

    margin-bottom:20px;

}

.publication-card h3{

    color:var(--primary);

    font-size:28px;

    margin-bottom:18px;

}

.publication-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

    flex:1;

}

.publication-card a{

    color:var(--primary);

    font-weight:700;

}
/*======================================================
ENGAGEMENT
======================================================*/

#engagement{

    background:linear-gradient(135deg,#0B2E63,#184A9C);

    margin-top:120px;

    padding:100px 0;

}

.engagement-container{

    width:min(1400px,92%);

    margin:auto;

    text-align:center;

}

.engagement-container h2{

    color:white;

    font-size:44px;

    margin-bottom:20px;

}

.engagement-container>p{

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

    font-size:20px;

    max-width:850px;

    margin:0 auto 60px;

}

.engagement-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.engagement-card{

    background:white;

    border-radius:22px;

    padding:45px 35px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.engagement-card:hover{

    transform:translateY(-10px);

}

.engagement-icon{

    font-size:54px;

    margin-bottom:25px;

}

.engagement-card h3{

    color:var(--primary);

    margin-bottom:20px;

    font-size:28px;

}

.engagement-card p{

    color:#666;

    margin-bottom:30px;

    line-height:1.8;

}

.engagement-card a{

    color:var(--gold);

    background:var(--primary);

    display:inline-block;

    padding:12px 24px;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;

}

.engagement-card a:hover{

    background:var(--gold);

    color:var(--primary);

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

#footer{

    background:#0B2E63;

    color:white;

    margin-top:120px;

}

.footer-container{

    width:min(1400px,92%);

    margin:auto;

    padding:70px 0;

    display:grid;

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

    gap:45px;

}

.footer-logo{

    width:90px;

    margin-bottom:20px;

}

.footer-column h3{

    margin-bottom:15px;

}

.footer-column h4{

    margin-bottom:20px;

    color:var(--gold);

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    color:white;

}

.footer-column a:hover{

    color:var(--gold);

}

.footer-column p{

    margin-bottom:12px;

}

.footer-social{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-bottom{

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

    text-align:center;

    padding:25px;

    font-size:14px;

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

}

@media(max-width:900px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:auto auto 20px;

    }

}
.footer-social a{

    display:flex;

    align-items:center;

    gap:12px;

    color:white;

    font-size:16px;

    margin-bottom:15px;

    transition:.3s;

}

.footer-social a i{

    width:24px;

    font-size:22px;

    color:var(--gold);

}

.footer-social a:hover{

    color:var(--gold);

    transform:translateX(5px);

}
/*======================================================
PRE-FOOTER
======================================================*/

#pre-footer{

    width:min(1400px,92%);

    margin:120px auto 0;

}

.pre-footer-container{

    display:grid;

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

    gap:35px;

}

.pre-footer-item{

    background:#fff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.pre-footer-item:hover{

    transform:translateY(-8px);

}

.pre-footer-item i{

    font-size:42px;

    color:var(--gold);

    margin-bottom:25px;

}

.pre-footer-item h3{

    color:var(--primary);

    margin-bottom:20px;

    font-size:26px;

}

.pre-footer-item p{

    color:#666;

    line-height:1.8;

}

@media(max-width:900px){

    .pre-footer-container{

        grid-template-columns:1fr;

    }

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

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:20px;

    cursor:pointer;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:9999;

}

#backToTop:hover{

    background:var(--gold);

    color:black;

    transform:translateY(-5px);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}
/*======================================================
ANIMATIONS AU SCROLL
======================================================*/

.reveal{

    opacity:1;

    transform:translateY(0);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}
/*======================================================
RECHERCHE
======================================================*/

.search-box{

    display:flex;

    align-items:center;

    background:white;

    border:2px solid #E5E7EB;

    border-radius:40px;

    overflow:hidden;

    margin-right:30px;

}

.search-box input{

    width:280px;

    border:none;

    outline:none;

    padding:12px 18px;

    font-size:15px;

}

.search-box button{

    width:55px;

    height:45px;

    border:none;

    background:var(--gold);

    color:var(--primary);

    cursor:pointer;

    transition:.3s;

}

.search-box button:hover{

    background:var(--primary);

    color:white;

}
/*======================================================
FOOTER A PROPOS
======================================================*/

.footer-download{

    display:block;

    margin:25px 0;

    padding:18px;

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

    border-radius:10px;

    text-align:center;

    color:white;

    font-weight:600;

    transition:.3s;

}

.footer-download:hover{

    background:var(--gold);

    color:var(--primary);

}

.footer-id{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:22px;

    padding:12px 18px;

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

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

    border-radius:16px;

    transition:.35s ease;

    overflow:hidden;

    position:relative;

}
.footer-id::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:80%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transition:.7s;

}
.footer-id:hover::before{

    left:140%;

}

.footer-id:hover{

    transform:translateY(-4px);

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

}

.footer-id-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.footer-id-icon img{

    width:42px;

    height:42px;

    object-fit:contain;

    transition:.35s ease;

}

.footer-id:hover .footer-id-icon img{

    transform:rotate(8deg) scale(1.08);

}

.footer-id-content{

    display:flex;

    flex-direction:column;

}

.footer-id-content small{

    color:#d7d7d7;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

.footer-id-content strong{

    margin-top:2px;

    color:#fff;

    font-size:1.45rem;

    font-weight:800;

    letter-spacing:.5px;

}

.footer-links{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:20px;

    flex-wrap:wrap;

}

/*======================================================
LIENS JURIDIQUES
======================================================*/

.footer-links{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:22px;

    flex-wrap:wrap;

}

.footer-links span{

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

}

.footer-links a{

    position:relative;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:all .35s ease;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:width .35s ease;

}

.footer-links a:hover{

    color:var(--gold);

    transform:translateY(-2px);

}

.footer-links a:hover::after{

    width:100%;

}

.footer-links a:hover{

    color:var(--gold);

}
.footer-links a i{

    margin-right:8px;

    color:var(--gold);

    transition:.35s;

}

.footer-links a:hover i{

    transform:rotate(-10deg) scale(1.15);

}
/*======================================================
MODALE MENTIONS LÉGALES
======================================================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    z-index:10000;

    overflow:auto;

}

.modal-content{

    background:white;

    width:min(900px,90%);

    margin:50px auto;

    padding:40px;

    border-radius:18px;

    position:relative;

    max-height:85vh;

    overflow-y:auto;

}

.modal-content h2{

    color:var(--primary);

    margin-bottom:25px;

}

.modal-content h3{

    margin-top:25px;

    color:var(--primary);

}

.modal-content p{

    margin-top:10px;

    line-height:1.8;

}

.close-modal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:34px;

    cursor:pointer;

    color:#888;

}

.close-modal:hover{

    color:red;

}
.footer-download{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    font-size:15px;

    margin:20px 0;

}
/*======================================================
SLIDER ACTUALITÉS
======================================================*/

.news-slider{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:40px;

}

.slider-wrapper{

    flex:1;

    overflow:hidden;

}

.slider-track{

    position:relative;

    min-height:650px;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:scale(.97);

    transition:

        opacity .7s ease,

        transform .7s ease;

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

.slide img{

    width:100%;

    height:420px;

    object-fit:cover;

    opacity:0;

    transition:
        opacity .8s ease,
        transform 8s linear;

}
.slide.active img.loaded{

    opacity:1;

}
.slide img{

    transition:transform 8s linear;

}

.slide.active img{

    transform:scale(1.08);

}

.slide-content{

    padding:35px;

}

.slide-content h3{

    color:var(--primary);

    margin:18px 0;

    font-size:34px;

}

.slide-content p{

    margin-bottom:25px;

}

.slider-btn{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

    transition:.3s;

}

.slider-btn:hover{

    background:var(--gold);

    color:black;

    transform:scale(1.12);

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

}
.slider-btn{

    transition:
        background .3s,
        color .3s,
        transform .3s,
        box-shadow .3s;

}

.slider-dots{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:30px;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#C8CED8;

    cursor:pointer;

    transition:.3s;

}

.dot.active{

    background:var(--gold);

    transform:scale(1.45);

    box-shadow:0 0 15px rgba(212,175,55,.6);

}

.btn-small{

    display:inline-block;

    padding:12px 22px;

    background:var(--primary);

    color:white;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.btn-small:hover{

    background:var(--gold);

    color:black;

}
.slide-content h3{

    opacity:0;

    transform:translateY(20px);

    transition:.5s ease .25s;

}

.slide.active .slide-content h3{

    opacity:1;

    transform:translateY(0);

}
.slide-content p{

    opacity:0;

    transform:translateY(20px);

    transition:.5s ease .45s;

}

.slide.active .slide-content p{

    opacity:1;

    transform:translateY(0);

}
.btn-small{

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .5s ease .65s,
        transform .5s ease .65s,
        background .3s,
        color .3s;

}

.slide.active .btn-small{

    opacity:1;

    transform:translateY(0);

}
/*======================================================
BANDEAU D'INFORMATIONS
======================================================*/

#news-ticker{

    display:flex;

    align-items:center;

    background:#fff;

    border-bottom:1px solid #E5E7EB;

    overflow:hidden;

    height:50px;

}

.ticker-label{

    background:var(--gold);

    color:#111;

    padding:0 25px;

    height:100%;

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    white-space:nowrap;

}

.ticker-container{

    flex:1;

    overflow:hidden;

}

.ticker-content{

    display:flex;

    align-items:center;

    gap:80px;

    white-space:nowrap;

    animation:ticker 35s linear infinite;

}

.ticker-content span{

    color:var(--primary);

    font-weight:600;

}

@keyframes ticker{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}

#news-ticker:hover .ticker-content{

    animation-play-state:paused;

}
/*======================================================
ACCÈS RAPIDE
======================================================*/

#quick-access{

    width:min(1400px,92%);

    margin:25px auto;

    display:grid;

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

    gap:18px;

}

#quick-access a{

    background:white;

    border-radius:18px;

    padding:22px 10px;

    text-align:center;

    box-shadow:var(--shadow);

    color:var(--primary);

    transition:.35s;

}

#quick-access a i{

    display:block;

    font-size:34px;

    color:var(--gold);

    margin-bottom:14px;

    transition:.35s;

}

#quick-access a span{

    display:block;

    font-weight:600;

    font-size:15px;

}

#quick-access a:hover{

    transform:translateY(-8px);

    background:var(--primary);

    color:white;

}

#quick-access a:hover i{

    color:white;

    transform:scale(1.15) rotate(-8deg);

}

@media(max-width:1200px){

    #quick-access{

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

    }

}

@media(max-width:700px){

    #quick-access{

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

    }

}
/*======================================================
AGENDA
======================================================*/

#agenda{

    width:min(1400px,92%);

    margin:110px auto;

}

.agenda-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:30px;

}

.agenda-card{

    display:flex;

    gap:25px;

    background:white;

    border-radius:20px;

    padding:25px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.agenda-card:hover{

    transform:translateY(-8px);

}

.agenda-date{

    min-width:90px;

    background:var(--primary);

    color:white;

    border-radius:16px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.day{

    font-size:34px;

    font-weight:bold;

}

.month{

    font-size:14px;

    letter-spacing:1px;

}

.agenda-content{

    flex:1;

}

.agenda-content h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:23px;

}

.agenda-content p{

    color:#666;

    margin-bottom:15px;

}

.agenda-content span{

    color:var(--gold);

    font-weight:600;

}

.agenda-content i{

    margin-right:8px;

}
/*======================================================
IMPACT
======================================================*/

#impact{

    width:min(1400px,92%);

    margin:110px auto;

}

.impact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.impact-card{

    background:white;

    border-radius:22px;

    padding:40px 35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

    border-bottom:5px solid transparent;

}

.impact-card:hover{

    transform:translateY(-10px);

    border-bottom-color:var(--gold);

}

.impact-card i{

    font-size:54px;

    color:var(--gold);

    margin-bottom:25px;

    transition:.35s;

}

.impact-card:hover i{

    transform:scale(1.15);

}

.impact-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:26px;

}

.impact-card p{

    color:#666;

    line-height:1.8;

}
/*======================================================
TEMOIGNAGES
======================================================*/

#temoignages{

    width:min(1100px,92%);

    margin:110px auto;

}

.testimonial-slider{

    position:relative;

    min-height:320px;

}

.testimonial{

    position:absolute;

    inset:0;

    background:white;

    border-radius:22px;

    padding:60px;

    text-align:center;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:scale(.96);

    transition:.6s;

}

.testimonial.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

.testimonial i{

    font-size:42px;

    color:var(--gold);

    margin-bottom:30px;

}

.testimonial p{

    font-size:22px;

    line-height:1.9;

    color:#555;

    margin-bottom:30px;

    font-style:italic;

}

.testimonial h4{

    color:var(--primary);

    font-size:24px;

}

.testimonial span{

    color:#888;

}

.testimonial-dots{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:30px;

}

.tdot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#D8D8D8;

    cursor:pointer;

    transition:.3s;

}

.tdot.active{

    background:var(--gold);

    transform:scale(1.3);

}
/*======================================================
COUVERTURE NATIONALE
======================================================*/

#couverture{

    width:min(1400px,92%);

    margin:110px auto;

}

.coverage-container{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:60px;

    align-items:center;

}

.coverage-map img{

    width:100%;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.coverage-content{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.coverage-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

    background:white;

    padding:25px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.coverage-item:hover{

    transform:translateX(8px);

}

.coverage-item i{

    font-size:34px;

    color:var(--gold);

    width:40px;

}

.coverage-item h3{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:1.1rem;

    color:var(--primary);

    margin-bottom:8px;

}
.coverage-item h3 strong{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:58px;

    padding:6px 12px;

    border-radius:999px;

    background:linear-gradient(135deg,#d4af37,#f4d97a);

    color:#fff;

    font-size:.85rem;

    font-weight:700;

    box-shadow:0 6px 18px rgba(212,175,55,.35);

}

.coverage-item p{

    color:#666;

    line-height:1.7;

}

@media(max-width:1000px){

    .coverage-container{

        grid-template-columns:1fr;

    }

}
/*======================================================
BIBLIOTHÈQUE JURIDIQUE
======================================================*/

#bibliotheque{

    width:min(1400px,92%);

    margin:110px auto;

}

.library-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.library-card{

    background:white;
    
    padding:30px;
    
    border-radius:22px;
    
    box-shadow:var(--shadow);
    
    border-top:6px solid var(--gold);
    
    transition:.35s;
    
    display:grid;
    
    gap:16px;
    
    align-content:start;
    
    position:relative;
    
    overflow:hidden;
    
    }
    .library-card::after{

        content:"";
        
        position:absolute;
        
        top:0;
        
        right:-50px;
        
        width:120px;
        
        height:120px;
        
        background:rgba(13,71,161,.05);
        
        border-radius:50%;
        
        transition:.35s;
        
        }
        
        .library-card:hover::after{
        
        transform:scale(1.3);
        
        }

.library-card:hover{

    transform:translateY(-10px);

}

.library-card i{

    font-size:48px;

    color:var(--gold);

    margin-bottom:22px;

}

.library-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:26px;

}

.library-card p{

    color:#666;

    margin-bottom:28px;

    line-height:1.8;

}

.library-card a{

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.library-card a:hover{

    color:var(--gold);

}
/*======================================================
PORTAIL D'ACCÈS
======================================================*/

#portail{

    width:min(1400px,92%);

    margin:110px auto;

}

.portal-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.portal-card{

    background:linear-gradient(135deg,#0B2E63,#184A9C);

    color:white;

    border-radius:22px;

    padding:45px 35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.portal-card:hover{

    transform:translateY(-10px);

}

.portal-card i{

    font-size:55px;

    color:var(--gold);

    margin-bottom:25px;

}

.portal-card h3{

    margin-bottom:18px;

    font-size:28px;

}

.portal-card p{

    line-height:1.8;

    margin-bottom:30px;

    opacity:.95;

}

.portal-card a{

    display:inline-block;

    padding:12px 24px;

    border-radius:8px;

    background:var(--gold);

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.portal-card a:hover{

    background:white;

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

#faq{

    width:min(1200px,92%);

    margin:110px auto;

}

.faq-container{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.faq-item{

    background:white;

    border-radius:18px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.faq-question{

    width:100%;

    background:white;

    border:none;

    padding:24px 30px;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:18px;

    font-weight:700;

    color:var(--primary);

    transition:.3s;

}

.faq-question:hover{

    background:#F8FAFD;

}

.faq-question i{

    color:var(--gold);

    transition:.35s;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

    background:#FCFCFC;

}

.faq-answer p{

    padding:0 30px 25px;

    color:#666;

    line-height:1.9;

}
/*======================================================
PAGES INTERNES
======================================================*/

.page-hero{

    background:linear-gradient(135deg,#0B2E63,#184A9C);

    color:white;

    padding:120px 0;

    text-align:center;

}

.page-hero-content{

    width:min(900px,90%);

    margin:auto;

}

.page-badge{

    display:inline-block;

    background:var(--gold);

    color:#111;

    padding:8px 20px;

    border-radius:30px;

    font-weight:bold;

    margin-bottom:25px;

}

.page-hero h1{

    font-size:58px;

    margin-bottom:25px;

}

.page-hero p{

    font-size:22px;

    opacity:.95;

}

.page-section{

    width:min(1400px,92%);

    margin:100px auto;

}

.about-grid{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:60px;

    align-items:center;

}

.about-grid img{

    border-radius:20px;

    box-shadow:var(--shadow);

}

.mission-cards{

    display:grid;

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

    gap:30px;

}

.mission-cards article{

    background:white;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

}

.mission-cards i{

    font-size:50px;

    color:var(--gold);

    margin-bottom:25px;

}

.mission-cards h3{

    color:var(--primary);

    margin-bottom:15px;

}
/*======================================================
MISSION - VISION - VALEURS
======================================================*/

.identity-grid{

    display:grid;

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

    gap:35px;

}

.identity-card{

    background:white;

    padding:45px;

    border-radius:22px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.identity-card:hover{

    transform:translateY(-10px);

}

.identity-card i{

    font-size:55px;

    color:var(--gold);

    margin-bottom:25px;

}

.identity-card h2{

    color:var(--primary);

    margin-bottom:20px;

}

.identity-card p{

    line-height:1.8;

    color:#666;

}

.identity-card ul{

    list-style:none;

    margin-top:20px;

}

.identity-card li{

    padding:10px 0;

    border-bottom:1px solid #EEE;

}

@media(max-width:1000px){

    .identity-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================
AXES D'INTERVENTION
======================================================*/

.axes-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.axe-card{

    background:white;

    border-radius:24px;

    padding:45px;

    box-shadow:var(--shadow);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.axe-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.axe-card:hover::before{

    transform:scaleX(1);

}

.axe-card:hover{

    transform:translateY(-12px);

}

.axe-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:rgba(212,175,55,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.axe-icon i{

    font-size:38px;

    color:var(--gold);

}

.axe-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:28px;

}

.axe-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.axe-card ul{

    padding-left:18px;

}

.axe-card li{

    margin:12px 0;

    color:#555;

}

@media(max-width:1000px){

    .axes-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================
ORGANISATION
======================================================*/

.org-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.org-card{

    background:white;

    padding:40px;

    border-radius:22px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.org-card:hover{

    transform:translateY(-10px);

}

.org-card i{

    font-size:55px;

    color:var(--gold);

    margin-bottom:25px;

}

.org-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.departements{

    display:flex;

    flex-direction:column;

    gap:25px;

    margin-top:50px;

}

.departement{

    display:flex;

    align-items:flex-start;

    gap:25px;

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.departement:hover{

    transform:translateX(10px);

}

.departement i{

    font-size:40px;

    color:var(--gold);

    width:60px;

}

.departement h3{

    color:var(--primary);

    margin-bottom:10px;

}

@media(max-width:1000px){

    .org-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================
EQUIPE
======================================================*/

.team-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:50px;

}

.team-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.team-card:hover{

    transform:translateY(-12px);

}

.team-card img{

    width:100%;

    height:320px;

    object-fit:cover;

}

.team-card h3{

    margin-top:25px;

    color:var(--primary);

}

.team-card span{

    display:block;

    color:var(--gold);

    font-weight:bold;

    margin:10px 0 20px;

}

.team-card p{

    padding:0 25px;

    color:#666;

}

.team-social{

    display:flex;

    justify-content:center;

    gap:18px;

    padding:25px;

}

.team-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:white;

    transition:.3s;

}

.team-social a:hover{

    background:var(--gold);

    color:black;

}
.team-contact{

    margin:25px;

}

.team-contact a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:30px;

    background:#EDF3FF;

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.team-contact a:hover{

    background:var(--gold);

    color:#111;

}

.team-contact i{

    color:var(--gold);

}

.team-contact a:hover i{

    color:var(--primary);

}
/*======================================================
GOUVERNANCE
======================================================*/

.organe-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:45px;

}

.organe-title i{

    font-size:36px;

    color:var(--gold);

}

.organe-title h2{

    color:var(--primary);

    font-size:36px;

}

.team-phone{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin:20px auto 30px;

    padding:12px 22px;

    border-radius:30px;

    background:#EDF3FF;

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.team-phone:hover{

    background:var(--gold);

    color:#111;

}

.team-phone i{

    color:var(--gold);

}
.organe-description{

    max-width:900px;

    margin:0 auto 45px;

    text-align:center;

    color:#666;

    line-height:1.9;

    font-size:17px;

}
/*======================================================
MEMBRES
======================================================*/

.members-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:18px;

    margin-top:40px;

}

.member-item{

    background:white;

    padding:18px 22px;

    border-radius:14px;

    box-shadow:var(--shadow);

    border-left:5px solid var(--gold);

    font-weight:600;

    color:var(--primary);

    transition:.3s;

}

.member-item:hover{

    transform:translateX(8px);

    background:#F8FAFD;

}
/*======================================================
PARTENAIRES
======================================================*/

.partners-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:50px;

}

.partner-card{

    background:white;

    padding:40px;

    border-radius:22px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.partner-card:hover{

    transform:translateY(-10px);

}

.partner-card img{

    width:130px;

    height:130px;

    object-fit:contain;

    margin:auto;

    margin-bottom:25px;

}

.partner-card h3{

    color:var(--primary);

    margin-bottom:18px;

}

.partner-card p{

    color:#666;

    line-height:1.8;

}

.partnership-box{

    max-width:950px;

    margin:60px auto 0;

    background:linear-gradient(135deg,#0B2E63,#184A9C);

    color:white;

    padding:60px;

    border-radius:25px;

    text-align:center;

}

.partnership-box i{

    font-size:65px;

    color:var(--gold);

    margin-bottom:25px;

}

.partnership-box h3{

    font-size:34px;

    margin-bottom:25px;

}

.partnership-box p{

    line-height:1.9;

    margin-bottom:35px;

}
/*======================================================
PAGE ACTUALITES
======================================================*/

.actualites-toolbar{

    display:flex;
    
    justify-content:space-between;
    
    gap:20px;
    
    margin-bottom:50px;
    
    flex-wrap:wrap;
    
    }
    
    .actualites-toolbar input{
    
    flex:1;
    
    padding:16px;
    
    border-radius:12px;
    
    border:1px solid #DDD;
    
    font-size:16px;
    
    }
    
    .actualites-toolbar select{
    
    padding:16px;
    
    border-radius:12px;
    
    border:1px solid #DDD;
    
    min-width:250px;
    
    }
    
    .news-list{
    
    display:flex;
    
    flex-direction:column;
    
    gap:35px;
    
    }
    /*======================================================
LISTE DES ACTUALITÉS
======================================================*/

.news-item{

    display:grid;

    grid-template-columns:320px 1fr;

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.news-item:hover{

    transform:translateY(-8px);

}

.news-item img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.news-body{

    padding:35px;

}

.news-category{

    display:inline-block;

    background:#EDF3FF;

    color:var(--primary);

    padding:8px 16px;

    border-radius:30px;

    font-weight:bold;

    margin-bottom:20px;

}

.news-body h2{

    color:var(--primary);

    margin-bottom:15px;

}

.news-body small{

    display:block;

    color:#888;

    margin-bottom:20px;

}

.news-body p{

    line-height:1.8;

    margin-bottom:25px;

}

.btn-news{

    background:var(--primary);

    color:white;

    border:none;

    padding:14px 24px;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.btn-news:hover{

    background:var(--gold);

    color:#111;

}

@media(max-width:900px){

    .news-item{

        grid-template-columns:1fr;

    }

}
/*======================================================
ARTICLE
======================================================*/

.article-page{

    width:min(1200px,92%);
    
    margin:80px auto;
    
    }
    
    .article-container{
    
    background:white;
    
    padding:60px;
    
    border-radius:25px;
    
    box-shadow:var(--shadow);
    
    }
    
    #articleCategorie{
    
    display:inline-block;
    
    background:#EDF3FF;
    
    color:var(--primary);
    
    padding:8px 18px;
    
    border-radius:30px;
    
    font-weight:bold;
    
    margin-bottom:25px;
    
    }
    
    #articleTitre{
    
    font-size:48px;
    
    color:var(--primary);
    
    margin:20px 0;
    
    }
    
    #articleInfos{
    
    color:#888;
    
    margin-bottom:30px;
    
    }
    
    #articleImage{
    
    width:100%;
    
    border-radius:20px;
    
    margin-bottom:40px;
    
    }
    
    #articleContenu{
    
    font-size:18px;
    
    line-height:2;
    
    }
    /*======================================================
PAGE BIBLIOTHEQUE
======================================================*/

.biblio-toolbar{

    display:flex;
    
    justify-content:space-between;
    
    gap:20px;
    
    margin-bottom:50px;
    
    flex-wrap:wrap;
    
    }
    
    .biblio-toolbar input{
    
    flex:1;
    
    padding:16px;
    
    border:1px solid #DDD;
    
    border-radius:12px;
    
    font-size:16px;
    
    }
    
    .biblio-toolbar select{
    
    padding:16px;
    
    border:1px solid #DDD;
    
    border-radius:12px;
    
    min-width:270px;
    
    }
    
    .library-list{
    
    display:flex;
    
    flex-direction:column;
    
    gap:30px;
    
    }
    /*======================================================
DEPLIANTS
======================================================*/

.documents-toolbar{

    display:flex;
    
    justify-content:space-between;
    
    gap:20px;
    
    margin-bottom:50px;
    
    flex-wrap:wrap;
    
    }
    
    .documents-toolbar input{
    
    flex:1;
    
    padding:16px;
    
    border:1px solid #DDD;
    
    border-radius:12px;
    
    font-size:16px;
    
    }
    
    .documents-toolbar select{
    
    padding:16px;
    
    border-radius:12px;
    
    border:1px solid #DDD;
    
    min-width:280px;
    
    }
    
    .document-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    
    gap:35px;
    
    }
    /*======================================================
CARTE DOCUMENT
======================================================*/

.document-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.document-card:hover{

    transform:translateY(-10px);

}

.document-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.document-content{

    padding:28px;

}

.document-category{

    display:inline-block;

    background:#EDF3FF;

    color:var(--primary);

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    margin-bottom:18px;

}

.document-content h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:26px;

}

.document-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.document-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:28px;

    color:#777;

    font-size:14px;

}

.document-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.document-actions{

    display:flex;

    gap:15px;

}

.btn-document{

    flex:1;

    text-align:center;

    padding:13px;

    background:var(--primary);

    color:white;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-document:hover{

    background:var(--gold);

    color:#111;

}

.btn-document.secondary{

    background:#EDF3FF;

    color:var(--primary);

}

.btn-document.secondary:hover{

    background:var(--gold);

    color:#111;

}
.btn-outline{

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

    color:#FFF;

    border:2px solid rgba(255,255,255,.45);

    backdrop-filter:blur(15px);

    margin-left:18px;

}

.btn-outline:hover{

    background:#FFF;

    color:var(--primary);

    border-color:#FFF;

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

}
/*======================================================
FORMATS QRDC
======================================================*/

.format-grid{

    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:40px;
    
    margin-top:50px;
    
    }
    
    .format-card{
    
    background:white;
    
    padding:45px;
    
    border-radius:24px;
    
    box-shadow:var(--shadow);
    
    transition:.35s;
    
    }
    
    .format-card:hover{
    
    transform:translateY(-10px);
    
    }
    
    .format-card i{
    
    font-size:60px;
    
    color:var(--gold);
    
    margin-bottom:25px;
    
    }
    
    .format-card h3{
    
    color:var(--primary);
    
    margin-bottom:20px;
    
    }
    
    .format-card p{
    
    margin-bottom:25px;
    
    line-height:1.8;
    
    }
    
    .format-card ul{
    
    padding-left:20px;
    
    margin-bottom:30px;
    
    }
    
    .format-card li{
    
    margin:12px 0;
    
    }
    
    @media(max-width:900px){
    
    .format-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }
    .catalog-info{

        display:flex;
    
        justify-content:space-between;
    
        align-items:center;
    
        margin-bottom:30px;
    
        padding:15px 20px;
    
        background:#EDF3FF;
    
        border-left:5px solid var(--gold);
    
        border-radius:10px;
    
        color:var(--primary);
    
        font-weight:600;
    
    }
    
    @media(max-width:700px){
    
        .catalog-info{
    
            flex-direction:column;
    
            align-items:flex-start;
    
            gap:8px;
    
        }
    
    }
    /*======================================================
CAPVID
======================================================*/

.video-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

}

.video-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-10px);

}

.video-thumbnail{

    height:220px;

    background:#0B2E63;

    display:flex;

    justify-content:center;

    align-items:center;

}

.video-card iframe{

    width:100%;

    height:240px;

    border:none;

}

.video-content{

    padding:28px;

}

.video-content h3{

    color:var(--primary);

    margin-bottom:15px;

}

.video-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;

}

.video-meta{

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:14px;

}
/*======================================================
LECTEUR CAPVID
======================================================*/

.capvid-player{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    display:block;

    border-radius:20px 20px 0 0;

    background:#000;

}
/*======================================================
RJJD
======================================================*/

.journal-hero{

    display:grid;
    
    grid-template-columns:320px 1fr;
    
    gap:45px;
    
    align-items:center;
    
    background:white;
    
    padding:45px;
    
    border-radius:24px;
    
    box-shadow:var(--shadow);
    
    margin-top:45px;
    
    }
    
    .journal-hero img{
    
    width:100%;
    
    border-radius:15px;
    
    box-shadow:var(--shadow);
    
    }
    
    @media(max-width:900px){
    
    .journal-hero{
    
    grid-template-columns:1fr;
    
    }
    
    }
    /*======================================================
COMITE EDITORIAL
======================================================*/

.editorial-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:45px;

}

.editor-card{

    background:white;

    padding:35px;

    text-align:center;

    border-radius:22px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.editor-card:hover{

    transform:translateY(-8px);

}

.editor-card i{

    font-size:48px;

    color:var(--gold);

    margin-bottom:22px;

}

.editor-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.editor-card p{

    color:#666;

    line-height:1.8;

}
.journal-table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.journal-table th{

    width:260px;

    background:var(--primary);

    color:white;

    padding:18px;

    text-align:left;

}

.journal-table td{

    padding:18px;

    border-bottom:1px solid #EEE;

}
/*======================================================
NAVIGATION RJJD
======================================================*/

.rjjd-nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin:40px auto 70px;

    width:min(1200px,95%);

}

.rjjd-nav a{

    padding:14px 24px;

    border-radius:50px;

    background:white;

    color:var(--primary);

    font-weight:600;

    box-shadow:var(--shadow);

    transition:.3s;

}

.rjjd-nav a:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-4px);

}
/*======================================================
ARTICLES RJJD
======================================================*/

.articles-list{

    display:flex;
    
    flex-direction:column;
    
    gap:20px;
    
    }
    
    .article-card{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    padding:30px;
    
    background:white;
    
    border-radius:18px;
    
    box-shadow:var(--shadow);
    
    transition:.3s;
    
    }
    
    .article-card:hover{
    
    transform:translateX(8px);
    
    }
    
    .article-info h3{
    
    margin:15px 0;
    
    color:var(--primary);
    
    }
    
    .article-info p{
    
    font-weight:600;
    
    margin-bottom:10px;
    
    }
    
    .article-info small{
    
    color:#888;
    
    }
    
    @media(max-width:768px){
    
    .article-card{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    gap:20px;
    
    }
    
    }
    /*======================================================
AUTEURS RJJD
======================================================*/

.team-card p{

    margin:18px 0;

    color:#666;

    line-height:1.8;

}
/*======================================================
SOUMISSION RJJD
======================================================*/

.submission-form{

    max-width:1200px;

    margin:auto;

}

.form-section{

    background:#FFF;

    padding:40px;

    margin-bottom:35px;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.form-section h3{

    color:var(--primary);

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.5rem;

}

.form-grid{

    display:grid;

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

    gap:25px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-weight:600;

    margin-bottom:8px;

    color:#222;

}

.form-group input,

.form-group select,

.form-group textarea{

    padding:15px;

    border:1px solid #DDD;

    border-radius:12px;

    font-size:15px;

    transition:.30s;

    font-family:inherit;

}

.form-group textarea{

    resize:vertical;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(8,72,145,.15);

    outline:none;

}

.full-width{

    grid-column:1/-1;

}

.form-group small{

    margin-top:8px;

    color:#888;

    font-size:13px;

}
.checkbox-group{

    margin-bottom:18px;

}

.checkbox-group label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    cursor:pointer;

    line-height:1.7;

}

.checkbox-group input{

    margin-top:5px;

}
.submission-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}

.submission-summary div{

    background:#F8F9FC;

    padding:20px;

    border-radius:15px;

    border-left:5px solid var(--gold);

}

.submission-summary strong{

    display:block;

    margin-bottom:10px;

    color:var(--primary);

}
.submission-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:50px;

}

.secondary-btn{

    background:#EEE;

    color:#333;

}

.secondary-btn:hover{

    background:#DDD;

}
.submission-message{

    margin-top:35px;

    padding:25px;

    border-radius:15px;

    text-align:center;

    font-weight:bold;

    display:none;

}

.submission-message.success{

    background:#E8F8EC;

    color:#1F7A39;

    border:1px solid #8ED7A8;

}

.submission-message.error{

    background:#FCECEC;

    color:#B01E1E;

    border:1px solid #F2A7A7;

}
.submission-number{

    margin-bottom:20px;

}

.submission-number input{

    background:#F5F7FA;

    font-weight:bold;

    letter-spacing:2px;

}

.submission-status{

    margin-top:15px;

}

.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:25px;

    font-weight:600;

}

.status.waiting{

    background:#FFF4D7;

    color:#996C00;

}

.status.success{

    background:#E8F8EC;

    color:#19753A;

}

.status.error{

    background:#FDECEC;

    color:#B11818;

}
@media(max-width:900px){

    .form-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .form-section{
    
    padding:25px;
    
    }
    
    .submission-actions{
    
    flex-direction:column;
    
    }
    
    .submission-actions .btn{
    
    width:100%;
    
    }
    
    }
    /*======================================================
BARRE DE PROGRESSION
======================================================*/

.submission-progress{

    background:white;
    
    padding:25px;
    
    border-radius:18px;
    
    box-shadow:var(--shadow);
    
    margin-bottom:35px;
    
    }
    
    .submission-progress-header{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:15px;
    
    font-weight:600;
    
    }
    
    .progressBar{

        position:relative;
    
        height:10px;
    
        border-radius:999px;
    
        overflow:hidden;
    
        background:#dce6f5;
    
    }
    
    #progressBar{
    
    height:100%;
    
    width:0%;
    
    background:linear-gradient(90deg,var(--primary),var(--gold));
    
    transition:.45s;
    
    border-radius:30px;
    
    }
    /*======================================================
ZONE DE DEPOT
======================================================*/

.upload-zone{

    padding:45px;
    
    border:3px dashed #C9D4E4;
    
    border-radius:22px;
    
    background:#FAFBFD;
    
    text-align:center;
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    .upload-zone:hover{
    
    border-color:var(--primary);
    
    background:#F2F7FF;
    
    }
    
    .upload-zone.drag{
    
    border-color:var(--gold);
    
    background:#FFF8E8;
    
    }
    
    .upload-zone i{
    
    font-size:60px;
    
    color:var(--primary);
    
    margin-bottom:20px;
    
    }
    
    .upload-zone h4{
    
    margin-bottom:12px;
    
    color:var(--primary);
    
    }
    
    .upload-zone p{
    
    margin-bottom:10px;
    
    }
    
    .upload-zone small{
    
    color:#777;
    
    }
    .file-preview{

        margin-top:25px;
        
        padding:20px;
        
        background:white;
        
        border-radius:15px;
        
        display:flex;
        
        justify-content:space-between;
        
        align-items:center;
        
        box-shadow:var(--shadow);
        
        }
        
        .file-info{
        
        display:flex;
        
        align-items:center;
        
        gap:20px;
        
        }
        
        .file-info i{
        
        font-size:34px;
        
        color:var(--primary);
        
        }
        
        .file-size{
        
        color:#777;
        
        font-size:14px;
        
        }
        /*======================================================
TIMELINE
======================================================*/

.timeline{

    display:flex;
    
    flex-direction:column;
    
    gap:30px;
    
    margin-top:40px;
    
    }
    
    .timeline-item{
    
    display:flex;
    
    align-items:flex-start;
    
    gap:25px;
    
    padding:25px;
    
    background:white;
    
    border-radius:18px;
    
    box-shadow:var(--shadow);
    
    }
    
    .timeline-icon{
    
    width:70px;
    
    height:70px;
    
    border-radius:50%;
    
    background:var(--primary);
    
    color:white;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:30px;
    
    flex-shrink:0;
    
    }
    
    .timeline-item h3{
    
    margin-bottom:10px;
    
    color:var(--primary);
    
    }
    /*======================================================
NAVIGATION RJJD
======================================================*/

.rjjd-navigation{

    display:flex;
    
    justify-content:center;
    
    flex-wrap:wrap;
    
    gap:12px;
    
    margin:40px auto;
    
    max-width:1400px;
    
    padding:0 20px;
    
    }
    
    .rjjd-navigation a{
    
    padding:12px 20px;
    
    background:white;
    
    border-radius:40px;
    
    color:var(--primary);
    
    font-weight:600;
    
    text-decoration:none;
    
    transition:.30s;
    
    box-shadow:var(--shadow);
    
    }
    
    .rjjd-navigation a:hover,
    
    .rjjd-navigation a.active{
    
    background:var(--primary);
    
    color:white;
    
    transform:translateY(-3px);
    
    }
    /*======================================================
MBOMI
======================================================*/

/*======================================================
INTRO MBOMI
======================================================*/

.mbomi-intro{

    width:min(1200px,95%);
    
    margin:70px auto;
    
    }
    
    .intro-card{
    
    background:white;
    
    border-radius:28px;
    
    padding:45px;
    
    box-shadow:var(--shadow);
    
    transition:.35s;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .intro-card:hover{
    
    transform:translateY(-6px);
    
    }
    
    .intro-card::before{
    
    content:"";
    
    position:absolute;
    
    top:0;
    
    left:0;
    
    width:8px;
    
    height:100%;
    
    background:linear-gradient(var(--gold),#F8D04B);
    
    }
    
    .intro-header{
    
    display:flex;
    
    align-items:center;
    
    gap:25px;
    
    margin-bottom:30px;
    
    }
    
    .intro-icon{
    
    width:85px;
    
    height:85px;
    
    border-radius:22px;
    
    background:linear-gradient(135deg,var(--primary),#2F73D9);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:34px;
    
    color:white;
    
    flex-shrink:0;
    
    }
    
    .intro-badge{
    
    display:inline-block;
    
    background:#EEF5FF;
    
    color:var(--primary);
    
    padding:8px 18px;
    
    border-radius:30px;
    
    font-size:13px;
    
    font-weight:600;
    
    margin-bottom:12px;
    
    }
    
    .intro-header h2{
    
    margin:0;
    
    font-size:2rem;
    
    color:var(--primary);
    
    }
    
    .intro-body{
    
    font-size:18px;
    
    line-height:2;
    
    color:#444;
    
    margin-bottom:35px;
    
    }
    
    .intro-body strong{
    
    color:var(--primary);
    
    }
    
    .intro-features{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    
    gap:18px;
    
    }
    
    .feature{
    
    display:flex;
    
    align-items:center;
    
    gap:15px;
    
    padding:18px;
    
    background:#F8FAFD;
    
    border-radius:16px;
    
    transition:.25s;
    
    border-left:4px solid var(--gold);
    
    }
    
    .feature:hover{
    
    background:#EEF5FF;
    
    transform:translateY(-3px);
    
    }
    
    .feature i{
    
    font-size:24px;
    
    color:var(--gold);
    
    width:35px;
    
    text-align:center;
    
    }
    
    .feature span{
    
    font-weight:600;
    
    color:#333;
    
    }
    
    @media(max-width:768px){
    
    .intro-header{
    
    flex-direction:column;
    
    text-align:center;
    
    }
    
    .intro-body{
    
    text-align:justify;
    
    }
    
    }
    
    .today-highlight{
    
    width:min(1200px,95%);
    
    margin:50px auto;
    
    }
    
    .today-card{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    gap:40px;
    
    background:linear-gradient(135deg,var(--primary),#1E5EBE);
    
    color:white;
    
    padding:45px;
    
    border-radius:25px;
    
    box-shadow:var(--shadow);
    
    }
    
    .today-badge{
    
    display:inline-block;
    
    padding:8px 18px;
    
    background:rgba(255,255,255,.20);
    
    border-radius:30px;
    
    margin-bottom:20px;
    
    font-weight:600;
    
    }
    
    .today-right i{
    
    font-size:110px;
    
    opacity:.18;
    
    }
    
    .calendar-section{
    
    width:min(1200px,95%);
    
    margin:70px auto;
    
    }
    
    .calendar-header{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:30px;
    
    }
    
    .calendar-header button{
    
    width:50px;
    
    height:50px;
    
    border:none;
    
    border-radius:50%;
    
    background:var(--primary);
    
    color:white;
    
    cursor:pointer;
    
    font-size:18px;
    
    transition:.30s;
    
    }
    
    .calendar-header button:hover{
    
    transform:scale(1.08);
    
    }
    
    #calendar{
    
    display:grid;
    
    grid-template-columns:repeat(7,1fr);
    
    gap:12px;
    
    }
    
    .calendar-day-name{
    
    background:#ECECEC;
    
    padding:15px;
    
    font-weight:bold;
    
    text-align:center;
    
    border-radius:12px;
    
    }
    
    .calendar-day{
    
    background:white;
    
    border-radius:16px;
    
    min-height:95px;
    
    padding:12px;
    
    cursor:pointer;
    
    transition:.30s;
    
    box-shadow:var(--shadow);
    
    position:relative;
    
    }
    
    .calendar-day:hover{
    
    transform:translateY(-5px);
    
    }
    
    .calendar-day.empty{
    
    visibility:hidden;
    
    }
    
    .calendar-day.today{
    
    border:3px solid var(--gold);
    
    }
    
    .calendar-day.event{
    
    background:#FFF6DD;
    
    }
    
    .calendar-day.event::after{
    
    content:"🎂";
    
    position:absolute;
    
    top:8px;
    
    right:8px;
    
    font-size:18px;
    
    }
    
    .calendar-day .number{
    
    font-weight:bold;
    
    font-size:20px;
    
    margin-bottom:12px;
    
    }
    
    .calendar-day .count{
    
    font-size:13px;
    
    color:#666;
    
    }
    
    @media(max-width:900px){
    
    #calendar{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .today-card{
    
    flex-direction:column;
    
    text-align:center;
    
    }
    
    .today-right{
    
    display:none;
    
    }
    
    }
    /*======================================================
FICHE MBOMI
======================================================*/

.mbomi-sheet{

    width:min(1200px,95%);
    
    margin:auto;
    
    }
    
    .identity-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    
    gap:25px;
    
    }
    
    .identity-card{
    
    background:white;
    
    padding:30px;
    
    border-radius:20px;
    
    box-shadow:var(--shadow);
    
    text-align:center;
    
    }
    
    .identity-card h4{
    
    margin-bottom:15px;
    
    color:var(--primary);
    
    }
    
    .identity-card p{
    
    font-size:18px;
    
    font-weight:600;
    
    }
    
    .content-card{
    
    background:white;
    
    padding:40px;
    
    border-radius:20px;
    
    box-shadow:var(--shadow);
    
    line-height:1.9;
    
    }
    
    #lawUpdates{
    
    display:flex;
    
    flex-direction:column;
    
    gap:18px;
    
    }
    
/* ======================================================
   SECTION TEXTES MODIFICATIFS (TITRE + CARTES)
====================================================== */

/* Conteneur englobant ou ID de la section */
#lawUpdates {
    max-width: 850px;       /* Même largeur maximale */
    margin: 40px auto;      /* Centré horizontalement */
    padding: 0 20px;        /* Marge interne de sécurité sur mobile */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Alignement du titre de la section */
#lawUpdates h2, 
#lawUpdates h3,
.update-section-title {
    text-align: left;       /* Aligné sur le bord gauche de la carte */
    margin-bottom: 10px;
    color: var(--primary);  /* Ou votre couleur de titre principal */
    font-size: 1.5rem;
    font-weight: 700;
}

/* Carte de chaque texte modificatif */
.update-item {
    background: #ffffff;
    padding: 24px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(11, 46, 99, 0.06);
    border: 1px solid rgba(11, 46, 99, 0.08);
    border-left: 5px solid var(--gold);
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;             /* S'assure qu'elle occupe 100% du conteneur de 850px */
    box-sizing: border-box;
}

.update-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(11, 46, 99, 0.12);
}

/* Subtil accent en fond d'écran pour l'immersion */
.update-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05));
    pointer-events: none;
}
    
    .article-navigation{
    
    display:flex;
    
    justify-content:space-between;
    
    flex-wrap:wrap;
    
    gap:20px;
    
    margin-top:40px;
    
    }
    /*======================================================
ANIMATIONS MBOMI
======================================================*/

.calendar-day{

    animation:fadeCalendar .45s ease;
    
    }
    
    .calendar-day.event{
    
    animation:eventPulse 2.5s infinite;
    
    }
    
    @keyframes fadeCalendar{
    
    from{
    
    opacity:0;
    
    transform:translateY(20px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }
    
    @keyframes eventPulse{
    
    0%{
    
    box-shadow:0 0 0 0 rgba(214,168,0,.45);
    
    }
    
    70%{
    
    box-shadow:0 0 0 14px rgba(214,168,0,0);
    
    }
    
    100%{
    
    box-shadow:0 0 0 0 rgba(214,168,0,0);
    
    }
    
    }
    #calendar{

        transition:.35s;
        
        }
        /*======================================================
AGE MBOMI
======================================================*/

.age-box{

    text-align:center;
    
    }
    
    .age-years{
    
    font-size:52px;
    
    font-weight:bold;
    
    color:var(--primary);
    
    line-height:1;
    
    }
    
    .age-label{
    
    font-size:18px;
    
    font-weight:600;
    
    margin-top:8px;
    
    color:var(--gold);
    
    }
    
    .age-days{
    
    margin-top:15px;
    
    font-size:14px;
    
    color:#666;
    
    }
    /*======================================================
BANNIERE ANNIVERSAIRE
======================================================*/

.birthday-banner{

    display:flex;
    
    align-items:center;
    
    gap:40px;
    
    background:linear-gradient(135deg,#0D47A1,#1565C0);
    
    color:white;
    
    padding:45px;
    
    border-radius:25px;
    
    margin:50px auto;
    
    width:min(1200px,95%);
    
    box-shadow:var(--shadow);
    
    overflow:hidden;
    
    position:relative;
    
    }
    
    .birthday-banner::before{
    
    content:"🎉";
    
    position:absolute;
    
    right:40px;
    
    top:20px;
    
    font-size:120px;
    
    opacity:.08;
    
    }
    
    .birthday-icon{
    
    font-size:80px;
    
    animation:birthdayFloat 3s ease-in-out infinite;
    
    }
    
    .birthday-content{
    
    flex:1;
    
    }
    
    .birthday-content h2{
    
    font-size:2rem;
    
    line-height:1.5;
    
    margin-bottom:20px;
    
    }
    
    .birthday-content strong{
    
    color:#FFD54F;
    
    }
    
    .birthday-age{
    
    display:inline-block;
    
    font-size:60px;
    
    font-weight:bold;
    
    margin:0 10px;
    
    color:#FFD54F;
    
    }
    
    #birthdayText{
    
    font-size:18px;
    
    margin-bottom:15px;
    
    }
    
    #birthdayDays{
    
    font-size:16px;
    
    opacity:.90;
    
    }
    
    @keyframes birthdayFloat{
    
    0%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-12px);
    
    }
    
    100%{
    
    transform:translateY(0);
    
    }
    
    }
    
    @media(max-width:900px){
    
    .birthday-banner{
    
    flex-direction:column;
    
    text-align:center;
    
    }
    
    .birthday-content h2{
    
    font-size:1.5rem;
    
    }
    
    .birthday-age{
    
    display:block;
    
    font-size:48px;
    
    margin:15px 0;
    
    }
    
    }
    /*======================================================
RESUME VULGARISE
======================================================*/

.summary-card{

    background:white;
    
    border-radius:24px;
    
    padding:35px;
    
    box-shadow:var(--shadow);
    
    max-width:1050px;
    
    margin:auto;
    
    transition:.35s;
    
    }
    
    .summary-card:hover{
    
    transform:translateY(-5px);
    
    }
    
    .summary-header{
    
    display:flex;
    
    align-items:center;
    
    gap:20px;
    
    margin-bottom:30px;
    
    padding-bottom:20px;
    
    border-bottom:1px solid #ECECEC;
    
    }
    
    .summary-icon{
    
    width:70px;
    
    height:70px;
    
    border-radius:20px;
    
    background:linear-gradient(135deg,var(--primary),#2F73D9);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:30px;
    
    color:white;
    
    flex-shrink:0;
    
    }
    
    .summary-header h3{
    
    margin-bottom:8px;
    
    color:var(--primary);
    
    }
    
    .summary-header p{
    
    margin:0;
    
    color:#777;
    
    font-size:15px;
    
    }
    
    .summary-content{
    
    display:flex;
    
    flex-direction:column;
    
    gap:18px;
    
    }
    
    .summary-item{
    
    display:flex;
    
    align-items:flex-start;
    
    gap:15px;
    
    padding:18px 20px;
    
    background:#F8FAFD;
    
    border-left:5px solid var(--gold);
    
    border-radius:15px;
    
    transition:.25s;
    
    }
    
    .summary-item:hover{
    
    background:#EEF5FF;
    
    transform:translateX(6px);
    
    }
    
    .summary-item i{
    
    margin-top:3px;
    
    font-size:18px;
    
    color:#2E7D32;
    
    flex-shrink:0;
    
    }
    
    .summary-item span{
    
    line-height:1.8;
    
    font-size:16px;
    
    color:#333;
    
    }
    /*======================================================
TEXTE LEGISLATIF
======================================================*/

/*======================================================
TEXTE LEGISLATIF CELEBRE
======================================================*/

.official-law-card{

    background:white;
    
    border-radius:30px;
    
    padding:45px;
    
    box-shadow:var(--shadow);
    
    max-width:1100px;
    
    margin:auto;
    
    transition:.35s;
    
    overflow:hidden;
    
    position:relative;
    
    }
    
    .official-law-card:hover{
    
    transform:translateY(-6px);
    
    }
    
    .official-law-card::before{
    
    content:"";
    
    position:absolute;
    
    top:0;
    
    left:0;
    
    height:100%;
    
    width:8px;
    
    background:linear-gradient(var(--gold),#F6C343);
    
    }
    
    .official-law-top{
    
    display:flex;
    
    align-items:center;
    
    gap:30px;
    
    margin-bottom:35px;
    
    }
    
    .official-law-icon{
    
    width:100px;
    
    height:100px;
    
    border-radius:25px;
    
    background:linear-gradient(135deg,var(--primary),#2F73D9);
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:42px;
    
    color:white;
    
    flex-shrink:0;
    
    }
    
    .official-law-badge{
    
    display:inline-block;
    
    padding:8px 18px;
    
    background:#EEF5FF;
    
    border-radius:30px;
    
    font-size:13px;
    
    font-weight:600;
    
    color:var(--primary);
    
    margin-bottom:15px;
    
    }
    
    .official-law-text h3{
    
    font-size:2rem;
    
    margin-bottom:12px;
    
    color:var(--primary);
    
    }
    
    .official-law-text p{
    
    line-height:1.8;
    
    font-size:17px;
    
    color:#555;
    
    }
    
    .official-law-buttons{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    
    gap:20px;
    
    margin-top:20px;
    
    }
    
    .official-btn{
    
    display:flex;
    
    align-items:center;
    
    gap:20px;
    
    padding:22px;
    
    border-radius:18px;
    
    text-decoration:none;
    
    transition:.3s;
    
    font-weight:600;
    
    }
    
    .official-btn i{
    
    font-size:30px;
    
    }
    
    .official-btn span{
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .official-btn small{
    
    font-weight:400;
    
    opacity:.8;
    
    margin-top:5px;
    
    }
    
    .read-btn{
    
    background:linear-gradient(135deg,#0D47A1,#2962FF);
    
    color:white;
    
    }
    
    .read-btn:hover{
    
    transform:translateY(-5px);
    
    }
    
    .pdf-btn{
    
    background:#FFF4E5;
    
    color:#9C4A00;
    
    }
    
    .pdf-btn:hover{
    
    background:#FFE3BF;
    
    transform:translateY(-5px);
    
    }
    
    .official-law-features{
    
    margin-top:35px;
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    
    gap:18px;
    
    }
    
    .official-law-features div{
    
    background:#F8FAFD;
    
    padding:16px;
    
    border-radius:15px;
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    font-size:15px;
    
    transition:.25s;
    
    }
    
    .official-law-features div:hover{
    
    background:#EEF5FF;
    
    }
    
    .official-law-features i{
    
    color:var(--gold);
    
    font-size:20px;
    
    }
    /*======================================================
BIBLIOTHÈQUE JURIDIQUE
======================================================*/

.hero-small{

    padding:70px 60px;
    
    background:linear-gradient(135deg,#0D47A1,#2962D9);
    
    color:white;
    
    text-align:center;
    
    }
    
    .hero-content{

        width:100%;
    
        max-width:none;
    
        z-index:2;
    
    }
    
    .hero-small h1{
    
    font-size:3rem;
    
    margin-bottom:20px;
    
    }
    
    .hero-small p{
    
    font-size:1.2rem;
    
    opacity:.95;
    
    }
    
    .library-search{
    
    padding:35px 0;
    
    background:white;
    
    }
    
    .search-box{

        width:min(900px,95%);
        
        margin:-35px auto 45px;
        
        height:68px;
        
        padding:0 28px;
        
        display:flex;
        
        align-items:center;
        
        background:white;
        
        border-radius:50px;
        
        box-shadow:0 20px 45px rgba(0,0,0,.08);
        
        border:none;
        
        }
        
        .search-box input{
        
        flex:1;
        
        height:100%;
        
        font-size:18px;
        
        }
    
    .search-box i{
    
    margin-right:18px;
    
    font-size:20px;
    
    color:var(--gold);
    
    }
    
    .search-box input{
    
    border:none;
    
    outline:none;
    
    width:100%;
    
    font-size:18px;
    
    }
    
    .layout-grid{
    
    display:grid;
    
    grid-template-columns:280px 1fr;
    
    gap:35px;
    
    padding:50px 0;
    
    }
    
    .library-sidebar{
    
    background:white;
    
    border-radius:20px;
    
    padding:25px;
    
    box-shadow:var(--shadow);
    
    height:fit-content;
    
    }
    
    .library-toolbar{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:25px;
    
    }
    
    .library-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    
    gap:25px;
    
    }
    
    .library-card{

        background:white;
        
        padding:30px;
        
        border-radius:22px;
        
        box-shadow:var(--shadow);
        
        border-top:6px solid var(--gold);
        
        transition:.35s;
        
        display:grid;
        
        gap:16px;
        
        align-content:start;
        
        position:relative;
        
        overflow:hidden;
        min-height:unset;

height:100%;
.library-card p{

    margin-bottom:8px;
    
    }
    
    .library-card small{
    
    margin-bottom:20px;
    
    display:block;
    
    color:#888;
    
    }
        
        }
        .library-card::after{

            content:"";
            
            position:absolute;
            
            top:0;
            
            right:-50px;
            
            width:120px;
            
            height:120px;
            
            background:rgba(13,71,161,.05);
            
            border-radius:50%;
            
            transition:.35s;
            
            }
            
            .library-card:hover::after{
            
            transform:scale(1.3);
            
            }
    
    .library-card:hover{
    
    transform:translateY(-8px);
    
    }
    
    .library-icon{

        width:72px;
        
        height:72px;
        
        border-radius:18px;
        
        display:flex;
        
        align-items:center;
        
        justify-content:center;
        
        background:linear-gradient(135deg,#0D47A1,#2962D9);
        
        color:white;
        
        font-size:30px;
        
        margin-bottom:10px;
        
        transition:.3s;
        
        }
        .library-card:hover .library-icon{

            transform:rotate(-8deg) scale(1.08);
            
            }
    
    .library-card h3{
    
    margin-bottom:12px;
    
    color:#0D47A1;
    
    font-size:20px;
    
    }
    
    .library-card p{
    
    margin-bottom:10px;
    
    color:#666;
    
    }
    
    .library-card small{
    
    margin-bottom:25px;
    
    display:block;
    
    color:#999;
    
    }
    
    .library-card .btn{

        padding:14px;
        
        font-size:15px;
        
        border-radius:12px;
        
        }
        .category-btn{

            padding:15px;
            
            border-radius:12px;
            
            margin-bottom:12px;
            
            transition:.25s;
            
            font-weight:600;
            
            }
            
            .category-btn:hover{
            
            padding-left:20px;
            
            background:#EDF3FF;
            
            }
        
        .category-btn.active{
        
        background:#0D47A1;
        
        color:white;
        
        }
        .library-card .btn{

            display:flex;
            
            justify-content:center;
            
            align-items:center;
            
            gap:10px;
            
            padding:15px;
            
            border-radius:12px;
            
            }
            .library-card .btn i{

                font-size:18px;
                
                margin:0;
                
                }
            /*======================================================
STATISTIQUES BIBLIOTHÈQUE
======================================================*/

.library-stats{

    margin-top:50px;
    
    margin-bottom:20px;
    
    }
    
    .stats-grid{

        display:grid;
        
        grid-template-columns:repeat(4,1fr);
        
        gap:25px;
        
        margin-bottom:50px;
        
        }
        
        @media(max-width:900px){
        
        .stats-grid{
        
        grid-template-columns:repeat(2,1fr);
        
        }
        
        }
        
        @media(max-width:600px){
        
        .stats-grid{
        
        grid-template-columns:1fr;
        
        }
        
        }
    
    .stat-card{
    
    background:white;
    
    padding:30px;
    
    border-radius:20px;
    
    text-align:center;
    
    box-shadow:var(--shadow);
    
    transition:.3s;
    
    }
    
    .stat-card:hover{
    
    transform:translateY(-8px);
    
    }
    
    .stat-card i{
    
    font-size:34px;
    
    margin-bottom:18px;
    
    color:var(--gold);
    
    }
    
    .stat-card h3{
    
    font-size:2rem;
    
    color:var(--primary);
    
    margin-bottom:8px;
    
    }
    
    .stat-card p{
    
    color:#666;
    
    }
    .library-card .btn{

        display:flex;
        
        align-items:center;
        
        justify-content:center;
        
        gap:10px;
        
        margin-top:auto;
        
        padding:15px;
        
        font-weight:600;
        
        border-radius:14px;
        
        transition:.3s;
        
        }
        
        .library-card .btn:hover{
        
        transform:translateY(-2px);
        
        }
        /*======================================================
ACCUEIL BIBLIOTHÈQUE
======================================================*/

.library-home{

    padding:80px 0;
    
    }
    
    .library-home-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    
    gap:35px;
    
    }
    
    .library-home-card{
    
    position:relative;
    
    background:white;
    
    padding:38px;
    
    border-radius:28px;
    
    overflow:hidden;
    
    text-decoration:none;
    
    box-shadow:var(--shadow);
    
    border-top:6px solid var(--gold);
    
    transition:.35s;
    
    color:inherit;
    
    }
    
    .library-home-card:hover{
    
    transform:translateY(-10px);
    
    }
    
    .library-home-circle{
    
    position:absolute;
    
    width:120px;
    
    height:120px;
    
    right:-45px;
    
    top:-45px;
    
    background:#EEF2F8;
    
    border-radius:50%;
    
    transition:.4s;
    
    }
    
    .library-home-card:hover .library-home-circle{
    
    transform:scale(1.25) rotate(20deg);
    
    }
    
    .library-home-icon{
    
    width:72px;
    
    height:72px;
    
    border-radius:18px;
    
    background:linear-gradient(135deg,#0D47A1,#2962D9);
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:34px;
    
    color:var(--gold);
    
    margin-bottom:30px;
    
    transition:.35s;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .library-home-card:hover .library-home-icon{
    
    transform:rotate(-12deg) scale(1.1);
    
    }
    
    .library-home-card h2{
    
    font-size:2rem;
    
    margin-bottom:20px;
    
    color:#0D47A1;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .library-home-card p{
    
    line-height:1.9;
    
    font-size:17px;
    
    color:#555;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .library-home-footer{
    
    margin-top:35px;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    font-weight:700;
    
    color:#0D47A1;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .library-home-footer span:last-child{
    
    display:flex;
    
    align-items:center;
    
    gap:10px;
    
    transition:.3s;
    
    }
    
    .library-home-card:hover .library-home-footer span:last-child{
    
    transform:translateX(8px);
    
    }
    
    .badge{
    
    padding:8px 15px;
    
    border-radius:50px;
    
    background:#FFF5D9;
    
    color:#9C7300;
    
    font-size:13px;
    
    font-weight:700;
    
    }
    /*======================================================
HERO catalog
======================================================*/

.hero-catalog{

    background:linear-gradient(135deg,#0D47A1,#2962D9);
    
    padding:90px 0 110px;
    
    color:white;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .hero-catalog::before{
    
    content:"";
    
    position:absolute;
    
    width:450px;
    
    height:450px;
    
    right:-180px;
    
    top:-180px;
    
    border-radius:50%;
    
    background:rgba(255,255,255,.08);
    
    }
    
    .hero-catalog::after{
    
    content:"";
    
    position:absolute;
    
    width:260px;
    
    height:260px;
    
    left:-80px;
    
    bottom:-120px;
    
    border-radius:50%;
    
    background:rgba(255,255,255,.05);
    
    }
    
    .breadcrumb{
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    margin-bottom:45px;
    
    font-size:15px;
    
    }
    
    .breadcrumb a{
    
    color:white;
    
    text-decoration:none;
    
    opacity:.9;
    
    }
    
    .hero-catalog-content{
    
    display:flex;
    
    align-items:center;
    
    gap:35px;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .hero-catalog-icon{
    
    width:120px;
    
    height:120px;
    
    border-radius:30px;
    
    background:rgba(255,255,255,.15);
    
    backdrop-filter:blur(8px);
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:52px;
    
    color:var(--gold);
    
    transition:.35s;
    
    }
    
    .hero-catalog:hover .hero-catalog-icon{
    
    transform:rotate(-8deg) scale(1.08);
    
    }
    
    .hero-badge{
    
    display:inline-block;
    
    padding:8px 18px;
    
    background:rgba(255,255,255,.15);
    
    border-radius:40px;
    
    margin-bottom:20px;
    
    font-size:14px;
    
    font-weight:600;
    
    }
    
    .hero-catalog h1{
    
    font-size:3.3rem;
    
    margin-bottom:18px;
    
    }
    
    .hero-catalog p{
    
    font-size:1.2rem;
    
    max-width:720px;
    
    line-height:1.8;
    
    opacity:.95;
    
    }
    /*======================================================
TABLEAU DE BORD
======================================================*/

.library-dashboard{

    padding:45px 0;
    
    margin:0;
    
    position:relative;
    
    z-index:5;
    
    }    
    .dashboard-grid{

        display:grid;
        
        grid-template-columns:repeat(4,minmax(0,1fr));
        
        gap:25px;
        
        align-items:stretch;
        
        }
        
        @media(max-width:1100px){
        
        .dashboard-grid{
        
        grid-template-columns:repeat(2,1fr);
        
        }
        
        }
        
        @media(max-width:700px){
        
        .dashboard-grid{
        
        grid-template-columns:1fr;
        
        }
        
        }
    
    .dashboard-card{
    
    background:white;
    
    border-radius:22px;
    
    padding:35px;
    
    text-align:center;
    
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    
    transition:.35s;
    
    }
    
    .dashboard-card:hover{
    
    transform:translateY(-8px);
    
    }
    
    .dashboard-card i{
    
    font-size:34px;
    
    color:var(--gold);
    
    margin-bottom:18px;
    
    }
    
    .dashboard-card h2{
    
    font-size:2.3rem;
    
    color:var(--primary);
    
    margin-bottom:8px;
    
    }
    
    .dashboard-card p{
    
    color:#666;
    
    }
    /*======================================================
SIDEBAR
======================================================*/

.library-sidebar{

    background:white;
    
    border-radius:24px;
    
    padding:30px;
    
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    
    position:sticky;
    
    top:30px;
    
    height:fit-content;
    
    }
    
    .library-sidebar h3{
    
    margin-bottom:25px;
    
    color:#0D47A1;
    
    }
    
    .category-btn{
    
    width:100%;
    
    padding:15px 18px;
    
    margin-bottom:12px;
    
    border:none;
    
    background:#F5F8FD;
    
    border-radius:14px;
    
    text-align:left;
    
    font-weight:600;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    .category-btn:hover{
    
    padding-left:24px;
    
    background:#EAF2FF;
    
    }
    
    .category-btn.active{
    
    background:linear-gradient(135deg,#0D47A1,#2962D9);
    
    color:white;
    
    }
    /*======================================================
CATALOGUE
======================================================*/

.library-toolbar{

    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:35px;
    
    }
    
    .library-toolbar select{
    
    padding:12px 18px;
    
    border-radius:10px;
    
    border:1px solid #DDD;
    
    background:white;
    
    }
    
    .library-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    
    gap:30px;
    
    }
    
    .library-card{
    
    background:white;
    
    border-radius:24px;
    
    padding:30px;
    
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    
    position:relative;
    
    overflow:hidden;
    
    transition:.35s;
    
    border-top:6px solid var(--gold);
    
    }
    
    .library-card:hover{
    
    transform:translateY(-8px);
    
    }
    
    .library-card::after{
    
    content:"";
    
    position:absolute;
    
    right:-45px;
    
    top:-45px;
    
    width:100px;
    
    height:100px;
    
    background:#EDF3FB;
    
    border-radius:50%;
    
    transition:.35s;
    
    }
    
    .library-card:hover::after{
    
    transform:scale(1.3);
    
    }
    
    .library-icon{
    
    width:70px;
    
    height:70px;
    
    border-radius:18px;
    
    background:linear-gradient(135deg,#0D47A1,#2962D9);
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:30px;
    
    color:var(--gold);
    
    margin-bottom:20px;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .library-card h3{
    
    font-size:1.3rem;
    
    margin-bottom:15px;
    
    color:#0D47A1;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .library-card p{
    
    margin-bottom:8px;
    
    color:#666;
    
    }
    
    .library-card small{
    
    display:block;
    
    margin-bottom:22px;
    
    color:#888;
    
    }
    
    .library-card .btn{
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    gap:10px;
    
    padding:14px;
    
    border-radius:14px;
    
    margin-top:auto;
    
    }
    /*======================================================
RESPONSIVE
======================================================*/

@media(max-width:900px){

    .hero-catalog-content{
    
    flex-direction:column;
    
    text-align:center;
    
    }
    
    .layout-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .library-sidebar{
    
    position:relative;
    
    top:0;
    
    }
    
    .library-toolbar{
    
    flex-direction:column;
    
    gap:20px;
    
    align-items:flex-start;
    
    }
    
    }
    
    @media(max-width:700px){
    
    .hero-catalog h1{
    
    font-size:2.4rem;
    
    }
    
    .dashboard-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .library-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }
    .category-btn.active{

        background:linear-gradient(135deg,#0D47A1,#2962D9);
        
        color:white;
        
        transform:translateX(8px);
        
        box-shadow:0 8px 20px rgba(13,71,161,.25);
        
        }
        .category-btn:hover{

            transform:translateX(8px);
            
            }
            /*======================================================
METADONNÉES
======================================================*/

.library-meta{

    display:flex;
    
    flex-wrap:wrap;
    
    gap:10px;
    
    margin:12px 0;
    
    }
    
    .meta-type{
    
    background:#EEF5FF;
    
    color:#0D47A1;
    
    padding:6px 12px;
    
    border-radius:30px;
    
    font-size:13px;
    
    font-weight:600;
    
    }
    
    .meta-domain{
    
    background:#FFF7E4;
    
    color:#A96B00;
    
    padding:6px 12px;
    
    border-radius:30px;
    
    font-size:13px;
    
    }
    
    .library-bottom{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin:18px 0;
    
    }
    
    .status{
    
    padding:7px 12px;
    
    border-radius:30px;
    
    font-size:12px;
    
    font-weight:700;
    
    }
    
    .status.en-vigueur{
    
    background:#EAF8EC;
    
    color:#157347;
    
    }
    
    .status.modifié{
    
    background:#FFF3CD;
    
    color:#9A6700;
    
    }
    
    .status.abrogé{
    
    background:#FDEAEA;
    
    color:#B42318;
    
    }
    /*======================================================
PANNEAU D'APERÇU
======================================================*/

.preview-panel{

    position:fixed;
    
    top:0;
    
    right:-420px;
    
    width:400px;
    
    height:100vh;
    
    background:white;
    
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
    
    z-index:999;
    
    transition:.35s;
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .preview-panel.open{
    
    right:0;
    
    }
    
    .preview-header{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    padding:25px;
    
    background:linear-gradient(135deg,#0D47A1,#2962D9);
    
    color:white;
    
    }
    
    .preview-header button{
    
    border:none;
    
    background:none;
    
    color:white;
    
    font-size:24px;
    
    cursor:pointer;
    
    }
    
    .preview-content{
    
    padding:25px;
    
    overflow:auto;
    
    flex:1;
    
    }
    
    .preview-section{
    
    margin-bottom:25px;
    
    }
    
    .preview-section h4{
    
    margin-bottom:8px;
    
    color:#0D47A1;
    
    }
    /*======================================================
RECHERCHE
======================================================*/

.search-box{

    display:flex;
    
    align-items:center;
    
    width:100%;
    
    max-width:700px;
    
    margin:auto;
    
    background:#fff;
    
    border-radius:14px;
    
    overflow:hidden;
    
    border:1px solid #d9d9d9;
    
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    
    }
    
    .search-box input{
    
    flex:1;
    
    border:none;
    
    padding:16px 20px;
    
    font-size:15px;
    
    outline:none;
    
    background:transparent;
    
    }
    
    .search-box button{
    
    width:64px;
    
    border:none;
    
    cursor:pointer;
    
    background:#0D47A1;
    
    color:white;
    
    font-size:18px;
    
    transition:.25s;
    
    }
    
    .search-box button:hover{
    
    background:#1565C0;
    
    }
    /*======================================================
BADGE NOUVEAUTÉ
======================================================*/

.new-badge{

    display:inline-flex;
    
    padding:4px 12px;
    
    font-size:11px;
    
    font-weight:700;
    
    border-radius:20px;
    
    background:#E53935;
    
    color:#fff;
    
    width:max-content;
    
    margin:5px 0 10px;
    
    }
    /*======================================================
RÉFÉRENCES DOCUMENTAIRES
======================================================*/

.library-reference,
.library-author,
.library-infos{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#555;

margin:6px 0;

}

.library-reference i,
.library-author i,
.library-infos i{
    font-size:15px;

    width:18px;
    
    color:var(--gold);
    
    flex-shrink:0;
color:var(--gold);

width:18px;

}
.meta-type,
.meta-domain{

padding:5px 12px;

font-size:13px;

border-radius:14px;

font-weight:600;

}
.library-details{

    border-top:1px solid #ECECEC;
    
    padding-top:18px;
    
    margin-top:18px;
    
    display:flex;
    
    flex-direction:column;
    
    gap:10px;
    
    }
    .library-card .btn{

        padding:13px 18px;
        
        font-size:15px;
        
        border-radius:10px;
        
        margin-top:18px;
        
        }
    /*======================================================
FILTRES AVANCÉS
======================================================*/

.advanced-filters{

    display:flex;
    
    gap:15px;
    
    margin-top:18px;
    
    flex-wrap:wrap;
    
    }
    
    .advanced-filters select{
    
    padding:12px 18px;
    
    border:1px solid #DDD;
    
    border-radius:10px;
    
    background:#FFF;
    
    font-size:15px;
    
    min-width:220px;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    .advanced-filters select:hover{
    
    border-color:var(--gold);
    
    }
    /*======================================================
BADGES DOCUMENTAIRES
======================================================*/

.document-badge{

    display:inline-block;
    
    margin:12px 0;
    
    padding:6px 14px;
    
    border-radius:999px;
    
    font-size:12px;
    
    font-weight:700;
    
    letter-spacing:.5px;
    
    text-transform:uppercase;
    
    }
    
    .document-badge.constitution{
    
    background:#E8F0FF;
    
    color:#0B57D0;
    
    }
    
    .document-badge.code{
    
    background:#FFF5E6;
    
    color:#C77700;
    
    }
    
    .document-badge.loi{
    
    background:#EAF8EC;
    
    color:#1E7E34;
    
    }
    
    .document-badge.décret,
    
    .document-badge.decret{
    
    background:#F3F3F3;
    
    color:#555;
    
    }
    
    .document-badge.ordonnance{
    
    background:#F8EBFF;
    
    color:#7A2CBF;
    
    }
    
    .document-badge.arrêté,
    
    .document-badge.arrete{
    
    background:#FFF0F0;
    
    color:#C62828;
    
    }
    
    .document-badge.circulaire{
    
    background:#EEF7FF;
    
    color:#1565C0;
    
    }
    /*======================================================
JURISPRUDENCE
======================================================*/

.jurisprudence-icon{

    background:linear-gradient(135deg,#0B2E63,#184A9C);

}

.document-badge.arrêt,
.document-badge.arret{

    background:#F3E8FF;

    color:#6B21A8;

}

.document-badge.jugement{

    background:#E0F2FE;

    color:#075985;

}

.document-badge.avis{

    background:#ECFDF5;

    color:#047857;

}

.document-badge.ordonnance{

    background:#FEF3C7;

    color:#92400E;

}
/*======================================================
CATALOGUE GÉNÉRIQUE CJJD
======================================================*/

.hero-catalog{

    background:linear-gradient(135deg,#184A9C,#3767CF);

    padding:80px 0;

    color:#fff;

    overflow:hidden;

    position:relative;

}

.hero-catalog::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    top:-80px;

    left:-80px;

}

.hero-catalog::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.hero-catalog-content{

    display:flex;

    align-items:center;

    gap:35px;

    margin-top:35px;

    position:relative;

    z-index:2;

}

.hero-catalog-icon{

    width:110px;

    height:110px;

    border-radius:28px;

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

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.hero-catalog-icon i{

    font-size:54px;

    color:var(--gold);

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

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

    border-radius:30px;

    margin-bottom:14px;

    font-weight:600;

}

#catalogTitle{

    display:block;

    font-size:40px;

    font-weight:700;

    margin-bottom:12px;

}

#catalogDescription{

    max-width:760px;

    font-size:20px;

    line-height:1.8;

    opacity:.95;

}
/*======================================================
MISE EN PAGE DU CATALOGUE
======================================================*/

.data-search{

    background:#fff;

    margin-top:-35px;

    position:relative;

    z-index:20;

}

.data-search .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;

    padding:25px 0;

}

.search-box{

    flex:1;

    max-width:760px;

    height:62px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

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

}

.search-box input{

    flex:1;

    width:100%;

    height:100%;

    padding:0 24px;

    font-size:16px;

}

.search-box button{

    width:70px;

    height:100%;

    font-size:22px;

    background:var(--primary);

    color:#fff;

}

.search-box button:hover{

    background:var(--gold);

    color:var(--primary);

}

.advanced-filters{

    display:flex;

    gap:15px;

}

.advanced-filters select{

    min-width:210px;

    height:52px;

    padding:0 18px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    background:#fff;

    font-size:15px;

}

.data-dashboard{

    padding:30px 0 10px;

}

.dashboard-grid{

    display:grid;

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

    gap:25px;

}

.dashboard-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.30s;

}

.dashboard-card:hover{

    transform:translateY(-8px);

}

.dashboard-card i{

    font-size:42px;

    color:var(--gold);

    margin-bottom:20px;

}

.dashboard-card h2{

    color:var(--primary);

    font-size:46px;

    margin-bottom:10px;

}

.dashboard-card p{

    color:#666;

}
/*==================================================
            PAGE HISTOIRE
==================================================*/

.page-header{

    background:linear-gradient(135deg,#0b3d91,#1456c3);

    color:#fff;

    padding:90px 20px 70px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.page-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,rgba(255,255,255,.15),transparent 45%),
    radial-gradient(circle at bottom left,rgba(255,255,255,.10),transparent 40%);

}

.page-header .container{

    position:relative;

    z-index:2;

}

.page-header img{

    width:110px;

    height:110px;

    border-radius:50%;

    background:#fff;

    padding:10px;

    margin:25px auto;

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

}

.page-header h1{

    font-size:3rem;

    margin-bottom:20px;

}

.page-header p{

    max-width:760px;

    margin:auto;

    line-height:1.8;

    font-size:1.1rem;

    opacity:.95;

}

.back-home{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    padding:10px 18px;

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

    border-radius:50px;

    transition:.3s;

}

.back-home:hover{

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

}

.history-hero{

    padding:80px 20px 40px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    background:#eaf2ff;

    color:#0b3d91;

    padding:8px 18px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;

}

.history-hero p{

    max-width:850px;

    margin:auto;

    line-height:1.9;

    color:#555;

    font-size:1.08rem;

}

/*==================================================
TIMELINE INTERACTIVE
==================================================*/

.history-timeline{

    max-width:1200px;

    margin:90px auto;

    padding:20px;

}

/*----------------------------------*/

.timeline-progress{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:80px auto 70px;

    max-width:900px;

}

/*----------------------------------*/

.timeline-line{

    position:absolute;

    left:0;

    right:0;

    top:22px;

    height:6px;

    background:#DDE5F3;

    border-radius:50px;

    z-index:0;

}

.timeline-fill{

    width:0;

    height:100%;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    #0B2E63,

    #226BE7,

    #6AA9FF

    );

    transition:

    width .8s cubic-bezier(.4,0,.2,1);

}
.history-icon{

    transition:

    .6s;

}

.history-icon i{

    transition:

    .5s;

}

.history-card:hover .history-icon{

    transform:

    rotate(12deg)

    scale(1.08);

}

/*----------------------------------*/

.timeline-dot{

    position:relative;

    z-index:2;

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:#DDE5F3;

    transition:.45s;

}

.timeline-dot.active{

    background:#0B2E63;

    color:white;

    transform:scale(1.25);

    box-shadow:

    0 0 0 12px rgba(28,97,216,.12),

    0 18px 35px rgba(0,0,0,.20);

}
.timeline-dot::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid transparent;

    transition:.5s;

}

.timeline-dot.active::after{

    border-color:#4F90FF;

    animation:pulseDot 1.5s infinite;

}

@keyframes pulseDot{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}

.timeline-dot span{

    position:absolute;

    top:65px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    color:#0B2E63;

    font-weight:700;

    font-size:.95rem;

}

/*----------------------------------*/

.history-card{

    max-width:900px;

    margin:auto;

    background:white;

    border-radius:26px;

    padding:55px;

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

    text-align:center;

    opacity:1;
    transform:translateY(0);
    transition:
    opacity .35s ease,
    transform .35s ease;

    transition:.55s;


}

/*----------------------------------*/

.history-icon{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#0B2E63,#1B5AD3);

    color:white;

    font-size:40px;

    margin-bottom:30px;

}

.history-card h2{

    color:#0B2E63;

    font-size:2.2rem;

    font-weight:800;

    text-align:center;

    margin-bottom:30px;

    position:relative;

}

.history-card h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:18px auto 0;

    border-radius:20px;

    background:linear-gradient(90deg,#D4AF37,#F4D97A);

}
.history-card strong{

    color:#0B2E63;

    font-weight:700;

}
@keyframes textFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.history-card p{

    color:#1F2937;

    font-size:1.15rem;

    line-height:1.9;

    font-weight:400;

    text-align:left;

    max-width:760px;

    margin:25px auto 0;

    letter-spacing:.2px;

    animation:textFade .6s ease;

}

/*----------------------------------*/

.history-actions{

    margin-top:45px;

}

/*----------------------------------*/

.history-card{

    perspective:1200px;

    transform-style:preserve-3d;

}

.history-card.hide{

    opacity:0;

    transform:

        rotateY(90deg)

        scale(.92);

}

.history-card.show{

    opacity:1;

    transform:

        rotateY(0)

        scale(1);

}

/*----------------------------------*/

@media(max-width:900px){

.timeline-progress{

    flex-wrap:wrap;

    gap:35px;

}

.timeline-line{

    display:none;

}

.timeline-dot span{

    position:static;

    display:block;

    transform:none;

    margin-top:12px;

}

.history-card{

    padding:35px;

}

}

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

@media(max-width:900px){

    .timeline-item{

        display:grid;
    
        grid-template-columns:120px 1fr;
    
        gap:35px;
    
        align-items:flex-start;
    
        margin-bottom:60px;
    
    }
    
    .timeline-year{
    
        width:90px;
    
        height:90px;
    
        border-radius:50%;
    
        display:flex;
    
        justify-content:center;
    
        align-items:center;
    
        text-align:center;
    
        font-weight:700;
    
        color:white;
    
        background:linear-gradient(135deg,#0B2E63,#184A9C);
    
        position:sticky;
    
        top:120px;
    
    }
    
    .timeline-content{
    
        background:white;
    
        padding:40px;
    
        border-radius:20px;
    
        box-shadow:0 20px 45px rgba(0,0,0,.08);
    
        transition:.35s;
    
    }
    
    .timeline-content:hover{
    
        transform:translateX(8px);
    
    }
    .timeline-item{

        opacity:0;
    
        transform:translateY(60px);
    
        animation:historyReveal .8s forwards;
    
    }
    
    .timeline-item:nth-child(2){
    
        animation-delay:.2s;
    
    }
    
    .timeline-item:nth-child(3){
    
        animation-delay:.4s;
    
    }
    
    .timeline-item:nth-child(4){
    
        animation-delay:.6s;
    
    }
    
    @keyframes historyReveal{
    
        to{
    
            opacity:1;
    
            transform:translateY(0);
    
        }
    
    }
    .timeline-content::before{

        content:"";
    
        display:block;
    
        width:0;
    
        height:5px;
    
        background:#D4AF37;
    
        transition:.35s;
    
        margin:-40px -40px 30px;
    
        border-radius:20px 20px 0 0;
    
    }
    
    .timeline-content:hover::before{
    
        width:calc(100% + 80px);
    
    }
    .history-quote blockquote{

        font-size:3rem;
    
        font-weight:800;
    
        line-height:1.4;
    
        position:relative;
    
    }
    
    .history-quote blockquote::before{
    
        content:"“";
    
        position:absolute;
    
        left:-40px;
    
        top:-30px;
    
        font-size:120px;
    
        opacity:.12;
    
    }
.page-header h1{

    font-size:2.2rem;

}

.history-hero h2{

    font-size:1.8rem;

}

.history-quote blockquote{

    font-size:1.5rem;

}

}
/*======================================================
CORRECTIONS PAGE HISTOIRE
======================================================*/

.page-header .container{

    display:block;

    text-align:center;

    max-width:1000px;

    margin:auto;

    padding:60px 20px;

}

.back-home{

    position:absolute;

    left:40px;

    top:40px;

}

.page-header img{

    margin:20px auto 30px;

}

.page-header h1{

    margin-bottom:20px;

}

.page-header p{

    max-width:800px;

    margin:auto;

}
.history-hero .container{

    display:block;

    text-align:center;

    max-width:900px;

    margin:auto;

}

.history-hero{

    padding:90px 20px 40px;

}
.history-list{

    list-style:none;

    margin:30px auto 0;

    padding:0;

    max-width:600px;

}

.history-list li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 20px;

    margin-bottom:14px;

    border-radius:14px;

    background:#F8FAFC;

    color:#111827;

    font-size:1.05rem;

    transition:.35s;

}

.history-list li:hover{

    background:#EDF4FF;

    transform:translateX(10px);

}

.history-list i{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0B2E63;

    color:white;

    font-size:.95rem;

}
/*==================================================
ENCADRÉS HISTOIRE
==================================================*/

.history-highlight{

    display:flex;

    align-items:center;

    gap:18px;

    margin:35px auto 10px;

    padding:22px 24px;

    border-left:6px solid #D4AF37;

    border-radius:16px;

    background:linear-gradient(135deg,#F8FBFF,#EDF5FF);

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

    transition:.35s ease;

}

.history-highlight:hover{

    transform:translateY(-5px);

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

}

.history-highlight i{

    width:60px;

    height:60px;

    min-width:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#0B2E63,#1B63DA);

    color:#fff;

    font-size:1.4rem;

}

.history-highlight span{

    color:#1F2937;

    font-size:1.05rem;

    line-height:1.7;

    font-weight:500;

}
/*==================================================
MISSIONS - PAGE HISTOIRE
==================================================*/

.history-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:18px;

    margin-top:35px;

}

.history-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    border-radius:16px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    transition:.35s ease;

}

.history-item:hover{

    transform:translateY(-6px);

    background:#EDF5FF;

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

}

.history-item i{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0B2E63,#1B63DA);

    color:#fff;

    font-size:1.2rem;

}

.history-item strong{

    display:block;

    color:#0B2E63;

    font-size:1rem;

    margin-bottom:6px;

}

.history-item small{

    display:block;

    color:#4B5563;

    font-size:.95rem;

    line-height:1.6;

}
/*==================================================
VALEURS - HISTOIRE
==================================================*/

.history-values{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.history-value{

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px;

    background:linear-gradient(135deg,#FFFFFF,#F8FAFD);

    border-radius:18px;

    border:1px solid #E5E7EB;

    transition:.35s ease;

}

.history-value:hover{

    transform:translateY(-6px);

    border-color:#D4AF37;

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

}

.history-value i{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#D4AF37,#E7C75F);

    color:#fff;

    font-size:1.25rem;

}

.history-value span{

    color:#0B2E63;

    font-weight:700;

    font-size:1.05rem;

}

@media(max-width:768px){

    .history-values{

        grid-template-columns:1fr;

    }

}
/*==================================================
PROJETS ACTUELS
==================================================*/

.history-projects{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:22px;

    margin-top:35px;

}

.history-project{

    padding:28px 22px;

    text-align:center;

    border-radius:18px;

    background:#fff;

    border:1px solid #E5E7EB;

    transition:.35s;

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

}

.history-project:hover{

    transform:translateY(-8px);

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

    border-color:#D4AF37;

}

.history-project i{

    width:70px;

    height:70px;

    margin:0 auto 18px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(135deg,#0B2E63,#1B63DA);

    color:#fff;

    font-size:1.5rem;

}

.history-project h4{

    margin-bottom:12px;

    color:#0B2E63;

    font-size:1.1rem;

    font-weight:700;

}

.history-project p{

    margin:0;

    color:#4B5563;

    font-size:.95rem;

    line-height:1.6;

}
.history-card.hide{

    opacity:0;

    transform:translateY(30px);

    pointer-events:none;

}

.history-card.show{

    opacity:1;

    transform:translateY(0);

}
/*==================================================
HERO - PAGE HISTOIRE
==================================================*/

.history-hero{

    min-height:78vh;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at top right,rgba(212,175,55,.15),transparent 30%),
    linear-gradient(135deg,#0B2E63,#1A56B3);

    overflow:hidden;

    position:relative;

}

.history-hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

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

    top:-220px;

    right:-180px;

}

.history-hero::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    bottom:-120px;

    left:-100px;

}

.history-hero-content{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

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

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}

.history-hero-text{

    color:white;

}

.history-hero-text h2 span{

    color:#F3C94B;

    display:inline-block;

}

.history-hero-text p{

    font-size:1.2rem;

    line-height:2;

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

    font-weight:400;

    max-width:700px;

    margin:35px 0 45px;

    text-shadow:0 2px 10px rgba(0,0,0,.18);

}

.history-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}
.history-hero-image img{

    width:360px;

    border-radius:50%;

    padding:25px;

    background:white;

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

    animation:heroFloat 5s ease-in-out infinite;

    position:relative;

    z-index:3;

}

.hero-circle{

    position:absolute;

    border-radius:50%;

}

.hero-circle-1{

    width:420px;

    height:420px;

    border:2px dashed rgba(255,255,255,.18);

    animation:spinSlow 24s linear infinite;

}

.hero-circle-2{

    width:520px;

    height:520px;

    border:2px solid rgba(212,175,55,.20);

    animation:spinReverse 36s linear infinite;

}
@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes spinSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes spinReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}
@media(max-width:950px){

    .history-hero{

        min-height:auto;

        padding:90px 0;

    }

    .history-hero-content{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .history-hero-text h2{

        font-size:2.8rem;

    }

    .history-hero-image img{

        width:260px;

    }

}
/*==================================================
PAGE HEADER - HISTOIRE
==================================================*/

.page-header{

    background:linear-gradient(135deg,#1A4FA7,#245DC2);

    padding:70px 0 80px;

    text-align:center;

}

.page-header .container{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.page-header img{

    width:90px;

    margin:18px 0 24px;

    filter:drop-shadow(0 10px 25px rgba(0,0,0,.20));

}

.page-header h1{

    color:#FFFFFF;

    font-size:4rem;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:24px;

}

.page-header p{

    max-width:850px;

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

    font-size:1.3rem;

    line-height:1.9;

    font-weight:400;

    text-align:center;

    text-shadow:0 2px 10px rgba(0,0,0,.15);

}
.back-home{

    align-self:flex-start;

    margin-bottom:35px;

    padding:12px 22px;

    border-radius:40px;

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

    color:#FFFFFF;

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

    backdrop-filter:blur(10px);

    transition:.35s;

}

.back-home:hover{

    background:#FFFFFF;

    color:#0B2E63;

}
/*==================================================
CORRECTION FINALE HERO HISTOIRE
==================================================*/

.history-hero .history-hero-text h2{

    color:#FFFFFF !important;

    font-size:4.2rem;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1px;

    text-shadow:0 10px 28px rgba(0,0,0,.35);

}

.history-hero .history-hero-text h2 span{

    color:#F4C542 !important;

}

.history-hero .history-hero-text p{

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

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

}

.page-header p{

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

}
/*==================================================
PAGE PRÉSENTATION
HERO PREMIUM
==================================================*/

.presentation-hero{

    position:relative;

    overflow:hidden;

    min-height:88vh;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at top right,rgba(212,175,55,.16),transparent 30%),
    radial-gradient(circle at bottom left,rgba(255,255,255,.08),transparent 35%),
    linear-gradient(135deg,#0B2E63,#1C5FD0);

}

.presentation-container{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

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

    gap:80px;

    align-items:center;

    position:relative;

    z-index:5;

}

.presentation-left{

    color:white;

}

.presentation-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-weight:700;

    margin-bottom:35px;

}

.presentation-tag i{

    color:#F4C542;

}

.presentation-left h1{

    font-size:4.2rem;

    line-height:1.08;

    font-weight:800;

    margin-bottom:35px;

    color:#fff;

    text-shadow:0 8px 24px rgba(0,0,0,.30);

}

.presentation-left h1 span{

    color:#F4C542;

}

.presentation-left p{

    font-size:1.2rem;

    line-height:2;

    max-width:720px;

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

    margin-bottom:45px;

}

.presentation-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}
.presentation-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:650px;

}

.presentation-logo{

    width:360px;

    height:360px;

    border-radius:50%;

    background:white;

    padding:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:20;

    box-shadow:0 35px 90px rgba(0,0,0,.30);

    animation:heroFloat 6s ease-in-out infinite;

}

.presentation-logo img{

    width:100%;

    border-radius:50%;

}

.presentation-ring{

    position:absolute;

    border-radius:50%;

}

.ring-1{

    width:430px;

    height:430px;

    border:2px dashed rgba(255,255,255,.20);

    animation:spinSlow 26s linear infinite;

}

.ring-2{

    width:540px;

    height:540px;

    border:2px solid rgba(212,175,55,.25);

    animation:spinReverse 34s linear infinite;

}

.ring-3{

    width:640px;

    height:640px;

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

    animation:spinSlow 50s linear infinite;

}
.floating-icon{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    color:#0B2E63;

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

    animation:floatingIcon 5s ease-in-out infinite;

    z-index:30;

}

.icon-scale{

    top:35px;

    left:55px;

}

.icon-book{

    top:120px;

    right:25px;

}

.icon-gavel{

    bottom:70px;

    left:35px;

}

.icon-users{

    bottom:35px;

    right:55px;

}
.presentation-bg-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

}

.shape-1{

    width:550px;

    height:550px;

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

    top:-220px;

    right:-170px;

}

.shape-2{

    width:320px;

    height:320px;

    background:rgba(212,175,55,.12);

    left:-110px;

    bottom:-100px;

}

.shape-3{

    width:220px;

    height:220px;

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

    top:45%;

    left:45%;

}
/*==================================================
ANIMATIONS HERO PRESENTATION
==================================================*/

@keyframes floatingIcon{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}

.presentation-logo::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.18);

    animation:spinSlow 25s linear infinite;

}

.presentation-logo::after{

    content:"";

    position:absolute;

    inset:-45px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(212,175,55,.28),

    transparent 72%);

    z-index:-1;

    animation:pulseGlow 4s ease-in-out infinite;

}

@keyframes pulseGlow{

    0%{

        transform:scale(.95);

        opacity:.45;

    }

    50%{

        transform:scale(1.08);

        opacity:.90;

    }

    100%{

        transform:scale(.95);

        opacity:.45;

    }

}
.presentation-left{

    animation:slideLeft .9s ease;

}

.presentation-right{

    animation:slideRight 1s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
.presentation-buttons .btn{

    position:relative;

    overflow:hidden;

}

.presentation-buttons .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.8s;

}

.presentation-buttons .btn:hover::before{

    left:150%;

}
.presentation-buttons .btn{

    position:relative;

    overflow:hidden;

}

.presentation-buttons .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.8s;

}

.presentation-buttons .btn:hover::before{

    left:150%;

}
@media(max-width:980px){

    .presentation-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:70px;

    }

    .presentation-left h1{

        font-size:3rem;

    }

    .presentation-left p{

        margin-left:auto;

        margin-right:auto;

    }

    .presentation-buttons{

        justify-content:center;

    }

    .presentation-right{

        min-height:520px;

    }

    .presentation-logo{

        width:260px;

        height:260px;

    }

    .ring-1{

        width:320px;

        height:320px;

    }

    .ring-2{

        width:400px;

        height:400px;

    }

    .ring-3{

        width:480px;

        height:480px;

    }

    .floating-icon{

        width:58px;

        height:58px;

        font-size:1.2rem;

    }

}
/*==================================================
QUI SOMMES-NOUS
==================================================*/

#presentation-overview{

    width:min(1400px,92%);

    margin:120px auto;

}

.presentation-overview-container{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:90px;

    align-items:center;

}
.presentation-image{

    position:relative;

}

.image-frame{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:white;

    padding:25px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.image-frame img{

    width:100%;

    border-radius:18px;

    display:block;

    transition:.7s;

}

.image-frame:hover img{

    transform:scale(1.06);

}
.experience-card{

    position:absolute;

    right:-25px;

    bottom:40px;

    width:180px;

    background:white;

    border-radius:22px;

    padding:22px;

    text-align:center;

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

    animation:heroFloat 5s ease-in-out infinite;

}

.experience-card strong{

    display:block;

    color:#0B2E63;

    font-size:1rem;

    margin-bottom:10px;

}

.experience-card span{

    display:block;

    color:#D4AF37;

    font-size:2.8rem;

    font-weight:800;

}
.presentation-content h2{

    color:#0B2E63;

    font-size:3rem;

    line-height:1.2;

    margin:25px 0;

}

.presentation-content p{

    font-size:1.08rem;

    line-height:2;

    color:#555;

    margin-bottom:22px;

}
.presentation-quote{

    margin-top:40px;

    padding:35px;

    border-left:6px solid #D4AF37;

    border-radius:0 20px 20px 0;

    background:#F8FAFD;

    display:flex;

    gap:25px;

    align-items:flex-start;

}

.presentation-quote i{

    color:#D4AF37;

    font-size:2rem;

    margin-top:5px;

}

.presentation-quote p{

    margin:0;

    color:#0B2E63;

    font-size:1.15rem;

    font-weight:600;

    line-height:1.8;

}
.image-frame{

    transition:.45s;

}

.image-frame:hover{

    transform:translateY(-10px);

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

}

.presentation-content{

    animation:fadePresentation .9s ease;

}

@keyframes fadePresentation{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@media(max-width:980px){

    .presentation-overview-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .presentation-content{

        text-align:center;

    }

    .presentation-content h2{

        font-size:2.4rem;

    }

    .experience-card{

        position:relative;

        right:auto;

        bottom:auto;

        margin:30px auto 0;

    }

    .presentation-quote{

        text-align:left;

    }

}
/*==================================================
NOTRE IDENTITÉ
==================================================*/

#identity-section{

    width:min(1400px,92%);

    margin:120px auto;

}

.identity-premium-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.identity-premium-card{

    position:relative;

    overflow:hidden;

    background:white;

    border-radius:26px;

    padding:45px 38px;

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

    transition:.45s;

    border:1px solid rgba(11,46,99,.05);

}

.identity-premium-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#D4AF37,#F7D86C);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.identity-premium-card:hover::before{

    transform:scaleX(1);

}

.identity-premium-card:hover{

    transform:translateY(-14px);

    box-shadow:0 28px 70px rgba(0,0,0,.16);

}

.identity-premium-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    background:linear-gradient(135deg,#FFF8E5,#F8E1A0);

    color:#D4AF37;

    font-size:2rem;

    transition:.45s;

}

.identity-premium-card:hover .identity-premium-icon{

    transform:rotate(-8deg) scale(1.12);

}

.identity-premium-card h3{

    color:#0B2E63;

    font-size:1.55rem;

    margin-bottom:18px;

}

.identity-premium-card p{

    color:#666;

    line-height:1.9;

}
@media(max-width:1100px){

    .identity-premium-grid{

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

    }

}

@media(max-width:760px){

    .identity-premium-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
NOTRE APPROCHE
==================================================*/

#approach-section{

    width:min(1400px,92%);

    margin:140px auto;

}

.approach-timeline{

    position:relative;

    margin-top:80px;

    display:grid;

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

    gap:30px;

}

.approach-line{

    position:absolute;

    top:48px;

    left:8%;

    right:8%;

    height:5px;

    border-radius:20px;

    background:linear-gradient(90deg,#0B2E63,#D4AF37);

    z-index:1;

}

.approach-step{

    position:relative;

    z-index:2;

    text-align:center;

}

.approach-circle{

    width:96px;

    height:96px;

    margin:auto;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    color:#0B2E63;

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

    transition:.4s;

}

.approach-step:hover .approach-circle{

    background:#D4AF37;

    color:white;

    transform:translateY(-10px) rotate(8deg);

}

.approach-step h3{

    margin-top:28px;

    color:#0B2E63;

    font-size:1.35rem;

}

.approach-step p{

    margin-top:14px;

    color:#666;

    line-height:1.8;

}
@media(max-width:1100px){

    .approach-timeline{

        grid-template-columns:1fr;

        gap:60px;

    }

    .approach-line{

        display:none;

    }

}
/*==================================================
POURQUOI CHOISIR LA CJJD
==================================================*/

#why-cjjd{

    width:min(1400px,92%);

    margin:140px auto;

}

.why-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:60px;

    margin-top:70px;

    align-items:start;

}

.why-left{

    display:grid;

    gap:25px;

}

.why-stat{

    background:linear-gradient(135deg,#0B2E63,#1F5FC8);

    color:white;

    border-radius:24px;

    padding:35px;

    text-align:center;

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

    transition:.4s;

}

.why-stat:hover{

    transform:translateY(-10px);

}

.why-stat .number{

    display:block;

    font-size:3rem;

    font-weight:800;

    color:#F4C542;

}

.why-stat .label{

    display:block;

    margin-top:10px;

    font-size:1rem;

    letter-spacing:.5px;

}

.why-right{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:white;

    border-radius:24px;

    padding:35px;

    display:flex;

    gap:22px;

    align-items:flex-start;

    box-shadow:0 18px 50px rgba(0,0,0,.08);

    transition:.4s;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 70px rgba(0,0,0,.14);

}

.why-card i{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F4C542;

    color:#0B2E63;

    font-size:1.8rem;

    flex-shrink:0;

}

.why-card h3{

    color:#0B2E63;

    margin-bottom:12px;

    font-size:1.35rem;

}

.why-card p{

    color:#666;

    line-height:1.8;

}
@media(max-width:1100px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-right{

        grid-template-columns:1fr;

    }

}
/*==================================================
CTA PRESENTATION
==================================================*/

#presentation-cta{

    position:relative;

    overflow:hidden;

    width:min(1400px,92%);

    margin:140px auto;

    border-radius:35px;

    background:

    linear-gradient(135deg,#0B2E63,#1D62D8);

    padding:100px 70px;

    text-align:center;

    color:white;

}
.presentation-cta-content{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

}

.presentation-cta-content h2{

    color:white;

    font-size:3rem;

    line-height:1.25;

    margin:30px 0;

}

.presentation-cta-content p{

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

    line-height:2;

    font-size:1.15rem;

    margin-bottom:50px;

}
.cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:22px;

}

.cta-buttons .btn{

    min-width:220px;

}

.btn-light{

    background:white;

    color:#0B2E63;

}

.btn-light:hover{

    background:#F4C542;

    color:#0B2E63;

}

.btn-outline{

    background:transparent;

    color:white;

    border:2px solid rgba(255,255,255,.35);

}

.btn-outline:hover{

    background:white;

    color:#0B2E63;

}
.cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:22px;

}

.cta-buttons .btn{

    min-width:220px;

}

.btn-light{

    background:white;

    color:#0B2E63;

}

.btn-light:hover{

    background:#F4C542;

    color:#0B2E63;

}

.btn-outline{

    background:transparent;

    color:white;

    border:2px solid rgba(255,255,255,.35);

}

.btn-outline:hover{

    background:white;

    color:#0B2E63;

}
@media(max-width:900px){

    #presentation-cta{

        padding:70px 35px;

    }

    .presentation-cta-content h2{

        font-size:2.2rem;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

}
/*==================================================
BOUTONS CTA
==================================================*/

.cta-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.btn-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border-radius:50%;

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

    transition:.35s;

}

.btn-light .btn-arrow{

    background:rgba(11,46,99,.12);

}

.cta-buttons .btn:hover .btn-arrow{

    transform:translateX(6px);

}
/*==================================================
NOS SERVICES - HERO
==================================================*/

.services-hero{

    position:relative;

    overflow:hidden;

    min-height:90vh;

    display:flex;

    align-items:center;

    background:

    radial-gradient(circle at top right,rgba(212,175,55,.16),transparent 30%),

    radial-gradient(circle at bottom left,rgba(255,255,255,.08),transparent 35%),

    linear-gradient(135deg,#0B2E63,#1D62D8);

}

.services-container{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

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

    gap:80px;

    align-items:center;

    position:relative;

    z-index:5;

}

.services-left{

    color:white;

}

.services-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    margin-bottom:35px;

    font-weight:700;

}

.services-tag i{

    color:#F4C542;

}

.services-left h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:30px;

    color:white;

}

.services-left h1 span{

    color:#F4C542;

}

.services-left p{

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

    line-height:2;

    font-size:1.15rem;

    max-width:700px;

}
.services-right{

    display:grid;

    gap:28px;

}

.service-preview{

    display:flex;

    align-items:center;

    gap:24px;

    padding:28px;

    border-radius:24px;

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

    backdrop-filter:blur(12px);

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

    transition:.35s;

}

.service-preview:hover{

    transform:translateX(10px);

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

}

.preview-icon{

    width:78px;

    height:78px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F4C542;

    color:#0B2E63;

    font-size:1.8rem;

    flex-shrink:0;

}

.service-preview h3{

    color:white;

    margin-bottom:10px;

}

.service-preview p{

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

}
.services-bg-shape{

    position:absolute;

    border-radius:50%;

}

.shape-1{

    width:550px;

    height:550px;

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

    top:-220px;

    right:-180px;

}

.shape-2{

    width:320px;

    height:320px;

    background:rgba(212,175,55,.12);

    left:-120px;

    bottom:-120px;

}

.shape-3{

    width:220px;

    height:220px;

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

    top:45%;

    left:45%;

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

#services-list{

    width:min(1400px,92%);

    margin:130px auto;

}

.services-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.service-card{

    position:relative;

    overflow:hidden;

    background:white;

    border-radius:28px;

    padding:45px 35px;

    box-shadow:0 20px 55px rgba(0,0,0,.08);

    transition:.45s;

    border:1px solid rgba(11,46,99,.05);

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}
.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#D4AF37,#F6D870);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#FFF7DF,#FFE9A5);

    color:#D4AF37;

    font-size:2rem;

    margin-bottom:30px;

    transition:.4s;

}

.service-card:hover .service-card-icon{

    transform:rotate(-10deg) scale(1.1);

}
.service-card h3{

    color:#0B2E63;

    margin-bottom:18px;

    font-size:1.55rem;

}

.service-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

.service-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#0B2E63;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.service-link:hover{

    color:#D4AF37;

}

.service-link i{

    transition:.3s;

}

.service-link:hover i{

    transform:translateX(6px);

}
@media(max-width:1100px){

    .services-grid{

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

    }

}

@media(max-width:760px){

    .services-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
METHODE D'INTERVENTION
==================================================*/

#service-process{

    width:min(1400px,92%);

    margin:150px auto;

}

.process-container{

    position:relative;

    display:grid;

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

    gap:35px;

    margin-top:80px;

}

.process-line{

    position:absolute;

    left:8%;

    right:8%;

    top:48px;

    height:5px;

    border-radius:30px;

    background:linear-gradient(90deg,#0B2E63,#D4AF37);

}
.process-step{

    position:relative;

    z-index:2;

    text-align:center;

}

.process-number{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#0B2E63,#1D62D8);

    color:white;

    font-size:2rem;

    font-weight:700;

    box-shadow:0 20px 45px rgba(11,46,99,.20);

    transition:.35s;

}

.process-step:hover .process-number{

    transform:translateY(-10px) rotate(-8deg);

}

.process-step h3{

    margin-top:30px;

    color:#0B2E63;

    font-size:1.45rem;

}

.process-step p{

    margin-top:15px;

    color:#666;

    line-height:1.9;

}
@media(max-width:1100px){

    .process-container{

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

    }

    .process-line{

        display:none;

    }

}

@media(max-width:700px){

    .process-container{

        grid-template-columns:1fr;

    }

}
/*==================================================
CTA - NOS SERVICES
==================================================*/

#services-cta{

    position:relative;

    overflow:hidden;

    width:min(1400px,92%);

    margin:140px auto;

    padding:90px 70px;

    border-radius:35px;

    background:
    linear-gradient(135deg,#0B2E63,#1C5FD0);

    text-align:center;

    color:white;

}
.services-cta-content{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

}

.services-cta-content h2{

    color:white;

    font-size:3rem;

    line-height:1.25;

    margin:30px 0;

}

.services-cta-content p{

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

    font-size:1.15rem;

    line-height:2;

    margin-bottom:50px;

}
.services-cta-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.services-cta-buttons .btn{

    min-width:240px;

}

.services-cta-buttons .btn-outline{

    border:2px solid rgba(255,255,255,.35);

    background:transparent;

    color:white;

}

.services-cta-buttons .btn-outline:hover{

    background:white;

    color:#0B2E63;

}
.services-cta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(8px);

}

.services-cta-glow.glow-left{

    width:420px;

    height:420px;

    background:rgba(212,175,55,.16);

    left:-140px;

    bottom:-140px;

}

.services-cta-glow.glow-right{

    width:360px;

    height:360px;

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

    right:-120px;

    top:-120px;

}
@media(max-width:900px){

    #services-cta{

        padding:70px 35px;

    }

    .services-cta-content h2{

        font-size:2.2rem;

    }

    .services-cta-buttons{

        flex-direction:column;

        align-items:center;

    }

}
/*==================================================
ILLUSTRATIONS PREMIUM
==================================================*/

.service-illustration{

    width:170px;
    
    height:170px;
    
    margin:auto auto 35px;
    
    transition:.6s;
    
    }
    
    .service-illustration svg{
    
    width:100%;
    
    height:100%;
    
    overflow:visible;
    
    }
    
    .svg-bg{
    
    fill:#EDF5FF;
    
    }
    
    .svg-bg2{
    
    fill:#F7FBFF;
    
    }
    
    .svg-paper{
    
    fill:white;
    
    stroke:#0B2E63;
    
    stroke-width:3;
    
    }
    
    .svg-line{
    
    stroke:#0B2E63;
    
    stroke-width:4;
    
    stroke-linecap:round;
    
    }
    
    .svg-gold{
    
    fill:#D4AF37;
    
    }
    .service-card:hover .service-illustration{

        transform:
        
        translateY(-8px)
        
        rotate(-4deg)
        
        scale(1.08);
        
        }
        
        .service-card:hover .svg-gold{
        
        animation:
        
        goldPulse
        
        1.2s infinite;
        
        }
        
        @keyframes goldPulse{
        
        0%{
        
        transform:scale(1);
        
        }
        
        50%{
        
        transform:scale(1.2);
        
        }
        
        100%{
        
        transform:scale(1);
        
        }
        
        }

/*==================================================
STYLE PROJETS CJJD
==================================================*/
/*==========================================================
PROJETS 2.0
Design System
==========================================================*/

#projectsPage{

    --bg:#061A3A;
    --bg2:#0B2E63;
    --bg3:#184A9C;

    --gold:#D4AF37;

    --white:#ffffff;

    --text:#EEF5FF;

    --muted:#BFD3F2;

    --glass:rgba(255,255,255,.08);

    --glassBorder:rgba(255,255,255,.12);

    --radius:28px;

    --shadow:
        0 30px 80px rgba(0,0,0,.25);

    overflow:hidden;

    background:
        radial-gradient(circle at 15% 20%,rgba(24,74,156,.40),transparent 35%),
        radial-gradient(circle at 90% 15%,rgba(212,175,55,.08),transparent 28%),
        radial-gradient(circle at 70% 80%,rgba(24,74,156,.30),transparent 35%),
        linear-gradient(180deg,#061A3A 0%,#0B2E63 45%,#EDF4FD 100%);

}
.projectHero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at 15% 15%,rgba(42,105,255,.35),transparent 32%),
    radial-gradient(circle at 85% 80%,rgba(212,175,55,.12),transparent 30%),
    linear-gradient(135deg,#03132e 0%,#082454 45%,#0f3a84 100%);

}
.projectHero::before{

    content:"";

    position:absolute;

    inset:-30%;

    background:

    repeating-linear-gradient(

        -35deg,

        transparent 0px,

        transparent 140px,

        rgba(255,255,255,.025) 142px,

        transparent 145px

    );

    animation:gridMove 25s linear infinite;

    opacity:.45;

}
.projectHero::after{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    right:-300px;

    top:-220px;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.18),

    transparent 72%);

    filter:blur(60px);

}
@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-220px);

    }

}

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}
.gradient-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    animation:floatOrb 14s ease-in-out infinite;

}
.orb-1{

    width:620px;

    height:620px;

    background:#184A9C;

    left:-220px;

    top:-180px;

}
.orb-2{

    width:420px;

    height:420px;

    background:#D4AF37;

    right:-120px;

    top:100px;

    opacity:.22;

    animation-delay:2s;

}
.orb-3{

    width:520px;

    height:520px;

    background:#0B2E63;

    bottom:-220px;

    right:180px;

    animation-delay:5s;

}
@keyframes floatOrb{

    0%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(-35px) scale(1.08);

    }

    100%{

        transform:translateY(0) scale(1);

    }

}
.grid-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:70px 70px;

    mask-image:

        radial-gradient(circle at center,

        black 35%,

        transparent 100%);

}
.hero-content{

    width:min(1400px,96%);

    margin:0 auto;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    z-index:5;

}
.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:999px;

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

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

    color:white;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    backdrop-filter:blur(16px);

}
.hero-content h1{

    margin-top:30px;

    width:100%;

    max-width:1300px;

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

    line-height:.95;

    font-weight:900;

    color:white;

}
.hero-content p{

    max-width:900px;

    margin:40px auto;

    font-size:1.25rem;

    line-height:2;

}
.hero-actions{

    display:flex;

    gap:18px;

    margin-top:50px;

    flex-wrap:wrap;

}
.btn-primary,
.btn-secondary{

    padding:18px 34px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

}
.btn-primary{

    background:#D4AF37;

    color:#071C3F;

}
.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:

        0 20px 45px rgba(212,175,55,.35);

}
.btn-secondary{

    color:white;

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

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

    backdrop-filter:blur(14px);

}
.btn-secondary:hover{

    transform:translateY(-6px);

    background:white;

    color:#0B2E63;

}
/*==========================================================
SCÈNE D'INNOVATION
==========================================================*/

.hero-floating{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:60px;

}

.innovation-scene{

    position:relative;

    width:760px;

    height:760px;

    margin:auto;

}
.innovation-scene::before{

    content:"";

    position:absolute;

    inset:110px;

    border-radius:50%;

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

}
.innovation-scene::after{

    content:"";

    position:absolute;

    inset:170px;

    border-radius:50%;

    border:1px dashed rgba(212,175,55,.18);

    animation:rotateScene 45s linear infinite;

}
@keyframes rotateScene{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
.innovation-core{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:190px;

    height:190px;

    border-radius:50%;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 40px 90px rgba(0,0,0,.35);

    z-index:20;

}
.innovation-core::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.35);

    animation:pulseRing 4s infinite;

}
.innovation-core::after{

    content:"";

    position:absolute;

    inset:-45px;

    border-radius:50%;

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

}
@keyframes pulseRing{

    0%{

        transform:scale(.9);

        opacity:1;

    }

    100%{

        transform:scale(1.18);

        opacity:0;

    }

}
.innovation-core img{

    width:88px;

    height:88px;

    object-fit:contain;

}
.innovation-core span{

    margin-top:12px;

    font-size:.95rem;

    font-weight:800;

    letter-spacing:2px;

    color:#0B2E63;

}
.innovation-node{

    position:absolute;

    width:185px;

    padding:18px;

    border-radius:22px;

    display:flex;

    align-items:center;

    gap:15px;

    color:white;

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

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

    backdrop-filter:blur(18px);

    box-shadow:

        0 25px 55px rgba(0,0,0,.22);

    transition:.45s;

    cursor:pointer;

}
.innovation-node:hover{

    transform:translateY(-10px) scale(1.05);

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

    box-shadow:

        0 35px 80px rgba(0,0,0,.35);

}
.innovation-node i{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    background:linear-gradient(135deg,#D4AF37,#F7D873);

    color:#0B2E63;

}
.innovation-node strong{

    font-size:.95rem;

    line-height:1.45;

}
.node-1{

    top:20px;

    left:270px;

}
.node-2{

    top:170px;

    right:0;

}
.node-3{

    bottom:170px;

    right:0;

}
.node-4{

    bottom:20px;

    left:270px;

}
.node-5{

    bottom:170px;

    left:0;

}
.node-6{

    top:170px;

    left:0;

}
.node-1{

    animation:floatingNode 6s ease-in-out infinite;

}

.node-2{

    animation:floatingNode 6s ease-in-out infinite .5s;

}

.node-3{

    animation:floatingNode 6s ease-in-out infinite 1s;

}

.node-4{

    animation:floatingNode 6s ease-in-out infinite 1.5s;

}

.node-5{

    animation:floatingNode 6s ease-in-out infinite 2s;

}

.node-6{

    animation:floatingNode 6s ease-in-out infinite 2.5s;

}
@keyframes floatingNode{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:34px;

    height:58px;

    border-radius:40px;

    border:2px solid rgba(255,255,255,.28);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:8px;

    z-index:20;

}

.scroll-indicator span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:white;

    animation:scrollDown 1.8s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    25%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(24px);

    }

}
/*==========================================================
INTRO
==========================================================*/

.innovation-intro{

    position:relative;

    padding:140px 0;

    width:min(1350px,92%);

    margin:auto;

}

.intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-bottom:80px;

}

.section-kicker{

    display:inline-block;

    padding:12px 22px;

    border-radius:999px;

    background:#E9F2FF;

    color:#0B2E63;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;

}

.intro-left h2{

    font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1.08;

    color:#082349;

}

.intro-right p{

    font-size:1.18rem;

    line-height:2;

    color:#4B5D79;

}
/*==========================================================
PANELS
==========================================================*/

.projects-panels{

    display:grid;

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

    gap:22px;

}
.panel{

    position:relative;

    overflow:hidden;

    padding:38px 26px;

    border-radius:28px;

    background:white;

    min-height:280px;

    transition:.45s;

    cursor:pointer;

    box-shadow:

        0 18px 50px rgba(16,55,110,.08);

}
.panel::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#0B2E63,#D4AF37);

    transform:scaleX(0);

    transition:.45s;

    transform-origin:left;

}
.panel:hover::before{

    transform:scaleX(1);

}
.panel:hover{

    transform:translateY(-16px);

    box-shadow:

        0 35px 80px rgba(16,55,110,.16);

}
.panel span{

    display:block;

    font-size:3rem;

    font-weight:900;

    color:#D4AF37;

    opacity:.18;

    margin-bottom:20px;

}
.panel h3{

    font-size:1.45rem;

    margin-bottom:18px;

    color:#0B2E63;

}
.panel p{

    color:#566882;

    line-height:1.9;

}
.panel.active{

    background:linear-gradient(145deg,#0B2E63,#184A9C);

    color:white;

}
.panel.active h3{

    color:white;

}
.panel.active p{

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

}
.panel.active span{

    color:white;

    opacity:.14;

}
.panel::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    right:-120px;

    bottom:-120px;

    transition:.5s;

}
.panel:hover::after{

    transform:scale(1.35);

}
/*==========================================================
SECTION ADROCA
==========================================================*/

.project-showcase{

    position:relative;

    width:min(1380px,92%);

    margin:160px auto;

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:center;

}

.background-number{

    position:absolute;

    right:-40px;

    top:-120px;

    font-size:17rem;

    font-weight:900;

    color:#0B2E63;

    opacity:.04;

    user-select:none;

    pointer-events:none;

}

.showcase-header{

    grid-column:1/-1;

    max-width:820px;

    margin-bottom:35px;

}

.project-index{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:999px;

    background:#EDF4FD;

    color:#0B2E63;

    font-weight:700;

}

.showcase-header h2{

    margin-top:28px;

    font-size:4.3rem;

    color:#082349;

    line-height:1;

}

.showcase-header h3{

    margin-top:16px;

    font-size:2rem;

    font-weight:700;

    color:#D4AF37;

}

.showcase-header p{

    margin-top:28px;

    font-size:1.15rem;

    line-height:2;

    color:#5B6E87;

    max-width:760px;

}
.showcase-stage{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:70px;

    align-items:center;

}
.showcase-image{

    position:relative;

    width:520px;

    height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

}
.light-ring{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(24,74,156,.10);

}

.ring-1{

    width:520px;

    height:520px;

    animation:ringRotate 30s linear infinite;

}

.ring-2{

    width:390px;

    height:390px;

    border-style:dashed;

    border-color:rgba(212,175,55,.35);

    animation:ringRotateReverse 20s linear infinite;

}
@keyframes ringRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes ringRotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0);

    }

}
.showcase-image img{

    position:relative;

    z-index:5;

    width:82%;

    border-radius:30px;

    box-shadow:

        0 45px 90px rgba(9,39,88,.25);

    transition:.6s;

}
.showcase-image:hover img{

    transform:

        rotate(-3deg)

        scale(1.05);

}
.showcase-side{

    display:grid;

    gap:26px;

}
.feature-box{

    position:relative;

    overflow:hidden;

    padding:38px;

    border-radius:28px;

    background:white;

    box-shadow:

        0 18px 55px rgba(10,48,104,.08);

    transition:.45s;

}
.feature-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:7px;

    height:100%;

    background:linear-gradient(#0B2E63,#D4AF37);

}
.feature-box:hover{

    transform:

        translateX(12px)

        translateY(-8px);

    box-shadow:

        0 35px 80px rgba(10,48,104,.16);

}
.feature-box span{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:58px;

    height:58px;

    border-radius:18px;

    background:#0B2E63;

    color:white;

    font-weight:800;

    margin-bottom:22px;

}
.feature-box h4{

    font-size:1.45rem;

    color:#082349;

    margin-bottom:16px;

}
.feature-box p{

    color:#62758D;

    line-height:1.9;

}
.feature-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(212,175,55,.07);

    right:-120px;

    bottom:-120px;

    transition:.5s;

}
.feature-box:hover::after{

    transform:scale(1.45);

}
.panel{

    cursor:pointer;

}

.panel-arrow{

    margin-top:30px;

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EDF4FD;

    color:#0B2E63;

    transition:.35s;

}

.panel:hover .panel-arrow{

    transform:translateX(8px);

    background:#D4AF37;

    color:white;

}
/*==========================================================
PAGE ADROCA
==========================================================*/

#adrocaPage{

    background:#f5f8fc;

    overflow:hidden;

}

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

.projects-hero{

    position:relative;

    width:100%;

    min-height:100vh;

    padding:70px 6% 100px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.projectHeroBackground{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.heroGlow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    animation:heroFloat 10s ease-in-out infinite;

}

.glow1{

    width:550px;

    height:550px;

    background:#1d5fd6;

    left:-180px;

    top:-180px;

}

.glow2{

    width:450px;

    height:450px;

    background:#d4af37;

    right:-120px;

    bottom:-120px;

    opacity:.25;

    animation-delay:3s;

}

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

    100%{

        transform:translateY(0);

    }

}

.projectHeroContainer{

    position:relative;

    z-index:5;

    width:min(1500px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:80px;

    align-items:center;

}

.projectBadge{

    display:inline-flex;

    align-items:center;

    padding:12px 22px;

    border-radius:999px;

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

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

    color:white;

    font-weight:700;

    letter-spacing:1px;

    backdrop-filter:blur(12px);

}

.projectHeroLeft h1{

    font-size:clamp(5rem,8vw,7rem);

    line-height:.95;

    color:white;

    font-weight:900;

    text-shadow:

    0 8px 25px rgba(0,0,0,.25);

}

.projectHeroLeft h2{

    margin-top:18px;

    font-size:2.2rem;

    color:#F4C542;

    font-weight:700;

}

.projectHeroLeft p{

    max-width:620px;

    font-size:1.15rem;

    line-height:2;

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

}

.projectButtons a{

    height:58px;

    padding:0 34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    font-weight:700;

    transition:.35s;

}
.projectButtons a:hover{

    transform:

    translateY(-4px);

    box-shadow:

    0 20px 35px rgba(0,0,0,.22);

}

.projectHeroRight{

    display:flex;

    justify-content:center;

    align-items:center;

}

.heroImageCard{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    background:none;

    border:none;

    box-shadow:none;

    padding:0;

    animation:

    floating 8s ease-in-out infinite;

}
.heroImageCard::before{

    content:"";

    position:absolute;

    width:760px;

    height:760px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.10),

    transparent 70%);

    filter:blur(50px);

}

.heroImageCard img{

    position:relative;

    width:110%;

    max-width:none;

    z-index:5;

    filter:

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

    transition:1s;

}
.heroImageCard:hover img{

    transform:

    scale(1.05)

    rotate(-3deg);

}
@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}


@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}
@media(max-width:980px){

    .projectHeroContainer{

        grid-template-columns:1fr;

        text-align:center;

    }

    .projectHeroLeft p{

        margin-left:auto;

        margin-right:auto;

    }

    .projectButtons{

        justify-content:center;

    }

    .heroImageCard{

        width:min(500px,100%);

        margin-top:50px;

    }

}
/*==========================================================
CONCEPT
==========================================================*/

.conceptSection{

    position:relative;

    padding:180px 0;

    overflow:hidden;

    background:

    linear-gradient(180deg,#ffffff 0%,#f7faff 100%);

}
.conceptSection::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-260px;

    top:-260px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(41,106,255,.08),

    transparent 70%);

}
.conceptSection::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-120px;

    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(212,175,55,.08),

    transparent 72%);

}


.sectionTitle{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.sectionTitle span{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:#EDF4FD;

    color:#0B2E63;

    font-weight:700;

    letter-spacing:1px;

}

.sectionTitle h2{

    font-size:clamp(2.8rem,5vw,4.2rem);

    line-height:1.15;

    color:#07244D;

    margin-top:28px;

    font-weight:800;

}

.sectionTitle p{

    margin:30px auto 0;

    max-width:760px;

    font-size:1.15rem;

    line-height:2;

    color:#66758B;

}
.conceptGrid{

    width:min(1400px,92%);

    margin:110px auto 0;

    display:grid;

    grid-template-columns:

    1fr

    1fr

    1fr;

    gap:40px;

}

.conceptCard{

    position:relative;

    overflow:hidden;

    padding:55px 45px;

    background:

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    border:1px solid rgba(25,70,140,.08);

    box-shadow:

        0 30px 70px rgba(15,40,80,.08);

    transition:.45s;

}
.conceptCard::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:

    linear-gradient(90deg,

    #0B2E63,

    #D4AF37);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}
.conceptCard:hover::before{

    transform:scaleX(1);

}

.conceptCard:hover{

    transform:

    translateY(-18px);

    box-shadow:

    0 40px 80px rgba(12,35,80,.16);

}

.conceptIcon{

    width:88px;

    height:88px;

    border-radius:24px;

    background:

    linear-gradient(135deg,

    #0B2E63,

    #1D56B3);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:2rem;

    margin-bottom:35px;

}
.conceptCard:nth-child(2){

    margin-top:55px;

}
.conceptCard:nth-child(3){

    margin-top:110px;

}


.conceptCard h3{

    font-size:1.7rem;

    margin-bottom:20px;

    color:#07244D;

}

.conceptCard p{

    color:#66758B;

    line-height:2;

    font-size:1.05rem;

}
@media(max-width:1000px){

    .conceptGrid{

        grid-template-columns:1fr;

    }

    .conceptCard:nth-child(2),

    .conceptCard:nth-child(3){

        margin-top:0;

    }

}

    .sectionTitle h2{

        font-size:2.3rem;

    }

}
/*==========================================================
COLLECTION
==========================================================*/

.collectionSection{

    position:relative;

    padding:190px 0;

    overflow:hidden;

    background:

    linear-gradient(180deg,

    #f7faff 0%,

    #ffffff 40%,

    #f5f8fd 100%);

}
.collectionSection::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    left:-450px;

    top:-350px;

    background:

    radial-gradient(circle,

    rgba(11,46,99,.06),

    transparent 72%);

}
.collectionSection::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-300px;

    bottom:-250px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(212,175,55,.10),

    transparent 72%);

}


.collectionGrid{

    margin-top:90px;

    display:grid;

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

    gap:35px;

}

.gameCard{

    position:relative;

    overflow:hidden;

    background:white;

    border-radius:30px;

    padding:45px;

    min-height:320px;

    border:1px solid #edf2f8;

    box-shadow:0 20px 45px rgba(18,41,77,.08);

    transition:.45s;

}

.gameCard::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:6px;

    background:linear-gradient(90deg,#0B2E63,#D4AF37);

    transition:.45s;

}

.gameCard:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(18,41,77,.16);

}

.gameCard:hover::before{

    width:100%;

}

.featured{

    background:linear-gradient(135deg,#0B2E63,#184A9C);

    color:white;

}

.featured h3,

.featured p,

.featured a{

    color:white;

}
.gameNumber{

    width:70px;

    height:70px;

    border-radius:22px;

    background:#EDF4FD;

    color:#0B2E63;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    font-weight:800;

}

.featured .gameNumber{

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

    color:white;

}

.gameCard h3{

    margin-top:35px;

    font-size:2rem;

    color:#071C3F;

}

.gameCard p{

    margin-top:20px;

    line-height:2;

    color:#667385;

}

.gameCard a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:40px;

    text-decoration:none;

    font-weight:700;

    color:#0B2E63;

    transition:.3s;

}

.gameCard:hover a{

    gap:18px;

}
@media(max-width:980px){

    .collectionGrid{

        grid-template-columns:1fr;

    }

}
/*==========================================================
COLLECTION ADROCA
==========================================================*/

.collectionSection{

    padding:150px 0;

    background:linear-gradient(180deg,#f5f8fc,#ffffff);

}

.collectionGrid{

    width:min(1450px,92%);

    margin:90px auto 0;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

    align-items:start;

}
.collection-card{

    position:relative;

    overflow:hidden;

    min-height:260px;

    padding:42px;

    border-radius:28px;

    background:white;

    border:1px solid #e8eef7;

    box-shadow:

        0 18px 45px rgba(16,38,73,.08);

    transition:
        transform .45s,
        box-shadow .45s;

    transform-style:preserve-3d;

}

.collection-card:hover{

    transform:

        translateY(-14px)

        rotateX(6deg)

        rotateY(-5deg);

    box-shadow:

        0 45px 90px rgba(15,40,80,.18);

}
.collection-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:7px;

    background:

        linear-gradient(90deg,#0B2E63,#D4AF37);

}

.collection-card::after{

    content:"";

    position:absolute;

    right:-70px;

    top:-70px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(212,175,55,.18),
        transparent 70%);

}
.collection-card h3{

    margin-top:45px;

    font-size:2.3rem;

    font-weight:900;

    letter-spacing:2px;

    color:#0B2E63;

}

.collection-card small{

    display:block;

    margin-top:12px;

    color:#5f6d82;

    line-height:1.8;

    font-size:1rem;

}

.collection-card p{

    margin-top:28px;

    color:#6f7d91;

    line-height:1.9;

}

.official-badge{

    position:absolute;

    top:26px;

    right:26px;

    padding:8px 18px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.5px;

}

.official-badge{

    background:#D4AF37;

    color:white;

}
.collection-card.official{

    background:

        linear-gradient(135deg,
        #071C3F,
        #0B2E63);

    color:white;

}

.collection-card.official h3{

    color:white;

}

.collection-card.official small{

    color:#d9e4ff;

}

.collection-card.official p{

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

}

.collection-card.official::before{

    background:

        linear-gradient(90deg,#D4AF37,#FFE68A);

}
.collection-card{

    perspective:1200px;

}

.collection-card:hover{

    transform:

        perspective(1200px)

        rotateX(8deg)

        rotateY(-8deg)

        translateY(-15px)

        scale(1.02);

}
.collection-card:nth-child(2){

    margin-top:35px;

}

.collection-card:nth-child(4){

    margin-top:60px;

}

.collection-card:nth-child(6){

    margin-top:30px;

}

.collection-card:nth-child(8){

    margin-top:55px;

}
/*==========================================================
EXPÉRIENCE ADROCA
==========================================================*/

.experienceSection{

    position:relative;

    padding:220px 0;

    overflow:hidden;

    background:
        linear-gradient(135deg,#04152f 0%,#082454 40%,#0b2e63 100%);

}
.experienceSection::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 15% 20%,
        rgba(212,175,55,.12),
        transparent 35%),

        radial-gradient(circle at 85% 80%,
        rgba(60,120,255,.14),
        transparent 40%);

}

.experienceSection .sectionTitle{

    position:relative;

    z-index:2;

}

.experienceSection .sectionTitle span{

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

    color:white;

}

.experienceSection .sectionTitle h2{

    color:white;

}

.experienceSection .sectionTitle p{

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

}
.experienceGrid{

    position:relative;

    z-index:5;

    width:min(1450px,92%);

    margin:110px auto 0;

    display:grid;

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

    gap:55px;

}
.experienceGrid::before{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    top:62px;

    height:4px;

    border-radius:30px;

    background:

        linear-gradient(90deg,
        #D4AF37,
        #ffffff,
        #D4AF37);

    opacity:.35;

}

.experienceTimeline{

    position:relative;

    z-index:2;

    width:min(1350px,92%);

    margin:100px auto 0;

    display:grid;

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

    gap:35px;

}
.experienceCard{

    position:relative;

    z-index:2;

    background:

        rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:45px 35px;

    transition:.45s;

}
.experienceCard:hover{

    transform:

        translateY(-18px);

    background:

        rgba(255,255,255,.10);

    box-shadow:

        0 30px 60px rgba(0,0,0,.28);

}
.experienceIcon{

    width:92px;

    height:92px;

    border-radius:50%;

    margin:0 auto 35px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(135deg,#D4AF37,#F5DD78);

    color:#0B2E63;

    font-size:2rem;

    box-shadow:

        0 15px 35px rgba(212,175,55,.35);

}
.experienceCard h3{

    text-align:center;

    color:white;

    font-size:1.55rem;

    margin-bottom:18px;

}
.experienceCard p{

    text-align:center;

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

    line-height:1.9;

}
.experienceIcon{

    animation:iconPulse 5s ease-in-out infinite;

}
@keyframes iconPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}
.experienceCard:nth-child(2){

    margin-top:35px;

}

.experienceCard:nth-child(3){

    margin-top:70px;

}

.experienceCard:nth-child(4){

    margin-top:105px;

}
@media(max-width:1100px){

    .experienceGrid{

        grid-template-columns:1fr;

    }

    .experienceGrid::before{

        display:none;

    }

    .experienceCard{

        margin-top:0 !important;

    }

}
.experienceStep{

    position:relative;

    padding:45px 35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(15px);

    transition:.4s;

}

.experienceStep:hover{

    transform:translateY(-12px);

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

}
.stepNumber{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#D4AF37;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    font-weight:800;

    margin-bottom:35px;

}

.experienceStep h3{

    color:white;

    font-size:1.6rem;

    margin-bottom:20px;

}

.experienceStep p{

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

    line-height:1.9;

}
@media(max-width:1100px){

    .experienceTimeline{

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

    }

}

@media(max-width:700px){

    .experienceTimeline{

        grid-template-columns:1fr;

    }

}
/*==========================================================
GALERIE
==========================================================*/

.gallerySection{

    padding:150px 0;

    background:#f5f8fc;

}

.galleryGrid{

    width:min(1350px,92%);

    margin:90px auto 0;

    display:grid;

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

    grid-auto-rows:280px;

    gap:25px;

}

.galleryItem{

    overflow:hidden;

    border-radius:28px;

    box-shadow:0 20px 45px rgba(16,38,73,.10);

}

.galleryItem.large{

    grid-row:span 2;

}
.galleryItem img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.galleryItem:hover img{

    transform:scale(1.08);

}
@media(max-width:900px){

    .galleryGrid{

        grid-template-columns:1fr;

        grid-auto-rows:260px;

    }

    .galleryItem.large{

        grid-row:auto;

    }

}
/*======================================================
CATALOGUE ADROCA
======================================================*/

.productMeta{

    display:flex;

    justify-content:space-between;

    margin-top:30px;

    font-size:.95rem;

    color:#0B2E63;

    font-weight:700;

}

.productMeta span{

    display:flex;

    align-items:center;

    gap:8px;

}
.discoverButton{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin:25px;

    height:62px;

    border-radius:18px;

    background:

    linear-gradient(135deg,

    #0B2E63,

    #184A9C);

    color:white;

    font-weight:700;

    font-size:1rem;

    text-decoration:none;

    transition:.35s;

}
.discoverButton:hover{

    background:

    linear-gradient(135deg,

    #D4AF37,

    #F4D76A);

    color:#082454;

    transform:

        translateY(-3px);

}
.productCard.available .productBox img{

    animation:

        heroProduct 8s ease-in-out infinite;

}
@keyframes heroProduct{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}
.showroom{

    width:min(1550px,95%);

    margin:100px auto 0;

    display:grid;

    grid-template-columns:1.25fr 1fr;

    gap:90px;

    align-items:center;
    overflow:hidden;

}
.showroom::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        -45deg,

        transparent,

        transparent 160px,

        rgba(255,255,255,.02) 161px,

        transparent 163px

    );

    animation:

    showroomGrid

    22s linear infinite;

}
@keyframes showroomGrid{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-260px);

    }

}
.thumb:nth-child(1){

    animation:

    floatMini 7s ease-in-out infinite;

}
.thumb:nth-child(2){

    animation:

    floatMini 8s ease-in-out infinite;

}
.thumb:nth-child(3){

    animation:

    floatMini 9s ease-in-out infinite;

}
.thumb:nth-child(4){

    animation:

    floatMini 10s ease-in-out infinite;

}
.thumb:nth-child(5){

    animation:

    floatMini 11s ease-in-out infinite;

}
.thumb:nth-child(6){

    animation:

    floatMini 12s ease-in-out infinite;

}
@keyframes floatMini{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.showroomLeft{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:820px;

}
.viewer{

    position:relative;

    width:100%;

    height:760px;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1800px;
    transform-style:preserve-3d;

}
.viewer img{

    z-index:15;

}
.productStage{

    z-index:2;

}
.showroom{

    position:relative;

}
.showroom::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at center,

            rgba(11,46,99,.10),

            transparent 65%

        );

    pointer-events:none;

}
.showroomBackground{

    position:absolute;

    inset:0;

    overflow:hidden;

}
.blurCircle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;

}
.c1{

    width:420px;

    height:420px;

    background:#0B2E63;

    left:-120px;

    top:120px;

    animation:blob1 20s infinite alternate;

}
.c2{

    width:360px;

    height:360px;

    background:#D4AF37;

    right:-80px;

    top:180px;

    animation:blob2 18s infinite alternate;

}
.c3{

    width:300px;

    height:300px;

    background:#4F7DFF;

    left:45%;

    bottom:-120px;

    animation:blob3 24s infinite alternate;

}
@keyframes blob1{

    to{

        transform:

            translate(80px,-60px)

            scale(1.2);

    }

}

@keyframes blob2{

    to{

        transform:

            translate(-90px,70px)

            scale(1.15);

    }

}

@keyframes blob3{

    to{

        transform:

            translate(-60px,-40px)

            scale(1.3);

    }

}

.viewerGlow{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    color-mix(in srgb,var(--showroom) 65%,white),

    transparent 72%);

    filter:blur(60px);

    transition:

    left .15s,

    top .15s;

}
.viewer img{

    position:relative;

    width:92%;

    transition:

        transform .6s,

        opacity .35s,

        filter .5s;

    transform-style:preserve-3d;

    will-change:transform;

    filter:

    drop-shadow(

    0 70px 80px

    rgba(0,0,0,.30));

}
.viewer{

    cursor:grab;

}
.viewer:active{

    cursor:grabbing;

}
@keyframes floatingProduct{

    0%{

        transform:

            translateY(0)

            rotateY(-8deg);

    }

    50%{

        transform:

            translateY(-16px)

            rotateY(8deg);

    }

    100%{

        transform:

            translateY(0)

            rotateY(-8deg);

    }

}
.showroomRight{

    display:flex;

    flex-direction:column;

    gap:22px;

}
.collectionLabel{

    display:inline-flex;

    width:max-content;

    padding:8px 20px;

    border-radius:999px;

    background:#0B2E63;

    color:white;

    font-size:.8rem;

    letter-spacing:2px;

}
#productTitle{

    font-size:4rem;

    color:#082454;

}
#productSubtitle{

    color:#D4AF37;

    font-size:1.8rem;

}
#productDescription{

    line-height:2;

    color:#59667B;

}
.productFacts{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}
.productFacts span{

    background:white;

    padding:14px 22px;

    border-radius:14px;

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

}
.thumbnails{

    margin-top:40px;

    display:grid;

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

    gap:18px;

}
.thumb{

    cursor:pointer;

    border:none;

    background:white;

    border-radius:18px;

    padding:10px;

    transition:.45s;

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

}
.thumb img{

    width:100%;

}
.thumb:hover{

    transform:

        translateY(-12px)

        scale(1.05);

}
.thumb.active{

    outline:4px solid #D4AF37;

}
.thumb{

    position:relative;

    overflow:hidden;

}
.thumb::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );

    transform:translateX(-180%);

}
.thumb:hover::before{

    animation:shine .8s;

}
@keyframes shine{

    to{

        transform:translateX(180%);

    }

}
.particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}
.particles span{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:white;

    opacity:.18;

    animation:particleFloat linear infinite;

}
.particles span:nth-child(1){

    left:8%;

    animation-duration:13s;

    animation-delay:-2s;

}

.particles span:nth-child(2){

    left:18%;

    animation-duration:17s;

}

.particles span:nth-child(3){

    left:28%;

    animation-duration:15s;

}

.particles span:nth-child(4){

    left:40%;

    animation-duration:18s;

}

.particles span:nth-child(5){

    left:54%;

    animation-duration:20s;

}

.particles span:nth-child(6){

    left:67%;

    animation-duration:16s;

}

.particles span:nth-child(7){

    left:76%;

    animation-duration:22s;

}

.particles span:nth-child(8){

    left:84%;

    animation-duration:19s;

}

.particles span:nth-child(9){

    left:91%;

    animation-duration:14s;

}

.particles span:nth-child(10){

    left:97%;

    animation-duration:18s;

}
@keyframes particleFloat{

    from{

        transform:

            translateY(850px)

            scale(.4);

        opacity:0;

    }

    20%{

        opacity:.18;

    }

    80%{

        opacity:.18;

    }

    to{

        transform:

            translateY(-120px)

            scale(1.3);

        opacity:0;

    }

}
.viewer::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.08);

    animation:

    rotateRing

    18s linear infinite;

}
.viewer::before{

    content:"";

    position:absolute;

    width:640px;

    height:640px;

    border-radius:50%;

    border:1px dashed rgba(255,255,255,.08);

    animation:

    rotateRingReverse

    32s linear infinite;

}
@keyframes rotateRing{

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotateRingReverse{

    to{

        transform:rotate(-360deg);

    }

}
.viewer img::before{

    display:none;

}
.viewer{

    overflow:hidden;

}
.viewer::after{

    content:"";

    position:absolute;

    width:220px;

    height:140%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transform:

        translateX(-800px)

        rotate(18deg);

    animation:

        shineViewer

        7s infinite;

}
@keyframes shineViewer{

    0%{

        transform:

        translateX(-800px)

        rotate(18deg);

    }

    40%{

        transform:

        translateX(900px)

        rotate(18deg);

    }

    100%{

        transform:

        translateX(900px)

        rotate(18deg);

    }

}
:root{

    --showroom:#1d4ed8;

}
.collectionProgress{

    margin:35px 0;

}
.progressTitle{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    color:#52627A;

    font-weight:600;

}
.progressBar{

    height:8px;

    border-radius:20px;

    background:#dce6f5;

    overflow:hidden;

}
#progressFill{

    position:absolute;

    left:0;

    top:0;

    height:100%;

    width:0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #0B2E63,
        #D4AF37
    );

    transition:width .45s ease;
    animation:

    progressGlow

    2s infinite alternate;

}

    

@keyframes progressGlow{

    from{

        filter:brightness(1);

    }

    to{

        filter:brightness(1.35);

    }

}
.productStage{

    position:absolute;

    bottom:40px;

    width:520px;

    height:140px;

    pointer-events:none;

}
.stageShadow{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:radial-gradient(

        ellipse,

        rgba(0,0,0,.32),

        transparent 72%

    );

    filter:blur(28px);

    animation:shadowPulse 5s ease-in-out infinite;

}
.stageRing{

    position:absolute;

    left:50%;

    top:50%;

    width:380px;

    height:380px;

    transform:

        translate(-50%,-50%)

        rotateX(78deg);

    border-radius:50%;

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

}
@keyframes shadowPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}
#progressTimer{

    position:absolute;

    left:0;

    top:0;

    height:100%;

    width:0;

    border-radius:999px;

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

}


/* ======================================================
   ACCÈS RAPIDES RÉTRACTABLES
   ====================================================== */
#quick-access-zone{
    width:100%;
    position:relative;
    z-index:20;
    padding:0 0 8px;
}

#quickAccessTrigger{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:min(260px,92%);
    margin:0 auto;
    padding:9px 18px;
    border:0;
    border-radius:0 0 16px 16px;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    font:inherit;
    font-weight:700;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

#quickAccessTrigger .quick-chevron{
    font-size:.75rem;
    transition:transform .25s ease;
}

#quick-access-zone #quick-access{
    max-height:0;
    opacity:0;
    overflow:hidden;
    margin:0 auto;
    padding:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:max-height .35s ease, opacity .25s ease, transform .35s ease, margin .35s ease, padding .35s ease;
}

/* Souris : ouverture temporaire au survol de la zone */
#quick-access-zone:hover #quick-access,
#quick-access-zone:focus-within #quick-access,
#quick-access-zone.is-open #quick-access{
    max-height:320px;
    opacity:1;
    margin:14px auto 18px;
    padding:0;
    pointer-events:auto;
    transform:translateY(0);
}

#quick-access-zone:hover #quickAccessTrigger .quick-chevron,
#quick-access-zone:focus-within #quickAccessTrigger .quick-chevron,
#quick-access-zone.is-open #quickAccessTrigger .quick-chevron{
    transform:rotate(180deg);
}

/* Une fois ouvert au clic, le simple départ de la souris referme le panneau */
@media (hover:hover){
    #quick-access-zone.is-open:not(:hover):not(:focus-within) #quick-access{
        max-height:0;
        opacity:0;
        margin:0 auto;
        pointer-events:none;
        transform:translateY(-8px);
    }
}

@media(max-width:700px){
    #quickAccessTrigger{
        width:min(220px,88%);
        padding:8px 14px;
        font-size:.9rem;
    }

    #quick-access-zone:hover #quick-access,
    #quick-access-zone:focus-within #quick-access,
    #quick-access-zone.is-open #quick-access{
        max-height:760px;
        margin:10px auto 12px;
    }

    #quick-access-zone #quick-access{
        width:min(94%,420px);
    }

    #quick-access a{
        padding:14px 8px;
    }

    #quick-access a i{
        font-size:25px;
        margin-bottom:7px;
    }
}