/* Thème BéarnIX pour Alice-LG.
   Trois rôles :
   0. Ossature de secours : ce fichier est TOUJOURS chargé (contrairement aux
      fragments du site servis sous /bx/). On y redéfinit l'en-tête et le pied
      avec nos variables --bx-* pour que le repli de bearnix.js reste stylé —
      et notamment que le <svg> du picto ait une taille, sinon un logo nu
      occupe toute la largeur.
   1. Squelette : ordre des flex, largeurs (body en colonne, 76rem).
   2. Peinture d'alice : palette NOC sur les classes internes, revue pour le
      binaire 6.2.0 (cf. deploy/README.md) ; les composants apparus en 6.1/6.2
      sont peints plus bas.
   L'habillage principal de l'en-tête et du pied vient des fragments du site
   (html/inc/entete.html — style ↯ ossature ↯ embarqué) injectés au runtime :
   mêmes tailles qu'à la pixel. Le style arrivant APRÈS le nôtre, il garde la
   main quand /bx/ est servi ; quand il manque, la section 0 prend le relais.
   Les surcharges d'exploitation : custom.css / custom.js. */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;600&display=swap");

:root {
  --bx-police: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --bx-rayon: 2px;
  --bx-fond: #edf3f2;
  --bx-surface: #f8fbfa;
  --bx-encre: #0a1f3d;
  --bx-texte: #1f3352;
  --bx-discret: #4f6380;
  --bx-trait: #c5d4d6;
  --bx-accent: #079e98;
  --bx-accent-texte: #06706c;
  --bx-accent-fort: #06706c;
  --bx-ok: #13803f;
  --bx-attention: #a85f00;
  --bx-panne: #c62828;

  /* Texte posé sur un fond COLORÉ (boutons, étiquettes, états). En clair les
     fonds sont sombres → texte clair ; en sombre les fonds sont clairs →
     texte sombre (défini plus bas). */
  --bx-sur-couleur: #ffffff;

  /* Pictogramme (logo-picto.svg) : mêmes variables que sur bearnix.fr —
     redondant avec le <style> du fragment, utile au repli (et au logo de
     la sidebar, stylé ici). */
  --logo-ink: #0a1f3d;
  --logo-accent: #079e98;
  --logo-fill: #f8fbfa;
  color-scheme: light;
}
/* Comme sur le site (static/css/style.css) : le mode explicite prime sur la
   préférence système. Sans :root[data-mode], le bouton clair/sombre ne
   changerait pas notre palette --bx-* (le fragment, si). */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bx-fond: #081324;
    --bx-surface: #0d1c33;
    --bx-encre: #e3ebf5;
    --bx-texte: #c3cfdf;
    --bx-discret: #8a9bb3;
    --bx-trait: #1f3354;
    --bx-accent: #19d3cc;
    --bx-accent-texte: #3fe0d9;
    --bx-accent-fort: #19d3cc;
    --bx-ok: #4ade80;
    --bx-attention: #fbbf24;
    --bx-panne: #f87171;
    --bx-sur-couleur: #081324;
    --logo-ink: #dbe6f2;
    --logo-accent: #19d3cc;
    --logo-fill: #13233d;
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --bx-fond: #081324;
  --bx-surface: #0d1c33;
  --bx-encre: #e3ebf5;
  --bx-texte: #c3cfdf;
  --bx-discret: #8a9bb3;
  --bx-trait: #1f3354;
  --bx-accent: #19d3cc;
  --bx-accent-texte: #3fe0d9;
  --bx-accent-fort: #19d3cc;
  --bx-ok: #4ade80;
  --bx-attention: #fbbf24;
  --bx-panne: #f87171;
  --bx-sur-couleur: #081324;
  --logo-ink: #dbe6f2;
  --logo-accent: #19d3cc;
  --logo-fill: #13233d;
  color-scheme: dark;
}

/* === 1. Squelette : dépend de la version d'alice (relire aux maj). =========
   body est une ligne flex chez alice, React monté dans body > #app :
   on repose le tout en colonne pour encadrer l'application. */
.bx-corps { display: flex; flex-direction: column; min-height: 100vh; }
.bx-corps > #app { flex: 1 1 auto; }
.bx-corps .page,
.bx-corps .page-content,
.bx-corps .page-body { min-height: 0; }
/* Alice remplit la fenêtre (l'app respire, les tableaux ne sont plus tassés).
   L'en-tête et le pied gardent, eux, le cadre 76rem du site (voir section 0),
   posés au-dessus et au-dessous. */
.bx-corps .page { width: 100%; }

/* En-tête et pied : jamais des colonnes latérales de la popup d'alice. */
.bx-en-tete, .bx-pied { flex: 0 0 auto; width: 100%; }

/* === 0. Ossature de secours : le repli de bearnix.js, sans /bx/ ===========
   Ce fichier est TOUJOURS chargé ; les fragments du site, non. On redéfinit
   donc ici les mêmes règles que l'ossature du site (style ↯ ossature ↯ de
   style.css), avec nos variables --bx-* : sans elles, le <svg> du picto
   n'aurait aucune dimension et occuperait toute la largeur (logo géant).
   Les sélecteurs .bx-en-tete / .bx-pied sont posés aussi sur les fragments :
   à valeurs égales, le <style> du fragment (chargé après) garde la main.
   À garder en phase avec static/css/style.css (zone ↯ ossature ↯). */
