/* ==========================================================
   Page d'accueil data - Elonga Institute
   Styles ajoutés sans modifier les autres pages du site.
   ========================================================== */

/* Palette Congo-Brazzaville et variables spécifiques à l'accueil data */
:root {
    --congo-green: #002642;
    --congo-yellow: #ffd6d6;
    --congo-red: #e1000f;
    --data-ink: #002642;
    --data-muted: #4a5a6e;
    --data-surface: #eef6f8;
    --data-border: #d7e6ea;
}

/* Ajustements globaux pour rapprocher la marque des couleurs nationales */
.logo-elonga,
.hero-title,
.section-header h2,
.newsletter-box h2 {
    color: var(--data-ink);
}

.logo-lab,
.hero-eyebrow,
.link-arrow,
.card-tag {
    color: var(--congo-green);
}

/* Logo officiel : image fournie par Elonga Institute */
.site-logo-img {
    display: block;
    width: auto;
    height: 52px;
    object-fit: contain;
}

.footer-logo-img {
    height: 86px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: #ffffff;
}

.header .logo {
    align-items: center;
}

.footer-brand .logo {
    display: inline-flex;
    align-items: center;
}

.nav-link.active::after,
.btn-primary {
    background-color: var(--congo-green);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #001220;
}

.btn-secondary {
    border-color: var(--congo-green);
    color: var(--data-ink);
}

.btn-secondary:hover {
    background-color: rgba(0, 38, 66, 0.08);
}

