/*═══════════════════════════════════════════════════════
    CAPVID.CSS
    Clinique Juridique JusDivinum
═══════════════════════════════════════════════════════*/


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

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

html{
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:#2979ff #071628;
}

body{
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
    background:
        radial-gradient(circle at top left,rgba(41,121,255,.18),transparent 30%),
        radial-gradient(circle at top right,rgba(255,201,40,.10),transparent 25%),
        linear-gradient(180deg,#071628,#0f2745,#071628);
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;
}


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

:root{

    --primary:#1565c0;
    --primary-light:#2979ff;

    --secondary:#d72638;

    --gold:#ffc928;

    --bg:#071628;
    --bg2:#102742;

    --text:#ffffff;
    --muted:rgba(255,255,255,.74);

    --glass:rgba(255,255,255,.06);
    --glass-border:rgba(255,255,255,.10);

    --radius:24px;

    --shadow:
        0 18px 45px rgba(0,0,0,.30);

    --transition:
        .35s cubic-bezier(.2,.8,.2,1);

}


/*======================================================
FOND ANIME
======================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.05;

    background-image:
        radial-gradient(circle,#fff 1px,transparent 1px);

    background-size:90px 90px;

    animation:starsMove 140s linear infinite;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-320px);

    }

}

body::after{

    content:"";

    position:fixed;

    left:-280px;

    bottom:-280px;

    width:820px;

    height:820px;

    border-radius:50%;

    pointer-events:none;

    filter:blur(80px);

    background:
        radial-gradient(circle,
        rgba(41,121,255,.20),
        transparent 70%);

}


/*======================================================
ELEMENTS
======================================================*/

section{

    position:relative;

    padding:60px 7%;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    font:inherit;

}

ul{

    list-style:none;

}

h1,h2,h3{

    font-weight:800;

    line-height:1.15;

}

p{

    line-height:1.8;

    color:var(--muted);

}


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

.section-small{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:11px 20px;

    border-radius:999px;

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

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

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-small::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

}


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

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:35px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.section-header h2{

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

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 30px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    color:#fff;

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

    box-shadow:
        0 15px 35px rgba(21,101,192,.35);

}

.btn-secondary{

    color:#fff;

    background:

        rgba(255,255,255,.07);

    border:

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

}

.btn:hover{

    transform:translateY(-4px);

}


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

.hero-video{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    min-height:78vh;

    padding:120px 7% 80px;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(7,22,40,.15),

            rgba(7,22,40,.55),

            rgba(7,22,40,.92)

        );

}

.hero-particles{

    position:absolute;

    inset:0;

    opacity:.22;

    background-image:
        radial-gradient(circle,#fff 1px,transparent 1px);

    background-size:120px 120px;

    animation:particlesMove 90s linear infinite;

}

@keyframes particlesMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-420px);

    }

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:980px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 24px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

}

.hero-tag i{

    color:var(--gold);

}

.hero-content h1{

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

    margin-bottom:28px;

}

.hero-content h1 span{

    display:block;

    background:

        linear-gradient(

            90deg,

            #fff,

            var(--gold)

        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-content p{

    max-width:820px;

    margin:0 auto 42px;

    font-size:1.12rem;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.hero-scroll{

    position:absolute;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

}

.hero-scroll span{

    display:block;

    width:32px;

    height:55px;

    border-radius:30px;

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

    position:relative;

}

.hero-scroll span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff;

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:1;

        top:8px;

    }

    100%{

        opacity:0;

        top:30px;

    }

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

.statistics{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

.stat-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:220px;

    padding:38px 28px;

    border-radius:var(--radius);

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(41,121,255,.18),
        transparent 65%);

    opacity:0;

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:rgba(41,121,255,.35);

    box-shadow:
        0 28px 60px rgba(0,0,0,.38);

}

.stat-card:hover::before{

    opacity:1;

}

.stat-card i{

    font-size:2.2rem;

    color:var(--gold);

    margin-bottom:18px;

}

.stat-card h2{

    font-size:2.4rem;

    margin-bottom:10px;

    color:#fff;

}

.stat-card p{

    color:var(--muted);

    font-size:1rem;

}


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

.presentation{

    display:grid;

    grid-template-columns:58% 42%;

    gap:70px;

    align-items:center;

}

.presentation-left{

    position:relative;

}

.presentation-left h2{

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

    margin-bottom:24px;

}

.presentation-left p{

    margin-bottom:35px;

    max-width:720px;

}

.presentation-list{

    display:grid;

    gap:16px;

}

.presentation-list li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    border-radius:18px;

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

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

    transition:var(--transition);

}

