/* =============================================================
 * OSM — Design system 2026.04
 * Inspiré du mockup "One Shot Message — VariationA"
 * ============================================================= */

@import url('./fonts.css');

:root,
[data-theme="dark"] {
    --bg: #0B0F0D;
    --surface-grad: linear-gradient(180deg, rgba(22,31,27,0.300), #131a17ce);
    --surface-card: #101613;
    --surface-solid: #161f1b;
    --surface-2: #1c2622;
    --surface-3: #263429;

    --border: #222e29;
    --border-strong: #293830;
    --border-strong-2: #364540;

    --accent: #5EE29B;
    /* Canal de --accent : les teintes en dérivent, elles suivent donc le thème. */
    --accent-rgb: 94, 226, 155;
    --accent-bg: rgba(var(--accent-rgb), 0.08);
    --accent-border: rgba(var(--accent-rgb), 0.25);
    --accent-soft: rgba(var(--accent-rgb), 0.04);
    --accent-shadow: rgba(var(--accent-rgb), 0.2);
    --accent-hover: #8eecb6;
    /* --accent tient 11,2:1 sur la carte sombre : lisible tel quel en texte. */
    --accent-text: #5EE29B;
    --accent-text-hover: #8eecb6;
    --on-accent: #1a1410;

    --text: #E6F0EA;
    --text-2: #A8B5AE;
    --muted: #6B7A74;

    --warning: #E39B5E;
    --warning-bg: rgba(227, 155, 94, 0.08);
    --warning-border: rgba(227, 155, 94, 0.25);
    --warning-grad: linear-gradient(180deg, #2a1a10, #18110b);

    --info: #7CC4FF;
    --info-bg: rgba(124, 196, 255, 0.08);
    --info-border: rgba(124, 196, 255, 0.25);

    --gold: #B8A47A;
    --gold-bg: rgba(184, 164, 122, 0.1);
    --gold-border: rgba(184, 164, 122, 0.25);

    --amber: #E3C65E;
    --amber-bg: rgba(227, 198, 94, 0.08);
    --amber-border: rgba(227, 198, 94, 0.25);

    --danger: #FF5C5C;
    --danger-bg: rgba(255, 92, 92, 0.08);
    --danger-border: rgba(255, 92, 92, 0.25);

    --brand-mark-bg: radial-gradient(circle at 30% 30%, #1f3028, #0e1612);
    --brand-mark-border: #1f3028;

    --hover-tint: rgba(255,255,255,0.02);
    --card-footer-bg: rgba(22, 31, 27, 0.4);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-2xl: 14px;
    --r-3xl: 16px;
    --r-full: 999px;
}

[data-theme="light"] {
    --bg: #fcfcfc;
    --surface-grad: linear-gradient(180deg, #e9eeeb2d, #e3e7e580);
    --surface-card: #F5F6F5;
    --surface-solid: #FFFFFF;
    --surface-2: #E3E7E5;
    --surface-3: #D4DAD7;

    --border: #CDD5D1;
    --border-strong: #BBC7C2;
    --border-strong-2: #A5B2AD;

    --accent: #32d46d;
    /* Le canal portait encore l'accent SOMBRE (94, 226, 155) : les teintes claires
       tiraient donc vers le froid, à côté de l'accent qu'elles accompagnent. */
    --accent-rgb: 50, 212, 109;
    --accent-bg: rgba(var(--accent-rgb), 0.14);
    --accent-border: rgba(var(--accent-rgb), 0.45);
    --accent-soft: rgba(var(--accent-rgb), 0.08);
    --accent-shadow: rgba(var(--accent-rgb), 0.25);
    --accent-hover: #28c55f;
    /* Écart assumé : --accent en TEXTE ne donne que 1,8:1 sur la carte claire.
       Émeraude assombrie à 4,6:1 (AA) pour le seul texte en accent ; les aplats
       et les filets gardent --accent. Même valeur que SysMeek - Support. */
    --accent-text: #17803f;
    --accent-text-hover: #0f6430; /* 6,7:1 : sur fond clair, le survol assombrit */
    --on-accent: #0E1612;

    --text: #15201B;
    --text-2: #56625C;
    /* Écart : #7E8A84 ne donnait que 3,5:1 sur --bg, sous le seuil AA. 4,75:1 ici,
       en restant un cran au-dessus de --text-2 pour garder les trois niveaux. */
    --muted: #68746E;

    --warning: #CF8740;
    --warning-bg: rgba(207, 135, 64, 0.10);
    --warning-border: rgba(207, 135, 64, 0.35);
    --warning-grad: linear-gradient(180deg, #FFF0E0, #FFE5CC);

    --info: #4A8FCF;
    --info-bg: rgba(74, 143, 207, 0.10);
    --info-border: rgba(74, 143, 207, 0.35);

    --gold: #9C8553;
    --gold-bg: rgba(156, 133, 83, 0.10);
    --gold-border: rgba(156, 133, 83, 0.35);

    --amber: #B89422;
    --amber-bg: rgba(184, 148, 34, 0.10);
    --amber-border: rgba(184, 148, 34, 0.35);

    --danger: #E04545;
    --danger-bg: rgba(224, 69, 69, 0.10);
    --danger-border: rgba(224, 69, 69, 0.35);

    /* Radial partant de --brand-mark-border, comme en sombre : une seule
       construction pour la tuile de marque. Le linéaire partait de #F5F6F5, soit
       --surface-card : dans une carte la tuile disparaissait. */
    --brand-mark-bg: radial-gradient(circle at 30% 30%, #CDD5D1, #E3E7E5);
    --brand-mark-border: #CDD5D1;

    --hover-tint: rgba(0,0,0,0.035);
    --card-footer-bg: rgba(0, 0, 0, 0.025);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-2xl: 14px;
    --r-3xl: 16px;
    --r-full: 999px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-text-hover); }
a:focus { outline: none; }

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

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

.mono { font-family: var(--mono); }
.center { text-align: center; }
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
/* Cellule de donnée machine : la paire mono + 12 px est la déclaration en
   ligne la plus répandue du projet. Se compose avec .text-2 et .muted. */
.mono-sm { font-family: var(--mono); font-size: 12px; }
/* Paragraphe d'explication en tête de corps de carte. La dernière marge
   tombe d'elle-même : plus de margin:0 en ligne selon la position. */
.osm-note { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.osm-note:last-child { margin-bottom: 0; }

/* ---------- Shell ---------- */
.osm-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    flex: 1;
}

.osm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------- Header ---------- */
.osm-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.osm-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.osm-brand-mark {
    width: 64px;
    height: 64px;
    border-radius: var(--r-lg);
    background: var(--brand-mark-bg);
    border: 1px solid var(--brand-mark-border);
    display: grid;
    place-items: center;
    color: var(--accent-text);
}
.osm-brand-mark img {
    /*width: 32px;*/
    height: 32px;
}
.osm-brand-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.1px;
    line-height: 1.2;
}
.osm-brand-sub {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    margin-top: 2px;
}
.osm-header-aside {
    display: flex;
    align-items: center;
    gap: 10px;
}
.osm-status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-full);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    font-size: 11px;
    font-family: var(--mono);
}
.osm-status-pill .osm-status-dot {
    width: 6px; height: 6px;
    border-radius: var(--r-full);
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}
.osm-brand-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--gold);
    box-shadow: 0 0 0 1px rgba(184,164,122,0.15);
}
.osm-brand-pill-mark {
    height: 32px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--on-accent);
    font-family: var(--font);
}
.osm-brand-pill-mark img {
    height: 32px;
    object-fit: contain;
    border-radius: var(--r-sm);
}
.osm-brand-pill-label {
    font-size: 13px;
    color: var(--gold);
    font-family: var(--mono);
}

