/* =============================================================================
   FAUBOURG — habillage du WebClient SFTPGo 2.7.6
   -----------------------------------------------------------------------------
   Feuille ADDITIVE, injectee via branding.web_client.extra_css, apres
   style.bundle.css. Aucun gabarit ni fichier livre avec l image n est modifie.

   Principes : le vide separe (pas de filets), aucune ombre, rayons quasi nuls,
   une seule grotesque avec un ecart de graisse tranche, un seul gris secondaire.
   Le theme sombre n est PAS une inversion : son fond est un charbon profond et
   ses surfaces se detachent par la valeur, pas par une bordure.
   ============================================================================= */

/* --- 1. Police auto-hebergee -------------------------------------------------
   Aucun appel a un tiers : la plateforme est destinee a la DMZ et ses clients
   sont externes. Fichier variable unique, 400 a 700. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("schibsted-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("schibsted-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Jetons --------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --fb-ground:   #FFFFFF;   /* fond de page */
  --fb-surface:  #FFFFFF;   /* cartes, modales */
  --fb-sunken:   #F6F6F5;   /* zones en retrait */
  --fb-field:    #F4F4F3;   /* champs de saisie */
  --fb-ink:      #0A0A0A;   /* noir profond */
  --fb-mute:     #737373;   /* GRIS SECONDAIRE UNIQUE */
  --fb-hair:     #E8E8E6;   /* filet, employe avec parcimonie */
  --fb-hover:    #F2F2F1;
  --fb-radius:   2px;
}
[data-bs-theme="dark"] {
  --fb-ground:   #0D0D0E;
  --fb-surface:  #161618;
  --fb-sunken:   #121214;
  --fb-field:    #1C1C1F;
  --fb-ink:      #F2F2F0;
  --fb-mute:     #8C8C8A;
  --fb-hair:     #232326;
  --fb-hover:    #1E1E21;
}

/* --- 3. Report sur les variables du theme ------------------------------------ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: "Schibsted Grotesk", ui-sans-serif, system-ui,
                         -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.6;

  --bs-body-bg: var(--fb-ground);
  --bs-body-color: var(--fb-ink);
  --bs-app-bg-color: var(--fb-ground);
  --bs-border-color: var(--fb-hair);

  --bs-border-radius:      var(--fb-radius);
  --bs-border-radius-sm:   var(--fb-radius);
  --bs-border-radius-lg:   var(--fb-radius);
  --bs-border-radius-xl:   var(--fb-radius);
  --bs-border-radius-xxl:  var(--fb-radius);
  --bs-border-radius-2xl:  var(--fb-radius);

  --bs-card-bg: var(--fb-surface);
  --bs-card-cap-bg: transparent;
  --bs-card-border-width: 0;
  --bs-card-border-color: transparent;
  --bs-card-border-radius: var(--fb-radius);
  --bs-card-inner-border-radius: var(--fb-radius);
  --bs-card-box-shadow: none;
  --bs-card-spacer-x: 2rem;
  --bs-card-spacer-y: 1.75rem;
  --bs-card-cap-padding-x: 2rem;
  --bs-card-cap-padding-y: 1.5rem;

  --bs-modal-bg: var(--fb-surface);
  --bs-modal-color: var(--fb-ink);
  --bs-modal-border-width: 0;
  --bs-modal-border-color: transparent;
  --bs-modal-border-radius: var(--fb-radius);
  --bs-modal-inner-border-radius: var(--fb-radius);
  --bs-modal-box-shadow: none;
  --bs-modal-padding: 2rem;
  --bs-modal-header-padding-x: 2rem;
  --bs-modal-header-padding-y: 1.5rem;
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
  --bs-modal-footer-gap: 0.625rem;

  --bs-app-sidebar-base-bg-color: var(--fb-ground);
  --bs-app-sidebar-base-border-end: 0;
  --bs-app-sidebar-base-box-shadow: none;

  /* famille primaire : monochrome, coherente avec le monogramme */
  --bs-primary:               var(--fb-ink);
  --bs-primary-active:        var(--fb-mute);
  --bs-primary-inverse:       var(--fb-ground);
  --bs-primary-light:         var(--fb-sunken);
  --bs-primary-bg-subtle:     var(--fb-sunken);
  --bs-primary-border-subtle: var(--fb-hair);
  --bs-primary-text-emphasis: var(--fb-ink);
}
[data-bs-theme="light"] { --bs-primary-rgb: 10, 10, 10; --bs-primary-clarity: rgba(10,10,10,.12); }

