/* Direction visuelle « Encre » (docs/superpowers/specs/2026-10-27-design-encre.md).
   Une seule couleur de marque, tenue avec discipline : une encre bleu-noir très sombre, lue comme un noir profond
   (clarté L* ≈ 11, contre ≈ 51 pour le bleu du sentiment : impossible à confondre, daltonisme compris). Elle porte le
   menu, les en-têtes, les boutons, le texte fort, les étoiles, le logo et le focus, jamais une donnée. Tout le reste se
   tait : surfaces blanches, fond gris froid, thèmes sans couleur, séries des graphiques en graphite. Seules couleurs en
   plus, celles qui jugent : bleu / orangé du sentiment (toujours doublés d'un signe), ambre des statuts. */

:root {
    /* Encre et ses paliers (menu sombre, sélection à faible opacité). */
    --ink: #131b36;
    --ink-1: #1b2443;                  /* survol sur fond encre */
    --ink-2: #263055;                  /* entrée active du menu, survol des boutons pleins */
    --ink-tint: rgb(19 27 54 / .07);   /* état sélectionné */
    --ink-tint-2: rgb(19 27 54 / .12);
    --ink-ring: rgb(19 27 54 / .18);   /* halo de focus des champs */
    --on-ink: #ffffff;
    --on-ink-muted: rgb(255 255 255 / .74);
    --on-ink-line: rgb(255 255 255 / .12);

    /* Neutres froids */
    --color-ink: var(--ink);
    --color-muted: #586074;
    --color-bg: #f1f3f6;
    --color-card: #ffffff;
    --surface-2: #f7f8fa;
    --color-line: #e3e6ec;
    --color-line-strong: #cdd2dc;
    --color-hover: #eceef3;
    --color-dot: #8c93a3;              /* point des thèmes (aucune couleur propre) */
    --color-star: var(--ink);

    /* Sentiment uniquement (jamais pour juger un statut). Bleu / orangé plutôt que vert / rouge : les deux restent
       distincts pour les daltoniens (deutéranopie, protanopie, tritanopie), et toujours doublés d'un signe. */
    --color-positive: #1f7fbf;
    --color-positive-soft: #e6f1fa;
    --color-positive-ink: #1667a3;     /* texte bleu (contraste AA) */
    --color-negative: #d9572b;
    --color-negative-soft: #fdeee6;
    --color-negative-ink: #b4441b;

    /* Statuts : neutre, ambre (« en retard », alertes). Jamais l'orangé du sentiment. */
    --color-neutral-soft: #eef0f4;
    --color-neutral-ink: #474e60;
    --color-warning-soft: #fff4d6;
    --color-warning-ink: #855f00;

    /* Barres de sentiment (teintes adoucies, toujours doublées d'un signe). */
    --color-negative-bar: #f2a27e;
    --color-neutral-bar: #dadee6;
    --color-positive-bar: #7fb6e0;

    /* Graphiques : une série = graphite (jamais l'encre de marque ni un jugement), comparaison N-1 = gris clair en
       pointillé, grille et axes en filets discrets. Bleu/orangé restent au sentiment. */
    --viz-series: #4a5163;
    --viz-bar: #b9bfca;
    --viz-compare: #858c9b;           /* 3,4:1 sur blanc (élément graphique, AA) */
    --viz-grid: #eef0f3;
    --viz-axis: #c9ced8;
    --viz-quadrant: rgb(253 238 230 / .55);
    --viz-bubble: #cdd2db;             /* bulles hors du quadrant (encodage par mise en avant) */
    --viz-track: #eef0f4;              /* piste des barres */
    --viz-surface-soft: var(--surface-2);

    /* Formes : rayons modestes (carte, contrôle, badge), pas d'ombre au repos. */
    --radius-card: 10px;
    --radius-control: 7px;
    --radius-badge: 5px;
    --radius-pill: 999px;
    --shadow-lift: 0 1px 2px rgb(19 27 54 / .05), 0 10px 24px -14px rgb(19 27 54 / .22);
    --shadow-pop: 0 2px 6px rgb(19 27 54 / .08), 0 18px 40px -14px rgb(19 27 54 / .32);

    /* Échelle typographique : 12 méta · 14 interface · 15 corps · 16 avis et intertitres · 20 · 24 titre de page ·
       32/36 chiffres clés (48/60 réservés à la landing). Graisses 400 / 500 / 650. */
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: .9375rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.25rem;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --rail-width: 72px;
    --sidebar-width: 15rem;
    /* Commissioner, grotesque humaniste ; son axe « Flare » évase les terminaisons des titres, des grands chiffres et
       du R du logo (pas du texte courant). */
    --font: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --flare: 'FLAR' 45;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: var(--text-base)/1.55 var(--font);
    word-spacing: .04em;
    font-variant-numeric: lining-nums;
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgb(19 27 54 / .16); color: var(--ink); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: var(--text-xl); letter-spacing: -.02em; font-variation-settings: var(--flare); }
h2 { font-size: var(--text-md); margin-top: var(--space-10); }
h3 { font-size: var(--text-base); margin-top: var(--space-8); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-ink); text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; transition: text-decoration-color .15s; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
strong { font-weight: 650; }

/* Logo : le R Ressentio (app/_logo.html.twig, maître assets/images/ressentio-logo.svg) dans une tuile d'encre pleine,
   sans dégradé ; tuile blanche à R d'encre sur les fonds encre (menu, pied de la landing, connexion). La marque
   occupe 64 % de la tuile et prend la couleur du texte. */
.logo-tile {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: var(--radius-badge);
    background: var(--ink); color: var(--on-ink);
}
.logo-tile .logo-mark { display: block; width: 64%; height: auto; }
.logo-tile-sm { width: 30px; height: 30px; border-radius: var(--radius-control); }
:is(.sidebar, .topbar, .landing-footer) .logo-tile { background: var(--on-ink); color: var(--ink); }
:is(.sidebar, .topbar, .landing-footer) .brand-word { color: var(--on-ink); }
:is(.sidebar, .topbar, .landing-footer) :focus-visible { outline-color: var(--on-ink); }
/* Nom en toutes lettres à côté de la tuile, là où il y a la place. */
.brand-word { font-weight: 650; font-size: var(--text-md); letter-spacing: -.015em; color: var(--ink); font-variation-settings: var(--flare); }
.auth-brand, .topbar-brand { align-items: center; gap: var(--space-3); }

/* Formulaires */
label { display: block; margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); font-weight: 650; }
form div > label { margin-top: 0; }
form div { margin-bottom: var(--space-5); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea {
    display: block;
    width: 100%;
    max-width: 28rem;
    margin-top: var(--space-2);
    padding: .65rem .85rem;
    font: inherit;
    font-weight: 400;
    color: var(--color-ink);
    background: var(--color-card);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #bec4d0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ring); }
select:not([multiple]) {
    appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
}
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ink); }
input[type=file] {
    display: block; width: 100%; max-width: 28rem; margin-top: var(--space-2);
    font: inherit; font-size: var(--text-sm); color: var(--color-muted);
}
input[type=file]::file-selector-button {
    margin-right: var(--space-3); padding: .5rem .9rem;
    font: inherit; font-weight: 650; color: var(--color-ink);
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
    cursor: pointer; transition: background .15s;
}
input[type=file]::file-selector-button:hover { background: var(--color-hover); }
/* Case à cocher : la case avant son libellé. */
form div:has(> input[type=checkbox]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
form div:has(> input[type=checkbox]) > input { order: -1; }
form div:has(> input[type=checkbox]) > label { margin: 0; font-weight: 500; }
form div:has(> input[type=checkbox]) > :is(.help-text, ul) { flex-basis: 100%; order: 1; margin: 0; }
form div > ul, ul.errors { margin: var(--space-1) 0; padding: 0; list-style: none; color: var(--color-warning-ink); font-size: var(--text-sm); font-weight: 500; }
/* Erreurs : ce qui demande attention est ambre (l'orangé reste au sentiment). */
.form-error, [role=alert] { color: var(--color-warning-ink); }
.help-text { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }

/* Boutons */
.btn, button.link-button { font: inherit; cursor: pointer; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .55rem 1rem;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    transition: background-color .15s, border-color .15s, color .15s, transform .1s var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-2); color: var(--on-ink); }
.btn-secondary { background: var(--color-card); color: var(--color-ink); border-color: var(--color-line-strong); }
.btn-secondary:hover { background: var(--color-hover); border-color: #bec4d0; color: var(--color-ink); }
.btn-danger { background: var(--color-card); color: var(--color-ink); border-color: var(--color-line-strong); }
.btn-danger:hover { background: var(--color-hover); border-color: var(--ink); color: var(--ink); }
button.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
button.link-button:hover { text-decoration-color: var(--ink); }

/* Badges de statut : neutres (bleu et orangé restent au sentiment). */
.badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: .15rem .55rem; font-size: var(--text-xs); font-weight: 650; line-height: 1.4;
    border-radius: var(--radius-badge);
    background: var(--color-neutral-soft); color: var(--color-neutral-ink);
}
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
/* Statuts d'action et d'import : « En cours » à l'encre (cerclé), « Fait » / « Terminé » neutre coché. */
.badge-ongoing { color: var(--ink); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--ink); }
.badge-done::before { content: '✓'; margin-right: 4px; font-weight: 650; }
/* Ambre (en retard, alerte) : un point devant, la couleur n'est jamais seule. */
.badge-warning::before, .kpi-late::before { content: ''; flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }

/* Carte, en-tête, état vide */
.card { padding: var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-header h1 { margin: 0; overflow-wrap: anywhere; }
.page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-12) var(--space-6); text-align: center;
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
.empty-state-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-4); border-radius: var(--radius-card); background: var(--ink-tint); color: var(--ink); }
.empty-state-icon .icon { width: 24px; height: 24px; }
.empty-state h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.empty-state p { color: var(--color-muted); max-width: 30rem; margin: 0 auto; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }

/* Tableaux : une carte blanche. */
table, .table-scroll {
    width: 100%;
    margin-bottom: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}
table { border-collapse: separate; border-spacing: 0; }
table, .table-scroll { position: relative; } /* retient les libellés masqués dans la zone défilante */
.table-scroll { overflow-x: auto; }
.table-scroll table { margin-bottom: 0; border: 0; border-radius: 0; background: none; }
th, td { text-align: left; padding: .8rem var(--space-4); vertical-align: middle; }
td, tbody th { border-top: 1px solid var(--color-line); }
th { color: var(--color-muted); font-weight: 650; font-size: var(--text-xs); padding-top: .7rem; padding-bottom: .7rem; }
th:first-child, td:first-child { padding-left: var(--space-5); }
th:last-child, td:last-child { padding-right: var(--space-5); }
td form { display: inline; margin: 0; }
td form div { margin: 0; }
td .btn { padding: .35rem .75rem; font-size: var(--text-sm); }
td.row-actions { text-align: right; white-space: nowrap; }
td.row-actions > * + * { margin-left: var(--space-3); }
td.row-actions > a { font-weight: 650; font-size: var(--text-sm); }
td.num { font-variant-numeric: tabular-nums; }

/* Messages et encadrés */
.flash {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-6);
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control);
    font-weight: 500;
}
.flash::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.flash-error, .flash-warning { color: var(--color-warning-ink); background: var(--color-warning-soft); border-color: transparent; }
.flash-error::before, .flash-warning::before { background: currentColor; }
.notice { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); border-radius: var(--radius-control); background: var(--color-neutral-soft); }
.notice p:last-child { margin-bottom: 0; }
.notice .btn { margin-top: var(--space-1); }
.notice-error { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.form-errors { margin-bottom: var(--space-4); }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.danger {
    margin-top: var(--space-12); padding: var(--space-6);
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-card);
}
.danger h2 { margin-top: 0; }
.danger form, .danger form div:last-of-type { margin-bottom: 0; }
/* Profil › Double authentification : l'état en clair, chaque action repliée (ses champs à l'ouverture). */
.two-factor-action { padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--color-line); }
.two-factor-action > summary { display: flex; align-items: center; gap: var(--space-3); width: fit-content; font-weight: 600; cursor: pointer; list-style: none; }
.two-factor-action > summary::-webkit-details-marker { display: none; }
.two-factor-action > summary::after { content: ''; width: 7px; height: 7px; border: solid var(--color-muted); border-width: 0 1.75px 1.75px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.two-factor-action[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.two-factor-action > summary:hover::after { border-color: var(--ink); }
.two-factor-form { padding-top: var(--space-4); }
.danger .two-factor-form { margin-bottom: 0; }
.danger form.two-factor-form div { max-width: 22rem; margin-bottom: var(--space-4); }
.two-factor-form .muted { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.two-factor-action + .muted { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
/* Utilisateurs : état de la double authentification et réinitialisation par l'administrateur. */
.user-two-factor { white-space: nowrap; }
.user-two-factor form { display: inline; margin: 0 0 0 var(--space-2); }
.user-two-factor .link-button { font-size: var(--text-sm); color: var(--color-muted); }
.user-two-factor-label { display: none; }
.settings-security { margin-bottom: var(--space-6); }
.settings-security .flash { margin-top: var(--space-3); }

/* Toute la largeur disponible : les pages de lecture limitent elles-mêmes leurs colonnes de texte. */
.content { width: 100%; padding: var(--space-10) var(--space-12) var(--space-12); }

/* Onglets et sous-navigation (paramètres, dashboards) : texte seul, l'actif souligné d'un trait d'encre de 2 px. */
.subnav { display: flex; gap: var(--space-5); margin-bottom: var(--space-8); flex-wrap: wrap; border-bottom: 1px solid var(--color-line); }
.subnav a, .dashboard-tabs a {
    padding: .55rem 0; color: var(--color-muted); font-weight: 500; font-size: var(--text-base); text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .15s, color .15s;
}
.subnav a:hover, .dashboard-tabs a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--color-line-strong); }
.subnav a.is-active, .dashboard-tabs a.is-active { color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--ink); }

/* Boutons côte à côte (formulaires en ligne). */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.btn-row form { margin: 0; }

/* Sources */
.back { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.back a { color: var(--color-muted); text-decoration: none; }
.back a:hover { color: var(--color-ink); }
.step { display: inline-block; margin: calc(-1 * var(--space-3)) 0 var(--space-6); padding: .15rem .6rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-badge); }
.fieldset { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.fieldset legend { float: left; width: 100%; margin-bottom: var(--space-3); padding: 0; font-weight: 650; }
.fieldset legend + * { clear: both; }
.fieldset > :last-child { margin-bottom: 0; }

.type-tile { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--color-neutral-soft); color: var(--color-neutral-ink); }

.source-grid { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.source-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: var(--space-5);
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    transition: border-color .15s, box-shadow .2s var(--ease-out);
}
.source-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-lift); }
.source-card:has(.source-card-name:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.source-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
/* Toute la carte mène à la source ; le lien d'action reste cliquable au-dessus. */
.source-card-name { font-size: var(--text-md); font-weight: 650; line-height: 1.3; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.source-card-name:focus-visible { outline: none; }
.source-card-name::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.source-card-type { font-size: var(--text-sm); color: var(--color-muted); }
.source-card-meta { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }
.source-card-meta > span:first-child { color: var(--color-ink); }
.source-card-count { font-size: var(--text-xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.source-card-action { position: relative; z-index: 1; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-line); font-size: var(--text-sm); color: var(--color-muted); }

.source-types { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.source-type {
    display: flex; flex-direction: column; gap: var(--space-1); height: 100%;
    padding: var(--space-5);
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    color: var(--color-ink); text-decoration: none;
    transition: border-color .15s, box-shadow .2s var(--ease-out);
}
.source-type .type-tile { margin-bottom: var(--space-3); }
.source-type strong { font-size: var(--text-md); }
a.source-type:hover { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-tint); }
.source-type > span:not(.type-tile) { color: var(--color-muted); font-size: var(--text-sm); }
.source-type.is-disabled { color: var(--color-muted); background: transparent; border-style: dashed; border-color: var(--color-line-strong); }
.source-type.is-disabled .type-tile { background: var(--color-neutral-soft); color: #9aa1ae; }
.source-type small { margin-left: var(--space-2); padding: .1rem .45rem; font-size: var(--text-xs); font-weight: 650; border-radius: var(--radius-badge); background: var(--color-neutral-soft); color: var(--color-neutral-ink); vertical-align: 2px; }

.source-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--color-muted); margin-top: calc(-1 * var(--space-3)); }
.source-action { margin: var(--space-6) 0; }
.source-action h2 { margin-top: 0; }
.source-action form { margin-bottom: 0; }
.dropzone input[type=file], .source-action input[type=file] {
    max-width: 34rem; padding: var(--space-6) var(--space-5);
    background: var(--surface-2); border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-card); cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
@media (hover: hover) {
    .dropzone input[type=file]:hover, .source-action input[type=file]:hover { border-color: var(--ink); background: var(--ink-tint); }
}
.source-action input[type=file] { padding: var(--space-4); }

.csv-columns th[scope=row] { font-weight: 650; color: var(--color-ink); font-size: var(--text-base); white-space: nowrap; }
.csv-columns td { overflow-wrap: break-word; }
.csv-columns select { min-width: 10rem; margin: 0; }
.csv-preview { font-size: var(--text-sm); }
.csv-preview th, .csv-preview td { white-space: nowrap; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }

.import-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.import-head { margin-bottom: var(--space-5); }
.import-head-title { min-width: 0; }
.import-kicker { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); }
.import-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; }
.import-meta > span + span::before { content: '·'; margin-right: var(--space-2); }
.import-status { display: grid; gap: var(--space-4); }
.import-result { padding: var(--space-5) var(--space-6); }
.import-result .import-status-line { margin: 0; align-items: baseline; font-size: var(--text-md); font-weight: 500; }
.import-status-text { min-width: 0; overflow-wrap: anywhere; }
.import-review-link { margin: var(--space-4) 0 0; }
.import-result .notice { margin: var(--space-4) 0 0; }
.stats.import-stats { margin: var(--space-5) 0 0; }
.stats.import-stats > div:first-child { background: var(--surface-2); }
.import-foot { margin: var(--space-3) 0 0; }
.import-skipped { padding: var(--space-5) var(--space-6); }
.import-skipped h2 { margin: 0 0 var(--space-1); }
.import-skipped .table-scroll { margin: var(--space-3) 0 0; }
.import-skipped > p:last-child { margin: var(--space-3) 0 0; }
.import-errors td:first-child { width: 5rem; font-variant-numeric: tabular-nums; font-weight: 650; }
@media (max-width: 599px) {
    .import-result, .import-skipped { padding: var(--space-4); }
    .import-meta { flex-direction: column; gap: 2px; }
    .import-meta > span + span::before { content: none; }
    .stats.import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .stats.import-stats > div { padding: var(--space-3) var(--space-4); }
    .stats.import-stats dd { font-size: var(--text-xl); }
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.stats > div { padding: var(--space-4) var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.stats > div:first-child { background: var(--surface-2); }
.stats dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.stats dd { margin: var(--space-1) 0 0; font-size: var(--text-2xl); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; font-variation-settings: 'FLAR' 40; }
.stats dd a { text-decoration: none; }
.stats dd a:hover { color: var(--ink); }
.stats .stats-unit { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.stats > div.is-watch dd, .stats > div.is-watch dd a { color: var(--color-warning-ink); }

/* Verbatims : filtres en haut, résultats dans un cadre Turbo. */
.verbatim-filters { margin-bottom: var(--space-6); }
/* Grand écran : filtres en colonne à gauche, toujours visibles ; la liste prend le reste. */
@media (min-width: 1280px) {
    .verbatim-layout { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
    .verbatim-filters { position: sticky; top: var(--space-6); max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto; margin-bottom: 0; }
    .verbatim-filters .filter-grid { grid-template-columns: minmax(0, 1fr); }
    .verbatim-filters .filter-sources { grid-column: auto; }
    .verbatim-filters .filter-analysis .filter-pair { flex-direction: column; }
}
.verbatim-filters div, .verbatim-filters label { margin: 0; }
.filter-search { position: relative; }
.filter-search-icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); display: grid; color: var(--color-muted); pointer-events: none; }
#filter-q {
    max-width: none; margin: 0; padding: .8rem 1rem .8rem 2.75rem;
    font-size: var(--text-md); border-radius: var(--radius-card);
}
.filter-more-count[hidden] { display: none; }
.filter-more-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; font-size: var(--text-xs); color: var(--on-ink); background: var(--ink); border-radius: var(--radius-pill); }
.filter-grid {
    display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    margin-top: var(--space-3); padding: var(--space-5);
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
.filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-group legend, .filter-group-label { display: block; padding: 0; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); }
.filter-pair { display: flex; gap: var(--space-2); }
.filter-pair > label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.verbatim-filters .filter-pair input:not([type=checkbox]):not([type=radio]), .verbatim-filters .filter-pair select { max-width: none; margin: 0; padding: .5rem .7rem; font-size: var(--text-sm); }
.verbatim-filters .filter-pair select { padding-right: 2rem; background-position: right .6rem center; }
.filter-sources, .filter-meta { grid-column: 1 / -1; }
.filter-analysis .filter-pair > label:first-child { flex: 1 1 0; }
.filter-analysis .filter-pair > .filter-sentiment { flex: 0 0 auto; }
.filter-review-sentiment .filter-pair > select { flex: 1; min-width: 0; }
.chip-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-option {
    position: relative; display: inline-flex; align-items: center;
    padding: .35rem .8rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-neutral-ink);
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
    cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.chip-option:hover { background: var(--color-hover); }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option:has(input:checked) { color: var(--ink); font-weight: 650; background: var(--ink-tint-2); border-color: rgb(19 27 54 / .55); }
.chip-option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.verbatim-results { display: block; transition: opacity .15s; }
.verbatim-results[busy] { opacity: .55; }
.results-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.results-count { margin: 0; color: var(--color-muted); }
.results-export { order: 1; margin-left: auto; }
.results-count strong { color: var(--color-ink); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.active-filters li { padding: .15rem .6rem; font-size: var(--text-xs); font-weight: 650; color: var(--ink); background: var(--ink-tint-2); border-radius: var(--radius-badge); overflow-wrap: anywhere; }
.active-filters li.active-filters-reset { padding: 0; background: none; }
.active-filters li.active-filter { display: inline-flex; align-items: center; gap: .3rem; padding-right: .3rem; }
.active-filter a {
    position: relative; display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem;
    font-size: var(--text-base); line-height: 1; color: inherit; text-decoration: none; border-radius: 50%; transition: background-color .15s;
}
.active-filter a::after { content: ''; position: absolute; inset: -.5rem; } /* zone de toucher élargie */
.active-filter a:hover { background: var(--ink-tint-2); }
.active-filters-reset a { font-size: var(--text-sm); color: var(--color-muted); }
.active-filters-reset a:hover { color: var(--color-ink); }
.results-empty { padding: var(--space-10) var(--space-6); text-align: center; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.results-empty p { margin-bottom: var(--space-2); }
.results-empty .btn { margin-top: var(--space-4); }

.verbatim-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.verbatim-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    transition: border-color .15s, box-shadow .2s var(--ease-out);
}
.verbatim-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-lift); }
.verbatim-card:has(.verbatim-card-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.verbatim-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
/* Toute la carte mène au verbatim. */
.verbatim-card-link { max-width: 75ch; display: flex; flex-direction: column; gap: 2px; color: var(--color-ink); text-decoration: none; }
.verbatim-card-link:focus-visible { outline: none; }
.verbatim-card-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.verbatim-card-title { font-size: var(--text-md); font-weight: 650; overflow-wrap: anywhere; }
.verbatim-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; font-size: var(--text-md); line-height: 1.6; color: #2a3147; }
.verbatim-card-side { display: flex; flex-direction: column; gap: var(--space-3); }
/* Très grand écran : le texte garde une ligne lisible, thèmes et source passent à droite. */
@media (min-width: 1600px) {
    .verbatim-card { display: grid; grid-template-columns: minmax(0, 46rem) minmax(16rem, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-10); }
    .verbatim-card-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-left: var(--space-6); border-left: 1px solid var(--color-line); }
}
.verbatim-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }

.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.star { fill: #dde0e7; }
.star.is-on { fill: var(--color-star); }
.stars-none { font-size: var(--text-xs); color: var(--color-muted); }
.source-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: 650; color: var(--color-ink); }
.source-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-tile-xs { width: 24px; height: 24px; border-radius: var(--radius-badge); }
.type-tile-xs .icon { width: 14px; height: 14px; }
.meta-pill { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .15rem .55rem; color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-badge); }
.meta-pill-key { color: var(--color-muted); }
.meta-pill-key::after { content: ' ·'; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }
.pagination-status { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.btn.is-disabled { color: #9aa1ae; background: transparent; border-color: var(--color-line); cursor: default; }

.verbatim-show { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.verbatim-detail { padding: var(--space-8) var(--space-10); }
.verbatim-detail-rating { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.verbatim-detail-rating .star { width: 20px; height: 20px; }
.rating-raw { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Les mots des clients : même famille, corps plus grand, un filet d'encre en marge. */
.verbatim-detail-title { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.015em; font-variation-settings: var(--flare); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.verbatim-detail-text { max-width: 75ch; margin: 0; padding-left: var(--space-5); font-size: var(--text-lg); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; border-left: 2px solid var(--ink); }
.verbatim-side { display: flex; flex-direction: column; gap: var(--space-4); }
.verbatim-side .card { padding: var(--space-5); }
.verbatim-side h2 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.verbatim-facts { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.verbatim-metadata-block { grid-column: 1; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.verbatim-metadata { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-3) var(--space-6); margin: 0; }
.verbatim-action-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.verbatim-action-list a { font-weight: 650; overflow-wrap: anywhere; }
.verbatim-action-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: 2px; font-size: var(--text-xs); }
.verbatim-facts dt, .verbatim-metadata dt { font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); }
.verbatim-facts dd, .verbatim-metadata dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.verbatim-facts dd a { text-decoration: none; }
.verbatim-facts dd a:hover .source-chip-name { text-decoration: underline; text-decoration-color: var(--ink); }

/* Analyse d'un verbatim. Passages surlignés : teinte légère du sentiment doublée d'un soulignement de forme
   différente (plein = négatif, pointillé = positif) ; mise en évidence par un contour indigo (box-shadow : aucun
   décalage de mise en page). Les autres passages s'effacent pendant la mise en évidence. */
.hl {
    padding: 1px 1px; color: inherit; border-radius: 2px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
    transition: box-shadow .15s, background-color .15s, text-decoration-color .15s;
}
.hl-neg { background: var(--color-negative-soft); text-decoration-color: var(--color-negative-bar); }
.hl-pos { background: var(--color-positive-soft); text-decoration-color: var(--color-positive-bar); text-decoration-style: dotted; }
.hl-neu { background: var(--color-neutral-soft); text-decoration-color: transparent; }
.hl-multi.hl-neg { background: #f8d6c4; }
.hl-multi.hl-pos { background: #d2e4f4; }
.hl-multi.hl-neu { background: #e6e8f0; }
.is-highlighting .hl:not(.is-lit) { background: transparent; text-decoration-color: var(--color-line-strong); }
.hl.is-lit { box-shadow: 0 0 0 2px var(--ink); }

.verbatim-analysis { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
/* Grand écran : les thèmes abordés passent à côté du texte, qui garde une ligne lisible. */
@media (min-width: 1440px) {
    .verbatim-detail:has(> .verbatim-analysis) { display: grid; grid-template-columns: minmax(0, 75ch) minmax(18rem, 1fr); column-gap: var(--space-10); align-content: start; }
    .verbatim-detail > .verbatim-analysis { grid-column: 2; grid-row: 1 / span 20; align-self: start; margin-top: 0; padding: 0 0 0 var(--space-8); border-top: 0; border-left: 1px solid var(--color-line); }
}
.verbatim-analysis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.verbatim-analysis-head h2 { margin: 0; font-size: var(--text-base); }
.verbatim-analysis-hint { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
.analysis-reanalysis { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); background: var(--color-neutral-soft); color: var(--color-neutral-ink); border-radius: var(--radius-control); }
.segment-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.segment-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: .3rem .35rem .3rem .7rem; font: inherit; font-size: var(--text-sm); font-weight: 650; line-height: 1.4; text-align: left;
    border: 0; cursor: pointer; transition: box-shadow .15s;
}
.segment-chip.code-chip { padding: .3rem .35rem .3rem .6rem; }
.segment-chip.is-lit, .segment-chip[aria-pressed=true] { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 1px var(--ink); }
.segment-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.segment-chip-count { flex-shrink: 0; font-size: var(--text-xs); font-weight: 650; white-space: nowrap; opacity: .75; font-variant-numeric: tabular-nums; }
.sign {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem;
    font-size: var(--text-sm); font-weight: 650; line-height: 1; background: var(--color-neutral-soft); border-radius: 50%;
}
.sign-neg { color: var(--color-negative-ink); }
.sign-pos { color: var(--color-positive-ink); }
.sign-neu { color: var(--color-neutral-ink); }

/* Sentiment global : point coloré portant le signe. */
.mood { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.mood-sign { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; font-size: var(--text-sm); font-weight: 650; line-height: 1; color: var(--on-ink); border-radius: 50%; }
.mood-neg .mood-sign { background: var(--color-negative); }
.mood-pos .mood-sign { background: var(--color-positive); }
.mood-neu .mood-sign { color: var(--color-neutral-ink); background: var(--color-neutral-bar); }
.mood-neg .mood-label { color: var(--color-negative-ink); }
.mood-pos .mood-label { color: var(--color-positive-ink); }
.mood-neu .mood-label { color: var(--color-neutral-ink); }
.verbatim-card-when { display: inline-flex; align-items: center; gap: var(--space-2); }
.verbatim-card .mood-sign { width: 1.1rem; height: 1.1rem; font-size: var(--text-xs); }
.card-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card-codes .code-chip { padding: .1rem .3rem .1rem .45rem; font-size: var(--text-xs); }
.card-codes .sign { width: 1.05rem; height: 1.05rem; font-size: var(--text-xs); }
.codes-more { padding: .15rem .5rem; font-size: var(--text-xs); font-weight: 650; line-height: 1.4; color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-badge); }

.analysis-status { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--color-neutral-soft); border-radius: var(--radius-control); }
.analysis-status p { margin: 0; font-size: var(--text-sm); color: var(--color-neutral-ink); }
.analysis-status p.analysis-status-title { margin-bottom: 2px; font-weight: 650; color: var(--color-ink); }
.analysis-status-quota_exceeded { background: var(--color-warning-soft); }
.analysis-status-quota_exceeded p.analysis-status-title { color: var(--color-warning-ink); }
.analysis-status-failed { background: var(--color-warning-soft); }
.analysis-status-failed p.analysis-status-title { color: var(--color-warning-ink); }

/* Coquille applicative */
.shell { display: flex; min-height: 100vh; }
.shell-main { flex: 1; min-width: 0; }
.sidebar { color: var(--on-ink-muted); background: var(--ink); }
.sidebar-inner { display: flex; flex-direction: column; }
.sidebar-brand, .topbar-brand, .auth-brand { display: inline-flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-control); text-decoration: none; }
.sidebar-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Entrée active : bande d'encre plus claire marquée d'un filet blanc de 3 px au bord gauche du menu. */
.nav-link { position: relative; color: var(--on-ink-muted); text-decoration: none; border-radius: var(--radius-badge); transition: background-color .15s, color .15s; }
.nav-link .icon { opacity: .85; }
.nav-link:hover { color: var(--on-ink); background: var(--ink-1); }
.nav-link.is-active { color: var(--on-ink); background: var(--ink-2); }
.nav-link.is-active .icon { opacity: 1; }
.nav-link.is-active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--on-ink); }
.nav-link.is-disabled, .nav-link.is-disabled:hover { color: rgb(255 255 255 / .36); background: none; cursor: default; }
.nav-label small { font-size: var(--text-xs); font-weight: 650; }
.icon { flex-shrink: 0; }
.sidebar-foot { display: flex; flex-direction: column; gap: var(--space-2); }
.user-avatar {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    font: inherit; font-size: var(--text-xs); font-weight: 650;
    color: var(--on-ink); background: rgb(255 255 255 / .13);
    border: 0; border-radius: 50%; cursor: pointer;
    transition: box-shadow .15s;
}
.user-avatar:hover { box-shadow: 0 0 0 3px rgb(255 255 255 / .18); }
.user-menu-who { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); }
.user-name { font-weight: 650; }
.user-email { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.user-menu form { margin: 0; }
.user-menu-item {
    display: block; width: 100%; padding: .5rem var(--space-3);
    font: inherit; font-weight: 500; text-align: left; color: var(--color-ink); text-decoration: none;
    background: none; border: 0; border-radius: var(--radius-control); cursor: pointer;
    transition: background-color .15s;
}
.user-menu-item:hover { background: var(--color-hover); }
.topbar, .drawer-backdrop { display: none; }

/* Bureau : rail d'icônes, libellé en infobulle. */
@media (min-width: 900px) {
    /* Menu fixé (pas collant) : au rebond élastique du pavé tactile, seul le contenu à droite bouge. */
    .sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: var(--rail-width); }
    .shell-main { margin-left: var(--rail-width); }
    .sidebar-inner {
        align-items: center; gap: var(--space-6);
        height: 100vh; padding: 20px 0 var(--space-4);
    }
    .sidebar-nav, .sidebar-foot { align-items: center; }
    .nav-link { display: grid; place-items: center; width: 44px; height: 44px; }
    .nav-label {
        position: absolute; left: calc(100% + 12px); top: 50%; z-index: 40;
        padding: .3rem .6rem; border-radius: var(--radius-control);
        font-size: var(--text-xs); font-weight: 650; white-space: nowrap;
        color: var(--on-ink); background: var(--ink); box-shadow: var(--shadow-pop);
        opacity: 0; pointer-events: none;
        transform: translate(-4px, -50%);
        transition: opacity .12s, transform .12s var(--ease-out);
    }
    .nav-label small { font-weight: 500; opacity: .7; margin-left: 2px; }
    .nav-link:hover .nav-label, .nav-link:focus-visible .nav-label { opacity: 1; transform: translate(0, -50%); }
    .sidebar-foot { gap: var(--space-3); }
    .sidebar-brand .brand-word { display: none; }
    .sidebar-toggle { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
    .user-menu {
        position: fixed; inset: auto auto var(--space-4) calc(var(--rail-width) + 12px);
        width: 16rem; margin: 0; padding: 6px;
        color: var(--color-ink); background: var(--color-card);
        border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
    }
    .user-menu-who { padding: var(--space-3); margin-bottom: 6px; border-bottom: 1px solid var(--color-line); }

    /* Rail réduit : carré d'encre plus claire, filet blanc collé au bord gauche du menu. */
    :root:not([data-sidebar=open]) .nav-link.is-active::before { left: -14px; top: 10px; bottom: 10px; }

    /* Menu ouvert : libellés à côté des icônes, plus d'infobulle ; l'entrée active en bande pleine hauteur. */
    :root[data-sidebar=open] .sidebar { width: var(--sidebar-width); }
    :root[data-sidebar=open] .shell-main { margin-left: var(--sidebar-width); }
    :root[data-sidebar=open] .sidebar-inner { align-items: stretch; padding-inline: 0; }
    :root[data-sidebar=open] .sidebar-brand { align-self: flex-start; align-items: center; gap: var(--space-3); margin-left: var(--space-4); }
    :root[data-sidebar=open] .sidebar-brand .brand-word { display: inline; }
    :root[data-sidebar=open] .sidebar-nav, :root[data-sidebar=open] .sidebar-foot { align-items: stretch; }
    :root[data-sidebar=open] .sidebar-nav { gap: 2px; }
    :root[data-sidebar=open] .sidebar-foot { gap: 2px; }
    :root[data-sidebar=open] .nav-link {
        display: flex; align-items: center; gap: var(--space-3); width: auto; min-height: 40px; height: auto;
        margin: 0 var(--space-3) 0 0; padding: 0 var(--space-4) 0 calc(var(--space-4) + 3px);
        font-weight: 500; text-align: left; border-radius: 0 6px 6px 0;
    }
    :root[data-sidebar=open] .nav-link.is-active { font-weight: 650; }
    :root[data-sidebar=open] .nav-link.is-active::before { top: 0; bottom: 0; border-radius: 0; }
    :root[data-sidebar=open] .nav-label {
        position: static; padding: 0; font-size: var(--text-base); white-space: nowrap;
        color: inherit; background: none; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; transition: none;
    }
    :root[data-sidebar=open] .user-avatar { margin: var(--space-2) 0 0 var(--space-4); }
    :root[data-sidebar=open] .sidebar-foot { padding-top: var(--space-3); border-top: 1px solid var(--on-ink-line); }
    :root[data-sidebar=open] .user-menu { inset: auto auto var(--space-4) calc(var(--sidebar-width) + 12px); }
}

/* Back-office : barre du haut claire */
.admin-nav {
    display: flex; align-items: center; gap: var(--space-1) var(--space-2); flex-wrap: wrap;
    padding: var(--space-3) var(--space-12);
    background: var(--color-card); border-bottom: 1px solid var(--color-line);
}
.admin-nav a { padding: .4rem .8rem; border-radius: var(--radius-control); color: var(--color-muted); font-weight: 500; font-size: var(--text-sm); text-decoration: none; transition: background-color .15s, color .15s; }
.admin-nav a:hover { color: var(--color-ink); background: var(--color-hover); }
.admin-nav a.is-active { color: var(--ink); font-weight: 650; background: var(--ink-tint-2); }
.admin-nav .admin-brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: var(--space-4); padding: 0; color: var(--color-ink); font-size: var(--text-md); font-weight: 650; }
.admin-nav .admin-brand:hover { background: none; }
.admin-nav form { margin: 0 0 0 auto; }
.admin-nav .link-button { color: var(--color-muted); font-weight: 500; font-size: var(--text-sm); }
.admin-shell .content { margin-inline: auto; }
.admin-section > h2 { margin-top: var(--space-10); }

/* Back-office › contrat : chaque limite suivie de sa case « Sans limite », les deux dates côte à côte. */
.contract-limit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-5); }
.contract-limit > div:first-child { flex: 0 1 20rem; }
.contract-limit > div:last-child { margin-top: 2.55rem; } /* case alignée sur le champ, pas sur son aide */
.contract-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 20rem)); gap: var(--space-5); }
.contract-limit, .contract-dates { margin-bottom: var(--space-5); }
.contract-limit > div, .contract-dates > div { margin-bottom: 0; }
@media (max-width: 40rem) { .contract-limit > div:last-child { margin-top: 0; } }
.contract-stats { margin: var(--space-4) 0; }

/* Paramètres › Contrat et bandeau d'attente : jauges à l'encre, ambre (« à regarder ») à partir de 90 %. */
.contract-notices .flash { margin-bottom: var(--space-3); }
.contract-notices { margin-bottom: var(--space-6); }
.contract-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); max-width: 62rem; }
.contract-card { padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.contract-card h2 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.contract-card p { margin: 0; }
.contract-card .muted { font-size: var(--text-sm); }
.contract-figure { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.contract-card.is-watch .contract-figure { color: var(--color-warning-ink); }
.contract-gauge { height: 8px; margin: var(--space-3) 0 var(--space-2); overflow: hidden; background: var(--viz-track); border-radius: var(--radius-pill); }
.contract-gauge > span { display: block; height: 100%; min-width: 2px; background: var(--ink); border-radius: inherit; }
.contract-card.is-watch .contract-gauge > span { background: var(--color-warning-ink); }
.contract-card .contract-unlimited { margin: var(--space-1) 0 var(--space-2); font-weight: 650; }
.contract-terms { display: grid; gap: var(--space-2); margin: 0; }
.contract-terms > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.contract-terms dt { min-width: 5.5rem; color: var(--color-muted); }
.contract-terms dd { margin: 0; overflow-wrap: anywhere; }
.contract-banner, .contract-notices .flash { align-items: flex-start; }
.contract-banner::before, .contract-notices .flash::before { margin-top: .5em; }
.contract-banner p { margin: 0; }
.analysis-suspended-notice { margin-bottom: var(--space-6); }
.analysis-suspended-notice::before { display: none; }
.analysis-suspended-notice p { margin: 0; }
.analysis-suspended-icon { flex-shrink: 0; display: inline-flex; }
.contract-banner a { margin-left: var(--space-1); white-space: nowrap; }

/* Back-office › IA : jauge du plafond à l'encre, ambre (« à regarder ») au-delà de 80 %. */
.stats dd.ai-stat-text { font-size: var(--text-lg); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ai-budget { padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.ai-gauge { height: 10px; overflow: hidden; background: var(--viz-track); border-radius: var(--radius-pill); }
.ai-gauge > span { display: block; height: 100%; min-width: 2px; background: var(--ink); border-radius: inherit; }
.ai-budget.is-watch .ai-gauge > span { background: var(--color-warning-ink); }
.ai-budget-figures { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: var(--space-4) 0 0; }
.ai-budget-figures dt { font-size: var(--text-sm); color: var(--color-muted); }
.ai-budget-figures dd { margin: 0; font-size: var(--text-xl); font-weight: 650; font-variant-numeric: tabular-nums; }
.ai-budget.is-watch .ai-budget-figures div:first-child dd { color: var(--color-warning-ink); }
.ai-note { margin-top: var(--space-3); font-size: var(--text-sm); }
.ai-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 var(--space-6); }
.ai-latest td { white-space: nowrap; }
.ai-latest td:last-child { white-space: normal; min-width: 12rem; }

/* Pages publiques (connexion, invitation, mot de passe) */
/* Pages publiques : un bandeau d'encre derrière la marque, la carte posée à cheval. */
.auth {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-6);
    padding: 64px var(--space-4) var(--space-8); background: linear-gradient(var(--ink) 0 232px, var(--color-bg) 232px);
}
.auth-brand .logo-tile { width: 44px; height: 44px; border-radius: var(--radius-card); background: var(--on-ink); color: var(--ink); }
.auth-brand .brand-word { font-size: var(--text-xl); color: var(--on-ink); }
.auth-brand:focus-visible { outline-color: var(--on-ink); }
.auth-card { width: 100%; max-width: 25rem; padding: var(--space-8); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); box-shadow: var(--shadow-lift); }
.auth-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.auth-card input:not([type=checkbox]) { max-width: none; }
.auth-card form .btn { width: 100%; margin-top: var(--space-2); padding-block: .7rem; }
.auth-card [role=alert], .auth-card [role=status] { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 500; }
.auth-card [role=alert] { background: var(--color-warning-soft); }
.auth-card [role=status] { background: var(--color-neutral-soft); }
.auth-foot { margin: var(--space-5) 0 0; text-align: center; font-size: var(--text-sm); }
.auth-foot a { color: var(--color-muted); }

/* Écran partagé (connexion, mot de passe, invitation, 2FA) : panneau d'encre à gauche, formulaire à droite. */
.split { display: grid; grid-template-columns: minmax(380px, 42%) 1fr; min-height: 100vh; background: var(--color-card); }
.split-side { display: grid; grid-template-rows: auto 1fr auto; padding: 44px clamp(40px, 5vw, 72px) 40px; background: var(--ink); color: var(--on-ink); }
.split-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; border-radius: 8px; text-decoration: none; }
.split-brand .logo-tile { width: 32px; height: 32px; border-radius: 8px; background: var(--on-ink); color: var(--ink); }
.split-brand .brand-word { font-size: 1.1rem; color: var(--on-ink); }
.split-brand:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 4px; }
.split-read { align-self: end; max-width: 25rem; margin: 0 0 18vh; }
.split-quote {
    position: relative; margin: 0; font-variation-settings: 'FLAR' 100; font-weight: 340; font-size: clamp(1.4rem, 1.9vw, 1.7rem);
    line-height: 1.42; letter-spacing: -.005em; color: rgb(255 255 255 / .82);
}
.split-quote::before { content: '«'; position: absolute; left: -.85em; top: -.02em; color: rgb(255 255 255 / .32); }
.split-close { color: rgb(255 255 255 / .32); }
.split-mark {
    padding-bottom: 2px; color: var(--on-ink); font-weight: 420;
    background: linear-gradient(var(--color-negative), var(--color-negative)) 0 92% / 100% 2px no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    animation: split-draw 900ms cubic-bezier(.3, .7, .2, 1) 500ms both;
}
@keyframes split-draw { from { background-size: 0 2px; } }
.split-note { display: flex; align-items: center; margin-top: 22px; font-size: var(--text-sm); animation: split-fade 500ms ease 1350ms both; }
.split-theme { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--on-ink); }
.split-theme b { color: #f2a07f; font-weight: 700; }
@keyframes split-fade { from { opacity: 0; transform: translateY(3px); } }
.split-who { margin-top: 10px; font-size: var(--text-sm); color: rgb(255 255 255 / .5); }
.split-legal { display: flex; gap: 20px; font-size: .8rem; }
.split-legal a { color: rgb(255 255 255 / .55); text-decoration: none; }
.split-legal a:hover { color: var(--on-ink); text-decoration: underline; }
.split-legal a:focus-visible { outline-color: var(--on-ink); }

.split-main { display: grid; place-items: center; padding: 48px 32px; }
.split-form { width: 100%; max-width: 21.5rem; }
.split-form h1 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 650; letter-spacing: -.012em; }
.split-sub { margin: 0 0 28px; color: var(--color-muted); }
.split-form label { margin: 0 0 6px; }
.split-form input:not([type=checkbox]) { box-sizing: border-box; width: 100%; max-width: none; height: 46px; }
.split-field + .split-field { margin-top: 18px; }
/* Mot de passe : « Oublié ? » suit le champ dans le document (ordre de Tab) mais s'affiche à droite du libellé. */
.split-field-pw { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.split-field-pw > label { grid-row: 1; grid-column: 1; align-self: baseline; margin-bottom: var(--space-2); }
.split-field-pw > .split-forgot { grid-row: 1; grid-column: 2; align-self: baseline; font-size: var(--text-sm); color: var(--color-muted); }
/* Dans une grille, les marges ne fusionnent plus : l'écart sous le libellé est porté par celui-ci, le champ remplit son bloc (« Afficher » centré). */
.split-field-pw > .split-pw { grid-row: 2; grid-column: 1 / -1; margin-bottom: 0; }
.split-form .split-field-pw > .split-pw > input:not([type=hidden]) { margin-top: 0; }
.split-pw { position: relative; }
.split-pw input { padding-right: 5.5rem; }
.split-pw button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 8px;
    font: inherit; font-size: var(--text-sm); color: var(--color-muted); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.split-pw button:hover { background: var(--color-hover); color: var(--ink); }
.split-form .btn.split-submit { box-sizing: border-box; justify-content: center; width: 100%; height: 48px; margin-top: 26px; font-size: 1rem; }
.split-form .flash { margin: -8px 0 22px; }
.split-foot { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--color-line); font-size: var(--text-sm); color: var(--color-muted); }
.split-back { display: inline-block; margin-bottom: 22px; font-size: var(--text-sm); color: var(--color-muted); }
.split-form .split-back-form { margin: 0; }
button.link-button.split-back { font-size: var(--text-sm); color: var(--color-muted); }
.split-form .split-code input { height: 56px; padding-left: .4em; font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.split-form .split-code.is-backup input { letter-spacing: .12em; }
.split-form .split-check { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: var(--text-sm); }
.split-check input { flex: none; margin-top: 2px; }
.split-form .split-check label { flex: 1; margin: 0; font-weight: 400; }
/* Activation de la double authentification et codes de secours (même colonne que la connexion). */
.two-factor-steps { margin: 0; padding-left: 1.2rem; }
.two-factor-steps > li + li { margin-top: 22px; }
.two-factor-steps > li::marker { font-weight: 650; }
.two-factor-steps p { margin: 0 0 12px; }
.two-factor-qr { width: 176px; padding: 12px; margin: 4px 0 14px; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.two-factor-qr svg { display: block; width: 100%; height: auto; }
.two-factor-alt { font-size: var(--text-sm); color: var(--color-muted); }
.split-form .two-factor-key { padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: .04em; word-spacing: .2em; overflow-wrap: anywhere; user-select: all; background: var(--color-neutral-soft); border-radius: var(--radius-control); }
.backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 0 0 20px; padding: 14px 16px 14px 2.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; user-select: all; background: var(--color-neutral-soft); border-radius: var(--radius-control); }
.backup-codes li::marker { color: var(--color-muted); font-size: var(--text-sm); }
.backup-codes-actions { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .split-mark, .split-note { animation: none; } }
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .split-side { grid-template-rows: auto; padding: 18px 20px; }
    .split-read, .split-legal { display: none; }
    .split-main { place-items: start center; min-height: 75vh; padding: 36px 20px 48px; }
    .split-form h1 { font-size: 1.45rem; }
}