/* ---------- Nav ---------- */
.osm-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-xl);
    align-self: flex-start;
    flex-wrap: wrap;
}
.osm-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: color .15s, background .15s, border-color .15s;
    cursor: pointer;
}
.osm-nav-item:hover {
    color: var(--text-2);
    background: var(--hover-tint);
}
.osm-nav-item.is-active {
    border-color: var(--accent-border);
    background: var(--accent-bg);
    color: var(--accent-text);
    font-weight: 500;
}
.osm-nav-item.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.osm-nav-icon { display: inline-flex; }
.osm-nav-icon svg { display: block; }

/* ---------- Footer ---------- */
.osm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
}
.osm-footer a { color: var(--accent-text); }

/* ---------- Page header ---------- */
.osm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
    gap: 20px;
    flex-wrap: wrap;
}
.osm-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-text);
    font-family: var(--mono);
    margin-bottom: 6px;
}
.osm-page-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.4px;
}
.osm-page-subtitle {
    font-size: 13px;
    color: var(--text-2);
    margin: 8px 0 0;
    line-height: 1.5;
    max-width: 580px;
}
.osm-page-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ---------- Cards ---------- */
.osm-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-3xl);
    overflow: hidden;
}
.osm-card-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.osm-card-body {
    padding: 22px;
}
.osm-card-body--dense {
    padding: 18px 22px;
}
.osm-card-footer {
    padding: 12px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--card-footer-bg);
}

/* Section title (uppercase mono) */
.osm-section-title {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: var(--mono);
    margin: 0 0 12px;
}

/* Stat grid */
.osm-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.osm-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.osm-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.osm-stat-card {
    padding: 18px;
    background: var(--surface-grad);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
}
.osm-stat-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--mono);
}
.osm-stat-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
}
.osm-stat-value strong {
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.5px;
}
.osm-stat-value .delta {
    font-size: 11px;
    color: var(--accent-text);
    font-family: var(--mono);
}
.osm-stat-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

/* ---------- Tables ---------- */
.osm-table-wrap {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    overflow: hidden;
}
.osm-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    margin: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.osm-table thead {
    position: static;
    background: transparent;
}
.osm-table th {
    padding: 12px 20px;
    background: transparent;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--mono);
    font-weight: 500;
    white-space: nowrap;
}
.osm-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    vertical-align: middle;
}
.osm-table tr { background: transparent; color: var(--text); white-space: normal; }
.osm-table tr:last-child td { border-bottom: none; }
.osm-table tr:nth-child(odd), .osm-table tr:nth-child(even) {
    background: transparent;
    color: inherit;
}
.osm-table tr:hover td { background: var(--hover-tint); }
.osm-table-empty {
    padding: 60px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ---------- Pills ---------- */
.osm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-family: var(--mono);
    width: fit-content;
    border: 1px solid transparent;
}
.osm-pill-dot {
    width: 6px; height: 6px;
    border-radius: var(--r-full);
    background: currentColor;
}
.osm-pill--read { color: var(--accent-text); background: var(--accent-bg); border-color: var(--accent-border); }
.osm-pill--pending { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); }
.osm-pill--pending .osm-pill-dot { box-shadow: 0 0 6px var(--amber); }
.osm-pill--expired { color: var(--muted); background: rgba(107,122,116,0.08); border-color: rgba(107,122,116,0.25); }
.osm-pill--revoked { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.osm-pill--info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.osm-pill--gold { color: var(--gold); background: var(--gold-bg); border-color: var(--gold-border); }
.osm-pill--accent { color: var(--accent-text); background: var(--accent-bg); border-color: var(--accent-border); }

/* small label tag (uppercase) */
.osm-tag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    font-family: var(--mono);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.osm-tag--accent { color: var(--accent-text); background: var(--accent-bg); border-color: var(--accent-border); }
.osm-tag--info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.osm-tag--amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); }
.osm-tag--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
/* Complète la série : le rouge était le seul niveau de gravité sans variante,
   ce qui obligeait à peindre un refus en vert (--accent) ou en orange. */