.presentation-list li:hover{

    transform:translateX(10px);

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

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

}

.presentation-list i{

    color:var(--gold);

    font-size:1rem;

}


/*======================================================
IMAGE DE PRESENTATION
======================================================*/

.presentation-right{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.presentation-right::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(255,201,40,.15),
        transparent 72%);

    filter:blur(40px);

}

.presentation-right img{

    position:relative;

    z-index:2;

    width:min(100%,560px);

    filter:
        drop-shadow(
        0 28px 60px rgba(0,0,0,.40));

    transition:
        filter .4s ease;

}

.presentation-right:hover img{

    filter:
        drop-shadow(
        0 40px 75px rgba(0,0,0,.55));

}
/*======================================================
BARRE D'OUTILS
======================================================*/

.video-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

    padding:28px 32px;

    margin-bottom:30px;

    border-radius:var(--radius);

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow);

}


/*======================================================
ZONE DE RECHERCHE
======================================================*/

.search-box{

    flex:1;

    min-width:300px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 22px;

    border-radius:18px;

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

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

    transition:var(--transition);

}

.search-box:hover{

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

}

.search-box:focus-within{

    border-color:rgba(41,121,255,.45);

    box-shadow:

        0 0 0 4px rgba(41,121,255,.12);

}

.search-box i{

    color:var(--gold);

    font-size:1rem;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:1rem;

}

.search-box input::placeholder{

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

}


/*======================================================
COMPTEUR
======================================================*/

.toolbar-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

}

#videoCount{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:130px;

    padding:14px 24px;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-light)

        );

    color:#fff;

    font-weight:700;

    font-size:.92rem;

    box-shadow:

        0 14px 32px rgba(21,101,192,.30);

}


/*======================================================
SECTION VIDEOS
======================================================*/

.videos-section{

    position:relative;

    padding:45px 7% 20px;

    margin-bottom:0;

}

.videos-section .section-header{

    margin-bottom:0px;

}


/*======================================================
FILTRES
======================================================*/

.filter-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.filter-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    transition:var(--transition);

    backdrop-filter:blur(12px);

}

.filter-btn:hover{

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

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

}

.filter-btn.active{

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    border-color:transparent;

    color:#fff;

    box-shadow:

        0 16px 35px rgba(21,101,192,.28);

}


/*======================================================
TRANSITION DES FILTRES
======================================================*/

.filter-btn,
.search-box,
#videoCount{

    will-change:transform;

}

.filter-btn:active{

    transform:scale(.96);

}
/*======================================================
GRILLE DES CAPSULES
======================================================*/

.video-grid{

    display:grid;

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

    gap:40px;

    align-items:stretch;

    margin-bottom:16px;

}


/*======================================================
CARTE VIDEO
======================================================*/

.video-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:28px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow);

    transition:

        border-color .35s,

        box-shadow .35s;

    transform-style:preserve-3d;

    will-change:transform;

}

.video-card:hover{

    border-color:

        rgba(41,121,255,.35);

    box-shadow:

        0 35px 75px rgba(0,0,0,.42);

}


/*======================================================
SPOTLIGHT
(utilisé par le JS)
======================================================*/

.video-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

    transition:.25s;

    background:

        radial-gradient(

            circle at var(--mouse-x,50%)

            var(--mouse-y,50%),

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

            transparent 42%

        );

}

.video-card:hover::before{

    opacity:1;

}


/*======================================================
MINIATURE
======================================================*/

.video-thumbnail{

    position:relative;

    height:220px;

    overflow:hidden;

    background:#000;

    cursor:pointer;

}

.video-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .7s,

        filter .7s;

}

.video-card:hover .video-thumbnail img{

    transform:scale(1.08);

    filter:

        brightness(1.05)

        contrast(1.05)

        saturate(1.08);

}


/*======================================================
OVERLAY
======================================================*/

.video-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(

            rgba(0,0,0,.08),

            rgba(0,0,0,.35)

        );

    opacity:0;

    transition:.35s;

}

.video-card:hover .video-overlay{

    opacity:1;

}


/*======================================================
BOUTON PLAY
======================================================*/

.play-video{

    width:78px;

    height:78px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:1.45rem;

    box-shadow:

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

    transition:var(--transition);

}

