/* ==========================================================================
   Console référentiel — éléments propres aux fiches de contrôle
   Chargée sur les pages de référentiel, après legacy-bridge.css.
   ========================================================================== */

/* ---- En-tête de fiche : identifiant + actions ----------------------------- */
.control-actions { display: flex; align-items: center; gap: var(--s-1); }

.control-permalink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    color: var(--ink-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease);
}
.control-permalink svg { width: 15px; height: 15px; }
.control-card:hover .control-permalink,
.control-permalink:focus-visible { opacity: 1; }
.control-permalink:hover { background: var(--surface-2); color: var(--accent); border-color: var(--line); }
.control-permalink[data-copied="true"] { opacity: 1; color: var(--ok); }

/* ---- Étiquettes d'attributs sous le titre -------------------------------- */
.control-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-3);
}
.control-card .control-objective + .control-chips { margin-top: var(--s-3); }

/* ---- Tableau d'attributs dans le détail ---------------------------------- */
.attr-list {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--s-1) var(--s-4);
    margin: 0 0 var(--s-4);
    font-size: var(--t-xs);
}
.attr-row { display: contents; }
.attr-list dt {
    color: var(--ink-3);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.attr-list dd { margin: 0; color: var(--ink-2); }

/* ---- Repère d'atterrissage d'un lien profond ------------------------------ */
.control-card.is-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
@media (prefers-reduced-motion: no-preference) {
    .control-card.is-target { animation: signal-cible 2.2s var(--ease); }
    @keyframes signal-cible {
        0%, 55% { box-shadow: 0 0 0 3px var(--accent-soft); }
        100%    { box-shadow: 0 0 0 3px transparent; }
    }
}

/* ---- Barre d'outils au-dessus d'une liste -------------------------------- */
.console-toolbar {
    position: sticky;
    top: var(--nav-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
}
.console-toolbar__count {
    font-size: var(--t-xs);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ---- Message « aucun résultat » ------------------------------------------- */
.console-empty {
    padding: var(--s-12) var(--s-6);
    text-align: center;
    color: var(--ink-3);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
}

/* ---- Impression ----------------------------------------------------------- */
@media print {
    .control-details { display: block !important; }
    .control-expand, .control-permalink, .console-toolbar, .toc-sidebar { display: none !important; }
    .controls-grid { display: block; }
    .control-card { break-inside: avoid; border: 1px solid #999; margin-bottom: 8pt; }
}

/* ==========================================================================
   Barre de filtres
   ========================================================================== */
.filtres {
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    padding-block: var(--s-3);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.filtres__haut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}
.filtres__recherche { flex: 1 1 260px; min-width: 0; }
.filtres__haut .field { margin: 0; }
.filtres__haut .select { width: auto; min-width: 150px; }

.filtres__avances {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}
.filtres__avances[hidden] { display: none; }
.filtres__groupe {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.filtres__groupe legend,
.filtres__groupe > .field > .field__label {
    padding: 0;
    margin-bottom: var(--s-2);
    font-size: var(--t-3xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--ink-3);
}
.filtres__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.filtre-chip { display: inline-flex; cursor: pointer; }
.filtre-chip input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}
.filtre-chip span {
    display: inline-block;
    padding: 3px var(--s-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    color: var(--ink-2);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.filtre-chip:hover span { border-color: var(--line-strong); color: var(--ink); }
.filtre-chip input:checked + span {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: var(--fw-medium);
}
.filtre-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.filtres__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
.filtres__compte { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.filtres__compte strong { font-family: var(--font-mono); color: var(--ink); }
.filtres__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 720px) {
    .filtres { position: static; }
    .filtres__haut .select { min-width: 0; width: 100%; }
    .filtres__haut .field { flex: 1 1 100%; }
    .filtres__actions { width: 100%; }
    .filtres__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Suivi de conformité dans une fiche
   ========================================================================== */
.statut {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}
.statut__choix { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.statut__btn {
    padding: 3px var(--s-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font: inherit;
    font-size: var(--t-xs);
    color: var(--ink-2);
    cursor: pointer;
}
.statut__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.statut__btn[aria-pressed="true"]:nth-child(1) { background: var(--ok-soft);   border-color: var(--ok);   color: var(--ok); }
.statut__btn[aria-pressed="true"]:nth-child(2) { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.statut__btn[aria-pressed="true"]:nth-child(3) { background: var(--risk-soft); border-color: var(--risk); color: var(--risk); }
.statut__btn[aria-pressed="true"]:nth-child(4) { background: var(--neutral-soft); border-color: var(--line-strong); color: var(--ink-2); }
.statut .field { margin-bottom: var(--s-2); }
.statut__ligne { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.statut__ligne .field { flex: 1 1 160px; }
.statut__note { margin: var(--s-2) 0 0; }

@media print {
    .filtres, .statut__choix button:not([aria-pressed="true"]) { display: none !important; }
    .control-card[hidden] { display: none !important; }
}

/* ==========================================================================
   Comparateur
   ========================================================================== */
.comparateur-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-6) 0 var(--s-4);
}
.comparateur-recherche { flex: 1 1 220px; max-width: 320px; }
.cellule-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 2px; }
@media (max-width: 720px) {
    .comparateur-barre .btn-group { width: 100%; }
    .comparateur-barre .btn-group .btn { flex: 1 1 auto; }
}