@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(../vendor/inter/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(../vendor/inter/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../vendor/inter/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(../vendor/inter/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(../vendor/inter/inter-latin-800-normal.woff2) format('woff2'); }

:root {
  --navy: #111111;
  --navy-2: #2A2A2A;
  --black-grad: linear-gradient(135deg, #111111 0%, #2A2A2A 100%); /* noir dégradé : bannières, boutons et éléments noirs */
  --green: #22C55E;
  --green-dark: #16A34A;
  --green-soft: #DCFCE7;
  --gray: #E5E7EB;
  --gray-2: #9CA3AF;
  --text-2: #4B5563;
  --off: #F8FAFC;
  --white: #FFFFFF;
  --brand: #E30613;    /* rouge dynamique KFT / Liviro */
  --brand-dark: #B8050F;
  --brand-soft: #FDE8EA;
  --on-brand: #FFFFFF;   /* texte sur la couleur principale (noir si l'organisation choisit une couleur claire) */
  --on-dark: #FFFFFF;    /* texte sur la couleur sombre */
  --on-dark-2: #D4D4D4;  /* texte secondaire sur la couleur sombre */
  --on-dark-3: #B3B3B3;
  --side-accent: #E30613; /* accent lisible sur la couleur sombre */
  --red: #C2410C;      /* non livré / erreur (orange foncé : le rouge est réservé à la marque) */
  --red-soft: #FFEDD5;
  --amber: #D97706;
  --amber-soft: #FEF3C7;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 4px 16px rgba(17, 17, 17, .06);
}

/* Logo Liviro : traits de vitesse + « liviro » + LAST MILE SOLUTIONS.
   Taille réglée par --logo-size ; les traits foncés prennent la couleur du texte (blanc sur fond noir, noir sur fond clair). */
.logo { --logo-size: 28px; display: inline-grid; grid-template-columns: auto auto; justify-content: start; justify-self: start; align-self: flex-start; column-gap: calc(var(--logo-size) * .14); align-items: center; line-height: 1; }
.logo .speed { width: calc(var(--logo-size) * 1.15); height: calc(var(--logo-size) * .74); overflow: visible; }
.logo .word { font-size: var(--logo-size); font-weight: 800; letter-spacing: -.045em; margin-top: -.06em; }
.logo .tag { grid-column: 1 / -1; width: 0; min-width: 100%; font-size: calc(var(--logo-size) * .225); font-weight: 500; letter-spacing: .3em; margin-top: calc(var(--logo-size) * .2); text-align: center; white-space: nowrap; opacity: .72; }
.dot-green { color: var(--green); font-style: normal; }

/* Logo d'une organisation (marque blanche) */
.org-logo { align-self: flex-start; width: fit-content; max-width: min(100%, calc(200px * var(--logo-scale, 1))); }
.org-logo img { display: block; max-width: 100%; max-height: calc(56px * var(--logo-scale, 1)); object-fit: contain; }
.org-logo.tile { background: #fff; border-radius: 10px; padding: 8px 10px; }