.play-video:hover{

    transform:scale(1.10);

}


/*======================================================
DUREE
======================================================*/

.video-duration{

    position:absolute;

    right:16px;

    bottom:16px;

    padding:8px 14px;

    border-radius:999px;

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

    color:#fff;

    font-size:.80rem;

    font-weight:700;

    backdrop-filter:blur(8px);

}


/*======================================================
CONTENU
======================================================*/

.video-content{

    display:flex;

    flex-direction:column;

    gap:18px;

    flex:1;

    padding:26px;

}


/*======================================================
ENTETE
======================================================*/

.video-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}

.document-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 16px;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.video-views{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--muted);

    font-size:.9rem;

}

.video-views i{

    color:var(--gold);

}


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

.video-content h3{

    font-size:1.45rem;

    line-height:1.35;

    transition:.35s;

}

.video-card:hover h3{

    color:var(--gold);

}


/*======================================================
DESCRIPTION
======================================================*/

.video-content p{

    flex:1;

    color:var(--muted);

    line-height:1.75;

}


/*======================================================
PIED
======================================================*/

.video-footer{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:8px;

}


/*======================================================
BOUTON YOUTUBE
======================================================*/

.btn-document{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:140px;

    height:46px;

    padding:0 22px;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-light)

        );

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    box-shadow:

        0 12px 28px rgba(21,101,192,.30);

}

.btn-document:hover{

    transform:translateY(-3px);

}


/*======================================================
PARTAGER
======================================================*/

.share-video{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:140px;

    height:46px;

    padding:0 22px;

    border-radius:999px;

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

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

    color:#fff;

    transition:var(--transition);

}

.share-video i{

    color:var(--gold);

}

.share-video:hover{

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

    transform:translateY(-3px);

}
/*======================================================
MODAL VIDEO
======================================================*/

.video-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.35s ease;

    z-index:9999;

}

.video-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.video-modal-backdrop{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(10px);

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

}

.video-modal-content{

    position:relative;

    width:min(1100px,94vw);

    z-index:10;

    pointer-events:auto;

    animation:modalAppear .35s ease;

}

@keyframes modalAppear{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*======================================================
BOUTON FERMER
======================================================*/

.close-video{

    position:absolute;

    top:-18px;

    right:-18px;

    width:54px;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            #ff5a5a

        );

    color:#fff;

    font-size:1.3rem;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:

        0 18px 40px rgba(0,0,0,.40);

    z-index:20;

}

.close-video:hover{

    transform:

        rotate(90deg)

        scale(1.08);

}


/*======================================================
LECTEUR
======================================================*/

.video-player{

    position:relative;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:24px;

    background:#000;

    box-shadow:

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

}

.video-player iframe{

    width:100%;

    height:100%;

    border:none;

    display:block;

}


/*======================================================
TOAST
======================================================*/

.toast{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:

        translateX(-50%)

        translateY(120px);

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 26px;

    border-radius:999px;

    background:rgba(7,22,40,.96);

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

    backdrop-filter:blur(16px);

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

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:10000;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:

        translateX(-50%)

        translateY(0);

}

.toast i{

    color:#35d56c;

    font-size:1.05rem;

}

.toast span{

    color:#fff;

    font-weight:600;

}


/*======================================================
RETOUR EN HAUT
======================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:1.15rem;

    box-shadow:

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

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:500;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:

        translateY(-6px)

        scale(1.08);

}


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

.cta-section{

    position:relative;

    overflow:hidden;

    display:block;

    text-align:center;

    margin:0;

    padding:55px 7%;

    background:
        linear-gradient(
            135deg,
            rgba(21,101,192,.18),
            rgba(215,38,56,.12)
        );

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

    border-radius:32px;

    box-shadow:var(--shadow);

}
.cta-glow{

    position:absolute;

    width:450px;

    height:450px;

    top:-220px;

    right:-220px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,201,40,.18),

            transparent 70%

        );

    filter:blur(35px);

    animation:ctaRotate 22s linear infinite;

}

@keyframes ctaRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.cta-glow{

    z-index:0;

}

.cta-section .section-small,
.cta-section h2,
.cta-section p,
.cta-section .cta-buttons{

    position:relative;

    z-index:2;

}

.cta-section h2{

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

    margin:22px 0;

}

.cta-section p{

    max-width:760px;

    margin:0 auto 38px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}
.cta-section{

    opacity:1 !important;

    transform:none !important;

}