/* ============================================================================
   Glossaire Linux — feuille de style partagée
   ============================================================================
   Sections :
     1. Variables de thème (sombre / clair)
     2. Reset et typographie
     3. Topbar (en-tête fixe)
     4. Layout (sidebar + main)
     5. Cartes de commande (.cmd)
     6. Blocs de code et exemples
     7. Tableaux (options, répertoires)
     8. Notes / callouts
     9. Recherche
    10. Composants utilitaires (badges, kbd, liens)
    11. Pages spéciales (accueil, arborescence)
    12. Responsive
    13. Préférences utilisateur
    14. Impression
   ============================================================================ */


/* ---------- 1. Variables de thème ---------- */
:root {
    --bg:           #0d1117;
    --bg-soft:      #161b22;
    --bg-card:      #161b22;
    --bg-code:      #010409;
    --bg-hover:     #1c2128;
    --border:       #30363d;
    --border-soft:  #21262d;
    --fg:           #e6edf3;
    --fg-soft:      #8d96a0;
    --fg-dim:       #6e7681;
    --accent:       #7ee787;
    --accent-soft:  rgba(126, 231, 135, 0.12);
    --warn:         #f0883e;
    --warn-soft:    rgba(240, 136, 62, 0.10);
    --info:         #79c0ff;
    --info-soft:    rgba(121, 192, 255, 0.10);
    --link:         #79c0ff;
    --shadow:       0 1px 0 rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.4);
    --highlight:    rgba(255, 230, 109, 0.25);

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --radius:       8px;
    --radius-sm:    5px;
    --topbar-h:     56px;
    --sidebar-w:    260px;
}

[data-theme="light"] {
    --bg:           #fbfbf9;
    --bg-soft:      #f3f3ee;
    --bg-card:      #ffffff;
    --bg-code:      #f6f6f1;
    --bg-hover:     #efeee8;
    --border:       #d8d4cb;
    --border-soft:  #e6e2d8;
    --fg:           #1f2328;
    --fg-soft:      #57606a;
    --fg-dim:       #848d97;
    --accent:       #1a7f37;
    --accent-soft:  rgba(26, 127, 55, 0.10);
    --warn:         #bc4c00;
    --warn-soft:    rgba(188, 76, 0, 0.08);
    --info:         #0969da;
    --info-soft:    rgba(9, 105, 218, 0.08);
    --link:         #0969da;
    --shadow:       0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.06);
    --highlight:    rgba(255, 213, 0, 0.35);
}


/* ---------- 2. Reset et typographie ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 16px);
}

/* Lien d'évitement clavier : masqué hors focus, apparaît au premier Tab. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 1000;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--fg);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

h1 { font-size: 1.75rem; line-height: 1.25; }
h2 { font-size: 1.35rem; line-height: 1.3; }
h3 { font-size: 1.1rem; line-height: 1.4; }
h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-soft); }

p { margin: 0 0 0.6em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
a:hover { border-bottom-color: currentColor; }

code, pre, kbd, .mono { font-family: var(--font-mono); }

code {
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    color: var(--fg);
}

pre {
    margin: 0;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.55;
}
pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

::selection { background: var(--accent-soft); color: var(--fg); }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }


/* ---------- 3. Topbar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--fg);
    border: none;
    white-space: nowrap;
}
.topbar .brand .logo {
    width: 22px;
    height: 22px;
    color: var(--accent);
}
.topbar .brand-name {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.topbar .brand-name::before { content: "$ "; color: var(--accent); }

.topbar .spacer { flex: 1; }

/* Bouton de bascule du menu mobile */
.menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.menu-btn:hover { background: var(--bg-hover); }
.menu-btn svg { width: 18px; height: 18px; }

