/* ============================================================
   PORTAIL COOPTATION
   ============================================================ */

/* Hero : variante teintée cooptation (dégradé navy → accent) */
.coop-hero {
    background: linear-gradient(135deg, var(--deep-koamaru) 0%, var(--primary) 55%, var(--accent) 145%);
}

/* ── Icônes SVG (jeu Lucide, monochrome currentColor) ──────── */
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ic-inline { vertical-align: -3px; margin-right: 2px; }
/* États vides : navy discret plutôt que noir plein */
.coop-empty-icon { line-height: 0; }
.coop-empty-icon .ic { color: var(--primary); opacity: 0.32; }
/* Médailles du podium — couleurs métal sémantiques (rang, pas la charte) */
.ic.medal-gold   { color: #e0a91b; }
.ic.medal-silver { color: #9aa4b0; }
.ic.medal-bronze { color: #bd7a41; }

/* ── Barre d'actions ───────────────────────────────────────── */
.coop-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
/* Suivi RH → KPI : barre de période collante sous la barre du haut (fond de
   page pour masquer le contenu qui défile dessous). */
.coop-toolbar.srh-toolbar-sticky {
    position: sticky; top: 60px; z-index: 45;
    margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2));
    padding: var(--space-2);
    background: #f2f3f8;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) { .coop-toolbar.srh-toolbar-sticky { top: 54px; flex-wrap: wrap; } }
.coop-count {
    color: var(--text-light);
    font-size: var(--fs-md);
    font-weight: 600;
}

/* ── Tableau des cooptations ───────────────────────────────── */
.coop-table-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Écran étroit : défilement horizontal plutôt que des colonnes rognées
       (seule la première restait visible). Coins arrondis conservés. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.coop-table {
    width: 100%;
    border-collapse: collapse;
}
.coop-table thead th {
    text-align: left;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    font-weight: 700;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}
.coop-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.coop-table tbody tr:last-child td { border-bottom: none; }

/* Mapping étapes Boond -> statut de traitement (config Paramétrage) —
   table compacte (id/libellé/select), plutôt qu'une ligne libellé+id
   concaténés en texte libre. */
.coop-stage-mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.coop-stage-mapping-table thead th {
    text-align: left;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    font-weight: 700;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--card);
}
.coop-stage-mapping-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.coop-stage-mapping-table tbody tr:last-child td { border-bottom: none; }
.coop-stage-mapping-id { color: var(--text-light); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
/* Projection des reprises (Paramétrage → Cooptations). */
#coopActionMappingConfig[hidden] { display: none; }
.coop-config-subtitle { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-md); color: var(--primary); }
.coop-mapping-scroll { max-height: 360px; overflow-y: auto; margin-bottom: var(--space-3); }
.coop-keyword-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.coop-keyword-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 640px) { .coop-keyword-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.coop-stage-mapping-select {
    min-width: 200px;
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.coop-table tbody tr { transition: background var(--transition-smooth); }
.coop-table tbody tr:hover { background: var(--surface-1); }
.coop-cand-name { font-weight: 600; color: var(--text); }
.coop-cand-sub { font-size: var(--fs-sm); color: var(--text-light); }
.coop-muted { color: var(--text-light); }

/* Boutons d'action du domaine Cooptation — même charte que les boutons de la
   page Positionnements (« Je me positionne » / « Me retirer », positions.js) :
   - principal : dégradé navy → Deep Koamaru, texte blanc, sans bordure ;
   - secondaire : fond blanc, texte et bordure navy ;
   - retrait / suppression : fond blanc, texte et bordure accent.
   .btn-icon-detail (boutons « Détail » des tableaux) = variante secondaire.
   Ces boutons de ligne / de carte reproduisent les boutons de Positionnements,
   qui sont en style inline (aucune classe réutilisable). Ailleurs, les classes
   des Contributions sont réutilisées telles quelles :
   - boutons de page et de formulaire : .btn + .btn-accent (création, rose),
     .btn-primary (action principale), .btn-outline (secondaire) ;
   - petit bouton de création (« Proposer un candidat ») : .btn-valider. */
.coop-btn,
.btn-icon-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.coop-btn--primary {
    background: linear-gradient(135deg, #000099, #2D2E60);
    color: #fff;
    /* Bordure transparente de même épaisseur que les variantes contour :
       dimensions strictement identiques quel que soit l'arrondi du rendu. */
    border: 1.5px solid transparent;
}
.coop-btn--primary:hover { opacity: .9; }
.coop-btn--secondary,
.btn-icon-detail {
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.coop-btn--secondary:hover,
.btn-icon-detail:hover { background: rgba(0,0,153,0.06); }
.coop-btn--danger {
    background: #fff;
    color: var(--accent);
    border: 1.5px solid var(--accent);
}
.coop-btn--danger:hover { background: var(--surface-accent); }
.coop-btn--danger-solid { background: var(--accent); color: #fff; border: 1.5px solid var(--accent); }
.coop-btn--danger-solid:hover { background: #ff3380; border-color: #ff3380; }
/* Détail : zone réservée aux administrateurs (suppression de la fiche). */
.coop-detail-admin {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--border); font-size: var(--fs-sm);
}
.coop-delete-list { margin: var(--space-2) 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--text); }
.coop-delete-list li { margin: 4px 0; }
.coop-delete-warning { margin: var(--space-2) 0 0; font-weight: 700; color: var(--accent); }
.coop-btn:focus-visible,
.btn-icon-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coop-btn:disabled { opacity: .5; cursor: default; }

/* ── Badges de statut ──────────────────────────────────────── */
/* Même famille que les badges des Contributions (.badge) : pilule à fond
   pâle et texte foncé. Comme dans les Contributions, seul le statut « en
   cours » (RDV en cours ↔ In Progress) porte une bordure visible — et Hors
   cible son contour pointillé (arbitrage validé). Texte en gras, 12px. */
.coop-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* Statut de traitement (spec Partie 2, docs/COOPTATION.md) — vocabulaire
   entièrement dérivé, propose/erreur_creation localement, rdv_en_cours/
   vivier/refuse/signe depuis l'étape Boond mappée, hors_cible sur rejet
   manuel de doublon. "a_statuer" est un état transitoire informatif (pas un
   statut de traitement à proprement parler), pas une valeur de COOPTATION_STATUSES.
   Couleurs limitées à la charte SOMA et aux sémantiques du design system
   (docs/DESIGN_SYSTEM.md §2.2) : info (navy), en cours (accent), fond sombre
   (Deep Koamaru), avertissement (--warning-dark sur #faeeda), succès, danger. */
/* Combinaison A (contraste renforcé, validée) — la forme porte aussi le sens :
   - PLEIN : ce qui démarre, demande une action ou aboutit — Proposé (bleu SOMA),
     À statuer (ambre --warning-dark), Signé (--success), Erreur (--danger) ;
   - « RDV en cours » = style exact de « In Progress » (Contributions) ;
   - « NRP » = forme de « En attente » (Contributions), en jaune (#faeeda / --warning-dark) ;
   - CONTOUR : attente volontaire — Vivier (Deep Koamaru) ;
   - PÂLE / POINTILLÉ : fins de parcours en retrait — Refusé, Hors cible.
   Texte blanc sur les pleins : contraste 5:1 à 14:1. */
.coop-badge--propose         { background: var(--primary);       color: #fff; }
.coop-badge--rdv_en_cours    { background: #ffe0ec;              color: var(--accent); border-color: rgba(245,10,99,0.28); }
.coop-badge--vivier          { background: #fff;                 color: var(--deep-koamaru); border-color: var(--deep-koamaru); }
/* NRP = forme des badges « soft » des Contributions (.badge-on-hold « En attente »),
   en jaune : fond clair, texte et bordure jaune foncé (avertissement du design system). */
.coop-badge--nrp             { background: #faeeda;              color: var(--warning-dark); border-color: rgba(180,83,9,0.40); }
.coop-badge--a_statuer       { background: var(--warning-dark);  color: #fff; }
.coop-badge--signe           { background: var(--success);       color: #fff; }
.coop-badge--refuse          { background: rgba(84,110,127,0.10); color: #546e7f; }
.coop-badge--hors_cible      { background: #fff;                 color: #546e7f; border: 1px dashed var(--text-light); }
.coop-badge--erreur_creation { background: var(--danger);        color: #fff; }
/* Actions Boond de la chronologie (pastille seulement). */
.coop-badge--boond           { background: rgba(0,0,153,0.07);   color: var(--primary); }

/* ── État vide ─────────────────────────────────────────────── */
.coop-empty {
    text-align: center;
    padding: var(--space-12) var(--space-5);
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.coop-empty-icon { font-size: 44px; margin-bottom: var(--space-3); }
.coop-empty h3 { color: var(--text); margin-bottom: var(--space-2); }
.coop-empty p { color: var(--text-light); margin-bottom: var(--space-5); }

/* ── Modales ───────────────────────────────────────────────── */
.coop-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: rgba(21, 22, 72, 0.55);
    backdrop-filter: blur(2px);
}
.coop-modal {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
}
.coop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--card);
}
.coop-modal-header h3 { color: var(--primary); font-size: var(--fs-xl); }
.coop-modal-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    padding: 0 4px;
    transition: color var(--transition-fast), transform var(--transition-smooth);
}
.coop-modal-close:hover { color: var(--accent); transform: rotate(90deg); }

/* Fenêtre du domaine Cooptation ouverte : la page en arrière-plan ne défile
   plus (a11y-modal.js) ; la barre de défilement masquée est compensée. */
html.coop-scroll-locked { overflow: hidden; padding-right: var(--coop-scrollbar-w, 0px); }

/* ── Formulaire ────────────────────────────────────────────── */
.coop-form { padding: var(--space-5); }
.coop-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.coop-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.coop-req { color: var(--accent); }
/* :not(checkbox/radio) — évite que cette règle générique (pensée pour les champs
   texte/email/tel/file) ne s'applique aussi aux cases à cocher imbriquées
   (dropdown multi-select, interrupteur on/off), qui ont leur propre style. */
.coop-field input:not([type="checkbox"]):not([type="radio"]), .coop-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
    box-sizing: border-box;
}
.coop-field input:not([type="checkbox"]):not([type="radio"]):focus, .coop-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 0, 153, 0.06); }
.coop-field textarea { resize: vertical; }
.coop-field-row { display: flex; gap: var(--space-4); }

/* Popup "Lire" (offres, lecture seule) : `readOnly` plutôt que `disabled` —
   texte lisible/sélectionnable/copiable, pas grisé comme un champ désactivé.
   Fond neutre + curseur par défaut pour signaler que ce n'est pas éditable. */
.coop-field input:not([type="checkbox"]):not([type="radio"])[readonly],
.coop-field textarea[readonly] {
    background: var(--surface-2);
    border-color: transparent;
    cursor: default;
}
.coop-field input:not([type="checkbox"]):not([type="radio"])[readonly]:focus,
.coop-field textarea[readonly]:focus { box-shadow: none; border-color: transparent; }
.coop-field-row .coop-field { flex: 1; }
.coop-field-help { font-size: var(--fs-xs); color: var(--text-light); line-height: 1.4; }
.coop-field-help a { color: var(--primary); }
.coop-field--inline { flex-direction: row; align-items: center; gap: 8px; }
.coop-field--inline input[type="checkbox"] { width: auto; margin: 0; }
.coop-field--inline > span { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.coop-field--inline-question { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.coop-field--inline-question > span:first-child { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.coop-modal--sm { max-width: 420px; }
.coop-modal-body { padding: 0 var(--space-5) var(--space-4); color: var(--text); font-size: var(--fs-md); line-height: 1.5; }
.coop-modal--sm .coop-form-actions,
.srh-history-modal .coop-form-actions { padding: 0 var(--space-5) var(--space-5); margin-top: 0; }
.coop-form-error {
    background: rgba(198,40,40,0.08);
    border: 1px solid rgba(198,40,40,0.25);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
}
.coop-form-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }

/* ── Détail + historique ───────────────────────────────────── */
/* Fiche détail : plus large que les modales de formulaire (540px) pour que
   les libellés longs (« Souhaite être mentionné », « Dernière synchro Boond »)
   tiennent sur une ligne à côté de leur valeur. */
.coop-modal--detail { max-width: 720px; }
.coop-modal--detail .coop-modal-header h3 { min-width: 0; overflow-wrap: anywhere; }
#coopDetailBody { padding: var(--space-5); }
.coop-detail-info { margin-bottom: var(--space-5); }
/* Grille libellé / valeur : colonne des libellés dimensionnée sur le plus
   long d'entre eux, bornée pour laisser la place aux valeurs. */
.coop-detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--surface-1);
}
.coop-detail-key { color: var(--text-light); font-size: var(--fs-sm); font-weight: 600; }
/* overflow-wrap:anywhere : les URL LinkedIn / e-mails sans espace ne
   débordent plus de la modale sur petit écran. */
.coop-detail-val { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
/* Coopteur + « Changer le coopteur » aligné à droite (admin / RH) */
.coop-detail-referrer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.coop-referrer-note { font-size: var(--fs-sm); margin-top: var(--space-3); }
/* Coopteur sans compte (referrer_status) : étiquette à côté du nom */
.coop-referrer-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 0 6px;
    border-radius: 999px; border: 1px dashed var(--border); color: var(--text-light); background: var(--card); cursor: help; white-space: nowrap; }
.coop-referrer-tag--pending { border-color: #000099; color: #000099; }
/* Réaffectation : Rattacher + Attribuer hors portail */
.srh-row-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.srh-offportal-note { font-size: var(--fs-sm); margin-top: var(--space-3); }
/* Fenêtres « Attribuer hors portail » et « Changer le coopteur » : champs espacés,
   interrupteur toujours à droite de son libellé (pas de retour à la ligne). */
#srhOffportalOverlay .coop-modal { max-width: 500px; }
.srh-offportal-intro { margin-bottom: var(--space-3); }
#srhOffportalBody .coop-field, #coopReferrerBody .coop-field { margin-bottom: var(--space-3); }
#srhOffportalBody .coop-field--inline-question, #coopReferrerBody .coop-field--inline-question { flex-wrap: nowrap; }
#srhOffportalBody .coop-field--inline-question > span:first-child,
#coopReferrerBody .coop-field--inline-question > span:first-child { flex: 1; min-width: 0; }
#srhOffportalBody .toggle-switch, #coopReferrerBody .toggle-switch { flex-shrink: 0; }
/* Entonnoir : titre + bascule « Sorties du vivier », ligne ajoutée teintée */
.srh-funnel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.srh-funnel-extra td { background: rgba(0,0,153,0.04); }
/* Sorties du vivier : pastille dans les comptes de fiches reçues (pleine = comptées à leur sortie, option) */
.srh-vivier-pill { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px;
    background: rgba(245,10,99,0.10); color: #f50a63; white-space: nowrap; cursor: help; position: relative; border: 1px solid transparent; }
/* Comptées à leur date de soumission, pas à leur sortie : bordure pointillée, fond blanc */
.srh-vivier-pill--out { background: #fff; border: 1px dashed #f50a63; }
/* Barre du tableau par période : part comptée + part « sorties du vivier » hachurée
   (pleine si comptée, pointillée en prolongement sinon) */
.srh-bar-stack { display: inline-flex; height: 10px; vertical-align: middle; max-width: calc(100% - 36px); }
.srh-bar-part { height: 100%; background: rgba(245,10,99,0.35); }
.srh-bar-part:first-child { border-radius: 5px 0 0 5px; }
.srh-bar-part:last-child { border-radius: 0 5px 5px 0; }
.srh-bar-part:only-child { border-radius: 5px; }
.srh-bar-part--vivier { background: repeating-linear-gradient(135deg, rgba(245,10,99,0.8) 0 3px, rgba(245,10,99,0.3) 3px 6px); }
.srh-bar-part--out { box-sizing: border-box; border: 1px dashed #f50a63; border-left: 0;
    background: repeating-linear-gradient(135deg, rgba(245,10,99,0.35) 0 2px, #fff 2px 6px); }
.srh-bar-part--out:only-child { border-left: 1px dashed #f50a63; }
/* Mode de datation des KPI : étiquette à côté de la période (blanche = soumission,
   rose = sortie du vivier) et sous-libellé de la carte « Cooptations reçues » */
.srh-dating-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600;
    padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: #2D2E60; cursor: help; white-space: nowrap; }
.srh-dating-tag:empty { display: none; }
.srh-dating-tag.is-vivier { background: rgba(245,10,99,0.10); border-color: rgba(245,10,99,0.35); color: #f50a63; }
.srh-kpi-sub { font-size: var(--fs-xs); font-weight: 600; color: #000099; margin-top: 1px; }
.srh-kpi-sub.is-vivier { color: #f50a63; }
/* Dans une carte de tête : alignée sur le texte au-dessus, sur sa propre ligne */
.srh-kpi .srh-vivier-pill { margin: 4px 0 0; white-space: normal; border-radius: 6px; padding: 2px 8px; line-height: 1.35; text-align: left; }
/* Barre du Suivi RH : à droite, sous la sélection des dates — coopteurs sans compte + synchro Boond */
.srh-toolbar-end { display: flex; align-items: center; gap: var(--space-3); align-self: flex-end; margin-left: auto; flex-shrink: 0; }
@media (max-width: 900px) { .srh-toolbar-end { flex-wrap: wrap; flex-shrink: 1; } }
/* Options KPI empilées (largeur réduite) à gauche de « Synchroniser Boond » */
#suiviRhOffportalToggle { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#suiviRhToolbar .srh-periodbar { min-width: 0; }
.srh-offportal-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.srh-offportal-check input { width: 16px; height: 16px; accent-color: #000099; margin: 0; }
#srhOffportalBody [hidden] { display: none; }
.coop-detail-subtitle { color: var(--primary); font-size: var(--fs-md); margin-bottom: var(--space-3); }

.coop-timeline { list-style: none; padding: 0; margin: 0; }
.coop-timeline-item { display: flex; gap: var(--space-3); padding-bottom: var(--space-4); position: relative; }
.coop-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 6px; top: 16px; bottom: 0;
    width: 2px;
    background: var(--border);
}
.coop-timeline-dot {
    flex: 0 0 14px;
    width: 14px; height: 14px;
    border-radius: 50%;
    margin-top: 2px;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--card);
}
/* Pastille pleine dans la couleur (texte) du badge du statut : le fond pâle
   du badge serait presque invisible sur 14px. */
.coop-timeline-dot[class*="coop-badge--"] { border: 0; }
.coop-timeline-dot.coop-badge--propose         { background: var(--primary); }
.coop-timeline-dot.coop-badge--rdv_en_cours    { background: var(--accent); }
.coop-timeline-dot.coop-badge--vivier          { background: var(--deep-koamaru); }
.coop-timeline-dot.coop-badge--nrp             { background: var(--warning-dark); }
.coop-timeline-dot.coop-badge--a_statuer       { background: var(--warning-dark); }
.coop-timeline-dot.coop-badge--signe           { background: var(--success); }
.coop-timeline-dot.coop-badge--refuse,
.coop-timeline-dot.coop-badge--hors_cible      { background: #546e7f; }
.coop-timeline-dot.coop-badge--erreur_creation { background: var(--danger); }
.coop-timeline-dot.coop-badge--boond           { background: var(--primary); }
.coop-timeline-status { font-size: var(--fs-md); color: var(--text); }
.coop-timeline-body { flex: 1; min-width: 0; }
.coop-timeline-comment { font-size: var(--fs-sm); color: var(--text-light); margin-top: 2px; overflow-wrap: anywhere; }
/* Étapes vs actions (solution A) : couleur de l'étape concernée portée par
   --tl (classe coop-tl--<statut> sur l'élément de liste). */
.coop-tl--propose, .coop-tl--boond { --tl: var(--primary); }
.coop-tl--rdv_en_cours    { --tl: var(--accent); }
.coop-tl--vivier          { --tl: var(--deep-koamaru); }
.coop-tl--nrp, .coop-tl--a_statuer { --tl: var(--warning-dark); }
.coop-tl--signe           { --tl: var(--success); }
.coop-tl--refuse, .coop-tl--hors_cible { --tl: #546e7f; }
.coop-tl--erreur_creation { --tl: var(--danger); }
.coop-timeline-kind {
    margin-right: 6px; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl, var(--primary));
}
.coop-timeline-item--step .coop-timeline-status > strong,
.coop-timeline-item--step .coop-timeline-status { font-weight: 700; }
.coop-timeline-item--action { padding-bottom: var(--space-3); }
.coop-timeline-item--action .coop-timeline-status { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.coop-timeline-item--action .coop-timeline-dot {
    flex: 0 0 12px; width: 12px; height: 12px; margin: 3px 1px 0;
    background: var(--card); border: 2px solid var(--tl, var(--primary));
}
.coop-timeline-date { font-size: var(--fs-xs); color: var(--text-light); margin-top: 2px; }
.coop-timeline-early { font-style: italic; }
/* Historique fusionné (statuts manuels + actions Boond) : tag de source */
.coop-timeline-source {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 9px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}
.coop-timeline-source--manuel { background: rgba(84,110,127,0.10); color: #546e7f; }
.coop-timeline-source--boond  { background: rgba(0,0,153,0.07);   color: var(--primary); }
.coop-timeline-source--silent { background: #ffffff; color: #546e7f; border: 1px dashed var(--text-light); }

@media (max-width: 640px) {
    .coop-field-row { flex-direction: column; gap: 0; }
}

/* Fiche détail sur mobile (breakpoint 640px du design system) : modale plein
   écran, libellé au-dessus de la valeur, actions d'arbitrage empilées en
   pleine largeur (cibles tactiles 44px). */
@media (max-width: 640px) {
    #coopDetailOverlay { padding: 0; align-items: stretch; }
    .coop-modal--detail {
        max-width: none;
        max-height: none;       /* étiré sur toute la hauteur de l'overlay (align-items: stretch) */
        border-radius: 0;
    }
    .coop-modal--detail .coop-modal-header { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
    .coop-modal--detail .coop-modal-header h3 { font-size: var(--fs-lg); }
    .coop-modal--detail .coop-modal-close { min-width: 44px; min-height: 44px; }
    #coopDetailBody { padding: var(--space-4); }
    .coop-detail-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .coop-detail-key { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.3px; }
    .coop-dup-buttons { flex-direction: column; }
    .coop-dup-buttons .coop-btn { width: 100%; justify-content: center; min-height: 44px; }
    .coop-dup-meta { margin-left: 0; }
    .coop-dup-attach { padding: 0; }
    .coop-cv-row .coop-btn { min-height: 44px; }
    .coop-duplicate-actions { padding: var(--space-3); }
    .coop-duplicate-actions .coop-btn { width: 100%; justify-content: center; min-height: 44px; }
}

/* ===== FORMULAIRE : sélecteur d'offre / champs optionnels ===== */
.coop-optional { color: var(--text-light); font-weight: 400; font-size: var(--fs-xs); }
.coop-select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    background: var(--card);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
.coop-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 0, 153, 0.06); }

/* Étiquette "offre" à côté du poste visé dans la liste des cooptations */
.coop-offer-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: rgba(0,0,153,0.07);
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: 4px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ===== CATALOGUE D'OFFRES ===== */
/* Bandeau « dernière collecte HelloWork » : information neutre, lisible par
   tous, sous l'en-tête de la page. */
.offers-sync-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 153, 0.06);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.offers-sync-banner[hidden] { display: none; }
.coop-toolbar-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
/* Interrupteur « Afficher les offres clôturées » : même composant que
   « Afficher le vivier » (Suivi RH), désormais navy lui aussi. */
.srh-vivier-toggle.offers-closed-toggle[hidden] { display: none; }
/* Badge « N masquées » des interrupteurs (offres clôturées, vivier) : garde
   sa place quand il n'y a rien de masqué — l'interrupteur ne change pas de
   largeur et le texte ne se déplace pas. */
.srh-vivier-toggle-count.is-invisible { visibility: hidden; }
/* Compteurs entre parenthèses des titres : chiffres à largeur fixe. */
.srh-count { font-variant-numeric: tabular-nums; }
/* Arbitrages → erreurs de création : message Boond sur 2 lignes max. */
.srh-error-cell { max-width: 420px; }
.srh-error-text {
    color: var(--danger);
    font-size: var(--fs-sm);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* Lignes de hauteur égale : les offres HelloWork (sans Modifier ni
       Supprimer) ont moins de boutons, les cartes restent alignées. */
    grid-auto-rows: 1fr;
    gap: var(--space-4);
}
.offer-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth);
}
.offer-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--surface-2); }
.offer-card--closed { opacity: 0.66; }
.offer-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}
/* Hauteurs réservées : toutes les cartes ont la même taille, quelles que
   soient leurs données (titre court ou long, méta ou description absentes,
   offre ouverte ou clôturée). Afficher / masquer les offres clôturées ne fait
   donc ni grandir ni rétrécir les autres cartes. */
.offer-card-title {
    font-size: var(--fs-lg); color: var(--text); font-weight: 700; line-height: 1.25;
    min-height: calc(2 * 1.25em);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}
/* Pratique · lieu · contrat en puces ; une seule ligne réservée. */
.offer-card-meta {
    display: flex; align-items: center; gap: 6px;
    min-height: 22px; overflow: hidden; white-space: nowrap;
}
.offer-chip {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 2px 8px; border-radius: 20px;
    background: rgba(45,46,96,0.06); color: var(--deep-koamaru);
    font-size: 12px; font-weight: 600; line-height: 1.4;
}
.offer-chip .ic { color: var(--text-light); }
.offer-source-internal { color: var(--text-light); font-size: var(--fs-sm); }
/* Lien vers l'offre HelloWork d'origine : ligne réservée même vide (offre
   créée à la main), pour que toutes les cartes gardent la même hauteur. */
.offer-card-source { min-height: calc(1.4em + 2px); font-size: var(--fs-sm); line-height: 1.4; }
.offer-hw-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.offer-hw-link:hover { color: var(--accent); text-decoration: underline; }
.offer-hw-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.offer-card-desc {
    font-size: var(--fs-sm);
    color: var(--text-light);
    line-height: 1.4;
    min-height: calc(3 * 1.4em);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.offer-card-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}
.offer-card-foot-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
/* Compteur de cooptations mis en avant (pilule navy), discret à zéro. */
.offer-card-count {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 10px; border-radius: 20px;
    background: rgba(0,0,153,0.07); color: var(--primary);
    font-size: 12px; font-weight: 700;
}
.offer-card-count.is-zero { background: transparent; color: var(--text-light); padding-left: 0; }
.offer-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
/* Bouton « Proposer » d'une offre clôturée : garde sa place, invisible. */
.offer-card-placeholder { visibility: hidden; pointer-events: none; }
/* « Proposer un candidat » réutilise .btn-valider (Contributions) ; seuls ses
   espacements sont alignés sur les boutons de la carte (même hauteur). */
.offer-card .btn-valider { padding: 5px 12px; font-size: 12px; line-height: 1.4; border: 1.5px solid transparent; }

.offer-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 9px;
    border: 1px solid transparent;
    white-space: nowrap;
}
/* Même code couleur que les statuts : ouverte = « Signé » (vert), clôturée =
   « Refusé » (gris). */
.offer-badge--open   { background: rgba(46,125,50,0.07);  color: #1b5e20; }
.offer-badge--closed { background: rgba(84,110,127,0.10); color: #546e7f; }

.btn-sm { padding: 5px 10px; font-size: var(--fs-sm); }

/* ===== CV (PDF) ===== */
.coop-cv-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    background: #ffe0ec;
    border-radius: 20px;
    padding: 1px 8px;
    white-space: nowrap;
    margin-left: 4px;
    vertical-align: middle;
    cursor: default;
}
.coop-file { font-size: var(--fs-sm); }
.coop-cv-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.coop-cv-file { font-size: var(--fs-md); color: var(--text); font-weight: 600; }

/* Arbitrage de doublon Boond (fiche consultation §2.5) */
.coop-duplicate-actions {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-3);
    background: #faeeda;
    border: 1px solid rgba(180,83,9,0.25);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.coop-duplicate-actions p { margin: 0; flex: 1 1 260px; }
/* Encadré d'arbitrage : bloc vertical compact (le paragraphe de
   .coop-duplicate-actions, en flex-basis 260px, n'est plus réutilisé ici). */
.coop-dup-box {
    display: flex; flex-direction: column; gap: var(--space-2);
    font-size: var(--fs-sm);
    background: #faeeda;
    border: 1px solid rgba(180,83,9,0.25);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.coop-dup-title { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--warning-dark); }
.coop-dup-review { display: flex; flex-direction: column; gap: var(--space-2); }
.coop-dup-review p, .coop-dup-alert, .coop-dup-hint { margin: 0; flex: none; line-height: 1.4; }
.coop-dup-chip {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px;
    font-size: 12px; font-weight: 700; line-height: 1.5;
    background: rgba(45,46,96,0.07); color: var(--deep-koamaru);
    white-space: nowrap;
}
/* Critère d'alerte = même ambre que NRP / « À statuer » ; fiche détectée = info. */
.coop-dup-chip--alert { background: #faeeda; color: var(--warning-dark); }
.coop-dup-chip--detected { background: rgba(0,0,153,0.07); color: var(--primary); }
.coop-dup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.coop-dup-item {
    background: var(--card); border: 1px solid var(--border, rgba(45,46,96,0.12));
    border-radius: var(--radius-sm, 6px); padding: 6px 8px;
}
.coop-dup-item:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.coop-dup-item--taken { opacity: 0.55; }
.coop-dup-pick { display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; }
.coop-dup-pick input { margin: 3px 0 0; flex: none; }
.coop-dup-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.coop-dup-meta { margin: 2px 0 0 22px; font-size: var(--fs-xs); color: var(--text-light); }
.coop-dup-attach {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0; padding: 0 8px; cursor: pointer;
}
.coop-dup-attach input[type="radio"] { margin: 0; }
.coop-dup-attach .form-input { width: 8em; padding: 2px 8px; height: auto; }
.coop-dup-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.coop-dup-legend { margin: 0; font-size: var(--fs-xs); }

/* ===== CHALLENGE & CLASSEMENT ===== */
.classement-table th.classement-num,
.classement-table td.classement-num,
.classement-table th.classement-pts,
.classement-table td.classement-pts { text-align: right; }
.classement-rank { font-size: var(--fs-lg); font-weight: 700; text-align: center; }
.classement-pts { font-weight: 800; color: var(--primary); font-size: var(--fs-lg); }
.classement-num { color: var(--text-light); }

.classement-user { display: flex; align-items: center; gap: var(--space-3); }
.classement-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface-accent);
    color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 700;
    flex-shrink: 0;
}
.classement-name { font-weight: 600; color: var(--text); }
.classement-you {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--accent); color: #fff; border-radius: var(--radius-full);
    padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.classement-row-me { background: rgba(245,10,99,0.05); }
.classement-table tbody tr { transition: background var(--transition-smooth); }

/* ===== Accessibilité : neutralise les mouvements si l'utilisateur le demande ===== */
@media (prefers-reduced-motion: reduce) {
    .coop-table tbody tr,
    .btn-icon-detail,
    .coop-modal-close,
    .offer-card,
    .classement-table tbody tr {
        transition: none;
    }
    .btn-icon-detail:hover,
    .offer-card:hover,
    .coop-modal-close:hover {
        transform: none;
    }
}

/* ============================================================
   SUIVI RH (page de pilotage cooptation — admin/RH)
   ============================================================ */
.srh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.srh-kpi {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 16px 18px;
}
.srh-kpi-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--accent, #f50a63);
}
.srh-kpi-label {
    margin-top: 4px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}
.srh-kpi-hint {
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-light);
}

/* KPI de tête regroupés par famille : Nombre de cooptations (navy), Transformation (rose),
   Temps passé (Deep Koamaru), À traiter (neutre). Chaque famille : filet de
   couleur, titre (une ligne), cartes, puis liens vers le détail en pied. La
   valeur des cartes reprend la couleur de la famille.
   Cartes uniformes : même largeur (110 px min., part égale de l'espace
   restant, plafonnée à 170 px pour qu'une famille seule sur sa ligne ne
   s'étire pas), même hauteur (136 px min., familles étirées, en-têtes d'une
   ligne), contenu aligné en haut. */
.srh-kpi-groups { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; margin-bottom: 24px; }
.srh-kpi-group {
    --srh-group-color: #2D2E60;
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 12px 14px 14px;
    background: var(--card); border: 1px solid var(--border);
    border-top: 3px solid var(--srh-group-color);
    border-radius: var(--radius-md, 10px);
}
/* Base = N × 110 px + (N − 1) × 10 px d'écart + 30 px (marges 2 × 14 + bordures
   2 × 1, box-sizing: border-box). Facteur de croissance = N : l'espace restant
   est réparti à parts égales entre CARTES, donc toutes les cartes d'une rangée
   ont la même largeur, quelle que soit leur famille. */
.srh-kpi-group--volume     { --srh-group-color: #000099; flex: 4 1 500px; max-width: calc(4 * var(--srh-kpi-card-max, 170px) + 60px); }
.srh-kpi-group--conversion { --srh-group-color: #f50a63; flex: 2 1 260px; max-width: calc(2 * var(--srh-kpi-card-max, 170px) + 40px); }
.srh-kpi-group--durations  { --srh-group-color: #2D2E60; flex: 1 1 140px; max-width: calc(var(--srh-kpi-card-max, 170px) + 30px); }
.srh-kpi-group--actions    { --srh-group-color: rgba(45,46,96,0.35); flex: 5 1 620px; max-width: calc(5 * var(--srh-kpi-card-max, 170px) + 70px); }
/* max-width = N × largeur max. d'une carte + (N − 1) × 10 + 30. Largeur max. =
   170 px, ou la largeur de la carte la plus étroite quand les familles passent
   sur plusieurs lignes (--srh-kpi-card-max, posé par suivi-rh.js,
   _srhEqualizeKpiCards) : toutes les cartes gardent alors la même largeur. */
.srh-kpi-group-title {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.4;
    text-transform: uppercase; color: var(--srh-group-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srh-kpi-group--actions .srh-kpi-group-title { color: var(--text-light); }
/* Pied : liens « Voir le détail → » / « Relances → » / « Arbitrages → ». */
.srh-kpi-group-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; margin-top: -2px; }
.srh-kpi-group-links { display: contents; }
.srh-kpi-group-link {
    min-height: 28px; padding: 4px 8px;
    border: none; border-radius: var(--radius-sm, 6px); background: transparent;
    font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--primary);
    cursor: pointer; white-space: nowrap;
}
.srh-kpi-group-link:hover { background: rgba(0,0,153,0.06); color: var(--accent); }
.srh-kpi-group-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Cartes : une ligne par famille, largeur partagée (110 à 170 px) ; elles
   prennent toute la hauteur disponible et alignent leur contenu en haut
   (les cartes cliquables sont des <button>, qui centrent sinon). */
.srh-kpi-group-cards { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.srh-kpi-group-cards > .srh-kpi {
    flex: 1 1 0; min-width: 110px; min-height: var(--srh-kpi-card-minh, 136px);
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: 12px 14px; text-align: left;
}
.srh-kpi-group .srh-kpi-label, .srh-kpi-group .srh-kpi-hint { overflow-wrap: anywhere; }
.srh-kpi-group .srh-kpi-hint { font-size: 11px; line-height: 1.35; }  /* micro-légende (échelle DESIGN_SYSTEM §3) */
.srh-kpi-group .srh-kpi-value { font-size: 28px; color: var(--srh-group-color); }  /* Chiffre KPI : 28px (échelle DESIGN_SYSTEM §3) */
.srh-kpi-group--actions .srh-kpi-value { color: #2D2E60; }
/* « Voir les fiches → » calé en bas de la carte, à la même hauteur partout. */
.srh-kpi-group .srh-kpi-drill-cue { margin-top: auto; padding-top: var(--space-2); }
@media (max-width: 900px) {
    .srh-kpi-group { flex-basis: 100%; max-width: none; }
    .srh-kpi-group-link { min-height: 44px; }
}
/* Mobile : grille de 2 colonnes — toutes les cartes à la même largeur, y
   compris une carte seule sur sa ligne (Temps passé, 5e carte d'À traiter). */
@media (max-width: 640px) {
    .srh-kpi-group-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .srh-kpi-group-cards > .srh-kpi { min-width: 0; }
}

/* Drill-down : carte cliquable ouvrant la liste des fiches de la mesure */
button.srh-kpi--drill {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
button.srh-kpi--drill:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}
button.srh-kpi--drill:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.srh-kpi-drill-cue {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
button.srh-kpi--drill:hover .srh-kpi-drill-cue,
button.srh-kpi--drill:focus-visible .srh-kpi-drill-cue { opacity: 1; }
@media (hover: none) { .srh-kpi-drill-cue { opacity: 1; } }

.coop-modal--wide { max-width: 860px; }
.srh-drill-unmatched {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.srh-section-title {
    margin: 28px 0 10px;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}
/* Cellule de la barre « cooptations par période » (.srh-bar-stack) — repère
   visuel, la valeur chiffrée reste lue par les lecteurs d'écran. */
.srh-bar-cell {
    position: relative;
    min-width: 160px;
}
.srh-bar-value {
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Texte d'accompagnement sous un titre de section Suivi RH. */
/* Texte d'aide des sections du Suivi RH. Interligne et espacements fixes,
   selon ce qui précède : titre seul (6px), en-tête titre + période (6px),
   tableau ou graphique (8px) — plus de marge négative qui faisait chevaucher
   le titre quand il est dans un en-tête (.srh-section-head). */
.srh-section-hint {
    margin: 0 0 12px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-light);
}
.srh-section-title + .srh-section-hint { margin-top: -4px; }
.srh-section-head + .srh-section-hint { margin-top: 6px; }
.coop-table-wrap + .srh-section-hint,
.srh-trend-chart + .srh-section-hint { margin-top: 8px; }

/* Pastille de compteur sur les onglets du Suivi RH (Arbitrages, Relances).
   Masquée quand le compteur est à zéro (cf. _srhSetTabCount). */
.srh-tab-count {
    display: inline-block;
    margin-left: 6px;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(180,83,9,0.12);
    color: var(--warning-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
}
.tab-btn.active .srh-tab-count {
    background: rgba(255,255,255,0.22);
    color: inherit;
}

/* Réaffectation des fiches Boond sans coopteur (Suivi RH → Arbitrages). */
/* Sélecteur de coopteur avec recherche (Suivi RH → Réaffectation) */
.srh-combo { position: relative; min-width: 220px; }
.srh-combo-input { width: 100%; }
.srh-combo.has-value .srh-combo-input { border-color: var(--primary); font-weight: 600; }
.srh-combo-list {
    position: fixed; z-index: 1000;
    max-height: 240px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
    background: var(--card); border: 1px solid var(--border, rgba(45,46,96,0.15));
    border-radius: var(--radius-sm, 6px); box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.12));
    min-width: 260px;
}
.srh-combo-opt, .cls-pick-opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 5px 10px; cursor: pointer; line-height: 1.3; }
.srh-combo-opt.is-active, .srh-combo-opt:hover, .cls-pick-opt.is-active, .cls-pick-opt:hover { background: rgba(0,0,153,0.07); }
.srh-combo-opt.is-selected .srh-combo-name { color: var(--primary); }
.srh-combo-name { font-weight: 600; font-size: var(--fs-sm); }
.srh-combo-mail { font-size: var(--fs-xs); color: var(--text-light); }
.srh-combo-hint {
    font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px;
    background: rgba(180,83,9,0.12); color: var(--warning-dark);
}
.srh-combo-opt mark, .cls-pick-opt mark { background: rgba(245,10,99,0.18); color: inherit; padding: 0; }
.srh-combo-empty { padding: 6px 10px; font-size: var(--fs-sm); color: var(--text-light); }
.srh-source-detail {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-xs);
    background: var(--surface-1);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Pop-up de rattachement manuel d'une fiche Boond (Suivi RH → Arbitrages) */
#srhAttachOverlay .coop-form-actions { flex-wrap: wrap; }
.srh-attach-changes { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--text-light); }
.srh-attach-changes li { margin-bottom: 4px; }

/* ===== SUIVI RH — KPI : sections par thème (toujours ouvertes) ===== */
.srh-fold {
    margin-top: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--card);
}
.srh-fold-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}
.srh-fold-title { margin: 0; font-weight: 700; font-size: 16px; color: var(--text); }
.srh-fold-meta { margin-left: auto; font-size: var(--fs-sm, 13px); color: var(--text-light); }
.srh-fold-body { padding: 0 var(--space-5) var(--space-5); }
.srh-fold-body > div:first-child .srh-section-title,
.srh-fold-body > div:first-child .srh-kpi-grid { margin-top: 0; }
.srh-row-unmatched td { background: var(--surface-2); }
.srh-kpi-notice { margin-top: var(--space-3); }
@media (max-width: 640px) {
    .srh-fold-summary { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
    .srh-fold-meta { margin-left: 0; width: 100%; }
    .srh-fold-body { padding: 0 var(--space-4) var(--space-4); }
}

/* ===== SUIVI RH — regroupement mois / trimestre / année ===== */
.srh-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.srh-section-head .srh-section-title { margin-bottom: 0; }
/* Côté droit de l'en-tête : libellé de période + option (taux glissant). */
.srh-section-head-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.srh-section-head-tools .srh-section-hint { margin: 0; }

/* ============================================================
   LISTE DES COOPTATIONS — filtres & tri
   ============================================================ */
.coop-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.coop-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 140px;
}
.coop-filter--search { flex: 2 1 220px; }
.coop-filter--narrow { flex: 0 1 120px; }
.coop-filter label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}
.coop-filter .coop-select { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.coop-filters-reset { align-self: flex-end; height: 34px; flex: 0 0 auto; }
.coop-filters-reset:disabled { opacity: .45; cursor: default; }

/* En-têtes triables : bouton plein en-tête, hérite du style des <th> */
.coop-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.coop-sort:hover, .coop-sort.is-active { color: var(--primary); }
.coop-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.coop-sort-arrow { font-size: var(--fs-xs); opacity: .45; }
.coop-sort.is-active .coop-sort-arrow { opacity: 1; }

.coop-empty--filtered { padding: var(--space-8) var(--space-4); }
.coop-empty--filtered h3 { font-size: var(--fs-md); }

@media (max-width: 640px) {
    .coop-filter, .coop-filter--search { flex: 1 1 100%; }
    .coop-filters-reset { width: 100%; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   SUIVI RH — période (boutons), plage personnalisée, granularité
   ============================================================ */
.srh-periodbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    flex: 1 1 auto;
}
.srh-seg {
    display: inline-flex;
    flex-wrap: wrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 2px;
}
.srh-seg-btn {
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-light);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
}
.srh-seg-btn:hover { color: var(--primary); }
.srh-seg-btn.active { background: var(--primary); color: var(--card); }
.srh-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Suivi RH → Cooptations par consultant : Top N (préréglages + valeur libre). */
.srh-top-n { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.srh-top-n-custom { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); font-weight: 600; color: var(--text-light); }
.srh-top-n-custom input {
    width: 64px; padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
    font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--card);
}
.srh-top-n-custom input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.srh-rank { display: inline-block; min-width: 22px; margin-right: var(--space-2); color: var(--text-light); font-size: var(--fs-xs, 11px); font-weight: 700; }
.srh-top-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3);
}
.srh-top-bar .srh-top-n { margin-left: auto; }
.srh-top-more { font-size: var(--fs-sm); color: var(--text-light); }
.srh-link-btn {
    border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
    color: var(--primary); text-decoration: underline; cursor: pointer;
}
.srh-link-btn:hover { color: var(--accent); }
.srh-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
    .srh-top-n-custom input { min-height: 44px; }
    .srh-link-btn { min-height: 44px; }
}
.srh-custom-range {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-light);
}
.srh-custom-range[hidden] { display: none; }
.srh-custom-range .coop-select { width: auto; padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.srh-granularity-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-light);
}
/* Curseur de granularité à 5 crans : piste remplie jusqu'au cran courant
   (--srh-gran-pct, suivi-rh.js), libellés cliquables centrés sous chaque cran.
   Colonnes de 64 px ; la piste est rognée d'une demi-colonne de chaque côté
   pour que chaque cran tombe au centre de son libellé. */
.srh-gran-slider { width: 320px; max-width: 100%; }
.srh-gran-slider input[type="range"] {
    --srh-gran-pct: 50%;
    display: block; width: calc(100% - 64px); margin: 0 32px; height: 24px;
    background: transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.srh-gran-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--primary) var(--srh-gran-pct), var(--border) var(--srh-gran-pct));
}
.srh-gran-slider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
.srh-gran-slider input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--primary); }
.srh-gran-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
    background: #fff; border: 3px solid var(--primary); box-shadow: var(--shadow-sm);
}
.srh-gran-slider input[type="range"]::-moz-range-thumb {
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 3px solid var(--primary); box-shadow: var(--shadow-sm);
}
.srh-gran-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.srh-gran-ticks { display: grid; grid-template-columns: repeat(5, 1fr); }
.srh-gran-tick {
    min-height: 24px; padding: 0 2px; border: none; background: transparent;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--text-light);
    text-align: center; white-space: nowrap; cursor: pointer;
}
.srh-gran-tick:hover { color: var(--primary); }
.srh-gran-tick.is-active { color: var(--primary); font-weight: 800; }
@media (max-width: 900px) {
    .srh-granularity-field { flex-wrap: wrap; }
    .srh-gran-slider input[type="range"] { height: 44px; }
    .srh-gran-tick { min-height: 44px; }
}
.srh-period-label { font-size: var(--fs-xs); color: var(--text-light); }
.srh-section-hint--inline { margin: 0; }
.srh-series-wrap { max-height: 480px; overflow-y: auto; }
.srh-series-wrap thead th { position: sticky; top: 0; z-index: 1; }
.srh-row-empty td { opacity: .55; }

