/* Makoss Transports Inc. — le Portail des Operateurs.
   Charge APRES makoss-espace.css. Karim, 7 oct. 2026 : « change legerement
   les couleurs ». On reste dans le marine et l'or de l'entreprise, un ton
   plus vif : marine plus bleu, or plus chaud, fond gris tres clair au lieu
   du creme. Le contraste reste tenu pour l'impression en noir et blanc. */
:root{
  --marine:#1D2B4F;
  --marine-clair:#2A3D6B;
  --or:#C8A04A;
  --or-fonce:#7A5A14;
  --creme:#F5EFE0;
  --fond:#F4F6F9;
  --ciel:#E6ECF5;
  --encre:#111827;
  --encre-2:#2B3240;
  --filet:#A3AAB6;
  --ligne:#E2E6EC;
  --vert:#11643F;
  --rouge:#9B1C1C;
  --ambre:#8A5A00;
}
body{ background:var(--fond); }
header.top{ background:linear-gradient(135deg, var(--marine) 0%, var(--marine-clair) 100%); border-bottom-color:var(--or); }

.portail-titre{ max-width:1000px; margin:22px auto 2px; padding:0 18px; font-family:Georgia,serif; font-size:30px; color:var(--marine); }
.portail-sous{ max-width:1000px; margin:0 auto 16px; padding:0 18px; font-size:14px; color:var(--encre-2); }
[hidden]{ display:none !important; }

