/*

============================================================

TRANSITIONS LIMOUSINES

Explorateur de ressources

============================================================

*/





.tl-explorer {



    --teal: #0E9ACB;

    --teal-dark: #1374B5;

    --teal-light: #56B2D5;

    --teal-bg: #E5F1F5;



    --amber: #D97706;

    --amber-bg: #FEF3C7;



    --text: #111C1B;

    --text-mid: #3A4A49;

    --text-muted: #6B7F7E;



    --border: #D3E7EF;



    --bg: #F0F6F9;

    --white: #FFFFFF;



    --radius-xl: 34px;



    font-family:

        'Montserrat',

        sans-serif;



    color: var(--text);



    background:

        var(--bg);



    padding-bottom:

        80px;

}





/* ==========================================================

   LARGEUR

========================================================== */



.tl-explorer .hero,

.tl-explorer .search-layout {



    max-width: 1240px !important;



    margin-left:

        auto;



    margin-right:

        auto;

}





/* ==========================================================

   HERO

========================================================== */



.tl-explorer .hero-wrap {



    padding:

        90px 0 30px;

}





.tl-explorer .hero-panel {



    padding:

        38px;



    background:

        rgba(255,255,255,.90);



    border:

        1px solid

        rgba(14,154,203,.12);



    border-radius:

        var(--radius-xl);

}





.tl-explorer .eyebrow {



    display:

        inline-flex;



    padding:

        8px 14px;



    margin-bottom:

        18px;



    border-radius:

        999px;



    background:

        var(--amber-bg);



    color:

        var(--amber);



    font-size:

        .84rem;



    font-weight:

        700;

}





.tl-explorer h1 {



    margin:

        0 0 16px;



    font-size:

        clamp(

            2.2rem,

            4vw,

            3.8rem

        );



    line-height:

        1.12;



    color:

        var(--text);

}





.tl-explorer .hero-lead {



    max-width:

        760px;



    margin:

        0 0 25px;



    font-size:

        1.08rem;



    color:

        var(--text-mid);

}





/* ==========================================================

   RECHERCHE

========================================================== */



.tl-explorer .searchbar {



    display:

        grid;



    grid-template-columns:

        minmax(0,1fr)

        auto;



    gap:

        12px;

}





.tl-explorer .searchbar input {



    width:

        100%;



    min-height:

        56px;



    padding:

        0 18px;



    border:

        1px solid

        rgba(14,154,203,.18);



    border-radius:

        18px;



    background:

        #fff;



    color:

        var(--text);



    font:

        inherit;



    outline:

        none;

}





.tl-explorer .searchbar input:focus {



    border-color:

        var(--teal);



    box-shadow:

        0 0 0 3px

        rgba(14,154,203,.10);

}





/* ==========================================================

   BOUTONS

========================================================== */



.tl-explorer .tl-btn {



    min-height:

        48px;



    padding:

        0 19px;



    border-radius:

        999px;



    border:

        1px solid transparent;



    font:

        inherit;



    font-weight:

        700;



    cursor:

        pointer;



    transition:

        transform .18s ease,

        box-shadow .18s ease;

}





.tl-explorer .tl-btn:hover {



    transform:

        translateY(-1px);

}





.tl-explorer .tl-btn-primary {



    background:

        linear-gradient(

            135deg,

            var(--teal),

            var(--teal-dark)

        );



    color:

        #fff;



    box-shadow:

        0 14px 30px

        rgba(19,116,181,.22);

}





.tl-explorer .tl-btn-secondary {



    background:

        #fff;



    color:

        var(--teal-dark);



    border-color:

        var(--border);

}





/* ==========================================================

   GRILLE

========================================================== */



.tl-explorer .search-layout {



    display:

        grid;



    grid-template-columns:

        330px minmax(0,1fr);



    gap:

        24px;



    align-items:

        start;

}





/* ==========================================================

   FILTRES

========================================================== */



.tl-explorer .filters {



    position:

        sticky;



    top:

        100px;



    padding:

        24px;



    background:

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



    border:

        1px solid

        rgba(14,154,203,.12);



    border-radius:

        var(--radius-xl);

}





.tl-explorer #tlFilters {



    display:

        grid;



    gap:

        22px;

}





.tl-explorer .filter-head {



    display:

        flex;



    justify-content:

        space-between;



    align-items:

        center;



    gap:

        10px;

}





