/* Charte commune des portails Alyneia (Espace RH, Espace Gestion, Espace Légal) :
   marine #003366, framboise #cc3366, police Designosaur pour les titres. Le bloc :root
   est celui des portails de référence, au caractère près — tests/test_charte.py le garde.
   Le marine est la couleur de structure, le framboise celle de l'action. */
@font-face {
  font-family: "Designosaur";
  src: url("/static/fonts/Designosaur.ttf") format("truetype");
  font-display: swap;
}

:root {
  --marine: #003366;
  --marine-clair: #0d4a80;
  --framboise: #cc3366;
  --framboise-claire: #ec6f9c;
  --accent: #cc3366;
  --accent-fonce: #a82a55;
  --fond: #f4f6fa;
  --carte: #ffffff;
  --texte: #22304a;
  --texte-doux: #5b6a80;
  --bordure: #e2e8f0;
  --succes: #15803d;
  --erreur: #b91c1c;
}

* { box-sizing: border-box; margin: 0; }
dialog { margin: auto; }
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* La charte ne souligne pas les liens ; mais en plein texte le framboise ne contraste qu'à
   2,66:1 avec le texte, sous le seuil où la couleur seule suffit (WCAG 1.4.1). On garde
   donc le soulignement dans un paragraphe, pas dans les tableaux. */
p a, .encadre-info a { text-decoration: underline; }