.bloc{ background:var(--blanc); border:1px solid var(--ligne); border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:0 1px 2px rgba(17,24,39,.05); }
.bloc h2{ margin:0 0 4px; font-family:Georgia,serif; font-size:20px; color:var(--marine); }
.bloc > .aide{ margin:0 0 12px; }
.deux{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grille{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.grille .large{ grid-column:1/-1; }
@media (max-width:720px){ .deux, .grille{ grid-template-columns:1fr; } }
.champ{ display:block; font-size:12px; font-weight:700; color:var(--encre-2); margin:10px 0 4px; letter-spacing:.02em; }
.bloc input[type=text], .bloc input[type=email], .bloc input[type=tel], .bloc input[type=password], .bloc input[type=date],
.fenetre input[type=text], .fenetre input[type=date], .fenetre input[type=password]{ width:100%; }
.lecture{ padding:10px 0 2px; font-size:15px; font-weight:600; }
input.code{ font-size:22px; letter-spacing:.3em; text-align:center; max-width:220px; }
.boutons{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; align-items:center; }
.boutons.gauche{ justify-content:flex-start; }
button.petit, .bouton.petit{ font-size:13px; padding:6px 10px; }
button.or{ background:var(--or); color:var(--marine); border-color:var(--or); font-weight:700; }
button.danger{ color:var(--rouge); border-color:var(--rouge); background:var(--blanc); font-weight:600; }
button.lien{ border:none; background:none; padding:0; font-size:13px; text-decoration:underline; color:var(--or-fonce); font-weight:600; }
a.bouton{ text-decoration:none; display:inline-block; }
.piege{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }

.encadre{ background:var(--creme); border:2px solid var(--or-fonce); border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:14px; line-height:1.5; }
.encadre.ciel{ background:var(--ciel); border-color:var(--marine); }
.encadre.alerte{ background:#FFF4DE; border-color:var(--ambre); }
.engagement{ background:#FFF4DE; border:2px solid var(--ambre); border-radius:12px; padding:12px 14px; margin-top:14px; font-size:13.5px; line-height:1.5; }
.engagement b{ display:block; color:var(--rouge); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.atteste{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; margin-top:10px; font-weight:600; }
.atteste input{ width:20px; height:20px; margin-top:1px; flex:0 0 auto; }

.etapes{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.etape{ background:var(--ciel); border-radius:12px; padding:12px; font-size:13px; }
.etape b{ display:block; font-family:Georgia,serif; font-size:15px; color:var(--marine); margin-bottom:3px; }
.etape .n{ display:inline-flex; width:24px; height:24px; border-radius:50%; background:var(--marine); color:var(--or); align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-bottom:6px; }
@media (max-width:720px){ .etapes{ grid-template-columns:1fr; } }

.liaison{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.liaison .qr{ width:190px; height:190px; background:#fff; border:1px solid var(--ligne); border-radius:10px; flex:0 0 auto; }
.liaison .qr svg{ width:100%; height:100%; }
.secret{ font-family:ui-monospace,Menlo,monospace; font-size:14px; word-break:break-all; background:var(--ciel); padding:6px 8px; border-radius:6px; display:inline-block; }

/* Villes */
.groupe-villes{ margin-bottom:12px; }
.groupe-villes .tete{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.groupe-villes .tete b{ font-size:13px; color:var(--marine); }
.puces{ display:flex; flex-wrap:wrap; gap:7px; }
.puce{ border:1.5px solid var(--filet); border-radius:20px; padding:6px 12px; font-size:13.5px; background:var(--blanc); color:var(--encre); cursor:pointer; font-weight:500; }
.puce[aria-pressed=true]{ background:var(--marine); color:#fff; border-color:var(--marine); }
.puce[aria-pressed=true]::before{ content:"✓ "; color:var(--or); }

/* Etat du dossier */
.resume{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.resume .chiffre{ font-family:Georgia,serif; font-size:34px; font-weight:700; color:var(--marine); line-height:1; }
.jauge{ flex:1 1 240px; height:10px; border-radius:6px; background:var(--ligne); overflow:hidden; }
.jauge div{ height:100%; background:var(--vert); transition:width .3s; }
.legende{ display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; margin-top:10px; color:var(--encre-2); }

.statut{ display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap; }
.s-ok{ background:#DFF1E7; color:var(--vert); }
.s-verif{ background:var(--ciel); color:var(--marine); }
.s-manque, .s-refuse, .s-expire{ background:#F8E1E1; color:var(--rouge); }
.s-bientot, .s-renouveler{ background:#FFF0D0; color:var(--ambre); }
.s-vide, .s-gris{ background:#ECEEF2; color:#3B4252; }

/* Documents */
.sous-titre-doc{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--or-fonce); font-weight:700; margin:16px 0 2px; }
.doc{ display:grid; grid-template-columns:34px 1fr auto; gap:8px 12px; align-items:center; padding:12px 0; border-top:1px solid var(--ligne); }
.doc:first-child{ border-top:none; }
.doc .num{ width:30px; height:30px; border-radius:50%; background:var(--ciel); color:var(--marine); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.doc h3{ margin:0; font-size:15.5px; color:var(--encre); }
.doc p{ margin:2px 0 0; font-size:12.5px; color:var(--encre-2); }
.doc p.info{ color:var(--encre); font-weight:500; }
.doc p.motif{ color:var(--rouge); font-weight:600; }
.doc .droite{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.verrou{ font-size:12px; color:var(--encre-2); }
.versions{ grid-column:2 / -1; margin:2px 0 0; padding:8px 10px; background:var(--fond); border-radius:10px; font-size:13px; }
.versions .version{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:5px 0; border-top:1px dashed var(--ligne); }
.versions .version:first-child{ border-top:none; }
.versions .version .quand{ flex:1 1 220px; }
@media (max-width:640px){ .doc{ grid-template-columns:30px 1fr; } .doc .droite{ grid-column:2; justify-content:flex-start; } .versions{ grid-column:1 / -1; } }

/* Journal */
ul.journal{ list-style:none; padding:0; margin:0; font-size:13.5px; }
ul.journal li{ padding:8px 0; border-top:1px solid var(--ligne); display:flex; gap:12px; }
ul.journal li:first-child{ border-top:none; }
ul.journal time{ color:var(--encre-2); white-space:nowrap; min-width:160px; font-variant-numeric:tabular-nums; }
@media (max-width:640px){ ul.journal li{ flex-direction:column; gap:2px; } }

/* Direction */
.chiffres{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.chiffres div{ background:var(--blanc); border:1px solid var(--ligne); border-left:5px solid var(--or); border-radius:12px; padding:12px; }
.chiffres b{ display:block; font-family:Georgia,serif; font-size:26px; color:var(--marine); }
.chiffres span{ font-size:12.5px; color:var(--encre-2); }
@media (max-width:720px){ .chiffres{ grid-template-columns:1fr 1fr; } }
.demande{ border:1px solid var(--ligne); border-left:5px solid var(--or); border-radius:12px; padding:14px; margin-bottom:10px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.demande .infos{ flex:1 1 300px; font-size:13.5px; line-height:1.5; }
.demande .infos b{ font-size:16px; color:var(--marine); }
.tableau{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.liste{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; background:var(--blanc); }
table.liste th, table.liste td{ border:none; border-bottom:1px solid var(--ligne); padding:9px 8px; text-align:left; vertical-align:middle; }
table.liste th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-2); background:var(--ciel); }
.retour{ margin:0 0 12px; }

/* Fenetres */
.voile{ position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; align-items:flex-start; justify-content:center; padding:40px 14px; z-index:10; overflow-y:auto; }
.voile.ouvert{ display:flex; }
.fenetre{ background:var(--blanc); border-radius:16px; max-width:540px; width:100%; padding:20px; border-top:6px solid var(--or); }
.fenetre h2{ margin:0 0 6px; font-family:Georgia,serif; color:var(--marine); font-size:20px; }
.depot-zone{ border:2px dashed var(--filet); border-radius:12px; padding:18px; text-align:center; color:var(--encre-2); font-size:14px; background:var(--fond); margin:10px 0; }
.depot-zone input{ max-width:100%; }
.cadenas{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--vert); background:#EAF5EF; border-radius:10px; padding:9px 10px; margin-top:10px; }

.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--marine); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.25); border-left:5px solid var(--or); z-index:20; max-width:90vw; }

@media print{
  header.top, nav, .boutons, .voile, .toast{ display:none !important; }
  body{ background:#fff; }
  .bloc{ box-shadow:none; border-color:#000; }
}