/* ==========================================================================
   Habillage clair du header (navbar) et du footer

   La navbar desktop était déjà blanche ; ce fichier aligne la navbar mobile,
   le menu mobile et le footer sur le même fond blanc.

   ⚠️ Le HTML de include/navbar.php et include/footer.php utilise encore des
   classes Bootstrap sombres (text-light, text-white, btn-outline-light…) :
   elles sont neutralisées ici sous les conteneurs `.footer-clair` et
   `.navbar-clair`, pour ne pas avoir à modifier des dizaines de lignes.
   ========================================================================== */

:root {
    --hf-texte: #4b5563;
    --hf-titre: #000000;
    --hf-vert: #000000;
    --hf-bordure: #eef1f6;
}

/* ==========================================================================
   TRADUCTION

   Le site n'utilise plus Google Translate : les traductions viennent des
   fichiers lang/*.json (voir js/i18n.js). Plus aucun élément externe à
   masquer, et le <body> n'est plus décalé de 40 px.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */

/* ⚠️ css/style.css applique `background: var(--primary-gradient)` à .navbar
   et `color: var(--light-text) !important` aux .nav-link : on repasse tout en
   clair ici (ce fichier étant chargé après style.css). */
.navbar {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.navbar .nav-link {
    color: var(--hf-texte) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--hf-vert) !important;
    opacity: 1;
}

/* Le lien de la page affichée porte la même apparence que le survol, avec un
   fond léger qui reste visible quand la souris est ailleurs. Le rayon reprend
   celui du sélecteur de langue et du bouton « Apply for Grant ». */
.navbar .nav-link.active {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
}

/* Entrée déroulante de la page affichée (le menu « Our Grants » est alors
   lui-même actif). */
.navbar .dropdown-menu .dropdown-item.active {
    color: var(--hf-vert) !important;
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.navbar .navbar-toggler {
    border-color: var(--hf-bordure);
}

/* Le logo (noir + rouge #EB292C, fond transparent) est déjà lisible sur le
   fond blanc : aucun filtre n'est appliqué. L'ancien `invert(1)
   hue-rotate(180deg)` délavait l'image et la rendait floue. */
.navbar .navbar-brand img {
    filter: none;
}

.navbar.fixed-top {
    border-bottom: 1px solid var(--hf-bordure);
    box-shadow: none;
}

.navbar .navbar-brand img {
    max-height: 40px;
}

/* --- Menu mobile déroulant ------------------------------------------------ */
/* `.nav-link` est forcé en blanc par `style.css`
   (`color: var(--light-text) !important`) : sur la bannière blanche les textes
   du menu ouvert devenaient donc blanc sur blanc, donc invisibles.
   On rétablit la couleur avec la même priorité (!important). */
#navbarToggleExternalContent .nav-link {
    color: var(--hf-texte) !important;
}

#navbarToggleExternalContent .navbar-nav .nav-link:hover,
#navbarToggleExternalContent .navbar-nav .nav-link:focus,
#navbarToggleExternalContent .navbar-nav .nav-link.active {
    color: var(--hf-vert) !important;
}

#navbarToggleExternalContent .navbar-nav .nav-link.active {
    background-color: #f5f5f5 !important;
    border-radius: 0.5rem;
}

/* Sous-menu « Nos crédits » */
#navbarToggleExternalContent #loansSubmenu .nav-link {
    color: var(--hf-texte) !important;
    font-size: 0.9rem;
    opacity: 0.85;
}

#navbarToggleExternalContent #loansSubmenu .nav-link:hover {
    color: var(--hf-vert) !important;
    opacity: 1;
}

/* Sous-entrée de la page affichée dans le menu mobile */
#navbarToggleExternalContent #loansSubmenu .nav-link.active {
    color: var(--hf-vert) !important;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    font-weight: 600;
    opacity: 1;
}

/* Bouton de fermeture (croix) bien visible sur blanc */
#navbarToggleExternalContent .btn-close {
    opacity: 1;
}

#navbarToggleExternalContent hr {
    border-color: var(--hf-bordure);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-clair {
    /* css/style.css définit `background: var(--primary-gradient)` (une
       background-image) : il faut annuler les deux pour obtenir du blanc. */
    background: #ffffff !important;
    background-image: none !important;
    border-top: 1px solid var(--hf-bordure);
}

/* Textes : tout ce qui était clair sur fond sombre devient gris sur blanc */
.footer-clair,
.footer-clair p,
.footer-clair li,
.footer-clair span,
.footer-clair .text-light,
.footer-clair .text-white {
    color: var(--hf-texte) !important;
}

.footer-clair h5,
.footer-clair h6,
.footer-clair h5.text-white,
.footer-clair h6.text-white {
    color: var(--hf-titre) !important;
}

/* Liens */
.footer-clair a,
.footer-clair .social-links a {
    color: var(--hf-texte) !important;
    transition: color 0.2s ease;
}

.footer-clair a:hover,
.footer-clair a:focus,
.footer-clair .social-links a:hover {
    color: var(--hf-vert) !important;
}

/* Boutons « App Store » / « Google Play » */
.footer-clair .btn-outline-light {
    color: var(--hf-titre) !important;
    background-color: transparent !important;
    border-color: #d7dee8 !important;
}

.footer-clair .btn-outline-light:hover,
.footer-clair .btn-outline-light:focus {
    color: #ffffff !important;
    background-color: var(--hf-vert) !important;
    border-color: var(--hf-vert) !important;
}

