/*
 * Soterys design system - tokens + composants partages (.ds-*).
 *
 * Namespace .ds-* cohabite avec les anciennes classes (.project-detail__*,
 * .dimensioning__*, .room-calc__*, .material__*) pendant la migration.
 * Une fois tous les templates migres, les anciennes classes sont retirees
 * (Jalon C).
 *
 * Contrat :
 *   - Tous les composants Twig (_page_header, _section, _status_badge, ...)
 *     rendent avec un prefixe .ds-*.
 *   - Les variables --ds-* sont consommees uniquement par les styles .ds-*.
 *   - Les anciennes classes continuent d'utiliser --color-*, --space-*
 *     definies dans app.css.
 */

:root {
    /* ----- Espacements (systeme 4px de base) ----- */
    --ds-space-1: 0.25rem;   /* 4px */
    --ds-space-2: 0.5rem;    /* 8px */
    --ds-space-3: 0.75rem;   /* 12px */
    --ds-space-4: 1rem;      /* 16px */
    --ds-space-5: 1.25rem;   /* 20px */
    --ds-space-6: 1.5rem;    /* 24px */
    --ds-space-8: 2rem;      /* 32px */

    /* ----- Typographie ----- */
    --ds-font-size-xs: 0.72rem;
    --ds-font-size-sm: 0.8rem;
    --ds-font-size-base: 0.9rem;
    --ds-font-size-md: 1rem;      /* H2 section */
    --ds-font-size-lg: 1.125rem;
    --ds-font-size-xl: 1.5rem;    /* H1 page */
    --ds-font-weight-normal: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;

    /* ----- Couleurs : herite de app.css + ajoute semantiques DS ----- */
    --ds-color-stripe: var(--color-primary);      /* liseret rouge */
    --ds-stripe-width: 3px;
    --ds-radius: 5px;
    --ds-radius-lg: 10px;

    /* Statuts SSI (reglementaires) */
    --ds-color-mandatory: #b91c1c;                /* rouge obligatoire */
    --ds-color-mandatory-bg: #fee2e2;
    --ds-color-strong: #d97706;                   /* orange fortement recommande */
    --ds-color-strong-bg: #fef3c7;
    --ds-color-recommended: #2563eb;              /* bleu recommande */
    --ds-color-recommended-bg: #dbeafe;
    --ds-color-advice: #64748b;                   /* gris conseil */
    --ds-color-advice-bg: #f1f5f9;

    /* Etats generiques */
    --ds-color-ok: #16a34a;                       /* vert OK / calcule */
    --ds-color-ok-bg: #dcfce7;
    --ds-color-warn: #d97706;                     /* orange attention */
    --ds-color-warn-bg: #fef3c7;
    --ds-color-danger: #dc2626;
    --ds-color-danger-bg: #fee2e2;
    --ds-color-info: #0284c7;
    --ds-color-info-bg: #e0f2fe;
    --ds-color-neutral: #64748b;
    --ds-color-neutral-bg: #f1f5f9;

    /* Ombres */
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ds-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);

    /* Transitions */
    --ds-transition: 0.15s ease;
}

/* =============================================================
 * Eyebrow / kicker (majuscules espacees au-dessus du titre).
 * Remplace .dimensioning__kicker, .material__kicker,
 * .tunnel-main__eyebrow, .classif-card__eyebrow.
 * ============================================================= */
.ds-eyebrow {
    display: block;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--ds-space-2);
}

/* =============================================================
 * Text muted (gris secondaire).
 * Remplace .dimensioning__muted utilise hors contexte.
 * ============================================================= */
.ds-text-muted {
    color: var(--color-text-muted);
    font-size: var(--ds-font-size-sm);
}

/* =============================================================
 * Page header (.ds-page-header) : titre + breadcrumb + meta + actions.
 * Remplace .project-detail__header--with-actions, .dimensioning__header,
 * .material__header, .project-detail__header (sans actions).
 * ============================================================= */
.ds-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-6);
}
.ds-page-header__main {
    flex: 1 1 auto;
    min-width: 0;
}
.ds-page-header__title {
    margin: 0;
    font-size: var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-bold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
}
.ds-page-header__meta {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    margin-top: var(--ds-space-2);
    color: var(--color-text-muted);
    font-size: var(--ds-font-size-sm);
}
.ds-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