/* Metronic porte l accent dans SEIZE autres variables que --bs-primary :
   liens, menus, composants actifs, cases cochees, barres de progression.
   Les omettre laisse du bleu par defaut dispersee dans l interface. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-link-color:              var(--fb-ink);
  --bs-link-hover-color:        var(--fb-mute);
  --bs-link-decoration:         underline;
  --bs-text-primary:            var(--fb-ink);
  --bs-component-active-bg:     var(--fb-ink);
  --bs-component-checked-bg:    var(--fb-ink);
  --bs-component-hover-color:   var(--fb-ink);
  --bs-menu-link-color-active:  var(--fb-ink);
  --bs-menu-link-color-here:    var(--fb-ink);
  --bs-menu-link-color-hover:   var(--fb-ink);
  --bs-menu-link-color-show:    var(--fb-ink);
  --bs-nav-pills-link-active-bg: var(--fb-ink);
  --bs-progress-bar-bg:         var(--fb-ink);
  --bs-ribbon-label-bg:         var(--fb-ink);
  --bs-scrolltop-bg-color:      var(--fb-ink);
  --bs-scrolltop-bg-color-hover: var(--fb-mute);
}
[data-bs-theme="light"] { --bs-link-color-rgb: 10, 10, 10; --bs-link-hover-color-rgb: 115, 115, 115; }
[data-bs-theme="dark"]  { --bs-link-color-rgb: 242, 242, 240; --bs-link-hover-color-rgb: 140, 140, 138; }


[data-bs-theme="dark"]  { --bs-primary-rgb: 242, 242, 240; --bs-primary-clarity: rgba(242,242,240,.14); }

/* --- 4. Typographie ---------------------------------------------------------- */
body {
  font-family: var(--bs-body-font-family);
  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-bolder, .fw-semibold {
  font-family: var(--bs-body-font-family);
}
h1, h2, h3, .card-title, .modal-title {
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--fb-ink);
  text-wrap: balance;
}
h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.3125rem; line-height: 1.25; }
h3, .card-title, .modal-title { font-size: 1.0625rem; line-height: 1.3; }

/* Un seul gris pour tout le secondaire. */
.text-muted,
.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700 { color: var(--fb-mute) !important; }
.text-gray-800, .text-gray-900, .text-dark { color: var(--fb-ink) !important; }

/* Chiffres alignes : tailles de fichiers, dates, quotas. */
table, .fs-7, .badge, time { font-variant-numeric: tabular-nums; }

/* --- 5. Aucune ombre --------------------------------------------------------- */
.shadow, .shadow-sm, .shadow-lg, .shadow-xs,
.card, .modal-content, .menu-sub-dropdown, .dropdown-menu,
.app-sidebar, .app-header {
  box-shadow: none !important;
}

/* --- 6. Coque applicative ---------------------------------------------------- */
.app-sidebar {
  background: var(--fb-ground);
  border-right: 0;
}
.app-sidebar-logo { border-bottom: 0; padding-block: 1.75rem; }
.app-header {
  background: var(--fb-ground);
  border-bottom: 1px solid var(--fb-hair);
}
.app-main, .app-content { background: var(--fb-ground); }
.app-footer { background: var(--fb-ground); border-top: 1px solid var(--fb-hair); color: var(--fb-mute); }

/* Navigation laterale : l etat actif se lit par la graisse et le fond, pas par une barre. */
.menu-link { border-radius: var(--fb-radius); color: var(--fb-mute); font-weight: 500; }
.menu-link:hover { background: var(--fb-hover); color: var(--fb-ink); }
.menu-item .menu-link.active { background: var(--fb-sunken); color: var(--fb-ink); font-weight: 700; }
.menu-title { letter-spacing: -0.008em; }

/* --- 7. Cartes : le vide separe ---------------------------------------------- */
.card {
  background: var(--fb-surface);
  border: 0;
  border-radius: var(--fb-radius);
}
.card-header {
  border-bottom: 0;
  min-height: auto;
  padding-block: 1.75rem 0.5rem;
  align-items: flex-start;
}
.card-body { padding-top: 1.25rem; }
.separator { border-color: var(--fb-hair); opacity: 1; }