.srh-via { font-size: var(--fs-xs); opacity: .8; }
.srh-empty-line { padding: var(--space-2) 0 var(--space-1); }

@media (max-width: 640px) {
    .srh-seg { width: 100%; }
    .srh-seg-btn { flex: 1 1 auto; padding: var(--space-1) var(--space-2); }
}
.srh-section-head--spaced { margin: var(--space-8) 0 var(--space-2); }
.srh-section-head--spaced .srh-section-title { margin: 0; }
.srh-section-head--spaced + .srh-section-hint { margin-top: 0; }

/* Drill-down des tableaux KPI : chiffre cliquable */
.srh-cell-drill {
    border: 0;
    background: none;
    padding: 1px var(--space-2);
    margin: -1px calc(-1 * var(--space-2));
    font: inherit;
    color: var(--primary);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.srh-cell-drill:hover { background: var(--surface-2); text-decoration-style: solid; }
.srh-cell-drill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.srh-bar-value .srh-cell-drill { font-weight: inherit; }

/* Interrupteur « Afficher le vivier » (section inactivité du Suivi RH) :
   réutilise .toggle-switch/.toggle-slider (config.css), dans une pastille
   bordée pour rester visible à côté du titre de section. */
.srh-vivier-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.srh-vivier-toggle:hover { border-color: var(--primary); }
.srh-vivier-toggle.is-on { border-color: var(--primary); background: rgba(0,0,153,0.06); }
.srh-vivier-toggle-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.srh-vivier-toggle-count {
    font-size: var(--fs-xs, 12px);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,153,0.10);
    color: var(--primary);
}
.srh-vivier-toggle-state {
    min-width: 26px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--text-light);
}
.srh-vivier-toggle.is-on .srh-vivier-toggle-state { color: var(--primary); }
.srh-vivier-toggle .toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.srh-vivier-toggle.is-disabled { opacity: .55; cursor: not-allowed; }
.srh-vivier-toggle.is-disabled:hover { border-color: var(--border); }
.srh-vivier-toggle .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .srh-vivier-toggle { transition: none; } }

