/* ==========================================================================
   La Quincaillerie — Rapprochement bancaire & ventilation par BU / Projet
   Charte graphique (section 10 du cahier des charges) :
   Beige #EDEAE6 · Anthracite #202526 · Rose #F01680 · Vert #3AE068 · Violet #7B3DFC
   Police de marque Funnel Display (titres / UI) + Inter (texte courant, tableaux denses)
   ========================================================================== */

:root {
    --lq-beige: #EDEAE6;
    --lq-anthracite: #202526;
    --lq-rose: #F01680;
    --lq-vert: #3AE068;
    --lq-violet: #7B3DFC;

    --lq-blanc: #FFFFFF;
    --lq-orange: #EDA51A;
    --lq-rouge: #E23B3B;
    --lq-gris-bordure: #DCD8D2;
    --lq-gris-texte: #6B6E6E;

    /* Avenant n°7, section 7.1 : une couleur fixe par BU, utilisée
       uniquement pour l'étiquette (badge plein, texte blanc) identifiant la
       BU - jamais pour un statut, afin de ne jamais confondre une étiquette
       BU avec un message fonctionnel (ex. Hors Prod = rouge, Web = vert). */
    --lq-bu-web: #1E8449;
    --lq-bu-acquisition: #7B3DFC;
    --lq-bu-studio: #D6127A;
    --lq-bu-hors-prod: #C62F2F;
    --lq-bu-chefferie: #202526;
    --lq-bu-frais-generaux: #0B5D63;
    --lq-bu-autre: #6B6E6E;

    /* Avenant n°7, section 7.2 : palette fonctionnelle pastel (hors BU) -
       fond très clair + texte soutenu de la même teinte, jamais l'inverse. */
    --lq-pastel-vert-fond: rgba(58, 224, 104, 0.16);
    --lq-pastel-vert-texte: #1B7A3A;
    --lq-pastel-orange-fond: rgba(237, 165, 26, 0.20);
    --lq-pastel-orange-texte: #8A5B00;
    --lq-pastel-rouge-fond: rgba(226, 59, 59, 0.15);
    --lq-pastel-rouge-texte: #A32323;
    --lq-pastel-violet-fond: rgba(123, 61, 252, 0.12);
    --lq-pastel-violet-texte: #5B21B6;
    --lq-pastel-rose-fond: rgba(240, 22, 128, 0.12);
    --lq-pastel-rose-texte: #A30F58;
    --lq-pastel-bleu-fond: rgba(26, 167, 236, 0.18);
    --lq-pastel-bleu-texte: #0B6E9C;

    --lq-police-titres: 'Funnel Display', 'Inter', system-ui, sans-serif;
    --lq-police-texte: 'Inter', system-ui, -apple-system, sans-serif;

    --lq-rayon: 10px;
    --lq-rayon-sm: 6px;
    --lq-ombre: 0 1px 3px rgba(32, 37, 38, 0.08), 0 1px 2px rgba(32, 37, 38, 0.06);
}

* { box-sizing: border-box; }

/* Garde-fou : un élément [hidden] doit toujours rester masqué, même si une
   règle plus spécifique lui donne par ailleurs un display (flex, grid...) -
   ce piège classique s'est déjà produit plusieurs fois dans cette feuille. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--lq-beige);
    color: var(--lq-anthracite);
    font-family: var(--lq-police-texte);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--lq-police-titres);
    font-weight: 600;
    margin: 0 0 0.5em;
    color: var(--lq-anthracite);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }

a { color: var(--lq-violet); }

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

/* --- Layout général -------------------------------------------------- */

.lq-shell {
    display: flex;
    min-height: 100vh;
}

.lq-sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--lq-anthracite);
    color: var(--lq-beige);
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.lq-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 20px;
    font-family: var(--lq-police-titres);
}

.lq-sidebar__brand-mark {
    font-size: 1.3rem;
    line-height: 1;
}

.lq-sidebar__brand-label { font-weight: 600; }

.lq-sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

/* Titres de section du menu (Analyse / Traitement / Paramètres) : le trait
   au-dessus sert de séparateur entre groupes, sauf pour le premier. */
.lq-sidebar__section {
    margin: 14px 10px 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(237, 234, 230, 0.14);
    color: rgba(237, 234, 230, 0.45);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lq-sidebar__section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.lq-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--lq-rayon-sm);
    color: rgba(237, 234, 230, 0.82);
    text-decoration: none;
    font-size: 0.92rem;
}

.lq-sidebar__link:hover { background: rgba(237, 234, 230, 0.08); color: var(--lq-beige); }
/* Entrée active : un noir plus profond que l'anthracite du fond (demande DF,
   10/08/2026 - plus de rose dans le menu), même logique d'opacité que le hover. */
.lq-sidebar__link.is-active { background: rgba(0, 0, 0, 0.45); color: var(--lq-blanc); }
.lq-sidebar__icon { width: 1.2em; text-align: center; }