.tl-explorer .filter-head h2 {



    margin:

        0;



    font-size:

        1.35rem;

}





.tl-explorer .filter-group {



    display:

        grid;



    gap:

        10px;



    margin:

        0;



    padding:

        0;



    border:

        none;

}





.tl-explorer .filter-group legend {



    margin-bottom:

        4px;



    font-weight:

        800;

}





.tl-explorer .check-grid {



    display:

        grid;



    gap:

        8px;

}





.tl-explorer .check-pill {



    position:

        relative;

}





.tl-explorer .check-pill input {



    position:

        absolute;



    inset:

        0;



    opacity:

        0;



    cursor:

        pointer;

}





.tl-explorer .check-pill span {



    display:

        flex;



    justify-content:

        space-between;



    align-items:

        center;



    min-height:

        46px;



    padding:

        0 14px;



    border:

        1px solid

        rgba(14,154,203,.10);



    border-radius:

        15px;



    background:

        var(--teal-bg);



    font-weight:

        600;



    cursor:

        pointer;



    transition:

        all .18s ease;

}





.tl-explorer

.check-pill

input:checked + span {



    background:

        var(--amber-bg);



    border-color:

        rgba(217,119,6,.25);



    color:

        var(--amber);



    transform:

        translateY(-1px);

}





.tl-explorer .check-pill em {



    font-style:

        normal;



    font-size:

        .78rem;



    opacity:

        .65;

}





/* SELECT */



.tl-explorer .filter-group select,

.tl-explorer .sort-control select {



    width:

        100%;



    min-height:

        48px;



    padding:

        0 14px;



    border:

        1px solid

        var(--border);



    border-radius:

        14px;



    background:

        #fff;



    color:

        var(--text);



    font:

        inherit;

}





/* ==========================================================

   RESULTATS

========================================================== */



.tl-explorer .results-shell {



    position:

        relative;



    padding:

        24px;



    background:

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



    border:

        1px solid

        rgba(14,154,203,.12);



    border-radius:

        var(--radius-xl);

}





.tl-explorer .toolbar {



    display:

        flex;



    flex-wrap:

        wrap;



    justify-content:

        space-between;



    align-items:

        center;



    gap:

        14px;



    margin-bottom:

        18px;

}





.tl-explorer .count-badge {



    display:

        inline-flex;



    align-items:

        center;



    min-height:

        42px;



    padding:

        0 14px;



    border-radius:

        999px;



    background:

        var(--amber-bg);



    color:

        var(--amber);



    font-weight:

        800;

}





.tl-explorer .sort-control {



    display:

        flex;



    align-items:

        center;



    gap:

        10px;



    color:

        var(--text-muted);



    font-weight:

        600;

}





/* ==========================================================

   FILTRES ACTIFS

========================================================== */



.tl-explorer .active-filters {



    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        8px;



    min-height:

        32px;



    margin-bottom:

        18px;

}





.tl-explorer .active-chip {



    display:

        inline-flex;



    align-items:

        center;



    min-height:

        32px;



    padding:

        0 12px;



    border-radius:

        999px;



    background:

        var(--amber-bg);



    color:

        var(--amber);



    font-size:

        .8rem;



    font-weight:

        700;

}





/* ==========================================================

   CARTES

========================================================== */



.tl-explorer .results-list {



    display:

        grid;



    gap:

        16px;



    transition:

        opacity .15s ease;

}





.tl-explorer .results-list.is-loading {



    opacity:

        .45;

}





.tl-explorer .result-card {



    padding:

        23px;



    background:

        #fff;



    border:

        1px solid

        rgba(14,154,203,.12);



    border-radius:

        24px;



    transition:

        transform .18s ease,

        box-shadow .18s ease;

}





.tl-explorer .result-card:hover {



    transform:

        translateY(-2px);



    box-shadow:

        0 14px 32px

        rgba(14,154,203,.10);

}





.tl-explorer .result-meta {



    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        10px;



    margin-bottom:

        11px;



    font-size:

        .84rem;



    font-weight:

        700;



    color:

        var(--text-muted);

}





.tl-explorer .result-card h3 {



    margin:

        0 0 10px;



    font-size:

        1.35rem;



    line-height:

        1.28;

}





