/* =========================
   PORTAIL RASPIPHIL V2
========================= */

.portail-container{
    max-width:1100px;
    margin:auto;
    padding:15px;
}


/* TITRES SECTIONS */

.section-title{
    font-size:22px;
    margin:18px 0 10px;
    color:#4db8ff;
}


/* GRILLES */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    margin-bottom:15px;
}


/* CARTES */

.dashboard-card{
    background:#151515;
    border:1px solid #333;
    border-radius:10px;
    padding:15px;
    text-align:center;
    text-decoration:none;
    color:white;
    transition:.2s;
}


.dashboard-card:hover{
    border-color:#4db8ff;
    transform:translateY(-2px);
}


/* ICONE */

.card-icon{
    font-size:30px;
    margin-bottom:8px;
}


/* TITRE CARTE */

.card-title{
    color:#4db8ff;
    font-size:17px;
    font-weight:bold;
    margin:6px 0;
}


/* CONTENU */

.card-content{
    color:#ffffff;
    font-size:15px;
    margin:8px 0;
    line-height:1.4;
}


/* DATE / INFO */

.card-info{
    color:#d6b85a;
    font-size:13px;
    margin-top:8px;
}


/* PROFIL */

.profil-card{
    padding:18px;
}


.profil-avatar{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #4db8ff;
}



/* BOUTONS MODULES */

.module-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:45px;

    background:#202020;
    border:1px solid #444;
    border-radius:8px;

    color:white;
    text-decoration:none;

    font-size:15px;
    transition:.2s;
}


.module-btn:hover{
    background:#333;
    border-color:#4db8ff;
}

/* SEPARATEURS */

.hr-blue{
    border:0;
    border-top:1px solid #2580ff;
    margin:20px 0;
}


.hr-green{
    border:0;
    border-top:1px solid #36c96b;
    margin:20px 0;
}


.hr-jaune{
    border:0;
    border-top:1px solid #e6c84a;
    margin:20px 0;
}


.hr-orange{
    border:0;
    border-top:1px solid #ff8c32;
    margin:20px 0;
}



/* MOBILE */

@media(max-width:600px){

    .portail-container{
        padding:10px;
    }


    .dashboard-grid{
        grid-template-columns:1fr;
    }


    .section-title{
        font-size:20px;
    }

}

/* ==============================
        PORTAIL PUBLIC
================================= */
.container{max-width:1000px;margin:auto;color:white;}
.card{background:#1e1e1e;border:1px solid #333;border-radius:12px;padding:15px;margin-bottom:15px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;}

.menu{
    background:#1b1b1b;
    padding:15px;
    border-radius:12px;
    text-align:center;
    text-decoration:none;
    color:white;
    display:block;
}

.menu:hover{background:#1db954;color:black;}

.avatar{
    width:80px;height:80px;border-radius:50%;object-fit:cover;
    border:2px solid #1db954;
}
/*** HEADER Public ***/
.Public-header{
    background: url("/_Ressources/images/Bannieres/banner_Public.png") center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 280px;

    display: flex;
    align-items: center;

    border-radius: 15px;
    overflow: hidden;
}
/*** HEADER USERS ***/
.Users-header{
    background: url("/_Ressources/images/Bannieres/Users_banner.png") center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 280px;

    display: flex;
    align-items: center;

    border-radius: 15px;
    overflow: hidden;
}
/*** HEADER Membres ***/
.Membres-header{
    background: url("/_Ressources/images/Bannieres/Membres_banner.png") center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 280px;

    display: flex;
    align-items: center;

    border-radius: 15px;
    overflow: hidden;
}
/*** HEADER ADMIN ***/
.Admin-header{
    background: url("/_Ressources/images/Bannieres/Admin_banner.png") center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 280px;

    display: flex;
    align-items: center;

    border-radius: 15px;
    overflow: hidden;
}
/*** HEADER Tuto_Public ***/
.Tuto_Public-header{
    background: url("/_Ressources/images/Bannieres/nos_tutoriels.png") center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 280px;

    display: flex;
    align-items: center;

    border-radius: 15px;
    overflow: hidden;
}
/*** HEADER OVERLAY ***/
.header-overlay{
    width: 100%;
    height: 100%;
    padding: 40px;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.15) 100%
    );

    color: #fff;
}

.header-overlay h1{
    margin:0 0 15px;
    font-size:2.4rem;
}

.header-overlay p{
    max-width:550px;
    font-size:1.1rem;
    line-height:1.6;
}

.social-container{
    max-width:1000px;
    margin:30px auto;
}

.social-title{
    text-align:center;
    color:white;
    margin-bottom:25px;
}

.social-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.social-card{
    background:#1e1e1e;
    border-radius:12px;
    padding:25px;
    text-align:center;
    text-decoration:none;
    color:white;
    transition:.3s;
}

.social-card:hover{
    transform:translateY(-5px);
    background:#2b2b2b;
}

.social-card h3{
    margin-top:10px;
}

.social-card p{
    color:#aaa;
}

.back-btn{
    display:inline-block;
    margin-bottom:20px;
    padding:10px 15px;
    background:#444;
    color:white;
    border-radius:8px;
    text-decoration:none;
}

.back-btn:hover{
    background:#666;
}
/*xxxxxxxxx*/
.Mini-thumbnail{
    width:100px;height:90px;border-radius:10%;object-fit:cover;
    border:2px solid #1db954;
}