<style>

/* ===============================================================================================================
   STYLE 
================================================================================================================= */

.btn{
    border-radius:50px;
    transition:.3s;
}

.btn:hover{
    background:#111;
    transform:translateY(-3px);
}

.site-container{
    width:90%;
    max-width:1400px;
    margin:auto;

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

    backdrop-filter:blur(10px);

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

    min-height:100vh;
}

.course-card{
    overflow:hidden;
    border:none;
    border-radius:15px;
}

.course-card img{
    transition:.5s;
}

.course-card:hover img{
    transform:scale(1.08);
}

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

body{
    font-family:'Poppins',sans-serif;
    background:url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?q=80&w=1974&auto=format&fit=crop') fixed center/cover no-repeat;
    color:#111;
}

/* CONTENEUR PRINCIPAL */

.site-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    background:#fff;
    min-height:100vh;
    border-left:1px solid rgba(255,255,255,0.3);
    border-right:1px solid rgba(255,255,255,0.3);
}



/* TOP BAR PREMIUM */
.top-bar{
    background: linear-gradient(90deg,#0f0f0f,#1a1a1a);
    color:#fff;
    padding:12px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

/* Masquer sur mobile */
@media (max-width:768px){
    .top-bar{
        display:none;
    }
}



@media screen and (max-width:768px){

    .top-bar{
        display:none !important;
    }

}

/* LEFT / RIGHT */
.top-left, .top-right{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}

/* BADGES */
.badge{
    padding:6px 12px;
    border-radius:30px;
    background: rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition:0.3s ease;
    font-weight:500;
    letter-spacing:0.3px;
}

/* Hover premium */
.badge:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
}

/* DATE COLOR */
.badge.date{
    color:#ffd166;
}

/* TIME COLOR */
.badge.time{
    color:#06d6a0;
}

/* VIEWS COLOR */
.badge.views{
    color:#4cc9f0;
}




/* HEADER */

header{
    background:#fff;
    padding:25px;
    border-bottom:4px solid orange;
}

.logo{
    font-size:42px;
    font-weight:700;
    color:#111;
}

.logo span{
    color:orange;
}

.slogan{
    margin-top:8px;
    color:#666;
}

/* =========================
   NAV PREMIUM GLASS
========================= */

nav{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(17,17,17,0.85);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255,165,0,0.15);
}

/* MENU PRINCIPAL */
.menu{
    display:flex;
    list-style:none;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    margin:0;
    padding:0;
}


.menu a.active{
    background:orange;
    color:#fff;
    border-radius:6px;
}



.menu li{
    position:relative;
}

/* LIENS */
.menu li a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:18px 22px;
    font-weight:500;
    letter-spacing:0.5px;
    transition:0.3s ease;
    position:relative;
}

/* EFFET HOVER PREMIUM */
.menu li a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:8px;
    width:0%;
    height:2px;
    background:orange;
    transition:0.3s ease;
    transform:translateX(-50%);
    box-shadow:0 0 10px orange;
}

.menu li:hover>a{
    color:orange;
}

.menu li:hover>a::after{
    width:60%;
}

/* =========================
   DROPDOWN PREMIUM
========================= */

.dropdown{
    position:absolute;
    top:100%;
    left:0;
    background:rgba(25,25,25,0.95);
    backdrop-filter: blur(8px);
    min-width:220px;
    border-radius:8px;
    padding:8px 0;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.3s ease;
}

.dropdown li a{
    padding:12px 18px;
    font-size:14px;
}

.dropdown li a:hover{
    background:rgba(255,165,0,0.1);
    color:orange;
}

/* AFFICHAGE ANIMÉ */
.menu li:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

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

.mobile-toggle{
    display:none;
    color:#fff;
    font-size:28px;
    padding:12px 18px;
    cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:768px){

    .mobile-toggle{
        display:block;
        text-align:right;
    }

    .menu{
        flex-direction:column;
        display:none;
        background:#000;
        width:100%;
    }

    .menu.active{
        display:flex;
    }

    .menu li{
        width:100%;
        text-align:left;
    }

    .dropdown{
        position:relative;
        transform:none;
        opacity:1;
        visibility:visible;
        display:none;
        box-shadow:none;
        background:#000;
    }

    .menu li.open .dropdown{
        display:block;
    }
}