.bx-en-tete {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  max-width: 76rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--bx-trait);
  font: 1rem/1.6 var(--bx-police);
  font-variant-numeric: tabular-nums slashed-zero;
}
.bx-en-tete .marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.bx-en-tete .picto { width: 3.4rem; height: auto; display: block; }
.bx-en-tete .mot { font: 600 1.45rem/1 var(--bx-police); color: var(--bx-encre); letter-spacing: -.01em; }
.bx-en-tete .mot .ix { color: var(--bx-accent); }
.bx-en-tete .nav { display: flex; gap: .25rem 1rem; flex-wrap: wrap; flex: 1; font-size: .875rem; }
.bx-en-tete .nav a { color: var(--bx-texte); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.bx-en-tete .nav a:hover { color: var(--bx-encre); border-bottom-color: var(--bx-trait); }
.bx-en-tete .nav a[aria-current="page"] { color: var(--bx-encre); border-bottom-color: var(--bx-accent); }

.bx-pied {
  max-width: 76rem; margin: 3rem auto 0; padding: 2rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--bx-trait); color: var(--bx-discret);
  font: .875rem/1.6 var(--bx-police); font-variant-numeric: tabular-nums slashed-zero;
}
.bx-pied p { margin: .25rem 0; }
/* Le site souligne ses liens de contenu (dont le pied) : on rétablit sous
   l'en-tête/le pied, sans toucher à la nav (non soulignée, comme au site).
   Spécificité > body.bx-corps a, qui avait retiré le soulignement partout. */
body.bx-corps .pied a, body.bx-corps .bx-pied a { text-decoration: underline; text-underline-offset: .18em; }

/* === 2. Peinture d'alice (palette BéarnIX sur leurs classes) ===
   Spécificité = body.bx-corps (2 classes) + leurs sélecteurs : gagne sans
   !important tant que ce fichier est chargé après le main.css d'alice. */

/* Taille de base : alice (Bootstrap 3) force `html { font-size: 10px }`, le
   site est à 16px. Tous nos rem (ossature et fragment) en dépendent — sans
   ça l'en-tête est ~40 % plus petit que sur bearnix.fr. `:root` (pseudo-classe)
   bat l'élément `html` de Bootstrap ; nos 1rem valent alors 16px, comme au site. */
:root { font-size: 16px; }

/* Typographie : la police du site partout. */
body.bx-corps { background: var(--bx-fond); color: var(--bx-texte); font-family: var(--bx-police); font-size: 1rem; }
body.bx-corps .page { font-family: var(--bx-police); font-size: 1rem; color: var(--bx-texte); font-variant-numeric: tabular-nums slashed-zero; }

/* Pas le fond gris/bootstrap ni le timbre alicebg.png. */
body.bx-corps .page-content { background: var(--bx-fond); background-image: none; }
/* Gouttière entre la colonne de gauche et le contenu : sans elle, le bandeau
   et les cartes collent à la sidebar. */
body.bx-corps .page-content { padding: 1rem 1.5rem; }

/* Liens : sarcelle → encre. */
body.bx-corps a, body.bx-corps a:hover { text-decoration: none; }
body.bx-corps a { color: var(--bx-accent-texte); }
body.bx-corps a:hover { color: var(--bx-encre); }

/* Titres : encre + le marqueur « # » du site. */
body.bx-corps h1, body.bx-corps h2, body.bx-corps h3 {
  color: var(--bx-encre); font-weight: 600; line-height: 1.2;
}
body.bx-corps .main-content-wrapper h1::before,
body.bx-corps .main-content-wrapper h2::before {
  content: "# "; color: var(--bx-accent); font-weight: 600;
}
body.bx-corps .main-content-wrapper h1 small,
body.bx-corps .main-content-wrapper h1 .small { color: var(--bx-discret); }

/* Sidebar (à gauche) : panneau (surface + bordure droite), comme les cartes. */
body.bx-corps .page-sidebar {
  background: var(--bx-surface); color: var(--bx-texte);
  border-right: 1px solid var(--bx-trait);
}
body.bx-corps .page-sidebar .sidebar-header {
  background: transparent; color: var(--bx-encre); height: auto; padding: 1rem 1.1rem;
}
body.bx-corps .page-sidebar .sidebar-header .title h1,
body.bx-corps .page-sidebar .sidebar-header .title p { color: var(--bx-encre); }
/* Groupes de la sidebar (« route servers », sélecteur) : primitive des cartes. */
body.bx-corps .page-sidebar .routeservers-list,
body.bx-corps .page-sidebar .routeservers-groups-select {
  background: var(--bx-surface);
  border: 1px solid var(--bx-trait);
  border-radius: var(--bx-rayon);
  margin: .75rem .75rem 0;
  padding-bottom: 0;
}
body.bx-corps .page-sidebar .routeservers-list { padding-bottom: .35rem; }
body.bx-corps .page-sidebar h2 {
  color: var(--bx-discret); margin: 0; padding: .65rem .75rem;
  border-bottom: 1px solid var(--bx-trait);
}
body.bx-corps .page-sidebar .routeservers-list a.routeserver-id,
body.bx-corps .page-sidebar .routeservers-list .routeserver-id { color: var(--bx-texte); }
body.bx-corps .page-sidebar .routeservers-list a.routeserver-id:hover { color: var(--bx-encre); }
body.bx-corps .page-sidebar .routeservers-list > ul > li.active .routeserver-id { color: var(--bx-accent-texte); font-weight: 600; }
body.bx-corps .page-sidebar .routeservers-list .routeserver-status .bird-version { color: var(--bx-discret); }
body.bx-corps .page-sidebar .routeservers-list .routeserver-status .api-error { color: var(--bx-panne); }

