/* Espace Opérateur — Makoss Transports Inc.
   Palette de l'entreprise, contraste tenu pour l'impression noir et blanc. */
:root{
  --marine:#1B2340;
  --marine-clair:#28325A;
  --or:#BA8D33;
  --or-fonce:#6E5211;
  --creme:#F2ECDA;
  --fond:#FAF8F2;
  --encre:#12161F;
  --encre-2:#1E222B;
  --filet:#8E949F;
  --blanc:#FFFFFF;
  --vert:#14603F;
  --rouge:#8E1B1B;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:'Barlow','Segoe UI',system-ui,sans-serif;
  min-height:100vh; padding-bottom:60px;
}
header.top{ background:var(--marine); color:var(--creme); padding:22px 18px; border-bottom:5px solid var(--or); }
.top-inner{ max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.marque{
  width:58px; height:58px; border-radius:50%; border:2px solid var(--or);
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:20px; color:var(--or);
  flex:0 0 auto; overflow:hidden;
}
.marque img{ width:100%; height:100%; object-fit:contain; }
.coord p{ margin:1px 0; font-size:13px; }
.coord .nom{ font-family:Georgia,serif; font-size:20px; font-weight:700; letter-spacing:.3px; }
.coord .devise{ color:var(--or); font-style:italic; }
.top-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.qui{ font-size:13px; color:var(--creme); }
.sous-titre{
  max-width:1000px; margin:20px auto 6px; padding:0 18px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--encre-2); font-weight:700;
}
.page{ max-width:1000px; margin:0 auto; padding:0 18px; }

button, .bouton, select, textarea,
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local]{
  font:inherit; font-size:15px; padding:10px 14px; border-radius:8px;
  border:1.5px solid var(--filet); background:var(--blanc); color:var(--encre);
}
button, .bouton{ cursor:pointer; }
button.principal, .bouton.principal{ background:var(--marine); color:var(--creme); border-color:var(--marine); font-weight:600; }
.clair{ background:transparent; color:var(--creme); border-color:var(--or); }
/* « clair » porte du texte creme : il n'est lisible que sur l'en-tete marine.
   Dans le corps d'une page, fond clair, il donne du blanc sur blanc — le
   bouton disparait. « secondaire » est son equivalent pour les fonds clairs. */
button.secondaire, .bouton.secondaire{
  background:var(--blanc); color:var(--marine); border-color:var(--filet); font-weight:600;
}
button.secondaire:hover, .bouton.secondaire:hover{ border-color:var(--marine); }
a.bouton.clair{ text-decoration:none; display:inline-block; }
button:disabled{ opacity:.6; cursor:default; }

.cartes{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin-top:8px; }
.carte{
  display:block; text-decoration:none; color:inherit;
  background:var(--blanc); border:1.5px solid var(--filet); border-left:5px solid var(--or-fonce);
  border-radius:10px; padding:18px;
}
.carte:hover{ border-left-color:var(--marine); }
.carte h3{ margin:0 0 6px; font-family:Georgia,serif; font-size:19px; }
.carte p{ margin:0; font-size:14px; color:var(--encre-2); }

table.liste{ width:100%; border-collapse:collapse; font-size:14px; background:var(--blanc); }
table.liste th, table.liste td{ border:1px solid var(--filet); padding:8px 10px; text-align:left; }
table.liste th{ background:var(--creme); font-weight:600; }
.etiquette{
  display:inline-block; background:var(--marine); color:var(--creme);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; font-weight:600;
}
.message{ min-height:22px; font-size:14px; font-weight:600; margin:12px 0; }
.message.ok{ color:var(--vert); }
.message.err{ color:var(--rouge); }
.encadre{
  background:var(--creme); border:2px solid var(--or-fonce); border-radius:10px;
  padding:14px 16px; margin:14px 0;
}
.encadre code{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:17px; font-weight:700; }
.aide{ font-size:13px; color:var(--encre-2); }

/* Repertoire : le petit bouton qui propose de garder ce qu'on vient de
   taper. Discret tant qu'il ne sert a rien, visible des qu'il sert. */
.repertoire-ajout{
  display:block; margin-top:5px; padding:4px 9px; font-size:11.5px; font-weight:600;
  background:var(--creme); color:var(--or-fonce); border:1.5px dashed var(--or-fonce);
  border-radius:6px; cursor:pointer; line-height:1.3;
}
.repertoire-ajout:hover{ background:var(--blanc); border-style:solid; }
.repertoire-ajout[hidden]{ display:none !important; }
@media print{ .repertoire-ajout{ display:none !important; } }

/* La mention de propriete, au bas des pages qui s'impriment ou se transmettent.
   Discrete a l'ecran, lisible sur le papier : c'est la qu'elle compte. */
.mention-droits{
  max-width:1000px; margin:34px auto 26px; padding:14px 18px 0;
  border-top:1px solid var(--filet);
  font:11.5px/1.55 Georgia,'Times New Roman',serif; color:var(--encre-2);
  text-align:justify;
}
.mention-droits i{ font-style:italic; }
/* ---------------------------------------------------------------
   Telephones (Karim, 11 oct. 2026). L'Espace Operateur se consulte
   surtout sur un telephone : l'en-tete se range en colonne, les
   boutons tiennent au pouce, et rien ne depasse l'ecran. Les grands
   tableaux gardent leur defilement lateral dans « .cadre-table ».
   --------------------------------------------------------------- */
@media screen and (max-width:640px){
  header.top{ padding:14px 14px; }
  .top-inner{ gap:10px; }
  .marque{ width:46px; height:46px; }
  .coord .nom{ font-size:17px; }
  .coord p{ font-size:12.5px; }
  .top-actions{ margin-left:0; width:100%; }
  .top-actions button, .top-actions .bouton{ flex:1 1 140px; min-height:42px; text-align:center; }
  .sous-titre, .page{ padding:0 14px; }
  /* Un champ ou une liste deroulante ne doit jamais depasser la largeur
     de l'ecran, meme avec une longue option (« Documents importants — ... »). */
  select, textarea, input[type=text], input[type=password], input[type=email],
  input[type=tel], input[type=date], input[type=time], input[type=datetime-local]{
    max-width:100%; }
  select{ width:100%; margin-left:0 !important; }
  label + select{ margin-top:6px; }
  button, .bouton{ min-height:42px; }
}

@media print{ .mention-droits{ color:#000; border-top-color:#000; page-break-inside:avoid; } }