/* Portail client (exportateur) — charte AGL : uniquement des jetons de app.css / tableaux.css (var(--…)).
   Clair : bleu, sans or. Sombre : marque et accent OR (var(--acc) vaut l'or), ni bleu ni turquoise.
   360 px : menu en bandeau défilant, cartes sur une colonne. prefers-reduced-motion : aucune animation. */

body.kp { background: var(--bg); }
.kp-entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--entete-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.kp-entete .logo { height: 34px; width: auto; }
.kp-entete .appli { font-weight: bold; color: var(--marque); letter-spacing: .02em; }
.kp-entete .appli small { display: block; font-weight: normal; color: var(--mut); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.kp-entete .espace { flex: 1; }
.kp-entete select { max-width: 240px; }
.kp-entete .qui { text-align: right; font-size: 13px; }
.kp-entete .qui small { display: block; color: var(--mut); }
.kp-coquille { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 52px); }
.kp-menu { background: var(--menu-bg); color: var(--menu-ink); padding: 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.kp-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--menu-ink); text-decoration: none; font-size: 14px; }
.kp-menu a:hover { background: var(--menu-actif); }
.kp-menu a.actif { background: var(--menu-actif); box-shadow: inset 3px 0 0 var(--acc); font-weight: bold; }
.kp-menu a .ico { font-size: 18px; }
.kp-menu .sep { height: 1px; background: var(--menu-actif); margin: 8px 4px; }
.kp-zone { padding: 18px 22px 40px; min-width: 0; }
.kp-societe { font-size: 12px; color: var(--mut); }

/* bandeau d'accueil */
.kp-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kp-hero h1 { margin: 0; font-size: 22px; }
.kp-hero h1 em { font-style: normal; color: var(--acc); }
.kp-hero .sous { color: var(--mut); font-size: 13px; }

/* barre de filtres */
.kp-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.kp-filtres label { display: flex; flex-direction: column; font-size: 11px; color: var(--mut); gap: 3px; }
.kp-filtres input, .kp-filtres select { min-width: 0; font-size: 13px; }
.kp-filtres .large input { width: 190px; }
.kp-filtres .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* KPI cliquables */
.kp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }

/* frise par phases (animée à l'arrivée) */
.kp-frise { display: flex; align-items: flex-start; gap: 0; width: 100%; overflow-x: auto; padding: 4px 0 2px; }
.kp-ph { position: relative; flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kp-ph::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 4px; background: var(--chip); border-radius: 2px; z-index: 0; }
.kp-ph:first-child::before { display: none; }
.kp-ph::after { content: ""; position: absolute; top: 15px; left: -50%; width: 0; height: 4px; background: var(--acc); border-radius: 2px; z-index: 0;
  transition: width .6s ease-out; transition-delay: var(--kp-delai, 0s); }
.kp-ph:first-child::after { display: none; }
.kp-frise.vue .kp-ph.fait::after, .kp-frise.vue .kp-ph.en_cours::after { width: 100%; }
.kp-ph .rond { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--line); color: var(--mut); transition: background .4s, border-color .4s, color .4s;
  transition-delay: var(--kp-delai, 0s); }
.kp-ph .rond i { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--kp-ico) center / contain no-repeat; mask: var(--kp-ico) center / contain no-repeat; }
.kp-frise.vue .kp-ph.fait .rond { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.kp-frise.vue .kp-ph.en_cours .rond { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 0 4px var(--hl); animation: kp-pouls 1.8s ease-in-out infinite; }
.kp-ph .lib { font-size: 11px; margin-top: 5px; line-height: 1.2; max-width: 110px; }
.kp-ph .dt { font-size: 10px; color: var(--mut); }
.kp-ph.en_cours .lib { font-weight: bold; color: var(--acc); }
.kp-frise.compacte .kp-ph .lib { display: none; }
.kp-frise.compacte .kp-ph .rond { width: 24px; height: 24px; }
.kp-frise.compacte .kp-ph .rond i { width: 13px; height: 13px; }
.kp-frise.compacte .kp-ph::before, .kp-frise.compacte .kp-ph::after { top: 10px; height: 3px; }
@keyframes kp-pouls { 0%, 100% { box-shadow: 0 0 0 3px var(--hl); } 50% { box-shadow: 0 0 0 7px var(--hl); } }

/* dossiers : lignes et cartes */
.kp-avancement { display: flex; flex-direction: column; gap: 10px; }
.kp-ligne { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 90px; gap: 14px; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; width: 100%; }
.kp-ligne:hover, .kp-ligne:focus-visible, .kp-carte:hover, .kp-carte:focus-visible { border-color: var(--acc); outline: none; }
.kp-ligne .num { font-weight: bold; display: flex; align-items: center; gap: 8px; }
.kp-ligne .meta, .kp-carte .meta { font-size: 12px; color: var(--mut); }
.kp-ligne .pct { text-align: right; font-size: 20px; font-weight: bold; color: var(--acc); }
.kp-ligne .pct small { display: block; font-size: 11px; font-weight: normal; color: var(--mut); }
.kp-ligne.retard { box-shadow: inset 3px 0 0 var(--warn); }
.kp-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.kp-carte { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--ink); font: inherit; }
.kp-carte .haut { display: flex; align-items: center; gap: 10px; }
.kp-carte .haut b { font-size: 15px; }
.kp-carte .barre { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.kp-carte .barre > span { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .8s ease-out; }
.kp-disque { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hl); color: var(--acc); flex: 0 0 auto; }
.kp-disque .ico { font-size: 20px; }
.kp-disque > i { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--kp-ico) center / contain no-repeat; mask: var(--kp-ico) center / contain no-repeat; }