/* Tableaux : « listing imprimé », jamais de bleu bootstrap. */
body.bx-corps .table > thead > tr > th {
  color: var(--bx-discret); font-weight: 600; font-size: .8125rem;
  background: var(--bx-surface);
  border-bottom: 1px solid var(--bx-trait);
}
body.bx-corps .table > tbody > tr > td {
  background: inherit;
  border-bottom: 1px solid var(--bx-trait);
}
body.bx-corps .table > tbody > tr:hover > td { background: color-mix(in srgb, var(--bx-accent) 8%, transparent); }
body.bx-corps .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Mise en page des tableaux : une seule ligne de séparation (celle du bas),
   alignée en haut, comme le « listing imprimé » du site. Bootstrap ajoute en
   plus une bordure en haut de chaque ligne et des rayures grises. */
body.bx-corps .table { border-collapse: collapse; }
body.bx-corps .table > thead > tr > th,
body.bx-corps .table > tbody > tr > td,
body.bx-corps .table > tbody > tr > th { vertical-align: top; border-top: 0; }

/* Formulaires (recherche) : dans le papier. */
body.bx-corps .form-control {
  font-family: var(--bx-police);
  color: var(--bx-encre);
  background: var(--bx-surface);
  border-color: var(--bx-trait);
  border-radius: 2px;
}
body.bx-corps .input-group-addon { background: var(--bx-surface); border-color: var(--bx-trait); color: var(--bx-discret); }

/* Boutons : accent, sans bleu. */
body.bx-corps .btn-primary,
body.bx-corps .btn-primary:focus { background-color: var(--bx-accent-fort); border-color: var(--bx-accent-fort); color: var(--bx-sur-couleur); }
body.bx-corps .btn-primary:hover, body.bx-corps .btn-primary.focus, body.bx-corps .btn-primary.active { background-color: var(--bx-encre); border-color: var(--bx-encre); color: var(--bx-sur-couleur); }
body.bx-corps .btn-link { color: var(--bx-accent-texte); }
body.bx-corps .btn-danger,
body.bx-corps .btn-danger:focus { background-color: var(--bx-panne); border-color: var(--bx-panne); color: var(--bx-sur-couleur); }
body.bx-corps .btn-danger:hover { background-color: var(--bx-encre); border-color: var(--bx-encre); color: var(--bx-sur-couleur); }

/* Étiquettes d'état : ok / attention / panne du site. */
body.bx-corps .label-success { background-color: var(--bx-ok); }
body.bx-corps .label-warning { background-color: var(--bx-attention); }
body.bx-corps .label-danger { background-color: var(--bx-panne); }
body.bx-corps .label-info, body.bx-corps .label-default, body.bx-corps .label-primary { background-color: var(--bx-accent-fort); }
body.bx-corps .badge { background-color: var(--bx-discret); }

/* Nouveaux composants de l'UI 6.1/6.2 (absents de 6.0.0). Le CSS d'alice y
   pose des couleurs claires en dur : fond gris clair (#fbfbfb) du menu de
   sélection de groupe, étiquettes blanches (#fff) des exemples de recherche,
   gris (#555) du bouton « étendre » (voisins multi-canaux), orange de l'état
   « idle ». Sans contrepartie, elles « flottent » en mode sombre. */
body.bx-corps .page-sidebar .routeservers-groups-select .dropdown-options {
  background: var(--bx-surface);
  box-shadow: 2px 2px 3px color-mix(in srgb, var(--bx-encre) 30%, transparent);
}
body.bx-corps .page-sidebar .routeservers-groups-select .dropdown-options li button {
  color: var(--bx-texte);
}
body.bx-corps .page-sidebar .routeservers-groups-select .dropdown-options li button:hover,
body.bx-corps .page-sidebar .routeservers-groups-select .dropdown-options li button:focus {
  background-color: var(--bx-fond); color: var(--bx-encre);
}
/* Exemples de la recherche globale (Alice.updateContent → lookup.examples) :
   le CSS d'alice force `.label-default` en blanc avec une spécificité
   supérieure ; on la repeint par un sélecteur plus spécifique. */
body.bx-corps .lookup-examples .label-default {
  background-color: var(--bx-accent-fort); color: var(--bx-sur-couleur);
}
body.bx-corps .btn-extend { color: var(--bx-texte); }
body.bx-corps .btn-extend:hover,
body.bx-corps .btn-extend:focus { background-color: var(--bx-trait); color: var(--bx-encre); }
body.bx-corps .card-header-neighbors.idle { color: var(--bx-attention); }

/* Cartes (status, welcome) : surface avec trait, coins doux du site. */
body.bx-corps .jumbotron {
  background-color: var(--bx-surface);
  border: 1px solid var(--bx-trait);
  border-radius: 2px;
  padding: 1.5rem;
}

/* Cartes (status, welcome, routes, voisins) : surface plate du site, pas de
   fond blanc ni d'ombre. Le fond des tableaux suit la carte. */