/* Avenant n°7, section 6 : pastille "à traiter" sur l'entrée Rapprochement. */
.lq-sidebar__pastille {
    margin-left: auto;
    background: var(--lq-orange);
    color: var(--lq-anthracite);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

.lq-sidebar__user {
    border-top: 1px solid rgba(237, 234, 230, 0.15);
    padding-top: 14px;
    margin-top: 10px;
    font-size: 0.85rem;
}

.lq-sidebar__user-name { font-weight: 600; }
.lq-sidebar__user-role { color: rgba(237, 234, 230, 0.65); margin-bottom: 6px; }
.lq-sidebar__logout { color: var(--lq-beige); text-decoration: underline; font-size: 0.82rem; }

.lq-main { flex: 1; min-width: 0; padding: 28px 36px 60px; }

/* --- En-têtes de page / filtres --------------------------------------- */

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

/* Avenant n°7, section 6 : badge "à traiter" à côté du titre, même ligne. */
.lq-page-header__titre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lq-page-header__titre h1 { margin: 0; }

.lq-page-subtitle { color: var(--lq-gris-texte); margin: 0; font-size: 0.92rem; }

.lq-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lq-filters select, .lq-filters input {
    padding: 8px 10px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    background: var(--lq-blanc);
}

.lq-year-switch { display: flex; align-items: center; gap: 10px; }
.lq-year-switch__current { font-family: var(--lq-police-titres); font-weight: 600; font-size: 1.1rem; }

/* --- Boutons ------------------------------------------------------------ */

.lq-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--lq-rayon-sm);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: filter 0.15s ease;
}
.lq-button:hover { filter: brightness(0.94); }
.lq-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Avenant n°7, section 7.2 : boutons en pastel (fond très clair + texte
   soutenu de la même teinte, jamais l'inverse) - seuls le beige/blanc/noir
   (ghost, google) restent en dehors de cette règle. */
.lq-button--primary { background: var(--lq-pastel-rose-fond); color: var(--lq-pastel-rose-texte); }
.lq-button--secondary { background: var(--lq-pastel-violet-fond); color: var(--lq-pastel-violet-texte); }
.lq-button--warning { background: var(--lq-pastel-orange-fond); color: var(--lq-pastel-orange-texte); }
.lq-button--danger { background: var(--lq-pastel-rouge-fond); color: var(--lq-pastel-rouge-texte); }
.lq-button--ghost { background: transparent; border-color: var(--lq-gris-bordure); color: var(--lq-anthracite); }
.lq-button--sm { padding: 5px 10px; font-size: 0.8rem; }
.lq-button--google { background: var(--lq-blanc); color: var(--lq-anthracite); border-color: var(--lq-gris-bordure); width: 100%; justify-content: center; padding: 11px; }

.lq-mini-button {
    border: none;
    background: transparent;
    color: var(--lq-gris-texte);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 2px 6px;
}
.lq-mini-button:hover { color: var(--lq-rouge); }
.lq-mini-button--danger:hover { color: var(--lq-blanc); background: var(--lq-rouge); border-radius: var(--lq-rayon-sm); }
/* Ligne d'actions secondaires (Facultative / Supprimer) sous les actions principales. */
.lq-actions-row--secondaires { margin-top: 4px; display: flex; gap: 6px; align-items: center; }

/* Avenant n°3, section 4 : croix de suppression rapide sur chaque ligne déjà
   affectée, directement depuis la liste des transactions. */
.lq-ligne-inline { display: inline-flex; align-items: center; gap: 2px; }
.lq-ligne-inline .lq-mini-button { padding: 2px 4px; font-size: 0.8rem; }

/* --- Cartes / cadres ----------------------------------------------------- */

.lq-card {
    background: var(--lq-blanc);
    border-radius: var(--lq-rayon);
    box-shadow: var(--lq-ombre);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.lq-fieldset {
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    padding: 14px 16px;
    margin: 0;
    /* min-width: 0 - .lq-fieldset est un enfant flex de .lq-form-stack ; sans
       ça, le min-width:auto par défaut des éléments flex reprend la largeur
       min-content d'un descendant non compressible (ex. le <select> de
       mapping), poussant tout le fieldset hors du viewport mobile. */
    min-width: 0;
}
.lq-fieldset legend { padding: 0 6px; font-weight: 600; }
.lq-fieldset__content { margin: 10px 0 18px 24px; }

.lq-form-stack { display: flex; flex-direction: column; gap: 16px; }
.lq-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--lq-gris-texte); }
.lq-field input, .lq-field select, .lq-field textarea {
    font-weight: 400;
    color: var(--lq-anthracite);
    padding: 9px 10px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    /* width: 100% + min-width: 0 - .lq-field est un flex column, donc son
       select/input est lui aussi un enfant flex : sans ça, un <select> avec
       une option longue (ex. "Format banque standard (5 colonnes)") impose
       sa largeur min-content et pousse tout ancêtre (fieldset, carte) hors
       du viewport mobile au lieu de rétrécir. */
    width: 100%;
    min-width: 0;
}
.lq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lq-radio, .lq-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 6px 0; }
.lq-help { color: var(--lq-gris-texte); font-size: 0.8rem; margin: 4px 0 12px; }
.lq-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.lq-form-actions--espacees { margin-top: 28px; }
.lq-form-error { color: var(--lq-rouge); font-weight: 600; font-size: 0.85rem; }
.lq-hidden-form { display: none; }

.lq-card--form { max-width: 640px; }
.lq-field--checkbox { flex-direction: row; align-items: center; }
.lq-checkbox-label { font-weight: 400; color: var(--lq-anthracite); }
.lq-form-error-list { list-style: none; margin: 2px 0 0; padding: 0; color: var(--lq-rouge); font-size: 0.8rem; font-weight: 600; }
.lq-choice-expanded { display: flex; flex-direction: column; gap: 6px; }

/* --- Onglets référentiels (section 3 du CDC) ---------------------------- */

