/* =============================================================================
   Charte NSIA Congo, relevee sur nsiacongo.com.

   Un seul endroit fait autorite : ce bloc :root. Aucune couleur ne doit etre
   ecrite en dur ailleurs.

   L'or ne sert jamais de couleur de texte sur fond clair — son contraste y tombe
   a 2,2:1. Sur le marine il atteint 4,9:1, et c'est ainsi que le site l'emploie.

   Le style : la palette ne bouge pas, ce qui bouge est la lumiere, la profondeur
   et le temps. Des degrades de marine plutot qu'un aplat, des ombres portees qui
   decollent les cartes du fond, un filet d'or qui luit, et des transitions sur
   tout ce qui repond a la main. Chaque mouvement s'eteint pour qui a demande
   moins d'animation a son systeme.
   ============================================================================= */
:root {
    --erp-accent: #003B7A;
    --erp-accent-clair: #E6EDF5;
    --erp-or: #E8A020;
    --erp-or-clair: #FCF3E1;
    --erp-encre: #1A1A2E;
    --erp-encre-douce: #4A5568;
    --erp-secondaire: #6C757D;
    --erp-bordure: #DCE3EC;
    --erp-fond: #F4F6F9;
    --erp-succes: #2E7D52;
    --erp-avertissement: #C77700;
    --erp-danger: #C62828;
    --erp-info: #0277BD;
    --erp-rayon: 6px;
    --erp-rayon-petit: 4px;

    /* Profondeur et lumiere. Le marine profond est le marine de la charte assombri,
       jamais une autre teinte : les degrades vont du marine a la nuit, pas ailleurs. */
    --erp-marine-profond: #00234A;
    --erp-marine-vif: #0A4F99;
    --erp-degrade-marque: linear-gradient(135deg, #003B7A 0%, #0B2F63 55%, #1A1A2E 100%);
    --erp-degrade-bouton: linear-gradient(135deg, var(--erp-marine-vif) 0%, var(--erp-accent) 55%, #00306A 100%);
    --erp-degrade-jauge: linear-gradient(90deg, var(--erp-accent) 0%, var(--erp-marine-vif) 100%);

    --erp-ombre-carte: 0 1px 2px rgba(0, 59, 122, .05), 0 10px 30px -12px rgba(0, 59, 122, .22);
    --erp-ombre-carte-survol: 0 2px 4px rgba(0, 59, 122, .06), 0 18px 44px -14px rgba(0, 59, 122, .30);
    --erp-ombre-bouton: 0 6px 18px -6px rgba(0, 59, 122, .55);
    --erp-ombre-bouton-survol: 0 10px 26px -8px rgba(0, 59, 122, .65);
    --erp-lueur-or: 0 0 0 3px rgba(232, 160, 32, .30);
    --erp-lueur-accent: 0 0 0 3px rgba(0, 59, 122, .14);

    --erp-transition: 180ms cubic-bezier(.2, .7, .2, 1);
    --erp-transition-lente: 380ms cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Montserrat, 'Segoe UI Variable', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--erp-encre-douce);
    /* Une lueur marine tres douce descend du bandeau sur le fond : la page a une
       source de lumiere, en haut, la ou est la marque. */
    background:
        radial-gradient(1200px 420px at 50% -120px, rgba(0, 59, 122, .11), transparent 65%),
        var(--erp-fond);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--erp-encre); margin: 0; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 19px; font-weight: 700; }
a { color: var(--erp-accent); transition: color var(--erp-transition); }

::selection { background: var(--erp-or-clair); color: var(--erp-encre); }

/* ---------------------------------------------------------------- Icones ----

   Un trait de 2 sur une grille de 24, en ligne, a la taille et a la couleur du
   texte qu'il precede. Dans un bouton ou un onglet — des boites flex — l'espace
   vient du gap ; ailleurs, l'icone garde sa propre marge a droite. */
.erp-icone {
    width: 1.05em; height: 1.05em;
    flex: none;
    vertical-align: -.17em;
    margin-right: .45em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.erp-bouton, .erp-bouton-lien, .erp-bouton-discret, .erp-nav a, .erp-sous-nav a, .erp-filtres a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
}
.erp-bouton .erp-icone, .erp-bouton-lien .erp-icone, .erp-bouton-discret .erp-icone,
.erp-nav a .erp-icone, .erp-sous-nav a .erp-icone, .erp-filtres a .erp-icone { margin-right: 0; }
.erp-nav a .erp-icone { width: 1.15em; height: 1.15em; opacity: .85; }
.erp-nav a.actif .erp-icone, .erp-nav a:hover .erp-icone { opacity: 1; }
h1 .erp-icone, h2 .erp-icone { color: var(--erp-accent); width: 1em; height: 1em; vertical-align: -.12em; }
.erp-indicateur-libelle .erp-icone { color: var(--erp-accent); }
.erp-indicateur.alerte .erp-indicateur-libelle .erp-icone { color: var(--erp-avertissement); }

/* --------------------------------------------------------------- Portraits ----

   La photo de la personne devant son nom, ou ses initiales quand elle n'en a pas.
   Rond, a la taille du texte ; « moyen » pour une carte, « grand » pour une fiche.
   Les initiales sont en marine sur fond clair, jamais l'inverse : c'est la charte. */
.erp-avatar {
    display: inline-block;
    width: 1.75em; height: 1.75em;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: .5em;
    flex: none;
    background: var(--erp-accent-clair);
    box-shadow: 0 0 0 1px rgba(0, 59, 122, .12);
}
.erp-avatar-initiales {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .62em; font-weight: 700; letter-spacing: .02em;
    color: var(--erp-accent);
    text-transform: uppercase;
    line-height: 1;
}
.erp-avatar-moyen { width: 44px; height: 44px; font-size: 20px; }
.erp-avatar-grand { width: 96px; height: 96px; font-size: 40px; margin-right: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--erp-bordure), var(--erp-ombre-carte); }
.erp-entete .erp-avatar { background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 1px rgba(232, 160, 32, .55); }
.erp-entete .erp-avatar-initiales { color: #fff; }
.erp-table .erp-avatar, .erp-piste .erp-avatar { width: 1.6em; height: 1.6em; }

.erp-portrait { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--erp-bordure); }
.erp-portrait-actions { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.erp-portrait-actions input[type="file"] {
    font: inherit; font-size: 13px; padding: 7px 10px;
    color: var(--erp-encre-douce); background-color: #fff;
    border: 1px dashed var(--erp-bordure); border-radius: var(--erp-rayon-petit);
    transition: border-color var(--erp-transition), background var(--erp-transition);
}
.erp-portrait-actions input[type="file"]:hover { border-color: var(--erp-accent); background: var(--erp-accent-clair); }
.erp-portrait-actions input[type="file"]:focus-visible { outline: 2px solid var(--erp-or); outline-offset: 2px; }

/* Une barre de defilement fine, marine : le seul ornement que le navigateur
   nous laisse regler, et il se voit sur chaque page longue. */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 59, 122, .35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(0, 59, 122, .35); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 59, 122, .55); }