/* --- 8. Boutons -------------------------------------------------------------- */
.btn {
  border-radius: var(--fb-radius);
  font-weight: 600;
  letter-spacing: -0.004em;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:focus, .btn:active { box-shadow: none !important; }
.btn-primary {
  background: var(--fb-ink);
  border-color: var(--fb-ink);
  color: var(--fb-ground);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--fb-mute) !important;
  border-color: var(--fb-mute) !important;
  color: var(--fb-ground) !important;
}
.btn-light, .btn-light-primary, .btn-secondary, .btn-active-light-primary {
  background: var(--fb-sunken);
  border-color: transparent;
  color: var(--fb-ink);
}
.btn-light:hover, .btn-light-primary:hover, .btn-secondary:hover {
  background: var(--fb-hover) !important;
  color: var(--fb-ink) !important;
}
.btn-lg { padding: 0.8125rem 1.5rem; font-size: 0.9375rem; }

/* --- 9. Champs --------------------------------------------------------------- */
.form-control, .form-select {
  background: var(--fb-field);
  border: 1px solid transparent;
  border-radius: var(--fb-radius);
  color: var(--fb-ink);
  box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.form-control-solid, .form-select-solid { background: var(--fb-field); border-color: transparent; }
.form-control:focus, .form-select:focus,
.form-control-solid:focus, .form-select-solid:focus {
  background: var(--fb-surface);
  border-color: var(--fb-ink);
  color: var(--fb-ink);
  box-shadow: none;
  outline: none;
}
.form-control::placeholder { color: var(--fb-mute); opacity: 1; }
.form-control-lg { padding: 0.875rem 1rem; font-size: 0.9375rem; }
.form-label { font-weight: 600; font-size: 0.8125rem; color: var(--fb-ink); letter-spacing: -0.002em; }
.form-check-input {
  border-radius: var(--fb-radius);
  border-color: var(--fb-hair);
  background-color: var(--fb-field);
  box-shadow: none;
}
.form-check-input:checked { background-color: var(--fb-ink); border-color: var(--fb-ink); }
.form-check-input:focus { box-shadow: none; border-color: var(--fb-ink); }

/* --- 10. Tableaux : lignes aerees, un seul filet sous l en-tete --------------- */
.table { --bs-table-bg: transparent; color: var(--fb-ink); }
.table > thead > tr > th {
  border-bottom: 1px solid var(--fb-hair) !important;
  color: var(--fb-mute) !important;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 0.75rem 0.875rem;
}
.table.table-row-dashed > tbody > tr { border-bottom-style: none; }
.table > tbody > tr { border-bottom: 0; }
.table > tbody > tr > td { padding-block: 0.9375rem; border: 0; }
.table > tbody > tr:hover > td { background: var(--fb-hover); }
.table-row-dashed > :not(caption) > * > * { border-bottom-width: 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
  background: var(--fb-ink); border-color: var(--fb-ink); color: var(--fb-ground);
}
.page-link { border-radius: var(--fb-radius); color: var(--fb-mute); border: 0; }
.page-link:hover { background: var(--fb-hover); color: var(--fb-ink); }

/* --- 11. Modales et menus ---------------------------------------------------- */
.modal-content { background: var(--fb-surface); border: 0; border-radius: var(--fb-radius); }
.modal-header { border-bottom: 0; padding-bottom: 0.5rem; }
.modal-footer { border-top: 0; padding-top: 1rem; }
.modal-backdrop.show { opacity: .5; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .68; }
.menu-sub-dropdown, .dropdown-menu {
  background: var(--fb-surface);
  border: 1px solid var(--fb-hair);
  border-radius: var(--fb-radius);
}
.badge { border-radius: var(--fb-radius); font-weight: 600; letter-spacing: 0.01em; }
.badge-light-primary, .badge-primary { background: var(--fb-sunken); color: var(--fb-ink); }

/* --- 12. Page de connexion : la vitrine -------------------------------------- */
body.app-blank { background: var(--fb-ground); }

/* La carte cesse d etre une carte : plus de fond distinct, plus d ombre. */
body.app-blank .bg-body {
  background: transparent !important;
  border-radius: 0;
  padding: 0 !important;
}
body.app-blank .flex-column-fluid { padding-inline: 1.5rem; }

/* Logo au-dessus du titre, colonne centree : le gabarit pose une grille 5/7,
   on la replie sans toucher au balisage. */
body.app-blank #sign_in_form .row {
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  --bs-gutter-x: 0;
}
body.app-blank #sign_in_form .row > [class*="col-"] {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
}
body.app-blank #sign_in_form .container { margin-bottom: 3.25rem !important; }
body.app-blank #sign_in_form h1 {
  margin: 0 !important;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
}
/* Hauteur desormais pilotee en section 13, par point de rupture : le
   bloc-marque est large la ou le monogramme etait carre. */
