/* ==========================================================================
   IHRO West Africa - En-tête du site
   Chargé par includes/header.php après custom.css.
   Gère : barre utilitaire, barre de navigation, menu mobile,_states.
   ========================================================================== */

:root {
    /* Hauteur totale de l'en-tête, utilisée pour décaler le contenu.
       Surchargée en version mobile (la barre utilitaire disparaît). */
    --header-h: 108px;
}

body {
    padding-top: var(--header-h);
}

/* ------------------------------------------------------------ Barre utilitaire */

.ihro-topbar {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ihro-topbar a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s ease;
}

.ihro-topbar a:hover,
.ihro-topbar a:focus-visible {
    color: var(--accent-color);
}

.ihro-topbar .ihro-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.ihro-topbar .ihro-topbar-inner {
    height: 36px;
}

.ihro-topbar .ihro-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: .78rem;
}

.ihro-topbar .ihro-social a:hover {
    background: var(--accent-color);
    color: #fff;
}

/* ------------------------------------------------------------ Barre principale */

.ihro-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
    padding: 0;
    min-height: 72px;
    transition: box-shadow .3s ease;
}

/* Ombre renforcée au défilement (classe posée par assets/js/navbar.js) */
.ihro-header.is-scrolled {
    box-shadow: 0 6px 28px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------ Marque */

.ihro-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: #fff;
    padding: .5rem 0;
    margin-right: 1rem;
}

.ihro-brand img {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.ihro-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ihro-brand-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.3px;
    color: #fff;
}

.ihro-brand-accent {
    color: var(--accent-color);
}