.osm-tag--danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

/* ---------- Segmented control ---------- */
.osm-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-lg);
    background: var(--surface-solid);
    border: 1px solid var(--border);
}
.osm-segmented button,
.osm-segmented a {
    padding: 7px 14px;
    text-align: center;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.osm-segmented button:hover,
.osm-segmented a:hover { color: var(--text-2); }
.osm-segmented button.is-active,
.osm-segmented a.is-active {
    background: var(--surface-3);
    color: var(--accent-text);
}
.osm-segmented--mono button,
.osm-segmented--mono a {
    font-family: var(--mono);
    font-size: 11px;
    padding: 5px 10px;
}

/* ---------- Inputs ---------- */
.osm-input,
.osm-textarea,
.osm-select {
    width: 100%;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 11px 14px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-shadow: none;
    transition: border-color .15s, background .15s;
}
.osm-input:focus,
.osm-textarea:focus,
.osm-select:focus { border-color: var(--accent); }
.osm-input:disabled,
.osm-textarea:disabled,
.osm-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.osm-textarea {
    min-height: 240px;
    resize: vertical;
    line-height: 1.6;
    font-size: 14px;
}
.osm-input.is-invalid { border-color: var(--warning); }
.osm-input.is-valid { border-color: var(--accent); }

.osm-input-wrap {
    display: flex;
    align-items: center;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 0 4px 0 12px;
    transition: border-color .15s;
}
.osm-input-wrap:focus-within { border-color: var(--accent); }
.osm-input-wrap.is-invalid { border-color: var(--warning); }
.osm-input-wrap .osm-input-prefix {
    color: var(--muted);
    font-size: 13px;
    padding-right: 10px;
    border-right: 1px solid var(--border);
    margin-right: 4px;
    display: flex;
    align-items: center;
    height: 22px;
    font-family: var(--mono);
}
.osm-input-wrap input,
.osm-input-wrap select {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.osm-field {
    margin-bottom: 16px;
}
.osm-field label {
    display: block;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 6px;
    font-weight: 500;
}
.osm-field .osm-hint {
    font-size: 11px;
    color: var(--muted);
    margin: 6px 2px 0;
}
.osm-field .osm-error {
    font-size: 11px;
    color: var(--warning);
    margin: 6px 2px 0;
}

.osm-counter {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    text-align: right;
    margin-top: 10px;
}
.osm-counter.is-warning { color: var(--warning); }

/* ---------- Buttons ---------- */
.osm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-strong-2);
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: filter .15s, color .15s, border-color .15s, background .15s;
}
.osm-btn:hover { filter: brightness(1.1); color: var(--text); }
.osm-btn:focus { outline: none; }
.osm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.osm-btn--primary {
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    box-shadow: 0 4px 14px var(--accent-shadow);
}
.osm-btn--primary:hover { color: var(--on-accent); }

.osm-btn--ghost {
    background: transparent;
    border-color: var(--border-strong-2);
    color: var(--text-2);
}
.osm-btn--danger {
    background: transparent;
    border-color: var(--warning);
    color: var(--warning);
}
.osm-btn--danger:hover { color: var(--warning); background: var(--warning-bg); }
.osm-btn--block { width: 100%; padding: 14px; font-size: 14px; }
.osm-btn--lg { padding: 13px 22px; font-size: 13px; }
.osm-btn--sm { padding: 6px 12px; font-size: 11px; }

.osm-icon-btn {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: color .15s, border-color .15s, background .15s;
}
.osm-icon-btn:hover { color: var(--text); border-color: var(--border-strong-2); }
.osm-icon-btn.is-danger { color: var(--warning); }

/* ---------- Toggle ---------- */
.osm-toggle {
    width: 40px; height: 22px;
    border-radius: var(--r-full);
    border: none;
    background: var(--border-strong-2);
    position: relative;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s;
}
.osm-toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: var(--r-full);
    background: var(--muted);
    transition: left .2s, background .2s;
}
.osm-toggle.is-on { background: var(--accent); }
.osm-toggle.is-on::after { left: 20px; background: var(--bg); }
.osm-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.osm-toggle input { display: none; }