/* BREAKING NEWS */

.breaking-news{
    display:flex;
    align-items:center;
    background:#000;
    color:#fff;
    height:50px;
}

.breaking-title{
    background:orange;
    color:#fff;
    padding:15px 25px;
    font-weight:bold;
    white-space:nowrap;
    flex-shrink:0;
    z-index:2;
}

/* Zone de défilement */
.breaking-wrapper{
    flex:1;
    overflow:hidden;
    position:relative;
    height:100%;
}

.breaking-content{
    position:absolute;
    white-space:nowrap;
    line-height:50px;
    animation:scrollNews 30s linear infinite;
}

/* Pause au survol */
.breaking-wrapper:hover .breaking-content{
    animation-play-state:paused;
    cursor:pointer;
}

@keyframes scrollNews{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}

/* =========================
   SLIDER
========================= */

.slider{
    position:relative;
    height:500px;
    overflow:hidden;
}

.slides{
    display:flex;
    width:100%;
    transition:transform 0.8s ease-in-out;
}

.slide{
    min-width:100%;
    flex-shrink:0;
    position:relative;
}

.slide img{
    width:100%;
    height:500px;
    object-fit:cover;
}

.slide-text{
    position:absolute;
    bottom:50px;
    left:50px;
    background:rgba(0,0,0,0.7);
    color:#fff;
    padding:20px;
    max-width:500px;
    border-radius:8px;
}

.slide-text h2{
    margin-bottom:10px;
}

.slide-text p{
    margin:0;
}

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

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.6);
    color:#fff;
    border:none;
    font-size:28px;
    width:50px;
    height:50px;
    cursor:pointer;
    z-index:10;
    border-radius:50%;
    transition:0.3s;
}

.slider-btn:hover{
    background:orange;
}

.prev{
    left:15px;
}

.next{
    right:15px;
}

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

@media(max-width:768px){

    .slider{
        height:350px;
    }

    .slide img{
        height:350px;
    }

    .slide-text{
        left:15px;
        right:15px;
        bottom:20px;
        max-width:none;
        padding:15px;
    }

    .slide-text h2{
        font-size:20px;
    }

    .slide-text p{
        font-size:14px;
    }

    .slider-btn{
        width:40px;
        height:40px;
        font-size:22px;
    }

}

/* CONTENU */

.main-content{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    padding:40px;
}

/* ARTICLES */

.section-title{
    border-left:6px solid orange;
    padding-left:15px;
    margin-bottom:25px;
    font-size:28px;
}

.course-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.course-card{
    border:1px solid #ddd;
    transition:0.3s;
    background:#fff;
}

.course-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.course-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.course-content{
    padding:20px;
}

.course-content h3{
    margin-bottom:10px;
}

