/* =====================================================================
   GlofPay — identité visuelle de la vitrine
   =====================================================================

   Chargée APRÈS public/frontend/templates/css/style.min.css.

   Cette feuille manquait : j'avais traité la vitrine page par page, avec
   des styles portés par chaque vue. Les pages que je n'avais pas encore
   refaites — la page développeur, la politique de confidentialité —
   gardaient donc les couleurs du gabarit.

   Recensement fait règle par règle sur style.css : 61 sélecteurs portent
   le violet, réparti sur six teintes.

     #635bfe  43 sélecteurs
     #635bff  13 sélecteurs
     #3a0ca3   3 sélecteurs   (le violet foncé du bandeau développeur)
     #8167a9   2 sélecteurs
     #9d80f8   1 sélecteur
     #9690ff   1 sélecteur

   Tous sont repris ci-dessous, groupés par propriété comme dans le
   fichier d'origine.
   ===================================================================== */

:root {
    --glof: #3B9FF3;
    --glof-deep: #1E7FD4;
    --glof-dark: #0B4F9E;
    --glof-night: #0D2B47;
    --glof-wash: #EDF4FC;
    --glof-border: #C7DCF3;
    --glof-ink: #16233A;
    --glof-ink-soft: #58697E;
    --glof-line: #E3EAF2;
}


/* ---------------------------------------------------------------------
   1. Groupe « color » — 24 sélecteurs
   --------------------------------------------------------------------- */

.color-FE,
.color-FF,
.color-FFr,
.d-link,
.active-nav,
.privacy-nav-active,
.breadcrumb-item.active,
.auth-module-header a,
.data-contact a,
.nav-active .nav-link,
.nav-item:hover .nav-link,
.resend-code.btn,
.resend-code.btn:hover,
.collapsible:after,
#main #faq .accordion-item .accordion-header .btn-header-link:after,
#main #faq .accordion-item .accordion-header .btn-header-link.collapsed:after,
.select2-container--default .select2-results__option--selected {
    color: var(--glof-deep) !important;
}

.icon-container svg { color: var(--glof-deep) !important; fill: var(--glof-wash) !important; }

/* Le pictogramme du mode sombre était repeint en violet. */
body.dark .path-blue, .dark .path-blue { fill: var(--glof) !important; }


/* ---------------------------------------------------------------------
   2. Groupe « background-color » — 15 sélecteurs
   --------------------------------------------------------------------- */

.btn-primary,
.log-btn,
.tab-active,
.bgd-blue,
.button-widths,
.learn-btn,
.custom-form-grp button,
.form-check-input:checked,
.reg-btn:hover,
.xs-padding.p-17-19,
input::file-selector-button,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.gtco-testimonials .owl-dots .active span {
    background-color: var(--glof) !important;
    border-color: var(--glof) !important;
}

body.dark .bgd-blue,
body.dark .learn-btn,
.dark .bgd-blue,
.dark .learn-btn,
body.dark .gtco-testimonials .owl-dots .active span,
.dark .gtco-testimonials .owl-dots .active span {
    background-color: var(--glof) !important;
}

/* Le liseré sous l'élément de menu actif. */
.nav-active:before,
.nav-item:after,
.small-border { background-color: var(--glof) !important; background: var(--glof) !important; }

/* La barre du bas de la vitrine. */
.bottom-footer { background-color: var(--glof-night) !important; }


/* ---------------------------------------------------------------------
   3. Groupe « border » — 9 sélecteurs

   Champs au focus et cartes selectionnees.
   --------------------------------------------------------------------- */

.input-form-control:hover,
input[type="tel"]:hover,
.dark input[type="tel"]:hover,
body.dark input[type="tel"]:hover {
    border-color: #BFC7D2 !important;
}

.input-form-control:focus,
.iti .form-control:focus,
.dark .iti .form-control:focus,
body.dark .iti .form-control:focus,
.form-check-input:focus,
.select2-extends .select2-container .select2-selection--single[aria-expanded="true"],
.dark .select2-extends .select2-container .select2-selection--single[aria-expanded="true"] {
    border-color: var(--glof) !important;
    box-shadow: 0 0 0 3px rgba(59, 159, 243, .18) !important;
}

.user-selected,
.gateway-selected,
body.dark .user-selected,
.dark .user-selected {
    border-color: var(--glof) !important;
    background-color: var(--glof-wash) !important;
}