body.bx-corps .card {
  background: var(--bx-surface);
  border: 1px solid var(--bx-trait);
  border-radius: var(--bx-rayon);
  box-shadow: none;
}
body.bx-corps .card-header { color: var(--bx-discret); text-transform: none; letter-spacing: normal; }
body.bx-corps .card-header-routes.received,
body.bx-corps .card-header-neighbors.established { color: var(--bx-ok); }
body.bx-corps .card-header-routes.filtered { color: var(--bx-attention); }
body.bx-corps .card-header-routes.not-exported,
body.bx-corps .card-header-neighbors.down,
body.bx-corps .noexport-reason a,
body.bx-corps .reject-reason a { color: var(--bx-panne); }

/* Bandeau de page : plus de blanc ni de hauteur figée, mais la même gouttière
   horizontale que les cartes (sinon le titre colle à la sidebar). */
body.bx-corps .page-header {
  background: transparent; height: auto; line-height: 1.2;
  color: var(--bx-encre); margin: 0; padding: .5rem 0 1rem;
  font-size: 1.125rem; border-bottom: 1px solid var(--bx-trait);
}
body.bx-corps .page-header a { color: var(--bx-encre); }

/* Sidebar : le nuage d'Alice, teinté accent (le picto BéarnIX reste dans
   l'en-tête : on ne le répète pas ici). */
body.bx-corps .page-sidebar .sidebar-header .logo .logo-icon { color: var(--bx-accent); }

/* Tableaux de routes/voisins : le fond vient de la carte, pas de blanc/vert. */
body.bx-corps .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
body.bx-corps .table-protocols, body.bx-corps .table-routes,
body.bx-corps .table-nolines { background: transparent; }
body.bx-corps .table-routes td { color: var(--bx-texte); }
body.bx-corps .table-routes td a { color: var(--bx-accent-texte); }
body.bx-corps .table-routes td a:hover { color: var(--bx-encre); }
body.bx-corps .table-routes .route-network { color: var(--bx-accent-texte); }
body.bx-corps .table-routes .noexport-reason, body.bx-corps .table-routes .reject-reason { color: var(--bx-discret); }

/* Tableaux : compacts, sans défilement. Sur desktop, colonnes serrées ; sur
   petit écran, chaque ligne devient une carte empilée (libellé + valeur), le
   seul format réellement lisible au téléphone. */
body.bx-corps .table-protocols, body.bx-corps .table-routes { width: 100%; }
body.bx-corps .table-protocols th, body.bx-corps .table-protocols td,
body.bx-corps .table-routes th, body.bx-corps .table-routes td {
  white-space: nowrap; padding: .35rem .6rem;
}
body.bx-corps .table-protocols .protocol-state-error { white-space: normal; }
body.bx-corps .table-routes tbody tr { cursor: pointer; }


/* Filtres (communautés, préfixe) : accents. */
body.bx-corps .filter-editor { color: var(--bx-texte); }

/* === 3. Socle Bootstrap : neutraliser les défauts clairs ==================
   Alice hérite de tout Bootstrap 3 : boutons, modale, listes déroulantes,
   pagination, panneaux, infobulles… posent des couleurs claires (#fff, #eee,
   #337ab7) que la peinture ci-dessus ne couvrait pas — d'où des composants
   qui « flottent » en mode sombre. On les repeint par groupes, avec les mêmes
   jetons --bx-* (clair ET sombre), comme le reste du thème. */

/* Boutons neutres et colorés d'alice. */
body.bx-corps .btn-default {
  color: var(--bx-texte); background-color: var(--bx-surface); border-color: var(--bx-trait);
}
body.bx-corps .btn-default:hover, body.bx-corps .btn-default:focus,
body.bx-corps .btn-default.focus, body.bx-corps .open > .dropdown-toggle.btn-default {
  color: var(--bx-encre); background-color: var(--bx-fond); border-color: var(--bx-discret);
}
body.bx-corps .btn-info,
body.bx-corps .btn-info:focus { color: var(--bx-sur-couleur); background-color: var(--bx-discret); border-color: var(--bx-discret); }
body.bx-corps .btn-success,
body.bx-corps .btn-success:focus { color: var(--bx-sur-couleur); background-color: var(--bx-ok); border-color: var(--bx-ok); }
body.bx-corps .btn-warning,
body.bx-corps .btn-warning:focus { color: var(--bx-sur-couleur); background-color: var(--bx-attention); border-color: var(--bx-attention); }
body.bx-corps .btn-info:hover, body.bx-corps .btn-success:hover, body.bx-corps .btn-warning:hover {
  color: var(--bx-sur-couleur); background-color: var(--bx-encre); border-color: var(--bx-encre);
}

/* Modale (détails d'une route) et son fond. */
body.bx-corps .modal-content { background-color: var(--bx-surface); border-color: var(--bx-trait); color: var(--bx-texte); box-shadow: none; }
body.bx-corps .modal-header, body.bx-corps .modal-footer { border-color: var(--bx-trait); }
body.bx-corps .modal-backdrop { background-color: var(--bx-encre); }
/* La modale des attributs fait 600px (Bootstrap) et son corps défile en
   vertical : un long AS-path / une communauté ne doit pas créer un ascenseur
   horizontal. On borne la largeur et on replie les valeurs longues. */