/* Bouton bascule de thème */
.theme-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-soft);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.theme-btn:hover { background: var(--bg-hover); color: var(--fg); }
.theme-btn svg { width: 16px; height: 16px; }
[data-theme="light"] .theme-btn .icon-moon { display: inline; }
[data-theme="light"] .theme-btn .icon-sun  { display: none; }
.theme-btn .icon-moon { display: none; }
.theme-btn .icon-sun  { display: inline; }

/* Lien utilitaire dans la topbar (ex. index alphabétique).
   Même gabarit visuel que .theme-btn et .menu-btn. */
.topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-soft);
    text-decoration: none;
    flex: none;
    transition: color .15s, background .15s, border-color .15s;
}
.topbar-link:hover {
    background: var(--bg-hover);
    color: var(--fg);
    /* Annule la bordure-bas héritée du style global a:hover */
    border-bottom: 1px solid var(--border);
}
.topbar-link svg { width: 16px; height: 16px; }


/* ---------- 4. Layout ---------- */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    gap: 0;
}

.sidebar {
    position: sticky;
    top: var(--topbar-h);
    align-self: start;
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    padding: 24px 8px 24px 24px;
    border-right: 1px solid var(--border);
}

.sidebar h4 {
    margin: 24px 0 10px;
    padding: 0 10px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fg);
    border-bottom: 1px solid var(--border-soft);
}
.sidebar h4:first-child { margin-top: 0; }

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar li { margin: 0; }

.sidebar a {
    display: block;
    padding: 6px 10px;
    color: var(--fg-soft);
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: background .12s, color .12s;
}
.sidebar a:hover { background: var(--bg-hover); color: var(--fg); }
.sidebar a.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

.main {
    padding: 32px 40px 80px;
    min-width: 0;
}
.main-standalone {
    max-width: 1100px;
    margin: 0 auto;
}
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.main > header.page-head {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.main > header.page-head h1 {
    display: flex;
    align-items: center;
    gap: 14px;
}
.main > header.page-head h1 svg {
    width: 26px;
    height: 26px;
    color: var(--accent);
    flex: none;
}
.main > header.page-head .lead {
    margin-top: 8px;
    color: var(--fg-soft);
    font-size: 1.02rem;
    max-width: 70ch;
}


/* ---------- 5. Cartes de commande ---------- */
.section {
    margin: 0 0 56px;
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.section > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.section > h2 svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex: none;
}
.section > .section-intro {
    color: var(--fg-soft);
    margin-bottom: 22px;
    max-width: 75ch;
}

.cmd {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 16px 0;
    box-shadow: var(--shadow);
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.cmd[hidden] { display: none; }

.cmd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-soft);
}
.cmd-name {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.01em;
}
.cmd-name::before {
    content: "▸ ";
    color: var(--fg-dim);
}
.cmd-tagline {
    color: var(--fg-soft);
    font-size: 0.95rem;
    margin: 0;
}

.cmd-body > * + * { margin-top: 14px; }
.cmd-body h4 { margin-top: 18px; }
.cmd-body h4:first-child { margin-top: 0; }


/* ---------- 6. Blocs de code et exemples ---------- */
.syntax {
    background: var(--bg-code);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    color: var(--fg);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    overflow-x: auto;
}

.example {
    margin: 12px 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-code);
}
.example-cmd {
    padding: 10px 14px;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    overflow-x: auto;
}
.example-cmd .prompt {
    color: var(--accent);
    user-select: none;
    margin-right: 6px;
}
.example-cmd .comment { color: var(--fg-dim); }

.example-out {
    padding: 8px 14px;
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: 0.825rem;
    border-top: 1px dashed var(--border-soft);
    background: color-mix(in srgb, var(--bg-code) 80%, var(--bg-soft));
    overflow-x: auto;
    white-space: pre;
    line-height: 1.5;
}

.example-explain {
    padding: 8px 14px;
    background: var(--bg-soft);
    color: var(--fg-soft);
    font-size: 0.875rem;
    border-top: 1px solid var(--border-soft);
}
.example-explain::before {
    content: "↪ ";
    color: var(--accent);
    font-family: var(--font-mono);
    margin-right: 4px;
}