.dark .user-selected, body.dark .user-selected { background-color: #153A61 !important; }


/* ---------------------------------------------------------------------
   4. Bandeau de la page développeur

   Le violet foncé #3a0ca3 y sert de fond, avec un dégradé vers le mauve.
   C'est le bloc le plus visible du site après la page d'accueil.
   --------------------------------------------------------------------- */

.developer-banner,
.developer-header,
.breadcrumb-banner,
.inner-banner,
.page-banner,
.sub-header {
    background-color: var(--glof-wash) !important;
    background-image: none !important;
}

/* Le badge « Développeur » et les onglets d'intégration. */
.developer-btn,
.dev-tab .active,
.dev-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--glof) !important;
    border-color: var(--glof) !important;
    color: #fff !important;
}

/* Filet de sécurité par la valeur, pour les fonds appliqués en ligne
   ou par un script — le gabarit en pose plusieurs sur cette page. */
[style*="#3a0ca3"], [style*="#3A0CA3"],
[style*="#635bfe"], [style*="#635BFE"],
[style*="#635bff"], [style*="#635BFF"] {
    background-color: var(--glof) !important;
    background-image: none !important;
}


/* ---------------------------------------------------------------------
   5. Mode sombre

   La vitrine pose la classe sur <body>, le panneau utilisateur sur
   <html>. `.dark` en ascendant couvre les deux, mais le gabarit emploie
   aussi `body.dark` : les deux formes sont visées.
   --------------------------------------------------------------------- */

body.dark, .dark body {
    --glof-line: #24405F;
}

/* Fond de page et surfaces. */
body.dark .bg-white, .dark .bg-white,
body.dark .white-shad, .dark .white-shad,
body.dark .p-24-28, .dark .p-24-28 {
    background-color: #122A47 !important;
    border-color: #24405F !important;
}

body.dark .developer-banner, .dark .developer-banner,
body.dark .breadcrumb-banner, .dark .breadcrumb-banner,
body.dark .inner-banner, .dark .inner-banner,
body.dark .page-banner, .dark .page-banner,
body.dark .sub-header, .dark .sub-header {
    background-color: #0F1B2A !important;
    background-image: none !important;
}

