/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --wb-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wb-radius: 0.375rem;
  --wb-radius-lg: 0.5rem;
  --wb-shadow: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .06);
  --wb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .07);
  --wb-border: 1px solid #e5e7eb;
  /* 3,5 rem = 56 px : en rem pour suivre un grossissement du texte seul, comme le contenu de la barre (WEBBASE-3855). */
  --wb-navbar-height: 3.5rem;
  --wb-text: #1e293b;
  --wb-text-muted: #64748b;
  --wb-surface: #f8fafc;
  --wb-primary: #2563eb;
  --wb-primary-hover: #1d4ed8;

  /* Échelle d'espacement (WEBBASE-1699) — remplace les valeurs ad hoc par des paliers cohérents. */
  --wb-space-1: 0.25rem;
  --wb-space-2: 0.375rem;
  --wb-space-3: 0.5rem;
  --wb-space-4: 0.625rem;
  --wb-space-5: 0.75rem;
  --wb-space-6: 0.875rem;
  --wb-space-7: 1rem;
  --wb-space-8: 1.5rem;
}

/* ─── Typography ─────────────────────────────────────────────── */
html {
  /* 16px sur tout viewport (retour #266 : police mobile jugée trop petite avec l'ancien 14px) —
     accessoirement évite le zoom auto iOS Safari au focus d'un <input> sous 16px. */
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body {
  font-family: var(--wb-font);
  font-size: 0.9375rem;
  color: var(--wb-text);
  background-color: var(--wb-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0f172a;
}

/* ─── Focus ring ─────────────────────────────────────────────── */
/* :focus-visible plutôt que :focus : l'anneau ne doit apparaître qu'au clavier,
   pas à chaque clic souris (retour utilisateur, modernisation UI WEBBASE-1699). */
.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible,
.form-control:focus-visible, .form-check-input:focus-visible {
  box-shadow: 0 0 0 3px rgb(37 99 235 / .15);
}

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar {
  min-height: var(--wb-navbar-height);
  background-color: #fff !important;
  border-bottom: var(--wb-border) !important;
  box-shadow: var(--wb-shadow) !important;
}

.navbar-brand {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.navbar .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  padding-top: var(--wb-space-2);
  padding-bottom: var(--wb-space-2);
}

.navbar .nav-link:hover { color: #0f172a; }

/* WEBBASE-3855 : une seule hauteur pour la barre du haut du layout (.wb-topbar) et le bloc marque du menu latéral.
   Avec min-height, la barre grandissait avec son contenu (padding Bootstrap 2 × 0,5 rem + icônes fs-5 de l'aide et de
   la cloche : 59 px) et sa bordure basse tombait 3 px sous celle de la marque (56 px). Hauteur fixe, padding vertical
   Bootstrap retiré (le contenu, centré par .navbar, tient dans les 56 px) ; même ombre des deux côtés de la jonction
   (!important : celle de .navbar l'est ; placée après, cette règle l'emporte). Seulement là où le menu latéral existe :
   _Layout ne pose .wb-topbar que si le menu latéral est rendu (pas en anonyme ni sans module Menus), et en desktop —
   sous lg, la barre garde son min-height et son padding, et peut passer sur deux lignes sur un téléphone.
   .navbar seule garde son min-height : sans menu latéral, et barres des autres layouts (aide, pages publiques). */
@media (min-width: 992px) {
  .wb-topbar,
  .wb-sidebar-brand {
    height: var(--wb-navbar-height);
    box-shadow: var(--wb-shadow) !important;
  }
  .wb-topbar { --bs-navbar-padding-y: 0; }
  /* Hauteur fixe : un libellé (nom d'utilisateur long) ne passe pas sur deux lignes hors de la barre. */
  .wb-topbar .nav-link { white-space: nowrap; }
}

/* ─── App shell : sidebar + topbar (WEBBASE-1701) ───────────────
   .wb-app-shell / #wb-app-sidebar / .wb-content : conteneurs posés par _Layout.cshtml.
   Noms distincts du panneau #wb-sidebar déjà utilisé par le module Dashboard (sélecteur de
   tableaux de bord, imbriqué à l'intérieur de .wb-content sur /dashboard/*) — pas de collision. */
:root {
  --wb-sidebar-width: 240px;
  --wb-sidebar-width-collapsed: 64px;
}

.wb-app-shell { display: flex; align-items: stretch; min-height: 100vh; }

#wb-app-sidebar {
  width: var(--wb-sidebar-width);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: var(--wb-border);
  transition: width .15s ease;
  overflow-x: hidden;
  /* WEBBASE-1765 : sans position sticky + hauteur plafonnée à la fenêtre, la sidebar défilait avec
     la page (flex item étiré par .wb-app-shell{align-items:stretch} à la hauteur du contenu principal)
     et disparaissait sur une page longue. Épinglée en haut, elle reste visible ; .wb-sidebar-nav
     (overflow-y:auto) prend le relais pour défiler en interne si le menu dépasse la fenêtre. */
  position: sticky;
  top: 0;
  height: 100vh;
}

html[data-app-sidebar-collapsed="true"] #wb-app-sidebar { width: var(--wb-sidebar-width-collapsed); }

/* WEBBASE-3027 : marque du menu replié — l'icône carrée (favicon) remplace le logo horizontal, qui était coupé (« Eca ») ;
   sans icône, le logo est réduit à la largeur disponible au lieu d'être tronqué. */
.wb-sidebar-brand-icon { display: none; width: 28px; height: 28px; object-fit: contain; }
html[data-app-sidebar-collapsed="true"] .wb-sidebar-brand { padding-inline: 0; justify-content: center; }
html[data-app-sidebar-collapsed="true"] .wb-sidebar-brand-has-icon .wb-sidebar-brand-logo { display: none; }
html[data-app-sidebar-collapsed="true"] .wb-sidebar-brand-has-icon .wb-sidebar-brand-icon { display: block; }
html[data-app-sidebar-collapsed="true"] .wb-sidebar-brand-logo { max-width: calc(var(--wb-sidebar-width-collapsed) - 16px) !important; }

.wb-sidebar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  padding-inline: var(--wb-space-5);
  border-bottom: var(--wb-border);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-decoration: none;
  white-space: nowrap;
}

.wb-sidebar-search {
  flex-shrink: 0;
  position: relative;
  padding: var(--wb-space-3) var(--wb-space-3) 0;
}
/* Champ de recherche à loupe (WEBBASE-3855) : partagé par la recherche du menu latéral et la recherche globale de la
   barre du haut (GlobalSearch/Default.cshtml) — même retrait de la loupe, même espace avant le texte (WEBBASE-1748 :
   loupe collée à « Rechercher... » avec un retrait plus court), même taille d'icône. Le texte démarre à
   --wb-search-field-indent ; la loupe (1 em) est posée à var(--wb-space-4) du bord du champ. */
.wb-search-field {
  --wb-search-field-indent: 2rem;
  position: relative;
}
.wb-search-field-icon {
  position: absolute;
  left: var(--wb-space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--wb-text-muted);
  pointer-events: none;
}
/* display:block : le conteneur a exactement la hauteur du champ, la loupe (top:50%) est centrée sur lui. */
.wb-search-field .wb-search-field-input { display: block; padding-left: var(--wb-search-field-indent); }
.wb-sidebar-search-input {
  width: 100%;
  border: var(--wb-border);
  border-radius: var(--wb-radius);
  padding-block: var(--wb-space-2);
  padding-right: var(--wb-space-3);
  font-size: 0.8125rem;
  background: var(--wb-surface);
  color: #0f172a;
}
.wb-sidebar-search-input:focus-visible {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgb(37 99 235 / .15);
}
/* Pas de place pour un champ dans le rail replié (64px) — même patron que les libellés (WEBBASE-1701). */
html[data-app-sidebar-collapsed="true"] .wb-sidebar-search { display: none; }

.wb-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--wb-space-3);
  /* WEBBASE-1765 (retour QA) : la sidebar n'affichait jamais de vrai ascenseur avant le fix
     position:sticky+height:100vh (la page entière défilait à la place) — personne n'avait remarqué
     que les chevrons de sous-menus (.ms-auto, collés au bord droit de la rangée) n'avaient aucune
     marge réservée pour lui. Une fois l'ascenseur réel apparu (long menu, ex. CMDB), il se dessinait
     par-dessus/à travers ces chevrons. scrollbar-gutter réserve la place en permanence, ascenseur
     visible ou non — pas de solution de repli nécessaire, tous les navigateurs ciblés le supportent. */
  scrollbar-gutter: stable;
  /* WEBBASE-1765 (retour QA, cause réelle) : `<ul class="nav flex-column wb-sidebar-nav">` hérite du
     `.nav` de Bootstrap (display:flex, flex-wrap:wrap — pensé pour une nav horizontale qui doit
     pouvoir passer à la ligne sur petit écran). Tant que cette liste avait une hauteur non contrainte
     (avant le fix position:sticky+height:100vh ci-dessus), le wrap ne se déclenchait jamais — tout
     tenait dans une colonne infiniment haute. Une fois la hauteur réellement plafonnée à la fenêtre,
     dès que le menu déplié dépasse cette hauteur (ex. CMDB + Administration + leurs sous-groupes),
     flex-wrap bascule les items en trop dans une **deuxième colonne** à droite (comportement wrap
     normal en flex-direction:column) au lieu de défiler verticalement — d'où les libellés qui
     semblaient tronqués/décalés à droite, alignés sur cette colonne fantôme. `nowrap` désactive ce
     comportement : `.wb-sidebar-nav` reste une colonne unique, `overflow-y:auto` gère le surplus. */
  flex-wrap: nowrap;
}
.wb-sidebar-nav .wb-sidebar-hidden { display: none !important; }

