/* ============================================================
   main.css — Base styles (layout, components, utilities)
   Theme colours are in themes/*.css

   Charte graphique WebDelphes (wddoc/charte) : les couleurs sont des rôles
   (--color-*), définis par thème dans themes/*.css à partir des jetons de la
   charte. Un composant n'écrit jamais une couleur en dur : il prend un rôle.
   Rôles principaux :
     --color-primary   fond d'un bouton principal (maroon de la marque)
     --color-link      texte et trait de marque : liens, onglet actif
     --color-selection fond d'une ligne ou d'une entrée sélectionnée
     --color-<état>, -bg, -text  pour success, warning, critical, info
     --color-danger    fond d'un bouton d'action destructrice
   Le maroon ne signale jamais un état : une erreur prend --color-critical.
   ============================================================ */

/* ── Polices (embarquées : la CSP n'autorise que font-src 'self') ─────────
   Inter et JetBrains Mono, versions variables, licence SIL OFL 1.1 (voir
   fonts/*/OFL.txt). latin-ext couvre le polonais et le roumain. */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── CSS Variables (overridden per theme) ───────────────── */
:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    --radius:    4px;
    --radius-s:  2px;
    --shadow:    0 1px 2px rgba(0,0,0,.08);
    --shadow-2:  0 4px 12px rgba(0,0,0,.12);
    --transition: .12s ease-out;
    --container: 100%;

    /* Repli si la feuille du thème manque : thème clair de la charte. */
    --color-bg:        #f4f4f4;
    --color-surface:   #ffffff;
    --color-surface-2: #fafafa;
    --color-surface-3: #e8e8e8;
    --color-border:    #d4d4d4;
    --color-border-strong: #767676;
    --color-text:      #1e1e1e;
    --color-text-2:    #3f3f3f;
    --color-text-muted:#6b6b6b;
    --color-primary:   #800000;
    --color-primary-h: #6a0000;
    --color-on-primary:#ffffff;
    --color-link:      #800000;
    --color-selection: #fbf3f3;
    --color-focus:     #a32d2d;
    --color-secondary: #5a5a5a;
    --color-danger:    #b42318;
    --color-on-danger: #ffffff;
    --color-success:   #1a7f37;
    --color-warning:   #c77700;
    --color-critical:  #d92d20;
    --color-info:      #1f6fb2;
    --color-nav-bg:    #1e1e1e;
    --color-nav-text:  #e8e8e8;
    --color-nav-hover: #2c2c2c;
    --color-nav-filet: #800000;

    /* Alias employés par des scripts du module Oracle : ils suivent le thème. */
    --color-card-bg:        var(--color-surface);
    --color-card-header-bg: var(--color-surface-2);
    --color-border-light:   var(--color-surface-3);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size:   .875rem;               /* 14 px : corps de l'application */
    background:  var(--color-bg);
    color:       var(--color-text);
    line-height: 1.5;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.5rem;  font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1rem;    font-weight: 600; }
code, kbd, pre, samp { font-family: var(--font-mono); }

