:root {
  --navy: #0F2942; --navy-clair: #1c3f60; --or: #D2961F; --or-sombre: #a9791a;
  --fond: #f4f6f9; --carte: #ffffff; --bord: #dde3ea; --texte: #1a2230;
  --gris: #5d6b7a; --gris-clair: #8794a3;
  --vert: #1a7f4b; --rouge: #b3261e; --ambre: #a9791a; --bleu: #1c5f9e;
  --rayon: 10px; --ombre: 0 1px 3px rgba(15,41,66,.10), 0 4px 14px rgba(15,41,66,.05);
}
* { box-sizing: border-box; }
/* Une règle « display » posée sur une classe l'emporte sur le style d'agent
   utilisateur qui masque un élément porteur de l'attribut « hidden ». Sans cette
   ligne, l'écran de connexion restait affiché par-dessus l'application. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond); color: var(--texte); font-size: 15px; line-height: 1.55;
}
h1, h2, h3 { color: var(--navy); margin: 0 0 .6rem; line-height: 1.25; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
a { color: var(--bleu); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* ------------------------------------------------------------- ossature -- */
#appli { display: flex; min-height: 100vh; }
nav.menu {
  width: 250px; background: var(--navy); color: #fff; flex: 0 0 250px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
nav.menu .marque { padding: 1.1rem 1.2rem .8rem; font-weight: 700; font-size: 1.22rem; letter-spacing: .3px; }
nav.menu .marque span { color: var(--or); }
nav.menu .groupe { padding: .9rem 1.2rem .25rem; font-size: .7rem; letter-spacing: 1.1px;
  text-transform: uppercase; color: #93a6bb; }
nav.menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: #dbe4ee;
  padding: .5rem 1.2rem; font: inherit; cursor: pointer; border-left: 3px solid transparent;
}
nav.menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
nav.menu button[aria-current="page"] { background: var(--navy-clair); color: #fff;
  border-left-color: var(--or); font-weight: 600; }
nav.menu .pied { margin-top: auto; padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; }
nav.menu .pied .qui { color: #fff; font-weight: 600; }
nav.menu .pied .role { color: #93a6bb; font-size: .8rem; }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
header.barre {
  background: #fff; border-bottom: 1px solid var(--bord); padding: .7rem 1.4rem;
  display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 20;
}
header.barre .recherche {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--bord); border-radius: 999px; padding: .35rem .9rem; color: var(--gris);
  background: #fbfcfd; cursor: pointer;
}
header.barre .recherche kbd {
  margin-left: auto; font: inherit; font-size: .72rem; background: #eef1f5;
  border-radius: 5px; padding: .1rem .4rem; color: var(--gris);
}
.hamburger { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--navy); cursor: pointer; }
.contenu { padding: 1.4rem; max-width: 1500px; width: 100%; }
.bandeau {
  background: var(--or); color: var(--navy); text-align: center; padding: .35rem;
  font-weight: 600; font-size: .86rem;
}

/* ---------------------------------------------------------------- cartes -- */
.cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); margin-bottom: 1.4rem; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1rem 1.1rem; box-shadow: var(--ombre); }
.carte .valeur { font-size: 1.9rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.carte .libelle { color: var(--gris); font-size: .86rem; margin-top: .15rem; }
.carte .detail { color: var(--gris-clair); font-size: .78rem; margin-top: .3rem; }

.panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.1rem 1.2rem; box-shadow: var(--ombre); margin-bottom: 1.2rem; }
.panneau > h2:first-child { margin-top: 0; }
.explication { color: var(--gris); font-size: .9rem; margin: -.2rem 0 .9rem; }

