/* ===================================================================
   CHARTE GRAPHIQUE GOUVERNEMENTALE — ESPACE PUBLIC SIGOBS
   ===================================================================
   Alignement avec le "Guide pour la définition de la charte graphique
   des plateformes numériques de l'Administration publique" (MTDPCE,
   v1.0 du 10/08/2024) et les portails déjà en production
   (testeservices.mccat.gov.bf, e-agrements.memc.gov.bf).

   Chargé UNIQUEMENT par layouts/front.blade.php (espace public /
   candidat) : n'affecte jamais l'espace privé (back-office), qui a
   sa propre feuille de style (css/main.css) et peut donc conserver
   une identité distincte, comme le prévoit le guide (§1.2).

   Bootstrap 5.3.3 étant utilisé ici précompilé (pas de rebuild Sass),
   la re-thématisation se fait en surchargeant les classes utilitaires
   réellement utilisées par les vues front — même logique que les
   surcharges déjà présentes dans style.css (.bg-primary, .text-secondary),
   ici consolidées et documentées dans un seul fichier.
   =================================================================== */

:root {
    /* Couleurs institutionnelles (structure : en-tête, pied de page) */
    --gouv-navy: #00213B;
    --gouv-navy-soft: #1B384F;

    /* Couleur d'action principale — le guide laisse le choix d'une
       couleur "espace" dédiée ; le vert est la couleur d'action
       constatée sur les deux portails gouvernementaux de référence
       (boutons "Accéder", "Envoyer", "Découvrir Nos Services"). */
    --gouv-green: #009E49;
    --gouv-green-dark: #00753A;

    /* Accents du drapeau — utilisés avec parcimonie (liseré, badges),
       jamais en aplat associé au bleu ou au vert (cf. guide §2.2.2). */
    --gouv-red: #EF2B2B;
    --gouv-gold: #FCD116;

    --font-titres: 'Montserrat', 'Saira', sans-serif;
    --font-texte: 'Roboto', 'Inter', sans-serif;
}

/* ---- Typographies (guide §2.4 : Montserrat pour titres/boutons, Roboto pour le texte courant) ---- */
body {
    font-family: var(--font-texte);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn,
.hero-main-title, .section-heading,
.how-step-title, .how-step-num {
    font-family: var(--font-titres);
}

/* Taille des liens/menus (guide §2.4.1.3 : 12px conseillé, contre 14px
   pour le texte courant — style.css appliquait 14px indifféremment). */
.navbar .navbar-nav .nav-link {
    font-size: 12px;
}

/* ---- En-tête : palette officielle "Espace public" (guide §2.2 point 8),
   pas les couleurs du drapeau. Le guide interdit explicitement le rouge/
   jaune et leurs dérivés (dont le vert) en fond de fenêtre : « Privilégier
   plutôt le gris pâle, sinon du bleu foncé » — et réserve le drapeau au
   logo, "utilisé avec parcimonie (liseré, badges), jamais en aplat" (cf.
   commentaire --gouv-red/--gouv-gold ci-dessus). Le dégradé tricolore
   plein écran testé précédemment sur ce bandeau ne respectait pas cette
   règle ; retour au marine de la palette de référence du guide, le
   drapeau restant présent via l'armoirie (logo) et le fin liseré en bas
   de bandeau. */
.bg-dark {
    background-color: var(--gouv-navy) !important;
}

#mainNav.bg-primary,
.bg-primary {
    background-color: var(--gouv-navy-soft) !important;
}

/* Liseré tricolore fin sous la nav — le drapeau "avec parcimonie" plutôt
   qu'en aplat, même principe que .login-card::before. */
#mainNav {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--gouv-red) 0%, var(--gouv-gold) 50%, var(--gouv-green) 100%) 1;
}

/* Sur fond marine uni, le blanc/doré d'origine (.text-white-50,
   .text-secondary hérité de style.css) est déjà suffisamment contrasté :
   pas besoin d'ombre portée ni de changement de couleur, contrairement au
   dégradé clair testé précédemment. */

/* Logo institutionnel (armoiries) — remplace le cadrage circulaire de
   .logo, non adapté à la forme d'écusson (guide §2.1.1, Figure 1). */
.logo-armoiries {
    height: 54px;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

/* ---- Couleur d'action (icônes, liens, boutons pleins/outline) ---- */
.text-primary {
    color: var(--gouv-green) !important;
}

.border-primary {
    border-color: var(--gouv-gold) !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--gouv-green);
    --bs-btn-border-color: var(--gouv-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gouv-green-dark);
    --bs-btn-hover-border-color: var(--gouv-green-dark);
    --bs-btn-focus-shadow-rgb: 0, 158, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gouv-green-dark);
    --bs-btn-active-border-color: var(--gouv-green-dark);
    --bs-btn-disabled-bg: var(--gouv-green);
    --bs-btn-disabled-border-color: var(--gouv-green);
}