.lq-referentiel-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--lq-gris-bordure);
}
.lq-referentiel-tabs a {
    padding: 9px 14px;
    text-decoration: none;
    color: var(--lq-gris-texte);
    font-weight: 600;
    font-size: 0.88rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.lq-referentiel-tabs a:hover { color: var(--lq-anthracite); }
.lq-referentiel-tabs a.is-active { color: var(--lq-violet); border-bottom-color: var(--lq-violet); }

/* --- Tableaux -------------------------------------------------------- */

.lq-table-wrapper { overflow-x: auto; background: var(--lq-blanc); border-radius: var(--lq-rayon); box-shadow: var(--lq-ombre); margin-bottom: 20px; }
/* Version sans fond/ombre propres, pour un tableau large déjà à l'intérieur
   d'un .lq-card (évite la carte-dans-la-carte de .lq-table-wrapper). */
.lq-table-scroll { overflow-x: auto; }

.lq-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lq-table th {
    text-align: left;
    font-family: var(--lq-police-titres);
    font-weight: 600;
    color: var(--lq-gris-texte);
    padding: 12px 14px;
    border-bottom: 2px solid var(--lq-beige);
    white-space: nowrap;
}
.lq-table td { padding: 11px 14px; border-bottom: 1px solid var(--lq-beige); vertical-align: middle; }
.lq-table tbody tr:hover { background: rgba(123, 61, 252, 0.04); }
.lq-table__montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.lq-table__statut { white-space: nowrap; }
.lq-table__statut .lq-badge { margin-right: 4px; }
.lq-table__label { font-weight: 600; }
.lq-table__libelle { max-width: 320px; }
.lq-table__libelle [data-renommer-transaction-target="affichage"] { display: flex; align-items: flex-start; gap: 6px; }
.lq-table__libelle .lq-libelle-texte { min-width: 0; }
.lq-table__libelle [data-renommer-transaction-target="affichage"] .lq-mini-button { opacity: 0; }
.lq-table__libelle:hover [data-renommer-transaction-target="affichage"] .lq-mini-button,
.lq-table__libelle [data-renommer-transaction-target="affichage"] .lq-mini-button:focus { opacity: 1; }
.lq-table__libelle form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lq-table__libelle form input[type="text"] {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 6px 8px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
}

.lq-table--grille input.lq-input--grille { width: 56px; text-align: center; padding: 6px; }
.lq-table--grille th { text-align: center; }

.lq-row--attention { background: rgba(237, 165, 26, 0.08); }
.lq-transaction-row.is-rapprochee td:first-child { border-left: 3px solid var(--lq-vert); }
.lq-subrow td { background: var(--lq-beige); font-size: 0.8rem; color: var(--lq-gris-texte); padding: 8px 14px; }

.lq-checkbox-transaction, .lq-checkbox--table {
    width: 17px;
    height: 17px;
    accent-color: var(--lq-violet);
    cursor: pointer;
    vertical-align: middle;
    margin: 0;
}
.lq-transaction-row.is-selectionnee { background: rgba(123, 61, 252, 0.07); }
.lq-transaction-row.is-selectionnee:hover { background: rgba(123, 61, 252, 0.1); }
.lq-transaction-row.is-cliquable { cursor: pointer; }

/* Pas de display:flex ici (avenant n°6 §4, bug) : sur un <td>, ça décalait sa
   bordure inférieure par rapport aux autres cellules de la même ligne quand
   son contenu était plus haut - chaque branche du template gère déjà son
   propre agencement interne (.lq-affectation-rapide, .lq-actions-row). */
.lq-actions-cell { white-space: nowrap; }
.lq-actions-cell form { display: inline-flex; }

.lq-transaction-row.is-archivee { opacity: 0.6; background: var(--lq-beige); }
.lq-transaction-row.is-archivee:hover { background: var(--lq-beige); }
.lq-transaction-row.is-divisee { background: var(--lq-beige); }
.lq-archive-action { display: inline-flex; flex-direction: column; }

/* --- Division d'une transaction (avenant n°4 §9, icône avenant n°6 §4) -- */
.lq-actions-row { flex-wrap: wrap; }
.lq-table__montant { position: relative; }
.lq-diviser-action { display: inline-block; margin-left: 6px; }
.lq-diviser-action .lq-mini-button { font-size: 0.85rem; }
.lq-diviser-form {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 10px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    background: var(--lq-blanc);
    box-shadow: var(--lq-ombre);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 280px;
    z-index: 20;
    text-align: left;
    white-space: normal;
}
.lq-diviser-lignes { display: flex; flex-direction: column; gap: 4px; }
.lq-diviser-ligne { display: flex; align-items: center; gap: 4px; }
.lq-diviser-ligne input { flex: 1; padding: 6px 8px; border: 1px solid var(--lq-gris-bordure); border-radius: var(--lq-rayon-sm); }
.lq-diviser-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lq-diviser-reste { font-size: 0.78rem; font-weight: 600; color: var(--lq-gris-texte); }
.lq-diviser-reste--ok { color: #1B7A3A; }
.lq-diviser-reste--alerte { color: #8A5B00; }

/* --- Associer une charge prévisionnelle (avenant n°7 §2.2) -------------- */
/* Même bug que .lq-actions-cell plus haut (avenant n°6 §4) : le <td> ne
   porte plus display:flex directement, pour rester un <td> normal (display:
   table-cell) et s'étirer sur toute la hauteur de la ligne comme ses
   voisines - sans quoi son trait de séparation se désaligne du reste de la
   ligne. Le flex/positionnement du popover vit sur un conteneur interne dédié. */
.lq-charge-locative-cell__inner { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; }
.lq-associer-previsionnelle { display: inline-block; }
.lq-associer-previsionnelle .lq-mini-button { font-size: 0.85rem; }
.lq-associer-previsionnelle__popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 10px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    background: var(--lq-blanc);
    box-shadow: var(--lq-ombre);
    width: 260px;
    z-index: 20;
    text-align: left;
    white-space: normal;
}
.lq-previsionnelles-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lq-previsionnelles-liste .lq-button { width: 100%; text-align: left; white-space: normal; }

/* --- Marqueur charge locative (sous-location loyer, avenant n°4 §8) ---- */
.lq-charge-locative-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--lq-gris-texte); cursor: pointer; }
.lq-charge-locative-toggle input { cursor: pointer; }