img, svg { max-width: 100%; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-selection-border, #e9bebe); color: var(--color-text); }

/* ── Layout ─────────────────────────────────────────────── */
.container {
    width:   100%;
    padding: 0 1.5rem;
}

.site-main {
    flex: 1;
    padding: 2rem 0;
}

/* ── Header / Nav ───────────────────────────────────────── */
.site-header {
    background:  var(--color-nav-bg);
    color:       var(--color-nav-text);
    /* Filet de 3 px sous la barre : la marque de la charte. */
    border-bottom: 3px solid var(--color-nav-filet);
    box-shadow:  var(--shadow);
    position:    sticky;
    top:         0;
    z-index:     100;
}

.site-header .container {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    flex-wrap:   wrap;
}

/* Le titre est le retour à l'accueil : logo et nom forment un seul lien. */
.site-title {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--color-nav-active, #fff);
    white-space: nowrap;
}
.site-title:hover { text-decoration: none; opacity: .85; }

.site-logo {
    display:    block;
    height:     28px;
    width:      28px;
    /* Variante blanche de la charte : le logo en dégradé disparaît sur la
       barre graphite. Le haut du D est à 55 % d'opacité. */
    color:      var(--color-nav-active, #fff);
    flex-shrink: 0;
}

/* Entrées de navigation réduites à leur icône. La zone cliquable reste
   dimensionnée pour le pointeur et le tactile, indépendamment du trait fin
   du pictogramme. */
.nav-icone {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2.1rem;
    height:          2.1rem;
    padding:         0;
}
.icone {
    width:  1.15rem;
    height: 1.15rem;
    /* currentColor : l'icône suit la couleur du lien, donc le thème actif,
       sans variante par thème. */
    display: block;
}
.nav-emoji { font-size: 1.05rem; line-height: 1; }

/* ── Upload previews ────────────────────────────────────── */
.upload-preview {
    margin-bottom: .75rem;
}
.preview-logo {
    max-height: 80px;
    max-width:  300px;
    object-fit: contain;
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
    padding:    .4rem;
    background: var(--color-surface);
    display:    block;
}
.preview-favicon {
    height:     32px;
    width:      32px;
    object-fit: contain;
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
    padding:    .2rem;
    background: var(--color-surface);
    display:    block;
}

.main-nav {
    display:     flex;
    align-items: center;
    flex:        1;
    min-width:   0;
}

.nav-left {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    flex:        1;
}

.nav-right {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    margin-left: auto;
}

.nav-right {
    display:     flex;
    align-items: center;
    gap:         .15rem;
}

.nav-link {
    color:         var(--color-nav-text);
    padding:       .4rem .75rem;
    border-radius: var(--radius);
    font-size:     .9rem;
    transition:    background var(--transition);
}
.nav-link:hover {
    background:    var(--color-nav-hover);
    text-decoration: none;
    color: var(--color-nav-active, #fff);
}
/* Entrée active : texte blanc souligné, sans fond. */
.nav-link.active {
    color: var(--color-nav-active, #fff);
    box-shadow: inset 0 -2px 0 var(--color-nav-active, #fff);
    border-radius: 0;
}

.nav-tools {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

/* ── Dropdowns ──────────────────────────────────────────── */
.dropdown { position: relative; }

.btn-tool {
    background: transparent;
    border:     1px solid var(--color-nav-muted, rgba(255,255,255,.3));
    color:      var(--color-nav-text);
    padding:    .35rem .65rem;
    border-radius: var(--radius);
    cursor:     pointer;
    font-size:  .85rem;
    white-space: nowrap;
}
.btn-tool:hover { background: var(--color-nav-hover); }

.dropdown-menu {
    display:       none;
    position:      absolute;
    right:         0;
    top:           calc(100% + 4px);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    list-style:    none;
    min-width:     160px;
    z-index:       200;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }

.dropdown-menu a {
    display: block;
    padding: .45rem .9rem;
    color:   var(--color-text);
    font-size: .9rem;
}
.dropdown-menu a:hover { background: var(--color-surface-3); text-decoration: none; }
.dropdown-menu a.active { font-weight: 600; color: var(--color-link); background: var(--color-selection); }

/* ── Oracle DB nav (in header) ──────────────────────────── */
.oracle-nav-label, .pg-nav-label {
    cursor:      default;
    display:     flex;
    align-items: center;
    gap:         .3rem;
    padding:     .4rem .75rem;
    color:       var(--color-nav-text);
    font-size:   .9rem;
    white-space: nowrap;
}
.oracle-nav-label strong, .pg-nav-label strong { white-space: nowrap; }

.oracle-nav-sep, .pg-nav-sep {
    width:      1px;
    height:     1.4em;
    background: var(--color-nav-muted, rgba(255,255,255,.2));
    flex-shrink: 0;
    margin:     0 .15rem;
}

.oracle-dropdown, .pg-dropdown { position: relative; display: inline-flex; }

.oracle-dropdown-btn, .pg-dropdown-btn {
    background:  none;
    border:      none;
    font-family: inherit;
    font-size:   .9rem;
    cursor:      pointer;
    color:       var(--color-nav-text);
    padding:     .4rem .75rem;
    border-radius: var(--radius);
    transition:  background var(--transition);
    display:     inline-flex;
    align-items: center;
    gap:         .35rem;
    white-space: nowrap;
}
.oracle-dropdown-btn:hover,
.pg-dropdown-btn:hover,
.oracle-dropdown-btn.active,
.pg-dropdown-btn.active,
.oracle-dropdown.open .oracle-dropdown-btn, .pg-dropdown.open .pg-dropdown-btn { background: var(--color-nav-hover); }
.oracle-dropdown-btn .arrow, .pg-dropdown-btn .arrow {
    font-size:  .7em;
    transition: transform .15s;
}
.oracle-dropdown.open .oracle-dropdown-btn .arrow, .pg-dropdown.open .pg-dropdown-btn .arrow { transform: rotate(180deg); }

.oracle-dropdown-menu, .pg-dropdown-menu {
    display:       none;
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    min-width:     220px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-2);
    z-index:       200;
    padding:       .35rem 0;
}
.oracle-dropdown.open .oracle-dropdown-menu, .pg-dropdown.open .pg-dropdown-menu { display: block; }

.oracle-dropdown-menu a, .pg-dropdown-menu a {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .5rem 1rem;
    color:       var(--color-text);
    font-size:   .9rem;
    white-space: nowrap;
}
.oracle-dropdown-menu a:hover, .pg-dropdown-menu a:hover { background: var(--color-surface-3); text-decoration: none; }
.oracle-dropdown-menu a.active, .pg-dropdown-menu a.active { font-weight: 600; color: var(--color-link); background: var(--color-selection); }

.oracle-dropdown-sep, .pg-dropdown-sep {
    height:     1px;
    background: var(--color-border);
    margin:     .35rem 0;
}
/* Titre de section d'un menu (Configuration : Instance, Base de données,
   Sécurité) : comme un en-tête de tableau de la charte, texte-2, 12 px,
   capitales espacées. Il ne s'actionne pas. */
.oracle-dropdown-titre, .pg-dropdown-titre {
    padding:        .35rem 1rem .2rem;
    color:          var(--color-text-2);
    font-size:      .75rem;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space:    nowrap;
}
.oracle-dropdown-switch, .pg-dropdown-switch { color: var(--color-text-muted) !important; font-style: italic; }
.oracle-dropdown-switch:hover, .pg-dropdown-switch:hover { color: var(--color-link) !important; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
    background:  var(--color-nav-bg);
    color:       var(--color-nav-muted, rgba(255,255,255,.6));
    text-align:  center;
    padding:     1rem;
    font-size:   .85rem;
}
.site-footer p { margin: .15rem 0; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
    padding:       .75rem 1rem;
    border-radius: var(--radius);
    border-left:   3px solid transparent;
    color:         var(--color-text);
    margin-bottom: 1rem;
    position:      relative;
    display:       flex;
    align-items:   flex-start;
    gap:           .5rem;
}
.alert-close {
    position:   absolute;
    right:      .5rem;
    top:        .5rem;
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  1.1rem;
    line-height: 1;
    opacity:    .6;
}
.alert-close:hover { opacity: 1; }

/* Bande de couleur + fond teinté + texte normal : la couleur ne porte jamais
   seule l'état, le message le dit aussi. */
.alert-success { background: var(--color-success-bg);  border-color: var(--color-success); }
.alert-error   { background: var(--color-critical-bg); border-color: var(--color-critical); }
.alert-warning { background: var(--color-warning-bg);  border-color: var(--color-warning); }
.alert-info    { background: var(--color-info-bg);     border-color: var(--color-info); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1.5rem;
    box-shadow:    var(--shadow);
}
.card h2 { margin-bottom: .75rem; font-size: 1.1rem; font-weight: 600; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ── Stats ──────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
/* Carte de métrique de la charte : libellé discret, valeur en chiffres
   tabulaires. Le fond reste celui d'une carte : la couleur est réservée au sens. */
.stat-card {
    background:    var(--color-surface);
    color:         var(--color-text);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1.25rem 1.5rem;
    display:       flex;
    flex-direction: column-reverse;
    gap:           .25rem;
}
/* Valeur d'une carte du tableau de bord d'administration (admin_home.gohtml). */
.card .stat { font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-text); }
.stat-value { display: block; font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    min-height:    2rem;
    padding:       .4rem 1rem;
    border:        1px solid transparent;
    border-radius: var(--radius);
    cursor:        pointer;
    font-size:     .875rem;
    font-family:   inherit;
    font-weight:   600;
    line-height:   1.2;
    text-decoration: none;
    transition:    background var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; }

/* Un seul bouton principal par vue (charte). Le secondaire est un contour. */
.btn-primary   { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover  { background: var(--color-primary-h); }
.btn-primary:active { background: var(--color-primary-active, var(--color-primary-h)); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-surface-3); }
.btn-danger    { background: var(--color-danger); color: var(--color-on-danger); }
.btn-danger:hover { background: var(--color-danger-h, var(--color-danger)); }
.btn-oauth     { background: var(--color-nav-bg); color: var(--color-nav-active, #fff); }
.btn-oauth:hover { background: var(--color-nav-hover); }

.btn-sm  { min-height: 1.6rem; padding: .2rem .6rem; font-size: .8rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group {
    margin-bottom: 1.1rem;
}
.form-group label {
    display:     block;
    font-weight: 500;
    font-size:   .8125rem;
    margin-bottom: .3rem;
    color:       var(--color-text-2);
}
.form-group small {
    display:   block;
    color:     var(--color-text-muted);
    font-size: .8rem;
    margin-top: .2rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width:         100%;
    min-height:    2rem;
    padding:       .35rem .75rem;
    border:        1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background:    var(--color-surface);
    color:         var(--color-text);
    font-family:   inherit;
    font-size:     .875rem;
    transition:    border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:      none;
    border-color: var(--color-focus);
    box-shadow:   0 0 0 2px var(--color-selection-border, rgba(128,0,0,.2));
}
.form-group input[disabled] {
    background: var(--color-surface-3);
    cursor:     not-allowed;
}

.form-check {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.form-check input[type="checkbox"] { width: auto; }
.form-check label { margin: 0; font-weight: 400; }

.form-actions {
    display:  flex;
    gap:      .75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.edit-form { max-width: 600px; }

/* ── Auth ───────────────────────────────────────────────── */
.auth-wrapper {
    display:         flex;
    justify-content: center;
    padding:         2rem 1rem;
}
.auth-box {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       2.5rem 2rem;
    width:         100%;
    max-width:     420px;
    box-shadow:    var(--shadow);
}
.auth-box h1 { margin-bottom: 1.5rem; font-size: 1.5rem; }
.auth-form   { margin-bottom: 1rem; }
.auth-separator {
    text-align:   center;
    margin:       1rem 0;
    color:        var(--color-text-muted);
    font-size:    .85rem;
    position:     relative;
}
.auth-separator::before,
.auth-separator::after {
    content:  '';
    position: absolute;
    top:      50%;
    width:    38%;
    height:   1px;
    background: var(--color-border);
}
.auth-separator::before { left:  0; }
.auth-separator::after  { right: 0; }

/* ── Tables ─────────────────────────────────────────────── */
/* Tableau dense de la charte : 13 px, lignes de 32 px, filets horizontaux,
   chiffres tabulaires, pas de lignes alternées (le survol suffit). */
.data-table {
    width:          100%;
    border-collapse: collapse;
    font-size:      .8125rem;
    font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td {
    padding:       .45rem .75rem;
    text-align:    left;
    border-bottom: 1px solid var(--color-border);
}
.data-table th {
    background:  var(--color-surface-2);
    color:       var(--color-text-2);
    font-size:   .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom-color: var(--color-border-strong);
}
.data-table tr:hover td { background: var(--color-surface-2); }
.data-table tr.selected td, .data-table tr.sel td { background: var(--color-selection); }
.data-table .row-inactive { opacity: .6; }
.data-table .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Badges ─────────────────────────────────────────────── */
/* Pastille de la charte : rayon de 2 px, fond teinté, texte d'état. */
.badge {
    display:       inline-block;
    padding:       .1rem .45rem;
    border-radius: var(--radius-s);
    font-size:     .75rem;
    font-weight:   500;
    line-height:   1.5;
    background:    var(--color-surface-3);
    color:         var(--color-text-2);
}
.badge-success { background: var(--color-success-bg);  color: var(--color-success-text); }
.badge-danger  { background: var(--color-critical-bg); color: var(--color-critical-text); }
.badge-info    { background: var(--color-info-bg);     color: var(--color-info-text); }

/* ── Fieldset ───────────────────────────────────────────── */
.auth-fieldset {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.auth-fieldset legend {
    padding:     0 .4rem;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

/* ── Page header ────────────────────────────────────────── */
.page-header {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap:   wrap;
    gap:         .5rem;
}

/* ── Error page ─────────────────────────────────────────── */
.error-page {
    text-align: center;
    padding:    4rem 1rem;
}
.error-page h1 { font-size: 4rem; font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.error-page p  { font-size: 1.2rem; margin: 1rem 0; }

/* ── Form row (side-by-side fields) ─────────────────────────── */
.form-row {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 180px; }

/* ── Formulaires denses ─────────────────────────────────────────
   Deux champs par ligne sur un écran de PC, un seul en dessous de 720 px :
   un formulaire d'administration de quinze champs demandait sinon trois
   écrans de défilement, et l'essentiel passait sous la ligne de flottaison.

   Grille et non flex : les deux colonnes restent alignées quand un champ
   porte une aide sous lui et l'autre non. */
.form-grille {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   0 1.25rem;
    align-items:           start;
}
@media (min-width: 720px) {
    .form-grille { grid-template-columns: 1fr 1fr; }
}
.form-grille .form-group { margin-bottom: .8rem; min-width: 0; }
/* Ce qui ne se coupe pas en deux : un texte long, une zone de saisie, une
   case à cocher, les boutons. */
.form-grille .pleine-largeur,
.form-grille .form-actions,
.form-grille > h3,
.form-grille > p { grid-column: 1 / -1; }
/* Un .form-row garde ses proportions propres (hôte 3 / port 1) et occupe donc
   la largeur entière : il porte déjà ses deux champs sur une ligne. */
.form-grille > .form-row { grid-column: 1 / -1; }
.form-grille textarea { min-height: 4.5rem; }

/* ── Deux cartes côte à côte ─────────────────────────────────────
   Pour les écrans qui alignaient des cartes courtes les unes sous les
   autres — « mon profil » en faisait trois pleines pages. */
.cartes-deux {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   0 1.5rem;
    align-items:           start;
}
@media (min-width: 960px) {
    .cartes-deux { grid-template-columns: 1fr 1fr; }
}
/* La grille remplace la largeur bornée du formulaire d'édition. */
.edit-form.form-grille { max-width: none; }

/* ── Barre de filtre d'un tableau ───────────────────────────────
   Au-dessus d'un tableau que le navigateur filtre lui-même : une boîte de
   recherche, des listes par colonne, le compte des lignes retenues. */
.barre-filtre {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .5rem .75rem;
    align-items: flex-end;
    margin:      0 0 .85rem;
}
.barre-filtre .form-group { margin: 0; }
.barre-filtre .form-group label { font-size: .75rem; margin-bottom: .2rem; }
.barre-filtre .filtre-texte { min-width: 15rem; flex: 1 1 15rem; }
.filtre-compte {
    margin-left:  auto;
    font-size:    .85rem;
    color:        var(--color-text-muted);
    white-space:  nowrap;
    padding-bottom: .5rem;
}

/* ── Onglets de page (sous-navigation d'un écran) ───────────────
   Ils empruntaient .main-nav, dont les couleurs sont celles de la barre
   sombre : un onglet inactif sortait en #e2e8f0 sur fond clair, donc
   illisible, et n'avait en sombre aucune forme d'onglet. Ils prennent donc
   le texte de la page, et l'actif se détache par son fond et son trait. */
.page-onglets {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .2rem;
    margin:        0 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.page-onglet {
    display:         inline-block;
    padding:         .45rem .9rem;
    margin-bottom:   -1px;
    color:           var(--color-text);
    font-size:       .9rem;
    font-weight:     500;
    text-decoration: none;
    border:          1px solid transparent;
    border-bottom:   2px solid transparent;
    border-radius:   var(--radius) var(--radius) 0 0;
    transition:      background var(--transition), color var(--transition),
                     border-color var(--transition);
}
.page-onglet:hover {
    background:      var(--color-surface-3);
    color:           var(--color-link);
    text-decoration: none;
}
.page-onglet.active {
    color:               var(--color-link);
    font-weight:         600;
    background:          var(--color-surface);
    border-color:        var(--color-border);
    border-bottom-color: var(--color-link);
}

/* ── Badges (extra) ──────────────────────────────────────────── */
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* ── Admin layout (sidebar + content) ───────────────────────── */
.admin-layout {
    display:     flex;
    gap:         1.5rem;
    align-items: flex-start;
}

.admin-sidebar {
    width:       220px;
    flex-shrink: 0;
    position:    sticky;
    top:         4.5rem;
}

.admin-content { flex: 1; min-width: 0; }

/* Admin nav panel */
.admin-nav {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    overflow:      hidden;
}
.admin-nav-section {
    padding:       .35rem 0;
    border-bottom: 1px solid var(--color-border);
}
.admin-nav-section:last-child { border-bottom: none; }

.admin-nav-heading {
    padding:        .5rem 1rem .25rem;
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
}

.admin-nav-item {
    display:         flex;
    align-items:     center;
    gap:             .45rem;
    padding:         .42rem 1rem .42rem 1.1rem;
    color:           var(--color-text);
    font-size:       .88rem;
    text-decoration: none;
    border-left:     3px solid transparent;
    transition:      background var(--transition), color var(--transition),
                     border-color var(--transition);
}
.admin-nav-item:hover {
    background:      var(--color-surface-3);
    color:           var(--color-link);
    text-decoration: none;
}
.admin-nav-item.active {
    border-left-color: var(--color-link);
    color:             var(--color-link);
    font-weight:       600;
    background:        var(--color-selection);
}
.admin-nav-icon { font-size: .95rem; line-height: 1; }

/* ── Oracle subgroup grid ────────────────────────────────────── */
.oracle-subgroup-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap:                   .75rem;
}
.oracle-subgroup-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .3rem;
    padding:         1rem .5rem;
    border-radius:   var(--radius);
    border:          2px solid var(--color-border);
    text-decoration: none;
    transition:      border-color var(--transition), background var(--transition);
    min-height:      80px;
}
.oracle-subgroup-card.has-dbs {
    border-color: var(--color-link);
    background:   var(--color-selection);
    color:        var(--color-link);
}
.oracle-subgroup-card.empty  { color: var(--color-text-muted); }
.oracle-subgroup-card.locked { opacity: .45; cursor: default; background: var(--color-bg); }
.oracle-subgroup-card:not(.locked):hover {
    border-color:    var(--color-link);
    background:      var(--color-selection);
    text-decoration: none;
}
.sg-label { font-weight: 600; font-size: .85rem; }
.sg-count { font-size: 1.4rem; font-weight: 700; }

/* ── Import table row error ──────────────────────────────────── */
/* Rôles d'état : lisible dans tous les thèmes sans variante par thème. */
.row-error td { background: var(--color-critical-bg) !important; color: var(--color-critical-text) !important; }

/* ── Module grid / cards ─────────────────────────────────────── */
.module-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1.5rem;
}
.module-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.module-icon   { font-size: 1.8rem; line-height: 1; }
.module-icon-img { display: inline-block; height: 2.4rem; width: auto; vertical-align: middle; }
/* Logo couleur du module, sur la meme ligne que le titre de sa page d'accueil */
.module-home-logo { display: inline-block; height: 1.4em; width: auto; vertical-align: -.3em; margin-right: .5rem; }
.module-badge  { margin-left: auto; }
.module-desc   { color: var(--color-text-muted); font-size: .9rem; margin-bottom: .75rem; }
.module-meta   { font-size: .85rem; }
.module-meta dt { font-weight: 600; margin-top: .5rem; }
.module-meta dd { margin: .2rem 0 0; }

/* ── Developer module pre blocks ─────────────────────────────── */
.dev-dump {
    background:    var(--color-code-bg, var(--color-bg));
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1rem;
    font-family:   var(--font-mono);
    font-size:     .8rem;
    overflow-x:    auto;
    white-space:   pre-wrap;
    word-break:    break-all;
}
.dev-logs  { max-height: 22rem; overflow-y: auto; }
.log-error { color: var(--color-critical-text); }
.log-warn  { color: var(--color-warning-text); }
.log-debug { color: var(--color-text-muted); }

/* ── Oracle config / parameters report ──────────────────── */
.cfg-filter-card { padding: .75rem 1rem; }
.cfg-filter-bar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         .5rem .75rem;
}
.cfg-filter-check {
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;
    font-size:   .88rem;
    cursor:      pointer;
    white-space: nowrap;
}
.cfg-filter-check input[type=checkbox] { cursor: pointer; }
.cfg-filter-sep  { width: 1px; height: 1.4em; background: var(--color-border); flex-shrink: 0; margin: 0 .1rem; }
.cfg-filter-label { font-size: .82rem; color: var(--color-text-muted); white-space: nowrap; }
.cfg-filter-select, .cfg-filter-input {
    font-size:    .85rem;
    padding:      .25rem .5rem;
    border:       1px solid var(--color-border);
    border-radius: var(--radius);
    background:   var(--color-surface);
    color:        var(--color-text);
    height:       2rem;
}
.cfg-filter-input { min-width: 180px; }
.cfg-filter-count { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; }

.cfg-table { table-layout: auto; }
.cfg-table th { white-space: nowrap; }
.cfg-table th.sortable { user-select: none; }
.cfg-table th.sortable:hover { background: var(--color-bg); }
.cfg-table .sort-arrow { font-size: .7em; opacity: .6; }
.cfg-table .cfg-col-value { min-width: 180px; }

.cfg-param-name { cursor: help; }

.cfg-val-modified {
    color:           var(--color-warning-text);
    font-weight:     600;
}

.cfg-value-cell.editable {
    cursor: pointer;
}
.cfg-value-cell.editable:hover { background: var(--color-selection); }
.cfg-value-cell.editable span  { border-bottom: 1px dashed var(--color-link); }

.cfg-type-badge {
    display:       inline-block;
    font-size:     .72em;
    padding:       .1em .4em;
    border-radius: var(--radius-s);
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    white-space:   nowrap;
}

.btn-cfg-reset {
    padding:   .15rem .4rem;
    font-size: .85rem;
    line-height: 1;
}

/* Edit overlay / popup */
#cfg-edit-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      var(--color-overlay, rgba(0,0,0,.45));
    z-index:         1000;
    align-items:     center;
    justify-content: center;
}
#cfg-edit-popup {
    width:      420px;
    max-width:  95vw;
    padding:    1.25rem;
    box-shadow: var(--shadow-2);
}
.cfg-edit-header {
    display:       flex;
    flex-direction: column;
    gap:           .2rem;
    margin-bottom: .75rem;
}
.cfg-edit-header strong { font-size: 1.05rem; }
.cfg-edit-header span   { font-size: .82rem; color: var(--color-text-muted); }
.cfg-edit-body  { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .85rem; }
.cfg-edit-footer { display: flex; gap: .5rem; justify-content: flex-end; }

/* ── Oracle tablespace / redo log report ─────────────────── */
.section-title {
    font-size:    1.1rem;
    font-weight:  600;
    margin:       1.5rem 0 .6rem;
    color:        var(--color-text);
    padding-left: .15rem;
}
/* Tablespace sort bar */
.ts-sort-bar {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    margin-bottom: .75rem;
    flex-wrap:   wrap;
}
.ts-sort-label {
    font-size:  .8rem;
    color:      var(--color-text-muted);
    white-space: nowrap;
}
.btn-sort {
    font-size:   .78rem;
    padding:     .22rem .55rem;
    border:      1px solid var(--color-border);
    border-radius: var(--radius);
    background:  transparent;
    color:       var(--color-text);
    cursor:      pointer;
    transition:  background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-sort:hover { background: var(--color-surface-3); }
.btn-sort.active {
    background:   var(--color-selection);
    color:        var(--color-link);
    border-color: var(--color-link);
}

.ora-chart-container {
    min-height: 80px;
    overflow-x: auto;
}
.ora-chart-container svg { display: block; }
.ora-chart-note {
    font-size:  .85rem;
    color:      var(--color-text-muted);
    margin:     0 0 .5rem;
    font-style: italic;
}
.text-right { text-align: right !important; }

/* Redo log member file list */
.redo-member {
    display:     flex;
    align-items: center;
    gap:         .35rem;
    font-size:   .8rem;
    line-height: 1.4;
    font-family: var(--font-mono, monospace);
    color:       var(--color-text-muted);
}
.redo-member-path { word-break: break-all; }

/* NLS diff highlighting */
.nls-diff      { color: var(--color-warning-text);  font-weight: 600; }
.nls-diff-sess { color: var(--color-critical-text); font-weight: 600; }

/* Toast */
.cfg-toast {
    position:   fixed;
    bottom:     1.25rem;
    right:      1.25rem;
    z-index:    2000;
    max-width:  380px;
    box-shadow: var(--shadow-2);
}

/* ── Memory report KPI cards ────────────────────────────── */
.mem-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: .9rem;
    margin-bottom: 1.25rem;
}
.mem-kpi-card {
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       .85rem 1rem;
    text-align:    center;
}
.mem-kpi-label {
    font-size:      .75rem;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom:  .3rem;
}
.mem-kpi-value {
    font-size:   1.4rem;
    font-weight: 600;
    color:       var(--color-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.mem-kpi-sub {
    font-size:   .73rem;
    color:       var(--color-text-muted);
    margin-top:  .25rem;
}
.mem-kpi-value.text-success { color: var(--color-success-text); }
.mem-kpi-value.text-warning { color: var(--color-warning-text); }
.mem-kpi-value.text-danger  { color: var(--color-critical-text); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-layout  { flex-direction: column; }
    .admin-sidebar { width: 100%; position: static; }
}

@media (max-width: 640px) {
    .main-nav { gap: 0; }
    .nav-link { padding: .35rem .5rem; font-size: .82rem; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .data-table { font-size: .8rem; }
    .oracle-subgroup-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Documentation in-app (/doc) ──────────────────────────────────────── */
/* docs_show.gohtml rend le Markdown dans un <article class="card markdown"> :
   les deux classes portent les mêmes règles. */
.doc-content, .markdown { line-height: 1.7; color: var(--color-text); }
.doc-content h1, .markdown h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.doc-content h2, .markdown h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--color-border); }
.doc-content h3, .markdown h3 { font-size: 1.08rem; margin: 1.4rem 0 .6rem; }
.doc-content h4, .markdown h4 { font-size: .98rem; margin: 1.1rem 0 .5rem; }
.doc-content p, .markdown p { margin: 0 0 .9rem; }
.doc-content ul, .markdown ul, .doc-content ol, .markdown ol { margin: 0 0 .9rem; padding-left: 1.5rem; }
.doc-content li, .markdown li { margin: .25rem 0; }
.doc-content, .markdown { font-size: 1rem; }
.doc-content a, .markdown a { color: var(--color-link); }
.doc-content code, .markdown code { background: var(--color-code-bg, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius-s); padding: .1rem .35rem; font-size: .88em; }
.doc-content pre, .markdown pre { background: var(--color-code-bg, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .9rem 1rem; overflow-x: auto; }
.doc-content pre code, .markdown pre code { background: none; border: 0; padding: 0; }
.doc-content blockquote, .markdown blockquote { margin: 0 0 .9rem; padding: .4rem 1rem; border-left: 3px solid var(--color-info); background: var(--color-info-bg); color: var(--color-text-2); }
.doc-content table, .markdown table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: .9rem; }
.doc-content th, .markdown th, .doc-content td, .markdown td { border: 1px solid var(--color-border); padding: .45rem .65rem; text-align: left; vertical-align: top; }
.doc-content th, .markdown th { background: var(--color-surface-2); font-weight: 600; }
.doc-content img, .markdown img { max-width: 100%; height: auto; }
.doc-content hr, .markdown hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.6rem 0; }
.doc-list a { font-weight: 500; }
.doc-content .mermaid, .markdown .mermaid { margin: 0 0 1rem; text-align: center; overflow-x: auto; }
.doc-content .mermaid svg, .markdown .mermaid svg { max-width: 100%; height: auto; }

/* Centrée : 70 % de la page, sans descendre sous la largeur de lecture. */
.doc-cadre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(min(72ch, 100%), 70%) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    font-size: 1rem;
}
.doc-colonne { grid-column: 2; min-width: 0; }
.doc-retour-ligne { margin: 0 0 1rem; }

/* Chapitres : précédent et suivant. */
.doc-chapitres { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.doc-chapitres a {
    display: block;
    max-width: 48%;
    padding: .4rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-link);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-decoration: none;
}
.doc-chapitres a:hover { border-color: var(--color-link); }
.doc-chapitres small { display: block; font-size: .75rem; font-weight: 400; color: var(--color-text-muted); }
.doc-chapitres .doc-suivant { margin-left: auto; text-align: right; }

/* Sommaire : dépliable, sur le côté droit, le menu des rapports occupant le gauche. */
.doc-sommaire {
    grid-column: 3;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    font-size: .8125rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.doc-sommaire summary { padding: .5rem .75rem; font-weight: 600; color: var(--color-link); cursor: pointer; }
.doc-sommaire-nom { margin: 0; padding: 0 .75rem .4rem; font-size: .75rem; color: var(--color-text-muted); }
.doc-sommaire ol, .doc-sommaire ul { margin: 0; padding: 0; list-style: none; }
.doc-sommaire ol { padding-bottom: .5rem; }
.doc-sommaire a { display: block; padding: .2rem .75rem; color: var(--color-text-2); text-decoration: none; }
.doc-sommaire a:hover { color: var(--color-link); }
.doc-sommaire .courant > a { font-weight: 600; color: var(--color-link); background: var(--color-selection); border-left: 3px solid var(--color-link); }
.doc-sommaire ul a { padding-left: 1.4rem; font-size: .75rem; }
@media (max-width: 1100px) {
    .doc-cadre { display: block; }
    .doc-sommaire { position: static; max-height: none; margin: 1rem 0; }
}

/* Mini-couvertures : la page de garde des guides .docx, au format A4. */
.doc-rayon { margin-bottom: 1.6rem; }
.doc-rayon > h2 { margin: 0 0 .8rem; font-size: 1.25rem; font-weight: 600; }
.doc-couvertures { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 212px)); gap: 1.2rem; }
.doc-couverture {
    display: flex;
    flex-direction: column;
    aspect-ratio: 210 / 297;
    padding: 1.6rem 1.1rem 1.1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    text-decoration: none;
    transition: transform 120ms ease-out, border-color 120ms ease-out;
}
.doc-couverture:hover { transform: translateY(-3px); border-color: var(--color-link); }
.doc-couverture:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.doc-couverture img { width: 34px; height: 34px; margin-bottom: .7rem; }
.doc-c-produit { font-size: 1rem; font-weight: 700; line-height: 1.15; }
.doc-c-ligne {
    padding-bottom: .5rem;
    margin-bottom: .6rem;
    font-size: .75rem;
    color: var(--color-text-2);
    border-bottom: 2px solid var(--color-primary);
}
.doc-c-titre { font-size: .875rem; font-weight: 700; line-height: 1.25; color: var(--color-link); }
.doc-c-sous-titre { margin-top: .35rem; font-size: 11px; line-height: 1.35; color: var(--color-text-2); }
.doc-c-bas { margin-top: auto; font-size: 10px; line-height: 1.3; }
.doc-c-bas small {
    display: block;
    margin-top: .35rem;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.doc-c-bas span { display: block; }

/* ── Oracle : menu lateral des rapports (collapsable) ─────── */
.oracle-sidebar-toggle, .pg-sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-nav-text);
    font-size: 1.15rem;
    line-height: 1;
    padding: .3rem .55rem;
    border-radius: var(--radius);
    flex-shrink: 0;
}
.oracle-sidebar-toggle:hover, .pg-sidebar-toggle:hover { background: var(--color-nav-hover); }

.oracle-sidebar, .pg-sidebar {
    position: fixed;
    top: var(--ora-header-h, 56px);
    left: 0;
    bottom: 0;
    width: 52px;
    background: var(--color-nav-bg);
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: .4rem 0;
    transition: transform .2s ease;
}
.oracle-sidebar-nav, .pg-sidebar-nav { display: flex; flex-direction: column; }

/* Collapsed : on masque le rail (le contenu reprend toute la largeur) */
body.oracle-sidebar-collapsed .oracle-sidebar, body.pg-sidebar-collapsed .pg-sidebar { transform: translateX(-100%); }

/* Decalage du contenu quand le rail est present et visible */
body.has-oracle-sidebar .site-main, body.has-pg-sidebar .site-main {
    margin-left: 52px;
    transition: margin-left .2s ease;
}
body.has-oracle-sidebar.oracle-sidebar-collapsed .site-main, body.has-pg-sidebar.pg-sidebar-collapsed .site-main { margin-left: 0; }

/* Boutons verticaux : icone seule, sous-menu en flyout a droite */
.oracle-sidebar .oracle-dropdown, .pg-sidebar .pg-dropdown { display: block; width: 100%; }
.oracle-sidebar .oracle-dropdown-btn, .pg-sidebar .pg-dropdown-btn {
    width: 100%;
    justify-content: center;
    padding: .55rem 0;
    font-size: 1.2rem;
    border-radius: 0;
}
.oracle-sidebar .oracle-dropdown-menu, .pg-sidebar .pg-dropdown-menu {
    top: 0;
    left: calc(100% + 2px);
}
.oracle-sidebar-home, .pg-sidebar-home {
    margin-top: auto;
    padding: .5rem 0;
    text-align: center;
    color: var(--color-nav-text);
    opacity: .7;
    font-size: 1.1rem;
    text-decoration: none;
}
.oracle-sidebar-home:hover, .pg-sidebar-home:hover { background: var(--color-nav-hover); opacity: 1; }
/* Icônes SVG du rail (charte, § 7) : un peu plus grandes que celles de la
   barre du haut, centrées dans leur bouton. */
.oracle-sidebar .icone, .pg-sidebar .icone { width: 1.3rem; height: 1.3rem; }
.oracle-sidebar-home .icone, .pg-sidebar-home .icone { margin: 0 auto; }
.oracle-sidebar-toggle .icone, .pg-sidebar-toggle .icone { width: 1.2rem; height: 1.2rem; }
.oracle-nav-label .icone { display: inline-block; vertical-align: -.2em; width: 1rem; height: 1rem; }

/* Mobile : le rail passe en overlay (pas de decalage du contenu) */
@media (max-width: 720px) {
    body.has-oracle-sidebar .site-main, body.has-pg-sidebar .site-main { margin-left: 0; }
    .oracle-sidebar, .pg-sidebar { box-shadow: var(--shadow-2); }
}

/* Logo de module (64px) dans la liste des modules, a la place de l'emoji */
.nav-icon-img {
    display: inline-block;          /* annule le `img { display:block }` global (l.47) */
    height: 1.2em;
    width: auto;
    vertical-align: -.25em;
    border-radius: 3px;
}

/* Liste des modules : libelle a cote de l'icone (espacement), masque < 1024px */
.nav-left .nav-label { margin-left: .35rem; }
@media (max-width: 1023px) {
    .nav-left .nav-label { display: none; }
}

/* Icônes de la charte (§ 7) : trait de 2 px sur une grille de 24, tracés de
   Lucide (licence ISC), couleur du texte. Un seul mécanisme, dans un gabarit comme
   depuis un script : l'attribut data-wd-i, sur un élément vide ou porteur de texte.
   Le dessin passe par un masque : il suit la couleur du texte, donc le thème. */
[data-wd-i]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background: currentColor;
    -webkit-mask: var(--wd-i) center / contain no-repeat;
    mask: var(--wd-i) center / contain no-repeat;
}
[data-wd-i]:not(:empty)::before { margin-right: .35em; }
[data-wd-i="x"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"); }
[data-wd-i="coche"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); }
[data-wd-i="ok"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m8 12 3 3 5-6%22/%3E%3C/svg%3E"); }
[data-wd-i="alerte"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); }
[data-wd-i="critique"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9z%22/%3E%3Cpath d=%22M12 8v4%22/%3E%3Cpath d=%22M12 16h.01%22/%3E%3C/svg%3E"); }
[data-wd-i="info"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); }
[data-wd-i="verrou"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E"); }
[data-wd-i="copier"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E"); }
[data-wd-i="recherche"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E"); }
[data-wd-i="livre"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z%22/%3E%3Cpath d=%22M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z%22/%3E%3C/svg%3E"); }
[data-wd-i="dossier"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z%22/%3E%3C/svg%3E"); }
[data-wd-i="module"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 10 5-10 5L2 7z%22/%3E%3Cpath d=%22m2 17 10 5 10-5%22/%3E%3Cpath d=%22m2 12 10 5 10-5%22/%3E%3C/svg%3E"); }
[data-wd-i="cle"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z%22/%3E%3C/svg%3E"); }
[data-wd-i="telecharger"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3Cpath d=%22M12 15V3%22/%3E%3C/svg%3E"); }
[data-wd-i="eclair"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 3 14h9l-1 8 10-12h-9z%22/%3E%3C/svg%3E"); }
[data-wd-i="paquet"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.73z%22/%3E%3Cpath d=%22M3.27 6.96 12 12.01l8.73-5.05%22/%3E%3Cpath d=%22M12 22.08V12%22/%3E%3C/svg%3E"); }
[data-wd-i="carre"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3C/svg%3E"); }
[data-wd-i="corbeille"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6%22/%3E%3Cpath d=%22M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M10 11v6%22/%3E%3Cpath d=%22M14 11v6%22/%3E%3C/svg%3E"); }
[data-wd-i="calendrier"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3C/svg%3E"); }
[data-wd-i="enregistrer"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z%22/%3E%3Cpath d=%22M17 21v-8H7v8%22/%3E%3Cpath d=%22M7 3v5h8%22/%3E%3C/svg%3E"); }
[data-wd-i="utilisateur"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E"); }
[data-wd-i="etoile"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z%22/%3E%3C/svg%3E"); }
[data-wd-i="format"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 6H3%22/%3E%3Cpath d=%22M15 12H3%22/%3E%3Cpath d=%22M17 18H3%22/%3E%3C/svg%3E"); }
[data-wd-i="ampoule"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5%22/%3E%3Cpath d=%22M9 18h6%22/%3E%3Cpath d=%22M10 22h4%22/%3E%3C/svg%3E"); }
[data-wd-i="lieu"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E"); }
[data-wd-i="sablier"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 22h14%22/%3E%3Cpath d=%22M5 2h14%22/%3E%3Cpath d=%22M17 22v-4.17a2 2 0 0 0-.59-1.42L12 12l-4.41 4.41A2 2 0 0 0 7 17.83V22%22/%3E%3Cpath d=%22M7 2v4.17a2 2 0 0 0 .59 1.42L12 12l4.41-4.41A2 2 0 0 0 17 6.17V2%22/%3E%3C/svg%3E"); }
[data-wd-i="chrono"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 2h4%22/%3E%3Cpath d=%22m12 14 3-3%22/%3E%3Ccircle cx=%2212%22 cy=%2214%22 r=%228%22/%3E%3C/svg%3E"); }
[data-wd-i="crayon"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z%22/%3E%3C/svg%3E"); }
[data-wd-i="case"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 11 3 3L22 4%22/%3E%3Cpath d=%22M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11%22/%3E%3C/svg%3E"); }
[data-wd-i="tuer"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9z%22/%3E%3Cpath d=%22m15 9-6 6%22/%3E%3Cpath d=%22m9 9 6 6%22/%3E%3C/svg%3E"); }
[data-wd-i="actualiser"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-2.64-6.36L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3C/svg%3E"); }
[data-wd-i="cible"] { --wd-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18v-6H5l7-7 7 7h-4v6z%22/%3E%3C/svg%3E"); }

/* Une valeur et sa barre dans une cellule : la part de la colonne se lit d'un coup
   d'œil, le chiffre reste exact. Tableaux des diagnostics ORA. */
.wd-sauv-branche > summary::before { content: "▸"; color: var(--color-text-muted); width: .8rem; flex: none; }
.wd-sauv-branche[open] > summary::before { content: "▾"; }
.wd-sauv-ligne { display: grid; grid-template-columns: minmax(6.5rem, 8rem) 10.5rem 5rem 3rem minmax(7rem, 1fr) minmax(4rem, 9rem); gap: .5rem; align-items: center; }
.wd-heat { width: 100%; min-width: 24rem; table-layout: fixed; border-collapse: collapse; font-size: .62rem; }
.wd-heat th { font-weight: 400; color: var(--color-text-muted); padding: 0; text-align: center; }
.wd-heat td { height: 1.05rem; padding: 0; border: 1px solid var(--color-border); position: relative; }
.wd-heat td > a, .wd-heat td > span { display: block; width: 100%; height: 100%; min-height: 1.05rem; }
.wd-heat td > a:hover, .wd-heat td > a:focus-visible { outline: 2px solid var(--color-text); outline-offset: -1px; }
.wd-heat [data-wd-tip]:hover::after, .wd-heat [data-wd-tip]:focus-visible::after {
    content: attr(data-wd-tip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
    padding: .2rem .45rem; border-radius: var(--radius-s); background: var(--color-text); color: var(--color-surface);
    font-size: .72rem; white-space: nowrap; pointer-events: none;
}
.wd-heat td:nth-child(n+18) [data-wd-tip]:hover::after, .wd-heat td:nth-child(n+18) [data-wd-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.wd-heat td:nth-child(-n+7) [data-wd-tip]:hover::after, .wd-heat td:nth-child(-n+7) [data-wd-tip]:focus-visible::after { left: 0; transform: none; }
table[data-tri] th { cursor: pointer; user-select: none; }
table[data-tri] th:hover, table[data-tri] th:focus-visible { background: var(--color-bg); }
table[data-tri] .sort-arrow { font-size: .7em; opacity: .6; }
.wd-fab-accueil { position: fixed; bottom: 1rem; right: 1rem; z-index: 900; display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; font-size: .8rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); cursor: pointer; opacity: .85; }
.wd-fab-accueil:hover, .wd-fab-accueil:focus-visible { opacity: 1; }
.wd-fab-accueil [data-wd-i] { color: var(--color-text-muted); }
.wd-fab-accueil[data-courante="1"] [data-wd-i] { color: var(--color-warning); }
.wd-barre { position: relative; min-height: 1.15rem; text-align: right; white-space: nowrap; min-width: 4.5rem; }
.wd-barre > i { position: absolute; left: 0; top: 1px; bottom: 1px; background: var(--color-info-bg); border-right: 2px solid var(--color-info); border-radius: 2px; }
.wd-barre > span { position: relative; padding: 0 .3rem; font-variant-numeric: tabular-nums; }
/* Trois repères sur une même échelle : maximum, alloué et utilisé. */
.wd-jauge { position: relative; height: 1.05rem; background: var(--color-surface-2); border-radius: 2px; }
.wd-jauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.wd-jauge > .wd-jauge-max { background: var(--color-border); }
.wd-jauge > .wd-jauge-alloue { background: var(--color-serie-1); opacity: .45; }
.wd-jauge > .wd-jauge-utilise { background: var(--color-serie-1); }