:root {
    /* Surfaces : de la plus profonde (fond) à la plus haute (survol), avec un
       écart de luminosité plus lisible qu'auparavant pour que les cartes se
       détachent du fond sans dépendre uniquement de l'ombre. */
    --bg: #0a0c11;
    --sidebar: #0f1219;
    --card: #161b25;
    --card-2: #1e2431;
    --card-hover: #232a39;

    --text: #eef1f8;
    --muted: #8b93a7;
    --border: #252c3a;
    --border-soft: #1c222d;

    --accent: #5b8cff;
    --accent-strong: #7aa2ff;
    --accent-weak: rgba(91, 140, 255, 0.14);

    --green: #34d17f;
    --red: #ff5c5c;
    --yellow: #f4c430;

    /* Rayons, ombres et transitions homogènes sur toute l'app. */
    --radius: 12px;
    --radius-lg: 16px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35);
    --ring: 0 0 0 3px var(--accent-weak);
    --ease: 0.16s cubic-bezier(0.3, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 280px;
    background: var(--sidebar);
    border-right: 1px solid var(--border-soft);
    padding: 22px 18px;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}

.brand-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
    background: var(--card-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 4px;
}

.brand h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.user-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 18px;
}

.user-box strong {
    display: block;
}

.user-box span {
    color: var(--muted);
    font-size: 13px;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

nav a {
    position: relative;
    color: var(--muted);
    text-decoration: none;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--ease), color var(--ease);
}

nav a:hover {
    background: var(--card-2);
    color: var(--text);
}

/* État actif : fond teinté d'accent + liseré vertical, plus lisible d'un coup
   d'œil que l'ancien simple fond gris. */
nav a.active {
    background: var(--accent-weak);
    color: var(--accent-strong);
    font-weight: 600;
}

nav a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.nav-separator {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

/* --- Planning : une journée = une carte, une activité = une ligne --------- */
.planning-day.is-today {
    border-color: var(--accent);
}

.planning-day h3 {
    text-transform: capitalize;
}

.planning-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.planning-row:first-of-type {
    border-top: none;
}

.planning-hour {
    flex: 0 0 62px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.planning-name {
    flex: 1;
    min-width: 0;
}

.planning-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Une proposition non validée se lit comme un brouillon. */
.planning-row.is-draft {
    opacity: 0.75;
    border-left: 3px solid var(--yellow);
    padding-left: 10px;
}

/* --- Caisse : récapitulatif des montants avant validation ----------------- */
.caisse-total {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 16px 0;
}

.caisse-total span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.caisse-total strong {
    font-size: 22px;
}

/* --- Catégories repliables de la barre latérale --------------------------- */
.nav-group {
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.nav-group:first-child {
    border-top: none;
    padding-top: 0;
}

.nav-group > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 10px;
    user-select: none;
}

/* Masque le triangle natif (WebKit + le reste) : on dessine notre chevron. */
.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-group > summary::before {
    content: "▸";
    font-size: 11px;
    transition: transform 0.15s ease;
}

.nav-group[open] > summary::before {
    transform: rotate(90deg);
}

.nav-group > summary:hover {
    color: var(--text);
    background: var(--card-2);
}

.nav-group > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Le flex n'est appliqué QU'À l'état ouvert : mettre `display` sur l'enfant
   direct d'un <details> écrase le masquage natif de l'état fermé, et la
   catégorie repliée resterait visible. */
.nav-group[open] > .nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.nav-group:not([open]) > .nav-group-items {
    display: none;
}

.main {
    margin-left: 280px;
    width: calc(100% - 280px);
    padding: 32px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    margin-bottom: 24px;
}

.page-header h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.page-header p {
    margin: 6px 0 0;
    color: var(--muted);
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.stat-card {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Icône de tuile posée sur une pastille : uniformise des emojis de tailles
   visuelles très différentes et ancre la statistique. */
.stat-card span {
    font-size: 26px;
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--card-2);
    border: 1px solid var(--border);
}

.stat-card strong {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.stat-card p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

a.stat-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

a.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.storage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.storage-card {
    padding: 0;
    overflow: hidden;
}

.storage-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--card-2);
}

.empty-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
}

.storage-body {
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

th,
td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

th {
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

tbody tr {
    transition: background var(--ease);
}

tbody tr:hover {
    background: var(--card-2);
}

tr:last-child td {
    border-bottom: none;
}

.filter-row th {
    padding: 4px 8px 10px;
}

/* --- Tri des colonnes ----------------------------------------------------- */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.12s ease;
}

th.sortable:hover {
    color: var(--text);
}

th.sortable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Flèche discrète en veille, marquée quand le tri est actif : la colonne triée
   doit se repérer d'un coup d'œil sans alourdir tout l'en-tête. */
th.sortable::after {
    content: "↕";
    margin-left: 6px;
    opacity: 0.3;
    font-size: 11px;
}

th.sortable.sort-asc::after {
    content: "▲";
    opacity: 1;
    color: var(--accent);
}

th.sortable.sort-desc::after {
    content: "▼";
    opacity: 1;
    color: var(--accent);
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: inherit;
}

.column-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: inherit;
}

.muted {
    color: var(--muted);
}

.positive {
    color: var(--green);
    font-weight: 700;
}

.negative {
    color: var(--red);
    font-weight: 700;
}

.badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
    border: 1px solid transparent;
}