/* Hero data : grande zone d'accueil avec contenu éditorial et panneau d'indicateurs */
.hero-data {
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        linear-gradient(120deg, rgba(0, 38, 66, 0.13) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(225, 0, 15, 0.08) 100%),
        linear-gradient(180deg, #ffffff 0%, var(--data-surface) 100%);
}

.hero-data-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.hero-data-copy {
    max-width: 760px;
}

.hero-data .hero-title {
    max-width: 820px;
    font-family: var(--font-family-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.08;
}

.hero-data .hero-subtitle {
    max-width: 680px;
}

/* Carrousel du hero : trois angles éditoriaux au premier écran. */
.hero-carousel {
    position: relative;
    padding: 0;
}

.hero-carousel-slide {
    display: none;
    min-height: clamp(560px, 88vh, 860px);
    display: none;
    align-items: center;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(6.5rem, 10vw, 9rem);
}

.hero-carousel-slide.is-active {
    display: flex;
    animation: hero-slide-in 0.45s ease both;
}

/* Slides visuelles : grande photographie, voile bleu et message immédiatement lisible. */
.hero-carousel-image-slide {
    display: none;
    position: relative;
    isolation: isolate;
    background-position: center;
    background-size: cover;
}

.hero-carousel-image-slide.is-active { display: flex; }

/* Photographie en arrière-plan : un calque neutre uniformise le grain et l'exposition
   des trois clichés (tons très différents à l'origine), puis un dégradé de marque
   assure la lisibilité du texte. Traitement identique sur les trois slides = rendu
   éditorial cohérent, plutôt que trois ambiances de couleur différentes. */
.hero-carousel-image-slide {
    background-blend-mode: normal, luminosity, normal;
}

.hero-carousel-slide.hero-carousel-kiki-one {
    background:
        linear-gradient(90deg, rgba(0, 18, 32, .92) 0%, rgba(0, 38, 66, .74) 45%, rgba(0, 18, 32, .32) 100%),
        linear-gradient(rgba(0, 38, 66, .55), rgba(0, 38, 66, .55)),
        url('assets/kiki-lawanda-hero-1.jpg') center / cover no-repeat;
}
.hero-carousel-slide.hero-carousel-kiki-two {
    background:
        linear-gradient(90deg, rgba(0, 18, 32, .92) 0%, rgba(0, 38, 66, .74) 45%, rgba(0, 18, 32, .32) 100%),
        linear-gradient(rgba(0, 38, 66, .55), rgba(0, 38, 66, .55)),
        url('assets/kiki-lawanda-hero-2.jpg') center / cover no-repeat;
}
.hero-carousel-slide.hero-carousel-kiki-three {
    background:
        linear-gradient(90deg, rgba(0, 18, 32, .92) 0%, rgba(0, 38, 66, .74) 45%, rgba(0, 18, 32, .32) 100%),
        linear-gradient(rgba(0, 38, 66, .55), rgba(0, 38, 66, .55)),
        url('assets/kiki-lawanda-hero-3.jpg') center / cover no-repeat;
}
.hero-carousel-image-slide .hero-data-grid { display: block; }
.hero-carousel-image-slide .hero-data-copy { max-width: 660px; }
.hero-carousel-image-slide .hero-eyebrow { color: #9fd7e6; }
.hero-carousel-image-slide .hero-title,
.hero-carousel-image-slide .hero-subtitle { color: #ffffff; }
.hero-carousel-image-slide .hero-title { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.hero-carousel-image-slide .hero-subtitle { color: rgba(255,255,255,.88); }
.hero-carousel-image-slide .hero-data-panel { display: none; }
.hero-carousel-image-slide .btn-primary { background: #ffffff; color: var(--data-ink); }
.hero-carousel-image-slide .btn-primary:hover { background: #d7eef5; }
.hero-carousel-image-slide .btn-secondary { border-color: #ffffff; color: #ffffff; }
.hero-carousel-image-slide .btn-secondary:hover { background: rgba(255,255,255,.15); }
.hero-photo-credit { margin-top: 1.25rem; color: rgba(255,255,255,.76); font-size: .72rem; }

.hero-slide-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.35rem;
    color: #ffffff;
}

.hero-slide-panel strong { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; }
.hero-slide-panel ul { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.hero-slide-panel li { padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255,255,255,.35); }
.hero-slide-panel p { margin: 0; color: inherit; }
.panel-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-slide-panel-green { background: linear-gradient(135deg, var(--congo-green), var(--data-ink)); }
.hero-slide-panel-yellow { color: var(--data-ink); background: linear-gradient(135deg, var(--congo-yellow), #ffbcbc); }
.hero-slide-photo { display: block; overflow: hidden; padding: 0; background: var(--data-ink); }
.hero-slide-photo img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; opacity: .78; }
.hero-photo-caption { position: absolute; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; color: #ffffff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero-photo-caption strong { display: block; max-width: 420px; margin: .35rem 0 .55rem; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.08; }
.hero-photo-caption small { font-size: .72rem; }

.hero-carousel-controls {
    position: absolute;
    right: 1.5rem;
    bottom: 1.8rem;
    left: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    pointer-events: none;
}

.hero-carousel-controls > * { pointer-events: auto; }

.hero-carousel-arrow,
.hero-carousel-dots button {
    border: 0;
    cursor: pointer;
}

.hero-carousel-arrow {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.4);
    color: #ffffff;
    font-size: 1.25rem;
    backdrop-filter: blur(2px);
    transition: background var(--transition-fast, .2s ease);
}
.hero-carousel-arrow:hover { background: rgba(255,255,255,.32); }

.hero-carousel-dots {
    display: flex;
    gap: .5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.hero-carousel-dots button { width: .6rem; height: .6rem; padding: 0; border-radius: 50%; background: rgba(255,255,255,.4); }
.hero-carousel-dots button.is-active { background: var(--congo-red); transform: scale(1.3); }

@keyframes hero-slide-in { from { opacity: .1; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

/* Panneau visuel de données : donne tout de suite le ton tableau de bord */
.hero-data-panel {
    position: relative;
    min-height: 420px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 18, 32, 0.12);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(0, 18, 32, 0.14);
}

.hero-data-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 8px solid var(--congo-green);
    border-right: 8px solid var(--congo-yellow);
    border-bottom: 8px solid var(--congo-red);
    pointer-events: none;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    color: var(--data-muted);
    font-size: 0.875rem;
}

.panel-header strong {
    color: var(--data-ink);
    font-size: 1rem;
}

/* Graphique décoratif en barres, construit en CSS pour éviter une dépendance externe */
.data-sparkline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 0.75rem;
    height: 180px;
    padding: 1rem;
    border: 1px solid var(--data-border);
    border-radius: 0.5rem;
    background:
        linear-gradient(to top, rgba(0, 18, 32, 0.06) 1px, transparent 1px) 0 0 / 100% 25%,
        #f7fbfd;
}

.data-sparkline span {
    display: block;
    min-height: 28px;
    border-radius: 0.35rem 0.35rem 0 0;
    background: linear-gradient(180deg, var(--congo-yellow), var(--congo-green));
}

.data-sparkline span:nth-child(3n) {
    background: linear-gradient(180deg, var(--congo-red), #a30000);
}

.panel-metrics {
    display: grid;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.panel-metrics div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--data-border);
}

.metric-label,
.source-note {
    color: var(--data-muted);
    font-size: 0.875rem;
}

.source-note {
    margin-top: 1rem;
}

/* Galerie Brazzaville : deux repères visuels de la ville, présentés en cartes nettes
   plutôt qu'en fond de hero plein écran (les photos sources sont de petite résolution) */
.section-city-gallery {
    background-color: #ffffff;
}

.city-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.city-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: var(--data-ink);
    box-shadow: 0 14px 35px rgba(0, 18, 32, 0.14);
}

.city-gallery-item img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.city-gallery-item:hover img {
    transform: scale(1.04);
}

.city-gallery-item figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.5rem 1.25rem 1.1rem;
    background: linear-gradient(0deg, rgba(8, 18, 26, .88) 0%, rgba(8, 18, 26, .55) 55%, transparent 100%);
    color: #ffffff;
}

.city-gallery-item figcaption strong {
    display: block;
    font-family: var(--font-family-serif);
    font-size: 1.15rem;
    line-height: 1.25;
}

.city-gallery-item figcaption span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 768px) {
    .city-gallery-grid {
        grid-template-columns: 1fr;
    }

    .city-gallery-item img {
        height: 260px;
    }
}
.flag-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 10px;
}

.flag-green {
    background-color: var(--congo-green);
}

.flag-yellow {
    background-color: var(--congo-yellow);
}

.flag-red {
    background-color: var(--congo-red);
}

/* En-têtes de section : petit libellé de contexte au-dessus des titres */
.section-kicker {
    margin-bottom: 0.4rem;
    color: var(--congo-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-section-header {
    align-items: flex-end;
}

/* Cartes d'indicateurs : présentation type observatoire de données */
.section-data-focus {
    background-color: #ffffff;
}

.data-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.data-card {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--data-border);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(0, 18, 32, 0.07);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.data-card:hover {
    transform: translateY(-4px);
    border-color: var(--congo-green);
    box-shadow: 0 20px 45px rgba(0, 18, 32, 0.14);
}

.data-card-index {
    width: fit-content;
    margin-bottom: 1.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(30, 92, 138, 0.1);
    color: var(--congo-green);
    font-size: 0.75rem;
    font-weight: 800;
}

.data-card h3 {
    margin-bottom: 0.75rem;
    color: var(--data-ink);
    font-size: 1.15rem;
    line-height: 1.35;
}

.data-card p {
    color: var(--data-muted);
    font-size: 0.95rem;
}

/* Mini graphiques : formes simples pour symboliser les familles d'indicateurs */
.mini-chart {
    height: 82px;
    margin-top: auto;
    border-radius: 0.5rem;
    background-color: var(--data-surface);
}

.poverty-chart {
    background:
        linear-gradient(135deg, transparent 30%, rgba(220, 36, 31, 0.16) 30% 55%, transparent 55%),
        linear-gradient(90deg, rgba(30, 92, 138, 0.15), rgba(225, 0, 15, 0.18));
}

.employment-chart {
    background:
        linear-gradient(to top, var(--congo-green) 0 36%, transparent 36%) 12% 0 / 16% 100% no-repeat,
        linear-gradient(to top, var(--congo-yellow) 0 58%, transparent 58%) 42% 0 / 16% 100% no-repeat,
        linear-gradient(to top, var(--congo-red) 0 44%, transparent 44%) 72% 0 / 16% 100% no-repeat,
        var(--data-surface);
}

.price-chart {
    background:
        radial-gradient(circle at 20% 65%, var(--congo-green) 0 8px, transparent 9px),
        radial-gradient(circle at 48% 42%, var(--congo-yellow) 0 8px, transparent 9px),
        radial-gradient(circle at 76% 30%, var(--congo-red) 0 8px, transparent 9px),
        linear-gradient(135deg, transparent 49%, rgba(0, 18, 32, 0.25) 50%, transparent 51%),
        var(--data-surface);
}

/* Méthode : section plus dense pour expliquer la chaîne de production de données */
.section-method-data {
    background-color: var(--data-surface);
}

.method-data-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.method-copy h2 {
    margin-bottom: 1rem;
    color: var(--data-ink);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.18;
}

.method-copy p {
    color: var(--data-muted);
}

.method-steps {
    display: grid;
    gap: 1rem;
}

.method-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--data-border);
    border-radius: 0.5rem;
    background: #ffffff;
}

.method-step span {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--congo-green);
    color: #ffffff;
    font-weight: 800;
}

.method-step h3 {
    margin-bottom: 0.35rem;
    color: var(--data-ink);
}

.method-step p {
    color: var(--data-muted);
    font-size: 0.95rem;
}

/* Citation : variante de la section principe avec couleur nationale */
.data-principle {
    background:
        linear-gradient(110deg, rgba(30, 92, 138, 0.95), rgba(0, 18, 32, 0.96)),
        var(--data-ink);
}

.data-principle .principle-quote cite {
    color: rgba(255, 255, 255, 0.76);
}

/* Newsletter : appel à contribution cohérent avec le thème data */
.data-newsletter {
    background:
        linear-gradient(135deg, rgba(225, 0, 15, 0.14), rgba(30, 92, 138, 0.11)),
        var(--data-surface);
}

/* Participation publique : zone interactive pour impliquer les visiteurs */
.section-public-lab {
    background: #ffffff;
}

.public-lab-header {
    align-items: flex-end;
}

.public-lab-intro {
    max-width: 420px;
    color: var(--data-muted);
    font-size: 0.95rem;
}

.public-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.public-card {
    display: flex;
    min-height: 430px;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--data-border);
    border-radius: 0.5rem;
    background:
        linear-gradient(180deg, rgba(244, 248, 250, 0.8), #ffffff 45%),
        #ffffff;
    box-shadow: 0 14px 35px rgba(0, 18, 32, 0.07);
}

.public-card h3 {
    margin-bottom: 0.6rem;
    color: var(--data-ink);
    font-size: 1.15rem;
}

.public-card > p {
    margin-bottom: 1.25rem;
    color: var(--data-muted);
    font-size: 0.95rem;
}

/* Sondage public : boutons larges et feedback immédiat */
.poll-options {
    display: grid;
    gap: 0.75rem;
    margin-top: auto;
}

.poll-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 54px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--data-border);
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--data-ink);
    text-align: left;
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.poll-option:hover,
.poll-option.is-selected {
    border-color: var(--congo-green);
    box-shadow: 0 10px 24px rgba(30, 92, 138, 0.12);
    transform: translateY(-1px);
}

.poll-option strong {
    color: var(--congo-green);
}

.poll-feedback,
.form-feedback {
    min-height: 1.4rem;
    margin-top: 1rem;
    color: var(--congo-green);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Formulaires publics : champs lisibles pour une contribution rapide */
.public-form {
    display: grid;
    gap: 1rem;
    margin-top: auto;
}

.public-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--data-ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.public-form input,
.public-form select,
.public-form textarea {
    width: 100%;
    border: 1px solid var(--data-border);
    border-radius: 0.5rem;
    padding: 0.85rem 0.9rem;
    background-color: #ffffff;
    color: var(--data-ink);
}

.public-form textarea {
    resize: vertical;
}

.public-form input:focus,
.public-form select:focus,
.public-form textarea:focus {
    border-color: var(--congo-green);
    box-shadow: 0 0 0 3px rgba(30, 92, 138, 0.12);
    outline: none;
}

/* Responsive : conserver une lecture confortable sur tablette et mobile */
@media (max-width: 1024px) {
    .hero-data-grid,
    .method-data-grid {
        grid-template-columns: 1fr;
    }

    .hero-data-panel {
        min-height: auto;
    }

    .hero-carousel-slide { min-height: auto; }

    .data-cards-grid,
    .public-lab-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .site-logo-img {
        height: 44px;
    }

    .hero-data {
        padding: 3.5rem 0;
    }

    .hero-carousel { padding: 0; }
    .hero-carousel-slide { padding: 3.5rem 0 6rem; }
    .hero-carousel-controls { bottom: 1.25rem; }

    .hero-data-panel {
        padding: 1rem;
    }

    .data-sparkline {
        height: 140px;
        gap: 0.5rem;
    }

    .panel-metrics div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .data-section-header {
        align-items: flex-start;
    }

    .public-lab-header {
        align-items: flex-start;
    }

    .public-card {
        min-height: auto;
    }
}