/* ===== Période personnalisée : barre glissante 2 poignées (range-slider.js) ===== */
/* Placée sur sa propre ligne, sous les boutons Mois/Trimestre/Année/… */
.srh-periodbar > .srh-seg { order: 1; }
.srh-periodbar > .srh-granularity-field { order: 2; }
.srh-periodbar > .srh-period-label,
.srh-periodbar > .srh-period-meta { order: 3; }
.srh-period-meta { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.srh-periodbar > .srh-custom-range {
    order: 4;
    flex: 1 0 100%;
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
}
.srh-periodbar > .srh-custom-range[hidden] { display: none; }
.srh-custom-range .drs-host { flex: 1 1 320px; min-width: 0; }

.drs { --drs-h: 6px; --drs-thumb: 18px; width: 100%; }
.drs-values {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    font-size: var(--fs-sm); font-weight: 700; color: var(--text);
    margin-bottom: var(--space-2);
}
.drs-sep { color: var(--text-light); }
/* Saisie manuelle des dates (synchronisée avec les poignées, range-slider.js). */
.drs-date {
    min-height: 36px; padding: 4px 8px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm, 6px);
    background: var(--card); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 600;
}
.drs-date:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,0,153,0.08); }
@media (max-width: 900px) { .drs-date { min-height: 44px; } }
.drs-len { margin-left: auto; font-size: var(--fs-xs, 12px); font-weight: 600; color: var(--text-light); }
.drs-track { position: relative; height: var(--drs-thumb); }
.drs-rail, .drs-fill {
    position: absolute; top: 50%; height: var(--drs-h);
    transform: translateY(-50%); border-radius: 999px;
}
.drs-rail { left: 0; right: 0; background: var(--border); }
.drs-fill { background: var(--primary); }
.drs-input {
    position: absolute; inset: 0; width: 100%; height: var(--drs-thumb);
    margin: 0; background: none; pointer-events: none;
    -webkit-appearance: none; appearance: none; z-index: 3;
}
.drs-input--to { z-index: 4; }
.drs-input::-webkit-slider-runnable-track { background: none; border: 0; height: var(--drs-thumb); }
.drs-input::-moz-range-track { background: none; border: 0; }
.drs-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
    width: var(--drs-thumb); height: var(--drs-thumb); border-radius: 50%;
    background: var(--card); border: 3px solid var(--primary); box-shadow: var(--shadow-sm);
}
.drs-input::-moz-range-thumb {
    pointer-events: auto; cursor: grab;
    width: var(--drs-thumb); height: var(--drs-thumb); border-radius: 50%;
    background: var(--card); border: 3px solid var(--primary); box-shadow: var(--shadow-sm);
}
.drs-input:active::-webkit-slider-thumb { cursor: grabbing; }
.drs-input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.drs-input:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.drs-ticks { position: relative; height: 16px; margin-top: 4px; }
.drs-tick {
    position: absolute; transform: translateX(-50%);
    font-size: 11px; color: var(--text-light); white-space: nowrap;
}
.drs-tick::before {
    content: ""; position: absolute; left: 50%; top: -6px;
    width: 1px; height: 5px; background: var(--border);
}
.drs-tick:first-child { transform: none; }
.drs-tick:first-child::before { left: 0; }
@media (max-width: 640px) {
    .srh-periodbar > .srh-custom-range { flex-direction: column; align-items: stretch; }
    /* En colonne, la base de 320px deviendrait une hauteur (grand vide sous le curseur). */
    .srh-periodbar > .srh-custom-range .drs-host { flex: 0 0 auto; }
}