/* Les onglets d'intégration en mode sombre. */
body.dark .nav-pills, .dark .nav-pills { background-color: #122A47 !important; }

body.dark .nav-pills .nav-link, .dark .nav-pills .nav-link { color: #97A6BA !important; }

body.dark .nav-pills .nav-link.active, .dark .nav-pills .nav-link.active {
    background-color: var(--glof) !important;
    color: #fff !important;
}

/* Champs. */
body.dark .input-form-control, .dark .input-form-control,
body.dark .form-control, .dark .form-control,
body.dark input[type="tel"], .dark input[type="tel"],
body.dark .iti .form-control, .dark .iti .form-control {
    background-color: #16304F !important;
    border-color: #2C4A6B !important;
    color: #E8ECF2 !important;
}

body.dark .select2-extends .select2-container .select2-selection--single,
.dark .select2-extends .select2-container .select2-selection--single {
    background-color: #16304F !important;
    border-color: #2C4A6B !important;
}

body.dark .select2-dropdown, .dark .select2-dropdown,
body.dark .select2-search__field, .dark .select2-search__field {
    background-color: #16304F !important;
    border-color: #2C4A6B !important;
    color: #E8ECF2 !important;
}


/* ---------------------------------------------------------------------
   6. Boutons

   Le survol virait au jaune dans le gabarit : l'effet surprend et
   n'appartient à aucune convention.
   --------------------------------------------------------------------- */

.btn { border-radius: 9px !important; }

.btn-primary:hover,
.btn-primary:focus,
.log-btn:hover,
.button-widths:hover,
.learn-btn:hover {
    background-color: var(--glof-deep) !important;
    border-color: var(--glof-deep) !important;
    color: #fff !important;
}

.reg-btn {
    background-color: var(--glof) !important;
    border-color: var(--glof) !important;
    color: #fff !important;
}


/* ---------------------------------------------------------------------
   7. Montants

   Chiffres tabulaires : les colonnes de sommes s'alignent verticalement,
   comme sur un relevé bancaire.
   --------------------------------------------------------------------- */

.total-amount h3,
.transaction-total span,
.amountLimit,
.pFees,
.fFees,
.total_fees,
.f-26,
.f-24 {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------------
   8. Derniers sélecteurs du gabarit

   Repérés par comparaison automatique entre style.css et cette feuille.
   --------------------------------------------------------------------- */

/* L'astérisque des champs obligatoires et les numéros d'étape. */
.star,
.type-text .star,
.steps-details span,
.total-amount h3 {
    color: var(--glof-deep) !important;
}

/* Les barres de défilement fines du gabarit. */
.thin-scrollbar::-webkit-scrollbar-thumb,
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--glof) !important;
}

body.dark .thin-scrollbar::-webkit-scrollbar-thumb,
.dark .thin-scrollbar::-webkit-scrollbar-thumb {
    background: #2C4A6B !important;
}

/* ---------------------------------------------------------------------
   9. Le dégradé animé de la page d'accueil

   Le gabarit déclare deux propriétés personnalisées, --myColor4 et
   --myColor5, avec une valeur initiale violette. Une regle @property ne
   peut pas etre surchargee : sa valeur initiale est figee a la
   declaration. On redefinit donc les variables sur :root, ce qui prend
   le pas des que le gabarit les lit.
   --------------------------------------------------------------------- */

:root {
    --myColor4: #3B9FF3;
    --myColor5: #0B4F9E;
}


/* ---------------------------------------------------------------------
   10. Les bandeaux violet foncé restants

   Recensement fait sur style.css : quatre teintes sombres violacées
   echappaient encore aux regles ci-dessus, parce qu'elles ne sont pas
   portees par --bs-primary mais ecrites en dur.

     #2D1959   .bg-2D, .footer-sec, .header-bg
     #2E2446   body.dark .navigation-wrap, body.dark .footer-sec
     #392C56   le remplissage des icones de reseaux sociaux en mode sombre
     #1A1721   body.dark .dark-app

   Elles sont reprises en bleus nuit GlofPay.
   --------------------------------------------------------------------- */

.bg-2D,
.footer-sec,
.header-bg {
    background-color: var(--glof-night) !important;
}

body.dark .navigation-wrap,
.dark .navigation-wrap,
body.dark .footer-sec,
.dark .footer-sec {
    background-color: #0A2440 !important;
}

body.dark .dark-app,
.dark .dark-app {
    background-color: #0A2440 !important;
}

body.dark .facebook svg,
body.dark .twitter svg,
body.dark .instagram svg,
body.dark .whtsapp svg,
body.dark .pinterest svg,
body.dark .linkdin svg,
.dark .facebook svg,
.dark .twitter svg,
.dark .instagram svg,
.dark .whtsapp svg,
.dark .pinterest svg,
.dark .linkdin svg {
    fill: #1A4E7E;
}

/* ---------------------------------------------------------------------
   11. Les accents chauds de la vitrine

   Le gabarit emploie #FFAF30 comme couleur d'accent du mode sombre :
   liens, montants, étoiles, survol des boutons — seize sélecteurs. Sur
   fond marine il faut une teinte claire, sinon le texte disparaît ; on
   prend donc un bleu clair, et non le bleu foncé de la marque.
   --------------------------------------------------------------------- */

body.dark .color-FE,
body.dark .color-FF,
body.dark .transaction-total span,
body.dark .total-amount h3,
body.dark .data-contact a,
body.dark .privacy-nav-active,
body.dark .resend-code.btn,
body.dark .resend-code.btn:hover,
body.dark .auth-module-header a,
body.dark .star,
.dark .color-FE,
.dark .color-FF,
.dark .steps-details span,
.dark .snippet-text.run-code span {
    color: #6FB6F7 !important;
}

body.dark .path-yellow,
.dark .path-yellow {
    fill: #6FB6F7;
}

.dark .icon-container svg {
    fill: #153A61;
    color: #6FB6F7;
}

body.dark .btn:hover,
.dark .btn:hover {
    background: var(--glof) !important;
    color: #fff !important;
}

.links li a:hover {
    color: var(--glof) !important;
}

/* ---------------------------------------------------------------------
   12. Le mode sombre de la vitrine

   Le fond de page est déclaré une seule fois, sur `body.dark`, avec
   #1A1721 — un noir violacé. Tout le reste du mode sombre s'accroche à
   trois teintes de la même famille, réparties sur une vingtaine de
   règles :

     #1A1721   fond de page, sections pleine largeur, page de connexion
     #25212F   cartes et blocs de formulaire
     #2E293A   surfaces surélevées, accordéons, alertes

   Correspondances retenues, identiques à celles du panneau utilisateur
   pour que les deux moitiés du site aient la même profondeur :

     #1A1721 → #0C2038
     #25212F → #122A47
     #2E293A → #16304F
     bordures #3F405B / #C1BFDF → #2C4A6B
   --------------------------------------------------------------------- */

/* --- Fond de page (#1A1721) --- */

body.dark,
.dark body,
body.dark .get-section,
body.dark .provide-sec,
body.dark .gtco-testimonials,
body.dark .dark-app,
.dark .main-auth-div,
.dark .merchant-tab-section {
    background-color: #0C2038 !important;
}

.dark .merchant-tab-section {
    border-bottom-color: #2C4A6B !important;
}

/* --- Cartes et blocs de formulaire (#25212F) --- */

body.dark .transaction-details-module,
body.dark .payment-main-module,
body.dark .form-control.bank,
body.dark .form-control.upload-filed,
.bg-form {
    background-color: #122A47 !important;
    border-color: #16304F !important;
}

body.dark .btn-light,
body.dark .btn-light:hover {
    background: #122A47 !important;
    color: #E8ECF2 !important;
    border: 1px solid #2C4A6B !important;
}

/* --- Surfaces surélevées (#2E293A) --- */

body.dark .white-shad,
body.dark .gray-shad,
body.dark .privacy-left-box,
body.dark #main #faq .accordion-item .accordion-header .btn-header-link,
body.dark #main #faq .accordion-item .accordion-header .btn-header-link.collapsed,
body.dark .accordion .accordion-body,
body.dark .alert-animate,
.dark .alert-animate {
    background: #16304F !important;
    border-color: #2C4A6B !important;
    color: #E8ECF2 !important;
}

body.dark .path-deep-black,
.dark .path-deep-black {
    fill: #16304F;
}

/* ---------------------------------------------------------------------
   13. Élimination de #1A1721 et de sa voisine #24212D

   Ces deux noirs violacés restaient visibles à trois endroits que le
   bloc 12 ne couvrait pas :

     - la trame de fond des pages d'authentification, qui n'est pas une
       règle CSS mais un fichier image, bg-pattern-dark.svg, dont le
       voile est peint en #1A1721 ;
     - les sections claires inversées en mode sombre (#24212D) : la
       bande « pourquoi nous choisir », la troisième section de
       l'accueil, la carte centrale du carrousel de témoignages ;
     - le pied de page et la barre de navigation, déjà repris au bloc 10.

   Le SVG est livré recoloré. Les règles ci-dessous couvrent le reste,
   y compris la feuille minifiée, qui contient les mêmes valeurs mais
   que nous ne modifions pas — elle est écrasée par cascade.
   --------------------------------------------------------------------- */

body.dark .bg-ligt-pink,
body.dark .third-section,
body.dark .owl-item.active.center .card,
.dark .bg-ligt-pink,
.dark .third-section,
.dark .owl-item.active.center .card {
    background-color: #122A47 !important;
    border-color: #2C4A6B !important;
}

/* Filet de sécurité : les scripts du gabarit écrivent parfois ces
   valeurs dans un attribut `style`. */

[style*="#1A1721"],
[style*="#1a1721"],
[style*="#24212D"],
[style*="#24212d"] {
    background-color: #0C2038 !important;
}

/* ---------------------------------------------------------------------
   14. Les bandeaux sombres de la page developpeur

   Deux zones restaient sur le fond de page, ce qui les faisait lire comme
   du noir plutot que comme du bleu : la barre de navigation, qui prend le
   fond du corps quand elle n'est pas encore descendue, et la bande qui
   porte les onglets Standard / Express / Opencart / Woocommerce.

   Elles passent au bleu marine des barres, un cran au-dessus du fond,
   pour se detacher de la page.
   --------------------------------------------------------------------- */

body.dark .navigation-wrap,
.dark .navigation-wrap,
body.dark .start-header,
.dark .start-header,
body.dark .merchant-tab-section,
.dark .merchant-tab-section {
    background-color: #0A2440 !important;
}

body.dark .merchant-tab,
.dark .merchant-tab {
    background-color: #16304F !important;
    border-color: #2C4A6B !important;
}

/* Les onglets inactifs de cette bande. */
body.dark .merchant-tab a,
.dark .merchant-tab a {
    color: #9FB4CC !important;
}

body.dark .merchant-tab a.tab-active,
.dark .merchant-tab a.tab-active {
    background-color: var(--glof) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   15. Le bandeau des moyens de paiement

   Il melangeait des libelles et des marques : « Depots et retraits par »,
   puis des pastilles de texte, puis un separateur, puis « Carte et
   portefeuille », puis les logos. Beaucoup de mots pour une information
   que les logos donnent seuls.

   Les libelles et les pastilles sont masques, les marques restent. On
   masque par le style plutot qu'en retirant le texte du gabarit : le
   contenu demeure lisible par les lecteurs d'ecran, pour qui une suite
   d'images sans intitule ne veut rien dire.
   --------------------------------------------------------------------- */

.gp-strip__in > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Les marques restent, recentrees et un peu plus aerees puisqu'elles
   occupent desormais la bande a elles seules. */
.gp-strip__in {
    justify-content: center !important;
    gap: 34px !important;
}

.gp-strip__in > span.gp-mark,
.gp-strip__in svg.gp-mark,
.gp-strip__in img {
    position: static !important;
    width: auto !important;
    height: 26px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
}