.lien-evitement { position: absolute; left: -9999px; top: 0; }
.lien-evitement:focus { left: 12px; top: 12px; z-index: 50; background: #fff; padding: 8px 12px; border-radius: 8px; }

.disposition { display: flex; min-height: 100vh; }

/* ---------- Menu latéral ---------- */
.menu {
  width: 230px; flex-shrink: 0;
  background: var(--marine); color: #cbd5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.logo {
  padding: 20px; color: #fff; font-size: 1.3rem;
  font-family: "Designosaur", -apple-system, sans-serif;
  display: flex; align-items: center; gap: 12px;
}
.logo img { width: 42px; height: 42px; background: #fff; border-radius: 10px; padding: 4px; flex-shrink: 0; }
.logo span { color: var(--framboise-claire); }
.logo small { display: block; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 600; color: #94a3b8; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.menu nav { flex: 1; min-height: 0; padding: 6px 0 14px; overflow-y: auto; }
.menu nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 20px; color: #cbd5e1; font-size: 0.92rem;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.menu nav a .intitule { flex: 1; min-width: 0; }
.menu nav a:hover { background: var(--marine-clair); color: #fff; text-decoration: none; }
.menu nav a.actif { background: var(--marine-clair); color: #fff; border-left-color: var(--framboise-claire); }
.menu nav a:hover .icone, .menu nav a.actif .icone { opacity: 1; }
.menu nav .separateur { margin: 14px 20px 4px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7f95b3; }
.menu-pied { padding: 14px 20px; border-top: 1px solid #1a4d80; font-size: 0.85rem; }
.menu-pied small { color: #94a3b8; }
.menu-pied a { display: inline-block; margin-top: 6px; color: var(--framboise-claire); }

.pastille {
  flex-shrink: 0; background: var(--framboise); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; font-weight: 700; line-height: 1.5;
}
.menu nav a.actif .pastille { background: #fff; color: var(--framboise); }

/* Le menu se replie derrière un bouton sous 900 px. La bascule est une case à cocher
   masquée, et non un <details> : le navigateur masque le contenu d'un <details> fermé
   d'une façon qu'un display ne parvient pas à annuler sur écran large. */
.bascule-menu { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-bouton {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 18px; color: #fff; font-weight: 600; font-size: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12); user-select: none;
}
.menu-bouton svg { width: 20px; height: 20px; flex: none; }
.bascule-menu:focus-visible ~ .menu-repliable > .menu-bouton { outline: 2px solid var(--framboise-claire); outline-offset: -2px; }
.menu-repliable, .menu-panneau { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 901px) { .menu-bouton { display: none; } }

/* ---------- Contenu ---------- */
main { flex: 1; min-width: 0; padding: 28px 34px 60px; max-width: 1240px; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.entete-page h1 { display: flex; align-items: center; gap: 11px; font-size: 1.45rem; font-family: "Designosaur", -apple-system, sans-serif; color: var(--marine); font-weight: 400; }
.entete-page .sous-titre { color: var(--texte-doux); font-size: 0.92rem; margin-top: 2px; }
.icone-titre { width: 22px; height: 22px; opacity: 0.55; flex-shrink: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
h2 { font-size: 1.05rem; margin: 26px 0 10px; color: var(--marine); }
h2:first-child { margin-top: 0; }
h3 { font-size: 0.95rem; margin: 18px 0 8px; }
.entete-groupe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; }
.entete-groupe h2 { margin: 0; }

/* ---------- Cartes & statistiques ---------- */
.carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { position: relative; display: block; background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; padding: 14px 18px; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
a.stat:hover { text-decoration: none; border-color: var(--framboise); box-shadow: 0 2px 10px rgba(0, 51, 102, .09); transform: translateY(-1px); }
a.stat:hover .valeur { color: var(--framboise); }
.stat .valeur { font-size: 1.7rem; font-weight: 700; color: var(--marine); }
.stat .intitule { font-size: 0.82rem; color: var(--texte-doux); }
.stat.stat-alerte .valeur { color: var(--framboise); }
.icone-stat { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; opacity: 0.22; }
.grille-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; }
.tableau th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-doux); padding: 6px 10px; background: #f8fafc; border-bottom: 1px solid var(--bordure); }
.tableau td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-size: 0.92rem; line-height: 1.35; }
.tableau td .texte-doux { font-size: 0.8rem; line-height: 1.25; }
.tableau td > div + div { margin-top: 1px; }
.tableau tr:last-child td { border-bottom: none; }
.tableau .vide { color: var(--texte-doux); text-align: center; padding: 14px; }
.tableau tr.ligne-groupe th { background: #f1f5f9; color: var(--marine); font-size: 0.82rem; }
.tableau tr.ligne-cliquable { cursor: pointer; }
.tableau tr.ligne-cliquable:hover { background: #f8fafc; }
.tableau tr.ligne-pale td { color: var(--texte-doux); }
.nowrap { white-space: nowrap; }
.objet { max-width: 420px; }
.objet .court { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.table-defilante { overflow-x: auto; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; background: #f1f5f9; color: #334155; }
/* Mêmes couleurs que dans les autres portails pour les mêmes états : déposé en bleu,
   abouti en vert, en échec en rouge, archivé en gris. */
.badge-reperee { background: #f1f5f9; color: #334155; }
.badge-en_analyse, .badge-a_decider, .badge-plafonnee { background: #fef3c7; color: #92400e; }
.badge-en_redaction { background: #e0e7ff; color: #4338ca; }
.badge-deposee { background: #dbeafe; color: #1d4ed8; }
.badge-gagnee, .badge-go, .badge-envoyee, .badge-ok { background: #dcfce7; color: #166534; }
.badge-perdue, .badge-echec, .badge-anomalie { background: #fee2e2; color: #b91c1c; }
.badge-abandonnee, .badge-no_go, .badge-inactif, .badge-neutre { background: #e2e8f0; color: #475569; }
.badge-simulee { background: #f3e8ff; color: #7e22ce; }
.badge-attention { background: #fef3c7; color: #92400e; }

/* Le compte à rebours d'une date limite : la même échelle que les alertes (J-7, J-3, J-1). */
.rebours { display: inline-block; min-width: 54px; text-align: center; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.rebours-depassee { background: #e2e8f0; color: #475569; text-decoration: line-through; }
.rebours-urgent { background: var(--erreur); color: #fff; }
.rebours-proche { background: #fde68a; color: #78350f; }
.rebours-semaine { background: #fce7f0; color: var(--accent-fonce); }
.rebours-loin { background: #f1f5f9; color: #334155; }

/* Le voyant : une pastille ronde sans nombre. */
.voyant { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; flex-shrink: 0; }
.voyant-ok { background: #16a34a; }
.voyant-attention { background: #f59e0b; }
.voyant-anomalie { background: #dc2626; }
.voyant-neutre { background: #cbd5e1; }
.etat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.4;
}
.bouton:hover { background: var(--accent-fonce); text-decoration: none; }
.bouton:active { transform: translateY(1px); }
.bouton .icone { width: 15px; height: 15px; opacity: 0.9; }
.bouton-secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bordure); }
.bouton-secondaire:hover { background: #f8fafc; border-color: var(--framboise); color: var(--framboise); }
.bouton-danger { background: #fff; color: var(--erreur); border: 1px solid #fecaca; }
.bouton-danger:hover { background: #fef2f2; }
.bouton-petit { padding: 4px 10px; font-size: 0.8rem; }
.bouton-petit .icone { width: 13px; height: 13px; }
.bouton-lien { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.bouton-lien:hover { text-decoration: underline; }
form.en-ligne { display: inline; }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.formulaire.trois { grid-template-columns: 1fr 1fr 1fr; }
.formulaire .pleine-largeur { grid-column: 1 / -1; }
.formulaire label, .champ label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--texte-doux); margin-bottom: 4px; }
.formulaire .aide, .champ .aide { font-size: 0.78rem; color: var(--texte-doux); margin-top: 3px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], input[type="time"], input[type="url"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bordure); border-radius: 8px;
  font-family: inherit; font-size: 0.92rem; background: #fff; color: var(--texte);
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* Le repère de focus, sur tout ce qui le prend : c'est le seul guide de qui navigue au clavier. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-fonce); outline-offset: 2px; border-radius: 4px;
}
.case { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.case input { width: auto; }
.formulaire-ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.formulaire-ligne > div { flex: 1; min-width: 130px; }
.boutons-formulaire { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.deux-champs { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }

/* Un formulaire de création posé au-dessus d'une liste se replie derrière son titre. */
details.repli { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; margin-bottom: 18px; }
details.repli > summary { cursor: pointer; padding: 12px 18px; font-weight: 600; color: var(--accent); list-style: none; display: flex; align-items: center; gap: 8px; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli[open] > summary { border-bottom: 1px solid var(--bordure); }
details.repli > .contenu-repli { padding: 16px 18px 18px; }

/* ---------- Messages ---------- */
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.92rem; }
.flash .icone { flex-shrink: 0; margin-top: 2px; }
.flash-succes { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash-erreur { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.encadre-info { background: #e9f0f7; border: 1px solid #c6d8ea; border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px; }
.encadre-alerte { background: #fef2f2; border: 1px solid #fecaca; color: var(--erreur); border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 14px; }
.encadre-attention { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 14px; }
.texte-doux { color: var(--texte-doux); font-size: 0.88rem; }
.lien-copiable { font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; word-break: break-all; background: #fff; border: 1px dashed var(--bordure); border-radius: 6px; padding: 6px 8px; margin-top: 6px; }

/* ---------- Bandeau de dossier et onglets ---------- */
.bandeau-dossier { background: #fff; border: 1px solid var(--bordure); border-radius: 10px; padding: 12px 16px 0; margin-bottom: 18px; }
.bandeau-dossier-titre { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; color: var(--marine); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bandeau-dossier-titre a { color: var(--marine); }
.bandeau-dossier-titre .texte-doux { font-weight: 400; font-size: 0.85rem; }
.onglets { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--bordure); margin: 0 0 20px; }
.onglets-dossier { margin: 0 -16px; padding: 0 8px; border-bottom: none; }
.onglets a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; color: var(--texte-doux); font-size: 0.9rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets a:hover { color: var(--texte); text-decoration: none; background: #f8fafc; }
.onglets a.onglet-actif { color: var(--framboise); border-bottom-color: var(--framboise); }
.onglets .compte-onglet { font-weight: 400; color: var(--texte-doux); }

/* Le bandeau de la date limite d'une consultation : ce qu'on vient vérifier d'abord. */
.bandeau-echeance { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; border: 1px solid transparent; flex-wrap: wrap; }
.bandeau-urgent { background: #fef2f2; border-color: #fecaca; color: var(--erreur); }
.bandeau-proche { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.bandeau-semaine, .bandeau-loin { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.bandeau-depassee, .bandeau-close { background: #f1f5f9; border-color: var(--bordure); color: #475569; }
.bandeau-echeance strong { font-size: 1.05rem; }

/* ---------- Définitions ---------- */
.definitions { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 0.92rem; }
.definitions dt { color: var(--texte-doux); font-weight: 600; font-size: 0.84rem; }
.definitions dd { margin: 0; white-space: pre-wrap; }

/* ---------- Connexion ---------- */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--marine); padding: 16px; }
.boite-connexion { background: #fff; border-radius: 14px; padding: 34px 32px; width: 400px; max-width: 100%; }
.logo-complet { text-align: center; padding-bottom: 18px; }
.logo-complet img { width: 64px; height: 64px; }
.logo-complet .nom { font-family: "Designosaur", -apple-system, sans-serif; font-size: 1.6rem; color: var(--marine); margin-top: 6px; }
.logo-complet .nom span { color: var(--framboise); }
.logo-complet small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--texte-doux); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.boite-connexion label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--texte-doux); margin: 12px 0 4px; }
.boite-connexion .bouton { width: 100%; justify-content: center; margin-top: 18px; padding: 10px; }
.separateur-connexion { display: flex; align-items: center; gap: 10px; color: var(--texte-doux); font-size: 0.8rem; margin: 18px 0 0; }
.separateur-connexion::before, .separateur-connexion::after { content: ""; flex: 1; border-top: 1px solid var(--bordure); }

/* ---------- Icônes ---------- */
.icone { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; }
.icone-petite { width: 14px; height: 14px; opacity: 0.6; vertical-align: -2px; }

main > .flash, main > .bandeau-echeance { animation: apparait 0.3s ease both; }
@keyframes apparait { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media (max-width: 900px) {
  .disposition { flex-direction: column; }
  .menu { width: 100%; height: auto; position: static; }
  .menu .logo { padding: 12px 18px; }
  .menu-panneau { display: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .bascule-menu:checked ~ .menu-repliable > .menu-panneau { display: flex; }
  main { padding: 16px 14px 48px; }
  .formulaire, .formulaire.trois, .grille-deux { grid-template-columns: 1fr; }
  .grille-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat .valeur { font-size: 1.4rem; }
  .definitions { grid-template-columns: 1fr; }
  .definitions dd { margin-bottom: 6px; }
  /* Un tableau dense ne se comprime plus indéfiniment : il défile. */
  .tableau { display: block; overflow-x: auto; }
}