/* =============================================================
 * Breadcrumb (.ds-breadcrumb) : nav projet > batiment > local.
 * ============================================================= */
.ds-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    font-size: var(--ds-font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--ds-space-3);
}
.ds-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.ds-breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.ds-breadcrumb__sep::before {
    content: '/';
    color: var(--color-text-soft);
}

/* =============================================================
 * Section (.ds-section) : wrapper carte avec liseret rouge gauche.
 * Variante .ds-section--collapsible = utilise <details> natif.
 * ============================================================= */
.ds-section {
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: var(--ds-stripe-width) solid var(--ds-color-stripe);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-3) var(--ds-space-4);
    margin-bottom: var(--ds-space-3);
    box-shadow: var(--ds-shadow-sm);
}
.ds-section__head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-3);
}
.ds-section__title {
    margin: 0;
    font-size: var(--ds-font-size-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--color-text);
}
.ds-section__eyebrow {
    display: block;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--ds-space-1);
}
.ds-section__actions {
    margin-left: auto;
    display: flex;
    gap: var(--ds-space-2);
}
.ds-section__body > :first-child { margin-top: 0; }
.ds-section__body > :last-child { margin-bottom: 0; }

/* Variante repliable via <details> */
details.ds-section > summary.ds-section__head {
    cursor: pointer;
    user-select: none;
    list-style: revert; /* garde le chevron natif navigateur */
}
details.ds-section:not([open]) > summary.ds-section__head {
    margin-bottom: 0;
}
details.ds-section[open] > summary.ds-section__head {
    padding-bottom: var(--ds-space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--ds-space-3);
}

/* =============================================================
 * Badge (.ds-badge) : fusion de .project-detail__badge,
 * .project-card__badge, .dimensioning__badge, .classif-card__badge.
 * ============================================================= */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--ds-color-neutral-bg);
    color: var(--ds-color-neutral);
    border: 1px solid transparent;
}
.ds-badge--ok { background: var(--ds-color-ok-bg); color: var(--ds-color-ok); }
.ds-badge--draft { background: var(--color-bg-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.ds-badge--warn { background: var(--ds-color-warn-bg); color: var(--ds-color-warn); }
.ds-badge--danger { background: var(--ds-color-danger-bg); color: var(--ds-color-danger); }
.ds-badge--info { background: var(--ds-color-info-bg); color: var(--ds-color-info); }
.ds-badge--neutral { background: var(--ds-color-neutral-bg); color: var(--ds-color-neutral); }

/* Statuts equipements SSI */
.ds-badge--mandatory { background: var(--ds-color-mandatory-bg); color: var(--ds-color-mandatory); }
.ds-badge--strongly_recommended { background: var(--ds-color-strong-bg); color: var(--ds-color-strong); }
.ds-badge--recommended { background: var(--ds-color-recommended-bg); color: var(--ds-color-recommended); }
.ds-badge--advice { background: var(--ds-color-advice-bg); color: var(--ds-color-advice); }

/* =============================================================
 * KPI tile (.ds-kpi) : chiffre + label. Fusion .room-calc__kpi +
 * .dimensioning__big.
 * ============================================================= */
.ds-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--color-bg-alt);
    border-radius: var(--ds-radius);
    min-width: 6rem;
}
.ds-kpi__value {
    font-size: 1.75rem;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1.1;
    color: var(--color-text);
}
.ds-kpi__label {
    font-size: var(--ds-font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--ds-space-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ds-kpi--ok .ds-kpi__value { color: var(--ds-color-ok); }
.ds-kpi--warn .ds-kpi__value { color: var(--ds-color-warn); }
.ds-kpi--danger .ds-kpi__value { color: var(--ds-color-danger); }
.ds-kpi--reco .ds-kpi__value { color: var(--color-primary); }

.ds-kpi-group {
    display: flex;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-3);
}

/* =============================================================
 * Dl key/value (.ds-kv-list) : remplace .room-calc__dl,
 * .tunnel-recap__list, .tunnel-recap__meta, .project-detail__answers dl,
 * .dimensioning__recap-group dl.
 * ============================================================= */
.ds-kv-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: var(--ds-space-1) var(--ds-space-3);
    margin: 0;
    font-size: var(--ds-font-size-sm);
}
.ds-kv-list dt {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--color-text-muted);
}
.ds-kv-list dd {
    margin: 0;
    color: var(--color-text);
}
.ds-kv-list dd.ds-kv-list__wide {
    grid-column: 1 / -1;
}