/* Filet de séparation */
.footer-clair hr {
    opacity: 1 !important;
    border-color: #e5e9f0 !important;
}

/* ==========================================================================
   SÉLECTEUR DE LANGUE (drapeaux, à la place du globe)
   ========================================================================== */

.lang-select {
    position: relative;
}

.lang-select .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid #d7dee8;
    /* Même rayon que les boutons Bootstrap (.btn) : le sélecteur s'aligne
       visuellement sur le bouton « Demander une subvention ». */
    border-radius: 0.375rem;
    color: var(--hf-texte);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Sur ordinateur, le sélecteur a exactement la MÊME HAUTEUR que le bouton
   « Demander une subvention » (40 px) : hauteur imposée plutôt que calculée
   par le padding, car le drapeau (16 px) est plus haut que le texte.
   Sous 992 px, le sélecteur reste compact (drapeau + 2 lettres). */
@media (min-width: 992px) {
    .lang-select .lang-toggle {
        height: 40px;
        padding: 0 0.85rem;
    }
}

.lang-select .lang-toggle:hover,
.lang-select .lang-toggle:focus {
    border-color: var(--hf-vert);
    color: var(--hf-vert);
}

.lang-select .lang-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
}

.lang-select .lang-menu {
    position: absolute;
    right: 0;
    z-index: 1080;
    display: none;
    min-width: 220px;
    max-height: 320px;
    padding: 0.35rem;
    margin-top: 0.4rem;
    overflow-y: auto;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid var(--hf-bordure);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.lang-select.open .lang-menu {
    display: block;
}

.lang-select .lang-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--hf-texte);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    /* Bootstrap souligne les liens : chaque langue apparaissait donc barrée
       d'un trait, ce qui n'a pas de sens pour une entrée de menu. */
    text-decoration: none;
}

.lang-select .lang-option:hover,
.lang-select .lang-option:focus {
    background-color: rgba(0, 0, 0, 0.07);
    color: var(--hf-vert);
}

.lang-select .lang-option.is-current {
    color: var(--hf-vert);
    font-weight: 700;
}

.lang-select .lang-option img {
    width: 22px;
    height: 16px;
    object-fit: cover;
}

/* Dans le menu mobile, le sélecteur prend toute la largeur */
#navbarToggleExternalContent .lang-select {
    width: 100%;
}

/* Le code à deux lettres n'apparaît que dans la barre mobile (voir plus bas) */
.lang-select .lang-code {
    display: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* --- Navbar mobile (barre du haut) : drapeau + code à 2 lettres ---------
   Le nom complet de la langue n'y tient pas à côté du logo : on le remplace
   par le code (FR, EN, DE, EL, SL). Le menu déroulant, lui, affiche toujours
   les noms complets. */
.navbar.d-lg-none .lang-select .lang-name {
    display: none;
}

.navbar.d-lg-none .lang-select .lang-code {
    display: inline-block;
}

.navbar.d-lg-none .lang-select .lang-toggle {
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
}

#navbarToggleExternalContent .lang-select .lang-toggle {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 0.75rem;
}

#navbarToggleExternalContent .lang-select .lang-menu {
    position: static;
    width: 100%;
    max-height: 260px;
    margin-top: 0.5rem;
    box-shadow: none;
}

/* ==========================================================================
   PAGE « CHOOSE YOUR LANGUAGE »
   ========================================================================== */

.langue-grid .langue-card {
    display: block;
    width: 100%;
    padding: 1.5rem 1rem;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    /* Bootstrap souligne les liens : le soulignement se poursuivait sur toute
       la largeur de la carte. */
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.langue-grid .langue-card:hover,
.langue-grid .langue-card:focus {
    transform: translateY(-5px);
    border-color: var(--hf-vert);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.langue-grid .langue-card.is-current {
    border-color: var(--hf-vert);
}

.langue-grid .langue-flag {
    width: 64px;
    height: 44px;
    margin: 0 auto 0.85rem;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.langue-grid .langue-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.langue-grid .langue-card h3 {
    margin-bottom: 0.25rem;
    color: var(--hf-titre);
    font-size: 1rem;
    font-weight: 700;
}

.langue-grid .langue-card p {
    margin-bottom: 0;
    color: var(--hf-texte);
    font-size: 0.82rem;
}

/* ==========================================================================
   BOUTON « RETOUR EN HAUT »
   Sur mobile (et tablette), la barre de boutons fixe en bas de page occupe
   déjà l'écran ; le bouton de défilement y est donc masqué.
   `!important` est nécessaire car le script de `include/footer.php` le rend
   visible avec un style en ligne (`style="display:block"`).
   ========================================================================== */
@media (max-width: 991.98px) {
    #back-to-top {
        display: none !important;
    }
}

/* ==========================================================================
   MARQUE — logo assets/images/logo.png
   ==========================================================================

   L'image porte la marque dans toutes les langues : elle n'est pas traduite.
   La hauteur est réglée ici, et non par un attribut `height` dans le HTML :
   style.css contient une règle globale `img { height: auto }` qui neutralise
   cet attribut — le logo s'étalait alors sur toute la largeur de sa colonne.
   -------------------------------------------------------------------------- */

.ch-brand {
    display: block;
    height: 40px;
    width: auto;
}

/* Variante compacte : barre mobile et en-tête du menu déroulant.
   `img.` est nécessaire pour atteindre la spécificité de `.navbar-brand img`
   (style.css, chargée avant) et l'emporter sur ses 40 px. */
img.ch-brand--small {
    height: 32px;
}