.rejets-subnav, .rejets-view, .rejets-state {
    /* Jetons de la charte, portés par les composants de cette page.
       Volontairement pas sur :root — l'en-tête et la navigation sont
       partagés avec les autres pages et gardent leur habillage. */
    --charte-or:       #FFB500;
    --charte-noir:     #000000;
    --charte-gris:     #B2B4AE;
    --charte-orange:   #AF6D04;
    --charte-violet:   #85458A;
    --charte-bleu:     #1C5687;
    --charte-sarcelle: #4C7D7A;
}

/* ==========================================================================
   Analyse des rejets — habillage EA Scope
   --------------------------------------------------------------------------
   Le composant du tableau de bord n'est PAS modifié : on redéfinit seulement
   ses variables CSS sur la racine .sdb, comme le prévoit son README.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Charte graphique
   --------------------------------------------------------------------------
   Primaires      Blanc #FFFFFF   Or #FFB500   Noir #000000   Gris #B2B4AE
   Complémentaires Orange #AF6D04  Violet #85458A  Bleu #1C5687  Sarcelle #4C7D7A

   Le composant du tableau de bord n'est pas modifié : on redéfinit ses
   variables sur la racine .sdb, comme le prévoit son README.
   -------------------------------------------------------------------------- */

.sdb {
    /* Séries catégorielles : les quatre complémentaires de la charte.
       L'Or, primaire, est réservé aux accents d'interface — le composant
       emploie --sdb-c2 comme trait de courbe, où il serait illisible. */
    --sdb-c1: #1C5687;   /* Bleu */
    --sdb-c2: #AF6D04;   /* Orange */
    --sdb-c3: #85458A;   /* Violet */
    --sdb-c4: #4C7D7A;   /* Sarcelle */
    --sdb-neutral: #B2B4AE;  /* Gris */

    /* Encres : le Noir de la charte, puis deux gris tirés du Gris #B2B4AE
       en conservant sa teinte. */
    --sdb-ink:    #000000;
    --sdb-ink-2:  #5D5F58;
    --sdb-ink-3:  #81847B;

    /* Surfaces : Blanc pour les cartes, déclinaisons du Gris pour le reste. */
    --sdb-ground: #F6F6F6;
    --sdb-card:   #FFFFFF;
    --sdb-rule:   #DCDDDA;
    --sdb-soft:   #EDEEEC;

    --sdb-shadow: 0 1px 2px rgba(0, 0, 0, .05),
                  0 6px 18px -10px rgba(0, 0, 0, .25);
    --sdb-radius: var(--radius-md);
    --sdb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;

    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Variante sombre — prête mais inactive (EA Scope n'a pas de thème sombre ;
   le composant est épinglé sur « light » depuis rejets.js).
   -------------------------------------------------------------------------- */
.sdb[data-sdb-theme="dark"] {
    --sdb-c1: #5A93C4;
    --sdb-c2: #D9974A;
    --sdb-c3: #B47BB9;
    --sdb-c4: #7FB0AC;
    --sdb-neutral: #6F716C;
    --sdb-ink:    #F4F5F2;
    --sdb-ink-2:  #C2C4BE;
    --sdb-ink-3:  #90928C;
    --sdb-ground: #16181A;
    --sdb-card:   #1F2123;
    --sdb-rule:   #34363A;
    --sdb-soft:   #26282B;
}

/* --------------------------------------------------------------------------
   Sous-navigation entre les deux vues
   -------------------------------------------------------------------------- */

.rejets-subnav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.rejets-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rejets-tab:hover {
    color: var(--charte-bleu, #1C5687);
}

.rejets-tab[aria-selected="true"] {
    color: var(--charte-bleu, #1C5687);
    border-bottom-color: var(--charte-bleu, #1C5687);
    font-weight: 600;
}

.rejets-view[hidden] { display: none; }

/* --------------------------------------------------------------------------
   États de chargement et d'erreur
   -------------------------------------------------------------------------- */

.rejets-state {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align: center;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.rejets-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 17px;
}

.rejets-state code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Vue « Dépôt de documents »
   -------------------------------------------------------------------------- */

.dep-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    padding: 36px 24px;
    text-align: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.dep-zone:hover,
.dep-zone:focus-visible,
.dep-zone--survol {
    border-color: var(--charte-bleu, #1C5687);
    color: var(--charte-bleu, #1C5687);
    background: var(--bg-secondary);
}

.dep-zone-titre { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-top: 10px; }
.dep-zone-note  { font-size: 13px; }

/* L'attente est longue : on l'annonce au lieu de la masquer. */
.dep-avertissement {
    margin: 16px 0 28px;
    padding: 14px 16px;
    border-left: 3px solid var(--charte-or, #FFB500);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.dep-titre { font-size: 16px; margin-bottom: 12px; color: var(--text-primary); }

.dep-file { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }

.dep-job {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.dep-job--action { border-color: var(--charte-bleu, #1C5687); }
.dep-job-id      { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.dep-job-nom     { font-weight: 500; color: var(--text-primary); word-break: break-word; }
.dep-job-marche  { font-size: 12px; color: var(--text-light); }
.dep-job-erreur  { font-size: 12px; color: #991b1b; flex-basis: 100%; }

.dep-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.dep-badge--attente { background: var(--bg-tertiary); color: var(--text-secondary); }
.dep-badge--cours   { background: #fef3c7; color: #92400e; }
.dep-badge--action  { background: var(--charte-bleu, #1C5687); color: #fff; }
.dep-badge--ok      { background: #d1fae5; color: #065f46; }
.dep-badge--neutre  { background: var(--bg-tertiary); color: var(--text-light); }
.dep-badge--ko      { background: #fee2e2; color: #991b1b; }

/* ---- Écran de validation ---- */

.dep-validation {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.dep-val-tete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.dep-val-tete h3   { font-size: 17px; color: var(--text-primary); word-break: break-word; }
.dep-val-resume    { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.dep-signal        { color: var(--charte-orange, #AF6D04); }
.dep-val-actions   { display: flex; gap: 8px; flex-wrap: wrap; }

.dep-rappel {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 16px;
    line-height: 1.55;
}

.dep-lots { display: flex; flex-direction: column; gap: 14px; }

.dep-lot {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
}

.dep-lot--alerte { border-left: 3px solid var(--charte-or, #FFB500); }

.dep-lot-tete {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.dep-num        { font-weight: 700; color: var(--charte-bleu, #1C5687); margin-right: 8px; }
.dep-libelle    { color: var(--text-primary); }
.dep-statut-lot { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }

.dep-lot-corps {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 1fr);
    gap: 18px;
}

/* Les notes des deux parties côte à côte : c'est là que se concentrent les erreurs. */
.dep-notes { width: 100%; border-collapse: collapse; font-size: 14px; }
.dep-notes th, .dep-notes td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border-color); }
.dep-notes thead th { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }
.dep-notes tbody th { text-align: left; font-weight: 500; color: var(--text-secondary); }
.dep-avantage { font-weight: 700; color: var(--charte-bleu, #1C5687); }
.dep-bareme   { color: var(--text-light); font-size: 13px; }

.dep-champs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; align-content: start; }
.dep-champs dt { color: var(--text-secondary); }
.dep-champs dd { color: var(--text-primary); word-break: break-word; }

.dep-vide { color: var(--text-light); }

.dep-alertes { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.dep-warnings { margin-bottom: 14px; }

.dep-alerte {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}
.dep-alerte--haute   { background: #fee2e2; color: #991b1b; }
.dep-alerte--moyenne { background: #fef3c7; color: #92400e; }

@media (max-width: 720px) {
    .dep-lot-corps { grid-template-columns: 1fr; }
}

/* Un enfant de grille a min-width:auto par défaut et refuse de rétrécir sous
   la largeur de son contenu : c'est ce qui faisait déborder le tableau des
   notes sur mobile. On autorise le rétrécissement, et le tableau défile dans
   son propre conteneur plutôt que de pousser la page. */
.dep-lot-corps > * { min-width: 0; }

.dep-notes-conteneur {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dep-notes { min-width: 320px; }

.dep-btn-secondaire {
    padding: 10px 18px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.dep-btn-secondaire:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* ==========================================================================
   Animations
   --------------------------------------------------------------------------
   Tout est enveloppé dans `prefers-reduced-motion: no-preference` : un
   utilisateur qui a demandé moins de mouvement voit le tableau de bord
   s'afficher d'un coup, sans rien perdre de son contenu.

   Les barres sont animées en `scaleX` et non en `width` : leur largeur est
   posée en style inline par le composant, et l'animer entrerait en conflit.
   `scaleX` laisse cette largeur intacte et se compose sur le GPU.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    @keyframes rejets-apparait {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes rejets-barre {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }

    @keyframes rejets-marque {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ---- Tuiles d'indicateurs : entrée en cascade ---- */
    .sdb .sdb-kpi {
        animation: rejets-apparait .45s cubic-bezier(.22, .61, .36, 1) both;
    }
    .sdb .sdb-kpi:nth-child(1) { animation-delay: .00s; }
    .sdb .sdb-kpi:nth-child(2) { animation-delay: .06s; }
    .sdb .sdb-kpi:nth-child(3) { animation-delay: .12s; }
    .sdb .sdb-kpi:nth-child(4) { animation-delay: .18s; }
    .sdb .sdb-kpi:nth-child(5) { animation-delay: .24s; }
    .sdb .sdb-kpi:nth-child(6) { animation-delay: .30s; }

    /* ---- Cartes de graphiques : même cascade, un cran plus tard ---- */
    .sdb .sdb-card {
        animation: rejets-apparait .5s cubic-bezier(.22, .61, .36, 1) both;
    }
    .sdb .sdb-card:nth-child(1) { animation-delay: .10s; }
    .sdb .sdb-card:nth-child(2) { animation-delay: .16s; }
    .sdb .sdb-card:nth-child(3) { animation-delay: .22s; }
    .sdb .sdb-card:nth-child(4) { animation-delay: .28s; }
    .sdb .sdb-card:nth-child(5) { animation-delay: .34s; }
    .sdb .sdb-card:nth-child(6) { animation-delay: .40s; }
    .sdb .sdb-card:nth-child(n+7) { animation-delay: .46s; }

    /* ---- Barres : croissance depuis la gauche ---- */
    .sdb .sdb-bar-fill {
        transform-origin: left center;
        animation: rejets-barre .7s cubic-bezier(.22, .61, .36, 1) both;
        animation-delay: .18s;
    }

    .sdb .sdb-stack > span {
        transform-origin: left center;
        animation: rejets-barre .7s cubic-bezier(.22, .61, .36, 1) both;
    }
    .sdb .sdb-stack > span:nth-child(2) { animation-delay: .06s; }
    .sdb .sdb-stack > span:nth-child(3) { animation-delay: .12s; }
    .sdb .sdb-stack > span:nth-child(4) { animation-delay: .18s; }

    /* ---- Marques SVG : fondu, décalé pour suivre le regard ---- */
    .sdb .sdb-mark {
        animation: rejets-marque .5s ease-out both;
        animation-delay: .25s;
    }

    /* ---- Bascule entre les deux vues ---- */
    .rejets-view:not([hidden]) {
        animation: rejets-apparait .35s cubic-bezier(.22, .61, .36, 1) both;
    }

    /* ---- File de traitement : une ligne qui arrive se signale ---- */
    .dep-job {
        animation: rejets-apparait .35s cubic-bezier(.22, .61, .36, 1) both;
    }
}

/* --------------------------------------------------------------------------
   Réactions au survol — hors media query : ce sont des retours d'interaction,
   pas du mouvement décoratif, et ils restent utiles à qui limite les animations.
   -------------------------------------------------------------------------- */

.sdb .sdb-kpi,
.sdb .sdb-card {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.sdb .sdb-kpi:hover,
.sdb .sdb-card:hover {
    transform: translateY(-2px);
    border-color: var(--charte-gris, #B2B4AE);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06),
                0 10px 24px -12px rgba(0, 0, 0, .3);
}

.sdb .sdb-chip,
.sdb .sdb-select {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease;
}

.rejets-tab {
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease;
}

.dep-zone {
    transition: border-color .2s ease, background-color .2s ease,
                transform .2s ease;
}
.dep-zone--survol {
    transform: scale(1.01);
}

/* --------------------------------------------------------------------------
   Pastille de modération
   --------------------------------------------------------------------------
   La notification tient dans l'interface : rien à installer, aucune
   autorisation à demander, et elle s'affiche là où se prend la décision.
   -------------------------------------------------------------------------- */

.dep-pastille {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--charte-or, #FFB500);
    color: var(--charte-noir, #000);
    font-family: Archivo, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    vertical-align: middle;
}

.dep-pastille[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .dep-pastille:not([hidden]) {
        animation: rejets-apparait .4s cubic-bezier(.22, .61, .36, 1) both;
    }
}