.lq-pagination { display: flex; gap: 6px; margin-top: 14px; }
.lq-pagination a {
    padding: 6px 11px;
    border-radius: var(--lq-rayon-sm);
    background: var(--lq-blanc);
    text-decoration: none;
    color: var(--lq-anthracite);
    border: 1px solid var(--lq-gris-bordure);
}
.lq-pagination a.is-active { background: var(--lq-violet); color: var(--lq-blanc); border-color: var(--lq-violet); }

/* --- Badges / pastilles / compteurs ----------------------------------- */

.lq-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--lq-gris-bordure);
    color: var(--lq-anthracite);
    white-space: nowrap;
}
.lq-badge--success { background: var(--lq-pastel-vert-fond); color: var(--lq-pastel-vert-texte); }
.lq-badge--warning { background: var(--lq-pastel-orange-fond); color: var(--lq-pastel-orange-texte); }
.lq-badge--danger { background: var(--lq-pastel-rouge-fond); color: var(--lq-pastel-rouge-texte); }
.lq-badge--info { background: var(--lq-pastel-bleu-fond); color: var(--lq-pastel-bleu-texte); }
.lq-badge--secondary { background: rgba(32, 37, 38, 0.1); color: var(--lq-anthracite); }

/* Avenant n°7, section 7.1 : étiquette pleine (pas pastel) par BU - la
   distinction de format avec les badges de statut (pastel, ci-dessus) évite
   toute confusion entre une étiquette BU et un message fonctionnel, même
   quand les teintes se recoupent (Hors Prod = rouge, Web = vert). */
.lq-badge-bu {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lq-blanc);
    white-space: nowrap;
}
.lq-badge-bu--web { background: var(--lq-bu-web); }
.lq-badge-bu--acquisition { background: var(--lq-bu-acquisition); }
.lq-badge-bu--studio { background: var(--lq-bu-studio); }
.lq-badge-bu--hors-prod { background: var(--lq-bu-hors-prod); }
.lq-badge-bu--chefferie-de-projet { background: var(--lq-bu-chefferie); }
.lq-badge-bu--frais-generaux { background: var(--lq-bu-frais-generaux); }
.lq-badge-bu--autre { background: var(--lq-bu-autre); }

.lq-pastille {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lq-gris-bordure);
}
.lq-pastille--verte { background: var(--lq-vert); }
.lq-pastille--orange { background: var(--lq-orange); }
.lq-pastille--rouge { background: var(--lq-rouge); }

/* Avenant n°3, section 5.2 : bloc marge projet, distinct visuellement du
   bloc BU mais sans refonte du panel (design déjà validé). */
.lq-ventilation-ligne-marge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.lq-counter { font-weight: 600; padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; }
.lq-counter--success { background: var(--lq-pastel-vert-fond); color: var(--lq-pastel-vert-texte); }
.lq-counter--warning { background: var(--lq-pastel-orange-fond); color: var(--lq-pastel-orange-texte); }

.lq-muted { color: var(--lq-gris-texte); }
.lq-trend--up { color: var(--lq-rouge); font-weight: 600; }
.lq-trend--down { color: var(--lq-vert); font-weight: 600; }

/* --- Flashs ------------------------------------------------------------ */

.lq-flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* overflow-wrap: break-word - certains messages (ex. nom de variable
   d'environnement) contiennent une chaîne insécable plus large que le
   viewport mobile ; sans ça, elle pousse la carte hors écran au lieu de
   se couper. */
.lq-flash { padding: 10px 14px; border-radius: var(--lq-rayon-sm); font-size: 0.88rem; font-weight: 600; white-space: pre-line; overflow-wrap: break-word; }
.lq-flash--success { background: var(--lq-pastel-vert-fond); color: var(--lq-pastel-vert-texte); }
.lq-flash--error { background: var(--lq-pastel-rouge-fond); color: var(--lq-pastel-rouge-texte); }
.lq-flash--warning { background: var(--lq-pastel-orange-fond); color: var(--lq-pastel-orange-texte); }

/* --- KPI (tableau de bord) ---------------------------------------------- */

.lq-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.lq-kpi {
    background: var(--lq-blanc);
    border-radius: var(--lq-rayon);
    box-shadow: var(--lq-ombre);
    padding: 16px 22px;
    min-width: 220px;
    border-left: 4px solid var(--lq-violet);
}
.lq-kpi--warning { border-left-color: var(--lq-orange); }
.lq-kpi--success { border-left-color: var(--lq-vert); }
.lq-kpi__valeur { font-family: var(--lq-police-titres); font-size: 1.6rem; font-weight: 700; }
.lq-kpi__label { color: var(--lq-gris-texte); font-size: 0.82rem; margin-top: 2px; }

.lq-bar-cell { width: 160px; }
.lq-bar { height: 8px; border-radius: 4px; background: var(--lq-violet); min-width: 2px; }

/* --- Taux de consommation (suivi des lignes ventilées, avenant n°4 §3) -- */
.lq-taux__valeur { font-size: 0.82rem; font-weight: 600; margin-bottom: 2px; }
.lq-taux__track { height: 8px; border-radius: 4px; background: var(--lq-gris-bordure); overflow: hidden; }
.lq-taux__fill { height: 100%; border-radius: 4px; background: var(--lq-violet); min-width: 2px; }
.lq-taux__fill--complet { background: var(--lq-vert); }

/* --- Graphiques recommandés du tableau de bord (avenant n°4 §2) -------- */
.lq-graphiques-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 12px; }
.lq-graphique { min-width: 0; }
.lq-graphique h3 { font-size: 0.92rem; margin: 0 0 10px; }
.lq-graphique--large { grid-column: 1 / -1; }
.lq-graphique__canevas { position: relative; height: 260px; }
@media (max-width: 720px) {
    .lq-graphiques-grille { grid-template-columns: 1fr; }
}

