/* ==========================================================================
   Chiffres Clés — Carrousel 4 par 4, panneau gauche, API-first
   ========================================================================== */

/* Reset local pour éviter tout débordement venant de l'extérieur */
.kk-section,
.kk-section * {
    box-sizing: border-box;
}

.kk-section {
    padding: 64px 0 80px;
    background: linear-gradient(135deg, #1e5f8e 0%, #164c7a 50%, #164c7a 100%);
    overflow: hidden;
    position: relative;
}

.kk-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.kk-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.kk-header {
    max-width: 1200px;
    margin: 0 auto 48px;
    text-align: left;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.kk-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.kk-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.kk-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.kk-sidebar {
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(16, 35, 63, 0.06);
    height: 100%;
}

.kk-sidebar__placeholder {
    color: #6B7280;
    text-align: center;
    padding: 40px 20px;
}

.kk-sidebar__search {
    margin-bottom: 16px;
}

.kk-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    background: #FFFFFF;
    color: #10233F;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kk-search-input:focus {
    border-color: #1B3A5C;
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
}

.kk-sidebar__title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #10233F;
    margin: 0 0 16px;
}

.kk-sidebar__description {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.6;
    margin: 0 0 24px;
}

.kk-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.kk-table th,
.kk-table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #E4E7EC;
}

.kk-table th {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kk-table td {
    font-size: 0.9rem;
    color: #10233F;
}

.kk-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    background: #FFFFFF;
    color: #10233F;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kk-select:focus {
    border-color: #1B3A5C;
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
}

.kk-slider {
    position: relative;
    height: 100%;
}

.kk-slider__track {
    display: flex;
    gap: 20px;
    overflow: hidden;
    padding: 6px 6px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    height: 100%;
    align-items: stretch;
    flex-wrap: wrap;
    /* Profondeur 3D : les cartes ci-dessous s'inclinent réellement dans cet
       espace de perspective au survol, au lieu d'un simple aplat qui bouge. */
    perspective: 1400px;
}

.kk-slider__track::-webkit-scrollbar {
    display: none;
}

/* Carte "chiffre clé" — traitement 3D : relief en couches (halo coloré +
   ombres empilées façon carte physique posée sur la table), léger tilt en
   perspective au survol, et une tranche dégradée en haut qui simule une
   épaisseur de carton. Respecte la charte (bleu #1e5f8e, encre #10233F). */
.kk-slider__card {
    flex: 1 1 calc(50% - 10px);
    width: calc(50% - 10px);
    min-width: 0;
    max-width: calc(50% - 10px);
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    padding: 22px 20px 20px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), box-shadow 0.4s cubic-bezier(.2, .8, .2, 1), border-color 0.25s ease;
    position: relative;
    box-sizing: border-box;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-style: preserve-3d;
    /* Ombre à deux couches : une ombre de contact serrée + une ombre
       ambiante large et sombre, seule combinaison qui se détache
       réellement du fond bleu foncé (une ombre encre classique s'y
       fond et n'a aucun effet de relief visible). */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 6px 12px rgba(6, 16, 32, 0.22),
        0 20px 40px rgba(6, 16, 32, 0.28);
}

/* Carte fantôme derrière la carte principale : simule une pile de
   fiches physiques légèrement décalée, visible sur les bords. */
.kk-slider__card::after {
    content: '';
    position: absolute;
    inset: 10px -7px -12px 10px;
    background: linear-gradient(160deg, rgba(8, 20, 40, 0.30), rgba(8, 20, 40, 0.05));
    border-radius: 18px;
    z-index: -1;
    filter: blur(4px);
    opacity: 0.55;
    transition: opacity 0.4s ease, inset 0.4s ease;
}

/* Tranche supérieure dégradée : simule l'épaisseur d'une carte posée. */
.kk-slider__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #1e5f8e, #0F766E 50%, #7C3AED);
    opacity: 0.55;
    transition: opacity 0.3s ease;
}

.kk-slider__card:hover {
    transform: translateY(-10px) rotateX(6deg) rotateY(-2deg) scale(1.02);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 12px 20px rgba(6, 16, 32, 0.26),
        0 36px 64px rgba(6, 16, 32, 0.36);
    border-color: rgba(255, 255, 255, 0.7);
}

.kk-slider__card:hover::before {
    opacity: 1;
}

.kk-slider__card:hover::after {
    opacity: 0.85;
    inset: 12px -9px -16px 12px;
}

.kk-slider__card.active {
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-6px);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.9),
        0 10px 18px rgba(6, 16, 32, 0.24),
        0 30px 54px rgba(6, 16, 32, 0.32);
}

.kk-slider__card.active::before {
    opacity: 1;
}

.kk-slider__card.active::after {
    opacity: 0.75;
}

.kk-slider__card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #10233F;
    margin: 0 0 16px;
    line-height: 1.35;
}

.kk-slider__stats {
    display: flex;
    gap: 16px;
}