.status-active {
    background: rgba(52, 209, 127, 0.14);
    color: var(--green);
    border-color: rgba(52, 209, 127, 0.28);
}

.status-done {
    background: var(--accent-weak);
    color: var(--accent-strong);
    border-color: rgba(91, 140, 255, 0.28);
}

.status-cancelled {
    background: rgba(255, 92, 92, 0.14);
    border-color: rgba(255, 92, 92, 0.28);
    color: var(--red);
}

.button,
button {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease), filter var(--ease);
    box-shadow: 0 2px 10px rgba(91, 140, 255, 0.25);
}

.button:hover,
button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 5px 16px rgba(91, 140, 255, 0.35);
}

.button:active,
button:active {
    transform: translateY(0);
    filter: brightness(0.97);
    box-shadow: 0 2px 8px rgba(91, 140, 255, 0.25);
}

.button:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.button.secondary,
button.secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
}

.button.secondary:hover,
button.secondary:hover {
    background: var(--card-2);
    box-shadow: none;
}

.button.danger,
button.danger {
    background: var(--red);
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.25);
}

.button.danger:hover,
button.danger:hover {
    box-shadow: 0 6px 18px rgba(231, 76, 60, 0.35);
}

.small-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    transition: opacity 0.12s ease;
}

.small-link:hover {
    opacity: 0.75;
}

button.small-link {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 13px;
    display: inline;
}

button.small-link:hover {
    transform: none;
}

/* button.small-link resets .danger's red background, so restore the cue as text colour. */
button.small-link.danger {
    color: var(--red);
    background: none;
    box-shadow: none;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Garde les actions d'une ligne de tableau (lien + bouton) sur une seule ligne. */
.nowrap {
    white-space: nowrap;
}

.card-header h3 {
    margin: 0;
}

.form-card {
    max-width: 760px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
    font-weight: 600;
}

input,
textarea,
select {
    background: var(--card-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--muted);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.storage-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.storage-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.25);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.alert {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.35);
    color: #ffb4aa;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.login-page {
    display: flex;
    min-height: calc(100vh - 64px);
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 420px;
    text-align: center;
}

.filters-block {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.filters {
    display: flex;
    gap: 8px;
    background: var(--card);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.filters a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 9px;
}

.filters a.active,
.filters a:hover {
    background: var(--card-2);
    color: var(--text);
}

.custom-period {
    flex-direction: row;
    align-items: end;
    gap: 10px;
}

.custom-period label {
    font-size: 13px;
}

.role-invite-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.invite-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text);
}

.invite-checkbox input {
    width: auto;
    padding: 0;
}

.member-picker summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--accent);
    padding: 8px 0;
}

.member-picker-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-top: 8px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.option-available {
    color: var(--green);
    font-weight: 700;
}