/* =============================================================
 * Warning block (.ds-warning) : bandeau jaune/orange ou rouge.
 * Remplace .dimensioning__note--warn, .project-detail__mixity-warning,
 * .room-calc__alerts li.
 * ============================================================= */
.ds-warning {
    background: var(--ds-color-warn-bg);
    border-left: var(--ds-stripe-width) solid var(--ds-color-warn);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-3) var(--ds-space-4);
    margin: var(--ds-space-3) 0;
    font-size: var(--ds-font-size-sm);
    line-height: 1.5;
}
.ds-warning--danger {
    background: var(--ds-color-danger-bg);
    border-left-color: var(--ds-color-danger);
}
.ds-warning--info {
    background: var(--ds-color-info-bg);
    border-left-color: var(--ds-color-info);
}
.ds-warning > :first-child { margin-top: 0; }
.ds-warning > :last-child { margin-bottom: 0; }
.ds-warning ul {
    margin: var(--ds-space-2) 0 0 0;
    padding-left: 1.2rem;
}
.ds-warning li + li { margin-top: var(--ds-space-1); }

/* =============================================================
 * Empty state (.ds-empty) : message quand liste vide.
 * ============================================================= */
.ds-empty {
    text-align: center;
    padding: var(--ds-space-6) var(--ds-space-4);
    color: var(--color-text-muted);
    font-size: var(--ds-font-size-sm);
    background: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--ds-radius);
}

/* =============================================================
 * Equipment card (.ds-equipment-card) : carte equipement dimensionne
 * (DAAF / DACO / extincteur / couverture / etc.). Remplace
 * .dimensioning__equipment + le bullet list de _result_summary.
 *
 * Modes :
 *   .ds-equipment-card (full)      : vue complete (placements, criteres, resp.)
 *   .ds-equipment-card--compact    : vue liste courte
 * ============================================================= */
.ds-equipment-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: var(--ds-stripe-width) solid var(--ds-color-neutral);
    border-radius: var(--ds-radius);
    margin-bottom: var(--ds-space-2);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
}
.ds-equipment-card--mandatory { border-left-color: var(--ds-color-mandatory); }
.ds-equipment-card--strongly_recommended { border-left-color: var(--ds-color-strong); }
.ds-equipment-card--recommended { border-left-color: var(--ds-color-recommended); }
.ds-equipment-card--advice { border-left-color: var(--ds-color-advice); }