/* ===== Challenge : confettis quand l'utilisateur est 1er d'un podium (sans librairie) ===== */
.cls-pd-col--1.is-me { position: relative; overflow: visible; }
.cls-confetti { position: absolute; inset: 0; pointer-events: none; }
.cls-confetti i {
    position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
    animation: cls-confetti-fall var(--dur, 2.2s) cubic-bezier(.25,.6,.4,1) var(--delay, 0s) forwards;
}
@keyframes cls-confetti-fall {
    0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(var(--dx, 0px), 140px, 0) rotate(var(--rot, 540deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .cls-confetti { display: none; }
}

/* ===== Cibles tactiles ≥ 44px en mobile (design system, règle d'or n°8) =====
   Contrôles propres au domaine cooptation : la règle globale ne couvre que
   .btn, .tab-btn et .ms-item. */
@media (max-width: 900px) {
    .srh-seg-btn,
    .coop-sort,
    .srh-vivier-toggle,
    .coop-filters-reset,
    .coop-btn,
    .btn-icon-detail,
    .offer-card .btn-valider { min-height: 44px; }
    .srh-cell-drill { min-height: 44px; min-width: 44px; }
}

/* ===== Les règles (coop-regles.js) — anciens styles inline ===== */
.coop-regles-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.coop-regles-step { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.coop-regles-step-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.coop-regles-item-title { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.coop-regles-item-text { font-size: 13px; color: var(--text); line-height: 1.6; }
.coop-regles-info {
    margin-top: 12px; padding: 9px 12px; background: var(--card-surface);
    border-radius: 6px; border-left: 3px solid var(--accent);
    font-size: 12px; color: var(--text-light);
}
.coop-regles-kicker {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-light); margin-bottom: 10px;
}
.coop-regles-qui { display: flex; gap: 9px; margin-bottom: 8px; font-size: 13px; color: var(--text); }
.coop-regles-check { color: var(--success); font-weight: 700; flex-shrink: 0; }
.coop-regles-bref { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 14px; }
.coop-regles-cta { margin-top: 14px; }
.coop-regles-ok { color: var(--success); }
.coop-regles-muted { color: var(--text-light); }
.coop-regles-col-status { width: 190px; }

/* Classement : colonne rang */
.classement-col-rank { width: 56px; }

/* Icône alignée sur le texte (message « Enregistré » du webhook Teams) */
.coop-inline-icon { vertical-align: middle; margin-right: 4px; }

/* ===== Configuration → Paramétrage : section « Cooptation » =====
   Regroupe toutes les cartes du domaine, séparées des cartes Contributions. */
.coop-config-section {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--border);
}
.coop-config-section[hidden] { display: none; }
.coop-config-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}
.coop-config-section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--accent);
}
.coop-config-section-hint { margin: 0 0 8px; font-size: 13px; color: var(--text-light); }
/* Groupes dans l'ordre du processus : Offres → Cooptations → Notifications → KPI → Challenge. */
.coop-config-group { margin-top: 32px; }
.coop-config-group-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 700; color: var(--deep-koamaru);
}
.coop-config-group-hint { margin: 6px 0 0; font-size: 13px; color: var(--text-light); }
.coop-config-group > .mapping-card { margin-top: 16px; }
.coop-config-field { margin: 16px 0 0; max-width: 640px; }
.coop-config-input { width: 100%; font-family: monospace; font-size: 13px; }
.coop-config-saved { font-size: 13px; font-weight: 600; color: var(--success); visibility: hidden; }
.coop-config-saved.is-visible { visibility: visible; }
.coop-config-saved.is-error { color: var(--danger); }