.wb-sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  border-radius: var(--wb-radius);
  padding: var(--wb-space-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.wb-sidebar-nav .nav-link:hover { background-color: var(--wb-surface); color: #0f172a; }
.wb-sidebar-nav .nav-link:hover .bi { opacity: 1; }
.wb-sidebar-nav .nav-link.active {
  background-color: #eff6ff;
  color: var(--wb-primary);
  font-weight: 600;
  /* Barre d'accent de marque (WEBBASE-1721) — inset : ne modifie pas la largeur de la boîte (pas
     de décalage du texte/icône par rapport aux autres items). Avant, seul le fond translucide
     existait, insuffisant comme signature de marque (repéré sur Ecaldima, signal #315d73). */
  box-shadow: inset 3px 0 0 0 var(--wb-primary);
}
.wb-sidebar-nav .bi { flex-shrink: 0; opacity: .75; }
.wb-sidebar-nav .nav-link.active .bi { opacity: 1; }

/* WEBBASE-2303 : menu déplié — un libellé trop long passe à la ligne au lieu d'être coupé net par
   l'overflow-x:hidden de la sidebar (« Pilotage des incidents majeu… »). Icône et chevron restent
   calés sur la première ligne (hauteur de ligne du libellé : 0.875rem × 1.5). Le rail replié garde le
   nowrap de .nav-link (libellés masqués de toute façon). */
html:not([data-app-sidebar-collapsed="true"]) .wb-sidebar-nav .nav-link {
  white-space: normal;
  align-items: flex-start;
}
html:not([data-app-sidebar-collapsed="true"]) .wb-sidebar-nav .nav-link > .bi {
  line-height: 1.3125rem;
}
.wb-sidebar-nav .wb-sidebar-label {
  min-width: 0;
  overflow-wrap: break-word;
  line-height: 1.3125rem;
}

.wb-sidebar-group-toggle { border: 0; background: transparent; cursor: pointer; }
.wb-sidebar-group-toggle .bi-chevron-down { flex-shrink: 0; font-size: .75rem; transition: transform .15s ease; }
.wb-sidebar-group-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

.wb-sidebar-children { padding-left: var(--wb-space-7); }

.wb-sidebar-toggle {
  flex-shrink: 0;
  margin-top: auto;
  border: 0;
  border-top: var(--wb-border);
  background: transparent;
  padding: var(--wb-space-4);
  color: var(--wb-text-muted);
  cursor: pointer;
}
.wb-sidebar-toggle .bi { transition: transform .15s ease; }

/* Rail replié : icônes seules — libellés/chevrons masqués en CSS (le DOM reste complet, donc
   toujours lisible par un lecteur d'écran), groupes toujours fermés (pas de place pour l'arbre). */
html[data-app-sidebar-collapsed="true"] .wb-sidebar-label,
html[data-app-sidebar-collapsed="true"] .wb-sidebar-group-toggle .bi-chevron-down,
html[data-app-sidebar-collapsed="true"] .wb-sidebar-children {
  display: none;
}
html[data-app-sidebar-collapsed="true"] .wb-sidebar-toggle .bi { transform: rotate(180deg); }

.wb-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* .wb-main-wrapper (WEBBASE-1732) : le vrai enfant direct de .wb-content n'est pas <main> mais son
   conteneur .container/.container-fluid — <main> n'est qu'un descendant, flex:1 0 auto dessus
   n'avait donc aucun effet sur la distribution d'espace de .wb-content. Chaîne flex-column sur les
   deux niveaux (wrapper + <main>) : permet à un contenu de page (ex. #wb-dashboard-layout) de se
   dimensionner avec flex:1 1 auto + min-height:0 plutôt qu'un height en % — une hauteur en % sur un
   descendant casse la résolution de la taille hypothétique de son ancêtre (dépendance circulaire).
   Sans effet visuel sur les pages qui n'en ont pas besoin : un enfant de bloc normal (flex 0 1 auto
   implicite) garde sa taille de contenu naturelle, comme avant. */
.wb-content .wb-main-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.wb-main-wrapper main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

@media (max-width: 991.98px) {
  #wb-app-sidebar { display: none; }
}

/* ─── Page container ──────────────────────────────────────────── */
.container { max-width: 1280px; }

/* WEBBASE-1763 : un bloc à largeur plafonnée volontairement (style="max-width:...", formulaire court,
   écran d'administration) reste collé au début (gauche en LTR, RTL-safe via margin-inline) plutôt que
   centré par le margin:auto par défaut de Bootstrap — sinon, depuis que le layout est fluide par défaut,
   il flotte au milieu d'un vide symétrique sans rapport avec son contenu. Ne s'applique pas aux cartes
   centrées (login, erreurs...) : celles-ci n'ont pas de max-width inline, seulement des colonnes
   row/col-md-* avec ViewData["Narrow"], pattern volontairement différent. */
.container[style*="max-width"],
.container-fluid[style*="max-width"] {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

main { padding-top: var(--wb-space-8); }

@media (max-width: 767.98px) {
  /* Cumulé avec le mt-* de chaque vue, prend une part disproportionnée de la hauteur d'écran
     sur mobile (retour #266) — resserré uniquement sous ce breakpoint, desktop inchangé. */
  main { padding-top: var(--wb-space-5); }
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  border: var(--wb-border);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow);
  background: #fff;
}

.card-header {
  background: var(--wb-surface);
  border-bottom: var(--wb-border);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #374151;
}

.card-footer {
  background: var(--wb-surface);
  border-top: var(--wb-border);
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  border-radius: var(--wb-radius);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-primary {
  background-color: var(--wb-primary);
  border-color: var(--wb-primary);
}
.btn-primary:hover, .btn-primary:active {
  background-color: var(--wb-primary-hover);
  border-color: var(--wb-primary-hover);
}

.btn-sm { font-size: 0.8125rem; }

/* ─── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--wb-radius);
  border-color: #d1d5db;
  font-size: 0.875rem;
  color: var(--wb-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--wb-primary);
}
.form-control:focus-visible, .form-select:focus-visible {
  box-shadow: 0 0 0 3px rgb(37 99 235 / .1);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: var(--wb-space-2);
}

.form-text {
  font-size: 0.8125rem;
  color: var(--wb-text-muted);
}

.form-check-input:checked {
  background-color: var(--wb-primary);
  border-color: var(--wb-primary);
}

.input-group > .form-control:not(:last-child) {
  border-right: 0;
}

/* ─── Floating labels ────────────────────────────────────────── */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ─── Dropdown ───────────────────────────────────────────────── */
.dropdown-menu {
  border: var(--wb-border);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-md);
  font-size: 0.875rem;
  padding: var(--wb-space-2);
  min-width: 180px;
}

.dropdown-item {
  border-radius: calc(var(--wb-radius) - 1px);
  padding: 0.4rem var(--wb-space-5);
  color: #374151;
  font-size: 0.875rem;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: #f1f5f9;
  color: #0f172a;
}

.dropdown-divider {
  border-color: #e5e7eb;
  margin: var(--wb-space-1) 0;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table { font-size: 0.875rem; }

.table thead th {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wb-text-muted);
  background-color: var(--wb-surface);
  border-bottom: var(--wb-border);
  padding: var(--wb-space-4) var(--wb-space-5);
}

.table-bordered { border: var(--wb-border); }
.table-bordered > :not(caption) > * { border-color: #e5e7eb; }

.table > :not(caption) > * > * { padding: var(--wb-space-4) var(--wb-space-5); }

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.25em 0.6em;
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--wb-radius-lg);
  font-size: 0.875rem;
  border-width: 1px;
}

/* ─── Nav pills / tabs ───────────────────────────────────────── */
.nav-pills .nav-link {
  border-radius: var(--wb-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wb-text-muted);
  padding: var(--wb-space-2) var(--wb-space-6);
}

.nav-pills .nav-link.active {
  background-color: var(--wb-primary);
  color: #fff;
}

.nav-tabs {
  border-bottom: var(--wb-border);
}

.nav-tabs .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wb-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--wb-space-3) var(--wb-space-7);
  margin-bottom: -1px;
}