body.app-blank #sign_in_form img { width: auto; }

/* Rythme : deux champs, un bouton, beaucoup d air. */
body.app-blank #sign_in_form .fv-row { margin-bottom: 1.125rem !important; }
body.app-blank #sign_in_form .fv-row + .fv-row { margin-bottom: 2.25rem !important; }
body.app-blank #sign_in_form .form-control {
  padding: 0.9375rem 1.0625rem;
  font-size: 0.9375rem;
  background: var(--fb-field);
}
body.app-blank #sign_in_form .btn-primary {
  padding-block: 0.9375rem;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
body.app-blank .d-flex.flex-stack { border-top: 1px solid var(--fb-hair); padding-top: 1.5rem !important; }
body.app-blank .text-primary { color: var(--fb-mute) !important; font-weight: 500; }
body.app-blank .text-primary:hover { color: var(--fb-ink) !important; }

/* --- 13. Bloc-marque FIRM FAUBOURG, en alternance animee ---------------------
   SFTPGo ne fournit qu UNE SEULE balise <img> pour le logo, et une feuille ne
   peut pas en ajouter une seconde. Les deux marques sont donc empilees dans une
   bande verticale de trois cellules -- FIRM, FAUBOURG, FIRM -- dont la boite ne
   montre qu une cellule a la fois : c est object-position qui glisse. La
   troisieme cellule reprend la premiere pour que la boucle soit sans couture.

   Le fondu descend a ZERO exactement au croisement, et ce n est pas decoratif :
   au milieu d un glissement la fenetre montre forcement la moitie basse d une
   marque et la moitie haute de l autre, quelle que soit leur taille dans la
   cellule. Le fondu est ce qui empeche cet instant d etre vu.

   Dans la bande, chaque marque est posee sur son centre de masse d encre et non
   sur le centre de sa boite : sinon la bascule produirait une secousse verticale
   entre deux optiques differentes.

   Cadence : 8 s -- 3,4 s de lecture par marque, 0,6 s de bascule.
   ------------------------------------------------------------------------- */
[data-bs-theme="dark"] img[alt="Logo"] { content: url("bande-sombre.png"); }

img[alt="Logo"] {
  width: auto;
  max-width: 100%;
  aspect-ratio: 2.25 / 1;
  object-fit: cover;
  object-position: 50% 0%;
  animation: fb-bascule 8s infinite, fb-fondu 8s infinite;
}

@keyframes fb-bascule {
  0%,   42.5% { object-position: 50% 0%;   animation-timing-function: cubic-bezier(.62,.02,.34,1); }
  50%,  92.5% { object-position: 50% 50%;  animation-timing-function: cubic-bezier(.62,.02,.34,1); }
  100%        { object-position: 50% 100%; }
}
@keyframes fb-fondu {
  0%,   42.5% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, .6); }
  46.25%      { opacity: 0; animation-timing-function: cubic-bezier(0, .4, .6, 1); }
  50%,  92.5% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, .6); }
  96.25%      { opacity: 0; animation-timing-function: cubic-bezier(0, .4, .6, 1); }
  100%        { opacity: 1; }
}

/* Exigence ferme : aucun mouvement si le systeme le demande. C est FIRM qui
   reste affichee, le domaine etant firm-group.fr. */
@media (prefers-reduced-motion: reduce) {
  img[alt="Logo"] {
    animation: none !important;
    object-position: 50% 0% !important;
    opacity: 1 !important;
  }
}

/* Hauteurs : la bande menage de l air autour de chaque marque, la boite doit
   donc etre plus haute qu avec un logo plein cadre pour une presence egale.
   A 92 px de boite, le logotype FIRM mesure 51 px. */
img[alt="Logo"].h-80px { height: 72px !important; }
@media (min-width: 768px) { img[alt="Logo"].h-md-90px  { height: 84px !important; } }
@media (min-width: 992px) { img[alt="Logo"].h-lg-100px { height: 92px !important; } }
img[alt="Logo"].app-sidebar-logo-default { height: 50px !important; }
img[alt="Logo"].h-50px { height: 50px !important; }
img[alt="Logo"].h-30px { height: 36px !important; }