/* Option row */
.osm-option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.osm-option-row.is-last { border-bottom: none; }
.osm-option-row .osm-option-title {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.osm-option-row .osm-option-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

/* ---------- Delivery card (Envoi: E-mail / Lien à copier) ---------- */
.osm-delivery {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.osm-delivery-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface-solid);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    width: 100%;
}
.osm-delivery-card:hover { border-color: var(--border-strong-2); }
.osm-delivery-card.is-active {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.06);
}
.osm-delivery-card-icon {
    width: 34px; height: 34px;
    border-radius: var(--r-md);
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--muted);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: color .15s, border-color .15s, background .15s;
}
.osm-delivery-card.is-active .osm-delivery-card-icon {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: var(--accent-text);
}
.osm-delivery-card-body { flex: 1; }
.osm-delivery-card-title { font-size: 13px; font-weight: 500; color: var(--text); }
.osm-delivery-card-sub { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.osm-delivery-card-radio {
    width: 16px; height: 16px;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border-strong-2);
    flex-shrink: 0;
    transition: border-color .15s, box-shadow .15s;
}
.osm-delivery-card.is-active .osm-delivery-card-radio {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px var(--accent);
}

/* Dashed info card */
.osm-dash-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    border: 1px dashed var(--accent-border);
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
}
.osm-dash-info svg { color: var(--accent-text); flex-shrink: 0; }

/* Security card (sous textarea) */
.osm-security {
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--r-xl);
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
}
.osm-security-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.osm-security-head span {
    font-size: 11px;
    color: var(--accent-text);
    font-family: var(--mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.osm-security ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}
.osm-security ul li {
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.osm-security ul li::before {
    content: "";
    width: 4px; height: 4px;
    border-radius: var(--r-full);
    background: var(--accent);
    flex-shrink: 0;
}

/* Drop zone for file */
.osm-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 240px;
    border-radius: var(--r-xl);
    border: 1px dashed var(--border-strong-2);
    background: var(--surface-solid);
    padding: 24px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.osm-dropzone:hover { border-color: var(--accent); }
.osm-dropzone--drag { border-color: var(--accent); border-style: solid; background: var(--accent-bg); }
.osm-dropzone-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-xl);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    display: grid;
    place-items: center;
    color: var(--accent-text);
}
.osm-dropzone-title { color: var(--text); font-size: 15px; font-weight: 500; text-align: center; }
.osm-dropzone-title em { font-style: normal; color: var(--accent-text); }
.osm-dropzone-hint { color: var(--muted); font-size: 12px; margin-top: 6px; font-family: var(--mono); text-align: center; }
.osm-dropzone input[type=file] { display: none; }

/* ---------- Avatar ---------- */
.osm-avatar {
    width: 34px; height: 34px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--bg);
    font-family: var(--font);
    flex-shrink: 0;
}
.osm-avatar--lg { width: 64px; height: 64px; border-radius: var(--r-3xl); font-size: 22px; }
.osm-avatar--sm { width: 28px; height: 28px; border-radius: var(--r-md); font-size: 11px; }

/* ---------- Banners ---------- */
.osm-banner {
    padding: 12px 16px;
    border-radius: var(--r-xl);
    margin-bottom: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
}
.osm-banner--success { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-text); }
.osm-banner--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.osm-banner--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.osm-banner--error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.osm-banner--spaced { margin-bottom: 16px; }

/* legacy: keep old class names so unmigrated PHP fragments still render */
div.confirm { background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-text); padding: 12px 16px; border-radius: var(--r-xl); margin: 16px auto; max-width: 800px; box-shadow: none; }
div.warning { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); padding: 12px 16px; border-radius: var(--r-xl); margin: 16px auto; max-width: 800px; box-shadow: none; }
div.error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); padding: 12px 16px; border-radius: var(--r-xl); margin: 16px auto; max-width: 800px; box-shadow: none; }

/* ---------- Loading overlay ---------- */
.loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 13, 0.85);
    backdrop-filter: blur(6px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.loading.active { display: flex; }
.loading-spinner {
    width: 64px; height: 64px;
    border: 4px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .75s linear infinite;
}
.loading-text {
    color: var(--accent-text);
    font-size: 13px;
    font-family: var(--mono);
    letter-spacing: 1px;
    margin: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Modal ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
}
.modal:target { display: table; position: fixed; }
.modal-dialog { display: table-cell; vertical-align: middle; padding: 24px; }
.osm-modal-content,
.modal_mentions-content,
.modal_beta-content,
.modal_userchange-content {
    margin: auto;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2xl);
    padding: 0;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    color: var(--text);
    text-align: left;
    animation: slideDownFadeIN .25s ease-out;
}
.modal_beta-content { max-width: 580px; }
.modal_userchange-content { max-width: 460px; background: var(--warning-grad); border-color: var(--warning-border); }
.modal-container { padding: 18px 24px; }
.modal-container.center { text-align: center; }
/* Modale mentions / RGPD : contenu long => corps défilant, en-tête fixe */
.modal_mentions-content {
    max-height: calc(100vh - 48px); /* 48px = padding 24px haut+bas de .modal-dialog */
    display: flex;
    flex-direction: column;
    overflow: hidden;               /* le scroll interne reste dans les coins arrondis */
}
.modal_mentions-content .modal-container {
    flex: 1 1 auto;
    min-height: 0;                  /* indispensable pour qu'un enfant flex défile */
    overflow-y: auto;
}
.modal_mentions-header,
.modal_userchange-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    border-top-left-radius: var(--r-2xl);
    border-top-right-radius: var(--r-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal_mentions-header h2,
.modal_userchange-header h2 {
    margin: 0;
    font-size: 14px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text);
    font-weight: 500;
}
.modal-closebtn, .modal-closebtn:link, .modal-closebtn:visited {
    text-decoration: none !important;
    font-size: 22px;
    color: var(--muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    transition: color .15s, border-color .15s;
}
.modal-closebtn:hover { color: var(--text); border-color: var(--border-strong-2); cursor: pointer; }
@keyframes slideDownFadeIN { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Account / tabs ---------- */
.osm-tabs { width: 100%; }
.osm-tabs-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: flex-start;
    flex: 1;
}
.osm-tab-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: none;
    justify-content: flex-start;
}
.osm-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-lg);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    font-weight: 400;
    transition: color .15s, background .15s, border-color .15s;
    width: 100%;
}
.osm-tab-btn:hover { color: var(--text); }
.osm-tab-btn.active {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent-border);
    font-weight: 500;
}
.osm-tab-content { display: none; }
.osm-tab-content.active { display: block; }