/* ------------------------------------------------------------- Mouvement ----

   Quatre mouvements, et pas un de plus : apparaitre, glisser, se remplir,
   respirer. Ils servent partout, si bien que l'oeil apprend vite ce que chacun
   veut dire. Les durees sont courtes : une interface qui attend ses animations
   n'est pas rapide, elle fait semblant. */
@keyframes erp-apparaitre {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes erp-glisser {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes erp-remplir {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes erp-monter {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes erp-respirer {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 59, 122, .45); }
    70%      { box-shadow: 0 0 0 6px rgba(0, 59, 122, 0); }
}
@keyframes erp-deriver {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6%, -4%) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes erp-balayer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* Le contenu de chaque page monte en place, bloc apres bloc. Huit blocs
   suffisent : au-dela, l'attente se verrait plus que le mouvement. */
.erp-corps > * { animation: erp-apparaitre var(--erp-transition-lente) both; }
.erp-corps > *:nth-child(2) { animation-delay: 40ms; }
.erp-corps > *:nth-child(3) { animation-delay: 80ms; }
.erp-corps > *:nth-child(4) { animation-delay: 120ms; }
.erp-corps > *:nth-child(5) { animation-delay: 160ms; }
.erp-corps > *:nth-child(6) { animation-delay: 200ms; }
.erp-corps > *:nth-child(7) { animation-delay: 240ms; }
.erp-corps > *:nth-child(n+8) { animation-delay: 280ms; }

/* ------------------------------------------------------------------ Coque ---- */

.erp-entete {
    position: relative;
    overflow: hidden;   /* la lueur qui balaie le bandeau ne doit pas deborder la page */
    background: var(--erp-degrade-marque);
    border-bottom: 3px solid var(--erp-or);   /* l'accord qui identifie la marque */
    box-shadow: 0 4px 24px -6px rgba(0, 35, 74, .55), 0 3px 0 0 rgba(232, 160, 32, .25);
    color: #fff;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
/* Une lueur d'or passe une fois sur le filet, a l'ouverture : le bandeau
   s'allume, puis se tient. */
.erp-entete::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: erp-balayer 1.6s cubic-bezier(.4, 0, .2, 1) .2s 1 both;
    pointer-events: none;
}
.erp-entete-titre { font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.erp-entete-sous-titre { font-size: 11px; opacity: .78; letter-spacing: .06em; text-transform: uppercase; }
.erp-entete-droite { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.erp-entete a { color: #fff; opacity: .9; }
.erp-entete a:hover { opacity: 1; text-decoration-color: var(--erp-or); }

.erp-corps { max-width: 1100px; margin: 0 auto; padding: 28px 26px 64px; }

.erp-carte {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon);
    box-shadow: var(--erp-ombre-carte);
    padding: 22px 24px;
    transition: box-shadow var(--erp-transition), transform var(--erp-transition), border-color var(--erp-transition);
}
/* Un fil de lumiere, marine vers or, sur le bord haut : invisible au repos, il
   se revele quand la carte est survolee. */
.erp-carte::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--erp-accent), var(--erp-or));
    border-radius: var(--erp-rayon) var(--erp-rayon) 0 0;
    opacity: 0;
    transition: opacity var(--erp-transition);
}
.erp-carte:hover { box-shadow: var(--erp-ombre-carte-survol); border-color: #CFD9E6; }
.erp-carte:hover::before { opacity: 1; }

/* -------------------------------------------------------------- Connexion ---- */

.erp-connexion {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--erp-degrade-marque);
    overflow: hidden;
}
/* Deux halos derivent lentement derriere la carte — l'un marine clair, l'autre
   or, tres dilue. Ils donnent au fond une profondeur que l'aplat n'a pas. */
.erp-connexion::before,
.erp-connexion::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: erp-deriver 18s ease-in-out infinite;
}
.erp-connexion::before {
    width: 520px; height: 520px; top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(10, 79, 153, .55), transparent 65%);
}
.erp-connexion::after {
    width: 460px; height: 460px; bottom: -180px; right: -100px;
    background: radial-gradient(circle, rgba(232, 160, 32, .28), transparent 65%);
    animation-delay: -9s;
}

.erp-connexion-carte {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .55);
    border-top: 3px solid var(--erp-or);
    border-radius: var(--erp-rayon);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 35, 74, .35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 34px 32px;
    animation: erp-apparaitre var(--erp-transition-lente) both;
}
.erp-connexion-carte h1 { font-size: 20px; text-align: center; }
.erp-connexion-intro { text-align: center; font-size: 12.5px; color: var(--erp-secondaire); margin: 6px 0 24px; }

/* ------------------------------------------------------------ Formulaires ---- */

.erp-champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.erp-champ label { font-size: 12px; font-weight: 600; color: var(--erp-encre); }
.erp-champ input {
    font: inherit;
    padding: 9px 12px;
    color: var(--erp-encre);
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    background-color: #fff;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition), background var(--erp-transition);
}
.erp-champ input:hover { border-color: #B9C6D6; }
.erp-champ input:focus {
    outline: none;
    border-color: var(--erp-accent);
    box-shadow: var(--erp-lueur-accent);
}

.erp-bouton {
    position: relative;
    width: 100%;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--erp-degrade-bouton);
    border: none;
    border-radius: var(--erp-rayon-petit);
    padding: 11px 16px;
    cursor: pointer;
    box-shadow: var(--erp-ombre-bouton);
    overflow: hidden;
    transition: transform var(--erp-transition), box-shadow var(--erp-transition), filter var(--erp-transition);
}
/* Un reflet traverse le bouton au survol : la main est reconnue avant le clic. */
.erp-bouton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 600ms ease;
    pointer-events: none;
}
.erp-bouton:hover { transform: translateY(-1px); box-shadow: var(--erp-ombre-bouton-survol); filter: brightness(1.04); }
.erp-bouton:hover::after { transform: translateX(100%); }
.erp-bouton:active { transform: translateY(0) scale(.985); box-shadow: var(--erp-ombre-bouton); }
.erp-bouton:focus-visible { outline: 3px solid var(--erp-or); outline-offset: 2px; }

.erp-erreur {
    background: #FBE9E9;
    color: var(--erp-danger);
    border-left: 3px solid var(--erp-danger);
    border-radius: var(--erp-rayon-petit);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 18px;
    animation: erp-glisser var(--erp-transition-lente) both;
}