.btn{
    display:inline-block;
    margin-top:15px;
    padding:12px 20px;
    background:orange;
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* SIDEBAR GLOBAL */
.sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

/* BOX PREMIUM */
.sidebar-box.premium{
    background:#0b1324;
    color:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    border-left:4px solid orange;
    transition:0.3s;
}

/* hover effet pro */
.sidebar-box.premium:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

/* TITRES */
.sidebar-box h3{
    color:orange;
    margin-bottom:15px;
    font-size:18px;
}

/* SEARCH */
.search-box input{
    width:100%;
    padding:14px;
    border:none;
    border-radius:8px;
    margin-bottom:10px;
    outline:none;
}

/* BUTTON */
.search-box button{
    width:100%;
    padding:14px;
    background:orange;
    color:#000;
    font-weight:bold;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:0.3s;
}

.search-box button:hover{
    background:#ffb347;
}

/* LIST STYLE */
.sidebar-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-box ul li{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
    transition:0.3s;
    cursor:pointer;
}

.sidebar-box ul li:hover{
    color:orange;
    padding-left:8px;
}

/* HIGHLIGHT BOX */
.sidebar-box.highlight{
    background:linear-gradient(135deg,#0b1324,#111b33);
    border-left:4px solid orange;
}

/* RESPONSIVE */
@media(max-width:768px){
    .sidebar-box.premium{
        padding:20px;
    }
}

/* IMAGE PRESENTATION */
.sidebar-image{
    width:100%;
    height:auto;
    display:block;
    border-radius:10px;
    margin:15px 0;
    object-fit:cover;
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    transition:0.4s ease;
}

.sidebar-image:hover{
    transform:scale(1.03);
}

/* PDF VIEWER */

.pdf-viewer{
    width:100%;
    height:600px;
    border:none;
    margin-top:20px;
}

/* FOOTER */

footer{
    background:#111;
    color:#fff;
    padding:50px 30px;
    text-align:center;
    margin-top:40px;
}

/* BOUTON TOP */

#topBtn{
    position:fixed;
    bottom:30px;
    right:30px;
    background:orange;
    color:#fff;
    border:none;
    width:55px;
    height:55px;
    font-size:24px;
    cursor:pointer;
    display:none;
    z-index:999;
}

/* POPUP ADMIN */

.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup-content{
    background:#fff;
    width:400px;
    padding:30px;
}

.popup-content h2{
    margin-bottom:20px;
}

.popup-content input{
    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:1px solid #ccc;
}

.popup-content button{
    width:100%;
    padding:14px;
    border:none;
    background:orange;
    color:#fff;
    cursor:pointer;
}

/* RESPONSIVE */

.mobile-toggle{
    display:none;
    color:#fff;
    font-size:30px;
    padding:15px;
    cursor:pointer;
}

@media(max-width:900px){

.main-content{
    grid-template-columns:1fr;
}

.slider{
    height:300px;
}

.slide img{
    height:300px;
}

.menu{
    display:none;
    flex-direction:column;
}

.menu.active{
    display:flex;
}

.mobile-toggle{
    display:block;
}

}


/* FOOTER GLOBAL */
.footer{
    background:#0b1324;
    color:#fff;
    padding:60px 20px 20px;
    font-family:Arial, sans-serif;
}

/* CONTAINER */
.footer-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    max-width:1200px;
    margin:auto;
}

/* BOX */
.footer-box h2{
    color:orange;
    margin-bottom:15px;
}

.footer-box h3{
    color:orange;
    margin-bottom:15px;
    position:relative;
}

.footer-box p{
    line-height:1.6;
    color:#ccc;
}

/* LINKS */
.footer-box a{
    display:block;
    color:#ccc;
    text-decoration:none;
    margin-bottom:8px;
    transition:0.3s;
}

.footer-box a:hover{
    color:orange;
    padding-left:5px;
}

/* BOTTOM BAR */
.footer-bottom{
    text-align:center;
    margin-top:40px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,0.1);
    color:#aaa;
    font-size:14px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-box a{
        display:inline-block;
        margin:5px;
    }
}


/* ===============================================================================================
   PRESENTATION
================================================================================================== */