/* ---------- Login centered card ---------- */
.osm-center-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.osm-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-3xl);
    padding: 32px;
}
.osm-auth-head {
    text-align: center;
    margin-bottom: 24px;
}
/* Logo du groupe expéditeur, en tête des cartes invité : bandeau large
   (450x150 max à l'upload), d'où la contrainte sur les deux axes. */
.osm-auth-logo {
    display: grid;
    place-items: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.osm-auth-logo img {
    max-width: 200px;
    max-height: 48px;
    object-fit: contain;
}
.osm-auth-icon {
    width: 56px; height: 56px;
    border-radius: var(--r-3xl);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    display: grid;
    place-items: center;
    color: var(--accent-text);
    margin: 0 auto 16px;
}
.osm-auth-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.osm-auth-sub {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}
.osm-auth-foot {
    text-align: center;
    margin-top: 16px;
}
.osm-auth-link {
    color: var(--accent-text);
    font-size: 13px;
    text-decoration: none;
}
.osm-auth-link:hover {
    text-decoration: underline;
}
.osm-input--otp {
    text-align: center;
    letter-spacing: 6px;
    font-size: 18px;
}

.mfa-separator {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    font-family: var(--mono);
    letter-spacing: 1.5px;
    margin: 14px 0;
    text-transform: uppercase;
}
.button-mfa-key {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--accent);
    background: var(--accent-bg);
    color: var(--accent-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: filter .15s;
}
.button-mfa-key:hover { filter: brightness(1.1); }
.mfa-summary {
    font-size: 12px;
    color: var(--text-2);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Hero / accueil ---------- */
.osm-hero {
    text-align: center;
    padding: 40px 20px 24px;
}
.osm-hero-title {
    font-size: 40px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.1;
}
.osm-hero-title em { color: var(--accent-text); font-style: normal; }
.osm-hero-sub {
    font-size: 16px;
    color: var(--text-2);
    margin: 16px auto 0;
    max-width: 640px;
    line-height: 1.6;
}
.osm-hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.osm-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
/* Quatre cartes dans une grille à trois colonnes laissent une orpheline sur la
   seconde ligne : ce modificateur les répartit en 2x2. Même logique que
   .osm-stat-grid--2. La descente en colonne unique est dans la media query. */
.osm-feature-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}
.osm-feature {
    padding: 22px;
    border-radius: var(--r-2xl);
    background: var(--surface-card);
    border: 1px solid var(--border);
}
.osm-feature-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-lg);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}
.osm-feature-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
}
.osm-feature-text {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}
/* Carte de fonctionnalité rendue cliquable (accueil) : mène au point correspondant
   de la page Sécurité. Le modificateur est nécessaire car securite.php réutilise
   .osm-feature en simple bloc de texte, qui ne doit pas réagir au survol.
   color:inherit neutralise la règle globale a:hover, et :focus-visible compense
   le a:focus{outline:none} général : la carte devient un lien, elle doit se voir
   quand elle prend le focus au clavier. */
.osm-feature--link {
    display: block;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease;
}
.osm-feature--link:hover { color: inherit; border-color: var(--border-strong-2); }
.osm-feature--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sections de securite.php atteintes par une ancre venue de l'accueil : la bordure
   clignote trois fois pour signaler le point d'arrivée, puis retombe sur le liseré
   accent fixe, qui persiste tant que le fragment reste dans l'URL. Sélecteurs
   disjoints de .modal:target, aucun conflit. */
.osm-feature[id], .osm-card[id] { scroll-margin-top: 24px; }
.osm-feature:target, .osm-card:target {
    border-color: var(--accent-border);
    animation: osm-target-pulse .7s ease-in-out 3;
}
@keyframes osm-target-pulse {
    0%, 100% { border-color: var(--accent-border); box-shadow: 0 0 0 0 transparent; }
    50%      { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
}
/* Le clignotement n'est qu'un repère d'arrivée : sans lui, le liseré fixe suffit. */
@media (prefers-reduced-motion: reduce) {
    .osm-feature:target, .osm-card:target { animation: none; }
}

/* ---------- Success screen (post-envoi) ---------- */
.osm-success {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}
.osm-success-icon {
    width: 72px; height: 72px;
    border-radius: var(--r-full);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    display: grid;
    place-items: center;
    color: var(--accent-text);
    box-shadow: 0 0 40px var(--accent-shadow);
}
.osm-success-title {
    font-size: 26px;
    font-weight: 600;
    margin: 6px 0 10px;
    color: var(--text);
    letter-spacing: -0.4px;
    text-align: center;
}
.osm-success-text {
    font-size: 14px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.6;
    text-align: center;
    max-width: 560px;
}
.osm-link-box {
    width: 100%;
    max-width: 640px;
    display: flex;
    gap: 8px;
    padding: 6px;
    background: var(--surface-solid);
    border: 1px solid var(--accent-border);
    border-radius: var(--r-xl);
}
.osm-link-box code {
    flex: 1;
    padding: 12px 14px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: none;
}
.osm-link-box .osm-btn { min-width: 120px; }

.osm-meta-line {
    display: flex;
    gap: 24px;
    padding: 8px 0;
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- File chooser inline ---------- */
.label_data, .label_logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--accent-text);
    font-weight: 500;
    padding: 11px 16px;
    border-radius: var(--r-lg);
    background: var(--accent-bg);
    border: 1px dashed var(--accent-border);
    font-size: 13px;
    transition: filter .15s;
    width: auto;
    height: auto;
}
.label_data:hover, .label_logo:hover { filter: brightness(1.1); }
.label_data_span, .label_logo_span { display: inline; }
input.data_file, input.logo_file { display: none; }
.label_data_file, .label_logo_file { border-color: var(--accent); border-style: solid; }

