/* ============================================================================
   UTH Middleware — thème back-office « futuriste » (clair / sombre)
   Chargé APRÈS Bootstrap 5.3. Piloté par html[data-bs-theme] + body.theme-futuriste.
   Palette sombre = fournie ; palette claire = dérivée (même accent cyan).
   ========================================================================= */

/* ---- Tokens : mode sombre ------------------------------------------------ */
html[data-bs-theme="dark"] {
    --bg:          #0a0e1a;
    --surface:     #131829;
    --card:        #1a2138;
    --border:      #2a3458;
    --fg:          #d8f0ff;
    --fg-muted:    #8aa6c4;
    --accent:      #00d2ff;
    --accent-fg:   #04121a;               /* texte sur fond accent plein */
    --accent-soft: rgba(0, 210, 255, 0.16);
    --success:     #00ff88;
    --danger:      #ff3b6b;
    --warning:     #ffb020;
    --wine:        #b8003e;
    --gold-glow:   rgba(0, 210, 255, 0.55);
    --shadow:      0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 210, 255, 0.06);
    --shadow-sm:   0 3px 10px rgba(0, 0, 0, 0.5);
    --row-hover:   rgba(0, 210, 255, 0.06);
}

/* ---- Tokens : mode clair (dérivé) --------------------------------------- */
html[data-bs-theme="light"] {
    --bg:          #f4f7fb;
    --surface:     #ffffff;
    --card:        #ffffff;
    --border:      #dfe6f1;
    --fg:          #0f1b2d;
    --fg-muted:    #5c6b82;
    --accent:      #0891b2;               /* cyan assombri : contraste AA sur blanc */
    --accent-fg:   #ffffff;
    --accent-soft: rgba(8, 145, 178, 0.12);
    --success:     #0a9d54;
    --danger:      #e11d48;
    --warning:     #b7791f;
    --wine:        #b8003e;
    --gold-glow:   rgba(8, 145, 178, 0.40);
    --shadow:      0 8px 24px rgba(15, 27, 45, 0.08), 0 0 0 1px rgba(15, 27, 45, 0.03);
    --shadow-sm:   0 2px 6px rgba(15, 27, 45, 0.06);
    --row-hover:   rgba(8, 145, 178, 0.06);
}

/* Fonts (communes aux deux thèmes) */
.theme-futuriste {
    --font-body:  ui-monospace, 'Cascadia Mono', 'Cascadia Code', 'SFMono-Regular',
                  'Segoe UI Mono', Consolas, 'Roboto Mono', Menlo, 'Liberation Mono', monospace;
    --font-head:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --theme-leading:  1.62;
    --theme-tracking: 0.01em;
}

/* ---- Mapping vers les variables Bootstrap 5.3 --------------------------- */
.theme-futuriste {
    --bs-body-bg:            var(--bg);
    --bs-body-color:         var(--fg);
    --bs-secondary-color:    var(--fg-muted);
    --bs-secondary-bg:       var(--surface);
    --bs-tertiary-bg:        var(--card);
    --bs-emphasis-color:     var(--fg);
    --bs-border-color:       var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-link-color:         var(--accent);
    --bs-link-hover-color:   var(--accent);
    --bs-primary:            var(--accent);
    --bs-primary-rgb:        0, 210, 255;

    --bs-card-bg:            var(--card);
    --bs-card-border-color:  var(--border);
    --bs-card-cap-bg:        var(--surface);

    font-family: var(--font-body);
    line-height: var(--theme-leading);
    letter-spacing: var(--theme-tracking);
}

html[data-bs-theme="light"] .theme-futuriste { --bs-primary-rgb: 8, 145, 178; }

/* Titres et éléments d'entête en sans-serif */
.theme-futuriste h1, .theme-futuriste h2, .theme-futuriste h3,
.theme-futuriste h4, .theme-futuriste h5, .theme-futuriste h6,
.theme-futuriste .navbar-brand,
.theme-futuriste .display-6,
.theme-futuriste .stat-tile__value,
.theme-futuriste .badge,
.theme-futuriste .card-header {
    font-family: var(--font-head);
    letter-spacing: 0;
}

.theme-futuriste { background: var(--bg); color: var(--fg); }
.theme-futuriste .text-muted { color: var(--fg-muted) !important; }

/* ---- Navbar ------------------------------------------------------------- */
.theme-futuriste .app-navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.theme-futuriste .app-navbar .navbar-brand {
    color: var(--fg);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.theme-futuriste .app-navbar .navbar-brand .bi { color: var(--accent); }
.theme-futuriste .app-navbar .navbar-brand::before {
    content: "";
    width: 3px; height: 1.1rem;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--gold-glow);
}
.theme-futuriste .app-navbar .navbar-user { color: var(--fg-muted); }