body.bx-corps .bgp-attributes-modal .modal-dialog { max-width: min(600px, 92vw); }
body.bx-corps .bgp-attributes-modal table th { width: 8.875rem; }
body.bx-corps .bgp-attributes-modal table td, body.bx-corps .bgp-attributes-modal table th { overflow-wrap: anywhere; }
body.bx-corps .bgp-attributes-modal .modal-body { overflow-x: hidden; }
/* Pas de défilement dans la modale : elle grandit, c'est la page qui défile. */
body.bx-corps .bgp-attributes-modal .modal-dialog .modal-body { max-height: none; overflow-y: visible; }
body.bx-corps .bgp-attributes-modal .label-bgp-community { white-space: normal; }

/* Listes déroulantes (sélection de groupe, filtres). */
body.bx-corps .dropdown-menu { background-color: var(--bx-surface); border-color: var(--bx-trait); box-shadow: none; }
body.bx-corps .dropdown-menu > li > a { color: var(--bx-texte); }
body.bx-corps .dropdown-menu > li > a:hover,
body.bx-corps .dropdown-menu > li > a:focus { background-color: var(--bx-fond); color: var(--bx-encre); }
body.bx-corps .dropdown-header { color: var(--bx-discret); }
body.bx-corps .dropdown-menu .divider { background-color: var(--bx-trait); }

/* Pagination (routes, voisins). */
body.bx-corps .pagination > li > a, body.bx-corps .pagination > li > span,
body.bx-corps .pagination .pagination-select {
  color: var(--bx-accent-texte); background-color: var(--bx-surface); border-color: var(--bx-trait);
}
body.bx-corps .pagination > li > a:hover, body.bx-corps .pagination > li > span:hover,
body.bx-corps .pagination > li > a:focus, body.bx-corps .pagination > li > span:focus {
  color: var(--bx-encre); background-color: var(--bx-fond); border-color: var(--bx-trait);
}
body.bx-corps .pagination > .active > a, body.bx-corps .pagination > .active > span,
body.bx-corps .pagination .active .pagination-select {
  color: var(--bx-sur-couleur); background-color: var(--bx-accent-fort); border-color: var(--bx-accent-fort);
}
body.bx-corps .pagination > .disabled > a, body.bx-corps .pagination > .disabled > span {
  color: var(--bx-discret); background-color: var(--bx-surface); border-color: var(--bx-trait);
}
body.bx-corps .pagination li.break a { border-left-color: var(--bx-trait); }
body.bx-corps .pager li > a, body.bx-corps .pager li > span {
  color: var(--bx-accent-texte); background-color: var(--bx-surface); border-color: var(--bx-trait);
}

/* Panneaux, puits, vignettes (repli générique). */
body.bx-corps .panel, body.bx-corps .well, body.bx-corps .thumbnail {
  background-color: var(--bx-surface); border-color: var(--bx-trait); color: var(--bx-texte);
}
body.bx-corps .panel-heading, body.bx-corps .panel-footer {
  background-color: var(--bx-fond); border-color: var(--bx-trait); color: var(--bx-encre);
}

/* Le « IX » du logo : --accent (#079e98) ne tient pas le contraste (2.94:1
   sur le papier, et axe le traite comme texte normal). On emploie le ton
   accent lisible du site. body.bx-corps (2 classes) bat la règle .mot .ix du
   fragment du site (injecté plus tard mais de spécificité égale). */
body.bx-corps .mot .ix { color: var(--bx-accent-texte); }

/* Pastilles des en-têtes de tableaux (quick links, voisins liés) : mêmes
   primitives que les cartes (surface + trait + rayon), plus d'ombre. */
body.bx-corps .related-peers li,
body.bx-corps .neighbors-quick-links li,
body.bx-corps .routes-quick-links li {
  background-color: var(--bx-surface); color: var(--bx-texte);
  border: 1px solid var(--bx-trait); border-radius: var(--bx-rayon);
}
body.bx-corps .related-peers li { border-bottom: 1px solid var(--bx-trait); box-shadow: none; }
body.bx-corps .related-peers li.active a { color: var(--bx-encre); }
body.bx-corps .related-peers li a, body.bx-corps .neighbors-quick-links a,
body.bx-corps .routes-quick-links a { color: var(--bx-texte); }
/* Le libellé « Go to: » d'alice est en #888 (3.45:1) : gris discret du site. */
body.bx-corps .routes-quick-links span, body.bx-corps .neighbors-quick-links span { color: var(--bx-discret); }
/* État actif (comme le site) : accent, pas de vert/rouge en dur. */
body.bx-corps .routes-quick-links li.received a,
body.bx-corps .neighbors-quick-links li.established a { color: var(--bx-ok); }
body.bx-corps .routes-quick-links li.filtered a { color: var(--bx-attention); }
body.bx-corps .routes-quick-links li.not-exported a,
body.bx-corps .neighbors-quick-links li.down a { color: var(--bx-panne); }

/* Liens et titres internes d'alice restés à des couleurs en dur. */
body.bx-corps .col-neighbor-attr a, body.bx-corps .col-neighbor-attr a:active,
body.bx-corps .col-neighbor-attr a:link, body.bx-corps .col-neighbor-attr i.fa { color: var(--bx-texte); }
body.bx-corps .col-neighbor-active { color: var(--bx-accent-texte); }
body.bx-corps .lookup-container h2, body.bx-corps .lookup-help h3,
body.bx-corps .lookup-filters-editor h2 { color: var(--bx-discret); }
body.bx-corps .card-related-peers h2 { color: var(--bx-discret); }
body.bx-corps .card-related-peers h3 { color: var(--bx-encre); border-bottom-color: var(--bx-trait); }

