/* =====================================================================
   R'POINTAGE - Feuille de style
   Charte : bordeaux #901023 / marine #1A2E44 / or #C9A84C / acier #809DAB
   ===================================================================== */

:root{
  --bordeaux:#901023;
  --bordeaux-clair:#b31c31;
  --marine:#1A2E44;
  --marine-clair:#2a4460;
  --or:#C9A84C;
  --acier:#809DAB;

  --fond:#f5f6f7;
  --surface:#ffffff;
  --bordure:#e2e5e8;
  --bordure-forte:#c9ced4;

  --texte:#1f2933;
  --texte-doux:#5c6873;
  --texte-faible:#8b959e;

  --succes:#2f7d4f;
  --succes-fond:#e8f4ec;
  --alerte:#a9721a;
  --alerte-fond:#fdf3e2;
  --danger:#a3282d;
  --danger-fond:#fbeaea;
  --info:#1f5f8b;
  --info-fond:#e8f1f8;

  --rayon:6px;
  --ombre:0 1px 3px rgba(16,24,40,.06);
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--texte);
  background:var(--fond);
}

a{color:var(--bordeaux);text-decoration:none}
a:hover{text-decoration:underline}

/* --- Structure ------------------------------------------------------ */

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

.barre-laterale{
  width:238px;flex:0 0 238px;
  background:var(--marine);
  color:#dbe3ea;
  display:flex;flex-direction:column;
}