/* Bouton bascule de thème */
.theme-futuriste .theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    border-radius: .5rem;
    width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
}
.theme-futuriste .theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* ---- Sidebar ------------------------------------------------------------ */
.theme-futuriste .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    min-height: calc(100vh - 57px);
}
.theme-futuriste .sidebar__section {
    color: var(--fg-muted);
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .75rem;
    margin-top: .75rem;
    opacity: .8;
}
.theme-futuriste .sidebar .nav-link {
    color: var(--fg);
    font-family: var(--font-head);
    padding: .5rem .75rem;
    border-radius: .5rem;
    border-left: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: .1rem;
    transition: background .15s, color .15s, border-color .15s;
}
.theme-futuriste .sidebar .nav-link .bi { color: var(--fg-muted); width: 1.4rem; }
.theme-futuriste .sidebar .nav-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.theme-futuriste .sidebar .nav-link:hover .bi { color: var(--accent); }
.theme-futuriste .sidebar .nav-link.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}
.theme-futuriste .sidebar .nav-link.active .bi { color: var(--accent); }

/* ---- Cards -------------------------------------------------------------- */
.theme-futuriste .card {
    background: var(--card);
    border: 1px solid var(--border) !important;
    border-radius: .75rem;
    box-shadow: var(--shadow-sm);
}
.theme-futuriste .card.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ---- Tuiles de stats (dashboard / reporting) ---------------------------- */
.theme-futuriste .stat-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: 1rem 1.15rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.theme-futuriste .stat-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
    opacity: .0;
    transition: opacity .15s;
}
.theme-futuriste .stat-tile:hover::before { opacity: .9; }
.theme-futuriste .stat-tile__label {
    color: var(--fg-muted);
    font-family: var(--font-head);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.theme-futuriste .stat-tile__value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fg);
}
.theme-futuriste .stat-tile__value.is-success { color: var(--success); }
.theme-futuriste .stat-tile__value.is-danger  { color: var(--danger); }
.theme-futuriste .stat-tile__sub {
    color: var(--fg-muted);
    font-size: .78rem;
    margin-top: .25rem;
}

/* ---- Tables ------------------------------------------------------------- */
.theme-futuriste .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fg);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--row-hover);
    --bs-table-hover-color: var(--fg);
    margin-bottom: 0;
}
.theme-futuriste .table > thead th {
    color: var(--fg-muted);
    font-family: var(--font-head);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    background: transparent;
    white-space: nowrap;
}
.theme-futuriste .table > tbody td {
    border-color: var(--border);
    vertical-align: middle;
}
.theme-futuriste .table > tbody tr:hover > * {
    background: var(--row-hover);
}

/* ---- Boutons ------------------------------------------------------------ */
.theme-futuriste .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-fg);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-fg);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    filter: saturate(1);
    font-family: var(--font-head);
    font-weight: 600;
}
.theme-futuriste .btn-primary:hover { filter: brightness(1.08); }
.theme-futuriste .btn-outline-primary,
.theme-futuriste .btn-outline-secondary {
    --bs-btn-color: var(--fg-muted);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-active-bg: var(--accent-soft);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-color: var(--accent);
    font-family: var(--font-head);
}
.theme-futuriste .btn { border-radius: .5rem; }