/* --------------------------------------------------------------- tableau -- */
.tableau-cadre { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--bord); vertical-align: top; }
thead th { background: #f7f9fb; color: var(--navy); font-size: .74rem; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap; position: sticky; top: 0; }
thead th[data-tri] { cursor: pointer; user-select: none; }
thead th[data-tri]:hover { color: var(--or-sombre); }
tbody tr:hover { background: #f9fbfd; }
tbody tr.cliquable { cursor: pointer; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- éléments -- */
button, .bouton {
  font: inherit; border-radius: 8px; border: 1px solid var(--bord); background: #fff;
  color: var(--texte); padding: .42rem .85rem; cursor: pointer;
}
button:hover, .bouton:hover { border-color: var(--gris-clair); background: #fbfcfd; }
button.principal { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
button.principal:hover { background: var(--navy-clair); }
button.danger { color: var(--rouge); border-color: #e6c3c0; }
button.discret { border: 0; background: none; color: var(--bleu); padding: .2rem .4rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .9rem; }
.actions .droite { margin-left: auto; display: flex; gap: .5rem; }
input, select, textarea {
  font: inherit; padding: .42rem .6rem; border: 1px solid var(--bord); border-radius: 8px;
  background: #fff; color: var(--texte); max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
label { display: block; font-size: .82rem; color: var(--gris); margin-bottom: .18rem; font-weight: 600; }
.champs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.champ-large { grid-column: 1 / -1; }

.etiquette { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem;
  font-weight: 600; white-space: nowrap; }
.etiquette.vert { background: #e3f3ea; color: var(--vert); }
.etiquette.rouge { background: #fbe9e7; color: var(--rouge); }
.etiquette.ambre { background: #fdf3e2; color: var(--ambre); }
.etiquette.bleu { background: #e7f0f9; color: var(--bleu); }
.etiquette.gris { background: #eef1f5; color: var(--gris); }

.barre-valeur { background: #eef1f5; border-radius: 6px; height: 9px; overflow: hidden; min-width: 90px; }
.barre-valeur span { display: block; height: 100%; background: var(--navy); }

/* --------------------------------------------------------------- modale -- */
.voile { position: fixed; inset: 0; background: rgba(15,41,66,.45); display: flex;
  align-items: flex-start; justify-content: center; padding: 3vh 1rem; z-index: 100; overflow-y: auto; }
.modale { background: #fff; border-radius: 12px; width: min(860px, 100%); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.modale header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--bord); display: flex;
  align-items: center; gap: 1rem; }
.modale header h2 { margin: 0; }
.modale .corps { padding: 1.2rem; }
.modale .pied { padding: .9rem 1.2rem; border-top: 1px solid var(--bord); display: flex;
  gap: .6rem; justify-content: flex-end; }

/* -------------------------------------------------------------- palette -- */
.palette { background: #fff; border-radius: 12px; width: min(620px, 100%); overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--bord); border-radius: 0;
  padding: .9rem 1.1rem; font-size: 1.05rem; }
.palette ul { list-style: none; margin: 0; padding: .3rem; max-height: 55vh; overflow-y: auto; }
.palette li { padding: .55rem .8rem; border-radius: 8px; cursor: pointer; display: flex; gap: .7rem; }
.palette li[aria-selected="true"] { background: #eef4fb; }
.palette li .module { margin-left: auto; color: var(--gris-clair); font-size: .8rem; }

/* -------------------------------------------------------------- planning -- */
.grille-planning { overflow-x: auto; }
.grille-planning table { font-size: .8rem; }
.grille-planning th.jour { text-align: center; min-width: 46px; font-size: .68rem; }
.grille-planning th.jour.we, .grille-planning td.we { background: #f3f5f8; }
.grille-planning th.jour.ferie { background: #fdf3e2; color: var(--ambre); }
.grille-planning td.case { text-align: center; padding: .3rem .1rem; cursor: pointer; font-size: .72rem; }
.grille-planning td.case:hover { outline: 2px solid var(--or); outline-offset: -2px; }
.grille-planning td.absence { color: #fff; font-weight: 600; border-radius: 3px; }
.grille-planning td.repos { color: var(--gris-clair); }
.grille-planning .agent { position: sticky; left: 0; background: #fff; z-index: 2; white-space: nowrap; }

/* -------------------------------------------------------------- graphique -- */
.graphique { display: flex; flex-direction: column; gap: .45rem; }
.graphique .ligne { display: grid; grid-template-columns: minmax(120px, 1.4fr) 3fr minmax(70px, auto);
  gap: .8rem; align-items: center; font-size: .87rem; }
.graphique .piste { background: #eef1f5; border-radius: 5px; height: 15px; overflow: hidden; }
.graphique .piste span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--navy-clair)); }
.graphique .valeur { text-align: right; font-variant-numeric: tabular-nums; color: var(--gris); }

/* ------------------------------------------------------------- connexion -- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(160deg, var(--navy), #16375a); }
.connexion .boite { background: #fff; border-radius: 14px; padding: 2rem; width: min(430px, 100%);
  box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.connexion .marque { font-size: 1.7rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }
.connexion .marque span { color: var(--or); }
.connexion p.sous { color: var(--gris); margin-top: 0; }
.connexion label { margin-top: .9rem; }
.connexion input { width: 100%; }
.connexion button { width: 100%; margin-top: 1.2rem; }
.connexion .aide-compte { margin-top: 1.2rem; font-size: .84rem; color: var(--gris);
  background: #f7f9fb; border: 1px solid var(--bord); border-radius: 8px; padding: .7rem .85rem; }

.message { padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.message.erreur { background: #fbe9e7; color: var(--rouge); border: 1px solid #f0c7c2; }
.message.succes { background: #e3f3ea; color: var(--vert); border: 1px solid #bfe2cd; }
.message.info { background: #e7f0f9; color: var(--bleu); border: 1px solid #c5dbf0; }

.vide { text-align: center; color: var(--gris); padding: 2.2rem 1rem; }
.aide-article { line-height: 1.7; }
.aide-article h3 { margin-top: 1.3rem; }
.aide-article strong { color: var(--navy); }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 900px) {
  nav.menu { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .22s;
    z-index: 60; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  nav.menu.ouvert { transform: none; }
  .hamburger { display: block; }
  .contenu { padding: 1rem .8rem; }
  .cartes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media print {
  nav.menu, header.barre, .actions { display: none !important; }
  body { background: #fff; }
  .panneau { box-shadow: none; border: 1px solid #ccc; }
}