/* ---------- Pagination ---------- */
nav { display: inline-block; }
.pagination {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 4px;
    margin: 0;
}
.pagination-item { margin: 0; }
.pagination-item a {
    padding: 6px 12px;
    border-radius: var(--r-md);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-family: var(--mono);
    display: inline-block;
    transition: color .15s, border-color .15s, background .15s;
}
.pagination-item a:hover { color: var(--text); border-color: var(--border-strong-2); }
.pagination-item.active a {
    color: var(--accent-text);
    background: var(--accent-bg);
    border-color: var(--accent-border);
    font-weight: 600;
}
.pagination-item.disabled a {
    color: var(--muted);
    pointer-events: none;
    opacity: 0.4;
}

/* ---------- Misc ---------- */
.osm-dev-badge {
    color: var(--warning);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--mono);
}
.osm-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
.osm-inline-block { display: inline-block; vertical-align: middle; }
.osm-block { display: block; width: 100%; }
.disabled { pointer-events: none; opacity: 0.4; }

/* Username suffix input (compte > users) */
.input-username-suffix {
    position: relative;
    display: inline-block;
}
.input-username-suffix::after {
    content: var(--suffix-text, "");
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
}
.input-username-suffix input { padding-right: 60px; }

/* "Suppr" button used by older flows */
.button-suppr {
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--warning);
    display: grid;
    place-items: center;
    transition: border-color .15s, background .15s;
}
.button-suppr:hover { border-color: var(--warning-border); background: var(--warning-bg); }
.button-suppr i { font-size: 16px !important; line-height: 1 !important; color: var(--warning) !important; }
.button-suppr svg { width: 14px; height: 14px; }

/* Error page (autonome) */
.osm-error-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 24px;
    text-align: center;
}
.osm-error-code {
    font-family: var(--mono);
    font-size: 96px;
    line-height: 1;
    color: var(--accent-text);
    margin: 0;
}
.osm-error-text {
    font-size: 18px;
    color: var(--text);
    max-width: 560px;
    line-height: 1.5;
    margin: 0;
}
.osm-error-img {
    max-height: 360px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
}

/* table-full (old class kept for compatibility but neutralized) */
.table-full { width: 100%; background: transparent; border: none; box-shadow: none; }
.input-table input { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--r-md); font-size: 12px; font-family: inherit; outline: none; box-shadow: none; }
.input-table input:focus { border-color: var(--accent); }
.input-table input.modified { border-color: var(--warning) !important; }
.invalid { border-color: var(--warning) !important; }
.valid { border-color: var(--accent) !important; }

/* Switch legacy */
.switch {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 22px;
    cursor: pointer;
    overflow: hidden;
    border: none;
    border-radius: var(--r-full);
    background: var(--border-strong-2);
    box-shadow: none;
}
.switch input { display: none; }
.switch input + span { position: absolute; inset: 0; }
.switch input:checked + span { background: var(--accent); border-radius: var(--r-full); }
.switch input + span::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--muted);
    border-radius: var(--r-full);
    transition: left .2s, background .2s;
}
.switch input:checked + span::before { left: 20px; background: var(--bg); }

/* osm-url legacy (success link box style) */
div.osm-url {
    padding: 12px 14px;
    color: var(--accent-text);
    font-family: var(--mono);
    font-size: 13px;
    max-width: 800px;
    margin: 16px auto;
    border: 1px solid var(--accent-border);
    background: var(--surface-solid);
    border-radius: var(--r-xl);
    word-break: break-all;
    box-shadow: none;
}

/* Copy confirmation */
.copyConfirmation {
    display: none;
    font-weight: 600;
    color: var(--accent-text);
    margin-left: 6px;
}
/* Sur un bouton primaire, l'accent EST le fond : le ✓ en --accent-text s'y
   confondait (identique au dégradé en thème sombre). On suit la couleur du
   bouton, seule garantie de contraste sur son propre fond. */
.osm-btn--primary .copyConfirmation { color: inherit; }