/* ---- Badges / états sémantiques ----------------------------------------- */
.theme-futuriste .text-success { color: var(--success) !important; }
.theme-futuriste .text-danger  { color: var(--danger) !important; }
.theme-futuriste .text-warning { color: var(--warning) !important; }
.theme-futuriste .badge.text-bg-success { background: var(--success) !important; color: #04121a !important; }
.theme-futuriste .badge.text-bg-danger  { background: var(--danger) !important; color: #fff !important; }
.theme-futuriste .badge.text-bg-warning { background: var(--warning) !important; color: #04121a !important; }

/* ---- Alerts ------------------------------------------------------------- */
.theme-futuriste .alert-success {
    background: var(--accent-soft);
    border: 1px solid var(--success);
    color: var(--fg);
}
.theme-futuriste .alert-danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid var(--danger);
    color: var(--fg);
}

/* ---- Formulaires -------------------------------------------------------- */
.theme-futuriste .form-control,
.theme-futuriste .form-select {
    background: var(--bg);
    border-color: var(--border);
    color: var(--fg);
}
.theme-futuriste .form-control:focus,
.theme-futuriste .form-select:focus {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--fg);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.theme-futuriste .form-control::placeholder { color: var(--fg-muted); }

/* ---- Login / shell public ---------------------------------------------- */
.theme-futuriste .public-shell .card,
.theme-futuriste .public-card {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* ---- Divers ------------------------------------------------------------- */
.theme-futuriste hr { border-color: var(--border); opacity: 1; }
.theme-futuriste ::selection { background: var(--accent-soft); }
.theme-futuriste .btn-group .btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Bouton danger aligné sur le token de thème */
.theme-futuriste .btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
}
.theme-futuriste .btn-danger:hover { filter: brightness(1.06); }

/* Défilement doux vers les ancres (désactivé si l'utilisateur le demande) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ============================================================================
   Page Paramétrage — shell scalable + finitions « chattoyantes »
   ========================================================================= */

/* Hero */
.theme-futuriste .settings-hero {
    position: relative;
    overflow: hidden;
    padding: .25rem 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.theme-futuriste .settings-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -70%; right: -3%;
    width: 360px; height: 360px;
    pointer-events: none;
    background: radial-gradient(circle, var(--gold-glow), transparent 68%);
    opacity: .12;
}
.theme-futuriste .settings-hero__inner { position: relative; z-index: 1; }
.theme-futuriste .settings-hero__eyebrow {
    font-family: var(--font-head);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); opacity: .9;
    margin-bottom: .35rem;
}
.theme-futuriste .settings-hero__sub { color: var(--fg-muted); margin: 0; }
.theme-futuriste .settings-hero__spark {
    height: 3px; width: 150px; margin-top: .95rem;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 42%, #fff 50%, var(--accent) 58%, transparent 100%);
    background-size: 220% 100%;
    background-position: 180% 0;
}
@media (prefers-reduced-motion: no-preference) {
    .theme-futuriste .settings-hero__spark { animation: settings-shimmer 3.6s ease-in-out infinite; }
}
@keyframes settings-shimmer {
    0%, 100% { background-position: 180% 0; }
    50%      { background-position: -30% 0; }
}

/* Sommaire ancré (sticky) */
.theme-futuriste .settings-nav {
    position: sticky;
    top: 1.25rem;
    padding: .5rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.theme-futuriste .settings-nav__title {
    font-family: var(--font-head);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--fg-muted);
    padding: .5rem .65rem .4rem;
}
.theme-futuriste .settings-nav__link {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--font-head); font-size: .9rem;
    color: var(--fg-muted); text-decoration: none;
    padding: .5rem .65rem;
    border-radius: .55rem;
    border-left: 2px solid transparent;
    transition: background .18s, color .18s, border-color .18s;
}
.theme-futuriste .settings-nav__link .bi { width: 1.1rem; text-align: center; }
.theme-futuriste .settings-nav__link:hover { background: var(--accent-soft); color: var(--accent); }
.theme-futuriste .settings-nav__link.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

/* Sections + panneaux */
.theme-futuriste .settings-section { scroll-margin-top: 5rem; margin-bottom: 1.5rem; }
.theme-futuriste .settings-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: .95rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--card)) 0%, var(--card) 46%);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@supports (backdrop-filter: blur(6px)) {
    .theme-futuriste .settings-panel { backdrop-filter: blur(6px); }
}
.theme-futuriste .settings-panel::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .5;
}
.theme-futuriste .settings-panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
@media (prefers-reduced-motion: reduce) {
    .theme-futuriste .settings-panel { transition: none; }
    .theme-futuriste .settings-panel:hover { transform: none; }
}