/* --- Tableau de bord : fusion BU / catégorie / type (avenant n°4 §2) ---- */
.lq-dashboard-ligne-bu, .lq-dashboard-ligne-categorie { cursor: pointer; }
.lq-dashboard-ligne-bu:hover, .lq-dashboard-ligne-categorie:hover { background: rgba(123, 61, 252, 0.06); }
.lq-dashboard-chevron { display: inline-block; transition: transform 150ms ease; color: var(--lq-gris-texte); }
/* Le badge BU est déjà white-space: nowrap - sans ce conteneur, un badge
   large (ex. "Chefferie de projet") dans une colonne étroite (mobile) se
   renvoyait seul à la ligne suivante, séparé du chevron resté orphelin
   au-dessus. */
.lq-dashboard-ligne-bu-libelle { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lq-dashboard-ligne-bu.is-ouverte .lq-dashboard-chevron,
.lq-dashboard-ligne-categorie.is-ouverte .lq-dashboard-chevron,
.lq-etalement-ligne-bu.is-ouverte .lq-dashboard-chevron,
.lq-etalement-ligne-mois.is-ouverte .lq-dashboard-chevron { transform: rotate(90deg); }
.lq-dashboard-indent-1 { padding-left: 32px !important; }
.lq-dashboard-indent-2 { padding-left: 52px !important; color: var(--lq-gris-texte); }
.lq-dashboard-ligne-categorie td { background: rgba(32, 37, 38, 0.02); font-weight: 600; }
.lq-table--dashboard-fusion tfoot td { border-top: 2px solid var(--lq-anthracite); border-bottom: none; font-weight: 700; }

/* --- Suivi des étalements : récapitulatif BU / mois / détail (correction avenant n°6) */
.lq-etalement-ligne-bu, .lq-etalement-ligne-mois { cursor: pointer; }
.lq-etalement-ligne-bu:hover, .lq-etalement-ligne-mois:hover { background: rgba(123, 61, 252, 0.06); }
.lq-etalement-ligne-mois td { background: rgba(32, 37, 38, 0.02); font-weight: 600; }
.lq-etalement-ligne-detail td { background: rgba(32, 37, 38, 0.015); }
.lq-etalement-ligne-detail--cliquable { cursor: pointer; }
.lq-etalement-ligne-detail--cliquable:hover td { background: rgba(123, 61, 252, 0.08); }

/* --- Panneau calendrier d'une dépense étalée (avenant n°7, section 3) --- */
.lq-etalement-calendrier-ligne--avenir td { color: var(--lq-gris-texte); }

/* --- Sélection multiple + total à la volée (avenant n°3, section 3) ----- */

.lq-selection-footer {
    position: fixed;
    left: 232px;
    right: 0;
    bottom: 0;
    z-index: 35;
    background: var(--lq-anthracite);
    color: var(--lq-blanc);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 16px rgba(32, 37, 38, 0.18);
}
.lq-selection-footer[hidden] { display: none; }
.lq-selection-footer strong { font-family: var(--lq-police-titres); font-size: 1.15rem; }

@media (max-width: 1024px) {
    .lq-selection-footer { left: 0; }
}

/* --- Barre d'actions de lot (section 5.6) ------------------------------- */

.lq-bulk-bar {
    background: var(--lq-anthracite);
    color: var(--lq-blanc);
    padding: 14px 18px;
    border-radius: var(--lq-rayon);
    margin-bottom: 14px;
}
.lq-bulk-bar[hidden] { display: none; }

.lq-bulk-bar__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(237, 234, 230, 0.15);
    font-weight: 600;
}

.lq-bulk-groupes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.lq-bulk-groupe { display: flex; flex-direction: column; gap: 6px; }
.lq-bulk-groupe__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(237, 234, 230, 0.65);
}
.lq-bulk-groupe__aide {
    font-size: 0.72rem;
    color: rgba(237, 234, 230, 0.55);
    margin: 0;
}

.lq-bulk-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lq-bulk-form select, .lq-bulk-form input {
    padding: 7px 9px;
    border-radius: var(--lq-rayon-sm);
    border: 1px solid transparent;
}