/* ===== Offres : fiche « Consulter l'offre » (texte formaté) =====
   Modale élargie : les descriptions HelloWork sont souvent longues. */
.offer-view-modal { max-width: 720px; }
.offer-view { padding: var(--space-5); }
.offer-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.offer-view-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--deep-koamaru); }
.offer-view-head .offer-badge { flex: none; margin-top: 3px; }
.offer-view-meta { margin-top: 12px; flex-wrap: wrap; overflow: visible; white-space: normal; }
/* Actions (Partager, Proposer) alignées à gauche, sur la ligne du compteur. */
.offer-view-info { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.offer-view-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.offer-view-label {
    margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-light);
}
/* Lien HelloWork : en tête de section, au-dessus du libellé « Description ». */
.offer-view-source {
    margin: 0 0 16px; padding: 8px 12px;
    background: rgba(0,0,153,0.05); border-left: 3px solid var(--primary);
    font-size: var(--fs-md);
}
.offer-view-desc { font-size: var(--fs-md); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.offer-view-desc p { margin: 0 0 10px; }
.offer-view-desc ul, .offer-view-desc ol { margin: 0 0 12px; padding-left: 22px; }
.offer-view-desc ul { list-style: disc; }
.offer-view-desc ol { list-style: decimal; }
.offer-view-desc strong { font-weight: 700; color: var(--deep-koamaru); }
/* Titres de section HelloWork (« Les missions du poste », « Le profil recherché »…). */
.offer-desc-title { margin: 20px 0 8px; font-size: 16px; font-weight: 700; color: var(--primary); }
.offer-view-desc > .offer-desc-title:first-child { margin-top: 0; }
.offer-view-desc li { margin-bottom: 4px; }
.offer-view-desc > :last-child { margin-bottom: 0; }
.offer-view-empty { color: var(--text-light); font-style: italic; }
.offer-modal-actions { padding: 0 var(--space-5) var(--space-5); margin-top: 0; flex-wrap: wrap; }
/* Fiche offre : « Proposer un candidat » (.btn-valider, Contributions) à la
   même taille que les .btn voisins — surcharge limitée à cette modale. */
.offer-view-modal .btn-valider { padding: var(--space-2) var(--space-4); font-size: 13px; line-height: normal; }
.offer-view-modal .btn,
.offer-view-modal .btn-valider { min-height: 36px; }
@media (max-width: 900px) {
    .offer-view-modal .btn,
    .offer-view-modal .btn-valider { min-height: 44px; }   /* cible tactile */
}

/* ===== Offres : fenêtre « Partager l'offre » ===== */
.offer-share-name { margin: 0 0 var(--space-4); font-size: var(--fs-md); font-weight: 700; color: var(--deep-koamaru); }
.offer-share-row { display: flex; gap: 8px; }
.offer-share-row input { flex: 1; min-width: 0; font-size: 13px; }
.offer-share-row .btn { flex: none; min-height: 44px; }
.coop-field .offer-share-row input[readonly] { border: 1px solid var(--border); }
.offer-copy-buffer { position: fixed; top: -1000px; left: 0; opacity: 0; }
@media (max-width: 640px) {
    .offer-share-row { flex-direction: column; }
    .offer-view-head { flex-direction: column; }
}
/* Configuration → Cooptation : modèle du message de partage. */
.coop-config-textarea { width: 100%; min-height: 180px; resize: vertical; font-size: 13px; line-height: 1.5; }

/* ===== Challenge non ouvert aux consultants =====
   Bandeau « bientôt disponible » (consultants) et mentions « Non visible par
   les consultants » (admin / RH). */
.coop-soon-banner {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: var(--space-5); padding: 20px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #2D2E60 0%, #000099 100%);
    color: #fff; box-shadow: var(--shadow-md);
}
.coop-soon-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.12); color: #ff7aa8;
}
.coop-soon-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.coop-soon-text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.88); }
/* Page « à venir » du domaine Cooptation (service non ouvert, cooptation.js). */
.coop-soon-list {
    list-style: none; margin: 0 0 var(--space-5); padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4);
}
.coop-soon-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 16px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.coop-soon-item-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,153,0.08); color: var(--primary);
}
.coop-soon-item strong { display: block; font-size: 15px; color: var(--primary); margin-bottom: 2px; }
.coop-soon-item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-light); }
.coop-soon-contact { margin: 0; font-size: 14px; color: var(--text-light); }
/* Œil barré sur le sélecteur de domaine (admin / RH, service non ouvert). */
.domain-btn .nav-restricted { margin-left: 0; }
@media (max-width: 640px) {
    .coop-soon-banner { flex-direction: column; align-items: flex-start; padding: 16px; }
}

