/* =============================================================================   app-ds.css — Design System référence   Consolidation de tous les CSS inline de l'Espace Projets   Les noms de classes et variables sont conservés à l'identique des templates.   ============================================================================= *//* ─── 1. Tokens / Variables ───────────────────────────────────────────────── */:root {    /* Teal */    --ctx-teal:        #0d9488;    --ctx-teal-light:  #e6f7f5;    --ctx-teal-hover:  #f0fafa;    --fin-teal:        #0d9488;    --fin-teal-light:  #e6f7f5;    --fin-teal-hover:  #f0fafa;    --res-teal:        #0d9488;    --res-teal-light:  #e6f7f5;    --res-teal-hover:  #f0fafa;    /* Border-radius (tous à 2px) */    /* Ombres */    --ctx-shadow:      0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);    --fin-shadow:      0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);    --res-shadow:      0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);    /* Bordures */    --ctx-border:      1px solid #e2e8f0;    --fin-border:      1px solid #e2e8f0;    --res-border:      1px solid #e2e8f0;    /* Texte */    --ctx-text-dark:   #2D3E50;    --ctx-text-mid:    #415873;    --ctx-text-muted:  #8fa1b3;    --fin-text-dark:   #2D3E50;    --fin-text-mid:    #415873;    --fin-text-muted:  #8fa1b3;    --res-text-dark:   #2D3E50;    --res-text-mid:    #415873;    --res-text-muted:  #8fa1b3;    /* Fonds */    --ctx-bg-section:  #fff;    --ctx-bg-card:     #fff;    --ctx-bg-header:   #fff;    --fin-bg:          #fff;    /* Largeur unifiée drawers + side-panel droit. Recalculée en JS dans app.js (mbwComputeDrawerWidth) : sidebar nav collapsed (60 px fixe) + 25% de la largeur restante. Plancher 380 px. */    --sp-w: 380px;}
/* --- Design system : echelle d'arrondis (border-radius) --------------------
   Tokens uniques de l'echelle arbitree le 2026-08-24.
     --r-sm    3px : badges, chips, tags
     --r-md    6px : boutons, inputs, selects
     --r-lg   10px : cards, panneaux, modales
     --r-full      : pills, avatars, pastilles
   Restent a 0 : lignes de tableau et cellules de grille (lecture dense).
   Exclus : drawers (colles au viewport, 4 coins arrondis = effet flottant).
   Palier 1 (2026-08-24) : seuls les boutons .ds-btn-* consomment --r-md.
   Les tokens historiques (--ctx-radius-*, --fin-radius-*, --com-radius, --res-radius,
   tous a 2px) ne sont PAS rebranches ici : ils portent surtout des cards et des inputs,
   migres a un palier ulterieur.
   -------------------------------------------------------------------------- */
:root {
    --r-sm:   3px;
    --r-md:   6px;
    --r-lg:   10px;
    --r-full: 999px;
}

/* Boutons Bootstrap legacy (.btn) : meme arrondi que les boutons du design system,
   pour que les ecrans non encore reskines (hub Administration, onglets Offres et
   Laureats) ne restent pas au 4px de Bootstrap a cote des boutons DS a 6px.
   Placee en TETE de fichier a dessein : toute regle DS ecrite plus bas reste
   prioritaire a specificite egale (ex. .ds-btn-xs, volontairement a 3px).
   Les jointures d input-group ne sont pas touchees : les regles qui aplatissent
   les coins internes sont plus specifiques que .btn et gagnent donc la cascade. */
.btn { border-radius: var(--r-md, 6px); }

/* Centrage vertical de TOUTES les modales (2026-08-24).
   Reprend le mecanisme de .modal-dialog-centered de Bootstrap (flex + min-height)
   et l applique a toutes les boites de dialogue, y compris celles injectees en JS
   et celles a venir. 126 modales le declaraient deja, 90 ne lavaient pas.
   Compatible avec resizeModalContainer (app.js) : ce dernier calcule la hauteur a
   partir de getBoundingClientRect().top sur levenement shown.bs.modal, donc apres
   positionnement -- il sadapte au decalage. 14 modales combinaient deja les deux.
   EXCLUSION : .modal-access (ecran de blocage abonnement) est positionnee par une
   marge fixe de 7rem au-dessus de 768px (app.css l.1706) ; la centrer deplacerait
   cet ecran. Elle conserve donc son comportement dorigine. */
.modal-dialog { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.modal-access .modal-dialog { display: block; min-height: 0; }
@media (min-width: 576px) {
    .modal-dialog { min-height: calc(100% - 3.5rem); }
}

/* Drawers Echanges AO : rattachement au mecanisme de largeur unifie (2026-08-24).
   Remplace .drawer-600 sur les deux ecrans dEchanges (acheteur et fournisseur) : ils
   suivent desormais --sp-w comme tous les autres drawers, au lieu dune largeur fixe.
   Calquee sur .drawer-600 / .drawer-800 (app.css l.4080) : la classe pose la largeur ET la
   position fermee ; .drawer.open, plus specifique, gere louverture et reste donc intacte.
   .drawer-800 (Resultats AO / statuts) reste en largeur fixe : cas volontairement specifique. */
.drawer-sp { right: calc(-1 * var(--sp-w)); width: var(--sp-w); }

/* ─── 2. Drawer ───────────────────────────────────────────────────────────── */

.drawer-task {    position: fixed;    top: 0; right: calc(-1 * var(--sp-w)); bottom: 0;    width: var(--sp-w);    background: #fff;    display: flex;    flex-direction: column;    box-shadow: -4px 0 24px rgba(0,0,0,0.18);    transition: right 0.3s ease;    z-index: 1060;}

.drawer-task.open { right: 0; }

.drawer-task .drawer-header {    display: flex;    justify-content: space-between;    align-items: center;    padding: 13px 24px 12px;    flex-shrink: 0;    background: #2D3E50;    border-bottom: 1px solid rgba(0,0,0,0.15);}

.drawer-task .drawer-header h1,.drawer-task .drawer-header h3 {    margin: 0;    font-size: 1.25rem;    font-weight: 700;    color: #fff;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    max-width: calc(var(--sp-w) - 80px);}

.drawer-task .close-drawer {    background: none;    border: none;    font-size: 1.8rem;    line-height: 1;    cursor: pointer;    color: rgba(255,255,255,0.55);    opacity: 1;    padding: 0 0 0 12px;    flex-shrink: 0;}

.drawer-task .close-drawer:hover { color: #fff; }

.drawer-task > form {    display: flex;    flex-direction: column;    flex: 1;    min-height: 0;    overflow: hidden;}

.drawer-task .drawer-body {    flex: 1;    min-height: 0;    overflow-y: auto;    padding: 14px 22px;    background: #fff;}

.drawer-task .drawer-footer {    padding: 12px 24px;    border-top: 1px solid rgba(45,62,80,0.15);    background: #fff;    flex-shrink: 0;}

.drawer-task .field-label {    font-size: 0.72rem;    font-weight: 600;    color: #8fa1b3;    text-transform: uppercase;    letter-spacing: 0.04em;    margin-bottom: 5px;}

.drawer-section {    background: #f8fafb;    border: 1px solid #e2e8f0;    border-radius: 2px;    padding: 12px 14px;    margin-bottom: 10px;}

.drawer-section > .field-label:first-child { margin-bottom: 10px; }

.drawer-task .progress-pct {    font-size: 0.85rem;    font-weight: 600;    color: #8fa1b3;    min-width: 36px;    text-align: right;}

.drawer-task .drawer-template-band {    background: rgba(45,62,80,0.04);    border-bottom: 1px solid rgba(45,62,80,0.1);    padding: 8px 24px;    display: flex;    align-items: center;    flex-shrink: 0;    gap: 12px;}

.drawer-task .drawer-template-band .bootstrap-select { width: 100% !important; background: transparent !important; }

.drawer-task .drawer-template-band .bootstrap-select > .btn {    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;    background: rgba(13,148,136,0.07) !important;    border: 1px solid rgba(13,148,136,0.25) !important;    border-bottom: 1px solid rgba(13,148,136,0.25) !important;    color: #4b5563 !important;    box-shadow: none !important;    outline: none !important;    transition: background 0.2s, border-color 0.2s, color 0.2s;}

.drawer-task .drawer-template-band:hover .bootstrap-select > .btn,.drawer-task .drawer-template-band .bootstrap-select > .btn:focus,.drawer-task .drawer-template-band .bootstrap-select.show > .btn {    background: rgba(13,148,136,0.13) !important;    border-color: rgba(13,148,136,0.45) !important;    border-bottom-color: rgba(13,148,136,0.45) !important;    color: #0d9488 !important;}

/* ── Contrôles internes du drawer tâche ── */



#taskDrawer input[type="range"] { accent-color: #0d9488; }

#taskDrawer input[type="radio"]:checked + .radio-label:before {    background-color: #0d9488 !important;    box-shadow: inset 0 0 0 4px #f4f4f4;}

#taskDrawer input[type="radio"]:focus + .radio-label:before { border-color: #0d9488 !important; }

#taskDrawer .form-check input[type="checkbox"]:checked + label::before {    background-color: #0d9488 !important;    border-color: #0d9488 !important;}

#taskDrawer .task-child-row .btnDelete {    background: none; border: none; padding: 2px 4px;    color: transparent; transition: color 0.15s; line-height: 1;}

#taskDrawer .task-child-row:hover .btnDelete { color: #9ca3af; }

#taskDrawer .task-child-row .btnDelete:hover { color: #ef4444 !important; }

#taskDrawer .form-group.row.pl-5 { margin-top: 14px !important; }

/* ── Scrollbar drawer-body ── */

.drawer-task .drawer-body::-webkit-scrollbar { width: 4px; background: transparent; }

.drawer-task .drawer-body::-webkit-scrollbar-track { background: transparent; border: none; }

.drawer-task .drawer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }

.drawer-task .drawer-body.ctx-scrolling::-webkit-scrollbar-thumb,.drawer-task .drawer-body.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

.drawer-task .drawer-body::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

.drawer-task .drawer-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.drawer-task .drawer-body.ctx-scrolling,.drawer-task .drawer-body.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

/* ── Boutons drawer ── */

.drawer-task .btn-navy {    background-color: #0d9488; border-color: #0d9488; color: #fff; padding: 0.5rem 1.25rem;}

.drawer-task .btn-navy:hover,.drawer-task .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }

.drawer-task .btn-cancel {    border: 1px solid rgba(45,62,80,0.28); color: #415873; padding: 0.5rem 1.25rem;}

/* ════════════════════════════════════════════════════════════════════════════
   Harmonisation drawer-task avec drawer-project (2026-05-23) :
   classes génériques drw-* pour patterns partagés (labels, erreurs, propriétaire
   pseudo-display, espacements, couleurs champs). Vocation : converger tous les
   drawers (Tasks/Jalons/Community/futurs) sur le même design. Voir
   docs/sessions/2026-05-23_drawer-actions-jalons-harmo.md.
   ════════════════════════════════════════════════════════════════════════════ */

/* Body : padding harmonisé, gap entre sections (aligné avec drawer projet).
   Le gap s'applique aussi sur les conteneurs intermédiaires #task-section et
   #milestone-section dont les enfants sont les VRAIES sections du formulaire. */
.drawer-task .drw-body { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.drawer-task .drw-body > * { margin: 0 !important; }
.drawer-task .drw-body #task-section,
.drawer-task .drw-body #milestone-section { display: flex; flex-direction: column; gap: 14px; }
.drawer-task .drw-body #task-section > *,
.drawer-task .drw-body #milestone-section > * { margin: 0 !important; }

/* Labels champs */
.drawer-task .drw-field-label { display: block; font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; padding-bottom: 0; }
.drawer-task .drw-label-required { color: #2D3E50 !important; }
.drawer-task .drw-field-label .text-danger { margin-left: 3px; }

/* Erreur inline sous le champ */
.drawer-task .drw-err-inline { color: #ef4444; font-size: 0.72rem; margin-top: 4px; display: block; }

/* Champs harmonisés (bordure fine, focus teal) */
.drawer-task .form-control { border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); font-size: 0.84rem; padding: 0.32rem 0.6rem; }
.drawer-task .form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.drawer-task .form-control.is-invalid { border-color: #ef4444; }
.drawer-task .bootstrap-select > .btn { border: 1px solid #dde1e7 !important; border-radius: var(--r-md, 6px)!important; font-size: 0.84rem !important; }
.drawer-task .bootstrap-select > .btn:focus,.drawer-task .bootstrap-select.show > .btn { border-color: #0d9488 !important; }
.drawer-task .bootstrap-select.form-control { border: none !important; padding: 0 !important; box-shadow: none !important; }
.drawer-task .bootstrap-select > select.form-control { border: none !important; box-shadow: none !important; }
.drawer-task .input-group .form-control { border-radius: var(--r-md, 6px)!important; }
.drawer-task .form-group { margin-bottom: 0; }
.drawer-task .bootstrap-select { width: 100% !important; }

/* Boutons footer */
.drawer-task .btn-navy { background-color: #0d9488; border-color: #0d9488; color: #fff; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); font-weight: 500; }
.drawer-task .btn-navy:hover,.drawer-task .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }

/* Bouton "Dupliquer/Appliquer modèle" : harmonisation teal (vs ambre/jaune actuel) */
.drawer-task .btn-amber { background: rgba(13,148,136,0.10) !important; border: 1px solid rgba(13,148,136,0.30) !important; color: #0d9488 !important; font-weight: 500; }
.drawer-task .btn-amber:hover,.drawer-task .btn-amber:focus { background: rgba(13,148,136,0.18) !important; border-color: rgba(13,148,136,0.50) !important; color: #0f766e !important; }
.drawer-task .btn-amber:disabled { opacity: 0.55; }

/* Drawer template band (zone de choix de modèle) — couleurs identiques au drawer projet
   (rgba(45,62,80,0.04) background; rgba(45,62,80,0.15) border au repos ; teal au focus/hover). */
.drawer-task .drawer-template-band { background: rgba(45,62,80,0.04) !important; border-bottom: 1px solid rgba(45,62,80,0.1) !important; padding: 8px 16px !important; gap: 8px !important; }
.drawer-task .drawer-template-band .bootstrap-select > .btn { background: rgba(45,62,80,0.04) !important; border: 1px solid rgba(45,62,80,0.15) !important; border-bottom: 1px solid rgba(45,62,80,0.15) !important; color: #4b5563 !important; box-shadow: none !important; outline: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.drawer-task .drawer-template-band:hover .bootstrap-select > .btn,
.drawer-task .drawer-template-band .bootstrap-select > .btn:focus,
.drawer-task .drawer-template-band .bootstrap-select.show > .btn { border-color: rgba(13,148,136,0.45) !important; border-bottom-color: rgba(13,148,136,0.45) !important; color: #0d9488 !important; }

/* Zone ACCÈS — segmented control (3 boutons) + lock toggle, rendu manuellement
   dans le Twig (label > input + span). Contrôle HTML total, plus de wrapper Symfony. */
.drawer-task .drw-access-segmented-radios { display: flex !important; align-items: stretch; padding: 2px; background: #f1f3f5; border-radius: var(--r-sm, 3px); gap: 2px; flex: 1; min-width: 0; }
.drawer-task .drw-access-seg { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; margin: 0; font-size: 0.75rem; font-weight: 500; color: #8fa1b3; background: transparent; border-radius: var(--r-sm, 3px); cursor: pointer; transition: background 0.12s, color 0.12s, box-shadow 0.12s; white-space: nowrap; text-align: center; }
.drawer-task .drw-access-seg input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.drawer-task .drw-access-seg:hover { color: var(--fin-text-mid); }
.drawer-task .drw-access-seg.active { background: #fff; color: var(--fin-teal); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04); }

/* Verrouillé — toggle icône lock */
.drawer-task .drw-access-lock-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; color: #cbd5e1; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; margin: 0; padding: 0; flex-shrink: 0; }
.drawer-task .drw-access-lock-btn input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.drawer-task .drw-access-lock-btn i { font-size: 0.85rem; line-height: 1; }
.drawer-task .drw-access-lock-btn:hover { color: var(--fin-text-mid); border-color: #9ca3af; }
.drawer-task .drw-access-lock-btn.active { color: #fff; background: var(--fin-teal); border-color: var(--fin-teal); }

/* Rappels : checkbox + input nombre + "jours avant" alignés sur la même baseline.
   Le wrapper .form-check de Symfony a un padding-left Bootstrap (1.25rem) qui
   décale tout — on le neutralise. La checkbox est laissée en position statique
   (PAS cachée). */
.drawer-task .drw-reminders-row { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.drawer-task .drw-reminder { display: flex !important; align-items: center !important; gap: 6px !important; }
.drawer-task .drw-reminder .form-check { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.drawer-task .drw-reminder .form-check .form-check-input,
.drawer-task .drw-reminder input[type="checkbox"] { position: static !important; opacity: 1 !important; margin: 0 !important; flex-shrink: 0; width: 14px !important; height: 14px !important; }
.drawer-task .drw-reminder .form-check .form-check-label { display: none !important; }
.drawer-task .drw-reminder input[type="number"],
.drawer-task .drw-reminder input[type="text"] { width: 50px !important; padding: 3px 6px !important; font-size: 0.84rem !important; text-align: center; height: auto !important; min-height: 0 !important; }
.drawer-task .drw-reminder-suffix { font-size: 0.82rem; color: var(--fin-text-muted); white-space: nowrap; }
/* Checkbox rappel : couleur teal quand cochée (accent-color natif) */
.drawer-task .drw-reminder input[type="checkbox"] { accent-color: var(--fin-teal); cursor: pointer; }

/* Section repliable "Paramètres avancés" — calquée sur drw-prj-ctx-section du drawer projet */
.drawer-task .drw-task-advanced { margin-top: 4px; background: #f8fafb; border: 1px solid #edf1f5; border-radius: 2px; }
.drawer-task .drw-task-advanced-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; text-decoration: none !important; color: var(--fin-teal); font-size: 0.82rem; font-weight: 600; background: transparent; border: none; width: 100%; text-align: left; transition: background-color 0.15s ease, color 0.15s ease; border-radius: var(--r-md, 6px); }
.drawer-task .drw-task-advanced-toggle:hover { background-color: #eef4f5; color: #0f766e; text-decoration: none !important; }
.drawer-task .drw-task-advanced-toggle:hover .drw-task-advanced-icon { color: #0f766e; }
.drawer-task .drw-task-advanced-opt { font-size: 0.72rem; color: var(--fin-text-muted); font-weight: 400; margin-left: 2px; }
.drawer-task .drw-task-advanced-count { font-size: 0.7rem; font-weight: 500; color: #475569; background: #e6f4f1; border: 1px solid #c4e7e0; border-radius: var(--r-full, 999px); padding: 1px 8px; margin-left: 6px; }
.drawer-task .drw-task-advanced-icon { margin-left: auto; transition: transform 0.18s ease, color 0.15s ease; font-size: 0.75rem; }
.drawer-task .drw-task-advanced-toggle[aria-expanded="true"] .drw-task-advanced-icon { transform: rotate(90deg); }
.drawer-task .drw-task-advanced-body { padding: 4px 14px 14px; flex-direction: column; gap: 14px; display: none; }
.drawer-task .drw-task-advanced-body.show { display: flex; }
.drawer-task .drw-task-advanced-body > * { margin: 0 !important; }

/* Bouton Clôturer (drawer édition action) — outline navy pour différencier d'Enregistrer (teal plein) */
.drawer-task .drw-task-complete-btn { background: #fff; border: 1px solid #2D3E50; color: #2D3E50; font-weight: 600; border-radius: var(--r-md, 6px); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.drawer-task .drw-task-complete-btn:hover { background: #2D3E50; border-color: #2D3E50; color: #fff; }
.drawer-task .drw-task-complete-btn.is-disabled { background: #f1f5f9; border: 1px solid #e2e8f0; color: #94a3b8; cursor: not-allowed; font-weight: 500; }
.drawer-task .drw-task-complete-btn.is-disabled:hover { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }

/* Footer drawer Action — border-radius 2px uniforme sur tous les boutons (cohérence avec design ref) */
.drawer-task .drawer-footer .btn { border-radius: var(--r-md, 6px); }

/* Bouton Ajouter (checklist) — alignement à gauche, override de .pl-5 hérité du markup form */
.drawer-task .drw-task-advanced-body .form-group.row.pl-5 { padding-left: 0 !important; margin-left: 0; margin-right: 0; }

/* ─── Mode DISPLAY (lecture seule) drawer Action ───────────────────────────────────── */
/* Bandeau clôture en haut du body */
.drawer-task .drw-task-completed-banner {
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    font-size: 0.82rem; padding: 7px 14px; border-radius: var(--r-lg, 10px);
}
/* Valeur read-only : texte simple, taille cohérente avec les inputs en edit */
.drawer-task .drw-readonly-value { font-size: 0.85rem; color: #2D3E50; line-height: 1.4; padding: 2px 0; }
.drawer-task .drw-readonly-html { padding-top: 4px; }
.drawer-task .drw-readonly-html p:last-child { margin-bottom: 0; }
/* Chip Accès (équivalent visuel du segmented control en read-only) */
.drawer-task .drw-access-chip {
    display: inline-block; font-size: 0.72rem; font-weight: 500;
    border: 1px solid #ff855e; color: #ff855e;
    padding: 2px 10px; border-radius: var(--r-full, 999px); background: #fff;
}
/* Nom d'action en read-only — encadré léger comme en edit, centré */
.drawer-task .drw-name-readonly {
    border: 1px solid #dde1e7; border-radius: var(--r-md, 6px);
    padding: 8px 10px; text-align: center;
    font-size: 1rem; color: #2D3E50; background: #fafbfc;
}
.drawer-task .drw-task-advanced-body .add_element_link { margin-left: 0; }

/* Slider Avancement : centré verticalement à la même hauteur que le dropdown Priorité voisin
   (qui est plus haut). On contraint la cellule à display:flex column avec l'input bar
   verticalement centrée dans l'espace restant sous le label. */
.drawer-task .drw-row-50 > * { display: flex !important; flex-direction: column !important; }
.drawer-task .drw-row-50 > * > .drw-field-label { flex-shrink: 0; }
.drawer-task .drw-row-50 > * > .d-flex.align-items-center { flex: 1; min-height: 30px; }

/* Champ "Nom de l'action" pleine largeur, style aligné sur .item-edit-title du drawer projet
   ("Nom du dossier") : encadré complet 4 bords, placeholder centré, grisé 300 weight. */
.drawer-task .drw-name-field input,
.drawer-task .drw-name-field textarea { width: 100% !important; font-size: 1.05rem !important; font-weight: 400 !important; padding: 8px 12px !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important; resize: none !important; color: #2D3E50; border: 1px solid #dde1e7 !important; border-radius: var(--r-md, 6px)!important; background: #fff !important; box-shadow: none !important; text-align: center !important; }
.drawer-task .drw-name-field input:focus,
.drawer-task .drw-name-field textarea:focus { border-color: var(--fin-teal) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.12) !important; }
.drawer-task .drw-name-field input::placeholder,
.drawer-task .drw-name-field textarea::placeholder { font-weight: 300 !important; color: #94a3b8 !important; font-size: 0.95rem; text-align: center; }
.drawer-task .drw-name-field textarea { min-height: 38px !important; }

/* Date inputs dans le drawer : pleine largeur de leur cellule .drw-row-50 > * */
.drawer-task .drw-date-field input.form-control,
.drawer-task .drw-date-field input[type="text"] { width: 100% !important; max-width: none !important; }

/* Pseudo-display Porteur (responsable) — 1 user seulement (pas d'équipe comme projet) */
.drawer-task .drw-owner-inline { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px; width: 100%; font-size: 0.82rem; padding: 5px 0 7px; border-bottom: 1px solid #f0f4f8; }
.drawer-task .drw-owner-label { color: #8fa1b3; font-size: 0.74rem; }
.drawer-task .drw-owner-value { color: #2D3E50; font-weight: 400; font-size: 0.78rem; }
.drawer-task .drw-owner-edit-icon { margin-left: auto; visibility: hidden; color: #8fa1b3; font-size: 0.78rem; text-decoration: none !important; }
.drawer-task .drw-owner-inline:hover .drw-owner-edit-icon { visibility: visible; }
.drawer-task .drw-owner-edit-icon:hover { color: #0d9488; }

/* Row dates / priorité-progress : flex 50/50 avec gap, sans Bootstrap row */
.drawer-task .drw-row-50 { display: flex !important; gap: 8px !important; margin: 0 !important; }
.drawer-task .drw-row-50 > * { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; }

.drawer-task .btn-cancel:hover { background-color: #f8fafb; border-color: rgba(45,62,80,0.5); color: #2D3E50; }

/* ── Drawer création/édition projet (étape 4a redesign V1) ── */

/* Drawer édition projet : même largeur que les autres drawers et le side-panel
   (var(--sp-w), pilotée par mbwComputeDrawerWidth() dans app.js). */
.drawer-project {    position: fixed;    top: 0; right: calc(-1 * var(--sp-w)); bottom: 0;    width: var(--sp-w);    background: #fff;    display: flex;    flex-direction: column;    box-shadow: -4px 0 24px rgba(0,0,0,0.18);    transition: right 0.3s ease;    z-index: 1060;}

/* Overlay sur toute la zone, quand drawer Nouveau projet ouvert */
/* La navbar primaire (gauche) et la colonne liste projets sont remontées au-dessus de l'overlay → visibles + cliquables */
.drw-new-prj-overlay {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(45, 62, 80, 0);
    z-index: 1058;
    transition: background-color 0.25s ease;
}
/* L'overlay capte les clics pour les bloquer sur la zone projet (clic = no-op, ne ferme PAS le drawer).
   Désactivé tant que la classe drawer-new-project-open n'est pas posée, pour ne pas perturber l'app au repos. */
body:not(.drawer-new-project-open) .drw-new-prj-overlay { pointer-events: none; }
body.drawer-new-project-open .drw-new-prj-overlay { background-color: rgba(0, 0, 0, 0.5); }
/* drw-overlay-flash : ancien comportement (clic dans la liste = fade) retiré 2026-06-09 car la liste
   est désormais sous l'overlay (Option 1 click-trap étendue). Garde pour rétro-compat éventuelle. */
/* Remonte navbar + colonne liste projets au-dessus de l'overlay (sans toucher au drawer qui reste au z-index 1060) */
/* IMPORTANT : ne PAS surcharger 'position' — la navbar-primary est position:absolute, la changer casse le layout (push de la page). */
/* Hiérarchie : navbar (1062) > #list-toggle (1061) > drawer (1060) > col-left (1059) > overlay (1058) */
/* !important nécessaire car .navbar-primary.collapsed.expanded a 3 classes (spécificité 0,0,3,0) > notre 0,0,2,1 */
body.drawer-new-project-open .navbar-primary { z-index: 1062 !important; }
body.drawer-new-project-open #list-toggle { z-index: 1061 !important; }
/* Liste de gauche désormais sous l'overlay (Option 1 click-trap étendue 2026-06-09) :
   plus de boost z-index ni de fond blanc qui la maintenaient au-dessus. */
/* ::before étend visuellement la col-left de 15px à gauche (gap .row Bootstrap entre navbar et col-left) et 200px en haut (padding section) — couvre les strips qui laissaient passer l'overlay */
/* Important : on ne PAS étendre à droite, sinon on couvre la zone où l'ombre doit apparaître */
/* Pseudo-élément ::before retiré 2026-06-09 — il étendait le fond blanc de la col-left pour la
   maintenir visible au-dessus de l'overlay. N'a plus de raison d'être maintenant que la col-left
   est volontairement couverte par l'overlay. */
/* Recrée l'ombre/dégradé d'origine (qui était sur .col-right::before z-index 50, désormais masqué par l'overlay) */
/* left: 100% = colle l'ombre au bord droit de la col-left ; width: 12px = étend vers la droite sur 12px (au-dessus de l'overlay) */
/* Pseudo-élément ::after retiré 2026-06-09 — il recréait l'ombre du bord droit de la col-left
   au-dessus de l'overlay. N'a plus de raison d'être avec la col-left sous l'overlay. */
@media (max-width: 767px) { .drw-new-prj-overlay { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
 * Overlay drawer "Nouveau contrat" (2026-06-09) — Option 1 click-trap étendue
 * à toute la zone sous le drawer (liste + zone droite). Mirror du pattern projet.
 * Hiérarchie z-index : navbar (1062) > #list-toggle (1061) > drawer (1060) > overlay (1058).
 * ════════════════════════════════════════════════════════════════════════ */
.drw-new-ctr-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(45, 62, 80, 0); z-index: 1058; transition: background-color 0.25s ease; }
body:not(.drawer-new-contract-open) .drw-new-ctr-overlay { pointer-events: none; }
body.drawer-new-contract-open .drw-new-ctr-overlay { background-color: rgba(0, 0, 0, 0.5); }
body.drawer-new-contract-open .navbar-primary { z-index: 1062 !important; }
body.drawer-new-contract-open #list-toggle { z-index: 1061 !important; }
@media (max-width: 767px) { .drw-new-ctr-overlay { display: none; } }

/* Overlay drawer Entreprise (calque .drw-new-ctr-overlay) — fond gris non cliquable derrière le drawer. */
.drw-new-spl-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(45, 62, 80, 0); z-index: 1058; transition: background-color 0.25s ease; }
body:not(.drawer-new-supplier-open) .drw-new-spl-overlay { pointer-events: none; }
body.drawer-new-supplier-open .drw-new-spl-overlay { background-color: rgba(0, 0, 0, 0.5); }
body.drawer-new-supplier-open .navbar-primary { z-index: 1062 !important; }
body.drawer-new-supplier-open #list-toggle { z-index: 1061 !important; }
@media (max-width: 767px) { .drw-new-spl-overlay { display: none; } }

.drawer-project.open { right: 0; }

.drawer-project .drawer-header {    display: flex;    justify-content: space-between;    align-items: center;    padding: 13px 16px 12px;    flex-shrink: 0;    background: #2D3E50;    border-bottom: 1px solid rgba(0,0,0,0.15);}

.drawer-project .drawer-header h1,.drawer-project .drawer-header h3 {    margin: 0;    font-size: 1.25rem;    font-weight: 700;    color: #fff;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    max-width: calc(var(--sp-w) - 80px);}

.drawer-project .close-drawer {    background: none;    border: none;    font-size: 1.8rem;    line-height: 1;    cursor: pointer;    color: rgba(255,255,255,0.55);    opacity: 1;    padding: 0 0 0 12px;    flex-shrink: 0;}

.drawer-project .close-drawer:hover { color: #fff; }

.drawer-project > form {    display: flex;    flex-direction: column;    flex: 1;    min-height: 0;    overflow: hidden;}

.drawer-project .drawer-body {    flex: 1;    min-height: 0;    overflow-y: auto;    padding: 14px 0 0 0;    background: #fff;}

.drawer-project .drawer-footer {    padding: 12px 16px;    border-top: 1px solid rgba(45,62,80,0.15);    background: #fff;    flex-shrink: 0;}

.drawer-project .drawer-body::-webkit-scrollbar { width: 4px; background: transparent; }

.drawer-project .drawer-body::-webkit-scrollbar-track { background: transparent; border: none; }

.drawer-project .drawer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }

.drawer-project .drawer-body.ctx-scrolling::-webkit-scrollbar-thumb,.drawer-project .drawer-body.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

.drawer-project .drawer-body::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

.drawer-project .drawer-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.drawer-project .drawer-body.ctx-scrolling,.drawer-project .drawer-body.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

.drawer-project .btn-navy {    background-color: #0d9488; border-color: #0d9488; color: #fff; padding: 0.5rem 1.25rem;}

.drawer-project .btn-navy:hover,.drawer-project .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }

.drawer-project .btn-cancel {    border: 1px solid rgba(45,62,80,0.28); color: #415873; padding: 0.5rem 1.25rem;}

.drawer-project .btn-cancel:hover { background-color: #f8fafb; border-color: rgba(45,62,80,0.5); color: #2D3E50; }

.drawer-project .container-modal-scrollable { height: auto !important; overflow: visible !important; }

.drawer-project .drawer-template-band { background: rgba(45,62,80,0.04) !important; border-bottom: 1px solid rgba(45,62,80,0.1) !important; padding: 8px 16px !important; display: flex; align-items: center; flex-shrink: 0; gap: 8px !important; }
.drawer-project .drawer-template-band .bootstrap-select { width: 100% !important; background: transparent !important; }
.drawer-project .drawer-template-band .bootstrap-select > .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(45,62,80,0.04) !important; border: 1px solid rgba(45,62,80,0.15) !important; border-bottom: 1px solid rgba(45,62,80,0.15) !important; color: #4b5563 !important; box-shadow: none !important; outline: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.drawer-project .drawer-template-band:hover .bootstrap-select > .btn,
.drawer-project .drawer-template-band .bootstrap-select > .btn:focus,
.drawer-project .drawer-template-band .bootstrap-select.show > .btn { background: rgba(13,148,136,0.13) !important; border-color: rgba(13,148,136,0.45) !important; border-bottom-color: rgba(13,148,136,0.45) !important; color: #0d9488 !important; }

/* ── Header fiche projet (étape 5 redesign V1) ── */

.prj-header { padding: 12px 40px 0 40px; background: #fff; }

/* Alignement panneau droit : 40 px à gauche et à droite (harmonisation cible).
   Étape 1 — 2026-05-23. */
.prj-tabs-wrapper { padding: 0 40px; }
#item-toolbar-container { padding-left: 40px !important; padding-right: 40px; }

.prj-header-line1 { margin-bottom: 12px; flex-wrap: nowrap; column-gap: 10px; }

.prj-header-title { font-size: 1.05rem; font-weight: 700; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; }

.prj-header-favorite { color: #cfd8dc; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: color 0.12s; display: inline-flex; align-items: center; }

.prj-header-favorite:hover { text-decoration: none; }

.prj-header-favorite .fa-star.fas { color: #0d9488; }

.prj-header-favorite .fa-star.far:hover { color: #0d9488; }

.prj-header-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 0.7rem; font-weight: 600; border-radius: var(--r-sm, 3px); color: var(--pill-color, #2D3E50); background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent); white-space: nowrap; line-height: 1.35; flex-shrink: 0; }

.prj-header-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pill-color, #2D3E50); display: inline-block; flex-shrink: 0; }

.prj-header-pill-alert .fas { font-size: 0.62rem; }

/* Contour gris au repos retiré (raffinement UX fiche projet 2026-06-03) — cohérent avec
   les autres boutons icône (kebab + crayon + chevron + add). Hover teal-light conservé. */
.prj-header-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-lg, 10px); color: #8fa1b3; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; text-decoration: none; font-size: 0.9rem; }

.prj-header-kebab:hover,.prj-header-kebab[aria-expanded="true"] { background: #e6f7f5; color: #0d9488; border-color: #0d9488; text-decoration: none; }

.prj-header-line2 { gap: 0; padding: 0 0 10px; justify-content: flex-start; }

.prj-header-info { display: flex; flex-direction: column; min-width: 0; flex: 0 0 calc(100% / 6); padding: 0 14px; }

.prj-header-info:first-child { padding-left: 0; }

.prj-header-info:last-child { padding-right: 0; }

.prj-header-info + .prj-header-info { border-left: 1px solid #eef2f5; }

.prj-header-info-owner { flex-direction: row !important; align-items: center; gap: 10px; }

.prj-header-owner-avatar .circled,.prj-header-owner-avatar .md-circled,.prj-header-owner-avatar .lg-circled { width: 28px !important; height: 28px !important; font-size: 0.65rem !important; line-height: 28px !important; flex-shrink: 0; }

.prj-header-owner-avatar .circled img,.prj-header-owner-avatar .md-circled img,.prj-header-owner-avatar .lg-circled img { width: 28px !important; height: 28px !important; }

.prj-header-owner-text { display: flex; flex-direction: column; min-width: 0; }

/* Labels meta-row passés en lowercase + muet + non-bold (raffinement UX fiche projet
   2026-06-03) — l'épuration globale faisait ressortir les uppercase bold initiaux comme
   "lourds". Style "label muet" qui laisse la valeur dominer visuellement. */
.prj-header-info-label { font-size: 0.7rem; font-weight: 300; color: #8fa1b3; text-transform: none; letter-spacing: 0; margin-bottom: 3px; }

.prj-header-info-value { font-size: 0.76rem; font-weight: 500; color: #2D3E50; line-height: 1.3; }

.prj-header-info-empty { font-size: 0.78rem; font-weight: 400; color: #8fa1b3; font-style: italic; text-decoration: none; border-bottom: 1px dotted #8fa1b3; }

.prj-header-info-empty:hover { color: #0d9488; border-bottom-color: #0d9488; text-decoration: none; }

.prj-header-info-link { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.12s; }

.prj-header-info-link:hover { color: #0d9488; text-decoration: none; }

/* Bandeau "Phase actuelle / Prochain jalon" : taille réduite + non-bold sur labels
   et valeurs (raffinement UX fiche projet 2026-06-03). Cohérent avec l'épuration globale. */
.prj-header-line3 { padding: 10px 14px; background: #f5f6f8; border-radius: var(--r-lg, 10px); margin: 2px 0 0; font-size: 0.72rem; }

.prj-header-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: #0d9488; display: inline-block; margin-right: 8px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(13,148,136,0.20); }

.prj-header-phase-label { color: #8fa1b3; font-weight: 400; }

.prj-header-phase-value { color: #2D3E50; font-weight: 400; }

/* Onglets fiche projet (style underline DS, indépendant de main-generic-tabs partagé avec Suppliers) */

.prj-tabs-wrapper { background: #fff; padding-bottom: 4px; }

.prj-tabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; padding-left: 0; flex-wrap: nowrap; }

.prj-tabs.nav-tabs .nav-item { flex: 0 0 auto; }

.prj-tabs.nav-tabs .nav-link, .prj-tabs.nav-tabs .nav-link.active, .prj-tabs.nav-tabs .nav-link:hover { position: relative; border: none; background: transparent; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 400 !important; padding: 10px 14px; margin: 0 28px 0 0; transition: color 0.12s; }

.prj-tabs.nav-tabs .nav-link { color: #6b7a8d; }

.prj-tabs.nav-tabs .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }

.prj-tabs.nav-tabs .nav-link:hover { color: #0d9488; font-weight: 400 !important; }

.prj-tabs.nav-tabs .nav-link:hover::after { transform: scaleX(1); }

.prj-tabs.nav-tabs .nav-link.active, .prj-tabs.nav-tabs .nav-link.active:hover { color: #0d9488 !important; font-weight: 600 !important; border-bottom: none !important; }

.prj-tabs.nav-tabs .nav-link.active::after, .prj-tabs.nav-tabs .nav-link:hover::after { transform: scaleX(1); }

.prj-tabs.nav-tabs .nav-link:focus { outline: none; box-shadow: none; }


/* ── Lien description (partagé tâche + jalon) ── */

.drawer-desc-trigger {    color: rgba(13,148,136,0.65); font-size: 0.85rem;    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;}

.drawer-desc-trigger:hover { color: #0d9488; text-decoration: none; }

/* ─── 3. Side Panel ───────────────────────────────────────────────────────── */

#side-panel {    position: fixed;    right: calc(-1 * var(--sp-w)); top: 0; bottom: 0;    width: var(--sp-w);    background: #f4f6f8;    border-left: 1px solid #e2e8f0;    box-shadow: -6px 0 12px rgba(45,62,80,0.17);    z-index: 500;    display: flex;    flex-direction: column;    transition: right 0.28s ease;    overflow: hidden; overflow: clip;}body.sp-open #side-panel { right: 0; }

#project-container, #item-toolbar-container { transition: margin-right 0.28s ease; }body.sp-open #project-container { margin-right: var(--sp-w); }body.sp-open #item-toolbar-container { margin-right: var(--sp-w); }body.sp-open .margined { max-width: none !important; }

/* ── Bouton toggle ── */

/* sp-toggle (déplier panel droit) — compact, chevron seul, étape 6.6 */
#sp-toggle { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 501; background: #2D3E50; color: #fff; border: none; border-radius: var(--r-md, 6px) 0 0 var(--r-md, 6px); width: 18px; height: 48px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: right 0.28s ease, background 0.15s; }
#sp-toggle:hover { background: #0d9488; }
body.modal-open #sp-toggle { visibility: hidden; pointer-events: none; }
#sp-toggle:focus, #sp-toggle:focus-visible { outline: none; box-shadow: none; }
#sp-toggle #sp-toggle-icon { font-size: 0.7rem; transition: transform 0.28s; }
body.sp-open #sp-toggle { right: var(--sp-w); }
body.sp-open #sp-toggle #sp-toggle-icon { transform: rotate(180deg); }

/* ── Sections accordion (refonte étape 6.6 — fond clair cohérent thème blanc) ── */

/* Refonte bottom-sheets (calque drawer projet .drw-prj-sheet*) : zone des sheets glissants
   au-dessus des barres sticky bas. Un seul sheet ouvert a la fois (toujours une section). */
.sp-sheets-area { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; overflow: clip; }
/* 2026-09-21 (retour préprod) : `overflow:hidden` reste défilable par programme ; un focus() (autofocus du composer du fil) pendant
   la transition d'ouverture de la feuille faisait défiler .sp-sheets-area pour amener l'éditeur en vue → en-tête « Fil d'activité »
   hors champ, contenu décalé, impossible à remettre. `overflow: clip` interdit tout défilement ; idem sur le panneau et les feuilles. */

.sp-sheet { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; overflow: clip; transform: translateY(110%); visibility: hidden; transition: transform 0.18s ease-out, visibility 0s linear 0.18s; z-index: 2; }

.sp-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform 0.18s ease-out; z-index: 3; }

/* En-tete du sheet ouvert = le titre "remonte en haut" (teal clair, 36px). */
.sp-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; height: 36px; padding: 0 12px 0 14px; background: rgba(13,148,136,0.06); border-bottom: 1px solid rgba(13,148,136,0.18); }

.sp-sheet-header-title { display: flex; align-items: center; font-size: 0.72rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-icon { color: #0d9488; margin-right: 7px; }

/* Barres sticky bas pleine largeur (calque .drw-prj-sheet-bar). La barre active est masquee. */
.sp-sheet-bars { flex-shrink: 0; display: flex; flex-direction: column; background: #e2e8f0; border-top: 1px solid rgba(45,62,80,0.22); box-shadow: 0 -3px 12px rgba(45,62,80,0.11); }

.sp-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 14px; height: 36px; background: transparent; border: none; border-bottom: 1px solid rgba(45,62,80,0.08); font-size: 0.72rem; font-weight: 500; color: #415873; cursor: pointer; transition: background 0.15s, color 0.15s; }

.sp-sheet-bar:last-child { border-bottom: none; }

.sp-sheet-bar:hover, .sp-sheet-bar:focus { background: rgba(45,62,80,0.04); color: #0d9488; outline: none; }

.sp-sheet-bar.is-active { display: none; }

.sp-sheet-bar-title { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-sheet-bar-icon { font-size: 0.62rem; color: #94a3b8; flex: 0 0 auto; transition: color 0.15s; }

.sp-sheet-bar:hover .sp-sheet-bar-icon { color: #0d9488; }

/* Bouton "Recharger" du fil d'activite (en-tete du sheet) : petit, outline teal, visible. */
.sp-reload-btn { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; font-size: 0.68rem; font-weight: 600; color: #0d9488; background: #fff; border: 1px solid rgba(13,148,136,0.4); border-radius: var(--r-md, 6px); cursor: pointer; line-height: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; }

.sp-reload-btn i { margin-right: 5px; font-size: 0.62rem; }

.sp-reload-btn:hover, .sp-reload-btn:focus { background: #0d9488; color: #fff; border-color: #0d9488; outline: none; }

.sp-reload-btn:focus-visible { box-shadow: 0 0 0 2px rgba(13,148,136,0.3); }

/* Corps scrollable du sheet ouvert (conserve les IDs #sp-body-* lus par les partials AJAX). */
.sp-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #fff; display: flex; flex-direction: column; }

.sp-sheet-body::-webkit-scrollbar { width: 3px; }

.sp-sheet-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Voile de chargement de la zone centrale des hubs (Dossiers / Contrats / Entreprises) pendant le chargement d'un item
   (app.js loadItemTab, 2026-09-18) : retour visuel immédiat au clic, la ligne cliquée est déjà active. */
#item-preview.item-preview-loading { position: relative; }
#item-preview.item-preview-loading::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.55); z-index: 40; }
#item-preview.item-preview-loading::before { content: ''; position: absolute; top: 40%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid #d1e7e4; border-top-color: #0d9488; border-radius: 50%; animation: mbwItemSpin 0.7s linear infinite; z-index: 41; }
@keyframes mbwItemSpin { to { transform: rotate(360deg); } }

.sp-loader {    display: flex; align-items: center; justify-content: center;    padding: 24px; color: #9ca3af; font-size: 1.1rem; flex: 1;}

/* ── Empty state panel ── */

.sp-empty-state {    display: flex; flex-direction: column; align-items: center; justify-content: center;    padding: 28px 16px; text-align: center; gap: 6px;}

.sp-empty-state-icon { font-size: 1.4rem; color: #d1d5db; margin-bottom: 4px; }

.sp-empty-state-title { font-size: 0.78rem; font-weight: 600; color: #6b7280; line-height: 1.3; }

.sp-empty-state-hint { font-size: 0.71rem; color: #9ca3af; line-height: 1.4; max-width: 200px; }

/* ── Item rows (notes / docs) ── */

.sp-item-row {    display: flex; align-items: center;    padding: 7px 12px; border-bottom: 1px solid #f3f4f6;    gap: 8px; position: relative;}

.sp-item-row:last-child { border-bottom: none; }

.sp-item-row:hover { background: #fafafa; }

.sp-item-row-body { flex: 1; min-width: 0; }

.sp-item-row-name {    font-size: 0.78rem; font-weight: 500; color: #374151;    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.sp-item-row-meta { font-size: 0.68rem; color: #9ca3af; margin-top: 2px; display: flex; align-items: center; gap: 6px; }

.sp-item-row-badge {    display: inline-block; font-size: 0.62rem;    border: 1px solid #ff855e; color: #ff855e;    border-radius: 20px; padding: 0 5px; line-height: 1.5;}

.sp-item-row-actions {    display: flex; align-items: center; gap: 6px;    opacity: 0; transition: opacity 0.15s; flex-shrink: 0;}

.sp-item-row:hover .sp-item-row-actions { opacity: 1; }

.sp-item-row-actions a { color: #9ca3af; font-size: 0.75rem; line-height: 1; text-decoration: none; }

.sp-item-row-actions a:hover { color: #ef4444; }

#sp-body-documents .sp-item-row-actions a.sp-doc-view:hover,#sp-body-documents .sp-item-row-actions a.sp-doc-download:hover { color: #00897b; }

.sp-item-row-avatar { flex-shrink: 0; margin-right: 6px; }

/* Avatar 18px */

#sp-body-notes .sp-item-row-avatar .md-circled,#sp-body-documents .sp-item-row-avatar .md-circled {    width: 18px !important; height: 18px !important;    min-width: 18px !important; line-height: 18px !important;}

#sp-body-notes .sp-item-row-avatar .md-circled img,#sp-body-documents .sp-item-row-avatar .md-circled img { width: 18px !important; height: 18px !important; }

#sp-body-notes .sp-item-row-avatar .md-circled div,#sp-body-documents .sp-item-row-avatar .md-circled div {    font-size: 7px !important; line-height: 18px !important; padding-top: 0 !important;}

#sp-body-notes .sp-note-row { cursor: pointer; }

/* ── Barre d'action Notes/Fichiers ── */

.sp-panel-add-bar {    margin-top: auto; padding: 8px 12px 10px;    position: sticky; bottom: 0;    background: #f4f6f8; z-index: 1;    display: flex; flex-direction: column; gap: 6px;}

.sp-panel-add-btn {    display: flex; align-items: center; justify-content: center; gap: 6px;    width: 100%; padding: 7px 12px;    background: #0d9488; color: #fff !important;    border-radius: var(--r-md, 6px); font-size: 0.75rem; font-weight: 500;    text-decoration: none; transition: background 0.15s;}

.sp-panel-add-btn:hover { background: #0f766e; color: #fff !important; text-decoration: none; }

#sp-open-doc-history {    font-size: 11.5px; font-weight: 500; color: rgba(13,148,136,0.85);    text-decoration: none;    display: inline-flex; align-items: center; justify-content: center; gap: 4px;    transition: color 0.2s;}

#sp-open-doc-history:hover,#sp-open-doc-history.sp-doc-hist-near { color: #0a6e66; text-decoration: none; }

/* ─── 4. Onglet Contexte ──────────────────────────────────────────────────── *//* ── Layout colonnes ── */

.ctx-left-col  { background: var(--ctx-bg-section); display: flex; flex-direction: column; overflow: hidden; flex: 0 0 60% !important; max-width: 60% !important; }

.ctx-right-col { background: var(--ctx-bg-section); display: flex; flex-direction: column; overflow: hidden; flex: 0 0 40% !important; max-width: 40% !important; }

.ctx-col-top-strip { flex: 0 0 10px; background: var(--ctx-bg-section); transition: opacity 0.18s ease; }

.ctx-col-top-strip.ctx-strip-hidden { opacity: 0; }

/* Étape 4c.2-bis — Barre de titre de section (FICHE PROJET / ASSOCIATIONS).
   Remplace le ctx-col-top-strip vide pour donner un chapeau sémantique aux 2 colonnes du Contexte.
   Inclut titre uppercase discret + % complétude + boutons d'action + barre de progression dessous. */
.ctx-section-title-bar {
    /* Refonte 2026-06-09 : passage de grid à flex pour grouper TITRE + COMPLÉTUDE + ACTIONS
       sur la gauche (ordre lecture naturelle), au lieu de pousser complétude/actions à droite. */
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px 8px 40px;
    background: var(--ctx-bg-section);
    flex: 0 0 auto;
    /* Min-height pour aligner les barres "FICHE PROJET" et "ASSOCIATIONS" entre les
       2 colonnes (la gauche est plus haute avec cercle complétude + boutons). Ainsi
       les 1res cards commencent au même Y → traits sous les titres alignés. */
    min-height: 42px;
}
.ctx-section-title-bar-right { padding: 8px 40px 8px 16px; }
/* line-height fixe sur les éléments pour garantir l'alignement vertical des 2 titres (gauche/droite) */
.ctx-section-title-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 24px;
}
/* Mini-cercle + % discret aligné sur le bas du cercle (alignement baseline-end) */
.ctx-section-title-completion {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    cursor: help;
    line-height: 1;
}
.ctx-section-title-completion svg {
    width: 18px; height: 18px;
    display: block;
}
.ctx-section-title-percent {
    font-size: 0.62rem;
    font-weight: 300;
    color: #94a3b8;
    line-height: 1;
    padding-bottom: 1px;
}
.ctx-section-title-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    line-height: 24px;
}
.ctx-section-title-actions .ctx-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    color: #cbd5e1;
    font-size: 0.78rem;
    text-decoration: none;
    border-radius: var(--r-md, 6px);
    transition: background 0.12s ease, color 0.12s ease;
}
.ctx-section-title-actions .ctx-action-btn:hover { background: #e6f7f5; color: #0d9488; }

.ctx-left-col .container-scrollable,.ctx-right-scrollable { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%; }

/* Gap visuel 40px entre cards de gauche et cards de droite (2026-06-09) :
   left col padding-right 19px + right col padding-left 21px = 40px constant, garanti par
   `scrollbar-gutter: stable` sur les 2 colonnes (gap inchangé qu'il y ait ou non une scrollbar). */
.ctx-left-col .container-scrollable { scrollbar-gutter: stable; }
.ctx-left-col .container-scrollable > div { padding-left: 40px !important; padding-right: 19px !important; }
.ctx-right-scrollable { scrollbar-gutter: stable; }
.ctx-right-scrollable > div { padding-left: 21px !important; padding-right: 34px !important; }

/* Étape 2 — Alignement 40/40 onglets Finance / Tasks / Résultats (2026-05-23).
   scrollbar-gutter: stable + compensation padding-right par la largeur de la
   scrollbar pour aligner le bord droit des cartes sur celui du header
   quelle que soit la présence d'une scrollbar. */
#project-costs-content { padding-left: 40px; padding-right: 34px; }
#project-costs-content .container-scrollable { scrollbar-gutter: stable; }
.res-col-scrollable { scrollbar-gutter: stable; }
/* Gap visuel 40px (cf. Contexte) : left col padding-right 24px + right col padding-left 16px = 40px. */
.res-left-col .res-col-scrollable > div { padding-left: 40px; padding-right: 24px; }
.res-right-col .res-col-scrollable > div { padding-left: 16px; padding-right: 37px; }

/* Neutralise scroll parasite */

#project-preview-col, #item-content { background: var(--ctx-bg-section) !important; overflow: hidden !important; }

/* ── Scrollbars colonnes principales ── */

.ctx-left-col .container-scrollable::-webkit-scrollbar,.ctx-right-scrollable::-webkit-scrollbar { width: 3px; background: transparent !important; }

.ctx-left-col .container-scrollable::-webkit-scrollbar-track,.ctx-right-scrollable::-webkit-scrollbar-track { background: transparent !important; border: none !important; }

.ctx-left-col .container-scrollable::-webkit-scrollbar-thumb,.ctx-right-scrollable::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; transition: background 0.25s; }

/* Scroll actif (en cours de défilement) : gris standard #c4c9d0, plus visible. */
.ctx-left-col .container-scrollable.ctx-scrolling::-webkit-scrollbar-thumb,.ctx-right-scrollable.ctx-scrolling::-webkit-scrollbar-thumb { background: #c4c9d0 !important; }
/* Hover de proximité (souris dans la colonne) : gris très clair #dde1e6 pour signaler sans polluer. */
.ctx-left-col .container-scrollable.ctx-scrollbar-hover::-webkit-scrollbar-thumb,.ctx-right-scrollable.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #dde1e6 !important; }

.ctx-left-col .container-scrollable,.ctx-right-scrollable { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.ctx-left-col .container-scrollable.ctx-scrolling,.ctx-right-scrollable.ctx-scrolling { scrollbar-color: #c4c9d0 transparent; }
.ctx-left-col .container-scrollable.ctx-scrollbar-hover,.ctx-right-scrollable.ctx-scrollbar-hover { scrollbar-color: #dde1e6 transparent; }

/* ── Cards infos gauche ── */

/* Cards section gauche (Informations clés / Caractéristiques / Enjeux) :
   raffinement UX fiche projet 2026-06-03 — bordures verticales + bas en transparent
   (style épuré Linear), seule la top-border reste visible. Layout 1px préservé via
   border-color: transparent (vs border:none qui aurait micro-décalé les colonnes). */
.ctx-info-card {
    background: var(--ctx-bg-card);
    /* Bordures + box-shadow entièrement retirées (raffinement UX fiche projet 2026-06-03).
       Seules les séparations INTERNES restent : trait sous le titre d'entête
       (.ctx-info-card-header border-bottom) + trait au-dessus de la barre dates
       (.ctx-planning-strip). Layout 1px préservé via border transparent. */
    border: 1px solid transparent;
    border-left-color: #e2e8f0;
    border-bottom-color: #e2e8f0;
    border-radius: var(--r-lg, 10px);
    margin-bottom: 16px;
}


/* Trait sous le titre éclairci (raffinement UX fiche projet 2026-06-03) +
   min-height pour aligner avec .ctx-section-header de la colonne droite. */
/* Trait sous titre : dessiné via background-image linear-gradient (pixel-stable, indépendant du
   contenu/hauteur du header, identique sur toutes les cards). Start à 20px (= padding-left, aligné
   sur l'icône à gauche du titre), épaisseur 1px constante. */
/* Trait sous titre : border-bottom 1px solid (rendu pixel-parfait par le navigateur) + masque
   ::after sur les 20px de gauche pour visuellement faire démarrer le trait au niveau de l'icône.
   Garantit la même épaisseur sur toutes les cards Contexte (anti-artefacts subpixel). */
.ctx-info-card-header { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.ctx-info-card-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }

.ctx-info-card-body { padding: 12px 20px 16px 20px; }

.ctx-info-card-body .row.ml-2 { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 8px !important; align-items: baseline; }

.ctx-info-card-body .row.ml-2 .col-6.col-md-4,.ctx-info-card-body .row.ml-2 .px-0.px-sm-3.col-6.col-md-4 { font-size: 0.72rem; color: var(--ctx-text-muted); font-weight: 400; padding-left: 0 !important; padding-right: 8px !important; }

.ctx-info-card-body .row.ml-2 .col-6.col-md-8,.ctx-info-card-body .row.ml-2 .col-md-8 { font-size: 0.79rem; color: var(--ctx-text-dark); font-weight: 500; padding-left: 0 !important; padding-right: 0 !important; }

.ctx-info-card-body .row.ml-2 .col-md-12 { font-size: 0.79rem; color: var(--ctx-text-mid); line-height: 1.5; padding-left: 0 !important; padding-right: 0 !important; }

.ctx-info-card-body .auto-truncated { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; }

.ctx-info-card-body .starrating { display: flex; gap: 3px; flex-wrap: wrap; }

.ctx-info-card-body .starrating .fas { color: var(--ctx-teal) !important; }

.ctx-info-card-body .starrating .far { color: #cfd8dc !important; }

.ctx-info-card-body .sm-squared { display: none !important; }

.ctx-calculated-field .ctx-calculated-icon { font-size: 0.62rem; color: var(--ctx-text-muted); margin-right: 4px; opacity: 0.7; cursor: help; }

/* ── Icône box + titre ── */

.ctx-icon-box { display: flex; align-items: center; justify-content: center; color: var(--ctx-teal); font-size: 0.88rem; flex-shrink: 0; width: 18px; }

.ctx-icon-box-sm { display: flex; align-items: center; justify-content: center; color: var(--ctx-teal); font-size: 0.88rem; flex-shrink: 0; width: 18px; }

.ctx-card-title { font-size: 0.80rem; font-weight: 500; color: var(--ctx-text-dark); letter-spacing: normal; }

/* ── Sections droite ── */

/* Cards section droite (Équipe / Entreprises liées / Projets liés) :
   même raffinement UX que .ctx-info-card — verticales + bas transparentes. */
.ctx-section {
    background: var(--ctx-bg-card);
    /* Même raison que .ctx-info-card : bordures + shadow retirées, seul le trait
       interne sous le titre d'entête (.ctx-section-header border-bottom) reste. */
    border: 1px solid transparent;
    border-left-color: #e2e8f0;
    border-bottom-color: #e2e8f0;
    border-radius: var(--r-lg, 10px);
    margin-bottom: 16px;
}

/* Même alignement + trait éclairci que .ctx-info-card-header (raffinement UX fiche projet). */
.ctx-section-header { position: relative; display: flex; align-items: center; padding: 12px 16px; background: #fff; border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0; gap: 8px; flex-wrap: wrap; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.ctx-section-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 16px; height: 1px; background: #fff; }

.ctx-sh-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ctx-section-label { font-size: 0.80rem; font-weight: 500; color: var(--ctx-text-dark); letter-spacing: normal; }

.ctx-sh-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: nowrap; }

.ctx-sh-right .select2-container { min-width: 148px; }

.ctx-sh-right .select2-container--default .select2-selection--single { height: 27px; border: 1px solid #d1d5db; border-radius: var(--r-md, 6px); background: #fff; }

.ctx-sh-right .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 25px; color: #9ca3af; font-size: 0.73rem; padding-left: 9px; padding-right: 22px; }

.ctx-sh-right .select2-container--default .select2-selection--single .select2-selection__arrow { height: 25px; width: 20px; }

/* ── Listes scrollables ── */

.ctx-section-list { max-height: 152px; overflow-y: auto; padding-top: 2px; padding-bottom: 2px; }

.ctx-section-list-lg { max-height: 266px; }

.ctx-section-list::-webkit-scrollbar { width: 3px; }

.ctx-section-list::-webkit-scrollbar-track { background: transparent; }

.ctx-section-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }

.ctx-section:hover .ctx-section-list::-webkit-scrollbar-thumb { background: #c4c9d0; }

.ctx-section-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.ctx-section-list { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.ctx-section:hover .ctx-section-list { scrollbar-color: #c4c9d0 transparent; }

/* ── Distinction colonne droite : fond gris très léger sur les cards (.ctx-section / .res-card /
   ctr-pilo-bare-card-framed) pour les différencier visuellement des cards de gauche (2026-06-09). #}
   Hover des rows internes adapté pour rester visible sur ce nouveau fond. */
.ctx-right-col .ctx-section { background: #fcfcfd; }
/* Fond uniquement (pas de gradient) : le border-bottom + ::after de la règle de base font déjà
   le trait. Ajouter un gradient produirait un DOUBLE trait. */
.ctx-right-col .ctx-section-header { background: #fcfcfd; }
.ctx-right-col .ctx-section-header::after { background: #fcfcfd; }
.ctx-right-col .ctx-member-row:hover,
.ctx-right-col .ctx-contact-row:hover,
.ctx-right-col .ctx-supplier-row:hover,
.ctx-right-col .ctx-project-row:hover { background: #f1f5f9; }

/* ── Planning strip ── */

.ctx-planning-strip { position: relative; display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; padding: 8px 20px; border-top: 1px solid #e2e8f0; background: transparent; border-radius: 0; }
.ctx-planning-strip::before { content: ''; position: absolute; left: 0; top: -1px; width: 20px; height: 1px; background: #fff; }

.ctx-planning-strip .row.ml-2 { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0 !important; width: auto !important; flex: 0 0 auto; }

.ctx-planning-strip .row.ml-2 [class*="col-"] { width: auto !important; flex: 0 0 auto !important; padding: 0 !important; max-width: none !important; }

.ctx-planning-strip .row.ml-2 .col-6.col-md-4,.ctx-planning-strip .row.ml-2 .px-0.px-sm-3.col-6.col-md-4 { font-size: 0.70rem; color: var(--ctx-text-muted); white-space: nowrap; font-weight: 400; }

.ctx-planning-strip .row.ml-2 .col-6.col-md-8,.ctx-planning-strip .row.ml-2 .col-md-8 { font-size: 0.79rem; font-weight: 500; color: var(--ctx-text-dark); white-space: nowrap; padding-left: 0 !important; }

/* ── Badge compteur ── */

.ctx-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--ctx-teal-light); color: var(--ctx-teal); border-radius: var(--r-sm, 3px); font-size: 0.65rem; font-weight: 600; line-height: 1; }

/* ── Boutons d'action header card ── */

/* Contour gris au repos retiré (raffinement UX fiche projet 2026-06-03) — style icon-only
   épuré Linear. Hover (teal-light + teal border) inchangé pour signaler l'interactivité. */
.ctx-action-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--r-md, 6px); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ctx-text-muted); font-size: 0.72rem; transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; }

.ctx-action-btn:hover { text-decoration: none; }

.ctx-action-edit:hover   { background: var(--ctx-teal-light); color: var(--ctx-teal); border-color: var(--ctx-teal); }

.ctx-action-source:hover { background: #eff6ff; color: #3b82f6; border-color: #93c5fd; }

.ctx-action-delete:hover { background: #fef2f2; color: #ef4444; border-color: #fca5a5; }

.ctx-action-kebab:hover,.ctx-action-kebab[aria-expanded="true"] { background: var(--ctx-teal-light); color: var(--ctx-teal); border-color: var(--ctx-teal); }

.ctx-action-menu { font-size: 0.78rem; min-width: 200px; border: 1px solid #e5e7eb; border-radius: var(--r-md, 6px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px 0; }

.ctx-action-menu .dropdown-item { padding: 8px 14px; color: var(--ctx-text-dark); display: flex; align-items: center; transition: background 0.12s, color 0.12s; }

.ctx-action-menu .dropdown-item:hover,.ctx-action-menu .dropdown-item:focus { background: var(--ctx-teal-light); color: var(--ctx-teal); }

.ctx-action-menu .dropdown-item .fas { width: 16px; font-size: 0.78rem; color: var(--ctx-text-muted); }

.ctx-action-menu .dropdown-item:hover .fas { color: var(--ctx-teal); }

.ctx-action-menu .ctx-action-item-delete { color: #ef4444; }

.ctx-action-menu .ctx-action-item-delete:hover,.ctx-action-menu .ctx-action-item-delete:focus { background: #fef2f2; color: #ef4444; }

.ctx-action-menu .ctx-action-item-delete .fas { color: #ef4444; }

.ctx-action-menu .ctx-action-item-delete:hover .fas,.ctx-action-menu .ctx-action-item-delete:focus .fas { color: #ef4444; }

.ctx-action-menu .dropdown-divider { margin: 4px 0; border-top-color: #f1f5f9; }

/* Item kebab "Résilier" — palette orange (action destructive intermédiaire entre l'action neutre
   Créer un avenant et l'action ultra-destructive Supprimer en rouge). 2026-06-09. */
.ctx-action-menu .ctx-action-item-cancel { color: #c2410c; }
.ctx-action-menu .ctx-action-item-cancel:hover, .ctx-action-menu .ctx-action-item-cancel:focus { background: #fff7ed; color: #c2410c; }
.ctx-action-menu .ctx-action-item-cancel .fas { color: #c2410c; }
.ctx-action-menu .ctx-action-item-cancel:hover .fas, .ctx-action-menu .ctx-action-item-cancel:focus .fas { color: #c2410c; }

/* ════════════════════════════════════════════════════════════════════════
 * Bouton "Choisir un fichier" FineUploader (.qq-upload-button) — override
 * global de la couleur cyan vendor (#00ABC7) vers le teal DS, sans box-shadow
 * vendor. 2026-06-09. S'applique partout dans l'app (drawers, modales, etc.).
 * ════════════════════════════════════════════════════════════════════════ */
.qq-upload-button { background: var(--ctx-teal, #0d9488) !important; border: 1px solid var(--ctx-teal, #0d9488) !important; color: #fff !important; border-radius: var(--r-md, 6px)!important; box-shadow: none !important; font-weight: 500; transition: background 0.15s, border-color 0.15s; }
.qq-upload-button:hover, .qq-upload-button-hover { background: #0f766e !important; border-color: #0f766e !important; color: #fff !important; }
.qq-upload-button-focus { outline: 2px solid rgba(13,148,136,0.25) !important; outline-offset: 1px; }

/* ── Bouton expand ── */

/* Contour gris au repos retiré (raffinement UX fiche projet 2026-06-03). */
.ctx-expand-btn { flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: var(--r-md, 6px); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ctx-text-muted); font-size: 0.65rem; transition: background 0.15s, color 0.15s, border-color 0.15s; margin-left: 4px; }

.ctx-expand-btn:hover { background: var(--ctx-teal-light); color: var(--ctx-teal); border-color: var(--ctx-teal); }

.ctx-expand-btn i { transition: transform 0.22s ease; }

.ctx-section.ctx-expanded .ctx-expand-btn { background: var(--ctx-teal-light); color: var(--ctx-teal); border-color: var(--ctx-teal); }

.ctx-section.ctx-expanded .ctx-expand-btn i { transform: rotate(180deg); }

/* ── Bouton + (ajouter inline) ── */

/* Contour gris au repos retiré (raffinement UX fiche projet 2026-06-03). */
.ctx-add-btn { background: none; border: 1px solid transparent; color: var(--ctx-teal); min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--r-md, 6px); font-size: 0.68rem; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; overflow: hidden; }

.ctx-add-btn .ctx-add-label { max-width: 0; overflow: hidden; padding-left: 0; transition: max-width 0.2s ease, opacity 0.2s ease, padding-left 0.2s ease; opacity: 0; font-size: 0.72rem; font-weight: 500; }

.ctx-add-btn:hover .ctx-add-label,.ctx-add-btn.active .ctx-add-label { max-width: 60px; opacity: 1; padding-left: 4px; }

.ctx-add-btn:hover,.ctx-add-btn.active { background: var(--ctx-teal); color: #fff; border-color: var(--ctx-teal); }

.ctx-add-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── Panneau inline associer ── */

.ctx-add-panel { padding: 8px 12px; background: var(--ctx-teal-light); border-bottom: 1px solid #b2f0e8; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

.ctx-add-panel .flex-fill { min-width: 0; flex: 1; }

.ctx-add-panel .select2-container { width: 100% !important; }

.ctx-add-panel .select2-container--default .select2-selection--single { height: 27px; border: 1px solid #d1d5db; border-radius: var(--r-md, 6px); background: #fff; }

.ctx-add-panel .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 25px; font-size: 0.73rem; padding-left: 9px; padding-right: 22px; color: #374151; }

.ctx-add-panel .select2-container--default .select2-selection--single .select2-selection__arrow { height: 25px; }

/* ── Bouton assoc ── */

.ctx-btn-assoc { background: #fff !important; border: 1px solid var(--ctx-teal) !important; color: var(--ctx-teal) !important; border-radius: var(--r-md, 6px); font-size: 0.75rem; padding: 3px 12px; white-space: nowrap; line-height: 1.5; font-weight: 500; }

.ctx-btn-assoc:hover { background: var(--ctx-teal-hover) !important; }

.ctx-btn-delete { background: #fff; border: 1px solid #d1d5db; color: #4b5563; border-radius: var(--r-md, 6px); }

.ctx-btn-delete:hover { background: #f9fafb; }

/* ── Rangées membres / fournisseurs / projets ── */

.ctx-member-row { display: flex; align-items: center; padding: 0 14px 0 12px; gap: 8px; height: 38px; border-bottom: 1px solid #f3f4f6; transition: background 0.1s; }

.ctx-member-row:last-child { border-bottom: none; }

.ctx-member-row:hover { background: #f9fafb; }

.ctx-member-avatar { flex-shrink: 0; display: flex; align-items: center; }

.ctx-member-row .circled,.ctx-member-row .md-circled { width: 20px !important; height: 20px !important; min-width: 20px; font-size: 0.55rem !important; line-height: 20px !important; }

.ctx-member-row .circled img,.ctx-member-row .md-circled img { width: 20px !important; height: 20px !important; }

.ctx-avatar-placeholder, .ctx-avatar-group { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; flex-shrink: 0; }

.ctx-avatar-placeholder { border: 1px solid #FF5722; color: #FF5722; }

.ctx-avatar-group { background: var(--ctx-teal-light); color: var(--ctx-teal); }

.ctx-member-name { font-size: 0.79rem; font-weight: 400; color: var(--ctx-text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }a.ctx-member-name:hover { color: var(--ctx-teal); text-decoration: none; }

.ctx-member-cat { font-size: 0.72rem; color: var(--ctx-text-muted); white-space: nowrap; flex-shrink: 0; }
/* Icone de role (Signataire / Valideur) dans la liste des contributeurs - 2026-07-19 */
.ctx-member-role-icon { font-size: 0.74rem; color: var(--ctx-teal, #0d9488); margin-left: 8px; flex-shrink: 0; cursor: default; }

.ctx-member-actions { width: 20px; flex-shrink: 0; display: flex; justify-content: flex-end; }

.ctx-member-delete { visibility: hidden; color: #d1d5db; font-size: 0.78rem; flex-shrink: 0; text-decoration: none; padding: 2px 4px; }

.ctx-member-row:hover .ctx-member-delete { visibility: visible; }

.ctx-member-delete:hover { color: #ef4444; }

/* ── Contacts fournisseur ── */[id^="ctxCS"] { border-left: 2px solid #e9ecef; margin-left: 26px; }

.ctx-contact-row { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; height: 34px; border-bottom: 1px solid #f3f4f6; transition: background 0.1s; }

.ctx-contact-row:hover { background: #f9fafb; }

.ctx-contact-row:last-of-type { border-bottom: none; }

.ctx-contact-name { font-size: 0.8rem; font-weight: 500; color: var(--ctx-text-dark); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ctx-contact-cat { font-size: 0.75rem; color: var(--ctx-text-muted); flex-shrink: 0; }

.ctx-contact-actions { width: 20px; flex-shrink: 0; display: flex; justify-content: flex-end; }

.ctx-contact-actions .ctx-member-delete { visibility: hidden; }

.ctx-contact-row:hover .ctx-contact-actions .ctx-member-delete { visibility: visible; }

.ctx-contact-add-trigger { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.78rem; color: var(--ctx-teal); cursor: pointer; border-top: 1px solid #f3f4f6; transition: background 0.1s; user-select: none; }

.ctx-contact-add-trigger:hover { background: var(--ctx-teal-light); }

.ctx-contact-add-trigger i { font-size: 0.68rem; }

.ctx-contact-add-panel { overflow: hidden; max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; transition: max-height 0.18s ease, padding 0.18s ease; }

.ctx-contact-add-panel.open { max-height: 120px; padding-top: 8px !important; padding-bottom: 8px !important; overflow: visible; }

/* ── Fournisseurs ── */

.ctx-supplier-row { display: flex; align-items: center; padding: 0 14px 0 12px; gap: 8px; height: 38px; border-bottom: 1px solid #f3f4f6; transition: background 0.1s; }

.ctx-supplier-row:last-child { border-bottom: none; }

.ctx-supplier-row:hover { background: #f9fafb; }

.ctx-supplier-row:hover .btn-hover { display: inline-block !important; }

.ctx-supplier-row:hover .ctx-member-delete { visibility: visible; }

.ctx-supplier-toggle { cursor: pointer; color: #9ca3af; flex-shrink: 0; width: 16px; font-size: 0.8rem; }

.ctx-supplier-name { font-size: 0.79rem; font-weight: 400; color: var(--ctx-text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ctx-supplier-badge { display: inline-flex; align-items: center; border: none; border-radius: var(--r-sm, 3px); font-size: 0.68rem; font-weight: 400; padding: 2px 7px; line-height: 1.4; white-space: nowrap; flex-shrink: 0; background: #f1f3f5; color: #8fa1b3; transition: color 0.15s ease, background 0.15s ease; }

.ctx-supplier-row:hover .ctx-supplier-badge { background: #e8edf2; color: var(--badge-color); }

.ctx-open-action { color: #d1d5db; opacity: 0; pointer-events: none; font-size: 0.78rem; flex-shrink: 0; text-decoration: none; padding: 4px 6px; position: relative; z-index: 2; transition: opacity 0.1s; }

.ctx-supplier-row:hover .ctx-open-action,.ctx-contact-row:hover .ctx-open-action { opacity: 1; pointer-events: auto; }

.ctx-open-action:hover { color: var(--ctx-teal) !important; }

.ctx-supplier-actions { min-width: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* ── Rangées projets liés ── */

.ctx-project-row { display: flex; align-items: center; padding: 0 14px 0 12px; gap: 8px; height: 38px; border-bottom: 1px solid #f3f4f6; transition: background 0.1s; }

.ctx-project-row:last-child { border-bottom: none; }

.ctx-project-row:hover { background: #f9fafb; }

.ctx-project-row .circled,.ctx-project-row .md-circled { width: 20px !important; height: 20px !important; min-width: 20px; font-size: 0.55rem !important; line-height: 20px !important; }

.ctx-project-row .circled img,.ctx-project-row .md-circled img { width: 20px !important; height: 20px !important; }

.ctx-project-name { font-size: 0.79rem; font-weight: 400; color: var(--ctx-text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }a.ctx-project-name:hover { color: var(--ctx-teal); text-decoration: none; }

.ctx-project-date { font-size: 0.72rem; color: var(--ctx-text-muted); flex-shrink: 0; white-space: nowrap; }

/* ── Label sous-section ── */

/* Sous-titres "Contributeurs / Groupes / Projet parent / Projets enfants" passés
   en lowercase + non-bold (raffinement UX fiche projet 2026-06-03) — cohérent avec
   l'épuration globale de la page (cf. labels meta-row). La couleur muet maintient
   la hiérarchie visuelle sans crier. */
.ctx-subsection-label { padding: 6px 16px 2px 16px; margin-bottom: 0; font-size: 0.7rem; font-weight: 300; color: #8fa1b3; text-transform: none; letter-spacing: 0; }

/* ── Empty state ── */

.ctx-empty-state { display: flex; flex-direction: column; align-items: center; padding: 22px 16px 18px; text-align: center; gap: 5px; }

.ctx-empty-state-icon { font-size: 1.5rem; color: #d1dce8; margin-bottom: 4px; line-height: 1; }

.ctx-empty-state-title { font-size: 0.79rem; font-weight: 500; color: var(--ctx-text-muted); line-height: 1.4; }

.ctx-empty-state-hint { font-size: 0.72rem; color: #adbdcc; line-height: 1.5; max-width: 215px; }

/* CTA compact optionnel sous le hint (ex. card Identite : « Renseigner l'identite »). */
.ctx-empty-state-cta { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 500; color: #0d9488; text-decoration: none; padding: 5px 12px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #fff; transition: background 0.15s, color 0.15s; }
.ctx-empty-state-cta:hover, .ctx-empty-state-cta:focus { background: #0d9488; color: #fff; text-decoration: none; }
.ctx-empty-state-cta:focus { outline: none; box-shadow: none; }
.ctx-empty-state-cta i { font-size: 0.78rem; }
/* Variante large du hint (ex. card Identite : sous-texte plus long, moins de retours a la ligne). */
.ctx-es-wide .ctx-empty-state-hint { max-width: 360px; }

/* ─── 5. Onglet Finance (tab) ─────────────────────────────────────────────── */

#project-costs-content { background: var(--fin-bg); }

.fin-inner { max-width: 100%; margin: 0; padding: 16px 0 0; }

#project-costs-content .margined { margin-right: 0 !important; margin-left: 0 !important; max-width: 100% !important; }

/* ── Cards ── */

/* Onglet Finance + page /costs — cards : style épuré (raffinement UX 2026-06-04).
   Border transparente + no shadow. Cohérent avec .ctx-info-card / .res-card. */
.fin-card { background: #fff; border: 1px solid transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; border-radius: var(--r-lg, 10px); margin-bottom: 16px; }

/* Trait sous titre éclairci + min-height pour alignement entre cards. */
.fin-card-header { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0; flex-wrap: wrap; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.fin-card-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }

.fin-card-body { padding: 12px 20px 16px; }

/* Footer de card : trait top retiré (raffinement UX 2026-06-04). */
.fin-card-footer { padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; }

.fin-icon-box { display: flex; align-items: center; justify-content: center; color: var(--fin-teal); font-size: 0.88rem; flex-shrink: 0; width: 18px; }

.fin-card-title { font-size: 0.80rem; font-weight: 500; color: var(--fin-text-dark); letter-spacing: normal; }

.fin-card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }

/* ── Empty state ── */

.fin-empty-state { display: flex; flex-direction: column; align-items: center; padding: 22px 16px 20px; text-align: center; gap: 5px; }

.fin-empty-state-icon { font-size: 1.5rem; color: #d1dce8; margin-bottom: 4px; line-height: 1; }

.fin-empty-state-title { font-size: 0.79rem; font-weight: 500; color: #8fa1b3; line-height: 1.4; }

.fin-empty-state-hint { font-size: 0.72rem; color: #adbdcc; line-height: 1.5; max-width: 240px; }

/* ── Boutons ── */

.fin-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 500; line-height: 1.5; padding: 3px 12px; border-radius: var(--r-md, 6px); border: 1px solid; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s; position: relative; }

.fin-btn:hover { text-decoration: none; }

.fin-btn-teal   { background: #fff; border-color: var(--fin-teal); color: var(--fin-teal); }

.fin-btn-teal:hover { background: var(--fin-teal-hover); color: var(--fin-teal); }

.fin-btn-solid  { background: var(--fin-teal); border-color: var(--fin-teal); color: #fff !important; }

.fin-btn-solid:hover { background: #0f766e; border-color: #0f766e; color: #fff !important; }

.fin-btn-grey   { background: #fff; border-color: #d1d5db; color: var(--fin-text-mid); }

.fin-btn-grey:hover { background: #f9fafb; color: var(--fin-text-mid); }

/* Override ciblé sur les boutons épurés de l'onglet Actions projet (raffinement UX
   2026-06-04) : Appliquer un modèle + Zoom +/- + Aujourd'hui (Gantt). Aligné
   exactement sur .fin-filter-btn (contour transparent, fond #f8fafc au repos,
   hover #e8edf2, texte muted, weight 500). */
.fin-btn.fin-btn-grey.sm-apply-toggle,
#gantt-zoom-in.fin-btn.fin-btn-grey,
#gantt-zoom-out.fin-btn.fin-btn-grey,
#gantt-today-button.fin-btn.fin-btn-grey {
    border-color: transparent;
    background: #f8fafc;
    color: var(--fin-text-muted);
    font-weight: 500;
}
.fin-btn.fin-btn-grey.sm-apply-toggle:hover,
#gantt-zoom-in.fin-btn.fin-btn-grey:hover,
#gantt-zoom-out.fin-btn.fin-btn-grey:hover,
#gantt-today-button.fin-btn.fin-btn-grey:hover {
    background: #e8edf2;
    color: var(--fin-text-mid);
}

.fin-btn-danger { background: #fff; border-color: #ef4444; color: #ef4444; }

.fin-btn-danger:hover { background: #fef2f2; color: #ef4444; }

.fin-btn-footer { font-size: 0.75rem; padding: 3px 10px; }

.fin-btn-footer.fin-btn-grey:hover { border-color: var(--fin-teal) !important; color: var(--fin-teal) !important; background: var(--fin-teal-hover) !important; }

/* Tooltip sur .fin-btn */

.fin-btn[data-tooltip]::after {    content: attr(data-tooltip); position: absolute;    top: calc(100% + 10px); left: 50%; transform: translateX(-50%);    background: #1f2937; color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.5;    padding: 5px 10px; border-radius: var(--r-md, 6px); white-space: nowrap;    box-shadow: 0 4px 14px rgba(0,0,0,0.18);    opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 1000;}

.fin-btn[data-tooltip]::before {    content: ''; position: absolute;    top: calc(100% + 4px); left: 50%; transform: translateX(-50%);    border: 5px solid transparent; border-bottom-color: #1f2937;    opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 1000;}

.fin-btn[data-tooltip]:hover::after,.fin-btn[data-tooltip]:hover::before { opacity: 1; }

/* ── Badge statut ── */

/* Status pills Finance : border-radius DS 2px (raffinement UX 2026-06-04). */
.fin-status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-sm, 3px); border: 1px solid transparent; padding: 3px 10px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; margin-left: 6px; }

.fin-status-pill i { font-size: 0.65rem; }

.fin-badge-orange    { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }

.fin-badge-amber     { color: #92400e; background: #fffbeb; border-color: #fde68a; }

.fin-badge-yellow    { color: #b45309; background: #fef3c7; border-color: #fde68a; }

.fin-badge-green     { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

.fin-badge-darkgreen { color: #14532d; background: #dcfce7; border-color: #86efac; }

/* ── Alerte ── */

.fin-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--r-lg, 10px); padding: 10px 14px; font-size: 0.82rem; margin-bottom: 14px; }

.fin-alert i { flex-shrink: 0; margin-top: 2px; }

.fin-alert-danger  { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

.fin-alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

.fin-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

/* ── KPI métriques ── */

.fin-kpi-grid { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 20px 14px; }

/* Tuiles KPI : border retirée (raffinement UX 2026-06-04, cohérence avec
   l'épuration globale). Fond #f8fafb conservé pour différencier les 4 tuiles.
   Tuile "final" garde son fond teal-light (signal couleur) sans contour. */
.fin-kpi-item { flex: 1; min-width: 130px; background: #f8fafb; border: 1px solid transparent; border-radius: var(--r-lg, 10px); padding: 10px 14px; text-align: center; }

.fin-kpi-item.fin-kpi-final { background: var(--fin-teal-light); border-color: transparent; }

.fin-kpi-item.fin-kpi-dash { opacity: 0.55; }

.fin-kpi-label { font-size: 0.68rem; color: var(--fin-text-muted); font-weight: 400; margin-bottom: 6px; }

.fin-kpi-value { font-size: 1.05rem; font-weight: 600; color: var(--fin-text-dark); line-height: 1.2; }

.fin-kpi-item.fin-kpi-final .fin-kpi-value { color: var(--fin-teal); }

/* ── Performance (tab) ── */

.fin-card--perf-tab { border-left: 2px solid var(--fin-teal) !important; }

.fin-card--perf-tab > .fin-card-header { background: var(--fin-teal-light); }
.fin-card--perf-tab > .fin-card-header::after { background: var(--fin-teal-light); }

.fin-perf-grid { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 20px 14px; }

/* Tuiles Performance (Gains/Pertes + Coûts évités) : fond + border transparents
   (raffinement UX 2026-06-04, cohérent avec .pc-perf-hero-kpis sur /costs). */
.fin-perf-item { flex: 1; min-width: 180px; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--r-lg, 10px); padding: 10px 16px; text-align: center; }
.fin-perf-grid { background: transparent !important; border: none !important; }

.fin-perf-label { font-size: 0.68rem; color: var(--fin-text-muted); font-weight: 400; margin-bottom: 8px; }

.fin-perf-value { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }

.fin-perf-value.fin-gain  { color: #16a34a; }

.fin-perf-value.fin-loss  { color: #ef4444; }

.fin-perf-value.fin-avoid { color: #16a34a; }

.fin-perf-pct { font-size: 0.8rem; color: var(--fin-text-muted); margin-left: 8px; font-weight: 500; }

/* ── Durée contrat ── */

.fin-contract-row { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid #e2e8f0; font-size: 0.82rem; color: var(--fin-text-mid); }

.fin-contract-row strong { color: var(--fin-text-dark); }

.fin-contract-row i { color: var(--fin-teal); }

/* Durée du contrat affichée dans le footer de la card (raffinement UX 2026-06-04,
   placée à gauche du bouton "Publier"). */
.fin-footer-duration { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--fin-text-mid); }
.fin-footer-duration strong { color: var(--fin-text-dark); }
.fin-footer-duration i { color: var(--fin-teal); }

/* ── Bouton négo terminée + tooltip ── */

.fin-nego-btn { position: relative; font-size: 0.75rem; color: #6b7280; text-decoration: none; transition: color 0.15s; }

.fin-nego-btn:hover { color: #ef4444; font-weight: 600; text-decoration: none; }

.fin-nego-btn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); right: 0; background: #1f2937; color: #fff; font-size: 0.76rem; font-weight: 400; line-height: 1.5; padding: 7px 12px; border-radius: var(--r-md, 6px); width: 230px; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 1000; }

.fin-nego-btn::before { content: ''; position: absolute; bottom: calc(100% + 4px); right: 18px; border: 6px solid transparent; border-top-color: #1f2937; opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 1000; }

.fin-nego-btn:hover::after,.fin-nego-btn:hover::before { opacity: 1; }

/* ── Validators ── */

.fin-validators-title { font-size: 0.67rem; font-weight: 700; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }

/* Trait entre valideurs retiré (raffinement UX 2026-06-04). */
.fin-validator-row { display: flex; align-items: stretch; gap: 16px; padding: 10px 0; }

.fin-validator-type { width: 200px; flex-shrink: 0; font-size: 0.80rem; font-weight: 600; color: var(--fin-text-mid); line-height: 1.4; }

.fin-validator-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }

.fin-validator-cat { font-size: 0.72rem; color: #9ca3af; font-style: italic; font-weight: 400; }

.fin-validator-name { font-size: 0.82rem; font-weight: 400; color: #4b5563; }

.fin-validator-delete-wrap { width: 20px; flex-shrink: 0; display: flex; justify-content: flex-end; }

.fin-validator-row .btnDelete { visibility: hidden; color: #d1d5db !important; font-size: 0.82rem; text-decoration: none !important; }

.fin-validator-row:hover .btnDelete { visibility: visible; }

.fin-validator-row .btnDelete:hover { color: #ef4444 !important; }

.fin-add-panel { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

.fin-add-panel .bootstrap-select { width: 220px !important; flex-shrink: 0; }

.fin-add-panel .bootstrap-select > .btn.dropdown-toggle { font-size: 0.80rem; border: 1px solid #d1d5db !important; border-radius: var(--r-md, 6px)!important; background: #fff !important; color: var(--fin-text-mid) !important; box-shadow: none !important; }

.fin-add-panel .bootstrap-select.show > .btn.dropdown-toggle { border-color: var(--fin-teal) !important; }

/* ── Historique demandes ── */

.fin-req-list { padding: 0 20px 10px; }

.fin-req-title { font-size: 0.67rem; font-weight: 700; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.08em; margin: 14px 0 8px; }

.fin-req-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-size: 0.80rem; }

.fin-req-row:last-child { border-bottom: none; }

.fin-req-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: #d1d5db; }

.fin-req-dot.ok { background: #16a34a; }

.fin-req-dot.ko { background: #ef4444; }

.fin-req-body { flex: 1; min-width: 0; color: var(--fin-text-mid); }

.fin-req-meta { font-size: 0.73rem; color: var(--fin-text-muted); margin-top: 2px; }

.fin-req-comment { font-size: 0.75rem; color: var(--fin-text-muted); font-style: italic; margin-top: 3px; }

.fin-req-actions { flex-shrink: 0; }

/* ── Hint box ambre ── */

.fin-hint { position: relative; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-lg, 10px); padding: 12px 16px; font-size: 0.82rem; color: #92400e; margin-bottom: 16px; }

.fin-hint p { margin-bottom: 6px; }

.fin-hint p:last-of-type { margin-bottom: 0; }

.fin-hint .hint-actions { background: rgba(255,251,235,0.85); }

.fin-hint .hint-dismiss-forever { color: #b45309; }

.fin-hint .hint-actions .close { color: #b45309; border-color: rgba(180,83,9,0.35); }

/* ── Notice mobile ── */

.fin-mobile-notice { display: flex; align-items: center; gap: 10px; background: #fff; border: var(--fin-border); border-radius: var(--r-lg, 10px); padding: 12px 16px; font-size: 0.82rem; color: var(--fin-text-mid); margin-top: 4px; }

/* ── Scrollbar Finance tab ── */

#project-costs-content .container-scrollable::-webkit-scrollbar { width: 6px; background: transparent !important; }

#project-costs-content .container-scrollable::-webkit-scrollbar-track { background: transparent !important; border: none !important; }

#project-costs-content .container-scrollable::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; transition: background 0.25s; }

#project-costs-content .container-scrollable.ctx-scrolling::-webkit-scrollbar-thumb,#project-costs-content .container-scrollable.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0 !important; }

#project-costs-content .container-scrollable { scrollbar-width: thin; scrollbar-color: transparent transparent; }

#project-costs-content .container-scrollable.ctx-scrolling,#project-costs-content .container-scrollable.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

/* ── Switcher vue Liste/Gantt ── */

.view-sw-btn { transition: background 0.15s, color 0.15s; }

.view-sw-btn:hover { background: #c4cdd8 !important; color: #1e293b !important; text-decoration: none; }

/* ─── 6. Onglet Actions — Liste ───────────────────────────────────────────── */

/* Onglet Actions projet — cadre liste : style épuré (raffinement UX 2026-06-04).
   Border transparent + no shadow, cohérent avec .ctx-info-card / .res-card. */
.tasks-fin-card { background: #fff; border: 1px solid transparent; border-radius: var(--r-lg, 10px); }

.tasks-outer-wrapper { padding: 8px 40px 20px 40px !important; overflow-x: hidden; background: #fff; }
.tasks-fin-card { scrollbar-gutter: stable; }

/* Empêche la scrollbar globale du body quand on est dans le module Projets :
   le layout est multi-panneaux, fait pour tenir en 1 écran. Le card .tasks-fin-card
   gère son propre scroll vertical. Classe activée par index.html.twig (cf. JS). */
body.mbw-prj-module { overflow-y: hidden !important; }

/* ── Empty state ── */

.tasks-empty-state { display: flex; flex-direction: column; align-items: center; padding: 32px 16px 28px; text-align: center; gap: 6px; }

.tasks-empty-state-icon { font-size: 1.5rem; color: #d1dce8; margin-bottom: 4px; line-height: 1; }

.tasks-empty-state-title { font-size: 0.79rem; font-weight: 500; color: #8fa1b3; line-height: 1.4; }

.tasks-empty-state-hint { font-size: 0.72rem; color: #adbdcc; line-height: 1.5; max-width: 260px; }

/* ── Hint ── */

.tasks-fin-hint { position: relative; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-lg, 10px); padding: 12px 16px; font-size: 0.82rem; color: #92400e; margin-top: 12px; margin-bottom: 8px; }

.item-infos .tasks-fin-hint { margin-top: 12px; }

.tasks-fin-hint p { margin-bottom: 6px; }

.tasks-fin-hint p:last-of-type { margin-bottom: 0; }

.tasks-fin-hint .hint-actions { background: rgba(255,251,235,0.85); }

.tasks-fin-hint .hint-dismiss-forever { color: #b45309; }

.tasks-fin-hint .hint-actions .close { color: #b45309; border-color: rgba(180,83,9,0.35); }

/* ── Filtres ── */

/* Segmented control générique (switcher de vue) — pattern réutilisable.
   Track gris clair, segment actif = carte blanche soulevée (ombre + teal). */
/* View-switch allégé + hauteur égalisée sur .fin-btn + border-radius DS 2px
   (raffinement UX 2026-06-04). Hauteur 28px = .fin-btn rendu effectivement (padding
   3px + line-height 1.5 × 0.75rem + 1px border × 2 = ~26-28px selon le rendu) +
   marge pour ne plus paraître écrasé. */
.view-switch { display: inline-flex; align-items: center; align-self: center; padding: 0 2px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); gap: 2px; height: 28px; box-sizing: border-box; }
.view-switch-item { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; font-size: 0.75rem; font-weight: 500; color: #8fa1b3; background: transparent; border-radius: var(--r-md, 6px); text-decoration: none !important; cursor: pointer; transition: background 0.12s, color 0.12s, box-shadow 0.12s; white-space: nowrap; }
.view-switch-item i { font-size: 0.7rem; }
.view-switch-item:hover { color: var(--fin-text-mid); }
.view-switch-item.active { background: #fff; color: var(--fin-teal) !important; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04); cursor: default; }
.view-switch-item.active:hover { color: var(--fin-teal) !important; }
.view-switch-item.locked { color: #8fa1b3; cursor: not-allowed; opacity: 0.65; }

/* Boutons filtres ("Terminées" / "Jalons") : contour transparent + léger fond teinté
   au repos (raffinement UX 2026-06-04). Hover #e8edf2 + état `.filter-on` (teal-light
   + border teal) conservés. */
.fin-filter-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 500; line-height: 1.5; padding: 3px 12px; border-radius: var(--r-md, 6px); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s; color: var(--fin-text-muted) !important; background: #f8fafc; user-select: none; align-self: center; }

.fin-filter-btn:hover { background: #e8edf2; color: var(--fin-text-mid) !important; text-decoration: none; }

.fin-filter-btn.filter-on { background: var(--fin-teal-light); border-color: var(--fin-teal); color: var(--fin-teal) !important; }

.fin-filter-btn.filter-on:hover { background: var(--fin-teal-hover); border-color: var(--fin-teal); color: var(--fin-teal) !important; }

/* ── En-têtes triables ── */

.sortable-col { cursor: pointer; user-select: none; }

.sortable-col:hover { color: #343a40; }

.sort-icon { font-size: 0.72rem; opacity: 0.28; margin-left: 4px; vertical-align: middle; transition: opacity 0.15s, color 0.15s; }

.sortable-col:hover .sort-icon { opacity: 0.65; color: #343a40; }

.sortable-col.sort-active .sort-icon { opacity: 1; color: var(--fin-teal); }

/* ── Layout tableau ── */

.tasks-list-header,.tasks-list-row { display: flex; align-items: center; width: 100%; }

.tasks-list-header { min-height: 32px; border-bottom: 1px solid rgba(45,62,80,0.35); font-size: 0.72rem; color: var(--fin-text-muted); font-weight: 500; padding: 0; position: sticky; top: 0; z-index: 5; background-color: #fff; border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0; }

.tasks-list-row { min-height: 48px; border-bottom: 1px solid #f3f4f6; border-left: 3px solid transparent; background: #fff; transition: background 0.12s ease; cursor: pointer; font-size: 0.78rem; color: var(--fin-text-mid); }

.tasks-list-row:hover { background: var(--fin-teal-hover); }

.tasks-list-header,.tasks-list-row { padding-left: 12px; padding-right: 12px; }

/* Colonnes */

.task-col-statut    { width: 34px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }

.task-col-type      { width: 36px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }

.task-col-titre     { flex: 1; min-width: 0; padding: 0 12px; display: flex; align-items: center; gap: 6px; }

.task-col-titre .task-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Input éditable du libellé d'action et de jalon (édition inline) : même look que
   les colonnes Date d'échéance et Priorité (encadré gris au hover, halo teal au focus). */
.task-col-titre input.task-name-input,.task-col-titre input.milestone-name-input { flex: 1; min-width: 0; height: 28px; border: 1px solid transparent; border-radius: var(--r-md, 6px); background: transparent; padding: 4px 6px; font-size: 0.78rem; color: var(--fin-text-dark); line-height: 1.2; transition: border-color 0.15s, background-color 0.15s; }
.task-col-titre input.task-name-input:hover,.task-col-titre input.milestone-name-input:hover { border-color: #9ca3af; background-color: #f3f4f6; cursor: text; }
.task-col-titre input.task-name-input:focus,.task-col-titre input.milestone-name-input:focus { outline: none; border-color: var(--fin-teal) !important; background-color: #fff !important; box-shadow: 0 0 0 2px rgba(20,184,166,0.10); }

/* Icône œil "Ouvrir la fiche" à la fin de l'intitulé, visible uniquement au survol de la ligne. */
.task-col-titre .task-row-open-eye { flex-shrink: 0; margin-left: 4px; color: var(--fin-text-muted); font-size: 0.85rem; opacity: 0; cursor: pointer; transition: opacity 0.15s, color 0.15s; }
.ds-row:hover .task-row-open-eye { opacity: 1; }
.task-col-titre .task-row-open-eye:hover { color: var(--fin-teal); }

.task-col-porteur   { width: 150px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }

.task-col-porteur .porteur-name { font-size: 0.75rem; color: var(--fin-text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bootstrap-Select porteur (édition inline) — même apparence "encadré gris au hover" que Date et Priorité. */
.task-col-porteur .bootstrap-select { width: 100% !important; margin: 0 !important; height: auto !important; background-color: transparent !important; align-self: center !important; display: block !important; }
.task-col-porteur .bootstrap-select > select { display: none !important; }
.task-col-porteur .bootstrap-select > .btn { border: 1px solid transparent !important; border-radius: var(--r-md, 6px)!important; background: transparent !important; box-shadow: none !important; padding: 4px 22px 4px 8px !important; margin: 0 !important; font-size: 0.75rem !important; width: 100% !important; line-height: 1.2; height: 28px !important; max-height: 28px !important; cursor: pointer !important; display: flex !important; align-items: center !important; transition: border-color 0.15s, background-color 0.15s; overflow: visible !important; position: relative !important; }
.task-col-porteur .bootstrap-select > .btn:hover { border-color: #9ca3af !important; background-color: #f3f4f6 !important; box-shadow: none !important; }
.task-col-porteur .bootstrap-select > .btn::after { position: absolute !important; right: 7px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; border-top-color: #9ca3af !important; opacity: 0 !important; transition: opacity 0.15s; }
.task-col-porteur .bootstrap-select > .btn:hover::after { opacity: 1 !important; }
.task-col-porteur .bootstrap-select > .btn .bs-caret { display: none !important; }
.task-col-porteur .bootstrap-select .filter-option { overflow: visible; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; height: 100% !important; flex: 1 !important; }
.task-col-porteur .bootstrap-select .filter-option-inner { margin: 0 !important; padding: 0 !important; width: 100%; height: 100% !important; display: flex !important; align-items: center !important; }
.task-col-porteur .bootstrap-select .filter-option-inner-inner { overflow: visible !important; white-space: nowrap; display: flex !important; align-items: center !important; gap: 5px; font-size: 0.75rem; color: var(--fin-text-mid); }

.task-col-progress  { width: 110px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; margin-right: 8px; gap: 3px; }

.task-col-echeance  { width: 118px; flex-shrink: 0; display: flex; align-items: center; }

.task-col-checklist { width: 90px;  flex-shrink: 0; text-align: center; padding: 0 8px; }

.task-col-priorite  { width: 120px; flex-shrink: 0; display: flex; align-items: center; padding: 0 8px; }

.task-col-actions   { width: 40px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }

/* ── Jalons ── */

.task-col-type .milestone-flag-badge { font-size: 13px; color: var(--fin-teal); line-height: 1; display: flex; align-items: center; justify-content: center; position: static; }

.milestone-task-row { border-left: 3px solid var(--fin-teal); }

/* ── Checkboxes ── */

.task-col-statut input[type="hidden"] { display: none; }

.task-col-statut .task-cb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #adb5bd; border-radius: 50%; cursor: pointer; display: inline-block; position: relative; transition: background 0.15s, border-color 0.15s; margin: 0 !important; flex-shrink: 0; vertical-align: middle; outline: none !important; }

.task-col-statut .task-cb:focus,.task-col-statut .task-cb:focus-visible,.task-col-statut .task-cb:active { outline: none !important; box-shadow: none !important; border-style: solid !important; }

.task-col-statut .task-cb::-moz-focus-inner { border: 0 !important; outline: 0 !important; }

.task-col-statut .task-cb:checked { background-color: var(--fin-teal); border-color: var(--fin-teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; }

.task-col-statut .fake-checkbox { width: 20px; height: 20px; border: 2px solid #ced4da; border-radius: 50%; display: inline-block; cursor: default; flex-shrink: 0; }

.task-done-circle { width: 20px; height: 20px; background: var(--fin-teal); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; flex-shrink: 0; }

/* ── Priorité ── */

.priority-square { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-sm, 3px); flex-shrink: 0; }

.task-col-priorite .bootstrap-select { width: 100% !important; margin: 0 !important; height: auto !important; background-color: transparent !important; align-self: center !important; display: block !important; }

.task-col-priorite .bootstrap-select > select { display: none !important; }

.task-col-priorite .bootstrap-select > .btn { border: 1px solid transparent !important; border-radius: var(--r-md, 6px)!important; background: transparent !important; box-shadow: none !important; padding: 4px 22px 4px 14px !important; margin: 0 !important; font-size: inherit; width: 100% !important; line-height: 1.2; height: 28px !important; max-height: 28px !important; cursor: pointer !important; display: flex !important; align-items: center !important; transition: border-color 0.15s, background-color 0.15s; overflow: visible !important; position: relative !important; }

.task-col-priorite .bootstrap-select > .btn:hover { border-color: #9ca3af !important; background-color: #edf0f2 !important; box-shadow: none !important; }

.task-col-priorite .bootstrap-select > .btn::after { position: absolute !important; right: 7px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; border-top-color: #9ca3af !important; opacity: 0 !important; transition: opacity 0.15s; }

.task-col-priorite .bootstrap-select > .btn:hover::after { opacity: 1 !important; }

.task-col-priorite .bootstrap-select > .btn .bs-caret { display: none !important; }

.task-col-priorite .bootstrap-select .filter-option { overflow: visible; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 0 0 8px !important; height: 100% !important; flex: 1 !important; }

.task-col-priorite .bootstrap-select .filter-option-inner { margin: 0 !important; padding: 0 !important; width: 100%; height: 100% !important; display: flex !important; align-items: center !important; }

.task-col-priorite .bootstrap-select .filter-option-inner-inner { overflow: visible !important; white-space: nowrap; display: flex !important; align-items: center !important; gap: 5px; }

.task-col-priorite .bootstrap-select .dropdown-menu li a span.text { overflow: visible !important; white-space: nowrap; }

.task-col-priorite > .priority-square { margin-left: 8px; }

/* ── Échéance ── */

/* Padding + bordure transparente toujours appliqués pour que TOUS les états de la
   cellule Échéance (action open/closed/display, jalon open/closed) aient le MÊME
   espacement entre l'icône calendrier et la date. Le hover/focus visible n'est
   activé que pour la variante éditable (datetime-picker non readonly). */
.task-col-echeance span { gap: 6px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--r-md, 6px); transition: border-color 0.15s, background-color 0.15s; }

.task-col-echeance span:has(.datetime-picker:not([readonly])):hover { border-color: #9ca3af; background-color: #f3f4f6; cursor: text; }

.task-col-echeance span:has(.datetime-picker:not([readonly])):focus-within { border-color: var(--fin-teal) !important; background-color: #fff !important; box-shadow: 0 0 0 2px rgba(20,184,166,0.10); }

.task-col-echeance .datetime-picker:not([readonly]):hover { cursor: text; }

.task-date-late { border: 1.5px solid #ef4444; color: #ef4444 !important; border-radius: var(--r-sm, 3px); padding: 1px 6px; }

.task-col-echeance .datetime-picker,.task-col-echeance .milestone-date-input { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; width: 90px; height: auto !important; font-size: inherit; line-height: inherit !important; color: inherit !important; padding: 0 !important; margin: 0 !important; }

.task-col-echeance .form-control.datetime-picker,.task-col-echeance .form-control.milestone-date-input { height: auto; padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; color: inherit !important; }

/* Règle ci-dessus rendue inutile par le padding uniforme sur .task-col-echeance span. Laissée en commentaire pour traçabilité. */

/* ── Barre de progression ── */

.task-progress-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; outline: none; cursor: pointer; background: linear-gradient(to right, #0d9488 var(--pct, 0%), #e2e8f0 var(--pct, 0%)); }

.task-progress-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #0d9488; cursor: pointer; transition: transform 0.1s; }

.task-progress-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }

.task-progress-slider::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #0d9488; border: none; cursor: pointer; }

.task-progress-pct { font-size: 0.63rem; color: var(--fin-text-muted); line-height: 1; }

.task-progress-bar-wrap { width: 100%; height: 3px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }

.task-progress-bar-fill { height: 100%; background: #0d9488; border-radius: 2px; }

/* ── Bouton supprimer / access badge / checklist ── */

.task-del-btn { display: none; color: var(--fin-text-muted); font-size: 0.85rem; line-height: 1; }

.ds-row:hover .task-del-btn,
.task-item:hover .task-del-btn { display: flex; }

.task-del-btn:hover { color: #ef4444; }

.task-access-badge { font-size: 0.68rem; font-weight: 600; border: 1px solid #fde68a; color: #92400e; background: #fffbeb; padding: 1px 7px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }

.task-checklist-done { color: var(--fin-teal); }

/* ── Scrollbar Actions card ── */

.tasks-fin-card::-webkit-scrollbar { width: 3px; background: transparent !important; }

.tasks-fin-card::-webkit-scrollbar-track { background: transparent !important; border: none !important; }

.tasks-fin-card::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; transition: background 0.25s; }

.tasks-fin-card.tasks-scrolling::-webkit-scrollbar-thumb,.tasks-fin-card.tasks-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0 !important; }

.tasks-fin-card { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.tasks-fin-card.tasks-scrolling,.tasks-fin-card.tasks-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

/* ─── 6b. Onglet Actions — Gantt ──────────────────────────────────────────── */

.gantt-elastic__chart-scroll-container--horizontal::-webkit-scrollbar,.gantt-elastic__chart-scroll-container--vertical::-webkit-scrollbar { width: 4px; height: 4px; background: transparent; }

.gantt-elastic__chart-scroll-container--horizontal::-webkit-scrollbar-track,.gantt-elastic__chart-scroll-container--vertical::-webkit-scrollbar-track { background: transparent; border: none; }

.gantt-elastic__chart-scroll-container--horizontal::-webkit-scrollbar-thumb,.gantt-elastic__chart-scroll-container--vertical::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }

.gantt-elastic__chart-scroll-container--horizontal.ctx-scrolling::-webkit-scrollbar-thumb,.gantt-elastic__chart-scroll-container--vertical.ctx-scrolling::-webkit-scrollbar-thumb,.gantt-elastic__chart-scroll-container--horizontal.ctx-scrollbar-hover::-webkit-scrollbar-thumb,.gantt-elastic__chart-scroll-container--vertical.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

.gantt-elastic__chart-scroll-container--horizontal::-webkit-scrollbar-thumb:hover,.gantt-elastic__chart-scroll-container--vertical::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

.gantt-elastic__chart-scroll-container--horizontal,.gantt-elastic__chart-scroll-container--vertical { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.gantt-elastic__chart-scroll-container--horizontal.ctx-scrolling,.gantt-elastic__chart-scroll-container--vertical.ctx-scrolling,.gantt-elastic__chart-scroll-container--horizontal.ctx-scrollbar-hover,.gantt-elastic__chart-scroll-container--vertical.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

#app g[task^="P_"] svg.gantt-elastic__chart-row-bar { clip-path: inset(25% 0); }

#gantt-user-filter option { font-size: 0.72rem; }

#gantt-help-button {    position: absolute; bottom: 20px; right: 56px; z-index: 100;    width: 32px; height: 32px; border-radius: 50%;    background: #fff; border: 1px solid #e2e8f0;    box-shadow: 0 2px 6px rgba(0,0,0,0.12);    display: flex; align-items: center; justify-content: center;    color: #8fa1b3; font-size: 0.85rem;    cursor: pointer; transition: box-shadow 0.15s, color 0.15s;    text-decoration: none;}

#gantt-help-button:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.18); color: #2D3E50; }

/* ─── 7. Onglet Résultats ─────────────────────────────────────────────────── */

.res-left-col  { background: #fff; display: flex; flex-direction: column; overflow: hidden; flex: 0 0 60% !important; max-width: 60% !important; }

.res-right-col { background: #fff; display: flex; flex-direction: column; overflow: hidden; flex: 0 0 40% !important; max-width: 40% !important; }

/* 2026-09-28 : compte sans module Contrats - la colonne Contrats n'est pas rendue, la colonne Benefices
   qualitatifs est seule (classe res-col-single) : pleine largeur et marge gauche de la colonne de gauche (40px). */
.res-right-col.res-col-single { flex: 0 0 100% !important; max-width: 100% !important; }
.res-right-col.res-col-single .res-col-scrollable > div { padding-left: 40px; }

.res-col-top-strip { flex: 0 0 16px; background: #fff; }

.res-left-col  .res-col-scrollable,.res-right-col .res-col-scrollable { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%; }

/* Scrollbars */

.res-col-scrollable::-webkit-scrollbar { width: 3px; background: transparent !important; }

.res-col-scrollable::-webkit-scrollbar-track { background: transparent !important; border: none !important; }

.res-col-scrollable::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; transition: background 0.25s; }

.res-col-scrollable.res-scrolling::-webkit-scrollbar-thumb,.res-col-scrollable.res-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0 !important; }

.res-col-scrollable { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.res-col-scrollable.res-scrolling,.res-col-scrollable.res-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

/* ── Carte commune ── */

/* Onglet Résultats — fiche projet : style épuré aligné DS (raffinement 2026-06-03).
   Border transparente (préserve le layout 1px), box-shadow retirée. Cohérent avec
   .ctx-info-card / .ctx-section sur l'onglet Contexte. */
.res-card { background: #fff; border: 1px solid transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; border-radius: var(--r-lg, 10px); margin-bottom: 16px; }
/* Distinction colonne droite Résultats : fond gris très léger sur les cards (2026-06-09). */
.res-right-col .res-card { background: #fcfcfd; }
/* Fond uniquement (cf. note .ctx-right-col plus haut). */
.res-right-col .res-card-header { background: #fcfcfd; }
.res-right-col .res-card-header::after { background: #fcfcfd; }

/* Trait sous titre éclairci + min-height pour alignement entre les 2 colonnes
   (cohérence avec onglet Contexte). */
.res-card-header { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.res-card-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 16px; height: 1px; background: #fff; }

.res-card-icon { display: flex; align-items: center; justify-content: center; color: var(--res-teal); font-size: 0.88rem; width: 18px; flex-shrink: 0; }

.res-card-title { font-size: 0.80rem; font-weight: 500; color: var(--res-text-dark); }

.res-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--res-teal-light); color: var(--res-teal); border-radius: var(--r-sm, 3px); font-size: 0.65rem; font-weight: 600; line-height: 1; }

.res-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Bouton icône (crayon édition) : contour transparent au repos, hover teal-light conservé.
   Cohérent avec le pattern boutons icône du DS épuré. */
.res-action-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--r-md, 6px); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--res-text-muted); font-size: 0.72rem; transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; }

.res-action-btn:hover { text-decoration: none; }

.res-action-edit:hover { background: var(--res-teal-light); color: var(--res-teal); border-color: var(--res-teal); }

/* Bouton "+ Ajouter contrat" : contour allégé au repos (#d1d5db → #e2e8f0),
   hover saturé conservé pour signal d'action primaire. */
.res-add-btn { background: none; border: 1px solid #e2e8f0; color: var(--res-teal); min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-md, 6px); font-size: 0.72rem; font-weight: 500; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }

.res-add-btn:hover { background: var(--res-teal); color: #fff; border-color: var(--res-teal); }

.res-add-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── Empty state ── */

.res-empty-state { display: flex; flex-direction: column; align-items: center; padding: 28px 16px 24px; text-align: center; gap: 6px; }

.res-empty-state-icon { font-size: 1.5rem; color: #d1dce8; margin-bottom: 4px; line-height: 1; }

.res-empty-state-title { font-size: 0.79rem; font-weight: 500; color: var(--res-text-muted); line-height: 1.4; }

.res-empty-state-hint { font-size: 0.72rem; color: #adbdcc; line-height: 1.5; max-width: 215px; }

/* ── Groupes et items contrats ── */

.res-contract-group { position: relative; padding-bottom: 12px; border-bottom: 1px solid #e4eaf2; }
.res-contract-group::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 16px; height: 1px; background: #fff; }
.res-contract-group:last-child::after { display: none; }

.res-contract-group:last-child { border-bottom: none; padding-bottom: 4px; }

.res-children-zone { border-left: 3px solid var(--res-teal-light); margin-left: 16px; }

.res-contract-item { position: relative; padding: 12px 16px; transition: background 0.12s; }

.res-contract-item:hover { background: #f4faf9; }

.res-contract-item + .res-contract-item { border-top: 1px solid #eaeff6; }

.res-children-zone .res-contract-item + .res-contract-item { border-top: 1px solid #eaeff6; }

.res-ci-row1 { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }

/* Titre contrat : UPPERCASE conservé (élément central de l'onglet) + weight 500
   (allégé de 600 → 500, raffinement UX 2026-06-03). */
.res-ci-name { font-size: 0.82rem; font-weight: 500; color: var(--res-text-dark); flex: 1; min-width: 0; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.03em; }

.res-ci-open { visibility: hidden; color: #b0bec5; text-decoration: none; font-size: 0.82rem; flex-shrink: 0; padding: 2px 4px; transition: color 0.12s; }

.res-contract-item:hover .res-ci-open { visibility: visible; }

.res-ci-open:hover { color: var(--res-teal) !important; text-decoration: none; }

/* Nom fournisseur : UPPERCASE conservé + weight 500 (allégé de 600 → 500). Teal
   saturé conservé comme signal de catégorie. */
.res-ci-supplier { font-size: 0.72rem; font-weight: 500; color: var(--res-teal); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }

.res-ci-supplier i { font-size: 0.66rem; }

.res-ci-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

.res-badge, .res-validation-badge { display: inline-block; border-radius: var(--r-sm, 3px); padding: 1px 7px; font-size: 0.68rem; font-weight: 400; line-height: 1.5; border: 1px solid #cfd8e3 !important; color: #8a97a7 !important; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }

.res-contract-item:hover .res-badge,.res-contract-item:hover .res-validation-badge { color: var(--badge-color, #0d9488) !important; border-color: var(--badge-color, #0d9488) !important; }

.res-ci-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 7px; border-top: 1px solid #eaeff6; font-size: 0.72rem; color: var(--res-text-muted); }

.res-ci-footer-item { display: flex; align-items: center; gap: 4px; }

.res-ci-footer-item i { font-size: 0.65rem; }

.res-ci-footer-item.res-amount { color: var(--res-teal); font-weight: 500; }

.res-ci-footer-item.res-date-warn { color: #e67e22; }

/* ── Rattachement parent ── */

.res-ci-parent-row { display: flex; align-items: center; gap: 4px; margin-top: -11px; margin-bottom: 10px; font-size: 0.72rem; font-style: italic; }

.res-ci-parent-label { color: var(--res-text-muted); flex-shrink: 0; white-space: nowrap; }

.res-ci-parent-arrow { font-size: 0.90rem; font-style: normal; }

.res-ci-parent-name { color: var(--res-text-mid); font-weight: 500; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.res-ci-parent-open { visibility: hidden; color: #b0bec5; text-decoration: none; font-size: 0.80rem; font-style: normal; flex-shrink: 0; padding: 0 3px; transition: color 0.12s; }

.res-contract-item:hover .res-ci-parent-open { visibility: visible; }

.res-ci-parent-open:hover,.res-ci-parent-open:hover i { color: #0d9488 !important; text-decoration: none; }

.res-ci-parent-spacer { flex: 1; }

/* ── Bénéfices qualitatifs (display) ── */

.res-benefits-body { padding: 12px 16px 16px; }

.res-note-separator { border: none; border-top: 1px solid #e2e8f0; margin: 14px 0 12px; }

.res-note-label { font-size: 0.67rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }

.res-note-text { font-size: 0.79rem; color: var(--res-text-mid); line-height: 1.6; white-space: pre-line; }

.res-qb-group { margin-bottom: 18px; }

.res-qb-group:last-child { margin-bottom: 0; }

/* Sous-titres "AXE 1/2/3..." (thèmes admin de regroupements de bénéfices) :
   UPPERCASE conservé pour ressortir comme thématique de section, weight 600 + teal
   saturé conservés (rôle de marqueur de regroupement, pas un simple label muet).
   Trait séparateur AXE/items renforcé pour rester visible mais discret. */
.res-qb-cat { font-size: 0.65rem; font-weight: 600; color: var(--res-teal); text-transform: uppercase; letter-spacing: 0.09em; padding-bottom: 4px; border-bottom: 1px solid rgba(13,148,136,0.18); margin-bottom: 5px; }

.res-qb-item { padding: 4px 0 4px 2px; }

/* Trait fin entre items retiré (raffinement UX 2026-06-04) — les items sous un même
   AXE forment un bloc visuel cohérent, pas besoin de les séparer ligne par ligne. */
.res-qb-item + .res-qb-item { border-top: none; }

.res-qb-main { display: flex; align-items: center; gap: 7px; }

/* Coches des bénéfices : teal medium (raffinement UX 2026-06-03) — légèrement
   plus clair que le teal saturé des AXE pour créer une hiérarchie visuelle
   (AXE = ancre de section, checks = marqueurs secondaires). */
.res-qb-check { color: rgba(13,148,136,0.55); font-size: 0.70rem; flex-shrink: 0; }

.res-qb-label { font-size: 0.79rem; color: var(--res-text-mid); flex: 1; line-height: 1.35; }

.res-qb-stars { font-size: 0.72rem; color: #f59e0b; letter-spacing: 1px; flex-shrink: 0; }

.res-qb-stars-empty { color: #dde3ea; }

.res-qb-comment { font-size: 0.73rem; color: #8fa1b3; font-style: italic; padding-left: 20px; margin-top: 2px; line-height: 1.4; }

/* ── Bloc no-access ── */

.res-no-access-block { margin: 12px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-lg, 10px); padding: 10px 14px; font-size: 0.80rem; color: #92400e; line-height: 1.5; }

/* ─── 8. Pages Enjeux et performance ─────────────────────────────────────── */

#project-costs-page { background: var(--fin-bg); }

/* Marges latérales 40px gauche + 28px droite (compense 12px scrollbar pc-right).
   Padding-bottom retiré (raffinement UX 2026-06-04) — les colonnes scrollent
   indépendamment et n'ont pas besoin de marge bas sur le wrapper. */
.pc-inner { margin: 0 auto; padding: 20px 28px 0 40px; }

.pc-project-name { font-size: 1.1rem; font-weight: 700; color: var(--fin-text-dark); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }

/* Cards (versions enjeux — étendent .fin-card défini en passe 5) */

.pc-left > .fin-card, .pc-left > .fin-alert + .fin-card { margin-bottom: 28px; }

.fin-card-header.pc-collapsible { cursor: pointer; user-select: none; }

.fin-card-header.pc-collapsible:hover { background: #f0f4f7; }

.fin-card-header.pc-collapsible[aria-expanded="true"] .pc-chevron { transform: rotate(180deg); }

.pc-chevron { margin-left: auto; color: var(--fin-text-muted); font-size: 0.82rem; transition: transform 0.2s; }

/* ── En-tête module ── */

/* Module header /costs (raffinement UX 2026-06-04) : passage au style épuré aligné
   sur les pages Listes / Actions. Bande navy foncée remplacée par fond blanc +
   titre section navy + breadcrumb projet muet. Padding 40px latéral (cohérence app). */
.fin-module-header { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; min-height: 64px; background: #fff; color: var(--fin-text-dark); gap: 16px; flex-shrink: 0; }

.fin-module-header-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }

.fin-module-title-row { display: flex; align-items: baseline; gap: 8px; overflow: hidden; }

.fin-module-back { display: inline-flex; align-items: center; gap: 5px; font-size: 0.70rem; color: var(--fin-text-muted); text-decoration: none; transition: color 0.15s; }

.fin-module-back:hover { color: var(--fin-teal); text-decoration: none; }

/* Nom du projet (breadcrumb) en Anton + weight 300 pour l'alléger (raffinement
   UX 2026-06-04) — cohérence avec le titre de section qui est déjà en Anton. */
.fin-module-project-name { font-family: 'Anton', sans-serif; font-size: 1.05rem; font-weight: 300; letter-spacing: 0.3px; color: var(--fin-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }

.fin-module-project-name--link { text-decoration: none; transition: color 0.15s ease; }

.fin-module-project-name--link:hover { color: var(--fin-teal); text-decoration: underline; cursor: pointer; }

.fin-module-title-sep { color: var(--fin-text-muted); font-size: 1.1rem; flex-shrink: 0; line-height: 1; }

/* Titre de section en logo-font Anton (cohérence avec .ds-page-header-title des
   pages Listes / Actions). */
.fin-module-section { font-family: 'Anton', sans-serif; font-weight: 400; color: var(--fin-text-dark); font-size: 1.3rem; white-space: nowrap; letter-spacing: 0.5px; }

.fin-module-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Status pills module header /costs : border-radius DS 2px + style par défaut adapté
   au header blanc (fond gris très clair par défaut, override par les variants badge). */
.fin-module-status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-sm, 3px); padding: 4px 12px; font-size: 0.70rem; font-weight: 700; background: #f1f5f9; color: var(--fin-text-mid); border: 1px solid #e2e8f0; white-space: nowrap; }

.fin-module-status-pill.fin-badge-orange    { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }

.fin-module-status-pill.fin-badge-amber     { color: #92400e; background: #fffbeb; border-color: #fde68a; }

.fin-module-status-pill.fin-badge-yellow    { color: #b45309; background: #fef3c7; border-color: #fde68a; }

.fin-module-status-pill.fin-badge-green     { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

.fin-module-status-pill.fin-badge-darkgreen { color: #14532d; background: #dcfce7; border-color: #86efac; }

.fin-module-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: var(--r-md, 6px); font-size: 0.80rem; font-weight: 600; line-height: 1.4; background: var(--fin-teal); color: #fff; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s; }

.fin-module-cta:hover { background: #0f766e; color: #fff; text-decoration: none; }

/* Barre d'actions secondaires : alignée sur le style épuré (fond blanc, plus de
   trait bottom — raffinement UX 2026-06-04). Padding 40px latéral cohérent header. */
.fin-module-actions { display: flex; align-items: center; gap: 8px; padding: 8px 40px; background: #fff; flex-wrap: wrap; min-height: 46px; }

.fin-module-actions-sep { flex: 1; min-width: 16px; }

.pc-header-btn { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); font-size: 0.72rem; border-radius: var(--r-md, 6px); padding: 3px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s; white-space: nowrap; }

.pc-header-btn:hover { background: rgba(255,255,255,0.20); color: #fff; }

/* ── Layout 2 colonnes ── */

/* Layout 2 colonnes : gouttière 28px (= 40 - 12 : 3 buffer + 6 scrollbar + 3 buffer)
   pour compenser la largeur visuelle de la scrollbar pc-left. Raffinement UX 2026-06-04. */
.pc-layout { display: flex; gap: 28px; align-items: stretch; overflow: hidden; }

.pc-left { flex: 1; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }

/* Largeur 364px = 340 + 24 (raffinement UX 2026-06-04, prélevé sur pc-left
   flex:1 qui s'adapte automatiquement). */
.pc-right { flex: 0 0 364px; width: 364px; flex-shrink: 0; height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }

/* Scrollbars colonnes : transparentes au repos, visibles au hover. */
.pc-left, .pc-right { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.pc-left:hover, .pc-right:hover { scrollbar-color: #c4c9d0 transparent; }
.pc-left::-webkit-scrollbar, .pc-right::-webkit-scrollbar { width: 6px; background: transparent; }
.pc-left::-webkit-scrollbar-track, .pc-right::-webkit-scrollbar-track { background: transparent; }
.pc-left::-webkit-scrollbar-thumb, .pc-right::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.pc-left:hover::-webkit-scrollbar-thumb, .pc-right:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

.pc-right .fin-card { margin-bottom: 12px; }

.pc-right .pc-validation-cols { flex-direction: column; }

.pc-right .pc-validation-left { border-right: none; border-bottom: 1px solid #f3f4f6; }

.pc-right .fin-validator-row { flex-direction: column; gap: 6px; }

.pc-right .fin-validator-type { width: auto; }

.pc-right .fin-add-panel { flex-wrap: wrap; }

.pc-right .fin-add-panel .bootstrap-select { max-width: 100% !important; min-width: 0 !important; }@media (max-width: 900px) { .pc-layout { flex-direction: column; } .pc-right { width: 100%; flex: none; } }

/* ── Dates row ── */

/* Ligne Début/Fin (raffinement UX 2026-06-04) : bg aligné sur header OOC/RC,
   padding réduit, trait teal sous la ligne retiré (transparent). */
.pc-dates-row { display: flex; align-items: center; gap: 10px; padding: 6px 20px; border-bottom: 1px solid transparent; flex-wrap: wrap; font-size: 0.82rem; color: var(--fin-text-mid); background: #f4faf8 !important; }

.pc-dates-row label { margin: 0; font-weight: 600; font-size: 0.75rem; color: var(--fin-text-muted); }

.pc-dates-row .form-control { width: 130px; font-size: 0.82rem; padding: 3px 8px; height: auto; }

.pc-dates-sep { color: #d1d5db; font-weight: 300; font-size: 1.1rem; }

.pc-dates-hint { font-size: 0.76rem; color: var(--fin-text-muted); margin: 10px 16px 4px; padding: 6px 10px; background: #f8fafc; border-left: 3px solid var(--fin-teal); border-radius: 0 var(--r-lg, 10px) var(--r-lg, 10px) var(--r-lg, 10px) var(--r-lg, 10px) 0; }

.pc-dates-hint i { color: var(--fin-teal); margin-right: 4px; }

/* ── Tableau coûts ── */

.pc-costs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }

.pc-kpi-cell { padding: 14px 8px !important; text-align: center; vertical-align: middle; background: #f8fafb; border-bottom: 2px solid #e2e8f0 !important; }

.pc-kpi-cell.fin-kpi-dash { opacity: 0.55; }

.pc-kpi-cell.fin-kpi-final { background: var(--fin-teal-light) !important; }

.pc-kpi-cell.fin-kpi-warn { background: #fff7ed !important; }

.pc-kpi-cell.fin-kpi-warn .fin-kpi-value { color: #c2410c; }

.pc-kpi-cell.fin-kpi-warn .fin-kpi-label { color: #c2410c; }

.pc-kpi-cell .fin-kpi-label { font-size: 0.65rem; color: var(--fin-text-muted); font-weight: 400; margin-bottom: 5px; }

.pc-kpi-cell .fin-kpi-value { font-size: 0.96rem; font-weight: 600; color: var(--fin-text-dark); line-height: 1.2; }

.pc-kpi-cell.fin-kpi-final .fin-kpi-value { color: var(--fin-teal); }

/* Trait sous header de tableau (Budgétés, Prévisionnels...) atténué (raffinement
   UX 2026-06-04) : 2px → 1px. */
.pc-costs-table th { padding: 14px 8px; font-size: 0.65rem; font-weight: 600; color: var(--fin-text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e2e8f0; text-align: center; background: #f8fafb; vertical-align: middle; }

.pc-costs-table th:first-child { text-align: left; width: 140px; }

/* Lignes data tableaux coûts : trait inter-lignes atténué (raffinement UX 2026-06-04). */
.pc-costs-table td { padding: 6px 8px; border-bottom: 1px solid rgba(45,62,80,0.06); vertical-align: middle; text-align: center; }

.pc-costs-table td:first-child { text-align: left; color: var(--fin-text-muted); font-size: 0.78rem; }

/* Ligne "Total contrat" entre Total et Répartition annuelle : traits 2px → 1px. */
.pc-costs-table tr.pc-tr-total td { font-weight: 700; font-size: 0.82rem; background: #f0f4f7; border-top: 1px solid #d1d5db !important; border-bottom: 1px solid #d1d5db !important; }

.pc-costs-table tr.pc-tr-total .form-control { font-weight: 700 !important; font-size: 0.82rem !important; color: var(--fin-text-dark) !important; }

.pc-costs-table tr.pc-tr-subtotal td { font-size: 0.78rem; color: var(--fin-text-muted); }

.pc-costs-table tr.pc-tr-year td { font-size: 0.80rem; }

.pc-costs-table .form-control { font-size: 0.80rem; padding: 3px 6px; height: auto; text-align: center; }

/* Inputs UNIQUEMENT dans les rangées annuelles OOC (pc-tr-year) : hauteur calée
   sur celle du texte des rangées RC équivalentes — raffinement UX 2026-06-04.
   On ne touche PAS au td padding (qui est partagé OOC/RC), seulement à l'input
   lui-même. */
.pc-costs-table tr.pc-tr-year .form-control,
.pc-costs-table tr.pc-tr-year input.form-control { height: 18px !important; min-height: 18px !important; padding: 0 6px !important; line-height: 1.2 !important; border-width: 1px !important; }
.pc-costs-table tr.pc-tr-year .input-group { min-height: 0 !important; align-items: center; }

.pc-costs-table .input-group { flex-wrap: nowrap; }

.pc-col-locked { background: #f9fafb !important; color: #9ca3af !important; }

.pc-col-final  { background: var(--fin-teal-light) !important; }

.pc-th-locked  { color: #d1d5db !important; }

.pc-th-final   { color: var(--fin-teal) !important; }

.fin-th-warn   { background: #fffbeb !important; color: #92400e !important; }

.pc-td-warn    { background: #fffbeb !important; }

.pc-locked-dash { color: #d1d5db; font-size: 1rem; }

.pc-declare-link { font-size: 0.70rem; font-weight: 500; color: var(--fin-teal); text-decoration: underline; display: block; margin-top: 2px; }

.pc-declare-link:hover { color: #0f766e; }

/* Icônes poubelle (suppression) : invisibles au repos, visibles au hover de la
   carte parente (raffinement UX 2026-06-04). Visibility évite tout layout shift. */
.pc-cancel-result-btn { color: #d1d5db; margin-left: 4px; visibility: hidden; transition: color 0.12s; }
.pc-cancel-result-btn:hover { color: #ef4444; }
.fin-card:hover .pc-cancel-result-btn { visibility: visible; }

.pc-trash-btn { color: #d1d5db; font-size: 0.80rem; text-decoration: none; padding: 2px 4px; visibility: hidden; transition: color 0.12s; }
.pc-trash-btn:hover { color: #ef4444; text-decoration: none; }
.fin-card:hover .pc-trash-btn { visibility: visible; }

.pc-tfoot-toggle { cursor: pointer; }

.pc-tfoot-toggle td { padding: 6px 10px; text-align: left !important; color: var(--fin-text-muted); font-size: 0.75rem; border-top: 1px solid #e5e7eb; }

/* Hover sur l'élément lui-même (div) + sur td (tfoot) — couvre les 2 cas :
   .pc-perf-global-toggle / .pc-perf-inner-toggle (div) ET tfoot de pc-costs-table. */
.pc-tfoot-toggle:hover,
.pc-tfoot-toggle:hover td { background: #f8fafb; color: var(--fin-teal); }

.pc-yearly-icon { transition: transform 0.2s; }

.pc-yearly-icon.open { transform: rotate(180deg); }

.pc-td-rowlabel { font-size: 0.72rem; color: var(--fin-text-muted); font-style: italic; }

.pc-variation-toggle { display: inline-flex; align-items: center; gap: 3px; font-size: 0.70rem; font-style: normal; color: var(--fin-teal); text-decoration: none; margin-top: 3px; opacity: 0.75; transition: opacity 0.15s; }

.pc-variation-toggle:hover { opacity: 1; text-decoration: none; color: var(--fin-teal); }

.pc-variation-toggle .pc-vt-icon { transition: transform 0.2s; }

.pc-variation-toggle.open .pc-vt-icon { transform: rotate(45deg); }

.pc-td-computed { font-weight: 600; font-size: 0.82rem; }

#pc-total-yearly .pc-td-computed { font-weight: 400; text-align: center !important; }

#pc-total-yearly td { vertical-align: middle !important; }

#pc-total-yearly.show { display: table-row-group !important; }

#pc-rc-yearly.show { display: table-row-group !important; }

#pc-rc-yearly .pc-td-computed { font-weight: 400 !important; }

#pc-rc-variation td:not(:first-child) { text-align: center !important; }

#pc-rc-variation .form-control { text-align: center !important; }

#pc-rc-variation .input-group { width: 100%; justify-content: center; }

.pc-resimulate-row td { background: #fafbfc; border-top: 1px dashed #e5e7eb !important; }

.fin-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.fin-btn-grey--publish:hover { background: var(--fin-teal-hover); border-color: var(--fin-teal); color: var(--fin-teal); }

.pc-incoherence-alert { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 18px 10px; font-size: 0.78rem; color: #92400e; background: #fffbeb; border-top: 1px solid #fde68a; }

.pc-incoherence-alert i { color: #f59e0b; flex-shrink: 0; margin-top: 2px; }

.pc-simulation-notice { display: none; align-items: center; gap: 10px; padding: 8px 16px 8px 18px; font-size: 0.78rem; color: #0f766e; background: #f0fdfa; border-top: 1px solid #99f6e4; }

.pc-simulation-notice i.fa-info-circle { flex-shrink: 0; color: var(--fin-teal); }

.pc-simulation-notice-close { margin-left: auto; background: none; border: none; color: #99f6e4; font-size: 0.9rem; cursor: pointer; padding: 0 2px; line-height: 1; }

.pc-simulation-notice-close:hover { color: #0f766e; }

#pc-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }

.pc-toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-lg, 10px); font-size: 0.80rem; font-weight: 500; color: #fff; background: #ef4444; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: auto; max-width: 320px; }

.pc-toast.visible { opacity: 1; transform: translateY(0); }

.pc-toast i { flex-shrink: 0; margin-top: 1px; }

/* ── KPI + Performance (pages enjeux) ── */

.fin-kpi-grid { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 20px 18px; }

/* Tuiles KPI (override pour pages enjeux) : border retirée (cohérence DS épuré). */
.fin-kpi-item { flex: 1; min-width: 120px; background: #f8fafb; border: 1px solid transparent; border-radius: var(--r-lg, 10px); padding: 12px 14px; text-align: center; }

.fin-kpi-item.fin-kpi-final { background: var(--fin-teal-light); border-color: transparent; }

.fin-kpi-item.fin-kpi-dash { opacity: 0.55; }

/* Tuiles Performance (override raffinement UX 2026-06-04) : fond + borders
   transparents (cohérence avec /costs page). */
.fin-perf-grid { display: flex; gap: 0; }

.fin-perf-item { flex: 1; background: transparent; padding: 14px 8px; text-align: center; border-bottom: 1px solid transparent; }

.fin-perf-item:not(:last-child) { border-right: 1px solid transparent; }

.fin-perf-item.fin-kpi-final { background: var(--fin-teal-light); }

/* Hero performance */

.pc-perf-global { padding: 20px 24px 0; }

.pc-perf-section-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #1a3556; margin-bottom: 10px; }

/* Mini tableau Performance (raffinement UX 2026-06-04) — fond + tous les bords
   transparents. Les chiffres / labels portent toute l'info visuelle. */
.pc-perf-hero-kpis { display: flex; border-radius: var(--r-lg, 10px); overflow: hidden; border: 1px solid transparent !important; }

.pc-perf-kpi { flex: 1; background: transparent !important; padding: 18px 24px; text-align: center; }

/* Séparateur vertical entre les 2 KPI transparent. */
.pc-perf-kpi + .pc-perf-kpi { border-left: 1px solid transparent !important; }

.pc-perf-kpi-label { font-size: 0.62rem; font-weight: 400; color: var(--fin-text-muted); margin-bottom: 9px; }

.pc-perf-kpi-value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }

/* Toggle "Répartition annuelle" Performance Achats : padding aligné sur les
   tfoot OOC/RC/Aggregate (raffinement UX 2026-06-04). */
.pc-perf-global-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--fin-text-muted); cursor: pointer; user-select: none; padding: 6px 10px; }

.pc-perf-yearly-table { width: 100%; border-collapse: collapse; margin-top: 6px; table-layout: fixed; }

.pc-perf-yearly-table th { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fin-text-muted); padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: center; background: #f0fdf9; }

.pc-perf-yearly-table th:first-child { text-align: left; }

/* Lignes data tableau perf yearly : trait inter-lignes atténué. */
.pc-perf-yearly-table td { padding: 5px 8px; border-bottom: 1px solid rgba(45,62,80,0.06); vertical-align: middle; text-align: center; font-size: 0.80rem; }

/* Hover Performance Achats : géré par .pc-tfoot-toggle:hover (généralisé à
   l'élément lui-même + td). Les toggles div .pc-perf-global-toggle et
   .pc-perf-inner-toggle ont aussi la classe .pc-tfoot-toggle. */

.pc-perf-yearly-table td:first-child { text-align: left; color: var(--fin-text-muted); font-style: italic; font-size: 0.72rem; }

.pc-perf-yearly-inner th { background: #f8fafb; font-size: 0.58rem; }

.pc-perf-yearly-inner td { font-size: 0.72rem; padding: 4px 14px; }

.pc-perf-yearly-inner td:first-child { font-size: 0.68rem; padding: 4px 14px; }

/* Bloc "Détail par type" : trait top retiré (raffinement UX 2026-06-04). */
.pc-perf-breakdown { margin-top: 16px; padding: 14px 24px 20px; border-top: 1px solid transparent; background: rgba(255,255,255,0.55); }

.pc-perf-breakdown-header { margin-bottom: 12px; }

.pc-perf-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Encadrés "Détail par type" (Coûts ponctuels / Coûts récurrents) : tous les bords
   transparents (raffinement UX 2026-06-04). Seul le trait sous le sub-header
   (Coûts ponctuels / Coûts récurrents) reste visible. */
.pc-perf-breakdown-col { background: #fff; border: 1px solid transparent; border-radius: 2px; overflow: hidden; }

.pc-perf-breakdown-col-header { padding: 8px 14px; background: #f8fafb; border-bottom: 1px solid #e2e8f0; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fin-text-muted); }

.pc-perf-breakdown-col-body { padding: 14px 14px 10px; display: flex; gap: 16px; }

.pc-perf-breakdown-metric { flex: 1; }

.pc-perf-breakdown-metric-label { font-size: 0.60rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fin-text-muted); margin-bottom: 4px; }

.pc-perf-breakdown-metric-value { font-size: 0.90rem; font-weight: 700; }

/* Toggle "Répartition annuelle" Performance Achats — détail par type — padding
   aligné sur les tfoot des autres cards (raffinement UX 2026-06-04). */
.pc-perf-inner-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--fin-text-muted); cursor: pointer; user-select: none; padding: 6px 10px; border-top: 1px solid #f3f4f6; }

.fin-gain  { color: #16a34a; }

.fin-loss  { color: #ef4444; }

.fin-avoid { color: #16a34a; }

.fin-perf-badge { margin-left: auto; display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 100px; background: rgba(255,255,255,0.20); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.35); white-space: nowrap; }

/* ── Variantes cards enjeux ── */

.fin-card--ooc,.fin-card--rc { border-left: 2px solid var(--fin-teal) !important; }

/* Header OOC/RC atténué (raffinement UX 2026-06-04) — #e6f7f5 ressortait trop
   maintenant que le reste est très épuré. Performance Achats garde #e6f7f5 comme
   phare visuel (variant le plus marqué). */
.fin-card--ooc > .fin-card-header,.fin-card--rc > .fin-card-header { background: #f4faf8 !important; }
.fin-card--ooc > .fin-card-header::after,.fin-card--rc > .fin-card-header::after { background: #f4faf8 !important; }

/* Carte "Totaux" : marqueur récap = border-top teal (raffinement UX 2026-06-04).
   Marge top renforcée pour séparer visuellement des cards OOC/RC. Sélecteur
   spécifique + !important pour passer outre la collapse de margin avec la
   margin-bottom de la card précédente. */
.pc-left > .fin-card.fin-card--aggregate { margin-top: 40px !important; }
.fin-card--aggregate > .fin-card-header { border-top: 2px solid var(--fin-teal); }

.fin-card--aggregate > .fin-card-header .fin-icon-box { color: var(--fin-teal); }

/* Durée prévisionnelle du contrat dans le header de la carte Totaux : calée à droite. */
.pc-totaux-duration { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.82rem; color: var(--fin-text-mid); }

/* Titre de card avec tooltip intégré (Coûts ponctuels / Récurrents) : curseur help
   pour signaler l'affordance — raffinement UX 2026-06-04. */
.pc-card-title-tooltip { cursor: help; }

/* Carte "Performance Achats" (raffinement UX 2026-06-04) — refonte du marqueur :
   plus de full navy border ni de header bg navy + texte blanc, qui tranchaient avec
   le reste épuré. Remplacé par border-left teal 3px (plus épais que les variants
   ooc/rc à 2px → marqueur le plus fort de la page) + header bg teal-light + texte
   navy. La carte reste clairement la plus marquée tout en respectant la grammaire DS. */
.fin-card--performance { border-left: 3px solid var(--fin-teal) !important; background: #fff; overflow: hidden; }

.fin-card--performance > .fin-card-header { background: var(--fin-teal-light); border-radius: 0 !important; }
.fin-card--performance > .fin-card-header::after { background: var(--fin-teal-light); }

.fin-card--performance > .fin-card-header .fin-icon-box { color: var(--fin-teal); }

.fin-card--performance > .fin-card-header .fin-card-title { color: var(--fin-text-dark); font-size: 0.80rem; }

/* ── Inline edit ── */

.pc-inline-edit { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; transition: border-color 0.15s ease, background-color 0.15s ease; }

.pc-inline-edit:hover { border-color: #9ca3af !important; background-color: #f3f4f6 !important; cursor: text; }

.pc-inline-edit:focus { border-color: var(--fin-teal) !important; background-color: #fff !important; box-shadow: 0 0 0 2px rgba(20,184,166,0.10) !important; }

.pc-inline-edit:disabled { border-color: transparent !important; background-color: transparent !important; opacity: 0.45; cursor: not-allowed; }

#project_costs_costsNotes.pc-inline-edit { resize: none; }

#project_costs_costsNotes.pc-inline-edit:focus { resize: vertical; }

.pc-save-status { color: #9ca3af; font-size: 0.48rem; line-height: 1; cursor: default; opacity: 0; transition: opacity 0.2s ease, color 0.2s ease; }

.pc-save-status.is-saving { opacity: 1; }

.pc-save-status.is-saved  { opacity: 1; color: var(--fin-teal); }

.pc-calc-running { color: var(--fin-teal); background: #f0fdf9; font-style: italic; }

/* ── Contrats footer ── */

.pc-contract-body { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; }

.pc-contract-row { display: flex; align-items: center; gap: 10px; }

.pc-contract-label { font-size: 0.74rem; color: var(--fin-text-muted); font-weight: 500; width: 90px; flex-shrink: 0; }

.pc-contract-body .form-control { width: 120px; font-size: 0.82rem; padding: 3px 8px; height: auto; }

.pc-contract-duration { font-size: 0.78rem; color: var(--fin-text-muted); }

/* ── Validation ── */

.pc-validation-cols { display: flex; min-height: 0; }

.pc-validation-left { flex: 0 0 38%; padding: 16px 20px; border-right: 1px solid #f3f4f6; min-width: 0; }

.pc-validation-right { flex: 1; padding: 16px 20px; min-width: 0; }

/* Scrollbar atténuée (raffinement UX 2026-06-04). */
.pc-validation-history { max-height: 280px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.pc-validation-history:hover { scrollbar-color: #c4c9d0 transparent; }

.pc-validation-history::-webkit-scrollbar { width: 4px; background: transparent; }

.pc-validation-history::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.pc-validation-history:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

.fin-req-scrollable { max-height: 260px; overflow-y: auto; padding-right: 6px; }

.fin-req-scrollable::-webkit-scrollbar { width: 4px; }

.fin-req-scrollable::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }@media (max-width: 767px) { .pc-validation-cols { flex-direction: column; } .pc-validation-left { border-right: none; border-bottom: 1px solid #f3f4f6; } }

/* ── Params (vue display) ── */

.pc-params-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; font-size: 0.82rem; flex-wrap: wrap; }

.pc-params-row:last-child { border-bottom: none; }

.pc-params-label { width: 160px; flex-shrink: 0; font-weight: 600; color: var(--fin-text-mid); font-size: 0.78rem; }

.pc-params-value { flex: 1; min-width: 0; color: var(--fin-text-mid); }

.pc-perf-type-label { padding: 10px 20px 0; font-size: 0.72rem; font-weight: 700; color: var(--fin-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.pc-perf-total-row td { background: var(--fin-teal-light) !important; font-weight: 700; border-top: 2px solid rgba(13,148,136,0.2) !important; border-bottom: 2px solid rgba(13,148,136,0.2) !important; }

.pc-perf-total-row td:first-child { font-size: 0.72rem; color: var(--fin-teal); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; }

/* Désactive le scroll page-level (raffinement UX 2026-06-04) — les colonnes
   pc-left / pc-right ont leurs propres scrolls. Évite la 2e scrollbar résiduelle
   sur le wrapper page. */
#project-costs-scroll { overflow: hidden !important; }

/* ─── 9. Fil d'activité ───────────────────────────────────────────────────── */
#sp-body-activity .sp-act-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 6px; background: #fff; border-bottom: 1px solid #e9ecef; flex-shrink: 0; position: relative; z-index: 10; }

#sp-body-activity .sp-act-filter-btn { font-size: 11px; padding: 2px 9px; border-radius: var(--r-full, 999px); border: 1px solid #b2dfdb; color: #00695c; background: #fff; text-decoration: none; line-height: 1.6; white-space: nowrap; transition: background .15s, color .15s; }

#sp-body-activity .sp-act-filter-btn.active,#sp-body-activity .sp-act-filter-btn:hover { background: #00695c; border-color: #00695c; color: #fff; text-decoration: none; }

/* Scroll structure */

#sp-body-activity { overflow: hidden !important; }

#sp-body-activity .sp-act-filters { flex-shrink: 0; }

#sp-body-activity .row.no-gutters.bg-white { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

#sp-body-activity .row.no-gutters.bg-white::-webkit-scrollbar { width: 3px; }

#sp-body-activity .row.no-gutters.bg-white::-webkit-scrollbar-thumb { background: #b2dfdb; border-radius: 3px; }

#sp-body-activity .comment-tab { flex-shrink: 0; }

#sp-body-activity .row.no-gutters.bg-white > .col-md-12 { padding: 0; }

#sp-body-activity .container-scrollable { height: auto !important; max-height: none !important; overflow: visible !important; }

/* Avatar */

#sp-body-activity .media > .md-circled { margin-top: 2px; }

#sp-body-activity .md-circled { width: 18px !important; height: 18px !important; min-width: 18px !important; line-height: 18px !important; }

#sp-body-activity .md-circled img { width: 18px !important; height: 18px !important; }

#sp-body-activity .md-circled div { font-size: 7px !important; line-height: 18px !important; padding-top: 0 !important; }

/* Items */

#sp-body-activity .media { align-items: flex-start; border-bottom: 1px solid #f1f3f5; }

#sp-body-activity .media-parent { padding: 6px 8px 0 !important; margin-bottom: 0 !important; }

#sp-body-activity .media-child  { padding: 4px 6px 0 !important; margin-bottom: 2px !important; background: rgba(0,0,0,.02); }

/* Header flex */

#sp-body-activity .project-activity-header { flex-wrap: wrap; margin-top: 2px !important; align-items: center; gap: 0; }

#sp-body-activity .spa-name-wrap { flex: 1 1 auto; min-width: 0; order: 1; }

/* R24 : !important requis, app.css force `h5 { font-size: 0.7rem !important }` (le 12 px déclaré ici ne s'appliquait jamais : 11,2 px effectifs). */
#sp-body-activity .spa-name { font-size: 12px !important; font-weight: 600; color: #1a3a4a; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

#sp-body-activity .spa-time-wrap { flex: 0 0 auto; order: 2; }

#sp-body-activity .spa-time { font-size: 11px !important; color: #90a4ae !important; font-weight: 400; margin-left: 4px; white-space: nowrap; }

#sp-body-activity .spa-badges-wrap { flex: 0 0 auto; order: 3; display: flex; gap: 2px; margin-left: 3px; }

#sp-body-activity .spa-badge { font-size: 9px; padding: 1px 5px; border-radius: var(--r-full, 999px); font-weight: 600; white-space: nowrap; border: 1px solid; }

#sp-body-activity .spa-badge-new       { background: #fdecea; color: #c62828; border-color: #ef9a9a; }

#sp-body-activity .spa-badge-important { background: #fdecea; color: #c62828; border-color: #ef9a9a; }

#sp-body-activity .spa-badge-obsolete  { background: #f5f5f5; color: #757575; border-color: #bdbdbd; font-style: italic; }

#sp-body-activity .spa-badge-deleted   { background: #fdecea; color: #c62828; border-color: #ef9a9a; }

#sp-body-activity .fresh-item-container { flex: 0 0 auto; order: 4; }

#sp-body-activity .spa-action-text { flex: 0 0 100%; order: 10; font-size: 12px; color: #546e7a; line-height: 1.4; margin-left: 0 !important; margin-top: 1px; }

/* Réactions */

#sp-body-activity .project-activity-reaction-container { position: relative; display: flex; align-items: center; flex: 0 0 auto; order: 5; }

#sp-body-activity .project-activity-reaction { display: flex; align-items: center; gap: 2px; }

#sp-body-activity .project-activity-reaction .reactions-container { display: inline-flex; align-items: center; }

#sp-body-activity .project-activity-reaction img { width: 14px !important; height: 14px !important; }

#sp-body-activity .reactions-count { font-size: 9px; color: #78909c; margin-right: 1px; }

#sp-body-activity .spa-star-icon { font-size: 12px; color: #b0bec5; margin-left: 3px; cursor: pointer; transition: color .15s; }

#sp-body-activity .spa-star-icon.fas { color: #f9a825 !important; }

#sp-body-activity .spa-star-icon.far:hover { color: #f9a825; }

#sp-body-activity .spa-reaction-picker { display: none; position: fixed; background: #fff; border: 1px solid #e0e0e0; border-radius: var(--r-md, 6px); padding: 6px 10px; box-shadow: 0 2px 10px rgba(0,0,0,.12); z-index: 1050; white-space: nowrap; }

#sp-body-activity .spa-reaction-picker img { width: 22px !important; height: 22px !important; margin: 0 3px; cursor: pointer; }

#sp-body-activity .spa-react-trigger { font-size: 13px; color: #cfd8dc; cursor: pointer; transition: color .15s; line-height: 1; }

#sp-body-activity .spa-react-trigger:hover { color: #00695c; }

#sp-body-activity .spa-toolbar-star { font-size: 13px; color: #b0bec5; cursor: pointer; transition: color .15s; }

#sp-body-activity .spa-toolbar-star.fas { color: #f9a825; }

#sp-body-activity .spa-toolbar-star:hover { color: #f9a825; }

/* Contenu */

#sp-body-activity .project-activity-content { padding: 2px 0 0; }

#sp-body-activity .spa-panel { display: flex; align-items: center; gap: 5px; background: #f8fafb; border-left: 2px solid #b2dfdb; border-radius: var(--r-lg, 10px); padding: 3px 7px; font-size: 12px; min-width: 0; margin-top: 3px; }

#sp-body-activity .spa-main  { flex: 1; min-width: 0; font-size: 12px; color: #1a3a4a; }

#sp-body-activity .spa-meta  { flex-shrink: 0; color: #78909c; font-size: 11px; white-space: nowrap; }

#sp-body-activity .spa-icon  { color: #78909c; font-size: 12px; flex-shrink: 0; }

#sp-body-activity .spa-link  { color: #78909c; flex-shrink: 0; }

#sp-body-activity .spa-link:hover { color: #00695c; }

#sp-body-activity .spa-panel-row2 { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #546e7a; margin-top: 2px; padding-left: 9px; min-width: 0; }

#sp-body-activity .spa-sub { flex: 1; min-width: 0; }

#sp-body-activity .spa-pill { font-size: 9px; padding: 1px 6px; border-radius: var(--r-full, 999px); border: 1px solid; white-space: nowrap; flex-shrink: 0; }

#sp-body-activity .spa-priority { width: 8px; height: 8px; border-radius: var(--r-sm, 3px); flex-shrink: 0; display: inline-block; }

#sp-body-activity .spa-panel-perf { flex-wrap: wrap; gap: 3px; }

#sp-body-activity .spa-label { color: #78909c; font-size: 11px; }

#sp-body-activity .spa-val   { font-size: 11px; font-weight: 600; }

#sp-body-activity .spa-sep-dot { color: #cfd8dc; }

/* R24 (2026-09-16, retour Olivier) : le commentaire est le seul contenu écrit par un humain du fil → taille de lecture du DS
   (13 px) ; métadonnées (action, encarts) 12 px, horodatages/labels 11 px : hiérarchie auteur / action / contenu conservée. */
#sp-body-activity .spa-comment { font-size: 13px; color: #263238; line-height: 1.5; padding: 2px 0; margin-top: 2px; }

#sp-body-activity .spa-comment-important { color: #c62828; font-weight: 600; }

/* Séparateur date */

#sp-body-activity .current-date { top: 3px !important; padding-top: 10px !important; margin-bottom: 12px !important; background: #fff; z-index: 5; position: sticky; }

#sp-body-activity .current-date .border-top { margin-top: 6px !important; padding-bottom: 4px !important; }

/* Enfants */

#sp-body-activity .media-childs-container-container { margin-left: 0; margin-top: 2px; }

#sp-body-activity .media-childs-container-container.spa-has-children { border-left: 2px solid #eceff1; padding-left: 6px; }

#sp-body-activity .media-childs-toolbar { padding: 0; }

#sp-body-activity .spa-replies-bar { display: flex; align-items: center; gap: 4px; padding: 2px 4px; font-size: 11px; }

#sp-body-activity .media-childs-user-container { gap: 2px; }

#sp-body-activity .media-childs-user-container .user-picture { width: 18px !important; height: 18px !important; font-size: 8px !important; line-height: 18px !important; min-width: 18px; }

#sp-body-activity .spa-replies-link { color: #78909c; font-size: 11px; text-decoration: none; }

#sp-body-activity .spa-replies-link:hover { color: #00695c; text-decoration: none; }

#sp-body-activity .fresh-item-childs-container { font-size: 10px; }

/* Toolbar */

#sp-body-activity .project-activity-toolbar { padding: 2px 4px 3px; }

#sp-body-activity .spa-toolbar-row { display: flex; align-items: center; width: 100%; min-height: 20px; }

#sp-body-activity .spa-toolbar-items { display: inline-flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity .15s; }

#sp-body-activity .media-parent:hover .spa-toolbar-items { opacity: 1; pointer-events: auto; }

#sp-body-activity .spa-tool-sep { width: 1px; height: 11px; background: #cfd8dc; margin: 0 6px; flex-shrink: 0; }

#sp-body-activity .spa-reply-btn { cursor: pointer; font-size: 11px; color: #78909c; padding: 0 2px; user-select: none; flex-shrink: 0; }

#sp-body-activity .spa-reply-btn:hover { color: #00695c; }

#sp-body-activity .comment-panel.d-inline-block ~ .spa-toolbar-row { display: none !important; }

/* Formulaire commentaire */

#sp-body-activity .comment-panel { width: 100% !important; }

#sp-body-activity .comment-panel .row.no-gutters > div[class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }

#sp-body-activity .comment-panel .col-11,#sp-body-activity .comment-tab .col-11 { position: relative; }

#sp-body-activity .comment-panel .emoji-picker-icon,#sp-body-activity .comment-tab .emoji-picker-icon { right: 35px !important; transition: color 0.15s; }

#sp-body-activity .comment-panel .emoji-picker-icon:hover,#sp-body-activity .comment-tab .emoji-picker-icon:hover { color: #0d9488 !important; }

#sp-body-activity .comment-panel .form-check,#sp-body-activity .comment-tab .form-check { position: absolute !important; right: 8px !important; top: 5px !important; z-index: 4; padding: 0 !important; margin: 0 !important; }

#sp-body-activity .comment-panel .form-check-input,#sp-body-activity .comment-tab .form-check-input { display: none !important; }

#sp-body-activity .comment-panel label.form-check-important,#sp-body-activity .comment-tab label.form-check-important { position: static !important; top: auto !important; right: auto !important; }

#sp-body-activity .comment-panel label.form-check-important::before,#sp-body-activity .comment-panel label.form-check-important:hover::before,#sp-body-activity .comment-panel input[type="checkbox"]:checked + label.form-check-important::before,#sp-body-activity .comment-tab label.form-check-important::before,#sp-body-activity .comment-tab label.form-check-important:hover::before,#sp-body-activity .comment-tab input[type="checkbox"]:checked + label.form-check-important::before { position: static !important; margin-left: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; line-height: 20px !important; padding: 0 !important; box-sizing: border-box !important; }

#sp-body-activity .emoji-wysiwyg-editor { padding-right: 70px !important; }

#sp-body-activity .emoji-wysiwyg-editor.medium-editor-placeholder:after { top: 50% !important; transform: translateY(-50%) !important; white-space: nowrap !important; }

#sp-body-activity .comment-tab { padding: 4px 8px !important; }

#sp-body-activity .comment-tab .col-10 { flex: 0 0 100%; max-width: 100%; margin: 0 !important; }

/* ─── 10. Bénéfices qualitatifs (drawer) ─────────────────────────────────── */

#benefits-search { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); font-size: 0.79rem; color: #415873; padding: 6px 10px 6px 32px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%238fa1b3' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 10px center; transition: border-color 0.15s; }

#benefits-search:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); outline: none; }

#benefitsDrawer textarea.form-control { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); font-size: 0.79rem; color: #415873; resize: vertical; transition: border-color 0.15s; }

#benefitsDrawer textarea.form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); outline: none; }

.qb-category-group { margin-bottom: 10px; }

.qb-category-header { font-size: 0.67rem; font-weight: 700; color: #0d9488; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 2px 5px; border-bottom: 1px solid #e6f7f5; margin-bottom: 5px; }

.qb-item { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); margin-bottom: 5px; background: #fff; transition: border-color 0.12s, background 0.12s; overflow: hidden; }

.qb-item:hover { background: #f0fafa; border-color: #b2e0db; }

.qb-item.qb-checked { background: #e6f7f5; border-color: #0d9488; }

.qb-item-main { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; }

.qb-checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid #d1d5db; border-radius: var(--r-sm, 3px); flex-shrink: 0; cursor: pointer; transition: background 0.12s, border-color 0.12s; }

.qb-checkbox:checked { background: #0d9488; border-color: #0d9488; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px; }

.qb-label { font-size: 0.79rem; color: #415873; cursor: pointer; margin: 0; font-weight: 400; flex: 1; }

.qb-label a { color: inherit; text-decoration: none; }

.qb-enrich-toggle { background: none; border: none; padding: 2px 4px; color: #94a3b8; cursor: pointer; flex-shrink: 0; line-height: 1; transition: color 0.1s; }

.qb-enrich-toggle:hover { color: #0d9488; }

.qb-enrich-toggle .qb-chevron { font-size: 0.70rem; transition: transform 0.2s; display: inline-block; }

.qb-item.qb-enrich-collapsed .qb-chevron { transform: rotate(-90deg); }

.qb-enrichment { border-top: 1px solid rgba(13,148,136,0.15); padding: 8px 14px 10px; background: rgba(13,148,136,0.04); }

.qb-opt-hint { font-size: 0.67rem; color: #8fa1b3; font-style: italic; margin-left: 3px; }

.qb-stars-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }

.qb-enrich-label { font-size: 0.70rem; color: #6b7a8d; white-space: nowrap; }

.qb-stars { display: flex; gap: 3px; }

.qb-star { font-size: 1.15rem; color: #d1d9e4; cursor: pointer; transition: color 0.1s; line-height: 1; user-select: none; }

.qb-star.qb-star-on { color: #f59e0b; }

.qb-star:hover { color: #f59e0b; }

.qb-comment { font-size: 0.76rem; color: #415873; border: 1px solid #dde4ec !important; border-radius: var(--r-md, 6px)!important; resize: vertical; min-height: 44px; padding: 5px 8px !important; transition: border-color 0.15s !important; }

.qb-comment:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.10) !important; outline: none !important; }

#qb-toggle-all { font-size: 0.72rem; color: #6b7a8d; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }

#qb-toggle-all:hover { color: #0d9488; }

/* ── Bénéfices qualitatifs — vue lecture (tabs/qualitative_benefits.html.twig) ── */

.qbr-list { padding-bottom: 8px; }

.qbr-category-header {    font-size: 0.67rem; font-weight: 700; color: #0d9488;    text-transform: uppercase; letter-spacing: 0.08em;    padding: 10px 2px 5px; border-bottom: 1px solid #e6f7f5;    margin-bottom: 5px;}

.qbr-category-header:first-child { padding-top: 0; }

.qbr-item {    border-left: 2px solid #e2e8f0;    padding: 6px 10px; margin-bottom: 4px;    transition: border-color 0.12s;}

.qbr-item-enriched { border-left-color: #0d9488; }

.qbr-item-main { display: flex; align-items: center; gap: 8px; }

.qbr-check-icon { color: #0d9488; font-size: 0.80rem; flex-shrink: 0; }

.qbr-label { font-size: 0.82rem; color: #415873; flex: 1; }

.qbr-stars { font-size: 0.78rem; color: #f59e0b; letter-spacing: 1px; }

.qbr-comment { font-size: 0.75rem; color: #6b7a8d; margin-top: 3px; padding-left: 22px; font-style: italic; }

/* ── Navigation onglets projet : voir règles .prj-tabs plus haut ── */

/* ══════════════════════════════════════════════════════════════════   MODULE COMMUNAUTÉ — classes com-*   ══════════════════════════════════════════════════════════════════ *//* ── Page layout ─────────────────────────────────────────────────── *//* ── Variables communauté ──────────────────────────────────────── */

/* ── Page wrapper ────────────────────────────────────────────────── *//* ── Variables communauté ──────────────────────────────────────── */

/* ── Page wrapper ────────────────────────────────────────────────── */

.com-page { padding-top: 0; background: var(--com-bg-page); min-height: 100vh; }

/* ── Team chip (étape 4 2026-06-01) — composant signature Communauté ─────
   Nom équipe + avatars empilés + count posts dans une chip pill bg gris.
   Popover Bootstrap au hover liste les membres complets. */
.com-team-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 12px; min-height: 32px;
    background: #f1f5f9;
    border-radius: var(--r-full, 999px);
    cursor: default;
    transition: background 0.15s;
}
.com-team-chip:hover { background: #e6f7f5; }
.com-team-chip-name { font-size: 0.82rem; font-weight: 500; color: #2D3E50; white-space: nowrap; }
.com-team-chip-avatars { display: inline-flex; align-items: center; }
.com-team-chip-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    margin-left: -6px;
    border: 2px solid #f1f5f9;
    object-fit: cover;
    background: #fff;
}
.com-team-chip:hover .com-team-chip-avatar { border-color: #e6f7f5; }
.com-team-chip-avatars > :first-child { margin-left: 4px; }
.com-team-chip-more {
    width: 22px; height: 22px; border-radius: 50%;
    margin-left: -6px;
    background: #94a3b8; color: #fff;
    font-size: 0.62rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #f1f5f9;
}
.com-team-chip:hover .com-team-chip-more { border-color: #e6f7f5; }
.com-team-chip-count {
    font-size: 0.75rem; color: #64748b;
    margin-left: 4px;
    display: inline-flex; align-items: center;
}

/* Popover contenu — liste des membres */
.com-team-popover-header {
    font-size: 0.75rem; font-weight: 600; color: #2D3E50;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 4px;
}
.com-team-popover-list {
    list-style: none; padding: 0; margin: 0;
    max-height: 260px; overflow-y: auto;
}
.com-team-popover-list li {
    font-size: 0.78rem; color: #415873;
    padding: 3px 0;
}

/* ── Variables communauté (alignées sur ctx-*) ───────────────────── */:root {    --com-teal:       #0d9488;    --com-teal-light: #e6f7f5;    --com-teal-hover: #f0fafa;    --com-navy:       #2D3E50;    --com-navy-dark:  #1a3347;    --com-mid:        #415873;    --com-muted:      #8fa1b3;    --com-border:     1px solid #e2e8f0;    --com-shadow:     0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);    --com-bg:         #fff;    --com-bg-page:    #f4f6f9;}

/* ── Header navy (identique fin-module-header) ───────────────────── */

.com-page-header {    display: flex; align-items: center; justify-content: space-between;    padding: 0 24px; min-height: 64px;    background: var(--com-navy-dark); color: #fff;    gap: 16px; flex-shrink: 0;}

.com-page-header-left { display: flex; align-items: center; gap: 14px; }

.com-page-header-icon {    width: 36px; height: 36px; border-radius: var(--r-lg, 10px);    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.90);    display: flex; align-items: center; justify-content: center;    font-size: 0.95rem; flex-shrink: 0;}

.com-page-header-title {    font-size: 0.90rem; font-weight: 700; color: #fff;    display: flex; align-items: center; gap: 8px; margin-bottom: 2px;}

.com-page-header-meta { font-size: 0.72rem; color: rgba(255,255,255,0.50); display: flex; align-items: center; gap: 4px; }

.com-meta-sep { color: rgba(255,255,255,0.25); }

.com-scope-chip {    display: inline-flex; align-items: center;    font-size: 0.68rem; font-weight: 600; padding: 2px 9px;    border-radius: 100px; white-space: nowrap;}

.com-scope-team { background: rgba(13,148,136,0.30); color: #5eead4; border: 1px solid rgba(94,234,212,0.25); }

.com-scope-enterprise { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.18); }

.com-btn-new {    background: rgba(255,255,255,0.15); color: #fff;    border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-md, 6px);    font-size: 0.80rem; font-weight: 500; padding: 5px 14px; transition: background 0.15s;}

.com-btn-new:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* ── Switcher ────────────────────────────────────────────────────── */

.com-switcher-bar {    display: flex; align-items: center; padding: 0 20px;    background: var(--com-bg); border-bottom: var(--com-border);    box-shadow: 0 1px 3px rgba(0,0,0,0.05);}

.com-switcher { display: flex; }

.com-switcher-tab {    display: inline-flex; align-items: center; padding: 10px 18px;    font-size: 0.80rem; font-weight: 500; color: var(--com-muted);    text-decoration: none; border-bottom: 2px solid transparent;    transition: color 0.15s, border-color 0.15s; white-space: nowrap;}

.com-switcher-tab:hover { color: var(--com-navy); text-decoration: none; }

.com-switcher-tab.active { color: var(--com-navy); font-weight: 600; border-bottom-color: var(--com-teal); }

.com-badge {    display: inline-flex; align-items: center; justify-content: center;    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;    border-radius: var(--r-sm, 3px); background: var(--com-teal); color: #fff; font-size: 0.63rem; font-weight: 700;}

/* ── Colonnes — !important car Bootstrap no-gutters écrase le padding ── */

.com-columns { min-height: calc(100vh - 170px); }

.com-col-feed  { background: var(--com-bg) !important; padding: 16px !important; border-right: var(--com-border); }

.com-col-right { background: var(--com-bg) !important; padding: 16px !important; overflow-y: auto; }

.com-col-right::-webkit-scrollbar { width: 3px; }

.com-col-right::-webkit-scrollbar-track { background: transparent; }

.com-col-right::-webkit-scrollbar-thumb { background: transparent; }

.com-col-right:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

/* ── Filtres (style ctx-section compact) ─────────────────────────── */

.com-filters {    background: var(--com-bg); border: var(--com-border);    border-radius: var(--r-lg, 10px); box-shadow: var(--com-shadow);    padding: 8px 14px; margin-bottom: 14px;    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;}

.com-filter {    font-size: 0.73rem; font-weight: 500; color: #a0aec0;    padding: 3px 10px; border-radius: var(--r-md, 6px); background: #f1f3f5;    text-decoration: none; border: 1px solid transparent;    transition: color 0.12s, background 0.12s;}

/* Hover : texte teal (au lieu du navy var(--com-navy) qui rendait trop "noir") + bg teal tres clair. */
.com-filter:hover { color: #0d9488; background: #f0fbf9; text-decoration: none; }

.com-filter.active { background: var(--com-teal-light); color: var(--com-teal); border-color: var(--com-teal); font-weight: 600; }

/* ── Post items — style ctx-info-card ───────────────────────────── */

.com-post-item {    background: var(--com-bg); border-radius: var(--r-lg, 10px);    border: var(--com-border); box-shadow: var(--com-shadow);    margin-bottom: 14px; cursor: pointer;    transition: box-shadow 0.15s, border-color 0.15s;    position: relative; overflow: hidden;}

.com-post-item:last-child { margin-bottom: 0; }

.com-post-item:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.10); border-color: #c8d3dd; }

.com-post-item.com-post-selected { border-color: var(--com-teal); box-shadow: 0 2px 8px rgba(13,148,136,0.14); }

.com-post-item.com-post-unread { border-left: 3px solid var(--com-teal); }

.com-post-item.com-post-pinned .com-post-item-header { background: #f0f4ff; }

/* Header de carte — identique ctx-info-card-header */

.com-post-item-header {    display: flex; align-items: center; gap: 12px;    padding: 10px 16px;    border-bottom: 1px solid rgba(45,62,80,0.22);    background: var(--com-bg);}

.com-post-item-author { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }

.com-post-author { font-size: 0.78rem; font-weight: 600; color: var(--com-navy); white-space: nowrap; }

.com-post-date { font-size: 0.70rem; color: var(--com-muted); white-space: nowrap; }

.com-post-pin { color: var(--com-teal); font-size: 0.70rem; }

.com-post-item-badges { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.com-post-type-tag {    display: inline-flex; align-items: center;    font-size: 0.67rem; font-weight: 600; padding: 2px 7px;    border-radius: var(--r-sm, 3px); white-space: nowrap;}

.com-post-type-conversation { background: #eef1f5; color: var(--com-mid); }

.com-post-type-event { background: var(--com-teal-light); color: var(--com-teal); }

.com-post-new-badge { font-size: 0.62rem; font-weight: 700; background: var(--com-teal); color: #fff; border-radius: var(--r-sm, 3px); padding: 2px 5px; }

.com-post-replies { font-size: 0.70rem; color: var(--com-muted); white-space: nowrap; }

/* Boutons action inline — style ctx-action-btn (hover de proximité) */

.com-post-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 4px; }

.com-post-action-btn {    width: 24px; height: 24px;    display: inline-flex; align-items: center; justify-content: center;    border: 1px solid transparent; border-radius: var(--r-md, 6px);    background: transparent; font-size: 0.72rem; cursor: pointer; padding: 0;    color: transparent;    transition: color 0.12s, background 0.12s, border-color 0.12s;}

.com-post-item:hover .com-post-action-btn { color: #b0bec5; background: #fff; border-color: #e5e7eb; }

.com-post-action-btn.com-post-action-active { color: var(--com-teal) !important; }

.com-post-action-pin:hover { background: var(--com-teal-light) !important; border-color: var(--com-teal) !important; color: var(--com-teal) !important; }

.com-post-action-delete:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #ef4444 !important; }

/* Corps de carte — identique ctx-info-card-body */

.com-post-item-body { padding: 12px 16px 14px; }

.com-post-title { font-weight: 600; font-size: 0.87rem; color: var(--com-navy); margin-bottom: 5px; line-height: 1.4; }

.com-post-preview {    font-size: 0.78rem; color: var(--com-muted); line-height: 1.45;    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.com-post-event-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.com-post-event-date { font-size: 0.73rem; color: #415873; font-weight: 500; }

.com-post-attached { font-size: 0.72rem; color: var(--com-muted); margin-top: 4px; }

/* ── Empty state ─────────────────────────────────────────────────── */

.com-empty-state {    text-align: center; padding: 50px 20px; color: var(--com-muted);    background: var(--com-bg); border: var(--com-border);    border-radius: var(--r-sm, 3px); box-shadow: var(--com-shadow);}

.com-empty-state i { font-size: 2rem; margin-bottom: 12px; display: block; color: #c8d3dd; }

.com-empty-state p { font-size: 0.83rem; line-height: 1.6; }

/* ── Panneaux droite — style ctx-section ─────────────────────────── */

.com-panel {    background: var(--com-bg); border: var(--com-border);    border-radius: var(--r-lg, 10px); box-shadow: var(--com-shadow);    margin-bottom: 14px; overflow: hidden;}

.com-panel:last-child { margin-bottom: 0; }

.com-panel-title {    display: flex; align-items: center; gap: 8px;    padding: 10px 16px;    border-bottom: 1px solid rgba(45,62,80,0.35);    font-size: 0.70rem; font-weight: 700; letter-spacing: 0.07em;    text-transform: uppercase; color: var(--com-mid);    background: var(--com-bg);}

.com-panel-title i { color: var(--com-teal); font-size: 0.80rem; width: 16px; }

.com-panel-count { background: var(--com-teal-light); color: var(--com-teal); border-radius: var(--r-sm, 3px); font-size: 0.63rem; font-weight: 600; padding: 1px 6px; min-width: 18px; text-align: center; }

/* ── Sondages ────────────────────────────────────────────────────── */

.com-poll-card { padding: 10px 16px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid #f3f4f6; }

.com-poll-card:last-child { border-bottom: none; }

.com-poll-card:hover { background: var(--com-teal-hover); }

.com-poll-question { font-size: 0.80rem; font-weight: 500; color: var(--com-navy); margin-bottom: 8px; }

.com-poll-option { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

.com-poll-option-label { font-size: 0.72rem; color: var(--com-mid); width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }

.com-poll-bar-wrap { flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }

.com-poll-bar { height: 100%; background: var(--com-teal); border-radius: 2px; transition: width 0.3s; }

.com-poll-pct { font-size: 0.68rem; color: var(--com-muted); width: 30px; text-align: right; flex-shrink: 0; }

.com-poll-meta { font-size: 0.68rem; color: var(--com-muted); margin-top: 5px; }

/* ── Documents ───────────────────────────────────────────────────── */

.com-doc-card { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #f3f4f6; transition: background 0.12s; }

.com-doc-card:last-child { border-bottom: none; }

.com-doc-card:hover { background: #f9fafb; }

.com-doc-icon { color: var(--com-muted); font-size: 0.92rem; flex-shrink: 0; }

.com-doc-info { flex: 1; min-width: 0; }

.com-doc-name { font-size: 0.78rem; font-weight: 500; color: var(--com-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.com-doc-meta { font-size: 0.68rem; color: var(--com-muted); }

.com-doc-fav { color: #c8d3dd; background: none; border: none; padding: 2px 4px; font-size: 0.85rem; flex-shrink: 0; cursor: pointer; }

.com-doc-fav.active, .com-doc-fav:hover { color: var(--com-teal); }

/* ── Membres ─────────────────────────────────────────────────────── */

.com-members-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; }

.com-member { display: inline-block; transition: transform 0.12s; }

.com-member:hover { transform: scale(1.1); }

/* ── Drawer ──────────────────────────────────────────────────────── */

.com-drawer-loading { color: var(--com-muted); }

.com-drawer-title { font-size: 0.88rem; font-weight: 600; color: #fff; }

#communityDrawer.com-drawer-fullscreen { left: 65px; width: calc(100% - 65px); }

/* Scrollbar du drawer Communauté — fine et masquée au repos, visible au hover */
#communityDrawer #drawerBody::-webkit-scrollbar { width: 3px; background: transparent; }
#communityDrawer #drawerBody::-webkit-scrollbar-track { background: transparent; border: none; }
#communityDrawer #drawerBody::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.25s; }
#communityDrawer #drawerBody:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
#communityDrawer #drawerBody::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
#communityDrawer #drawerBody { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#communityDrawer #drawerBody:hover { scrollbar-color: #c4c9d0 transparent; }

/* ── Thread ──────────────────────────────────────────────────────── */

.com-thread { display: flex; flex-direction: column; height: 100%; }

.com-thread-header { padding: 20px 20px 16px; border-bottom: var(--com-border); }

.com-thread-author-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.com-thread-author-info { flex: 1; min-width: 0; }

.com-thread-author-name { font-size: 0.85rem; font-weight: 600; color: var(--com-navy); }

.com-thread-date { font-size: 0.74rem; color: var(--com-muted); }

.com-thread-pin-badge { font-size: 0.68rem; font-weight: 600; color: var(--com-teal); background: var(--com-teal-light); border-radius: var(--r-sm, 3px); padding: 2px 6px; }
.com-thread-hidden-badge { font-size: 0.68rem; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: var(--r-sm, 3px); padding: 2px 6px; }

.com-thread-title { font-size: 0.95rem; font-weight: 600; color: var(--com-navy); margin: 0 0 8px; line-height: 1.4; }

.com-thread-event-date {    display: inline-flex; align-items: center; gap: 6px;    background: var(--com-teal-light); color: var(--com-teal);    border-radius: var(--r-md, 6px); padding: 4px 10px; font-size: 0.80rem; margin-bottom: 10px;}

.com-thread-body { font-size: 0.85rem; color: var(--com-mid); line-height: 1.6; white-space: pre-wrap; }

.com-thread-section { padding: 12px 20px; border-bottom: var(--com-border); }

.com-thread-section-title {    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;    letter-spacing: 0.07em; color: var(--com-muted); margin-bottom: 10px;}

.com-poll-inline { margin-bottom: 12px; }

.com-poll-inline:last-child { margin-bottom: 0; }

.com-poll-vote-form { display: flex; flex-direction: column; gap: 6px; }

.com-poll-vote-option {    display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--com-mid);    padding: 6px 10px; border: var(--com-border); border-radius: var(--r-md, 6px);    cursor: pointer; margin: 0; font-weight: normal;    transition: background 0.12s, border-color 0.12s;}

.com-poll-vote-option:hover { background: var(--com-teal-light); border-color: var(--com-teal); color: var(--com-navy); }

.com-poll-voters { margin-top: 2px; padding-left: 4px; }

.com-poll-results { padding: 0; }

.com-add-doc-btn { font-size: 0.78rem; color: var(--com-muted); }

.com-add-doc-btn:hover { color: var(--com-teal); border-color: var(--com-teal); }

.com-doc-upload-form { background: var(--com-bg); border: var(--com-border); border-radius: var(--r-md, 6px); padding: 12px; margin-top: 8px; }

.com-add-poll-btn { font-size: 0.78rem; color: var(--com-muted); margin-top: 10px; }

.com-add-poll-btn:hover { color: var(--com-teal); border-color: var(--com-teal); }

.com-poll-create-form { background: var(--com-bg); border: var(--com-border); border-radius: var(--r-lg, 10px); padding: 12px; margin-top: 8px; }

.com-poll-create-form .form-control-sm { font-size: 0.82rem; }

.com-thread-reactions { display: flex; gap: 6px; padding: 10px 20px; border-bottom: var(--com-border); }

.com-reaction-btn {    display: inline-flex; align-items: center; gap: 4px;    background: #f1f3f5; border: var(--com-border); border-radius: var(--r-md, 6px);    padding: 3px 10px; font-size: 0.85rem; cursor: pointer;    transition: background 0.12s, border-color 0.12s;}

.com-reaction-btn:hover { background: var(--com-teal-light); border-color: var(--com-teal); }

.com-reaction-btn.active { background: var(--com-teal-light); border-color: var(--com-teal); color: var(--com-teal); font-weight: 600; }

.com-reaction-count { font-size: 0.75rem; color: var(--com-muted); }

.com-thread-replies { flex: 1; overflow-y: auto; padding: 8px 0; }

.com-thread-replies-title {    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;    letter-spacing: 0.07em; color: var(--com-muted); padding: 4px 20px 10px;}

.com-reply-item { display: flex; padding: 10px 20px; gap: 10px; border-bottom: 1px solid #f3f4f6; }

.com-reply-item:last-child { border-bottom: none; }

.com-reply-left { flex-shrink: 0; }

.com-reply-body { flex: 1; min-width: 0; }

.com-reply-meta { margin-bottom: 3px; }

.com-reply-author { font-size: 0.80rem; font-weight: 600; color: var(--com-navy); }

.com-reply-date { font-size: 0.70rem; color: var(--com-muted); }

.com-reply-text { font-size: 0.83rem; color: var(--com-mid); line-height: 1.5; }

.com-thread-reply-form { padding: 8px 12px; border-top: var(--com-border); background: var(--com-bg); flex-shrink: 0; }

.com-reply-input-wrap { min-width: 0; }

.com-reply-textarea { font-size: 0.83rem; border: var(--com-border); border-radius: var(--r-md, 6px); resize: none; }

.com-reply-textarea:focus { border-color: var(--com-teal); outline: none; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }

.com-feed-hidden { display: none !important; }

/* == Communauté : boutons d'action header ========================== */

.com-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.com-btn-action {    font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: var(--r-md, 6px);    display: inline-flex; align-items: center; gap: 5px; border: none;    transition: opacity 0.14s, transform 0.1s; cursor: pointer; color: #fff;}

.com-btn-action:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; text-decoration: none; }

.com-btn-conversation { background: #3b82f6; }

.com-btn-event        { background: #10b981; }

.com-btn-poll         { background: #8b5cf6; }

.com-btn-document     { background: #f59e0b; }

/* == Communauté : types post (stripe + tags + item border) ========= */

.com-post-type-stripe {    width: 4px; border-radius: var(--r-lg, 10px) 0 0 var(--r-lg, 10px);    position: absolute; top: 0; left: 0; bottom: 0;}

.com-post-item { position: relative; padding-left: 4px; }

.com-post-type-conversation .com-post-type-stripe { background: #3b82f6; }

.com-post-type-event        .com-post-type-stripe { background: #10b981; }

.com-post-type-poll         .com-post-type-stripe { background: #8b5cf6; }

.com-post-type-document     .com-post-type-stripe { background: #f59e0b; }

.com-post-type-poll    { background: #f5f0ff; color: #7c3aed; }

.com-post-type-document{ background: #fffbeb; color: #b45309; }

.com-post-type-conversation-tag { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

.com-post-type-event-tag        { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

.com-post-type-poll-tag         { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }

.com-post-type-document-tag     { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

/* == Communauté : post item content par type ======================= */

.com-post-ics-link { font-size: 0.70rem; color: var(--com-teal); text-decoration: none; border: 1px solid var(--com-teal); border-radius: var(--r-sm, 3px); padding: 2px 8px; white-space: nowrap; }
.com-post-ics-link:hover { background: var(--com-teal-light); }

.com-post-poll-preview { font-size: 0.78rem; color: var(--com-mid); margin-top: 5px; display: flex; align-items: center; gap: 6px; }

.com-post-poll-votes { font-size: 0.70rem; color: var(--com-muted); background: #f3f4f6; border-radius: var(--r-full, 999px); padding: 2px 7px; }

.com-post-doc-preview { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--com-mid); margin-top: 5px; }

.com-post-doc-size { color: var(--com-muted); }

.com-doc-cat-tag { font-size: 0.65rem; font-weight: 600; background: #fef3c7; color: #92400e; border-radius: var(--r-sm, 3px); padding: 1px 6px; }

/* == Communauté : drawer header type colors ======================== */

.com-thread-type-badge {    display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700;    text-transform: uppercase; letter-spacing: 0.06em;    border-radius: var(--r-sm, 3px); padding: 2px 8px; margin-bottom: 8px;}

.com-post-type-conversation-header { border-top: 3px solid #3b82f6; }

.com-post-type-event-header         { border-top: 3px solid #10b981; }

.com-post-type-poll-header          { border-top: 3px solid #8b5cf6; }

.com-post-type-document-header      { border-top: 3px solid #f59e0b; }

/* == Communauté : fil d'activité (drawer) ========================== */

.com-activity-feed { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.2s; }
.com-activity-feed:hover { scrollbar-color: #c4c9d0 transparent; }

.com-activity-feed::-webkit-scrollbar { width: 3px; background: transparent; }
.com-activity-feed::-webkit-scrollbar-track { background: transparent; }
.com-activity-feed::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; transition: background 0.2s; }
.com-activity-feed:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
.com-activity-feed::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.com-activity-item {    display: flex; gap: 10px; padding: 12px 20px;    border-bottom: 1px solid #f3f4f6;}

.com-activity-item:last-child { border-bottom: none; }

.com-activity-main { background: #fafbfc; }

.com-activity-avatar { flex-shrink: 0; }

.com-activity-body { flex: 1; min-width: 0; }

.com-activity-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

.com-activity-author { font-size: 0.80rem; font-weight: 600; color: var(--com-navy); }

.com-activity-action { font-size: 0.78rem; color: var(--com-muted); }

.com-activity-time   { font-size: 0.70rem; color: var(--com-muted); margin-left: auto; }

.com-activity-content { margin-top: 0; }

.com-activity-event-card { padding: 10px 14px; }

.com-activity-event-date { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; color: #059669; }

.com-activity-doc-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }

.com-activity-doc-icon { font-size: 1.4rem; flex-shrink: 0; }

.com-activity-doc-info { flex: 1; min-width: 0; }

.com-activity-doc-name { font-size: 0.82rem; font-weight: 600; color: var(--com-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.com-activity-doc-meta { font-size: 0.70rem; color: var(--com-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }

.com-activity-compose-poll, .com-activity-compose-doc { padding: 8px 20px; }

.com-activity-docs-section { }

.com-activity-add-btn {    display: inline-flex; align-items: center; gap: 5px;    font-size: 0.75rem; color: var(--com-muted);    background: none; border: 1px dashed #c8d3dd; border-radius: var(--r-md, 6px);    padding: 5px 12px; cursor: pointer; transition: color 0.12s, border-color 0.12s;}

.com-activity-add-btn:hover { color: var(--com-teal); border-color: var(--com-teal); }

/* == Communauté : base documentaire ================================ */

.com-panel-docs { }

.com-doc-search-wrap { padding: 8px 16px 4px; }

.com-doc-filters { padding: 4px 16px 8px; }

.com-doc-cats { display: flex; flex-wrap: wrap; gap: 4px; }

.com-doc-cat, .com-doc-scope {    font-size: 0.68rem; font-weight: 600; cursor: pointer;    border-radius: var(--r-sm, 3px); padding: 3px 9px;    border: 1px solid #e2e8f0; color: var(--com-mid); background: #f9fafb;    transition: background 0.12s, border-color 0.12s, color 0.12s;    display: inline-flex; align-items: center; gap: 3px;}

.com-doc-cat:hover, .com-doc-scope:hover { border-color: var(--com-teal); color: var(--com-teal); background: var(--com-teal-light); }

.com-doc-cat.active, .com-doc-scope.active { background: var(--com-teal); color: #fff; border-color: var(--com-teal); }

.com-doc-library { overflow-y: auto; max-height: 380px; }

.com-doc-library::-webkit-scrollbar { width: 3px; }

.com-doc-library::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 2px; }

.com-doc-lib-item {    display: flex; align-items: center; gap: 10px;    padding: 8px 16px; border-bottom: 1px solid #f3f4f6;    transition: background 0.12s;}

.com-doc-lib-item:last-child { border-bottom: none; }

.com-doc-lib-item:hover { background: #f9fafb; }

.com-doc-lib-icon { font-size: 1.05rem; flex-shrink: 0; color: var(--com-muted); }

.com-doc-lib-info { flex: 1; min-width: 0; }

.com-doc-lib-name {    display: block; font-size: 0.78rem; font-weight: 600; color: var(--com-navy);    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;    text-decoration: none;}

.com-doc-lib-name:hover { color: var(--com-teal); text-decoration: underline; }

.com-doc-lib-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 0.66rem; color: var(--com-muted); margin-top: 2px; }

.com-doc-lib-dl {    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;    display: flex; align-items: center; justify-content: center;    color: var(--com-muted); background: #f1f3f5;    font-size: 0.78rem; text-decoration: none; transition: background 0.12s, color 0.12s;}

.com-doc-lib-dl:hover { background: var(--com-teal-light); color: var(--com-teal); }

.com-doc-scope-badge {    display: inline-flex; align-items: center; gap: 3px;    font-size: 0.62rem; font-weight: 700; border-radius: var(--r-sm, 3px); padding: 1px 5px;}

.com-doc-scope-badge-enterprise { background: #eff6ff; color: #2563eb; }

.com-doc-scope-badge-team       { background: #ecfdf5; color: #059669; }

.com-empty-state-sm {    text-align: center; padding: 20px 16px; color: var(--com-muted);}

.com-empty-state-sm i { font-size: 1.4rem; margin-bottom: 6px; display: block; }

.com-empty-state-sm p { font-size: 0.78rem; margin: 0; }

/* == Communauté : option "non visible manager" ===================== */

.com-manager-hidden-wrap {    background: #fff8f0; border: 1px solid #fde68a; border-radius: var(--r-lg, 10px);    padding: 8px 12px;}

.com-manager-hidden-wrap label { font-size: 0.82rem; font-weight: 500; color: #92400e; cursor: pointer; }

.com-manager-hidden-wrap .fa-eye-slash { color: #b45309; }

.com-manager-hidden-hint { font-size: 0.72rem; color: #a16207; margin-top: 3px; }

/* == Communauté : modal headers colorés ============================ */

.com-modal-header { color: #fff; }

.com-modal-header .close { color: #fff; opacity: 0.8; }

.com-modal-header-conversation { background: #3b82f6; }

.com-modal-header-event        { background: #10b981; }

.com-modal-header-poll         { background: #8b5cf6; }

.com-modal-header-document     { background: #f59e0b; }

.com-btn-submit-conversation { background: #3b82f6; color: #fff; }

.com-btn-submit-conversation:hover { background: #2563eb; color: #fff; }

.com-btn-submit-event { background: #10b981; color: #fff; }

.com-btn-submit-event:hover { background: #059669; color: #fff; }

.com-btn-submit-poll { background: #8b5cf6; color: #fff; }

.com-btn-submit-poll:hover { background: #7c3aed; color: #fff; }

.com-btn-submit-document { background: #f59e0b; color: #fff; }

.com-btn-submit-document:hover { background: #d97706; color: #fff; }

/* == Communauté : barre de rédaction bas du drawer ================= */

.com-compose-bar { display: flex; gap: 8px; align-items: flex-start; padding: 0; }
.com-compose-bar .com-activity-avatar { flex-shrink: 0; margin-top: 2px; }
.com-compose-inner { flex: 1; min-width: 0; }
.com-compose-inner .com-reply-textarea { width: 100%; padding: 6px 10px; line-height: 1.4; }
.com-compose-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.com-compose-tool-btn {    background: none; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);    color: var(--com-muted); font-size: 0.85rem; padding: 4px 9px; cursor: pointer;    transition: background 0.12s, border-color 0.12s, color 0.12s;}

.com-compose-tool-btn:hover { background: var(--com-teal-light); border-color: var(--com-teal); color: var(--com-teal); }

.com-poll-create-form, .com-doc-upload-form {    margin: 0 16px 8px; padding: 12px; border-radius: var(--r-lg, 10px);}

/* == Communauté : encadré source (contenu original du post) ======== */

.com-source-card { margin: 0; padding: 18px 20px 16px; border-bottom: 2px solid transparent; max-height: 42vh; display: flex; flex-direction: column; overflow: hidden; }

.com-source-com-post-type-conversation { background: #eff6ff; border-bottom-color: #3b82f6; }

.com-source-com-post-type-event        { background: #ecfdf5; border-bottom-color: #10b981; }

.com-source-com-post-type-poll         { background: #f5f3ff; border-bottom-color: #8b5cf6; }

.com-source-com-post-type-document     { background: #fffbeb; border-bottom-color: #f59e0b; }

.com-source-meta { display: flex; align-items: center; margin-bottom: 10px; }

.com-source-type-badge {    display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700;    text-transform: uppercase; letter-spacing: 0.06em;    border-radius: var(--r-sm, 3px); padding: 2px 8px;}

.com-source-title {    font-size: 1.02rem; font-weight: 700; color: var(--com-navy);    margin: 0 0 10px; line-height: 1.35;}

.com-source-author-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

.com-source-author-name { font-size: 0.82rem; font-weight: 600; color: var(--com-navy); display: block; }

.com-source-date { font-size: 0.72rem; color: var(--com-muted); }

.com-source-body { font-size: 0.86rem; color: var(--com-mid); line-height: 1.65; background: rgba(255,255,255,0.65); border-radius: var(--r-lg, 10px); padding: 10px 14px; flex: 1 1 auto; min-height: 0; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #b8c4d0 transparent; }
.com-source-body::-webkit-scrollbar { width: 4px; }
.com-source-body::-webkit-scrollbar-track { background: transparent; }
.com-source-body::-webkit-scrollbar-thumb { background: #b8c4d0; border-radius: 4px; }

.com-source-event-date {    display: inline-flex; align-items: center; gap: 6px;    font-size: 0.88rem; font-weight: 600; color: #059669;    margin-bottom: 8px;}

.com-source-poll { margin-top: 6px; }

.com-source-doc-card {    display: flex; align-items: center; gap: 14px;    background: rgba(255,255,255,0.70); border-radius: var(--r-lg, 10px);    padding: 12px 14px; margin-top: 6px;}

.com-source-doc-icon { flex-shrink: 0; }

.com-source-doc-info { flex: 1; min-width: 0; }

.com-source-doc-name { font-size: 0.88rem; font-weight: 600; color: var(--com-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.com-source-doc-meta { font-size: 0.72rem; color: var(--com-muted); margin-top: 2px; display: flex; align-items: center; gap: 5px; }

/* == Communauté : séparateur Activité ============================== */

.com-activity-separator {    display: flex; align-items: center; gap: 10px;    padding: 8px 20px; background: #f8f9fa;    border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;    flex-shrink: 0;}

.com-activity-separator-label {    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;    letter-spacing: 0.08em; color: var(--com-muted);    display: flex; align-items: center; gap: 6px;}

.com-activity-separator-label i { color: var(--com-teal); }

.com-activity-count {    font-size: 0.68rem; font-weight: 600; background: #e9ecef;    color: var(--com-mid); border-radius: var(--r-full, 999px); padding: 1px 7px;}

/* == Communauté : picker émoji (position:fixed) ==================== */

.com-reaction-picker {    position: fixed; z-index: 1060;    background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px);    padding: 6px 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);    display: flex; align-items: center; gap: 4px; white-space: nowrap;}

.com-reaction-pick-btn {    font-size: 1.35rem; cursor: pointer; padding: 3px 5px; border-radius: var(--r-md, 6px);    transition: transform 0.1s, background 0.1s;    background: none; border: none; line-height: 1;}

.com-reaction-pick-btn:hover { transform: scale(1.25); background: #f1f3f5; }

/* == Communauté : résumé réactions (chips) ========================= */

.com-reactions-summary {    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;    margin-top: 10px;}

.com-reaction-chip {    display: inline-flex; align-items: center; gap: 3px;    font-size: 0.85rem; cursor: pointer;    background: #f1f3f5; border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px);    padding: 2px 8px; transition: background 0.12s, border-color 0.12s;    user-select: none;}

.com-reaction-chip:hover { background: var(--com-teal-light); border-color: var(--com-teal); }

.com-reaction-chip.active { background: var(--com-teal-light); border-color: var(--com-teal); font-weight: 600; }

.com-reaction-chip-count { font-size: 0.72rem; color: var(--com-muted); }

.com-reaction-chip.active .com-reaction-chip-count { color: var(--com-teal); }

/* ── Reactions dans la carte du fil (point 1, 2026-09-26) ─────────────────────────────────
   Le fil n'affichait que le nombre de reponses et la pastille "document joint". Seuls les
   emojis REELLEMENT poses sont rendus ; le conteneur existe toujours (meme vide) pour que la
   synchro live n'ait qu'a en remplir le contenu. Non cliquable ici : on reagit dans le drawer. */
.com-post-reactions { display: inline-flex; align-items: center; gap: 4px; }
.com-post-reactions:empty { display: none; }
.com-post-reaction {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.8rem; line-height: 1;
    padding: 2px 6px;
    border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px);
    background: #fff;
}
/* Meme repere que dans le drawer : la reaction de l'utilisateur connecte est cerclee en navy. */
.com-post-reaction.com-post-reaction-mine { border-color: #4a7fd4; background: #eef3fc; }
.com-post-reaction-count { font-size: 0.68rem; font-weight: 600; color: #5a6a85; }
.com-post-reaction.com-post-reaction-mine .com-post-reaction-count { color: #2d5aa0; }

.com-reaction-add-btn {    display: inline-flex; align-items: center;    font-size: 1rem; color: #c8d3dd; cursor: pointer;    padding: 2px 6px; border-radius: var(--r-md, 6px); border: 1px solid transparent;    transition: color 0.12s, border-color 0.12s, background 0.12s;}

.com-reaction-add-btn:hover { color: var(--com-teal); border-color: var(--com-teal); background: var(--com-teal-light); }

/* == Communauté : toolbar hover sur les réponses =================== */

.com-activity-item:hover /* == Communauté : panel docs — lien "Voir tout" ==================== */

.com-panel-see-all,
a.com-panel-see-all { height: 24px; font-size: 0.65rem; font-weight: 500; color: var(--com-teal) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e5e7eb; border-radius: var(--r-lg, 10px); padding: 0 9px; background: #fff; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.com-panel-see-all i { color: inherit !important; width: auto !important; font-size: 0.65rem !important; }

.com-panel-see-all:hover,
a.com-panel-see-all:hover { background: var(--com-teal-light); color: var(--com-teal) !important; border-color: var(--com-teal); text-decoration: none !important; }

.com-docs-see-all-link {    font-size: 0.74rem; font-weight: 600; color: var(--com-teal); text-decoration: none;    display: inline-flex; align-items: center; gap: 5px;}

.com-docs-see-all-link:hover { text-decoration: underline; }

/* == Communauté : bouton retour header ============================= */

.com-btn-back {    font-size: 0.78rem; font-weight: 600; padding: 6px 14px;    border-radius: var(--r-md, 6px); color: rgba(255,255,255,0.85);    border: 1px solid rgba(255,255,255,0.30); background: rgba(255,255,255,0.12);    display: inline-flex; align-items: center; gap: 5px;    transition: background 0.14s;}

.com-btn-back:hover { background: rgba(255,255,255,0.22); color: #fff; text-decoration: none; }

/* == Base documentaire : page dédiée =============================== */

.com-docs-page-body { padding: 20px 24px; }

.com-docs-toolbar { margin-bottom: 20px; }

.com-docs-search-wrap {    position: relative; margin-bottom: 12px;}

.com-docs-search-wrap .form-control {    padding-left: 34px; font-size: 0.86rem;    border-radius: var(--r-md, 6px); border: var(--com-border);}

.com-docs-search-icon {    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);    color: var(--com-muted); font-size: 0.80rem; pointer-events: none;}

.com-docs-filters-wrap { display: flex; flex-direction: column; gap: 4px; }

.com-docs-grid { display: flex; flex-direction: column; gap: 0; }

.com-docs-grid-item {    display: flex; align-items: center; gap: 14px;    padding: 12px 0; border-bottom: 1px solid #f3f4f6;    transition: background 0.12s;}

.com-docs-grid-item:last-child { border-bottom: none; }

.com-docs-grid-item:hover { background: #fafbfc; margin: 0 -8px; padding: 12px 8px; }

.com-docs-grid-icon { font-size: 1.4rem; flex-shrink: 0; width: 28px; text-align: center; }

.com-docs-grid-info { flex: 1; min-width: 0; }

.com-docs-grid-name {    display: block; font-size: 0.88rem; font-weight: 600; color: var(--com-navy);    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.com-docs-grid-name:hover { color: var(--com-teal); text-decoration: underline; }

.com-docs-grid-meta {    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;    font-size: 0.70rem; color: var(--com-muted); margin-top: 3px;}

.com-docs-grid-dl {    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;    display: flex; align-items: center; justify-content: center;    color: var(--com-muted); background: #f1f3f5;    font-size: 0.82rem; text-decoration: none; transition: background 0.12s, color 0.12s;}

.com-docs-grid-dl:hover { background: var(--com-teal-light); color: var(--com-teal); }

.com-docs-empty-search { text-align: center; padding: 40px; color: var(--com-muted); }

.com-docs-empty-search i { font-size: 2rem; margin-bottom: 12px; display: block; color: #c8d3dd; }

.com-docs-empty-search p { font-size: 0.84rem; }

/* == Communauté : bouton Base documentaire header ================== */

.com-btn-docs-lib {    background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.90);    border: 1px solid rgba(255,255,255,0.30);}

.com-btn-docs-lib:hover { background: rgba(255,255,255,0.25); color: #fff; text-decoration: none; }

/* == Communauté : palette corrigée — alignement design system ======   Ancien choix (bleu/vert/violet/orange) remplacé par dérivées   navy/teal conformes à la charte : 3 couleurs, même famille.   Ce bloc surcharge les valeurs précédentes.   ================================================================= *//* Couleurs de référence :   Conversation : teal      #0d9488  bg #e6f7f5   Événement    : teal-dark #0f766e  bg #e0f4f1   Sondage      : navy      #2D3E50  bg #edf0f3   Document     : slate     #475569  bg #f1f4f7   *//* Boutons action header */

.com-btn-conversation { background: #0d9488 !important; }

.com-btn-event        { background: #0f766e !important; }

.com-btn-poll         { background: #2D3E50 !important; }

.com-btn-document     { background: #475569 !important; }

/* Stripes latérales post-item */

.com-post-type-conversation .com-post-type-stripe { background: #0d9488 !important; }

.com-post-type-event        .com-post-type-stripe { background: #0f766e !important; }

.com-post-type-poll         .com-post-type-stripe { background: #2D3E50 !important; }

.com-post-type-document     .com-post-type-stripe { background: #475569 !important; }

/* Fond du post-item par type */

.com-post-type-conversation { background: #f0fafa; color: var(--com-navy); }

.com-post-type-event        { background: #f0f5f4; color: var(--com-navy); }

.com-post-type-poll         { background: #edf0f3; color: var(--com-navy); }

.com-post-type-document     { background: #f1f4f7; color: var(--com-navy); }

/* Badges de type (tags colorés) */

.com-post-type-conversation-tag { background: #e6f7f5 !important; color: #0d9488 !important; border-color: #99d0cb !important; }

.com-post-type-event-tag        { background: #e0f4f1 !important; color: #0f766e !important; border-color: #8ec9c2 !important; }

.com-post-type-poll-tag         { background: #edf0f3 !important; color: #2D3E50 !important; border-color: #b8c5d0 !important; }

.com-post-type-document-tag     { background: #f1f4f7 !important; color: #475569 !important; border-color: #c4cdd8 !important; }

/* Bordure supérieure header drawer par type */

.com-post-type-conversation-header { border-top-color: #0d9488 !important; }

.com-post-type-event-header         { border-top-color: #0f766e !important; }

.com-post-type-poll-header          { border-top-color: #2D3E50 !important; }

.com-post-type-document-header      { border-top-color: #475569 !important; }

/* Encadré source drawer */

.com-source-com-post-type-conversation { background: #f0fafa !important; border-bottom-color: #0d9488 !important; }

.com-source-com-post-type-event        { background: #f0f5f4 !important; border-bottom-color: #0f766e !important; }

.com-source-com-post-type-poll         { background: #edf0f3 !important; border-bottom-color: #2D3E50 !important; }

.com-source-com-post-type-document     { background: #f1f4f7 !important; border-bottom-color: #475569 !important; }

.com-source-event-date { color: #0f766e !important; }

/* Modal headers */

.com-modal-header-conversation { background: #0d9488 !important; }

.com-modal-header-event        { background: #0f766e !important; }

.com-modal-header-poll         { background: #2D3E50 !important; }

.com-modal-header-document     { background: #475569 !important; }

/* Boutons de soumission modals */

.com-btn-submit-conversation { background: #0d9488 !important; }

.com-btn-submit-conversation:hover { background: #0b7c72 !important; }

.com-btn-submit-event { background: #0f766e !important; }

.com-btn-submit-event:hover { background: #0a5f59 !important; }

.com-btn-submit-poll { background: #2D3E50 !important; }

.com-btn-submit-poll:hover { background: #243343 !important; }

.com-btn-submit-document { background: #475569 !important; }

.com-btn-submit-document:hover { background: #374151 !important; }

/* == Communauté : barre d'actions ================================== */

.com-action-bar {    display: flex; align-items: center; justify-content: space-between;    padding: 10px 20px; background: #fff;    border-bottom: 1px solid #e9ecef;    flex-wrap: wrap; gap: 8px;}

.com-action-bar-create { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.com-action-bar-docs {    display: inline-flex; align-items: center; gap: 5px;    font-size: 0.78rem; font-weight: 600; color: var(--com-muted);    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);    padding: 5px 12px; text-decoration: none; background: #f9fafb;    transition: color 0.12s, border-color 0.12s, background 0.12s;}

.com-action-bar-docs:hover { color: var(--com-teal); border-color: var(--com-teal); background: var(--com-teal-light); text-decoration: none; }

/* == Base documentaire : lignes cliquables ========================= */

.com-docs-grid-item { cursor: pointer; }

.com-docs-grid-item.com-doc-selected { background: var(--com-teal-light); margin: 0 -8px; padding: 12px 8px; }

/* == Communauté : Option A — palette 4 types muted/earthy =========   Conversation : bleu-acier sobre  #4b7bb5  bg #eef2f8   Événement    : vert-sauge        #4d8c6f  bg #eef4f1   Sondage      : mauve-gris        #6b5fa5  bg #f0eef7   Document     : amber-terracotta  #a07840  bg #f7f0e8   Surcharge le bloc DS monochrome précédent.   ================================================================= *//* Boutons action bar */

.com-btn-conversation { background: #4b7bb5 !important; }

.com-btn-event        { background: #4d8c6f !important; }

.com-btn-poll         { background: #6b5fa5 !important; }

.com-btn-document     { background: #a07840 !important; }

/* Stripes latérales post-item */

.com-post-type-conversation .com-post-type-stripe { background: #4b7bb5 !important; }

.com-post-type-event        .com-post-type-stripe { background: #4d8c6f !important; }

.com-post-type-poll         .com-post-type-stripe { background: #6b5fa5 !important; }

.com-post-type-document     .com-post-type-stripe { background: #a07840 !important; }

/* Fond du post-item par type */

.com-post-type-conversation { background: #eef2f8 !important; }

.com-post-type-event        { background: #eef4f1 !important; }

.com-post-type-poll         { background: #f0eef7 !important; }

.com-post-type-document     { background: #f7f0e8 !important; }

/* Badges de type */

.com-post-type-conversation-tag { background: #eef2f8 !important; color: #4b7bb5 !important; border-color: #b0c4de !important; }

.com-post-type-event-tag        { background: #eef4f1 !important; color: #4d8c6f !important; border-color: #a8cbb9 !important; }

.com-post-type-poll-tag         { background: #f0eef7 !important; color: #6b5fa5 !important; border-color: #bdb5d8 !important; }

.com-post-type-document-tag     { background: #f7f0e8 !important; color: #a07840 !important; border-color: #d4bc94 !important; }

/* Bordure supérieure header drawer par type */

.com-post-type-conversation-header { border-top-color: #4b7bb5 !important; }

.com-post-type-event-header        { border-top-color: #4d8c6f !important; }

.com-post-type-poll-header         { border-top-color: #6b5fa5 !important; }

.com-post-type-document-header     { border-top-color: #a07840 !important; }

/* Encadré source drawer */

.com-source-com-post-type-conversation { background: #eef2f8 !important; border-bottom-color: #4b7bb5 !important; }

.com-source-com-post-type-event        { background: #eef4f1 !important; border-bottom-color: #4d8c6f !important; }

.com-source-com-post-type-poll         { background: #f0eef7 !important; border-bottom-color: #6b5fa5 !important; }

.com-source-com-post-type-document     { background: #f7f0e8 !important; border-bottom-color: #a07840 !important; }

.com-source-event-date { color: #4d8c6f !important; }

/* Modal headers */

.com-modal-header-conversation { background: #4b7bb5 !important; }

.com-modal-header-event        { background: #4d8c6f !important; }

.com-modal-header-poll         { background: #6b5fa5 !important; }

.com-modal-header-document     { background: #a07840 !important; }

/* Boutons de soumission modals */

.com-btn-submit-conversation       { background: #4b7bb5 !important; }

.com-btn-submit-conversation:hover { background: #3d6699 !important; }

.com-btn-submit-event              { background: #4d8c6f !important; }

.com-btn-submit-event:hover        { background: #3d7059 !important; }

.com-btn-submit-poll               { background: #6b5fa5 !important; }

.com-btn-submit-poll:hover         { background: #574d8a !important; }

.com-btn-submit-document           { background: #a07840 !important; }

.com-btn-submit-document:hover     { background: #866535 !important; }

/* == Communauté : ancrage type-badge à droite ======================   Le type-tag est maintenant dernier dans .com-post-item-badges.   justify-content: flex-end garantit l'ancrage bord droit.   .com-post-actions a un min-width fixe pour stabiliser la position   du type-tag même quand pin/poubelle sont présents.   ================================================================= */

.com-post-item-badges { justify-content: flex-end !important; }

.com-post-actions { min-width: 56px; justify-content: flex-end; }

/* == Communauté : type-badge en haut à droite, meta en dessous =====   Remplace le layout flex horizontal badges+actions par une colonne   droite (com-post-item-right) : badge en haut, bottom-row en bas.   ================================================================= */

.com-post-item-header { align-items: flex-start !important; }

.com-post-item-author { padding-top: 1px; }

.com-post-item-right {    display: flex;    flex-direction: column;    align-items: flex-end;    gap: 5px;    flex-shrink: 0;    min-width: 0;}

.com-post-item-right-bottom {    display: flex;    align-items: center;    gap: 4px;    min-height: 22px;}

/* Annule les surcharges du bloc précédent qui ne s'appliquent plus */

.com-post-item-badges { justify-content: initial !important; }

.com-post-actions { min-width: 0 !important; }

/* == Base documentaire : design system (sp-item-row style) =========   Inspiré de l'onglet Documents des Projets.   Carte blanche, border-radius 2px, micro-ombre, actions au hover.   ================================================================= *//* Corps de page */

.com-docs-page-body { padding: 20px 24px; max-width: 960px; }

/* Barre de filtres — card légère */

.com-docs-toolbar {    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;    background: #fff;    border: 1px solid #e2e8f0;    border-radius: var(--r-lg, 10px);    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);    padding: 12px 16px;    margin-bottom: 12px;}

.com-docs-search-wrap {    position: relative; flex-shrink: 0; width: 220px;}

.com-docs-search-icon {    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);    font-size: 0.72rem; color: #8fa1b3; pointer-events: none;}

.com-docs-toolbar input {    width: 100%; padding: 5px 10px 5px 28px;    font-size: 0.78rem; color: #2D3E50;    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);    background: #f9fafb; outline: none;    transition: border-color 0.12s, background 0.12s;}

.com-docs-toolbar input:focus { border-color: #0d9488; background: #fff; }

.com-docs-filters-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1; }

/* Section liste — card DS */

.com-docs-section {    background: #fff;    border: 1px solid #e2e8f0;    border-radius: var(--r-lg, 10px);    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);    overflow: hidden;}

/* Ligne de document */

.com-docs-row {    display: flex; align-items: center; gap: 12px;    padding: 9px 16px;    border-bottom: 1px solid #f3f4f6;    cursor: pointer; position: relative;    transition: background 0.10s;}

.com-docs-row:last-child { border-bottom: none; }

.com-docs-row:hover { background: #fafafa; }

.com-docs-row.com-doc-selected { background: #e6f7f5; }

/* Icône de fichier — nue, sans conteneur */

.com-docs-row-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 1rem; }

/* Corps de ligne */

.com-docs-row-body { flex: 1; min-width: 0; }

.com-docs-row-name {    font-size: 0.79rem; font-weight: 500; color: #2D3E50;    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.com-docs-row-meta {    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;    font-size: 0.68rem; color: #8fa1b3; margin-top: 2px;}

.com-docs-row-sep { color: #c4cdd8; }

/* Actions — invisibles par défaut, apparaissent au hover */

.com-docs-row-actions {    display: flex; align-items: center; gap: 4px;    flex-shrink: 0; opacity: 0;    transition: opacity 0.12s;}

.com-docs-row:hover .com-docs-row-actions { opacity: 1; }

.com-docs-row.com-doc-selected .com-docs-row-actions { opacity: 1; }

.com-docs-row-btn {    display: inline-flex; align-items: center; justify-content: center;    width: 26px; height: 26px; border-radius: 2px;    border: 1px solid #e5e7eb; background: #fff;    color: #8fa1b3; font-size: 0.72rem; cursor: pointer;    text-decoration: none; transition: color 0.12s, border-color 0.12s, background 0.12s;}

.com-docs-row-btn:hover { color: #0d9488; border-color: #0d9488; background: #e6f7f5; }

/* Empty states dans la section */

.com-docs-section .sp-empty-state { padding: 40px 20px; }

.com-docs-empty-search { padding: 32px 20px; text-align: center; }

.com-docs-empty-search .sp-empty-state-icon,.com-docs-empty-search .sp-empty-state-title,.com-docs-empty-search .sp-empty-state-hint { display: block; }

/* == Communauté : scroll interne colonnes + items compacts ==========   ================================================================= *//* Colonnes — hauteur fixe pour scroll interne (header 64 + action 52 + switcher 42 = 158px) */

.com-columns {    height: calc(100vh - 160px) !important;    min-height: 0 !important;    overflow: hidden;    align-items: stretch;}

.com-col-feed {    display: flex !important;    flex-direction: column;    overflow: hidden !important;    padding-bottom: 0 !important;}

.com-filters { flex-shrink: 0; }

.com-feed-list {    flex: 1;    min-height: 0;    overflow-y: auto;    overflow-x: hidden;    padding: 12px 16px;}

/* Retire le padding direct de la col qui est maintenant sur le feed-list */

.com-col-feed { padding: 0 !important; }

/* Scrollbar DS — feed gauche */

.com-feed-list::-webkit-scrollbar { width: 3px; background: transparent; }

.com-feed-list::-webkit-scrollbar-track { background: transparent; border: none; }

.com-feed-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }

.com-feed-list.ctx-scrolling::-webkit-scrollbar-thumb,.com-feed-list.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }

.com-feed-list::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

.com-feed-list { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.com-feed-list.ctx-scrolling,.com-feed-list.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

/* Scrollbar DS — panneau droit (remplace la version basique) */

.com-col-right::-webkit-scrollbar { width: 3px !important; background: transparent !important; }

.com-col-right::-webkit-scrollbar-track { background: transparent !important; border: none !important; }

.com-col-right::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; transition: background 0.25s; }

.com-col-right.ctx-scrolling::-webkit-scrollbar-thumb,.com-col-right.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0 !important; }

.com-col-right::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

.com-col-right { scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; }

.com-col-right.ctx-scrolling,.com-col-right.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent !important; }

/* Post items — plus compacts */

.com-post-item { margin-bottom: 8px !important; }

.com-post-item-header { padding: 7px 12px !important; gap: 8px !important; }

.com-post-item-body { padding: 6px 12px 8px !important; }

.com-post-title { font-size: 0.82rem !important; margin-bottom: 2px !important; }

.com-post-preview { font-size: 0.73rem !important; -webkit-line-clamp: 1 !important; }

.com-post-author { font-size: 0.75rem !important; }

.com-post-date { font-size: 0.67rem !important; }

.com-post-type-tag { font-size: 0.64rem !important; padding: 1px 6px !important; }

.com-post-new-badge { font-size: 0.60rem !important; padding: 1px 5px !important; }

.com-post-replies { font-size: 0.67rem !important; }

/* Badge "Nouveau" — alignement dans la ligne haute */

.com-post-item-right-top { display: flex; align-items: center; gap: 4px; }

/* Retire padding-top 1px sur author (ajouté pour align-items: flex-start) */

.com-post-item-author { padding-top: 0 !important; align-items: center; }

/* == Base documentaire : fond blanc ================================ */

#main-content-community-docs { background: #fff !important; }

/* == Communauté : fix hauteur colonnes pour scroll interne ==========   Bootstrap col-md-* ne propage pas la height du row parent   sans height: 100% explicite sur les enfants.   ================================================================= */

.com-columns { flex-wrap: nowrap !important; }

.com-col-feed  { height: 100% !important; }

.com-col-right { height: 100% !important; }

/* == Communauté : suppression traits gris + alignement colonne droite   - border-right de com-col-feed : trait visible à gauche des panneaux   - padding-top de com-col-right : espace vide au-dessus de la 1re carte   ================================================================= */

.com-col-feed  { border-right: none !important; }

.com-col-right { padding-top: 0 !important; padding-left: 12px !important; padding-right: 12px !important; }

/* == Communauté : alignement bord droit filtres / post items ========   com-filters est bord à bord (col padding=0), com-feed-list a 16px   de padding horizontal. On donne le même inset aux filtres.   ================================================================= */

.com-filters { margin: 12px 16px 10px !important; }

/* == Communauté : suppression trait sous les onglets switcher ======= */

.com-switcher-bar { border-bottom: none !important; box-shadow: none !important; }

/* == Communauté : alignement bord droit filtres/items + haut colonnes   Padding horizontal sur com-col-feed (pas sur les enfants) → même   bord droit pour filtres et post-items malgré la scrollbar 3px.   padding-top sur com-col-right = margin-top des filtres = 12px.   ================================================================= */

.com-col-feed  { padding: 0 16px !important; }

.com-filters   { margin: 12px 0 10px !important; }

.com-feed-list { padding: 0 !important; }

.com-col-right { padding-top: 12px !important; }

/* == Communauté : boutons d'ajout centrés dans le header =========== */

.com-page-header { position: relative; }

.com-header-center {    position: absolute; left: 50%; transform: translateX(-50%);    display: flex; align-items: center; gap: 8px;}

/* == Communauté : bord droit boutons header aligné sur post-items ==   right: 33.333% (col-md-4) + 16px (padding com-col-feed)   ancre le bord DROIT du groupe de boutons au même x que le bord   droit de la zone de filtre et des éléments de liste.   ================================================================= */

.com-header-center {    position: absolute;    right: calc(33.333% + 16px);    left: auto !important;    transform: none !important;}

/* == Communauté : suppression barre gauche "nouveau" + fix épinglé ==   1. border-left sur com-post-unread supprimé (doublon avec la stripe)   2. Fond bleu header épinglé remplacé par ombre renforcée + liseré top   ================================================================= */

.com-post-item.com-post-unread { border-left: none !important; }

.com-post-item.com-post-pinned .com-post-item-header { background: inherit !important; }

.com-post-item.com-post-pinned {    box-shadow: 0 2px 10px rgba(0,0,0,0.13), 0 1px 3px rgba(0,0,0,0.07) !important;    border-top: 2px solid rgba(13,148,136,0.35) !important;}

/* == Communauté : compensation scrollbar 3px pour alignement droit ==   La scrollbar de com-feed-list réduit le contenu de 3px à droite.   Post-items right edge = col right - 16px (padding) - 3px (scrollbar).   On décale filtres et boutons header de 3px supplémentaires.   ================================================================= */

.com-filters { margin-right: 19px !important; }

.com-header-center { right: calc(33.333% + 19px) !important; }

/* == Communauté : alignement droit — approche définitive ============   Scrollbar toujours réservée (overflow-y:scroll) → espace constant 3px.   Post-items right = col right - 16px (padding col) - 3px (scrollbar) = col right - 19px.   Filtre   : margin-right: 3px dans le content area → col right - 16 - 3 = col right - 19px. ✓   Bouton   : right: calc(33.333% + 19px) depuis la droite du header. ✓   ================================================================= */

.com-feed-list { overflow-y: scroll !important; }

.com-filters   { margin-right: 3px !important; }

.com-header-center { right: calc(33.333% + 19px) !important; }

/* ── Community : carte événement à venir ──────────────────────────────── */
.com-event-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.10s;
}
.com-event-card:last-child { border-bottom: none; }
.com-event-card:hover { background: #f8fafc; }
.com-event-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    background: rgba(77,140,111,0.12);
    border-radius: var(--r-sm, 3px);
    padding: 3px 5px;
    flex-shrink: 0;
}
.com-event-day {
    font-size: 0.9rem;
    font-weight: 700;
    color: #4d8c6f;
    line-height: 1;
}
.com-event-month {
    font-size: 0.58rem;
    font-weight: 600;
    color: #4d8c6f;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.com-event-info { flex: 1; min-width: 0; }
.com-event-title {
    font-size: 0.77rem;
    font-weight: 500;
    color: #2D3E50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.com-event-time {
    font-size: 0.68rem;
    color: #8fa1b3;
    margin-top: 2px;
}
/* ── Community : barre d'actions sous les onglets ─────────────────────── */

.com-action-bar {    display: flex;    align-items: center;    gap: 8px;    flex-shrink: 0;    padding: 12px 0 0;    margin-right: 3px;}

/* ── Community : alignement bord droit barre actions + filtres ────────────
   com-feed-list réserve toujours 3px pour la scrollbar (overflow-y:scroll).
   Les post-items s'arrêtent donc à (col width - 3px).
   com-action-bar et com-filters doivent avoir le même inset droit = 3px.
   On neutralise aussi les anciens styles parasites de com-action-bar.
   ─────────────────────────────────────────────────────────────────────── */
.com-action-bar {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 0 !important;
    margin-right: 3px !important;
    justify-content: flex-start !important;
}
.com-filters { margin-right: 3px !important; }
/* ── Community : correction hauteur colonnes + action-bar + boutons ───────   La barre d'actions est maintenant DANS la colonne, pas au-dessus.   Ancienne calc : header 64 + action 52 + switcher 42 = 158 → 160px.   Nouvelle calc : header 64 + switcher 42 = 106 → 110px.   ─────────────────────────────────────────────────────────────────────── */

.com-columns { height: calc(100vh - 110px) !important; }

/* Barre d'actions : rassemblée à gauche, sans fond ni bordure */

.com-action-bar {    justify-content: flex-start !important;    background: transparent !important;    border: none !important;    padding: 10px 0 0 !important;    margin-right: 3px !important;    flex-wrap: nowrap !important;}

/* 4 boutons de même largeur */

.com-action-bar .com-btn-action {    flex: 0 0 auto;    min-width: 128px;    justify-content: center;    text-align: center;}

/* ── Community : couleurs icônes titres panneaux droits ───────────────── */
.com-panel-icon-poll     { color: #6b5fa5; }
.com-panel-icon-event    { color: #4d8c6f; }
.com-panel-icon-document { color: #a07840; }

/* ── Community : trait gris collé à droite du scrollbar ───────────────── */
.com-feed-list { border-right: 1px solid #e2e8f0; }
/* ── Community : trait sous titre des panneaux droits coloré par type ──── */

.com-panel-poll     .com-panel-title { border-bottom-color: #6b5fa5; }

.com-panel-event    .com-panel-title { border-bottom-color: #4d8c6f; }

.com-panel-document .com-panel-title { border-bottom-color: #a07840; }

/* ── Community : icônes format fichier atténuées dans panneau Documents récents ─
   On neutralise les couleurs vives (PDF rouge, Excel vert…) uniquement dans
   la carte du panneau droit. La base documentaire conserve ses couleurs. */
.com-panel-document .com-doc-icon i { color: #8fa1b3 !important; }
/* ── Community : couleurs icônes titres panneaux — override com-panel-title i ─ */

.com-panel-poll     .com-panel-title i.com-panel-icon-poll     { color: #6b5fa5 !important; }

.com-panel-event    .com-panel-title i.com-panel-icon-event    { color: #4d8c6f !important; }

.com-panel-document .com-panel-title i.com-panel-icon-document { color: #a07840 !important; }

/* ── Community : header post-item ligne unique + compacité ────────────────
   com-post-item-right : plus de colonne à deux niveaux, tout sur une ligne.
   com-post-item-header : padding réduit pour une ligne de titre plus fine. */
.com-post-item-header {
    padding: 5px 10px !important;
    min-height: 0 !important;
    align-items: center !important;
}
.com-post-item-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0;
}
/* ── Community : barres de progression sondages en violet type-poll ─────── */

.com-poll-bar { background: #6b5fa5 !important; }

/* ── Community : icône format document dans l'aperçu du fil ───────────────
   Couleur unifiée type Document + fond jaune pâle atténué. */
.com-post-doc-preview i {
    color: #a07840 !important;
    background: rgba(160, 120, 64, 0.10);
    padding: 2px 4px;
    border-radius: var(--r-sm, 3px);
    font-size: 0.70rem !important;
    vertical-align: middle;
}
/* ── Community : carte Membres fixée en bas de la colonne droite ──────────   com-col-right en flex-column, margin-top: auto pousse Membres vers le bas. */

.com-col-right {    display: flex !important;    flex-direction: column !important;}

.com-col-right .com-panel:last-child {    margin-top: auto !important;    margin-bottom: 0 !important;}

/* Cards de droite Communauté : fond gris léger (aligné sur .ctx-right-col .ctx-section = #fcfcfd).
   Le retrait du trait gris au-dessus du titre se fait dans le bloc K (.com-col-right .com-panel
   border-top: none) car ce bloc, postérieur et en !important, est l'autorité sur les bordures. */
.com-col-right .com-panel { background: #fcfcfd; }
/* Header légèrement plus prononcé que le corps (#fcfcfd) pour le détacher visuellement. */
.com-col-right .com-panel-title { background: #f1f3f5; position: relative; border-bottom: none !important; }
/* Trait de couleur sous le titre : démarre au bord gauche de l'icône (left: 16px = padding-left
   du titre) et non au bord de la card. Remplace le border-bottom par un ::after inset ;
   la couleur par type est portée ici (le border-bottom-color des règles par type ne s'applique plus). */
.com-col-right .com-panel-title::after {
    content: ''; position: absolute; left: 16px; right: 0; bottom: 0; height: 1px;
    background: rgba(45,62,80,0.35);
}
.com-col-right .com-panel-conversation .com-panel-title::after { background: #4b7bb5; }
.com-col-right .com-panel-event        .com-panel-title::after { background: #4d8c6f; }
.com-col-right .com-panel-poll         .com-panel-title::after { background: #6b5fa5; }
.com-col-right .com-panel-document     .com-panel-title::after { background: #a07840; }

/* ── Community : icônes doc dans carte Documents récents — fond jaune pâle ─
   Override du précédent gris (#8fa1b3) vers la couleur type Document. */
.com-panel-document .com-doc-icon i {
    color: #a07840 !important;
    background: rgba(160, 120, 64, 0.10) !important;
    padding: 4px 5px !important;
    border-radius: var(--r-md, 6px)!important;
    font-size: 0.80rem !important;
}

/* ── Community : bouton Supprimer en bas à droite de l'élément ──────────── */
.com-post-item-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 5px;
}
.com-post-item-footer .com-post-action-delete {
    opacity: 0;
    transition: opacity 0.15s;
}
.com-post-item:hover .com-post-item-footer .com-post-action-delete { opacity: 1; }
/* ── Community : listes scrollables des cartes panneau droit ──────────────   Même pattern que ctx-section-list dans l'onglet Contexte.   max-height calibrée pour ~2 éléments visibles par type. */

.com-panel-list {    overflow-y: auto;    padding-top: 2px;    padding-bottom: 2px;}

.com-panel-list-poll  { max-height: 260px; } /* ~2 sondages (variables en hauteur) */

.com-panel-list-event { max-height: 112px; } /* ~2 événements (~52px chacun)       */

.com-panel-list-doc   { max-height: 120px; } /* ~2 documents  (~56px chacun)        *//* Scrollbar interne — 3px, transparente par défaut, visible au survol du panneau */

.com-panel-list::-webkit-scrollbar              { width: 3px; }

.com-panel-list::-webkit-scrollbar-track        { background: transparent; }

.com-panel-list::-webkit-scrollbar-thumb        { background: transparent; border-radius: 3px; transition: background 0.2s; }

.com-panel:hover .com-panel-list::-webkit-scrollbar-thumb { background: #c4c9d0; }

.com-panel-list::-webkit-scrollbar-thumb:hover  { background: #9ca3af; }

.com-panel-list { scrollbar-width: thin; scrollbar-color: transparent transparent; }

.com-panel:hover .com-panel-list { scrollbar-color: #c4c9d0 transparent; }

/* Chevron — rotation 180° à l'état expanded */

.com-panel.com-panel-expanded .ctx-expand-btn { background: var(--ctx-teal-light); color: var(--ctx-teal); border-color: var(--ctx-teal); }

.com-panel.com-panel-expanded .ctx-expand-btn i { transform: rotate(180deg); }

.com-panel .ctx-expand-btn i { transition: transform 0.22s ease; }

/* ── Community : correctifs scroll panneau droit ──────────────────────────
   1/ flex-shrink: 0 sur chaque panneau → les panneaux prennent leur hauteur
      naturelle et débordent dans com-col-right (overflow-y: auto = scroll).
   2/ max-heights augmentées pour que les 2 éléments soient TOTALEMENT visibles.
   3/ Panneau expanded → max-height none sans compression.
   ─────────────────────────────────────────────────────────────────────── */
.com-col-right .com-panel { flex-shrink: 0; }

/* max-heights recalibrées (padding liste 2px × 2 inclus) */
.com-panel-list-event { max-height: 124px !important; } /* 2 × ~56px + 12px marge */
.com-panel-list-doc   { max-height: 132px !important; } /* 2 × ~60px + 12px marge */
.com-panel-list-poll  { max-height: 280px !important; } /* 2 sondages variables  *//* État expanded : hauteur libre */
.com-panel.com-panel-expanded .com-panel-list {
    max-height: none !important;
    overflow-y: visible !important;
}
/* ── Community : stack d'avatars membres dans le header ───────────────────   Avatars superposés (-8px margin-left), bague blanche sur fond navy,   badge +N pour le surplus. */

.com-header-members {    display: flex;    align-items: center;    flex-direction: row-reverse; /* derniers avatars derrière les premiers */    margin-right: 8px;}

.com-header-avatar {    margin-left: -8px;    position: relative;    flex-shrink: 0;}

.com-header-avatar img,.com-header-avatar .user-picture-sm {    width: 26px !important;    height: 26px !important;    border-radius: 50% !important;    border: 2px solid rgba(255,255,255,0.30) !important;    display: block !important;    transition: transform 0.12s;}

.com-header-avatar:hover img,.com-header-avatar:hover .user-picture-sm { transform: translateY(-2px); z-index: 10; }

.com-header-avatar-more {    flex-shrink: 0;    width: 26px;    height: 26px;    border-radius: 50%;    background: rgba(255,255,255,0.15);    border: 2px solid rgba(255,255,255,0.30);    color: rgba(255,255,255,0.85);    font-size: 0.58rem;    font-weight: 700;    display: flex;    align-items: center;    justify-content: center;    margin-left: -8px;}

/* Annule le margin-top: auto sur le dernier panneau (carte Membres supprimée) */

.com-col-right .com-panel:last-child { margin-top: 0 !important; }

/* ── Community : sondage — 1 seul visible par défaut (poll cards plus denses) */
.com-panel-list-poll { max-height: 145px !important; }

/* ── Community : popover liste membres ────────────────────────────────────── */
.com-popover-members {
    min-width: 170px;
    max-height: 220px;
    overflow-y: auto;
    padding: 2px 0;
}
.com-popover-members-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8fa1b3;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f2f5;
}
.com-popover-member {
    font-size: 0.75rem;
    color: #2D3E50;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.com-popover-member i { color: #8fa1b3; font-size: 0.70rem; }
/* == Community : avatar stack inline dans meta row ===================== */
.com-page-header-meta .com-header-members {
    margin-right: 0;
    margin-left: 4px;
    flex-direction: row-reverse;
}
.com-page-header-meta .com-header-avatar { margin-left: -5px; }
.com-page-header-meta .com-header-avatar img,
.com-page-header-meta .com-header-avatar .user-picture-sm {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid rgba(255,255,255,0.30) !important;
}
.com-page-header-meta .com-header-avatar-more {
    width: 18px;
    height: 18px;
    margin-left: -5px;
    font-size: 0.50rem;
}

/* == Community : bouton suppression sans ligne dédiée (position absolue) */
.com-post-item-footer {
    position: absolute !important;
    bottom: 3px;
    right: 10px;
    padding: 0 !important;
    display: block !important;
}
/* == Community : fix avatar stack taille réelle (macro génère .circled 30px) */
.com-page-header-meta .com-header-avatar .circled {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0 !important;
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    line-height: 17px !important;
    font-size: 0.42rem !important;
    overflow: hidden;
}
.com-page-header-meta .com-header-avatar .circled img {
    width: 18px !important;
    height: 18px !important;
    object-fit: cover;
    border-radius: 50% !important;
}
.com-page-header-meta .com-header-avatar .circled .pt-1 {
    padding: 0 !important;
    line-height: 16px !important;
    color: rgba(255,255,255,0.85) !important;
}

/* == Community : avatars plus compacts dans le fil et le drawer (30 → 24px) == */
.com-post-item-author .circled,
.com-source-author-row .circled,
.com-activity-avatar .circled {
    width: 24px !important;
    height: 24px !important;
    line-height: 22px !important;
    font-size: 0.60rem !important;
    flex-shrink: 0;
}
.com-post-item-author .circled img,
.com-source-author-row .circled img,
.com-activity-avatar .circled img {
    width: 22px !important;
    height: 22px !important;
}
.com-post-item-author .circled .pt-1,
.com-source-author-row .circled .pt-1,
.com-activity-avatar .circled .pt-1 {
    padding: 0 !important;
    line-height: 22px !important;
}

/* == Community : couleur panel Conversation */
.com-panel-conversation .com-panel-title { border-bottom-color: var(--com-teal) !important; }
.com-panel-icon-conversation { color: var(--com-teal) !important; }

/* == Community : carte conversation */
.com-panel-list-conv { max-height: 110px !important; }
.com-conv-card {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.12s;
}
.com-conv-card:last-child { border-bottom: none; }
.com-conv-card:hover { background: #f5f8fc; }
.com-conv-title {
    font-size: 0.78rem;
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.com-conv-meta {
    font-size: 0.70rem;
    color: #8fa1b3;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}
.com-conv-author { color: #607d8b; font-weight: 500; }
.com-conv-replies { color: var(--com-teal); }

/* == Community : empty state panels droite */
.com-panel-empty {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.com-panel-empty-icon {
    font-size: 1.4rem;
    color: #d1dce8;
    margin-bottom: 2px;
    display: block;
}
.com-panel-empty-title {
    font-size: 0.76rem;
    font-weight: 500;
    color: #8fa1b3;
    line-height: 1.3;
}
.com-panel-empty-hint {
    font-size: 0.68rem;
    color: #adbdcc;
    line-height: 1.5;
    max-width: 200px;
}
/* == Community : aération header/onglets/actions/filtres ============== *//* Onglets switcher : plus de respiration verticale */
.com-switcher-tab { padding: 13px 18px !important; }

/* Colonnes : ajuste le calc pour la hauteur de l'onglet switcher élargie */
.com-columns { height: calc(100vh - 116px) !important; }

/* Action bar : espace au-dessus et en-dessous des boutons */
.com-action-bar { padding: 16px 0 10px !important; }

/* Filtres : espace sous la barre de filtres avant le fil */
.com-filters { margin-bottom: 14px !important; }

/* == Community : carte Dernières conversations — même hauteur qu'Événements */
.com-panel-list-conv { max-height: 124px !important; }

/* == Community : couleur type Conversation sur le panneau droit */
.com-panel-conversation .com-panel-title { border-bottom-color: #4b7bb5 !important; }
.com-panel-conversation .com-panel-title .com-panel-icon-conversation { color: #4b7bb5 !important; }
.com-conv-replies { color: #4b7bb5 !important; }
/* == Community feed : badges type même largeur ======================== */
.com-post-type-tag {
    min-width: 102px !important;
    justify-content: center !important;
}

/* == Community feed : icône "non visible manager" ===================== */
.com-post-hidden-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: #8fa1b3;
    padding: 2px 4px;
    border-radius: var(--r-sm, 3px);
    background: #f0f4f8;
    cursor: default;
}
.com-post-hidden-badge i { font-size: 0.68rem; }

/* == Base documentaire : badge source conversation =================== */
.com-doc-source-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 600;
    color: #4b7bb5;
    background: #eef2f8;
    border: 1px solid #b0c4de;
    border-radius: var(--r-sm, 3px);
    padding: 1px 5px;
}

/* == Base documentaire : bouton favori ================================ */
.com-doc-fav-btn { color: #c8d3dd !important; }
.com-doc-fav-btn:hover,
.com-doc-fav-btn.active { color: #f59e0b !important; }
.com-doc-fav-btn.active:hover { color: #d97706 !important; }

/* == Base documentaire : chip filtre Favoris ========================= */
.com-doc-fav-filter {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: #8fa1b3;
    background: #fff;
    border: 1px solid #d1dce8;
    border-radius: var(--r-md, 6px);
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.com-doc-fav-filter:hover { border-color: #f59e0b; color: #d97706; background: #fffbeb; }
.com-doc-fav-filter.active { border-color: #f59e0b; color: #d97706; background: #fffbeb; font-weight: 600; }
.com-doc-fav-filter.active i { color: #f59e0b; }

/* == Communauté feed : filtres alignés à droite ====================== */
.com-filters { justify-content: flex-end !important; }

/* -- Fix: empty-state centering in doc library + filters full-width -- */
.com-docs-empty-search { display: flex; flex-direction: column; align-items: center; }
.com-filters { justify-content: space-between !important; }

/* -- Filtres communauté : largeur égale -- */
.com-filter { flex: 1; text-align: center; justify-content: center; }

/* ── Base documentaire : lignes compactes ligne unique ─────────── */
.com-docs-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 44px !important;
    min-height: unset !important;
    padding: 0 16px !important;
    gap: 10px !important;
    cursor: pointer;
    border-bottom: 1px solid #f0f3f6;
    transition: background 0.12s;
}
.com-docs-row:hover { background: #f7f9fb !important; }
.com-docs-row.com-doc-selected { background: #edf3ff !important; }

.com-docs-row-icon {
    flex: 0 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}
/* Suppression du .com-docs-row-body intermédiaire */
.com-docs-row-body { display: contents !important; }

.com-docs-row-name {
    flex: 2 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    color: #2d3a4a !important;
}
.com-docs-row-tags {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.com-docs-row-info {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    color: #8fa1b3 !important;
}
.com-docs-row-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
/* Masquer les anciens séparateurs et méta */
.com-docs-row-meta,
.com-docs-row-sep { display: none !important; }
/* -- Base documentaire : pleine largeur -- */
.com-docs-page-body { max-width: none !important; }
#docLibGrid, .com-docs-section { width: 100% !important; }

/* Surcharge display: flex !important pour permettre d-none de fonctionner sur les lignes */
.com-docs-row.d-none { display: none !important; }

/* Etoile favori toujours visible + couleur forcee directement sur l'icone */
.com-docs-row[data-fav="1"] .com-docs-row-actions { opacity: 1 !important; }
.com-docs-row[data-fav="1"] .com-docs-row-btn:not(.com-doc-fav-btn) { opacity: 0; transition: opacity 0.12s; }
.com-docs-row[data-fav="1"]:hover .com-docs-row-btn:not(.com-doc-fav-btn) { opacity: 1; }
.com-docs-row[data-fav="1"] .com-doc-fav-btn > i { color: #f59e0b !important; }
.com-docs-row[data-fav="1"] .com-doc-fav-btn:hover > i { color: #d97706 !important; }
/* ── Base documentaire – Refonte tableau + toolbar (2026-05-15) ── *//* Toolbar unifiée */
.com-docs-toolbar-v2 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.com-docs-search-wrap-v2 { position: relative; width: 280px; flex-shrink: 0; }
.com-docs-search-wrap-v2 input { width: 100%; padding: 7px 12px 7px 34px; border: 1px solid #d5dde6; border-radius: var(--r-md, 6px); font-size: 0.85rem; background: #f7f9fb; outline: none; transition: border-color 0.15s, background 0.15s; }
.com-docs-search-wrap-v2 input:focus { border-color: #0d9488; background: #fff; }
.com-docs-search-icon-v2 { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #8fa1b3; font-size: 0.8rem; pointer-events: none; }
.com-docs-filters-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.com-docs-filter-sep { width: 1px; height: 18px; background: #d5dde6; margin: 0 2px; flex-shrink: 0; }

/* Table */
.com-docs-table { width: 100%; border-collapse: collapse; }
.com-docs-table thead th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8fa1b3; padding: 0 12px 10px; text-align: left; border-bottom: 2px solid #edf0f4; }
.com-docs-table thead th:first-child { padding-left: 6px; }
.com-docs-table thead th:last-child { padding-right: 6px; text-align: right; }
.com-docs-table tbody tr { border-bottom: 1px solid #f0f3f6; cursor: pointer; transition: background 0.1s; }
.com-docs-table tbody tr:last-child { border-bottom: none; }
.com-docs-table tbody tr:hover { background: #f7f9fb; }
.com-docs-table tbody tr.com-doc-selected { background: #edf3ff; }
.com-docs-table tbody tr.d-none { display: none !important; }
.com-docs-table td { padding: 10px 12px; vertical-align: middle; }
.com-docs-table td:first-child { padding-left: 6px; }
.com-docs-table td:last-child { padding-right: 6px; }

/* Colonnes */
.com-docs-col-icon { font-size: 1.05rem; text-align: center; color: #8fa1b3; }
.com-docs-col-name { font-size: 0.875rem; font-weight: 500; color: #1e293b; }
.com-docs-col-scope { }
.com-docs-col-cat { font-size: 0.8rem; color: #64748b; }
.com-docs-col-info { font-size: 0.78rem; color: #8fa1b3; white-space: nowrap; }
.com-docs-col-actions { text-align: right; opacity: 0; transition: opacity 0.12s; white-space: nowrap; }
.com-docs-table tbody tr:hover .com-docs-col-actions { opacity: 1; }
.com-docs-table tbody tr.com-doc-selected .com-docs-col-actions { opacity: 1; }

/* Badge "issu d'une conversation" */
.com-doc-conv-tag { display: inline-flex; align-items: center; font-size: 0.68rem; color: #6366f1; background: #ede9fe; border-radius: var(--r-sm, 3px); padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

/* Favoris – colonne actions (table) */
.com-docs-table tbody tr[data-fav="1"] .com-docs-col-actions { opacity: 1; }
.com-docs-table tbody tr[data-fav="1"] .com-docs-row-btn:not(.com-doc-fav-btn) { opacity: 0; transition: opacity 0.12s; }
.com-docs-table tbody tr[data-fav="1"]:hover .com-docs-row-btn:not(.com-doc-fav-btn) { opacity: 1; }
.com-docs-table tbody tr[data-fav="1"] .com-doc-fav-btn > i { color: #f59e0b !important; }
.com-docs-table tbody tr[data-fav="1"] .com-doc-fav-btn:hover > i { color: #d97706 !important; }
/* ── Base documentaire – UX refonte toolbar + tableau (2026-05-15 v2) ── *//* Barre de recherche principale */
.com-docs-search-bar { position: relative; margin-bottom: 8px; }
.com-docs-search-bar input { width: 100%; padding: 10px 14px 10px 40px; border: 1.5px solid #d5dde6; border-radius: var(--r-md, 6px); font-size: 0.9rem; background: #fff; outline: none; transition: border-color 0.15s, box-shadow 0.15s; color: #1e293b; }
.com-docs-search-bar input:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.10); }
.com-docs-search-bar input::placeholder { color: #a0aec0; }
.com-docs-search-bar-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #a0aec0; font-size: 0.85rem; pointer-events: none; }

/* Barre de filtres groupés */
.com-docs-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f7f9fb; border: 1px solid #edf0f4; border-radius: var(--r-lg, 10px); padding: 8px 14px; }
.com-docs-filter-group { display: flex; align-items: center; gap: 7px; }
.com-docs-filter-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; white-space: nowrap; }
.com-docs-filter-vsep { width: 1px; height: 20px; background: #dde3ea; flex-shrink: 0; }
.com-doc-fav-filter.ml-auto { margin-left: auto; }

/* En-têtes de colonnes triables */
.com-docs-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.com-docs-th-sort:hover { color: #0d9488; }
.com-docs-th-sort.com-th-sorted { color: #0d9488; }
.com-sort-icon { font-size: 0.65rem; opacity: 0.35; vertical-align: middle; }
.com-sort-icon.com-sort-active { opacity: 1; color: #0d9488; }
.com-docs-th-fixed { }

/* Cellules tableau */
.com-docs-col-name { }
.com-docs-col-name-text { font-size: 0.875rem; font-weight: 500; color: #1e293b; }
.com-docs-col-name-sub { font-size: 0.72rem; color: #94a3b8; margin-top: 1px; }
.com-docs-col-scope { }
.com-docs-col-cat { }
.com-docs-col-author { font-size: 0.82rem; color: #475569; white-space: nowrap; }
.com-docs-col-date { font-size: 0.82rem; color: #64748b; white-space: nowrap; }
.com-docs-col-empty { color: #c4cdd8; }

/* Badge catégorie */
.com-doc-cat-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 500; padding: 2px 8px; border-radius: var(--r-sm, 3px); background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; white-space: nowrap; }

/* Badge conversation (mini) */
.com-doc-conv-tag { display: inline-flex; align-items: center; font-size: 0.67rem; color: #6366f1; background: #ede9fe; border-radius: var(--r-sm, 3px); padding: 1px 5px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
/* ── Base documentaire – toolbar v3 + tableau v3 (2026-05-15) ── *//* Toolbar v3 */
.com-docs-toolbar-v3 { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }

/* Ligne 1 : recherche + favoris */
.com-docs-tb-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.com-docs-search-v3 { flex: 1; position: relative; }
.com-docs-search-v3 input { width: 100%; padding: 7px 12px 7px 34px; border: 1.5px solid #d5dde6; border-radius: var(--r-md, 6px); font-size: 0.875rem; background: #fff; outline: none; color: #1e293b; transition: border-color 0.15s, box-shadow 0.15s; }
.com-docs-search-v3 input:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.09); }
.com-docs-search-v3 input::placeholder { color: #b0bec8; }
.com-docs-search-v3-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #b0bec8; font-size: 0.78rem; pointer-events: none; }

/* Bloc filtres (lignes 2 et 3) */
.com-docs-filter-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid #edf0f4; border-radius: 8px; overflow: hidden; background: #f8fafc; }
.com-docs-filter-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid #edf0f4; }
.com-docs-filter-row:last-child { border-bottom: none; }
.com-docs-filter-row-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; width: 90px; flex-shrink: 0; }

/* Ajustement chips dans la filter bar : plus compacts */
.com-docs-filter-rows .com-doc-cat,
.com-docs-filter-rows .com-doc-scope { padding: 3px 10px; font-size: 0.78rem; }

/* En-têtes triables */
.com-docs-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.com-docs-th-sort:hover { color: #0d9488; }
.com-docs-th-sort.com-th-sorted { color: #0d9488; }
.com-sort-icon { font-size: 0.62rem; opacity: 0.3; vertical-align: middle; }
.com-sort-icon.com-sort-active { opacity: 1; color: #0d9488; }

/* Colonnes tableau */
.com-docs-col-icon { font-size: 1rem; text-align: center; color: #8fa1b3; width: 28px; }
.com-docs-col-name { }
.com-docs-col-name-text { font-size: 0.875rem; font-weight: 500; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.com-docs-col-name-sub { font-size: 0.71rem; color: #94a3b8; margin-top: 2px; }
.com-docs-col-cat { }
.com-docs-col-scope { }
.com-docs-col-author { }
.com-docs-col-date { font-size: 0.82rem; color: #64748b; white-space: nowrap; }
.com-docs-col-empty { color: #c4cdd8; font-size: 0.82rem; }

/* Badge catégorie */
.com-doc-cat-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 500; padding: 2px 8px; border-radius: var(--r-sm, 3px); background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* Badge conversation */
.com-doc-conv-tag { display: inline-flex; align-items: center; font-size: 0.67rem; color: #6366f1; background: #ede9fe; border-radius: var(--r-sm, 3px); padding: 1px 5px; white-space: nowrap; flex-shrink: 0; }

/* Avatar auteur */
.com-docs-author-cell { display: flex; align-items: center; gap: 7px; }
.com-docs-author-avatar { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.com-docs-author-name { font-size: 0.82rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Base documentaire – ajustements UI (2026-05-15) ── *//* Barre de recherche réduite de moitié */
.com-docs-search-v3 { flex: 0 0 auto; width: 48%; }

/* Bouton Favoris : même hauteur que la recherche + plus large */
.com-docs-tb-row1 .com-doc-fav-filter { padding: 6px 22px; font-size: 0.8rem; display: inline-flex; align-items: center; align-self: stretch; }

/* Badge catégorie : texte complet, sans troncature */
.com-doc-cat-badge { max-width: none !important; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; }

/* En-têtes tableau : alignement vertical centré */
.com-docs-table thead th { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
/* ── Avatar auteur dans le tableau documents ── */
.com-docs-author-cell { display: flex; align-items: center; gap: 7px; }
.com-docs-author-cell .circled { width: 26px !important; height: 26px !important; min-width: 26px; font-size: 0.62rem; line-height: 26px !important; flex-shrink: 0; }
.com-docs-author-cell .circled img { width: 24px !important; height: 24px !important; }
.com-docs-author-name { font-size: 0.82rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Community: badge documents joints sur post Conversation ──────── */
.com-post-docs-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #6c757d;
    background: #f0f4fa;
    border: 1px solid #d0daea;
    border-radius: var(--r-full, 999px);
    padding: 1px 7px;
    margin-left: 4px;
    font-weight: 500;
}
.com-post-docs-badge i { font-size: 10px; }
/* ── Community: chips réactions toujours visibles, atténuées à 0 ─── */
.com-reaction-chip .com-reaction-chip-count:empty ~ *,
.com-reaction-chip:not(.active) .com-reaction-chip-count:empty {
    /* pas de règle nécessaire — géré via opacity ci-dessous */
}
.com-reaction-chip:not(.active) {
    opacity: 0.55;
}
.com-reaction-chip:not(.active):hover {
    opacity: 1;
}
/* ── Community drawer: zone réactions décrochée ─────────────────── */
.com-reactions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 4px 16px;
}
.com-reactions-row .com-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 18px;
    padding: 4px 10px;
    border-radius: var(--r-full, 999px);
    border: 1.5px solid #e0e6f0;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, opacity .15s;
    user-select: none;
}
.com-reactions-row .com-reaction-chip .com-reaction-chip-count {
    font-size: 12px;
    font-weight: 600;
    color: #5a6a85;
    min-width: 8px;
}
.com-reactions-row .com-reaction-chip:not(.active) {
    opacity: 0.5;
}
/* Point 2 (2026-09-26) : un emoji DEJA reagi par quelqu'un ne doit plus paraitre grise. La
   reaction de l'utilisateur connecte reste distinguee par son cercle navy (.active), le
   demi-opacite ne sert donc qu'a signaler "personne n'a encore reagi avec cet emoji".
   .com-reaction-has est pose par le rendu serveur ET par communityReact (JS). */
.com-reactions-row .com-reaction-chip.com-reaction-has:not(.active) { opacity: 1; }
.com-reactions-row .com-reaction-chip:not(.active):hover {
    opacity: 1;
    border-color: #b0bdd4;
    background: #f4f7fb;
}
.com-reactions-row .com-reaction-chip.active {
    opacity: 1;
    border-color: #4a7fd4;
    background: #eef3fc;
}
.com-reactions-row .com-reaction-chip.active .com-reaction-chip-count {
    color: #2d5aa0;
}
/* ── Community drawer: lien agenda inline avec la date événement ─── */
.com-source-event-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.com-ics-inline-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #28a745;
    border: 1px solid #28a745;
    border-radius: var(--r-full, 999px);
    padding: 1px 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.com-ics-inline-btn:hover {
    background: #28a745;
    color: #fff;
    text-decoration: none;
}
/* ── Community drawer: titre post mis en valeur ──────────────────── */
.com-source-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--com-navy, #1a2b4a);
    margin: 0 0 10px;
    line-height: 1.35;
}
/* ── Community drawer: titre post — override forcé ───────────────── */
.com-source-card .com-source-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a2b4a !important;
    margin: 0 0 10px !important;
    line-height: 1.35;
}
/* ── Community: sondage — options visuelles, input natif masqué ──── */
.com-poll-vote-option input[type="radio"],
.com-poll-vote-option input[type="checkbox"] {
    display: none;
}
.com-poll-vote-option:has(input:checked) {
    background: var(--com-teal-light, #e8f5f3);
    border-color: var(--com-teal, #2a9d8f);
    color: var(--com-navy, #1a2b4a);
    font-weight: 500;
}
/* ── Community: résultats sondage — votants sous la barre ────────── */
.com-poll-option-wrap { margin-bottom: 6px; }
.com-poll-voters {
    font-size: 0.72rem;
    color: var(--com-mid, #6c757d);
    padding-left: 86px;
    margin-top: 1px;
}
/* ── Community: sondage choix multiple — indication ─────────────── */
.com-poll-multiple-hint {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--com-mid, #6c757d);
    margin-top: 2px;
    margin-bottom: 6px;
}
/* ── Community: boutons d'action — style outlined ────────────────── */
.com-btn-action {
    background: #fff !important;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-md, 6px) var(--r-md, 6px);
    border-width: 1.5px !important;
    border-style: solid !important;
    transition: background .15s, color .15s;
}
.com-btn-action:hover {
    opacity: 1;
    transform: translateY(-1px);
    text-decoration: none;
}
.com-btn-conversation {
    background: #fff !important;
    border-color: #4b7bb5 !important;
    color: #4b7bb5 !important;
}
.com-btn-conversation:hover {
    background: #eef3fb !important;
    color: #4b7bb5 !important;
}
.com-btn-event {
    background: #fff !important;
    border-color: #4d8c6f !important;
    color: #4d8c6f !important;
}
.com-btn-event:hover {
    background: #edf7f3 !important;
    color: #4d8c6f !important;
}
.com-btn-poll {
    background: #fff !important;
    border-color: #6b5fa5 !important;
    color: #6b5fa5 !important;
}
.com-btn-poll:hover {
    background: #f2f0fa !important;
    color: #6b5fa5 !important;
}
.com-btn-document {
    background: #fff !important;
    border-color: #a07840 !important;
    color: #a07840 !important;
}
.com-btn-document:hover {
    background: #faf4ec !important;
    color: #a07840 !important;
}
/* ── Community: fond des cartes fil — blanc uniforme (option A) ──── */
.com-post-type-conversation,
.com-post-type-event,
.com-post-type-poll,
.com-post-type-document {
    background: #fff !important;
}
/* ── Community modales: alignement design system ─────────────────── */
.com-modal-header .modal-title {
    font-size: 0.95rem;
    font-weight: 600;
}
.com-modal-header + .modal-body {
    padding: 24px 28px 20px;
}
.com-modal-header ~ .modal-footer {
    padding: 12px 28px 20px;
    border-top: 1px solid #e2e8f0;
}
.modal-content .form-group {
    margin-bottom: 18px;
}
.modal-content .field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: #8fa1b3;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 5px;
}
.modal-content .form-control,
.modal-content select.form-control {
    border-radius: var(--r-md, 6px);
    border-color: #e2e8f0;
    font-size: 0.85rem;
    color: #2D3E50;
}
.modal-content .form-control:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.12);
}
/* ── Community modales: espacement vertical entre champs ─────────── */
.modal-content .form-group {
    margin-bottom: 24px;
}
/* ── Community modales: espacement vertical entre champs (forcé) ─── */
.modal-content .form-group {
    margin-bottom: 28px !important;
}
.modal-content .form-group.mb-0 {
    margin-bottom: 0 !important;
}
/* ── Community modales: espacement vertical entre champs (ajusté) ── */
.modal-content .form-group {
    margin-bottom: 20px !important;
}
/* ── Community: section épinglés ─────────────────────────────────── */
.com-pinned-section {
    margin-bottom: 8px;
}
.com-pinned-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #f0fafa;
    border: 1px solid #c8e6e3;
    border-radius: var(--r-lg, 10px);
    cursor: pointer;
    user-select: none;
    margin-bottom: 6px;
    transition: background .15s;
}
.com-pinned-header:hover { background: #e6f7f5; }
.com-pinned-icon { font-size: 0.72rem; color: #0d9488; }
.com-pinned-label { font-size: 0.78rem; font-weight: 600; color: #0d9488; }
.com-pinned-count {
    font-size: 0.68rem;
    font-weight: 600;
    background: #0d9488;
    color: #fff;
    border-radius: var(--r-full, 999px);
    padding: 1px 7px;
}
.com-pinned-chevron {
    font-size: 0.72rem;
    color: #0d9488;
    transition: transform .2s;
}
.com-pinned-section.collapsed .com-pinned-chevron { transform: rotate(-90deg); }
.com-pinned-section.collapsed .com-pinned-body { display: none; }
/* ── Community: séparateur fin de section épinglés ───────────────── */
.com-pinned-section {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1.5px solid #c8e6e3;
}
.com-pinned-section.collapsed {
    padding-bottom: 14px;
}
/* ── Community: espacement séparateur épinglés — centrage du trait ─ */
.com-pinned-section {
    padding-bottom: 4px;
    margin-bottom: 10px;
}
.com-pinned-section.collapsed {
    padding-bottom: 4px;
}
/* ── Community: séparateur épinglés — margin-bottom 14px ────────── */
.com-pinned-section {
    padding-bottom: 4px;
    margin-bottom: 14px;
}
/* ── Community: séparateur épinglés — fond teal sur padding bas ──── */
.com-pinned-section {
    padding-bottom: 6px;
    margin-bottom: 16px;
    background: linear-gradient(to bottom, transparent calc(100% - 6px), #f0fafa calc(100% - 6px));
}
/* ── Community: suppression border-top teal sur epingles + badge reduit ── */
.com-post-item.com-post-pinned { border-top: none !important; }
.com-pinned-count {
    font-size: 0.62rem;
    padding: 0px 5px;
}

/* ── Community — pins personnels et modale portée ── */
.com-post-item.com-post-pinned-personal .com-post-item-header { background: #eef1f5; }
/* Section "Mes mémorisés" — thème navy complet */
.com-pinned-personal-section .com-pinned-header {
    background: #eef1f5;
    border-color: #b8c4d0;
}
.com-pinned-personal-section .com-pinned-header:hover { background: #e2e8f0; }
.com-pinned-personal-section .com-pinned-icon,
.com-pinned-personal-section .com-pinned-chevron { color: #2D3E50; }
.com-pinned-personal-section .com-pinned-label { color: #2D3E50; }
.com-pinned-personal-section .com-pinned-count { background: #2D3E50; }
.com-pinned-personal-section {
    border-bottom-color: #b8c4d0;
    background: linear-gradient(to bottom, transparent calc(100% - 6px), #eef1f5 calc(100% - 6px));
}
.com-post-pin-locked { cursor: default; pointer-events: none; }
.com-pin-scope-btn {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 1rem 1.25rem; border: 0;
    background: transparent; text-align: left; cursor: pointer;
    border-bottom: 1px solid #e5e7eb; transition: background 0.15s;
}
.com-pin-scope-btn:last-child { border-bottom: 0; }
.com-pin-scope-btn:hover { background: #f0f9ff; }
.com-pin-scope-icon { font-size: 1.1rem; color: #0d9488; flex-shrink: 0; width: 1.5rem; text-align: center; }
.com-pin-scope-label { font-size: 0.85rem; font-weight: 600; color: #1f2937; }
.com-pin-scope-hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.1rem; }

/* ── Community: modale pin — étape 2 (choix de la durée d'épinglage) ── */
.com-pin-step-back-row {
    padding: 8px 12px 0;
    border-bottom: 1px solid #f1f3f5;
    margin-bottom: 4px;
}
.com-pin-step-back {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--r-md, 6px);
    transition: background .12s, color .12s;
}
.com-pin-step-back:hover {
    background: #f1f5f9;
    color: #2D3E50;
}
.com-pin-duration-intro {
    padding: 12px 14px 4px;
    font-size: 0.75rem;
    color: #6b7280;
}
.com-pin-duration-list {
    display: flex;
    flex-direction: column;
    padding: 4px 10px 12px;
    gap: 4px;
}
.com-pin-duration-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--r-md, 6px);
    font-size: 0.82rem;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    text-align: left;
}
.com-pin-duration-btn:hover,
.com-pin-duration-btn:focus {
    background: #eef9f7;
    border-color: var(--com-teal, #0d9488);
    color: var(--com-teal, #0d9488);
    outline: none;
}
.com-pin-duration-permanent {
    background: #fff;
    border-style: dashed;
    color: #64748b;
    font-style: italic;
}
.com-pin-duration-permanent:hover,
.com-pin-duration-permanent:focus {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1f2937;
    font-style: normal;
}

/* ── Community: variante compacte du tooltip Bootstrap (police réduite) ── */
.tooltip.com-tooltip-compact .tooltip-inner {
    font-size: 0.70rem;
    padding: 4px 8px;
    line-height: 1.3;
}

/* ── Sélecteur de vue liste Projets (étape 6b redesign V1) ── */

.prj-list-view-selector .prj-list-view-btn { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 0.78rem; font-weight: 400; padding: 3px 10px; border-radius: var(--r-md, 6px); line-height: 1.3; }

.prj-list-view-selector .prj-list-view-btn:hover, .prj-list-view-selector .prj-list-view-btn:focus, .prj-list-view-selector.show .prj-list-view-btn { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); color: #fff; box-shadow: none; outline: none; }

.prj-list-view-selector .dropdown-menu { background: #fff !important; font-size: 0.82rem; min-width: 170px; padding: 4px 0; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.prj-list-view-selector .dropdown-item { padding: 6px 14px 6px 30px; color: #2D3E50 !important; font-weight: 300; position: relative; }

.prj-list-view-selector .dropdown-item:hover { background: #e6f7f5 !important; color: #0d9488 !important; }

.prj-list-view-selector .dropdown-item.active, .prj-list-view-selector .dropdown-item.active:hover { background: #fff !important; color: #0d9488 !important; font-weight: 500; }

.prj-list-view-selector .dropdown-item.active::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 0.72rem; color: #0d9488; }

/* ── Cartes ligne projet liste (étape 6c redesign V1) ── */

/* 2026-06-11 : padding latéral 14px porté par la card (et non plus le wrapper)
   pour que le hover #eef7f4 couvre toute la largeur visible et qu'on conserve
   un hover indépendant par row (parent vs avenants enfants). */
#item-list .prj-list-card { position: relative; padding: 6px 10px; background: transparent; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
#item-list .prj-list-card:hover { background: #eef7f4 !important; }
#item-list .prj-list-card.active, #item-list .prj-list-card.active:hover { background: #e6f7f5 !important; box-shadow: none; }
#item-list .prj-list-card.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #0d9488; z-index: 2; }
#item-list .prj-list-card.prj-list-child.active::before { left: -3px; }

/* Slot enfant — barre verticale fine alignée sous le chevron du parent (étape 6c.1) */
.prj-list-child { border-color: #cbd5e1 !important; border-width: 2px !important; }
.prj-list-child-l2 { margin-left: 11px !important; }
.prj-list-child-l3 { margin-left: 27px !important; }
.prj-list-child-l4 { margin-left: 43px !important; }

.prj-list-fresh-dot { width: 9px; height: 9px; border-radius: 50%; background: #0d9488; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(13,148,136,0.18); position: relative; left: -5px; }

.prj-list-body { display: flex; align-items: flex-start; min-width: 0; }

.prj-list-orphan-bar { width: 6px; flex: 0 0 6px; margin-right: 10px; border-left-style: dashed !important; border-left-width: 3px !important; min-height: 40px; }

/* Bande de hover étroite alignée sur le bord pointillé gauche d'une card orpheline
   (cas isOrphanChild). Permet de déclencher le tooltip uniquement au survol du bord
   pointillé, et non sur toute la ligne. Transparente, non interactive autrement. */
.prj-list-card { position: relative; }
.prj-list-orphan-hover-zone { position: absolute; left: -3px; top: 0; bottom: 0; width: 10px; z-index: 2; cursor: default; }

/* Slot gauche vertical : ligne 1 = point activité, ligne 2 = chevron déplier */
.prj-list-left-slot { width: 22px; flex: 0 0 22px; display: flex; flex-direction: column; align-items: center; padding-top: 0; gap: 0; }
.prj-list-left-row1 { min-height: 1.5rem; display: flex; align-items: center; justify-content: center; }
.prj-list-left-row2 { min-height: 1.1rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

.prj-list-content { flex: 1; min-width: 0; }

.prj-list-row1 { gap: 8px; min-width: 0; min-height: 1.5rem; }
.prj-list-row2 { margin-top: 1px; min-height: 1.1rem; }
.prj-list-row3 { gap: 4px; margin-top: 4px; flex-wrap: wrap; }

.prj-list-title-wrapper { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.prj-list-title { font-size: 0.88rem; font-weight: 500; color: #2D3E50; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 2026-06-23 : chevron décalé à gauche (-10px) pour s'aligner au-dessus de la barre
   verticale des sous-projets (≈11px depuis le bord li) et se détacher du titre.
   Le contenu L2 reste dans .prj-list-content (déjà aligné sous le titre). */
.prj-list-chevron { color: #8fa1b3; font-size: 0.7rem; text-decoration: none; line-height: 1; transition: color 0.12s, transform 0.18s ease; display: inline-block; position: relative; left: -5px; }
.prj-list-chevron:hover { color: #0d9488; text-decoration: none; }
.prj-list-chevron.expanded { transform: rotate(90deg); color: #0d9488; }

/* Chevron grisé : projet avec sous-projets non affichés dans la vue courante
   (filtre regroupement ou voter). Visuel atténué, non animé, non cliquable. */
.prj-list-chevron-elsewhere,
.prj-list-chevron-elsewhere:hover { color: #cbd5e1 !important; cursor: default; }

/* Tooltip dédié liste projets : police légèrement réduite */
.tooltip.prj-tooltip .tooltip-inner { font-size: 0.72rem; padding: 6px 10px; max-width: 180px; text-align: center; }

.prj-list-date { font-size: 0.75rem; font-weight: 400; color: #8fa1b3; flex-shrink: 0; white-space: nowrap; }

.prj-list-favorite { flex-shrink: 0; width: 12px; text-align: center; font-size: 0.8rem; }
.prj-list-favorite a { color: inherit; text-decoration: none; }
.prj-list-favorite .fa-star.fas { color: #0d9488; }
.prj-list-favorite .fa-star.far { color: transparent; transition: color 0.12s; }
.list-item-row:hover .prj-list-favorite .fa-star.far { color: #cfd8dc; }
.list-item-row:hover .prj-list-favorite .fa-star.far:hover { color: #0d9488; }

.prj-list-phase { font-size: 0.74rem; font-weight: 300; color: #6b7a8d; line-height: 1.3; }

.prj-list-alert-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 0.65rem; font-weight: 500; border-radius: var(--r-sm, 3px); color: var(--pill-color, #2D3E50); background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent); white-space: nowrap; line-height: 1.3; }
.prj-list-alert-pill .fas { font-size: 0.6rem; }

/* Wrapper li : trait fin discret entre projets, espace inter-lignes réduit */
/* 2026-06-10 — Alignement Projets sur Contrats : padding latéral 14px (idem
   .ctr-list-item-wrapper) pour cohérence visuelle des dates + étoiles favoris à droite. */
.prj-list-item-wrapper { background: #fff; padding-left: 0 !important; padding-right: 0 !important; border-bottom: 1px solid #e2e8f0 !important; }
.prj-list-item-wrapper:last-child { border-bottom: none !important; }

/* Liste projets : fond blanc partout (étape 6c.1) */
#item-list.item-list-bg-color-generic { background-color: #fff !important; border-radius: 0 !important; }
#item-list .item-list-generic { background-color: #fff !important; border-radius: 0 !important; }

/* Scrollbar fine (3px) visible uniquement au hover de la zone de liste — cohérent avec onglet Contexte */
#item-list .container-scrollable::-webkit-scrollbar { width: 3px; background: transparent; }
#item-list .container-scrollable::-webkit-scrollbar-track { background: transparent !important; border: none !important; }
#item-list .container-scrollable::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
#item-list .container-scrollable:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
#item-list .container-scrollable { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#item-list .container-scrollable:hover { scrollbar-color: #c4c9d0 transparent; }

/* ── Séparateurs de groupes liste projets (étape 6d redesign V1) ── */

#item-list .prj-list-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #cbd5e1; border-top: 1px solid #cbd5e1; background: linear-gradient(to bottom, #f8fafc, #f1f5f9); cursor: pointer; user-select: none; transition: background 0.12s; }
#item-list .prj-list-group-header:first-child { border-top: none; }
#item-list .prj-list-group-header:hover { background: linear-gradient(to bottom, #f1f5f9, #e6f7f5); }

.prj-list-group-icon { font-size: 0.8rem; flex-shrink: 0; width: 16px; text-align: center; }

.prj-list-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #1f2937; line-height: 1; }

.prj-list-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 5px; font-size: 0.62rem; font-weight: 600; color: #fff; background: #8fa1b3; border-radius: var(--r-full, 999px); line-height: 1; }

.prj-list-group-toggle { font-size: 0.7rem; color: #6b7a8d; transition: transform 0.18s ease; }
#item-list .prj-list-group-header.collapsed .prj-list-group-toggle { transform: rotate(180deg); }

/* ── Colonne liste Projets : fond blanc + ombre bord droit (étape 6.6 redesign V1) ──
   L'ombre est portée par un pseudo-élément absolu pour passer au-dessus du fond blanc
   de .col-right (qui sinon masque la box-shadow). Symétrique avec l'ombre gauche du
   #side-panel (box-shadow: -3px 0 12px rgba(0,0,0,0.08)). Pseudo-élément absolu pour
   garantir le rendu au-dessus du fond blanc de .col-right. #}
.col-left.prj-list-bg-white { background: #fff !important; padding-top: 0 !important; }
/* Relief sur le bord gauche de col-right via pseudo-element absolu — z-index 50 pour
   passer au-dessus des enfants opaques de col-right (#project-container avec son fond gris,
   etc.) qui masquaient l'inset shadow. Reste sous le #list-toggle (z-index 400) qui s'y colle. */
.col-left.prj-list-bg-white ~ .col-right { position: relative; }
.col-left.prj-list-bg-white ~ .col-right::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(to right, rgba(45,62,80,0.17), rgba(45,62,80,0)); z-index: 50; pointer-events: none; }

/* ── Header colonne liste Projets ── */

.prj-list-page-header { padding: 12px 18px 14px; background: #fff; }

.prj-list-page-title { font-size: 1.65rem; font-weight: 400; color: #1f2937 !important; margin: 0 0 14px; letter-spacing: 0.5px; line-height: 1; }

.prj-list-search-wrapper { position: relative; }

.prj-list-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8fa1b3; font-size: 0.85rem; pointer-events: none; z-index: 2; }

/* Champ recherche : contour allégé (raffinement UX 2026-06-03) — #cbd5e1 → #e2e8f0
   pour rester en cohérence avec le ton épuré sans perdre l'affordance d'un input. */
.prj-list-search-wrapper input[type="text"], .prj-list-search-wrapper input[type="search"] { width: 100%; padding: 6px 14px 6px 36px !important; font-size: 0.82rem !important; font-weight: 300 !important; color: #2D3E50 !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: var(--r-md, 6px)!important; box-shadow: none !important; transition: border-color 0.12s, box-shadow 0.12s; }
/* Placeholder atténué (raffinement UX 2026-06-03). */
.prj-list-search-wrapper input[type="text"]::placeholder, .prj-list-search-wrapper input[type="search"]::placeholder { color: #b0bcc8 !important; opacity: 1; }

.prj-list-search-wrapper input[type="text"]:focus, .prj-list-search-wrapper input[type="search"]:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.15) !important; outline: none !important; }

/* ── Toolbar pills (Filtres, Refresh, Vue, Arbre) ── */

.prj-list-toolbar { padding: 0 18px 8px; background: #fff; }

.prj-list-toolbar-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-bottom: 10px; }

/* Chips toolbar (Filtres / Refresh / Vue / Arbre) : contour retiré au repos pour
   cohérence avec le module Listes (raffinement UX 2026-06-03). Hover conservé vif
   pour signaler l'interactivité. Border transparent préserve le layout 1px. */
.prj-list-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; font-size: 0.78rem; font-weight: 400; color: #475569; background: #fff; border: 1px solid transparent; border-radius: var(--r-sm, 3px); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; line-height: 1.3; }

.prj-list-chip:hover, .prj-list-chip:focus, .prj-list-chip[aria-expanded="true"], .show > .prj-list-chip { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; outline: none; box-shadow: none; text-decoration: none; }

.prj-list-chip[disabled] { opacity: 0.4; cursor: not-allowed; }

.prj-list-chip .fas { font-size: 0.78rem; color: inherit; }

.prj-list-chip-icon { padding: 5px 8px; min-width: 32px; justify-content: center; }

.prj-list-chip-caret { font-size: 0.6rem !important; margin-left: 2px; color: inherit; }

.prj-list-chip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; font-size: 0.62rem; font-weight: 700; color: #fff; background: #0d9488; border-radius: var(--r-sm, 3px); line-height: 1; margin-left: 2px; }

.prj-list-chip-view::after { display: none; }

.prj-list-chip-toggle { flex: 1 1 auto; }
.prj-list-view-selector.dropdown { flex: 1 1 auto; }
.prj-list-chip-view { width: 100%; padding-right: 20px; position: relative; }

.prj-list-chip-view::before { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.6rem; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: inherit; }

/* Bouton "Afficher / Cacher les sous-projets" (sitemap) — aspect aligné sur .ds-filters-trigger
   (ghost style) : transparent au repos, teal-light + teal au hover et à l'état actif
   (chantier UX 2026-06-05). Override des styles génériques .prj-list-chip-icon. */
#display_all_projects_childs.prj-list-chip,
#display_all_projects_childs.prj-list-chip-icon {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #2D3E50 !important;
}
#display_all_projects_childs i { color: #8fa1b3 !important; transition: color 0.15s; }
#display_all_projects_childs:hover,
#display_all_projects_childs.active {
    background: var(--ds-teal-light, #e6f7f5) !important;
    border-color: transparent !important;
    color: var(--ds-teal, #0d9488) !important;
}
#display_all_projects_childs:hover i,
#display_all_projects_childs.active i { color: var(--ds-teal, #0d9488) !important; }

/* ── Tabs Tous / Mes / Favoris ── */

.prj-list-tabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; flex-wrap: nowrap; padding: 0; margin: 6px 0 0; gap: 18px; }

.prj-list-tabs.nav-tabs .nav-item { flex: 0 0 auto; }

.prj-list-tabs.nav-tabs .nav-link.prj-list-tab { position: relative; border: none; background: transparent; color: #6b7a8d; font-size: 0.85rem !important; font-weight: 400 !important; font-family: inherit !important; padding: 10px 2px; margin: 0; transition: color 0.12s; }

.prj-list-tabs.nav-tabs .nav-link.prj-list-tab:hover { color: #0d9488; font-weight: 400 !important; }

.prj-list-tabs.nav-tabs .nav-link.prj-list-tab.active, .prj-list-tabs.nav-tabs .nav-link.prj-list-tab.active:hover { color: #0d9488 !important; font-weight: 600 !important; background: transparent; }

.prj-list-tabs.nav-tabs .nav-link.prj-list-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }

.prj-list-tabs.nav-tabs .nav-link.prj-list-tab:hover::after, .prj-list-tabs.nav-tabs .nav-link.prj-list-tab.active::after { transform: scaleX(1); }

.prj-list-tabs.nav-tabs .nav-link.prj-list-tab:focus { outline: none; box-shadow: none; }

/* ── Filtres avancés (collapse) ── */

.prj-list-filters-collapse { padding: 12px 0 4px; background: #fff; }

/* ── Footer colonne liste ── */

.prj-list-footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; background: #fff; border-top: 1px solid #e2e8f0; }

/* CTA "+ Ajouter projet" : contour allégé (raffinement UX 2026-06-03) — #cbd5e1 → #e2e8f0. */
.prj-list-footer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; font-size: 0.85rem; font-weight: 500; color: #0d9488; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; text-decoration: none; line-height: 1.3; }

.prj-list-footer-btn:hover, .prj-list-footer-btn:focus { background: #f0fafa; color: #0d9488; border-color: #0d9488; text-decoration: none; outline: none; box-shadow: none; }

/* Bouton icône footer (download) : contour retiré (icon-only, cohérence avec chips). */
.prj-list-footer-btn-icon { padding: 9px 12px; flex: 0 0 auto; color: #475569; border-color: transparent; }

.prj-list-footer-btn-icon:hover { color: #0d9488; }

.prj-list-footer-btn-icon .fas { font-size: 0.95rem; }

.prj-list-footer-btn-add { flex: 1 1 auto; border-color: #9fd5cd; }

/* sortPanel vidé en 6.6 (vue + arbre déplacés dans la toolbar) — supprimer la zone vide
   qui subsiste entre les tabs et la liste. Scope projet uniquement via parent col-left. */
.col-left.prj-list-bg-white #sortPanel { display: none !important; }

/* Bouton arbre : poussé à droite + état actif */
#display_all_projects_childs { margin-left: auto; }
#display_all_projects_childs.prj-list-chip.active { background: #e6f7f5; border-color: #0d9488; color: #0d9488; }

/* Empêcher le wrap inopiné des chips quand un bouton change d'état (icône métrics différentes) */
.prj-list-toolbar-chips { flex-wrap: nowrap; }
.prj-list-chip-icon { min-width: 36px; height: 32px; }
.prj-list-chip { height: 32px; }

/* Search bar fixed height to match chips */
.prj-list-search-wrapper input[type="text"], .prj-list-search-wrapper input[type="search"] { height: 32px !important; line-height: 1.2 !important; }

/* Titre Projets : padding réduit pour alignement précis avec le titre du header projet droit
   (qui est à top + 12px avec font-size 1.05rem). Anton à 1.65rem occupe plus de hauteur,
   donc on remonte le padding-top pour aligner les baselines visuelles. */
.prj-list-page-header { padding: 8px 18px 12px !important; }
.prj-list-page-title { font-size: 1.4rem !important; line-height: 1 !important; margin: 0 0 12px !important; }

/* Filtres avancés (collapse) sur fond blanc — étape 6.6 fix lisibilité.
   Override des couleurs blanches héritées du thème sombre historique. */
.prj-list-filters-collapse { padding: 10px 8px 12px; background: #fff; color: #2D3E50; }
/* Quand déplié : ligne fine + ombre douce vers le bas pour matérialiser la zone repliable */
.prj-list-filters-collapse.show { border-bottom: 1px solid #e2e8f0; box-shadow: 0 6px 8px -4px rgba(45,62,80,0.15); }
.prj-list-filters-collapse label { color: #475569 !important; font-size: 0.78rem; font-weight: 500; }
.prj-list-filters-collapse input[type="text"], .prj-list-filters-collapse input[type="number"], .prj-list-filters-collapse input[type="date"], .prj-list-filters-collapse select, .prj-list-filters-collapse textarea { color: #2D3E50 !important; background: #fff !important; border: 1px solid #cbd5e1 !important; width: 100% !important; }
.prj-list-filters-collapse .bootstrap-select { width: 100% !important; }
.prj-list-filters-collapse .bootstrap-select > .btn { color: #2D3E50 !important; background: #fff !important; border: 1px solid #cbd5e1 !important; width: 100% !important; }
.prj-list-filters-collapse .form-check-label, .prj-list-filters-collapse .form-check-input { color: #2D3E50 !important; }
/* Grille 2 colonnes serrée bord à bord (alignée sur padding 8px du conteneur) */
.prj-list-filters-collapse .row.no-gutters { margin: 0 -3px; }
.prj-list-filters-collapse .col-md-6 { padding: 3px 3px; }
/* Form-group dropdowns full width */
.prj-list-filters-collapse .form-group { margin-bottom: 0; width: 100%; }

/* ─── drw-prj — Drawer projet redesign (étape 4c4) ─────────────────────────── */

/* Corps */
.drw-prj-body { padding: 12px 16px 0; }

/* ── Boutons footer ── */
.drawer-project .btn-navy {
    background-color: #0d9488; border-color: #0d9488; color: #fff;
    padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); font-weight: 500;
}
.drawer-project .btn-navy:hover,
.drawer-project .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }
.drawer-project .btn-cancel {
    border: 1px solid rgba(45,62,80,0.25); color: #415873; background: transparent;
    padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px);
}
.drawer-project .btn-cancel:hover { background-color: #f8fafb; border-color: rgba(45,62,80,0.45); color: #2D3E50; }

/* ── Labels de champs (style drawer Action) ── */
.drw-prj-field-label,
.drawer-project .form-group > label,
.drawer-project .form-group > legend.col-form-label {
    display: block; font-size: 0.72rem; font-weight: 600;
    color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px; padding-bottom: 0;
}
/* Labels des champs OBLIGATOIRES : navy pour mieux les distinguer (classe ajoutée par JS au chargement) */
.drawer-project .drw-prj-label-required { color: #2D3E50 !important; }
/* Petit espace de 3px avant l'étoile rouge */
.drawer-project label .text-danger,
.drawer-project legend .text-danger,
.drawer-project .drw-prj-field-label .text-danger { margin-left: 3px; }
/* Dates début/fin alignées à gauche (override .datetime-picker global centré, app.css) — 2026-06-21 */
.drawer-project .drw-prj-date-field .datetime-picker { text-align: left !important; }
/* Retire le marqueur "(facultatif)" du label Projet parent (2026-06-21) */
.drawer-project .drw-prj-optional-mark { display: none; }

/* Lien switch vers l'espace Projets dans le footer du drawer (étape #1 2026-05-23).
   Style discret type lien : teal, souligné au hover, pas de fond. */
/* Rendu plus visible (semi-gras + icône « ouvrir » + léger fond teal au survol).
   font-weight en !important : neutralise le .btn { font-weight:400 } de Bootstrap qui
   l'emportait par ordre de source (le 500 précédent ne s'appliquait donc jamais). */
.drw-prj-switch-link { color: var(--ctx-teal, #0d9488) !important; font-size: 0.82rem; font-weight: 600 !important; text-decoration: none !important; padding: 4px 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-md, 6px); transition: background 0.15s, color 0.15s; }
.drw-prj-switch-link::after { content: "\f35d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.74rem; }
.drw-prj-switch-link:hover { color: #0f766e !important; text-decoration: none !important; background: rgba(13,148,136,0.10); }
.drw-prj-switch-link:focus { box-shadow: none !important; outline: none; }

/* ── RESET ALIGNEMENT : tous les labels et widgets démarrent à x=0 ── */
/* Annule toutes les marges/paddings horizontaux hérités de Bootstrap (col-*, .row, fieldset) */
.drawer-project .form-group,
.drawer-project .form-group.row,
.drawer-project fieldset.form-group {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    border: 0; min-width: 0;
}
.drawer-project .form-group > label,
.drawer-project .form-group > legend,
.drawer-project .form-group.row > label,
.drawer-project .form-group.row > legend,
.drawer-project fieldset.form-group > legend {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    padding: 0 0 4px 0 !important; margin: 0 !important;
    float: none;
}
.drawer-project .form-group > div[class*="col-"],
.drawer-project .form-group.row > div[class*="col-"],
.drawer-project fieldset.form-group > div[class*="col-"] {
    flex: 0 0 100% !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
}
/* Reset global de Bootstrap .row et col-* dans le corps du drawer */
.drawer-project .drw-prj-body .row { margin-left: 0 !important; margin-right: 0 !important; }
.drawer-project .drw-prj-body [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* Row des dates Début / Fin : 2 inputs côte à côte, 50/50 avec gap (comme classification) */
.drawer-project .drw-prj-body > #main-content-edition > .row.mb-3 {
    display: flex !important; gap: 8px !important; margin: 0 !important;
}
.drawer-project .drw-prj-body > #main-content-edition > .row.mb-3 > .col-6 {
    flex: 1 1 0 !important; max-width: none !important; padding: 0 !important;
}
.drawer-project .drw-prj-body > #main-content-edition > .row.mb-3 > .col-6 > input,
.drawer-project .drw-prj-body > #main-content-edition > .row.mb-3 > .col-6 .form-control { width: 100% !important; }

/* ── Champs (border + radius uniformes) ── */
.drawer-project .form-control {
    border: 1px solid #dde1e7; border-radius: var(--r-md, 6px);
    font-size: 0.84rem; padding: 0.32rem 0.6rem;
}
.drawer-project .form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.drawer-project .bootstrap-select > .btn {
    border: 1px solid #dde1e7 !important; border-radius: var(--r-md, 6px)!important;
    font-size: 0.84rem !important;
}
.drawer-project .bootstrap-select > .btn:focus,
.drawer-project .bootstrap-select.show > .btn { border-color: #0d9488 !important; }
/* Bootstrap Select copie .form-control sur le wrapper div — on retire sa bordure */
.drawer-project .bootstrap-select.form-control { border: none !important; padding: 0 !important; box-shadow: none !important; }
/* Annule aussi la bordure du <select> caché à l'intérieur */
.drawer-project .bootstrap-select > select.form-control { border: none !important; box-shadow: none !important; }
.drawer-project .input-group .form-control { border-radius: var(--r-md, 6px)!important; }
.drawer-project .form-group { margin-bottom: 0; }
.drawer-project .bootstrap-select { width: 100% !important; }

/* ── Espacement uniforme garanti via flex + gap ── */
.drawer-project #main-content-edition,
.drawer-project .drw-prj-ctx-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
/* Annule toutes marges sur les enfants directs (le gap gère tout) */
.drawer-project #main-content-edition > *,
.drawer-project .drw-prj-ctx-body > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}
.drw-prj-body > div,
.drw-prj-body .mb-3,
.drw-prj-body .mb-2 { margin-bottom: 0 !important; }
/* Annule le padding-top: 1.1em ajouté par app.css ligne 2085 sur les .form-group dans #main-content-edition */
.drawer-project #main-content-edition .form-group { padding-top: 0 !important; }

/* ── Ligne propriétaire inline ── */
.drw-prj-owner-inline {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px;
    width: 100%;
    font-size: 0.82rem; padding: 5px 0 7px; border-bottom: 1px solid #f0f4f8;
}
/* Spécificité plus haute pour battre le reset .drawer-project #main-content-edition > * (qui force margin-top: 0) */
/* Gap parent flex = 18px, ramené à ~6px effectif */
.drawer-project #main-content-edition > .drw-prj-owner-inline { margin-top: -12px !important; }
/* L'icône édition est repoussée à droite de la ligne */
.drw-prj-owner-inline .drw-prj-owner-edit-icon { margin-left: auto; }

/* Mode édition : les 2 selectpickers user/department côte à côte, espacés (comme classification) */
/* Le :not(.d-none) évite que mon flex écrase la classe Bootstrap d-none à l'état initial */
.drw-prj-owner-fields-row:not(.d-none) {
    display: flex !important;
    gap: 8px !important;
}
.drw-prj-owner-fields-row > .drw-prj-owner-field {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.drw-prj-owner-fields-row .bootstrap-select { width: 100% !important; }
/* Corrige le data-style="text-white btn-sm" hérité de l'ancien drawer : invisible sur fond clair */
.drw-prj-owner-fields-row .bootstrap-select > .btn { color: #415873 !important; background: #fff !important; }
.drw-prj-owner-fields-row .bootstrap-select > .btn .filter-option { color: #415873 !important; }
.drw-prj-owner-fields-row .bootstrap-select > .btn .bs-caret { color: #415873 !important; }
.drw-prj-owner-label { color: #8fa1b3; font-size: 0.74rem; }
.drw-prj-owner-value { color: #2D3E50; font-weight: 400; font-size: 0.78rem; }
.drw-prj-owner-sep { color: #cbd5e1; font-size: 0.70rem; padding: 0 1px; }
.drw-prj-owner-modify { color: #0d9488; font-size: 0.78rem; font-weight: 500; }
.drw-prj-owner-modify:hover { color: #0f766e; text-decoration: none; }
/* Icône édition Propriétaire/Equipe : visible uniquement au hover de la ligne, gris → teal au hover direct */
.drw-prj-owner-edit-icon {
    visibility: hidden;
    color: #9ca3af;
    font-size: 0.78rem;
    margin-left: 6px;
    padding: 2px 4px;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
.drw-prj-owner-inline:hover .drw-prj-owner-edit-icon { visibility: visible; }
.drw-prj-owner-edit-icon:hover { color: #0d9488; text-decoration: none !important; }

/* ── Lignes Collection (Prescripteurs, Groupes…) ── */
.drawer-project .ordering-department-row,
.drawer-project .ordering-organization-row {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center; gap: 4px; margin-bottom: 4px;
}
/* Selectpicker prend toute la place disponible */
.drawer-project .ordering-department-row .col-6,
.drawer-project .ordering-organization-row .col-6 {
    flex: 1 1 0; max-width: none; padding: 0;
}
/* Colonne trash : taille fixe */
.drawer-project .ordering-department-row .col-1,
.drawer-project .ordering-organization-row .col-1 {
    flex: 0 0 28px; max-width: 28px; width: 28px; padding: 0;
}
/* Trash : invisible par défaut, visible au hover de la ligne */
.drawer-project .ordering-department-row .btnDelete,
.drawer-project .ordering-organization-row .btnDelete {
    visibility: hidden; border: none; background: none;
    color: #9ca3af; padding: 3px 5px; line-height: 1; border-radius: var(--r-sm, 3px);
    font-size: 0.80rem;
}
.drawer-project .ordering-department-row:hover .btnDelete,
.drawer-project .ordering-organization-row:hover .btnDelete { visibility: visible; }
.drawer-project .ordering-department-row .btnDelete:hover,
.drawer-project .ordering-organization-row .btnDelete:hover {
    color: #ef4444 !important; background: rgba(239,68,68,0.07);
}

/* ── Système de tags pour collections (orderingDepartments, orderingOrganizations) ── */
/* Force masquage du CollectionType existant (le rendu form_row est conservé pour la soumission) */
.drw-prj-tag-collection-wrapper { display: none !important; }
.drw-prj-tag-list {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 6px;
}
.drw-prj-tag-list:empty { display: none; }
.drw-prj-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e6f7f5; color: #0d9488;
    /* Contour teal retiré (raffinement UX fiche projet 2026-06-03) — le fond teal-light
       suffit comme signal. border en transparent pour préserver le layout 1px. */
    border: 1px solid transparent;
    border-radius: var(--r-sm, 3px);
    padding: 2px 2px 2px 8px;
    font-size: 0.74rem; line-height: 1.4;
    max-width: 100%;
}
.drw-prj-tag .drw-prj-cat-tag-dot { margin: 0; }
.drw-prj-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drw-prj-tag-remove {
    color: #0d9488; opacity: 0.55;
    padding: 0 5px; margin-left: 2px;
    font-weight: 700; font-size: 1rem; line-height: 1;
    text-decoration: none !important;
}
.drw-prj-tag-remove:hover { opacity: 1; color: #ef4444; text-decoration: none !important; }

/* ─── Étape 4c.2 — Multi-tags Familles d'achats (composer + tags + drag-and-drop) ─── */
/* Le widget Symfony CollectionType brut est masqué (rendu dans <template> inerte par le JS) */
.drw-prj-cat-field .drw-prj-categories-collection { display: none !important; }
/* Composer : 2 selects + bouton sur une ligne */
.drw-prj-cat-composer {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.drw-prj-cat-composer .bootstrap-select { width: 100% !important; }
.drw-prj-cat-composer .bootstrap-select > .btn {
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    color: #2D3E50 !important;
    font-size: 0.78rem;
    height: 30px;
}
.drw-prj-cat-add {
    background: #0d9488;
    color: #fff;
    border: 1px solid #0d9488;
    border-radius: var(--r-md, 6px);
    padding: 0 12px;
    height: 30px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}
.drw-prj-cat-add:hover:not(:disabled) { background: #0b7c72; border-color: #0b7c72; }
.drw-prj-cat-add:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
/* Zone tags : aucun espace réservé tant qu'aucun tag n'a été ajouté */
.drw-prj-cat-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.drw-prj-cat-tags:not(:empty) {
    margin-top: 4px;
}
.drw-prj-cat-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e6f7f5; color: #0d9488;
    border: 1px solid rgba(13,148,136,0.25);
    border-radius: var(--r-sm, 3px);
    padding: 2px 4px 2px 6px;
    font-size: 0.74rem; line-height: 1.4;
    max-width: 100%;
    cursor: grab;
    user-select: none;
}
.drw-prj-cat-tag.dragging { opacity: 0.4; cursor: grabbing; }
.drw-prj-cat-tag.drag-over { box-shadow: 0 0 0 2px #0d9488; }
.drw-prj-cat-tag-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 1px;
    flex-shrink: 0;
}
/* Étoile marqueur "famille principale" — remplace l'ancien badge PRINCIPALE plus criard (4c.2-bis) */
.drw-prj-cat-tag-star {
    color: #0d9488;
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
    cursor: help;
}
.drw-prj-cat-tag.main { background: #d4f0ec; border-color: rgba(13,148,136,0.5); }
.drw-prj-cat-tag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drw-prj-cat-tag-remove {
    color: #0d9488; opacity: 0.55;
    padding: 0 4px; margin-left: 2px;
    font-weight: 700; font-size: 1rem; line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
}
.drw-prj-cat-tag-remove:hover { opacity: 1; color: #ef4444; text-decoration: none !important; }
/* Texte d'aide sous les tags — explique le drag-and-drop + rôle de la famille principale (4c.2-bis) */
.drw-prj-cat-help {
    margin-top: 6px;
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.4;
    display: none; /* affiché par JS dès qu'au moins 1 tag est présent */
}
.drw-prj-cat-help i { color: inherit; font-size: 0.66rem; }

/* === Tooltip dark générique (DS) — réutilise le pattern .fin-btn[data-tooltip] mais factorisé ===
   Usage : ajouter class="ds-tt" + data-tooltip="texte" sur n'importe quel élément.
   Positionné en haut par défaut. Pour placer en bas : ajouter class="ds-tt-bottom" (utile quand le parent
   a overflow:hidden et que l'élément est proche du haut de la zone visible — ex. display Contexte). */
.ds-tt { position: relative; cursor: help; }
.ds-tt[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1f2937; color: #fff;
    font-size: 0.72rem; font-weight: 400; line-height: 1.4;
    padding: 6px 10px; border-radius: var(--r-md, 6px);
    width: max-content; max-width: 260px;
    text-align: center; white-space: normal;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s; z-index: 1100;
}
.ds-tt[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1f2937;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s; z-index: 1100;
}
.ds-tt[data-tooltip]:hover::after,
.ds-tt[data-tooltip]:hover::before { opacity: 1; }
/* Variante "tooltip en bas" — pour éléments proches du haut de leur scrollable container */
.ds-tt-bottom[data-tooltip]::after {
    bottom: auto; top: calc(100% + 8px);
}
.ds-tt-bottom[data-tooltip]::before {
    bottom: auto; top: calc(100% + 2px);
    border-top-color: transparent; border-bottom-color: #1f2937;
}
/* Variante "ancrage à gauche du trigger" — tooltip extends VERS LA DROITE plutôt que centré.
   Utile quand l'élément est proche du bord gauche d'un conteneur à overflow:hidden (drawer, scroll). */
.ds-tt-left[data-tooltip]::after {
    left: 0; transform: none;
}
.ds-tt-left[data-tooltip]::before {
    left: 8px; transform: none;
}
/* ─── Mode lecture seule du drawer projet (contributeur sans droit edit) ─────────
   Le wrapper .drawer-body porte la classe .drw-prj-readonly-mode quand isReadOnly=true.
   Masque les affordances d'édition (composer Familles, +Ajouter, source dropdowns,
   bouton ×, drag) tout en gardant l'affichage des valeurs. Le 'disabled' Symfony grise
   déjà les inputs/selects natifs. */
.drw-prj-readonly-mode .drw-prj-cat-composer,
.drw-prj-readonly-mode .drw-prj-cat-help,
.drw-prj-readonly-mode .drw-prj-tag-field .drw-prj-tag-source,
.drw-prj-readonly-mode .drw-prj-tag-field > .bootstrap-select { display: none !important; }
.drw-prj-readonly-mode .drw-prj-tag-remove,
.drw-prj-readonly-mode .drw-prj-cat-tag-remove { display: none !important; }
.drw-prj-readonly-mode .drw-prj-cat-tag,
.drw-prj-readonly-mode .drw-prj-tag { cursor: default !important; }
.drw-prj-readonly-mode .drw-prj-cat-tag[draggable="true"] { -webkit-user-drag: none; }
.drw-prj-readonly-mode .drw-prj-owner-edit-icon { display: none !important; }

/* État erreur : bordure rouge sur le composer + zone tags. Le "!" form_errors est rendu inline dans le label. */
.drw-prj-cat-field.has-error .drw-prj-cat-composer .bootstrap-select > .btn,
.drw-prj-cat-field.has-error .drw-prj-cat-tags,
.drw-prj-tag-field.has-error .bootstrap-select > .btn,
.drw-prj-tag-field.has-error .drw-prj-tag-list {
    border: 1px solid #ef4444 !important;
}
.drw-prj-cat-field.has-error .drw-prj-cat-tags,
.drw-prj-tag-field.has-error .drw-prj-tag-list {
    border-radius: var(--r-md, 6px);
    padding: 4px;
    min-height: 32px;
    display: flex !important;
}
.drw-prj-cat-field.has-error .drw-prj-field-label,
.drw-prj-tag-field.has-error .drw-prj-field-label,
.drw-prj-date-field.has-error .drw-prj-field-label { color: #ef4444 !important; }
.drw-prj-date-field.has-error input,
.drw-prj-date-field.has-error .form-control,
.drw-prj-name-field.has-error input,
.drw-prj-name-field.has-error .form-control { border: 1px solid #ef4444 !important; }
/* Message d'erreur INLINE (toujours visible sous le champ, remplace les popovers d'erreur sur "!").
   Évite la collision avec les popovers descriptifs "?" + plus accessible. Utilisé via la macro errInline()
   au top de templates/frontend/project/_form.html.twig. */
.drw-prj-err-inline {
    color: #ef4444;
    font-size: 0.74rem;
    line-height: 1.3;
    margin-top: 4px;
}

/* ── Indicateur de complétude (carte Contexte) ── */
.ctx-completion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; cursor: help;
    transition: transform 0.15s ease;
}
.ctx-completion:hover { transform: scale(1.15); }
.ctx-completion svg { width: 100%; height: 100%; display: block; }

/* ── Tags read-only (mode display onglet Contexte) ── */
.drw-prj-tag-display { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.drw-prj-tag-readonly {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e6f7f5; color: #0d9488;
    /* Contour teal retiré (raffinement UX fiche projet 2026-06-03) — fond teal-light seul. */
    border: 1px solid transparent;
    border-radius: var(--r-sm, 3px);
    padding: 2px 8px;
    font-size: 0.74rem; line-height: 1.4;
    max-width: 100%;
}
.drw-prj-tag-readonly .drw-prj-cat-tag-dot { margin: 0; }
.drw-prj-tag-readonly-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drw-prj-tag-more {
    display: inline-flex; align-items: center;
    background: #f1f5f9; color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: var(--r-sm, 3px);
    padding: 2px 8px;
    font-size: 0.74rem; line-height: 1.4;
    cursor: help;
}
.drw-prj-tag-more:hover { background: #e2e8f0; color: #475569; }

/* Bouton Ajouter des collections */
.drawer-project .add_element_link.btn.btn-primary {
    background: transparent !important; color: #0d9488 !important;
    border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important;
    font-size: 0.78rem !important; padding: 3px 10px !important;
    font-weight: 500; margin-top: 3px;
}
.drawer-project .add_element_link.btn.btn-primary:hover {
    background: rgba(13,148,136,0.08) !important; color: #0d9488 !important;
}

/* Classification (Famille d'achats) : 2 selects côte à côte avec gap (override du reset global .drw-prj-body .row) */
.drawer-project .classification_widget .row {
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
}
.drawer-project .classification_widget .col-md-6 {
    flex: 1 1 0 !important;
    max-width: none !important;
    padding: 0 !important;
}
.drawer-project .classification_widget .bootstrap-select { width: 100% !important; }

/* ── Slider (pleine largeur, rectangles serrés) ── */
.drw-prj-slider-section { margin-bottom: 10px; }
.drw-prj-slider { display: flex; width: 100%; gap: 1px; margin-bottom: 3px; padding-left: 0; }
/* Cache les wrappers .form-check des radios cachés du slider (ils créent un padding-left visible) */
.drw-prj-slider > .form-check,
.drw-prj-slider > .radio { display: none !important; }
.drw-prj-slider-btn {
    flex: 1; height: 28px; min-width: 0;
    border: 1px solid #dde1e7; border-radius: 2px;
    background: #fff; color: #415873;
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.drw-prj-slider-btn:first-child { margin-left: 0 !important; }
.drw-prj-slider-btn:hover { border-color: #0d9488; color: #0d9488; }
.drw-prj-slider-btn.active {
    background: #0d9488; border-color: #0d9488; color: #fff; font-weight: 600;
}
/* Variante read-only pour le display (onglet Contexte) — pas de hover/cursor */
.drw-prj-slider-display { max-width: 280px; }
/* La légende sous le slider display suit la même largeur (sinon "Elevé" déborde à droite) */
.drw-prj-slider-display + .drw-prj-slider-legend { max-width: 280px; font-weight: 300 !important; color: #9ca3af !important; }
.drw-prj-slider-display + .drw-prj-slider-legend span { font-weight: 300 !important; }

/* Espace au-dessus du row "Objectif Achats" pour le détacher des sliders au-dessus */
.ctx-row-after-slider { padding-top: 4px !important; }
/* Boutons non sélectionnés du slider DISPLAY : ton très clair pour signaler que c'est en lecture seule */
.drw-prj-slider-btn-readonly {
    cursor: default !important; pointer-events: none;
    border-color: #e2e8f0;
    color: #cbd5e1;
    font-weight: 400;
}
.drw-prj-slider-btn-readonly:hover { border-color: #e2e8f0; color: #cbd5e1; }
/* Bouton sélectionné en read-only (raffinement UX fiche projet 2026-06-03) :
   fond teal-light + bordure teal medium (rgba 0.4 du teal saturé — plus doux que
   le teal foncé tout en restant plus marqué que le fond) + texte teal saturé pour
   la lisibilité. Cohérent avec la grammaire visuelle "teal-light = sélection". */
.drw-prj-slider-btn-readonly.active,
.drw-prj-slider-btn-readonly.active:hover { background: var(--ctx-teal-light); border-color: rgba(13,148,136,0.4); color: var(--ctx-teal); font-weight: 600; }
/* Légende : Faible collé à gauche du rectangle 1, Élevé collé à droite du rectangle 5 */
.drw-prj-slider-legend {
    display: flex; justify-content: space-between;
    font-size: 0.64rem; color: #8fa1b3; margin-top: 2px;
}
.drw-prj-slider-legend span:first-child { text-align: left; }
.drw-prj-slider-legend span:last-child  { text-align: right; }

/* CKEditor (Description / Contexte) : hauteur réduite dans le drawer */
/* Mode inline (fos_ck_editor.yaml : inline: true) → cible UNIQUEMENT le contenteditable visible pour éviter de cumuler avec les wrappers */
.drawer-project .cke_editable_inline,
.drawer-task .cke_editable_inline {
    height: 80px !important;
    max-height: 80px !important;
    min-height: 80px !important;
    overflow-y: auto !important;
    /* Empêche le scroll de propager au drawer parent quand on scrolle dans le champ */
    overscroll-behavior: contain;
    /* Scrollbar fine (Firefox + Chromium standard) */
    scrollbar-width: thin;
    scrollbar-color: #c4c9d0 transparent;
}
/* Scrollbar fine WebKit (Chrome, Safari, Edge) */
.drawer-project .cke_editable_inline::-webkit-scrollbar,
.drawer-task .cke_editable_inline::-webkit-scrollbar { width: 4px; }
.drawer-project .cke_editable_inline::-webkit-scrollbar-track,
.drawer-task .cke_editable_inline::-webkit-scrollbar-track { background: transparent; }
.drawer-project .cke_editable_inline::-webkit-scrollbar-thumb,
.drawer-task .cke_editable_inline::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 2px; }
.drawer-project .cke_editable_inline::-webkit-scrollbar-thumb:hover,
.drawer-task .cke_editable_inline::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Section Contexte et qualification ── */
/* Même look que .drawer-section du drawer Action */
.drw-prj-ctx-section {
    margin: 0 -16px;
    background: #f8fafb;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.drw-prj-ctx-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; cursor: pointer; text-decoration: none !important;
    border-radius: 0;
    transition: background-color 0.15s ease;
}
.drw-prj-ctx-toggle:hover { background-color: #eef4f5; text-decoration: none !important; }
.drw-prj-ctx-toggle:hover .drw-prj-ctx-title { color: #0f766e; }
.drw-prj-ctx-toggle:hover .drw-prj-ctx-icon { color: #0f766e; }
/* Marqueur "(facultatif)" sur label */
.drw-prj-optional-mark { color: #94a3b8; font-weight: 400; font-size: 0.66rem; text-transform: none; letter-spacing: 0; margin-left: 4px; }

/* Adoucit le titre/nom du projet dans le drawer (.item-edit-title est très gras/grand par défaut dans app.css) */
.drawer-project .item-edit-title {
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #dde1e7 !important;
    padding: 6px 4px !important;
    color: #2D3E50;
}
.drawer-project .item-edit-title::placeholder { font-weight: 300 !important; color: #94a3b8 !important; font-size: 0.95rem; }
/* Vendor specific (placeholder shadow) pour le poids 300 */
.drawer-project .item-edit-title::-webkit-input-placeholder { font-weight: 300 !important; }
.drawer-project .item-edit-title::-moz-placeholder { font-weight: 300 !important; opacity: 1; }
.drawer-project .item-edit-title:-ms-input-placeholder { font-weight: 300 !important; }
.drw-prj-ctx-title {
    font-size: 0.79rem; font-weight: 600; color: #0d9488;
}
.drw-prj-ctx-opt {
    font-size: 0.69rem; color: #8fa1b3; font-weight: 400; margin-left: 5px;
}
.drw-prj-ctx-icon { font-size: 0.80rem; color: #0d9488; }
.drw-prj-ctx-body { padding: 2px 16px 14px; }

/* ════════════════════════════════════════════════════════════════════════
 * Bottom-sheet "Contexte et qualification" (refonte 2026-06-09, étape 4bis)
 *
 * Calque exact .drw-ctr-sheets/sheet/sheet-bar du drawer Contrat avec une seule
 * différence : largeur 100% (1 seul bouton qui occupe toute la largeur), pas de
 * grille 2×2. Préfixe `.drw-prj-` pour scoping module Projet.
 * ════════════════════════════════════════════════════════════════════════ */

/* Layout : quand .drw-prj-sheets est dans le drawer-body, on transforme le drawer-body en
   flex column → .drw-prj-body prend l'espace restant et scrolle, .drw-prj-sheets est
   flex-shrink 0 collée au bas (juste au-dessus du drawer-footer), TOUJOURS visible (même
   quand le contenu principal est court). Scopé via :has() pour ne pas casser les autres
   templates qui chargent dans #projectDrawer sans .drw-prj-sheets. */
.drawer-project .drawer-body:has(.drw-prj-sheets) { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.drawer-project .drawer-body:has(.drw-prj-sheets) > .drw-prj-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.drawer-project .drawer-body:has(.drw-prj-sheets) > .drw-prj-sheets { flex-shrink: 0; }
/* Tray distinct de la zone blanche (fond gris + ombre vers le haut). */
.drawer-project .drw-prj-sheets { background: #e2e8f0; border-top: 1px solid rgba(45,62,80,0.22); box-shadow: 0 -3px 12px rgba(45,62,80,0.11); }

/* Barre sticky bas — 1 seul bouton pleine largeur. */
.drawer-project .drw-prj-sheet-bars { display: flex; flex-direction: column; background: transparent; }
.drawer-project .drw-prj-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 16px; height: 36px; background: transparent; border: none; border-bottom: 1px solid rgba(45,62,80,0.08); font-size: 0.78rem; font-weight: 500; color: #415873; cursor: pointer; transition: background 0.15s, color 0.15s; }
.drawer-project .drw-prj-sheet-bar:last-child { border-bottom: none; }
.drawer-project .drw-prj-sheet-bar:hover, .drawer-project .drw-prj-sheet-bar:focus { background: rgba(45,62,80,0.04); color: #0d9488; outline: none; }
.drawer-project .drw-prj-sheet-bar.is-active { background: rgba(13,148,136,0.06); color: #0d9488; font-weight: 600; }
/* Accordéon : la barre dont la sheet est ouverte « monte » dans l'en-tête → retirée du tray. */
.drawer-project.drw-prj-has-open-sheet .drw-prj-sheet-bar.is-active { display: none; }
.drawer-project .drw-prj-sheet-bar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; }
.drawer-project .drw-prj-sheet-bar-opt { color: #94a3b8; font-weight: 400; font-size: 0.72rem; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.drawer-project .drw-prj-sheet-bar.is-active .drw-prj-sheet-bar-opt { color: #94a3b8; }
.drawer-project .drw-prj-sheet-bar-icon { font-size: 0.85rem; transition: transform 0.18s ease; color: #94a3b8; flex: 0 0 auto; }
.drawer-project .drw-prj-sheet-bar:hover .drw-prj-sheet-bar-icon, .drawer-project .drw-prj-sheet-bar.is-active .drw-prj-sheet-bar-icon { color: #0d9488; }
.drawer-project .drw-prj-sheet-bar.is-active .drw-prj-sheet-bar-icon { transform: rotate(180deg); }

/* Refonte 2026-06-21 : sheet = overlay glissant ancré sous le champ Nom (--drw-prj-sheet-top) et
   au-dessus des barres (--drw-prj-bars-h). Slide-up via translateY. */
.drawer-project .drw-prj-sheet {
    position: absolute; left: 0; right: 0;
    top: var(--drw-prj-sheet-top, 120px);
    bottom: var(--drw-prj-bars-h, 36px);
    display: flex; flex-direction: column;
    background: #fff; overflow: hidden;
    transform: translateY(110%); visibility: hidden;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
    border-top: 1px solid rgba(45,62,80,0.12);
    transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
    z-index: 5;
}
.drawer-project .drw-prj-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform 0.18s ease-out; }
/* En-tête = la barre active « montée » en haut (teal clair, hauteur 36px, chevron de repli). */
.drawer-project .drw-prj-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; height: 36px; padding: 0 12px 0 16px; background: rgba(13,148,136,0.06); border-bottom: 1px solid rgba(13,148,136,0.18); cursor: pointer; }
.drawer-project .drw-prj-sheet-header-title { font-size: 0.72rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-project .drw-prj-sheet-close { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: #0d9488; cursor: pointer; transition: color 0.15s; }
.drawer-project .drw-prj-sheet-close .fa { font-size: 0.9rem; }
.drawer-project .drw-prj-sheet-close:hover, .drawer-project .drw-prj-sheet-close:focus { color: #0f766e; outline: none; }
.drawer-project .drw-prj-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 22px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
.drawer-project .drw-prj-sheet-body::-webkit-scrollbar { width: 6px; }
.drawer-project .drw-prj-sheet-body::-webkit-scrollbar-track { background: transparent; }
.drawer-project .drw-prj-sheet-body::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
.drawer-project .drw-prj-sheet-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Voile gris au-dessus de la sheet ouverte — bloque le formulaire, clic = ferme. */
.drawer-project .drw-prj-sheet-dim { position: absolute; left: 0; right: 0; top: 0; bottom: var(--drw-prj-bars-h, 36px); background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 0.18s ease; z-index: 4; }
.drawer-project.drw-prj-has-open-sheet .drw-prj-sheet-dim { opacity: 1; pointer-events: auto; }
/* Le voile recouvre aussi la bande « dupliquer » (hors .drawer-body, entre header et body). */
.drawer-project .drawer-template-band { position: relative; }
.drawer-project.drw-prj-has-open-sheet .drawer-template-band::after { content: ''; position: absolute; inset: 0 0 -1px 0; background: rgba(0,0,0,0.5); cursor: pointer; z-index: 5; }

/* Radio buttons dans le drawer projet — curseur cohérent partout pour éviter clignotement */
.drawer-project .form-check { padding-left: 1.35rem; margin-bottom: 2px; cursor: pointer; }
.drawer-project .form-check-input { cursor: pointer; }
.drawer-project .form-check-label { font-size: 0.82rem; color: #415873; cursor: pointer; }
.drawer-project input[type="radio"]:checked + .form-check-label { color: #2D3E50; font-weight: 500; }
/* Radio button — override du global app.css (input radio masqué + fake radio via .radio-label::before)
   Le PHP ProjectType.php ajoute la classe .radio-label au label quand DISPLAY_MODE_RADIO_VERTICAL.
   Cible le pseudo-élément ::before du label, pas l'input natif (qui est opacity:0). */
.drawer-project input[type="radio"] + .radio-label::before {
    background: #fff;
    border: 1px solid #cbd5e1;
    width: 14px; height: 14px;
    margin-right: 8px;
    top: 0.15em;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.drawer-project input[type="radio"] + .radio-label:hover::before { border-color: #0d9488; }
.drawer-project input[type="radio"]:checked + .radio-label::before {
    background-color: #0d9488;
    border-color: #0d9488;
    box-shadow: inset 0 0 0 3px #fff;
}
.drawer-project input[type="radio"]:focus + .radio-label::before { border-color: #0d9488; }
/* Désactive les tooltips Bootstrap qui pourraient s'ouvrir sur les radios (suppression définitive) */
.drawer-project .form-check [data-toggle="tooltip"],
.drawer-project .form-check [data-toggle="popover"] { pointer-events: auto; }

/* ── Communauté — FineUploader chunked (étape 6b.2 du 2026-05-22) ──
   Style du conteneur uploader FineUploader pour les modales et drawer post.
   Réutilise les classes natives qq-* fournies par fine-uploader-new.css. */

/* Mode "ajout document" : la dropzone couvre la zone d'activité (full-width, sans encart latéral)
   et masque temporairement les commentaires. Toggle via la classe `com-doc-mode` sur `.com-thread`. */
.com-thread.com-doc-mode .com-activity-feed,
.com-thread.com-doc-mode .com-activity-separator,
.com-thread.com-doc-mode .com-thread-reactions { display: none !important; }
.com-thread.com-doc-mode .com-thread-reply-form { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0; }
.com-thread.com-doc-mode .com-doc-upload-form { flex: 1 1 auto; margin: 0; padding: 16px 16px 12px; border-radius: 0; border-top: var(--com-border); border-bottom: var(--com-border); display: flex; flex-direction: column; }
.com-thread.com-doc-mode .com-doc-upload-form > .com-doc-uploader { flex: 1 1 auto; display: flex; flex-direction: column; }
.com-thread.com-doc-mode .com-doc-upload-form > .com-doc-uploader .qq-uploader { height: 100%; display: flex; flex-direction: column; }
.com-thread.com-doc-mode .com-doc-upload-form > .com-doc-uploader .qq-upload-button { flex: 1 1 auto; display: flex !important; align-items: center; justify-content: center; }
.com-thread.com-doc-mode .com-compose-bar { padding: 8px 12px; border-top: none; }
/* Hint sous la dropzone — explication glisser-déposer */
.com-doc-upload-hint { margin-top: 6px; font-size: 0.74rem; color: var(--com-muted); text-align: center; font-style: italic; }

.com-doc-uploader { display: block; width: 100%; }
/* Neutralise les styles natifs FineUploader (padding 20px, min-height 200px, border dashed gris)
   pour que la dropzone occupe toute la largeur sans gros encart visuel autour. */
.com-doc-uploader .qq-uploader { padding: 0 !important; min-height: 0 !important; max-height: none !important; border: none !important; background: transparent !important; width: 100% !important; overflow: visible !important; }
.com-doc-uploader .qq-uploader:before { display: none !important; }
.com-doc-uploader .qq-upload-button { display: block !important; float: none !important; width: 100% !important; min-height: 70px; margin: 0 !important; background: var(--com-bg) !important; border: 1px dashed var(--com-border-color, #d1d5db) !important; color: var(--com-navy) !important; padding: 18px 16px !important; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.12s, border-color 0.12s; text-align: center; box-shadow: none !important; }
.com-doc-uploader .qq-upload-button:hover { background: #eef2f6; border-color: var(--com-teal); }
.com-doc-uploader .qq-upload-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.85rem; }
.com-doc-uploader .qq-upload-list li { padding: 6px 10px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.com-doc-uploader .qq-upload-file { color: var(--com-navy); font-weight: 500; }
.com-doc-uploader .qq-upload-size { color: var(--com-muted); font-size: 0.75rem; }
.com-doc-uploader .qq-progress-bar { background: var(--com-teal); height: 3px; border-radius: 2px; }
.com-doc-uploader .qq-progress-bar-container { background: #e5e7eb; height: 3px; border-radius: 2px; margin-top: 3px; }
.com-doc-uploader .qq-upload-cancel, .com-doc-uploader .qq-upload-delete { color: #ef4444; cursor: pointer; font-size: 0.75rem; margin-left: auto; }
.com-doc-uploader .qq-upload-status-text { color: var(--com-muted); font-size: 0.75rem; }

/* Variante compacte pour le drawer post (input zone réduite) */
.com-doc-uploader-sm .qq-upload-button { padding: 16px 16px; font-size: 0.85rem; min-height: 64px; }

/* ── Community: dropdown "Ajouter" dans la barre d'onglets ────────── */
.com-switcher-bar {
    justify-content: space-between !important;
}
.com-switcher-actions {
    display: flex;
    align-items: center;
    padding-right: 4px;
}
.com-add-dropdown {
    position: relative;
}
.com-add-dropdown-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-md, 6px) var(--r-md, 6px);
    background: var(--com-teal, #0d9488);
    color: #fff;
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: background .15s, transform .1s, box-shadow .15s;
    cursor: pointer;
}
.com-add-dropdown-btn:hover,
.com-add-dropdown-btn:focus {
    background: #0b7a70;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(13,148,136,0.25);
}
.com-add-dropdown-btn:focus { outline: none; }
.com-add-dropdown-caret {
    font-size: 0.65rem;
    transition: transform .15s;
}
.com-add-dropdown.show .com-add-dropdown-caret {
    transform: rotate(180deg);
}
.com-add-dropdown-menu {
    min-width: 220px;
    padding: 6px;
    margin-top: 6px;
    border: 1px solid #e5e7eb;
    border-radius: var(--r-md, 6px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.com-add-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--r-md, 6px);
    font-size: 0.82rem;
    font-weight: 500;
    color: #1f2937;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.com-add-item + .com-add-item { margin-top: 2px; }
.com-add-item-icon {
    width: 22px;
    text-align: center;
    font-size: 0.95rem;
}
.com-add-item-conversation .com-add-item-icon { color: #4b7bb5; }
.com-add-item-event        .com-add-item-icon { color: #4d8c6f; }
.com-add-item-poll         .com-add-item-icon { color: #6b5fa5; }
.com-add-item-document     .com-add-item-icon { color: #a07840; }

.com-add-item-conversation:hover,
.com-add-item-conversation:focus {
    background: #eef3fb;
    color: #4b7bb5;
}
.com-add-item-event:hover,
.com-add-item-event:focus {
    background: #edf7f3;
    color: #4d8c6f;
}
.com-add-item-poll:hover,
.com-add-item-poll:focus {
    background: #f2f0fa;
    color: #6b5fa5;
}
.com-add-item-document:hover,
.com-add-item-document:focus {
    background: #faf4ec;
    color: #a07840;
}

/* ── Community: badges sur le header des sections épinglées ────── */
.com-pinned-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 6px;
    border-radius: var(--r-full, 999px);
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-left: 2px;
}
.com-pinned-badge-unread { background: #dc2626; }
.com-pinned-badge-due    { background: #d97706; }
.com-pinned-badge-vote   { background: #6b5fa5; }

/* ── Community Documents: scroll interne sur le tableau ─────────────
   Layout identique au feed : container 100vh, header/toolbar figés,
   tbody scrollable, thead sticky. Évite la scrollbar de page globale. */
#main-content-community-docs {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#main-content-community-docs .com-page-header { flex-shrink: 0; }
#main-content-community-docs .com-docs-page-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}
#main-content-community-docs .com-docs-toolbar-v3 { flex-shrink: 0; }
#main-content-community-docs .com-docs-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 20px;
}
#main-content-community-docs .com-docs-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}
/* Scrollbar fine, cohérente avec le feed Community */
#main-content-community-docs .com-docs-section::-webkit-scrollbar { width: 6px; background: transparent; }
#main-content-community-docs .com-docs-section::-webkit-scrollbar-track { background: transparent; }
#main-content-community-docs .com-docs-section::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
#main-content-community-docs .com-docs-section::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
#main-content-community-docs .com-docs-section { scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }

/* ── Community: flash highlight après création d'un post ──────────── */
.com-post-flash {
    animation: comPostFlash 1.8s ease-out;
}
@keyframes comPostFlash {
    0%   { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.55); background-color: #e6f7f5; }
    60%  { box-shadow: 0 0 0 10px rgba(13, 148, 136, 0.0); background-color: #e6f7f5; }
    100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); background-color: transparent; }
}

/* ── Community: aération onglets + écart vers filtres ─────────────── */
.com-switcher { gap: 6px !important; }
.com-switcher-tab { padding: 18px 22px !important; }

/* Marge supérieure des filtres et du panneau droit alignée (24px) */
.com-filters   { margin-top: 24px !important; }
.com-col-right { padding-top: 24px !important; }

/* Hauteur des colonnes : compense les ~10px ajoutés au switcher */
.com-columns { height: calc(100vh - 130px) !important; }

/* ── Community: label discret sur le cadre des filtres ────────────── */
.com-filters-wrap {
    position: relative;
    margin-top: 24px;
}
.com-filters-wrap .com-filters {
    margin-top: 0 !important;
}
.com-filters-label {
    position: absolute;
    top: -7px;
    left: 12px;
    padding: 0 6px;
    background: var(--com-bg, #f5f7fa);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--com-muted, #8fa1b3);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

/* ── Community: redesign onglets Équipe/Entreprise (v2) ────────────
   - Underline plus épais (3px) et plus visible
   - Icône plus grosse et colorée selon l'état
   - État hover et actif avec léger fond teinté
   - Badge non-lus repensé : pastille ronde rouge cohérente avec sidebar */
.com-switcher-tab {
    position: relative;
    gap: 8px;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--com-muted, #8fa1b3) !important;
    border-bottom: 3px solid transparent !important;
    border-radius: var(--r-md, 6px) var(--r-md, 6px) 0 0;
    transition: color .15s, background .15s, border-color .15s !important;
}
.com-switcher-tab i {
    font-size: 0.95rem;
    color: var(--com-muted, #8fa1b3);
    transition: color .15s;
}
/* Style unifie avec .tdl-tab (refonte 2026-05-31) :
   - hover : fond teal tres clair, texte teal
   - actif : fond teal clair plus marque, texte teal, gras, pas de soulignement teal fonce. */
.com-switcher-tab:hover {
    color: #0d9488 !important;
    background: #f0fbf9 !important;
}
.com-switcher-tab:hover i {
    color: #0d9488;
}
.com-switcher-tab.active {
    color: #0d9488 !important;
    font-weight: 600 !important;
    background: #e6f7f5 !important;
    border-bottom-color: transparent !important;
}
.com-switcher-tab.active i {
    color: #0d9488;
}

/* Underline animé au hover sur les onglets non actifs (pseudo-élément qui grandit depuis le centre) */
.com-switcher-tab::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 3px;
    background: var(--com-teal, #0d9488);
    transform: translateX(-50%);
    transition: width .28s ease;
    opacity: 0.5;
    border-radius: var(--r-sm, 3px) var(--r-sm, 3px) 0 0;
    pointer-events: none;
}
.com-switcher-tab:not(.active):hover::after {
    width: 100%;
}

/* Couleurs d'icône : navy atténué par défaut, teal sur onglet actif */
.com-switcher-tab i { color: #64748b !important; }
.com-switcher-tab.active i { color: var(--com-teal, #0d9488) !important; }

/* Onglet : limite la largeur du texte et tronque avec ellipsis pour les noms longs.
   Le tooltip natif (attribut title) permet de voir le nom complet au survol. */
.com-switcher-tab {
    max-width: 260px;
    min-width: 0;
    flex-shrink: 0;
}
.com-switcher-tab-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

/* ── Layout overflow : onglets ne wrappent jamais, espace réservé à droite pour Ajouter ── */
.com-switcher-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.com-switcher {
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
    flex: 0 1 auto;
}
.com-switcher-actions { flex-shrink: 0; }

/* Bouton "+" overflow tabs : positionné juste après le dernier onglet visible
   (et non collé au bouton Ajouter à droite) — déclenche le dropdown des onglets cachés */
.com-switcher-overflow {
    flex-shrink: 0;
    margin-left: 12px;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.com-switcher-overflow-btn {
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: var(--r-md, 6px);
    color: #64748b;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Badge non-lus cumulé sur les onglets cachés sous le "+" — même style que les badges d'onglet */
.com-switcher-overflow-badge {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.com-switcher-overflow-btn:hover,
.com-switcher-overflow-btn:focus,
.com-switcher-overflow.show .com-switcher-overflow-btn {
    background: rgba(13, 148, 136, 0.08);
    color: var(--com-teal, #0d9488);
    outline: none;
}
.com-switcher-overflow-menu {
    min-width: 220px;
    padding: 6px;
    border-radius: var(--r-md, 6px);
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    margin-top: 6px;
}
.com-switcher-overflow-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--r-md, 6px);
    font-size: 0.82rem;
    color: #1f2937;
    transition: background .12s, color .12s;
}
.com-switcher-overflow-item:hover,
.com-switcher-overflow-item:focus {
    background: rgba(13, 148, 136, 0.06);
    color: #1f2937;
    text-decoration: none;
}
.com-switcher-overflow-item.active {
    background: rgba(13, 148, 136, 0.10);
    color: var(--com-navy, #2D3E50);
    font-weight: 600;
}
.com-switcher-overflow-item .com-switcher-tab-text {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}
.com-switcher-overflow-item .com-badge {
    margin-left: auto !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-radius: 999px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    box-shadow: none;
}

/* Séparateur visuel entre le groupe "équipes" et l'onglet "Entreprise" */
.com-switcher-divider {
    align-self: center;
    width: 1px;
    height: 22px;
    background: #d1d5db;
    margin: 0 10px;
    flex-shrink: 0;
}

/* Badge non-lus : pastille two-tone discrète (fond rouge très clair, texte rouge soutenu) */
/* ── Community: nouvelle hiérarchie du header — nom de la communauté en titre principal */
.com-page-header-title-name {
    font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    line-height: 1.15;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px !important;
    cursor: default;
}
.com-page-header-subline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.com-page-header-subtitle {
    font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.70);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
.com-page-header-subline-sep { color: rgba(255, 255, 255, 0.35); }
.com-page-header-subline .com-page-header-meta { margin: 0; }

.com-switcher-tab .com-badge {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-radius: 999px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    margin-left: 8px !important;
    box-shadow: none;
}
/* ─── Filtres onglet Actions (chantier Jalon-as-Task) ─── */
#project_tasks_tasks.filter-completed-hidden .task-completed { display: none !important; }
/* Jalons = .milestone-task-item (jalon-as-task) et .milestone-legacy-item (ancien jalon). AVANT (2026-09-16) : [data-sort-priorite="999"], or 999 = aussi « tâche SANS priorité » → les actions créées par un modèle de planning (sans priorité) disparaissaient avec les jalons. */
#project_tasks_tasks.filter-milestones-hidden .milestone-task-item,
#project_tasks_tasks.filter-milestones-hidden .milestone-legacy-item { display: none !important; }

/* ─── Tooltip CSS pur pour erreur inline d'édition (row task) ─── */
/* Override des règles génériques .task-col-echeance span / .task-col-echeance span:hover qui ajoutent
   padding + border et décalent visuellement le ! dans la cellule suivante. */
.task-col-echeance .task-row-err-tip-wrap,
.task-col-echeance .task-row-err-tip-wrap:hover {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.task-row-err-tip-wrap { position: relative; display: inline-block; margin-left: 4px; vertical-align: middle; }
.task-row-err-tip-icon { cursor: help; font-size: 0.78rem; line-height: 1; }
.task-row-err-tip-msg {
    position: absolute;
    top: 100%;
    right: 0;
    transform: translateY(6px);
    background: #1f2937;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.task-row-err-tip-wrap:hover .task-row-err-tip-msg { opacity: 1; }

/* ─── Page admin Modèle Planning — application DS reference ─── */
.sm-title { font-size: 1.5rem; font-weight: 500; color: #2D3E50; margin: 0; }
.sm-name-edit { color: #8fa1b3; font-size: 0.9rem; line-height: 1; padding: 2px 4px; border-radius: var(--r-sm, 3px); }
.sm-name-edit:hover { color: #0d9488; text-decoration: none; background: #f0fafa; }
/* Badge mode (chrono/rétro) — navy léger, distinct du teal de la légende */
.sm-mode-badge {
    background: #f1f5f9; color: #2D3E50; border: 1px solid #e2e8f0;
    border-radius: var(--r-md, 6px); padding: 4px 10px; font-size: 0.75rem; font-weight: 500;
    text-transform: none; letter-spacing: 0.02em;
}
/* Badge légende J — teal clair (accent rare cf. DS reference) */
.sm-j-legend-badge {
    background: #e6f7f5; color: #0d9488;
    border-radius: var(--r-sm, 3px); padding: 4px 10px; font-size: 0.72rem; font-weight: 500;
    display: inline-block;
}
.sm-counter { color: #8fa1b3; font-size: 0.78rem; }
.sm-counter strong { color: #2D3E50; font-weight: 600; }
.sm-counter-sep { margin: 0 8px; color: #cbd5e1; }
.sm-tasks-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    margin-top: 16px; overflow: hidden;
}
.sm-tasks-card .tasks-list-header {
    border-bottom: 1px solid rgba(45,62,80,0.35);
    padding: 12px 16px; color: #2D3E50; font-size: 0.8rem; font-weight: 500;
}
.sm-tasks-card .task-item { border-bottom: 1px solid #f3f4f6; transition: background 0.12s; }
.sm-tasks-card .task-item:last-child { border-bottom: none; }
.sm-tasks-card .task-item:hover { background: #f9fafb; cursor: pointer; }
.sm-tasks-card .tasks-list-row { padding: 10px 16px; }
.sm-tasks-card .task-name-text { color: #415873; font-size: 0.85rem; }
.sm-tasks-card .task-col-priorite { padding-left: 16px; text-align: left; }
/* Largeur élargie pour que "Début (J+) / Fin (J+)" tienne sur une seule ligne */
.sm-tasks-card .task-col-echeance { padding-right: 16px; width: 200px; text-align: left; white-space: nowrap; }

/* Sous-ligne du header admin : toggle actif (à gauche, sans encadré) + langues (encadré navy clair) */
.sm-controls-row {
    display: flex; align-items: center;
    gap: 24px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.sm-active-toggle-flat {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; padding: 0;
    font-size: 0.9rem; color: #2D3E50; cursor: pointer;
}
.sm-active-toggle-flat input[type="checkbox"] {
    position: static; opacity: 1; margin: 0; cursor: pointer;
    width: 16px; height: 16px;
    accent-color: #0d9488;
}
.sm-active-toggle-flat .sm-active-tooltip {
    color: #8fa1b3; font-size: 0.8rem; cursor: help;
}
/* Encadré navy clair regroupant les langues */
.sm-locales-group {
    display: inline-flex; align-items: center; gap: 12px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px);
    padding: 6px 12px;
}
.sm-locales-label {
    font-size: 0.78rem; font-weight: 500; color: #2D3E50;
}
.sm-locales-label .sm-locales-tooltip {
    color: #8fa1b3; font-size: 0.72rem; cursor: help; margin-left: 4px;
}
.sm-locales-checks {
    display: inline-flex; align-items: center; gap: 10px;
}
.sm-locale-toggle-flat {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0; padding: 0;
    font-size: 0.74rem; color: #415873; cursor: pointer;
}
.sm-locale-toggle-flat input[type="checkbox"] {
    position: static; opacity: 1; margin: 0; cursor: pointer;
    width: 13px; height: 13px;
    accent-color: #0d9488;
}

/* Page liste des modèles — marges 40px gauche/droite (DS reference) pour élargir la table */
.sm-index-page { padding-left: 0; padding-right: 0; }
.sm-index-content { padding-left: 40px; padding-right: 40px; }

/* Liste index des modèles — table compacte + colonnes nb / langues / actions */
.sm-index-table { font-size: 0.85rem; }
.sm-index-table thead th {
    padding: 8px 12px; font-size: 0.78rem; font-weight: 500; color: #2D3E50;
    border-bottom: 1px solid rgba(45,62,80,0.35); background: #fff;
}
.sm-index-table tbody td { padding: 8px 12px; vertical-align: middle; border-top: 1px solid #f3f4f6; }
.sm-index-table tbody tr:first-child td { border-top: none; }
.sm-index-name { color: #2D3E50; font-weight: 500; }
.sm-index-badge-inactive {
    margin-left: 8px; background: #fef3c7; color: #92400e; border-radius: var(--r-sm, 3px);
    padding: 2px 8px; font-size: 0.68rem; font-weight: 600;
    border: 1px solid #fde68a;
}
.sm-index-counts { color: #2D3E50; font-size: 0.82rem; }
.sm-index-counts strong { color: #2D3E50; font-weight: 600; }
.sm-index-sep { margin: 0 6px; color: #cbd5e1; }
.sm-index-locales { font-size: 0; }
.sm-index-table thead th:nth-child(3),
.sm-index-table tbody td:nth-child(3) { width: 300px; }
.sm-index-table thead th:nth-child(2),
.sm-index-table tbody td.sm-index-counts { white-space: nowrap; }
.sm-index-table thead th:nth-child(4),
.sm-index-table tbody td:nth-child(4) { white-space: nowrap; width: 1%; }
.sm-index-locale {
    display: inline-block; margin-right: 4px; padding: 2px 8px;
    background: #e6f7f5; color: #0d9488; border-radius: var(--r-sm, 3px);
    font-size: 0.72rem; font-weight: 500;
}
.sm-index-locale-off { background: #f1f5f9; color: #cbd5e1; font-weight: 400; text-decoration: line-through; }
.sm-index-action { color: #0d9488; margin-right: 14px; font-size: 0.82rem; }
.sm-index-action:hover { color: #0b7a6f; text-decoration: underline; }
.sm-index-delete { color: #8fa1b3; font-size: 0.78rem; padding: 2px 4px; }
.sm-index-delete:hover { color: #dc3545; }

/* Toolbar boutons + Action / + Jalon — palette DS (navy + teal) */
.sm-toolbar { margin-top: 24px; margin-bottom: 16px; gap: 8px; }
.sm-btn {
    display: inline-flex; align-items: center;
    padding: 7px 14px; font-size: 0.82rem; font-weight: 500;
    border-radius: var(--r-md, 6px); border: 1px solid transparent;
    text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s;
    cursor: pointer;
}
.sm-btn-navy { background: #2D3E50; color: #fff; border-color: #2D3E50; }
.sm-btn-navy:hover { background: #1f2937; color: #fff; text-decoration: none; }
.sm-btn-teal { background: #0d9488; color: #fff; border-color: #0d9488; }
.sm-btn-teal:hover { background: #0b7a6f; color: #fff; text-decoration: none; }

/* Drawer en mode template admin : checklist en display-only (les cases sont visibles
   mais ne peuvent pas être cochées/décochées — un template n'a pas d'état).
   Cibler toute la zone des checkbox + leur label pseudo-element pour bloquer le clic. */
.drw-task-checklist-template input[type="checkbox"],
.drw-task-checklist-template input[type="checkbox"] + label,
.drw-task-checklist-template label[class*="radio-label"],
.drw-task-checklist-template .form-check-input,
.drw-task-checklist-template .form-check-label {
    pointer-events: none;
}
.drw-task-checklist-template .form-check-input { opacity: 0.6; }
/* La fake-checkbox (duplicate visuel) est masquée — l'item se gère via le bouton supprimer.
   "Ajouter" et "supprimer" restent visibles pour permettre la composition du template. */
.drw-task-checklist-template .fake-checkbox {
    display: none !important;
}

/* Badge "par rapport à la date de début/fin du projet" — centré sous les champs nDay dans le drawer template */
.drw-jref-badge-wrap { text-align: center; margin-top: -4px; }
.drw-jref-badge {
    display: inline-block;
    background: #e6f7f5; color: #0d9488;
    border-radius: var(--r-sm, 3px); padding: 4px 10px;
    font-size: 0.72rem; font-weight: 500; font-style: italic;
}

/* Bouton "Appliquer un modèle" + dropdown enrichi.
   Le bouton hérite de .fin-btn pour s'aligner sur la hauteur des autres boutons de la barre. */
.sm-apply-wrap .dropdown { position: relative; }
.sm-apply-toggle { background: #fff; color: #2D3E50; border-color: #d1d5db; }
.sm-apply-toggle:hover, .sm-apply-toggle:focus { background: #f8fafc; color: #0d9488; border-color: #0d9488; outline: none; }
.sm-apply-toggle[aria-expanded="true"] { background: #f8fafc; color: #0d9488; border-color: #0d9488; }
.sm-apply-chevron { font-size: 0.62rem; margin-left: 4px; transition: transform 0.18s; }
.sm-apply-toggle[aria-expanded="true"] .sm-apply-chevron { transform: rotate(180deg); }
.sm-apply-menu {
    min-width: 360px; padding: 6px 0; margin-top: 4px;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    box-shadow: 0 6px 20px rgba(15,23,42,0.08);
    font-size: 0.76rem;
}
.sm-apply-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; color: #2D3E50; white-space: normal;
}
.sm-apply-item:hover, .sm-apply-item:focus { background: #f1f5f9; color: #0d9488; text-decoration: none; }
.sm-apply-menu .sm-apply-badge {
    flex-shrink: 0 !important; display: inline-block !important;
    width: 56px !important; padding: 1px 0 !important;
    border-radius: var(--r-sm, 3px); font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.5;
    text-align: center !important;
}
.sm-apply-badge-chrono { background: #e6f7f5; color: #0d9488; border: 1px solid #b8e5df; }
.sm-apply-badge-retro  { background: #e7eaef; color: #2D3E50; border: 1px solid #cbd5e1; }
.sm-apply-name { flex: 1; font-weight: 500; font-size: 0.78rem; }
.sm-apply-duration { flex-shrink: 0; color: #8fa1b3; font-size: 0.68rem; font-weight: 500; }

/* Modale de confirmation d'application — palette DS, layout repensé */
#applyScheduleModelModal .modal-content { border-radius: var(--r-lg, 10px); }
.apply-sm-dialog { max-width: 520px; }
#applyScheduleModelModal .modal-header.apply-sm-header {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 16px 20px !important; border-bottom: 1px solid #e2e8f0;
}
#applyScheduleModelModal h5.apply-sm-title,
#applyScheduleModelModal .apply-sm-title { color: #2D3E50 !important; font-weight: 600 !important; font-size: 1.15rem !important; line-height: 1.3 !important; margin: 0 !important; }
.apply-sm-cancel {
    background: #fff; color: #2D3E50; border: 1px solid #cbd5e1;
    border-radius: var(--r-md, 6px); padding: 4px 12px; font-size: 0.78rem; font-weight: 500;
}
.apply-sm-cancel:hover { background: #f8fafc; color: #2D3E50; border-color: #2D3E50; }
.apply-sm-body { color: #2D3E50; font-size: 0.86rem; padding: 16px 20px; }
.apply-sm-mt-3 { margin-top: 16px; }
.apply-sm-overflow {
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    border-radius: var(--r-md, 6px); padding: 10px 12px; font-size: 0.82rem;
    display: flex; gap: 8px; align-items: flex-start;
}
.apply-sm-overflow i { margin-top: 2px; }
.apply-sm-footer {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px; padding: 12px 20px 18px; border-top: 1px solid #e2e8f0;
}
.apply-sm-action-btn {
    width: 100%; text-align: center;
    background: #0d9488; color: #fff; border: 1px solid #0d9488;
    border-radius: var(--r-md, 6px); padding: 8px 14px; font-size: 0.86rem; font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.apply-sm-action-btn:hover:not(:disabled) { background: #0b7a6f; border-color: #0b7a6f; color: #fff; }
.apply-sm-action-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.apply-sm-loading { background: #2D3E50; border-color: #2D3E50; }
/* Badge "Migration incomplète" sur la liste des modèles de planning admin */
.sm-index-badge-incomplete {
    margin-left: 8px; background: #fef3c7; color: #92400e; border-radius: var(--r-sm, 3px);
    padding: 2px 8px; font-size: 0.68rem; font-weight: 600;
    border: 1px solid #fde68a; cursor: help;
}
.sm-index-badge-incomplete i { font-size: 0.62rem; margin-right: 3px; }

/* Bandeau "Migration incomplète" en haut de l'écran d'édition d'un modèle */
.sm-incomplete-banner {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--r-lg, 10px);
    padding: 12px 16px; margin: 8px 0 16px;
}
.sm-incomplete-icon { color: #92400e; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.sm-incomplete-body { color: #92400e; font-size: 0.82rem; flex: 1; }
.sm-incomplete-title { font-weight: 600; margin-bottom: 4px; }
.sm-incomplete-text { font-weight: 400; margin-bottom: 6px; }
.sm-incomplete-list { margin: 0; padding-left: 18px; font-weight: 500; }
.sm-incomplete-list li { margin-bottom: 2px; }

/* Toggle "Modèle actif" bloqué quand jalons incomplets */
.sm-active-toggle-blocked { opacity: 0.6; cursor: not-allowed; }
.sm-active-toggle-blocked input { cursor: not-allowed; }

/* "Laisser déborder" : option neutre/secondaire (pas d'ajustement des dates projet) */
#apply-sm-overflow-keep { background: #e6f7f5; color: #0d9488; border-color: #b8e5df; }
#apply-sm-overflow-keep:hover:not(:disabled) { background: #d2efeb; color: #0b7a6f; border-color: #0d9488; }

/* Point 6 : aligner le spacing vertical de la checklist drawer Admin sur celui du drawer User.
   Côté user, les rows sont en form-group sans margin-bottom supplémentaire ; côté admin, le
   form prototype peut introduire un margin par défaut. On force une valeur réduite. */
.drw-task-checklist-template .form-group { margin-bottom: 4px; }
.drw-task-checklist-template .row { margin-bottom: 0; }
.drw-task-checklist-template .col-sm-12,
.drw-task-checklist-template [class^="col-"] { padding-top: 2px; padding-bottom: 2px; }

/* =========================================================================
   Todo/Plannings — vue Liste refondue (DS navy/teal/blanc)
   Préfixe .tdl-* (Todo List). Réutilise au maximum les classes existantes
   .fin-btn, .fin-filter-btn, .view-switch, .tasks-fin-card, .tasks-list-header,
   .task-item, .task-col-* — pas de duplication.
   ========================================================================= */

/* ── Panneau de filtres avancés (collapse) ──────────────────────────────── */
.tdl-filters-panel {
    margin: 8px 40px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-lg, 10px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    padding: 16px 20px;
}
.tdl-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 20px;
    margin-bottom: 12px;
}
.tdl-filter-cell { display: flex; flex-direction: column; gap: 4px; }
.tdl-filter-cell label {
    font-size: 0.72rem; font-weight: 400; color: #8fa1b3; margin: 0;
}
.tdl-filter-cell-wide { grid-column: span 2; }
.tdl-filter-cell-checkbox { flex-direction: row; align-items: center; gap: 6px; align-self: end; padding-bottom: 6px; }
.tdl-filter-cell-checkbox label { font-size: 0.79rem; color: #2D3E50; font-weight: 500; }
.tdl-filters-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tdl-filters-count {
    display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
    background: #0d9488; color: #fff; border-radius: var(--r-sm, 3px);
    font-size: 0.62rem; font-weight: 600; text-align: center; line-height: 16px;
}

/* ── Sections temporelles ───────────────────────────────────────────────── */
/* Scroll interne sur .tdl-sections (overflow-y:auto + max-height) pour que le
   toolbar/filtres en haut restent fixes et que les sticky internes (section header,
   columns header) s'ancrent dans ce conteneur scrollable. */
/* Zone scrollable unifiee : englobe le panneau Filtres avances + .tdl-sections.
   L'ouverture du panel est absorbee par ce scroll interne, plus de scrollbar page parasite.
   Estimation chrome au-dessus : navbar (~48) + subbar (~50) + onglets (~40) + action row (~50) + marges = ~200px. */
.tdl-scroll-zone {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.tdl-scroll-zone::-webkit-scrollbar { width: 6px; }
.tdl-scroll-zone::-webkit-scrollbar-track { background: transparent; }
.tdl-scroll-zone::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 3px; }
.tdl-scroll-zone::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.tdl-sections {
    /* Pas de padding ici : la .ds-scroll-zone parent fournit déjà padding: 0 40px 24px.
       Sinon padding cumulé = 80px (régression alignement gabarit, signalée étape 3b). */
    padding: 0;
}
.tdl-sections::-webkit-scrollbar { width: 6px; }
.tdl-sections::-webkit-scrollbar-track { background: transparent; }
.tdl-sections::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 3px; }
.tdl-sections::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Section header sticky en haut du scroll container.
   IMPORTANT : .tdl-section ne doit PAS avoir overflow:hidden (déjà retiré plus haut).
   On lui donne une bordure top + côtés pour visuellement prolonger la box du section
   quand le scroll fait disparaitre la vraie bordure-top du section. */
.tdl-section-header {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0;
    margin: -1px -1px 0; /* compense les bordures pour aligner sur la box du section au repos */
}
/* Header de colonnes sticky DIRECTEMENT sous le header de section (sans gap 1px).
   On utilise 41px (au lieu de 42) + bordure top pour overlap parfait.
   Migré étape 3b : .tasks-list-header → .ds-list-header (Tdl context). */
.tdl-section .ds-list-header {
    position: sticky;
    top: 41px;
    z-index: 5;
    background: #fff;
    border-top: 1px solid rgba(45,62,80,0.35);
    margin-top: -1px;
}
.tdl-section {
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 16px;
    /* PAS d'overflow:hidden : casserait position:sticky des headers internes.
       Migré étape 3b : passage en borderless conforme gabarit .ds-card. */
}
.tdl-section-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(45,62,80,0.35);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.tdl-section-header:hover { background: #f9fafb; }
.tdl-section-header i:first-child { font-size: 0.88rem; width: 18px; text-align: center; }
.tdl-section-title { flex: 1; font-size: 0.86rem; font-weight: 500; color: #2D3E50; }
.tdl-section-count {
    display: inline-block; min-width: 22px; padding: 2px 8px;
    background: #e6f7f5; color: #0d9488; border-radius: var(--r-sm, 3px);
    font-size: 0.65rem; font-weight: 600;
}
.tdl-section-chevron { font-size: 0.62rem; color: #8fa1b3; transition: transform 0.18s; }
.tdl-section-collapsed .tdl-section-chevron { transform: rotate(-90deg); }
.tdl-section-collapsed .tdl-section-body { display: none; }
.tdl-section-empty { display: none; }
.tdl-section-body { padding: 0; }

/* Icônes thématiques par tranche */
.tdl-icon-late  { color: #dc3545; }
.tdl-icon-today { color: #fd7e14; }
.tdl-icon-near  { color: #0d9488; }
.tdl-icon-mid   { color: #6b7280; }
.tdl-icon-far   { color: #94a3b8; }
.tdl-icon-completed { color: #0d9488; }
.tdl-section-hint { font-size: 0.7rem; color: #8fa1b3; font-style: italic; font-weight: 400; margin-left: 8px; }

/* ── Conteneur de lignes (réutilise .tasks-fin-card du projet) ─────────── */
.tdl-section .tasks-fin-card { border: none; box-shadow: none; border-radius: 0; max-height: none; overflow: visible; }
.tdl-section-rows { background: #fff; }

/* Colonne Projet/Fournisseur (spécifique Todo) */
.task-col-projet {
    width: 280px; flex-shrink: 0;
    padding: 0 8px;
    display: flex; align-items: center;
    font-size: 0.75rem; color: var(--fin-text-mid);
    overflow: hidden;
}
/* Override : dans le header de colonnes (.ds-list-header), .task-col-projet doit
   hériter du style header (uppercase muted) pour être cohérent avec les autres
   colonnes — sinon le titre "Projet / Fournisseur" se distingue visuellement. */
.ds-list-header .task-col-projet,
.ds-list-header .task-col-titre,
.ds-list-header .task-col-porteur,
.ds-list-header .task-col-progress,
.ds-list-header .task-col-echeance,
.ds-list-header .task-col-checklist,
.ds-list-header .task-col-priorite {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
/* Override spécifique header : la colonne Avancement est align-items:center dans les rows
   (pour centrer le slider) mais le TITRE doit être aligné à gauche comme les autres titres. */
.ds-list-header .task-col-progress { align-items: flex-start; padding-left: 0; }
.task-col-projet .tdl-projet-link,
.task-col-projet .tdl-supplier-link {
    display: inline-block;          /* width:auto au lieu de 100% pour que l'underline */
    max-width: 100%;                /* hover ne s'étale pas sur toute la cellule. */
    color: var(--fin-text-mid);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.12s;
}
/* Hover lien : underline dashed teal — aligné gabarit .ds-cell-link (pattern moderne). */
.task-col-projet .tdl-projet-link,
.task-col-projet .tdl-supplier-link {
    border-bottom: 1px dashed transparent;
    transition: color 0.12s, border-color 0.12s;
}
.task-col-projet .tdl-projet-link:hover,
.task-col-projet .tdl-supplier-link:hover {
    color: #0d9488;
    text-decoration: none;
    border-bottom-color: #0d9488;
}
.task-col-projet .tdl-projet-orphan { color: #cbd5e1; font-style: italic; }
/* Override obsolète .tasks-list-header retiré — désormais géré par .ds-list-header
   ci-dessus (override section avec inherit). */
/* La row elle-même ne doit pas reprendre les fonds violets/bleus du module Todo */
.tdl-row.task-delegated, .tdl-row.task-other { background-color: #fff !important; }
.tdl-row.task-delegated .ds-row, .tdl-row.task-other .ds-row { background-color: #fff !important; }

/* Style row Terminée : titre barré, couleur muted — uniforme sur Action ET Jalon */
.tdl-row.task-completed .task-name-input,
.tdl-row.task-completed .task-name-text {
    text-decoration: line-through;
    color: #8fa1b3 !important;
}
.tdl-row.task-completed .task-col-titre .task-row-open-eye { opacity: 0.5; }

/* Le form theme custom `bootstrap_4.html.twig` enveloppe certains form_widget dans
   un <div class="input-group">. Sur les rows Todo (layout flex), ce wrapper crée un
   bloc flex inattendu qui peut faire déborder le widget (notamment le selectpicker
   priority qui apparaissait flottant entre les rows). `display: contents` rend ces
   wrappers transparents au layout : leurs enfants héritent du flex de .tasks-list-row. */
.tdl-row .ds-row .input-group { display: contents !important; }

/* Garde-fou : tout enfant direct du <form> de la row qui n'est PAS .tasks-list-row
   est masqué. Cible le bug du widget priority rendu hors de sa cellule par form_rest
   (input-group wrapper avec selectpicker flottant). Le _token hidden reste fonctionnel
   pour la soumission (les inputs hidden n'ont pas besoin d'être visibles). */
.tdl-row > form > *:not(.ds-row) { display: none !important; }

/* ── Sous-titre Contrat (—Fin / —Préavis) dans la cellule titre ────────── */
.tdl-contract-sub { color: #8fa1b3; font-size: 0.72rem; font-weight: 400; }

/* ── Badge type Contrat (icône) ────────────────────────────────────────── */
.task-col-type .contract-flag-badge { font-size: 13px; color: #fd7e14; display: flex; align-items: center; justify-content: center; }
.tdl-row-contract { border-left: 3px solid #fd7e14; }

/* ── Badge type Jalon legacy (flag outline + couleur tamisée) ──────────── */
.task-col-type .milestone-flag-badge-legacy { color: #94a3b8 !important; }

/* ── Badge statut Contrat (mini pilule colorée) ────────────────────────── */
.contract-status-badge {
    display: inline-block; padding: 1px 8px;
    border: 1px solid;
    border-radius: var(--r-sm, 3px);
    font-size: 0.66rem; font-weight: 500;
    line-height: 1.5;
}

/* ── Filtres typologies client-side (cache les lignes hors typologie) ──── */
.tdl-filter-action    .tdl-row-milestone,
.tdl-filter-action    .tdl-row-contract     { display: none; }
.tdl-filter-milestone .tdl-row-action,
.tdl-filter-milestone .tdl-row-contract     { display: none; }
.tdl-filter-contract  .tdl-row-action,
.tdl-filter-contract  .tdl-row-milestone    { display: none; }

/* ── État vide ─────────────────────────────────────────────────────────── */
.tdl-empty {
    margin: 40px 40px;
    padding: 48px 24px;
    background: #fff;
    border: 1px dashed #e2e8f0;
    border-radius: var(--r-lg, 10px);
    text-align: center;
    color: #8fa1b3;
}
.tdl-empty i { font-size: 2.5rem; color: #b8e5df; margin-bottom: 16px; }
.tdl-empty-title { font-size: 1rem; font-weight: 500; color: #2D3E50; margin-bottom: 8px; }
.tdl-empty-text { font-size: 0.86rem; color: #8fa1b3; }



/* ─── Todo/Plannings : Header navy + subbar + onglets (refonte 2026-05) ─── */
.tdl-page-header { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; min-height: 64px; background: var(--com-navy-dark, #1a3347); color: #fff; gap: 16px; }
.tdl-page-header-left { display: flex; align-items: center; gap: 14px; }
.tdl-page-header-icon { width: 36px; height: 36px; border-radius: var(--r-lg, 10px); background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.90); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.tdl-page-header-info { display: flex; flex-direction: column; }
.tdl-page-header-title { font-size: 0.90rem; font-weight: 700; color: #fff; }
.tdl-page-header-right { display: flex; align-items: center; gap: 16px; }

.tdl-view-switch { display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-md, 6px); padding: 2px; gap: 2px; }
.tdl-view-switch-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; border-radius: var(--r-md, 6px); cursor: pointer; }
.tdl-view-switch-item:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
.tdl-view-switch-item.active { background: rgba(255,255,255,0.18); color: #fff; }
.tdl-view-switch-item i { font-size: 0.75rem; }

.tdl-period-filter { display: inline-flex; align-items: center; gap: 6px; }
.tdl-period-label { font-size: 0.74rem; color: rgba(255,255,255,0.70); margin: 0 6px 0 0; text-transform: uppercase; letter-spacing: 0.5px; }
.tdl-period-input, .tdl-period-filter input { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #fff; border-radius: var(--r-md, 6px); padding: 4px 8px; font-size: 0.78rem; width: 96px; }
.tdl-period-input::placeholder { color: rgba(255,255,255,0.55); }
.tdl-period-sep { color: rgba(255,255,255,0.55); font-size: 0.8rem; }
.tdl-period-mode-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: var(--r-md, 6px); padding: 4px 10px; font-size: 0.74rem; cursor: pointer; }
.tdl-period-mode-btn:hover { background: rgba(255,255,255,0.25); }

/* ─── Subbar : Filtres + Affichage pills + Terminées ─── */
.tdl-subbar { display: flex; align-items: center; gap: 8px; padding: 12px 40px 0; flex-wrap: wrap; }
.tdl-subbar-filter-btn { margin-right: 8px; }
.tdl-subbar-label { font-size: 0.74rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 4px; }
.tdl-subbar-sep { display: inline-block; width: 1px; height: 22px; background: #e2e8f0; margin: 0 6px; }
.tdl-filters-count { background: #0d9488; color: #fff; border-radius: var(--r-sm, 3px); padding: 0 5px; font-size: 0.66rem; font-weight: 600; margin-left: 4px; line-height: 1.4; }

/* ─── Onglets ─── */
.tdl-tabs { border-bottom: 1px solid #e2e8f0; padding: 12px 40px 0; margin: 0; flex-wrap: wrap; }
.tdl-tabs .nav-item { margin-bottom: -1px; }
.tdl-tab.nav-link { color: #8fa1b3; font-size: 0.84rem; font-weight: 500; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--r-md, 6px) var(--r-md, 6px) 0 0; }
.tdl-tab.nav-link:hover { color: #2D3E50; border-color: transparent; background: transparent; }
.tdl-tab.nav-link.active { color: #2D3E50; font-weight: 600; background: #fff; border-color: #e2e8f0 #e2e8f0 #fff; }

/* ─── Bouton + Ajouter sous les onglets ─── */
.tdl-add-action { padding: 16px 40px 0; display: flex; justify-content: flex-end; }


/* ─── Todo/Plannings : bandeau d'aide sous les onglets + flag perso ─── */
.tdl-tab-hint { display: flex; align-items: center; gap: 8px; padding: 12px 40px 0; font-size: 0.78rem; color: #64748b; }
.tdl-tab-hint i { color: #94a3b8; }
.tdl-projet-flag-perso { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 500; padding: 2px 8px; border-radius: 100px; background: #fef9c3; color: #92670a; border: 1px solid #fde68a; white-space: nowrap; }
/* Badge "stand by" : pour les actions/jalons des projets STATUS_PAUSED. Style neutre gris
   (information secondaire, pas une alerte) — visuellement discret a cote du nom du projet. */
.tdl-projet-standby { display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 500; padding: 1px 6px; margin-left: 6px; border-radius: var(--r-sm, 3px); background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }


/* ─── Project activity toolbar : icônes "+ Action / + Document / + Note" ─── */
#sp-body-activity .spa-add-btn { font-size: 13px; color: #cfd8dc; cursor: pointer; transition: color .15s; line-height: 1; padding: 0 2px; }
#sp-body-activity .spa-add-btn:hover { color: #00695c; }
.spa-add-btn { font-size: 13px; color: #cfd8dc; cursor: pointer; transition: color .15s; line-height: 1; padding: 0 2px; }
.spa-add-btn:hover { color: #00695c; }


/* ─── Todo/Plannings : redesign top de page (2026-05-27) ─── */

/* Subbar ligne 1 : Filtres + Reset + Période */
.tdl-subbar { padding: 14px 40px 0; gap: 8px; }
.tdl-reset-btn { padding: 6px 9px; }
.tdl-reset-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.tdl-reset-btn i { font-size: 0.78rem; }
.tdl-subbar .tdl-period-filter { margin-left: 8px; }

/* Période : couleurs claires (subbar fond clair, plus le navy du header) */
.tdl-subbar .tdl-period-label { color: #64748b; }
.tdl-subbar .tdl-period-input { background: #fff; border: 1px solid #e2e8f0; color: #2D3E50; }
.tdl-subbar .tdl-period-input::placeholder { color: #94a3b8; }
.tdl-subbar .tdl-period-sep { color: #94a3b8; }
/* Texte en gris medium (#64748b) au lieu de navy (#2D3E50) pour reduire le poids visuel
   et laisser la priorite aux dates et a l'onglet actif. */
.tdl-subbar .tdl-period-mode-btn { background: #fff; border: 1px solid #e2e8f0; color: #64748b; }
.tdl-subbar .tdl-period-mode-btn:hover { background: #f1f5f9; color: #475569; }

/* Affichage : encadré sur le pattern .com-filters-wrap */
.tdl-display-wrap { position: relative; margin: 24px 40px 0; }
.tdl-display-label { position: absolute; top: -7px; left: 12px; padding: 0 6px; background: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa1b3; line-height: 1; z-index: 1; pointer-events: none; }
.tdl-display-box { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); padding: 8px 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tdl-display-pill { font-size: 0.73rem; font-weight: 500; color: #a0aec0; padding: 3px 10px; border-radius: var(--r-sm, 3px); background: #f1f3f5; text-decoration: none; border: 1px solid transparent; transition: color 0.12s, background 0.12s; display: inline-flex; align-items: center; gap: 4px; }
.tdl-display-pill i { font-size: 0.72rem; }
/* Hover : texte teal (au lieu du navy fonce qui faisait trop "noir"), bg teal tres clair. */
.tdl-display-pill:hover { color: #0d9488; background: #f0fbf9; text-decoration: none; }
.tdl-display-pill.active, .tdl-display-pill.filter-on { background: #e6f7f5; color: #0d9488; border-color: #0d9488; font-weight: 600; }
.tdl-display-sep { display: inline-block; width: 1px; height: 18px; background: #e2e8f0; margin: 0 4px; }

/* Action row : hint à gauche + bouton Ajouter à droite, aligné bords tableau */
.tdl-action-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 40px 0; gap: 16px; }
.tdl-action-row .tdl-tab-hint { padding: 0; flex: 1; min-width: 0; }
.tdl-add-btn { flex-shrink: 0; white-space: nowrap; }


/* ─── Todo/Plannings : ajustements design 2026-05-27 (itération suite screenshot) ─── */

/* #4 — Label "Dates début et fin de projets" : même style que "AFFICHAGE" */
.tdl-subbar .tdl-period-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa1b3;
    margin: 0 8px 0 4px;
}

/* #2 — Bouton Filtres et Reset : hauteur alignée sur l'encadré Affichage (~38px) */
.tdl-subbar .tdl-subbar-filter-btn,
.tdl-subbar .tdl-reset-btn { padding: 8px 14px; min-height: 34px; display: inline-flex; align-items: center; }
.tdl-subbar .tdl-reset-btn { padding: 8px 12px; }

/* Subbar pour aligner verticalement les éléments enfants */
.tdl-subbar { align-items: center; }
.tdl-subbar .tdl-period-filter { align-items: center; }

/* #3 — Pills Affichage : largeur égale + espacement */
.tdl-display-box { gap: 8px; padding: 8px 14px; }
.tdl-display-pill { min-width: 110px; justify-content: center; padding: 6px 12px; }
.tdl-display-pill:last-child { min-width: 150px; } /* "Actions réalisées" est plus long */

/* #1 — Hint + Bouton "Ajouter" alignés sur les bords de la box .tdl-section.
   .tdl-sections a padding 40px et la section box est à left=40px de la page.
   Le padding de l'action-row doit donc être 40px aussi. Si l'alignement visuel
   reste off, c'est dû à un padding parent → utiliser margin pour matcher .tdl-section. */
.tdl-action-row { padding: 16px 40px 0; }
.tdl-action-row .tdl-tab-hint { padding: 0 !important; margin: 0; }


/* ─── Todo/Plannings : fine-tuning design 2026-05-27 (itération 3) ─── */

/* #1 — Alignement hint+bouton sur les bords du tableau.
   .tasks-outer-wrapper a un padding 40px caché qui décale .tdl-sections de 40px de plus.
   Total padding du tableau = 40 (outer-wrapper) + 40 (.tdl-sections) = 80px depuis l'edge page.
   Pour aligner l'action-row, on porte son padding horizontal à 80px. */
.tdl-action-row { padding: 16px 80px 0 !important; }

/* On uniformise tabs + display-wrap + subbar pour cohérence visuelle (tous à 40px reste OK,
   c'est juste la box .tdl-section qui est plus rétrécie à cause du wrapper imbriqué). */

/* #2 — Décale le bloc Période à droite dans la subbar (margin-left: auto pousse à droite). */
.tdl-subbar .tdl-period-filter { margin-left: auto; }

/* Placeholders visibles avec couleur plus claire */
.tdl-subbar .tdl-period-input::placeholder { color: #94a3b8; font-style: normal; }

/* #3 — Espace doublé entre pills + "Actions clôturées" tout à droite (margin-left: auto) */
.tdl-display-box { gap: 16px; }
.tdl-display-pill.tdl-display-completed { margin-left: auto; }

/* #4 — Onglets : tous même largeur via flex-grow, espace augmenté */
.tdl-tabs { gap: 8px; padding: 12px 40px 0; }
.tdl-tabs .nav-item { flex: 1 1 0; }
.tdl-tab.nav-link { text-align: center; padding: 10px 16px; }


/* ─── Todo/Plannings : fine-tuning design 2026-05-27 (itération 4 : final align) ─── */

/* #1 — Alignement parfait : .tdl-action-row maintenant INSIDE .tasks-outer-wrapper >
   .col-md-12 (sibling de .tdl-sections). Le parent immédiat .col-md-12 sans padding
   donne x=0 relatif au wrapper. Le wrapper a padding 40px → action-row outer-left à 40px
   depuis page-left. .tdl-sections a padding 40px → .tdl-section box à 80px depuis page-left.
   On porte le padding de .tdl-action-row à 40px pour matcher la position interne. */
.tdl-action-row { padding: 16px 40px 0 !important; }

/* #2 — Période RESTE à la suite du bouton Filtres + Reset, avec un séparateur visuel. */
.tdl-subbar .tdl-period-filter { margin-left: 0; }
.tdl-period-sep-vertical { display: inline-block; width: 1px; height: 22px; background: #e2e8f0; margin: 0 8px; }

/* #4 — Onglets : même largeur via min-width sur chaque onglet, sans stretching forcé.
   On retire flex-grow et on impose une largeur minimum confortable. Le centrage du
   contenu est conservé. */
.tdl-tabs { gap: 12px; padding: 12px 40px 0; flex-wrap: wrap; }
.tdl-tabs .nav-item { flex: 0 0 auto; }
.tdl-tab.nav-link { min-width: 220px; text-align: center; padding: 10px 16px; }


/* ─── Todo/Plannings : itération 5 (alignement strict + onglets teal) ─── */

/* Kill l'ancien .tdl-tab-hint padding qui s'ajoutait au padding de l'action-row.
   Cause de "hint trop décalé à droite" : 40 (wrapper) + 40 (action-row) + 40 (hint padding) = 120. */
.tdl-tab-hint { padding: 0 !important; }

/* Forcer le wrapper d'action sans padding-bottom 0 pour ne pas coller au tableau. */
.tdl-action-row { padding: 16px 40px 12px !important; align-items: center; }

/* Le bouton "Ajouter" ne doit pas avoir de marge à droite. */
.tdl-add-btn { margin: 0 !important; }

/* ─── Onglets : couleur teal au hover et sur actif ─── */
/* Style unifie onglets Todo/Plannings + Communaute (refonte 2026-05-31) :
   - repos : texte gris CLAIR (#94a3b8), fond transparent, bordure transparente
   - hover : fond teal tres clair, texte teal
   - actif : fond teal clair (plus marque que hover), texte teal, gras
   Pas de soulignement teal fonce sur l'actif → preservation du look "onglet". */
.tdl-tab.nav-link { color: #a0aec0 !important; }
.tdl-tab.nav-link:hover { color: #0d9488 !important; background: #f0fbf9; border-color: transparent; }
.tdl-tab.nav-link.active { color: #0d9488 !important; font-weight: 600; background: #e6f7f5; border-color: transparent !important; }
.tdl-tab.nav-link.active:hover { color: #0d9488 !important; background: #e6f7f5; }


/* ─── Todo/Plannings : itération 6 (taille bouton Ajouter + alignement strict) ─── */

/* #2 — Bouton "+ Ajouter" : même padding vertical que .tdl-display-pill (padding 6px 12px)
   pour atteindre une hauteur similaire visuellement. */
.tdl-add-btn { padding: 6px 14px !important; font-size: 0.75rem; line-height: 1.4; margin: 0 !important; }

/* #3 — Alignement strict : on cible la règle par sélecteur de parent pour garantir
   qu'elle prime sur toute autre, et on harmonise box-sizing. */
.tasks-outer-wrapper > .col-md-12 > .tdl-action-row {
    box-sizing: border-box !important;
    padding: 16px 40px 12px !important;
    margin: 0 !important;
}
.tasks-outer-wrapper > .col-md-12 > .tdl-action-row > .tdl-tab-hint {
    padding: 0 !important;
    margin: 0 !important;
}


/* ─── Todo/Plannings : itération 7 (alignement via margin strict + bouton clear dates) ─── */

/* Alignement strict en utilisant margin au lieu de padding. Plus prévisible : l'action-row
   est positionnée à exactement margin-left depuis col-md-12 (qui est à 40px du bord page),
   donc action-row outer-left = 40 + 40 = 80px = même que le bord gauche du .tdl-section.
   Pas de padding interne → les enfants (hint à gauche, bouton à droite) sont collés
   aux bords sans aucune marge propre. */
.tasks-outer-wrapper > .col-md-12 > .tdl-action-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 16px 40px 12px 40px !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}
.tasks-outer-wrapper > .col-md-12 > .tdl-action-row > .tdl-tab-hint {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}
.tasks-outer-wrapper > .col-md-12 > .tdl-action-row > .tdl-add-btn {
    margin: 0 !important;
    flex: 0 0 auto;
}

/* Bouton "× Effacer dates" : style discret, hauteur alignée sur les inputs date */
.tdl-period-clear-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    padding: 4px 8px;
    border-radius: var(--r-sm, 3px);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
}
.tdl-period-clear-btn:hover { color: #ef4444; background: #fef2f2; }


/* ─── Todo/Plannings : bouton chevron collapse/expand zone Affichage ─── */

.tdl-subbar { position: relative; }
.tdl-collapse-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 10px;
    border-radius: var(--r-md, 6px);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tdl-collapse-toggle:hover { background: #f1f5f9; color: #2D3E50; border-color: #cbd5e1; }
.tdl-collapse-toggle i { transition: transform 0.18s ease; }

/* Quand body.tdl-collapsed : icône inversée + zone Affichage/Onglets/hint masquée */
body.tdl-collapsed .tdl-collapse-toggle i { transform: rotate(180deg); }
body.tdl-collapsed .tdl-display-wrap,
body.tdl-collapsed .tdl-tabs,
body.tdl-collapsed .tasks-outer-wrapper > .col-md-12 > .tdl-action-row { display: none !important; }

/* Quand collapsé, on rapproche le tableau vers le haut (sinon trop de margin top accumulés). */
body.tdl-collapsed .tasks-outer-wrapper { padding-top: 0 !important; }


/* ─── Todo/Plannings : indicateurs en mode collapsed + marge ─── */

/* Indicateurs : cachés en mode normal, visibles en mode collapsed.
   Placement : entre le bouton +/- 6 mois et le chevron, à droite. */
.tdl-subbar-summary { display: none; margin-left: auto; align-items: center; gap: 8px; font-size: 0.78rem; color: #475569; }
body.tdl-collapsed .tdl-subbar-summary { display: inline-flex; }
.tdl-summary-chip { display: inline-flex; align-items: center; gap: 6px; }
.tdl-summary-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa1b3; }
.tdl-summary-value { color: #2D3E50; font-weight: 500; }
.tdl-summary-sep { color: #cbd5e1; padding: 0 4px; }
.tdl-summary-chip-completed { color: #0d9488; font-weight: 500; }
.tdl-summary-chip-completed i { font-size: 0.7rem; }

/* Quand collapsed : chevron reste à droite, mais le summary l'aspire avec margin-left: auto
   donc on retire le margin-left: auto du chevron en mode collapsed. */
body.tdl-collapsed .tdl-collapse-toggle { margin-left: 0; }

/* Marge sous la subbar en mode collapsed pour que les Filtres ne soient pas collés au tableau. */
body.tdl-collapsed .tdl-subbar { margin-bottom: 16px; }


/* ─── Todo/Plannings : icône info hint en teal pâle (subtle, non flashy) ─── */
.tdl-tab-hint i.fa-info-circle { color: #99d3c8 !important; font-size: 0.95rem; }


/* ─── Todo/Plannings : itération 11 (fix scroll page + style chevron actif + badges + scrollbar table) ─── */

/* Refonte 2026-05-30 : Affichage zone deplacee a l'interieur de .tdl-scroll-zone,
   chrome au-dessus reduit a header (~64) + subbar (~50) + onglets (~40) + marges = ~190px.
   En mode collapsed, onglets masques, chrome = ~130px. */
.tdl-scroll-zone { max-height: calc(100vh - 200px) !important; }
/* Collapsed : Affichage masquee (display:none) + onglets masquees, mais besoin de plus de
   marge sur la deduction car la navbar principale + chrome global de l'app n'est pas comprise
   dans nos 100vh. Le calcul empirique : 170px evite le debordement sous la navbar. */
body.tdl-collapsed .tdl-scroll-zone { max-height: calc(100vh - 170px) !important; }

/* === Filtrage par onglet en CSS pur (refonte 2026-05-30) ===========================
   Le serveur renvoie maintenant TOUTES les rows voter-autorisees. Chaque row est
   annotee avec data-tab-myprojects/myresp/perso. La bascule entre onglets devient une
   simple operation de classe sur <body> : zero requete, zero swap DOM, instantanee.
   Tab 'all' : pas de regle (toutes rows visibles).
   Tab 'completed' : geree separement (cas serveur dedie). */
body.tdl-tab-myprojects .tdl-row[data-tab-myprojects="0"] { display: none !important; }
body.tdl-tab-myresp .tdl-row[data-tab-myresp="0"] { display: none !important; }
body.tdl-tab-perso .tdl-row[data-tab-perso="0"] { display: none !important; }

/* Pills Affichage contextuelles : on masque celles qui n'ont aucune ligne possible sur
   l'onglet courant (evite le bug de combinaison vide observe sur myProjects x Contrats). */
body.tdl-tab-myprojects #tdl-filter-type-contract { display: none !important; }
body.tdl-tab-perso #tdl-filter-type-milestone,
body.tdl-tab-perso #tdl-filter-type-contract { display: none !important; }
/* Perso : seul reste "Tous" + "Actions" → 2 pills équivalentes, on masque toute la zone.
   Sélecteur migré étape 3b : .tdl-display-wrap → .ds-display-wrap. */
body.tdl-tab-perso .ds-display-wrap { display: none !important; }

/* Affichage zone : placee dans .tdl-scroll-zone, entre le panneau Filtres et .tdl-sections.
   Suppression de l'encadre (box) et du label "AFFICHAGE :" — les pills sont auto-explicites.
   Padding horizontal 40px pour aligner avec .tdl-sections (qui a aussi padding 40px).
   Sticky top:0 pour rester visible quand on scrolle dans .tdl-scroll-zone (z-index 7 pour
   passer au-dessus des section-header qui sont sticky top:0 z-index:6). */
.tdl-display-wrap {
    margin: 0 !important;
    padding: 12px 40px 8px !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 7;
    background: #fff;
}
/* Section header : sticky en-dessous de la zone Affichage (offset = hauteur Affichage ~45px).
   Quand l'Affichage est masque (onglets Perso / Terminees / collapsed), le top revient a 0
   pour eviter une zone blanche fantome au-dessus de la 1re section + le chevauchement
   header/1re ligne du tableau. */
.tdl-scroll-zone .tdl-section-header { top: 45px !important; }
body.tdl-tab-perso .tdl-scroll-zone .tdl-section-header,
body.tdl-tab-completed .tdl-scroll-zone .tdl-section-header,
body.tdl-collapsed .tdl-scroll-zone .tdl-section-header { top: 0 !important; }
.tdl-display-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Onglet "Terminees" : cas serveur dedie, pas de pills Affichage ni de bouton +Ajouter
   (+ Action ET + Jalon : le second, ajoute par jalon-as-task, avait ete oublie - R13 2026-09-16). */
body.tdl-tab-completed .tdl-display-wrap,
body.tdl-tab-completed .tdl-action-row,
body.tdl-tab-completed #open-new-task-modal-button,
body.tdl-tab-completed #open-new-milestone-modal-button { display: none !important; }

/* Bouton "+ Ajouter" deplace dans la subbar (refonte 2026-05-30) : taille reduite pour
   matcher la hauteur du chevron Collapse et autres elements de la subbar. */
.tdl-add-btn-subbar {
    /* margin-left: auto pousse le bouton tout a droite. Le chevron Collapse a aussi
       margin-left:auto par defaut → on l'override en sibling selector ci-dessous pour
       eviter une distribution equitable de l'espace (sinon gap entre +Ajouter et chevron). */
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 6px 14px !important;
    font-size: 0.78rem;
    line-height: 1.2;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tdl-add-btn-subbar i { font-size: 0.72rem; }
/* Le chevron Collapse, quand precede par +Ajouter, perd son margin-left:auto et se colle
   au bouton (gap 8px du flex container). */
.tdl-add-btn-subbar + .tdl-collapse-toggle { margin-left: 0 !important; }
/* Quand collapse est replie : le .tdl-subbar-summary prend le margin-left auto, le bouton
   suit immediatement derriere (margin gauche normal, pas auto). */
body.tdl-collapsed .tdl-add-btn-subbar { margin-left: 8px !important; }

/* Separateur visuel entre les 4 onglets de perimetre et l'onglet Terminees. */
.tdl-tab-separator {
    width: 24px;
    pointer-events: none;
}

/* Action row sans bandeau hint : aligne le bouton +Ajouter a droite (le hint est
   remplace par les tooltips Bootstrap sur chaque onglet, cf .tdl-tab data-toggle). */
.tdl-action-row-end { justify-content: flex-end !important; }

/* === UX de chargement : barre de progression fine top (refonte 2026-05-30) =========
   Affichee pendant toute requete AJAX en vol (tdlRefresh, tdlLazyLoadRest, filter
   submit). Pattern Turbo/GitHub : 3px fixe top, gradient teal, animation indeterminee.
   Cachee par defaut, .is-active pour la rendre visible. */
.tdl-progress-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tdl-progress-bar::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg, transparent 0%, #0d9488 50%, transparent 100%);
    animation: tdl-progress-slide 1.1s ease-in-out infinite;
}
.tdl-progress-bar.is-active { opacity: 1; }
@keyframes tdl-progress-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Overlay localise sur la zone scrollable : montre pendant la soumission du form filtres
   (rechargement serveur). Garde les rows visibles mais grisees pour signifier "remplacement". */
.tdl-scroll-zone { position: relative; }
.tdl-scroll-zone.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    z-index: 5;
    pointer-events: none;
}

/* #1 — Chevron collapsed : style teal actif (cohérence avec pills Affichage actives) */
body.tdl-collapsed .tdl-collapse-toggle {
    background: #e6f7f5;
    color: #0d9488;
    border-color: #0d9488;
}
body.tdl-collapsed .tdl-collapse-toggle:hover { background: #d4f1ee; color: #0d9488; border-color: #0d9488; }

/* #3 — Badge style pour les valeurs du summary + alignement vertical + marge avant chevron */
.tdl-subbar-summary { gap: 12px; }
.tdl-summary-chip { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.tdl-summary-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa1b3; line-height: 1; }
.tdl-summary-value {
    background: #f1f5f9;
    color: #2D3E50;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    display: inline-block;
}
body.tdl-collapsed .tdl-collapse-toggle { margin-left: 16px; }

/* #4 — Compensation scrollbar interne (.tdl-sections custom 6px) : padding-right réduit
   de 6px côté droit pour que la box .tdl-section ait visuellement la même marge à gauche
   et à droite (la scrollbar mange 6px de l'intérieur). */
/* Ancienne compensation scrollbar retirée étape 3b — désormais gérée par .ds-scroll-zone parent. */
.tdl-sections { /* padding-right: 34px !important; supprimé étape 3b */ }


/* ─── Todo/Plannings : itération 12 (border-radius 2px badges + outline focus + marge) ─── */

/* #1 — Border-radius 2px (Design system reference) sur tous les badges */
.tdl-summary-value { border-radius: var(--r-lg, 10px)!important; }
.tdl-projet-flag-perso { border-radius: var(--r-sm, 3px)!important; }

/* #3 — Retire l'outline noir focus/active sur boutons chevron et année pleine */
#tdl-collapse-toggle:focus,
#tdl-collapse-toggle:active,
#tdl-collapse-toggle:focus-visible,
#tdl-period-mode-btn:focus,
#tdl-period-mode-btn:active,
#tdl-period-mode-btn:focus-visible,
#tdl-period-clear-btn:focus,
#tdl-period-clear-btn:active,
#tdl-period-clear-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* #4 — Réduit la marge top entre la zone Onglets et l'Action row (hint + bouton Ajouter) */
.tasks-outer-wrapper > .col-md-12 > .tdl-action-row {
    margin-top: 8px !important;
}


/* ─── Todo/Plannings : border-radius 2px sur badge "Privé" (Design system reference) ─── */
.task-access-badge { border-radius: var(--r-sm, 3px)!important; }


/* ─── Todo/Plannings : panneau filtres avancés — titre + compact aligné gauche ─── */

/* Panel : moins large + aligné à gauche au lieu d'occuper toute la largeur */
.tdl-filters-panel {
    max-width: 720px !important;
    margin: 8px 40px 16px !important;
    padding: 16px 20px 12px !important;
    position: relative;
}

/* Titre "Filtres" en coin haut-gauche, style cohérent avec les labels uppercase */
.tdl-filters-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa1b3;
    margin-bottom: 10px;
}

/* Grid 2 colonnes pour une zone plus compacte (au lieu de 3) */
.tdl-filters-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 16px !important; }


/* ─── Todo/Plannings : bouton Filtres en état actif (panel ouvert) ─── */
.tdl-subbar-filter-btn.is-open {
    background: #e6f7f5 !important;
    color: #0d9488 !important;
    border-color: #0d9488 !important;
}
.tdl-subbar-filter-btn.is-open:hover {
    background: #d4f1ee !important;
    color: #0d9488 !important;
    border-color: #0d9488 !important;
}
.tdl-subbar-filter-btn .fa-chevron-down { transition: transform 0.18s ease; }
.tdl-subbar-filter-btn.is-open .fa-chevron-down { transform: rotate(180deg); }


/* ─── Todo/Plannings : champs de sélection des filtres — moins larges + contour gris ─── */
.tdl-filters-panel .tdl-filter-cell { max-width: 240px; }
.tdl-filters-panel .tdl-filter-cell .bootstrap-select { width: 100% !important; }
.tdl-filters-panel .tdl-filter-cell .bootstrap-select > .dropdown-toggle,
.tdl-filters-panel .tdl-filter-cell .bootstrap-select > .btn {
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #2D3E50 !important;
    box-shadow: none !important;
    border-radius: var(--r-md, 6px)!important;
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
    min-height: 32px !important;
}
.tdl-filters-panel .tdl-filter-cell .bootstrap-select > .dropdown-toggle:hover,
.tdl-filters-panel .tdl-filter-cell .bootstrap-select > .btn:hover {
    border-color: #94a3b8 !important;
}
.tdl-filters-panel .tdl-filter-cell .bootstrap-select > .dropdown-toggle:focus,
.tdl-filters-panel .tdl-filter-cell .bootstrap-select > .btn:focus {
    border-color: #0d9488 !important;
    outline: none !important;
}
/* Grid : on réduit le gap horizontal pour la cohérence avec les champs moins larges */
.tdl-filters-grid { gap: 10px 12px !important; }


/* ─── Communauté : refonte onglets Équipe/Entreprise au style Todo/Plannings (2026-05-28) ───
   Reproduit le style des onglets .tdl-tabs/.tdl-tab : carte underlined teal (#0d9488),
   fond blanc sur actif, fusion avec le contenu via border-bottom blanc.
   On ne touche PAS au markup .com-switcher-tab → toute la mécanique existante (max-width,
   ellipsis .com-switcher-tab-text, overflow "+" dropdown, badges non-lus) reste en place. */

/* Reset visuel : annule les anciens styles "bordure basse 3px + fond teinté" */
.com-switcher-tab,
.com-switcher-tab:hover,
.com-switcher-tab.active {
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    border-radius: var(--r-md, 6px) var(--r-md, 6px) 0 0!important;
}
/* Désactive l'underline animé du pseudo-élément (incompatible avec le style "carte") */
.com-switcher-tab::after { display: none !important; }

/* Ligne sous toute la barre d'onglets : remplace le border-bottom de .com-switcher-bar
   pour que les onglets actifs viennent s'y "coller" en cassant la ligne (effet carte). */
.com-switcher-bar { border-bottom: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }
.com-switcher { border-bottom: 1px solid #e2e8f0; padding: 12px 0 0; gap: 12px; align-items: flex-end; }
.com-switcher-left { padding: 0 20px; border-bottom: 1px solid transparent; align-items: flex-end; }

/* Tabs : repos = texte gris CLAIR (#a0aec0), sans bordure visible. Aligne sur .tdl-tab. */
.com-switcher-tab {
    color: #a0aec0 !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    margin-bottom: -1px;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
}

/* Hover : fond teal tres clair + texte teal (refonte 2026-05-31, aligne sur .tdl-tab). */
.com-switcher-tab:hover {
    color: #0d9488 !important;
    background: #f0fbf9 !important;
    border-color: transparent !important;
    text-decoration: none;
}

/* Actif : fond teal clair (plus marque que hover) + texte teal + gras, pas de soulignement
   ni de bordure. Identique a .tdl-tab.nav-link.active pour coherence inter-modules. */
.com-switcher-tab.active {
    color: #0d9488 !important;
    font-weight: 600 !important;
    background: #e6f7f5 !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
}
.com-switcher-tab.active:hover {
    color: #0d9488 !important;
    background: #e6f7f5 !important;
}

/* Icône Entreprise (fa-building) : navy en repos, teal en actif. Pas d'icône sur Équipes. */
.com-switcher-tab i { color: #8fa1b3 !important; font-size: 0.85rem; }
.com-switcher-tab.active i,
.com-switcher-tab:hover i { color: #0d9488 !important; }


/* ─── Communauté : ajustements onglets (2026-05-28 — itération 2) ───
   Fix 1: trait gris pleine largeur de la page → porté sur .com-switcher-bar.
   Fix 2: trait sous l'onglet actif → align-items: flex-end sur le bar + margin-bottom:-1px
          sur tab permettent au border-bottom:#fff de l'onglet actif de masquer la ligne. */

.com-switcher-bar {
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    align-items: flex-end !important;
}
/* La barre d'actions à droite (+ Ajouter, Documents) garde son alignement vertical centré. */
.com-switcher-actions { align-self: center !important; }

/* Retire la ligne posée sur .com-switcher à l'itération 1 (la ligne est maintenant sur le bar). */
.com-switcher { border-bottom: none !important; }
.com-switcher-left { border-bottom: none !important; }


/* ─── Communauté : ajustements onglets (2026-05-28 — itération 3) ───
   Fix: la ligne grise du bar reste visible sous l'onglet actif car .com-switcher avait
   overflow:hidden qui clippait verticalement le border-bottom:#fff de l'onglet actif.
   On passe à overflow-x: clip (modern CSS) → horizontal toujours clippé pour le système
   de troncature "+", vertical autorisé → l'onglet actif déborde de 1px pour masquer le trait.

   Largeur: aligne sur le module Todo/Plannings (min-width: 220px). */

.com-switcher {
    overflow: visible !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Largeur des onglets identique au module Todo/Plannings (.tdl-tab min-width: 220px). */
.com-switcher-tab {
    min-width: 220px !important;
    max-width: 260px !important;
    justify-content: center;
}


/* ─── Communauté : compactage des posts en 2 lignes (2026-05-28) ───
   Fusion ligne 2 (titre) + ligne 3 (aperçu/event/sondage/doc) en une seule ligne.
   .com-post-item-body devient un flex row : titre à gauche tronqué à 45% max,
   contenu à droite occupant l'espace restant avec ellipsis si débord. */

.com-post-item-body {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 5px 12px 7px !important;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.com-post-title {
    flex: 0 1 auto !important;
    max-width: 45%;
    margin-bottom: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3 !important;
}

/* Tous les contenus secondaires (preview / event / poll / doc) :
   prennent l'espace restant, single-line avec ellipsis. */
.com-post-preview {
    flex: 1 1 auto !important;
    min-width: 0;
    margin-top: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-post-event-info,
.com-post-poll-preview,
.com-post-doc-preview {
    flex: 1 1 auto !important;
    min-width: 0;
    margin-top: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    white-space: nowrap;
}

/* Event : date à gauche, ICS icône seule à droite (le texte est conservé via title="...") */
.com-post-event-info .com-post-event-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.com-post-event-info .com-post-ics-link {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Sondage : ne pas afficher l'aperçu du body si une question de sondage est rendue
   (la question du sondage occupe déjà la ligne et est plus pertinente). */
.com-post-type-poll .com-post-preview { display: none !important; }
.com-post-poll-preview {
    overflow: hidden;
    text-overflow: ellipsis;
}
.com-post-poll-preview .com-post-poll-votes { flex: 0 0 auto; margin-left: auto; }

/* Document : label tronqué, catégorie et taille restent visibles à droite */
.com-post-doc-preview .com-post-doc-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.com-post-doc-preview .com-doc-cat-tag,
.com-post-doc-preview .com-post-doc-size { flex: 0 0 auto; }


/* ─── Communauté : ajustements posts compacts (2026-05-28 — itération 2) ───
   1. Zone titre = 30% fixe pour TOUS les types (cohérence visuelle d'alignement).
   2. Event : ICS juste après la date (avant le body), pas à l'extrême droite. */

.com-post-title {
    flex: 0 0 30% !important;
    max-width: 30% !important;
}

/* Event-info ne mange plus tout l'espace : shrink à son contenu (date + icône ICS).
   Le com-post-preview (body) qui suit prend le flex:1 restant. */
.com-post-event-info {
    flex: 0 0 auto !important;
    gap: 8px;
}
.com-post-event-info .com-post-event-date {
    flex: 0 0 auto !important;
}
/* ICS : icône juste après la date (suppression du margin-left:auto qui le poussait à droite). */
.com-post-event-info .com-post-ics-link {
    margin-left: 0 !important;
    flex: 0 0 auto;
}


/* ─── Communauté : poubelle déplacée dans le header, juste après la date (2026-05-28) ───
   La poubelle quitte .com-post-item-footer (supprimé du markup) pour se placer dans
   .com-post-item-author après la date. Hover-fade conservé. */

.com-post-item-author .com-post-action-delete {
    flex: 0 0 auto;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.com-post-item:hover .com-post-item-author .com-post-action-delete { opacity: 1; }

/* L'ancienne règle .com-post-item-footer reste sans effet (plus rendue), pas d'override
   nécessaire — le bloc footer est supprimé du Twig. */


/* ─── Communauté : badges actionnables sur le header de post (2026-05-28) ───
   Miroir visuel des pastilles compteurs des sections Épinglés / Mémorisés.
   Couleurs alignées : orange pour échéance proche, violet pour sondage à voter. */

.com-post-due-badge,
.com-post-vote-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.60rem;
    font-weight: 700;
    color: #fff;
    border-radius: var(--r-sm, 3px);
    padding: 1px 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.com-post-due-badge  { background: #d97706; }  /* échéance ≤ 7 jours — orange (.com-pinned-badge-due) */
.com-post-vote-badge { background: #6b5fa5; }  /* sondage à voter — violet (.com-pinned-badge-vote)  */
.com-post-due-badge i,
.com-post-vote-badge i { font-size: 0.62rem; }


/* ─── Communauté : badge "Expiré" sur events passés et sondages clos (2026-05-28) ───
   Gris muted (≠ rouge non-lus, ≠ orange échéance proche) pour signaler le statut "terminé". */
.com-post-expired-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.60rem;
    font-weight: 700;
    color: #fff;
    border-radius: var(--r-sm, 3px);
    padding: 1px 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #94a3b8;
}
.com-post-expired-badge i { font-size: 0.62rem; }


/* ─── Communauté : badge "Nouvelle(s) réponse(s)" (2026-05-28) ───
   Post déjà lu mais une reply est arrivée depuis. Cyan distinct du teal "Nouveau". */
.com-post-newreplies-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.60rem;
    font-weight: 700;
    color: #fff;
    border-radius: var(--r-sm, 3px);
    padding: 1px 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #0891b2;  /* cyan-600 — distinct du teal des non-lus */
}
.com-post-newreplies-badge i { font-size: 0.62rem; }


/* ─── Communauté : bouton "auto-unpin à l'échéance + 1 semaine" dans la modale pin (2026-05-28) ───
   Style "recommandé" pour attirer l'œil : fond teal léger, border teal, en haut de la liste. */
.com-pin-duration-auto {
    background: rgba(13, 148, 136, 0.10) !important;
    border: 1px solid var(--com-teal, #0d9488) !important;
    color: var(--com-teal, #0d9488) !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    width: 100%;
    /* PAS de display:block !important : laisse .hide()/.show() de jQuery contrôler la visibilité
       (inline style="display:none" perd contre un !important CSS → bouton fantôme persistant). */
}
.com-pin-duration-auto:hover {
    background: rgba(13, 148, 136, 0.18) !important;
}
.com-pin-duration-auto.is-default {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.20);
}


/* ─── Communauté : ligne d'échéance du sondage dans le drawer (2026-05-28) ─── */
.com-poll-closedat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 10px 0;
    background: #fef3c7;
    border-left: 3px solid #d97706;
    border-radius: 2px;
    font-size: 0.85rem;
    color: #78350f;
}
.com-poll-closedat-icon { color: #d97706; font-size: 0.95rem; }
.com-poll-closedat-label { font-weight: 500; }


/* ─── Communauté : méta-infos sondage inline (drawer post type 3) (2026-05-28) ───
   Affiche anonymat / choix multiple / date clôture lus à la création. */
.com-poll-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}
.com-poll-meta-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-sm, 3px);
    padding: 2px 8px;
    line-height: 1.4;
}
.com-poll-meta-chip-closed {
    background: #fef3c7;
    color: #78350f;
    border-color: #fcd34d;
}
.com-poll-meta-chip i { font-size: 0.70rem; }


/* ─── Communauté : date+heure séparés dans les modales (2026-05-28) ───
   Date à gauche (datepicker text + auto-close), heure à droite (HTML5 time native).
   Plus simple que sideBySide qui ne s'active pas correctement en v4.17 du lib. */
.com-date-time-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.com-date-time-row .com-date-picker { flex: 1 1 auto; min-width: 0; }
.com-date-time-row .com-time-picker { flex: 0 0 110px; }


/* ─── Communauté : hourpicker en blanc + bordure + date plus compacte (2026-05-28) ─── */

/* Date plus compacte : ne grandit plus jusqu'à occuper tout l'espace. */
.com-date-time-row .com-date-picker { flex: 0 0 200px; }

/* Hourpicker (Bootstrap-Select) : fond blanc + bordure identique aux .form-control. */
.com-date-time-row .bootstrap-select > .dropdown-toggle.com-time-btn,
.com-date-time-row .bootstrap-select > .dropdown-toggle.btn-light {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
    box-shadow: none !important;
}
.com-date-time-row .bootstrap-select > .dropdown-toggle.com-time-btn:hover,
.com-date-time-row .bootstrap-select > .dropdown-toggle.com-time-btn:focus,
.com-date-time-row .bootstrap-select > .dropdown-toggle.btn-light:hover,
.com-date-time-row .bootstrap-select > .dropdown-toggle.btn-light:focus {
    background-color: #fff !important;
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15) !important;
}
.com-date-time-row .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: #495057; }
.com-date-time-row .bootstrap-select > .dropdown-toggle.com-time-btn[title="HH:MM"]:not(.bs-placeholder) .filter-option-inner-inner { color: #495057; }


/* ─── Communauté : nettoyage halo/placeholder Bootstrap-Select hourpicker (2026-05-28) ─── */

/* Wrapper .bootstrap-select : transparent, pas d'ombre, pas de bordure résiduelle. */
.com-date-time-row .bootstrap-select {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* État "placeholder" (.bs-placeholder ajouté par Bootstrap-Select quand aucune option choisie) :
   force le fond blanc + bordure standard, comme l'état sélectionné. */
.com-date-time-row .bootstrap-select > .dropdown-toggle.bs-placeholder,
.com-date-time-row .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.com-date-time-row .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.com-date-time-row .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    color: #94a3b8 !important;   /* placeholder slate-400, cohérent avec les autres inputs (cf. .tdl-period-input::placeholder) */
    box-shadow: none !important;
    outline: 0 !important;
}
/* La couleur du texte du placeholder est portée par .filter-option-inner-inner (Bootstrap-Select v1.13+). */
.com-date-time-row .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: #94a3b8 !important;
}

/* Override final du focus : pas de halo bleu Bootstrap-Select (qui s'ajoute aux autres). */
.com-date-time-row .bootstrap-select.show > .dropdown-toggle,
.com-date-time-row .bootstrap-select > .dropdown-toggle:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.15) !important;
}


/* ─── Communauté : ligne Titre + Date de clôture côte à côte dans modale Sondage (2026-05-28) ─── */
.com-poll-title-row { align-items: flex-start; }
.com-poll-title-row .col-auto .com-date-picker { width: 160px; }


/* ─── Communauté : édition inline des champs de post / poll dans les drawers (2026-05-28) ─── */

.com-editable-field { position: relative; }

/* View mode : flex avec icône crayon à droite, visible au hover sur la zone. */
.com-editable-view {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.com-editable-view > h5,
.com-editable-view > .com-source-body { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.com-edit-pencil {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 6px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: var(--r-md, 6px);
    opacity: 0;
    transition: opacity .15s, color .15s, background .15s;
    font-size: 0.85rem;
}
.com-editable-field:hover .com-edit-pencil { opacity: 1; }
.com-edit-pencil:hover { color: #0d9488; background: rgba(13, 148, 136, 0.08); }
.com-edit-pencil.com-edit-locked { color: #d97706; cursor: not-allowed; }
.com-edit-pencil.com-edit-locked:hover { background: transparent; color: #d97706; }

/* Edit mode : input/textarea + actions */
.com-editable-edit { width: 100%; }
.com-editable-input { width: 100%; margin-bottom: 8px; }
textarea.com-editable-input { min-height: 80px; resize: vertical; }
.com-editable-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Placeholder body vide */
.com-source-body-placeholder { font-style: italic; }

/* Bandeau "Modifié le ..." */
.com-editable-updated {
    margin-top: 4px;
    font-size: 0.70rem;
    color: #94a3b8;
    font-style: italic;
}
.com-editable-updated i { font-size: 0.65rem; }



/* ─── Communauté : édition inline drawer post — refonte propre (2026-05-28) ───
   Principe :
   - .com-source-card garde son layout flex column overflow:hidden (cassé par mes itérations
     précédentes — on RESTAURE strictement le comportement d'origine).
   - .com-editable-body (wrapper du body) reste un BLOC simple, prenant la place restante via
     flex naturel. Pas de display:block !important qui forçait edit + view visibles ensemble.
   - .com-source-body conserve son rôle natif : flex:1 1 auto, scroll interne si débord.
   - Picker date : position:fixed via JS au show (calculé sur viewport).
*/

/* 1. Wrapper body : BLOC SIMPLE, pas de flex pour éviter les bugs de hauteur. */
.com-source-card .com-editable-body {
    display: block;
    width: 100%;
    position: relative;
}

/* 2. View mode du body : position relative pour permettre pencil en absolute.
   Pas de flex → body prend la largeur naturelle, pas de conflit avec max-height. */
.com-source-card .com-editable-body .com-editable-view {
    display: block;
    position: relative;
    padding-right: 36px;  /* place réservée au pencil à droite */
}

/* 3. .com-source-body : bloc normal avec hauteur plafonnée à 40% du source-card.
   Source-card max-height: 42vh → body max ~17vh (≈ 40%). Scrollbar interne si débord. */
.com-source-card .com-editable-body .com-editable-view > .com-source-body {
    display: block;
    width: 100%;
    max-height: 17vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    flex: none;
}

/* Pencil en absolute en haut-droite de la view. */
.com-source-card .com-editable-body .com-editable-view > .com-edit-pencil {
    position: absolute;
    top: 4px;
    right: 0;
}

/* 4. Bandeau "Modifié le" : block normal en flux, marge claire au-dessus.
   12px = vraie respiration entre la box body (fond blanc) et le texte gris. */
.com-source-card .com-editable-body .com-editable-updated {
    display: block;
    margin-top: 12px;
    flex: none;
}

/* 5. Auteur sur une ligne au-dessus du card (sortie du .com-source-card). */
.com-source-author-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 6px 4px;
    margin-bottom: 0 !important;   /* override le 12px hérité de .com-source-author-row */
    font-size: 0.70rem;
    color: #94a3b8;
}
.com-source-author-row-top .circled,
.com-source-author-row-top .circled img { width: 20px !important; height: 20px !important; line-height: 18px !important; }
.com-source-author-row-top .com-source-author-name { font-size: 0.72rem !important; font-weight: 500 !important; color: #64748b !important; }
.com-source-author-row-top .com-source-date { font-size: 0.70rem; color: #94a3b8; }

/* 6. Edit mode du body : textarea avec max-height + scroll interne ; pas de display:block !important
   qui forçait les 2 vues simultanées. Le .com-editable-edit a un style="display:none" inline
   et est uniquement affiché via JS au clic crayon. */
.com-source-card .com-editable-body .com-editable-edit { width: 100%; }
textarea.com-editable-input {
    width: 100%;
    min-height: 80px;
    max-height: 17vh;     /* aligné avec le display : ~40% du source-card (42vh) */
    overflow-y: auto;
    resize: vertical;
}
/* Scrollbar fin sans flèches haut/bas (Windows native arrows masquées). */
textarea.com-editable-input::-webkit-scrollbar,
.com-source-body::-webkit-scrollbar { width: 6px; }
textarea.com-editable-input::-webkit-scrollbar-button,
.com-source-body::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
textarea.com-editable-input::-webkit-scrollbar-thumb,
.com-source-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
textarea.com-editable-input, .com-source-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* 7. Row inline eventDate : date + hour + 2 icônes sur une seule ligne compacte. */
.com-editable-inline-row { display: flex; align-items: center; gap: 8px; }
.com-editable-inline-row .com-date-picker { flex: 0 0 150px; }
.com-editable-inline-row .com-time-picker,
.com-editable-inline-row .bootstrap-select { width: 100px !important; min-width: 0; }
.com-editable-inline-row .bootstrap-select > .dropdown-toggle { padding: 5px 10px; }
.com-edit-icon-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: var(--r-md, 6px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all .15s;
}
.com-edit-icon-btn:hover { background: #f8fafc; }
.com-edit-cancel-btn:hover { color: #dc2626; border-color: #fecaca; }
.com-edit-save-btn:hover { color: #0d9488; border-color: #5eead4; background: #ccfbf1; }

/* 8. Datepicker widget : juste z-index élevé. Laisse la lib gérer la position absolute
   par défaut (la source-card est maintenant overflow:auto, donc le widget peut se déployer). */
.bootstrap-datetimepicker-widget {
    z-index: 10050 !important;
    /* Le widget est inséré à côté de son input, donc DANS son conteneur : il héritait d'un
       white-space: nowrap posé sur ce conteneur (Reporting, .font-weight-bold) et ses cases
       d'années / de mois débordaient du cadre sur une seule ligne (préprod, 2026-09-14). */
    white-space: normal;
}

/* 9. Autosave focus highlight (sans bouton save explicite, signal visuel d'édition active). */
.com-editable-autosave:focus {
    background: #f0fdfa;
    border-color: #0d9488;
    box-shadow: 0 0 0 0.15rem rgba(13, 148, 136, 0.18);
}


/* ─── Communauté : espacements titre / "Modifié le" / description (2026-05-28) ─── */
/* "Modifié le" du titre : pas de marge haute, collé au titre. */
.com-source-card .com-editable-field[data-field="title"] .com-editable-updated {
    margin-top: 0;
}
/* 16px entre "Modifié le" du titre et le champ description (et autres fields suivants) */
.com-source-card .com-editable-field[data-field="title"] {
    margin-bottom: 16px;
}


/* ─── Communauté : retire la marge basse h5 du titre du drawer (2026-05-28) ─── */
.com-source-card h5.com-source-title { margin-bottom: 0 !important; }


/* ─── Communauté : scrollbar fine de secours sur source-card (2026-05-28) ───
   Au cas où le contenu dépasse 42vh (sondage avec longue description par exemple),
   la card scrolle elle-même au lieu de masquer du contenu. Scrollbar invisible
   par défaut, apparait au hover direct du card ou pendant le scroll. */
.com-source-card {
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Firefox : scrollbar fin masqué par défaut, gris au survol. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s;
}
.com-source-card:hover {
    scrollbar-color: #cbd5e1 transparent;
}
/* Webkit : track transparent toujours, thumb visible uniquement au hover du card. */
.com-source-card::-webkit-scrollbar { width: 6px; }
.com-source-card::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.com-source-card::-webkit-scrollbar-track { background: transparent; }
.com-source-card::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .2s; }
.com-source-card:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }
.com-source-card:hover::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ─── Communauté : protéger les boutons × ✓ d'éventuels overlays bootstrap-select (2026-05-28) ───
   Le wrapper .bootstrap-select peut étendre sa zone cliquable au-delà du button visible.
   On force position:relative + z-index élevé sur × et ✓ pour qu'ils captent les clics. */
.com-editable-inline-row .com-edit-icon-btn {
    position: relative;
    z-index: 5;
}
/* Pattern projet (cf. .task-col-priorite, .task-col-porteur) : masquer le <select> SOUS-JACENT
   uniquement quand il est descendant d'un wrapper .bootstrap-select déjà créé.
   Avec le combinator `>`, la règle ne s'applique qu'APRÈS l'init de Bootstrap-Select,
   évitant de masquer le select natif avant que la lib ait pu l'envelopper. */
.com-editable-inline-row .bootstrap-select > select { display: none !important; }


/* ─── Communauté : "Ajouter à mon agenda" sur sa propre ligne sous l'icône date (2026-05-28) ───
   Le bouton wrap sur la ligne suivante (flex-basis 100%), aligné à gauche, avec marge basse
   pour respiration avant la zone description. */
.com-source-event-date .com-ics-inline-btn {
    flex-basis: 100%;
    width: fit-content;
    max-width: fit-content;
    margin-left: 0 !important;
    margin-top: 6px;
    margin-bottom: 0;
    align-self: flex-start;
    border-radius: var(--r-md, 6px)!important;
}
/* Le champ eventDate a déjà margin-bottom 14px (.com-editable-field) qui donne la respiration
   vers la zone description. En mode édition, .com-editable-inline-row apporte sa propre
   margin-bottom: 16px → les marges restent propres dans les 2 modes. */


/* ─── Communauté : marge sous la row date/heure en édition (2026-05-28) ───
   Quand le pencil eventDate est cliqué et que la row date+heure+×+✓ s'affiche,
   ajoute une respiration avant le champ description en dessous. */
.com-editable-inline-row { margin-bottom: 16px; }


/* ─── Communauté : variante "pas d'échéance" du bandeau closedAt sondage (2026-05-28) ───
   Le sondage à durée indéfinie : info neutre gris (pas ambré qui suggère urgence). */
.com-poll-closedat-row-none {
    background: #f1f5f9 !important;
    border-left-color: #94a3b8 !important;
    color: #64748b !important;
}
.com-poll-closedat-row-none .com-poll-closedat-icon { color: #94a3b8 !important; }


/* ─── Communauté : pastille date compacte sur les posts Événement dans le fil (2026-05-28) ───
   Style chip jour/mois à gauche du titre, cohérent avec le panel Événements à venir. */
.com-post-event-chip {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 4px;
    margin-right: 8px;
    background: rgba(77, 140, 111, 0.10);
    border: 1px solid rgba(77, 140, 111, 0.30);
    border-radius: var(--r-sm, 3px);
    color: #4d8c6f;
    line-height: 1;
}
.com-post-event-chip-day { font-size: 0.95rem; font-weight: 700; line-height: 1.05; }
.com-post-event-chip-month { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Le post-item-body est déjà en flex row (titre + preview) : la pastille s'aligne à gauche
   avant le titre, le titre garde flex:1 et tronque à 30%. */
.com-post-item-body { align-items: center; }


/* ─── Communauté : chip closedAt sondage dans le meta du drawer post (2026-05-28) ───
   Aligné à droite sur la ligne du badge SONDAGE, look discret cohérent avec les autres chips. */
.com-source-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.com-source-poll-closedat-wrap { display: inline-flex; align-items: center; }
.com-source-poll-closedat {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: #78350f;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--r-sm, 3px);
    padding: 2px 8px;
    line-height: 1.4;
}
.com-source-poll-closedat i { font-size: 0.72rem; color: #d97706; }
/* Variante "pas d'échéance" : ton neutre gris. */
.com-source-poll-closedat-wrap .com-source-poll-closedat-text:only-child + i { display: none; }


/* ─── Communauté : chip closedAt sous le titre (2026-05-28 it.2) ───
   Plus dans le meta (manquait de place) — sur sa propre ligne, aligné à gauche,
   "Modifié le" rebascule juste en dessous. */
.com-source-card .com-source-poll-closedat-wrap {
    display: block;
    margin: 6px 0;
}
.com-source-card .com-source-poll-closedat {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}
.com-source-card .com-source-poll-closedat .com-edit-pencil { margin-left: 4px; }
.com-source-title-updated { margin-top: 2px; }


/* ─── Communauté : "Modifié le" du eventDate entre la date et le bouton agenda (2026-05-28) ───
   Le bandeau prend toute la largeur (flex-basis:100%) → s'insère naturellement entre la date
   et le bouton "Ajouter à mon agenda", sans gap parasite. */
.com-source-event-date .com-source-event-updated {
    flex-basis: 100%;
    margin-top: 2px;
    margin-bottom: 4px;
}


/* ─── Communauté : pastille date sur post Événement dans le fil — fond teal clair (2026-05-28) ───
   Remplace le chip jour/mois précédent. Le bloc com-post-event-info reçoit un fond pâle teal
   pour mettre en valeur la date de l'événement dans le post. */
.com-post-event-chip { display: none !important; }   /* on cache l'ancien chip jour/mois */
.com-post-item .com-post-event-info {
    background: rgba(13, 148, 136, 0.08) !important;
    border: 1px solid rgba(13, 148, 136, 0.20) !important;
    border-radius: var(--r-lg, 10px)!important;
    padding: 3px 8px !important;
}
.com-post-item .com-post-event-info .com-post-event-date,
.com-post-item .com-post-event-info .com-post-event-date i {
    color: #0d9488 !important;
    font-weight: 600;
}


/* ─── Communauté : section "Activité" (2026-05-28) ───
   Même structure que .com-pinned-section (épinglés / mémorisés) mais icône et accents navy
   pour signaler le statut "fil principal", pas une catégorie spéciale. */
.com-activity-section .com-pinned-icon.com-activity-icon { color: #2D3E50; }
.com-activity-section .com-pinned-count { background: #2D3E50; }


/* ─── Communauté : marge horizontale 40px (alignement gabarit moderne 2026-06-01) ───
   Migration étape 4 : passage de 80px → 40px par côté pour cohérence avec Lists et Tdl.
   Gap entre fil et cartes réduit à 40px (au lieu de 80px) pour récupérer ~80px de
   contenu utile sur la colonne droite. */
.com-page .com-columns {
    padding-left: 40px !important;
    padding-right: 34px !important; /* 40 - 6px scrollbar gutter (cf. .ds-scroll-zone) */
    background: #fff;
}
.com-page .com-col-feed {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.com-page .com-col-right {
    padding-left: 40px !important;
    padding-right: 0 !important;
}


/* ─── Communauté : "Tout" plus compact pour donner plus de place aux autres filtres (2026-05-28) ───
   Sans flex:1 pour ne pas être étiré à la même largeur. ~20px de moins. */
.com-filters .com-filter[data-filter="all"] {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 48px;
}


/* ─── Communauté : marge 80px gauche/droite sur le tableau de la Base documentaire (2026-05-28) ───
   Alignement visuel avec la liste Communauté (et le tableau Todo/Plannings). */
#main-content-community-docs .com-docs-page-body {
    padding-left: 80px !important;
    padding-right: 80px !important;
    max-width: none !important;
}


/* ─── Communauté : message d'erreur de validation sous les champs des modales (2026-05-28) ─── */
.com-field-error {
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.com-field-error::before {
    content: '\f06a';   /* fa-exclamation-circle */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.78rem;
}


/* ─── Communauté : retire le focus persistant sur les boutons d'action des rows docs (2026-05-28) ───
   :focus:not(:focus-visible) → on retire l'outline pour les clics souris (qui laissaient
   un encadré noir persistant) tout en gardant l'outline pour la navigation clavier (a11y). */
.com-docs-row-btn:focus:not(:focus-visible),
.com-doc-fav-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}


/* ─── Communauté : édition inline des options de sondage (2026-05-28) ─── */
/* Override sans !important : la double-classe (.com-editable-poll-options + .com-poll-options-view)
   est plus spécifique que .com-editable-view, donc on bat le flex sans casser le display:none inline
   appliqué par jQuery .hide() au moment du passage en mode édition. */
.com-editable-poll-options .com-poll-options-view {
    display: block;
    position: relative;
    padding-right: 36px;
}
.com-editable-poll-options .com-edit-pencil-options {
    position: absolute;
    top: 0;
    right: 0;
}
.com-poll-options-edit .com-poll-option-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.com-poll-options-edit .com-poll-option-input { flex: 1 1 auto; min-width: 0; }
.com-poll-options-edit .com-poll-option-add { margin-top: 4px; }
.com-poll-options-edit .com-editable-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}


/* ─── Communauté : "+ Ajouter une option" et boutons × ✓ sur la même ligne (2026-05-28) ─── */
.com-poll-options-bottom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}


/* ─── Communauté : bouton "+ Ajouter" — large, hauteur modérée, + et chevron espacés du texte (2026-05-28) ─── */
.com-add-dropdown-btn {
    font-size: 0.86rem !important;
    padding: 7px 40px !important;       /* hauteur modérée + beaucoup d'espace horizontal */
    letter-spacing: 0.02em;
}
.com-add-dropdown-btn i { font-size: 0.92rem; }
.com-add-dropdown-btn > i.fa-plus { margin-right: 14px !important; }
.com-add-dropdown-btn > i.com-add-dropdown-caret { margin-left: 14px !important; }


/* ─── Communauté : espacement entre cartes droite augmenté x1,5 (2026-05-28) ─── */
.com-col-right .com-panel { margin-bottom: 21px !important; }


/* =========================================================================
   GABARIT PAGE MODERNE — classes partagées (chantier transverse 2026-05-31)
   Préfixe : .ds-*
   Pages cibles : Listes, Todo/Plannings, Communauté, Base documentaire, futures
   Spec : docs/design/gabarit-page-moderne.md
   ========================================================================= */

/* ── Tooltip compact gabarit (.ds-tooltip) ─────────────────────────────────
   Styling discret pour les tooltips Bootstrap initialisés avec template
   `<div class="tooltip ds-tooltip">`. Font/padding plus serrés que le défaut. */
.ds-tooltip .tooltip-inner {
    font-size: 0.72rem;
    padding: 6px 10px;
    max-width: 220px;
    background: #1a3347;
}
.ds-tooltip .arrow::before { border-top-color: #1a3347; border-bottom-color: #1a3347; }

/* ── Page racine ── */
/* Flex column qui occupe tout le viewport. Scroll zone interne (flex:1) → pas de
   scroll global sur la page. Robuste vs calc(100vh - ...) fragile. */
.ds-page {
    background: #fff;
    display: flex; flex-direction: column;
    height: 100vh; overflow: hidden;
}
/* #tdl-content : wrapper utilisé par tdlRefresh() pour swap AJAX. Doit propager
   le flex column de .ds-page jusqu'à la .ds-scroll-zone interne, sinon le tableau
   ne scrolle pas (bug rapporté étape 3a). */
.ds-page > #tdl-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ── Header BLANC moderne (Linear/Notion/Vercel/Stripe style) ── */
/* Pas de border-bottom : les onglets juste en-dessous portent leur propre underline,
   éviter la "double ligne" qui apparaissait sur l'onglet actif. */
.ds-page-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; min-height: 56px;
    background: #fff; color: #2D3E50;
    gap: 16px; flex-shrink: 0;
}
.ds-page-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ds-page-header-icon {
    color: var(--ds-teal, #0d9488);
    font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-page-header-info { display: flex; flex-direction: column; }
/* Titre en Anton (logo-font) — décision étape 3b 2026-06-01.
   Plus de chrome (icône box) à gauche : juste le titre, sobre et marqué. */
.ds-page-header-title {
    font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.5rem; font-weight: 400;
    color: #2D3E50;
    letter-spacing: 0.015em;
    line-height: 1.2;
}
.ds-page-header-subtitle {
    font-size: 0.72rem; color: #8fa1b3;
}
/* Compteur à gauche, juste après le titre — pattern Linear/Notion "Issues · 42". */
.ds-page-header-meta {
    color: #94a3b8;
    font-size: 0.85rem; font-weight: 400;
    margin-left: 6px;
}
/* Lien "voir total exact" affiché à côté du compteur "N+" sur la page Listes.
   L'endpoint count étant coûteux, il n'est appelé qu'à la demande de l'utilisateur. */
.lst-count-link {
    color: #64748b; text-decoration: underline; font-size: 0.8rem; margin-left: 4px; cursor: pointer;
}
.lst-count-link:hover { color: #1e293b; }
.lst-count-loading { color: #94a3b8; margin-left: 4px; }
.ds-page-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Résumé inline dans le header (visible UNIQUEMENT en mode collapsé) ──
   À droite près du chevron, container avec fond subtil pour visibilité claire. */
.ds-page-header-summary {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f1f5f9;
    border-radius: var(--r-lg, 10px);
    font-size: 0.78rem; color: #475569;
    flex-wrap: nowrap;
}
.ds-page.is-collapsed .ds-page-header-summary { display: inline-flex; }
.ds-summary-chip { display: inline-flex; align-items: center; white-space: nowrap; }
.ds-summary-value { color: #2D3E50; font-weight: 500; }
/* Séparateur : barre verticale fine entre items du résumé (remplace le bullet · plus daté) */
.ds-summary-sep {
    display: inline-block;
    width: 1px; height: 14px;
    background: #cbd5e1;
    margin: 0 4px;
    user-select: none;
}
.ds-summary-active-filters { color: var(--ds-teal, #0d9488); font-weight: 500; }

/* ── Chevron collapse toggle dans le header (à gauche du compteur) ── */
.ds-collapse-toggle {
    width: 28px; height: 28px; border-radius: var(--r-md, 6px);
    background: transparent; border: none;
    color: #8fa1b3; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ds-collapse-toggle:hover { background: var(--ds-teal-light, #e6f7f5); color: var(--ds-teal, #0d9488); }
/* Focus ring SEULEMENT pour navigation clavier (pas de cadre noir au clic souris).
   Pattern moderne :focus-visible (au lieu de :focus historique). */
.ds-collapse-toggle:focus { outline: none; }
.ds-collapse-toggle:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px; }
.ds-collapse-toggle i { transition: transform 0.18s ease; font-size: 0.78rem; }
.ds-page.is-collapsed .ds-collapse-toggle i { transform: rotate(180deg); }
/* État replié : chevron en teal pour signaler visuellement que la zone est repliée. */
.ds-page.is-collapsed .ds-collapse-toggle { color: var(--ds-teal, #0d9488); background: var(--ds-teal-light, #e6f7f5); }

/* ── Masquage tabs + pills en mode collapsé (subbar conservée pour Filtres + recherche) ── */
.ds-page.is-collapsed .ds-tabs,
.ds-page.is-collapsed .ds-display-wrap { display: none !important; }

/* ── Onglets : underline teal sous active, font sobre, padding aéré ── */
.ds-tabs {
    display: flex; list-style: none; padding: 0 40px; margin: 0;
    border-bottom: 1px solid #e2e8f0;
    gap: 0;
    flex-wrap: wrap;
}
.ds-tabs .nav-item { margin-bottom: -1px; }
.ds-tab {
    padding: 13px 18px;
    min-width: 200px;
    text-align: center; justify-content: center;
    cursor: pointer; user-select: none;
    font-size: 0.85rem; font-weight: 500; color: #8fa1b3;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
}
.ds-tab,
.ds-tab:hover,
.ds-tab:focus,
.ds-tab.active:hover { text-decoration: none; }
/* Survol : le filet gris prefigure l'endroit ou l'indicateur actif va se poser. Il remplace le fond
   gris, qui introduisait un SECOND langage visuel (une boite) dans une ligne ou tout se joue sur un
   trait. Jamais le filet teal plein : il est reserve a l'onglet ACTIF. */
.ds-tab:hover:not(.disabled):not(.active) { color: #415873; border-bottom-color: #cbd5e1; }
.ds-tab.active {
    color: #2D3E50; font-weight: 600;
    border-bottom-color: var(--ds-teal, #0d9488);
}
/* Disabled : autorise le hover pour montrer "not allowed" + tooltip natif via title */
.ds-tab.disabled { color: #cbd5e1; cursor: not-allowed; }
.ds-tab.disabled:hover { background: transparent; color: #cbd5e1; }
.ds-tab-soon {
    display: inline-block;
    font-size: 0.60rem; font-weight: 400; color: #8fa1b3;
    background: #f1f3f5; padding: 1px 6px; border-radius: var(--r-sm, 3px);
    text-transform: lowercase;
    vertical-align: middle;
}

/* ── Subbar : filtres + recherche ── */
.ds-subbar {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 40px 6px;
    flex-wrap: wrap;
}
/* Reset très proche de Filtres (effet mini-group "actions filtres") */
.ds-filters-reset { margin-left: -4px; }
/* Séparateur vertical fin entre groupes de contrôles dans la subbar */
.ds-subbar-sep {
    display: inline-block;
    width: 1px; height: 24px;
    background: #e2e8f0;
    margin: 0 6px;
}

/* Boutons "Filtres" et "Reset" : ghost style moderne (sans bordure).
   Bouton Filtres bien plus large pour visibilité accrue (action fréquente).
   Gap interne important pour espacer icône + label + chevron. */
.ds-filters-trigger,
.ds-filters-reset {
    display: inline-flex; align-items: center;
    background: transparent; color: #2D3E50;
    border: none; border-radius: var(--r-md, 6px);
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.ds-filters-trigger { padding: 9px 16px; min-height: 40px; gap: 14px; }
.ds-filters-reset { padding: 9px 14px; min-height: 40px; gap: 8px; color: #94a3b8; }
.ds-filters-reset i { color: #94a3b8; }
.ds-filters-reset:hover,
.ds-filters-reset:hover i { color: var(--ds-teal, #0d9488); }
/* Chevron interne du bouton Filtres : espacement supplémentaire à gauche pour
   bien le détacher du label "Filtres" (cf. demande utilisateur 2026-05-31). */
.ds-filters-trigger .ds-filters-caret { margin-left: 6px; font-size: 0.62rem; color: #94a3b8; }
.ds-filters-trigger:hover,
.ds-filters-reset:hover {
    background: var(--ds-teal-light, #e6f7f5);
    color: var(--ds-teal, #0d9488);
    text-decoration: none;
}
.ds-filters-trigger i { font-size: 0.85rem; color: #8fa1b3; }
.ds-filters-trigger:hover i { color: var(--ds-teal, #0d9488); }
.ds-filters-trigger:focus,
.ds-filters-reset:focus { outline: none; }
.ds-filters-trigger:focus-visible,
.ds-filters-reset:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px; }
.ds-filters-reset.is-disabled { opacity: 0.4; pointer-events: none; }
.ds-filters-count {
    display: inline-block; margin-left: 4px;
    min-width: 18px; height: 18px; line-height: 18px;
    background: var(--ds-teal, #0d9488); color: #fff;
    border-radius: var(--r-sm, 3px);
    font-size: 0.65rem; font-weight: 600;
    padding: 0 5px; text-align: center;
}

/* Barre de recherche : à droite, input subtil */
.ds-search-wrap {
    position: relative;
    display: inline-flex; align-items: center;
    margin-left: auto;
}
.ds-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #8fa1b3; font-size: 0.78rem; pointer-events: none;
}
.ds-search-input {
    height: 34px; min-width: 280px;
    font-size: 0.82rem; color: #2D3E50;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    padding: 4px 12px 4px 32px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-search-input:hover { border-color: #cbd5e1; }
.ds-search-input:focus {
    outline: none; border-color: var(--ds-teal, #0d9488);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
.ds-search-input::placeholder { color: #b8c2cc; }

/* ── Boutons gabarit (.ds-btn-*) ── */

/* Bouton texte (action secondaire, ex. Réinitialiser) — sobre, muted, hover teal */
.ds-btn-text {
    display: inline-flex; align-items: center;
    padding: 6px 10px;
    background: transparent; color: #8fa1b3;
    border: none; border-radius: var(--r-md, 6px);
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.ds-btn-text:hover { color: var(--ds-teal, #0d9488); background: var(--ds-teal-light, #e6f7f5); text-decoration: none; }

/* ── Filtre période (.ds-period-filter) ────────────────────────────────────
   Pattern réutilisable Tdl + Reporting + futurs : 2 dates + bouton mode.
   Mode compact : bouton trigger + zone dépliable (cf. spec §8.bis, raffinement
   étape 3b 2026-05-31). État collapsed par défaut, .is-expanded affiche la zone.
   Indicateur teal sur le trigger si des dates sont appliquées. */
.ds-period-filter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* Trigger compact — bouton ghost (sans bordure), aligné sur le pattern
   .ds-filters-trigger pour cohérence visuelle (cf. retour utilisateur étape 3b). */
.ds-period-filter-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; min-height: 40px;
    background: transparent; color: #2D3E50;
    border: none; border-radius: var(--r-md, 6px);
    font-family: inherit;            /* button hérite du body Lexend, pas du système */
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.ds-period-filter-trigger:hover {
    background: var(--ds-teal-light, #e6f7f5);
    color: var(--ds-teal, #0d9488);
}
.ds-period-filter-trigger:focus { outline: none; }
.ds-period-filter-trigger:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px; }
.ds-period-filter-trigger i { color: #94a3b8; font-size: 0.85rem; }
.ds-period-filter-trigger:hover i { color: var(--ds-teal, #0d9488); }

/* État expanded : trigger en teal pour signaler que la zone est ouverte */
.ds-period-filter.is-expanded .ds-period-filter-trigger {
    background: var(--ds-teal-light, #e6f7f5);
    color: var(--ds-teal, #0d9488);
}
.ds-period-filter.is-expanded .ds-period-filter-trigger i { color: var(--ds-teal, #0d9488); }

/* Indicateur (point teal) : visible uniquement si .has-dates.
   Petit halo teal-light autour du point pour augmenter la visibilité quand des dates
   de filtre sont actives (chantier UX 2026-06-05). */
.ds-period-filter-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ds-teal, #0d9488);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
    display: none;
}
.ds-period-filter.has-dates .ds-period-filter-indicator { display: inline-block; }

/* Zone dépliable : inputs + clear + mode. Cachée par défaut, visible si .is-expanded */
.ds-period-filter-content {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}
.ds-period-filter.is-expanded .ds-period-filter-content { display: inline-flex; }

.ds-period-label { font-size: 0.72rem; color: #8fa1b3; margin: 0 4px 0 0; }
.ds-period-input {
    height: 34px; width: 110px;
    font-size: 0.79rem; color: #2D3E50;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    padding: 4px 8px; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-period-input:focus {
    outline: none; border-color: var(--ds-teal, #0d9488);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
.ds-period-input::placeholder { color: #b8c2cc; }
.ds-period-sep { color: #94a3b8; font-size: 0.78rem; user-select: none; }
.ds-period-clear {
    width: 24px; height: 24px;
    background: transparent; border: none; border-radius: var(--r-md, 6px);
    color: #8fa1b3; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ds-period-clear:hover { background: #f1f5f9; color: #ef4444; }
.ds-period-clear:focus { outline: none; }
.ds-period-clear:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px; }
.ds-period-mode {
    padding: 6px 12px; min-height: 34px;
    background: #fff; color: #475569;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    font-size: 0.75rem; font-weight: 500; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ds-period-mode:hover { background: var(--ds-teal-light, #e6f7f5); color: var(--ds-teal, #0d9488); border-color: var(--ds-teal, #0d9488); }

/* ── Bouton CTA primaire en subbar (.ds-subbar-cta) ─────────────────────────
   Pour les actions principales (Créer X, etc.) dans la subbar à droite, juste
   avant la barre de recherche. Cf. spec §8.ter.
   margin-left:auto le pousse à droite — si .ds-search-wrap suit, elle se cale
   juste après (search reste à l'extrême droite). */
.ds-subbar-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; min-height: 36px;
    margin-left: auto;
    background: var(--ds-teal, #0d9488); color: #fff;
    border: none; border-radius: var(--r-md, 6px);
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}
.ds-subbar-cta:hover { background: #0b7d72; color: #fff; text-decoration: none; }
.ds-subbar-cta i { font-size: 0.78rem; }
.ds-subbar-cta:focus { outline: none; }
.ds-subbar-cta:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 2px; }

/* Variante outline (blanc bordé teal) — pour CTA secondaire (ex. "+ Jalon" à
   côté de "+ Action"). Override du margin-left:auto puisque c'est un 2e CTA. */
.ds-subbar-cta-outline {
    margin-left: 0;
    background: #fff;
    color: var(--ds-teal, #0d9488);
    border: 1px solid var(--ds-teal, #0d9488);
}
.ds-subbar-cta-outline:hover {
    background: var(--ctx-teal-light);
    color: var(--ds-teal, #0d9488);
    border-color: var(--ds-teal, #0d9488);
}

/* ── View switcher dans header droite (.ds-view-switcher) ───────────────────
   Pour pages avec plusieurs vues d'un même contenu (ex. Tdl : Liste/Planning/
   Score). Icon-only group compact. Cf. spec §8.quater. */
.ds-view-switcher {
    display: inline-flex; gap: 2px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: var(--r-md, 6px);
}
.ds-view-switcher-item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 28px;
    color: #8fa1b3;
    border-radius: var(--r-md, 6px);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.ds-view-switcher-item:hover:not(.active) { color: #2D3E50; background: #e2e8f0; text-decoration: none; }
.ds-view-switcher-item.active {
    background: #fff;
    color: var(--ds-teal, #0d9488);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ds-view-switcher-item i { font-size: 0.82rem; }
.ds-view-switcher-item:focus { outline: none; }
.ds-view-switcher-item:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px; }
/* Variante avec label visible (si la page veut afficher le nom de la vue) */
.ds-view-switcher.with-labels .ds-view-switcher-item { width: auto; padding: 0 12px; gap: 6px; }
.ds-view-switcher.with-labels .ds-view-switcher-item span { font-size: 0.78rem; font-weight: 500; }


/* ── Filtres d'affichage / scope (segment control raffiné, pills de largeur égale) ── */
.ds-display-wrap { padding: 10px 40px 10px; }
.ds-display-box {
    display: inline-flex; gap: 2px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: var(--r-lg, 10px);
}
.ds-display-pill {
    padding: 6px 16px;
    min-width: 200px;
    flex: 1; text-align: center; justify-content: center;
    white-space: nowrap;
    font-size: 0.79rem; color: #64748b; font-weight: 500;
    border-radius: var(--r-sm, 3px);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
}
/* Variante "natural width" : largeur auto par pill (sans min-width). Pour cas avec
   nombreuses pills filtres (Communauté : 7 pills Tout/Conversations/Événements/...). */
.ds-display-box.is-natural .ds-display-pill {
    min-width: 0;
    flex: 0 0 auto;
    padding: 6px 14px;
}
.ds-display-pill:hover:not(.active) { color: #2D3E50; text-decoration: none; }
.ds-display-pill.active {
    background: #fff;
    color: #2D3E50;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ds-display-pill i { font-size: 0.72rem; color: var(--ds-teal, #0d9488); }

/* ── Scroll zone interne ── */
/* flex: 1 dans .ds-page → occupe l'espace restant après header/tabs/subbar/pills.
   Pas de calc(100vh - ...) fragile. min-height: 0 critique pour que flex children
   puissent scroller (sinon le contenu pousse en débordement). */
.ds-scroll-zone {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* padding-right 34px = 40px visuel après scrollbar 6px (cf. design system reference
       § scrollbar-gutter). Sans cette compensation, le bord droit du contenu serait
       à 46px de la viewport (40 padding + 6 scrollbar gutter). */
    padding: 0 34px 24px 40px;
    scrollbar-gutter: stable;
}

/* Vue Gantt du module Actions (cycle B 2026-06-03) : le host du graphe occupe
   100% de la zone restante. La .container-scrollable interne est dimensionnée
   en JS par resizeTaskGraphContainer (cf. app.js). Pas de scroll outer — la
   gantt-elastic gère son propre overflow horizontal. */
.ds-scroll-zone:has(.tdl-gantt-host) {
    overflow: hidden;
    padding: 0;
}
.tdl-gantt-host {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Padding de la zone graphe Gantt (cycle B 2026-06-03) :
   40px latéraux (cohérence gabarit), 0 en haut (subbar = séparation),
   20px en bas après suppression du footer natif gantt-elastic. */
.tdl-gantt-pad {
    padding: 0 40px 20px 40px;
}
/* Conteneur de scroll : sur Gantt, gantt-elastic gère son propre scroll vertical
   interne (chart-scroll-container--vertical). On désactive le scroll outer pour
   éviter une scrollbar redondante à droite de la zone graphe.
   Note : .tdl-gantt-pad et .container-scrollable sont sur le MÊME div, d'où le
   sélecteur en classes combinées (pas de descendant). */
.tdl-gantt-pad.container-scrollable {
    overflow: hidden !important;
}

/* Scrollbar vertical interne du gantt-elastic dans la vue Tdl : on masque
   complètement le gutter (Firefox + WebKit) — le scroll molette / drag continue
   de fonctionner. */
.tdl-gantt-host .gantt-elastic__chart-scroll-container--vertical {
    scrollbar-width: none !important;
}
.tdl-gantt-host .gantt-elastic__chart-scroll-container--vertical::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

/* Trait gris au bord droit du graphe : provient de la border-right inline de la
   DERNIÈRE cellule calendrier (chaque calendar-row-rect-child a un border-right
   #dadada — utile entre cellules, mais inesthétique sur le bord droit). On la
   neutralise uniquement sur la dernière cellule de chaque ligne calendrier
   (les verticales internes sont préservées). */
.tdl-gantt-host .gantt-elastic__calendar-row-rect-child:last-child {
    border-right-width: 0 !important;
}

/* Wrapper boutons Gantt dans la subbar (Aujourd'hui + Légende) — caler à
   l'extrême droite (margin-left:auto miroir de .ds-subbar-cta). */
.tdl-gantt-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Bouton "Légende" Gantt (cycle B 2026-06-03) — état actif : fond teal clair,
   bordure teal, texte teal. Forme identique au repos (.fin-btn-grey). */
#gantt-legend-button.is-active {
    background: var(--ctx-teal-light);
    border-color: var(--ctx-teal);
    color: var(--ctx-teal);
}

.ds-scroll-zone::-webkit-scrollbar { width: 6px; }
.ds-scroll-zone::-webkit-scrollbar-track { background: transparent; }
.ds-scroll-zone::-webkit-scrollbar-thumb { background: #d1d8e0; border-radius: 3px; }
.ds-scroll-zone::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Tableau BORDERLESS moderne (Linear/Notion/Vercel) ── */
/* .ds-card : wrapper transparent (pas de border, pas de shadow) — le tableau respire. */
.ds-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* En-tête sticky + lignes flex */
.ds-list-header,
.ds-row {
    display: flex; align-items: center; width: 100%;
    padding: 0 16px;
}
.ds-list-header {
    min-height: 42px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.68rem; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.05em;
    position: sticky; top: 0; z-index: 5;
    background: #fff;
}
.ds-row {
    min-height: 52px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
    transition: background 0.12s;
    cursor: pointer;
    font-size: 0.82rem; color: #415873;
}
.ds-row:hover { background: #fafbfc; }
.ds-row:last-child { border-bottom: none; }

/* ── Pattern alternatif : .ds-table-native (<table> HTML natif, read-only) ──
   À utiliser pour les vues tabulaires read-only avec tri par colonnes ou
   accessibilité sémantique (screen readers). Pour les tables éditables inline,
   continuer avec .ds-card + .ds-row (flex). Cf. spec §10.bis. */
.ds-table-native {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-size: 0.82rem;
}
.ds-table-native thead th {
    position: sticky; top: 0; z-index: 5;
    background: #fff;
    text-align: left;
    padding: 12px 12px;
    font-size: 0.68rem; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
    user-select: none;
}
.ds-table-native thead th.is-sortable { cursor: pointer; transition: color 0.15s; }
.ds-table-native thead th.is-sortable:hover { color: #2D3E50; }
.ds-table-native tbody tr {
    background: #fff;
    transition: background 0.12s;
    cursor: pointer;
}
.ds-table-native tbody tr:hover { background: #fafbfc; }
.ds-table-native tbody td {
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #415873;
    vertical-align: middle;
}
.ds-table-native tbody tr:last-child td { border-bottom: none; }

/* Typographie cellule */
.ds-cell-primary { font-weight: 500; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-cell-secondary { color: #415873; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-cell-muted { color: #8fa1b3; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lien actif dans une cellule (ex. ouvre un drawer projet/contrat/supplier).
   display:block + max-width:100% pour permettre le truncate ellipsis dans un parent flex. */
.ds-cell-link {
    display: block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #415873; text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.15s, border-color 0.15s;
}
.ds-cell-link:hover { color: var(--ds-teal, #0d9488); border-bottom-color: var(--ds-teal, #0d9488); text-decoration: none; }

/* Badges colorés (statut, etc.) */
.ds-badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 0.70rem; font-weight: 500;
    border-radius: var(--r-sm, 3px);
    background: #fff;
    white-space: nowrap;
}

/* ── Loader scroll infini + skeleton shimmer ── */
.ds-chunk-loader { padding: 8px 0; display: none; }
.ds-skeleton-row {
    height: 42px;
    background: linear-gradient(90deg, #f3f4f6 0%, #e9ecef 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    border-radius: 2px;
    margin-bottom: 4px;
    animation: ds-shimmer 1.4s linear infinite;
}
@keyframes ds-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── État vide ── */
.ds-empty {
    text-align: center;
    padding: 80px 20px;
    color: #8fa1b3;
}
.ds-empty i { font-size: 2.25rem; color: #d8e0e8; margin-bottom: 14px; display: block; }
.ds-empty p { font-size: 0.85rem; margin: 0; color: #94a3b8; }

/* ── Progress bar fine top (in-flight) ── */
.ds-progress-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; background: var(--ds-teal, #0d9488);
    transform: scaleX(0); transform-origin: 0 0;
    transition: transform 0.3s ease;
    z-index: 2000; pointer-events: none;
}
.ds-progress-bar.active { transform: scaleX(0.7); }

/* ── Drawer off-canvas (ombre diffuse, bordure quasi invisible) ── */
.ds-drawer {
    position: fixed; top: 0; bottom: 0;
    right: calc(-1 * var(--sp-w, 380px));
    width: var(--sp-w, 380px);
    background: #fff;
    border-left: 1px solid #f3f4f6;
    box-shadow: -8px 0 32px rgba(0,0,0,0.06);
    z-index: 1050;
    transition: right 0.25s ease;
    display: flex; flex-direction: column;
}
.ds-drawer.open { right: 0; }
.ds-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f3f4f6;
}
.ds-drawer-header h4 {
    font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.35rem; font-weight: 400;
    color: #2D3E50; margin: 0;
    letter-spacing: 0.01em;
}
.ds-drawer-close {
    background: transparent; border: none;
    width: 28px; height: 28px; border-radius: 2px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    color: #8fa1b3;
    transition: background 0.15s, color 0.15s;
}
.ds-drawer-close:hover { background: var(--ds-teal-light, #e6f7f5); color: var(--ds-teal, #0d9488); }
.ds-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; }
.ds-drawer-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 24px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
}
.ds-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.20);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1040;
}
.ds-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.ds-drawer-section { margin-bottom: 18px; }
.ds-drawer-section-label {
    display: block;
    font-size: 0.68rem; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.ds-drawer-section .selectpicker + .dropdown-toggle,
.ds-drawer-section .form-control { font-size: 0.82rem; }

/* Aligne le rendu Select2 (filtre supplier dans Listes) sur le rendu bootstrap-select
   du drawer Filtrer : même taille de police, même couleur, même hauteur, fond clair,
   placeholder même tonalité. Chantier 2026-06-04.
   !important nécessaire pour battre les styles par défaut du theme Select2 (qui ont
   une spécificité élevée via .select2-container--default). */
/* Le container est juste un wrapper transparent — pas de padding (sinon cumul avec
   le padding de la selection imbriquée). Bordure et padding visibles vont sur la selection. */
.ds-drawer-section .select2-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}
/* La selection = l'élément "button" visible. Padding latéral 8px pour matcher exactement
   la position horizontale du texte bootstrap-select dans le drawer (mesure inspector 2026-06-05). */
.ds-drawer-section .select2-container .select2-selection,
.ds-drawer-section .select2-container .select2-selection--single {
    background: #fff !important;
    border: none !important;
    border-radius: var(--r-md, 6px)!important;
    height: auto !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.ds-drawer-section .select2-container .select2-selection__rendered,
.ds-drawer-section .select2-container .select2-selection__placeholder {
    padding: 0 !important;
    margin: 0 !important;
}
.ds-drawer-section .select2-container .select2-selection__arrow { display: none !important; }
.ds-drawer-section .select2-container .select2-selection__clear { color: #94a3b8 !important; font-size: 0.9rem !important; }
/* Override total Select2 placeholder dans tous les drawers (force la police par défaut
   du body, sans gras résiduel). Spécificité maximale via tag + body + ids cascadés.
   La règle `font:` shorthand écrase tout autre font-family/size/weight de la cascade. */
html body .ds-drawer-body .select2-selection__placeholder,
html body .ds-drawer-body .select2-selection__rendered,
html body .ds-drawer-body span.select2-selection__placeholder,
html body .ds-drawer-body span.select2-selection__rendered,
html body .ds-drawer-body span[class*="select2-selection__rendered"],
html body .ds-drawer-body span[class*="select2-selection__placeholder"],
html body .ds-drawer-body span[id*="select2-"][id*="-container"].select2-selection__rendered {
    /* font-family: inherit pour hériter de "Lexend Deca" du body (= ce qu'utilise
       bootstrap-select pour "Prescripteur"). Sans ça la police système prend le relais
       et le rendu paraît plus gras. */
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    /* Couleur navy identique au texte des autres filtres (cf. div.filter-option = #2D3E50). */
    color: #2D3E50 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}
html body .ds-drawer-body .select2-container,
html body .ds-drawer-body .select2-container * {
    /* font-weight 200 (Light) pour matcher bootstrap-select .filter-option-inner-inner. */
    font-weight: 200 !important;
}

/* ── Responsive : tablette (768-1199px) ── */
@media (max-width: 1199px) {
    .ds-page-header,
    .ds-subbar,
    .ds-tabs,
    .ds-display-wrap,
    .ds-scroll-zone { padding-left: 24px; padding-right: 24px; }
}

/* ── Responsive : mobile (<768px) ── */
@media (max-width: 767px) {
    .ds-page-header,
    .ds-subbar,
    .ds-tabs,
    .ds-display-wrap,
    .ds-scroll-zone { padding-left: 16px; padding-right: 16px; }
    .ds-page-header { min-height: 56px; }
    .ds-search-input { min-width: 140px; }
    .ds-tabs { overflow-x: auto; flex-wrap: nowrap; }
}


/* =========================================================================
   Page Listes — spécificités (.lst-*)
   Tout le visuel partagé est dans .ds-* ci-dessus. Ici, uniquement :
   - largeurs des colonnes du tableau AO (.lst-col-*)
   - étoile favoris (.lst-favorite-toggle)
   - classes fonctionnelles JS sans CSS (.lst-tab, .lst-row, etc.) → pas de règle ici
   ========================================================================= */

/* Sentinelle scroll infini (hauteur 1px, observée par IntersectionObserver) */
#lst-scroll-sentinel { height: 1px; }

/* Colonnes AO — flex-based, alignées sur pattern .ds-row */
.lst-col-favorite  { width: 40px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.lst-col-name      { flex: 1 1 0; min-width: 0; padding: 0 12px; display: flex; align-items: center; overflow: hidden; }
.lst-col-project   { flex: 1 1 0; min-width: 0; padding: 0 12px; display: flex; align-items: center; overflow: hidden; }
.lst-col-phase     { flex: 1 1 0; min-width: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; }
.lst-col-user      { width: 50px;  flex-shrink: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lst-col-iteration { width: 90px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.lst-col-status    { width: 170px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.lst-col-proposal  { width: 130px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }

/* Onglet AO : ligne collée aux bords de la carte. Les 2 x 16px de padding de .ds-row sont
   rendus à la colonne Phase, dont les libellés sont longs (« Appel d'offres · Finalisation
   (choix du lauréat) »). Scopé à cet onglet : les autres listes gardent leur gouttière. */
.lst-table-rfp .ds-list-header,
.lst-table-rfp .ds-row { padding: 0; }

/* Cellule porteur : avatar + nom alignés */
.lst-user-cell { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
.lst-user-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.lst-user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Étoile favoris (style spécifique : utilisée dans la colonne favori) */
.lst-favorite-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    text-decoration: none; border-radius: var(--r-md, 6px);
    transition: background 0.15s;
}
.lst-favorite-toggle:hover { background: var(--ds-teal-light, #e6f7f5); text-decoration: none; }
.lst-favorite-toggle .fa-star { font-size: 0.95rem; }
.lst-favorite-toggle .fas.fa-star { color: var(--ds-teal, #0d9488); }
.lst-favorite-toggle .far.fa-star { color: #cfd8dc; }
.lst-favorite-toggle:hover .far.fa-star { color: var(--ds-teal, #0d9488); }


/* =========================================================================
   Communauté — alignement gabarit (étape 4 itération 2 — 2026-06-01)
   - Onglets : .com-switcher-tab adopte le look .ds-tab (underline teal, pas
     de fond plein, pas de wrap → réactive le "+" overflow).
   - Pills filtres : .com-filters span full-width de la colonne fil + pills
     largeur égale (flex:1) sans cadre legacy.
   - Bouton "+ Ajouter" : padding réduit, plus de letter-spacing.
   ========================================================================= */

/* Onglets — reset complet du legacy .com-switcher-tab quand dual-classé .ds-tab.
   Réutilise l'identité visuelle .ds-tab (8104-8135) : transparent, navy actif,
   underline teal 2px. On garde .com-switcher-tab pour les handlers JS overflow
   et badges, mais on neutralise tous ses styles visuels. */
.com-switcher-bar {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 47px !important;            /* hauteur fixée = ds-tab (13+13+~16 + 1px border) */
    align-items: stretch !important;
}
.com-switcher {
    display: flex !important;
    flex-wrap: nowrap !important;       /* réactive le système overflow "+" */
    overflow: visible !important;
    overflow-x: clip !important;
    gap: 0 !important;
    padding: 0 0 0 40px !important;
    border-bottom: none !important;
    align-items: stretch !important;
    height: 100% !important;
}
.com-switcher-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
}
.ds-tab.com-switcher-tab,
.ds-tab.com-switcher-tab:hover,
.ds-tab.com-switcher-tab.active,
.ds-tab.com-switcher-tab.active:hover {
    padding: 0 18px !important;
    min-width: 180px !important;
    max-width: 260px !important;
    height: 100% !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #8fa1b3 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -1px !important;
    text-decoration: none !important;
    justify-content: center;
    align-items: center;
}
/* Survol : filet gris (cible commune), et non un fond — cf. `.ds-tab:hover`. 2026-08-25. */
.ds-tab.com-switcher-tab:hover:not(.active) {
    color: #415873 !important;
    border-bottom-color: #cbd5e1 !important;
}
/* Le groupe de reset ci-dessus inclut .active:hover (0,4,0 + !important) : sans ce second sélecteur,
   survoler l'onglet ACTIF le repassait en gris sans filet (bug préprod 2026-09-16). */
.ds-tab.com-switcher-tab.active,
.ds-tab.com-switcher-tab.active:hover {
    color: #2D3E50 !important;
    font-weight: 600 !important;
    border-bottom-color: var(--ds-teal, #0d9488) !important;
}
/* Icônes : gris repos, navy actif (cohérent .ds-tab) */
.ds-tab.com-switcher-tab i { color: #8fa1b3 !important; }
.ds-tab.com-switcher-tab.active i { color: var(--ds-teal, #0d9488) !important; }
/* Désactiver l'ancien pseudo-underline animé */
.ds-tab.com-switcher-tab::after { display: none !important; }

/* Bouton overflow "+" : aligné sur les tabs (même hauteur, même couleur repos).
   ATTENTION : ne PAS forcer `display: flex !important` ici — le JS update() utilise
   `overflow.style.display = 'none'` (inline) pour masquer le bouton quand tous les
   onglets tiennent. Un !important écraserait ce inline → "+" resterait visible avec
   un dropdown vide (cf. iter 2026-06-01). On laisse Bootstrap appliquer son display
   par défaut (inline-block via .dropdown). */
.com-switcher-overflow {
    align-self: stretch !important;
    height: 100% !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.com-switcher-overflow-btn {
    color: #8fa1b3 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0 14px !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    box-shadow: none !important;
    outline: none !important;
}
.com-switcher-overflow-btn:focus,
.com-switcher-overflow-btn:focus-visible,
.com-switcher-overflow-btn:active {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
    border-bottom-color: transparent !important;
}
.com-switcher-overflow-btn:hover,
.com-switcher-overflow.show .com-switcher-overflow-btn {
    color: #2D3E50 !important;
    background: #fafbfc !important;
}

/* Dropdown du "+" : item compact, hover sobre (pas de double cadre) */
.com-switcher-overflow-menu .com-switcher-overflow-item {
    padding: 6px 12px !important;
    border-radius: var(--r-md, 6px)!important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    color: #1f2937 !important;
}
.com-switcher-overflow-item:hover,
.com-switcher-overflow-item:focus {
    background: #f1f5f9 !important;
    color: #1f2937 !important;
}

/* Trait gris à droite de la scrollbar de la feed list : retiré */
.com-feed-list { border-right: none !important; }

/* ── Communauté : nom de communauté tronqué si trop long (2026-06-01) ─────
   .com-team-chip est un flex container. Pour que le nom puisse rétrécir et
   tronquer en "..." avant de casser la hauteur, il faut autoriser le rétrécissement
   (min-width: 0 sur le name) ET garder les avatars + count en taille fixe. */
.com-team-chip-sticky .com-team-chip-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.com-team-chip-sticky .com-team-chip-avatars,
.com-team-chip-sticky .com-team-chip-count { flex-shrink: 0; }

/* ── Communauté : réduction hauteur globale des cartes colonne droite −16px ──
   Diminution uniforme du max-height de chaque liste pour gagner de la densité. */
.com-panel-list-conv  { max-height: 108px !important; } /* 124 → 108 */
.com-panel-list-event { max-height: 108px !important; } /* 124 → 108 */
.com-panel-list-doc   { max-height: 116px !important; } /* 132 → 116 */
.com-panel-list-poll  { max-height: 129px !important; } /* 145 → 129 */

/* Espace vertical entre cartes : 17px → 26px (×1,5, 2026-06-24) */
.com-col-right .com-panel { margin-bottom: 26px !important; }


/* =========================================================================
   Communauté — modernisation fil de posts (2026-06-01 — étape 4 iter 3)
   Cohérence gabarit page moderne : couleurs soft, pas d'ombres, barre 2px
   par type, headers de sections collapse sobres, badges harmonisés.
   ========================================================================= */

/* ── A. Cartes de posts : retirer les ombres + hover sobre ────────────── */
.com-post-item {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--r-lg, 10px)!important;
    background: #fff !important;
    transition: background 0.12s, border-color 0.12s !important;
}
.com-post-item:hover {
    background: #fafbfc !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}
.com-post-item.com-post-selected {
    border-color: var(--ds-teal, #0d9488) !important;
    box-shadow: none !important;
}
.com-post-item.com-post-pinned {
    box-shadow: none !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* ── B. Distinction type par barre verticale 2px à gauche ──────────────
   La stripe existait déjà (.com-post-type-stripe). On en fait la signature
   visuelle unique du type (en plus de l'icône à droite). */
.com-post-type-stripe {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: #cbd5e1; /* fallback gris si type inconnu */
}
.com-post-type-conversation .com-post-type-stripe { background: var(--ds-teal, #0d9488); }
.com-post-type-event        .com-post-type-stripe { background: #4d8c6f; }
.com-post-type-poll         .com-post-type-stripe { background: #6b5fa5; }
.com-post-type-document     .com-post-type-stripe { background: #a07840; }

/* ── C. Tag "type" en ghost (texte + icône en couleur, fond transparent) ── */
.com-post-type-tag {
    background: transparent !important;
    border: none !important;
    padding: 2px 6px !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.com-post-type-conversation-tag,
.com-post-type-conversation-tag i { color: var(--ds-teal, #0d9488) !important; }
.com-post-type-event-tag,
.com-post-type-event-tag i        { color: #4d8c6f !important; }
.com-post-type-poll-tag,
.com-post-type-poll-tag i         { color: #6b5fa5 !important; }
.com-post-type-document-tag,
.com-post-type-document-tag i     { color: #a07840 !important; }

/* ── D. Badges d'alerte sur posts : soft pills (fond pâle + texte foncé) ─ */
.com-post-new-badge,
.com-post-due-badge,
.com-post-vote-badge,
.com-post-newreplies-badge,
.com-post-expired-badge,
.com-post-replies,
.com-post-docs-badge,
.com-post-hidden-badge {
    padding: 1px 7px !important;
    border-radius: var(--r-sm, 3px)!important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
}
.com-post-new-badge        { background: #e6f7f5 !important; color: var(--ds-teal, #0d9488) !important; }
.com-post-newreplies-badge { background: #e6f7f5 !important; color: var(--ds-teal, #0d9488) !important; }
.com-post-due-badge        { background: #fef3c7 !important; color: #a16207 !important; }
.com-post-vote-badge       { background: #f5edff !important; color: #6b5fa5 !important; }
.com-post-expired-badge    { background: #f1f5f9 !important; color: #64748b !important; }
.com-post-replies          { background: #f1f5f9 !important; color: #475569 !important; }
.com-post-docs-badge       { background: #f1f5f9 !important; color: #475569 !important; }
.com-post-hidden-badge     { background: #f1f5f9 !important; color: #64748b !important; }

/* ── E. Badges sur les headers des sections collapse (Épinglés/Mémorisés/Activité) ─
   Harmonisation : même grille de soft pills que les badges sur posts. */
.com-pinned-badge {
    padding: 1px 7px !important;
    border-radius: var(--r-sm, 3px)!important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: inherit !important;
    box-shadow: none !important;
    border: none !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.com-pinned-badge-unread { background: #e6f7f5 !important; color: var(--ds-teal, #0d9488) !important; }
.com-pinned-badge-due    { background: #fef3c7 !important; color: #a16207 !important; }
.com-pinned-badge-vote   { background: #f5edff !important; color: #6b5fa5 !important; }

/* ── F. Header sections collapse : sobre, sans fond teinté ─────────────── */
.com-pinned-header {
    background: #fafbfc !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    color: #2D3E50 !important;
}
.com-pinned-header:hover { background: #f1f5f9 !important; }
.com-pinned-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
}
.com-pinned-icon            { color: var(--ds-teal, #0d9488) !important; font-size: 0.78rem !important; }
.com-pinned-personal-icon   { color: #6b5fa5 !important; }
.com-activity-icon          { color: #94a3b8 !important; }
.com-pinned-chevron         { color: #94a3b8 !important; font-size: 0.70rem !important; }

/* Encadré global de la section : sobre, pas d'ombre */
.com-pinned-section {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--r-lg, 10px)!important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 14px;
}

/* ── G. Hiérarchie typographique uniforme ─────────────────────────────── */
.com-post-title {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #2D3E50 !important;
}
.com-post-author { font-size: 0.78rem !important; color: #475569 !important; }
.com-post-date   { font-size: 0.72rem !important; color: #94a3b8 !important; }
.com-post-preview,
.com-post-event-info,
.com-post-poll-preview,
.com-post-doc-preview {
    font-size: 0.78rem !important;
    color: #475569 !important;
}

/* ── H. Marqueur non-lus : petit dot teal à gauche du titre ────────────
   Remplace l'ancienne bordure border-left 3px teal (déjà désactivée 3508). */
.com-post-unread .com-post-title::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ds-teal, #0d9488);
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}


/* =========================================================================
   Communauté — épuration visuelle (2026-06-01 — étape 4 iter 4)
   - Liste posts plate : pas de border tout autour, un seul trait horizontal
     entre posts (annule l'effet "double trait" des cards adjacentes)
   - Plus de bord gauche/droit sur posts ET cards colonne droite
   - Sections collapse : suppression du cadre extérieur, header reste sobre
   - Badge date événement : passage en texte sobre (slate) sans encadré
   ========================================================================= */

/* ── I. Liste plate des posts : pas de border, juste un séparateur top ── */
.com-post-item {
    border: none !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.com-post-item:hover {
    background: #fafbfc !important;
    border-color: #e2e8f0 !important;
}
/* Premier post d'une section : pas de trait en haut (le header de section sépare déjà) */
.com-pinned-body > .com-post-item:first-child { border-top: none !important; }
/* Sélection : on garde un signal teal mais sans encadrer (juste un trait gauche) */
.com-post-item.com-post-selected {
    border-color: #e2e8f0 !important;
    background: #fafbfc !important;
    box-shadow: inset 2px 0 0 var(--ds-teal, #0d9488) !important;
}
.com-post-item.com-post-pinned {
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
}
/* La stripe colorée du type prend le pas sur le trait horizontal au survol */
.com-post-type-stripe { z-index: 1; }

/* ── J. Sections collapse : plus de cadre extérieur ────────────────────
   Le header (.com-pinned-header) garde son fond #fafbfc + border-bottom →
   suffit pour matérialiser la section. Pas besoin de border autour. */
.com-pinned-section {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 14px !important;
}
/* Le body d'une section repliée disparaît déjà via .collapsed (existante) ;
   pour la section dépliée on ajoute juste un border-bottom subtil au dernier post
   pour fermer visuellement la section. */
.com-pinned-body > .com-post-item:last-child { border-bottom: 1px solid #e2e8f0; }

/* ── K. Colonne droite : retirer left/right borders sur .com-panel ────── */
.com-col-right .com-panel {
    border-left: 1px solid #e2e8f0 !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Trait gris au-dessus du titre retiré (2026-06-24) ; on garde le border-left gris
       (aligné sur .ctx-section) + le border-bottom comme séparateur fin entre cards. */
    border-top: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* ── L. Date événement : sobre, sans fond teinté ───────────────────────
   Annule l'encadré teal des lignes 7850-7860. Date en slate, icône en
   vert sauge (couleur type "événement") pour signaler le type sans crier. */
.com-post-item .com-post-event-info {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.com-post-item .com-post-event-info .com-post-event-date {
    color: #475569 !important;
    font-weight: 500 !important;
}
.com-post-item .com-post-event-info .com-post-event-date i {
    color: #4d8c6f !important;  /* couleur type événement (sauge) */
    font-weight: 400;
}


/* =========================================================================
   Communauté — header drawer blanc (2026-06-01 — étape 4 iter 5)
   - Fond blanc au lieu de navy
   - Icône + label du type à gauche, couleur du type
   - Boutons close + fullscreen en slate (pas blanc)
   - Le type a été retiré du source-card en interne (cf. _drawer_post.html.twig)
   ========================================================================= */
#communityDrawer.drawer-task .drawer-header {
    background: #fff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 24px !important;
}
#communityDrawer.drawer-task .drawer-header .close-drawer,
#communityDrawer.drawer-task .drawer-header #btnDrawerFullscreen {
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#communityDrawer.drawer-task .drawer-header .close-drawer:hover,
#communityDrawer.drawer-task .drawer-header #btnDrawerFullscreen:hover {
    color: #2D3E50 !important;
}
#communityDrawer .com-drawer-title {
    color: #2D3E50 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 12px;
}
/* Chip type en début de header — icône + label en couleur du type (ghost) */
.com-drawer-type {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.com-drawer-type:empty { display: none; }
.com-drawer-type[data-type="1"] { color: #4b7bb5; }   /* Conversation = bleu (cohérence carte "Dernières conversations") */
.com-drawer-type[data-type="2"] { color: #4d8c6f; }
.com-drawer-type[data-type="3"] { color: #6b5fa5; }
.com-drawer-type[data-type="4"] { color: #a07840; }


/* =========================================================================
   Communauté — ajustements fil de posts + drawer (2026-06-01 — étape 4 iter 6)
   - Conversation passe en bleu #4b7bb5 (au lieu de teal) → cohérence avec
     l'icône de la carte "Dernières conversations" à droite
   - Hover du post couvre l'ensemble du card (header + body)
   - Trait gris de séparation header/body retiré
   - Petite marge entre posts pour les distinguer
   - Drawer : marge supérieure réduite au-dessus du titre
   ========================================================================= */

/* ── M. Conversation = bleu #4b7bb5 (override teal) ────────────────────── */
.com-post-type-conversation .com-post-type-stripe { background: #4b7bb5 !important; }
.com-post-type-conversation-tag,
.com-post-type-conversation-tag i { color: #4b7bb5 !important; }

/* ── N. Hover entièreté du post (header + body) ───────────────────────
   Le header avait sa propre background qui bloquait la propagation du hover.
   On le rend transparent : tout le card change couleur de fond ensemble. */
.com-post-item .com-post-item-header {
    background: transparent !important;
    border-bottom: none !important;   /* ── O. Trait gris row1/row2 retiré ── */
}
.com-post-item.com-post-pinned .com-post-item-header,
.com-post-item.com-post-pinned-personal .com-post-item-header { background: transparent !important; }

/* ── P. Petite marge entre posts pour les distinguer ──────────────────── */
.com-post-item { margin-bottom: 6px !important; }

/* ── Q. Drawer : réduire marge au-dessus du titre ─────────────────────── */
#communityDrawer .drawer-body { padding-top: 8px !important; }
#communityDrawer .com-source-author-row-top { margin-bottom: 6px !important; }
#communityDrawer .com-source-card { padding-top: 8px !important; }


/* =========================================================================
   Communauté — ajustements (2026-06-01 — étape 4 iter 7)
   - Flash halo retrouvé sur création de post (utilise outline car
     box-shadow !important bloquait l'ancienne keyframe)
   - Alignement bord droit row 2 sur row 1 des posts
   - Sélection post plus marquée (background + barre teal 3px)
   - Largeur séparant fil ↔ cartes droite : 40px → 60px
   ========================================================================= */

/* ── R. Flash halo post nouveau créé : ripple teal en outline ──────────
   L'ancienne keyframe (.com-post-flash) animait box-shadow, mais ma règle
   `.com-post-item { box-shadow: none !important; }` bloquait l'animation
   (les !important écrasent les animations). On rejoue l'effet en animant
   `outline + outline-offset` qui ne sont contraints par aucune autre règle. */
@keyframes comPostFlashHalo {
    0%   { outline: 2px solid rgba(13, 148, 136, 0.65); outline-offset: 0; }
    50%  { outline: 2px solid rgba(13, 148, 136, 0.25); outline-offset: 6px; }
    100% { outline: 2px solid rgba(13, 148, 136, 0);    outline-offset: 12px; }
}
.com-post-item.com-post-flash {
    animation: comPostFlashHalo 1.8s ease-out !important;
    z-index: 2; /* le ring outline ne doit pas être clippé par le post suivant */
    position: relative;
}

/* ── S. Row 2 : aligner le bord droit sur les badges row 1 ─────────────
   Les badges row 1 occupent leur boîte jusqu'à 12px du bord. Le texte
   ("12 votes", "12.3 Ko") en row 2 atteint aussi 12px du bord, mais
   visuellement c'est le bord du TEXTE vs le bord du BADGE — léger
   décalage perçu. On compense via padding-right additionnel sur le body. */
.com-post-item .com-post-item-body { padding-right: 18px !important; }
.com-post-item .com-post-item-header { padding-right: 18px !important; }
/* Pills votes : border-radius 2px (convention DS) au lieu de 10px (pill arrondi) */
.com-post-poll-votes { border-radius: 2px !important; }
.com-post-vote-badge { border-radius: var(--r-sm, 3px)!important; }
.com-pinned-badge-vote { border-radius: var(--r-sm, 3px)!important; }

/* ── V. Sections collapse — espacement réduit + headers sticky ────────
   Le scroll parent est .com-feed-list. Chaque header sticky au top: 0
   reste visible quand on scrolle dans sa section (jusqu'à être poussé
   par le header de la section suivante).
   ATTENTION : .com-pinned-section a un `overflow: hidden` à la ligne
   8990 qui CASSE position:sticky pour les enfants. On force overflow
   visible ici pour rétablir le sticky. */
.com-pinned-section {
    margin-bottom: 6px !important;
    overflow: visible !important;
}
.com-pinned-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    /* Fond opaque (#fafbfc déjà posé en F) renforcé pour masquer le
       scroll des posts derrière. */
    background: #fafbfc !important;
    border-radius: 0 !important;
}


/* =========================================================================
   Communauté — Base documentaire (gabarit étape 5 — 2026-06-01)
   Migration du tableau documents vers le pattern .ds-table-native moderne
   + harmonisation des badges (catégorie, scope, "depuis conversation")
   + sélection teal cohérente avec le Fil.
   ========================================================================= */

/* ── W. Tableau documents : aligne .com-docs-table sur .ds-table-native ──
   La dual-class .com-docs-table.ds-table-native existe mais .com-docs-table
   (lignes 4085+) impose des couleurs/spacings différents. On override pour
   matcher exactement le gabarit (hover #fafbfc, séparateurs 1px #f3f4f6,
   sticky header sobre, sélection teal cohérente avec posts du Fil). */
.com-docs-table.ds-table-native thead th {
    background: #fff !important;
    font-size: 0.68rem !important;
    color: #94a3b8 !important;
    padding: 12px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.com-docs-table.ds-table-native tbody tr {
    background: #fff !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.com-docs-table.ds-table-native tbody tr:hover { background: #fafbfc !important; }
.com-docs-table.ds-table-native tbody tr.com-doc-selected {
    background: #f0fdfa !important;
    box-shadow: inset 3px 0 0 var(--ds-teal, #0d9488) !important;
}
.com-docs-table.ds-table-native tbody tr.com-doc-selected:hover { background: #e6f7f5 !important; }
.com-docs-table.ds-table-native tbody td {
    padding: 12px !important;
    color: #415873 !important;
}

/* ── X. Badges (catégorie, scope, conversation source) — soft pills 2px ──
   Convention DS : padding 1px 7px, radius 2px, fond pâle, texte foncé,
   font 0.62rem 700, pas d'ombre ni de bord épais. */
.com-doc-cat-badge,
.com-doc-scope-badge,
.com-doc-conv-tag {
    padding: 1px 7px !important;
    border-radius: var(--r-sm, 3px)!important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}
.com-doc-cat-badge { background: #fef3c7 !important; color: #a16207 !important; }   /* ocre/ambre soft */
.com-doc-scope-badge-enterprise { background: #eff6ff !important; color: #4b7bb5 !important; } /* bleu coherent avec Conversations */
.com-doc-scope-badge-team       { background: #ecfdf5 !important; color: #4d8c6f !important; } /* sauge coherent avec Événements */
.com-doc-conv-tag {
    background: #eff6ff !important;       /* bleu soft (coherent type Conversation) */
    color: #4b7bb5 !important;
    margin-left: 6px;
}

/* ── Y. Bouton "Favoris uniquement" : ghost amber sobre ───────────────── */
.com-doc-fav-filter {
    border-radius: 2px !important;
    font-size: 0.78rem !important;
}

/* ── Z. Boutons d'action dans la ligne : radius 2px, hover teal cohérent ── */
.com-docs-table .com-docs-row-btn {
    border-radius: 2px !important;
    border-color: transparent !important;
    background: transparent !important;
}
.com-docs-table .com-docs-row-btn:hover {
    background: #e6f7f5 !important;
    border-color: transparent !important;
    color: var(--ds-teal, #0d9488) !important;
}

/* ── AA. Marge horizontale 40px gauche/droite (gabarit, override ligne 7901) ──
   L'ancien gabarit était 80px ; on aligne sur les autres pages modernisées. */
#main-content-community-docs .com-docs-page-body {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* ── BB. Suppression de l'encadré autour du tableau ────────────────────
   .com-docs-section avait border + box-shadow + radius (ligne 3338). On
   l'aplatit pour rester cohérent avec le Fil (cards posts plates). */
.com-docs-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── BB-bis. table-layout: fixed → les widths du <thead> sont strictement
   respectés (sinon en mode auto, la colonne Document s'étend pour
   accommoder les longs noms de fichiers, malgré le width:25%). */
.com-docs-table.ds-table-native { table-layout: fixed; }

/* ── CC. Cellule nom : nom tronqué + taille fichier inline (gabarit étape 5 iter 2) ──
   Le markup passe de 2 lignes (.com-docs-col-name-text + .com-docs-col-name-sub) à 1
   ligne unique : nom (tronqué ellipsis) + tag conversation + taille fichier (slate, regular). */
.com-docs-col-name {
    overflow: hidden;
}
.com-docs-col-name-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.com-docs-col-name-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2D3E50;
    font-weight: 500;
}
.com-docs-col-name-size {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 400;       /* pas de gras */
}

/* ── DD. Catégorie de document éditable inline dans le drawer (étape 5 iter 3) ──
   Le pattern .com-editable-field réutilise comEditField/comSaveEdit. Layout
   spécifique pour rester inline avec la taille du fichier dans la doc-meta. */
.com-doc-category-field {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}
/* Variante "row" : la catégorie est placée sous la doc-card sur sa propre
   ligne (évite de casser le layout interne icon|info|download au moment de
   l'édition où le <select> aurait empiété sur le bouton Télécharger). */
.com-doc-category-row {
    display: flex !important;
    margin: 8px 0 0 0;
    padding-left: 8px;
}
.com-doc-category-field .com-editable-view,
.com-doc-category-field .com-editable-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.com-doc-category-field .com-editable-edit { display: none; }
.com-doc-category-field .com-doc-category-select {
    width: auto;
    min-width: 160px;
    font-size: 0.78rem;
    height: 28px;
    padding: 2px 8px;
}
.com-doc-category-field .com-edit-pencil,
.com-doc-category-field .com-edit-icon-btn {
    color: #94a3b8;
    background: transparent;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.12s;
}
.com-doc-category-field .com-edit-pencil:hover,
.com-doc-category-field .com-edit-icon-btn:hover { color: var(--ds-teal, #0d9488); }
/* Placeholder "Aucune catégorie" — fond + couleur slate doux, italique. */
.com-doc-cat-empty {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    font-style: italic;
    font-weight: 500 !important;
}

/* ── EE. Hint Base doc — icône info en suffixe du sous-titre, tooltip au hover ──
   L'icône (i) est inline avec le sous-titre. Le tooltip s'affiche au hover sur
   l'ensemble (texte + icône) via la classe wrapper .com-docs-subtitle-tt. */
.com-docs-subtitle-tt {
    cursor: help;
    display: inline-flex;
    align-items: center;
}
.com-docs-subtitle-info {
    color: #94a3b8;
    font-size: 0.85rem;
    transition: color 0.12s;
}
.com-docs-subtitle-tt:hover .com-docs-subtitle-info { color: var(--ds-teal, #0d9488); }

/* ── FF. Compteur "16 documents" tout à droite du header (sans gras) ────── */
.com-docs-count {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 400;       /* explicite : pas de gras */
}

/* ── GG. Décalage 10px du switcher dans le header Communauté (Fil + Base doc) ── */
.com-page .ds-page-header .ds-view-switcher { margin-left: 10px; }

/* ── HH. Encadré filtres Communauté + Catégorie : border-radius 2px (DS) ──
   Override du border-radius 8px (ligne 4166) pour cohérence design system. */
.com-docs-filter-rows { border-radius: 2px !important; }


/* =========================================================================
   Drawer filtres — harmonisation Tdl + Listes (gabarit étape 6a iter 2)
   ========================================================================= */

/* ── II. Header drawer : titre Anton plus grand + croix plus large ─────── */
.ds-drawer .ds-drawer-header { padding: 12px 24px; }
.ds-drawer .ds-drawer-header h4 {
    font-size: 1.6rem !important;
    line-height: 1.2;
}
.ds-drawer .ds-drawer-close {
    width: 36px; height: 36px;
    font-size: 1.1rem;
}

/* ── JJ. Filtres Tdl en 1 colonne (au lieu de 2) à l'intérieur du drawer ── */
.ds-drawer .tdl-filters-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}
.ds-drawer .tdl-filter-cell { max-width: none !important; }

/* ── KK. Labels filtres harmonisés (Tdl + Listes) : taille + style identiques ── */
.ds-drawer .ds-drawer-section-label,
.ds-drawer .tdl-filter-cell label {
    display: block;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #2D3E50 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px !important;
}

/* ── LL. Placeholder selectpicker uniformisé : "Sélectionner" en slate doux ── */
.ds-drawer .bootstrap-select .filter-option,
.ds-drawer .bootstrap-select .filter-option-inner,
.ds-drawer .bootstrap-select .filter-option-inner-inner {
    color: #2D3E50;
}
/* 2026-06-23 — IMPORTANT : dans cette version de bootstrap-select, la classe .bs-placeholder
   est posée sur le BOUTON .dropdown-toggle (et non sur le wrapper .bootstrap-select), cf. la
   règle .com-date-time-row plus haut. Les sélecteurs ci-dessous ciblent donc le bouton. */

/* État NON sélectionné (intitulé du filtre = placeholder) : gris doux, fin → lecture "label". */
.ds-drawer .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner,
.ds-drawer .bootstrap-select .filter-option:empty + .filter-option-inner,
.ds-drawer .bootstrap-select > .dropdown-toggle[title="Sélectionner"] .filter-option-inner-inner {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* État SÉLECTIONNÉ (une ou plusieurs valeurs choisies) : teal + semi-gras → ressort comme
   filtre actif. Cible le bouton SANS .bs-placeholder. Posé sur .ds-drawer → s'applique à
   tous les drawers Filtrer (Projets, Contrats, Entreprises, Tâches, Listes). */
.ds-drawer .bootstrap-select > .dropdown-toggle:not(.bs-placeholder) .filter-option-inner-inner {
    color: #0d9488 !important;
    font-weight: 600 !important;
}

/* ── MM. Footer sticky (Tdl) : zone Réinitialiser + Appliquer en bas ──── */
.ds-drawer-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -1px 0 #f3f4f6;
}
/* Le drawer Tdl avait son submit DANS le form (.tdl-filters-actions) ; on le neutralise
   visuellement quand il est encore inline (le bouton est désormais dans le footer). */
.ds-drawer .tdl-filters-actions { display: none !important; }

/* Boutons du footer : largeur naturelle, style cohérent */
.ds-drawer-footer .ds-btn-text,
.ds-drawer-footer .ds-btn-link-reset {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--r-md, 6px);
}
.ds-drawer-footer .ds-btn-text:hover,
.ds-drawer-footer .ds-btn-link-reset:hover { color: #2D3E50; background: #f8fafc; }

/* ── NN. Bouton "Filtrer" en gris quand aucun filtre actif (chevron retiré) ──
   Style équivalent quand .is-empty est posé : texte slate, icône slate.
   Au hover : reprend le comportement teal-light défini plus haut. */
.ds-filters-trigger.is-empty {
    color: #94a3b8;
}
.ds-filters-trigger.is-empty i { color: #94a3b8; }
.ds-filters-trigger.is-empty:hover,
.ds-filters-trigger.is-empty:hover i { color: var(--ds-teal, #0d9488); }

/* ── OO. Harmonisation visuelle Select2 ↔ Bootstrap-Select dans le drawer ──
   Le filtre Fournisseur (Select2 AJAX) doit avoir le même look que les autres
   champs (selectpicker) : même hauteur, même bordure, même padding, placeholder
   slate. Override des styles Select2 par défaut quand le widget est dans le drawer. */
.ds-drawer-body .select2-container--default .select2-selection--single {
    height: 34px !important;
    /* Pas de bordure : alignement sur .btn-white (utilisé par bootstrap-select)
       qui définit `border: none` dans app.css. */
    border: none !important;
    border-radius: var(--r-md, 6px)!important;
    background: #fff;
    box-shadow: none !important;
}
.ds-drawer-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #2D3E50 !important;
    font-size: 0.8rem !important;
    font-family: inherit !important;
    /* font-weight: 200 (Light) pour matcher bootstrap-select qui utilise
       .filter-option-inner-inner { font-weight: 200 !important; } dans app.css. */
    font-weight: 200 !important;
}
.ds-drawer-body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #2D3E50 !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 200 !important;
}
.ds-drawer-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}
.ds-drawer-body .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #94a3b8;
    font-size: 1rem;
    margin-right: 22px;
}
.ds-drawer-body .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--ds-teal, #0d9488);
}
.ds-drawer-body .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ds-teal, #0d9488) !important;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.10) !important;
}


/* =========================================================================
   Listes — Onglet Projets (cycle B 2026-06-01)
   Vue Standard 10 colonnes (cf. docs/sessions/2026-06-01_listes-cycle-B-projets-spec.md)
   ========================================================================= */

/* Largeurs colonnes — vue unique épurée (cycle B iter 3). 8 colonnes.
   Itér 3 : Titre composite 2 lignes (titre + pill procédure dessous), réduction Titre
   30%, Statut +25%, Phase +50%, Dates avant Finance, Santé badge compact. */
/* ── Colonnes onglet Contrats (cycle B 2026-06-02) ─────────────────────────
   8 colonnes : Favori | Porteur (avatar) | Contrat (composite titre + parent + pill Type)
   | Fournisseur | Statut | Renouvellement (composite condition + durée) | Échéance fin | Préavis résil. */
.lst-table-contracts .lst-col-favorite             { width: 40px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.lst-table-contracts .lst-col-contract-user        { width: 50px;  flex-shrink: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.lst-table-contracts .lst-col-contract-name        { flex: 1.25 1 0; min-width: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.lst-table-contracts .lst-col-contract-supplier    { flex: 1 1 0; min-width: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; }
.lst-table-contracts .lst-col-contract-status      { width: 130px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.lst-table-contracts .lst-col-contract-validation  { width: 140px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lst-table-contracts .lst-col-contract-renewal     { width: 250px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; }
.lst-table-contracts .lst-col-contract-endat       { width: 95px;  flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.lst-table-contracts .lst-col-contract-termination { width: 100px; flex-shrink: 0; padding: 0 5px 0 8px; display: flex; align-items: center; }

/* Pill Validation (cycle B 2026-06-02 fix 1) : tronquage propre dans la colonne
   et tooltip affichant le label complet au hover (cf. data-toggle="tooltip" dans row). */
.lst-validation-badge {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-block;
}

/* ── Colonnes onglet Entreprises (cycle B 2026-06-02) ──────────────────────
   8 colonnes : Favori | Porteur | Entreprise (composite) | Pays (drapeau) |
   Activité 24m | Évaluation | CA | Référencement. */
.lst-table-suppliers .lst-col-favorite               { width: 40px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.lst-table-suppliers .lst-col-supplier-user          { width: 50px;  flex-shrink: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.lst-table-suppliers .lst-col-supplier-name          { flex: 1 1 auto; min-width: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.lst-table-suppliers .lst-col-supplier-country       { width: 100px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.lst-table-suppliers .lst-col-supplier-ca            { width: 138px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; }
.lst-table-suppliers .lst-col-supplier-activity      { width: 154px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.lst-table-suppliers .lst-col-supplier-contracts     { width: 90px;  flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; }
.lst-table-suppliers .lst-col-supplier-rating        { width: 105px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; }
.lst-table-suppliers .lst-col-supplier-referencing   { width: 120px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.lst-table-suppliers .lst-col-supplier-typology      { width: 95px;  flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; }
.lst-table-suppliers .lst-col-supplier-category      { width: 130px; flex-shrink: 0; padding: 0 0 0 8px; display: flex; align-items: center; }

/* Suppliers : 11 colonnes serrées → on retire le padding droit générique des rows
   pour ne pas laisser un espace après la dernière colonne (Catégorie).
   !important nécessaire pour surclasser `.ds-row { padding: 0 16px }` shorthand
   défini ailleurs dans le fichier (la propriété shorthand redéfinit le padding-right). */
.lst-table-suppliers .ds-row,
.lst-table-suppliers .ds-list-header {
    padding-right: 0 !important;
}

/* Header de colonne tronquable : ellipsis si le label dépasse la largeur de la colonne.
   Le tooltip data-toggle="tooltip" sur le header affiche le label complet au survol. */
.lst-col-header-truncatable {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    cursor: help;
}

/* Pill Typologie A/B/C — outline harmonisée sur le style .ds-badge (Référencement)
   pour cohérence visuelle : même padding/font/radius/weight 400 (refonte UX 2026-06-02). */
.lst-pill-supplier-typology {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px;
    padding: 3px 9px;
    border-radius: var(--r-sm, 3px);
    font-size: 0.70rem; font-weight: 400;
    background: #fff;
    cursor: help;
}
.lst-table-suppliers .ds-list-header .lst-col-supplier-typology {
    justify-content: center; text-align: center;
}

/* Pill Taille (sous le nom dans la composite) — fond teal clair, sans encadré.
   Variante "soft pill" pour la distinguer visuellement des autres pills outline
   (Référencement / Typologie / Catégorie). Refonte UX 2026-06-02. */
.lst-pill-supplier-size {
    display: inline-flex; align-items: center; align-self: flex-start;
    padding: 1px 6px; border-radius: var(--r-sm, 3px);
    font-size: 0.62rem; font-weight: 400;
    background: rgba(13,148,136,0.10); /* identique pill Procédure "Appel d'offres" */
    color: var(--ds-teal, #0d9488);
    flex-shrink: 0;
}
/* Compteur Contrats actifs — centré, taille mid */
.lst-supplier-contracts-count {
    font-size: 0.95rem; font-weight: 600; color: #2D3E50;
}
/* Header de la colonne Contrats centré (cohérent avec contenu centré) */
.lst-table-suppliers .ds-list-header .lst-col-supplier-contracts,
.lst-table-suppliers .ds-list-header .lst-col-supplier-activity {
    justify-content: center; text-align: center;
}

.lst-supplier-title {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.82rem; font-weight: 500; color: #2D3E50;
}
/* Override .ds-badge pour tous les pills à l'intérieur des rows Lists (Contrats, AO,
   Entreprises) : weight 400 pour cohérence avec les autres pills harmonisées
   (Type contrat, Catégorie, Taille, etc.). Scopé aux rows Lists uniquement pour ne pas
   impacter les .ds-badge utilisées ailleurs (Tdl, dashboard, etc.). Cycle B 2026-06-02. */
.lst-row .ds-badge {
    font-weight: 400;
}
.lst-pill-referencing {
    font-weight: 400;
}

/* Pill Catégorie type — harmonisée totalement sur Référencement + Typologie : casse
   normale, weight 400, padding 3px 9px, radius 2px. Refonte UX 2026-06-02. */
.lst-pill-supplier-category {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: var(--r-sm, 3px);
    font-size: 0.70rem; font-weight: 400;
    border: 1px solid;
    background: #fff;
    flex-shrink: 0;
}
/* Nom pays — texte avec ellipsis si dépassement */
.lst-supplier-country-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.78rem;
}
/* Activité 24m : trio icônes/compteurs en ligne, espacement compact */
.lst-activity-line { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; color: #2D3E50; }
.lst-activity-chip {
    display: inline-flex; align-items: center; gap: 4px;
    color: #64748b;
}
.lst-activity-chip i { font-size: 0.72rem; }
.lst-activity-chip:has(> i.fa-folder)  { color: #4d8c6f; }
.lst-activity-chip:has(> i.fa-bullhorn) { color: #6b5fa5; }
.lst-activity-chip:has(> i.fa-trophy)   { color: #d4a017; }
.lst-supplier-rating-value { font-weight: 600; color: #2D3E50; font-size: 0.82rem; }
.lst-supplier-ca-value { font-weight: 600; color: #2D3E50; font-size: 0.78rem; }
.lst-supplier-ca-year { font-weight: 400; color: #94a3b8; font-size: 0.68rem; margin-left: 2px; }

/* Titre contrat (l.1) — flex inline pour nom + icône parent à droite (pattern Projets) */
.lst-contract-title-row { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.lst-contract-title-row .lst-contract-title {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.82rem; font-weight: 500; color: #2D3E50;
}

/* Icône contrat parent — même style que .lst-project-parent-icon (teal soft) */
.lst-contract-parent-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: transparent; border: none; border-radius: var(--r-sm, 3px);
    color: var(--ds-teal, #0d9488);
    font-size: 0.78rem; cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0; padding: 0;
}
.lst-contract-parent-icon:hover { background: var(--ds-teal-light, #e6f7f5); color: var(--ds-teal, #0d9488); }
.lst-contract-parent-icon:focus { outline: none; }
.lst-contract-parent-icon:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px; }

/* Pill Type contrat (l.2 du composite Nom contrat) — pas d'encadré, fond doux uniquement.
   Harmonisé 2026-06-02 : weight 400 + casse normale (cohérent avec autres pills Lists). */
.lst-pill-contract-type {
    display: inline-flex; align-items: center; align-self: flex-start;
    padding: 1px 6px; border-radius: var(--r-sm, 3px);
    font-size: 0.62rem; font-weight: 400;
    flex-shrink: 0;
}

.lst-table-projects .lst-col-favorite       { width: 40px;  flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.lst-table-projects .lst-col-project-user   { width: 50px;  flex-shrink: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.lst-table-projects .lst-col-project-name   { flex: 1.25 1 0; min-width: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.lst-table-projects .lst-col-project-status { width: 170px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; }
.lst-table-projects .lst-col-project-phase  { width: 320px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lst-table-projects .lst-col-project-dates  { width: 130px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.lst-table-projects .lst-col-project-finance { width: 150px; flex-shrink: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; }
.lst-table-projects .lst-col-project-health { width: 40px;  flex-shrink: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; }

/* Titre projet (ligne 1) : flex inline pour le nom + icône parent à droite.
   Gap élargi à 12px pour respiration entre nom et icône cliquable (iter 4). */
.lst-project-title-row {
    display: inline-flex; align-items: center; gap: 12px; min-width: 0;
}
.lst-project-title-row .lst-project-title {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.82rem; font-weight: 500; color: #2D3E50;
}

/* Pill Procédure réalignée sur la même taille que pills Priorité — moins criante */
.lst-pill-procedure {
    align-self: flex-start;
    padding: 1px 6px !important;
    font-size: 0.62rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Badge Santé : pastille orange douce avec compteur (refonte iter 3).
   Remplace l'icône exclamation triangle rouge (trop oppressante). */
.lst-health-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: var(--r-full, 999px);
    background: #fef3c7;        /* ambre soft */
    color: #a16207;             /* ambre foncé pour le chiffre */
    font-size: 0.72rem; font-weight: 700;
    cursor: help;
}

/* Cellule composite 2 lignes — convention densité serrée (cf. spec §4.1).
   Hauteur de ligne table résultante ~42-44px (vs 40px single-line). */
.lst-cell-composite { gap: 2px; padding-top: 6px; padding-bottom: 6px; }
.lst-cell-line-1 {
    font-size: 0.78rem; line-height: 1.3; color: #2D3E50; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst-cell-line-2 {
    font-size: 0.68rem; line-height: 1.3; color: #94a3b8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pill Procédure inline avec le titre (couleurs subtiles par type).
   Harmonisé 2026-06-02 : casse normale + weight 400 (cohérent avec autres pills Lists). */
.lst-pill-procedure {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: var(--r-sm, 3px);
    font-size: 0.62rem; font-weight: 400;
    flex-shrink: 0;
}
.lst-pill-procedure-appel_offres        { background: rgba(13,148,136,0.10); color: var(--ds-teal, #0d9488); }
.lst-pill-procedure-sourcing            { background: rgba(77,140,111,0.10); color: #4d8c6f; }
.lst-pill-procedure-negociation_gre_a_gre { background: rgba(160,120,64,0.10); color: #a07840; }
.lst-pill-procedure-transverse          { background: rgba(107,95,165,0.10); color: #6b5fa5; }

/* Icône projet parent (à côté du titre) — bouton cliquable, ouvre le drawer
   du parent au click. Teal au repos, carré teal soft au hover (iter 4). */
.lst-project-parent-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: transparent; border: none; border-radius: var(--r-sm, 3px);
    color: var(--ds-teal, #0d9488);
    font-size: 0.78rem; cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
    padding: 0;
}
.lst-project-parent-icon:hover {
    background: var(--ds-teal-light, #e6f7f5);
    color: var(--ds-teal, #0d9488);
}
.lst-project-parent-icon:focus { outline: none; }
.lst-project-parent-icon:focus-visible {
    outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 1px;
}

/* Titre projet — flex pour permettre ellipsis + pill alignée */
.lst-project-title {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pill Priorité (P1-P4) — couleurs cohérentes avec Project::$priorities.
   Harmonisé 2026-06-02 : weight 400 (cohérent avec autres pills Lists). */
.lst-pill-priority {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: var(--r-sm, 3px);
    font-size: 0.62rem; font-weight: 400;
    align-self: flex-start;
}
.lst-pill-priority-p1 { background: rgba(239,68,68,0.10);  color: #ef4444; }
.lst-pill-priority-p2 { background: rgba(245,158,11,0.10); color: #f59e0b; }
.lst-pill-priority-p3 { background: rgba(234,179,8,0.10);  color: #c5a008; }
.lst-pill-priority-p4 { background: rgba(16,185,129,0.10); color: #10b981; }

/* Badge "+N" multi-valeurs (Prescripteur, Santé) — pattern §4.4 */
.lst-multi-more {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: var(--r-sm, 3px);
    font-size: 0.62rem; font-weight: 700;
    background: #f1f5f9; color: #475569;
    cursor: help; flex-shrink: 0;
}

/* Cellule Finance — label "Enjeu/Gain" en muted + valeur en navy. Gain coloré. */
.lst-cell-finance .lst-finance-label {
    display: inline-block; min-width: 38px;
    font-size: 0.62rem; color: #94a3b8; font-weight: 400; margin-right: 4px;
}
.lst-cell-finance .lst-finance-value { font-weight: 500; }
.lst-finance-gain-pos { color: #16a34a; }
.lst-finance-gain-neg { color: #dc2626; }

/* Cellule Santé — couleurs primaires + badge +N */
.lst-health-cell {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.85rem;
}
.lst-health-timing { color: #dc2626; }
.lst-health-other  { color: #d97706; }

/* Plage dates dans le drawer filtre Projets */
.lst-filter-date-range {
    display: flex; align-items: center; gap: 8px;
}
.lst-filter-date-range .ds-period-input { flex: 1 1 0; min-width: 0; height: 32px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); font-size: 0.82rem; }
.lst-filter-date-sep { color: #94a3b8; font-size: 0.85rem; }


/* =========================================================================
   Filtres favoris (étape 6b — 2026-06-01)
   Pattern : chips épinglés en subbar (max 3) + section "Mes favoris" dans
   le drawer (collapse, hover actions). Réutilisable Tdl + Listes + futures pages.
   ========================================================================= */

/* ── PP. Chips épinglés en subbar (à droite du bouton Filtrer) ────────── */
.ds-pinned-favorites {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}
.ds-pinned-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 210px;
    padding: 5px 10px;
    background: var(--ds-teal-light, #e6f7f5);
    color: var(--ds-teal, #0d9488);
    border: 1px solid transparent;
    border-radius: var(--r-sm, 3px);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.ds-pinned-chip:hover {
    background: var(--ds-teal, #0d9488);
    color: #fff;
    border-color: var(--ds-teal, #0d9488);
}
.ds-pinned-chip i { font-size: 0.72rem; }
.ds-pinned-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── QQ. Section "Mes favoris" en haut du drawer body ───────────────────
   Bloc encadré avec fond pâle teal-light pour différencier visuellement des champs
   filtrables qui suivent (mise à jour 2026-06-09 sur retour user). */
.ds-drawer-favorites {
    margin-bottom: 18px;
    margin-left: -4px; margin-right: -4px;
    padding: 8px 12px 12px;
    background: #f6fbfa;
    border: 1px solid #e2efed;
    border-radius: 4px;
}
.ds-drawer-favorites-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 0;
    transition: color 0.12s;
}
.ds-drawer-favorites-header:hover { color: var(--ds-teal, #0d9488); }
.ds-drawer-favorites-chevron {
    color: #94a3b8;
    font-size: 0.72rem;
    transition: transform 0.18s;
}
.ds-drawer-favorites.is-collapsed .ds-drawer-favorites-chevron { transform: rotate(-90deg); }
.ds-drawer-favorites.is-collapsed .ds-drawer-favorites-body { display: none; }
.ds-drawer-favorites-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2D3E50;
    flex: 1 1 auto;
}
.ds-drawer-favorites-count {
    font-size: 0.72rem;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 2px;
    padding: 2px 8px;
}

/* ── RR. Liste favoris dans le drawer ─────────────────────────────────── */
.ds-drawer-favorites-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.ds-favorite-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--r-lg, 10px);
    cursor: pointer;
    transition: background 0.12s;
}
/* Hover plus marqué pour rester visible sur le fond teal-light de la section favoris. */
.ds-favorite-item:hover { background: #e6f7f5; }
.ds-favorite-pin {
    color: #cbd5e1;
    font-size: 0.78rem;
    cursor: pointer;
    width: 16px;
    text-align: center;
}
.ds-favorite-pin:hover { color: var(--ds-teal, #0d9488); }
.ds-favorite-item.is-pinned .ds-favorite-pin { color: #f59e0b; }
.ds-favorite-item.is-pinned .ds-favorite-pin:hover { color: #d97706; }
.ds-favorite-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    color: #2D3E50;
}
.ds-favorite-action {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
    font-size: 0.78rem;
    border-radius: var(--r-md, 6px);
}
.ds-favorite-item:hover .ds-favorite-action { opacity: 1; }
.ds-favorite-action:hover { color: var(--ds-teal, #0d9488); background: #fff; }
.ds-favorite-action.ds-favorite-delete:hover { color: #dc2626; }

/* Badge compteur de projets/contrats matchant un favori — chargé en lazy à l'ouverture du drawer.
   Format unifié transverse 2026-06-09 : pill rectangulaire compact (border-radius 2px,
   police 0.66rem) appliqué sur TOUS les drawers Filtrer (Projets / Contrats / Tdl / Listes).
   Anticipation : compteurs sur tabs principaux (chantier client-side perf) seront sur le
   même gabarit pour rester compact en largeur. */
.ds-favorite-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    margin-left: 8px;
    background: #e2efed;
    color: var(--ds-teal, #0d9488);
    font-size: 0.66rem;
    font-weight: 600;
    border-radius: var(--r-sm, 3px);
    flex-shrink: 0;
    line-height: 1.4;
}
.ds-favorite-count.is-empty { background: #f1f5f9; color: #94a3b8; }

/* Tooltip hover détail d'un favori — liste des filtres appliqués (Projets, chantier 2026-06-04).
   Police légèrement réduite, multi-ligne (<br>), alignement gauche, fond foncé charte.
   pointer-events:none sur le wrapper : évite que le tooltip lui-même intercepte le curseur
   (cause typique du flicker quand il "atterrit" sous la souris). */
.prj-fav-tooltip { pointer-events: none; }
.prj-fav-tooltip .tooltip-inner {
    text-align: left;
    max-width: 280px;
    font-size: 0.72rem;
    padding: 6px 10px;
    line-height: 1.5;
    white-space: normal;
}
.prj-fav-tooltip .tooltip-inner strong { font-weight: 600; }

.ds-drawer-favorites-empty {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
    padding: 8px 0 0;
    margin: 0;
}

/* ── SS. Renommage inline (l'input remplace le span .ds-favorite-name) ── */
.ds-favorite-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    padding: 2px 8px;
    border: 1px solid var(--ds-teal, #0d9488);
    border-radius: var(--r-md, 6px);
    font-size: 0.82rem;
    color: #2D3E50;
    outline: none;
}

/* ── TT. Footer drawer : bouton Sauvegarder à gauche + groupe à droite ── */
.ds-drawer-footer { justify-content: space-between !important; }
.ds-drawer-footer-right {
    display: flex; align-items: center; gap: 8px;
}
.ds-drawer-footer .prj-favorites-save-btn,
.ds-drawer-footer .lst-favorites-save-btn,
.ds-drawer-footer .tdl-favorites-save-btn {
    color: var(--ds-teal, #0d9488);
}
.ds-drawer-footer .prj-favorites-save-btn:hover,
.ds-drawer-footer .lst-favorites-save-btn:hover,
.ds-drawer-footer .tdl-favorites-save-btn:hover { background: var(--ds-teal-light, #e6f7f5); }

/* Point 4 chantier 2026-06-04 — Masque le chevron natif bootstrap-select dans tous les
   drawers Filtrer (Projets, Tdl, Listes). Le placeholder du select sert déjà de signal
   "cliquable", le chevron ajoute du bruit visuel inutile.
   Couvre toutes les variantes :
   - Bootstrap 4 dropdown-toggle::after (triangle CSS via border)
   - bootstrap-select v1.13 .bs-caret span
   - fallback: tout dropdown-toggle dans le drawer body */
.ds-drawer-body .dropdown-toggle::after,
.ds-drawer-body .bootstrap-select .dropdown-toggle::after,
.ds-drawer-body .bootstrap-select .bs-caret,
.ds-drawer-body .bootstrap-select .filter-option .caret { display: none !important; }

/* Row inline pour la saisie du nom du nouveau favori */
.ds-drawer-save-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fafbfc;
    border-top: 1px solid #f3f4f6;
}
.ds-drawer-save-input {
    flex: 1 1 auto;
    height: 32px;
    padding: 4px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 2px;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.15s;
}
.ds-drawer-save-input:focus {
    border-color: var(--ds-teal, #0d9488);
    box-shadow: 0 0 0 2px rgba(13,148,136,0.10);
}
.ds-btn-sm { padding: 5px 12px !important; font-size: 0.78rem !important; min-height: 28px !important; }
/* Cause confirmée DevTools : `.com-post-type-tag` a `padding: 2px 6px`,
   donc le TEXTE du badge est 6px à gauche du bord du badge. Le retrait du
   padding-right aligne le texte du badge sur le bord droit du card (= bord
   droit des éléments row 2). Padding-left conservé pour l'espace icône-texte. */
.com-post-type-tag { padding: 2px 0 2px 6px !important; }
/* Cause supplémentaire confirmée : la règle ligne 3938 imposait
   `min-width: 102px + justify-content: center` → texte centré dans une
   boîte 102px, créant l'illusion d'un désalignement entre les types.
   On revient à largeur naturelle + alignement contenu à droite. */
.com-post-type-tag {
    min-width: 0 !important;
    justify-content: flex-end !important;
}

/* ── T. Post sélectionné : signal visuel plus marqué ───────────────────
   Background teint pâle + barre teal 3px à gauche + transition douce. */
.com-post-item.com-post-selected {
    background: #f0fdfa !important;       /* teal-50 */
    box-shadow: inset 3px 0 0 var(--ds-teal, #0d9488) !important;
    border-color: #99e3da !important;
}
.com-post-item.com-post-selected:hover {
    background: #e6f7f5 !important;       /* teal-100 */
}
.com-post-item.com-post-selected .com-post-title {
    color: var(--ds-teal-dark, #0b7d72) !important;
}

/* ── U. Largeur séparant fil / cartes droite : 40px → 60px ──────────── */
.com-page .com-col-right { padding-left: 70px !important; }

/* ── Team chip en haut de la colonne droite (2026-06-01 — iter 2) ───────────
   Le chip (nom communauté + avatars + count posts) déplacé du header vers
   une zone fixe en haut de .com-col-right.
   Restructuration : la scrollbar n'est plus sur .com-col-right (qui spanait
   toute la hauteur) mais sur un wrapper interne .com-col-right-scroll —
   la scrollbar démarre donc sous le chip, au même niveau vertical que
   celle de .com-feed-list à gauche.
   Le chip lui-même prend toute la largeur de la colonne, en card avec
   border-radius 2px (convention design system). */
.com-col-right {
    padding-top: 0 !important;
    overflow: hidden !important;   /* le scroll passe sur .com-col-right-scroll */
}
.com-col-right-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    /* Scrollbar style (récupéré de .com-col-right pour ne pas perdre l'UX existante) */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.com-col-right-scroll::-webkit-scrollbar { width: 3px; background: transparent; }
.com-col-right-scroll::-webkit-scrollbar-track { background: transparent; border: none; }
.com-col-right-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.com-col-right-scroll.ctx-scrolling::-webkit-scrollbar-thumb,
.com-col-right-scroll.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
.com-col-right-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.com-col-right-scroll.ctx-scrolling,
.com-col-right-scroll.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

/* Zone chip : padding vertical aligné sur .com-filters-wrap (24px top, 14px bottom)
   pour que le chip card soit pile au même niveau vertical que la zone pills. */
.com-team-chip-sticky {
    flex-shrink: 0;
    padding: 24px 0 14px;
    background: transparent;
}
/* Le chip lui-même devient une card pleine largeur, border-radius 2px (convention DS).
   On surcharge le style "pill gris arrondi" du chip d'origine.
   margin-right: 3px = compensation gouttière scrollbar de .com-col-right-scroll →
   bord droit du chip aligné sur bord droit des cards en dessous.
   padding-y: 6px → hauteur card ~36px, identique à la zone pills à gauche. */
.com-team-chip-sticky .com-team-chip {
    display: flex;
    width: calc(100% - 10px);
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--r-sm, 3px)!important;
    padding: 6px 14px !important;
    min-height: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.com-team-chip-sticky .com-team-chip:hover {
    background: #fafbfc !important;
    border-color: #cbd5e1 !important;
}
/* Avatars : restent superposés mais bague blanche cohérente avec fond card blanc. */
.com-team-chip-sticky .com-team-chip-avatar,
.com-team-chip-sticky .com-team-chip-more { border-color: #fff !important; }
.com-team-chip-sticky .com-team-chip:hover .com-team-chip-avatar,
.com-team-chip-sticky .com-team-chip:hover .com-team-chip-more { border-color: #fafbfc !important; }

/* Actions à droite (+ Ajouter) : centré verticalement sur la barre tabs.
   padding-right: 50px = 40px (marge page gabarit) + 10px (gouttière scrollbar
   col droite) → bord droit du CTA aligné sur bord droit du chip et des cards. */
.com-switcher-actions {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 44px 0 12px !important;
}

/* ── Pills filtres : full-width + equal-width + neutralisation cadre legacy ── */
.com-filters-wrap {
    margin-top: 0 !important;
    padding: 24px 10px 14px 0 !important;  /* top aligné sur .com-col-right (24px) ; right=10px compense la gouttière scrollbar de .com-feed-list ; bottom=14px d'air avant Épinglés */
}
.com-filters-wrap .com-filters-label { display: none !important; }
.ds-display-box.com-filters {
    display: flex !important;
    width: 100% !important;
    gap: 2px;
    background: #f1f5f9;
    border: none !important;
    border-radius: var(--r-lg, 10px)!important;
    padding: 3px !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.ds-display-box.com-filters .ds-display-pill,
.ds-display-box.com-filters .com-filter {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    text-align: center;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--r-sm, 3px)!important;
    font-size: 0.79rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    box-shadow: none !important;
    text-decoration: none;
}
.ds-display-box.com-filters .com-filter:hover:not(.active) {
    color: #2D3E50 !important;
    background: transparent !important;
}
.ds-display-box.com-filters .com-filter.active {
    background: #fff !important;
    color: #2D3E50 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    border: none !important;
}

/* ── Bouton "+ Ajouter" : largeur réduite ── */
.com-add-dropdown-btn {
    padding: 7px 16px !important;
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
}
.com-add-dropdown-btn > i.fa-plus { margin-right: 8px !important; }
.com-add-dropdown-btn > i.com-add-dropdown-caret { margin-left: 8px !important; }

/* ─────────────────────────────────────────────────────────────
   Module Demandes (workflow_hub) — gabarit moderne étape 1
   Cf. docs/sessions/2026-06-02_gabarit-module-demandes-etape1.md
   ───────────────────────────────────────────────────────────── */

/* Compteur intégré dans l'onglet — petit carré teal aligné sur .ds-filters-count.
   Onglet actif : fond teal, texte blanc. Inactif : gris doux. */
.wfh-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    margin-left: 6px; padding: 0 5px;
    background: var(--ds-teal, #0d9488); color: #fff;
    border-radius: var(--r-sm, 3px);
    font-size: 0.65rem; font-weight: 600;
    line-height: 1;
}
/* Inactif : compteur teal-light pour signaler "action à faire" même sur onglet non actif. */
.ds-tab:not(.active) .wfh-tab-count {
    background: var(--ds-teal-light, #e6f7f5);
    color: var(--ds-teal, #0d9488);
}

/* Zone scrollable interne du module Demandes (étape 1 : contenu legacy à plat) */
.wfh-scroll-zone .tab-content { padding-top: 4px; }
/* ─────────────────────────────────────────────────────────────
   Module Demandes (workflow_hub) — gabarit moderne étape 2
   Colonnes, en-têtes sticky, cellule user avatar+nom.
   Cf. docs/sessions/2026-06-02_gabarit-module-demandes-etape2.md
   ───────────────────────────────────────────────────────────── */

/* En-tête sticky par onglet : on étend la base .ds-list-header (déjà sticky)
   avec le padding spécifique du module et une marge top pour l'aérer du bandeau
   d'aide legacy au-dessus (sera supprimé en étape 3). */
.wfh-list-header { margin-top: 16px; padding: 0 16px; }

/* Colonnes — pattern aligné .lst-col-* (Listes). Flex pour les colonnes texte
   long (avec ellipsis), width fixe pour les colonnes structurantes. */
.wfh-col-name        { flex: 1.6 1 0; min-width: 0; padding: 0 12px; display: flex; align-items: center; overflow: hidden; }
.wfh-col-user-named  { width: 200px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; }
.wfh-col-date        { width: 110px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.wfh-col-status      { width: 160px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
.wfh-col-meta        { flex: 1.2 1 0; min-width: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; }
/* Colonne Entreprise (onglet Invitations) — plus large que .wfh-col-user-named
   pour afficher les raisons sociales longues sans troncature prematuree. */
.wfh-col-company     { width: 280px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; }

/* ── Onglet « Validations financieres » (enjeux/perf) — colonnes propres (2026-07-16).
   Reutilise wfh-col-name/user-named/date des autres onglets (non modifiees). Les colonnes de montant
   sont alignees a droite. Densite a valider sur rendu reel (7 colonnes) — ajustables. */
.wfh-col-fin-type     { width: 150px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; }
.wfh-col-fin-status   { width: 110px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; }
/* Montants centres (prevu / obtenu) — en-tete et cellules alignes. */
.wfh-col-fin-amount   { width: 120px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.wfh-col-fin-obtained { width: 165px; flex-shrink: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; gap: 5px; }
.ds-list-header .wfh-col-fin-amount,
.ds-list-header .wfh-col-fin-obtained { justify-content: center; }

/* Ligne cliquable = <a> : neutralise le style lien, herite la couleur .ds-row. */
.wfh-fin-row { text-decoration: none; color: inherit; }
.wfh-fin-row:hover { text-decoration: none; color: inherit; }

/* Badge de type (Enjeux / Performance). */
.wfh-fin-type-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-sm, 3px); font-size: 0.70rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.wfh-fin-type-challenge { background: #e6f2f5; color: #2a8ba0; }
.wfh-fin-type-result    { background: #eef0fb; color: #5b6cc9; }

/* Performance (% entre parentheses) : vert si gain, rouge si perte. */
.wfh-fin-perf { font-size: 0.76rem; font-weight: 500; }
.wfh-fin-perf.is-gain { color: #059669; }
.wfh-fin-perf.is-loss { color: #dc2626; }
.wfh-fin-dash { color: #cbd5e1; }

/* Acteur avec prefixe de role (Demande par / A valider par) empile au-dessus du nom. */
.wfh-fin-actor { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wfh-fin-actor-role { font-size: 0.62rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.03em; }
.wfh-fin-actor .ds-cell-secondary { line-height: 1.3; }

/* Largeurs scopees a CET onglet (les classes wfh-col-name/user-named restent inchangees pour les
   autres onglets). Dossier resserre (noms courts) ; l'acteur prend l'excedent (prefixe + nom). */
/* Dossier prioritaire (absorbe l'espace), acteur resserre a largeur fixe (le prefixe de role s'empile
   au-dessus du nom, donc une colonne etroite suffit). Type legerement elargi (150px ci-dessus). */
#projectCostsValidationRequestText .wfh-col-name        { flex: 1 1 340px; }
#projectCostsValidationRequestText .wfh-col-user-named  { flex: 0 0 175px; width: 175px; }

/* Cellule user inline avatar + nom (pattern aligné .lst-user-cell mais
   nom affiché à droite, pas seulement l'avatar). */
.wfh-user-cell { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; max-width: 100%; }
.wfh-user-cell .ds-cell-secondary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfh-user-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.wfh-user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Titre de sous-regroupement legacy (h3 text-info) : on l'aligne sur la grille
   .ds-row (padding gauche identique) pour qu'il ne déborde pas, en attendant
   sa suppression à l'étape 3 (pills .ds-display-*). */
.wfh-scroll-zone .text-info {
    padding-left: 16px;
    font-size: 0.92rem;
    color: var(--ds-teal, #0d9488) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Placeholder avatar (onglet Créations sociétés — pas de User entity demandeur) */
.wfh-user-avatar-placeholder {
    width: 22px; height: 22px; border-radius: 50%;
    background: #e2e8f0; color: #94a3b8;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem;
}
/* ─────────────────────────────────────────────────────────────
   Module Demandes (workflow_hub) — gabarit moderne étape 3
   Pills scope + empty state + container rows.
   Cf. docs/sessions/2026-06-02_gabarit-module-demandes-etape3.md
   ───────────────────────────────────────────────────────────── */

/* Wrap pills : override le padding gabarit .ds-display-wrap (10px 40px)
   qui doublonne le padding latéral de la .ds-scroll-zone. */
.wfh-pills-wrap { padding: 12px 0 8px 0; }

/* Container des rows filtrables côté JS — simple wrapper. */
.wfh-rows { display: block; }

/* Empty state — héritage .ds-empty avec padding adapté à la scroll-zone. */
.wfh-empty { padding: 56px 20px; }
/* Subbar Demandes — recherche à gauche élargie + CTA à droite (UX 2026-06-03). */
.wfh-search-wrap { margin-left: 0; }       /* annule le margin-left:auto par défaut */
.wfh-search-input { min-width: 380px; }    /* contient "Rechercher par nom, demandeur, assigné…" */
.wfh-subbar-cta-right { margin-left: auto; } /* pousse le CTA tout à droite */

/* ─────────────────────────────────────────────────────────────
   Onglet Invitations (integre au module Demandes le 2026-06-13).
   Cf. docs/sessions/2026-06-13_invitations-onglet-demandes.md
   ───────────────────────────────────────────────────────────── */
/* Lignes non cliquables (pas de modal au clic) -> curseur par defaut. */
.wfh-invitation-row { cursor: default; }

/* Note d'aide en tete de l'onglet (restyle DS de l'ancien bandeau cloche). */
.wfh-invitation-help {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 4px 0 0;
    padding: 10px 14px;
    background: var(--ds-teal-light, #e6f7f5);
    border-radius: var(--r-md, 6px);
    font-size: 0.78rem; color: #415873;
}
.wfh-invitation-help i { color: var(--ds-teal, #0d9488); margin-top: 2px; flex-shrink: 0; }

/* Bouton "Renvoyer le mail" en bout de ligne invitation. */
.wfh-resend-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: 0.74rem; font-weight: 500;
    color: var(--ds-teal, #0d9488);
    background: #fff;
    border: 1px solid var(--ds-teal, #0d9488);
    border-radius: var(--r-md, 6px);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.wfh-resend-btn:hover { background: var(--ds-teal, #0d9488); color: #fff; text-decoration: none; }

/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats — Liste (étape 1 refonte 2026-06-05)
 *
 * Classes spécifiques à la zone liste de gauche du module /contract.
 * Calque du pattern .prj-list-* avec adaptation préfixe ctr-list-*.
 *
 * Vue selector V1 : Chronologique actif + Pilotage placeholder disabled
 * (branchement Pilotage prévu en étape 5).
 *
 * Cf. memory design_system_reference.md sections "Liste d'index" +
 * "Vue selector dropdown dans la toolbar" + "Système parent/enfants".
 * ════════════════════════════════════════════════════════════════════════ */

/* Fond colonne liste — blanc minimal (calque .prj-list-bg-white).
   Sélecteur combiné .col-left.ctr-list-bg-white pour NE PAS toucher la navbar-primary
   qui reçoit aussi la classe bgColorClass via menu.html.twig. */
.col-left.ctr-list-bg-white { background: #fff !important; padding-top: 8px !important; }
.col-left.ctr-list-bg-white .col-md-12 { padding-top: 0 !important; }
/* Ombre droite subtile sur le bord de la colonne droite, cohérent avec Projets. */
.col-left.ctr-list-bg-white ~ .col-right { position: relative; }
.col-left.ctr-list-bg-white ~ .col-right::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(to right, rgba(45,62,80,0.17), rgba(45,62,80,0)); z-index: 50; pointer-events: none; }
/* Masque le sortPanel résiduel (block sort vidé en étape 1). */
.col-left.ctr-list-bg-white #sortPanel { display: none !important; }

/* Header colonne liste : titre + recherche en pill */
.ctr-list-page-header { padding: 12px 18px 14px; background: #fff; }
.ctr-list-page-title { font-size: 1.65rem; font-weight: 400; color: #1f2937 !important; margin: 0 0 14px; letter-spacing: 0.5px; line-height: 1; }
.ctr-list-search-wrapper { position: relative; }
.ctr-list-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8fa1b3; font-size: 0.85rem; pointer-events: none; z-index: 2; }
.ctr-list-search-wrapper input[type="text"], .ctr-list-search-wrapper input[type="search"] { width: 100%; padding: 6px 14px 6px 36px !important; font-size: 0.82rem !important; font-weight: 300 !important; color: #2D3E50 !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: var(--r-md, 6px)!important; box-shadow: none !important; transition: border-color 0.12s, box-shadow 0.12s; }
.ctr-list-search-wrapper input[type="text"]::placeholder, .ctr-list-search-wrapper input[type="search"]::placeholder { color: #b0bcc8 !important; opacity: 1; }
.ctr-list-search-wrapper input[type="text"]:focus, .ctr-list-search-wrapper input[type="search"]:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.15) !important; outline: none !important; }

/* Toolbar consolidée : Filtrer + Reset + Vue selector + Sitemap + Tabs en dessous */
.ctr-list-toolbar { padding: 0 18px 8px; background: #fff; }
.ctr-list-toolbar-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-bottom: 10px; }

/* Chips ghost — bouton générique de la toolbar.
   Height 32px appliqué globalement (calque Projets line 5076 - hors media query). */
.ctr-list-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; height: 32px; font-size: 0.78rem; font-weight: 400; color: #475569; background: #fff; border: 1px solid transparent; border-radius: var(--r-sm, 3px); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; line-height: 1.3; }
.ctr-list-chip:hover, .ctr-list-chip:focus, .ctr-list-chip[aria-expanded="true"], .show > .ctr-list-chip { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; outline: none; box-shadow: none; text-decoration: none; }
.ctr-list-chip[disabled], .ctr-list-chip.disabled { opacity: 0.4; cursor: not-allowed; }
.ctr-list-chip .fas { font-size: 0.78rem; color: inherit; }
.ctr-list-chip.active { background: #e6f7f5; color: #0d9488; border-color: rgba(13,148,136,0.3); }

/* Bouton chip icon-only (sitemap) - min-width 36px / height 32px (calque Projets). */
.ctr-list-chip-icon { padding: 5px 8px; min-width: 36px; height: 32px; justify-content: center; }
/* Sitemap explicitement poussé à droite, miroir de la régle Projets. */
#display_all_contracts_childs { margin-left: auto; }

/* Bouton "Afficher / Cacher les contrats liés" (sitemap) — aspect aligné sur .ds-filters-trigger
   (ghost style) : transparent au repos, teal-light + teal au hover et à l'état actif.
   Override des styles génériques .ctr-list-chip-icon (calque Projets cf. commit 5fa0ab24). */
#display_all_contracts_childs.ctr-list-chip,
#display_all_contracts_childs.ctr-list-chip-icon {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #2D3E50 !important;
}
#display_all_contracts_childs i { color: #8fa1b3 !important; transition: color 0.15s; }
#display_all_contracts_childs:hover,
#display_all_contracts_childs.active {
    background: var(--ds-teal-light, #e6f7f5) !important;
    border-color: transparent !important;
    color: var(--ds-teal, #0d9488) !important;
}
#display_all_contracts_childs:hover i,
#display_all_contracts_childs.active i { color: var(--ds-teal, #0d9488) !important; }

/* Chip view selector dropdown.
   flex: 1 1 auto = prend l'espace restant entre Reset et le sitemap (calque .prj-list-view-selector).
   Le sitemap se retrouve naturellement aligné à droite par ce comportement flex. */
.ctr-list-view-selector.dropdown { flex: 1 1 auto; }
.ctr-list-chip-view { width: 100%; padding-right: 22px; position: relative; }
.ctr-list-chip-view::after { display: none; }
.ctr-list-chip-view::before { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.6rem; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: inherit; }
.ctr-list-view-selector .dropdown-menu { background: #fff !important; font-size: 0.82rem; min-width: 180px; padding: 4px 0; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ctr-list-view-selector .dropdown-item { padding: 6px 14px 6px 30px; color: #2D3E50 !important; font-weight: 300; position: relative; }
.ctr-list-view-selector .dropdown-item:hover { background: #e6f7f5 !important; color: #0d9488 !important; }
.ctr-list-view-selector .dropdown-item.active, .ctr-list-view-selector .dropdown-item.active:hover { background: #fff !important; color: #0d9488 !important; font-weight: 500; }
.ctr-list-view-selector .dropdown-item.active::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 0.72rem; color: #0d9488; }
.ctr-list-view-selector .dropdown-item.disabled, .ctr-list-view-option-disabled { color: #cbd5e1 !important; cursor: not-allowed; pointer-events: none; }
.ctr-list-view-selector .dropdown-item.disabled:hover, .ctr-list-view-option-disabled:hover { background: #fff !important; color: #cbd5e1 !important; }

/* Tabs scope (Tous / Mes contrats / Mes favoris) — copie strictement identique
   du pattern Projets (.prj-list-tab*, lignes 5027-5041 de ce fichier). */
.ctr-list-tabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; flex-wrap: nowrap; padding: 0; margin: 6px 0 0; gap: 18px; }
.ctr-list-tabs.nav-tabs .nav-item { flex: 0 0 auto; }
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab { position: relative; border: none; background: transparent; color: #6b7a8d; font-size: 0.85rem !important; font-weight: 400 !important; font-family: inherit !important; padding: 10px 2px; margin: 0; transition: color 0.12s; }
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab:hover { color: #0d9488; font-weight: 400 !important; }
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab.active, .ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab.active:hover { color: #0d9488 !important; font-weight: 600 !important; background: transparent; }
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab:hover::after, .ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab.active::after { transform: scaleX(1); }
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab:focus { outline: none; box-shadow: none; }

/* Étape 5d 2026-06-09 — Sub-onglets contextuels sous "Mes contrats".
   2ème rangée (En validation / À valider / Brouillons) visible conditionnellement.
   Densité plus compacte que les main tabs (smaller font, padding reduit).
   Compteur en pill teal claire à droite du libellé. */
.ctr-list-subtabs.nav-tabs { border-bottom: 1px solid #eef2f6; background: #fff; flex-wrap: nowrap; padding: 0; margin: 0 0 0; gap: 14px; }
.ctr-list-subtabs.nav-tabs .nav-item { flex: 0 0 auto; }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab { position: relative; display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: #6b7a8d; font-size: 0.78rem !important; font-weight: 400 !important; font-family: inherit !important; padding: 6px 2px; margin: 0; transition: color 0.12s; }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab:hover { color: #0d9488; }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab.active, .ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab.active:hover { color: #0d9488 !important; font-weight: 600 !important; background: transparent; }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab:hover::after, .ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab.active::after { transform: scaleX(1); }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab:focus { outline: none; box-shadow: none; }
.ctr-list-subtab-count { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: var(--r-sm, 3px); background: #e2efed; color: #0d9488; font-size: 0.66rem; font-weight: 600; line-height: 1.4; text-align: center; }
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab.active .ctr-list-subtab-count { background: #0d9488; color: #fff; }

/* Collapse legacy temporaire — héberge les filtres avant arrivée du drawer Filtrer (étape 5) */
.ctr-list-filters-legacy { padding: 8px 18px 12px; background: #fafbfc; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; margin-bottom: 8px; }

/* Footer colonne liste : Export + Ajouter contrat */
.ctr-list-footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; background: #fff; border-top: 1px solid #e2e8f0; }
.ctr-list-footer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; font-size: 0.85rem; font-weight: 500; color: #0d9488; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; text-decoration: none; line-height: 1.3; }
.ctr-list-footer-btn:hover, .ctr-list-footer-btn:focus { background: #f0fafa; color: #0d9488; border-color: #0d9488; text-decoration: none; outline: none; box-shadow: none; }
.ctr-list-footer-btn-icon { padding: 9px 12px; flex: 0 0 auto; color: #475569; border-color: transparent; }
.ctr-list-footer-btn-icon:hover { color: #0d9488; }
.ctr-list-footer-btn-icon .fas { font-size: 0.95rem; }
.ctr-list-footer-btn-add { flex: 1 1 auto; border-color: #9fd5cd; }

/* Règles globales d'alignement final (calque exact .prj-list-* lignes 5074-5085, hors media query). */
.ctr-list-toolbar-chips { flex-wrap: nowrap; }
.ctr-list-search-wrapper input[type="text"], .ctr-list-search-wrapper input[type="search"] { height: 32px !important; line-height: 1.2 !important; }
.ctr-list-page-header { padding: 8px 18px 12px !important; }
.ctr-list-page-title { font-size: 1.4rem !important; line-height: 1 !important; margin: 0 0 12px !important; }

/* ════════════════════════════════════════════════════════════════════════
 * Étape 1 refonte module Entreprises (/supplier) — squelette liste moderne.
 * Calque strict des blocs .ctr-list-* / .prj-list-* (cf. design_system_reference).
 * Préfixe .spl-list-*. Vue selector V1 = placeholder "Liste" désactivé (Liste seule).
 * ════════════════════════════════════════════════════════════════════════ */
.col-left.spl-list-bg-white { background: #fff !important; padding-top: 8px !important; }
.col-left.spl-list-bg-white .col-md-12 { padding-top: 0 !important; }
.col-left.spl-list-bg-white ~ .col-right { position: relative; }
.col-left.spl-list-bg-white ~ .col-right::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(to right, rgba(45,62,80,0.17), rgba(45,62,80,0)); z-index: 50; pointer-events: none; }
.col-left.spl-list-bg-white #sortPanel { display: none !important; }

.spl-list-page-header { padding: 8px 18px 12px; background: #fff; }
.spl-list-page-title { font-size: 1.4rem; font-weight: 400; color: #1f2937 !important; margin: 0 0 12px; letter-spacing: 0.5px; line-height: 1; }
.spl-list-search-wrapper { position: relative; }
.spl-list-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8fa1b3; font-size: 0.85rem; pointer-events: none; z-index: 2; }
.spl-list-search-wrapper input[type="text"], .spl-list-search-wrapper input[type="search"] { width: 100%; height: 32px !important; padding: 6px 14px 6px 36px !important; font-size: 0.82rem !important; font-weight: 300 !important; line-height: 1.2 !important; color: #2D3E50 !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: var(--r-md, 6px)!important; box-shadow: none !important; transition: border-color 0.12s, box-shadow 0.12s; }
.spl-list-search-wrapper input[type="text"]::placeholder, .spl-list-search-wrapper input[type="search"]::placeholder { color: #b0bcc8 !important; opacity: 1; }
.spl-list-search-wrapper input[type="text"]:focus, .spl-list-search-wrapper input[type="search"]:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.15) !important; outline: none !important; }

.spl-list-toolbar { padding: 0 18px 8px; background: #fff; }
.spl-list-toolbar-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.spl-list-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; height: 32px; font-size: 0.78rem; font-weight: 400; color: #475569; background: #fff; border: 1px solid transparent; border-radius: var(--r-sm, 3px); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; line-height: 1.3; }
.spl-list-chip:hover, .spl-list-chip:focus, .spl-list-chip[aria-expanded="true"], .show > .spl-list-chip { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; outline: none; box-shadow: none; text-decoration: none; }
.spl-list-chip[disabled], .spl-list-chip.disabled { opacity: 0.4; cursor: not-allowed; }
.spl-list-chip .fas { font-size: 0.78rem; color: inherit; }
.spl-list-chip-icon { padding: 5px 8px; min-width: 36px; height: 32px; justify-content: center; }
#display_all_suppliers_childs { margin-left: auto; }
#display_all_suppliers_childs.spl-list-chip, #display_all_suppliers_childs.spl-list-chip-icon { background: transparent !important; border: 1px solid transparent !important; color: #2D3E50 !important; }
#display_all_suppliers_childs i { color: #8fa1b3 !important; transition: color 0.15s; }
#display_all_suppliers_childs:hover, #display_all_suppliers_childs.active { background: var(--ds-teal-light, #e6f7f5) !important; border-color: transparent !important; color: var(--ds-teal, #0d9488) !important; }
#display_all_suppliers_childs:hover i, #display_all_suppliers_childs.active i { color: var(--ds-teal, #0d9488) !important; }

.spl-list-view-selector.dropdown { flex: 1 1 auto; }
.spl-list-chip-view { width: 100%; padding-right: 22px; position: relative; }
.spl-list-chip-view::after { display: none; }
.spl-list-chip-view::before { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.6rem; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: inherit; }

.spl-list-tabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; flex-wrap: nowrap; padding: 0; margin: 6px 0 0; gap: 18px; }
.spl-list-tabs.nav-tabs .nav-item { flex: 0 0 auto; }
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab { position: relative; border: none; background: transparent; color: #6b7a8d; font-size: 0.85rem !important; font-weight: 400 !important; font-family: inherit !important; padding: 10px 2px; margin: 0; transition: color 0.12s; }
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab:hover { color: #0d9488; font-weight: 400 !important; }
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab.active, .spl-list-tabs.nav-tabs .nav-link.spl-list-tab.active:hover { color: #0d9488 !important; font-weight: 600 !important; background: transparent; }
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab:hover::after, .spl-list-tabs.nav-tabs .nav-link.spl-list-tab.active::after { transform: scaleX(1); }
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab:focus { outline: none; box-shadow: none; }

/* Collapse legacy temporaire — héberge les filtres avant le drawer Filtrer (étape 5).
   Fond navy conservé : les selectpickers legacy ont un texte blanc (data-style text-white). */
.spl-list-filters-legacy { padding: 10px 14px; margin: 0 4px 8px; background: #2D3E50; border-radius: var(--r-lg, 10px); }

.spl-list-footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; background: #fff; border-top: 1px solid #e2e8f0; }
.spl-list-footer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; font-size: 0.85rem; font-weight: 500; color: #0d9488; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; text-decoration: none; line-height: 1.3; }
.spl-list-footer-btn:hover, .spl-list-footer-btn:focus { background: #f0fafa; color: #0d9488; border-color: #0d9488; text-decoration: none; outline: none; box-shadow: none; }
.spl-list-footer-btn-icon { padding: 9px 12px; flex: 0 0 auto; color: #475569; border-color: transparent; }
.spl-list-footer-btn-icon:hover { color: #0d9488; }
.spl-list-footer-btn-icon .fas { font-size: 0.95rem; }
.spl-list-footer-btn-add { flex: 1 1 auto; border-color: #9fd5cd; }

/* Carte liste Entreprise (étape 5a) — compléments à la réutilisation des classes .ctr-list-*.
   2026-06-23 : avatar responsable mutualisé Projets + Contrats (.prj-list-card-owner /
   .ctr-list-card-owner) — même rendu que l'avatar Entreprises, à gauche du nom. */
.spl-list-card-owner, .prj-list-card-owner, .ctr-list-card-owner { flex: 0 0 auto; margin-right: 8px; }
.spl-list-card-owner .circled, .spl-list-card-owner .md-circled,
.prj-list-card-owner .circled, .prj-list-card-owner .md-circled,
.ctr-list-card-owner .circled, .ctr-list-card-owner .md-circled { width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; }
.spl-list-card-owner img, .prj-list-card-owner img, .ctr-list-card-owner img { width: 22px !important; height: 22px !important; }
.spl-list-card-owner .pt-1, .prj-list-card-owner .pt-1, .ctr-list-card-owner .pt-1 { padding-top: 0 !important; font-size: .6rem !important; line-height: 22px !important; }
.spl-list-card-bell { flex: 0 0 auto; color: #f59e0b; font-size: .72rem; margin-right: 6px; cursor: help; }
.spl-list-card-bell .fa-bell { transform: rotate(-12deg); }

/* Champs cachés pilotés par les onglets (mine / usersFavorites) — jamais visibles. */
.spl-list-tab-driven-fields { display: none !important; }
/* Garde-fou : aucun widget de formulaire brut (ex. champ caché form.id IntegerType) ne doit
   apparaître dans la toolbar hors du collapse legacy #filtersCollapse. */
.spl-list-toolbar > input { display: none !important; }
.spl-list-toolbar-chips input { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
 * Etape 3a fixes UX partages (Contrats + Projets) :
 * #13 - Supprimer le soulignement par defaut des balises <a> sur les noms
 *       fournisseur dans les sections context (.ctx-supplier-name).
 * #14 - Retirer le cadre noir (outline par defaut) apres clic sur les
 *       boutons icone des sections context (.ctx-action-btn / .ctx-add-btn
 *       / .ctx-expand-btn). Garder :focus-visible (navigation clavier).
 * ════════════════════════════════════════════════════════════════════════ */

a.ctx-supplier-name {
    color: var(--ctx-text-mid) !important;
    text-decoration: none !important;
}
a.ctx-supplier-name:hover, a.ctx-supplier-name:focus {
    color: var(--ctx-teal) !important;
    text-decoration: none !important;
}

/* Etape 3a fix #2 : date de derniere mise a jour du montant commande - style discret muted
   pour ne pas concurrencer visuellement la valeur monetaire principale. */
.ctr-amount-ordered-date {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ctx-text-muted, #8fa1b3);
    white-space: nowrap;
}
.ctr-amount-ordered-history-btn { width: 24px; height: 24px; font-size: 0.7rem; }

/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats - Onglet Contrats lies V2 (arbre)
 * (etape 3b refonte 2026-06-05, V2 suite retours utilisateur)
 *
 * Arbre hierarchique complet (root + descendants recursifs) avec indentation
 * trait pointille. Items compacts inspires du pattern .res-ci-* (Resultats Projets) :
 * - Nom + tag "vous etes ici" subtil + icone ouvrir page
 * - Fournisseur (sous-titre discret)
 * - Badges fins (type, statut, renouvellement, validation) en outline-only
 * - Footer (signe le X / fin X / montants) avec icones et alerte si echeance < 90j
 * Contrat courant : bordure gauche teal + fond teal-light tres discret.
 * ════════════════════════════════════════════════════════════════════════ */

.ctr-tree-wrapper { padding: 16px 40px 0 40px; }

/* Conteneur scrollable interne (sinon la page se casse si l'arbre depasse).
   max-height calcule en JS - overflow-y auto pour scrollbar locale.
   Padding interne retire (V5b retour utilisateur) - le wrapper gere la padding externe. */
.ctr-tree-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    scrollbar-gutter: stable;
}

/* Arbre racine : pas d'indentation. */
.ctr-tree-root { display: flex; flex-direction: column; gap: 6px; }

/* Enfants recursifs : indentation marquee + trait vertical pointille fonce + elbows. */
.ctr-tree-children {
    position: relative;
    margin: 6px 0 0 18px;
    padding-left: 32px;
    border-left: 1.5px dashed #94a3b8;
    display: flex; flex-direction: column; gap: 6px;
}
/* Le trait vertical s'arrete a la moitie du dernier enfant pour ne pas depasser. */
.ctr-tree-children::after {
    content: '';
    position: absolute;
    left: -2px; bottom: 0;
    width: 3px;
    height: calc(100% - 24px);
    background: #fff;
}

.ctr-tree-item { position: relative; }
/* Angle d'arbre (elbow) : trait horizontal pointille fonce du parent vers la card de chaque enfant. */
.ctr-tree-children > .ctr-tree-item::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 18px;
    width: 28px;
    border-top: 1.5px dashed #94a3b8;
}

/* Card item - compact, discret. Retour utilisateur V5d :
   au repos, bords droite et haut transparents (seul le bord bas gris est visible),
   hover : full border restaure + fond change,
   is-current : full border teal + fond teal-light. */
.ctr-tree-card {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid transparent;
    border-bottom-color: #e2e8f0;
    border-left: 3px solid transparent;
    border-radius: var(--r-lg, 10px);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ctr-tree-card.is-clickable { cursor: pointer; }
.ctr-tree-card.is-clickable:hover {
    background: #f9fafb;
    border-color: #cbd5e1;
    border-left-color: transparent;
}

/* Contrat courant - distingue subtilement : full bordure teal + fond teal-light. */
.ctr-tree-card.is-current {
    border-color: rgba(13,148,136,0.18);
    border-left-color: var(--ctx-teal, #0d9488);
    background: #f4fbfa;
}
.ctr-tree-card.is-current:hover { background: #f4fbfa; }

/* Ligne 1 : nom + tag courant + pill statut + ouvrir page. */
.ctr-tree-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: nowrap; }
.ctr-tree-name {
    flex: 0 1 auto; min-width: 0;
    font-size: 0.85rem; font-weight: 600; color: #2D3E50;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctr-tree-here {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.64rem; font-weight: 500;
    color: var(--ctx-teal, #0d9488);
    font-style: italic;
    flex-shrink: 0;
}
.ctr-tree-here .fas { font-size: 0.56rem; }

/* Pill statut (ex-badge ds-pill) - compacte avec point couleur. */
.ctr-tree-status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px;
    font-size: 0.63rem; font-weight: 600;
    color: var(--pill-color, #2D3E50);
    background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent);
    border-radius: var(--r-sm, 3px);
    white-space: nowrap; line-height: 1.4; flex-shrink: 0;
}
.ctr-tree-status-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--pill-color, #2D3E50);
    display: inline-block; flex-shrink: 0;
}

/* Bouton "ouvrir page" - icone discrete, opacity au hover de la card. */
.ctr-tree-open-page {
    flex-shrink: 0;
    width: 22px; height: 22px;
    color: #8fa1b3;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    border-radius: var(--r-sm, 3px);
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.ctr-tree-card:hover .ctr-tree-open-page { opacity: 1; }
.ctr-tree-open-page:hover { color: var(--ctx-teal, #0d9488); background: var(--ctx-teal-light, #e6f7f5); text-decoration: none; }
.ctr-tree-open-page:focus { outline: none; box-shadow: none; }
.ctr-tree-open-page:focus-visible { outline: 2px solid var(--ctx-teal, #0d9488); outline-offset: 1px; }
.ctr-tree-open-page .fas { font-size: 0.68rem; }

/* Placeholder pour reserver la place du bouton 'Ouvrir page' sur le contrat
   courant (sans afficher d'icone) - meme dimensions que .ctr-tree-open-page. */
.ctr-tree-open-page-placeholder {
    flex-shrink: 0;
    display: inline-block;
    width: 22px;
    height: 22px;
}

/* Bouton "+ Avenant" inline (au hover de la card) - V6 retour utilisateur.
   Affiche en opacity 0 au repos, opacity 1 au hover de la card.
   .is-disabled (V6) : visuellement neutralise + pointer-events: none + curseur not-allowed.
   A brancher en etape 4 (drawer sectionne) - cf. memoire notes_pour_plus_tard_optimisations. */
.ctr-tree-add-inline {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: 0.7rem; font-weight: 500;
    color: var(--ctx-teal, #0d9488);
    background: transparent;
    border: 1px dashed rgba(13,148,136,0.5);
    border-radius: var(--r-sm, 3px);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.ctr-tree-card:hover .ctr-tree-add-inline { opacity: 1; }
.ctr-tree-add-inline .fas { font-size: 0.62rem; }
.ctr-tree-add-inline:hover {
    background: var(--ctx-teal-light, #e6f7f5);
    border-color: var(--ctx-teal, #0d9488);
    color: var(--ctx-teal, #0d9488);
    text-decoration: none;
}
/* .ctr-tree-add-inline.is-disabled — règles retirées 2026-06-07 (Phase 4 : bouton désormais actif, plus de .is-disabled posé) */

/* Ligne 2 : meta inline (fournisseur + dates + montant) avec separateurs. */
.ctr-tree-row2 {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 0.72rem; color: #475569;
}
.ctr-tree-meta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ctr-tree-meta .fas, .ctr-tree-meta .far { font-size: 0.65rem; color: #8fa1b3; }
.ctr-tree-meta-sep { color: #cbd5e1; font-weight: 600; }
.ctr-tree-amount { color: #2D3E50; font-weight: 500; }
.ctr-tree-amount .fas { color: #8fa1b3; }
.ctr-tree-date-warn { color: #b45309; }
.ctr-tree-date-warn .far, .ctr-tree-date-warn .fas { color: #b45309; }
.ctr-tree-date-overdue { color: #b91c1c; }
.ctr-tree-date-overdue .far, .ctr-tree-date-overdue .fas { color: #b91c1c; }
.ctr-tree-days-left { font-size: 0.62rem; opacity: 0.85; margin-left: 1px; }
.ctr-tree-renewal-duration { color: #8fa1b3; font-weight: 400; margin-left: 2px; }

/* Lien "+ Creer un avenant" en bas - cadre leger, hover teal. */
.ctr-tree-add-row { margin-top: 16px; padding-left: 0; }
.ctr-tree-add-link {
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    font-size: 0.82rem; font-weight: 500;
    color: var(--ctx-teal, #0d9488);
    background: transparent;
    border: 1px dashed #cbd5e1;
    border-radius: var(--r-md, 6px);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ctr-tree-add-link:hover {
    background: var(--ctx-teal-light, #e6f7f5);
    border-color: var(--ctx-teal, #0d9488);
    color: var(--ctx-teal, #0d9488);
    text-decoration: none;
}
.ctr-tree-add-link .fas { font-size: 0.72rem; }

/* Empty state - centre, icone grise, libelles. */
.ctr-tree-empty-state {
    text-align: center;
    padding: 60px 24px;
    color: #8fa1b3;
}
.ctr-tree-empty-icon { font-size: 2.5rem; color: #d1dce8; margin-bottom: 12px; }
.ctr-tree-empty-title { font-size: 0.95rem; font-weight: 500; color: #475569; margin: 0 0 8px; }
.ctr-tree-empty-hint { font-size: 0.82rem; color: #8fa1b3; max-width: 380px; margin: 0 auto 8px; }

.ctx-action-btn:focus, .ctx-add-btn:focus, .ctx-expand-btn:focus,
.ctx-supplier-toggle:focus, .ctx-action-kebab:focus {
    outline: none;
    box-shadow: none;
}
.ctx-action-btn:focus-visible, .ctx-add-btn:focus-visible, .ctx-expand-btn:focus-visible,
.ctx-supplier-toggle:focus-visible, .ctx-action-kebab:focus-visible {
    outline: 2px solid var(--ctx-teal, #0d9488);
    outline-offset: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats — Header fiche (étape 2 refonte 2026-06-05)
 *
 * Calque .prj-header-* avec adaptation préfixe .ctr-header-* + spécificités
 * Contrats : pill signature, bandeau renouvellement ligne 3, action principale
 * "Créer un avenant" en bouton visible.
 *
 * Cf. memory design_system_reference.md section "Header de fiche projet".
 * ════════════════════════════════════════════════════════════════════════ */

.ctr-header { padding: 12px 40px 0 40px; background: #fff; }
.ctr-tabs-wrapper { padding: 0 40px; }

.ctr-header-line1 { margin-bottom: 12px; flex-wrap: nowrap; column-gap: 10px; }
.ctr-header-title { font-size: 1.05rem; font-weight: 700; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; }

.ctr-header-favorite { color: #cfd8dc; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: color 0.12s; display: inline-flex; align-items: center; }
.ctr-header-favorite:hover { text-decoration: none; }
.ctr-header-favorite .fa-star.fas { color: #0d9488; }
.ctr-header-favorite .fa-star.far:hover { color: #0d9488; }

/* Pills statut (statut métier, validation, signature, alerte). */
.ctr-header-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 0.7rem; font-weight: 600; border-radius: var(--r-sm, 3px); color: var(--pill-color, #2D3E50); background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent); white-space: nowrap; line-height: 1.35; flex-shrink: 0; }
.ctr-header-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pill-color, #2D3E50); display: inline-block; flex-shrink: 0; }
.ctr-header-pill-alert .fas { font-size: 0.62rem; }
.ctr-header-pill-signed { background: rgba(13,148,136,0.10); border-color: rgba(13,148,136,0.3); }
.ctr-header-pill-signed .fa-signature { font-size: 0.65rem; }

/* Pill "+N" du header contrat (cap 3 pills, 2026-09-01) : ouvre un popover listant les pills
   masquees en version detaillee. La couleur suit la severite maximale de ce qui est masque,
   pour ne pas dissimuler une alerte critique derriere un badge neutre. */
.ctr-header-pill-more { cursor: pointer; font-family: inherit; border-style: dashed; }
.ctr-header-pill-more:focus { outline: none; }
.ctr-header-pill-more:focus-visible { outline: 2px solid var(--pill-color, #64748B); outline-offset: 1px; }
.ctr-header-pill-more-neutral { --pill-color: #64748B; }
.ctr-header-pill-more-warning { --pill-color: #f59e0b; }
.ctr-header-pill-more-critical { --pill-color: #ef4444; }
.ctr-header-pill-more-popover { max-width: 300px; border: 1px solid #dbe4ec; border-radius: var(--r-md, 6px); box-shadow: 0 8px 24px rgba(45,62,80,0.14); }
.ctr-header-pill-more-popover .popover-header { font-size: 0.72rem; font-weight: 700; color: #2D3E50; background: #f8fafc; padding: 7px 12px; }
.ctr-header-pill-more-popover .popover-body { padding: 8px 12px; }
.ctr-header-pill-more-list { list-style: none; margin: 0; padding: 0; }
.ctr-header-pill-more-list li { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 0.74rem; font-weight: 600; line-height: 1.35; color: var(--pill-color, #2D3E50); }
.ctr-header-pill-more-list li .fas { font-size: 0.68rem; flex-shrink: 0; }

/* Action principale "Créer un avenant" - bouton visible (pattern style ds-btn-primary plus discret). */
.ctr-header-main-action { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 0.78rem; font-weight: 500; color: #0d9488; background: #fff; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); text-decoration: none; transition: background 0.12s, color 0.12s; white-space: nowrap; }
.ctr-header-main-action:hover, .ctr-header-main-action:focus { background: #0d9488; color: #fff; text-decoration: none; outline: none; }
.ctr-header-main-action .fas { font-size: 0.7rem; }

/* Kebab menu (calque .prj-header-kebab). */
.ctr-header-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-lg, 10px); color: #8fa1b3; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; text-decoration: none; font-size: 0.9rem; }
.ctr-header-kebab:hover, .ctr-header-kebab[aria-expanded="true"] { background: #e6f7f5; color: #0d9488; border-color: #0d9488; text-decoration: none; }

/* Ligne 2 : 4 blocs labellés (calque .prj-header-line2 exact).
   flex 1/6 = chaque bloc prend 16.66% (=> 4 blocs prennent 66% de la largeur, packed gauche).
   Pas de 100%/4 (qui ferait perdre la symetrie Projets et etirer le bloc Fournisseur inutilement). */
.ctr-header-line2 { gap: 0; padding: 0 0 10px; justify-content: flex-start; }
.ctr-header-info { display: flex; flex-direction: column; min-width: 0; flex: 0 0 calc(100% / 6); padding: 0 14px; }
.ctr-header-info:first-child { padding-left: 0; }
.ctr-header-info:last-child { padding-right: 0; }
.ctr-header-info + .ctr-header-info { border-left: 1px solid #eef2f5; }
.ctr-header-info-owner { flex-direction: row !important; align-items: center; gap: 10px; }
.ctr-header-owner-avatar .circled, .ctr-header-owner-avatar .md-circled, .ctr-header-owner-avatar .lg-circled { width: 28px !important; height: 28px !important; font-size: 0.65rem !important; line-height: 28px !important; flex-shrink: 0; }
.ctr-header-owner-avatar .circled img, .ctr-header-owner-avatar .md-circled img, .ctr-header-owner-avatar .lg-circled img { width: 28px !important; height: 28px !important; }
.ctr-header-owner-text { display: flex; flex-direction: column; min-width: 0; }

.ctr-header-info-label { font-size: 0.7rem; font-weight: 300; color: #8fa1b3; text-transform: none; letter-spacing: 0; margin-bottom: 3px; }
.ctr-header-info-value { font-size: 0.76rem; font-weight: 500; color: #2D3E50; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-header-info-value .auto-truncated { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 2026-06-10 — Lien empty/edit sur Montant total dans le header (calque Projets header Enjeux).
   Empty : italique pointillé gris. Présent + editable : héritage couleur + hover teal. */
.ctr-header-info-empty { font-size: 0.78rem; font-weight: 400; color: #8fa1b3; font-style: italic; text-decoration: none; border-bottom: 1px dotted #8fa1b3; cursor: pointer; }
.ctr-header-info-empty:hover, .ctr-header-info-empty:focus { color: #0d9488; border-bottom-color: #0d9488; text-decoration: none; outline: none; }
/* Header entreprise : « Non renseigne » cliquable (Type / Categorie vides) — calque .ctr-header-info-empty. */
.spl-header-info-empty { font-weight: 400; color: #8fa1b3; font-style: italic; text-decoration: none; border-bottom: 1px dotted #8fa1b3; cursor: pointer; }
.spl-header-info-empty:hover, .spl-header-info-empty:focus { color: #0d9488; border-bottom-color: #0d9488; text-decoration: none; outline: none; }
.ctr-header-info-link { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.12s; }
.ctr-header-info-link:hover, .ctr-header-info-link:focus { color: #0d9488; text-decoration: none; outline: none; }
.ctr-header-info-link { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.12s; }
.ctr-header-info-link:hover { color: #0d9488; text-decoration: none; }

/* Ligne 3 : bandeau renouvellement (calque .prj-header-line3 - bandeau Phase actuelle). */
.ctr-header-line3 { padding: 10px 14px; background: #f5f6f8; border-radius: var(--r-lg, 10px); margin: 2px 0 0; font-size: 0.72rem; }
.ctr-header-renewal-dot { width: 8px; height: 8px; border-radius: 50%; background: #0d9488; display: inline-block; margin-right: 8px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(13,148,136,0.20); }
.ctr-header-renewal-label { color: #8fa1b3; font-weight: 400; }
.ctr-header-renewal-value { color: #2D3E50; font-weight: 400; }

/* Tabs principaux (calque .prj-tabs - 5 onglets cible). */
.ctr-tabs-wrapper { background: #fff; padding-bottom: 4px; }
.ctr-tabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; padding-left: 0; flex-wrap: nowrap; }
.ctr-tabs.nav-tabs .nav-item { flex: 0 0 auto; }
.ctr-tabs.nav-tabs .nav-link, .ctr-tabs.nav-tabs .nav-link.active, .ctr-tabs.nav-tabs .nav-link:hover { position: relative; border: none; background: transparent; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 400 !important; padding: 10px 14px; margin: 0 28px 0 0; transition: color 0.12s; }
.ctr-tabs.nav-tabs .nav-link { color: #6b7a8d; }
.ctr-tabs.nav-tabs .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }
.ctr-tabs.nav-tabs .nav-link:hover { color: #0d9488; font-weight: 400 !important; }
.ctr-tabs.nav-tabs .nav-link:hover::after { transform: scaleX(1); }
.ctr-tabs.nav-tabs .nav-link.active, .ctr-tabs.nav-tabs .nav-link.active:hover { color: #0d9488 !important; font-weight: 600 !important; border-bottom: none !important; }
.ctr-tabs.nav-tabs .nav-link.active::after, .ctr-tabs.nav-tabs .nav-link:hover::after { transform: scaleX(1); }
.ctr-tabs.nav-tabs .nav-link:focus { outline: none; box-shadow: none; }

/* Indicateur "bientôt" sur l'onglet Pilotage (étape 2 placeholder). */
.ctr-tab-soon { color: #cbd5e1; font-size: 0.7em; margin-left: 4px; }

/* ════════════════════════════════════════════════════════════════════════
 * Module Entreprises — Header fiche (étape 2 refonte 2026-06-19)
 * Calque .ctr-header-* (préfixe .spl-header-*). Pas de pill signature ni d'action
 * principale ; ligne 3 = bandeau suggestions SupplierSource (ambre).
 * ════════════════════════════════════════════════════════════════════════ */
.spl-header { padding: 12px 40px 6px 40px; background: #fff; }
.spl-header-line1 { margin-bottom: 12px; flex-wrap: nowrap; column-gap: 10px; }
.spl-header-title { font-size: 1.05rem; font-weight: 700; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; }
.spl-header-favorite { color: #cfd8dc; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: color 0.12s; display: inline-flex; align-items: center; }
.spl-header-favorite:hover { text-decoration: none; }
.spl-header-favorite .fa-star.fas { color: #0d9488; }
.spl-header-favorite .fa-star.far:hover { color: #0d9488; }
.spl-header-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 0.7rem; font-weight: 600; border-radius: var(--r-sm, 3px); color: var(--pill-color, #2D3E50); background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent); white-space: nowrap; line-height: 1.35; flex-shrink: 0; }
.spl-header-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pill-color, #2D3E50); display: inline-block; flex-shrink: 0; }
.spl-header-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-lg, 10px); color: #8fa1b3; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; text-decoration: none; font-size: 0.9rem; }
.spl-header-kebab:hover, .spl-header-kebab[aria-expanded="true"] { background: #e6f7f5; color: #0d9488; border-color: #0d9488; text-decoration: none; }
.spl-header-line2 { gap: 0; padding: 0 0 10px; justify-content: flex-start; }
.spl-header-info { display: flex; flex-direction: column; min-width: 0; flex: 0 0 calc(100% / 6); padding: 0 14px; }
.spl-header-info:first-child { padding-left: 0; }
.spl-header-info + .spl-header-info { border-left: 1px solid #eef2f5; }
.spl-header-info-owner { flex-direction: row !important; align-items: center; gap: 10px; }
.spl-header-owner-avatar .circled, .spl-header-owner-avatar .md-circled, .spl-header-owner-avatar .lg-circled { width: 28px !important; height: 28px !important; font-size: 0.65rem !important; line-height: 28px !important; flex-shrink: 0; }
.spl-header-owner-avatar .circled img, .spl-header-owner-avatar .md-circled img, .spl-header-owner-avatar .lg-circled img { width: 28px !important; height: 28px !important; }
.spl-header-owner-text { display: flex; flex-direction: column; min-width: 0; }
.spl-header-info-label { font-size: 0.7rem; font-weight: 300; color: #8fa1b3; text-transform: none; letter-spacing: 0; margin-bottom: 3px; }
.spl-header-info-value { font-size: 0.76rem; font-weight: 500; color: #2D3E50; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-header-info-value .auto-truncated { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-header-line3 { padding: 9px 14px; background: #E8F5F3; border: none; border-radius: var(--r-lg, 10px); margin: 4px 0 0; font-size: 0.72rem; }
.spl-header-suggest-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; margin-right: 8px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(245,158,11,0.20); }
.spl-header-suggest-label { color: #E29500; font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════════
 * Module Entreprises — Barre d'onglets fiche + onglet Contexte (étape 3a 2026-06-19)
 * `.spl-tabs` calque `.ctr-tabs`. Le contenu Contexte réutilise les classes `.ctx-*`
 * (Projets/Contrats) ; seuls quelques helpers `.spl-ctx-*` sont ajoutés ici.
 * ════════════════════════════════════════════════════════════════════════ */
.spl-tabs-wrapper { background: #fff; padding: 0 40px 4px; }
.spl-tabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; padding-left: 0; flex-wrap: nowrap; }
.spl-tabs.nav-tabs .nav-item { flex: 0 0 auto; }
.spl-tabs.nav-tabs .nav-link, .spl-tabs.nav-tabs .nav-link.active, .spl-tabs.nav-tabs .nav-link:hover { position: relative; border: none; background: transparent; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 400 !important; padding: 10px 14px; margin: 0 28px 0 0; transition: color 0.12s; color: #6b7a8d; }
.spl-tabs.nav-tabs .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }
.spl-tabs.nav-tabs .nav-link:hover { color: #0d9488; font-weight: 400 !important; }
.spl-tabs.nav-tabs .nav-link.active, .spl-tabs.nav-tabs .nav-link.active:hover { color: #0d9488 !important; font-weight: 600 !important; border-bottom: none !important; }
.spl-tabs.nav-tabs .nav-link.active::after, .spl-tabs.nav-tabs .nav-link:hover::after { transform: scaleX(1); }
.spl-tabs.nav-tabs .nav-link:focus { outline: none; box-shadow: none; }
/* Onglet « Espace partage » : icone d'echange teal (toujours visible) pour distinguer la surface partagee/portail. */
.spl-tab-shared-ic { margin-right: 7px; color: #0d9488; font-size: 0.9em; }

.spl-ctx-sub-label { font-size: 0.7rem; font-weight: 300; color: #8fa1b3; margin-bottom: 2px; padding-left: 12px; }
.spl-ctx-empty { font-size: 0.78rem; color: #8fa1b3; font-style: italic; padding: 6px 0; }
.spl-ctx-balance-col-head { font-size: 0.7rem; font-weight: 400; color: #8fa1b3; }
.spl-ctx-qr-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-sm, 3px); font-size: 0.7rem; font-weight: 600; }
.spl-ctx-qr-pill-ok { background: rgba(13,148,136,0.10); color: #0d9488; border: 1px solid rgba(13,148,136,0.3); }
.spl-ctx-qr-pill-empty { background: #f1f3f5; color: #8fa1b3; border: 1px solid transparent; }
.spl-ctx-qr-date { font-size: 0.72rem; color: #8fa1b3; }
.spl-ctx-row { padding: 7px 4px 7px 12px; border-bottom: 1px solid #f3f4f6; }
.spl-ctx-row-name { font-size: 0.79rem; font-weight: 400; color: #415873; }
.spl-ctx-row-sub { font-size: 0.72rem; color: #8fa1b3; }
.spl-ctx-row-sub a { color: #8fa1b3; }

/* Étape 3a (fixes retours utilisateur) */
/* Scroll interne : hauteur explicite (px) posée par JS sur .ctx-left-col .container-scrollable
   et .ctx-right-scrollable (cf. context.html.twig splSizeContext). La .row Bootstrap (flex-wrap)
   ne propage pas la hauteur du wrapper aux colonnes → on dimensionne les scrollables directement. */
.spl-context-wrap { overflow: hidden; }
/* Scrollbar : style DS géré par les classes .ctx-scrolling / .ctx-scrollbar-hover (JS context.html.twig) —
   transparente au repos, révélée au survol de proximité (gris clair) / pendant le scroll (gris). */

/* Carte Classification — bouton "Historique modification" (référencement) discret (était btn-info très visible). */
#supplier-container #supplier-referencing-activity-modal-button.btn-info,
#supplier-container #supplier-referencing-activity-modal-button {
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: #0d9488 !important; padding: 0 4px !important; font-size: 0.72rem !important; vertical-align: baseline;
}
#supplier-container #supplier-referencing-activity-modal-button:hover { text-decoration: underline; color: #0d9488 !important; }

/* Carte Contacts — crayon d'édition : masqué au repos, révélé au survol de la ligne, teal au survol direct. */
.spl-ctx-contact-edit { visibility: hidden; color: #8fa1b3; background: transparent; border: none; text-decoration: none; flex-shrink: 0; }
.spl-ctx-contact-edit .fas { font-size: 0.8rem; }
.spl-ctx-contact-row:hover .spl-ctx-contact-edit { visibility: visible; }
.spl-ctx-contact-edit:hover, .spl-ctx-contact-edit:focus { color: #0d9488; text-decoration: none; }
/* Retrait des pastilles couleur (md-squared) devant les valeurs de propriété dans le Contexte. */
#supplier-container .ctx-info-card-body .md-squared { display: none !important; }
/* Lignes Contacts : type à droite du nom, mobile avant email. */
.spl-ctx-contact-row { padding: 7px 4px 8px 12px; border-bottom: 1px solid #f3f4f6; }
.spl-ctx-contact-row:last-child { border-bottom: none; }
.spl-ctx-contact-name { font-size: 0.79rem; font-weight: 400; color: #415873; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 2026-09-22 : « i » sur un contact ajouté par l'entreprise elle-même depuis le portail (même ton que .rfx-ov-ppl-info). */
.spl-ctx-contact-info { color: #94a3b8; font-size: 0.72rem; cursor: help; }
.spl-ctx-contact-type { font-size: 0.7rem; color: #8fa1b3; white-space: nowrap; flex-shrink: 0; }
.spl-ctx-contact-sub { font-size: 0.72rem; color: #8fa1b3; margin-top: 2px; }
.spl-ctx-contact-sub a { color: #8fa1b3; }
.spl-ctx-contact-sub .fa-mobile-alt { color: #b0bcc8; }
.spl-ctx-contacts-toggle { background: transparent; border: none; color: #0d9488; font-size: 0.72rem; padding: 2px 6px; cursor: pointer; }
.spl-ctx-contacts-toggle:hover { text-decoration: underline; }
.spl-ctx-contacts-toggle:focus { outline: none; box-shadow: none; }
.spl-ctx-contacts-toggle:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }

/* Étape 3b — onglet Pilotage (réutilise .ctx-* ; helpers .spl-pilo-*). */
.spl-pilo-row { padding: 7px 4px 7px 6px; border-bottom: 1px solid #f3f4f6; }
.spl-pilo-row:last-child { border-bottom: none; }
.spl-pilo-row-name { font-size: 0.79rem; font-weight: 400; color: #415873; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-pilo-eval-row { cursor: pointer; }
.spl-pilo-eval-row:hover { background: #f9fafb; }
.spl-pilo-eval-status { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--r-sm, 3px); font-size: 0.66rem; font-weight: 400; white-space: nowrap; flex-shrink: 0; }
.spl-pilo-eval-date { font-size: 0.72rem; color: #8fa1b3; white-space: nowrap; flex-shrink: 0; }
.spl-pilo-open { color: #8fa1b3; visibility: hidden; flex-shrink: 0; text-decoration: none; }
.spl-pilo-row:hover .spl-pilo-open { visibility: visible; }
.spl-pilo-open:hover { color: #0d9488; }
.spl-pilo-placeholder { text-align: center; padding: 28px 16px; }
.spl-pilo-placeholder-icon { font-size: 1.8rem; color: #d1dce8; margin-bottom: 8px; }
.spl-pilo-placeholder-text { font-size: 0.82rem; color: #8fa1b3; }

/* Étape 3 refonte Entreprises — masquage des bandeaux de conseils (hints "Regroupez ici…",
   "Référencez vos…", etc., `data-hint-key="supplier_*"`) devenus inutiles dans la nouvelle UI.
   Scopé au module Entreprises. Le markup mort sera purgé au nettoyage de l'étape 7. */
#supplier-container [data-hint-key^="supplier_"] { display: none !important; }
#supplier-container [data-hint-key^="supplier_"].item-infos,
#supplier-container .item-infos:has([data-hint-key^="supplier_"]) { display: none !important; }

/* Étape 3c — onglet « Contrats & Tarifs » (fusion : arbre .ctr-tree-* + section Tarifs). */
.spl-ct-wrap { overflow: hidden; }
.spl-ct-scroll { overflow-y: auto; overflow-x: hidden; padding-top: 4px; }
/* Marges 40px gauche/droite (convention DS), sans padding latéral (remplace .margined = 100px + pl-4/pr-3). */
.spl-ct-inner { margin-left: 40px; margin-right: 40px; padding-left: 0; padding-right: 0; }

/* ═══ Onglet « Notes » Entreprises (etape 3e) — fusion Notes (gauche) + Commentaires (droite).
   2 colonnes flex bornees en JS (calque pattern Contexte). Style epure DS : pas de cartes
   encadrees, lignes a filets fins, actions revelees au survol. Marges 40px exterieures +
   gouttiere 40px (paddings 40/20 par colonne, divider central dans la gouttiere). ═══ */
.spl-notes-wrap > .row { height: 100%; }
.spl-notes-left  { background: var(--ctx-bg-section); display: flex; flex-direction: column; overflow: hidden; flex: 0 0 42% !important; max-width: 42% !important; }
.spl-notes-right { background: var(--ctx-bg-section); display: flex; flex-direction: column; overflow: hidden; flex: 0 0 58% !important; max-width: 58% !important; border-left: 1px solid #eef1f4; }

/* Barres de titre : 40px exterieur / 20px cote gouttiere (override scope onglet Notes). */
.spl-notes-left  .ctx-section-title-bar { padding: 8px 20px 8px 40px; }
.spl-notes-right .ctx-section-title-bar { padding: 8px 40px 8px 20px; }

/* flex: 0 0 auto + hauteur explicite posee par splSizeNotes (= colonne - titre - footer) :
   le footer touche toujours le bas de la colonne (flex:1 ferait grandir le scroll et masquerait
   la hauteur calculee → vide sous le footer selon le timing du resize global). */
.spl-notes-list-scroll { flex: 0 0 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%; }
.spl-notes-list-inner  { padding: 2px 20px 16px 40px; }
.spl-notes-cmt-scroll  { flex: 0 0 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%; padding: 8px 40px 0 20px; }

/* Scrollbar fine colonne Notes (calque .ctx-left-col .container-scrollable). */
.spl-notes-list-scroll::-webkit-scrollbar { width: 3px; background: transparent; }
.spl-notes-list-scroll::-webkit-scrollbar-track { background: transparent; border: none; }
.spl-notes-list-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background .25s; }
.spl-notes-list-scroll.ctx-scrolling::-webkit-scrollbar-thumb { background: #c4c9d0; }
.spl-notes-list-scroll.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #dde1e6; }
.spl-notes-list-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.spl-notes-list-scroll.ctx-scrolling { scrollbar-color: #c4c9d0 transparent; }
.spl-notes-list-scroll.ctx-scrollbar-hover { scrollbar-color: #dde1e6 transparent; }

/* Ligne note : filet fin, avatar a gauche (calque .ctr-cmt-item), actions au survol. */
.spl-note-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f1f3f5; transition: background .12s; }
.spl-note-row:last-child { border-bottom: none; }
.spl-note-row:hover { background: #fafbfc; }
.spl-note-av { flex: 0 0 auto; padding-top: 1px; }
.spl-note-av .circled, .spl-note-av .md-circled { width: 20px !important; height: 20px !important; min-width: 20px !important; margin: 0 !important; }
.spl-note-av img { width: 20px !important; height: 20px !important; }
.spl-note-av .pt-1 { padding-top: 0 !important; font-size: .58rem !important; line-height: 20px !important; }
.spl-note-main { flex: 1 1 auto; min-width: 0; }
.spl-note-title { font-size: .82rem; font-weight: 500; color: #2D3E50; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spl-note-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: .72rem; color: #94a3b8; font-weight: 300; }
.spl-note-clip { color: #b0bcc8; cursor: help; }
.spl-note-access { padding: 0 7px; font-size: .64rem; font-weight: 500; line-height: 16px; letter-spacing: .2px; color: #e8855e; background: #fff5f0; border: 1px solid #fadbcb; border-radius: var(--r-full, 999px); }
.spl-note-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity .15s; }
.spl-note-row:hover .spl-note-acts, .spl-note-acts:focus-within { opacity: 1; }
.spl-note-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: .8rem; color: #b0bcc8; border-radius: var(--r-md, 6px); transition: background .12s, color .12s; }
.spl-note-action:hover { background: #eef2f6; color: #0d9488; text-decoration: none; }
.spl-note-action:focus { outline: none; }
.spl-note-action:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }
.spl-note-action-delete:hover { background: #fdeceb; color: #e3342f; }

/* Empty state notes */
.spl-notes-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 16px; text-align: center; }
.spl-notes-empty-icon { font-size: 1.7rem; color: #d6dbe0; margin-bottom: 10px; }
.spl-notes-empty-text { font-size: .8rem; color: #94a3b8; margin: 0; font-weight: 300; }

/* Avatars Commentaires plus petits — scope onglet Notes uniquement (ne touche pas Contrats). */
.spl-notes-right .ctr-cmt-avatar .circled, .spl-notes-right .ctr-cmt-avatar .md-circled { width: 20px !important; height: 20px !important; min-width: 20px !important; }
.spl-notes-right .ctr-cmt-avatar img { width: 20px !important; height: 20px !important; }
.spl-notes-right .ctr-cmt-avatar .pt-1 { font-size: .58rem !important; line-height: 20px !important; }
.spl-notes-right .ctr-cmt-composer-avatar .circled, .spl-notes-right .ctr-cmt-composer-avatar .md-circled { width: 22px !important; height: 22px !important; min-width: 22px !important; }
.spl-notes-right .ctr-cmt-composer-avatar img { width: 22px !important; height: 22px !important; }
.spl-notes-right .ctr-cmt-composer-avatar .pt-1 { font-size: .6rem !important; line-height: 22px !important; }

/* Barres sticky bas : hauteur FIXE identique (note = commentaire) → garantit l'egalite des 2 barres
   independamment du contenu, et reduit la hauteur globale. Contenu centre verticalement.
   Selecteurs scopes (.spl-notes-left/-right) pour passer devant .ctr-doc-footer / .ctr-cmt-footer
   (declares plus bas dans le fichier, raccourci padding qui ecraserait sinon). */
.spl-notes-left .spl-notes-add-footer,
.spl-notes-right .spl-notes-cmt-footer { height: 52px; min-height: 0; align-items: center; padding-top: 0; padding-bottom: 0; }
/* Saisie commentaire : 20px gauche / 40px droite. Ajout note : 40px gauche / 20px droite. */
.spl-notes-right .spl-notes-cmt-footer { padding-left: 20px; padding-right: 40px; }
.spl-notes-left .spl-notes-add-footer { padding-left: 40px; padding-right: 20px; }
/* Champ commentaire compact (≈ hauteur d'un bouton), pour ne pas dilater la barre. */
.spl-notes-right .ctr-cmt-editor { padding-top: 6px; padding-bottom: 6px; }
.spl-notes-right .ctr-cmt-editor .medium-editor-element,
.spl-notes-right .ctr-cmt-editor textarea,
.spl-notes-right .ctr-cmt-editor [contenteditable] { min-height: 20px; }
.spl-notes-right .ctr-cmt-editor .medium-editor-element { max-height: 90px; }
/* Masquer la scrollbar du champ de saisie (contenu toujours scrollable) — scope onglet Notes. */
.spl-notes-right .ctr-cmt-editor .medium-editor-element,
.spl-notes-right .ctr-cmt-editor textarea,
.spl-notes-right .ctr-cmt-editor [contenteditable] { scrollbar-width: none; -ms-overflow-style: none; }
.spl-notes-right .ctr-cmt-editor .medium-editor-element::-webkit-scrollbar,
.spl-notes-right .ctr-cmt-editor textarea::-webkit-scrollbar,
.spl-notes-right .ctr-cmt-editor [contenteditable]::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
#spl-note-add:focus { outline: none; }
#spl-note-add:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }

/* Drawer « Questionnaire général sur les sociétés consultées » (3a-bis) — contenu read-only dans .ds-drawer-body. */
.spl-qr-meta { font-size: .72rem; font-style: italic; color: #8fa1b3; text-align: right; margin-bottom: 12px; }
.spl-qr-empty { font-size: .85rem; color: #64748b; line-height: 1.5; }
/* Apercu des questions posees (questionnaire non rempli) : reponse en attente, en gris italique. */
.spl-qr-props-preview { margin-top: 14px; }
.spl-qr-noanswer { color: #9aa8b6; font-style: italic; }
.spl-qr-props h2 { font-size: .95rem; font-weight: 600; color: #2D3E50; margin: 6px 0; }
.spl-qr-props .row { font-size: .82rem; }
.spl-qr-props .md-squared { display: inline-block; }
/* Documents joints du questionnaire — liste épurée (calque .ctr-doc-*). */
.spl-qr-docs { margin: 12px 0 6px; }
.spl-qr-docs-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; margin-bottom: 6px; }
.spl-qr-doc { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f3f5; }
.spl-qr-doc:last-child { border-bottom: none; }
.spl-qr-doc-icon { font-size: 1rem; color: #8fa1b3; flex: 0 0 auto; width: 18px; text-align: center; }
.spl-qr-doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.spl-qr-doc-label { font-size: .82rem; font-weight: 500; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spl-qr-doc-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.spl-qr-doc-tag { font-size: .66rem; color: #64748b; background: #f1f5f9; border-radius: var(--r-full, 999px); padding: 0 8px; line-height: 16px; white-space: nowrap; }
.spl-qr-doc-size { font-size: .7rem; color: #94a3b8; white-space: nowrap; }
.spl-qr-doc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.spl-qr-doc-action { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #8fa1b3; border-radius: var(--r-md, 6px); transition: background .12s, color .12s; }
.spl-qr-doc-action:hover { background: #eef2f6; color: #0d9488; text-decoration: none; }

.spl-ct-tree-root { padding: 0; }
.spl-tarifs-card .spl-tarifs-filter { margin-bottom: 10px; }
.spl-tarifs-reset { display: inline-block; margin-top: 2px; font-size: 0.72rem; color: #0d9488; text-decoration: none; }
.spl-tarifs-reset:hover { text-decoration: underline; color: #0d9488; }
.spl-tarifs-table { font-size: 0.8rem; }
/* Intitulés de colonnes sticky au scroll de l'onglet (scroll = .spl-ct-scroll).
   box-shadow inset = bordure basse fiable même en position sticky. */
.spl-tarifs-table thead th { position: sticky; top: 0; z-index: 5; background: #fff; font-size: 0.7rem; font-weight: 600; color: #8fa1b3; border-top: none; border-bottom: none; box-shadow: inset 0 -1px 0 #e2e8f0; padding: 7px 8px; text-transform: none; }
.spl-tarifs-table tbody td { padding: 7px 8px; color: #415873; border-top: 1px solid #f3f4f6; vertical-align: middle; }
.spl-tarifs-row { cursor: pointer; transition: background 0.1s; }
.spl-tarifs-row:hover { background: #f9fafb; }

/* Container preview fiche contrat (légère adaptation pour le scroll vertical). */
.main-content-preview-contract { display: flex; flex-direction: column; }

/* Placeholder Pilotage (étape 2) - empty state simple. */
.ctr-pilotage-placeholder { text-align: center; padding: 80px 24px; color: #8fa1b3; }
.ctr-pilotage-placeholder-icon { font-size: 3rem; color: #d1dce8; margin-bottom: 16px; }
.ctr-pilotage-placeholder-title { font-size: 1.2rem; font-weight: 500; color: #2D3E50; margin: 0 0 12px; }
.ctr-pilotage-placeholder-text { font-size: 0.9rem; color: #475569; max-width: 480px; margin: 0 auto 8px; line-height: 1.5; }
.ctr-pilotage-placeholder-subtext { font-size: 0.78rem; color: #8fa1b3; max-width: 480px; margin: 0 auto; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats — Onglet Commentaires (étape 3e refonte 2026-06-06)
 *
 * Pattern Communauté : liste chronologique (plus ancien en haut, plus récent
 * en bas), formulaire de saisie en bas, auto-scroll vers le bas à l'ouverture.
 * Cards individuelles façon .ctx-section-item (cohérence onglet Contexte).
 * Préfixe .ctr-cmt-* pour éviter les collisions.
 * ════════════════════════════════════════════════════════════════════════ */

.ctr-cmt-wrapper { padding: 16px 40px 0 40px; }

/* Zone scrollable : la height est gere par le legacy resizeItemPreviewContainer
   qui defalque la hauteur du footer .comment-tab. Pas de flex requis ici. */
.ctr-cmt-scrollable { overflow-y: auto; overflow-x: hidden; }

/* Scrollbar fine style DS (calque .ctx-left-col .container-scrollable) :
   transparente au repos, gris #c4c9d0 au hover du conteneur ou pendant le scroll. */
.ctr-cmt-scrollable::-webkit-scrollbar { width: 3px; background: transparent; }
.ctr-cmt-scrollable::-webkit-scrollbar-track { background: transparent; border: none; }
.ctr-cmt-scrollable::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.ctr-cmt-scrollable:hover::-webkit-scrollbar-thumb,
.ctr-cmt-scrollable.ctx-scrolling::-webkit-scrollbar-thumb { background: #c4c9d0; }
.ctr-cmt-scrollable::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.ctr-cmt-scrollable { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ctr-cmt-scrollable:hover, .ctr-cmt-scrollable.ctx-scrolling { scrollbar-color: #c4c9d0 transparent; }

/* Liste verticale des commentaires (chronologique, style linear epure). */
.ctr-cmt-list { display: flex; flex-direction: column; }

/* Item commentaire — style epure, separateur fin uniquement. Hover subtil
   (fond gris tres clair) qui anime sans suggerer d'action specifique. Inspire
   Linear / Notion comments. */
.ctr-cmt-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 -12px; border-bottom: 1px solid #f1f5f9; border-radius: var(--r-lg, 10px); transition: background 0.15s ease; }
.ctr-cmt-item:last-child { border-bottom: none; }
.ctr-cmt-item:hover { background: #fafbfc; }
.ctr-cmt-avatar { flex: 0 0 auto; }
/* Avatar compact (override taille .circled du macro sm pour rester discret). */
.ctr-cmt-avatar .circled,
.ctr-cmt-avatar .md-circled { width: 24px !important; height: 24px !important; min-width: 24px !important; }
.ctr-cmt-avatar img { width: 24px !important; height: 24px !important; }
.ctr-cmt-avatar .pt-1 { padding-top: 0 !important; font-size: 0.7rem !important; line-height: 24px !important; }
.ctr-cmt-body { flex: 1 1 auto; min-width: 0; }
.ctr-cmt-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; line-height: 1.2; }
.ctr-cmt-author { font-size: 0.82rem; font-weight: 400; color: #2D3E50; }
.ctr-cmt-time { font-size: 0.72rem; color: #94a3b8; font-weight: 300; cursor: help; }
/* Force taille texte uniforme y compris pour HTML genere par Medium Editor
   (p, span, div internes). */
.ctr-cmt-text,
.ctr-cmt-text p,
.ctr-cmt-text span,
.ctr-cmt-text div,
.ctr-cmt-text b,
.ctr-cmt-text strong { font-size: 0.8rem !important; font-weight: 300 !important; color: #64748b !important; line-height: 1.4 !important; }
.ctr-cmt-text { word-wrap: break-word; overflow-wrap: break-word; }
.ctr-cmt-text p { margin: 0 0 2px 0; }
.ctr-cmt-text p:last-child { margin-bottom: 0; }

/* Empty state coherent avec ctr-tree-empty (icone grisee + texte centre). */
.ctr-cmt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.ctr-cmt-empty-icon { font-size: 2rem; color: #cbd5e1; margin-bottom: 10px; }
.ctr-cmt-empty-text { font-size: 0.82rem; color: #94a3b8; margin: 0; font-weight: 300; }

/* Footer formulaire — la classe .comment-tab le fait reconnaitre par
   resizeItemPreviewContainer (defalque sa hauteur). Zone composer en carte
   arrondie style moderne (cf. Linear / Notion / Slack channel composer). */
.ctr-cmt-footer { display: flex; align-items: stretch; gap: 8px; padding: 6px 0; border-top: 1px solid #e2e8f0; background: #fff; }

/* Conteneur editeur — fond legerement teinte, bord fin, focus-within reveal teal. */
/* Avatar utilisateur courant a gauche du composer (pattern Slack/Notion).
   Aligne verticalement au centre du champ de saisie. */
.ctr-cmt-composer-avatar { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; }
.ctr-cmt-composer-avatar .circled,
.ctr-cmt-composer-avatar .md-circled { width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 !important; }
.ctr-cmt-composer-avatar img { width: 28px !important; height: 28px !important; }
.ctr-cmt-composer-avatar .pt-1 { padding-top: 0 !important; font-size: 0.75rem !important; line-height: 28px !important; }

.ctr-cmt-editor { flex: 1 1 auto; min-width: 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 8px 12px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }

/* Smiley emoji picker : la lib emoji.css le positionne en absolute top:5px (pas centre)
   et a font-size 20px. On le centre verticalement et on l'agrandit dans le composer
   contrats specifiquement. */
.ctr-cmt-editor .emoji-picker-icon { top: 50% !important; transform: translateY(-50%) !important; right: 8px !important; font-size: 26px !important; color: #94a3b8 !important; opacity: 0.85 !important; }
.ctr-cmt-editor .emoji-picker-icon:hover { color: #0d9488 !important; opacity: 1 !important; }
.ctr-cmt-editor .medium-editor-placeholder:after { color: #94a3b8 !important; font-style: italic !important; font-weight: 300 !important; font-size: 0.9rem !important; }
.ctr-cmt-editor:hover { border-color: #cbd5e1; background: #f1f5f9; }
.ctr-cmt-editor:focus-within { border-color: #0d9488; background: #fff; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.ctr-cmt-editor .form-group { margin-bottom: 0; }
.ctr-cmt-editor .medium-editor-element,
.ctr-cmt-editor textarea,
.ctr-cmt-editor .form-control,
.ctr-cmt-editor [contenteditable] { font-size: 0.9rem; min-height: 24px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; line-height: 1.5; }
.ctr-cmt-editor .medium-editor-element { max-height: 140px; overflow-y: auto; }
/* Placeholder Medium Editor (data-placeholder) — italique gris discret. */


.ctr-cmt-submit-wrap { flex: 0 0 auto; display: flex; align-items: stretch; }

/* Bouton "Publier" — pleine hauteur du composer, style ghost teal, plus
   marque qu'un simple bouton (effet plein teal au hover). Enter dans
   l'editeur reste egalement operationnel via medium_enter_keydown legacy. */
.ctr-cmt-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px; font-size: 0.82rem; font-weight: 500; color: #0d9488; background: #fff; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.05s; text-decoration: none; line-height: 1.3; white-space: nowrap; min-height: 36px; }
.ctr-cmt-submit-btn:hover, .ctr-cmt-submit-btn:focus { background: #0d9488; color: #fff; border-color: #0d9488; text-decoration: none; outline: none; box-shadow: 0 1px 4px rgba(13,148,136,0.25); }
.ctr-cmt-submit-btn:active { transform: translateY(1px); }
.ctr-cmt-submit-btn .fas { font-size: 0.82rem; }

@media (max-width: 576px) {
    .ctr-cmt-wrapper { padding: 12px 16px 0 16px; }
    .ctr-cmt-submit-label { display: none; }
    .ctr-cmt-submit-btn { padding: 6px 9px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats — Onglet Documents (étape 3c refonte 2026-06-06)
 *
 * Pattern row aligné DS (calque .ctx-* + Projets/tabs/documents).
 * 3 zones empilées : Standards / Document de résiliation (badge rouge léger) /
 * Documents post-validation (placeholder pour étape 4).
 * Préfixe .ctr-doc-* pour éviter collisions.
 * ════════════════════════════════════════════════════════════════════════ */

.ctr-doc-wrapper { padding: 16px 40px 0 40px; }

/* Scrollbar fine identique au pattern .ctr-cmt-scrollable / .ctx-left-col */
.ctr-doc-scrollable { overflow-y: auto; overflow-x: hidden; }
.ctr-doc-scrollable::-webkit-scrollbar { width: 3px; background: transparent; }
.ctr-doc-scrollable::-webkit-scrollbar-track { background: transparent; border: none; }
.ctr-doc-scrollable::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.ctr-doc-scrollable:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
.ctr-doc-scrollable::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.ctr-doc-scrollable { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ctr-doc-scrollable:hover { scrollbar-color: #c4c9d0 transparent; }

/* Section : titre discret + liste en dessous, séparées par un espace généreux. */
.ctr-doc-section { margin-bottom: 18px; }
.ctr-doc-section:last-child { margin-bottom: 0; }
.ctr-doc-section-title { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.ctr-doc-section-icon { font-size: 0.85rem; color: #94a3b8; }

/* Variante visuelle résiliation : icône rouge léger + titre nuancé. */
.ctr-doc-section-cancellation .ctr-doc-section-icon { color: #ef4444; }
.ctr-doc-section-cancellation .ctr-doc-section-title { color: #b91c1c; }

/* Variante post-validation : icône teal. */
.ctr-doc-section-postvalidation .ctr-doc-section-icon { color: #0d9488; }
.ctr-doc-section-postvalidation .ctr-doc-section-title { color: #0d9488; }

/* Placeholder zone post-validation (étape 4 livrera la whitelist BD). */
.ctr-doc-section-placeholder { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: var(--r-lg, 10px); font-size: 0.8rem; color: #94a3b8; font-style: italic; }
.ctr-doc-section-placeholder .fas { font-size: 0.85rem; color: #94a3b8; }

/* Liste verticale des documents (style row Linear/Notion). */
.ctr-doc-list { display: flex; flex-direction: column; }

/* Item document — row layout : avatar + body (label + meta) + actions. */
.ctr-doc-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; border-radius: var(--r-lg, 10px); transition: background 0.15s ease; }
.ctr-doc-item:last-child { border-bottom: none; }
.ctr-doc-item:hover { background: #fafbfc; }

/* Variante visuelle pour les documents de résiliation (badge rouge léger). */
.ctr-doc-item.is-cancellation { background: #fef2f2; border-bottom-color: #fecaca; }
.ctr-doc-item.is-cancellation:hover { background: #fee2e2; }

.ctr-doc-avatar { flex: 0 0 auto; }
.ctr-doc-avatar .circled,
.ctr-doc-avatar .md-circled { width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 !important; }
.ctr-doc-avatar img { width: 28px !important; height: 28px !important; }
.ctr-doc-avatar .pt-1 { padding-top: 0 !important; font-size: 0.75rem !important; line-height: 28px !important; }

.ctr-doc-body { flex: 1 1 auto; min-width: 0; }
.ctr-doc-row1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctr-doc-file-icon { font-size: 0.95rem; color: #6b7a8d; flex: 0 0 auto; }
.ctr-doc-label { font-size: 0.85rem; font-weight: 400; color: #2D3E50; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ctr-doc-row2 { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }

/* Tag teal pour catégorie (calque pattern Contexte). */
.ctr-doc-tag { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 0.72rem; font-weight: 400; color: #0d9488; background: #e6f7f5; border-radius: var(--r-sm, 3px); line-height: 1.3; }

.ctr-doc-meta { font-size: 0.74rem; color: #94a3b8; font-weight: 300; }
.ctr-doc-date { cursor: help; }

/* Actions à droite — opacité réduite au repos, opacité 1 au hover de la row. */
.ctr-doc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; opacity: 0.6; transition: opacity 0.15s ease; }
.ctr-doc-item:hover .ctr-doc-actions { opacity: 1; }
.ctr-doc-action { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #6b7a8d; background: transparent; border: 1px solid transparent; border-radius: var(--r-md, 6px); text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.ctr-doc-action:hover, .ctr-doc-action:focus { background: #e6f7f5; color: #0d9488; border-color: transparent; text-decoration: none; outline: none; box-shadow: none; }
.ctr-doc-action .fas, .ctr-doc-action .far { font-size: 0.82rem; }
.ctr-doc-action-delete:hover, .ctr-doc-action-delete:focus { background: #fee2e2; color: #b91c1c; }

/* Empty state — calque .ctr-tree-empty-* (Contrats lies) pour coherence visuelle.
   Centre, padding aere, hint a max-width etroite, CTA en lien pointille discret.
   La barre d'actions sticky (footer) est masquee en empty state - tout passe par
   le CTA inline. */
.ctr-doc-empty-state { text-align: center; padding: 60px 24px; color: #8fa1b3; }
.ctr-doc-empty-icon { font-size: 2.5rem; color: #d1dce8; margin-bottom: 12px; }
.ctr-doc-empty-title { font-size: 0.95rem; font-weight: 500; color: #475569; margin: 0 0 8px; }
.ctr-doc-empty-hint { font-size: 0.82rem; color: #8fa1b3; max-width: 380px; margin: 0 auto 14px; }
.ctr-doc-empty-cta { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 0.82rem; font-weight: 500; color: var(--ctx-teal, #0d9488); background: transparent; border: 1px dashed #cbd5e1; border-radius: var(--r-md, 6px); text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.ctr-doc-empty-cta:hover, .ctr-doc-empty-cta:focus { background: var(--ctx-teal-light, #e6f7f5); border-color: var(--ctx-teal, #0d9488); color: var(--ctx-teal, #0d9488); text-decoration: none; outline: none; }
.ctr-doc-empty-cta .fas { font-size: 0.72rem; }

/* Footer add-bar — la classe .comment-tab le fait reconnaitre par
   resizeItemPreviewContainer (defalque sa hauteur). */
.ctr-doc-footer { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-top: 1px solid #e2e8f0; background: #fff; }
.ctr-doc-footer-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; font-size: 0.82rem; font-weight: 500; color: #0d9488; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; line-height: 1.3; white-space: nowrap; }
.ctr-doc-footer-btn:hover, .ctr-doc-footer-btn:focus { background: #f0fafa; color: #0d9488; border-color: #0d9488; text-decoration: none; outline: none; box-shadow: none; }
.ctr-doc-footer-btn .fas { font-size: 0.78rem; }

/* Bouton primaire (Ajouter document) — bord teal au repos pour le faire ressortir. */
.ctr-doc-footer-btn-primary { border-color: #0d9488; }
.ctr-doc-footer-btn-primary:hover, .ctr-doc-footer-btn-primary:focus { background: #0d9488; color: #fff; border-color: #0d9488; }

/* Bouton résiliation — accent rouge léger. */
.ctr-doc-footer-btn-cancellation { color: #b91c1c; border-color: #fecaca; }
.ctr-doc-footer-btn-cancellation:hover, .ctr-doc-footer-btn-cancellation:focus { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* Bouton icone (Historique) — variante discrete poussee a droite. */
.ctr-doc-footer-btn-icon { color: #6b7a8d; border-color: transparent; padding: 7px 10px; }
.ctr-doc-footer-btn-icon:hover, .ctr-doc-footer-btn-icon:focus { color: #0d9488; border-color: transparent; background: #f0fafa; }

@media (max-width: 576px) {
    .ctr-doc-wrapper { padding: 12px 16px 0 16px; }
    .ctr-doc-footer-btn { padding: 7px 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats — Bandeau résiliation Contexte + placeholder Documents
 * (étape 3c polish 2026-06-06)
 *
 * Affichage du motif de résiliation + meta + avertissement document manquant
 * dans l'onglet Contexte (en haut). Placeholder dans Documents si statut Résilié
 * sans document de résiliation, pour ajout/réajout à posteriori.
 * ════════════════════════════════════════════════════════════════════════ */

/* Bandeau Contexte — rouge léger, border-left épais accent, padding aéré. */
.ctr-ctx-cancellation-banner { display: flex; gap: 14px; padding: 14px 18px; margin: 12px 40px 4px 40px; background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: 4px; }
.ctr-ctx-cancellation-icon { flex: 0 0 auto; display: flex; align-items: flex-start; padding-top: 2px; }
.ctr-ctx-cancellation-icon .fas { font-size: 1.1rem; color: #b91c1c; }
.ctr-ctx-cancellation-body { flex: 1 1 auto; min-width: 0; }

.ctr-ctx-cancellation-title { font-size: 0.92rem; font-weight: 600; color: #991b1b; margin-bottom: 4px; }
.ctr-ctx-cancellation-date { font-size: 0.78rem; font-weight: 400; color: #b91c1c; }

.ctr-ctx-cancellation-reason { font-size: 0.85rem; color: #7f1d1d; margin: 4px 0 8px; line-height: 1.45; }
.ctr-ctx-cancellation-reason-label { font-weight: 500; color: #991b1b; }

.ctr-ctx-cancellation-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.78rem; color: #991b1b; }
.ctr-ctx-cancellation-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.ctr-ctx-cancellation-meta-item .fas, .ctr-ctx-cancellation-meta-item .far { font-size: 0.72rem; color: #b91c1c; }

/* Ligne avertissement document manquant — separe par un fin liseré. */
.ctr-ctx-cancellation-missing { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #fecaca; font-size: 0.82rem; color: #991b1b; }
.ctr-ctx-cancellation-missing .fas { color: #d97706; font-size: 0.85rem; }
.ctr-ctx-cancellation-missing-link { color: #b91c1c; font-weight: 500; text-decoration: underline; cursor: pointer; }
.ctr-ctx-cancellation-missing-link:hover, .ctr-ctx-cancellation-missing-link:focus { color: #7f1d1d; text-decoration: underline; outline: none; }

/* Placeholder dans Documents — zone résiliation visible sans document. */
.ctr-doc-cancellation-missing { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fef2f2; border: 1px dashed #fca5a5; border-radius: 2px; }
.ctr-doc-cancellation-missing-text { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #991b1b; }
.ctr-doc-cancellation-missing-text .fas { color: #d97706; font-size: 0.85rem; }
.ctr-doc-cancellation-missing-cta { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 0.82rem; font-weight: 500; color: #b91c1c; background: #fff; border: 1px solid #fca5a5; border-radius: 2px; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ctr-doc-cancellation-missing-cta:hover, .ctr-doc-cancellation-missing-cta:focus { background: #b91c1c; color: #fff; border-color: #b91c1c; text-decoration: none; outline: none; }
.ctr-doc-cancellation-missing-cta .fas { font-size: 0.72rem; }

/* Zone post-validation (Phase 4 finalisation 2026-06-09) — cadre sobre teal/gris.
   Contrairement à la zone résiliation (alerte rouge), l'ajout post-validation est
   facultatif : on signale juste la possibilité, sans dramatiser. Le message
   d'invitation disparaît une fois qu'au moins un document a été ajouté
   (titre de section déjà parlant). */
.ctr-doc-postvalidation-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(45,62,80,0.03); border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); }
.ctr-doc-postvalidation-info-text { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #475569; }
.ctr-doc-postvalidation-info-text .fas { color: #6b7a8d; font-size: 0.85rem; }
.ctr-doc-postvalidation-cta { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 0.82rem; font-weight: 500; color: #0f766e; background: #fff; border: 1px solid #99f6e4; border-radius: var(--r-md, 6px); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ctr-doc-postvalidation-cta:hover, .ctr-doc-postvalidation-cta:focus { background: #0f766e; color: #fff; border-color: #0f766e; text-decoration: none; outline: none; }
.ctr-doc-postvalidation-cta .fas { font-size: 0.72rem; }
.ctr-doc-postvalidation-add { display: flex; justify-content: flex-start; padding-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════
 * Drawer Résiliation contrat (étape 4bis, refonte 2026-06-09)
 *
 * Refonte visuelle + bascule modale → drawer. Réutilise le shell #contractDrawer
 * (`.drawer-contract` — header navy / body scrollable / footer). Sections nommées
 * avec icône, bandeau info destructif soft, footer DS. Préfixe `.ctr-cnl-*`.
 * Voir doc session docs/sessions/2026-06-09_refonte-contrats-etape4bis-modale-resiliation.md
 * ════════════════════════════════════════════════════════════════════════ */

/* Padding intérieur du body drawer (calque .drw-ctr-* pour cohérence). */
.ctr-cnl-body-wrap { padding: 16px 16px 12px 16px; }

/* Bandeau info destructif soft : rappel sobre que l'action est définitive. */
.ctr-cnl-warning { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 18px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--r-lg, 10px); }
.ctr-cnl-warning > .fas { color: #b91c1c; font-size: 0.95rem; margin-top: 2px; flex-shrink: 0; }
.ctr-cnl-warning span { font-size: 0.80rem; color: #7f1d1d; line-height: 1.4; }

/* Sections : titres calque .drw-ctr-subtitle (uppercase teal). Le margin-bottom suffit
   pour aérer ; pas d'icône devant le titre (alignement strict drawer Création/Édition). */
.ctr-cnl-section { margin-bottom: 18px; }
.ctr-cnl-section:last-child { margin-bottom: 4px; }
.ctr-cnl-section > .drw-ctr-subtitle { margin-bottom: 12px; }

.ctr-cnl-section-body { display: flex; flex-direction: column; gap: 14px; }
.ctr-cnl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .ctr-cnl-grid-2 { grid-template-columns: 1fr; } }

/* Field wrapper : flex column pour empiler label + widget, min-width 0 pour permettre
   au widget de respecter la largeur de la colonne (anti-débordement grid). */
.ctr-cnl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctr-cnl-field > .drw-ctr-field-label { margin-bottom: 0; }

/* Inputs / textarea : DS épuré (border-radius 2px, focus halo teal). Width 100% sur tous
   les form-control (dates inclues, qu'elles soient en input nu ou input-group). */
.ctr-cnl-field textarea,
.ctr-cnl-field input.form-control,
.ctr-cnl-field .form-control { border: 1px solid #e2e8f0 !important; border-radius: var(--r-md, 6px)!important; font-size: 0.82rem; color: #2D3E50; background: #fff; box-shadow: none !important; width: 100% !important; }
.ctr-cnl-field textarea:focus,
.ctr-cnl-field input.form-control:focus,
.ctr-cnl-field .form-control:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.12) !important; outline: none; }
.ctr-cnl-field .input-group { display: flex; width: 100%; border-radius: var(--r-md, 6px); }
.ctr-cnl-field .input-group .form-control { flex: 1 1 auto; }
.ctr-cnl-field .input-group-text { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); color: #6b7a8d; }
.ctr-cnl-field .input-group-prepend, .ctr-cnl-field .input-group-append { display: flex; }

/* Espace entre les sous-champs du DocumentType (Nom + Type de document + ...). */
.ctr-cnl-field .form-group { margin-bottom: 12px; }
.ctr-cnl-field .form-group:last-child { margin-bottom: 0; }

/* Masque l'icône '!' rouge du form theme bootstrap_4 (form_errors block) à l'intérieur
   du drawer Résiliation — remplacée par les messages errInline texte sous le champ. */
.drawer-contract .ctr-cnl-body-wrap a.fa-exclamation-circle.text-danger { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
 * Bandeau récap erreurs (remplace alert "Encore un effort") — partagé entre drawers
 * Résiliation Contrat / Création-Édition Projet / Création-Édition Contrat.
 * ════════════════════════════════════════════════════════════════════════ */
.drw-err-summary { background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--r-lg, 10px); padding: 12px 14px; margin-bottom: 18px; }
.drw-err-summary-title { display: flex; align-items: center; gap: 8px; font-size: 0.80rem; font-weight: 600; color: #991b1b; margin-bottom: 6px; }
.drw-err-summary-title .fas { color: #b91c1c; font-size: 0.92rem; }
.drw-err-summary ul { margin: 0; padding-left: 22px; font-size: 0.78rem; color: #7f1d1d; line-height: 1.45; }
.drw-err-summary ul li { margin-bottom: 2px; }
/* Compat héritée (cancellation drawer initial). */
.ctr-cnl-errors-summary { background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--r-lg, 10px); padding: 12px 14px; margin-bottom: 18px; }
.ctr-cnl-errors-summary-title { display: flex; align-items: center; gap: 8px; font-size: 0.80rem; font-weight: 600; color: #991b1b; margin-bottom: 6px; }
.ctr-cnl-errors-summary-title .fas { color: #b91c1c; font-size: 0.92rem; }
.ctr-cnl-errors-summary ul { margin: 0; padding-left: 22px; font-size: 0.78rem; color: #7f1d1d; line-height: 1.45; }
.ctr-cnl-errors-summary ul li { margin-bottom: 2px; }

/* Bootstrap-select : style DS. */
.ctr-cnl-field .bootstrap-select { width: 100% !important; }
.ctr-cnl-field .bootstrap-select > .btn { border: 1px solid #e2e8f0 !important; background: #fff !important; color: #2D3E50 !important; font-size: 0.82rem !important; border-radius: var(--r-md, 6px)!important; box-shadow: none !important; padding: 6px 10px !important; }
.ctr-cnl-field .bootstrap-select > .btn:hover { border-color: #cbd5e1 !important; }
.ctr-cnl-field .bootstrap-select.show > .btn,
.ctr-cnl-field .bootstrap-select > .btn:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 2px rgba(13,148,136,0.12) !important; }

/* Footer drawer : Annuler ghost à gauche + Résilier filled rouge à droite (calque .drw-ctr-footer). */
.ctr-cnl-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ctr-cnl-btn-cancel { padding: 7px 14px; font-size: 0.82rem; font-weight: 500; color: #6b7a8d; background: transparent; border: 1px solid transparent; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.15s, color 0.15s; }
.ctr-cnl-btn-cancel:hover, .ctr-cnl-btn-cancel:focus { color: #2D3E50; background: #f1f5f9; outline: none; }
.ctr-cnl-btn-confirm { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 0.82rem; font-weight: 500; color: #fff; background: #dc2626; border: 1px solid #dc2626; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.ctr-cnl-btn-confirm:hover, .ctr-cnl-btn-confirm:focus { background: #991b1b; border-color: #991b1b; color: #fff; outline: none; text-decoration: none; }
.ctr-cnl-btn-confirm .fas { font-size: 0.74rem; }

@media (max-width: 576px) {
    .ctr-ctx-cancellation-banner { margin: 8px 16px 4px 16px; padding: 12px 14px; }
    .ctr-doc-cancellation-missing { flex-direction: column; align-items: flex-start; }
    .ctr-doc-postvalidation-info { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Date de fin pré-résiliation barrée + date d'effet (étape 3c, 2026-06-06)
 *
 * Affichage dans le header (ligne 2 "Date de fin") + bandeau résiliation du
 * Contexte. Visible uniquement si contract.endAtBeforeCancellation est snapshote
 * (donc pour les résiliations effectuées après livraison du champ).
 * ════════════════════════════════════════════════════════════════════════ */

/* Header ligne 2 — date avant cancellation : barrée rouge, légèrement plus discrète. */
.ctr-header-endat-cancelled { color: #b91c1c; text-decoration: line-through; text-decoration-color: #ef4444; opacity: 0.85; }
.ctr-header-endat-arrow { font-size: 0.65rem; color: #94a3b8; margin: 0 4px; vertical-align: middle; }
.ctr-header-endat-effective { color: #2D3E50; }

/* Bandeau Contexte — strikethrough rouge clair + flèche + date d'effet. */
.ctr-ctx-cancellation-endat-old { color: #b91c1c; text-decoration: line-through; text-decoration-color: #ef4444; opacity: 0.85; }
.ctr-ctx-cancellation-endat-arrow { font-size: 0.62rem; color: #b91c1c; margin: 0 4px; opacity: 0.7; vertical-align: middle; }
.ctr-ctx-cancellation-endat-new { color: #991b1b; }
/* Card Caracteristiques — date endAt resiliee : meme pattern strikethrough que header + bandeau. */
.ctr-prop-endat-cancelled { color: #b91c1c; text-decoration: line-through; text-decoration-color: #ef4444; opacity: 0.85; }
.ctr-prop-endat-arrow { font-size: 0.65rem; color: #94a3b8; margin: 0 4px; vertical-align: middle; }
.ctr-prop-endat-effective { color: #2D3E50; font-weight: 500; }
/* Note discrete a cote de la date de fin sur reconduction tacite : teal italique, petite police. */
.ctr-prop-renewals-note { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-style: italic; font-weight: 300; color: #0d9488; vertical-align: middle; }
/* Tooltip Bootstrap natif sur les icones "?" des descriptions de proprietes du contrat.
   Bootstrap par defaut donne deja max-width 200px + line-wrap + bg-noir + texte clair.
   On force ici uniquement la police plus petite et un max-width legerement plus large
   pour les descriptions un peu plus longues comme "Montant total commande a date". */
.tooltip .tooltip-inner { font-size: 0.74rem; line-height: 1.35; padding: 6px 10px; max-width: 260px; text-align: left; }
/* 2026-06-10 — Tooltips Bootstrap : pointer-events none pour éviter le flicker quand le tooltip
   apparait sous le curseur (le curseur entre dans le tooltip → mouseleave élément → tooltip hide
   → mouseenter élément → tooltip show → boucle). Cas typique : pencil edit dans Suivi financier. */
.tooltip { pointer-events: none; }
/* Modale quick-edit totalAmountOrdered (etape 3c) : alignement input + suffixe euro. */
.ctr-tao-input-group .form-control { height: 38px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ctr-tao-input-group .input-group-append { display: flex; align-items: stretch; }
.ctr-tao-input-group .ctr-tao-currency { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; background: #f8fafc; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; color: #475569; font-size: 0.9rem; }

/* 2026-06-10 — Modale "Renseigner les montants" enrichie : encadré teal clair pour mettre en
   avant le champ "Montant commandé à date" (champ qui évolue dans le temps + historique).
   Distingue visuellement des champs Total + Min (qualification statique). */
.ctr-tao-highlight { background: #e6f7f5; border: 1px solid #b8e6e0; border-radius: var(--r-md, 6px); padding: 14px 16px; margin-top: 16px; }
.ctr-tao-highlight-label { color: #0d9488; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; display: block; }
.ctr-tao-help-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ctr-tao-help { color: #0d9488; font-size: 0.74rem; font-style: italic; flex: 1 1 auto; line-height: 1.4; }
.ctr-tao-history-btn { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.74rem; font-weight: 500; color: #0d9488; background: #f0fbf9; border: 1px solid #d7ede9; border-radius: var(--r-md, 6px); cursor: pointer; transition: background 0.12s, border-color 0.12s; flex-shrink: 0; }
.ctr-tao-history-btn:hover, .ctr-tao-history-btn:focus { background: #e6f7f5; border-color: #b8e6e0; outline: none; }
.ctr-tao-history-btn .fas { font-size: 0.7rem; }













/* ════════════════════════════════════════════════════════════════════════
 * Module Contrats — Onglet Pilotage (étape 3d itération 4 — 2026-06-06)
 *
 * Refonte propreté + hiérarchie typographique stricte.
 *
 * Échelle typo cohérente (3 niveaux uniquement) :
 *   - LABEL    : 0.7rem uppercase weight 600 letter-spacing 0.5 color #6b7a8d
 *   - VALUE    : 0.95rem weight 500 color #1f2937
 *   - HERO     : 1.1rem weight 700 color #1f2937  (1 seul par bloc max)
 *   - SUB/META : 0.78rem regular color #94a3b8
 *
 * Style "bare-card" transparent + trait sous titre (cohérent Contexte).
 * Réutilise .ctx-icon-box-sm + .ctx-card-title.
 * ════════════════════════════════════════════════════════════════════════ */

/* Wrapper Pilotage : pas de flex/overflow — la hauteur est posée par JS (resizePiloCols)
   directement sur .ctr-pilo-col-left et .ctr-pilo-col-right (calque exact .ctx-left-col / .ctx-right-col). */
.ctr-pilo-wrapper { padding: 20px 0 0 0; }
.ctr-pilo-scrollable { overflow: visible; }

/* ═══════════════ BARE CARD pattern ═══════════════ */
.ctr-pilo-bare-card { margin-bottom: 24px; }
.ctr-pilo-bare-card.is-closed { opacity: 0.7; }
/* Variante "framed" — calque .ctx-info-card de l'onglet Contexte :
   bord gauche + bas gris clair, haut + droite transparents, padding intérieur. */
.ctr-pilo-bare-card-framed { border: 1px solid transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; border-radius: var(--r-lg, 10px); padding: 0 16px 14px; }
/* Distinction colonne droite Pilotage : fond gris très léger sur Validation + Suivi financier
   (2026-06-09 — calque parti pris .ctx-right-col). */
.ctr-pilo-col-right .ctr-pilo-bare-card-framed { background: #fcfcfd; }
.ctr-pilo-bare-card-framed .ctr-pilo-bare-head { padding-top: 8px; }
.ctr-pilo-bare-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid rgba(45,62,80,0.22); margin-bottom: 6px; min-height: 48px; box-sizing: border-box; }
.ctr-pilo-bare-head .ctx-icon-box-sm { color: var(--ctx-teal, #0d9488); font-size: 0.9rem; width: 18px; flex-shrink: 0; }
.ctr-pilo-bare-head .ctx-card-title { font-size: 0.85rem; font-weight: 500; color: var(--ctx-text-dark, #2D3E50); letter-spacing: normal; text-transform: none; }
/* Dans l'onglet Contexte, les cartes partagees (Chronologie/Engagements) alignent leur titre sur les .ctx-info-card (0.80rem) - 2026-07-19. Pilotage garde 0.85rem. */
.ctx-left-col .ctr-pilo-bare-head .ctx-card-title { font-size: 0.80rem; }
.ctr-pilo-bare-head-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ctr-pilo-bare-body { padding: 0; }
.ctr-pilo-bare-sub { font-size: 0.78rem; color: #6b7a8d; margin-top: 2px; }

/* 2026-06-10 — .ctr-pilo-icon-btn retiré (étape 5h cleanup). Le seul usage était le bouton
   "Historique" Suivi financier, remplacé par .ctr-tao-history-btn dans le même fichier. */

/* 2026-06-10 — Chantier perf "Filtrage client-side tabs Contrats" reverté intégralement
   (multiples bugs structurels — voir doc session). Retour au pattern server-side reload. */

/* ═══════════════ 1. ROW TOP : VERDICT + VALIDATION ═══════════════ */
.ctr-pilo-row-top { display: grid; grid-template-columns: 2.2fr 1fr; gap: 18px; margin-bottom: 12px; align-items: start; }
@media (max-width: 900px) { .ctr-pilo-row-top { grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; } }

/* Verdict pleine largeur (refonte 2026-06-09) — passe AVANT la row, aligné horizontalement
   sur les cards de l'onglet Contexte (40px gauche, 24px droite). */
.ctr-pilo-verdict-bar-full { margin: 0 24px 14px 40px; }

/* Verdict placé en tête de la colonne gauche (refonte 2026-06-09) — pas de marge horizontale
   car le col-scroll gère le padding. Marge basse pour aérer avec la card Chronologie. */
.ctr-pilo-verdict-bar-incol { margin-bottom: 14px; align-items: flex-start; padding: 12px 16px; }
.ctr-pilo-verdict-bar-incol .ctr-pilo-verdict-bar-icon { flex-shrink: 0; }
.ctr-pilo-verdict-bar-incol .ctr-pilo-verdict-bar-content { min-width: 0; flex: 1 1 auto; }
.ctr-pilo-verdict-bar-incol .ctr-pilo-verdict-bar-alerts { margin-top: 6px; }
.ctr-pilo-verdict-bar-incol .ctr-pilo-verdict-alert { white-space: normal; line-height: 1.35; }

/* Row principale 60/40 (calque exact .ctx-left-col 60% / .ctx-right-col 40%). Pas de flex:1 :
   la hauteur des colonnes est posée par JS, le grid stretch naturellement à cette hauteur. */
.ctr-pilo-row-main { display: grid; grid-template-columns: 60% 40%; gap: 0; align-items: stretch; }
@media (max-width: 900px) { .ctr-pilo-row-main { grid-template-columns: 1fr; gap: 14px; } }

/* Colonnes : flex column + overflow hidden (calque .ctx-left-col / .ctx-right-col). Le padding
   horizontal est porté par le .ctr-pilo-col-scroll interne pour aligner sur Contexte. */
.ctr-pilo-col-left { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.ctr-pilo-col-right { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* Scrollables internes (calque .ctx-left-col .container-scrollable / .ctx-right-scrollable).
   Paddings 40/8 (gauche) et 8/24 (droite) — calque Contexte. gap entre cards repris ici. */
.ctr-pilo-col-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; }
/* Gap visuel 40px entre cards de gauche et cards de droite (cf. Contexte) :
   left col padding-right 19px + right col padding-left 21px = 40px. */
.ctr-pilo-col-scroll-left { padding: 0 19px 16px 40px; }
.ctr-pilo-col-scroll-right { padding: 0 24px 16px 21px; }
@media (max-width: 900px) {
    .ctr-pilo-col-scroll-left, .ctr-pilo-col-scroll-right { padding: 0 16px 16px 16px; }
}

/* Scrollbar fine (calque .ctx-left-col .container-scrollable) — transparente au repos,
   gris #c4c9d0 quand .ctx-scrolling (scroll en cours) ou .ctx-scrollbar-hover (bord droit). */
.ctr-pilo-col-scroll::-webkit-scrollbar { width: 3px; background: transparent !important; }
.ctr-pilo-col-scroll::-webkit-scrollbar-track { background: transparent !important; border: none !important; }
.ctr-pilo-col-scroll::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; transition: background 0.25s; }
.ctr-pilo-col-scroll.ctx-scrolling::-webkit-scrollbar-thumb { background: #c4c9d0 !important; }
.ctr-pilo-col-scroll.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #dde1e6 !important; }
.ctr-pilo-col-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ctr-pilo-col-scroll.ctx-scrolling { scrollbar-color: #c4c9d0 transparent; }
.ctr-pilo-col-scroll.ctx-scrollbar-hover { scrollbar-color: #dde1e6 transparent; }

/* Spacing inter-card géré par le gap du col-scroll : neutralise le margin-bottom des bare-cards. */
.ctr-pilo-col-scroll > .ctr-pilo-bare-card { margin-bottom: 0; }

/* Suivi financier compact (refonte 2026-06-09) — indicateur visuel discret (ligne 3px)
   à la place de la barre épaisse + cursor. KPI principal "Commandé à ce jour" en tête,
   pourcentages compacts dessous, références Total / Min en bas séparées par un trait fin. */
.ctr-pilo-fin-compact { padding: 0; }

.ctr-pilo-fin-main { padding: 4px 0 10px; }
.ctr-pilo-fin-main-label { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #6b7a8d; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.ctr-pilo-fin-main-value { font-size: 1.1rem; font-weight: 600; color: #0d9488; line-height: 1.3; margin-top: 4px; }
.ctr-pilo-fin-meta { font-size: 0.7rem; color: #94a3b8; font-style: italic; margin-top: 4px; }

.ctr-pilo-fin-line { position: relative; height: 3px; background: #e2e8f0; border-radius: 2px; margin: 4px 0 10px; }
.ctr-pilo-fin-line-fill { height: 100%; background: linear-gradient(to right, #0d9488, #2dd4bf); border-radius: 2px; transition: width 0.3s; }
.ctr-pilo-fin-line-fill.is-warning { background: linear-gradient(to right, #f59e0b, #fbbf24); }
.ctr-pilo-fin-line-fill.is-critical { background: linear-gradient(to right, #dc2626, #ef4444); }
.ctr-pilo-fin-line-min { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #94a3b8; cursor: help; }

.ctr-pilo-fin-percents { display: flex; gap: 18px; margin-bottom: 10px; }
.ctr-pilo-fin-percent { display: flex; flex-direction: column; gap: 1px; }
.ctr-pilo-fin-percent-num { font-size: 0.92rem; font-weight: 600; color: #2D3E50; line-height: 1.2; }
.ctr-pilo-fin-percent-num.is-warning { color: #b45309; }
.ctr-pilo-fin-percent-num.is-critical { color: #991b1b; }
.ctr-pilo-fin-percent-label { font-size: 0.62rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; }

.ctr-pilo-fin-refs { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.ctr-pilo-fin-ref { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.74rem; }
.ctr-pilo-fin-ref-label { color: #6b7a8d; }
.ctr-pilo-fin-ref-value { color: #475569; font-weight: 500; }

/* Verdict bar */
.ctr-pilo-verdict-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: transparent; border-radius: 2px; border-left: 4px solid #94a3b8; }
.ctr-pilo-verdict-bar-ok { border-left-color: #10b981; }
.ctr-pilo-verdict-bar-warning { border-left-color: #f59e0b; }
.ctr-pilo-verdict-bar-critical { border-left-color: #ef4444; }
.ctr-pilo-verdict-bar-closed { border-left-color: #94a3b8; opacity: 0.85; }
.ctr-pilo-verdict-bar-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.ctr-pilo-verdict-bar-ok .ctr-pilo-verdict-bar-icon { background: #ecfdf5; color: #10b981; }
.ctr-pilo-verdict-bar-warning .ctr-pilo-verdict-bar-icon { background: #fef3c7; color: #f59e0b; }
.ctr-pilo-verdict-bar-critical .ctr-pilo-verdict-bar-icon { background: #fef2f2; color: #ef4444; }
.ctr-pilo-verdict-bar-closed .ctr-pilo-verdict-bar-icon { background: #f1f5f9; color: #94a3b8; }
.ctr-pilo-verdict-bar-content { flex: 1 1 auto; min-width: 0; }
.ctr-pilo-verdict-bar-title { font-size: 0.95rem; font-weight: 600; color: #1f2937; line-height: 1.3; }
.ctr-pilo-verdict-bar-sub { font-size: 0.8rem; color: #6b7a8d; line-height: 1.4; margin-top: 2px; }
.ctr-pilo-verdict-bar-alerts { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; }
.ctr-pilo-verdict-alert { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.ctr-pilo-verdict-alert > i { font-size: 0.7rem; }
.ctr-pilo-verdict-alert-warning { color: #b45309; }
.ctr-pilo-verdict-alert-warning > i { color: #f59e0b; }
.ctr-pilo-verdict-alert-critical { color: #991b1b; font-weight: 500; }
.ctr-pilo-verdict-alert-critical > i { color: #ef4444; }

/* Pill statut Validation (dans le bare-head) */
.ctr-pilo-status-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 0.74rem; font-weight: 500; border-radius: var(--r-sm, 3px); white-space: nowrap; }
.ctr-pilo-status-pill.is-muted { background: #f1f5f9; color: #6b7a8d; }
.ctr-pilo-status-pill.is-ok { background: #ecfdf5; color: #065f46; }
.ctr-pilo-status-pill.is-ok > i { color: #10b981; }
.ctr-pilo-status-pill.is-danger { background: #fef2f2; color: #991b1b; }
.ctr-pilo-status-pill.is-danger > i { color: #ef4444; }
.ctr-pilo-status-pill.is-pending { background: #fef3c7; color: #92400e; }

.ctr-pilo-mini-avatars { display: flex; align-items: center; padding: 6px 0 0; }
.ctr-pilo-mini-avatar { position: relative; margin-right: -8px; border: 2px solid #fff; border-radius: 50%; }
.ctr-pilo-mini-avatar .circled, .ctr-pilo-mini-avatar .md-circled { width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; }
.ctr-pilo-mini-avatar img { width: 26px !important; height: 26px !important; }
.ctr-pilo-mini-avatar .pt-1 { padding-top: 0 !important; font-size: 0.7rem !important; line-height: 26px !important; }
.ctr-pilo-mini-avatar.is-accepted { box-shadow: 0 0 0 2px #10b981; }
.ctr-pilo-mini-avatar.is-refused { box-shadow: 0 0 0 2px #ef4444; }
.ctr-pilo-mini-avatar.is-pending { box-shadow: 0 0 0 2px #f59e0b; }
.ctr-pilo-mini-avatar-more { width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; color: #6b7a8d; font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-left: 12px; }

.ctr-pilo-mini-link { font-size: 0.78rem; color: #0d9488; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ctr-pilo-mini-link:hover { color: #0f766e; text-decoration: underline; }

/* ═══════════════ 2. ROW TIMELINE (Chronologie 75% + Renouvellement 25%) ═══════════════ */
.ctr-pilo-row-timeline { display: grid; grid-template-columns: 75% 25%; gap: 20px; margin-bottom: 28px; align-items: start; }
@media (max-width: 900px) { .ctr-pilo-row-timeline { grid-template-columns: 1fr; gap: 14px; } }

/* Timeline wrap : padding pour ne pas couper les labels aux extrémités.
   margin-top élargi (2026-06-09) pour aérer entre le header et la frise dans la card framed. */
.ctr-pilo-timeline2-wrap { margin: 18px 0 0; padding: 0 12px; }
.ctr-pilo-timeline2 { position: relative; padding: 46px 0 54px; }
.ctr-pilo-timeline2.is-closed { opacity: 0.6; }
.ctr-pilo-timeline2-track { position: absolute; top: 56px; left: 0; right: 0; height: 4px; background: #e2e8f0; border-radius: 2px; }
.ctr-pilo-timeline2-progress { position: absolute; top: 56px; left: 0; height: 4px; background: linear-gradient(to right, #0d9488, #2dd4bf); border-radius: 2px; }

.ctr-pilo-timeline2-marker { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.ctr-pilo-timeline2-info { position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: center; min-width: 80px; line-height: 1.3; }
.ctr-pilo-timeline2-info-title { font-size: 0.65rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.4px; }
.ctr-pilo-timeline2-info-date { font-size: 0.78rem; font-weight: 500; color: #2D3E50; margin-top: 2px; white-space: nowrap; }
.ctr-pilo-timeline2-dot { position: absolute; top: 49px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #94a3b8; border: 3px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.ctr-pilo-timeline2-delta { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.7rem; color: #94a3b8; font-style: italic; line-height: 1.2; text-align: center; }
.ctr-pilo-timeline2-delta.is-warn { color: #b45309; font-weight: 500; }
.ctr-pilo-timeline2-delta.is-soon { color: #c2410c; font-weight: 600; font-style: normal; }
.ctr-pilo-timeline2-delta.is-overdue { color: #991b1b; font-weight: 700; font-style: normal; }

/* Marker SIGNATURE : aligné à GAUCHE (évite "GNATURE" coupé) */
.ctr-pilo-timeline2-marker.is-signature { left: 0; transform: none; align-items: flex-start; }
.ctr-pilo-timeline2-marker.is-signature .ctr-pilo-timeline2-info { left: 0; transform: none; text-align: left; }
.ctr-pilo-timeline2-marker.is-signature .ctr-pilo-timeline2-dot { left: 0; transform: none; }
.ctr-pilo-timeline2-marker.is-signature .ctr-pilo-timeline2-delta { left: 0; transform: none; text-align: left; }
.ctr-pilo-timeline2-marker.is-signature .ctr-pilo-timeline2-dot { background: #0d9488; box-shadow: 0 0 0 1px #0d9488; }

/* Marker DÉMARRAGE : positionné à 17%, centré */
.ctr-pilo-timeline2-marker.is-start .ctr-pilo-timeline2-dot { background: #14b8a6; box-shadow: 0 0 0 1px #14b8a6; }

/* Barres obliques // au milieu de la frise — indique que l'échelle de temps n'est pas linéaire
   (positions sont semi-fixes 0/26/74/100%). Masque la track par un fond blanc + deux traits
   gris clairs en diagonale. z-index 2 (au-dessus de la track, sous le curseur Aujourd'hui = 4). */
.ctr-pilo-timeline2-break { position: absolute; top: 48px; transform: translateX(-50%); width: 22px; height: 20px; background: #fff; z-index: 2; cursor: help; }
.ctr-pilo-timeline2-break::before, .ctr-pilo-timeline2-break::after { content: ''; position: absolute; top: 0; width: 2px; height: 20px; background: #cbd5e1; transform: rotate(22deg); transform-origin: center; }
.ctr-pilo-timeline2-break::before { left: 7px; }
.ctr-pilo-timeline2-break::after { left: 13px; }

/* Curseur AUJOURD'HUI : triangle sombre pointant vers la barre depuis le bas + tooltip */
.ctr-pilo-timeline2-today-cursor { position: absolute; top: 45px; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #1f2937; z-index: 4; cursor: help; }

/* Marker PRÉAVIS */
.ctr-pilo-timeline2-marker.is-notice .ctr-pilo-timeline2-dot { background: #fbbf24; box-shadow: 0 0 0 1px #f59e0b; }
.ctr-pilo-timeline2-marker.is-notice.is-warning .ctr-pilo-timeline2-dot { background: #f59e0b; box-shadow: 0 0 0 1px #d97706; }
.ctr-pilo-timeline2-marker.is-notice.is-critical .ctr-pilo-timeline2-dot { background: #ef4444; box-shadow: 0 0 0 1px #dc2626; }

/* Marker FIN : aligné à DROITE (évite chevauchement avec Préavis) */
.ctr-pilo-timeline2-marker.is-end { left: auto; right: 0; transform: none; align-items: flex-end; }
.ctr-pilo-timeline2-marker.is-end .ctr-pilo-timeline2-info { left: auto; right: 0; transform: none; text-align: right; }
.ctr-pilo-timeline2-marker.is-end .ctr-pilo-timeline2-dot { left: auto; right: 0; transform: none; }
.ctr-pilo-timeline2-marker.is-end .ctr-pilo-timeline2-delta { left: auto; right: 0; transform: none; text-align: right; }
.ctr-pilo-timeline2-marker.is-end .ctr-pilo-timeline2-dot { background: #475569; box-shadow: 0 0 0 1px #334155; }
.ctr-pilo-timeline2-marker.is-end.is-warning .ctr-pilo-timeline2-dot { background: #f59e0b; box-shadow: 0 0 0 1px #d97706; }
.ctr-pilo-timeline2-marker.is-end.is-critical .ctr-pilo-timeline2-dot { background: #ef4444; box-shadow: 0 0 0 1px #dc2626; }

/* Renouvellement compact (sans titre, sans bordure car dans la meme bare-card que la frise) */
.ctr-pilo-renewal-compact { display: flex; align-items: flex-start; gap: 10px; padding: 0 8px 8px 0; }
.ctr-pilo-renewal-compact.is-closed { opacity: 0.7; }

/* Renouvellement empilé sous la frise (refonte 2026-06-09) — trait sup gris clair pour séparer
   visuellement de la chronologie sans alourdir, padding équilibré. */
.ctr-pilo-renewal-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 4px 0 4px; border-top: 1px solid #f1f5f9; }
.ctr-pilo-renewal-row.is-closed { opacity: 0.7; }
.ctr-pilo-renewal-icon { flex: 0 0 auto; color: var(--ctx-teal, #0d9488); font-size: 0.9rem; line-height: 1.35; width: 18px; display: flex; justify-content: center; align-items: center; height: calc(0.82rem * 1.35); margin-top: 3px; }
.ctr-pilo-renewal-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ctr-pilo-renewal-mode { font-size: 0.82rem; font-weight: 500; color: #2D3E50; line-height: 1.35; }
.ctr-pilo-renewal-mode.is-muted { color: #cbd5e1; font-weight: 400; }
.ctr-pilo-renewal-line { font-size: 0.74rem; color: #6b7a8d; line-height: 1.3; }
.ctr-pilo-renewal-line strong { color: #2D3E50; font-weight: 600; }

/* Pied de frise Chronologie : Renouvellement (gauche) + Preavis en clair (droite) - 2026-07-19 */
.ctr-pilo-timeline-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 12px 4px 0 4px; border-top: 1px solid #f1f5f9; }
.ctr-pilo-timeline-footer.is-closed { opacity: 0.7; }
.ctr-pilo-timeline-footer .ctr-pilo-renewal-row { margin-top: 0; padding-top: 0; border-top: none; flex: 1 1 auto; }
.ctr-pilo-notice-block { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px; }
.ctr-pilo-notice-content { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; }
.ctr-pilo-notice-icon { flex: 0 0 auto; color: var(--ctx-teal, #0d9488); font-size: 0.9rem; width: 18px; display: flex; justify-content: center; align-items: center; height: calc(0.82rem * 1.35); margin-top: 3px; }
.ctr-pilo-notice-label { font-size: 0.82rem; font-weight: 500; color: #2D3E50; line-height: 1.35; }
.ctr-pilo-notice-value { font-size: 0.74rem; color: #6b7a8d; line-height: 1.3; }
.ctr-pilo-notice-value strong { color: #2D3E50; font-weight: 600; }
.ctr-pilo-notice-value.is-muted { color: #cbd5e1; font-style: italic; }

/* ═══════════════ 4. SUIVI FINANCIER : Montants 22% + Consommation 78% ═══════════════ */
.ctr-pilo-financial3 { padding: 0 4px; }
.ctr-pilo-financial3-prog { padding: 0; min-width: 0; }

.ctr-pilo-financial3-amounts { display: flex; flex-direction: column; gap: 14px; padding-right: 14px; border-right: 1px solid #f1f5f9; }
@media (max-width: 900px) { .ctr-pilo-financial3-amounts { padding-right: 0; border-right: none; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; } }

.ctr-pilo-financial3-stat { display: flex; flex-direction: column; gap: 2px; }
.ctr-pilo-financial3-stat-label { font-size: 0.7rem; color: #6b7a8d; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ctr-pilo-financial3-stat-value { font-size: 0.95rem; font-weight: 500; color: #1f2937; line-height: 1.25; }
.ctr-pilo-financial3-stat-value.is-muted { color: #cbd5e1; font-weight: 400; }

/* Progress widget (consommation commandée) — padding pour éviter coupures aux extrémités */

.ctr-pilo-prog { display: flex; flex-direction: column; gap: 10px; }

/* Labels haut de la barre : aligner avec position pour éviter chevauchement */
.ctr-pilo-prog-top-labels { position: relative; height: 38px; }
.ctr-pilo-prog-label-top { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.ctr-pilo-prog-label-top.is-cursor { z-index: 2; }
.ctr-pilo-prog-label-top.is-end { right: 0; left: auto !important; transform: none; align-items: flex-end; }
.ctr-pilo-prog-label-title { font-size: 0.65rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.ctr-pilo-prog-label-value { font-size: 0.78rem; font-weight: 500; color: #2D3E50; white-space: nowrap; margin-top: 2px; }
.ctr-pilo-prog-label-value.is-teal { color: #0d9488; font-weight: 600; }

/* Barre */
.ctr-pilo-prog-bar { position: relative; height: 10px; background: #f1f5f9; border-radius: 5px; overflow: visible; }
.ctr-pilo-prog-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(to right, #0d9488, #14b8a6); border-radius: 5px; transition: width 0.4s ease; }
.ctr-pilo-prog-bar-fill.is-warning { background: linear-gradient(to right, #f59e0b, #fbbf24); }
.ctr-pilo-prog-bar-fill.is-critical { background: linear-gradient(to right, #ef4444, #f87171); }
.ctr-pilo-prog-min-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #94a3b8; transform: translateX(-1px); border-radius: var(--r-sm, 3px); }
.ctr-pilo-prog-cursor { position: absolute; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.ctr-pilo-prog-cursor-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #0d9488; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.ctr-pilo-prog-bar-fill.is-warning ~ .ctr-pilo-prog-cursor .ctr-pilo-prog-cursor-dot { border-color: #f59e0b; }
.ctr-pilo-prog-bar-fill.is-critical ~ .ctr-pilo-prog-cursor .ctr-pilo-prog-cursor-dot { border-color: #ef4444; }

/* Bottom : bloc Commande a ce jour positionne sous le curseur (titre + montant + pourcentages empiles) */
.ctr-pilo-prog-bottom { padding-top: 8px; }
.ctr-pilo-prog-bottom-cursor-row { position: relative; height: 58px; }
.ctr-pilo-prog-bottom-cursor { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.25; white-space: nowrap; }
.ctr-pilo-prog-bottom-percents { display: flex; gap: 14px; flex-wrap: nowrap; margin-top: 4px; justify-content: center; }
.ctr-pilo-prog-percent-item { display: flex; align-items: baseline; gap: 4px; }
.ctr-pilo-prog-percent-num { font-size: 0.85rem; font-weight: 600; color: #0d9488; }
.ctr-pilo-prog-percent-num.is-warning { color: #f59e0b; }
.ctr-pilo-prog-percent-num.is-critical { color: #ef4444; }
.ctr-pilo-prog-percent-label { font-size: 0.72rem; color: #6b7a8d; }
.ctr-pilo-prog-bottom-meta { font-size: 0.7rem; color: #94a3b8; margin-top: 6px; }

.ctr-pilo-prog-empty { display: flex; align-items: center; gap: 8px; padding: 24px; background: #fafbfc; border: 1px dashed #e2e8f0; border-radius: var(--r-lg, 10px); color: #6b7a8d; font-size: 0.82rem; }
.ctr-pilo-prog-empty > i { color: #94a3b8; }
.ctr-pilo-text-link { color: #0d9488; font-weight: 500; text-decoration: underline; font-size: 0.8rem; }
.ctr-pilo-text-link:hover { color: #0f766e; text-decoration: underline; }

/* ═══════════════ 5. ENGAGEMENT (Plafond + Autres engagements) ═══════════════ */
.ctr-pilo-engagement-grid { display: grid; grid-template-columns: 22% 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .ctr-pilo-engagement-grid { grid-template-columns: 1fr; gap: 14px; } }
.ctr-pilo-engagement-item { display: flex; flex-direction: column; gap: 2px; }
.ctr-pilo-engagement-item-wide { padding-left: 14px; border-left: 1px solid #f1f5f9; }
@media (max-width: 900px) { .ctr-pilo-engagement-item-wide { padding-left: 0; border-left: none; padding-top: 10px; border-top: 1px solid #f1f5f9; } }
/* 2026-09-22 (retour préprod) : sans plafond de responsabilité, « Autres engagements structurants » tombait seul dans la 1re colonne
   (22 %) de la grille → texte en colonne étroite. Seul item → toute la largeur, sans le filet gauche. */
.ctr-pilo-engagement-item-wide:first-child { grid-column: 1 / -1; padding-left: 0; border-left: none; }
.ctr-pilo-engagement-label { font-size: 0.7rem; color: #6b7a8d; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ctr-pilo-engagement-value { font-size: 0.95rem; font-weight: 500; color: #1f2937; line-height: 1.25; }
.ctr-pilo-engagement-text { font-size: 0.82rem; color: #475569; line-height: 1.5; white-space: pre-wrap; }

/* ═══════════════ 6. ÉVALUATION placeholder ═══════════════ */

/* ═══════════════ STICKY ACTIONS BAR ═══════════════ */
.ctr-pilo-actions-bar { display: flex; align-items: center; gap: 8px; padding: 12px 24px 12px 40px; background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -2px 8px rgba(0,0,0,0.03); }
.ctr-pilo-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 0.8rem; font-weight: 500; border-radius: var(--r-md, 6px); text-decoration: none; transition: all 0.15s; border: 1px solid; }
.ctr-pilo-action > i { font-size: 0.78rem; }
.ctr-pilo-action-primary { background: #fff; border-color: #0d9488; color: #0d9488; }
.ctr-pilo-action-primary:hover, .ctr-pilo-action-primary:focus { background: #0d9488; color: #fff; text-decoration: none; }
.ctr-pilo-action-default { background: #fff; border-color: #e2e8f0; color: #475569; }
.ctr-pilo-action-default:hover, .ctr-pilo-action-default:focus { background: #f8fafc; border-color: #94a3b8; color: #1f2937; text-decoration: none; }
.ctr-pilo-action-danger { background: #fff; border-color: #fecaca; color: #b91c1c; margin-left: auto; }
.ctr-pilo-action-danger:hover, .ctr-pilo-action-danger:focus { background: #fef2f2; border-color: #ef4444; color: #991b1b; text-decoration: none; }

@media (max-width: 576px) {
    .ctr-pilo-wrapper { padding: 14px 16px 0 16px; }
    .ctr-pilo-actions-bar { padding: 10px 16px; flex-wrap: wrap; }
    .ctr-pilo-action-danger { margin-left: 0; }
}
/* Bouton compact contour teal (pattern unifié pour CTA secondaires Pilotage) */
.ctr-pilo-btn-outline-teal { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.78rem; font-weight: 500; color: #0d9488; background: transparent; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); text-decoration: none; transition: all 0.15s; white-space: nowrap; }
.ctr-pilo-btn-outline-teal:hover, .ctr-pilo-btn-outline-teal:focus { background: #0d9488; color: #fff; text-decoration: none; }
.ctr-pilo-btn-outline-teal > i { font-size: 0.72rem; }
.ctr-pilo-validation-cta { display: flex; justify-content: flex-end; padding-top: 4px; }

/* Petit bouton crayon (contour + icone teal > fond teal + icone blanche au hover, calque sur .ctr-pilo-btn-outline-teal) */
.ctr-pilo-edit-pencil { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-sm, 3px); color: #0d9488; background: transparent; border: 1px solid #0d9488; text-decoration: none; transition: all 0.15s; }
.ctr-pilo-edit-pencil:hover, .ctr-pilo-edit-pencil:focus { background: #0d9488; color: #fff; border-color: #0d9488; text-decoration: none; }
.ctr-pilo-edit-pencil > i { font-size: 0.62rem; }

/* Ligne titre + bouton crayon inline (utilise dans le bloc Commande a ce jour sous le curseur) */
.ctr-pilo-prog-label-title-row { display: inline-flex; align-items: center; gap: 6px; }

/* Meta inline (dernière maj dans le head Suivi financier) */
.ctr-pilo-meta-inline { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; margin-right: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER CONTRAT — shell (étape 4 chantier refonte module Contrats, 2026-06-07).
   Pattern jumeau de .drawer-project. Valeurs identiques pour le shell
   (header navy, body blanc scrollable, footer light, template-band duplication).
   Body-specific .drw-ctr-* arrivent en Phase 2 (champs du form).
   ═══════════════════════════════════════════════════════════════════════════ */

.drawer-contract { position: fixed; top: 0; right: calc(-1 * var(--sp-w)); bottom: 0; width: var(--sp-w); background: #fff; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.18); transition: right 0.3s ease; z-index: 1060; }
.drawer-contract.open { right: 0; }

.drawer-contract .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px 12px; flex-shrink: 0; background: #2D3E50; border-bottom: 1px solid rgba(0,0,0,0.15); position: relative; z-index: 6; }
.drawer-contract .drawer-header h1, .drawer-contract .drawer-header h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--sp-w) - 80px); }

.drawer-contract .close-drawer { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: rgba(255,255,255,0.55); opacity: 1; padding: 0 0 0 12px; flex-shrink: 0; }
.drawer-contract .close-drawer:hover { color: #fff; }

.drawer-contract > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.drawer-contract .drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 0 0 0; background: #fff; }
.drawer-contract .drawer-body::-webkit-scrollbar { width: 4px; background: transparent; }
.drawer-contract .drawer-body::-webkit-scrollbar-track { background: transparent; border: none; }
.drawer-contract .drawer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.drawer-contract .drawer-body.ctx-scrolling::-webkit-scrollbar-thumb, .drawer-contract .drawer-body.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
.drawer-contract .drawer-body::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }
.drawer-contract .drawer-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.drawer-contract .drawer-body.ctx-scrolling, .drawer-contract .drawer-body.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }

.drawer-contract .drawer-footer { padding: 12px 16px; border-top: 1px solid rgba(45,62,80,0.15); background: #fff; flex-shrink: 0; }
.drawer-contract .drawer-footer .btn { border-radius: var(--r-md, 6px); }

.drawer-contract .btn-navy { background-color: #0d9488; border-color: #0d9488; color: #fff; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); font-weight: 500; }
.drawer-contract .btn-navy:hover, .drawer-contract .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }
.drawer-contract .btn-cancel { border: 1px solid rgba(45,62,80,0.28); color: #415873; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); font-weight: 500; background: #fff; }
.drawer-contract .btn-cancel:hover { background-color: #f8fafb; border-color: rgba(45,62,80,0.5); color: #2D3E50; }

.drawer-contract .container-modal-scrollable { height: auto !important; overflow: visible !important; }

.drawer-contract .drawer-template-band { background: rgba(45,62,80,0.04); border-bottom: 1px solid rgba(45,62,80,0.1); padding: 8px 16px; display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.drawer-contract .drawer-template-band .bootstrap-select { width: 100% !important; background: transparent !important; }
.drawer-contract .drawer-template-band .bootstrap-select > .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(45,62,80,0.04) !important; border: 1px solid rgba(45,62,80,0.15) !important; border-bottom: 1px solid rgba(45,62,80,0.15) !important; color: #4b5563 !important; box-shadow: none !important; outline: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.drawer-contract .drawer-template-band:hover .bootstrap-select > .btn, .drawer-contract .drawer-template-band .bootstrap-select > .btn:focus, .drawer-contract .drawer-template-band .bootstrap-select.show > .btn { background: rgba(13,148,136,0.13) !important; border-color: rgba(13,148,136,0.45) !important; border-bottom-color: rgba(13,148,136,0.45) !important; color: #0d9488 !important; }

/* Placeholder Phase 1 — body de validation visuelle avant injection des champs en Phase 2 */
.drw-ctr-phase1-placeholder { padding: 32px 16px; color: #94a3b8; font-style: italic; text-align: center; font-size: 0.85rem; line-height: 1.5; }
.drw-ctr-phase1-placeholder i { display: block; font-size: 2rem; margin-bottom: 12px; color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER CONTRAT — body (.drw-ctr-*) Phase 2a-i étape 4 (2026-06-07).
   Mirror du body drawer Projet .drw-prj-*. Champs : nom centré, owner inline,
   labels uppercase, dates 2 cols, sub-titles, err-inline. Multi-tags en Phase 2a-ii.
   ═══════════════════════════════════════════════════════════════════════════ */

.drw-ctr-body { padding: 14px 22px 40px; }

/* Champ nom du contrat — centré, gros placeholder */
.drw-ctr-name-field input { width: 100%; padding: 12px 18px; border: 1px solid rgba(45,62,80,0.18); border-radius: var(--r-md, 6px); font-size: 1.1rem; font-weight: 500; text-align: center; color: #2D3E50; background: rgba(45,62,80,0.02); transition: border-color 0.2s; }
/* Champs dates (effet/signature/fin) alignés à gauche (override .datetime-picker global centré, app.css) — 2026-06-21 */
.drawer-contract .drw-ctr-field .datetime-picker { text-align: left !important; }
/* Champs Nom (titres) : underline seul, pas de trait gauche (calque Nom entreprise) — 2026-06-21 */
.drawer-project .drw-prj-name-field input, .drawer-contract .drw-ctr-name-field input { border-left-color: transparent !important; }
/* Hover/focus : soulignement teal (le border-bottom !important du style titre bloque sinon le hover générique) */
.drawer-project .drw-prj-name-field input:hover, .drawer-project .drw-prj-name-field input:focus,
.drawer-project .item-edit-title:hover, .drawer-project .item-edit-title:focus,
.drawer-contract .drw-ctr-name-field input:hover, .drawer-contract .drw-ctr-name-field input:focus,
.drawer-contract .item-edit-title:hover, .drawer-contract .item-edit-title:focus { border-bottom-color: #0d9488 !important; }
.drw-ctr-name-field input::placeholder { color: rgba(45,62,80,0.4); font-weight: 400; }
.drw-ctr-name-field input:focus { outline: none; border-color: rgba(13,148,136,0.55); background: #fff; }
.drw-ctr-name-field.has-error input { border-color: #ef4444; }

/* Owner / Équipe inline (display) + crayon édition à droite */
.drw-ctr-owner-inline { display: flex; align-items: center; gap: 6px; color: #6b7a8d; font-size: 0.82rem; padding: 4px 2px; }
.drw-ctr-owner-label { color: #6b7a8d; }
.drw-ctr-owner-value { color: #2D3E50; font-weight: 500; }
.drw-ctr-owner-sep { color: #cbd5e1; margin: 0 4px; }
.drw-ctr-owner-edit-icon { margin-left: auto; color: #6b7a8d; font-size: 0.8rem; padding: 4px 6px; border-radius: var(--r-md, 6px); transition: background 0.15s, color 0.15s; }
.drw-ctr-owner-edit-icon:hover, .drw-ctr-owner-edit-icon:focus { background: #f0fafa; color: #0d9488; text-decoration: none; }

/* Mode édition owner : 2 selectpickers user + dept inline */
.drw-ctr-owner-fields-row { display: flex; gap: 8px; }
.drw-ctr-owner-field { flex: 1; min-width: 0; }
.drw-ctr-owner-field .form-group { margin-bottom: 0; }

/* Label de champ générique (au-dessus du widget) */
.drw-ctr-field-label { font-size: 0.7rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.drw-ctr-field-label.drw-ctr-label-required, label.drw-ctr-label-required { color: #2D3E50 !important; }
.drw-ctr-field-label .text-danger, label .text-danger { margin-left: 3px; font-weight: 600; }

/* Sub-section title (Fournisseur, Renouvellement, Montants) */
.drw-ctr-subtitle { font-size: 0.78rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(13,148,136,0.2); }

/* Champ avec erreur : encadré rouge sur le widget */
.drw-ctr-field.has-error input, .drw-ctr-field.has-error select, .drw-ctr-field.has-error textarea, .drw-ctr-field.has-error .bootstrap-select > .btn { border-color: #ef4444 !important; }
.drw-ctr-field.has-error .drw-ctr-field-label { color: #ef4444 !important; }
.drw-ctr-err-inline { color: #ef4444; font-size: 0.74rem; margin-top: 4px; line-height: 1.3; }

/* Form group / form-row reset propre dans le drawer (calque Projet) */
.drawer-contract .form-group, .drawer-contract .form-group.row, .drawer-contract fieldset.form-group { margin-bottom: 0; }
.drawer-contract .form-group > label, .drawer-contract .form-group > legend, .drawer-contract .form-group.row > label, .drawer-contract .form-group.row > legend, .drawer-contract fieldset.form-group > legend { font-size: 0.7rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; padding: 0; line-height: 1.3; }
.drawer-contract .form-group > div[class*="col-"], .drawer-contract .form-group.row > div[class*="col-"], .drawer-contract fieldset.form-group > div[class*="col-"] { padding: 0; flex: 1 1 100%; max-width: 100%; }
.drawer-contract .drw-ctr-body .row { margin-left: 0 !important; margin-right: 0 !important; }
.drawer-contract .drw-ctr-body [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.drawer-contract .drw-ctr-body .row.mb-3 > .col-6:first-child { padding-right: 6px !important; }
.drawer-contract .drw-ctr-body .row.mb-3 > .col-6:last-child { padding-left: 6px !important; }

/* Inputs / selectpicker / datepicker uniformisés dans le drawer contrat */
.drawer-contract .form-control, .drawer-contract input[type="text"], .drawer-contract input[type="number"], .drawer-contract textarea { font-size: 0.85rem; padding: 6px 10px; border-radius: var(--r-md, 6px); border: 1px solid rgba(45,62,80,0.18); }
.drawer-contract .form-control:focus { border-color: rgba(13,148,136,0.55); box-shadow: none; outline: none; }
.drawer-contract .bootstrap-select > .btn { background: #fff !important; border: 1px solid rgba(45,62,80,0.18) !important; box-shadow: none !important; outline: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER CONTRAT — body mirror exact .drw-prj-* (Phase 2a-i étape 4 fix 2026-06-07).
   Override des règles préliminaires avec valeurs strictement alignées sur drawer Projet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Corps (alignement padding header→first field + spacing entre champs).
   padding-bottom 40px : garantit un espace minimum entre le dernier champ et les barres sticky en bas. */
.drw-ctr-body { padding: 12px 16px 40px; }

/* Reset des marges col/row hérités Bootstrap */
.drawer-contract .form-group, .drawer-contract .form-group.row, .drawer-contract fieldset.form-group { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0; min-width: 0; margin-bottom: 0; }
.drawer-contract .form-group > label, .drawer-contract .form-group > legend, .drawer-contract .form-group.row > label, .drawer-contract .form-group.row > legend, .drawer-contract fieldset.form-group > legend { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 0 4px 0 !important; margin: 0 !important; float: none; display: block; font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; }
.drawer-contract .form-group > div[class*="col-"], .drawer-contract .form-group.row > div[class*="col-"], .drawer-contract fieldset.form-group > div[class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.drawer-contract .drw-ctr-body .row { margin-left: 0 !important; margin-right: 0 !important; }
.drawer-contract .drw-ctr-body [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* Row dates 2 cols (Signataire/Signature, Effet/Fin, Durée/Préavis) — gap entre les colonnes */
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 { display: flex !important; gap: 8px !important; margin: 0 !important; }
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 { flex: 1 1 0 !important; max-width: none !important; padding: 0 !important; }
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > input, .drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 .form-control { width: 100% !important; }

/* Champs uniformes (form-control + bootstrap-select même bordure, sans double encadré) */
.drawer-contract .form-control { border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); font-size: 0.84rem; padding: 0.32rem 0.6rem; }
.drawer-contract .form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.drawer-contract .bootstrap-select > .btn { border: 1px solid #dde1e7 !important; border-radius: var(--r-md, 6px)!important; font-size: 0.84rem !important; background: #fff !important; box-shadow: none !important; outline: none !important; }
.drawer-contract .bootstrap-select > .btn:focus, .drawer-contract .bootstrap-select.show > .btn { border-color: #0d9488 !important; }
/* Bootstrap Select copie .form-control sur le wrapper div → on retire sa bordure (FIX double encadré) */
.drawer-contract .bootstrap-select.form-control { border: none !important; padding: 0 !important; box-shadow: none !important; }
.drawer-contract .bootstrap-select > select.form-control { border: none !important; box-shadow: none !important; }
.drawer-contract .input-group .form-control { border-radius: var(--r-md, 6px)!important; }
.drawer-contract .bootstrap-select { width: 100% !important; }

/* Spacing uniforme entre les blocs via flex gap (calque Projet) */
.drawer-contract #main-content-edition { display: flex !important; flex-direction: column !important; gap: 18px !important; }
.drawer-contract #main-content-edition > * { margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0; }
.drw-ctr-body > div, .drw-ctr-body .mb-3, .drw-ctr-body .mb-2 { margin-bottom: 0 !important; }
.drawer-contract #main-content-edition .form-group { padding-top: 0 !important; }

/* Nom du contrat — mirror exact item-edit-title Projet */
.drawer-contract .item-edit-title { font-size: 1.05rem !important; font-weight: 400 !important; border-bottom: 1px solid #dde1e7 !important; padding: 6px 4px !important; color: #2D3E50; background: transparent; border-top: none; border-left: none; border-right: none; border-radius: 0; }
.drawer-contract .item-edit-title::placeholder { font-weight: 300 !important; color: #94a3b8 !important; font-size: 0.95rem; }
.drawer-contract .item-edit-title::-webkit-input-placeholder { font-weight: 300 !important; }
.drawer-contract .item-edit-title::-moz-placeholder { font-weight: 300 !important; opacity: 1; }
.drawer-contract .item-edit-title:-ms-input-placeholder { font-weight: 300 !important; }
.drw-ctr-name-field.has-error input, .drw-ctr-name-field.has-error .form-control { border-bottom-color: #ef4444 !important; }

/* Owner inline (mirror exact .drw-prj-owner-inline) */
.drw-ctr-owner-inline { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px; width: 100%; font-size: 0.82rem; padding: 5px 0 7px; border-bottom: 1px solid #f0f4f8; }
.drawer-contract #main-content-edition > .drw-ctr-owner-inline { margin-top: -12px !important; }
.drw-ctr-owner-inline .drw-ctr-owner-edit-icon { margin-left: auto; }
.drw-ctr-owner-fields-row:not(.d-none) { display: flex !important; gap: 8px !important; }
.drw-ctr-owner-fields-row > .drw-ctr-owner-field { flex: 1 1 0 !important; min-width: 0 !important; }
.drw-ctr-owner-fields-row .bootstrap-select { width: 100% !important; }
.drw-ctr-owner-fields-row .bootstrap-select > .btn { color: #415873 !important; background: #fff !important; }
.drw-ctr-owner-fields-row .bootstrap-select > .btn .filter-option, .drw-ctr-owner-fields-row .bootstrap-select > .btn .bs-caret { color: #415873 !important; }
.drw-ctr-owner-label { color: #8fa1b3; font-size: 0.74rem; }
.drw-ctr-owner-value { color: #2D3E50; font-weight: 400; font-size: 0.78rem; }
.drw-ctr-owner-sep { color: #cbd5e1; font-size: 0.70rem; padding: 0 1px; }
.drw-ctr-owner-edit-icon { visibility: hidden; color: #9ca3af; font-size: 0.78rem; margin-left: 6px; padding: 2px 4px; text-decoration: none !important; transition: color 0.15s ease; background: transparent; border: none; }
.drw-ctr-owner-inline:hover .drw-ctr-owner-edit-icon { visibility: visible; }
.drw-ctr-owner-edit-icon:hover { color: #0d9488; text-decoration: none !important; background: transparent; border: none; }

/* Field label (override des règles préliminaires pour aligner sur Projet) */
.drw-ctr-field-label { display: block; font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; padding-bottom: 0; }
.drawer-contract .drw-ctr-label-required, .drawer-contract label.drw-ctr-label-required { color: #2D3E50 !important; }
.drawer-contract label .text-danger, .drawer-contract legend .text-danger, .drawer-contract .drw-ctr-field-label .text-danger { margin-left: 3px; }

/* Sub-section title teal underlined */
.drw-ctr-subtitle { font-size: 0.79rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; padding: 0 0 6px; border-bottom: 1px solid rgba(13,148,136,0.2); }

/* Radio buttons cohérents */
.drawer-contract .form-check { padding-left: 1.35rem; margin-bottom: 2px; cursor: pointer; }
.drawer-contract .form-check-input { cursor: pointer; }
.drawer-contract .form-check-label { font-size: 0.82rem; color: #415873; cursor: pointer; }
.drawer-contract input[type="radio"]:checked + .form-check-label { color: #2D3E50; font-weight: 500; }

/* Erreur inline */
.drw-ctr-err-inline { color: #ef4444; font-size: 0.74rem; line-height: 1.3; margin-top: 4px; }
.drw-ctr-field.has-error .drw-ctr-field-label { color: #ef4444 !important; }
.drw-ctr-field.has-error .form-control, .drw-ctr-field.has-error input, .drw-ctr-field.has-error .bootstrap-select > .btn { border-color: #ef4444 !important; }

/* Patch 2026-06-07 — alignement font-weight owner, suffixe unite, spacing band->body */

/* Force normal weight sur owner inline (override possibles rules globales sur span/spans nested) */
.drawer-contract .drw-ctr-owner-label,
.drawer-contract .drw-ctr-owner-label * { font-weight: 400 !important; }
.drawer-contract .drw-ctr-owner-value,
.drawer-contract .drw-ctr-owner-value * { font-weight: 400 !important; }

/* Reduit la marge sous le drawer-template-band pour rapprocher le name field (calque Projet) */
.drawer-contract .drawer-template-band { margin-bottom: 0 !important; }
.drawer-contract .drawer-body { padding-top: 0 !important; }

/* Input avec suffixe d unite (mois/jours) — composite inline flex */
.drw-ctr-input-with-unit { display: flex; align-items: stretch; gap: 6px; }
.drw-ctr-input-with-unit input,
.drw-ctr-input-with-unit .form-control { flex: 1 1 auto; min-width: 0; }
.drw-ctr-unit { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 6px; font-size: 0.78rem; color: #6b7a8d; background: rgba(45,62,80,0.04); border: 1px solid #dde1e7; border-radius: var(--r-sm, 3px); }

/* Patch 2026-06-07 #2 — radio teal, fix overflow unit, conditional required */

/* Radio teal (mirror Projet) */
.drawer-contract input[type="radio"] + .radio-label::before {
    background: #fff;
    border: 1px solid #cbd5e1;
    width: 14px; height: 14px;
    margin-right: 8px;
    top: 0.15em;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.drawer-contract input[type="radio"] + .radio-label:hover::before { border-color: #0d9488; }
.drawer-contract input[type="radio"]:checked + .radio-label::before {
    background-color: #0d9488;
    border-color: #0d9488;
    box-shadow: inset 0 0 0 3px #fff;
}
.drawer-contract input[type="radio"]:focus + .radio-label::before { border-color: #0d9488; }

/* Fix overflow unit (mois/jours) — l'input prend 60%, le suffixe 40% max, le tout dans 100% du col */
.drw-ctr-input-with-unit { width: 100%; max-width: 100%; }
.drw-ctr-input-with-unit input,
.drw-ctr-input-with-unit .form-control { min-width: 0; width: 100%; }
.drw-ctr-unit { white-space: nowrap; flex-shrink: 0; }

/* Marqueur (optionnel) sur label - calque .drw-prj-optional-mark */
.drw-ctr-optional-mark { color: #94a3b8; font-weight: 400; font-size: 0.66rem; text-transform: none; letter-spacing: 0; margin-left: 4px; }

/* Patch 2026-06-07 #3 — input-group avec suffixe unite (mois/jours) integre au champ.
   Pattern calque sur .ctr-tao-input-group (modale Mettre a jour les commandes). */
.drw-ctr-input-group { display: flex; width: 100%; max-width: 100%; flex-wrap: nowrap; }
.drw-ctr-input-group > .form-control,
.drw-ctr-input-group > input { flex: 1 1 auto; min-width: 0; border-right: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.drw-ctr-input-group > .input-group-append { display: flex; align-items: stretch; flex: 0 0 auto; }
.drw-ctr-input-group .input-group-text.drw-ctr-unit,
.drw-ctr-input-group .drw-ctr-unit { display: inline-flex; align-items: center; padding: 0 10px; background: #f8fafc !important; border: 1px solid #dde1e7 !important; border-left: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; color: #6b7a8d; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }

/* Patch 2026-06-07 #4 — override force le flex sizing dans input-group (battre le width:100% !important du col-6) */
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 .drw-ctr-input-group .form-control,
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 .drw-ctr-input-group input { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }

/* Patch 2026-06-07 #5 — empeche le wrap des rows 2 cols quand un col contient un input-group */
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 { flex-wrap: nowrap !important; }
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 { min-width: 0 !important; flex: 1 1 0 !important; max-width: 50% !important; }

/* Patch 2026-06-07 #6 — aligne les inputs des rows 2 cols quand un label tient sur 2 lignes */
/* Reserve hauteur 2 lignes au label (font-size 0.72rem * line-height 1.3 * 2 = ~1.87rem) */
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > .drw-ctr-field-label { min-height: calc(0.72rem * 1.3 * 2); line-height: 1.3; display: flex; align-items: flex-start; }

/* Patch 2026-06-07 #7 — aligne les inputs des cols 2-cols en bas (sans reserver hauteur fixe sur le label) */
/* Le col-6 devient flex column, le label prend sa hauteur naturelle, l'input-group/input se colle en bas via margin-top: auto */
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 { display: flex; flex-direction: column; }
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > .drw-ctr-field-label { min-height: 0; display: block; align-items: initial; }
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > .input-group,
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > .drw-ctr-input-group,
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > input,
.drawer-contract .drw-ctr-body > #main-content-edition > .row.mb-3 > .col-6 > .form-control { margin-top: auto; }

/* Patch 2026-06-07 #8 — Durée de reconduction grisé (au lieu de facultatif) quand mode = Sans reconduction / Durée indéterminée */
.drawer-contract .drw-ctr-field.is-disabled .drw-ctr-input-group,
.drawer-contract .drw-ctr-field.is-disabled input,
.drawer-contract .drw-ctr-field.is-disabled .form-control,
.drawer-contract .drw-ctr-field.is-disabled .input-group-text { background: #f1f5f9 !important; color: #94a3b8 !important; cursor: not-allowed; }
.drawer-contract .drw-ctr-field.is-disabled .drw-ctr-field-label { color: #cbd5e1 !important; }

/* Patch 2026-06-07 #9 — reduit le gap entre Fournisseur et Contrat parent */
.drw-ctr-supplier-block { display: flex; flex-direction: column; gap: 8px; }

/* Patch 2026-06-07 #10 — Sous-titre mixte : "FOURNISSEUR *" en gras + "et contrat parent" en italique leger */
.drw-ctr-subtitle-mixed .drw-ctr-subtitle-strong { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #0d9488; }
.drw-ctr-subtitle-mixed .drw-ctr-subtitle-soft { font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; color: #8fa1b3; font-size: 0.72rem; }
.drw-ctr-subtitle-mixed .text-danger { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER CONTRAT — Multi-tags Phase 2b-iv étape 4 (2026-06-07).
   Mirror .drw-prj-cat-* et .drw-prj-tag-*. Famille composer + Prescripteur/Groupe simple tag.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Composer Famille (Famille select + Sous-famille select + bouton +) */
.drw-ctr-cat-field { display: flex; flex-direction: column; gap: 6px; }
.drw-ctr-cat-composer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: stretch; }
.drw-ctr-cat-composer .bootstrap-select { width: 100% !important; }
.drw-ctr-cat-add { border: 1px solid #0d9488; background: #fff; color: #0d9488; padding: 0 12px; border-radius: var(--r-sm, 3px); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.drw-ctr-cat-add:hover:not(:disabled), .drw-ctr-cat-add:focus:not(:disabled) { background: #0d9488; color: #fff; }
.drw-ctr-cat-add:disabled { border-color: #e2e8f0; color: #cbd5e1; cursor: not-allowed; }
.drw-ctr-cat-help { font-size: 0.7rem; color: #94a3b8; font-style: italic; }

/* Liste des tags Famille (couples) */
.drw-ctr-cat-tags { display: flex; flex-direction: column; gap: 4px; }
.drw-ctr-cat-tags:empty { display: none; }
.drw-ctr-cat-tag { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #fff; border: 1px solid #dde1e7; border-radius: var(--r-sm, 3px); font-size: 0.82rem; cursor: move; }
.drw-ctr-cat-tag:hover { border-color: rgba(13,148,136,0.4); background: #f8fafb; }
.drw-ctr-cat-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drw-ctr-cat-tag-text { flex: 1 1 auto; min-width: 0; color: #2D3E50; font-weight: 500; }

/* Liste des tags simple (Prescripteur, Groupe) */
.drw-ctr-tag-field { display: flex; flex-direction: column; gap: 6px; }
.drw-ctr-tag-source .bootstrap-select { width: 100% !important; }
.drw-ctr-tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.drw-ctr-tag-list:empty { display: none; }
.drw-ctr-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: #fff; border: 1px solid #dde1e7; border-radius: var(--r-sm, 3px); font-size: 0.78rem; cursor: move; }
.drw-ctr-tag:hover { border-color: rgba(13,148,136,0.4); background: #f8fafb; }
.drw-ctr-tag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.drw-ctr-tag-text { color: #2D3E50; }

/* Badge Principal sur position=0 (Famille + Prescripteur + Groupe) */
.drw-ctr-tag-principal { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.6rem; font-weight: 600; color: #fff; background: #0d9488; border-radius: var(--r-sm, 3px); text-transform: uppercase; letter-spacing: 0.3px; }

/* Bouton X retirer */
.drw-ctr-tag-remove { color: #94a3b8; font-size: 1rem; line-height: 1; padding: 0 4px; text-decoration: none !important; cursor: pointer; transition: color 0.15s; margin-left: auto; }
.drw-ctr-tag-remove:hover, .drw-ctr-tag-remove:focus { color: #ef4444; text-decoration: none !important; }

/* Force masquage du CollectionType brut (<template> HTML5 inerte mais belt-and-suspenders) */
.drw-ctr-categories-collection,
.drw-ctr-ordering-departments-collection,
.drw-ctr-ordering-organizations-collection { display: none !important; }

/* Erreur sur multi-tags */
.drw-ctr-cat-field.has-error .drw-ctr-cat-composer .bootstrap-select > .btn,
.drw-ctr-cat-field.has-error .drw-ctr-cat-tags,
.drw-ctr-tag-field.has-error .bootstrap-select > .btn,
.drw-ctr-tag-field.has-error .drw-ctr-tag-list { border: 1px solid #ef4444 !important; }
.drw-ctr-cat-field.has-error .drw-ctr-field-label,
.drw-ctr-tag-field.has-error .drw-ctr-field-label { color: #ef4444 !important; }

/* Patch 2026-06-07 #11 — refonte tags multi-tags Contrat : pattern etoile + .main mirror Projet (au lieu du badge PRINCIPAL criard que j'avais initialement applique) */

/* Annule mes regles precedentes de tag pill rond classique */
.drw-ctr-cat-tag,
.drw-ctr-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e6f7f5; color: #0d9488;
    border: 1px solid rgba(13,148,136,0.25);
    border-radius: var(--r-sm, 3px);
    padding: 2px 4px 2px 6px;
    font-size: 0.74rem; line-height: 1.4;
    max-width: 100%;
    cursor: grab;
    user-select: none;
}
.drw-ctr-cat-tag.main,
.drw-ctr-tag.main { background: #d4f0ec; border-color: rgba(13,148,136,0.5); }
.drw-ctr-cat-tag.dragging,
.drw-ctr-tag.dragging { opacity: 0.4; cursor: grabbing; }
.drw-ctr-cat-tag.drag-over,
.drw-ctr-tag.drag-over { box-shadow: 0 0 0 2px #0d9488; }

.drw-ctr-cat-tag-dot,
.drw-ctr-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }

/* Etoile marqueur "principal" */
.drw-ctr-cat-tag-star,
.drw-ctr-tag-star { color: #0d9488; font-size: 0.72rem; line-height: 1; flex-shrink: 0; cursor: help; }

.drw-ctr-cat-tag-label,
.drw-ctr-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drw-ctr-cat-tag-remove,
.drw-ctr-tag-remove {
    color: #0d9488; opacity: 0.55;
    padding: 0 4px; margin-left: 2px;
    font-weight: 700; font-size: 1rem; line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
}
.drw-ctr-cat-tag-remove:hover, .drw-ctr-cat-tag-remove:focus,
.drw-ctr-tag-remove:hover, .drw-ctr-tag-remove:focus { opacity: 1; color: #ef4444; text-decoration: none !important; }

/* Help text dessous - avec etoile FA en debut (le HTML est dans i18n via |trans|raw) */
.drw-ctr-cat-help { margin-top: 6px; font-size: 0.68rem; color: #94a3b8; line-height: 1.4; display: none; }
.drw-ctr-cat-help i { color: inherit; font-size: 0.66rem; }


/* Patch 2026-06-07 #12 — fix wrap horizontal tags cat (j'avais mis flex column par erreur) */
.drw-ctr-cat-tags { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; }
.drw-ctr-cat-tags:not(:empty) { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER CONTRAT — Section collapsible "Informations complémentaires" (Phase 3b 2026-06-07).
   Mirror .drw-prj-ctx-* du drawer Projet (header + body + chevron animé).
   ═══════════════════════════════════════════════════════════════════════════ */

.drw-ctr-ctx-section { background: rgba(45,62,80,0.025); border-top: 1px solid rgba(45,62,80,0.08); border-bottom: 1px solid rgba(45,62,80,0.08); margin: 6px -16px 0 -16px; }
.drw-ctr-ctx-toggle { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; text-decoration: none !important; color: #0d9488; cursor: pointer; transition: background 0.15s; }
.drw-ctr-ctx-toggle:hover, .drw-ctr-ctx-toggle:focus { background: rgba(45,62,80,0.04); text-decoration: none !important; }
.drw-ctr-ctx-title { font-size: 0.79rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.04em; }
.drw-ctr-ctx-opt { font-size: 0.69rem; color: #8fa1b3; font-weight: 400; margin-left: 5px; text-transform: none; }
.drw-ctr-ctx-icon { font-size: 0.80rem; color: #0d9488; transition: transform 0.2s; }
.drw-ctr-ctx-body { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.drw-ctr-ctx-body > div { margin-bottom: 0 !important; }

/* Sous-titre "Montants et engagements" dans la section infos comp. (mirror .drw-ctr-subtitle existant mais ajustement margin) */
.drw-ctr-ctx-body .drw-ctr-subtitle { margin-top: 6px; margin-bottom: 4px; }

/* Patch 2026-06-07 #13 — width 100% des inputs/selects/Select2 dans la section collapsible Infos comp. */
.drawer-contract .drw-ctr-ctx-body .form-control,
.drawer-contract .drw-ctr-ctx-body input[type="text"],
.drawer-contract .drw-ctr-ctx-body input[type="number"],
.drawer-contract .drw-ctr-ctx-body textarea,
.drawer-contract .drw-ctr-ctx-body select,
.drawer-contract .drw-ctr-ctx-body .bootstrap-select,
.drawer-contract .drw-ctr-ctx-body .select2-container { width: 100% !important; }

/* Override pour la row 2-cols dans la section collapsible (Montant + Engagement, Plafond + vide) */
.drawer-contract .drw-ctr-ctx-body > .row.mb-3 { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; }
.drawer-contract .drw-ctr-ctx-body > .row.mb-3 > .col-6 { flex: 1 1 0 !important; max-width: 50% !important; min-width: 0 !important; padding: 0 !important; }
.drawer-contract .drw-ctr-ctx-body > .row.mb-3 > .col-6 .form-control,
.drawer-contract .drw-ctr-ctx-body > .row.mb-3 > .col-6 input,
.drawer-contract .drw-ctr-ctx-body > .row.mb-3 > .col-6 .bootstrap-select { width: 100% !important; }

/* Phase 4b — Rappels par mails : ligne inline [checkbox] Envoyer un email [input X] jours avant ... */
.drw-ctr-reminder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
.drw-ctr-reminder-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #0d9488; cursor: pointer; flex-shrink: 0; }
.drw-ctr-reminder-row .drw-ctr-reminder-label { margin: 0; font-size: 0.82rem; color: #2D3E50; cursor: pointer; }
.drw-ctr-reminder-row input[type="number"] { width: 50px !important; flex: 0 0 50px; text-align: center; padding: 4px 6px; font-size: 0.82rem; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); }
.drw-ctr-reminder-row .drw-ctr-reminder-suffix { font-size: 0.82rem; color: #6b7a8d; }

/* Phase 4c — Section Validation (toujours dépliée, pas collapsible) */
.drw-ctr-validation-section { margin: 8px 0 0 0; padding: 4px 0 8px; }
.drw-ctr-validation-title { margin-bottom: 10px !important; }
.drw-ctr-validation-modes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.drw-ctr-validation-mode-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; font-size: 0.82rem; color: #2D3E50; cursor: help; }
.drw-ctr-validation-mode-item input[type="radio"] { margin: 0; accent-color: #0d9488; cursor: pointer; }
.drw-ctr-validation-mode-item label { margin: 0; cursor: pointer; font-size: 0.82rem; color: #2D3E50; }
.drw-ctr-validation-mode-item input[type="radio"]:checked + label { color: #0d9488; font-weight: 600; }

/* Bouton "+ Ajouter valideur" (style outline teal compact) */
.drw-ctr-add-validator-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin-top: 8px; font-size: 0.78rem; font-weight: 500; color: #0d9488; background: transparent; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); text-decoration: none !important; transition: all 0.15s; }
.drw-ctr-add-validator-btn:hover, .drw-ctr-add-validator-btn:focus { background: #0d9488; color: #fff !important; text-decoration: none !important; }
.drw-ctr-add-validator-btn i { font-size: 0.7rem; }

/* Liste des validators : compact, row par valideur */
#contract_contractValidators { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 0; list-style: none; }
#contract_contractValidators .contract-validator-row,
#contract_contractValidators > div { display: flex; align-items: center; gap: 8px; padding: 0; }
#contract_contractValidators .selectpicker,
#contract_contractValidators .bootstrap-select { flex: 1 1 auto; width: auto !important; min-width: 0; }
#contract_contractValidators .btnDelete { border: none; background: transparent; color: #94a3b8; padding: 4px 8px; cursor: pointer; transition: color 0.15s; flex-shrink: 0; }
#contract_contractValidators .btnDelete:hover, #contract_contractValidators .btnDelete:focus { color: #ef4444; }

/* Phase 4c fix — fix layout radios mode validation + restyle bouton Ajouter valideur legacy */
.drawer-contract .drw-ctr-validation-modes { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; }
.drawer-contract .drw-ctr-validation-modes .drw-ctr-validation-mode-item { display: inline-flex; align-items: center; gap: 4px; }
.drawer-contract .drw-ctr-validation-modes .form-check { padding-left: 1.2rem; margin: 0; }
.drawer-contract .drw-ctr-validation-modes .form-check-label { font-size: 0.82rem; color: #2D3E50; cursor: pointer; }
.drawer-contract .drw-ctr-validation-modes input[type="radio"]:checked + .form-check-label { color: #0d9488; font-weight: 600; }

/* Restyle bouton "Ajouter valideur" injecte par le form theme legacy : passe du btn-primary bleu au look drawer outline teal */
.drawer-contract #validators-container .add_element_link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin-top: 4px; font-size: 0.78rem; font-weight: 500; color: #0d9488 !important; background: transparent !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; text-decoration: none !important; transition: all 0.15s; box-shadow: none !important; }
.drawer-contract #validators-container .add_element_link::before { content: '+ '; font-weight: 700; }
.drawer-contract #validators-container .add_element_link:hover, .drawer-contract #validators-container .add_element_link:focus { background: #0d9488 !important; color: #fff !important; }

/* Phase 4c fix #2 — radios visibles teal + espacement + reminder row sans wrap */

/* Radios mode validation : padding suffisant pour le radio en absolute + style natif teal */
.drawer-contract .drw-ctr-validation-modes .form-check { padding-left: 1.5rem !important; min-height: auto; margin: 0 !important; line-height: 1.5; }
.drawer-contract .drw-ctr-validation-modes .form-check-input { position: absolute; margin-left: -1.5rem; margin-top: 0.25rem; accent-color: #0d9488; cursor: pointer; width: 14px; height: 14px; }
.drawer-contract .drw-ctr-validation-modes .form-check-label { font-size: 0.82rem; color: #415873; cursor: pointer; padding-left: 0; }
.drawer-contract .drw-ctr-validation-modes input[type="radio"]:checked + .form-check-label { color: #0d9488; font-weight: 600; }

/* Espacement vertical entre validation-section et le reste */
.drawer-contract .drw-ctr-validation-section { margin: 16px 0 0 0; padding: 6px 0 12px; }
.drawer-contract .drw-ctr-validation-section .drw-ctr-field { margin-bottom: 14px !important; }

/* Reminder row : forcer nowrap, réduire police du suffixe pour tenir sur 1 ligne */
.drawer-contract .drw-ctr-reminder-row { flex-wrap: nowrap !important; white-space: nowrap; }
.drawer-contract .drw-ctr-reminder-row .drw-ctr-reminder-label,
.drawer-contract .drw-ctr-reminder-row .drw-ctr-reminder-suffix { font-size: 0.78rem; white-space: nowrap; }
.drawer-contract .drw-ctr-reminder-row input[type="number"] { flex: 0 0 48px; width: 48px !important; }

/* Phase 4c fix #3 — radios vertical (1 par ligne) + radios natifs bien visibles */
.drawer-contract .drw-ctr-validation-modes { display: flex !important; flex-direction: column !important; gap: 6px !important; align-items: flex-start; }
.drawer-contract .drw-ctr-validation-modes .form-check { padding-left: 1.5rem !important; min-height: auto; margin: 0 !important; line-height: 1.5; position: relative; }
.drawer-contract .drw-ctr-validation-modes .form-check-input { position: absolute !important; left: 0 !important; margin-left: 0 !important; margin-top: 0.3rem !important; accent-color: #0d9488; cursor: pointer; width: 14px !important; height: 14px !important; opacity: 1 !important; }
.drawer-contract .drw-ctr-validation-modes .form-check-label { font-size: 0.82rem; color: #415873; cursor: pointer; padding-left: 0; display: inline-flex; align-items: center; gap: 4px; }
.drawer-contract .drw-ctr-validation-modes input[type="radio"]:checked + .form-check-label { color: #0d9488; font-weight: 600; }

/* Phase 4c fix #4 — masque le radio natif sur les modes validation (le cercle custom ::before sur .radio-label suffit, mirror renewalCondition) */
.drawer-contract .drw-ctr-validation-modes input[type="radio"].form-check-input { opacity: 0 !important; position: absolute !important; width: 14px !important; height: 14px !important; left: 0 !important; margin: 0.25rem 0 0 0 !important; cursor: pointer; z-index: 1; }

/* Phase 4c fix #5 — modes validation horizontal avec wrap si pas la place */
.drawer-contract .drw-ctr-validation-modes { flex-direction: row !important; flex-wrap: wrap !important; gap: 12px 18px !important; align-items: center; }
.drawer-contract .drw-ctr-validation-modes .form-check { display: inline-flex; align-items: center; }

/* Phase 4c fix #6 — vertical (1 radio par ligne) ; annule le row du fix #5 */
.drawer-contract .drw-ctr-validation-modes { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; align-items: flex-start; }
.drawer-contract .drw-ctr-validation-modes .form-check { display: flex; align-items: center; width: auto; }

/* Phase 4c fix #7 — aérer mode validation, checkboxes teal/alignées, sous-titre Rappel */

/* Mode validation : plus d'espace entre les radios */
.drawer-contract .drw-ctr-validation-modes { gap: 10px !important; }

/* Checkboxes reminder : forcer teal + tailles + alignement vertical centré avec label/input */
.drawer-contract .drw-ctr-reminder-row { align-items: center !important; }
.drawer-contract .drw-ctr-reminder-row input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: #0d9488 !important; cursor: pointer; flex-shrink: 0; vertical-align: middle; }

/* Sous-titre "RAPPEL PAR MAILS" au-dessus de la ligne email rappel validation (calque .drw-ctr-field-label) */
.drawer-contract .drw-ctr-reminder-subtitle { margin-top: 6px; margin-bottom: 4px; }

/* Phase 4c fix #8 — clean up VALIDATEURS rows : retire les encadrés/bg, espacement compact, trash inline */
.drawer-contract #validators-container .contract-validator-row,
.drawer-contract #validators-container > div { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 4px 0 !important; box-shadow: none !important; }
.drawer-contract #validators-container .form-group { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.drawer-contract #validators-container .contract-validator-row { display: flex !important; align-items: center !important; gap: 6px !important; }
.drawer-contract #validators-container .handle { color: #cbd5e1; cursor: grab; padding: 0 4px; font-size: 0.9rem; flex-shrink: 0; }
.drawer-contract #validators-container .handle:hover { color: #0d9488; }
.drawer-contract #validators-container .bootstrap-select { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
.drawer-contract #validators-container .bootstrap-select > .btn { background: #fff !important; border: 1px solid #dde1e7 !important; color: #2D3E50 !important; box-shadow: none !important; }
.drawer-contract #validators-container .btnDelete { background: transparent !important; border: none !important; color: #94a3b8 !important; padding: 4px 6px !important; font-size: 0.85rem !important; cursor: pointer; flex-shrink: 0; }
.drawer-contract #validators-container .btnDelete:hover, .drawer-contract #validators-container .btnDelete:focus { color: #ef4444 !important; background: transparent !important; }

/* Phase 4c fix #9 — mode validation aéré + validators full width + trash hover + checkboxes teal alignées */

/* 1. Plus d'espace entre les 3 radios mode validation */
.drawer-contract .drw-ctr-validation-modes { gap: 16px !important; }

/* 2-3. Validators row : selectpicker full width + trash à droite (margin-left auto) + trash visible au hover */
.drawer-contract #validators-container { padding-right: 0; }
.drawer-contract #validators-container .contract-validator-row { gap: 8px !important; padding: 0 !important; }
.drawer-contract #validators-container .bootstrap-select { flex: 1 1 auto !important; width: auto !important; min-width: 0; max-width: none; }
.drawer-contract #validators-container .btnDelete { opacity: 0; transition: opacity 0.15s; margin-left: 0 !important; }
.drawer-contract #validators-container .contract-validator-row:hover .btnDelete,
.drawer-contract #validators-container .contract-validator-row:focus-within .btnDelete { opacity: 1; }

/* 4. Bouton "Ajouter valideur" rapproché de la dernière ligne */
.drawer-contract #validators-container .add_element_link { margin-top: 0 !important; }
.drawer-contract #validators-container .form-group.pt-2 { padding-top: 2px !important; margin-top: 2px !important; }

/* Encart info "destinataires des rappels" en tête du sheet Rappels (création + édition contrat) */
.drawer-contract .drw-ctr-sheet-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 12px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: var(--r-lg, 10px); font-size: 0.72rem; color: #475569; line-height: 1.45; }
.drawer-contract .drw-ctr-sheet-note i { color: #3b82f6; font-size: 0.82rem; margin-top: 1px; flex: 0 0 auto; }

/* 5. Checkboxes RAPPELS : override de l'orange #ff855e (app.css ligne 3543) → teal + alignement vertical centré */
.drawer-contract .drw-ctr-reminder-row .form-check input[type="checkbox"]:checked + label::before,
.drawer-contract .drw-ctr-reminder-row input[type="checkbox"]:checked + label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }

/* Alignement vertical du cercle (était top: -3px → met top centré) */
.drawer-contract .drw-ctr-reminder-row .form-check input[type="checkbox"] + label::before { top: 50% !important; transform: translateY(-50%); }

/* Le wrap .form-check du Symfony ajoute du padding-left:1.25rem qu'on ne veut pas pour aligner avec le reste */
.drawer-contract .drw-ctr-reminder-row .form-check { padding-left: 1.5rem; margin: 0; min-height: 0; display: inline-flex; align-items: center; flex-shrink: 0; }

/* Phase 4c fix #10 — cible la VRAIE structure des validators (inner .row dans .col-12) */
/* Structure réelle : .contract-validator-row.row > .col-12 > .row > [.col-1.handle, .col-6, .col-1]
   Les overrides précédents tapaient sur l'outer wrapper sans effet visible. */
.drawer-contract #validators-container .contract-validator-row > .col-12 { padding: 0 !important; flex: 1 1 100% !important; max-width: 100% !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; margin: 0 !important; gap: 6px !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > [class*="col-"] { padding: 0 !important; flex: 0 0 auto !important; max-width: none !important; width: auto !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-1.handle { flex: 0 0 auto !important; color: #cbd5e1; cursor: grab; padding: 0 2px !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-6 { flex: 1 1 auto !important; min-width: 0 !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-6 .input-group { padding-bottom: 0 !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-6 .bootstrap-select { width: 100% !important; flex: 1 1 auto !important; min-width: 0; max-width: none !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child { flex: 0 0 auto !important; margin-left: auto !important; padding: 0 !important; }
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child button,
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child .btnDelete,
.drawer-contract #validators-container .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child .open-delete-modal-button { background: transparent !important; border: none !important; color: #94a3b8 !important; padding: 4px 6px !important; font-size: 1rem !important; opacity: 0; transition: opacity 0.15s; }
.drawer-contract #validators-container .contract-validator-row:hover .col-1.pt-2:last-child button,
.drawer-contract #validators-container .contract-validator-row:focus-within .col-1.pt-2:last-child button,
.drawer-contract #validators-container .contract-validator-row:hover .col-1.pt-2:last-child .btnDelete,
.drawer-contract #validators-container .contract-validator-row:focus-within .col-1.pt-2:last-child .btnDelete,
.drawer-contract #validators-container .contract-validator-row:hover .col-1.pt-2:last-child .open-delete-modal-button,
.drawer-contract #validators-container .contract-validator-row:focus-within .col-1.pt-2:last-child .open-delete-modal-button { opacity: 1; }
.drawer-contract #validators-container .col-1.pt-2:last-child button:hover,
.drawer-contract #validators-container .col-1.pt-2:last-child .btnDelete:hover,
.drawer-contract #validators-container .col-1.pt-2:last-child .open-delete-modal-button:hover { color: #ef4444 !important; }

/* "+ Ajouter valideur" wrapper (généré par le form theme : .form-group.pt-2.row > .col-sm-12.px-0) — collé à la dernière ligne */
.drawer-contract #validators-container .form-group.pt-2.row { padding-top: 0 !important; margin-top: 4px !important; margin-bottom: 0 !important; }
.drawer-contract #validators-container .form-group.pt-2.row > .col-sm-12 { padding: 0 !important; }

/* Mode validation : aération radios (gap visible) — surcharge plus forte que .drw-ctr-validation-modes seul */
.drawer-contract .drw-ctr-validation-section .drw-ctr-validation-modes { gap: 22px !important; row-gap: 8px !important; }
.drawer-contract .drw-ctr-validation-section .drw-ctr-validation-modes .form-check { margin-right: 0 !important; }

/* Phase 4c fix #11 — corrige spécificité hover trash + resserre espaces verticaux section Validation */

/* HOVER trash : reprend EXACTEMENT la même chaîne de sélecteurs que la règle repos pour gagner en spécificité égale et écraser via ordre d'apparition */
.drawer-contract #validators-container .contract-validator-row:hover > .col-12 > .row > .col-1.pt-2:last-child button,
.drawer-contract #validators-container .contract-validator-row:focus-within > .col-12 > .row > .col-1.pt-2:last-child button,
.drawer-contract #validators-container .contract-validator-row:hover > .col-12 > .row > .col-1.pt-2:last-child .btnDelete,
.drawer-contract #validators-container .contract-validator-row:focus-within > .col-12 > .row > .col-1.pt-2:last-child .btnDelete,
.drawer-contract #validators-container .contract-validator-row:hover > .col-12 > .row > .col-1.pt-2:last-child .open-delete-modal-button,
.drawer-contract #validators-container .contract-validator-row:focus-within > .col-12 > .row > .col-1.pt-2:last-child .open-delete-modal-button { opacity: 1 !important; }
/* Hover de proximité : aussi quand on survole le container des validators */
.drawer-contract #validators-container:hover .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child button,
.drawer-contract #validators-container:hover .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child .btnDelete,
.drawer-contract #validators-container:hover .contract-validator-row > .col-12 > .row > .col-1.pt-2:last-child .open-delete-modal-button { opacity: 1 !important; }

/* Phase 4c fix #12 — rythme vertical Validation : sous-sections aérées, internes resserrées */
.drawer-contract .drw-ctr-validation-section { margin-top: 8px !important; padding: 4px 0 8px !important; }
.drawer-contract .drw-ctr-validation-title { margin-bottom: 14px !important; }

/* Mode validation : sous-section aérée des suivantes, radios écartés */
.drawer-contract .drw-ctr-validation-section .drw-ctr-field:has(.drw-ctr-validation-modes),
.drawer-contract .drw-ctr-validation-section .drw-ctr-field.drw-ctr-validation-mode-field { margin-bottom: 18px !important; }
.drawer-contract .drw-ctr-validation-section .drw-ctr-validation-modes { gap: 10px 22px !important; row-gap: 10px !important; }

/* Phase 4c fix #13 — la vraie cible : le wrapper interne #contract_validationMode généré par le form theme bootstrap_4 (choice_widget_expanded). Tous les gap/flex précédents étaient appliqués au parent qui n'avait qu'UN seul enfant (ce wrapper), donc invisible. */
.drawer-contract .drw-ctr-validation-modes > div[id$="validationMode"],
.drawer-contract .drw-ctr-validation-modes > div { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.drawer-contract .drw-ctr-validation-modes .form-check + .form-check { margin-top: 0 !important; }

/* Validateurs : label proche de sa liste, liste compacte, séparée du bloc Rappels */
.drawer-contract .drw-ctr-validation-section .drw-ctr-field-label { margin-bottom: 6px !important; }
.drawer-contract .drw-ctr-validation-section #validators-container { margin-top: 0 !important; margin-bottom: 18px !important; }
.drawer-contract .drw-ctr-validation-section #validators-container .form-group.pt-2.row { margin-top: 6px !important; padding-top: 0 !important; margin-bottom: 0 !important; }

/* Sous-titre RAPPELS PAR MAILS séparé du bouton Ajouter valideur */
.drawer-contract .drw-ctr-validation-section .drw-ctr-reminder-subtitle { margin-top: 4px !important; margin-bottom: 8px !important; }
.drawer-contract .drw-ctr-validation-section .drw-ctr-reminder-row { padding: 3px 0 !important; }

/* Checkmark ::after aligné avec le cercle ::before recentré (sinon FA reste inline en haut) */
.drawer-contract .drw-ctr-reminder-row .form-check input[type="checkbox"]:checked + label::after,
.drawer-contract .drw-ctr-reminder-row input[type="checkbox"]:checked + label::after,
.drawer-contract .drw-ctr-reminder-row .form-check input[type="checkbox"] + label:hover::after,
.drawer-contract .drw-ctr-reminder-row input[type="checkbox"] + label:hover::after { position: absolute !important; top: 50% !important; left: 0 !important; margin-left: -1.25rem !important; width: 17px !important; height: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 9px !important; transform: translateY(-50%) !important; padding: 0 !important; }
/* Couleur de la coche : blanche quand cochée, noire douce quand survol décoché */
.drawer-contract .drw-ctr-reminder-row .form-check input[type="checkbox"]:checked + label::after,
.drawer-contract .drw-ctr-reminder-row input[type="checkbox"]:checked + label::after { color: #fff !important; }
.drawer-contract .drw-ctr-reminder-row .form-check input[type="checkbox"]:not(:checked) + label:hover::after,
.drawer-contract .drw-ctr-reminder-row input[type="checkbox"]:not(:checked) + label:hover::after { color: #94a3b8 !important; }

/* Phase 4d (2026-06-08) — tiroirs annexes (Documents, Rappels) en sticky bas avec bottom-sheet glissant.
   Cf. docs/sessions/2026-06-08_refonte-contrats-etape4-drawer-bottom-sheets.md */
/* Refonte 2026-06-21 : sheet = overlay glissant positionné par rapport au <form> (les sheets sont
   hors .drawer-body) + voile gris + accordéon (case active masquée dans la grille 2×2). */
.drawer-contract > form { position: relative; }
/* Tray distinct de la zone blanche (gris + ombre vers le haut). position:static → les sheets absolues
   se calent sur le <form>, pas sur le tray. */
.drawer-contract .drw-ctr-sheets { position: static; flex-shrink: 0; background: #e2e8f0; border-top: 1px solid rgba(45,62,80,0.22); box-shadow: 0 -3px 12px rgba(45,62,80,0.11); }
/* Tray en colonne unique pleine largeur (2026-06-21 : ex-grille 2×2 → empilé, cohérent Entreprise/Projet) */
.drawer-contract .drw-ctr-sheet-bars { display: flex; flex-direction: column; background: transparent; }
.drawer-contract .drw-ctr-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 16px; height: 36px; width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(45,62,80,0.10); font-size: 0.78rem; font-weight: 500; color: #415873; cursor: pointer; transition: background 0.15s, color 0.15s; min-width: 0; }
.drawer-contract .drw-ctr-sheet-bar:last-child { border-bottom: none; }
.drawer-contract .drw-ctr-sheet-bar:hover, .drawer-contract .drw-ctr-sheet-bar:focus { background: rgba(45,62,80,0.04); color: #0d9488; outline: none; }
.drawer-contract .drw-ctr-sheet-bar.is-active { background: rgba(13,148,136,0.06); color: #0d9488; font-weight: 600; }
/* Accordéon : la barre dont la sheet est ouverte « monte » dans l'en-tête → retirée du tray
   (display:none → le tray rétrécit, pas de slot vide ; cohérent Entreprise/Projet). */
.drawer-contract.drw-ctr-has-open-sheet .drw-ctr-sheet-bar.is-active { display: none; }
.drawer-contract .drw-ctr-sheet-bar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; }
/* Chip compteur : "Aucun" gris quand vide, valeur teal quand rempli, border-radius 2px conforme design system */
.drawer-contract .drw-ctr-sheet-bar-chip { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.7rem; font-weight: 500; border-radius: var(--r-sm, 3px); white-space: nowrap; flex: 0 0 auto; line-height: 1.4; }
.drawer-contract .drw-ctr-sheet-bar-chip-empty { background: rgba(45,62,80,0.08); color: #6b7a8d; }
.drawer-contract .drw-ctr-sheet-bar-chip-filled { background: #e6f7f5; color: #0d9488; }
.drawer-contract .drw-ctr-sheet-bar-icon { font-size: 0.85rem; transition: transform 0.18s ease; color: #94a3b8; }
.drawer-contract .drw-ctr-sheet-bar:hover .drw-ctr-sheet-bar-icon, .drawer-contract .drw-ctr-sheet-bar.is-active .drw-ctr-sheet-bar-icon { color: #0d9488; }
.drawer-contract .drw-ctr-sheet-bar.is-active .drw-ctr-sheet-bar-icon { transform: rotate(180deg); }

/* Sheet = overlay absolu (relatif au <form>) ancré sous le Nom (--drw-ctr-sheet-top) et au-dessus
   du tray+footer (--drw-ctr-sheet-bottom). Slide-up via translateY. */
.drawer-contract .drw-ctr-sheet {
    position: absolute; left: 0; right: 0;
    top: var(--drw-ctr-sheet-top, 120px);
    bottom: var(--drw-ctr-sheet-bottom, 132px);
    display: flex; flex-direction: column;
    background: #fff; overflow: hidden;
    transform: translateY(110%); visibility: hidden;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
    border-top: 1px solid rgba(45,62,80,0.12);
    transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
    z-index: 5;
}
.drawer-contract .drw-ctr-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform 0.18s ease-out; }
/* En-tête = la case active « montée » en haut (teal clair, hauteur 36px, chevron de repli). */
.drawer-contract .drw-ctr-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; height: 36px; padding: 0 12px 0 22px; background: rgba(13,148,136,0.06); border-bottom: 1px solid rgba(13,148,136,0.18); cursor: pointer; }
.drawer-contract .drw-ctr-sheet-header-title { font-size: 0.72rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-contract .drw-ctr-sheet-close { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: #0d9488; cursor: pointer; transition: color 0.15s; }
.drawer-contract .drw-ctr-sheet-close .fa { font-size: 0.9rem; }
.drawer-contract .drw-ctr-sheet-close:hover, .drawer-contract .drw-ctr-sheet-close:focus { color: #0f766e; outline: none; }
.drawer-contract .drw-ctr-sheet-body { flex: 1 1 auto; min-height: 0; padding: 14px 22px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
.drawer-contract .drw-ctr-sheet-body::-webkit-scrollbar { width: 6px; }
.drawer-contract .drw-ctr-sheet-body::-webkit-scrollbar-track { background: transparent; }
.drawer-contract .drw-ctr-sheet-body::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
.drawer-contract .drw-ctr-sheet-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Voile gris au-dessus de la sheet ouverte (relatif au <form>) — top = 0 : le voile monte jusqu'en haut,
   mais le header (position:relative, z-index 6 > 4) le recouvre → il affleure PILE le bas du header sans
   liseré blanc (plus fiable qu'une mesure headerH au pixel près). bottom = tray+footer. Clic = ferme. */
.drawer-contract .drw-ctr-sheet-dim { position: absolute; left: 0; right: 0; top: 0; bottom: var(--drw-ctr-sheet-bottom, 132px); background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 0.18s ease; z-index: 4; }
.drawer-contract.drw-ctr-has-open-sheet .drw-ctr-sheet-dim { opacity: 1; pointer-events: auto; }
/* La bande "Sélectionner un contrat à dupliquer" vit désormais dans .drawer-body → elle scrolle avec le contenu (plus de sticky) et hérite du flou automatiquement.
   Marges négatives pour étirer le fond gris sur toute la largeur du drawer (cancel padding 14px top + 22px lat de .drw-ctr-body), bottom 24px pour aérer avec "Nom du contrat". */
.drawer-contract .drawer-body .drawer-template-band--in-body { margin: -14px -22px 12px -22px !important; padding: 10px 22px !important; flex-shrink: 1; }
/* 2026-09-02 — Le bandeau « Validation obligatoire » precede parfois cette bande. Le margin-top
   negatif ci-dessus (qui sert a remonter la bande en pleine largeur) annulait alors exactement la
   marge basse de 14px du bandeau, les collant l un a l autre. Selecteur general (~) et non adjacent
   (+) : cote Entreprise, une suggest-bar masquee peut s intercaler dans le DOM. */
.drawer-contract .drawer-body .drw-valreq-banner ~ .drawer-template-band--in-body { margin-top: 0 !important; }
/* Le select interne hérite parfois d'un margin-bottom de Bootstrap → on force 0 pour garder une marge top/bottom symétrique dans la bande */
.drawer-contract .drawer-body .drawer-template-band--in-body > div { margin: 0 !important; }
.drawer-contract .drawer-body .drawer-template-band--in-body .bootstrap-select { margin: 0 !important; }

/* 2026-06-09 — Dropdowns "Sélectionner X à dupliquer" (Contrat / Projet / Tâche) :
   truncate ellipsis sur les options pour éviter que les noms très longs ne fassent
   déborder le menu à gauche du drawer. Largeur cappée sur la largeur du drawer.
   Sélecteur élargi à tous les drawers utilisant la bande template. */
.drawer-contract .drawer-template-band .bootstrap-select .dropdown-menu,
.drawer-project .drawer-template-band .bootstrap-select .dropdown-menu,
.drawer-task .drawer-template-band .bootstrap-select .dropdown-menu { max-width: 100%; min-width: 100% !important; }
.drawer-contract .drawer-template-band .bootstrap-select .dropdown-menu .dropdown-item,
.drawer-contract .drawer-template-band .bootstrap-select .dropdown-menu li a,
.drawer-project .drawer-template-band .bootstrap-select .dropdown-menu .dropdown-item,
.drawer-project .drawer-template-band .bootstrap-select .dropdown-menu li a,
.drawer-task .drawer-template-band .bootstrap-select .dropdown-menu .dropdown-item,
.drawer-task .drawer-template-band .bootstrap-select .dropdown-menu li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.drawer-contract .drawer-template-band .bootstrap-select .dropdown-menu li a .text,
.drawer-project .drawer-template-band .bootstrap-select .dropdown-menu li a .text,
.drawer-task .drawer-template-band .bootstrap-select .dropdown-menu li a .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: bottom; }

/* Phase 4 finalisation (2026-06-08) — footer dynamique avec bouton contextuel + hint inline,
   portée d'avenant, commentaire valideurs conditionnel.
   Cf. docs/sessions/2026-06-08_refonte-contrats-etape4-finalisation-footer-soumission.md */

/* Footer : grid 2 colonnes (Annuler à gauche / wrap bouton+hint à droite, hint sous le bouton) */
.drawer-contract .drawer-footer .drw-ctr-footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.drawer-contract .drawer-footer .drw-ctr-cancel { flex: 0 0 auto; align-self: flex-start; }
.drawer-contract .drawer-footer .drw-ctr-submit-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; max-width: 75%; }
.drawer-contract .drawer-footer .drw-ctr-submit { flex: 0 0 auto; white-space: nowrap; }
.drawer-contract .drawer-footer .drw-ctr-submit-hint { font-size: 0.72rem; color: #6b7a8d; text-align: right; line-height: 1.35; max-width: 100%; }

/* Bloc Portée d'avenant : encadré teal subtil, options stacked */
.drawer-contract .drw-ctr-avenant-scope { background: rgba(13,148,136,0.04); border: 1px solid rgba(13,148,136,0.18); border-radius: var(--r-md, 6px); padding: 10px 12px; }
.drawer-contract .drw-ctr-avenant-scope-options { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.drawer-contract .drw-ctr-avenant-scope-radio { display: flex; align-items: center; gap: 8px; }
/* Radio natif visible : on force la taille, le style natif, accent teal, et on annule tout opacity:0 hérité */
.drawer-contract .drw-ctr-avenant-scope-radio input[type="radio"] { -webkit-appearance: radio !important; -moz-appearance: radio !important; appearance: radio !important; opacity: 1 !important; position: static !important; margin: 0 !important; accent-color: #0d9488; width: 16px !important; height: 16px !important; flex-shrink: 0; cursor: pointer; }
.drawer-contract .drw-ctr-avenant-scope-radio label { margin: 0; font-size: 0.82rem; color: #2D3E50; cursor: pointer; }
.drawer-contract .drw-ctr-avenant-scope-radio input[type="radio"]:checked + label { color: #0d9488; font-weight: 600; }
.drawer-contract .drw-ctr-avenant-scope-apply { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding-left: 22px; }
.drawer-contract .drw-ctr-avenant-scope-apply input[type="checkbox"] { margin-top: 3px; accent-color: #0d9488; width: 14px; height: 14px; flex-shrink: 0; }
.drawer-contract .drw-ctr-avenant-scope-apply label { margin: 0; font-size: 0.78rem; color: #415873; cursor: pointer; line-height: 1.35; }

/* Commentaire valideurs (textarea dans sheet Validation) */
.drawer-contract .drw-ctr-validation-comment-wrap textarea { width: 100% !important; resize: vertical; min-height: 64px; font-size: 0.82rem; padding: 8px 10px; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); }
.drawer-contract .drw-ctr-validation-comment-wrap textarea:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }

/* Bouton "Ajouter document" dans la sheet Documents : override teal (FineUploader render en .btn-outline-red-light orange par défaut) */
.drawer-contract .drw-ctr-sheet[data-sheet-key="documents"] .add_element_link.btn-outline-red-light,
.drawer-contract #contract_documents .add_element_link.btn-outline-red-light { color: #0d9488 !important; background: transparent !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; transition: all 0.15s; }
.drawer-contract .drw-ctr-sheet[data-sheet-key="documents"] .add_element_link.btn-outline-red-light:hover,
.drawer-contract .drw-ctr-sheet[data-sheet-key="documents"] .add_element_link.btn-outline-red-light:focus,
.drawer-contract #contract_documents .add_element_link.btn-outline-red-light:hover,
.drawer-contract #contract_documents .add_element_link.btn-outline-red-light:focus { background: #0d9488 !important; color: #fff !important; }

/* Notice d'erreur form (alert "Encore un dernier effort...") : espace avant le champ Nom du contrat qui suit */
.drawer-contract .drawer-body .alert { margin-bottom: 16px; }

/* ────────────────────────────────────────────────────────────────────────────
   Sous-étape B refonte Contrats 2026-06-08 — Card Validation Pilotage enrichie
   Hub du cycle de vie validation : Lancer / Annuler / Forcer / Relancer / Valider / Refuser / Historique
   Cf. docs/sessions/2026-06-08_refonte-contrats-etape4-card-validation-pilotage.md
   ──────────────────────────────────────────────────────────────────────────── */

/* Bandeau valideur en attente : priorité visuelle haute, fond bleu clair */
.ctr-pilo-validator-banner { display: flex; flex-direction: column; gap: 8px;
    background: rgba(99,176,255,0.12); border: 1px solid rgba(99,176,255,0.35); border-radius: var(--r-lg, 10px);
    padding: 8px 10px; margin-bottom: 10px; }
.ctr-pilo-validator-banner-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ctr-pilo-validator-banner-comment { padding-top: 6px; border-top: 1px dashed rgba(99,176,255,0.35);
    font-size: 0.78rem; line-height: 1.4; color: #1e3a8a; }
.ctr-pilo-validator-banner-comment-label { font-weight: 600; display: block; margin-bottom: 2px; color: #1e40af; }
.ctr-pilo-validator-banner-comment-text { font-style: italic; color: #1e3a8a; }
.ctr-pilo-validator-banner-text { display: flex; align-items: center; gap: 8px; color: #1e40af; font-size: 0.82rem; font-weight: 500; }
.ctr-pilo-validator-banner-text > i { color: #3b82f6; }
.ctr-pilo-validator-banner-actions { display: flex; gap: 6px; }
.ctr-pilo-btn-validate, .ctr-pilo-btn-refuse { display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 0.78rem; font-weight: 500; border-radius: var(--r-md, 6px); text-decoration: none !important;
    transition: all 0.15s; }
.ctr-pilo-btn-validate { background: #10b981; color: #fff; border: 1px solid #10b981; }
.ctr-pilo-btn-validate:hover { background: #059669; color: #fff; }
.ctr-pilo-btn-refuse { background: #ef4444; color: #fff; border: 1px solid #ef4444; }
.ctr-pilo-btn-refuse:hover { background: #dc2626; color: #fff; }

/* Bouton "Forcer la modification" — orange warning explicite */
.ctr-pilo-btn-outline-warning { display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; font-size: 0.78rem; font-weight: 500; border-radius: var(--r-md, 6px);
    background: transparent; color: #d97706; border: 1px solid #f59e0b; text-decoration: none !important;
    transition: all 0.15s; }
.ctr-pilo-btn-outline-warning:hover { background: #f59e0b; color: #fff; }

/* Bouton "Annuler la validation" — outline rouge propre, plus de souligné */
.ctr-pilo-btn-outline-danger { display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; font-size: 0.78rem; font-weight: 500; border-radius: var(--r-md, 6px);
    background: transparent; color: #dc2626; border: 1px solid #dc2626;
    cursor: pointer; transition: all 0.15s; }
.ctr-pilo-btn-outline-danger:hover { background: #dc2626; color: #fff; }
.ctr-pilo-btn-outline-danger:focus { outline: none; box-shadow: 0 0 0 2px rgba(220,38,38,0.2); }

/* Mode de validation affiché en début de body SENT */
.ctr-pilo-validation-mode { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; padding: 4px 0 8px; }
.ctr-pilo-validation-mode-label { color: #6b7a8d; }
.ctr-pilo-validation-mode-value { color: #2D3E50; font-weight: 600; }

/* Liste explicite des valideurs (remplace les anciens mini-avatars en cercles colorés peu lisibles) */
.ctr-pilo-validators-list { list-style: none; margin: 0 0 10px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ctr-pilo-validator-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px; background: rgba(45,62,80,0.025); border-radius: 2px; border-left: 3px solid transparent; }
.ctr-pilo-validator-row.is-accepted { border-left-color: #10b981; }
.ctr-pilo-validator-row.is-refused { border-left-color: #ef4444; }
.ctr-pilo-validator-row.is-pending { border-left-color: #f59e0b; }
.ctr-pilo-validator-row.is-cancelled { border-left-color: #9ca3af; opacity: 0.75; }
.ctr-pilo-validator-row.is-awaiting { border-left-color: #cbd5e1; opacity: 0.75; }
.ctr-pilo-validator-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
/* 2026-06-13 : avatars réduits de 28 à 22px (cohérence avec card Rappels). */
.ctr-pilo-validator-avatar-wrap { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ctr-pilo-validator-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ctr-pilo-validator-avatar-wrap .ds-uc { width: 100%; height: 100%; font-size: 0.62rem; line-height: 22px; padding: 0; margin: 0; }
.ctr-pilo-validator-avatar-wrap .ds-uc > div { padding: 0 !important; font-size: 0.6rem !important; line-height: 22px !important; }
/* 2026-06-13 : alignement police sur .ctx-member-name (card Contributeurs Contexte). */
.ctr-pilo-validator-name { font-size: 0.79rem; font-weight: 400; color: #415873; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ctr-pilo-validator-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Bouton Relancer (explicite, plus de hover-revealed icon) */
.ctr-pilo-btn-resend { display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; font-size: 0.72rem; font-weight: 500; border-radius: var(--r-md, 6px);
    background: transparent; color: #0d9488; border: 1px solid #0d9488;
    cursor: pointer; transition: all 0.15s; }
.ctr-pilo-btn-resend:hover { background: #0d9488; color: #fff; }
.ctr-pilo-btn-resend:focus { outline: none; box-shadow: 0 0 0 2px rgba(13,148,136,0.2); }
.ctr-pilo-btn-resend > i { font-size: 0.7rem; }

/* ──────────────────────────────────────────────────────────────────────────────
   Toast app-wide (2026-06-08 — refonte cohérence notifications).
   Style minimaliste bottom-right, utilisé par :
   - frontend/toasts.html.twig (rendu du flash bag 'toast' app-wide)
   - ctrPiloToast() dans pilotage.html.twig (renvoi mail valideur)
   - tout autre helper JS qui appendrait dans #app-toast-container une .app-toast
   ────────────────────────────────────────────────────────────────────────────── */
.app-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 10000;
    display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.app-toast { pointer-events: auto;
    background: #064e3b; color: #fff; padding: 10px 36px 10px 14px; border-radius: var(--r-lg, 10px);
    display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18); min-width: 280px; max-width: 420px;
    position: relative;
    transform: translateY(20px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
.app-toast.is-visible { transform: translateY(0); opacity: 1; }
.app-toast > i { color: #10b981; font-size: 1rem; flex-shrink: 0; }
.app-toast-text { line-height: 1.35; }
.app-toast-close { position: absolute; top: 6px; right: 8px;
    background: transparent; border: none; color: rgba(255,255,255,0.7);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px;
    transition: color 0.15s; }
.app-toast-close:hover { color: #fff; }

/* 2026-06-10 — Alias rétrocompat .ctr-pilo-toast supprimé (étape 5h cleanup).
   Le JS ctrPiloToast() utilise directement la classe .app-toast. */

/* Popover confirmation (Annuler / Forcer / Refuser) */
.ctr-pilo-confirm-popover { min-width: 240px; max-width: 320px; }
.ctr-pilo-confirm-text { font-size: 0.82rem; color: #2D3E50; margin-bottom: 10px; line-height: 1.4; }
.ctr-pilo-confirm-label { font-size: 0.78rem; color: #415873; margin-bottom: 6px; font-weight: 500; }
.ctr-pilo-confirm-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.ctr-pilo-refuse-textarea { width: 100% !important; min-height: 64px; font-size: 0.82rem; padding: 6px 8px;
    border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); }
.ctr-pilo-refuse-textarea:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.ctr-pilo-refuse-popover { min-width: 280px; }

/* Commentaire de refus affiché dans la card REFUSED */
.ctr-pilo-refuse-comment { display: inline-block; color: #6b7a8d; font-size: 0.78rem; margin-top: 4px; font-style: italic; }

/* Historique des cycles (collapse natif <details>) */
.ctr-pilo-validation-history { margin-top: 12px; border-top: 1px solid rgba(45,62,80,0.08); padding-top: 8px; }
.ctr-pilo-validation-history > summary { cursor: pointer; font-size: 0.78rem; color: #415873; font-weight: 500;
    list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.ctr-pilo-validation-history > summary::before { content: '\f0da'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    font-size: 0.7rem; transition: transform 0.15s; }
.ctr-pilo-validation-history[open] > summary::before { transform: rotate(90deg); }
.ctr-pilo-validation-history > summary::-webkit-details-marker { display: none; }
.ctr-pilo-validation-history-list { list-style: none; margin: 8px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ctr-pilo-validation-history-list > li { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; color: #2D3E50;
    padding: 4px 8px; background: rgba(45,62,80,0.02); border-radius: var(--r-md, 6px); }
.ctr-pilo-history-row { display: flex; align-items: center; gap: 8px; }
.ctr-pilo-history-date { color: #6b7a8d; font-size: 0.74rem; }
.ctr-pilo-history-user { color: #415873; font-size: 0.74rem; }
.ctr-pilo-history-refuse-detail { font-size: 0.72rem; padding: 4px 8px 2px 8px;
    color: #6b7a8d; line-height: 1.4; }
.ctr-pilo-history-refuse-detail > strong { color: #991b1b; }
.ctr-pilo-history-refuse-comment { display: block; font-size: 0.72rem; color: #6b7a8d; margin-top: 2px; font-style: italic; }

/* Commentaire de refus sous une ligne valideur (statut REFUSED) */
.ctr-pilo-validator-row-comment { padding: 4px 8px 8px 44px; background: rgba(45,62,80,0.025);
    border-radius: 0 0 2px 2px; margin-top: -4px; }
.ctr-pilo-validator-row-comment em { color: #6b7a8d; font-size: 0.76rem; }

/* Journal d'activité chronologique (remplace l'ancien "historique de cycles") */
.ctr-pilo-activity-log { list-style: none; margin: 8px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctr-pilo-activity-item { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px;
    align-items: center; padding: 6px 8px; background: rgba(45,62,80,0.025); border-radius: var(--r-lg, 10px);
    border-left: 3px solid transparent; font-size: 0.76rem; color: #2D3E50; }
.ctr-pilo-activity-item.is-sent { border-left-color: #0d9488; }
.ctr-pilo-activity-item.is-sent .ctr-pilo-activity-icon { color: #0d9488; }
.ctr-pilo-activity-item.is-validated { border-left-color: #10b981; }
.ctr-pilo-activity-item.is-validated .ctr-pilo-activity-icon { color: #10b981; }
.ctr-pilo-activity-item.is-refused { border-left-color: #ef4444; }
.ctr-pilo-activity-item.is-refused .ctr-pilo-activity-icon { color: #ef4444; }
.ctr-pilo-activity-item.is-cancelled { border-left-color: #9ca3af; }
.ctr-pilo-activity-item.is-cancelled .ctr-pilo-activity-icon { color: #9ca3af; }
.ctr-pilo-activity-icon { font-size: 0.86rem; display: flex; justify-content: center; }
.ctr-pilo-activity-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctr-pilo-activity-content > strong { font-weight: 600; }
.ctr-pilo-activity-comment { color: #6b7a8d; font-size: 0.74rem; font-style: italic; }
.ctr-pilo-activity-date { color: #6b7a8d; font-size: 0.72rem; white-space: nowrap; }

/* Popover refuse : override le wp-500 du legacy + style cohérent */
.ctr-pilo-refuse-popover .wp-500 { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
.ctr-pilo-refuse-form-wrap textarea { width: 100% !important; min-height: 80px; font-size: 0.82rem; padding: 6px 8px;
    border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); resize: vertical; box-sizing: border-box; }
.ctr-pilo-refuse-form-wrap textarea:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.ctr-pilo-refuse-form-wrap > div.text-center { text-align: right !important; margin-top: 10px !important; display: flex; gap: 6px; justify-content: flex-end; padding: 0 !important; }
.ctr-pilo-refuse-form-wrap > div.text-center > a { display: inline-flex; align-items: center; }

/* ════════════════════════════════════════════════════════════════════════════
   Étape 5e refonte Contrats 2026-06-09 — Item carte contrat (liste).
   Calque strict du pattern Projets (cf. .prj-list-* dans ce même fichier).
   Différences : pas de fresh-dot (Contrats n'a pas FreshItem), L2 spécifique
   (fournisseur uppercase + type pill + statut texte coloré + badge histo reconductions).
   ════════════════════════════════════════════════════════════════════════════ */
/* 2026-06-11 : padding latéral 14px porté par la card (mirror Projets) — hover par row. */
#item-list .ctr-list-card { background: transparent; transition: background 0.12s; position: relative; padding: 6px 10px; }
#item-list .ctr-list-card:hover { background: #eef7f4 !important; }
#item-list .ctr-list-card.active, #item-list .ctr-list-card.active:hover { background: #e6f7f5 !important; box-shadow: none; }
#item-list .ctr-list-card.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #0d9488; z-index: 2; }
#item-list .ctr-list-card.ctr-list-child.active::before { left: -3px; }

/* 2026-06-10 — Sélection : la tentative d'étendre via :has(wrapper) a été REVERTÉE car
   le wrapper <li> contient AUSSI les contrats liés rendus en récursion → le fond teal
   se propageait aux sous-contrats non sélectionnés. On garde le fond + la barre sur
   .ctr-list-card.active uniquement (un seul contrat coloré = celui réellement sélectionné). */

.ctr-list-child { border-color: #cbd5e1 !important; border-width: 2px !important; }
.ctr-list-child-l2 { margin-left: 11px !important; }
.ctr-list-child-l3 { margin-left: 27px !important; }
.ctr-list-child-l4 { margin-left: 43px !important; }

.ctr-list-body { display: flex; align-items: flex-start; min-width: 0; }
.ctr-list-orphan-bar { width: 6px; flex: 0 0 6px; margin-right: 10px; border-left-style: dashed !important; border-left-width: 3px !important; min-height: 40px; }
.ctr-list-orphan-hover-zone { position: absolute; left: -3px; top: 0; bottom: 0; width: 10px; z-index: 2; cursor: default; }

/* 2026-06-23 — Harmonisation stricte sur la structure Projets : slot vertical gauche
   (.ctr-list-left-slot) hébergeant le chevron en L2, séparé de la colonne contenu.
   Remplace la variante "chevron inline" (2026-06-10) qui collait le chevron au contenu L2
   et désalignait la L2 sous le titre. Valeurs identiques à .prj-list-*. */
.ctr-list-left-slot { width: 22px; flex: 0 0 22px; display: flex; flex-direction: column; align-items: center; padding-top: 0; gap: 0; }
.ctr-list-left-row1 { min-height: 1.5rem; display: flex; align-items: center; justify-content: center; }
.ctr-list-left-row2 { min-height: 1.1rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ctr-list-content { flex: 1; min-width: 0; }
.ctr-list-row1 { gap: 8px; min-width: 0; min-height: 1.5rem; }
.ctr-list-row2 { margin-top: 1px; min-height: 1.1rem; gap: 8px; }
.ctr-list-row3 { gap: 4px; margin-top: 4px; flex-wrap: wrap; }

.ctr-list-title-wrapper { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.ctr-list-title { font-size: 0.88rem; font-weight: 500; color: #2D3E50; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 2026-06-23 : chevron décalé à gauche (-10px) pour s'aligner au-dessus de la barre
   verticale des sous-contrats/entreprises (≈11px depuis le bord li) et se détacher du
   titre — identique à .prj-list-chevron. */
.ctr-list-chevron { color: #8fa1b3; font-size: 0.7rem; text-decoration: none; line-height: 1; transition: color 0.12s, transform 0.18s ease; display: inline-block; position: relative; left: -5px; }
.ctr-list-chevron:hover { color: #0d9488; text-decoration: none; }
.ctr-list-chevron.expanded { transform: rotate(90deg); color: #0d9488; }
.ctr-list-chevron-elsewhere,
.ctr-list-chevron-elsewhere:hover { color: #cbd5e1 !important; cursor: default; }

/* Tooltip dédié liste contrats : police légèrement réduite (mirror .prj-tooltip) */
.tooltip.ctr-tooltip .tooltip-inner { font-size: 0.72rem; padding: 6px 10px; max-width: 180px; text-align: center; }

.ctr-list-date { font-size: 0.75rem; font-weight: 400; color: #8fa1b3; flex-shrink: 0; white-space: nowrap; }

.ctr-list-favorite { flex-shrink: 0; width: 12px; text-align: center; font-size: 0.8rem; }
.ctr-list-favorite a { color: inherit; text-decoration: none; }
.ctr-list-favorite .fa-star.fas { color: #0d9488; }
.ctr-list-favorite .fa-star.far { color: transparent; transition: color 0.12s; }
.list-item-row:hover .ctr-list-favorite .fa-star.far { color: #cfd8dc; }
.list-item-row:hover .ctr-list-favorite .fa-star.far:hover { color: #0d9488; }

/* Wrapper li (mirror .prj-list-item-wrapper) : padding interne latéral + trait fin séparateur */
.ctr-list-item-wrapper { background: #fff; padding-left: 0 !important; padding-right: 0 !important; border-bottom: 1px solid #e2e8f0 !important; }
.ctr-list-item-wrapper:last-child { border-bottom: none !important; }

/* L2 : fournisseur uppercase calque .prj-list-phase (taille/poids/couleur identiques pour cohérence cross-modules) */
.ctr-list-supplier { font-size: 0.74rem; font-weight: 300; color: #6b7a8d; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

.ctr-list-row2-right { flex-shrink: 0; gap: 8px; }

/* Statut pill — outline coloré discret (calque visuel de l'ancien type pill).
   Décision étape 5e : retrait du type contrat, statut conservé en pill outline. */
.ctr-list-status-pill { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.62rem; font-weight: 500; line-height: 1.3; color: var(--status-color, #6b7a8d); border: 1px solid var(--status-color, #cbd5e1); border-radius: var(--r-sm, 3px); white-space: nowrap; }

/* Badge histo reconductions : gris discret, icône + nombre */
.ctr-list-renewals-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; font-size: 0.62rem; font-weight: 600; color: #8fa1b3; background: #f1f5f9; border-radius: var(--r-sm, 3px); white-space: nowrap; line-height: 1.3; }
.ctr-list-renewals-badge .fas { font-size: 0.58rem; }

/* Alert pills L3 — mirror exact .prj-list-alert-pill */
.ctr-list-alert-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 0.65rem; font-weight: 500; border-radius: var(--r-sm, 3px); color: var(--pill-color, #2D3E50); background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent); white-space: nowrap; line-height: 1.3; }
.ctr-list-alert-pill .fas { font-size: 0.6rem; }

/* ════════════════════════════════════════════════════════════════════════════
   Étape 5g refonte Contrats 2026-06-10 — Vue Pilotage liste : group headers.
   Calque strict des classes .prj-list-group-* (style identique pour cohérence
   visuelle cross-modules : background gradient gris→bleu, hover gradient gris→teal,
   count pill #8fa1b3, label uppercase letter-spacing).
   ════════════════════════════════════════════════════════════════════════════ */
#item-list .ctr-list-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #cbd5e1; border-top: 1px solid #cbd5e1; background: linear-gradient(to bottom, #f8fafc, #f1f5f9); cursor: pointer; user-select: none; transition: background 0.12s; }
#item-list .ctr-list-group-header:first-child { border-top: none; }
#item-list .ctr-list-group-header:hover { background: linear-gradient(to bottom, #f1f5f9, #e6f7f5); }

.ctr-list-group-icon { font-size: 0.8rem; flex-shrink: 0; width: 16px; text-align: center; }
.ctr-list-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #1f2937; line-height: 1; }
.ctr-list-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 5px; font-size: 0.62rem; font-weight: 600; color: #fff; background: #8fa1b3; border-radius: var(--r-full, 999px); line-height: 1; }
.ctr-list-group-toggle { font-size: 0.7rem; color: #6b7a8d; transition: transform 0.18s ease; }
#item-list .ctr-list-group-header.collapsed .ctr-list-group-toggle { transform: rotate(180deg); }


/* 2026-06-11 — Tooltips dédiés tabs principaux Tous/Mes (Projets + Contrats).
   Classe propre `.ds-tab-tooltip` portée via data-template sur les boutons, pour
   éviter d'être écrasés par la règle générique `.tooltip .tooltip-inner` (260px,
   text-align left) plus haut dans le fichier. */
.tooltip.ds-tab-tooltip .tooltip-inner { font-size: 0.72rem; line-height: 1.35; padding: 6px 10px; max-width: 180px; text-align: center; }

/* ====================================================================
   Modales transverses - etape 1 : confirmation generique (.ds-confirm-*)
   Style DS epure (navy/teal/blanc, radius 2px, shadow sur surface
   flottante uniquement). Reutilisable pour les autres modales de
   confirmation du chantier. 2026-06-10.
   ==================================================================== */

.ds-confirm-dialog { max-width: 460px; }

.ds-confirm-content {
    border: none;
    border-radius: var(--r-lg, 10px);
    box-shadow: 0 12px 40px rgba(45, 62, 80, 0.18);
}

/* Neutralise app.css : #deleteItemModal .modal-header { display: inherit!important } */
#deleteItemModal .modal-header.ds-confirm-header { display: flex !important; }

.ds-confirm-header {
    align-items: center;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #eef1f4;
    border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0;
}

.ds-confirm-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: #2D3E50;
    margin: 0;
    line-height: 1.3;
}

.ds-confirm-header .close {
    color: #8fa1b3;
    opacity: 1;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    margin: 0 0 0 auto;
    text-shadow: none;
}
.ds-confirm-header .close:hover { color: #2D3E50; opacity: 1; }

/* app.css impose display:block aux headers de #contractModal / #supplierModal /
   #supplierSourceModal / #projectModal (app.css:1293). Le .close (float:right Bootstrap) tombe
   alors SOUS le titre, et deborde meme hors du header quand celui-ci n'est pas un flex item
   (markup enveloppe dans <form>, cas du Bilan financier). Le contrat de .ds-confirm-header est
   flex (align-items:center) : on le retablit pour toute modale portant la classe. 2026-09-26 */
.modal-header.ds-confirm-header { display: flex !important; }

/* app.css ecrase aussi la cible de clic (.modal-header .close { padding:0 .25rem!important;
   margin:0!important }) : 19x18 px, difficile a viser. On elargit la zone cliquable a 31x34 px
   sans bouger le glyphe (marges negatives symetriques). */
.ds-confirm-header .close {
    padding: 8px 10px !important;
    margin: -8px -6px -8px auto !important;
}

.ds-confirm-body { padding: 18px 20px; }

.ds-confirm-text {
    font-size: 0.84rem;
    font-weight: 400;
    color: #415873;
    line-height: 1.55;
    text-align: left;
}

/* Information SECONDAIRE dans une modale de confirmation : sur sa propre ligne, en retrait
   visuel, pour ne pas concurrencer la question posee (2026-09-26). */
.ds-confirm-text-hint {
    font-size: 0.78rem;
    color: #8fa1b3;
    line-height: 1.5;
}

.ds-confirm-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #eef1f4;
    border-radius: 0 0 var(--r-lg, 10px) var(--r-lg, 10px) var(--r-lg, 10px) var(--r-lg, 10px);
}
.ds-confirm-footer > * { margin: 0; }

/* Boutons de modale de confirmation */
.ds-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-md, 6px);
    background: #fff;
    color: #415873;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.ds-btn-ghost:hover,
.ds-btn-ghost:focus {
    background: #f1f5f9;
    color: #2D3E50;
    text-decoration: none;
}

.ds-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;                  /* aligne sur primary et ghost, 2026-08-27 */
    padding: 6px 14px;
    border: 1px solid #dc2626;
    border-radius: var(--r-md, 6px);
    background: #dc2626;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ds-btn-danger:hover,
.ds-btn-danger:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    text-decoration: none;
}

/* Ligne structurelle "action irreversible" de la modale de suppression
   (toujours affichee, independante du texte surcharge par les pages) */
.ds-confirm-irreversible {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef1f4;
    font-size: 0.78rem;
    font-weight: 500;
    color: #2D3E50;
}
.ds-confirm-irreversible i {
    color: #d97706;
    font-size: 0.8rem;
}

/* Modale de chargement DS (spinners : création round, finalisation, sauvegarde…) — réutilise le chrome .ds-confirm-content. */
.ds-loading-spinner { font-size: 1.7rem; color: #0d9488; margin-bottom: 12px; }
.ds-loading-title { font-size: 0.95rem; font-weight: 600; color: #2D3E50; margin-bottom: 4px; }
.ds-loading-text { font-size: 0.85rem; color: #64748b; }

/* Bouton primaire (action principale) - DEFINITION UNIQUE.
   Fusion 2026-08-24 de deux blocs .ds-btn-primary concurrents (geometries differentes,
   meme specificite) : le second gagnait partout, le premier napportait que
   justify-content et min-height, rapatries ici. Rendu inchange. */
.ds-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;                  /* centralise 2026-08-27 : remplace 5 rattrapages locaux */
    justify-content: center;   /* fusionne depuis le bloc double supprime (2026-08-24) */
    min-height: 34px;          /* idem : seule cette valeur etait apportee par lautre bloc */
    padding: 6px 14px;
    border: 1px solid #0d9488;
    border-radius: var(--r-md, 6px);
    background: #0d9488;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ds-btn-primary:hover,
.ds-btn-primary:focus {
    background: #0b7d72;
    border-color: #0b7d72;
    color: #fff;
    text-decoration: none;
}

/* Footer de modale .ds-confirm-* en boutons empiles (une ligne par bouton, pleine largeur)
   pour les confirmations a 2 actions a libelles plus longs. */
.ds-confirm-footer-stacked {
    flex-direction: column;
    align-items: stretch;
}

/* Page "Selection des laureats par article" : bouton qui deplie les trois etapes Excel.
   Elles etaient toujours visibles et occupaient beaucoup de place, alors que la voie normale
   est de cocher dans la grille (2026-09-26). Pose dans l'encadre d'aide, il en reprend le ton. */
.rfx-lau-excel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 14px;          /* espace apres la phrase ; AUCUNE marge verticale : elle
                                    grandissait la ligne, donc tout l encadre (2026-09-26) */
    vertical-align: middle;
    padding: 2px 10px;           /* au plus pres de la hauteur de ligne du texte voisin */
    line-height: 1.35;
    font-size: 0.78rem;
    font-weight: 500;
    color: #0d9488;
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: var(--r-full, 999px);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.rfx-lau-excel-toggle:hover { background: #f0fdfa; border-color: #5eead4; }
.rfx-lau-excel-caret { font-size: 0.66rem; transition: transform 0.15s ease; }
/* Bootstrap retire `collapsed` quand le bloc est ouvert : le chevron suit. */
.rfx-lau-excel-toggle[aria-expanded="true"] .rfx-lau-excel-caret { transform: rotate(180deg); }
/* Le bloc replie portait son espacement via `.rfx-qimport-zones { margin-top: 14px }`, donc sur
   son ENFANT. Pendant l ouverture, Bootstrap anime la hauteur du conteneur a partir de 0 : la marge
   de l enfant, elle, s applique immediatement. On voyait donc un vide apparaitre puis se resorber
   quand le contenu arrivait - le "saut" signale en preprod (2026-09-26).
   L espacement passe en padding sur le CONTENEUR : il est compris dans la hauteur animee, et il
   disparait avec lui quand le bloc est ferme (`display:none`). */
/* L espacement vient UNIQUEMENT du margin-bottom de l encadre d aide au-dessus. Le conteneur
   repliable ne porte donc ni padding ni marge : sinon on cumulait 16 + 14 + 16 = 46 px de vide,
   et la note du dessous remontait en deux temps a la fermeture (2026-09-26).
   Specificite (0,3,0) : `.rfx-ds .rfx-lau-steps` (0,2,0) est declaree PLUS BAS et gagnait.
   Verifie dans le navigateur, pas deduit. */
.rfx-lau-excel-collapse { padding-top: 0; }
.rfx-ds .rfx-lau-excel-collapse > .rfx-lau-steps { margin-top: 0; }

/* Encadre d aide qui porte un BOUTON sur la meme ligne que son texte. `.rfx-doc-hint` aligne ses
   enfants en flex-start : l ampoule restait collee en haut pendant que le bouton, plus haut que la
   ligne de texte, faisait grandir l encadre (2026-09-26). On centre, et on annule le decalage de
   2px pose sur l icone pour l alignement en haut.
   `.rfx-doc-hint` est declaree PLUS BAS dans ce fichier : a specificite egale elle aurait gagne.
   On double donc la classe (0,2,0) plutot que de deplacer le bloc. */
.rfx-doc-hint.rfx-doc-hint-inline { align-items: center; }
.rfx-doc-hint.rfx-doc-hint-inline .rfx-doc-hint-icon { margin-top: 0; }
.ds-confirm-footer-stacked > .ds-btn-ghost,
.ds-confirm-footer-stacked > .ds-btn-danger,
.ds-confirm-footer-stacked > .ds-btn-primary {
    width: 100%;
    justify-content: center;
}

/* Liste d'activite en modale de contenu (.ds-act-*) — header + lignes, style DS.
   Utilise par la modale Historique d'activite des documents (transverse). */
.ds-act-head {
    color: #8fa1b3;
    font-size: 0.72rem;
    font-weight: 400;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 0;
    margin: 0;
}
.ds-act-row {
    border-bottom: 1px solid #f3f4f6;
    padding: 8px 0;
    margin: 0;
    font-size: 0.79rem;
    color: #415873;
    align-items: center;
}
.ds-act-row:hover { background: #f9fafb; }
.ds-act-row:last-child { border-bottom: none; }
.ds-act-filename { color: #8fa1b3; }
.ds-act-date, .ds-act-user { color: #8fa1b3; font-size: 0.72rem; }
.ds-act-pill {
    display: inline-block;
    border: 1px solid;
    border-radius: var(--r-sm, 3px);
    padding: 1px 8px;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Modale Note : gabarits (chips) + boutons d'enregistrement au style DS */
.note-tpl-bar { gap: 6px; }
.note-tpl-btn {
    border: 1px solid #e2e8f0;
    border-radius: var(--r-md, 6px);
    background: #fff;
    color: #415873;
    font-size: 0.72rem;
    font-weight: 400;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.note-tpl-btn:hover { background: #f0fafa; border-color: #0d9488; color: #0d9488; }

#addNoteModal #note_save,
#addNoteModal #note_saveAndClose {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #0d9488;
    border-radius: var(--r-lg, 10px);
    background: #0d9488;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
#addNoteModal #note_save:hover,
#addNoteModal #note_saveAndClose:hover { background: #0b7d72; border-color: #0b7d72; color: #fff; }

/* Mini-confirmation DS (overlay plein écran centré) — remplace les confirm() natifs.
   Ex. confirmation de remplacement de gabarit dans la modale Note. */
.ds-mini-confirm-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2000;
    background: rgba(45, 62, 80, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-mini-confirm {
    background: #fff;
    border-radius: var(--r-md, 6px);
    box-shadow: 0 12px 40px rgba(45, 62, 80, 0.25);
    width: 90%;
    max-width: 380px;
    padding: 20px;
}
.ds-mini-confirm-text {
    font-size: 0.88rem;
    color: #2D3E50;
    margin-bottom: 16px;
}
.ds-mini-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Modale Note (Projet + Entreprises) : l'éditeur CKEditor remplit la hauteur
   disponible jusqu'au-dessus du footer (sinon il reste à sa min-height 330px,
   laissant un grand vide en bas dans une modale plein écran).
   Repli gracieux : si la structure CKEditor ne suit pas, la min-height reste le plancher. */
#addNoteModal .container-modal-scrollable > .col-md-12 {
    display: flex;
    flex-direction: column;
}
#addNoteModal .container-modal-scrollable > .col-md-12 > .row:last-child {
    flex: 1 1 auto;
    min-height: 0;
}
#addNoteModal .container-modal-scrollable > .col-md-12 > .row:last-child > [class*="col"] {
    display: flex;
    flex-direction: column;
}
#addNoteModal .container-modal-scrollable > .col-md-12 > .row:last-child .cke_textarea_inline {
    flex: 1 1 auto;
}

/* Liens "Nouveau contributeur / Nouveau valideur" affichés dans les dropdowns
   (select2 noResults pour les contributeurs, bootstrap-select pour les validateurs)
   quand aucun existant n'est trouve. Style DS (teal + icone +) au lieu du bleu navigateur brut. */
.add_contributor_link,
.add_supplier_link,
.add_validator_first_link,
.add_validator_second_link {
    color: #0d9488 !important;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
}
.add_contributor_link::before,
.add_supplier_link .text::before,
.add_validator_first_link .text::before,
.add_validator_second_link .text::before {
    content: "+ ";
    font-weight: 700;
}
.add_contributor_link:hover,
.add_supplier_link:hover,
.add_validator_first_link:hover,
.add_validator_second_link:hover {
    color: #0b7d72 !important;
    text-decoration: underline !important;
}

/* Picto d'aide (tooltip Bootstrap) expliquant le mécanisme rechercher -> "Nouveau ..."
   dans les cartes Contributeurs (Contexte) et Validateurs (Finance). */
.ctx-search-help {
    color: #94a3b8;
    cursor: help;
    font-size: 0.85rem;
    margin-left: 4px;
    align-self: center;
    transition: color 0.2s;
}
.ctx-search-help:hover {
    color: #0d9488;
}

/* Bouton DS "outline" (action secondaire distincte du ghost) : bordure + texte navy
   marques, fond blanc. Hierarchie : ghost (le plus discret) < outline < primary (teal plein).
   Ex. 3e choix d'une confirmation a 3 actions (ctrDocAccessConfirmModal). */
.ds-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #94a3b8;
    border-radius: var(--r-md, 6px);
    background: #fff;
    color: #2D3E50;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ds-btn-outline:hover,
.ds-btn-outline:focus {
    background: #f1f5f9;
    border-color: #64748b;
    color: #2D3E50;
    text-decoration: none;
}

/* Modale "Selection multiple criteres/evaluateurs" (multi_contacts_contributor) — restyle DS.
   Encart consigne compact + pictos "?" normalises + separateurs de themes. */
#assessmentContactModal .asm-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-left: 3px solid #0d9488;
    border-radius: var(--r-lg, 10px);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
}
#assessmentContactModal .asm-hint .fa-lightbulb {
    color: #0d9488;
    margin-top: 2px;
    flex-shrink: 0;
}
/* Intitulé de critère porteur d'un tooltip (description) : affordance discrète. */
#assessmentContactModal .asm-crit-name {
    border-bottom: 1px dashed #cbd5e1;
    cursor: help;
}
#assessmentContactModal .fa-question-circle {
    font-size: 0.8rem !important;
}
/* En-tete de tableau style DS : majuscules, gris, semi-gras, fin liseret bas. */
#assessmentContactModal .asm-thead {
    text-transform: uppercase !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #8fa1b3;
    border-bottom: 1px solid #e9eef3;
}
#assessmentContactModal .asm-thead [class*="col"] { text-transform: uppercase !important; }
/* Liste des criteres scrollable : hauteur posee par resizeModalContainer au shown. */
#assessmentContactModal .asm-criteria {
    overflow-y: auto;
    overflow-x: hidden;
}
#assessmentContactModal .assessment-category-row {
    border-top: 1px solid #eef2f6;
    padding-top: 10px;
    padding-bottom: 10px;
}
#assessmentContactModal .assessment-category-row:first-of-type {
    border-top: none;
}
/* Nom de theme : ancre de regroupement, navy semi-gras. */
#assessmentContactModal .assessment-category-row .col-md-5 {
    font-weight: 600;
    color: #2D3E50;
}
/* Ligne de critere : hover discret (affordance de selection). */
#assessmentContactModal .assessment-category-criteria-row {
    border-radius: 3px;
    transition: background 0.12s;
}
#assessmentContactModal .assessment-category-criteria-row:hover {
    background: rgba(13, 148, 136, 0.05);
}
/* Cases a cocher en teal DS (au lieu de l'orange global). */
#assessmentContactModal .form-check input[type="checkbox"]:checked + label::before {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
}
#assessmentContactModal .form-check input[type="checkbox"]:focus + label::before {
    border-color: #0d9488 !important;
}

/* Modale "Montant total commande" (contract/amount_ordered_activity) — contenu DS. */
#contractAmountOrderedActivityModal .ctr-aoa-stats { display: flex; gap: 12px; }
#contractAmountOrderedActivityModal .ctr-aoa-stat {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-left: 3px solid #0d9488;
    border-radius: var(--r-md, 6px);
    padding: 10px 14px;
}
#contractAmountOrderedActivityModal .ctr-aoa-stat-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8fa1b3;
    font-weight: 600;
    margin-bottom: 3px;
}
#contractAmountOrderedActivityModal .ctr-aoa-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2D3E50;
}
#contractAmountOrderedActivityModal .ctr-aoa-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8fa1b3;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e9eef3;
}
#contractAmountOrderedActivityModal .ctr-aoa-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 4px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
}
#contractAmountOrderedActivityModal .ctr-aoa-date { color: #8fa1b3; width: 84px; flex-shrink: 0; }
#contractAmountOrderedActivityModal .ctr-aoa-amount { color: #2D3E50; font-weight: 600; flex: 1; }
#contractAmountOrderedActivityModal .ctr-aoa-del {
    color: #cbd5e1;
    opacity: 0;
    transition: color 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
#contractAmountOrderedActivityModal .ctr-aoa-row:hover .ctr-aoa-del { opacity: 1; }
#contractAmountOrderedActivityModal .ctr-aoa-del:hover { color: #ef4444; }

/* Modale "Critere evalue" (assessment/results_details) — contenu DS. */
.asm-rd-desc {
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-left: 3px solid #0d9488;
    border-radius: var(--r-md, 6px);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}
.asm-rd-table { font-size: 0.85rem; }
.asm-rd-table td, .asm-rd-table th { vertical-align: top !important; word-break: break-word; }
.asm-rd-table .text-info { color: #0d9488 !important; }
.asm-rd-table .toggleColSupplierButton { color: #0d9488 !important; }
.asm-rd-table .toggleColSupplierButton:hover { color: #0b7d72 !important; }
.asm-rd-table .starrating + div { color: #64748b; font-size: 0.82rem; line-height: 1.45; }

/* Pills statut arrondies 2px dans la modale Demandes d'evaluation. */
#assessmentContactModal .outline-pilled { border-radius: 2px !important; }

/* Petit bouton DS (xs) — actions inline (ex. Renvoyer). */
.ds-btn-xs {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    background: #0d9488; color: #fff;
    border: none; border-radius: var(--r-sm, 3px);
    font-size: 0.74rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
}
.ds-btn-xs:hover { background: #0b7d72; color: #fff; text-decoration: none; }

/* Modale "Evaluateurs" (assessment/assessment_request) — liste DS epuree. */
.asm-req-row { display: flex; align-items: center; gap: 16px; padding: 11px 4px; border-bottom: 1px solid #f1f3f5; }
.asm-req-row:last-child { border-bottom: none; }
.asm-req-main { flex: 0 0 34%; min-width: 0; }
.asm-req-name { color: #2D3E50; font-weight: 600; font-size: 0.88rem; }
.asm-req-name .open-contributor-edit-button { color: #94a3b8; }
.asm-req-name .open-contributor-edit-button:hover { color: #0d9488; }
.asm-req-company { display: inline-block; margin-top: 4px; padding: 1px 8px; background: rgba(13,148,136,0.08); border: 1px solid rgba(13,148,136,0.28); border-radius: var(--r-sm, 3px); font-size: 0.68rem; color: #0f766e; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.asm-req-email { flex: 1 1 auto; min-width: 0; }
.asm-req-email a { color: #94a3b8; font-size: 0.8rem; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-req-email a:hover { color: #0d9488; }
.asm-req-status { flex: 0 0 auto; }
.asm-req-action { flex: 0 0 auto; min-width: 72px; text-align: right; }
.asm-req-pill { display: inline-block; padding: 3px 10px; border-radius: var(--r-sm, 3px); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.asm-req-pill-sent { border: 1px solid #a2c02a; color: #6f961a; background: rgba(162,192,42,0.08); }
.asm-req-pill-unsent { border: 1px solid #ef6e6e; color: #d64545; background: rgba(239,110,110,0.08); }
/* Chantier renewal-max-count 2026-06-12 — sous-bloc maxRenewals (drawer Contrat).
   Indentation visuelle + flèche ↳ pour signaler le rattachement au radio parent
   "Reconduction tacite - périodique (durée fixe)". Le sous-bloc est déplacé en JS
   physiquement sous le radio cible (insertAfter) puis stylisé ici. */
.drw-ctr-maxrenewals-row { position: relative; padding-left: 52px; margin: 6px 0 14px; }
.drw-ctr-maxrenewals-row::before { content: "↳"; position: absolute; left: 26px; top: 4px; color: #6b7a8d; font-size: 1rem; line-height: 1; }
.drw-ctr-maxrenewals-options { display: flex; flex-direction: column; gap: 6px; }
.drw-ctr-maxrenewals-mode-row { margin: 0; min-height: auto; padding-left: 1.25rem; }
.drw-ctr-maxrenewals-mode-row .custom-control-label { font-weight: 400; cursor: pointer; font-size: 0.85rem; }
/* Cercles radio plus petits (par défaut Bootstrap : 1rem). */
.drw-ctr-maxrenewals-mode-row .custom-control-label::before,
.drw-ctr-maxrenewals-mode-row .custom-control-label::after { width: 0.8rem; height: 0.8rem; top: 0.275rem; left: -1.25rem; }
/* Override Bootstrap bleu → teal DS pour cohérence avec le reste de l'app. */
.drw-ctr-maxrenewals-mode-row .custom-control-input:checked ~ .custom-control-label::before { background-color: #0d9488; border-color: #0d9488; }
.drw-ctr-maxrenewals-mode-row .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.15rem rgba(13, 148, 136, 0.25); }
.drw-ctr-maxrenewals-mode-row .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #5eead4; }
.drw-ctr-maxrenewals-mode-row .custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: #99f6e4; border-color: #99f6e4; }
.drw-ctr-maxrenewals-limited-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drw-ctr-maxrenewals-input { width: 70px !important; display: inline-block !important; padding: 2px 6px !important; height: auto !important; }
.drw-ctr-maxrenewals-input:disabled { background: #f1f5f9; color: #94a3b8; }
.drw-ctr-maxrenewals-suffix { color: #6b7a8d; }
/* ============================================================
   Avatars de profil + selecteur de couleur (profil utilisateur)
   2026-06-12 - chantier avatars-profil
   ============================================================ */
.ds-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* -- Selecteur de couleur -- */
.ds-color-picker { display:flex; flex-wrap:wrap; gap:10px; }
.ds-color-swatch { cursor:pointer; margin:0; line-height:0; border-radius:50%; padding:2px; border:2px solid transparent; transition:border-color .12s ease, transform .12s ease; }
.ds-color-swatch:hover { transform:scale(1.08); }
.ds-color-swatch.is-selected { border-color:#2D3E50; }
.ds-color-dot { display:block; width:26px; height:26px; border-radius:50%; }

/* -- Grille d'avatars -- */
.ds-avatar-picker { display:grid; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); gap:10px; max-width:560px; }
.ds-avatar-tile { cursor:pointer; margin:0; display:flex; align-items:center; justify-content:center; border-radius:12px; padding:4px; border:2px solid transparent; transition:border-color .12s ease, background .12s ease; }
.ds-avatar-tile:hover { background:#eef2f5; }
.ds-avatar-tile.is-selected { border-color:#2D3E50; }
.ds-avatar-tile-circle { display:block; width:48px; height:48px; border-radius:50%; overflow:hidden; }
.ds-avatar-tile-circle img { width:100%; height:100%; object-fit:cover; display:block; }
.ds-avatar-tile-none { aspect-ratio:1/1; border-radius:50%; border:1.5px dashed #c4cdd6; background:#fff; }
.ds-avatar-tile-none .ds-avatar-none-label { font-size:.62rem; color:#8fa1b3; text-align:center; line-height:1.1; padding:2px; }
.ds-avatar-tile-none.is-selected { border-color:#2D3E50; border-style:solid; }
/* Chantier "Card Destinataires des rappels" 2026-06-12 — card Pilotage Contrat. */
.ctr-pilo-rec-card .ctr-pilo-bare-body { display: flex; flex-direction: column; gap: 12px; }
.ctr-pilo-rec-label { font-size: 0.75rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.02em; }
.ctr-pilo-rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ctr-pilo-rec-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #1e293b; }
.ctr-pilo-rec-item i { color: #94a3b8; font-size: 0.9rem; }
.ctr-pilo-rec-item.is-auto { color: #475569; }
.ctr-pilo-rec-role { margin-left: auto; font-size: 0.72rem; color: #8fa1b3; font-style: italic; }
.ctr-pilo-rec-hint { font-size: 0.72rem; margin-top: 6px; }
.ctr-pilo-rec-empty { font-size: 0.85rem; font-style: italic; }
/* Centrage vertical/horizontal robuste du contenu des avatars (cercle macro user_picture)
   2026-06-12 - corrige le decentrage des initiales (ancien hack padding-top/line-height) */
.ds-uc { display: inline-flex !important; align-items: center; justify-content: center; }
/* margin:0 → neutralise la marge des classes titres (h3/h6) du macro qui décentrait les initiales. */
.ds-uc > div { padding: 0 !important; line-height: 1 !important; margin: 0 !important; }
/* Picker avatars groupe repliable (profil) - 2026-06-12 (Cartoon / Hommes / Femmes) */
.ds-avatar-picker-top { margin-bottom: 6px; }
.ds-avatar-group { border-top: 1px solid #eef0f5; }
.ds-avatar-group:first-of-type { border-top: 0; }
.ds-avatar-group-header { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 9px 2px; font-size: 0.82rem; font-weight: 600; color: #2D3E50; cursor: pointer; }
.ds-avatar-group-header:hover { color: #1b8f86; }
.ds-avatar-group-header > span:first-child { flex: 1; text-align: left; }
.ds-avatar-group-count { font-size: 0.7rem; font-weight: 400; color: #8fa1b3; }
.ds-avatar-group-header::after { content: "\25BE"; font-size: 0.7rem; color: #8fa1b3; transition: transform 0.15s ease; }
.ds-avatar-group-header.collapsed::after { transform: rotate(-90deg); }
.ds-avatar-group .ds-avatar-picker { padding-bottom: 10px; }
/* Pas de contour noir persistant au clic souris sur l'en-tete de groupe avatars (garde le focus clavier) */
.ds-avatar-group-header:focus { outline: none; box-shadow: none; }
.ds-avatar-group-header:focus-visible { outline: 2px solid #1b8f86; outline-offset: 2px; border-radius: 4px; }
/* Bouton "+" header card Destinataires des rappels Pilotage (chantier 2026-06-12). */
.ctr-pilo-rec-add-btn { background: transparent; border: none; color: #0d9488; padding: 4px 8px; border-radius: var(--r-md, 6px); transition: background 0.12s; cursor: pointer; }
.ctr-pilo-rec-add-btn:hover { background: rgba(13, 148, 136, 0.08); }
.ctr-pilo-rec-add-btn i { font-size: 0.85rem; }
/* Chantier "Card Destinataires des rappels" 2026-06-13 — modale unifiée checkboxes teal.
   Override Bootstrap bleu → teal DS + alignement label sur le centre vertical de la case. */
.ctr-add-opt-row .custom-control-label { font-size: 0.92rem; line-height: 1.4; cursor: pointer; padding-top: 1px; display: inline-block; white-space: normal; word-spacing: normal; outline: none; box-shadow: none; border: 0; }
/* 2026-06-13 : agressif. Aucun outline / box-shadow / border bleu sur l'ensemble de la ligne option, peu importe l'état (focus, hover, active, focus-within). */
.ctr-add-opt-row,
.ctr-add-opt-row *,
.ctr-add-opt-row .custom-control-label,
.ctr-add-opt-row .custom-control-label:focus,
.ctr-add-opt-row .custom-control-label:focus-within,
.ctr-add-opt-row .custom-control-input,
.ctr-add-opt-row .custom-control-input:focus,
.ctr-add-opt-row .custom-control-input:focus-visible,
.ctr-add-opt-row #ctr-confirm-opt-doc-label,
.ctr-add-opt-row #ctr-confirm-opt-doc-label:focus { outline: 0 !important; box-shadow: none !important; }
/* 2026-06-13 : forcer un layout inline normal pour le span et strong injectés dynamiquement
   en JS (sinon Bootstrap 4 .custom-control-label rend chaque enfant inline isolément, ce qui
   produit un retour à la ligne après chaque enfant — bug observé sur la modale "Ajouter un
   contributeur" depuis le selectpicker Contexte). */
.ctr-add-opt-row .custom-control-label span,
.ctr-add-opt-row .custom-control-label strong { display: inline; white-space: normal; }
.ctr-add-opt-row .custom-control-input:checked ~ .custom-control-label::before { background-color: #0d9488; border-color: #0d9488; }
.ctr-add-opt-row .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.15rem rgba(13, 148, 136, 0.25); }
.ctr-add-opt-row .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #5eead4; }
.ctr-add-opt-row .custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: #99f6e4; border-color: #99f6e4; }
/* Chantier "Card Destinataires des rappels" 2026-06-13 — bouton croix sur les rows. */
.ctr-pilo-rec-item { padding: 4px 6px; border-radius: var(--r-lg, 10px); transition: background 0.12s; }
.ctr-pilo-rec-item:hover { background: rgba(13, 148, 136, 0.04); }
.ctr-pilo-rec-remove { background: transparent; border: none; color: #94a3b8; padding: 2px 6px; border-radius: var(--r-sm, 3px); cursor: pointer; transition: background 0.12s, color 0.12s; }
.ctr-pilo-rec-remove:hover { background: rgba(239, 110, 110, 0.1); color: #d64545; }
.ctr-pilo-rec-remove i { font-size: 0.75rem; }
/* 4A — Programmation des rappels dans card Pilotage (chantier 2026-06-13).
   Bouton Modifier réutilise .ctx-add-btn (animation hover label). */
.ctr-pilo-rec-item.is-schedule { padding: 2px 6px; }
.ctr-pilo-rec-item.is-schedule i { color: #6b7a8d; }
/* 4A — Modale "Programmation des rappels" (chantier 2026-06-13). */
.ctr-rs-body { padding: 18px 20px; }
.ctr-rs-block { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 14px 16px; margin-bottom: 12px; transition: border-color 0.12s, background 0.12s; }
.ctr-rs-block:last-child { margin-bottom: 0; }
.ctr-rs-block-head { margin-bottom: 10px; }
.ctr-rs-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 500; color: #1e293b; }
.ctr-rs-switch input[type="checkbox"] { margin: 0; }
.ctr-rs-switch-text i { color: #6b7a8d; }
.ctr-rs-block-body { display: flex; align-items: center; gap: 10px; padding-left: 22px; flex-wrap: wrap; transition: opacity 0.15s; }
.ctr-rs-block-body.is-disabled { opacity: 0.4; pointer-events: none; }
.ctr-rs-days-label { margin: 0; font-size: 0.85rem; color: #475569; }
.ctr-rs-days-input-wrap { display: inline-flex; align-items: center; gap: 6px; }
.ctr-rs-days-input-wrap .form-control { width: 70px; padding: 4px 8px; text-align: center; }
.ctr-rs-days-suffix { font-size: 0.85rem; color: #6b7a8d; }
/* 2026-06-13 : avatars 22x22 dans card Rappels (cohérence avec card Validation). */
.ctr-pilo-rec-avatar-wrap { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ctr-pilo-rec-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ctr-pilo-rec-avatar-wrap .ds-uc { width: 100%; height: 100%; font-size: 0.62rem; line-height: 22px; padding: 0; margin: 0; }
.ctr-pilo-rec-avatar-wrap .ds-uc > div { padding: 0 !important; font-size: 0.6rem !important; line-height: 22px !important; }
/* 2026-06-13 : nom destinataire card Rappels — alignement sur .ctx-member-name (Contexte). */
.ctr-pilo-rec-name { font-size: 0.79rem; font-weight: 400; color: #415873; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 2026-06-13 : suppression nucléaire de tout outline / box-shadow / border bleu
   dans la modale ctrDocAccessConfirmModal. L'encadré bleu persistait sur le label
   malgré les overrides précis — on neutralise toute la modale. */
#ctrDocAccessConfirmModal *,
#ctrDocAccessConfirmModal *:focus,
#ctrDocAccessConfirmModal *:focus-visible,
#ctrDocAccessConfirmModal *:focus-within,
#ctrDocAccessConfirmModal *:hover,
#ctrDocAccessConfirmModal *:active { outline: 0 !important; outline-offset: 0 !important; }
#ctrDocAccessConfirmModal .custom-control-label,
#ctrDocAccessConfirmModal .custom-control-label * { box-shadow: none !important; border-color: transparent !important; }
/* ──────────────────────────────────────────────────────────────────────────
   Empty-state moderne (composant transverse) — chantier modernisation 2026-06-14.
   Remplace les anciens blocs "Cet espace a besoin de vous" + illustr_XX.png.
   Markup : templates/frontend/_empty_state.html.twig
   ────────────────────────────────────────────────────────────────────────── */
.ds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
    max-width: 420px;
    margin: 0 auto;
}
.ds-empty-state-badge {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f6;
    color: var(--ds-teal, #0d9488);
    margin-bottom: 20px;
}
.ds-empty-state-badge i { font-size: 1.9rem; line-height: 1; }
.ds-empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2D3E50;
    margin-bottom: 8px;
}
.ds-empty-state-text {
    font-size: 0.875rem;
    color: #8fa1b3;
    line-height: 1.5;
    margin-bottom: 22px;
    max-width: 360px;
}
.ds-empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--r-md, 6px);
    background: var(--ds-teal, #0d9488);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ds-empty-state-cta:hover { background: #0b7d72; color: #fff; text-decoration: none; }
.ds-empty-state-cta i { font-size: 0.8rem; }
.ds-empty-state-cta.is-ghost {
    background: transparent;
    color: #5a6b7b;
    border-color: #cbd5e1;
}
.ds-empty-state-cta.is-ghost:hover { background: #eef2f6; color: #2D3E50; }
/* ============================================================
   Navbar principale - refonte 2026-06-14 (navy DS + accent teal)
   Sidebar verticale gauche. Couleur unifiee navy #2D3E50 (regle DS
   "3 couleurs"). Item actif = barre teal 3px + fond subtil + icone teal.
   Libelles de section discrets, visibles en mode deplie uniquement.
   Interligne resserre pour tenir sans scroll.
   ============================================================ */

/* Fond navy unifie. On NE touche PAS .bg-color-generic (encore utilise
   par la colonne liste Entreprises non refondue). */
.navbar-primary,
.navbar-primary .dropdown-menu { background-color: #2D3E50; }

/* Interligne resserre (objectif: tout visible sans scroll) + transition douce */
.navbar-primary-menu li a {
    margin: 3px 8px;
    padding: 6px 9px 6px 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}

/* Badge de notification (Demandes, Communautes) : bulle posee en absolu sur le
   coin de l'icone -> ne decale plus le libelle, comportement identique partout. */
.navbar-primary-menu li a .badge {
    position: absolute !important;
    top: 0 !important;
    left: 22px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 5px;
    z-index: 2;
}

/* Hover doux */
.navbar-primary .navbar-primary-menu li a:not(.link-disabled):hover {
    background-color: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: #fff;
}

/* Item actif : fond subtil + barre verticale teal 3px + icone teal */
.navbar-primary-menu li a.active {
    background-color: rgba(255,255,255,0.08);
    border-radius: 4px;
    position: relative;
}
.navbar-primary-menu li a.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #0d9488;
    border-radius: 0 2px 2px 0;
}
.navbar-primary-menu li a.active > i { color: #0d9488; }

/* Logo entreprise/compte (section Compte, en bas) : traite comme un libelle ->
   affiche seulement en deplie (cache en replie, comme les nav-label), pour ne pas
   laisser un trou en replie et garder un espacement coherent entre les 2 etats.
   Marge navy minimale autour (padding 4px). */
.navbar-primary-menu li.navbar-primary-account {
    height: 56px;
    padding: 4px 8px;
    overflow: hidden;
}
.navbar-primary-account .nav-label-logo { width: 100%; }
.navbar-primary-account .bg-white { padding: 6px !important; }
.navbar-primary-account .bg-white img { width: auto !important; max-width: 100%; height: 36px; object-fit: contain; }

/* Libelles de section : discrets, MAJ. Hauteur de slot FIXE et identique en
   replie/deplie pour que les icones ne se decalent pas au survol : en replie on
   remplace le texte par un court trait centre (meme hauteur de slot). */
.navbar-primary-menu li.navbar-primary-section {
    margin: 0;
    padding: 0;
    height: 28px;
    display: flex;
    align-items: flex-end;
}
.navbar-primary-section .nav-label {
    display: block;
    margin: 0 12px 5px 20px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.34);
}
.navbar-primary.collapsed .navbar-primary-section { justify-content: center; align-items: center; }
.navbar-primary.collapsed .navbar-primary-section .nav-label { display: none; }
.navbar-primary.collapsed .navbar-primary-section::after {
    content: "";
    width: 22px;
    height: 1px;
    background: rgba(255,255,255,0.14);
}
.navbar-primary.collapsed.expanded .navbar-primary-section { justify-content: flex-start; align-items: flex-end; }
.navbar-primary.collapsed.expanded .navbar-primary-section .nav-label { display: block; }
.navbar-primary.collapsed.expanded .navbar-primary-section::after { display: none; }

/* Separateur fin avant la zone compte/session (footer) */
.navbar-primary-menu li.navbar-primary-sep {
    height: 0;
    margin: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.navbar-primary.collapsed .navbar-primary-sep { margin: 8px 10px; }
/* ============================================================
   Variante CLAIRE (preview) - activee via navTheme='light' (menu.html.twig)
   Sidebar claire alignee sur le "modern white" : fond gris tres clair,
   texte navy muet, actif en teal-light + barre teal. !important assume
   (theme self-contained, scope sous .navbar-primary--light).
   NB: couleur des logos non geree ici (a la main par l'utilisateur).
   ============================================================ */
.navbar-primary.navbar-primary--light { background-color: #f7f8fa !important; border-right: 1px solid #e2e8f0; }
.navbar-primary--light .navbar-primary-menu li a { color: #415873; }
.navbar-primary--light .navbar-primary-menu li a > i { color: #64748b; }
.navbar-primary--light .navbar-primary-menu li a:not(.link-disabled):hover { background-color: #eef1f5 !important; color: #2D3E50 !important; }
.navbar-primary--light .navbar-primary-menu li a:not(.link-disabled):hover > i { color: #2D3E50; }
.navbar-primary--light .navbar-primary-menu li a.active { background-color: #e6f7f5 !important; color: #2D3E50 !important; }
.navbar-primary--light .navbar-primary-menu li a.active > i { color: #0d9488 !important; }
.navbar-primary--light .navbar-primary-section .nav-label { color: #94a3b8; }
.navbar-primary--light .navbar-primary-section::after { background: #e2e8f0 !important; }
.navbar-primary--light .navbar-primary-sep { border-top-color: #e2e8f0; }
.navbar-primary--light .text-white { color: #2D3E50 !important; }
.navbar-primary--light .btn-expand-collapse { color: #415873 !important; }
.navbar-primary--light .btn-expand-collapse:hover { color: #2D3E50 !important; }
/* Alignement des libelles : icones a largeur fixe. Sans ca, fa-users (Communautes)
   et fa-check-double (Demandes) ont des largeurs differentes -> libelles decales. */
.navbar-primary-menu li a > i { width: 18px; text-align: center; }

/* Picto mybuyerwork centre horizontalement en mode replie (pl-3 cassait le centrage). */
.navbar-primary.collapsed .nav-picto { padding-left: 0 !important; padding-right: 0 !important; text-align: center; }
/* ...et meme position horizontale du picto en deplie (evite le decalage a droite au survol). */
.navbar-primary-menu-header .nav-label-logo { padding-left: 12px !important; }
/* Icones plus "legeres" : FA5 Free ne propose que far (400) en outline -> pas moyen
   d'amincir le trait (fal/fat = FA Pro). On adoucit le rendu percu : antialiasing
   + blanc legerement attenue. L'item actif reste teal, le hover repasse en blanc franc. */
.navbar-primary-menu li a > i {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: rgba(255,255,255,0.82);
}
.navbar-primary .navbar-primary-menu li a:not(.link-disabled):hover > i { color: #fff; }
/* Le selecteur de langue genere ses .dropdown-item DANS .navbar-primary-menu :
   les regles generiques d'items de nav debordaient dessus. On neutralise cet
   heritage et on garantit l'affichage des drapeaux dans le dropdown. */
.navbar-primary-menu .dropdown-menu .dropdown-item {
    margin: 0 !important;
    padding: .25rem 1rem .25rem .5rem !important;
}
.navbar-primary-menu .dropdown-menu .dropdown-item::before { content: none !important; }
.navbar-primary-menu .dropdown-menu img {
    display: inline-block !important;
    height: auto !important;
    width: 20px !important;
    vertical-align: middle;
    opacity: 1 !important;
}
/* ============================================================
   Style icones "chip" repris du mockup home (2026-06-14).
   Icone douce #9fb0c0 dans une pastille arrondie translucide ;
   actif = pastille teal + icone blanche (plus de barre laterale).
   Override consolide place en fin de fichier -> gagne sur les regles plus haut.
   ============================================================ */
.navbar-primary-menu li a > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-md, 6px);
    background: rgba(255,255,255,0.08);
    color: #9fb0c0;
    font-size: 0.85rem;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
}
/* Hover : pas de fond de ligne, juste la pastille qui s'eclaire */
.navbar-primary .navbar-primary-menu li a:not(.link-disabled):hover { background-color: transparent; }
.navbar-primary .navbar-primary-menu li a:not(.link-disabled):hover > i { background: rgba(255,255,255,0.14); color: #fff; }
/* Actif : pastille teal + icone blanche, pas de fond de ligne ni de barre */
.navbar-primary-menu li a.active { background-color: transparent !important; }
.navbar-primary-menu li a.active::before { display: none !important; }
.navbar-primary-menu li a.active > i { background: rgba(13,148,136,0.32) !important; color: #fff !important; }
/* Badge repositionne sur le coin haut-droit de la pastille */
.navbar-primary-menu li a .badge { left: 28px !important; top: -3px !important; }
/* ============================================================
   Navbar — corrections post-mockup (2026-06-14 b)
   Scope strict niveau 1 (> li > a) : mes regles ne doivent PAS toucher les
   .dropdown-item du selecteur de langue (eux aussi li>a sous .navbar-primary-menu).
   ============================================================ */

/* Items niveau 1 : flex -> pastille + libelle centres verticalement, espacement resserre */
.navbar-primary-menu > li > a {
    display: flex !important;
    align-items: center;
    margin: 2px 8px;
    padding: 3px 9px;
}
.navbar-primary-menu > li > a .nav-label { margin-left: 12px; white-space: nowrap; }
.navbar-primary-menu > li > a > i { width: 26px; height: 26px; font-size: 0.82rem; }

/* Mode replie SEUL (pas l'etat survole 'collapsed expanded') : pastille centree.
   Sinon le centrage bavait sur la vue depliee au survol -> items non alignes a gauche. */
.navbar-primary.collapsed:not(.expanded) .navbar-primary-menu > li > a { justify-content: center; padding-left: 0; padding-right: 0; }

/* Dropdown du selecteur de langue : restaurer un rendu lisible (mes regles
   d'items le polluaient) + garantir l'affichage des drapeaux. */
.navbar-primary-menu .dropdown-menu .dropdown-item {
    margin: 0 !important;
    padding: .4rem .85rem !important;
    background-color: transparent !important;
    color: #e8eef4 !important;
}
.navbar-primary-menu .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}
.navbar-primary-menu .dropdown-menu .dropdown-item.active,
.navbar-primary-menu .dropdown-menu .dropdown-item.selected {
    background-color: rgba(13,148,136,0.40) !important;
    color: #fff !important;
}
.navbar-primary-menu .dropdown-menu .dropdown-item img {
    display: inline-block !important;
    width: 20px !important;
    height: auto !important;
    margin-right: 8px;
    vertical-align: middle;
}
/* Menu deroulant du selecteur de langue : largeur min lisible (sinon trop etroit
   en mode replie -> contenu/drapeaux qui debordent). */
.navbar-primary .bootstrap-select .dropdown-menu { min-width: 170px !important; }
/* ── Alignement colonne d'icones : COMPTE (avatar + drapeau langue) & titres ── */
/* Titres de section alignes sur le bord gauche des pastilles (~17px) */
.navbar-primary-section .nav-label { margin-left: 17px !important; }

/* Avatar profil : meme gabarit que les pastilles (26px), aligne a gauche */
.navbar-primary-menu > li > a .md-circled {
    width: 26px !important; height: 26px !important; min-width: 26px !important;
    line-height: 26px !important; margin: 0 8px 0 0 !important; float: none !important; flex-shrink: 0;
}
.navbar-primary-menu > li > a .md-circled img { width: 26px !important; height: 26px !important; }

/* Selecteur de langue : drapeau actif aligne sur la colonne d'icones */
.navbar-primary .bootstrap-select { margin: 2px 8px !important; width: calc(100% - 16px) !important; }
.navbar-primary .bootstrap-select > .btn { padding: 4px 9px !important; background: transparent !important; box-shadow: none !important; }
.navbar-primary .bootstrap-select .filter-option-inner-inner img { width: 22px !important; margin: 0 8px 0 0 !important; vertical-align: middle; }

/* Badge compteur sur le coin haut-droit de la pastille */
.navbar-primary-menu > li > a .badge { left: 32px !important; top: -4px !important; }
/* Compteurs (Communautes, Demandes) : rouge moins sature, plus doux sur le navy. */
.navbar-primary .badge-danger { background-color: #d96a6a !important; }
/* ── Mode replie : centrer proprement avatar + drapeau langue (items speciaux) ── */
/* Avatar : retirer la marge droite qui le decentrait en replie */
.navbar-primary.collapsed:not(.expanded) .navbar-primary-menu > li > a .md-circled { margin-right: 0 !important; }

/* Selecteur de langue : juste le drapeau centre, sans chevron ni texte, sans debordement */
.navbar-primary.collapsed:not(.expanded) .bootstrap-select { margin: 2px 0 !important; width: 100% !important; }
.navbar-primary.collapsed:not(.expanded) .bootstrap-select > .btn { padding: 4px 0 !important; text-align: center !important; }
.navbar-primary.collapsed:not(.expanded) .bootstrap-select .filter-option,
.navbar-primary.collapsed:not(.expanded) .bootstrap-select .filter-option-inner,
.navbar-primary.collapsed:not(.expanded) .bootstrap-select .filter-option-inner-inner { text-align: center !important; }
.navbar-primary.collapsed:not(.expanded) .bootstrap-select .filter-option-inner-inner img { margin: 0 !important; }
.navbar-primary.collapsed:not(.expanded) .bootstrap-select .btn::after,
.navbar-primary.collapsed:not(.expanded) .bootstrap-select .bs-caret { display: none !important; }
/* Avatar + drapeau langue : legerement plus petits que les pastilles (26px) */
.navbar-primary-menu > li > a .md-circled { width: 22px !important; height: 22px !important; min-width: 22px !important; line-height: 22px !important; }
.navbar-primary-menu > li > a .md-circled img { width: 22px !important; height: 22px !important; }
.navbar-primary .bootstrap-select .filter-option-inner-inner img { width: 18px !important; }

/* Logo MBW : meme taille (32px) et meme position du picto en replie et deplie
   -> plus de glissement / agrandissement au survol-deplier.
   Centre en replie sur 60px = (60-32)/2 = 14px = padding-left en deplie. */
.navbar-primary-menu-header .nav-picto img,
.navbar-primary-menu-header .nav-label-logo img { width: 32px !important; height: 32px !important; }
.navbar-primary-menu-header .nav-label-logo { padding-left: 14px !important; }
/* Compteurs en mode replie : ancrer le badge a DROITE (et non a gauche) pour que les
   nombres a 2 chiffres ne touchent/depassent plus le bord de la barre repliee. */
.navbar-primary.collapsed:not(.expanded) .navbar-primary-menu > li > a .badge {
    left: auto !important;
    right: 8px !important;
    top: -4px !important;
}
/* Zone "Compte" (titre, logo compte, Administration, Profil, Langue, Deconnexion) :
   masquee en mode replie pour alleger la barre ; reapparait au survol / en deplie.
   Le bouton Deplier reste visible (sans .nav-compte) pour pouvoir rouvrir la barre. */
/* Zone Compte en replie : invisible MAIS place reservee (visibility, pas display)
   -> les icones de section sont au meme niveau vertical en replie et en deplie. */
.navbar-primary.collapsed:not(.expanded) .nav-compte { visibility: hidden !important; }
/* Alignement des libelles avatar + langue sur les libelles des items a pastille (~55px) */
.navbar-primary-menu > li > a .md-circled { margin-right: 4px !important; }
.navbar-primary .bootstrap-select .filter-option-inner-inner img { width: 18px !important; margin: 0 20px 0 0 !important; }

/* Bouton epingle (remplace Deplier/Replier) : la barre se deplie deja au survol,
   l'epingle sert a la FIXER ouverte. Epinglee = pastille teal + epingle droite ;
   non epinglee = epingle grisee inclinee. On ne tourne que le glyphe (::before). */
.navbar-primary .btn-expand-collapse > i::before { display: inline-block; transition: transform 0.15s ease; transform: rotate(35deg); }
.navbar-primary .btn-expand-collapse.pinned > i::before { transform: rotate(0deg); }
.navbar-primary .btn-expand-collapse.pinned > i { color: #fff !important; background: rgba(13,148,136,0.32) !important; }
/* Epingle = controle de barre : icone NUE (sans pastille), alignee a droite.
   Override des styles d'item appliques plus haut. */
.navbar-primary-menu > li > a.btn-expand-collapse { justify-content: flex-end; padding-right: 14px; }
.navbar-primary .btn-expand-collapse > i { background: transparent !important; width: auto !important; height: auto !important; }
.navbar-primary .btn-expand-collapse.pinned > i { color: #0d9488 !important; background: transparent !important; }

/* Page Profil — selecteur de langue (boutons drapeau, grammaire DS teal) */
.prof-lang-list { display: flex; flex-wrap: wrap; gap: 10px; }
.prof-lang-btn { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); color: #415873; text-decoration: none; font-size: 0.85rem; background: #fff; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.prof-lang-btn:hover { border-color: #0d9488; color: #0d9488; background: #f0fafa; text-decoration: none; }
.prof-lang-btn.active { border-color: #0d9488; background: #e6f7f5; color: #0d9488; font-weight: 500; }

/* ===== Page Profil — refonte DS (chantier 2026-06-18) : page réglages en colonne centrée ===== */
/* overflow:hidden sur le body → la .ds-page (100vh) contient le scroll (seul .ds-scroll-zone défile).
   Sans ça, le body scrolle sous la navbar fixe et le clic sur un avatar provoque un saut. */
body.prof-body { overflow: hidden; }
/* Header sans trait : les onglets de page juste en dessous portent leur propre bordure. */
.prof-page .ds-page-header { border-bottom: none; }
/* Colonne centrée — vit dans la .ds-scroll-zone (scroll interne, header + onglets fixes). */
.prof-wrap { max-width: 1140px; margin: 0 auto; padding: 24px 0 48px; }

/* Onglets de page (panes affichés/masqués en JS custom).
   position+z-index+fond : la barre passe AU-DESSUS du contenu qui défile, sinon le contenu blanc
   recouvre le débord d'1px du soulignement teal (margin-bottom:-1px des onglets) → trait qui s'affine. */
.prof-page-tabs { flex-shrink: 0; position: relative; z-index: 2; background: #fff; }
.prof-pane { display: none; }
.prof-pane.prof-pane-active { display: block; }

/* « Au démarrage » — pills à enregistrement instantané (même grammaire que les boutons langue) */
.prof-dsru-list { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-dsru-btn { padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff; color: #415873; font-size: 0.85rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.prof-dsru-btn:hover { border-color: #0d9488; color: #0d9488; background: #f0fafa; }
.prof-dsru-btn.active { border-color: #0d9488; background: #e6f7f5; color: #0d9488; font-weight: 500; }
/* Pas de cadre noir persistant au clic souris ; ring teal seulement au clavier (cf. DS focus-visible). */
.prof-dsru-btn:focus { outline: none; }
.prof-dsru-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* Onglet Préférences : chaque réglage (Langue, Page de démarrage) porte sa propre carte depuis
   le 2026-09-01 : l'espacement vient du padding de .prof-card-body, plus d'une marge de groupe
   (qui ajoutait un vide sous la dernière carte, avant « Notifications par e-mail »). */
#prof-pane-pref .prof-field-group { margin-bottom: 0; }
/* Espace entre l'aide éventuelle et les boutons de choix en dessous. */
#prof-pane-pref .prof-lang-list,
#prof-pane-pref .prof-dsru-list { margin-top: 4px; }

/* Grille avatars : 10 par ligne dans le profil élargi */
.prof-card .ds-avatar-picker { max-width: none; grid-template-columns: repeat(10, 1fr); }

/* Les labels des pickers contiennent un <input> masqué en position:absolute (.ds-visually-hidden).
   Sans parent positionné, le focus de cet input (au clic) fait défiler la zone « au mauvais endroit »
   (page qui semble cassée avec overflow:hidden). On confine l'input à sa tuile. */
.prof-card .ds-avatar-tile,
.prof-card .ds-color-swatch { position: relative; }

/* ── Zone Apparence : aperçu sticky à gauche + contrôles à droite ── */
/* Tuile « Aucun » à la même taille que les vignettes d'avatars (au lieu d'une grande cellule de grille). */
.prof-card .ds-avatar-picker-top { display: flex; }
.prof-card .ds-avatar-tile-none { width: 56px; height: 56px; box-sizing: border-box; aspect-ratio: auto; }
.prof-card .ds-avatar-tile-none .ds-avatar-none-label { font-size: 0.56rem; }
.prof-appearance { display: flex; gap: 28px; align-items: flex-start; }
.prof-appearance-preview {
    flex: 0 0 190px; position: sticky; top: 0; align-self: flex-start;
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 18px 16px; background: #fff;
    border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px);
}
.prof-preview-title { font-size: 0.68rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.prof-preview-name { font-size: 0.82rem; font-weight: 500; color: #2D3E50; }
.prof-appearance-controls { flex: 1 1 auto; min-width: 0; }
.prof-field-group { margin-bottom: 24px; }
.prof-field-group:last-child { margin-bottom: 0; }
.prof-field-label { font-size: 0.82rem; font-weight: 500; color: #2D3E50; margin-bottom: 4px; }
.prof-field-hint { font-size: 0.72rem; color: #8fa1b3; margin-bottom: 10px; }
@media (max-width: 768px) {
    .prof-appearance { flex-direction: column; gap: 18px; }
    .prof-appearance-preview { position: static; flex-basis: auto; width: 100%; max-width: 220px; }
}

/* Champ de sélection de photo : largeur réduite */
.prof-photo-input { max-width: 340px; }
/* Lien « Supprimer la photo » (visible quand une photo est présente). */
.prof-photo-remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 0; background: none; border: none; color: #8fa1b3; font-size: 0.78rem; cursor: pointer; }
.prof-photo-remove:hover { color: #ef4444; }
.prof-photo-remove:focus { outline: none; }
.prof-photo-remove:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.prof-photo-remove i { font-size: 0.72rem; }
.prof-photo-input .custom-file,
.prof-photo-input input[type="file"] { width: 100%; }

/* Cartes (grammaire .ctx-info-card : bordure transparente, pas d'ombre, trait sous titre) */
.prof-card { background: #fff; border: 1px solid transparent; border-radius: var(--r-lg, 10px); margin-bottom: 16px; }
.prof-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid rgba(45,62,80,0.22); min-height: 48px; box-sizing: border-box; }
.prof-card-icon { color: #0d9488; font-size: 0.9rem; }
.prof-card-title { font-size: 0.9rem; font-weight: 500; color: #2D3E50; margin: 0; }
.prof-card-body { padding: 16px 20px; }

/* Lignes label / champ */
.prof-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.prof-row:last-child { margin-bottom: 0; }
.prof-row-top { align-items: flex-start; }
/* Variante empilée (label complet au-dessus du champ) — utilisée pour les libellés longs (ex. dsru). */
.prof-row-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.prof-row-label { flex: 0 0 180px; max-width: 180px; font-size: 0.78rem; color: #8fa1b3; }
.prof-row-label-full { flex: none; max-width: none; }
.prof-row-field { flex: 1 1 auto; min-width: 0; }
.prof-row-ro .prof-row-field { font-size: 0.82rem; font-weight: 500; color: #2D3E50; }

/* Champs de formulaire dans les cartes profil → look DS */
.prof-card input[type="text"],
.prof-card input[type="tel"],
.prof-card input[type="email"],
.prof-card input[type="password"],
.prof-card select {
    width: 100%; max-width: 360px; height: 38px;
    padding: 6px 10px; font-size: 0.85rem; color: #2D3E50;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff;
}
.prof-card input[type="text"]:focus,
.prof-card input[type="tel"]:focus,
.prof-card input[type="email"]:focus,
.prof-card input[type="password"]:focus,
.prof-card select:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); }

/* Apparence actuelle (cercle macro user_picture agrandi : photo / avatar / initiales) */
.prof-current-avatar .ds-uc,
.prof-current-avatar .lg-circled { width: 72px !important; height: 72px !important; line-height: 72px !important; font-size: 1.5rem !important; }
.prof-current-avatar .lg-circled img { width: 72px !important; height: 72px !important; object-fit: cover; border-radius: 50%; }
.prof-current-avatar .ds-uc > div { font-size: 1.5rem !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; font-weight: 500 !important; }

/* Aperçu photo + champ d'upload */
.prof-picture-field { display: flex; align-items: center; gap: 16px; }
.prof-picture-preview img { display: block; border-radius: 50%; }
.prof-picture-help { margin-top: 6px; }

.prof-actions { margin-top: 4px; }

/* Lien CGU en pied de page */
.prof-gtu { margin-top: 8px; text-align: center; }
.prof-gtu a { font-size: 0.82rem; color: #8fa1b3; text-decoration: none; }
.prof-gtu a:hover { color: #0d9488; text-decoration: underline; }

/* Cropper (déplacé depuis le <style> inline de profile.html.twig) */
.img-container img { max-width: 100%; }
.cropper-view-box,
.cropper-face,
#profilePicturePreview { border-radius: 50%; }

/* ===== Page d'accueil (home) - chantier 2026-06-14. Classes prefixees home-* pour eviter collisions (.row/.card Bootstrap). ===== */
.home-page{
  --home-navy:#2D3E50; --home-mid:#415873; --home-muted:#94a3b4;
  --home-teal:#0d9488; --home-teal-light:#e6f7f5;
  --home-border:#edf0f4; --home-row-sep:#f4f6f9; --home-hover:#f8fafc;
  --home-crit:#ef4444; --home-warn:#F97316;
  --home-prj:#0d9488; --home-prj-bg:#e6f7f5;
  --home-rfx:#4b7bb5; --home-rfx-bg:#eaf1f8;
  --home-ctr:#6b5fa5; --home-ctr-bg:#efeaf6;
  --home-ent:#a07840; --home-ent-bg:#f5efe4;
  --home-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --home-shadow-hover:0 4px 14px rgba(16,24,40,.08);
  font-size:14px; color:var(--home-navy); padding:30px 44px 56px; max-width:1480px;
}
.home-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:32px;}
.home-hello{font-family:'Anton',sans-serif;font-weight:400;font-size:1.95rem;letter-spacing:.02em;color:var(--home-navy);line-height:1.1;margin:0;}
.home-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.home-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius: var(--r-sm, 3px);font-size:.76rem;font-weight:500;cursor:pointer;text-decoration:none;transition:transform .12s;}
.home-pill:hover{transform:translateY(-1px);text-decoration:none;}
.home-pill .d{width:7px;height:7px;border-radius:50%;}
.home-pill.is-crit{background:#fdecea;color:#c0392b;} .home-pill.is-crit .d{background:var(--home-crit);}
.home-pill.is-warn{background:#fdefe2;color:#c05a16;} .home-pill.is-warn .d{background:var(--home-warn);}
.home-pill.is-info{background:var(--home-rfx-bg);color:var(--home-rfx);} .home-pill.is-info .d{background:var(--home-rfx);}
.home-header-right{text-align:right;}
.home-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px;}
.home-act{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius: var(--r-md, 6px);font-size:.8rem;font-weight:500;cursor:pointer;text-decoration:none;background:#fff;color:var(--home-mid);border:1px solid var(--home-border);box-shadow:var(--home-shadow);transition:all .15s;}
.home-act:hover{color:var(--home-teal);border-color:#bfe6e1;transform:translateY(-1px);text-decoration:none;}
.home-act.primary{background:var(--home-teal);color:#fff;border-color:var(--home-teal);}
.home-act.primary:hover{background:#0b7d72;color:#fff;}
.home-act i{font-size:.76rem;}
.home-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.home-kpi{background:#fff;border:1px solid var(--home-border);border-top-color:transparent;border-right-color:transparent;border-radius: var(--r-lg, 10px);box-shadow:none;padding:15px 16px;text-decoration:none;display:flex;align-items:center;gap:13px;transition:background .12s;}
.home-kpi:hover{background:#f4f6f9;text-decoration:none;}
/* Soulignement du lien d'alerte (« X en retard/échéance ») dès l'entrée dans la tuile, pas seulement au survol direct du lien. */
.home-kpi:hover .home-hot-link{text-decoration:underline;}
.home-kpi-ic{width:38px;height:38px;border-radius: var(--r-lg, 10px);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:var(--accent-bg);color:var(--accent);}
.home-kpi-txt{min-width:0;}
.home-kpi-val{font-size:1.55rem;font-weight:700;color:var(--home-navy);line-height:1;display:block;}
.home-kpi-name{font-size:.73rem;color:var(--home-muted);margin-top:4px;display:block;}
.home-hot{color:var(--home-warn);font-weight:600;}
.home-kpi.prj{--accent:var(--home-prj);--accent-bg:var(--home-prj-bg);}
.home-kpi.rfx{--accent:var(--home-rfx);--accent-bg:var(--home-rfx-bg);}
.home-kpi.ctr{--accent:var(--home-ctr);--accent-bg:var(--home-ctr-bg);}
.home-kpi.ent{--accent:var(--home-ent);--accent-bg:var(--home-ent-bg);}
.home-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-template-areas:"todo todo todo risk risk risk" "favorites favorites recent recent cons cons";gap:24px 40px;align-items:start;}
.home-b-todo{grid-area:todo;} .home-b-risk{grid-area:risk;} .home-b-favorites{grid-area:favorites;} .home-b-cons{grid-area:cons;} .home-b-recent{grid-area:recent;}
.home-card{background:#fff;border:1px solid var(--home-border);border-top-color:transparent;border-right-color:transparent;border-radius: var(--r-lg, 10px);box-shadow:var(--home-shadow);overflow:hidden;}
.home-card.is-hero{border-left-color:transparent;border-bottom-color:var(--home-border);}
.home-card-head{display:flex;align-items:center;gap:9px;padding:13px 17px 13px 0;margin-left:17px;border-bottom:1px solid rgba(45,62,80,.22);}
.home-b-todo .home-card-head{border-bottom-color:#0d9488;}
.home-b-risk .home-card-head{border-bottom-color:#c2873f;}
.home-b-cons .home-card-head{border-bottom-color:#4b7bb5;}
.home-b-recent .home-card-head{border-bottom-color:#0d9488;}
.home-card-ic{font-size:.9rem;width:16px;text-align:center;}
.home-card-title{font-size:.82rem;font-weight:600;color:var(--home-navy);}
.home-card-count{font-size:.64rem;font-weight:600;border-radius: var(--r-sm, 3px);padding:2px 7px;}
.home-card-tools{margin-left:auto;display:flex;align-items:center;gap:8px;}
.home-seeall{font-size:.74rem;color:var(--home-muted);text-decoration:none;display:inline-flex;align-items:center;gap:5px;font-weight:500;}
.home-seeall:hover{color:var(--home-teal);text-decoration:none;}
.home-filters{display:inline-flex;gap:3px;}
.home-filt{width:25px;height:25px;border-radius: var(--r-md, 6px);border:none;background:transparent;color:#bcc7d3;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;transition:all .15s;}
.home-filt:hover{color:var(--home-mid);}
.home-filt.active{background:var(--accent-bg);color:var(--accent);}
.home-filt.prj{--accent:var(--home-prj);--accent-bg:var(--home-prj-bg);}
.home-filt.rfx{--accent:var(--home-rfx);--accent-bg:var(--home-rfx-bg);}
.home-filt.ctr{--accent:var(--home-ctr);--accent-bg:var(--home-ctr-bg);}
.home-filt.ent{--accent:var(--home-ent);--accent-bg:var(--home-ent-bg);}
.home-row{display:flex;align-items:center;gap:12px;padding:9px 17px;border-bottom:1px solid var(--home-row-sep);text-decoration:none;color:inherit;transition:background .12s;}
.home-row:last-child{border-bottom:none;}
.home-row:hover{background:var(--home-hover);text-decoration:none;}
.home-dom{width:28px;height:28px;border-radius: var(--r-md, 6px);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.74rem;background:transparent;color:var(--accent);transition:background .12s;}
.home-dom.prj{--accent:var(--home-prj);--accent-bg:var(--home-prj-bg);}
.home-dom.rfx{--accent:var(--home-rfx);--accent-bg:var(--home-rfx-bg);}
.home-dom.ctr{--accent:var(--home-ctr);--accent-bg:var(--home-ctr-bg);}
.home-dom.ent{--accent:var(--home-ent);--accent-bg:var(--home-ent-bg);}
.home-dom.neutral{--accent:#5b7083;--accent-bg:#eef2f6;}
/* fond coloré derrière l'icône uniquement au survol de la ligne (au repos : icône colorée sur fond transparent) */
.home-row:hover .home-dom,.home-recent:hover .home-dom,.home-search-item:hover .home-dom{background:var(--accent-bg);}
.home-row-main{min-width:0;flex:1;display:flex;flex-direction:column;}
.home-row-title{font-size:.8rem;font-weight:400;color:var(--home-mid);white-space:normal;overflow-wrap:anywhere;}
.home-row-meta{font-size:.7rem;color:var(--home-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-row-meta .ent{color:var(--home-mid);font-weight:500;}
.home-tag{display:inline-block;font-size:.62rem;font-weight:500;border-radius: var(--r-sm, 3px);padding:1px 7px;margin-left:7px;vertical-align:middle;border:1px solid;background:#fff;}
.home-tag.is-crit{color:#c0392b;border-color:#f3c0bb;}
.home-tag.is-warn{color:#c05a16;border-color:#f6d2b0;}
.home-tag.is-info{color:var(--home-teal);border-color:#bfe6e1;}
.home-row-key{flex-shrink:0;text-align:right;}
.home-row-key-num{font-size:.82rem;font-weight:500;line-height:1;color:var(--home-mid);display:block;}
.home-todo-divider{height:0;border-top:1px solid #e2e7ee;margin:6px 16px;}
.home-row-key-num.is-crit{color:var(--home-crit);} .home-row-key-num.is-warn{color:var(--home-warn);} .home-row-key-num.is-teal{color:var(--home-teal);}
.home-row-key-lbl{font-size:.6rem;color:var(--home-muted);margin-top:2px;display:block;}
.home-row-go{flex-shrink:0;color:#cbd5e1;font-size:.7rem;opacity:0;transition:opacity .12s;}
.home-row:hover .home-row-go{color:var(--home-teal);opacity:1;}
.home-recent-list{padding:6px;display:flex;flex-direction:column;gap:1px;}
.home-recent{display:flex;align-items:center;gap:11px;padding:5px 11px;border-radius: var(--r-md, 6px);text-decoration:none;color:inherit;transition:background .12s;}
.home-recent:hover{background:var(--home-hover);text-decoration:none;}
.home-recent-nm{font-size:.79rem;font-weight:400;color:var(--home-mid);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-recent-ph{font-size:.68rem;color:var(--home-muted);}
.home-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 22px;}
.home-empty-ic{width:46px;height:46px;border-radius: var(--r-lg, 10px);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:13px;}
.home-empty-title{font-size:.84rem;font-weight:600;color:var(--home-mid);}
.home-empty-txt{font-size:.74rem;color:var(--home-muted);margin-top:5px;max-width:250px;line-height:1.5;}
.home-empty-cta{margin-top:14px;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border:1px solid var(--home-border);border-radius: var(--r-md, 6px);font-size:.76rem;font-weight:500;color:var(--home-teal);text-decoration:none;transition:all .15s;}
.home-empty-cta:hover{background:var(--home-teal-light);border-color:#bfe6e1;color:var(--home-teal);text-decoration:none;}/* color redéclarée : sinon a:hover Bootstrap (0,1,1) bat .home-empty-cta (0,1,0) → texte bleu */
@media(max-width:1200px){.home-kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:980px){.home-bento{grid-template-columns:1fr;grid-template-areas:"todo" "risk" "favorites" "recent" "cons";}}
@media(max-width:640px){.home-kpi-grid{grid-template-columns:1fr;}}
/* Barre DEPLIEE : repartir les sections sur toute la hauteur.
   La liste devient une colonne flex pleine hauteur ; seule la section Compte (.nav-compte) recoit
   margin-top:auto -> tout le reste des sections se regroupe en haut,
   et la zone Compte/epingle se cale en bas. (En replie pur : inchange, compact.) */
.navbar-primary .navbar-collapse { min-height: 100%; }
.navbar-primary .navbar-primary-menu { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 4px; }
.navbar-primary .navbar-primary-menu > li.navbar-primary-section.nav-compte { margin-top: auto; }
/* Moins de marge au-dessus du logo MBW */
.navbar-primary .navbar-primary-menu-header .nav-picto,
.navbar-primary .navbar-primary-menu-header .nav-label-logo { padding-top: 2px !important; padding-bottom: 2px !important; }
/* Marges haut (au-dessus du logo MBW) et bas (sous l'epingle) reduites au minimum :
   on neutralise les paddings du conteneur navbar-collapse, de la liste et du bloc logo. */
.navbar-primary .navbar-collapse { padding: 0 !important; }
.navbar-primary .navbar-primary-menu { padding-top: 2px !important; padding-bottom: 2px !important; }
.navbar-primary .navbar-primary-menu-header { padding: 0 !important; }
.navbar-primary .navbar-primary-menu-header .nav-label-logo,
.navbar-primary .navbar-primary-menu-header .nav-picto { padding-top: 0 !important; padding-bottom: 0 !important; }

/* home v2 fixes : scroll de page interne (ne plus passer sous la navbar) + scroll interne des cards + chevron */
.home-page{padding:0; max-width:none; height:100vh; display:flex; flex-direction:column; overflow:hidden; background:#fff;}
.home-scroll{flex:1; min-height:0; overflow-y:auto; padding:30px 44px 30px; max-width:1480px; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;}
.home-scroll::-webkit-scrollbar{width:8px;}
.home-scroll::-webkit-scrollbar-track{background:transparent;}
.home-scroll::-webkit-scrollbar-thumb{background:#d6dde4;border-radius:4px;}
.home-card-body{max-height:206px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:transparent transparent;}
.home-card:hover .home-card-body{scrollbar-color:#c4c9d0 transparent;}
.home-card-body::-webkit-scrollbar{width:3px;}
.home-card-body::-webkit-scrollbar-track{background:transparent;}
.home-card-body::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.home-card:hover .home-card-body::-webkit-scrollbar-thumb{background:#c4c9d0;}
.home-card.is-expanded .home-card-body{max-height:none;}
.home-expand{width:25px;height:25px;border-radius: var(--r-md, 6px);border:none;background:transparent;color:#bcc7d3;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;transition:all .15s;}
.home-expand:hover{background:var(--home-teal-light);color:var(--home-teal);}
.home-expand i{transition:transform .22s ease;}
.home-card.is-expanded .home-expand i{transform:rotate(180deg);}
/* Hauteur pleine FIABLE : min-height:100% ne se resout pas car le parent n'a pas de
   hauteur definie. On force une chaine : navbar-collapse height:100% (le nav est
   position:absolute top/bottom -> hauteur definie) + flex colonne, et la liste prend
   tout l'espace (flex:1). La distribution margin-top:auto fonctionne alors dans les 2 etats. */
.navbar-primary .navbar-collapse { height: 100% !important; display: flex !important; flex-direction: column !important; padding: 0 !important; }
.navbar-primary .navbar-primary-menu { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; }
/* Marges fines : un peu d'air au-dessus du logo MBW et sous l'epingle */
.navbar-primary .navbar-primary-menu { padding-top: 10px !important; padding-bottom: 10px !important; }
/* Bouton Accueil : un peu d'air au-dessus, et colle a la 1re section en dessous
   (on retire la marge auto sous Accueil pour la 1re section) */
.navbar-primary-menu > li.nav-home { margin-top: 8px; }
.navbar-primary .navbar-primary-menu > li.navbar-primary-section.nav-sec-first { margin-top: 2px !important; }

/* home v3 fix : colonnes egales + pas de scrollbar horizontale (overflow-y:auto force l axe x en auto) */
.home-bento{grid-template-columns:repeat(6,1fr);}
.home-card-body{overflow-x:hidden;}

/* home : 40px entre les 4 tuiles d entete (KPI) */
.home-kpi-grid{gap:40px;}

/* home : tuiles KPI sans fond (transparent) — seul le fond coloré derrière l'icône subsiste */
.home-kpi{background:transparent;}

/* home : 20px entre les 4 tuiles KPI d entete */
.home-kpi-grid{gap:20px;}

/* home : salutation plus grande. !important obligatoire car app.css impose `.h1, h1 {font-size:1.4rem !important}` (ligne ~1200) qui écrasait toutes nos règles quelle que soit la spécificité. */
.home-header h1.home-hello{font-size:2.4rem !important;line-height:1.05;}
.home-hello-wave{font-size:.68em;}

/* === Drawer epure (chantier drawers 2026-06-15) ===
   Bordure des champs transparente au repos, visible seulement au hover/focus.
   Etape 1 = drawer Projet. Etape 2 etendra les memes regles a .drawer-contract. */
/* 2026-06-21 : au repos = traits bas + gauche gris (au lieu d'encadré transparent), hover/focus = bas teal. */
.drawer-project .form-control { border-color: transparent; border-bottom-color: #dde1e7; border-left-color: #dde1e7; transition: border-color .12s ease, box-shadow .12s ease; }
.drawer-project .form-control:hover { border-bottom-color: #0d9488; }
.drawer-project .form-control:focus { border-bottom-color: #0d9488; }
.drawer-project .bootstrap-select > .btn { border-color: transparent !important; border-bottom-color: #dde1e7 !important; border-left-color: #dde1e7 !important; transition: border-color .12s ease; }
.drawer-project .bootstrap-select:hover > .btn { border-bottom-color: #0d9488 !important; }
.drawer-project .bootstrap-select > .btn:focus,
.drawer-project .bootstrap-select.show > .btn { border-bottom-color: #0d9488 !important; }
/* En display (readonly) : aucun encadre meme au hover -> les champs ressemblent a des valeurs lues. */
.drw-prj-readonly-mode .form-control,
.drw-prj-readonly-mode .form-control:hover,
.drw-prj-readonly-mode .form-control:focus,
.drw-prj-readonly-mode .bootstrap-select > .btn,
.drw-prj-readonly-mode .bootstrap-select:hover > .btn { border-color: transparent !important; box-shadow: none !important; }

/* Crayon "passer en edition" dans l'en-tete du drawer display Projet (chantier drawers 2026-06-15). */
.drw-prj-display-edit { color: #fff; opacity: .85; font-size: .95rem; display: inline-flex; align-items: center; transition: opacity .15s; }
.drw-prj-display-edit:hover { color: #fff; opacity: 1; text-decoration: none; }

/* Display Projet : pas d'asterisque "obligatoire" ni de chevron de dropdown (champs non editables, chantier drawers 2026-06-15). */
.drw-prj-readonly-mode label .text-danger,
.drw-prj-readonly-mode legend .text-danger,
.drw-prj-readonly-mode .drw-prj-field-label .text-danger { display: none !important; }
.drw-prj-readonly-mode .bootstrap-select .bs-caret { display: none !important; }

/* Display : le nom du projet est deja dans l'en-tete du drawer -> masquer le champ nom dupplique en dessous. */
.drw-prj-readonly-mode .drw-prj-name-field { display: none !important; }

/* Contexte "et qualification" inline read-only en display Projet + description HTML rendue (chantier drawers 2026-06-15). */
.drw-prj-ctx-inline { padding: 16px 20px 0; margin-top: 6px; border-top: 1px solid #eef1f4; }
.drw-prj-ctx-inline-title { font-size: 0.8rem; font-weight: 600; color: #2D3E50; margin: 0 0 12px; }
/* Sous-titre de section dans le drawer Projet (ex. « Informations spécifiques ») — calque .drw-ctr-subtitle. 2026-07-19 */
.drw-prj-subtitle { font-size: 0.79rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(13,148,136,0.2); }
.drw-prj-readonly-html { font-size: 0.84rem; color: #415873; line-height: 1.5; }
.drw-prj-readonly-html p:last-child { margin-bottom: 0; }

/* Display Projet : masquer TOUS les chevrons de dropdown (selectpicker .caret/.bs-caret + caret Bootstrap natif) + fleche select natif. */
.drw-prj-readonly-mode .bootstrap-select .caret,
.drw-prj-readonly-mode .bootstrap-select .bs-caret,
.drw-prj-readonly-mode .bootstrap-select > .btn::after,
.drw-prj-readonly-mode .dropdown-toggle::after { display: none !important; }
.drw-prj-readonly-mode select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; }
/* ── Drawer Contrat — fiche read-only épurée (étape 2 chantier drawers display 2026-06-15) ── */
.drw-ctr-ro-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.drw-ctr-ro-pill { font-size: 0.8rem; font-weight: 500; padding: 3px 12px; border-radius: var(--r-sm, 3px); line-height: 1.5; }
.drw-ctr-ro-section { margin-bottom: 22px; }
.drw-ctr-ro-section .drw-ctr-subtitle { margin-top: 0; }
.drw-ctr-ro-docs { display: flex; flex-direction: column; gap: 2px; }
.drw-ctr-ro-doc { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f2f5; font-size: 0.9rem; }
.drw-ctr-ro-doc:last-child { border-bottom: none; }
.drw-ctr-ro-doc-icon { color: #8fa1b3; flex: 0 0 auto; }
.drw-ctr-ro-doc-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2D3E50; }
.drw-ctr-ro-doc-cat { flex: 0 0 auto; color: #6b7280; font-size: 0.82rem; }
.drw-ctr-ro-doc-size { flex: 0 0 auto; color: #9ca3af; font-size: 0.8rem; }
.drw-ctr-ro-doc-actions { flex: 0 0 auto; display: inline-flex; gap: 10px; }
.drw-ctr-ro-doc-actions a { color: #0d9488; }
.drw-ctr-ro-doc-actions a:hover { color: #0a7c72; }
.drw-ctr-display-edit { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.drw-ctr-display-edit:hover { color: #fff; }
/* Fiche read-only Contrat : champs property-driven empilés label-au-dessus-valeur (calque .drw-ctr-field
   du drawer edit). Ciblage précis des colonnes standard col-md-4/col-md-8 pour ne pas casser les lignes
   spéciales du partial (description pleine largeur col-md-12, fournisseur/parent en 2× col-6). */
.drw-ctr-ro .row.ml-2 { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 14px !important; }
.drw-ctr-ro .row.ml-2 > div { padding-left: 0 !important; padding-right: 0 !important; }
.drw-ctr-ro .row.ml-2 .col-md-4 { flex: 0 0 100%; max-width: 100%; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #8fa1b3; margin-bottom: 3px; line-height: 1.3; }
.drw-ctr-ro .row.ml-2 .col-md-8 { flex: 0 0 100%; max-width: 100%; color: #2D3E50; font-size: 0.92rem; line-height: 1.4; }
.drw-ctr-ro .row.ml-2 .auto-truncated { white-space: normal; overflow: visible; text-overflow: clip; }
.drw-ctr-ro .drw-ctr-ro-section + .drw-ctr-ro-section { margin-top: 4px; }
/* ── Drawer Contrat — mode LECTURE SEULE (calque .drw-prj-readonly-mode du drawer Projet). ──
   Le wrapper .drawer-body porte .drw-ctr-readonly-mode quand isReadOnly=true : on neutralise
   visuellement les affordances d'édition (composers, +, ×, chevrons, astérisques, bordures). */
.drw-ctr-readonly-mode .drw-ctr-cat-composer,
.drw-ctr-readonly-mode .drw-ctr-cat-help,
.drw-ctr-readonly-mode .drw-ctr-cat-add,
.drw-ctr-readonly-mode .drw-ctr-tag-field .drw-ctr-tag-source,
.drw-ctr-readonly-mode .drw-ctr-tag-field > .bootstrap-select { display: none !important; }
.drw-ctr-readonly-mode .drw-ctr-tag-remove,
.drw-ctr-readonly-mode .drw-ctr-cat-tag-remove { display: none !important; }
.drw-ctr-readonly-mode .drw-ctr-cat-tag,
.drw-ctr-readonly-mode .drw-ctr-tag { cursor: default !important; }
.drw-ctr-readonly-mode .drw-ctr-cat-tag[draggable="true"],
.drw-ctr-readonly-mode .drw-ctr-tag[draggable="true"] { -webkit-user-drag: none; }
.drw-ctr-readonly-mode .drw-ctr-owner-edit-icon { display: none !important; }
.drw-ctr-readonly-mode .form-control,
.drw-ctr-readonly-mode .form-control:hover,
.drw-ctr-readonly-mode .form-control:focus,
.drw-ctr-readonly-mode .bootstrap-select > .btn,
.drw-ctr-readonly-mode .bootstrap-select:hover > .btn { border-color: transparent !important; box-shadow: none !important; background-color: transparent !important; padding-left: 0 !important; }
.drw-ctr-readonly-mode label .text-danger,
.drw-ctr-readonly-mode legend .text-danger,
.drw-ctr-readonly-mode .drw-ctr-field-label .text-danger,
.drw-ctr-readonly-mode .drw-ctr-subtitle .text-danger { display: none !important; }
/* En readonly on garde le "soft" (« et contrat parent ») mais sans le ton estompé : il fait partie du titre. */
.drw-ctr-readonly-mode .drw-ctr-subtitle-mixed .drw-ctr-subtitle-soft { color: #0d9488; font-size: 0.78rem; }
.drw-ctr-readonly-mode .bootstrap-select .caret,
.drw-ctr-readonly-mode .bootstrap-select .bs-caret,
.drw-ctr-readonly-mode .bootstrap-select > .btn::after,
.drw-ctr-readonly-mode .dropdown-toggle::after { display: none !important; }
.drw-ctr-readonly-mode select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; }
.drw-ctr-readonly-mode .drw-ctr-name-field { display: none !important; }
/* Sous-bloc maxRenewals : neutralisé en lecture seule (radios non gérés par le form disabled). */
.drw-ctr-readonly-mode .drw-ctr-maxrenewals-options { pointer-events: none; }
/* Sections inline (Infos comp. / Documents) en lecture seule — calque .drw-prj-ctx-inline. */
.drw-ctr-ro-inline { padding-top: 6px; }
.drw-ctr-ro-inline .drw-ctr-ctx-body { padding: 0; }
/* Barre de statut en display (drawers Projet/Contrat) : pills alignées à droite sous la ligne Propriétaire. */
.drw-ctr-ro-statusbar, .drw-prj-ro-statusbar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
/* Valeur rendue en texte en lecture seule (ex. Projet parent, select2 non affichable en display). */
.drw-ctr-readonly-mode .drw-ctr-ro-value { color: #2D3E50; font-size: 0.9rem; line-height: 1.5; padding: 1px 0; }
/* Display : un peu plus d'air entre les champs de la section Infos comp. rendue inline (description / projet / montants). */
.drw-ctr-ro-inline .drw-ctr-ctx-body { gap: 18px; }
/* Display : marge sous le titre de section inline (Informations complémentaires / Documents) — pas le sous-titre Montants imbriqué. */
.drw-ctr-ro-inline > .drw-ctr-subtitle { margin-bottom: 14px; }
/* Consultations en cours — sous-textes (nom projet / phase) empilés sur 2 lignes (point 1, 2026-06-16) */
.home-meta-stack{display:flex;flex-direction:column;gap:1px;white-space:normal;overflow:visible;}
.home-meta-stack>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%;}

/* Drawer Contrat — champs sans encadre gris par defaut, bordure revelee au hover/focus
   (calque exact du drawer Projet, cf. .drawer-project ~ligne 14377). 2026-06-16.
   Pas de !important sur .form-control pour laisser le border-bottom !important du titre
   (.item-edit-title) prioritaire ; !important sur .bootstrap-select dont la base l'est. */
/* 2026-06-21 : au repos = traits bas + gauche gris (au lieu d'encadré transparent), hover/focus = bas teal. */
.drawer-contract .form-control,
.drawer-contract input[type="text"],
.drawer-contract input[type="number"],
.drawer-contract textarea { border-color: transparent; border-bottom-color: #dde1e7; border-left-color: #dde1e7; transition: border-color .12s ease, box-shadow .12s ease; }
.drawer-contract .form-control:hover,
.drawer-contract input[type="text"]:hover,
.drawer-contract input[type="number"]:hover,
.drawer-contract textarea:hover { border-bottom-color: #0d9488; }
.drawer-contract .form-control:focus,
.drawer-contract input[type="text"]:focus,
.drawer-contract input[type="number"]:focus,
.drawer-contract textarea:focus { border-bottom-color: #0d9488; }
.drawer-contract .bootstrap-select > .btn { border-color: transparent !important; border-bottom-color: #dde1e7 !important; border-left-color: #dde1e7 !important; transition: border-color .12s ease; }
.drawer-contract .bootstrap-select:hover > .btn { border-bottom-color: #0d9488 !important; }
.drawer-contract .bootstrap-select > .btn:focus,
.drawer-contract .bootstrap-select.show > .btn { border-bottom-color: #0d9488 !important; }
/* Display (readonly) : champs sans encadré (valeurs lues), neutralise les traits bas/gauche. */
.drw-ctr-readonly-mode .form-control,
.drw-ctr-readonly-mode .form-control:hover,
.drw-ctr-readonly-mode .form-control:focus,
.drw-ctr-readonly-mode input[type="text"],
.drw-ctr-readonly-mode input[type="number"],
.drw-ctr-readonly-mode textarea,
.drw-ctr-readonly-mode .bootstrap-select > .btn,
.drw-ctr-readonly-mode .bootstrap-select:hover > .btn { border-color: transparent !important; box-shadow: none !important; }
/* Input-group montant + unite (EUR / %) : addon transparent par defaut, revele avec le champ. */
.drawer-contract .drw-ctr-input-group .drw-ctr-unit { border-color: transparent !important; background: transparent !important; transition: border-color .12s ease, background .12s ease; }
.drawer-contract .drw-ctr-input-group:hover > .form-control,
.drawer-contract .drw-ctr-input-group:hover > input { border-color: #dde1e7 !important; }
.drawer-contract .drw-ctr-input-group:hover .drw-ctr-unit { border-color: #dde1e7 !important; background: #f8fafc !important; }
.drawer-contract .drw-ctr-input-group:focus-within > .form-control,
.drawer-contract .drw-ctr-input-group:focus-within > input { border-color: #0d9488 !important; }
.drawer-contract .drw-ctr-input-group:focus-within .drw-ctr-unit { border-color: #0d9488 !important; background: #f8fafc !important; }

/* Sous-compteurs « hot » cliquables des tuiles KPI Accueil (en retard / analyses / echeance). 2026-06-16. */
.home-hot-link { cursor: pointer; border-radius: 3px; transition: background .12s ease; }
.home-hot-link:hover { text-decoration: underline; }
.home-hot-link:focus-visible { outline: 2px solid var(--home-teal, #0d9488); outline-offset: 1px; }

/* Sélecteur de périmètre Accueil (étape 2) — la pill devient un bouton dropdown. 2026-06-16. */
/* Sélecteur de périmètre — segmenté horizontal (réplique visuelle de .view-switch d'Actions, palette home). */
.home-scope-seg{display:inline-flex;align-items:center;align-self:flex-end;padding:0 2px;background:#f8fafc;border:1px solid var(--home-border);border-radius: var(--r-md, 6px);gap:2px;height:34px;box-sizing:border-box;}
.home-scope-seg-item{display:inline-flex;align-items:center;height:28px;padding:0 12px;font-size:.77rem;font-weight:500;color:var(--home-muted);background:transparent;border-radius: var(--r-lg, 10px);text-decoration:none !important;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s;white-space:nowrap;}
.home-scope-seg-item:hover{color:var(--home-mid);}
.home-scope-seg-item.active{background:#fff;color:var(--home-teal) !important;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04);cursor:default;}
.home-scope-seg-item.active:hover{color:var(--home-teal) !important;}
/* tooltip explicatif des vues : petite police + texte multi-ligne aligné gauche (fond foncé natif Bootstrap conservé) */
.home-scope-tip .tooltip-inner{font-size:.72rem;line-height:1.45;max-width:260px;padding:6px 9px;text-align:left;}

/* Recherche globale Accueil (Projets / AO / Contrats / Fournisseurs). 2026-06-16. */
.home-search{position:relative;margin-left:auto;display:flex;align-items:center;height:36px;min-width:375px;max-width:540px;flex:1 1 375px;background:#fff;border:1px solid var(--home-border);border-radius: var(--r-md, 6px);box-shadow:var(--home-shadow);padding:0 10px;}
.home-search:focus-within{border-color:var(--home-teal);}
.home-search-ic{color:var(--home-muted);font-size:.8rem;flex-shrink:0;}
.home-search-input{border:none;outline:none;background:transparent;flex:1;height:100%;padding:0 8px;font-size:.82rem;color:var(--home-mid);min-width:0;}
.home-search-input::placeholder{color:var(--home-muted);}
.home-search-clear{border:none;background:transparent;color:var(--home-muted);cursor:pointer;font-size:.78rem;padding:0 2px;flex-shrink:0;}
.home-search-clear:hover{color:var(--home-crit);}
.home-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--home-border);border-radius: var(--r-md, 6px);box-shadow:0 8px 28px rgba(45,62,80,0.14);padding:4px;z-index:1050;display:none;max-height:380px;overflow-y:auto;}
.home-search-results.open{display:block;}
.home-search-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius: var(--r-md, 6px);text-decoration:none;color:var(--home-mid);}
.home-search-item:hover{background:#f1f5f9;text-decoration:none;}
.home-search-item .home-dom{flex-shrink:0;}
.home-search-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.home-search-item-label{min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-search-item-sub{font-size:.68rem;color:var(--home-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-search-item-type{flex-shrink:0;font-size:.62rem;color:var(--home-muted);text-transform:uppercase;letter-spacing:.04em;}
.home-search-empty{padding:12px;text-align:center;font-size:.78rem;color:var(--home-muted);}

/* Recherche rapide module (dropdown instantané) — Projets/Contrats/Fournisseurs. 2026-06-16.
   Couleurs explicites (pas de var --home-* qui sont scopées à .home-page). */
/* z-index 400 (etait 1060) : la liste de suggestions passait DEVANT la navbar gauche depliee (401, cf. .navbar-primary.expanded)
   sur les hubs Dossiers / Contrats / Entreprises (retour Olivier 2026-09-16). 400 reste au-dessus du contenu de la page. */
.qs-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius: var(--r-md, 6px);box-shadow:0 8px 28px rgba(45,62,80,0.14);padding:4px;z-index:400;display:none;max-height:420px;overflow-y:auto;}
.qs-results.open{display:block;}
.qs-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border:none;background:transparent;border-radius: var(--r-lg, 10px);text-decoration:none;color:#415873;text-align:left;cursor:pointer;font:inherit;}
.qs-item:hover{background:#f1f5f9;text-decoration:none;}
.qs-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.qs-item-label{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qs-item-sub{font-size:.68rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qs-item-go{flex-shrink:0;color:#cbd5e1;font-size:.7rem;}
/* R23 (2026-09-16) : badge d'état d'un objet non publié / non validé proposé par la recherche rapide. */
.qs-item-state{display:inline-block;vertical-align:1px;margin-left:4px;padding:1px 6px;border-radius:var(--r-full,999px);background:#fef3c7;color:#b45309;font-size:.62rem;font-weight:600;line-height:1.4;white-space:nowrap;}
.qs-supplier .qs-item-sub{color:#0d9488;}
.qs-empty{padding:12px;text-align:center;font-size:.78rem;color:#94a3b8;}
.qs-ic{width:28px;height:28px;border-radius: var(--r-md, 6px);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.74rem;}
.qs-ic-prj{background:#e6f7f5;color:#0d9488;}
.qs-ic-rfx{background:#eaf1f8;color:#4b7bb5;}
.qs-ic-ctr{background:#efeaf6;color:#6b5fa5;}
.qs-ic-ent{background:#f5efe4;color:#a07840;}

/* Wrapper relatif pour le dropdown recherche rapide Fournisseurs. 2026-06-16. */
.spl-qs-wrap{position:relative;}

/* Re-style DS épuré (2026-06-16) : flat (pas d'ombre), icônes nues, titres en casse normale,
   pas de fond teinté. La couleur ne subsiste qu'en MARQUEUR : icône typée + fin liseré bas coloré
   (les `.home-b-* .home-card-head{border-bottom-color}` plus haut sont conservés). Compteurs uniformes teal-light. */
.home-card{box-shadow:none;border-color:var(--home-border);border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;}
.home-card-head{padding:13px 16px;margin-left:0;border-bottom-width:1px;background:#f7f9fc;}
.home-card-title{font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--home-navy);}
.home-card-ic{width:auto;height:auto;border-radius:0;background:transparent !important;font-size:.92rem;}
.home-b-favorites .home-card-head{border-bottom-color:#d99e1f;}
.home-card-count{background:var(--home-teal-light) !important;color:var(--home-teal) !important;}
.home-row{padding:6px 16px;}
.home-bento{gap:24px 30px;}
/* Rangee compacte (favoris / recents / consultations) : corps plus court. */
.home-card-compact .home-card-body{max-height:156px;}

/* Raffinements accueil (items 2/6/9, 2026-06-16). */
.home-row-tags{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding-left:8px;}
.home-row-tags .home-tag,.home-row-meta .home-tag{margin-left:0;}
.home-search:hover{border-color:#cbd5e1;box-shadow:0 1px 4px rgba(45,62,80,.06);}
/* focus prioritaire sur le hover (même spécificité → doit venir après dans le fichier) */
.home-search:focus-within{border-color:var(--home-teal);box-shadow:0 0 0 2px rgba(13,148,136,.12);}
/* gris désormais porté par .home-card-head (toutes cards) ; le corps reste blanc → format uniforme */
/* Raffinements accueil (2026-06-17) : pas d'icône + titre un peu plus petit sur les 3 cards du bas ;
   40px entre les 2 cards du haut (column-gap global = 30px + 10px de marge sur À traiter). */
.home-card-compact .home-card-ic{display:none;}
.home-card-compact .home-card-title{font-size:.78rem;}
.home-b-todo{margin-right:10px;}

/* Demandes — validation inline des contrats (étape 3, 2026-06-17). */
.wfh-cvr-actions{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;width:100%;}
.wfh-cvr-check{cursor:pointer;width:15px;height:15px;accent-color:#0d9488;flex-shrink:0;}
.wfh-cvr-btn{border:1px solid transparent;border-radius: var(--r-sm, 3px);font-size:.72rem;font-weight:500;padding:3px 9px;cursor:pointer;white-space:nowrap;line-height:1.2;transition:background .12s,color .12s,border-color .12s;}
.wfh-cvr-validate,.wfh-svr-validate{background:#0d9488;color:#fff;border-color:#0d9488;}
.wfh-cvr-validate:hover,.wfh-svr-validate:hover{background:#0b7d73;border-color:#0b7d73;}
.wfh-cvr-refuse,.wfh-svr-refuse{background:#fff;color:#c0392b;border-color:#e3b4ae;}
.wfh-cvr-refuse:hover,.wfh-svr-refuse:hover{background:#fdecea;border-color:#c0392b;}
.wfh-cvr-btn:disabled{opacity:.6;cursor:default;}
.wfh-bulk-bar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1055;display:flex;align-items:center;gap:14px;background:#2D3E50;color:#fff;padding:10px 16px;border-radius: var(--r-lg, 10px);box-shadow:0 6px 24px rgba(16,24,40,.22);font-size:.82rem;}
.wfh-bulk-count{font-weight:700;}
.wfh-bulk-btn{background:#0d9488;color:#fff;border:none;border-radius: var(--r-md, 6px);font-size:.78rem;font-weight:600;padding:6px 14px;cursor:pointer;}
.wfh-bulk-btn:hover{background:#0b7d73;}
.wfh-bulk-btn:disabled{opacity:.6;cursor:default;}
.wfh-refuse-pop{max-width:360px;}
.wfh-refuse-pop .popover-body{padding:12px;}
.wfh-refuse-popover{width:100%;box-sizing:border-box;}
.wfh-refuse-popover *{box-sizing:border-box;}
.wfh-refuse-label{font-size:.8rem;font-weight:600;color:#2D3E50;margin-bottom:8px;}
/* le form Symfony enveloppe la textarea dans .wp-500 (500px) → on force le plein conteneur. */
.wfh-refuse-popover .wp-500{min-width:0 !important;width:100% !important;max-width:100% !important;}
.wfh-refuse-form-wrap{width:100%;}
.wfh-refuse-form-wrap textarea{width:100% !important;max-width:100% !important;min-height:90px;font-size:.82rem;border:1px solid #d6dde4;border-radius: var(--r-md, 6px);padding:7px 9px;}

/* Drawer Contrat display — bloc Validation read-only (fix #1a, 2026-06-18). */
.drw-ctr-ro-validation-mode{margin-bottom:6px;}
.drw-ctr-ro-label{color:#8fa1b3;font-weight:500;}
.drw-ctr-ro-validators{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.drw-ctr-ro-validator{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;}
.drw-ctr-ro-validator-name{color:#2D3E50;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drw-ctr-ro-validator-status{font-size:.7rem;border-radius: var(--r-sm, 3px);padding:1px 7px;white-space:nowrap;flex-shrink:0;}

/* Drawer Contrat display — historique validation (commentaire + dates + motifs), #2 2026-06-18. */
.drw-ctr-ro-validator{flex-direction:column;align-items:stretch;gap:2px;}
.drw-ctr-ro-validator-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.drw-ctr-ro-validator-meta{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;}
.drw-ctr-ro-validator-date{font-size:.72rem;color:#8fa1b3;}
.drw-ctr-ro-validator-motif{font-size:.76rem;font-style:italic;color:#6b7785;padding-left:2px;}
.drw-ctr-ro-validation-comment{margin-bottom:8px;font-style:italic;}

/* ============================================================================
   Refonte Entreprises - etape 4b : drawer creation/edition entreprise (#supplierDrawer)
   Chrome calque de .drawer-contract (header navy / body scrollable / footer).
   ============================================================================ */
.drawer-supplier { position: fixed; top: 0; right: calc(-1 * var(--sp-w)); bottom: 0; width: var(--sp-w); background: #fff; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.18); transition: right 0.3s ease; z-index: 1060; }
.drawer-supplier.open { right: 0; }
.drawer-supplier .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px 12px; flex-shrink: 0; background: #2D3E50; border-bottom: 1px solid rgba(0,0,0,0.15); position: relative; z-index: 9; }
.drawer-supplier .drawer-header h1 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--sp-w) - 80px); }
.drawer-supplier .close-drawer { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: rgba(255,255,255,0.55); opacity: 1; padding: 0 0 0 12px; flex-shrink: 0; }
.drawer-supplier .close-drawer:hover { color: #fff; }
.drawer-supplier > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.drawer-supplier .drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 0; background: #fff; }
.drawer-supplier .drawer-body::-webkit-scrollbar { width: 4px; background: transparent; }
.drawer-supplier .drawer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
.drawer-supplier .drawer-body.ctx-scrolling::-webkit-scrollbar-thumb, .drawer-supplier .drawer-body.ctx-scrollbar-hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
.drawer-supplier .drawer-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.drawer-supplier .drawer-body.ctx-scrolling, .drawer-supplier .drawer-body.ctx-scrollbar-hover { scrollbar-color: #c4c9d0 transparent; }
.drawer-supplier .drawer-footer { padding: 12px 16px; border-top: 1px solid rgba(45,62,80,0.15); background: #fff; flex-shrink: 0; }
.drawer-supplier .btn-navy { background-color: #0d9488; border-color: #0d9488; color: #fff; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); font-weight: 500; }
.drawer-supplier .btn-navy:hover, .drawer-supplier .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }
.drawer-supplier .btn-cancel { border: 1px solid rgba(45,62,80,0.28); color: #415873; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); background: #fff; }
.drawer-supplier .btn-cancel:hover { background-color: #f8fafb; border-color: rgba(45,62,80,0.5); color: #2D3E50; }
.drawer-supplier .drawer-footer .drw-spl-footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drawer-supplier .drawer-footer .drw-spl-submit-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; max-width: 75%; }
.drawer-supplier .drawer-footer .drw-spl-submit-hint { font-size: 0.72rem; color: #6b7a8d; text-align: right; line-height: 1.35; max-width: 100%; }
.drw-spl-field-label { font-size: 0.8rem; font-weight: 600; color: #415873; margin-bottom: 3px; display: block; }
.drw-spl-section { padding: 0 0 6px; }
.drw-spl-block { padding: 10px 0; border-top: 1px solid rgba(45,62,80,0.08); }
.drw-spl-collapser { display: flex; align-items: center; gap: 8px; color: #2D3E50; font-weight: 600; font-size: 0.92rem; text-decoration: none; margin-bottom: 8px; }
.drw-spl-collapser:hover { color: #0d9488; text-decoration: none; }
.drw-spl-collapser i { transition: transform 0.2s; }

/* ============================================================================
   Refonte Entreprises - etape 4c : chrome UI du drawer (calque fidele Projet/Contrat).
   Owner-inline sous le nom + labels uppercase navy/gris + champs sans encadre au repos.
   ============================================================================ */
/* Owner-inline (Proprietaire / Equipe) sous le nom, crayon revele au hover */
.drw-spl-owner-inline { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px; width: 100%; font-size: 0.82rem; color: #6b7a8d; padding: 5px 0 9px; border-bottom: 1px solid #f0f4f8; margin-bottom: 14px; }
.drw-spl-owner-label { color: #8fa1b3; }
.drw-spl-owner-value { color: #2D3E50; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drw-spl-owner-sep { color: #c4ccd6; margin: 0 4px; }
.drw-spl-owner-edit-icon { visibility: hidden; color: #9ca3af; font-size: 0.78rem; margin-left: auto; padding: 2px 4px; text-decoration: none !important; background: transparent; border: none; transition: color 0.15s ease; }
.drw-spl-owner-inline:hover .drw-spl-owner-edit-icon { visibility: visible; }
.drw-spl-owner-edit-icon:hover { color: #0d9488; text-decoration: none !important; }
.drw-spl-owner-fields-row { display: flex; gap: 8px; margin-bottom: 14px; }
.drw-spl-owner-fields-row > .drw-spl-owner-field { flex: 1 1 0; min-width: 0; }
.drw-spl-owner-fields-row .form-group { margin-bottom: 0; }
.drw-spl-owner-fields-row .bootstrap-select { width: 100% !important; }

/* Titres de champ : uppercase, gris si non obligatoire, navy + etoile si obligatoire.
   Cible UNIQUEMENT le label/legend DIRECT d'un .form-group (calque .drawer-contract) — PAS les labels
   d'options radio/checkbox imbriques (.radio-label), sinon les choix passent en uppercase gris. */
.drawer-supplier .form-group > label, .drawer-supplier .form-group > legend, .drawer-supplier .form-group.row > label, .drawer-supplier fieldset.form-group > legend, .drawer-supplier .drw-spl-field-label { display: block; font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; padding: 0; }
.drawer-supplier .form-group > label.drw-spl-label-required, .drawer-supplier .form-group > legend.drw-spl-label-required, .drawer-supplier .drw-spl-field-label.drw-spl-label-required { color: #2D3E50; }
.drawer-supplier .form-group > label .text-danger, .drawer-supplier .form-group > legend .text-danger, .drawer-supplier .drw-spl-field-label .text-danger { margin-left: 3px; }
/* Selectpickers en data-style="text-white" (concus pour la modale navy) illisibles dans le drawer blanc → texte fonce */
.drawer-supplier .bootstrap-select > .btn, .drawer-supplier .bootstrap-select > .btn .filter-option, .drawer-supplier .bootstrap-select > .btn .filter-option-inner, .drawer-supplier .bootstrap-select > .btn .filter-option-inner-inner { color: #415873 !important; }
.drawer-supplier .bootstrap-select > .btn.bs-placeholder, .drawer-supplier .bootstrap-select > .btn.bs-placeholder .filter-option-inner-inner { color: #8fa1b3 !important; }

/* Champs sans encadre au repos, bordure revelee au hover/focus (calque exact drawer Contrat) */
/* 2026-06-21 : au repos = traits bas + gauche gris (au lieu d'encadré transparent), hover/focus = bas teal. */
.drawer-supplier .form-control, .drawer-supplier input[type="text"], .drawer-supplier input[type="number"], .drawer-supplier textarea { font-size: 0.84rem; padding: 0.32rem 0.6rem; border-radius: var(--r-md, 6px); border: 1px solid transparent; border-bottom-color: #dde1e7; border-left-color: #dde1e7; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.drawer-supplier .form-control:hover, .drawer-supplier input[type="text"]:hover, .drawer-supplier input[type="number"]:hover, .drawer-supplier textarea:hover { border-bottom-color: #0d9488; }
.drawer-supplier .form-control:focus, .drawer-supplier input[type="text"]:focus, .drawer-supplier input[type="number"]:focus, .drawer-supplier textarea:focus { border-bottom-color: #0d9488; box-shadow: none; outline: none; }
.drawer-supplier .bootstrap-select > .btn { border: 1px solid transparent !important; border-bottom-color: #dde1e7 !important; border-left-color: #dde1e7 !important; border-radius: var(--r-md, 6px)!important; font-size: 0.84rem !important; background: #fff !important; box-shadow: none !important; outline: none !important; transition: border-color 0.12s ease; }
.drawer-supplier .bootstrap-select:hover > .btn { border-bottom-color: #0d9488 !important; }
.drawer-supplier .bootstrap-select > .btn:focus, .drawer-supplier .bootstrap-select.show > .btn { border-bottom-color: #0d9488 !important; }
.drawer-supplier .bootstrap-select.form-control { border: none !important; padding: 0 !important; box-shadow: none !important; }
.drawer-supplier .bootstrap-select { width: 100% !important; }

/* Raison sociale en titre (calque .item-edit-title Contrat) */
.drawer-supplier .drw-spl-name-input { font-size: 1.05rem !important; font-weight: 400 !important; border: none !important; border-bottom: 1px solid #dde1e7 !important; border-radius: 0 !important; padding: 6px 4px !important; color: #2D3E50; background: transparent; }
.drawer-supplier .drw-spl-name-input:focus { border-bottom-color: #0d9488 !important; }

/* Bande SIREN sous le header (calque .drawer-template-band Contrat/Projet) : titre à gauche, saisie à
   droite avec trait gris. Marges négatives = padding de .drw-spl-body (14px haut / 16px côtés). */
.drawer-supplier .drawer-body .drawer-template-band--in-body.drw-spl-siren-band { background: rgba(45,62,80,0.04); border-bottom: 1px solid rgba(45,62,80,0.1); margin: -14px -16px 14px -16px; padding: 9px 16px; display: flex; align-items: center; gap: 28px; }
.drawer-supplier .drawer-body .drw-valreq-banner ~ .drawer-template-band--in-body.drw-spl-siren-band { margin-top: 0; }
.drawer-supplier .drw-spl-siren-band-label { flex-shrink: 0; margin: 0; font-size: 0.72rem; line-height: 1; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; }
.drawer-supplier .drw-spl-siren-band-field { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.drawer-supplier .drw-spl-siren-band-field > .drw-spl-siren-input { width: 150px; }
.drw-spl-siren-wand { color: #0d9488; cursor: help; font-size: 0.85rem; margin-left: 6px; }
.drawer-supplier .drw-spl-siren-input { width: 100%; font-size: 0.85rem; line-height: 1; border: 1px solid transparent !important; border-bottom: 1px solid #dde1e7 !important; border-radius: var(--r-sm, 3px)!important; padding: 3px 4px !important; color: #2D3E50; background: transparent; box-shadow: none !important; transition: border-color 0.15s; }
.drawer-supplier .drw-spl-siren-input:hover { border-color: #dde1e7 !important; border-bottom-color: #0d9488 !important; }
.drawer-supplier .drw-spl-siren-input:focus { border-color: #dde1e7 !important; border-bottom-color: #0d9488 !important; outline: none; box-shadow: none !important; }
.drawer-supplier .drw-spl-siren-input::placeholder { font-weight: 300; color: #94a3b8; }
/* Erreur INSEE SIREN — pleine largeur, alignée sur le contenu (padding 16px de .drw-spl-body). */
.drawer-supplier .drw-spl-siren-error { margin: -6px 0 12px; font-size: 0.78rem; line-height: 1.35; color: #d9534f; }
/* Crayon « éditer » dans le header du drawer (display read-only → édition), 4f. */
.drawer-supplier .drw-spl-header-edit { color: rgba(255,255,255,0.65); flex-shrink: 0; font-size: 0.8rem; text-decoration: none; transition: color 0.12s; }
.drawer-supplier .drw-spl-header-edit:hover, .drawer-supplier .drw-spl-header-edit:focus { color: #fff; outline: none; }
/* Lignes Demandes (Validations Entreprises) cliquables vers la fiche (4f). */
.wfh-row-clickable { cursor: pointer; }

/* Bloc Informations complementaires + collapser (chevron) */
.drw-spl-comp-title { font-size: 0.72rem; font-weight: 700; color: #2D3E50; text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================================
   Refonte Entreprises - etape 4c-structure : composer Familles multi + tags Prescripteurs/Groupe.
   Calque .drw-ctr-cat-* / .drw-ctr-tag-*.
   ============================================================================ */
.drw-spl-cat-composer { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.drw-spl-cat-composer .bootstrap-select { flex: 1 1 0; min-width: 0; }
.drw-spl-cat-add { flex: 0 0 auto; border: 1px solid #0d9488; background: #fff; color: #0d9488; border-radius: var(--r-md, 6px); font-size: 0.78rem; font-weight: 600; padding: 4px 10px; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.drw-spl-cat-add:not(:disabled):hover { background: #0d9488; color: #fff; }
.drw-spl-cat-add:disabled { opacity: 0.45; cursor: not-allowed; }
.drw-spl-cat-tags, .drw-spl-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.drw-spl-cat-tag, .drw-spl-tag { display: inline-flex; align-items: center; gap: 5px; background: #f4f6f9; border: 1px solid #e3e8ef; border-radius: var(--r-full, 999px); padding: 3px 9px 3px 8px; font-size: 0.8rem; color: #2D3E50; cursor: grab; }
.drw-spl-cat-tag.main, .drw-spl-tag.main { background: #ecfdf5; border-color: #99e6d9; }
.drw-spl-cat-tag-dot, .drw-spl-tag-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.drw-spl-cat-tag-star, .drw-spl-tag-star { color: #0d9488; font-size: 0.72rem; }
.drw-spl-cat-tag-label, .drw-spl-tag-text { line-height: 1.2; }
.drw-spl-cat-tag-remove, .drw-spl-tag-remove { color: #9ca3af; font-size: 1rem; line-height: 1; text-decoration: none; margin-left: 2px; }
.drw-spl-cat-tag-remove:hover, .drw-spl-tag-remove:hover { color: #ef4444; text-decoration: none; }
.drw-spl-cat-tag.dragging, .drw-spl-tag.dragging { opacity: 0.5; }
.drw-spl-cat-tag.drag-over, .drw-spl-tag.drag-over { border-color: #0d9488; }

/* ============================================================================
   Refonte Entreprises - etape 4c FIX : alignement precis sur drawer Contrat/Projet.
   ============================================================================ */
/* Reset marges Bootstrap row/col + champs en pleine largeur, label au-dessus (calque .drawer-contract) */
.drawer-supplier .form-group, .drawer-supplier .form-group.row, .drawer-supplier fieldset.form-group { margin: 0 0 14px 0 !important; padding: 0 !important; border: 0; min-width: 0; }
.drawer-supplier .form-group > label, .drawer-supplier .form-group > legend, .drawer-supplier .form-group.row > label, .drawer-supplier .form-group.row > legend, .drawer-supplier fieldset.form-group > legend { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 0 4px 0 !important; margin: 0 !important; float: none; display: block; }
.drawer-supplier .form-group > div[class*="col-"], .drawer-supplier .form-group.row > div[class*="col-"], .drawer-supplier fieldset.form-group > div[class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.drawer-supplier .bootstrap-select { width: 100% !important; }
/* Radios sur leur propre ligne (cas non convertis) */
.drawer-supplier .radio-inline { display: inline-flex; align-items: center; }

/* Titres de section (calque .drw-ctr-subtitle) — remplace les zones collapsibles */
.drw-spl-subtitle { font-size: 0.79rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 10px; padding: 0 0 6px; border-bottom: 1px solid rgba(13,148,136,0.2); }
/* (Bandeau teal des titres « ex-tiroir » unifie plus bas : .drw-inline-sheet-title-band — 2026-07-19) */

/* Pills Familles + Prescripteurs/Groupe — calque EXACT .drw-ctr-cat-tag / .drw-ctr-tag (teal, radius 2px) */
.drawer-supplier .drw-spl-cat-tag, .drawer-supplier .drw-spl-tag { display: inline-flex; align-items: center; gap: 4px; background: #e6f7f5; color: #0d9488; border: 1px solid rgba(13,148,136,0.25); border-radius: var(--r-sm, 3px); padding: 2px 4px 2px 6px; font-size: 0.74rem; line-height: 1.4; max-width: 100%; cursor: grab; user-select: none; }
.drawer-supplier .drw-spl-cat-tag.main, .drawer-supplier .drw-spl-tag.main { background: #d4f0ec; border-color: rgba(13,148,136,0.5); }
.drawer-supplier .drw-spl-cat-tag-dot, .drawer-supplier .drw-spl-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.drawer-supplier .drw-spl-cat-tag-star, .drawer-supplier .drw-spl-tag-star { color: #0d9488; font-size: 0.72rem; line-height: 1; flex-shrink: 0; }
.drawer-supplier .drw-spl-cat-tag-label, .drawer-supplier .drw-spl-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-supplier .drw-spl-cat-tag-remove, .drawer-supplier .drw-spl-tag-remove { color: #0d9488; opacity: 0.55; padding: 0 4px; margin-left: 2px; font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none !important; }
.drawer-supplier .drw-spl-cat-tag-remove:hover, .drawer-supplier .drw-spl-tag-remove:hover { opacity: 1; color: #ef4444; text-decoration: none !important; }
.drawer-supplier .drw-spl-cat-tags, .drawer-supplier .drw-spl-tag-list { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 4px; }
/* Masque le CollectionType brut capture dans le <template> (belt-and-suspenders) */
.drw-spl-categories-collection, .drw-spl-ordering-departments-collection, .drw-spl-ordering-organizations-collection { display: none !important; }

/* Grille 2 colonnes pour les paires de champs du drawer (Informations complementaires) */
.drawer-supplier .drw-spl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
.drawer-supplier .drw-spl-grid-2 > .form-group { min-width: 0; }

/* Champs du drawer en pleine largeur (certains selectpicker/inputs ne s'etiraient pas) */
.drawer-supplier .form-control { width: 100% !important; }
.drawer-supplier .bootstrap-select, .drawer-supplier .bootstrap-select > .btn { width: 100% !important; }

/* ===== Étape 4c FIX#2 — alignements fins drawer Entreprise ===== */
/* Raison sociale : STRICTEMENT le style du nom Projet (.drawer-project .item-edit-title) — weight 400, 1.05rem,
   border-bottom seul, placeholder weight 300. Centré (demande utilisateur). */
.drawer-supplier .drw-spl-name-input, .drawer-supplier input.item-edit-title {
    width: 100% !important; font-size: 1.05rem !important; font-weight: 400 !important;
    border: 1px solid transparent !important; border-bottom: 1px solid #dde1e7 !important; border-radius: var(--r-md, 6px)!important;
    padding: 6px 4px !important; color: #2D3E50 !important; background: transparent !important; text-align: center !important;
    transition: border-color 0.15s;
}
/* Hover (calque Contrat/Projet) : encadré gris (haut/gauche/droite) + barre inférieure teal. */
.drawer-supplier .drw-spl-name-input:hover, .drawer-supplier input.item-edit-title:hover { border-color: #dde1e7 !important; border-bottom-color: #0d9488 !important; }
.drawer-supplier .drw-spl-name-input:focus, .drawer-supplier input.item-edit-title:focus { border-color: #dde1e7 !important; border-bottom-color: #0d9488 !important; box-shadow: none !important; outline: none !important; }
.drawer-supplier .drw-spl-name-input::placeholder, .drawer-supplier input.item-edit-title::placeholder { font-weight: 300 !important; color: #94a3b8 !important; font-size: 0.95rem; }
.drawer-supplier .drw-spl-name-input::-webkit-input-placeholder, .drawer-supplier input.item-edit-title::-webkit-input-placeholder { font-weight: 300 !important; }

/* Composer Familles : NE PAS forcer les 2 selectpickers à 100% (sinon ils recouvrent le bouton Ajouter). */
.drawer-supplier .drw-spl-cat-composer .bootstrap-select { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
.drawer-supplier .drw-spl-cat-composer .bootstrap-select > .btn { width: 100% !important; }

/* Owner-inline : labels/valeurs plus petits (calque drawer Contrat) */
.drw-spl-owner-inline { font-size: 0.82rem; }
.drw-spl-owner-label { color: #8fa1b3; font-size: 0.74rem; font-weight: 400; }
.drw-spl-owner-value { color: #2D3E50; font-weight: 500; font-size: 0.78rem; }

/* Neutralise form-inline (largeur auto) dans le drawer → champs pleine largeur */
.drawer-supplier .form-inline { display: block !important; }
.drawer-supplier .bootstrap-select.form-inline, .drawer-supplier select.form-inline { width: 100% !important; max-width: 100% !important; }

/* Icône info (remplace le "?") en couleur DS teal */
.drawer-supplier .drw-spl-info { color: #0d9488; margin-left: 4px; cursor: help; font-size: 0.82rem; }

/* ===== Étape 4c FIX#3 — cause racine largeurs : le thème form enveloppe en .row > .col-* étroite ===== */
/* Neutralise les .row (marges négatives) + force les .col-* à pleine largeur dans le drawer. */
.drawer-supplier .row { margin-left: 0 !important; margin-right: 0 !important; }
.drawer-supplier .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Composer Familles : bouton Ajouter au-dessus, non recouvert par le selectpicker sous-famille. */
.drawer-supplier .drw-spl-cat-add { position: relative; z-index: 3; }
.drawer-supplier .drw-spl-cat-composer .bootstrap-select { min-width: 0 !important; }

/* ===== Étape 4d — bottom-sheet "Informations complémentaires" (calque .drw-prj-sheet*) ===== */
.drawer-supplier .drawer-body:has(.drw-spl-sheets) { display: flex; flex-direction: column; overflow: hidden; padding: 0 !important; position: relative; }
.drawer-supplier .drawer-body:has(.drw-spl-sheets) > .drw-spl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 0; }
.drawer-supplier .drawer-body:has(.drw-spl-sheets) > .drw-spl-sheets { flex-shrink: 0; }
.drawer-supplier .drw-spl-sheets { background: #e2e8f0; border-top: 1px solid rgba(45,62,80,0.22); box-shadow: 0 -3px 12px rgba(45,62,80,0.11); }
.drawer-supplier .drw-spl-sheet-bars { display: flex; flex-direction: column; background: transparent; }
.drawer-supplier .drw-spl-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 16px; height: 38px; width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(45,62,80,0.08); font-size: 0.78rem; font-weight: 500; color: #415873; cursor: pointer; transition: background 0.15s, color 0.15s; }
.drawer-supplier .drw-spl-sheet-bar:last-child { border-bottom: none; }
.drawer-supplier .drw-spl-sheet-bar:hover, .drawer-supplier .drw-spl-sheet-bar:focus { background: rgba(45,62,80,0.04); color: #0d9488; outline: none; }
.drawer-supplier .drw-spl-sheet-bar.is-active { background: rgba(13,148,136,0.06); color: #0d9488; font-weight: 600; }
/* Effet accordéon : la barre dont la sheet est ouverte « monte » dans l'en-tête → on la retire du tray
   du bas pour ne pas dupliquer le titre (et éviter le sandwich avec les autres barres). */
.drawer-supplier.drw-spl-has-open-sheet .drw-spl-sheet-bar.is-active { display: none; }
.drawer-supplier .drw-spl-sheet-bar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; }
.drawer-supplier .drw-spl-sheet-bar-icon { font-size: 0.85rem; transition: transform 0.18s ease; color: #94a3b8; flex: 0 0 auto; }
.drawer-supplier .drw-spl-sheet-bar:hover .drw-spl-sheet-bar-icon, .drawer-supplier .drw-spl-sheet-bar.is-active .drw-spl-sheet-bar-icon { color: #0d9488; }
.drawer-supplier .drw-spl-sheet-bar.is-active .drw-spl-sheet-bar-icon { transform: rotate(180deg); }
/* Refonte 2026-06-21 : sheet = overlay glissant ancré juste sous le champ Nom (--drw-spl-sheet-top,
   posé en JS) et au-dessus des barres (--drw-spl-bars-h). Slide-up via translateY. */
.drawer-supplier .drw-spl-sheet {
    position: absolute; left: 0; right: 0;
    top: var(--drw-spl-sheet-top, 120px);
    bottom: var(--drw-spl-bars-h, 38px);
    display: flex; flex-direction: column;
    background: #fff; overflow: hidden;
    transform: translateY(110%); visibility: hidden;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
    border-top: 1px solid rgba(45,62,80,0.12);
    transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
    z-index: 5;
}
.drawer-supplier .drw-spl-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform 0.18s ease-out; }
/* En-tête = la barre active « montée » en haut : même look (teal, hauteur 38px, chevron de repli). */
.drawer-supplier .drw-spl-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; height: 38px; padding: 0 12px 0 16px; background: rgba(13,148,136,0.06); border-bottom: 1px solid rgba(13,148,136,0.18); cursor: pointer; }
.drawer-supplier .drw-spl-sheet-header-title { font-size: 0.72rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-supplier .drw-spl-sheet-close { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: #0d9488; cursor: pointer; transition: color 0.15s; }
.drawer-supplier .drw-spl-sheet-close .fa { font-size: 0.9rem; }
.drawer-supplier .drw-spl-sheet-close:hover, .drawer-supplier .drw-spl-sheet-close:focus { color: #0f766e; outline: none; }
.drawer-supplier .drw-spl-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
.drawer-supplier .drw-spl-sheet-body::-webkit-scrollbar { width: 6px; }
.drawer-supplier .drw-spl-sheet-body::-webkit-scrollbar-track { background: transparent; }
.drawer-supplier .drw-spl-sheet-body::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
.drawer-supplier .drw-spl-sheet-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Voile gris au-dessus de la sheet ouverte — bloque le formulaire, clic = ferme (cf. décision 2026-06-21). */
.drawer-supplier .drw-spl-sheet-dim { position: absolute; left: 0; right: 0; top: 0; bottom: var(--drw-spl-bars-h, 38px); background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 0.18s ease; z-index: 4; }
.drawer-supplier.drw-spl-has-open-sheet .drw-spl-sheet-dim { opacity: 1; pointer-events: auto; }

/* ===== Étape 4e — sheet Validation (modes radio + lignes valideurs) =====
   Modes radio : calque EXACT drawer Contrat (.drw-ctr-validation-modes) — radio NATIF (accent-color teal,
   absolu left:0), colonne, label indenté 1.5rem, non sélectionné gris NON gras, sélectionné teal/gras. */
/* Layout HORIZONTAL fiable (radio absolu, label décalé — PAS de flex sur .form-check qui empile).
   Indentation du groupe via padding-left sur le conteneur interne. Libellé non sélectionné NON gras. */
.drawer-supplier .drw-spl-validation-modes { margin-bottom: 16px; text-align: left !important; }
.drawer-supplier .drw-spl-validation-modes > div { display: block !important; padding-left: 1.5rem; text-align: left !important; }
.drawer-supplier .drw-spl-validation-modes .form-check { display: block !important; position: relative; padding-left: 1.5rem !important; margin: 0 0 10px 0 !important; min-height: 0; line-height: 1.4; text-align: left !important; }
.drawer-supplier .drw-spl-validation-modes .form-check:last-child { margin-bottom: 0 !important; }
.drawer-supplier .drw-spl-validation-modes .form-check-input { position: absolute !important; left: 0 !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%); opacity: 1 !important; -webkit-appearance: radio; appearance: auto; width: 15px !important; height: 15px !important; accent-color: #0d9488; cursor: pointer; }
.drawer-supplier .drw-spl-validation-modes .form-check-label { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: 0.82rem; font-weight: 200 !important; color: #415873 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.drawer-supplier .drw-spl-validation-modes input[type="radio"]:checked + .form-check-label { color: #0d9488 !important; font-weight: 600 !important; }

/* Lignes valideurs : calque .contract-validator-row (poignée ≡ + selectpicker + suppression). */
.drawer-supplier .drw-spl-validators { display: flex; flex-direction: column; gap: 8px; }
.drawer-supplier .drw-spl-validator-row { display: flex; align-items: center; gap: 8px; position: relative; }
.drawer-supplier .drw-spl-validator-handle { flex: 0 0 auto; color: #8fa1b3; cursor: grab; font-size: 0.95rem; padding: 4px 2px; user-select: none; }
.drawer-supplier .drw-spl-validator-row.drw-spl-validator-dragging { opacity: 0.6; }
.drawer-supplier .drw-spl-validator-row .bootstrap-select { flex: 1 1 0; min-width: 0; width: auto !important; }
/* Le <select> natif masqué par bootstrap-select reste borné à son wrapper → ne recouvre pas la croix. */
.drawer-supplier .drw-spl-validator-row .bootstrap-select > select { max-width: 100% !important; }
/* Valideur requis (défaut admin) : nom affiché en display, pas de croix, non déplaçable visuellement. */
.drawer-supplier .drw-spl-validator-display { flex: 1 1 0; min-width: 0; font-size: 0.82rem; color: #2D3E50; padding: 7px 10px; background: #f4f6f8; border-radius: var(--r-md, 6px); }
.drawer-supplier .drw-spl-validator-remove { flex: 0 0 auto; position: relative; z-index: 3; color: #b6c0cc; font-size: 1.1rem; line-height: 1; text-decoration: none; padding: 2px 6px; transition: color 0.12s ease; }
.drawer-supplier .drw-spl-validator-remove:hover { color: #d9534f; }
.drawer-supplier .drw-spl-validator-remove:focus { outline: none; }
/* Bouton "Ajouter valideur" — métriques identiques à Contrat (#validators-container .add_element_link) :
   compact, bord teal, radius 2px, "+" via ::before. */
/* Bouton "Ajouter valideur" — métriques identiques à Contrat ; font-family:inherit car <button> n'hérite
   pas de la police (sinon rendu + gros que le <a> Contrat). */
.drawer-supplier .drw-spl-add-validator { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; font-family: inherit; font-size: 0.78rem; font-weight: 400 !important; line-height: 1.4; color: #0d9488; background: transparent; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); cursor: pointer; text-decoration: none; transition: all 0.15s; }
.drawer-supplier .drw-spl-add-validator::before { content: '+'; font-weight: 400; margin-right: 1px; }
.drawer-supplier .drw-spl-add-validator:hover, .drawer-supplier .drw-spl-add-validator:focus { background: #0d9488; color: #fff; }
.drawer-supplier .drw-spl-add-validator:focus { outline: none; }

/* Commentaire valideurs (calque .drw-ctr-validation-comment-wrap textarea). */
.drawer-supplier .drw-spl-validation-comment-wrap { margin-top: 16px; }
.drawer-supplier .drw-spl-validation-comment-wrap textarea { width: 100% !important; resize: vertical; min-height: 64px; font-size: 0.82rem; padding: 8px 10px; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); }
.drawer-supplier .drw-spl-validation-comment-wrap textarea:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }

/* Rappel par mail — une seule ligne : case + libellé + petit input + suffixe. */
.drawer-supplier .drw-spl-validation-reminder-wrap { margin-top: 16px; }
.drawer-supplier .drw-spl-reminder-subtitle { margin-top: 4px; margin-bottom: 8px; }
.drawer-supplier .drw-spl-reminder-row { display: flex !important; flex-wrap: nowrap; align-items: center !important; gap: 8px; padding: 3px 0; white-space: nowrap; }
/* Case à cocher = checkbox custom GLOBAL (app.css) : input natif masqué (opacity:0, cliquable), box RONDE
   dessinée sur label::before (orange #ff855e par défaut) + coche sur label::after. On NE rend PAS l'input
   natif visible (sinon doublon carré) ; on passe juste la box en teal et on la recentre. Calque Contrat. */
.drawer-supplier .drw-spl-reminder-row .form-check { padding-left: 1.5rem; margin: 0; min-height: 0; display: inline-flex; align-items: center; flex-shrink: 0; }
.drawer-supplier .drw-spl-reminder-row .form-check-label { margin: 0; min-height: 0; }
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 0 !important; cursor: pointer; flex-shrink: 0; vertical-align: middle; }
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"]:checked + label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"] + label::before { top: 50% !important; transform: translateY(-50%); }
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"]:checked + label::after,
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"] + label:hover::after { position: absolute !important; top: 50% !important; left: 0 !important; margin-left: -1.25rem !important; width: 17px !important; height: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 9px !important; transform: translateY(-50%) !important; padding: 0 !important; }
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"]:checked + label::after { color: #fff !important; }
.drawer-supplier .drw-spl-reminder-row input[type="checkbox"]:not(:checked) + label:hover::after { color: #94a3b8 !important; }
.drawer-supplier .drw-spl-reminder-row .drw-spl-reminder-label { margin: 0; font-size: 0.78rem; color: #2D3E50; cursor: pointer; white-space: nowrap; }
.drawer-supplier .drw-spl-reminder-row input[type="number"] { flex: 0 0 48px; width: 48px !important; min-width: 0; text-align: center; padding: 4px 6px; font-size: 0.82rem; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); }
.drawer-supplier .drw-spl-reminder-row .drw-spl-reminder-suffix { font-size: 0.78rem; color: #6b7a8d; white-space: nowrap; }
/* Chip compteur Validation : aligné à droite, rectangulaire teal-light (calque Contrat .drw-ctr-sheet-bar-chip) — 2026-06-21 */
.drawer-supplier .drw-spl-sheet-bar-chip { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.7rem; font-weight: 500; line-height: 1.4; border-radius: var(--r-sm, 3px); white-space: nowrap; flex: 0 0 auto; background: #e6f7f5; color: #0d9488; }
.drawer-supplier .drw-spl-sheet-bar-chip:empty { display: none; }

/* ─── Drawer Entreprise — mode DISPLAY (read-only, étape 4f). Calque drawers display Contrat/Projet :
   champs masqués si vides, sheet « Infos comp. » inline, collections en tags seuls. ─── */
.drawer-supplier .drw-spl-readonly-mode .drw-spl-ro-field { margin-bottom: 14px; }
.drawer-supplier .drw-spl-readonly-mode .drw-spl-ro-value { color: #2D3E50; font-size: 0.82rem; line-height: 1.5; padding: 1px 0; }
.drawer-supplier .drw-spl-readonly-mode .form-group { margin-bottom: 14px; }
.drw-spl-ro-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.drw-spl-ro-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-supplier .drw-spl-ro-tag { display: inline-flex; align-items: center; gap: 4px; background: #e6f7f5; color: #0d9488; border: 1px solid rgba(13,148,136,0.25); border-radius: var(--r-sm, 3px); padding: 2px 6px; font-size: 0.74rem; line-height: 1.4; max-width: 100%; }
.drw-spl-ro-tag-sep { opacity: 0.55; }
.drawer-supplier .drw-spl-readonly-html { font-size: 0.84rem; color: #415873; line-height: 1.5; }
.drawer-supplier .drw-spl-readonly-html p:last-child { margin-bottom: 0; }
.drawer-supplier .drw-spl-ro-inline { padding-top: 2px; }
.drawer-supplier .drw-spl-ro-address { white-space: normal; }
.drw-spl-ro-siren { display: flex; align-items: baseline; gap: 8px; padding: 5px 0 10px; border-bottom: 1px solid #f0f4f8; margin-bottom: 14px; }
.drw-spl-ro-siren-label { font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; }
.drw-spl-ro-siren-value { font-size: 0.85rem; color: #2D3E50; font-weight: 500; }
.drw-spl-owner-inline-ro { border-bottom: 1px solid #f0f4f8; }
/* ─── Onglet Pilotage Entreprise — historique de validation (read-only). Rounds + valideurs/décisions. ─── */
.spl-pilo-val-round { border: 1px solid #e3e8ef; border-radius: var(--r-md, 6px); padding: 9px 11px; margin: 0 2px 10px; background: #fff; }
.spl-pilo-val-round-current { border-color: #99e6d9; background: #f6fdfb; }
.spl-pilo-val-round-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.spl-pilo-val-badge { font-size: 0.72rem; padding: 1px 8px; border-radius: var(--r-full, 999px); }
.spl-pilo-val-current { font-size: 0.68rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.04em; }
.spl-pilo-val-date { font-size: 0.74rem; color: #8fa1b3; }
.spl-pilo-val-comment { font-size: 0.78rem; color: #6b7a8d; font-style: italic; margin: 6px 0 2px; padding-left: 2px; }
.spl-pilo-val-requests { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.spl-pilo-val-req { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: #2D3E50; }
.spl-pilo-val-req-icon { font-size: 0.88rem; flex-shrink: 0; }
.spl-pilo-val-req-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-pilo-val-req-comment { color: #8fa1b3; cursor: help; flex-shrink: 0; }
.spl-pilo-val-req-status { font-size: 0.72rem; font-weight: 600; flex-shrink: 0; }
.spl-pilo-val-req-date { font-size: 0.72rem; color: #8fa1b3; flex-shrink: 0; min-width: 64px; text-align: right; }
/* ─── Pilotage Entreprise — refonte card Validation en timeline (2026-06-22) ─── */
.spl-pilo-val-badge { display: inline-block; border-radius: var(--r-sm, 3px); font-size: 0.72rem; font-weight: 600; padding: 1px 8px; white-space: nowrap; }
.spl-pilo-val-timeline { display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.spl-pilo-val-req-request { border-top: 1px dashed #e3e8ef; padding-top: 8px; margin-top: 2px; }
.spl-pilo-val-req-icon-request { color: #8fa1b3; }
.spl-pilo-val-req-status-request { color: #8fa1b3 !important; }
/* ─── Drawer Entreprise — historique de validation read-only (calque .drw-ctr-ro-validators Contrat) ─── */
.drw-spl-ro-validators { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.drw-spl-ro-validator { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 0.82rem; }
.drw-spl-ro-validator-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drw-spl-ro-validator-name { color: #2D3E50; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drw-spl-ro-validator-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.drw-spl-ro-validator-date { font-size: 0.72rem; color: #8fa1b3; }
.drw-spl-ro-validator-status { font-size: 0.7rem; border-radius: var(--r-sm, 3px); padding: 1px 7px; white-space: nowrap; flex-shrink: 0; }
.drw-spl-ro-validator-motif { font-size: 0.76rem; font-style: italic; color: #6b7785; padding-left: 2px; }
.drw-spl-ro-validation-comment { font-style: italic; }
.drw-spl-ro-label { color: #8fa1b3; font-weight: 600; }
/* ─── Pilotage Entreprise — icône d'aide tooltip sur le header de la card Validation ─── */
.spl-pilo-val-help { color: #8fa1b3; cursor: help; font-size: 0.82rem; }
.spl-pilo-val-help:hover { color: #0d9488; }
/* ─── Header Entreprise — bannière « société mère indiquée » (anti-régression, 2026-06-22) ─── */
.spl-header-parent-action { margin-left: 10px; color: #0d9488; font-weight: 600; cursor: pointer; white-space: nowrap; }
.spl-header-parent-action:hover { color: #0b7a70; text-decoration: underline; }
/* ─── Modale compacte « Bilan financier » (4f-E) — DS + couleurs DS. Conserve et stylise les flèches
   de suggestion (.setsuggestedvalue) proposées par les sociétés consultées. ─── */
/* Centrage vertical (equivalent .modal-dialog-centered) ; .modal-dialog a margin 1rem auto. */
#supplierModal.spl-balance-modal .modal-dialog { max-width: 640px !important; display: flex; align-items: center; min-height: calc(100% - 2rem); }
.spl-balance-modal-body { padding: 8px 24px 18px; }
/* Hauteur auto (sinon .container-modal-scrollable height:0 + resize JS => grande zone vide). */
.spl-balance-modal-inner { height: auto !important; max-height: 70vh; overflow-y: auto; overflow-x: hidden; margin: 0; }
/* Marges negatives du .row neutralisees (sinon overflow-x:hidden coupe les annees a gauche). */
.spl-balance-modal-inner .row { margin-left: 0; margin-right: 0; }
.spl-balance-modal-inner .col-md-4.font-weight-bold { font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; }
.spl-balance-modal-inner .col-md-4 { color: #2D3E50; font-size: 0.84rem; padding-left: 8px; padding-right: 8px; }
/* Lignes annee : pas de trait separateur, centrage vertical force, espacement par padding. */
.spl-balance-modal-inner .row.border-bottom { border-bottom: none !important; align-items: center !important; padding: 8px 0 !important; }
.spl-balance-modal-inner .row.border-bottom > .col-md-4 { padding-top: 0 !important; padding-bottom: 0 !important; }
.spl-balance-modal-inner .row.border-bottom .row.form-group { margin: 0 !important; }
.spl-balance-modal-inner .row.border-bottom .input-group { margin: 0 !important; }
.spl-balance-modal-inner .form-group { margin-bottom: 0; }
.spl-balance-modal-inner .input-group { flex-wrap: nowrap; align-items: center; }
/* Champs : seuls les bords gauche/droite sont gris ; bord bas teal au hover/focus (pas de violet).
   Spécificité id (#supplierModal.spl-balance-modal .modal-body input[type]) pour battre la règle
   legacy app.css `#supplierModal .modal-body input[type="text"] { border-bottom: #3C303D }`. */
/* Repos : bords gauche + bas gris (haut/droite transparents mais en 1px pour eviter tout decalage
   et tout flicker de transition). Hover/focus : boite complete grise + bord bas teal (calque drawer projet). */
#supplierModal.spl-balance-modal .modal-body input[type="text"],
#supplierModal.spl-balance-modal .modal-body input[type="number"] { border: 1px solid transparent; border-left-color: #e3e8ef; border-bottom-color: #e3e8ef; border-radius: 0; padding: 4px 6px; font-size: 0.86rem; text-align: right; background: transparent; box-shadow: none; transition: none; }
#supplierModal.spl-balance-modal .modal-body input[type="text"]:hover,
#supplierModal.spl-balance-modal .modal-body input[type="number"]:hover,
#supplierModal.spl-balance-modal .modal-body input[type="text"]:focus,
#supplierModal.spl-balance-modal .modal-body input[type="number"]:focus { border-color: #e3e8ef; border-bottom-color: #0d9488; box-shadow: none; outline: none; }
.spl-balance-modal-inner .setsuggestedvalue { color: #0d9488; cursor: pointer; }
.spl-balance-modal-inner .setsuggestedvalue:hover { color: #0b7a70; }
/* --- Separateur de sous-groupe dans une colonne ctx (reorg Entreprises 2026-06-22).
   Colonne droite Contexte : groupe Qualification (barre sticky QUALIFICATION) puis ce
   divider COORDONNEES & RATTACHEMENTS introduisant Adresse / Entreprises liees / Contacts.
   Harmonise avec .ctx-section-title-label (uppercase, gris-bleu, letter-spacing). --- */
.spl-ctx-subgroup {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid #e5e9f0;
}

/* Colonne droite (Contexte + Pilotage Entreprises) : meme fond gris tres leger #fcfcfd que les
   .ctx-section (calque Projet/Contrat) etendu aux .ctx-info-card de droite (Validation,
   Questionnaire en Contexte ; Evaluations en Pilotage), qui restaient blanches. */
.ctx-right-col .ctx-info-card { background: #fcfcfd; }
.ctx-right-col .ctx-info-card-header { background: #fcfcfd; }
.ctx-right-col .ctx-info-card-header::after { background: #fcfcfd; }

/* Lignes "Projets lies" du Pilotage Entreprises : ligne entiere cliquable (ouvre le drawer display projet) ;
   les pills procedure/statut reutilisent .spl-pilo-eval-status, alignees a droite via le name flex-fill. */
.spl-pilo-proj-row { cursor: pointer; }
.spl-pilo-proj-row:hover { background: #f9fafb; }

/* Pilotage Entreprises : nom de la ligne (projet lie / evaluation) en teal au survol de la ligne. */
.spl-pilo-proj-row:hover .spl-pilo-row-name,
.spl-pilo-eval-row:hover .spl-pilo-row-name { color: #0d9488; }

/* Alignement horizontal des headers de la colonne droite : les .ctx-info-card (Validation, Questionnaire,
   Evaluations) adoptent le meme padding-gauche (16px) et gap (8px) que les .ctx-section (Entreprises liees,
   Contacts) -> icones + titres alignes. Les icones ctx-icon-box / ctx-icon-box-sm ont deja la meme largeur (18px). */
.ctx-right-col .ctx-info-card-header { padding-left: 16px; gap: 8px; }

/* Pastille orange + halo a droite d'un titre de card (suggestions de la societe consultee).
   Calque .spl-header-suggest-dot mais marge a GAUCHE (placement apres le titre). */
/* Crayon « éditer » d'une card porteuse de suggestions : encadre dans l'ambre de la pastille, pour
   pointer l'action a faire (Identite et Bilan financier). */
.ctx-action-btn.ctx-action-btn-suggest { border-color: #f59e0b; color: #f59e0b; }
.ctx-action-btn.ctx-action-btn-suggest:hover { background: #fffbeb; border-color: #d97706; color: #d97706; }
.ctx-resume-btn.ctx-action-btn-suggest { border-color: #f59e0b; }
.ctx-suggest-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b;
    margin-left: 8px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(245,158,11,0.20); cursor: help; vertical-align: middle; }

/* Rond orange + halo de suggestions dans le slot gauche de la liste Entreprises (a gauche de l'avatar).
   2026-06-23 : place dans .ctr-list-left-row1, calque exact .prj-list-fresh-dot (centre dans le slot ;
   margin-right retire car il servait au placement inline avant le nom). Teinte orange #f59e0b. */
.spl-list-suggest-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.20); cursor: help; position: relative; left: -5px; }

/* Entreprises liees (Contexte) : ligne cliquable (drawer display) + nom en teal au survol. */
.spl-ctx-linked-row { cursor: pointer; }
.spl-ctx-linked-row:hover .ctx-supplier-name { color: #0d9488; }

/* Fleche de suggestion (bilans financiers) : icone inline centree, non etiree, qui ne deborde plus
   sur la cellule en dessous (retrait d-flex/fa-1-3x cote markup + securisation flex ici). */
.spl-balance-modal-inner .setsuggestedvalue { align-self: center; flex: 0 0 auto; font-size: 0.9rem; line-height: 1; }

/* Bilans financiers : marge a droite des chiffres (alignes a droite) pour qu'ils ne soient plus
   recouverts par la fleche de suggestion situee au bord droit de la cellule. */
#supplierModal.spl-balance-modal .modal-body input[type="text"],
#supplierModal.spl-balance-modal .modal-body input[type="number"] { padding-right: 24px; }

/* ── Onglet Finance : layout 2 colonnes (Enjeux à gauche, Validation à droite) ──
   Scroll global conservé (pas de scroll indépendant par colonne, pas de barres de titre).
   align-items:flex-start → colonnes à hauteurs indépendantes. Empilement sous 900px. */
.fin-tab-layout { display: flex; gap: 28px; align-items: flex-start; }
.fin-tab-left { flex: 1; min-width: 0; }
.fin-tab-right { flex: 0 0 364px; width: 364px; min-width: 0; }
.fin-tab-right .fin-add-panel { flex-wrap: wrap; }
.fin-tab-right .fin-add-panel .bootstrap-select { max-width: 100% !important; min-width: 0 !important; }
@media (max-width: 900px) { .fin-tab-layout { flex-direction: column; } .fin-tab-right { width: 100%; flex: none; } }
/* Page « Enjeux & performance » en lecture seule (costs_content) : les valeurs en texte
   (pc-td-computed) HORS lignes « Total » doivent rendre comme les inputs de l'édition
   (poids et taille normaux), pas en gras 600. En édition ces cellules sont des <input>
   (ou des lignes yearly normalisées à 400 via les ids #pc-rc-yearly / #pc-total-yearly) ;
   le display utilise des ids suffixés -v qui n'attrapaient pas ces overrides → tout en gras.
   Les lignes « Total » (.pc-tr-total) restent en gras 700 dans les deux versions. */
.pc-costs-table tr:not(.pc-tr-total) td.pc-td-computed { font-weight: 400; font-size: 0.80rem; }
/* Chaîne de hauteur des pages Enjeux & performance (/costs édition + /costs_validated display) :
   #project-costs-scroll a une hauteur fixe (JS resizeItemEditContainer) + overflow:hidden ;
   sans height:100% sur .pc-inner et .pc-layout, le height:100% des colonnes pc-left/pc-right
   ne se résolvait pas → colonnes non bornées → pas de scroll, contenu du bas inaccessible.
   (Classes spécifiques à ces 2 pages autonomes — l'onglet utilise .fin-inner, non impacté.) */
.pc-inner { height: 100%; }
.pc-layout { height: 100%; }
/* ── Messages d'aide/statut sous la ligne dates : fonds distincts du teal clair ambiant
   (avant : tous sur un pâle teal/gris qui se fondait). Couleurs sémantiques distinctes. ── */
/* Hint « Renseignez les dates… » → ambre (action attendue) */
.pc-dates-hint { background: #fffbeb; border-left-color: #f59e0b; color: #92400e; }
.pc-dates-hint i { color: #f59e0b; }
/* « Calcul en cours… » → bleu (traitement) ; surcharge le hint (l'élément porte les 2 classes) */
.pc-calc-running { background: #eff6ff; border-left-color: #3b82f6; color: #1d4ed8; }
.pc-calc-running i { color: #3b82f6; }
/* « Répartition calculée automatiquement… » → vert (confirmation) */
.pc-simulation-notice { background: #f0fdf4; border-top-color: #86efac; color: #15803d; }
.pc-simulation-notice i.fa-info-circle { color: #16a34a; }
.pc-simulation-notice-close { color: #86efac; }
.pc-simulation-notice-close:hover { color: #15803d; }

/* ── Card Documents (coûts) : liste compacte sans entêtes de colonnes, adaptée à la
   colonne droite étroite (~364px). Remplace la grille Bootstrap qui tassait le texte. ── */
.pc-doc-list { display: flex; flex-direction: column; }
.pc-doc-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.pc-doc-item:last-child { border-bottom: none; }
.pc-doc-icon { flex-shrink: 0; width: 20px; text-align: center; color: var(--fin-teal); font-size: 1.05rem; }
.pc-doc-main { flex: 1; min-width: 0; }
.pc-doc-name { font-size: 0.82rem; font-weight: 500; color: var(--fin-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-doc-meta { font-size: 0.72rem; color: var(--fin-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pc-doc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pc-doc-actions a { color: var(--fin-text-muted); line-height: 1; }
.pc-doc-actions a:hover { color: var(--fin-teal); }
/* Card Documents (coûts) : actions (voir/télécharger/supprimer) révélées au survol de la ligne
   uniquement. opacity (et non display:none) → pas de décalage de largeur du nom. */
.pc-doc-actions { opacity: 0; transition: opacity 0.15s ease; }
.pc-doc-item:hover .pc-doc-actions,
.pc-doc-item:focus-within .pc-doc-actions { opacity: 1; }
/* Rond jaune "action de validation des coûts requise" (valideur ou initiateur).
   Liste de gauche : calqué sur .prj-list-fresh-dot (teal), mais ambre + halo pulsé, dominant.
   Onglet Finance : variante inline à côté du libellé (remplace l'ancien compteur rouge). */
.prj-list-validation-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; position: relative; left: -5px; box-shadow: 0 0 0 2px rgba(245,158,11,0.30); animation: prjValidationPulse 1.8s ease-in-out infinite; }
.prj-tab-validation-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; vertical-align: middle; margin-left: 5px; box-shadow: 0 0 0 2px rgba(245,158,11,0.30); animation: prjValidationPulse 1.8s ease-in-out infinite; }
@keyframes prjValidationPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245,158,11,0.30); }
    50%      { box-shadow: 0 0 0 5px rgba(245,158,11,0.06); }
}
/* Bouton de fermeture des bandeaux de réponse de validation (onglet Finance). */
.fin-alert-close { margin-left: auto; flex-shrink: 0; align-self: flex-start; background: none; border: none; color: inherit; opacity: 0.55; cursor: pointer; padding: 0 2px; line-height: 1; font-size: 0.85rem; }
.fin-alert-close:hover { opacity: 1; }
.fin-alert-close:focus { outline: none; }
.fin-alert-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Onglet Finance (colonne réduite) : le statut (pill) passe seul sur la 2e ligne, sous le titre,
   pour que les actions (ex. "Voir les éléments financiers") restent toujours en haut à droite de la card.
   Le pill prend un order > celui des actions (qui ont margin-left:auto) → il est repoussé à la ligne. */
#project-costs-content .fin-card-header > .fin-status-pill { order: 2; margin-left: 0; }
/* Card Validation (colonne droite onglet Finance) : même fond gris léger (#fcfcfd) que les
   cards de droite de l'onglet Contexte (.ctx-right-col .ctx-section / .ctx-section-header),
   entête comprise (les cards Contexte sont uniformément grises). */
.fin-tab-right .fin-card,
.fin-tab-right .fin-card > .fin-card-header { background: #fcfcfd; }
/* Module Contrats — rond jaune "action de validation requise" (valideur "À valider" OU
   initiateur "Validé/Refusé"). Liste de gauche : calque exact des dots Entreprises/Projets
   (.ctr-list-left-row1, #f59e0b, left:-5px) + halo pulsé (réutilise @keyframes prjValidationPulse).
   Onglet Pilotage : variante inline à côté du libellé. */
.ctr-list-validation-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; position: relative; left: -5px; box-shadow: 0 0 0 2px rgba(245,158,11,0.30); animation: prjValidationPulse 1.8s ease-in-out infinite; }
.ctr-tab-validation-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; vertical-align: middle; margin-left: 5px; box-shadow: 0 0 0 2px rgba(245,158,11,0.30); animation: prjValidationPulse 1.8s ease-in-out infinite; }
/* Action valideur — design épuré SANS carte, intégré en tête de colonne gauche (page Enjeux &
   performance). Séparé des tableaux de coûts par un simple trait. La question fait office de titre. */
.pc-valform-bare { padding: 2px 0 18px; margin-bottom: 18px; border-bottom: 1px solid #e8eef3; }
.pc-valform-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pc-valform-icon { color: var(--fin-teal); font-size: 1.05rem; }
.pc-valform-title { font-size: 1rem; font-weight: 600; color: var(--fin-text-dark); }
.pc-valform-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fin-text-muted); margin-bottom: 5px; }
.pc-valform-optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.pc-valform-bare textarea.form-control { min-height: 58px; font-size: 0.85rem; }
.pc-valform-actions { display: flex; gap: 10px; margin-top: 14px; }
.pc-valform-answered { margin-bottom: 18px; }
/* Pastille "New !" de l'historique de validation (cards Validation onglet Finance + page /costs) :
   inline-flex centré, remplace l'ancien combo .sm-pilled + .h6 qui décentrait le texte. */
.pc-new-badge { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 7px; border: 1px solid #dc3545; color: #dc3545; border-radius: var(--r-full, 999px); font-size: 0.62rem; font-weight: 600; line-height: 1; margin-right: 4px; vertical-align: middle; white-space: nowrap; letter-spacing: 0.02em; }
/* Nom Fournisseur cliquable dans le header du contrat → drawer Entreprise display. */
.ctr-header-supplier-link { color: inherit; cursor: pointer; text-decoration: none; }
.ctr-header-supplier-link:hover { color: #0d9488; text-decoration: underline; }
.ctr-header-supplier-link:focus { outline: none; }
/* -- Etape 1 (2026-06-24) -- chip compteur du bottom-sheet "Documents" du drawer Projet.
   Calque du chip Contrat (.drw-ctr-sheet-bar-chip). Affiche dans la barre, entre le titre et le chevron. */
.drawer-project .drw-prj-sheet-bar-chip { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 0.7rem; border-radius: var(--r-sm, 3px); white-space: nowrap; flex: 0 0 auto; line-height: 1.4; }
.drawer-project .drw-prj-sheet-bar-chip-empty { background: rgba(45,62,80,0.08); color: #6b7a8d; }
.drawer-project .drw-prj-sheet-bar-chip-filled { background: #e6f7f5; color: #0d9488; }
/* -- Liste documents compacte des drawers Projet + Contrat (bottom-sheets etroits, 2026-06-24).
   Calque .pc-doc-* (project costs). Markup _project_documents_widget / _contract_documents_widget. */
.drw-doc-list { display: flex; flex-direction: column; }
.drw-doc-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.drw-doc-item:last-child { border-bottom: none; }
.drw-doc-icon { flex-shrink: 0; width: 20px; text-align: center; color: #0d9488; font-size: 1.05rem; }
.drw-doc-main { flex: 1; min-width: 0; }
.drw-doc-name { font-size: 0.82rem; font-weight: 500; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drw-doc-meta { font-size: 0.72rem; color: #8fa1b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.drw-doc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease; }
.drw-doc-item:hover .drw-doc-actions, .drw-doc-item:focus-within .drw-doc-actions { opacity: 1; }
.drw-doc-actions a { color: #8fa1b3; line-height: 1; }
.drw-doc-actions a:hover { color: #0d9488; }

/* Bouton "Ajouter document" du drawer Projet au DS — miroir exact de la regle Contrat (L13317),
   avec !important pour battre .btn-outline-red-light orange rendu par FineUploader. Le Contrat a deja sa regle. */
.drawer-project .drw-prj-sheet[data-sheet-key="documents"] .add_element_link.btn-outline-red-light,
.drawer-project #project_documents .add_element_link.btn-outline-red-light { color: #0d9488 !important; background: transparent !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; transition: all 0.15s; }
.drawer-project .drw-prj-sheet[data-sheet-key="documents"] .add_element_link.btn-outline-red-light:hover,
.drawer-project .drw-prj-sheet[data-sheet-key="documents"] .add_element_link.btn-outline-red-light:focus,
.drawer-project #project_documents .add_element_link.btn-outline-red-light:hover,
.drawer-project #project_documents .add_element_link.btn-outline-red-light:focus { background: #0d9488 !important; color: #fff !important; }
/* -- Drawer Demande (ProjectSource) -- sections a plat (Etape 2, 2026-06-24). Reutilise le chrome .drawer-project. */
.drawer-source .drw-src-name-display { font-size: 1.05rem; font-weight: 700; color: #2D3E50; padding: 4px 0; line-height: 1.3; }
.drawer-source .drw-src-meta { font-size: 0.85rem; color: #415873; }
.drawer-source .drw-src-section { margin-top: 18px; }
.drawer-source .drw-src-section-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #0d9488; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid rgba(13,148,136,0.18); }
.drawer-source .drw-src-section-body { font-size: 0.88rem; color: #2D3E50; }
/* -- Drawer Demande -- raffinement 2026-06-24 : props (label haut + pills), checklist teal, affectation, historique compact. */
.drawer-source .drw-src-content { padding: 14px 16px 24px; }
.drawer-source .drw-src-prop { margin-bottom: 12px; }
.drawer-source .drw-src-prop-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #8fa1b3; margin-bottom: 3px; }
.drawer-source .drw-src-prop-value { font-size: 0.85rem; color: #2D3E50; }
.drawer-source .drw-src-prop-rich { font-size: 0.85rem; color: #2D3E50; margin-bottom: 12px; }
.drawer-source .drw-src-pills { display: flex; flex-wrap: wrap; gap: 5px; }
/* Pills calque exact du drawer Projet (.drw-prj-cat-tag) : fond teal clair + rond couleur. */
.drawer-source .drw-src-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px 2px 6px; font-size: 0.74rem; line-height: 1.4; background: #e6f7f5; color: #0d9488; border: 1px solid rgba(13,148,136,0.25); border-radius: var(--r-sm, 3px); }
.drawer-source .drw-src-pill-dot { display: inline-block; width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.drawer-source .drw-src-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dates côte à côte (Début / Fin) */
.drawer-source .drw-src-prop-date { display: inline-block; width: 49%; vertical-align: top; }
.drawer-source .drw-src-budget { white-space: nowrap; }
.drawer-source .drw-src-checklist { margin-bottom: 12px; }
.drawer-source .drw-src-check-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: #2D3E50; padding: 3px 0; }
.drawer-source .drw-src-check-item i { color: #c4ccd6; margin-top: 2px; font-size: 0.95rem; }
.drawer-source .drw-src-check-item.is-checked i { color: #0d9488; }
.drawer-source .drw-src-assign { padding: 10px 12px; background: rgba(13,148,136,0.05); border: 1px solid rgba(13,148,136,0.18); border-radius: var(--r-md, 6px); }
.drawer-source .drw-src-assign-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.drawer-source .drw-src-assign-select { flex: 1 1 auto; min-width: 0; }
.drawer-source .drw-src-assign-select .bootstrap-select { width: 100% !important; }
.drawer-source .drw-src-hist-item { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.drawer-source .drw-src-hist-item:last-child { border-bottom: none; }
.drawer-source .drw-src-hist-line { display: flex; align-items: center; gap: 8px; }
.drawer-source .drw-src-hist-badge { flex: 0 0 auto; font-size: 0.66rem; padding: 1px 7px; }
.drawer-source .drw-src-hist-who { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; color: #2D3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-source .drw-src-hist-when { flex: 0 0 auto; font-size: 0.76rem; color: #8fa1b3; }
.drawer-source .drw-src-hist-sub { font-size: 0.78rem; color: #6b7a8d; margin-top: 3px; }
.drawer-source .drw-src-hist-comment { font-size: 0.8rem; color: #2D3E50; margin-top: 3px; }
/* -- Drawer Demande -- formulaire new/edit (2026-06-24). */
.drawer-source .drw-src-name-field input { font-size: 1.05rem; font-weight: 600; color: #2D3E50; }
.drawer-source .drw-src-fields { margin-bottom: 6px; }
.drawer-source .documents_documents-row h5 { display: none; }
.drawer-source .add_element_link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 14px; font-size: 0.78rem; font-weight: 500; color: #0d9488 !important; background: #fff !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; transition: all 0.15s; }
.drawer-source .add_element_link:hover, .drawer-source .add_element_link:focus { background: #0d9488 !important; color: #fff !important; text-decoration: none; }
/* -- Drawer Demande -- formulaire champ-par-champ (2026-06-24). */
.drawer-source .drw-src-fieldwrap { margin-bottom: 14px; }
.drawer-source .drw-src-field-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #8fa1b3; margin-bottom: 4px; }
.drawer-source .drw-src-field-label.drw-src-label-required { color: #2D3E50; }
.drawer-source .drw-src-err { font-size: 0.76rem; color: #e02424; margin-top: 4px; line-height: 1.3; }
.drawer-source .drw-src-fieldwrap.has-error .form-control, .drawer-source .drw-src-fieldwrap.has-error input, .drawer-source .drw-src-fieldwrap.has-error textarea { border-color: #e02424; }
.drawer-source .drw-src-name-field input { text-align: left; font-size: 1.05rem; font-weight: 600; color: #2D3E50; }
.drawer-source .drw-src-dates-row { display: flex; gap: 12px; }
.drawer-source .drw-src-date-col { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.drawer-source .drw-src-date-col input { width: 100%; }
.drawer-source .drw-src-help-now { color: #8fa1b3; cursor: help; margin-left: 4px; font-size: 0.85rem; }
.drawer-source input[type="checkbox"], .drawer-source input[type="radio"] { accent-color: #0d9488; }
.drawer-source .drw-src-footer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.drawer-source #project_source_save { background: #6b7a8d !important; border-color: #6b7a8d !important; color: #fff !important; }
.drawer-source #project_source_save:hover, .drawer-source #project_source_save:focus { background: #586473 !important; border-color: #586473 !important; color: #fff !important; }
/* -- Drawer Demande -- cases a cocher / radios en teal (override skins blue/orange) + voile gris (2026-06-24). */
.drawer-source input[type="radio"]:checked + .radio-label:before { background-color: #0d9488 !important; }
.drawer-source .form-check input[type="checkbox"]:checked + label::before,
.drawer-source .form-check input[type="radio"]:checked + label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.drawer-source .custom-checkbox input:checked + span { border-color: #0d9488 !important; }
.drawer-source .custom-checkbox input:checked + span:before { border-color: #0d9488 !important; }
.drawer-source .custom-control-input:checked ~ .custom-control-label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.drawer-source input[type="checkbox"]:checked, .drawer-source input[type="radio"]:checked { accent-color: #0d9488 !important; }

.drw-src-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(45,62,80,0.45); z-index: 1059; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body.projectsource-drawer-open .drw-src-overlay { opacity: 1; pointer-events: auto; }
/* -- Drawer Demande -- resume d'erreurs de validation (2026-06-24). */
.drawer-source .drw-src-err-summary { background: #fdecea; border: 1px solid #f5c6cb; color: #b02a37; border-radius: var(--r-lg, 10px); padding: 8px 12px; font-size: 0.8rem; line-height: 1.4; margin-bottom: 14px; }
.drawer-source .drw-src-err-summary i { margin-right: 6px; }
/* -- Drawer Demande -- footer compact qui ne casse pas avec 4 boutons (Supprimer + Fermer + brouillon + Envoyer). */
.drawer-source .drw-src-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; width: 100%; }
.drawer-source .drw-src-footer-left, .drawer-source .drw-src-footer-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drawer-source .drw-src-footer .btn { font-size: 0.8rem; padding: 6px 12px; white-space: nowrap; }
/* -- Motif de rejet mis en valeur dans le bandeau gris (Demande) -- 2026-06-24. */
.drw-motif { display: block; margin: 8px 0; padding: 8px 12px; background: #fff; border-left: 3px solid #e02424; border-radius: var(--r-md, 6px); color: #2D3E50; font-weight: 600; font-style: italic; }
/* Multi-doc rows (collections documents Projet/Contrat/Notes) - croix de suppression de rangee */
.mdoc-row-remove { color:#9ca3af; font-size:1.05rem; line-height:1; padding:2px 6px; text-decoration:none; }
.mdoc-row-remove:hover { color:#dc3545; }
.mdoc-row-remove:focus { outline:none; }
.mdoc-row-remove:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }

/* Bouton "Ajouter document" teal dans les modales Notes (Projet/Contrat/Entreprise) - aligne sur les drawers */
#note_documents .add_element_link.btn-outline-red-light { color:#0d9488 !important; background:transparent !important; border:1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; transition:all .15s; }
#note_documents .add_element_link.btn-outline-red-light:hover, #note_documents .add_element_link.btn-outline-red-light:focus { background:#0d9488 !important; color:#fff !important; }

/* Badge "Note" sur un document issu d'une note (onglets Documents Contrat/Fournisseur + side-panel Projet) */
.ctr-doc-note-badge, .sp-item-row-note-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.62rem; font-weight:600; color:#7c3aed; background:#f3e8ff; border-radius: var(--r-sm, 3px); padding:1px 6px; }

/* ── Modale Contact entreprise (refonte 2026-06-25) : champs empilés + sections ── */
.scf-body { padding: 16px 20px; }
.scf-section { margin-bottom: 18px; }
.scf-section:last-child { margin-bottom: 4px; }
.scf-section-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #2b3f57; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #eef1f5; }
.scf-field { margin-bottom: 10px; }
.scf-field:last-child { margin-bottom: 0; }
.scf-field .form-control { width: 100%; }
.scf-field .bootstrap-select { width: 100% !important; }
.scf-field .bootstrap-select > .dropdown-toggle { width: 100%; }
.scf-other { display: none; }
.scf-field-check { display: flex; align-items: center; }
/* Modale Contact entreprise : largeur réduite de moitié (vs modal-lg) — champs empilés étroits */
#supplierContactModal .modal-dialog { max-width: 400px; }
/* Messages d'erreur de la modale Contact entreprise : texte rouge sous le champ */
.scf-error { color: #dc3545; font-size: 0.68rem; line-height: 1.25; margin-top: 3px; }
.scf-body > .scf-error { margin-bottom: 10px; }
/* Statut (checkbox active) de la modale Contact entreprise : pastille teal + icône d'aide grise/petite */
.scf-field-check .form-check input[type="checkbox"]:checked + label::before { background-color: #0d9488; border-color: #0d9488; }
.scf-help-icon { font-size: 0.85rem; }
/* Lien dans un toast moderne (ex. « Aller au dossier » de la notif d'activité Mercure) — lisible sur fond foncé */
.app-toast-text a { color: #fff; text-decoration: underline; font-weight: 600; }
.app-toast-text a:hover { color: #d1fae5; }

/* =====================================================================
   RFX RESKIN — chantier reskin visuel module Appels d'offres (2026-06-25)
   Étape 0 : socle + pilote page Présentation acheteur.
   Tout est scopé sous .rfx-ds (posé via {% block contentClass %}rfx-ds{% endblock %}
   sur .main-content) pour NE PAS impacter les pages RFx pas encore migrées.
   Reskin purement visuel : aucune modif de markup fonctionnel ni de JS.
   Réf : design-system-reference. Accent orange #ff855e -> teal #0d9488 ;
   header navy plein #415873 -> blanc, titre Anton navy #2D3E50.
   ===================================================================== */

/* --- Header : bandeau navy plein -> blanc DS, texte navy --- */
.rfx-ds .main-color-project { background: #fff !important; }
.rfx-ds .main-color-project .text-white { color: #2D3E50 !important; }
.rfx-ds .main-color-project a.text-white { color: #0d9488 !important; }
.rfx-ds .main-color-project a.text-white:hover { color: #0b7d72 !important; text-decoration: underline; }
/* Titre AO / "Appels d'offres" / "Itération N" en Anton navy, taille DS */
.rfx-ds .main-color-project .logo-font.h1,
.rfx-ds .main-color-project .logo-font.h1 span { font-size: 1.5rem !important; color: #2D3E50 !important; }
/* Étoile favori : teal (pleine = active, outline = inactive) */
.rfx-ds .rfp-favorite-toggle .fa-star { color: #0d9488 !important; }

/* --- Onglets principaux : réplique EXACTE du style .prj-tabs (module Projets) + alignement 40px.
   padding-left 26px sur l'ul + 14px de padding du nav-link => 1er onglet à 40px (aligné breadcrumb/contenu). --- */
.rfx-ds #mainRfpTabs.nav-tabs { border-bottom: 1px solid #e2e8f0; background: #fff; padding-left: 40px; padding-right: 40px; flex-wrap: nowrap; position: relative; z-index: 2; }
/* 1er onglet : padding gauche annulé => son texte (et son underline) démarrent pile à 40px. */
.rfx-ds #mainRfpTabs .nav-item:first-child .nav-link { padding-left: 0; }
.rfx-ds #mainRfpTabs .nav-link,
.rfx-ds #mainRfpTabs .nav-link.active,
.rfx-ds #mainRfpTabs .nav-link:hover { position: relative; border: none !important; background: transparent; font-family: inherit !important; font-size: 0.8rem !important; font-weight: 500 !important; padding: 18px 14px; margin: 0 6px 0 0; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.12s; }
.rfx-ds #mainRfpTabs .nav-link { color: #a6b2c0; }
.rfx-ds #mainRfpTabs .nav-link::after { display: none; }
/* Survol : filet gris clair, et surtout PAS le soulignement teal plein — celui-ci est reserve a l'onglet
   ACTIF (regle suivante). Avant, survol et actif se peignaient a l'identique et seule la graisse les
   distinguait : on ne savait plus ou on etait en promenant la souris (retour design Olivier 2026-08-25).
   `:not(.disabled)` : un onglet desactive ne doit rien renvoyer au survol (il se soulignait en teal). */
.rfx-ds #mainRfpTabs .nav-link:not(.disabled):hover { color: #0d9488; font-weight: 400 !important; box-shadow: inset 0 -2px 0 #cbd5e1 !important; }
.rfx-ds #mainRfpTabs .nav-link:hover::after { transform: scaleX(1); }
.rfx-ds #mainRfpTabs .nav-link.active,
.rfx-ds #mainRfpTabs .nav-link.active:hover { color: #0d9488 !important; font-weight: 600 !important; box-shadow: inset 0 -2px 0 #0d9488 !important; }
.rfx-ds #mainRfpTabs .nav-link.active::after { transform: scaleX(1); }
.rfx-ds #mainRfpTabs .nav-link:focus { outline: none; }
.rfx-ds #mainRfpTabs .nav-link.disabled { color: #cbd5e1; }
.rfx-ds #mainRfpTabs .nav-link.disabled::after { display: none; }

/* --- Pills statut (couleur métier dynamique conservée en inline) : forme DS aplatie --- */
.rfx-ds .auto-pilled { border-radius: 2px !important; padding: 3px 10px !important; font-size: 0.72rem !important; font-weight: 500 !important; }

/* --- Wizard étapes config (Présentation/Accords/Source/Calendrier/Accès) : actif teal au lieu de navy --- */
.rfx-ds .step-active .step-circle { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.rfx-ds .step-active .step-text { color: #0d9488 !important; }
.rfx-ds .step-active .step-content .step-circle::before { color: #0d9488 !important; }

/* --- Accent orange historique -> teal (icônes crayon, liens, titres itération) --- */
.rfx-ds .text-red-light { color: #0d9488 !important; }
/* Titres de section du contenu (Nom / Langue / Présentation) : navy DS, taille réduite.
   font-weight en !important pour battre `.h1..h6 { font-weight:400!important }` (app.css). */
.rfx-ds h1.text-rfp { color: #2D3E50 !important; font-size: 1.05rem; font-weight: 600 !important; }

/* --- Boutons : Enregistrer (outline teal) + Enregistrer&suivant (solide teal) --- */
.rfx-ds .btn-outline-red-light { color: #0d9488 !important; background-color: #fff !important; border-color: #0d9488 !important; border-radius: var(--r-md, 6px); }
.rfx-ds .btn-outline-red-light:hover { color: #fff !important; background-color: #0d9488 !important; border-color: #0d9488 !important; }
.rfx-ds .btn-success { background-color: #0d9488 !important; border-color: #0d9488 !important; border-radius: var(--r-md, 6px); }
.rfx-ds .btn-success:hover { background-color: #0b7d72 !important; border-color: #0b7d72 !important; }
/* Boutons orange pleins legacy (AddDocument, AddGeneralDocuments, etc.) -> teal DS */
.rfx-ds .btn-red-light { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; border-radius: var(--r-md, 6px); }
.rfx-ds .btn-red-light:hover { background-color: #0b7d72 !important; border-color: #0b7d72 !important; color: #fff !important; }

/* --- Encart d'aide (ampoule) : callout DS (accent teal à gauche, icône + texte alignés palette) --- */
.rfx-ds .media.bg-light {
    background: #f8fafb !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #0d9488 !important;
    border-radius: 2px;
}
.rfx-ds .media.bg-light .fa-lightbulb { color: #0d9488 !important; }
.rfx-ds .media.bg-light .media-body { color: #415873 !important; font-weight: 400; }

/* --- Collapsers de propriétés : titres navy --- */
.rfx-ds .collapser .collapseTitle { color: #2D3E50 !important; }

/* --- Focus : pas de cadre noir au clic souris (règle DS focus-visible) --- */
.rfx-ds a:focus, .rfx-ds button:focus, .rfx-ds .nav-link:focus { outline: none; }
.rfx-ds a:focus-visible, .rfx-ds button:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }

/* --- Contenu sous la timeline : typographie + champs au DS (scopé au corps scrollable) --- */
/* Titres de section (onglets config) au format "icône + titre" identique aux cartes du pilote :
   marqueur teal + titre Lexend 0.9rem/600 navy (= .rfx-card-title) + filet bas. CSS-only, aucun markup touché.
   !important pour battre `.h1..h6 { font-weight:400!important }` (app.css). */
.rfx-ds .container-scrollable h1.text-rfp,
.rfx-ds .container-scrollable h2.text-rfp {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Lexend Deca', sans-serif !important;   /* neutralise un éventuel .logo-font (Anton) sur le titre */
    font-size: 1rem !important; font-weight: 600 !important; color: #2D3E50 !important;
    letter-spacing: 0;
    padding: 0 0 10px !important;
    margin: 40px 0 16px !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(45,62,80,0.10) !important;
}
.rfx-ds .container-scrollable h1.text-rfp:first-child,
.rfx-ds .container-scrollable h2.text-rfp:first-child { margin-top: 8px !important; }
/* Titre vide (ex. <h1 class="text-rfp"></h1> spacer legacy) : masqué (sinon l'icône engrenage s'affiche seule). */
.rfx-ds .container-scrollable h1.text-rfp:empty { display: none !important; }
.rfx-ds .container-scrollable h1.text-rfp::before,
.rfx-ds .container-scrollable h2.text-rfp::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f013"; /* cog = configuration */
    color: #0d9488; font-size: 1rem; flex-shrink: 0;
}
/* `text-info` (cyan Bootstrap) recoloré navy DS partout (titres, totaux, emphase) — rôle/taille conservés. */
.rfx-ds .container-scrollable .text-info { color: #2D3E50 !important; }
/* Seul le motif d'aide `.font-italic.text-info` (sous-texte) reste petit italique gris. */
.rfx-ds .container-scrollable .font-italic.text-info { color: #8fa1b3 !important; font-style: italic; font-weight: 500; font-size: 0.78rem; }
/* Séparateurs `border-info` (cyan Bootstrap) recolorés en gris DS subtil — `border-danger` (rouge validation) conservé. */
.rfx-ds .container-scrollable .border-info { border-color: rgba(45,62,80,0.12) !important; }
/* Questionnaire entreprise (affichage) — titres teal, pas de traits gris, question en encadré teal clair (style consigne sans ampoule). */
.rfx-ds .container-scrollable .rfx-q-item { border-bottom: none !important; }
.rfx-ds .container-scrollable .rfx-q-item h2 { color: #0d9488 !important; font-size: 0.95rem !important; font-weight: 600 !important; margin-bottom: 10px; }
.rfx-ds .container-scrollable .rfx-q-prompt {
    background: rgba(13,148,136,0.07);
    border-left: 3px solid #0d9488;
    border-radius: 0 var(--r-md, 6px) var(--r-md, 6px) 0;
    padding: 10px 14px;
    color: #415873;
    margin-bottom: 10px;
}
/* Qualifications/Questionnaires — hiérarchie DS à 4 niveaux, identique acheteur + sociétés consultées.
   1. Thème (1re catégorie)      → barre pleine navy
   2. Sous-thème (2e catégorie)  → barre teal clair
   3. Question (label)           → navy gras, prominent
   4. Détail (texte/aide)        → gris, plus petit, fin trait teal à gauche */
.rfx-ds .container-scrollable .bg-info.text-white { background-color: #2D3E50 !important; color: #fff !important; font-size: 0.9rem !important; font-weight: 600 !important; padding: 7px 14px !important; border-radius: var(--r-lg, 10px); margin-top: 10px; }
.rfx-ds .container-scrollable .bg-info-light { background-color: rgba(13,148,136,0.10) !important; border-radius: var(--r-lg, 10px); padding: 6px 14px !important; margin-top: 6px; }
.rfx-ds .container-scrollable .bg-info-light.text-info { color: #0d9488 !important; font-size: 0.85rem !important; font-weight: 600 !important; }
/* ⚠️ `.bg-info-light` a ete concu pour un BLOC (`<div>`) : d ou le radius, le padding et la marge.
   Or le comparateur de grilles le pose sur des CELLULES (10 `<td>` dans `_compare.html.twig`, et
   idem dans `_finalization_table` et `proposal_price_compare_alternative_bom`). Un `td` arrondi a
   10px produit une suite de festons sur la ligne de total (signale par Olivier, 2026-08-27).
   On neutralise le SEUL radius sur les cellules : le fond teal et le padding font partie du rendu
   actuel du tableau, les toucher changerait la hauteur des lignes et les couleurs - zone gelee.
   `margin-top` est de toute facon ignore sur un `table-cell`. Specificite (0,3,1) > (0,3,0) : pas
   besoin d `!important`. */
.rfx-ds .container-scrollable td.bg-info-light, .rfx-ds .container-scrollable th.bg-info-light { border-radius: 0; }
.rfx-ds .container-scrollable .rfx-q-title { color: #2D3E50 !important; font-size: 0.9rem !important; font-weight: 600 !important; line-height: 1.4; margin: 12px 0 4px !important; padding-left: 18px; }
.rfx-ds .container-scrollable .rfx-q-detail { color: #64748b !important; font-size: 0.85rem !important; line-height: 1.4; padding: 2px 0 2px 12px; border-left: 2px solid rgba(13,148,136,0.45); margin: 0 0 6px 6px; }
/* Réponse sous le détail : même indentation que question/détail. */
.rfx-ds .container-scrollable .rfx-q-answer { padding-left: 18px; }
/* Acheteur (#rfp-content) : resserre l'espace au-dessus de la question (structure en lignes/colonnes plus aérée que le portail). */
.rfx-ds #rfp-content .rfx-q-title { margin-top: 2px !important; }
/* Champ Poids déplacé sur la ligne du titre de question : hauteur réduite pour ne pas gonfler la ligne. */
.rfx-ds .container-scrollable .rfx-weight-input { height: 30px !important; padding: 0.2rem 0.5rem !important; }
/* Étoiles de notation : plus petites (réduit l'espace notes/moyennes) + teal DS au lieu du bleu clair. */
.rfx-ds .container-scrollable .starrating span:before,
.rfx-ds .container-scrollable .starrating label:before { font-size: 1em; margin: 1px; }
.rfx-ds .container-scrollable .starrating span.starred,
.rfx-ds .container-scrollable .starrating label.starred { color: #0d9488 !important; }
/* Corps de texte (instructions, questions) : tailles DS, navy mid, poids normal */
/* Texte classique (taille unique) : 0.85rem navy-mid. */
.rfx-ds .container-scrollable .h3,
.rfx-ds .container-scrollable .h4 { font-size: 0.85rem !important; font-weight: 400; color: #415873; line-height: 1.5; }
/* Champs de saisie : bordure DS, radius 2px, focus teal */
.rfx-ds .container-scrollable .form-control,
.rfx-ds .container-scrollable input[type="text"],
.rfx-ds .container-scrollable select {
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    font-size: 0.9rem; color: #2D3E50; box-shadow: none;
}
.rfx-ds .container-scrollable .form-control:focus,
.rfx-ds .container-scrollable input[type="text"]:focus,
.rfx-ds .container-scrollable select:focus {
    border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); outline: none;
}
/* Onglets de traduction (Français / English) : underline teal DS */
.rfx-ds .container-scrollable .nav-tabs { border-bottom: 1px solid #e2e8f0; }
.rfx-ds .container-scrollable .nav-tabs .nav-link {
    color: #8fa1b3; border: none; border-bottom: 2px solid transparent;
    font-weight: 500; padding: 0.45rem 0.9rem;
}
.rfx-ds .container-scrollable .nav-tabs .nav-link.active {
    color: #2D3E50; font-weight: 600; border-bottom-color: #0d9488; background: transparent;
}
/* Lien "Réduire tout" + titres de propriétés repliables : DS */
.rfx-ds .container-scrollable #collapse-all { color: #8fa1b3; font-size: 0.85rem; }
.rfx-ds .container-scrollable #collapse-all:hover { color: #0d9488; text-decoration: none; }
.rfx-ds .container-scrollable .collapseTitle { font-size: 0.95rem; }

/* --- Refonte contenu Présentation : cartes DS (étape 0, refonte structurelle) --- */
/* Padding VERTICAL retiré de l'élément dimensionné par resizeItemEditContainer (.height() fixe)
   sinon padding + hauteur calculée => dépassement => scrollbar pleine page. Le padding vertical
   vit sur la colonne interne (qui scrolle). Horizontal 40px = alignement contenu. */
.rfx-ds .rfx-content-scroll { padding: 0 40px; box-sizing: border-box; }
.rfx-ds .rfx-form-col { max-width: 920px; margin: 0; padding: 18px 0 24px; }
.rfx-ds .rfx-card { background: #fff; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); margin-bottom: 16px; }
.rfx-ds .rfx-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; min-height: 48px; box-sizing: border-box;
    border-bottom: 1px solid rgba(45,62,80,0.10);
}
.rfx-ds .rfx-card-icon { color: #0d9488; font-size: 1rem; }
.rfx-ds .rfx-card-title { font-size: 1rem; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-card-body { padding: 18px 20px 20px; }
.rfx-ds .rfx-card-intro { font-size: 0.85rem; color: #415873; margin: 0 0 16px; }
.rfx-ds .rfx-card-intro strong { color: #2D3E50; font-weight: 600; }
.rfx-ds .rfx-field-label { display: block; font-size: 0.85rem; color: #2D3E50; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
/* Sous-texte d'aide (codé `text-info` cyan dans les traductions) : muted DS, petit */
.rfx-ds .rfx-field-label .text-info { color: #8fa1b3 !important; font-size: 0.78rem; }
/* Champs : largeur maîtrisée, alignés à gauche, bordure + focus DS */
.rfx-ds .rfx-field .form-control,
.rfx-ds .rfx-field input[type="text"] { max-width: 520px; text-align: left !important; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); }
.rfx-ds .rfx-field select.form-control,
.rfx-ds .rfx-field-inline .bootstrap-select { max-width: 240px; }
.rfx-ds .rfx-field .form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); }
.rfx-ds .rfx-field-value { font-size: 0.9rem; color: #2D3E50; font-weight: 500; }
/* Callout d'aide DS (filet teal à gauche, icône teal) */
/* Aligne sur .rfx-doc-hint (hints des sous-onglets « Offres ») : meme fond teal clair, meme bordure,
   meme rayon. Les 4 pages du portail (Identite, Questionnaire, Onboarding, Documents partages)
   utilisent cette classe -> elles sont harmonisees d'un coup. */
/* Lien "Réduire tout" */
.rfx-ds .rfx-collapse-all { margin: 14px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; }
.rfx-ds .rfx-collapse-all a { color: #8fa1b3; font-size: 0.82rem; }
.rfx-ds .rfx-collapse-all a:hover { color: #0d9488; text-decoration: none; }

/* --- Header DS breadcrumb (dossier › AO), inspiré du header fiche Finance projet --- */
/* Collapse du rail gauche (col-md-2) sur les 2 lignes header → header pleine largeur.
   width:0 (pas display:none) pour ne pas casser les modales (position:fixed) de rfp_navbar. */
/* overflow:hidden => clippe tout contenu legacy du rail gauche (rail, titres décoratifs) sans devoir
   vider chaque page. Les modales (position:fixed) ne sont PAS clippées. NB : ne pas appliquer .rfx-ds
   aux pages dont la col gauche porte une vraie navigation (Résultats, Messages). */
/* position:absolute => la col gauche sort du flux : ne contribue NI en largeur NI en HAUTEUR
   (sinon un titre clippé étirait le bandeau gris en zone vide). Modales (position:fixed) non affectées. */
.rfx-ds > .row.no-gutters > .col-md-2 { position: absolute; width: 0; height: 0; max-width: 0; padding: 0; overflow: hidden; }
.rfx-ds > .row.no-gutters > .col-md-10 { flex: 0 0 100%; max-width: 100%; }

.rfx-ds .rfx-rfp-head { padding: 16px 40px 6px; }
.rfx-ds .rfx-rfp-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rfx-ds .rfx-breadcrumb { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
/* Breadcrumb dossier › AO : calé EXACTEMENT sur le header Finance (.fin-module-project-name / .fin-module-section).
   Parent Anton 1.05rem/300 muted ; courant Anton 1.3rem/400 navy. */
.rfx-ds .rfx-bc-parent { color: #8fa1b3; font-size: 1.05rem; font-weight: 300; letter-spacing: 0.3px; line-height: 1.2; white-space: nowrap; text-decoration: none; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.rfx-ds .rfx-bc-parent:hover { color: #0d9488; text-decoration: none; }
.rfx-ds .rfx-bc-sep { color: #8fa1b3; font-size: 1.1rem; align-self: center; }
.rfx-ds .rfx-bc-current { color: #2D3E50; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.5px; line-height: 1.2; white-space: nowrap; }
.rfx-ds .rfx-rfp-head .rfp-favorite-toggle { margin-left: 6px; align-self: center; }
.rfx-ds .rfx-rfp-head .rfp-favorite-toggle .fa-star { color: #0d9488; font-size: 1.05rem; }
.rfx-ds .rfx-round { color: #2D3E50; font-size: 1.25rem; white-space: nowrap; }
/* Cluster droit du header : pills de statut (remontées de la barre d'onglets) + Round. */
.rfx-ds .rfx-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.rfx-ds .rfx-head-right .auto-pilled { margin: 0; }
/* Pills calmées : Ouvert / Offres reçues en gris-navy discret (l'échéance pilled-danger reste saillante). */
.rfx-ds .rfx-head-right .auto-pilled:not(.pilled-danger) { border-color: #d3dae3 !important; color: #5b6b7d !important; }

/* Stepper config : discrétisé + ronds qui se colorent quand l'étape est validée (coches retirées). */
.rfx-ds .step-circle { width: 2rem !important; height: 2rem !important; font-size: 0.82rem; color: #b0bcc8; border-width: 2px !important; border-color: #e2e8f0; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
/* Connecteur ajusté aux ronds 2rem (sinon il mord les cercles). Géométrie d'étape d'origine conservée. */
.rfx-ds .step-content-iteration .step-circle::before { width: calc(11rem + 1rem - 2rem) !important; }
/* Libellés : coupure aux espaces (pas en plein mot), centrés. */
.rfx-ds .step-text { font-size: 0.7rem !important; color: #94a3b8; word-break: normal !important; overflow-wrap: anywhere; text-align: center; line-height: 1.25; }
/* Étape validée (contient une coche) : contour teal épais, fond blanc, numéro teal — coche masquée. */
.rfx-ds .step .check-success { display: none !important; }
.rfx-ds .step:has(.check-success):not(.step-active) .step-circle { background-color: #fff !important; border-color: #0d9488 !important; color: #0d9488 !important; }
/* Étape active : rond PLEIN teal + numéro blanc + halo → ressort nettement des étapes validées (contour teal). */
.rfx-ds .step-active .step-circle { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(13,148,136,0.20); }
.rfx-ds .step-active .step-text { color: #0d9488 !important; font-weight: 500; }

/* Bande navbar droite (stepper Consultation OU dropdown+sections Offres) alignée à 40px.
   On pad le col-md-10 direct, on zéro les paddings/marges internes, on left-aligne les rows centrées. */
.rfx-ds > .row.no-gutters.bg-light > .col-md-10 { padding-left: 40px !important; padding-right: 40px !important; }
.rfx-ds > .row.no-gutters.bg-light > .col-md-10 .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
.rfx-ds > .row.no-gutters.bg-light > .col-md-10 .row { margin-left: 0 !important; margin-right: 0 !important; }
.rfx-ds > .row.no-gutters.bg-light > .col-md-10 [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.rfx-ds > .row.no-gutters.bg-light > .col-md-10 .justify-content-center { justify-content: flex-start !important; }
.rfx-ds .iteration-navbar.steps .step:first-child { margin-left: 0 !important; }
/* Sélecteur de round enrichi (vue Diffusion) : select DS, à gauche de la timeline du round. */
/* Sélecteur de round = dropdown stylé (séparateurs • en teal, possible car HTML et non <select> natif). */
.rfx-ds .rfx-round-dd-btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 38px; min-width: 240px;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff;
    color: #2D3E50; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
    padding: 4px 12px 4px 14px; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rfx-ds .rfx-round-dd-btn:hover, .rfx-ds .rfx-round-selector.show .rfx-round-dd-btn { border-color: #0d9488; }
.rfx-ds .rfx-round-dd-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); }
.rfx-ds .rfx-round-dd-caret { color: #0d9488; font-size: 0.7rem; margin-left: auto; }
.rfx-ds .rfx-dot { color: #0d9488; font-weight: 700; }
.rfx-ds .rfx-round-selector .dropdown-menu { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 6px 0; min-width: 260px; }
.rfx-ds .rfx-round-selector .dropdown-item { font-size: 0.82rem; color: #2D3E50; padding: 8px 16px; }
.rfx-ds .rfx-round-selector .dropdown-item:hover { background: #f1f5f9; }
.rfx-ds .rfx-round-selector .dropdown-item.active { background: #e6f7f5; color: #2D3E50; }
/* Bande (Paramétrage + Diffusion) en blanc au lieu du gris — look DS minimal, juste un filet bas de séparation. */
.rfx-ds > .row.no-gutters.bg-light { background: #fff !important; }
/* Bande Diffusion (1 ligne) : dropdown + timeline + kebab actions à droite. */
.rfx-ds .rfx-diffusion-row { gap: 8px; }
.rfx-ds .rfx-round-timeline { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.rfx-ds .rfx-round-actions { flex-shrink: 0; }
.rfx-ds .rfx-kebab-btn {
    height: 38px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff; color: #475569;
    font-size: 0.82rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap;
}
.rfx-ds .rfx-kebab-caret { font-size: 0.7rem; color: #0d9488; }
/* Variante kebab icône (⋮) compacte — libère la largeur de la timeline Diffusion. */
.rfx-ds .rfx-kebab-btn.rfx-kebab-icon { width: 38px; padding: 0; justify-content: center; gap: 0; font-size: 0.95rem; }
.rfx-ds .rfx-kebab-btn:hover, .rfx-ds .rfx-round-actions.show .rfx-kebab-btn { background: #e6f7f5; border-color: #0d9488; color: #0d9488; }
.rfx-ds .rfx-kebab-btn:focus { outline: none; }
.rfx-ds .rfx-round-actions .dropdown-menu { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 6px 0; }
.rfx-ds .rfx-round-actions .dropdown-item { font-size: 0.82rem; color: #2D3E50; padding: 8px 16px; }
.rfx-ds .rfx-round-actions .dropdown-item:hover { background: #f1f5f9; color: #0d9488; }
.rfx-ds .rfx-round-actions .dropdown-item.text-danger { color: #dc3545; }
.rfx-ds .rfx-round-actions .dropdown-item.text-danger:hover { color: #dc3545; background: #fdf2f2; }
/* === ÉTAPE 2 — Harmonisation systématique du contenu RFx (CSS-only, tous onglets) === */
/* Rythme vertical : resserrer les gros espacements legacy hérités. */
.rfx-ds .container-scrollable .pt-5 { padding-top: 1.4rem !important; }
.rfx-ds .container-scrollable .pb-5 { padding-bottom: 1.4rem !important; }
.rfx-ds .container-scrollable .mt-5 { margin-top: 1.4rem !important; }
.rfx-ds .container-scrollable .mb-5 { margin-bottom: 1.4rem !important; }
/* Liens texte (hors boutons/onglets) : accent teal. */
.rfx-ds .container-scrollable a:not(.btn):not(.nav-link) { color: #0d9488; }
.rfx-ds .container-scrollable a:not(.btn):not(.nav-link):hover { color: #0b7d72; }
/* ⚠️ 4e occurrence du meme piege (2026-08-28, retour Olivier sur la modale « Fermer le round ») :
   la regle generique ci-dessus teinte en teal TOUT lien du conteneur scrollable qui n est ni `.btn`
   ni `.nav-link`. Les BOUTONS DU DS n en font pas partie : un `<a class="ds-btn-danger">` place dans
   une modale imbriquee dans le conteneur se retrouvait en texte teal sur fond rouge.
   Specificite : la regle generique vaut (0,4,1) - les arguments de `:not()` comptent. On reprend donc
   sa forme en y ajoutant la classe du bouton, ce qui donne (0,5,1) : elle l emporte SANS `!important`,
   et sans toucher a la regle generique - dont on ne veut PAS changer la specificite, trois correctifs
   anterieurs ayant ete calibres contre sa valeur actuelle. */
.rfx-ds .container-scrollable a.ds-btn-danger:not(.btn):not(.nav-link) { color: #fff; }
.rfx-ds .container-scrollable a.ds-btn-primary:not(.btn):not(.nav-link) { color: #fff; }
/* Meme cas : le bouton du pont vers Lauréats est un LIEN. Sans cette ligne, la regle ci-dessus
   (0,4,1) bat `.rfx-ds .scn-push-btn` (0,2,0) et peint le texte en teal SUR un fond teal : le
   bouton apparait vide. Defaut constate par Olivier le 2026-09-06. */
.rfx-ds .container-scrollable a.scn-push-btn:not(.btn):not(.nav-link) { color: #fff; }
/* Bouton « Annuler » des modales de confirmation : gris-bleu, pas teal (retour Olivier 2026-08-28).
   ⚠️ Scope `.ds-confirm-footer` OBLIGATOIRE : `.ds-btn-ghost` est AUSSI utilise dans le conteneur
   scrollable pour les exports du comparateur, ou le teal herite de la regle generique est le rendu
   ACTUEL, deja valide. Corriger globalement repeindrait ces ecrans-la.
   (0,6,1) contre (0,4,1) pour la regle generique : victoire nette, sans `!important`. */
.rfx-ds .container-scrollable .ds-confirm-footer a.ds-btn-ghost:not(.btn):not(.nav-link) { color: #415873; }
/* Séparateurs <hr> : filet fin DS. */
.rfx-ds .container-scrollable hr { border-top: 1px solid #e2e8f0; }
/* Inputs / selects / textarea : bordure DS + halo focus teal (uniforme). */
.rfx-ds .container-scrollable input.form-control,
.rfx-ds .container-scrollable select.form-control,
.rfx-ds .container-scrollable textarea.form-control { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); color: #2D3E50; }
.rfx-ds .container-scrollable .form-control:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); }
/* Champs sur une ligne (texte / nombre / select) : largeur maîtrisée (pas pleine largeur).
   Textareas + CKEditor laissés pleine largeur (non ciblés). */
.rfx-ds .container-scrollable input[type="text"].form-control,
.rfx-ds .container-scrollable input[type="number"].form-control,
.rfx-ds .container-scrollable input[type="email"].form-control,
.rfx-ds .container-scrollable select.form-control,
.rfx-ds .container-scrollable select.custom-select,
.rfx-ds .container-scrollable .bootstrap-select { max-width: 520px; }
/* Radios / cases à cocher -> teal. Couvre les 2 systèmes maison + natif + Bootstrap :
   - custom-checkbox (input masqué + span, bordure/check bleu #007bff)
   - radios stylés (input[type=radio] + .radio-label:before, bleu #3197EE)
   - natif (accent-color) + Bootstrap custom-control / form-check-input. */
.rfx-ds input[type="checkbox"], .rfx-ds input[type="radio"], .rfx-ds .form-check-input { accent-color: #0d9488; }
.rfx-ds .custom-control-input:checked ~ .custom-control-label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.rfx-ds .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(13,148,136,0.15) !important; }
.rfx-ds .custom-checkbox span { border-color: #0d9488 !important; }
.rfx-ds .custom-checkbox input:checked + span:before { border-color: #0d9488 !important; }
.rfx-ds input[type="radio"]:checked + .radio-label:before { background-color: #0d9488 !important; }
.rfx-ds input[type="radio"]:focus + .radio-label:before { border-color: #0d9488 !important; }
/* Cases à cocher Bootstrap maison (label::before) : ORANGE #ff855e quand cochée -> teal. */
.rfx-ds .form-check input[type="checkbox"]:checked + label:not(.form-check-starred)::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }
/* Indentation hiérarchique : contenu décalé ~40px sous les titres (titre ramené en débord gauche).
   padding 48px sur le col direct + titre margin -40 => titre ~40px du bord, contenu ~40px à droite. */
.rfx-ds .container-scrollable.scrollbar-blue { justify-content: flex-start !important; }
.rfx-ds .container-scrollable.scrollbar-blue > .col-md-12 { padding-left: 48px; }
.rfx-ds .container-scrollable.scrollbar-blue h1.text-rfp { margin-left: -40px !important; }
/* Tableaux : filets légers, en-têtes navy. */
.rfx-ds .container-scrollable table td { border-color: #f1f3f5; }
.rfx-ds .container-scrollable table th { color: #2D3E50; font-weight: 600; border-color: #e2e8f0; }
/* Tableaux prix/BOM (comparatif) : lignes de total `bg-grey`/`border-dark` hors charte → gris DS (fond + trait), emphase conservée. AUCUNE modif de largeur/colonne. */
.rfx-ds .container-scrollable table .bg-grey { background-color: #eef2f6 !important; }
.rfx-ds .container-scrollable table .border-dark { border-color: #94a3b8 !important; }
/* === Proposition financière / comparatifs : harmonisation des contrôles === */
/* Sous-onglets Financier / Comparaison prix / Comparaison alternatives : tabs DS underline teal. */
.rfx-ds .rfx-fin-subtabs.nav-tabs { border-bottom: 1px solid #e2e8f0; flex-wrap: nowrap; }
.rfx-ds .rfx-fin-subtabs .nav-link { position: relative; border: none; background: transparent; color: #8fa1b3; font-size: 0.85rem; font-weight: 500; padding: 8px 2px; margin-right: 28px; }
.rfx-ds .rfx-fin-subtabs .nav-link:hover { color: #0d9488; }
.rfx-ds .rfx-fin-subtabs .nav-link.active { color: #0d9488; font-weight: 600; }
.rfx-ds .rfx-fin-subtabs .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; }
/* Boutons d'export Excel (orange warning) -> teal outline + icône (couvre btn-export / compare-export). */
.rfx-ds .btn-outline-warning { color: #0d9488 !important; border: 1px solid #0d9488 !important; background: #fff !important; border-radius: var(--r-md, 6px); font-weight: 500; }
.rfx-ds .btn-outline-warning:hover { color: #fff !important; background: #0d9488 !important; border-color: #0d9488 !important; }
.rfx-ds .btn-export::before, .rfx-ds .compare-export::before, .rfx-ds .compare-export-allmode::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f56d"; margin-right: 6px; }
/* Lien « Plein écran » : petit lien teal au lieu d'un gros h2 flottant. */
.rfx-ds .compare-fullscreen { font-size: 0.82rem !important; font-weight: 500; color: #0d9488 !important; }
/* === Portail fournisseur : header (rfp_overview_header) aligné DS === */
.rfx-ds .rfx-portal-header { padding-left: 40px; }
.rfx-ds .rfx-portal-header #mainRfpTabs.nav-tabs { padding-left: 0 !important; }
/* Nom du fournisseur : aligné à droite, sous les pills de statut. */
.rfx-ds .rfx-portal-supplier { font-size: 1.1rem; color: #2D3E50; margin-top: 6px; line-height: 1.2; }

/* === Portail fournisseur : pages d'accueil (choix sociétés `index` + liste RFx `list`) — refonte DS épurée, pleine largeur === */
/* Colonne gauche du layout supprimée → contenu pleine largeur. */
.rfx-portal-home > .row.no-gutters > .col-md-3 { display: none; }
.rfx-portal-home > .row.no-gutters > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
.rfx-portal-home .rfx-home { max-width: 1080px; margin: 0 auto; padding: 34px 40px 28px; }

/* Header : identité fournisseur + logo acheteur */
.rfx-portal-home .rfx-home-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.rfx-portal-home .rfx-home-supplier { font-size: 1.6rem !important; color: #2D3E50; line-height: 1.1; }
.rfx-portal-home .rfx-home-welcome { font-size: 0.9rem; color: #64748b; margin-top: 6px; max-width: 660px; line-height: 1.5; }
.rfx-portal-home .rfx-home-buyer { flex-shrink: 0; }
.rfx-portal-home .rfx-home-buyer-logo { max-height: 60px; max-width: 200px; width: auto; }
.rfx-portal-home .rfx-home-buyer-name { font-size: 1.1rem !important; color: #2D3E50; }

/* KPIs (compteurs consultations) */
.rfx-portal-home .rfx-home-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; }
.rfx-portal-home .rfx-kpi { display: inline-flex; align-items: baseline; gap: 6px; background: #f8fafb; border: 1px solid #e7ecf1; border-radius: var(--r-lg, 10px); padding: 9px 15px; }
.rfx-portal-home .rfx-kpi[data-filter] { cursor: pointer; transition: border-color .15s, background .15s; }
.rfx-portal-home .rfx-kpi[data-filter]:hover { border-color: #0d9488; }
.rfx-portal-home .rfx-kpi.rfx-kpi-active { border-color: #0d9488 !important; background: rgba(13,148,136,0.08) !important; }
.rfx-portal-home .rfx-kpi.rfx-kpi-active .rfx-kpi-num { color: #0d9488; }
.rfx-portal-home .rfx-kpi-num { font-size: 1.2rem; font-weight: 700; color: #2D3E50; }
.rfx-portal-home .rfx-kpi-label { font-size: 0.8rem; color: #64748b; }
.rfx-portal-home .rfx-kpi-accent { background: rgba(13,148,136,0.07); border-color: rgba(13,148,136,0.28); }
.rfx-portal-home .rfx-kpi-accent .rfx-kpi-num { color: #0d9488; }
.rfx-portal-home .rfx-home-back { margin-left: auto; font-size: 0.82rem; font-weight: 500; color: #0d9488; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); padding: 7px 16px; text-decoration: none; transition: background .15s, color .15s; }
.rfx-portal-home .rfx-home-back:hover { background: #0d9488; color: #fff; text-decoration: none; }

/* Titre de section */
.rfx-portal-home .rfx-home-section { font-size: 1.05rem !important; font-weight: 600; color: #2D3E50; margin: 0 0 16px; }

/* Liste RFx — cartes uniformes */
.rfx-portal-home .rfx-home-list { display: flex; flex-direction: column; gap: 12px; padding: 2px 6px 8px 2px; }
.rfx-portal-home .rfx-rfp-card { display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid #e9edf2; border-radius: var(--r-lg, 10px); padding: 16px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rfx-portal-home .rfx-rfp-card:hover { border-color: #0d9488; box-shadow: 0 6px 20px rgba(13,148,136,0.08); text-decoration: none; }
.rfx-portal-home .rfx-rfp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.rfx-portal-home .rfx-rfp-card-title { font-size: 1.05rem; font-weight: 600; color: #2D3E50; line-height: 1.3; }
.rfx-portal-home .rfx-rfp-card-supplier { color: #8fa1b3; font-weight: 400; }
.rfx-portal-home .rfx-rfp-card-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rfx-portal-home .rfx-rfp-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Pastille statut */
.rfx-portal-home .rfx-rfp-status { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-sm, 3px); white-space: nowrap; }
.rfx-portal-home .rfx-st-open { background: rgba(13,148,136,0.10); color: #0d9488; }
.rfx-portal-home .rfx-st-closed { background: #eef2f6; color: #64748b; }

/* Chips de meta (échéance / envoyé / nouvelle offre) */
.rfx-portal-home .rfx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 500; padding: 4px 10px; border-radius: var(--r-sm, 3px); white-space: nowrap; }
.rfx-portal-home .rfx-chip i { font-size: 0.72rem; }
.rfx-portal-home .rfx-chip-deadline { background: rgba(224,89,46,0.10); color: #d6532a; }
.rfx-portal-home .rfx-chip-sent { background: rgba(15,157,88,0.10); color: #0f9d58; }
.rfx-portal-home .rfx-chip-req { background: rgba(13,148,136,0.10); color: #0d9488; }

/* Choix sociétés — cartes comptes */
.rfx-portal-home .rfx-home-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.rfx-portal-home .rfx-account-card { display: flex; align-items: center; justify-content: center; min-height: 130px; padding: 22px; background: #fff; border: 1px solid #e9edf2; border-radius: var(--r-sm, 3px); transition: border-color .15s, box-shadow .15s, transform .15s; }
.rfx-portal-home .rfx-account-card:hover { border-color: #0d9488; box-shadow: 0 6px 20px rgba(13,148,136,0.10); transform: translateY(-2px); text-decoration: none; }
.rfx-portal-home .rfx-account-card img { max-height: 80px; max-width: 100%; width: auto; }
.rfx-portal-home .rfx-account-name { font-size: 1.05rem !important; color: #2D3E50; text-align: center; }

/* Footer « alimenté par mybuyerwork » */
/* Marque « alimenté par mybuyerwork » : encadré FLOTTANT en bas à droite (2026-08-25). Remplace la barre
   pleine largeur collée en bas, qui immobilisait une bande de hauteur sur chaque page du portail.
   « alimenté par » est posé AU-DESSUS du logo (et non à sa gauche) : l'encadré est plus étroit, il masque
   donc moins de contenu. pointer-events:none → il n'intercepte jamais le clic d'une tuile en dessous.
   Les zones scrollables réservent une marge basse (.rfxp-scroll / .rfxl-list-wide) pour qu'aucun contenu
   ne reste caché dessous une fois le scroll arrivé tout en bas. */
.rfx-portal-home .rfx-home-footer { position: fixed; right: 20px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 15px 9px; background: rgba(255,255,255,0.94); border: 1px solid #e7ecf1; border-radius: var(--r-lg, 10px); box-shadow: 0 6px 18px rgba(16,24,40,.10); font-size: 0.9rem; pointer-events: none; }
.rfx-portal-home .rfx-home-footer-logo { display: flex; align-items: center; gap: 6px; }
.rfx-portal-home .rfx-home-footer-by { color: #9aa6b2; font-size: 0.8rem; line-height: 1.2; }
.rfx-portal-home .rfx-home-footer-brand { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .3px; }

/* === Drawers RFx (messages + Questions Pilotage) : en-tête navy DS (ex bg-info cyan). Largeur du drawer (drawer-600/800) inchangée. Non scopé .rfx-ds car les drawers vivent hors .main-content. === */
.rfx-drawer-header { background: #2D3E50 !important; padding: 13px 18px !important; border-bottom: none !important; }
.rfx-drawer-header h3 { font-size: 1.1rem; font-weight: 600; padding-left: 0 !important; }
.rfx-drawer-header .close-drawer { color: rgba(255,255,255,0.65); font-size: 22px; line-height: 1; transition: color .15s; }
.rfx-drawer-header .close-drawer:hover { color: #fff !important; }
/* RFX RESKIN — fin étape 0 */

/* === Qualification entreprises : ligne en attente de suppression (sqz) === */
.sqz-pending-delete { opacity: .5; }
.sqz-pending-delete .form-control,
.sqz-pending-delete label,
.sqz-pending-delete .small,
.sqz-pending-delete .text-muted { text-decoration: line-through; }
.sqz-pending-delete .sqz-pending-badge { text-decoration: none; }

/* === Qualification entreprise : carte Contexte + drawer (spl-qual) === */
.spl-qual-pill { display:inline-flex; padding:2px 9px; border-radius: var(--r-sm, 3px); font-size:0.7rem; font-weight:600; }
.spl-qual-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f1f3f5; }
.spl-qual-item-label { flex:1 1 auto; font-size:0.85rem; color:#2D3E50; }
.spl-qual-item-value { color:#475569; font-size:0.85rem; text-align:right; }
.spl-qual-req { color:#FF5722; }
.spl-qual-empty { color:#b8c2cc; }
.spl-qual-doc { display:inline-block; background:#f1f3f5; border-radius: var(--r-sm, 3px); padding:1px 6px; margin-left:4px; font-size:0.78rem; }
.spl-qual-comment { font-size:0.85rem; color:#475569; font-style:italic; }
.spl-qual-check-icon { width:18px; text-align:center; }

/* === Qualification entreprise : drawer édition (spl-qual edit) === */
.spl-qual-edit-item { padding:8px 0; border-bottom:1px solid #f1f3f5; }
.spl-qual-edit-label { font-size:0.85rem; color:#2D3E50; margin-bottom:4px; }
.spl-qual-check-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f1f3f5; }
.spl-qual-decision .form-check, .spl-qual-decision label { margin-right:14px; }
.spl-qual-edit-field .form-check-inline { margin-right:14px; }
/* Coches du drawer Qualification en teal (override de l'orange global, calque #taskDrawer) */
#spl-qual-drawer .form-check input[type="checkbox"]:checked + label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }
#spl-qual-drawer input[type="checkbox"] { accent-color: #0d9488; }

/* === Sous-onglets liste Entreprises (Brouillons/En validation/À valider) — calque ctr-list-subtab === */
.spl-list-subtabs.nav-tabs { border-bottom: 1px solid #eef2f6; background: #fff; flex-wrap: nowrap; padding: 0; margin: 0; gap: 14px; }
.spl-list-subtabs.nav-tabs .nav-item { flex: 0 0 auto; }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab { position: relative; display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: #6b7a8d; font-size: 0.78rem !important; font-weight: 400 !important; font-family: inherit !important; padding: 6px 2px; margin: 0; transition: color 0.12s; }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab:hover { color: #0d9488; }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab.active, .spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab.active:hover { color: #0d9488 !important; font-weight: 600 !important; background: transparent; }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0d9488; transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease; }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab:hover::after, .spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab.active::after { transform: scaleX(1); }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab:focus { outline: none; box-shadow: none; }
.spl-list-subtab-count { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: var(--r-sm, 3px); background: #e2efed; color: #0d9488; font-size: 0.66rem; font-weight: 600; line-height: 1.4; text-align: center; }
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab.active .spl-list-subtab-count { background: #0d9488; color: #fff; }

/* R2a — footer drawer création : brouillon + Créer alignés sur une ligne + style/hover brouillon */
.drawer-supplier .drawer-footer .drw-spl-submit-btns { display: flex; align-items: center; gap: 8px; }
.drawer-supplier .drawer-footer .drw-spl-draft-btn { background: #fff; border: 1px solid #cbd5e1; color: #2D3E50; transition: background .12s, border-color .12s, color .12s; }
.drawer-supplier .drawer-footer .drw-spl-draft-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; }

/* Bandeau d'aiguillage 'Validation obligatoire' — transverse drawers Creation contrat + entreprise (R2 2026-06-28). */
.drw-valreq-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-lg, 10px); background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: .82rem; line-height: 1.35; }
.drw-valreq-banner i { font-size: .95rem; flex: 0 0 auto; }
.drw-valreq-banner strong { font-weight: 600; }

/* Bandeau « Tout appliquer » des suggestions de la societe consultee (drawer entreprise, 2026-08-25).
   Meme gabarit que .drw-valreq-banner, en teal (couleur des fleches .setsuggestedvalue) ; passe au vert
   une fois les suggestions appliquees (le bouton est alors retire par le JS). */
.drw-spl-suggest-bar { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-lg, 10px); background: #f0fdfa; border: 1px solid #99f6e4; color: #0f766e; font-size: .82rem; line-height: 1.35; }
.drw-spl-suggest-head { display: flex; align-items: center; gap: 8px; }
.drw-spl-suggest-bar .drw-spl-suggest-ic { font-size: .95rem; flex: 0 0 auto; }
.drw-spl-suggest-bar .drw-spl-suggest-text { flex: 1 1 auto; min-width: 0; }
.drw-spl-suggest-help { flex: 0 0 auto; color: #0d9488; cursor: help; font-size: .9rem; }
.drw-spl-suggest-help:hover { color: #0f766e; }
.drw-spl-suggest-actions { display: flex; align-items: center; gap: 8px; }
.drw-spl-suggest-reject { flex: 0 0 auto; background: #fff; border: 1px solid #cbd5e1; color: #475569; font-size: .76rem; font-weight: 600; line-height: 1.2; padding: 5px 10px; border-radius: var(--r-md, 6px); white-space: nowrap; cursor: pointer; }
.drw-spl-suggest-reject:hover { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; }
.drw-spl-suggest-reject:focus { outline: none; }
.drw-spl-suggest-reject:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; }
/* Fleche dont la valeur proposee a ete reprise : coche verte, plus une action a faire. */
.setsuggestedvalue.is-taken { color: #16a34a; }
/* Popovers du drawer entreprise (fleches de suggestion, icones d'aide) : jamais interactifs, donc
   transparents a la souris — sinon un popover affiche sous le curseur fait clignoter le declencheur
   (mouseleave -> hide -> mouseenter -> show). Largeur bornee pour rester lisible. */
.drw-spl-popover { pointer-events: none; max-width: 320px; }
.drw-spl-popover .popover-body { font-size: .78rem; line-height: 1.45; }
.setsuggestedvalue.is-taken:hover { color: #15803d; }
.drw-spl-suggest-apply { flex: 0 0 auto; background: #0d9488; border: 1px solid #0d9488; color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.2; padding: 5px 10px; border-radius: var(--r-md, 6px); white-space: nowrap; cursor: pointer; }
.drw-spl-suggest-apply:hover { background: #0f766e; border-color: #0f766e; color: #fff; }
.drw-spl-suggest-apply:focus { outline: none; }
.drw-spl-suggest-apply:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.drw-spl-suggest-count { font-weight: 600; opacity: .9; }
.drw-spl-suggest-bar.is-applied { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
/* Confirmation « tout appliquer » : le drawer entreprise est a z-index 1060 → la modale (1050 par
   defaut) et son voile passeraient DERRIERE. Classe posee sur <body> par le JS a l'ouverture. */
/* Confirmation des suggestions : elle doit passer AU-DESSUS du drawer entreprise (z-index 1060)
   comme d'une modale Bootstrap deja ouverte (cas du bilan financier : deux modales empilees).
   Le backdrop est remonte a 1070 pendant l'operation, la confirmation a 1075. */
.modal.spl-suggest-confirm { z-index: 1075; }
body.spl-suggest-confirm-open .modal-backdrop { z-index: 1070; }
/* Corps de la confirmation : ligne d'avertissement (valeurs ecrasees) et rappel d'enregistrement. */
.drw-spl-suggest-warn { color: #92400e; }
.drw-spl-suggest-hint { color: #64748b; font-size: .82rem; }
/* Fleche de suggestion sur les champs a markup dedie du drawer (Raison sociale, bande SIREN). */
.drawer-supplier .drw-spl-suggest-inline { display: flex; align-items: center; gap: 6px; }
.drawer-supplier .drw-spl-suggest-inline > .drw-spl-name-input { flex: 1 1 auto; min-width: 0; }
.drawer-supplier .drw-spl-suggest-inline > .setsuggestedvalue,
.drawer-supplier .drw-spl-siren-band-field > .setsuggestedvalue { flex: 0 0 auto; color: #0d9488; cursor: pointer; }
.drawer-supplier .drw-spl-suggest-inline > .setsuggestedvalue:hover,
.drawer-supplier .drw-spl-siren-band-field > .setsuggestedvalue:hover { color: #0f766e; }

/* R3 Qualification amont — mini-stepper + sheet Qualification du drawer creation/edition + gate. */
.drw-spl-stepper { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.drw-spl-step { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #64748b; }
.drw-spl-step[data-step-target] { cursor: pointer; }
.drw-spl-step[data-step-target]:hover { color: #0d9488; }
.drw-spl-step.is-active { color: #2D3E50; font-weight: 600; }
.drw-spl-step-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: .7rem; font-weight: 600; }
.drw-spl-step.is-active .drw-spl-step-num { background: #0d9488; color: #fff; }
.drw-spl-step-sep { flex: 0 0 18px; height: 1px; background: #cbd5e1; }
.drw-spl-qual-group { margin-bottom: 14px; }
.drw-spl-qual-item { margin-bottom: 10px; }
.drw-spl-qual-label { font-size: .82rem; color: #334155; margin-bottom: 3px; }
.drw-spl-qual-check { margin-bottom: 8px; }
.drw-spl-qual-preco .form-control { max-width: 320px; }
.drw-spl-gate-disabled { opacity: .55; cursor: not-allowed; }

/* R3 retours UI : banner compact, erreur champ, steps complétés, encadré préconisation, checkboxes teal. */
.drw-valreq-banner-compact { padding: 6px 12px; }
.drw-spl-field-error { color: #dc3545; font-style: italic; font-size: .8rem; margin-top: 4px; }
.drw-spl-step.is-complete { color: #15803d; font-weight: 600; }
.drw-spl-step.is-complete .drw-spl-step-num { background: #16a34a; color: #fff; }
.drw-spl-qual-preco-box { margin-top: 6px; padding: 12px; border-radius: var(--r-lg, 10px); background: #f0fdfa; border: 1px solid #99f6e4; }
.drw-spl-qual-preco-head { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: #0f766e; margin-bottom: 8px; }
.drw-spl-qual-preco-head i { font-size: .9rem; }
#drwSplQualBody .form-check input[type="checkbox"]:checked + label::before { background-color: #0d9488 !important; border-color: #0d9488 !important; }

/* R3 fix #4 : centrage vertical des cases a cocher de la sheet Qualification (box ::before centree sur le texte). */
#drwSplQualBody .drw-spl-qual-check .form-check { margin: 0; min-height: 0; }

/* R4 display : multi-choix qualification empile sous le titre (sans cases). */
.spl-qual-item.spl-qual-item-block { display: block; }
.spl-qual-multi-list { list-style: none; margin: 4px 0 0; padding: 0; }
.spl-qual-multi-list li { font-size: 0.85rem; color: #475569; padding: 2px 0 2px 2px; }

/* R5 : footer du drawer Qualification/Onboarding sticky en bas du scroll (#spl-qual-drawer). */
#spl-qual-drawer .ds-drawer-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#spl-qual-drawer .spl-qual-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 20px 24px; }
#spl-qual-drawer #spl-qual-form { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#spl-qual-drawer .ds-drawer-footer { flex: 0 0 auto; padding: 10px 24px; background: #fff; border-top: 1px solid #f3f4f6; }
#spl-qual-drawer .btn-navy { background-color: #0d9488; border-color: #0d9488; color: #fff; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); font-weight: 500; }
#spl-qual-drawer .btn-navy:hover, #spl-qual-drawer .btn-navy:focus { background-color: #0f766e; border-color: #0f766e; color: #fff; }
#spl-qual-drawer .btn-cancel { border: 1px solid rgba(45,62,80,0.28); color: #415873; padding: 0.42rem 1.2rem; font-size: 0.84rem; border-radius: var(--r-md, 6px); background: #fff; }
#spl-qual-drawer .btn-cancel:hover { background-color: #f8fafb; border-color: rgba(45,62,80,0.5); color: #2D3E50; }

/* R5 : scrollbar fine pour la zone scrollable du drawer Qualification/Onboarding (calque drawer fiche). */
#spl-qual-drawer .spl-qual-scroll { scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
#spl-qual-drawer .spl-qual-scroll::-webkit-scrollbar { width: 4px; background: transparent; }
#spl-qual-drawer .spl-qual-scroll::-webkit-scrollbar-track { background: transparent; border: none; }
#spl-qual-drawer .spl-qual-scroll::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; transition: background 0.25s; }
#spl-qual-drawer .spl-qual-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* R5 : petit bouton discret d'action (Voir/Compléter) des cards Qualification/Onboarding (onglet Contexte). */
.spl-qual-card-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 0.76rem; color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.spl-qual-card-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; text-decoration: none; }
.spl-qual-card-btn i { font-size: 0.78rem; }

/* R5 : pills de statut plus compactes (moins hautes) dans les titres des cards Qualification/Validation/Onboarding. */
.spl-qual-pill, .spl-pilo-val-badge { padding: 0 8px; line-height: 1.55; font-size: 0.7rem; }

/* R2b-2 : pastille violette "a valider par moi" (valideur en attente) sur les lignes liste Entreprises. */
.spl-list-tovalidate-dot { width: 9px; height: 9px; border-radius: 50%; background: #7c3aed; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(124,58,237,0.20); cursor: help; position: relative; left: -5px; }

/* R5-bis : zone d'upload inline par item DOCUMENT dans le drawer onboarding. */
.spl-qual-doc-item { margin-bottom: 16px; }
.spl-qual-doc-item .spl-qual-doc-list { margin-bottom: 6px; }
.spl-qual-doc-item .spl-qual-doc-uploader .qq-uploader { min-height: 0; }

/* Drawers : FineUploader en mode BOUTON SEUL (pas de zone glisser-deposer, peu adaptee a l'enchainement #
   dans un drawer etroit). Scope : onboarding entreprise + drawers Projet + Contrat. Le template qq-template #
   reste partage (zone conservee dans les modales documents_add + Communaute). */
#spl-qual-drawer .qq-uploader, .drawer-project .qq-uploader, .drawer-contract .qq-uploader { min-height: 0; max-height: none; border: none; background: transparent; padding: 0; overflow: visible; }
#spl-qual-drawer .qq-uploader:before, .drawer-project .qq-uploader:before, .drawer-contract .qq-uploader:before { content: none; }
#spl-qual-drawer .qq-upload-drop-area, .drawer-project .qq-upload-drop-area, .drawer-contract .qq-upload-drop-area { display: none; }

/* Drawers : bouton FineUploader sur une seule ligne (texte non coupe). */
#spl-qual-drawer .qq-upload-button, .drawer-project .qq-upload-button, .drawer-contract .qq-upload-button { width: auto; white-space: nowrap; padding: 5px 14px !important; font-size: 0.82rem; font-weight: 500; border-radius: var(--r-md, 6px)!important; background: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; box-shadow: none !important; }
#spl-qual-drawer .qq-upload-button:hover, .drawer-project .qq-upload-button:hover, .drawer-contract .qq-upload-button:hover { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }

/* Pieces qualification/onboarding : chip cliquable (telechargement/visualisation du document). */
a.spl-qual-doc { color: #0f766e; text-decoration: none; cursor: pointer; }
a.spl-qual-doc:hover { background: #e2e8f0; color: #0d9488; text-decoration: none; }

/* 2026-06-29 — Drawer Entreprise : truncate ellipsis sur les options des selectpicker
   (familles / sous-familles / tags) pour eviter que les noms tres longs ne fassent
   deborder le menu hors du drawer. Meme pattern anti-debord que les dropdowns
   "A dupliquer" des drawers Contrat/Projet/Tache (le drawer Entreprise n'a pas de
   dropdown de duplication ; le risque de debord vient des familles/tags). */
.drawer-supplier .bootstrap-select .dropdown-menu { max-width: 100%; }
.drawer-supplier .bootstrap-select .dropdown-menu .dropdown-item,
.drawer-supplier .bootstrap-select .dropdown-menu li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.drawer-supplier .bootstrap-select .dropdown-menu li a .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: bottom; }
/* 2026-06-29 — Etat vide generique des onglets fiche Entreprise (remplace les anciennes
   hint boxes alert-info dismissibles). Calque .spl-notes-empty, prefixe neutre reutilisable. */
.spl-tab-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 16px; text-align: center; }
.spl-tab-empty-icon { font-size: 1.7rem; color: #d6dbe0; margin-bottom: 10px; }
.spl-tab-empty-text { font-size: .8rem; color: #94a3b8; margin: 0; font-weight: 300; }
/* 2026-06-29 — Bandeau valideur sur la card Validation (fiche Entreprise) : Valider / Refuser en direct
   (calque de la banniere valideur Contrat). */
.spl-pilo-val-banner { display: flex; flex-direction: column; gap: 8px; background: rgba(13,148,136,0.06); border: 1px solid rgba(13,148,136,0.22); border-radius: var(--r-lg, 10px); padding: 10px 12px; margin: 0 8px 12px; }
.spl-pilo-val-banner-text { font-size: 0.8rem; font-weight: 600; color: #0d9488; }
.spl-pilo-val-banner-text i { margin-right: 6px; }
.spl-pilo-val-banner-actions { display: flex; gap: 8px; }
.spl-pilo-val-btn-validate, .spl-pilo-val-btn-refuse { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: var(--r-md, 6px); cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s; }
.spl-pilo-val-btn-validate { background: #16a34a; color: #fff; }
.spl-pilo-val-btn-validate:hover, .spl-pilo-val-btn-validate:focus { background: #15803d; color: #fff; text-decoration: none; outline: none; }
.spl-pilo-val-btn-refuse { background: #fff; color: #dc2626; border: 1px solid #dc2626; }
.spl-pilo-val-btn-refuse:hover, .spl-pilo-val-btn-refuse:focus { background: #dc2626; color: #fff; text-decoration: none; outline: none; }
.spl-pilo-val-refuse-label { font-size: 0.82rem; font-weight: 600; color: #2D3E50; margin-bottom: 8px; }
.spl-pilo-val-refuse-popover .wp-500 { width: auto; min-width: 240px; }
/* ===========================================================================
   Module Evaluation (Assessment) - socle DS plein ecran, scope opt-in .asm-ds.
   Etape 0 chantier reskin Evaluation (2026-06-29). Calque .fin-module-* (Enjeux).
   Reutilisable Entreprises / Contrats / RFx : aucun couplage module hote.
   =========================================================================== */
.asm-ds { --asm-navy:#2D3E50; --asm-muted:#8fa1b3; --asm-teal:#0d9488; --asm-teal-light:#e6f7f5; --asm-border:#e2e8f0; }

/* En-tete */
.asm-ds .asm-head { display:flex; align-items:center; justify-content:space-between; padding:0 40px; min-height:60px; background:#fff; color:var(--asm-navy); gap:16px; flex-shrink:0; border-bottom:1px solid var(--asm-border); }
.asm-ds .asm-head-left { display:flex; align-items:center; gap:14px; min-width:0; overflow:hidden; }
.asm-ds .asm-back { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; border:1px solid var(--asm-border); border-radius: var(--r-md, 6px); background:#fff; color:var(--asm-muted); text-decoration:none; transition:all .15s; }
.asm-ds .asm-back:hover { border-color:var(--asm-teal); color:var(--asm-teal); background:var(--asm-teal-light); text-decoration:none; }
.asm-ds .asm-head-titles { display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
.asm-ds .asm-breadcrumb { display:flex; align-items:baseline; gap:7px; overflow:hidden; }
.asm-ds .asm-bc-parent { font-size:.74rem; font-weight:400; color:var(--asm-muted); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease; }
.asm-ds .asm-bc-parent:hover { color:var(--asm-teal); text-decoration:underline; }
.asm-ds .asm-bc-sep { color:#cbd5e1; font-size:.8rem; flex-shrink:0; line-height:1; }
.asm-ds .asm-bc-section { font-size:.74rem; font-weight:400; color:var(--asm-muted); white-space:nowrap; }
.asm-ds .asm-head-name { font-family:'Anton',sans-serif; font-weight:400; color:var(--asm-navy); font-size:1.2rem; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:560px; line-height:1.25; }
.asm-ds .asm-head-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.asm-ds .asm-status-pill { display:inline-flex; align-items:center; gap:5px; border:1px solid; border-radius: var(--r-sm, 3px); padding:4px 12px; font-size:.70rem; font-weight:600; white-space:nowrap; background:#fff; }

/* Stepper cliquable, statut-aware */
.asm-ds .asm-stepper { display:flex; align-items:center; gap:8px; padding:9px 40px; background:#f8fafc; border-bottom:1px solid var(--asm-border); flex-shrink:0; }
.asm-ds .asm-step { display:inline-flex; align-items:center; gap:8px; color:var(--asm-muted); font-size:.78rem; font-weight:500; text-decoration:none; cursor:pointer; padding:3px 4px; border-radius: var(--r-sm, 3px); transition:color .12s; }
.asm-ds .asm-step:hover { color:var(--asm-teal); text-decoration:none; }
.asm-ds .asm-step-num, .asm-ds .asm-step-ic { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--asm-border); background:#fff; font-size:.72rem; transition:all .12s; }
.asm-ds .asm-step:hover .asm-step-num, .asm-ds .asm-step:hover .asm-step-ic { border-color:var(--asm-teal); color:var(--asm-teal); }
.asm-ds .asm-step-label { white-space:nowrap; }
.asm-ds .asm-step.is-active { color:var(--asm-navy); font-weight:600; }
.asm-ds .asm-step.is-active .asm-step-num, .asm-ds .asm-step.is-active .asm-step-ic { background:var(--asm-teal); border-color:var(--asm-teal); color:#fff; }
.asm-ds .asm-step-sep { width:24px; height:1px; background:#d7dee6; }

/* Zone de contenu scrollable */
.asm-ds .asm-page { background:#fff; }
.asm-ds .asm-scroll { overflow-y:auto; overflow-x:hidden; }
.asm-ds .asm-inner { padding:24px 40px 16px 40px; }

/* Footer */
.asm-ds .asm-footer { display:flex; justify-content:center; padding:18px 40px 8px; }
.asm-ds .asm-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 18px; border-radius: var(--r-md, 6px); font-size:.80rem; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .15s,color .15s; }
.asm-ds .asm-btn-grey { background:#f1f5f9; color:var(--asm-navy); border-color:var(--asm-border); }
.asm-ds .asm-btn-grey:hover { background:#e2e8f0; color:var(--asm-navy); text-decoration:none; }
/* asm-ds : etape Resultats cliquable (stepper) + conteneur shell workspace */
.asm-ds .asm-step-link { text-decoration:none; cursor:pointer; }
.asm-ds .asm-step-link:hover { color:var(--asm-teal); text-decoration:none; }
.asm-ds .asm-step-link:hover .asm-step-num { border-color:var(--asm-teal); color:var(--asm-teal); }
.asm-ds #item-preview.asm-workspace { display:block; }
/* asm-ds : barre d'action (suppression) du shell workspace */
.asm-ds .asm-actionbar { display:flex; justify-content:flex-end; padding:8px 40px 0; }
.asm-ds .asm-actionbar-delete { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:#b91c1c; text-decoration:none; }
.asm-ds .asm-actionbar-delete:hover { color:#991b1b; text-decoration:underline; }
/* =====================================================================
   RESKIN VISUEL module Évaluation — scopé .asm-ds (page Résultats + shell
   workspace + fragments new/edit/contacts chargés dedans). Reskin PUREMENT
   visuel : aucun markup mécanique ni JS fonctionnel touché. Réf : design-system-
   reference (navy #2D3E50, teal #0d9488, teal-light #e6f7f5, border #e2e8f0,
   radius 2px, pas d'ombres, 40px latéral). Calque du bloc .rfx-ds.
   ===================================================================== */

/* --- Marges latérales : tout ramener à 40px (suppression des insets legacy >40px) --- */
.asm-ds .mr-5 { margin-right: 0 !important; }
.asm-ds .pl-sm-5 { padding-left: 40px !important; }
.asm-ds .pr-sm-3 { padding-right: 40px !important; }
.asm-ds .px-sm-5 { padding-left: 40px !important; padding-right: 40px !important; }
.asm-ds .px-sm-3 { padding-left: 40px !important; padding-right: 40px !important; }

/* --- Couleur d'accent legacy "supplier" -> navy DS --- */
.asm-ds .text-supplier { color: #2D3E50 !important; }
.asm-ds .text-red-light { color: #0d9488 !important; }
.asm-ds .text-primary { color: #0d9488 !important; }
.asm-ds .text-success { color: #4f9d69 !important; }

/* --- Titres de section (h3 .text-supplier .border-bottom) : navy DS + filet fin --- */
.asm-ds .h3.text-supplier, .asm-ds .h3.border-bottom { color: #2D3E50 !important; }
.asm-ds .border-bottom { border-bottom-color: rgba(45,62,80,0.12) !important; }
.asm-ds .collapser .collapseTitle { color: #2D3E50 !important; }

/* --- Boutons : CTA primaires teal plein, retours en ghost, états outline DS --- */
.asm-ds .btn-primary, .asm-ds .btn-success {
    background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; border-radius: var(--r-md, 6px);
}
.asm-ds .btn-primary:hover, .asm-ds .btn-success:hover {
    background-color: #0b7d72 !important; border-color: #0b7d72 !important; color: #fff !important;
}
.asm-ds .btn-red-light { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; border-radius: var(--r-md, 6px); }
.asm-ds .btn-red-light:hover { background-color: #0b7d72 !important; border-color: #0b7d72 !important; color: #fff !important; }
/* Retours : ghost gris (semantiquement secondaires) */
.asm-ds #open-list-tab-button, .asm-ds #open-edit-tab-button, .asm-ds #open-new-tab-button {
    background-color: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #2D3E50 !important; border-radius: var(--r-md, 6px);
}
.asm-ds #open-list-tab-button:hover, .asm-ds #open-edit-tab-button:hover, .asm-ds #open-new-tab-button:hover {
    background-color: #e2e8f0 !important; color: #2D3E50 !important;
}
/* "Voir les notations / résultats" : secondaire teal-outline */
.asm-ds .btn-warning {
    background-color: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; border-radius: var(--r-md, 6px);
}
.asm-ds .btn-warning:hover { background-color: #e6f7f5 !important; color: #0b7d72 !important; }
/* Envoyer indisponible : gris muet */
.asm-ds .btn-secondary { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #94a3b8 !important; border-radius: var(--r-md, 6px); }
/* Etat "fait" (contacts/contributeurs sélectionnés) : teal-light */
.asm-ds .btn-outline-success {
    background-color: #e6f7f5 !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; border-radius: var(--r-md, 6px);
}
.asm-ds .btn-outline-success:hover { background-color: #d4efec !important; color: #0b7d72 !important; }
/* Etat "à faire" (sélection requise) : amber muet, outline */
.asm-ds .btn-outline-warning {
    background-color: #fff !important; border: 1px solid #e6c79c !important; color: #b45309 !important; border-radius: var(--r-md, 6px);
}
.asm-ds .btn-outline-warning:hover { background-color: #fdf6ec !important; color: #92400e !important; }

/* --- Encarts d'aide (ampoule) : callout DS (accent teal à gauche) --- */
.asm-ds .media.bg-light.border, .asm-ds .media.bg-light {
    background: #f8fafb !important; border: 1px solid #e2e8f0 !important; border-left: 3px solid #0d9488 !important; border-radius: 2px;
}
.asm-ds .media.bg-light .fa-lightbulb, .asm-ds .media.bg-light .fa-bell { color: #0d9488 !important; }
.asm-ds .media.bg-light .media-body { color: #415873 !important; font-weight: 400; }

/* --- Tableaux : épuré DS (en-têtes muets, filets fins, valeurs navy) --- */
.asm-ds .table-wp th { color: #8fa1b3 !important; font-weight: 500 !important; border-color: #e2e8f0 !important; }
.asm-ds .table-wp td { color: #2D3E50 !important; border-color: #f3f4f6 !important; }
.asm-ds .table-border-spacer { border-bottom: 1px solid #f3f4f6 !important; }
.asm-ds .table-border-spacer-2x { border-top: 1px solid #e2e8f0 !important; }
.asm-ds .asm-rd-table thead th, .asm-ds .asm-rd-table .border-bottom { border-color: #e2e8f0 !important; }

/* --- Champs de saisie : bordure DS, radius 2px, focus teal --- */
.asm-ds .form-control, .asm-ds input[type="text"], .asm-ds select, .asm-ds textarea {
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); color: #2D3E50; box-shadow: none;
}
.asm-ds .form-control:focus, .asm-ds input[type="text"]:focus, .asm-ds select:focus, .asm-ds textarea:focus {
    border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); outline: none;
}

/* --- Étoiles de notation (base) : gris DS ; les étoiles notées gardent leur teinte (atténuée, via JS) --- */
.asm-ds .starrating span:not(.starred):before { color: #cfd8dc; }

/* --- Footer d'actions : fond blanc, filet haut fin (neutralise le bandeau coloré legacy) --- */
.asm-ds .item-actions-footer-supplier { background: #fff !important; border-top: 1px solid #e2e8f0 !important; }

/* --- Focus : pas de cadre noir au clic souris (DS focus-visible) --- */
.asm-ds a:focus, .asm-ds button:focus { outline: none; }
.asm-ds a:focus-visible, .asm-ds button:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }
/* asm-ds : contenu redesign (descriptif, titres de section, callout, strip d'etat, radar) */
.asm-ds .asm-desc { color:#415873; font-size:.9rem; line-height:1.55; margin:2px 0 18px; max-width:980px; }

/* Titres de section : navy + icone teal + filet fin (remplace .h3 text-supplier border-bottom) */
.asm-ds .asm-section-title { display:flex; align-items:center; gap:8px; padding:0 0 9px; margin:8px 0 16px; border-bottom:1px solid rgba(45,62,80,0.10); }
.asm-ds .asm-section-title-mt { margin-top:34px; }
.asm-ds .asm-section-title-label { display:inline-flex; align-items:center; font-size:.95rem; font-weight:600; color:#2D3E50; letter-spacing:0; }
.asm-ds .asm-section-ic { color:#0d9488; font-size:.85rem; margin-right:9px; }
.asm-ds .asm-section-help { color:#0d9488 !important; font-size:.8rem; margin-left:8px; cursor:help; text-decoration:none; }

/* Callout d'aide (brouillon / consigne) */
.asm-ds .asm-callout { display:flex; gap:12px; align-items:flex-start; background:#f8fafb; border:1px solid #e2e8f0; border-left:3px solid #0d9488; border-radius: var(--r-lg, 10px); padding:12px 16px; margin:4px 0 20px; }
.asm-ds .asm-callout-ic { color:#0d9488; font-size:1rem; margin-top:2px; flex-shrink:0; }
.asm-ds .asm-callout-body { color:#415873; font-size:.85rem; line-height:1.5; }
.asm-ds .asm-callout-title { display:block; color:#2D3E50; font-weight:600; margin-bottom:2px; }

/* Strip d'etat (evaluation envoyee) : meta-row epuree */
.asm-ds .asm-state { display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; padding:11px 16px; margin:4px 0 20px; background:#f8fafb; border:1px solid #e2e8f0; border-radius: var(--r-sm, 3px); font-size:.8rem; }
.asm-ds .asm-state-sent { color:#415873; }
.asm-ds .asm-state-kv { color:#2D3E50; font-weight:500; }
.asm-ds .asm-state-label { color:#8fa1b3; font-weight:400; margin-right:4px; }
.asm-ds .asm-state-grace { color:#8fa1b3; font-weight:400; margin-left:4px; }
.asm-ds .asm-state-rate { font-weight:700; }
.asm-ds .asm-state-action { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#0d9488; font-weight:600; text-decoration:none; white-space:nowrap; }
.asm-ds .asm-state-action:hover { color:#0b7d72; text-decoration:underline; }

/* Radar : taille reduite + centre */
.asm-ds .asm-radar { max-width:520px; }
.asm-ds .asm-radar canvas { max-height:340px; }
/* =====================================================================
   asm-ds — iteration 3 (retours captures) : padding, champs, typo, tableaux, radar.
   Les regles ci-dessous surchargent volontairement des reglages anterieurs du meme bloc.
   ===================================================================== */

/* #1 Padding droit reduit dans les ecrans du workspace (aere les tableaux larges) */
.asm-ds .pr-sm-3 { padding-right: 16px !important; }

/* #3 Champs au DS — neutralise le souligne/bordure violet legacy (repos + hover + focus) */
.asm-ds .form-control,
.asm-ds input[type="text"],
.asm-ds input[type="number"],
.asm-ds input[type="email"],
.asm-ds textarea,
.asm-ds select,
.asm-ds .cke_textarea_inline {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--r-md, 6px)!important;
    box-shadow: none !important;
    color: #2D3E50;
}
.asm-ds .form-control:hover,
.asm-ds textarea:hover,
.asm-ds select:hover,
.asm-ds .cke_textarea_inline:hover { border-color: #cbd5e1 !important; }
.asm-ds .form-control:focus,
.asm-ds input:focus,
.asm-ds textarea:focus,
.asm-ds select:focus,
.asm-ds .cke_textarea_inline:focus,
.asm-ds .cke_textarea_inline.cke_focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
    outline: none !important;
}

/* #6 Typographie harmonisee : 3 tailles utiles (gros / corps-fort / corps) */
.asm-ds .h2, .asm-ds h2 { font-size: 1.05rem !important; }
.asm-ds .h3, .asm-ds h3 { font-size: 0.95rem !important; }
.asm-ds .h4, .asm-ds h4, .asm-ds .h5, .asm-ds h5 { font-size: 0.85rem !important; }
/* Valeurs de display (echeance, rappels) : navy lisible */
.asm-ds .asm-display-value { color: #2D3E50; font-size: 0.85rem; }
.asm-ds .asm-display-label { color: #8fa1b3; font-size: 0.8rem; }

/* #4 / #8 Descriptif (objectif) : pleine largeur */
.asm-ds .asm-desc { max-width: none; }

/* #9 / #10 Tableaux Resultats : on laisse les colonnes s'elargir (le tableau prend toute la largeur) */
.asm-ds .table-wp { width: 100% !important; table-layout: auto; }
.asm-ds .table-wp .wp-150 { min-width: 220px; max-width: none; width: auto; }
.asm-ds .table-wp .wp-250 { min-width: 300px; max-width: none; width: auto; }
.asm-ds .table-wp .wp-170 { min-width: 170px; max-width: none; }
.asm-ds .table-wp .wp-80 { min-width: 90px; max-width: none; width: 90px; }
.asm-ds .table-wp .wp-60 { min-width: 68px; max-width: none; width: 68px; }

/* #11 Radar : juste milieu (ni minuscule, ni geant) */
.asm-ds .asm-radar { max-width: 680px; }
.asm-ds .asm-radar canvas { max-height: 460px; }

/* #2 Encadre option "Pas d'evaluateurs internes" */
.asm-ds .asm-option-box { display:flex; align-items:flex-start; gap:12px; background:#f8fafb; border:1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding:12px 16px; margin:6px 0 4px; max-width:680px; }
.asm-ds .asm-option-box .asm-option-ic { color:#0d9488; font-size:1rem; margin-top:2px; flex-shrink:0; }
.asm-ds .asm-option-box .asm-option-title { display:block; color:#2D3E50; font-weight:600; font-size:0.85rem; margin-bottom:2px; }
.asm-ds .asm-option-box .asm-option-help { color:#8fa1b3; font-size:0.78rem; }
/* Descriptif critere en colonne (page Evaluateurs) */
.asm-ds .asm-crit-desc { color:#64748b; font-size:0.8rem; line-height:1.4; }
/* =====================================================================
   asm-ds — iteration 4 (retours captures)
   ===================================================================== */

/* #5 Marge droite 40px retablie (le vide en edit venait du col-md-11, corrige en markup) */
.asm-ds .pr-sm-3 { padding-right: 40px !important; }

/* #1 Halo jaune (btn-warning) au clic supprime — focus clavier teal uniquement */
.asm-ds .btn:focus, .asm-ds .btn:active, .asm-ds .btn.focus, .asm-ds .btn:active:focus, .asm-ds .btn:not(:disabled):not(.disabled):active:focus { box-shadow: none !important; outline: none !important; }
.asm-ds .btn:focus-visible { outline: 2px solid #0d9488 !important; outline-offset: 1px; }

/* #6 Scrollbar plus fine (calque DS) */
.asm-ds .container-scrollable { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.asm-ds .container-scrollable::-webkit-scrollbar { width: 6px; height: 6px; background: transparent !important; }
.asm-ds .container-scrollable::-webkit-scrollbar-track { background: transparent !important; border: none !important; }
.asm-ds .container-scrollable::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.asm-ds .container-scrollable:hover::-webkit-scrollbar-thumb { background: #94a3b8; }

/* #7 Placeholder Resultats (aucune reponse) */
.asm-ds .asm-results-empty { display:flex; align-items:center; gap:10px; padding:22px 18px; margin:8px 0; background:#f8fafb; border:1px solid #e2e8f0; border-radius: var(--r-lg, 10px); color:#64748b; font-size:0.9rem; }
.asm-ds .asm-results-empty-ic { color:#0d9488; font-size:1rem; }
/* Radar : agrandi encore un peu (iteration 5) */
.asm-ds .asm-radar { max-width: 820px; }
.asm-ds .asm-radar canvas { max-height: 560px; }
/* Consigne sous/au-dessus du radar (et callouts media) : police reduite et homogene */
.asm-ds .media.bg-light .media-body,
.asm-ds .media.bg-light .media-body.h3,
.asm-ds .media.bg-light .media-body.h4 { font-size: 0.8rem !important; line-height: 1.45; }
/* Modale detail critere : etoiles plus petites, sur une seule ligne */
#assessmentCategoryCriteriaModal .starrating { white-space: nowrap; }
#assessmentCategoryCriteriaModal .starrating span:before,
#assessmentCategoryCriteriaModal .starrating label:before { font-size: 0.82em !important; margin: 0 1px !important; }
/* =========================================================================
   CATALOGUE RESKIN (gabarit page moderne .ds-* + accent teal)
   Page /article — cf. docs/sessions/2026-06-30_catalogue-reporting-reskin-etape1-catalogue.md
   .cat-* ne porte que : filtres inline en subbar, largeurs de colonnes, marqueur couleur.
   ========================================================================= */

/* Subbar : le formulaire de filtres prend la largeur, CTA poussé à droite */
.cat-subbar { flex-wrap: wrap; }
.cat-filters-form {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; flex-wrap: wrap; margin: 0;
}
.cat-cta { margin-left: auto; flex-shrink: 0; }

/* Champ filtre texte avec icône loupe */
.cat-filter-field { position: relative; display: inline-flex; align-items: center; }
.cat-filter-text .cat-filter-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 0.72rem; color: #b0bcc8; pointer-events: none;
}
.cat-input {
    height: 34px; width: 250px;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    padding: 4px 10px 4px 30px; background: #fff;
    font-size: 0.79rem; font-weight: 300; color: #2D3E50;
}
.cat-input::placeholder { color: #b0bcc8; }
.cat-input:focus {
    outline: none; border-color: var(--ds-teal, #0d9488);
    box-shadow: 0 0 0 2px rgba(13,148,136,0.12);
}

/* Selectpicker (bootstrap-select) alignés DS — scopés à la subbar Catalogue */
.cat-subbar .bootstrap-select { width: auto !important; min-width: 185px; }
.cat-subbar .bootstrap-select > .dropdown-toggle { width: 100%; }
.cat-subbar .bootstrap-select { vertical-align: middle; }
.cat-subbar .bootstrap-select > .dropdown-toggle.btn-white,
.cat-subbar .bootstrap-select > .dropdown-toggle {
    height: 34px; min-height: 34px;
    border: 1px solid #e2e8f0 !important; border-radius: var(--r-md, 6px)!important;
    background: #fff !important; color: #2D3E50 !important;
    font-size: 0.79rem; font-weight: 400;
    box-shadow: none !important;
}
.cat-subbar .bootstrap-select > .dropdown-toggle:focus {
    outline: none !important;
    border-color: var(--ds-teal, #0d9488) !important;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.12) !important;
}
.cat-subbar .bootstrap-select > .dropdown-toggle .filter-option { color: #2D3E50; }

/* CTA : pas de cadre noir au clic */
.cat-cta:focus { outline: none; }
.cat-cta:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 2px; }

/* Tableau : largeurs de colonnes (header + rows partagent .cat-row) */
.cat-row { gap: 0; }
.cat-row > [class^="cat-col-"] {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-right: 12px;
}
.cat-col-ref    { flex: 0 0 16%; }
.cat-col-name   { flex: 0 0 28%; }
.cat-col-cat    { flex: 0 0 26%; display: flex; align-items: center; gap: 8px; }
.cat-col-subcat { flex: 0 0 22%; }
.cat-col-doc    { flex: 0 0 8%; text-align: right; padding-right: 0; color: #8fa1b3; }

/* Marqueur couleur de catégorie (grammaire taxonomie DS) */
.cat-cat-marker {
    display: inline-block; width: 10px; height: 10px;
    border-radius: var(--r-sm, 3px); flex-shrink: 0;
}
.cat-doc-ic { color: var(--ds-teal, #0d9488); font-size: 0.82rem; }

/* Responsive : marges gabarit (24px tablette / 16px mobile gérées par .ds-*) */
@media (max-width: 768px) {
    .cat-input { width: 130px; }
    .cat-col-ref { flex: 0 0 22%; }
    .cat-col-name { flex: 0 0 34%; }
    .cat-col-cat { flex: 0 0 24%; }
    .cat-col-subcat { flex: 0 0 20%; }
}
/* =========================================================================
   REPORTING RESKIN — étape B1 : chrome partagé (scoping opt-in .rpt-ds)
   Pages /cockpit + sous-pages — cf. docs/sessions/2026-06-30_*reporting*.md
   B1 = header blanc Anton + onglets .ds-tabs + barre de filtres recolorée DS.
   N'impacte QUE les pages portant .rpt-ds (opt-in, pas de bleed).
   ========================================================================= */

/* Bandeau header : navy plein -> blanc DS, aligné 40px */
.rpt-ds .main-color-project { background: #fff !important; padding-left: 0; padding-right: 0; }
.rpt-ds .main-color-project > .container-fluid { padding-left: 0; padding-right: 0; }
.rpt-tabs { margin-bottom: 0; }

/* Masque le toggle filtres mobile hérité (recoloré par défaut blanc-sur-blanc) */
.rpt-ds .navbar-toggler .text-white { color: #8fa1b3 !important; }

/* Barre de filtres : lisible sur fond blanc + contrôles DS */
.rpt-ds .rpt-filterbar { padding: 0; }
.rpt-ds #filterDashboardPanel { margin: 0 !important; padding: 12px 40px 14px; color: #415873; }
.rpt-ds #filterDashboardPanel .text-white { color: #415873 !important; }
.rpt-ds #filterDashboardPanel .h4 { color: #2D3E50 !important; font-weight: 500; }
.rpt-ds #filterDashboardPanel .font-weight-bold { color: #2D3E50 !important; }

.rpt-ds #filterDashboardPanel input.form-control,
.rpt-ds #filterDashboardPanel input[type="text"] {
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); height: 34px;
    color: #2D3E50; background: #fff; font-size: 0.82rem;
}
.rpt-ds #filterDashboardPanel input:focus {
    outline: none; border-color: var(--ds-teal, #0d9488);
    box-shadow: 0 0 0 2px rgba(13,148,136,0.12);
}
.rpt-ds #filterDashboardPanel .bootstrap-select { vertical-align: middle; }
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle {
    border: 1px solid #e2e8f0 !important; border-radius: var(--r-md, 6px)!important;
    background: #fff !important; color: #2D3E50 !important;
    box-shadow: none !important; height: 34px;
}
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--ds-teal, #0d9488) !important;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.12) !important;
}

/* Bouton mode (année pleine / chevauchée) -> pill teal DS (override inline) */
.rpt-ds #mode-year-btn {
    background: var(--ds-teal-light, #e6f7f5) !important;
    border: 1px solid var(--ds-teal, #0d9488) !important;
    color: var(--ds-teal, #0d9488) !important;
    border-radius: var(--r-md, 6px)!important;
}

/* Icône d'aide (?) en muted DS */
.rpt-ds #filterDashboardPanel .fa-question-circle { color: #8fa1b3; }
/* =========================================================================
   REPORTING RESKIN — étape B2 : filtres sur une seule ligne + bloc compact
   (pas de drawer ; tous les filtres restent visibles). Scopé .rpt-ds.
   ========================================================================= */

/* Bloc header + onglets compacts (gain de hauteur, restent aérés) */
.rpt-ds .ds-page-header { min-height: 46px; }
.rpt-ds .main-color-project { padding-top: 4px !important; padding-bottom: 0 !important; }
.rpt-ds .ds-tab { padding: 9px 16px; }

/* Barre de filtres : padding vertical réduit */
.rpt-ds #filterDashboardPanel { margin: 0 !important; padding: 8px 40px 10px; }

/* Tout sur une seule ligne : on aplatit la grille Bootstrap en flex nowrap */
.rpt-ds #filterDashboardPanel form > .row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0;
}
.rpt-ds #filterDashboardPanel [class*="col-"] {
    flex: 0 0 auto; width: auto; max-width: none; padding: 0;
}
.rpt-ds #filterDashboardPanel .col-md-6 > .row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 0;
}
.rpt-ds #filterDashboardPanel .col-6 { display: flex; align-items: center; gap: 8px; }
.rpt-ds #filterDashboardPanel .pt-2 { padding-top: 0 !important; }
.rpt-ds #filterDashboardPanel br { display: none; }

/* Libellés compacts, pas de retour ligne */
.rpt-ds #filterDashboardPanel .h4 { font-size: 0.88rem !important; margin: 0; white-space: nowrap; }
.rpt-ds #filterDashboardPanel .font-weight-bold {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    white-space: nowrap; font-weight: 500;
}

/* Dates + selects compacts */
.rpt-ds #filterDashboardPanel input.form-control,
.rpt-ds #filterDashboardPanel input[type="text"] { width: 106px; }
.rpt-ds #filterDashboardPanel .bootstrap-select {
    width: auto !important; min-width: 130px; max-width: 175px; margin: 0 !important;
}
.rpt-ds #filterDashboardPanel .lg-rectangled { margin-top: 0 !important; display: inline-block; }
.rpt-ds #mode-year-btn { margin: 0 0 0 6px !important; }

/* Sécurité écrans étroits : scroll horizontal plutôt qu'un wrap désordonné */
@media (max-width: 1500px) {
    .rpt-ds #filterDashboardPanel form > .row { overflow-x: auto; overflow-y: visible; padding-bottom: 2px; }
}
/* =========================================================================
   REPORTING RESKIN — étape B3a : corps du Cockpit (recolor DS, sans
   restructurer le markup ; charts inchangés). Scopé .rpt-ds #dashboard-cockpit.
   ========================================================================= */

/* Fond de zone plus doux, coins droits */
.rpt-ds .main-content-dashboard { background: #f4f6f9; border-radius: 0 !important; padding-top: 6px; }

/* Cartes blanches -> traitement DS (bord léger + radius 2px, pas d'ombre) */
.rpt-ds #dashboard-cockpit .bg-white {
    border: 1px solid #e6ebf1; border-radius: 2px;
}

/* Mini-cartes "highlight" : bleu délavé -> navy DS (texte blanc conservé) */
.rpt-ds #dashboard-cockpit .bg-cockpit {
    background-color: #2D3E50 !important; border: none; border-radius: var(--r-lg, 10px);
}

/* Titres de cartes : navy DS + filet bas discret */
.rpt-ds #dashboard-cockpit .text-cockpit,
.rpt-ds #dashboard-cockpit .title-cockpit,
.rpt-ds #dashboard-cockpit .text-dashboard { color: #2D3E50; }
.rpt-ds #dashboard-cockpit .border-bottom { border-color: rgba(45,62,80,0.12) !important; }

/* Séparateur épais 15px -> simple gouttière (les bords de carte suffisent) */
.rpt-ds #dashboard-cockpit .border-dashboard { border-right: none !important; }

/* Lien "Voir plus" en teal DS */
.rpt-ds #dashboard-cockpit a.text-dashboard:hover { color: var(--ds-teal, #0d9488); }

/* Léger espacement intérieur homogène entre cartes d'une même ligne */
.rpt-ds #dashboard-cockpit .row.mb-3 > [class*="col-md-"] { margin-bottom: 8px; }
/* =========================================================================
   REPORTING RESKIN — étape B3b : finitions partie haute + corps + graphes
   Retours utilisateur 2026-06-30. Scopé .rpt-ds.
   ========================================================================= */

/* --- Onglets : tenir sur une seule ligne (override min-width gabarit) --- */
.rpt-ds .ds-tabs { flex-wrap: nowrap; gap: 2px; }
.rpt-ds .ds-tab {
    /* min-width : plus neutralise (2026-08-25). Compactage de police/padding conserve. */
    padding: 8px 14px; font-size: 0.82rem; white-space: nowrap;
}

/* --- Zone de filtres : nettoyage --- */
/* Plus de scrollbar (verticale parasite) : on laisse respirer / wrap si étroit */
.rpt-ds #filterDashboardPanel form > .row { overflow: visible; }
@media (max-width: 1550px) {
    .rpt-ds #filterDashboardPanel form > .row { overflow: visible; flex-wrap: wrap; row-gap: 8px; }
}

/* Label "Filtrer" : petit, muted, uppercase */
.rpt-ds #filterDashboardPanel .h4 {
    font-size: 0.72rem !important; font-weight: 600; color: #94a3b8 !important;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0; white-space: nowrap;
}

/* Bouton "Supprimer" orange -> icône réinitialiser ghost (gabarit .ds-filters-reset) */
.rpt-ds #filterDashboardPanel .lg-rectangled {
    background: transparent !important; border: none !important;
    font-size: 0 !important; margin: 0 2px 0 -4px !important; padding: 0 !important;
}
.rpt-ds #filterDashboardPanel .lg-rectangled a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--r-md, 6px); padding: 0 !important;
}
.rpt-ds #filterDashboardPanel .lg-rectangled a:hover { background: var(--ds-teal-light, #e6f7f5); }
.rpt-ds #filterDashboardPanel .lg-rectangled i {
    font-size: 0.82rem !important; color: #8fa1b3 !important; padding: 0 !important; margin: 0 !important;
}
.rpt-ds #filterDashboardPanel .lg-rectangled a:hover i { color: var(--ds-teal, #0d9488) !important; }
/* swap glyphe fa-times -> fa-redo (réinitialiser) */
.rpt-ds #filterDashboardPanel .lg-rectangled .fa-times::before { content: "\f01e"; }

/* Dates + selects : largeurs homogènes compactes */
.rpt-ds #filterDashboardPanel input.form-control,
.rpt-ds #filterDashboardPanel input[type="text"] { width: 104px; height: 32px; }
.rpt-ds #filterDashboardPanel .bootstrap-select {
    width: auto !important; min-width: 122px; max-width: 158px; margin: 0 !important;
}
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle { height: 32px; }
.rpt-ds #filterDashboardPanel .font-weight-bold { font-weight: 500; color: #415873 !important; }
.rpt-ds #mode-year-btn { margin: 0 0 0 4px !important; font-size: 0.72rem; padding: 3px 9px !important; }

/* --- Corps Cockpit : mini-cartes "highlight" en teal clair (au lieu de navy) --- */
.rpt-ds #dashboard-cockpit .bg-cockpit {
    background-color: #e6f7f5 !important;
    border: 1px solid transparent !important; border-left: 3px solid var(--ds-teal, #0d9488) !important;
    border-radius: var(--r-lg, 10px);
}
.rpt-ds #dashboard-cockpit .bg-cockpit .text-white,
.rpt-ds #dashboard-cockpit .bg-cockpit a.text-white { color: #2D3E50 !important; }

/* --- Graphes : couleurs moins saturées (canvas + pastilles de légende) --- */
.rpt-ds #dashboard-cockpit canvas.chartjs { filter: saturate(0.72); }
.rpt-ds #dashboard-cockpit .col-2.border { filter: saturate(0.72); }
/* =========================================================================
   REPORTING RESKIN — corrections retours 2026-06-30 (#2)
   ========================================================================= */

/* Retrait du label "Filtrer" (on garde l'icône d'aide ? et l'icône reset) */
.rpt-ds #filterDashboardPanel span.h4 { display: none !important; }
.rpt-ds #filterDashboardPanel i.fa-question-circle.h4 { font-size: 1rem !important; color: #8fa1b3; }

/* Onglets : plus de marge entre eux + soulignement teal au hover (cf. module Listes) */
.rpt-ds .ds-tabs { gap: 14px !important; }
/* ⚠️ Le raccourci `border-bottom: 2px solid transparent` a ete RETIRE le 2026-08-25 : a specificite
   egale (0,2,0) mais declare plus bas que `.ds-tab.active`, il en remettait la couleur a transparent
   => l'onglet ACTIF n'avait plus de soulignement teal sur Reporting. La base `.ds-tab` pose deja ce
   filet transparent au repos ET la transition : cette regle faisait doublon en plus de casser l'actif.
   Survol aligne sur la cible commune : texte plus fonce + filet GRIS (le teal reste a l'actif). */
.rpt-ds .ds-tab:hover:not(.active) { color: #415873; border-bottom-color: #cbd5e1; }

/* Centrage vertical des selects avec les champs à leur gauche */
.rpt-ds #filterDashboardPanel form > .row,
.rpt-ds #filterDashboardPanel .col-md-6 > .row,
.rpt-ds #filterDashboardPanel .col-6 { align-items: center; }
.rpt-ds #filterDashboardPanel .bootstrap-select,
.rpt-ds #filterDashboardPanel input.form-control,
.rpt-ds #filterDashboardPanel input[type="text"] { vertical-align: middle; }

/* Suppression définitive de la scrollbar parasite (overflow visible, wrap propre) */
@media (max-width: 1500px) {
    .rpt-ds #filterDashboardPanel form > .row { overflow: visible !important; flex-wrap: wrap; row-gap: 8px; }
}
/* =========================================================================
   REPORTING RESKIN — corrections retours 2026-06-30 (#3) : zone filtres
   plus large, placeholders centrés, rangée alignée, plus d'air.
   ========================================================================= */

/* Plus d'air dans la zone de filtres */
.rpt-ds #filterDashboardPanel { padding: 14px 40px 16px !important; }
.rpt-ds #filterDashboardPanel form > .row { gap: 20px; align-items: center; }
.rpt-ds #filterDashboardPanel .col-md-6 > .row { gap: 18px; align-items: center; }
.rpt-ds #filterDashboardPanel .col-6 { gap: 18px; align-items: center; }

/* Dropdowns plus larges */
.rpt-ds #filterDashboardPanel .bootstrap-select { min-width: 180px !important; max-width: 220px !important; }

/* Hauteur homogène (36px) + centrage vertical du texte (line-height, pas de flex) */
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle {
    height: 36px !important; line-height: 34px !important; padding: 0 28px 0 12px !important;
}
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle .filter-option-inner,
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { line-height: 34px; }
.rpt-ds #filterDashboardPanel input.form-control,
.rpt-ds #filterDashboardPanel input[type="text"] { height: 36px !important; }

/* Bouton "Année pleine" + reset alignés sur la même base */
.rpt-ds #mode-year-btn { height: 30px; display: inline-flex; align-items: center; line-height: 1; }
.rpt-ds #filterDashboardPanel .lg-rectangled a { vertical-align: middle; }
/* =========================================================================
   RESKIN — corrections #4 (2026-06-30) : alignement vertical rangée filtres
   + centrage du contenu des selects (texte + pastille couleur).
   NB : le projet surcharge .filter-option en static/inline -> on centre via
   inline-flex sur .filter-option (in-flow, sans casser le caret).
   ========================================================================= */

/* --- Reporting : alignement de toute la rangée sur la même médiane --- */
.rpt-ds #filterDashboardPanel form > .row { min-height: 40px; align-items: center !important; }
.rpt-ds #filterDashboardPanel form > .row > [class*="col-"] { display: flex; align-items: center; }
.rpt-ds #filterDashboardPanel .col-md-6 > .row { align-items: center !important; }
.rpt-ds #filterDashboardPanel .bootstrap-select,
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle,
.rpt-ds #filterDashboardPanel .font-weight-bold,
.rpt-ds #filterDashboardPanel .pt-2 { margin: 0 !important; }

/* --- Centrage vertical du contenu des selects (Reporting + Catalogue) --- */
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option,
.cat-subbar .bootstrap-select .filter-option {
    display: inline-flex !important; align-items: center; height: 100%; vertical-align: middle;
}
.rpt-ds #filterDashboardPanel .bootstrap-select .md-squared,
.cat-subbar .bootstrap-select .md-squared { vertical-align: middle; flex-shrink: 0; }
/* =========================================================================
   RESKIN — corrections #5 (2026-06-30)
   1) Reporting : fond gris retiré + cards bord gris gauche/bas (transparent haut/droite)
   2) Selects : centrage vertical déterministe (toggle flex + caret épinglé absolu)
   ========================================================================= */

/* --- 1. Fond gris retiré sous cards / graphiques --- */
.rpt-ds .main-content-dashboard { background: #fff !important; }
.rpt-ds #dashboard-cockpit { background: #fff !important; }

/* Cards : bord gris léger à gauche + bas, transparent haut + droite */
.rpt-ds #dashboard-cockpit .bg-white {
    border: 1px solid transparent !important;
    border-left-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    border-radius: 2px;
}

/* --- 2. Centrage vertical déterministe du contenu des selects --- */
/* Toggle = flex container, position relative pour ancrer le caret absolu */
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle,
.cat-subbar .bootstrap-select > .dropdown-toggle {
    display: flex !important; align-items: center !important;
    position: relative !important; text-align: left !important;
    padding: 0 28px 0 12px !important;
}
/* filter-option = item flex centré, prend la place dispo (laisse de la place au caret) */
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle .filter-option,
.cat-subbar .bootstrap-select > .dropdown-toggle .filter-option {
    position: static !important; display: flex !important; align-items: center !important;
    height: 100% !important; width: auto !important; flex: 1 1 auto; min-width: 0; padding: 0 !important;
}
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner,
.cat-subbar .bootstrap-select .filter-option-inner { display: flex !important; align-items: center; min-width: 0; width: 100%; }
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner-inner,
.cat-subbar .bootstrap-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-ds #filterDashboardPanel .bootstrap-select .md-squared,
.cat-subbar .bootstrap-select .md-squared { flex-shrink: 0; }
/* caret épinglé à droite, centré, hors du flux flex */
.rpt-ds #filterDashboardPanel .bootstrap-select > .dropdown-toggle .bs-caret,
.cat-subbar .bootstrap-select > .dropdown-toggle .bs-caret {
    position: absolute !important; right: 10px !important; left: auto !important;
    top: 0; bottom: 0; display: flex; align-items: center;
}

/* --- Rangée de filtres : tous les contrôles sur la même médiane --- */
.rpt-ds #filterDashboardPanel form > .row { min-height: 40px; align-items: center !important; }
.rpt-ds #filterDashboardPanel form > .row > [class*="col-"],
.rpt-ds #filterDashboardPanel .col-md-6 > .row,
.rpt-ds #filterDashboardPanel .col-6 { display: flex !important; align-items: center !important; }
.rpt-ds #filterDashboardPanel .bootstrap-select,
.rpt-ds #filterDashboardPanel input.form-control,
.rpt-ds #filterDashboardPanel input[type="text"],
.rpt-ds #filterDashboardPanel #mode-year-btn { align-self: center; }
/* =========================================================================
   RESKIN — corrections #6 (2026-06-30) : contenu data-content des selects
   user/department (et multi orderingDepartment/Organization) en FLOATS ->
   passage en flex centré + ellipsis correcte. C'était la vraie cause du
   contenu collé en haut + de la troncature prématurée.
   ========================================================================= */

/* Wrapper du contenu sélectionné : float -> flex centré */
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner-inner .clearfix,
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner-inner .multi-select,
.cat-subbar .bootstrap-select .filter-option-inner-inner .clearfix,
.cat-subbar .bootstrap-select .filter-option-inner-inner .multi-select {
    display: flex !important; align-items: center; gap: 6px; min-width: 0; width: 100%;
}
/* Annule les floats du data-content */
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner-inner .float-left,
.cat-subbar .bootstrap-select .filter-option-inner-inner .float-left { float: none !important; }
/* Pastille couleur : sans marge haute, ne rétrécit pas */
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner-inner .md-squared,
.cat-subbar .bootstrap-select .filter-option-inner-inner .md-squared {
    margin-top: 0 !important; flex-shrink: 0; vertical-align: middle;
}
/* Libellé : prend la largeur dispo, ellipsis seulement au bord */
.rpt-ds #filterDashboardPanel .bootstrap-select .filter-option-inner-inner .labeled,
.cat-subbar .bootstrap-select .filter-option-inner-inner .labeled {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* =========================================================================
   RESKIN — corrections #7 (2026-06-30) : alignement vertical médian fiable
   de la rangée de filtres Reporting (force align-self:center, centre les
   wrappers internes gauche).
   ========================================================================= */
.rpt-ds #filterDashboardPanel form > .row { align-items: center !important; min-height: 0; }
.rpt-ds #filterDashboardPanel form > .row > * { align-self: center !important; }

/* Wrappers internes des blocs de gauche (Filtrer/reset + dates) : centrés */
.rpt-ds #filterDashboardPanel .col-md-2 > div,
.rpt-ds #filterDashboardPanel .col-md-4 > div {
    display: flex; align-items: center; margin: 0 !important;
}
.rpt-ds #filterDashboardPanel .col-md-4 .font-weight-bold { display: inline-flex; align-items: center; height: 36px; }

/* Colonne selects + sous-niveaux : centrés, contrôles auto-centrés */
.rpt-ds #filterDashboardPanel .col-md-6,
.rpt-ds #filterDashboardPanel .col-md-6 > .row,
.rpt-ds #filterDashboardPanel .col-6 { align-items: center !important; }
.rpt-ds #filterDashboardPanel .col-6 > * { align-self: center !important; }
.rpt-ds #filterDashboardPanel .bootstrap-select { height: 36px !important; }
/* =========================================================================
   REPORTING RESKIN — étape B3b : recolor DS généralisé à TOUTES les pages
   .rpt-ds (cockpit + 6 sous-pages #dashboard-list). Couvre la zone
   d'indicateurs des sous-pages. 2026-06-30.
   ========================================================================= */

/* Cards : bord gris léger gauche+bas, transparent haut+droite ; pas de double bord imbriqué */
.rpt-ds .main-content-dashboard .bg-white {
    border: 1px solid transparent !important;
    border-left-color: #e2e8f0 !important; border-bottom-color: #e2e8f0 !important;
    border-radius: 2px;
}
.rpt-ds .main-content-dashboard .bg-white .bg-white {
    border-left-color: transparent !important; border-bottom-color: transparent !important;
}

/* Mini-cartes "highlight" : teal clair + filet teal, texte navy */
.rpt-ds .main-content-dashboard .bg-cockpit {
    background-color: #e6f7f5 !important;
    border: 1px solid transparent !important; border-left: 3px solid var(--ds-teal, #0d9488) !important;
    border-radius: var(--r-lg, 10px);
}
.rpt-ds .main-content-dashboard .bg-cockpit .text-white,
.rpt-ds .main-content-dashboard .bg-cockpit a.text-white { color: #2D3E50 !important; }

/* Titres + filets DS */
.rpt-ds .main-content-dashboard .text-cockpit,
.rpt-ds .main-content-dashboard .title-cockpit,
.rpt-ds .main-content-dashboard .text-dashboard { color: #2D3E50; }
.rpt-ds .main-content-dashboard .border-bottom { border-color: rgba(45,62,80,0.12) !important; }
.rpt-ds .main-content-dashboard .border-dashboard { border-right: none !important; }

/* Graphes moins saturés (tous types : doughnut, pie, bar) + pastilles légende */
.rpt-ds .main-content-dashboard canvas { filter: saturate(0.72); }
.rpt-ds .main-content-dashboard .col-2.border { filter: saturate(0.72); }
/* =========================================================================
   REPORTING RESKIN — corrections #9 (2026-06-30)
   - Contrats : masquer la zone Dates (du..au) + message "filtres date non pris en compte"
   - Référencements : tableau converti en .ds-row (largeurs de colonnes)
   - Évaluations : items (partial partagé) -> lignes DS, SCOPÉ .rpt-ds (pas de bleed Fournisseur)
   ========================================================================= */

/* --- Contrats uniquement : cacher la colonne dates + message --- */
.rpt-contracts #filterDashboardPanel .col-md-4 { display: none !important; }

/* --- Référencements : tableau DS --- */
.rpt-ds #dashboard-list .rfa-row { gap: 0; }
.rpt-ds #dashboard-list .rfa-row > [class^="rfa-col-"] {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-right: 12px; display: flex; align-items: center;
}
.rpt-ds #dashboard-list .rfa-col-user     { flex: 0 0 14%; }
.rpt-ds #dashboard-list .rfa-col-supplier { flex: 0 0 32%; }
.rpt-ds #dashboard-list .rfa-col-prev     { flex: 0 0 19%; }
.rpt-ds #dashboard-list .rfa-col-ref      { flex: 0 0 19%; }
.rpt-ds #dashboard-list .rfa-col-date     { flex: 0 0 16%; }

/* Pills outline -> radius DS, largeur auto (au lieu du 90px fixe arrondi) */
.rpt-ds #dashboard-list .outline-pilled {
    width: auto !important; height: auto !important; min-width: 0;
    border-radius: 2px !important; padding: 2px 8px; line-height: 1.4;
}

/* --- Évaluations : .supplier-item (partial partagé) -> ligne DS (scopé) --- */
.rpt-ds #dashboard-list .supplier-item {
    background: #fff; border-bottom: 1px solid #f3f4f6; transition: background .12s;
}
.rpt-ds #dashboard-list .supplier-item:hover { background: #fafbfc; }
.rpt-ds #dashboard-list .supplier-item .open-tab-button { align-items: center; }
/* Titres de sections repliables (Brouillons / Finalisées) en DS */
.rpt-ds #dashboard-list .collapser { text-decoration: none; }
.rpt-ds #dashboard-list .collapseTitle { color: #2D3E50; font-size: 0.92rem; font-weight: 600; }
/* =========================================================================
   REPORTING RESKIN — corrections #10 (2026-06-30)
   - Contrats : masquage dates/message (override haute spécificité vs règle flex)
   - Neutralisation des fonds gris inline (#f2f5f9) + .bg-light dans les corps
   ========================================================================= */
.rpt-ds.rpt-contracts #filterDashboardPanel form > .row > .col-md-4 { display: none !important; }

.rpt-ds .main-content-dashboard [style*="f2f5f9"],
.rpt-ds .main-content-dashboard [style*="F2F5F9"],
.rpt-ds .main-content-dashboard .bg-light { background-color: #fff !important; }
/* =========================================================================
   ÉVALUATIONS / RÉFÉRENCEMENTS déplacés dans LISTES (option C, 2026-06-30)
   Coquille Listes + drawer filtres (moteur propre). Scopé .rpt-ds / #lst-app.
   ========================================================================= */

/* Onglets : pas de largeur forcée (6 onglets tiennent sur une ligne) */
/* min-width volontairement NON neutralise ici depuis le 2026-08-25 : la largeur mini du gabarit
   `.ds-tab` s'applique aussi au hub Listes (demande Olivier). */

/* Drawer filtres (pages invitées) : contrôles pleine largeur (override des règles inline-bar via spécificité ID) */
.rpt-ds .ds-drawer #filterDashboardPanel .bootstrap-select {
    width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important;
}
.rpt-ds .ds-drawer #filterDashboardPanel input.form-control,
.rpt-ds .ds-drawer #filterDashboardPanel input[type="text"] { width: 100% !important; height: 36px; }
.rpt-ds .ds-drawer #filterDashboardPanel .rpt-drawer-dates { display: flex; align-items: center; gap: 8px; }
.rpt-ds .ds-drawer #filterDashboardPanel .rpt-drawer-dates input[type="text"] { width: auto !important; flex: 1 1 auto; min-width: 0; }
.rpt-ds .ds-drawer #filterDashboardPanel .rpt-drawer-dates-sep { color: #94a3b8; flex-shrink: 0; }

/* En-tête de colonnes Évaluations — aligné sur la grille du partial _assessment_item_list */
.rpt-ds #dashboard-list .asm-list-header {
    position: sticky; top: 0; z-index: 5; background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.68rem; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 10px 0; margin: 0 0 2px 0;
}
/* =========================================================================
   ÉVALUATIONS — tableau DS aligné sur les autres onglets (option C, 2026-06-30 #2)
   Liste unique (brouillons/finalisées non séparés), colonnes Statut/Échéance
   réduites au profit de Fournisseurs, porteur = avatar + Prénom Nom.
   ========================================================================= */
.rpt-ds #dashboard-list .asm-row { gap: 0; }
.rpt-ds #dashboard-list .asm-row > [class^="asm-col-"] {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-right: 12px; display: flex; align-items: center;
}
.rpt-ds #dashboard-list .asm-col-name      { flex: 0 0 22%; }
.rpt-ds #dashboard-list .asm-col-module    { flex: 0 0 12%; }
.rpt-ds #dashboard-list .asm-col-user      { flex: 0 0 16%; }
.rpt-ds #dashboard-list .asm-col-status    { flex: 0 0 11%; }
.rpt-ds #dashboard-list .asm-col-deadline  { flex: 0 0 11%; }
.rpt-ds #dashboard-list .asm-col-suppliers { flex: 0 0 28%; padding-right: 0; }

.rpt-ds #dashboard-list .asm-user-cell { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
.rpt-ds #dashboard-list .asm-user-cell .ds-cell-secondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-ds #dashboard-list .asm-user-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
/* =========================================================================
   DRAWERS Évaluations/Référencements — alignement EXACT sur les drawers Listes
   (2026-06-30 #3). Le form n'a plus d'id #filterDashboardPanel → le CSS de la
   barre inline ne bave plus ; on rétablit le style gabarit (.btn-white borderless).
   ========================================================================= */

/* Form = colonne flex remplissant le drawer → footer collé en bas (sticky) */
.rpt-ds .ds-drawer .rpt-drawer-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.rpt-ds .ds-drawer .rpt-drawer-form .ds-drawer-body { flex: 1 1 auto; }

/* Selectpickers pleine largeur (comme Listes) */
.rpt-ds .ds-drawer .bootstrap-select { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; }

/* data-content Acheteur/Département (floats) -> flex centré + libellé complet */
.rpt-ds .ds-drawer .bootstrap-select .filter-option-inner-inner .clearfix,
.rpt-ds .ds-drawer .bootstrap-select .filter-option-inner-inner .multi-select { display: flex !important; align-items: center; gap: 6px; min-width: 0; }
.rpt-ds .ds-drawer .bootstrap-select .filter-option-inner-inner .float-left { float: none !important; }
.rpt-ds .ds-drawer .bootstrap-select .filter-option-inner-inner .md-squared { margin-top: 0 !important; flex-shrink: 0; vertical-align: middle; }
.rpt-ds .ds-drawer .bootstrap-select .filter-option-inner-inner .labeled { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Plage de dates : inputs bordés répartis sur la largeur */
.rpt-ds .ds-drawer .rpt-drawer-dates { display: flex; align-items: center; gap: 8px; }
.rpt-ds .ds-drawer .rpt-drawer-dates input[type="text"] {
    flex: 1 1 auto; min-width: 0; height: 34px; padding: 4px 8px;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff;
    font-size: 0.82rem; color: #2D3E50;
}
.rpt-ds .ds-drawer .rpt-drawer-dates-sep { color: #94a3b8; flex-shrink: 0; }
/* =========================================================================
   Onglets des pages invitées (Évaluations/Référencements) : MÊME style que les
   onglets Listes d'origine (et non le style Reporting hérité via .rpt-ds).
   2026-06-30 #4.
   ========================================================================= */
.rpt-ds .lst-chrome-tabs { gap: 0 !important; }
.rpt-ds .lst-chrome-tabs .ds-tab { padding: 13px 18px; font-size: 0.85rem; }
.rpt-ds .lst-chrome-tabs .ds-tab:hover:not(.active) {
    color: #415873; border-bottom-color: #cbd5e1;
}
/* =========================================================================
   Pages invitées (Évaluations/Référencements) : header + onglets STRICTEMENT
   alignés sur Listes (annule les compactages Reporting hérités via .rpt-ds).
   2026-06-30 #5 : hauteur header + soulignement teal de l'onglet actif.
   ========================================================================= */
.rpt-ds .lst-chrome-header { min-height: 56px; }
.rpt-ds .lst-chrome-tabs { gap: 0 !important; flex-wrap: nowrap; }
.rpt-ds .lst-chrome-tabs .ds-tab { padding: 13px 18px; font-size: 0.85rem; }
.rpt-ds .lst-chrome-tabs .ds-tab:hover:not(.active) { color: #415873; border-bottom-color: #cbd5e1; }
.rpt-ds .lst-chrome-tabs .ds-tab.active {
    color: #2D3E50; font-weight: 600;
    border-bottom-color: var(--ds-teal, #0d9488) !important;
}
/* Libellé discret de la plage de dates dans les drawers (Échéance / Date de changement) */
.rpt-ds .ds-drawer .rpt-drawer-dates-label {
    display: block; font-size: 0.7rem; font-weight: 400; color: #94a3b8;
    margin-bottom: 4px;
}

/* === Portail societes consultees : home B2B (rfx-portal-hub) - etape 1 reskin === */
.rfx-portal-home.rfx-portal-hub { background: #f6f8fb; }
/* Footer ancre en bas sans recouvrir la navbar de gauche : colonne flex pleine hauteur */
.rfx-portal-hub .row.no-gutters { min-height: 100vh; }
.rfx-portal-hub .col-md-9 { display: flex; flex-direction: column; min-height: 0; }
/* .rfx-home = colonne flex PLEINE LARGEUR (2026-08-25) : l'en-tête reste contraint à 1040px via
   .rfx-home-top, mais la zone scrollable .rfxp-scroll occupe toute la largeur — sa scrollbar tombe donc
   au bord droit de la page et non plus contre les tuiles. L'en-tête ne défile pas : il est hors du scroll. */
.rfx-portal-hub .rfx-home { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: none; padding: 0; }
.rfx-portal-hub .rfx-home-top { flex: 0 0 auto; box-sizing: border-box; width: 100%; max-width: 1040px; margin: 0 auto; padding: 46px 40px 0; }

/* Header */
.rfx-portal-hub .rfx-home-header { align-items: center; margin-bottom: 20px; }
.rfx-portal-hub .rfx-home-supplier { font-size: 1.9rem !important; letter-spacing: .3px; }
.rfx-portal-hub .rfx-home-welcome { margin-top: 4px; }
.rfx-portal-hub .rfx-hub-multi-supplier { font-size: .8rem; color: #0d9488; margin-top: 8px; }
.rfx-portal-hub .rfx-hub-topbar { display: flex; margin-bottom: 16px; }

/* Eyebrow de section */
.rfx-portal-hub .rfxp-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; margin: 0 0 14px; }

/* Grille rubriques a venir / futures (Identite, Questionnaire) - AU-DESSUS */
.rfx-portal-hub .rfxp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rfx-portal-hub .rfxp-card { position: relative; background: #fff; border: 1px solid #e7ecf1; border-radius: var(--r-lg, 10px); padding: 22px 22px 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.rfx-portal-hub a.rfxp-card:hover { border-color: #0d9488; box-shadow: 0 12px 30px rgba(13,148,136,.10); transform: translateY(-2px); text-decoration: none; }
.rfx-portal-hub .rfxp-card-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg, 10px); background: #eef2f6; color: #94a3b8; font-size: 1.2rem; margin-bottom: 15px; }
.rfx-portal-hub .rfxp-card-title { font-size: 1.02rem; font-weight: 700; color: #1f2d3d; }
.rfx-portal-hub .rfxp-card-desc { font-size: .84rem; color: #64748b; margin-top: 5px; line-height: 1.5; }
.rfx-portal-hub .rfxp-soon { position: absolute; top: 18px; right: 18px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--r-sm, 3px); padding: 4px 11px; }
.rfx-portal-hub .rfxp-card.is-disabled { cursor: default; }

/* Carte hero : rubrique active (Appels d'offres) - EN DESSOUS */
.rfx-portal-hub .rfxp-hero { display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid #e7ecf1; border-radius: var(--r-lg, 10px); padding: 24px 26px; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.rfx-portal-hub a.rfxp-hero:hover { border-color: #0d9488; box-shadow: 0 14px 34px rgba(13,148,136,.12); transform: translateY(-2px); text-decoration: none; }
.rfx-portal-hub .rfxp-hero-icon { flex: 0 0 auto; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg, 10px); background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; font-size: 1.45rem; box-shadow: 0 6px 16px rgba(13,148,136,.28); }
.rfx-portal-hub .rfxp-hero-body { flex: 1 1 auto; min-width: 0; }
.rfx-portal-hub .rfxp-hero-title { font-size: 1.25rem; font-weight: 700; color: #1f2d3d; line-height: 1.2; }
.rfx-portal-hub .rfxp-hero-desc { font-size: .88rem; color: #64748b; margin-top: 4px; }
.rfx-portal-hub .rfxp-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 18px; }
.rfx-portal-hub .rfxp-stat { display: flex; flex-direction: column; }
.rfx-portal-hub .rfxp-stat-num { font-size: 1.55rem; font-weight: 800; color: #1f2d3d; line-height: 1; }
.rfx-portal-hub .rfxp-stat.is-accent .rfxp-stat-num { color: #0d9488; }
.rfx-portal-hub .rfxp-stat-label { font-size: .74rem; color: #94a3b8; margin-top: 5px; }
.rfx-portal-hub .rfxp-hero-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; background: #0d9488; color: #fff; font-size: .85rem; font-weight: 600; padding: 12px 22px; border-radius: var(--r-md, 6px); white-space: nowrap; transition: background .15s; }
.rfx-portal-hub a.rfxp-hero:hover .rfxp-hero-cta { background: #0b7d72; }

/* Marque « alimenté par » : plus d'ancrage en bas de colonne depuis 2026-08-25 — elle flotte
   (position: fixed, cf. .rfx-portal-home .rfx-home-footer). */
/* === fin reskin portail hub === */
/* Tuiles rubriques actives : icone teal (portail hub) */
.rfx-portal-hub a.rfxp-card .rfxp-card-icon { background: rgba(13,148,136,0.09); color: #0d9488; }

/* === Portail : pages formulaire Identite / Questionnaire (rfx-portal-form) === */
/* Masque les 2 lignes d'en-tete du layout rfp_edit : header DS pose dans le contenu */
.rfx-portal-form > .row.no-gutters:nth-child(1),
.rfx-portal-form > .row.no-gutters:nth-child(2) { display: none; }

/* Header DS plein largeur (fleche retour + fil d'ariane + rubrique) - calque .asm-head */
.rfx-portal-form .rfxp-head { display:flex; align-items:center; justify-content:space-between; padding:14px 40px; background:#fff; gap:16px; border-bottom:1px solid #e7ecf1; }
.rfx-portal-form .rfxp-head-left { display:flex; align-items:center; gap:14px; min-width:0; overflow:hidden; }
.rfx-portal-form .rfxp-back { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; border:1px solid #e7ecf1; border-radius: var(--r-md, 6px); background:#fff; color:#64748b; text-decoration:none; transition:all .15s; }
.rfx-portal-form .rfxp-back:hover { border-color:#0d9488; color:#0d9488; background:rgba(13,148,136,0.07); text-decoration:none; }
.rfx-portal-form .rfxp-head-titles { display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
.rfx-portal-form .rfxp-breadcrumb { display:flex; align-items:baseline; gap:7px; overflow:hidden; }
.rfx-portal-form .rfxp-bc-parent { font-size:.74rem; font-weight:400; color:#64748b; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px; transition:color .15s; }
.rfx-portal-form .rfxp-bc-parent:hover { color:#0d9488; text-decoration:underline; }
.rfx-portal-form .rfxp-bc-sep { color:#cbd5e1; font-size:.8rem; flex-shrink:0; line-height:1; }
.rfx-portal-form .rfxp-bc-section { font-size:.74rem; font-weight:600; color:#2D3E50; white-space:nowrap; }
.rfx-portal-form .rfxp-head-name { font-family:'Anton',sans-serif; font-weight:400; color:#2D3E50; font-size:1.2rem; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:560px; line-height:1.25; }
.rfx-portal-form .rfxp-head-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.rfx-portal-form .rfxp-head-fill { font-size:.72rem; font-weight:600; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding:4px 12px; white-space:nowrap; }

/* Pills de statut + obligatoire/facultatif sur les tuiles du hub */
.rfx-portal-hub .rfxp-pill { position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:600; padding:4px 11px; border-radius: var(--r-sm, 3px); white-space:nowrap; }
.rfx-portal-hub .rfxp-pill i { font-size:.66rem; }
.rfx-portal-hub .rfxp-pill.is-done { color:#0f9d58; background:rgba(15,157,88,0.10); }
.rfx-portal-hub .rfxp-pill.is-todo { color:#b45309; background:rgba(245,158,11,0.12); }
.rfx-portal-hub .rfxp-card-fill { margin-top:12px; font-size:.72rem; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; }
/* === fin portail form + pills === */
/* Portail hub : etat "a revalider" + pied de carte (date) */
.rfx-portal-hub .rfxp-pill.is-reval { color:#c2410c; background:rgba(234,88,12,0.12); }
.rfx-portal-hub .rfxp-card-foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.rfx-portal-hub .rfxp-card-foot .rfxp-card-fill { margin-top:0; }
.rfx-portal-hub .rfxp-card-date { font-size:.72rem; color:#94a3b8; white-space:nowrap; }
.rfx-portal-hub .rfxp-card.needs-reval { border-color:#fdba74; background:#fffbf7; }
.rfx-portal-hub a.rfxp-card.needs-reval:hover { border-color:#f97316; box-shadow:0 12px 30px rgba(234,88,12,0.12); }
/* === fin etat revalidation === */
/* === Portail : page liste AO (rfxl) — header .rfxp-head reutilise + liste compacte === */
.rfx-portal-form .rfxp-head-right img { max-height:44px; max-width:170px; width:auto; }
.rfx-portal-form .rfxp-head-right .logo-font { font-size:1.05rem; color:#2D3E50; }
.rfxl-body { max-width:1080px; margin:0 auto; padding:22px 40px 0; }
.rfxl-body .rfx-home-kpis { margin-bottom:18px; }
.rfxl-list { display:flex; flex-direction:column; gap:8px; padding:2px 2px 8px; }
.rfxl-list .rfx-rfp-card { padding:13px 18px; gap:5px; border-radius: var(--r-lg, 10px); }
.rfxl-list .rfx-rfp-card-title { font-size:0.97rem; }
.rfxl-list .rfx-rfp-card-desc { -webkit-line-clamp:1; font-size:0.8rem; }
.rfxl-list .rfx-rfp-card-foot { gap:6px; margin-top:1px; }
/* Liste des AO : le conteneur scrollable est PLEINE LARGEUR (2026-08-25) pour que sa scrollbar tombe au
   bord droit de la page ; les cartes restent alignées sur les KPI via le max-width des enfants directs.
   Le padding bas dégage l'encadré flottant « alimenté par ».
   ⚠ Hauteur posée en JS avec css('height') (padding compris) — surtout pas resizeItemEditContainer, qui
   raisonne en hauteur de CONTENU : le padding s'ajouterait et ferait déborder la page. */
.rfxl-list-wide { padding: 2px 40px 96px; }
.rfxl-list-wide > * { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
/* Le conteneur pleine largeur suppose que son parent ne le bride plus : .rfxl-body-wide neutralise le
   max-width/padding de .rfxl-body (partagé avec Onboarding et Documents partagés, à ne PAS toucher) et
   rend la contrainte de largeur aux seuls KPI, qui restent alignés sur les cartes. */
.rfxl-body-wide { max-width: none; padding-left: 0; padding-right: 0; }
.rfxl-body-wide > .rfx-home-kpis { box-sizing: border-box; max-width: 1080px; margin-left: auto; margin-right: auto; padding: 0 40px; }
/* === fin page liste AO === */


/* ===========================================================================
   Hub "Mes evaluations" (.mya-*) — vue evaluateur (Recues) + page de reponse in-app.
   Chantier "Evaluations unifiees" 0.4a (2026-07-12). Reutilise le gabarit .ds-* ;
   .mya-* = strict specifique (grille colonnes, pastilles etat/progression, header retour).
   =========================================================================== */
.mya-ds .mya-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; line-height: 1;
    border-radius: var(--r-sm, 3px); background: var(--ds-teal, #0d9488); color: #fff;
    font-size: 0.65rem; font-weight: 600;
}
.mya-ds .ds-tab:not(.active) .mya-tab-count { background: var(--ds-teal-light, #e6f7f5); color: var(--ds-teal, #0d9488); }

.mya-ds .mya-row {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) 78px minmax(130px, 1.3fr) 92px 96px 112px 96px 92px;
    align-items: center; gap: 12px;
}
.mya-ds .mya-col-action { text-align: right; }

.mya-ds .mya-progress {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #eef2f6; color: #64748b; font-size: 0.72rem; font-weight: 600;
}
.mya-ds .mya-progress.is-complete { background: #e6f4ea; color: #28a745; }

.mya-ds .mya-state {
    display: inline-block; padding: 2px 10px; border-radius: var(--r-full, 999px);
    font-size: 0.72rem; font-weight: 600; border: 1px solid transparent;
}
.mya-ds .mya-state-todo { color: #b26a00; border-color: #f0c98a; background: #fdf5e8; }
.mya-ds .mya-state-in_progress { color: #1f6feb; border-color: #b6d3f7; background: #eef5fe; }
.mya-ds .mya-state-done { color: #28a745; border-color: #b7e0c1; background: #e9f6ed; }

.mya-ds .mya-action-link { color: #0d9488; font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.mya-ds .ds-row:hover .mya-action-link { text-decoration: underline; }

/* Page de reponse in-app */
.mya-ds .mya-answer-header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mya-ds .mya-back { color: #64748b; font-size: 0.82rem; font-weight: 600; }
.mya-ds .mya-back:hover { color: #2D3E50; text-decoration: none; }
.mya-ds .mya-answer-titles { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.mya-ds .mya-answer-container { padding: 24px 40px 40px; }
.mya-ds .ds-scroll-zone .mya-answer-container { padding: 24px 0 40px; }  /* in-app : la scroll-zone fournit deja les 40px lateraux */
/* Descriptif de critere affiche directement sous le libelle (edit + display), en lieu et place du "?" */
.asm-criteria-desc { font-size: 0.85rem; color: #64748b; font-weight: 400; margin-top: 4px; line-height: 1.4; }

/* Hub Mes evaluations — sous-sections (groupes par statut) + grille vue Emises */
.mya-ds .mya-group { margin-bottom: 22px; }
.mya-ds .mya-group-title { font-size: 0.72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px 2px; }
.mya-ds .mya-group-count { display: inline-block; margin-left: 4px; color: #94a3b8; font-weight: 600; }
.mya-ds .ds-list-header { position: static; }
.mya-ds .mya-row-em { display: grid; grid-template-columns: minmax(200px, 2fr) 120px 96px 110px minmax(140px, 1.5fr) 120px; align-items: center; gap: 12px; }

/* Hub Mes evaluations — sous-onglets par module (Fournisseurs / Contrats / Offres) */
.mya-ds .mya-subtabs { display: flex; gap: 6px; padding: 12px 40px 0; flex-wrap: wrap; }
.mya-ds .mya-subtab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-full, 999px); font-size: 0.8rem; font-weight: 600; color: #64748b; background: #f1f5f9; border: 1px solid transparent; }
.mya-ds .mya-subtab:hover { color: #2D3E50; text-decoration: none; }
.mya-ds .mya-subtab.active { color: #fff; background: #2D3E50; }
.mya-ds .mya-subtab-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--r-full, 999px); background: #e11d48; color: #fff; font-size: 0.68rem; font-weight: 700; text-align: center; }
.mya-ds .mya-subtab.active .mya-subtab-count { background: rgba(255,255,255,0.25); }
/* Hub Mes evaluations — badge Type (Recue / Emise) dans le tableau unifie */
.mya-ds .mya-type { display: inline-block; padding: 1px 8px; border-radius: var(--r-full, 999px); font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.mya-ds .mya-type-received { background: #e6f2f5; color: #2a8ba0; }
.mya-ds .mya-type-emitted { background: #eef2f6; color: #566a80; }
/* Hub Mes evaluations — alignement Workflow : recherche a gauche + pills sans double padding lateral */
.mya-ds .mya-search-wrap { margin-left: 0; }
.mya-ds .mya-search-input { min-width: 320px; }
.mya-ds .mya-pills { padding: 12px 0 8px 0; }
.mya-ds .mya-empty { padding: 56px 20px; }
/* Hub Mes evaluations — colonne Demandeur (avatar + nom, calque Workflow) */
.mya-ds .mya-requester-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mya-ds .mya-requester-cell .ds-cell-secondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hub Mes evaluations — avatar Demandeur calibre comme Workflow (22px) */
.mya-ds .mya-user-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.mya-ds .mya-user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Hub Mes evaluations — centrage des colonnes Avancement (4) et Evaluateurs (5) */
.mya-ds .mya-row > div:nth-child(4),
.mya-ds .mya-row > div:nth-child(5) { text-align: center; justify-content: center; }

/* Page reponse in-app (.mya-ds) — passage DS (chantier Evaluations unifiees 0.4a) */
.mya-ds .mya-answer-lead { font-size: 0.92rem; color: #2D3E50; line-height: 1.55; margin: 0 0 18px; }

/* Consignes DS (Descriptif / Guide de notation) — reprend .asm-callout sous .mya-ds */
.mya-ds .asm-callout { display: flex; gap: 12px; align-items: flex-start; background: #f8fafb; border: 1px solid #e2e8f0; border-left: 3px solid #0d9488; border-radius: var(--r-lg, 10px); padding: 12px 16px; margin: 4px 0 16px; }
.mya-ds .asm-callout-ic { color: #0d9488; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.mya-ds .asm-callout-body { color: #415873; font-size: 0.85rem; line-height: 1.5; }
.mya-ds .asm-callout-title { display: block; color: #2D3E50; font-weight: 600; margin-bottom: 4px; }

/* Criteres — DS clean (surcharge scopee des utilitaires Bootstrap des blocs form partages) */
.mya-ds .mya-answer-container h3.text-info { font-size: 0.95rem; font-weight: 600; color: #0d9488 !important; border-bottom: 1px solid #e2e8f0 !important; padding: 0 0 8px; margin: 22px 0 16px; letter-spacing: 0.01em; }
.mya-ds .mya-answer-container .h3.font-weight-normal { font-size: 0.92rem; font-weight: 600 !important; color: #2D3E50; margin-bottom: 2px; }
.mya-ds .mya-answer-container .h4.text-info { font-size: 0.78rem; color: #64748b !important; font-weight: 600; }
.mya-ds .mya-answer-container textarea { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); font-size: 0.85rem; padding: 8px 10px; }
.mya-ds .mya-answer-container textarea:focus { border-color: #0d9488; box-shadow: none; outline: none; }

/* Descriptif de critere : nettement distingue du nom (italique, plus clair, plus petit) sur la page in-app */
.mya-ds .asm-criteria-desc { font-size: 0.8rem; color: #8fa1b3; font-style: italic; font-weight: 400; margin-top: 3px; line-height: 1.45; }
/* Barre d'actions sticky (page reponse in-app) — boutons aux couleurs DS.
   On conserve les classes Bootstrap (le JS toggle btn-success/btn-secondary sur #send-button),
   on ne fait que recolorer sous .mya-ds. */
.mya-ds #save-button.btn-primary { background: #fff; border: 1px solid #cbd5e1; color: #2D3E50; box-shadow: none; }
.mya-ds #save-button.btn-primary:hover { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; }
.mya-ds #save-button.btn-primary:focus { box-shadow: none; outline: none; }

.mya-ds #send-button.btn-success { background: #0d9488; border-color: #0d9488; color: #fff; box-shadow: none; }
.mya-ds #send-button.btn-success:hover { background: #0b7d72; border-color: #0b7d72; color: #fff; }
.mya-ds #send-button.btn-success:focus { box-shadow: none; outline: none; }

.mya-ds #send-button.btn-secondary { background: #eef2f6; border-color: #e2e8f0; color: #94a3b8; box-shadow: none; cursor: default; }
.mya-ds #send-button.btn-secondary:hover { background: #eef2f6; border-color: #e2e8f0; color: #94a3b8; }
.mya-ds #send-button.btn-secondary:focus { box-shadow: none; outline: none; }
/* Indicateur d'enregistrement automatique (barre d'actions, page in-app) */
.mya-ds .mya-autosave { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; color: #64748b; }
.mya-ds .mya-autosave.is-saving { color: #94a3b8; }
.mya-ds .mya-autosave.is-saved { color: #0d9488; }
.mya-ds .mya-autosave.is-error { color: #d08585; }
.mya-ds .mya-autosave::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.72rem; }
.mya-ds .mya-autosave.is-saved::before { content: '\f00c'; }
.mya-ds .mya-autosave.is-saving::before { content: '\f110'; }
.mya-ds .mya-autosave.is-error::before { content: '\f071'; }
/* Barre d'actions in-app : centrer verticalement l'indicateur d'auto-save et le bouton (row flex) */
.mya-ds .item-actions-footer-supplier { background: #f8fafb; border-top: 1px solid #e2e8f0 !important; }
/* Listes -> Evaluations : badges legers de module (Fournisseurs / Contrats / Offres) */
.rpt-ds #dashboard-list .asm-mod-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-sm, 3px); font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.rpt-ds #dashboard-list .asm-mod-1 { background: #e6f2f5; color: #2a8ba0; }
.rpt-ds #dashboard-list .asm-mod-2 { background: #eef0fb; color: #5b6cc9; }
.rpt-ds #dashboard-list .asm-mod-3 { background: #fdf3e6; color: #b26a00; }
/* Page token : header DS en ligne (logo + titres) au lieu du bandeau navy (calque in-app) */
.mya-ds .mya-answer-header-ext { flex-direction: row; align-items: center; gap: 14px; }
.mya-ds .mya-answer-logo { flex-shrink: 0; }
/* Barre d'actions reponse evaluation : marque « alimente par » a gauche, actions centrees */
.mya-ds .mya-footer { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; flex-shrink: 0; }
.mya-ds .mya-footer-actions { display: flex; align-items: center; gap: 16px; }
.mya-ds .mya-footer-brand { position: absolute; right: 40px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: #64748b; }
.mya-ds .mya-footer-brand .rfx-home-footer-brand { font-weight: 600; letter-spacing: 0.02em; }

/* Page token : plein ecran, barre d'actions collee en bas, contenu scrollable au milieu */
.mya-ds .mya-answer-ext { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
.mya-ds .mya-answer-ext .mya-answer-header { flex-shrink: 0; }
.mya-ds .mya-answer-ext .container-scrollable { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }
/* « mybuyerwork » du footer en police Anton */
.mya-ds .mya-footer-brand .rfx-home-footer-brand { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; letter-spacing: 0.02em; font-size: 0.95rem; }

/* Header page reponse : titre fixe module (prefixe) + separateur, a gauche du titre acheteur */
.mya-ds .mya-answer-prefix { font-size: 1rem; font-weight: 500; color: #94a3b8; white-space: nowrap; }
.mya-ds .mya-answer-sep { color: #cbd5e1; }
/* Footer barre d'actions : neutralise le padding-top:10px de .item-actions pour un vrai centrage vertical */
.mya-ds .mya-footer { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Header page reponse : echeance en badge, pousse a droite */
.mya-ds .mya-deadline-badge { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 11px; border-radius: var(--r-sm, 3px); background: #f1f5f9; color: #64748b; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.mya-ds .mya-deadline-badge i { color: #94a3b8; font-size: 0.72rem; }
/* Évaluations unifiées — bouton Supprimer discret dans le header (#5, 2026-07-14) */
.asm-head-delete { color:#9aa5b1; opacity:0; margin-left:14px; font-size:15px; line-height:1; text-decoration:none; transition:opacity .15s ease, color .15s ease; }
.asm-head:hover .asm-head-delete { opacity:.55; }
.asm-head-delete.is-draft { opacity:.55; }
.asm-head-delete:hover { opacity:1; color:#d04545; }
.asm-head-delete:focus { outline:none; }
.asm-head-delete:focus-visible { outline:2px solid #d04545; outline-offset:2px; }

/* Bandeau succès « évaluation envoyée » — page token en display (#3, 2026-07-14) */
.asm-sent-banner { display:flex; align-items:center; gap:12px; padding:16px 20px; margin-bottom:28px; background:#eafaf1; border:1px solid #b7e4c7; border-left:4px solid #2e9e5b; border-radius: var(--r-lg, 10px); color:#1b6b3a; font-size:17px; font-weight:600; }
.asm-sent-banner-ic { font-size:22px; color:#2e9e5b; }
/* ── Évaluations unifiées — refonte wizard édition (2026-07-14) ── */
/* Footer wizard : indicateur auto-save à gauche, navigation d'étape à droite */
.asm-wizard-footer { display:flex; align-items:center; justify-content:space-between; }
.asm-wizard-autosave { display:flex; align-items:center; }
.asm-wizard-actions { display:flex; align-items:center; gap:10px; }
.asm-wizard-actions .btn { margin:0; }

/* Cartes de la section Paramètres */
.asm-param-card { background:#fff; border:1px solid #e6ebf1; border-radius: var(--r-lg, 10px); padding:18px 20px; margin:0 40px 18px 0; }
.asm-param-card-title { display:flex; align-items:center; gap:9px; font-weight:700; color:#1b2a4a; margin-bottom:14px; }
.asm-param-card-title i { color:#0d9488; }
.asm-param-row { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.asm-param-row:last-child { margin-bottom:0; }
.asm-param-label { min-width:120px; font-weight:600; color:#5a6b82; margin:0; }
.asm-param-control { display:flex; align-items:center; }
.asm-param-reminders-list { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.asm-reminder { display:inline-flex; align-items:center; gap:6px; }
.asm-reminder input[type=number] { width:64px; }
.asm-reminder-txt { color:#5a6b82; }
.asm-param-mb { margin:0 40px 18px 0; }
.asm-param-help { color:#5a6b82; margin:2px 0 14px; }

/* Sujets évalués + interrupteur d'auto-évaluation */
.asm-suppliers-list { margin-bottom:14px; }
.asm-supplier-row { display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid #f0f3f7; }
.asm-supplier-row:last-child { border-bottom:none; }
.asm-supplier-name { flex:1; font-weight:600; color:#1b2a4a; }
.asm-selfeval { display:inline-flex; align-items:center; gap:8px; margin:0; padding:4px 12px; border:1px solid #e6ebf1; border-radius: var(--r-full, 999px); cursor:pointer; }
.asm-selfeval-label { color:#5a6b82; font-weight:500; }
.asm-supplier-del { width:24px; text-align:center; }
.asm-supplier-row.is-forced .asm-selfeval { opacity:.6; cursor:not-allowed; }
.asm-addsupplier { display:flex; align-items:center; gap:12px; margin-top:6px; }
.asm-addsupplier-select { min-width:280px; }

/* Synthèse concise dans la modale d'envoi */
.asm-send-summary { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:16px; padding:14px 16px; background:#f6f8fb; border:1px solid #e6ebf1; border-radius: var(--r-md, 6px); }
.asm-send-summary-item { display:flex; flex-direction:column; }
.asm-send-summary-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; color:#8a97a8; }
.asm-send-summary-val { font-weight:700; color:#1b2a4a; text-align:center; }
/* ── Évaluations unifiées — correctifs refonte (2026-07-14 b) ── */
/* #2 Indicateur d'auto-save (footer wizard) */
#asm-autosave-state.mya-autosave { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:#8a97a8; }
#asm-autosave-state.mya-autosave::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; }
#asm-autosave-state.is-saving { color:#c79a52; }
#asm-autosave-state.is-saved { color:#6aa06a; }
#asm-autosave-state.is-error { color:#d04545; }

/* #5 Interrupteur d'auto-évaluation (teal) */
.asm-selfeval { display:inline-flex; align-items:center; gap:10px; margin:0; cursor:pointer; padding:0; border:none; background:none; }
.asm-selfeval-label { color:#5a6b82; font-weight:600; }
.asm-switch { position:relative; display:inline-flex; }
.asm-switch input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.asm-switch-track { display:inline-block; width:42px; height:22px; border-radius:22px; background:#cfd8e3; transition:background .15s ease; }
.asm-switch-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease; }
.asm-switch input:checked + .asm-switch-track { background:#0d9488; }
.asm-switch input:checked + .asm-switch-track .asm-switch-thumb { transform:translateX(20px); }
.asm-switch input:disabled + .asm-switch-track { opacity:.5; }
.asm-supplier-row.is-forced .asm-selfeval { opacity:.7; cursor:not-allowed; }

/* #8 Titre de statut sur la barre de synthèse */
.asm-state-title-row { margin-bottom:6px; }
.asm-state-title { font-weight:700; font-size:1.02rem; }

/* #6 Cases à cocher teal + alignement dans les écrans d'évaluation (best-effort) */
.asm-ds input[type=checkbox] { accent-color:#0d9488; }
.asm-option-box { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fff; border:1px solid #e6ebf1; border-radius: var(--r-lg, 10px); }
.asm-option-box .form-check, .asm-param-reminders .form-check { display:inline-flex; align-items:center; margin:0; padding:0; min-height:0; }
.asm-option-box .form-check .form-check-input, .asm-param-reminders .form-check .form-check-input { position:static; margin:0 8px 0 0; }
.asm-param-reminders-list .form-check-label { display:none; }
.asm-reminder { display:inline-flex; align-items:center; gap:8px; }
.asm-reminder input[type=number] { width:60px; height:34px; text-align:center; }
.asm-param-reminders .asm-param-label { align-self:center; }
/* Erreurs de champ visibles (cadre rouge + message) — écrans d'évaluation (2026-07-14 c) */
.asm-field-error input, .asm-field-error textarea, .asm-field-error select, .asm-field-error .form-control { border:1px solid #d04545 !important; box-shadow:0 0 0 2px rgba(208,69,69,.18); }
.asm-field-err-msg { color:#d04545; font-size:.72rem; font-weight:600; margin-top:3px; line-height:1.2; }
#asm-autosave-state.is-incomplete { color:#c79a52; }

/* #1 message d'erreur non gras (2026-07-14 d) */
.asm-field-err-msg { font-weight:400; }

/* #3 Refonte Paramètres — checkboxes teal custom + layout DS */
.asm-check { display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0; position:relative; }
.asm-check > input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; margin:0; }
.asm-check-box { flex-shrink:0; width:20px; height:20px; border:2px solid #cfd8e3; border-radius: var(--r-lg, 10px); background:#fff; position:relative; transition:background .15s, border-color .15s; margin-top:1px; }
.asm-check > input:checked + .asm-check-box { background:#0d9488; border-color:#0d9488; }
.asm-check > input:checked + .asm-check-box::after { content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.asm-check > input:disabled + .asm-check-box { opacity:.5; }
.asm-check-text { color:#5a6b82; line-height:1.4; }
.asm-check-text .asm-option-ic { color:#0d9488; margin-right:8px; }
.asm-option-box { display:inline-flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border:1px solid #e6ebf1; border-radius: var(--r-lg, 10px); width:calc(100% - 40px); }
.asm-param-mb { margin-bottom:18px; }
.asm-param-field { display:flex; align-items:flex-start; gap:18px; margin-bottom:16px; }
.asm-param-field:last-child { margin-bottom:0; }
.asm-param-lbl { min-width:130px; font-weight:600; color:#1b2a4a; padding-top:7px; margin:0; }
.asm-param-ctrl { display:flex; flex-direction:column; }
.asm-param-strictend { margin:6px 0 18px; padding:12px 16px; background:#f6f8fb; border:1px solid #eef2f6; border-radius: var(--r-md, 6px); }
.asm-reminders { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; padding-top:6px; }
.asm-reminder { display:inline-flex; align-items:center; gap:8px; }
.asm-reminder input[type=number] { width:62px; height:36px; text-align:center; }
.asm-reminder-txt { color:#5a6b82; }
/* Refonte Paramètres v2 (2026-07-14 e) — interrupteurs teal + structure DS */
.asm-toggle-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 20px; margin-bottom:18px; margin-right:0; background:#fff; border:1px solid #e6ebf1; border-radius: var(--r-md, 6px); }
.asm-toggle-card-main { display:flex; align-items:center; gap:14px; }
.asm-toggle-card-ic { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius: var(--r-md, 6px); background:#eef7f9; color:#0d9488; font-size:16px; flex-shrink:0; }
.asm-toggle-card-label { font-weight:600; color:#1b2a4a; }
.asm-param-divider { height:1px; background:#eef2f6; margin:16px 0; }
.asm-param-field-top { align-items:flex-start; }
.asm-param-date input, .asm-param-date .datetime-picker { max-width:190px; }
.asm-switch-row { display:flex; align-items:flex-start; gap:14px; }
.asm-switch-row-text { color:#5a6b82; line-height:1.45; }
.asm-reminders { padding-top:2px; }
.asm-reminder-chip { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; background:#f6f8fb; border:1px solid #eef2f6; border-radius: var(--r-full, 999px); }
.asm-reminder-chip input[type=number] { width:52px; height:32px; text-align:center; border-radius: var(--r-md, 6px); }
.asm-switch-sm .asm-switch-track { width:34px; height:19px; }
.asm-switch-sm .asm-switch-thumb { width:15px; height:15px; }
.asm-switch-sm input:checked + .asm-switch-track .asm-switch-thumb { transform:translateX(15px); }
/* Correctifs Paramètres v3 (2026-07-14 f) */
/* #1 message d'erreur non gras (forcé) */
.asm-field-err-msg { font-weight:400 !important; }

/* Interrupteur teal à partir d'une case native rendue par form_widget (.asm-switchbox) */
.asm-switchbox .form-check { display:inline-flex; align-items:center; gap:12px; margin:0; padding:0 !important; min-height:0; }
.asm-switchbox .form-check-label { margin:0 !important; color:#5a6b82; line-height:1.4; }
.asm-switchbox .form-check-label:empty { display:none; }
.asm-switchbox .form-check-input { -webkit-appearance:none !important; appearance:none !important; position:relative !important; float:none !important; margin:0 !important; width:42px !important; height:22px !important; min-width:42px; border-radius: var(--r-full, 999px)!important; background:#cfd8e3 !important; background-image:none !important; border:none !important; cursor:pointer; flex:0 0 auto; transition:background .15s; }
.asm-switchbox .form-check-input::before { content:none !important; display:none !important; }
.asm-switchbox .form-check-input::after { content:'' !important; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
.asm-switchbox .form-check-input:checked { background:#0d9488 !important; }
.asm-switchbox .form-check-input:checked::after { transform:translateX(20px); }
.asm-switchbox .form-check-input:disabled { opacity:.5; cursor:not-allowed; }

/* Carte bascule (externalOnly) : icône + interrupteur/label */
.asm-toggle-card { display:flex; align-items:center; gap:14px; justify-content:flex-start; }
/* strictEnd : interrupteur en haut, texte long à droite */
.asm-strictend .form-check { align-items:flex-start; }
.asm-strictend .form-check-input { margin-top:1px !important; }
/* Rappels : interrupteur + nombre + texte alignés */
.asm-reminder-chip { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; }
.asm-reminder-chip .form-check { gap:0; }
.asm-reminder-chip input[type=number] { width:52px; height:32px; text-align:center; border-radius: var(--r-md, 6px); }
/* Correctifs Paramètres v4 (2026-07-14 g) */
/* Texte d'aide strictEnd : teal, non gras */
.asm-switch-row-text { font-weight:400; }
.asm-switch-row-text .text-info, .asm-switch-row-text .font-italic { color:#0d9488 !important; font-weight:400 !important; }

/* « Pas d'évaluateurs internes » intégré dans la carte fournisseurs */
.asm-inline-toggle { display:flex; align-items:center; gap:14px; margin-bottom:2px; }
.asm-inline-toggle-text { color:#1b2a4a; font-weight:600; }
.asm-inline-toggle-ic { color:#0d9488; margin-right:8px; }

/* Border-radius 2px : boutons d'actions + encadrés (DS) */
.asm-param-card, .asm-toggle-card, .asm-callout, .asm-option-box, .asm-send-summary, .asm-sent-banner, .asm-reminder-chip, .asm-state { border-radius: var(--r-lg, 10px)!important; }
.asm-ds .btn, .mya-ds .btn, .asm-ds .ds-btn-primary, .asm-ds .ds-btn-ghost, .asm-ds .ds-btn-danger,
.ds-confirm-content .ds-btn-primary, .ds-confirm-content .ds-btn-ghost { border-radius: var(--r-md, 6px) !important; }
/* Correctifs Paramètres v5 (2026-07-14 h) — alignement interrupteurs + strictEnd */
.asm-switch { display:inline-flex; align-items:center; line-height:0; }
.asm-reminder-chip { display:inline-flex; align-items:center; }
.asm-reminder-chip > * { align-self:center; }
.asm-reminder-chip input[type=number] { margin:0; }
.asm-inline-toggle { align-items:center; }
.asm-inline-toggle .asm-switch { align-self:center; }
.asm-switch-row { align-items:flex-start; }
.asm-switch-row .asm-switch { margin-top:1px; }
.asm-switch-row-label { color:#2D3E50; font-weight:600; }
.asm-strictend-hint { color:#0d9488; font-size:.85rem; font-style:italic; margin-top:3px; }
/* Rappels : alignement + ajouter/retirer (2026-07-14 i) */
.asm-reminder-field { align-items:center; }
.asm-reminder-field .asm-param-lbl { padding-top:0; }
.asm-reminders { align-items:center; }
.asm-reminder-remove { color:#9aa5b1; font-size:.85rem; margin-left:4px; line-height:1; }
.asm-reminder-remove:hover { color:#d04545; text-decoration:none; }
.asm-reminder-add { display:inline-flex; align-items:center; gap:6px; color:#0d9488; font-weight:600; font-size:.85rem; padding:6px 4px; white-space:nowrap; }
.asm-reminder-add:hover { color:#0b7d73; text-decoration:none; }
/* Encadré Évaluateurs — bascules globales (2026-07-14 j) */
.asm-eval-toggle { display:flex; align-items:flex-start; gap:14px; padding:11px 0; }
.asm-eval-toggle + .asm-eval-toggle { border-top:1px solid #eef2f6; }
.asm-eval-toggle .asm-switch { margin-top:1px; }
.asm-eval-toggle-label { color:#2D3E50; font-weight:600; }
.asm-eval-toggle-hint { color:#0d9488; font-size:.85rem; font-style:italic; margin-top:2px; }
/* Croix de suppression fournisseur, collée au nom (2026-07-14 k) */
.asm-supplier-x { color:#9aa5b1; margin-left:10px; font-size:.9rem; line-height:1; }
.asm-supplier-x:hover { color:#d04545; text-decoration:none; }
/* Section Paramètres : titres façon Critères, sans encadré (2026-07-14 l) */
.asm-param-card { background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; margin:0 0 30px 0 !important; }
.asm-param-card-title { display:flex; align-items:center; gap:8px; padding:0 0 9px; margin:8px 0 18px; border-bottom:1px solid rgba(45,62,80,0.10); font-size:.95rem; font-weight:600; color:#2D3E50; }
.asm-param-card-title i { color:#0d9488; }

/* Champs empilés (label au-dessus) — regroupement Informations générales */
.asm-field { margin-bottom:16px; max-width:640px; }
.asm-field-label { display:block; font-weight:600; color:#5a6b82; margin-bottom:5px; }

/* Critères : poubelles visibles au survol de la ligne uniquement */
.asm-ds .delete-assessment-category-criteria-button { opacity:0; transition:opacity .15s; color:#9aa5b1; }
.asm-ds .assessment-category-criteria-row:hover .delete-assessment-category-criteria-button,
.asm-ds .assessment-category-row:hover .delete-assessment-category-criteria-button { opacity:.55; }
.asm-ds .delete-assessment-category-criteria-button:hover { opacity:1; color:#d04545; }

/* Boutons « Ajouter thème/critère » en teal pastel */
.asm-ds .add_element_link { background:#eafaf7 !important; border:1px solid #99e0d6 !important; color:#0d9488 !important; }
.asm-ds .add_element_link:hover { background:#d5f3ee !important; border-color:#0d9488 !important; color:#0b7d73 !important; }
/* Délai gracieux (2026-07-14 m) */
.asm-grace-field { display:inline-flex; align-items:center; gap:8px; margin:6px 0; }
.asm-grace-field input[type=number] { width:64px; height:34px; text-align:center; }
.asm-grace-hint { color:#0d9488; font-size:.85rem; font-style:italic; margin-top:3px; }
/* Fournisseurs à évaluer en tags teal clair (2026-07-14 n) */
.asm-suppliers-list { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 16px; }
.asm-supplier-row { display:inline-flex !important; align-items:center; gap:0 !important; padding:5px 12px !important; background:#eafaf7; border:1px solid #b9e6df !important; border-radius:2px; }
.asm-supplier-row:last-child { border-bottom:1px solid #b9e6df !important; }
.asm-supplier-name { flex:none !important; font-weight:600 !important; color:#0b7d73 !important; font-size:.88rem; }
.asm-supplier-x { color:#5bbdb0; margin-left:9px; }
.asm-supplier-x:hover { color:#d04545; }
/* Spinner de feedback sur boutons d'action (2026-07-14 o) */
.asm-btn-spin { margin-right:8px; }
.asm-addsupplier-spin { color:#0d9488; margin-left:12px; align-self:center; }
/* Questionnaire LECTURE SEULE (modele non modifiable) — calque FIDELE de la version editable : memes colonnes,
   valeurs rendues en saisies desactivees (2026-07-14 d) */
.asm-ds .asm-ro-input { min-height:34px; padding:6px 10px; background:#f6f8fa; border:1px solid #e1e6ec; border-radius: var(--r-md, 6px); color:#1b2a4a; font-size:.8rem; line-height:1.35; }
.asm-ds .asm-ro-input-area { min-height:64px; white-space:pre-wrap; }
.asm-ds .asm-ro-empty { color:#9aa5b1; }
.asm-ds .asm-ro-grid { font-size:.8rem; }
.asm-ds .asm-ro-grid .assessment-category-criteria-row { align-items:flex-start; }
/* Ligne de note dans un callout (ex. « Questionnaire non modifiable ») — teal italique non gras */
.asm-ds .asm-callout-note { margin-top:5px; color:#0d9488; font-style:italic; font-weight:400; }
/* Contexte breadcrumb (RFx : « Offre N ») + sous-titre carte Offres évaluées (2026-07-14 e) */
.asm-ds .asm-bc-context { color:#0d9488; font-weight:600; }
.asm-ds .asm-param-card-sub { margin:-4px 0 12px; color:#6b7683; font-size:.85rem; }
/* Contexte RFx sur la page de reponse (token + in-app) : quel appel d'offres, quel round (2026-07-14 k) */
.mya-answer-ctx { display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 18px; padding:12px 16px; background:#f6f8fb; border:1px solid #e6ebf1; border-radius: var(--r-md, 6px); }
.mya-answer-ctx-item { display:flex; flex-direction:column; }
.mya-answer-ctx-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; color:#8a97a8; }
.mya-answer-ctx-val { font-weight:700; color:#1b2a4a; }
/* ── Barre d'actions du round (sticky bas) ─────────────────────────────────────────────
   Fond teal clair pour qu'elle se lise comme une zone d'ACTIONS et non comme un pied de page.
   SCOPE OBLIGATOIRE sur .rfx-round-toolbar : #edit-item-toolbar est utilise par ~125 templates. */
.rfx-round-toolbar { background:#f2fbfa; border-top-color:#b9e6df !important; }
.rfx-toolbar-nav { align-items:center; gap:10px; }
.rfx-toolbar-nav .nav-item { flex:0 1 auto; }
/* Pastille evaluation : carte blanche SANS bordure — la barre teal fait deja le cadre, et empiler
   barre > pastille > pill de statut faisait 3 niveaux d'encadres imbriques. */
.rfx-asm-chip { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border:none; border-radius: var(--r-sm, 3px); background:#fff; text-decoration:none; white-space:nowrap; box-shadow:0 1px 2px rgba(45,62,80,.10); transition:box-shadow .15s; }
.rfx-asm-chip:hover { background:#fff; text-decoration:none; box-shadow:0 2px 8px rgba(13,148,136,.28); }
.rfx-asm-chip:focus { outline:none; }
.rfx-asm-chip:focus-visible { outline:2px solid #0d9488; outline-offset:2px; }
.rfx-asm-chip-ic { color:#0d9488; font-size:.85rem; }
.rfx-asm-chip-label { font-size:.82rem; font-weight:600; color:#2D3E50; }
/* Round evalue : rappel du round auquel se rapporte l'etat affiche (le selecteur du haut permet d'en changer) */
.rfx-asm-chip-sep { color:#c7d0da; }
.rfx-asm-chip-round { font-size:.82rem; font-weight:700; color:#0d9488; }
.rfx-asm-btn-round { font-weight:400; opacity:.85; }
/* Statut : plus d'encadre, simple texte colore (la couleur porte deja l'information) */
.rfx-asm-chip-status { font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; font-weight:600; }
.rfx-asm-chip-pct { font-size:.82rem; font-weight:700; }
.rfx-asm-chip-date { font-size:.78rem; color:#8a97a8; }
/* Chevron : signale que la pastille est cliquable (glisse au survol) */
.rfx-asm-chip-go { color:#0d9488; font-size:.72rem; margin-left:2px; transition:transform .15s; }
.rfx-asm-chip:hover .rfx-asm-chip-go { transform:translateX(3px); }
/* Export questionnaires reloge dans la barre d'onglets du contenu (2026-07-14) */
.rfx-qual-export { padding-bottom:6px; }
.rfx-qual-export .bootstrap-select > .dropdown-toggle { font-size: .82rem; }

/* Note finale ponderee de l'evaluation des offres, dans les cellules Round de l'onglet Pilotage (2026-07-14) */
.rfx-asm-note { display:inline-flex; align-items:center; gap:5px; margin-top:3px; padding:2px 8px; border-radius: var(--r-lg, 10px); background:#eafaf7; color:#0b7d73 !important; text-decoration:none; font-size:.8rem; line-height:1.3; transition:background .12s; }
.rfx-asm-note:hover { background:#d5f3ee; color:#0b7d73 !important; text-decoration:none; }
.rfx-asm-note:focus { outline:none; }
.rfx-asm-note:focus-visible { outline:2px solid #0d9488; outline-offset:2px; }
.rfx-asm-note-val { font-weight:700; }
.rfx-asm-note-max { opacity:.65; font-size:.72rem; }

/* ── Card Evaluations du Pilotage Contrat (chantier « Evaluations unifiees » Phase 2, 2026-07-15).
   Un contrat porte PLUSIEURS evaluations : la card les liste (calque de la card Evaluations du Pilotage
   Entreprises, .spl-pilo-eval-*). Prefixe ctr-* : pas de collision avec le module Entreprises. */
.ctr-pilo-eval-row { padding: 7px 4px 7px 6px; border-bottom: 1px solid #f3f4f6; }
.ctr-pilo-eval-row:last-child { border-bottom: none; }
.ctr-pilo-eval-row.is-clickable { cursor: pointer; }
.ctr-pilo-eval-row.is-clickable:hover { background: #f9fafb; }
.ctr-pilo-eval-row.is-clickable:hover .ctr-pilo-eval-name { color: #0d9488; }
.ctr-pilo-eval-name { font-size: 0.79rem; font-weight: 400; color: #415873; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-pilo-eval-meta { font-size: 0.72rem; color: #8fa1b3; white-space: nowrap; flex-shrink: 0; }
.ctr-pilo-eval-note { font-size: 0.75rem; font-weight: 600; color: #0d9488; white-space: nowrap; flex-shrink: 0; }
.ctr-pilo-eval-status { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--r-sm, 3px); font-size: 0.66rem; font-weight: 400; white-space: nowrap; flex-shrink: 0; }

/* =============================================================================
   Page token « Validation des enjeux / de la performance achats »  (prefixe pcv-*)
   Template : frontend/project/costs_validation_request.html.twig (route publique
   project_costs_validation_request). Portee : cette page seule (scope .pcv-ds).

   Coquille plein ecran calquee sur l'autre page token de l'app (.mya-ds .mya-answer-ext) :
   header DS inline, zone scrollable, barre d'actions sticky. Les cards de la fiche dossier
   reutilisent les classes .ctx-info-card / .ctx-icon-box de l'onglet Contexte (globales),
   ce qui aligne le rendu des champs sans dupliquer une regle.
   ============================================================================= */
.pcv-ds .pcv-page { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
/* Le <form> est le conteneur flex quand la demande est repondable (commentaire scrollable +
   boutons sticky doivent rester dans le meme formulaire) ; sinon .container-scrollable est
   enfant direct de .pcv-page. Les deux cas sont couverts. */
.pcv-ds .pcv-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pcv-ds .container-scrollable { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }

/* -- Header -- */
.pcv-ds .pcv-header { border-bottom: 1px solid #e2e8f0; }
.pcv-ds .pcv-header-titles { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pcv-ds .pcv-header-logo { flex-shrink: 0; }
.pcv-ds .pcv-header-prefix { font-size: 0.78rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.pcv-ds .pcv-header-sep { color: #cbd5e1; }
.pcv-ds .pcv-req-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 0.78rem; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--r-sm, 3px); padding: 4px 10px; }

/* -- Contenu -- */
.pcv-ds .pcv-container { padding: 24px 40px 40px; }
.pcv-ds .pcv-lead { margin-bottom: 8px; font-size: 0.88rem; color: #2D3E50; line-height: 1.6; }
.pcv-ds .pcv-lead p { margin: 0 0 6px; }
.pcv-ds .pcv-lead p:last-child { margin-bottom: 0; }
.pcv-ds .pcv-lead-howto { color: #415873; }
.pcv-ds .pcv-lead-contact { font-size: 0.82rem; color: #64748b; }

/* -- Titre de section -- */
.pcv-ds .pcv-section-title { font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.06em; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }

/* -- Identite du dossier (pastille des initiales du prescripteur retiree le 2026-07-16) -- */
.pcv-ds .pcv-project-id { margin-bottom: 14px; }
.pcv-ds .pcv-project-name { font-size: 1.02rem; font-weight: 600; color: #2D3E50; }
.pcv-ds .pcv-project-meta { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.pcv-ds .pcv-project-meta a { color: #0d9488; }
.pcv-ds .pcv-project-meta a:hover { color: #0b7f75; }
.pcv-ds .pcv-project-dept { color: #8fa1b3; }
.pcv-ds .pcv-lead-link { color: #0d9488; font-weight: 500; }
.pcv-ds .pcv-lead-link:hover { color: #0b7f75; }

/* -- Etat courant des 2 workflows (costs_header.html.twig) --
   La pastille reprend les couleurs deja definies dans Project::$costChallengeStatusesColors /
   $costResultStatusesColors (jusqu'ici jamais exposees dans un template). */
.pcv-ds .pcv-status-card { background: #f8fafb; border: 1px solid #e6ebf1; border-radius: var(--r-sm, 3px); padding: 12px 16px; margin-bottom: 16px; }
.pcv-ds .pcv-status-title { font-size: 0.70rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.pcv-ds .pcv-status-line { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: #2D3E50; line-height: 1.9; }
.pcv-ds .pcv-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); }

/* -- Historique des demandes (classes .fin-req-* globales, reprises de la vue acheteur) -- */
.pcv-ds .pcv-history { margin-bottom: 16px; padding: 0 16px 4px; background: #fff; border: 1px solid #e6ebf1; border-radius: var(--r-md, 6px); }
.pcv-ds .pcv-history .fin-req-title { margin-top: 12px; }
.pcv-ds .pcv-history-cancelled { color: #b91c1c; font-style: italic; }

/* -- Alertes (demande deja traitee / confirmation) -- */
.pcv-ds .pcv-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg, 10px); font-size: 0.84rem; line-height: 1.5; margin-bottom: 20px; }
.pcv-ds .pcv-alert i { margin-top: 2px; flex-shrink: 0; }
.pcv-ds .pcv-alert-info { background: #f1f5f9; border: 1px solid #e2e8f0; color: #415873; }
.pcv-ds .pcv-alert-info i { color: #64748b; }
.pcv-ds .pcv-alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.pcv-ds .pcv-alert-success i { color: #059669; }

/* -- Barre sticky : commentaire + actions + marque (a droite) --
   Toute la reponse du valideur tient dans la barre : le commentaire est extensible (flex:1),
   les actions et la marque restent a taille fixe. `resize:none` : un textarea redimensionnable
   pousserait la hauteur de la barre et casserait le flex de .pcv-page. */
.pcv-ds .pcv-footer { display: flex; align-items: center; gap: 20px; flex-shrink: 0; background: #f8fafb; border-top: 1px solid #e2e8f0; padding: 12px 40px; }
.pcv-ds .pcv-footer-answer { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.pcv-ds .pcv-footer-answer-icon { position: absolute; left: 11px; color: #a8b4c0; font-size: 0.82rem; pointer-events: none; }
.pcv-ds .pcv-comment { width: 100%; border: 1px solid #d1d5db; border-radius: var(--r-md, 6px); padding: 7px 10px 7px 32px; font-size: 0.82rem; line-height: 1.5; color: #2D3E50; background: #fff; resize: none; overflow-y: auto; max-height: 76px; }
.pcv-ds .pcv-comment::placeholder { color: #a8b4c0; }
.pcv-ds .pcv-comment:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
.pcv-ds .pcv-footer-actions { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.pcv-ds .pcv-footer-brand { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: #64748b; padding-left: 20px; border-left: 1px solid #e2e8f0; }
.pcv-ds .pcv-footer-brand .rfx-home-footer-brand { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; letter-spacing: 0.02em; font-size: 0.95rem; }

/* -- Boutons Je valide / Je rejette : PARTAGES par les 2 surfaces de reponse --
   Emis par ProjectCostsValidationRequestType, donc rendus a l'identique sur la page token
   (.pcv-ds, barre sticky) ET sur « Couts valides » (page in-app du valideur connecte,
   .pc-valform-actions). Volontairement NON scopes sous .pcv-ds : ce scope est absent de
   costs_validated.html.twig, et des classes sans regle y laisseraient des boutons nus.
   Le form theme bootstrap_4 ajoute `btn` : app-ds.css se chargeant APRES bootstrap.min.css,
   ces regles l'emportent a specificite egale. Prefixe pcv- unique, aucune collision. */
.pcv-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 500; line-height: 1.5; padding: 7px 22px; border-radius: var(--r-md, 6px); border: 1px solid; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.pcv-btn:focus { outline: none; }
.pcv-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.pcv-btn-agree { background: #0d9488; border-color: #0d9488; color: #fff; }
.pcv-btn-agree:hover { background: #0b7f75; border-color: #0b7f75; color: #fff; }
.pcv-btn-disagree { background: #fff; border-color: #d1d5db; color: #64748b; }
.pcv-btn-disagree:hover { border-color: #ef4444; color: #ef4444; background: #fff; }

/* Le tableau de couts (costs_content.html.twig, .fin-card) n'est plus enveloppe dans
   #project-costs-content : ses 40px lateraux sont desormais fournis par .pcv-container.
   Les .fin-card sont des regles globales, leur rendu est inchange. */
.pcv-ds .pcv-container .fin-card:last-of-type { margin-bottom: 0; }

/* ── Card Documents (costs_content.html.twig) ──────────────────────────────────
   Cette table reutilise .pc-costs-table, gabarit calibre pour les tableaux FINANCIERS :
   1re colonne = libelle de ligne fige a 140px (`th:first-child`), autres colonnes numeriques
   centrees et attenuees. Applique aux documents, il ecrasait le NOM du document a 140px (retour
   a la ligne) pendant que Type/Taille/actions se partageaient tout le reste a egalite.
   .pc-docs-table recalibre les largeurs ; l'entete est retire cote template (colonnes explicites),
   ce qui neutralise au passage la regle `th:first-child { width:140px }` (plus aucun <th>).
   Regles volontairement non scopees a .pcv-ds : la card n'est rendue QUE par la page token
   (costs_validated passe skipDatesFiles:true et rend ses documents autrement) — verifie 2026-07-16. */
.pc-costs-table.pc-docs-table td:nth-child(1) { width: 46%; }
.pc-costs-table.pc-docs-table td:nth-child(2) { width: 34%; }
.pc-costs-table.pc-docs-table td:nth-child(3) { width: 12%; text-align: right; }
.pc-costs-table.pc-docs-table td:nth-child(4) { width: 8%;  text-align: right; }
/* Le nom du document est l'information principale : il ne doit pas heriter du gris attenue
   reserve aux libelles de ligne des tableaux financiers. */
.pc-costs-table.pc-docs-table td:first-child { color: var(--fin-text-dark); font-size: 0.82rem; }
@media (max-width: 767.98px) {
    .pcv-ds .ds-page-header { padding: 8px 16px; min-height: 0; flex-wrap: wrap; }
    .pcv-ds .pcv-container { padding: 16px 16px 24px; }
    .pcv-ds .pcv-footer { padding: 10px 16px; }
    .pcv-ds .pcv-footer-brand { display: none; }
}

/* ===== Chantier jalon-as-task etape C-bis - ecran Planning AO : liste jalons autosave ===== */
.rfx-ds .rfx-ms-head,
.rfx-ds .rfx-ms-row { display: flex; align-items: center; gap: 12px; }
.rfx-ds .rfx-ms-head,
.rfx-ds .rfx-ms-list { max-width: 680px; }
.rfx-ds .rfx-ms-head { padding: 0 8px 6px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.rfx-ds .rfx-ms-list { display: flex; flex-direction: column; gap: 2px; }
.rfx-ds .rfx-ms-row { padding: 4px 8px; border-radius: 6px; transition: background 0.12s; }
.rfx-ds .rfx-ms-row:hover { background: #f8fafc; }
.rfx-ds .rfx-ms-communicate-cell { flex: 0 0 56px; display: flex; justify-content: flex-start; padding-left: 24px; }
.rfx-ds .rfx-ms-name-cell { flex: 1 1 auto; min-width: 0; }
.rfx-ds .rfx-ms-date-cell { flex: 0 0 140px; }
.rfx-ds .rfx-ms-status-cell { flex: 0 0 20px; text-align: center; }
.rfx-ds .rfx-ms-delete-cell { flex: 0 0 28px; text-align: center; }
.rfx-ds .rfx-ms-row .form-control { height: 34px; font-size: 0.85rem; }
.rfx-ds .rfx-ms-communicate { width: 16px; height: 16px; cursor: pointer; }
.rfx-ds .rfx-ms-status { display: none; color: #16a34a; font-weight: 700; }
.rfx-ds .rfx-ms-saving { opacity: 0.6; }
.rfx-ds .rfx-ms-invalid .rfx-ms-name,
.rfx-ds .rfx-ms-invalid .rfx-ms-date { border-color: #ef4444; }
.rfx-ds .rfx-ms-delete { color: #94a3b8 !important; opacity: 0; transition: opacity 0.12s, color 0.12s; }
.rfx-ds .rfx-ms-row:hover .rfx-ms-delete { opacity: 1; }
.rfx-ds .rfx-ms-delete:hover { color: #0d9488 !important; }
.rfx-ds .rfx-ms-delete:focus { outline: none; }
.rfx-ds .rfx-ms-legacy-name { color: #64748b; font-size: 0.85rem; }
.rfx-ds .rfx-ms-lock { font-size: 0.72rem; color: #cbd5e1; margin-right: 2px; }
.rfx-ds .rfx-ms-legacy-date { color: #64748b; font-size: 0.85rem; }
.rfx-ds .rfx-ms-empty { padding: 12px 8px; color: #94a3b8; font-style: italic; }
.rfx-ms-ov-dialog { max-width: 460px; }
.rfx-ms-ov-footer { flex-direction: column; align-items: stretch; gap: 8px; }
.rfx-ms-ov-text { font-size: 0.9rem; line-height: 1.5; }
.rfx-ds .rfx-ct-list { max-width: none; }
.rfx-ds .rfx-ct-row { font-size: 0.85rem; }
.rfx-ds .rfx-ct-name-cell { flex: 1 1 160px; min-width: 0; font-weight: 500; color: #334155; }
.rfx-ds .rfx-ct-cat-cell { flex: 0 0 150px; color: #64748b; }
.rfx-ds .rfx-ct-email-cell { flex: 1 1 160px; min-width: 0; }
.rfx-ds .rfx-ct-phone-cell { flex: 0 0 110px; color: #64748b; }
.rfx-ds .rfx-ct-phone-cell .form-control { height: 30px; font-size: 0.8rem; }
.rfx-ds .rfx-ct-owner { background: #f8fafc; }
.rfx-ds .rfx-ct-owner .rfx-ct-name-cell { color: #64748b; }
.rfx-ds .rfx-ct-owner .rfx-ct-cat-cell,
.rfx-ds .rfx-ct-owner .rfx-ct-phone-cell { color: #94a3b8; }
.rfx-ds .rfx-ms-hint { padding: 10px 14px; margin-bottom: 16px; background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-lg, 10px); color: #0b7d72; font-size: 0.85rem; }
.rfx-ds .rfx-ms-hint-bar { color: #0d9488; font-size: 0.82rem; line-height: 1.35; background: #e6f7f5; padding: 6px 12px; border-radius: var(--r-lg, 10px); }
.rfx-ds .rfp-notify-done { font-weight: 600; color: #0d9488; }
.rfx-ds .rfx-ov-owner-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); color: #64748b; }
.rfx-ds .rfx-ov-new-badge { display: inline-block; border: 1px solid #dc3545; color: #dc3545; border-radius: var(--r-full, 999px); padding: 1px 10px; font-size: 0.72rem; line-height: 1.5; white-space: nowrap; vertical-align: middle; }

/* Graphe Priorisation des dossiers (onglet Dossiers Reporting) : hauteur fixe pour resserrer
   les niveaux de priorite (Chart.js maintainAspectRatio:false remplit ce conteneur). 2026-07-18. */
.rpt-prio-bubble-wrap { position: relative; height: 260px; }
/* Sous-texte d'aide du bloc Priorisation des dossiers : teal, italique, petite police. 2026-07-18. */
.rpt-prio-bubble-hint { color: #0d9488; font-style: italic; font-size: 0.72rem; margin-top: 2px; }
/* Legende du graphe Priorisation des dossiers : pastille = avancement, contour epais = appel d'offres. 2026-07-18. */
.rpt-prio-bubble-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 12px; margin-bottom: 12px; }
.rpt-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #475569; }
.rpt-legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.rpt-legend-dot-ao { background: #cbd5e1; border: 2.5px solid #1e293b; width: 13px; height: 13px; }
/* Item de legende 'Avec appel d'offres' : decale a droite + separateur vertical vs avancement. 2026-07-18. */
.rpt-legend-item-ao { margin-left: 10px; padding-left: 20px; border-left: 1px solid rgba(0,0,0,0.12); }

/* ==== Wizard drawer Entreprise (2026-07-18) - etape 2 : panneaux empiles (reutilise les tiroirs) ====
   Reutilise les bottom-sheets existants (comp/qualif/validation) comme panneaux INLINE, sans deplacer de DOM.
   En mode wizard, le drawer devient un formulaire a panneaux empiles, TOUT VISIBLE (le masquage etape par
   etape + la navigation Precedent/Suivant = etape 3). Neutralise l'overlay des tiroirs + masque barres/voile. */
.drawer-supplier .drawer-body.drw-spl-wizard-mode { display: block !important; overflow-y: auto !important; overflow-x: hidden; padding: 14px 16px 0 !important; position: static !important; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode > .drw-spl-body { flex: none; min-height: 0; overflow: visible; padding: 0; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheets { flex: none; background: transparent; border-top: none; box-shadow: none; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet-bars,
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet-dim { display: none !important; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet {
    position: static; transform: none; visibility: visible; width: auto; height: auto; max-height: none;
    left: auto; right: auto; top: auto; z-index: auto; box-shadow: none; border-radius: 0; background: transparent;
    border-top: 1px solid rgba(45,62,80,0.12); margin-top: 16px; padding-top: 6px;
}
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet-body { flex: none; overflow: visible; max-height: none; padding: 10px 0 0; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet-header { background: transparent; border-bottom: none; height: auto; padding: 0; cursor: default; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet-close { display: none; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-wizard-step[data-wizard-step="identity"] { margin-top: 0; }
/* ==== Wizard drawer Entreprise (2026-07-18) - etape 3 : navigation (un panneau a la fois) ====
   Actif uniquement en flux pre-validation (.drw-spl-wizard-nav sur .drawer-body). Un seul panneau visible
   (.is-active), pilote par le JS (drwSplWizardGoTo). En edition normale (pas de .drw-spl-wizard-nav), tous
   les panneaux restent visibles (etape 2). */
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-wizard-panel { display: none; }
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-wizard-panel.is-active { display: block; }
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet.drw-spl-wizard-panel.is-active { display: flex; }
/* Panneau solo : pas de separateur haut (le border-top/margin-top de l'empilage etape 2 n'a plus lieu d'etre). */
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet.drw-spl-wizard-panel { border-top: none; margin-top: 0; padding-top: 0; }
/* Stepper : etape deja visitee = cliquable (retour arriere). */
.drw-spl-step.is-visited { cursor: pointer; }
.drw-spl-step.is-visited:hover { color: #0d9488; text-decoration: underline; }
.drw-spl-step.is-visited .drw-spl-step-num { background: #0d9488; color: #fff; }
/* Boutons de navigation du footer. */
.drawer-supplier .drw-spl-prev-btn { background: #fff; border: 1px solid #cbd5e1; color: #475569; }
.drawer-supplier .drw-spl-prev-btn:hover, .drawer-supplier .drw-spl-prev-btn:focus { background: #f1f5f9; color: #2D3E50; outline: none; }
.drawer-supplier .drw-spl-name-input.is-invalid { border-color: #dc3545; }
/* ==== Wizard drawer Entreprise (2026-07-18) - retours UX etape 3 (points 1,2,4,6,8) ==== */
/* Point 2 : zone stepper STICKY en haut du drawer (le contenu scrolle dessous, scrollbar apres). */
.drawer-supplier .drawer-body.drw-spl-wizard-mode.drw-spl-wizard-nav { padding-top: 0 !important; }
.drawer-supplier .drw-spl-wizard-head { position: sticky; top: 0; z-index: 6; background: #fff; margin: 0 -16px 12px; padding: 12px 16px 8px; border-bottom: 1px solid rgba(45,62,80,0.12); }
/* Point 1 : stepper compact sur une seule ligne (scroll horizontal discret en secours si tres long, ex. DE). */
.drawer-supplier .drw-spl-wizard-head .drw-spl-stepper { margin: 0; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.drawer-supplier .drw-spl-wizard-head .drw-spl-stepper::-webkit-scrollbar { height: 0; }
.drawer-supplier .drw-spl-wizard-head .drw-spl-step { font-size: .74rem; white-space: nowrap; flex: 0 0 auto; }
.drawer-supplier .drw-spl-wizard-head .drw-spl-step-num { width: 17px; height: 17px; font-size: .66rem; }
.drawer-supplier .drw-spl-wizard-head .drw-spl-step-sep { flex: 0 0 10px; }
/* Point 6 : etape ACTIVE = apparence uniforme (pastille teal), quel que soit is-complete / is-visited. */
.drawer-supplier .drw-spl-step.is-active { color: #2D3E50; font-weight: 600; }
.drawer-supplier .drw-spl-step.is-active .drw-spl-step-num { background: #0d9488 !important; color: #fff !important; }
/* Point 8 : ligne statut obligatoire / facultatif de l'etape courante. */
.drawer-supplier .drw-spl-step-status { margin-top: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.drawer-supplier .drw-spl-step-status.is-required { color: #b45309; }
.drawer-supplier .drw-spl-step-status.is-optional { color: #64748b; font-weight: 500; }
/* Point 4 : « Suivant » bloque tant que le nom manque = grise + not-allowed (tooltip Bootstrap via title). */
.drawer-supplier .btn.drw-spl-gate-disabled { opacity: .55; cursor: not-allowed; }
/* ==== Wizard drawer Entreprise (2026-07-18) - retours UX (footer + coherence stepper) ==== */
/* Point 1 : footer sur toute la largeur, PAS de retour a la ligne (Precedent a gauche, le reste a droite). */
.drawer-supplier .drawer-footer .drw-spl-submit-wrap { max-width: 100%; width: 100%; align-items: stretch; }
.drawer-supplier .drawer-footer .drw-spl-submit-btns { width: 100%; justify-content: flex-end; }
.drawer-supplier .drawer-footer .drw-spl-submit-btns .btn { white-space: nowrap; }
.drawer-supplier .drawer-footer .drw-spl-prev-btn { margin-right: auto; }
/* Point 2 : coherence stepper — la position seule pilote la couleur (passe=teal, courante=navy+pastille teal,
   futures=gris). is-complete (vert) ne pilote plus la couleur (evite une etape future "satisfaite" qui parait atteinte). */
.drawer-supplier .drw-spl-step.is-complete .drw-spl-step-num { background: #e2e8f0; color: #475569; }
.drawer-supplier .drw-spl-step.is-visited .drw-spl-step-num,
.drawer-supplier .drw-spl-step.is-active .drw-spl-step-num { background: #0d9488 !important; color: #fff !important; }
.drawer-supplier .drw-spl-step.is-complete { color: #64748b; }
.drawer-supplier .drw-spl-step.is-visited { color: #0d9488; }
.drawer-supplier .drw-spl-step.is-active { color: #2D3E50; font-weight: 600; }
/* ==== Wizard drawer Entreprise (2026-07-18) - footer : brouillon centre ==== */
/* Precedent ancre a gauche, Suivant/Creer ancres a droite, « Enregistrer le brouillon » centre (dans le flux). */
/* Footer wizard : flux normal groupé — Précédent à gauche (margin auto), « Enregistrer le brouillon » + action
   principale à droite. Évite le chevauchement quand le libellé d'envoi est long (« Enregistrer et envoyer
   pour validation »). Le centrage en absolu du brouillon n'était pas compatible avec un bouton d'envoi large. */
.drawer-supplier .drawer-footer.drw-spl-footer-wizard .drw-spl-submit-btns { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
.drawer-supplier .drawer-footer.drw-spl-footer-wizard .drw-spl-prev-btn { margin-right: auto; }
/* Action principale d'envoi : sa propre ligne, pleine largeur (le libellé est long) → jamais de débordement.
   « Suivant » (court) reste en ligne 1 avec Précédent + brouillon. */
.drawer-supplier .drawer-footer.drw-spl-footer-wizard #drwSplSubmitBtn { flex: 1 1 100%; }
/* ==== Détails = tiroir sticky bas (2026-07-18) — le comp redevient un overlay, dispo sur l'étape Identité ==== */
.drawer-supplier .drawer-body.drw-spl-wizard-nav { position: relative; }
/* Barre sticky en bas du drawer scrollable, montrée UNIQUEMENT sur l'Identité (classe posée par le JS). */
.drawer-supplier .drw-spl-sheet-bars { display: none; flex: 0 0 auto; background: #eef2f6; border-top: 1px solid rgba(45,62,80,0.18); }
.drawer-supplier .drw-spl-sheet-bars.is-shown { display: flex; }
/* Tiroir comp : overlay qui glisse du bas vers le haut et couvre le bas du drawer. */
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet[data-sheet-key="comp"] {
    position: absolute; left: 0; right: 0; bottom: var(--drw-spl-footer-h, 62px); top: var(--drw-spl-stepper-h, 120px); width: auto; max-height: none; min-height: 0;
    transform: translateY(101%); transition: transform .22s ease; visibility: hidden; overflow: hidden;
    background: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,.2); z-index: 8; margin: 0; padding: 0; border-top: none;
    display: flex; flex-direction: column; border-radius: 0;
}
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet[data-sheet-key="comp"].is-open { transform: translateY(0); visibility: visible; }
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet[data-sheet-key="comp"] .drw-spl-sheet-header { display: flex; background: rgba(13,148,136,0.06); border-bottom: 1px solid rgba(13,148,136,0.18); height: 40px; padding: 0 12px 0 16px; cursor: pointer; flex: 0 0 auto; }
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet[data-sheet-key="comp"] .drw-spl-sheet-close { display: inline-flex; }
.drawer-supplier .drawer-body.drw-spl-wizard-nav .drw-spl-sheet[data-sheet-key="comp"] .drw-spl-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; }
/* Voile derrière le tiroir ouvert + gel du scroll du drawer. */
.drawer-supplier.drw-spl-has-open-sheet .drawer-body.drw-spl-wizard-nav { overflow: hidden; }
/* top = 0 : le voile (ancré sur .drawer-supplier fixed car .drawer-body est position:static en wizard-mode)
   monte jusqu'en haut, mais le header (position:relative, z-index 9 > 7) le recouvre → il affleure PILE le
   bas du header sans liseré blanc. Même méthode que le voile Contrat. */
.drawer-supplier.drw-spl-has-open-sheet .drawer-body.drw-spl-wizard-nav .drw-spl-sheet-dim { display: block !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); opacity: 1; pointer-events: auto; z-index: 7; }
/* ==== Wizard stepper (2026-07-18) — pleine largeur + indication obligatoire/facultative sous l'étape active ==== */
/* Pleine largeur : les séparateurs s'étirent, les étapes gardent leur taille. */
.drawer-supplier .drw-spl-wizard-head .drw-spl-stepper { margin: 0; gap: 0; flex-wrap: nowrap; overflow: visible; align-items: center; }
.drawer-supplier .drw-spl-wizard-head .drw-spl-step-sep { flex: 1 1 auto; min-width: 10px; height: 1px; margin: 0 8px; }
.drawer-supplier .drw-spl-wizard-head .drw-spl-step { flex: 0 0 auto; position: relative; }
/* Réserve la hauteur de l'indication (span absolu) sous le stepper. */
.drawer-supplier .drw-spl-wizard-head { padding-bottom: 26px; }
/* Indication : sous l'étape, sur une seule ligne, visible uniquement pour l'étape active. */
.drawer-supplier .drw-spl-step .drw-spl-step-status { display: none; position: absolute; top: calc(100% + 3px); left: 0; margin: 0; white-space: nowrap; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.drawer-supplier .drw-spl-step.is-active .drw-spl-step-status { display: block; }
.drawer-supplier .drw-spl-step .drw-spl-step-status.is-required { color: #b45309; }
.drawer-supplier .drw-spl-step .drw-spl-step-status.is-optional { color: #64748b; font-weight: 500; }
/* Dernière étape : indication alignée à droite pour ne pas déborder du drawer. */
.drawer-supplier .drw-spl-stepper .drw-spl-step:last-child .drw-spl-step-status { left: auto; right: 0; }
/* ==== Détails tiroir (2026-07-18) — la barre + le footer passent AU-DESSUS de l'overlay (z-index) ==== */
.drawer-supplier .drw-spl-sheet-bars.is-shown { position: relative; z-index: 10; }
.drawer-supplier .drawer-footer.drw-spl-footer-wizard { position: relative; z-index: 10; }
/* ==== Bandeau récap wizard (2026-07-18) — dernière étape, au-dessus des boutons ==== */
.drawer-supplier .drw-spl-recap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0 0 10px; }
.drawer-supplier .drw-spl-recap-item { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 500; color: #475569; background: #f1f5f9; border-radius: var(--r-lg, 10px); padding: 3px 9px; white-space: nowrap; }
.drawer-supplier .drw-spl-recap-item.is-ok { color: #15803d; background: #ecfdf3; }
.drawer-supplier .drw-spl-recap-item.is-ok .fa-check { color: #16a34a; }
.drawer-supplier .drw-spl-recap-item.is-warn { color: #b45309; background: #fffbeb; }
/* ==== Bouton « Reprendre la création » (2026-07-18) — fiche Contexte des brouillons (Entreprise/Contrat) ==== */
.ctx-resume-btn { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 600; color: #0d9488; background: transparent; border: 1px solid rgba(13,148,136,0.45); border-radius: var(--r-sm, 3px); padding: 1px 8px; line-height: 1.7; text-decoration: none; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; }
.ctx-resume-btn:hover, .ctx-resume-btn:focus { background: rgba(13,148,136,0.08); border-color: #0d9488; color: #0f766e; text-decoration: none; outline: none; }
.ctx-resume-btn .fa-pen { font-size: .64rem; }
/* ==== Wizard drawer Contrat (2026-07-18) - etape 2 : reminders+validation en panneaux inline ====
   Seuls les tiroirs TAGUES .drw-ctr-wizard-panel (reminders, validation) passent en inline empile ;
   infocomp+documents (non tagues) restent des tiroirs overlay. Premier jet - a verifier visuellement. */
.drawer-contract .drawer-body.drw-ctr-wizard-mode { display: block !important; overflow-y: auto !important; overflow-x: hidden; position: relative; }
.drawer-contract .drawer-body.drw-ctr-wizard-mode > .drw-ctr-body { flex: none; min-height: 0; overflow: visible; }
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheets { flex: none; background: transparent; border-top: none; box-shadow: none; }
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheet.drw-ctr-wizard-panel {
    position: static; transform: none; visibility: visible; width: auto; height: auto; max-height: none;
    left: auto; right: auto; top: auto; bottom: auto; z-index: auto; box-shadow: none; background: transparent;
    border-top: 1px solid rgba(45,62,80,0.12); margin-top: 16px;
}
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheet.drw-ctr-wizard-panel .drw-ctr-sheet-body { flex: none; overflow: visible; max-height: none; }
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheet.drw-ctr-wizard-panel .drw-ctr-sheet-header { background: transparent; border-bottom: none; height: auto; cursor: default; }
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheet.drw-ctr-wizard-panel .drw-ctr-sheet-close { display: none; }
/* Barres des tiroirs devenus panneaux (reminders, validation) masquees. */
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheet-bar[data-sheet-target="reminders"],
.drawer-contract .drawer-body.drw-ctr-wizard-mode .drw-ctr-sheet-bar[data-sheet-target="validation"] { display: none; }
/* ==== Wizard drawer Contrat (2026-07-18, Option A) - panneaux inline Rappels/Validation ====
   Divs normaux dans le corps scrollable (plus d'overlay). Separateur + titre, alignes sur le padding des champs. */
.drawer-contract .drw-ctr-wizard-panel { border-top: 1px solid rgba(45,62,80,0.12); margin-top: 18px; padding: 16px 0 0; }
.drawer-contract .drw-ctr-wizard-panel-title { font-size: 0.72rem; font-weight: 600; color: #0d9488; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; }

/* ═══ Bandeau teal UNIFIE des titres de sections « ex-tiroir » (rendues inline en display, ou en panneau
   wizard / wizard-mode en edition) — harmonisation 3 modules 2026-07-19. Meme fond teal + meme police partout.
   Display : Entreprise (Infos comp.), Contrat (Infos comp./Documents/Validation), Projet (Contexte et qualif,
   passe de navy a teal). Edition : Contrat (Rappels/Validation, panneaux wizard), Entreprise (Infos comp.,
   wizard-mode inline ; :not(.drw-spl-wizard-nav) exclut la creation ou le header est deja teal). ═══ */
.drw-spl-ro-inline-title,
.drw-ctr-ro-inline > .drw-ctr-subtitle,
.drw-prj-ctx-inline-title,
.drawer-contract .drw-ctr-wizard-panel-title,
.drawer-supplier .drawer-body.drw-spl-wizard-mode:not(.drw-spl-wizard-nav) .drw-spl-sheet[data-sheet-key="comp"] .drw-spl-sheet-header-title {
    background: rgba(13,148,136,0.10);
    border: 1px solid rgba(13,148,136,0.22);
    border-radius: var(--r-md, 6px);
    padding: 8px 12px;
    margin: 18px 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* Edition Entreprise : le titre est un <span> dans un header flex → header en bloc + titre pleine largeur
   pour que le bandeau s'etale (les autres titres sont deja des <div> bloc). 2026-07-19. */
.drawer-supplier .drawer-body.drw-spl-wizard-mode:not(.drw-spl-wizard-nav) .drw-spl-sheet[data-sheet-key="comp"] .drw-spl-sheet-header { display: block; }
.drawer-supplier .drawer-body.drw-spl-wizard-mode:not(.drw-spl-wizard-nav) .drw-spl-sheet[data-sheet-key="comp"] .drw-spl-sheet-header-title { display: block; width: 100%; box-sizing: border-box; }
/* Aere entre le mode de validation et le bloc Valideurs (mb-3 Bootstrap est en !important → on surcharge). */
.drawer-contract .drw-ctr-wizard-panel .drw-ctr-validation-mode-field { margin-bottom: 26px !important; }
/* ==== Wizard drawer Contrat (2026-07-18) - navigation (etape 3) - calque entreprise ==== */
/* Panneau Identite : pas de separateur/titre (c'est le corps principal). */
.drawer-contract .drw-ctr-wizard-panel.drw-ctr-wizard-panel-identity { border-top: none; margin-top: 0; padding: 0; }
/* Navigation : un panneau visible a la fois. */
.drawer-contract .drawer-body.drw-ctr-wizard-nav .drw-ctr-wizard-panel { display: none; }
.drawer-contract .drawer-body.drw-ctr-wizard-nav .drw-ctr-wizard-panel.is-active { display: block; }
/* Stepper sticky en tete du drawer-body scrollable. */
.drawer-contract .drawer-body.drw-ctr-wizard-nav { padding-top: 0 !important; }
/* z-index 3 (et non 6) : reste au-dessus des champs qui défilent (z-index auto) mais PASSE SOUS le voile gris
   du tiroir ouvert (.drw-ctr-sheet-dim z-index 4) → le voile recouvre le stepper comme sur le drawer Entreprise.
   Les sheets contrat étant hors .drawer-body (contrairement à supplier), un z-index 6 laissait le stepper
   au-dessus du voile (non recouvert, effet « bizarre »). */
.drawer-contract .drw-ctr-wizard-head { position: sticky; top: 0; z-index: 3; background: #fff; margin: 0; padding: 12px 22px 24px; border-bottom: 1px solid rgba(45,62,80,0.12); }
/* overflow: visible (et NON overflow-x:auto, qui force overflow-y:auto → clippe le statut absolu « Étape
   obligatoire/facultative » sous chaque step). Stepper full-width : séparateurs flex → pas de scroll H. */
.drawer-contract .drw-ctr-stepper { display: flex; align-items: center; flex-wrap: nowrap; overflow: visible; }
.drawer-contract .drw-ctr-step { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: .74rem; color: #64748b; white-space: nowrap; }
.drawer-contract .drw-ctr-step-num { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: .66rem; font-weight: 600; }
.drawer-contract .drw-ctr-step-sep { flex: 1 1 auto; min-width: 10px; height: 1px; background: #cbd5e1; margin: 0 8px; }
.drawer-contract .drw-ctr-step.is-visited, .drawer-contract .drw-ctr-step.is-complete { color: #0d9488; cursor: pointer; font-weight: 600; }
.drawer-contract .drw-ctr-step.is-visited .drw-ctr-step-num, .drawer-contract .drw-ctr-step.is-active .drw-ctr-step-num { background: #0d9488 !important; color: #fff !important; }
.drawer-contract .drw-ctr-step.is-active { color: #2D3E50; font-weight: 600; }
/* Indication obligatoire/facultative sous l'etape active. */
.drawer-contract .drw-ctr-step-status { display: none; position: absolute; top: calc(100% + 3px); left: 0; white-space: nowrap; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.drawer-contract .drw-ctr-step.is-active .drw-ctr-step-status { display: block; }
.drawer-contract .drw-ctr-step-status.is-required { color: #b45309; }
.drawer-contract .drw-ctr-step-status.is-optional { color: #64748b; font-weight: 500; }
.drawer-contract .drw-ctr-stepper .drw-ctr-step:last-child .drw-ctr-step-status { left: auto; right: 0; }
/* Footer wizard : 2 lignes (Precedent a gauche, action principale pleine largeur en ligne 2). */
.drawer-contract .drawer-footer .drw-ctr-submit-btns { display: flex; flex-wrap: wrap; row-gap: 8px; gap: 8px; align-items: center; justify-content: flex-end; }
.drawer-contract .drawer-footer .drw-ctr-prev-btn { margin-right: auto; background: #fff; border: 1px solid #cbd5e1; color: #475569; }
.drawer-contract .drawer-footer .drw-ctr-prev-btn:hover, .drawer-contract .drawer-footer .drw-ctr-prev-btn:focus { background: #f1f5f9; color: #2D3E50; outline: none; }
.drawer-contract .drawer-footer #drwCtrSubmitBtn { flex: 1 1 100%; }
.drawer-contract .drawer-footer .drw-ctr-submit-btns .btn { white-space: nowrap; }
.drawer-contract .drw-ctr-name-input.is-invalid, .drawer-contract .drw-ctr-name-field.has-error input { border-color: #dc3545; }
/* ==== Wizard drawer Contrat (2026-07-18) - fixes etape 3 (rythme vertical + footer) ==== */
/* #1 - Panneau Identite : rythme vertical (flex-gap 18px) comme #main-content-edition (le wrapper avait casse le gap). */
/* Rythme vertical 18px du panneau Identite : selecteur aligne sur la regle .is-active (0,5,0) pour battre
   le display:block generique du mode nav (sinon le flex-gap ne s'applique jamais). */
.drawer-contract .drawer-body.drw-ctr-wizard-nav .drw-ctr-wizard-panel-identity.is-active { display: flex; flex-direction: column; gap: 18px; }
.drawer-contract .drawer-body.drw-ctr-wizard-nav .drw-ctr-wizard-panel-identity.is-active > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* #2 - Footer wizard : submit-wrap pleine largeur (Precedent gauche, action principale ligne 2 pleine largeur). */
.drawer-contract .drawer-footer.drw-ctr-footer-wizard .drw-ctr-submit-wrap { max-width: 100%; width: 100%; align-items: stretch; }
.drawer-contract .drawer-footer.drw-ctr-footer-wizard .drw-ctr-submit-btns { width: 100%; }
.drawer-contract .drawer-footer .drw-ctr-draft-btn { background: #fff; border: 1px solid #cbd5e1; color: #2D3E50; }
.drawer-contract .drawer-footer .drw-ctr-draft-btn:hover, .drawer-contract .drawer-footer .drw-ctr-draft-btn:focus { background: #f1f5f9; border-color: #94a3b8; color: #2D3E50; outline: none; }
/* Stepper contrat : toutes les etapes sont cliquables (nav avant/arriere) -> curseur main + soulignement au survol. */
.drawer-contract .drw-ctr-step[data-step-target] { cursor: pointer; }
.drawer-contract .drw-ctr-step[data-step-target]:hover { color: #0d9488; }
.drawer-contract .drw-ctr-step[data-step-target]:hover .drw-ctr-step-label { text-decoration: underline; }
/* ===== Wizard nav Contrat (2026-07-18) : le panneau Identite (.drw-ctr-wizard-panel-identity) enveloppe
   ce qui etait enfant direct de #main-content-edition. Tout le cluster de patches layout scopes en
   enfant direct (#main-content-edition > .row.mb-3 > ...) ne matchait plus -> 2-cols casse, etoile requise
   qui passe a la ligne, inputs desalignes. On re-applique le cluster a l'identique, path panneau insere,
   meme ordre (cascade preservee), specificite +1 classe donc gagne sur l'original. ===== */
/* base 2-cols (calque 12760-12762) */
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 { display: flex !important; gap: 8px !important; margin: 0 !important; }
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 { flex: 1 1 0 !important; max-width: none !important; padding: 0 !important; }
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > input, .drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 .form-control { width: 100% !important; }
/* input-group interne, largeur auto (calque 12880-12881) */
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 .drw-ctr-input-group .form-control,
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 .drw-ctr-input-group input { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
/* patch #5 nowrap + col-6 flex (calque 12884-12885) */
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 { flex-wrap: nowrap !important; }
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 { min-width: 0 !important; flex: 1 1 0 !important; max-width: 50% !important; }
/* patch #6 reserve hauteur label 2 lignes (calque 12889) */
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > .drw-ctr-field-label { min-height: calc(0.72rem * 1.3 * 2); line-height: 1.3; display: flex; align-items: flex-start; }
/* patch #7 col flex column + reset label + inputs colles en bas (calque 12893-12898) */
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 { display: flex; flex-direction: column; }
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > .drw-ctr-field-label { min-height: 0; display: block; align-items: initial; }
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > .input-group,
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > .drw-ctr-input-group,
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > input,
.drawer-contract .drw-ctr-body > #main-content-edition > .drw-ctr-wizard-panel-identity > .row.mb-3 > .col-6 > .form-control { margin-top: auto; }
/* flex-shrink enfants (calque 12777) + owner-inline marge negative (calque 12791) */
.drawer-contract #main-content-edition > .drw-ctr-wizard-panel-identity > * { flex-shrink: 0; }
.drawer-contract #main-content-edition > .drw-ctr-wizard-panel-identity > .drw-ctr-owner-inline { margin-top: -12px !important; }
/* Bandeau recap wizard Contrat (etape 5) - derniere etape, calque .drw-spl-recap. */
.drawer-contract .drw-ctr-recap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0 0 10px; width: 100%; }
.drawer-contract .drw-ctr-recap-item { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 500; color: #475569; background: #f1f5f9; border-radius: var(--r-lg, 10px); padding: 3px 9px; white-space: nowrap; }
.drawer-contract .drw-ctr-recap-item.is-warn { color: #b45309; background: #fffbeb; }
/* Portail d'échanges Entreprises — étape 2 : empty-state card Documents partagés (onglet « Espace partagé »). */
.spl-shared-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 16px;}
.spl-shared-empty-icon{font-size:32px;color:#cbd5e1;margin-bottom:12px;}
.spl-shared-empty-title{font-weight:600;color:#475569;margin-bottom:4px;}
.spl-shared-empty-hint{font-size:13px;color:#94a3b8;max-width:340px;line-height:1.4;}
/* Portail d'échanges Entreprises — étape 3b : liste read-only des documents partagés (onglet « Espace partagé »). */
.ssd-summary{font-size:12px;color:#64748b;margin:0 0 10px 8px;}
.ssd-list{display:flex;flex-direction:column;}
.ssd-row{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid #eef1f4;font-size:12.5px;}
.ssd-head{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;border-bottom:1px solid #e2e8f0;font-weight:600;}
.ssd-c-type{flex:2;min-width:0;padding-right:8px;color:#334155;}
.ssd-c-status{flex:1.3;}
.ssd-c-deadline{flex:1;color:#475569;}
.ssd-c-file{flex:1.6;min-width:0;}
.ssd-req{color:#ef4444;font-weight:700;margin-left:2px;cursor:default;}
.ssd-badge{display:inline-block;border:1px solid;border-radius: var(--r-sm, 3px);padding:1px 6px;font-size:11px;white-space:nowrap;}
.ssd-doc-link{color:#0f766e;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:bottom;}
.ssd-doc-link:hover{text-decoration:underline;}
.ssd-nofile{color:#94a3b8;}
/* Portail d'échanges Entreprises — étape 3a : alignement des lignes du form Admin (types de documents partagés). */
.sdz-flabel{min-height:30px;display:flex;align-items:flex-end;margin-bottom:2px;line-height:1.2;}
.sdz-required-box{padding-bottom:6px;}
/* étape 3a — marqueur « type archivé » sur la fiche (documents partagés préservés d'un type retiré de la config). */
.ssd-archived{font-size:10px;color:#94a3b8;font-style:italic;margin-left:5px;}
/* Portail d'échanges Entreprises — étape 3c : action de gestion (ligne docs) + drawer slot. */
.ssd-c-action{flex:0 0 92px;text-align:right;display:flex;justify-content:flex-end;}
.ssd-manage{color:#64748b;}
.ssd-manage:hover{color:#0f766e;}
.spl-sdoc-reason{font-size:12.5px;color:#475569;}
.spl-sdoc-doc-list{margin-top:2px;}
/* Portail d'échanges Entreprises — étape 3 (rework UI drawer acheteur). */
.spl-sdoc-req{color:#ef4444;font-weight:700;}
.spl-sdoc-subtitle{font-size:12px;color:#94a3b8;font-weight:400;}
.spl-sdoc-reminder input[type=checkbox]{accent-color:#0d9488;width:16px;height:16px;vertical-align:middle;}
.spl-sdoc-reminder .form-control{width:64px;display:inline-block;margin:0 6px;}
.spl-sdoc-date{max-width:180px;}
.spl-sdoc-reject-pop{min-width:260px;}
.spl-sdoc-doc-del{color:#94a3b8;}
.spl-sdoc-doc-del:hover{color:#ef4444;}
/* Portail d'échanges Entreprises — étape 3 (rework UI lot 2 : archivage, portail société, destinataires). */
.ssd-row-archived{background:#f1f5f9;}
.spl-csd-actionbar{margin-top:16px;padding-top:12px;border-top:1px solid #e2e8f0;text-align:right;}
.spl-csd-del{color:#94a3b8;}
.spl-csd-del:hover{color:#ef4444;}
.sdz-archive-mode{color:#b45309;}
.spl-sdoc-rcpt-block{border-top:1px solid #eef1f4;padding-top:10px;}
.spl-sdoc-rcpt-group{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;margin:6px 0 3px;}
.spl-sdoc-rcpt{display:block;font-size:13px;font-weight:400;margin-bottom:3px;cursor:pointer;}
.spl-sdoc-rcpt input{accent-color:#0d9488;margin-right:6px;}
/* Portail d'echanges Entreprises - drawer Document partage : footer sticky bas + rappel teal/nowrap + contact verrouille (2026-07-20) */
#spl-sdoc-drawer .ds-drawer-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#spl-sdoc-drawer .spl-qual-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 20px 24px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
#spl-sdoc-drawer .spl-qual-scroll::-webkit-scrollbar { width: 4px; background: transparent; }
#spl-sdoc-drawer .spl-qual-scroll::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
#spl-sdoc-drawer .ds-drawer-footer { flex: 0 0 auto; padding: 10px 24px; background: #fff; border-top: 1px solid #f3f4f6; }
.spl-sdoc-reminder { flex-wrap: nowrap !important; white-space: nowrap; }
.spl-sdoc-reminder .drw-ctr-reminder-label,
.spl-sdoc-reminder .drw-ctr-reminder-suffix { white-space: nowrap; }
.spl-sdoc-reminder input[type="checkbox"] { accent-color: #0d9488 !important; }
.spl-sdoc-rcpt-locked input[type="checkbox"] { cursor: not-allowed; }
/* ============================================================================
   Portail d'echanges Entreprises - lot retours 2026-07-20 (P2/P7/P9/P3)
   ============================================================================ */

/* P2 - Checkbox rappel en teal (le form-check-input est peint en orange par le theme ; on force teal) */
#spl-sdoc-drawer .spl-sdoc-reminder .form-check { padding-left: 0; margin: 0; min-height: 0; display: inline-flex; align-items: center; }
#spl-sdoc-drawer .spl-sdoc-reminder .form-check .form-check-input { position: static; margin: 0; float: none; }
#spl-sdoc-drawer .spl-sdoc-reminder input[type="checkbox"] { accent-color: #0d9488 !important; }
#spl-sdoc-drawer .spl-sdoc-reminder input.form-check-input:checked { background-color: #0d9488 !important; border-color: #0d9488 !important; }
#spl-sdoc-drawer .spl-sdoc-reminder input.form-check-input:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.20) !important; }

/* P7 - Bloc "Mails de rappel" : titre + lignes, polices harmonisees (meme couleur), 2e ligne alignee */
#spl-sdoc-drawer .spl-sdoc-remind-block { margin-top: 16px; }
#spl-sdoc-drawer .spl-sdoc-remind-block > .ds-drawer-section-label { margin-bottom: 8px; }
#spl-sdoc-drawer .spl-sdoc-remind-block .drw-ctr-reminder-label,
#spl-sdoc-drawer .spl-sdoc-remind-block .drw-ctr-reminder-suffix { color: #2D3E50; font-size: 0.82rem; }
#spl-sdoc-drawer .spl-sdoc-remind-row2 { padding-left: 26px; }

/* P9 - Portail fournisseur "Documents partages" : harmonise avec la liste AO (.rfx-rfp-card / rfxl) */
.rfx-ds .rfx-doc-hint.spl-csd-callout { background: #e9f6f4; border-color: #cfe9e5; border-left-color: #0d9488; margin: 2px 0 22px; font-size: 0.9rem; color: #2f4a52; }
/* Le conteneur de scroll recoit sa hauteur (contenu) via resizeItemEditContainer : on annule le padding
   vertical de .rfxl-list, sinon il s'ajoute a la hauteur calculee et fait deborder la page de ~2px. */
.spl-csd-scroll { padding-top: 0; padding-bottom: 0; overflow-x: hidden; }

/* Statut en pill teintee (calque .rfx-rfp-status), une teinte par etat */
.rfx-portal-home .rfx-rfp-status.spl-csd-st-await   { background: #eef2f6; color: #5b6b7d; }
.rfx-portal-home .rfx-rfp-status.spl-csd-st-pending { background: rgba(64,196,255,0.15); color: #1690c4; }
.rfx-portal-home .rfx-rfp-status.spl-csd-st-valid   { background: rgba(139,195,74,0.18); color: #5a8f1e; }
.rfx-portal-home .rfx-rfp-status.spl-csd-st-correct { background: rgba(255,87,34,0.12); color: #e0532e; }
.rfx-portal-home .rfx-rfp-status.spl-csd-st-expired { background: rgba(255,87,34,0.12); color: #e0532e; }

/* Chips info (echeance + fichier) calque .rfx-chip */
.rfx-portal-home .rfx-chip.spl-csd-chip-deadline { background: #eef2f6; color: #64748b; }
.rfx-portal-home .rfx-chip.spl-csd-chip-file { background: rgba(13,148,136,0.09); color: #0d9488; text-decoration: none; max-width: 340px; overflow: hidden; }
.rfx-portal-home .rfx-chip.spl-csd-chip-file:hover { background: rgba(13,148,136,0.16); }
.spl-csd-chip-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-csd-req { color: #FF5722; margin-left: 3px; font-weight: 700; }
.spl-csd-del { color: #b3bdc7; font-size: 0.9rem; align-self: center; }
.spl-csd-del:hover { color: #FF5722; }
.spl-csd-reason { font-size: 0.83rem; color: #6b7a8d; }
.spl-csd-card-archived { opacity: 0.66; background: #fafbfc; }
.spl-csd-archived-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; padding: 16px 2px 4px; margin-top: 6px; border-top: 1px solid #e7ecf1; }

/* Uploader compact (calque #spl-qual-drawer) : masque la grosse drop-zone, bouton teal outline */
.spl-csd-uploader { margin-top: 4px; }
.spl-csd-uploader .qq-uploader { min-height: 0; max-height: none; border: none; background: transparent; padding: 0; overflow: visible; }
.spl-csd-uploader .qq-uploader:before { content: none; }
.spl-csd-uploader .qq-upload-drop-area { display: none; }
.spl-csd-uploader .qq-upload-button { float: none; display: inline-block; width: auto; white-space: nowrap; padding: 7px 16px !important; font-size: 0.82rem; font-weight: 500; border-radius: var(--r-md, 6px)!important; background: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; box-shadow: none !important; }
.spl-csd-uploader .qq-upload-button:hover, .spl-csd-uploader .qq-upload-button-hover { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
.spl-csd-uploader .qq-upload-list { margin-top: 6px; font-size: 0.8rem; }

/* P3 - Modale DS de confirmation au-dessus du drawer (drawer z-index 1050) */
#spl-sdoc-confirm-modal { z-index: 1060; }
/* ============================================================================
   Portail Onboarding (etape 4, 2026-07-20) : cartes declarations/checks/documents
   ============================================================================ */
.rfx-portal-form .spl-onb-pill { font-size: 0.74rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-sm, 3px); white-space: nowrap; }
.spl-onb-empty { color: #64748b; padding: 14px 0; }
/* Meme aspect que les .rfx-card (Questionnaire / Identite) : rayon 2px, bords HAUT et DROIT
   transparents, seuls gauche et bas en gris (cf. app-ds.css:19059). */
.rfxl-body .spl-onb-card { background: #fff; border: 1px solid #eef2f6; border-color: transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: none; padding: 16px 20px; margin-bottom: 14px; }
/* Aligne sur l'en-tete des .rfx-card (Questionnaire / Identite) : titre navy 1rem, icone teal a gauche,
   filet de separation. Structure et classes spl-* conservees (alignement leger, decision Olivier). */
.spl-onb-card-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #2D3E50; margin: -16px -20px 14px; padding: 12px 20px; border-bottom: 1px solid rgba(45,62,80,0.22); }
.spl-onb-card-title { position: relative; }
.spl-onb-card-title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }
.spl-onb-card-title i { color: #0d9488; font-size: 0.95rem; flex-shrink: 0; }
/* 2) Choix multiples : chaque option est un 'div.form-check' (le <label> interne est INLINE, une marge
      verticale y est donc sans effet -- 1re tentative infructueuse). L'espacement va sur le wrapper. */
.spl-onb-field .form-check { margin-bottom: 7px; }
.spl-onb-field .form-check:last-child { margin-bottom: 0; }
/* 3) Controles internes. Structure reelle (devtools) : 'label.spl-onb-check > div.form-check > input'
      + le rond teal VISIBLE est un ::after de 'label.form-check-label', cale par 'margin-left:-20px'
      pour venir se superposer a l'input. Consequence : il ne faut SURTOUT PAS toucher au padding-left
      de .form-check ni a la position de l'input -- sinon le ::after part 20px trop a gauche et se
      superpose a la vraie case (erreur commise, corrigee ici). On agit uniquement sur l'alignement
      vertical du pseudo-element, qui s'alignait sur la ligne de base du texte au lieu de son milieu. */
.spl-onb-check { align-items: center; line-height: 1.4; }
.spl-onb-check .form-check { display: flex; align-items: center; }
/* Le rond teal VISIBLE est le ::after (et ::before) de .form-check-label : 'position:absolute' avec
   'top:-4px', d'ou la coche 4px trop haute. L'input, lui, est 'disabled' et invisible : toutes les
   tentatives de reglage sur l'input etaient sans effet (5 essais). On centre donc le PSEUDO-ELEMENT.
   'margin-left:-20px' et 'left:0' sont conserves : c'est eux qui le calent horizontalement. */
.spl-onb-check .form-check-label::after,
.spl-onb-check .form-check-label::before { top: 50% !important; transform: translateY(-50%); }
/* Choix multiples : un peu d'air entre la case et son libelle (padding-left d'origine : 5px). */
/* Le 5px de retrait vient d'une regle non lisible (bootstrap.min.css, acces refuse) qui gagnait malgre
   une specificite inferieure -> elle porte vraisemblablement !important. On force donc ici aussi. */
.spl-onb-field .form-check-label { padding-left: 15px !important; }
.spl-onb-row { display: flex; align-items: center; gap: 18px; padding: 9px 0; border-bottom: 1px solid #f1f4f7; }
.spl-onb-row:last-child { border-bottom: none; }
.spl-onb-label { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; color: #2D3E50; line-height: 1.35; }
.spl-onb-field { flex: 0 0 260px; max-width: 260px; }
.spl-onb-req { color: #FF5722; font-weight: 700; }
.spl-onb-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; margin: 0; cursor: pointer; font-size: 0.9rem; color: #2D3E50; }
.spl-onb-check input[type="checkbox"] { accent-color: #0d9488; width: 16px; height: 16px; }
.spl-onb-doc-item { padding: 10px 0; border-bottom: 1px solid #f1f4f7; }
.spl-onb-doc-item:last-child { border-bottom: none; }
.spl-onb-doc-list { margin: 6px 0; }
.spl-onb-doc-list .spl-qual-doc { display: inline-block; margin-right: 12px; color: #0d9488; }
.spl-onb-doc-uploader .qq-uploader { min-height: 0; max-height: none; border: none; background: transparent; padding: 0; overflow: visible; }
.spl-onb-doc-uploader .qq-uploader:before { content: none; }
.spl-onb-doc-uploader .qq-upload-drop-area { display: none; }
.spl-onb-doc-uploader .qq-upload-button { float: none; display: inline-block; width: auto; white-space: nowrap; padding: 6px 14px !important; font-size: 0.8rem; font-weight: 500; border-radius: var(--r-md, 6px)!important; background: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; box-shadow: none !important; }
.spl-onb-doc-uploader .qq-upload-button:hover, .spl-onb-doc-uploader .qq-upload-button-hover { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
/* Portail onboarding : scroll interne (evite le debordement vertical de page) */
.spl-onb-scroll { overflow-y: auto; overflow-x: hidden; padding: 0 2px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
.spl-onb-scroll::-webkit-scrollbar { width: 8px; background: transparent; }
.spl-onb-scroll::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
/* Portail home : ligne du haut = Appels d'offres (2 cards) + Onboarding a droite (etape 4) */
.rfx-portal-hub .rfxp-toprow { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.rfx-portal-hub .rfxp-toprow .rfxp-hero { height: 100%; }
.rfx-portal-hub .rfxp-toprow .rfxp-card-onb { display: flex; flex-direction: column; }
@media (max-width: 820px) { .rfx-portal-hub .rfxp-toprow { grid-template-columns: 1fr; } }
/* Drawer Qualification/Onboarding : bloc statut sorti du scroll (sticky sous le header) + tracabilite items */
#spl-qual-drawer .spl-qual-pillbar { flex: 0 0 auto; padding: 12px 24px; border-bottom: 1px solid #f3f4f6; background: #fff; }
#spl-qual-drawer .spl-qual-pillbar .spl-qual-comment { margin-top: 6px; }
.spl-qual-trace { font-size: 0.72rem; color: #94a3b8; margin-top: 4px; }
.spl-qual-trace-check { margin-left: 26px; margin-top: 0; padding-bottom: 4px; }
/* Portail onboarding : toolbar = dernier enregistrement + bouton Enregistrer et valider */
.rfx-portal-form .spl-onb-toolbar { display: flex; align-items: center; justify-content: center; gap: 20px; padding-left: 24px; padding-right: 24px; flex-wrap: wrap; }
.spl-onb-lastsave { font-size: 0.8rem; color: #64748b; }
/* Portail home : hero pleine largeur si Onboarding non active */
.rfx-portal-hub .rfxp-toprow-solo { grid-template-columns: 1fr; }

/* Bouton acheteur "Activer sur le portail fournisseur" (en-tetes cards Espace partage) */
.spl-portal-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-full, 999px); border: 1px solid #e2e8f0; background: #f8fafc; color: #94a3b8; text-decoration: none; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.spl-portal-toggle:hover { border-color: #cbd5e1; color: #64748b; text-decoration: none; }
.spl-portal-toggle i { font-size: 0.9rem; }
.spl-portal-toggle.is-on { border-color: rgba(13,148,136,0.35); background: rgba(13,148,136,0.08); color: #0d9488; }
.spl-portal-toggle.is-on:hover { border-color: #0d9488; color: #0d9488; }
/* Tracabilite Documents partages (etape 4) : qui a charge/valide + quand */
.spl-sdoc-trace { font-size: 0.72rem; color: #94a3b8; margin-top: 6px; }
.spl-csd-trace { font-size: 0.72rem; color: #94a3b8; margin-top: 6px; line-height: 1.4; }
/* Pastille "pret a contractualiser" (etape 4) : discrete, sticky en bas a droite de la page */
.spl-ready-banner { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-lg, 10px); font-size: 0.78rem; font-weight: 600; margin: 0; background: #fff; box-shadow: 0 6px 18px rgba(16,24,40,0.14); white-space: nowrap; }
.spl-ready-banner span { white-space: nowrap; }
.spl-ready-banner.is-ready { color: #16a34a; border: 1px solid rgba(22,163,74,0.35); }
.spl-ready-banner.is-pending { color: #b45309; border: 1px solid rgba(245,158,11,0.40); }
.spl-ready-banner i { font-size: 0.9rem; flex-shrink: 0; }
/* ============================================================================
   Espace partage v2 (etape 4, rework 2026-07-21) : 3 cartes harmonisees + Documents pleine largeur
   ============================================================================ */
.spl-sh2 { padding: 14px 40px 0; }
.spl-sh2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-bottom: 16px; }
.spl-sh-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e7ecf1; border-radius: var(--r-lg, 10px); padding: 15px 17px; }
.spl-sh-card-head { display: flex; align-items: center; gap: 10px; }
.spl-sh-card-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg, 10px); background: #eef2f6; color: #0d9488; font-size: 0.95rem; flex-shrink: 0; }
.spl-sh-card-title { font-size: 0.95rem; font-weight: 600; color: #1f2d3d; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-sh-card-body { flex: 1 1 auto; margin: 12px 0; min-height: 22px; }
.spl-sh-card-detail { font-size: 0.82rem; color: #64748b; }
.spl-sh-muted { color: #94a3b8; font-style: italic; }
.spl-sh-card-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; }

/* Pill de statut unifiee (Questionnaire/Bilans/Onboarding) */
.spl-sh-pill { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; padding: 3px 11px; border-radius: var(--r-full, 999px); white-space: nowrap; }
.spl-sh-pill.is-ok { background: rgba(22,163,74,0.10); color: #16a34a; }
.spl-sh-pill.is-todo { background: rgba(245,158,11,0.12); color: #b45309; }
.spl-sh-pill.is-empty { background: #eef2f6; color: #94a3b8; }

/* Bouton d'action unifie (Voir / Editer / Completer / Gerer) */
.spl-sh-action { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: var(--r-md, 6px); border: 1px solid #0d9488; background: #fff; color: #0d9488; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.spl-sh-action:hover, .spl-sh-action:focus { background: #0d9488; color: #fff; text-decoration: none; }
.spl-sh-action i { font-size: 0.82rem; }

/* Mini-tableau bilans (3 colonnes) */
.spl-sh-bal-head, .spl-sh-bal-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; font-size: 0.8rem; }
.spl-sh-bal-head { color: #94a3b8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.spl-sh-bal-head span:not(:first-child), .spl-sh-bal-row span:not(:first-child) { text-align: center; }
.spl-sh-bal-row { color: #415873; padding: 2px 0; }

/* Documents partages pleine largeur (ligne 2) */
.spl-sh2-docs { background: #fff; border: 1px solid #e7ecf1; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.spl-sh2-docs-head { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid #eef1f4; flex-shrink: 0; }
.spl-sh2-docs-title { font-size: 0.82rem; font-weight: 700; color: #1f2d3d; text-transform: uppercase; letter-spacing: 0.04em; }
.spl-sh2-docs-count { font-size: 0.8rem; color: #64748b; }
.spl-sh2-docs-scroll { overflow-y: auto; overflow-x: hidden; padding: 6px 18px 12px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
.spl-sh2-docs-scroll::-webkit-scrollbar { width: 6px; background: transparent; }
.spl-sh2-docs-scroll::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; }
/* Espace partage v2 (rework 2026-07-21, retour 2) : cartes au style Contexte (ctx-info-card) 2-up + barre bas */
.spl-sh2-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.spl-sh2-cards .ctx-info-card { margin-bottom: 0; }
.spl-sh-body { display: flex; flex-direction: column; }
.spl-sh-detail { font-size: 0.78rem; color: #64748b; margin-bottom: 10px; }
.spl-sh-foot { display: flex; align-items: center; gap: 8px; min-height: 28px; }
/* Bouton d'action reduit (plus discret) */
.spl-sh-action { padding: 4px 10px; font-size: 0.73rem; }
.spl-sh-action i { font-size: 0.76rem; }
/* Barre d'etat sticky en bas (calque .spl-list-footer : blanc + border-top, meme hauteur) */
.spl-sh2-footbar { display: flex; align-items: center; gap: 9px; margin: 4px -40px 0; padding: 13px 40px 15px; background: #fff; border-top: 1px solid #e2e8f0; font-size: 0.8rem; font-weight: 600; }
.spl-sh2-footbar i { font-size: 0.92rem; flex-shrink: 0; }
.spl-sh2-footbar.is-ready { color: #16a34a; }
.spl-sh2-footbar.is-pending { color: #b45309; }
/* Espace partage v2 — retour 2b (2026-07-21) : fond pale, pill inline, docs format card, toggle radius, footbar */
/* #7 fond gris pale (= cards de droite Contexte #fcfcfd), header compris + masque ::after assorti */
.spl-sh-card2, .spl-sh-card2 .ctx-info-card-header { background: #fcfcfd; }
.spl-sh-card2 .ctx-info-card-header::after { background: #fcfcfd; }
/* #2 pill dans le body, a gauche du detail (Mis a jour / X/Y requis) */
.spl-sh-detail-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.spl-sh-detail-row .spl-sh-detail { margin-bottom: 0; }
/* #4 border-radius reduit du toggle Activer sur le portail */
.spl-portal-toggle { border-radius: var(--r-md, 6px); }
/* #3 Documents partages au format ctx-info-card (bordure gauche+bas, header icone+titre, fond pale) */
.spl-sh2-docs { background: #fff; border: 1px solid transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; border-radius: 2px; margin-bottom: 0; }
.spl-sh2-docs-head { padding: 12px 20px; border-bottom: 1px solid rgba(45,62,80,0.22); background: #fff; }
.spl-sh2-docs-head::after { background: #fff; }
.spl-sh2-docs-count { font-weight: 400; color: #64748b; }
/* #5 hauteur = footer liste (~62px) + centrage vertical ; #6 pastille a droite */
.spl-sh2-footbar { min-height: 62px; margin: 0 -40px; padding: 0 40px; align-items: center; justify-content: flex-end; }
/* Espace partage v2 — retour 2d (2026-07-21) : scroll docs dimensionne en JS + footbar 50px en flux (bas de page) */
.spl-sh2 { padding: 14px 40px 0; }
.spl-sh2-docs { display: flex; flex-direction: column; margin-bottom: 12px; }
.spl-sh2-docs-head { flex: 0 0 auto; }
.spl-sh2-docs-head .spl-sh-detail { margin: 0; }
.ssd-list-fixedhead { flex: 0 0 auto; padding: 2px 24px 2px 18px; }
.ssd-list-fixedhead .ssd-row { border-bottom: none; padding-bottom: 2px; }
.spl-sh2-docs-scroll { overflow-y: auto; }
/* Footbar : hauteur fixe (52px, alignee sur le footer liste), texte centre verticalement + a droite */
.spl-sh2-footbar { height: 52px; min-height: 0; margin: 0 -40px; padding: 0 40px; align-items: center; justify-content: flex-end; }
/* Tooltip explicatif boutons "Activer sur le portail" : petite police (fond fonce/texte clair = defaut Bootstrap) */
.spl-tt .tooltip-inner { font-size: 0.72rem; max-width: 260px; padding: 6px 10px; line-height: 1.4; text-align: left; }
/* Demande de mise a jour (etape 5.1) : bouton par card + badge en cours + drawer. */
.spl-sh-head-actions { display: inline-flex; align-items: center; gap: 10px; }
.spl-updreq-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.73rem; font-weight: 500; color: #0d9488; text-decoration: none; padding: 4px 10px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #fff; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.spl-updreq-btn:hover, .spl-updreq-btn:focus { background: #0d9488; color: #fff; text-decoration: none; outline: none; }
.spl-updreq-btn i { font-size: 0.78rem; }
.spl-updreq-pending { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 500; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--r-md, 6px); padding: 4px 10px; white-space: nowrap; }
.spl-updreq-pending i { font-size: 0.78rem; }
.spl-updreq-body { padding: 4px 2px 8px; }
.spl-updreq-intro { font-size: 0.82rem; color: #475569; line-height: 1.5; margin: 0 0 16px; }
.spl-updreq-section-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #0d9488; margin: 16px 0 8px; }
.spl-updreq-contacts { display: flex; flex-direction: column; gap: 6px; }
.spl-updreq-contact { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; color: #334155; cursor: pointer; }
.spl-updreq-contact input { margin: 0; flex: 0 0 auto; }
.spl-updreq-nocontact { font-size: 0.8rem; color: #94a3b8; font-style: italic; margin: 0 0 6px; }
.spl-updreq-newcontact { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.spl-updreq-newcontact-fields { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; flex: 1 1 auto; min-width: 0; }
.spl-updreq-newcontact-fields input { width: 100%; font-size: 0.82rem; padding: 0.32rem 0.5rem; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); }
.spl-updreq-newcontact-remove { flex: 0 0 auto; background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 6px; font-size: 0.85rem; }
.spl-updreq-newcontact-remove:hover { color: #ef4444; }
.spl-updreq-add-contact { display: inline-flex; align-items: center; margin-top: 10px; font-size: 0.76rem; font-weight: 500; color: #0d9488; background: transparent; border: 1px dashed #0d9488; border-radius: var(--r-md, 6px); padding: 5px 12px; cursor: pointer; }
.spl-updreq-add-contact:hover { background: rgba(13,148,136,0.06); }
.spl-updreq-body textarea { width: 100%; font-size: 0.84rem; padding: 0.4rem 0.6rem; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); resize: vertical; }
.spl-updreq-body ul, .spl-updreq-newcontact ul { list-style: none; padding: 0; margin: 4px 0 0; }
.spl-updreq-body ul li { color: #b91c1c; font-size: 0.75rem; }
.spl-updreq-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.8rem; padding: 8px 12px; border-radius: var(--r-lg, 10px); margin-bottom: 12px; }
.spl-updreq-foot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: 12px 2px; display: flex; justify-content: flex-end; margin-top: 8px; }
.spl-updreq-submit { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 600; color: #fff; background: #0d9488; border: none; border-radius: var(--r-md, 6px); padding: 8px 16px; cursor: pointer; transition: background 0.15s; }
.spl-updreq-submit:hover { background: #0f766e; }
.spl-updreq-submit:focus { outline: none; }
/* Demande de mise a jour v2 (etape 5.1) : bouton unique en bas + drawer global (modules + activation inline). */
.spl-sh2-footbar { justify-content: space-between !important; }
.spl-updreq-open-btn { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 600; color: #fff; background: #0d9488; border: none; border-radius: var(--r-md, 6px); padding: 7px 14px; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.spl-updreq-open-btn:hover, .spl-updreq-open-btn:focus { background: #0f766e; outline: none; }
.spl-sh2-footbar-state { display: inline-flex; align-items: center; gap: 6px; }
.spl-updreq-pending { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 500; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--r-md, 6px); padding: 4px 10px; white-space: nowrap; }
.spl-updreq-pending i { font-size: 0.78rem; }
#spl-updreq-drawer .ds-drawer-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#spl-updreq-drawer #spl-updreq-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#spl-updreq-drawer .spl-updreq-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 20px 24px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
#spl-updreq-drawer .ds-drawer-footer { flex: 0 0 auto; }
.spl-updreq-intro { font-size: 0.82rem; color: #475569; line-height: 1.5; margin: 0 0 16px; }
.spl-updreq-section-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #0d9488; margin: 18px 0 8px; }
.spl-updreq-modules { display: flex; flex-direction: column; gap: 8px; }
.spl-updreq-module { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: #334155; }
.spl-updreq-module input { margin: 0; flex: 0 0 auto; }
.spl-updreq-module-label { margin: 0; }
.spl-updreq-module.is-locked .spl-updreq-module-label, .spl-updreq-module.is-open .spl-updreq-module-label { color: #94a3b8; }
.spl-updreq-module-tag { font-size: 0.68rem; font-weight: 500; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--r-sm, 3px); padding: 1px 7px; }
.spl-updreq-activate { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 500; color: #0d9488; text-decoration: none; border: 1px solid #0d9488; border-radius: var(--r-sm, 3px); padding: 2px 8px; white-space: nowrap; }
.spl-updreq-activate:hover { background: #0d9488; color: #fff; text-decoration: none; }
.spl-updreq-activate-info { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 10px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: var(--r-lg, 10px); font-size: 0.74rem; color: #475569; line-height: 1.45; }
.spl-updreq-activate-info i { color: #3b82f6; margin-top: 1px; flex: 0 0 auto; }
.spl-updreq-contacts { display: flex; flex-direction: column; gap: 6px; }
.spl-updreq-contact { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: #334155; }
.spl-updreq-contact input { margin: 0; flex: 0 0 auto; }
.spl-updreq-contact label { margin: 0; font-weight: 400; }
.spl-updreq-nocontact { font-size: 0.8rem; color: #94a3b8; font-style: italic; margin: 0 0 6px; }
.spl-updreq-add-contact { display: inline-flex; align-items: center; margin-top: 10px; font-size: 0.76rem; font-weight: 500; color: #0d9488; background: transparent; border: 1px dashed #0d9488; border-radius: var(--r-md, 6px); padding: 5px 12px; cursor: pointer; }
.spl-updreq-add-contact:hover { background: rgba(13,148,136,0.06); }
#spl-updreq-drawer textarea { width: 100%; font-size: 0.84rem; padding: 0.4rem 0.6rem; border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); resize: vertical; }
.spl-updreq-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.8rem; padding: 8px 12px; border-radius: var(--r-lg, 10px); margin-bottom: 12px; }
.spl-updreq-submit { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 600; color: #fff; background: #0d9488; border: none; border-radius: var(--r-md, 6px); padding: 8px 16px; cursor: pointer; transition: background 0.15s; }
.spl-updreq-submit:hover { background: #0f766e; }
.spl-updreq-submit:focus { outline: none; }
/* Demande de mise a jour — peaufinage DS (etape 5.1) : cases teal, contacts enrichis, aeration. */
#spl-updreq-drawer .spl-updreq-scroll input[type="checkbox"] { accent-color: #0d9488; width: 15px; height: 15px; }
.spl-updreq-intro { margin: 0 0 20px; }
.spl-updreq-section-title { margin: 22px 0 12px; }
.spl-updreq-modules { gap: 12px; }
.spl-updreq-module { align-items: center; gap: 10px; }
.spl-updreq-contacts { gap: 2px; }
.spl-updreq-contact { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 7px 0; cursor: pointer; font-weight: 400; }
.spl-updreq-contact input { margin: 2px 0 0; flex: 0 0 auto; }
.spl-updreq-contact-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spl-updreq-contact-name { font-size: 0.85rem; font-weight: 500; color: #334155; line-height: 1.35; }
.spl-updreq-contact-fn { display: inline-block; font-size: 0.68rem; font-weight: 500; color: #0d9488; background: #e6f7f5; border-radius: var(--r-sm, 3px); padding: 1px 6px; margin-left: 7px; vertical-align: 1px; white-space: nowrap; }
.spl-updreq-contact-email { font-size: 0.75rem; color: #94a3b8; }
.spl-updreq-add-contact { margin-top: 14px; }
.spl-updreq-recipients-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 0.73rem; color: #94a3b8; line-height: 1.45; }
.spl-updreq-recipients-note i { margin-top: 2px; flex: 0 0 auto; color: #cbd5e1; }
/* ── Portail Entreprises — étape 5.3 : panneau « Demandes en cours » dans le drawer de demande de MàJ ── */
#spl-updreq-drawer .spl-updreq-open { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #EEF1F4; }
#spl-updreq-drawer .spl-updreq-open-item { background: #F7FAFB; border: 1px solid #E4EAEE; border-radius: var(--r-md, 6px); padding: 10px 12px; margin-top: 8px; }
#spl-updreq-drawer .spl-updreq-open-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#spl-updreq-drawer .spl-updreq-open-since { font-size: 0.78rem; color: #5A6B78; font-weight: 600; }
#spl-updreq-drawer .spl-updreq-cancel { border: 1px solid #D6DCE1; background: #fff; color: #B0384A; border-radius: var(--r-md, 6px); padding: 3px 10px; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
#spl-updreq-drawer .spl-updreq-cancel:hover { background: #FCEEF0; border-color: #E3B3BC; }
#spl-updreq-drawer .spl-updreq-cancel:focus { outline: none; }
#spl-updreq-drawer .spl-updreq-cancel:focus-visible { outline: 2px solid #2BA9A0; outline-offset: 1px; }
#spl-updreq-drawer .spl-updreq-cancel.is-busy { opacity: .5; pointer-events: none; }
#spl-updreq-drawer .spl-updreq-open-modules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#spl-updreq-drawer .spl-updreq-open-mod { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; color: #5A6B78; background: #fff; border: 1px solid #E4EAEE; border-radius: var(--r-full, 999px); padding: 2px 10px; }
#spl-updreq-drawer .spl-updreq-open-mod i { font-size: 0.68rem; color: #C79A2E; }
#spl-updreq-drawer .spl-updreq-open-mod.is-done { color: #3E8E41; border-color: #CDE6CF; background: #F2F9F2; }
#spl-updreq-drawer .spl-updreq-open-mod.is-done i { color: #4CAF50; }
#spl-updreq-drawer .spl-updreq-open-recipients { margin-top: 8px; font-size: 0.74rem; color: #7A8894; }
/* ── Portail Entreprises — étape 5.2 : indicateurs « demande de mise à jour reçue » côté société ── */
/* Bannière : anti-débordement (wrap + border-box + min-width:0 sur le texte) pour ne jamais élargir la page. */
.rfxp-updreq-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; box-sizing: border-box; max-width: 100%; background: #FFF7E6; border: 1px solid #F3D08A; border-left: 4px solid #E8A33D; border-radius: var(--r-lg, 10px); padding: 11px 16px; margin: 0 0 18px; color: #7A5A18; font-size: 0.9rem; }
.rfxp-updreq-banner i { flex: 0 0 auto; color: #E8A33D; font-size: 1rem; }
.rfxp-updreq-banner span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rfxp-updreq-banner strong { font-weight: 700; }
/* Tag par carte : bandeau plein-largeur en TÊTE de carte (position absolue), pour ne PAS chevaucher la pill de
   statut (elle aussi absolue en haut à droite). La carte réserve la hauteur (padding-top) et la pill descend. */
.rfx-portal-hub .rfxp-card.has-updreq { padding-top: 42px; }
.rfx-portal-hub .rfxp-updreq-tag { position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; display: flex; align-items: center; gap: 6px; background: #FFF3DC; color: #A8710F; border-bottom: 1px solid #F0D19A; border-radius: var(--r-sm, 3px) var(--r-sm, 3px) 0 0; padding: 7px 16px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfx-portal-hub .rfxp-updreq-tag i { flex: 0 0 auto; font-size: 0.66rem; color: #E8A33D; }
.rfx-portal-hub .rfxp-card.has-updreq .rfxp-pill { top: 50px; }
/* ── Portail Entreprises — étape 5.4 : bouton « Relancer » + info dernière relance (drawer demande de MàJ) ── */
#spl-updreq-drawer .spl-updreq-open-btns { display: inline-flex; gap: 6px; }
#spl-updreq-drawer .spl-updreq-remind { border: 1px solid #BFE3DF; background: #F1FAF9; color: #1E8C82; border-radius: var(--r-md, 6px); padding: 3px 10px; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
#spl-updreq-drawer .spl-updreq-remind:hover { background: #E3F5F3; border-color: #9FD6D0; }
#spl-updreq-drawer .spl-updreq-remind:focus { outline: none; }
#spl-updreq-drawer .spl-updreq-remind:focus-visible { outline: 2px solid #2BA9A0; outline-offset: 1px; }
#spl-updreq-drawer .spl-updreq-remind.is-busy { opacity: .5; pointer-events: none; }
#spl-updreq-drawer .spl-updreq-open-reminded { margin-top: 6px; font-size: 0.72rem; color: #8A97A2; }
/* ── Portail Entreprises — étape 5.3 : confirmation intégrée d'annulation (remplace confirm() navigateur) ── */
#spl-updreq-drawer .spl-updreq-confirm { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#spl-updreq-drawer .spl-updreq-confirm-q { font-size: 0.76rem; font-weight: 600; color: #B0384A; }
#spl-updreq-drawer .spl-updreq-cancel-yes { border: 1px solid #E3B3BC; background: #FCEEF0; color: #B0384A; border-radius: var(--r-md, 6px); padding: 3px 10px; font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: background .12s; }
#spl-updreq-drawer .spl-updreq-cancel-yes:hover { background: #F7DEE2; }
#spl-updreq-drawer .spl-updreq-cancel-yes.is-busy { opacity: .5; pointer-events: none; }
#spl-updreq-drawer .spl-updreq-cancel-no { border: 1px solid #D6DCE1; background: #fff; color: #5A6B78; border-radius: var(--r-md, 6px); padding: 3px 10px; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: background .12s; }
#spl-updreq-drawer .spl-updreq-cancel-no:hover { background: #F2F5F7; }
#spl-updreq-drawer .spl-updreq-cancel-yes:focus, #spl-updreq-drawer .spl-updreq-cancel-no:focus { outline: none; }
#spl-updreq-drawer .spl-updreq-cancel-yes:focus-visible, #spl-updreq-drawer .spl-updreq-cancel-no:focus-visible { outline: 2px solid #2BA9A0; outline-offset: 1px; }
/* ── Portail Entreprises : réorganisation des tuiles (2 par ligne + hero pleine largeur sans bouton) ── */
.rfx-portal-hub .rfxp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .rfx-portal-hub .rfxp-grid-2 { grid-template-columns: 1fr; } }
.rfx-portal-hub .rfxp-hero-full { margin-bottom: 16px; }
.rfx-portal-hub .rfxp-hero-arrow { flex: 0 0 auto; color: #0d9488; font-size: 1.1rem; transition: transform .15s; }
.rfx-portal-hub a.rfxp-hero:hover .rfxp-hero-arrow { transform: translateX(4px); }
/* Pastille « Demande en cours » cliquable (ouvre le drawer de gestion). */
.spl-updreq-pending { cursor: pointer; transition: background .12s, border-color .12s; }
.spl-updreq-pending:hover { background: #ffedd5; border-color: #fdba74; }
.spl-updreq-pending:focus { outline: none; }
.spl-updreq-pending:focus-visible { outline: 2px solid #2BA9A0; outline-offset: 1px; }
/* Zone scrollable des tuiles du portail. Hauteur posée en JS avec css('height') → le padding est COMPRIS
   dans la valeur, on peut donc y mettre un padding vertical sans faire déborder la page.
   Pleine largeur pour porter la scrollbar au bord droit de la page ; les tuiles restent alignées sur
   l'en-tête grâce au max-width posé sur les enfants directs. Le padding bas dégage l'encadré flottant
   « alimenté par » : la dernière tuile reste lisible une fois le scroll en bas. */
.rfx-portal-hub .rfxp-scroll { flex: 0 0 auto; overflow-y: auto; overflow-x: hidden; padding: 4px 40px 96px; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.35) transparent; }
.rfx-portal-hub .rfxp-scroll > * { max-width: 960px; margin-left: auto; margin-right: auto; }
/* Scrollbar fine et discrète (quasi invisible au repos, un peu plus visible au survol) + espace avant les tuiles. */
.rfx-portal-hub .rfxp-scroll::-webkit-scrollbar { width: 6px; }
.rfx-portal-hub .rfxp-scroll::-webkit-scrollbar-track { background: transparent; }
.rfx-portal-hub .rfxp-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.30); border-radius: 4px; }
.rfx-portal-hub .rfxp-scroll:hover::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.55); }
/* Portail Entreprises : pastille liste « documents déposés par l'entreprise à valider » (bleu). */
.spl-list-docvalidate-dot { width: 9px; height: 9px; border-radius: 50%; background: #1E9BD7; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(30,155,215,0.20); cursor: help; position: relative; left: -5px; }
/* Portail Entreprises : 2e message d'alerte header (documents à valider) + dots bleus header/onglet. */
.spl-header-alert-item { display: inline-flex; align-items: center; }
.spl-header-alert-item + .spl-header-alert-item { margin-left: 22px; padding-left: 22px; border-left: 1px solid rgba(146,64,14,0.18); }
.spl-header-docvalidate-dot { width: 8px; height: 8px; border-radius: 50%; background: #1E9BD7; display: inline-block; margin-right: 8px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(30,155,215,0.20); }
.spl-tab-docvalidate-dot { width: 8px; height: 8px; border-radius: 50%; background: #1E9BD7; display: inline-block; margin-left: 7px; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(30,155,215,0.20); cursor: help; vertical-align: middle; }
/* Drawer Documents partagés : consigne « process simplifié » (callout teal). */
.spl-sdoc-process { display: flex; align-items: flex-start; gap: 8px; background: #EAF7F5; border: 1px solid #BFE3DF; border-left: 3px solid #2BA9A0; border-radius: var(--r-md, 6px); padding: 9px 12px; margin-bottom: 14px; font-size: 0.78rem; color: #2C5A55; line-height: 1.45; }
.spl-sdoc-process i { color: #2BA9A0; margin-top: 2px; flex: 0 0 auto; }
/* Message header « documents à valider » : texte bleu (même bleu que le rond). Séparateur teal sur fond teal. */
.spl-header-docvalidate-label { color: #1478A8; font-weight: 500; }
.spl-header-alert-item + .spl-header-alert-item { border-left-color: rgba(43,169,160,0.28); }
/* Étape 5-bis : statut/tag « à renouveler » (ambre) — portail société + drawer acheteur. */
.rfx-portal-home .rfx-rfp-status.spl-csd-st-renew { background: rgba(245,158,11,0.14); color: #b45309; }
.spl-sdoc-renew-tag { border-color: #E29500 !important; color: #E29500 !important; }
/* Étape 5-bis : sous-mention « dont X obligatoires » sous le libellé de la tuile KPI « à traiter » (portail). */
.rfx-portal-home .rfx-kpi-sub { display: block; font-size: 0.66rem; font-weight: 500; color: #b45309; margin-top: 1px; }
/* ── Étape 5-bis : zones « Documents archivés » (drawer acheteur + portail société) ── */
#spl-sdoc-drawer .spl-sdoc-archives { border-top: 1px solid #EEF1F4; padding-top: 12px; }
#spl-sdoc-drawer .spl-sdoc-archive-row { padding: 6px 0; border-bottom: 1px dashed #EEF1F4; }
#spl-sdoc-drawer .spl-sdoc-archive-row:last-child { border-bottom: none; }
#spl-sdoc-drawer .spl-sdoc-archive-meta { font-size: 0.72rem; color: #8A97A2; margin-top: 2px; }
.rfx-portal-home .spl-csd-archives { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.rfx-portal-home .spl-csd-archives-title { font-size: 0.72rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.rfx-portal-home .spl-csd-chip-archive { opacity: .85; }
.rfx-portal-home .spl-csd-archive-date { color: #94a3b8; }
/* Étape 5-bis.6 : onglet « Documents fournisseurs à valider » du hub Workflows (ligne-lien + badge bleu). */
.wfh-sdoc-row { text-decoration: none; color: inherit; cursor: pointer; }
.wfh-sdoc-row:hover { background: #f7fafb; text-decoration: none; color: inherit; }
.wfh-sdoc-count { border: 1px solid #1E9BD7 !important; color: #1478A8 !important; }
.wfh-sdoc-chevron { color: #cbd5e1; }
.wfh-sdoc-row:hover .wfh-sdoc-chevron { color: #1E9BD7; }
/* Étape 5-bis.6 : colonne « Plus ancien dépôt » élargie (évite le retour à la ligne de l'entête). */
.wfh-sdoc-col-date { width: 165px !important; white-space: nowrap; }
/* Hub Workflows : onglets plus compacts horizontalement (min-width auto + padding réduit) pour tenir sur UNE
   ligne malgré l'ajout de « Documents fournisseurs à valider ». Scopé .wfh-tab (n'affecte pas les autres .ds-tabs). */
.wfh-tab { min-width: 0; padding-left: 13px; padding-right: 13px; }
/* ── Portail d'échanges Entreprises — étape 5-ter : réconciliation demande de MàJ ↔ statut ──────────────
   Pastille ambre « Mise à jour demandée » (remplace la verte quand une demande est OPEN, plus d'empilement),
   bannière + bouton « Valider et confirmer à jour » en tête de page détail, et bouton « Remplacer » (Documents). */
.rfx-portal-hub .rfxp-pill.is-updreq { color:#A8710F; background:#FFF3DC; }
.rfx-portal-hub .rfxp-pill.is-updreq i { color:#E8A33D; }

/* Bannière page détail société (Questionnaire / Onboarding / Documents) */
.spl-upd-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; box-sizing:border-box; max-width:100%; background:#FFF7E6; border:1px solid #F3D08A; border-left:4px solid #E8A33D; border-radius: var(--r-lg, 10px); padding:12px 16px; margin:0 0 16px; }
.spl-upd-banner-main { display:flex; align-items:flex-start; gap:10px; flex:1 1 340px; min-width:0; }
.spl-upd-banner-ico { flex:0 0 auto; color:#E8A33D; font-size:1.05rem; margin-top:2px; }
.spl-upd-banner-txt { min-width:0; }
.spl-upd-banner-title { font-weight:700; color:#7A5A18; font-size:0.9rem; margin-bottom:2px; }
.spl-upd-banner-hint { color:#7A5A18; font-size:0.85rem; line-height:1.4; overflow-wrap:anywhere; }
.spl-upd-banner-msg { margin-top:6px; color:#5f4a1a; font-size:0.82rem; font-style:italic; background:rgba(255,255,255,0.6); border-radius: var(--r-lg, 10px); padding:6px 10px; overflow-wrap:anywhere; }
.spl-upd-banner-msg i { color:#C79A4B; margin-right:4px; font-size:0.72rem; }
.spl-upd-banner-action { flex:0 0 auto; }
.spl-upd-confirm { display:inline-flex; align-items:center; font-size:0.82rem; font-weight:600; color:#fff; background:#0d9488; border:none; border-radius: var(--r-md, 6px); padding:9px 16px; cursor:pointer; transition:background 0.15s; white-space:nowrap; }
.spl-upd-confirm:hover, .spl-upd-confirm:focus { background:#0f766e; outline:none; }

/* « Remplacer » une pièce validée (Documents, MàJ OPEN) : révèle une zone d'upload masquée, non destructif */
.spl-csd-replace { margin-top:6px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.spl-csd-replace-btn, .spl-csd-replace-cancel { display:inline-flex; align-items:center; gap:5px; font-size:0.78rem; font-weight:500; border-radius: var(--r-md, 6px); padding:6px 12px; cursor:pointer; background:#fff; border:1px solid #0d9488; color:#0d9488; transition:all 0.15s; }
.spl-csd-replace-btn:hover, .spl-csd-replace-btn:focus { background:#0d9488; color:#fff; outline:none; }
.spl-csd-replace-cancel { border-color:#cbd5e1; color:#64748b; }
.spl-csd-replace-cancel:hover, .spl-csd-replace-cancel:focus { background:#f1f5f9; outline:none; }
.spl-csd-replace-hint { font-size:0.75rem; color:#94a3b8; flex:1 1 auto; min-width:0; }
.spl-csd-uploader-hidden { display:none; }
/* étape 5-ter (retours) : wrapper bannière page Questionnaire (pas de .rfxl-body → aligner sur l'inset 40px du
   header) + variante bannière sans bouton (Questionnaire/Onboarding : le bouton vit dans la barre sticky). */
.spl-upd-standalone { padding: 16px 40px 0; }
.spl-upd-banner-full .spl-upd-banner-main { flex: 1 1 auto; }
/* Harmonisation sollicitations (2026-07-22) : badge obligatoire/facultatif (bannière), toggle du drawer,
   badge « en cours », et barre sticky Documents. */
.spl-upd-req-badge { display:inline-block; margin-left:8px; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; padding:2px 8px; border-radius: var(--r-full, 999px); vertical-align:middle; background:#E5E7EB; color:#4B5563; }
.spl-upd-req-badge.is-required { background:#FDE9C8; color:#A8710F; }

.spl-updreq-required { display:flex; gap:18px; flex-wrap:wrap; margin:2px 0 4px; }
.spl-updreq-required-opt { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:0.86rem; color:#334155; margin:0; }
.spl-updreq-required-opt input { margin:0; }
.spl-updreq-required-hint { display:flex; align-items:flex-start; gap:6px; font-size:0.76rem; color:#94a3b8; margin:2px 0 4px; }
.spl-updreq-required-hint i { margin-top:2px; }

.spl-updreq-open-req { display:inline-flex; align-items:center; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; padding:2px 7px; border-radius: var(--r-full, 999px); background:#E5E7EB; color:#4B5563; }
.spl-updreq-open-req.is-required { background:#FDE9C8; color:#A8710F; }

/* Barre sticky Documents (calque .spl-onb-toolbar) : bouton à droite + hint de garde-fou à gauche */
.spl-csd-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-left:16px; padding-right:16px; }
.spl-csd-toolbar-hint { display:inline-flex; align-items:center; font-size:0.8rem; color:#A8710F; margin-right:auto; }
/* Incrément 2 (2026-07-22) : mode lecture seule (form disabled + uploaders masqués + bouton « Mettre à jour »),
   ligne « raison » (revalidation RFx) dans la bannière, et date de dernière mise à jour dans l'en-tête. */
.spl-portal-ro .qq-uploader, .spl-portal-ro .spl-onb-doc-uploader { display: none !important; }
.spl-ro-toolbar { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.spl-ro-hint { display:inline-flex; align-items:center; font-size:0.85rem; color:#0f9d58; }
.spl-ro-edit { font-size:0.85rem; }
.spl-upd-banner-reason { margin-top:4px; font-size:0.8rem; color:#7A5A18; display:flex; align-items:center; gap:5px; }
.spl-upd-banner-reason i { color:#C79A4B; }
.rfxp-head-lastupd { display:block; font-size:0.72rem; color:#94a3b8; margin-top:2px; text-align:right; }
/* Fix toggle obligatoire/facultatif : label frère de l'input (plus d'enveloppe → plus de double-clic). */
.spl-updreq-required-opt label { margin: 0; cursor: pointer; font-size: 0.86rem; color: #334155; }
/* Toggle obligatoire/facultatif = contrôle segmenté visible (les radios natifs sont masqués par un style global :
   on les rend fonctionnels mais invisibles, et on stylise le label selon :checked). */
.spl-updreq-required { gap: 10px; }
.spl-updreq-required-opt { display: inline-flex; }
.spl-updreq-required-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.spl-updreq-required-opt label { margin: 0; cursor: pointer; font-size: 0.84rem; font-weight: 600; color: #475569; padding: 7px 16px; border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); transition: all 0.15s; user-select: none; }
.spl-updreq-required-opt label:hover { border-color: #0d9488; color: #0d9488; }
.spl-updreq-required-opt input:checked + label { background: #0d9488; border-color: #0d9488; color: #fff; }
/* Toggle obligatoire/facultatif : boutons plus compacts. */
.spl-updreq-required-opt label { font-size: 0.78rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-md, 6px); }
/* Refonte Documents 2026-07-22 : bouton « Confirmer le document » (pièce validée toujours valable → re-soumise). */
.spl-csd-reconfirm { display:inline-flex; align-items:center; gap:5px; font-size:0.78rem; font-weight:500; border-radius: var(--r-md, 6px); padding:6px 12px; cursor:pointer; background:#0d9488; border:1px solid #0d9488; color:#fff; transition:all 0.15s; }
.spl-csd-reconfirm:hover, .spl-csd-reconfirm:focus { background:#0f766e; border-color:#0f766e; color:#fff; outline:none; }
/* État tuile « En attente de validation » (Documents partagés : tout soumis, en attente acheteur). */
.rfx-portal-hub .rfxp-pill.is-pending { color:#0369a1; background:rgba(56,189,248,0.14); }
/* Harmonisation 2026-07-22 : badge gris unique « Dernier enregistrement le … par … » dans le header des sections. */
.spl-lastsave-badge { display:inline-flex; align-items:center; font-size:0.72rem; font-weight:500; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; border-radius: var(--r-full, 999px); padding:3px 10px; white-space:nowrap; }
/* Empty state du sélecteur de partenaire (aucun appel d'offres actif). */
.rfx-portal-home .rfx-home-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:60px 20px; color:#94a3b8; text-align:center; }
.rfx-portal-home .rfx-home-empty-icon { font-size:2.4rem; color:#cbd5e1; }
.rfx-portal-home .rfx-home-empty-text { font-size:1rem; }
/* Empty state du sélecteur de partenaire : centré dans le conteneur scrollable dimensionné (footer collé en bas). */
.rfx-portal-home .rfx-home-empty-scroll { display:flex; align-items:center; justify-content:center; }
/* Empty state occupe toute la zone .rfxp-scroll (centrage vertical) — override du padding précédent. */
.rfx-portal-home .rfx-home-empty { height: 100%; padding: 20px; }
/* Récap d'erreurs de validation (remplissage obligatoire incomplet) — bandeau rouge en tête de section portail. */
.spl-form-err-summary { display:flex; align-items:center; box-sizing:border-box; max-width:100%; background:#FEF2F2; border:1px solid #FCA5A5; border-left:4px solid #EF4444; border-radius: var(--r-lg, 10px); padding:11px 16px; margin:0 0 16px; color:#B91C1C; font-size:0.9rem; font-weight:600; }
.spl-form-err-summary i { color:#EF4444; }
/* Marquage des items onboarding obligatoires non satisfaits (remplissage obligatoire incomplet). */
.spl-onb-item-err { color:#B91C1C; font-size:0.78rem; font-weight:500; margin-top:4px; }
.spl-onb-row-err { border:1px solid #FCA5A5; border-radius:6px; background:#FEF2F2; padding:6px 10px; }
/* Portail Entreprises — fond de carte AMBRE quand une mise a jour est demandee (manuel Espace partage OU reval RFx), unifie avec la pastille .rfxp-pill.is-updreq (harmonisation 2026-07-23). */
.rfx-portal-hub .rfxp-card.is-updreq { border-color: #F3D08A; background: #FFFCF5; }
.rfx-portal-hub a.rfxp-card.is-updreq:hover { border-color: #E8A33D; box-shadow: 0 12px 30px rgba(232,163,61,.14); }

/* --- Présentation (refonte onglet Paramétrage, étape cible 1, 2026-07-23) --- */
/* Hint court sous un champ (remplace les gros pavés d'aide italiques). */
.rfx-ds .rfx-field-hint { font-size: 0.78rem; color: #8fa1b3; margin-top: 6px; line-height: 1.4; }
/* Sélecteur de langue (onglets drapeaux) espacé dans le corps de carte. */
.rfx-ds .rfx-lang-switch { margin-bottom: 14px; }
.rfx-ds .rfx-lang-switch .nav-tabs { border-bottom: 1px solid #e2e8f0; }
/* Bandeau « lecture seule » discret (gris), en tête des pages non éditables. */
.rfx-ds .rfx-ro-note { display: flex; align-items: center; gap: 8px; background: #f8fafb; border: 1px solid #e2e8f0; border-left: 3px solid #8fa1b3; border-radius: var(--r-lg, 10px); padding: 8px 14px; margin-bottom: 16px; font-size: 0.8rem; color: #64748b; }
.rfx-ds .rfx-ro-note i { color: #8fa1b3; }
/* --- Présentation : retours UX 2026-07-23 (cartes façon Contexte, 2 colonnes, largeur, densité chapitres) --- */
/* 6b — carte façon .ctx-info-card : haut/droite transparents, gauche+bas subtils, trait sous-titre démarrant à l'icône (masque ::after 20px). */
.rfx-ds .rfx-card { border-color: transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; box-shadow: none; }
.rfx-ds .rfx-card-header { position: relative; border-bottom: 1px solid rgba(45,62,80,0.22); }
.rfx-ds .rfx-card-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }
/* 6a — occuper la largeur : colonne de contenu non bornée. */
.rfx-ds .rfx-form-col { max-width: none; }
/* 1 + 6a — rangée de 2 cartes côte à côte (Nom / Langue). */
.rfx-ds .rfx-card-row { display: flex; gap: 16px; align-items: stretch; }
.rfx-ds .rfx-card-row > .rfx-card { flex: 1 1 0; min-width: 0; margin-bottom: 16px; }
@media (max-width: 900px) { .rfx-ds .rfx-card-row { flex-direction: column; gap: 0; } }
/* 5 — chapitres Présentation : collapses par champ neutralisés (source = thème toggle_editor_widget partagé, non modifié). */
.rfx-ds .rfx-chapter .collapser,
.rfx-ds .rfx-chapters-ro .collapser { pointer-events: none; cursor: default; }
.rfx-ds .rfx-chapter .collapser .fa-angle-down, .rfx-ds .rfx-chapter .collapser .fa-angle-right,
.rfx-ds .rfx-chapters-ro .collapser .fa-angle-down, .rfx-ds .rfx-chapters-ro .collapser .fa-angle-right { display: none; }
.rfx-ds .rfx-chapter .collapse, .rfx-ds .rfx-chapters-ro .collapse { display: block !important; height: auto !important; }
.rfx-ds .rfx-chapter .collapse.px-5, .rfx-ds .rfx-chapters-ro .collapse.px-5 { padding-left: 0 !important; padding-right: 0 !important; }
.rfx-ds .rfx-chapter .collapseTitle .pl-3, .rfx-ds .rfx-chapters-ro .collapseTitle .pl-3 { padding-left: 0 !important; }
.rfx-ds .rfx-chapter { border-bottom: 1px solid #f1f3f5; padding-bottom: 6px; margin-bottom: 10px; }
/* 5 — filtre "champs à compléter" : masque les chapitres déjà remplis tant que non déplié. */
.rfx-ds .rfx-chapters:not(.rfx-show-all) .rfx-chapter-filled { display: none; }
.rfx-ds .rfx-chapters-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.rfx-ds .rfx-show-filled-toggle { color: #0d9488; font-size: 0.82rem; cursor: pointer; }
.rfx-ds .rfx-show-filled-toggle:hover { color: #0b7d73; text-decoration: underline; }
/* Bouton "Voir tous les champs" : vrai bouton DS secondaire (retour 2026-07-23 it.3) */
.rfx-ds .rfx-show-filled-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    background: #fff; color: #0d9488; font-size: 0.8rem; font-weight: 500;
    line-height: 1.2; cursor: pointer; text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rfx-ds .rfx-show-filled-toggle:hover { background: #f0fafa; border-color: #0d9488; color: #0b7d73; text-decoration: none; }
.rfx-ds .rfx-show-filled-toggle i { font-size: 0.78rem; }
/* --- Éditeur de traduction bilingue Présentation (source | cible), retour 2026-07-23 --- */
.rfx-ds .rfx-tr-head { display: flex; gap: 24px; margin: 4px 0 6px; }
.rfx-ds .rfx-tr-col-head { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-tr-ref { font-weight: 400; color: #8fa1b3; font-size: 0.75rem; }
.rfx-ds .rfx-tr-row { border-top: 1px solid #f1f3f5; padding-top: 12px; margin-top: 12px; }
.rfx-ds .rfx-tr-row:first-of-type { border-top: none; margin-top: 0; }
.rfx-ds .rfx-tr-chapter-title { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin-bottom: 8px; }
.rfx-ds .rfx-tr-cols { display: flex; gap: 24px; align-items: flex-start; }
.rfx-ds .rfx-tr-source, .rfx-ds .rfx-tr-target { flex: 1 1 0; min-width: 0; }
.rfx-ds .rfx-tr-source { background: #f8fafb; border: 1px solid #eef2f6; border-radius: 2px; padding: 10px 14px; font-size: 0.85rem; color: #415873; line-height: 1.5; }
/* La cible réutilise l'éditeur (toggle_editor_widget) : on masque son titre/collapse interne, la ligne porte déjà le titre de chapitre. */
.rfx-ds .rfx-tr-target .collapseTitle { display: none; }
.rfx-ds .rfx-tr-target .collapser { pointer-events: none; }
.rfx-ds .rfx-tr-target .collapse { display: block !important; height: auto !important; }
.rfx-ds .rfx-tr-target .collapse.px-5 { padding-left: 0 !important; padding-right: 0 !important; }
.rfx-ds .rfx-tr-target .pb-3 { padding-bottom: 0 !important; }
@media (max-width: 900px) { .rfx-ds .rfx-tr-cols, .rfx-ds .rfx-tr-head { flex-direction: column; gap: 8px; } }
/* --- Sélecteur de langues Présentation (pills) + éditeur cible dynamique (2026-07-23) --- */
.rfx-ds .rfx-lang-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rfx-ds .rfx-lang-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: var(--r-sm, 3px); background: #fff; color: #415873; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.rfx-ds .rfx-lang-pill:hover { background: #f0fafa; border-color: #0d9488; color: #0b7d73; }
.rfx-ds .rfx-lang-pill.active { background: #e6f7f5; border-color: #0d9488; color: #0b7d73; }
.rfx-ds .rfx-lang-pill img { display: block; }
.rfx-ds .rfx-lang-pill-tag { font-size: 0.68rem; font-weight: 600; color: #0d9488; background: #e6f7f5; border-radius: var(--r-sm, 3px); padding: 1px 6px; }
.rfx-ds .rfx-lang-pill.active .rfx-lang-pill-tag { background: #fff; }
.rfx-ds .rfx-tr-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f3f5; }
.rfx-ds .rfx-tr-saved { display: inline-flex; align-items: center; gap: 6px; color: #0d9488; font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; }
/* --- Traduction Présentation : alignement colonnes + autosave + toolbar centrée (retours 2026-07-23) --- */
/* Colonne cible : aplatir l'espacement interne de l'éditeur (toggle_editor_widget) → aligner haut/gauche
   avec la colonne source (le titre de chapitre est déjà au-dessus des 2 colonnes). */
.rfx-ds .rfx-tr-target .collapser { display: none; }
.rfx-ds .rfx-tr-target .pb-3 { padding-bottom: 0 !important; }
.rfx-ds .rfx-tr-target .collapse .pt-3 { padding-top: 0 !important; }
.rfx-ds .rfx-tr-target .collapse .mb-3 { margin-bottom: 0 !important; }
.rfx-ds .rfx-tr-target .collapse .row { margin-left: 0 !important; margin-right: 0 !important; }
.rfx-ds .rfx-tr-target .collapse .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; }
.rfx-ds .rfx-tr-col-head { padding-left: 0; }
/* Barre autosave (remplace le bouton Enregistrer côté traduction). */
.rfx-ds .rfx-tr-actions { display: flex; align-items: center; gap: 12px; }
.rfx-ds .rfx-autosave-hint { font-size: 0.78rem; color: #8fa1b3; display: inline-flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-autosave-status { font-size: 0.78rem; color: #0d9488; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* Toolbar sticky bas : centrage vertical des boutons (Enregistrer / Valider et continuer). */
.rfx-ds #edit-item-toolbar .nav-pills { align-items: center; }
.rfx-ds #edit-item-toolbar .nav-pills .nav-item { display: flex; align-items: center; justify-content: center; }
/* --- FIX retours DevTools 2026-07-23 : colonne cible = .form-group.row (pas .collapse) --- */
/* Neutraliser l'espacement Bootstrap interne du champ cible (form-group / row / col / pt-*)
   → aligner le champ en HAUT et à GAUCHE avec la colonne source et l'en-tête de langue. */
.rfx-ds .rfx-tr-target .form-group { margin: 0 !important; padding: 0 !important; }
.rfx-ds .rfx-tr-target .row { margin-left: 0 !important; margin-right: 0 !important; }
.rfx-ds .rfx-tr-target [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
.rfx-ds .rfx-tr-target .pt-3, .rfx-ds .rfx-tr-target .pt-2, .rfx-ds .rfx-tr-target .pt-1 { padding-top: 0 !important; }
/* Flag alignment (retry, 2026-07-23) — forcer le champ cible tout à gauche de sa colonne (0). */
.rfx-ds .rfx-tr-target { padding-left: 0 !important; }
.rfx-ds .rfx-tr-target > *, .rfx-ds .rfx-tr-target .form-group, .rfx-ds .rfx-tr-target .form-group > .row { margin-left: 0 !important; padding-left: 0 !important; }
.rfx-ds .rfx-tr-target .row > [class*="col-"] { padding-left: 0 !important; margin-left: 0 !important; }
.rfx-ds .rfx-tr-target .cke { margin-left: 0 !important; }
/* Alignement déterministe en-têtes ↔ colonnes (2026-07-23) : largeurs identiques 50% - moitié du gap (24px).
   Évite que la boîte source (bordure/padding) décale la répartition flex par rapport aux en-têtes. */
.rfx-ds .rfx-tr-col-head,
.rfx-ds .rfx-tr-source,
.rfx-ds .rfx-tr-target { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px); box-sizing: border-box; }
/* Lien "Supprimer le brouillon" (toolbar Présentation, statut brouillon). */
.rfx-ds .rfx-delete-draft { color: #c0392b; font-size: 0.85rem; font-weight: 500; }
.rfx-ds .rfx-delete-draft:hover { color: #a5281c; text-decoration: underline; }
.rfx-ds .rfx-delete-draft i { margin-right: 4px; }
/* --- Toolbar 3 zones (poubelle gauche 40px / Valider centré / spinner droite) + densité Présentation (2026-07-23) --- */
.rfx-ds .rfx-toolbar-3 { display: flex; align-items: center; padding-left: 40px !important; padding-right: 40px !important; }
.rfx-ds .rfx-toolbar-left, .rfx-ds .rfx-toolbar-right { flex: 1 1 0; min-width: 0; }
.rfx-ds .rfx-toolbar-right { text-align: right; }
.rfx-ds .rfx-toolbar-center { flex: 0 0 auto; }
.rfx-ds .rfx-toolbar-left .rfx-delete-draft { padding-left: 0; }
/* #5 — densité : moins d'espace entre chapitres, titres plus propres, zones de saisie moins hautes. */
.rfx-ds .rfx-chapter { border-bottom: none; padding-bottom: 0; margin-bottom: 6px; }
.rfx-ds .rfx-chapter .collapseTitle { font-size: 0.85rem !important; font-weight: 500; color: #2D3E50 !important; margin-bottom: 4px !important; }
.rfx-ds .rfx-chapter .pb-3 { padding-bottom: 8px !important; }
.rfx-ds .rfx-chapter .cke_contents,
.rfx-ds .rfx-tr-target .cke_contents { height: 120px !important; }
/* Retours 2026-07-23 (it. finale Présentation) */
/* #1 — titres de cartes strictement uniformes (Nom / Langue / Présentation) : force 1rem/600. */
.rfx-ds .rfx-card-header .rfx-card-title { font-size: 1rem !important; font-weight: 600 !important; }
.rfx-ds .rfx-card-header .rfx-card-icon { font-size: 1rem !important; }
/* #2 — zones de saisie moins hautes : forcer aussi l'iframe interne de CKEditor (pas que .cke_contents). */
.rfx-ds .rfx-chapter .cke_contents, .rfx-ds .rfx-chapter .cke_contents iframe,
.rfx-ds .rfx-tr-target .cke_contents, .rfx-ds .rfx-tr-target .cke_contents iframe { height: 120px !important; }
/* bouton « Voir tous les champs » : conservé à DROITE (retour utilisateur). */
.rfx-ds .rfx-chapters-toolbar { justify-content: flex-end; }
/* --- FIX #3 (DevTools 2026-07-23) : CKEditor INLINE, pas iframe --- */
/* La zone de saisie est un div.cke_editable_inline (contenteditable), min-height 100px → réduire. */
.rfx-ds .rfx-chapter .cke_editable_inline,
.rfx-ds .rfx-tr-target .cke_editable_inline { min-height: 80px !important; }
/* Titre de chapitre plus propre (label DS : navy, compact). */
.rfx-ds .rfx-chapter .collapseTitle { font-size: 0.9rem !important; font-weight: 600 !important; color: #2D3E50 !important; margin-bottom: 8px !important; }
.rfx-ds .rfx-chapter .collapseTitle .align-top { font-size: 0.9rem; }
/* Espace entre champs de Présentation resserré (retour 2026-07-23) : neutraliser le padding/margin Bootstrap interne. */
.rfx-ds .rfx-chapter { margin-bottom: 2px !important; }
.rfx-ds .rfx-chapter .form-group { margin-bottom: 0 !important; }
.rfx-ds .rfx-chapter .pt-3 { padding-top: 2px !important; }
.rfx-ds .rfx-chapter .mb-3 { margin-bottom: 0 !important; }
.rfx-ds .rfx-chapter .pb-3 { padding-bottom: 4px !important; }
.rfx-ds .rfx-chapter .collapse.px-5 { padding-left: 0 !important; padding-right: 0 !important; }
/* ===================================================================== */
/* Accès interne — refonte AO 2026-07-24 (page unifiée edit/display DS)   */
/* ===================================================================== */
/* Colonnes asymétriques 60/40 : Autorisations (gauche) | Accès aux offres (droite), alignées en haut */
.rfx-ds .rfx-access-cols { display: flex; gap: 40px; align-items: flex-start; }
.rfx-ds .rfx-access-cols > .rfx-card { margin-bottom: 0; }
.rfx-ds .rfx-access-cols > .rfx-card:first-child { flex: 0 0 60%; min-width: 0; }
.rfx-ds .rfx-access-cols > .rfx-card:last-child { flex: 0 0 calc(40% - 40px); min-width: 0; }
@media (max-width: 1100px) {
    .rfx-ds .rfx-access-cols { flex-direction: column; }
    .rfx-ds .rfx-access-cols > .rfx-card { flex: 1 1 auto; }
    .rfx-ds .rfx-access-cols > .rfx-card:first-child { margin-bottom: 16px; }
}

.rfx-ds .rfx-access-group { margin-bottom: 28px; }
.rfx-ds .rfx-access-group:last-child { margin-bottom: 0; }
.rfx-ds .rfx-access-group-title { font-size: 0.7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #94a3b8; margin: 0 0 12px; }

/* Ligne = toggle + libellé (sans trait de séparation) */
.rfx-ds .rfx-access-row { display: flex; align-items: center; gap: 14px; padding: 7px 2px; }

/* ---- Toggle switch (édition) : la checkbox du form theme devient un interrupteur ---- */
.rfx-ds .rfx-access-row .form-check { padding-left: 0 !important; margin: 0 !important; display: flex; align-items: center; gap: 14px; width: 100%; }
.rfx-ds .rfx-access-row .form-check-input {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    position: relative !important; float: none !important; margin: 0 !important; opacity: 1;
    width: 40px; height: 22px; border-radius: var(--r-full, 999px); background: #cbd5e1; border: none;
    flex-shrink: 0; cursor: pointer; transition: background .18s ease;
}
.rfx-ds .rfx-access-row .form-check-input::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); transition: transform .18s ease;
}
.rfx-ds .rfx-access-row .form-check-input:checked { background: #0d9488; }
.rfx-ds .rfx-access-row .form-check-input:checked::before { transform: translateX(18px); }
.rfx-ds .rfx-access-row .form-check-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,.18); }
.rfx-ds .rfx-access-row .form-check-label { position: static; float: none !important; margin: 0 !important; padding: 0 !important; font-size: 0.9rem; font-weight: 400; color: #2D3E50; line-height: 1.4; cursor: pointer; }
/* Neutraliser le rond + le check dessinés par le style checkbox global (label::before/::after) */
.rfx-ds .rfx-access-row .form-check-label::before,
.rfx-ds .rfx-access-row .form-check-label::after { content: none !important; display: none !important; }

/* ---- Toggle en lecture seule (non interactif) ---- */
.rfx-ds .rfx-toggle-ro { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: var(--r-full, 999px); background: #cbd5e1; flex-shrink: 0; }
.rfx-ds .rfx-toggle-ro::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); }
.rfx-ds .rfx-toggle-ro.on { background: #0d9488; }
.rfx-ds .rfx-toggle-ro.on::before { transform: translateX(18px); }
.rfx-ds .rfx-access-label { font-size: 0.9rem; color: #2D3E50; line-height: 1.4; }
.rfx-ds .rfx-access-ro .rfx-toggle-ro:not(.on) + .rfx-access-label { color: #94a3b8; }

.rfx-ds .rfx-access-setted { font-size: 0.78rem; font-style: italic; color: #0d9488; margin: 14px 0 0 0; display: flex; align-items: center; gap: 6px; }
/* Colonnes bilingues avec titre par colonne (refonte AO 2026-07-24) : chaque colonne = 50%, contenu pleine largeur dedans */
.rfx-ds .rfx-tr-cols > .rfx-tr-col { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px); min-width: 0; }
.rfx-ds .rfx-tr-col > .rfx-tr-source, .rfx-ds .rfx-tr-col > .rfx-tr-target { flex: 1 1 auto !important; max-width: 100% !important; }
/* Vue mono-langue (display) : 1 colonne pleine largeur */
.rfx-ds .rfx-tr-single .rfx-tr-cols > .rfx-tr-col { flex: 1 1 100% !important; max-width: 100% !important; }
@media (max-width: 900px) { .rfx-ds .rfx-tr-cols > .rfx-tr-col { flex: 1 1 100% !important; max-width: 100% !important; } }
/* Hint sous le toggle « Accès aux offres » : collé à la ligne (pas de trait de séparation) */
.rfx-ds .rfx-access-note { margin-top: 2px; padding-top: 0; border-top: none; margin-bottom: 0; }
/* Encadré (badge) en bas de carte : note de modifiabilité */
.rfx-ds .rfx-access-badge { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding: 9px 14px; border-radius: var(--r-sm, 3px); font-size: 0.78rem; }
.rfx-ds .rfx-access-badge i { flex-shrink: 0; }
/* Teal clair : autorisations souples (modifiables à tout moment) */
.rfx-ds .rfx-access-badge-teal { background: #e6f7f4; color: #0f766e; }
.rfx-ds .rfx-access-badge-teal i { color: #0d9488; }
/* Ambre : choix verrouillé après publication */
.rfx-ds .rfx-access-badge-amber { background: #fdf3e2; color: #b45309; }
.rfx-ds .rfx-access-badge-amber i { color: #d97706; }

/* Toolbar collée — hint autosave (gauche) */
.rfx-ds .rfx-toolbar-hint { font-size: 0.78rem; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-toolbar-hint i { color: #0d9488; }
/* ===================================================================== */
/* Planning & interlocuteurs — refonte AO 2026-07-24 (socle DS, 50/50)    */
/* ===================================================================== */
/* 2 cartes 50/50 : Interlocuteurs (gauche) | Planning (droite) */
.rfx-ds .rfx-sched-cols { display: flex; gap: 40px; align-items: flex-start; }
.rfx-ds .rfx-sched-cols > .rfx-card { flex: 0 0 calc(50% - 20px); min-width: 0; margin-bottom: 0; }
@media (max-width: 1100px) {
    .rfx-ds .rfx-sched-cols { flex-direction: column; }
    .rfx-ds .rfx-sched-cols > .rfx-card { flex: 1 1 auto; width: 100%; }
    .rfx-ds .rfx-sched-cols > .rfx-card:first-child { margin-bottom: 16px; }
}
/* Listes en carte : lever la largeur max et resserrer la cellule "communiquer" */
.rfx-ds .rfx-card .rfx-ms-list, .rfx-ds .rfx-card .rfx-ms-head { max-width: none; }
.rfx-ds .rfx-card .rfx-ms-communicate-cell { flex: 0 0 34px; padding-left: 6px; }
.rfx-ds .rfx-card .rfx-ms-date-cell { flex: 0 0 120px; }

/* Ligne interlocuteur compacte : nom+fonction / complétude / bouton coordonnées */
.rfx-ds .rfx-ct-id-cell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rfx-ds .rfx-ct-name { font-weight: 600; color: #2D3E50; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfx-ds .rfx-ct-fn { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfx-ds .rfx-ct-flag-cell { flex: 0 0 26px; text-align: center; }
.rfx-ds .rfx-ct-incomplete { color: #d97706; font-size: 0.82rem; }
.rfx-ds .rfx-ct-action-cell { flex: 0 0 32px; text-align: center; }
.rfx-ds .rfx-ct-coord-btn { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; font-size: 0.9rem; }
.rfx-ds .rfx-ct-coord-btn:hover { color: #0d9488; }
.rfx-ds .rfx-ct-coord-btn:focus { outline: none; }

/* Modale coordonnées (non scopée .rfx-ds : le modal peut sortir du flux) */
.rfx-ct-modal .modal-dialog { max-width: 420px; }
.rfx-ct-modal .rfx-ct-field { margin-bottom: 14px; }
.rfx-ct-modal .rfx-ct-field:last-child { margin-bottom: 0; }
.rfx-ct-modal .rfx-ct-field > label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; margin-bottom: 4px; }
.rfx-ct-modal .rfx-ct-field .form-control { height: 34px; font-size: 0.85rem; }
.rfx-ct-modal .rfx-ct-field-ro { font-size: 0.9rem; color: #2D3E50; }
.rfx-ct-modal .rfx-ct-field-ro a { color: #0d9488; }
/* Planning — retours 2026-07-24 : harmonisation cases, marges, empty state */
/* Toutes les cases "communiquer" (jalons + interlocuteurs) : case native, accent teal */
.rfx-ds .rfx-ms-communicate { accent-color: #0d9488; }
.rfx-ds .rfx-ct-row .rfx-ms-communicate-cell .form-check { padding: 0 !important; margin: 0 !important; min-height: 0; }
.rfx-ds .rfx-ct-row .rfx-ms-communicate-cell input[type="checkbox"] {
    -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
    position: static !important; float: none !important; opacity: 1 !important;
    width: 16px; height: 16px; margin: 0 !important; cursor: pointer; accent-color: #0d9488;
}
.rfx-ds .rfx-ct-row .rfx-ms-communicate-cell .form-check-label { display: none !important; }
.rfx-ds .rfx-ct-row .rfx-ms-communicate-cell input[type="checkbox"]:disabled { cursor: default; opacity: 1 !important; }

/* Marge sous l'intro + espacement des lignes interlocuteurs */
.rfx-ds .rfx-sched-cols .rfx-card-intro { margin-bottom: 16px !important; }
/* Badges "modifiable" remontés en haut de carte : marge au-dessus 16px (au lieu de 22px) */
.rfx-ds .rfx-sched-cols .rfx-access-badge { margin-top: 16px; }
.rfx-ds .rfx-ct-row { padding-top: 9px; padding-bottom: 9px; }
/* Case responsable : verrouillée (non togglable), teal clair estompé (lecture seule) */
.rfx-ds .rfx-ms-locked { cursor: default; accent-color: #5eead4; opacity: 0.85; }
/* Planning — retours 2026-07-24 (suite) */
/* Toolbar envoyé : hint sur toute la largeur, zone notify réduite au bouton (évite le retour à la ligne à 50%) */
.rfx-ds .rfx-toolbar-3 .rfx-ms-hint-zone { flex: 1 1 auto; }
.rfx-ds .rfx-toolbar-3 #rfp-notify-zone { flex: 0 0 auto; margin-left: 16px; }
/* Encadré ambre "changer la date" : icône alignée en haut (pas centrée verticalement) */
.rfx-ds .rfx-ms-deadline { align-items: flex-start; }
.rfx-ds .rfx-ms-deadline > i { margin-top: 2px; }
/* Planning — retours 2026-07-24 (suite 2) */
/* Espacement un peu plus large entre les jalons (pas les interlocuteurs) */
.rfx-ds .rfx-ms-row:not(.rfx-ct-row) { padding-top: 7px; padding-bottom: 7px; }
/* Encadré ambre "changer la date" : texte puis bouton dessous, aligné à gauche */
.rfx-ds .rfx-ms-deadline-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rfx-ds .rfx-ms-deadline-btn { flex-shrink: 0; }
/* Pills langue déplacées à l'intérieur de la carte Présentation (2026-07-24) */
.rfx-ds .rfx-card-body > .rfx-lang-pills { margin: 0 0 16px; }
/* Modale « Ajout contributeur » (AO) : même largeur que Contact entreprise (refonte AO 2026-07-24) */
#addContributorModal .modal-dialog { max-width: 400px; }
/* Modale personnes (#contributorModal) : même largeur que Contact entreprise. Ne contient que des formulaires
   de personne (add/edit/new/évaluateur), tous en vertical → 400px sûr. Refonte AO 2026-07-24 */
#contributorModal .modal-dialog { max-width: 400px; }
/* Valeur en lecture seule dans un formulaire vertical (champ non éditable : identité verrouillée) */
.scf-ro { font-size: 0.85rem; color: #2D3E50; padding: 6px 2px; }
/* ============================================================================
   Conditions de participation (refonte AO 2026-07-24) — fusion Accords préalables
   + Prérequis. 3 cartes (toggles teal réutilisant .rfx-access-row) + drawers de détail.
   ============================================================================ */
.rfx-ds .rfx-cond-intro { margin-bottom: 18px !important; color: #5b6b7b; }
.rfx-ds .rfx-cond-toggle { margin-bottom: 6px; }
.rfx-ds .rfx-cond-note { margin: 8px 0 12px !important; font-size: 0.82rem; color: #5b6b7b; }

.rfx-ds .rfx-cond-detail { padding-top: 4px; }
.rfx-ds .rfx-cond-summary { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; color: #2D3E50; margin-bottom: 10px; }
.rfx-ds .rfx-cond-summary i { color: #0d9488; }

.rfx-ds .rfx-cond-configure {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid #cfd6de; border-radius: var(--r-md, 6px);
    color: #0d9488; font-size: 0.82rem; font-weight: 600;
    padding: 7px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rfx-ds .rfx-cond-configure:hover { border-color: #0d9488; background: #f0fdfa; }
.rfx-ds .rfx-cond-configure i { font-size: 0.85rem; }

.rfx-ds .rfx-cond-error {
    margin-top: 10px; padding: 8px 12px; border-radius: var(--r-lg, 10px);
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.82rem;
}

/* Deux cartes 50/50 (Informations société | Questions préalables), empilées < 1100px. */
.rfx-ds .rfx-cond-cols { display: flex; gap: 40px; align-items: flex-start; }
.rfx-ds .rfx-cond-cols > .rfx-card { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 1100px) { .rfx-ds .rfx-cond-cols { flex-direction: column; gap: 0; } .rfx-ds .rfx-cond-cols > .rfx-card { width: 100%; margin-bottom: 16px; } }

/* ---- Drawer latéral (largeur unifiée --sp-w) ---- */
.rfx-ds .rfx-cond-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: var(--sp-w, 420px); max-width: 96vw;
    background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.18);
    transform: translateX(100%); transition: transform 0.28s ease;
    z-index: 1061; display: flex; flex-direction: column;
}
.rfx-ds .rfx-cond-drawer.open { transform: translateX(0); }
.rfx-ds .rfx-cond-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: #2D3E50; color: #fff; flex-shrink: 0;
}
.rfx-ds .rfx-cond-drawer-title { font-size: 1rem; font-weight: 700; }
.rfx-ds .rfx-cond-drawer-close { background: transparent; border: none; color: #cbd5e1; font-size: 1.05rem; cursor: pointer; padding: 0; line-height: 1; }
.rfx-ds .rfx-cond-drawer-close:hover { color: #fff; }
.rfx-ds .rfx-cond-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 20px; scrollbar-width: thin; scrollbar-color: #c4c9d0 transparent; }
.rfx-ds .rfx-cond-drawer-body::-webkit-scrollbar { width: 5px; }
.rfx-ds .rfx-cond-drawer-body::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 3px; }
.rfx-ds .rfx-cond-drawer-intro { font-size: 0.84rem; color: #5b6b7b; margin-bottom: 14px !important; }

.rfx-ds .rfx-cond-overlay {
    position: fixed; inset: 0; background: rgba(45,62,80,0.35);
    opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; z-index: 1060;
}
.rfx-ds .rfx-cond-overlay.open { opacity: 1; visibility: visible; }

.rfx-ds .rfx-cond-field-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #8093a5; margin: 16px 0 8px; }
.rfx-ds .rfx-cond-nda-text .rfx-cond-field-label:first-child,
.rfx-ds .rfx-cond-type + .rfx-cond-field-label { margin-top: 0; }

/* Radios de type (Texte / Fichier) en liste verticale simple. */
.rfx-ds .rfx-cond-type .form-check { padding-left: 0; margin-bottom: 4px; }
.rfx-ds .rfx-cond-type .radio-label,
.rfx-ds .rfx-cond-type label { font-size: 0.86rem; color: #2D3E50; }

.rfx-ds .rfx-cond-lang-pills { margin-bottom: 12px; }
.rfx-ds .rfx-cond-nda-text .cke_contents,
.rfx-ds .rfx-cond-nda-text .cke_editable_inline { min-height: 220px !important; }
.rfx-ds .rfx-cond-autosave-hint { margin-top: 8px; font-size: 0.76rem; color: #8093a5; }
.rfx-ds .rfx-cond-autosave-hint i { margin-right: 4px; }

/* Lignes de documents NDA. */
.rfx-ds .rfx-cond-doc-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: 0.84rem; color: #2D3E50; }
.rfx-ds .rfx-cond-doc-row i { color: #64748b; }
.rfx-ds .rfx-cond-doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-cond-doc-loc { color: #8093a5; font-size: 0.78rem; }
.rfx-ds .rfx-cond-doc-size { color: #8093a5; font-size: 0.78rem; }
.rfx-ds .rfx-cond-doc-dl, .rfx-ds .rfx-cond-doc-del { color: #0d9488; text-decoration: none; }
.rfx-ds .rfx-cond-doc-del { color: #b91c1c; }
.rfx-ds .rfx-cond-doc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rfx-ds .rfx-cond-doc-add {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid #cfd6de; border-radius: var(--r-md, 6px);
    color: #0d9488; font-size: 0.8rem; font-weight: 600; padding: 7px 12px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.rfx-ds .rfx-cond-doc-add:hover { border-color: #0d9488; background: #f0fdfa; }
.rfx-ds .rfx-cond-empty { font-size: 0.82rem; color: #8093a5; font-style: italic; padding: 6px 0; }

/* Aperçus lecture seule dans les drawers Infos/Questions. */
.rfx-ds .rfx-cond-preview-block { margin-bottom: 18px; }
.rfx-ds .rfx-cond-preview-block h4 { font-size: 0.9rem; font-weight: 700; color: #2D3E50; margin-bottom: 6px; }

/* Rendu lecture seule des cartes (display, AO envoyé). */
.rfx-ds .rfx-cond-ro-body { margin-top: 12px; }
.rfx-ds .rfx-cond-ro-type { font-size: 0.82rem; font-weight: 600; color: #0d9488; margin-bottom: 8px; }
.rfx-ds .rfx-cond-ro-text { font-size: 0.86rem; color: #2D3E50; border: 1px solid #eef1f4; border-radius: var(--r-md, 6px); padding: 12px; }
.rfx-ds .rfx-cond-ro-tabs { margin-bottom: 8px; }

/* Sélecteur de type d'accord NDA — radios visibles + rows cliquables (fix 2026-07-24 :
   les radios étaient masqués par un style global, libellés hérités verbeux). Override postérieur. */
.rfx-ds .rfx-cond-type-hint { font-size: 0.82rem; color: #5b6b7b; margin: 0 0 10px !important; }
.rfx-ds .rfx-cond-type .form-check {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; margin: 0 0 8px 0;
    border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.rfx-ds .rfx-cond-type .form-check:hover { border-color: #5eead4; background: #f0fdfa; }
.rfx-ds .rfx-cond-type .form-check-input {
    position: static; margin: 0; opacity: 1;
    width: 16px; height: 16px; accent-color: #0d9488; flex-shrink: 0; cursor: pointer;
}
.rfx-ds .rfx-cond-type .form-check-label { margin: 0; font-size: 0.88rem; color: #2D3E50; cursor: pointer; }

/* Modale documents NDA au-dessus du drawer Conditions (drawer=1061, overlay=1060). Fix 2026-07-24 :
   sinon la modale « Ajouter / base documentaire » s'ouvre sous le drawer et n'est pas cliquable. */
#addDocumentModal { z-index: 1075 !important; }

/* Base documentaire NDA — sélection inline par cases à cocher dans le drawer (2026-07-24). */
.rfx-ds .rfx-cond-basedocs { margin-top: 18px; }
.rfx-ds .rfx-cond-basedoc-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: 0.84rem; color: #2D3E50; cursor: pointer; margin: 0; }
.rfx-ds .rfx-cond-basedoc-row i { color: #64748b; }
.rfx-ds .rfx-cond-basedoc-cb { position: static; opacity: 1; margin: 0; width: 15px; height: 15px; accent-color: #0d9488; flex-shrink: 0; cursor: pointer; }
.rfx-ds .rfx-cond-basedoc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds #rfx-cond-basedoc-add { margin-top: 12px; }
.rfx-ds #rfx-cond-basedoc-add:disabled { opacity: 0.5; cursor: not-allowed; }
.rfx-ds .rfx-cond-save-next-off { cursor: not-allowed; opacity: 0.65; }

/* Avertissement « au moins un document » (carte + drawer) — accord de type document sans pièce (2026-07-24). */
.rfx-ds .rfx-cond-warning {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0; padding: 9px 12px; border-radius: var(--r-lg, 10px);
    background: #fffbeb; border: 1px solid #fde68a; color: #92600a; font-size: 0.82rem;
}
.rfx-ds .rfx-cond-warning i { color: #d97706; flex-shrink: 0; }

/* Documents NDA en collection inline dans le drawer (pattern contrat, 2026-07-24). */
.rfx-ds .rfx-cond-doc-entry { border: 1px solid #e6e9ee; border-radius: var(--r-md, 6px); padding: 10px 12px; margin: 0 0 10px 0; }
.rfx-ds .rfx-cond-doc-loaded { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #2D3E50; }
.rfx-ds .rfx-cond-doc-loaded i { color: #64748b; }
.rfx-ds .rfx-cond-doc-entry .delete-document-button { color: #b91c1c; text-decoration: none; font-size: 0.9rem; }
.rfx-ds .rfx-cond-doc-entry .field-label, .rfx-ds .rfx-cond-doc-entry .rfx-cond-field-label { margin-top: 6px; }
.rfx-ds .rfx-cond-doc-entry select, .rfx-ds .rfx-cond-doc-entry input[type="text"] { font-size: 0.85rem; }
.rfx-ds .rfx-cond-docs-save { margin: 4px 0 12px 0; }
.rfx-ds #rfp_nonDisclosureAgreementsDocuments .add_element_link { margin-top: 4px; }
/* Pas de glisser-déposer (bouton de sélection seul). */
.rfx-ds .rfx-cond-doc-entry .qq-upload-drop-area { display: none !important; }

/* Pas de glisser-deposer dans le drawer NDA (bouton de selection seul). */
.rfx-ds .rfx-cond-drawer .qq-upload-drop-area { display: none !important; }

/* Barre sticky bas du drawer NDA + bouton « Enregistrer et valider » + uploader compact (2026-07-24). */
.rfx-ds .rfx-cond-drawer-footer {
    flex-shrink: 0; padding: 12px 20px; border-top: 1px solid #e6e9ee; background: #fff;
    display: flex; justify-content: flex-end;
}
.rfx-ds .rfx-cond-validate-wrap { display: inline-block; }
.rfx-ds .rfx-cond-validate-btn {
    background: #0d9488; border: 1px solid #0d9488; color: #fff;
    font-size: 0.86rem; font-weight: 600; padding: 9px 18px; border-radius: var(--r-md, 6px); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rfx-ds .rfx-cond-validate-btn:hover:not(:disabled) { background: #0b7d72; border-color: #0b7d72; }
.rfx-ds .rfx-cond-validate-btn:disabled { background: #cbd5e1; border-color: #cbd5e1; color: #f8fafc; cursor: not-allowed; }

/* Uploader FineUploader compact : pas de zone glisser-déposer, bouton de sélection simple. */
.rfx-ds .rfx-cond-drawer .qq-upload-drop-area,
.rfx-ds .rfx-cond-drawer .qq-upload-drop-area-selector { display: none !important; }
.rfx-ds .rfx-cond-drawer .qq-uploader { min-height: 0 !important; }
.rfx-ds .rfx-cond-drawer .qq-upload-button {
    display: inline-block; background: #fff; border: 1px solid #cfd6de; border-radius: var(--r-md, 6px);
    color: #0d9488; font-size: 0.82rem; font-weight: 600; padding: 7px 12px; cursor: pointer; margin: 0;
}
.rfx-ds .rfx-cond-drawer .qq-upload-button:hover { border-color: #0d9488; background: #f0fdfa; }

/* Neutralise la zone glisser-déposer FineUploader dans le drawer NDA (bordure + texte fantôme
   .qq-uploader:before = attr(qq-drop-area-text)), en gardant le bouton de sélection. Fix 2026-07-24. */
.rfx-ds .rfx-cond-drawer .qq-uploader { border: none !important; padding: 0 !important; min-height: 0 !important; }
.rfx-ds .rfx-cond-drawer .qq-uploader:before,
.rfx-ds .rfx-cond-drawer .qq-uploader::before { content: none !important; display: none !important; }
.rfx-ds .rfx-cond-drawer .qq-upload-drop-area,
.rfx-ds .rfx-cond-drawer .qq-upload-extra-drop-area { display: none !important; }

/* Bandeau d'erreur en haut de la carte Accord de confidentialité. */
.rfx-ds .rfx-cond-error-top { margin: 0 0 12px 0; }

/* Nouvelle ligne de document (upload) — bouton fichier propre + selects Version/Type de même forme (2026-07-24). */
.rfx-ds .rfx-cond-doc-entry-new { border: 1px solid #e6e9ee; border-radius: var(--r-md, 6px); padding: 12px; margin-bottom: 12px; }
.rfx-ds .rfx-cond-doc-entry-head { display: flex; justify-content: flex-end; }
.rfx-ds .rfx-cond-doc-entry-new .rfx-cond-doc-del { color: #b91c1c; text-decoration: none; font-size: 0.95rem; }
.rfx-ds .rfx-cond-doc-entry-new .rfx-cond-field-label { display: block; margin: 10px 0 4px; }
.rfx-ds .rfx-cond-doc-entry-new .rfx-cond-doc-select {
    display: block; width: 100%; height: auto; padding: 8px 12px;
    font-size: 0.85rem; color: #2D3E50; background: #fff;
    border: 1px solid #dde1e7; border-radius: var(--r-md, 6px); -webkit-appearance: menulist; appearance: menulist;
}

/* Bouton « Choisir un document » : pas de float/largeur fixe FineUploader (qui le coupait / le passait à la ligne). */
.rfx-ds .rfx-cond-drawer .qq-upload-button {
    float: none !important; width: auto !important; max-width: none !important;
    display: inline-block; white-space: nowrap; margin: 0 0 6px 0 !important;
}
.rfx-ds .rfx-cond-drawer .qq-upload-button > div { white-space: nowrap; }

/* Croix de fermeture du drawer au-dessus de tout element FineUploader (2026-07-24). */
.rfx-ds .rfx-cond-drawer-head { position: relative; z-index: 5; }
.rfx-ds .rfx-cond-drawer-close { position: relative; z-index: 6; }
/* Dialog de confirmation FineUploader inutilise ici (suppression via la croix de ligne) : neutralise-le. */
.rfx-ds .rfx-cond-drawer .qq-confirm-dialog-selector,
.rfx-ds .rfx-cond-drawer dialog.qq-confirm-dialog-selector { display: none !important; }

/* Ligne « Type : … » + bouton Configurer a droite ; message d'erreur etroit (2026-07-24). */
.rfx-ds .rfx-cond-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rfx-ds .rfx-cond-summary-row .rfx-cond-summary { margin-bottom: 0; }
.rfx-ds .rfx-cond-summary-row .rfx-cond-configure { flex-shrink: 0; }
.rfx-ds .rfx-cond-error-inline { display: inline-flex; width: auto; max-width: 100%; margin-top: 10px; }

/* Configurer juste apres « Type : … » (espace, pas colle a droite de la carte). */
.rfx-ds .rfx-cond-summary-row { justify-content: flex-start; gap: 20px; }
/* Documents deja charges : fond teal clair pour les distinguer des docs base a cocher. */
.rfx-ds .rfx-cond-doc-entry-saved { background: #f0fdfa; border-color: #99f6e4; }
/* Badge « X documents » dans le resume de la carte. */
.rfx-ds .rfx-cond-doc-badge { display: inline-flex; align-items: center; background: #ccfbf1; color: #0f766e; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full, 999px); margin-left: 8px; white-space: nowrap; }

/* Zone teal UNIQUE « Ajoutés a cet appel d'offres » (un seul encadre pour tous les docs, 2026-07-24). */
.rfx-ds .rfx-cond-added-zone { margin-top: 16px; padding: 12px 14px; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: var(--r-lg, 10px); }
.rfx-ds .rfx-cond-added-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #0f766e; margin-bottom: 6px; }
.rfx-ds .rfx-cond-added-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid #cdeee8; font-size: 0.84rem; color: #2D3E50; }
.rfx-ds .rfx-cond-added-row:last-child { border-bottom: none; }
.rfx-ds .rfx-cond-added-row i { color: #64748b; }
.rfx-ds .rfx-cond-added-row .rfx-cond-doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-cond-added-row .rfx-cond-doc-dl { color: #0d9488; text-decoration: none; }
.rfx-ds .rfx-cond-added-row .rfx-cond-doc-del { color: #b91c1c; text-decoration: none; }

/* Alignement icone/texte dans le bandeau d'erreur de la carte. */
.rfx-ds .rfx-cond-error { display: flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-cond-error i { flex-shrink: 0; }

/* ── Finitions Conditions de participation (batch 2026-07-24) ── */

/* 1/ « Ajouter document » plus proche des docs a cocher + marge en dessous (avant la zone teal). */
.rfx-ds .rfx-cond-docs-collection { margin: 4px 0 22px; }
.rfx-ds .rfx-cond-docs-collection .form-group.row { margin-top: 6px !important; margin-bottom: 0; }

/* 4/ Meme taille de police pour tous les labels de toggle (NDA = Infos = Questions). */
.rfx-ds .rfx-cond-toggle .form-check-label { font-size: 0.9rem !important; font-weight: 400 !important; }

/* 7/ Headers des drawers au style DS (navy, titre 1.25rem, croix &times; 1.8rem). */
.rfx-ds .rfx-cond-drawer-head { padding: 13px 16px 12px; }
.rfx-ds .rfx-cond-drawer-title { font-size: 1.25rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--sp-w) - 80px); }
.rfx-ds .rfx-cond-drawer-close { font-size: 1.8rem; line-height: 1; color: rgba(255,255,255,0.55); padding: 0 0 0 12px; }
.rfx-ds .rfx-cond-drawer-close:hover { color: #fff; }

/* 8/ Note « Definies par votre administrateur » : italique teal petit, collee a l'intro. */
.rfx-ds .rfx-cond-admin-note { font-size: 0.78rem; font-style: italic; color: #0d9488; margin: -8px 0 14px; }

/* 9/ Aperçu Infos : masquer les sous-textes de format (bleu) sauf blocs Bilans/Groupe, mis en teal. */
.rfx-ds .rfx-cond-preview-nohint .text-info { display: none; }
.rfx-ds .rfx-cond-preview-teal .text-info { color: #0d9488 !important; }

/* 3/ Bouton du drawer NDA au style DS création (navy, plus petit, border-radius plus petit). */
.rfx-ds .rfx-cond-validate-btn { background: #2D3E50; border: 1px solid #2D3E50; color: #fff; font-size: 0.82rem; font-weight: 600; padding: 6px 16px; border-radius: var(--r-md, 6px); }
.rfx-ds .rfx-cond-validate-btn:hover:not(:disabled) { background: #1f2d3d; border-color: #1f2d3d; }
.rfx-ds .rfx-cond-validate-btn:disabled { background: #cbd5e1; border-color: #cbd5e1; color: #f8fafc; cursor: not-allowed; }
.rfx-ds .rfx-cond-drawer .qq-upload-button { border-radius: var(--r-md, 6px); padding: 6px 12px; font-size: 0.8rem; }

/* 4/ Hint teal italique « Les entreprises peuvent joindre des documents » (drawer Questionnaire). */
.rfx-ds .rfx-cond-hint-teal { font-size: 0.8rem; font-style: italic; color: #0d9488; padding-top: 2px; }

/* Point 1 (v2) : bouton NDA = style « Suivant » des drawers DS (teal, padding 0.42rem 1.2rem, radius 2px). */
.rfx-ds .rfx-cond-validate-btn { background: #0d9488; border: 1px solid #0d9488; color: #fff; font-size: 0.84rem; font-weight: 500; padding: 0.42rem 1.2rem; border-radius: var(--r-md, 6px); }
.rfx-ds .rfx-cond-validate-btn:hover:not(:disabled) { background: #0f766e; border-color: #0f766e; }
.rfx-ds .rfx-cond-validate-btn:disabled { background: #cbd5e1; border-color: #cbd5e1; color: #f8fafc; cursor: not-allowed; }

/* Point 2 : titre des headers de drawer nettement plus grand (aligne sur le drawer Filtrer du hub Listes = 1.6rem). */
.rfx-ds .rfx-cond-drawer .ds-drawer-header h4 { font-size: 1.6rem; line-height: 1.2; }

/* Message verrouille toolbar Acces interne (bascule round). */
.rfx-ds .rfx-toolbar-locked { font-size: 0.82rem; color: #8093a5; display: inline-flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-toolbar-locked i { color: #b0bac5; }

/* Bouton NDA « Enregistrer et fermer » = btn-success (comme « Valider et continuer »), etat desactive clair. */
.rfx-ds #rfx-cond-docs-validate:disabled { opacity: 0.5; cursor: not-allowed; }

/* Force le titre des headers de drawer (Anton navy 1.6rem) : une regle plus specifique/!important l'ecrasait. */
.rfx-ds .rfx-cond-drawer .ds-drawer-header h4 {
    font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: #2D3E50 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
}

/* Notices/erreurs (_rfp_notices) alignees sur le contenu des pages rfx-ds (au lieu du col-md-10 centre flottant). */
.rfx-ds .row.bg-white.justify-content-center.pt-2 > .col-md-10 { flex: 0 0 100%; max-width: 100%; padding-left: 40px; padding-right: 40px; }

/* Bandeau final Acces interne (refonte AO 2026-07-25) : message config terminee + bouton « Creer le premier round ». */
.rfx-ds .rfx-final-banner { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--r-lg, 10px); margin: 4px 0 24px; }
.rfx-ds .rfx-final-banner-success { background: #ecfdf5; border: 1px solid #a7f3d0; }
.rfx-ds .rfx-final-banner-locked { background: #f8fafc; border: 1px solid #e2e8f0; }
.rfx-ds .rfx-final-banner-icon { font-size: 1.9rem; flex-shrink: 0; line-height: 1; }
.rfx-ds .rfx-final-banner-success .rfx-final-banner-icon { color: #059669; }
.rfx-ds .rfx-final-banner-locked .rfx-final-banner-icon { color: #94a3b8; }
.rfx-ds .rfx-final-banner-text { flex: 1 1 auto; color: #334155; line-height: 1.5; font-size: 0.95rem; }
.rfx-ds .rfx-final-banner-success .rfx-final-banner-text span { color: #065f46; }
.rfx-ds .rfx-final-banner-btn { flex-shrink: 0; white-space: nowrap; }

/* Presentation : toggle « Voir tous les champs » inline a droite du hint (refonte AO 2026-07-25). */
.rfx-ds .rfx-pres-intro-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rfx-ds .rfx-pres-intro-row .rfx-card-intro { flex: 0 1 auto; }
.rfx-ds .rfx-pres-intro-row .rfx-show-filled-toggle { flex: 0 0 auto; white-space: nowrap; }

/* Acces : hints remontes en haut des cards -> espace sous le badge (refonte AO 2026-07-25). */
.rfx-ds .rfx-access-badge-top { margin-top: 0; margin-bottom: 16px; }

/* Empty state Planning : sous-titre non gras sous le titre (refonte AO 2026-07-25). */
.ctx-empty-state-subtitle { font-size: 0.75rem; font-weight: 400 !important; color: #adbdcc; line-height: 1.5; max-width: 230px; }

/* Onglets AO aval verrouilles tant qu'aucun round n'existe (refonte AO 2026-07-25) : curseur not-allowed sur le
   <li> porteur du tooltip (le <a>.disabled a deja pointer-events:none). */
#mainRfpTabs .nav-item[data-toggle="tooltip"] { cursor: not-allowed; }

/* ===== Onglet Questions AO (refonte AO 2026-07-25) : liste + barre filtres + drawer ===== */

/* Bandeau contextuel (hint selon statut du round) */
.rfx-ds .rfx-q-hint { display: flex; gap: 12px; align-items: flex-start; background: #ecfaf7; border: 1px solid #cfeee7; border-radius: var(--r-lg, 10px); padding: 14px 18px; margin: 4px 0 18px; }
.rfx-ds .rfx-q-hint-icon { color: #0d9488; font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.rfx-ds .rfx-q-hint-text { color: #334155; line-height: 1.55; font-size: 0.9rem; }
.rfx-ds .rfx-q-hint-text b, .rfx-ds .rfx-q-hint-text strong { color: #0f766e; }

/* Barre filtres (toggle + recherche) */
.rfx-ds .rfx-q-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.rfx-ds .rfx-q-toggle { display: inline-flex; border: 1px solid #d7e0ea; border-radius: var(--r-md, 6px); overflow: hidden; }
.rfx-ds .rfx-q-toggle-btn { border: none; background: #fff; color: #5b6b7b; font-size: 0.85rem; font-weight: 500; padding: 7px 16px; cursor: pointer; }
.rfx-ds .rfx-q-toggle-btn + .rfx-q-toggle-btn { border-left: 1px solid #d7e0ea; }
.rfx-ds .rfx-q-toggle-btn.active { background: #d9f2ee; color: #0f766e; }
.rfx-ds .rfx-q-toggle-btn:focus { outline: none; }
.rfx-ds .rfx-q-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--r-full, 999px); background: #e2e8f0; color: #334155; font-size: 0.72rem; line-height: 16px; text-align: center; margin-left: 4px; }
.rfx-ds .rfx-q-toggle-btn.active .rfx-q-count { background: rgba(13,148,136,0.18); color: #0f766e; }
/* Avancement de l evaluation, porte par son entree du selecteur (etape 4, 2026-09-06).
   L information vivait dans la barre d actions du bas ; en deplacant l entree, il fallait la
   deplacer avec elle, sinon on perdait ce que la pastille disait. Memes seuils de couleur. */
.rfx-ds .rfx-q-toggle-badge{display:inline-block;margin-left:.35rem;padding:1px 6px;
    border-radius:var(--r-full,999px);background:#fdecec;color:#d08585;
    font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:baseline;}
.rfx-ds .rfx-q-toggle-badge-part{background:#fdf3e3;color:#c79a52;}
.rfx-ds .rfx-q-toggle-badge-done{background:#e6f5e6;color:#6aa06a;}
.rfx-ds .rfx-q-search { position: relative; }
.rfx-ds .rfx-q-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.8rem; }
.rfx-ds .rfx-q-search-input { border: 1px solid #d7e0ea; border-radius: var(--r-md, 6px); padding: 7px 12px 7px 32px; font-size: 0.85rem; min-width: 420px; font-weight: 400; }
.rfx-ds .rfx-q-search-input::placeholder { font-weight: 400; color: #9aa8b5; }
.rfx-ds .rfx-q-wrap { padding: 12px 20px 24px; }
.rfx-ds .rfx-q-search-input:focus { outline: none; border-color: #0d9488; }

/* Tableau DS (grille alignée en-tête/lignes) */
.rfx-ds .rfx-q-head, .rfx-ds .rfx-q-row { display: grid; grid-template-columns: 88px 1.4fr 2fr 100px 1.1fr 1fr 96px; gap: 12px; align-items: center; padding: 12px 8px; }
.rfx-ds .rfx-q-head { border-bottom: 2px solid #e8edf3; color: #8194a6; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; padding-top: 4px; padding-bottom: 10px; }
.rfx-ds .rfx-q-row { border-bottom: 1px solid #eef2f6; cursor: pointer; font-size: 0.9rem; color: #334155; transition: background 0.12s; }
.rfx-ds .rfx-q-row:hover { background: #f7fafc; }
/* Colonnes : mise en forme (couleur/taille) scopée aux LIGNES → l'en-tête garde sa police uniforme. */
.rfx-ds .rfx-q-c-supplier, .rfx-ds .rfx-q-c-subject { overflow: hidden; text-overflow: ellipsis; }
.rfx-ds .rfx-q-c-num, .rfx-ds .rfx-q-c-round, .rfx-ds .rfx-q-c-date, .rfx-ds .rfx-q-c-status, .rfx-ds .rfx-q-c-scope { white-space: nowrap; }
.rfx-ds .rfx-q-row .rfx-q-c-num { position: relative; color: #64748b; font-variant-numeric: tabular-nums; }
.rfx-ds .rfx-q-row .rfx-q-c-supplier { color: #334155; }
.rfx-ds .rfx-q-row .rfx-q-c-subject { color: #334155; }
.rfx-ds .rfx-q-row .rfx-q-c-round, .rfx-ds .rfx-q-row .rfx-q-c-date { color: #94a3b8; font-size: 0.82rem; }

/* Pastille non-lu : signal discret (dot bleu + N°/objet légèrement plus foncés) — pas de gras (uniformité). */
.rfx-ds .rfx-q-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-right: 7px; vertical-align: middle; }
.rfx-ds .rfx-q-row[data-unread] .rfx-q-dot { background: #3b82f6; }
.rfx-ds .rfx-q-row[data-unread] .rfx-q-c-num, .rfx-ds .rfx-q-row[data-unread] .rfx-q-c-subject { color: #1e293b; font-weight: 600; }

.rfx-ds .rfx-q-noresult { padding: 24px; text-align: center; color: #94a3b8; font-size: 0.85rem; }
.rfx-ds .rfx-q-empty { padding: 40px 16px; }

/* ===== Drawer question (hors .rfx-ds : conteneur #rfpMessageDrawer top-level) ===== */
#rfpMessageDrawer .rfx-q-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: #fff; border-bottom: 1px solid #e8edf3; }
#rfpMessageDrawer .rfx-q-drawer-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#rfpMessageDrawer .rfx-q-drawer-num { color: #0d9488; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
#rfpMessageDrawer .rfx-q-drawer-title h4 { margin: 0; font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #2D3E50 !important; font-size: 1.5rem !important; font-weight: 400 !important; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rfpMessageDrawer .rfx-q-drawer-body { padding: 0; }
#rfpMessageDrawer .rfx-q-drawer-close { border: none; background: none; font-size: 1.6rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
#rfpMessageDrawer .rfx-q-drawer-close:hover { color: #334155; }
#rfpMessageDrawer .rfx-q-drawer-meta { padding: 14px 24px; background: #eef3f7; border-bottom: 1px solid #dbe4ec; font-size: 0.82rem; color: #64748b; }
#rfpMessageDrawer .rfx-q-meta-status, #rfpMessageDrawer .rfx-q-meta-scope { margin-top: 6px; color: #334155; font-size: 0.85rem; }
#rfpMessageDrawer .rfx-q-meta-scope-note { color: #94a3b8; font-style: italic; margin-left: 8px; }
#rfpMessageDrawer .rfx-q-field { padding: 16px 24px 0; }
#rfpMessageDrawer .rfx-q-label { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; color: #8194a6; font-weight: 600; margin-bottom: 6px; }
#rfpMessageDrawer .rfx-q-question, #rfpMessageDrawer .rfx-q-answer { color: #334155; line-height: 1.55; font-size: 0.9rem; white-space: pre-line; }
#rfpMessageDrawer .rfx-q-reformulate { padding: 14px 24px 0; }
#rfpMessageDrawer .rfx-q-reformulate .rfx-q-hint-inline { margin-top: 8px; }
#rfpMessageDrawer .rfx-q-hint-inline { color: #94a3b8; font-style: italic; font-size: 0.8rem; margin-top: 6px; }
#rfpMessageDrawer .rfx-q-drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid #e8edf3; background: #fff; }
#rfpMessageDrawer .rfx-q-drawer-actions { display: flex; gap: 10px; }
#rfpMessageDrawer .rfx-q-doc-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; }
#rfpMessageDrawer .rfx-q-doc-name { flex: 1 1 auto; color: #334155; }
#rfpMessageDrawer .rfx-q-doc-icon { color: #94a3b8; margin-right: 4px; }
#rfpMessageDrawer .rfx-q-doc-cat { color: #94a3b8; flex-shrink: 0; }
#rfpMessageDrawer .rfx-q-doc-actions { flex-shrink: 0; }
#rfpMessageDrawer .rfx-q-doc-actions a { color: #0d9488; margin-left: 10px; }
/* 2026-09-22 : en ÉDITION (brouillon), la collection de documents du formulaire reprend le rendu de la consultation :
   ligne fine, libellé gris ardoise, icônes teal (le thème de formulaire sort des liens bleus par défaut). */
#rfpMessageDrawer #rfp_message_answer_documents .document-row { align-items: center; padding: 7px 0; margin: 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #334155; }
#rfpMessageDrawer #rfp_message_answer_documents .document-row i.far-file, #rfpMessageDrawer #rfp_message_answer_documents .document-row i[class*="fa-file"] { color: #94a3b8; }
#rfpMessageDrawer #rfp_message_answer_documents .document-row a { color: #0d9488; }
#rfpMessageDrawer #rfp_message_answer_documents .document-row a i { color: #0d9488; }

/* Drawer Questions : boutons/radios en teal DS (override red-light/bleu, scopé #rfpMessageDrawer) — refonte AO 2026-07-25. */
/* Boutons OUTLINE teal (texte+bord teal, fond transparent) — !important pour battre le red-light/grey-light
   rendus pleins (dont FineUploader .add_element_link). Ajouter document / Éditer la question / Enregistrer brouillon. */
#rfpMessageDrawer .btn-outline-red-light,
#rfpMessageDrawer .add_element_link.btn-outline-red-light,
#rfpMessageDrawer .btn-outline-grey-light { color: #0d9488 !important; background: transparent !important; border: 1px solid #0d9488 !important; }
#rfpMessageDrawer .btn-outline-red-light:hover, #rfpMessageDrawer .btn-outline-red-light:focus,
#rfpMessageDrawer .add_element_link.btn-outline-red-light:hover, #rfpMessageDrawer .add_element_link.btn-outline-red-light:focus,
#rfpMessageDrawer .btn-outline-grey-light:hover, #rfpMessageDrawer .btn-outline-grey-light:focus { background: #0d9488 !important; color: #fff !important; border-color: #0d9488 !important; }
/* Bouton primaire « Envoyer la réponse » = plein teal. */
#rfpMessageDrawer .btn-red-light { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
#rfpMessageDrawer .btn-red-light:hover, #rfpMessageDrawer .btn-red-light:focus { background-color: #0b7f74 !important; border-color: #0b7f74 !important; }
/* Bouton « Fermer » classique : fond blanc, bordure grise. */
#rfpMessageDrawer .rfx-q-btn-cancel { background: #fff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; }
#rfpMessageDrawer .rfx-q-btn-cancel:hover, #rfpMessageDrawer .rfx-q-btn-cancel:focus { background: #f1f5f9 !important; color: #334155 !important; }
/* Radios : teal désormais géré globalement dans app.css (norme app, ex-#3197EE → #0d9488) — plus d'override ici. */
/* « Ajouter document » (FineUploader, btn-xs) à la même taille que « Éditer la question » (btn par défaut). */
#rfpMessageDrawer .rfx-q-reformulate .btn, #rfpMessageDrawer .add_element_link.btn { padding: .4rem .9rem !important; font-size: 0.9rem !important; line-height: 1.4 !important; border-radius: var(--r-md, 6px)!important; }

/* Drawer Questions : 2 zones (contexte question teinté / réponse blanche) — refonte AO 2026-07-25. */
#rfpMessageDrawer .rfx-q-context { background: #f1f6fa; border-bottom: 1px solid #dbe4ec; padding-bottom: 16px; }
#rfpMessageDrawer .rfx-q-context .rfx-q-drawer-meta { background: transparent; border-bottom: 1px solid #cdd8e2; }
/* En édition, le <form> enveloppe header/body/footer → il devient l'unique enfant flex du drawer. On le rend
   flex-column pleine hauteur pour restaurer la chaîne (body flex:1 + footer collé). En display : pas de form. */
#rfpMessageDrawer form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#rfpMessageDrawer .rfx-q-answer-zone { padding: 8px 0 10px; }
#rfpMessageDrawer .rfx-q-field-first { padding-top: 0; }
/* Footer collé en bas : le socle .drawer-body (app.css) n'a pas min-height:0 → le contenu poussait le footer hors du bas. */
#rfpMessageDrawer .drawer-body { min-height: 0; }
/* Espace entre les 2 choix de portée. */
#rfpMessageDrawer #rfp_message_answer_scope .form-check { margin-bottom: 10px; }
#rfpMessageDrawer .rfx-q-zone-title { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; font-weight: 700; color: #2D3E50; padding: 18px 24px 2px; }

/* Popover de confirmation d'envoi (diffusion) au DS — refonte AO 2026-07-26. */
#rfpMessageDrawer .popover { border: 1px solid #dbe4ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(45,62,80,0.14); max-width: 340px; }
#rfpMessageDrawer .popover .popover-body { padding: 16px 18px; }
#rfpMessageDrawer .rfx-q-confirm-text { color: #334155; font-size: 0.9rem; line-height: 1.5; }
#rfpMessageDrawer .rfx-q-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
#rfpMessageDrawer .rfx-q-btn-confirm { background: #0d9488 !important; border: 1px solid #0d9488 !important; color: #fff !important; }
#rfpMessageDrawer .rfx-q-btn-confirm:hover, #rfpMessageDrawer .rfx-q-btn-confirm:focus { background: #0b7f74 !important; border-color: #0b7f74 !important; }

/* ============================================================================
   Onglet Pilotage (refonte AO acheteur, 2026-07-26) - route rfp_results_status.
   Reskin visuel : barre d'actions regroupee, tuiles KPI legeres, cards DS
   (Suivi par entreprise + Suivi NDA), tableau matriciel plus aere. Emojis
   conserves (harmonise Questions). Reutilise .rfx-card. Scope .rfx-ds.
   ============================================================================ */

/* --- Barre d'actions : pilotage a gauche / transitions d'etat a droite --- */
.rfx-ds .rfx-pil-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.rfx-ds .rfx-pil-actions-left,
.rfx-ds .rfx-pil-actions-right { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rfx-ds .rfx-pil-actions .btn { margin: 0 !important; }

/* --- Tuiles KPI (reskin leger, pas de card) --- */
.rfx-ds .rfx-pil-kpis { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rfx-ds .rfx-pil-kpis > [class*="col-md-3"] { flex: 1 1 0; max-width: none; padding: 0; margin: 0; }
.rfx-ds .rfx-pil-kpis .bg-light { background: #f8fafb !important; border: 1px solid #e7ecf1; border-radius: 2px; padding: 16px 18px !important; height: 100%; }
.rfx-ds .rfx-pil-kpis .h2 { font-size: 0.8rem !important; font-weight: 400 !important; color: #64748b; margin: 0; }
.rfx-ds .rfx-pil-kpis .h1 { font-size: 1.6rem !important; font-weight: 700 !important; color: #2D3E50; margin: 8px 0 0 !important; }
/* Pilotage 3 etats (A1) : ligne secondaire de la tuile Offres (recues / en preparation / non entamees). */
.rfx-ds .rfx-pil-kpis .rfx-pil-kpi-sub { font-size: 0.72rem; color: #64748b; margin-top: 6px; }

/* --- Card Suivi : body sans padding pour laisser le tableau pleine largeur --- */
.rfx-ds .rfx-pil-card-body { padding: 0; }
.rfx-ds .rfx-pil-tablewrap { overflow-x: auto; }

/* --- Tableau Suivi par entreprise : typo DS, air, groupes lisibles (emojis conserves) --- */
.rfx-ds .rfx-pil-table { margin-bottom: 0; }
.rfx-ds .rfx-pil-table thead th {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: #64748b; vertical-align: bottom; padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0 !important; white-space: nowrap;
}
.rfx-ds .rfx-pil-table tbody td {
    font-size: 0.82rem; font-weight: 400; color: #2D3E50; vertical-align: top;
    padding: 12px 14px; line-height: 1.4; border-top: 1px solid #f1f5f9;
}
.rfx-ds .rfx-pil-table tbody tr:hover td { background: #f6fafb; }
.rfx-ds .rfx-pil-table tbody td:first-child { font-weight: 600; }
/* Colonne Entreprise figee pendant le scroll horizontal */
.rfx-ds .rfx-pil-table thead th:first-child,
.rfx-ds .rfx-pil-table tbody td:first-child { position: sticky; left: 0; z-index: 2; }
/* Separateurs de groupes (amont | rounds | actions) */
.rfx-ds .rfx-pil-table .border-left { border-left: 1px solid #e2e8f0 !important; }
.rfx-ds .rfx-pil-table .border-right { border-right: 1px solid #e2e8f0 !important; }
/* --- Pilotage : raffinements 2026-07-26 (marges 40px via structure, radius, polices, loupes, card NDA) --- */
/* Radius harmonise sur boutons danger/success (Fermer le round, Rejeter, Accepter) */
.rfx-ds .btn-danger, .rfx-ds .btn-outline-danger, .rfx-ds .btn-success { border-radius: var(--r-md, 6px); }

/* Tableau : polices reduites (en-tetes surtout) */
.rfx-ds .rfx-pil-table thead th { font-size: 0.66rem; }
.rfx-ds .rfx-pil-table tbody td { font-size: 0.78rem; }

/* Loupe colonne Fiche identite alignee a droite de la cellule */
.rfx-ds .rfx-pil-table .open-edit-supplier-modal-button { float: right; margin-left: 8px; color: #0d9488; }

/* Card NDA : liste des accords (part 1) */
.rfx-ds .rfx-pil-nda-list { display: flex; flex-direction: column; }
.rfx-ds .rfx-pil-nda-row { display: flex; gap: 24px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.rfx-ds .rfx-pil-nda-row:last-child { border-bottom: none; }
.rfx-ds .rfx-pil-nda-name { flex: 0 0 240px; font-size: 0.85rem; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-pil-nda-status { flex: 1 1 auto; font-size: 0.82rem; color: #415873; }
.rfx-ds .rfx-pil-nda-status .fa-check-circle { color: #0d9488; margin-right: 4px; }

/* Card NDA : demandes de validation (part 2) */
.rfx-ds .rfx-pil-nda-subtitle { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin: 22px 0 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(45,62,80,0.10); }
.rfx-ds .rfx-pil-req-list { display: flex; flex-direction: column; gap: 8px; }
.rfx-ds .rfx-pil-req-row { display: flex; align-items: center; gap: 20px; padding: 10px 14px; background: #f8fafb; border: 1px solid #e7ecf1; border-radius: 2px; }
.rfx-ds .rfx-pil-req-name { flex: 0 0 220px; font-size: 0.85rem; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-pil-req-doc { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #415873; }
.rfx-ds .rfx-pil-req-doc-icon { color: #8fa1b3; }
.rfx-ds .rfx-pil-req-doc a { color: #0d9488; }
.rfx-ds .rfx-pil-req-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-pil-req-actions .btn { padding: 5px 14px !important; font-size: 0.82rem !important; margin: 0 !important; }
.rfx-ds .rfx-pil-req-state { font-size: 0.8rem; }
.rfx-ds .rfx-pil-req-state-ok { color: #0f766e; }
.rfx-ds .rfx-pil-req-state-ko { color: #b91c1c; }
.rfx-ds .rfx-pil-nda-empty { font-size: 0.85rem; color: #64748b; padding: 8px 0; }
/* --- Pilotage NDA bis (2026-07-26) : box "Documents soumis pour approbation" + largeurs + en-tetes tableau --- */
.rfx-ds .rfx-pil-req-box { border: 1px solid #e7ecf1; border-radius: var(--r-lg, 10px); margin-top: 20px; overflow: hidden; }
.rfx-ds .rfx-pil-req-box-head { background: #eef6f5; color: #0f766e; font-size: 0.85rem; font-weight: 600; padding: 10px 16px; border-bottom: 1px solid #d7e6e3; }
.rfx-ds .rfx-pil-req-box-body { padding: 8px 16px 14px; }
.rfx-ds .rfx-pil-req-box .rfx-pil-req-list { gap: 0; }
.rfx-ds .rfx-pil-req-box .rfx-pil-req-row { background: transparent; border: none; border-bottom: 1px solid #f1f5f9; border-radius: 0; padding: 11px 0; }
.rfx-ds .rfx-pil-req-box .rfx-pil-req-row:last-child { border-bottom: none; }
/* Plus de place aux noms d'entreprises et de documents ; boutons ramenes vers la gauche (doc ne pousse plus) */
.rfx-ds .rfx-pil-req-name { flex: 0 1 300px; }
.rfx-ds .rfx-pil-req-doc { flex: 0 1 auto; }
.rfx-ds .rfx-pil-req-doc a { margin-left: 12px; }
/* En-tetes de colonnes du tableau encore un peu plus petits */
.rfx-ds .rfx-pil-table thead th { font-size: 0.62rem; }
/* --- Pilotage ter (2026-07-26) : reprise taille cellules (ecrasees par .rfx-ds .container-scrollable .h4{0.85rem!important})
   -> specificite >= 3 classes + !important. Alignement boutons via largeurs fixes. --- */
.rfx-ds .rfx-pil-table thead th.h4 { font-size: 0.62rem !important; font-weight: 600 !important; color: #64748b !important; line-height: 1.3 !important; }
.rfx-ds .rfx-pil-table tbody td.h4 { font-size: 0.78rem !important; line-height: 1.4 !important; }
.rfx-ds .rfx-pil-table tbody td.h4:first-child { font-weight: 600 !important; color: #2D3E50 !important; }

/* NDA "Documents soumis pour approbation" : largeurs FIXES -> boutons Accepter/Rejeter alignes entre lignes */
.rfx-ds .rfx-pil-req-name { flex: 0 0 280px; }
.rfx-ds .rfx-pil-req-doc { flex: 0 0 360px; }
.rfx-ds .rfx-pil-req-doc span { overflow-wrap: anywhere; }
/* --- Pilotage quater (2026-07-26) : juste milieu libelles colonnes + largeurs noms entreprises harmonisees + espace Telecharger --- */
/* Libelles de colonnes : 0.62 trop petit -> juste milieu (corps de cellule 0.78 conserve) */
.rfx-ds .rfx-pil-table thead th.h4 { font-size: 0.70rem !important; }
/* Nom entreprise : meme largeur dans les 2 parties (liste accords + documents soumis) */
.rfx-ds .rfx-pil-nda-name { flex: 0 0 340px; }
.rfx-ds .rfx-pil-req-name { flex: 0 0 340px; }
/* Plus d'espace avant le bouton Telecharger */
.rfx-ds .rfx-pil-req-doc a { margin-left: 20px; }
/* ============================================================================
   Pilotage tableau — badges de statut + dates mutées + actions + repli amont
   (refonte AO acheteur, 2026-07-26). Scope .rfx-ds.
   ============================================================================ */
/* Badges de statut (pastille dot + libelle) */
.rfx-ds .rfx-pil-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.rfx-ds .rfx-pil-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.rfx-ds .rfx-pil-badge-green { color: #0f766e; background: #d9f2ee; }
.rfx-ds .rfx-pil-badge-red { color: #b91c1c; background: #fee2e2; }
.rfx-ds .rfx-pil-badge-orange { color: #c2410c; background: #ffedd5; }
.rfx-ds .rfx-pil-badge-blue { color: #1d4ed8; background: #dbeafe; }
.rfx-ds .rfx-pil-badge-amber { color: #a16207; background: #fef9c3; }
.rfx-ds .rfx-pil-badge-neutral { color: #64748b; background: #eef2f6; }
/* Date secondaire mutee sous le badge */
.rfx-ds .rfx-pil-table .rfx-pil-date { display: block; font-size: 0.68rem; color: #94a3b8; margin-top: 3px; }
/* N/A discret */
.rfx-ds .rfx-pil-table .rfx-pil-na { color: #cbd5e1; }
/* Badges d'action (colonne Actions a mener) */
.rfx-ds .rfx-pil-action { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-sm, 3px); font-size: 0.74rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.rfx-ds a.rfx-pil-action { transition: background .15s, color .15s; }
.rfx-ds .rfx-pil-action-go { color: #0f766e; background: #d9f2ee; }
.rfx-ds a.rfx-pil-action-go:hover { background: #0d9488; color: #fff !important; text-decoration: none; }
.rfx-ds .rfx-pil-action-warn { color: #b45309; background: #fef3c7; }
.rfx-ds .rfx-pil-action-wait { color: #64748b; background: #eef2f6; }
/* Bouton repli du suivi amont + colonnes repliees */
.rfx-ds .rfx-pil-collapse-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #d7e0e8; border-radius: var(--r-md, 6px); color: #64748b; font-size: 0.75rem; font-weight: 500; padding: 4px 10px; cursor: pointer; transition: all .15s; }
.rfx-ds .rfx-pil-collapse-toggle:hover { border-color: #0d9488; color: #0d9488; }
.rfx-ds .rfx-pil-collapse-toggle:focus { outline: none; box-shadow: none; }
.rfx-ds .rfx-pil-collapse-icon { font-size: 0.7rem; }
.rfx-ds .rfx-pil-table.amont-collapsed .rfx-pil-amont { display: none; }
/* Badges statut round supplementaires : violet (brouillon/draft) + dark (non retenu) */
.rfx-ds .rfx-pil-badge-violet { color: #6d28d9; background: #ede9fe; }
.rfx-ds .rfx-pil-badge-dark { color: #475569; background: #e2e8f0; }
/* Bouton repli repositionne dans le separateur de colonnes (frontiere groupe amont) */
.rfx-ds .rfx-pil-amont-handle { padding: 6px 3px !important; vertical-align: middle; text-align: center; }
.rfx-ds .rfx-pil-amont-handle .rfx-pil-collapse-toggle { margin: 0; padding: 3px 6px; background: #fff; }
/* ============================================================================
   Onglet Diffusion — étape Documents (refonte AO 2026-07-26). Scope .rfx-ds.
   ============================================================================ */
.rfx-ds .rfx-doc-wrap { max-width: 1100px; }
/* ⚠️ SANS SCOPE, volontairement (2026-08-28) : cet encart doit fonctionner AUSSI hors des ecrans
   `.rfx-ds` — module Evaluation et back-office notamment, ou la version scopee ne produisait rien
   (le texte serait reste nu). Aucun autre composant ne porte ce nom, et toutes les surcharges
   existantes sont plus specifiques, donc prioritaires. Se re-scope en remettant `.rfx-ds `. */
.rfx-doc-hint { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 18px; background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-lg, 10px); color: #0b7d72; font-size: 0.85rem; line-height: 1.45; }
.rfx-doc-hint .rfx-doc-hint-icon { color: #0d9488; margin-top: 2px; flex: 0 0 auto; }
.rfx-ds .rfx-doc-hint-icon { margin-top: 2px; flex-shrink: 0; }
.rfx-ds .rfx-doc-subhint { font-size: 0.85rem; color: #64748b; margin-bottom: 18px; }
.rfx-ds .rfx-doc-card { margin-bottom: 18px; }
.rfx-ds .rfx-doc-history { font-size: 0.78rem; color: #64748b; text-decoration: none; }
.rfx-ds .rfx-doc-history:hover { color: #0d9488; text-decoration: underline; }
.rfx-ds .rfx-doc-desc { font-size: 0.82rem; color: #64748b; margin: 0 0 14px; line-height: 1.45; }
/* Tableau documents (grille) */
.rfx-ds .rfx-doc-table { display: flex; flex-direction: column; }
.rfx-ds .rfx-doc-head, .rfx-ds .rfx-doc-row { display: grid; grid-template-columns: minmax(280px,4.2fr) 1.2fr 0.8fr 0.8fr 0.65fr 92px; gap: 12px; align-items: center; padding: 9px 4px; }
.rfx-ds .rfx-doc-head { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.rfx-ds .rfx-doc-row { border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #2D3E50; }
.rfx-ds .rfx-doc-row:last-child { border-bottom: none; }
.rfx-ds .rfx-doc-row:hover { background: #f8fafb; }
.rfx-ds .rfx-doc-c-label { font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rfx-ds .rfx-doc-c-label .rfx-doc-fileicon { color: #8fa1b3; flex-shrink: 0; }
.rfx-ds .rfx-doc-c-cat, .rfx-ds .rfx-doc-c-round, .rfx-ds .rfx-doc-c-date { font-size: 0.8rem; color: #64748b; }
.rfx-ds .rfx-doc-c-size { font-size: 0.78rem; color: #94a3b8; text-align: right; }
.rfx-ds .rfx-doc-c-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.rfx-ds .rfx-doc-c-actions a { color: #0d9488; }
.rfx-ds .rfx-doc-c-actions .btnDelete { color: #b91c1c; }
.rfx-ds .rfx-doc-nextround { color: #c2410c; margin-left: 4px; cursor: help; }
.rfx-ds .rfx-doc-empty { font-size: 0.85rem; color: #94a3b8; padding: 10px 0; }
.rfx-ds .rfx-doc-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Modale « Copier les documents » (Diffusion Documents) */
.rfx-ds .rfx-doc-copy-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #64748b; margin-bottom: 10px; cursor: pointer; }
.rfx-ds .rfx-doc-hint strong { font-weight: 600; }
.rfx-ds .rfx-doc-desc strong { font-weight: 600; }
.rfx-ds .rfx-doc-copy-selectall { padding-left: 4px; }
.rfx-ds .rfx-doc-copy-list { display: flex; flex-direction: column; }
.rfx-ds .rfx-doc-copy-row { display: grid; grid-template-columns: 26px minmax(150px,2.5fr) 1.4fr 0.7fr 64px; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; }
.rfx-ds .rfx-doc-copy-row:last-child { border-bottom: none; }
.rfx-ds .rfx-doc-copy-check { display: flex; align-items: center; }
.rfx-ds .rfx-doc-copy-name { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #2D3E50; min-width: 0; }
.rfx-ds .rfx-doc-copy-cat { font-size: 0.8rem; color: #64748b; }
.rfx-ds .rfx-doc-copy-size { font-size: 0.78rem; color: #94a3b8; text-align: right; }
.rfx-ds .rfx-doc-copy-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rfx-ds .rfx-doc-copy-actions a { color: #0d9488; }
.rfx-ds .rfx-doc-badge-grid { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; background: #e6f7f4; color: #0b7d72; border: 1px solid #cceae7; border-radius: 10px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; cursor: help; }
.rfx-ds .rfx-doc-badge-grid i { font-size: 0.62rem; }
/* Documents — retours 2026-07-26 : cards pleine largeur + colonnes tableau uniformes (façon Pilotage) */
.rfx-ds .rfx-doc-wrap { max-width: none; }
.rfx-ds .rfx-doc-head { font-size: 0.7rem; }
.rfx-ds .rfx-doc-row { font-size: 0.8rem; }
.rfx-ds .rfx-doc-c-label { font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-doc-c-cat, .rfx-ds .rfx-doc-c-round, .rfx-ds .rfx-doc-c-date { font-size: 0.8rem; color: #64748b; }
.rfx-ds .rfx-doc-c-size { font-size: 0.8rem; color: #64748b; text-align: right; }
/* Documents — fix harmonisation tailles (les règles de colonne débordaient sur l'en-tête). Aligné sur Pilotage. */
.rfx-ds .rfx-doc-head, .rfx-ds .rfx-doc-head > div { font-size: 0.62rem !important; }
.rfx-ds .rfx-doc-row, .rfx-ds .rfx-doc-row > div { font-size: 0.78rem !important; }
/* Sas diffusion documents : badge « Préparé » (staged) + barre d'action « Diffuser » */
.rfx-ds .rfx-doc-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-full, 999px); font-size: 0.68rem; font-weight: 600; margin-left: 6px; vertical-align: middle; }
.rfx-ds .rfx-doc-badge-staged { color: #b45309; background: #fef3c7; }
.rfx-ds .rfx-doc-diffuse-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 10px 14px; background: #fff7e6; border: 1px solid #f3d08a; border-radius: var(--r-lg, 10px); }
.rfx-ds .rfx-doc-diffuse-text { font-size: 0.85rem; color: #7a5a18; flex: 1 1 auto; }
.rfx-ds .rfx-doc-diffuse-btn { flex: 0 0 auto; }
/* Diffusion documents — retrait / remplacement (obsolète, remplacé, mis à jour) */
.rfx-ds .rfx-doc-badge-withdrawn { color: #6b7280; background: #f3f4f6; }
.rfx-ds .rfx-doc-badge-updated { color: #047857; background: #d1fae5; }
.rfx-ds .rfx-doc-row-withdrawn .rfx-doc-c-label { color: #9ca3af; text-decoration: line-through; }
.rfx-ds .rfx-doc-row-withdrawn .rfx-doc-c-label .rfx-doc-badge,
.rfx-ds .rfx-doc-row-withdrawn .rfx-doc-c-label .rfx-doc-fileicon { text-decoration: none; }
/* Portail entreprises consultées : document retiré/remplacé (hors scope .rfx-ds) */
.rfx-portal-doc-withdrawn { color: #9ca3af; }
.rfx-portal-doc-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 600; color: #6b7280; background: #f3f4f6; text-decoration: none; }
/* Remplacement en attente (ancien doc encore actif) + nouvelle version préparée */
.rfx-ds .rfx-doc-badge-pending { color: #b45309; background: #fef3c7; }
/* Encadré « remplacement en attente » : ancien doc + remplaçant préparé */
.rfx-ds .rfx-doc-replace-group { border: 1px solid #f3d08a; border-radius: var(--r-lg, 10px); background: #fffdf7; margin: 6px 0; padding: 2px 10px; }
.rfx-ds .rfx-doc-replace-sep { font-size: 0.68rem; color: #b45309; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 0 3px 24px; position: relative; }
.rfx-ds .rfx-doc-replace-sep::before { content: "\2193"; position: absolute; left: 6px; font-size: 0.85rem; }
/* Sous-section « Documents archivés » */
.rfx-ds .rfx-doc-archived { margin-top: 22px; }
.rfx-ds .rfx-doc-archived-title { font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 12px; margin-bottom: 6px; border-top: 1px solid #e5e7eb; }
.rfx-ds .rfx-doc-archived .rfx-doc-row { opacity: 0.8; }
/* Note fine (italique, non uppercase) à côté du titre « Documents archivés » */
.rfx-ds .rfx-doc-archived-hint { font-size: 0.72rem; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 8px; }
/* ===== RFx Diffusion — étape « Entreprises et Contacts » (reskin DS) ===== */
.rfx-ds .rfx-spl-wrap { padding: 8px 40px 24px; }
.rfx-ds .rfx-spl-sectitle { font-size: 0.95rem; font-weight: 600; color: #2D3E50; margin: 18px 0 12px; }
.rfx-ds .rfx-spl-add { display: flex; gap: 12px; align-items: center; margin: 8px 0 18px; }
.rfx-ds .rfx-spl-add-select { flex: 1 1 auto; min-width: 0; }
.rfx-ds .rfx-spl-card { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); margin-bottom: 10px; background: #fff; }
.rfx-ds .rfx-spl-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: #2D3E50; }
.rfx-ds .rfx-spl-head-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; cursor: pointer; color: #2D3E50; text-decoration: none; }
.rfx-ds .rfx-spl-head-main:hover { text-decoration: none; color: #2D3E50; }
.rfx-ds .rfx-spl-name { font-weight: 600; font-size: 0.9rem; }
.rfx-ds .rfx-spl-nat { font-size: 0.8rem; color: #64748b; }
.rfx-ds .rfx-spl-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rfx-ds .rfx-spl-pill { display: inline-block; padding: 1px 10px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.rfx-ds .rfx-spl-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.rfx-ds .rfx-spl-actions a { color: #0d9488; }
.rfx-ds .rfx-spl-actions .btnDelete { color: #b91c1c; }
.rfx-ds .rfx-spl-chevron { color: #94a3b8; flex: 0 0 auto; }
.rfx-ds .rfx-spl-alert { color: #dc2626; flex: 0 0 auto; }
.rfx-ds .rfx-spl-sel-on { color: #16a34a; flex: 0 0 auto; }
.rfx-ds .rfx-spl-sel-off { color: #cbd5e1; flex: 0 0 auto; }
.rfx-ds .rfx-spl-body { padding: 4px 16px 14px 44px; border-top: 1px solid #f1f5f9; }
.rfx-ds .rfx-spl-body-hint { font-size: 0.8rem; color: #64748b; margin: 8px 0; }
.rfx-ds .rfx-spl-contact { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.rfx-ds .rfx-spl-contact:last-child { border-bottom: none; }
.rfx-ds .rfx-spl-c-check { flex: 0 0 auto; }
.rfx-ds .rfx-spl-c-name { min-width: 220px; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-spl-c-email { flex: 1 1 auto; font-size: 0.82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rfx-ds .rfx-spl-c-cat { font-size: 0.8rem; color: #64748b; flex: 0 0 auto; }
.rfx-ds .rfx-spl-c-pending { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #FF5722; color: #FF5722; font-size: 0.7rem; }
.rfx-ds .rfx-spl-validating { margin-top: 26px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.rfx-ds .rfx-spl-validating-title { font-size: 0.9rem; font-weight: 700; color: #0d9488; margin-bottom: 4px; }
.rfx-ds .rfx-spl-validating-help { font-size: 0.8rem; color: #94a3b8; margin-bottom: 10px; }
.rfx-ds .rfx-spl-badge-validating { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 600; background: #0d9488; color: #fff; }
.rfx-ds .rfx-spl-empty { font-size: 0.85rem; color: #94a3b8; padding: 6px 0; }
/* Retours reskin Entreprises et Contacts (2026-07-27) : alignement cases, pills pill-shape, œil */
.rfx-ds .rfx-spl-check .form-check, .rfx-ds .rfx-spl-c-check .form-check { margin: 0; min-height: 0; }
.rfx-ds .rfx-spl-contact { align-items: center; }
.rfx-ds .rfx-spl-name-link, .rfx-ds .rfx-spl-name-link:hover { color: #2D3E50; text-decoration: none; font-weight: 600; font-size: 0.9rem; flex: 0 0 auto; }
.rfx-ds .rfx-spl-eye { color: #0d9488; flex: 0 0 auto; }
.rfx-ds .rfx-spl-eye:hover { color: #0b7d73; }
.rfx-ds .rfx-spl-chevron-link { flex: 0 0 auto; color: #94a3b8; }
.rfx-ds .rfx-spl-del { color: #b91c1c; flex: 0 0 auto; }
.rfx-ds .rfx-spl-pill { padding: 2px 12px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: .02em; background: #fff; line-height: 1.7; }
/* Retours reskin Entreprises et Contacts v2 (2026-07-27) : collapse header, cases alignées, pills radius 2px */
.rfx-ds .rfx-spl-head { cursor: pointer; }
.rfx-ds .rfx-spl-pill { border-radius: var(--r-sm, 3px); }
.rfx-ds .rfx-spl-check, .rfx-ds .rfx-spl-c-check { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rfx-ds .rfx-spl-check .form-check, .rfx-ds .rfx-spl-c-check .form-check { margin: 0; min-height: 0; }
/* #5 Contacts compacts (façon Interlocuteurs) + fiche éditable */
.rfx-ds .rfx-spl-c-id { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.rfx-ds .rfx-spl-c-id .rfx-spl-c-name { flex: 0 0 210px; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-spl-c-id .rfx-spl-c-fn { flex: 0 0 160px; font-size: 0.78rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-spl-c-id .rfx-spl-c-email { flex: 1 1 auto; }
.rfx-ds .rfx-spl-c-edit { color: #0d9488; flex: 0 0 auto; margin-left: 6px; }
.rfx-ds .rfx-spl-c-edit:hover { color: #0b7d73; }
/* Modale édition contact — mode RFx verrouillé (reskin DS) */
.scf-ro { padding: 8px 10px; border: 1px solid #eef1f5; border-radius: var(--r-md, 6px); background: #f8fafc; color: #475569; font-size: 0.88rem; }
.scf-locked-note { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #b45309; background: #fef3c7; border: 1px solid #f3d08a; border-radius: var(--r-lg, 10px); padding: 8px 10px; margin-bottom: 14px; }
/* Retours reskin Entreprises v3 (2026-07-27) : case centrée, colonnes, tél., fond corps */
.rfx-ds .rfx-spl-check .form-check, .rfx-ds .rfx-spl-c-check .form-check { position: relative; display: block; height: 20px; min-height: 0; margin: 0; padding-left: 22px; }
.rfx-ds .rfx-spl-check .form-check-input, .rfx-ds .rfx-spl-c-check .form-check-input,
.rfx-ds .rfx-spl-check .form-check-label::before, .rfx-ds .rfx-spl-c-check .form-check-label::before,
.rfx-ds .rfx-spl-check .form-check-label::after, .rfx-ds .rfx-spl-c-check .form-check-label::after { top: 50% !important; margin-top: 0 !important; transform: translateY(-50%); }
.rfx-ds .rfx-spl-c-id .rfx-spl-c-name { flex: 0 0 270px; }
.rfx-ds .rfx-spl-c-id .rfx-spl-c-fn { flex: 0 0 210px; }
.rfx-ds .rfx-spl-c-phone { flex: 0 0 150px; font-size: 0.82rem; color: #475569; }
.rfx-ds .rfx-spl-c-nophone { color: #cbd5e1; }
.rfx-ds .rfx-spl-body { background: #f8fafc; }
/* Tél. contact aligné à droite (colonne data) */
.rfx-ds .rfx-spl-c-phone { text-align: right; }
/* 2 téléphones empilés + label discret, alignés à droite */
.rfx-ds .rfx-spl-c-phone { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.25; text-align: right; flex: 0 0 160px; }
.rfx-ds .rfx-spl-c-phone-line { white-space: nowrap; font-size: 0.82rem; color: #475569; }
.rfx-ds .rfx-spl-c-phone-lbl { font-size: 0.64rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-right: 5px; }
/* Cases contacts : carré arrondi teal légèrement plus clair (vs cercle entreprise) — dessinées explicitement */
.rfx-ds .rfx-spl-c-check .form-check-label::before, .rfx-ds .rfx-spl-c-check .form-check-label::after { display: none !important; }
.rfx-ds .rfx-spl-c-check .form-check-input {
    -webkit-appearance: none !important; appearance: none !important; opacity: 1 !important;
    position: static !important; transform: none !important; margin: 0 !important; float: none !important;
    width: 16px !important; height: 16px !important; box-sizing: border-box !important;
    border: 1.5px solid #b6c2cf !important; border-radius: var(--r-sm, 3px)!important; background-color: #fff !important;
    background-image: none !important; cursor: pointer;
}
.rfx-ds .rfx-spl-c-check .form-check-input:checked {
    background-color: #14b8a6 !important; border-color: #14b8a6 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") !important;
    background-size: 12px 12px !important; background-position: center !important; background-repeat: no-repeat !important;
}
.rfx-ds .rfx-spl-c-check .form-check { display: inline-flex !important; align-items: center !important; height: auto !important; padding-left: 0 !important; }
/* Note discrète sous le bouton « Ajouter contact » */
.rfx-ds .rfx-spl-add-note { font-size: 0.78rem; font-style: italic; color: #94a3b8; margin-top: 6px; }
/* Tél. côte à côte (horizontal) plutôt qu'empilés */
.rfx-ds .rfx-spl-c-phone { flex-direction: row; align-items: baseline; gap: 18px; flex: 0 0 auto; text-align: left; }
.rfx-ds .rfx-spl-badge-draft { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 600; background: #e2e8f0; color: #475569; }

.ctx-contact-add-panel .bootstrap-select { width: 100% !important; }
.ctx-contact-add-panel .bootstrap-select > .btn { width: 100% !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rfx-ds .rfx-spl-warn { color: #d97706; margin-left: 6px; font-size: 0.8rem; cursor: help; }
.rfx-ds .rfx-spl-autosave-hint { color: #64748b; font-size: 0.8rem; }
.rfx-ds .rfx-spl-autosave-hint i { color: #14b8a6; margin-right: 4px; }
#rfp-autosave-toast { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 20000; background: #1f2937; color: #fff; padding: 10px 16px; border-radius: var(--r-lg, 10px); font-size: 0.85rem; box-shadow: 0 4px 16px rgba(0,0,0,0.25); max-width: 340px; }
.rfx-ds .rfx-spl-warn { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 9px; border-radius: var(--r-lg, 10px); background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; font-size: 0.72rem; font-weight: 600; white-space: nowrap; cursor: default; }
.rfx-ds .rfx-spl-check-ro { pointer-events: none; }

/* Qualification amont — pièces uploadées (drawer entreprise) */
#supplierDrawer .drw-spl-qual-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
#supplierDrawer .drw-spl-qual-doc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-md, 6px); font-size: 0.8rem; color: #0b7d72; max-width: 100%; }
#supplierDrawer .drw-spl-qual-doc-ic { flex: 0 0 auto; }
#supplierDrawer .drw-spl-qual-doc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
#supplierDrawer .drw-spl-qual-doc-del { color: #94a3b8; margin-left: 2px; cursor: pointer; }
#supplierDrawer .drw-spl-qual-doc-del:hover { color: #dc2626; }
/* R22 bis (2026-09-16) : pièce EN ATTENTE (création : Document créé au POST explicite) — pointillé + gris. */
#supplierDrawer .drw-spl-qual-doc.is-pending { background: #f8fafc; border-style: dashed; border-color: #cbd5e1; color: #475569; }

/* R23 (2026-09-16, retour Olivier) : dans le hub Listes le champ de recherche est le point d'entrée principal → plus large
   et un peu plus haut que le champ DS standard (34 px / 280 px), sans toucher aux autres écrans. */
#lst-app .ds-search-input { height: 40px; min-width: 420px; font-size: 0.88rem; padding-left: 36px; }
#lst-app .ds-search-icon { left: 14px; font-size: 0.86rem; }
@media (max-width: 991px) { #lst-app .ds-search-input { min-width: 220px; } }
/* Pill « Mes brouillons » (Listes) : même gabarit que les autres pills, icône crayon. */
#lst-app .lst-scope-pill-drafts i { font-size: 0.72rem; margin-right: 5px; }
/* ── Formats de réponse (étape Publication) — reskin DS 2026-07-28 ── */
.rfx-ds .rfx-fmt { padding: 14px 0; border-bottom: 1px solid #eef2f6; }
.rfx-ds .rfx-fmt:first-child { padding-top: 0; }
.rfx-ds .rfx-fmt:last-child { border-bottom: none; padding-bottom: 0; }
.rfx-ds .rfx-fmt-head { padding: 0 !important; }
.rfx-ds .rfx-fmt-desc { font-size: 0.85rem; color: #415873; margin: 8px 0 0 54px; }
.rfx-ds .rfx-fmt-note { font-size: 0.78rem; font-style: italic; color: #64748b; margin: 4px 0 0 54px; }
.rfx-ds .rfx-fmt-locked .rfx-toggle-ro { cursor: help; }
/* Toggle d'un format imposé (non modifiable) : teal atténué pour le distinguer d'un toggle éditable */
.rfx-ds .rfx-fmt-locked .rfx-toggle-ro.on { background: #9fd4ce; }
.rfx-ds .rfx-fmt-lock { color: #94a3b8; font-size: 0.72rem; margin-left: 6px; }
/* ── Étape Publication : bandeau d'état + champs date/relance (reskin DS 2026-07-28) ── */
.rfx-ds .rfx-status-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-sm, 3px); margin-bottom: 16px; font-size: 0.9rem; font-weight: 600; }
.rfx-ds .rfx-status-banner-icon { font-size: 0.95rem; flex-shrink: 0; }
.rfx-ds .rfx-status-info { background: #f0fafa; border: 1px solid #cceae7; color: #0b7d72; }
.rfx-ds .rfx-status-active { background: #ecfdf3; border: 1px solid #b9ebc9; color: #15803d; }
.rfx-ds .rfx-status-muted { background: #f4f6f8; border: 1px solid #e2e8f0; color: #64748b; }
.rfx-ds .rfx-pub-field { margin-bottom: 18px; }
.rfx-ds .rfx-pub-field-label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #64748b; margin-bottom: 6px; }
.rfx-ds .rfx-pub-field input.datetime-picker-bottom { max-width: 220px; }
.rfx-ds .rfx-pub-days { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #2D3E50; }
.rfx-ds .rfx-pub-days input { max-width: 90px; }
.rfx-ds .rfx-pub-ro { display: flex; gap: 12px; padding: 6px 0; font-size: 0.9rem; }
.rfx-ds .rfx-pub-ro-label { color: #64748b; min-width: 200px; }
.rfx-ds .rfx-pub-ro-value { color: #2D3E50; font-weight: 600; }
/* ── Bouton + modale d'envoi (etape Publication) — reskin DS 2026-07-28 ── */
.rfx-send-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; border: none; border-radius: var(--r-md, 6px); background: #0d9488; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.rfx-send-btn:hover { background: #0b7d72; color: #fff; }
.rfx-send-btn-blocked { background: #fef3e2; color: #b45309; }
.rfx-send-btn-blocked:hover { background: #fde9cc; color: #b45309; }
.rfx-send-blocked-intro { font-size: 0.92rem; color: #2D3E50; margin-bottom: 10px; }
.rfx-send-errors { margin: 0; padding-left: 20px; }
.rfx-send-errors li { color: #b45309; font-size: 0.9rem; margin-bottom: 6px; }
/* ── Modale d'envoi (contenu) — mise en forme DS 2026-07-28 ── */
#sendRfpModal .modal-content { border: none; border-radius: var(--r-lg, 10px); overflow: hidden; }
#sendRfpModal .ds-confirm-body { max-height: 60vh; overflow-y: auto; }
#sendRfpModal .ds-confirm-footer #waiting-rfp-send-container { color: #64748b; font-size: 0.8rem; }
#sendRfpBody p { margin: 0 0 10px; }
.rfx-send-lead { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin: 0 0 8px; }
.rfx-send-list { margin: 0 0 14px; padding-left: 18px; }
.rfx-send-list li { margin-bottom: 3px; }
.rfx-send-info { font-size: 0.8rem; color: #64748b; font-style: italic; margin-top: 4px; }
.rfx-send-warn { margin-top: 14px; background: #fef3e2; border: 1px solid #f5d9a8; border-radius: var(--r-md, 6px); padding: 10px 14px; }
.rfx-send-warn-title { font-size: 0.82rem; font-weight: 600; color: #92600a; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rfx-send-warn ul { margin: 0; padding-left: 18px; }
.rfx-send-warn li { font-size: 0.82rem; color: #92600a; margin-bottom: 3px; }
/* ── Bandeau ambre « informer de la nouvelle date » (Publication, round ouvert) 2026-07-28 ── */
.rfx-ds .rfx-notify-banner { display: flex; align-items: center; gap: 14px; justify-content: space-between; background: #fef3e2; border: 1px solid #f5d9a8; border-radius: var(--r-lg, 10px); padding: 12px 16px; margin-bottom: 16px; }
.rfx-ds .rfx-notify-banner-text { font-size: 0.88rem; color: #92600a; }
.rfx-ds .rfx-notify-banner-text i { margin-right: 6px; }
.rfx-ds .rfx-notify-banner-btn { flex-shrink: 0; border: none; border-radius: var(--r-md, 6px); background: #d97706; color: #fff !important; font-size: 0.85rem; font-weight: 600; padding: 8px 16px; cursor: pointer; text-decoration: none !important; }
.rfx-ds .rfx-notify-banner-btn:hover { background: #b45309; color: #fff !important; }
/* Bandeau ambre « informer de la nouvelle date » : bouton secondaire « Annuler la modification ».
   Le texte prend l'espace restant pour que les deux boutons restent groupés à droite. */
.rfx-ds .rfx-notify-banner .rfx-notify-banner-text { flex: 1 1 auto; }
.rfx-ds .rfx-notify-banner-cancel { flex-shrink: 0; border: 1px solid #e0b978; border-radius: var(--r-md, 6px); background: transparent; color: #92600a; font-size: 0.85rem; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.rfx-ds .rfx-notify-banner-cancel:hover { background: #fbe6c4; color: #7a4f08; }
.rfx-ds .rfx-notify-banner-cancel:focus:not(:focus-visible) { outline: none; }
.rfx-ds .rfx-notify-banner-cancel:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(217,119,6,0.35); }
/* Héros icône medium des modales d'envoi */
.rfx-send-hero { width: 52px; height: 52px; border-radius: 50%; background: #e6f7f4; color: #0d9488; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin: 2px auto 16px; }
.rfx-send-hero-warn { background: #fef3e2; color: #d97706; }
.rfx-send-blocked-intro { text-align: center; }
/* Modale d'envoi — sections + harmonisation (2026-07-29) */
.rfx-send-lead { font-size: 0.9rem; font-weight: 400; color: #2D3E50; margin: 0 0 14px; }
.rfx-send-lead-center { text-align: center; }
.rfx-send-section { margin-bottom: 16px; }
.rfx-send-section-title { font-size: 0.85rem; font-weight: 600; color: #0d9488; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rfx-send-section-text { font-size: 0.85rem; color: #415873; margin: 0; }
.rfx-send-errors { max-width: 480px; margin: 4px auto 0; text-align: left; }
.rfx-send-blocked-intro { text-align: center; margin-bottom: 4px; }
/* Modale de blocage : titre + encadré ambre (2026-07-29) */
.rfx-send-blocked-title { text-align: center; font-size: 0.95rem; font-weight: 600; color: #2D3E50; margin: 0 auto 14px; }
.rfx-send-changes-title { text-align: center; font-size: 0.95rem; font-weight: 600; color: #2D3E50; margin: 0 auto 14px; }
.rfx-send-changes-box { background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-md, 6px); padding: 14px 18px; }
.rfx-send-changes-box .rfx-send-section:last-child { margin-bottom: 0; }
.rfx-send-blocked-box { background: #fef3e2; border: 1px solid #f5d9a8; border-radius: var(--r-md, 6px); padding: 12px 18px; }
.rfx-send-blocked-box .rfx-send-errors { max-width: none; margin: 0; }
.rfx-send-blocked-box .rfx-send-errors li { color: #92600a; }.rfx-send-section-hint { font-size: 0.78rem; font-style: italic; color: #64748b; margin: 6px 0 0; }
/* Bouton « Modifier l'échéance » à côté de la date (Publication, après offre) 2026-07-29 */
.rfx-ds .rfx-pub-edit-date-btn { margin-left: 14px; border: 1px solid #0d9488; background: #fff; color: #0d9488; border-radius: var(--r-md, 6px); font-size: 0.8rem; font-weight: 600; padding: 4px 12px; cursor: pointer; transition: background .15s, color .15s; }
.rfx-ds .rfx-pub-edit-date-btn:hover { background: #0d9488; color: #fff; }
#editDeadlineModal .ds-confirm-body .rfx-access-row { padding: 8px 0 0; }
/* Bouton « Historique » (consultation) dans la card Date de remise — style neutre pour le distinguer des actions teal. */
.rfx-ds .rfx-pub-history-row { padding: 8px 0 0; }
.rfx-ds .rfx-pub-history-btn { margin-left: 14px; border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: var(--r-md, 6px); font-size: 0.8rem; font-weight: 600; padding: 4px 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.rfx-ds .rfx-pub-history-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
.rfx-ds .rfx-pub-history-btn i { margin-right: 5px; }
.rfx-ds .rfx-pub-history-row .rfx-pub-history-btn { margin-left: 0; }
/* Liste d'activites du round (modales Historique + Rouvrir le round) — format DS harmonise. */
.rfx-ds .rfx-act-scroll { max-height: 60vh; min-height: 240px; overflow-y: auto; padding-right: 4px; }
.rfx-ds .rfx-act-section-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 22px 0 10px; }
.rfx-ds .rfx-act-list { display: flex; flex-direction: column; gap: 10px; }
.rfx-ds .rfx-act-item { display: flex; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); }
.rfx-ds .rfx-act-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.rfx-ds .rfx-act-icon-reopen { background: #fef3e6; color: #c26a12; }
.rfx-ds .rfx-act-icon-date { background: #e6f7f4; color: #0d9488; }
.rfx-ds .rfx-act-body { flex: 1 1 auto; min-width: 0; }
.rfx-ds .rfx-act-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.rfx-ds .rfx-act-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--r-full, 999px); }
.rfx-ds .rfx-act-badge-reopen { background: #fef3e6; color: #c26a12; }
.rfx-ds .rfx-act-badge-date { background: #e6f7f4; color: #0b7d72; }
.rfx-ds .rfx-act-date { font-size: 0.78rem; color: #94a3b8; margin-left: auto; }
.rfx-ds .rfx-act-text { font-size: 0.88rem; color: #334155; line-height: 1.4; margin-bottom: 6px; white-space: normal; }
.rfx-ds .rfx-act-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.78rem; color: #64748b; }
.rfx-ds .rfx-act-meta i { margin-right: 4px; opacity: .8; }
.rfx-ds .rfx-act-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 0.88rem; }
/* Bouton consultation « Historique » dans la barre d'actions Pilotage (herite du sizing .btn, couleurs neutres). */
.rfx-ds .rfx-act-btn { border: 1px solid #cbd5e1; background: #fff; color: #475569; font-weight: 600; }
.rfx-ds .rfx-act-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
.rfx-ds .rfx-act-btn i { margin-right: 5px; }
/* Compteur discret de modifications sur le bouton Historique. */
.rfx-ds .rfx-act-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px; border-radius: var(--r-full, 999px); background: #e2e8f0; color: #475569; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.rfx-ds .rfx-pub-history-btn .rfx-act-count { background: #e2e8f0; color: #475569; }
/* Bouton « Agir » (remplace le kebab icône sur la timeline Diffusion) : texte + chevron. Base = .rfx-kebab-btn. */
.rfx-ds .rfx-agir-caret { font-size: 0.7rem; color: #0d9488; }
.rfx-ds .rfx-agir-btn .rfx-agir-label { line-height: 1; }
/* Bouton « Agir » / « Agir sur le round » : padding resserré + encadré teal AU REPOS pour mieux ressortir (le hover
   .rfx-kebab-btn:hover reste inchangé : fond teal clair + texte teal). */
.rfx-ds .rfx-agir-btn { padding: 0 10px; border-color: #0d9488; }
/* ===== Étape Questionnaires (Qualifications) — reskin DS (bloc A) ===== */
.rfx-ds .rfx-card-header-collapse { text-decoration: none; color: inherit; cursor: pointer; }
.rfx-ds .rfx-card-header-collapse:hover { text-decoration: none; color: inherit; background: #f6fbfa; }
.rfx-ds .rfx-card-collapse-caret { margin-left: auto; color: #0d9488; font-size: 0.9rem; }
.rfx-ds .rfx-qual-create { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.rfx-ds .rfx-qual-create .rfx-pub-field { flex: 0 1 340px; }
.rfx-ds .rfx-qual-maxchars { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; font-size: 0.9rem; color: #334155; }
.rfx-ds .rfx-qual-maxchars-label { font-weight: 600; }
.rfx-ds .rfx-qual-maxchars-item { display: inline-flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-qual-maxchars-item input { max-width: 90px; }
.rfx-ds .rfx-qual-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 10px 40px; background: #fff; border-top: 1px solid #e2e8f0; }
.rfx-ds .rfx-qual-toolbar-hint { color: #64748b; font-size: 0.85rem; margin-right: auto; }
.rfx-ds .rfx-qual-toolbar-hint i { margin-right: 5px; opacity: .8; }
/* Onglets des questionnaires (Qualifications) — DS (bloc A). */
.rfx-ds .rfx-qtabs-block, .adm-ds .rfx-qtabs-block { margin-top: 18px; }
.rfx-ds .rfx-qtabs-title, .adm-ds .rfx-qtabs-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 10px; }
.rfx-ds .rfx-qtabs, .adm-ds .rfx-qtabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; border: none; }
.rfx-ds .rfx-qtabs .qualification-set-item, .adm-ds .rfx-qtabs .qualification-set-item { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); overflow: hidden; }
.rfx-ds .rfx-qtabs .qualification-set-item.active, .adm-ds .rfx-qtabs .qualification-set-item.active { border-color: #0d9488; background: #e6f7f4; }
.rfx-ds .rfx-qtabs .nav-link.item-tab, .adm-ds .rfx-qtabs .nav-link.item-tab { padding: 7px 12px; color: #334155; font-weight: 600; font-size: 0.85rem; }
.rfx-ds .rfx-qtabs .qualification-set-item.active .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.active .nav-link.item-tab { color: #0b7d72; }
.rfx-ds .rfx-qtabs .rfx-qtab-action, .adm-ds .rfx-qtabs .rfx-qtab-action { display: inline-flex; align-items: center; padding: 7px 7px; color: #94a3b8; font-size: 0.8rem; }
.rfx-ds .rfx-qtabs .rfx-qtab-action:hover, .adm-ds .rfx-qtabs .rfx-qtab-action:hover { color: #0d9488; }
.rfx-ds .rfx-qtabs .rfx-qtab-action-danger:hover, .adm-ds .rfx-qtabs .rfx-qtab-action-danger:hover { color: #dc3545; }
.rfx-ds .rfx-qtabs .drag-handle, .adm-ds .rfx-qtabs .drag-handle { cursor: grab; }
.rfx-ds .rfx-qtabs-create, .adm-ds .rfx-qtabs-create { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.rfx-ds .rfx-qtabs-create .rfx-pub-field, .adm-ds .rfx-qtabs-create .rfx-pub-field { flex: 0 1 300px; }
/* Toast DS — variante erreur (icone rouge). */
.app-toast.app-toast-error > i { color: #dc3545; }
/* Onglets Qualifications : champ « creer un questionnaire » inline, en continuite des onglets. */
.rfx-ds .rfx-qtabs-add, .adm-ds .rfx-qtabs-add { display: flex; align-items: center; }
.rfx-ds .rfx-qtabs-add form, .adm-ds .rfx-qtabs-add form { display: flex; align-items: center; gap: 8px; margin: 0; }
.rfx-ds .rfx-qtabs-add .rfx-pub-field, .adm-ds .rfx-qtabs-add .rfx-pub-field { flex: 0 1 200px; }
/* Bouton « Supprimer » de la modale de suppression : texte blanc force (dans .rfx-ds les liens sont teintes teal). */
.rfx-ds #deleteItemModal a.ds-btn-danger, #deleteItemModal a.ds-btn-danger { color: #fff !important; }
/* Éditeur de questionnaire — habillage LÉGER DS (bloc A ; restructuration profonde prévue au bloc C). */
.rfx-ds .rfx-qedit-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 14px 16px; margin-bottom: 16px; }
.rfx-ds .rfx-qedit-dispatch-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 22px 0 10px; }
/* Création de questionnaire (2 chemins directs) — ecran vide & rangee d'onglets. */
.rfx-ds .rfx-qcreate { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.rfx-ds .rfx-qtabs-add .rfx-qcreate, .adm-ds .rfx-qtabs-add .rfx-qcreate { margin: 0; }
.rfx-ds .rfx-qcreate-blank-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #0d9488; color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
.rfx-ds .rfx-qcreate-blank-btn:hover { background: #0b7d72; }
.rfx-ds .rfx-qcreate-blank-btn i { font-size: 0.75rem; }
.rfx-ds .rfx-qcreate-menu { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 6px 0; max-height: 320px; overflow-y: auto; }
.rfx-ds .rfx-qcreate-menu .dropdown-item { font-size: 0.82rem; color: #2D3E50; padding: 8px 16px; cursor: pointer; }
.rfx-ds .rfx-qcreate-menu .dropdown-item:hover { background: #f1f5f9; color: #0d9488; }
.rfx-ds .rfx-qcreate-menu form { display: block; }
/* En-tete de la rangee d'onglets Questionnaires : titre + boutons de creation au-dessus des onglets. */
.rfx-ds .rfx-qtabs-header, .adm-ds .rfx-qtabs-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.rfx-ds .rfx-qtabs-header .rfx-qtabs-title, .adm-ds .rfx-qtabs-header .rfx-qtabs-title { margin-bottom: 0; }
/* Bouton Annuler (ghost) de la modale suppression : gris ardoise (dans .rfx-ds les liens sont teintes teal). */
.rfx-ds #deleteItemModal a.ds-btn-ghost, #deleteItemModal a.ds-btn-ghost { color: #415873 !important; }
/* Modale « Creer a partir d'un modele » — liste de modeles a cocher (multi-selection). */
.rfx-ds .rfx-qmodels-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.rfx-ds .rfx-qmodels-search-wrap { position: relative; margin-bottom: 10px; }
.rfx-ds .rfx-qmodels-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.8rem; pointer-events: none; }
.rfx-ds .rfx-qmodels-search { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); font-size: 0.85rem; color: #2D3E50; outline: none; }
.rfx-ds .rfx-qmodels-search:focus { border-color: #0d9488; }
.rfx-ds .rfx-qmodel-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; margin: 0; cursor: pointer; transition: border-color .15s, background .15s; }
.rfx-ds .rfx-qmodel-row:hover { border-color: #0d9488; background: #f0fafa; }
.rfx-ds .rfx-qmodel-cb { margin: 0; flex: 0 0 auto; }
.rfx-ds .rfx-qmodel-name { font-weight: 600; color: #2D3E50; font-size: 0.9rem; }
.rfx-ds .rfx-qmodel-count { margin-left: auto; font-size: 0.78rem; color: #94a3b8; white-space: nowrap; }
/* ===== Drawer d'edition/creation d'une question (Questionnaires) ===== */
.rfx-qdrawer { position: fixed; inset: 0; z-index: 1080; visibility: hidden; }
.rfx-qdrawer.is-open { visibility: visible; }
.rfx-qdrawer-overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.35); opacity: 0; transition: opacity .2s; }
.rfx-qdrawer.is-open .rfx-qdrawer-overlay { opacity: 1; }
.rfx-qdrawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: var(--sp-w); max-width: 92vw; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.rfx-qdrawer-loading { display: flex; align-items: center; justify-content: center; padding: 40px 0; color: #94a3b8; font-size: 1.4rem; }
.rfx-qdrawer.is-open .rfx-qdrawer-panel { transform: translateX(0); }
.rfx-qdrawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; flex: 0 0 auto; }
.rfx-qdrawer-title { font-weight: 700; color: #2D3E50; font-size: 1rem; }
.rfx-qdrawer-close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: #94a3b8; cursor: pointer; text-decoration: none; }
.rfx-qdrawer-close:hover { color: #475569; text-decoration: none; }
.rfx-qdrawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.rfx-qdrawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; border-top: 1px solid #e2e8f0; flex: 0 0 auto; }
body.rfx-qdrawer-lock { overflow: hidden; }
.rfx-qdrawer-body .rfx-qform .rfx-pub-field { margin-bottom: 16px; }
.rfx-qdrawer-body .nav-tabs { margin-bottom: 16px; }
/* Onglet traduction (drawer question) : valeur de reference sous le champ, italique gris + prefixe langue. */
.rfx-ds .rfx-qtrans-ref { margin-top: 6px; font-size: 0.82rem; font-style: italic; color: #475569; line-height: 1.35; }
.rfx-ds .rfx-qtrans-ref .rfx-qtrans-ref-lang { font-weight: 400 !important; font-style: italic; color: inherit; }
.rfx-qdrawer-body .rfx-qform .rfx-pub-field + .rfx-pub-field { margin-top: 26px; }
/* ===== Vue LECTURE d'un questionnaire (qualification_set_edit) : lignes compactes groupees par theme ===== */
.rfx-qread { padding: 4px 0 24px; }
.rfx-qread-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rfx-qread-empty { padding: 28px 16px; text-align: center; color: #64748b; font-style: italic; background: #f8fafc; border: 1px dashed #d7dee8; border-radius: var(--r-lg, 10px); }

/* Card par theme, calquee sur la card Parametrage (.rfx-card) : bord haut+droit transparents, gauche+bas gris ; titre teal + filet COURT sous le libelle. */
.rfx-qread-theme { background: #fff; border: 1px solid transparent; border-bottom-color: #e2e8f0; border-radius: var(--r-md, 6px); padding: 0 14px 8px; margin-bottom: 16px; }
.rfx-qread-theme-title { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #14b8a6; padding: 12px 0 8px; border-bottom: 1px solid rgba(20,184,166,0.35); margin-bottom: 4px; }
.rfx-qread-theme-title--none { color: #94a3b8; border-bottom-color: rgba(148,163,184,0.35); }
.rfx-qread-subtheme-title { font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; padding-top: 20px; }
.rfx-qread-theme-title + .rfx-qread-subtheme-title { padding-top: 8px; }

/* Une question = UNE ligne compacte (lisible a 100 questions), filet de separation interne. */
.rfx-qread-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; margin: 0 -8px; border-bottom: 1px solid #f4f6f9; text-decoration: none; color: inherit; line-height: 1.3; border-radius: 4px; transition: background .12s; }
.rfx-qread-row:last-child { border-bottom: 0; }
a.rfx-qread-row { cursor: pointer; }
a.rfx-qread-row:hover { background: #f8fafc; text-decoration: none; color: inherit; }
.rfx-qread-row--static { cursor: default; }
.rfx-qread-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.rfx-qread-row-label { flex: 0 1 auto; font-size: 0.86rem; font-weight: 600; color: #1b2a4a; overflow: hidden; text-overflow: ellipsis; }
.rfx-qread-row-text { flex: 0 1 auto; font-size: 0.78rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; }
.rfx-qread-badge { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; color: #0f766e; background: #ccfbf1; border-radius: var(--r-full, 999px); padding: 1px 9px; white-space: nowrap; }
.rfx-qread-doc { flex: 0 0 auto; color: #94a3b8; font-size: 0.78rem; }
.rfx-qread-row-meta { flex: 0 0 auto; font-size: 0.72rem; color: #b4bdc9; white-space: nowrap; }
.rfx-qread-row-author { font-weight: 600; color: #94a3b8; }
.rfx-qread-row-edit { flex: 0 0 auto; color: #cbd5e1; font-size: 0.78rem; }
a.rfx-qread-row:hover .rfx-qread-row-edit { color: #14b8a6; }

/* Footer drawer : bouton Supprimer pousse a gauche, autres a droite ; bouton ghost-danger. */
.rfx-qdrawer-footer-left { margin-right: auto; }
/* Aligne sur le reste de la famille .ds-btn-* (2026-08-28, retour Olivier sur D2).
   AVANT, ce bouton etait le SEUL de la famille sans `display: inline-flex` ni `line-height` :
   sur un <a> (element inline par defaut), ses paddings verticaux ne poussaient donc PAS son
   conteneur -> bouton colle au filet de la barre d actions. Il etait aussi le seul en 8px/16px,
   0.85rem et 600, donc plus haut que le .ds-btn-primary a cote duquel il est toujours place
   (barre d actions Laureats, pied du drawer Questionnaire). Seules ses COULEURS lui restent propres. */
.ds-btn-ghost-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px; background: #fff; border: 1px solid #f2c2c2; border-radius: var(--r-md, 6px); color: #c0392b; font-size: 0.8rem; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; }
.ds-btn-ghost-danger:hover { background: #fdf0ef; border-color: #e59b9b; color: #a5281a; }
/* Modale « Dupliquer un questionnaire » : origine (AO + round) sous le nom, discret. */
.rfx-qmodel-origin { display: block; font-size: 0.72rem; font-weight: 400; color: #94a3b8; margin-top: 1px; }
/* Barre d'actions vue lecture : Importer avec Excel = encadre teal (a droite d'Ajouter) ; gestion themes poussee a droite. */
/* Meme gabarit que .ds-btn-primary (padding/radius/typo) pour un rendu homogene, en variante contour teal. */
.rfx-qread-add { gap: 6px; }
.rfx-qread-import { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #fff; color: #0f766e; font-size: 0.8rem; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background .12s ease; }
.rfx-qread-import:hover { background: #f0fafa; color: #0f766e; text-decoration: none; }
.rfx-qread-actions-right { margin-left: auto; }

/* Tooltip Bootstrap des questions : fond navy, texte clair, petite police. */
.rfx-qtip .tooltip-inner { max-width: 340px; text-align: left; font-size: 0.72rem; line-height: 1.35; background: #1b2a4a; color: #f1f5f9; padding: 6px 9px; border-radius: var(--r-lg, 10px); }
.rfx-qtip.bs-tooltip-top .arrow::before, .rfx-qtip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #1b2a4a; }
.rfx-qtip.bs-tooltip-bottom .arrow::before, .rfx-qtip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #1b2a4a; }
/* Icone d'aide « ? » (Parametrage) : point d'interrogation teal, contour teal, fond blanc (far = contour). */
.rfx-ds .rfx-help-tt { color: #14b8a6; font-size: 0.95rem; text-decoration: none; cursor: help; vertical-align: middle; }
.rfx-ds .rfx-help-tt:hover { color: #0f766e; text-decoration: none; }
/* Select2 « tapez pour creer » (Theme/Sous-theme) dans le drawer question — aligne sur les champs DS. */
.rfx-qform .select2-container { width: 100% !important; }
.rfx-qform .select2-container--default .select2-selection--single { height: auto; min-height: 38px; border: 1px solid #d7dee8; border-radius: var(--r-md, 6px); padding: 4px 8px; display: flex; align-items: center; }
.rfx-qform .select2-container--default .select2-selection--single .select2-selection__rendered { color: #2D3E50; line-height: 1.4; padding-left: 0; }
.rfx-qform .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8; }
.rfx-qform .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.rfx-qform .select2-container--default.select2-container--focus .select2-selection--single,
.rfx-qform .select2-container--open .select2-selection--single { border-color: #0d9488; }
.rfx-qform .select2-dropdown { border-color: #d7dee8; }
.rfx-qform .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #0d9488; }
/* Reordonnancement des questions (drag) : poignee + placeholder. */
.rfx-qread-drag { flex: 0 0 auto; color: #cbd5e1; font-size: 0.8rem; cursor: grab; }
.rfx-qread-drag:active { cursor: grabbing; }
a.rfx-qread-row:hover .rfx-qread-drag { color: #94a3b8; }
.rfx-qread-row-placeholder { border: 1px dashed #14b8a6; background: #f0fafa; border-radius: 6px; height: 38px; margin-bottom: 5px; }
/* Champ « Question » (label) en textarea multi-ligne. */
.rfx-qform .rfx-qlabel-textarea { min-height: 40px; resize: vertical; line-height: 1.4; }
/* ===== Option A : card du questionnaire selectionne (entete titree + actions) + menu Nouveau questionnaire ===== */
.rfx-qcontent { border: 1px solid #e6ebf1; border-radius: var(--r-lg, 10px); background: #fff; margin-top: 4px; }
.rfx-qcontent-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 11px 16px; border-bottom: 1px solid #eef2f6; background: #f8fafc; border-radius: var(--r-lg, 10px) var(--r-lg, 10px) 0 0; }
.rfx-qcontent-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: #1b2a4a; }
.rfx-qcontent-title i { color: #14b8a6; }
.rfx-qcontent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rfx-qcontent-sep { width: 1px; height: 22px; background: #e2e8f0; margin: 0 2px; }
.rfx-qcontent-body { padding: 12px 16px 18px; }
.rfx-qcontent-body .rfx-qread-theme:first-of-type { margin-top: 6px; }

.rfx-qnew-btn.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.rfx-qnew-menu { padding: 6px; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 6px 20px rgba(27,42,74,.12); min-width: 240px; }
.rfx-qnew-menu .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-lg, 10px); font-size: 0.85rem; color: #2D3E50; cursor: pointer; white-space: normal; }
.rfx-qnew-menu .dropdown-item:hover, .rfx-qnew-menu .dropdown-item:focus { background: #f0fafa; color: #0f766e; }
.rfx-qnew-menu .rfx-qnew-ic { width: 16px; text-align: center; color: #14b8a6; flex: 0 0 auto; }
.rfx-qnew-menu form { margin: 0; }
/* Kebab actions secondaires (Gerer themes / sous-themes). */
.rfx-qkebab-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); background: #fff; color: #64748b; cursor: pointer; padding: 0; }
.rfx-qkebab-btn:hover { border-color: #cbd5e1; color: #1b2a4a; background: #f8fafc; }
.rfx-qkebab-btn.dropdown-toggle::after { display: none; }
/* Menu du kebab (2026-09-07) : les libelles annoncent desormais les DEUX niveaux (« Gerer themes
   et sous-themes »), trop longs pour la largeur mini de 240px -> ils passaient a la ligne.
   `white-space: nowrap` SCOPE au kebab : `.rfx-qnew-menu` sert aussi aux menus de creation
   (_bom_create, _qualification_create), qu'on ne veut pas elargir. Le menu, en position absolue,
   grandit alors de lui-meme ; `dropdown-menu-right` le fait deborder vers la GAUCHE, jamais hors
   ecran a droite. */
.rfx-qkebab .rfx-qnew-menu .dropdown-item { white-space: nowrap; }
/* Ouverture VERS LE HAUT : le kebab est en tete de carte, le menu masquait le debut de la liste.
   Popper conserve son basculement automatique : s'il manque de place au-dessus, il repasse en bas. */
.rfx-qkebab.dropup .rfx-qnew-menu { margin-bottom: 4px; }
/* Modale « Importer avec Excel » — DS. */
.rfx-qimport-hint { font-size: 0.85rem; color: #334155; }
.rfx-qimport-hint-intro { font-weight: 600; }
.rfx-qimport-steps { margin: 6px 0 8px; padding-left: 18px; }
.rfx-qimport-steps li { margin-bottom: 2px; }
.rfx-qimport-hint-note { font-size: 0.8rem; color: #64748b; }
.rfx-qimport-download { margin: 14px 0 6px; }
.rfx-qimport-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rfx-qimport-file { flex: 1 1 320px; min-width: 240px; }
.rfx-qimport-row #waiting-upload-container { flex: 1 1 100%; }
/* Modale import — deux zones etiquetees (1. modele / 2. import). */
.rfx-qimport-zones { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rfx-qimport-zone { border: 1px solid #e6ebf1; border-radius: var(--r-lg, 10px); padding: 12px 14px; }
.rfx-qimport-zone-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1b2a4a; font-size: 0.9rem; margin-bottom: 10px; }
.rfx-qimport-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #14b8a6; color: #fff; font-size: 0.78rem; font-weight: 700; flex: 0 0 auto; }
.rfx-qimport-zone .rfx-qimport-download { margin: 0; }
.rfx-qimport-zone-help { font-size: 0.8rem; color: #64748b; margin-top: 9px; }
.rfx-qimport-zone .rfx-qimport-row { margin-top: 0; }
/* Sous-texte d'aide sous un champ du drawer question (ex. Elements liste). */
.rfx-qform .rfx-qform-help { font-size: 0.78rem; font-style: italic; color: #64748b; margin-top: 5px; }
/* Etat vide DS (aucun questionnaire / aucune question) : encadre pointille centre + icone. */
.rfx-ds .rfx-empty { text-align: center; padding: 40px 24px; background: #f8fafc; border: 1px dashed #d7dee8; border-radius: var(--r-lg, 10px); margin-top: 4px; }
.rfx-ds .rfx-empty-icon { font-size: 2rem; color: #cbd5e1; display: block; margin-bottom: 12px; }
.rfx-ds .rfx-empty-text { font-size: 0.9rem; color: #64748b; line-height: 1.5; }
.rfx-ds .rfx-empty-text .font-weight-bold { color: #2D3E50; }
/* ===== Grille de prix (BOM) — vue lecture DS ===== */
.rfx-bomgrid { padding: 4px 0 0; }
.rfx-bomgrid-required { margin-bottom: 12px; }
.rfx-bomgrid-profile-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rfx-bomgrid-profile-row .selectpicker, .rfx-bomgrid-profile-row .dropdown { min-width: 240px; }
.rfx-bomgrid-profile-eye { color: #14b8a6; font-size: 1rem; text-decoration: none; }
.rfx-bomgrid-profile-eye:hover { color: #0f766e; }
.rfx-bomgrid-alt { border: 1px solid #e6ebf1; border-radius: var(--r-md, 6px); background: #f8fafc; padding: 12px 16px; margin-bottom: 16px; font-size: 0.85rem; color: #334155; }
.rfx-bomgrid-alt > div { margin-bottom: 4px; }
.rfx-bomgrid-alt-instructions { margin-top: 6px; color: #64748b; }

/* Table DS lecture (colonnes alignees, groupee par Lot/Sous-lot via rowspan). */
.rfx-bomtable-wrap { overflow-x: auto; }
.rfx-bomtable { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rfx-bomtable thead th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #64748b; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
.rfx-bomtable thead th.text-center { text-align: center; }
.rfx-bomtable tbody td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; color: #2D3E50; vertical-align: middle; }
.rfx-bomtable tbody tr:hover td { background: #f8fafc; }
.rfx-bomtable .rfx-bomtable-cat { font-weight: 700; color: #1b2a4a; background: #fbfdfe; border-right: 1px solid #eef2f6; white-space: nowrap; }
.rfx-bomtable .rfx-bomtable-subcat { font-weight: 600; color: #475569; border-right: 1px solid #eef2f6; white-space: nowrap; }
.rfx-bomtable .rfx-bomtable-name { font-weight: 600; }
.rfx-bomtable .rfx-bomtable-actions { width: 1%; white-space: nowrap; text-align: center; }
.rfx-bomtable-action { color: #94a3b8; font-size: 0.85rem; padding: 0 5px; text-decoration: none; }
.rfx-bomtable-action:hover { color: #14b8a6; }
.rfx-bomtable-action-danger:hover { color: #c0392b; }
/* =====================================================================
   Grille de prix - modale "Ligne de prix" (etape 2, 2026-08-07)
   Reskin DS de iteration_price/edit.html.twig. Scope .rfx-ds (page BOM).
   3 sections .rfx-card : produit/service, detail grille, base produits.
   ===================================================================== */
.rfx-ds .rfx-lp-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 18px 24px; display: flex; align-items: flex-start; justify-content: space-between; }
.rfx-ds .rfx-lp-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0d9488; margin-bottom: 2px; }
.rfx-ds .rfx-lp-title { font-family: 'Lexend', sans-serif; font-size: 1.15rem; font-weight: 600; color: #2D3E50; margin: 0; }
.rfx-ds .rfx-lp-close { font-size: 1.4rem; color: #94a3b8; opacity: 1; text-shadow: none; }
.rfx-ds .rfx-lp-close:hover { color: #2D3E50; }
.rfx-ds .rfx-lp-body { padding: 0; background: #f8fafc; }
.rfx-ds .rfx-lp-scroll { padding: 20px 24px; }
.rfx-ds .rfx-lp-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: #0d9488; background: #e6f7f5; border: 1px solid #b6e6e0; border-radius: 999px; padding: 3px 10px; }
.rfx-ds .rfx-lp-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; margin-bottom: 5px; }
.rfx-ds .rfx-lp-req { color: #e11d48; }
.rfx-ds .rfx-lp-subhead { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.rfx-ds .rfx-lp-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8rem; color: #415873; background: #f1f7fb; border-left: 3px solid #0d9488; border-radius: var(--r-lg, 10px); padding: 8px 12px; margin-bottom: 12px; }
.rfx-ds .rfx-lp-note i { color: #0d9488; margin-top: 2px; }
.rfx-ds .rfx-lp-addlink { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; color: #0d9488; margin-top: 6px; cursor: pointer; }
.rfx-ds .rfx-lp-addlink:hover { color: #0f766e; text-decoration: none; }
.rfx-ds .rfx-lp-readonly { font-size: 0.9rem; color: #2D3E50; padding: 6px 0; }
.rfx-ds .rfx-lp-muted { font-size: 0.78rem; color: #94a3b8; font-weight: 400; }
.rfx-ds .rfx-lp-help { color: #cbd5e1; font-size: 0.85rem; margin-left: 4px; }
.rfx-ds .rfx-lp-help:hover { color: #0d9488; }
.rfx-ds .rfx-lp-toggle { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.rfx-ds .rfx-lp-toggle-question { font-size: 0.9rem; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-lp-toggle-radios { display: inline-flex; }
.rfx-ds .rfx-lp-footer { background: #fff; border-top: 1px solid #e2e8f0; padding: 14px 24px; display: flex; justify-content: flex-end; gap: 10px; }
.ds-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px solid #2D3E50; color: #2D3E50; font-size: 0.85rem; font-weight: 600; padding: 8px 18px; border-radius: var(--r-md, 6px); cursor: pointer; transition: background .12s, color .12s; }
.ds-btn-secondary:hover, .ds-btn-secondary:focus { background: #2D3E50; color: #fff; text-decoration: none; outline: none; }

/* Hauteur robuste modale "Ligne de prix" (fix 2026-08-07) : flex column + scroll
   interne sur .rfx-lp-scroll, cap a la hauteur viewport. Neutralise le height inline
   pose par resizeModalContainer (qui debordait -> scrollbar de page). */
#iterationPriceModal .modal-dialog { max-width: 1100px; }
#iterationPriceModal .modal-content { max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; overflow: hidden; }
#iterationPriceModal .rfx-lp-header, #iterationPriceModal .rfx-lp-footer { flex: 0 0 auto; }
#iterationPriceModal .rfx-lp-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
#iterationPriceModal .rfx-lp-scroll { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }

/* Fix hauteur v2 (2026-08-07) : form_start insere un <form> entre .modal-content et
   header/body/footer -> le flex + max-height doivent porter sur le <form>, pas sur
   .modal-content (sinon le contenu deborde et est rogne sans scroll interne). */
#iterationPriceModal .modal-content { display: block !important; max-height: none !important; overflow: hidden; }
#iterationPriceModal .modal-content > form { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); }

/* Ajustement fin (2026-08-07) : marge supplementaire pour supprimer le residuel 1-2px de scrollbar page. */
#iterationPriceModal .modal-content > form { max-height: calc(100vh - 5rem); }

/* Onglets grilles de prix (BOM) : modele pilules .rfx-qtabs (calque Questionnaires). Les regles .nav-link.item-tab et .rfx-qtab-action sont generiques (deja definies). */
.rfx-ds .rfx-qtabs .bom-item, .adm-ds .rfx-qtabs .bom-item { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); overflow: hidden; }
.rfx-ds .rfx-qtabs .bom-item.active, .adm-ds .rfx-qtabs .bom-item.active { border-color: #0d9488; background: #e6f7f4; }
.rfx-ds .rfx-qtabs .bom-item.active .nav-link.item-tab, .adm-ds .rfx-qtabs .bom-item.active .nav-link.item-tab { color: #0b7d72; }
.rfx-ds .rfx-qtabs-create-row, .adm-ds .rfx-qtabs-create-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.rfx-ds .rfx-qtabs-create-row input.form-control, .adm-ds .rfx-qtabs-create-row input.form-control { height: 36px; font-size: 0.85rem; min-width: 240px; }
.rfx-ds .rfx-qtabs-create-row .ds-btn-primary, .adm-ds .rfx-qtabs-create-row .ds-btn-primary { white-space: nowrap; }
/* Reglages integres au panneau de la grille (modele de colonnes + remplissage) - fusion carte config (2026-08-07). */
.rfx-ds .rfx-bomsettings { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding: 2px 0 16px; margin-bottom: 14px; border-bottom: 1px solid #eef2f6; }
.rfx-ds .rfx-bomsettings-item { display: flex; flex-direction: column; }
.rfx-ds .rfx-bomsettings-model { flex: 1 1 360px; min-width: 280px; }
.rfx-ds .rfx-bomsettings-required { flex: 0 1 auto; }
.rfx-ds .rfx-bomsettings-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; margin-bottom: 6px; }
.rfx-ds .rfx-bomsettings-help { font-size: 0.78rem; color: #94a3b8; margin-top: 6px; max-width: 520px; }
.rfx-ds .rfx-bomsettings .rfx-bomgrid-profile-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Card Parametrage (reskin DS - reglages prix iteration + modele) + modale Creer un modele (2026-08-07). */
.rfx-ds .rfx-ipconf { display: flex; flex-direction: column; gap: 4px; }
.rfx-ds .rfx-ipconf-currency { margin-bottom: 10px; }
.rfx-ds .rfx-ipconf-currency-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rfx-ds .rfx-ipconf-ro .rfx-pub-ro { margin-bottom: 4px; }
.rfx-ds .rfx-ipconf-models { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.rfx-ds .rfx-ipconf-models .rfx-pub-field-label { margin-bottom: 8px; }
.rfx-ds .rfx-ipm-scroll { padding: 18px 22px 12px; }
.rfx-ds .rfx-ipm-sec { margin-bottom: 22px; }
.rfx-ds .rfx-ipm-subhead { font-size: 0.95rem; font-weight: 600; color: #2D3E50; margin-bottom: 10px; }
.rfx-ds .rfx-ipm-cols { display: flex; gap: 28px; flex-wrap: wrap; }
.rfx-ds .rfx-ipm-col { flex: 1 1 300px; min-width: 260px; }
.rfx-ds .rfx-ipm-col-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #0d9488; margin-bottom: 2px; }
.rfx-ds .rfx-ipm-col-info { font-size: 0.78rem; color: #94a3b8; margin-bottom: 8px; }
.rfx-ds .rfx-ipm-always { color: #64748b; font-size: 0.85rem; }
.rfx-ds .rfx-ipm-always-ic { color: #cbd5e1; margin-right: 4px; }
/* Toggle ON verrouille (colonne toujours affichee : Designation / Prix unitaire) - teal clair non decochable. */
.rfx-ds .rfx-access-row-locked .form-check-input { cursor: default; opacity: 0.6; }
.rfx-ds .rfx-access-row-locked .form-check-label { cursor: default; color: #64748b; }
/* Devise : ne pas prendre toute la largeur. */
.rfx-ds .rfx-ipconf-currency { max-width: 420px; }

/* Ligne devise compacte : select etroit + toggle "autoriser modif" aligne a droite (2026-08-08). */
.rfx-ds .rfx-ipconf-currency-row { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 4px; }
.rfx-ds .rfx-ipconf-currency { max-width: 220px; margin-bottom: 0; }
.rfx-ds .rfx-ipconf-currency-toggle { padding-bottom: 4px; }
/* 2 cards Parametrage/Modeles cote a cote (fait remonter les grilles). Hauteurs naturelles (pas d'etirement). */
.rfx-ds .rfx-card-row.rfx-bomconf-cols { align-items: flex-start; }

/* Espacement icone<->texte dans les boutons ghost DS (ex. + Creer un modele / + Ajouter une colonne). */
.ds-btn-ghost { gap: 6px; }

/* Devise : label classique a gauche du dropdown (2026-08-08). */
.rfx-ds .rfx-ipconf-currency { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; max-width: none; }
.rfx-ds .rfx-ipconf-currency-label { font-size: 0.9rem; font-weight: 500; color: #2D3E50; margin: 0; white-space: nowrap; }
.rfx-ds .rfx-ipconf-currency .bootstrap-select, .rfx-ds .rfx-ipconf-currency .selectpicker + .dropdown-toggle, .rfx-ds .rfx-ipconf-currency select { max-width: 200px; }
/* Panneau grille : label "Modele de colonnes" a gauche du dropdown + fix coupe bas + gain hauteur (2026-08-08). */
.rfx-ds .rfx-bomsettings { align-items: center; padding: 6px 0 18px; overflow: visible; }
.rfx-ds .rfx-bomsettings-model { flex-direction: row; align-items: center; gap: 12px; }
.rfx-ds .rfx-bomsettings-inline-label { font-size: 0.9rem; font-weight: 500; color: #2D3E50; margin: 0; white-space: nowrap; }
.rfx-ds .rfx-bomsettings-model .rfx-bomgrid-profile-row { flex: 1 1 auto; }
.rfx-ds .rfx-bomsettings-model .bootstrap-select { max-width: 320px; }
.rfx-ds .rfx-bomsettings .rfx-access-row { padding: 0; }
/* Popover propre (oeil apercu modele) - clair, ombre douce, petite police. */
.rfx-qpop { max-width: 340px; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 6px 24px rgba(2,6,23,.12); }
.rfx-qpop .popover-body { font-size: 0.78rem; line-height: 1.4; color: #334155; padding: 10px 12px; }
.rfx-qpop .popover-body ul { margin: 0 0 4px; padding-left: 16px; }
.rfx-qpop.bs-popover-bottom .arrow::after, .rfx-qpop.bs-popover-auto[x-placement^="bottom"] .arrow::after { border-bottom-color: #fff; }
.rfx-qpop.bs-popover-top .arrow::after, .rfx-qpop.bs-popover-auto[x-placement^="top"] .arrow::after { border-top-color: #fff; }

/* Selectpicker (modele / devise) : bordure complete visible (corrige la coupe du bas). */
.rfx-ds .rfx-bomsettings .bootstrap-select > .dropdown-toggle,
.rfx-ds .rfx-ipconf-currency .bootstrap-select > .dropdown-toggle { border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); background-color: #fff; box-shadow: none; }
/* Fix : masquer le <select> natif conserve visible a cote du bouton bootstrap-select (il interceptait les clics -> menu natif moche + recouvrait l'oeil). Le bouton .dropdown-toggle stylise reste. */
.rfx-ds .rfx-bomgrid-profile-row select.selectpicker,
.rfx-ds .rfx-ipconf-currency select.selectpicker { display: none !important; }
.rfx-ds .rfx-bomgrid-profile-row .bootstrap-select { min-width: 240px; }
/* Table d'apercu/erreurs d'import Excel (partagee Questionnaires + Grilles de prix) - DS (2026-08-08). */
.rfx-ds .rfx-imperr, .adm-ds .rfx-imperr { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #dc2626; border-radius: var(--r-md, 6px); padding: 9px 12px; margin: 14px 0; }
.rfx-ds .rfx-imperr i, .adm-ds .rfx-imperr i { margin-top: 2px; flex-shrink: 0; }
.rfx-ds .rfx-imptable-wrap, .adm-ds .rfx-imptable-wrap { overflow-x: auto; overflow-y: auto; max-height: 42vh; margin-top: 6px; }
.rfx-ds .rfx-imptable, .adm-ds .rfx-imptable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rfx-ds .rfx-imptable th, .adm-ds .rfx-imptable th { text-align: left; font-weight: 600; color: #64748b; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .02em; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.rfx-ds .rfx-imptable td, .adm-ds .rfx-imptable td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; color: #2D3E50; vertical-align: top; }
.rfx-ds .rfx-imptable td.is-error, .adm-ds .rfx-imptable td.is-error { background: #fef2f2; }
.rfx-ds .rfx-imptable .fa-exclamation-circle, .adm-ds .rfx-imptable .fa-exclamation-circle { color: #dc2626; }
/* Hint gris italique sous le bouton Telecharger le modele (import grille). */
.rfx-ds .rfx-imp-model-help { font-size: 0.8rem; font-style: italic; color: #64748b; margin-top: 8px; }

/* Fix positionnement menu selectpicker (modele/devise) : forcer position:relative sur le wrapper pour que le menu absolu se cale SOUS le champ (et non en bas de page). */
.rfx-ds .rfx-bomgrid-profile-row .bootstrap-select,
.rfx-ds .rfx-ipconf-currency .bootstrap-select { position: relative !important; }
.rfx-ds .rfx-bomgrid-profile-row .bootstrap-select .dropdown-menu,
.rfx-ds .rfx-ipconf-currency .bootstrap-select .dropdown-menu { z-index: 1010; }
/* Selects natifs DS (modele de colonnes + devise) - remplacent bootstrap-select (positionnement fiable). */
.rfx-ds .rfx-native-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
    border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); padding: 7px 32px 7px 12px;
    font-size: 0.85rem; color: #2D3E50; height: 38px; line-height: 1.4; cursor: pointer;
}
.rfx-ds .rfx-native-select:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.rfx-ds .rfx-bomsettings-model .rfx-native-select { min-width: 240px; max-width: 340px; }
.rfx-ds .rfx-ipconf-currency .rfx-native-select { max-width: 200px; }
/* Largeur reduite des selects natifs (modele/devise) : eviter le retour a la ligne de l'oeil. */
.rfx-ds .rfx-bomsettings-model { flex-wrap: nowrap; }
.rfx-ds .rfx-bomsettings-model .rfx-native-select { min-width: 0; width: 220px; max-width: 220px; }
.rfx-ds .rfx-ipconf-currency .rfx-native-select { width: 170px; max-width: 170px; }
/* Resserrer l'espace entre le bas des cards Parametrage/Modeles et le titre "Grilles de prix". */
.rfx-ds #bom-list-container { padding-top: 8px !important; }
.rfx-ds #bom-list-container .rfx-qtabs-block { margin-top: 0; }
/* Etape 2bis : edition inline grille (Quantite/Ponderation) + selection + barre d'affectation groupee. */
.rfx-ds .rfx-bomtable-check { width: 34px; text-align: center; }
.rfx-ds .rfx-bominline { width: 66px; text-align: center; border: 1px solid transparent; background: transparent; border-radius: var(--r-md, 6px); padding: 3px 4px; font-size: 0.85rem; color: #2D3E50; }
.rfx-ds .rfx-bominline:hover { border-color: #e2e8f0; }
.rfx-ds .rfx-bominline:focus { outline: none; border-color: #0d9488; background: #fff; box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.rfx-ds .rfx-bomassign { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: #e6f7f4; border: 1px solid #b6e6e0; border-radius: var(--r-md, 6px); }
.rfx-ds .rfx-bomassign-count { font-size: 0.85rem; color: #0b7d72; }
.rfx-ds .rfx-bomassign-label { font-size: 0.78rem; font-weight: 600; color: #415873; margin: 0 0 0 6px; }
.rfx-ds .rfx-bomassign .rfx-native-select { height: 34px; min-width: 160px; }
.rfx-ds .rfx-bomassign-msg { font-size: 0.8rem; color: #c0392b; font-weight: 500; }
/* Hauteur robuste modale "Creer une configuration" (comme la modale ligne) : cap viewport + scroll interne, neutralise le resize JS -> plus de scrollbar de page. */
#iterationPriceConfigurationModal .modal-content { display: block !important; max-height: none !important; overflow: hidden; }
#iterationPriceConfigurationModal .modal-content > form { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); }
#iterationPriceConfigurationModal .ds-confirm-header, #iterationPriceConfigurationModal .modal-footer { flex: 0 0 auto; }
#iterationPriceConfigurationModal .ds-confirm-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
#iterationPriceConfigurationModal .container-modal-scrollable { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }
/* Grille BOM : clic sur toute la ligne ouvre la fiche (comme Questionnaires) - curseur + surbrillance. */
.rfx-ds .rfx-bomtable tbody tr.bom-iteration-price-row { cursor: pointer; }
.rfx-ds .rfx-bomtable tbody tr.bom-iteration-price-row:hover > td { background: #f6fbfa; }

/* Etape 2ter : barre d'actions groupees enrichie (Affecter popover + Supprimer). */
.rfx-ds .rfx-bomassign-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.rfx-ds .rfx-bomassign-affect { position: relative; }
.rfx-ds .rfx-bomassign-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1030; width: 300px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 8px 28px rgba(2,6,23,.14); padding: 14px; text-align: left; }
.rfx-ds .rfx-bomassign-pop-hint { font-size: 0.78rem; color: #64748b; margin-bottom: 10px; }
.rfx-ds .rfx-bomassign-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rfx-ds .rfx-bomassign-field label { font-size: 0.75rem; font-weight: 600; color: #415873; margin: 0; }
.rfx-ds .rfx-bomassign-field .rfx-native-select { width: 100%; max-width: none; }
.rfx-ds .rfx-bomassign-pop-footer { text-align: right; margin-top: 4px; }
.rfx-ds .rfx-bomassign-affect .js-affect-toggle { white-space: nowrap; }
/* Recap info (teal) dans la barre d'actions groupees (ex. ajout Catalogue). */
.rfx-ds .rfx-bomassign-msg.is-info { color: #0b7d72; }

/* Modale de confirmation actions groupees (compteur + liste des ignorees). */
#bomActionConfirmModal .rfx-bomconfirm-note { margin-top: 10px; font-size: 0.85rem; color: #64748b; }
#bomActionConfirmModal .rfx-bomconfirm-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.85rem; color: #334155; max-height: 160px; overflow-y: auto; }
/* Indicateur d'autosave des modales lots / sous-lots. */
.rfx-cat-footer { gap: 12px; }
.rfx-cat-autosave { font-size: 0.8rem; color: #94a3b8; display: inline-flex; align-items: center; gap: 6px; }
.rfx-cat-autosave .fa-sync-alt { color: #cbd5e1; }
.rfx-cat-status { font-weight: 600; }
.rfx-cat-status.is-saving { color: #64748b; }
.rfx-cat-status.is-ok { color: #0b7d72; }
.rfx-cat-status.is-pending { color: #b45309; font-weight: 500; }
/* Espace icone<->libelle sur les boutons de la barre d'actions (Supprimer / Catalogue). */

.rfx-ds .rfx-lp-subhelp { font-size: 0.78rem; font-style: italic; color: #64748b; line-height: 1.4; margin: 4px 0 8px; }
.rfx-ds .rfx-lp-subhead-flush { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
#iterationPriceModal .rfx-artlist-scroll { max-height: 58vh; min-height: 260px; overflow-y: auto; }
#iterationPriceModal .rfx-artlist .rfx-doc-hint { margin-bottom: 12px; }
/* Ligne document epuree dans la modale ligne de prix (#6) + masquage zone glisser-deposer (#5). */
.rfx-ds .rfx-ipdoc-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.rfx-ds .rfx-ipdoc-icon { color: #94a3b8; font-size: 1.05rem; flex: 0 0 auto; }
.rfx-ds .rfx-ipdoc-main { flex: 1 1 auto; min-width: 0; }
.rfx-ds .rfx-ipdoc-name { font-size: 0.9rem; color: #2D3E50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-ipdoc-meta { font-size: 0.75rem; color: #94a3b8; }
.rfx-ds .rfx-ipdoc-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rfx-ds .rfx-ipdoc-actions a { color: #0d9488; }
.rfx-ds .rfx-ipdoc-publish { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; color: #415873; cursor: pointer; white-space: nowrap; }
.rfx-ds .rfx-ipdoc-publish .form-check, .rfx-ds .rfx-ipdoc-publish .input-group { margin: 0; }
.rfx-ds .rfx-ipdoc-del { color: #94a3b8 !important; }
/* On ne garde que le bouton de selection : la zone glisser-deposer est masquee. */
#iterationPriceModal .qq-upload-drop-area, #iterationPriceModal .qq-upload-drop-area-selector { display: none !important; }
/* Retours lot 4 (2026-08-14). */
/* #1 Astuce footer modale Catalogue en teal (au lieu de text-info bleu). */
#iterationPriceModal .rfx-artlist-tip { color: #0d9488; font-size: 0.8rem; }
/* #5 Modale ligne : reduire l'uploader au seul bouton (pattern des drawers) — plus de boite ni de texte glisser-deposer. */
#iterationPriceModal .qq-uploader { min-height: 0 !important; max-height: none !important; border: none !important; background: transparent !important; padding: 0 !important; overflow: visible !important; }
#iterationPriceModal .qq-uploader:before { content: none !important; }
#iterationPriceModal .qq-upload-drop-area, #iterationPriceModal .qq-upload-drop-area-selector { display: none !important; }
#iterationPriceModal .qq-upload-button { float: none; display: inline-block; width: auto; white-space: nowrap; padding: 7px 16px !important; font-size: 0.82rem; font-weight: 500; border-radius: var(--r-md, 6px)!important; background: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; box-shadow: none !important; }
#iterationPriceModal .qq-upload-button:hover, #iterationPriceModal .qq-upload-button-hover { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
/* #3 Interrupteur 2 etats Interne / Publie. */
.rfx-ds .rfx-pubtoggle { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); overflow: hidden; }
.rfx-ds .rfx-pubtoggle-opt { border: none; background: #fff; color: #64748b; font-size: 0.75rem; font-weight: 500; padding: 4px 10px; cursor: pointer; line-height: 1.4; }
.rfx-ds .rfx-pubtoggle-opt:focus { outline: none; }
.rfx-ds .rfx-pubtoggle-opt[data-pub="1"].is-active { background: #0d9488; color: #fff; }
.rfx-ds .rfx-pubtoggle-opt[data-pub="0"].is-active { background: #64748b; color: #fff; }
.rfx-ds .rfx-pubtoggle-warn { color: #dc2626; }
/* Toggle simple « Publier » (remplace le segmente Interne/Publie) - modale ligne de prix. */
#iterationPriceModal .rfx-pubswitch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; user-select: none; }
#iterationPriceModal .rfx-pubswitch .rfx-pubswitch-track { position: relative; width: 34px; height: 18px; background: #cbd5e1; border-radius: 9px; transition: background .15s; flex: 0 0 auto; }
#iterationPriceModal .rfx-pubswitch .rfx-pubswitch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .15s; }
#iterationPriceModal .rfx-pubswitch.is-on .rfx-pubswitch-track { background: #0d9488; }
#iterationPriceModal .rfx-pubswitch.is-on .rfx-pubswitch-track::after { left: 18px; }
#iterationPriceModal .rfx-pubswitch-text { font-size: 0.8rem; color: #64748b; }
#iterationPriceModal .rfx-pubswitch.is-on .rfx-pubswitch-text { color: #0f766e; font-weight: 500; }
/* Zone d'ajout d'un document (modale ligne de prix) - compacte. */
#iterationPriceModal .rfx-ipdoc-new { border-top: 1px solid #f1f5f9; margin: 0; }
#iterationPriceModal .rfx-ipdoc-new-upload { display: inline-flex; align-items: center; }
#iterationPriceModal .rfx-ipdoc-new-upload .qq-uploader { margin: 0; }
/* Carte d'ajout d'un document (modale ligne de prix) - compacte et propre. */
#iterationPriceModal .rfx-ipdoc-new { border-top: 1px solid #f1f5f9; padding: 12px 0 6px; margin: 0; }
#iterationPriceModal .rfx-ipdoc-new-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#iterationPriceModal .rfx-ipdoc-new-upload { display: inline-flex; align-items: center; min-width: 0; }
#iterationPriceModal .rfx-ipdoc-new-upload .qq-uploader { margin: 0; }
#iterationPriceModal .rfx-ipdoc-new-right { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
#iterationPriceModal .rfx-ipdoc-new-fields { display: flex; gap: 12px; margin-top: 10px; }
#iterationPriceModal .rfx-ipdoc-new-field { flex: 1 1 0; min-width: 0; }
/* Carte d'ajout doc - tout sur une ligne ; champs reveles au choix du fichier (.is-shown). */
#iterationPriceModal .rfx-ipdoc-new { border-top: 1px solid #f1f5f9; padding: 12px 0 6px; }
#iterationPriceModal .rfx-ipdoc-new-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
#iterationPriceModal .rfx-ipdoc-new-upload { flex: 0 0 auto; }
#iterationPriceModal .rfx-ipdoc-new-details { display: none; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; }
#iterationPriceModal .rfx-ipdoc-new-details.is-shown { display: flex; }
#iterationPriceModal .rfx-ipdoc-new-field { flex: 1 1 0; min-width: 0; }
#iterationPriceModal .rfx-ipdoc-new-details .rfx-pubswitch, #iterationPriceModal .rfx-ipdoc-new-details .rfx-pubdoc-tt, #iterationPriceModal .rfx-ipdoc-new-details .rfx-ipdoc-del { flex: 0 0 auto; }
/* Bouton d'ajout d'un doc supplementaire : identique au « + Ajouter » initial (lien teal + plus). */
#iterationPriceModal .add_element_link { display: inline-flex; align-items: center; gap: 6px; padding: 0 !important; border: none !important; background: none !important; color: #0d9488 !important; font-size: 0.82rem; font-weight: 500; }
#iterationPriceModal .add_element_link::before { content: '\002B'; font-weight: 700; }
#iterationPriceModal .add_element_link:hover { color: #0f766e !important; text-decoration: none; }
/* Footer modale ligne : 3 boutons de meme taille. */
.rfx-lp-footer .ds-btn-ghost, .rfx-lp-footer .ds-btn-secondary, .rfx-lp-footer .ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px; font-size: 0.85rem; font-weight: 500; line-height: 1.4; border-radius: var(--r-md, 6px); }
/* Toggle « Ajouter au Catalogue » dans le header de la modale ligne. */
#iterationPriceModal .rfx-lp-header-right { display: flex; align-items: center; gap: 14px; }
#iterationPriceModal .rfx-catalogue-tt { color: #94a3b8; cursor: help; font-size: 0.95rem; }
#iterationPriceModal .rfx-catalogue-tt:hover { color: #0d9488; }
/* Footer modale ligne : autosave (indicateur a gauche, Fermer a droite). */
#iterationPriceModal .rfx-lp-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Footer modale ligne : groupe d'actions a droite + bouton « Annuler la creation » (teinte rouge subtile). */
#iterationPriceModal .rfx-lp-footer-actions { display: flex; align-items: center; gap: 8px; }
#iterationPriceModal .rfx-lp-cancel-create { color: #dc2626 !important; border-color: #fca5a5 !important; }
#iterationPriceModal .rfx-lp-cancel-create:hover { background: #fef2f2 !important; color: #b91c1c !important; }
/* « + Ajouter » (doc suivant) : aligner sur le « + Ajouter » initial (pas rikiki). */
#iterationPriceModal .add_element_link { font-size: 0.85rem !important; font-weight: 500 !important; line-height: 1.4 !important; margin-top: 8px; }
#iterationPriceModal .add_element_link::before { content: '\002B'; font-weight: 700; font-size: 0.95rem; }
/* Doc soumis non persiste (branche else) : libelle « Document charge : … » compact. */
#iterationPriceModal .rfx-ipdoc-loaded { font-size: 0.85rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* #2 Reduire l'espace entre « Choisir un document » et « + Ajouter ». */
#iterationPriceModal #iteration_price_documents > .form-group.row.mt-3 { margin-top: 4px !important; }
#iterationPriceModal .add_element_link { margin-top: 0; }
#iterationPriceModal .rfx-ipdoc-new { padding-bottom: 2px; }
/* #4 Modele de colonnes (display) : pill teal clair. */
.rfx-ds .rfx-config-pill { display: inline-block; background: #e6f5f3; color: #0f766e; font-weight: 600; font-size: 0.82rem; padding: 2px 10px; border-radius: var(--r-full, 999px); }
/* #6 Header modale ligne : centrer verticalement le toggle « Ajouter au Catalogue ». */
#iterationPriceModal .rfx-lp-header { align-items: center; }
/* Indicateurs de ligne (grille) : trombone documents (gris estompe / teal si communique) + base Catalogue. */
.rfx-ds .rfx-bomrow-ind { font-size: 0.85rem; margin-left: 6px; }
.rfx-ds .rfx-bomrow-ind.is-internal { color: #cbd5e1; }
.rfx-ds .rfx-bomrow-ind.is-comm { color: #0d9488; }
/* Overlay « Enregistrement en cours » de la modale ligne. */
#iterationPriceModal .rfx-lp-saving { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.75); z-index: 20; display: flex; align-items: center; justify-content: center; }
#iterationPriceModal .rfx-lp-saving-box { display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #2D3E50; font-weight: 500; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 14px 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
#iterationPriceModal .rfx-lp-saving-box .fa-circle-notch { color: #0d9488; }
/* #1 (suite) FineUploader : masquer les residus (barres de progression, zone de traitement) qui creusent l'espace. */
#iterationPriceModal .qq-total-progress-bar-container, #iterationPriceModal .qq-drop-processing { display: none !important; }
#iterationPriceModal .qq-uploader { min-height: 0 !important; }
#iterationPriceModal .qq-upload-list { margin: 0 !important; padding: 0 !important; }
/* #1 Retirer la marge de 20px sous « Choisir un document » (form-group par defaut). */
#iterationPriceModal .rfx-ipdoc-new { margin-bottom: 0 !important; }
/* #3 Actions ligne (Editer/Poubelle/Oeil) : masquees hors survol, gris, teal au survol direct. */
.rfx-ds .rfx-bomtable-actions .rfx-bomtable-action { color: #94a3b8 !important; opacity: 0; transition: opacity .12s ease, color .12s ease; }
.rfx-ds tr.bom-iteration-price-row:hover .rfx-bomtable-actions .rfx-bomtable-action { opacity: 1; }
.rfx-ds .rfx-bomtable-actions .rfx-bomtable-action:hover { color: #0d9488 !important; }
.rfx-ds .rfx-bomtable-actions .rfx-bomtable-action-danger:hover { color: #dc2626 !important; }
/* #4 Indicateurs (trombone/base) a gauche des actions, toujours visibles. */
.rfx-ds .rfx-bomtable-indicators { margin-right: 8px; white-space: nowrap; }
.rfx-ds .rfx-bomtable-indicators .rfx-bomrow-ind { margin-left: 0; margin-right: 4px; }
/* #5 Troncature des noms de lot / sous-lot longs (tooltip via .rfx-bomrow-tt). */
.rfx-ds .rfx-bomtable-trunc { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* Separateur Famille > Sous-famille (colonne Famille). */
.rfx-ds .rfx-bomtable-fam-sep { color: #94a3b8; }

/* En-têtes de colonnes + barre d'action COLLANTS au scroll (les cards du haut defilent). */
/* Le wrap avait overflow-x:auto (=> overflow-y:auto calcule) qui cassait le sticky vertical : on repasse en visible. */
.rfx-ds .rfx-bomtable-wrap { overflow: visible; }
.rfx-ds .rfx-bomtable thead th { position: sticky; top: var(--bomthead-top, 0px); z-index: 5; background: #fff; box-shadow: inset 0 -1px 0 #e6ebf1; }
.rfx-ds .rfx-bomassign { position: sticky; top: 0; z-index: 7; }
/* Pill « nom de grille » dans la barre sticky (a gauche) + mode contexte (scrolle sans selection). */
.rfx-ds .rfx-bomassign-gridpill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; color: #0f766e; background: #e6f5f3; padding: 3px 12px; border-radius: var(--r-full, 999px); white-space: nowrap; }
.rfx-ds .rfx-bomassign-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
.rfx-ds .rfx-bomassign.is-context-only { background: #fff; border-color: #e6ebf1; padding: 6px 14px; }
/* « Modele de colonnes » editable : selectpicker stylise en pill teal (fait ressortir le modele choisi, reste selectionnable). */
.rfx-ds .rfx-bomsettings-model .bootstrap-select > .btn.dropdown-toggle { background: #e6f5f3 !important; color: #0f766e !important; border: 1px solid transparent !important; border-radius: var(--r-full, 999px)!important; font-weight: 600 !important; font-size: 0.85rem !important; padding: 3px 14px !important; box-shadow: none !important; height: auto !important; }
.rfx-ds .rfx-bomsettings-model .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner { color: #0f766e !important; }
.rfx-ds .rfx-bomsettings-model .bootstrap-select > .btn.dropdown-toggle:hover, .rfx-ds .rfx-bomsettings-model .bootstrap-select.show > .btn.dropdown-toggle { background: #d4ede9 !important; }
/* Fix encadre gris : le wrapper selectpicker (data-width 220px) depassait le pill teal → il epouse le contenu. */
.rfx-ds .rfx-bomsettings-model .bootstrap-select { width: auto !important; min-width: 0 !important; max-width: none !important; background: transparent !important; border: none !important; }
.rfx-ds .rfx-bomsettings-model .bootstrap-select > .btn.dropdown-toggle { width: auto !important; }
/* Pill « modele de colonnes » en mode lecture seule (round/display) - forcé. */
.rfx-ds .rfx-bomsettings-model .rfx-config-pill, .rfx-ds .rfx-config-pill { display: inline-block !important; background: #e6f5f3 !important; color: #0f766e !important; font-weight: 600 !important; font-size: 0.85rem !important; padding: 3px 14px !important; border-radius: var(--r-full, 999px)!important; }
/* --- Reset propre selectpicker « Modele de colonnes » : annule les width:auto qui masquaient le texte selectionne. --- */
.rfx-ds .rfx-bomsettings-model .bootstrap-select { width: 220px !important; min-width: 220px !important; max-width: 220px !important; background: transparent !important; border: none !important; }
.rfx-ds .rfx-bomsettings-model .bootstrap-select > .btn.dropdown-toggle { width: 100% !important; background: #e6f5f3 !important; color: #0f766e !important; border: 1px solid #cfe9e4 !important; border-radius: var(--r-md, 6px)!important; padding: 5px 14px !important; box-shadow: none !important; height: auto !important; }
.rfx-ds .rfx-bomsettings-model .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner { color: #0f766e !important; font-weight: 600; }
/* Pill « modele » lecture seule - non scope (robuste si .rfx-ds absent de l'ancetre). */
.rfx-config-pill { display: inline-block !important; background: #e6f5f3 !important; color: #0f766e !important; font-weight: 600 !important; font-size: 0.85rem !important; padding: 3px 14px !important; border-radius: var(--r-full, 999px)!important; }
/* ── Picker Catalogue (articles_list) — reskin DS étape 3 ── */
#iterationPriceModal .rfx-artlist-filters { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
#iterationPriceModal .rfx-artlist-filter { flex: 1 1 160px; min-width: 140px; }
#iterationPriceModal .rfx-artlist-scroll { border: 1px solid #e5e7eb; border-radius: 8px; }
#iterationPriceModal .rfx-artlist-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.85rem; }
#iterationPriceModal .rfx-artlist-table thead th { position: sticky; top: 0; background: #f8fafc; color: #64748b; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.02em; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; z-index: 1; }
#iterationPriceModal .rfx-artlist-table tbody td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #1f2937; }
#iterationPriceModal .rfx-artlist-table tbody tr:last-child td { border-bottom: 0; }
#iterationPriceModal .rfx-artlist-row { cursor: pointer; }
#iterationPriceModal .rfx-artlist-row:hover:not(.is-added) { background: #f0fdfa; }
#iterationPriceModal .rfx-artlist-row.is-added { cursor: default; background: #fafafa; }
#iterationPriceModal .rfx-artlist-row.is-added td { color: #94a3b8; }
#iterationPriceModal .rfx-artlist-check { width: 40px; text-align: center; }
#iterationPriceModal .rfx-artlist-icon { width: 34px; text-align: center; }
#iterationPriceModal .rfx-artlist-clip { color: #0d9488; }
#iterationPriceModal .rfx-artlist-eye { color: #64748b; }
#iterationPriceModal .rfx-artlist-eye:hover { color: #0d9488; }
#iterationPriceModal .rfx-artlist-check-done { color: #0d9488; }
#iterationPriceModal .rfx-artlist-badge { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; padding: 1px 8px; border-radius: var(--r-full, 999px); margin-left: 6px; vertical-align: middle; }
#iterationPriceModal .rfx-artlist-empty { color: #64748b; font-size: 0.9rem; }
#iterationPriceModal .rfx-artlist-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#iterationPriceModal .rfx-artlist-foot-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#iterationPriceModal .rfx-artlist-added { color: #0d9488; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
#iterationPriceModal .rfx-artlist-foot-actions { display: flex; gap: 8px; align-items: center; }
/* ── Picker Catalogue — champ recherche instantanée (étape 3) ── */
#iterationPriceModal .rfx-artlist-filter-search { position: relative; flex: 2 1 260px; }
#iterationPriceModal .rfx-artlist-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.85rem; pointer-events: none; }
#iterationPriceModal .rfx-artlist-search { padding-left: 32px; height: 36px; font-size: 0.85rem; }
#iterationPriceModal .rfx-artlist-filter-form { display: flex; gap: 10px; flex: 3 1 320px; margin: 0; }
#iterationPriceModal .rfx-artlist-filter-form .rfx-artlist-filter { flex: 1 1 150px; }
/* ── Picker Catalogue — ajustements (icône recherche, loupe au hover, trombone) ── */
#iterationPriceModal .rfx-artlist-search { padding-left: 34px !important; }
#iterationPriceModal .rfx-artlist-eye { color: #cbd5e1; opacity: 0; transition: opacity .12s ease; }
#iterationPriceModal .rfx-artlist-row:hover .rfx-artlist-eye { opacity: 1; }
#iterationPriceModal .rfx-artlist-eye:hover { color: #0d9488; }
#iterationPriceModal .rfx-artlist-icon .rfx-bomrow-ind { margin-left: 0; }
/* ── Modèles de colonnes — liste (card Paramétrage) étape 4-B ── */
.rfx-ds .rfx-ipconf-models { display: flex; flex-direction: column; gap: 6px; }
.rfx-ds .rfx-ipconf-model { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: var(--r-md, 6px); background: #fff; }
.rfx-ds .rfx-ipconf-model-name { font-size: 0.88rem; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-ipconf-model-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rfx-ds .rfx-ipconf-eye { color: #64748b; }
.rfx-ds .rfx-ipconf-eye:hover { color: #0d9488; }
.rfx-ds .rfx-ipconf-edit { color: #64748b; }
.rfx-ds .rfx-ipconf-edit:hover { color: #0d9488; }
.rfx-ds .rfx-ipconf-delete { color: #94a3b8; }
.rfx-ds .rfx-ipconf-delete:hover { color: #dc2626; }
.rfx-ds .rfx-ipconf-lock { color: #cbd5e1; cursor: default; }
.rfx-ds .rfx-ipconf-add { margin-top: 8px; }
.rfx-ds .rfx-ipm-dup { display: flex; align-items: center; gap: 8px; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--r-md, 6px); padding: 8px 12px; font-size: 0.85rem; margin-bottom: 12px; }
/* ── Popover config : ligne « Pondération activée » mise en avant (étape 4-B) ── */
.rfx-qpop .rfx-qpop-flag { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,0.08); color: #0d9488; font-weight: 700; font-size: 0.85rem; }
.rfx-qpop .rfx-qpop-flag i { margin-right: 5px; }
/* ── Renfort visibilité « Pondération activée » (popover config) ── */
.rfx-qpop-flag { color: #0d9488 !important; font-weight: 700 !important; }
/* ── Fiche Article (Catalogue / Grille / Fournisseur) — reskin DS étape 5 (scope .art-ds) ── */
.art-ds .art-header { display: flex; align-items: flex-start; padding: 16px 24px; }
.art-ds .art-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #0d9488; font-weight: 700; margin-bottom: 2px; }
.art-ds .art-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1f2937; }
.art-ds .art-scroll { padding: 16px 24px; }
.art-ds .art-card { border: 1px solid #e5e7eb; border-radius: var(--r-lg, 10px); background: #fff; margin-bottom: 16px; }
.art-ds .art-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.art-ds .art-card-icon { color: #0d9488; font-size: 0.9rem; }
.art-ds .art-card-title { font-size: 0.9rem; font-weight: 700; color: #1f2937; }
.art-ds .art-updated { margin-left: auto; font-size: 0.78rem; color: #64748b; font-weight: 400; }
.art-ds .art-card-body { padding: 14px 16px; }
.art-ds .art-hint { display: flex; gap: 8px; background: #ecfdf5; border: 1px solid #d1fae5; border-radius: var(--r-lg, 10px); padding: 8px 12px; font-size: 0.82rem; color: #334155; margin-bottom: 12px; }
.art-ds .art-hint-icon { color: #0d9488; margin-top: 2px; }
.art-ds .art-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.art-ds .art-field { flex: 1 1 160px; min-width: 140px; }
.art-ds .art-field-ref { flex: 0 0 110px; }
.art-ds .art-field-name { flex: 2 1 220px; }
.art-ds .art-field-unit { flex: 1 1 140px; }
.art-ds .art-label { font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.art-ds .art-req { color: #dc2626; }
.art-ds .art-ro-value { font-size: 0.9rem; color: #1f2937; padding-top: 4px; }
.art-ds .art-add-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }
.art-ds .art-help { color: #94a3b8; margin-left: 4px; }
.art-ds .art-footer { display: flex; gap: 8px; justify-content: flex-end; }
/* ── Fiche Article : hauteur maîtrisée (calque #iterationPriceModal) — étape 5 ── */
/* Scopé au contenu fiche Article (.art-ds) : NE PAS appliquer à la fiche tarifaire fournisseur (legacy) rendue dans #articleModal. */
#articleModal .modal-content:has(.art-ds) { display: block !important; max-height: none !important; overflow: hidden; }
#articleModal .modal-content:has(.art-ds) > form { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); }
#articleModal .modal-content > form > .art-ds { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
#articleModal .art-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0; }
#articleModal .art-scroll { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }
/* ── Fiche Article : centrage vertical (comme le picker #iterationPriceModal) — étape 5 ── */
#articleModal .modal-dialog:has(.art-ds) { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
/* ── Fiche Article : carte « Compléments » (sous-titres, comme la modale ligne) — étape 5 ── */
.art-ds .art-subhead { font-size: 0.82rem; font-weight: 700; color: #1f2937; margin-top: 14px; margin-bottom: 2px; }
.art-ds .art-subhead-flush { margin-top: 0; }
.art-ds .art-subhelp { font-size: 0.78rem; color: #94a3b8; font-style: italic; margin-bottom: 8px; }
.art-ds .art-addlink { display: inline-flex; align-items: center; gap: 6px; color: #0d9488; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.art-ds .art-addlink:hover { color: #0b7d72; text-decoration: none; }
/* ── Fiche Article : carte Compléments — séparateur, uploader épuré (calque modale ligne) — étape 5 ── */
.art-ds .art-subhead:not(.art-subhead-flush) { border-top: 1px solid #f1f5f9; padding-top: 14px; margin-top: 16px; }
#articleModal .qq-upload-drop-area, #articleModal .qq-upload-drop-area-selector { display: none !important; }
#articleModal .add_element_link.btn-outline-red-light { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: #0d9488 !important; background: transparent !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; text-decoration: none !important; box-shadow: none !important; }
#articleModal .add_element_link.btn-outline-red-light::before { content: '+ '; font-weight: 700; }
#articleModal .add_element_link.btn-outline-red-light:hover { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
/* ── Fiche Article : rows de documents DS (calque #iterationPriceModal, sans Publier) — étape 5 ── */
.art-ds .rfx-ipdoc-list { margin-top: 4px; }
.art-ds .rfx-ipdoc-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #f1f5f9; }
.art-ds .rfx-ipdoc-icon { color: #94a3b8; font-size: 1.05rem; flex: 0 0 auto; }
.art-ds .rfx-ipdoc-main { flex: 1 1 auto; min-width: 0; }
.art-ds .rfx-ipdoc-name { font-size: 0.9rem; color: #2D3E50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-ds .rfx-ipdoc-meta { font-size: 0.75rem; color: #94a3b8; }
.art-ds .rfx-ipdoc-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.art-ds .rfx-ipdoc-actions a { color: #0d9488; }
.art-ds .rfx-ipdoc-del { color: #94a3b8 !important; }
.art-ds .rfx-ipdoc-loaded { font-size: 0.85rem; color: #2D3E50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#articleModal .qq-uploader { min-height: 0 !important; max-height: none !important; border: none !important; background: transparent !important; padding: 0 !important; overflow: visible !important; }
#articleModal .qq-uploader:before { content: none !important; }
#articleModal .qq-upload-button { float: none; display: inline-block; width: auto; white-space: nowrap; padding: 7px 16px !important; font-size: 0.82rem; font-weight: 500; border-radius: var(--r-md, 6px)!important; background: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; box-shadow: none !important; }
#articleModal .qq-upload-button:hover, #articleModal .qq-upload-button-hover { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
#articleModal .rfx-ipdoc-new { border-top: 1px solid #f1f5f9; padding: 12px 0 6px; }
#articleModal .rfx-ipdoc-new-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
#articleModal .rfx-ipdoc-new-upload { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
#articleModal .rfx-ipdoc-new-upload .qq-uploader { margin: 0; }
#articleModal .rfx-ipdoc-new-details { display: none; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; }
#articleModal .rfx-ipdoc-new-details.is-shown { display: flex; }
#articleModal .rfx-ipdoc-new-field { flex: 1 1 0; min-width: 0; }
#articleModal .rfx-ipdoc-new-details .rfx-ipdoc-del { flex: 0 0 auto; }
/* ── Harmonisation EXACTE fiche Article ↔ modale ligne (valeurs .rfx-*) — étape 5 ── */
#articleModal .art-body { background: #f8fafc; }
.art-ds .art-scroll { padding: 20px 24px; }
.art-ds .art-card { background: #fff; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); margin-bottom: 16px; border-color: transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; box-shadow: none; }
.art-ds .art-card-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.art-ds .art-card-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }
.art-ds .art-card-icon { color: #0d9488; font-size: 1rem; }
.art-ds .art-card-title { font-size: 1rem; font-weight: 600; color: #2D3E50; }
.art-ds .art-card-body { padding: 18px 20px 20px; }
.art-ds .art-subhead { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.art-ds .art-subhead-flush { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
.art-ds .art-subhelp { font-size: 0.78rem; font-style: italic; color: #64748b; line-height: 1.4; margin: 4px 0 8px; }
.art-ds .art-addlink { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; color: #0d9488; margin-top: 6px; cursor: pointer; text-decoration: none; }
.art-ds .art-addlink:hover { color: #0f766e; text-decoration: none; }
#articleModal .add_element_link.btn-outline-red-light { display: inline-flex; align-items: center; gap: 6px; padding: 0 !important; border: none !important; background: none !important; color: #0d9488 !important; font-size: 0.82rem; font-weight: 500; }
#articleModal .add_element_link.btn-outline-red-light::before { content: none; }
/* ── Fiche Article : « + Ajouter » identique à la ligne + retrait margin form-group — étape 5 (fix) ── */
#articleModal .add_element_link.btn-outline-red-light { display: inline-flex; align-items: center; gap: 6px; padding: 0 !important; margin-top: 0; border: none !important; background: none !important; color: #0d9488 !important; font-size: 0.85rem !important; font-weight: 500 !important; line-height: 1.4 !important; box-shadow: none !important; }
#articleModal .add_element_link.btn-outline-red-light::before { content: '\002B'; font-weight: 700; font-size: 0.95rem; }
#articleModal .add_element_link.btn-outline-red-light:hover { color: #0f766e !important; background: none !important; border-color: transparent !important; text-decoration: none; }
#articleModal .rfx-ipdoc-new { margin: 0 !important; }
/* ── Fiche Article : même largeur que la modale ligne (cap 1100px) — étape 5 ── */
#articleModal .modal-dialog { max-width: 1100px; }
/* ── Largeur naturelle modal-xlg (1200px) pour Ligne, Picker et Fiche article — plus de plafond 1100px ── */
#iterationPriceModal .modal-dialog { max-width: 1200px; }
#articleModal .modal-dialog { max-width: 1200px; }
/* Modale « Fiche tarifaire Fournisseur » : AUCUN fix hauteur/centrage — le legacy (resizeModalContainer) fonctionne en prod ; le stopgap cassait la hauteur. Règles retirées volontairement. */
/* ── Modale ligne : champs produit en flex (mêmes espacements/largeurs que la fiche Catalogue) — étape 5 ── */
.rfx-ds .rfx-lp-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.rfx-ds .rfx-lp-field { flex: 1 1 160px; min-width: 140px; }
.rfx-ds .rfx-lp-field-name { flex: 2 1 220px; }
.rfx-ds .rfx-lp-field-ref { flex: 0 0 110px; }
.rfx-ds .rfx-lp-field-unit { flex: 1 1 140px; }
/* (centrage/largeur #articleSupplierModal retirés : le legacy prod gère la hauteur ; mon override la cassait) */
/* Boutons « Tarifs » : plus d'outline pointillé au focus/clic. */
#articleModal .open-view-article-supplier-button, #articleModal .open-view-article-supplier-button:focus, #articleModal .open-view-article-supplier-button:active, #articleSupplierModal a:focus, #articleSupplierModal .btn:focus { outline: none !important; box-shadow: none !important; }
/* ── Fiche Article / Tarifaire : plus d'outline pointillé au focus/clic sur les liens — étape 5 ── */
#articleModal a:focus, #articleModal a:focus-visible, #articleSupplierModal a:focus, #articleSupplierModal a:focus-visible { outline: none !important; box-shadow: none !important; }
/* ── Boutons « Tarifs » (fiche fournisseur) : jamais d'encadré outline/border au focus/clic — étape 5 ── */
.open-view-article-supplier-button, .open-view-article-supplier-button:focus, .open-view-article-supplier-button:active, .open-view-article-supplier-button:focus-visible, .open-view-article-supplier-button:hover { outline: 0 none !important; border: 0 none !important; box-shadow: none !important; }
/* ── Boutons « Tarifs » : masquer le bord dashed « .refresher » (indicateur de chargement postData) — étape 5 ── */
.open-view-article-supplier-button.refresher { border: 0 none !important; }
/* ── Fiche Article : bouton « Ouvrir fiche tarifaire » (petit bouton teal) + poubelle au hover de ligne — étape 5 ── */
#articleModal .open-view-article-supplier-button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 0.78rem; font-weight: 500; color: #0d9488 !important; background: #fff !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; text-decoration: none !important; white-space: nowrap; transition: background .12s, color .12s; }
#articleModal .open-view-article-supplier-button:hover { background: #0d9488 !important; color: #fff !important; }
#articleModal .art-supplier-row .open-delete-article-supplier-modal-button { opacity: 0; color: #cbd5e1 !important; transition: opacity .12s, color .12s; }
#articleModal .art-supplier-row:hover .open-delete-article-supplier-modal-button { opacity: 1; }
#articleModal .art-supplier-row .open-delete-article-supplier-modal-button:hover { color: #dc2626 !important; }
/* ── Fiche Article : colonne actions fournisseur (bouton + poubelle sur une ligne) — étape 5 ── */
#articleModal .art-supplier-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
#articleModal .art-supplier-actions .open-delete-article-supplier-modal-button { padding-left: 0 !important; }
/* ── Fiche Article : ligne fournisseur en flex (étalée sur la largeur, en-têtes sans wrap, espace bouton/poubelle) — étape 5 ── */
#articleModal .art-sup-headrow, #articleModal .art-supplier-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0; }
#articleModal .art-sc { padding: 0; min-width: 0; }
#articleModal .art-sc-name { flex: 2 1 0; overflow: hidden; text-overflow: ellipsis; }
#articleModal .art-sc-ref { flex: 1.3 1 0; min-width: 0; }
#articleModal .art-sc-qty { flex: 0 0 80px; }
#articleModal .art-sc-date { flex: 0 0 120px; }
#articleModal .art-sc-actions { flex: 1.6 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
/* ── Harmonisation hauteur des boutons footer (fiche Article + picker Catalogue) — étape 5 ── */
#articleModal .art-footer .ds-btn-ghost, #articleModal .art-footer .ds-btn-secondary, #articleModal .art-footer .ds-btn-primary,
#iterationPriceModal .rfx-artlist-foot-actions .ds-btn-ghost, #iterationPriceModal .rfx-artlist-foot-actions .ds-btn-secondary, #iterationPriceModal .rfx-artlist-foot-actions .ds-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px; font-size: 0.85rem; font-weight: 500; line-height: 1.4; border-radius: var(--r-md, 6px);
}
/* Champ recherche picker : padding pour ne pas chevaucher l'icône loupe (la classe réelle est .js-artlist-search). */
#iterationPriceModal .js-artlist-search { padding-left: 34px !important; height: 36px; font-size: 0.85rem; }
/* ── Toolbar grille (vue lecture) : aligner la hauteur des boutons import sur le bouton principal (min-height 34px) — étape 5 ── */
.rfx-qread-import { min-height: 34px; }
/* ═══════════════════════════════════════════════════════════════════════════
   Fiche tarifaire fournisseur (.aspp-ds) — reskin DS, scope autonome
   Rendu dans #articleModal ET #iterationPriceModal, y compris hors page .rfx-ds
   (hub Catalogue) → styles auto-suffisants, indépendants de .rfx-ds / .art-ds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Hauteur maîtrisée (calque fiche Article) — */
#articleModal .modal-content:has(.aspp-ds),
#iterationPriceModal .modal-content:has(.aspp-ds) { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); overflow: hidden; }
.aspp-ds { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; max-height: 100%; background: #f8fafc; }
.aspp-ds .aspp-header, .aspp-ds .aspp-footer { flex: 0 0 auto; }
.aspp-ds .aspp-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.aspp-ds .aspp-scroll { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; padding: 20px 24px; }

/* — Header — */
.aspp-ds .aspp-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.aspp-ds .rfx-lp-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #0d9488; font-weight: 700; margin-bottom: 2px; }
.aspp-ds .rfx-lp-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #2D3E50; font-family: 'Lexend', sans-serif; }
.aspp-ds .rfx-lp-header-right { display: flex; align-items: center; gap: 14px; }
.aspp-ds .rfx-lp-close { border: none; background: none; font-size: 1.4rem; line-height: 1; color: #94a3b8; opacity: 1; cursor: pointer; padding: 0; }
.aspp-ds .rfx-lp-close:hover { color: #2D3E50; }

/* — Cards — */
.aspp-ds .rfx-card { background: #fff; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); margin-bottom: 16px; border-color: transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; box-shadow: none; }
.aspp-ds .rfx-card-header { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.aspp-ds .rfx-card-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }
.aspp-ds .rfx-card-icon { color: #0d9488; font-size: 1rem; }
.aspp-ds .rfx-card-title { font-size: 1rem; font-weight: 600; color: #2D3E50; }
.aspp-ds .rfx-card-body { padding: 18px 20px 20px; }
.aspp-ds .aspp-card-link { font-size: 0.8rem; font-weight: 500; color: #0d9488; }
.aspp-ds .aspp-card-link:hover { color: #0f766e; text-decoration: none; }

/* — Champs read-only (référencement) — */
.aspp-ds .rfx-lp-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.aspp-ds .rfx-lp-field { flex: 1 1 160px; min-width: 140px; }
.aspp-ds .rfx-lp-field-ref { flex: 0 0 130px; }
.aspp-ds .rfx-lp-field-name { flex: 2 1 220px; }
.aspp-ds .rfx-lp-field-unit { flex: 1 1 120px; }
.aspp-ds .rfx-lp-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; margin-bottom: 5px; display: block; }
.aspp-ds .aspp-ro { font-size: 0.9rem; color: #1f2937; padding-top: 2px; }

/* — Hint — */
.aspp-ds .rfx-hint { display: flex; gap: 8px; align-items: flex-start; background: #ecfdf5; border: 1px solid #d1fae5; border-radius: var(--r-lg, 10px); padding: 8px 12px; font-size: 0.82rem; color: #334155; margin-bottom: 14px; }
.aspp-ds .rfx-hint i { color: #0d9488; margin-top: 2px; }

/* — Barre outil (fournisseur + nouveau tarif) — */
.aspp-ds .aspp-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aspp-ds .aspp-toolbar-left { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.aspp-ds .aspp-toolbar-right { display: flex; align-items: center; gap: 10px; }
.aspp-ds .aspp-help { color: #94a3b8; cursor: help; font-size: 0.95rem; }
.aspp-ds .aspp-help:hover { color: #0d9488; }

/* — Tableau historique des fiches — */
.aspp-ds .aspp-histtable { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.85rem; }
.aspp-ds .aspp-histtable thead th { background: #f8fafc; color: #64748b; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.02em; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; }
.aspp-ds .aspp-histtable tbody td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #1f2937; }
.aspp-ds .aspp-histtable tbody tr:last-child td { border-bottom: 0; }
.aspp-ds .aspp-histrow { cursor: pointer; }
.aspp-ds .aspp-histrow:hover { background: #f0fdfa; }
.aspp-ds .aspp-histrow.is-active { background: #e6f7f5; }
.aspp-ds .aspp-histrow.is-active td { color: #0f766e; font-weight: 600; }
.aspp-ds .aspp-histbadge { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full, 999px); }

/* — Ligne méta (auteur / AO source) — */
.aspp-ds .aspp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef2f6; font-size: 0.82rem; color: #64748b; font-style: italic; }
.aspp-ds .aspp-meta-rfp { display: inline-flex; align-items: center; gap: 8px; font-style: normal; }
.aspp-ds .aspp-meta-rfp-name { font-weight: 600; color: #2D3E50; }
.aspp-ds .aspp-meta-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-md, 6px); background: #f1f5f9; color: #64748b; }
.aspp-ds .aspp-meta-link:hover { background: #0d9488; color: #fff; text-decoration: none; }

/* — Récap (devise / validité / accord-cadre / suppr) — */
.aspp-ds .aspp-summary { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.aspp-ds .aspp-summary-item { display: flex; flex-direction: column; gap: 2px; }
.aspp-ds .aspp-summary-fa { flex-direction: row; align-items: center; gap: 10px; }
.aspp-ds .aspp-summary-fa .aspp-summary-fa-toggle { display: inline-flex; align-items: center; }
.aspp-ds .aspp-del { color: #cbd5e1; font-size: 1rem; }
.aspp-ds .aspp-del:hover { color: #dc2626; }

/* — Sous-titre section — */
.aspp-ds .aspp-subhead { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid #eef2f6; }

/* — Tables de détail legacy reskinnées via scope — */
.aspp-ds .h3.text-info, .aspp-ds .h3 { color: #2D3E50 !important; font-size: 0.9rem !important; font-weight: 600 !important; border-color: #eef2f6 !important; }
.aspp-ds table.table { font-size: 0.85rem; }
.aspp-ds table.table thead th { color: #64748b; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.02em; font-weight: 600; }
.aspp-ds table.table td { color: #1f2937; }

/* — Footer — */
.aspp-ds .aspp-footer { background: #fff; border-top: 1px solid #e2e8f0; padding: 14px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.aspp-ds .aspp-footer .ds-btn-ghost, .aspp-ds .aspp-footer .ds-btn-secondary, .aspp-ds .aspp-footer .ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px; font-size: 0.85rem; font-weight: 500; line-height: 1.4; border-radius: var(--r-md, 6px); }

/* — Bouton "nouveau tarif" (toolbar) — */

/* — Focus propre — */
.aspp-ds a:focus, .aspp-ds a:focus-visible, .aspp-ds .btn:focus, .aspp-ds button:focus { outline: none; box-shadow: none; }

/* ═══ Fiche tarifaire fournisseur — modales de création (#articleSupplierModal) ═══ */

/* Hauteur maîtrisée aussi dans #articleSupplierModal (hôte new + proposal_price_new) */
#articleSupplierModal .modal-content:has(.aspp-ds) { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); overflow: hidden; }
#articleSupplierModal .modal-dialog:has(.aspp-ds) { display: flex; align-items: center; min-height: calc(100% - 3.5rem); max-width: 1100px; }

/* Hints legacy (.media bg-light) → hint DS, sans toucher le markup du partiel */
.aspp-ds .media.bg-light { display: flex; gap: 8px; align-items: flex-start; background: #ecfdf5 !important; border: 1px solid #d1fae5 !important; border-radius: 8px; padding: 8px 12px !important; margin-bottom: 12px; }
.aspp-ds .media.bg-light .media-body { font-size: 0.82rem !important; font-weight: 400 !important; color: #334155; }
.aspp-ds .media.bg-light .fa-lightbulb { color: #0d9488; }

/* Boutons "ajouter section optionnelle" (.btn-blue-light) → bouton DS discret */
.aspp-ds .btn-blue-light { display: inline-flex; align-items: center; gap: 6px; background: #fff !important; border: 1px solid #0d9488 !important; color: #0d9488 !important; font-size: 0.82rem; font-weight: 500; padding: 7px 16px !important; border-radius: var(--r-md, 6px)!important; box-shadow: none !important; }
.aspp-ds .btn-blue-light:hover { background: #0d9488 !important; color: #fff !important; }

/* Lien "ajouter une ligne" (.add_element_link) → lien teal DS */
.aspp-ds .add_element_link { display: inline-flex; align-items: center; gap: 6px; padding: 0 !important; border: none !important; background: none !important; color: #0d9488 !important; font-size: 0.82rem; font-weight: 500; box-shadow: none !important; }
.aspp-ds .add_element_link::before { content: '\002B'; font-weight: 700; }
.aspp-ds .add_element_link:hover { color: #0f766e !important; text-decoration: none; }

/* En-têtes de section du partiel (.h3 border-bottom) */
.aspp-ds .h3.border-bottom { padding-bottom: 8px !important; margin-bottom: 4px; }

/* Champ picker fournisseur (largeur raisonnable) */
.aspp-ds .aspp-supplier-picker { max-width: 340px; }

/* Labels <h5> legacy dans le partiel → look label DS */
.aspp-ds .rfx-card-body h5, .aspp-ds .bom-iteration-price-row h5, .aspp-ds #proposal-price-unique h5, .aspp-ds #proposal-price-quantitative h5 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; margin-bottom: 5px; }

/* Bloc paliers/tables encadré (.p-3.border) → carte légère */
.aspp-ds .mt-3.p-3.border, .aspp-ds #proposal-price-unique .p-3.border { border: 1px solid #eef2f6 !important; border-radius: 8px; background: #fff; }

/* ═══ Fiche tarifaire fournisseur — corrections retours 2026-08-16 ═══ */

/* #1 + #8 : centrage + largeur alignés sur les autres modales (1200px), dans les 3 hôtes */
#articleModal .modal-dialog:has(.aspp-ds),
#iterationPriceModal .modal-dialog:has(.aspp-ds),
#articleSupplierModal .modal-dialog:has(.aspp-ds) { display: flex; align-items: center; min-height: calc(100% - 3.5rem); max-width: 1200px; }

/* #8 : les modales de CRÉATION enveloppent tout dans un <form> (modal-content > form > .aspp-ds)
   → propager la chaîne flex au <form>, sinon .aspp-scroll n'a pas de hauteur bornée = aucun scroll. */
#articleSupplierModal .modal-content:has(.aspp-ds) { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); overflow: hidden; }
#articleSupplierModal .modal-content:has(.aspp-ds) > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

/* #3 : sélecteur fournisseur en pill teal (calque « modèle de colonnes »), édition ET display */
.aspp-ds .aspp-toolbar-left .bootstrap-select,
.aspp-ds .aspp-supplier-picker .bootstrap-select { width: auto !important; min-width: 200px !important; max-width: 340px !important; background: transparent !important; border: none !important; }
.aspp-ds .aspp-toolbar-left .bootstrap-select > .btn.dropdown-toggle,
.aspp-ds .aspp-supplier-picker .bootstrap-select > .btn.dropdown-toggle { background: #e6f5f3 !important; color: #0f766e !important; border: 1px solid #cfe9e4 !important; border-radius: var(--r-md, 6px)!important; padding: 5px 14px !important; box-shadow: none !important; height: auto !important; font-weight: 600 !important; }
.aspp-ds .aspp-toolbar-left .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner,
.aspp-ds .aspp-supplier-picker .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner { color: #0f766e !important; font-weight: 600; }
.aspp-ds .aspp-toolbar-left .bootstrap-select > .btn.dropdown-toggle:hover, .aspp-ds .aspp-toolbar-left .bootstrap-select.show > .btn.dropdown-toggle,
.aspp-ds .aspp-supplier-picker .bootstrap-select > .btn.dropdown-toggle:hover, .aspp-ds .aspp-supplier-picker .bootstrap-select.show > .btn.dropdown-toggle { background: #d4ede9 !important; }

/* #4 : "Accord cadre" checkbox → toggle (les 3 IDs : view, proposal_price_new, new) */
.aspp-ds input#form_frameworkAgreement,
.aspp-ds input#article_supplier_proposal_price_frameworkAgreement,
.aspp-ds input#article_supplier_new_frameworkAgreement {
  -webkit-appearance: none; appearance: none; width: 40px; height: 22px; border-radius: var(--r-full, 999px); background: #cbd5e1;
  position: relative; cursor: pointer; margin: 0; border: none; outline: none; flex: 0 0 auto; transition: background .15s; top: 0; left: 0;
}
.aspp-ds input#form_frameworkAgreement::after,
.aspp-ds input#article_supplier_proposal_price_frameworkAgreement::after,
.aspp-ds input#article_supplier_new_frameworkAgreement::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.aspp-ds input#form_frameworkAgreement:checked,
.aspp-ds input#article_supplier_proposal_price_frameworkAgreement:checked,
.aspp-ds input#article_supplier_new_frameworkAgreement:checked { background: #0d9488; }
.aspp-ds input#form_frameworkAgreement:checked::after,
.aspp-ds input#article_supplier_proposal_price_frameworkAgreement:checked::after,
.aspp-ds input#article_supplier_new_frameworkAgreement:checked::after { left: 20px; }
/* neutralise le .form-check bootstrap autour du toggle */
.aspp-ds .aspp-fa-toggle .form-check, .aspp-ds .aspp-summary-fa-toggle .form-check { padding-left: 0 !important; margin: 0 !important; min-height: 0 !important; }
.aspp-ds .aspp-fa-toggle .form-check-label, .aspp-ds .aspp-summary-fa-toggle .form-check-label { display: none !important; }

/* #5 + #3bis : tooltips DS foncés, petite police (via classe de template .aspp-tt) */
.aspp-tt .tooltip-inner { font-size: 0.76rem; line-height: 1.35; max-width: 280px; text-align: left; background: #1f2937; padding: 7px 10px; }
.aspp-tt .arrow::before { border-top-color: #1f2937; border-bottom-color: #1f2937; }
.aspp-ds .aspp-help { color: #94a3b8; cursor: help; font-size: 0.95rem; }
.aspp-ds .aspp-help:hover { color: #0d9488; }

/* #6 : bouton « Supprimer fiche » (au lieu de l'icône poubelle) */
.aspp-ds .aspp-del-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #fca5a5; color: #dc2626; font-size: 0.8rem; font-weight: 500; padding: 6px 12px; border-radius: var(--r-md, 6px); cursor: pointer; }
.aspp-ds .aspp-del-btn:hover { background: #fef2f2; color: #b91c1c; text-decoration: none; }

/* #7 : récap regroupé dans un bandeau propre */
.aspp-ds .aspp-summary { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 0; padding: 14px 16px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); }
.aspp-ds .aspp-summary-item { display: flex; flex-direction: column; gap: 3px; }
.aspp-ds .aspp-summary-fa { flex-direction: row; align-items: center; gap: 10px; }
.aspp-ds .aspp-summary-fa .aspp-summary-label { margin-bottom: 0; }
.aspp-ds .aspp-summary-value { font-size: 0.92rem; color: #1f2937; font-weight: 500; }
.aspp-ds .aspp-summary-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; }

/* ═══ Fiche tarifaire fournisseur — corrections retours 2026-08-16 (série 2) ═══ */

/* #2 Toggle « Accord cadre » robuste (case native transparente + piste dessinée) */
.aspp-ds .aspp-switch { position: relative; display: inline-block; width: 42px; height: 22px; vertical-align: middle; flex: 0 0 auto; }
.aspp-ds .aspp-switch .form-check { position: absolute; inset: 0; margin: 0; padding: 0; z-index: 2; min-height: 0; }
.aspp-ds .aspp-switch input#form_frameworkAgreement,
.aspp-ds .aspp-switch input#article_supplier_proposal_price_frameworkAgreement,
.aspp-ds .aspp-switch input#article_supplier_new_frameworkAgreement { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; border: none; border-radius: 0; }
.aspp-ds .aspp-switch input#form_frameworkAgreement::after,
.aspp-ds .aspp-switch input#article_supplier_proposal_price_frameworkAgreement::after,
.aspp-ds .aspp-switch input#article_supplier_new_frameworkAgreement::after { content: none !important; }
.aspp-ds .aspp-switch .form-check-label { display: none; }
.aspp-ds .aspp-switch-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 11px; pointer-events: none; transition: background .15s; }
.aspp-ds .aspp-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.aspp-ds .aspp-switch:has(input:checked) .aspp-switch-track { background: #0d9488; }
.aspp-ds .aspp-switch:has(input:checked) .aspp-switch-track::after { left: 22px; }
/* positionnement : accord cadre en colonne comme devise/validité */
.aspp-ds .aspp-summary-fa { flex-direction: column; align-items: flex-start; gap: 6px; }

/* #4 Sélecteur fournisseur natif (ChoiceType view) en pill teal */
.aspp-ds .aspp-supplier-select select,
.aspp-ds .aspp-supplier-select .form-control { display: inline-block; width: auto; min-width: 220px; max-width: 360px; background-color: #e6f5f3; color: #0f766e; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); padding: 6px 34px 6px 14px; font-weight: 600; font-size: 0.85rem; height: auto; line-height: 1.3; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f766e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.aspp-ds .aspp-supplier-select select:focus, .aspp-ds .aspp-supplier-select .form-control:focus { outline: none; box-shadow: none; border-color: #0d9488; background-color: #d4ede9; }

/* #6 Boutons « Définir prix unique / par palier » (vert legacy app.css → DS teal) */
.aspp-ds #article_supplier_proposal_price_type .form-check-inline,
.aspp-ds #article_supplier_new_type .form-check-inline { background-color: #fff !important; border: 1px solid #0d9488 !important; border-radius: var(--r-md, 6px)!important; padding: 7px 16px !important; margin-right: 10px; }
.aspp-ds #article_supplier_proposal_price_type .form-check-inline:hover,
.aspp-ds #article_supplier_new_type .form-check-inline:hover { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.aspp-ds #article_supplier_proposal_price_type .form-check-inline label,
.aspp-ds #article_supplier_new_type .form-check-inline label { color: #0d9488 !important; font-weight: 500; font-size: 0.82rem; margin: 0; }
.aspp-ds #article_supplier_proposal_price_type .form-check-inline:hover label,
.aspp-ds #article_supplier_new_type .form-check-inline:hover label { color: #fff !important; }

/* #6 Trait bleu (border-info) + text-info legacy → gris/navy DS dans ces modales */
.aspp-ds .border-info { border-color: #eef2f6 !important; }
.aspp-ds .h3.text-info, .aspp-ds .text-info { color: #2D3E50 !important; }

/* #1 Récap « Référence principale » : champs groupés (Conditions) + ligne Tarif */
.aspp-ds .aspp-refblock { margin-top: 4px; }
.aspp-ds .aspp-priceline { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 16px; padding: 12px 16px; background: #f0fdfa; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); }
.aspp-ds .aspp-priceline-item { display: flex; flex-direction: column; gap: 3px; }
.aspp-ds .aspp-price { font-variant-numeric: tabular-nums; }
.aspp-ds .aspp-price-strong { color: #0f766e; font-weight: 700; }

/* Actions dans le header de la card Fiches tarifaires */
.aspp-ds .aspp-card-actions { display: inline-flex; align-items: center; gap: 10px; }

/* ═══ Fiche tarifaire fournisseur — corrections retours 2026-08-16 (série 3) ═══ */

/* #2 Hauteur : calquer EXACTEMENT le modèle catalogue (.art-ds) — cap 5rem, taille au contenu */
#articleModal .modal-content:has(.aspp-ds),
#iterationPriceModal .modal-content:has(.aspp-ds),
#articleSupplierModal .modal-content:has(.aspp-ds) { display: block !important; max-height: none !important; overflow: hidden; }
.aspp-ds { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); background: #f8fafc; flex: 0 1 auto; min-height: 0; }
/* modales de création : le <form> porte le cap, .aspp-ds remplit */
#articleSupplierModal .modal-content:has(.aspp-ds) > form { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); min-height: 0; }
#articleSupplierModal .aspp-ds { max-height: none; flex: 1 1 auto; }

/* #1 Padding sous le titre des cards resserré */
.aspp-ds .rfx-card-body { padding-top: 14px; }
.aspp-ds .rfx-card-body > .row.pt-2:first-child { padding-top: 0 !important; }
.aspp-ds .rfx-card-body > .row.pt-2:first-child .media.bg-light { margin-top: 0; }

/* #3 Icône « + » : espace avec le libellé du bouton */

/* Ligne méta : AO + Supprimer fiche alignés à droite */
.aspp-ds .aspp-meta-right { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }

/* Accord cadre : ligne compacte (sans encadré) */
.aspp-ds .aspp-fa-row { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; }

/* Colonne Unité rétrécie (fait de la place pour Délai) */
.aspp-ds .aspp-field-narrow { flex: 0 0 90px; min-width: 80px; }

/* Ligne prix : Date de fin de validité poussée tout à droite */
.aspp-ds .aspp-priceline-date { margin-left: auto; text-align: right; }

/* ═══ Fiche tarifaire fournisseur — corrections retours 2026-08-16 (série 4) ═══ */

/* #1 Ligne « Conditions » (Réf/Désignation/…/Délai) : flex étalé sur toute la largeur */
.aspp-ds .aspp-refblock .rfx-lp-fields { gap: 20px; }
.aspp-ds .aspp-refblock .rfx-lp-field { flex: 1 1 0; min-width: 0; }
.aspp-ds .aspp-refblock .rfx-lp-field-name { flex: 2 1 0; }
.aspp-ds .aspp-refblock .aspp-field-narrow { flex: 0.6 1 0; }

/* #2 « Supprimer fiche » = icône poubelle seule, dépliée au survol (compacte) */
.aspp-ds .aspp-del-btn { display: inline-flex; align-items: center; gap: 0; background: transparent; border: 1px solid transparent; color: #94a3b8; font-size: 0.76rem; font-weight: 500; padding: 3px 7px; border-radius: var(--r-sm, 3px); cursor: pointer; line-height: 1.2; }
.aspp-ds .aspp-del-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; gap: 6px; }
.aspp-ds .aspp-del-btn .aspp-del-text { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .18s ease, opacity .18s ease; }
.aspp-ds .aspp-del-btn:hover .aspp-del-text { max-width: 130px; opacity: 1; }

/* #4 Plus d'espace sous « Accord cadre » */
.aspp-ds .aspp-fa-row { margin-top: 14px; margin-bottom: 22px; }

/* ═══ Repli 3→2 : formulaire de création (proposal_price_new) rendu dans le modal courant ═══ */
/* Le form enveloppe .aspp-ds (modal-content > form > .aspp-ds) → propager la chaîne flex + cap dans les 3 hôtes. */
#articleModal .modal-content:has(.aspp-ds) > form,
#iterationPriceModal .modal-content:has(.aspp-ds) > form,
#articleSupplierModal .modal-content:has(.aspp-ds) > form { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); min-height: 0; }
#articleModal .modal-content:has(.aspp-ds) > form > .aspp-ds,
#iterationPriceModal .modal-content:has(.aspp-ds) > form > .aspp-ds,
#articleSupplierModal .modal-content:has(.aspp-ds) > form > .aspp-ds { max-height: none; flex: 1 1 auto; }

/* ═══ P2.1 — Historique des tarifs déplié par fournisseur (fiche produit) ═══ */
.art-sup-expand { color: #94a3b8; font-size: 0.82rem; font-weight: 500; margin-right: 10px; white-space: nowrap; }
.art-sup-expand:hover { color: #0d9488; text-decoration: none; }
.art-sup-expand .art-sup-count { display: inline-block; min-width: 18px; text-align: center; background: #f1f5f9; color: #64748b; border-radius: var(--r-full, 999px); padding: 0 6px; font-size: 0.72rem; font-weight: 600; }
.art-sup-history { padding: 6px 0 10px 0; }
.art-sup-histtable { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.82rem; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 8px; }
.art-sup-histtable thead th { background: transparent; color: #64748b; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.02em; font-weight: 600; padding: 7px 12px; border-bottom: 1px solid #e5e7eb; }
.art-sup-histtable tbody td { padding: 7px 12px; border-bottom: 1px solid #eef2f6; vertical-align: middle; color: #1f2937; }
.art-sup-histtable tbody tr:last-child td { border-bottom: 0; }
.art-sup-badge { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full, 999px); }
.art-sup-badge-ao { background: #e6f5f3; color: #0f766e; }

/* ═══ P2.1b — Filtres du tableau fournisseurs (fiche produit) ═══ */
.art-ds .art-sup-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.art-ds .art-sup-filter-search { position: relative; flex: 1 1 260px; max-width: 340px; }
.art-ds .art-sup-filter-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.82rem; pointer-events: none; }
.art-ds .art-sup-filter-search .form-control { padding-left: 32px; height: 34px; font-size: 0.85rem; }
.art-ds .art-sup-filter-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #64748b; cursor: pointer; }
.art-ds .art-sup-filter-toggle input { cursor: pointer; }

/* ═══ P2.2 — Fiche produit en master-detail (2 colonnes) ═══ */
#articleModal .art-body:has(.art-md) { padding: 0; }
#articleModal .art-md { display: flex; flex: 1 1 auto; min-height: 0; }
#articleModal .art-md-left { flex: 0 0 46%; max-width: 46%; min-width: 0; overflow-y: auto; border-right: 1px solid var(--line, #e5e7eb); padding: 20px 24px; background: #f8fafc; }
#articleModal .art-md-right { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 20px 24px; background: #fff; }
@media (max-width: 900px){
  #articleModal .art-md { flex-direction: column; }
  #articleModal .art-md-left { flex: 0 0 auto; max-width: 100%; border-right: 0; border-bottom: 1px solid #e5e7eb; }
}

/* ligne fournisseur sélectionnée */
.art-ds .article-supplier-row { cursor: pointer; border-radius: 6px; }
.art-ds .article-supplier-row:hover { background: #f0fdfa; }
.art-ds .article-supplier-row.art-sup-selected { background: #e6f5f3; box-shadow: inset 3px 0 0 #0d9488; }

/* panneau vide */
.art-ds .art-md-empty { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #94a3b8; text-align: center; font-size: 0.9rem; }
.art-ds .art-md-empty-ic { font-size: 1.8rem; color: #cbd5e1; }

/* bloc détail */
.art-ds .art-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.art-ds .art-detail-sup { font-size: 1.02rem; font-weight: 700; color: #2D3E50; }
.art-ds .art-detail-full { font-size: 0.78rem; font-weight: 600; padding: 6px 12px; white-space: nowrap; }
.art-ds .art-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; color: #64748b; font-style: italic; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eef2f6; }
.art-ds .art-detail-ao { font-style: normal; }
.art-ds .art-detail-fields { display: flex; flex-wrap: wrap; gap: 18px; }
.art-ds .art-detail-fields .f { min-width: 0; }
.art-ds .art-detail-fields .f.fgrow { flex: 1 1 160px; }
.art-ds .art-detail-fields .lbl, .art-ds .art-detail-fa .lbl, .art-ds .art-detail-priceline .lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 700; margin-bottom: 3px; display: block; }
.art-ds .art-detail-fields .v, .art-ds .art-detail-priceline .v { font-size: 0.9rem; color: #1f2937; }
.art-ds .art-detail-priceline { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 14px; padding: 12px 16px; background: #f0fdfa; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); }
.art-ds .art-detail-priceline .v.strong { color: #0f766e; font-weight: 800; }
.art-ds .art-detail-priceline .art-detail-date { margin-left: auto; text-align: right; }
.art-ds .art-detail-fa { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.art-ds .art-detail-fa .lbl { margin: 0; }
.art-ds .art-detail-sub { font-size: 0.82rem; font-weight: 700; color: #2D3E50; margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.art-ds .art-detail-docs { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; color: #1f2937; }
.art-ds .art-detail-doc i { color: #0d9488; }
.art-ds .art-detail-notarif { color: #94a3b8; font-size: 0.88rem; padding: 20px 0; }

/* ═══ P2.2 refine — allègement gauche + polissage champs ═══ */
/* Gauche = l'essentiel (plus étroit), droite = le détail (plus large) */
#articleModal .art-md-left { flex: 0 0 40%; max-width: 40%; }
@media (max-width: 900px){ #articleModal .art-md-left { flex: 0 0 auto; max-width: 100%; } }

/* Tableau fournisseurs allégé (dates retirées) : Fournisseur · Réf · Stock · actions */
#articleModal .art-sc-actions { flex: 0 0 auto; gap: 10px; }
#articleModal .art-sc-supname { font-weight: 600; color: #1f2937; font-size: 0.86rem; padding: 6px 0; overflow: hidden; text-overflow: ellipsis; }
#articleModal .art-sup-go { color: #cbd5e1; font-size: 0.72rem; transition: color .12s; }
#articleModal .article-supplier-row:hover .art-sup-go, #articleModal .article-supplier-row.art-sup-selected .art-sup-go { color: #0d9488; }
#articleModal .art-sup-headrow .art-sc { font-size: 0.64rem; text-transform: uppercase; letter-spacing: .02em; color: #64748b; }

/* Désignation (gauche étroite) : champs en grille 2 colonnes propres */
#articleModal .art-md-left .art-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
#articleModal .art-md-left .art-field, #articleModal .art-md-left .art-field-name, #articleModal .art-md-left .art-field-ref, #articleModal .art-md-left .art-field-unit { flex: none; min-width: 0; }
#articleModal .art-md-left .art-field-name { grid-column: 1 / -1; }

/* Détail (droite) : champs en grille alignée, tailles/police homogènes */
.art-ds .art-detail-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 20px; }
.art-ds .art-detail-fields .f, .art-ds .art-detail-fields .f.fgrow { flex: none; }
.art-ds .art-detail-fields .f.fgrow { grid-column: span 2; }
.art-ds .art-detail-desc { font-size: 0.88rem; color: #334155; line-height: 1.5; }
.art-ds .art-detail-priceline { gap: 20px 26px; }

/* le sélecteur fournisseur (nouvelle ligne) reste lisible en colonne étroite */
#articleModal .art-sc-name .bootstrap-select { width: 100% !important; }

/* ═══ P2.2 — « i » stock + historique cliquable ═══ */
.art-ds .art-info-tt { color: #94a3b8; cursor: help; font-size: 0.85rem; margin-left: 6px; }
.art-ds .art-info-tt:hover { color: #0d9488; }
.art-ds .art-hist-row { cursor: pointer; }
.art-ds .art-hist-row:hover td { background: #f0fdfa; }
.art-ds .art-hist-row.art-hist-active td { background: #e6f5f3; color: #0f766e; font-weight: 600; }
.art-ds .art-hist-row.art-hist-active td:first-child { box-shadow: inset 3px 0 0 #0d9488; }


/* ═══ P2.3 (3) — Création tarif prix-unique DANS le panneau droit (master-detail) ═══ */
/* En-tête du détail : les 2 actions (créer / ouvrir fiche) alignées à droite */
.art-ds .art-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.art-ds .art-detail-newtarif { font-size: 0.78rem; font-weight: 600; padding: 6px 12px; white-space: nowrap; }
.art-ds .art-detail-newtarif i { margin-right: 4px; }

/* Formulaire de création injecté dans le panneau (remplace le détail lecture-seule) */
#articleModal .art-md-createzone { min-width: 0; }
.aspp-ds.aspp-in-panel { display: block; height: auto; background: transparent; }
.aspp-in-panel .art-md-create-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eef2f6; }
.aspp-in-panel .art-md-create-head .art-eyebrow { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .05em; color: #0d9488; font-weight: 700; margin-bottom: 2px; }
.aspp-in-panel .art-md-create-head .art-detail-sup { font-size: 1.02rem; font-weight: 700; color: #2D3E50; }
.aspp-in-panel .art-md-create-scroll { min-width: 0; }
.aspp-in-panel .rfx-card { margin: 0; }
.aspp-in-panel .art-md-create-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 12px 0 2px; border-top: 1px solid #e2e8f0; position: sticky; bottom: 0; background: #fff; }
.aspp-in-panel .art-md-create-footer .ds-btn-ghost, .aspp-in-panel .art-md-create-footer .ds-btn-primary { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 18px; font-size: 0.85rem; font-weight: 500; border-radius: var(--r-md, 6px); }


/* ═══ P2.3 (3) — Mise en forme du formulaire de création DANS le panneau (exploiter la largeur) ═══ */

/* Les selects (Devise, Unité…) remplissent leur colonne */
.aspp-in-panel .bootstrap-select { width: 100% !important; }
.aspp-in-panel .rfx-card-body { padding-top: 4px; }

/* (1) Rangées de champs du haut (Devise/Date/Accord-cadre ; Réf/Désignation/Unité/Conditionnement) :
   on neutralise la rigidité Bootstrap (col-2/col-3…) pour distribuer sur toute la largeur du panneau. */
.aspp-in-panel .bom-iteration-price-row > .col-12 > .row.no-gutters { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.aspp-in-panel .bom-iteration-price-row > .col-12 > .row.no-gutters > [class*="col-"] { flex: 1 1 130px; max-width: none; width: auto; min-width: 0; padding-left: 0; padding-right: 0; }
.aspp-in-panel .bom-iteration-price-row > .col-12 > .row.no-gutters > .col-4 { flex-grow: 2.2; }
.aspp-in-panel .bom-iteration-price-row > .col-12 > .row.no-gutters > .col-3 { flex-grow: 1.4; }
.aspp-in-panel .bom-iteration-price-row h5 { font-size: 0.82rem; margin-bottom: 4px; }

/* (2) Prix unique : le tableau prend toute la largeur (au lieu de col-8) + petit bouton « Annuler » à la place de la poubelle */
.aspp-in-panel #proposal-price-unique .col-8 { flex: 0 0 100%; max-width: 100%; }
.aspp-in-panel #proposal-price-unique .table { width: 100%; margin-bottom: 0; }
.aspp-in-panel #proposal-price-unique .mt-3.p-3.border { flex-wrap: wrap; }
.aspp-in-panel .aspp-pp-cancel { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 0 12px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: #64748b; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); white-space: nowrap; text-decoration: none; }
.aspp-in-panel .aspp-pp-cancel:hover { background: #f1f5f9; color: #dc3545; border-color: #fecaca; }

/* (6) Paliers : distribuer les colonnes sur toute la largeur, police compacte, colonne index/poubelle fine */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.aspp-in-panel #proposal-price-quantitative [class*="col-"] { flex: 1 1 0; max-width: none; width: auto; min-width: 0; padding: 0 3px; font-size: 0.8rem; }
.aspp-in-panel #proposal-price-quantitative .row.no-gutters > .col-1:first-child { flex: 0 0 auto; min-width: 40px; }
.aspp-in-panel #proposal-price-quantitative .font-weight-bold { line-height: 1.15; }

/* (3) Tarifications complémentaires : idem, distribuer en pleine largeur */
.aspp-in-panel #proposal-price-additional-container .row.no-gutters { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.aspp-in-panel #proposal-price-additional-container .row.pt-3.no-gutters { display: flex; flex-wrap: nowrap; gap: 4px; }
.aspp-in-panel #proposal-price-additional-container [class*="col-"] { flex: 1 1 0; max-width: none; width: auto; min-width: 0; padding: 0 3px; font-size: 0.8rem; }
.aspp-in-panel #proposal-price-additional-container .col-5 { flex: 2.4 1 0; }
.aspp-in-panel #proposal-price-additional-container .col-6 { flex: 2 1 0; }

/* (5) Barre d'actions flottante (teal) — nettement distincte de la toolbar blanche de la modale en dessous */
.aspp-in-panel .art-md-create-body { padding-bottom: 78px; }
.aspp-in-panel .art-md-create-footer {
    position: sticky; bottom: 8px; z-index: 5;
    margin: 16px -6px 4px; padding: 11px 16px;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    background: #0f766e; border: 0; border-radius: var(--r-lg, 10px);
    box-shadow: 0 8px 24px rgba(15,118,110,.30);
}
.aspp-in-panel .art-md-create-footer .ds-btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.aspp-in-panel .art-md-create-footer .ds-btn-ghost:hover { background: rgba(255,255,255,.26); color: #fff; }
.aspp-in-panel .art-md-create-footer .ds-btn-primary { background: #fff; color: #0f766e; border: 0; }
.aspp-in-panel .art-md-create-footer .ds-btn-primary:hover { background: #ecfdf5; color: #0f766e; }

/* (4) Colonne CATALOGUE (gauche, étroite ~40%) : la ligne d'ajout de document doit wrapper
   (upload puis Nom/Type en dessous), sinon le contenu déborde du cadre. */
#articleModal .art-md-left .rfx-ipdoc-new-row { flex-wrap: wrap; }
#articleModal .art-md-left .rfx-ipdoc-new-upload { min-width: 0; max-width: 100%; }
#articleModal .art-md-left .rfx-ipdoc-new-details { flex: 1 1 100%; flex-wrap: wrap; margin-top: 10px; }
#articleModal .art-md-left .rfx-ipdoc-new-field { flex: 1 1 150px; }
#articleModal .art-md-left .rfx-ipdoc-loaded { max-width: 100%; }


/* ═══ P2.3 (3) — Ajustements retours Olivier (accord-cadre header, toolbar compacte, largeur paliers) ═══ */

/* (1) Accord-cadre déplacé dans le header de la carte Fiche tarifaire */
.aspp-in-panel .rfx-card-header.art-pp-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aspp-in-panel .art-pp-cardhead-title { display: flex; align-items: center; }
.aspp-in-panel .art-pp-fa { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.aspp-in-panel .art-pp-fa-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 700; }

/* (3) Barre d'actions flottante : plus petite, fond gris, ne couvre que les boutons (collée à droite) */
.aspp-in-panel .art-md-create-body { padding-bottom: 58px; }
.aspp-in-panel .art-md-create-footer {
    width: fit-content; margin: 14px 0 2px auto; padding: 7px 10px;
    gap: 8px; background: #eef2f6; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px);
    box-shadow: 0 4px 14px rgba(15,23,42,.12);
}
.aspp-in-panel .art-md-create-footer .ds-btn-ghost,
.aspp-in-panel .art-md-create-footer .ds-btn-primary { min-height: 30px; padding: 5px 13px; font-size: 0.8rem; }
.aspp-in-panel .art-md-create-footer .ds-btn-ghost { background: #fff; color: #475569; border: 1px solid #cbd5e1; }
.aspp-in-panel .art-md-create-footer .ds-btn-ghost:hover { background: #f1f5f9; color: #334155; }
.aspp-in-panel .art-md-create-footer .ds-btn-primary { background: #0f766e; color: #fff; border: 0; }
.aspp-in-panel .art-md-create-footer .ds-btn-primary:hover { background: #0b5f58; color: #fff; }

/* (5) Paliers : réduire les colonnes vides (grand trou à droite) pour exploiter la largeur */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters > .col-1:nth-child(7) { flex: 0 0 6px; min-width: 0; padding: 0; }
.aspp-in-panel #proposal-price-quantitative .row.no-gutters.pt-3.pb-2 > .col-1:nth-child(9) { flex: 0 0 6px; min-width: 0; padding: 0; }

/* (4)(5) Inputs des tableaux (paliers + complémentaires) resserrés « DS » dans le panneau */
.aspp-in-panel #proposal-price-quantitative .form-control,
.aspp-in-panel #proposal-price-additional-container .form-control { height: 32px; font-size: 0.82rem; border-radius: var(--r-md, 6px); }

/* (4)(5) « Ajouter une ligne » : mini bouton DS, aligné à gauche (au lieu du gros btn vert Bootstrap) */
.aspp-in-panel .add_element_link.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; color: #0f766e; background: #f0fdfa; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); }
.aspp-in-panel .add_element_link.btn:hover { background: #e6f5f3; color: #0b5f58; }
.aspp-in-panel #proposal-price-additional-container .form-group.row,
.aspp-in-panel #proposal-price-quantitative .form-group.row,
.aspp-in-panel #proposal-price-quantitative-add-btn-container .form-group.row { margin-left: 0; margin-right: 0; }
.aspp-in-panel #proposal-price-additional-container .form-group.row > .col-sm-12,
.aspp-in-panel #proposal-price-quantitative .form-group.row > .col-sm-12,
.aspp-in-panel #proposal-price-quantitative-add-btn-container .form-group.row > .col-sm-12 { padding-left: 0; }


/* ═══ P2.3 (3) — Retours Olivier v2 (header, largeurs champs, encadré prix unique teal) ═══ */

/* (1) Icône & titre de la carte espacés (n'étaient plus collés au titre) */
.aspp-in-panel .art-pp-cardhead-title { display: flex; align-items: center; gap: 9px; }
.aspp-in-panel .art-pp-cardhead-title .rfx-card-icon { margin: 0; }

/* (4) Plus d'air sous le trait du header de la carte */
.aspp-in-panel .rfx-card-body { padding-top: 20px; }

/* (2)(3) Largeurs intelligentes : Désignation large, Référence réduite, ligne 2 tient sur une ligne */
.aspp-in-panel .bom-iteration-price-row > .col-12 > .row.no-gutters { gap: 14px 16px; }
.aspp-in-panel .aspp-f-name      { flex: 3 1 220px !important; }
.aspp-in-panel .aspp-f-ref       { flex: 1 1 120px !important; }
.aspp-in-panel .aspp-f-cur       { flex: 1 1 96px  !important; }
.aspp-in-panel .aspp-f-unit      { flex: 1 1 96px  !important; }
.aspp-in-panel .aspp-f-unitother { flex: 1 1 96px  !important; }
.aspp-in-panel .aspp-f-pack      { flex: 1.6 1 140px !important; }
.aspp-in-panel .aspp-f-end       { flex: 1.6 1 150px !important; }

/* (5a) Réduire le grand espace au-dessus de « Annuler » (prix unique) */
.aspp-in-panel #proposal-price-unique { padding-top: 0 !important; }
.aspp-in-panel #proposal-price-unique .row.no-gutters.pt-2 { padding-top: 0 !important; }
.aspp-in-panel #proposal-price-unique .mt-3.p-3.border { margin-top: 6px !important; }

/* (5b) Prix unique : encadré teal clair (comme le display), colonnes vides masquées, libellés compacts */
.aspp-in-panel #proposal-price-unique .mt-3.p-3.border { background: #f0fdfa; border-color: #cfe9e4 !important; border-radius: 8px; padding: 14px 16px !important; }
.aspp-in-panel #proposal-price-unique .table { margin-bottom: 0; }
.aspp-in-panel #proposal-price-unique .table thead th:nth-child(2),
.aspp-in-panel #proposal-price-unique .table thead th:nth-child(4),
.aspp-in-panel #proposal-price-unique .table thead th:nth-child(6),
.aspp-in-panel #proposal-price-unique .table tbody td:nth-child(2),
.aspp-in-panel #proposal-price-unique .table tbody td:nth-child(4),
.aspp-in-panel #proposal-price-unique .table tbody td:nth-child(6) { display: none; }
.aspp-in-panel #proposal-price-unique .table th,
.aspp-in-panel #proposal-price-unique .table td { width: auto !important; padding: 3px 8px !important; border: 0 !important; vertical-align: bottom; }
.aspp-in-panel #proposal-price-unique .table th h5 { font-size: 0.64rem; line-height: 1.2; margin-bottom: 5px; color: #64748b; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; white-space: normal; }
.aspp-in-panel #proposal-price-unique .form-control { height: 32px; font-size: 0.82rem; border-radius: var(--r-md, 6px); }
.aspp-in-panel #proposal-price-unique .aspp-pp-cancel { background: #fff; }


/* ═══ P2.3 (3) — Retours Olivier v3 (croix prix unique, largeurs L2, trait supprimé) ═══ */

/* (2) Prix unique : « Annuler » remplacé par une croix en haut à droite de l'encadré */
.aspp-in-panel #proposal-price-unique .mt-3.p-3.border { position: relative; padding-top: 30px !important; }
.aspp-in-panel .aspp-pp-cancel { position: absolute; top: 8px; right: 8px; margin: 0 !important; padding: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #e2e8f0; color: #94a3b8; z-index: 3; }
.aspp-in-panel .aspp-pp-cancel:hover { background: #fef2f2; color: #dc3545; border-color: #fecaca; }
.aspp-in-panel .aspp-pp-cancel i { margin: 0; }

/* (3) Ligne 2 : largeurs réduites pour tenir sur une seule ligne (Devise/Unité/Conditionnement/Date) */
.aspp-in-panel .bom-iteration-price-row > .col-12 > .row.no-gutters { gap: 12px; }
.aspp-in-panel .aspp-f-cur       { flex: 1 1 80px  !important; }
.aspp-in-panel .aspp-f-unit      { flex: 1 1 80px  !important; }
.aspp-in-panel .aspp-f-unitother { flex: 1 1 80px  !important; }
.aspp-in-panel .aspp-f-pack      { flex: 1.4 1 110px !important; }
.aspp-in-panel .aspp-f-end       { flex: 1.4 1 120px !important; }

/* (3) Supprimer le trait entre L1 et L2 + rapprocher les deux lignes */
.aspp-in-panel .bom-iteration-price-row.border-bottom.border-info { border-bottom: 0 !important; padding-bottom: 4px !important; }
.aspp-in-panel .bom-iteration-price-row.pt-3 { padding-top: 8px !important; }


/* ═══ P2.3 (3) — Retours Olivier v4 (colonne unité-autre fantôme + débordement L2) ═══ */
/* La colonne « unité autre » ne doit occuper de l'espace que lorsqu'elle est visible
   (unité = « Autre »). Sinon elle laisse un trou entre Unité et Conditionnement et fait
   déborder Date de fin de validité à droite. :has réagit au toggle .d-none posé en JS. */
.aspp-in-panel .aspp-f-unitother { display: none; }
.aspp-in-panel .aspp-f-unitother:has(.unit-other-container:not(.d-none)) { display: block; flex: 1 1 90px !important; }
/* Date : occupe toute sa colonne (l'inline style width:inherit du widget peut déborder) */
.aspp-in-panel .aspp-f-end .datetime-picker { width: 100% !important; }

/* ═══ P2.3 (3) — Retours Olivier v5 (largeur Date réduite) ═══ */
.aspp-in-panel .aspp-f-end  { flex: 0 1 120px !important; }
.aspp-in-panel .aspp-f-pack { flex: 2.2 1 130px !important; }
/* ═══ P2.3 (3) — Retours Olivier v6 (« i » accord-cadre plus petit) ═══ */
.aspp-in-panel .art-pp-fa .aspp-help { font-size: 0.72rem; vertical-align: middle; }
/* ═══ P2.3 (3) — Tarifs complémentaires en cartes DS 2 lignes + paliers (croix) ═══ */

/* Tarifs complémentaires : une carte par rangée, 2 lignes, libellés inline DS */
.aspp-addrow { position: relative; border: 1px solid #e5e7eb; border-radius: var(--r-md, 6px); padding: 12px 34px 12px 12px; margin-bottom: 10px; background: #fff; }
.aspp-addrow-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 12px; }
.aspp-addrow-f { min-width: 0; display: flex; flex-direction: column; }
.aspp-addrow-f > label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .02em; color: #64748b; font-weight: 700; margin-bottom: 3px; }
.aspp-addrow-type { grid-column: span 1; }
.aspp-addrow-ref { grid-column: span 1; }
.aspp-addrow-name { grid-column: span 3; }
.aspp-addrow-delay { grid-column: span 1; }
.aspp-addrow-amount { grid-column: span 2; }
.aspp-addrow-disc { grid-column: span 2; }
.aspp-addrow-discamount { grid-column: span 2; }
.aspp-addrow-f .form-control { height: 32px; font-size: 0.82rem; border-radius: var(--r-md, 6px); }
.aspp-addrow-f .bootstrap-select { width: 100% !important; }
.aspp-addrow-del { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #94a3b8; border: 1px solid transparent; text-decoration: none; }
.aspp-addrow-del:hover { background: #fef2f2; color: #dc3545; border-color: #fecaca; }

/* « Ajouter une ligne » : mini bouton DS aussi en plein-modal acheteur (.aspp-ds) */
.aspp-ds .add_element_link.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; color: #0f766e; background: #f0fdfa; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); }
.aspp-ds .add_element_link.btn:hover { background: #e6f5f3; color: #0b5f58; }

/* Paliers : poubelles -> croix (acheteur only via .aspp-ds ; RFx = blocs _rfp_* non cibles) */
.aspp-ds #proposal-price-quantitative-close-btn i::before,
.aspp-ds .proposal-price-quantitative-delete-btn i::before { content: "\f00d" !important; font-weight: 900 !important; }
/* Croix « fermer paliers » en haut a droite de l'encadre (idem prix unique) */
.aspp-in-panel #proposal-price-quantitative .mt-3.p-3.border { position: relative; padding-top: 30px !important; }
.aspp-in-panel #proposal-price-quantitative-close-btn { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #e2e8f0; z-index: 3; }
.aspp-in-panel #proposal-price-quantitative-close-btn:hover { background: #fef2f2; border-color: #fecaca; }
/* Paliers : encadre teal clair (idem prix unique) */
.aspp-in-panel #proposal-price-quantitative .mt-3.p-3.border { background: #f0fdfa; border-color: #cfe9e4 !important; border-radius: 8px; }
/* ═══ P2.3 (3) — Paliers v2 : grille alignée, libellés DS, croix grises, note ═══ */
/* Grille partagée en-tête + lignes → colonnes parfaitement alignees, pleine largeur */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters { display: grid !important; grid-template-columns: 44px repeat(6, minmax(0,1fr)) 28px; gap: 8px; align-items: center; }
.aspp-in-panel #proposal-price-quantitative .row.no-gutters > [class*="col-"] { max-width: none !important; width: auto !important; flex: none !important; padding: 0 !important; min-width: 0; }
/* colonne vide (spacer) retiree */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters > .col-1:nth-child(7) { display: none !important; }
/* en-tete : 1re etiquette calee en colonne 2 (la croix "fermer" etant sortie du flux) */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters.pt-3.pb-2 > .col-1:nth-child(2) { grid-column-start: 2; }
/* Libelles d'en-tete facon DS (uppercase gris petit, comme prix unique / complementaires) */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters.pt-3.pb-2 > .col-1 { font-size: 0.62rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; color: #64748b !important; line-height: 1.15; }
.aspp-in-panel #proposal-price-quantitative .proposal-price-quantitative-index { font-size: 0.7rem; color: #475569; font-weight: 600; }
.aspp-in-panel #proposal-price-quantitative .form-control { height: 32px; font-size: 0.82rem; border-radius: var(--r-md, 6px); }
.aspp-in-panel #proposal-price-quantitative .proposal-price-quantitative-row .pt-2.pl-3 { padding: 0 !important; }

/* Croix : grises (au lieu de bleu), rouge au survol */
.aspp-ds #proposal-price-quantitative-close-btn,
.aspp-ds .proposal-price-quantitative-delete-btn { color: #94a3b8 !important; }
.aspp-ds #proposal-price-quantitative-close-btn:hover,
.aspp-ds .proposal-price-quantitative-delete-btn:hover { color: #dc3545 !important; }

/* Croix "fermer" (gauche) repositionnee en haut a droite de l'encadre (idem prix unique) */
.aspp-in-panel #proposal-price-quantitative-close-btn { position: absolute !important; top: 6px !important; right: 8px !important; left: auto !important; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 50%; z-index: 3; }
.aspp-in-panel #proposal-price-quantitative-close-btn:hover { background: #fef2f2; border-color: #fecaca; }

/* Croix par ligne : uniquement a partir du 3e palier (les 2 premiers non supprimables individuellement) */
.aspp-in-panel #proposal-price-quantitative .proposal-price-quantitative-row:nth-child(-n+2) .proposal-price-quantitative-delete-btn { display: none; }

/* Petit texte gris italique sous le tableau (remplace le hint ampoule) */
.aspp-in-panel .aspp-pq-note { font-size: 0.72rem; font-style: italic; color: #94a3b8; margin-top: 8px; line-height: 1.4; }
/* ═══ P2.3 (3) — Paliers v3 : fix croix (col position), paddings, largeur Délai ═══ */
/* Cause racine croix a gauche : Bootstrap met position:relative sur .col-* → la croix se cale
   sur sa cellule. On neutralise pour que l'absolute vise l'encadre. */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters > [class*="col-"] { position: static !important; }

/* (1) Card body : retirer le padding droit (mieux exploiter la largeur) */
.aspp-in-panel .rfx-card-body { padding-right: 6px; }

/* (2) Encadre palier : retirer padding haut/bas superflu */
.aspp-in-panel #proposal-price-quantitative .mt-3.p-3.border { padding-top: 10px !important; padding-bottom: 10px !important; }

/* (4) Elargir la colonne Delai (place dispo a droite) */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters { grid-template-columns: 40px repeat(5, minmax(0,1fr)) minmax(0,1.4fr) 26px; }
/* ═══ P2.3 (3) — Paliers v4 + prix unique (retours Olivier) ═══ */
/* "Palier 2" sur une seule ligne : colonne index plus large */
.aspp-in-panel #proposal-price-quantitative .proposal-price-quantitative-index { white-space: nowrap; }
/* Espace avant Delai (spacer 10px reactive) + Delai moins large (1fr) */
.aspp-in-panel #proposal-price-quantitative .row.no-gutters > .col-1:nth-child(7) { display: block !important; }
.aspp-in-panel #proposal-price-quantitative .row.no-gutters { grid-template-columns: 62px repeat(5, minmax(0,1fr)) 10px minmax(0,1fr) 26px; }

/* Prix unique : police des champs alignee sur les paliers + colonne Remise un peu plus large */
.aspp-in-panel #proposal-price-unique .form-control { font-size: 0.82rem !important; height: 32px; }
.aspp-in-panel #proposal-price-unique .table th:nth-child(3) { width: 16% !important; }
/* ═══ P2.3 (3) — Aligner EXACTEMENT prix unique sur paliers (police) ═══ */
/* Libelles d'en-tete identiques (0.62rem) */
.aspp-in-panel #proposal-price-unique .table th h5 { font-size: 0.62rem !important; }
/* Champs identiques (police + hauteur), en ciblant l'input directement */
.aspp-in-panel #proposal-price-unique input,
.aspp-in-panel #proposal-price-quantitative input { font-size: 0.82rem !important; height: 32px !important; line-height: 1.4 !important; }
/* ═══ P2.3 (3) — « i » Quantité min (prix unique) plus petit ═══ */
.aspp-in-panel #proposal-price-unique .aspp-help { font-size: 0.6rem; vertical-align: middle; }
/* ═══ P2.3 (3) — Display : accord-cadre dans la ligne meta (a droite) ═══ */
.art-ds .art-detail-fa-inline { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.art-ds .art-detail-fa-inline .lbl { display: inline; font-size: 0.66rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 700; margin: 0; }
/* ═══ P2.3 (3) — Display : priceline pleine largeur + date stock gauche ═══ */
.art-ds .art-detail-priceline { justify-content: space-between; }
.art-ds .art-stock-updated { font-size: 0.72rem; font-style: italic; color: #94a3b8; margin-top: 10px; }
/* ═══ P2.3 (3) — Libellé colonne Stock cliquable (scroll vers card Stock) ═══ */
.art-ds .art-sc-stocklink { color: inherit; text-decoration: none; cursor: pointer; border-bottom: 1px dashed #cbd5e1; }
.art-ds .art-sc-stocklink:hover { color: #0d9488; border-bottom-color: #0d9488; }
/* ═══ P2.3 (2) — Suppression tarif dans le panneau ═══ */
.art-ds .art-detail-delrow { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.art-ds .art-detail-delete { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #94a3b8; text-decoration: none; }
.art-ds .art-detail-delete:hover { color: #dc3545; }
/* ═══ P2.3 (2) — Poubelle en bout de ligne d'historique ═══ */
.art-ds .art-sup-histtable .art-hist-actions { text-align: right; width: 26px; padding-left: 4px; }
.art-ds .art-hist-delete { color: #cbd5e1; text-decoration: none; }
.art-ds .art-hist-row:hover .art-hist-delete { color: #94a3b8; }
.art-ds .art-hist-delete:hover { color: #dc3545 !important; }
/* ═══ P2.3 — Lien AO source dans le detail ═══ */
.art-ds .art-detail-aolink { color: #0d9488; text-decoration: none; font-size: 0.8rem; margin-left: 2px; }
.art-ds .art-detail-aolink:hover { color: #0f766e; }
/* ═══ P2.3 — Display detail-fields : L1 Réf+Désignation, L2 Unité en tête + plus d'espace ═══ */
.art-ds .art-detail-fields { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px 20px; }
.art-ds .art-detail-fields .f.fgrow { grid-column: span 3; }
/* ═══ P2.3 — Display paliers : encadre teal clair (idem prix unique) ═══ */
.art-ds .art-detail-paliers { background: #f0fdfa; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); padding: 10px 14px; }
.art-ds .art-detail-paliers .art-sup-histtable { margin: 0; }
/* Toggle accord-cadre dans la ligne meta */
.art-ds .art-detail-fa-toggle { display: inline-flex; align-items: center; gap: 8px; }
/* ═══ P2.3 — Fixes display : toggle accord-cadre (.art-ds), paliers teal interieur, valeurs centrees ═══ */
/* (1) Switch DS dans le display (.art-ds) — cible .aspp-switch input (pas un id precis) */
.art-ds .aspp-switch { position: relative; display: inline-block; width: 42px; height: 22px; vertical-align: middle; flex: 0 0 auto; }
.art-ds .aspp-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; -webkit-appearance: none; appearance: none; }
.art-ds .aspp-switch-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 11px; pointer-events: none; transition: background .15s; }
.art-ds .aspp-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.art-ds .aspp-switch:has(input:checked) .aspp-switch-track { background: #0d9488; }
.art-ds .aspp-switch:has(input:checked) .aspp-switch-track::after { left: 22px; }

/* (3) Paliers display : rendre le tableau transparent pour laisser voir le fond teal du conteneur */
.art-ds .art-detail-paliers .art-sup-histtable { background: transparent; border: 0; }
.art-ds .art-detail-paliers .art-sup-histtable thead th, .art-ds .art-detail-paliers .art-sup-histtable tbody td { background: transparent; }

/* (2) Valeurs centrees sur Quantite min + Delai */
.art-ds .art-detail-fields .f.art-f-center { text-align: center; }
/* ═══ P2.3 — « par palier » en italique dans la colonne Prix net de l'historique ═══ */
.art-ds .art-hist-tier { font-style: italic; font-size: 0.72rem; color: #94a3b8; }
/* ═══ P2.3 — Filtre « Valides uniquement » sur l'historique ═══ */
.art-ds .art-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.art-ds .art-hist-validfilter { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #64748b; cursor: pointer; }
.art-ds .art-hist-validfilter input { cursor: pointer; }
/* ═══ P2.3 — case « Valides uniquement » en teal (au lieu de bleu) ═══ */
.art-ds .js-hist-valid-only { accent-color: #0d9488; }
/* P2.3 - Fiche fournisseur (panneau) : etat invalide du picker fournisseur (champ requis non selectionne). */
.aspp-ds .aspp-supplier-picker.aspp-invalid .bootstrap-select > .btn.dropdown-toggle { border-color: #dc3545 !important; box-shadow: 0 0 0 1px #dc3545 inset !important; }
.aspp-ds .aspp-supplier-picker .fa-exclamation-circle { font-size: 0.95rem; vertical-align: middle; margin-left: 6px; }

/* P2.3 - Bouton 'Ajouter une reference fournisseur' : action d'accent -> variante contour teal (au lieu du ghost gris neutre). */
.art-ds .art-add-btn { border-color: #0d9488; color: #0f766e; font-weight: 500; }
.art-ds .art-add-btn:hover, .art-ds .art-add-btn:focus { background: #f0fafa; color: #0f766e; border-color: #0d9488; }
.art-ds .art-add-btn i { color: #0d9488; }

/* P2.3 - Bouton secondaire (Enregistrer/Creer) : le navy denote (couleur quasi jamais utilisee en bouton) -> variante contour teal, coherente avec le primaire teal. */
.ds-btn-secondary { border-color: #0d9488; color: #0f766e; }
.ds-btn-secondary:hover, .ds-btn-secondary:focus { background: #f0fafa; color: #0f766e; }
.ds-btn-secondary i { color: #0d9488; }

/* 3b - Recherche live Tarifs (Entreprises > Contrats & Tarifs) : champ pleine largeur dans sa colonne. */
.spl-tarifs-filter .spl-tarifs-search-field { width: 100%; }
.spl-tarifs-filter .spl-tarifs-search-field .cat-input { width: 100%; }

/* 3b - champ recherche live Catalogue : largeur suffisante pour afficher tout le placeholder. */
.cat-subbar .js-cat-search { width: 360px; max-width: 100%; }

/* ===== 3c - Catalogue : selection en masse + archive ===== */
/* Colonne case a cocher (rebalance des largeurs pour sommer a 100%) */
.cat-row .cat-col-check  { flex: 0 0 4%; display: flex; align-items: center; justify-content: center; padding-right: 0; }
.cat-row .cat-col-ref    { flex: 0 0 15%; }
.cat-row .cat-col-name   { flex: 0 0 26%; }
.cat-row .cat-col-cat    { flex: 0 0 25%; }
.cat-row .cat-col-subcat { flex: 0 0 22%; }
.cat-row .cat-col-doc    { flex: 0 0 8%; }
.cat-col-check input[type="checkbox"] { cursor: pointer; accent-color: #0d9488; width: 15px; height: 15px; }

/* Lignes archivees + badge */
.cat-row-archived { opacity: 0.6; }
/* Lignes plus compactes (retour préprod 2026-09-18) : 52 px (DS) → 40 px pour la liste Produits/Services ; l'en-tête reste à 42. */
.ds-row.cat-row.article-item { min-height: 40px; }
.cat-archived-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-full, 999px); background: #eef2f6; color: #64748b; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }

/* Toggle Afficher les archives */
.cat-archived-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; font-size: 0.78rem; color: #64748b; cursor: pointer; white-space: nowrap; }
.cat-archived-toggle input { accent-color: #0d9488; cursor: pointer; }

/* Barre d'action groupee */
.cat-bulk { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 10px 16px; background: #2D3E50; border-radius: var(--r-md, 6px); box-shadow: 0 6px 20px rgba(15,23,42,.18); }
.cat-bulk-left { display: flex; align-items: center; gap: 14px; }
.cat-bulk-count { color: #fff; font-size: 0.85rem; }
.cat-bulk-count strong { font-size: 0.95rem; }
.cat-bulk-clear { color: #b9c6d6; font-size: 0.78rem; text-decoration: underline; }
.cat-bulk-clear:hover { color: #fff; text-decoration: underline; }
.cat-bulk-actions { display: flex; align-items: center; gap: 8px; }
.cat-bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-md, 6px); background: rgba(255,255,255,.10); color: #fff; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s; }
.cat-bulk-btn:hover { background: rgba(255,255,255,.20); color: #fff; }
.cat-bulk-btn-primary { background: #0d9488; border-color: #0d9488; }
.cat-bulk-btn-primary:hover { background: #0b7d72; }
.cat-bulk-btn-danger:hover { background: #b23b3b; border-color: #d05a5a; }

/* Popover d'affectation */
.cat-bulk-affect { position: relative; }
.cat-bulk-pop { position: absolute; bottom: calc(100% + 8px); right: 0; width: 260px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 14px; }
.cat-bulk-pop-field { margin-bottom: 10px; }
.cat-bulk-pop-field label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #64748b; margin-bottom: 4px; }
.cat-bulk-select { width: 100%; height: 34px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding: 4px 8px; font-size: 0.82rem; color: #2D3E50; background: #fff; }
.cat-bulk-pop-footer { text-align: right; margin-top: 4px; }
.cat-bulk-pop-footer .cat-bulk-btn-primary { color: #fff; }

/* 3c point 1 - Barre d'action en teal clair (comme les grilles de prix), plus de navy. */
.cat-bulk { background: #e6f7f4; border: 1px solid #b6e6e0; box-shadow: 0 4px 14px rgba(15,118,110,.10); }
.cat-bulk-count { color: #0b7d72; }
.cat-bulk-count strong { color: #0f766e; }
.cat-bulk-clear { color: #0b7d72; }
.cat-bulk-clear:hover { color: #0f766e; }
.cat-bulk-btn { background: #fff; border: 1px solid #cfe9e4; color: #0f766e; }
.cat-bulk-btn:hover { background: #f0fafa; color: #0f766e; border-color: #0d9488; }
.cat-bulk-btn-primary { background: #0d9488; border-color: #0d9488; color: #fff; }
.cat-bulk-btn-primary:hover { background: #0b7d72; color: #fff; }
.cat-bulk-btn-danger { color: #c0392b; border-color: #f0c9c4; }
.cat-bulk-btn-danger:hover { background: #fdecea; border-color: #e5a79f; color: #a5281a; }

/* ===== 3e - Hub Catalogue : switch de vue + vue Fiches tarifaires ===== */
.cat-viewswitch { margin-left: auto; display: inline-flex; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); overflow: hidden; }
.cat-viewswitch-btn { padding: 6px 14px; font-size: 0.8rem; font-weight: 500; color: #0f766e; background: #fff; text-decoration: none; border-right: 1px solid #cfe9e4; white-space: nowrap; }
.cat-viewswitch-btn:last-child { border-right: 0; }
.cat-viewswitch-btn:hover { background: #f0fafa; color: #0f766e; text-decoration: none; }
.cat-viewswitch-btn.is-active { background: #0d9488; color: #fff; }

.ps-card { padding: 0; overflow: hidden; }
.ps-tablewrap { overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ps-table thead th { text-align: left; font-weight: 600; color: #94a3b8; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; padding: 12px 12px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; background: #fff; }
.ps-table thead th.text-right { text-align: right; }
.ps-table tbody td { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; color: #415873; } /* 15 → 9 px : lignes plus compactes (préprod 2026-09-18) */
.ps-row { cursor: pointer; }
.ps-row:hover td { background: #f0fdfa; }
.ps-strong { font-weight: 600; }
.ps-muted { color: #64748b; }
.ps-fam-sep { color: #94a3b8; }
.ps-yes { color: #0d9488; }
.ps-tier { font-style: italic; color: #64748b; }
.ps-badge { display: inline-block; padding: 1px 8px; border-radius: var(--r-full, 999px); font-size: 0.68rem; font-weight: 600; background: #eef2f6; color: #64748b; }
.ps-badge-ao { background: #fef3e2; color: #b45309; }
.ps-col-more { display: none; }
.ps-table.ps-show-more .ps-col-more { display: table-cell; }
.js-ps-more-toggle.is-on { background: #0d9488; color: #fff; border-color: #0d9488; }
.ps-pagination { display: flex; justify-content: center; padding: 14px 0 4px; }
.ps-pagination .pagination { margin: 0; }

/* 3e - actions barre (fleches scroll) + colonnes figees vue Fiches tarifaires */
.ps-subbar-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ps-scroll-btn { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid #cfe9e4; border-radius: var(--r-md, 6px); background: #fff; color: #0f766e; text-decoration: none; }
.ps-scroll-btn.is-visible { display: inline-flex; }
.ps-scroll-btn:hover { background: #f0fafa; color: #0f766e; text-decoration: none; }
.ps-table .ps-c1, .ps-table .ps-c2 { position: sticky; z-index: 2; background: #fff; overflow: hidden; text-overflow: ellipsis; }
.ps-table thead .ps-c1, .ps-table thead .ps-c2 { z-index: 3; background: #fff; }
.ps-table .ps-c1 { left: 0; width: 110px; min-width: 110px; max-width: 110px; }
.ps-table .ps-c2 { left: 110px; width: 230px; min-width: 230px; max-width: 230px; box-shadow: 6px 0 6px -6px rgba(15,23,42,.12); }
.ps-row:hover .ps-c1, .ps-row:hover .ps-c2 { background: #f0fdfa; }

/* 3e retours : recherche plus large, bouton 'colonnes' discret, Designation interne elargie */
.cat-subbar .js-ps-search { width: 360px; max-width: 100%; }
.ps-morebtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #b6e6e0; border-radius: var(--r-md, 6px); background: #e6f7f4; color: #0f766e; font-size: 0.8rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ps-morebtn:hover { background: #d9f2ee; color: #0f766e; text-decoration: none; }
.ps-morebtn.is-on { background: #0d9488; border-color: #0d9488; color: #fff; }
.ps-table .ps-c2 { width: 280px; min-width: 280px; max-width: 280px; }

/* 3e retour : bouton 'Moins de colonnes' actif en teal CLAIR (moins agressif). */
.ps-morebtn.is-on, .js-ps-more-toggle.is-on { background: #e6f7f4; border-color: #b6e6e0; color: #0f766e; }

/* 3e bulk - colonne case a cocher figee + decalage des colonnes figees */
.ps-table .ps-cchk { position: sticky; left: 0; z-index: 2; background: #fff; width: 36px; min-width: 36px; max-width: 36px; text-align: center; padding-left: 8px; padding-right: 8px; }
.ps-table thead .ps-cchk { z-index: 3; background: #fff; }
.ps-table .ps-c1 { left: 36px; }
.ps-table .ps-c2 { left: 146px; }
.ps-row:hover .ps-cchk { background: #f0fdfa; }
.ps-cchk input[type="checkbox"] { cursor: pointer; accent-color: #0d9488; width: 15px; height: 15px; }
.ps-bulk-pop { position: absolute; bottom: calc(100% + 8px); right: 0; width: 220px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 12px; }
.ps-bulk-pop label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #64748b; margin-bottom: 4px; }
.ps-bulk-pop input[type="date"] { width: 100%; height: 34px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding: 4px 8px; font-size: 0.82rem; color: #2D3E50; }
.ps-bulk-pop-footer { text-align: right; margin-top: 10px; }

/* Fiche display : Designation span 2 + Fin de validite a sa droite (retire du bloc prix). */
.art-ds .art-detail-fields .art-f-wide { grid-column: span 2; }

/* Fiche display prix unique : alignement des valeurs (prix a droite, delai centre). */
.art-detail-priceline .pl-right { text-align: right; }
.art-detail-priceline .pl-center { text-align: center; }

/* Catalogue — header titre / switcher / compteur : espacement genereux (retour UX 2026-08-17). */
.cat-page .ds-page-header-left { gap: 20px; }

/* Fiches tarifaires : hover de ligne aligne DS (.ds-row), y compris cellules figees. Retour UX 2026-08-17. */
.ps-table tbody tr:hover td { background: #fafbfc; }
.ps-table tbody tr:hover .ps-cchk, .ps-table tbody tr:hover .ps-c1, .ps-table tbody tr:hover .ps-c2 { background: #fafbfc; }

/* Volet Financier — carte livrables attendus + depot libre (chantier reponse financiere, 2026-08-18). */
.rfx-fin-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.rfx-fin-row { display: flex; align-items: center; gap: 12px; }
.rfx-fin-name { flex: 0 1 270px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #d7dee6; border-radius: var(--r-md, 6px); font-size: 0.85rem; color: #2D3E50; background: #fff; }
.rfx-fin-name:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.12); }
.rfx-fin-name:disabled { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.rfx-fin-del { flex: 0 0 auto; color: #94a3b8; font-size: 0.85rem; padding: 4px 6px; border-radius: var(--r-md, 6px); }
.rfx-fin-del:hover { color: #dc2626; background: #fef2f2; text-decoration: none; }
/* Modele du livrable (trombone) + modale modele. */
.rfx-fin-tplbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); background: #fff; color: #64748b; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; }
.rfx-fin-tplbtn:hover { border-color: #0d9488; color: #0d9488; background: #f0fafa; text-decoration: none; }
.rfx-fin-tplbtn i { font-size: 0.78rem; }
.rfx-fin-tplbtn-has { border-color: #0d9488; background: #e6f7f4; color: #0b7d72; }
.rfx-fin-tplbtn-has:hover { background: #d5f0ec; color: #0b7d72; }
.rfx-fin-tplbtn-check { color: #0d9488; }
/* Copie dossier : checkboxes natives visibles + cliquables (le .form-check-input BS4 est absolu -1.25rem → hors cellule/non cliquable). */
.rfx-ds .rfx-doc-copy-check .form-check, .rfx-ds .rfx-doc-copy-check .custom-control { padding: 0; margin: 0; min-height: 0; }
.rfx-ds .rfx-doc-copy-check .form-check-label, .rfx-ds .rfx-doc-copy-check .custom-control-label { display: none; }
.rfx-ds .rfx-doc-copy-check input[type=checkbox], .rfx-ds .rfx-doc-copy-selectall input[type=checkbox] { position: static; opacity: 1; -webkit-appearance: auto; appearance: auto; width: 16px; height: 16px; margin: 0; cursor: pointer; pointer-events: auto; }
.rfx-ds .rfx-doc-copy-selectall .form-check-input { position: static; margin: 0; }
/* Bouton Modele : largeur reservee (pas de decalage joint/non joint) + coche en pastille bien visible. */
.rfx-fin-tplbtn { min-width: 185px; justify-content: center; }
.rfx-fin-tplbtn .rfx-fin-tplbtn-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #0d9488; font-size: 0.5rem; line-height: 1; border: 1.5px solid #0d9488; }
.rfx-fin-tpl-replacebtn { margin-top: 6px; border-color: #0d9488; color: #0d9488; font-weight: 600; }
.rfx-fin-tpl-replacebtn:hover, .rfx-fin-tpl-replacebtn:focus { background: #f0fafa; border-color: #0b7d72; color: #0b7d72; }
.rfx-fin-tpl-addzone { margin-top: 16px; }
.rfx-fin-tpl-current { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-md, 6px); font-size: 0.85rem; color: #2D3E50; }
.rfx-fin-tpl-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-fin-tpl-dl, .rfx-fin-tpl-rm { flex: 0 0 auto; color: #64748b; padding: 2px 6px; }
.rfx-fin-tpl-dl:hover { color: #0d9488; text-decoration: none; }
.rfx-fin-tpl-rm:hover { color: #dc2626; text-decoration: none; }
.rfx-fin-tpl-sep { font-size: 0.78rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 8px; }
.rfx-fin-tpl-uploadlabel { font-size: 0.85rem; font-weight: 600; color: #2D3E50; margin-bottom: 8px; }
.rfx-fin-tpl-copybtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.85rem; color: #0d9488; font-weight: 600; }
.rfx-fin-tpl-copybtn:hover { color: #0b7d72; text-decoration: none; }
.rfx-fin-add { display: inline-flex; align-items: center; gap: 6px; color: #0f766e; font-size: 0.82rem; font-weight: 500; text-decoration: none; }
.rfx-fin-add:hover { color: #0d9488; text-decoration: none; }
.rfx-fin-add i { font-size: 0.72rem; }
.rfx-fin-empty { color: #94a3b8; font-size: 0.82rem; font-style: italic; padding: 4px 0; }
.rfx-fin-note { color: #64748b; font-size: 0.85rem; line-height: 1.45; margin-bottom: 14px; }
.rfx-fin-allowfree-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef2f6; }
.rfx-fin-allowfree { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.82rem; color: #415873; cursor: pointer; }
.rfx-fin-allowfree input { accent-color: #0d9488; width: 15px; height: 15px; cursor: pointer; }
/* Volet Financier — toggle Obligatoire + demi-largeur carte (retours 2026-08-18). */
.rfx-fin-req { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; font-size: 0.8rem; color: #415873; cursor: pointer; }
.rfx-fin-switch { position: relative; display: inline-block; width: 34px; height: 18px; flex: 0 0 auto; }
.rfx-fin-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rfx-fin-switch-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 9px; transition: background .15s; }
.rfx-fin-switch-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.rfx-fin-switch input:checked + .rfx-fin-switch-track { background: #0d9488; }
.rfx-fin-switch input:checked + .rfx-fin-switch-track::before { transform: translateX(16px); }
.rfx-fin-switch input:disabled + .rfx-fin-switch-track { opacity: .5; }
/* Volet Financier — champ description facultatif du livrable (retour 2026-08-18, carte pleine largeur). */
.rfx-fin-desc { flex: 2 1 220px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); font-size: 0.82rem; color: #415873; background: #fff; }
.rfx-fin-desc::placeholder { color: #c2ccd8; font-weight: 400; font-style: italic; }
.rfx-fin-desc:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.12); }
.rfx-fin-desc:disabled { background: #f8fafc; color: #64748b; border-color: #eef2f6; }
/* Volet Financier — sous-titres de section + ligne creation grille (etat vide reskin DS, 2026-08-18). */
.rfx-fin-subtitle { font-size: 0.9rem; font-weight: 600; color: #2D3E50; margin: 4px 0 8px; }
.rfx-fin-subtitle-mt { margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef2f6; }
.rfx-fin-gridcreate-row { display: flex; align-items: center; gap: 10px; max-width: 520px; margin-bottom: 4px; }
.rfx-fin-gridcreate-row .form-group { margin-bottom: 0; flex: 1 1 auto; }
/* Volet Financier — chapeaux de section (bandeaux teal clair, retour structure 2026-08-18). */
.rfx-fin-chapeau { display: flex; align-items: center; gap: 10px; background: #e6f7f4; border-radius: var(--r-lg, 10px); padding: 10px 16px; margin: 0 0 12px; }
.rfx-fin-chapeau-mt { margin-top: 26px; }
.rfx-fin-chapeau i { color: #0d9488; font-size: 0.9rem; }
.rfx-fin-chapeau-title { font-size: 0.95rem; font-weight: 600; color: #2D3E50; }

/* Financier — card « Grilles de prix » : en-tete .rfx-qtabs-header (partage Qualifications) transforme en vrai header de card, scope .rfx-bomlist-card. */
.rfx-ds .rfx-bomlist-card .rfx-card-body { padding-top: 0; }
.rfx-ds .rfx-bomlist-card .rfx-qtabs-header { position: relative; margin: 0 -20px 16px; padding: 0 20px; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid rgba(45,62,80,0.22); }
.rfx-ds .rfx-bomlist-card .rfx-qtabs-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }
.rfx-ds .rfx-bomlist-card .rfx-qtabs-header .rfx-qcreate { margin: 0; }
.rfx-ds .rfx-bomlist-card .rfx-qtabs-title { text-transform: none; letter-spacing: normal; color: #2D3E50; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.rfx-ds .rfx-bomlist-card .rfx-qtabs-title::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f0ce'; color: #0d9488; font-size: 1rem; }
/* Icone info (tooltip) a droite de la case « autoriser depot libre ». */
.rfx-ds .rfx-fin-info { color: #94a3b8; font-size: 0.85rem; cursor: help; margin-left: 2px; }
.rfx-ds .rfx-fin-info:hover { color: #0d9488; }


/* Récap réponse attendue (étape Diffusion) — chapitre OFF grisé (le toggle .rfx-toggle-ro sans .on est déjà gris). */
.rfx-ds .rfx-fmt-off .rfx-fmt-desc { color: #94a3b8; font-style: italic; }
.rfx-ds .rfx-recap-summary .rfx-fmt-desc { margin-top: 6px; }/* Récap : toggles des chapitres DÉRIVÉS = lecture seule → teal estompé (comme .rfx-fmt-locked), signale « non modifiable ».
   Le toggle Synthèse en édition est un .form-check-input (hors .rfx-access-ro) → garde le teal vif #0d9488. */
.rfx-ds .rfx-recap .rfx-access-ro .rfx-toggle-ro.on { background: #9fd4ce; }

/* ===== Portail Réponses (portail entreprise, rfp_proposal) — reskin DS ===== */
/* Liste de documents déposés par l'entreprise (partagée par les 5 sections). */
.rfx-ds .rfx-pdoc-list { margin: 12px 0 4px; }
.rfx-ds .rfx-pdoc-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #eef2f6; font-size: 0.9rem; }
.rfx-ds .rfx-pdoc-row:last-child { border-bottom: none; }
.rfx-ds .rfx-pdoc-icon { color: #64748b; flex-shrink: 0; }
.rfx-ds .rfx-pdoc-label { color: #2D3E50; font-weight: 500; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-pdoc-cat { color: #64748b; font-size: 0.82rem; flex: 0 0 auto; }
.rfx-ds .rfx-pdoc-size { color: #94a3b8; font-size: 0.82rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rfx-ds .rfx-pdoc-actions { display: inline-flex; gap: 12px; flex: 0 0 auto; }
.rfx-ds .rfx-pdoc-actions a { color: #64748b; }
.rfx-ds .rfx-pdoc-actions a:hover { color: #0d9488; }
/* Bloc de contenu rendu en lecture seule (synthèse, etc.). */
.rfx-ds .rfx-proposal-readonly { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding: 14px 16px; color: #2D3E50; background: #fff; margin: 8px 0; }/* Portail Réponses — ligne d'état autosave (Résumé). */
.rfx-ds .rfx-autosave-line { min-height: 18px; margin: 6px 0 2px; }/* Portail Réponses — lignes d'accord sur documents contractuels de l'acheteur (case = accepter en l'état). */
.rfx-ds .rfx-pagr-list { margin: 10px 0 4px; }
.rfx-ds .rfx-pagr-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #eef2f6; font-size: 0.9rem; }
.rfx-ds .rfx-pagr-row:last-child { border-bottom: none; }
.rfx-ds .rfx-pagr-check { flex: 0 0 20px; display: inline-flex; justify-content: center; }
.rfx-ds .rfx-pagr-cb { width: 18px; height: 18px; accent-color: #0d9488; cursor: pointer; margin: 0; }
.rfx-ds .rfx-pagr-agreed { color: #0d9488; font-size: 1.05rem; }
.rfx-ds .rfx-pagr-cb-empty { width: 17px; height: 17px; border: 1.5px solid #cbd5e1; border-radius: var(--r-lg, 10px); display: inline-block; }
.rfx-ds .rfx-pagr-label-clickable { margin: 0; cursor: pointer; font-weight: 500; }
.rfx-ds .rfx-pagr-round, .rfx-ds .rfx-pagr-date { color: #64748b; font-size: 0.82rem; flex: 0 0 auto; }
.rfx-ds .rfx-pagr-past .rfx-pdoc-label { color: #94a3b8; font-weight: 400; }/* Case d'accord en lecture seule (accord d'un round précédent) : même carré, teal atténué + non modifiable. */
.rfx-ds .rfx-pagr-cb-ro { accent-color: #9fd4ce; cursor: default; }/* Portail Réponses — Questionnaires : onglets des questionnaires + badge nouveauté + indicateur d'enregistrement. */
.rfx-ds .rfx-q-settabs { border-bottom: 1px solid #e2e8f0; margin: 14px 0 0; padding: 0; flex-wrap: wrap; }
.rfx-ds .rfx-q-settabs .nav-link.item-tab { color: #64748b; font-weight: 500; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; }
.rfx-ds .rfx-q-settabs .nav-item.active .nav-link.item-tab, .rfx-ds .rfx-q-settabs .nav-link.item-tab.active { color: #0d9488; border-bottom-color: #0d9488; }
.rfx-ds .rfx-q-newbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--r-full, 999px); background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 600; }
.rfx-ds .rfx-q-saving-wrap { position: fixed; bottom: 72px; right: 24px; z-index: 1050; min-height: 0; }
.rfx-ds .rfx-q-saving { display: inline-flex; align-items: center; gap: 8px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: var(--r-md, 6px); padding: 6px 12px; font-size: 0.85rem; }/* Portail Réponses — Questionnaires : panneau du questionnaire + bandeaux de catégories DS. */
.rfx-ds .rfx-qset-panel { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 16px 18px; margin-top: 6px; background: #fff; }
.rfx-ds .rfx-qset-cat1 { font-size: 0.95rem; font-weight: 700; color: #0b7d72; background: #e6f7f4; border-radius: var(--r-md, 6px); padding: 8px 12px; margin: 16px 0 8px; }
.rfx-ds .rfx-qset-cat2 { font-size: 0.88rem; font-weight: 600; color: #334155; padding: 4px 12px; margin: 8px 0 4px; border-left: 3px solid #0d9488; }/* Portail Réponses — Questionnaires : normalisation DS des questions dans le panneau (edit + view), CSS only. */
.rfx-ds .rfx-qset-panel .text-rfp { color: inherit !important; }
.rfx-ds .rfx-qset-panel .rfx-q-title { color: #1f2d3d !important; font-size: 0.95rem !important; font-weight: 700 !important; padding-left: 14px !important; margin: 16px 0 2px !important; line-height: 1.35; }
.rfx-ds .rfx-qset-panel .rfx-q-title .h4, .rfx-ds .rfx-qset-panel .rfx-q-title .font-italic { font-size: 0.8rem !important; }
.rfx-ds .rfx-qset-panel .qualification-set-qualification-answer-row { padding-left: 14px; }
/* Aides inline (documents requis/autorisés, multi-choix) en note DS discrète. */
.rfx-ds .rfx-qset-panel .text-info.h4 { color: #64748b !important; font-size: 0.8rem !important; font-weight: 400 !important; }
/* Sous-thème (2e catégorie) plus visible. */
.rfx-ds .rfx-qset-cat2 { font-size: 0.9rem; font-weight: 700; color: #0b7d72; background: #f0faf8; border-left: 3px solid #0d9488; border-radius: var(--r-md, 6px); padding: 6px 12px; margin: 14px 0 6px; }
/* Espacement/lisibilité des questions en lecture (view). */
.rfx-ds .rfx-qset-panel .rfx-q-answer, .rfx-ds .rfx-qset-panel .py-1.font-italic { padding-left: 14px; color: #334155; }/* Question à réponse LONGUE (EditorLargeLabelType) : le titre est le label du champ (<h2> HTML rendu par le form-theme),
   pas le .rfx-q-title manuel → on l'aligne sur le même rendu DS que les autres questions. Sélecteur précis : seul ce type
   met un <h2> dans un <label> du panneau. */
.rfx-ds .rfx-qset-panel h2:not(.rfx-q-title) { color: #1f2d3d !important; font-size: 0.95rem !important; font-weight: 700 !important; margin: 16px 0 2px !important; padding-left: 14px !important; line-height: 1.35 !important; }
.rfx-ds .rfx-qset-panel label h2 { margin-left: -14px; }/* Indentation cohérente titre / description / champ des questions (short + long) : on remet les titres à 0 et on indente
   les WRAPPERS (titre+description) + la ligne de réponse, pour un alignement gauche uniforme. */
.rfx-ds .rfx-qset-panel .rfx-q-title, .rfx-ds .rfx-qset-panel h2:not(.rfx-q-title) { padding-left: 0 !important; }
.rfx-ds .rfx-qset-panel .pt-2.pb-2.text-rfp, .rfx-ds .rfx-qset-panel div:has(> h2:not(.rfx-q-title)) { padding-left: 14px; }
.rfx-ds .rfx-qset-panel .qualification-set-qualification-answer-row { padding-left: 14px; }/* Champ des réponses LONGUES (éditeur, suit immédiatement le wrapper titre) + lignes d'upload de documents : même indentation. */
.rfx-ds .rfx-qset-panel div:has(> h2:not(.rfx-q-title)) + * { padding-left: 14px; }
.rfx-ds .rfx-qset-panel .document-row { padding-left: 14px; }/* Questionnaires en LECTURE : la reponse devient une valeur DS claire (plus l aspect italique gris brouillon). */
.rfx-ds .rfx-qset-panel .rfx-q-answer { font-style: normal !important; color: #0f172a; font-weight: 500; }
/* Questionnaires en LECTURE (portail entreprise) : chaque question dans une card legere DS. Le panel englobant est
   allege (bordure/padding retires) quand il contient .rfx-qview pour eviter le double encadre. Les entetes de theme
   (.rfx-qset-cat1 / .rfx-qset-cat2) restent HORS des cards comme separateurs de section. */
.rfx-ds .rfx-qset-panel:has(.rfx-qview) { border: none; border-radius: 0; padding: 0; background: transparent; }
.rfx-ds .rfx-qview-card { background: #fff; border: 1px solid #eef2f6; border-left: 2px solid rgba(13,148,136,0.4); border-radius: var(--r-lg, 10px); padding: 10px 14px 12px; margin: 0 0 10px; }
.rfx-ds .rfx-qview-card > div { padding-left: 0 !important; }
.rfx-ds .rfx-qview-card .rfx-q-title { margin-top: 0 !important; }
.rfx-ds .rfx-qview-card .rfx-q-detail { border-left: none; margin-left: 0; padding-left: 0 !important; }
.rfx-ds .rfx-qview-card .rfx-q-answer { margin-top: 2px; }

/* Drawer question acheteur en LECTURE SEULE (piste A) : champs desactives alleges (au lieu du gris navigateur brut) +
   bloc texte (CKEditor) rendu en HTML tel quel. Le mode edition n'est pas impacte (styles portes par .rfx-qform--ro). */
.rfx-qform--ro .rfx-pub-field input:disabled,
.rfx-qform--ro .rfx-pub-field textarea:disabled { background: #f8fafc; color: #334155; cursor: default; opacity: 1; -webkit-text-fill-color: #334155; }
.rfx-qform--ro .rfx-pub-field input:disabled, .rfx-qform--ro .rfx-pub-field textarea:disabled { font-size: 0.85rem !important; line-height: 1.4; }
.rfx-qform--ro .bootstrap-select > .btn.disabled, .rfx-qform--ro .bootstrap-select > .btn:disabled { background: #f8fafc; color: #334155; opacity: 1; cursor: default; }
.rfx-qform--ro .rfx-qform-help { display: none; }
.rfx-qform--ro .rfx-qform-ro-html { color: #334155; line-height: 1.4; padding: 6px 12px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); }
.rfx-qform--ro .rfx-qform-ro-html, .rfx-qform--ro .rfx-qform-ro-html * { font-size: 0.85rem !important; }
.rfx-qform--ro .rfx-qform-ro-html p { margin: 0 0 6px; line-height: 1.4; }
.rfx-qform-ro-html p:last-child { margin-bottom: 0; }

/* Onglet Financiere (portail entreprise) - reskin sous-pas (a) : commentaire (autosave) + docs financiers + config
   devise/date de validite. La grille (bom_edit) reste sous-pas (b). */
.rfx-ds .rfx-fin-saving-wrap { position: fixed; bottom: 72px; right: 24px; z-index: 1050; min-height: 0; }
.rfx-ds .rfx-fin-saving { display: inline-flex; align-items: center; gap: 8px; background: #fff8e6; border: 1px solid #f7e0a3; color: #92670c; border-radius: var(--r-md, 6px); padding: 7px 14px; font-size: 0.82rem; margin: 0; box-shadow: 0 4px 14px rgba(15,23,42,0.14); }
.rfx-ds .rfx-fin-priceconf { margin-bottom: 16px; }
.rfx-ds .rfx-fin-priceconf:last-child { margin-bottom: 0; }
.rfx-ds .rfx-fin-priceconf-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rfx-ds .rfx-fin-priceconf-input { min-width: 200px; }
.rfx-ds .rfx-fin-priceconf-input .datetime-picker { width: 100%; }
.rfx-ds .rfx-fin-priceconf-meta { font-size: 0.8rem; font-style: italic; color: #64748b; }
.rfx-ds .rfx-fin-priceconf-static { font-size: 0.9rem; color: #334155; }
.rfx-ds .rfx-fin-help { color: #14b8a6; font-size: 0.85rem; margin-left: 4px; text-decoration: none; }
.rfx-ds .rfx-fin-bomnav { margin-top: 4px; }
.rfx-ds .rfx-fin-grid-card .rfx-card-body { padding-top: 12px; }
.rfx-ds .rfx-pdoc-list { margin: 4px 0 10px; }

/* ===== Grille de prix fournisseur (portail) - reskin DS b1 (CSS-scope .rfx-pbomgrid, markup table INCHANGE). ===== */
.rfx-ds .rfx-pbomgrid { background: #fff; }
.rfx-ds .rfx-pbomgrid-alt { border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); padding: 12px; margin-top: 8px; }
/* Toolbar : upload + mention obligatoire + fleches de scroll horizontal */
.rfx-ds .rfx-pbomgrid-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 14px; }
.rfx-ds .rfx-pbomgrid-required { display: inline-flex; align-items: center; gap: 4px; font-size: 0.86rem; font-weight: 600; color: #0f766e; }
.rfx-ds .rfx-pbomgrid-help { color: #14b8a6; font-size: 0.9rem; margin-left: 4px; text-decoration: none; cursor: help; }
.rfx-ds .rfx-pbomgrid-help:hover { color: #0f766e; }
.rfx-ds .rfx-pbomgrid-required .text-danger { color: #dc3545 !important; }
/* Conteneur des fleches : il accueille desormais le composant commun `.ds-scrollnav` (les 2 regles`.rfx-pbomgrid-scrollbtn` ont ete retirees, plus aucun porteur). */
.rfx-ds .rfx-pbomgrid-scroll { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Instructions BOM alternatifs */
.rfx-ds .rfx-pbomgrid-altinstr { margin: 10px 0 14px; }
.rfx-ds .rfx-pbomgrid-altinstr-title { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #64748b; margin-bottom: 4px; }
.rfx-ds .rfx-pbomgrid-altinstr-body { font-size: 0.88rem; color: #334155; }
/* Onglets de BOM (principal .rfx-fin-bomnav + alternatifs .rfx-pbomgrid-tabs) en chips DS. Structure nav-pills/item-tab conservee. */
/* (onglets BOM : voir .rfx-qtabs, source unique) */
/* La table de prix */
.rfx-ds .rfx-pbomgrid .table-responsive { border: 1px solid #e2e8f0; border-radius: 8px; max-height: 62vh; overflow: auto; }
.rfx-ds .rfx-pbomgrid table.table-xs { margin-bottom: 0; font-size: 0.82rem; }
.rfx-ds .rfx-pbomgrid thead th { background: #f8fafc; color: #64748b; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; border-top: none; border-bottom: 1px solid #e2e8f0; vertical-align: middle; padding: 8px 6px; position: sticky; top: 0; z-index: 3; }
.rfx-ds .rfx-pbomgrid tbody td { border-top: 1px solid #f1f5f9; padding: 4px 6px; vertical-align: middle; }
.rfx-ds .rfx-pbomgrid tbody tr.bom-iteration-price-row:hover td { background: #fbfdff; }
.rfx-ds .rfx-pbomgrid .toggleColButton { color: #94a3b8; }
.rfx-ds .rfx-pbomgrid .toggleColButton:hover { color: #14b8a6; }
.rfx-ds .rfx-pbomgrid .fa-exclamation-triangle { color: #dc3545 !important; }
/* Inputs compacts DS (sans casser les largeurs inline des colonnes) */
.rfx-ds .rfx-pbomgrid table .form-control { height: auto; font-size: 0.82rem; padding: 4px 6px; border: 1px solid #dde3ea; border-radius: var(--r-md, 6px); box-shadow: none; }
.rfx-ds .rfx-pbomgrid table .form-control:focus { border-color: #14b8a6; box-shadow: 0 0 0 2px rgba(20,184,166,0.15); }
.rfx-ds .rfx-pbomgrid table .form-control.border-0 { border: none; background: #f8fafc; }

/* ===== Retouches grille portail (retours Olivier 2026-08-19) ===== */
/* Bouton import : fond blanc, contour + texte teal, hover. */
.rfx-ds .rfx-pbomgrid-upload { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #fff; color: #0f766e; font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rfx-ds .rfx-pbomgrid-upload:hover { background: #e6f7f4; color: #0b7d72; text-decoration: none; }
/* (retouche onglets retiree : .rfx-qtabs fait foi) */
/* Boutons +/- (plier/deplier colonnes) en teal au lieu du bleu lien. */
.rfx-ds .rfx-pbomgrid .toggleColButton, .rfx-ds .rfx-pbomgrid .toggleColButton i { color: #14b8a6 !important; }
.rfx-ds .rfx-pbomgrid .toggleColButton:hover, .rfx-ds .rfx-pbomgrid .toggleColButton:hover i { color: #0f766e !important; }
/* Trombone (ligne avec documents a telecharger) en teal. */
.rfx-ds .rfx-pbomgrid .rfx-pbomgrid-clip { color: #14b8a6; }

/* Bandeau d'ancrage « a faire » (Financiere) - extensible (grilles, puis livrables). Couleur ambre = action a mener. */
.rfx-ds .rfx-fin-todo { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.rfx-ds .rfx-fin-todo-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff8e6; border: 1px solid #f7e0a3; border-radius: var(--r-lg, 10px); color: #92670c; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background .12s; }
.rfx-ds .rfx-fin-todo-item:hover { background: #fdf3d6; color: #92670c; text-decoration: none; }
.rfx-ds .rfx-fin-todo-ic { color: #d99a1c; }
.rfx-ds .rfx-fin-todo-arrow { font-size: 0.8rem; opacity: .7; }
/* Espace sous les onglets de grille (evite qu'ils collent au bouton d'import). */
.rfx-ds .rfx-fin-bomnav .rfx-qtabs { margin-bottom: 10px; }

/* Hover onglets (Questionnaires + Grilles de prix, portail ET acheteur - tous sous .rfx-qtabs ; .bom-item = grille acheteur). */
.rfx-ds .rfx-qtabs .qualification-set-item:not(.active):hover, .adm-ds .rfx-qtabs .qualification-set-item:not(.active):hover, .rfx-ds .rfx-qtabs .bom-item:not(.active):hover, .adm-ds .rfx-qtabs .bom-item:not(.active):hover { border-color: #94d5cd; background: #f5fbfa; }
.rfx-ds .rfx-qtabs .qualification-set-item:not(.active):hover .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item:not(.active):hover .nav-link.item-tab, .rfx-ds .rfx-qtabs .bom-item:not(.active):hover .nav-link.item-tab, .adm-ds .rfx-qtabs .bom-item:not(.active):hover .nav-link.item-tab { color: #0f766e; }

/* Grille (edition) : card a hauteur bornee - onglets (noms de grilles) + toolbar (import/fleches) FIXES en haut, table qui
   remplit et scrolle (H + V) en dessous. => onglets toujours visibles, scrollbar horizontale accessible, marge du bas recuperee. */
.rfx-ds .rfx-fin-grid-card { display: flex; flex-direction: column; max-height: 70vh; }
.rfx-ds .rfx-fin-grid-card > .rfx-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rfx-ds .rfx-fin-grid-card .rfx-fin-bomnav { flex: 0 0 auto; }
.rfx-ds .rfx-fin-grid-card #bom-container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid-alt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid-toolbar { flex: 0 0 auto; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid .table-responsive { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Maillon manquant : _form_proposal_price_table fait form_start(form) => un <form> s'intercale entre .rfx-pbomgrid et
   .table-responsive. On le remet dans la chaine flex pour que la table herite bien de la hauteur (sinon plus de scroll interne). */
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Marges card grille : un peu d'air au-dessus des onglets (pas colles a la nav secondaire) + bas resserre. */
.rfx-ds .rfx-fin-grid-card { margin-top: 14px; margin-bottom: 4px; }
.rfx-ds .rfx-fin-grid-card > .rfx-card-body { padding-top: 0; padding-bottom: 8px; }

/* Bouton d'envoi de l'offre (portail, tous onglets) : prominent + centre ; toolbar du bas moins haute. */
/* (.rfx-send-btn : classes existantes reutilisees, cf ~20133) */
/* (centrage toolbar portail via .rfx-toolbar-3, cf ~19152) */

/* Bas de l onglet Financiere resserre (moins de vide sous la grille). */
.rfx-ds .rfx-fin-wrap { padding-bottom: 6px; }

/* Pill « nom de grille » (portail) - a gauche du bouton d'import, visible au scroll de la table. Calque du pill acheteur. */
.rfx-ds .rfx-pbomgrid-gridpill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; color: #0f766e; background: #e6f5f3; padding: 3px 12px; border-radius: var(--r-full, 999px); white-space: nowrap; }

/* Portail Financiere - card commentaire : champ CKEditor plus court + ligne d'autosave sans reserve d'espace a vide. */
.rfx-ds .rfx-fin-comment .rfx-autosave-line { display: flex; min-height: 0; margin: 6px 0 0; line-height: 1; }
/* Modale Grilles alternatives (acheteur) : meme pattern de hauteur robuste que #iterationPriceModal.
   form_start enveloppe header/body/footer -> le flex column doit porter sur le <form>. #bomAlternativesModal
   cap a la hauteur viewport + scroll interne sur .rfx-lp-scroll (neutralise le height inline de resizeModalContainer). */
#bomAlternativesModal .modal-content { max-height: calc(100vh - 3.5rem); overflow: hidden; display: flex; flex-direction: column; }
#bomAlternativesModal .modal-content > form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#bomAlternativesModal .rfx-lp-header, #bomAlternativesModal .modal-footer { flex: 0 0 auto; }
#bomAlternativesModal .rfx-lp-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
#bomAlternativesModal .rfx-lp-scroll { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }

/* Portail Financiere - card commentaire : reduire la hauteur du CKEditor (cibler .cke_contents ET son iframe interne, sinon le height ne prend pas). */
/* CKEditor INLINE (contenteditable div.cke_editable_inline) : la hauteur vient du min-height, pas de .cke_contents/iframe. */
.rfx-ds .rfx-fin-comment .cke_editable_inline { min-height: 42px !important; }
/* fallback mode classique (iframe) au cas ou : */
.rfx-ds .rfx-fin-comment .cke_contents,
.rfx-ds .rfx-fin-comment .cke_contents iframe { height: 55px !important; }

/* Portail - modale edition ligne de prix (#iterationPriceViewModal) : habillage DS (titres de section, aide). */
.rfx-ds .rfx-ppe-section { font-size: 0.95rem; font-weight: 700; color: #0f766e; padding-bottom: 8px; margin: 0 0 12px; border-bottom: 1px solid #e2e8f0; }
.rfx-ds .rfx-ppe-section.rfx-ppe-section--mt { margin-top: 24px; }
.rfx-ds .rfx-ppe-help { color: #0d9488 !important; cursor: help; }

.rfx-ds .rfx-doc-hint .rfx-doc-hint-body { flex: 1; min-width: 0; }

/* Portail modale ligne de prix (#iterationPriceViewModal) - polish DS */
.rfx-ds .rfx-ppe-help { font-size: 0.9rem; }
.rfx-ds .rfx-ppe-section::before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #0d9488; font-size: 0.82em; margin-right: 8px; }
/* corbeilles teal (liens bleus par defaut) */
#iterationPriceViewModal .btnDelete, #iterationPriceViewModal .proposal-price-quantitative-delete-btn, #iterationPriceViewModal #proposal-price-unique-close-btn, #iterationPriceViewModal #proposal-price-quantitative-close-btn { color: #0d9488; }
#iterationPriceViewModal .btnDelete:hover, #iterationPriceViewModal .proposal-price-quantitative-delete-btn:hover, #iterationPriceViewModal #proposal-price-unique-close-btn:hover, #iterationPriceViewModal #proposal-price-quantitative-close-btn:hover { color: #0a6d63; }
/* boutons verts legacy -> teal */
#iterationPriceViewModal .btn-success { background: #0d9488; border-color: #0d9488; color: #fff; }
#iterationPriceViewModal .btn-success:hover, #iterationPriceViewModal .btn-success:focus { background: #0a6d63; border-color: #0a6d63; color: #fff; }
/* labels de champ DS (uniformise police/taille) */
#iterationPriceViewModal h5 { font-size: 0.8rem; font-weight: 600; color: #334155; margin-bottom: 5px; }
/* encart hint : espacement interne resserre */
.rfx-ds .rfx-doc-hint .pt-2 { padding-top: 4px !important; }
/* hint : icone ampoule detachee du texte (gap + retrait de ligne) */
#iterationPriceViewModal .rfx-doc-hint .rfx-doc-hint-icon { float: left; margin-right: 8px; margin-top: 2px; }
#iterationPriceViewModal .rfx-doc-hint .d-flex { gap: 8px; }

/* Polish modale ligne de prix : contenu injecte PAS sous #iterationPriceViewModal au runtime -> scoper via .rfx-ppe (classe sur le modal-body). */
.rfx-ppe .btnDelete, .rfx-ppe .btnDelete i, .rfx-ppe #proposal-price-unique-close-btn, .rfx-ppe #proposal-price-unique-close-btn i, .rfx-ppe #proposal-price-quantitative-close-btn, .rfx-ppe #proposal-price-quantitative-close-btn i, .rfx-ppe .proposal-price-quantitative-delete-btn, .rfx-ppe .proposal-price-quantitative-delete-btn i { color: #0d9488 !important; }
.rfx-ppe .btnDelete:hover i, .rfx-ppe .proposal-price-quantitative-delete-btn:hover i { color: #0a6d63 !important; }
.rfx-ppe h5 { font-size: 0.8rem; font-weight: 600; color: #334155; margin-bottom: 5px; }
.rfx-ppe .rfx-doc-hint .rfx-doc-hint-icon { float: left; margin-right: 8px; margin-top: 2px; color: #0d9488; }
.rfx-ppe .rfx-doc-hint .d-flex { gap: 8px; }
.rfx-ppe .btn-success { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
/* boutons type "Definir prix unique/palier" (vert legacy app.css l.2095) -> teal */
#rfp_proposal_price_type .form-check-inline { background-color: #0d9488 !important; border-color: #0d9488 !important; }
#rfp_proposal_price_type .form-check-inline:hover { background-color: #0a6d63 !important; border-color: #0a6d63 !important; }

/* ===== Refonte cards DS - modale ligne de prix (.rfx-ppe) ===== */
.rfx-ppe .rfx-ppe-subtitle { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #0f766e; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid #eef2f6; }
.rfx-ppe .rfx-ppe-ro { display: flex; align-items: center; min-height: 36px; padding: 6px 12px; background: #f8fafc; border: 1px solid #e9eef3; border-radius: var(--r-md, 6px); font-size: 0.85rem; color: #334155; }
/* Valeur vide d'un champ en lecture seule : tiret cadratin, exception assumee de CLAUDE.md pour
   les fiches (symbole "pas de valeur", pas de la ponctuation). En ECHAPPEMENT CSS et non en
   caractere litteral : c'est justement ce caractere qui s'etait fait corrompre ici en U+FFFD
   lors d'une ecriture au mauvais encodage (reste visible "?4" jusqu'au 2026-09-07). */
.rfx-ppe .rfx-ppe-ro:empty::before { content: "\2014"; color: #cbd5e1; }
.rfx-ppe .rfx-ppe-total { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: #0f766e; }
.rfx-ppe .rfx-ppe-fieldgroup { margin-bottom: 16px; }
.rfx-ppe .rfx-ppe-pricebox { border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); padding: 14px 16px; background: #fff; }
.rfx-ppe .rfx-ppe-th { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #64748b; padding-bottom: 6px; }
.rfx-ppe .rfx-ppe-computed { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 10px; background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-md, 6px); font-weight: 600; color: #0f766e; }
.rfx-ppe .form-control, .rfx-ppe .selectpicker + .dropdown-toggle, .rfx-ppe .bootstrap-select .btn { font-size: 0.85rem; }

/* ===== Cards DS modale ligne de prix : card 1 grise + couleurs + tables ===== */
.rfx-ds .rfx-card.rfx-ppe-muted { background: #f8fafc; }
.rfx-ds .rfx-card.rfx-ppe-muted .rfx-card-header { background: transparent; }
.rfx-ppe .text-info { color: #0f766e !important; }
.rfx-ppe .border-info { border-color: #cceae7 !important; }
.rfx-ppe .d-flex.h3, .rfx-ppe .h3 { font-size: 0.95rem; }
.rfx-ppe .table { margin-bottom: 0; }
.rfx-ppe .table th, .rfx-ppe .table td { border: none !important; padding: 3px 6px; vertical-align: middle; }
.rfx-ppe .table thead th h5 { margin-bottom: 0; }
.rfx-ppe .mt-3.p-3.border, .rfx-ppe .p-3.border { border: 1px solid #eef2f6 !important; border-radius: 2px; }
.rfx-ppe #iteration-price-quantity, .rfx-ppe #proposalPriceTotalAmount { background: #f0fafa !important; border: 1px solid #cceae7; border-radius: 2px; color: #0f766e; font-weight: 600; }
/* input read-only montant total (bg-light border-0) -> DS neutre */
.rfx-ppe .amount-mask.bg-light { background: #f8fafc !important; }

/* croix au lieu de poubelle (technique .aspp-ds l.21596) - CSS only, markup partage intact */
.rfx-ppe .proposal-price-quantitative-delete-btn i::before,
.rfx-ppe #proposal-price-quantitative-close-btn i::before,
.rfx-ppe #proposal-price-unique-close-btn i::before { content: "\f00d" !important; font-weight: 900 !important; }

/* ===== Modale ligne de prix : polish DS (labels, popover fonce, tables prix) ===== */
/* Point 6 : popover FONCE dedie (rfx-qpop est blanc) */
.rfx-ppe-pop { max-width: 300px; border: none; border-radius: var(--r-lg, 10px); box-shadow: 0 6px 24px rgba(2,6,23,.2); background: #1b2a4a; }
.rfx-ppe-pop .popover-body { font-size: 0.75rem; line-height: 1.4; color: #f1f5f9; padding: 8px 11px; }
.rfx-ppe-pop .arrow::before, .rfx-ppe-pop .arrow::after { border-top-color: #1b2a4a !important; border-bottom-color: #1b2a4a !important; }
.rfx-ppe-pop.bs-popover-left .arrow::before, .rfx-ppe-pop.bs-popover-left .arrow::after { border-left-color: #1b2a4a !important; }
.rfx-ppe-pop.bs-popover-right .arrow::before, .rfx-ppe-pop.bs-popover-right .arrow::after { border-right-color: #1b2a4a !important; }
/* Point 1 : labels champs DS (petit gris uppercase) + espacement sous-titre->champs reduit */
.rfx-ppe h5 { font-size: 0.72rem !important; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; margin-bottom: 5px; }
.rfx-ppe .rfx-ppe-section { margin-bottom: 6px; }
.rfx-ppe .rfx-ppe-section + .row { padding-top: 6px !important; }
/* Point 5 : tables prix - police uniforme + flex paliers (facon .aspp) */
.rfx-ppe #proposal-price-unique .table, .rfx-ppe #proposal-price-total .table { width: 100%; margin-bottom: 0; }
.rfx-ppe #proposal-price-unique .form-control, .rfx-ppe #proposal-price-total .form-control, .rfx-ppe #proposal-price-quantitative .form-control { font-size: 0.85rem; }
.rfx-ppe #proposal-price-quantitative .row.no-gutters { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.rfx-ppe #proposal-price-quantitative [class*="col-"] { flex: 1 1 0; max-width: none; width: auto; min-width: 0; padding: 0 3px; font-size: 0.78rem; }
.rfx-ppe #proposal-price-quantitative .row.no-gutters > .col-1:first-child { flex: 0 0 auto; min-width: 40px; }
.rfx-ppe #proposal-price-quantitative .font-weight-bold { line-height: 1.15; }
/* Point 5/6 : bloc total encadre DS, ne flotte plus */
.rfx-ppe #proposal-price-total { float: none !important; }
.rfx-ppe #proposal-price-total .table { border: 1px solid #eef2f6; border-radius: 2px; }
.rfx-ppe .wp-150 { width: auto !important; margin-right: 8px; }
/* Point 1 : documents joints Card 1 - masquer en-tete labels + cellules DS lisibles */
.rfx-ppe .rfx-ppe-dochead { display: none !important; }
.rfx-ppe .col-md-4.h5, .rfx-ppe .col-md-2.h5, .rfx-ppe .col-md-1.h5 { font-size: 0.82rem !important; font-weight: 400 !important; letter-spacing: 0; text-transform: none; color: #334155; }
.rfx-ppe .row.py-1 { align-items: center; border-bottom: 1px solid #f1f5f9; padding: 4px 0; }
.rfx-ppe .rfx-ppe-pqnote { font-size: 0.72rem; font-style: italic; color: #94a3b8; margin-top: 10px; line-height: 1.4; }

/* ===== Prix unique/palier + totaux : layout propre (bandeaux, plus de flottement) ===== */
/* Boite prix unique : pleine largeur */
.rfx-ppe #proposal-price-unique .col-7 { flex: 0 0 100%; max-width: 100%; }
/* Bloc total (Qte demandee/proposee/prix net total) : bandeau pleine largeur, non flottant */
.rfx-ppe .col-7.offset-5 { margin-left: 0 !important; flex: 0 0 100% !important; max-width: 100% !important; }
.rfx-ppe #proposal-price-total { float: none !important; width: 100%; }
.rfx-ppe #proposal-price-total .table { width: 100%; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 3px; margin-top: 8px; }
.rfx-ppe #proposal-price-total .table th, .rfx-ppe #proposal-price-total .table td { text-align: center; width: auto !important; }
/* Tarifications complementaires : labels sans retour a la ligne (etoile) */
.rfx-ppe #proposal-price-additional-container .font-weight-bold { white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.02em; }
/* Prix total net (complementaires) : bandeau final teal, pleine largeur */
.rfx-ppe #proposal-price-additional-container > .row { margin-top: 12px; }
.rfx-ppe #proposal-price-additional-container > .row > .col-8 { display: none; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 { flex: 0 0 100%; max-width: 100%; background: #f0fafa; border: 1px solid #cceae7; border-radius: 3px; padding: 10px 16px; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .d-flex { justify-content: flex-end; align-items: center; gap: 8px; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .wp-150 { width: auto !important; margin-right: 0; }

/* ===== #4/#5/#6 : layout final Prix unique/palier + bandeaux ===== */
/* Croix annulation coin haut-droit (facon aspp) */
.rfx-ppe #proposal-price-unique .mt-3.p-3.border.d-flex { position: relative; padding-top: 30px !important; }
.rfx-ppe #proposal-price-quantitative .mt-3.p-3.border { position: relative; padding-top: 30px !important; }
.rfx-ppe #proposal-price-unique-close-btn, .rfx-ppe #proposal-price-quantitative-close-btn { position: absolute !important; top: 8px; right: 8px; width: 24px; height: 24px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #e2e8f0; margin: 0 !important; padding: 0 !important; z-index: 3; }
.rfx-ppe #proposal-price-unique-close-btn:hover, .rfx-ppe #proposal-price-quantitative-close-btn:hover { background: #fef2f2; border-color: #fecaca; }
.rfx-ppe #proposal-price-unique-close-btn i, .rfx-ppe #proposal-price-quantitative-close-btn i { color: #94a3b8 !important; }
.rfx-ppe #proposal-price-unique-close-btn:hover i, .rfx-ppe #proposal-price-quantitative-close-btn:hover i { color: #dc3545 !important; }
/* Prix unique : table -> flex, champs meme largeur, Delai a droite */
.rfx-ppe #proposal-price-unique table.table thead tr, .rfx-ppe #proposal-price-unique table.table tbody tr { display: flex; gap: 18px; align-items: flex-end; }
.rfx-ppe #proposal-price-unique table.table th, .rfx-ppe #proposal-price-unique table.table td { display: block; width: auto !important; padding: 0 !important; flex: 0 0 130px; }
.rfx-ppe #proposal-price-unique table.table th:empty, .rfx-ppe #proposal-price-unique table.table td:empty { display: none; }
.rfx-ppe #proposal-price-unique table.table th:last-of-type, .rfx-ppe #proposal-price-unique table.table td:last-of-type { margin-left: auto; }
.rfx-ppe #proposal-price-unique .form-control { width: 100%; }
/* Bloc total : 4 champs meme largeur, Prix net total a droite + ressort */
.rfx-ppe #proposal-price-total table.table thead tr, .rfx-ppe #proposal-price-total table.table tbody tr { display: flex; gap: 18px; align-items: center; }
.rfx-ppe #proposal-price-total table.table th, .rfx-ppe #proposal-price-total table.table td { display: block; width: auto !important; flex: 0 0 150px; padding: 0 !important; border: none !important; text-align: left; }
.rfx-ppe #proposal-price-total table.table th:empty, .rfx-ppe #proposal-price-total table.table td:empty { display: none; }
.rfx-ppe #proposal-price-total table.table th:last-of-type, .rfx-ppe #proposal-price-total table.table td:last-of-type { margin-left: auto; }
.rfx-ppe #proposalPriceTotalAmount { background: #0d9488 !important; color: #fff !important; border: none !important; font-weight: 700; font-size: 1rem; padding: 9px 12px !important; }
.rfx-ppe #proposal-price-total table.table th:last-of-type h5, .rfx-ppe #proposal-price-total table.table th:last-of-type .text-info { color: #0f766e !important; font-weight: 700; }
/* #5 : popovers ? non clippes */
.rfx-ppe #proposal-price-total, .rfx-ppe #proposal-price-total .table, .rfx-ppe #proposal-price-total table.table td, .rfx-ppe #proposal-price-total table.table th { overflow: visible !important; }
/* #6 : Prix total net = demi-bandeau droite, ? apres titre (order), champ reduit */
.rfx-ppe #proposal-price-additional-container > .row > .col-4 { flex: 0 0 50% !important; max-width: 50% !important; margin-left: auto; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .d-flex { justify-content: flex-start; align-items: center; gap: 8px; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .wp-150 { order: 0; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .rfx-ppe-help { order: 1; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .form-control { order: 2; margin-left: auto; max-width: 150px; text-align: right; background: rgba(255,255,255,0.65) !important; }

/* ===== Retours modale prix (v2) : cadres, largeurs, croix, fleche, bandeau ===== */
/* #2 Prix unique : vrai cadre + champs uniformes larges/espaces */
.rfx-ppe #proposal-price-unique .mt-3.p-3.border.d-flex { padding: 34px 22px 20px !important; }
.rfx-ppe #proposal-price-unique table.table th, .rfx-ppe #proposal-price-unique table.table td { flex: 0 0 155px; }
.rfx-ppe #proposal-price-unique table.table thead tr, .rfx-ppe #proposal-price-unique table.table tbody tr { gap: 30px; }
/* Total : aligne sur la boite prix (memes largeurs/gap + meme retrait gauche) */
.rfx-ppe #proposal-price-total { padding: 0 22px; }
.rfx-ppe #proposal-price-total table.table th, .rfx-ppe #proposal-price-total table.table td { flex: 0 0 155px; }
.rfx-ppe #proposal-price-total table.table thead tr, .rfx-ppe #proposal-price-total table.table tbody tr { gap: 30px; }
/* #3 Palier : tous champs meme largeur + plus de place au label Palier N */
.rfx-ppe #proposal-price-quantitative .mt-3.p-3.border { padding: 34px 22px 20px !important; }
/* #4 croix box paliers top-right (col-1 vide du close-btn collabe) */
.rfx-ppe #proposal-price-quantitative-close-btn { position: absolute !important; top: 8px; right: 8px; }
/* crosses par ligne : masquer Palier 1 & 2 (comme acheteur) */
.rfx-ppe #proposal-price-quantitative .proposal-price-quantitative-row:nth-child(-n+2) .proposal-price-quantitative-delete-btn { display: none !important; }
/* #5 fleche popover foncee, toutes directions, ::before ET ::after */
.rfx-ppe-pop .arrow::before, .rfx-ppe-pop .arrow::after { border-color: transparent !important; }
.rfx-ppe-pop.bs-popover-top .arrow::before, .rfx-ppe-pop.bs-popover-top .arrow::after, .rfx-ppe-pop[x-placement^="top"] .arrow::before, .rfx-ppe-pop[x-placement^="top"] .arrow::after { border-top-color: #1b2a4a !important; }
.rfx-ppe-pop.bs-popover-bottom .arrow::before, .rfx-ppe-pop.bs-popover-bottom .arrow::after, .rfx-ppe-pop[x-placement^="bottom"] .arrow::before, .rfx-ppe-pop[x-placement^="bottom"] .arrow::after { border-bottom-color: #1b2a4a !important; }
.rfx-ppe-pop.bs-popover-left .arrow::before, .rfx-ppe-pop.bs-popover-left .arrow::after, .rfx-ppe-pop[x-placement^="left"] .arrow::before, .rfx-ppe-pop[x-placement^="left"] .arrow::after { border-left-color: #1b2a4a !important; }
.rfx-ppe-pop.bs-popover-right .arrow::before, .rfx-ppe-pop.bs-popover-right .arrow::after, .rfx-ppe-pop[x-placement^="right"] .arrow::before, .rfx-ppe-pop[x-placement^="right"] .arrow::after { border-right-color: #1b2a4a !important; }
/* #6 demi-bandeau : ? proche du titre, chiffre teal gras plus gros */
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .d-flex { gap: 6px; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .form-control { font-size: 1.1rem !important; font-weight: 700 !important; color: #0f766e !important; }
.rfx-ds .rfx-qimport-nbnote { font-size: 0.78rem; color: #64748b; margin-top: 10px; line-height: 1.4; }

/* ===== Corrections v3 : boite grise total, palier aligne, ? colle ===== */
/* #1 bloc total = vraie boite grise encadree (padding autour des champs) */
.rfx-ppe #proposal-price-total { background: #f8fafc; border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); padding: 16px 22px !important; }
/* #2/#3 palier : 1ere colonne (close header / Palier N) meme largeur -> alignement ; close absolu top-right */
.rfx-ppe #proposal-price-quantitative .row.no-gutters.pt-3.pb-2 > .col-1:first-child, .rfx-ppe #proposal-price-quantitative .proposal-price-quantitative-row > [class*="col-"]:first-child, .rfx-ppe #proposal-price-quantitative .proposal-price-quantitative-index { flex: 0 0 72px !important; min-width: 72px !important; max-width: 72px; }
/* #3 demi-bandeau : titre largeur auto -> ? colle au titre */
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .wp-150 { width: auto !important; flex: 0 0 auto !important; margin-right: 0 !important; white-space: nowrap; }
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .d-flex { gap: 4px; }

/* ===== Corrections v4 : croix palier, centrage champs, remise, ? colle ===== */
/* #1 croix palier : forcer absolu top-right (left:auto comme buyer) */
.rfx-ppe #proposal-price-quantitative-close-btn { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; }
/* #2 centrer les 3 champs Quantite (bloc total) + le champ Delai (unique) */
.rfx-ppe #proposal-price-total table.table th, .rfx-ppe #proposal-price-total table.table td { text-align: center !important; }
.rfx-ppe #proposal-price-total .form-control, .rfx-ppe #proposal-price-total input { text-align: center !important; }
.rfx-ppe #rfp_proposal_price_deliveryTime { text-align: center !important; }
/* #3 palier : tous les inputs pleine largeur de cellule (Remise = comme les autres) */
.rfx-ppe #proposal-price-quantitative .form-control { width: 100% !important; }
/* #4 demi-bandeau : reset min/max-width du titre -> ? colle (multi-langues) */
.rfx-ppe #proposal-price-additional-container > .row > .col-4 .wp-150 { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap; }

/* Grille portail : espace entre les boutons de la derniere colonne et la scrollbar interne */
.rfx-ds .rfx-pbomgrid .table-responsive td:last-child, .rfx-ds .rfx-pbomgrid .table-responsive th:last-child { padding-right: 16px !important; }

/* Croix palier : la .col-1 Bootstrap est position:relative -> la passer en static pour que la croix absolute se cale sur l encadre (gotcha_bootstrap_col_position_relative) */
.rfx-ppe #proposal-price-quantitative .row.no-gutters.pt-3.pb-2 > .col-1:first-child { position: static !important; }


/* ===== Modale vue ligne de prix (read-only) : fallback cards/sections hors .rfx-ds (contexte acheteur #proposalPriceModal). Scope .rfx-ppe--ro uniquement -> n'affecte pas la modale edition. ===== */
.rfx-ppe--ro .rfx-card { background: #fff; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); margin-bottom: 16px; border-color: transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; box-shadow: none; }
.rfx-ppe--ro .rfx-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 48px; box-sizing: border-box; position: relative; border-bottom: 1px solid rgba(45,62,80,0.22); }
.rfx-ppe--ro .rfx-card-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 1px; background: #fff; }
.rfx-ppe--ro .rfx-card-icon { color: #0d9488; font-size: 1rem; }
.rfx-ppe--ro .rfx-card-title { font-size: 1rem; font-weight: 600; color: #2D3E50; }
.rfx-ppe--ro .rfx-card-body { padding: 18px 20px 20px; }
.rfx-ppe--ro .rfx-card.rfx-ppe-muted { background: #f8fafc; }
.rfx-ppe--ro .rfx-card.rfx-ppe-muted .rfx-card-header { background: transparent; }
.rfx-ppe--ro .rfx-ppe-section { font-size: 0.95rem; font-weight: 700; color: #0f766e; padding-bottom: 8px; margin: 0 0 6px; border-bottom: 1px solid #e2e8f0; }
.rfx-ppe--ro .rfx-ppe-section.rfx-ppe-section--mt { margin-top: 24px; }
.rfx-ppe--ro .rfx-ppe-section::before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #0d9488; font-size: 0.82em; margin-right: 8px; }
.rfx-ppe--ro .rfx-ppe-help { color: #0d9488 !important; cursor: help; font-size: 0.9rem; }

.rfx-ppe--ro #proposal-price-additional-container > .row > .col-4 .rfx-ppe-ro-total { order: 2; margin-left: auto; max-width: 150px; text-align: right; padding: 6px 12px; background: rgba(255,255,255,0.65); border-radius: var(--r-md, 6px); font-family: 'Lexend Deca', sans-serif; font-size: 17px; line-height: 1.4; font-weight: 700; color: #0f766e; white-space: nowrap; }

/* Total complements (vue) : figer le label contre l override legacy .rfx-ds .container-scrollable .text-info (navy, portail only) + .container-scrollable .h3 (taille). Rendu identique portail/acheteur. */
.rfx-ppe--ro #proposal-price-additional-container > .row > .col-4 .wp-150 { color: #0f766e !important; font-size: 14px !important; }

/* Description (vue) : figer le corps contre .rfx-ds .container-scrollable .h4 (portail only). Texte body lisible, identique portail/acheteur. */
.rfx-ppe--ro #proposal-price-description-container .h4 { font-size: 0.85rem !important; font-weight: 400 !important; color: #334155 !important; line-height: 1.5; }

/* ===== Portail Financier : checklist "Livrables financiers attendus" (reponse societe) — _financial_deliverables_response.html.twig ===== */
.rfx-fin-resp-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rfx-fin-resp-row { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid #eef2f6; border-radius: 4px; background: #fff; }
.rfx-fin-resp-row.is-done { border-color: #cceae7; background: #f6fdfc; }
.rfx-fin-resp-row.is-missing { border-color: #fde3c7; background: #fffaf4; }
.rfx-fin-resp-state { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.4; color: #cbd5e1; }
.rfx-fin-resp-row.is-done .rfx-fin-resp-state { color: #0d9488; }
/* 2026-09-23 : la barre d'actions remonte sur la ligne du titre (elle occupait une ligne à elle seule, alors que la
   ligne du titre était vide sur l'essentiel de sa largeur). Description et documents gardent toute la largeur. */
.rfx-fin-resp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; }
.rfx-fin-resp-desc, .rfx-fin-resp-docs, .rfx-fin-resp-empty, .rfx-fin-resp-main > .rfx-pdoc-list { flex: 1 1 100%; }
.rfx-fin-resp-head { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rfx-ds .rfx-fin-card:not(.rfx-fin-card-compact) .rfx-fin-resp-head,
.rfx-ds .rfx-fin-card:not(.rfx-fin-card-compact) .rfx-fin-resp-state { min-height: 32px; display: flex; align-items: center; }
/* `align-self` : la puce d'etat s'etirait sur toute la hauteur de la ligne (flex par defaut) et son icone se
   retrouvait a mi-chemin des deux boutons au lieu d'etre en face du nom du livrable. */
.rfx-ds .rfx-fin-card:not(.rfx-fin-card-compact) .rfx-fin-resp-state { align-self: flex-start; }
.rfx-fin-resp-name { font-size: 0.9rem; font-weight: 600; color: #2D3E50; }
.rfx-fin-resp-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: var(--r-full, 999px); background: #eef2f6; color: #64748b; }
.rfx-fin-resp-badge.is-req { background: #e0f2f1; color: #0f766e; }
.rfx-fin-resp-tpl { font-size: 0.78rem; color: #0d9488; margin-left: auto; text-decoration: none; white-space: nowrap; }
.rfx-fin-resp-tpl:hover { text-decoration: underline; }
.rfx-fin-resp-desc { font-size: 0.8rem; color: #64748b; margin-top: 3px; }
.rfx-fin-resp-docs { margin-top: 8px; }
.rfx-fin-resp-empty { font-size: 0.8rem; color: #94a3b8; font-style: italic; margin-top: 6px; }
.rfx-fin-resp-deposit { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; color: #0d9488; background: #fff; border: 1px solid #cceae7; border-radius: var(--r-md, 6px); cursor: pointer; }
/* Hauteur unique dans la colonne : le bouton de reprise était plus haut d'un pixel, et l'écart se voyait à l'empilement. */
.rfx-ds .rfx-fin-resp-actions .rfx-fin-resp-deposit,
.rfx-ds .rfx-fin-resp-actions .rfx-fin-reuse-btn { min-height: 32px; justify-content: center; }
.rfx-fin-resp-deposit:hover { background: #f0fafa; }

/* Portail Financier : ligne action livrable (modele a completer -> deposer) */
/* Les gestes de l'entreprise restent sur UNE ligne, dans le même ordre : déposer, puis reprendre le livrable du round
   précédent. Empilés, ils repoussaient la description du livrable en troisième ligne, loin de son nom. */
.rfx-fin-resp-actions { flex: 0 0 auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; }
.rfx-fin-resp-actions:empty { display: none; }
.rfx-fin-resp-tplbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; color: #415873; background: #fff; border: 1px solid #d7dee6; border-radius: var(--r-md, 6px); text-decoration: none; }
.rfx-fin-resp-tplbtn:hover { background: #f4f7fa; color: #415873; text-decoration: none; }
.rfx-fin-resp-actions .rfx-fin-resp-deposit { margin-top: 0; }

.rfx-fin-resp-othernote { margin-top: 14px; }

.rfx-fin-resp-step { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #0d9488; color: #fff; font-size: 0.7rem; font-weight: 700; margin-right: 7px; flex: 0 0 auto; }

/* Tuile ancrage : etat "fait" = vert */
.rfx-ds .rfx-fin-todo-item.is-done { background: #ecfdf5; border-color: #a7f3d0; color: #0f766e; }
.rfx-ds .rfx-fin-todo-item.is-done:hover { background: #d1fae5; color: #0f766e; }
.rfx-ds .rfx-fin-todo-item.is-done .rfx-fin-todo-ic { color: #0d9488; }

/* Tuile ancrage neutre (Synthese facultative) + sous-libelle (dont X obligatoires) */
.rfx-ds .rfx-fin-todo-item-neutral { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.rfx-ds .rfx-fin-todo-item-neutral:hover { background: #f1f5f9; color: #475569; }
.rfx-ds .rfx-fin-todo-item-neutral .rfx-fin-todo-ic { color: #94a3b8; }
.rfx-fin-todo-sub { font-size: 0.78rem; font-weight: 400; opacity: 0.75; margin-left: 6px; }

.rfx-ds .rfx-fin-todo-item-neutral { margin-left: 20px; }

.rfx-ds .rfx-fin-todo-item-neutral { margin-left: 40px; }

/* Avertissement anti-erreur (portail Financier) : grille Excel remplie déposée par erreur dans les docs libres au lieu d'être réimportée dans la grille. Variante ambre de .rfx-doc-hint. */
.rfx-ds .rfx-doc-warn { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-lg, 10px); color: #92400e; font-size: 0.85rem; line-height: 1.45; }
.rfx-ds .rfx-doc-warn-icon { margin-top: 2px; flex-shrink: 0; color: #d97706; }
.rfx-ds .rfx-doc-warn strong { font-weight: 600; }

/* Reprise 1-clic des docs réponse du round précédent (portail Financier, checklist livrables). */
.rfx-ds .rfx-fin-reuse { margin-top: 8px; padding: 8px 10px; background: #f0fafa; border: 1px dashed #cceae7; border-radius: var(--r-md, 6px); }
.rfx-ds .rfx-fin-reuse-title { font-size: 0.78rem; font-weight: 600; color: #0b7d72; margin-bottom: 6px; }
.rfx-ds .rfx-fin-reuse-ic { margin-right: 4px; }
.rfx-ds .rfx-fin-reuse-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.rfx-ds .rfx-fin-reuse-label { flex: 1; min-width: 0; font-size: 0.82rem; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds .rfx-fin-reuse-btn { flex-shrink: 0; font-size: 0.78rem; padding: 3px 10px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); color: #0d9488; background: #fff; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rfx-ds .rfx-fin-reuse-btn:hover { background: #0d9488; color: #fff; }
/* Dans la barre d'actions (l'encadré « Remis au round précédent » a disparu) : même gabarit que les autres boutons,
   et le nom du fichier est tronqué plutôt que d'étirer la ligne. Le `span` porteur garde `rfx-fin-reuse-row`, que les
   écrans appelants ciblent pour poser le message d'erreur. */
.rfx-ds .rfx-fin-resp-actions .rfx-fin-reuse-row { display: inline-flex; align-items: center; gap: 8px; padding: 0; }
.rfx-ds .rfx-fin-resp-actions .rfx-fin-reuse-btn { display: inline-flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-fin-resp-actions .rfx-fin-reuse-btn { padding: 5px 12px; font-size: 0.82rem; }
.rfx-ds .rfx-fin-reuse-btn:disabled { opacity: 0.55; cursor: default; }
.rfx-ds .rfx-fin-reuse-btn i { margin-right: 4px; }

/* Pill « Offre(s) reçue(s) » (proposalStatus SENT) : rétabli en VERT dans le header DS — échappe au gris neutre de .rfx-head-right .auto-pilled (rétabli à la demande, il avait été neutralisé au reskin). Même spécificité que la règle grise mais appended après → gagne. */
.rfx-ds .rfx-head-right .auto-pilled.pilled-success { border-color: #8BC34A !important; color: #5f9327 !important; }

/* Pills grille de prix (portail Financier) : complétude par grille — teal clair si complète, ambre si à compléter. :not(.active) pour laisser l'onglet actif garder son style teal. */
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-todo:not(.active), .adm-ds .rfx-qtabs .qualification-set-item.is-grid-todo:not(.active) { border-color: #fcd34d; background: #fffbeb; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-todo:not(.active) .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-todo:not(.active) .nav-link.item-tab { color: #92400e; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-done:not(.active), .adm-ds .rfx-qtabs .qualification-set-item.is-grid-done:not(.active) { border-color: #cceae7; background: #f0fafa; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-done:not(.active) .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-done:not(.active) .nav-link.item-tab { color: #0b7d72; }

/* Portail Questionnaires : pills complétude par set (teal clair complet / ambre à compléter, :not(.active)) + tuile décrémentale. */
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-todo:not(.active), .adm-ds .rfx-qtabs .qualification-set-item.is-qset-todo:not(.active) { border-color: #fcd34d; background: #fffbeb; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-todo:not(.active) .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-todo:not(.active) .nav-link.item-tab { color: #92400e; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-done:not(.active), .adm-ds .rfx-qtabs .qualification-set-item.is-qset-done:not(.active) { border-color: #cceae7; background: #f0fafa; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-done:not(.active) .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-done:not(.active) .nav-link.item-tab { color: #0b7d72; }

.rfx-ds .rfx-fin-reuse-err { flex-basis: 100%; margin-top: 4px; color: #dc2626; font-size: 0.78rem; }

/* Pill "à compléter" (grille/questionnaire) SÉLECTIONNÉ : rester AMBRE plus foncé (au lieu du teal générique .active) pour signaler la sélection sans masquer l'état "à compléter". Spécificité .item.classe.active (0,5,0) > .item.active (0,4,0). */
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-todo.active, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-todo.active,
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-todo.active, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-todo.active { border-color: #d97706; background: #fde9c8; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-todo.active .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-todo.active .nav-link.item-tab,
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-todo.active .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-todo.active .nav-link.item-tab { color: #7c2d12; }

/* Pill grille FACULTATIVE vide (3e état) : gris neutre — ni ambre (pas d'action requise) ni teal (pas encore commencée). */
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-optional:not(.active), .adm-ds .rfx-qtabs .qualification-set-item.is-grid-optional:not(.active) { border-color: #e2e8f0; background: #f8fafc; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-optional:not(.active) .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-optional:not(.active) .nav-link.item-tab { color: #64748b; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-optional.active, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-optional.active { border-color: #94a3b8; background: #eef2f7; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-grid-optional.active .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-grid-optional.active .nav-link.item-tab { color: #475569; }
/* idem pour les questionnaires facultatifs. */
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-optional:not(.active), .adm-ds .rfx-qtabs .qualification-set-item.is-qset-optional:not(.active) { border-color: #e2e8f0; background: #f8fafc; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-optional:not(.active) .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-optional:not(.active) .nav-link.item-tab { color: #64748b; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-optional.active, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-optional.active { border-color: #94a3b8; background: #eef2f7; }
.rfx-ds .rfx-qtabs .qualification-set-item.is-qset-optional.active .nav-link.item-tab, .adm-ds .rfx-qtabs .qualification-set-item.is-qset-optional.active .nav-link.item-tab { color: #475569; }

/* Tuile questionnaire — 3e état FACULTATIF : gris neutre (comme la tuile Synthèse facultative). */

/* Modale « Envoi en cours » plein cadre (send_button #3b) */
.rfx-send-hero img { max-width: 30px; max-height: 30px; }
.rfx-send-sending-title { text-align: center; font-size: 1.05rem; font-weight: 700; color: #2D3E50; margin: 0 auto 6px; }
.rfx-send-sending-text { text-align: center; font-size: 0.9rem; color: #64748b; margin: 0 auto; }

/* Pill obligatoire/facultatif à droite des tuiles portail (#7) */
.rfx-ds .rfx-fillmode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; white-space: nowrap; }
.rfx-ds .rfx-fillmode-pill.is-required { border-color: #cbd5e1; background: #eef2f7; color: #475569; }

/* #13 : grille portail dans .rfx-fin-grid-card reduite a ~3 lignes (flex:1 dans une colonne scrollante non bornee ->
   hauteur min-content). On revient a un scroll interne confortable a hauteur viewport, comme la grille hors card. */
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid { display: block; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid-alt { display: block; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid form { display: block; }
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid .table-responsive { flex: none; min-height: 0; max-height: 62vh; }

/* #7/#11 : badge mode de remplissage (portail), 3 couleurs distinctes */
/* 2026-09-23 : badge de remplissage allégé (padding réduit, rayon 3 px, graisse normale) et placé à GAUCHE des
   actions : c'est une information de cadrage, elle ne doit pas peser autant que les boutons. */
.rfx-ds .rfx-fillmode-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 3px; font-size: 0.74rem; font-weight: 500; white-space: nowrap; }
.rfx-ds .rfx-fillmode-badge.is-complete { color: #0f766e; background: #e6f5f3; border: 1px solid #b6e0da; }
.rfx-ds .rfx-fillmode-badge.is-partial { color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe; }
.rfx-ds .rfx-fillmode-badge.is-optional { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }
.rfx-ds .rfx-fillmode-help { color: inherit; opacity: 0.75; text-decoration: none; }
.rfx-ds .rfx-fillmode-help:hover { opacity: 1; }
/* #6 : pill oblig/facultatif collé à la tuile (et non au bout de la ligne) */

/* #12 : bandeau persistant "Offre remise par ... le ..." (teal) sous les sous-onglets Reponses */
.rfx-proposal-sent-banner { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 16px; background: #e6f5f3; border: 1px solid #b6e0da; border-radius: var(--r-lg, 10px); color: #0f766e; font-size: 0.88rem; font-weight: 600; }

/* #0 : meta "Round ferme par X le Y" a droite du bandeau d etat */
.rfx-ds .rfx-status-banner-meta { margin-left: auto; font-weight: 400; font-size: 0.82rem; opacity: 0.9; }

/* #14bis : encadre gris rappel des choix Parametrage a l etape Diffusion */
.rfx-ds .rfx-recap-params { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 12px 16px; margin-bottom: 16px; font-size: 0.85rem; color: #475569; }
.rfx-ds .rfx-recap-params-title { font-weight: 600; margin-bottom: 6px; color: #334155; }
.rfx-ds .rfx-recap-params-list { margin: 0 0 8px; padding-left: 18px; }
.rfx-ds .rfx-recap-params-modify { font-style: italic; color: #64748b; }

/* #8 : bouton telecharger + badge mode alignes (grilles alternatives portail) */
.rfx-ds .rfx-pbomgrid-altdl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* #10 : la grille alternatives se reduisait a ~4 lignes (wrapper .rfx-pbomgrid-alt en flex:1 dans la colonne flex -> hauteur restante minuscule car bcp de contenu au-dessus). flex:none => hauteur du contenu, la table garde son scroll interne 62vh. */
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid-alt { flex: none; }

/* #5a : mode partiel -> navy clair (moins violent que le violet) */
.rfx-ds .rfx-fillmode-badge.is-partial { color: #2f4b7c; background: #eef3fb; border-color: #d3e0f2; }

/* #10 (vrai fix) : la card grille etait plafonnee (.rfx-fin-grid-card max-height:70vh + card-body overflow:hidden) -> pour les alternatives, le contenu au-dessus (hint/consignes/bouton/onglets) rognait la table a 3-4 lignes. On repasse la card en flux normal : la table garde son scroll interne 62vh, la page scrolle pour le reste. */
.rfx-ds .rfx-fin-grid-card { display: block; max-height: none; }
.rfx-ds .rfx-fin-grid-card > .rfx-card-body { display: block; overflow: visible; min-height: 0; }
.rfx-ds .rfx-fin-grid-card #bom-container { display: block; }

/* #4b : barre d outils grille (pill + fleches) sticky en haut de la zone scrollable, sinon elle passe sous les sous-onglets au scroll de la page. */
.rfx-ds .rfx-fin-grid-card .rfx-pbomgrid-toolbar { position: sticky; top: 0; z-index: 4; background: #fff; padding-top: 6px; }

/* Toggles allowFree (livrables financiers, documents, contractuels) un peu plus gros + texte plus lisible — harmonisation. Ciblé sur .rfx-fin-allowfree-row (la case Obligatoire n est pas dans cette row). */
.rfx-ds .rfx-fin-allowfree { font-size: 0.92rem; }
.rfx-ds .rfx-fin-allowfree-row .rfx-fin-switch { width: 44px; height: 24px; }
.rfx-ds .rfx-fin-allowfree-row .rfx-fin-switch-track { border-radius: 12px; }
.rfx-ds .rfx-fin-allowfree-row .rfx-fin-switch-track::before { width: 20px; height: 20px; top: 2px; left: 2px; }
.rfx-ds .rfx-fin-allowfree-row .rfx-fin-switch input:checked + .rfx-fin-switch-track::before { transform: translateX(20px); }

/* #3 Points d'attention modale d'envoi : alignés à gauche systématiquement (sinon héritent le centre d'un ancêtre selon l'onglet) */
.rfx-send-warn, .rfx-send-warn ul, .rfx-send-warn li { text-align: left; }

/* #5 Documents deliverables counter tile: non-clickable status (no scroll target) */
.rfx-fin-todo-static { cursor: default; }
/* Les tuiles CLIQUABLES sont des <a> : la règle scopée `.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)`
   (spécificité 0,4,1) leur imposait le teal, alors que leur couleur dit leur état (ambre = il reste à faire, vert =
   terminé, gris = facultatif). D'où l'incohérence visible entre onglets : la tuile de l'onglet Documents est un <div>,
   elle sortait bien en ambre, celles de l'onglet Financier en teal. On égale la spécificité, sans !important. */
.rfx-ds .container-scrollable a.rfx-fin-todo-item:not(.btn) { color: #92670c; }
.rfx-ds .container-scrollable a.rfx-fin-todo-item:not(.btn):hover { color: #92670c; }
.rfx-ds .container-scrollable a.rfx-fin-todo-item.is-done { color: #0f766e; }
.rfx-ds .container-scrollable a.rfx-fin-todo-item.is-done:hover { color: #0f766e; }
.rfx-ds .container-scrollable a.rfx-fin-todo-item.rfx-fin-todo-item-neutral { color: #64748b; }
.rfx-ds .container-scrollable a.rfx-fin-todo-item.rfx-fin-todo-item-neutral:hover { color: #475569; }

/* #etape4 Deposit-mode control (buyer): label + select in the allowfree row (Documents/Financier/Contrat) */
/* #2 Label liste = meme typo que le label du toggle (.rfx-fin-allowfree) : 0.92rem, poids NORMAL, meme couleur.
   Selecteur a 2 classes (specificite renforcee) pour battre un eventuel `.x label { font-weight:600 }` global. */
.rfx-fin-allowfree-row .rfx-fin-deposit-label { font-size: 0.92rem; font-weight: 400; color: #415873; margin: 0; }
/* #3 Select : plus de cap a 420px (le libelle etait tronque) -> pleine largeur + ne se comprime pas ; le wrap peut passer a la ligne. */
.rfx-fin-deposit-select { font-size: 0.85rem; padding: 4px 10px; border: 1px solid #cbd5e1; border-radius: var(--r-md, 6px); background: #fff; color: #1e293b; max-width: 100%; flex: 0 0 auto; }
.rfx-fin-deposit-select:disabled { background: #f1f5f9; color: #64748b; }
/* #4 Wraps liste/toggle en flex -> le "?" reste centre verticalement avec le label ; wrap si trop long (#3). */
.rfx-fin-deposit-list-wrap, .rfx-fin-deposit-toggle-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Portail Financier : tuiles « depot libre » + « a faire » (synthese...) sur une meme ligne (#2). Deux conteneurs AJAX distincts presentes cote a cote. */
.rfx-ds .rfx-fin-todobar { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; }
.rfx-ds .rfx-fin-todo-item-neutral:first-child { margin-left: 0; }
/* Points d'attention (non bloquants), modale d'envoi acheteur (AO) + entreprise (Offre) : gris (fond clair + bord gris fonce) pour les distinguer des points bloquants ambres. */
.rfx-send-warn { background: #f7f8fa; border-color: #e5e7eb; }
.rfx-send-warn-title { color: #4b5563; }
.rfx-send-warn li { color: #6b7280; }
/* Portail Dossier — listes simples (Planning : jalons + rounds). Reskin DS Zone A. */
.rfx-ds .rfx-ov-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 991px) { .rfx-ds .rfx-ov-2col { grid-template-columns: 1fr; } }
.rfx-ds .rfx-ov-sched-list { display: flex; flex-direction: column; }
.rfx-ds .rfx-ov-sched-row { display: flex; align-items: baseline; gap: 14px; padding: 10px 4px; border-bottom: 1px solid #eef1f4; }
.rfx-ds .rfx-ov-sched-row:last-child { border-bottom: none; }
.rfx-ds .rfx-ov-sched-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.rfx-ds .rfx-ov-sched-label { font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-ov-sched-ico { color: #0d9488; font-size: 0.85rem; }
.rfx-ds .rfx-ov-sched-date { color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Historique des demandes d'offres (rounds) : libelle premier/round/dernier + date a droite + pills echeance/envoye sur le round le plus recent. */
.rfx-ds .rfx-ov-round-row { padding: 10px 4px; border-bottom: 1px solid #eef1f4; }
.rfx-ds .rfx-ov-round-row:last-child { border-bottom: none; }
.rfx-ds .rfx-ov-round-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rfx-ds .rfx-ov-round-label { color: #64748b; font-weight: 400; }
.rfx-ds .rfx-ov-round-strong { color: #2D3E50; font-weight: 600; }
.rfx-ds .rfx-ov-round-date { margin-left: auto; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rfx-ds .rfx-ov-round-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips DS generiques rendues disponibles hors .rfx-portal-home (page Dossier = .rfx-ds seul). Memes valeurs que .rfx-portal-home .rfx-chip. */
.rfx-ds .rfx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 500; padding: 4px 10px; border-radius: var(--r-sm, 3px); white-space: nowrap; }
.rfx-ds .rfx-chip i { font-size: 0.72rem; }
.rfx-ds .rfx-chip-deadline { background: rgba(224,89,46,0.10); color: #d6532a; }
.rfx-ds .rfx-chip-sent { background: rgba(15,157,88,0.10); color: #0f9d58; }
.rfx-ds .rfx-chip-req { background: rgba(13,148,136,0.10); color: #0d9488; }
/* Portail Dossier — Documents : tableau DS (4 sections). Colonnes Nom / Categorie / Round / Date / Taille / Actions. Rounds anterieurs grises. */
.rfx-ds .rfx-ov-doc-dlall { margin-left: auto; flex-shrink: 0; }
/* 2026-09-22 : badge des modèles de livrables listés avec les documents de référence (portail). */
.rfx-ds .rfx-ov-doc-tpl-tag { color: #0f766e; background: #e6f7f4; }
.rfx-ds .rfx-ov-doc-scroll { overflow-x: auto; }
.rfx-ds .rfx-ov-doc-table { display: flex; flex-direction: column; min-width: 640px; }
.rfx-ds .rfx-ov-doc-head, .rfx-ds .rfx-ov-doc-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 110px 110px 80px 64px; gap: 12px; align-items: center; padding: 9px 4px; }
.rfx-ds .rfx-ov-doc-head { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 600; border-bottom: 1px solid #e2e8f0; }
.rfx-ds .rfx-ov-doc-head-size { text-align: right; }
.rfx-ds .rfx-ov-doc-row { border-bottom: 1px solid #eef1f4; font-size: 0.9rem; }
.rfx-ds .rfx-ov-doc-row:last-child { border-bottom: none; }
.rfx-ds .rfx-ov-doc-row-past { opacity: 0.6; }
.rfx-ds .rfx-ov-doc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-ov-doc-fileicon { color: #64748b; flex-shrink: 0; }
.rfx-ds .rfx-ov-doc-label { overflow-wrap: anywhere; }
.rfx-ds .rfx-ov-doc-cat, .rfx-ds .rfx-ov-doc-round, .rfx-ds .rfx-ov-doc-date { color: #64748b; font-size: 0.85rem; }
.rfx-ds .rfx-ov-doc-size { color: #64748b; font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.rfx-ds .rfx-ov-doc-actions { display: flex; gap: 14px; justify-content: flex-end; }
.rfx-ds .rfx-ov-doc-actions a { color: #0d9488; }
.rfx-ds .rfx-ov-doc-actions a:hover { color: #0a6b63; }
/* Portail Dossier — Intervenants : listes compactes de personnes (2 col, calque acheteur _display_contributors) + encadres d'ajout. */
.rfx-ds .rfx-ov-ct-list { display: flex; flex-direction: column; }
.rfx-ds .rfx-ov-ct-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 6px; border-bottom: 1px solid #eef1f4; }
.rfx-ds .rfx-ov-ct-row:last-child { border-bottom: none; }
.rfx-ds .rfx-ov-ct-owner { background: #f6fbfa; border: 1px solid #cdece8; border-radius: 6px; margin-bottom: 6px; }
.rfx-ds .rfx-ov-ct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rfx-ds .rfx-ov-ct-name { font-weight: 600; color: #2D3E50; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rfx-ds .rfx-ov-ct-role { color: #64748b; font-size: 0.85rem; }
.rfx-ds .rfx-ov-ct-coord { flex-shrink: 0; background: none; border: none; padding: 4px 6px; color: #0d9488; cursor: pointer; }
.rfx-ds .rfx-ov-ct-coord:hover { color: #0a6b63; }
.rfx-ds .rfx-ov-ppl-info { color: #94a3b8; cursor: help; }
.rfx-ds .rfx-ov-ppl-pending { color: #e0592e; cursor: help; }
.rfx-ds .rfx-ov-addblock { border: 1px solid #cdece8; background: #f2faf9; border-radius: var(--r-lg, 10px); padding: 14px 16px; margin-top: 16px; }
.rfx-ds .rfx-ov-addblock-intro { display: flex; align-items: flex-start; gap: 10px; color: #2D3E50; font-size: 0.9rem; line-height: 1.45; }
.rfx-ds .rfx-ov-addblock-intro > i { color: #0d9488; margin-top: 3px; flex-shrink: 0; }
.rfx-ds .rfx-ov-addblock-action { margin-top: 12px; }
.rfx-ds .rfx-ov-selectbox + .rfx-ov-addblock-action { margin-top: 0; }
.rfx-ds .rfx-ov-selectbox { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding: 2px 12px; margin-top: 12px; }
.rfx-ds .rfx-ov-select-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; margin: 0; border-bottom: 1px solid #eef1f4; cursor: pointer; }
.rfx-ds .rfx-ov-select-row:last-child { border-bottom: none; }
.rfx-ds .rfx-ov-select-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rfx-ds .rfx-ov-select-topline { display: flex; align-items: baseline; gap: 12px; }
.rfx-ds .rfx-ov-select-name { font-weight: 600; color: #2D3E50; display: flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-ov-select-mail { margin-left: auto; font-size: 0.8rem; color: #94a3b8; white-space: nowrap; overflow-wrap: anywhere; }
.rfx-ds .rfx-ov-select-role { font-size: 0.85rem; color: #64748b; }
/* Portail Dossier — Confidentialite (NDA) : texte de l'accord, statuts (soumis/accepte/refuse), docs, case d'acceptation. */
.rfx-ds .rfx-nda-text { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding: 14px 18px; max-height: 420px; overflow-y: auto; font-size: 0.9rem; line-height: 1.55; color: #2D3E50; }
.rfx-ds .rfx-nda-accepted { margin-top: 12px; display: flex; align-items: center; gap: 10px; color: #0f766e; font-weight: 600; font-size: 0.98rem; }
.rfx-ds .rfx-nda-accepted i { color: #0d9488; font-size: 1.25rem; }
.rfx-ds .rfx-nda-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm, 3px); font-size: 0.9rem; font-weight: 500; margin-bottom: 10px; }
.rfx-ds .rfx-nda-status-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #0f766e; }
.rfx-ds .rfx-nda-status-pending { background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
.rfx-ds .rfx-nda-status-ko { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.rfx-ds .rfx-nda-doc { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #eef1f4; border-radius: var(--r-md, 6px); margin-bottom: 10px; }
.rfx-ds .rfx-nda-doc-label { flex: 1; min-width: 0; font-weight: 600; color: #2D3E50; overflow-wrap: anywhere; }
.rfx-ds .rfx-nda-doc-ic { color: #64748b; }
.rfx-ds .rfx-nda-doc-locale, .rfx-ds .rfx-nda-doc-size { color: #64748b; font-size: 0.85rem; white-space: nowrap; }
.rfx-ds .rfx-nda-doc-actions { display: flex; gap: 12px; }
.rfx-ds .rfx-nda-doc-actions a { color: #0d9488; }
.rfx-ds .rfx-nda-doc-actions a:hover { color: #0a6b63; }
.rfx-ds .rfx-nda-comment { margin: 4px 0 14px; font-size: 0.9rem; color: #2D3E50; }
.rfx-ds .rfx-nda-comment-label { font-weight: 600; color: #b91c1c; }
.rfx-ds .rfx-nda-list-title { font-size: 0.9rem; color: #2D3E50; margin: 14px 0 8px; }
.rfx-ds .rfx-nda-check { padding: 14px 2px 4px; }
.rfx-ds .rfx-nda-langtabs { margin-top: 6px; }
.rfx-ds .rfx-nda-langpick .rfx-nda-langpick-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Portail Dossier — bandeau d'intention (au-dessus des onglets) + etapes numerotees (NDA type fichier) + case d'acceptation agrandie. */
.rfx-ds .rfx-intent-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--r-lg, 10px); color: #0f766e; font-size: 0.9rem; font-weight: 500; }
.rfx-ds .rfx-intent-banner i { color: #0d9488; }
.rfx-ds .rfx-steps { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }
.rfx-ds .rfx-step { display: flex; align-items: flex-start; gap: 12px; }
.rfx-ds .rfx-step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #0d9488; color: #fff; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.rfx-ds .rfx-step-txt { padding-top: 3px; color: #2D3E50; font-size: 0.9rem; line-height: 1.45; }
.rfx-ds .rfx-nda-check .form-check { display: flex; align-items: center; padding-left: 0; }
.rfx-ds .rfx-nda-check label { margin: 0; font-size: 0.98rem !important; font-weight: 700 !important; color: #2D3E50; line-height: 1.4; }
.rfx-ds .rfx-nda-check input[type="checkbox"] { position: static; margin: 0 10px 0 0; width: 20px !important; height: 20px !important; min-width: 20px; accent-color: #0d9488; flex-shrink: 0; }
/* Portail Dossier — NDA type fichier : etapes indentees + encadre document (titre integre) + note simple (ex-etape 4). */
.rfx-ds .rfx-steps-indent { padding-left: 24px; }
.rfx-ds .rfx-nda-docbox { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); padding: 2px 14px; margin-top: 10px; background: #fff; max-width: 800px; }
.rfx-ds .rfx-nda-docbox-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; font-weight: 600; padding: 9px 0 7px; border-bottom: 1px solid #eef1f4; }
.rfx-ds .rfx-nda-docrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eef1f4; }
.rfx-ds .rfx-nda-docrow:last-child { border-bottom: none; }
.rfx-ds .rfx-nda-step-action { margin-top: 10px; }
.rfx-ds .rfx-nda-info-note { display: flex; align-items: flex-start; gap: 8px; color: #475569; font-size: 0.88rem; line-height: 1.45; margin: 8px 0 4px 24px; padding: 10px 14px; background: #f0f3f7; border: 1px solid #e2e7ee; border-radius: var(--r-lg, 10px); }
.rfx-ds .rfx-nda-info-note i { color: #94a3b8; margin-top: 3px; }
/* ===== AO portail · Dossier > Présentation (reskin DS) ===== */
/* Barre de langues : pills (drapeau seul, + libellé sur la langue active) */
.rfx-ds .rfx-ov-langpills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.rfx-ds .rfx-ov-langpill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #2D3E50; font-size: 0.85rem; line-height: 1.2; text-decoration: none; transition: background .15s, border-color .15s; }
.rfx-ds .rfx-ov-langpill:hover { background: #f0fdfa; border-color: #99f6e4; color: #0f766e; text-decoration: none; }
.rfx-ds .rfx-ov-langpill.active { background: #e6f7f4; border-color: #5eead4; color: #0f766e; font-weight: 600; }
.rfx-ds .rfx-ov-langpill img { display: block; border-radius: 2px; }
.rfx-ds .rfx-ov-langpill:focus { outline: none; }
.rfx-ds .rfx-ov-langpill:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }

/* Contenu riche des sections de présentation (saisi en éditeur WYSIWYG côté acheteur) */
.rfx-ds .rfx-ov-pres-content { font-size: 0.92rem; line-height: 1.6; color: #2D3E50; overflow-x: auto; }
.rfx-ds .rfx-ov-pres-content > *:first-child { margin-top: 0; }
.rfx-ds .rfx-ov-pres-content > *:last-child { margin-bottom: 0; }
.rfx-ds .rfx-ov-pres-content h1, .rfx-ds .rfx-ov-pres-content h2, .rfx-ds .rfx-ov-pres-content h3,
.rfx-ds .rfx-ov-pres-content h4, .rfx-ds .rfx-ov-pres-content h5, .rfx-ds .rfx-ov-pres-content h6 { font-size: 1rem; font-weight: 600; color: #2D3E50; margin: 16px 0 8px; }
.rfx-ds .rfx-ov-pres-content p { margin: 0 0 10px; }
.rfx-ds .rfx-ov-pres-content ul, .rfx-ds .rfx-ov-pres-content ol { margin: 0 0 10px; padding-left: 22px; }
.rfx-ds .rfx-ov-pres-content li { margin-bottom: 4px; }
.rfx-ds .rfx-ov-pres-content a { color: #0f766e; }
.rfx-ds .rfx-ov-pres-content img { max-width: 100%; height: auto; }
.rfx-ds .rfx-ov-pres-content table { max-width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.rfx-ds .rfx-ov-pres-content table td, .rfx-ds .rfx-ov-pres-content table th { border: 1px solid #e2e8f0; padding: 6px 10px; }
.rfx-ds .rfx-ov-pres-content blockquote { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid #99f6e4; background: #f8fafc; }
/* Aide "?" à droite des pills de langue (acheteur, Paramétrage > Présentation, mode édition uniquement) */
.rfx-ds .rfx-lang-help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: #64748b; font-size: 0.72rem; font-weight: 600; line-height: 1; cursor: help; align-self: center; margin-left: 2px; }
.rfx-ds .rfx-lang-help:hover { border-color: #0d9488; color: #0b7d73; background: #f0fafa; }

/* Variante « bloc » de la bannière d'intention : confirmation multi-lignes avec étapes numérotées
   (message flash « … a été informée de votre intention de répondre »). */
.rfx-ds .rfx-intent-banner-block { align-items: flex-start; padding: 12px 16px; }
.rfx-ds .rfx-intent-banner-block > i { margin-top: 3px; flex-shrink: 0; }
.rfx-ds .rfx-intent-banner-block strong { font-weight: 600; }
.rfx-ds .rfx-intent-banner-block ol { margin: 6px 0 0; padding-left: 22px; font-weight: 400; }
.rfx-ds .rfx-intent-banner-block li { margin-bottom: 3px; }
.rfx-ds .rfx-intent-banner-block li:last-child { margin-bottom: 0; }
/* Toolbar portail — paire de boutons "Je souhaite répondre" / "Je ne souhaite pas répondre" :
   rangée centrée (remplace nav-pills nav-fill + li fantôme de 33% qui décalait le centrage). */
.rfx-ds .rfx-intent-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }/* Le refus passe en bouton discret (ds-btn-ghost) : le vert « Je souhaite répondre » doit rester dominant.
   Métriques alignées sur le .btn Bootstrap voisin pour que les deux boutons aient la même hauteur. */
/* Les deux boutons d'intention forment une PAIRE : ils doivent partager hauteur, typo et rayon.
   Le refus est un .ds-btn-ghost (DS) et l'acceptation un .btn.btn-success (Bootstrap) : sans cette
   règle ils divergeaient (rayon 4px vs 2px, police 0.95rem vs 1rem). Rayon aligné sur 6px = valeur
   retenue pour le futur token --r-md, déjà appliquée au bouton « Poser une question » du portail. */
.rfx-ds .rfx-intent-actions .ds-btn-ghost,
.rfx-ds .rfx-intent-actions .btn { padding: 7px 18px; font-size: 0.9rem; font-weight: 500; line-height: 1.5; min-height: 38px; border-radius: var(--r-md, 6px); display: inline-flex; align-items: center; justify-content: center; }
.rfx-ds .rfx-intent-actions .btn-success { border-radius: var(--r-md, 6px); }
/* ===== Échanges PORTAIL entreprise — alignement sur l'Échanges acheteur (.rfx-q-*) =====
   Seules différences de structure : pas de colonne « Entreprise » (6 colonnes au lieu de 7)
   et une action primaire « Poser une question » dans la barre d'outils. */
.rfx-ds .rfx-q-table-portal .rfx-q-head,
.rfx-ds .rfx-q-table-portal .rfx-q-row { grid-template-columns: 88px 2fr 100px 1.1fr 1fr 96px; }
/* Groupe de droite : recherche + action. margin-left:auto pour rester à droite même quand le
   toggle n'est pas rendu (liste vide) — sinon space-between le collerait à gauche. */
.rfx-ds .rfx-q-toolbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Variante désactivée du bouton (période de dépôt terminée) : même gabarit, non cliquable. */
/* Action « Poser une question » : bouton AUTONOME (ne dépend pas de .ds-btn-primary — le texte y
   ressortait invisible sur cet écran). Couleurs et métriques posées explicitement. */
/* CAUSE identifiée : .rfx-ds .container-scrollable a:not(.btn):not(.nav-link) (l.16324) teinte TOUS les
   liens en teal avec une spécificité (0,4,1) supérieure -> texte teal sur fond teal, bouton illisible.
   L'ancien bouton y échappait parce qu'il portait la classe .btn. Même parade que #deleteItemModal (l.20254). */
.rfx-ds .rfx-q-btn-ask { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 16px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #0d9488; color: #ffffff !important; font-size: 0.85rem; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.rfx-ds .rfx-q-btn-ask span, .rfx-ds .rfx-q-btn-ask i { color: inherit; }
.rfx-ds a.rfx-q-btn-ask:hover, .rfx-ds a.rfx-q-btn-ask:focus { background: #0b7d72; border-color: #0b7d72; color: #ffffff !important; text-decoration: none; }
.rfx-ds a.rfx-q-btn-ask:focus { outline: none; }
/* Variante inactive : round clos ou période de dépôt terminée. Affichée (avec tooltip) plutôt que
   masquée, pour que l'entreprise comprenne pourquoi elle ne peut pas poser de question. */
.rfx-ds .rfx-q-btn-ask-off { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8 !important; cursor: not-allowed; }
/* Taille du fichier dans les lignes de documents du drawer portail (info absente côté acheteur,
   conservée ici car elle existait dans l'ancien drawer). .rfx-q-doc-row est un flex : ajout sans risque. */
#rfpMessageDrawer .rfx-q-doc-size { color: #94a3b8; flex-shrink: 0; font-size: 0.8rem; }
/* ===== Header AO portail : retour + fil d'ariane =====
   Le lien de retour existait mais vivait dans le rail gauche, reduit a 0x0 par la regle l.16236 :
   il n'a jamais ete visible. On le remonte dans le header. Le header AO est BLANC sous .rfx-ds
   (le titre y est force en navy par la regle l.16032), d'ou une reprise du style des fils d'ariane
   du portail (.rfxp-*) qui, eux, sont scopes .rfx-portal-form et donc inapplicables ici. */
/* En-tete compact : une seule ligne. .rfx-ao-head-titles empile fil d'ariane + nom de l'AO a droite
   de la fleche, comme .rfxp-head-titles sur la liste des AO -> plus de ligne supplementaire qui
   decalait tout le header vers le bas. */
.rfx-ds .rfx-portal-header .rfx-ao-head { display: flex; align-items: center; gap: 16px; padding: 0 12px 0 0; }
.rfx-ds .rfx-portal-header .rfx-ao-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.rfx-ds .rfx-portal-header .rfx-ao-head-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rfx-ds .rfx-portal-header .rfx-ao-head-right { margin-left: auto; flex-shrink: 0; }
/* Le nom de l'AO passe en 1.5rem (au lieu du .h1 par defaut) : c'est ce qui rend le bloc compact. */
.rfx-ds .rfx-portal-header .rfx-ao-head-name { font-size: 1.35rem !important; line-height: 1.15; padding-top: 0 !important; }

.rfx-ds .rfx-portal-header .rfx-ao-back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #e7ecf1; border-radius: var(--r-md, 6px); background: #fff; color: #64748b; font-size: 0.8rem; text-decoration: none; transition: border-color .12s, color .12s, background .12s; }
.rfx-ds .rfx-portal-header a.rfx-ao-back:hover { border-color: #0d9488; color: #0d9488; background: rgba(13,148,136,0.07); text-decoration: none; }
.rfx-ds .rfx-portal-header a.rfx-ao-back:focus { outline: none; }
.rfx-ds .rfx-portal-header .rfx-ao-bc { display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.rfx-ds .rfx-portal-header a.rfx-ao-bc-parent { font-size: 0.74rem; font-weight: 400; color: #64748b; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.rfx-ds .rfx-portal-header a.rfx-ao-bc-parent:hover { color: #0d9488; text-decoration: underline; }
.rfx-ds .rfx-portal-header .rfx-ao-bc-sep { color: #cbd5e1; font-size: 0.8rem; flex-shrink: 0; line-height: 1; }

/* ===== Questionnaire général (portail entreprise) : UNE CARD PAR QUESTION =====
   Le libellé de chaque question est fabriqué côté PHP sous la forme '<h2>Nom</h2>Description'
   (SupplierSourceQuestionsType, EditorLargeLabelType) : on ne peut donc pas le scinder pour en faire
   un en-tête de card. On le laisse dans le corps et on lui donne l'allure d'un titre de card. */
.rfx-ds .rfx-doc-hint .rfx-q-hint-req { margin-top: 6px; color: #0f766e; font-weight: 500; }
.rfx-ds .rfx-qst-list { display: flex; flex-direction: column; gap: 14px; }
.rfx-ds .rfx-qst-card { margin: 0; }
/* Le theme `editor_large_label_widget` (form/fields.html.twig l.28-35) rend
   '<div class="pb-2"><h2>Nom</h2>Description</div><div class="pb-3">champ</div>' : PAS de <label>, et la
   description est un NOEUD DE TEXTE nu -> impossible a encadrer seule. On encadre donc le .pb-2 (fond gris
   clair) et on fait RESSORTIR le h2 par-dessus (fond blanc + marges negatives) pour obtenir un titre
   souligne pleine largeur, comme l'en-tete de la card Documents. */
.rfx-ds .rfx-qst-card .rfx-card-body { padding: 0 !important; }
.rfx-ds .rfx-qst-card .pb-2 { background: #f8fafb; margin: 0; padding: 10px 20px 12px; color: #64748b; font-size: 0.85rem; line-height: 1.5; }
.rfx-ds .rfx-qst-card h2 { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; margin: -10px -20px 10px !important; padding: 11px 20px !important; font-size: 1rem !important; font-weight: 600 !important; color: #2D3E50 !important; line-height: 1.3; }
/* Filet trace en ::after (et non en border-bottom) pour qu'il DEMARRE au bord gauche de l'icone
   et s'arrete symetriquement a droite, alors que le bandeau blanc, lui, reste pleine largeur. */
.rfx-ds .rfx-qst-card h2::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: rgba(45,62,80,0.22); }
.rfx-ds .rfx-qst-card h2::before { content: "\f059"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.95rem; color: #0d9488; flex-shrink: 0; }
.rfx-ds .rfx-qst-card .pb-3 { padding: 14px 20px 4px !important; }
/* Le .form-group.row qui enveloppe le champ apporte un padding-top d'environ 14px : neutralise. */
.rfx-ds .rfx-qst-card .form-group { padding-top: 0 !important; margin-top: 0 !important; }
/* Card Documents : de l'air au-dessus des intitules de colonnes et du bouton d'ajout. */
.rfx-ds .rfx-qst-card-docs .rfx-card-body { padding: 16px 20px 16px !important; }
.rfx-ds .rfx-qst-card-docs .add_element_link { margin-top: 14px; }
/* Bordure de l'editeur : app.css:1409 pose #ced4da sur les 4 cotes, mais app.css:2045 remplace le bas par
   du teal DANS #supplier-source-content. On realigne le bas sur les 3 autres cotes... */
.rfx-ds #supplier-source-content .cke_textarea_inline { border-bottom-color: #ced4da !important; }
/* ...et on laisse le ROUGE gagner en erreur (app.css:1405 met les 4 cotes en #dc3545). */
.rfx-ds #supplier-source-content textarea.is-invalid ~ div.cke_textarea_inline { border-bottom-color: #dc3545 !important; }
/* Erreur : seule la card CONCERNEE est soulignee + message en rouge sous le champ, le theme global
   (form/bootstrap_4.html.twig l.191-198) ne rendant qu'une petite icone « ! » a popover. */
.rfx-ds .rfx-qst-card-err { border-color: #e2939b; }
.rfx-ds .rfx-qst-err { margin: 0 20px 12px; color: #c0392b; font-size: 0.82rem; line-height: 1.45; }
.rfx-ds .rfx-qst-err i { margin-right: 5px; font-size: 0.78rem; }

/* ===== Identite (portail entreprise) : 2 colonnes + 1 card par section =====
   Gauche = identite de l'entreprise, droite = la question « rattachee a un groupe ? » qui deroule SES
   sections dans la meme colonne (demande Olivier : remplir le vide de droite). Les collapses par bloc
   ont ete retires ; seul le collapse du conteneur parent subsiste, c'est lui que pilote le Oui/Non. */
.rfx-ds .rfx-idt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rfx-ds .rfx-idt-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rfx-ds .rfx-idt-card { margin: 0; }
.rfx-ds .rfx-idt-card .rfx-card-body { padding: 14px 20px 10px; }
/* La question Oui/Non n'a pas besoin de la meme respiration que les blocs de champs. */
.rfx-ds .rfx-idt-card-parentq .rfx-card-body { padding: 12px 20px; }
.rfx-ds .rfx-idt-card-parentq .form-group { margin-bottom: 0; }
/* Les widgets de bloc portent 'border-top border-info' en dur (choisi cote Twig avec la variante
   'border-danger' en erreur) : dans une card ce filet haut fait doublon avec l'en-tete -> neutralise,
   mais UNIQUEMENT la variante info, pour que le rouge d'erreur reste visible. */
.rfx-ds .rfx-idt-card .border-top.border-info { border-top: 0 !important; }
.rfx-ds .rfx-idt-card-err { border-color: #e2939b; }
/* Sous 1200px les 2 colonnes s'empilent : le groupe passe sous l'entreprise. */
@media (max-width: 1199.98px) {
    .rfx-ds .rfx-idt-2col { grid-template-columns: 1fr; }
}

/* ===== Corrections Identite / Questionnaire (retours Olivier) ===== */
/* 1) app.css:2045 pose un border-bottom teal (#17a2b8) sur TOUS les champs de #supplier-source-content
      (inputs, selects, custom-file-label, editeur). On aligne ce bas sur les 3 autres cotes (#ced4da,
      cf. app.css:1409) -- surtout PAS plus clair, l'erreur commise au premier essai. */
.rfx-ds #supplier-source-content .bootstrap-select:not(.is-invalid) > select,
.rfx-ds #supplier-source-content .bootstrap-select.form-control:not(.is-invalid),
.rfx-ds #supplier-source-content input[type="text"]:not(.is-invalid),
.rfx-ds #supplier-source-content input[type="number"]:not(.is-invalid),
.rfx-ds #supplier-source-content label.custom-file-label:not(.is-invalid),
.rfx-ds #supplier-source-content textarea:not(.is-invalid) ~ div.cke_textarea_inline { border-bottom-color: #ced4da !important; }
/* 2) Les options des dropdowns bootstrap-select sont des <a> : elles heritaient du teal impose par
      app-ds.css:16324 ('.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)'). Retour au texte normal. */
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a { color: #212529 !important; }
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a:hover,
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a:focus { color: #212529 !important; }
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu .selected a { color: #0f766e !important; }
/* 3) Question « rattachee a un groupe ? » : la ligne est un .form-group.row avec
      'legend.radio-label.col-md-4.col-form-label' (le libelle) + 'div.col-md-8' (les radios).
      On rebalance 60/40 au profit du libelle pour qu'il tienne sur une ligne.
      /!\ On cible le LEGEND (.col-form-label), surtout PAS tous les <label> : ma 1re version
      touchait aussi les labels des radios et faisait disparaitre le Oui/Non. */
.rfx-ds .rfx-idt-card-parentq .rfx-card-body legend.col-form-label { flex: 0 0 60%; max-width: 60%; }
.rfx-ds .rfx-idt-card-parentq .rfx-card-body legend.col-form-label ~ [class*="col-"] { flex: 0 0 40%; max-width: 40%; }
/* NOTE : ne pas toucher aux .row INTERNES aux cards (padding des colonnes / margin-left) : cela casse
   la grille Bootstrap des blocs de champs (essaye et annule le 2026-08-24). */
/* 4) Colonne de droite : les cards du groupe vivent DANS #supplier-source-parent-container, donc le gap
      de .rfx-idt-col ne s'appliquait pas entre elles -- elles etaient collees. */
.rfx-ds .rfx-idt-col #supplier-source-parent-container.show { display: flex; flex-direction: column; gap: 14px; }
.rfx-ds .rfx-idt-col #supplier-source-parent-container { margin-top: 14px; }


/* ===== Selecteur d'entreprise du portail (etape 6) =====
   Un contact peut representer plusieurs entites chez un meme acheteur. Rendu seulement au-dela d'une.
   Pose dans le bandeau .rfxp-head (hub, liste des AO, 4 rubriques) -> visible en permanence. */
.rfx-ds .rfxp-supplier-pick { display: inline-flex; align-items: center; margin-left: 18px; }
.rfx-ds .rfxp-supplier-pick-btn,
.rfx-ds .rfxp-supplier-pick-locked { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid #e7ecf1; border-radius: 6px; background: #fff; color: #2D3E50; font-size: 0.82rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.rfx-ds a.rfxp-supplier-pick-btn:hover { border-color: #0d9488; color: #0b7d73; background: rgba(13,148,136,0.06); text-decoration: none; }
.rfx-ds a.rfxp-supplier-pick-btn:focus { outline: none; }
.rfx-ds .rfxp-supplier-pick i { color: #0d9488; font-size: 0.78rem; }
.rfx-ds .rfxp-supplier-pick-caret { color: #94a3b8 !important; font-size: 0.62rem !important; }
/* Variante verrouillee (page d'un AO) : l'entite est imposee, on le montre par un rendu inerte. */
.rfx-ds .rfxp-supplier-pick-locked { background: #f8fafb; color: #64748b; cursor: default; }
.rfx-ds .rfxp-supplier-pick-locked i { color: #94a3b8; }
.rfx-ds .rfxp-supplier-menu { border: 1px solid #e7ecf1; border-radius: 6px; box-shadow: 0 6px 18px rgba(45,62,80,0.10); padding: 6px 0; min-width: 240px; }
.rfx-ds .rfxp-supplier-menu-head { padding: 4px 14px 8px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.rfx-ds .rfxp-supplier-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 0.85rem; color: #2D3E50 !important; }
.rfx-ds .rfxp-supplier-item:hover { background: #f0fafa; color: #0b7d73 !important; }
.rfx-ds .rfxp-supplier-item.active { background: #e6f7f4; color: #0f766e !important; font-weight: 600; }
.rfx-ds .rfxp-supplier-item i { color: #0d9488; font-size: 0.72rem; }
/* Bandeau du hub : explique POURQUOI il y a un choix, et porte le selecteur. Teinte teal comme les
   autres bandeaux d'information du portail (.rfx-callout / .rfx-doc-hint). */
.rfx-ds .rfx-hub-supplier-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 12px 16px; background: #f0fafa; border: 1px solid #cceae7; border-radius: 8px; }
.rfx-ds .rfx-hub-supplier-banner-icon { color: #0d9488; font-size: 0.95rem; flex-shrink: 0; }
.rfx-ds .rfx-hub-supplier-banner-text { flex: 1 1 260px; min-width: 0; color: #415873; font-size: 0.88rem; line-height: 1.5; }
.rfx-ds .rfx-hub-supplier-banner .rfxp-supplier-pick { margin-left: 0; flex-shrink: 0; }
.rfx-ds .rfx-hub-supplier-banner .rfxp-supplier-pick-btn { border-color: #9fd9d2; background: #fff; }

/* Motif de la sollicitation, SOUS la pastille « Mise a jour demandee » d'une tuile du hub.
   .rfxp-pill est en position:absolute (top:16px right:16px) : le motif doit l'etre aussi, sinon il
   remonte en tete de flux et s'affiche au-dessus de l'icone (defaut constate). */
.rfx-portal-hub .rfxp-card .rfxp-pill-reason { position: absolute; top: 44px; right: 16px; left: auto; max-width: 62%; display: flex; align-items: flex-start; justify-content: flex-end; text-align: right; gap: 6px; color: #92670a; font-size: 0.74rem; line-height: 1.35; }
.rfx-portal-hub .rfxp-card .rfxp-pill-reason i { margin-top: 2px; flex-shrink: 0; font-size: 0.7rem; }
/* La tuile doit reserver la place des deux lignes (pastille + motif). */
.rfx-portal-hub .rfxp-card.is-updreq { padding-top: 30px; }

/* Note de la liste des AO : rappelle que la liste couvre TOUTES les entites representees. */
/* margin auto : la note est un enfant direct du conteneur PLEINE LARGEUR .rfxl-list-wide, elle doit etre
   centree comme les cartes. Sans cela, ce margin-left:0 (specificite superieure, declare plus bas dans le
   fichier que .rfxl-list-wide > *) la collait au bord gauche. */
.rfx-ds .rfx-list-multi-note { margin: 0 auto 18px; }

/* ═══ Sous-onglets RFx (`#rfp-toolbar`) — harmonisation avec la ligne d'onglets, 2026-08-25 ═══
   Un seul id couvre les TROIS barres, portail ET acheteur : « Dossier » du portail
   (rfp_overview_main_navbar), « Offres » du portail (rfp_proposal_proposal_navbar) et « Offres » de
   l'ACHETEUR (rfp_results_iteration_navbar). Verifie : aucun autre template ne porte cet id.
   ⚠ On ne touche PAS aux regles legacy d'app.css (l. 488 et 558-582) : elles pilotent aussi les barres
   Projet et Contrat (#project-info-navbar, #project-management-navbar, #project-results-navbar) ainsi
   que la variante `.nav-link-hilight`, absente des trois barres RFx. La surcharge se fait ici PAR L'ID,
   qui l'emporte sur n'importe quel nombre de classes — le blast radius est donc limite au RFx.
   1. Repos : la graisse legacy 200 est trop fine a 0.8rem, et le saut 200 -> 600 a l'activation est
      brutal → 500, plus le gris slate du DS (le legacy #6c757d ne venait d'aucune palette).
   2. Survol : filet gris clair, JAMAIS le soulignement navy plein — meme raison qu'au niveau 1.
   3. Actif : navy plein. Le navy (et non le teal) est VOLONTAIRE : l'accent de marque reste a la
      navigation de niveau 1, le niveau 2 prend un neutre foncé — deux teals concurrents brouilleraient
      la hierarchie.
   Le `border-bottom: 2px solid transparent` au repos supprime au passage le saut de 2px qui decalait
   la ligne a chaque survol (le filet n'existait qu'a l'etat survole/actif). */
#rfp-toolbar .nav-link.item-tab { color: #64748b; font-weight: 500; border-bottom: 2px solid transparent; border-radius: 0; }
#rfp-toolbar .nav-link.item-tab:hover:not(.active):not(.disabled) { color: #2D3E50; border-bottom-color: #cbd5e1; }
#rfp-toolbar .nav-link.item-tab.active { color: #2D3E50; font-weight: 600; border-bottom-color: #2D3E50; background-color: transparent; }
/* Onglet desactive : nettement plus clair, aligne sur `.rfx-ds #mainRfpTabs .nav-link.disabled`. Avant,
   il partageait quasiment la couleur d'un onglet simplement inactif — les deux etats se confondaient. */
#rfp-toolbar .nav-link.item-tab.disabled { color: #cbd5e1; font-weight: 500; }

/* Alignement vertical des sous-onglets avec le dropdown de round (retour Olivier 2026-08-27).
   Cause : app.css pose `.item-toolbar .nav-link { padding: 0 1rem 0.7rem 1rem }` - AUCUN padding en
   haut, 0.7rem en bas. `align-items:center` centre la BOITE du lien, mais le texte, colle en haut de
   cette boite, se retrouve donc au-dessus du centre. Avec `line-height: 0.7rem` (force par
   `#rfp-toolbar.item-toolbar a`) et un dropdown de 38px, le texte des onglets montait ~6,6px trop haut.
   On rend le padding SYMETRIQUE : ecart ramene a ~1px, et la boite (35,6px) reste sous les 38px du
   dropdown - la hauteur de la bande ne bouge pas.
   /!\ Scope `.rfx-diffusion-row` OBLIGATOIRE : `#rfp-toolbar` sert AUSSI aux barres « Dossier » et
   « Offres » du PORTAIL, qui n'ont pas de dropdown a cote et ne doivent pas bouger. Verifie : la bande
   et cet id ne coexistent que dans `rfp_results_iteration_navbar.html.twig`. */
.rfx-ds .rfx-diffusion-row #rfp-toolbar .nav-link.item-tab { padding-top: 0.7rem; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Etape 2 du chantier onglets (2026-08-25) — EN-TETES des espaces de travail Projets / Contrats /
   Entreprises, alignes sur la cible commune deja appliquee aux hubs (`.ds-tab`).

   Ce qui change (ETATS uniquement — les metriques padding/margin/taille restent intactes) :
     - repos  : gris #6b7a8d -> #8fa1b3, graisse 400 -> 500 ;
     - survol : texte teal -> #415873, et filet GRIS au lieu du filet teal ;
     - actif  : texte teal -> navy #2D3E50, filet teal CONSERVE.
   Motif : le survol peignait exactement le meme soulignement teal que l'actif (`::after` en scaleX(1)
   sur les DEUX etats, l. 506/510, 11668/11670, 11719) — on ne savait plus quel onglet etait selectionne.

   ⚠️ `:not(.prj-list-tabs)` sur Projets : `project/index.html.twig` porte les DEUX classes
   (`prj-list-tabs prj-tabs`), donc la barre d'onglets de la COLONNE DE GAUCHE herite de `.prj-tabs`.
   Sans cette garde, on toucherait a une zone aux metriques calees au plus juste (etape 3). Contrats et
   Entreprises n'ont pas ce cumul (verifie : leurs listes ne portent que `ctr-list-tabs`/`spl-list-tabs`).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Repos */
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link,
.ctr-tabs.nav-tabs .nav-link,
.spl-tabs.nav-tabs .nav-link { color: #8fa1b3; font-weight: 500 !important; }

/* Survol : texte plus fonce + filet GRIS. Le filet teal est reserve a l'onglet ACTIF. */
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link:hover:not(.active),
.ctr-tabs.nav-tabs .nav-link:hover:not(.active),
.spl-tabs.nav-tabs .nav-link:hover:not(.active) { color: #415873 !important; font-weight: 500 !important; }
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link:hover:not(.active)::after,
.ctr-tabs.nav-tabs .nav-link:hover:not(.active)::after,
.spl-tabs.nav-tabs .nav-link:hover:not(.active)::after { background: #cbd5e1; }

/* Actif : navy + filet teal (le `::after` teal des regles de base est conserve tel quel). */
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link.active,
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link.active:hover,
.ctr-tabs.nav-tabs .nav-link.active,
.ctr-tabs.nav-tabs .nav-link.active:hover,
.spl-tabs.nav-tabs .nav-link.active,
.spl-tabs.nav-tabs .nav-link.active:hover { color: #2D3E50 !important; font-weight: 600 !important; }

/* Desactive : nettement plus clair qu'un onglet simplement inactif (calque `.ds-tab.disabled`). */
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link.disabled,
.ctr-tabs.nav-tabs .nav-link.disabled,
.spl-tabs.nav-tabs .nav-link.disabled { color: #cbd5e1 !important; }
.prj-tabs.nav-tabs:not(.prj-list-tabs) .nav-link.disabled::after,
.ctr-tabs.nav-tabs .nav-link.disabled::after,
.spl-tabs.nav-tabs .nav-link.disabled::after { transform: scaleX(0) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Etape 3 du chantier onglets (2026-08-25) — COLONNE DE GAUCHE : onglets ET sous-onglets des listes
   Projets / Contrats / Entreprises. 5e occurrence du meme defaut : le `::after` passe en scaleX(1) au
   survol COMME a l'actif (l. 5217, 11217, 11296, 11230, 16555) — les deux etats se peignaient a l'identique.

   ⚠️ ZONE SENSIBLE — on ne touche QUE les etats (couleurs). AUCUNE metrique : taille, padding, gap et
   graisse au repos (400) restent tels quels, ils sont cales au plus juste (`padding: 10px 2px`, `gap: 18px`,
   `flex-wrap: nowrap`) et un elargissement des libelles ferait deborder la colonne, libelles allemands en tete.
   On conserve aussi le mecanisme `::after` en position absolue : le convertir en `border-bottom` ajouterait
   2px de hauteur dans un espace deja contraint.

   ⚠️ Les DEUX rangees recoivent EXACTEMENT le meme traitement, seule la taille differe (metrique existante,
   0.85 / 0.78rem). Ce n'est pas cosmetique : quand un sous-onglet est selectionne, l'onglet principal se
   DESOULIGNE volontairement (contract/index:95, supplier/index:80) — les deux rangees forment UN SEUL groupe
   exclusif, pas un parent et ses enfants. Un indicateur de nature differente ferait croire a deux selections.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Repos : gris du DS (le #6b6b7a8d d'origine ne venait d'aucune palette). */
.prj-list-tabs.nav-tabs .nav-link.prj-list-tab,
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab,
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab,
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab,
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab { color: #8fa1b3; }

/* Survol : texte plus fonce + filet GRIS. Le filet teal reste reserve a l'element ACTIF. */
.prj-list-tabs.nav-tabs .nav-link.prj-list-tab:hover:not(.active),
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab:hover:not(.active),
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab:hover:not(.active),
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab:hover:not(.active),
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab:hover:not(.active) { color: #415873; }
.prj-list-tabs.nav-tabs .nav-link.prj-list-tab:hover:not(.active)::after,
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab:hover:not(.active)::after,
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab:hover:not(.active)::after,
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab:hover:not(.active)::after,
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab:hover:not(.active)::after { background: #cbd5e1; }

/* Actif : navy (le filet teal du `::after` de base est conserve tel quel). */
.prj-list-tabs.nav-tabs .nav-link.prj-list-tab.active,
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab.active,
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab.active,
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab.active,
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab.active,
.prj-list-tabs.nav-tabs .nav-link.prj-list-tab.active:hover,
.ctr-list-tabs.nav-tabs .nav-link.ctr-list-tab.active:hover,
.spl-list-tabs.nav-tabs .nav-link.spl-list-tab.active:hover,
.ctr-list-subtabs.nav-tabs .nav-link.ctr-list-subtab.active:hover,
.spl-list-subtabs.nav-tabs .nav-link.spl-list-subtab.active:hover { color: #2D3E50 !important; }

/* ═══ Création rapide d'un appel d'offres — hub Dossiers Achats (2026-08-25) ═══════════════════ */

/* Menu « Ajouter » du pied de la colonne Liste (remplace le bouton unique « Ajouter dossier »). */
.prj-list-add-dropdown { flex: 1 1 auto; }
.prj-list-add-dropdown > .prj-list-footer-btn-add { width: 100%; }
.prj-list-add-menu { min-width: 100%; padding: 6px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); }
.prj-list-add-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 0.85rem; color: #334155; border-radius: var(--r-sm, 3px); }
.prj-list-add-item:hover, .prj-list-add-item:focus { background: #f0fafa; color: #0d9488; text-decoration: none; outline: none; }
.prj-list-add-item-icon { width: 16px; text-align: center; color: #0d9488; }

/* Modale de création rapide. overflow-x masqué : les selectpicker et l'éditeur des chapitres
   débordaient de quelques pixels et faisaient apparaître une barre horizontale inutile. */
.qrf-dialog { max-width: 680px; }
.qrf-content { position: relative; border: none; border-radius: var(--r-lg, 10px); overflow: hidden; }
.qrf-header { align-items: center; padding: 16px 22px; border-bottom: 1px solid #e2e8f0; }
.qrf-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; font-weight: 600; color: #1e293b; }
.qrf-title .fas { color: #0d9488; }
.qrf-modal-body { padding: 0; max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; }
.qrf-body { padding: 20px 22px 4px; }
.qrf-form, .qrf-form .form-control, .qrf-form .bootstrap-select { max-width: 100%; }

/* Encadré explicatif : une accroche puis 3 points, pour rester lisible. */
.qrf-callout { display: flex; gap: 10px; align-items: flex-start; padding: 6px 14px; margin-bottom: 20px; background: #f0fafa; border: 1px solid #cceae7; border-radius: var(--r-lg, 10px); font-size: 0.82rem; line-height: 1.55; color: #415873; }
.qrf-callout > i { margin-top: 3px; color: #0d9488; }

.qrf-field { margin-bottom: 18px; }
.qrf-label { display: block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.qrf-label[data-toggle="tooltip"] { cursor: help; }
.qrf-help { margin-left: 5px; font-size: 0.78rem; color: #0d9488; cursor: help; text-transform: none; }
.qrf-input { border-radius: var(--r-md, 6px); }
.qrf-hint { margin-top: 6px; font-size: 0.78rem; color: #94a3b8; }
.qrf-hint-name { font-weight: 500; color: #0d9488; }
.qrf-field.has-error .form-control { border-color: #dc2626; }
.qrf-form .form-control:focus, .qrf-form button:focus, .qrf-form a:focus { outline: none; box-shadow: none; }
.qrf-form .form-control:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }

.qrf-optional-toggle { display: inline-block; margin-bottom: 16px; font-size: 0.8rem; color: #64748b; }
.qrf-optional-toggle:hover { color: #0d9488; text-decoration: none; }
.qrf-chapter .cke { border-radius: var(--r-md, 6px); }

/* Tags (Familles d'achats, Prescripteurs) : mêmes fond teal, pastille couleur et croix que le
   drawer (.drw-prj-tag / .drw-prj-cat-tag), pour que les deux écrans se ressemblent. */
.qrf-tag-list, .qrf-cat-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.qrf-tag-list:empty, .qrf-cat-tags:empty { display: none; }
.qrf-tag, .qrf-cat-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e6f7f5; color: #0d9488;
    border: 1px solid transparent;
    border-radius: var(--r-sm, 3px);
    padding: 2px 2px 2px 8px;
    font-size: 0.74rem; line-height: 1.4;
    max-width: 100%;
}
.qrf-cat-tag { border-color: rgba(13, 148, 136, 0.25); padding-right: 4px; padding-left: 6px; }
.qrf-cat-tag.main { background: #d4f0ec; border-color: rgba(13, 148, 136, 0.5); }
.qrf-tag-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 1px; }
.qrf-tag-text, .qrf-cat-tag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrf-tag-remove, .qrf-cat-tag-remove {
    color: #0d9488; opacity: 0.55;
    padding: 0 5px; margin-left: 2px;
    font-weight: 700; font-size: 1rem; line-height: 1;
    text-decoration: none !important; cursor: pointer;
}
.qrf-tag-remove:hover, .qrf-cat-tag-remove:hover { opacity: 1; color: #ef4444; text-decoration: none !important; }

/* Composer Familles d'achats : 2 selects + bouton. Pas de drag-and-drop (le multi-familles
   ordonnable reste dans le drawer) : l'ordre d'ajout fait la position, la 1re est la principale. */
.qrf-cat-composer { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.qrf-cat-composer > .bootstrap-select { flex: 1 1 180px; }
.qrf-cat-add { flex: 0 0 auto; padding: 6px 14px; font-size: 0.82rem; color: #0d9488; background: #fff; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); cursor: pointer; }
.qrf-cat-add:disabled { color: #cbd5e1; border-color: #e2e8f0; cursor: not-allowed; }

/* Pied collant + voile d'attente couvrant toute la modale pendant la création de la chaîne. */
.qrf-footer { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 22px; background: #fff; border-top: 1px solid #e2e8f0; }
.qrf-footer-actions { display: flex; justify-content: flex-end; gap: 10px; }
.qrf-submit i { margin-right: 7px; }
.qrf-waiting { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(255, 255, 255, 0.96); }
.qrf-waiting.is-visible { display: flex; }

/* Bandeau d'arrivée sur le round 1 après une création rapide (?quickCreated=1). Sur .rfx-ds, donc
   assis sur .rfx-callout : on ne redéfinit ici que la mise en page (corps + CTA + fermeture). */
.rfx-ds .qrf-created-banner { align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 30px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0d9488; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); animation: qrfCreatedIn 0.35s ease-out both; }
.rfx-ds .qrf-created-banner > i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 0; border-radius: var(--r-full, 999px); background: #0d9488; color: #fff; font-size: 0.78rem; }
.qrf-created-body { flex: 1 1 auto; }
.rfx-ds .qrf-created-title { font-size: 1rem; font-weight: 600; color: #2D3E50; margin-bottom: 4px; }
/* Ligne d action du bandeau : teal et un cran de graisse au-dessus du corps de texte (le body
   est a 200 via app.css), pour la distinguer des deux phrases de constat sans la rendre grasse. */
.rfx-ds .qrf-created-action { color: #0d9488; font-weight: 300; }
.qrf-created-close { flex: 0 0 auto; padding: 0 2px; font-size: 1.15rem; line-height: 1; color: #94a3b8; background: none; border: none; cursor: pointer; }
.qrf-created-close:hover { color: #415873; }
.qrf-created-close:focus { outline: none; }

/* Mention « communiqué aux entreprises consultées » : distingue ce qui sera lu par les entreprises
   (nom de l'AO, chapitres de présentation) de ce qui reste interne (nom du dossier Achats). */

/* Encadré regroupant les chapitres de présentation. */

/* Intertitre du groupe « Dossier Achats de rattachement » : marque la frontière interne / public sans
   ajouter un second encadré (deux boîtes pour trois champs alourdiraient la modale). Le filet prend
   la largeur restante, la mention « non communiqué » répond en gris à la mention teal du bloc public. */
.qrf-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 18px 0 12px; padding-bottom: 7px; border-bottom: 1px solid #dfe6ee; }
.qrf-group-title { flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #2D3E50; }
.qrf-hint-internal { flex: 0 0 auto; font-size: 0.72rem; font-style: italic; color: #b6c2cf; }

/* Libellé + mention « communiqué aux entreprises » sur la même ligne : la mention qualifie le champ,
   elle doit être lue avant la saisie. flex-wrap pour que la mention repasse dessous si la modale est
   étroite, plutôt que de comprimer le libellé. */

/* Aperçu du nom de dossier, remonté juste sous l'intertitre du groupe interne. */
.qrf-group-preview { margin-top: -6px; margin-bottom: 16px; }

/* Note du pied : posee A GAUCHE des boutons, dans l espace mort du pied, donc sans cout en hauteur.
   Porte l information « ou retrouver l appel d offres ensuite », qui n a pas a etre lue avant de cliquer. */
.qrf-footer-note { font-size: 0.72rem; line-height: 1.35; color: #94a3b8; text-align: right; }
.qrf-submit { white-space: nowrap; }

/* Les deux sections (dossier / presentation) partagent la meme forme : titre discret + filet +
   mention d audience a droite, puis un encadre teal explicatif juste dessous. */
.qrf-group-head + .qrf-callout { margin-bottom: 16px; }

/* Nom de l appel d offres : champ traite comme un titre saisissable (pas de libelle au-dessus,
   le placeholder porte l intitule). Meme parti pris que le nom de dossier dans le drawer. */
.qrf-form .qrf-rfp-name { height: auto; padding: 12px 16px; font-size: 1.05rem !important; font-weight: 500; line-height: 1.3; text-align: center; color: #2D3E50; }
.qrf-rfp-name::placeholder { font-weight: 400; color: #b6c2cf; }

/* Le bandeau de creation rapide doit se lire comme un EVENEMENT, pas comme un hint permanent :
   fond blanc la ou les hints de la page sont teintes, filet teal a gauche, ombre portee (rien
   d autre n en porte sur cet ecran) et une entree animee. */
@keyframes qrfCreatedIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Fin de dossier exprimee en duree : libelle + pastilles + date calculee + acces au champ precis,
   le tout sur une seule ligne. flex-wrap est le filet de securite : si la modale est etroite, la
   ligne se replie proprement au lieu de deborder. */
.qrf-endat-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.qrf-endat-label { display: inline-flex; align-items: center; margin-bottom: 0; white-space: nowrap; }
.qrf-endat-chips { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: space-evenly; gap: 6px; }
.qrf-endat-chip { padding: 5px 12px; font-size: 0.78rem; color: #415873; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; }
.qrf-endat-chip:hover { border-color: #0d9488; color: #0d9488; }
.qrf-endat-chip:focus { outline: none; }
.qrf-endat-chip.is-active { background: #e6f7f5; border-color: #0d9488; color: #0d9488; font-weight: 500; }
.qrf-endat-computed { font-size: 0.8rem; font-weight: 500; color: #0d9488; white-space: nowrap; }
.qrf-endat-computed:empty { display: none; }
.qrf-endat-precise { padding: 0; font-size: 0.78rem; color: #64748b; background: none; border: none; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.qrf-endat-precise:hover { color: #0d9488; }
.qrf-endat-precise:focus { outline: none; }

/* Champ date d origine : masque tant que l utilisateur n a pas demande une date precise, mais
   toujours dans le DOM (c est lui qui porte la valeur postee). */
.qrf-endat-input { display: none; margin-top: 10px; max-width: 200px; }
.qrf-endat-input.is-visible { display: block; }

/* Pastille « Rapide » des points d entree : signale le chemin court sans promettre de duree. */
.qrf-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 7px; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: #0d9488; background: #e6f7f5; border-radius: var(--r-full, 999px); }
.qrf-badge i { font-size: 0.58rem; }

/* (1) Asterisque « obligatoire ». La regle avait ete retiree comme morte quand le libelle du champ
   Nom a disparu, puis la classe a ete reintroduite sur « Fin prevue dans » : d ou un asterisque ni
   rouge ni espace. */
.qrf-required { margin-left: 4px; color: #dc2626; font-weight: 600; }

/* (4) Le titre « Presentation » ouvre une seconde section : plus d air au-dessus que « Dossier de
   rattachement », qui suit immediatement le champ Nom. */
.qrf-group-head-presentation { margin-top: 34px; }

/* Bandeau global d erreur de la modale : reprend le message generique de l app (form.error.text),
   pas la liste des violations remontees a la racine (doublons techniques du nom derive). */
.qrf-alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 0.82rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-lg, 10px); }
.qrf-alert i { font-size: 0.9rem; }

/* ==========================================================================
   Pages publiques / hors application (.auth-*)
   Connexion, mot de passe oublie, inscription, pages d erreur.
   Remplace le gabarit legacy (#panel-login, fond navy #415873, accent corail
   #ff855e, titres Anton 2,2 rem) par le socle DS : fond clair, carte blanche,
   titres navy au calibre DS, actions teal.
   Le <style> inline que chacun de ces templates portait est repris ici
   (CLAUDE.md 6 : aucun bloc <style> dans les Twig).
   Rayons : uniquement les tokens --r-sm/md/lg, l echelle est figee.
   ========================================================================== */

/* Le fond doit couvrir la fenetre entiere : ces pages n ont pas de contenu
   long, sans height:100% on verrait le blanc du body sous la carte.
   Les deux halos (teal en haut a gauche, navy en bas a droite) restent sous
   les 5 % d opacite : ils donnent de la profondeur sans colorer la page. */
body.auth-body {
    background-color: #f8fafb;
    background-image:
        radial-gradient(60rem 40rem at 12% -10%, rgba(13, 148, 136, 0.05), transparent 60%),
        radial-gradient(50rem 38rem at 100% 108%, rgba(45, 62, 80, 0.05), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }

/* Carte. L ancienne ombre (0 0 14px 1px #ffffffa3) etait une lueur BLANCHE
   destinee a detourer la carte sur le fond navy : invisible sur fond clair.
   Ombre a deux niveaux : un lisere de contact + une diffusion large. */
.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: var(--r-lg, 10px);
    box-shadow: 0 1px 2px rgba(45, 62, 80, 0.04), 0 10px 30px rgba(45, 62, 80, 0.08);
    padding: 28px 34px 40px;
    box-sizing: border-box;
    /* Hauteur plancher : sans elle, l etape e-mail (un seul champ) donne une carte
       tassee a cote de l etape mot de passe. Le contenu est centre verticalement,
       et la carte s etire au-dela des que le contenu depasse. */
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Lockup logo ── */
.auth-logo { text-align: center; margin-bottom: 26px; }
.auth-logo img { width: 48px; height: auto; }
.auth-logo-text { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; margin-top: 8px; color: #2D3E50; }
.auth-logo-text .auth-logo-mid { color: #6b7a8d; }

/* ── Titres : Anton au calibre DS (cf. .com-page-header-title-name) ── */
.auth-title { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.35rem !important; font-weight: 400 !important; letter-spacing: 0.02em; line-height: 1.25; color: #2D3E50; text-align: center; margin: 0 0 7px; }
.auth-subtitle { font-size: 0.88rem; font-weight: 400; line-height: 1.5; color: #5a6b7d; text-align: center; margin: 0 0 26px !important; }

/* ── Champs ── */
.auth-field { margin-bottom: 16px; }
.auth-label { display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #8fa1b3; margin-bottom: 6px; }

.auth-card .form-control,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
    width: 100%;
    height: 42px;
    border: 1px solid #dde1e7 !important;
    border-radius: var(--r-md, 6px) !important;
    background: #fff;
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    color: #2D3E50;
    padding: 0 13px;
    box-shadow: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-card .form-control::placeholder { color: #b6c1cd; }
.auth-card .form-control:focus,
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
    outline: none;
}
.auth-card input[readonly] { background: #f8fafb; color: #6b7a8d; }

/* Groupe champ + boutons colles a droite (oeil, edition, enveloppe).
   Les .auth-addon sont poses DANS le champ plutot qu en .input-group-append
   borde : une seule bordure, pas de raccord visible entre les deux blocs. */
.auth-input-group { position: relative; display: flex; align-items: center; }
.auth-input-group .form-control { flex: 1 1 auto; padding-right: 70px; }
.auth-input-group.auth-input-group-single .form-control { padding-right: 42px; }
.auth-addons { position: absolute; right: 7px; display: flex; align-items: center; gap: 2px; }
.auth-addon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    background: transparent; border: none; border-radius: var(--r-md, 6px);
    color: #8fa1b3; font-size: 0.85rem; line-height: 1; cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}
.auth-addon:hover, .auth-addon:focus { color: #0d9488; background: #e6f7f5; outline: none; }
.auth-addon-static { cursor: default; }
.auth-addon-static:hover { color: #8fa1b3; background: transparent; }

/* Texte d aide sous le champ : remplace le tooltip d aide mot de passe, qui
   n etait jamais initialise donc jamais affiche. */
.auth-hint { font-size: 0.72rem; font-weight: 300; line-height: 1.45; color: #8fa1b3; margin-top: 6px; }

/* ── Case a cocher (remplace .squared-checkbox legacy) ── */
.auth-check { display: flex; align-items: center; gap: 9px; margin: 2px 0 20px; }
.auth-check input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: #0d9488; cursor: pointer; flex-shrink: 0; }
.auth-check label { margin: 0; font-size: 0.8rem; font-weight: 300; color: #6b7a8d; cursor: pointer; }

/* ── Boutons : variante pleine largeur des .ds-btn-* pour un CTA de page ── */
.ds-btn-block { display: flex; width: 100%; min-height: 42px; font-size: 0.85rem; font-weight: 500; }

/* ── Liens ── */
.auth-links { text-align: center; margin-top: 20px; }
.auth-link { font-size: 0.8rem; font-weight: 400; color: #0d9488; text-decoration: none; transition: color 0.12s ease; }
.auth-link:hover, .auth-link:focus { color: #0b7d72; text-decoration: underline; outline: none; }
.auth-links-label { font-size: 0.78rem; font-weight: 300; color: #8fa1b3; margin: 0 0 4px !important; }

/* Separateur discret avant les liens secondaires. */
.auth-sep { height: 1px; background: #eef1f5; margin: 22px 0 0; border: 0; }

/* ── Alertes ── */
.auth-card .alert { font-size: 0.8rem; font-weight: 300; border-radius: var(--r-md, 6px); padding: 10px 14px; margin-bottom: 18px; }
.auth-card .alert-danger { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.auth-card .alert-success { color: #0f766e; background: #e6f7f5; border-color: #99e0d8; }

/* Retrait de l outline navigateur au clic, conserve au clavier (regle projet). */
.auth-card button:focus:not(:focus-visible),
.auth-card a:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* -- Parcours de connexion en deux temps --
   Etape 1 : adresse e-mail. Etape 2 : mot de passe. Pilote par la classe
   d etat .is-step-password sur le formulaire plutot que par jQuery
   show()/hide() : show() devine le display par defaut de la balise et
   casserait le inline-flex des icones posees dans le champ. */
.auth-form .panel-login-with-password { display: none; }
.auth-form.is-step-password .panel-login-next { display: none; }
.auth-form.is-step-password .panel-login-with-password { display: block; }
.auth-form.is-step-password .auth-check.panel-login-with-password,
.auth-form.is-step-password .ds-btn-block.panel-login-with-password { display: flex; }
.auth-form.is-step-password .auth-addon.panel-login-with-password { display: inline-flex; }

/* -- Inscription : intertitres d etape (« 1/ ... », « 2/ ... ») -- */
.auth-block { margin-bottom: 22px; }
.auth-step-title { font-size: 0.88rem; font-weight: 500; line-height: 1.4; color: #2D3E50; margin: 0 0 10px; }

/* -- Inscription : code d activation en 5 cases --
   Reprend le gabarit legacy (#panel-login input.activation_part) au calibre DS : cases un
   peu moins hautes, rayon --r-md au lieu du 0 d origine. */
.auth-code-row { display: flex; justify-content: center; gap: 8px; margin: 2px 0 0; }
.auth-card input.activation_part {
    width: 48px;
    height: 54px;
    padding: 0;
    text-align: center;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    border-radius: var(--r-md, 6px) !important;
}

/* -- Case d acceptation des CGU --
   Le libelle est du HTML construit dans UserPasswordType (classes .h5, .text-dark-grey,
   .text-blue heritees du gabarit legacy) : on ne retouche que sa presentation ici, pas le
   PHP. D ou les !important, qui doivent battre les regles generiques de app.css. */
.auth-gtu { margin: 2px 0 20px; }
.auth-gtu .form-check-label { margin: 0; font-size: 0.78rem; font-weight: 300; line-height: 1.5; color: #6b7a8d; }
.auth-gtu .form-check-label span { font-size: 0.78rem !important; font-weight: 300 !important; color: #6b7a8d !important; }
.auth-card .gtu-modal-button { color: #0d9488 !important; text-decoration: underline; }
.auth-card .gtu-modal-button:hover, .auth-card .gtu-modal-button:focus { color: #0b7d72 !important; }

/* Bouton secondaire pleine largeur (« Recevoir mon code d activation ») : l action
   principale de la page reste « Continuer », en teal plein. */
.auth-card .ds-btn-secondary.ds-btn-block { font-weight: 500; }

/* -- Retours de recette etape 3 (2026-08-26) -- */

/* Pastille numerotee des etapes d inscription, a la place des « 1/ » et « 2/ ». */
.auth-step-title { display: flex; align-items: center; gap: 8px; }
.auth-step-num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: var(--r-full, 999px);
    background: #e6f7f5; color: #0d9488;
    font-size: 0.7rem; font-weight: 600; line-height: 1;
}

/* Cases du code d activation : carrees, et detachees du bouton « Recevoir mon code ». */
.auth-code-row { margin-top: 12px; }
.auth-card input.activation_part { height: 48px; }

/* Case CGU. Le projet remplace la case native par un dessin en pseudo-elements
   (input en opacity:0, cercle en label::before, coche FA en label::after) : `accent-color`
   n a donc aucun effet et l etat coche retombait sur l orange generique de app.css l. 3543.
   L ancien gabarit corrigeait deja cela via #panel-login ; on reprend la meme approche,
   scopee a .auth-gtu, en teal. */
.auth-gtu .form-check input[type="checkbox"]:checked + label::before {
    background-color: #0d9488;
    border-color: #0d9488;
}
.auth-gtu .form-check input[type="checkbox"] + label:hover::before { border-color: #0d9488; }

/* Variante compacte : la creation de compte « contact entreprise » cumule le code
   d activation et les deux champs mot de passe, ce qui faisait deborder la fenetre.
   Rythme vertical resserre, sans toucher aux autres pages. */
.auth-card-compact { min-height: 0; padding-top: 24px; padding-bottom: 26px; }
.auth-card-compact .auth-logo { margin-bottom: 16px; }
.auth-card-compact .auth-logo img { width: 42px; }
.auth-card-compact .auth-title { font-size: 1.2rem !important; }
.auth-card-compact .auth-subtitle { margin-bottom: 18px !important; }
.auth-card-compact .auth-block { margin-bottom: 16px; }
.auth-card-compact .auth-field { margin-bottom: 12px; }
.auth-card-compact .auth-step-title { margin-bottom: 8px; }
.auth-card-compact .auth-gtu { margin-bottom: 14px; }
.auth-card-compact .auth-hint { margin-top: 4px; }

/* -- Modale des CGU (ouverte depuis l inscription) --
   Plus large et plus haute : le texte est long, la lecture en petite fenetre est penible.
   `min-height` et non `height` : resizeModalContainer() pose une hauteur en style inline,
   que min-height depasse sans avoir a toucher au JS. */
#generalTermsOfUseModal .modal-dialog { max-width: 900px; }
#generalTermsOfUseModal .container-modal-scrollable { min-height: 64vh; }

/* Titre de la modale aligne sur le teal du DS.
   `#generalTermsOfUseModal .text-blue` a ete retire le 2026-08-29 : `.text-blue` est desormais
   teal globalement (cf. bloc HARMONISATION .text-blue en fin de fichier). */
#generalTermsOfUseModal .modal-title { color: #0d9488 !important; }

/* -- Pages d erreur (403 / 404 / 429 / 500) --
   Parti pris valide : rassurer plutot que dramatiser. Pictogramme doux dans une pastille
   teal pale, meme traitement pour les 4 codes (c est l icone qui porte la nature de
   l erreur, pas la couleur), et code d erreur ecrit petit en pied de carte : lisible sur
   une capture d ecran pour le support, sans ressortir a la lecture. */
.auth-icon {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    margin: 0 auto 18px;
    border-radius: var(--r-full, 999px);
    background: #e6f7f5;
    color: #0d9488;
    font-size: 1.5rem;
}

/* Lignes de texte intermediaires des pages d erreur. */
.auth-body { font-size: 0.85rem; font-weight: 300; line-height: 1.6; color: #6b7a8d; text-align: center; margin: 0 0 12px !important; }
.auth-body:last-of-type { margin-bottom: 22px !important; }
.auth-body-strong { color: #2D3E50; font-weight: 500; }

/* Code d erreur, en pied de carte. */
.auth-code {
    margin: 18px 0 0 !important;
    font-size: 0.68rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
    color: #b6c1cd; text-align: center;
}

/* Bloc de contact (page 404). */
.auth-support { margin-top: 18px; text-align: center; font-size: 0.78rem; font-weight: 300; line-height: 1.5; color: #8fa1b3; }

@media (max-width: 575px) {
    .auth-card { padding: 22px 20px 32px; }
    .auth-wrap { padding: 20px 12px; }
}

/* =============================================================================
   Page token « Validation de contrat »  (prefixe cvr-*)
   Template : frontend/contract/contract_validation_request.html.twig (route publique
   contract_validation_request). Portee : cette page seule (scope .cvr-ds).

   Coquille calquee sur la page token « Enjeux / performance achats » (.pcv-ds), elle-meme
   calquee sur la page token Evaluations (.mya-ds) : header DS inline, zone scrollable,
   barre d actions sticky. La duplication du shell suit la pratique du projet (chaque page
   token porte son prefixe) plutot que d introduire un prefixe partage qui obligerait a
   retoucher deux pages deja recettees.

   Les champs du contrat reutilisent les classes .ctx-info-card / .ctx-section de l onglet
   Contexte (globales) et son partial _display_contract_property : le valideur voit donc la
   meme organisation de champs que l acheteur dans son drawer, sans dupliquer une regle.
   ============================================================================= */
.cvr-ds .cvr-page { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
.cvr-ds .container-scrollable { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }

/* -- Header -- */
.cvr-ds .cvr-header { border-bottom: 1px solid #e2e8f0; }
.cvr-ds .cvr-header-titles { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cvr-ds .cvr-header-logo { flex-shrink: 0; }
.cvr-ds .cvr-header-prefix { font-size: 0.78rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.cvr-ds .cvr-header-sep { color: #cbd5e1; }
.cvr-ds .cvr-header .ds-page-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvr-ds .cvr-req-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 0.78rem; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--r-sm, 3px); padding: 4px 10px; }

/* -- Contenu -- */
.cvr-ds .cvr-container { padding: 24px 40px 40px; }
.cvr-ds .cvr-lead { margin-bottom: 8px; font-size: 0.88rem; color: #2D3E50; line-height: 1.6; }
.cvr-ds .cvr-lead p { margin: 0 0 6px; }
.cvr-ds .cvr-lead p:last-child { margin-bottom: 0; }
.cvr-ds .cvr-lead-contact { font-size: 0.82rem; color: #64748b; }
.cvr-ds .cvr-lead-link { color: #0d9488; font-weight: 500; }
.cvr-ds .cvr-lead-link:hover { color: #0b7f75; }

/* -- Titre de section -- */
.cvr-ds .cvr-section-title { font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.06em; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }

/* -- Identite du contrat -- */
.cvr-ds .cvr-contract-id { margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cvr-ds .cvr-contract-name { font-size: 1.02rem; font-weight: 600; color: #2D3E50; }
.cvr-ds .cvr-contract-meta { font-size: 0.78rem; color: #64748b; margin-top: 2px; width: 100%; }
.cvr-ds .cvr-contract-meta a { color: #0d9488; }
.cvr-ds .cvr-contract-meta a:hover { color: #0b7f75; }
.cvr-ds .cvr-contract-dept { color: #8fa1b3; }

/* -- Alertes (demande deja traitee / confirmation) -- */
.cvr-ds .cvr-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg, 10px); font-size: 0.84rem; line-height: 1.5; margin-bottom: 20px; }
.cvr-ds .cvr-alert i { margin-top: 2px; flex-shrink: 0; }
.cvr-ds .cvr-alert-info { background: #f1f5f9; border: 1px solid #e2e8f0; color: #415873; }
.cvr-ds .cvr-alert-info i { color: #64748b; }
.cvr-ds .cvr-alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.cvr-ds .cvr-alert-success i { color: #059669; }

/* -- Documents joints -- */
.cvr-ds .cvr-doc-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 0.82rem; color: #2D3E50; border-top: 1px solid #eef1f5; }
.cvr-ds .cvr-doc-row:first-child { border-top: none; }
.cvr-ds .cvr-doc-icon { color: #8fa1b3; flex-shrink: 0; }
.cvr-ds .cvr-doc-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvr-ds .cvr-doc-cat { flex-shrink: 0; font-size: 0.72rem; color: #64748b; background: #f1f5f9; border-radius: var(--r-sm, 3px); padding: 2px 8px; }
.cvr-ds .cvr-doc-size { flex-shrink: 0; font-size: 0.72rem; color: #8fa1b3; }
.cvr-ds .cvr-doc-empty { padding: 12px 16px; font-size: 0.82rem; color: #8fa1b3; }

/* -- Barre sticky : actions + marque a droite --
   Contrairement a la page Couts, le motif de rejet n est pas saisi dans la barre mais dans
   un popover ancre sur le bouton Rejeter (comportement d origine conserve). */
.cvr-ds .cvr-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-shrink: 0; background: #f8fafb; border-top: 1px solid #e2e8f0; padding: 12px 40px; }
.cvr-ds .cvr-footer-actions { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.cvr-ds .cvr-footer-brand { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: #64748b; padding-left: 20px; border-left: 1px solid #e2e8f0; }
.cvr-ds .cvr-footer-brand .cvr-brand-word { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; letter-spacing: 0.02em; font-size: 0.95rem; color: #2D3E50; }

/* -- Boutons Valider / Rejeter -- */
.cvr-ds .cvr-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 500; line-height: 1.5; padding: 7px 22px; border-radius: var(--r-md, 6px); border: 1px solid; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cvr-ds .cvr-btn:focus { outline: none; }
.cvr-ds .cvr-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.cvr-ds .cvr-btn-agree { background: #0d9488; border-color: #0d9488; color: #fff; }
.cvr-ds .cvr-btn-agree:hover { background: #0b7f75; border-color: #0b7f75; color: #fff; }
.cvr-ds .cvr-btn-disagree { background: #fff; border-color: #d1d5db; color: #64748b; }
.cvr-ds .cvr-btn-disagree:hover { border-color: #ef4444; color: #ef4444; background: #fff; }

/* Le popover de rejet est ancre sur un bouton de la barre sticky (position:fixed) : sans
   z-index explicite il passait sous la barre. */
.cvr-ds .popover { z-index: 1080; }

@media (max-width: 767px) {
    .cvr-ds .cvr-container { padding: 18px 16px 28px; }
    .cvr-ds .cvr-footer { padding: 10px 16px; }
    .cvr-ds .cvr-footer-brand { display: none; }
}

/* Commentaire du demandeur : saisi en textarea cote drawer, donc sauts de ligne a preserver. */
.cvr-ds .cvr-comment-text { font-size: 0.84rem; line-height: 1.6; color: #2D3E50; padding: 4px 0; }

/* Actions sur une ligne de document (voir / telecharger). */
.cvr-ds .cvr-doc-action { flex-shrink: 0; color: #8fa1b3; font-size: 0.82rem; }
.cvr-ds .cvr-doc-action:hover { color: #0d9488; }

/* -- Fournisseur -- */
.cvr-ds .cvr-supplier-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.cvr-ds .cvr-supplier-name { font-size: 0.86rem; font-weight: 500; color: #2D3E50; }

/* -- Suivi de la validation : ou en est le circuit, qui doit se prononcer apres. -- */
.cvr-ds .cvr-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 0.82rem; color: #2D3E50; border-top: 1px solid #eef1f5; }
.cvr-ds .cvr-hist-row:first-child { border-top: none; }
.cvr-ds .cvr-hist-row.is-current { background: #f8fafb; font-weight: 500; }
.cvr-ds .cvr-hist-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); }
.cvr-ds .cvr-hist-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvr-ds .cvr-hist-status { flex-shrink: 0; font-size: 0.72rem; color: #64748b; background: #f1f5f9; border-radius: var(--r-sm, 3px); padding: 2px 8px; }

/* Les partiels partages Chronologie / Engagements arrivent avec leurs marges de l onglet
   Contexte : on aligne leur espacement sur celui des .ctx-info-card de cette page. */
.cvr-ds .ctr-pilo-bare-card { margin-bottom: 16px; }

/* Contrat parent : ligne libelle + valeur sous le fournisseur, meme rubrique que dans le
   drawer d edition (« Fournisseur et contrat parent »). */
.cvr-ds .cvr-parent-row { border-top: 1px solid #eef1f5; margin-top: 8px; padding-top: 10px; }
.cvr-ds .cvr-parent-label { font-size: 0.72rem; font-weight: 600; color: #8fa1b3; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.cvr-ds .cvr-parent-name { font-size: 0.86rem; color: #2D3E50; }

/* =============================================================================
   Page CGU bloquante  (prefixe gtu-*)
   Template : frontend/user/gtu.html.twig (route user_general_terms_of_use).
   Portee : cette page seule (scope .gtu-ds).

   Ecran impose a TOUS les utilisateurs d un compte le jour ou de nouvelles CGU sont
   publiees (GeneralTermsOfUseListener redirige tant qu elles ne sont pas acceptees) :
   c est le premier ecran de leur journee, d ou la meme coquille que les pages token
   deja refaites (header DS inline, zone scrollable, barre sticky).
   ============================================================================= */
.gtu-ds .gtu-page { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
.gtu-ds .container-scrollable { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; }

/* -- Header -- */
.gtu-ds .gtu-header { border-bottom: 1px solid #e2e8f0; }
.gtu-ds .gtu-header-titles { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gtu-ds .gtu-header-logo { flex-shrink: 0; }
.gtu-ds .gtu-req-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 0.78rem; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--r-sm, 3px); padding: 4px 10px; }

/* -- Contenu : colonne de lecture, largeur limitee pour le confort -- */
.gtu-ds .gtu-container { max-width: 820px; margin: 0 auto; padding: 24px 24px 40px; }

/* -- Encart d explication : pourquoi cet ecran s impose -- */
.gtu-ds .gtu-lead { display: flex; align-items: flex-start; gap: 12px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 14px 16px; margin-bottom: 26px; }
.gtu-ds .gtu-lead-icon { color: #64748b; font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.gtu-ds .gtu-lead-title { margin: 0 0 4px !important; font-size: 0.88rem; font-weight: 600; color: #2D3E50; }
.gtu-ds .gtu-lead-text { margin: 0 !important; font-size: 0.84rem; line-height: 1.55; color: #415873; }

/* -- Intitule du document -- */
.gtu-ds .gtu-doc-title { font-size: 1.02rem; font-weight: 600; color: #2D3E50; text-align: center; line-height: 1.4; }
.gtu-ds .gtu-doc-scope { font-size: 0.82rem; color: #64748b; text-align: center; margin-top: 4px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; }

/* -- Corps du document (HTML riche stocke en base) -- */
.gtu-ds .gtu-body { padding-top: 20px; font-size: 0.86rem; line-height: 1.65; color: #2D3E50; }
.gtu-ds .gtu-body p { margin-bottom: 12px !important; }
.gtu-ds .gtu-body ul, .gtu-ds .gtu-body ol { padding-left: 22px; margin-bottom: 12px; }
.gtu-ds .gtu-body li { margin-bottom: 5px; }
/* Les titres du texte stocke portent la classe .text-blue du gabarit legacy. Le patch scope qui
   les alignait ici a ete retire le 2026-08-29 : `.text-blue` est desormais teal globalement
   (cf. bloc HARMONISATION .text-blue en fin de fichier). */
.gtu-ds .gtu-body h1, .gtu-ds .gtu-body h2, .gtu-ds .gtu-body h3 { font-size: 0.95rem !important; font-weight: 600 !important; color: #0d9488; margin: 22px 0 10px; padding-bottom: 5px; }
.gtu-ds .gtu-body table { width: 100%; margin-bottom: 14px; font-size: 0.82rem; }
.gtu-ds .gtu-body td, .gtu-ds .gtu-body th { border: 1px solid #e2e8f0; padding: 6px 9px; vertical-align: top; }

/* -- Barre sticky : rappel + bouton d acceptation -- */
.gtu-ds .gtu-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-shrink: 0; background: #f8fafb; border-top: 1px solid #e2e8f0; padding: 12px 40px; }
.gtu-ds .gtu-footer-hint { flex: 1 1 auto; min-width: 0; font-size: 0.80rem; color: #64748b; }
.gtu-ds .gtu-btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 0.82rem; font-weight: 500; line-height: 1.5; padding: 7px 22px; border-radius: var(--r-md, 6px); border: 1px solid; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.gtu-ds .gtu-btn:focus { outline: none; }
.gtu-ds .gtu-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.gtu-ds .gtu-btn-accept { background: #0d9488; border-color: #0d9488; color: #fff; }
.gtu-ds .gtu-btn-accept:hover { background: #0b7f75; border-color: #0b7f75; color: #fff; }

@media (max-width: 767px) {
    .gtu-ds .gtu-container { padding: 18px 16px 28px; }
    .gtu-ds .gtu-footer { padding: 10px 16px; }
    .gtu-ds .gtu-footer-hint { display: none; }
}


/* ============================================================================
   Onglet "Appel d offres" du Dossier Achats - Pilotage compact
   Chantier 2026-08-26 - doc docs/sessions/2026-08-26_onglet-ao-dossier-achats.md
   Prefixe DEDIE .prj-rfp-* : les classes .rfx-pil-* du Pilotage AO sont portees par
   .rfx-ds, dont l application ici importerait tout le reskin RFx (typo, container-
   scrollable, overrides .h4) dans un ecran prj-*. Valeurs recopiees a l identique du
   Pilotage (l. 19948-20076) pour rester iso-visuel entre les deux ecrans.
   ============================================================================ */
.prj-rfp { padding: 16px 40px 24px; }   /* 40px = marge laterale de reference des onglets du dossier (.prj-header, .prj-tabs-wrapper) */
.prj-rfp a:focus, .prj-rfp button:focus { outline: none; }
.prj-rfp a:focus-visible, .prj-rfp button:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }

/* --- En-tete compact : nom AO + round + echeance + actions --- */
.prj-rfp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; margin-bottom: 18px; }
.prj-rfp-name { font-size: 0.95rem; font-weight: 600; color: #2D3E50; }
.prj-rfp-round { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-full, 999px); background: #eef2f6; color: #64748b; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.prj-rfp-countdown { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-full, 999px); background: #fee2e2; color: #b91c1c; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.prj-rfp-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* .ds-btn-secondary est plus haut que .ds-btn-primary (padding 8/18 + 0.85rem, sans min-height) :
   on aligne les deux dans l en-tete, comme le font deja .rfx-lp-footer et .aspp-footer. */
.prj-rfp-head-right .ds-btn-primary,
.prj-rfp-head-right .ds-btn-secondary { min-height: 34px; padding: 6px 14px; font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
/* Lien discret 'voir plus' dans l en-tete de card, vers l onglet Pilotage de l AO. */
.prj-rfp-card-more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; color: #0d9488; text-decoration: none; white-space: nowrap; }
.prj-rfp-card-more:hover { color: #0b7d72; text-decoration: none; }
.prj-rfp-card-more i { font-size: 0.62rem; }
/* Le compteur ne pousse plus a droite quand le lien est present. */
.prj-rfp-card-more + .prj-rfp-card-count, .prj-rfp-card-count + .prj-rfp-card-more { margin-left: 10px; }

/* --- Fil d etapes : porte le statut de l AO (remplace la pastille) --- */
.prj-rfp-steps { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.prj-rfp-step { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 500; color: #94a3b8; white-space: nowrap; }
.prj-rfp-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; flex-shrink: 0; }
.prj-rfp-step.is-done { color: #64748b; }
.prj-rfp-step.is-done .prj-rfp-step-dot { background: #0d9488; }
.prj-rfp-step.is-current { color: #0f766e; font-weight: 600; }
.prj-rfp-step.is-current .prj-rfp-step-dot { background: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.18); }
.prj-rfp-step-sep { flex: 0 0 22px; height: 1px; background: #e2e8f0; margin: 0 9px; }

/* --- Tuiles KPI (calque .rfx-pil-kpis, sans la grille Bootstrap) --- */
.prj-rfp-kpis { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.prj-rfp-kpi { flex: 1 1 0; min-width: 130px; background: #f8fafb; border: 1px solid #e7ecf1; border-radius: var(--r-md, 6px); padding: 14px 16px; text-align: center; }
.prj-rfp-kpi-label { font-size: 0.72rem; font-weight: 400; color: #64748b; line-height: 1.3; }
.prj-rfp-kpi-value { font-size: 1.4rem; font-weight: 700; color: #2D3E50; margin-top: 6px; }

/* --- Ligne d alertes (uniquement ce que le tableau ne montre pas) --- */
.prj-rfp-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.prj-rfp-alert { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-md, 6px); font-size: 0.75rem; font-weight: 500; text-decoration: none; background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
a.prj-rfp-alert { transition: background .15s, border-color .15s; }
a.prj-rfp-alert:hover { background: #fde68a; color: #92400e !important; text-decoration: none; }
.prj-rfp-alert i { font-size: 0.7rem; }

/* --- Cards (calque .ctx-section du Contexte dossier) --- */
.prj-rfp-card { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); margin-bottom: 16px; overflow: hidden; }
.prj-rfp-card-header { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid rgba(45,62,80,0.12); }
.prj-rfp-card-icon { color: #0d9488; font-size: 0.85rem; width: 16px; text-align: center; }
.prj-rfp-card-title { font-size: 0.80rem; font-weight: 500; color: #2D3E50; }
.prj-rfp-card-count { margin-left: auto; font-size: 0.72rem; color: #94a3b8; }

/* --- Tableau des entreprises (calque .rfx-pil-table) --- */
.prj-rfp-tablewrap { overflow-x: auto; }
.prj-rfp-table { width: 100%; margin-bottom: 0; }
.prj-rfp-table thead th { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; vertical-align: bottom; padding: 11px 14px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; background: #fff; }
.prj-rfp-table tbody td { font-size: 0.78rem; font-weight: 400; color: #2D3E50; vertical-align: top; padding: 11px 14px; line-height: 1.4; border-top: 1px solid #f1f5f9; }
.prj-rfp-table tbody tr:hover td { background: #f6fafb; }
.prj-rfp-table tbody td:first-child { font-weight: 600; }
/* Colonne Entreprise figee pendant le scroll horizontal */
.prj-rfp-table thead th:first-child, .prj-rfp-table tbody td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; }
.prj-rfp-table tbody tr:hover td:first-child { background: #f6fafb; }
.prj-rfp-table .prj-rfp-col-sep { border-left: 1px solid #e2e8f0; }

/* --- Badges de statut (valeurs iso Pilotage) --- */
.prj-rfp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.prj-rfp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.prj-rfp-badge-green { color: #0f766e; background: #d9f2ee; }
.prj-rfp-badge-red { color: #b91c1c; background: #fee2e2; }
.prj-rfp-badge-orange { color: #c2410c; background: #ffedd5; }
.prj-rfp-badge-blue { color: #1d4ed8; background: #dbeafe; }
.prj-rfp-badge-amber { color: #a16207; background: #fef9c3; }
.prj-rfp-badge-neutral { color: #64748b; background: #eef2f6; }
.prj-rfp-badge-violet { color: #6d28d9; background: #ede9fe; }
.prj-rfp-badge-dark { color: #475569; background: #e2e8f0; }
.prj-rfp-date { display: block; font-size: 0.68rem; color: #94a3b8; margin-top: 3px; }
.prj-rfp-na { color: #cbd5e1; }
.prj-rfp-note { display: block; font-size: 0.68rem; color: #64748b; margin-top: 3px; }

/* --- Badges d action (colonne Action a mener) --- */
.prj-rfp-action { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-sm, 3px); font-size: 0.74rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
a.prj-rfp-action { transition: background .15s, color .15s; }
.prj-rfp-action-go { color: #0f766e; background: #d9f2ee; }
a.prj-rfp-action-go:hover { background: #0d9488; color: #fff !important; text-decoration: none; }
.prj-rfp-action-warn { color: #b45309; background: #fef3c7; }
.prj-rfp-action-wait { color: #64748b; background: #eef2f6; }

/* --- Historique des rounds (affiche a partir du round 2) --- */
.prj-rfp-rounds { display: flex; flex-direction: column; }
.prj-rfp-round-row { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; }
.prj-rfp-round-row:last-child { border-bottom: none; }
.prj-rfp-round-label { flex: 0 0 96px; font-size: 0.78rem; font-weight: 600; color: #2D3E50; }
.prj-rfp-round-date { flex: 0 0 160px; font-size: 0.75rem; color: #64748b; }
.prj-rfp-round-status { flex: 1 1 auto; }
.prj-rfp-round-count { flex: 0 0 auto; font-size: 0.75rem; color: #64748b; white-space: nowrap; }

@media (max-width: 767.98px) {
    .prj-rfp { padding: 12px 16px 18px; }
    .prj-rfp-kpi { min-width: calc(50% - 8px); }
    .prj-rfp-head-right { margin-left: 0; width: 100%; }
    .prj-rfp-round-label, .prj-rfp-round-date { flex: 0 0 auto; }
}


/* ============================================================================
   Drawer « Questionnaire » du Pilotage AO (oeil de l en-tete de colonne).
   Reskin DS 2026-08-27 - doc docs/sessions/2026-08-26_onglet-ao-dossier-achats.md
   Scope #rfpDrawer : le drawer vit HORS .main-content, aucun scope .rfx-ds ne
   s y applique. Calque sur .drawer-task (body/footer) et .rfx-drawer-header.
   ============================================================================ */
#rfpDrawer .drawer-body { padding: 0; background: #fff; }
/* En-tete DS (fond blanc, titre Anton navy) : calque sur .ds-drawer-header des drawers Contrats,
   Projets, Listes. Remplace .rfx-drawer-header (navy plein) sur ce drawer. */
#rfpDrawer .ds-drawer-header { padding: 16px 22px; border-bottom: 1px solid #f3f4f6; background: #fff; }
/* !important obligatoire : app.css impose `.h4, h4 { font-size: 0.8rem !important }` a TOUS les titres
   (h1..h6). Tous les autres drawers DS font de meme (.ds-drawer, .rfx-cond-drawer, #rfpMessageDrawer). */
#rfpDrawer .ds-drawer-header h4 { font-family: 'Anton', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.4rem !important; line-height: 1.2; font-weight: 400 !important; color: #2D3E50 !important; margin: 0; letter-spacing: 0.01em; }
#rfpDrawer .qdrw-inner { padding: 16px 22px 20px; }

/* --- Bloc question --- */
#rfpDrawer .qdrw-q { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #eef2f6; }
#rfpDrawer .qdrw-q:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 4px; }
#rfpDrawer .qdrw-q-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
#rfpDrawer .qdrw-q-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full, 999px); background: #e6f7f5; color: #0f766e; font-size: 0.68rem; font-weight: 700; }
#rfpDrawer .qdrw-q-title { font-size: 0.88rem; font-weight: 600; color: #2D3E50; line-height: 1.35; }
#rfpDrawer .qdrw-q-desc { font-size: 0.78rem; color: #64748b; line-height: 1.45; padding: 7px 11px; background: #f8fafb; border-left: 2px solid #e2e8f0; border-radius: 0 var(--r-sm, 3px) var(--r-sm, 3px) 0; margin-bottom: 12px; }

/* --- Reponse d une entreprise --- */
#rfpDrawer .qdrw-answer { padding: 9px 0 9px 12px; border-left: 2px solid #d9f2ee; }
#rfpDrawer .qdrw-answer + .qdrw-answer { margin-top: 4px; }
#rfpDrawer .qdrw-supplier { font-size: 0.72rem; font-weight: 700; color: #0d9488; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
#rfpDrawer .qdrw-text { font-size: 0.82rem; color: #2D3E50; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
#rfpDrawer .qdrw-text p:last-child { margin-bottom: 0; }
#rfpDrawer .qdrw-empty { color: #cbd5e1; }
#rfpDrawer .qdrw-none { font-size: 0.8rem; color: #94a3b8; font-style: italic; padding: 4px 0 4px 12px; }

/* --- Documents joints a une reponse --- */
#rfpDrawer .qdrw-docs { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#rfpDrawer .qdrw-doc { display: flex; align-items: center; gap: 9px; padding: 6px 10px; background: #f8fafb; border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); }
#rfpDrawer .qdrw-doc-icon { flex: 0 0 auto; color: #8fa1b3; font-size: 0.85rem; }
#rfpDrawer .qdrw-doc-name { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; color: #2D3E50; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rfpDrawer .qdrw-doc-cat { flex: 0 0 auto; font-size: 0.68rem; color: #64748b; background: #eef2f6; border-radius: var(--r-full, 999px); padding: 1px 8px; }
#rfpDrawer .qdrw-doc-size { flex: 0 0 auto; font-size: 0.68rem; color: #94a3b8; white-space: nowrap; }
#rfpDrawer .qdrw-doc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
#rfpDrawer .qdrw-doc-actions a { color: #0d9488; font-size: 0.8rem; text-decoration: none; }
#rfpDrawer .qdrw-doc-actions a:hover { color: #0b7d72; }

/* --- Etat vide global --- */
#rfpDrawer .qdrw-blank { padding: 34px 22px; text-align: center; font-size: 0.85rem; color: #94a3b8; }

/* --- Footer : export + fermeture --- */
#rfpDrawer .drawer-footer { padding: 12px 22px; border-top: 1px solid rgba(45,62,80,0.15); background: #fff; flex-shrink: 0; }
#rfpDrawer .qdrw-footer { display: flex; align-items: center; gap: 10px; }
#rfpDrawer .qdrw-export { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; }
#rfpDrawer .qdrw-export .bootstrap-select { max-width: 250px; }
#rfpDrawer .qdrw-export .bootstrap-select > .btn { height: 34px; padding-top: 6px; padding-bottom: 6px; border: 1px solid #d1d5db !important; border-radius: var(--r-md, 6px) !important; background: #fff !important; color: #2D3E50 !important; font-size: 0.8rem !important; box-shadow: none !important; outline: none !important; }
#rfpDrawer .qdrw-export .bootstrap-select > .btn:focus, #rfpDrawer .qdrw-export .bootstrap-select.show > .btn { border-color: #0d9488 !important; }
#rfpDrawer .qdrw-export .bootstrap-select .dropdown-menu { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); box-shadow: 0 6px 20px rgba(15,23,42,0.12); padding: 4px; font-size: 0.8rem; }
#rfpDrawer .qdrw-export .bootstrap-select .dropdown-menu li a { border-radius: var(--r-sm, 3px); padding: 6px 10px; color: #2D3E50 !important; }
#rfpDrawer .qdrw-export .bootstrap-select .dropdown-menu li a:hover { background: #e6f7f5 !important; color: #0f766e !important; }
#rfpDrawer .qdrw-export .bootstrap-select .dropdown-menu li.selected a { background: #e6f7f5 !important; color: #0f766e !important; font-weight: 600; }
#rfpDrawer .qdrw-footer .ds-btn-primary,
#rfpDrawer .qdrw-footer .ds-btn-ghost { min-height: 34px; padding: 6px 14px; font-size: 0.8rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }

/* --- Scrollbar fine, calquee sur .drawer-task --- */
#rfpDrawer .drawer-body::-webkit-scrollbar { width: 4px; background: transparent; }
#rfpDrawer .drawer-body::-webkit-scrollbar-track { background: transparent; border: none; }
#rfpDrawer .drawer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s; }
#rfpDrawer .drawer-body:hover::-webkit-scrollbar-thumb { background: #c4c9d0; }
#rfpDrawer .drawer-body::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }





/* ═══ Offres acheteur — pied « tout telecharger » de la liste de documents (2026-08-27) ═══
   La liste elle-meme REUTILISE telles quelles les classes `.rfx-pdoc-*` du portail entreprise (l. 22122+),
   pour que l'acheteur et l'entreprise voient la meme presentation d'un meme document. Seul ce pied est
   propre a l'acheteur : le « tout telecharger » n'existe pas cote portail. Discret et aligne a droite,
   pour ne pas reintroduire le gros bouton flottant qui deparait au-dessus de la liste. */
.rfx-ds .rfx-pdoc-foot { display: flex; justify-content: flex-end; padding: 8px 4px 2px; }
.rfx-ds .rfx-pdoc-dlall { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; padding: 2px 4px; color: #0d9488; font-size: 0.82rem; font-weight: 500; }
.rfx-ds .rfx-pdoc-dlall:hover { color: #0b7d72; text-decoration: underline; }
.rfx-ds .rfx-pdoc-dlall:focus { outline: none; }
.rfx-ds .rfx-pdoc-dlall:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }


/* Card d entreprise sans contenu (Offres acheteur) : mention discrete, pour que le vide soit EXPLICITE
   et non confondu avec un simple blanc de mise en page. 2026-08-27. */
.rfx-ds .rfx-card-empty { color: #94a3b8; font-size: 0.85rem; font-style: italic; padding: 2px 0 4px; }


/* Action alignee a droite dans la ligne de titre d une card (`.rfx-card-header` est un flex) : le
   « tout telecharger » des Offres acheteur y est loge plutot qu en pied de liste. 2026-08-27. */
.rfx-ds .rfx-card-head-action { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }


/* Sous-titre dans le corps d une card (Offres acheteur) : separe la checklist des livrables des depots
   libres, quand les deux coexistent. 2026-08-27. */
.rfx-ds .rfx-card-subtitle { font-size: 0.85rem; font-weight: 600; color: #415873; margin: 18px 0 6px; }


/* ═══ Offres acheteur — checklist des livrables en COMPACT (2026-08-27) ═══
   Cote acheteur les entreprises restent EMPILEES : chaque ligne gagnee est multipliee par le nombre
   d entreprises. On resserre donc la checklist, sans toucher au rendu du portail (ou l entreprise remplit
   et a besoin d air). Le bouton « modele » y devient un lien discret : cote acheteur il ne sert qu a
   retrouver SA reference, il ne doit pas se confondre avec le document REMIS par l entreprise. */
.rfx-ds .rfx-fin-card-compact { border: none; margin-bottom: 0; }
.rfx-ds .rfx-fin-card-compact > .rfx-card-header { padding: 4px 0 8px; min-height: 0; border-bottom: none; }
.rfx-ds .rfx-fin-card-compact > .rfx-card-body { padding: 0; }
/* ═══ Variante « au premier niveau » de la card compacte (2026-08-27) ══════════════════════════
   `rfx-fin-card-compact` retire VOLONTAIREMENT bordure, paddings et filet d en-tete : ces cards
   etaient IMBRIQUEES dans la card « entreprise », qui fournissait deja le cadre. Depuis que celle-ci
   a ete supprimee du sous-onglet financier (retour Olivier), « Livrables demandes » et « Grilles de
   prix » se retrouvaient au premier niveau SANS cadre : il ne restait qu un titre.
   On restaure donc le gabarit DS EXACT, et non un cadre invente : haut/droite transparents,
   gauche+bas #e2e8f0 (`.rfx-ds .rfx-card`, l. 19224) et filet d en-tete rgba(45,62,80,0.22)
   (`.rfx-ds .rfx-card-header`, l. 19225) - sinon ces deux cards jureraient avec « Synthese ».
   /!\ Modificateur ADDITIF : `rfx-fin-card-compact` garde son sens partout ailleurs (portail, et
   onglets Resumes/Documents ou l imbrication demeure). Ne PAS toucher a la classe de base. */
.rfx-ds .rfx-fin-card-compact.rfx-fin-card-boxed { border: 1px solid transparent; border-left-color: #e2e8f0; border-bottom-color: #e2e8f0; margin-bottom: 16px; }
.rfx-ds .rfx-fin-card-compact.rfx-fin-card-boxed > .rfx-card-header { padding: 12px 20px; min-height: 48px; border-bottom: 1px solid rgba(45,62,80,0.22); }
.rfx-ds .rfx-fin-card-compact.rfx-fin-card-boxed > .rfx-card-body { padding: 18px 20px 20px; }
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-row { padding: 8px 10px; }
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-list { gap: 6px; }
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-actions { margin-top: 2px; }
.rfx-ds .rfx-fin-resp-tplbtn-quiet { border: none !important; background: transparent !important; padding: 0 !important; font-size: 0.76rem !important; font-weight: 400 !important; color: #8fa1b3 !important; }
.rfx-ds .rfx-fin-resp-tplbtn-quiet:hover { color: #0d9488 !important; text-decoration: underline; }
/* Badge de completude des livrables, dans la ligne de titre de la card entreprise. */
.rfx-ds .rfx-card-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 2px 9px; border-radius: var(--r-full, 999px); font-size: 0.72rem; font-weight: 600; background: #eef2f6; color: #64748b; }
.rfx-ds .rfx-card-badge.is-done { background: rgba(13,148,136,0.10); color: #0b7d72; }
.rfx-ds .rfx-card-badge.is-missing { background: rgba(245,158,11,0.14); color: #b45309; }


/* ═══ Offres acheteur — livrables en compact, retours du 2026-08-27 ═══
   Objectif : un livrable tient sur DEUX lignes. Ligne 1 = etat + nom + badge + puce « Modele ».
   Ligne 2 = le document remis avec son bouton de telechargement libelle. */
/* Puce « Modele » posee dans la ligne de titre, a droite du badge Obligatoire/Facultatif. */
.rfx-ds .rfx-fin-resp-tplchip { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px); background: #fff; color: #8fa1b3; font-size: 0.7rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.rfx-ds .rfx-fin-resp-tplchip i { font-size: 0.66rem; }
.rfx-ds .rfx-fin-resp-tplchip:hover { border-color: #0d9488; color: #0d9488; text-decoration: none; }
.rfx-ds .rfx-fin-resp-tplchip:focus { outline: none; }
.rfx-ds .rfx-fin-resp-tplchip:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
/* Variante PORTAIL (2026-09-23) : même puce, mais lisible — côté entreprise, récupérer le modèle est une étape du
   parcours, alors que l'acheteur ne le retélécharge qu'occasionnellement. En NAVY et non en teal : le teal est la
   couleur de ce que l'entreprise fait (déposer, reprendre), le modèle vient de l'acheteur. Navy `#2D3E50`, couleur
   structurante du DS, plutôt qu'un bleu inédit ; l'ambre et le rouge restent réservés aux manques et aux erreurs. */
.rfx-ds .rfx-fin-resp-tplchip-strong { padding: 3px 11px; font-size: 0.76rem; font-weight: 600; color: #2D3E50; border-color: #cbd5e1; background: #f1f5f9; }
.rfx-ds .rfx-fin-resp-tplchip-strong i { font-size: 0.72rem; }
.rfx-ds .rfx-fin-resp-tplchip-strong:hover { background: #e2e8f0; border-color: #94a3b8; color: #1b2a4a; }
/* La regle scopee `.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)` (specificite 0,4,1) colore TOUS les liens
   de la zone en teal : elle battait les deux regles ci-dessus, et la puce sortait teal - le gris prevu cote acheteur
   comme le bleu voulu cote portail n'arrivaient jamais a l'ecran. On egale sa specificite en chainant les classes
   de la puce, plutot que de poser un !important. */
.rfx-ds .container-scrollable a.rfx-fin-resp-tplchip:not(.btn) { color: #8fa1b3; }
.rfx-ds .container-scrollable a.rfx-fin-resp-tplchip:not(.btn):hover { color: #0d9488; }
.rfx-ds .container-scrollable a.rfx-fin-resp-tplchip.rfx-fin-resp-tplchip-strong { color: #2D3E50; }
.rfx-ds .container-scrollable a.rfx-fin-resp-tplchip.rfx-fin-resp-tplchip-strong:hover { color: #1b2a4a; }
/* Telechargement du livrable remis : bouton LIBELLE (l icone seule etait trop discrete pour l action principale). */
.rfx-ds .rfx-fin-resp-dlbtn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border: 1px solid #cfe3e0; border-radius: var(--r-md, 6px); background: #fff; color: #0d9488; font-size: 0.76rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.rfx-ds .rfx-fin-resp-dlbtn:hover { background: rgba(13,148,136,0.08); border-color: #0d9488; color: #0b7d72; text-decoration: none; }
.rfx-ds .rfx-fin-resp-dlbtn:focus { outline: none; }
.rfx-ds .rfx-fin-resp-dlbtn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
/* Espace au-dessus du bloc « Documents complementaires remis » (retour Olivier : il collait a la checklist). */
/* ⚠ PAS de selecteur d adjacence : le partial des livrables emet un <script> entre les deux cards, ce qui
   casse `+`. La classe est posee explicitement en Twig quand des livrables precedent. */
.rfx-ds .rfx-docs-block-spaced > .rfx-card-header { padding-top: 24px; }
/* Livrable REMIS : coller la ligne du document au titre (meme respiration au-dessus qu en dessous),
   pour reduire la hauteur de l encadre — retour Olivier 2026-08-27. */
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-row { padding: 7px 10px 6px; }
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-docs { margin: 0 !important; }
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-docs .rfx-pdoc-row { padding-top: 3px; padding-bottom: 0; border-bottom: none; }
.rfx-ds .rfx-fin-card-compact .rfx-fin-resp-empty { margin: 2px 0 0; }
/* Ce bloc-la n a qu UN seul encadre, entourant TOUS les documents (et non un par ligne). */
.rfx-ds .rfx-docs-box { border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); padding: 4px 12px; background: #fff; }
.rfx-ds .rfx-docs-box .rfx-pdoc-row:last-child { border-bottom: none; }


/* ═══ Offres acheteur — card entreprise repliable (2026-08-27) ═══
   Les entreprises restent empilees : pouvoir replier celles qu on a deja lues evite de scroller
   indefiniment. Depliees par defaut, comme avant. Le repli ne cache QUE le corps. */
.rfx-ds .rfx-card-toggle { cursor: pointer; user-select: none; }
.rfx-ds .rfx-card-toggle:hover .rfx-card-title { color: #0d9488; }
.rfx-ds .rfx-card-toggle:focus { outline: none; }
.rfx-ds .rfx-card-toggle:focus-visible { outline: 2px solid #0d9488; outline-offset: -2px; }
.rfx-ds .rfx-card-caret { color: #94a3b8; font-size: 0.72rem; transition: transform .15s; }
.rfx-ds .rfx-card.is-collapsed > .rfx-card-body { display: none; }
.rfx-ds .rfx-card.is-collapsed > .rfx-card-header { border-bottom: none; }
.rfx-ds .rfx-card.is-collapsed .rfx-card-caret { transform: rotate(-90deg); }


/* Texte riche dans le corps d une card (synthese d offre, onglet Resumes) : le contenu vient d un editeur,
   on borne l interlignage et la taille pour qu il ne deborde pas de la charte. 2026-08-27. */
.rfx-ds .rfx-card-richtext { font-size: 0.88rem; color: #2D3E50; line-height: 1.6; }
.rfx-ds .rfx-card-richtext p:last-child { margin-bottom: 0; }
.rfx-ds .rfx-card-richtext img { max-width: 100%; height: auto; }
.rfx-ds .rfx-card-richtext table { max-width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════════
   Flèches de défilement horizontal G/D — composant TRANSVERSE (2026-08-27)
   Volontairement HORS du scope `.rfx-ds` : servi par la matrice Contrats et le
   Pilotage (dans `.rfx-ds`) ET par l'onglet « Appel d'offres » du dossier (dans
   `.prj-rfp`, qui n'est pas sous `.rfx-ds`). Piloté par initTableScrollNav()
   (public/js/app.js) : `is-visible` n'est posé que si le tableau déborde vraiment.
   ═══════════════════════════════════════════════════════════════════════════════ */
.ds-scrollnav { display: none; align-items: center; gap: 2px; margin-left: auto; }
.ds-scrollnav.is-visible { display: inline-flex; }
.ds-scrollnav-btn { border: 0; background: transparent; color: #0d9488; padding: 2px 6px; line-height: 1; font-size: 0.95rem; cursor: pointer; border-radius: var(--r-sm, 3px); }
.ds-scrollnav-btn i { font-size: 0.95rem; }
.ds-scrollnav-btn:hover:not(:disabled) { background: rgba(13,148,136,0.10); }
.ds-scrollnav-btn:disabled { color: #cbd5e1; cursor: default; }
/* Outline navigateur retirée au clic, conservée au clavier (règle projet). */
.ds-scrollnav-btn:focus { outline: none; }
.ds-scrollnav-btn:focus-visible { outline: 2px solid rgba(13,148,136,0.35); outline-offset: 1px; }
/* Dans l'en-tête de card du dossier, `prj-rfp-card-count` porte déjà le margin-left:auto :
   les flèches viennent en fin de ligne, collées au compteur. */
.prj-rfp-card-header .ds-scrollnav { margin-left: 10px; }


/* ═══════════════════════════════════════════════════════════════════════════════
   Offres acheteur › sous-onglet « Contrats » — matrice documents × entreprises
   (refonte 2026-08-27). Lignes = documents contractuels de l'ACHETEUR (union des
   rounds <= round courant), colonnes = entreprises ayant envoyé une offre au round
   courant, cellules = accord agrégé sur tous les rounds <= courant.
   ═══════════════════════════════════════════════════════════════════════════════ */
.rfx-ds .rfx-ctrm-tablewrap { overflow-x: auto; }
/* `max-content` + `min-width:100%` : le tableau prend la largeur de son contenu (donc
   déborde et déclenche les flèches) sans se rétrécir quand il y a peu d'entreprises. */
.rfx-ds .rfx-ctrm-table { width: max-content; min-width: 100%; margin-bottom: 0; border-collapse: collapse; }
.rfx-ds .rfx-ctrm-table thead th { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; vertical-align: bottom; padding: 11px 14px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.rfx-ds .rfx-ctrm-table tbody td { font-size: 0.82rem; color: #2D3E50; vertical-align: middle; padding: 10px 14px; border-top: 1px solid #f1f5f9; background: #fff; }
.rfx-ds .rfx-ctrm-table tbody tr:hover td { background: #f6fafb; }
/* Colonne « Document » figée. Le fond OPAQUE est obligatoire : sans lui, les colonnes
   entreprises défileraient visiblement sous le nom du document. */
.rfx-ds .rfx-ctrm-table thead th:first-child,
.rfx-ds .rfx-ctrm-table tbody td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid #e2e8f0; min-width: 280px; }
.rfx-ds .rfx-ctrm-table tbody tr:hover td:first-child { background: #f6fafb; }
.rfx-ds .rfx-ctrm-doc { display: flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-ctrm-doc-ic { color: #94a3b8; font-size: 0.85rem; flex: 0 0 auto; }
.rfx-ds .rfx-ctrm-doc-name { font-weight: 600; }
.rfx-ds .rfx-ctrm-round { font-size: 0.68rem; color: #94a3b8; white-space: nowrap; flex: 0 0 auto; }
.rfx-ds .rfx-ctrm-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 7px; border-radius: var(--r-full, 999px); background: #eef2f6; color: #64748b; white-space: nowrap; flex: 0 0 auto; }
.rfx-ds .rfx-ctrm-dl { margin-left: auto; color: #0d9488; flex: 0 0 auto; padding-left: 10px; }
.rfx-ds .rfx-ctrm-dl:hover { color: #0b7d72; }
/* Colonne entreprise : nom sur plusieurs lignes plutôt qu'une colonne interminable. */
.rfx-ds .rfx-ctrm-sup { text-align: center; min-width: 110px; max-width: 170px; white-space: normal; line-height: 1.3; }
/* Cellules : mêmes symboles que la checklist des livrables (.rfx-fin-resp-state). */
.rfx-ds .rfx-ctrm-cell { text-align: center; font-size: 1rem; color: #cbd5e1; }
.rfx-ds .rfx-ctrm-cell.is-agreed { color: #0d9488; }
/* « Sans objet » : le document n'a jamais été soumis à cette entreprise. Volontairement
   plus pâle qu'un cercle vide, pour ne pas se lire comme un refus. */
.rfx-ds .rfx-ctrm-cell.is-na { color: #dde3ea; cursor: help; }
.rfx-ds .rfx-ctrm-empty { padding: 14px 16px; font-size: 0.82rem; color: #94a3b8; }
/* Légende sous la matrice : rappelle ce que valent les 3 symboles. */
.rfx-ds .rfx-ctrm-legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 16px; border-top: 1px solid #f1f5f9; font-size: 0.72rem; color: #94a3b8; }
.rfx-ds .rfx-ctrm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rfx-ds .rfx-ctrm-legend .is-agreed { color: #0d9488; }
/* Intitule du groupe de cards « documents complementaires remis », sous la matrice. */
.rfx-ds .rfx-ctrm-section { display: flex; align-items: center; margin: 26px 0 10px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }

/* Badge « round + date de remise » sur la ligne d'un document (rfp_results/documents.html.twig,
   rendu seulement si l'appelant passe `roundLabel`). Discret : c'est un reperage, pas une donnee
   principale. Retour Olivier 2026-08-27 - remplace le sous-titre par round, qui coutait une ligne. */
.rfx-ds .rfx-pdoc-round { flex: 0 0 auto; font-size: 0.68rem; font-weight: 600; color: #64748b; background: #eef2f6; border-radius: var(--r-full, 999px); padding: 2px 9px; white-space: nowrap; }
/* Plusieurs rounds dans le meme encadre = plusieurs listes accolees : on supprime la marge de la 2e
   et des suivantes pour qu elles se lisent comme une seule liste continue. Scope dedie : la regle ne
   doit pas toucher les autres sous-onglets qui utilisent aussi .rfx-docs-box. */
.rfx-ds .rfx-ctrm-docs .rfx-pdoc-list + .rfx-pdoc-list { margin-top: 0; }

/* Encadre de la matrice : meme famille visuelle que .rfx-card (les cards Entreprises juste en dessous),
   mais SANS en-tete - le titre est desormais un titre de SECTION au-dessus (retour Olivier 2026-08-27). */
.rfx-ds .rfx-ctrm-box { background: #fff; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); overflow: hidden; }
/* 1re section : elle suit immediatement le chapeau teal, pas besoin de la marge haute pleine. */
.rfx-ds .rfx-ctrm-section-first { margin-top: 14px; }


/* ═══════════════════════════════════════════════════════════════════════════════
   Offres acheteur > sous-onglet « Questionnaires » — reskin 2026-08-27.
   PREFIXE DEDIE `.rfx-qres-*` : la famille `.rfx-q-*` est partagee par TROIS modules
   (Echanges, Questionnaires du portail scopes `.rfx-qset-panel`, et l acheteur qui n avait
   AUCUN scope propre). Toute regle non scopee repeindrait les deux autres — cf. §11.7 du doc
   de chantier. Les classes `.rfx-qset-cat1/2` et `.rfx-qview-card`, elles, sont deja
   generiques sous `.rfx-ds` : reutilisees telles quelles, rien a dupliquer ici.
   ═══════════════════════════════════════════════════════════════════════════════ */
.rfx-ds .rfx-qres { padding-top: 4px; }
/* Le titre et la consigne sont peints par les regles GENERIQUES `.rfx-ds .container-scrollable
   .rfx-q-title|-detail`, qui posent un retrait pense pour le portail. Dans une card on repart de 0. */
.rfx-ds .rfx-qres .rfx-qview-card .rfx-q-title { padding-left: 0 !important; margin: 0 0 2px !important; }
.rfx-ds .rfx-qres .rfx-qview-card .rfx-q-detail { padding-left: 0 !important; }

/* Une reponse = un bloc identifie par l entreprise. Avec 5 entreprises empilees sous chaque
   question, c est l etiquette qui permet de balayer du regard : filet teal a gauche + nom. */
/* ⚠️ `!important` + specificite elevee OBLIGATOIRES : la regle du portail
   `.rfx-ds .rfx-qview-card > div { padding-left: 0 !important; }` (l.22181) gagne sinon la cascade,
   et le texte se colle au filet vertical. Diagnostique par analyse de cascade apres DEUX correctifs
   sans effet - la regle etait ecrite, elle n etait simplement jamais appliquee. */
.rfx-ds .rfx-qres .rfx-qview-card > .rfx-qres-answer { margin-top: 14px; padding: 2px 0 4px 16px !important; border-left: 2px solid rgba(13,148,136,0.35); }
.rfx-ds .rfx-qres-answer:first-of-type { margin-top: 12px; }
.rfx-ds .rfx-qres-sup { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 24px; }
.rfx-ds .rfx-qres-sup-name { font-size: 0.78rem; font-weight: 600; color: #0b7d72; }
/* Valeur : on annule l italique gris « brouillon » du rendu d origine — c est une donnee, pas une note. */
.rfx-ds .rfx-qres .rfx-qres-value { padding-left: 0 !important; margin-top: 3px; font-style: normal; color: #0f172a; font-size: 0.88rem; line-height: 1.55; }
.rfx-ds .rfx-qres .rfx-qres-value p:last-child { margin-bottom: 0; }
/* « Reponse modifiee » : pastille ambre plutot que du texte rouge entre parentheses. */
.rfx-ds .rfx-qres-changed { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 7px; border-radius: var(--r-full, 999px); background: rgba(245,158,11,0.14); color: #b45309; }
/* « Tout telecharger » sur la ligne du nom de l entreprise (retour Olivier 2026-08-27) : en pied de
   liste il consommait une ligne entiere par reponse, or il y a une liste par entreprise ET par question. */
.rfx-ds .rfx-qres-dlall { margin-left: auto; }
.rfx-ds .rfx-qres-dlall .rfx-pdoc-dlall { gap: 7px; font-size: 0.76rem; padding: 0; }
/* Documents joints a une reponse : encadre resserre, la liste vit deja dans un bloc de reponse. */
.rfx-ds .rfx-qres-docs { margin-top: 8px; }
.rfx-ds .rfx-qres-docs .rfx-pdoc-list { margin: 4px 0 2px; }
/* Question sans reponse : le vide doit etre EXPLICITE, mais discret. */
.rfx-ds .rfx-qres-empty { margin-top: 10px; font-size: 0.82rem; color: #94a3b8; }

/* Export des questionnaires remonte dans la ligne de titre de la card : le padding bas de
   `.rfx-qual-export`, prevu pour une barre d onglets, y creerait un decalage vertical. */
.rfx-ds .rfx-card-header .rfx-qual-export { padding-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════════════
   Offres acheteur > Propositions financieres — pastilles « nom + montant » (C2.1, 2026-08-27).
   Une entreprise est rendue a la fois : ces pastilles sont le selecteur. Elles partagent la ligne
   des sous-sous-onglets pour ne pas empiler une 4e rangee d onglets.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* La rangee de pastilles defile horizontalement plutot que de repousser les onglets. */
.rfx-ds .rfx-fin-pills { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 4px; overflow-x: auto; }
.rfx-ds .rfx-fin-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px); background: #fff; color: #334155; font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.rfx-ds .rfx-fin-pill:hover { border-color: #0d9488; color: #0b7d72; text-decoration: none; }
.rfx-ds .rfx-fin-pill.is-active { border-color: #0d9488; background: #e6f7f4; color: #0b7d72; }
.rfx-ds .rfx-fin-pill-name { font-weight: 600; }
/* Montant en chiffres tabulaires : les pastilles s alignent visuellement d une entreprise a l autre. */
.rfx-ds .rfx-fin-pill-amount { font-size: 0.76rem; color: #64748b; font-variant-numeric: tabular-nums; }
.rfx-ds .rfx-fin-pill.is-active .rfx-fin-pill-amount { color: #0b7d72; }
.rfx-ds .rfx-fin-pill:focus { outline: none; }
.rfx-ds .rfx-fin-pill:focus-visible { outline: 2px solid rgba(13,148,136,0.35); outline-offset: 2px; }
/* Selecteur segmente des 3 vues financieres, pose a droite dans la ligne du chapeau teal.
   Reutilise `.rfx-q-toggle` du design system : seule la position est definie ici. */
.rfx-ds .rfx-fin-chapeau .rfx-fin-views { margin-left: auto; }


/* ═══════════════════════════════════════════════════════════════════════════════
   Offres acheteur > Propositions financieres — retours de recette (C2.1b, 2026-08-27).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Action globale « tout exporter » dans le bandeau, a gauche du selecteur de vue. */
.rfx-ds .rfx-fin-chapeau-action { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-fin-chapeau-action + .rfx-fin-views { margin-left: 12px; }
/* Synthese de decision (B1.1) : bouton du bandeau de l Analyse + modale de generation. */
.rfx-ds .rfx-fin-chapeau .rfx-sum-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #0d9488; background: #fff; color: #0f766e; font-size: 0.85rem; font-weight: 600; padding: 6px 12px; border-radius: var(--r-md, 6px); cursor: pointer; white-space: nowrap; }
.rfx-ds .rfx-fin-chapeau .rfx-sum-btn:hover { background: #0d9488; color: #fff; }
.rfx-ds .rfx-fin-chapeau .rfx-sum-btn i { color: inherit; font-size: 0.85rem; }
.rfx-ds .rfx-fin-chapeau .rfx-sum-btn:focus { outline: none; }
.rfx-ds .rfx-fin-chapeau .rfx-sum-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
/* Pire cas mesure (allemand) : 87 caracteres dans le bandeau. Sous 1500 px, le bouton passe en icone seule (tooltip). */
@media (max-width: 1500px) { .rfx-ds .rfx-fin-chapeau .rfx-sum-btn-label { display: none; } .rfx-ds .rfx-fin-chapeau .rfx-sum-btn { padding: 6px 9px; } }
/* Vue Evolution de l Analyse (B1.2) : trajectoire des offres au fil des rounds. */
.rfx-ds .rfx-evo-empty { padding: 40px 16px; text-align: center; color: #64748b; font-size: 0.95rem; }
.rfx-ds .rfx-evo-empty i { display: block; font-size: 1.6rem; margin-bottom: 8px; color: #94a3b8; }
.rfx-ds .rfx-evo-hint { margin: 0 0 14px; }
.rfx-ds .rfx-evo-metric { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rfx-ds .rfx-evo-metric-label { font-size: 0.82rem; color: #64748b; }
.rfx-ds .rfx-evo-metric-hint { font-size: 0.8rem; color: #64748b; }
.rfx-ds .rfx-evo-toggle .rfx-q-toggle-btn { padding: 4px 12px; font-size: 0.8rem; }
.rfx-ds .rfx-evo-card { background: #fff; border: 1px solid #e7ecf1; border-radius: var(--r-md, 6px); padding: 14px 16px; margin: 0 0 14px; }
.rfx-ds .rfx-evo-card-title { font-size: 0.95rem; font-weight: 600; color: #2D3E50; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-evo-card-title i { color: #0d9488; }
.rfx-ds .rfx-evo-card-sub { font-weight: 400; color: #64748b; font-size: 0.82rem; }
.rfx-ds .rfx-evo-scroll { overflow-x: auto; }
.rfx-ds .rfx-evo-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rfx-ds .rfx-evo-table th { text-align: left; vertical-align: bottom; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; background: #f8fafc; }
.rfx-ds .rfx-evo-table td { padding: 10px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.rfx-ds .rfx-evo-th-company { width: 18%; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.rfx-ds .rfx-evo-th-round .rfx-evo-round, .rfx-ds .rfx-evo-th-cum .rfx-evo-round { display: block; font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-evo-round-meta { display: block; font-size: 0.74rem; font-weight: 400; color: #64748b; margin-top: 2px; }
.rfx-ds .rfx-evo-th-cum { background: #f0fdfa; }
.rfx-ds .rfx-evo-cum { background: #f7fdfb; }
.rfx-ds .rfx-evo-added { color: #0f766e; }
.rfx-ds .rfx-evo-company { font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-evo-total { font-weight: 600; color: #2D3E50; white-space: nowrap; }
.rfx-ds .rfx-evo-absent { color: #94a3b8; font-style: italic; font-size: 0.8rem; }
.rfx-ds .rfx-evo-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 8px; border-radius: var(--r-full, 999px); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.rfx-ds .rfx-evo-delta-big { font-size: 0.9rem; padding: 3px 10px; }
.rfx-ds .rfx-evo-delta-down { background: #dcfce7; color: #166534; }
.rfx-ds .rfx-evo-delta-up { background: #fee2e2; color: #991b1b; }
.rfx-ds .rfx-evo-delta-same { background: #f1f5f9; color: #475569; }
.rfx-ds .rfx-evo-delta-good { color: #166534; }
.rfx-ds .rfx-evo-delta-bad { color: #991b1b; }
.rfx-ds .rfx-evo-detail { font-size: 0.74rem; color: #64748b; margin-top: 3px; white-space: nowrap; }
.rfx-ds .rfx-evo-new { color: #0f766e; }
.rfx-ds .rfx-evo-warn { color: #b45309; }
.rfx-ds .rfx-evo-score { font-weight: 600; color: #2D3E50; }
.rfx-ds .rfx-evo-score-delta { font-size: 0.76rem; margin-left: 6px; font-weight: 600; }
.rfx-ds .rfx-evo-moves { border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); margin: 0 0 8px; }
.rfx-ds .rfx-evo-moves-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #2D3E50; text-decoration: none; cursor: pointer; }
.rfx-ds .rfx-evo-moves-head:hover { background: #f8fafc; text-decoration: none; }
.rfx-ds .rfx-evo-moves-head:focus { outline: none; }
.rfx-ds .rfx-evo-caret { font-size: 0.75rem; color: #94a3b8; transition: transform .15s; }
.rfx-ds .rfx-evo-moves-head:not(.collapsed) .rfx-evo-caret { transform: rotate(90deg); }
.rfx-ds .rfx-evo-moves-name { font-weight: 600; flex: 0 0 auto; }
.rfx-ds .rfx-evo-pill { font-size: 0.76rem; padding: 1px 8px; border-radius: var(--r-full, 999px); font-weight: 600; }
.rfx-ds .rfx-evo-pill-down { background: #dcfce7; color: #166534; }
.rfx-ds .rfx-evo-pill-up { background: #fee2e2; color: #991b1b; }
.rfx-ds .rfx-evo-pill-new { background: #e6f7f4; color: #0f766e; }
.rfx-ds .rfx-evo-moves-body { padding: 0 12px 12px; }
.rfx-ds .rfx-evo-moves-col { min-width: 0; margin-top: 6px; }
.rfx-ds .rfx-evo-sign-down { color: #166534; }
.rfx-ds .rfx-evo-sign-up { color: #991b1b; }
.rfx-ds .rfx-evo-moves-label { font-size: 0.8rem; font-weight: 600; margin: 6px 0; }
.rfx-ds .rfx-evo-lines { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rfx-ds .rfx-evo-lines td { padding: 4px 6px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.rfx-ds .rfx-evo-line-lot { color: #64748b; width: 28%; word-break: break-word; }
.rfx-ds .rfx-evo-line-label { width: 36%; word-break: break-word; }
.rfx-ds .rfx-evo-lines { table-layout: fixed; }
.rfx-ds .rfx-evo-line-num { text-align: right; white-space: nowrap; width: 20%; }
.rfx-ds .rfx-evo-line-num + .rfx-evo-line-num { width: 16%; }
.rfx-ds .rfx-evo-chart { position: relative; height: 220px; }
.rfx-ds .rfx-evo-chart-ratings { height: 200px; margin-bottom: 10px; }
.rfx-ds .rfx-evo-card-chart { padding-bottom: 8px; }
.rfx-sum-field { margin: 14px 0 0; }
.rfx-sum-label { display: block; font-size: 0.82rem; font-weight: 600; color: #2D3E50; margin: 0 0 6px; }
.rfx-sum-label-hint { font-weight: 400; color: #64748b; }
.rfx-sum-natures { display: flex; gap: 10px; flex-wrap: wrap; }
.rfx-sum-nature { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); cursor: pointer; margin: 0; background: #fff; }
.rfx-sum-nature input { position: absolute; opacity: 0; pointer-events: none; }
.rfx-sum-nature.is-active { border-color: #0d9488; background: #f0fdfa; }
.rfx-sum-nature-title { font-size: 0.88rem; font-weight: 600; color: #2D3E50; }
.rfx-sum-nature-hint { font-size: 0.78rem; color: #64748b; line-height: 1.3; }
.rfx-sum-checks { display: flex; flex-direction: column; gap: 6px; }
.rfx-sum-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #334155; margin: 0; cursor: pointer; }
.rfx-sum-check input { margin: 0; }
.rfx-sum-required { margin-top: 6px; font-size: 0.8rem; color: #b45309; }
.rfx-sum-required i { margin-right: 4px; }

/* ⚠️ Contraste du selecteur : pose SUR le chapeau teal (#e6f7f4), son etat actif d origine
   (#d9f2ee) etait quasi invisible — on ne savait pas quelle vue etait selectionnee (retour
   Olivier). Conteneur blanc + actif en teal PLEIN : la selection se lit d un coup d oeil. */

/* Case « Afficher sous-totaux » : reglage de la grille, logee dans l en-tete de sa card. */
.rfx-ds .rfx-fin-subtotals { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 16px; font-size: 0.78rem; font-weight: 500; color: #64748b; cursor: pointer; }
.rfx-ds .rfx-fin-subtotals input { margin: 0; cursor: pointer; }

/* Une seule icone sur « Exporter les grilles » : `.btn-export::before` en injecte deja une,
   on la neutralise ici pour garder l icone explicite du markup, differente de celle du bouton
   global (retour Olivier). */
.rfx-ds .rfx-fin-export-one::before { content: none; }

/* Chaque grille devient un bloc identifiable : nom marque, et de l air entre deux grilles. */
.rfx-ds .rfx-fin-grid + .rfx-fin-grid { margin-top: 28px; padding-top: 22px; border-top: 1px solid #eef2f6; }
.rfx-ds .rfx-fin-grid-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0 6px; }
.rfx-ds .rfx-fin-grid-name { font-size: 0.95rem; font-weight: 700; color: #0b7d72; }
.rfx-ds .rfx-fin-grid-meta { font-size: 0.78rem; color: #94a3b8; font-style: italic; }
.rfx-ds .rfx-fin-grid-head .ds-scrollnav { margin-left: auto; }

/* Lignes de totaux / sous-totaux : le gris #dee2e6 est pose EN STYLE INLINE dans le tableau,
   d ou le `!important`. Scope `.rfx-fin-grid` OBLIGATOIRE : `_display_proposal_price_table` est
   partage avec le portail (bom_display, bom_edit_display), qu on ne doit pas repeindre. */
/* ⚠️ DEGRADE a 3 NIVEAUX, retour Olivier 2026-08-27 : ma 1re regle peignait les 3 d une seule
   couleur, ecrasant la hierarchie visuelle sous-lot < lot < grille qui existait en gris/bleu.
   Les couleurs d origine sont posees EN STYLE INLINE dans le tableau, d ou les `!important`. */
.rfx-ds .rfx-fin-grid .rfx-fin-sub-l3 { background-color: #eaf6f4 !important; }   /* TOTAL sous-lot  */
.rfx-ds .rfx-fin-grid .rfx-fin-sub-l2 { background-color: #b9e2db !important; }   /* TOTAL lot       */
.rfx-ds .rfx-fin-grid .rfx-fin-sub-l1 { background-color: #8ed0c6 !important; }   /* TOTAL grille    */
.rfx-ds .rfx-fin-grid .rfx-fin-sub-l1 td, .rfx-ds .rfx-fin-grid .rfx-fin-sub-l2 td { color: #0b4a44; }
.rfx-ds .rfx-fin-grid .toggled-row-subtotal td { color: #0f5f57; }
.rfx-ds .rfx-fin-grid .bg-grey { background-color: #f2f7f6 !important; }
.rfx-ds .rfx-fin-grid .text-info { color: #0b7d72 !important; }

/* Hover identique aux autres boutons ghost (retour Olivier) : sur le chapeau teal, le bouton ne
   reagissait pas. Fond teal clair + texte fonce, comme le bouton « Exporter les grilles ». */

/* ⚠️ Selecteur : le conteneur BLANC laissait croire que les vues non selectionnees etaient actives
   (retour Olivier). Il prend desormais le fond du bandeau : SEULE la vue active a un fond distinct. */

/* ⚠️ Modale « detail d une ligne de prix » : elle ne s ouvrait pas en pleine hauteur (retour
   Olivier 2026-08-27). Cause : la regle GLOBALE `.modal-dialog { align-items: center }` (l.41)
   centre la boite, or `resizeModalContainer()` calcule la hauteur du conteneur A PARTIR DE SA
   POSITION — plus la boite est centree, plus le conteneur demarre bas, plus la hauteur calculee
   est petite. Les deux mecanismes se contrarient.
   `align-items: stretch` fait occuper au dialogue toute la hauteur disponible : le conteneur
   demarre alors en haut et recoit la pleine hauteur. Scope sur CETTE modale uniquement — le
   centrage global reste la regle pour toutes les autres. */
#iterationPriceViewModal .modal-dialog { align-items: stretch; }
#iterationPriceViewModal .modal-content { width: 100%; }

/* ⚠️ SPECIFICITE : ces boutons sont des <a> dans `.container-scrollable`, donc peints par la regle
   generique `.rfx-ds .container-scrollable a:not(.btn):not(.nav-link) { color: #0d9488 }` — teal sur
   teal, texte invisible. Diagnostique par analyse de cascade apres DEUX correctifs sans effet.
   Le prefixe `.container-scrollable` servait a passer au-dessus ; il ne suffit PLUS depuis que le
   bandeau est SORTI du conteneur a defilement sur 2 des 3 vues (2026-09-05). La specificite est donc
   portee a 5 classes via `.rfx-fin-chapeau`, ce qui bat la generique QUEL QUE SOIT le conteneur, et
   les regles non actives sont ancrees sur `a`. NE PAS retirer `.rfx-fin-chapeau` de ces selecteurs. */
.rfx-ds .rfx-fin-chapeau .rfx-fin-views { background: transparent; border-color: #a9d8d0; }
.rfx-ds .rfx-fin-chapeau .rfx-fin-views a.rfx-q-toggle-btn { background: transparent; color: #1f4d47; text-decoration: none; }
.rfx-ds .rfx-fin-chapeau .rfx-fin-views a.rfx-q-toggle-btn:hover { background: rgba(255,255,255,0.6); color: #0b4a44; text-decoration: none; }
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-toggle-btn.active { background: #0d9488; color: #fff; }
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-toggle-btn.active:hover { background: #0b7d72; color: #fff; }
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-toggle-btn + .rfx-q-toggle-btn { border-left-color: #a9d8d0; }

/* Hover TEAL identique sur les DEUX boutons d export (bandeau et card) : le ghost par defaut vire au
   gris `#f1f5f9`, incoherent avec le reste de l ecran (retour Olivier). Meme prefixe pour la meme
   raison de specificite. */
.rfx-ds .container-scrollable .rfx-fin-chapeau-action .ds-btn-ghost:hover,
.rfx-ds .container-scrollable .rfx-card-head-action .ds-btn-ghost:hover { background: #d3ede8; color: #0b7d72; border-color: #9ed4cc; }


/* ═══════════════════════════════════════════════════════════════════════════════
   Grilles financieres acheteur : EN-TETE DE COLONNES FIGE (retour Olivier 2026-08-27).

   ⚠️ Pourquoi une boite de defilement DEDIEE, et pas un simple `position: sticky` :
   `sticky` se cale sur le conteneur de defilement le plus proche. Le tableau vit dans
   `.table-responsive`, qui a `overflow-x: auto` — cette boite EST un conteneur de defilement,
   mais sa hauteur suit son contenu, donc elle ne defile jamais verticalement : un en-tete
   sticky y resterait a sa place naturelle, sans effet. Il faut donc borner sa hauteur.

   ⚠️ Et surtout PAS `flex: 1` pour prendre « toute la hauteur » : le projet a deja essuye ce
   piege (cf. commentaire #13 plus haut) — dans une colonne qui defile et n est pas bornee, la
   grille s effondre a sa hauteur min-content, soit ~3 lignes. On reprend donc la valeur du
   portail : 62vh, choisie apres ce meme retour d experience.

   Consequence voulue : chaque grille devient une boite bornee. On defile DANS une grille
   (en-tete de colonnes fige, titre visible juste au-dessus car HORS de la boite), et on passe
   d une grille a l autre avec le defilement de page — les deux ne se disputent plus.
   ═══════════════════════════════════════════════════════════════════════════════ */
.rfx-ds .rfx-fin-grid .table-responsive { max-height: 62vh; overflow: auto; border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); }

/* ⚠️ Fond OPAQUE obligatoire sur TOUTES les cellules d en-tete : sans lui, les lignes defileraient
   visiblement dessous. Seules certaines portent `bg-grey` dans le markup, les autres etaient
   transparentes. */
.rfx-ds .rfx-fin-grid thead th { position: sticky; top: 0; z-index: 3; background: #fff; }
.rfx-ds .rfx-fin-grid thead th.bg-grey { background: #f2f7f6 !important; }
/* Le filet bas de l en-tete disparait au defilement (les bordures ne suivent pas un element
   sticky) : on le redessine en ombre portee. */
.rfx-ds .rfx-fin-grid thead th { box-shadow: inset 0 -1px 0 #e2e8f0; }

/* ═══ Retour Olivier 2026-08-27 : consequences de la boite bornee ci-dessus ═══════════════════
   1) La barre de defilement verticale de la boite venait se COLLER a la colonne des loupes.
      Le portail avait deja rencontre et regle exactement ce cas (voir la regle jumelle sur
      `.rfx-pbomgrid`) : on degage la derniere cellule, qui est celle de la loupe (le `<td>` de la
      loupe ferme le `<tr>` dans `_display_proposal_price_table`).
   2) Cette meme barre consomme de la largeur, ce qui suffisait a faire APPARAITRE une barre
      horizontale sur des grilles qui tenaient tout juste. On la rend fine (convention projet,
      cf. `.sp-sheet-body`) et on recupere de la largeur en resserrant les marges laterales de
      l onglet (`.rfx-fin-scroll`, arbitrage Olivier : « pas contre reduire un peu les marges »).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.rfx-ds .rfx-fin-grid .table-responsive td:last-child, .rfx-ds .rfx-fin-grid .table-responsive th:last-child { padding-right: 16px !important; }
.rfx-ds .rfx-fin-grid .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.rfx-ds .rfx-fin-grid .table-responsive::-webkit-scrollbar-track { background: transparent; }
.rfx-ds .rfx-fin-grid .table-responsive::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: var(--r-full, 999px); }
.rfx-ds .rfx-fin-grid .table-responsive::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Marges laterales resserrees sur CE sous-onglet uniquement (40px -> 16px, soit 48px rendus aux
   grilles). Classe portee par `rfp_results/proposal_financial.html.twig` : les autres pages en
   `.rfx-content-scroll` gardent leurs 40px. */
.rfx-ds .rfx-fin-scroll { padding-left: 28px; padding-right: 16px; }

/* ═══ Selecteur de grille alternative, dans la ligne de titre « Grilles de prix » (2026-08-27) ═══
   Il flottait auparavant au-dessus de la card de l entreprise, avec un titre <h2> legacy et un encart
   d aide (retour Olivier). Pose dans la ligne de titre des grilles, son role est evident : titre et
   encart ont donc ete supprimes.
   /!\ Les libelles portent `h4` (classe posee par le CONTROLEUR via `label_attr`), ecrase a 0.85rem
   par `.rfx-ds .container-scrollable .h4{...!important}` (spec 0,3,0). Il faut donc au moins 4 classes
   ET `!important` pour reprendre la main - cf. le piege deja rencontre sur les cellules de Pilotage. */
.rfx-ds .rfx-fin-altform { margin-left: auto; display: flex; align-items: center; margin-bottom: 0; }

/* ═══ Comparateur de grilles - barre haute (C2.3, 2026-08-27) ═════════════════════════════════
   Lignes INTITULEES : c est l intitule qui manquait le plus (5 radios sans titre, on ne savait pas
   ce qu on reglait). Une colonne de libelles a largeur fixe aligne les 3 lignes entre elles.
   /!\ Les libelles des radios portent `h4` (classe posee par le CONTROLEUR via `label_attr`),
   ecrase a 0.85rem par `.rfx-ds .container-scrollable .h4{...!important}` : il faut donc 4 classes
   ET `!important` pour reprendre la main - meme piege que sur le selecteur de scenario. */
.rfx-ds .rfx-cmp-head { margin-bottom: 4px; }
/* Une seule icone sur « Exporter selection » : `.rfx-ds .compare-export::before` en injecte une,
   on la neutralise au profit du `<i>` du markup - meme convention que `rfx-fin-export-one` sur la
   vue « Par entreprise ». « Exporter tout » garde, lui, l icone du `::before`. */
.rfx-ds .rfx-cmp-export-sel::before { content: none; }
.rfx-ds .rfx-cmp-header { flex-wrap: wrap; row-gap: 8px; }
.rfx-ds .rfx-cmp-header .rfx-card-head-action { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rfx-ds .rfx-cmp-row { display: flex; align-items: baseline; gap: 14px; padding: 5px 0; }
.rfx-ds .rfx-cmp-row + .rfx-cmp-row { border-top: 1px solid #f4f7fa; }
.rfx-ds .rfx-cmp-label { flex: 0 0 118px; font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #94a3b8; }
.rfx-ds .rfx-cmp-ctl { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; }
/* Les widgets de choix Symfony sont des conteneurs bloc : on les remet en ligne. */
.rfx-ds .rfx-cmp-ctl > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.rfx-ds .rfx-cmp-ctl .form-check { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.rfx-ds .rfx-cmp-ctl .form-check-input { position: static; margin: 0; cursor: pointer; }
.rfx-ds .container-scrollable .rfx-cmp-ctl .form-check-label { font-size: 0.82rem !important; font-weight: 500; color: #475569; margin: 0 0 0 7px; cursor: pointer; line-height: 1.2; }
.rfx-ds .container-scrollable .rfx-cmp-ctl .form-check-label:hover { color: #0f766e; }
.rfx-ds .container-scrollable .rfx-cmp-ctl .form-check-input:checked + .form-check-label { color: #0b7d72; font-weight: 700; }

/* Niveau de detail : 4 liens exclusifs presentes en segmente.
   /!\ L etat actif reste porte par `text-decoration-underline`, que le JS ajoute/retire (l. ~2000).
   On STYLE cette classe au lieu de toucher au JS - c est ce qui permet un reskin a zero ligne de JS. */
.rfx-ds .rfx-cmp-levels { display: inline-flex; align-items: center; background: #f1f5f9; border-radius: var(--r-full, 999px); padding: 2px; gap: 2px; }
.rfx-ds .rfx-cmp-levels > a { padding: 4px 14px; border-radius: var(--r-full, 999px); font-size: 0.8rem; font-weight: 500; color: #64748b; text-decoration: none !important; white-space: nowrap; }
.rfx-ds .rfx-cmp-levels > a:hover { color: #0f766e; }
.rfx-ds .rfx-cmp-levels > a.text-decoration-underline { background: #fff; color: #0b7d72; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.rfx-ds .rfx-cmp-subtotals { margin-left: 8px; }
/* Plein ecran + fleches, cales a DROITE de la ligne « Affichage » : ce sont des reglages
   d affichage, pas des actions de la ligne de titre (demande Olivier 2026-08-28). */
.rfx-ds .rfx-cmp-viewtools { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* Les fleches sont revelees par le helper (display:none tant qu il n y a pas de debordement) :
   on ne force donc PAS `display` ici, sous peine de les afficher en permanence. */
.rfx-ds .rfx-cmp-viewtools .ds-scrollnav { margin-left: 0; }
/* La case sous-totaux rend son libelle via le theme bootstrap_4 : meme traitement que les radios. */
.rfx-ds .container-scrollable .rfx-cmp-subtotals .form-check-label { padding-bottom: 0 !important; }

/* ═══ En-tete « Grilles de prix » : 4 elements sur une ligne (2026-08-27) ══════════════════════
   Depuis la suppression de la card « entreprise » (retour Olivier), cet en-tete porte le titre, la
   case « Afficher sous-totaux », l export et le selecteur de scenario. Sur une largeur contrainte,
   ca deborde : on autorise le retour a la ligne et on laisse le selecteur pousser a droite quand il
   y a la place. `align-items: center` conserve l alignement quand tout tient sur une ligne. */
.rfx-ds .rfx-fin-grid-header { flex-wrap: wrap; row-gap: 8px; }
/* Le selecteur ne prend le `margin-left:auto` QUE s il est seul a droite ; sinon il se range
   simplement apres l export, sans pousser une ligne vide devant lui. */
.rfx-ds .rfx-fin-grid-header .rfx-fin-altform { margin-left: 0; }
.rfx-ds .rfx-fin-grid-header .rfx-card-head-action { margin-left: auto; }
.rfx-ds .rfx-fin-altform .bom-selector { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.rfx-ds .rfx-fin-altform .form-check { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.rfx-ds .rfx-fin-altform .form-check-input { position: static; margin: 0; cursor: pointer; }
.rfx-ds .container-scrollable .rfx-fin-altform .form-check-label { font-size: 0.82rem !important; font-weight: 500; color: #475569; margin: 0 0 0 7px; cursor: pointer; line-height: 1.2; }
.rfx-ds .container-scrollable .rfx-fin-altform .form-check-label:hover { color: #0f766e; }
/* Le libelle de l option retenue est mis en avant : sans repere, deux scenarios se lisent pareil et
   on ne sait plus sur quelle hypothese les montants sont calcules. */
.rfx-ds .container-scrollable .rfx-fin-altform .form-check-input:checked + .form-check-label { color: #0b7d72; font-weight: 700; }
/* Asterisque de champ requis masquee : le choix est toujours pre-rempli, la marque n apporte rien ici. */
.rfx-ds .rfx-fin-altform .form-check-label.required::after { content: none; }

/* ═══ Lauréats - écran SANS grille de prix (zone D, étape D2 - 2026-08-28) ═══════════════
   Lignes « entreprise » de l'écran de choix des lauréats, dans ses deux états (case à cocher
   en brouillon, pastille de statut en lecture seule). Remplace une grille Bootstrap 12
   colonnes par une ligne flex, alignée sur .rfx-pdoc-row utilisée partout ailleurs.
   La pastille reprend EXACTEMENT la pastille a pois de la fiche Entreprise (.spl-header-pill,
   variable --pill-color) : meme forme, meme calcul de fond et de bordure. */
.rfx-ds .rfx-lau-list { margin-top: 4px; }
.rfx-ds .rfx-lau-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #eef2f6; }
.rfx-ds .rfx-lau-row:last-child { border-bottom: none; }
.rfx-ds .rfx-lau-list-editable .rfx-lau-row:hover { background: #f8fafb; }
/* Colonne de gauche a largeur fixe : la case a cocher et la pastille de statut occupent la
   meme place, les noms restent alignes entre les deux etats de l ecran. */
.rfx-ds .rfx-lau-mark { flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; }
/* Le theme bootstrap_4 rend la case dans un .form-check (padding-left 1.25rem + input en
   position absolue) : on neutralise ce decalage, la ligne flex place deja la case. */
.rfx-ds .rfx-lau-mark .form-check { display: flex; align-items: center; padding-left: 0; margin: 0; min-height: 0; }
/* ATTENTION : app.css (l. 3525) met l input REEL en opacity 0 et dessine le carre via le LABEL
   (label::before = la boite, label::after = la coche, en orange projet). Comme on masque ce label
   (il est vide ici), il faut RENDRE LA CASE NATIVE VISIBLE, sinon rien ne s affiche alors que la
   zone reste cliquable. Meme parade que les drawers Contrat / Entreprise / Tache :
   opacity: 1 !important + accent-color. Bug reel, signale par Olivier le 2026-08-28. */
/* Alignement vertical case / nom (retour Olivier 2026-08-28) : un input inline-block est cale sur
   la LIGNE DE BASE du texte, avec la place des jambages reservee dessous - la case remontait donc
   par rapport au nom. `display: block` sur l input + `flex` sur la .form-check suppriment ce
   decalage et laissent le centrage de la ligne faire son travail. */
.rfx-ds .rfx-lau-mark .form-check-input { display: block; position: static !important; opacity: 1 !important; margin: 0 !important; width: 15px !important; height: 15px !important; accent-color: #0d9488; cursor: pointer; }
.rfx-ds .rfx-lau-mark .form-check-label { display: none; }
/* Lecture seule : EXACTEMENT la meme case qu en edition (carre teal), simplement inerte.
   ATTENTION, PAS d attribut `disabled` : les navigateurs grisent une case desactivee meme avec
   `accent-color`, on perdrait le teal demande. La branche lecture seule ne porte AUCUN
   formulaire, une case active mais neutralisee par `pointer-events` ne soumet donc rien. */
.rfx-ds .rfx-lau-mark .rfx-lau-cb-ro { display: block; width: 15px; height: 15px; margin: 0; accent-color: #0d9488; pointer-events: none; }
.rfx-ds .rfx-lau-name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.9rem; font-weight: 600; color: #2D3E50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfx-ds label.rfx-lau-name { cursor: pointer; }
.rfx-ds .rfx-lau-country { flex: 0 0 auto; font-size: 0.82rem; color: #64748b; }
.rfx-ds .rfx-lau-pills { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.rfx-ds .rfx-lau-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 0.7rem; font-weight: 600; border-radius: var(--r-sm, 3px); color: var(--pill-color, #2D3E50); background: color-mix(in srgb, var(--pill-color, #2D3E50) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pill-color, #2D3E50) 30%, transparent); white-space: nowrap; line-height: 1.35; }
.rfx-ds .rfx-lau-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pill-color, #2D3E50); display: inline-block; flex-shrink: 0; }
/* Envoi du mail d attribution : action isolee sous la liste. */
.rfx-ds .rfx-lau-send { margin-top: 16px; }
.rfx-ds .rfx-lau-send .ds-btn-primary i { margin-right: 7px; }
/* Mail deja envoye : encart d information, pas une alerte. */
.rfx-ds .rfx-lau-sent { margin: 16px 0 0; }
.rfx-ds .rfx-card-head-action .ds-btn-ghost i { margin-right: 6px; }

/* Bouton d alerte : geste IRREVERSIBLE, distinct du bouton d annulation (rouge) et du bouton
   d action (teal). Meme boite que le reste de la famille .ds-btn-*, seules les couleurs changent.
   Emploi actuel : « Integrer a la base Produits et Services » sur l ecran laureats avec grille. */
.ds-btn-ghost-warn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px; background: #fff; border: 1px solid #f0d19a; border-radius: var(--r-md, 6px); color: #a4680d; font-size: 0.8rem; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; }
.ds-btn-ghost-warn:hover, .ds-btn-ghost-warn:focus { background: #fdf6e8; border-color: #e0b96a; color: #8a5709; text-decoration: none; }

/* ═══ Laureats - ecran AVEC grille de prix (zone D, etape D3 - 2026-08-28) ══════════════════
   Les trois zones qui etaient empilees dans les encarts gris : choix de la metrique, import de
   fichier, et la ligne « Affichage ». Habillage seulement, aucun hook JS renomme. */
.rfx-ds .rfx-lau-metric { margin: 4px 0 12px; }
/* Import du fichier de selection : champ + bouton + message d attente sur une seule ligne. */
.rfx-ds .rfx-lau-import { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.rfx-ds .rfx-lau-import .form-control-file, .rfx-ds .rfx-lau-import input[type="file"] { flex: 0 1 320px; font-size: 0.8rem; }
.rfx-ds .rfx-lau-import > div { margin: 0; }
.rfx-ds .rfx-lau-display .form-check { padding-left: 1.25rem; }
.rfx-ds .rfx-lau-display .form-check-label { font-size: 0.85rem; color: #2D3E50; }
/* Message d attente des exports : posé sous les actions, plus dans leur en-tete. */
.rfx-ds #export-loading-msg { font-size: 0.82rem; color: #64748b; }
.rfx-ds .rfx-card-head-action #export-loading-msg { margin-left: 4px; }

/* 2026-09-28 : attente d'un export asynchrone (app.js, mbwExportWaitStart). Boutons d'export grises pendant la
   generation (un 2e clic ne relancait deja rien, mais rien ne le montrait) ; message sur une ligne : roue, etat,
   chronometre et icone d'info-bulle. !important : les regles des boutons DS sont plus specifiques. */
.mbw-export-pending { opacity: 0.5 !important; pointer-events: none !important; cursor: default !important; }
.mbw-export-wait { white-space: nowrap; }
.mbw-export-wait img { vertical-align: middle; }
.mbw-export-wait-time { font-variant-numeric: tabular-nums; }
.mbw-export-wait-hint { color: #94a3b8; cursor: help; margin-left: 2px; }

/* ═══ Laureats AVEC grille - retours Olivier du 2026-08-28 ══════════════════════════════════
   1) Les radios de la metrique s affichaient EN DOUBLE : app.css met l input reel en opacity 0 et
      dessine le rond via le label. Forcer opacity:1 faisait apparaitre LES DEUX. On laisse donc le
      rendu natif du projet et on se contente de mettre les choix en ligne.
      Meme famille de piege que la case a cocher de l ecran sans grille. */
.rfx-ds .rfx-lau-metric { display: inline-flex; align-items: center; gap: 22px; margin: 0; }
.rfx-ds .rfx-lau-metric > div, .rfx-ds .rfx-lau-metric .form-check { display: inline-flex; align-items: center; margin: 0; }
/* 2) Metrique et sous-totaux sur UNE SEULE ligne, puis les niveaux et le defilement sur la
      suivante - meme disposition que la ligne « Affichage » du comparateur. */
.rfx-ds .rfx-lau-display-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.rfx-ds .rfx-lau-display-row + .rfx-lau-display-row { margin-top: 12px; }
.rfx-ds .rfx-lau-display-row-levels { justify-content: space-between; }
.rfx-ds .rfx-lau-subtotals { padding-left: 1.25rem; margin: 0; }
.rfx-ds .rfx-lau-display .form-check-label { font-size: 0.85rem; color: #2D3E50; }
/* 3) Etapes numerotees : on reprend telles quelles les classes .rfx-qimport-* de la modale de
      chargement d une grille cote portail. Seuls les espacements propres a cette card sont poses. */
.rfx-ds .rfx-lau-steps { margin-top: 16px; }
.rfx-ds .rfx-lau-steps .rfx-qimport-zone { min-width: 0; }
.rfx-ds .rfx-lau-steps #export-loading-msg:empty { display: none; }
.rfx-ds .rfx-lau-steps-note { margin-top: 14px; font-size: 0.82rem; font-style: italic; color: #64748b; }
/* 4) Le bouton d alerte etait encadre ambre mais son texte et son icone restaient TEAL : la regle
      generique `.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)` (specificite 0,4,1) bat
      la classe du bouton (0,1,0). 6e occurrence de ce piege - on reprend sa forme + la classe.
      NE PAS toucher a la regle generique : plusieurs correctifs anterieurs sont cales dessus. */
.rfx-ds .container-scrollable a.ds-btn-ghost-warn:not(.btn):not(.nav-link) { color: #a4680d; }
.rfx-ds .container-scrollable a.ds-btn-ghost-warn:not(.btn):not(.nav-link):hover { color: #8a5709; }
/* 5) Marges cumulees au-dessus du bouton « Joindre un document justificatif ». Ce bouton est cree
      EN JAVASCRIPT par `_fine_uploader_documents`, enveloppe dans un `.form-group.row.mt-3` puis un
      `.col-sm-12` : gouttiere negative, marge haute et paddings s additionnaient dans la card. Le JS
      est partage par toute l app, on neutralise donc cote CSS, uniquement dans une card DS. */
.rfx-ds .rfx-card-body .form-group.row.mt-3 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; }
.rfx-ds .rfx-card-body .form-group.row.mt-3 > .col-sm-12 { padding-top: 0 !important; padding-bottom: 0 !important; }
.rfx-ds .rfx-card-body .form-group.row.mt-3 .add_element_link { margin: 0; }

/* ═══ Laureats AVEC grille - retours Olivier, 3e passe (2026-08-28) ═════════════════════════
   1) « Joindre un document » : le JS insere le bouton DANS #form_conclusionDocuments, pas en
      enfant direct du corps de card - le selecteur enfant precedent ne matchait rien. Ici on
      neutralise aussi l espace laisse par la collection vide elle-meme. */
.rfx-ds .rfx-card-body > div[id$="conclusionDocuments"] { margin: 0; }
.rfx-ds .rfx-card-body > div[id$="conclusionDocuments"] > .form-group.row.mt-3:first-child { margin-top: 0 !important; }

/* 2) Les trois etapes dans UN SEUL encadre : la bordure passe du bloc-etape au conteneur. */
.rfx-ds .rfx-lau-steps-box { border: 1px solid #e6ebf1; border-radius: var(--r-lg, 10px); padding: 14px 16px; gap: 18px; }
.rfx-ds .rfx-lau-steps-box .rfx-qimport-zone { border: none; border-radius: 0; padding: 0; }
/* Champ de fichier resserre : il occupait toute la largeur pour rien. */

/* 3) Radios de la metrique : Bootstrap 4 remet l input en `position: static` via
      `.form-check-inline .form-check-input` (0,2,0), ce qui bat le `position: absolute` d app.css
      (0,0,1). L input, INVISIBLE (opacity 0), occupait donc 13px + 5px de marge A GAUCHE du rond
      dessine par le label. C est le « parasite » signale. On le renvoie hors flux. */
.rfx-ds .rfx-lau-metric .form-check-inline .form-check-input { position: absolute !important; width: 0 !important; height: 0 !important; margin: 0 !important; opacity: 0; }
.rfx-ds .rfx-lau-metric .form-check-inline { padding-left: 0 !important; margin: 0 !important; }
.rfx-ds .rfx-lau-metric .form-check-inline + .form-check-inline { margin-left: 26px !important; }
.rfx-ds .rfx-lau-metric .radio-label { margin: 0; padding: 0; font-size: 0.85rem; font-weight: 400; color: #2D3E50; }

/* 4) « Afficher sous-totaux » : le libelle porte `pb-2` (8px sous le texte) qui le decalait vers
      le haut et laissait un blanc dessous. La `.form-check` du theme garde sa gouttiere gauche,
      c est elle qui loge la coche dessinee en `::before`. */
.rfx-ds .rfx-lau-subtotals { display: inline-flex; align-items: center; padding-left: 0; margin: 0; }
.rfx-ds .rfx-lau-subtotals .form-check { display: inline-flex; align-items: center; margin: 0; }
.rfx-ds .rfx-lau-subtotals .form-check-label { padding-bottom: 0 !important; padding-top: 0 !important; margin: 0; font-size: 0.85rem; font-weight: 400; color: #2D3E50; line-height: 1.4; }

/* 5) Documents et Commentaires cote a cote : l editeur riche ne doit pas deborder de sa card. */
.rfx-ds .rfx-card-row > .rfx-card .cke, .rfx-ds .rfx-card-row > .rfx-card .cke_chrome { max-width: 100%; }

/* ═══ Laureats AVEC grille - retours Olivier, 4e passe (2026-08-28) ═════════════════════════
   1) Les trois etapes cote a cote plutot que empilees : la card ne mange plus trois hauteurs
      pour trois lignes. L etape 3 est plus large, elle porte le champ et le bouton.
      Repli en colonne sous 1100px, sinon le champ de fichier devient illisible. */

/* 2) Cards Documents et Commentaires : hauteur reduite d environ 40%. L editeur riche est
      configure a 250px (`fos_ck_editor.yaml`, profil `notes`) ; on ne touche PAS a la config,
      partagee par d autres ecrans, on la surcharge ICI uniquement.
      ⚠️ Il faut cibler `.cke_contents` ET son iframe interne : sur le seul conteneur, la hauteur
      ne prend pas (piege deja rencontre sur les chapitres et le portail Financiere). */
.rfx-ds .rfx-card-row > .rfx-card > .rfx-card-body { padding-top: 12px; padding-bottom: 14px; }
.rfx-ds .rfx-card-row .comment-container { margin: 0; }

/* ═══ Hauteur de l editeur de commentaire - diagnostic complet (2026-08-28) ══════════════════
   Le rendu emet `CKEDITOR.inline("form_conclusionComment", ...)` sur un <textarea>. Deux
   consequences, verifiees sur le HTML reellement produit :
     - le parametre `height` du profil est IGNORE par CKEditor en mode inline (le reduire dans
       la config ou par champ ne change donc RIEN) ;
     - la zone editable n est ni `.cke_contents` ni `.cke_editable_inline`, mais un DIV frere du
       textarea : `div.cke_textarea_inline`, dont app.css l. 1409 fixe `min-height: 100px`.
   C est donc CETTE classe, et elle seule, qui commande la hauteur. Le projet a deja plusieurs
   surcharges du meme type (#addNoteModal, #taskModal, #qualification-set-container...). */
.rfx-ds .rfx-card-row .cke_textarea_inline { min-height: 66px !important; max-height: 130px; overflow-y: auto; padding: 7px 9px; }
/* Barre d outils compactee : a demi-largeur elle passait sur deux rangees, ce qui coutait plus de
   hauteur que la zone de saisie elle-meme. */
.rfx-ds .rfx-card-row .cke_top { padding: 3px 5px 2px !important; }
.rfx-ds .rfx-card-row .cke_toolgroup, .rfx-ds .rfx-card-row .cke_toolbar { margin: 0 4px 2px 0 !important; }
.rfx-ds .rfx-card-row a.cke_button { padding: 2px 4px !important; }
.rfx-ds .rfx-card-row .cke_bottom { display: none !important; }
/* Le conteneur du champ ne doit plus ajouter de blanc sous l editeur. */
.rfx-ds .rfx-card-row .cke { margin-bottom: 0 !important; }

/* Filet de securite sur la modale « detail d une ligne de prix » : si `modal-dialog-centered`
   revenait dans un template, son pseudo-element d espacement pleine hauteur recontrarierait
   `resizeModalContainer()` et la modale se rouvrirait courte. Neutralise pour cette modale. */
#iterationPriceViewModal .modal-dialog-centered::before { display: none; }
#iterationPriceViewModal .modal-dialog-centered { align-items: stretch; }

/* ═══ Deux correctifs DETERMINISTES (2026-08-28, apres deux tentatives sans effet) ═══════════

   A) Les 3 etapes ne remplissaient pas la largeur. Le dimensionnement en flex dependait de la
      base et du contenu de chaque zone ; plutot que de continuer a l ajuster a l aveugle, on passe
      en GRILLE : des colonnes en `fr` occupent TOUJOURS toute la largeur du conteneur, quel que
      soit leur contenu. Les trois colonnes sont de largeur EGALE (demande Olivier). */
.rfx-ds .rfx-lau-steps-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: start; }
.rfx-ds .rfx-lau-steps-box .rfx-qimport-zone { min-width: 0; }
.rfx-ds .rfx-lau-steps-box .rfx-qimport-zone + .rfx-qimport-zone { margin-left: 0; padding-left: 20px; border-left: 1px solid #f1f5f9; }
.rfx-ds .rfx-lau-steps-box .rfx-qimport-zone:not(:last-child) { padding-right: 20px; }
/* Le champ occupe la place restante de sa colonne, le bouton reste colle a droite. */
/* Capture F12 d Olivier : la colonne mesure bien 548px, mais le champ ne s etirait pas dedans -
   `flex-grow` sur un conteneur de widget ne suffit pas, le widget garde sa largeur intrinseque.
   Grille `1fr auto` : la 1re colonne prend TOUT le reste, quel que soit le contenu. */
.rfx-ds .rfx-lau-steps-box .rfx-qimport-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.rfx-ds .rfx-lau-steps-box .rfx-qimport-file { min-width: 0; }
/* Le widget lui-meme doit remplir sa colonne. */
.rfx-ds .rfx-lau-steps-box .rfx-qimport-file > *, .rfx-ds .rfx-lau-steps-box .rfx-qimport-file input,
.rfx-ds .rfx-lau-steps-box .rfx-qimport-file .form-control, .rfx-ds .rfx-lau-steps-box .rfx-qimport-file .custom-file,
.rfx-ds .rfx-lau-steps-box .rfx-qimport-file .custom-file-label { width: 100%; max-width: none; }
/* Le message d attente passe sous la ligne, sur toute la largeur. */
.rfx-ds .rfx-lau-steps-box .rfx-qimport-row > #waiting-upload-container { grid-column: 1 / -1; }
@media (max-width: 1100px) {
    .rfx-ds .rfx-lau-steps-box { grid-template-columns: 1fr; }
    .rfx-ds .rfx-lau-steps-box .rfx-qimport-zone + .rfx-qimport-zone { padding-left: 0; padding-top: 16px; border-left: none; border-top: 1px solid #f1f5f9; }
    .rfx-ds .rfx-lau-steps-box .rfx-qimport-zone:not(:last-child) { padding-right: 0; padding-bottom: 16px; }
}

/* B) Modale « Reponse au besoin » toujours pas en pleine hauteur. Retirer `modal-dialog-centered`
      et jouer sur `align-items` ne suffisait pas : la hauteur reelle est posee EN STYLE INLINE par
      `resizeModalContainer()` (app.js l.542), qui la calcule a partir de la position du conteneur.
      Seule une declaration `!important` bat un style inline. On neutralise donc ce calcul pour
      CETTE modale et on borne la hauteur au viewport - meme parade que #iterationPriceConfigurationModal
      (l. 20808) et #bomAlternativesModal. */
#iterationPriceViewModal .modal-content { max-height: calc(100vh - 3.5rem); overflow: hidden; display: flex; flex-direction: column; }
#iterationPriceViewModal .modal-header, #iterationPriceViewModal .modal-footer { flex: 0 0 auto; }
#iterationPriceViewModal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#iterationPriceViewModal .container-modal-scrollable { height: auto !important; min-height: 0 !important; overflow: visible !important; }
/* `.container` de Bootstrap dans le contenu injecte : il bridait la largeur du contenu. */
#iterationPriceViewModal .modal-body > .row > [class*="col"] > .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }

/* MARQUEUR-CSS-2026-08-28-D3 : chercher cette chaine dans la feuille chargee par le
   navigateur permet de savoir en 5 secondes si elle est a jour. */

/* ═══ Modale « Reponse au besoin » : c est #proposalPriceModal, PAS #iterationPriceViewModal ═══
   Trois tentatives ont porte sur la mauvaise modale. La loupe d une colonne ENTREPRISE ouvre
   `#proposalPriceModal` (titre `rfp.proposal.prices.modal.title` = « Reponse au besoin »), tandis
   que `#iterationPriceViewModal` est la loupe de la LIGNE (« Descriptif et documents transmis »).
   Structure injectee : .modal-header.ds-confirm-header > .modal-body.rfx-ppe > .container-modal-scrollable,
   dont la hauteur est posee EN INLINE par resizeModalContainer() - seul !important la bat. */
#proposalPriceModal .modal-dialog { align-items: stretch; }
#proposalPriceModal .modal-content { max-height: calc(100vh - 3.5rem); overflow: hidden; display: flex; flex-direction: column; width: 100%; }
#proposalPriceModal .modal-header, #proposalPriceModal .modal-footer { flex: 0 0 auto; }
#proposalPriceModal .modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#proposalPriceModal .container-modal-scrollable { flex: 1 1 auto; height: auto !important; min-height: 0 !important; overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BOUTONS BLEUS BOOTSTRAP -> CHARTE DS (decision Olivier, 2026-08-28 : regle globale, toute l app)

   Constat : `btn-primary` = 202 occurrences dans 129 fichiers, `btn-info` = 76 dans 66. AUCUNE
   regle ne les repeignait : c etait le bleu Bootstrap brut (#007bff / #17a2b8), absent de la charte.
   Il n existait que des rustines par ecran (drawers Tache, Projet, Contrat).

   Pourquoi une regle GLOBALE plutot qu un remplacement fichier par fichier : 195 fichiers, dont
   beaucoup de templates legacy dont on ignore s ils sont encore atteignables. Une regle unique les
   couvre tous, y compris ceux qu un inventaire aurait manques, et se retire en une ligne.

   ⚠️ SPECIFICITE : Bootstrap declare ses etats actifs en `.btn-primary:not(:disabled):not(.disabled):active`
   (0,3,0). On reprend EXACTEMENT ses selecteurs, sinon l etat actif resterait bleu. `app-ds.css` est
   charge en 9e position, bootstrap.min.css en 1re : a specificite egale, c est nous qui gagnons.
   ⚠️ `btn-blue` (#218698, ecrans d abonnement) n est PAS touche : c est une couleur projet distincte,
   deja proche du teal, et hors du perimetre des boutons Bootstrap.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Action PRINCIPALE : teal plein. */
.btn-primary { background-color: #0d9488; border-color: #0d9488; color: #fff; }
.btn-primary:hover { background-color: #0b7d72; border-color: #0b7d72; color: #fff; }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.35); }
.btn-primary.disabled, .btn-primary:disabled { background-color: #7fc9c2; border-color: #7fc9c2; color: #fff; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: #0b7d72; border-color: #0b7d72; color: #fff; }
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.35); }

/* Action SECONDAIRE (`btn-info` : « Rechercher », « Retour », filtres de tableau de bord) :
   variante contour, pour rester visuellement distincte du bouton principal. */
.btn-info { background-color: #fff; border-color: #0d9488; color: #0d9488; }
.btn-info:hover { background-color: #0d9488; border-color: #0d9488; color: #fff; }
.btn-info:focus, .btn-info.focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.25); }
.btn-info.disabled, .btn-info:disabled { background-color: #fff; border-color: #a9d8d0; color: #7fc9c2; }
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle { background-color: #0b7d72; border-color: #0b7d72; color: #fff; }

.btn-outline-primary { background-color: #fff; border-color: #0d9488; color: #0d9488; }
.btn-outline-primary:hover { background-color: #0d9488; border-color: #0d9488; color: #fff; }
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.25); }
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { background-color: #0d9488; border-color: #0d9488; color: #fff; }

/* Boutons « Ajouter » injectes en JS par le theme de formulaire (32 occurrences, 3 fichiers) :
   fond blanc, texte et contour teal (demande Olivier). Plus specifique que la regle generique
   ci-dessus, qui les aurait rendus teal PLEIN comme une action principale. */
.add_element_link.btn-primary, .add_element_link.btn.btn-primary { background-color: #fff; border-color: #0d9488; color: #0d9488; }
.add_element_link.btn-primary:hover, .add_element_link.btn.btn-primary:hover { background-color: rgba(13,148,136,0.07); border-color: #0d9488; color: #0d9488; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ENCARTS D INFORMATION : UN SEUL FORMAT, TROIS VARIANTES (arbitrage Olivier, 2026-08-29)

   Constat : 9 formats faisaient la meme chose avec des fonds legerement differents. Style retenu
   apres comparaison visuelle : fond teinte + FILET COLORE de 4px a gauche (« style C »).
   Le filet donne le niveau de gravite en vision peripherique, le fond laisse le texte respirer,
   et trois encarts d affilee sur un ecran restent lisibles.

   ⚠️ TOUT SE JOUE ICI, AUCUN TEMPLATE N EST MODIFIE : les anciens noms de classe pointent sur le
   nouveau format. Rien ne peut casser fonctionnellement, et se retire en supprimant ce bloc.

   ⚠️ RECENSEMENT : etabli en partant de l ICONE d information portee par chaque encart, jamais
   d une liste de noms devinee — c est ce qui avait laisse passer `.asm-callout`.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── TEAL : explique comment faire, toujours affiche ─────────────────────────────────────── */
.rfx-doc-hint,
.asm-callout,
/* Variantes SCOPEES des memes composants. Sans elles, `.asm-ds .asm-callout` (0,2,0) battait
   notre `.asm-callout` (0,1,0) : le filet passait, pas le fond. Defaut constate par Olivier sur
   l ecran « Evaluation des offres ». Meme cas pour 5 autres familles. */
.asm-ds .asm-callout,
.mya-ds .asm-callout,
/* Chapeaux du hub Administration (2026-08-29, etape 1). La variante scopee est
   indispensable : les regles du bloc « ADMIN RESKIN » sont en (0,2,0) et
   battraient un `.adm-hint` nu (0,1,0). */
.adm-hint,
.adm-ds .adm-hint,
.rfx-ds .rfx-q-hint,
.rfx-ds .rfx-ms-hint-bar,
.rfx-ds .scn-hint,
.rfx-ds .fbk-intro,
.rfx-q-hint,
.qrf-callout,
.wfh-invitation-help,
.rfx-ov-addblock-intro,
.ctr-doc-postvalidation-info-text,
.rfx-ms-hint-bar,
.fin-alert-success,
/* Les 19 encarts legacy a fond gris : VERIFIE, les 19 portent une icone d information, aucun
   bloc `media bg-light` de l app n est autre chose. */
.media.bg-light {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #d6ecea; border-left: 4px solid #0d9488;
    border-radius: var(--r-md, 8px);
    background: #f0fafa; color: #12554e;
    font-size: 0.85rem; line-height: 1.5;
    margin-bottom: 16px;
}
.rfx-doc-hint > i, .asm-callout > i, .rfx-q-hint > i, .qrf-callout > i,
.wfh-invitation-help > i, .media.bg-light i, .fin-alert-success > i,
.adm-hint > i, .adm-ds .adm-hint > i,
.rfx-ds .scn-hint > i,
.rfx-ds .fbk-intro > i,
.rfx-doc-hint .rfx-doc-hint-icon, .asm-callout .asm-callout-ic {
    color: #0d9488; flex: 0 0 auto; margin-top: 2px;
}

/* ── AMBRE : une condition reste a remplir, ou le geste est irreversible ─────────────────── */
.rfx-doc-hint--warn,
.pc-dates-hint,
.ctr-pilo-prog-empty,
.fin-mobile-notice,
.rfx-doc-warn,
.rfx-ds .rfx-doc-warn,
.rfx-ds .scn-warn,
.fin-scenario-pick,
.fin-pushed-scenario,
.ds-confirm-irreversible,
.fin-alert-info,
/* ⚠️ On ne cible QUE `alert-info` et `alert-warning` : `alert-danger` et `alert-success` sont les
   MESSAGES FLASH (notices.html.twig, main_alert) — les repeindre serait une regression. */
.alert-info,
/* Regle de gestion des listes du hub Administration (2026-08-29, etape 5a) : ce que
   l utilisateur doit savoir AVANT de supprimer ou renommer. En ambre parce que le geste
   engage - un renommage se propage a toute la plateforme. */
.adm-hint--warn,
.adm-ds .adm-hint--warn,
.alert-warning {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #f4e3bd; border-left: 4px solid #f59e0b;
    border-radius: var(--r-md, 8px);
    background: #fffbeb; color: #7c4a09;
    font-size: 0.85rem; line-height: 1.5;
    margin-bottom: 16px;
}
/* Reprise REUSSIE : teal, pas ambre. La classe de base sert AUSSI au bandeau d echec juste
   en dessous - d ou le modificateur, qui evite de peindre un echec en vert. */
.fin-pushed-scenario--ok{border-color:#99f6e4;border-left-color:#0d9488;background:#f0fdfa;color:#0f766e;}
.fin-pushed-scenario--ok > i{color:#0d9488;}

.rfx-ds .scn-warn > i,
.fin-scenario-pick > i,
.fin-pushed-scenario > i,
.rfx-doc-hint--warn > i, .pc-dates-hint > i, .ctr-pilo-prog-empty > i,
.fin-mobile-notice > i, .rfx-doc-warn > i, .ds-confirm-irreversible > i, .ds-confirm-irreversible i,
.adm-hint--warn > i, .adm-ds .adm-hint--warn > i,
.fin-alert-info > i, .alert-info > i, .alert-warning > i {
    color: #f59e0b; flex: 0 0 auto; margin-top: 2px;
}

/* ── ROUGE : une erreur s est produite ──────────────────────────────────────────────────── */
.adm-hint--alert,
.adm-ds .adm-hint--alert,
.rfx-doc-hint--alert,
.rfx-imperr,
.rfx-ds .rfx-imperr,
.rfx-cond-error,
.rfx-ds .rfx-cond-error,
.fin-alert-danger {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #f6d5d1; border-left: 4px solid #c0392b;
    border-radius: var(--r-md, 8px);
    background: #fef2f2; color: #8f2d20;
    font-size: 0.85rem; line-height: 1.5;
    margin-bottom: 16px;
}
.adm-hint--alert > i,
.rfx-doc-hint--alert > i, .rfx-imperr > i, .rfx-cond-error > i, .fin-alert-danger > i {
    color: #c0392b; flex: 0 0 auto; margin-top: 2px;
}

/* ── LAISSES DE COTE, sur decision d Olivier ───────────────────────────────────────────────
   `.rfx-access-setted` et `.rfx-cond-summary` : lignes de recapitulatif, pas des encarts.
   `.spl-upd-banner-*` et `.rfxp-updreq-banner` : bandeaux de demande de mise a jour, mise en
   forme dediee deja travaillee. `.alert-light` (Projets) : hors perimetre.
   `.alert-danger` / `.alert-success` : messages flash, ne JAMAIS repeindre. */

/* ── Intros de card du stepper « Parametrage » : encadrees en teal (demande Olivier 2026-08-29) ──
   `.rfx-card-intro` porte 16 paragraphes d introduction dans l AO. Onze sont de vraies consignes
   (« Presentez l appel d offres… », « Cochez les jalons a communiquer… ») : ils passent au format
   commun. Les cinq autres sont des LEGENDES DE REGLAGE (« Active, le remplissage est obligatoire… »),
   qui doivent rester des paragraphes discrets sous leur interrupteur.
   Elles portent deja `.rfx-cond-note` / `.rfx-access-note` : aucun template a modifier, le
   `:not()` suffit a les epargner.
   ⚠️ Les autres legendes citees par Olivier (« Communique aux entreprises consultees », « Langue
   par defaut du portail », « Modalite : accord a accepter ») portent `.rfx-field-hint` et
   `.rfx-cond-ro-type`, qui ne sont pas des `.rfx-card-intro` : elles ne sont pas concernees. */
.rfx-card-intro:not(.rfx-cond-note):not(.rfx-access-note) {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #d6ecea; border-left: 4px solid #0d9488;
    border-radius: var(--r-md, 8px);
    background: #f0fafa; color: #12554e;
    font-size: 0.85rem; line-height: 1.5;
    margin-bottom: 16px;
}
/* Ampoule posee EN CSS : ces paragraphes n ont pas de balise d icone, et on ne touche a aucun
   template. `far` (font-weight 400) est bien disponible pour cette icone — elle est deja employee
   sous cette forme a 128 endroits. Meme technique que les chevrons et coches du module Projets. */
.rfx-card-intro:not(.rfx-cond-note):not(.rfx-access-note)::before {
    content: "\f0eb";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #0d9488;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Le badge « Autorisations modifiables a tout moment » colle a la consigne qui le precede :
   `.rfx-access-badge-top` remet sa marge haute a 0. On la retablit UNIQUEMENT quand il suit
   directement une consigne encadree (retour Olivier 2026-08-29). */
.rfx-ds .rfx-card-intro + .rfx-access-badge-top { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ECRAN « NOUVELLE EVALUATION » (partage Contrats / Entreprises / Offres) — 2026-08-29
   Le bloc etait centre et rétréci par `.margined` (margin:auto + max-width posee EN INLINE par
   updateMargined()). La classe a ete retiree du gabarit ; il reste a lui donner de l air sous le
   stepper et a poser le choix du modele sur une seule ligne, a gauche.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.asm-new { padding-top: 22px !important; }
.asm-new .rfx-doc-hint { margin-bottom: 18px; }
.asm-new-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Bootstrap-Select pose sa largeur sur le conteneur qu il genere, pas sur le <select>. */
.asm-new-pick .bootstrap-select { width: 340px !important; max-width: 100%; }
.asm-new-pick .btn { flex: 0 0 auto; }

/* ── Barre d actions des ecrans « Offres » : pleine largeur, evaluation a gauche, round a droite ──
   2026-09-19 : le centrage (zone gauche vide « d equilibrage », col-md-10) laissait un tiers de la
   barre aux deux boutons de round, dont le texte passait sur 3 lignes. Les elements passent a la
   ligne ENTIERS quand la place manque (flex-wrap), jamais le texte d un bouton (nowrap). */
.rfx-toolbar-nav { justify-content: flex-start; flex-wrap: wrap; }
.rfx-toolbar-nav .rfx-toolbar-nav-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rfx-toolbar-nav .rfx-toolbar-nav-end .ds-btn-secondary { white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BOUTONS VERTS (`btn-success`) -> CHARTE TEAL — regle GLOBALE, 2026-08-29
   Suite du lot 2 (qui avait repris `btn-primary` et `btn-info` mais PAS `btn-success`).

   Constat mesure sur 12 pages reellement rendues : 9 boutons verts, 0 teal. Les seuls deja
   corrects l etaient par des rustines de scope (`.rfx-ds`, `.asm-ds`, `.mya-ds #send-button`,
   `#iterationPriceViewModal`, `.rfx-ppe`) ; partout ailleurs - toute la Configuration - c etait
   le vert Bootstrap brut #28a745, absent de la charte. Total : 149 occurrences, 122 fichiers.

   Regle GLOBALE plutot qu un remplacement fichier par fichier, pour les memes raisons qu au
   lot 2 : beaucoup de gabarits legacy dont on ignore s ils sont encore atteignables ; une regle
   unique les couvre tous, y compris ceux qu un inventaire aurait manques, et se retire en une
   ligne. Les rustines de scope existantes deviennent redondantes mais restent inoffensives
   (meme couleur) - on ne les touche pas, elles portent aussi des rayons et des ombres.

   ⚠️ SPECIFICITE : Bootstrap declare ses etats actifs en
   `.btn-success:not(:disabled):not(.disabled):active` (0,3,0). Ne reprendre que la couleur de
   base laisserait le bouton REDEVENIR VERT au clic. On reprend donc SES selecteurs.

   ⚠️ NE SONT PAS CIBLES : `.alert-success` (messages flash), `.badge-success`, `.text-success`,
   `.bg-success` - ce sont des indicateurs d etat, pas des boutons. Le vert y garde son sens.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `!important` INDISPENSABLE, corrige le 2026-08-29 : `app.css` l. 177 declare
   `.btn-success { background-color: #26C755 !important }`. A specificite egale, un
   `!important` bat une declaration normale QUEL QUE SOIT l ordre de chargement : ce bloc
   etait donc sans effet sur la couleur de base, et TOUS les boutons « Enregistrer » de
   l application sont restes vert flashy depuis sa redaction. Defaut signale par Olivier
   sur « Ajouter champ » (hub Administration).
   Rappel : deux mecanismes bloquent un format, la specificite ET `!important` - lire une
   declaration ne suffit pas, il faut simuler la cascade face a app.css.
   `.btn-success` est le SEUL bouton dans ce cas (verifie sur success/info/danger/primary/
   secondary). Les 2 autres `!important` bouton d app.css visent `.btn-login` et
   `.btn-reset-password`, pages publiques hors perimetre. */
.btn-success { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff; }
.btn-success:hover { background-color: #0b7d72 !important; border-color: #0b7d72 !important; color: #fff; }
.btn-success:focus, .btn-success.focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.35); }
.btn-success.disabled, .btn-success:disabled { background-color: #7fc9c2 !important; border-color: #7fc9c2 !important; color: #fff; }
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle { background-color: #0b7d72 !important; border-color: #0b7d72 !important; color: #fff; }
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.35); }

/* Variante contour, meme traitement (2 occurrences). */
.btn-outline-success { border-color: #0d9488; color: #0f766e; }
.btn-outline-success:hover, .btn-outline-success:focus { background-color: #0d9488; border-color: #0d9488; color: #fff; }
.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle { background-color: #0b7d72; border-color: #0b7d72; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ENCARTS HORS APPEL D OFFRES -> format commun — 2026-08-29
   Suite du lot 3, qui n avait traite que le module AO. Recensement par l ICONE (seule methode
   exhaustive), textes valides un par un.

   ⚠️ On S ALIGNE sur la couleur existante quand elle est deliberee, plutot que de la changer en
   douce : `pc-incoherence-alert` etait ambre, `rfx-ipm-dup` rouge. De meme, les familles du
   lot 3 mises en ambre sur arbitrage (`pc-dates-hint`, `ctr-pilo-prog-empty`,
   `fin-mobile-notice`) ne sont pas retouchees.

   ⚠️ Les classes `*-summary-title` sont des TITRES, pas des conteneurs : les encadrer dessinait
   une boite autour du seul titre, la liste d erreurs restant dehors. On vise les CONTENEURS,
   qui ont deja le bon fond -> il ne leur manque que le filet, SANS `display:flex` (ils
   contiennent un titre ET une liste, les mettre en ligne casserait la mise en page).

   ⚠️ EXCLUES bien que porteuses d une icone : `.lbl`, `.ctx-icon-box-sm` (libelle, boite
   d icone), `.pc-toast` (toast), `.ctr-pilo-validation-cta` (bouton), `.sm-incomplete-banner`
   (message d etat), `.ctr-pilo-rec-role` (libelle de role) et `.ctr-rs-switch-text` — cette
   derniere est une LEGENDE D INTERRUPTEUR, a laisser discrete (arbitrage du lot 3).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* TEAL : explique comment faire, toujours affiche. */
.qrf-alert,
.spl-sdoc-process,
.scf-locked-note,
.spl-updreq-intro,
.spl-updreq-activate-info,
.spl-updreq-recipients-note,
.pcv-alert,
.pc-simulation-notice,
.drw-ctr-sheet-note,
.drawer-contract .drw-ctr-sheet-note,
.cvr-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #d6ecea; border-left: 4px solid #0d9488;
    border-radius: var(--r-md, 8px);
    background: #f0fafa; color: #12554e;
    font-size: 0.85rem; line-height: 1.5; margin-bottom: 16px;
}

/* AMBRE : une condition reste a remplir, ou le geste est irreversible. */
.spl-updreq-required-hint,
.ctr-ctx-cancellation-missing,
.ctr-doc-cancellation-missing-text,
.ctr-cnl-warning,
.pc-incoherence-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #fde8c0; border-left: 4px solid #f59e0b;
    border-radius: var(--r-md, 8px);
    background: #fffbeb; color: #7c4a09;
    font-size: 0.85rem; line-height: 1.5; margin-bottom: 16px;
}

/* ROUGE : une erreur est constatee. */
.drw-src-err-summary,
.drawer-source .drw-src-err-summary,
.rfx-ipm-dup,
.rfx-ds .rfx-ipm-dup {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px;
    border: 1px solid #f5cfcf; border-left: 4px solid #c0392b;
    border-radius: var(--r-md, 8px);
    background: #fef2f2; color: #922b21;
    font-size: 0.85rem; line-height: 1.5; margin-bottom: 16px;
}

/* CONTENEURS de recapitulatif d erreurs : deja au bon fond, il ne manque que le filet.
   PAS de `display:flex` : ils contiennent un titre suivi d une liste. */
.drw-err-summary,
.ctr-cnl-errors-summary {
    border: 1px solid #f5cfcf; border-left: 4px solid #c0392b;
    border-radius: var(--r-md, 8px); background: #fef2f2;
}

/* Icones : meme couleur que le filet. */
.qrf-alert > i,
.spl-sdoc-process > i,
.scf-locked-note > i,
.spl-updreq-intro > i,
.spl-updreq-activate-info > i,
.spl-updreq-recipients-note > i,
.pcv-alert > i,
.pc-simulation-notice > i,
.drw-ctr-sheet-note > i,
.drawer-contract .drw-ctr-sheet-note > i,
.cvr-alert > i { color: #0d9488; flex: 0 0 auto; margin-top: 2px; }
.spl-updreq-required-hint > i,
.ctr-ctx-cancellation-missing > i,
.ctr-doc-cancellation-missing-text > i,
.ctr-cnl-warning > i,
.pc-incoherence-alert > i { color: #b45309; flex: 0 0 auto; margin-top: 2px; }
.drw-src-err-summary > i,
.drawer-source .drw-src-err-summary > i,
.rfx-ipm-dup > i,
.rfx-ds .rfx-ipm-dup > i { color: #c0392b; flex: 0 0 auto; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ENCARTS PORTANT DES UTILITAIRES BOOTSTRAP
   Les 19 encarts legacy sont ecrits `<div class="media p-3 bg-light border mb-3">`.
   `bg-light` et `border` sont des utilitaires Bootstrap 4, donc `!important` PAR CONCEPTION :
   AUCUNE specificite ne les bat. Sans `!important` ici, le filet passait mais le fond restait
   GRIS - defaut constate par Olivier sur une demande affectee (drawer Source de dossier).
   ⚠️ Mecanisme DIFFERENT de celui des regles scopees : un controle de cascade qui ignore
   `!important` ne peut pas le voir. Les deux doivent etre verifies.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.media.bg-light {
    background: #f0fafa !important;
    border: 1px solid #d6ecea !important;
    border-left: 4px solid #0d9488 !important;
}

/* =====================================================================
   ADMIN RESKIN - refonte du hub Administration
   Etape 0 (2026-08-29) : socle. Calque du socle .rfx-ds defini plus haut.

   PORTEE : tout est scope sous .adm-ds, pose sur .main-content dans
   account_backend/layout_account_backend_content.html.twig. Les 105 templates
   du hub etendent ce layout et AUCUN ne surcharge contentClass (verifie) :
   le socle les couvre donc tous d'un coup.

   HORS PORTEE a cette etape : le menu vertical global (.bg-color-admin) est
   FRERE de .main-content, donc hors du scope .adm-ds. Il reste en l'etat, comme
   le menu principal l'est reste lors du reskin RFx.

   NE SONT PAS REDECLARES ICI (deja traites globalement plus haut dans ce fichier,
   les redeclarer serait du bruit ou, pire, une divergence par rapport au DS) :
     - .btn-success       : deja teal DS (l. ~24906)
     - .btn-info          : deja outline teal DS (l. ~24705) - le repeindre en gris
                            neutre aurait fait diverger le hub du reste de l'app
     - border-radius      : `.btn { border-radius: var(--r-md) }` est global (l. 29)
   Ne restent donc ici que les classes reellement encore en charte legacy.

   Reskin purement visuel : aucun markup, aucun JS, aucune route modifies.
   Colonne gauche #515C6B -> blanc ; accent -> teal #0d9488 ; titres navy #2D3E50.
   ===================================================================== */

/* --- Colonne gauche : bandeau plein #515C6B -> blanc DS, texte navy.
   Le filet droit remplace le contraste de fond qui separait visuellement la
   colonne de navigation du contenu. --- */
.adm-ds .main-color-admin {
    background: #fff !important;
    border-right: 1px solid #e2e8f0;
}
.adm-ds .main-color-admin .text-white { color: #2D3E50 !important; }

/* Titre de section ("Configurations", "Entreprise"...) : Anton navy, taille DS. */
.adm-ds .main-color-admin .logo-font.h1 { font-size: 1.5rem !important; color: #2D3E50 !important; }

/* --- Navbars verticales de section : #account-content-navbar (Entreprise,
   Utilisateurs, Champs et filtres) et #categories-content-navbar (Configurations).
   Legacy : liens blancs sur fond fonce, item actif souligne en BLANC - donc
   invisible des que le fond passe au blanc. Actif et survol repassent en teal.
   Specificite : les regles legacy sont en (1,1,1) (`#id .nav-item a`) ; le prefixe
   .adm-ds donne (1,2,1), ce qui suffit a les battre. Le !important protege en plus
   des utilitaires Bootstrap portes par le markup. --- */
.adm-ds #account-content-navbar .nav-item a,
.adm-ds #categories-content-navbar .nav-item a { color: #415873 !important; }
.adm-ds #account-content-navbar .nav-item a:hover,
.adm-ds #categories-content-navbar .nav-item a:hover { color: #0d9488 !important; }
.adm-ds #account-content-navbar .nav-item.active a,
.adm-ds #categories-content-navbar .nav-item.active a { color: #0d9488 !important; font-weight: 600 !important; }
.adm-ds #account-content-navbar .nav-item.active div,
.adm-ds #account-content-navbar .nav-item div:hover,
.adm-ds #categories-content-navbar .nav-item.active div,
.adm-ds #categories-content-navbar .nav-item div:hover { border-bottom-color: #0d9488 !important; }

/* --- Boutons encore en charte legacy corail (app.css l. 186-207) -> teal DS.
   Contrairement a .btn-success et .btn-info, ces deux-la n'ont JAMAIS ete repris
   globalement : ils sont bien a traiter ici. --- */
.adm-ds .btn-red-light { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }
.adm-ds .btn-red-light:hover { background-color: #0b7d72 !important; border-color: #0b7d72 !important; color: #fff !important; }
.adm-ds .btn-outline-red-light { color: #0d9488 !important; background-color: #fff !important; border-color: #0d9488 !important; }
.adm-ds .btn-outline-red-light:hover { color: #fff !important; background-color: #0d9488 !important; border-color: #0d9488 !important; }

/* --- Accent corail .text-red-light des hints -> teal DS.
   `.adm-ds .text-blue` a ete retire le 2026-08-29 : `.text-blue` est desormais teal
   globalement (cf. bloc HARMONISATION .text-blue en fin de fichier). --- */
.adm-ds .text-red-light { color: #0d9488 !important; }

/* --- Focus : pas de cadre noir au clic souris, anneau teal au clavier.
   Aucune regle globale n'existe sur a/button (les regles focus du fichier sont
   toutes ciblees par composant) : celle-ci est donc bien necessaire. --- */
.adm-ds a:focus, .adm-ds button:focus, .adm-ds .nav-link:focus { outline: none; }
.adm-ds a:focus-visible, .adm-ds button:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }

/* =====================================================================
   HARMONISATION `.text-blue` -> TEAL DS (2026-08-29)

   `.text-blue` (app.css l. 2178) vaut #218698 : ce n'est pas un bleu mais un
   cyan-sarcelle, proche du teal DS #0d9488 sans etre identique - le legacy tire
   vers le bleu (B 152 > G 134), le DS tire vers le vert (G 148 > B 136). Ecart
   discret isolement, visible des que les deux accents se cotoient.

   Le decalage avait deja ete corrige TROIS fois par des patchs scopes
   (#generalTermsOfUseModal, `.gtu-ds .gtu-body`, `.adm-ds`) : signe que la
   reponse etait globale. Ces trois patchs ont ete SUPPRIMES au profit de cette
   seule regle - ne pas les reintroduire.

   Diffusion couverte : 42 fichiers / 167 occurrences dans les templates, plus
   34 occurrences dans messages.*.yaml (donc x4 langues). Ecrans centraux
   concernes : cockpit, listes Contrats et Entreprises, appels d'offres, onglets
   Contributeurs et Entreprises d'un dossier, CGU, hub Administration, et les
   deux themes de formulaire (form/fields, form/account_backend_fields).

   PORTEE : app-ds.css est chargee APRES app.css (layout_frontend l. 20-21),
   donc cette regle bat le legacy a specificite egale (0,1,0) + !important des
   deux cotes : c'est l'ordre de declaration qui tranche.

   LA VITRINE N'EST PAS TOUCHEE, et c'est voulu : website/index.html.twig est un
   document HTML autonome qui charge homepage.css - lequel redefinit .text-blue
   a l'identique (l. 99) - et ne charge PAS app-ds.css. Elle conserve donc sa
   charte propre.
   ===================================================================== */
.text-blue { color: #0d9488 !important; }

/* ---------------------------------------------------------------------
   ADMIN RESKIN - etape 1 (2026-08-29) : composants communs du hub.

   PORTEE ELARGIE, choix assume : ces regles s'appliquent a TOUT le hub
   (.adm-ds) et pas seulement a la section "Champs et filtres" traitee a cette
   etape. Les tableaux Bootstrap, les badges oui/non et les onglets de langue
   sont le vocabulaire commun de TOUTES les sections du hub : les scoper a la
   seule section aurait impose de reecrire le meme CSS aux etapes 2, 3 et 5.
   Consequence a recetter : les tableaux des sections Utilisateurs et
   Configurations changent d'aspect des cette etape.

   Rien ici n'est deja traite globalement dans ce fichier : ni `.table`,
   ni `.badge`, ni `.nav-tabs` n'ont de reprise DS globale (verifie).
   --------------------------------------------------------------------- */

/* --- Chapeau explicatif : voir le bloc « ENCARTS D INFORMATION : UN SEUL FORMAT »
   plus haut dans ce fichier. `.adm-hint` y est declare comme alias TEAL, avec sa
   variante scopee `.adm-ds .adm-hint` (sans quoi une regle scopee de ce bloc
   l aurait battu : cf. le meme piege deja rencontre sur `.asm-callout`).
   Aucune declaration ici : la dupliquer reintroduirait le format concurrent que
   le chantier d harmonisation du 2026-08-29 a justement supprime. --- */

/* --- Titres de section du contenu (balise h1 uniquement).
   Ne touche PAS la colonne gauche, dont le titre porte la CLASSE .h1 sur un
   <div> et non la balise. Les pages qui titrent en `<div class="h1">` (section
   Configurations) ne sont donc pas affectees ici : elles seront reprises a
   l'etape 5.
   `!important` obligatoire : app.css impose `.h1..h6, h1..h6 { font-weight:
   400 !important }` (l. 1173). --- */
.adm-ds .container-scrollable h1 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #2D3E50 !important;
    margin-bottom: 12px;
}
/* Le chapeau ne colle ni au titre ni au tableau qui le suit. Le format unique
   pose deja `margin-bottom: 16px` ; on ajoute la respiration du haut et on
   complete celle du bas, jugees trop serrees a la recette. */
.adm-ds .container-scrollable .adm-hint { margin-top: 2px; margin-bottom: 22px; }

/* --- Tableaux : allegement DS. On retire le quadrillage `table-bordered` et le
   zebrage `table-striped` au profit d'un simple filet bas par ligne, en
   reprenant le style d'en-tete deja utilise ailleurs dans le DS
   (cf. .com-docs-table thead th). Aucun markup touche. --- */
.adm-ds .container-scrollable .table { font-size: 0.82rem; margin-bottom: 8px; }
.adm-ds .container-scrollable .table thead th {
    font-size: 0.72rem;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8fa1b3;
    background: transparent;
    border: none;
    border-bottom: 2px solid #edf0f4;
    padding: 8px 10px;
    vertical-align: middle;
}
.adm-ds .container-scrollable .table tbody td {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 9px 10px;
    vertical-align: middle;
    color: #415873;
}
/* Le quadrillage lateral de .table-bordered est neutralise (bordures verticales). */
.adm-ds .container-scrollable .table.table-bordered,
.adm-ds .container-scrollable .table.table-bordered td,
.adm-ds .container-scrollable .table.table-bordered th { border-left: none; border-right: none; }
/* Zebrage remplace par un survol discret : moins de bruit sur des listes longues. */
.adm-ds .container-scrollable .table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.adm-ds .container-scrollable .table.table-hover tbody tr:hover { background: #f8fafb; }

/* --- Liens d action des tableaux (icones Editer / Valeurs / Supprimer, et liens
   texte des colonnes Actions) : ils heritaient du bleu Bootstrap par defaut, seule
   couleur non DS restant a l ecran. Aucune regle globale sur `a` n existe dans le
   projet (verifie), le bleu venait donc bien de Bootstrap.
   Portee volontairement large : TOUS les tableaux du hub, pour que les sections
   traitees aux etapes suivantes soient deja coherentes. --- */
.adm-ds .container-scrollable .table tbody td a { color: #0d9488; }
.adm-ds .container-scrollable .table tbody td a:hover { color: #0b7d72; text-decoration: none; }
.adm-ds .container-scrollable .table tbody td a + a { margin-left: 12px; }

/* --- Badges oui/non et badges de categorie : aplats doux au lieu des aplats
   satures de Bootstrap, qui pesaient lourd repetes sur toute une colonne. --- */
.adm-ds .container-scrollable .badge {
    font-weight: 500 !important;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: var(--r-sm, 3px);
}
.adm-ds .container-scrollable .badge-success { background-color: #d1fae5 !important; color: #065f46 !important; }
.adm-ds .container-scrollable .badge-danger { background-color: #fee2e2 !important; color: #991b1b !important; }
.adm-ds .container-scrollable .badge-secondary { background-color: #eef2f6 !important; color: #415873 !important; }

/* --- Onglets de langue (drapeaux) presents sur tous les ecrans de traduction
   du hub. Le markup porte `.text-black` (app.css, (0,1,0) + !important) :
   la specificite (0,4,0) de ces regles suffit a le battre. --- */
.adm-ds .container-scrollable .nav-tabs { border-bottom: 1px solid #e2e8f0; margin-bottom: 14px; }
.adm-ds .container-scrollable .nav-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    color: #8fa1b3 !important;
    font-size: 0.78rem;
    padding: 8px 12px;
}
.adm-ds .container-scrollable .nav-tabs .nav-link:hover { color: #0d9488 !important; }
.adm-ds .container-scrollable .nav-tabs .nav-link.active {
    color: #0d9488 !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -2px 0 #0d9488;
}

/* ---------------------------------------------------------------------
   ADMIN RESKIN - etape 1, complement (2026-08-29) : formulaires et carte.
   Suite des retours de recette. Meme portee elargie assumee que le bloc
   precedent : ces composants sont communs a tout le hub.
   Rien ici n'est deja traite globalement (verifie : ni `.form-control`,
   ni `.col-form-label` n'ont de reprise DS dans ce fichier).
   --------------------------------------------------------------------- */

/* --- Carte : remplace le `border` Bootstrap nu qui encadrait les formulaires
   de creation. Classe reutilisable par les etapes suivantes. --- */
.adm-ds .container-scrollable .adm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-lg, 10px);
    padding: 20px 22px;
}

/* --- Libelles de formulaire. `!important` obligatoire : app.css cible
   `#main-content-edition label.form-control-label` (1,1,1), que la specificite
   (0,3,1) d une regle scopee ne suffit pas a battre. --- */
.adm-ds .container-scrollable .col-form-label,
.adm-ds .container-scrollable label.form-control-label {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #2D3E50 !important;
}
/* Asterisque des champs requis, au teal DS plutot qu au rouge Bootstrap. */
.adm-ds .container-scrollable .col-form-label.required::after,
.adm-ds .container-scrollable label.required::after { color: #0d9488; }

/* --- Champs : bordure DS et focus teal. La taille de police reste geree par
   app.css (`.form-control { font-weight: 300 !important }`), on ne la touche pas. --- */
.adm-ds .container-scrollable .form-control {
    border: 1px solid #dbe3ea;
    border-radius: var(--r-md, 6px);
    color: #2D3E50;
}
.adm-ds .container-scrollable .form-control:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
    outline: none;
}

/* --- Faux champs en lecture seule : `_form.html.twig` rend les valeurs non
   editables dans un `<div class="form-control">`. Sans distinction visuelle, elles
   se lisent comme des champs saisissables alors qu elles ne le sont pas. --- */
.adm-ds .container-scrollable div.form-control {
    background: #f8fafb;
    color: #64748b;
    border-style: dashed;
}

/* ---------------------------------------------------------------------
   ADMIN RESKIN - harmonisation des marges (2026-08-29, retour recette R5).

   Constat : les marges haut/gauche/droite changeaient d une page a l autre du
   hub. Deux causes distinctes, traitees ici toutes les deux EN CSS, sans
   toucher aux 100+ templates concernes.

   1. ZONE DE CONTENU. Le layout enveloppe `{% block content %}` dans un
      `<div class="p-2">` (padding 8px) place dans un `.container` lui-meme dans
      un `.col-md-12 pt-5`. Selon que la page posait ensuite un `col-md-8`,
      `col-md-10` ou aucun conteneur, la marge utile variait du simple au double.
      On fixe le padding a la source : toutes les pages du hub partent du meme
      retrait, quel que soit leur conteneur interne.

   2. COLONNE DE GAUCHE. Deux conventions cohabitaient : `mt-3 ml-3` + `pt-5`
      (properties_navbar, categories_navbar) et `mt-sm-3 ml-4` sans `pt-5`
      (account_navbar, user/navbar), d ou un decalage horizontal ET vertical de
      la navigation selon la section ouverte. On neutralise les deux variantes et
      on impose un retrait unique.
   --------------------------------------------------------------------- */

/* --- 1. Zone de contenu : retrait unique. Le `pt-5` du layout (48px) est ramene
   a une valeur coherente avec le retrait lateral. --- */
.adm-ds .container-scrollable > .p-2 { padding: 4px 28px 24px !important; }
.adm-ds .col-md-12.pt-5 { padding-top: 24px !important; }

/* --- 2. Colonne de gauche : retrait unique, quelle que soit la section.
   Les 4 navbars du hub portent des marges differentes en dur dans leur markup
   (`ml-3` vs `ml-4`, `mt-3` vs `mt-sm-3`, `pt-5` present ou absent). Plutot que
   d editer 4 fichiers et de risquer d en oublier un cinquieme cree plus tard, on
   neutralise a la source et on impose le retrait ici. --- */
.adm-ds .main-color-admin > .mx-3 { margin-left: 24px !important; margin-right: 24px !important; }
.adm-ds .main-color-admin .mt-3,
.adm-ds .main-color-admin .mt-sm-3 { margin-top: 8px !important; }
.adm-ds .main-color-admin .ml-3,
.adm-ds .main-color-admin .ml-4 { margin-left: 12px !important; }
.adm-ds .main-color-admin .pt-5 { padding-top: 20px !important; }

/* Le titre de section et la premiere entree de navigation s alignent sur le meme
   axe vertical dans toutes les sections. */
.adm-ds .main-color-admin #account-content-navbar,
.adm-ds .main-color-admin #categories-content-navbar { padding-left: 12px; }

/* ---------------------------------------------------------------------
   ADMIN RESKIN - marges, correction (2026-08-29, 2e retour recette).

   La premiere passe ne fixait que le padding de `.p-2`. Insuffisant : le contenu
   etait ensuite centre DEUX fois, ce qui rendait le retrait gauche dependant de la
   page et de la largeur d ecran.

   1. Le layout enveloppe le contenu dans un `.container` BOOTSTRAP (largeur max
      figee par breakpoint + `margin: auto`). A lui seul il centre tout le hub et
      laisse des gouttieres qui varient avec la fenetre.
   2. Chaque page pose ensuite `<div class="row justify-content-center">` puis un
      `col-md-8`, `col-md-10` ou `col-md-12`. D ou un SECOND centrage, et une
      largeur utile differente d un ecran a l autre.

   Resultat visible : le bord gauche du contenu sautait entre un index (pleine
   largeur) et sa sous-page d edition (col-md-8 centre). Corrige ici : bord gauche
   IDENTIQUE partout, largeur adaptee au type de contenu.
   --------------------------------------------------------------------- */

/* 1. Le conteneur du hub occupe toute la largeur disponible. Scope `.adm-ds`,
      donc sans effet sur les `.container` du reste de l application. */
.adm-ds .main-content > .row > .col-md-9 .container { max-width: 100% !important; padding-left: 0; padding-right: 0; }

/* 2. Plus de centrage horizontal du contenu : tout demarre au meme axe. */
.adm-ds .container-scrollable > .p-2 > .row { justify-content: flex-start !important; margin-left: 0; margin-right: 0; }
.adm-ds .container-scrollable > .p-2 > .row > [class*="col-md-"] { padding-left: 0; padding-right: 0; }

/* 3. Largeur de lecture selon le type de contenu, au lieu des colonnes Bootstrap
      dont la largeur suivait la fenetre. Les listes prennent tout, les formulaires
      gardent une longueur de ligne confortable. */
.adm-ds .container-scrollable > .p-2 > .row > .col-md-8 { flex: 0 0 100%; max-width: 940px; }
.adm-ds .container-scrollable > .p-2 > .row > .col-md-9,
.adm-ds .container-scrollable > .p-2 > .row > .col-md-10,
.adm-ds .container-scrollable > .p-2 > .row > .col-md-11 { flex: 0 0 100%; max-width: 1180px; }
.adm-ds .container-scrollable > .p-2 > .row > .col-md-12 { flex: 0 0 100%; max-width: 100%; }

/* ---------------------------------------------------------------------
   ADMIN RESKIN - etape 2 (2026-08-29) : section Utilisateurs.

   Deux ajouts seulement, le socle des etapes 0 et 1 couvrant deja tableaux,
   badges, boutons, marges, encarts et formulaires.

   1. TITRES EN CLASSE. La section Utilisateurs titre ses pages en
      `<div class="h1 pb-2">` et non avec la balise `<h1>` que l etape 1 avait
      stylee. Meme rendu pour les deux, sans toucher aux 16 templates.
      C est ce qui avait produit des faux negatifs dans le premier audit.

   2. MENTION SECONDAIRE. Le hub ecrit deja ses precisions de second plan en
      `text-info font-italic` (settings_requests, hints legacy) : on garde ce
      pattern existant plutot que d en creer un, et on lui donne un rendu
      discret (petit, gris) pour qu il se distingue du chapeau principal sans
      lui faire concurrence.
   --------------------------------------------------------------------- */

/* --- 1. Titres de page ecrits en classe `.h1` : meme rendu que la balise. --- */
.adm-ds .container-scrollable .h1 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #2D3E50 !important;
    margin-bottom: 12px;
}
/* `.h2` sert de sous-titre de section sur certaines pages (contacts d une entreprise). */
.adm-ds .container-scrollable .h2 {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #2D3E50 !important;
    margin-bottom: 8px;
}

/* --- 2. Mention secondaire, placee au plus pres du champ ou du bloc concerne.
   Le cyan `text-info` de Bootstrap cede la place a un gris de second plan : ces
   phrases precisent, elles n alertent pas. --- */
.adm-ds .container-scrollable .text-info.font-italic,
.adm-ds .container-scrollable .adm-hint .text-info.font-italic {
    color: #64748b !important;
    font-size: 0.76rem;
    font-style: italic;
    line-height: 1.5;
    display: block;
    margin-top: 4px;
}

/* --- Barre de filtres des listes d utilisateurs : le compteur de filtres actifs
   est peint en orange `#fd7e14` en style inline dans le markup. Inline = non
   surchargeable par une regle de couleur, on neutralise donc via les proprietes
   qui restent atteignables (fond et bordure passent au teal DS). --- */
.adm-ds #filterPanel .lg-rectangled {
    border-color: #0d9488 !important;
    color: #0d9488 !important;
    background-color: #f0fafa !important;
    font-size: 0.75rem;
    border-radius: var(--r-md, 6px);
}
.adm-ds #filterPanel .lg-rectangled i { color: #0d9488 !important; }

/* ---------------------------------------------------------------------
   ADMIN RESKIN - marges, 2e correction (2026-08-29, 3e retour recette).

   Ce qui manquait : les regles precedentes ne traitaient que le PREMIER niveau
   de conteneur (`.p-2 > .row > .col-md-*`). Or 14 pages sur 16 de la section
   Utilisateurs imbriquent DEUX niveaux :

       <div class="row"><div class="col-md-10">
           <div class="row justify-content-center"><div class="col-md-8">

   Le contenu etait donc recentre et retreci au second niveau, hors de portee des
   regles posees sur le premier : les pages d edition (Acheteur, Groupe, Contact
   entreprise, Copier des acces) gardaient leurs marges d origine.

   ⚠️ On ne cible QUE `col-md-*`. Les `form-group row` internes utilisent
   `col-sm-*` pour disposer label et champ cote a cote : les toucher casserait la
   mise en page des formulaires.
   --------------------------------------------------------------------- */

/* Tout centrage horizontal du contenu est neutralise, a QUELQUE niveau
   d imbrication qu il se trouve. */
.adm-ds .container-scrollable .row.justify-content-center { justify-content: flex-start !important; }

/* Colonne `col-md-*` imbriquee dans une autre : elle ne retrecit plus le contenu
   ni ne le decale. La largeur de lecture reste pilotee par le conteneur de
   premier niveau (regles de la passe precedente). */
/* Regle retiree le 2026-08-29 : elle forcait TOUTE colonne imbriquee a 100 %,
   ce qui empilait les grilles de liste. Remplacee par la variante `:only-child`
   plus bas dans ce fichier. */

/* ---------------------------------------------------------------------
   ADMIN RESKIN - etape 2, corrections de recette (2026-08-29).

   1. LARGEUR DES FORMULAIRES. La largeur de lecture etait posee sur le conteneur
      de PREMIER niveau. Or les pages d edition imbriquent deux niveaux : le
      formulaire heritait alors de 100 % du parent et s etalait sur toute la
      largeur, jusqu a tronquer les champs a droite (constate sur Edition
      Acheteur). On porte donc la largeur sur la CARTE, qui entoure le formulaire
      quelle que soit la profondeur d imbrication.

   2. TITRE DE LA COLONNE DE GAUCHE. Il restait en Anton (`logo-font`), heritage
      de la charte d origine. Passage a la typographie du DS.
   --------------------------------------------------------------------- */

/* 1. Longueur de ligne confortable pour les formulaires, ou qu ils soient. */
.adm-ds .container-scrollable .adm-card { max-width: 940px; }
/* Les cartes contenant un tableau ou une liste de valeurs peuvent respirer davantage. */
.adm-ds .container-scrollable .adm-card:has(table) { max-width: 100%; }

/* 2. Titre de section (colonne de gauche) : typographie DS, plus Anton. */
.adm-ds .main-color-admin .logo-font {
    font-family: inherit !important;
    letter-spacing: 0 !important;
}
.adm-ds .main-color-admin .logo-font.h1 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #2D3E50 !important;
    line-height: 1.35;
}

/* ---------------------------------------------------------------------
   ADMIN RESKIN - correction du debordement (2026-08-29).

   Diagnostic revu. Les champs tronques a droite sur « Edition Acheteur » ne
   venaient PAS d une largeur excessive, mais de la regle qui passait le
   `.container` du layout en `max-width: 100%` AVEC `padding-left/right: 0` :
   en supprimant les gouttieres Bootstrap, le contenu debordait de sa zone.

   La limitation des cartes a 940px introduite juste apres masquait le symptome
   sans traiter la cause : elle est RETIREE. Les formulaires occupent de nouveau
   la largeur disponible, et c est le padding qui garantit qu ils ne touchent
   pas le bord.

   Reste volontairement en place : le plafond des LISTES de premier niveau
   (1180px), qui evite des lignes de tableau demesurement etirees sur grand
   ecran. A ajuster si la pleine largeur est preferee la aussi.
   --------------------------------------------------------------------- */

/* Les gouttieres reviennent : c est ce qui evite que les champs touchent le bord. */
.adm-ds .main-content > .row > .col-md-9 .container { padding-left: 15px !important; padding-right: 15px !important; }

/* Annule la limitation des cartes posee juste avant : elle traitait le symptome. */
.adm-ds .container-scrollable .adm-card { max-width: 100%; }

/* ---------------------------------------------------------------------
   ADMIN RESKIN - etape 3 (2026-08-29) : section Entreprise.
   --------------------------------------------------------------------- */

/* --- « Votre abonnement » : deux colonnes lisibles.
   La page empilait des `h3 font-weight-normal` et un `text-center` sur la
   colonne de droite : apres retrait des blocs commerciaux, il ne restait qu un
   assemblage desequilibre. Les deux colonnes sont desormais cadrees de la meme
   facon, la gauche portant l abonnement et la droite les compteurs. --- */
.adm-ds .adm-sub-card { padding: 0; overflow: hidden; }
.adm-ds .adm-sub-col { padding: 22px 26px; font-size: 0.85rem; color: #415873; }
.adm-ds .adm-sub-col-left { border-right: 1px solid #e2e8f0; }
.adm-ds .adm-sub-col p { margin-bottom: 10px; line-height: 1.6; }
.adm-ds .adm-sub-col hr { border-top: 1px solid #eef2f6; margin: 16px 0; }

/* Nom de l offre : c est le titre de la carte. */
.adm-ds .adm-sub-name {
    font-size: 1rem;
    font-weight: 600;
    color: #0d9488;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}

/* Colonne de droite : les compteurs, alignes a gauche comme le reste de la page
   (le centrage d origine les detachait du contenu voisin). */
.adm-ds .adm-sub-col .h1 { font-size: 1.35rem !important; font-weight: 600 !important; color: #2D3E50 !important; margin-bottom: 2px; }
.adm-ds .adm-sub-col .text-blue { color: #0d9488 !important; }
.adm-ds .adm-sub-col .border-bottom { border-bottom: 1px solid #eef2f6 !important; padding: 0 0 16px !important; margin-bottom: 16px; }
.adm-ds .adm-sub-col .mt-2.p-2 { margin: 0 !important; padding: 0 !important; }

/* --- « Vos informations » : les trois intertitres de section passent au teal.
   Portee limitee aux <h2> places dans une carte, pour ne pas repeindre les <h2>
   d autres ecrans du hub. --- */
.adm-ds .container-scrollable .adm-card > h2 {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #0d9488 !important;
    margin-bottom: 14px;
}
.adm-ds .container-scrollable .adm-card > h2.pt-4 { margin-top: 26px; }

/* ---------------------------------------------------------------------
   ADMIN RESKIN - deux corrections de selecteur (2026-08-29).

   1. COLONNES EMPILEES. La regle de l etape 2 forcait TOUTE colonne `col-md-*`
      imbriquee a occuper 100 % de son parent. Elle visait les conteneurs de page
      imbriques (une seule colonne dans sa `row`), mais frappait aussi les vraies
      mises en page a plusieurs colonnes : les deux `col-md-6` de la carte
      « Votre abonnement » se retrouvaient l une SOUS l autre.
      `:only-child` restreint la regle a son intention d origine : une colonne
      seule dans sa rangee. Des qu il y en a plusieurs, Bootstrap reprend la main.

   2. INTERTITRES NON TEAL. Le selecteur exigeait `.adm-card > h2`, or
      `form_start()` insere un `<form>` entre la carte et les titres : ceux-ci ne
      sont donc PAS enfants directs. Passage en selecteur descendant.
   --------------------------------------------------------------------- */

/* 1. Ne concerne que les colonnes SEULES dans leur rangee. */
/* Le « reset » qui accompagnait la regle ci-dessus est retire avec elle :
   `flex: initial` privait les colonnes de leur largeur Bootstrap. */
.adm-ds .container-scrollable [class*="col-md-"] > .row > [class*="col-md-"]:only-child {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* 2. Les intertitres sont dans le <form>, pas enfants directs de la carte. */
.adm-ds .container-scrollable .adm-card h2 {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #0d9488 !important;
    margin-bottom: 14px;
}
.adm-ds .container-scrollable .adm-card h2.pt-4 { margin-top: 26px; }

/* ---------------------------------------------------------------------
   « Votre abonnement » : les deux blocs restent EMPILES (retour Olivier,
   2026-08-29). La correction `:only-child` posee juste avant retablit bien
   les mises en page multi-colonnes partout ailleurs dans le hub ; ici, la
   presentation l un SOUS l autre a ete preferee a la recette.

   On fige donc l empilement pour cette carte precise, sans revenir sur la
   correction generale : la bordure verticale qui separait les colonnes cede
   la place a un filet horizontal.
   --------------------------------------------------------------------- */
.adm-ds .adm-sub-card > .adm-sub-col {
    flex: 0 0 100%;
    max-width: 100%;
}
.adm-ds .adm-sub-card > .adm-sub-col-left {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - menu global (2026-08-29, retours de recette).

   ⚠️ Ces regles ne sont PAS scopees `.adm-ds` : le menu vertical est FRERE de
   `.main-content`, donc hors de portee de ce scope. Elles sont volontairement
   ancrees sur `.bg-color-admin`, la classe propre au menu du hub, pour ne pas
   toucher au menu de l application.

   « Acces application » n est pas une section d administration mais une SORTIE
   vers l application : il se confondait avec les entrees voisines. On l en
   detache nettement et on lui donne l aspect d un bouton.
   --------------------------------------------------------------------- */

.bg-color-admin .nav-app-exit {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.bg-color-admin .nav-app-exit-btn {
    margin: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--r-md, 6px);
    background: rgba(255, 255, 255, 0.06);
}
.bg-color-admin .nav-app-exit-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}
/* Menu replie : le bouton se reduit a son icone sans deborder de la colonne. */
.bg-color-admin.collapsed:not(.expanded) .nav-app-exit-btn { margin: 0 8px; }

/* Epingle : meme rendu que dans l application (icone nue, teal une fois epinglee). */
.bg-color-admin .btn-expand-collapse.pinned i { color: #0d9488; }

/* ---------------------------------------------------------------------
   Epingle du menu : l infobulle se centre sur l ICONE, plus sur la ligne.

   `.btn-expand-collapse` (app.css l. 1799) est un `<a>` qui occupe TOUTE la
   largeur de la ligne, l icone etant repoussee a droite par `padding-right: 25px`.
   Bootstrap centre l infobulle sur l element declencheur : elle se retrouvait donc
   au milieu de la ligne, loin de la punaise.

   On reduit le lien a la largeur de son contenu et on l aligne a droite : la zone
   de survol epouse l icone, et l infobulle se centre dessus.

   ⚠️ Non scope `.adm-ds` : le menu est frere de `.main-content`. Ancre sur
   `.bg-color-admin`, propre au hub, pour ne pas modifier le menu de l application.
   --------------------------------------------------------------------- */

.bg-color-admin .btn-expand-collapse {
    display: inline-flex;
    float: right;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    margin-right: 14px;
    border-radius: var(--r-md, 6px);
}
.bg-color-admin .btn-expand-collapse:hover {
    background: rgba(255, 255, 255, 0.10);
}
/* Le <li> ne s effondre pas malgre le float de son unique enfant. */
.bg-color-admin li:has(> .btn-expand-collapse) { overflow: hidden; }

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - titres de groupe de la navigation « Configurations »
   (etape 4, 2026-08-29).

   Les 20 entrees sont desormais reparties en 6 groupes thematiques. Les deux
   anciens titres etaient sortis du flux (`position: absolute`, `top: -40px` /
   `top: 140px`) et cales par un `padding-bottom: 75px` en dur sur la 4e entree :
   tout ajout ou retrait d entree decalait le second titre. Ceux-ci sont dans le
   flux et se calent seuls, quel que soit le nombre d entrees.

   `.adm-nav-group` n est volontairement PAS un `.nav-item` : il echappe ainsi au
   `padding-bottom: 12px` de `#categories-content-navbar .nav-item:not(:last-child)`
   (app.css l. 3053) et gere son propre espacement.

   La couleur est posee sans `!important` : elle ne combat pas une regle concurrente
   mais un simple heritage depuis `.main-color-admin .text-white`.
   --------------------------------------------------------------------- */
.adm-ds #categories-content-navbar .adm-nav-group {
    margin: 24px 0 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa1b3;
}
.adm-ds #categories-content-navbar .adm-nav-group:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - colonne de navigation scrollable (2026-08-29, retour de
   recette de l etape 4).

   « Configurations » compte desormais 26 lignes (20 entrees + 6 titres de groupe).
   Sans contrainte de hauteur, la colonne etirait le document entier : scrollbar de
   page, et le menu vertical global - qui est en `position: absolute; top: 0;
   bottom: 0` (app.css l. 1637) et se cale donc sur le VIEWPORT, pas sur le document
   etire - s arretait en cours de route, laissant une bande blanche sous lui.

   On borne donc la colonne au viewport (hauteur posee en JS par
   `resizeAdminNavColumn`, meme principe que `resizeItemEditContainer` pour la
   colonne de droite) et on lui donne son propre defilement.

   La scrollbar reprend le format fin deja en place sur les drawers (4px, coins
   arrondis) plutot que la scrollbar systeme, trop epaisse pour une colonne de
   navigation.

   Le `!important` du padding bas est necessaire : le layout porte `pb-sm-0` sur cette
   colonne (utilitaire Bootstrap, donc `!important`), et sans air en bas la derniere
   entree collerait au bord de la fenetre une fois la colonne scrollee.
   --------------------------------------------------------------------- */
.adm-ds .main-color-admin {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #dbe1e8 transparent;
    padding-bottom: 18px !important;
}

.adm-ds .main-color-admin::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}
.adm-ds .main-color-admin::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}
.adm-ds .main-color-admin::-webkit-scrollbar-thumb {
    background: #dbe1e8;
    border-radius: 4px;
}
.adm-ds .main-color-admin::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - etape 5a (2026-08-29, retours de recette).

   1. Deux cartes qui se suivent doivent respirer. `.adm-card` n avait pas de
      marge basse : sur les pages a deux listes (Prescripteurs, Typologies
      d utilisateurs) les encadres se touchaient.

   2. Le rappel des regles de gestion des listes est place EN FIN de carte,
      sous la liste qu il decrit. Il ne doit donc pas garder la marge basse de
      16px du format d encart, qui creerait un blanc avant le bord de la carte,
      mais prendre de l air au-dessus de lui.
   --------------------------------------------------------------------- */
.adm-ds .container-scrollable .adm-card + .adm-card {
    margin-top: 24px;
}

.adm-ds .container-scrollable .adm-hint--warn {
    margin-top: 18px;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - etape 5b (2026-08-29).

   L editeur de modele de planning n avait aucun titre de page : le nom du modele
   etait porte par un `<span class="sm-title">`. Il devient un `<h1>` - c est bien
   le titre de l ecran - mais `.adm-ds .container-scrollable h1` impose
   `font-size: 1.05rem !important`, ce qui l aurait rapetisse de 1.5rem a 1.05rem
   sur un ecran deja recette.

   On preserve donc la taille d origine. La regle est plus specifique (0,3,1 contre
   0,2,1) ET porte `!important`, les deux etant necessaires face a la regle du socle.

   Le cas est assume : sur les ecrans de LISTE le `<h1>` nomme la page, ici il nomme
   l objet edite, comme un titre de fiche.
   --------------------------------------------------------------------- */
.adm-ds .container-scrollable h1.sm-title {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    margin: 0;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - modale « Modele d action » (2026-08-29, retour de recette).

   `#itemModal` est declaree une seule fois, dans schedule_model/index, et recoit les
   formulaires de task_model/new et /edit. Le ciblage par identifiant est donc sur.

   Sa zone de contenu porte `.container-modal-scrollable`, qui vaut `height: 0` en CSS
   (app.css l. 397) et n obtient sa hauteur que d un calcul JS au `shown.bs.modal`
   (`resizeModalContainer`). Ce calcul depend de la position mesuree a l instant de
   l ouverture : la modale ne remplissait pas la hauteur disponible et son contenu se
   retrouvait tronque.

   On remplace ce calcul par une mise en page flex, exactement comme cela a deja ete
   fait pour `#iterationPriceConfigurationModal` et `#bomCategoryModal` : l en-tete et
   le pied gardent leur hauteur, le corps prend le reste et defile seul.

   `height: auto !important` est indispensable : `resizeModalContainer` continue de poser
   une hauteur en style INLINE, que seule une declaration `!important` peut neutraliser.
   --------------------------------------------------------------------- */
.adm-ds #itemModal .modal-content {
    display: block !important;
    overflow: hidden;
}
.adm-ds #itemModal .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 5rem);
}
.adm-ds #itemModal .modal-header,
.adm-ds #itemModal .modal-footer {
    flex: 0 0 auto;
}
.adm-ds #itemModal .modal-body {
    /* Le contenu collait aux bords : la regle `[class*="col-md-"]:only-child` du hub
       neutralise le padding horizontal des colonnes seules. On redonne la gouttiere ici. */
    padding: 6px 24px 14px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.adm-ds #itemModal .container-modal-scrollable {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------
   Modale « Modele d action » - marges et rythme vertical (2026-08-29, 2e retour).

   MARGES. Le contenu collait aux bords : la regle de mise en page du hub
   (`[class*="col-md-"]:only-child`, posee a l etape 2) neutralise `padding-left` et
   `padding-right` des colonnes seules dans leur rangee - ce qui est voulu en pleine
   page, mais prive ici le contenu de la gouttiere Bootstrap. On redonne donc la marge
   au niveau du corps de la modale, une seule fois, plutot que de rouvrir la regle
   generale.

   RYTHME. Les espacements etaient calibres pour une pleine page : chapeau a 22px de
   marge basse, carte a 20/22px de padding, groupes de champs a 1rem. Dans une modale
   deux fois plus courte, cela creait des vides. Tout est resserre.
   --------------------------------------------------------------------- */
.adm-ds #itemModal .container-modal-scrollable .adm-hint {
    margin-top: 10px;
    margin-bottom: 14px;
}
.adm-ds #itemModal .container-scrollable .adm-card,
.adm-ds #itemModal .adm-card {
    padding: 16px 18px;
}
.adm-ds #itemModal .form-group {
    margin-bottom: 14px;
}
/* Dernier groupe de la carte : le padding de la carte suffit, pas de vide ajoute. */
.adm-ds #itemModal .adm-card .form-group:last-child {
    margin-bottom: 0;
}
/* Le libelle et son champ s alignent sans decalage vertical superflu. */
.adm-ds #itemModal .form-group > .col-form-label {
    padding-top: 6px;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - etape 5d (2026-08-29, retour de recette).

   Les blocs `_account_rfp_currencies_widget` et `_account_rfp_units_widget` du theme de
   formulaire ouvrent sur `<div class="row"><div class="col-sm-12">`. Dans une carte, les
   marges negatives du `.row` (-15px) depassaient a gauche : la liste des unites sortait
   du bord interne de la carte, decalee par rapport a son titre et a son chapeau.

   On ne neutralise QUE le cas d une colonne SEULE dans sa rangee - meme patron
   `:only-child` que la regle de mise en page posee a l etape 2. Les rangees a plusieurs
   colonnes (rappel de remise, seuils de sante, delais de contrat) gardent leur gouttiere
   Bootstrap : les y neutraliser collerait les colonnes entre elles.
   --------------------------------------------------------------------- */
.adm-ds .container-scrollable .adm-card > .row:has(> [class*="col-"]:only-child) {
    margin-left: 0;
    margin-right: 0;
}
.adm-ds .container-scrollable .adm-card > .row > [class*="col-"]:only-child {
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------
   Correction du decalage des listes « Unites » (2026-08-29, 2e retour 5d).

   CAUSE, identifiee en comparant le HTML rendu des deux blocs, qui est IDENTIQUE :
   la difference vient de la CSS. La regle de mise en page posee a l etape 2

       .adm-ds .container-scrollable [class*="col-md-"] > .row > [class*="col-md-"]:only-child
       { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; }

   retire le padding d une colonne SEULE dans sa rangee. Or dans « Unites » la rangee
   `.row py-1` ne contient qu une colonne (`col-md-5`), tandis que « Devises » en a deux
   (`col-md-5` + `col-md-2` pour « Par defaut »). Resultat : sur Unites seulement, le
   `-15px` du `.row` n est plus compense et tout le bloc glisse vers la gauche.

   On ne touche PAS a la regle d origine, qui aligne les contenus de page. On lui rend sa
   gouttiere uniquement pour les rangees IMBRIQUEES dans une carte, au-dela du premier
   niveau - ce dernier restant gere par le bloc precedent.

   Specificite : (0,6,0) contre (0,5,0) pour la regle de l etape 2, donc elle passe devant
   sans `!important`.
   --------------------------------------------------------------------- */
.adm-ds .container-scrollable .adm-card > .row [class*="col-md-"] > .row > [class*="col-md-"]:only-child {
    padding-left: 15px;
    padding-right: 15px;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - « Typologies de documents » : barre de raccourcis (2026-08-29).

   L ecran liste 19 types de documents et plus d une centaine de valeurs : atteindre un type
   demandait de faire defiler toute la page. Une barre de pastilles collee en haut donne un
   acces direct a chaque type.

   Elle est `sticky` par rapport a `.container-scrollable`, qui est le conteneur de defilement
   reel de la page (sa hauteur est bornee en JS par `resizeItemEditContainer`) - et non par
   rapport a la fenetre.

   La barre est CONSTRUITE EN JS a partir des titres de section deja presents dans le DOM :
   aucune modification du bloc de theme partage, et aucune cle de traduction supplementaire.
   --------------------------------------------------------------------- */
.adm-ds .container-scrollable .dcz-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 12px;
    margin-bottom: 4px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.adm-ds .container-scrollable .dcz-badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #d6ecea;
    border-radius: var(--r-full, 999px);
    background: #f0fafa;
    color: #12554e;
    font-size: 0.74rem;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}
.adm-ds .container-scrollable .dcz-badge:hover {
    background: #d9f2f0;
    color: #0b5f57;
    text-decoration: none;
}
/* Type courant : la pastille suit le defilement. */
.adm-ds .container-scrollable .dcz-badge.is-current {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}
/* La compensation de la barre collee est calculee en JS (`navOffset`), sa hauteur variant
   avec le nombre de lignes de pastilles. Rien a figer ici. */

/* Infobulles de description de type : elles contiennent des phrases entieres, la largeur
   par defaut de Bootstrap les rend illisibles. Regle extraite du bloc <style> qui vivait
   dans document_category/index.html.twig (cf. CLAUDE.md § 6, aucun style inline en Twig).
   R15 (2026-09-16) : l'ancien selecteur `.adm-ds .container-scrollable .popover` ne matchait JAMAIS
   (popovers inseres dans body, container: 'body') ; app.css impose alors `max-width: 100%` -> une seule
   ligne, plus large que l'ecran pour les 4 descriptions les plus longues (Offre Contrat, Cloture,
   Accord de confidentialite, Questions Entreprises) -> infobulle invisible. Cible = classe body posee
   par layout_account_backend_content.html.twig. */
body.adm-ds-page .popover {
    max-width: 300px !important;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - cadenas d abonnement porte par une CARTE (etape 7, 2026-08-30).

   Depuis la dissolution du fourre-tout « Activation fonctionnalites demandes », une meme
   page reunit des reglages verrouilles par `canAccessExtendedConfiguration` et des reglages
   ouverts a tous. Le cadenas ne peut donc plus vivre sur le bouton Enregistrer : il se pose
   sur le titre de la carte concernee (partiel `_locked_badge.html.twig`).
   --------------------------------------------------------------------- */
.adm-ds .adm-card > h2 .adm-locked-badge {
    margin-left: 8px;
    font-size: 0.78em;
    color: #94a3b8;
    vertical-align: middle;
    cursor: help;
}

/* ---------------------------------------------------------------------
   QUALIFICATION - bloc des elements ARCHIVES (etape 8, 2026-08-30).

   Un item retire de la checklist n est plus propose, mais la reponse deja recueillie reste
   visible en LECTURE SEULE (fiche entreprise et portail societe). Le bloc est volontairement
   en retrait : c est de l historique, pas de la saisie.
   --------------------------------------------------------------------- */
.spl-qual-archived {
    opacity: 0.75;
    border-top: 1px dashed #cbd5e1;
    padding-top: 12px;
    margin-top: 8px;
}
.spl-qual-archived .spl-qual-archived-hint {
    font-size: 0.74rem;
    font-style: italic;
    color: #64748b;
    padding-bottom: 6px;
}

/* Ligne structurelle « action reversible » de la modale d ARCHIVAGE (etape 8, 2026-08-30).
   Calque de .ds-confirm-irreversible, mais en teal : archiver n est pas supprimer, et la modale
   doit le dire au lieu d annoncer une action definitive. */
.ds-confirm-reversible {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef1f4;
    font-size: 0.78rem;
    font-weight: 500;
    color: #2D3E50;
}
.ds-confirm-reversible i {
    color: #0d9488;
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - questionnaires d offres, ligne de LECTURE (lot Questionnaires, 2026-08-30).

   La vue reprend telle quelle la presentation `.rfx-qread-*` de l application. Deux ecarts :
   le hub n a pas de drawer d edition (lignes non cliquables) et doit donc afficher sur place les
   details qui, cote application, vivent dans le drawer - options d un choix, unite, bornes,
   exigence documentaire. `.rfx-qread-row-main` etant en `white-space: nowrap`, ils sortent du
   bloc principal et occupent leur propre ligne.
   --------------------------------------------------------------------- */
.qst-row { flex-wrap: wrap; }
.qst-row-details {
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #64748b;
    white-space: normal;
}

/* Questionnaires du hub : `.rfx-qtabs-block` porte un `margin-top: 18px` utile dans l application,
   ou le bloc flotte sur le fond de page. Ici il est le PREMIER enfant d une `.adm-card` : sa marge
   s ajoute au padding de la carte et creuse un vide au-dessus du titre (recette 2026-08-30). */
.adm-ds .adm-card > .rfx-qtabs-block:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------
   HUB ADMINISTRATION - poignee de reordonnancement des listes du referentiel (2026-08-30).

   Familles d achats, sous-familles, prescripteurs et structures se reordonnent au glisser.
   La poignee est posee en dehors du flux, a gauche de la ligne, pour ne decaler aucune colonne
   des grilles existantes - celles-ci ont deja ete cassees une fois par un forcage de largeur.
   --------------------------------------------------------------------- */
.adm-ds .category-row,
.adm-ds .sub-category-row,
.adm-ds .ordering-department-row,
.adm-ds .ordering-organization-row {
    position: relative;
}
.adm-ds .ref-drag {
    position: absolute;
    left: 15px;   /* bord gauche du contenu : aligne sur le libelle « Nom » de l en-tete */
    /* Les .col-* de Bootstrap sont `position: relative` et, venant APRES dans le DOM, elles
       peignent AU-DESSUS de la poignee : elle restait visible mais increvable au clic (aucun
       curseur, aucun glisser). Piege deja rencontre sur ce projet. */
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    font-size: 0.78rem;
    cursor: grab;
    user-select: none;
}
.adm-ds .ref-drag:hover { color: #0d9488; }
.adm-ds .ref-drag:active { cursor: grabbing; }
/* La ligne d en-tete des colonnes porte la meme classe que les lignes de donnees : elle ne doit
   pas afficher de poignee ni etre deplacable. */
.adm-ds .form-group.category-row > .ref-drag,
.adm-ds .form-group.sub-category-row > .ref-drag,
.adm-ds .form-group.ordering-department-row > .ref-drag,
.adm-ds .form-group.ordering-organization-row > .ref-drag { display: none; }
.adm-ds .ref-drag-placeholder {
    border: 1px dashed #0d9488;
    background: #f0fdfa;
    border-radius: var(--r-md, 6px);
    margin: 2px 0;
}

/* La poignee occupant le debut du contenu, le champ Nom des lignes de DONNEES se decale pour lui
   laisser la place. L en-tete (`.form-group`) n est pas concerne : il n a pas de poignee. */
.adm-ds .category-row:not(.form-group) > [class*="col-"] > .row > [class*="col-"]:first-child .input-group,
.adm-ds .sub-category-row:not(.form-group) > [class*="col-"] > .row > [class*="col-"]:first-child .input-group,
.adm-ds .ordering-department-row:not(.form-group) > [class*="col-"] > .row > [class*="col-"]:first-child .input-group,
.adm-ds .ordering-organization-row:not(.form-group) > [class*="col-"] > .row > [class*="col-"]:first-child .input-group {
    padding-left: 22px;
}

/* ── RFx / Pilotage : modale de confirmation « Envoyer mails de rappel » ───────────────────────────
   Annonce, avant envoi, quel rappel part et a qui (+ date du dernier rappel). Reprend le vocabulaire
   de la modale « Historique » (.rfx-act-*) et n ajoute que ce qui lui est propre. */
.rfx-ds .rfx-rem-scope { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 0.8rem; opacity: .95; }
.rfx-ds .rfx-rem-scope i { margin-right: 5px; opacity: .85; }
.rfx-ds .rfx-act-scroll > .rfx-act-section-label:first-child { margin-top: 2px; }
.rfx-ds .rfx-rem-count { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-full, 999px); background: #e2e8f0; color: #475569; font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.rfx-ds .rfx-rem-supplier { font-size: 0.92rem; font-weight: 600; color: #0f172a; }
.rfx-ds .rfx-rem-icon-send { background: #e6f7f4; color: #0d9488; }
.rfx-ds .rfx-rem-icon-skip { background: #f1f5f9; color: #94a3b8; }
.rfx-ds .rfx-rem-item-skip { background: #fafbfc; }
.rfx-ds .rfx-rem-item-skip .rfx-rem-supplier { color: #64748b; font-weight: 500; }
.rfx-ds .rfx-rem-reason { font-size: 0.82rem; color: #94a3b8; }
.rfx-ds .rfx-rem-contacts { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.rfx-ds .rfx-rem-contact { font-size: 0.82rem; color: #475569; }
.rfx-ds .rfx-rem-contact i { margin-right: 6px; opacity: .8; }
.rfx-ds .rfx-rem-mail { color: #94a3b8; }
.rfx-ds .rfx-rem-mail:before { content: '\00b7'; margin: 0 6px; }
.rfx-ds .rfx-rem-form { display: inline-block; }
/* Pilotage 3 etats (A1) : selection des entreprises a relancer + etat de chaque cible dans la modale de rappel. */
.rfx-ds .rfx-rem-scope-select { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.rfx-ds .rfx-rem-scope-label { font-size: 0.82rem; color: #64748b; margin-right: 4px; }
.rfx-ds .rfx-rem-scope-opt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: var(--r-full, 999px); font-size: 0.82rem; color: #475569; background: #fff; cursor: pointer; margin: 0; font-weight: 500; }
.rfx-ds .rfx-rem-scope-opt input { margin: 0; }
.rfx-ds .rfx-rem-scope-opt.is-active { border-color: #2D3E50; color: #2D3E50; background: #f1f5f9; }
.rfx-ds .rfx-rem-state { font-size: 0.78rem; padding: 1px 8px; border-radius: var(--r-full, 999px); margin-left: 8px; white-space: nowrap; }
.rfx-ds .rfx-rem-state-progress { background: #fef3c7; color: #92400e; }
.rfx-ds .rfx-rem-state-idle { background: #e0f2fe; color: #075985; }

/* ── Profil : notifications par e-mail (chantier Notifications, étape 3) ──
   Liste de cases par module dans l'onglet Préférences. Reprend les espacements des autres
   groupes de champs du profil (.prof-field-group) pour rester homogène avec la page. */
/* Accroche de la liste (« Je souhaite recevoir un e-mail quand : ») : un cran au-dessus des
   libellés de module, pour introduire les cases sans repasser par un texte d'aide gris. */
.prof-notif-intro { font-size: 0.92rem; font-weight: 500; color: #2D3E50; margin-bottom: 20px; }
.prof-notif-group { margin-bottom: 22px; }
.prof-notif-group:last-child { margin-bottom: 0; }
/* Les cases s'écoulent en ligne et passent à la ligne suivante : sans conteneur flex elles
   héritaient de l'inline-flex Bootstrap et se retrouvaient collées les unes aux autres. */
.prof-notif-list { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 10px; }
.prof-notif-line { display: flex; align-items: center; margin: 0; min-height: 0; padding-left: 1.5rem; }
.prof-notif-line .custom-control-label { font-size: 0.8rem; line-height: 1.25; color: #37474f; cursor: pointer; }
/* Bootstrap cale la case sur `top: 0.25rem`, calibré pour un texte à 1rem : à 0.8rem elle
   remonte au-dessus de la ligne. On la centre verticalement sur le libellé. */
.prof-notif-line .custom-control-label::before,
.prof-notif-line .custom-control-label::after { top: 50%; transform: translateY(-50%); }
.prof-notif-line .custom-control-label::before { border-color: #c7d2da; }
.prof-notif-line .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ds-teal, #0d9488);
    border-color: var(--ds-teal, #0d9488);
}
.prof-notif-line .custom-control-input:focus ~ .custom-control-label::before { outline: none; box-shadow: none; }
/* Le second axe du réglage (« les mails où je suis en copie ») est séparé par un filet :
   ce n'est pas un module de plus, c'est un interrupteur transverse. */
.prof-notif-copies { border-top: 1px solid #e2e8ec; padding-top: 14px; margin-top: 4px; }
.prof-notif-copies-help { margin-top: 10px; margin-bottom: 0; }

/* Onglet Sécurité : le « ? » d'aide du mot de passe. Était en .text-red-light (corail legacy)
   avec un popover clair ; passe en teal DS + tooltip foncé (template .aspp-tt). */
.prof-help-icon { color: #0d9488; font-size: 0.82rem; cursor: help; margin-left: 5px; }
.prof-help-icon:hover { color: #0b7d72; }
.prof-help-icon:focus { outline: none; }
.prof-help-icon:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }


/* ============================================================================
   Ecran Transferts (Utilisateurs > Transferts) - chantier anonymisation etape 2.
   Prefixe .trf-* pour eviter toute collision.
   ============================================================================ */

/* Deplacee depuis le bloc <style> du template (CLAUDE.md 6 : pas de style inline).
   SCOPEE a la page : la regle etait globale dans le template, la reprendre telle quelle
   dans app-ds.css l aurait appliquee a tous les popovers de application. */
.trf-page .popover { max-width: 300px !important; }

/* --- Choix du geste : copier ou transferer --- */
.trf-modes { display: flex; gap: 12px; flex-wrap: wrap; }
.trf-mode { flex: 1 1 260px; position: relative; }
.trf-mode input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.trf-mode label {
    display: block; margin: 0; padding: 12px 14px 12px 38px; cursor: pointer;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 8px); background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.trf-mode label::before {
    content: ""; position: absolute; left: 14px; top: 15px; width: 14px; height: 14px;
    border: 1px solid #cbd5e1; border-radius: var(--r-full, 999px); background: #fff;
}
.trf-mode input:checked + label { border-color: #0d9488; background: #f0fdfa; }
.trf-mode input:checked + label::before { border-color: #0d9488; border-width: 4px; }
.trf-mode input:focus + label { outline: none; }
.trf-mode input:focus-visible + label { outline: 2px solid #0d9488; outline-offset: 2px; }
.trf-mode-title { display: block; font-weight: 600; font-size: 0.85rem; color: #2D3E50; }
.trf-mode-hint { display: block; font-size: 0.78rem; color: #64748b; margin-top: 2px; }

/* --- Recapitulatif chiffre de ce qui bascule --- */
.trf-recap {
    margin-top: 18px; padding: 14px 16px; background: #f8fafc;
    border-left: 4px solid #0d9488; border-radius: var(--r-md, 8px);
}
.trf-recap-title { font-weight: 700; font-size: 0.85rem; color: #2D3E50; margin-bottom: 8px; }
.trf-recap-list { list-style: none; margin: 0 0 10px; padding: 0; }
.trf-recap-list li { font-size: 0.82rem; color: #334155; padding: 2px 0; }
.trf-recap-count {
    display: inline-block; min-width: 26px; margin-right: 8px; padding: 1px 6px;
    text-align: center; font-weight: 700; font-size: 0.78rem;
    background: #0d9488; color: #fff; border-radius: var(--r-full, 999px);
}
.trf-recap-loading, .trf-recap-empty { color: #64748b; font-style: italic; }
.trf-recap-kept, .trf-recap-manager { font-size: 0.78rem; color: #64748b; margin: 0; }
.trf-recap-manager { margin-top: 6px; color: #b45309; font-weight: 600; }

/* --- Attente pendant le transfert (calque de rfx-send-sending) --- */
.trf-waiting { padding: 28px 24px; text-align: center; }
.trf-waiting img { display: block; margin: 0 auto 14px; }
.trf-waiting-title { font-size: 1.05rem; font-weight: 700; color: #2D3E50; margin-bottom: 6px; }
.trf-waiting-text { font-size: 0.9rem; color: #64748b; margin: 0 auto; max-width: 420px; }

/* --- Encart de reprise sur les listes Acheteurs / Contributeurs (etape 4) ---
   Format ambre du design system : fond teinte + filet 4px a gauche. */
.trf-notice {
    margin: 0 0 18px; padding: 14px 16px; background: #fffbeb;
    border-left: 4px solid #d97706; border-radius: var(--r-md, 8px);
}
.trf-notice-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 0.88rem; color: #92400e; margin-bottom: 4px;
}
.trf-notice-head i { color: #d97706; }
.trf-notice-text { font-size: 0.8rem; color: #78350f; margin: 0 0 10px; }
.trf-notice-list { list-style: none; margin: 0; padding: 0; }
.trf-notice-list li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 5px 0; border-top: 1px solid #fde68a; font-size: 0.82rem;
}
.trf-notice-list li:first-child { border-top: none; }
.trf-notice-name { font-weight: 600; color: #2D3E50; }
.trf-notice-count {
    padding: 1px 8px; font-size: 0.75rem; font-weight: 600;
    background: #fef3c7; color: #92400e; border-radius: var(--r-full, 999px);
}
.trf-notice-link { margin-left: auto; font-weight: 600; color: #0d9488; }
.trf-notice-link:hover { color: #0f766e; text-decoration: underline; }
.trf-notice-link:focus { outline: none; }
.trf-notice-link:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* ============================================================
   Navbar principale - lisibilite de l'item actif (2026-09-03)
   Le bloc "chip" du 2026-06-14 avait neutralise les 2 autres signaux de
   selection (fond de ligne + rail lateral ::before) : il ne restait que la
   pastille teal a 32% d'opacite, soit un contraste de 1.41:1 sur le navy
   -> hub selectionne quasi invisible, en particulier en mode replie ou le
   libelle disparait. On retablit 3 signaux redondants : rail teal colle au
   bord, pastille teal pleine, libelle contraste.
   Scope niveau 1 (> li > a) : ne doit PAS toucher les .dropdown-item du
   selecteur de langue, eux aussi li > a sous .navbar-primary-menu.
   ============================================================ */

/* 1. Rail teal 3px colle au bord gauche de la barre. Re-active le ::before
      deja ecrit plus haut puis annule par le bloc chip. Visible en replie. */
.navbar-primary-menu > li > a.active::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: -8px;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: #0d9488;
    border-radius: 0 2px 2px 0;
}

/* 2. Pastille teal PLEINE au lieu de rgba(13,148,136,0.32) : 2.93:1 sur le navy. */
.navbar-primary-menu > li > a.active > i {
    background: #0d9488 !important;
    color: #fff !important;
}

/* 3. Hierarchie de texte : jusqu'ici tous les libelles etaient blancs, donc
      aucun signal cote texte. Inactifs attenues, actif blanc franc + 600. */
.navbar-primary-menu > li > a .nav-label { color: rgba(255,255,255,0.72); }
.navbar-primary .navbar-primary-menu > li > a:not(.link-disabled):hover .nav-label { color: #fff; }
.navbar-primary-menu > li > a.active .nav-label { color: #fff; font-weight: 600; }

/* Variante claire (navTheme='light') : meme logique, teintes adaptees. */
.navbar-primary--light .navbar-primary-menu > li > a.active::before { background: #0d9488; }
.navbar-primary--light .navbar-primary-menu > li > a.active > i { background: #0d9488 !important; color: #fff !important; }
.navbar-primary--light .navbar-primary-menu > li > a .nav-label { color: #64748b; }
.navbar-primary--light .navbar-primary-menu > li > a.active .nav-label { color: #2D3E50; font-weight: 600; }

/* Astuce de l'encart de reprise : rappelle que les profils anonymises restent filtrables. */
.trf-notice-tip {
    margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #fde68a;
    font-size: 0.76rem; color: #92400e; font-style: italic;
}

/* ---------------------------------------------------------------------------
   En-tetes de groupe dans les listes deroulantes selectpicker.

   Les seuls optgroups de application sont ceux du chantier anonymisation
   (11 filtres + source de ecran Transferts) : verifie, aucun autre group_by ni
   <optgroup> en dur. La regle est neanmoins portee par un selecteur a 3 niveaux
   pour rester confinee aux dropdowns selectpicker.

   Objectif : reperer immediatement le groupe des comptes inactifs -> fond teal
   leger, texte teal, et surtout beaucoup MOINS de hauteur perdue au-dessus
   (Bootstrap applique .5rem 1.5rem par defaut, plus un separateur).
   --------------------------------------------------------------------------- */
.bootstrap-select .dropdown-menu li.dropdown-header {
    margin: 4px 0 0;
    padding: 3px 10px;
    background: #f0fdfa;
    border-top: 1px solid #99f6e4;
    border-bottom: 1px solid #ccfbf1;
    color: #0f766e;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.bootstrap-select .dropdown-menu li.dropdown-header .text {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Le fond teal separe deja visuellement : le trait de separation ne fait
   qu ajouter de la hauteur au-dessus du titre. */
.bootstrap-select .dropdown-menu li.dropdown-divider,
.bootstrap-select .dropdown-menu li.divider { display: none; }

/* Options rattachees au groupe : legerement resserrees et decalees, pour que le
   bloc se lise comme un ensemble sous son titre. */
.bootstrap-select .dropdown-menu li.dropdown-header + li a { padding-top: 4px; }

/* ── Groupes de filtres dans les drawers "Filtrer" (chantier 2026-09-03) ────────
   Sections repliables qui structurent les filtres d'un drawer (jusqu'a 19 champs
   sur le drawer Dossiers). Calque volontairement leger sur .ds-drawer-favorites-*
   (meme chevron, meme logique .is-collapsed) : pas de fond teinte ici, le fond
   teal reste reserve au bloc Favoris qui doit ressortir au-dessus des groupes. */
.ds-drawer-group { margin-bottom: 2px; }
.ds-drawer-group + .ds-drawer-group { border-top: 1px solid #eef2f6; }
.ds-drawer-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 11px 0 9px;
    transition: color 0.12s;
}
.ds-drawer-group-header:hover { color: var(--ds-teal, #0d9488); }
/* Pas d'outline navigateur au clic, mais focus clavier conserve. */
.ds-drawer-group-header:focus { outline: none; }
.ds-drawer-group-header:focus-visible { outline: 2px solid var(--ds-teal, #0d9488); outline-offset: 2px; }
.ds-drawer-group-chevron {
    color: #94a3b8;
    font-size: 0.72rem;
    transition: transform 0.18s;
}
.ds-drawer-group.is-collapsed .ds-drawer-group-chevron { transform: rotate(-90deg); }
.ds-drawer-group.is-collapsed .ds-drawer-group-body { display: none; }
.ds-drawer-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    flex: 1 1 auto;
}
/* Compteur de filtres actifs du groupe : visible meme groupe replie, c'est lui qui
   signale qu'un filtre est pose dans une section qu'on ne voit pas. */
.ds-drawer-group-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--ds-teal, #0d9488);
    border-radius: var(--r-sm, 2px);
    padding: 1px 7px;
}
.ds-drawer-group-body { padding-top: 2px; }
/* ── Resserrement des espacements dans les drawers "Filtrer" (2026-09-03) ───────
   Deux reglages demandes apres le premier rendu de l'etape 1. */

/* Dropdowns d'un meme groupe : 18px etait cale sur une liste plate ou l'espace
   servait seul de separateur. Les groupes assurent desormais la separation, donc
   les champs d'une meme section se lisent mieux resserres. Scope au corps de
   groupe : les drawers pas encore regroupes gardent leur espacement d'origine. */
.ds-drawer-group-body .ds-drawer-section { margin-bottom: 10px; }
/* Dernier champ : pas d'espace superflu avant le groupe suivant. */
.ds-drawer-group-body .ds-drawer-section:last-child { margin-bottom: 6px; }

/* Liste "Mes filtres sauvegardes" : items resserres pour que la liste se lise
   comme un bloc. Le confort de clic reste assure par la hauteur de ligne + le
   padding horizontal, et la zone de survol reste pleine largeur. */
.ds-favorite-item { padding: 3px 8px; }

/* --- Encart d'avertissement de l'ecran Transferts en mode ANONYMISATION (etape 3) ---
   Meme structure que .trf-notice, registre destructeur : le geste est irreversible, il ne doit
   pas se lire comme un simple avertissement ambre. */
.trf-notice-danger { background: #fef2f2; border-left-color: #dc2626; }
.trf-notice-danger .trf-notice-head { color: #991b1b; }
.trf-notice-danger .trf-notice-head i { color: #dc2626; }
.trf-notice-danger .trf-notice-text { color: #7f1d1d; }
.trf-notice-danger .trf-notice-text:last-child { margin-bottom: 0; }

/* --- Encart de reprise enrichi (2026-09-04) -------------------------------------------------
   La DATE d'anonymisation situe le cas dans le temps et explique l'ordre de la liste (le plus
   recent en tete). Discrete : elle accompagne le nom, elle ne lui dispute pas la lecture.
   La SEQUENCE a suivre est detachee de la liste par un filet, comme une conclusion. */
.trf-notice-when { font-size: 0.75rem; color: #a16207; font-style: italic; }
.trf-notice-sequence {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #fde68a;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Aide sous le champ beneficiaire, en mode anonymisation : elle presente le cas « le remplacant
   n'existe pas encore » comme prevu, avec la suite a faire. Discrete, sous le champ, elle ne doit
   pas concurrencer l avertissement rouge du haut. */
.trf-hint {
    margin: 6px 0 0; font-size: 0.78rem; line-height: 1.45; color: #64748b;
}

/* --- Ecran Transferts reorganise (2026-09-04) -----------------------------------------------
   L'ecran se lit desormais dans l'ordre du raisonnement : QUEL GESTE (cartes radio), CE QU'IL
   FERA (recapitulatif), QUI (les deux champs), puis l action. */
.trf-field-label {
    display: block; margin-bottom: 4px;
    font-size: 0.78rem; font-weight: 600; color: #2D3E50;
}
.trf-fields { margin-top: 18px; }

/* Intro du recapitulatif de copie, et note sous la case Contrats : le texte etait auparavant
   cache derriere un « ? » a survoler. */
.trf-recap-intro { font-size: 0.8rem; color: #64748b; margin: 0 0 10px; }
.trf-check { margin-bottom: 10px; }
.trf-check:last-child { margin-bottom: 0; }
.trf-check-note {
    margin: 2px 0 0 26px; font-size: 0.75rem; line-height: 1.45; color: #64748b;
}

/* Encadre ambre sous le champ beneficiaire : resserre, il accompagne le champ sans peser. */
.trf-hint-warn { margin-top: 8px; margin-bottom: 0; font-size: 0.78rem; }

/* Etape courante dans la fenetre d'attente : sur un gros compte l'operation dure plusieurs
   minutes, et un spinner immobile laisse croire a un blocage. Discrete, sous le texte. */
.trf-waiting-step {
    margin: 12px auto 0; max-width: 420px;
    font-size: 0.82rem; font-style: italic; color: #0d9488;
}

/* Chronometre de la fenetre d'attente : les etapes s'arretent sur la derniere alors que
   l'operation peut durer deux minutes de plus. Lui avance sans discontinuer et prouve que la
   page est vivante. */
.trf-waiting-elapsed {
    margin: 10px 0 0; font-size: 1.1rem; font-weight: 600; color: #2D3E50;
    font-variant-numeric: tabular-nums; letter-spacing: 0.5px;
}

/* Icone de la fenetre d'alerte simple (remplace le alert() du navigateur). */
.trf-alert-icon { color: #d97706; font-size: 1.6rem; margin-bottom: 10px; }

/* Selecteur de round loge DANS le bandeau de l onglet Analyse (retour Olivier 2026-09-05) :
   sur sa propre ligne au-dessus, il flottait sans rattachement visuel. Le bandeau etant un flex
   avec gap, il se place naturellement a droite du titre ; `.rfx-fin-views` garde son margin-left:auto
   et reste colle a droite. Hauteur reduite pour tenir dans le bandeau (padding 10px). */
.rfx-ds .rfx-fin-chapeau .rfx-chapeau-round .rfx-round-dd-btn { height: 30px; min-width: 205px; font-size: 0.8rem; }
.rfx-ds .rfx-fin-chapeau .rfx-chapeau-round { margin-left: 6px; }

/* Barre d actions du round : « Creer un nouveau round » etait plus HAUT que la pastille
   d evaluation posee a cote (padding 8px + 0.85rem contre 7px + 0.8rem), ce qui desalignait la
   barre (retour Olivier 2026-09-05). Aligne sur la pastille, sans toucher au bouton ailleurs. */
.rfx-round-toolbar .ds-btn-secondary { padding-top: 7px; padding-bottom: 7px; font-size: 0.8rem; }

/* Avertissement « item a choix rendu obligatoire » dans la ligne d un item de la checklist de
   qualification Entreprises (Admin / Configuration / Entreprises). Reprend `.adm-hint--warn`,
   mais un encart de page a des marges trop genereuses a l interieur d une ligne de formulaire :
   on resserre uniquement l espacement, la couleur et l icone restent celles du DS. */
.sqz-item-row .sqz-item-hint { margin-bottom: 0; padding: 8px 12px; font-size: 0.8rem; }

/* ============================================================================
   Vue Fiabilite de l'onglet Analyse (etape 2b, 2026-09-05) - prefixe .rly-*
   Format TABLEAU : compact, pour que 30 points de vigilance tiennent a l'ecran.
   La phrase complete de la regle vit dans l'infobulle de la cellule d'ecart.
   ============================================================================ */
.rfx-ds .rly-intro{display:flex;align-items:baseline;gap:.5rem;margin:.9rem 0 .6rem;font-size:.85rem;color:#1f4d47;}
.rfx-ds .rly-intro-number{font-size:1.25rem;font-weight:700;color:#0f766e;}

.rfx-ds .rly-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.rfx-ds .rly-table thead th{padding:.35rem .5rem;text-align:left;font-size:.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.03em;color:#5b6b7b;border-bottom:1px solid #e2e8f0;white-space:nowrap;}
.rfx-ds .rly-table tbody td{padding:.4rem .5rem;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
.rfx-ds .rly-table tbody tr:hover{background:#f8fafc;}
/* Jugee : la ligne recule sans disparaitre, l'acheteur doit pouvoir y revenir. */
.rfx-ds .rly-table tbody tr.rly-row-reviewed{color:#94a3b8;}
.rfx-ds .rly-table tbody tr.rly-row-out{text-decoration:line-through;opacity:.7;}

.rfx-ds .rly-badge{display:inline-block;padding:.1rem .4rem;border-radius:var(--r-sm,.25rem);font-size:.65rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;background:#e2e8f0;color:#475569;}
.rfx-ds .rly-badge-1{background:#fee2e2;color:#b91c1c;}
.rfx-ds .rly-badge-2{background:#ffedd5;color:#c2410c;}
.rfx-ds .rly-badge-3{background:#fef9c3;color:#a16207;}
.rfx-ds .rly-badge-4{background:#e0e7ff;color:#4338ca;}

.rfx-ds .rly-cell-supplier{font-weight:600;color:#2D3E50;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Designation en premier et en evidence : c'est par elle que l'acheteur reconnait la ligne. */
.rfx-ds .rly-cell-line{max-width:280px;}
.rfx-ds .rly-line-name{display:block;font-weight:600;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rfx-ds .rly-line-path{display:block;font-size:.7rem;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.rfx-ds .rly-cell-detail{white-space:nowrap;cursor:help;}
.rfx-ds .rly-arrow{color:#b45309;font-weight:700;margin:0 .2rem;}
.rfx-ds .rly-vs{color:#94a3b8;font-size:.72rem;margin:0 .15rem;}
.rfx-ds .rly-ratio{margin-left:.3rem;font-weight:700;color:#b45309;}
.rfx-ds .rly-confirm{margin-left:.3rem;color:#0f766e;font-size:.72rem;}
.rfx-ds .rly-cell-impact{white-space:nowrap;font-weight:700;color:#b45309;}

.rfx-ds .rly-cell-actions{white-space:nowrap;text-align:right;}
.rfx-ds .rly-action-form{display:inline;margin:0;}
.rfx-ds .rly-btn{padding:.12rem .45rem;font-size:.72rem;border:1px solid #cbd5e1;border-radius:var(--r-sm,.25rem);
    background:#fff;color:#475569;cursor:pointer;}
.rfx-ds .rly-btn:hover{background:#f1f5f9;}
.rfx-ds .rly-btn-ok{border-color:#0d9488;color:#0f766e;}
.rfx-ds .rly-btn-ok:hover{background:#f0fdfa;}
.rfx-ds .rly-status{margin-right:.25rem;}
.rfx-ds .rly-status-1{color:#0f766e;}
.rfx-ds .rly-status-2{color:#b91c1c;}

.rfx-ds .rly-footnote{margin:.8rem 0 .5rem;padding:.5rem .7rem;font-size:.74rem;color:#5b6b7b;
    background:#f8fafc;border:1px solid #e2e8f0;border-radius:var(--r-md,.5rem);}
.rfx-ds .rly-footnote i{margin-right:.3rem;color:#94a3b8;}

/* Selecteurs de seuil, sous le bandeau (etape 2b, retour Olivier 2026-09-05). */
.rfx-ds .rly-factors{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 0;font-size:.78rem;color:#5b6b7b;}
.rfx-ds .rly-factors label{margin:0 0 0 .6rem;font-weight:600;}
.rfx-ds .rly-factors label:first-child{margin-left:0;}
.rfx-ds .rly-factor{padding:.1rem .35rem;font-size:.78rem;border:1px solid #cbd5e1;
    border-radius:var(--r-sm,.25rem);background:#fff;color:#334155;}

/* Selection multiple et actions groupees (retour Olivier 2026-09-05). */
.rfx-ds .rly-col-check{width:26px;padding-right:0;}
.rfx-ds .rly-bulk{display:flex;align-items:center;gap:.4rem;margin:.5rem 0;padding:.4rem .6rem;
    background:#f0fdfa;border:1px solid #99f6e4;border-radius:var(--r-md,.5rem);font-size:.78rem;}
.rfx-ds .rly-bulk-count{margin-right:.4rem;color:#1f4d47;}
.rfx-ds .rly-bulk-count strong{color:#0f766e;}

/* Modele de questionnaire d offres MASQUE (etape 3, 2026-09-05) : conserve avec ses questions,
   mais plus propose a l acheteur au moment de choisir un questionnaire. On attenue l onglet sans
   le cacher - l admin doit pouvoir le retrouver pour le reactiver. */
.qualification-set-item.qs-inactive .item-tab { opacity: 0.45; font-style: italic; }
.qualification-set-item.qs-inactive .qs-active-toggle { opacity: 0.75; }


/* ============================================================================
   Vue Scenarios de l'onglet Analyse (etape 5a, 2026-09-06) - prefixe .scn-*
   Comparer deux hypotheses d'attribution : la colonne A s'edite, la colonne B
   sert de repere. La SYNTHESE et le DETAIL sont un seul tableau, pour que les
   colonnes s'alignent par construction et que le haut se lise comme le total
   de ce qui est dessous (cible validee sur maquette).
   ============================================================================ */
.rfx-ds .scn-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.9rem 0 .75rem;}
.rfx-ds .scn-toolbar-label{margin:0;font-size:.8rem;font-weight:600;color:#5b6b7b;}
.rfx-ds .scn-spacer{flex:1;}
.rfx-ds .scn-hidden{display:none !important;}

/* Selecteur de niveau d'attribution : grille / lot / sous-lot. */
.rfx-ds .scn-seg{display:inline-flex;border:1px solid #e2e8f0;border-radius:var(--r-sm,.25rem);overflow:hidden;}
.rfx-ds .scn-seg button{padding:.25rem .7rem;font-size:.8rem;color:#5b6b7b;background:#fff;border:0;}
.rfx-ds .scn-seg button + button{border-left:1px solid #e2e8f0;}
.rfx-ds .scn-seg button:focus{outline:none;}
.rfx-ds .scn-seg button:focus-visible{outline:2px solid #0d9488;outline-offset:-2px;}
.rfx-ds .scn-seg button[aria-pressed="true"]{color:#fff;background:#0d9488;font-weight:600;}

.rfx-ds .scn-fold-text{font-size:.8rem;color:#94a3b8;}
.rfx-ds .scn-fold-text b{color:#2D3E50;}
.rfx-ds .scn-ghost{padding:.25rem .7rem;font-size:.8rem;color:#334155;background:#fff;
    border:1px solid #e2e8f0;border-radius:var(--r-sm,.25rem);}
.rfx-ds .scn-ghost:hover{background:#f8fafc;}
.rfx-ds .scn-ghost:focus{outline:none;}
.rfx-ds .scn-ghost:focus-visible{outline:2px solid #0d9488;outline-offset:1px;}

/* Le tableau unique. `table-layout:fixed` garde les colonnes alignees quels que soient les libelles,
   et evite d'avoir a envelopper le tableau dans un conteneur scrollable - lequel casserait le
   `position:sticky` de l'en-tete, qui doit se resoudre contre `.rfx-content-scroll`. */
/* PAS d'`overflow:hidden` ici : il ferait de ce conteneur un contexte de defilement et
   neutraliserait le `position:sticky` de l'en-tete, qui doit se resoudre contre
   `.rfx-content-scroll`. Les angles sont donc arrondis cellule par cellule. */
.rfx-ds .scn-board{background:#fff;border:1px solid #e2e8f0;border-radius:var(--r-lg,.75rem);}
.rfx-ds .scn-table .scn-hd-name th:first-child{border-top-left-radius:var(--r-lg,.75rem);}
.rfx-ds .scn-table .scn-hd-name th:last-child{border-top-right-radius:var(--r-lg,.75rem);}
.rfx-ds .scn-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg,.75rem);}
.rfx-ds .scn-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg,.75rem);}
.rfx-ds .scn-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.85rem;}
.rfx-ds .scn-table th,
.rfx-ds .scn-table td{padding:.55rem .85rem;vertical-align:middle;text-align:left;}
.rfx-ds .scn-table tbody td{border-bottom:1px solid #f1f5f9;}
.rfx-ds .scn-table tbody tr:last-child td{border-bottom:0;}

/* En-tete collant, en trois bandes de hauteur FIXE : les decalages `top` en dependent, une hauteur
   auto rendrait la superposition approximative. */
.rfx-ds .scn-table thead th{position:sticky;z-index:2;box-sizing:border-box;background:#f8fafc;}
/* ⚠️ Les trois bandes collantes sont EMPILEES : sans z-index distincts, elles partagent le meme
   niveau et sont peintes dans l ordre du DOM. Le menu deroulant des scenarios, qui vit dans la
   bande du HAUT, passait donc SOUS la bande des totaux et sous celle des en-tetes de colonnes :
   ses premieres entrees etaient invisibles, et la liste semblait incomplete. La bande qui porte
   les menus doit dominer les deux autres. */
/* ⚠️ `vertical-align:top` : sans lui, la colonne SANS curseur recentre son contenu et son menu
   deroulant descend par rapport a celui de la colonne qui en a un. Meme piege que sur la bande
   de synthese. `height` devient un minimum, la bande s etirant avec les rails. */
.rfx-ds .scn-table .scn-hd-name th{top:var(--scn-top,0px);height:46px;vertical-align:top;
    padding-bottom:.2rem;z-index:5;}
/* ⚠️ `vertical-align:top` est INDISPENSABLE : un `th` est centre verticalement par defaut, donc
   la colonne qui retient le moins d entreprises voyait tout son bloc glisser vers le bas, et
   « Total » ne faisait plus face a « Total ». Egaliser la hauteur des bandes ne corrige pas
   cela : c est le bloc entier qui se recentre. */
.rfx-ds .scn-table .scn-hd-total th{z-index:4;top:calc(var(--scn-top,0px) + var(--scn-name-h,46px));height:auto;vertical-align:top;padding-top:0;
    padding-bottom:.6rem;border-bottom:1px solid #e2e8f0;}
/* ⚠️ Le `- 1px` du `top` ci-dessous est un RECOUVREMENT volontaire. Un filet de 1 a 2 px
   subsistait au-dessus de cette bande, dans lequel on voyait passer les lignes au defilement.
   Mesurer au demi-pixel pres (Math.ceil du rect, cote JS) n a pas suffi : la bande du dessus
   porte une `border-bottom` qui, en `border-collapse`, n est pas toujours comptee dans le rect.
   On recouvre donc d un pixel plutot que de courir apres la mesure exacte : invisible a l oeil,
   et robuste quel que soit l arrondi ou le zoom du navigateur. */
/* ⚠️ La bande de synthese porte desormais la repartition du chiffre d affaires : sa hauteur
   DEPEND du nombre d entreprises retenues, elle ne peut plus etre figee a 80px. Elle est
   mesuree en JS (`--scn-sum-h`) et remesuree a chaque rendu, sinon la bande des en-tetes de
   colonnes se colle a une hauteur perimee et chevauche la repartition. */
.rfx-ds .scn-table .scn-hd-col th{z-index:3;top:calc(var(--scn-top,0px) + var(--scn-name-h,46px) + var(--scn-sum-h,80px) - 1px);height:30px;background:#f1f5f9;
    font-size:.68rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;
    white-space:nowrap;border-bottom:1px solid #e2e8f0;}

/* ⚠️ Les largeurs sont portees par le `colgroup`, PAS par les `th`. En `table-layout:fixed`,
   elles sont lues sur la PREMIERE rangee, dont les cellules ont un `colspan` : les colonnes
   d'une paire s'y repartissaient 50/50 et toute largeur declaree plus bas etait ignoree. */
.rfx-ds .scn-table .scn-c-lead{width:17%;}
.rfx-ds .scn-table .scn-c-who{width:22%;}
.rfx-ds .scn-table .scn-c-amount{width:11%;}
.rfx-ds .scn-table .scn-c-gap{width:17%;}
.rfx-ds .scn-table .scn-col-amount{text-align:right;}
.rfx-ds .scn-table .scn-hd-gap{text-align:right;}
.rfx-ds .scn-lbl{display:block;font-size:.68rem;font-weight:700;color:#94a3b8;
    text-transform:uppercase;letter-spacing:.06em;}
.rfx-ds .scn-total-lbl{font-size:.85rem;font-weight:600;color:#5b6b7b;}

/* Les deux colonnes sont teintees DE BOUT EN BOUT, en-tete compris : c'est ce qui fait lire la
   synthese comme le total de ce qui est dessous, et qui distingue la colonne modifiable de la
   reference en lecture seule. La reference prend le creme, pas un gris quasi blanc : sur fond
   blanc, un gris a 2 % ne se voit pas et les deux colonnes se confondent.
   ATTENTION : `.scn-hd-col th` est plus specifique que `.scn-a` seul - il faut la regle combinee,
   sinon la bande d'en-tete de colonnes reprend le gris et la teinte s'interrompt. */
.rfx-ds .scn-table .scn-a{background:#f0fdfa;}
.rfx-ds .scn-table .scn-b{background:#fffbeb;}
.rfx-ds .scn-table .scn-hd-col .scn-a{background:#e6faf6;color:#5b6b7b;}
.rfx-ds .scn-table .scn-hd-col .scn-b{background:#fdf6e3;color:#5b6b7b;}
.rfx-ds .scn-table .scn-hd-total .scn-b,
.rfx-ds .scn-table .scn-hd-name .scn-b{border-left:1px solid #fde68a;}
.rfx-ds .scn-table .scn-hd-col .scn-b{border-left:1px solid #fde68a;}
.rfx-ds .scn-table tbody .scn-b{border-left:1px solid #fdf1cd;}

/* En-tete de chaque colonne : le contrôle est pose SUR ce qu'il modifie. Le passage a la ligne est
   autorise - sans lui, le bouton d'action deborde sur la colonne voisine quand le nom du scenario
   est long (constate sur « Tout a A - AAA PURE STORAGE FRANCE »). */
.rfx-ds .scn-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-width:0;}
/* Les deux pastilles doivent peser PAREIL a l oeil : une pastille creuse a filet fin lit plus
   petit qu une pastille pleine de meme taille (defaut constate par Olivier). Les deux sont
   donc pleines, et la reference prend un gris neutre : elle ne se modifie pas. */
.rfx-ds .scn-tag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    box-sizing:border-box;width:18px;height:18px;font-size:.66rem;font-weight:800;color:#fff;
    line-height:1;border-radius:var(--r-sm,.25rem);}
.rfx-ds .scn-tag-a{background:#0d9488;}
.rfx-ds .scn-tag-b{background:#94a3b8;}
/* Sens de l ecart, en tete de la colonne de droite : « A - B ». Les pastilles sont celles des
   deux colonnes, pour que le rapprochement soit immediat. */
.rfx-ds .scn-gap-legend{display:inline-flex;align-items:center;gap:.25rem;justify-content:flex-end;width:100%;}
.rfx-ds .scn-gap-legend-op{color:#94a3b8;font-weight:700;font-size:.8rem;line-height:1;}
/* Rappel sous le bouton de reprise de scenario, onglet Laureats. */
.rfx-ds .fin-scenario-notice{display:block;margin-top:.3rem;font-size:.72rem;color:#94a3b8;}
/* Grilles alternatives : ligne DEDIEE sous la barre des niveaux, celle-ci etant deja pleine. */
/* Sous-selecteur des deux comparateurs, dans le bandeau : il remplace la pill
   « Comparaison des alternatives », retiree faute de place dans la barre de vues. */
/* ── Case « Comparaisons » a DEUX sous-entrees ────────────────────────────────────────
   Les deux comparateurs vivent dans la MEME case de la barre de vues, avec leurs sous-entrees
   VISIBLES (choix Olivier 2026-09-08 : pas de menu deroulant). Tient parce que les libelles ont
   ete raccourcis : 79 caracteres au pire cas contre 81 avant, avec une entree de plus.
   La case est un `span` et non un `a` : les regles de couleur du bandeau ciblent `a.rfx-q-toggle-btn`,
   il faut donc les redire ici. */
.rfx-ds .rfx-fin-views .rfx-q-seg{display:inline-flex;align-items:center;gap:.4rem;
    padding-top:4px;padding-bottom:4px;background:transparent;color:#1f4d47;cursor:default;}
.rfx-ds .rfx-fin-views .rfx-q-seg.active{background:#0d9488;color:#fff;}
.rfx-ds .rfx-fin-views .rfx-q-seg-label{font-size:.85rem;font-weight:500;}
.rfx-ds .rfx-fin-views .rfx-q-seg-btn{padding:.1rem .5rem;font-size:.76rem;line-height:1.5;
    border-radius:var(--r-full,999px);border:1px solid transparent;text-decoration:none;}
/* ⚠️ Ancre sur `.rfx-fin-chapeau` et NON sur `.container-scrollable` : sur l ecran « Comparaison
   des grilles », le bandeau est volontairement SORTI du conteneur a defilement (sans quoi il
   suivait le tableau vers la droite). Scopees sur le conteneur, ces regles n y appliquaient rien
   et les sous-entrees sortaient en BLEU. Le bandeau, lui, existe sur les deux ecrans, et
   (0,5,1) suffit a battre `.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)` (0,4,1)
   la ou elle s applique. Lecon : un scope choisi pour la specificite doit exister PARTOUT. */
.rfx-ds .rfx-fin-chapeau .rfx-fin-views a.rfx-q-seg-btn:not(.btn):not(.nav-link){color:#1f4d47;background:rgba(255,255,255,.55);border-color:#a9d8d0;}
.rfx-ds .rfx-fin-chapeau .rfx-fin-views a.rfx-q-seg-btn:not(.btn):not(.nav-link):hover{color:#0b4a44;background:#fff;text-decoration:none;}
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-seg.active a.rfx-q-seg-btn:not(.btn):not(.nav-link){color:rgba(255,255,255,.85);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);}
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-seg.active a.rfx-q-seg-btn.active:not(.btn):not(.nav-link){color:#0f766e;background:#fff;border-color:#fff;font-weight:600;}
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-seg.active a.rfx-q-seg-btn:not(.btn):not(.nav-link):hover{color:#fff;background:rgba(255,255,255,.3);}
.rfx-ds .rfx-fin-chapeau .rfx-fin-views .rfx-q-seg.active a.rfx-q-seg-btn.active:not(.btn):not(.nav-link):hover{color:#0f766e;background:#fff;}

.rfx-ds .scn-toolbar-variants{margin-top:-.35rem;padding-top:0;flex-wrap:wrap;gap:.5rem 1rem;}
.rfx-ds .scn-variant-group{display:inline-flex;align-items:center;gap:.45rem;}
.rfx-ds .scn-variant-grid{font-size:.72rem;font-weight:600;color:#94a3b8;}
/* Anomalie portant sur une grille alternative : sans marqueur, elle serait indiscernable. */
.rfx-ds .rly-line-variant{display:block;margin-top:.1rem;font-size:.66rem;font-style:italic;color:#94a3b8;}




/* Le badge ci-dessus est fait pour le BOUTON du selecteur. Dans la liste deroulante, son fond et
   sa bordure formaient un cadre detache qui debordait : on n y garde que la couleur. */
.rfx-ds .bootstrap-select .dropdown-menu .scn-mine{padding:0;background:none;border:0;}
/* Une option desactivee - un scenario bati sur une autre grille - doit se VOIR inerte. Le plugin
   pose `.disabled` sur le `li`, mais rien ne le traduisait visuellement. */
.rfx-ds .bootstrap-select .dropdown-menu li.disabled{background:#f1f5f9;}
.rfx-ds .bootstrap-select .dropdown-menu li.disabled > a{color:#94a3b8;cursor:not-allowed;font-style:italic;background:none;}
/* ⚠️ Le menu s elargissait a la taille de sa plus longue entree - « Mon scenario (parti de
   Meilleur compromis par lot) » - et debordait de la colonne. On le borne et on autorise le
   retour a la ligne. Cible sur `.scn-pick` : les autres menus de l app gardent leur
   comportement. */
.rfx-ds .scn-pick .bootstrap-select .dropdown-menu{min-width:380px !important;max-width:380px;}
.rfx-ds .scn-pick .bootstrap-select .dropdown-menu li a{white-space:normal;line-height:1.3;}
.rfx-ds .scn-pick .bootstrap-select .dropdown-menu .scn-mine{display:inline;white-space:normal;}
.scn-mine{display:inline-block;padding:.05rem .4rem;font-size:.72rem;font-weight:700;
    letter-spacing:.03em;color:#b45309;background:#fffbeb;border:1px solid #fde68a;
    border-radius:var(--r-sm,.25rem);}

/* Les `select` de cet ecran ne passent pas par selectpicker : ils sont recrees a chaque rendu du
   tableau, et un composant a detruire/reinitialiser a chaque fois couterait plus qu'il n'apporte. */
.rfx-ds .scn-select{flex:1 1 8rem;min-width:0;max-width:100%;padding:.2rem .4rem;font-size:.8rem;
    color:#334155;background:#fff;border:1px solid #e2e8f0;border-radius:var(--r-sm,.25rem);}
.rfx-ds .scn-select:focus{outline:none;border-color:#0d9488;}
.rfx-ds .scn-select:disabled{color:#94a3b8;background:#f1f5f9;cursor:help;}
.rfx-ds .scn-pick-supplier{width:100%;flex:0 0 auto;}


/* Les chiffres s'alignent en colonne : chasse fixe obligatoire, sinon les milliers dansent. */
.rfx-ds .scn-sum{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;color:#2D3E50;
    line-height:1.15;font-variant-numeric:tabular-nums;}
.rfx-ds .scn-sum-cur{font-size:.78rem;font-weight:400;color:#94a3b8;letter-spacing:0;}
.rfx-ds .scn-sum-gap{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;color:#5b6b7b;
    line-height:1.15;font-variant-numeric:tabular-nums;}
.rfx-ds .scn-sum-gap.scn-gap-over{color:#b45309;}
.rfx-ds .scn-sum-gap.scn-gap-under{color:#0f766e;}
.rfx-ds .scn-sum-note{margin-top:.15rem;font-size:.72rem;color:#94a3b8;line-height:1.25;}
/* Ecart pondere (etape B) : sous l ecart en euros, dans la MEME bande, pour ne pas ajouter une
   bande collante de plus - leurs hauteurs sont mesurees en JS et ont deja cause deux defauts. */
.rfx-ds .scn-sum-weighted{margin-top:.35rem;padding-top:.3rem;border-top:1px solid #e2e8f0;line-height:1.3;}
.rfx-ds .scn-sum-weighted-lbl{display:block;font-size:.68rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;}
.rfx-ds .scn-sum-weighted-val{display:block;font-size:.95rem;font-weight:700;color:#5b6b7b;}
.rfx-ds .scn-sum-weighted-val.scn-wgap-over{color:#b45309;}
.rfx-ds .scn-sum-weighted-val.scn-wgap-under{color:#0f766e;}
.rfx-ds .scn-wtrend{margin-left:.3rem;font-size:.72rem;font-weight:700;cursor:default;vertical-align:baseline;}
.rfx-ds .scn-wtrend-up{color:#0f766e;}
.rfx-ds .scn-wtrend-down{color:#b45309;}
.rfx-ds .scn-wtrend-same{color:#94a3b8;font-weight:600;}

.rfx-ds .scn-sum-weighted-scope{display:block;margin-top:.05rem;font-size:.66rem;color:#94a3b8;font-weight:400;}
/* Poids du regroupement, dans la colonne de gauche. Discret : c est un reperage, pas une donnee
   de decision - le chiffre qui decide reste le montant. */
.rfx-ds .scn-lead-w{display:inline-block;margin-left:.4rem;padding:.05rem .3rem;border-radius:var(--r-sm,.25rem);
  background:#f1f5f9;color:#64748b;font-size:.66rem;font-weight:700;line-height:1.4;vertical-align:middle;cursor:default;}



.rfx-ds .scn-lead{color:#2D3E50;font-weight:600;}
.rfx-ds .scn-lead small{display:block;margin-top:.1rem;font-size:.7rem;font-weight:400;color:#94a3b8;}
.rfx-ds .scn-who{color:#334155;}
.rfx-ds .scn-mixed{font-style:italic;color:#94a3b8;}
.rfx-ds .scn-table td.scn-amount{text-align:right;white-space:nowrap;color:#2D3E50;font-variant-numeric:tabular-nums;}
.rfx-ds .scn-table td.scn-amount-a{font-weight:700;}

/* L'ecart par ligne autant qu'en total : c'est lui qui dit si une preference vaut son prix. */
.rfx-ds .scn-table td.scn-delta{text-align:right;white-space:nowrap;font-size:.82rem;font-weight:600;
    font-variant-numeric:tabular-nums;}
.rfx-ds .scn-table td.scn-delta small{display:block;font-size:.7rem;font-weight:400;opacity:.75;}
.rfx-ds .scn-table td.scn-delta-over{color:#b45309;}
.rfx-ds .scn-table td.scn-delta-under{color:#0f766e;}

.rfx-ds .scn-legend{display:flex;flex-wrap:wrap;gap:1rem;margin:.6rem 0;font-size:.72rem;color:#94a3b8;}
.rfx-ds .scn-chip{display:inline-block;width:10px;height:10px;margin-right:.3rem;
    border-radius:var(--r-sm,.25rem);vertical-align:-1px;}
.rfx-ds .scn-chip-a{background:#f0fdfa;border:1px solid #99f6e4;}
.rfx-ds .scn-chip-b{background:#fffbeb;border:1px solid #fde68a;}
.rfx-ds .scn-chip-over{background:#b45309;}
.rfx-ds .scn-chip-best{background:#0f766e;}

.rfx-ds .scn-note{margin-top:.4rem;font-size:.76rem;color:#5b6b7b;}
.rfx-ds .scn-note i{margin-right:.3rem;color:#94a3b8;}
.rfx-ds .scn-skipped{margin-top:.4rem;font-size:.76rem;color:#b45309;}
.rfx-ds .scn-skipped i{margin-right:.3rem;}
.rfx-ds .scn-skipped-item{display:inline-block;margin-left:.3rem;padding:0 .3rem;
    background:#fef3c7;border-radius:var(--r-sm,.25rem);}
/* Dropdowns : bootstrap-select, comme partout ailleurs dans l'app (`btn-white btn-sm`). Le `select`
   natif restait dessine par le systeme, avec un menu qui debordait de sa propre largeur et une
   surbrillance bleue etrangere a la charte. Le menu est ancre au `body` (`container`) : sans cela il
   serait rogne par `.rfx-content-scroll`. */
.rfx-ds .scn-table .bootstrap-select{width:100% !important;}
.rfx-ds .scn-table .bootstrap-select > .btn{padding:.2rem .5rem;font-size:.8rem;color:#334155;
    background:#fff;border:1px solid #e2e8f0;border-radius:var(--r-sm,.25rem);}
.rfx-ds .scn-table .bootstrap-select > .btn:focus{outline:none !important;border-color:#0d9488;}
.rfx-ds .scn-table .bootstrap-select.disabled > .btn{color:#94a3b8;background:#f1f5f9;}
.rfx-ds .scn-hd-name .bootstrap-select{flex:1 1 10rem;min-width:0;}


/* Bandeau « Analyse des offres » collant. Le modificateur limite l'effet a l'onglet Analyse :
   `.rfx-fin-chapeau` sert aussi a une dizaine d'ecrans du round, qui ne doivent pas changer.
   Il defile dans `.rfx-content-scroll`, c'est donc contre lui que le `sticky` se resout. */
.rfx-ds .rfx-fin-chapeau-sticky{position:sticky;top:0;z-index:6;
    /* Pas d arrondi sur le bord auquel il est colle : le contenu defile derriere le bandeau,
       et dans les deux coins hauts le fond teal ne le couvrait pas - on voyait le texte passer
       (retour Olivier 2026-09-08). Les coins bas restent : l en-tete collant du tableau se cale
       dessous avec 1px de recouvrement, il n y a pas de trou. */
    border-radius:0 0 var(--r-lg,10px) var(--r-lg,10px);}

/* Separateur entre le classement (etape 3) et les scenarios (etape 5a), dans la meme vue. */
.rfx-ds .dec-sep{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 .2rem;}
.rfx-ds .dec-sep::after{content:"";flex:1;height:1px;background:#e2e8f0;}
.rfx-ds .dec-sep-title{font-size:.95rem;font-weight:600;color:#2D3E50;}
.rfx-ds .dec-sep-title i{margin-right:.35rem;color:#0d9488;}

/* Editeur de questions des modeles de questionnaires, hub Administration (etape 4c, 2026-09-06). */

/* La ligne devient le repere de positionnement : le bloc de details passe en pleine largeur et
   faisait retomber les icones SOUS la ligne. En absolu, elles sont toujours au meme endroit. */
.adm-qrow { position: relative; padding-right: 62px; }
.adm-qrow-actions { position: absolute; top: 6px; right: 8px; display: flex; gap: 10px; align-items: center; }

/* Couleurs DS : les icones heritaient du bleu des liens Bootstrap. Gris au repos, teal a
   survol pour l edition, rouge pour la suppression. */
.adm-qrow-actions a { color: #94a3b8; text-decoration: none; font-size: 0.95rem; line-height: 1; }
.adm-qrow-actions a:hover { text-decoration: none; }
.adm-qrow-actions .adm-q-edit:hover { color: #0d9488; }
.adm-qrow-actions .adm-q-delete:hover { color: #c0392b; }

/* Poignee de deplacement : visible au survol de la ligne, curseur explicite. */
.adm-qrow-handle { color: #cbd5e1; cursor: grab; margin-right: 8px; font-size: 0.85rem; }
.adm-qrow:hover .adm-qrow-handle { color: #94a3b8; }
.adm-qrow-handle:active { cursor: grabbing; }

/* Emplacement d accueil pendant le glisser : sans lui on ne voyait pas ou lacher. */
.adm-qrow-placeholder { border: 2px dashed #0d9488; background: #f0fafa; border-radius: var(--r-md, 8px); margin: 4px 0; }

/* Icones d action de ligne : reduites (retour Olivier 2026-09-06), elles pesaient autant que le
   libelle de la question alors qu elles sont secondaires. */
.adm-qrow-actions a { font-size: 0.8rem; }
.adm-qrow-actions { gap: 8px; top: 7px; }

/* Rappel de perimetre et entreprises retenues. La liste des entreprises est la SEULE chose que
   les deux encarts de synthese apportaient au-dela du tableau : elle se lit mieux ici, a l aplomb
   du montant qu elle explique. Les encarts, eux, ont ete retires (retour Olivier 2026-09-06) :
   memes totaux, meme ecart mais avec une convention de signe INVERSE, meme choix de scenario. */
.rfx-ds .scn-scope{margin:.9rem 0 .6rem;font-size:.78rem;color:#5b6b7b;}
.rfx-ds .scn-scope i{margin-right:.35rem;color:#94a3b8;}
/* Le perimetre a rejoint la barre du tableau, a gauche du compteur de lignes identiques : les deux
   disent ce que le tableau porte et ce qu il montre. Meme graisse que son voisin, sinon il se lit
   comme un titre. */
.rfx-ds .scn-toolbar-scope{margin-right:.9rem;font-size:.78rem;color:#5b6b7b;white-space:nowrap;}
.rfx-ds .scn-toolbar-scope i{margin-right:.35rem;color:#94a3b8;}
/* Regle de calcul des notes, enoncee la ou elle s applique (etape 4). Meme gabarit que le rappel
   de perimetre juste au-dessus : c est une information de lecture, pas une alerte. */
.rfx-ds .scn-qual-rule{margin-top:-.35rem;}
.rfx-ds .scn-qual-rule i{color:#0f766e;}
/* Le lien doit rester lisible SUR CET ENCART : la regle generale des liens du module
   (`.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)`) est plus specifique qu une classe
   seule - il faut donc un selecteur au moins aussi fort, sans quoi elle l emporte. */
.rfx-ds .container-scrollable .scn-qual-rule a:not(.btn){color:#0f766e;text-decoration:underline;}
/* ── Etape 4 : repartition du chiffre d affaires et note d ensemble ──────────────────────────
   Avant, cette zone n affichait que des NOMS, et un simple compte au-dela de trois entreprises :
   on ne savait pas ce qu on donnait a chacune. Elle detaille desormais montant, part et note. */
.rfx-ds .scn-shares{margin-top:.45rem;padding-top:.35rem;border-top:1px solid #e8eef4;font-size:.72rem;color:#94a3b8;line-height:1.35;}
.rfx-ds .scn-share{display:flex;align-items:baseline;gap:.4rem;}
.rfx-ds .scn-share-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;color:#5b6b7b;}
.rfx-ds .scn-share-amount{flex:0 0 auto;font-variant-numeric:tabular-nums;color:#334155;font-weight:600;}
.rfx-ds .scn-share-part{flex:0 0 2.6rem;text-align:right;font-variant-numeric:tabular-nums;}
.rfx-ds .scn-share-note{flex:0 0 3.4rem;text-align:right;font-variant-numeric:tabular-nums;color:#0f766e;}
/* Sans note n est PAS une mauvaise note : ni chiffre, ni couleur de valeur. */
.rfx-ds .scn-share-unrated{color:#b9c2cc;font-style:italic;font-size:.68rem;}
.rfx-ds .scn-share-nogain{margin-top:.15rem;font-style:italic;}

/* Note d ensemble du scenario, a l aplomb de son total. */
.rfx-ds .scn-qual{line-height:1.2;}

/* ── Alignement des lignes de synthese (recette Olivier du 2026-09-06) ───────────────────────
   A et B ne retiennent pas le meme nombre d entreprises : sans bandes de hauteur egale, « Total »
   ne faisait plus face a « Total », et l ecart de qualite se lisait comme s il commentait la
   repartition. Les hauteurs sont EGALISEES en JS a chaque rendu (`alignBands`), la couverture
   tenant sur une ou deux lignes selon la longueur des noms d entreprises. */
.rfx-ds .scn-band{display:flex;flex-direction:column;justify-content:center;padding:.2rem 0;}
.rfx-ds .scn-table .scn-hd-lead{vertical-align:top;}
.rfx-ds .scn-hd-lead .scn-band{justify-content:center;}
/* La colonne des ecarts aligne sur la droite, comme les montants qu elle commente. */
.rfx-ds .scn-hd-gap .scn-band{align-items:flex-end;}
.rfx-ds .scn-qual-val{font-size:1rem;font-weight:700;color:#0f766e;font-variant-numeric:tabular-nums;}
.rfx-ds .scn-qual-cov{display:block;margin-top:.05rem;font-size:.68rem;color:#94a3b8;font-weight:400;}
.rfx-ds .scn-qual-empty{font-size:.72rem;color:#b9c2cc;font-style:italic;}
.rfx-ds .scn-qual-lbl{display:block;font-size:.72rem;font-weight:600;color:#94a3b8;}

/* ⚠️ Le SENS est inverse de celui de l ecart de prix : payer plus est ambre, mais etre mieux note
   est teal. Reutiliser `scn-gap-over` colorerait un gain de qualite comme une depense. */
.rfx-ds .scn-qual-gap{font-size:.8rem;font-weight:700;color:#94a3b8;
    font-variant-numeric:tabular-nums;}
.rfx-ds .scn-qual-gap.scn-qgap-up{color:#0f766e;}
.rfx-ds .scn-qual-gap.scn-qgap-down{color:#b45309;}
/* ── Modale « Plus d explications » (etape 4) ────────────────────────────────────────────────
   Un exemple chiffre vaut mieux qu une definition. Les colonnes de nombres sont alignees a droite
   et en chiffres tabulaires : sans cela les montants ne se lisent pas les uns sous les autres, et
   la demonstration perd sa force. */
/* L icone du bouton doit s aligner sur celles des lignes d information juste au-dessus
   (perimetre, regle des notes), qui commencent a x=0. Le bouton, lui, decale son icone de son
   propre padding : on compense EXACTEMENT ce padding plus la bordure, sinon la colonne
   d icones se casse. */
.rfx-ds .scn-help-open{margin:.1rem 0 .9rem;margin-left:calc(-0.7rem - 1px);}
.rfx-ds .scn-help-open .scn-mini{padding:.2rem .7rem;}
.rfx-ds .scn-help-open .scn-mini i{margin-right:.3rem;color:#0d9488;}
/* Le survol : `.scn-pick .scn-mini:hover` ne porte que sur les boutons de la colonne A.
   Celui-ci vit ailleurs, il lui faut sa propre regle - sinon rien ne signale qu il est cliquable. */
.rfx-ds .scn-help-open .scn-mini:hover{background:#f0fdfa;border-color:#99f6e4;color:#0f766e;}
.rfx-ds .scn-help-open .scn-mini:focus{outline:none;}
.rfx-ds .scn-help-open .scn-mini:focus-visible{outline:2px solid #0d9488;outline-offset:2px;}

/* ⚠️ Le corps defile POUR LUI-MEME : sans borne, la modale depassait en bas de l ecran et son
   pied devenait inatteignable. `modal-dialog` est en flex centre dans ce projet, la hauteur ne
   se propage donc pas toute seule - il faut la borner ici. */
.rfx-ds .scn-help{font-size:.82rem;color:#334155;line-height:1.5;
    max-height:calc(100vh - 14rem);overflow-y:auto;}
.rfx-ds .scn-help p{margin-bottom:.6rem;}
.rfx-ds .scn-help-intro{color:#5b6b7b;}
.rfx-ds .scn-help-h{margin:1.1rem 0 .45rem;font-size:.78rem;font-weight:700;color:#2D3E50;
    text-transform:uppercase;letter-spacing:.05em;}

.rfx-ds .scn-help-table{width:100%;margin-bottom:.7rem;border-collapse:collapse;}
.rfx-ds .scn-help-table th{padding:.3rem .5rem;border-bottom:1px solid #e2e8f0;font-size:.7rem;
    font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;}
.rfx-ds .scn-help-table td{padding:.3rem .5rem;border-bottom:1px solid #f1f5f9;}
.rfx-ds .scn-help-table tfoot td{border-bottom:none;border-top:1px solid #e2e8f0;
    font-weight:600;color:#5b6b7b;}
/* Les nombres a droite, en chiffres de meme largeur : c est ce qui rend la colonne lisible. */
.rfx-ds .scn-help-table .scn-help-num{text-align:right;font-variant-numeric:tabular-nums;
    white-space:nowrap;}
.rfx-ds .scn-help-how{color:#94a3b8;font-size:.76rem;}
.rfx-ds .scn-help-total{font-weight:700;color:#2D3E50;}
.rfx-ds .scn-help-note{color:#0f766e;font-weight:700;}
.rfx-ds .scn-help-best{color:#0f766e;font-weight:700;}
/* Ligne « Total » du tableau de depart : elle ferme le tableau, elle doit se detacher. */
.rfx-ds .scn-help-table .scn-help-sum td{border-top:2px solid #e2e8f0;}
/* D ou viennent les notes : dit a cote du mot « Qualite », en aparte. */
.rfx-ds .scn-help-src{display:block;margin-top:.1rem;font-size:.7rem;font-weight:400;color:#94a3b8;}
/* Le detail d une somme, a droite du total : « (100 + 50 + 50) ». Discret, il verifie sans encombrer. */
.rfx-ds .scn-help-detail{color:#94a3b8;font-size:.75rem;font-variant-numeric:tabular-nums;
    white-space:nowrap;}
/* Une ligne de calcul qui prolonge un tableau : moins appuyee que l encadre de formule. */
.rfx-ds .scn-help-formula-plain{background:none;padding:.1rem 0;color:#5b6b7b;font-size:.78rem;}

.rfx-ds .scn-help-formula{padding:.45rem .7rem;border-radius:var(--r-sm,.375rem);background:#f8fafc;
    font-variant-numeric:tabular-nums;color:#2D3E50;}
.rfx-ds .scn-help-key{padding:.5rem .75rem;border-left:3px solid #0d9488;border-radius:var(--r-sm,.375rem);
    background:#f0fdfa;color:#0f766e;font-weight:600;}
/* Curseur du compromis qualite/prix (etape 4). Il vit SOUS le menu de la colonne qu il modifie, et
   n apparait que lorsque ce scenario y est choisi : l ecran ne change pas pour qui ne s en sert pas.
   Il porte son pourcentage EN CLAIR - une poignee sur un rail ne se lit pas. */
/* ⚠️ `flex-basis:100%` : les rails prennent une LIGNE ENTIERE sous le menu. Sans cela, la note
   « plafond hors d atteinte » allongeait la ligne et repoussait « Enregistrer » en dessous. */
.rfx-ds .scn-mix{display:flex;flex:0 0 100%;flex-wrap:wrap;align-items:center;gap:.35rem;
    margin-left:0;font-size:.68rem;color:#94a3b8;}
.rfx-ds .scn-mix-end{color:#94a3b8;}
.rfx-ds .scn-mix-range{width:5.5rem;accent-color:#0d9488;cursor:pointer;vertical-align:middle;}
.rfx-ds .scn-mix-val{font-weight:700;color:#0f766e;font-variant-numeric:tabular-nums;}
/* Plafond hors d atteinte : l information la plus utile du reglage, mais elle ne doit pas crier -
   c est un constat, pas une erreur. Ambre, comme les autres conditions a remplir de l ecran. */
.rfx-ds .scn-limit-note{margin-left:.4rem;font-size:.68rem;font-weight:600;color:#b45309;}
/* Le clic ne doit pas laisser de contour : reserve au parcours clavier. */
.rfx-ds .scn-mix-range:focus{outline:none;}
.rfx-ds .scn-mix-range:focus-visible{outline:2px solid #0d9488;outline-offset:2px;}

/* Un menu ouvert domine ses voisins : sans cela il se glisse sous la ligne suivante. */
.rfx-ds .scn-table .bootstrap-select.show,
.rfx-ds .scn-table .bootstrap-select.open{z-index:20;}

/* Rappel ambre des lignes ecartees ou non analysees, en tete de la vue Decision. Il fait le lien
   avec l onglet Fiabilite : ce qui y a ete juge change ce que le tableau compare, et l acheteur
   doit le savoir AVANT de lire les montants. */
.rfx-ds .scn-warn a{color:#7c4a09;text-decoration:underline;}
.rfx-ds .scn-warn-item{display:inline-block;margin-left:.3rem;padding:0 .3rem;
    background:#fef3c7;border-radius:var(--r-sm,.25rem);}

/* Pont vers Lauréats (etape 6). Le bouton n apparait que si le round analyse est celui que la
   finalisation utilise ; sinon on affiche pourquoi, en gris, plutot que de laisser chercher. */
.rfx-ds .scn-push{display:flex;align-items:center;gap:.6rem;margin:.7rem 0 .2rem;font-size:.78rem;}
.rfx-ds .scn-push-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;
    font-size:.82rem;font-weight:600;color:#fff;background:#0d9488;
    border-radius:var(--r-sm,.25rem);text-decoration:none;}
.rfx-ds .scn-push-btn:hover{background:#0f766e;color:#fff;text-decoration:none;}
.rfx-ds .scn-push-btn:focus{outline:none;}
.rfx-ds .scn-push-btn:focus-visible{outline:2px solid #0d9488;outline-offset:2px;}
.rfx-ds .scn-push-note{color:#94a3b8;}
.rfx-ds .scn-push-off{color:#94a3b8;}
.rfx-ds .scn-push-off i{color:#94a3b8;}
.rfx-ds .scn-push-off a{color:#0f766e;text-decoration:underline;margin-left:.2rem;}

/* ── Fenêtre PARTAGÉE « gérer les catégories à deux niveaux » ─────────────────────────────────
   Thèmes / sous-thèmes de questionnaires (hub Administration ET appel d'offres), et à terme les
   lots / sous-lots des grilles de prix. Écrite le 2026-09-06, généralisée le même jour.
   Préfixe `cmg-` (categories manage) : ces classes ne doivent entrer en collision avec rien. */
.cmg-dialog { max-width: 620px; }
.cmg-block { margin-top: 18px; }
.cmg-block:first-of-type { margin-top: 6px; }
.cmg-block-title { font-size: 0.8rem; font-weight: 600; color: #334155; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.cmg-list { border: 1px solid #e2e8f0; border-radius: var(--r-md, 8px); padding: 6px; background: #fff; }
.cmg-row { padding: 3px 2px; }
.cmg-row + .cmg-row { border-top: 1px solid #f1f5f9; }
.cmg-row-main { display: flex; align-items: center; gap: 10px; }
.cmg-row-main .cmg-name { flex: 1 1 auto; min-width: 0; }
/* Le décompte des questions rattachées : il justifie la mise en garde de la suppression. */
.cmg-count { flex: 0 0 auto; min-width: 26px; text-align: center; font-size: 0.75rem; color: #475569; background: #f1f5f9; border-radius: var(--r-full, 999px); padding: 2px 8px; cursor: default; }
.cmg-del { flex: 0 0 auto; color: #94a3b8; font-size: 0.85rem; line-height: 1; text-decoration: none; }
.cmg-del:hover { color: #c0392b; text-decoration: none; }
.cmg-del:focus { outline: none; }
.cmg-del:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
/* Confirmation en ligne : elle remplace une seconde modale, qui laisse un fond grisé résiduel. */
.cmg-confirm { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 2px 8px; }
.cmg-confirm-text { flex: 1 1 auto; font-size: 0.78rem; color: #b45309; }
.cmg-confirm .ds-btn-ghost, .cmg-confirm .ds-btn-danger { padding: 2px 10px; font-size: 0.78rem; }
.cmg-empty { padding: 10px 6px; font-size: 0.82rem; color: #94a3b8; }
.cmg-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cmg-add .cmg-new { flex: 1 1 auto; }
.cmg-error { margin-top: 14px; font-size: 0.82rem; color: #c0392b; }

/* Hauteur robuste : la fenetre est cappee au viewport et defile a l'interieur. Sans ca, un
   questionnaire a 9 sous-themes ou une grille a 7 sous-lots debordent sous le bas de l'ecran et
   le bouton Enregistrer devient inatteignable (recette du 2026-09-07).
   ⚠️ Les regles equivalentes de l'ancienne fenetre visaient `.modal-content > form` et
   `.container-modal-scrollable`, qui n'existent plus dans le fragment partage : elles ont ete
   retirees. L'une d'elles mettait `padding: 0` sur le corps, d'ou l'absence de marges laterales. */
.cmg-dialog .modal-content { max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; }
.cmg-dialog .modal-header { flex: 0 0 auto; }
.cmg-dialog .modal-footer { flex: 0 0 auto; }
.cmg-dialog .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Actions sur un scenario enregistre (etape 5b) et modale de nommage. */
/* ⚠️ Ces deux boutons portent `btn btn-white btn-sm`, la charte du projet : la classe
   `.scn-mini` seule n'avait plus de definition depuis le retrait du bouton « Partir du
   meilleur », et ils tombaient au rendu natif du navigateur. */
.rfx-ds .scn-pick .scn-mini{flex:0 0 auto;padding:.15rem .55rem;font-size:.75rem;font-weight:600;
    white-space:nowrap;color:#0f766e;border-color:#e2e8f0;}
.rfx-ds .scn-pick .scn-mini:hover{background:#f0fdfa;border-color:#99f6e4;}
.rfx-ds .scn-pick .scn-mini-danger{color:#b45309;}
.rfx-ds .scn-pick .scn-mini-danger:hover{background:#fffbeb;border-color:#fde68a;}
.scn-modal-note-error{color:#c0392b;font-weight:600;}
.scn-modal-label{display:block;margin-bottom:.3rem;font-size:.8rem;font-weight:600;color:#5b6b7b;}
.scn-modal-note{margin:.6rem 0 0;font-size:.78rem;color:#7c4a09;}

.scn-modal-text{margin:0 0 .4rem;font-size:.85rem;color:#5b6b7b;}
.scn-modal-name{margin:0;font-size:.95rem;font-weight:700;color:#2D3E50;}

/* ⚠️ Le menu des scenarios ne doit JAMAIS basculer vers le haut : il passerait sous le bandeau
   collant et ses premieres entrees deviendraient invisibles. `dropupAuto: false` ne suffit pas -
   le placement final est repris par Popper, qui retourne le menu quand il manque de place sous le
   selecteur. Le cas se declenche des que l entree « Mon scenario » s ajoute a la liste (defaut
   constate par Olivier). On borne donc la hauteur du menu ET on force sa position. */
.rfx-ds .scn-hd-name .bootstrap-select > .dropdown-menu{max-height:340px;overflow-y:auto;}
.rfx-ds .scn-hd-name .bootstrap-select.dropup > .dropdown-menu,
.rfx-ds .scn-hd-name .bootstrap-select > .dropdown-menu[x-placement^="top"]{
    top:100% !important;bottom:auto !important;transform:none !important;margin-top:.15rem;}

/* Reprise d un scenario enregistre, en tete de l ecran Lauréats (etape 5b-2). Le sens du pont
   est desormais Lauréats -> Analyse : on RECUPERE ici, on n est plus pousse depuis la-bas. */
.fin-scenario-pick-body{display:flex;flex-direction:column;gap:.5rem;}
.fin-scenario-form{display:flex !important;align-items:center;gap:.5rem;flex-wrap:nowrap;}
/* ⚠️ Le composant de liste prend toute la largeur disponible s il n est pas borne : le bouton
   passait a la ligne et s y etirait sur toute la largeur du bandeau. On fixe la largeur de la
   liste et on empeche le bouton de grandir. */
.fin-scenario-form .bootstrap-select{width:320px !important;flex:0 0 auto;}
.fin-scenario-form .bootstrap-select > .btn{border:1px solid #d6ecea;}
.fin-scenario-form > .btn{flex:0 0 auto !important;width:auto !important;padding:.2rem .7rem;
    font-size:.78rem;line-height:1.5;white-space:nowrap;}
/* La card du chemin manuel se replie : son en-tete devient cliquable. */
.fin-card-toggle{cursor:pointer;}
.fin-card-caret{margin-left:auto;color:#94a3b8;transition:transform .15s;}
.fin-card-toggle.collapsed .fin-card-caret{transform:rotate(-90deg);}

/* Aide en trois etapes de la vue Decision : un seul encart, lisible d un coup. */
.rfx-ds .scn-hint-body{flex:1;min-width:0;}
.rfx-ds .scn-hint-lead{margin:0 0 .35rem;font-weight:600;}
.rfx-ds .scn-steps{margin:0;padding-left:1.1rem;}
.rfx-ds .scn-steps li{margin-bottom:.2rem;}
.rfx-ds .scn-steps li:last-child{margin-bottom:0;}
.rfx-ds .scn-steps b{color:#0f766e;}
.rfx-ds .scn-steps a{text-decoration:underline;}


/* ═══ Vue « Retours » de l onglet Analyse (lot E, 2026-09-08) ═══════════════════════════════
   Prefixe `fbk-`. Reprend les tailles, les gris et le tableau de la vue Fiabilite : deux ecrans
   du meme onglet ne doivent pas avoir deux apparences. */

/* L encart d introduction n a PAS de style propre : il entre dans le format unique des encarts
   du projet (liste `.rfx-ds .scn-hint, …` plus haut). Ma premiere version le reinventait, avec
   une police plus petite que partout ailleurs - retour Olivier. */

/* Pastilles d entreprises. Le decompte est l information principale de la barre : il dit, avant
   tout clic, a qui il y a quelque chose a redire. */
.rfx-ds .fbk-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 1.2rem;}
.rfx-ds .fbk-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;
    font-size:.78rem;color:#475569;background:#fff;border:1px solid #e2e8f0;
    border-radius:var(--r-full,999px);text-decoration:none;}
.rfx-ds .fbk-pill:hover{background:#f8fafc;text-decoration:none;border-color:#a9d8d0;}
.rfx-ds .fbk-pill.active{background:#0d9488;border-color:#0d9488;font-weight:600;}
.rfx-ds .fbk-pill.active:hover{background:#0b7d72;}
/* ⚠️ La COULEUR DE TEXTE se pose avec la specificite de la regle de lien du conteneur :
   `.rfx-ds .container-scrollable a:not(.btn):not(.nav-link)` pese (0,4,1) et rend tout lien
   teal. Sur la pastille active - fond teal - le nom devenait invisible ; au repos il sortait
   teal au lieu de gris. Meme parade que `.ds-btn-primary` plus haut dans ce fichier. */
.rfx-ds .container-scrollable a.fbk-pill:not(.btn):not(.nav-link){color:#475569;}
.rfx-ds .container-scrollable a.fbk-pill:not(.btn):not(.nav-link):hover{color:#0f766e;}
.rfx-ds .container-scrollable a.fbk-pill.active:not(.btn):not(.nav-link){color:#fff;}
.rfx-ds .fbk-pill-badge{min-width:1.15rem;padding:0 .3rem;text-align:center;font-size:.68rem;
    font-weight:700;line-height:1.15rem;color:#b45309;background:#fef3c7;
    border-radius:var(--r-full,999px);}
/* Zero retour n est pas une alerte mais une bonne nouvelle : le badge ne doit pas rester ambre. */
.rfx-ds .fbk-pill-badge-none{color:#15803d;background:#dcfce7;}
.rfx-ds .fbk-pill.active .fbk-pill-badge{color:#0f766e;background:#fff;}

.rfx-ds .fbk-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
    margin:0 0 .9rem;font-size:.78rem;color:#5b6b7b;}
.rfx-ds .fbk-controls label{margin:0 0 0 .6rem;font-weight:600;}
.rfx-ds .fbk-controls label:first-child{margin-left:0;}
.rfx-ds .fbk-select{height:26px;padding:0 .35rem;font-size:.78rem;color:#334155;background:#fff;
    border:1px solid #e2e8f0;border-radius:var(--r-sm,.25rem);}
.rfx-ds .fbk-select:focus{outline:none;border-color:#0d9488;}

/* La bascule est poussee a droite : elle ne change pas CE qui est calcule, seulement ce qui est
   montre - elle ne doit donc pas se lire comme un troisieme reglage. */
.rfx-ds .fbk-mode{display:inline-flex;margin-left:auto;border:1px solid #e2e8f0;
    border-radius:var(--r-sm,.25rem);overflow:hidden;}
.rfx-ds .fbk-mode-btn{padding:.22rem .6rem;font-size:.75rem;color:#5b6b7b;background:#fff;
    border:0;cursor:pointer;}
.rfx-ds .fbk-mode-btn + .fbk-mode-btn{border-left:1px solid #e2e8f0;}
.rfx-ds .fbk-mode-btn i{margin-right:.3rem;}
.rfx-ds .fbk-mode-btn:hover{background:#f8fafc;color:#0f766e;}
.rfx-ds .fbk-mode-btn.active{background:#0d9488;color:#fff;}
/* Retrait de l outline au clic, conserve au clavier (convention projet). */
.rfx-ds .fbk-mode-btn:focus{outline:none;}
.rfx-ds .fbk-mode-btn:focus-visible{outline:2px solid #0d9488;outline-offset:-2px;}

.rfx-ds .fbk-mode-hint{display:flex;align-items:flex-start;gap:.45rem;margin:.5rem 0 .2rem;
    padding:.45rem .7rem;font-size:.75rem;color:#7c4a03;background:#fffbeb;
    border:1px solid #fde68a;border-radius:var(--r-sm,.25rem);}
.rfx-ds .fbk-mode-hint i{margin-top:.1rem;color:#d97706;}

/* Couverture de l offre. AMBRE : ce n est pas une erreur - une entreprise a le droit de ne
   pas tout chiffrer - mais c est un manque a combler, et souvent le PREMIER retour a faire.
   Affiche meme quand il n y a aucun ecart, sinon l ecran annonce « aucun retour a faire » a
   une entreprise absente sur trois lots sur quatre. */
.rfx-ds .fbk-coverage{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 1rem;
    padding:.6rem .8rem;font-size:.8rem;color:#7c4a03;background:#fffbeb;
    border:1px solid #fde68a;border-left:3px solid #d97706;border-radius:var(--r-sm,.25rem);}
.rfx-ds .fbk-coverage > i{margin-top:.15rem;color:#d97706;}

/* Synthese. Encart NEUTRE : il ne signale ni une bonne ni une mauvaise nouvelle, il resume.
   Le teal est deja pris par l aide, l ambre par la couverture partielle. */
.rfx-ds .fbk-digest{margin:0 0 1.2rem;padding:.8rem 1rem;font-size:.84rem;line-height:1.55;
    color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:var(--r-md,8px);}
.rfx-ds .fbk-digest-title{display:block;margin-bottom:.4rem;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.03em;color:#94a3b8;}
.rfx-ds .fbk-digest-title i{margin-right:.35rem;color:#0d9488;}
/* Les phrases s enchainent comme un texte : pas de puces, une par ligne, sans marge orpheline. */
.rfx-ds .fbk-digest p{margin:0 0 .3rem;}
.rfx-ds .fbk-digest p:last-child{margin-bottom:0;}

.rfx-ds .fbk-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem;
    margin:1.4rem 0 1rem;font-size:.82rem;color:#334155;}
.rfx-ds .fbk-summary-main{font-weight:600;}
.rfx-ds .fbk-summary-gap{color:#5b6b7b;}

.rfx-ds .fbk-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.rfx-ds .fbk-table thead th{padding:.6rem .5rem .85rem;text-align:left;font-size:.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.02em;color:#94a3b8;border-bottom:1px solid #e2e8f0;}
/* Espacement CLASSIQUE de tableau (retour Olivier 2026-09-08) : l aeration validee est celle
   des BLOCS - pastilles, reglages, resume, air sous l en-tete - pas celle des lignes. Un cran
   au-dessus de `.rly-table` (.4rem) parce qu ici une ligne porte deux niveaux de texte. */
.rfx-ds .fbk-table tbody td{padding:.5rem .5rem;border-bottom:1px solid #f1f5f9;vertical-align:middle;line-height:1.4;}
.rfx-ds .fbk-table tbody tr:hover{background:#f8fafc;}
.rfx-ds .fbk-table .text-right{text-align:right;}
.rfx-ds .fbk-table .text-center{text-align:center;}

.rfx-ds .fbk-cell-scope{max-width:22rem;}
/* Le tableau des anomalies porte une designation de ligne, plus longue qu un nom de lot :
   sa premiere colonne de contenu a besoin de plus de place que celle des ecarts. */
.rfx-ds .fbk-table-anomalies .rly-cell-line{max-width:26rem;}
.rfx-ds .fbk-scope-name{display:block;font-weight:600;color:#334155;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rfx-ds .fbk-scope-path{display:block;margin-top:.1rem;font-size:.7rem;color:#94a3b8;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rfx-ds .fbk-cell-best{color:#5b6b7b;}
.rfx-ds .fbk-cell-detail{color:#5b6b7b;white-space:nowrap;}

/* Chiffres alignes en colonne : sans chasse fixe, les montants se decalent d une ligne a l autre. */
.rfx-ds .fbk-table .fbk-amount,
.rfx-ds .fbk-table .fbk-gap{font-variant-numeric:tabular-nums;}
/* L ecart est un surcout : meme ambre que dans la simulation, ou payer plus est ambre. */
.rfx-ds .fbk-gap{color:#b45309;font-weight:600;}
.rfx-ds .fbk-spread{white-space:nowrap;color:#b45309;}
.rfx-ds .fbk-band{font-size:.75rem;}
.rfx-ds .fbk-na{font-size:.75rem;font-style:italic;color:#94a3b8;}
.rfx-ds .fbk-rank{white-space:nowrap;font-size:.75rem;color:#5b6b7b;}

.rfx-ds .fbk-section{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 .2rem;}
.rfx-ds .fbk-section::after{content:"";flex:1;height:1px;background:#e2e8f0;}
.rfx-ds .fbk-section-title{font-size:.95rem;font-weight:600;color:#2D3E50;}
.rfx-ds .fbk-section-title i{margin-right:.35rem;color:#0d9488;}

.rfx-ds .fbk-none{margin:.6rem 0;padding:.5rem .7rem;font-size:.78rem;color:#166534;
    background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--r-sm,.25rem);}
.rfx-ds .fbk-none i{margin-right:.35rem;color:#16a34a;}

.rfx-ds .fbk-footnote{margin:.8rem 0 .5rem;padding:.5rem .7rem;font-size:.74rem;color:#5b6b7b;
    background:#f8fafc;border:1px solid #e2e8f0;border-radius:var(--r-sm,.25rem);}
.rfx-ds .fbk-footnote i{margin-right:.3rem;color:#94a3b8;}

/* ── Bascule interne / communicable ────────────────────────────────────────────────────────
   Les deux lectures coexistent dans le markup ; seule la classe portee par `#fbk-body` decide.
   ⚠️ Une cellule de tableau se remontre en `table-cell`, jamais en `block` : `display:block`
   sortirait la colonne de la grille et decalerait toute la ligne. D ou les trois selecteurs de
   remise en visibilite, un par type d element concerne. */
.rfx-ds .fbk-only-public{display:none;}
.rfx-ds .fbk-public .fbk-only-internal{display:none;}
.rfx-ds .fbk-public th.fbk-only-public,
.rfx-ds .fbk-public td.fbk-only-public{display:table-cell;}
.rfx-ds .fbk-public span.fbk-only-public{display:inline;}
.rfx-ds .fbk-public div.fbk-only-public{display:flex;}

/* ─── Page « Nouveautes » (.wn-*) ─────────────────────────────────────────────────────────
   Portage de docs/design/whats-new-mockup.html, valide le 2026-09-08.
   Tout est scope sous .wn-ds (contentClass de la page) : aucune regle ne peut fuir ailleurs.
   Palette = tokens du design system (navy #2D3E50, teal #0d9488), rien de nouveau.
   Commentaires volontairement SANS accents : convention du fichier (cf. CLAUDE.md §6). */

.wn-ds .wn-page { --wn-navy:#2D3E50; --wn-mid:#415873; --wn-muted:#94a3b4; --wn-teal:#0d9488;
    --wn-teal-light:#e6f7f5; --wn-teal-dark:#0b7c72; --wn-border:#edf0f4; --wn-hover:#f8fafc;
    --wn-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
    color:var(--wn-navy); font-weight:400; }

/* ── Bandeau d'ouverture ── */
.wn-ds .wn-hero { background:var(--wn-navy); color:#fff; padding:48px 40px 40px; position:relative; overflow:hidden; }
.wn-ds .wn-hero::after { content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px;
    border-radius:50%; background:radial-gradient(circle,rgba(13,148,136,.30),transparent 68%); }
.wn-ds .wn-hero-inner { max-width:1080px; position:relative; z-index:1; }
.wn-ds .wn-eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(13,148,136,.22);
    color:#7fe3d8; border-radius:var(--r-full,999px); padding:4px 13px; font-size:.7rem; font-weight:500;
    letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.wn-ds .wn-hero h1 { font-family:'Anton',sans-serif; font-weight:400; font-size:2.6rem; line-height:1.08;
    letter-spacing:.4px; margin:0 0 14px; max-width:20ch; color:#fff; }
.wn-ds .wn-hero h1 em { font-style:normal; color:#5fd6c8; }
.wn-ds .wn-hero p { font-size:1rem; font-weight:300; color:#c3d0dc; max-width:64ch; margin:0 0 24px; line-height:1.65; }
.wn-ds .wn-hero-meta { display:flex; gap:26px; flex-wrap:wrap; padding-top:18px;
    border-top:1px solid rgba(255,255,255,.13); max-width:680px; }
.wn-ds .wn-hero-meta > div { display:flex; flex-direction:column; gap:2px; }
.wn-ds .wn-hero-meta .k { font-family:'Anton',sans-serif; font-size:1.32rem; color:#fff; letter-spacing:.3px; }
.wn-ds .wn-hero-meta .l { font-size:.72rem; color:#93a6b8; text-transform:uppercase; letter-spacing:.05em; }

/* ── Corps : sommaire collant + sections ── */
.wn-ds .wn-body { display:flex; gap:48px; padding:36px 40px 70px; max-width:1360px; align-items:flex-start; }
.wn-ds .wn-toc { width:224px; flex-shrink:0; position:sticky; top:88px; max-height:calc(100vh - 110px); overflow-y:auto; }
.wn-ds .wn-toc-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--wn-muted);
    font-weight:500; margin-bottom:10px; padding-left:11px; }
.wn-ds .wn-toc a { display:flex; align-items:center; gap:6px; padding:5px 11px; border-left:2px solid var(--wn-border);
    color:var(--wn-mid); font-size:.8rem; text-decoration:none; transition:all .14s; }
.wn-ds .wn-toc a:hover { color:var(--wn-navy); background:var(--wn-hover); text-decoration:none; }
.wn-ds .wn-toc a.on { border-left-color:var(--wn-teal); color:var(--wn-teal); font-weight:500; }
.wn-ds .wn-toc .grp { font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; color:var(--wn-muted);
    padding:12px 11px 4px; font-weight:500; }

.wn-ds .wn-content { flex:1; min-width:0; max-width:880px; }
.wn-ds .wn-sec { margin-bottom:46px; scroll-margin-top:80px; }
.wn-ds .wn-sec-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:6px; }
.wn-ds .wn-sec-ico { width:38px; height:38px; flex-shrink:0; border-radius:var(--r-lg,10px);
    background:var(--wn-teal-light); color:var(--wn-teal); display:flex; align-items:center;
    justify-content:center; font-size:.95rem; }
.wn-ds .wn-sec-num { font-size:.68rem; font-weight:500; color:var(--wn-teal); letter-spacing:.09em;
    text-transform:uppercase; margin-bottom:3px; }
.wn-ds .wn-sec h2 { font-size:1.32rem; font-weight:600; margin:0; letter-spacing:-.2px; line-height:1.25;
    color:var(--wn-navy); }
/* Pas de max-width : l'accroche s'aligne sur le bord droit des encadres. */
.wn-ds .wn-lead { color:var(--wn-mid); font-weight:300; font-size:.95rem; margin:8px 0 16px 52px; line-height:1.6; }

/* ── Cartes ── */
.wn-ds .wn-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-left:52px; }
.wn-ds .wn-card { border:1px solid var(--wn-border); border-radius:var(--r-lg,10px); padding:15px 17px;
    background:#fff; box-shadow:var(--wn-shadow); transition:border-color .15s,box-shadow .15s; }
.wn-ds .wn-card:hover { border-color:#dce3ea; box-shadow:0 4px 14px rgba(16,24,40,.07); }
.wn-ds .wn-card h3 { font-size:.885rem; font-weight:600; margin:0 0 5px; display:flex; align-items:flex-start;
    gap:8px; line-height:1.35; color:var(--wn-navy); }
.wn-ds .wn-card h3 > i { color:var(--wn-teal); font-size:.76rem; margin-top:4px; flex-shrink:0; }
.wn-ds .wn-card p { margin:0; font-size:.825rem; color:var(--wn-mid); font-weight:300; line-height:1.55; }
.wn-ds .wn-card.wide { grid-column:1 / -1; }
.wn-ds .wn-card.hi { border-color:rgba(13,148,136,.30); background:linear-gradient(180deg,#f4fcfb,#fff 62%); }
/* L'icone DANS la pastille heriterait du teal des icones de titre, donc invisible sur fond teal. */
.wn-ds .wn-card h3 .wn-tag i { color:#fff; margin-top:0; font-size:.62rem; }
.wn-ds .wn-tag { display:inline-flex; align-items:center; gap:4px; background:var(--wn-teal); color:#fff;
    border-radius:var(--r-full,999px); padding:1px 8px; font-size:.62rem; font-weight:500; letter-spacing:.04em;
    text-transform:uppercase; margin-left:6px; vertical-align:middle; }

/* ── Bandeau de mots-cles : un repere visuel, rien a lire ── */
.wn-ds .wn-pills { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px 52px; }
.wn-ds .wn-pill { background:var(--wn-teal-light); color:var(--wn-teal-dark); border-radius:var(--r-full,999px);
    padding:4px 13px; font-size:.745rem; font-weight:500; }

/* ── Reperes courts sur deux colonnes ── */
.wn-ds .wn-checks { margin:0 0 12px 52px; border:1px solid var(--wn-border); border-radius:var(--r-lg,10px);
    padding:13px 17px; display:grid; grid-template-columns:1fr 1fr; gap:7px 24px; background:#fff;
    box-shadow:var(--wn-shadow); }
.wn-ds .wn-checks-after { margin:12px 0 0 52px; }
.wn-ds .wn-checks span { display:flex; align-items:flex-start; gap:9px; font-size:.795rem; color:var(--wn-mid);
    font-weight:300; line-height:1.45; }
.wn-ds .wn-checks i { color:var(--wn-teal); font-size:.68rem; margin-top:5px; flex-shrink:0; }

/* ── Frise du cycle de vie entreprise ── */
.wn-ds .wn-flow { display:flex; align-items:stretch; margin:0 0 12px 52px; flex-wrap:wrap;
    border:1px solid var(--wn-border); border-radius:var(--r-lg,10px); overflow:hidden; background:#fff;
    box-shadow:var(--wn-shadow); }
.wn-ds .wn-flow-step { flex:1; min-width:118px; padding:13px 12px; display:flex; flex-direction:column; gap:4px;
    border-right:1px solid var(--wn-border); }
.wn-ds .wn-flow-step:last-child { border-right:none; }
.wn-ds .wn-flow-step i { color:var(--wn-teal); font-size:.82rem; }
.wn-ds .wn-flow-step .t { font-size:.775rem; font-weight:600; line-height:1.3; }
.wn-ds .wn-flow-step .s { font-size:.68rem; color:var(--wn-muted); font-weight:300; line-height:1.35; }

/* ── Note de cloture : hors sections, non indentee, pour se lire comme un mot de fin ── */
.wn-ds .wn-close { margin-top:6px; padding-top:26px; border-top:1px solid var(--wn-border); }
.wn-ds .wn-quote { padding:14px 18px; background:var(--wn-teal-light); border-radius:var(--r-lg,10px);
    color:var(--wn-teal-dark); font-size:.85rem; font-weight:400; display:flex; gap:11px;
    align-items:flex-start; justify-content:center; text-align:center; }
.wn-ds .wn-quote i { margin-top:3px; }

@media (max-width:1150px) {
    .wn-ds .wn-toc { display:none; }
    .wn-ds .wn-body { padding:28px 20px 50px; }
    .wn-ds .wn-hero { padding:34px 20px 30px; }
    .wn-ds .wn-hero h1 { font-size:2rem; }
    .wn-ds .wn-grid, .wn-ds .wn-lead, .wn-ds .wn-flow, .wn-ds .wn-pills, .wn-ds .wn-checks { margin-left:0; }
    .wn-ds .wn-checks-after { margin:12px 0 0 0; }
    .wn-ds .wn-grid, .wn-ds .wn-checks { grid-template-columns:1fr; }
}

/* ─── Modale de premiere ouverture (.wnm-*) ───────────────────────────────────────────── */
.wnm-modal .modal-content { border:none; border-radius:var(--r-lg,10px); overflow:hidden; }
.wnm-top { background:#2D3E50; color:#fff; padding:26px 28px 22px; position:relative; overflow:hidden; }
.wnm-top::after { content:""; position:absolute; right:-50px; top:-60px; width:200px; height:200px;
    border-radius:50%; background:radial-gradient(circle,rgba(13,148,136,.34),transparent 68%); }
.wnm-eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(13,148,136,.22); color:#7fe3d8;
    border-radius:var(--r-full,999px); padding:4px 13px; font-size:.7rem; font-weight:500; letter-spacing:.06em;
    text-transform:uppercase; margin-bottom:13px; position:relative; z-index:1; }
.wnm-top h3 { font-family:'Anton',sans-serif; font-weight:400; font-size:1.5rem; margin:0; letter-spacing:.3px;
    position:relative; z-index:1; color:#fff; }
.wnm-body { padding:22px 28px 6px; }
.wnm-body > p { margin:0 0 14px; color:#415873; font-weight:300; font-size:.88rem; line-height:1.65; }
.wnm-list { list-style:none; margin:0 0 4px; padding:0; }
.wnm-list li { display:flex; gap:10px; align-items:flex-start; padding:5px 0; font-size:.845rem; color:#2D3E50; }
.wnm-list i { color:#0d9488; font-size:.75rem; margin-top:5px; flex-shrink:0; }
/* Les deux boutons occupent toute la largeur en 2/3 - 1/3 et ne se coupent jamais. */
.wnm-footer { padding:18px 28px 0; display:flex; align-items:stretch; gap:10px; }
.wnm-footer .btn { white-space:nowrap; flex:1 1 0; display:inline-flex; align-items:center;
    justify-content:center; gap:8px; }
.wnm-footer .btn:first-child { flex:2 1 0; }
.wnm-hint { padding:12px 28px 20px; font-size:.735rem; color:#94a3b4; line-height:1.45; display:flex;
    align-items:center; gap:7px; }

/* ─── Pastille « Nouveau » de la navbar ───────────────────────────────────────────────────
   Reprend .badge-pulsed deja en place (Communaute, Workflow) mais en TEAL : dans cette app le
   rouge signifie « a traiter », or il s'agit ici d'une invitation, pas d'une tache. */
.badge-whats-new { background:#0d9488 !important; }

/* ─── Page « Nouveautes » : correctifs de recette du 2026-09-08 ───────────────────────────
   1) Defilement INTERNE, comme le reste du gabarit moderne (.ds-page / .ds-scroll-zone).
   2) Tailles de titres : app.css l.1200 impose `.h1, h1 { font-size:1.4rem !important }`, et
      pareil pour h2 (1.0rem) et h3 (0.9rem). Un `!important` ne se bat qu'avec un `!important` :
      la specificite seule ne suffit pas. Meme piege que la police figee des conteneurs RFx. */

.wn-ds .wn-page { height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.wn-ds .wn-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; }

.wn-ds .wn-hero h1 { font-size:2.6rem !important; }
.wn-ds .wn-sec h2 { font-size:1.32rem !important; }
.wn-ds .wn-card h3 { font-size:.885rem !important; }
.wn-ds .wnm-top h3 { font-size:1.5rem !important; }
.wnm-modal .wnm-top h3 { font-size:1.5rem !important; }

@media (max-width:1150px) {
    .wn-ds .wn-hero h1 { font-size:2rem !important; }
}

/* ─── Entree « Nouveautes » de la navbar : la distinguer sans crier ───────────────────────
   Contrainte : l'etat ACTIF utilise deja le fond blanc a 8 %, la barre verticale teal et
   l'icone teal. Reutiliser l'un des trois ferait passer l'entree pour selectionnee en
   permanence. On prend donc un idiome libre : un liseré fin, pose en `box-shadow: inset`
   et non en `border`, pour ne decaler d'aucun pixel la hauteur des autres entrees.
   Retire des que l'entree devient active, afin de ne pas cumuler deux marquages. */
.navbar-primary-menu li a.nav-whats-new {
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.navbar-primary-menu li a.nav-whats-new:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.navbar-primary-menu li a.nav-whats-new.active {
    box-shadow: none;
}
/* Barre claire (theme navbar--light) : le blanc translucide y serait invisible. */
.navbar-primary--light .navbar-primary-menu li a.nav-whats-new {
    box-shadow: inset 0 0 0 1px rgba(45, 62, 80, 0.16);
}
.navbar-primary--light .navbar-primary-menu li a.nav-whats-new:hover {
    box-shadow: inset 0 0 0 1px rgba(45, 62, 80, 0.30);
}

/* Bouton « Gérer les thèmes » de l'écran Bénéfices qualitatifs (2026-09-09).
   Reprend .ds-btn-ghost pour l'encadré, et durcit le survol : le gris très clair du ghost
   passait inaperçu sur un écran déjà clair, l'action n'avait pas l'air cliquable. */
.adm-themes-btn:hover,
.adm-themes-btn:focus {
    background: var(--ds-teal-light, #e6f7f5);
    border-color: var(--ds-teal, #0d9488);
    color: var(--ds-teal, #0d9488);
}
.adm-themes-btn:hover i { color: var(--ds-teal, #0d9488); }

/* Fenêtre « Gérer les thèmes » : colonne de référence et en-têtes (2026-09-09).
   La référence est un texte de comparaison, pas une saisie : gris, non cliquable, tronquée
   plutôt que de faire déborder la ligne quand l'intitulé est long. */
.adm-themes-head { font-size: 0.8rem; font-weight: 600; color: #415873; }
.theme-ref {
    padding-right: 12px;
    color: #64748b;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Écran de traduction des bénéfices qualitatifs : lignes resserrées (2026-09-09).
   Le séparateur entre valeurs est émis par un bloc de thème partagé avec les écrans Contrats et
   Entreprises ; on ne peut pas réduire sa marge sans les toucher aussi. L'écart est donc porté
   par cet écran, via la classe posée sur sa carte. */
.adm-trad-compact hr { margin-top: 0.4rem; margin-bottom: 0.4rem; }
.adm-trad-compact .adm-trad-row { min-height: 34px; }

/* Fenêtre « Gérer les thèmes » : défilement interne (2026-09-09).
   Avec une dizaine de thèmes, la fenêtre poussait ses propres boutons hors de l'écran.
   L'en-tête, le rappel et le pied restent fixes, seule la liste défile. */
.adm-themes-body {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}

/* ─── Guide pratique (.gd-*) + aide contextuelle « ? » (.hlp-*) ──────────────────────────
   Chantier 2026-09-11, portage de docs/design/guide-mockup.html (forme validee le 2026-09-11).
   La page Guide est scopee sous .gd-ds (contentClass) ; le panneau .hlp-* est global car rendu
   par le layout racine sur toute page declarant une cle d'aide.
   Palette = tokens du design system (navy #2D3E50, teal #0d9488), rien de nouveau.
   Commentaires volontairement SANS accents : convention du fichier (cf. CLAUDE.md §6). */

.gd-ds .gd-page { --gd-navy:#2D3E50; --gd-mid:#415873; --gd-muted:#94a3b4; --gd-teal:#0d9488;
    --gd-teal-light:#e6f7f5; --gd-teal-dark:#0b7c72; --gd-border:#edf0f4; --gd-hover:#f8fafc;
    --gd-amber:#b45309; --gd-amber-bg:#fffbeb; --gd-amber-bd:#fcd34d;
    --gd-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
    color:var(--gd-navy); font-weight:400;
    height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.gd-ds .gd-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; scroll-behavior:smooth; }
.gd-ds .gd-page mark { background:#fde68a; color:inherit; padding:0 1px; border-radius:2px; }
.gd-ds .gd-ui, .hlp-drawer .gd-ui { font-weight:600; color:#2D3E50; }

/* ── Bandeau + recherche ── */
.gd-ds .gd-hero { background:var(--gd-navy); color:#fff; padding:40px 40px 6px; position:relative; overflow:hidden; }
.gd-ds .gd-hero::after { content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px;
    border-radius:50%; background:radial-gradient(circle, rgba(13,148,136,.30), transparent 68%); }
.gd-ds .gd-hero-inner { max-width:1080px; position:relative; z-index:1; }
.gd-ds .gd-eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(13,148,136,.22);
    color:#7fe3d8; border-radius:999px; padding:4px 13px; font-size:.7rem; font-weight:500;
    letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.gd-ds .gd-hero h1 { font-family:'Anton', sans-serif; font-weight:400; font-size:2.4rem !important; line-height:1.08;
    letter-spacing:.4px; margin:0 0 12px; color:#fff; }
.gd-ds .gd-hero h1 em { font-style:normal; color:#5fd6c8; }
.gd-ds .gd-hero p { font-size:.98rem; font-weight:300; color:#c3d0dc; max-width:64ch; margin:0; line-height:1.65; }
/* Barre de recherche collante : en haut de .gd-scroll (le conteneur qui défile), sous le bandeau qu'elle prolonge.
   z-index au-dessus du sommaire collant (.gd-toc) ; l'ombre basse la détache du contenu quand elle est seule. */
/* z-index SOUS la barre de navigation gauche (.navbar-primary, z-index 8 dans app.css) : dépliée, elle passait sous la barre de
   recherche (retour Olivier 2026-09-12). 5 suffit pour couvrir le sommaire collant et le contenu. */
.gd-ds .gd-searchbar { position:sticky; top:0; z-index:5; background:var(--gd-navy); padding:16px 40px 18px;
    box-shadow:0 8px 22px rgba(16,24,40,.14); }
.gd-ds .gd-searchbar-inner { max-width:1080px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.gd-ds .gd-search { display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px;
    padding:4px 6px 4px 16px; flex:1 1 380px; max-width:620px; box-shadow:0 12px 40px rgba(16,24,40,.16); }
.gd-ds .gd-search > i { color:var(--gd-muted); }
.gd-ds .gd-search input { flex:1; border:none; outline:none; box-shadow:none; font-family:inherit;
    font-size:.92rem !important; padding:9px 0; color:var(--gd-navy); background:transparent; }
.gd-ds .gd-search input::placeholder { color:var(--gd-muted); font-weight:300; }
.gd-ds .gd-search kbd { font-family:inherit; font-size:.66rem; color:var(--gd-muted); border:1px solid var(--gd-border);
    border-radius:3px; padding:2px 6px; background:var(--gd-hover); }
.gd-ds .gd-search-hits { font-size:.76rem; color:#93a6b8; margin:0; min-height:1.2em; }

/* ── Corps : sommaire + modules ── */
.gd-ds .gd-body { display:flex; gap:48px; padding:36px 40px 70px; max-width:1360px; align-items:flex-start; }
/* Bouton « haut de page » du guide : fixe en bas à droite, n'apparaît qu'après un défilement (classe posée par guide-page.js). */
.gd-ds .gd-top { position:fixed; right:28px; bottom:28px; width:40px; height:40px; border-radius:50%; border:1px solid #e2e8f0;
    background:#fff; color:var(--gd-navy); box-shadow:0 6px 18px rgba(16,24,40,.16); display:flex; align-items:center; justify-content:center;
    font-size:.85rem; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .18s, transform .18s; z-index:7; }
.gd-ds .gd-top.is-visible { opacity:1; transform:none; pointer-events:auto; }
.gd-ds .gd-top:hover { background:var(--gd-teal-light); color:var(--gd-teal-dark); border-color:#b6e5df; }
.gd-ds .gd-top:focus { outline:none; }
.gd-ds .gd-top:focus-visible { outline:2px solid var(--gd-teal); outline-offset:2px; }
/* top = hauteur de la barre de recherche collante (~86px) + marge, pour que le sommaire ne passe pas dessous. */
.gd-ds .gd-toc { width:238px; flex-shrink:0; position:sticky; top:104px; max-height:calc(100vh - 126px); overflow-y:auto; }
.gd-ds .gd-toc .grp { font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; color:var(--gd-muted);
    padding:12px 11px 4px; font-weight:500; display:flex; align-items:center; gap:7px; }
.gd-ds .gd-toc .grp:first-child { padding-top:0; }
.gd-ds .gd-toc a { display:flex; align-items:center; gap:8px; padding:5px 11px; border-left:2px solid var(--gd-border);
    color:var(--gd-mid); font-size:.8rem; transition:all .14s; }
.gd-ds .gd-toc a > i { width:14px; text-align:center; font-size:.72rem; color:var(--gd-muted); }
.gd-ds .gd-toc a:hover { color:var(--gd-navy); background:var(--gd-hover); text-decoration:none; }
.gd-ds .gd-toc a.on { border-left-color:var(--gd-teal); color:var(--gd-teal); font-weight:500; }
.gd-ds .gd-toc a.on > i { color:var(--gd-teal); }
.gd-ds .gd-toc a .n { margin-left:auto; font-size:.62rem; background:var(--gd-teal-light); color:var(--gd-teal-dark);
    border-radius:999px; padding:1px 7px; font-weight:500; display:none; }
.gd-ds .gd-toc a.hit .n { display:inline; }
body.gd-searching .gd-ds .gd-toc a:not(.hit) { opacity:.35; }

.gd-ds .gd-content { flex:1; min-width:0; max-width:880px; }
.gd-ds .gd-sec { margin-bottom:54px; }
/* Cibles des ancres : marge de défilement = hauteur réelle de la barre de recherche collante (variable posée par guide-page.js,
   repli 88px) + 16px. Respectée par le saut natif du navigateur vers #ancre comme par scrollIntoView() : le titre visé n'est plus
   caché sous la barre (retour Olivier 2026-09-12). */
.gd-ds .gd-sec, .gd-ds .gd-sub, .gd-ds .gd-faq-item { scroll-margin-top:calc(var(--gd-sticky, 88px) + 16px); }
body.gd-searching .gd-ds .gd-sec:not(.hit) { display:none; }
.gd-ds .gd-sec-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:6px; }
.gd-ds .gd-sec-ico { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:var(--gd-teal-light);
    color:var(--gd-teal); display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.gd-ds .gd-sec-num { font-size:.68rem; font-weight:500; color:var(--gd-teal); letter-spacing:.09em; text-transform:uppercase; margin-bottom:3px; }
.gd-ds .gd-sec h2 { font-size:1.32rem; font-weight:600; margin:0; letter-spacing:-.2px; line-height:1.25; color:var(--gd-navy); }
.gd-ds .gd-lead { color:var(--gd-mid); font-weight:300; font-size:.95rem; margin:8px 0 18px 52px; line-height:1.6; }
.gd-ds .gd-stub { margin-left:52px; padding:14px 17px; border:1px dashed #d6dde4; border-radius:10px;
    color:var(--gd-muted); font-size:.8rem; font-weight:300; display:flex; gap:9px; align-items:center; }

/* ── Sous-blocs ── */
.gd-ds .gd-sub { margin:0 0 20px 52px; }
body.gd-searching .gd-ds .gd-sub:not(.hit) { display:none; }
.gd-ds .gd-sub-title { display:flex; align-items:center; gap:8px; font-size:.7rem; font-weight:500; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gd-muted); margin:0 0 10px; }
.gd-ds .gd-sub-title i { color:var(--gd-teal); font-size:.7rem; }

.gd-ds .gd-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gd-ds .gd-card { border:1px solid var(--gd-border); border-radius:10px; padding:15px 17px; background:#fff; box-shadow:var(--gd-shadow); }
.gd-ds .gd-card h3 { font-size:.885rem; font-weight:600; margin:0 0 5px; display:flex; align-items:flex-start; gap:8px; line-height:1.35; color:var(--gd-navy); }
.gd-ds .gd-card h3 > i { color:var(--gd-teal); font-size:.76rem; margin-top:4px; flex-shrink:0; }
.gd-ds .gd-card p { margin:0; font-size:.825rem; color:var(--gd-mid); font-weight:300; line-height:1.55; }
body.gd-searching .gd-ds .gd-card:not(.hit), body.gd-searching .gd-ds .gd-steps li:not(.hit),
body.gd-searching .gd-ds .gd-rule:not(.hit), body.gd-searching .gd-ds .gd-faq-item:not(.hit) { display:none; }

.gd-ds .gd-steps { list-style:none; margin:0; padding:0; border:1px solid var(--gd-border); border-radius:10px;
    background:#fff; box-shadow:var(--gd-shadow); overflow:hidden; }
.gd-ds .gd-steps li { display:flex; gap:14px; padding:12px 16px; border-bottom:1px solid var(--gd-border); align-items:flex-start; }
.gd-ds .gd-steps li:last-child { border-bottom:none; }
.gd-ds .gd-steps .no { width:24px; height:24px; flex-shrink:0; border-radius:50%; background:var(--gd-teal-light);
    color:var(--gd-teal-dark); font-size:.72rem; font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.gd-ds .gd-steps .t { font-size:.84rem; font-weight:600; line-height:1.35; color:var(--gd-navy); }
.gd-ds .gd-steps .s { font-size:.8rem; color:var(--gd-mid); font-weight:300; line-height:1.5; margin-top:2px; }
.gd-ds .gd-steps .where { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:.68rem; color:var(--gd-teal-dark);
    background:var(--gd-teal-light); border-radius:3px; padding:1px 7px; margin-left:6px; vertical-align:middle; font-weight:500; }
.gd-ds .gd-steps .where .gd-ui { color:inherit; font-weight:500; }

.gd-ds .gd-rules { list-style:none; margin:0; padding:0; border:1px solid var(--gd-border); border-radius:10px;
    background:#fff; box-shadow:var(--gd-shadow); overflow:hidden; }
.gd-ds .gd-rule { display:flex; gap:12px; padding:11px 16px; border-bottom:1px solid var(--gd-border); align-items:flex-start; }
.gd-ds .gd-rule:last-child { border-bottom:none; }
.gd-ds .gd-rule > .ico { color:var(--gd-teal); font-size:.78rem; margin-top:4px; flex-shrink:0; width:14px; text-align:center; }
.gd-ds .gd-rule.is-admin > .ico { color:var(--gd-amber); }
.gd-ds .gd-rule .t { font-size:.84rem; font-weight:600; line-height:1.4; color:var(--gd-navy); }
.gd-ds .gd-rule .s { font-size:.8rem; color:var(--gd-mid); font-weight:300; line-height:1.5; margin-top:2px; }

.gd-admin-pill { display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:500; color:#b45309;
    background:#fffbeb; border:1px solid #fcd34d; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle;
    max-width:100%; }
/* Le chemin d'un écran admin peut être long : la pastille passe à la ligne au lieu de déborder (cas vu en recette dans le
   drawer « ? »). Le texte reste sur une ligne dans la pastille tant qu'il tient ; le pictogramme et la flèche ne rétrécissent pas. */
.gd-admin-pill > span { min-width:0; overflow-wrap:anywhere; }
.gd-admin-pill > i { flex-shrink:0; }
.gd-admin-pill i { font-size:.6rem; }
.gd-admin-pill i.xs { font-size:.55rem; opacity:.7; }
a.gd-admin-pill.is-link:hover { background:#fef3c7; color:#92400e; text-decoration:none; }

.gd-ds .gd-faq { border:1px solid var(--gd-border); border-radius:10px; background:#fff; box-shadow:var(--gd-shadow); overflow:hidden; }
.gd-ds .gd-faq-item { border-bottom:1px solid var(--gd-border); }
.gd-ds .gd-faq-item:last-child { border-bottom:none; }
.gd-ds .gd-faq-q { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; font-size:.86rem;
    font-weight:500; user-select:none; color:var(--gd-navy); }
.gd-ds .gd-faq-q:hover { background:var(--gd-hover); }
.gd-ds .gd-faq-q i.qm { color:var(--gd-teal); font-size:.8rem; flex-shrink:0; }
.gd-ds .gd-faq-q .q { flex:1; min-width:0; }
.gd-ds .gd-faq-q i.chev { margin-left:auto; color:var(--gd-muted); font-size:.7rem; transition:transform .18s; }
.gd-ds .gd-faq-item.open .gd-faq-q i.chev { transform:rotate(180deg); }
.gd-ds .gd-faq-a { display:none; padding:0 16px 14px 44px; font-size:.82rem; color:var(--gd-mid); font-weight:300; line-height:1.6; }
.gd-ds .gd-faq-item.open .gd-faq-a, body.gd-searching .gd-ds .gd-faq-a { display:block; }

@media (max-width: 991px) {
    .gd-ds .gd-toc { display:none; }
    .gd-ds .gd-body { padding:28px 20px 50px; }
    .gd-ds .gd-grid { grid-template-columns:1fr; }
    .gd-ds .gd-lead, .gd-ds .gd-sub, .gd-ds .gd-stub { margin-left:0; }
}

/* ── Rond « ? » : fixe, bas-droite, au-dessus de la zone des toasts (bottom 24) et des
   barres d'actions collantes (52 px). Masque des que le panneau est visible. ── */
.hlp-fab { position:fixed; right:22px; bottom:84px; z-index:1035; width:44px; height:44px; border-radius:50%;
    background:#2D3E50; color:#fff; border:2px solid rgba(255,255,255,.85); box-shadow:0 12px 40px rgba(16,24,40,.16);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; cursor:pointer; padding:0;
    transition:transform .15s, background .15s; }
.hlp-fab:hover { background:#0d9488; color:#fff; transform:translateY(-1px); }
.hlp-fab:focus { outline:none; }
.hlp-fab:focus-visible { outline:2px solid #0d9488; outline-offset:2px; }

/* ── Documents de référence de l'acheteur (portail) : bouton + drawer (2026-09-23) ──────────────────────────
   Posé à hauteur du BANDEAU de l'onglet et au bord droit du contenu (`top`/`right` calculés en JS d'après le
   bandeau réel), il y reste quand la page défile. Fond blanc bordé de navy : le « ? » du guide est navy plein,
   deux pastilles identiques seraient indiscernables. Le navy dit « fourni par l'acheteur », par opposition au
   teal des actions de l'entreprise. */
.rfx-refdocs-fab { position: fixed; right: 22px; top: 150px; z-index: 1035; display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px; border-radius: var(--r-full, 999px); border: 1px solid #cbd5e1; background: #fff; color: #2D3E50;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 20px rgba(16,24,40,.12);
    transition: background .15s, border-color .15s, color .15s, padding .18s ease, box-shadow .15s; }
.rfx-refdocs-fab:hover { background: #f1f5f9; border-color: #94a3b8; color: #1b2a4a; transform: translateY(-1px); }
.rfx-refdocs-fab:focus { outline: none; }
.rfx-refdocs-fab:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.rfx-refdocs-fab-ic { font-size: 1rem; }
.rfx-refdocs-fab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-full, 999px); background: #2D3E50; color: #fff; font-size: 0.72rem; font-weight: 700; }
/* Réduit dès qu'on défile : le libellé disparaît, le compteur reste - on doit toujours voir qu'il y a des pièces
   à consulter. Il se REDÉPLOIE au survol, par-dessus le contenu : ancré par la droite, il s'étend vers la gauche
   sans se déplacer, et `max-width` anime l'ouverture sans à-coup. */
.rfx-refdocs-fab .rfx-refdocs-fab-label { max-width: 240px; overflow: hidden; transition: max-width .18s ease, opacity .18s ease, margin .18s ease; }
.rfx-refdocs-fab.is-compact { padding: 0 11px; }
.rfx-refdocs-fab.is-compact .rfx-refdocs-fab-label { max-width: 0; opacity: 0; margin-left: -8px; }
.rfx-refdocs-fab.is-compact:hover, .rfx-refdocs-fab.is-compact:focus-visible { padding: 0 14px; }
.rfx-refdocs-fab.is-compact:hover .rfx-refdocs-fab-label,
.rfx-refdocs-fab.is-compact:focus-visible .rfx-refdocs-fab-label { max-width: 240px; opacity: 1; margin-left: 0; }
/* Ne jamais superposer deux panneaux : le bouton s'efface quand le guide, une modale ou son propre drawer est ouvert. */
body.hlp-open .rfx-refdocs-fab, body.hlp-pinned .rfx-refdocs-fab, body.modal-open .rfx-refdocs-fab,
body.rfx-refdocs-open .rfx-refdocs-fab { display: none; }
body.rfx-refdocs-open .hlp-fab { display: none; }
.rfx-refdocs-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.20); opacity: 0; pointer-events: none;
    transition: opacity .25s ease; z-index: 1040; }
.rfx-refdocs-backdrop.is-open { opacity: 1; pointer-events: auto; }
/* Panneau : le nom d'abord, les métadonnées et les actions en dessous - la grille à six colonnes du Dossier serait
   illisible sur 380 px. Les documents des rounds précédents sont atténués, comme sur l'écran Dossier. */
.rfx-refdocs-drawer .rfx-doc-hint { margin-bottom: 14px; }
.rfx-refdocs-sec { margin: 16px 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8fa1b3; }
.rfx-refdocs-sec:first-of-type { margin-top: 4px; }
.rfx-refdocs-row { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.rfx-refdocs-row:last-child { border-bottom: none; }
.rfx-refdocs-row.is-past { opacity: .62; }
.rfx-refdocs-row-name { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.rfx-refdocs-row-icon { margin-top: 2px; color: #94a3b8; }
.rfx-refdocs-row-label { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; font-weight: 600; color: #2D3E50; word-break: break-word; }
.rfx-refdocs-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 3px 0 0 22px; font-size: 0.74rem; color: #8fa1b3; }
.rfx-refdocs-row-actions { margin-left: auto; display: inline-flex; gap: 10px; }
.rfx-refdocs-row-actions a { color: #0d9488; }
.rfx-refdocs-row-actions a:hover { color: #0b7d72; }
body.hlp-open .hlp-fab, body.hlp-pinned .hlp-fab, body.modal-open .hlp-fab { display:none; }

/* ── Panneau : superpose (z 1060, au-dessus du backdrop 1040) ou epingle (z 500, sous les
   modales, comme #side-panel de l'Espace Projets). Largeur = --sp-w, la meme que tous les drawers. ── */
.hlp-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.20); opacity:0; pointer-events:none;
    transition:opacity .25s ease; z-index:1040; }
body.hlp-open:not(.hlp-pinned) .hlp-backdrop { opacity:1; pointer-events:auto; }
.hlp-drawer { position:fixed; top:0; right:calc(-1 * var(--sp-w) - 30px); bottom:0; width:var(--sp-w); background:#fff;
    display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.18); transition:right .3s ease; z-index:1060;
    color:#2D3E50; }
body.hlp-open .hlp-drawer, body.hlp-pinned .hlp-drawer { right:0; }
body.hlp-pinned .hlp-drawer { box-shadow:none; border-left:1px solid #e2e8f0; z-index:500; }
body.hlp-no-anim .hlp-drawer, body.hlp-no-anim .main-content { transition:none !important; }

/* Mode epingle : la page se decale de la largeur du panneau et reste utilisable. Meme mecanique
   que body.sp-open #project-container (Espace Projets). Les elements en position:fixed des pages
   (barres d'actions) ne suivent pas d'eux-memes : a traiter page par page (etape 3). */
.main-content { transition:margin-right .28s ease; }
body.hlp-pinned .main-content { margin-right:var(--sp-w); }

.hlp-head { background:#2D3E50; color:#fff; padding:16px 18px 14px; display:flex; align-items:flex-start; gap:12px; flex-shrink:0; }
.hlp-head .ico { width:34px; height:34px; flex-shrink:0; border-radius:6px; background:rgba(13,148,136,.3); color:#7fe3d8;
    display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.hlp-head .ttl { min-width:0; }
.hlp-head .eyebrow { font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:#93a6b8; font-weight:500; }
.hlp-head h4 { margin:2px 0 0; font-family:'Anton', sans-serif; font-weight:400; font-size:1.25rem; letter-spacing:.3px; line-height:1.2; color:#fff; }
.hlp-head h4 .gd-ui { color:#fff; font-weight:400; }
.hlp-head .hlp-state { display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:.68rem; font-weight:500;
    color:#7fe3d8; background:rgba(13,148,136,.22); border-radius:999px; padding:2px 9px; }
.hlp-head .hlp-state > i { font-size:.4rem; }
.hlp-head .hlp-state .gd-ui { color:#fff; font-weight:500; }
.hlp-head .acts { margin-left:auto; display:flex; gap:4px; flex-shrink:0; }
.hlp-head .acts button { width:30px; height:30px; border-radius:6px; border:1px solid rgba(255,255,255,.18); background:transparent;
    color:#c3d0dc; cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; padding:0; transition:all .15s; }
.hlp-head .acts button:hover { background:rgba(255,255,255,.1); color:#fff; }
.hlp-head .acts button:focus { outline:none; }
.hlp-head .acts button.hlp-pin.on { background:#0d9488; border-color:#0d9488; color:#fff; }

.hlp-body { flex:1; overflow-y:auto; padding:18px 18px 24px; }
.hlp-sub { font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#94a3b4; margin:0 0 8px;
    display:flex; align-items:center; gap:7px; }
.hlp-sub i { color:#0d9488; }
.hlp-p { font-size:.83rem; color:#415873; font-weight:300; line-height:1.6; margin:0 0 18px; }
.hlp-list { list-style:none; margin:0 0 18px; padding:0; }
.hlp-list li { display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:#415873; font-weight:300; line-height:1.5; padding:4px 0; }
.hlp-list li > i { color:#0d9488; font-size:.42rem; margin-top:8px; flex-shrink:0; }
.hlp-steps { list-style:none; margin:0 0 18px; padding:0; }
.hlp-steps li { display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:.82rem; line-height:1.5; }
.hlp-steps .no { width:20px; height:20px; flex-shrink:0; border-radius:50%; background:#e6f7f5; color:#0b7c72; font-size:.66rem;
    font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.hlp-steps .t { font-weight:500; color:#2D3E50; }
.hlp-steps .s { color:#415873; font-weight:300; }
.hlp-note { padding:10px 13px; background:#fffbeb; border:1px solid #fcd34d; border-radius:6px; color:#b45309; font-size:.78rem;
    display:flex; gap:9px; align-items:flex-start; line-height:1.5; margin-bottom:18px; }
.hlp-note > i { margin-top:3px; flex-shrink:0; }
.hlp-rules { list-style:none; margin:0 0 18px; padding:0; }
.hlp-rules li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-top:1px solid #edf0f4; }
.hlp-rules li:first-child { border-top:none; }
.hlp-rules li > .ico { color:#0d9488; font-size:.74rem; margin-top:4px; flex-shrink:0; width:14px; text-align:center; }
/* min-width:0 : sans lui, un enfant de flex garde sa largeur « contenu » et une pastille longue pousse titre ET texte hors du
   drawer (retour Olivier 2026-09-11). Même garde sur la liste d'actions et les étapes. */
.hlp-rules li > div, .hlp-list li > span, .hlp-steps li > div { flex:1 1 auto; min-width:0; }
.hlp-rules .t .gd-admin-pill { display:inline-flex; margin:3px 0 0; }
.hlp-rules li.is-admin > .ico { color:#b45309; }
.hlp-rules .t { font-size:.82rem; font-weight:500; line-height:1.4; color:#2D3E50; }
.hlp-rules .s { font-size:.78rem; color:#415873; font-weight:300; line-height:1.5; margin-top:2px; }
.hlp-links a { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid #edf0f4; border-radius:6px;
    font-size:.8rem; color:#2D3E50; margin-bottom:6px; transition:all .14s; }
.hlp-links a:hover { border-color:#0d9488; background:#e6f7f5; text-decoration:none; color:#2D3E50; }
.hlp-links a i.l { color:#0d9488; width:14px; text-align:center; font-size:.72rem; }
.hlp-links a i.r { margin-left:auto; color:#94a3b4; font-size:.66rem; }
.hlp-foot { flex-shrink:0; border-top:1px solid #edf0f4; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; }
.hlp-foot a { font-size:.78rem; color:#0b7c72; font-weight:500; display:inline-flex; align-items:center; gap:7px; }
.hlp-foot a:hover { text-decoration:none; color:#0d9488; }
.hlp-foot .pinned-hint { font-size:.7rem; color:#94a3b4; display:none; align-items:center; gap:6px; }
body.hlp-pinned .hlp-foot .pinned-hint { display:inline-flex; }
body.hlp-pinned .hlp-foot .open-guide { display:none; }

/* Bandeau de partie (acheteurs / entreprises consultees) : rendu seulement quand les deux groupes sont visibles. */
.gd-ds .gd-part { display:flex; gap:16px; align-items:flex-start; margin:0 0 34px; padding:22px 24px; border-radius:10px;
    background:linear-gradient(135deg, #2D3E50, #243343); color:#fff; }
.gd-ds .gd-part-supplier { margin-top:26px; border-top:1px solid #edf0f4; padding-top:22px; border-radius:0 0 10px 10px; background:linear-gradient(135deg, #0b7c72, #0d9488); }
.gd-ds .gd-part-ico { width:42px; height:42px; flex-shrink:0; border-radius:10px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.gd-ds .gd-part-eyebrow { font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; font-weight:500; opacity:.75; margin-bottom:4px; }
.gd-ds .gd-part h2 { margin:0 0 6px; font-family:'Anton', sans-serif; font-weight:400; font-size:1.45rem; letter-spacing:.3px; color:#fff; }
.gd-ds .gd-part p { margin:0; font-size:.88rem; font-weight:300; color:rgba(255,255,255,.85); line-height:1.55; }
body.gd-searching .gd-ds .gd-part { display:none; }
.gd-ds .gd-toc .grp.grp-supplier { margin-top:14px; padding-top:14px; border-top:1px solid #e2e8f0; color:#0b7c72; }
.gd-ds .gd-toc .grp.grp-supplier > i { color:#0d9488; }

/* ── Barre de navigation gauche : 3 zones + aération + jamais d'écrasement (retour Olivier 2026-09-12) ──
   La liste unique flex pleine hauteur compressait ses enfants quand la hauteur manquait (logo entreprise écrasé).
   Désormais : .nav-zone-top (logo MBW, Accueil) et .nav-zone-bottom (Compte, logo entreprise) ne rétrécissent jamais ;
   seule .nav-zone-scroll défile (barre de défilement masquée, ombre de repli posée par app.js via .nav-more-below).
   Même mise en page pour les 3 profils : chez les contributeurs et les contacts entreprise rien ne déborde, donc rien ne défile. */
.navbar-primary .navbar-primary-menu > li { flex-shrink: 0; }
.navbar-primary .navbar-primary-menu.nav-zone-top { flex: 0 0 auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
.navbar-primary .navbar-primary-menu.nav-zone-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; padding-top: 0 !important; padding-bottom: 0 !important; }
.navbar-primary .navbar-primary-menu.nav-zone-scroll::-webkit-scrollbar { display: none; }
.navbar-primary .navbar-primary-menu.nav-zone-bottom { flex: 0 0 auto !important; min-height: 0 !important; padding-top: 0 !important;
    position: relative; transition: box-shadow .2s; }
.navbar-primary.nav-more-below .navbar-primary-menu.nav-zone-bottom { box-shadow: 0 -14px 18px -10px rgba(0,0,0,.45); }
.navbar-primary .navbar-primary-menu > li.navbar-primary-section.nav-compte { margin-top: 0 !important; }
/* Aération (+15 % environ) : lignes plus hautes, titres de section plus espacés, bloc logo entreprise plus large en hauteur. */
.navbar-primary-menu > li > a { margin: 4px 8px; padding: 4px 9px; }
.navbar-primary-menu li.navbar-primary-section { height: 36px; }
.navbar-primary-section .nav-label { margin-bottom: 6px; }
.navbar-primary-menu li.navbar-primary-account { height: 64px; padding: 8px 8px; }
.navbar-primary-menu > li.nav-home { margin-top: 10px; }

/* ── Bloc Compte repliable quand la hauteur manque (.nav-account-folded posée par app.js) ──
   Replié : ne restent que le titre « Compte » (avec chevron), la ligne utilisateur et l'épingle ; le survol ou le focus clavier
   du bloc le déplie vers le haut (la zone centrale se réduit d'autant). Sans manque de place, la classe n'est jamais posée. */
.navbar-primary .nav-zone-bottom > li.nav-compte-fold { max-height: 80px; overflow: hidden; transition: max-height .22s ease, opacity .18s ease; }
.navbar-primary.nav-account-folded .nav-zone-bottom:not(:hover):not(:focus-within) > li.nav-compte-fold { max-height: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; }
.navbar-primary.nav-account-folded .nav-zone-bottom:not(:hover):not(:focus-within) > li.nav-compte-fold > a { margin-top: 0; margin-bottom: 0; }
.navbar-primary.nav-measuring .nav-zone-bottom > li.nav-compte-fold { transition: none !important; }
.navbar-primary.nav-account-folded .nav-zone-bottom { cursor: default; }
.navbar-primary.nav-account-folded .nav-zone-bottom:not(:hover):not(:focus-within) > li.navbar-primary-section.nav-compte .nav-label::after {
    content: "\f077"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.5rem; margin-left: 6px; opacity: .8; }

/* Logo entreprise (retour Olivier 2026-09-12) : cadre blanc de hauteur FIXE (48px, le logo dedans jusqu'à 40px de haut au lieu de 36),
   pour que la hauteur ne dépende pas du fichier image (en local, le fichier du logo peut manquer : icône d'image cassée, cadre
   qui se tassait). Marge sous le cadre réduite mais conservée (6px). */
.navbar-primary-menu li.navbar-primary-account { height: auto; padding: 6px 8px 6px; }
.navbar-primary-account .bg-white { padding: 4px !important; height: 48px; display: flex; align-items: center; justify-content: center; }
.navbar-primary-account .bg-white img { height: auto; max-height: 40px; width: auto !important; max-width: 100%; }

/* ── Onglets d'en-tête AO : menu « + » des onglets qui ne tiennent pas (app.js, pattern priority+, 2026-09-12) ── */
/* Les onglets gardent leur largeur fixe historique (150px, app.css) ; le « + » lui doit être étroit, sinon il occupe la place
   d'un onglet entier et laisse un vide (retour Olivier 2026-09-12). */
.rfx-ds #mainRfpTabs .rfx-tabs-more > .nav-link { width: auto; min-width: 44px; padding-left: 12px; padding-right: 12px; font-size: 1rem !important; font-weight: 600 !important; }
.rfx-ds #mainRfpTabs .rfx-tabs-more > .nav-link::after { display: none; }
.rfx-ds #mainRfpTabs .rfx-tabs-more.is-active > .nav-link { color: #0d9488 !important; box-shadow: inset 0 -2px 0 #0d9488 !important; }
.rfx-ds #mainRfpTabs .rfx-tabs-more .dropdown-menu { border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: 6px 0; min-width: 200px; }
.rfx-ds #mainRfpTabs .rfx-tabs-more-list { list-style: none; margin: 0; padding: 0; }
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-item { display: block; }
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-link,
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-link:hover,
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-link.active { display: block; padding: 9px 16px; margin: 0; box-shadow: none !important; text-transform: uppercase; font-size: 0.76rem !important; letter-spacing: 0.05em;
    text-align: left; font-weight: 500 !important; width: auto; }
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-link:not(.disabled):hover { background: #f8fafc; color: #0d9488; }
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-link.active { color: #0d9488 !important; font-weight: 600 !important; }
/* Le 1er onglet du menu héritait de `.nav-item:first-child .nav-link { padding-left:0 }` (règle du 1er onglet de la barre) :
   collé au bord au repos, correct au survol seulement (retour Olivier 2026-09-12). */
.rfx-ds #mainRfpTabs .rfx-tabs-more-list .nav-item:first-child .nav-link { padding-left: 16px; }
/* Menu « + » ouvert : la liste passe au-dessus du contenu de la page (classe posée par app.js sur show/hidden.bs.dropdown). */
.rfx-ds #mainRfpTabs.nav-tabs.rfx-tabs-open { z-index: 1030; }
/* Page sans épingle (data-no-pin sur le drawer, ex. Analyse) : le bouton d'épingle du panneau est masqué. */
body.hlp-no-pin .hlp-head .acts button.hlp-pin { display: none; }

/* ============================================================================
   Relance rapide d un round (RR1, 2026-09-13) - modale « Relancer un round rapide ».
   Coquille et champs : classes qrf-* de l AO rapide reutilisees telles quelles (meme composant).
   Ici seulement ce qui est propre au round : recap, liste des societes, delai de questions, bouton de barre.
   ============================================================================ */
.qit-recap { list-style: none; margin: -6px 0 10px; padding: 0; font-size: 0.84rem; color: #334155; }
.qit-recap li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.qit-recap li > i { flex: 0 0 16px; margin-top: 3px; text-align: center; color: #94a3b8; font-size: 0.8rem; }
.qit-recap li.qit-recap-strong { font-weight: 600; color: #0b7d72; }
.qit-recap li.qit-recap-strong > i { color: #0d9488; }
.qit-full-path { margin: 0 0 22px; }
.qrf-footer-actions .qit-draft > i { margin-right: 6px; font-size: 0.85em; }

.qit-suppliers { display: flex; flex-direction: column; gap: 2px; }
.qit-supplier { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 12px; border: 1px solid #e2e8f0; border-radius: var(--r-md, 8px); background: #fff; font-size: 0.84rem; color: #1e293b; }
/* La case est dessinee par le ::before du label (app.css, margin-left:-1.25rem) : le padding-left Bootstrap du
   .form-check lui fait la place, on ne le retire pas. */
.qit-supplier .form-check { margin: 0; padding-left: 1.25rem; display: flex; align-items: center; width: 100%; }
.qit-supplier .form-check-label { margin: 0; width: 100%; cursor: pointer; font-size: 0.84rem; color: #1e293b; }
.qit-supplier.qit-supplier-excluded { color: #94a3b8; background: #f8fafc; border-style: dashed; cursor: help; }
.qit-supplier.qit-supplier-excluded > i { color: #cbd5e1; font-size: 0.8rem; }
.qit-supplier-reason { margin-left: auto; font-size: 0.74rem; font-style: italic; color: #94a3b8; white-space: nowrap; }
.qit-suppliers.has-error .qit-supplier { border-color: #fca5a5; }

.qit-days-row { display: flex; align-items: center; gap: 10px; }
.qit-days-row .form-control { width: 90px; flex: 0 0 90px; text-align: center; }
.qit-days-unit { font-size: 0.84rem; color: #475569; }
.qit-deadline-computed:empty { display: none; }

/* Barre d actions des Offres : les deux boutons de round cote a cote, le rapide en premier
   (espacement par le gap de .rfx-toolbar-nav-end depuis le 2026-09-19). */
.rfx-round-toolbar .rfx-toolbar-nav-end .rfx-toolbar-quick > i { margin-right: 4px; font-size: 0.8em; }
/* Overlay d attente de la modale : textes envoi par defaut, textes brouillon quand .is-draft. */
#quick-iteration-waiting .qit-wait-draft { display: none; }
#quick-iteration-waiting.is-draft .qit-wait-draft { display: block; }
#quick-iteration-waiting.is-draft .qit-wait-send { display: none; }

/* ============================================================================
   Simulation - « Combiner des contraintes » (B2, 2026-09-13) : rail sous le menu + modale.
   Scope .rfx-ds comme le reste du tableau de scenarios (.scn-*).
   ============================================================================ */
.rfx-ds .scn-combo{align-items:flex-start;}
.rfx-ds .scn-combo-chips{flex:1 1 auto;font-size:.72rem;line-height:1.35;color:#334155;}
.rfx-ds .scn-combo .scn-limit-note{flex:1 1 100%;margin-left:0;}
.rfx-ds .scn-combo-dialog{max-width:640px;}
.rfx-ds .scn-combo-body .scn-modal-text{margin-bottom:.9rem;}
.rfx-ds .scn-combo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .9rem;margin-bottom:.9rem;}
.rfx-ds .scn-combo-field{min-width:0;}
.rfx-ds .scn-combo-field-wide{grid-column:1 / -1;margin-bottom:.9rem;}
.rfx-ds .scn-combo-amount{display:flex;align-items:center;gap:.4rem;}
.rfx-ds .scn-combo-amount .form-control{flex:1 1 auto;width:auto;max-width:none;}
.rfx-ds .scn-combo-cur{font-size:.78rem;color:#64748b;}
.rfx-ds .scn-combo-checks{display:flex;flex-wrap:wrap;gap:.35rem .9rem;}
.rfx-ds .scn-combo-check{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-size:.82rem;font-weight:400;color:#1e293b;cursor:pointer;}
.rfx-ds .scn-combo-check input{margin:0;}
.rfx-ds .scn-combo-imposed{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.4rem;}
.rfx-ds .scn-combo-imposed-row{display:flex;align-items:center;gap:.4rem;}
.rfx-ds .scn-combo-imposed-row .form-control{flex:1 1 0;min-width:0;}
.rfx-ds .scn-combo-del{flex:0 0 auto;padding:.15rem .5rem;line-height:1;}
.rfx-ds .scn-combo-issues{margin-top:.6rem;padding:.55rem .8rem;border:1px solid #fecaca;border-radius:var(--r-md,8px);background:#fef2f2;}
.rfx-ds .scn-combo-issue{font-size:.8rem;line-height:1.4;color:#b91c1c;}
.rfx-ds .scn-combo-issue + .scn-combo-issue{margin-top:.3rem;}
@media (max-width:640px){.rfx-ds .scn-combo-grid{grid-template-columns:1fr;}}
.rfx-ds .scn-combo-help{margin-left:.3rem;color:#94a3b8;cursor:help;}
.rfx-ds .scn-combo-imposed-row .bootstrap-select{flex:1 1 0;min-width:0;}
/* Curseur Qualité de la modale (2026-09-16) : même rail que sous le menu, mais dans une case de la grille - il
   n'a pas à prendre une ligne entière, et le curseur est un peu plus long pour être saisissable dans la modale. */
.rfx-ds .scn-combo-mix{flex:0 0 auto;min-height:calc(1.5em + .5rem + 2px);font-size:.78rem;}
.rfx-ds .scn-combo-mix .scn-mix-range{width:8rem;}
/* Tooltip du pill « Mes brouillons » (Listes) : gabarit Bootstrap standard mais etroit, texte a gauche. */
.tooltip.lst-tt-narrow .tooltip-inner{max-width:220px;text-align:left;}
.rfx-ds .scn-combo-body .bootstrap-select .dropdown-menu{font-size:.82rem;}
.rfx-ds .scn-combo-body .bootstrap-select .dropdown-menu .dropdown-header{font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8;}

/* ─── Hub Dossiers : repli/dépli de la colonne liste (#list-toggle) — extrait du <style> inline de
   project/index.html.twig le 2026-09-14. La transition de largeur de .col-left a été RETIRÉE : à 750
   lignes, chaque image de l'animation (0,28 s ≈ 17 recalculs de mise en page à ~250 ms) coûtait 2 s de gel
   à la réouverture de la liste ; sans animation, un seul recalcul. ─── */
.col-left.list-collapsed { flex: 0 0 0 !important; max-width: 0 !important; overflow: hidden; padding: 0 !important; min-width: 0 !important; }
.col-left.list-collapsed ~ .col-right { flex: 0 0 100% !important; max-width: 100% !important; }
#list-toggle {
    position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 400; background: #2D3E50; color: #fff; border: none;
    border-radius: 0 4px 4px 0; width: 18px; height: 48px;
    padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s; /* plus de transition sur left : la colonne apparaît d'un coup, le bouton aussi */
}
/* Entrée de la colonne : glissé + fondu en transform/opacity = compositeur seul, aucun recalcul de mise en
   page (contrairement à une transition de largeur). Classe posée par collapseList() à la réouverture. */
@keyframes prj-list-enter { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.col-left.prj-list-entering > * { animation: prj-list-enter 0.2s ease-out; } /* sur les enfants : la boîte de .col-left n'est pas transformée, le chevron peut la mesurer pendant l'animation */
#list-toggle:hover { background: #0d9488; }
#list-toggle:focus, #list-toggle:focus-visible { outline: none; box-shadow: none; }
#list-toggle #list-toggle-icon { font-size: 0.7rem; transition: transform 0.28s; }
/* Sidebar dépliée (permanente ou hover) passe devant le chevron liste */
.navbar-primary:not(.collapsed),
.navbar-primary.collapsed.expanded { z-index: 401; }

/* ── Pagination DS (rendu KNP partagé : hubs Entreprises / Contrats, listes Articles, Admin > Entreprises)
   Retour preprod 2026-09-15 : le rendu Bootstrap par défaut (bleu, groupe soudé) restait legacy sur le hub
   Entreprises. Style flat : boutons séparés, bordure fine, navy ; page courante en teal-light (grammaire
   « sélection » du DS), flèches muettes ; pas d'outline au clic (focus-visible seulement). ── */
.ds-pagination { display: flex; justify-content: center; }
.ds-pagination .pagination { margin: 0; gap: 4px; }
.ds-pagination .page-item { margin: 0; }
.ds-pagination .page-link,
.ds-pagination .page-item:first-child .page-link,
.ds-pagination .page-item:last-child .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 8px; margin: 0;
    font-size: 0.8rem; font-weight: 500; line-height: 1;
    color: var(--ds-text-mid, #415873); background: #fff;
    border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px);
    box-shadow: none; transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ds-pagination .page-link:hover { color: var(--ds-teal, #0d9488); background: var(--ctx-teal-hover, #f0fafa); border-color: #e2e8f0; text-decoration: none; }
.ds-pagination .page-link:focus { outline: 0; box-shadow: none; }
.ds-pagination .page-link:focus-visible { box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25); }
.ds-pagination .page-item.active .page-link { color: var(--ds-teal, #0d9488); background: var(--ctx-teal-light, #e6f7f5); border-color: rgba(13, 148, 136, 0.4); font-weight: 600; }
.ds-pagination .page-item.disabled .page-link { color: #c3ccd6; background: #fff; border-color: #eef2f6; cursor: default; }
.ds-pagination .page-link[rel="prev"], .ds-pagination .page-link[rel="next"],
.ds-pagination .page-item.disabled:first-child .page-link, .ds-pagination .page-item.disabled:last-child .page-link { font-size: 0.95rem; color: var(--ds-text-muted, #8fa1b3); }
.ds-pagination .page-link[rel="prev"]:hover, .ds-pagination .page-link[rel="next"]:hover { color: var(--ds-teal, #0d9488); }

/* Espace partagé sans liste de documents (module désactivé côté Admin R5, ou aucun type) : le JS (splSharedSize)
   pose min-height = hauteur restante ; la footbar est calée en bas par flex. Retour preprod 2026-09-15 (R6). */
.spl-sh2-nodocs { display: flex; flex-direction: column; }
.spl-sh2-nodocs > .spl-sh2-cards { flex: 0 0 auto; }
.spl-sh2-nodocs > .spl-sh2-footbar { margin-top: auto; }

/* R21 (2026-09-16) : recommandation du modele d evaluation sans theme economique, dans l encart qualite du board
   de scenarios (curseur Qualite / Prix). Ligne discrete sous le texte + lien existants. */
.rfx-ds .scn-qual-rule .scn-qual-model-hint { display: block; margin-top: 4px; font-size: 0.78rem; color: #8fa1b3; }

/* Communaute, preprod 2026-09-16 (pt 3) : bouton « Voter » d un sondage a choix multiples, sticky en bas de la
   carte source (.com-source-card : max-height 42vh + scroll interne a scrollbar discrete). Sans ca, le bouton
   passait sous la ligne de flottaison (3 choix + bandeau de cloture) et semblait absent. Fond = fond de la carte
   sondage (#f0eef7). */
.com-poll-vote-form .com-poll-vote-actions {
    position: sticky; bottom: -16px; z-index: 1;   /* -16px = padding bas de la carte : Chrome cale le sticky sur la boite de contenu, pas sur le bord */
    display: flex;
    padding: 8px 0 16px; margin-bottom: -16px;   /* le fond couvre la zone de padding, le bouton reste a 16px du bord ; marge negative = meme etendue de scroll */
    background: #f0eef7;
    box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.10);
}
.com-poll-vote-form .com-poll-vote-actions .btn { flex: 1 1 auto; }

/* Communaute > Documents, preprod 2026-09-16 (pt 5) : les rangees de chips de filtre (Communaute, Categorie)
   tiennent sur UNE ligne ; les chips en trop passent dans un dropdown « + » (.com-doc-chips-overflow, JS calque
   sur l overflow du switcher d onglets). Pas de display !important sur .com-doc-chips-overflow : le JS pilote
   son affichage en inline (style.display = 'none' quand tout tient). */
.com-docs-filter-row .com-doc-cats.com-doc-chips-overflowable { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.com-docs-filter-row .com-doc-chips-overflow { flex: 0 0 auto; }
.com-doc-chips-overflow-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; font-weight: 600; line-height: 1.5;
    padding: 3px 10px; border-radius: var(--r-sm, 3px);
    border: 1px solid #e2e8f0; color: var(--com-mid); background: #f9fafb;
    box-shadow: none !important; outline: none !important;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.com-doc-chips-overflow-btn:hover,
.com-doc-chips-overflow-btn:focus,
.com-doc-chips-overflow.show .com-doc-chips-overflow-btn { border-color: var(--com-teal); color: var(--com-teal); background: var(--com-teal-light); }
.com-doc-chips-overflow-btn .fas { font-size: 0.7rem; }
.com-doc-chips-overflow-menu { font-size: 0.78rem; max-height: 320px; overflow-y: auto; min-width: 180px; }
.com-doc-chips-overflow-item { padding: 5px 14px; color: var(--com-mid); font-weight: 500; }
.com-doc-chips-overflow-item:hover,
.com-doc-chips-overflow-item:focus { color: var(--com-teal); background: var(--com-teal-light); }

/* Finance, pied de card Enjeux (preprod 2026-09-16, pt 3) : colonne gauche depliee ou panneau droit ouvert = card etroite,
   « Forcer a Nego terminee » et la duree se faisaient ecraser. Le pied passe a la ligne : boutons sous la duree, a droite. */
.fin-card-footer { flex-wrap: wrap; gap: 8px 16px; }
.fin-card-footer > div:last-child { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.fin-card-footer .fin-nego-btn, .fin-card-footer .fin-btn-footer { white-space: nowrap; }

/* Page token valideur : card « Commentaires » (notes de l initiateur), lecture seule. */
.pcv-notes { font-size: 0.85rem; line-height: 1.55; color: var(--fin-text-mid, #4b5563); white-space: normal; overflow-wrap: anywhere; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Hierarchie visuelle des pages denses — PILOTE Offres > Questionnaires (2026-09-19).
   Principe (retour Olivier) : le fond teal plein est reserve au bandeau de page, aux boutons, aux
   etats actifs et aux totaux ; la STRUCTURE du contenu se lit par la typographie, des fonds gris
   legers et l indentation, pas par des bandeaux colores empiles. Pilote valide par Olivier le
   2026-09-19 : les regles de STRUCTURE (section, sous-section, question) sont GENERIQUES sous `.rfx-ds`
   et s appliquent donc aussi au portail (`.rfx-qset-panel`, qui partage `.rfx-qset-cat1/2` et
   `.rfx-qview-card`) ; seules les regles de REPONSE (acheteur) restent scopees `.rfx-qres`.
   Retrait des questions uniforme (20 px), qu elles suivent une section ou une sous-section.
   Purement CSS, aucun markup touche.
   Lecture attendue : SECTION (navy, filet) > sous-section (slate, filet teal fin, en retrait)
   > question (bloc gris clair, en retrait) > reponses (blocs blancs dans le gris, nom navy).
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Section : plus de bandeau teal. Titre navy, filet gris sous le titre, respiration au-dessus. */
.rfx-ds .rfx-qset-cat1 { background: transparent; color: #2D3E50; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; padding: 0 0 6px; margin: 22px 0 10px; border-bottom: 2px solid #cbd5e1; border-radius: 0; }
.rfx-ds .rfx-qset-cat1:first-child { margin-top: 6px; }
/* Sous-section : pas de fond, filet teal fin a gauche (seul rappel de couleur), legerement en retrait. */
.rfx-ds .rfx-qset-cat2 { background: transparent; color: #334155; font-size: 0.88rem; font-weight: 700; padding: 2px 0 2px 10px; margin: 14px 0 8px 6px; border-left: 3px solid #0d9488; border-radius: 0; }
/* Question : bloc gris clair (structure), en retrait, sans filet teal. */
.rfx-ds .rfx-qview-card { background: #f8fafc; border: 1px solid #e8edf3; border-left: 1px solid #e8edf3; border-radius: var(--r-md, 6px); padding: 10px 14px 12px; margin: 0 0 10px 20px; }
.rfx-ds .rfx-qview-card .rfx-q-title { color: #1f2d3d !important; font-size: 0.9rem !important; font-weight: 600 !important; }
.rfx-ds .rfx-qview-card .rfx-q-detail { color: #64748b !important; font-size: 0.82rem !important; }
/* Reponse : bloc blanc DANS le gris (contenu), nom d entreprise navy (le teal reste aux liens). */
.rfx-ds .rfx-qres .rfx-qview-card > .rfx-qres-answer { margin-top: 8px; padding: 8px 12px 9px !important; border-left: none; background: #fff; border: 1px solid #e6ebf1; border-radius: var(--r-sm, 4px); }
.rfx-ds .rfx-qres .rfx-qres-answer:first-of-type { margin-top: 10px; }
.rfx-ds .rfx-qres .rfx-qres-sup-name { color: #2D3E50; font-size: 0.8rem; font-weight: 700; }
.rfx-ds .rfx-qres .rfx-qres-value { margin-top: 2px; }
/* Documents d une reponse : deja dans un bloc blanc, le cadre devient un simple fond gris. */
.rfx-ds .rfx-qres .rfx-qres-docs.rfx-docs-box { background: #f8fafc; border-color: #e8edf3; }
.rfx-ds .rfx-qres .rfx-qres-empty { margin-top: 8px; }

/* ── Selecteurs : un style par ROLE (pilote 2026-09-19, CSS seul, aucun markup touche) ────────────
   ENTITE (quelle entreprise, quel questionnaire, quelle grille) = pilule a contour, active = fond teal
   clair + texte teal (modele .rfx-qtabs / .rfx-fin-pill). VUE (par lot / totaux / interne…) = segmente,
   active = fond teal plein + texte blanc (modele .scn-seg / .fbk-mode / bandeau Analyse).
   Ci-dessous, les composants qui s ecartaient de leur role. */
/* Retours › entreprises : etait une pilule PLEINE (style « vue ») → pilule d entite. */
.rfx-ds .fbk-pill.active { background: #e6f7f4; border-color: #0d9488; color: #0b7d72; }
.rfx-ds .fbk-pill.active:hover { background: #d9f2ee; }
.rfx-ds .container-scrollable a.fbk-pill.active:not(.btn):not(.nav-link) { color: #0b7d72; }
.rfx-ds .fbk-pill.active .fbk-pill-badge { color: #fff; background: #0d9488; }
/* Comparateur › Tout / Grilles / Lots / Sous-lots : groupe gris a « bulle blanche » → segmente. */
.rfx-ds .rfx-cmp-levels { background: #fff; border: 1px solid #d7e0ea; border-radius: var(--r-md, 6px); padding: 0; gap: 0; overflow: hidden; }
/* Specificite alignee sur la regle globale des liens (.rfx-ds .container-scrollable a:not(.btn):not(.nav-link), l.16443) qui teinte tout lien en teal. */
.rfx-ds .container-scrollable .rfx-cmp-levels > a:not(.btn):not(.nav-link) { border-radius: 0; padding: 5px 14px; color: #5b6b7b; }
.rfx-ds .container-scrollable .rfx-cmp-levels > a:not(.btn):not(.nav-link):hover { color: #0f766e; }
.rfx-ds .rfx-cmp-levels > a + a { border-left: 1px solid #d7e0ea; }
.rfx-ds .container-scrollable .rfx-cmp-levels > a.text-decoration-underline:not(.btn):not(.nav-link) { background: #0d9488; color: #fff; font-weight: 600; box-shadow: none; }
.rfx-ds .container-scrollable .rfx-cmp-levels > a.text-decoration-underline:not(.btn):not(.nav-link):hover { color: #fff; }
/* Toggle generique (Evolution « Totaux / Prix unitaires », Echanges « Tous / En attente ») : actif clair → plein. */
.rfx-ds .rfx-q-toggle-btn.active { background: #0d9488; color: #fff; font-weight: 600; }
.rfx-ds .rfx-q-toggle-btn.active .rfx-q-count { background: rgba(255,255,255,0.22); color: #fff; }
/* Meme cas pour les toggles rendus en <a> (Evolution) : la regle globale des liens gagnait sur la couleur. */
.rfx-ds .container-scrollable a.rfx-q-toggle-btn:not(.btn):not(.nav-link) { color: #5b6b7b; }
.rfx-ds .container-scrollable a.rfx-q-toggle-btn:not(.btn):not(.nav-link):hover { color: #0f766e; }
.rfx-ds .container-scrollable a.rfx-q-toggle-btn.active:not(.btn):not(.nav-link), .rfx-ds .container-scrollable a.rfx-q-toggle-btn.active:not(.btn):not(.nav-link):hover { color: #fff; }

/* ── Cards IMBRIQUEES (Offres › Documents, Résumés, Financier : sections « Documents remis », « Livrables demandés »
   DANS la card d une entreprise) — 2026-09-19. Leur en-tete reprenait le style du titre de card (1rem/600, force par
   `.rfx-ds .rfx-card-header .rfx-card-title` l.19407) : meme poids que le nom de l entreprise juste au-dessus, la
   hierarchie ne se lisait pas. Une section imbriquee est un LIBELLE (petites majuscules grises), pas un titre ; son
   encadre de documents passe en fond gris clair (structure), comme les blocs de question des Questionnaires.
   Exclut les cards compactes « boxed » (Comparaison, Synthese financiere), qui sont de vraies cards de premier niveau. */
.rfx-ds .rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) > .rfx-card-header { padding: 2px 0 6px; gap: 7px; }
.rfx-ds .rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) > .rfx-card-header .rfx-card-title { font-size: 0.76rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.rfx-ds .rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) > .rfx-card-header .rfx-card-icon { font-size: 0.8rem !important; color: #94a3b8; }
.rfx-ds .rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) .rfx-docs-box { background: #f8fafc; border-color: #e8edf3; }
/* Retour Olivier : section imbriquee alignee sur l icone Entreprise de l en-tete (caret + gap = 20 px), sans icone
   propre (un libelle en petites majuscules n en a pas besoin, les lignes portent deja l icone du fichier). */
.rfx-ds .rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) { margin-left: 20px; }
.rfx-ds .rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) > .rfx-card-header .rfx-card-icon { display: none; }
/* Ligne de document (partial partage acheteur/portail) : l icone du type de fichier passe juste a gauche du poids,
   pour ne plus enchainer deux icones (dossier, fichier) en tete de ligne. Conteneur flex : `order`, markup inchange. */
.rfx-ds .rfx-pdoc-row .rfx-pdoc-icon { order: 1; }
.rfx-ds .rfx-pdoc-row .rfx-pdoc-size { order: 2; }
.rfx-ds .rfx-pdoc-row .rfx-pdoc-actions { order: 3; }
/* Alignement Financier / Contrats sur Documents (retour Olivier) : la liste de documents (`.rfx-docs-box`) est
   partout un conteneur de STRUCTURE → fond gris clair (elle n etait grise que dans les cards imbriquees) ; dans la
   card d une entreprise de Contrats (liste directement dans le corps, sans section imbriquee), meme retrait de 20 px
   que « Documents remis » pour s aligner sur l icone Entreprise. */
.rfx-ds .rfx-docs-box { background: #f8fafc; border-color: #e8edf3; }
.rfx-ds .rfx-card-body > .rfx-docs-box.rfx-ctrm-docs { margin-left: 20px; }

/* Drawer Contrat : section visee par « Initier la validation » (Pilotage) — soulignement bref apres le defilement (2026-09-20). */
.drw-ctr-wizard-panel.drw-ctr-panel-focus { box-shadow: 0 0 0 2px rgba(13,148,136,0.45); border-radius: var(--r-md, 6px); transition: box-shadow .3s; }
/* Drawer Entreprise : section visee par « Non renseigne » du header (Informations complementaires, inline en edition) — soulignement bref apres le defilement (2026-09-20). */
.drawer-supplier .drawer-body.drw-spl-wizard-mode .drw-spl-sheet.drw-spl-panel-focus { box-shadow: 0 0 0 2px rgba(13,148,136,0.45); border-radius: var(--r-md, 6px); transition: box-shadow .3s; }

/* Pied « + Creer … » des listes deroulantes (select2 et bootstrap-select), 2026-09-21. */
.mbw-dd-create { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #e2e8f0; background: #f8fafc; color: #0d9488 !important; font-size: 0.85rem; font-weight: 600; text-decoration: none !important; cursor: pointer; }
.mbw-dd-create:hover { background: #e6f7f4; }
.mbw-dd-create i { font-size: 0.75rem; }
/* Pages RFx : la règle scopée `.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a` (l.~23101, !important) repeint
   les liens des menus bootstrap-select en gris foncé ; on ré-affirme le teal avec une spécificité supérieure. */
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a.mbw-dd-create,
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a.mbw-dd-create:hover,
.rfx-ds .container-scrollable .bootstrap-select .dropdown-menu a.mbw-dd-create:focus { color: #0d9488 !important; }

/* 2026-09-21 — Drawer Entreprise : suggestion de doublon sur la raison sociale (non bloquante, #drwSplNameDup). */
.drw-spl-name-dup { position: relative; margin-top: 8px; padding: 10px 12px 10px 36px; border: 1px solid #fdba74; border-radius: 8px; background: #fff7ed; font-size: 0.82rem; color: #7c2d12; line-height: 1.4; }
.drw-spl-name-dup-icon { position: absolute; left: 12px; top: 12px; color: #f97316; font-size: 0.9rem; }
.drw-spl-name-dup-text { font-weight: 600; margin-bottom: 4px; }
/* 2026-09-22 : boutons sur une ligne (Ouvrir la fiche = teal contour, Non continuer = neutre), à la place du lien souligné. */
.drw-spl-name-dup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.drw-spl-name-dup-pick, .drw-spl-name-dup-open, .drw-spl-name-dup-continue { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-sm, 6px); font-size: 0.78rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; max-width: 100%; }
/* 2026-09-22 : « Sélectionner pour cet appel d'offres » est l'action principale de l'encart quand elle est proposée. */
.drw-spl-name-dup-pick { border: 1px solid #0d9488; background: #0d9488; color: #fff; }
.drw-spl-name-dup-pick:hover { background: #0b7f75; border-color: #0b7f75; color: #fff; }
.drw-spl-name-dup-pick span { overflow: hidden; text-overflow: ellipsis; }
.drw-spl-name-dup-open { border: 1px solid #0d9488; background: #fff; color: #0d9488; }
.drw-spl-name-dup-open:hover { background: #e6f7f4; }
.drw-spl-name-dup-open span { overflow: hidden; text-overflow: ellipsis; }
.drw-spl-name-dup-continue { border: 1px solid #cbd5e1; background: #fff; color: #475569; font-weight: 500; margin-left: auto; }
.drw-spl-name-dup-continue:hover { background: #f1f5f9; color: #1e293b; }

/* 2026-09-22 — Logos de compte (retour préprod) : jamais de hauteur libre. Portail, en-tête d'un AO : la hauteur était calculée
   inline depuis le ratio du fichier (logo haut → en-tête qui grandit). Menus acheteur / administration : largeur fixe 158 px sans
   limite de hauteur. Les logos larges gardent leur taille ; les logos hauts sont réduits à la hauteur maximale, ratio conservé. */
/* width fixe comme avant (un petit fichier est agrandi à la largeur du cadre), hauteur plafonnée ; object-fit: contain garde le ratio
   dans le cadre 150×48 quand le logo est haut (pas de déformation). */
.rfx-ds .rfx-portal-header .rfx-portal-logo img { width: 150px; height: auto; max-height: 48px; object-fit: contain; display: block; }
.nav-account-logo { width: 158px; height: auto; max-height: 56px; object-fit: contain; }

/* 2026-09-22 — Analyse › Fiabilité, colonne « Écart constaté » : tooltip Bootstrap à largeur bornée et retour à la ligne. */
.tooltip.rly-tt .tooltip-inner { max-width: 360px; white-space: normal; text-align: left; line-height: 1.4; }

/* 2026-09-22 : dans la modale d'envoi bloquée, lien « Compléter » (nouvel onglet) sur les points Identité / Questionnaire général. */
.rfx-ds .rfx-send-errors .rfx-send-fix-link { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 1px 8px; border: 1px solid #0d9488; border-radius: var(--r-full, 999px); color: #0d9488; font-size: 0.74rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rfx-ds .rfx-send-errors .rfx-send-fix-link:hover { background: #e6f7f4; text-decoration: none; }
.rfx-ds .rfx-send-errors .rfx-send-fix-link i { font-size: 0.68rem; }

/* 2026-09-22 : modale « envoi de fichier en cours » (garde-fou de navigation interne, cf. app.js). */
#mbwUploadGuardModal .mbw-upload-guard-hero { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: #e6f7f4; color: #0d9488; font-size: 1.3rem; }
#mbwUploadGuardModal .mbw-upload-guard-text { margin: 0; text-align: center; color: #415873; font-size: 0.86rem; line-height: 1.5; }

/* 2026-09-22 : Confidentialité (portail) — un encadré par décision (dépôt, rejet, acceptation), les plus récentes en haut.
   Une fois l'accord accepté, les dépôts refusés passent en retrait visuel : ils restent lisibles sans capter l'attention. */
.rfx-ds .rfx-nda-block { padding: 14px; margin-bottom: 12px; border: 1px solid #eef1f4; border-radius: var(--r-md, 6px); background: #fff; }
.rfx-ds .rfx-nda-block:last-child { margin-bottom: 0; }
.rfx-ds .rfx-nda-block > *:last-child { margin-bottom: 0; }
.rfx-ds .rfx-nda-block.is-muted { background: #f8fafc; border-color: #eef1f4; }
.rfx-ds .rfx-nda-block.is-muted .rfx-nda-status-ko { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.rfx-ds .rfx-nda-block.is-muted .rfx-nda-doc, .rfx-ds .rfx-nda-block.is-muted .rfx-nda-comment { opacity: 0.72; }
.rfx-ds .rfx-nda-block.is-muted .rfx-nda-comment-label { color: #64748b; }

/* 2026-09-22 : seuil de détection rappelé sous « Anomalies à signaler » (Analyse › Retours). */
.rfx-ds .fbk-hint-threshold { margin: .25rem 0 .6rem; font-size: .74rem; color: #64748b; line-height: 1.45; }

/* 2026-09-22 : Analyse › Retours — référence signalée comme hors normes, et rappel des lignes écartées dans Fiabilité. */
.rfx-ds .fbk-best-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-full, 999px); background: #fff7ed; color: #b45309; font-size: .68rem; font-weight: 600; white-space: nowrap; cursor: help; }
.rfx-ds .fbk-best-flag i { font-size: .62rem; }
.rfx-ds .fbk-excluded { display: flex; align-items: flex-start; gap: 8px; margin-top: .7rem; font-size: .75rem; color: #64748b; line-height: 1.5; }
.rfx-ds .fbk-excluded i { margin-top: .15rem; color: #94a3b8; }
.rfx-ds .fbk-excluded-item { text-decoration: line-through; color: #94a3b8; }

/* 2026-09-23 : AO › Paramétrage, cartes Identité / Questionnaire — rappel discret sous le bouton d'aperçu. */
.rfx-ds .rfx-cond-hint { margin: .5rem 0 0; font-size: .73rem; line-height: 1.45; color: #64748b; }

/* 2026-09-23 : AO › Planning indicatif — jalon à moitié rempli (donc non enregistré), signalé sur la ligne. */
.rfx-ds .rfx-ms-row .form-control.rfx-ms-field-missing { border-color: #f59e0b; background: #fffbeb; }
.rfx-ds .rfx-ms-missing { margin-top: 3px; font-size: .72rem; line-height: 1.35; color: #b45309; }
.rfx-ds .rfx-ms-row-missing { align-items: flex-start; }
.rfx-ds .rfx-ms-row-missing .rfx-ms-communicate-cell, .rfx-ds .rfx-ms-row-missing .rfx-ms-date-cell,
.rfx-ds .rfx-ms-row-missing .rfx-ms-status-cell, .rfx-ds .rfx-ms-row-missing .rfx-ms-delete-cell { margin-top: 4px; }

/* 2026-09-23 : bloc « Compléter hors ligne » au-dessus d'une grille de prix (portail) — remplace la modale. */
/* Encadré : il réunit le libellé et les deux boutons, et englobe la zone d'import une fois dépliée. */
.rfx-ds .rfx-bomoff-wrap { flex: 0 1 auto; padding: 8px 10px; border: 1px solid #e9edf2; border-radius: var(--r-md, 6px); background: #f8fafc; }
.rfx-ds .rfx-bomoff { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Badge et flèches vivent HORS de l'encadré, poussés TOUT À DROITE de la barre (le badge d'abord, les flèches
   ensuite), alignés sur la première ligne de l'encadré (padding 8 px + bordure). */
.rfx-ds .rfx-pbomgrid-toolbar > .rfx-bomoff-fillmode { align-self: flex-start; margin-top: 13px; margin-left: auto; }
/* Sans ce rappel, les deux marges automatiques se partageraient l'espace et sépareraient le badge des flèches.
   Frère GÉNÉRAL (`~`) et non adjacent : le partiel émet un <script> entre le badge et les flèches. Quand le badge est
   absent (lecture seule), la règle ne s'applique pas et les flèches gardent leur `margin-left: auto`. */
.rfx-ds .rfx-pbomgrid-toolbar > .rfx-bomoff-fillmode ~ .rfx-pbomgrid-scroll { align-self: flex-start; margin-top: 9px; margin-left: 10px; }
.rfx-ds .rfx-pbomgrid-altdl { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
/* Jeux de grilles alternatives : pas de flèches de défilement sur cette ligne, le badge va donc tout à droite,
   aligné sur la première ligne de l'encadré comme dans la barre de la grille simple. */
.rfx-ds .rfx-pbomgrid-altdl > .rfx-bomoff-fillmode { margin-left: auto; margin-top: 13px; }
.rfx-ds .rfx-bomoff-label { font-size: 0.8rem; font-weight: 600; color: #415873; }
.rfx-ds .rfx-bomoff-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid #0d9488; border-radius: var(--r-md, 6px); background: #fff; color: #0f766e; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rfx-ds .rfx-bomoff-btn:hover { background: #e6f7f4; color: #0b7d72; text-decoration: none; }
.rfx-ds .rfx-bomoff-toggle.is-open { background: #0d9488; border-color: #0d9488; color: #fff; }
.rfx-ds .rfx-bomoff-help { color: #94a3b8; font-size: 0.82rem; }
.rfx-ds .rfx-bomoff-help:hover { color: #0d9488; }
.rfx-ds .rfx-bomoff-panel { margin-top: 9px; padding-top: 9px; border-top: 1px solid #e3e9ef; }
.rfx-ds .rfx-bomoff-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rfx-ds .rfx-bomoff-file { flex: 0 1 300px; min-width: 0; }
.rfx-ds .rfx-bomoff-file .form-group { margin-bottom: 0; }
.rfx-ds .rfx-bomoff-waiting { font-size: 0.8rem; color: #475569; }
.rfx-ds .rfx-bomoff-waiting.is-error { color: #b91c1c; font-weight: 600; }
.rfx-ds .rfx-bomoff-formats { margin-top: 7px; font-size: 0.74rem; color: #64748b; }
.rfx-ds .rfx-bomoff-result:not(:empty) { margin: 0 0 12px; }

/* ---------------------------------------------------------------------------
   Modale "Acces document" du hub Contrats (contract/tabs/documents_contributors)
   2026-09-26 - retour preprod : le contenu etait pose dans une grille Bootstrap
   calibree pour 5 colonnes (nom, categorie, e-mail, mobile, fixe) ; telephones
   vides = tout tasse a gauche d'une modale modal-lg. Lignes reprises du pattern
   .ctx-member-row (card Contributeurs de l'onglet Contexte).
   --------------------------------------------------------------------------- */
.ctr-doca-subtitle { margin: 0 0 4px; font-size: 0.7rem; font-weight: 300; color: #8fa1b3; }
.ctr-doca-subtitle-spaced { margin-top: 16px; }
.ctr-doca-list { border: 1px solid #eef2f6; border-radius: var(--r-md, 6px); overflow: hidden; }
.ctx-member-row.ctr-doca-row { height: auto; min-height: 38px; padding: 6px 12px; gap: 12px; }
.ctr-doca-row .ctx-member-name { flex: 1 1 auto; font-weight: 500; color: var(--ctx-text-dark, #2D3E50); }
.ctr-doca-row .ctx-member-cat { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ctr-doca-mail { font-size: 0.75rem; color: var(--ctx-teal, #0d9488); white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctr-doca-mail:hover { color: #0f766e; text-decoration: underline; }
.ctr-doca-phone { font-size: 0.72rem; color: var(--ctx-text-muted, #8fa1b3); white-space: nowrap; flex-shrink: 0; }
/* La corbeille reste visible : la modale ne sert qu'a gerer ces acces. */
.ctr-doca-row .ctx-member-delete { visibility: visible; color: #b6c2cf; }
.ctr-doca-row .ctx-member-delete:hover { color: #ef4444; }

/* Ligne d'association : 2 selects + bouton sur une seule rangee. */
.ctr-doca-add { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.ctr-doca-add-spaced { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef2f6; }
.ctr-doca-add-field { flex: 1 1 0; min-width: 0; }
.ctr-doca-add-field .form-group { margin-bottom: 0; }
.ctr-doca-add-field .bootstrap-select { width: 100% !important; }
.ctr-doca-add .ds-btn-primary { flex-shrink: 0; }
@media (max-width: 600px) { .ctr-doca-add { flex-wrap: wrap; } .ctr-doca-add-field { flex: 1 1 100%; } }

/* ---------------------------------------------------------------------------
   Drawer Resiliation - carte "document de resiliation"
   2026-09-26 - retour preprod : les champs Nom / Type flottaient sous le bouton
   de selection, visibles avant meme qu'un fichier soit choisi. Ils sont desormais
   dans la meme carte que la zone de selection, et masques tant que rien n'est
   choisi (.ctr-cnl-doc-reveal, revelee par is-visible).
   --------------------------------------------------------------------------- */
.ctr-cnl-doc-card { border: 1px solid #e2e8f0; border-radius: var(--r-lg, 10px); padding: 12px 14px; background: #fff; }
.ctr-cnl-doc-card.is-filled { background: #f8fafc; }
.ctr-cnl-doc-reveal { display: none; }
.ctr-cnl-doc-reveal.is-visible { display: block; }

/* Zone de selection : le bouton FineUploader est deja style par .drawer-contract .qq-upload-button. */
.ctr-cnl-doc-pick .qq-upload-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.78rem; }
.ctr-cnl-doc-pick .qq-upload-list li { padding: 5px 9px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md, 6px); margin-top: 4px; }
.ctr-cnl-doc-pick .qq-upload-file { color: #2D3E50; font-weight: 500; }

/* Champs Nom / Type, rattaches visuellement au fichier par un filet. */
.ctr-cnl-doc-meta { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.ctr-cnl-doc-meta.is-visible { display: flex; flex-direction: column; gap: 12px; }
.ctr-cnl-doc-meta .ctr-cnl-field .form-group { margin-bottom: 0; }

/* Case "Donner l'acces aux contributeurs associes" + son point d'aide. */
.ctr-cnl-doc-access { margin-top: 12px; }
.ctr-cnl-doc-access.is-visible { display: flex; align-items: center; gap: 6px; }
.ctr-cnl-doc-access .form-group { margin-bottom: 0; }
.ctr-cnl-doc-access .form-check { margin-bottom: 0; }
.ctr-cnl-doc-access .form-check-label { font-size: 0.78rem; color: #415873; }
.ctr-cnl-doc-help { color: #f0806c; font-size: 0.82rem; line-height: 1; text-decoration: none; }
.ctr-cnl-doc-help:hover { color: #dc2626; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Modale d'affichage d'une note verrouillee (frontend/note/display.html.twig),
   partagee par les hubs Dossiers, Contrats et Entreprises.
   2026-09-26 - retour preprod : les documents joints etaient en bas de modale,
   rendus par une grille Bootstrap a 5 colonnes titrees (Nom / Type / Taille /
   Type / actions). Ils passent en tete, en lignes compactes sans en-tetes.
   --------------------------------------------------------------------------- */
.note-display-byline { font-size: 0.7rem; font-weight: 400; color: #8fa1b3; }

.note-doc-block { margin: 16px 0 4px; padding: 10px 12px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: var(--r-lg, 10px); }
.note-doc-title { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 500; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.note-doc-title .fas { font-size: 0.75rem; color: #94a3b8; }
.note-doc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; background: #e2e8f0; color: #475569; border-radius: 9px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0; }

.note-doc-list { display: flex; flex-direction: column; }
.note-doc-item { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid #eef2f6; }
.note-doc-item:first-child { border-top: none; }
.note-doc-icon { flex: 0 0 auto; width: 16px; text-align: center; color: #94a3b8; font-size: 0.9rem; }
.note-doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-weight: 500; color: #2D3E50; }
.note-doc-cat { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: #8fa1b3; }
.note-doc-size { flex: 0 0 auto; font-size: 0.72rem; color: #8fa1b3; white-space: nowrap; }
.note-doc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.note-doc-actions a { color: #94a3b8; font-size: 0.82rem; text-decoration: none; }
.note-doc-actions a:hover { color: var(--ctx-teal, #0d9488); }

/* Corps de la note : le contenu vient de CKEditor, on borne juste sa typo. */
.note-display-text { font-size: 0.86rem; color: #2D3E50; }
.note-display-text img { max-width: 100%; height: auto; }

@media (max-width: 600px) {
  .note-doc-item { flex-wrap: wrap; }
  .note-doc-name { flex: 1 1 100%; }
}

/* Drawer Resiliation - zone de selection du fichier (2026-09-26, retour preprod).
   Le gabarit FineUploader (layout_frontend.html.twig) pose .qq-total-progress-bar-container
   AVANT le bouton, en float:right / width:300px / hauteur 25px : dans un drawer etroit elle
   creuse un vide au-dessus de "Choisir un document". Meme neutralisation que #iterationPriceModal. */
.ctr-cnl-doc-pick .qq-total-progress-bar-container,
.ctr-cnl-doc-pick .qq-drop-processing { display: none !important; }
.ctr-cnl-doc-pick .qq-uploader { overflow: hidden; }
.ctr-cnl-doc-pick .qq-upload-button { float: none; display: inline-block; margin: 0 !important; }
.ctr-cnl-doc-pick .qq-dialog-message-selector:empty { display: none; }

/* ---------------------------------------------------------------------------
   Hub Dossiers - largeur des languettes de repli/depli (2026-09-27)
   #list-toggle (colonne liste) et #sp-toggle (panneau droit) faisaient 18 px de
   large : cible trop etroite pour etre attrapee facilement a la souris.
   Portees a 27 px (+50 %), hauteur inchangee. Les deux boutons ne servent que ce
   hub (project/index.html.twig et project/tab.html.twig) : aucun effet ailleurs.
   Ecrit ICI et non dans les blocs d'origine (l. ~528 et ~28302) : a specificite
   egale, c'est la derniere declaration du fichier qui gagne.
   --------------------------------------------------------------------------- */
#list-toggle { width: 27px; }
#sp-toggle { width: 27px; }

/* Badge d'acces restreint des onglets Documents (hubs Contrats et Entreprises), 2026-09-27.
   Calque de .ctr-doc-note-badge, en registre "restriction" plutot qu'informatif. */
.ctr-doc-access-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: var(--r-sm, 3px); padding: 1px 6px; }
.ctr-doc-access-badge .fas { font-size: 0.58rem; }

/* Retour preprod 2026-09-27 : dans le bandeau des onglets RFx, `.rfx-fin-chapeau i` colore TOUT `<i>`
   en teal - y compris celui du bouton plein « Telecharger tous les documents », dont le fond est ce meme
   teal : l'icone etait invisible. Meme traitement que le bouton de synthese (`.rfx-sum-btn i`) : l'icone
   reprend la couleur de son bouton. Porte aux boutons d'action du bandeau, pas au bandeau entier, pour ne
   pas toucher l'icone de titre ni les boutons fantomes (qui, eux, sont bien teal sur blanc). */
.rfx-ds .rfx-fin-chapeau .rfx-fin-chapeau-action .btn i { color: inherit; }

/* Retour preprod 2026-09-27 : la poignee de la colonne Liste etait peinte en #2D3E50, la couleur
   EXACTE de la barre de navigation a laquelle elle est collee - on la prenait pour le bouton de
   depliage de cette barre. Elle passe sur la peau de la zone de CONTENU : fond blanc, filet clair,
   chevron teal. Au survol elle se remplit en teal, comme avant. Position, taille et comportement
   inchanges. `#sp-toggle` (panneau de droite) garde sa peau : il n'est colle a aucun bandeau navy. */
#list-toggle {
    background: #fff;
    color: #0d9488;
    border: 1px solid #d9e2ec;
    border-left: none;            /* colle au bord : un filet de ce cote ne se verrait pas */
}
#list-toggle:hover { background: #0d9488; border-color: #0d9488; color: #fff; }

/* Retour preprod 2026-09-27 : « Documents complementaires remis » colle a l encadre du livrable
   au-dessus. `rfx-docs-block-spaced` donne pourtant padding-top:24px (l. 24318), mais la regle
   scopee `.rfx-card-body .rfx-fin-card-compact:not(.rfx-fin-card-boxed) > .rfx-card-header` la bat
   (4 classes contre 3) et son `padding` raccourci ecrase le padding-top. On repasse devant avec
   une specificite superieure. Concerne aussi Offres > Resumes, qui pose la meme classe. */
.rfx-ds .rfx-card-body .rfx-docs-block-spaced.rfx-fin-card-compact:not(.rfx-fin-card-boxed) > .rfx-card-header { padding-top: 24px; }

/* Retour preprod 2026-09-27, 2e passe : les deux poignees partagent la meme peau, et elle doit se
   VOIR. Le blanc pose un peu plus haut reglait la confusion avec la barre de navigation (navy
   #2D3E50) mais disparaissait sur fond clair ; le navy d'origine, lui, faisait passer la poignee
   gauche pour le depliage de la barre. On prend donc le teal d'action du DS : visible, sans
   ambiguite, identique a gauche et a droite. Le survol fonce comme partout ailleurs. */
#list-toggle,
#sp-toggle {
    background: #0d9488;
    color: #fff;
    border: none;
}
#list-toggle:hover,
#sp-toggle:hover { background: #0b7d72; border-color: #0b7d72; color: #fff; }

/* Comparaison des grilles : raison d une cellule de total sans chiffre (B12, 2026-09-28).
   La regle de comparabilite existait deja - un total n est ecrit que si l entreprise a chiffre
   tout le perimetre - mais elle etait muette. Le soulignement pointille ne veut dire qu une seule
   chose dans ce tableau : il y a une explication au survol. « non chiffre » n en a pas besoin,
   donc pas de pointille : son absence distingue les deux cas d un coup d oeil.
   Pas d icone : ce tableau atteint 100 000 elements sur un gros round, un <i> par cellule en
   ajouterait des milliers. Un liseré ne coute aucun element. */
.rfx-cmp-partiel, .rfx-cmp-nochiffre { font-size: 0.74rem; font-style: italic; color: #94a3b8; font-weight: 400; }
.rfx-cmp-partiel { border-bottom: 1px dotted #94a3b8; cursor: help; }
/* Meme repere sur les cellules d ecart pondere, qui portaient deja une infobulle de perimetre
   sans aucun signe visible : deux conventions dans un meme tableau seraient pires qu une. */
[data-type="delta-weighting-percent"][data-toggle="tooltip"] { border-bottom: 1px dotted #94a3b8; cursor: help; }

/* Fiabilite : barre d actions groupees collee en bas du conteneur a defilement (B3, 2026-09-28).
   Elle etait posee au-dessus du tableau, en flux normal : des qu il y a beaucoup d anomalies, on
   coche des lignes plus bas et la barre est deja sortie de l ecran. Meme mecanique que
   `.spl-updreq-foot`, deja en service : `sticky bottom` dans `#rfp-content`, qui est le conteneur
   a defilement de la page. La barre reste masquee tant que rien n est coche, donc elle ne prend
   aucune place dans le cas courant. */
.rfx-ds .rly-bulk { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid #cbd5e1; box-shadow: 0 -2px 8px rgba(45,62,80,0.08); }

/* Evolution des offres : mentions de perimetre (B7, B10 - 2026-09-28).
   Un chiffre, ou son absence, doit toujours dire sur quoi il porte. Ces deux mentions reprennent
   le gris italique de `.rfx-evo-detail` deja en place, en un cran plus discret : elles accompagnent
   la valeur, elles ne la concurrencent pas. */
.rfx-ds .rfx-evo-scope { font-style: italic; color: #94a3b8; }
.rfx-ds .rfx-evo-chart-note { margin: 2px 0 6px; padding: 0 4px; font-style: italic; color: #94a3b8; white-space: normal; }

/* Evolution des offres : un round sans aucune offre (B9, 2026-09-28).
   Sa colonne est estompee et porte son motif une seule fois, en tete : repeter « n a pas repondu »
   sur chaque ligne n apprenait rien. `rfx-evo-round-ref` nomme le round de reference quand ce n est
   pas le precedent immediat. */
.rfx-ds .rfx-evo-th-empty, .rfx-ds .rfx-evo-cell-empty { background: #f8fafc; }
.rfx-ds .rfx-evo-round-empty, .rfx-ds .rfx-evo-round-ref { display: block; margin-top: 2px; font-size: 0.7rem; font-style: italic; font-weight: 400; color: #94a3b8; white-space: normal; }

/* Attente d affichage, onglet Analyse et comparateurs (2026-09-28).
   Il y avait TROIS comportements pour six liens : « Grilles » ouvrait une infobulle Bootstrap
   ancree sur l onglet, « Alternatives » n avait rien puis posait un voile DANS la page au
   chargement AJAX, et Fiabilite / Evolution / Simulation / Retours n avaient rien du tout.
   Un seul voile desormais, au meme endroit - la zone de contenu - avec l anneau deja employe par
   les listes des hubs (`.item-preview-loading`), dont on reutilise l animation `mbwItemSpin`.
   L export Excel garde son propre message : ce n est pas une attente d affichage mais un travail
   de fond, et voiler l ecran empecherait de continuer a le lire. */
.rfx-wait { position: relative; }
.rfx-wait::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.6); z-index: 40; }
.rfx-wait::before { content: ''; position: absolute; top: 120px; left: 50%; width: 28px; height: 28px; margin-left: -14px; border: 3px solid #d1e7e4; border-top-color: #0d9488; border-radius: 50%; animation: mbwItemSpin 0.7s linear infinite; z-index: 41; }
/* Variante « dans un conteneur » : le chargement d une grille alternative remplace le contenu de
   `#bom-container`, l anneau se centre donc sur la hauteur reservee. */
.rfx-wait-inline { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.rfx-wait-inline::before { content: ''; width: 28px; height: 28px; border: 3px solid #d1e7e4; border-top-color: #0d9488; border-radius: 50%; animation: mbwItemSpin 0.7s linear infinite; }