.nav-tabs .nav-link.active {
  color: var(--wb-primary);
  border-bottom-color: var(--wb-primary);
  background: transparent;
}

/* ─── List groups ────────────────────────────────────────────── */
.list-group-item {
  border-color: #e5e7eb;
  font-size: 0.875rem;
}

.list-group-flush .list-group-item:first-child { border-top: 0; }
.list-group-flush .list-group-item:last-child { border-bottom: 0; }

/* ─── Pagination ─────────────────────────────────────────────── */
.page-link {
  font-size: 0.875rem;
  border-color: #e5e7eb;
  color: #374151;
  border-radius: var(--wb-radius) !important;
  margin: 0 2px;
}

.page-link:hover { background: #f1f5f9; color: #0f172a; }
.page-item.active .page-link { background: var(--wb-primary); border-color: var(--wb-primary); }

/* ─── Footer ─────────────────────────────────────────────────── */
/* Ligne de flux normal dans la colonne de contenu du shell (WEBBASE-1701) — plus de
   position: absolute (qui débordait sur la sidebar) : .wb-content pousse le footer en bas via
   margin-top: auto sur <main>, cf. bloc "App shell" plus bas. */
.footer {
  flex-shrink: 0;
  padding-block: var(--wb-space-5);
  font-size: 0.8125rem;
  color: #9ca3af;
  background: #fff;
  border-top: var(--wb-border) !important;
}

.footer a { color: #9ca3af; text-decoration: none; }
.footer a:hover { color: #374151; }

/* ─── Sous-menu imbriqué (ex. langue dans le déroulant du profil, WEBBASE-958) ──
   Bootstrap 5 ne fournit pas de dropdown à deux niveaux — pattern manuel :
   ouverture au survol (desktop) et au clic (tactile, via site.js). */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.25rem;
}
/* Le déroulant du profil est aligné à droite (dropdown-menu-end) — ouvrir le
   sous-menu vers la gauche pour rester dans le viewport plutôt que de déborder. */
.dropdown-menu-end .dropdown-submenu > .dropdown-menu {
  left: auto;
  right: 100%;
}
/* Dans l'offcanvas mobile (panneau étroit), un sous-menu en flyout latéral
   déborderait — s'affiche en accordéon inline à la place. */
#wb-mobile-offcanvas .dropdown-submenu > .dropdown-menu {
  display: none;
  position: static;
  float: none;
  margin: 0;
  padding-left: var(--wb-space-7);
  border: none;
  box-shadow: none;
}
#wb-mobile-offcanvas .dropdown-submenu.show > .dropdown-menu {
  display: block;
}
.dropdown-submenu.show > .dropdown-menu {
  display: block;
}
@media (hover: hover) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}
.dropdown-submenu > .dropdown-item::after {
  content: "";
  display: inline-block;
  float: right;
  margin-top: 0.4em;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

/* WEBBASE-3777 : images et vidéos du contenu d'un article (base de connaissances, aide, aperçu de l'éditeur)
   bornées à la largeur de l'article. Une capture de 1600 px débordait et faisait défiler toute la page. Une image plus
   petite garde sa taille (max-width n'agrandit jamais) ; height:auto conserve ses proportions. */
.article-content img,
.article-content video,
.e-richtexteditor .e-rte-content img {
  max-width: 100%;
  height: auto;
}

/* WEBBASE-3890 : chiffres espacés dans les champs de saisie d'un code (double authentification, code reçu par courriel
   ou SMS), pour lire et vérifier les 6 chiffres d'un coup d'œil. Pur affichage : la valeur saisie ne change pas (aucun
   espace inséré, maxlength et pattern intacts). Chiffres de largeur fixe, que la police soit Inter ou une autre.
   letter-spacing s'ajoute aussi après le dernier chiffre : dans un champ centré, le même décalage à gauche recentre le texte.
   Les codes de secours (longs, alphanumériques) n'ont pas cette classe. */
.wb-otp-input,
.wb-otp-input::placeholder {
  letter-spacing: 0.5em;
  font-variant-numeric: tabular-nums;
}
.wb-otp-input.text-center {
  padding-inline-start: calc(0.75rem + 0.5em);
}
.wb-otp-input.form-control-lg.text-center {
  padding-inline-start: calc(1rem + 0.5em);
}