/* Mobile : barre du haut compacte, navigation en tiroir avec libellés. */
@media (max-width: 899px) {
    /* Barre fixée (pas collante) : au rebond élastique, seul le contenu bouge. */
    .shell-main { padding-top: 56px; }
    .topbar {
        position: fixed; inset: 0 0 auto 0; z-index: 15;
        display: flex; align-items: center; gap: var(--space-3);
        height: 56px; padding: 0 var(--space-4);
        color: var(--on-ink); background: var(--ink);
    }
    .icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -6px; padding: 0; background: none; border: 0; border-radius: var(--radius-control); color: var(--on-ink); cursor: pointer; }
    .icon-button:hover { background: var(--ink-1); }

    .sidebar {
        position: fixed; z-index: 30; inset: 0 auto 0 0;
        width: min(18rem, 86vw); overflow-y: auto;
        transform: translateX(-100%); visibility: hidden;
        transition: transform .25s var(--ease-out), visibility 0s .25s;
    }
    .drawer-open .sidebar { transform: none; visibility: visible; transition: transform .25s var(--ease-out); box-shadow: var(--shadow-pop); }
    .drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(19 27 54 / .45); }
    .sidebar-inner { gap: var(--space-5); min-height: 100%; padding: var(--space-4) 0; }
    .sidebar-brand { align-self: flex-start; margin-left: var(--space-4); }
    .sidebar-nav { gap: 2px; }
    .nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; margin-right: var(--space-3); padding: 0 var(--space-3) 0 calc(var(--space-4) + 3px); font-weight: 500; border-radius: 0 6px 6px 0; }
    .nav-link.is-active { font-weight: 650; }
    .nav-link.is-active::before { top: 0; bottom: 0; border-radius: 0; }
    .nav-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex: 1; }
    .nav-label small { padding: .1rem .45rem; border-radius: var(--radius-badge); background: rgb(255 255 255 / .12); color: var(--on-ink); }
    .sidebar-foot { gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--on-ink-line); }
    .user-menu-who { padding-left: calc(var(--space-4) + 3px); }
    .user-name { color: var(--on-ink); }
    .user-email { color: var(--on-ink-muted); }
    .user-menu-item { padding-left: calc(var(--space-4) + 3px); color: var(--on-ink-muted); border-radius: 0 6px 6px 0; }
    .user-menu-item:hover { color: var(--on-ink); background: var(--ink-1); }
    .sidebar-toggle { display: none; }
    .user-avatar { display: none; }
    /* Le menu du compte s'affiche à plat dans le tiroir. */
    .user-menu { display: block; position: static; inset: auto; width: auto; margin: var(--space-2) 0 0; padding: 0; overflow: visible; color: inherit; background: none; border: 0; }

    .content { padding: var(--space-6) var(--space-4) var(--space-10); }
    .auth-card { padding: var(--space-6); }
    h1 { font-size: var(--text-lg); }
    .admin-nav { padding: var(--space-3) var(--space-4); }
    .admin-nav .admin-brand { flex-basis: 100%; margin-bottom: var(--space-1); }
    table { display: block; overflow-x: auto; }
    .page-header { align-items: flex-start; }
    /* Colonnes du CSV : une carte par colonne plutôt qu'un tableau étroit. */
    /* Tableaux simples (personnes, équipes) : une ligne empilée par entrée. */
    table.stack-mobile, .stack-mobile tbody, .stack-mobile tr, .stack-mobile td { display: block; }
    .stack-mobile thead { display: none; }
    .stack-mobile tr { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-line); }
    .stack-mobile tr:first-child { border-top: 0; }
    .stack-mobile td, .stack-mobile td:first-child, .stack-mobile td:last-child { padding: 0; border: 0; }
    .stack-mobile td:first-child { font-weight: 650; }
    .stack-mobile td + td { color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
    .stack-mobile td.row-actions { margin-top: var(--space-3); text-align: left; }
    .stack-mobile .user-two-factor-label { display: inline; }
    /* Imports : date et statut en tête, chiffres libellés. */
    .imports.stack-mobile tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
    .imports.stack-mobile td:nth-child(1) { flex: 1; }
    .imports.stack-mobile td:nth-child(2) { order: 1; flex-basis: 100%; }
    .imports.stack-mobile td.num { order: 2; color: var(--color-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
    .imports.stack-mobile td.num::before { content: attr(data-label) ' '; color: var(--color-muted); font-weight: 400; }
    .imports.stack-mobile td.row-actions { order: 3; flex-basis: 100%; margin-top: var(--space-1); }
    .csv-columns, .csv-columns tbody, .csv-columns tr, .csv-columns th, .csv-columns td { display: block; }
    .csv-columns thead { display: none; }
    .csv-columns tr { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-line); }
    .csv-columns tr:first-child { border-top: 0; }
    .csv-columns th, .csv-columns td { padding: 0; border: 0; }
    .csv-columns td { overflow-wrap: break-word; margin-top: var(--space-1); }
    .csv-columns select { width: 100%; max-width: none; margin-top: var(--space-2); }
    /* Verbatims */
    /* Dans la feuille : la feuille fait la carte, un champ par ligne. */
    .filter-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
    .filter-pair { flex-direction: column; gap: var(--space-3); }
    .filter-pair > label { gap: var(--space-1); font-size: var(--text-sm); }
    .verbatim-filters .filter-pair input:not([type=checkbox]):not([type=radio]), .verbatim-filters .filter-pair select { padding: .65rem .85rem; }
    .filter-group legend, .filter-group-label { margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: 650; color: var(--color-ink); }
    /* Filtres actifs : sous la recherche, des pastilles un peu plus grandes au doigt (elles passent à la ligne : une
       rangée qui défile cacherait les dernières). */
    .results-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .results-head { position: relative; }
    .results-export { position: absolute; top: -8px; right: 0; margin: 0; }
    .active-filters li.active-filter { padding: .3rem .3rem .3rem .7rem; font-size: var(--text-sm); }
    .verbatim-card { padding: var(--space-4); }
    .pagination .btn { padding-inline: .8rem; }
    .verbatim-show { grid-template-columns: minmax(0, 1fr); }
    .verbatim-detail { padding: var(--space-5); }
    .verbatim-detail-title { font-size: var(--text-lg); }
    .verbatim-detail-text { padding-left: var(--space-4); font-size: var(--text-md); }
}
.codebook-frame { display: block; }

.codebook-intro { max-width: 46rem; padding: var(--space-8); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.codebook-intro-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-4); border-radius: var(--radius-card); background: var(--ink-tint); color: var(--ink); }
.codebook-intro-icon .icon { width: 24px; height: 24px; }
.codebook-intro h2 { margin-top: 0; font-size: var(--text-lg); }
.codebook-intro-lead { font-size: var(--text-md); max-width: 38rem; }
.codebook-intro form { margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); padding: 0; list-style: none; }
.steps li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.steps strong { display: block; color: var(--color-ink); }
.steps-num { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; font-size: var(--text-sm); font-weight: 650; background: var(--ink); color: var(--on-ink); }

.codebook-generating { max-width: 46rem; padding: var(--space-10) var(--space-8); text-align: center; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.codebook-generating h2 { margin-top: 0; }
.codebook-generating p { max-width: 32rem; margin: 0 auto; color: var(--color-muted); }
.codebook-generating .notice { text-align: left; }
.spinner { display: inline-block; width: 32px; height: 32px; margin-bottom: var(--space-4); border: 3px solid var(--ink-tint); border-top-color: var(--ink); border-radius: 50%; animation: spin .9s linear infinite; }
.spinner-sm { width: 14px; height: 14px; margin: 0 var(--space-3) 0 0; border-width: 2px; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.ghost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); max-width: 46rem; margin-top: var(--space-4); }
.ghost-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); animation: breathe 1.6s ease-in-out infinite alternate; }
.ghost-card:nth-child(2) { animation-delay: .3s; }
.ghost-card:nth-child(3) { animation-delay: .6s; }
.ghost-card span { height: 10px; border-radius: 5px; background: var(--color-neutral-soft); }
.ghost-card span:first-child { width: 55%; height: 16px; }
.ghost-card span:nth-child(2) { width: 85%; }
.ghost-card span:nth-child(3) { width: 65%; }
@keyframes breathe { from { opacity: 1; } to { opacity: .45; } }

/* Plan (brouillon ou actif) et panneau d'édition : le panneau n'occupe de place qu'une fois ouvert. */
.codebook-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.codebook-panel { display: block; min-width: 0; }
.codebook-panel:not(:has(.code-panel)) { display: none; }
.codebook-head h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.codebook-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); }
.codebook-lead { max-width: 46rem; font-size: var(--text-md); color: var(--color-muted); }
.codebook-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: calc(-1 * var(--space-3)); color: var(--color-muted); }

.activation {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6);
    margin: var(--space-6) 0; padding: var(--space-5) var(--space-6);
    background: var(--surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
.activation-text { flex: 1 1 22rem; }
.activation h2 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.activation p { margin: 0; color: var(--color-muted); }
.activation form { margin: 0; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-4); align-items: start; margin-top: var(--space-6); }
.theme-card { padding: 0 var(--space-5) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); transition: border-color .15s, box-shadow .2s var(--ease-out); }
.theme-card:has(> .theme-card-head a[aria-current]) { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ring); }
.theme-card-head {
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0 calc(-1 * var(--space-5)) var(--space-4); padding: var(--space-3) var(--space-5);
    background: var(--surface-2); border-bottom: 1px solid var(--color-line); border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
/* Thèmes sans couleur : un point gris, le texte à l'encre. */
.theme-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-dot); }
.theme-card-title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-md); overflow-wrap: anywhere; }
.theme-card-link { color: var(--color-ink); text-decoration: none; }
.theme-card-link:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.code-figure { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.code-figure strong { font-size: var(--text-lg); font-weight: 650; font-variant-numeric: tabular-nums; }
.theme-card > .sentiment { margin-bottom: var(--space-3); }
.theme-card-def { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.theme-card-empty { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.subtheme-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.subtheme-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem 2.25rem; align-items: center; gap: var(--space-1) var(--space-3); padding: 7px 0; border-top: 1px solid var(--color-line); }
.subtheme-row:first-child { border-top: 0; }
.subtheme-row:has(.sentiment) { grid-template-columns: minmax(0, 1fr) auto; }
.subtheme-row .sentiment { grid-column: 1 / -1; }
/* Code (thème ou sous-thème) : pastille blanche cerclée, point gris, texte à l'encre ; aucune couleur de thème. */
.code-chip {
    display: inline-flex; align-items: center; gap: 6px;
    justify-self: start; max-width: 100%; overflow-wrap: anywhere;
    padding: .12rem .5rem .12rem .45rem; font-size: var(--text-sm); font-weight: 500; line-height: 1.4;
    color: var(--color-ink); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-line-strong);
    border-radius: var(--radius-badge); text-decoration: none;
}
.code-chip::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-dot); }
a.code-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
a.code-figure, a.code-count { color: inherit; text-decoration: none; }
a.code-figure:hover, a.code-count:hover { text-decoration: underline; text-underline-offset: 3px; }
a.code-chip[aria-current] { outline: 2px solid var(--ink); outline-offset: 1px; }
.code-count { text-align: right; font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.share-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--color-neutral-soft); }
.share-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--viz-series); opacity: .45; }
.theme-card-add { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); }
.theme-card-new { padding: var(--space-5); background: transparent; border: 1.5px dashed var(--color-line-strong); }
.inline-form { margin: 0; }
.inline-form div { margin-bottom: var(--space-3); }
.inline-form input:not([type=hidden]), .inline-form select { max-width: none; }

.sentiment { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sentiment-bar { display: flex; flex: 1; gap: 2px; min-width: 3rem; height: 8px; overflow: hidden; border-radius: 4px; background: var(--color-neutral-soft); }
.sb-neg { background: var(--color-negative-bar); }
.sb-neu { background: var(--color-neutral-bar); }
.sb-pos { background: var(--color-positive-bar); }
.sentiment-legend { display: flex; justify-content: flex-end; gap: var(--space-2); min-width: 7rem; font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-neg { color: var(--color-negative-ink); }
.sl-pos { color: var(--color-positive-ink); }
.sentiment-none { font-size: var(--text-xs); color: var(--color-muted); text-align: right; }
.subtheme-row > .sentiment-none { grid-column: 2 / -1; }

.analysis-summary { margin: var(--space-6) 0; }
.analysis-progress { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); font-weight: 500; color: var(--ink); background: var(--ink-tint); border-radius: var(--radius-control); }
.analysis-progress a { color: inherit; font-weight: 650; }
.analysis-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--space-3); }
.analysis-stats dd { font-size: var(--text-xl); }
.analysis-stats small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-warning-ink); }
.analysis-stats .is-warning { background: var(--color-warning-soft); border-color: transparent; }
.analysis-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.analysis-foot p { margin: 0; }
.analysis-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.analysis-actions form { margin: 0; }

.fold { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.fold > summary { display: flex; align-items: center; gap: var(--space-2); font-weight: 650; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; border: solid var(--color-muted); border-width: 0 1.75px 1.75px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.fold > p { margin: var(--space-2) 0 0; }
.fold-count { padding: 0 .45rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-badge); }
.retired-codes ul { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.retired-codes li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.retired-codes form { margin: 0; }
.retired-codes button.link-button { font-size: var(--text-sm); font-weight: 650; }
.changelog ol { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.changelog li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); border-top: 1px solid var(--color-line); }
.changelog time { min-width: 9.5rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.code-panel { overflow: hidden; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.code-panel-head { padding: var(--space-4) var(--space-5) var(--space-5); background: var(--surface-2); border-bottom: 1px solid var(--color-line); }
.code-panel-close { display: inline-flex; gap: var(--space-1); margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); text-decoration: none; }
.code-panel-close:hover { color: var(--color-ink); text-decoration: underline; }
.code-panel-kind { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.code-panel-head h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); overflow-wrap: anywhere; }
.code-panel-parent { font-weight: 650; color: var(--color-neutral-ink); }
.code-panel-figure { margin: 0; font-size: var(--text-sm); color: var(--color-neutral-ink); }
.code-panel-figure strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.code-panel-head .sentiment { margin-top: var(--space-2); }
.code-panel > .notice { margin: var(--space-4) var(--space-5) 0; }
.code-form, .code-panel-section { margin: 0; padding: var(--space-5); }
.code-form input:not([type=hidden]), .code-form textarea { max-width: none; }
.code-form textarea { font-size: var(--text-sm); line-height: 1.5; resize: vertical; }
.code-form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0 !important; }
.code-form-actions .help-text { margin: 0; }
.code-panel-section { border-top: 1px solid var(--color-line); }
.code-panel-section h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.code-panel-section > p { margin-bottom: var(--space-3); }
.code-panel-danger form { margin: 0; }
.code-details { padding: var(--space-5); }
.code-details > p { margin-bottom: var(--space-4); }
.code-details h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.code-details-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.code-details-list li { padding: .15rem .55rem; font-size: var(--text-sm); color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-badge); }
.code-details-examples { flex-direction: column; }
.code-details-examples li { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-ink); background: none; border-left: 2px solid var(--ink); border-radius: 0; }

@media (min-width: 900px) {
    .codebook-layout:has(> .codebook-panel .code-panel) { grid-template-columns: minmax(0, 1fr) 24rem; }
    .codebook-panel { position: sticky; top: var(--space-6); max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto; border-radius: var(--radius-card); }
}
@media (max-width: 899px) {
    /* Panneau ouvert : il remplace le plan (pleine page). */
    .codebook-layout:has(> .codebook-panel .code-panel) > .codebook-main { display: none; }
    .codebook-intro, .codebook-generating { padding: var(--space-6) var(--space-5); }
    .codebook-head h1 { font-size: var(--text-xl); }
    .steps, .ghost-grid { grid-template-columns: minmax(0, 1fr); }
    .ghost-card:nth-child(n+2) { display: none; }
    .activation { padding: var(--space-5); }
    .activation form, .activation .btn { width: 100%; }
    .activation .btn { white-space: normal; }
    .theme-grid { grid-template-columns: minmax(0, 1fr); }
    .analysis-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analysis-stats > div { padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    .ghost-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .drawer-open .sidebar, .nav-label, .btn { transition: none; }
}

/* Équipes : thèmes suivis (cases en puces aux couleurs du thème) et liste. */
.team-themes { margin: 0 0 var(--space-6); padding: 0; border: 0; }
.team-themes legend { padding: 0; margin-bottom: var(--space-1); font-weight: 650; }
.team-themes .help-text { margin: 0 0 var(--space-3); }
.theme-option { gap: var(--space-2); }
.theme-option:has(input:checked) { color: var(--ink); background: var(--ink-tint-2); }
.theme-option:has(input:checked)::after { content: '✓'; font-weight: 650; }
.team-themes-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.team-themes-list .code-chip { font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) {
    .hl, .segment-chip { transition: none; }
}

/* Graphiques des rapports (templates/components/Visual) : carte fluide (jusqu'à 320 px), périmètre en étiquettes,
   marques fines, grille discrète, valeurs en encre (jamais dans la couleur de la série), bleu/orangé au seul
   sentiment et toujours doublés d'un signe. La grille de la page (1 ou 2 colonnes sur 3) relève du rapport. */
.viz-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; height: 100%; padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.viz-title { margin: 0; font-size: var(--text-base); font-weight: 650; overflow-wrap: anywhere; }
.viz-subtitle { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.viz-perimeter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: .1rem .5rem; font-size: var(--text-xs); font-weight: 650; line-height: 1.5; color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-badge); overflow-wrap: anywhere; }
.pchip-code { color: var(--color-ink); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.pchip-code .theme-dot { width: 6px; height: 6px; }
.pchip-sentiment .sign { width: 1rem; height: 1rem; font-size: var(--text-xs); }
.pchip-warning { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.pchip-lock .icon { flex-shrink: 0; width: .8rem; height: .8rem; stroke-width: 2.25; }
.pchip-alert { display: inline-grid; place-items: center; flex-shrink: 0; width: .95rem; height: .95rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-card); background: var(--color-warning-ink); border-radius: 50%; }
.viz-body { flex: 1; min-width: 0; }
.viz-empty { display: grid; place-items: center; min-height: 7rem; padding: var(--space-6) var(--space-4); text-align: center; background: var(--viz-surface-soft); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-control); }
.viz-empty p { max-width: 22rem; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.viz-foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
/* Liens d'exploration : un seul style de lien, encre soulignée, sans flèche. */
.viz-drill, .viz-act, .period-save .link-button, .visual-preview-jump, .dashboard-more a, a.lever-more, .effect-links a, a.source-card-action, .theme-card-add, .change-links a:not(.btn), .map-more a, .topic-block-more a {
    font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px;
}
.viz-drill:hover, .viz-act:hover, .period-save .link-button:hover, .visual-preview-jump:hover, .dashboard-more a:hover, a.lever-more:hover, .effect-links a:hover, a.source-card-action:hover, .theme-card-add:hover, .change-links a:not(.btn):hover, .map-more a:hover, .topic-block-more a:hover { text-decoration-color: var(--ink); }
.viz-drill { font-size: var(--text-sm); }
.viz-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
.viz-note-top { margin: 0 0 var(--space-3); }

/* Indicateur : toute la tuile mène aux verbatims. */
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: -6px; padding: 6px; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-control); transition: background-color .15s; }
.kpi:hover { background: var(--color-hover); }
.kpi-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
/* Grands chiffres : évasés, tabulaires, à l'encre. */
.kpi-value { font-size: var(--text-3xl); font-weight: 650; line-height: 1.05; letter-spacing: -.03em; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; font-variation-settings: 'FLAR' 60; }
.kpi-unit { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
/* Ligne secondaire sans écart (« et 52 % positifs ») : texte secondaire, collée à la valeur. */
.kpi-secondary { margin-top: -4px; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.kpi-delta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Marques de base (BaseMarkExtension, une seule définition) : de 30 à 99 avis le chiffre est en gris ; sous 30, un « * »
   gris le remplace. Légende d'une ligne en tête du bloc qui en contient. */
.base-low, .kpi-base-low .kpi-value, .kpi-base-low .kpi-unit { color: var(--color-muted); }
.base-none, .kpi-base-insufficient .kpi-value, .kpi-base-insufficient .kpi-unit { color: var(--color-muted); }
.base-none { font-weight: 650; }
.base-legend { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.kpi-base-note { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.kpi-delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 5px; max-width: 100%; padding: .1rem .5rem; font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; border-radius: var(--radius-badge); }
.kpi-delta-arrow { font-size: var(--text-xs); }
.kpi-delta-vs { font-weight: 500; opacity: .85; }
/* Tuile étroite (mobile, 2 colonnes) : la pastille passe à la ligne au lieu de déborder sur la tuile voisine. */
.kpi > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
/* Évolution (composant Evolution) : verdict en couleur, mesure qui ne juge pas à l'encre, écart non significatif en gris. */
.kpi-delta.is-good { color: var(--color-positive-ink); background: var(--color-positive-soft); }
.kpi-delta.is-bad { color: var(--color-negative-ink); background: var(--color-negative-soft); }
.kpi-delta.is-plain { color: var(--ink); background: var(--color-neutral-soft); }
.kpi-delta.is-weak { padding-inline: 0; font-weight: 500; color: var(--color-muted); background: none; cursor: help; }
.kpi-compare { font-size: var(--text-xs); color: var(--color-muted); }

/* Courbes et carte (chart_controller) : hauteur fixe incluant les axes, légende en clés de trait. */
.viz-chart { position: relative; width: 100%; height: 220px; }
.viz-chart-map { height: 300px; }
.viz-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-neutral-ink); }
.viz-keys li { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; flex-shrink: 0; width: 16px; border-top: 2px solid var(--viz-series); }
.key-bar, .key-partial-bar { width: 10px; height: 10px; border: 0; border-radius: 3px; background: var(--viz-series); }
.key-compare { border-top: 2px dashed var(--viz-compare); }
.key-partial-line { position: relative; margin-right: 4px; border-top: 2px dashed var(--viz-series); }
.key-partial-line::after { content: ''; position: absolute; right: -4px; top: -5px; width: 8px; height: 8px; background: var(--color-card); border: 2px solid var(--viz-series); border-radius: 50%; box-sizing: border-box; }
.key-partial-bar { background: color-mix(in srgb, var(--viz-series) 35%, transparent); }
.viz-data { margin-top: var(--space-3); }
.viz-data > summary { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); cursor: pointer; list-style: none; }
.viz-data > summary::-webkit-details-marker { display: none; }
.viz-data > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.viz-data[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.viz-data > summary:hover { color: var(--color-ink); }
.viz-data .table-scroll { margin: var(--space-2) 0 0; max-height: 18rem; overflow-y: auto; }
.viz-data table { font-size: var(--text-sm); }
.viz-data th, .viz-data td { padding: .45rem .75rem; }
.viz-data tbody th { font-weight: 500; }
.viz-data a { text-decoration-color: var(--color-line-strong); }
.viz-partial { margin-left: 6px; padding: 0 .35rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-warning-ink); background: var(--color-warning-soft); border-radius: var(--radius-badge); white-space: nowrap; }
.viz-cell-note { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.viz-legend li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 100%; }
.viz-legend .theme-dot { width: 8px; height: 8px; border-radius: 50%; }
.viz-legend a { font-weight: 650; text-decoration: none; }
.viz-legend a:hover { text-decoration: underline; }
.viz-note-tight { margin: var(--space-2) 0 0; }
.viz-legend-ranked { counter-reset: none; }
.legend-rank { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 .2rem; font-size: var(--text-xs); font-weight: 650; color: var(--ink); background: var(--color-neutral-soft); border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.legend-flag { padding: 0 .35rem; white-space: nowrap; font-size: var(--text-xs); font-weight: 650; color: var(--color-negative-ink); background: var(--color-negative-soft); border-radius: var(--radius-badge); }

/* Barres divergentes par thème : centre = neutre, filet au milieu. */
.tbars { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.tbar-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.tbar-name:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.tbar-name .theme-dot { width: 8px; height: 8px; }
.tbar-total { font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.tbar-track { position: relative; height: 12px; margin: 6px 0 4px; }
.tbar-track::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--viz-axis); }
.tbar-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; transition: filter .15s; }
.tbar-seg:hover { filter: brightness(.92); }
.tbar-neg { background: var(--color-negative-bar); border-radius: 4px 0 0 4px; }
.tbar-neu { background: var(--color-neutral-bar); }
.tbar-pos { background: var(--color-positive-bar); border-radius: 0 4px 4px 0; }
.tbar-figures { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.tbar-figures a { text-decoration: none; white-space: nowrap; }
.tbar-figures a:hover { text-decoration: underline; }
.sl-neu { color: var(--color-neutral-ink); }

/* Top irritants / points forts. */
.top-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.top-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin: 0 -6px; padding: 7px 6px; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-control); transition: background-color .15s; }
.top-row:hover { background: var(--color-hover); }
.top-main { min-width: 0; }
.top-name { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-sm); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.top-name .theme-dot { flex-shrink: 0; width: 8px; height: 8px; transform: translateY(-1px); }
.top-parent { display: block; margin-left: 14px; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.top-bar { display: block; height: 6px; margin-top: 6px; overflow: hidden; background: var(--color-neutral-soft); border-radius: 3px; }
.top-bar > span { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.top-neg .top-bar > span { background: var(--color-negative-bar); }
.top-pos .top-bar > span { background: var(--color-positive-bar); }
.top-figures { display: grid; justify-items: end; gap: 1px; text-align: right; }
/* Part (« 14 % des plaintes ») ou nombre (« 89 plaintes ») : bouton « % / avis » au bureau, les deux sur téléphone. */
.top-share, .top-count { font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.top-count { white-space: nowrap; }
.top-of { font-weight: 500; color: var(--color-muted); }
.figure-toggle-scope:not([data-figures=count]) .top-count, .figure-toggle-scope[data-figures=count] .top-share { display: none; }
.figure-toggle { display: flex; justify-content: flex-end; gap: 2px; margin: calc(-1 * var(--space-2)) 0 var(--space-2); }
.figure-toggle-option { min-width: 2.5rem; padding: .15rem .6rem; font: inherit; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); background: var(--color-neutral-soft); border: 0; border-radius: var(--radius-control); cursor: pointer; }
.figure-toggle-option[aria-pressed=true] { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.figure-toggle-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 599px) {
    .figure-toggle { display: none; }
    .figure-toggle-scope .top-share, .figure-toggle-scope .top-count { display: block; }
    .top-count { order: -1; }
    .top-share { font-weight: 500; font-size: var(--text-xs); }
}

/* Ce qui pèse sur la note (bloc E) : gain estimé par thème, à l'encre sur barres grises (un gain n'est pas un jugement :
   l'orangé reste au sentiment) ; ce qui porte la note, bleu. */
.imp-head { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.imp-headline { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.imp-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.imp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--space-3); margin: 0 -6px; padding: 7px 6px; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-control); transition: background-color .15s; }
.imp-row:hover { background: var(--color-hover); }
.imp-main { display: grid; gap: 2px; min-width: 0; }
.imp-name { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-sm); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.imp-name .theme-dot { flex-shrink: 0; width: 8px; height: 8px; transform: translateY(-1px); }
.imp-star { font-weight: 650; color: var(--color-muted); }
.imp-facts { display: flex; flex-wrap: wrap; gap: 0 6px; margin-left: 14px; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.imp-amount { padding: 1px .5rem; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; border-radius: var(--radius-badge); }
.imp-amount.is-gain { color: var(--ink); background: var(--color-neutral-soft); }
.imp-amount.is-good { color: var(--color-positive-ink); background: var(--color-positive-soft); }
.imp-bar { grid-column: 1 / -1; display: block; height: 6px; margin-left: 14px; overflow: hidden; background: var(--color-neutral-soft); border-radius: 3px; }
.imp-bar > span { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.imp-bar.is-gain > span { background: var(--viz-bar); }
.imp-carry { margin-top: var(--space-4); }
.imp-sub { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.imp-unmeasurable { margin-top: var(--space-4); font-size: var(--text-sm); }
.imp-unmeasurable summary { cursor: pointer; font-weight: 650; color: var(--color-muted); }
.imp-unmeasurable ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.imp-unmeasurable li { margin: 2px 0; color: var(--color-muted); }
.imp-unmeasurable a { color: var(--color-ink); }
.imp-method { margin-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .imp-row { transition: none; } }

/* Mur de verbatims : toute la carte ouvre le verbatim. */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wall-item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--viz-surface-soft); border: 1px solid var(--color-line); border-radius: var(--radius-control); transition: border-color .15s, box-shadow .2s var(--ease-out); }
.wall-item:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-lift); }
.wall-item:has(.wall-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.wall-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.wall-head .star { width: 14px; height: 14px; }
.wall-link { display: flex; flex-direction: column; gap: 2px; color: var(--color-ink); text-decoration: none; }
.wall-link:focus-visible { outline: none; }
.wall-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-control); }
.wall-title { font-size: var(--text-sm); font-weight: 650; overflow-wrap: anywhere; }
.wall-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.wall-foot { margin-top: auto; font-size: var(--text-xs); }