/* short_name vide ne suffit pas : SFTPGo lui substitue le libelle "WebClient".
   C est donc la feuille qui supprime reellement le texte, et il faut couvrir
   TOUTES les formes de balisage, pas seulement le h1 de la page de connexion :
     h1   connexion, 2FA, codes de secours
     a    mot de passe oublie, reinitialisation, pages de message
     span partage public en telechargement et en depot
   Les regles sont ancrees sur la presence du logo, pour ne jamais atteindre un
   titre legitime. */

/* a) Grille 5/7 : on replie la colonne qui ne porte pas le logo. */
.row:has(> [class*="col-"] img[alt="Logo"]) > [class*="col-"]:not(:has(img[alt="Logo"])) {
  display: none !important;
}

/* b) Logo et libelle cote a cote, hors grille : pages de message et de partage
      public. Le logo y est enveloppe dans un span ou un a ; on masque le frere
      de meme nature qui ne le contient pas. */
div:has(> :is(span, a) > img[alt="Logo"]) > :is(span, a):not(:has(img[alt="Logo"])) {
  display: none !important;
}

/* c) Barre laterale : le libelle est un span frere direct du logo. */
.app-sidebar-logo > span { display: none !important; }

/* --- 14. Details ------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--fb-ink); outline-offset: 2px; }
::selection { background: var(--fb-ink); color: var(--fb-ground); }
.scroll::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
  background: var(--fb-hair); border-radius: var(--fb-radius);
}
.symbol > img, .symbol-label { border-radius: var(--fb-radius); }
hr { border-color: var(--fb-hair); opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =============================================================================
   CORRECTIONS apres verification en navigateur reel (thèmes clair et sombre).
   Chacune corrige un defaut constate, pas une supposition.
   ============================================================================= */

/* --- C1. Separateurs de lignes ----------------------------------------------
   Constat : border-bottom calcule = "1px dashed #E8E8E6" sur les cellules.
   Metronic applique .table-row-dashed tr ET les cellules heritent d un reglage
   de Bootstrap plus specifique que mes selecteurs. On tranche a la source :
   le vide separe, seul l en-tete garde un filet. */
.table > tbody > tr,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table.table-row-dashed > tbody > tr,
.table.table-row-dashed > tbody > tr > td { border-bottom: 0 !important; }
.table > thead > tr > th { border-bottom: 1px solid var(--fb-hair) !important; }

/* --- C2. Boutons secondaires -------------------------------------------------
   Constat : fond calcule rgb(37,47,74), un bleu marine, en thème CLAIR.
   Les variables --bs-btn-* ne suffisaient pas : une regle posait aussi
   background-color en dur. On fait les deux. */
.btn.btn-secondary, .btn.btn-light, .btn.btn-light-primary,
.btn.btn-active-light-primary, .btn.btn-color-gray-800 {
  --bs-btn-color: var(--fb-ink);
  --bs-btn-bg: var(--fb-sunken);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--fb-ink);
  --bs-btn-hover-bg: var(--fb-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--fb-ink);
  --bs-btn-active-bg: var(--fb-hover);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--fb-mute);
  --bs-btn-disabled-bg: var(--fb-sunken);
  --bs-btn-disabled-border-color: transparent;
  background-color: var(--fb-sunken);
  color: var(--fb-ink);
  border-color: transparent;
}
.btn.btn-primary {
  --bs-btn-color: var(--fb-ground);
  --bs-btn-bg: var(--fb-ink);
  --bs-btn-border-color: var(--fb-ink);
  --bs-btn-hover-color: var(--fb-ground);
  --bs-btn-hover-bg: var(--fb-mute);
  --bs-btn-hover-border-color: var(--fb-mute);
  --bs-btn-active-color: var(--fb-ground);
  --bs-btn-active-bg: var(--fb-mute);
  --bs-btn-active-border-color: var(--fb-mute);
}

/* --- C3. Coche des cases en thème sombre ------------------------------------
   Constat : case cochee = aplat clair, coche BLANCHE donc invisible.
   Bootstrap sert une coche blanche, adaptee a un fond fonce uniquement. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%230D0D0E'/%3e%3c/svg%3e");
}

/* --- C4. Barre laterale ------------------------------------------------------
   Constat en thème CLAIR : marque en rgb(255,255,255) sur fond blanc (invisible),
   liens inactifs en rgb(219,223,233) (illisibles). Metronic habille une barre
   laterale sombre ; en changer le fond impose de remapper les textes. */