/* MFA / WebAuthn list */
.osm-mfa-list { display: flex; flex-direction: column; gap: 10px; }
.osm-mfa-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface-solid);
}
.osm-mfa-row-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    color: var(--muted);
    display: grid;
    place-items: center;
}
.osm-mfa-row.is-on .osm-mfa-row-icon {
    color: var(--accent-text);
    background: var(--accent-bg);
    border-color: var(--accent-border);
}
.osm-mfa-row-body { flex: 1; }
.osm-mfa-row-name { font-size: 13px; color: var(--text); font-weight: 500; }
.osm-mfa-row-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Grille formulaire d'envoi */
.osm-send-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 16px;
    align-items: start;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1500px) {
    /* Colonne IP : tronquée sur écrans verticaux PC (ex. 2560×1440 portrait) */
    .col-ip {
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 768px) {
    /* Formulaire send : empilement vertical des étapes */
    .osm-send-grid {
        grid-template-columns: 1fr;
    }

    /* En-tête étape 1 : titre + onglets Message/Fichier en wrap */
    .osm-send-grid .osm-card-body > div:first-child {
        flex-wrap: wrap;
    }

    /* Option rows : select pleine largeur */
    .osm-option-row {
        flex-wrap: wrap;
    }
    .osm-option-row .osm-select {
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .osm-shell {
        padding: 20px 20px 16px;
    }

    /* Grilles : 4 cols → 2 cols */
    .osm-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .osm-stat-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .osm-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero */
    .osm-hero-title {
        font-size: 28px;
    }

    /* Tabs : 2 colonnes → 1 colonne */
    .osm-tabs-grid {
        grid-template-columns: 1fr;
    }

    /* Tableaux : scroll horizontal */
    .osm-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
    }
    .osm-table {
        min-width: 580px;
    }
    .osm-table th {
        white-space: normal;
    }

    /* Colonne IP : tronquée à mi-chemin */
    .col-ip {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 600px) {
    .osm-shell {
        padding: 14px 14px 12px;
    }

    /* Grilles : réduction supplémentaire */
    .osm-stat-grid--2 {
        grid-template-columns: 1fr;
    }
    .osm-feature-grid,
    .osm-feature-grid--2 {
        grid-template-columns: 1fr;
    }

    /* Typographie */
    .osm-hero-title {
        font-size: 22px;
    }
    .osm-page-title {
        font-size: 20px;
    }

    /* Navigation : icônes seules */
    .osm-nav-item span:last-child {
        display: none;
    }

    /* Header : passage en wrap si nécessaire */
    .osm-header-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Footer : colonne verticale */
    .osm-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Auth card : moins de padding */
    .osm-auth-card {
        padding: 20px;
    }

    /* Masquer la colonne IP sur petit écran */
    .col-ip {
        display: none;
    }
}

/* ---------- Theme toggle ---------- */
.osm-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s, transform .15s;
    padding: 0;
}
.osm-theme-toggle:hover {
    color: var(--accent-text);
    border-color: var(--accent-border);
    background: var(--accent-bg);
}
.osm-theme-toggle:focus-visible {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-shadow);
}
.osm-theme-toggle-sun,
.osm-theme-toggle-moon {
    display: none;
    line-height: 0;
}
[data-theme="dark"] .osm-theme-toggle-sun { display: inline; }
[data-theme="light"] .osm-theme-toggle-moon { display: inline; }

/* ---------- Radio row (theme selector & co.) ---------- */
.osm-radio-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.osm-radio-row label {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.osm-radio-row label:hover {
    color: var(--text);
    border-color: var(--border-strong);
}
.osm-radio-row label:has(input:checked) {
    border-color: var(--accent-border);
    background: var(--accent-bg);
    color: var(--accent-text);
}
.osm-radio-row input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
/* Ring + gap + dot painted as ONE radial-gradient (no CSS border) so the dot
   can never be off-centre relative to the ring, in any browser at any zoom. */
.osm-radio-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        var(--surface-solid) 0 6.5px,
        var(--border-strong-2) 7.5px);
    transition: background .15s ease;
}
.osm-radio-row label:has(input:checked) .osm-radio-dot {
    background: radial-gradient(circle at center,
        var(--accent) 0 3.5px,
        var(--surface-solid) 4.5px 6.5px,
        var(--accent) 7.5px);
}
.osm-radio-row input[type="radio"]:focus-visible ~ .osm-radio-dot {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.osm-radio-row label svg {
    flex: 0 0 auto;
}

/* End */

/* Radio cards: transmission mode (step 2, send page) */
.osm-radio-cards{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.osm-radio-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    background:var(--surface-solid);
    cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease;
}
.osm-radio-card:hover{
    border-color:var(--border-strong-2);
}
.osm-radio-card.is-selected,
.osm-radio-card:has(.osm-radio-card-input:checked){
    border-color:var(--accent);
    background:var(--accent-bg);
}
.osm-radio-card-input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
    margin:0;
    pointer-events:none;
}
.osm-radio-card-icon{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:var(--surface-2);
    color:var(--muted);
}
.osm-radio-card.is-selected .osm-radio-card-icon,
.osm-radio-card:has(.osm-radio-card-input:checked) .osm-radio-card-icon{
    background:var(--accent-bg);
    color:var(--accent-text);
}
.osm-radio-card-main{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.osm-radio-card-title{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    letter-spacing:-0.2px;
}
.osm-radio-card-sub{
    font-size:12px;
    color:var(--muted);
    line-height:1.4;
}
/* Ring = crisp CSS border (uniform thickness). Dot = radial-gradient anchored to
   the border-box, so it shares the border's exact centre (no sub-pixel drift). */
.osm-radio-card-dot{
    flex:0 0 auto;
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid var(--border-strong-2);
    background:var(--surface-solid);
    transition:border-color .15s ease, background .15s ease;
}
.osm-radio-card.is-selected .osm-radio-card-dot,
.osm-radio-card:has(.osm-radio-card-input:checked) .osm-radio-card-dot{
    border-color:var(--accent);
    background:radial-gradient(circle at center, var(--accent) 0 3.5px, var(--surface-solid) 4.5px);
    background-origin:border-box;
}
.osm-radio-card-input:focus-visible ~ .osm-radio-card-dot{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* ==========================================================================
   Utilitaires de mise en page (ajoutés pour /admin/?p=waf)
   Les motifs ci-dessous étaient jusqu'ici recopiés en style inline dans
   plusieurs pages. Uniquement des classes nouvelles : rien d'existant n'est
   modifié, l'app utilisateur et le back-office partageant cette feuille.
   ========================================================================== */

/* Barre de filtres : catégories à gauche, recherche et actions à droite.
   Motif de dashboard.php, jusqu'ici en style inline. */
.osm-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.osm-filters form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Deux colonnes ou plus selon la place, sans point de rupture à déclarer. */
.osm-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Grappe de boutons en fin de ligne de tableau.

   nowrap volontaire : avec flex-wrap:wrap, la largeur minimale de la cellule
   valait UN bouton, la colonne se laissait donc comprimer par une voisine
   large (une adresse IPv6, par exemple) et les boutons du journal s'empilaient
   les uns sous les autres, loin de la ligne qu'ils commandent. En nowrap la
   colonne réclame la largeur de toute la grappe et la table la lui réserve. */
.osm-cell-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Troncature avec ellipsis. La largeur se règle par --w sur l'élément,
   toujours accompagnée d'un title= pour que la valeur reste récupérable. */
.osm-truncate {
    display: inline-block;
    max-width: var(--w, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Étiquette de filtre actif, retirable d'un clic. */
.osm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    font-size: 11px;
    font-family: var(--mono);
    text-decoration: none;
}
.osm-chip:hover { color: var(--text); border-color: var(--border-strong-2); }
.osm-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
}
.osm-chip:hover .osm-chip-x { color: var(--danger); }

/* Histogramme horaire, en CSS pur : une colonne par heure, hauteur en
   pourcentage du pic. Le projet n'avait aucune visualisation ; un tableau
   paginé ne montre pas une rafale d'attaque, une bande de 24 barres si.
   Aucune dépendance et aucun script : le CSP n'autorise que script-src 'self'. */
.osm-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 96px;
}
.osm-bars-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    overflow: hidden;
}
.osm-bars-fill { width: 100%; }
.osm-bars-fill--block { background: var(--danger); }
.osm-bars-fill--log { background: var(--info); }
.osm-bars-axis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 10px;
    font-family: var(--mono);
    color: var(--muted);
}
.osm-bars-legend {
    display: flex;
    gap: 14px;
    align-items: center;
}
.osm-bars-key { display: inline-flex; align-items: center; gap: 6px; }
.osm-bars-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
}