.presentation-page{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* =========================
   TITRE PAGE
========================= */

.presentation-page .section-title{
    font-size:28px;
    color:#111;
    border-left:6px solid orange;
    padding-left:15px;
    margin-bottom:10px;
}

/* =========================
   BIO CARD
========================= */

.presentation-page .bio-card{
    display:flex;
    gap:30px;
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* PHOTO */
.presentation-page .bio-photo{
    flex:0 0 300px;
}

.presentation-page .bio-photo img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:15px;
}

/* TEXTE */
.presentation-page .bio-text{
    flex:1;
}

.presentation-page .bio-text h1{
    margin-bottom:10px;
    color:#111;
}

.presentation-page .bio-badge{
    display:inline-block;
    background:orange;
    color:#fff;
    padding:8px 15px;
    border-radius:30px;
    margin-bottom:20px;
    font-size:14px;
}

.presentation-page .bio-text p{
    line-height:1.8;
    margin-bottom:15px;
    text-align:justify;
}

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

.presentation-page .bio-stats{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.presentation-page .bio-stats div{
    flex:1;
    background:#f7f7f7;
    padding:15px;
    border-radius:12px;
    text-align:center;
}

.presentation-page .bio-stats strong{
    display:block;
    font-size:28px;
    color:orange;
}

.presentation-page .bio-stats span{
    font-size:13px;
    color:#666;
}

/* =========================
   GALERIE / SLIDER
========================= */

.presentation-page .gallery-box{
    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.presentation-page .gallery-box h3{
    margin-bottom:20px;
}

/* SLIDER CONTROLS */
.presentation-page .presentation-slider{
    display:flex;
    align-items:center;
    gap:15px;
}

.presentation-page .presentation-slider button{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:orange;
    color:#fff;
    font-size:20px;
    cursor:pointer;
}

/* IMAGES */
.presentation-page .photo-track{
    flex:1;
    position:relative;
    height:450px;
    overflow:hidden;
}

.presentation-page .photo-track img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:15px;
    opacity:0;
    transition:0.5s;
}

.presentation-page .photo-track img.active-photo{
    opacity:1;
}

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

@media(max-width:768px){

    .presentation-page .bio-card{
        flex-direction:column;
    }

    .presentation-page .bio-photo img{
        height:300px;
    }

    .presentation-page .bio-stats{
        flex-direction:column;
    }
}


/* ===============================================================================================
   CONTACTS
================================================================================================== */

/* =========================
   PAGE CONTACT
========================= */

.contact-page{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* =========================
   TITRE
========================= */

.contact-page .contact-title{
    font-size:28px;
    color:#111;
    border-left:6px solid orange;
    padding-left:15px;
}

/* =========================
   BLOC INFOS
========================= */

.contact-page .contact-card{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-page .contact-grid{
    display:flex;
    gap:15px;
}

.contact-page .contact-item{
    flex:1;
    background:#f7f7f7;
    padding:15px;
    border-radius:12px;
    text-align:center;
}

.contact-page .contact-item strong{
    display:block;
    font-size:22px;
    color:orange;
    margin-bottom:8px;
}

.contact-page .contact-item span{
    font-size:13px;
    color:#666;
}

/* =========================
   BOUTON WHATSAPP
========================= */

.contact-page .contact-btn{
    display:inline-block;
    background:orange;
    color:#fff;
    text-decoration:none;
    padding:8px 15px;
    border-radius:30px;
    transition:0.3s;
}

.contact-page .contact-btn:hover{
    background:#111;
    transform:translateY(-2px);
}

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

.contact-page .contact-form-box{
    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-page .contact-form-box h3{
    margin-bottom:20px;
}

.contact-page .contact-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contact-page .contact-form input,
.contact-page .contact-form textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-family:inherit;
}

.contact-page .contact-form input:focus,
.contact-page .contact-form textarea:focus{
    border-color:orange;
}

/* =========================
   BUTTON FORM
========================= */

.contact-page .contact-form button{
    background:orange;
    color:#fff;
    border:none;
    padding:15px;
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.contact-page .contact-form button:hover{
    background:#111;
    transform:translateY(-2px);
}

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

@media(max-width:768px){

    .contact-page .contact-grid{
        flex-direction:column;
    }
}


































/* ===============================================================================================
   PHOTOS
================================================================================================== */
/* =========================
   PAGE PHOTO
========================= */

.photo-page{
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* =========================
   TITRE
========================= */

.photo-page .section-title{
    font-size:28px;
    color:#111;
    border-left:6px solid orange;
    padding-left:15px;
}

/* =========================
   GALERIE GRID
========================= */

.photo-page .photo-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
}

/* =========================
   CARTE PHOTO
========================= */

.photo-page .photo-card{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    cursor:pointer;
    background:#000;
}

.photo-page .photo-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:0.4s ease;
}

/* HOVER ZOOM */
.photo-page .photo-card:hover img{
    transform:scale(1.1);
    filter:brightness(0.85);
}

/* OVERLAY */
.photo-page .photo-overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:12px;
    background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);
    color:#fff;
    font-size:13px;
    opacity:0;
    transition:0.3s;
}

.photo-page .photo-card:hover .photo-overlay{
    opacity:1;
}

/* BADGE */
.photo-page .photo-badge{
    position:absolute;
    top:10px;
    left:10px;
    background:#ff7a00;
    color:#fff;
    font-size:11px;
    padding:5px 10px;
    border-radius:20px;
}

/* =========================
   LIGHTBOX
========================= */

.photo-page .lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.92);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
    padding:20px;
}

.photo-page .lightbox img{
    max-width:100%;
    max-height:100%;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    animation:zoomIn 0.25s ease;
}

/* ANIMATION */
@keyframes zoomIn{
    from{
        transform:scale(0.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

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

@media(max-width:768px){

    .photo-page .photo-card img{
        height:180px;
    }
}


</style>