/* --- Panneau de ventilation en tiroir latéral (section 5.2 bis) --------- */

.lq-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(32, 37, 38, 0.45);
    z-index: 40;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lq-drawer-overlay.is-visible { opacity: 1; }
.lq-drawer-overlay[hidden] { display: none; }

.lq-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(540px, 100vw);
    background: var(--lq-beige);
    box-shadow: -8px 0 28px rgba(32, 37, 38, 0.18);
    z-index: 41;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
.lq-drawer.is-open { transform: translateX(0); }
.lq-drawer[hidden] { display: none; }

.lq-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--lq-blanc);
    border-bottom: 1px solid var(--lq-gris-bordure);
    flex-shrink: 0;
}
.lq-drawer__titre { margin: 0; font-size: 1.1rem; }
.lq-drawer__fermer {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--lq-gris-texte);
    padding: 6px 9px;
    border-radius: var(--lq-rayon-sm);
}
.lq-drawer__fermer:hover { background: var(--lq-beige); color: var(--lq-anthracite); }

.lq-drawer__corps { flex: 1; overflow-y: auto; padding: 20px 22px 0; }

body.lq-body--drawer-ouvert, body.lq-body--menu-ouvert { overflow: hidden; }

.lq-drawer-footer {
    position: sticky;
    bottom: 0;
    background: var(--lq-blanc);
    border-top: 1px solid var(--lq-gris-bordure);
    margin: 20px -22px 0;
    padding: 14px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 640px) {
    .lq-drawer { width: 100vw; }
}

/* --- Sections du panneau de ventilation ---------------------------------- */

.lq-drawer-section {
    background: var(--lq-blanc);
    border-radius: var(--lq-rayon);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.lq-drawer-section__titre {
    margin: 0 0 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lq-gris-texte);
}
.lq-drawer-section--resume { padding: 14px 18px; }

.lq-transaction-resume { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* min-width:0 pour que ce bloc accepte de rétrécir sous sa largeur de
   contenu naturelle (contrôle responsive) - sans quoi un libellé long fait
   d'un seul "mot" ininterrompu (IBAN, référence...) forçait toute la ligne
   à déborder, poussant le montant hors du panneau sur petit écran. */
.lq-transaction-resume__info { min-width: 0; }
.lq-transaction-resume__date { color: var(--lq-gris-texte); font-size: 0.8rem; }
.lq-transaction-resume__libelle { font-weight: 600; margin-top: 2px; overflow-wrap: break-word; }
.lq-transaction-resume__montant { font-family: var(--lq-police-titres); font-size: 1.3rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* Avenant n°7, section 5 : suggestions simplifiées - deux suggestions
   indépendantes (type de dépense probable, BU probable), chacune avec son
   propre bouton "Appliquer" ; plus de suggestion de devis ni de bouton
   combiné. */
.lq-suggestions-simplifiees { display: flex; flex-direction: column; gap: 8px; }
.lq-suggestion-chip {
    background: var(--lq-pastel-violet-fond);
    border-radius: var(--lq-rayon-sm);
    padding: 8px 12px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.lq-suggestion-chip__texte { flex: 1 1 auto; }
.lq-suggestion-chip--appliquee {
    background: var(--lq-pastel-vert-fond);
}
.lq-suggestion-chip--appliquee .lq-suggestion-chip__texte::after {
    content: ' ✓';
    color: var(--lq-pastel-vert-texte);
    font-weight: 700;
}

.lq-mode-switch { display: flex; gap: 18px; font-size: 0.88rem; margin-bottom: 12px; }
.lq-mode-switch label { display: flex; align-items: center; gap: 6px; }

.lq-quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.lq-quick-actions .lq-button { width: 100%; justify-content: center; }

.lq-splitbar {
    display: flex;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--lq-gris-bordure);
    margin-bottom: 14px;
}
.lq-splitbar__segment { height: 100%; transition: width 0.15s ease; }

.lq-lignes-conteneur { display: flex; flex-direction: column; gap: 10px; }

.lq-ventilation-ligne {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--lq-beige);
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    padding: 10px 12px;
}
.lq-ventilation-ligne__principal { display: flex; gap: 8px; align-items: center; }
.lq-ligne-bu { flex: 0 0 140px; min-width: 0; }
.lq-devis-champ { flex: 1 1 auto; position: relative; min-width: 0; }
.lq-devis-champ .lq-devis-search { width: 100%; }
.lq-valeur-champ { flex: 0 0 96px; display: flex; align-items: center; gap: 6px; }
.lq-valeur-champ input { width: 100%; min-width: 0; }

.lq-ventilation-ligne select, .lq-ventilation-ligne input[type="text"], .lq-ventilation-ligne input[type="number"] {
    padding: 8px 9px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    background: var(--lq-blanc);
}
.lq-ligne-unite { font-size: 0.8rem; color: var(--lq-gris-texte); white-space: nowrap; }

.lq-devis-resultats {
    position: absolute;
    top: 100%;
    left: 0;
    /* Plus large que le champ de saisie (souvent étroit) : les libellés
       devis/facture sont longs, un menu à la largeur du champ forçait un
       ascenseur horizontal illisible. */
    min-width: min(340px, 90vw);
    max-width: min(520px, 92vw);
    width: max-content;
    margin-top: 4px;
    background: var(--lq-blanc);
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    box-shadow: var(--lq-ombre);
    z-index: 5;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
.lq-devis-resultat-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
}
.lq-devis-resultat-item + .lq-devis-resultat-item { border-top: 1px solid var(--lq-gris-bordure); }
.lq-devis-resultat-item:hover { background: var(--lq-beige); }
.lq-devis-resultat-item__entete {
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
}
.lq-devis-resultat-item__type {
    font-size: 0.7rem;
    color: var(--lq-gris-texte);
    white-space: nowrap;
}
.lq-devis-resultat-item__client { color: var(--lq-anthracite); }
.lq-devis-resultat-item__detail {
    display: block;
    margin-top: 1px;
    color: var(--lq-gris-texte);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lq-ventilation-resume { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 4px; }

@media (max-width: 480px) {
    .lq-ventilation-ligne__principal { flex-wrap: wrap; }
    .lq-ligne-bu { flex: 1 1 100%; }
    .lq-devis-champ { flex: 1 1 100%; }
    .lq-valeur-champ { flex: 1 1 auto; }
}

/* --- Lissage / étalement des dépenses (avenant n°1, section 3) ---------- */

.lq-etalement-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--lq-gris-texte); padding-left: 2px; }
.lq-etalement-mois { width: 160px; }