.marque{
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.marque .nom{
  font-size:17px;font-weight:600;color:#fff;letter-spacing:.4px;
}
.marque .nom span{color:var(--or)}
.marque .sous{font-size:11px;color:#93a4b5;margin-top:2px}

.nav{padding:10px 0;flex:1;overflow-y:auto}
.nav-groupe{
  padding:14px 20px 6px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:#7d90a3;
}
.nav a{
  display:block;padding:8px 20px;
  color:#cdd8e2;font-size:13.5px;
  border-left:3px solid transparent;
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav a.actif{
  background:rgba(201,168,76,.13);
  border-left-color:var(--or);
  color:#fff;font-weight:500;
}

.pied-laterale{
  padding:12px 20px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;color:#8fa1b2;
}

.zone{flex:1;min-width:0;display:flex;flex-direction:column}

.entete{
  background:var(--surface);
  border-bottom:1px solid var(--bordure);
  padding:12px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.entete h1{margin:0;font-size:18px;font-weight:600;color:var(--marine)}
.entete .fil{font-size:12px;color:var(--texte-faible);margin-top:1px}

.compte{display:flex;align-items:center;gap:10px;font-size:13px}
.compte .pastille{
  width:32px;height:32px;border-radius:50%;
  background:var(--bordeaux);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.compte .nom{font-weight:500;line-height:1.2}
.compte .role{font-size:11.5px;color:var(--texte-faible)}

.contenu{padding:22px 26px;flex:1}

/* --- Cartes --------------------------------------------------------- */

.carte{
  background:var(--surface);
  border:1px solid var(--bordure);
  border-radius:var(--rayon);
  box-shadow:var(--ombre);
  margin-bottom:18px;
}
.carte-titre{
  padding:12px 18px;
  border-bottom:1px solid var(--bordure);
  font-weight:600;font-size:14.5px;color:var(--marine);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.carte-corps{padding:18px}
.carte-pied{
  padding:12px 18px;border-top:1px solid var(--bordure);
  background:#fafbfc;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
}

/* --- Indicateurs ---------------------------------------------------- */

.indicateurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.indicateur{
  background:var(--surface);border:1px solid var(--bordure);
  border-radius:var(--rayon);padding:14px 16px;box-shadow:var(--ombre);
}
.indicateur .lib{font-size:12px;color:var(--texte-doux)}
.indicateur .val{font-size:26px;font-weight:600;color:var(--marine);line-height:1.25;margin-top:2px}
.indicateur .val.or{color:var(--or)}
.indicateur .val.danger{color:var(--danger)}
.indicateur .val.alerte{color:var(--alerte)}

/* --- Tableaux ------------------------------------------------------- */

.tableau{width:100%;border-collapse:collapse;font-size:13.5px}
.tableau th{
  text-align:left;padding:9px 12px;
  background:#f7f8f9;color:var(--texte-doux);
  font-weight:600;font-size:12.5px;
  border-bottom:1px solid var(--bordure);
  white-space:nowrap;
}
.tableau td{padding:9px 12px;border-bottom:1px solid var(--bordure)}
.tableau tbody tr:hover{background:#fafbfc}
.tableau .num{text-align:right;font-variant-numeric:tabular-nums}
.tableau .ctr{text-align:center}
.tableau .actions{text-align:right;white-space:nowrap}

.vide{padding:34px 18px;text-align:center;color:var(--texte-faible);font-size:13.5px}

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

.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.champ{display:flex;flex-direction:column;gap:4px;min-width:0}
.champ label{font-size:12.5px;color:var(--texte-doux);font-weight:500}
.champ label .req{color:var(--bordeaux)}
.champ .aide{font-size:11.5px;color:var(--texte-faible)}

input[type=text],input[type=password],input[type=email],input[type=date],
input[type=number],select,textarea{
  width:100%;padding:7px 10px;
  border:1px solid var(--bordure-forte);border-radius:var(--rayon);
  font-family:inherit;font-size:13.5px;color:var(--texte);
  background:#fff;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acier);
  box-shadow:0 0 0 3px rgba(128,157,171,.18);
}
input:disabled,select:disabled,input[readonly]{background:#f3f4f6;color:var(--texte-doux)}
textarea{min-height:78px;resize:vertical}

fieldset{border:1px solid var(--bordure);border-radius:var(--rayon);padding:14px 16px;margin:0 0 16px}
legend{font-size:12.5px;font-weight:600;color:var(--marine);padding:0 6px}

/* --- Boutons -------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--rayon);
  border:1px solid var(--bordure-forte);background:#fff;color:var(--texte);
  font-family:inherit;font-size:13.5px;cursor:pointer;
  text-decoration:none;line-height:1.4;
}
.btn:hover{background:#f5f6f7;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-principal{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.btn-principal:hover{background:var(--bordeaux-clair);border-color:var(--bordeaux-clair)}
.btn-marine{background:var(--marine);border-color:var(--marine);color:#fff}
.btn-marine:hover{background:var(--marine-clair);border-color:var(--marine-clair)}
.btn-danger{color:var(--danger);border-color:#e6c9c9}
.btn-danger:hover{background:var(--danger-fond)}
.btn-petit{padding:4px 9px;font-size:12.5px}
.btn:disabled{opacity:.55;cursor:not-allowed}

.barre-actions{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.barre-actions .espace{flex:1}

/* --- Etiquettes ----------------------------------------------------- */

.etiq{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:500;white-space:nowrap;
}
.etiq-succes{background:var(--succes-fond);color:var(--succes)}
.etiq-alerte{background:var(--alerte-fond);color:var(--alerte)}
.etiq-danger{background:var(--danger-fond);color:var(--danger)}
.etiq-info{background:var(--info-fond);color:var(--info)}
.etiq-neutre{background:#eef0f2;color:var(--texte-doux)}

/* --- Messages ------------------------------------------------------- */

.message{
  padding:11px 15px;border-radius:var(--rayon);
  margin-bottom:14px;font-size:13.5px;
  border:1px solid transparent;
}
.message-succes{background:var(--succes-fond);border-color:#c5e2d1;color:var(--succes)}
.message-erreur{background:var(--danger-fond);border-color:#eecccc;color:var(--danger)}
.message-alerte{background:var(--alerte-fond);border-color:#f0dcb8;color:var(--alerte)}
.message-info{background:var(--info-fond);border-color:#cfe0ee;color:var(--info)}

/* --- Recherche ------------------------------------------------------ */

.recherche{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.recherche .champ{min-width:150px}
.recherche input[type=text]{min-width:210px}

/* --- Pagination ----------------------------------------------------- */

.pagination{display:flex;gap:4px;align-items:center;justify-content:center;padding:14px}
.pagination a,.pagination span{
  padding:5px 10px;border:1px solid var(--bordure-forte);
  border-radius:var(--rayon);font-size:13px;color:var(--texte);
}
.pagination a:hover{background:#f5f6f7;text-decoration:none}
.pagination .courant{background:var(--marine);border-color:var(--marine);color:#fff}
.pagination .inactif{color:var(--texte-faible);border-color:var(--bordure)}

/* --- Page de connexion ---------------------------------------------- */

.page-connexion{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--marine);padding:20px;
}
.bloc-connexion{
  width:100%;max-width:380px;
  background:#fff;border-radius:10px;
  box-shadow:0 10px 32px rgba(0,0,0,.22);
  overflow:hidden;
}
.bloc-connexion .haut{
  padding:26px 28px 20px;border-bottom:1px solid var(--bordure);
}
.bloc-connexion .haut .nom{font-size:24px;font-weight:600;color:var(--marine)}
.bloc-connexion .haut .nom span{color:var(--or)}
.bloc-connexion .haut .sous{font-size:12.5px;color:var(--texte-doux);margin-top:3px}
.bloc-connexion .bas{padding:22px 28px 26px}
.bloc-connexion .btn{width:100%;justify-content:center;margin-top:6px}
.bloc-connexion .note{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--bordure);
  font-size:11.5px;color:var(--texte-faible);text-align:center;
}

/* --- Divers --------------------------------------------------------- */

.doux{color:var(--texte-doux)}
.faible{color:var(--texte-faible);font-size:12.5px}
.mono{font-family:Consolas,"Courier New",monospace;font-size:12.5px}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}

@media (max-width:900px){
  .app{flex-direction:column}
  .barre-laterale{width:100%;flex:none}
  .nav{display:flex;flex-wrap:wrap;padding:6px}
  .nav-groupe{display:none}
  .nav a{border-left:none;border-bottom:3px solid transparent;padding:8px 13px}
  .nav a.actif{border-left:none;border-bottom-color:var(--or)}
  .contenu{padding:16px}
  .grille-2{grid-template-columns:1fr}
}

/* Pastille compteur dans le menu */
.pastille-compteur{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;
  background:var(--bordeaux);color:#fff;border-radius:9px;font-size:11px;font-weight:600;
  text-align:center;margin-left:6px;vertical-align:middle}