.member-status-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-status-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--card-2);
    border-radius: 10px;
}

.invite-form,
.availability-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-width: 260px;
}

.role-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
}

.role-assign-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.role-assign-row select {
    max-width: 200px;
}

canvas {
    max-height: 360px;
}

/* ===== Commerces : flowchart interactif ===== */

.commerce-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
}

.commerce-head h3 {
    margin: 0;
}

.commerce-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
}

.commerce-actions form {
    display: inline;
}

.flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
}

/* Couleurs héritées du flowchart Mermaid du crew :
   action = vert, activité = bleu, objet = jaune, argent = rouge. */
.flow-node,
.legend-chip {
    color: #111;
    border: 1px solid #333;
}

.kind-action { background: #d9ead3; }
.kind-activite { background: #cfe2f3; }
.kind-objet { background: #fff2cc; }
.kind-argent { background: #f4cccc; }

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.flow-node:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.flow-node.optional {
    border-style: dashed;
}

.flow-node.excluded {
    opacity: 0.35;
}

.flow-node.excluded .flow-node-label {
    text-decoration: line-through;
}

.flow-node.selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flow-node-money {
    display: flex;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.flow-cost { color: #b3261e; }
.flow-gain { color: #1d7a3e; }
.flow-neutral { color: #555; }

.optional-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.12);
    padding: 2px 6px;
    border-radius: 999px;
}

.flow-arrow {
    color: var(--muted);
    font-size: 18px;
}

.flow-summary {
    display: flex;
    gap: 32px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.flow-stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.flow-stat strong {
    font-size: 20px;
}

.flow-detail {
    margin-top: 12px;
    font-size: 14px;
}

.flow-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.legend-chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.legend-chip.legend-optional {
    border-style: dashed;
    background: var(--card-2);
    color: var(--text);
}

/* ===== Commerces : édition des étapes ===== */

.step-block {
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}

.step-block:last-of-type {
    border-bottom: none;
}

.step-block summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    padding: 10px 0;
    list-style: none;
}

.step-order {
    color: var(--muted);
    font-weight: 700;
}

.step-forms {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding: 8px 0 18px;
}

.step-side-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-side-actions .button {
    justify-content: center;
}

.step-side-actions button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 1100px) {
    .step-forms {
        grid-template-columns: 1fr;
    }

    .flow-summary {
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media (max-width: 1400px) {
    .storage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .cards,
    .grid-2,
    .storage-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    body {
        flex-direction: column;
    }

    .main {
        margin-left: 0;
        width: 100%;
    }

    .filters-block,
    .custom-period {
        flex-direction: column;
        align-items: stretch;
    }

    .role-row {
        grid-template-columns: 1fr;
    }
}
/* --- Commerce : vision globale (graphe mermaid) et liens entre étapes --- */
.commerce-graph {
    overflow-x: auto;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
}

.commerce-graph svg {
    max-width: none;
}

.section-title {
    margin: 26px 0 12px;
}

.flow-node-item {
    font-size: 12px;
    font-weight: 500;
    color: #444;
}

.flow-node-activity {
    font-size: 12px;
    font-weight: 600;
    color: #1c4f7c;
}

/* --- Stats : sous-onglets et notes de lecture ------------------------------ */
.stats-tabs {
    display: flex;
    /* La règle globale `nav { flex-direction: column }` s'applique aussi ici :
       il faut la neutraliser explicitement pour obtenir des pastilles en ligne. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.stats-tabs a {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid rgba(201, 206, 222, 0.15);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.stats-tabs a:hover {
    border-color: rgba(201, 206, 222, 0.4);
}

.stats-tabs a.active {
    background: var(--card-2);
    border-color: rgba(201, 206, 222, 0.55);
    font-weight: 700;
}

/* La règle globale `form { flex-direction: column }` l'emporte sur .filters-block,
   qui ne déclare pas de direction : sans ceci les filtres s'empilent en colonne.
   (registre.html / ventes.html contournaient déjà le souci en style inline.) */
form.filters-block {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-start;
    gap: 12px 16px;
}

form.filters-block label {
    min-width: 170px;
}

/* Encart explicatif au-dessus des graphes (méthode de calcul, mises en garde). */
.viz-note p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
}

.viz-note p:last-child {
    margin-bottom: 0;
}

/* --- Troque --------------------------------------------------------------- */
.troque-exchange {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 12px;
}

.troque-side {
    flex: 1;
    min-width: 200px;
}

.troque-side h4 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}

.troque-arrow {
    align-self: center;
    font-size: 24px;
    opacity: 0.7;
}

.troque-chip {
    display: inline-block;
    background: rgba(127, 127, 127, 0.15);
    border-radius: 6px;
    padding: 4px 9px;
    margin: 0 4px 4px 0;
    font-size: 13px;
    font-weight: 500;
}

.troque-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.troque-row input[type="text"] {
    flex: 1;
}

.troque-row input[type="number"] {
    width: 90px;
}

.troque-remove {
    background: none;
    border: none;
    cursor: pointer;
}

/* Alternatives « OU » et cumuls « + » dans l'affichage d'un troque. */
.troque-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px 6px;
    border: 1px dashed rgba(127, 127, 127, 0.35);
    border-radius: 8px;
    margin: 0 4px 4px 0;
}

.troque-plus {
    opacity: 0.6;
    font-weight: 700;
    margin: 0 2px 4px 2px;
}

.troque-or {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--muted);
    background: rgba(127, 127, 127, 0.12);
    border-radius: 6px;
    padding: 3px 7px;
    margin: 0 6px 4px 2px;
    vertical-align: middle;
}

/* Barre de recherche « Vision unitaire ». */
.troque-search {
    width: 100%;
    max-width: 420px;
    margin-top: 6px;
}

/* Bloc d'alternative dans le formulaire d'édition. */
.troque-group-block {
    border: 1px dashed rgba(127, 127, 127, 0.35);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.troque-group-block:not(:first-child) {
    position: relative;
    margin-top: 22px;
}

.troque-group-block:not(:first-child)::before {
    content: "OU";
    position: absolute;
    top: -12px;
    left: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--muted);
    background: var(--card);
    padding: 0 8px;
}

.step-links {
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    margin-top: 14px;
    padding-top: 12px;
}

.step-links h4 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}

.step-links-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step-links-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.item-price-hint {
    margin: 4px 0 0;
    font-size: 13px;
}

/* ---- Menus déroulants recherchables (searchable-select.js) ---- */
.ss-wrapper {
    position: relative;
    width: 100%;
}

.ss-hidden-select {
    /* Le <select> natif reste dans le DOM pour la soumission ET la validation
       HTML5 (required). On le garde donc en pleine taille (donc focusable pour
       la bulle de validation), mais transparent et sous l'input, sans capter
       les clics. Ne pas passer en display:none / taille nulle : Chrome refuse
       alors de focus un champ `required` invalide ("not focusable"). */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ss-input {
    position: relative;
    z-index: 1;
    width: 100%;
    cursor: pointer;
    background: var(--card-2);
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.ss-panel {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 4px;
}

.ss-open .ss-panel {
    display: block;
}

.ss-option {
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text);
}

.ss-option:hover,
.ss-option.ss-active {
    background: rgba(108, 140, 255, 0.18);
}

.ss-option.ss-selected {
    color: var(--accent);
    font-weight: 600;
}

.ss-option.ss-disabled {
    color: var(--muted);
    cursor: default;
    opacity: 0.6;
}

.ss-empty {
    padding: 9px 12px;
    color: var(--muted);
    font-size: 14px;
}

/* ---- Définition de rôles à la création d'un type d'activité ---- */
.role-def-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
}

@media (max-width: 640px) {
    .role-def-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Attribution de rôle aux participants (page Activités) ---- */
.assign-role-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    flex-wrap: wrap;
}

.assign-role-form > span {
    min-width: 120px;
    font-size: 14px;
}

.assign-role-form select {
    min-width: 180px;
    padding: 8px 10px;
}