/* Répartition par métadonnée. */
.bd-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px var(--space-3); }
.bd-label { min-width: 0; overflow: hidden; font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.bd-label:hover { text-decoration: underline; }
.bd-value { font-size: var(--text-sm); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-count { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-track { position: relative; grid-column: 1 / -1; height: 10px; overflow: hidden; background: var(--viz-track); border-radius: 5px; }
.bd-bar { display: block; height: 100%; background: var(--viz-bar); border-radius: 0 4px 4px 0; }
.bd-diverging .bd-track::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--viz-axis); }
.bd-diverging .bd-bar { position: absolute; top: 0; }
.bd-bar-pos { left: 50%; background: var(--color-positive-bar); }
.bd-bar-neg { right: 50%; background: var(--color-negative-bar); border-radius: 4px 0 0 4px; }
/* Classement (bloc C) : marque d'un écart significatif au reste, ligne grisée sous la base minimale. */
.bd-mark { display: inline-flex; align-items: baseline; gap: 3px; padding: 0 .4rem; border-radius: var(--radius-badge); }
.bd-mark.is-good { color: var(--color-positive-ink); background: var(--color-positive-soft); }
.bd-mark.is-bad { color: var(--color-negative-ink); background: var(--color-negative-soft); }
.bd-row.is-insufficient .bd-label, .bd-row.is-insufficient .bd-value { color: var(--color-muted); font-weight: 500; }
.bd-row.is-low .bd-value { color: var(--color-muted); }
.bd-row.is-insufficient .bd-bar { opacity: .4; }
.bd-legend { margin-top: var(--space-3); }

@media (max-width: 480px) {
    .viz-card { padding: var(--space-4); }
    .kpi-value { font-size: var(--text-2xl); }
    .viz-chart-map { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .kpi, .tbar-seg, .top-row, .wall-item { transition: none; }
}

/* Rapports : liste, barre de période (état dans l'URL), grille de graphiques 3 / 2 / 1 colonnes. */
.report-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.report-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: var(--space-5);
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    transition: border-color .15s, box-shadow .2s var(--ease-out);
}
.report-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-lift); }
.report-card:has(.report-card-title:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Toute la carte mène au rapport. */
.report-card-badge { align-self: flex-start; margin-bottom: var(--space-2); }
.report-card-title { font-size: var(--text-md); font-weight: 650; line-height: 1.3; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.report-card-title:focus-visible { outline: none; }
.report-card-title::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.report-card-description { display: -webkit-box; margin: var(--space-2) 0 0; overflow: hidden; font-size: var(--text-sm); color: var(--color-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.report-card-meta { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-5); font-size: var(--text-sm); color: var(--color-muted); }
.report-card-meta > span:first-child { color: var(--color-ink); }
.report-card-count { font-size: var(--text-xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: 2px; }

.template-choice { margin: 0 0 var(--space-6); padding: 0; border: 0; }
.template-choice legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 650; }
.template-options { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); max-width: 40rem; margin: 0 !important; }
.template-option {
    position: relative; display: flex; flex-direction: column; gap: var(--space-1); margin: 0;
    padding: var(--space-4) var(--space-5); font-weight: 400;
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-card);
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.template-option input { position: absolute; top: var(--space-4); right: var(--space-4); }
.template-option strong { padding-right: var(--space-6); }
.template-option span { font-size: var(--text-sm); color: var(--color-muted); }
.template-option:hover { border-color: #bec4d0; }
.template-option:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ring); }

.report-description { max-width: 46rem; margin: calc(-1 * var(--space-4)) 0 var(--space-6); color: var(--color-muted); overflow-wrap: anywhere; }
.btn[disabled] { cursor: not-allowed; opacity: .55; }
.btn[disabled]:active { transform: none; }
.btn .soon { padding: .05rem .4rem; font-size: var(--text-xs); font-weight: 650; border-radius: var(--radius-badge); background: rgb(255 255 255 / .22); }

.period-bar { margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.period-form { margin: 0; }
.period-form div { margin-bottom: 0; }
.period-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.period-presets { margin: 0; padding: 0; border: 0; min-width: 0; }
.period-cmp { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); }
.period-form .period-cmp select { width: auto; min-width: 12rem; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }
.period-dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3) !important; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.period-dates[hidden] { display: none; }
.period-dates label { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); white-space: nowrap; }
.period-bar .period-dates input[type=date][name] { width: auto; min-width: 0; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }
.period-dates .btn { padding-block: .45rem; font-size: var(--text-sm); }
.period-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
.period-summary { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.period-summary-key { margin-right: var(--space-1); font-weight: 500; color: var(--color-muted); }
.period-summary-key::after { content: ' :'; }
.period-save { margin: 0; }
/* Rechargement en cours : barre et grille atténuées. */
.period-form[aria-busy=true] { opacity: .6; cursor: progress; }
.period-bar:has(.period-form[aria-busy=true]) ~ .report-grid { opacity: .45; transition: opacity .2s; }
.period-save .link-button { font-size: var(--text-sm); }
/* Rapport par établissement : le choix de l'établissement, sous la période (même barre). */
.period-establishment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.period-establishment label { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); }
.period-establishment select { width: auto; min-width: 14rem; max-width: 100%; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }
@media (max-width: 599px) {
    .period-establishment select { flex: 1; min-width: 0; }
}

.report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
@media (min-width: 720px) {
    /* Deux colonnes : les cartes larges forcent un retour à la ligne, « dense » comble les trous. */
    .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
    .report-w2 { grid-column: span 2; }
}
@media (min-width: 1100px) {
    .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
    /* Une courbe à côté d'une carte plus haute occupe la hauteur de la rangée (canevas hors du flux : pas de boucle
       de redimensionnement avec Chart.js). */
    .report-grid .viz-timeline .viz-body { display: flex; flex-direction: column; }
    .report-grid .viz-timeline .viz-chart-timeline { flex: 1 1 220px; min-height: 220px; }
    .report-grid .viz-timeline .viz-chart-timeline canvas { position: absolute; inset: 0; }
}
@media (max-width: 599px) {
    .period-bar { padding: var(--space-3) var(--space-4); }
    .period-presets .chip-options { gap: 6px; }
    .period-presets .chip-option { padding-inline: .6rem; }
    .period-dates label { flex: 1 1 100%; }
    .period-bar .period-dates input[type=date][name] { flex: 1; }
    .period-cmp { flex: 1 1 100%; }
    .period-form .period-cmp select { flex: 1; min-width: 0; }
}

/* Actions des cartes du rapport (pied de carte) : modifier en texte, le reste en icônes discrètes. */
.viz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.viz-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.viz-actions form { display: flex; gap: 2px; margin: 0; }
.viz-edit { display: inline-flex; align-items: center; gap: 5px; margin-right: var(--space-1); padding: .3rem .55rem; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); text-decoration: none; border-radius: var(--radius-badge); transition: background-color .15s, color .15s; }
.viz-edit .icon { width: 15px; height: 15px; }
/* Carte étroite : « Modifier » en icône seule (libellé conservé pour les lecteurs d'écran). */
.report-grid > .viz-card { container-type: inline-size; }
@container (max-width: 380px) {
    .viz-edit, .viz-action { width: 1.9rem; height: 1.9rem; }
    .viz-edit { padding: 0; justify-content: center; margin-right: 0; }
    .viz-edit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.viz-action { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; color: var(--color-muted); background: none; border: 0; border-radius: var(--radius-badge); cursor: pointer; transition: background-color .15s, color .15s; }
.viz-action .icon { width: 17px; height: 17px; }
.viz-edit:hover, .viz-action:hover { color: var(--color-ink); background: var(--color-hover); }
.viz-action-danger:hover { color: var(--ink); background: var(--color-hover); }
.viz-card.is-editing { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ring); }
.viz-card { transition: border-color .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.viz-card.is-revealed { border-color: var(--ink); box-shadow: 0 0 0 4px var(--ink-ring); transition-duration: .2s; }
.report-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    align-self: start; min-height: 10rem; padding: var(--space-5); font-weight: 650; color: var(--ink); text-decoration: none;
    border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-card);
    transition: border-color .15s, background-color .15s;
}
.report-add:hover { border-color: var(--ink); background: var(--surface-2); }
.report-add-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--ink-tint-2); }
.page-header-actions .btn .icon { width: 18px; height: 18px; }
/* Actions d'en-tête (option B) : une seule action principale en pilule à l'encre, toutes les autres en bouton rond sans
   texte (libellé en infobulle et aria-label). */
.page-header-actions { align-items: center; }
.page-header-actions form { margin: 0; display: contents; }
.btn-pill { border-radius: 999px; padding: .55rem 1.15rem .55rem 1rem; }
.btn-round {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0;
    font: inherit; color: var(--color-neutral-ink); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
    text-decoration: none; transition: background-color .15s, color .15s, transform .1s var(--ease-out);
}
.btn-round .icon { width: 20px; height: 20px; }
.btn-round:hover { color: var(--color-ink); background: var(--color-hover); }
.btn-round:active { transform: scale(.94); }
.btn-round:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (max-width: 720px) {
    .btn-round { width: 40px; height: 40px; }
    .page-header-actions { flex-wrap: nowrap; max-width: 100%; }
    .page-header-actions .btn-pill { min-width: 0; white-space: normal; text-align: left; line-height: 1.25; }
    .page-header-actions .btn-pill .icon { flex: none; }
}

/* Éditeur de graphiques : panneau à droite du rapport (≥ 1100 px), page entière en dessous. Aperçu en haut, quatre
   temps de réglages, pied d'actions toujours visible. */
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.report-main { min-width: 0; }
.visual-panel-frame { display: block; min-width: 0; }
.visual-panel-frame:not(:has(.visual-panel)) { display: none; }
.visual-panel { display: flex; flex-direction: column; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.visual-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); }
.visual-panel-titles { min-width: 0; }
.visual-panel-eyebrow { margin: 0 0 2px; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); overflow-wrap: anywhere; }
.visual-panel-head h2 { margin: 0; font-size: var(--text-lg); }
.visual-panel-close { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: .35rem .6rem; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); text-decoration: none; border-radius: var(--radius-control); transition: background-color .15s; }
.visual-panel-close:hover { color: var(--color-ink); background: var(--color-hover); }
.visual-panel-close .icon { width: 16px; height: 16px; }
.visual-panel-notice { margin: var(--space-3) var(--space-5) 0; font-size: var(--text-sm); color: var(--color-warning-ink); background: var(--color-warning-soft); }