/* === Refonte de mise en page des pages serveurs de routes (bearnix.js) =====
   Grille « contenu principal + rail latéral collant ». Bootstrap met des
   pseudo-éléments ::before/::after sur .row : en grille, ils deviennent des
   cellules et décalent tout. On les neutralise. */
body.bx-corps .details-main.bx-grille { display: grid; gap: 1.5rem; align-items: start; }
body.bx-corps .details-main.bx-grille::before,
body.bx-corps .details-main.bx-grille::after { display: none; content: none; }
body.bx-corps .bx-grille .col-main { width: auto; max-width: none; float: none; padding: 0; }
body.bx-corps .bx-grille .col-aside-details { width: auto; max-width: none; float: none; padding: 0; }
@media (min-width: 62rem) {
  body.bx-corps .details-main.bx-grille { grid-template-columns: minmax(0, 1fr) 20rem; }
  body.bx-corps .bx-grille .col-aside-details { position: sticky; top: 1rem; }
}

/* Sections (carte + son en-tête) : espacement cohérent et compact. */
body.bx-corps .bx-grille .col-main > .card,
body.bx-corps .bx-grille .col-aside-details > .card { margin: 0 0 .75rem; }
body.bx-corps .details-main { margin-top: .75rem; }
body.bx-corps .card { padding: 1rem 1.15rem; }
body.bx-corps .card + .card { margin-top: .75rem; }
/* La carte de recherche ne doit pas flotter dans un vide. */
body.bx-corps .lookup-container { margin-top: 0; }
body.bx-corps .lookup-container .card { margin-bottom: 0; }

/* « Related Neighbors » : tableau construit par bearnix.js. */
body.bx-corps .bx-related-large { margin: 1.25rem 0; }
body.bx-corps .bx-related-large h3 {
  margin: 1rem 0 .35rem; font-size: .9375rem; color: var(--bx-encre);
  border-bottom: 1px solid var(--bx-trait); padding-bottom: .25rem;
}
body.bx-corps .bx-related-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
body.bx-corps .bx-related-table th, body.bx-corps .bx-related-table td {
  padding: .45rem .6rem; border-bottom: 1px solid var(--bx-trait); text-align: left;
}
body.bx-corps .bx-related-table thead th {
  color: var(--bx-discret); font-weight: 600; font-size: .8125rem;
}
body.bx-corps .bx-related-table .num { text-align: right; font-variant-numeric: tabular-nums; }
body.bx-corps .bx-related-table tbody tr:last-child td { border-bottom: 0; }
body.bx-corps .bx-related-table tbody tr:hover td { background: color-mix(in srgb, var(--bx-accent) 7%, transparent); }
body.bx-corps .bx-related-table .uptime { color: var(--bx-discret); white-space: nowrap; }
body.bx-corps .bx-related-table .peer-address a { color: var(--bx-accent-texte); }
body.bx-corps .bx-related-table .received { color: var(--bx-texte); }
body.bx-corps .bx-related-table .accepted { color: var(--bx-ok); }
body.bx-corps .bx-related-table .filtered { color: var(--bx-attention); }
body.bx-corps .bx-related-table .exported { color: var(--bx-accent-texte); }
body.bx-corps .bx-related-large .related-peers-legend {
  margin: 0 0 .5rem; font-size: .8125rem; color: var(--bx-discret);
}

/* Bloc « Status » (openbgpd) du rail : tableau à libellés discrets, icônes
   en accent, lisible et compact. */
body.bx-corps .routeserver-status { width: 100%; border-collapse: collapse; }
body.bx-corps .routeserver-status td { padding: .3rem .4rem .3rem 0; vertical-align: top; }
body.bx-corps .routeserver-status td:first-child { width: 1.4rem; color: var(--bx-accent); text-align: center; }
body.bx-corps .routeserver-status b { color: var(--bx-encre); font-weight: 600; }

/* Colonne de gauche rétractable (bearnix.js) : un bouton en tête de colonne la
   replie/déplie, l'état est mémorisé. Repliée, la colonne devient un rail
   étroit où le bouton reste accessible (sinon impossible de la rouvrir). */
body.bx-corps .bx-sidebar-bar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: .5rem .6rem; border-bottom: 1px solid var(--bx-trait);
}
body.bx-sidebar-cachee .bx-sidebar-bar { justify-content: center; padding: .5rem .25rem; }
body.bx-sidebar-cachee .page-sidebar { flex: 0 0 2.9rem; overflow: hidden; }
body.bx-sidebar-cachee .page-sidebar > *:not(.bx-sidebar-bar) { display: none; }
body.bx-corps .bx-sidebar-toggle {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  color: var(--bx-discret); background: none; cursor: pointer;
  border: 1px solid var(--bx-trait); border-radius: var(--bx-rayon);
}
body.bx-corps .bx-sidebar-toggle:hover { color: var(--bx-encre); border-color: var(--bx-discret); }
body.bx-corps .bx-sidebar-toggle svg { width: 1.15rem; height: 1.15rem; }