.erp-aide { font-size: 12px; color: var(--erp-secondaire); }

/* ----------------------------------------------------------------- Fiche ---- */

.erp-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
.erp-fiche dt {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--erp-secondaire);
    margin-bottom: 2px;
}
.erp-fiche dd { margin: 0; font-size: 14px; color: var(--erp-encre); }

.erp-liste-permissions { display: flex; flex-wrap: wrap; gap: 6px; }
.erp-liste-permissions span {
    font-size: 11.5px;
    background: var(--erp-accent-clair);
    color: var(--erp-accent);
    border-radius: 10px;
    padding: 2px 9px;
}

@media (max-width: 620px) {
    .erp-fiche { grid-template-columns: 1fr; }
    .erp-corps { padding: 20px 16px 48px; }
}

/* ------------------------------------------------------------ Navigation ----

   La barre reste en haut quand la page defile, translucide sur le contenu qui
   passe dessous. Chaque onglet porte son trait d'or qui s'etend depuis le
   centre au survol, et reste tendu sur l'onglet courant. */
.erp-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 4px;
    padding: 0 26px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--erp-bordure);
    box-shadow: 0 6px 20px -14px rgba(0, 35, 74, .35);
    overflow-x: auto;
    scrollbar-width: none;   /* la barre defile au doigt, sans montrer d'ascenseur */
}
.erp-nav::-webkit-scrollbar { display: none; }
.erp-nav a {
    position: relative;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--erp-encre-douce);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color var(--erp-transition), background var(--erp-transition);
}
.erp-nav a::after {
    content: "";
    position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px;
    background: var(--erp-or);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--erp-transition);
}
.erp-nav a:hover { color: var(--erp-accent); background: rgba(0, 59, 122, .04); }
.erp-nav a:hover::after { transform: scaleX(.6); }
.erp-nav a.actif { color: var(--erp-accent); font-weight: 600; }
.erp-nav a.actif::after { transform: scaleX(1); }
.erp-nav a:focus-visible { outline: 2px solid var(--erp-or); outline-offset: -2px; }

.erp-etiquette {
    font-size: 11.5px;
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(232, 160, 32, .55);
    letter-spacing: .02em;
}

.erp-fil { font-size: 12.5px; color: var(--erp-secondaire); margin-bottom: 8px; }
.erp-fil span { margin: 0 6px; }
.erp-chapo { margin: 6px 0 22px; max-width: 70ch; }
/* L'ecart entre deux sections empilees. Assez large pour que l'oeil voie deux blocs
   et non un seul long formulaire : sous une vingtaine de pixels, les cartes se
   touchent presque et la lecture y perd. */
.erp-marge-bas { margin-bottom: 24px; }

.erp-message {
    padding: 12px 16px; border-radius: var(--erp-rayon-petit); font-size: 14px; margin-bottom: 16px;
    animation: erp-glisser var(--erp-transition-lente) both;
}
.erp-message.succes { background: #E4F1EA; color: var(--erp-succes); border-left: 3px solid var(--erp-succes); }
.erp-message.erreur { background: #FBE9E9; color: var(--erp-danger); border-left: 3px solid var(--erp-danger); }

/* ---------------------------------------------------------------- Tables ---- */

.erp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.erp-table th, .erp-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--erp-bordure); }
.erp-table thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--erp-secondaire);
    background: var(--erp-fond);
    border-bottom: 2px solid var(--erp-bordure);
}
.erp-table tbody tr { transition: background var(--erp-transition), box-shadow var(--erp-transition); }
/* La ligne survolee s'eclaire et prend un liseré d'or a gauche : on sait ou
   l'on est dans un tableau de quarante lignes. */
.erp-table tbody tr:hover { background: rgba(0, 59, 122, .035); box-shadow: inset 3px 0 0 var(--erp-or); }
.erp-table tbody tr:last-child td { border-bottom: none; }
.erp-table .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.erp-table .date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Une table large defile dans sa carte, et la carte seule : la page ne prend jamais
   de barre horizontale. */