.visual-preview { padding: var(--space-3) var(--space-5) var(--space-4); background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.visual-preview-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); }
.visual-preview-period { font-weight: 500; }
.visual-preview-frame { display: block; }
.visual-preview-body { transition: opacity .2s; }
.visual-preview-frame[aria-busy=true] .visual-preview-body, .visual-preview-frame[busy] .visual-preview-body { opacity: .55; }
.visual-preview-body > .viz-card { height: auto; padding: var(--space-4); box-shadow: var(--shadow-lift); }
/* Aperçu compact : ni tableau de données ni lien d'exploration pendant l'édition, courbes moins hautes. */
.visual-preview .viz-data, .visual-preview .viz-foot { display: none; }
.visual-preview .viz-chart { height: 180px; }
.visual-preview .viz-chart-map { height: 240px; }
.visual-preview-empty { display: grid; place-items: center; min-height: 8.5rem; padding: var(--space-5); text-align: center; background: var(--color-card); border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-card); }
.visual-preview-empty p { max-width: 22rem; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

.visual-form { display: flex; flex-direction: column; margin: 0; }
.visual-form div { margin-bottom: 0; }
.visual-step { min-width: 0; margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); border: 0; border-bottom: 1px solid var(--color-line); }
.visual-step:last-child { border-bottom: 0; }
.visual-step > legend { float: left; display: flex; align-items: center; gap: var(--space-2); width: 100%; margin: 0 0 var(--space-3); padding: 0; font-weight: 650; }
.visual-step > legend + * { clear: both; }
.visual-steps { counter-reset: step; }
.visual-step { counter-increment: step; }
.step-num::before { content: counter(step); }
.step-num { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; font-size: var(--text-xs); font-weight: 650; color: var(--ink); background: var(--ink-tint-2); border-radius: 50%; }
.step-hint { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.visual-step > ul { clear: both; }

.type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.type-option {
    position: relative; display: flex; align-items: center; gap: var(--space-3); margin: 0;
    padding: var(--space-2) var(--space-3); font-weight: 400;
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
    cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.type-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-option:hover { border-color: #bec4d0; background: var(--color-hover); }
.type-option:has(input:checked) { border-color: var(--ink); background: var(--ink-tint); }
.type-option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.type-pict { flex: none; width: 44px; height: 30px; color: #8c93a3; }
.type-option:has(input:checked) :is(.type-pict, .type-option-text strong) { color: var(--ink); }
.type-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.type-option-text strong { font-size: var(--text-sm); }
.type-option-text span { font-size: var(--text-xs); color: var(--color-muted); }

.visual-step .visual-field, .visual-step .visual-needs-type { margin-top: var(--space-4); }
.visual-step > legend + .visual-field { margin-top: 0; }
.visual-label { display: block; margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.visual-label-hint { margin-left: var(--space-1); font-weight: 500; color: var(--color-muted); }
.visual-form :is(select, input[type=text], input[type=number]) { max-width: none; margin-top: 0; padding: .5rem .8rem; font-size: var(--text-sm); }
.visual-form select:not([multiple]) { padding-right: 2.2rem; }
.visual-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { max-width: none; }
.visual-limit { max-width: 10rem; }
.visual-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.visual-sublabel { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); }
.visual-sublabel > :is(select, input) { flex: 1; min-width: 0; }
.visual-sources { margin-top: var(--space-3); }
.visual-sources[hidden] { display: none; }
.code-options { display: flex; flex-direction: column; gap: var(--space-2); max-height: 15rem; overflow-y: auto; padding: var(--space-3); background: var(--viz-surface-soft); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.code-group { display: flex; flex-wrap: wrap; gap: 6px; }
.code-group .chip-option { padding: .25rem .65rem; font-size: var(--text-sm); }
.code-group .chip-option.is-theme { font-weight: 650; }
.visual-check { display: flex; align-items: center; gap: var(--space-2); }
.visual-check label { margin: 0; font-weight: 500; }
.visual-form [data-field] > ul { margin-top: var(--space-2); }

.visual-form-foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--color-card); border-top: 1px solid var(--color-line); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.visual-preview-jump { margin-left: auto; font-size: var(--text-sm); }

@media (min-width: 1100px) {
    .report-layout:has(> .visual-panel-frame .visual-panel) { grid-template-columns: minmax(0, 1fr) 31rem; }
    .visual-panel-frame { position: sticky; top: var(--space-6); }
    .visual-panel { max-height: calc(100vh - 2 * var(--space-6)); overflow: hidden; }
    .visual-preview { flex: none; max-height: 48vh; overflow-y: auto; }
    .visual-form { flex: 1; min-height: 0; }
    .visual-steps { flex: 1; min-height: 0; overflow-y: auto; }
    .visual-form-foot { position: static; }
    .visual-preview-jump { display: none; }
    /* Rapport à côté du panneau : une colonne, deux si la place le permet. */
    .report-layout:has(.visual-panel) .report-main { container-type: inline-size; }
    .report-layout:has(.visual-panel) .report-grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
    .report-layout:has(.visual-panel) .report-w2 { grid-column: auto; }
    @container (min-width: 46rem) {
        .report-layout:has(.visual-panel) .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
        .report-layout:has(.visual-panel) .report-w2 { grid-column: span 2; }
    }
}
@media (max-width: 1099px) {
    /* Panneau ouvert : il remplace le rapport (pleine page). Aperçu borné : les réglages restent à portée. */
    .report-layout:has(> .visual-panel-frame .visual-panel) > .report-main { display: none; }
    .visual-preview-body { max-height: 62vh; overflow-y: auto; border-radius: var(--radius-card); }
}
@media (max-width: 599px) {
    .visual-panel-head, .visual-preview, .visual-step, .visual-form-foot { padding-inline: var(--space-4); }
    .type-options { grid-template-columns: minmax(0, 1fr); }
    .visual-form-foot .btn { flex: 1; }
    .visual-preview-jump { flex-basis: 100%; margin: 0; text-align: center; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    .viz-card, .viz-card.is-revealed, .type-option, .visual-preview-body, .report-add, .viz-action, .viz-edit { transition: none; }
}

/* Actions */
.action-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.action-filters > div, .action-filters .sheet-body > div { margin: 0; min-width: 11rem; }
.action-filters select { width: 100%; max-width: none; }
.action-filters label { margin-top: 0; }
.action-filters .action-mine { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 .65rem; font-weight: 650; }
.action-table { width: 100%; }
.action-title { display: block; font-weight: 650; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.action-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.action-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.action-retired { white-space: normal; }
.action-effect { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.action-effect-label { font-size: var(--text-sm); color: var(--color-muted); }
.action-effect-measure { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--text-sm); font-weight: 500; }

.action-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.action-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.action-facts div { margin: 0; }
.action-facts dt { font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); }
.action-facts dd { margin: var(--space-1) 0 0; font-weight: 650; overflow-wrap: anywhere; }
.action-quick { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.action-quick form, .action-quick form div { margin: 0; }
.action-description, .action-effect-panel, .action-tasks { margin-bottom: var(--space-6); }
.action-description h2, .action-effect-panel h2, .action-tasks h2 { margin-top: 0; }
.action-description p:last-child { margin-bottom: 0; }
/* Fiche d'un pilote : encre et gris, jamais les couleurs du sentiment. */
.pilot-panel { margin-bottom: var(--space-6); }
.pilot-panel h2 { margin-top: 0; }
.pilot-status { margin: 0 0 var(--space-3); font-weight: 650; }
.pilot-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.pilot-group h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); }
.pilot-group ul, .pilot-removed { margin: 0; padding: 0; list-style: none; }
.pilot-group li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; overflow-wrap: anywhere; }
.pilot-sentence { margin: 0 0 var(--space-3); line-height: 1.5; }
.pilot-decision { margin: var(--space-3) 0; font-weight: 650; }
.pilot-decisions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
.pilot-decisions form { margin: 0; }
.pilot-remove { font-size: var(--text-sm); color: var(--color-muted); }
.pilot-removed { margin-top: var(--space-4); }
.pilot-alert { margin: var(--space-3) 0; }
.pilot-alert p { margin: 0 0 var(--space-1); }
.pilot-alert form { margin: 0; }
@media (max-width: 40rem) { .pilot-groups { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }
.action-form-grid { max-width: 60rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--space-5); }
.action-form-grid select, .action-form-grid input { max-width: none; }
/* Boutons d'un formulaire d'action (« Créer l'action », « Créer et lancer en pilote »). */
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }

/* Montage d'un pilote : pilotes et témoins à l'encre et au gris (jamais les couleurs du sentiment). */
.pilot-intro { max-width: 44rem; }
.pilot-setup fieldset { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.pilot-setup legend { margin-bottom: var(--space-2); font-weight: 650; }
.pilot-options { max-width: 40rem; max-height: 18rem; }
.pilot-engaged { margin: 0; color: var(--color-muted); cursor: default; }
.pilot-figures { margin-left: auto; padding-left: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.pilot-witnesses { max-width: 40rem; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.pilot-witnesses h2 { margin-top: 0; }
.pilot-witnesses-origin { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.pilot-list { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.pilot-witness { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-control); cursor: pointer; }
.pilot-witness[hidden] { display: none; }
.pilot-witness input { flex: none; }
.pilot-witness-name { font-weight: 600; }
.pilot-witness .pilot-figures { margin-left: 0; padding-left: 0; }
.pilot-witness:has(input:not(:checked)) .pilot-witness-name { color: var(--color-muted); font-weight: 500; }
.pilot-addable { margin: var(--space-3) 0; }
.pilot-addable summary { cursor: pointer; font-weight: 600; margin-bottom: var(--space-2); }

.action-effect-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.action-effect-head h2 { margin: 0 var(--space-2) 0 0; }
.effect-compare { margin: var(--space-4) 0; border: 1px solid var(--color-line); border-radius: var(--radius-control); overflow: hidden; }
.effect-compare-head, .effect-compare-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); align-items: center; }
.effect-compare-head { background: var(--viz-surface-soft); font-size: var(--text-sm); font-weight: 650; }
.effect-compare-head small { display: block; font-weight: 400; color: var(--color-muted); }
.effect-compare-row { border-top: 1px solid var(--color-line); }
.effect-metric { font-weight: 650; }
.effect-value { font-size: var(--text-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.effect-value .kpi-delta { margin-left: var(--space-2); vertical-align: middle; font-size: var(--text-xs); }
.followup-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.followup-measure { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.followup-measure-label { color: var(--color-muted); }
.followup-links { margin: var(--space-2) 0 0; }
.effect-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.effect-curve-title { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-base); }

.task-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.task { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.task:first-child { border-top: 0; }
.task form, .task form div { margin: 0; }
.task-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task.is-done .task-label { color: var(--color-muted); text-decoration: line-through; }
.task-box { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; font: inherit; font-weight: 650; color: var(--color-card); cursor: pointer; background: var(--color-card); border: 2px solid var(--color-line-strong); border-radius: var(--radius-badge); }
.task.is-done .task-box { background: var(--ink); border-color: var(--ink); }
.task-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.task-remove { font-size: var(--text-sm); color: var(--color-muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.task-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0; }
.task-add > div { flex: 1 1 14rem; margin: 0; }
.task-add input { max-width: none; }

@media (min-width: 900px) {
    .action-table td { vertical-align: top; }
}
@media (max-width: 899px) {
    .action-filters > div { flex: 1 1 100%; }
    .action-table, .action-table tbody, .action-table tr, .action-table td { display: block; }
    .action-table thead { display: none; }
    .action-table { background: none; border: 0; }
    /* Carte d'action compacte : titre ; thème, statut, échéance ; équipe et effet. */
    .action-table tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3);
        margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4);
        background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    }
    .action-table td { padding: 0; border: 0; font-size: var(--text-sm); color: var(--color-muted); }
    .action-table td.action-main { display: contents; }
    .action-table .action-title { flex-basis: 100%; order: 0; color: var(--color-ink); font-size: var(--text-base); }
    .action-table .action-code, .action-table .action-perimeter { order: 1; margin: 0; }
    .action-table td:nth-child(4) { order: 2; }
    .action-table td:nth-child(3) { order: 3; }
    .action-table td:nth-child(2) { order: 4; }
    .action-table td.action-effect { order: 5; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
    .action-table td[data-label="Échéance"]::before { content: 'échéance '; }
    .effect-compare-head, .effect-compare-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .effect-compare-head > :first-child { display: none; }
    .effect-metric { grid-column: 1 / -1; }
    .effect-compare-head > :nth-child(2) { grid-column: 1; }
}

/* Leviers : une carte par groupe (thèmes qui se dégradent, qui pèsent lourd), une ligne repliable par thème, en
   colonnes alignées (en-têtes .lever-cols et résumé .lever-row-head partagent la grille). */
.lever-intro { max-width: 46rem; }
.lever-group { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); }
.lever-none { max-width: 46rem; padding: var(--space-4) var(--space-5); color: var(--color-muted); background: var(--color-card); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-card); }
.lever-table { padding: 0; overflow: hidden; }
.lever-cols, .lever-row-head { display: grid; grid-template-columns: minmax(0, 2.6fr) 1.1fr 1.3fr .7fr 1fr .9fr 28px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); }
.lever-cols { font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); background: var(--surface-2); border-bottom: 1px solid var(--color-line); }
.lever-cols [data-tooltip] { width: fit-content; }
.lever-row + .lever-row { border-top: 1px solid var(--color-line); }
/* Thème demandé, amené à l'écran (contrôleur reveal) : souligné un instant, à l'intérieur de la carte (overflow caché). */
.lever-row { outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .6s; }
.lever-row.is-revealed { outline-color: var(--ink); transition-duration: .2s; }
@media (prefers-reduced-motion: reduce) { .lever-row, .lever-row.is-revealed { transition: none; } }
.lever-row-head { cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
.lever-row-head::-webkit-details-marker { display: none; }
.lever-row-head:hover, .lever-row[open] > .lever-row-head { background: var(--surface-2); }
.lever-row-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lever-row-head > * { min-width: 0; }
.lever-theme { font-weight: 650; overflow-wrap: anywhere; }
.lever-share-of, .lever-team-cell, .lever-row-head .is-empty { color: var(--color-muted); }
.lever-gain-cell { font-weight: 650; }
.lever-evo .kpi-delta-vs { display: none; }
.lever-chev { justify-self: end; width: 8px; height: 8px; margin-right: 6px; border: solid var(--color-muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.lever-row[open] .lever-chev { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .lever-chev { transition: none; } }
.lever-row-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); padding: var(--space-5); border-top: 1px dashed var(--color-line); }
.lever-voices, .lever-ideas { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.lever-voices > *, .lever-ideas > * { margin: 0; }
.lever-label { margin: 0; font-size: var(--text-xs); font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--color-muted); }
.lever-team { display: none; font-size: var(--text-sm); color: var(--color-muted); }
.lever-more { width: fit-content; font-size: var(--text-sm); }
.lever-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.lever-list { display: grid; margin: 0; padding: 0; list-style: none; }
.lever { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.lever-ideas .lever:first-child { padding-top: 0; border-top: 0; }
.lever-ideas .lever:last-child { padding-bottom: 0; }
.code-panel-levers .lever-list { margin: var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--color-line); }
.lever-body { min-width: 0; }
.lever-title { margin: 0; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.lever-text { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.lever-why { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.lever-why summary { cursor: pointer; width: fit-content; list-style: none; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; border-radius: 3px; }
.lever-why summary::-webkit-details-marker { display: none; }
.lever-why summary:hover { color: var(--color-ink); }
.lever-why summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lever-why p { margin: var(--space-1) 0 0; }
.lever-dismiss { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; border-radius: var(--radius-control); color: var(--color-muted); cursor: pointer; }
.lever-dismiss:hover { background: var(--color-hover); color: var(--color-ink); }
.btn-sm { padding: .3rem .7rem; font-size: var(--text-sm); }
@media (max-width: 900px) { .lever { grid-template-columns: 1fr; } }
.lever-quotes { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.lever-quotes li { padding-left: var(--space-3); font-size: var(--text-sm); border-left: 2px solid var(--color-line-strong); overflow-wrap: anywhere; }
.lever-quotes a { color: var(--color-ink); text-decoration: none; }
.lever-quotes a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Rangée de boutons : fiche de code (codification) ; sous une piste, serrée et centrée. */
.lever-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); }
.lever .lever-actions { align-items: center; gap: var(--space-1); }
.lever-actions form, .lever-actions form div, .lever-suggest { margin: 0; }
.lever-suggest { display: inline-block; }
.lever-pending { display: flex; align-items: center; margin: 0 0 var(--space-3); color: var(--color-muted); }
.lever-pending:has(~ [data-poll-target=timeout]:not([hidden])) { display: none; }
.lever-accepted { display: grid; gap: var(--space-2); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.lever-accepted li { padding: var(--space-2) var(--space-3); background: var(--color-neutral-soft); border-radius: var(--radius-badge); overflow-wrap: anywhere; }
.lever-accepted a { font-weight: 650; color: var(--ink); }
/* Téléphone : pas d'en-têtes de colonnes ; sous le thème, la part, l'évolution, le gain et la pastille à la suite
   (cellules vides masquées, pas de séparateur) ; l'équipe passe dans le thème déplié, les pistes avant les citations. */
@media (max-width: 900px) {
    .lever-cols { display: none; }
    .lever-row-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) calc(var(--space-4) + 28px) var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }
    .lever-theme { flex: 1 0 100%; font-size: var(--text-base); color: var(--color-ink); }
    .lever-share-of, .lever-team-cell, .lever-row-head .is-empty { display: none; }
    .lever-share-value { color: var(--color-ink); }
    .lever-share::after { content: ' négatifs' / ''; }
    /* Base insuffisante : « * » à la place de la part, les nombres restent pour situer le thème. */
    .lever-share:has(.base-none) .lever-share-of { display: inline; }
    .lever-gain-cell { color: var(--color-ink); }
    .lever-gain-cell::before { content: 'gain '; content: 'gain ' / ''; font-weight: 400; color: var(--color-muted); }
    .lever-chev { position: absolute; top: calc(var(--space-3) + 6px); right: var(--space-4); margin: 0; }
    .lever-row-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); }
    .lever-voices { order: 2; }
    .lever-team { display: block; }
}
.viz-act { font-size: var(--text-xs); white-space: nowrap; }
.tbar-head .viz-act { margin-left: auto; }
.top-list > li { display: grid; }
.top-list .viz-act { justify-self: end; padding-bottom: 2px; }
@media (max-width: 599px) {
    .lever-actions .btn:not(.lever-create) { flex: 1 1 100%; }
}

/* Dashboards : onglets, blocs. */
.dashboard-tabs { display: flex; gap: var(--space-5); margin-bottom: var(--space-6); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--color-line); }
.dashboard-tabs::-webkit-scrollbar { display: none; }
.dashboard-tabs a { flex: none; padding-top: .6rem; white-space: nowrap; }
.dashboard-head h1 { margin: 0; }
.dashboard-date { margin: 0; color: var(--color-muted); font-size: var(--text-base); }
.period-bar:has(.period-form[aria-busy=true]) ~ .dashboard-body { opacity: .45; transition: opacity .2s; }
.dashboard-blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); }
.dashboard-block { min-width: 0; container-type: inline-size; }
.dashboard-block-title { margin-top: 0; margin-bottom: var(--space-3); font-size: var(--text-md); }
.dashboard-block .viz-title a { color: inherit; text-decoration: none; }
.dashboard-block .viz-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dashboard-block-error, .dashboard-block-empty { margin: 0; padding: var(--space-5); color: var(--color-muted); background: var(--color-card); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-card); }
@media (min-width: 900px) {
    .dashboard-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-block-w2 { grid-column: span 2; }
}
.dashboard-basis { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kpi-tile { min-width: 0; padding: var(--space-4) var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.kpi-tile-label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); letter-spacing: 0; }
.kpi-tile-empty { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.kpi-tile .kpi-value { font-size: var(--text-2xl); }
/* « en retard » : ambre (statut), jamais l'orangé du sentiment. */
.kpi-late { display: inline-flex; align-items: center; padding: .1rem .55rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-warning-ink); background: var(--color-warning-soft); border-radius: var(--radius-badge); }
/* 4 colonnes quand le bloc est assez large (largeur 2 sur bureau), 2 sinon. */
@container (min-width: 560px) {
    .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
    .kpi-tile { padding: var(--space-5) var(--space-5) var(--space-4); }
    .kpi-tile .kpi-value { font-size: var(--text-3xl); }
}

.change-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.change-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.change-text { display: flex; gap: var(--space-2); margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.change-arrow { flex: none; }
.change-item.is-improving .change-arrow { color: var(--color-positive-ink); }
.change-item.is-degrading .change-arrow { color: var(--color-negative-ink); }
.change-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.change-links .btn { padding-block: .35rem; font-size: var(--text-sm); }
.change-empty { padding: var(--space-4) var(--space-5); color: var(--color-muted); background: var(--color-card); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-card); }

.dashboard-no-themes { margin-bottom: var(--space-5); }
.team-subtheme-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.team-subtheme-row { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.team-subtheme-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.team-subtheme-name { margin: 0; font-size: var(--text-md); }
.team-subtheme-figures { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.team-subtheme-figures strong { color: var(--color-ink); }
.team-subtheme-quotes { display: grid; gap: var(--space-1); margin: 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--ink); list-style: none; font-size: var(--text-sm); overflow-wrap: anywhere; }
.team-subtheme-quotes a { color: inherit; text-decoration: none; }
.team-subtheme-quotes a:hover { text-decoration: underline; text-underline-offset: 3px; }
.team-subtheme-levers { margin: 0; font-size: var(--text-sm); font-weight: 650; }

.dashboard-more { margin: var(--space-3) 0 0; }

/* Modifier un dashboard : bouton Modifier / Terminer, barre du dashboard (titre, réinitialiser, supprimer), outils de
   chaque bloc (icônes seules dans un bloc étroit), catalogue « Ajouter un bloc ». Pas de glisser-déposer. */
.dashboard-head { align-items: center; }
.dashboard-head-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-width: 0; }
.dashboard-edit-toggle .icon { width: 18px; height: 18px; }
.dashboard-tabs a.dashboard-tab-new { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 650; }
.dashboard-tabs a.dashboard-tab-new .icon { width: 16px; height: 16px; }
.dashboard-edit-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5); padding: var(--space-4); background: var(--ink-tint); border-radius: var(--radius-card);
}
.dashboard-rename { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); flex: 1 1 20rem; margin: 0; }
.dashboard-rename > div { flex: 1 1 14rem; margin: 0; }
.dashboard-rename label { margin-top: 0; }
.dashboard-rename input:not([type=hidden]) { max-width: none; }
.dashboard-reset, .dashboard-delete { margin: 0; }
.dashboard-edit-bar .btn .icon { width: 18px; height: 18px; }

.dashboard-blocks.is-editing { gap: var(--space-5); }
.dashboard-blocks.is-editing > .dashboard-block { padding: var(--space-3); border: 1.5px dashed var(--color-line-strong); border-radius: calc(var(--radius-card) + 4px); }
.dashboard-block { transition: border-color .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.dashboard-block:focus { outline: none; }
.dashboard-block:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.dashboard-block.is-revealed { border-color: var(--ink); border-radius: calc(var(--radius-card) + 4px); box-shadow: 0 0 0 4px var(--ink-ring); transition-duration: .2s; }
.block-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3); }
.block-tools-type { min-width: 0; font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.block-tools-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-left: auto; }
.block-tools-actions > form { display: flex; gap: var(--space-1); margin: 0; }
.block-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 2.5rem; height: 2.5rem; padding: 0 .7rem;
    font: inherit; font-size: var(--text-sm); font-weight: 650; color: var(--color-neutral-ink); white-space: nowrap; list-style: none;
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.block-tool::-webkit-details-marker { display: none; }
.block-tool .icon { width: 17px; height: 17px; flex: none; }
.block-tool:hover:not(:disabled) { color: var(--color-ink); background: var(--color-hover); }
.block-tool:disabled { opacity: .4; cursor: default; }
.block-tool-danger:hover:not(:disabled) { color: var(--ink); background: var(--color-hover); border-color: var(--ink); }
@container (max-width: 640px) {
    .block-tool { padding: 0; }
    .block-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.block-configure { position: relative; }
.block-configure[open] > summary { color: var(--ink); background: var(--ink-tint); border-color: var(--ink); }
.block-configure-form {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(17rem, calc(100vw - 2 * var(--space-4)));
    margin: 0; padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
}
.block-configure-form fieldset { margin: 0 0 var(--space-3); padding: 0; border: 0; }
.block-configure-form legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 650; }
.block-configure-form .check { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: .4rem 0; font-weight: 500; }
.block-configure-limit { margin: 0 0 var(--space-3); }
.block-configure-limit input:not([type=hidden]) { max-width: 7rem; }
.block-configure-form .form-error { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 650; }
.block-configure-form .btn { width: 100%; }

.dashboard-add {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); min-height: 5rem; padding: var(--space-4);
    font-weight: 650; color: var(--ink); text-decoration: none;
    border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-card); transition: border-color .15s, background-color .15s;
}
.dashboard-add:hover { border-color: var(--ink); background: var(--surface-2); }
.dashboard-add-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--ink-tint-2); }

.block-catalog { margin-top: var(--space-5); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.block-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.block-catalog-head h2 { margin: 0; font-size: var(--text-lg); }
.block-catalog-head h2:focus { outline: none; }
.block-catalog-sub { margin: var(--space-6) 0 var(--space-3); padding: 0; font-size: var(--text-md); font-weight: 650; }
.block-catalog .back { margin: 0; }
.block-types { margin: 0; }
.block-type-list, .block-report-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) {
    .block-type-list, .block-report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.block-type {
    display: grid; gap: 4px; width: 100%; height: 100%; padding: var(--space-3) var(--space-4); font: inherit; color: inherit; text-align: left;
    background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-card); cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.block-type:hover, .block-report-list a:hover { border-color: var(--ink); background: var(--ink-tint); }
.block-type-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 650; color: var(--ink); }
.block-type-name .icon { width: 18px; height: 18px; flex: none; }
.block-type-text { font-size: var(--text-sm); color: var(--color-muted); }
.block-report-list a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3rem; padding: var(--space-3) var(--space-4);
    font-weight: 650; color: var(--color-ink); text-decoration: none; border: 1px solid var(--color-line); border-radius: var(--radius-card);
    transition: border-color .15s, background-color .15s;
}
.block-report-name { min-width: 0; overflow-wrap: anywhere; }
.block-report-count { flex: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.block-visuals { margin: 0; }
.block-visuals fieldset { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.block-visual-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4);
    font-weight: 650; border: 1px solid var(--color-line); border-radius: var(--radius-card); cursor: pointer;
}
.block-visual-option input { grid-row: span 2; }
.block-visual-name { overflow-wrap: anywhere; }
.block-visual-type { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.block-visual-option:has(input:checked:not(:disabled)) { border-color: var(--ink); background: var(--ink-tint); }
.block-visual-option.is-present { cursor: default; background: var(--color-bg); }
.block-visuals .form-error { margin: var(--space-3) 0 0; font-weight: 650; }
.block-visuals .btn { margin-top: var(--space-4); }
@media (max-width: 599px) {
    .block-catalog { padding: var(--space-4); }
    .block-visuals .btn { width: 100%; }
}

/* « Ajouter à un dashboard » sur une carte de rapport : menu ouvert au-dessus du bouton, aligné à droite de la carte. */
.pin-menu { position: relative; }
.pin-menu > summary { list-style: none; }
.pin-menu > summary::-webkit-details-marker { display: none; }
.pin-menu[open] > summary { color: var(--ink); background: var(--ink-tint-2); }
.viz-actions .pin-menu-form {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; display: block; width: max-content; min-width: 13rem; max-width: min(20rem, calc(100vw - 2 * var(--space-4)));
    margin: 0; padding: var(--space-2); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
}
.pin-menu-title { margin: var(--space-1) var(--space-2) var(--space-2); font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); }
.pin-menu-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pin-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 2.5rem; padding: .45rem var(--space-2);
    font: inherit; font-size: var(--text-sm); font-weight: 650; text-align: left; color: var(--color-ink); background: none; border: 0; border-radius: var(--radius-badge); cursor: pointer;
}
.pin-menu-item:hover:not(:disabled) { background: var(--color-hover); }
.pin-menu-item:disabled { color: var(--color-muted); cursor: default; }
.pin-menu-name { min-width: 0; overflow-wrap: anywhere; }
.pin-menu-done { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: var(--text-xs); font-weight: 500; }
.pin-menu-done .icon { width: 14px; height: 14px; }
.flash a { color: inherit; font-weight: 650; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .dashboard-block, .dashboard-block.is-revealed, .block-tool, .block-type, .block-report-list a, .dashboard-add { transition: none; }
}

/* Mobile : champs en 16 px au moins. En dessous, Safari iOS zoome la page en touchant un champ (dès la connexion) et
   garde ce zoom ensuite : la page paraît déborder et il faut pincer pour tout voir. Les tailles réduites des formulaires
   compacts (barre de période, éditeur de graphique, filtres…) restent sur ordinateur. */
@media (max-width: 899px), (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea { font-size: 16px !important; }
}

/* Feuille (composant Sheet) : contenu en ligne sur ordinateur, feuille modale qui monte du bas sur mobile. */
form .sheet, form .sheet-bar, form .sheet-body { margin: 0; }
.sheet-open {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: .5rem .95rem; font: inherit; font-weight: 650; font-size: var(--text-sm); color: var(--color-ink);
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
    cursor: pointer; transition: background-color .15s;
}
.sheet-open:hover { background: var(--color-hover); }
.sheet-open .icon { width: 18px; height: 18px; color: var(--color-muted); }
@media (min-width: 900px) {
    .sheet:not(.sheet-always), .sheet:not(.sheet-always) .sheet-dialog, .sheet:not(.sheet-always) .sheet-body { display: contents; }
    .sheet:not(.sheet-always) :is(.sheet-bar, .sheet-head, .sheet-foot) { display: none; }
    /* Feuille « toujours » (période des dashboards) : la puce et « Changer » en ligne, la feuille en fenêtre au centre. */
    .sheet-always .sheet-bar { display: flex; align-items: center; gap: var(--space-3); }
    .sheet-always .sheet-dialog {
        width: min(40rem, calc(100vw - 4rem)); max-height: calc(100dvh - 4rem); margin: auto; padding: 0; overflow: hidden;
        color: var(--color-ink); background: var(--color-card); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
    }
    .sheet-always .sheet-dialog[open] { display: flex; flex-direction: column; }
    .sheet-always .sheet-dialog::backdrop { background: rgb(19 27 54 / .45); }
    .sheet-always .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-line); }
    .sheet-always .sheet-title { margin: 0; font-size: var(--text-lg); font-weight: 650; }
    .sheet-always .sheet-title:focus { outline: none; }
    .sheet-always .sheet-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--color-muted); background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; }
    .sheet-always .sheet-close:hover { color: var(--color-ink); background: var(--color-hover); }
    .sheet-always .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); }
    .sheet-always .sheet-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-line); }
    .sheet-always .period-dates .btn { display: none; }
    .period-bar-compact { display: inline-flex; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
    .period-bar-compact .period-compact { margin: 0; font-size: var(--text-sm); font-weight: 650; }
    .period-bar-compact .sheet-open { padding: .35rem .8rem; font-size: var(--text-sm); }
    .verbatim-filters .filter-grid { margin-top: var(--space-3); }
}
@media (max-width: 899px) {
    .sheet-bar { display: flex; align-items: center; gap: var(--space-3); }
    .filter-more .sheet-bar { margin-top: var(--space-3); }
    .sheet-dialog {
        position: fixed; inset: auto 0 0; width: 100%; max-width: none; height: auto; max-height: calc(100dvh - var(--space-6));
        margin: 0; padding: 0; overflow: hidden;
        color: var(--color-ink); background: var(--color-card); border: 0; border-radius: var(--radius-card) 20px 0 0; box-shadow: var(--shadow-pop);
    }
    .sheet-dialog[open] { display: flex; flex-direction: column; animation: sheet-up .28s var(--ease-out); }
    .sheet-dialog::backdrop { background: rgb(19 27 54 / .45); }
    .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-line); }
    .sheet-title { margin: 0; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.015em; }
    .sheet-title:focus { outline: none; } /* focus posé là à l'ouverture (sheet_controller) */
    .sheet-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--color-muted); background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; }
    .sheet-close:hover { color: var(--color-ink); background: var(--color-hover); }
    .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); }
    .sheet-foot {
        display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-5) max(var(--space-3), env(safe-area-inset-bottom));
        background: var(--color-card); border-top: 1px solid var(--color-line);
    }
    .sheet-foot .btn { flex: 1 1 auto; padding-block: .75rem; }
    .sheet-foot .btn-secondary { flex: 0 0 auto; }
    .sheet-locked, .sheet-locked body { overflow: hidden; }

    /* Barre de période : une ligne résumée et « Changer » ; dans la feuille, un réglage par ligne. */
    .period-bar { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
    .period-bar .sheet-bar { justify-content: space-between; }
    .period-compact { min-width: 0; margin: 0; font-size: var(--text-sm); font-weight: 650; line-height: 1.35; }
    .period-bar .sheet-open { flex: none; padding: .45rem .9rem; }
    .sheet-dialog .period-row { flex-direction: column; align-items: stretch; gap: var(--space-5); }
    .sheet-dialog .period-presets .chip-options { gap: var(--space-2); }
    .sheet-dialog .period-presets .chip-option { padding: .5rem .9rem; font-size: var(--text-sm); }
    .sheet-dialog .period-cmp { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .sheet-dialog .period-form .period-cmp select { width: 100%; min-width: 0; max-width: none; padding-block: .65rem; }
    .sheet-dialog .period-dates { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: var(--space-5) !important; padding-top: var(--space-5); }
    .sheet-dialog .period-dates label { display: block; font-size: var(--text-sm); white-space: normal; }
    .sheet-dialog .period-dates label::first-letter { text-transform: uppercase; }
    .period-bar .sheet-dialog .period-dates input[type=date][name] { width: 100%; margin-top: var(--space-1); padding-block: .65rem; }
    .sheet-dialog .period-dates .btn { display: none; } /* la barre du bas applique */
    .sheet-dialog .period-foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
    .sheet-dialog .period-summary { flex-direction: column; gap: var(--space-1); color: var(--color-neutral-ink); }

    /* Actions : un champ par ligne dans la feuille. */
    .action-filters .sheet-body > div { margin-bottom: var(--space-5); }
    .action-filters .sheet-body .action-mine { margin: 0; padding: var(--space-1) 0; }

    /* Dates : pleine largeur, jamais plus larges que leur carte (Safari iOS leur donne une largeur minimale propre). */
    input[type=date] { width: 100%; min-width: 0; max-width: 100%; }
}
@supports (-webkit-touch-callout: none) {
    @media (max-width: 899px) {
        input[type=date] { -webkit-appearance: none; appearance: none; min-height: 2.9rem; }
        input[type=date]::-webkit-date-and-time-value { text-align: left; }
    }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
    .sheet-dialog[open] { animation: none; }
}

/* Réglages : ce que reçoit l'utilisateur (page Notifications). */
.notification-scope { margin-top: var(--space-6); }
.notification-scope h2 { font-size: var(--text-md); margin: 0 0 var(--space-3); }
.notification-teams { margin: 0 0 var(--space-3); padding-left: var(--space-5); }

.mail-preview { display: block; width: 100%; min-height: 70vh; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: #fff; }

/* Formulaire de démo : champ piège hors écran (retiré du flux visuel et, via aria-hidden sur son conteneur, des lecteurs d'écran). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-privacy { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.auth-card h2 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-1); }
.detail { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 var(--space-6); }
.detail dt { color: var(--color-muted); }
.detail dd { margin: 0; }

/* Codification : carte des thèmes. Longueur de barre = mentions (ce qui pèse), part orangée = négatif (ce qui fait
   mal). Une ligne par thème, sous-thèmes dépliés sur place (<details>), mêmes colonnes pour pouvoir comparer. */
.map-lead { max-width: 62rem; margin: calc(-1 * var(--space-2)) 0 var(--space-6); color: var(--color-muted); font-size: var(--text-md); }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.map-count { margin: 0; color: var(--color-muted); }
.map-count strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-neutral-soft); border-radius: var(--radius-control); }
.segmented a { padding: .4rem 1rem; border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); text-decoration: none; transition: background-color .15s, color .15s; }
.segmented a:hover { color: var(--color-ink); }
.segmented a.is-active { color: var(--ink); background: var(--color-card); box-shadow: 0 1px 2px rgb(19 27 54 / .1); }