/* fiche dossier */
.kp-fiche-tete { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; }
.kp-fiche-tete h1 { margin: 0; font-size: 22px; }
.kp-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; margin: 0; }
.kp-kv div { min-width: 0; }
.kp-kv dt { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.kp-kv dd { margin: 2px 0 0; font-weight: bold; overflow-wrap: anywhere; }
.kp-phases-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kp-phase-bloc { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel2); }
.kp-phase-bloc h3 { margin: 0 0 6px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.kp-phase-bloc.en_cours { border-color: var(--acc); }
.kp-etapes { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.kp-etapes li { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.kp-etapes li:last-child { border-bottom: 0; }
.kp-etapes li .p { width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; border: 2px solid var(--line); }
.kp-etapes li.fait .p { background: var(--ok); border-color: var(--ok); }
.kp-etapes li.deduit .p { border-style: dashed; border-color: var(--ok); }
.kp-etapes li.na .p { background: var(--chip); }
.kp-etapes li .d { color: var(--mut); white-space: nowrap; }

/* planning et carte */
.kp-navires { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.kp-navire { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel); }
.kp-navire .nom { font-weight: bold; display: flex; gap: 8px; align-items: center; }
.kp-navire .compte { font-size: 12px; margin-top: 4px; }
.kp-navire .compte b { color: var(--acc); }
.kp-navire.urgent { border-color: var(--warn); }
.kp-navire ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; }
.kp-carte-svg { width: 100%; height: auto; display: block; }
.kp-carte-svg .mer { fill: var(--panel2); }
.kp-carte-svg .terre { fill: var(--chip); stroke: var(--line); stroke-width: .6; }
.kp-carte-svg .grille { stroke: var(--line); stroke-width: .4; fill: none; }
.kp-carte-svg .route { fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-linecap: round; opacity: .75; stroke-dasharray: 600; stroke-dashoffset: 600; animation: kp-trace 1.6s ease-out forwards; }
.kp-carte-svg .origine { fill: var(--acc); }
.kp-carte-svg .dest { fill: var(--acc); fill-opacity: .35; stroke: var(--acc); stroke-width: 1.2; cursor: pointer; }
.kp-carte-svg .dest:hover, .kp-carte-svg .dest:focus-visible { fill-opacity: .7; outline: none; }
.kp-carte-svg text { fill: var(--ink); font-size: 9px; font-family: var(--font); paint-order: stroke; stroke: var(--panel2); stroke-width: 2.5px; }
@keyframes kp-trace { to { stroke-dashoffset: 0; } }

/* documents */
.kp-doc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kp-doc:last-child { border-bottom: 0; }
.kp-doc .nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kp-doc .nom small { display: block; color: var(--mut); }
.kp-remise { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

/* arrivée en cascade */
.kp-cascade > * { animation: kp-monte .45s ease-out both; }
.kp-cascade > *:nth-child(2) { animation-delay: .05s; } .kp-cascade > *:nth-child(3) { animation-delay: .1s; }
.kp-cascade > *:nth-child(4) { animation-delay: .15s; } .kp-cascade > *:nth-child(5) { animation-delay: .2s; }
.kp-cascade > *:nth-child(6) { animation-delay: .25s; } .kp-cascade > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes kp-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .kp-cascade > *, .kp-carte-svg .route, .kp-frise.vue .kp-ph.en_cours .rond { animation: none; }
  .kp-carte-svg .route { stroke-dashoffset: 0; }
  .kp-ph::after, .kp-ph .rond, .kp-carte .barre > span { transition: none; }
}

@media (max-width: 860px) {
  .kp-coquille { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .kp-menu { flex-direction: row; align-items: center; align-self: start; overflow-x: auto; padding: 6px; gap: 4px; position: sticky; top: 52px; z-index: 20; }
  .kp-menu a { white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  .kp-menu .sep { display: none; }
  .kp-zone { padding: 12px 10px 30px; }
  .kp-ligne { grid-template-columns: 1fr 64px; }
  .kp-ligne .kp-frise { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .kp-entete { flex-wrap: wrap; padding: 6px 10px; gap: 8px; }
  .kp-entete .qui { display: none; }
  .kp-entete .espace { display: none; }
  .kp-entete > select, .kp-entete > .kp-societe { order: 5; flex: 1 1 100%; max-width: none; }
  .kp-entete select { max-width: 150px; font-size: 12px; }
  .kp-entete .appli small { display: none; }
  .kp-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kp-filtres label, .kp-filtres .large input { width: 100%; }
  .kp-filtres label { flex: 1 1 140px; }
  .kp-ph { min-width: 44px; }
  .kp-ph .lib { font-size: 10px; }
  .kp-hero h1 { font-size: 18px; }
}
@media print {
  .kp-entete, .kp-menu, .kp-filtres, .maj-auto { display: none !important; }
  .kp-coquille { display: block; }
}

/* avertissement permanent des vues client (14/10/2026) : estimations, ne font pas foi */
.kp-avertissement { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--warn-bg);
  color: var(--ink); font-size: 12.5px; line-height: 1.45; }
@media print { .kp-avertissement { background: none; border-top: 1px solid #999; } }