/* Summary = ligne compacte toujours visible : badge + nom + quantite */
.ds-equipment-card__summary {
    list-style: revert; /* garde le chevron natif navigateur */
    cursor: pointer;
    user-select: none;
    padding: var(--ds-space-3) var(--ds-space-4);
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    font-size: var(--ds-font-size-md);
}
.ds-equipment-card__summary:hover {
    background: var(--color-bg-alt);
}
.ds-equipment-card__name {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--color-text);
    flex: 1 1 auto;
    min-width: 0;
}
.ds-equipment-card__qty {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ds-space-2);
    flex-shrink: 0;
    padding-left: var(--ds-space-3);
    border-left: 1px solid var(--color-border);
}
.ds-equipment-card__qty strong {
    font-size: 1.35rem;
    font-weight: var(--ds-font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}
.ds-equipment-card__qty-label {
    font-size: var(--ds-font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Telephone : pastille et quantite sur la premiere ligne, le nom de
   l'equipement dessous sur toute la largeur (sinon il se replie a un mot
   par ligne entre les deux). */
@media (max-width: 640px) {
    .ds-equipment-card__summary { flex-wrap: wrap; row-gap: var(--ds-space-2); }
    .ds-equipment-card__name { order: 3; flex-basis: 100%; }
    .ds-equipment-card__qty { margin-left: auto; }
}

.ds-equipment-card[open] > .ds-equipment-card__summary {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

/* Body = detail deplie */
.ds-equipment-card__body {
    padding: var(--ds-space-3) var(--ds-space-4);
}
.ds-equipment-card__body > :first-child { margin-top: 0; }
.ds-equipment-card__body > :last-child { margin-bottom: 0; }
.ds-equipment-card__body h4 {
    margin: var(--ds-space-4) 0 var(--ds-space-2) 0;
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ds-equipment-card__body ul {
    margin: 0 0 var(--ds-space-2) 0;
    padding-left: 1.2rem;
}
.ds-equipment-card__body li {
    margin-bottom: var(--ds-space-1);
    line-height: 1.5;
    font-size: var(--ds-font-size-sm);
}
.ds-equipment-card__placements {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}
.ds-equipment-card__placement {
    background: var(--color-bg-alt);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-left: 2px solid var(--color-border-strong);
}
.ds-equipment-card__placement-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-2);
    font-weight: var(--ds-font-weight-semibold);
    font-size: var(--ds-font-size-sm);
    margin-bottom: var(--ds-space-1);
}
.ds-equipment-card__placement-qty {
    color: var(--color-primary);
    font-weight: var(--ds-font-weight-bold);
}
.ds-equipment-card__placement-location,
.ds-equipment-card__placement-rationale {
    font-size: var(--ds-font-size-sm);
    color: var(--color-text);
    margin: var(--ds-space-1) 0;
    line-height: 1.5;
}
.ds-equipment-card__placement-rationale {
    color: var(--color-text-muted);
    font-style: italic;
}

/* =============================================================
 * Utility classes
 * ============================================================= */
.ds-stack-1 > * + * { margin-top: var(--ds-space-1); }
.ds-stack-2 > * + * { margin-top: var(--ds-space-2); }
.ds-stack-3 > * + * { margin-top: var(--ds-space-3); }
.ds-stack-4 > * + * { margin-top: var(--ds-space-4); }

.ds-flex { display: flex; gap: var(--ds-space-2); }
.ds-flex--wrap { flex-wrap: wrap; }
.ds-flex--between { justify-content: space-between; }
.ds-flex--center { align-items: center; }

/* =============================================================
 * Conformity badge - pastille de conformite avec deroule des motifs
 * ============================================================= */
.ds-conformity-badge {
    display: inline-block;
    position: relative;
}
.ds-conformity-badge__summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.ds-conformity-badge__summary::-webkit-details-marker { display: none; }
.ds-conformity-badge__count {
    margin-left: 0.25rem;
    opacity: 0.85;
    font-weight: 500;
}
/* Ventilation #70 : comptes non-conformites / reserves integres au badge (un
   seul bouton cliquable). Le detail colore est dans la modale groupee. */
.ds-conformity-badge__counts {
    margin-left: 0.35rem;
    font-weight: 500;
    opacity: 0.92;
}
.ds-conformity-badge__group-title {
    margin: 0.2rem 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
}
.ds-conformity-badge__group-title span { font-weight: 500; opacity: 0.7; }
.ds-conformity-badge__group-title--nc { color: #b91c1c; }
.ds-conformity-badge__group-title--res { color: #b45309; }
.ds-conformity-badge__group-title--res:not(:first-child) { margin-top: 0.9rem; }
.ds-conformity-badge__group-title--justified { color: #15803d; }
.ds-conformity-badge__group-title--justified:not(:first-child) { margin-top: 0.9rem; }
/* #123 : PLUS DE TEXTE BARRE. Le trait etait pose sur des messages de plusieurs
   lignes chargees de references normatives (« NF S 61-970 §5.2.6 ») que le BE
   doit pouvoir relire ; il les rendait illisibles sans rien apprendre. Une
   reserve levee se signale par un filet vert et un retrait, comme une citation,
   et surtout par SON MOTIF. */
.ds-conformity-badge__justified > summary {
    cursor: pointer;
    list-style: none;
}
.ds-conformity-badge__justified > summary::-webkit-details-marker { display: none; }
.ds-conformity-badge__justified > summary::after {
    content: " ▸";
    font-size: 0.8em;
    opacity: 0.7;
}
.ds-conformity-badge__justified[open] > summary::after { content: " ▾"; }
.ds-conformity-badge__list--justified > li {
    border-left: 2px solid #86efac;
    padding-left: 0.6rem;
    margin-bottom: 0.7rem;
}
.ds-conformity-badge__justified-subject {
    display: block;
    color: #4b5563;
}
.ds-conformity-badge__justified-reason {
    display: block;
    margin-top: 0.2rem;
    color: #15803d;
}
.ds-conformity-badge__justified-reason::before {
    content: "Motif : ";
    font-weight: 600;
}
.ds-conformity-badge__justified-trace {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #6b7280;
}
.ds-conformity-badge__summary::after {
    content: " ▾";
    font-size: 0.7em;
    margin-left: 0.25rem;
    opacity: 0.7;
}
.ds-conformity-badge[open] .ds-conformity-badge__summary::after {
    content: " ▴";
}
.ds-conformity-badge__panel {
    position: absolute;
    z-index: 50;
    margin-top: 0.35rem;
    min-width: min(320px, calc(100vw - 2rem));
    max-width: min(520px, calc(100vw - 2rem));
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    color: var(--color-text, #1f2937);
}
.ds-conformity-badge__panel-title {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #64748b);
    margin-bottom: 0.4rem;
}
.ds-conformity-badge__list {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.45;
}
.ds-conformity-badge__list li + li { margin-top: 0.25rem; }
/* Declencheur popup (les motifs s'affichent dans le modal standard via info-modal) */
.ds-conformity-badge__trigger {
    display: inline-flex; align-items: center;
    max-width: 100%;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    text-align: left;
}

/* Mode EMPILE, pour les conteneurs etroits (cartouche de projet).
   Premiere tentative, rejetee par le PO : laisser la pastille passer a la ligne.
   « Tu m'as fait ca comme un sagouin » - il avait raison, une pastille arrondie
   qui se plie sur trois lignes n'est plus une pastille, c'est une tache. Le
   statut garde donc sa forme sur UNE ligne, et les comptes descendent en
   dessous, en texte simple. */
.ds-conformity-badge__trigger--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
/* Deux classes : la regle de base `.ds-conformity-badge__trigger::after` est
   declaree PLUS BAS dans ce fichier et gagnerait a specificite egale. Sans ca,
   le chevron s'affiche deux fois - une fois sous les comptes, sur une
   troisieme ligne fantome. */
.ds-conformity-badge__trigger.ds-conformity-badge__trigger--stack::after { content: none; }
.ds-conformity-badge__line {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
.ds-conformity-badge__line::after {
    content: " ▾"; font-size: 0.7em; margin-left: 0.25rem; opacity: 0.7;
}
.ds-conformity-badge__trigger--stack .ds-conformity-badge__counts {
    margin-left: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: normal;
}
.ds-conformity-badge__trigger::after {
    content: " ▾"; font-size: 0.7em; margin-left: 0.25rem; opacity: 0.7;
}
.ds-conformity-badge__trigger:hover .ds-badge { filter: brightness(0.97); }
.ds-conformity-badge__counts--below { display: none; }
/* Telephone : meme presentation que le mode empile. La pastille garde le seul
   statut sur une ligne, les comptes descendent dessous en texte simple. */
@media (max-width: 640px) {
    .ds-conformity-badge__trigger:not(.ds-conformity-badge__trigger--stack) {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .ds-conformity-badge__trigger:not(.ds-conformity-badge__trigger--stack)::after { content: none; }
    .ds-conformity-badge__trigger:not(.ds-conformity-badge__trigger--stack) > .ds-badge::after {
        content: " ▾"; font-size: 0.7em; margin-left: 0.25rem; opacity: 0.7;
    }
    .ds-conformity-badge__counts--inline { display: none; }
    .ds-conformity-badge__counts--below {
        display: block;
        margin-left: 0;
        font-size: 0.78rem;
        line-height: 1.35;
        white-space: normal;
    }
}
.ds-conformity-badge__list--modal {
    font-size: 0.9rem; line-height: 1.5; color: var(--color-text, #1f2937);
    padding-left: 1.2rem; margin: 0;
}
.ds-conformity-badge__list--modal li + li { margin-top: 0.35rem; }

/* #120 (1) : une ligne qui se corrige en TAPANT une valeur, par opposition a
   celles qui demandent un arbitrage. Le BE cherchait « ou completer » sans
   jamais le trouver : la cle plate le lui montre ligne par ligne. */
.ds-conformity-badge__todo-icon { vertical-align: -2px; opacity: .8; }
.ds-conformity-badge__todo { color: #b45309; }