/*======================================================
LAYOUT PRINCIPAL
======================================================*/

.layout-grid{

    display:grid;

    grid-template-columns:290px minmax(0,1fr);

    gap:40px;

    align-items:start;

    padding:50px 0 80px;

}

.data-sidebar{

    position:sticky;

    top:25px;

}

.sidebar-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

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

}

.sidebar-card h3{

    color:var(--primary);

    margin-bottom:20px;

    font-size:24px;

}

#categoryList{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.category-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

    font-weight:600;

}

.category-item:hover{

    background:#EDF3FF;

    color:var(--primary);

}

.category-item.active{

    background:linear-gradient(135deg,#184A9C,#2E66D0);

    color:#fff;

}

.category-item span{

    opacity:.75;

    font-size:13px;

}
/*======================================================
ZONE DES DONNÉES
======================================================*/

.data-content{

    min-width:0;

}

.data-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    flex-wrap:wrap;

    gap:20px;

}

.data-toolbar h3{

    color:var(--primary);

    font-size:20px;

}

.data-toolbar select{

    border:1px solid #E5E7EB;

    border-radius:12px;

    padding:12px 16px;

    background:#fff;

}
/*======================================================
GRILLE
======================================================*/

.data-grid{

    display:grid;

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

    gap:28px;

    align-items:start;

}
/*======================================================
CARTES DU CATALOGUE
======================================================*/

.data-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

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

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

    display:flex;

    flex-direction:column;

    gap:18px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    height:100%;

}

.data-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(24,74,156,.05);

    top:-55px;

    right:-55px;

    transition:.35s;

}

.data-card:hover{

    transform:translateY(-10px);

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

}

.data-card:hover::after{

    transform:scale(1.35);

}

.data-card h3{

    color:var(--primary);

    font-size:18px;

    line-height:1.45;
    
    font-weight:700;

    margin:0;

}

.data-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

}

.data-card-icon{

    width:46px;

    height:46px;

    border-radius:16px;

    background:#EDF3FF;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:20px;

    flex-shrink:0;

}

.data-card-body{

    display:flex;

    flex-direction:column;

    gap:10px;

    color:#555;

}

.data-card-body div{

    display:flex;

    align-items:center;

    gap:10px;

}

.data-card-body i{

    width:22px;

    color:var(--gold);

    text-align:center;

    flex-shrink:0;

}
.data-card-body{

    font-size:15px;

    line-height:1.7;

}
.data-card{

    cursor:pointer;

}
.data-card-footer .btn{

    transition:.25s;

}

.data-card-footer .btn:hover{

    transform:translateY(-2px);

}

.data-card-footer{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding-top:15px;

    border-top:1px solid #ECECEC;

}
/*======================================================
BADGES
======================================================*/

.badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.badge{

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.3px;

}

.badge-type{

    background:#EDF3FF;

    color:var(--primary);

}

.badge-domain{

    background:#FFF3D6;

    color:#9A6700;

}

.badge-status{

    background:#E8F8EC;

    color:#1D7A39;

}

.badge-new{

    background:#E53935;

    color:#fff;

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

.data-card-footer .btn{

    width:auto;

    padding:12px 22px;

}
.card-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.favorite-btn{

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

    background:#EDF3FF;

    color:var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.favorite-btn:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-2px);

}
.category-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 18px;

    border:none;

    background:#fff;

    border-radius:14px;

    cursor:pointer;

    transition:.30s;

    font-weight:600;

    color:#444;

}

.category-btn strong{

    background:#EDF3FF;

    color:var(--primary);

    min-width:30px;

    height:30px;

    border-radius:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

}

.category-btn:hover{

    background:#EDF3FF;

    transform:translateX(6px);

}

.category-btn.active{

    background:linear-gradient(135deg,#184A9C,#2E66D0);

    color:#fff;

}

.category-btn.active strong{

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

    color:#fff;

}
/*======================================================
TOOLBAR V2
======================================================*/

.toolbar-left{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    color:var(--primary);

    font-weight:600;

}

.toolbar-left i{

    color:var(--gold);

    font-size:22px;

}

.toolbar-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.toolbar-right label{

    font-weight:600;

    color:#555;

}
/*======================================================
STRUCTURE DE LA CARTE
======================================================*/

.data-card-header{

    padding-bottom:18px;

    border-bottom:1px solid #ECECEC;

}

.badges{

    padding-top:4px;

    padding-bottom:18px;

    border-bottom:1px solid #ECECEC;

}

.data-card-body{

    padding-top:4px;

    padding-bottom:8px;

}

.data-card-body div{

    min-height:26px;

}

.data-card-footer{

    margin-top:10px;

}