.weather-hero {
    background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, #3b82f6 0%, #6366f1 55%, #8b5cf6 100%);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(17, 24, 39, .2);
}

.weather-emoji {
    font-size: 64px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
    animation: bob 3.2s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

#meteoTabs .nav-link {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: .75rem;
}

    #meteoTabs .nav-link.active {
        background: #fff;
        color: #111827;
        font-weight: 600;
    }

.weather-pane {
    display: none;
    border-radius: .75rem;
    padding: .5rem .75rem;
    background: rgba(255, 255, 255, .1);
}

    .weather-pane.show {
        display: block;
    }

.kpi-counter {
    font-size: 3rem;
    font-weight: bold;
    color: #e74c3c;
}

.kpi-underline {
    height: 4px;
    background: linear-gradient(90deg, #e74c3c, #f39c12);
    width:0;
    margin: 4px auto 0;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes underlineGrow {
    from {
        width: 0;
    }

    to {
        width: 80%;
    }
}

.tres-petit-card {
    min-height : 200px;
}

.petite-carte {
    min-height: 300px; 
}

.moyenne-carte {
    min-height: 400px;
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colonnes égales */
    gap: 1rem; /* espacement entre les cartes */
}

    .custom-grid .card {
        height: 100%; /* pour garder la hauteur uniforme */
    }

/* Variantes de largeur */
.col-span-1 {
    grid-column: span 1;
}
/* taille "petite" */
.col-span-2 {
    grid-column: span 2;
}
/* équivaut à col-md-6 */
.col-span-1-5 {
    grid-column: span 1;
    grid-column-end: span 1;
}
/* optionnel */
.col-span-1-5 {
    grid-column: span 2;
}
/* si tu veux approx météo 1.5 */

.photo-profil {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid black;
}

.layout-container {
    margin-left: clamp(-300px, -90vw, 0px);
}


.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(300px, 1fr));
    /*grid-auto-rows: minmax(0px, 164px); hauteur min mais s’adapte */
    grid-auto-rows: minmax(0px, 195px);
    gap: 1rem;
}

.img_bienvenue {
    max-height: 220px;
}


/* Positionnement des cartes selon Excel */
.castor {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.accident {
    grid-column: 3 / 4; /* Colonne B */
    grid-row: 1 / 1; /* Ligne 1 */
}

/* B2 */
.bienvenue {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
/* C1 */
.meteo {
    grid-column: 5 / 6;
    grid-row: 1 / 4;
}
/* D1-D3 */
.linkedin {
    grid-column: 6 / 8;
    grid-row: 1 / 5;
}
/* E1-E3 */
.dernieres {
    grid-column: 1 / 2;
    grid-row: 3 / 6;
}

.img_dernieres {
    width: 150px;
    height: 150px;
    object-fit: cover;
}
/* Vidéo : occupe B2-C3 */
.video {
    grid-column: 3 / 5; /* B à C */
    grid-row: 2 / 4; /* lignes 2 et 3 */
}

/* B1-C3 */
.powerbi {
    grid-column: 3 / 5;
    grid-row: 4 / 6;
}
/* B4-C5 */
.secteur {
    grid-column: 5 / 6;
    grid-row: 4 / 7;
}
/* D4-D5 */
.badgeez {
    grid-column: 6 / 6;
    grid-row: 5 / 7;
}
/* E4-E5 */
.prochainevenement {
    grid-column: 7 / 8;
    grid-row: 5 / 7;
}

.monde {
    grid-column: 1 / 5;
    grid-row: 6 / 6;
}

.sondage {
    grid-column: 2 / 3;
    grid-row: 3 / 6;
    flex-direction: column;
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
    text-align: center; /* Assure que le texte lui-même est centré */
    height: 100%
}

body.dashboard {
    background: url('/assets/img/fond.jpg') repeat center center fixed;
    overflow: hidden;
}

.likedln {
    width: 570px;
    display: block;
}

.zoom{
    zoom: 83%;
}

.catorgraphique {
    width: auto;
    height: 60px;
}

.move-up {
    /* La transition rend l'animation fluide sur 10 secondes */
    transition: transform 30s ease-in-out;
    /* Déplace l'élément de 600px vers le haut */
    transform: translateY(-850px);
}

/* Style du titre */
.titre-rouge-gras {
    font-weight: bold;
    color: darkblue;
}

/* Style de la source */
.source-bleu-transparent {
    color: rgb(32, 178, 242, 0,50); /* Bleu avec 50% de transparence */
}

#actualite-container {
    overflow: hidden;
    position: relative;
    height: 2000px; /* hauteur visible = hauteur d'une actualité */
}

.actualite-item {
    height: 195px; /* doit correspondre à la hauteur du container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

/* transition douce quand on bouge le container */
#actualite-container .inner {
    transition: transform 0.8s ease-in-out;
}



.card.linkedin .news-carousel-wrappers {
    height: 800px !important;
    overflow: hidden;
    position: relative;
}

.card.linkedin .news-slide .likedln {
    display: block;
    position: relative;
}

.justify {
    text-align: justify;
}

/* Couleur globale des cards (sauf météo) */
.dashboard-grid .card:not(.weather-hero) {
    background: #ffffffc0;
    /* nouvelle couleur */
    border: 1px solid #cfd6e2;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    border-radius: 0.75rem;
}

.text_color {
    color: #333333;
}

.result-bar {
    position: relative;
    height: 12px;
    width: 100%;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}


.separator {
    height: 1px;
    background-color: rgb(65, 65, 65);
    margin: 20px 0;
}


.bar-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #28a745; /* vert */
}

.bar-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background-color: #dc3545; /* rouge */
}

.videoactemium {
    max-width: 85%; 
    height: auto;
}