/* Bouton "copier" : injecté en JS, visible au survol de l'exemple */
.example { position: relative; }
.copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--fg-soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s, background .15s, border-color .15s;
    z-index: 1;
}
.example:hover .copy-btn,
.example:focus-within .copy-btn,
.copy-btn:focus-visible {
    opacity: 1;
}
.copy-btn:hover {
    color: var(--fg);
    background: var(--bg-hover);
    border-color: var(--border);
}
.copy-btn svg {
    width: 14px;
    height: 14px;
}
.copy-btn.copied {
    color: var(--accent);
    border-color: var(--accent);
    opacity: 1;
}

/* Permalien : petit lien « # » à droite des titres, visible au survol */
.permalink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    margin-left: 8px;
    padding: 0 5px;
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s ease, color .15s, background .15s, border-color .15s;
    vertical-align: middle;
}
/* On supprime le soulignement hérité du style global des liens */
.permalink:hover { border-bottom: none; }

/* Apparition au survol du titre ou du conteneur .cmd-head, ou via clavier */
.section > h2:hover .permalink,
.cmd:hover .cmd-head .permalink,
.cmd-head:focus-within .permalink,
.permalink:focus-visible {
    opacity: 1;
}

.permalink:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.permalink.copied {
    color: var(--accent);
    opacity: 1;
}

.permalink svg {
    width: 12px;
    height: 12px;
}


/* ---------- 7. Tableaux ---------- */
.opts, .dirs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.opts th, .opts td,
.dirs th, .dirs td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}
.opts tr:last-child td,
.dirs tr:last-child td { border-bottom: none; }
.opts th, .dirs th {
    background: var(--bg-soft);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-soft);
}
.opts td:first-child,
.dirs td:first-child {
    font-family: var(--font-mono);
    color: var(--accent);
    white-space: nowrap;
    width: 1%;
}
.opts tr:hover td,
.dirs tr:hover td { background: var(--bg-hover); }


/* ---------- 8. Notes / callouts ---------- */
.note {
    margin: 14px 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--info);
    background: var(--info-soft);
    font-size: 0.9rem;
    color: var(--fg);
}
.note strong { color: var(--info); }
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note.warn strong { color: var(--warn); }
.note.tip  { border-left-color: var(--accent); background: var(--accent-soft); }
.note.tip strong { color: var(--accent); }
.compact-list {
    margin: 6px 0 0 18px;
    padding: 0;
}
.compact-list.spaced {
    margin-bottom: 12px;
    line-height: 1.7;
}


/* ---------- 9. Recherche ---------- */
.search-wrap {
    /* Centrée dans la topbar, indépendamment de la largeur du logo et des
       actions : sortie du flux flex et calée sur le centre de l'en-tête. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    height: 36px;
    padding: 0 10px;
    width: min(440px, 44vw);
    max-width: 100%;
}
.search-wrap:focus-within {
    border-color: var(--accent);
    background: var(--bg);
}
.search-wrap svg {
    width: 14px;
    height: 14px;
    color: var(--fg-dim);
    flex: none;
}
.search-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--fg);
    font: inherit;
    font-size: 0.9rem;
    padding: 0 8px;
    min-width: 0;
}
.search-wrap input::placeholder { color: var(--fg-dim); }
.search-wrap kbd {
    color: var(--fg-dim);
    font-size: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    background: var(--bg);
}

mark.hl {
    background: var(--highlight);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.no-results {
    margin: 32px 0;
    padding: 20px;
    text-align: center;
    color: var(--fg-soft);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.no-results[hidden] { display: none; }


/* ---------- 10. Composants utilitaires ---------- */
kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.78em;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg-soft);
    color: var(--fg);
    line-height: 1.4;
}

.see-also {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-soft);
    font-size: 0.875rem;
    color: var(--fg-soft);
}
.see-also strong {
    color: var(--fg);
    margin-right: 4px;
}
.see-also a { margin: 0 4px; }

.badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--fg-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    vertical-align: middle;
}
.badge.root { color: var(--warn); border-color: var(--warn); }
.badge.new  { color: var(--accent); border-color: var(--accent); }


/* ---------- 11. Pages spéciales ---------- */

/* Accueil : grille de catégories */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0 40px;
}
.cat-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    border-bottom: 1px solid var(--border);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.cat-card svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
    margin-bottom: 12px;
}
.cat-card .cat-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--fg);
}
.cat-card .cat-desc {
    font-size: 0.875rem;
    color: var(--fg-soft);
    line-height: 1.5;
    /* Hauteur homogène : 3 lignes max, le reste est coupé (… via ellipsis).
       Le texte complet reste accessible au survol via l'attribut title. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-card .cat-count {
    /* Poussé en bas de la carte : position constante quel que soit le texte. */
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.78rem;
    color: var(--fg-dim);
    font-family: var(--font-mono);
}

/* Schéma SVG des permissions rwx (droits.html / chmod).
   Toutes les couleurs proviennent des variables de thème, donc le
   schéma s'adapte automatiquement à la bascule sombre/clair. */
.rwx-diagram {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 14px 0;
}
.rwx-diagram .rwx-cell-bg {
    fill: var(--bg-soft);
    stroke: var(--border);
    stroke-width: 1.5;
    transition: fill .15s, stroke .15s;
}
.rwx-diagram .rwx-cell.set .rwx-cell-bg {
    fill: var(--accent-soft);
    stroke: var(--accent);
}
.rwx-diagram .rwx-letter {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    fill: var(--fg);
    text-anchor: middle;
    dominant-baseline: middle;
}
.rwx-diagram .rwx-cell.set .rwx-letter {
    fill: var(--accent);
}
.rwx-diagram .rwx-cell.unset .rwx-letter {
    fill: var(--fg-dim);
}
.rwx-diagram .rwx-value {
    font-family: var(--font-mono);
    font-size: 13px;
    fill: var(--fg-soft);
    text-anchor: middle;
}
.rwx-diagram .rwx-cell.unset .rwx-value {
    fill: var(--fg-dim);
}
.rwx-diagram .rwx-group-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    fill: var(--fg-soft);
    letter-spacing: 0.1em;
    text-anchor: middle;
}
.rwx-diagram .rwx-group-total {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 700;
    fill: var(--accent);
    text-anchor: middle;
}
.rwx-diagram .rwx-summary {
    font-family: var(--font-mono);
    font-size: 16px;
    fill: var(--fg);
    text-anchor: middle;
}
.rwx-diagram .rwx-summary tspan.value {
    fill: var(--accent);
    font-weight: 600;
}

/* Arbre ASCII */
.tree {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--fg);
    overflow-x: auto;
    margin: 16px 0;
    white-space: pre;     /* préserve les sauts de ligne et l'indentation */
    tab-size: 4;
}
.tree .arrow { color: var(--fg-dim); }
.tree .desc { color: var(--fg-soft); }
.tree .dir { color: var(--accent); }


/* Résultats de recherche globale (page d'accueil) */
.search-results {
    margin: 16px 0;
}
.search-results[hidden] { display: none; }
.search-results .result {
    display: block;
    padding: 12px 16px;
    margin: 6px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    border-bottom: 1px solid var(--border);
}
.search-results .result:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}
.search-results .result-name {
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 600;
    margin-right: 10px;
}
.search-results .result-tag {
    color: var(--fg-soft);
    font-size: 0.9rem;
}
.search-results .result-cat {
    float: right;
    font-size: 0.72rem;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

/* Groupement par catégorie (recherche améliorée) */
.search-results .result-group + .result-group {
    margin-top: 18px;
}
.search-results .result-group-head {
    margin: 0 4px 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-weight: 500;
}
.search-results .result-group .result {
    margin: 4px 0;
}
/* État sélectionné (navigation clavier ↑ ↓) */
.search-results .result.selected {
    background: var(--bg-hover);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}


/* Index alphabétique (a-z.html) : ruban sticky + grille des entrées */
.alpha-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 12px 0 28px;
    padding: 8px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    position: sticky;
    top: calc(var(--topbar-h) + 6px);
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.alpha-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-bottom: none;
}
.alpha-link.disabled {
    color: var(--fg-dim);
    opacity: 0.4;
    cursor: default;
}