.erp-defilant { overflow-x: auto; }
.erp-table-dossiers { min-width: 1180px; }
.erp-table-dossiers th { white-space: nowrap; }
/* La reference reste visible quand on defile : c'est elle qui dit de quel dossier on lit la ligne. */
.erp-table-dossiers th:first-child, .erp-table-dossiers td:first-child {
    position: sticky; left: 0; z-index: 1;
    background-color: #fff;
    box-shadow: 1px 0 0 var(--erp-bordure);
}
.erp-table-dossiers thead th:first-child { background: var(--erp-fond); }
.erp-table-dossiers tbody tr:hover td:first-child { background: #F6F8FB; }
.erp-cellule-detail { font-size: 12px; color: var(--erp-secondaire); margin-top: 2px; }
.erp-lien-fort { font-weight: 600; color: var(--erp-accent); text-decoration: none; }
.erp-lien-fort:hover { text-decoration: underline; text-decoration-color: var(--erp-or); text-underline-offset: 3px; }

/* Les pastilles d'etat portent un point a gauche, de leur couleur. Les etats
   « en cours » respirent : ce qui est en train d'arriver se distingue de ce
   qui est fait. */
.erp-etat, .erp-etat-dossier, .erp-livraison {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.erp-etat::before, .erp-etat-dossier::before, .erp-livraison::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

.erp-etat { font-size: 11.5px; padding: 2px 10px; border-radius: 10px; }
.erp-etat.actif { background: #E4F1EA; color: var(--erp-succes); }
.erp-etat.inactif { background: #EFF1F4; color: var(--erp-secondaire); }

.erp-jetons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.erp-jetons span {
    font-size: 12.5px;
    background: var(--erp-accent-clair);
    color: var(--erp-accent);
    border-radius: 10px;
    padding: 3px 11px;
}

/* --------------------------------------------------------------- Droits ---- */

.erp-droits { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.erp-droits li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; transition: opacity var(--erp-transition); }
.erp-droits li.refuse { opacity: .5; }
.erp-puce { font-size: 15px; line-height: 1.4; color: var(--erp-secondaire); }
.erp-droits li.accorde .erp-puce { color: var(--erp-succes); font-weight: 700; }
.erp-droit-libelle { font-weight: 600; font-size: 14px; color: var(--erp-encre); margin-right: 8px; }
.erp-droits code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    background: var(--erp-fond);
    border: 1px solid var(--erp-bordure);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--erp-secondaire);
}
.erp-droits p { margin: 4px 0 0; font-size: 13px; color: var(--erp-encre-douce); max-width: 78ch; }

/* ----------------------------------------------------------- Referentiels ---- */

.erp-marge-haut { margin-top: 16px; }
.erp-table .actions { width: 150px; text-align: right; }

.erp-ligne-edition { display: flex; gap: 8px; align-items: center; }
.erp-ligne-edition input { flex: 1; min-width: 0; }
.erp-ligne-ajout { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.erp-ligne-ajout input { flex: 1; }
.erp-ligne-ajout .erp-bouton { width: auto; padding: 9px 20px; }

.erp-ligne-edition input,
.erp-ligne-ajout input {
    font: inherit;
    font-size: 14px;
    padding: 7px 11px;
    color: var(--erp-encre);
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    background-color: #fff;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
}
.erp-ligne-edition input:focus,
.erp-ligne-ajout input:focus {
    outline: none;
    border-color: var(--erp-accent);
    box-shadow: var(--erp-lueur-accent);
}

.erp-bouton-discret {
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--erp-accent);
    background: none;
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--erp-transition), border-color var(--erp-transition), transform var(--erp-transition), box-shadow var(--erp-transition);
}
.erp-bouton-discret:hover { background: var(--erp-accent-clair); border-color: #C5D3E3; transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(0, 59, 122, .35); }
.erp-bouton-discret:active { transform: none; box-shadow: none; }
.erp-bouton-discret.danger { color: var(--erp-danger); }
.erp-bouton-discret.danger:hover { background: #FBE9E9; border-color: #F0C7C7; box-shadow: 0 4px 12px -6px rgba(198, 40, 40, .35); }
.erp-bouton-discret:focus-visible { outline: 2px solid var(--erp-or); outline-offset: 2px; }

/* --------------------------------------------- Referentiels riches ---- */

.erp-titre-action { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.erp-titre-action .erp-chapo { margin-bottom: 22px; }

.erp-bouton-lien {
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--erp-degrade-bouton);
    border-radius: var(--erp-rayon-petit);
    padding: 9px 18px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--erp-ombre-bouton);
    transition: transform var(--erp-transition), box-shadow var(--erp-transition), filter var(--erp-transition);
}
.erp-bouton-lien:hover { transform: translateY(-1px); box-shadow: var(--erp-ombre-bouton-survol); filter: brightness(1.04); }
.erp-bouton-lien:active { transform: none; }
.erp-bouton-lien:focus-visible { outline: 3px solid var(--erp-or); outline-offset: 2px; }

.erp-cellule-titre { font-weight: 500; }
.erp-en-ligne { display: inline; }
.erp-table .actions a.erp-bouton-discret { text-decoration: none; display: inline-block; }
.erp-table code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    background: var(--erp-fond);
    border: 1px solid var(--erp-bordure);
    border-radius: 3px;
    padding: 1px 7px;
}

.erp-formulaire { max-width: 620px; }
.erp-formulaire textarea,
.erp-formulaire select {
    font: inherit;
    font-size: 14px;
    padding: 9px 12px;
    color: var(--erp-encre);
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    background-color: #fff;
    width: 100%;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
}
.erp-formulaire textarea { resize: vertical; }
.erp-formulaire textarea:focus,
.erp-formulaire select:focus {
    outline: none;
    border-color: var(--erp-accent);
    box-shadow: var(--erp-lueur-accent);
}
.erp-obligatoire { color: var(--erp-danger); }

.erp-actions-formulaire {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--erp-bordure);
}
.erp-actions-formulaire .erp-bouton { width: auto; padding: 10px 24px; }
.erp-actions-formulaire .erp-bouton-discret { text-decoration: none; padding: 9px 16px; }