/* --- Démarrage rétroactif pour charges locatives (avenant n°6 §3) ------ */
.lq-etalement-debut { display: flex; flex-direction: column; gap: 4px; padding-left: 2px; margin-top: 4px; }
.lq-etalement-debut label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--lq-gris-texte); }
.lq-etalement-debut select, .lq-etalement-debut input { padding: 4px 6px; border: 1px solid var(--lq-gris-bordure); border-radius: var(--lq-rayon-sm); font-size: 0.8rem; }
.lq-etalement-debut input[type="number"] { width: 80px; }
.lq-badge--etalement { background: var(--lq-pastel-violet-fond); color: var(--lq-pastel-violet-texte); cursor: help; }

/* --- Aperçu client au survol du devis (avenant n°2, section 4) ---------- */

.lq-devis-tooltip { border-bottom: 1px dotted var(--lq-gris-texte); cursor: help; }

/* Contrôle poussé : le % du total entreprise compte les transactions
   archivées (avenant n°4 §2) alors que le montant affiché sur la même
   ligne ne les compte pas - cette icône signale l'écart plutôt que de le
   laisser invisible. */
.lq-info-archivee { cursor: help; color: var(--lq-pastel-orange-texte); font-weight: 700; }

.lq-associer-fournisseur { font-size: 0.85rem; color: var(--lq-gris-texte); }
.lq-associer-fournisseur summary { cursor: pointer; font-weight: 600; }
.lq-associer-fournisseur__contenu { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.lq-associer-fournisseur__contenu input[type="text"] {
    padding: 7px 9px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
}

/* --- Affectation rapide en un clic (avenant n°2, section 3) ------------- */

.lq-affectation-rapide {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.lq-affectation-rapide__champs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lq-affectation-rapide select {
    padding: 6px 8px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    font-size: 0.82rem;
    max-width: 140px;
}
.lq-form-error--sm { font-size: 0.75rem; margin: 0; }
.lq-muted--sm { font-size: 0.72rem; }

/* Ligne unique de boutons Affecter / Ventiler / Archiver, sous les champs
   éventuels (menus déroulants ou recherche de devis). align-items:flex-start
   (et non center) pour qu'un <details> voisin qui s'ouvre (ex. "+ Ajouter
   une charge prévisionnelle") grandisse vers le bas sans faire bouger le
   bouton lui-même - avec align-items:center, son bouton se recentre sur la
   nouvelle hauteur (bien plus grande une fois ouvert) et se désaligne des
   autres boutons de la ligne. */
.lq-actions-row { display: flex; align-items: flex-start; gap: 6px; }
.lq-button--icone { padding-left: 10px; padding-right: 10px; }

.lq-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;
}

.lq-devis-quick { position: relative; display: inline-flex; }
.lq-devis-quick[hidden] { display: none; }
.lq-devis-quick .lq-devis-search {
    padding: 6px 8px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    font-size: 0.82rem;
    width: 150px;
}
.lq-devis-quick .lq-devis-resultats {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    background: var(--lq-blanc);
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    box-shadow: var(--lq-ombre);
    z-index: 6;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Login -------------------------------------------------------------- */

.lq-login { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.lq-login__card {
    background: var(--lq-blanc);
    border-radius: var(--lq-rayon);
    box-shadow: var(--lq-ombre);
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.lq-login__title { font-size: 1.4rem; }
.lq-login__subtitle { color: var(--lq-gris-texte); margin-bottom: 24px; }
.lq-login__technical { margin-top: 24px; text-align: left; font-size: 0.85rem; color: var(--lq-gris-texte); }
.lq-login__form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lq-login__form input {
    padding: 9px 10px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
}

.lq-deverrouillage__form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 260px; }
.lq-deverrouillage__form textarea { padding: 8px; border-radius: var(--lq-rayon-sm); border: 1px solid var(--lq-gris-bordure); }

/* --- Charges locatives prévisionnelles (avenant n°7 §2) ----------------- */
.lq-ajouter-previsionnelle__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    min-width: 260px;
    padding: 12px;
    border: 1px solid var(--lq-gris-bordure);
    border-radius: var(--lq-rayon-sm);
    background: var(--lq-blanc);
}
.lq-ajouter-previsionnelle__form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--lq-gris-texte); }
.lq-ajouter-previsionnelle__form input, .lq-ajouter-previsionnelle__form select {
    padding: 8px;
    border-radius: var(--lq-rayon-sm);
    border: 1px solid var(--lq-gris-bordure);
    font-size: 0.9rem;
}
/* align-items:flex-start (et non center) : le bouton "+ Ajouter" est un
   <details> qui grandit vers le bas une fois ouvert - avec align-items:
   center il se recentrerait sur cette nouvelle hauteur et se désalignerait
   du titre voisin (même bug que .lq-actions-row plus haut). */