.tl-explorer .result-card h3 a {



    color:

        var(--text);



    text-decoration:

        none;

}





.tl-explorer .result-card p {



    margin:

        0 0 14px;



    color:

        var(--text-mid);

}





.tl-explorer .result-tags {



    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        8px;



    margin-bottom:

        16px;

}





.tl-explorer .result-tag {



    display:

        inline-flex;



    align-items:

        center;



    min-height:

        32px;



    padding:

        0 11px;



    border-radius:

        999px;



    background:

        rgba(14,154,203,.08);



    color:

        var(--teal-dark);



    font-size:

        .79rem;



    font-weight:

        700;

}





.tl-explorer .result-footer {



    display:

        flex;



    justify-content:

        space-between;



    align-items:

        center;



    flex-wrap:

        wrap;



    gap:

        12px;



    font-size:

        .92rem;

}





.tl-explorer .result-territory {



    color:

        var(--text-muted);

}





.tl-explorer .result-link {



    color:

        var(--teal-dark);



    font-weight:

        800;



    text-decoration:

        none;

}





/* ==========================================================

   ETAT VIDE / CHARGEMENT

========================================================== */



.tl-explorer .empty-state {



    padding:

        28px;



    background:

        var(--teal-bg);



    border:

        1px dashed

        rgba(14,154,203,.3);



    border-radius:

        22px;

}





.tl-explorer .empty-state h3 {



    margin:

        0 0 8px;

}





.tl-explorer .empty-state p {



    margin:

        0;

}





.tl-explorer .tl-loading {



    position:

        absolute;



    top:

        80px;



    right:

        28px;



    padding:

        7px 12px;



    border-radius:

        999px;



    background:

        var(--teal);



    color:

        #fff;



    font-size:

        .78rem;



    font-weight:

        700;



    box-shadow:

        0 8px 20px

        rgba(14,154,203,.20);

}





.tl-explorer .tl-error {



    padding:

        22px;



    border-radius:

        18px;



    background:

        #fff2f2;



    color:

        #8b2828;

}





/* ==========================================================

   RESPONSIVE

========================================================== */



@media (max-width: 1100px) {



    .tl-explorer .search-layout {



        grid-template-columns:

            1fr;

    }





    .tl-explorer .filters {



        position:

            static;

    }



}





@media (max-width: 767px) {



    .tl-explorer .hero-wrap {



        padding-top:

            45px;

    }





    .tl-explorer .hero-panel,

    .tl-explorer .filters,

    .tl-explorer .results-shell {



        padding:

            20px;

    }





    .tl-explorer .searchbar {



        grid-template-columns:

            1fr;

    }





    .tl-explorer .toolbar {



        flex-direction:

            column;



        align-items:

            stretch;

    }





    .tl-explorer .sort-control {



        flex-direction:

            column;



        align-items:

            flex-start;

    }





    .tl-explorer .result-footer {



        flex-direction:

            column;



        align-items:

            flex-start;

    }





    .tl-explorer .filter-head {



        align-items:

            flex-start;



        flex-direction:

            column;

    }



}





/* ==========================================================

   CARTE : IMAGE + CONTENU

========================================================== */



.tl-explorer .result-card-body {

    display: grid;

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

    gap: 22px;

    align-items: start;

}





/* IMAGE */



.tl-explorer .result-thumbnail {

    display: block;



    width: 145px;

    height: 105px;



    overflow: hidden;



    border-radius: 14px;



    background: var(--teal-bg);



    flex-shrink: 0;

}





.tl-explorer .result-thumbnail-img {

    display: block;



    width: 100%;

    height: 100%;



    object-fit: cover;



    transition: transform .3s ease;

}





.tl-explorer .result-thumbnail:hover .result-thumbnail-img {

    transform: scale(1.04); 

}





/* Si l'article n'a pas d'image à la une */



.tl-explorer .result-thumbnail-empty {

    background: linear-gradient(160deg, #1374B5 0%, #0E9ACB 60%, #56B2D5 100%);

}





/* CONTENU */



.tl-explorer .result-card-content {

    min-width: 0;

}



@media (max-width: 767px) {



    .tl-explorer .result-card-body {

        grid-template-columns: 1fr;

        gap: 16px;

    }





    .tl-explorer .result-thumbnail {

        width: 100%;

        height: auto;

        aspect-ratio: 16 / 9;

    }



}