.kk-slider__stat {
    flex: 1;
    text-align: center;
    padding: 12px 8px 10px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #EEF1F6;
    /* Petit relief interne : le chiffre semble "gravé" dans une pastille. */
    box-shadow: inset 0 2px 4px rgba(16, 35, 63, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kk-slider__card:hover .kk-slider__stat {
    transform: translateZ(18px);
}

.kk-slider__stat-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.kk-slider__stat-value--physical {
    color: #0F766E;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.kk-slider__stat-value--financial {
    color: #7C3AED;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.kk-slider__stat-label {
    display: block;
    font-size: 0.76rem;
    color: #6B7280;
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Le carrousel est une colonne : cartes en haut, flèches et pastilles dessous.
   Avec « height: 100% » sur la piste, les flèches débordaient sous la
   section (overflow: hidden) et apparaissaient coupées. */
.kk-slider {
    display: flex;
    flex-direction: column;
}

.kk-slider__track {
    flex: 1 1 auto;
    height: auto;
}

.kk-slider__controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.kk-slider__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #FFFFFF;
    color: #1e5f8e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    box-shadow: 0 6px 16px rgba(5, 20, 40, 0.25);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.kk-slider__btn:hover,
.kk-slider__btn:focus-visible {
    background: #C8202A;
    color: #FFFFFF;
    transform: translateY(-2px);
    outline: none;
}

.kk-slider__btn:disabled {
    opacity: .45;
    cursor: default;
    transform: none;
}

.kk-slider__pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.kk-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.kk-bullet:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

.kk-bullet.active {
    background: #FFFFFF;
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.kk-slider__popup {
    position: fixed;
    z-index: 9999;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16, 35, 63, 0.18);
    border: 1px solid rgba(27, 108, 168, 0.12);
    width: 320px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    animation: kk-popup-in .2s ease-out;
}

@keyframes kk-popup-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kk-slider__popup-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, #1e5f8e 0%, #164c7a 100%);
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.kk-slider__popup-body {
    padding: 16px 18px;
}

.kk-slider__popup-desc {
    font-size: 0.92rem;
    color: #4B5563;
    line-height: 1.5;
    margin: 0 0 12px;
}

.kk-slider__popup-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kk-slider__popup-institution {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F5F7FA;
    border: 1px solid #E4E7EC;
}

.kk-slider__popup-institution strong {
    font-size: 0.9rem;
    color: #10233F;
    font-weight: 600;
}

.kk-slider__popup-institution span {
    font-size: 0.82rem;
    color: #6B7280;
    font-weight: 600;
}

@media (max-width: 992px) {
    .kk-body {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Accès à la cartographie — bouton distinctif, à hauteur du titre.
   Bouton rouge (couleur du drapeau) qui tranche sur le fond bleu, mini-carte
   du Togo en blanc avec un signal qui pulse sur Lomé, et un reflet qui balaie le bouton
   toutes les quelques secondes pour attirer l'œil sans clignoter.
   ========================================================================== */
.kk-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}

.kk-carto {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 14px;
    border-radius: 16px;
    background: #C8202A;
    color: #FFFFFF;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 30px rgba(120, 10, 20, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

/* Reflet lumineux qui traverse le bouton */
.kk-carto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: kk-carto-reflet 4.5s ease-in-out infinite;
    z-index: -1;
}

.kk-carto:hover,
.kk-carto:focus-visible {
    color: #FFFFFF;
    background: #B51C25;
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(120, 10, 20, .42), 0 0 0 2px #FFFFFF;
    outline: none;
}

.kk-carto__carte {
    flex: none;
    width: 46px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
}

.kk-carto__carte svg {
    width: 24px;
    height: 50px;
    overflow: visible;
}

/* Tracé réel des 5 régions : en blanc, filets rouges entre régions */
.kk-carto__pays {
    fill: #FFFFFF;
    stroke: #C8202A;
    stroke-width: .8;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.kk-carto__point {
    fill: #F2C230;
    stroke: #10233F;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Onde qui s'étend autour de Lomé (signal « en direct ») */
.kk-carto__onde {
    fill: none;
    stroke: #F2C230;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    animation: kk-carto-onde 2.2s ease-out infinite;
}

.kk-carto__texte {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.kk-carto__titre {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.kk-carto__sous {
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
}

.kk-carto__fleche {
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #C8202A;
    font-size: .85rem;
    transition: transform .25s ease, background .25s ease;
}

.kk-carto:hover .kk-carto__fleche {
    transform: translateX(3px);
    background: #FFFFFF;
}

@keyframes kk-carto-onde {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(3.2); opacity: 0; }
}

@keyframes kk-carto-reflet {
    0%, 55% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

@media (max-width: 767.98px) {
    .kk-header {
        margin-bottom: 28px;
    }

    .kk-carto {
        width: 100%;
    }

    .kk-carto__fleche {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kk-carto::after,
    .kk-carto__onde {
        animation: none;
    }
}