.code-map { container: code-map / inline-size; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; }
.map-head, .map-row {
    display: grid; align-items: center; gap: var(--space-5);
    grid-template-columns: minmax(13rem, 1.1fr) minmax(10rem, 2.2fr) 6.5rem 6rem 6.5rem;
    padding: .9rem var(--space-6);
}
.no-compare .map-head, .no-compare .map-row { grid-template-columns: minmax(13rem, 1.1fr) minmax(10rem, 2.2fr) 6.5rem 6rem; }
.map-head { padding-block: .7rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); border-bottom: 1px solid var(--color-line); }
.map-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.map-theme + .map-theme { border-top: 1px solid var(--color-line); }
.map-theme > summary { list-style: none; cursor: pointer; transition: background-color .15s; }
.map-theme > summary::-webkit-details-marker { display: none; }
.map-theme > summary:hover { background: var(--color-hover); }
.map-theme > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.map-name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.map-label { font-weight: 650; overflow-wrap: anywhere; }
.map-chevron {
    flex-shrink: 0; width: 8px; height: 8px; margin: 0 2px;
    border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted);
    transform: rotate(-45deg); transition: transform .2s var(--ease-out);
}
.map-theme[open] .map-chevron { transform: rotate(45deg) translate(-2px, -2px); }
.map-bar { display: block; height: 14px; }
.map-bar-fill { display: flex; gap: 2px; width: var(--map-w); min-width: 6px; height: 100%; border-radius: 4px; overflow: hidden; }
.map-bar-fill > span { flex-basis: 0; min-width: 0; }
.map-seg-neg { background: var(--color-negative-bar); }
.map-seg-neu { background: var(--color-neutral-bar); }
.map-seg-pos { background: var(--color-positive-bar); }
.map-mentions { font-weight: 650; }
.map-neg { font-weight: 650; color: var(--color-negative-ink); }
.map-neg.is-insufficient { color: var(--color-muted); opacity: .6; }
.map-trend { font-size: var(--text-sm); font-weight: 650; }
.map-trend-worse { color: var(--color-negative-ink); }
.map-trend-better { color: var(--color-positive-ink); }
.map-trend-stable, .map-trend-none { font-weight: 500; color: var(--color-muted); }
.map-row.is-empty .map-label, .map-theme.is-empty .map-label { color: var(--color-muted); }

/* Dépli : définition du thème, sous-thèmes alignés sur les colonnes des thèmes, lien vers les avis. */
.map-children { padding-bottom: var(--space-4); background: var(--viz-surface-soft); border-top: 1px dashed var(--color-line); }
.map-definition, .map-more { margin-left: calc(var(--space-6) + 46px); }
.map-definition { max-width: 70ch; margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.map-subs { margin: 0; padding: 0; list-style: none; }
.map-sub { padding-block: .6rem; }
.map-sub .map-name { flex-direction: column; align-items: flex-start; gap: 1px; padding-left: 46px; }
.map-sub { position: relative; transition: background-color .15s; }
.map-sub .map-label { font-weight: 650; color: var(--color-ink); text-decoration: none; }
/* Toute la ligne du sous-thème ouvre ses avis. */
.map-sub .map-label::before { content: ''; position: absolute; inset: 0; }
.map-sub:hover { background: var(--color-hover); }
.map-sub:hover .map-label, .map-sub .map-label:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.map-sub:has(.map-label:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.map-sub .map-label:focus-visible { outline: none; }
.map-sub-def { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; font-size: var(--text-xs); color: var(--color-muted); }
.map-sub .map-bar { height: 10px; }
.map-sub .map-mentions { font-weight: 650; }
.map-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-3); margin-bottom: 0; font-size: var(--text-sm); }
.map-legend { margin: 0; padding: var(--space-3) var(--space-6); font-size: var(--text-xs); color: var(--color-muted); border-top: 1px solid var(--color-line); }
.map-key { display: inline-block; width: 10px; height: 10px; margin: 0 2px 0 var(--space-2); border-radius: 3px; vertical-align: -1px; }
.map-key:first-child { margin-left: 0; }
.map-key-neg { background: var(--color-negative-bar); }
.map-key-neu { background: var(--color-neutral-bar); }
.map-key-pos { background: var(--color-positive-bar); }

/* Assez de place pour les colonnes (la largeur dépend du menu ouvert ou réduit) : les en-têtes nomment les unités. */
@container code-map (min-width: 52rem) {
    .map-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Étroit (mobile, ou bureau à menu ouvert sous ~1150 px) : nom, puis barre, puis les chiffres. */
@container code-map (max-width: 51.99rem) {
    .map-head { display: none; }
        .map-row, .no-compare .map-row {
        grid-template-columns: auto auto 1fr; grid-template-areas: "name name name" "bar bar bar" "men neg trend";
        gap: var(--space-2) var(--space-4); padding: var(--space-4);
    }
    .map-name { grid-area: name; }
    .map-bar { grid-area: bar; }
    .map-mentions { grid-area: men; text-align: left; }
    .map-neg { grid-area: neg; text-align: left; }
    .map-trend-cell { grid-area: trend; }
    .map-unit { font-weight: 500; color: var(--color-muted); }
    .map-sub .map-name { padding-left: 30px; }
    .map-definition, .map-more { margin-left: var(--space-4); margin-right: var(--space-4); }
    .map-legend { padding: var(--space-3) var(--space-4); }
}

/* Mode support (super admin substitué à un utilisateur) : bandeau toujours visible, distinct du reste de l'appli. */
.support-bar {
    position: sticky; top: 0; z-index: 14;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
    padding: .55rem var(--space-6); font-size: var(--text-sm);
    color: var(--color-warning-ink); background: var(--color-warning-soft); border-bottom: 1px solid #f3e2b0;
}
.support-bar form { margin: 0; }
.support-bar .link-button { font-weight: 650; color: inherit; text-decoration: underline; }
.support-form { display: inline; margin: 0; }
@media (max-width: 899px) { .support-bar { top: 56px; padding-inline: var(--space-4); } }
.settings-lead { max-width: 62rem; margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.map-mentions .base-star { font-size: .8em; }

/* Vue direction : bloc « En bref » (mot de l'équipe, phrases tirées des chiffres). */
/* Verdict à gauche, mot de l'équipe à droite (cité avec un filet d'encre), côte à côte dès que le bloc est large. */
.brief { display: grid; gap: var(--space-3) var(--space-8); padding: var(--space-5) var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.brief-note { margin: 0; padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: 2px solid var(--ink); }
.brief-note blockquote { margin: 0; font-size: var(--text-md); line-height: 1.6; }
.brief-note figcaption { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); }
.brief-note figcaption::before { content: '— '; }
.brief-text { max-width: 80ch; }
.brief-text p { margin: 0 0 var(--space-2); font-size: var(--text-base); line-height: 1.6; }
.brief-text p:first-child { font-weight: 650; font-size: var(--text-md); }
.brief-text p:last-child { margin-bottom: 0; }
.brief-edit summary { cursor: pointer; font-size: var(--text-sm); font-weight: 650; color: var(--ink); }
@container (min-width: 900px) {
    .brief { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    .brief-text { grid-column: 1; grid-row: 1; }
    .brief-edit { grid-column: 1; }
    .brief-note { grid-column: 2; grid-row: 1 / span 2; }
}
.brief-edit form { margin: var(--space-3) 0 0; }
.brief-edit textarea { max-width: 60rem; }

/* Paramètres › Colonnes (bloc C). */
.column-list { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.column-item {
    display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto; gap: var(--space-3) var(--space-6); align-items: start;
    padding: var(--space-4) var(--space-5); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
.column-item .form-row, .column-item > div > div { margin: 0; }
.column-key { margin: var(--space-1) 0 0; font-size: var(--text-xs); overflow-wrap: anywhere; }
.column-facts p { margin: 0; }
.column-stats { font-weight: 650; }
.column-examples { margin-top: var(--space-1) !important; font-size: var(--text-sm); overflow-wrap: anywhere; }
.column-compare { margin: 0; padding: 0; border: 0; min-width: 0; }
.column-compare legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 650; }
@media (max-width: 899px) { .column-item { grid-template-columns: minmax(0, 1fr); } }

/* Conditions de colonnes (bloc C) : une ligne par colonne (colonne, valeurs, retrait) ; empilées sur mobile. */
.meta-rows { display: grid; gap: var(--space-2); }
.meta-rows:empty { display: none; }
.meta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.meta-row select, .meta-row input[type=text] { max-width: none; margin: 0; padding: .5rem .7rem; font-size: var(--text-sm); }
.meta-row .meta-column { display: block; min-width: 0; }
.meta-row .meta-row-values { grid-column: 1 / -1; min-width: 0; }
.meta-row .meta-row-values:empty { display: none; }
.meta-values { min-width: 0; }
.meta-choices { gap: 6px; max-height: 13rem; overflow-y: auto; padding: 2px; }
.meta-choices .chip-option { padding: .25rem .65rem; font-size: var(--text-xs); }
.meta-count { font-weight: 500; color: var(--color-muted); }
.meta-contains { display: block; }
.meta-choices + .meta-contains { margin-top: var(--space-2); }
.meta-remove { grid-column: 2; grid-row: 1; padding: .35rem .6rem; font: inherit; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); background: none; border: 1px solid var(--color-line); border-radius: var(--radius-control); cursor: pointer; }
.meta-remove:hover { color: var(--color-ink); background: var(--color-hover); }
button.meta-add { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--ink); }
button.meta-add[hidden] { display: none; }

/* « Comparer par » (bloc C) : matrice qui défile dans sa carte (la page, jamais), première colonne collante. */
.viz-card:has(.cmp-scroll), .report-grid > * { min-width: 0; }
.cmp-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: var(--radius-control); }
.cmp-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cmp-table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.cmp-table th, .cmp-table td { padding: .45rem .6rem; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--color-line); }
.cmp-table thead th { font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); background: var(--color-card); vertical-align: bottom; }
.cmp-theme a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink); text-decoration: none; }
.cmp-theme a:hover { text-decoration: underline; }
.cmp-corner, .cmp-value { position: sticky; left: 0; z-index: 1; text-align: left !important; background: var(--color-card); }
.cmp-corner { z-index: 2; }
.cmp-value { max-width: 11rem; font-weight: 650; box-shadow: 1px 0 0 var(--color-line); }
.cmp-value a, .cmp-value > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink); text-decoration: none; }
.cmp-value a:hover { text-decoration: underline; }
.cmp-count { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.cmp-cell a { display: inline-block; min-width: 3.2rem; color: inherit; text-decoration: none; border-radius: var(--radius-badge); }
.cmp-cell a:hover { text-decoration: underline; }
.cmp-all { border-right: 2px solid var(--color-line-strong); font-weight: 650; }
.cmp-mark { display: inline-flex; align-items: baseline; gap: 3px; padding: .1rem .45rem; font-weight: 650; border-radius: var(--radius-badge); }
.cmp-mark.is-good { color: var(--color-positive-ink); background: var(--color-positive-soft); }
.cmp-mark.is-bad { color: var(--color-negative-ink); background: var(--color-negative-soft); }
.cmp-cell.is-insufficient, .cmp-cell.is-none, .cmp-cell.is-low { color: var(--color-muted); }
.cmp-cell.is-low .cmp-mark { color: inherit; }
.cmp-cell.is-low .cmp-mark.is-good { color: var(--color-positive-ink); }
.cmp-cell.is-low .cmp-mark.is-bad { color: var(--color-negative-ink); }
.cmp-all.is-low { font-weight: 500; }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }

/* Radar (sujets émergents, blocs D et H) : surlignage neutre (couleur d'accent), jamais les couleurs du sentiment. */
.hl-topic { background: var(--ink-tint-2); color: var(--ink); text-decoration-color: transparent; }
.topic-meta { margin: calc(-1 * var(--space-4)) 0 var(--space-6); color: var(--color-muted); font-size: var(--text-sm); }
.topic-section > h2 { margin-top: var(--space-8); margin-bottom: var(--space-1); }
.topic-section > .muted { margin: 0 0 var(--space-4); font-size: var(--text-base); }
.topic-none { color: var(--color-muted); }
.topic-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topic-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); min-width: 0; }
.topic-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.topic-expression { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.topic-expression::before { content: '« '; color: var(--color-muted); font-weight: 500; }
.topic-expression::after { content: ' »'; color: var(--color-muted); font-weight: 500; }
.topic-count { margin: 0; font-weight: 650; color: var(--color-ink); }
@media (min-width: 600px) { .topic-count { white-space: nowrap; } }
/* Radar IA (bloc H) : nom choisi par le modèle, sans guillemets ; explication ; mention « Détection simplifiée » neutre. */
.topic-name { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.topic-description { margin: 0; color: var(--color-ink); line-height: 1.5; }
.topic-sample { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.topic-intro { display: none; margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
@media (min-width: 900px) { .topic-intro { display: block; } }
.topic-method { padding: .1rem .5rem; background: var(--color-neutral-soft); color: var(--color-neutral-ink); border-radius: var(--radius-badge); cursor: help; }
.topic-facts .topic-evolution { padding: 0; background: none; }
.topic-tracked > summary { cursor: pointer; font-weight: 650; color: var(--color-ink); }
.topic-tracked > .muted { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); }
.topic-tracked-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.topic-tracked-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.topic-tracked-name { flex: 1 1 auto; }
.topic-tracked-count { font-size: var(--text-sm); white-space: nowrap; }
.topic-tracked-list form { margin: 0; }
.topic-tracked-list .link-button { color: var(--color-muted); font-size: var(--text-sm); }
.topic-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-neutral-ink); }
.topic-facts li { padding: .15rem .6rem; background: var(--color-neutral-soft); border-radius: var(--radius-badge); }
.topic-facts .topic-ratio { color: var(--ink); background: var(--ink-tint); font-weight: 650; }
.topic-quotes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.topic-quotes blockquote { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.topic-read { display: inline-block; margin-top: var(--space-1); padding-left: var(--space-3); font-size: var(--text-sm); }
.topic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: auto; padding-top: var(--space-2); }
.topic-actions form { margin: 0; }
.topic-actions .link-button { color: var(--color-muted); font-size: var(--text-sm); }
.topic-hidden-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.topic-hidden-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.topic-hidden-list form { margin: 0; }
@media (max-width: 599px) {
    .topic-actions .btn { flex: 1 1 100%; }
}
/* Page Radar : le radar SVG (couleurs fixes de la maquette) et la fiche du sujet à droite, sur bureau seulement ; sous
   900 px, la liste suffit. */
.radar-layout { display: none; }
@media (min-width: 900px) {
    .radar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-5); align-items: start; margin-bottom: var(--space-8); }
}
.radar-board { padding: var(--space-3); background: #fff; }
.radar-svg { display: block; width: 100%; height: auto; }
.radar-svg text { font-family: inherit; }
.radar-ring-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.radar-sector-label { font-size: 12px; font-weight: 650; fill: var(--ink); }
.radar-point { cursor: pointer; outline: none; }
.radar-point-label { font-size: 12px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.radar-dot { transition: stroke-width .15s ease; }
.radar-point.is-hover .radar-dot, .radar-point:focus-visible .radar-dot { stroke: var(--ink); stroke-width: 2.5px; }
.radar-point.is-selected .radar-dot { stroke: var(--ink); stroke-width: 3px; }
.radar-point.is-selected .radar-point-label, .radar-point.is-hover .radar-point-label { font-weight: 750; }
.radar-side { position: sticky; top: var(--space-4); min-width: 0; }
.radar-detail { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.radar-detail[hidden] { display: none; }
.radar-detail-name { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.radar-detail-text { margin: 0; line-height: 1.5; }
.radar-curve-figure { margin: 0; }
.radar-curve { display: block; width: 100%; height: auto; }
.radar-curve-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.radar-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-3); margin: 0; }
.radar-figures dt { font-size: var(--text-sm); color: var(--color-muted); }
.radar-figures dd { margin: 0; font-size: var(--text-lg); font-weight: 650; color: var(--color-ink); }
.radar-figures dd small { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
@media (min-width: 900px) { .topic-card[data-radar-id] { cursor: pointer; } }
.topic-ring-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.topic-radar-btn { display: none; font-size: var(--text-sm); }
@media (min-width: 900px) { .topic-radar-btn { display: inline; } }
.radar-focus { display: none; }
.radar-point:focus-visible .radar-focus { display: block; }
@media (min-width: 900px) { .topic-card.is-selected, .topic-card.is-hover { border-color: var(--ink); } }
.topic-ring { align-self: flex-start; margin: 0; padding: .05rem .5rem; border-radius: var(--radius-badge); font-size: var(--text-sm); font-weight: 650; background: var(--color-neutral-soft); color: var(--color-neutral-ink); }
.topic-ring.is-treat { background: #fde3cf; color: #8f3f08; }
.topic-subtheme-form { max-width: 36rem; }
.topic-subtheme-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.topic-block-items { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@container (min-width: 720px) { .topic-block-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topic-block-items li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.topic-block-items li a { font-weight: 650; overflow-wrap: anywhere; }
.topic-block-badges { display: inline-flex; gap: var(--space-1); }
.topic-block-items .topic-block-figures { margin-left: auto; }
.topic-block { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .topic-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topic-block-list h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.topic-block-list ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.topic-block-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.topic-block-list li a { font-weight: 650; overflow-wrap: anywhere; }
.topic-block-figures { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.topic-block-ratio { color: var(--ink); font-weight: 650; }
.topic-block-more { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

/* Périmètre d'une action (bloc F) : conditions de colonnes du bloc C. */
.action-perimeter-field { max-width: 40rem; }
.action-perimeter-label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.action-perimeter-field .meta-row, .action-perimeter-field .meta-values, .action-perimeter-field .meta-row-values { margin-bottom: 0; }
.action-perimeter { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); overflow-wrap: anywhere; }
.effect-comparison { margin: var(--space-3) 0; }
.effect-comparison-sentence { margin: 0 0 var(--space-1); font-weight: 650; font-variant-numeric: tabular-nums; }
/* L'effet en une phrase, un seul chiffre (lecture des chiffres, 28/10/2026). */
.effect-sentence { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-lg, 1.125rem); font-weight: 650; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.effect-comparison-note { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.effect-curve-key { margin: 0 0 var(--space-2); }

/* Infobulle partagée (tooltip_controller, data-tooltip) : à l'encre, texte clair, petite, posée par Floating UI ; elle
   apparaît en 100 ms au survol, tout de suite au focus, au toucher sur mobile. */
.tooltip {
    position: absolute; top: 0; left: 0; z-index: 60; max-width: min(280px, calc(100vw - 16px)); width: max-content;
    padding: .35rem .6rem; font-size: var(--text-xs); font-weight: 500; line-height: 1.45; letter-spacing: .005em;
    color: var(--on-ink); background: var(--ink); border-radius: var(--radius-badge); box-shadow: var(--shadow-pop);
    pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
}
.tooltip[hidden] { display: none; }
.tooltip.is-visible { opacity: 1; transform: none; }
/* Toucher sur une case-lien : la bulle porte « Voir les N avis », elle reçoit donc le toucher. */
.tooltip.is-interactive { pointer-events: auto; }
.tooltip-link { display: block; margin-top: 4px; font-weight: 650; color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
[data-tooltip] { cursor: help; }
:is(a, button, summary)[data-tooltip] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tooltip { transition: none; transform: none; } }

/* Déposer des fichiers : zone de dépôt (le champ fichier la recouvre), types reconnus, derniers dépôts. */
.dropzone-form { margin-bottom: var(--space-8); }
.dropzone-form .btn[hidden] { display: none; }
.dropzone-area {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-10) var(--space-5); text-align: center;
    background: var(--color-card); border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-card);
    transition: border-color .15s, background-color .15s;
}
.dropzone-form.is-over .dropzone-area, .dropzone-area:has(.dropzone-input:focus-visible) { border-color: var(--ink); background: var(--ink-tint); }
.dropzone-form.is-sending .dropzone-area { opacity: .7; }
@media (hover: hover) { .dropzone-area:hover { border-color: var(--ink); background: var(--ink-tint); } }
.dropzone-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-2); border-radius: var(--radius-card); background: var(--ink-tint); color: var(--ink); }
.dropzone-icon .icon { width: 24px; height: 24px; }
.dropzone-title { font-size: var(--text-lg); font-weight: 650; overflow-wrap: anywhere; }
.dropzone-pick { margin-top: var(--space-3); pointer-events: none; }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.dropzone-form > .btn { margin-top: var(--space-3); }

/* Dépôts : zone compacte (icône, texte, bouton en ligne sur bureau) et types reconnus côte à côte. */
.deposit-top { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; margin-bottom: var(--space-8); }
@media (min-width: 1100px) { .deposit-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.deposit-top .dropzone-form { display: flex; flex-direction: column; margin: 0; }
.deposit-top .dropzone-form > .btn { align-self: flex-start; }
.dropzone-compact .dropzone-area { flex: 1; justify-content: center; padding: var(--space-6) var(--space-5); }
.dropzone-compact .dropzone-text { display: flex; flex-direction: column; gap: var(--space-1); max-width: 30rem; }
.dropzone-compact .dropzone-icon { margin-bottom: 0; }
.dropzone-compact .dropzone-pick { margin-top: var(--space-2); }
@media (min-width: 720px) {
    .dropzone-compact .dropzone-area { flex-direction: row; gap: var(--space-5); padding: var(--space-8) var(--space-6); text-align: left; }
    .dropzone-compact .dropzone-pick { margin: 0 0 0 auto; flex: none; }
}
.dropzone-compact .notice { margin: var(--space-3) 0 0; }
.deposit-types { padding: var(--space-5); }
.deposit-types h2 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.deposit-types > p:last-child { margin: var(--space-3) 0 0; }
.deposit-type-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.deposit-type-list li { display: flex; align-items: flex-start; gap: var(--space-2); overflow-wrap: anywhere; }
.deposit-type-list .icon { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--color-dot); }

.deposit-section { margin-bottom: var(--space-8); }
.deposit-section h2 { font-size: var(--text-md); margin: 0 0 var(--space-3); }
.deposit-empty { padding: var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.deposit-empty p { margin: 0; }
.deposit-empty p + p { margin-top: var(--space-1); }
.deposit-list { margin: 0; padding: 0; list-style: none; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.deposit-head { display: none; }
.deposit-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tile main" ". type" ". state";
    gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-4);
}
.deposit-row + .deposit-row, .deposit-head + .deposit-row { border-top: 1px solid var(--color-line); }
.deposit-row > .type-tile { grid-area: tile; margin-top: 1px; }
.deposit-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.deposit-name { font-weight: 650; overflow-wrap: anywhere; text-decoration: none; }
.deposit-name:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.deposit-type { grid-area: type; min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.deposit-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); min-width: 0; margin-top: var(--space-1); }
.deposit-state .badge { flex: none; }
.deposit-detail { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) {
    .deposit-head, .deposit-row { grid-template-columns: 24px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "tile main type state"; gap: var(--space-4); }
    .deposit-head {
        display: grid; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: 650; color: var(--color-muted);
    }
    .deposit-row { align-items: center; padding: var(--space-3) var(--space-4); }
    .deposit-state { margin-top: 0; }
}
.choose-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.choose-intro { max-width: 40rem; }
.type-choices { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); max-width: 50rem; margin-top: var(--space-5); }
@media (min-width: 720px) { .type-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-choice {
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; text-align: left;
    padding: var(--space-4); font: inherit; color: inherit; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); cursor: pointer;
}
.type-choice .type-tile { grid-row: span 2; }
.type-choice-name { font-weight: 650; overflow-wrap: anywhere; }
.type-choice:hover { border-color: var(--ink); background: var(--ink-tint); }
.type-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Types de fichiers (mode support) : liste, puis réglage en quatre étapes (fichier exemple, colonnes avec aperçu en
   direct, transformations, vérification et activation). Tableau des colonnes en pile de cartes sur téléphone ; l'aperçu défile dans sa
   carte, jamais la page. */
.ft-intro { max-width: 46rem; margin: calc(-1 * var(--space-3)) 0 var(--space-8); }
.ft-section { margin-bottom: var(--space-8); }
.ft-section h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ft-count {
    display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem;
    font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-pill);
}
.ft-reviews .ft-count { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.ft-reviews .ft-list { border-color: var(--color-line-strong); }
.ft-tile-review { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.ft-row-reason { margin-top: var(--space-1); color: var(--color-warning-ink); overflow-wrap: anywhere; }
.ft-list { margin: 0; padding: 0; list-style: none; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.ft-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-4) var(--space-5); }
.ft-row > .type-tile { margin-top: 1px; }
.ft-row + .ft-row { border-top: 1px solid var(--color-line); }
.ft-row-main { display: flex; flex-direction: column; min-width: 0; }
.ft-row-name { font-weight: 650; overflow-wrap: anywhere; }
a.ft-row-name { text-decoration: none; }
a.ft-row-name:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.ft-row-state, .ft-row-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ft-row-actions form { margin: 0; }
.ft-row-actions .btn { padding: .35rem .75rem; font-size: var(--text-sm); }
@media (min-width: 900px) {
    .ft-row { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
    .ft-row > .type-tile { margin-top: 0; }
    .ft-row-state, .ft-row-actions { grid-column: auto; }
    .ft-row-actions { justify-content: flex-end; }
}

/* En-tête et étapes */
.ft-head { margin-bottom: var(--space-4); }
.ft-head-title { min-width: 0; }
.ft-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.ft-steps { margin-bottom: var(--space-6); }
.ft-steps ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ft-step > a, .ft-step > span {
    display: inline-flex; align-items: center; padding: .3rem .85rem; font-size: var(--text-sm); font-weight: 500;
    border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-muted);
    text-decoration: none; transition: border-color .15s, background-color .15s, color .15s;
}
.ft-step.is-done > a, .ft-step.is-done > span { color: var(--ink); background: var(--ink-tint); border-color: transparent; }
.ft-step.is-current > span { color: var(--on-ink); background: var(--ink); border-color: var(--ink); font-weight: 650; }
.ft-step > a:hover { color: var(--ink); border-color: var(--ink); }

/* Mise en page : contenu principal et colonne d'aide (sous le contenu sur téléphone). */
.ft-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: var(--space-4); }
@media (min-width: 1100px) { .ft-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.ft-side { display: grid; gap: var(--space-4); }
.ft-card { padding: var(--space-5) var(--space-6); }
.ft-card h2 { margin: 0 0 var(--space-2); }
.ft-card > :last-child { margin-bottom: 0; }

/* Étape 1 */
.ft-sample-form { margin: 0; }
.ft-sample-form input:not([type=checkbox]):not([type=radio]):not([type=file]) { max-width: 34rem; }
.ft-source { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.ft-source legend { padding: 0; font-size: var(--text-sm); font-weight: 650; }
.ft-source > .help-text { margin: var(--space-1) 0 var(--space-3); }
.ft-choices { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); max-width: 34rem; }
.ft-choice {
    display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4);
    font-weight: 500; background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.ft-choice input { margin-top: .2rem; flex: none; }
.ft-choice:hover { background: var(--color-hover); }
.ft-choice:has(input:checked) { background: var(--ink-tint); border-color: rgb(19 27 54 / .55); }
.ft-choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ft-choice-text { display: flex; flex-direction: column; min-width: 0; }
.ft-choice-name { font-weight: 650; overflow-wrap: anywhere; }
.ft-choice-hint { font-size: var(--text-xs); color: var(--color-muted); }
.ft-new-source { margin: var(--space-4) 0 0; }
.ft-new-source > div { margin-bottom: 0; }
.ft-source:has(input[type=radio]):not(:has(input[value=new]:checked)) .ft-new-source { display: none; }
.ft-label { display: block; margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.ft-drop { display: block; max-width: 34rem; margin: 0 0 var(--space-5); }
.ft-drop .dropzone-area { padding: var(--space-8) var(--space-5); margin: 0; }
.ft-drop.is-chosen .dropzone-area { border-style: solid; border-color: var(--ink); background: var(--ink-tint); }
.ft-file-error { margin: var(--space-3) 0 0; }
.ft-sample-file, .ft-current-sample, .ft-file-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.ft-sample-file { max-width: 34rem; padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.ft-sample-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ft-current-sample { margin-bottom: var(--space-5); overflow-wrap: anywhere; }
.ft-actions-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; }
.ft-how { margin: var(--space-3) 0 var(--space-4); padding: 0; list-style: none; counter-reset: ft-how; display: grid; gap: var(--space-4); }
.ft-how li { position: relative; display: flex; flex-direction: column; padding-left: 2.4rem; counter-increment: ft-how; font-size: var(--text-sm); }
.ft-how li::before {
    content: counter(ft-how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
    font-weight: 650; font-size: var(--text-xs); color: var(--on-ink); background: var(--ink); border-radius: var(--radius-pill);
}
.ft-how span { color: var(--color-muted); }

/* Étape 2 : colonnes */
.ft-file-line { margin: calc(-1 * var(--space-2)) 0 var(--space-5); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ft-columns-form { margin: 0; }
.ft-columns-form div { margin-bottom: 0; }
.ft-columns { margin: var(--space-4) 0 0; border: 0; border-radius: 0; background: none; }
.ft-columns th:first-child, .ft-columns td:first-child { padding-left: 0; }
.ft-columns th:last-child, .ft-columns td:last-child { padding-right: 0; }
.ft-columns thead th { padding-top: 0; }
.ft-columns tbody th { width: 30%; font-weight: 400; color: var(--color-ink); }
.ft-col-name { display: block; font-weight: 650; overflow-wrap: anywhere; }
.ft-col-hint { display: block; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.ft-col-examples { min-width: 0; }
.ft-example { display: inline-block; max-width: 100%; margin: 2px 6px 2px 0; padding: .1rem .5rem; font-size: var(--text-xs); color: var(--color-neutral-ink); background: var(--surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-badge); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ft-col-role { width: 13rem; }
.ft-col-role select { margin: 0; min-width: 11rem; }
.ft-columns tr:has(option[value=ignore]:checked) .ft-col-name { color: var(--color-muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--color-line-strong); }
.ft-columns tr:has(option[value=text]:checked) .ft-col-role select { border-color: var(--ink); }
.ft-rating select { max-width: none; }
.ft-rating > div + div { margin-top: var(--space-4); }
.ft-explain > summary { font-weight: 650; cursor: pointer; }
.ft-roles { margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.ft-roles div { margin: 0; }
.ft-roles dt { font-weight: 650; }
.ft-roles dd { margin: 0; color: var(--color-muted); }
@media (max-width: 899px) {
    .ft-columns, .ft-columns tbody, .ft-columns tr, .ft-columns th, .ft-columns td { display: block; width: auto; }
    .ft-columns thead { display: none; }
    .ft-columns tr { padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }
    .ft-columns tr:first-child { border-top: 0; padding-top: 0; }
    .ft-columns tbody th, .ft-columns td { width: auto; padding: 0; border: 0; }
    .ft-col-examples { margin-top: var(--space-1); }
    .ft-col-role select { width: 100%; max-width: none; margin-top: var(--space-2); }
}

/* Aperçu en direct */
.ft-preview-card { margin-bottom: var(--space-4); }
.ft-preview-frame { display: block; }
.ft-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.ft-preview-head h2 { margin: 0; }
.ft-preview-count { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.ft-preview-message { margin: 0; }
.ft-preview-scroll { margin: 0; transition: opacity .15s; }
.ft-preview-frame[busy] .ft-preview-scroll, .ft-preview-frame[busy] .ft-preview-count { opacity: .5; }
.ft-preview { font-size: var(--text-sm); }
.ft-preview th, .ft-preview td { white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; padding-top: .55rem; padding-bottom: .55rem; }
.ft-preview td.ft-preview-text { white-space: normal; min-width: 16rem; max-width: 28rem; }
.ft-preview tr.is-ignored td { color: var(--color-muted); background: var(--surface-2); white-space: normal; max-width: none; }
.ft-preview tr.is-ignored .badge { margin-right: var(--space-2); }

/* Étape 1 : lecture du fichier. Réglages à gauche, lignes brutes numérotées à droite (dessous sur téléphone) :
   l'en-tête sur fond encre très clair, les lignes de titre en retrait, les lignes de pied barrées. */
.ft-read-form { margin: 0; }
.ft-read { margin-bottom: var(--space-4); }
.ft-read-grid { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-4); }
@media (min-width: 900px) { .ft-read-grid { grid-template-columns: 15rem minmax(0, 1fr); } }
.ft-read-settings { display: grid; gap: var(--space-4); align-content: start; }
.ft-read-settings > div { margin: 0; }
.ft-read-settings select, .ft-read-settings input { width: 100%; max-width: none; }
.ft-read-format { margin: 0; }
.ft-read-format .ft-label { margin-bottom: var(--space-1); }
.ft-read-lines { min-width: 0; }
.ft-read-frame { display: block; }
.ft-read-frame .ft-preview-head h3 { margin: 0; }
.ft-read-count { margin: 0; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ft-read-frame .ft-preview-message { margin-bottom: var(--space-3); }
.ft-raw-scroll { margin: 0; transition: opacity .15s; }
.ft-read-frame[busy] .ft-raw-scroll { opacity: .5; }
.ft-raw { font-size: var(--text-sm); }
.ft-raw th, .ft-raw td { white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; padding: .4rem var(--space-3); }
.ft-raw tbody:first-child tr:first-child > * { border-top: 0; }
.ft-raw-num { width: 1%; font-weight: 400; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ft-raw-n { display: inline-block; min-width: 1.5rem; }
.ft-raw-tag { margin-left: var(--space-1); font-size: var(--text-xs); font-weight: 650; color: var(--ink); }
.ft-raw tr.is-header > * { background: var(--ink-tint); font-weight: 650; color: var(--color-ink); }
.ft-raw tr.is-before td, .ft-raw-empty { color: var(--color-muted); }
.ft-raw-empty { font-style: italic; }
.ft-raw tr.is-footer td { color: var(--color-muted); text-decoration: line-through; text-decoration-color: var(--color-muted); }
.ft-raw tr.is-footer .ft-raw-tag { color: var(--color-muted); }
.ft-raw-gap td { padding: .15rem var(--space-3); text-align: left; color: var(--color-muted); }

/* Étape 4 : vérification sur tout l'exemple */
.ft-check { margin-bottom: var(--space-4); }
.ft-check-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.ft-summary { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-variation-settings: var(--flare); }
.ft-check-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ft-check-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ft-check-grid h3 { margin: 0 0 var(--space-3); }
.ft-bars, .ft-ignored-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.ft-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); }
.ft-bar-label { font-weight: 500; overflow-wrap: anywhere; }
.ft-bar-value { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ft-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: var(--viz-track); overflow: hidden; }
.ft-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--viz-series); }
.ft-ignored-list li { overflow-wrap: anywhere; }
.ft-line { display: inline-block; min-width: 4.5rem; margin-right: var(--space-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.ft-activate {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-5) var(--space-6); background: var(--color-card); border: 1px solid var(--ink); border-radius: var(--radius-card);
}
.ft-activate p { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.ft-activate form { margin: 0; }

/* Barre d'enregistrement, collée au bas de l'écran pendant le réglage des colonnes et des règles. */
.ft-actions {
    position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin: 0 calc(-1 * var(--space-2)); padding: var(--space-3) var(--space-2);
    background: var(--color-bg); border-top: 1px solid var(--color-line);
}
.ft-actions p { margin: 0; }
@media (max-width: 599px) {
    .ft-actions p { display: none; }
    .ft-actions .btn-row { width: 100%; }
    .ft-actions .btn-primary { flex: 1; }
    .ft-step > a, .ft-step > span { padding: .25rem .65rem; font-size: var(--text-xs); }
    .ft-preview td.ft-preview-text { min-width: 12rem; }
}

/* Étape 3 : transformations. Une ligne par règle (poignée, rang, phrase, lignes touchées, avant / après repliable,
   actions), menu d'ajout rangé par famille, puis l'aperçu. Poignée masquée au doigt (Monter / Descendre suffisent). */
.rules { margin-bottom: var(--space-4); }
.rules-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.rules-head h2 { margin: 0; }
.rules-empty { max-width: 42rem; margin: 0 0 var(--space-4); color: var(--color-muted); }
.rule-order-form { display: none; }
.rule-list { margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: rule; border-top: 1px solid var(--color-line); transition: opacity .15s; }
.rule-list[aria-busy=true] { opacity: .6; pointer-events: none; }
.rule-card {
    counter-increment: rule;
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "grip index body" ". . actions";
    gap: var(--space-2) var(--space-3); align-items: start;
    padding: var(--space-4) 0; background: var(--color-card); border-bottom: 1px solid var(--color-line);
    transition: opacity .15s, background-color .15s;
}
.rule-card.is-dragging { opacity: .4; background: var(--ink-tint); }
.rule-grip {
    grid-area: grip; display: grid; place-items: center; width: 1.4rem; height: 1.75rem; margin-left: -.35rem;
    color: var(--color-dot); border-radius: var(--radius-badge); cursor: grab; touch-action: none;
}
.rule-grip:hover { color: var(--ink); background: var(--color-hover); }
.rule-list.is-sorting, .rule-list.is-sorting .rule-grip { cursor: grabbing; }
.rule-index {
    grid-area: index; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
    font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--on-ink); background: var(--ink); border-radius: var(--radius-pill);
}
.rule-index::before { content: counter(rule); }
.rule-body { grid-area: body; min-width: 0; }
.rule-kind { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.rule-sentence { margin: .1rem 0 0; font-size: var(--text-md); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.rule-touched { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.rule-touched.is-zero { font-weight: 500; color: var(--color-muted); }
.rule-details { margin-top: var(--space-2); }
.rule-details > summary {
    display: inline-block; font-size: var(--text-sm); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px;
}
.rule-details > summary:hover { text-decoration-color: var(--ink); }
.rule-details > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.rule-examples { display: grid; gap: 0; max-width: 44rem; margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.rule-examples li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "line column" "change change";
    gap: 2px var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-3);
}
.rule-examples li + li { border-top: 1px solid var(--color-line); }
.rule-examples li:not(:has(.rule-ex-column)) { grid-template-areas: "line line" "change change"; }
@media (min-width: 600px) {
    .rule-examples li { grid-template-columns: 4.25rem minmax(0, .8fr) minmax(0, 2fr); grid-template-areas: "line column change"; }
    .rule-examples li:not(:has(.rule-ex-column)) { grid-template-areas: "line change change"; }
}
.rule-ex-line { grid-area: line; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rule-ex-column { grid-area: column; min-width: 0; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); overflow-wrap: anywhere; }
.rule-ex-change { grid-area: change; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.rule-ex-before { min-width: 0; color: var(--color-muted); }
.rule-ex-arrow { flex: none; color: var(--color-dot); }
.rule-ex-after { min-width: 0; font-weight: 650; }
.rule-preview .rule-examples { margin-top: var(--space-3); }
.rule-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rule-actions form { margin: 0; }
.rule-edit { padding: .35rem .8rem; font-size: var(--text-sm); }
.rule-tools { display: inline-flex; gap: 2px; }
.rule-tool {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
    color: var(--color-muted); background: none; border: 0; border-radius: var(--radius-control); cursor: pointer;
    transition: color .15s, background-color .15s;
}
.rule-tool .icon { width: 18px; height: 18px; }
.rule-tool:hover:not(:disabled) { color: var(--ink); background: var(--color-hover); }
.rule-tool:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rule-tool:disabled { opacity: .3; cursor: default; }
@media (max-width: 719px) { .rule-tool { width: 2.75rem; height: 2.75rem; } }
.rule-tool-danger:hover:not(:disabled) { color: var(--color-warning-ink); background: var(--color-warning-soft); }
@media (pointer: coarse) {
    .rule-grip { display: none; }
    .rule-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "index body" ". actions"; }
}
@media (min-width: 720px) {
    .rule-card { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "grip index body actions"; }
    .rule-actions { justify-content: flex-end; }
}
@media (min-width: 720px) and (pointer: coarse) {
    .rule-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "index body actions"; }
}

/* Menu d'ajout : un panneau sous le bouton, une colonne par famille (empilées sur téléphone). */
.rule-add > summary { display: inline-flex; align-items: center; gap: var(--space-2); list-style: none; }
.rule-add > summary::-webkit-details-marker { display: none; }
.rule-add > summary .icon { width: 18px; height: 18px; }
.rule-add[open] > summary { background: var(--ink-tint); border-color: rgb(19 27 54 / .45); }
.rule-add-panel {
    display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-3);
    padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-card);
}
@media (min-width: 900px) { .rule-add-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rule-add-family h3 { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); }
.rule-add-family ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rule-add-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-control); }
a.rule-add-item { transition: background-color .15s, box-shadow .15s; }
a.rule-add-item:hover { background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
a.rule-add-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rule-add-name { font-size: var(--text-sm); font-weight: 650; }
.rule-add-help { font-size: var(--text-xs); color: var(--color-muted); }
.rule-add-item.is-soon { cursor: default; }
.rule-add-item.is-soon .rule-add-name { font-weight: 500; color: var(--color-muted); }
.rule-add-item .badge { margin-left: var(--space-1); vertical-align: 1px; }

/* Formulaire d'une règle : les champs, et à droite ce que fait la règle (collé en haut de l'écran sur grand écran). */
.rule-form { margin: 0; }
.rule-form-kicker { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.rule-fields h2 { margin: .15rem 0 var(--space-1); }
.rule-form-help { margin: 0 0 var(--space-5); }
.rule-block, .rule-conditions { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.rule-block legend, .rule-conditions legend { padding: 0; margin-bottom: var(--space-2); }
.rule-form div.rule-segment {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; padding: 3px;
    background: var(--surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-control);
}
.rule-segment-item {
    position: relative; display: flex; align-items: center; justify-content: center; margin: 0; padding: .4rem .9rem; text-align: center;
    font-size: var(--text-sm); font-weight: 500; color: var(--color-muted);
    border-radius: calc(var(--radius-control) - 2px); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s;
}
@media (min-width: 600px) { .rule-form div.rule-segment { display: inline-flex; width: auto; max-width: 100%; } }
.rule-segment-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rule-segment-item:hover { color: var(--ink); }
.rule-segment-item:has(input:checked) { color: var(--ink); font-weight: 650; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-line-strong), 0 1px 2px rgb(19 27 54 / .06); }
.rule-segment-item:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.rule-combine { margin-bottom: var(--space-3); }
.rule-condition-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0; padding: 0; list-style: none; }
.rule-condition { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.rule-condition-glue { padding-top: .7rem; font-size: var(--text-xs); font-weight: 650; color: var(--color-muted); text-align: right; }
.rule-condition + .rule-condition .rule-condition-glue::before { content: 'et'; }
.rule-conditions:has(.rule-combine input[value=or]:checked) .rule-condition + .rule-condition .rule-condition-glue::before { content: 'ou'; }
.rule-condition-fields { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; }
.rule-condition-fields select, .rule-condition-fields input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) { width: 100%; max-width: none; min-width: 0; margin: 0; }
.rule-condition-column { grid-column: 1 / -1; }
@media (min-width: 720px) {
    .rule-condition-fields { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.2fr); }
    .rule-condition-column { grid-column: auto; }
}
.rule-condition:has(.rule-condition-operator option[value=empty]:checked) .rule-condition-value { display: none; }
@media (max-width: 719px) { .rule-condition:has(.rule-condition-operator option[value=empty]:checked) .rule-condition-operator { grid-column: 1 / -1; } }
.rule-condition-remove { margin-top: .2rem; }
.rule-conditions.is-single .rule-condition-remove { visibility: hidden; }
.rule-form div.rule-condition-errors, .rule-form div.rule-field-errors { margin: 0; }
.rule-condition-errors { grid-column: 2 / -1; }
.rule-condition-add { display: inline-flex; align-items: center; gap: var(--space-2); padding: .35rem .8rem; font-size: var(--text-sm); }
.rule-condition-add .icon { width: 16px; height: 16px; }
.rule-form div.rule-then-fields { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 720px) { .rule-form div.rule-then-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rule-then-fields input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) { max-width: none; }
.rule-then-fields > div { margin-bottom: var(--space-3); }

/* Ce que fait la règle (aperçu en direct) */
.rule-preview { display: block; }
.rule-preview h2 { margin: 0 0 var(--space-3); }
.rule-preview > :not(h2) { transition: opacity .15s; }
.rule-preview[busy] > :not(h2) { opacity: .5; }
.rule-preview-message { margin: 0; color: var(--color-muted); }
.rule-preview-sentence { margin: 0 0 var(--space-4); padding-left: var(--space-3); font-weight: 500; border-left: 3px solid var(--ink); overflow-wrap: anywhere; }
.rule-preview-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-3); font-variant-numeric: tabular-nums; }
.rule-preview-count strong { font-size: var(--text-lg); font-weight: 650; letter-spacing: -.01em; font-variation-settings: var(--flare); }
.rule-preview-count .muted { font-size: var(--text-sm); }
@media (min-width: 1100px) { .rule-preview-card { position: sticky; top: var(--space-4); } }

/* Étape 4 : rappel des transformations */
.ft-rules-summary { margin-bottom: var(--space-4); }
.ft-rules-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding-left: 1.4rem; }
.ft-rules-list li { padding-left: var(--space-1); overflow-wrap: anywhere; }
.ft-rules-list li::marker { font-weight: 650; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ft-col-produced { color: var(--ink); font-weight: 500; }

/* Étape 4 : ce qui change par rapport à la version active ; page Versions (la plus récente d'abord, l'active à l'encre). */
.ft-changes { margin-bottom: var(--space-4); }
.ft-changes-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.ft-changes-list li { position: relative; padding-left: var(--space-4); overflow-wrap: anywhere; }
.ft-changes-list li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 6px; height: 2px; background: var(--color-line-strong); }
.ft-changes-history { margin: var(--space-4) 0 0; }
.ft-head-versions { font-weight: 500; }
.ft-versions-intro { max-width: 46rem; margin: 0 0 var(--space-4); }
.ft-versions-draft { margin: 0 0 var(--space-4); }
.ft-version-num {
    display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: 1px;
    font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--color-neutral-ink); background: var(--color-neutral-soft); border-radius: var(--radius-pill);
}
.ft-version.is-active .ft-version-num { color: var(--on-ink); background: var(--ink); }
.ft-version .ft-row-main { gap: 2px; }
.ft-version-deposits { font-weight: 500; font-variant-numeric: tabular-nums; }
.ft-version-changes .ft-changes-list { margin-top: var(--space-2); }
@media (min-width: 900px) { .ft-version { align-items: start; } .ft-version > .ft-row-actions { grid-column: 4; } }

/* Rejouer la version active sur les dépôts déjà importés : l'offre sous la version active (page Versions), puis la page
   du rejeu (état, nombres de l'essai ou de l'application, case à cocher avant des suppressions). Les nombres ne prennent
   jamais les couleurs du sentiment : un trait d'encre sur la ligne des suppressions suffit. */
.replay-offer {
    grid-column: 2 / -1; display: grid; gap: var(--space-1); margin-top: var(--space-2);
    padding: var(--space-4) var(--space-5); background: var(--surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-control);
}
.replay-offer p { margin: 0; }
.replay-offer-title { font-weight: 650; overflow-wrap: anywhere; }
.replay-offer .muted { max-width: 46rem; overflow-wrap: anywhere; }
.replay-offer-action { margin-top: var(--space-2) !important; }
.replay-offer-action .btn { padding: .35rem .75rem; font-size: var(--text-sm); }
.replay-card { padding: var(--space-5) var(--space-6); }
.replay-card .import-status-line { margin: 0; align-items: baseline; font-size: var(--text-md); font-weight: 500; }
.replay-card > .notice { margin: var(--space-4) 0 0; }
.replay-counts { display: grid; margin: var(--space-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.replay-counts > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.replay-n { font-size: var(--text-lg); font-weight: 650; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.replay-what { min-width: 0; overflow-wrap: anywhere; }
.replay-counts > li.is-deleted { box-shadow: inset 3px 0 0 var(--ink); padding-left: var(--space-2); grid-template-columns: calc(4.5rem - var(--space-2)) minmax(0, 1fr); }
.replay-examples-label { display: block; margin-top: var(--space-2); }
.replay-examples { display: grid; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--text-sm); }
.replay-examples q { display: block; padding-left: var(--space-3); border-left: 2px solid var(--color-line-strong); color: var(--color-muted); quotes: none; }
.replay-sub { margin: var(--space-5) 0 0; font-size: var(--text-sm); font-weight: 650; }
.replay-sub + .replay-counts { margin-top: var(--space-2); }
.replay-note { margin: var(--space-3) 0 0; }
.replay-confirm { margin: var(--space-5) 0 0; }
.replay-confirm:empty, .replay-confirm:not(:has(.replay-ack)) { margin: 0; }
.replay-confirm .replay-ack { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-control); }
.replay-confirm .replay-ack input { margin-top: .2rem; flex: none; }
.replay-confirm .replay-ack label { flex: 1 1 0; min-width: 0; margin: 0; font-weight: 600; }
.replay-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; }
.replay-actions .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
    .replay-card { padding: var(--space-4); }
    .replay-counts > li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-2); }
    .replay-counts > li.is-deleted { grid-template-columns: calc(3.25rem - var(--space-2)) minmax(0, 1fr); }
    .replay-n { font-size: var(--text-md); }
    .replay-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Vérification d'un dépôt par l'équipe (mode support) : le fichier et son motif, les colonnes comparées au type le
   plus proche (signes « + » / « − », jamais de couleur), puis relancer et refuser côte à côte sur bureau. */