.coop-hidden-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: var(--space-4); padding: 10px 14px;
    border: 1px dashed rgba(45,46,96,0.35); border-radius: var(--radius-md);
    background: rgba(45,46,96,0.05); color: var(--deep-koamaru);
    font-size: 13px; line-height: 1.5;
}
.coop-hidden-note .ic { flex: none; margin-top: 2px; }
.coop-hidden-pill {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
    padding: 2px 8px; border-radius: 20px;
    background: rgba(45,46,96,0.08); color: var(--deep-koamaru);
    font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap;
}
/* Onglet de navigation masqué aux consultants (admin / RH). */
.nav-item[hidden] { display: none; }
.nav-restricted { display: inline-flex; margin-left: auto; opacity: 0.7; }
.sidebar.collapsed .nav-restricted { display: none; }

/* Configuration → Cooptation : interrupteur de visibilité. */
.coop-config-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.coop-config-toggle input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* ===== Sommaire en rail vertical (js/modules/page-rail.js) =====
   « Les règles » et Configuration → Paramétrage. Collant en haut à gauche du
   contenu, sous la barre du haut. Le rail (hauteur nulle) ne pousse pas le
   contenu : l'hôte (.page-rail-host) réserve sa largeur à gauche. Au repos :
   points semi-transparents. Au survol ou au focus clavier : panneau blanc
   avec les libellés, par-dessus le contenu. Le point actif suit le défilement. */