.erp-bascule { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.erp-bascule label { margin: 0; }

/* La case garde sa taille propre. Les blocs de formulaire plus haut — « .erp-carte form
   .erp-champ input » — etirent tout champ a 100 % : applique a une case a cocher, cela
   la posait seule sur sa ligne et repoussait son libelle au bord oppose. */
.erp-bascule input[type="checkbox"],
.erp-bascule input[type="radio"],
.erp-carte form .erp-champ .erp-bascule input,
.erp-formulaire .erp-bascule input {
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    accent-color: var(--erp-accent);
    cursor: pointer;
}

/* Liste de cases a cocher longue — destinataires d'une notification, beneficiaires d'un
   acces. Elle defile dans sa propre boite plutot que d'etirer la page : une centaine de
   comptes repousseraient sinon le bouton d'enregistrement hors de l'ecran. */
.erp-cases-liste {
    max-height: 230px;
    overflow-y: auto;
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    padding: 4px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Chaque ligne est une cible entiere : cliquer n'importe ou sur le nom coche la case.
   Le survol et l'etat coche se voient, de sorte qu'un long defilement reste lisible. */
.erp-cases-liste .erp-bascule {
    font-size: 13.5px;
    padding: 7px 9px;
    border-radius: var(--erp-rayon-petit);
    transition: background-color var(--erp-transition);
}

.erp-cases-liste .erp-bascule:hover { background-color: var(--erp-fond); }

/* :has() permet de marquer la ligne entiere depuis l'etat de sa case. */
.erp-cases-liste .erp-bascule:has(input:checked) {
    background-color: var(--erp-accent-clair);
    font-weight: 600;
}

.erp-cases-liste .erp-bascule:has(input:focus-visible) {
    outline: 2px solid var(--erp-accent);
    outline-offset: -2px;
}

/* Le nom est un noeud de texte, pose a cote de la case et de l'avatar : il prend la
   place qui reste et passe a la ligne sans pousser la case hors du cadre. */
.erp-cases-liste .erp-bascule { line-height: 1.35; }
.erp-cases-liste .erp-avatar { flex: none; }

/* Une liste vide porte son explication au centre, et non collee en haut a gauche. */
.erp-cases-liste > .erp-aide {
    padding: 16px 10px;
    text-align: center;
}

/* Rangees suivantes de la sous-navigation : elles se serrent contre la premiere, et
   leur intitule dit a quelle famille appartiennent les listes qui suivent. */
.erp-sous-nav-suite { margin-top: -6px; }
.erp-sous-nav-titre {
    align-self: center;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--erp-secondaire);
    margin-right: 2px;
}

.erp-filtres { display: flex; gap: 6px; margin-bottom: 14px; }
.erp-filtres a {
    font-size: 13px;
    padding: 6px 14px;
    border: 1px solid var(--erp-bordure);
    border-radius: 14px;
    color: var(--erp-encre-douce);
    background-color: #fff;
    text-decoration: none;
    transition: background var(--erp-transition), color var(--erp-transition), border-color var(--erp-transition), box-shadow var(--erp-transition);
}
.erp-filtres a:hover { border-color: var(--erp-accent); color: var(--erp-accent); }
.erp-filtres a.actif { background: var(--erp-degrade-bouton); border-color: var(--erp-accent); color: #fff; box-shadow: var(--erp-ombre-bouton); }

.erp-sous-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 22px; }
.erp-sous-nav a {
    font-size: 13px;
    padding: 7px 15px;
    border-radius: var(--erp-rayon-petit);
    color: var(--erp-encre-douce);
    text-decoration: none;
    transition: background var(--erp-transition), color var(--erp-transition);
}
.erp-sous-nav a:hover { background: var(--erp-accent-clair); color: var(--erp-accent); }
.erp-sous-nav a.actif { background: var(--erp-accent-clair); color: var(--erp-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--erp-or); }

.erp-sous-titre-formulaire {
    font-size: 15px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--erp-bordure);
}
.erp-etiquette-role {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--erp-or-clair);
    color: #8A5300;
    border-radius: 10px;
    padding: 2px 10px;
    margin-right: 4px;
}
.erp-ligne-ajout select { flex: 1; font: inherit; font-size: 14px; padding: 7px 11px;
    border: 1px solid var(--erp-bordure); border-radius: var(--erp-rayon-petit); background-color: #fff;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition); }
.erp-ligne-ajout select:focus { outline: none; border-color: var(--erp-accent); box-shadow: var(--erp-lueur-accent); }

/* ------------------------------------------------------------- Dossiers ---- */

.erp-recherche { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.erp-recherche input[type=search],
.erp-recherche select {
    font: inherit; font-size: 14px; padding: 8px 12px;
    border: 1px solid var(--erp-bordure); border-radius: var(--erp-rayon-petit); background-color: #fff;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
}
.erp-recherche input[type=search]:focus,
.erp-recherche select:focus { outline: none; border-color: var(--erp-accent); box-shadow: var(--erp-lueur-accent); }
.erp-recherche input[type=search] { flex: 1; min-width: 240px; }
.erp-recherche .erp-bouton { width: auto; padding: 9px 20px; }
.erp-recherche .erp-bouton-discret { text-decoration: none; }

.erp-etat-dossier { font-size: 11.5px; padding: 3px 11px; border-radius: 10px; }
.erp-etat-dossier.brouillon   { background: #EFF1F4; color: var(--erp-secondaire); }
.erp-etat-dossier.analyse     { background: var(--erp-accent-clair); color: var(--erp-accent); }
.erp-etat-dossier.planifie    { background: #FDF0DA; color: #8A5300; }
.erp-etat-dossier.realisation { background: #E1F0F8; color: var(--erp-info); }
.erp-etat-dossier.attente     { background: #FDF0DA; color: #8A5300; }
.erp-etat-dossier.cloture     { background: #E4F1EA; color: var(--erp-succes); }
.erp-etat-dossier.analyse::before,
.erp-etat-dossier.realisation::before { animation: erp-respirer 2.2s ease-out infinite; }

.erp-avancement { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.erp-jauge { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--erp-bordure); overflow: hidden; }
.erp-jauge span {
    display: block; height: 100%;
    background: var(--erp-degrade-jauge);
    transform-origin: left;
    animation: erp-remplir 900ms cubic-bezier(.2, .7, .2, 1) 150ms both;
}

.erp-entete-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--erp-encre-douce); margin: 8px 0 24px; }
.erp-alerte {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; padding: 3px 11px; border-radius: 10px; background: #FBE9E9; color: var(--erp-danger);
}
.erp-alerte::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: erp-respirer 2.2s ease-out infinite; }

.erp-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 16px 4px; }
.erp-pagination .erp-bouton-discret { text-decoration: none; }

.erp-fiche-groupe {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--erp-bordure);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--erp-accent);
}
.erp-fiche-groupe:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.erp-fiche { background-color: #fff; border: 1px solid var(--erp-bordure); border-radius: var(--erp-rayon);
             box-shadow: var(--erp-ombre-carte); padding: 22px 24px; }
.erp-fiche-ligne.large { grid-column: 1 / -1; }
.erp-fiche dd pre {
    margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 13.5px;
    background: var(--erp-fond); border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit); padding: 10px 13px;
}
.erp-fiche-preuves { margin: 0; padding-left: 18px; }
.erp-fiche-preuves li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 13.5px; padding: 4px 0;
}
.erp-fiche-preuves li .erp-bouton-discret { padding: 5px 12px; text-decoration: none; flex: none; }
.erp-fiche-preuves li span { display: block; font-size: 12px; color: var(--erp-secondaire); }

/* ------------------------------------------------------- Page du dossier ---- */

/* Des champs cote a cote, alignes rangee par rangee.

   Un libelle sur deux lignes ne doit pas faire descendre son champ sous les autres.
   La rangee est une grille, et chaque champ y inscrit ses trois lignes — libelle,
   saisie, aide — dans les rangees communes de la grille (subgrid) : tous les libelles
   partagent une hauteur, toutes les saisies s'alignent, toutes les aides aussi. La
   grille se replie d'elle-meme : quatre colonnes sur un grand ecran, deux sur une
   tablette, une sur un telephone, sans point de rupture a ecrire. */
.erp-champs-cote-a-cote {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 5px 16px;      /* l'ecart de rangee vaut pour libelle / saisie / aide, via le subgrid */
    align-items: end;   /* sans subgrid, les champs s'alignent au moins par le bas */
}
.erp-champs-cote-a-cote .erp-champ {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    min-width: 0;
    margin-bottom: 16px;
}
.erp-champs-cote-a-cote .erp-champ > label { align-self: end; }
.erp-champs-cote-a-cote .erp-champ > .erp-aide { align-self: start; }
/* Une rangee sans aucune aide ne doit pas garder une troisieme rangee vide. */
.erp-champs-cote-a-cote:not(:has(.erp-aide)) .erp-champ { grid-row: span 2; }
/* Le display: grid ci-dessus l'emporterait sinon sur le display: none de [hidden] —
   plus specifique, il doit le rester pour qu'un champ masque en JavaScript le reste. */
.erp-champs-cote-a-cote .erp-champ[hidden] { display: none; }

.erp-carte form .erp-champ input,
.erp-carte form .erp-champ select,
.erp-carte form .erp-champ textarea {
    font: inherit; font-size: 14px; padding: 9px 12px; width: 100%;
    color: var(--erp-encre); border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit); background-color: #fff;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition), background var(--erp-transition);
}
.erp-carte form .erp-champ select:hover,
.erp-carte form .erp-champ textarea:hover { border-color: #B9C6D6; }
.erp-carte form .erp-champ select:focus,
.erp-carte form .erp-champ textarea:focus { outline: none; border-color: var(--erp-accent); box-shadow: var(--erp-lueur-accent); }
.erp-carte form .erp-champ textarea { resize: vertical; }
.erp-carte form .erp-champ :disabled { background: var(--erp-fond); color: var(--erp-secondaire); }

.erp-pied-section {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px;
    margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--erp-bordure);
}
.erp-pied-section .erp-bouton { width: auto; padding: 10px 22px; }
.erp-refus { font-size: 13px; color: var(--erp-avertissement); text-align: right; max-width: 70ch; }