.review-card { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); }
.review-card h2 { margin: 0 0 var(--space-2); }
.review-card > :last-child { margin-bottom: 0; }
.review-file-head { display: flex; align-items: flex-start; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.review-file-text { flex: 1; min-width: 12rem; }
.review-file-text h2 { margin: 0; overflow-wrap: anywhere; }
.review-file-text p { margin: var(--space-1) 0 0; }
.review-reason { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); background: var(--color-warning-soft); border-radius: var(--radius-control); }
.review-label { margin: 0; font-size: var(--text-xs); font-weight: 650; color: var(--color-warning-ink); }
.review-reason-text { margin: var(--space-1) 0 0; font-size: var(--text-md); font-weight: 500; overflow-wrap: anywhere; }
.review-errors { margin: var(--space-4) 0 0; max-height: 20rem; overflow-y: auto; }
.review-errors + p { margin: var(--space-2) 0 0; }
.review-compare { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: var(--space-4) 0; }
.review-compare h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.review-cols { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.review-cols li { display: flex; align-items: baseline; gap: var(--space-2); padding: .3rem var(--space-2); border-radius: var(--radius-badge); overflow-wrap: anywhere; min-width: 0; }
.review-cols li.is-extra, .review-cols li.is-missing { font-weight: 650; background: var(--color-neutral-soft); }
.review-cols li.is-missing { color: var(--color-muted); text-decoration: line-through; text-decoration-color: var(--color-line-strong); }
.review-sign { display: inline-block; flex: none; width: .9rem; font-weight: 650; text-align: center; color: var(--ink); }
.review-same { margin: 0 0 var(--space-4); color: var(--color-muted); }
.review-extra, .review-missing { display: flex; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; }
.review-decide { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .review-decide:not(.is-single) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.review-decide .review-card { margin: 0; }
.review-decide.is-single .review-card { max-width: 40rem; }
.review-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: none; margin-top: var(--space-3); }
.review-form :is(select, textarea) { width: 100%; max-width: none; }
.review-form label { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; font-size: var(--text-sm); font-weight: 650; }
.review-form label.check { flex-direction: row; align-items: flex-start; gap: var(--space-2); margin: 0; font-weight: 500; }
.review-form label.check input { flex: none; margin: .2em 0 0; }
@media (max-width: 599px) {
    .review-card { padding: var(--space-4); }
    .review-compare { gap: var(--space-2); }
}

/* Règles « Transformer une valeur » : table de correspondance, extraction, échelle */
.rule-pair-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding: 0; list-style: none; }
.rule-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.rule-pair:has(.rule-condition-remove) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.rule-pair-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.rule-pair-value { font-size: var(--text-sm); font-weight: 550; }
.rule-pair-arrow { color: var(--color-muted); }
.rule-form .rule-pair input:not([type=hidden]) { width: 100%; max-width: none; min-width: 0; margin: 0; }
.rule-pair-errors { grid-column: 1 / -1; }
.rule-form div.rule-pair-errors { margin: 0; }
.rule-extract-separator, .rule-extract-pattern { display: none; }
.rule-extract:has(input[value=before]:checked) .rule-extract-separator, .rule-extract:has(input[value=after]:checked) .rule-extract-separator, .rule-extract:has(input[value=regex]:checked) .rule-extract-pattern { display: block; }
.rule-scale { display: grid; gap: 0 var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .rule-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cases à cocher des colonnes (Fusionner, Retirer les doublons) */
.rule-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rule-check { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md, 8px); background: var(--color-card); cursor: pointer; }
.rule-check input { margin: 0; }
.rule-check:has(input:checked) { border-color: var(--ink); font-weight: 650; box-shadow: 0 0 0 1px var(--ink); }
.rule-check:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Colonnes à fusionner : une par ligne, dans l'ordre de la fusion ; Monter / Descendre sur les colonnes cochées */
.rule-order-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); max-width: 32rem; }
.rule-order-item { display: flex; align-items: center; gap: var(--space-2); }
.rule-order-item .rule-check { flex: 1; min-width: 0; margin: 0; }
.rule-order-item .rule-check span { overflow-wrap: anywhere; }
.rule-order-tools { display: inline-flex; gap: var(--space-1); }
.rule-order-item:not(:has(input:checked)) .rule-order-tools { visibility: hidden; }

/* Back-office : fichiers en vérification */
.admin-deposit-intro { max-width: 46rem; margin-top: calc(-1 * var(--space-3)); }
.admin-deposits td { vertical-align: top; }
.admin-deposit-file { display: block; font-weight: 650; overflow-wrap: anywhere; }
.admin-deposit-reason { max-width: 28rem; overflow-wrap: anywhere; }
@media (max-width: 899px) { .admin-deposits td + td { margin-top: var(--space-2); } .admin-deposits td.row-actions { text-align: left; } }

/* Noms d'établissement à vérifier (Paramètres › Établissements et page Établissements) : un encadré, une ligne par nom. */
.to-verify { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); }
.to-verify h2 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.to-verify > p { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.to-verify-list { list-style: none; margin: 0; padding: 0; }
.to-verify-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.to-verify-list li p { margin: 0; overflow-wrap: anywhere; }
.to-verify div.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.to-verify div.row-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.to-verify div.row-actions form div { margin: 0; }
.to-verify div.row-actions select { width: auto; max-width: 16rem; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }

/* Page d'un établissement : en-tête, onglets, vue d'ensemble en cartes, onglets Verbatims et Fiche. */
.establishment-crumb { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.establishment-crumb a { color: var(--color-muted); text-decoration: none; }
.establishment-crumb a:hover { color: var(--color-ink); text-decoration: underline; }
.establishment-head .page-header { margin-bottom: var(--space-2); }
.establishment-sub { margin: 0 0 var(--space-5); color: var(--color-muted); overflow-wrap: anywhere; }
.establishment-sub .badge { margin-left: var(--space-2); vertical-align: 1px; }
.establishment-tabs { margin: var(--space-2) 0 var(--space-6); }
@media (max-width: 599px) { .establishment-tabs { gap: var(--space-4); } }
.subnav-count { font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.establishment-kpis { margin-bottom: var(--space-6); container-type: inline-size; }
.establishment-position-value { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-lg); font-weight: 650; line-height: 1.25; color: var(--color-ink); }
.establishment-witness { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); }
.establishment-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .establishment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.establishment-grid > .card { min-width: 0; padding: var(--space-5); }
.establishment-grid h2 { margin: 0 0 var(--space-4); font-size: var(--text-md); }
.establishment-gap-list, .establishment-action-list { display: grid; margin: 0; padding: 0; list-style: none; }
.establishment-gap-list li, .establishment-action-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.establishment-gap-list li:first-child, .establishment-action-list li:first-child { border-top: 0; padding-top: 0; }
.establishment-gap-name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 650; overflow-wrap: anywhere; }
.establishment-gap-values { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-neutral-ink); }
.establishment-action-main { min-width: 0; overflow-wrap: anywhere; }
.establishment-action-main a { font-weight: 650; }
.establishment-action-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.establishment-quotes .wall { grid-template-columns: minmax(0, 1fr); }
.establishment-more { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
/* Page d'un nœud ou du groupe : les enfants, groupés par position face au réseau. */
.network-children-wrap { margin-bottom: var(--space-6); }
.network-children { padding: var(--space-5); }
.network-children h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); }
.network-children .network-group-label { margin: var(--space-5) 0 var(--space-1); font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.network-child-list { display: grid; margin: 0; padding: 0; list-style: none; }
.network-child-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.network-child-list li:first-child { border-top: 0; }
.network-child-name { font-weight: 650; overflow-wrap: anywhere; }
.network-child-figures { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }
.establishment-verbatim-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.establishment-verbatim-filters .filter-search { flex: 1 1 18rem; min-width: 0; }
.establishment-verbatim-filters label { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; min-width: 0; margin: 0; font-size: var(--text-sm); color: var(--color-neutral-ink); }
.establishment-verbatim-filters select { width: auto; min-width: 0; max-width: 100%; margin: 0; padding-block: .45rem; font-size: var(--text-sm); }
.establishment-explorer-line { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.active-filters li.active-filter.is-locked { padding-right: .6rem; }
.establishment-card { max-width: 46rem; }
.establishment-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.establishment-card-head h2 { margin: 0; font-size: var(--text-md); }
.establishment-facts dt { min-width: 9rem; }

/* Page Établissements : le tableau du réseau, en groupes (pas de rang). */
.network-lead { max-width: 62rem; margin: calc(-1 * var(--space-2)) 0 var(--space-6); color: var(--color-muted); }
.network-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.network-filters label { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-neutral-ink); }
.network-filters select { width: auto; min-width: 12rem; max-width: 100%; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }
.network-table th a { color: inherit; text-decoration: none; }
.network-table th a:hover, .network-table th a.is-active { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.network-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.network-table thead th.num { text-align: right; }
.network-group th { padding-top: var(--space-5); background: var(--surface-2); font-size: var(--text-sm); color: var(--color-ink); }
.network-group small { margin-left: var(--space-2); font-weight: 500; color: var(--color-muted); }
.network-row { position: relative; }
.network-row:hover { background: var(--color-hover); }
.network-name { font-size: var(--text-base); font-weight: 650; color: var(--color-ink); }
.network-name a { color: inherit; text-decoration: none; }
/* Toute la ligne ouvre l'établissement. */
.network-name a::after { content: ''; position: absolute; inset: 0; }
.network-name a:focus-visible { outline: none; }
.network-row:has(.network-name a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.network-name .badge { margin-left: var(--space-2); vertical-align: 1px; }
td.network-region { color: var(--color-muted); font-size: var(--text-sm); }
.network-table [data-tooltip] { position: relative; z-index: 1; }
.network-note { font-size: var(--text-xs); color: var(--color-muted); }
.network-sort { display: none !important; }
@media (max-width: 899px) {
    /* Une carte par établissement : nom en tête, chiffres libellés à la suite ; la région se replie. */
    .network-sort { display: flex !important; }
    .network-table { display: block; overflow: visible; }
    .network-table thead { display: none; }
    .network-table tbody, .network-table tr { display: block; }
    .network-group th { display: block; padding: var(--space-4) var(--space-4) var(--space-2); }
    .network-row { display: flex !important; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-line); }
    .network-row > th, .network-row > td { display: block; padding: 0; border: 0; }
    .network-row > .network-name { flex-basis: 100%; }
    .network-row > .network-region { display: none; }
    .network-row > td.num { font-size: var(--text-sm); text-align: left; }
    .network-row > td.num::before { content: attr(data-label) ' '; color: var(--color-muted); font-weight: 400; }
}

/* Paramètres › Établissements › Niveaux : l'arbre du réseau, et « Ranger dans… » dans la liste. */
.establishment-settings-tabs { margin-bottom: var(--space-5); }
.network-level { margin-bottom: var(--space-5); }
.network-level-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.network-level-head h2 { margin: 0; font-size: var(--text-md); }
.network-level-head h2 .muted { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 400; }
.network-level .row-actions, .place-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.network-level .row-actions { margin: var(--space-3) 0; }
.network-level .row-actions form, .network-node-actions form { margin: 0; }
.level-move { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); color: var(--color-ink); cursor: pointer; }
.level-move:hover { background: var(--color-hover); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inline-form input[type="text"], .inline-form select { width: auto; min-width: 12rem; max-width: 100%; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }
.network-parent { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); }
.network-nodes { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.network-nodes.is-indented { margin-left: var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--color-line); }
.network-nodes > li { padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.network-nodes > li:first-child { border-top: 0; }
.network-node-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.network-node-line .muted { font-size: var(--text-sm); }
.network-node-actions { margin-top: var(--space-1); font-size: var(--text-sm); }
.network-node-actions summary { cursor: pointer; color: var(--color-muted); font-weight: 600; }
.network-node-actions[open] { display: grid; gap: var(--space-2); }
.place-form { margin-bottom: var(--space-4); }
.place-form label { font-size: var(--text-sm); color: var(--color-neutral-ink); }
.place-form select { width: auto; min-width: 14rem; max-width: 100%; margin: 0; padding-block: .4rem; font-size: var(--text-sm); }
.network-node-actions summary { list-style: none; }
.network-node-actions summary::-webkit-details-marker { display: none; }
.network-level > .row-actions { flex-wrap: nowrap; align-items: center; }
.network-level > .row-actions .inline-form { flex-wrap: nowrap; }
@media (max-width: 640px) { .network-level > .row-actions, .network-level > .row-actions .inline-form { flex-wrap: wrap; } }

/* Champ « Accès » (utilisateurs, invitations, équipes) : le détail n'apparaît que sous « Limité à… ». */
.access-field { margin: 0 0 var(--space-6); padding: 0; border: 0; min-width: 0; }
.access-field legend { padding: 0; margin-bottom: var(--space-2); font-weight: 650; }
.access-field:not(:has(input[value=limited]:checked)) .access-limited { display: none; }
.access-limited { margin-top: var(--space-4); }
.access-limited h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); }
.access-search { width: 100%; max-width: 28rem; }
.access-options { max-height: 14rem; overflow-y: auto; padding: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
.access-group { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.access-option { display: flex; align-items: center; gap: var(--space-2); padding: 3px var(--space-2); cursor: pointer; }
.access-option[hidden] { display: none; }
.access-option input { flex: none; }
.managed-list { margin: 0 0 var(--space-6); }
.manager-preview { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); }
.manager-preview p { margin: 0 0 var(--space-1); }
.manager-preview:empty { display: none; }

/* Période des dashboards : dans la ligne du titre, à la suite de la date (« Le 3 novembre 2026 · Depuis le début de
   l'année · vs l'an dernier · Changer »), sans carte ; « Changer » ouvre la même feuille. Texte et lien en ligne : sur
   mobile, la période passe sous le titre et « Changer » la suit sur la même ligne tant qu'il y a la place. */
.dashboard-head .period-bar-compact { display: block; margin: 0 0 0 calc(var(--space-2) - var(--space-4)); padding: 0; background: none; border: 0; border-radius: 0; }
.dashboard-head .period-bar-compact .sheet-bar { display: block; }
.dashboard-head .period-bar-compact .period-compact { display: inline; margin: 0 var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-base); font-weight: 400; }
.dashboard-head .period-bar-compact .period-compact::before { content: '·'; margin-right: var(--space-2); }
.dashboard-head .period-bar-compact .sheet-open { display: inline; padding: 0; color: var(--color-ink); font: inherit; font-size: var(--text-base); font-weight: 650; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dashboard-head .period-bar-compact .sheet-open:hover { text-decoration-thickness: 2px; }
.dashboard-head:has(.period-form[aria-busy=true]) ~ .dashboard-body { opacity: .45; transition: opacity .2s; }
@media (max-width: 599px) {
    .dashboard-head .period-bar-compact { flex-basis: 100%; margin-left: 0; }
    .dashboard-head .period-bar-compact .period-compact,
    .dashboard-head .period-bar-compact .sheet-open { font-size: var(--text-sm); }
    .dashboard-head .period-bar-compact .period-compact::before { content: none; }
}

/* Outils d'une page (Exporter en PDF, Modifier) : une barre discrète d'actions groupées plutôt que deux gros boutons
   encadrés ; icône et libellé, fond au survol. */

/* Journal d'audit (Paramètres et back-office) : filtres en ligne, tableau, lignes empilées sur téléphone. */
.audit-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-5); }
.audit-filters label { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.audit-filters input, .audit-filters select { max-width: none; margin: 0; padding: .5rem .7rem; font-size: var(--text-sm); }
.audit-export { margin-left: auto; }
.audit-via { display: block; }
.audit-table .audit-date, .audit-table .audit-ip { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-table .audit-action { font-weight: 600; }
@media (max-width: 900px) {
    .audit-filters label, .audit-filters .btn { flex: 1 1 8rem; }
    .audit-export { margin-left: 0; }
    .audit-table td { padding: 0; }
    .audit-table .audit-date, .audit-table .audit-ip { font-size: var(--text-sm); color: var(--color-muted); }
}

/* Bilan trimestriel (PDF) : tableau des actions menées. */
.quarterly-actions { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.quarterly-actions th { text-align: left; font-weight: 500; color: var(--color-muted); border-bottom: 1px solid var(--color-line-strong); padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.quarterly-actions td { border-bottom: 1px solid var(--color-line); padding: var(--space-2) var(--space-3) var(--space-2) 0; vertical-align: top; }
.quarterly-actions .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Paramètres rangés en groupes : colonne de menu à gauche dès 900 px ; dessous, lien « ‹ Paramètres » et index. */
.settings-layout { display: flex; gap: var(--space-10); align-items: flex-start; }
.settings-body { flex: 1; min-width: 0; }
.settings-nav { flex: none; width: 12rem; display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-6); }
.settings-nav h2 {
    margin: var(--space-5) 0 var(--space-1); padding: 0 var(--space-3);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted);
}
.settings-nav h2:first-child { margin-top: 0; }
.settings-nav a {
    padding: .35rem var(--space-3); border-radius: var(--radius-control); color: var(--ink);
    font-size: var(--text-base); text-decoration: none; transition: background-color .15s;
}
.settings-nav a:hover { background: var(--color-hover); }
.settings-nav a.is-active { background: var(--color-card); box-shadow: 0 0 0 1px var(--color-line); font-weight: 650; }
.settings-back { display: none; margin-bottom: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.settings-back:hover { color: var(--ink); }

.settings-index { display: grid; gap: var(--space-6); max-width: 44rem; }
.settings-index h2 {
    margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-muted);
}
.settings-index-list { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; }
.settings-index-list a {
    display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4);
    color: var(--ink); text-decoration: none; border-top: 1px solid var(--color-line);
}
.settings-index-list a:first-child { border-top: 0; }
.settings-index-list a:hover { background: var(--color-hover); }
.settings-label { font-weight: 600; }
.settings-hint { font-size: var(--text-sm); }

@media (max-width: 899px) {
    .settings-nav { display: none; }
    .settings-back { display: inline-block; }
    .settings-index-list a { flex-direction: row; flex-wrap: wrap; align-items: baseline; position: relative; padding-right: var(--space-8); }
    .settings-index-list a::after { content: "›"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-muted); }
    .settings-index-list a .settings-label, .settings-index-list a .settings-hint { flex: 0 0 100%; }
}

/* Cartes de réglage, interrupteur, liste de personnes (page du bilan et Notifications). */
.setting-card { max-width: 44rem; margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.setting-card > :last-child { margin-bottom: 0; }
.setting-card-title { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: 650; }
.setting-card-hint { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.setting-card p { margin-top: 0; }
.setting-card div { margin-bottom: 0; }

.toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-3); cursor: pointer; font-weight: inherit; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-label { font-weight: 650; }
.toggle-hint { color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.toggle-input { position: absolute; right: 0; top: 50%; width: 2.25rem; height: 1.25rem; margin: 0; transform: translateY(-50%); opacity: 0; cursor: pointer; }
.toggle-switch { position: relative; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--color-line-strong); transition: background .15s; }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--on-ink); transition: transform .15s; }
.toggle-input:checked + .toggle-switch { background: var(--ink); }
.toggle-input:checked + .toggle-switch::after { transform: translateX(1rem); }
.toggle-input:focus-visible + .toggle-switch { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .toggle-switch, .toggle-switch::after { transition: none; } }

.quarterly-next { margin: 0 0 var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
.quarterly-warning { display: block; margin-top: var(--space-1); color: var(--color-warning-ink); font-weight: 500; }
.setting-fields { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.setting-field { flex: 1 1 100%; margin: 0; }
.setting-field label { margin: 0 0 var(--space-1); }
.setting-field select { max-width: 28rem; margin-top: 0; }
.quarter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.quarter-grid li { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-control); font-size: var(--text-sm); color: var(--color-muted); }

.person-list { margin: var(--space-2) 0 var(--space-4); }
.person { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); font-weight: 400; cursor: pointer; }
.person:first-child { border-top: 0; }
.person-check { flex: none; }
.person-avatar { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-hover); font-size: var(--text-xs); font-weight: 650; }
.person-main { flex: 1; min-width: 0; }
.person-name { font-weight: 600; overflow-wrap: anywhere; }
.person-role { margin-left: var(--space-1); font-size: var(--text-sm); }
.person-role:not(:empty)::before { content: '· '; }
.person-chip { flex: none; padding: 1px var(--space-2); border: 1px solid var(--color-line-strong); border-radius: 999px; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.person:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 599px) {
    .setting-card { padding: var(--space-4); }
    .person { display: grid; grid-template-columns: auto auto 1fr; align-items: center; }
    .person-chip { grid-column: 3; justify-self: start; }
    .quarter-grid { grid-template-columns: repeat(2, 1fr); }
}
.quarter-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.quarter-downloads a { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-control); font-weight: 600; text-decoration: none; }
.quarter-downloads a:hover { background: var(--color-hover); }
.quarter-downloads .muted { font-size: var(--text-xs); font-weight: 400; }