/* En-tête de section */
.theme-futuriste .section-head {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.theme-futuriste .section-head__icon {
    flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem;
    border-radius: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
                0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.theme-futuriste .section-head__title {
    font-family: var(--font-head);
    font-size: 1.02rem; font-weight: 600;
    margin: 0; color: var(--fg);
}
.theme-futuriste .section-head__desc {
    margin: .15rem 0 0;
    color: var(--fg-muted); font-size: .85rem;
}
.theme-futuriste .section-body { padding: 1.25rem; }

/* Zone dangereuse */
.theme-futuriste .settings-panel--danger::before {
    background: linear-gradient(90deg, transparent, var(--danger), transparent);
}
.theme-futuriste .settings-panel--danger:hover {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.theme-futuriste .settings-panel--danger .section-head__icon {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent),
                0 6px 16px color-mix(in srgb, var(--danger) 20%, transparent);
}

/* Ligne de réglage : intitulé/description à gauche, contrôle à droite */
.theme-futuriste .setting-row {
    display: flex; flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-end; justify-content: space-between;
}
.theme-futuriste .setting-row + .setting-row {
    margin-top: 1.1rem; padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}
/* Le texte occupe la place laissée par le contrôle, et repasse à la ligne sous
   26rem. Sans ce flex, sa largeur était dictée par le max-width de l'aide : le
   texte se cassait au plus court même quand la place ne manquait pas. */
.theme-futuriste .setting-row__text {
    flex: 1 1 26rem;
    min-width: 0;
}
.theme-futuriste .setting-row__label {
    font-family: var(--font-head); font-weight: 600;
    color: var(--fg); margin: 0;
}
.theme-futuriste .setting-row__help {
    color: var(--fg-muted); font-size: .82rem;
    margin: .25rem 0 0;
    /* Borne de confort de lecture uniquement (au-delà de ~75 caractères, l'œil
       perd la ligne). En deçà, la largeur suit le conteneur. */
    max-width: 75ch;
}
.theme-futuriste .setting-row__control {
    display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
}

/* Lien vers un fichier : toute la zone « icône + nom » est cliquable, avec une
   cible confortable — un nom de CDR fait 56 caractères, viser le texte seul est
   pénible. L'icône d'ouverture externe n'apparaît qu'au survol pour ne pas
   surcharger une liste de 200 lignes. */
.theme-futuriste .file-link {
    padding: .15rem .4rem;
    margin-left: -.4rem;
    border-radius: .35rem;
    color: var(--fg);
    transition: background-color .12s ease, color .12s ease;
}
.theme-futuriste .file-link:hover,
.theme-futuriste .file-link:focus-visible {
    background: var(--surface-2, rgba(125, 125, 125, .12));
    color: var(--accent, #0d6efd);
}
.theme-futuriste .file-link__icon {
    color: var(--fg-muted);
    flex: 0 0 auto;
}
.theme-futuriste .file-link:hover .file-link__icon {
    color: inherit;
}
.theme-futuriste .file-link__name {
    font-family: var(--font-mono, monospace);
    word-break: break-all;
}
.theme-futuriste .file-link__ext {
    font-size: .7em;
    opacity: 0;
    flex: 0 0 auto;
    transition: opacity .12s ease;
}
.theme-futuriste .file-link:hover .file-link__ext,
.theme-futuriste .file-link:focus-visible .file-link__ext {
    opacity: .7;
}

/* ============================================================================
   Frise des changements VIP — événements hétérogènes (ajout, retrait, synchro)
   ========================================================================= */
.theme-futuriste .vip-timeline__item {
    position: relative;
    display: flex;
    gap: .85rem;
    padding-bottom: 1.15rem;
}
/* Le trait qui relie les événements : porté par ::before pour qu'il s'arrête
   naturellement au dernier item, sans calcul de hauteur. */
.theme-futuriste .vip-timeline__item::before {
    content: '';
    position: absolute;
    left: .93rem;
    top: 1.9rem;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.theme-futuriste .vip-timeline__item--last {
    padding-bottom: 0;
}
.theme-futuriste .vip-timeline__item--last::before {
    display: none;
}
.theme-futuriste .vip-timeline__dot {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    /* Détache la pastille du trait qui passe derrière. */
    box-shadow: 0 0 0 3px var(--surface, #fff);
}
.theme-futuriste .vip-timeline__dot--added {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}
.theme-futuriste .vip-timeline__dot--removed {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}
.theme-futuriste .vip-timeline__dot--synced {
    background: rgba(13, 110, 253, .12);
    color: #0d6efd;
}
.theme-futuriste .vip-timeline__body {
    min-width: 0;
    padding-top: .1rem;
}
.theme-futuriste .vip-timeline__time {
    font-size: .72rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.theme-futuriste .vip-timeline__title {
    font-weight: 600;
    color: var(--fg);
    word-break: break-word;
}
.theme-futuriste .vip-timeline__detail {
    font-size: .82rem;
    color: var(--fg-muted);
}

/* ============================================================================
   Blocs de code / <pre> — lisibles en clair ET en sombre
   ========================================================================= */
.theme-futuriste pre {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: .55rem;
}
/* Neutralise les fonds figés de Bootstrap (utilitaires en !important) */
.theme-futuriste pre.bg-light {
    background: var(--bg) !important;
    color: var(--fg);
}
.theme-futuriste pre.bg-danger-subtle {
    background: color-mix(in srgb, var(--danger) 14%, transparent) !important;
    color: var(--fg);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
/* Code inline : pastille accent discrète */
.theme-futuriste code {
    color: var(--accent);
    background: var(--accent-soft);
    padding: .1rem .35rem;
    border-radius: .3rem;
}
/* Pas de pastille pour le code à l'intérieur d'un <pre> */
.theme-futuriste pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}