.lq-previsionnelles-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.lq-previsionnelles-recap { display: flex; flex-direction: column; gap: 4px; }
.lq-previsionnelle-ligne { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--lq-gris-bordure); }
.lq-previsionnelle-ligne:last-child { border-bottom: none; }
.lq-previsionnelle-ligne__entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lq-previsionnelle-ligne__details { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; }
.lq-previsionnelle-ligne__associe { font-size: 0.82rem; color: var(--lq-gris-texte); }
/* flex-wrap : le <details> "Modifier" a un contenu de largeur minimale
   (.lq-ajouter-previsionnelle__form min-width: 260px) qui, une fois ouvert,
   ne peut pas rétrécir sous les ~350px viewport mobile - sans wrap, le
   bouton "Supprimer" est poussé hors du viewport plutôt que de passer à la
   ligne suivante. */
.lq-previsionnelle-ligne__actions { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; flex-wrap: wrap; }

/* --- Responsive (priorité à l'écran de ventilation, avenant n°2 §7) ----- */

@media (max-width: 900px) {
    .lq-main { padding: 20px; }

    .lq-kpi { min-width: 45%; flex: 1; }

    .lq-mode-switch { gap: 10px; }

    .lq-affectation-rapide { align-items: stretch; width: 100%; }
    .lq-affectation-rapide__champs { flex-direction: column; align-items: stretch; }
    .lq-affectation-rapide select,
    .lq-devis-quick,
    .lq-devis-quick .lq-devis-search { max-width: none; width: 100%; }
    .lq-actions-cell { white-space: normal; }
    .lq-actions-row { width: 100%; }
    .lq-actions-row > .lq-button,
    .lq-actions-row > .lq-archive-action { flex: 1; }
    .lq-actions-row > .lq-archive-action > .lq-button { width: 100%; }

    /* Le tableau des transactions passe en liste de cartes empilées : sans
       cela, la largeur naturelle des colonnes (calculée sur l'ensemble des
       lignes, y compris le panneau de ventilation ouvert) dépasse le
       viewport et force tout - y compris le panneau - à défiler horizontalement. */
    .lq-table--transactions thead { display: none; }
    .lq-table--transactions,
    .lq-table--transactions tbody,
    .lq-table--transactions tr,
    .lq-table--transactions td {
        display: block;
        width: 100%;
    }
    .lq-table--transactions tr.lq-transaction-row {
        padding: 12px 14px;
        border-bottom: 1px solid var(--lq-beige);
    }
    .lq-table--transactions tr.lq-transaction-row td {
        padding: 4px 0;
        border-bottom: none;
    }
    .lq-table--transactions td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--lq-gris-texte);
        margin-bottom: 2px;
    }
    .lq-table--transactions .lq-table__libelle { max-width: none; white-space: normal; }
    .lq-table--transactions tr.is-rapprochee { border-left: 3px solid var(--lq-vert); }
    .lq-table--transactions tr.is-rapprochee td:first-child { border-left: none; }
}

/* --- Menu mobile/tablette en burger + off-canvas (avenant n°3, section 2) - */

.lq-mobile-topbar { display: none; }

@media (max-width: 1024px) {
    .lq-shell { flex-direction: column; }

    .lq-mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--lq-anthracite);
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 30;
    }
    .lq-mobile-topbar .lq-sidebar__brand { padding: 0; }

    .lq-menu-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 34px;
        height: 34px;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0 6px;
    }
    .lq-menu-burger span { display: block; width: 100%; height: 2px; background: var(--lq-beige); border-radius: 2px; }

    .lq-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(32, 37, 38, 0.45);
        z-index: 40;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .lq-menu-overlay.is-visible { opacity: 1; }
    .lq-menu-overlay[hidden] { display: none; }

    .lq-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(280px, 82vw);
        z-index: 41;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        overflow-y: auto;
    }
    .lq-sidebar.is-open { transform: translateX(0); }

    .lq-sidebar__brand--desktop { display: none; }

    .lq-menu-fermer {
        display: block;
        position: absolute;
        top: 14px;
        right: 14px;
        border: none;
        background: transparent;
        color: var(--lq-beige);
        font-size: 1.1rem;
        cursor: pointer;
        padding: 6px 9px;
    }

    .lq-sidebar__nav { flex-direction: column; flex-wrap: nowrap; margin-top: 36px; }
    .lq-sidebar__user { margin-left: 0; }
}

@media (min-width: 1025px) {
    .lq-menu-fermer { display: none; }
}

@media (max-width: 640px) {
    .lq-page-header { flex-direction: column; align-items: stretch; }
    .lq-filters { flex-direction: column; }
    .lq-filters select, .lq-filters input, .lq-filters button { width: 100%; }
    .lq-kpi { min-width: 100%; }
    .lq-bulk-form { flex-direction: column; align-items: stretch; width: 100%; }
    .lq-bulk-bar__entete { flex-direction: column; align-items: stretch; }
    .lq-referentiel-tabs { overflow-x: auto; flex-wrap: nowrap; }
}