/* Charte AGL (Africa Global Logistics) — jetons de design, thème clair par défaut + thème sombre « tour de contrôle ».
   Usage : <html data-theme="light"> (défaut) ou data-theme="dark" ; tout le reste lit var(--…). */

:root,
:root[data-theme="light"] {
  /* Marque */
  --agl-marine: #0a2240;      /* couleur institutionnelle : titres, en-têtes de tableau, boutons pleins */
  --agl-bleu: #14467c;        /* accent du thème clair (remplace l'or) : liens, liserés, pastilles, focus */
  --agl-bleu-vif: #1f5fa8;    /* survol, graphiques secondaires */
  --agl-or: #d4af37;          /* accent du thème sombre UNIQUEMENT */
  --agl-or-fonce: #c9a227;

  /* Surfaces (clair) */
  --bg: #f2f5f9;
  --panel: #ffffff;
  --panel2: #f7fafd;
  --line: #dde5ef;
  --chip: #e7edf4;
  --hl: #e2ecf7;

  /* Texte (clair) : NOIR, jamais gris */
  --ink: #000000;
  --mut: #1a1a1a;

  /* Accent et actions */
  --acc: var(--agl-bleu);
  --acc-ink: #ffffff;
  --btn: var(--agl-marine);
  --btn-ink: #ffffff;

  /* En-têtes de tableau */
  --th: var(--agl-marine);
  --th-ink: #ffffff;

  /* États (lisibles sur fond clair) */
  --ok: #146314;
  --warn: #8a5f00;
  --bad: #a3121f;
  --info: #14467c;

  --shadow: 0 1px 2px #0a22400f, 0 4px 14px #0a22400a;
  --radius: 10px;
  --font: Arial, Helvetica, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #091521;
  --panel: #102030;
  --panel2: #0c1a28;
  --line: #233344;
  --chip: #18333d;
  --hl: #132c3b;
  --ink: #e3ecf3;
  --mut: #8da1b4;
  --acc: #65d9c5;             /* turquoise « tour de contrôle » */
  --acc-ink: #092820;
  --btn: #65d9c5;
  --btn-ink: #092820;
  --th: #0c1a28;
  --th-ink: #95adbf;
  --ok: #3fbf6b;
  --warn: #fab219;
  --bad: #ff5a6e;
  --info: #3987e5;
  --marque: var(--agl-or);    /* l'or n'existe qu'ici */
  --shadow: none;
  color-scheme: dark;
}

html, body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 var(--font); }
th { background: var(--th); color: var(--th-ink); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }

/* Liseré de marque : barre courte inclinée sous un titre */
.liser { display: block; width: 44px; height: 5px; background: var(--acc); transform: skew(-25deg); margin: 12px 0 0; }

/* Panneau translucide sur vidéo / image de fond (thème clair) */
.verre { background: rgba(255,255,255,.62); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
         border: 1px solid rgba(20,70,124,.18); border-radius: 12px; box-shadow: 0 14px 40px rgba(10,34,64,.12); }
:root[data-theme="dark"] .verre { background: rgba(15,31,48,.9); border-color: var(--line); box-shadow: none; }

/* Bloc pliable (détails) */
details.pli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.pli > summary::-webkit-details-marker { display: none; }
details.pli > summary::before { content: "▸"; color: var(--acc); transition: transform .2s; }
details.pli[open] > summary::before { transform: rotate(90deg); }