/*
 * tokens-mesrs.css - couche de jetons unique du MESRS HelpDesk
 *
 * Source des valeurs : feuilles de style réelles des portails de l'État béninois.
 *   marine #0a3764  couleur de marque de service-public.bj (portail national des services publics)
 *   or     #b8963e  vieil or ; remplace le #cdb30c du site du MESRS, trop vert
 *                    et trop sature pour un accent (choix valide le 2026-09-28)
 *   vert   #287d3c / ambre #f0a945 / rouge #da1414  sémantique de service-public.bj
 *
 * Règle : aucune couleur en dur ailleurs. Les feuilles dashboard-premium.css,
 * modules-premium.css et auth-reset-theme.css consomment uniquement ces jetons.
 */

:root {
    /* --- marque --- */
    --mesrs-marine: #0A3764;
    --mesrs-marine-fort: #082B4F;
    --mesrs-marine-clair: #155089;
    --mesrs-marine-voile: #E3EAF4;
    --mesrs-marine-rgb: 10, 55, 100;

    --mesrs-or: #B8963E;
    --mesrs-or-texte: #7A5A1C;
    --mesrs-or-voile: #F6EEDC;
    --mesrs-or-rgb: 184, 150, 62;

    /* texte posé sur un fond marine (barre latérale, héros, panneau d'engagement) */
    --mesrs-sur-marine: #E7EEF7;
    --mesrs-sur-marine-2: #9FB4CE;
    --mesrs-sur-marine-ligne: #1E5085;
    /* sémantique éclaircie, lisible sur fond sombre */
    --mesrs-ok-sur-sombre: #6FD3A2;
    --mesrs-alerte-sur-sombre: #F79AA5;

    /* --- neutres, biaisés vers le marine --- */
    --mesrs-encre: #12243A;
    --mesrs-encre-2: #45566B;
    --mesrs-encre-3: #65758A;
    --mesrs-ligne: #D6DEE9;
    --mesrs-ligne-forte: #AEBBCB;
    --mesrs-fond: #F2F5FA;
    --mesrs-surface: #FFFFFF;
    --mesrs-surface-rgb: 255, 255, 255;
    --mesrs-surface-2: #EEF2F8;
    --mesrs-ombre-rgb: 18, 36, 58;

    /* --- sémantique : distincte de la marque --- */
    --mesrs-ok: #287D3C;
    --mesrs-ok-texte: #1F6630;
    --mesrs-ok-bord: #A9D6B6;
    --mesrs-ok-voile: #E1F0E5;
    --mesrs-ok-brume: #F1F8F3;

    --mesrs-attente: #C07A0B;
    --mesrs-attente-texte: #8F5B08;
    --mesrs-attente-bord: #E9CE9A;
    --mesrs-attente-voile: #FAEBD2;
    --mesrs-attente-brume: #FDF6EA;

    --mesrs-alerte: #C31414;
    --mesrs-alerte-texte: #A31111;
    --mesrs-alerte-rgb: 195, 20, 20;
    --mesrs-alerte-bord: #EDB3B3;
    --mesrs-alerte-voile: #F8E1E1;
    --mesrs-alerte-brume: #FDF1F1;

    --mesrs-info: #1F5FAF;
    --mesrs-info-texte: #174A8A;
    --mesrs-info-bord: #B6CDE9;
    --mesrs-info-voile: #E3EDF9;
    --mesrs-info-brume: #F2F7FC;

    /* --- typographie : les polices des portails de l'État --- */
    --mesrs-titre: 'Montserrat', 'Segoe UI', Helvetica, sans-serif;
    --mesrs-texte: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    --mesrs-donnees: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    /* --- Ombres et profondeurs modernes (Designers de renom) --- */
    --mesrs-shadow-xs: 0 1px 2px 0 rgba(var(--mesrs-ombre-rgb), 0.04);
    --mesrs-shadow-sm: 0 1px 3px 0 rgba(var(--mesrs-ombre-rgb), 0.06), 0 1px 2px -1px rgba(var(--mesrs-ombre-rgb), 0.04);
    --mesrs-shadow-md: 0 4px 16px -2px rgba(var(--mesrs-ombre-rgb), 0.07), 0 2px 6px -2px rgba(var(--mesrs-ombre-rgb), 0.03);
    --mesrs-shadow-lg: 0 14px 32px -4px rgba(var(--mesrs-ombre-rgb), 0.09), 0 4px 12px -2px rgba(var(--mesrs-ombre-rgb), 0.04);
    --mesrs-shadow-xl: 0 22px 48px -8px rgba(var(--mesrs-ombre-rgb), 0.14), 0 8px 18px -4px rgba(var(--mesrs-ombre-rgb), 0.05);
    --mesrs-shadow-card: 0 2px 8px -2px rgba(var(--mesrs-ombre-rgb), 0.06), 0 12px 24px -10px rgba(var(--mesrs-ombre-rgb), 0.08);
    --mesrs-shadow-glow-marine: 0 0 22px 0 rgba(10, 55, 100, 0.22);
    --mesrs-shadow-glow-or: 0 0 22px 0 rgba(184, 150, 62, 0.22);
    --mesrs-shadow-glow-ok: 0 0 22px 0 rgba(40, 125, 60, 0.22);

    /* --- Dégradés institutionnels subtils --- */
    --mesrs-grad-marine: linear-gradient(135deg, #0A3764 0%, #155089 100%);
    --mesrs-grad-marine-dark: linear-gradient(135deg, #082B4F 0%, #0A3764 100%);
    --mesrs-grad-surface: linear-gradient(180deg, var(--mesrs-surface) 0%, var(--mesrs-surface-2) 100%);
    --mesrs-grad-or: linear-gradient(135deg, #B8963E 0%, #D4AF37 100%);
    --mesrs-grad-drapeau: linear-gradient(to right, #008751 0%, #008751 33.3%, #FCD116 33.3%, #FCD116 66.6%, #E8112D 66.6%, #E8112D 100%);

    /* --- Verre & Glassmorphism --- */
    --mesrs-glass-bg: rgba(255, 255, 255, 0.88);
    --mesrs-glass-border: rgba(214, 222, 233, 0.7);
    --mesrs-glass-blur: blur(12px);
}

/*
 * Thème sombre.
 *
 * Le personnalisateur pose data-theme="dark" sur <html>. Sans ce bloc, les
 * surfaces restaient claires pendant que la coquille passait au sombre, et le
 * titre de page - que Tailwick éclaircit - devenait illisible.
 *
 * La marque s'éclaircit pour rester lisible sur fond sombre : #0A3764 y est
 * trop proche du fond. Les teintes sémantiques suivent la même logique, et
 * les voiles deviennent des fonds sourds au lieu de pastels.
 */
html[data-theme="dark"] {
    --mesrs-fond: #0B1420;
    --mesrs-surface: #121E2C;
    --mesrs-surface-rgb: 18, 30, 44;
    --mesrs-surface-2: #1A2836;
    --mesrs-encre: #E6EDF5;
    --mesrs-encre-2: #A9BACB;
    --mesrs-encre-3: #8194A8;
    --mesrs-ligne: #24374A;
    --mesrs-ligne-forte: #375070;
    --mesrs-ombre-rgb: 0, 0, 0;

    --mesrs-marine: #3B82CC;
    --mesrs-marine-2: #4C93DB;
    --mesrs-marine-texte: #85B8EC;
    --mesrs-marine-fort: #1E5085;
    --mesrs-marine-clair: #5EA3E0;
    --mesrs-marine-voile: #16283B;
    --mesrs-marine-rgb: 59, 130, 204;

    --mesrs-or: #D4B266;
    --mesrs-or-texte: #E2C483;
    --mesrs-or-voile: #2A2316;
    --mesrs-or-rgb: 212, 178, 102;

    --mesrs-ok: #3FA05A;
    --mesrs-ok-texte: #6ACB8C;
    --mesrs-ok-bord: #2C5C3E;
    --mesrs-ok-voile: #14301F;
    --mesrs-ok-brume: #101F16;

    --mesrs-attente: #D9A03A;
    --mesrs-attente-texte: #E8B75F;
    --mesrs-attente-bord: #5C441A;
    --mesrs-attente-voile: #2E2412;
    --mesrs-attente-brume: #201A0E;

    --mesrs-alerte: #DE5A5A;
    --mesrs-alerte-texte: #F0908F;
    --mesrs-alerte-bord: #5E2A2A;
    --mesrs-alerte-voile: #331A1A;
    --mesrs-alerte-brume: #241313;
    --mesrs-alerte-rgb: 222, 90, 90;

    --mesrs-info: #4A8FD4;
    --mesrs-info-texte: #8CBEEE;
    --mesrs-info-bord: #2B4A68;
    --mesrs-info-voile: #16293C;
    --mesrs-info-brume: #111F2E;
}

/*
 * Alias de compatibilité.
 * Les feuilles existantes appellent --brand, --ink, --line… Ces alias les
 * raccordent aux jetons ci-dessus, le temps que les usages soient repris.
 */
:root {
    --brand: var(--mesrs-marine);
    --brand-strong: var(--mesrs-marine-fort);
    --accent: var(--mesrs-or);
    --accent-2: var(--mesrs-alerte);
    --line: var(--mesrs-ligne);
    --ink: var(--mesrs-encre);
    --muted: var(--mesrs-encre-2);
    --surface: var(--mesrs-surface);
    --surface-soft: var(--mesrs-surface-2);
    --positive: var(--mesrs-ok);
    --warning: var(--mesrs-attente);
    --danger: var(--mesrs-alerte);
}

/* Chiffres alignés partout où ils se comparent : durées, compteurs, montants. */
.mesrs-donnees,
.premium-table td,
.module-table td {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Accessibilite
 *
 * Le lien d'evitement doit rester dans l'ordre de tabulation : display:none le
 * retirerait, ce qui reviendrait a ne pas l'avoir. Il est donc sorti du champ
 * visible et ramene au premier plan des qu'il recoit le focus.
 * ------------------------------------------------------------------------- */
.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--mesrs-marine);
    color: var(--mesrs-sur-marine);
    font-family: var(--mesrs-texte);
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: 0.75rem;
}

.lien-evitement:focus {
    left: 0;
    outline: 3px solid var(--mesrs-or);
    outline-offset: -3px;
}

/* Un focus visible partout : le contour par defaut disparait sous les remises
 * a zero de Tailwind, laissant l'usager au clavier sans reperage. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--mesrs-marine-clair);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Le contenu principal recoit le focus au saut : ne pas l'encadrer pour
 * autant, la cible n'est pas un controle. */
main:focus,
main:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * Priorite distincte du statut
 *
 * Statut et priorite partageaient la meme pastille : « Fermé » et « Normale »
 * se confondaient d'un coup d'oeil. Le statut garde la pastille pleine - c'est
 * l'etat du dossier, ce qu'on cherche en premier. La priorite devient un point
 * colore suivi du libelle, sans fond : une propriete, pas un etat.
 * ------------------------------------------------------------------------- */
.badge-pill.badge-pill--priorite,
.module-badge.module-badge--priorite {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-pill.badge-pill--priorite::before,
.module-badge.module-badge--priorite::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}

/* Compteur de non-lus : une seule teinte, l'or de la charte. Il etait orange
 * dans la barre du haut et or dans le menu. Le rouge est reserve a ce qui va
 * mal ; une notification non lue n'est pas une erreur. Couleurs fixes pour
 * rester lisible sur barre claire comme sur barre marine. */
.pastille-notif {
    background: #B8963E;
    color: #1F1705;
}

/* Bandeau de presence sur la page ticket (detection de collision). */
.ticket-presence {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--mesrs-ligne);
    background: var(--mesrs-surface-2);
    color: var(--mesrs-encre-2);
}

.ticket-presence[data-ton="attention"] {
    border-color: var(--mesrs-attente-bord);
    background: var(--mesrs-attente-voile);
    color: var(--mesrs-attente-texte);
}

/* Choix en pastilles (impact, urgence) : un clic, lisible au doigt. */
.choix-pastille { position: relative; }
.choix-pastille input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix-pastille span {
    display: inline-flex; align-items: center; min-height: 2.25rem;
    padding: 0.35rem 0.9rem; border-radius: 9999px;
    border: 1px solid var(--mesrs-ligne-forte); background: var(--mesrs-surface);
    color: var(--mesrs-encre-2); font-size: 0.875rem; font-weight: 500;
}
.choix-pastille:hover span { border-color: var(--mesrs-marine-clair); color: var(--mesrs-encre); }
.choix-pastille input:checked + span {
    border-color: var(--mesrs-marine); background: var(--mesrs-marine); color: #FFFFFF;
}
.choix-pastille input:focus-visible + span { outline: 2px solid var(--mesrs-or-texte); outline-offset: 2px; }

/* Incident ou demande : deux parcours cote a cote. */
.choix-nature { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.choix-nature__option {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    border: 1px solid var(--mesrs-ligne-forte); border-radius: 0.75rem;
    background: var(--mesrs-surface); color: var(--mesrs-encre-2);
    transition: border-color .15s ease, background-color .15s ease;
}
.choix-nature__option span { display: flex; flex-direction: column; line-height: 1.25; }
.choix-nature__option strong { font-size: 0.9rem; color: var(--mesrs-encre); }
.choix-nature__option small { font-size: 0.78rem; color: var(--mesrs-encre-3); }
.choix-nature__option:hover { border-color: var(--mesrs-marine-clair); }
.choix-nature__option:focus-visible { outline: 2px solid var(--mesrs-or-texte); outline-offset: 2px; }
.choix-nature__option[aria-current="page"] {
    border-color: var(--mesrs-marine); background: var(--mesrs-marine-voile);
    box-shadow: inset 3px 0 0 var(--mesrs-marine);
}

/* Catalogue des demandes. */
.catalogue-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.catalogue-entree {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem;
    border: 1px solid var(--mesrs-ligne); border-radius: 0.875rem; background: var(--mesrs-surface);
}
.catalogue-entree__tete { display: flex; align-items: center; gap: 0.6rem; }
.catalogue-entree__icone {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
    background: var(--mesrs-marine-voile); color: var(--mesrs-marine);
}
.catalogue-entree__titre { font-weight: 600; color: var(--mesrs-encre); }
.catalogue-entree__texte { font-size: 0.85rem; color: var(--mesrs-encre-3); }
.catalogue-lien {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
    color: var(--mesrs-marine);
}
.catalogue-lien:hover { background: var(--mesrs-marine-voile); }
.catalogue-lien:focus-visible { outline: 2px solid var(--mesrs-marine); outline-offset: 2px; }

/* Nature et probleme, en pastille dans les listes et la fiche. */
.pastille-nature {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.5rem;
    border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: .03em;
    background: var(--mesrs-or-voile); color: var(--mesrs-or-texte);
}
.pastille-probleme { background: var(--mesrs-info-voile); color: var(--mesrs-info-texte); }
.pastille-probleme[data-statut="erreur_connue"] { background: var(--mesrs-attente-voile); color: var(--mesrs-attente-texte); }
.pastille-probleme[data-statut="resolu"] { background: var(--mesrs-ok-voile); color: var(--mesrs-ok-texte); }

/* Tout element pilote par x-show reste masque tant qu'Alpine n'a pas demarre :
 * sans cette regle, les fenetres d'edition (agents, utilisateurs...) apparaissaient
 * un instant a chaque chargement de page. Alpine retire x-cloak a l'initialisation. */
[x-cloak] { display: none !important; }

/* Etats de validation de formulaire conformes WCAG 1.4.11 */
.form-field-error {
    border-color: var(--mesrs-alerte) !important;
    background-color: var(--mesrs-alerte-brume);
}

.form-field-error:focus {
    outline: none;
    border-color: var(--mesrs-alerte-texte) !important;
    box-shadow: 0 0 0 3px rgba(var(--mesrs-alerte-rgb), 0.15) !important;
}

.form-error-message {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mesrs-alerte-texte);
}