.page-rail-host { padding-left: 40px; }
/* --page-rail-top : décalage sous les éléments collants de la page (barre du
   haut, et barre de période de Suivi RH — réglé par suivi-rh.js). */
.page-rail { position: sticky; top: var(--page-rail-top, 76px); z-index: 40; height: 0; margin-left: -40px; }
.page-rail-panel {
    position: absolute; top: 0; left: 0;
    max-height: calc(100vh - 96px); overflow-y: auto;
    padding: 4px; border-radius: 14px;
    background: transparent; opacity: 0.55;
    scrollbar-width: none;
    transition: opacity var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.page-rail-panel::-webkit-scrollbar { display: none; }
.page-rail-panel:hover,
.page-rail-panel:focus-within {
    opacity: 1; background: rgba(255,255,255,0.97);
    box-shadow: var(--shadow-md);
}
.page-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.page-rail-link {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-height: 30px; padding: 4px;
    border: none; border-radius: 10px; background: transparent;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--deep-koamaru);
    text-align: left; white-space: nowrap; cursor: pointer;
}
.page-rail-label {
    max-width: 0; opacity: 0; overflow: hidden; text-overflow: ellipsis;
    transition: max-width var(--transition-fast), opacity var(--transition-fast);
}
.page-rail-panel:hover .page-rail-label,
.page-rail-panel:focus-within .page-rail-label { max-width: 260px; opacity: 1; padding-right: 6px; }
.page-rail-dot {
    flex: none; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(45,46,96,0.35);
    transition: transform var(--transition-fast), background var(--transition-fast);
}
/* Sous-entrée (ex. groupes de la section Cooptation) : point plus petit,
   libellé en retrait et plus léger. */
.page-rail-link--sub { font-weight: 500; font-size: 12px; }
.page-rail-link--sub .page-rail-dot { width: 6px; height: 6px; margin: 0 2px; }
.page-rail-panel:hover .page-rail-link--sub .page-rail-label,
.page-rail-panel:focus-within .page-rail-link--sub .page-rail-label { padding-left: 10px; }
.page-rail-link:hover { background: rgba(0,0,153,0.06); color: var(--primary); }
.page-rail-link:hover .page-rail-dot { background: var(--primary); }
.page-rail-link.is-active { color: var(--primary); }
.page-rail-link.is-active .page-rail-dot {
    background: var(--primary); transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(0,0,153,0.15);
}
.page-rail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Ancre : la section s'arrête juste sous les éléments collants. */
.page-rail-target { scroll-margin-top: var(--page-rail-top, 76px); }
@media (max-width: 900px) {
    .page-rail-host { padding-left: 36px; }
    .page-rail { top: var(--page-rail-top, 66px); margin-left: -36px; }
    .page-rail-link { min-height: 44px; }
    .page-rail-target { scroll-margin-top: var(--page-rail-top, 70px); }
}
@media (prefers-reduced-motion: reduce) {
    .page-rail-panel, .page-rail-label, .page-rail-dot { transition: none; }
}

/* Suivi RH — tableau par période : chiffre avec infobulle de comparaison à la
   période précédente (tooltip.js). Souligné pointillé pour signaler le survol. */
.srh-cell-tip { cursor: help; border-bottom: 1px dotted currentColor; }

/* Suivi RH — évolution du taux de transformation : écart en points vs la
   période précédente (▲ hausse en bleu marine, ▼ baisse en rose, = stable) —
   couleurs de la charte uniquement : l'écran KPI reste à 3 couleurs. */