.alpha-group {
    margin: 0 0 32px;
    /* Espace pour topbar (sticky) + ruban (sticky) lors du scroll-into-view */
    scroll-margin-top: calc(var(--topbar-h) + 80px);
}
.alpha-letter {
    margin: 0 0 12px;
    padding-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 1.6rem;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
}
.alpha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.alpha-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    transition: background .12s, border-color .12s;
}
.alpha-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}
.alpha-item-name {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.95rem;
}
.alpha-item-desc {
    color: var(--fg-soft);
    font-size: 0.82rem;
    line-height: 1.35;
    margin-top: 3px;
}
.alpha-item-cat {
    color: var(--fg-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.alpha-item[hidden] { display: none; }
.alpha-group[hidden] { display: none; }


/* ---------- 12. Responsive ---------- */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .menu-btn { display: inline-flex; }

    .sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        bottom: 0;
        width: 280px;
        height: auto;
        background: var(--bg);
        border-right: 1px solid var(--border);
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .2s ease;
        padding: 20px;
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-overlay {
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        background: rgba(0,0,0,0.4);
        z-index: 35;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }
    .sidebar-overlay.show { opacity: 1; pointer-events: auto; }

    .main {
        padding: 24px 18px 60px;
        overflow-wrap: anywhere;
    }
    .cmd-head > * { min-width: 0; }

    /* Les options longues doivent tenir dans la carte, sans colonne nowrap. */
    .opts, .dirs { table-layout: fixed; }
    .opts th, .opts td,
    .dirs th, .dirs td {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .opts td:first-child,
    .dirs td:first-child {
        width: 35%;
        white-space: normal;
    }

    /* La recherche occupe l'espace restant sans repousser les actions. */
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar .spacer { display: none; }
    .topbar .brand { flex: none; }
    .topbar .brand-name { display: none; }
    .topbar .menu-btn,
    .topbar .topbar-link,
    .topbar .theme-btn {
        flex: none;
        width: 40px;
        height: 40px;
    }
    .search-wrap {
        position: static;
        transform: none;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
    .search-wrap kbd { display: none; }

    .cmd { padding: 16px 16px; }
    .cmd-head { gap: 8px; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    h1 { font-size: 1.45rem; }
    h2 { font-size: 1.2rem; }
    .main { padding: 18px 14px 40px; }
}


/* ---------- 13. Préférences utilisateur ---------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}


/* ---------- 14. Impression ----------
   Fiche imprimable : interface masquée, thème clair forcé même si
   data-theme="dark", pas d'ombres, pas de coupure au milieu d'une carte
   .cmd, et l'URL des liens externes apparaît entre parenthèses après leur
   texte. */
@media print {

    /* Forcer un thème clair quel que soit l'attribut data-theme actif.
       On redéfinit les variables sur les trois sélecteurs pour battre la
       spécificité de [data-theme="…"]. */
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"] {
        --bg:           #ffffff;
        --bg-soft:      #f5f5f0;
        --bg-card:      #ffffff;
        --bg-code:      #f7f7f2;
        --bg-hover:     #efefe8;
        --border:       #cccccc;
        --border-soft:  #dddddd;
        --fg:           #000000;
        --fg-soft:      #333333;
        --fg-dim:       #555555;
        --accent:       #006400;
        --accent-soft:  transparent;
        --warn:         #aa4400;
        --warn-soft:    transparent;
        --info:         #003388;
        --info-soft:    transparent;
        --link:         #003388;
        --shadow:       none;
        --highlight:    transparent;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }

    /* Indique au navigateur qu'on souhaite garder les couleurs définies
       (sinon Chrome retire fonds et couleurs en niveaux de gris). */
    body, .cmd, .syntax, .example, .note {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Masquer toute l'interface qui n'a aucun sens sur papier */
    .topbar,
    .sidebar,
    .sidebar-overlay,
    .menu-btn,
    .theme-btn,
    .search-wrap,
    .see-also,
    .copy-btn,
    .permalink,
    .no-results,
    .search-results {
        display: none !important;
    }

    /* Layout : pleine largeur, marges minimales */
    .layout {
        display: block;
        max-width: none;
    }
    .main {
        padding: 0;
    }
    .main > header.page-head {
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .main > header.page-head h1 svg { color: #006400; }

    /* Cartes .cmd : pas d'ombre, fond blanc, pas de coupure au milieu */
    .cmd {
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: none;
        padding: 12px 14px;
        margin: 10px 0;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .cmd-head {
        border-bottom: 1px dashed #ccc;
    }

    /* Eviter la coupure entre un titre et son contenu immédiat */
    h1, h2, h3, h4 {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Blocs de code lisibles en N&B */
    .syntax {
        background: #f7f7f2;
        border: 1px solid #ddd;
        border-left: 3px solid #006400;
        color: #000;
    }
    .example {
        background: #f7f7f2;
        border: 1px solid #ddd;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .example-cmd { color: #000; }
    .example-cmd .prompt { color: #006400; }
    .example-out {
        background: #fafaf3;
        border-top: 1px dashed #ccc;
        color: #333;
    }
    .example-explain {
        background: #f0f0e8;
        border-top: 1px solid #ddd;
        color: #333;
    }

    /* Permettre aux longues commandes de revenir à la ligne plutôt que
       d'être coupées par la marge droite de la page. */
    pre, .syntax, .example-cmd, .example-out {
        white-space: pre-wrap;
        word-break: break-word;
        overflow: visible;
    }

    /* Notes : garder une démarcation visuelle même sans couleur */
    .note {
        background: #f6f6f1;
        border-left: 3px solid #888;
        color: #000;
    }
    .note.warn { border-left-color: #aa4400; }
    .note.tip  { border-left-color: #006400; }

    /* Tableaux : bordures fines, pas de couper au milieu si possible */
    .opts, .dirs {
        border: 1px solid #ccc;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .opts th, .dirs th {
        background: #f0f0e8;
        color: #333;
    }

    /* Marquage de recherche : neutralisé (sortie figée à l'impression) */
    mark.hl {
        background: transparent;
        color: inherit;
    }

    /* Badges : forme conservée, neutralisée */
    .badge {
        background: transparent;
        border-color: #888;
        color: #000;
    }
    .badge.root { color: #aa4400; border-color: #aa4400; }

    /* Liens : afficher l'URL entre parenthèses après le texte.
       On exclut les ancres internes (commençant par #) qui sont sans
       intérêt sur papier, et les liens vides. */
    a[href]:not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
    }

    /* Sécurité : si la topbar / sidebar n'étaient pas masquées (ou pour
       les futures pages), on neutralise quand même leurs URL. */
    .topbar a::after,
    .sidebar a::after,
    .permalink::after { content: none !important; }

    /* Petits raffinements typographiques */
    a { color: #003388; border-bottom: none; }

    /* Carte de l'accueil : on la laisse en grille mais sans ombre */
    .cat-grid {
        gap: 10px;
    }
    .cat-card {
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Index alphabétique : ruban non sticky, groupes insécables */
    .alpha-ribbon {
        position: static;
        background: transparent;
        border: 1px solid #ddd;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .alpha-group {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .alpha-item {
        background: #fff;
        border: 1px solid #ddd;
    }
}