.erp-fiche-compacte { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0 0 6px; }
.erp-fiche-compacte dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--erp-secondaire); }
.erp-fiche-compacte dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--erp-encre); }

.erp-message.avertissement {
    background: #FDF0DA; color: #8A5300; border-left: 3px solid var(--erp-avertissement);
}
.erp-carte section, section.erp-carte { scroll-margin-top: 64px; }

/* ---------------------------------------------------- Pieces jointes par section

   Le bloc suit le formulaire de la section sans lui appartenir : un formulaire de
   depot ne peut pas etre imbrique dans un autre. Le filet a gauche rattache
   visuellement les pieces a la section qu'elles documentent. */
.erp-pieces {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 18px; padding: 14px 16px;
    background: var(--erp-fond);
    border-left: 3px solid var(--erp-accent-clair);
    border-radius: 0 var(--erp-rayon-petit) var(--erp-rayon-petit) 0;
}
.erp-libelle-champ {
    font-size: 12px; font-weight: 600; color: var(--erp-encre);
}
.erp-preuve {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px;
    background-color: #fff;
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    transition: box-shadow var(--erp-transition), border-color var(--erp-transition);
}
.erp-preuve:hover { border-color: #C5D3E3; box-shadow: 0 4px 14px -8px rgba(0, 59, 122, .35); }
.erp-preuve-infos { flex: 1 1 260px; min-width: 0; }
.erp-preuve-nom {
    display: block; font-size: 13px; font-weight: 600; color: var(--erp-encre);
    overflow-wrap: anywhere;
}
.erp-preuve-meta { display: block; font-size: 11px; color: var(--erp-secondaire); }
.erp-preuve .erp-bouton-discret { padding: 6px 14px; text-decoration: none; }

.erp-depot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.erp-depot input[type="file"] {
    flex: 1 1 260px; min-width: 0;
    font: inherit; font-size: 13px;
    padding: 7px 10px;
    color: var(--erp-encre-douce);
    background-color: #fff;
    border: 1px dashed var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    transition: border-color var(--erp-transition), background var(--erp-transition);
}
.erp-depot input[type="file"]:hover { border-color: var(--erp-accent); background: var(--erp-accent-clair); }
.erp-depot input[type="file"]:focus-visible { outline: 2px solid var(--erp-or); outline-offset: 2px; }

/* ------------------------------------------------------------- Piste d'audit

   Une entree par fait, la plus recente en tete. Le tableau des differences reste
   discret : c'est la chronologie qu'on lit d'abord, le detail ensuite. Chaque
   entree porte son point sur le fil, comme une frise. */
.erp-piste { list-style: none; margin: 0; padding: 0; }
.erp-piste li {
    position: relative;
    padding: 12px 0 12px 20px;
    border-left: 2px solid var(--erp-accent-clair);
}
.erp-piste li::before {
    content: "";
    position: absolute; left: -6px; top: 18px;
    width: 10px; height: 10px; border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--erp-accent);
    box-shadow: 0 0 0 3px #fff;
}
.erp-piste li:first-child::before { background: var(--erp-or); border-color: var(--erp-or); }
.erp-piste li + li { border-top: 1px solid var(--erp-bordure); }
.erp-piste-entete {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 14px; color: var(--erp-encre);
}
.erp-piste-entete span { font-size: 12px; color: var(--erp-secondaire); flex: none; }
.erp-piste-auteur { font-size: 12px; color: var(--erp-secondaire); }

.erp-piste-diff { width: 100%; border-collapse: collapse; margin-top: 8px; }
.erp-piste-diff th {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--erp-secondaire); text-align: left; padding: 4px 10px 4px 0;
}
.erp-piste-diff td {
    font-size: 13px; padding: 4px 10px 4px 0; vertical-align: top;
    border-top: 1px solid var(--erp-bordure); overflow-wrap: anywhere;
}
.erp-piste-diff td:first-child { color: var(--erp-encre); font-weight: 500; width: 30%; }

/* --------------------------------------------------------- Tableau de bord

   Les indicateurs d'abord, puis la tendance, puis les repartitions : on lit du
   plus resume au plus detaille. Les diagrammes sont des blocs dimensionnes en
   pourcentage — six batons ne justifient pas de charger une bibliotheque. Les
   barres se remplissent a l'ouverture : la donnee arrive, elle n'est pas posee. */