/* ---------- Page Sécurité (/?p=securite) ---------- */

/* Schéma d'architecture, en SVG inline. Toutes les couleurs viennent des jetons
   du thème, jamais en dur : le dessin suit ainsi le basculement clair/sombre
   sans duplication, comme les icônes qui héritent de currentColor. */
.dg-wrap { overflow-x: auto; padding: 4px 0 8px; }
.dg-svg { display: block; width: 100%; min-width: 620px; height: auto; }
.dg-box { fill: var(--surface-solid); stroke: var(--border-strong); stroke-width: 1; }
.dg-box--accent { fill: var(--accent-soft); stroke: var(--accent-border); stroke-width: 1; stroke-dasharray: 5 4; }
.dg-box--waf { fill: var(--accent-bg); stroke: var(--accent-border); stroke-width: 1; }
.dg-badge { fill: var(--accent-bg); stroke: var(--accent-border); stroke-width: 1; }
.dg-badge-txt { fill: var(--accent-text); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.dg-title { fill: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600; }
.dg-sub { fill: var(--text-2); font-family: var(--font); font-size: 12.5px; }
.dg-note { fill: var(--muted); font-family: var(--font); font-size: 11.5px; }
.dg-lbl { fill: var(--muted); font-family: var(--font); font-size: 11px; }
.dg-accent { fill: var(--accent-text); font-family: var(--font); font-size: 15px; font-weight: 600; }
.dg-line { stroke: var(--border-strong-2); stroke-width: 1.5; fill: none; }
.dg-head { fill: var(--border-strong-2); }
/* Exemple glissé dans une ligne du schéma : présent pour qui le cherche, en
   retrait pour qui lit le dessin en diagonale. */
.dg-eg { font-size: 11px; font-style: italic; fill: var(--muted); }

/* Encadrés de cette page : l'icône est un élément flex sans largeur minimale,
   elle s'écrase donc à mesure que le texte s'allonge, et ces textes-là sont bien
   plus longs que ceux du reste de l'application. flex-shrink la fige à sa taille
   réelle, le tracé est épaissi. Le centrage vertical de .osm-banner est conservé.
   Le défaut est celui du composant : tout encadré long a la même icône écrasée
   ailleurs. Le corriger pour tous demanderait flex-shrink sur .osm-banner > svg. */
.sec-banner > svg { flex-shrink: 0; stroke-width: 2; }

/* Une énumération dans un encadré prendrait sinon les valeurs par défaut du
   navigateur : 1em de marge haute et basse, et 40px de retrait qui s'ajoutent au
   décalage déjà produit par l'icône. On resserre, et on aère entre les items,
   qui font ici plusieurs lignes chacun. */
.sec-banner ul {
    margin: 6px 0 0;
    padding-left: 18px;
    line-height: 1.6;
}
.sec-banner li + li {
    margin-top: 6px;
}