.srh-trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; cursor: help; }
.srh-trend--up   { color: var(--primary); }
.srh-trend--down { color: var(--accent); }
.srh-trend--flat,
.srh-trend--na   { color: var(--text-light); font-weight: 600; }
.srh-trend--na:not([data-tooltip]) { cursor: default; }
/* Libellé ou taux avec détail au survol (étapes concernées). */
.srh-has-tip { border-bottom: 1px dotted currentColor; }

/* Suivi RH — graphique d'évolution du taux de transformation (Chart.js). */
.srh-trend-chart canvas { max-width: 100%; }
.srh-trend-chart {
    position: relative; height: 280px; margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3); background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
}
@media (max-width: 640px) { .srh-trend-chart { height: 240px; padding: var(--space-2); } }

/* Suivi RH → Arbitrages → Réaffectation : rôle des deux reprises Boond. */
.srh-reassign-help {
    margin: 0 0 var(--space-4); padding: 10px 14px;
    background: rgba(45,46,96,0.04); border-left: 3px solid #2D2E60; border-radius: var(--radius-sm, 6px);
    font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
}
.srh-reassign-help dt { font-weight: 700; color: var(--primary); }
.srh-reassign-help dd { margin: 2px 0 8px; color: var(--text-light); }
.srh-reassign-help dd:last-child { margin-bottom: 0; }
.srh-reassign-help dd strong { color: var(--text); }
/* Bouton « Importer en mode démo » : masqué hors localhost (attribut hidden). */
.coop-toolbar .btn[hidden] { display: none; }

/* Suivi RH → import Boond : résumé de l'aperçu et option de notification. */
.srh-backfill-summary { margin: 4px 0 12px; padding-left: 20px; list-style: disc; }
.srh-backfill-summary li { margin-bottom: 2px; }
.srh-backfill-notify { margin-bottom: 4px; font-weight: 600; }
.srh-backfill-notify input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Suivi RH → Réaffectation : en-tête de liste + option « Données fictives »
   (démo, localhost uniquement — suivi-rh.js, _srhShown). */
.srh-reassign-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.srh-reassign-head .srh-section-hint { margin: 0; flex: 1 1 320px; }
.srh-demo-flag { color: var(--accent); }
/* Aperçu du complément d'historique : exemples avant / après. */
.srh-history-examples { list-style: none; margin: var(--space-2) 0; padding: 0; max-height: 280px; overflow-y: auto; font-size: var(--fs-sm); }
.srh-history-examples li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.srh-history-ex-name { font-weight: 700; color: var(--primary); }
.srh-history-ex-before { color: var(--text-light); text-decoration: line-through; }
.srh-history-ex-after { color: var(--text); }
/* Détail : titre de section + action alignée à droite. */
.coop-detail-subtitle-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.coop-cv-warning { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-sm); color: var(--accent); }

/* ── Challenge & Classement : podiums et challenges (challenge.js) ── */
.cls-section { margin-top: var(--space-6); }
.cls-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.cls-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cls-periodbar { flex: 1 1 auto; }
.cls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-5); }
.cls-card, .cls-challenge { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-5); box-shadow: var(--shadow-sm); min-width: 0; }
.cls-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cls-card-title { margin: 0; color: var(--primary); font-size: var(--fs-lg); }
.cls-card-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-light); max-width: 48ch; }
.cls-basis { align-self: flex-start; flex-wrap: wrap; max-width: 100%; }
.cls-empty { padding: var(--space-4) 0; color: var(--text-light); font-size: var(--fs-sm); }
.cls-section-hint { margin: 0; font-size: var(--fs-sm); color: var(--text-light); max-width: 70ch; }
/* En-tête extensible : les deux podiums sont alignés quelle que soit la hauteur des textes. */
.cls-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.cls-card > .cls-card-head { flex: 1 0 auto; align-content: flex-start; }
.cls-card.is-loading { opacity: .55; transition: opacity .15s; }
.cls-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); margin: 0 0 var(--space-2); cursor: pointer; }
.cls-checkbox input { margin-top: 3px; }
.cls-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f50a63, #ff7aa8); }
.cls-card-title { display: flex; align-items: center; }
.cls-card-fox { height: 28px; margin-right: 6px; opacity: .85; }
/* Podium : même rendu que « Top contributeurs » du Tableau de bord */
.cls-pd { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: var(--space-4) 0 var(--space-3); }
.cls-pd-col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
/* Largeurs du Tableau de bord (130 / 112 / 96 px), réduites si la carte est étroite. */
.cls-pd-col--1 { order: 2; flex: 0 1 130px; }
.cls-pd-col--2 { order: 1; flex: 0 1 112px; }
.cls-pd-col--3 { order: 3; flex: 0 1 96px; }
.cls-pd-avatar { border-radius: 50%; line-height: 0; flex-shrink: 0; }
.cls-pd-name { font-size: 12px; font-weight: 600; color: #1a1a3e; text-align: center; line-height: 1.2; word-break: break-word; max-width: 100%; }
.cls-pd-col--1 .cls-pd-name { font-size: 13px; font-weight: 700; }
.cls-pd-value { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 3px; }
.cls-pd-num { font-size: 15px; font-weight: 800; color: #2D2E60; line-height: 1; }
.cls-pd-col--1 .cls-pd-num { font-size: 18px; color: #f50a63; }
.cls-pd-unit { font-size: 11px; font-weight: 500; color: #888; line-height: 1; }
.cls-pd-points { font-size: 11px; font-weight: 700; color: var(--accent); }
.cls-pd-bar { position: relative; flex-shrink: 0; margin-top: 4px; border-radius: 6px 6px 0 0; display: flex; justify-content: center; }
.cls-pd-col--1 .cls-pd-bar { width: 100%; height: 140px; background: linear-gradient(180deg, #f50a63 0%, #c4005a 100%); animation-delay: .2s; }
.cls-pd-col--2 .cls-pd-bar { width: 100%; height: 96px; background: linear-gradient(180deg, #2D2E60 0%, #151648 100%); animation-delay: .05s; }
.cls-pd-col--3 .cls-pd-bar { width: 100%; height: 70px; background: linear-gradient(180deg, #5b5e9e 0%, #2D2E60 100%); animation-delay: .3s; }
.cls-pd-badge { position: absolute; top: 10px; line-height: 0; }
.cls-pd-col.is-me .cls-pd-name { color: var(--accent); }
@media (max-width: 480px) {
    .cls-pd { gap: 6px; }
    .cls-pd-col--1 .cls-pd-bar { height: 110px; }
    .cls-pd-col--2 .cls-pd-bar { height: 78px; }
    .cls-pd-col--3 .cls-pd-bar { height: 56px; }
}
/* Position de la personne connectée, message au survol (tooltip.js) */
.cls-me { display: block; width: fit-content; margin: 0 auto var(--space-4); padding: 6px 14px; border-radius: 999px; background: var(--surface-2, #eef0f9); color: var(--primary); font-size: var(--fs-sm); font-weight: 700; cursor: help; }
.cls-me:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cls-me--first { background: linear-gradient(90deg, #f50a63, #ff3380); color: #fff; }
.cls-row-excluded { opacity: .6; }
.cls-excluded-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--text-light); border: 1px dashed var(--border); border-radius: 999px; padding: 1px 8px; }
.cls-estimated { color: var(--accent); font-weight: 700; }
.cls-challenges { display: grid; gap: var(--space-4); }
.cls-challenge-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.cls-challenge-title { margin: 4px 0 2px; font-size: var(--fs-lg); color: var(--text); }
.cls-challenge-meta { font-size: var(--fs-sm); color: var(--text-light); }
.cls-challenge-actions { display: flex; gap: var(--space-2); align-items: flex-start; }
.cls-challenge-desc { margin: var(--space-3) 0 0; font-size: var(--fs-sm); max-width: 80ch; }
.cls-challenge-reward { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.cls-challenge-ranking summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); margin-bottom: var(--space-2); }
.cls-challenge--past { opacity: .85; }
.cls-status { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; border-radius: 999px; background: var(--surface-2, #eef0f9); color: var(--primary); }
.cls-status--current { background: #f50a63; color: #fff; }
.cls-status--past { color: var(--text-light); }
.cls-form .form-group { margin-bottom: var(--space-3); }
.cls-form input[type="text"], .cls-form input[type="date"], .cls-form input[type="number"], .cls-form select, .cls-form textarea { width: 100%; font: inherit; }
.cls-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.cls-form-row[hidden], .cls-form .form-group[hidden] { display: none; }
.cls-form-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.cls-form-fieldset legend { font-weight: 700; font-size: var(--fs-sm); padding: 0 4px; }
.cls-radio { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--space-4) var(--space-3) 0; font-size: var(--fs-sm); cursor: pointer; }
.cls-form-error { color: var(--danger); font-size: var(--fs-sm); margin: var(--space-2) 0 0; }
.cls-pick { position: relative; }
.cls-pick-list { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; }
.coop-excluded-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); }
.coop-excluded-head .coop-config-subtitle { margin: 0; }
.coop-excluded-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; max-width: 640px; border: 1px solid var(--border); border-radius: 8px; }
.coop-excluded-list > li { padding: var(--space-2) var(--space-3); }
.coop-excluded-list > li + li { border-top: 1px solid var(--border); }
.coop-excluded-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.coop-excluded-item .btn { margin-left: auto; }