.erp-grille-cartes {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.erp-indicateurs {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.erp-indicateur {
    position: relative;
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px;
    background-color: #fff;
    border: 1px solid var(--erp-bordure);
    border-top: 3px solid var(--erp-accent);
    border-radius: var(--erp-rayon);
    box-shadow: var(--erp-ombre-carte);
    overflow: hidden;
    transition: transform var(--erp-transition), box-shadow var(--erp-transition);
}
/* Une lueur marine dans le coin, qui monte au survol. */
.erp-indicateur::after {
    content: "";
    position: absolute; right: -40px; top: -40px; width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 59, 122, .10), transparent 70%);
    transition: transform var(--erp-transition-lente), opacity var(--erp-transition-lente);
    opacity: .6;
    pointer-events: none;
}
.erp-indicateur:hover { transform: translateY(-2px); box-shadow: var(--erp-ombre-carte-survol); }
.erp-indicateur:hover::after { transform: scale(1.4); opacity: 1; }
.erp-indicateur.alerte { border-top-color: var(--erp-avertissement); }
.erp-indicateur.alerte::after { background: radial-gradient(circle, rgba(199, 119, 0, .14), transparent 70%); }
.erp-indicateur-valeur { font-size: 30px; font-weight: 700; color: var(--erp-encre); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.erp-indicateur-libelle { font-size: 13px; font-weight: 600; color: var(--erp-encre-douce); }
.erp-indicateur-detail { font-size: 11.5px; color: var(--erp-secondaire); }

.erp-repartition { list-style: none; margin: 0; padding: 0; }
.erp-repartition li {
    display: grid; align-items: center; gap: 4px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 0;
}
.erp-repartition li + li { border-top: 1px solid var(--erp-bordure); }
.erp-repartition-libelle { font-size: 13px; color: var(--erp-encre); overflow-wrap: anywhere; }
.erp-repartition-valeur { font-size: 12px; color: var(--erp-secondaire); white-space: nowrap; font-variant-numeric: tabular-nums; }
.erp-repartition-barre {
    grid-column: 1 / -1;
    display: block; height: 6px;
    background: var(--erp-fond);
    border-radius: 3px; overflow: hidden;
}
.erp-repartition-barre span {
    display: block; height: 100%;
    background: var(--erp-degrade-jauge);
    border-radius: 3px;
    transform-origin: left;
    animation: erp-remplir 900ms cubic-bezier(.2, .7, .2, 1) 200ms both;
}
.erp-repartition li:nth-child(2) .erp-repartition-barre span { animation-delay: 260ms; }
.erp-repartition li:nth-child(3) .erp-repartition-barre span { animation-delay: 320ms; }
.erp-repartition li:nth-child(4) .erp-repartition-barre span { animation-delay: 380ms; }
.erp-repartition li:nth-child(n+5) .erp-repartition-barre span { animation-delay: 440ms; }

.erp-tendance {
    display: flex; align-items: flex-end; gap: 8px;
    height: 180px; padding-top: 8px;
    overflow-x: auto;
}
.erp-tendance-mois {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 1 0 42px; height: 100%;
}
.erp-tendance-barres {
    display: flex; align-items: flex-end; justify-content: center; gap: 3px;
    flex: 1; width: 100%; min-height: 0;
}
.erp-tendance-barres span {
    width: 12px; border-radius: 2px 2px 0 0; min-height: 2px;
    transform-origin: bottom;
    animation: erp-monter 800ms cubic-bezier(.2, .7, .2, 1) both;
    transition: filter var(--erp-transition);
}
.erp-tendance-mois:nth-child(2) .erp-tendance-barres span { animation-delay: 60ms; }
.erp-tendance-mois:nth-child(3) .erp-tendance-barres span { animation-delay: 120ms; }
.erp-tendance-mois:nth-child(4) .erp-tendance-barres span { animation-delay: 180ms; }
.erp-tendance-mois:nth-child(5) .erp-tendance-barres span { animation-delay: 240ms; }
.erp-tendance-mois:nth-child(6) .erp-tendance-barres span { animation-delay: 300ms; }
.erp-tendance-mois:nth-child(n+7) .erp-tendance-barres span { animation-delay: 360ms; }
.erp-tendance-mois:hover .erp-tendance-barres span { filter: brightness(1.12); }
.erp-tendance-barres .ouvertures { background: var(--erp-degrade-jauge); }
.erp-tendance-barres .clotures { background: linear-gradient(180deg, #F2B54A, var(--erp-or)); }
.erp-tendance-periode { font-size: 11px; color: var(--erp-secondaire); white-space: nowrap; }

.erp-legende {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 0; font-size: 12px; color: var(--erp-secondaire);
}
.erp-legende span { width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.erp-legende span:first-child { margin-left: 0; }
.erp-legende .ouvertures { background: var(--erp-accent); }
.erp-legende .clotures { background: var(--erp-or); }

/* ---------------------------------------------------- Notifications et journal */
.erp-cases { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 10px; }

.erp-livraison {
    padding: 3px 10px;
    font-size: 11.5px; font-weight: 600;
    border-radius: 11px;
}
.erp-livraison.envoye { background: #E3F1E9; color: var(--erp-succes); }
.erp-livraison.en-cours { background: var(--erp-accent-clair); color: var(--erp-accent); }
.erp-livraison.en-cours::before { animation: erp-respirer 2.2s ease-out infinite; }
.erp-livraison.echec { background: #FBE9E9; color: var(--erp-danger); }

/* Le message est affiche dans un cadre isole : il porte ses propres styles, ecrits
   pour Outlook, et n'a rien a faire dans la mise en page de l'application. */
.erp-apercu-message {
    width: 100%; height: 560px;
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    background-color: #fff;
}

/* La case du droit remplace la puce : meme gouttiere, meme alignement. */
.erp-puce-case { display: flex; justify-content: center; padding-top: 3px; }
.erp-puce-case input { width: 15px; height: 15px; accent-color: var(--erp-accent); cursor: pointer; }
.erp-puce-case input:disabled { cursor: not-allowed; opacity: .55; }
.erp-droits li:has(.erp-puce-case input:checked) { opacity: 1; }

/* ------------------------------------------------------------------- Le logo

   Il est facultatif : la mise en page tient avec ou sans lui. La hauteur est
   contrainte, la largeur libre — un logo large ne doit pas pousser le titre
   hors du bandeau, et un logo haut ne doit pas l'epaissir. */
.erp-entete-gauche { display: flex; align-items: center; gap: 14px; min-width: 0; }
.erp-logo-entete { height: 34px; width: auto; max-width: 180px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }

.erp-logo-connexion {
    display: block; margin: 0 auto 18px;
    height: 56px; width: auto; max-width: 100%; object-fit: contain;
}

.erp-logo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.erp-logo-apercu {
    display: grid; place-items: center;
    width: 190px; height: 76px; flex: none; padding: 8px;
    background: var(--erp-fond);
    border: 1px dashed var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
}
.erp-logo-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.erp-logo-actions { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.erp-logo-actions input[type="file"] {
    font: inherit; font-size: 13px; padding: 7px 10px;
    color: var(--erp-encre-douce); background-color: #fff;
    border: 1px dashed var(--erp-bordure); border-radius: var(--erp-rayon-petit);
    transition: border-color var(--erp-transition), background var(--erp-transition);
}
.erp-logo-actions input[type="file"]:hover { border-color: var(--erp-accent); background: var(--erp-accent-clair); }
.erp-logo-actions input[type="file"]:focus-visible { outline: 2px solid var(--erp-or); outline-offset: 2px; }

@media (max-width: 640px) {
    .erp-logo-entete { height: 26px; max-width: 120px; }
    /* Sur un petit ecran, le bandeau passe sur deux lignes plutot que d'ecraser
       le nom de l'application contre celui de l'utilisateur. */
    .erp-entete { flex-wrap: wrap; gap: 10px 20px; padding: 12px 16px; }
    .erp-entete-droite { width: 100%; justify-content: space-between; }
    .erp-nav { padding: 0 8px; }
}

/* L'apercu de l'icone est carre et petit : le montrer a la taille du logo
   donnerait une idee fausse de ce que le navigateur affichera. */
.erp-icone-apercu { width: 76px; }
.erp-icone-apercu img { max-width: 40px; max-height: 40px; }

/* ------------------------------------------------------- Moins de mouvement

   Qui a demande a son systeme de reduire les animations les obtient toutes
   eteintes, d'un coup : rien n'apparait, ne glisse, ne se remplit ni ne respire.
   Ce qui reste est l'etat final, immediatement. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .erp-bouton:hover, .erp-bouton-lien:hover, .erp-bouton-discret:hover, .erp-indicateur:hover { transform: none; }
}

/* ------------------------------------------------- Listes deroulantes ----

   Une seule regle pour toutes les listes de l'application : l'apparence du
   systeme est remplacee par la notre, sans quoi Windows, macOS et Android en
   dessinent trois differentes sur le meme ecran.

   Le chevron est une image SVG inscrite dans la feuille — pas un caractere, qui
   dependrait de la police, ni un fichier de plus a servir. Sa couleur est celle
   de l'encre douce ; au survol et au focus elle passe au marine, de sorte que la
   liste reponde comme les autres champs. */

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
    text-overflow: ellipsis;
}

/* La place du chevron, pour qu'aucun libelle long ne passe dessous.
   Les blocs plus haut posent un « padding » raccourci, plus specifique que « select » :
   la reserve se redit donc ici, sous les memes selecteurs qu'eux. */
select,
.erp-formulaire select,
.erp-recherche select,
.erp-ligne-ajout select,
.erp-carte form .erp-champ select { padding-right: 36px; }

select:hover:not(:disabled) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003B7A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003B7A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select:disabled { cursor: not-allowed; opacity: .7; }

/* Une liste ouverte sur plusieurs lignes n'a pas de chevron a montrer. */
select[multiple], select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 12px;
    cursor: auto;
}

/* Les navigateurs qui savent habiller les options le font aux couleurs de la
   charte ; les autres ignorent ces regles sans dommage. */
select option { padding: 6px 10px; color: var(--erp-encre); }
select option:checked { background-color: var(--erp-accent-clair); font-weight: 600; }
select optgroup { font-weight: 600; color: var(--erp-secondaire); }

/* ------------------------------------------ Liste deroulante avec recherche ----

   Posee par erp-listes.js devant les listes assez longues pour qu'on s'y perde. La
   recherche vit DANS le panneau, sous le bouton : elle fait partie de la liste, et non
   d'un champ pose au-dessus d'elle.

   Sans JavaScript, rien de tout cela n'existe : la liste native reste visible et
   conserve l'habillage general pose plus haut. */

.erp-liste { position: relative; width: 100%; }

/* La liste native demeure dans la page — elle porte le nom, la valeur et l'obligation
   de saisie. Transparente et posee sous le bouton, elle reste mesurable par le
   navigateur, qui sait donc ou afficher « Veuillez renseigner ce champ ». */
.erp-liste-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.erp-liste-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    font: inherit;
    font-size: 14px;
    text-align: left;
    padding: 9px 12px;
    color: var(--erp-encre);
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
}

.erp-liste-bouton:hover:not(:disabled) { border-color: #B9C6D6; }

.erp-liste-bouton:focus-visible,
.erp-liste.ouverte .erp-liste-bouton {
    outline: none;
    border-color: var(--erp-accent);
    box-shadow: var(--erp-lueur-accent);
}

/* Le chevron se retourne quand le panneau est ouvert : l'etat se lit sans chercher. */
.erp-liste.ouverte .erp-liste-bouton {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003B7A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}

.erp-liste-bouton:disabled { cursor: not-allowed; background-color: var(--erp-fond); color: var(--erp-secondaire); }

/* L'absence de choix se montre en gris : « — Choisir — » n'est pas une valeur. */
.erp-liste-bouton.neutre .erp-liste-valeur { color: var(--erp-secondaire); }

.erp-liste-valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* « display: flex » l'emporterait sur le « display: none » que le navigateur attache a
   l'attribut « hidden » : sans cette ligne, le panneau resterait ouvert en permanence. */
.erp-liste-panneau[hidden] { display: none; }

/* La carte qui porte une liste ouverte passe devant les suivantes. Les cartes sont
   animees a l'ouverture de la page, et une transformation cree un contexte d'empilement :
   le z-index du panneau ne porterait pas au-dela de sa propre carte. */
.erp-carte:has(.erp-liste.ouverte) { position: relative; z-index: 40; }

.erp-liste-panneau {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--erp-bordure);
    border-radius: var(--erp-rayon-petit);
    background-color: #fff;
    box-shadow: var(--erp-ombre-carte-survol);
    overflow: hidden;
    animation: erp-liste-apparait var(--erp-transition) both;
}

@keyframes erp-liste-apparait {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* La recherche, premier element du panneau : la loupe a sa place reservee a gauche.
   Les blocs de formulaire plus haut — « .erp-carte form .erp-champ input » — sont plus
   specifiques : leurs selecteurs se redisent ici, faute de quoi le texte passerait sous
   la loupe. */
.erp-liste-panneau .erp-liste-recherche,
.erp-carte form .erp-champ .erp-liste-recherche,
.erp-formulaire .erp-liste-recherche {
    font: inherit;
    font-size: 13.5px;
    padding: 9px 12px 9px 32px;
    color: var(--erp-encre);
    border: none;
    border-bottom: 1px solid var(--erp-bordure);
    border-radius: 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236C757D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 13px;
    width: 100%;
}

.erp-liste-panneau .erp-liste-recherche:focus,
.erp-carte form .erp-champ .erp-liste-recherche:focus,
.erp-formulaire .erp-liste-recherche:focus {
    outline: none;
    border-color: transparent;
    border-bottom-color: var(--erp-accent);
    box-shadow: none;
}

.erp-liste-options {
    list-style: none;
    margin: 0;
    padding: 4px;
    /* Une dizaine de lignes : au-dela le panneau defile plutot que de couvrir l'ecran. */
    max-height: 260px;
    overflow-y: auto;
}

.erp-liste-option {
    padding: 7px 10px;
    font-size: 13.5px;
    color: var(--erp-encre);
    border-radius: var(--erp-rayon-petit);
    cursor: pointer;
}

.erp-liste-option.neutre { color: var(--erp-secondaire); font-style: italic; }

/* Reperee : la ligne ou se trouve le clavier ou la souris. Choisie : celle qui vaut. */
.erp-liste-option.reperee { background-color: var(--erp-accent-clair); }

.erp-liste-option.choisie {
    font-weight: 600;
    color: var(--erp-accent);
}

.erp-liste-option.choisie::after {
    content: "✓";
    float: right;
    font-weight: 700;
}

.erp-liste-option.desactivee { color: var(--erp-secondaire); cursor: not-allowed; opacity: .6; }

.erp-liste-vide {
    margin: 0;
    padding: 14px 12px;
    font-size: 13px;
    color: var(--erp-secondaire);
    text-align: center;
}