.btn-outline-primary {
    --bs-btn-color: var(--gouv-green);
    --bs-btn-border-color: var(--gouv-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gouv-green);
    --bs-btn-hover-border-color: var(--gouv-green);
    --bs-btn-focus-shadow-rgb: 0, 158, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gouv-green);
    --bs-btn-active-border-color: var(--gouv-green);
    --bs-btn-disabled-color: var(--gouv-green);
    --bs-btn-disabled-border-color: var(--gouv-green);
}

/* Voile sur les photos du hero : marine institutionnel (guide §4.2.2 —
   harmoniser les visuels avec les couleurs du logo et le gris, pas de
   saturation excessive), nettement visible à gauche (là où se trouve le
   texte, pour la lisibilité), qui s'efface progressivement vers la
   droite sans cacher la photo. Un essai précédent avait mis du rouge/
   doré ici : couleurs du drapeau en aplat sur une grande surface,
   contraire au guide (§2.2 pt.2 / §2.1.2). */
.carousel-item::after {
    background: linear-gradient(90deg,
        rgba(0, 33, 59, 0.75) 0%,
        rgba(0, 33, 59, 0.5) 30%,
        rgba(0, 33, 59, 0.2) 55%,
        rgba(0, 33, 59, 0.08) 80%,
        rgba(0, 33, 59, 0.02) 100%);
}

/* Fond des sections "Bourses disponibles" et "Résultats publiés" : gris
   pâle institutionnel (guide §2.2 point 2 : "Pour le fond des fenêtres,
   éviter les teintes de rouge, de jaune... Privilégier plutôt le gris
   pâle" — #EAECEF est la teinte "espace public" du guide) plutôt que le
   bleu pâle d'origine, gardé pour les seuls éléments de saisie/action. */
