/* =====================================================================
   COMFORT CARGO - systeme de bandeaux
   Une seule matiere pour toutes les bandes du site et de l'application :
   nuit de marque, lueur en diagonale, trame de trajectoires, filet de pied.
   Une bande ne change qu'une chose : --cc-lueur, et la fin de son filet.
   Charte : navy #1F3B57, orange #E07A2E. Toutes les teintes en derivent.
   Fichier unique, lie en dernier dans le <head> de chaque page.
   ===================================================================== */

:root{
  --cc-lueur: 224,122,46;
  --cc-filet-1:#1F3B57;
  --cc-filet-2:#2F79AE;
  --cc-filet-3:#E07A2E;
  --cc-filet-4:#F6B979;
}

/* ---------- La matiere commune ---------- */
.cc-bandeau,
.page-hero,
.app-banner,
.topbar,
footer{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(100deg, rgba(9,20,32,.88) 0%, rgba(9,20,32,.74) 30%, rgba(9,20,32,.18) 56%, rgba(9,20,32,0) 70%),
    radial-gradient(1320px 620px at 90% -14%, rgba(var(--cc-lueur),.72), transparent 64%),
    radial-gradient(700px 340px at 58% 112%, rgba(var(--cc-lueur),.30), transparent 62%),
    radial-gradient(680px 360px at -4% 104%, rgba(47,121,174,.32), transparent 62%),
    linear-gradient(122deg, #0B1826 0%, #142838 38%, #24476B 100%);
}

/* ---------- La trame : des trajectoires, pas un motif ---------- */
.cc-bandeau::before,
.page-hero::before,
.app-banner::before,
.topbar::before,
footer::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(116deg, rgba(255,255,255,.055) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(116deg, rgba(var(--cc-lueur),.20) 0 2px, transparent 2px 300px);
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, #000 34%, #000 80%, transparent 100%);
          mask-image: linear-gradient(102deg, transparent 0%, #000 34%, #000 80%, transparent 100%);
}

/* ---------- La signature : le filet bleu vers orange ---------- */
.cc-bandeau::after,
.page-hero::after,
.app-banner::after,
.topbar::after,
footer::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--cc-filet-1) 0%, var(--cc-filet-2) 18%, var(--cc-filet-3) 52%, var(--cc-filet-4) 100%);
}
/* en pied de page le filet se met en tete, sinon il tombe hors de l'ecran */
footer::after{ bottom:auto; top:0; }

/* ---------- Les variantes : seule la lueur change ---------- */
/* Site vitrine, par service */
.cc-maritime   { --cc-lueur:47,154,190;  --cc-filet-3:#2F9ABE; --cc-filet-4:#9BD8EA; }
.cc-aerien     { --cc-lueur:78,155,224;  --cc-filet-3:#4E9BE0; --cc-filet-4:#AFD1F4; }
.cc-express    { --cc-lueur:255,138,61;  --cc-filet-3:#FF8A3D; --cc-filet-4:#FFC79B; }
.cc-paiement   { --cc-lueur:217,164,65;  --cc-filet-3:#D9A441; --cc-filet-4:#F3DCA2; }
.cc-vehicule   { --cc-lueur:47,169,138;  --cc-filet-3:#2FA98A; --cc-filet-4:#A3E3D0; }
.cc-centrale   { --cc-lueur:138,111,200; --cc-filet-3:#8A6FC8; --cc-filet-4:#CDBEEE; }
.cc-entrepot   { --cc-lueur:198,74,59;   --cc-filet-3:#C64A3B; --cc-filet-4:#EFA99E; }
.cc-kilos      { --cc-lueur:224,122,46; }
.cc-neutre     { --cc-lueur:91,132,168;  --cc-filet-3:#5B84A8; --cc-filet-4:#AFC9DE; }

/* Application, par module */
.cc-chine       { --cc-lueur:198,74,59;   --cc-filet-3:#C64A3B; --cc-filet-4:#EFA99E; }
.cc-cameroun    { --cc-lueur:47,169,138;  --cc-filet-3:#2FA98A; --cc-filet-4:#A3E3D0; }
.cc-guichet     { --cc-lueur:224,122,46; }
.cc-facturation { --cc-lueur:47,121,174;  --cc-filet-3:#2F79AE; --cc-filet-4:#A9CDF2; }
.cc-caisse      { --cc-lueur:138,111,200; --cc-filet-3:#8A6FC8; --cc-filet-4:#CDBEEE; }
.cc-clients     { --cc-lueur:217,164,65;  --cc-filet-3:#D9A441; --cc-filet-4:#F3DCA2; }
.cc-rh          { --cc-lueur:198,106,158; --cc-filet-3:#C66A9E; --cc-filet-4:#EDBEDA; }
.cc-marketplace { --cc-lueur:47,154,190;  --cc-filet-3:#2F9ABE; --cc-filet-4:#9BD8EA; }

/* ---------- En-tetes de tableau : meme famille, sans couture ---------- */
/* Un degrade vertical se repete a l'identique sur chaque cellule :
   la ligne d'en-tete reste continue, et le filet orange la souligne. */
th{
  background:linear-gradient(180deg,#27506F 0%,#1F3B57 100%);
  box-shadow:inset 0 -2px 0 rgba(224,122,46,.55);
}

/* ---------- Impression : aucun fond sombre sur papier ---------- */
@media print{
  .cc-bandeau,.page-hero,.app-banner,.topbar,footer{
    background:#fff !important; color:#222 !important; }
  .cc-bandeau::before,.page-hero::before,.app-banner::before,.topbar::before,footer::before,
  .cc-bandeau::after,.page-hero::after,.app-banner::after,.topbar::after,footer::after{
    display:none !important; }
  th{ background:#fff !important; color:#222 !important; box-shadow:none !important; }
}

/* Focus clavier : visible sur toutes les pages, ordinateur et mobile (audit design 26/10/2026). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #A8541A;
  outline-offset: 2px;
}