/* Communautés BGP : étiquettes. */
body.bx-corps .label-bgp-community { background-color: var(--bx-accent-fort); }
/* Le libellé inconnu n'a pas de fond coloré : fond neutre, texte porté par la
   règle .label (--bx-sur-couleur), lisible dans les deux modes. Ne pas figer
   `color` ici : .label (déclarée après) l'emporterait et, en sombre, du texte
   foncé se retrouverait sur un fond foncé. */
body.bx-corps .label-bgp-unknown { background-color: var(--bx-discret); }

/* Textes d'appoint Bootstrap. */
body.bx-corps .text-muted { color: var(--bx-discret); }
body.bx-corps .text-primary { color: var(--bx-accent-texte); }
body.bx-corps .bg-primary { background-color: var(--bx-accent-fort); }

/* Accueil et infobulles. */
body.bx-corps .central h1 { color: var(--bx-encre); text-shadow: none; }
body.bx-corps .tooltip-inner { background-color: var(--bx-encre); color: var(--bx-sur-couleur); }
body.bx-corps .tooltip.top .tooltip-arrow { border-top-color: var(--bx-encre); }
body.bx-corps .popover { background-color: var(--bx-surface); border-color: var(--bx-trait); color: var(--bx-texte); }
body.bx-corps .popover-title { background-color: var(--bx-fond); border-color: var(--bx-trait); color: var(--bx-encre); }

/* Modale : le contenu reçoit le focus (lecteur d'écran) sans anneau visible. */
body.bx-corps .modal-content:focus { outline: none; }

/* Détail d'une route : alice l'ouvre par un <span> devenu bouton (bearnix.js).
   Focus clavier visible, comme le reste du site. */
body.bx-corps .table-routes .route-network:focus-visible {
  outline: 3px solid var(--bx-accent-fort); outline-offset: 2px; border-radius: 2px;
}

/* Anneau de focus du site, au lieu du halo bleu Bootstrap. */
body.bx-corps :focus-visible { outline: 3px solid var(--bx-accent-fort); outline-offset: 2px; }
body.bx-corps .btn:focus, body.bx-corps .form-control:focus { box-shadow: none; }

/* Sélecteur de groupe de la sidebar (dropdown « BéarnIX »). */
body.bx-corps .routeservers-groups-select .btn-select {
  background-color: var(--bx-fond); border-color: var(--bx-trait); color: var(--bx-texte); text-shadow: none;
}
body.bx-corps .routeservers-groups-select .btn-select:hover,
body.bx-corps .routeservers-groups-select .btn-select:focus { background-color: var(--bx-trait); color: var(--bx-encre); }
body.bx-corps .routeservers-groups-select .btn-option { color: var(--bx-texte); }
body.bx-corps .routeservers-groups-select .btn-option:hover { background-color: var(--bx-fond); }

/* Flags des routes (colonne « Flags ») : états du site. */
body.bx-corps .table-routes .route-prefix-flag { color: var(--bx-discret); }
body.bx-corps .table-routes .route-prefix-flag div { background: var(--bx-encre); color: var(--bx-sur-couleur); }
body.bx-corps .route-prefix-flags .primary-route { color: var(--bx-attention); }
body.bx-corps .route-prefix-flags .rpki-valid { color: var(--bx-ok); }
body.bx-corps .route-prefix-flags .rpki-invalid,
body.bx-corps .route-prefix-flags .reject-candidate-route { color: var(--bx-panne); }
body.bx-corps .route-prefix-flags .rpki-unknown,
body.bx-corps .route-prefix-flags .rpki-not-checked { color: var(--bx-accent-texte); }

/* Statistiques des voisins liés. */
body.bx-corps .peer-stats .routes-accepted, body.bx-corps .peer-stats .routes-received { color: var(--bx-ok); }
body.bx-corps .peer-stats .routes-filtered { color: var(--bx-attention); }

/* Filtres de préfixe (recherche) : bouton d'action discret. */
body.bx-corps .lookup-filters-editor .select-ctrl .btn { color: var(--bx-accent-texte); }
body.bx-corps .lookup-filters-editor .select-ctrl .btn-remove { color: var(--bx-panne); }

/* Notification d'erreur (API injoignable…). */
body.bx-corps .error-notify { background-color: var(--bx-panne); border-bottom-color: var(--bx-encre); color: var(--bx-sur-couleur); }

/* Infobulle maison (attributs de route). */
body.bx-corps .atooltip i { background: var(--bx-encre); color: var(--bx-sur-couleur); }
body.bx-corps .atooltip i:after { border-top-color: var(--bx-encre); }

/* Étiquettes : texte clair sur les fonds colorés ci-dessus. */
body.bx-corps .label { color: var(--bx-sur-couleur); }

/* === Recherche globale et pagination ===================================== */

/* Barre de recherche : champ et icône réunis, dans la carte. */
body.bx-corps .input-group { display: flex; width: 100%; }
body.bx-corps .input-group .input-group-addon {
  display: flex; align-items: center; padding: 0 .75rem;
  background: var(--bx-fond); border: 1px solid var(--bx-trait); border-right: 0;
  border-radius: var(--bx-rayon) 0 0 var(--bx-rayon); color: var(--bx-discret);
}
body.bx-corps .input-group .form-control { border-radius: 0 var(--bx-rayon) var(--bx-rayon) 0; }