.section-bourses,
.section-resultats {
    background: linear-gradient(135deg, #EAECEF 0%, #F2F3F5 40%, #F8F9FA 100%) !important;
}

.section-bourses::before,
.section-resultats::before {
    background: rgba(0, 158, 73, 0.07) !important;
}

.section-bourses::after,
.section-resultats::after {
    background: rgba(0, 158, 73, 0.05) !important;
}

/* En-tête des cartes de bourse "Ouverte" : vert institutionnel — la
   classe se nomme déjà bh-success, mais utilisait un dégradé bleu.
   bh-primary (tuiles "type de bourse", récupérées d'Angels1er) reprend
   le même vert : ce n'est pas un statut, juste l'accent générique. */
.bh-success,
.bh-primary {
    background: linear-gradient(135deg, var(--gouv-green) 0%, var(--gouv-green-dark) 100%) !important;
}

.bh-success .bourse-icon-circle i,
.bh-primary .bourse-icon-circle i {
    color: var(--gouv-green) !important;
}

/* bh-warning ("à venir") / bh-secondary ("fermé") : mêmes cartes de bourse,
   dégradé bleu/gris Bootstrap remplacé par les teintes du drapeau déjà
   utilisées pour ces statuts ailleurs dans l'appli plutôt que des couleurs
   génériques sans lien avec la charte. */
.bh-warning {
    background: linear-gradient(135deg, #B8860B 0%, var(--gouv-gold) 100%) !important;
}

.bh-warning .bourse-icon-circle i {
    color: #B8860B !important;
}

.bh-secondary {
    background: linear-gradient(135deg, var(--gouv-navy) 0%, var(--gouv-navy-soft) 100%) !important;
}

.bh-secondary .bourse-icon-circle i {
    color: var(--gouv-navy) !important;
}

/* En-tête des cartes de résultats publiés */
.rh-primary {
    background: linear-gradient(135deg, var(--gouv-green) 0%, var(--gouv-green-dark) 100%) !important;
}

.resultat-icon-circle i {
    color: var(--gouv-green) !important;
}

.resultat-item:hover .resultat-icon-circle {
    box-shadow: 0 4px 16px rgba(0, 158, 73, 0.4) !important;
}

.resultat-item:hover .resultat-icon-circle i {
    color: var(--gouv-green) !important;
}

/* Bandeau de statistiques : le vert est listé par le guide comme un
   dérivé du jaune à éviter en fond de fenêtre (§2.2 pt.2), au même titre
   que le rouge — retour au marine institutionnel pour cet aplat pleine
   largeur (le vert reste la couleur d'action des boutons/CTA, un usage
   différent que le guide autorise explicitement). */
.stats-band {
    background: linear-gradient(135deg, var(--gouv-navy) 0%, var(--gouv-navy-soft) 100%);
}

/* Étiquette au-dessus des titres de section ("Candidatures", "Démarches", "Résultats") */
.section-eyebrow-tag {
    background: linear-gradient(135deg, var(--gouv-green), var(--gouv-green-dark));
}

/* Mot-clé accentué des titres de section ("disponibles", "postuler",
   "publiés") : vert institutionnel plutôt que le bleu d'origine. */
.text-gradient-blue {
    background: linear-gradient(135deg, var(--gouv-green), var(--gouv-green-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Bordure en haut des cartes d'étape : dégradé rouge → vert, sans
        bande jaune intermédiaire — reproduction exacte du bandeau des
        cartes "Comment utiliser nos services" (capture MEMC), qui est
        un dégradé à deux couleurs, pas un bandeau tricolore à paliers. */
.how-step {
    /* border-image ne peint que les côtés dont la largeur est non nulle :
       on annule les 3 autres côtés hérités de style.css pour que le
       dégradé ne s'étende qu'en haut de la carte. */
    border-width: 4px 0 0 0;
    border-style: solid;
    border-color: transparent;
    border-image: linear-gradient(90deg, var(--gouv-red) 0%, var(--gouv-green) 100%) 1;
}

/* Icônes des étapes "Comment postuler" : accent vert au survol, cohérent
   avec la couleur d'action retenue plutôt que le bleu d'origine. */
.how-step:hover .how-step-icon {
    background: linear-gradient(135deg, var(--gouv-green), var(--gouv-green-dark));
    color: #fff;
}

/* ---- Pied de page institutionnel ---- */
.gouv-footer {
    background-color: var(--gouv-navy) !important;
}

.gouv-footer .h3.text-secondary {
    font-size: 1.15rem;
}

/* Bandeau de copyright, sous le pied de page marine : un aplat rouge ici
   (repris de portails de référence) contrevient au guide (§2.2 pt.2) —
   une nuance de marine légèrement plus sombre que .gouv-footer suffit à
   distinguer les deux bandeaux. */
.gouv-footer-bottom {
    background-color: #00121f;
    padding: 0.9rem 0;
}

.gouv-footer-bottom span,
.gouv-footer-bottom a {
    color: #fff !important;
}

@media (max-width: 767.98px) {
    .logo-armoiries {
        height: 44px;
    }
}

/* ---- Page de connexion : même écart que l'en-tête et corrigé de la même
   façon — un fond plein écran aux trois couleurs du drapeau contrevient
   au guide (§2.2 pt.2 : rouge/jaune/vert interdits en fond de fenêtre ;
   §2.1.2 : drapeau "avec parcimonie", jamais en aplat). Fond marine de la
   palette officielle "Espace public", le drapeau restant présent via le
   liseré de .login-card::before ci-dessous. ---- */
.login-page {
    background: linear-gradient(135deg, var(--gouv-navy) 0%, var(--gouv-navy-soft) 100%);
}

.login-panel-left {
    background: linear-gradient(135deg, var(--gouv-navy) 0%, var(--gouv-navy-soft) 100%);
}

/* Les halos décoratifs d'origine (bleu / doré) restent neutralisés : le
   fond marine uni porte l'identité, sans les réactiver. */
.login-page::before,
.login-page::after {
    display: none;
}

/* Plaque vitrée sombre derrière le logo/titre : conservée pour le
   contraste du texte blanc/doré, même si le fond marine uni en dessous
   est déjà plus sombre que l'ancien dégradé (le jaune du milieu a disparu). */
.login-panel-content {
    background: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 20px;
    padding: 28px 26px;
}

/* Liseré tricolore en haut de la carte de connexion (.login-card a déjà
   overflow:hidden + border-radius : le pseudo-élément est donc clippé
   proprement aux coins arrondis). */
.login-card {
    position: relative;
}

.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 2;
    background: linear-gradient(90deg, var(--gouv-red) 0%, var(--gouv-green) 100%);
}

.login-field:focus-within {
    border-color: var(--gouv-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 158, 73, 0.12) !important;
}

.login-field:focus-within .login-field-icon,
.login-pwd-toggle:hover {
    color: var(--gouv-green) !important;
}

.login-btn {
    background: linear-gradient(135deg, var(--gouv-green) 0%, var(--gouv-green-dark) 100%);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 158, 73, 0.35);
}

.login-btn:hover {
    box-shadow: 0 12px 32px rgba(0, 158, 73, 0.45);
}

.login-footer a {
    color: var(--gouv-green);
}