/* ============================================================
   Tokens tenant MAL (ADEO Africa) — tout le theming (hover, focus
   ring, dégradés, ombres) dérive de --brand via color-mix()
   dans auth.components.css / auth.layout.css.
   ============================================================ */
:root {
    --brand: #F65503;
    --brand-rgb: 246, 85, 3;
    --brand-ink: #1A1A1A;
    --logo-url: url(../img/portail-mal/logo.svg);

    /* Volet de marque « Clair » : l'orange ADEO en aplat écraserait la carte,
       le visuel est donc posé sur un fond sable et la typo passe en encre foncée.
       Le visuel occupe toute la hauteur du volet (recadrage "cover") et
       l'accroche est superposée dessus.
       Cadrage à gauche, et c'est structurant : tout le contenu utile du visuel
       (logo ADEO, carte d'Afrique, légende « Pays actif ») tient dans sa moitié
       gauche, le reste n'étant que les vagues décoratives. Ancré à gauche, le
       recadrage "cover" ne rogne donc que du décor, jamais le logo ni la
       légende, et ce quel que soit le format de la fenêtre — aucun cache ni
       recadrage compensatoire n'est nécessaire.
       URL à garder identique au préchargement déclaré dans _Layout.cshtml. */
    --auth-brand-width: 66%;
    --auth-brand-image: url(../img/portail-mal/background.jpg?v=4);

    /* Gouttière interne du visuel : le logo (x=106) et la légende (x=105) y sont
       alignés, sur une image haute de 1074 px, soit 9.87 % de sa hauteur. Le
       visuel étant recadré "cover" sur la hauteur du volet, cette gouttière vaut
       donc 9.87 % de cette hauteur — c'est sur elle que l'accroche est calée
       pour tomber sur la même verticale que le logo. À remesurer si le visuel
       est remplacé. */
    --auth-art-gutter: 9.87vh;

    --auth-panel-bg: #FDF1E7;
    --auth-panel-shade: #F5D6BC;
    --auth-panel-ink: #1A1A1A;
    --auth-panel-ink-soft: #6B5B52;
    --auth-panel-rule: #F65503;

    --auth-photo-opacity: 1;
    --auth-photo-filter: none;
    --auth-photo-position: left center;

    --auth-logo-filter: none;
    --auth-logo-ratio: .49;

    /* alias héritage (anciennes règles / vues legacy) */
    --color-default: #90A7B8;
    --color-primary: #F65503;
    --color-primary-rgb: 246, 85, 3;
    --color-transparant: #00000000;
}

/* Volet clair sur formulaire blanc : une ombre portée matérialise l'arrondi. */
.auth-brand {
    box-shadow: 18px 0 44px -32px rgba(26, 26, 26, .55);
}

/* Voiles désactivés : ils sont pensés pour un aplat de marque uni, alors qu'ici
   le visuel EST le fond du volet et doit rester net et dans ses couleurs. La
   lisibilité de l'accroche est déjà assurée : encre foncée sur la zone la plus
   claire du visuel (le fond de carte, quasi blanc). */
.auth-brand .brand-scrim,
.auth-brand .brand-veil {
    display: none;
}

/* Le visuel embarque déjà son propre logo (coin haut-gauche), intégralement
   visible grâce au cadrage à gauche : celui du volet ferait doublon en desktop.
   En bandeau mobile, le visuel est recadré en hauteur et son logo disparaît :
   on le rétablit alors. */
@media (min-width: 901px) {
    .auth-brand .brand-logo {
        display: none;
    }
}

/* Placement de l'accroche, superposée au visuel.
   - En bas : sans logo en flux (masqué ci-dessus), le "space-between" du volet
     n'a plus qu'un seul élément et collerait l'accroche en haut ; on la
     repousse donc en bas. La marge réserve la bande où le visuel affiche sa
     légende « Pays actifs — … » (derniers 9 % de sa hauteur), le retrait bas du
     volet fournissant ensuite l'espace de respiration entre les deux.
   - À gauche : on annule le retrait gauche du volet pour repartir de son bord,
     puis on cale l'accroche sur la gouttière du visuel, ce qui la met sur la
     même verticale que le logo. Repartir du bord évite de redupliquer ici la
     valeur du retrait défini dans auth.layout.css.
   Marges en vh : le volet fait la hauteur de la fenêtre, alors que les marges
   en % se résoudraient, elles, sur la largeur. */
@media (min-width: 901px) {
    .auth-shell .auth-brand {
        padding-left: 0;
    }

    .auth-brand .brand-copy {
        margin-top: auto;
        margin-bottom: 9vh;
        margin-left: var(--auth-art-gutter);
    }
}