/* Résumé de recherche (rail) : liste sans puces, lisible. */
body.bx-corps .lookup-result-summary ul { list-style: none; margin: 0; padding: 0; }
body.bx-corps .lookup-result-summary li { padding: .25rem 0; }
body.bx-corps .lookup-result-summary b { color: var(--bx-encre); }
body.bx-corps .lookup-result-summary .text-danger { color: var(--bx-panne); }

/* Aide de recherche : ton discret, sans capitales criardes. */
body.bx-corps .lookup-help h3 {
  color: var(--bx-discret); font-style: normal; font-weight: 600;
  font-size: .8125rem; text-transform: none;
}
body.bx-corps .lookup-help b { color: var(--bx-encre); }

/* En-tête d'une section de routes (« Routes accepted » etc.). */
body.bx-corps .card-header-routes {
  margin: 0 0 .5rem; font-size: 1rem; font-weight: 600;
  text-transform: none; letter-spacing: normal;
}

/* Pagination : pastilles modernes, état clair. */
body.bx-corps .pagination { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; }
body.bx-corps .pagination > li > a, body.bx-corps .pagination > li > span {
  float: none; margin: 0; border-radius: var(--bx-rayon);
}
body.bx-corps .routes-pagination-info { color: var(--bx-discret); font-size: .875rem; }

@media (max-width: 48rem) {
  /* En-tête compact (la nav du site ne doit pas manger 3 lignes). */
  body.bx-corps .entete { gap: .3rem .9rem; padding: .6rem 1rem; }
  body.bx-corps .bx-en-tete .nav { font-size: .8rem; row-gap: .05rem; line-height: 1.3; }
  body.bx-corps .bx-en-tete .nav a { padding: .1rem 0; }
  body.bx-corps .bx-en-tete .mot { font-size: 1.15rem; }
  body.bx-corps .bx-en-tete .picto { width: 2.3rem; }

  /* Tableaux : une ligne = une « fiche » compacte. L'identité (adresse/préfixe)
     sur sa ligne, puis chaque champ en ligne (« Libellé valeur »), séparés,
     qui s'enchaînent et reviennent à la ligne. Aussi complet que le desktop. */
  body.bx-corps .table-protocols thead, body.bx-corps .table-routes thead { display: none; }
  body.bx-corps .table-protocols tbody tr, body.bx-corps .table-routes tbody tr {
    display: block; padding: .55rem .75rem; border-bottom: 1px solid var(--bx-trait);
  }
  body.bx-corps .table-protocols tbody tr:last-child, body.bx-corps .table-routes tbody tr:last-child { border-bottom: 0; }
  body.bx-corps .table-protocols tbody td, body.bx-corps .table-routes tbody td {
    display: inline; padding: 0; border: 0; white-space: normal; margin-right: .9rem;
  }
  body.bx-corps .table-protocols tbody td:first-child,
  body.bx-corps .table-routes tbody td:nth-child(2) {
    display: block; font-weight: 600; margin: 0 0 .15rem;
  }
  body.bx-corps .table-protocols tbody td:first-child::before,
  body.bx-corps .table-routes tbody td:nth-child(2)::before { content: none; }
  body.bx-corps .table-protocols tbody td[data-label]::before,
  body.bx-corps .table-routes tbody td[data-label]::before {
    content: attr(data-label) " "; color: var(--bx-discret); font-weight: 400;
  }

  /* « Related Neighbors » aussi en fiches empilées (6 colonnes sinon). */
  body.bx-corps .bx-related-table thead { display: none; }
  body.bx-corps .bx-related-table, body.bx-corps .bx-related-table tbody,
  body.bx-corps .bx-related-table tr, body.bx-corps .bx-related-table td { display: block; width: auto; }
  body.bx-corps .bx-related-table tbody tr {
    border-bottom: 1px solid var(--bx-trait); padding: .5rem 0;
  }
  body.bx-corps .bx-related-table tbody tr:last-child { border-bottom: 0; }
  body.bx-corps .bx-related-table td { border: 0; padding: .1rem 0; }
  body.bx-corps .bx-related-table td[data-label]::before {
    content: attr(data-label) " : "; color: var(--bx-discret);
  }
  body.bx-corps .bx-related-table .peer-address { font-weight: 600; }
  body.bx-corps .bx-related-table .num { text-align: left; }

  /* La colonne de gauche mange la moitié de l'écran : repliée par défaut sur
     mobile (bearnix.js pose .bx-sidebar-cachee si l'écran est étroit). */
  body.bx-sidebar-cachee .page-sidebar { flex: 0 0 2.9rem; overflow: hidden; }
  body.bx-sidebar-cachee .page-sidebar > *:not(.bx-sidebar-bar) { display: none; }
  /* Les tableaux et le rail passent l'un sous l'autre. */
  body.bx-corps .details-main.bx-grille { grid-template-columns: minmax(0, 1fr); }
  body.bx-corps .bx-grille .col-aside-details { position: static; }

  /* Gouttière plus fine au téléphone. */
  body.bx-corps .page-content { padding: .75rem 1rem; }

  /* Recherche : le champ occupe toute la largeur. */
  body.bx-corps .input-group .form-control { min-width: 0; }
  body.bx-corps .routes-pagination-info { display: block; }
  body.bx-corps .card-header-routes { font-size: .9375rem; }
}