.app-sidebar-logo span,
.app-sidebar .menu-title { color: var(--fb-ink) !important; }
.app-sidebar .menu-link { color: var(--fb-mute) !important; }
.app-sidebar .menu-link .menu-title { color: inherit !important; }
.app-sidebar .menu-link:hover,
.app-sidebar .menu-link:hover .menu-title { color: var(--fb-ink) !important; }
.app-sidebar .menu-item .menu-link.active,
.app-sidebar .menu-item .menu-link.active .menu-title {
  color: var(--fb-ink) !important;
}
.app-sidebar .menu-item .menu-link.active {
  background-color: var(--fb-sunken) !important;
  font-weight: 700;
}
.app-sidebar .menu-link .menu-icon i,
.app-sidebar .menu-link .menu-icon .svg-icon { color: var(--fb-mute) !important; }
.app-sidebar .menu-link.active .menu-icon i { color: var(--fb-ink) !important; }

/* --- C2bis. Boutons secondaires : la variable ne suffit pas ------------------
   Constat : --bs-btn-bg vaut bien #121214 (le mien) mais background-color
   calcule reste rgb(42,42,60). Une regle de Metronic, plus specifique dans un
   bloc [data-bs-theme], pose la couleur en dur. On force. */
.btn.btn-secondary, .btn.btn-light, .btn.btn-light-primary,
.btn.btn-active-light-primary, .btn.btn-color-gray-800,
[data-bs-theme="dark"] .btn.btn-secondary,
[data-bs-theme="light"] .btn.btn-secondary {
  background-color: var(--fb-sunken) !important;
  color: var(--fb-ink) !important;
  border-color: transparent !important;
}
.btn.btn-secondary:hover, .btn.btn-light:hover, .btn.btn-light-primary:hover,
[data-bs-theme="dark"] .btn.btn-secondary:hover,
[data-bs-theme="light"] .btn.btn-secondary:hover {
  background-color: var(--fb-hover) !important;
  color: var(--fb-ink) !important;
}

/* --- 15. Selecteur de langue des pages authentifiees ------------------------
   Le receptacle <select id="languageSwitcher"> est insere dans
   common/base.html par le service d initialisation "gabarits" (voir
   /mnt/files/sftpgo/bin/patch-gabarits.sh). Aucun JavaScript n est modifie :
   SFTPGo charge deja toute sa machinerie i18n sur ces pages et cherche cet
   element pour le remplir et le cabler ; il ne le trouvait simplement pas.

   La balise porte .form-select, donc l aplat et le rayon poses en section 9.
   C est voulu : le selecteur de la page de connexion et celui de l interieur
   sont ainsi identiques sans qu on ait a redefinir une seule couleur.
   Ne restent ici que le placement et la mise a l echelle pour la barre.
   ------------------------------------------------------------------------- */

/* Le gabarit offre son conteneur en TETE de barre, avec flex-grow. Laisse tel
   quel, le selecteur se retrouverait isole a l autre bout d une barre vide :
   on pousse son contenu contre les commandes de droite. */
.app-navbar-item:has(> .fb-langue) { justify-content: flex-end; }

.fb-langue {
  flex: none;
  width: auto;
  min-width: 7.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.9rem 2.1rem 0.9rem 0.875rem;
  /* La section 9 pose le fond avec la propriete RACCOURCIE background, ce qui
     remet background-repeat a repeat : sans la ligne ci-dessous, le chevron se
     repete en mosaique sur toute la surface. */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 9px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23737373'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .fb-langue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%238C8C8A'/%3E%3C/svg%3E");
}
.fb-langue:hover { background-color: var(--fb-hover); }

/* ---------------------------------------------------------------------------
   16. Retrait du lien « Profil » du menu utilisateur

   SFTPGo sait interdire la MODIFICATION du profil (info-change-disabled), mais
   n offre aucune option pour retirer le lien : la page reste accessible, vide
   de tout pouvoir. Un menu qui propose une page inerte est pire qu un menu
   court, d autant que ces comptes sont ouverts a des destinataires externes.

   On masque le bloc entier, pas seulement le texte : le lien vit dans un
   div.menu-item qui porte aussi ses marges.

   PORTEE : la feuille de style est commune a tout le client web. Ce retrait
   vaut donc aussi pour les comptes clients-print et clients-assistants. Ils
   conservent « Changer le mot de passe », qui est un lien distinct.
   --------------------------------------------------------------------------- */
.menu-item:has(> a[href="/web/client/profile"]) {
    display: none !important;
}