/* =============================================================================
Thème "netark_" — Bootstrap 5, thème par défaut pour les applications web
personnelles (netark.fr). Sombre, rouge/bleu-gris, typographique, flat.
Usage :
1. Bootstrap 5.3+ (variables CSS / --bs-*) requis.
2.
3. Dans , après le CDN Bootstrap :
4. Composants prêts à l'emploi : voir README.md (menu déroulant, menu
latéral empilé, cartes, tableaux, pills).
========================================================================== */
:root {
/* Couleurs de base */
--bs-body-bg: #0c0d0f;
--bs-body-color: #eceae6;
--bs-body-font-family: 'Inter', system-ui, sans-serif;
--bs-border-color: rgba(236, 234, 230, 0.12);
/* Accent primaire (rouge vif) / secondaire (bleu-gris) */
--bs-primary: #e60e0e;
--bs-primary-rgb: 230, 14, 14;
--bs-primary-text-emphasis: #ff4d4d;
--bs-link-color: #e60e0e;
--bs-link-hover-color: #ff4d4d;
--netark-primary-hover: #ff4d4d;
--netark-primary-active: #b80b0b;
--netark-accent-2: #4c689d;
/* Surfaces */
--bs-dark: #0c0d0f;
--bs-dark-rgb: 12, 13, 15;
--bs-secondary-bg: #121212;
--bs-tertiary-bg: #17181a;
--bs-secondary-color: rgba(236, 234, 230, 0.55);
--bs-list-group-bg: #121212;
--bs-list-group-color: rgba(236, 234, 230, 0.85);
--bs-list-group-border-color: rgba(236, 234, 230, 0.1);
--bs-list-group-action-hover-bg: rgba(236, 234, 230, 0.04);
--bs-list-group-active-bg: var(--bs-primary);
--bs-list-group-active-border-color: var(--bs-primary);
--bs-list-group-active-color: #0c0d0f;
--bs-table-bg: #121212;
--bs-table-color: #eceae6;
--bs-table-striped-bg: #17181a;
--bs-table-hover-bg: rgba(236, 234, 230, 0.04);
--bs-table-border-color: rgba(236, 234, 230, 0.1);
/* Typo / rayons */
--netark-font-heading: 'JetBrains Mono', 'Inter', monospace;
--netark-font-body: 'Inter', system-ui, sans-serif;
--netark-radius-card: 12px;
--netark-radius-pill: 100px;
--netark-radius-code: 10px;
}
* { box-sizing: border-box; }
body {
font-family: var(--netark-font-body);
background:
radial-gradient(60rem 30rem at 100% -10%, rgba(230, 14, 14, 0.10), transparent 60%),
radial-gradient(40rem 24rem at -10% 40%, rgba(76, 104, 157, 0.08), transparent 60%),
var(--bs-body-bg);
}
/* ----- Style flat, sans ombres portées : la profondeur vient des variations
d'opacité de bordure/fond, pas de box-shadow (sauf les panneaux flottants
comme les dropdowns, volontairement élevés). ----- */
.card, .btn, .form-control, .form-select {
box-shadow: none !important;
}
.card {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
border-radius: var(--netark-radius-card);
}
.form-control, .form-select {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
.form-control:focus, .form-select:focus {
background-color: var(--bs-secondary-bg);
color: var(--bs-body-color);
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(230, 14, 14, 0.2) !important;
}
/* Bootstrap fige les couleurs de .btn-primary en valeurs compilées (pas de
var(--bs-primary)) : on les relie ici explicitement à la couleur d'accent. */
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--netark-primary-hover);
--bs-btn-hover-border-color: var(--netark-primary-hover);
--bs-btn-active-bg: var(--netark-primary-active);
--bs-btn-active-border-color: var(--netark-primary-active);
color: #0c0d0f;
}
.btn-outline-primary {
--bs-btn-color: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-hover-color: #0c0d0f;
}
.btn { border-radius: 8px; }
.badge, .pill { border-radius: var(--netark-radius-pill); }
/* ----- Navbar / header sticky avec flou ----- */
.navbar {
background: rgba(12, 13, 15, 0.88) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--bs-border-color);
}
.navbar-brand { font-family: var(--netark-font-heading); font-weight: 600; letter-spacing: -0.02em; }
.navbar-nav .nav-link.active {
color: var(--bs-body-color) !important;
text-decoration-color: var(--bs-primary);
text-underline-offset: 4px;
}
/* ----- Liens d'ouverture de menu déroulant : simple lien texte, pas de
bouton/bordure — soulignement coloré au survol/ouverture, pas de caret. ----- */
.switcher-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: transparent;
border: none;
padding: 8px 4px;
color: var(--bs-body-color);
text-decoration: none;
font-size: 0.82rem;
font-family: var(--netark-font-heading);
cursor: pointer;
transition: color 0.15s ease;
}
.switcher-toggle::after { display: none; }
.switcher-toggle:hover,
.switcher-toggle[aria-expanded="true"] {
color: var(--bs-body-color);
text-decoration: underline;
text-decoration-color: var(--bs-primary);
text-underline-offset: 6px;
}
/* ----- Menus déroulants / sous-menus : items empilés (défaut Bootstrap),
bordure 1px, angles droits, sans marge, légèrement élevés (box-shadow)
pour se détacher du contenu. ----- */
.dropdown-menu {
--bs-dropdown-min-width: 190px;
margin: 0;
padding: 6px 0;
border: 1px solid var(--bs-border-color);
border-radius: 0;
background-color: var(--bs-secondary-bg);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.dropdown-item {
padding: 9px 12px;
font-size: 12.5px;
border-radius: 0;
color: var(--bs-secondary-color);
}
.dropdown-item:hover, .dropdown-item:focus,
.dropdown-item.active {
color: var(--bs-body-color);
background: var(--bs-list-group-action-hover-bg);
}
/* ----- Menu latéral empilé : pas de boutons/pilules — un indicateur de
bordure gauche + couleur d'accent marque l'item actif. ----- */
.stacked-menu {
display: flex;
flex-direction: column;
}
.stacked-menu .menu-item {
display: block;
font-size: 0.95rem;
padding: 0.55rem 0.75rem 0.55rem 0.85rem;
border-left: 3px solid transparent;
color: var(--bs-body-color);
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stacked-menu .menu-item:hover {
background: var(--bs-list-group-action-hover-bg);
color: var(--bs-body-color);
}
.stacked-menu .menu-item.active {
border-left-color: var(--bs-primary);
color: var(--bs-primary);
font-weight: 600;
background: var(--bs-list-group-action-hover-bg);
}
@media (max-width: 720px) {
.stacked-menu { flex-direction: row; flex-wrap: wrap; }
.stacked-menu .menu-item {
flex: 1 1 auto;
text-align: center;
border-left: none;
border-bottom: 3px solid transparent;
}
.stacked-menu .menu-item.active { border-left-color: transparent; border-bottom-color: var(--bs-primary); }
}
/* ----- Section titles / en-têtes ----- */
.section-title {
font-family: var(--netark-font-heading);
font-size: 1.1rem;
margin: 1.5rem 0 0.75rem;
}
/* ----- Tables ----- */
table { font-size: 0.92rem; }
.table-wrapper {
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--netark-radius-card);
overflow: hidden;
}
.table thead th {
font-family: var(--netark-font-heading);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ----- Bloc de code style terminal ----- */
.code-block, pre.terminal {
background: rgba(236, 234, 230, 0.04);
border: 1px solid var(--bs-border-color);
border-radius: var(--netark-radius-code);
padding: 20px 24px;
font-family: var(--netark-font-heading);
font-size: 13.5px;
line-height: 1.7;
color: rgba(236, 234, 230, 0.75);
overflow-x: auto;
}
code.inline {
font-family: var(--netark-font-heading);
background: rgba(236, 234, 230, 0.08);
padding: 2px 6px;
border-radius: 5px;
font-size: 0.9em;
color: var(--netark-primary-hover);
}
/* ----- Footer ----- */
.footer {
text-align: center;
padding: 1rem;
font-size: 0.8rem;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}