.ihro-brand-sub {
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

/* ------------------------------------------------------------ Liens */

.ihro-nav .nav-link {
    position: relative;
    font-weight: 500;
    font-size: .9rem;
    color: rgba(255, 255, 255, .88);
    padding: .5rem .8rem;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.ihro-nav .nav-link i {
    font-size: .78rem;
    opacity: .8;
}

.ihro-nav .nav-link:hover,
.ihro-nav .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.ihro-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

/* Soulignement d'accent sous le lien survolé ou actif.
   Borné à 2px et insensible aux clics : l'indicateur ne doit jamais
   pouvoir recouvrir le libellé ni capter le clic. */
.ihro-nav .nav-link::after {
    content: '';
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: 0;
    height: 2px;
    max-height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.ihro-nav .nav-link:hover::after,
.ihro-nav .nav-link:focus-visible::after,
.ihro-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* Repli accessible : pas de filet si l'utilisateur limite les animations */
@media (prefers-reduced-motion: reduce) {
    .ihro-nav .nav-link::after {
        transition: none;
    }
}

/* ------------------------------------------------------------ Menu déroulant */

.ihro-nav .dropdown-menu {
    border: none;
    border-radius: 14px;
    border-top: 3px solid var(--accent-color);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    margin-top: .6rem;
    min-width: 260px;
}

.ihro-nav .dropdown-item {
    border-radius: 9px;
    padding: .55rem .8rem;
    font-size: .89rem;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.ihro-nav .dropdown-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--primary-color);
}

.ihro-nav .dropdown-item:hover,
.ihro-nav .dropdown-item:focus-visible {
    background: #eef3fb;
    color: var(--primary-color);
    transform: translateX(3px);
}

.ihro-nav .dropdown-divider {
    border-color: var(--border-color);
    margin: .4rem .4rem;
}

/* ------------------------------------------------------------ Outils de droite */

.ihro-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ihro-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 38px;
    padding: 0 .6rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.ihro-tool:hover,
.ihro-tool:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    transform: translateY(-1px);
}

.ihro-tool:focus-visible,
.ihro-cta:focus-visible,
.ihro-nav .nav-link:focus-visible,
.ihro-brand:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Menu langue */
.ihro-lang-menu {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    min-width: 150px;
}

.ihro-lang-menu .dropdown-item {
    border-radius: 8px;
    padding: .45rem .7rem;
    font-weight: 600;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ihro-lang-menu .dropdown-item.active {
    background: var(--primary-color);
    color: #fff;
}

.ihro-lang-menu .dropdown-item.active .ihro-lang-check {
    opacity: 1;
}

.ihro-lang-check {
    margin-left: auto;
    opacity: 0;
    font-size: .7rem;
}

/* ------------------------------------------------------------ Appels à l'action */

.ihro-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 .95rem;
    border: none;
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ihro-cta:hover,
.ihro-cta:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.ihro-cta-join {
    background: var(--accent-color);
    color: #1a202c;
    box-shadow: 0 2px 10px rgba(247, 147, 30, .35);
}

.ihro-cta-donate {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------- Mode sombre */

[data-theme="dark"] body {
    --text-color: #e2e8f0;
    --text-muted: #a0aec0;
    --bg-light: #121820;
    --border-color: #2d3748;
}

[data-theme="dark"] .page-hero,
[data-theme="dark"] section[style*="bg-primary"],
[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #16283d 0%, #0d1a29 100%) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background: #1a2430;
    border-color: #2d3748;
}

[data-theme="dark"] .ihro-nav .dropdown-item {
    color: var(--text-color);
}

[data-theme="dark"] .ihro-nav .dropdown-item:hover,
[data-theme="dark"] .ihro-nav .dropdown-item:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ------------------------------------------------------------------ Mobile */



.ihro-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.05rem;
}

.ihro-toggler:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Repli mobile.
   Ces règles doivent rester dans une media query : .ihro-collapse est
   présent dans le DOM à toutes les largeurs (Bootstrap ne fait que
   changer son affichage au-dessus de lg). Sans ce cadrage, l'indicateur
   d'accent prenait la forme d'un bloc orange plein qui recouvrait le
   libellé des onglets sur computer. */
@media (max-width: 991.98px) {

    .ihro-collapse {
        background: linear-gradient(180deg, var(--primary-dark) 0%, #0b2136 100%);
        border-top: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
        padding: .75rem 1rem 1rem;
        /* 100dvh suit la hauteur reelle de la fenetre (barre d'adresse
           visible ou masquee) ; sans cela le bas du menu tombe hors de
           l'ecran et le visiteur doit defiler pour atteindre le bas.
           100vh reste en repli pour les navigateurs plus anciens. */
        max-height: calc(100vh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;

        /* Defilement fluide sur iOS, et arret du chainage vers la page :
           sans cela, arriveder au bas du menu fait glisser la page entiere
           et le contenu passe sous l'en-tete. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .ihro-collapse .nav-link {
        padding: .7rem .8rem;
        font-size: .95rem;
        border-radius: 9px;
    }

    /* Sur mobile : filet vertical à gauche au lieu du soulignement. */
    .ihro-collapse .nav-link::after {
        left: 0;
        right: auto;
        top: .3rem;
        bottom: .3rem;
        width: 3px;
        height: auto;
        max-height: none;
        transform: scaleY(0);
        transform-origin: center;
    }

    .ihro-collapse .nav-link:hover::after,
    .ihro-collapse .nav-link:focus-visible::after,
    .ihro-collapse .nav-link.active::after {
        transform: scaleY(1);
    }

    .ihro-collapse .dropdown-menu {
        background: rgba(255, 255, 255, .06);
        border-top: none;
        box-shadow: none;
        min-width: 0;
        margin: .25rem 0 .5rem;
    }

    .ihro-collapse .dropdown-item {
        color: rgba(255, 255, 255, .85);
        padding-left: 1.6rem;
    }

    .ihro-collapse .dropdown-item i {
        color: var(--accent-color);
    }

    .ihro-collapse .dropdown-item:hover,
    .ihro-collapse .dropdown-item:focus-visible {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

    .ihro-collapse .dropdown-divider {
        border-color: rgba(255, 255, 255, .15);
    }
}

.ihro-mobile-actions {
    display: flex;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ihro-mobile-actions .ihro-cta {
    flex: 1;
    justify-content: center;
}

@media (max-width: 991.98px) {
    :root {
        /* Repli : la valeur reelle est mesuree en JavaScript (navbar.js),
           car la barre utilitaire est desormais visible sur mobile et sa
           hauteur depend du contenu. */
        --header-h: 98px;
    }

    /* Barre utilitaire : version mobile compacte.
       L'e-mail et le siege restent lisibles, empiles sur deux lignes pour ne
       pas depasser la largeur d'un telephone. */
    .ihro-topbar {
        font-size: .68rem;
    }

    .ihro-topbar .ihro-topbar-inner {
        height: auto;
        min-height: 34px;
        padding-top: .3rem;
        padding-bottom: .3rem;
    }

    /* gap-4 vient de Bootstrap et impose !important : meme niveau requis. */
    .ihro-topbar .ihro-topbar-inner > .d-flex {
        gap: .15rem .7rem !important;
        flex-wrap: wrap;
    }

    .ihro-topbar .ihro-topbar-item {
        white-space: normal;
        line-height: 1.25;
    }

    .ihro-topbar .ihro-topbar-item i {
        font-size: .6rem;
    }

    /* Le nom complet de l'organisation est long : on borne sa largeur entre
       576 et 991 px, ou les regles de telephone ne s'appliquent pas encore,
       pour eviter qu'il ne deborde de la marque. */
    .ihro-brand-sub {
        max-width: 55vw;
        line-height: 1.2;
    }
}

@media (max-width: 575.98px) {
    .ihro-brand img {
        height: 36px;
    }

    .ihro-brand-name {
        font-size: 1rem;
    }

    /* Le nom complet de l'organisation reste affiche sur mobile.
       Le texte peut se replier sur deux lignes ; la hauteur reelle de
       l'en-tete est reprise par --header-h, donc rien n'est masque. */
    .ihro-brand-sub {
        display: block;
        font-size: .55rem;
        letter-spacing: .02em;
        line-height: 1.15;
        max-width: 48vw;
    }

    .ihro-header {
        min-height: 60px;
    }

    .ihro-tool {
        height: 36px;
        min-width: 36px;
    }
}