/* =========================================================================
   Kunafy — système de design (au-dessus de Bootstrap 5.3)
   Couleurs relevées sur la maquette de référence. Tout est auto-hébergé.
   ========================================================================= */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../vendor/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../vendor/fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --kp-primaire: #2a3bfc;
  --kp-primaire-fonce: #1d2bd6;
  --kp-primaire-doux: #e5ebfe;
  --kp-nuit: #071647;
  --kp-nuit-2: #0c1f5a;
  --kp-titre: #061655;
  --kp-texte: #344b8d;
  --kp-discret: #5d6b97;
  --kp-fond: #f6f9fe;
  --kp-carte: #ffffff;
  --kp-bord: #e3e8f5;
  --kp-succes: #157f5f;
  --kp-succes-fond: #e1f8f5;
  --kp-alerte: #9a5b00;
  --kp-alerte-fond: #fff4dc;
  --kp-erreur: #c2283a;
  --kp-erreur-fond: #fde8eb;
  --kp-rayon: 14px;
  --kp-ombre: 0 6px 24px rgba(7, 22, 71, 0.06);
  --kp-ombre-forte: 0 12px 40px rgba(7, 22, 71, 0.12);

  --bs-primary: var(--kp-primaire);
  --bs-primary-rgb: 42, 59, 252;
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--kp-texte);
  --bs-body-bg: var(--kp-fond);
  --bs-border-color: var(--kp-bord);
  --bs-border-radius: 10px;
  --bs-link-color: var(--kp-primaire);
  --bs-link-hover-color: var(--kp-primaire-fonce);
  --bs-link-color-rgb: 42, 59, 252;
  --bs-focus-ring-color: rgba(42, 59, 252, 0.25);
}

body { font-size: 15px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .kp-titre { color: var(--kp-titre); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
.text-discret { color: var(--kp-discret) !important; }
.text-primaire { color: var(--kp-primaire) !important; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(42, 59, 252, 0.45); outline-offset: 2px; }

/* ---------- Boutons ---------- */
.btn { font-weight: 650; border-radius: 12px; padding: 0.6rem 1.1rem; }
.btn-primary { --bs-btn-bg: var(--kp-primaire); --bs-btn-border-color: var(--kp-primaire); --bs-btn-hover-bg: var(--kp-primaire-fonce); --bs-btn-hover-border-color: var(--kp-primaire-fonce); --bs-btn-active-bg: var(--kp-primaire-fonce); --bs-btn-disabled-bg: var(--kp-primaire); box-shadow: 0 6px 18px rgba(42, 59, 252, 0.25); }
.btn-outline-primary { --bs-btn-color: var(--kp-primaire); --bs-btn-border-color: var(--kp-primaire); --bs-btn-hover-bg: var(--kp-primaire); --bs-btn-hover-border-color: var(--kp-primaire); }
.btn-doux { background: var(--kp-primaire-doux); color: var(--kp-primaire); border: 0; }
.btn-doux:hover { background: #d6dffd; color: var(--kp-primaire-fonce); }
.btn-lg { padding: 0.85rem 1.4rem; border-radius: 14px; }
.btn-sm { padding: 0.35rem 0.75rem; border-radius: 10px; font-size: 0.85rem; }

/* ---------- Formulaires ---------- */
.form-label { font-weight: 600; color: var(--kp-titre); font-size: 0.9rem; }
.form-control, .form-select { background-color: #fff; border-radius: 12px; padding: 0.65rem 0.9rem; border-color: var(--kp-bord); color: var(--kp-titre); }
.form-control:focus, .form-select:focus { border-color: var(--kp-primaire); box-shadow: 0 0 0 4px rgba(42, 59, 252, 0.12); }
.form-text { color: var(--kp-discret); }
.invalid-feedback { font-weight: 500; }

/* ---------- Cartes ---------- */
.kp-carte { background: var(--kp-carte); border: 1px solid var(--kp-bord); border-radius: var(--kp-rayon); box-shadow: var(--kp-ombre); padding: 1.25rem 1.4rem; }
.kp-kpi { display: flex; gap: 1rem; align-items: center; }
.kp-kpi .kp-icone { width: 48px; height: 48px; border-radius: 50%; background: var(--kp-primaire-doux); color: var(--kp-primaire); display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 auto; }
.kp-kpi .valeur { font-size: 1.6rem; font-weight: 800; color: var(--kp-titre); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kp-kpi .libelle { font-size: 0.82rem; color: var(--kp-discret); }

/* ---------- Pastilles ---------- */
.kp-pastille { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-weight: 650; background: var(--kp-primaire-doux); color: var(--kp-primaire); white-space: nowrap; }
.kp-pastille.succes { background: var(--kp-succes-fond); color: var(--kp-succes); }
.kp-pastille.alerte { background: var(--kp-alerte-fond); color: var(--kp-alerte); }
.kp-pastille.erreur { background: var(--kp-erreur-fond); color: var(--kp-erreur); }
.kp-pastille.neutre { background: #eef1f8; color: var(--kp-discret); }
.kp-badge-haut { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--kp-primaire-doux); color: var(--kp-primaire); font-weight: 750; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.45rem 0.9rem; border-radius: 999px; }

/* ---------- Messages ---------- */
.kp-message { border-radius: 12px; padding: 0.8rem 1rem; display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; border: 1px solid transparent; }
.kp-message.succes { background: var(--kp-succes-fond); color: var(--kp-succes); border-color: #bfeee4; }
.kp-message.erreur { background: var(--kp-erreur-fond); color: var(--kp-erreur); border-color: #f7c9d0; }
.kp-message.alerte { background: var(--kp-alerte-fond); color: var(--kp-alerte); border-color: #f5dfab; }
.kp-message.info { background: var(--kp-primaire-doux); color: var(--kp-primaire-fonce); border-color: #cdd7fd; }

/* ---------- Logo ---------- */
.kp-logo { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.35rem; color: var(--kp-titre); text-decoration: none; letter-spacing: -0.02em; }
.kp-logo img { height: 34px; width: auto; display: block; }
.kp-logo .point { color: var(--kp-primaire); font-weight: 700; }
.kp-logo:hover { color: var(--kp-titre); }
.kp-logo.clair { color: #fff; }

/* ---------- Application : barre latérale + contenu ---------- */
.kp-app { display: flex; min-height: 100vh; }
.kp-sidebar { width: 248px; flex: 0 0 248px; background: var(--kp-nuit); color: #c9d2f2; display: flex; flex-direction: column; padding: 1.25rem 0.9rem; position: sticky; top: 0; height: 100vh; }
.kp-sidebar .kp-logo { padding: 0.25rem 0.6rem 1.25rem; }
.kp-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.kp-nav a, .kp-nav button { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: 10px; color: #c9d2f2; text-decoration: none; font-weight: 550; width: 100%; background: none; border: 0; text-align: left; }
.kp-nav a:hover, .kp-nav button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.kp-nav a.actif { background: var(--kp-primaire); color: #fff; box-shadow: 0 6px 18px rgba(42, 59, 252, 0.35); }
.kp-nav .bi { font-size: 1.1rem; }
.kp-nav-titre { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7d8bbd; margin: 1.1rem 0.85rem 0.35rem; }
.kp-nav .bientot { margin-left: auto; font-size: 0.65rem; background: rgba(255, 255, 255, 0.08); color: #9fb0e8; border-radius: 999px; padding: 0.1rem 0.45rem; }
.kp-nav a.inactif { opacity: 0.55; pointer-events: none; }
.kp-sidebar-bas { margin-top: auto; }
.kp-encart { background: linear-gradient(160deg, var(--kp-nuit-2), #13297a); border-radius: 14px; padding: 1rem; color: #fff; font-size: 0.85rem; }
.kp-encart strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; }

.kp-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kp-topbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem; background: var(--kp-fond); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid transparent; }
.kp-topbar h1 { font-size: 1.35rem; margin: 0; }
.kp-recherche { margin-left: auto; position: relative; max-width: 340px; width: 100%; }
.kp-recherche .form-control { padding-left: 2.4rem; border-radius: 999px; background: #fff; }
.kp-recherche .bi { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--kp-discret); }
.kp-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--kp-primaire-doux); color: var(--kp-primaire); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.kp-cloche { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--kp-bord); color: var(--kp-titre); }
.kp-contenu { padding: 0.5rem 2rem 3rem; }
.kp-menu-mobile { display: none; }

@media (max-width: 991.98px) {
  .kp-sidebar { position: fixed; left: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform 0.2s ease; }
  .kp-sidebar.ouverte { transform: none; box-shadow: var(--kp-ombre-forte); }
  .kp-menu-mobile { display: inline-grid; }
  .kp-topbar { padding: 0.85rem 1rem; }
  .kp-contenu { padding: 0.5rem 1rem 2.5rem; }
  .kp-recherche { display: none; }
}
.kp-voile { display: none; }
.kp-voile.visible { display: block; position: fixed; inset: 0; background: rgba(7, 22, 71, 0.35); z-index: 1040; }

/* ---------- Tableaux ---------- */
.kp-table { --bs-table-bg: transparent; margin: 0; }
.kp-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kp-discret); font-weight: 650; border-bottom-color: var(--kp-bord); white-space: nowrap; }
.kp-table td { vertical-align: middle; border-color: #eef1f8; color: var(--kp-titre); }
.kp-table tbody tr:hover td { background: #fafbff; }
.kp-vide { text-align: center; padding: 2.5rem 1rem; color: var(--kp-discret); }
.kp-vide .bi { font-size: 2rem; color: #b8c3e6; display: block; margin-bottom: 0.5rem; }

/* ---------- Étapes de démarrage ---------- */
.kp-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.kp-etapes li { display: flex; gap: 0.85rem; align-items: flex-start; }
.kp-etapes .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; background: var(--kp-primaire-doux); color: var(--kp-primaire); flex: 0 0 auto; }
.kp-etapes li.fait .num { background: var(--kp-succes-fond); color: var(--kp-succes); }
.kp-etapes li.attente { opacity: 0.6; }

/* ---------- Pages d'authentification ---------- */
.kp-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: #fff; }
.kp-auth-form { display: flex; flex-direction: column; padding: 2rem clamp(1.25rem, 5vw, 4.5rem); }
.kp-auth-form .corps { width: 100%; max-width: 430px; margin: auto; padding: 2rem 0; }
.kp-auth-ciel { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 60% 35% at 20% 82%, rgba(255, 255, 255, 0.95), transparent 70%),
  radial-gradient(ellipse 45% 25% at 78% 70%, rgba(255, 255, 255, 0.85), transparent 70%),
  radial-gradient(ellipse 70% 40% at 60% 100%, rgba(255, 255, 255, 0.9), transparent 70%),
  linear-gradient(180deg, #5b74ff 0%, #8ea4ff 38%, #cfdcff 72%, #f2f6ff 100%);
  display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; color: #fff; }
.kp-auth-ciel .citation { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.2rem; line-height: 1.55; max-width: 440px; color: var(--kp-titre); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px); border-radius: var(--kp-rayon); padding: 1.1rem 1.3rem; box-shadow: var(--kp-ombre); }
.kp-auth-ciel .auteur { font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; font-size: 0.85rem; color: var(--kp-texte); margin-top: 0.6rem; }
.kp-auth-ciel .accroche { color: var(--kp-titre); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; max-width: 460px; }
.kp-auth-ciel .accroche > span:not(.kp-ponct) { color: var(--kp-primaire); }
.kp-auth-ciel .oiseau { position: absolute; right: 4%; top: 20%; width: 58%; max-width: 460px; }
.kp-auth h1 { font-size: 1.9rem; }
@media (max-width: 991.98px) {
  .kp-auth { grid-template-columns: 1fr; }
  .kp-auth-ciel { display: none; }
}

/* ---------- Site public ---------- */
.kp-public-haut { padding: 1.2rem 0; }
.kp-public-haut .nav-link { color: var(--kp-titre); font-weight: 600; }
.kp-hero { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 40% 30% at 85% 30%, rgba(255, 255, 255, 0.9), transparent 70%),
  linear-gradient(180deg, #ffffff 0%, #eef3ff 55%, #dfe8ff 100%); padding: 3rem 0 4.5rem; }
.kp-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.kp-hero h1 > span:not(.kp-ponct) { color: var(--kp-primaire); display: block; }
.kp-hero .lead { color: var(--kp-texte); font-size: 1.15rem; max-width: 560px; }
.kp-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kp-atout { display: flex; gap: 0.75rem; align-items: center; font-weight: 600; color: var(--kp-titre); font-size: 0.92rem; }
.kp-atout .kp-icone { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--kp-ombre); display: grid; place-items: center; color: var(--kp-primaire); font-size: 1.2rem; flex: 0 0 auto; }
@media (max-width: 767.98px) { .kp-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kp-pied { background: var(--kp-nuit); color: #aeb9e0; padding: 2.5rem 0; font-size: 0.9rem; }
.kp-pied a { color: #dfe6ff; }

/* ---------- Sélecteur de langue ---------- */
.kp-langues { display: inline-flex; border: 1px solid var(--kp-bord); border-radius: 999px; padding: 2px; background: #fff; }
.kp-langues a, .kp-langues button { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--kp-discret); text-decoration: none; border: 0; background: none; }
.kp-langues .actif { background: var(--kp-primaire); color: #fff; }

/* ---------- Graphique simple (SVG) ---------- */
.kp-barres rect { fill: var(--kp-primaire); }
.kp-barres rect.vide { fill: #e6ebfa; }
.kp-barres text { fill: var(--kp-discret); font-size: 10px; font-family: inherit; }

/* ---------- Divers ---------- */
.kp-separateur { display: flex; align-items: center; gap: 0.75rem; color: var(--kp-discret); font-size: 0.85rem; }
.kp-separateur::before, .kp-separateur::after { content: ''; flex: 1; height: 1px; background: var(--kp-bord); }
.kp-onglets { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--kp-bord); margin-bottom: 1.25rem; overflow-x: auto; }
.kp-onglets a { padding: 0.6rem 0.9rem; color: var(--kp-discret); font-weight: 650; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.kp-onglets a.actif { color: var(--kp-primaire); border-bottom-color: var(--kp-primaire); }
.kp-mdp { position: relative; }
.kp-mdp .basculer { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--kp-discret); padding: 0.25rem 0.5rem; }
.kp-mdp .form-control { padding-right: 2.6rem; }
.kp-mdp .is-invalid ~ .basculer { right: 2rem; }
.kp-zone-danger { border-color: #f7c9d0; }
.kp-zone-danger h2 { color: var(--kp-erreur); }
.visually-hidden-focusable:focus { position: fixed !important; top: 0.5rem; left: 0.5rem; z-index: 2000; background: #fff; padding: 0.5rem 1rem; border-radius: 8px; box-shadow: var(--kp-ombre-forte); }
.kp-admin .kp-sidebar { background: #0a0f2c; }
.kp-admin .kp-nav a.actif { background: #2a3bfc; }
.kp-role { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8fa0d9; }
.kp-etroit { max-width: 640px; }
.kp-etroit-large { max-width: 760px; }

.kp-ponct { margin-left: -0.14em; }

/* ---------- Lot 2 : CRM et extension ---------- */
.min-w-0 { min-width: 0; }
.kp-avatar-lg { width: 56px; height: 56px; font-size: 1.35rem; }
.kp-etiquette { display: inline-flex; align-items: center; gap: 0.2rem; border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 650; line-height: 1.5; border: 0; background: #e5ebfe; color: #1f2fc9; }
.kp-etiquette.vert { background: #e1f8f5; color: #127052; }
.kp-etiquette.orange { background: #fff1de; color: #9a5300; }
.kp-etiquette.rouge { background: #fde8eb; color: #b42335; }
.kp-etiquette.violet { background: #f0e7fe; color: #6a2fc0; }
.kp-etiquette.gris { background: #eef1f8; color: #4c5a85; }
.kp-etiquette-retirer { cursor: pointer; }
.kp-etiquette-retirer:hover { filter: brightness(0.95); text-decoration: line-through; }
.kp-filtres-etapes { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; flex: 1 1 0; }
@media (max-width: 767.98px) { .kp-filtres-etapes { flex-basis: 100%; } }
.kp-filtres-etapes a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: #fff; border: 1px solid var(--kp-bord); color: var(--kp-texte); font-weight: 600; font-size: 0.82rem; text-decoration: none; }
.kp-filtres-etapes a span { color: var(--kp-discret); font-variant-numeric: tabular-nums; }
.kp-filtres-etapes a.actif { background: var(--kp-primaire); border-color: var(--kp-primaire); color: #fff; }
.kp-filtres-etapes a.actif span { color: #dfe4ff; }
.kp-barre-groupe { padding-bottom: 0.75rem; border-bottom: 1px solid #eef1f8; }
.kp-col-case { width: 36px; }
.kp-table-prospects .kp-col-prospect { max-width: 420px; }
.kp-code-appairage { background: var(--kp-primaire-doux); border-radius: 14px; padding: 1rem 1.2rem; }
.kp-code-appairage .code { display: block; font-size: 2rem; font-weight: 800; letter-spacing: 0.12em; color: var(--kp-titre); font-variant-numeric: tabular-nums; }
.kp-etat-appairage.ok { color: var(--kp-succes); font-weight: 650; }
.kp-etapes-ligne { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kp-etapes-ligne button { border: 1px solid var(--kp-bord); background: #fff; color: var(--kp-texte); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.82rem; font-weight: 600; }
.kp-etapes-ligne button:hover { border-color: var(--kp-primaire); color: var(--kp-primaire); }
.kp-etapes-ligne button.actif { background: var(--kp-primaire); border-color: var(--kp-primaire); color: #fff; }
.kp-infos { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; font-size: 0.88rem; }
.kp-infos dt { color: var(--kp-discret); font-weight: 600; }
.kp-infos dd { margin: 0; color: var(--kp-titre); }
.kp-note { border-left: 3px solid var(--kp-primaire-doux); padding-left: 0.85rem; }
.kp-note-texte { color: var(--kp-titre); white-space: normal; overflow-wrap: anywhere; }
.kp-encadre { background: var(--kp-fond); border-radius: 14px; padding: 1rem 1.1rem 0.6rem; }
.kp-encadre .btn { margin-bottom: 0.5rem; }
.kp-icone-ronde { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--kp-primaire-doux); color: var(--kp-primaire); flex: 0 0 auto; }
.kp-ligne-liste { border: 1px solid #eef1f8; border-radius: 14px; padding: 0.75rem 0.9rem; }
details > summary { cursor: pointer; }
a.kp-carte.kp-kpi { color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.kp-carte.kp-kpi:hover { box-shadow: var(--kp-ombre-forte); transform: translateY(-1px); }

.form-select-sm { padding-right: 2.1rem; background-position: right 0.6rem center; }
.kp-select-action { min-width: 15rem; }
.kp-etat-appairage.erreur { color: var(--kp-erreur); font-weight: 600; }
.kp-relation { display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 6px; background: var(--kp-succes-fond); color: var(--kp-succes); font-size: 0.7rem; font-weight: 700; line-height: 1.5; vertical-align: 0.1em; }
.kp-relation sup { font-size: 0.6em; top: -0.5em; }
.kp-filtres-etapes a.kp-filtre-relation { border-style: dashed; }
.kp-filtres-etapes a.kp-filtre-relation.actif { background: var(--kp-succes); border-color: var(--kp-succes); border-style: solid; color: #fff; }

/* ---------- Lot 4 : campagnes ---------- */
.kp-progression { height: 8px; border-radius: 999px; background: #e9eefb; overflow: hidden; }
.kp-progression > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kp-primaire), #6f7dff); }
.kp-w-0 { width: 0%; }
.kp-w-5 { width: 5%; }
.kp-w-10 { width: 10%; }
.kp-w-15 { width: 15%; }
.kp-w-20 { width: 20%; }
.kp-w-25 { width: 25%; }
.kp-w-30 { width: 30%; }
.kp-w-35 { width: 35%; }
.kp-w-40 { width: 40%; }
.kp-w-45 { width: 45%; }
.kp-w-50 { width: 50%; }
.kp-w-55 { width: 55%; }
.kp-w-60 { width: 60%; }
.kp-w-65 { width: 65%; }
.kp-w-70 { width: 70%; }
.kp-w-75 { width: 75%; }
.kp-w-80 { width: 80%; }
.kp-w-85 { width: 85%; }
.kp-w-90 { width: 90%; }
.kp-w-95 { width: 95%; }
.kp-w-100 { width: 100%; }
.kp-chiffres { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.85rem; color: var(--kp-discret); }
.kp-chiffres strong { color: var(--kp-titre); font-variant-numeric: tabular-nums; }
a.kp-campagne { color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.kp-campagne:hover { box-shadow: var(--kp-ombre-forte); transform: translateY(-1px); }
.kp-titre-campagne { color: var(--kp-titre); font-size: 1.05rem; }
.kp-choix { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid var(--kp-bord); border-radius: 14px; padding: 0.85rem 1rem; cursor: pointer; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.kp-choix:hover { border-color: #b9c4f5; }
.kp-choix input { margin-top: 0.25rem; accent-color: var(--kp-primaire); flex: 0 0 auto; }
.kp-choix:has(input:checked) { border-color: var(--kp-primaire); box-shadow: 0 0 0 3px rgba(42, 59, 252, 0.12); }
.kp-choix-liste { align-items: center; padding: 0.6rem 0.85rem; }
.kp-choix-liste input { margin-top: 0; }
.kp-sequence { display: grid; gap: 0; counter-reset: etape; }
.kp-etape { position: relative; }
.kp-etape-delai { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 0 0.6rem 1.15rem; margin-left: 1.05rem; border-left: 2px dashed #cfd8f4; }
.kp-etape:first-child .kp-etape-delai { padding-top: 0; }
.kp-mini { width: 4.5rem; padding: 0.25rem 0.5rem; }
.kp-etape-carte { border: 1px solid var(--kp-bord); border-radius: 14px; padding: 0.85rem 1rem; background: #fbfcff; }
.kp-etape-carte.erreur { border-color: #f1a3ae; background: #fff8f9; }
.kp-etape.glisse .kp-etape-carte { opacity: 0.5; border-style: dashed; }
.kp-etape.cible .kp-etape-carte { box-shadow: 0 -3px 0 var(--kp-primaire); }
.kp-poignee { cursor: grab; color: var(--kp-discret); font-size: 1.1rem; line-height: 1; padding: 0.2rem; }
.kp-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--kp-primaire); color: #fff; font-weight: 800; font-size: 0.8rem; flex: 0 0 auto; }
.kp-variable { border: 1px dashed #b9c4f5; background: #fff; color: var(--kp-primaire); border-radius: 8px; padding: 0.1rem 0.45rem; font-size: 0.75rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.kp-variable:hover { background: var(--kp-primaire-doux); }
.kp-apercu-texte { background: #fff; border: 1px solid #e3e8f5; border-left: 3px solid var(--kp-primaire); border-radius: 10px; padding: 0.6rem 0.8rem; white-space: pre-wrap; color: var(--kp-titre); }
.kp-apercu-texte .erreur { color: var(--kp-erreur); font-weight: 600; white-space: normal; }
.kp-apercu-texte .titre { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kp-discret); margin-bottom: 0.2rem; white-space: normal; }
@media (min-width: 1200px) { .kp-colonne-collante { position: sticky; top: 5.5rem; } }
.kp-journal li { border-bottom: 1px solid #eef1f8; padding-bottom: 0.5rem; }
.kp-journal li:last-child { border-bottom: 0; }
.kp-piece { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--kp-discret); }
.kp-icone-pdf { background: #fde8eb; color: #c42a3d; }
h2.h5, h3.h6 { font-weight: 800; }

/* ---------- Statistiques (lot 6) ----------
   Palette catégorielle validée (ordre fixe) : bleu, orange, vert, violet.
   L'orange a un contraste < 3:1 : chaque série a donc aussi son libellé et un tableau de données. */
:root { --kp-s0: #2a3bfc; --kp-s1: #e07b00; --kp-s2: #0f8a5f; --kp-s3: #a03fd1; }
.kp-graphique-zone { position: relative; overflow-x: auto; }
@media (max-width: 767.98px) { .kp-graphique svg { min-width: 620px; } }
.kp-graphique svg { width: 100%; height: auto; display: block; overflow: visible; font-family: inherit; }
.kp-graphique .grille line { stroke: #eef1f8; stroke-width: 1; }
.kp-graphique .grille line.base { stroke: #cfd6ea; }
.kp-graphique .grille text, .kp-graphique .axe-x text { fill: var(--kp-discret); font-size: 11px; font-variant-numeric: tabular-nums; }
.kp-graphique .serie polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kp-graphique .serie circle { stroke: #fff; stroke-width: 2; }
.kp-graphique .serie .tiret { stroke-width: 3; stroke-linecap: round; }
.kp-graphique .serie text.fin { fill: var(--kp-titre); font-size: 12px; font-weight: 600; }
.kp-graphique .s0 polyline, .kp-graphique .s0 .tiret { stroke: var(--kp-s0); } .kp-graphique .s0 circle { fill: var(--kp-s0); }
.kp-graphique .s1 polyline, .kp-graphique .s1 .tiret { stroke: var(--kp-s1); } .kp-graphique .s1 circle { fill: var(--kp-s1); }
.kp-graphique .s2 polyline, .kp-graphique .s2 .tiret { stroke: var(--kp-s2); } .kp-graphique .s2 circle { fill: var(--kp-s2); }
.kp-graphique .s3 polyline, .kp-graphique .s3 .tiret { stroke: var(--kp-s3); } .kp-graphique .s3 circle { fill: var(--kp-s3); }
.kp-graphique .cibles rect { fill: transparent; cursor: crosshair; }
.kp-graphique .reticule { stroke: #b8c2e0; stroke-width: 1; stroke-dasharray: 3 3; visibility: hidden; }
.kp-graphique .reticule.visible { visibility: visible; }
.kp-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; padding: 0; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--kp-titre); }
.kp-legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.kp-pastille-serie { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.kp-pastille-serie.s0 { background: var(--kp-s0); } .kp-pastille-serie.s1 { background: var(--kp-s1); } .kp-pastille-serie.s2 { background: var(--kp-s2); } .kp-pastille-serie.s3 { background: var(--kp-s3); }
.kp-infobulle { position: absolute; top: 0; z-index: 5; pointer-events: none; background: #fff; border: 1px solid var(--kp-bord); border-radius: 10px; box-shadow: var(--kp-ombre-forte); padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--kp-titre); min-width: 150px; }
.kp-infobulle strong { display: block; margin-bottom: 0.2rem; }
.kp-infobulle .ligne { display: flex; align-items: center; gap: 0.45rem; }
.kp-infobulle .ligne span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.kp-defile { max-height: 340px; overflow-y: auto; }
.kp-extrait { max-width: 320px; font-weight: 400; }
.kp-formules { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 0.5rem 1.25rem; font-size: 0.9rem; }
.kp-formules dt { color: var(--kp-titre); font-weight: 650; }
.kp-formules dd { margin: 0; }
@media (max-width: 575.98px) { .kp-formules { grid-template-columns: 1fr; } .kp-formules dd { margin-bottom: 0.4rem; } }
@media (forced-colors: active) { .kp-graphique .serie polyline, .kp-graphique .serie .tiret { stroke: CanvasText; } }

/* ---------- Abonnement (lot 7) ---------- */
.kp-details { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 0.35rem 1rem; font-size: 0.92rem; margin: 0; }
.kp-details dt { color: var(--kp-discret); font-weight: 500; }
.kp-details dd { margin: 0; color: var(--kp-titre); }
.kp-formule h2 { color: var(--kp-titre); }
.kp-prix { color: var(--kp-texte); }
.kp-prix strong { font-size: 1.8rem; font-weight: 800; color: var(--kp-titre); font-variant-numeric: tabular-nums; }
.kp-recap { position: sticky; top: 1rem; }
.kp-grande-icone { font-size: 3rem; }
.kp-texte-long { max-width: 780px; }
.kp-texte-long p { line-height: 1.7; }
@media (max-width: 575.98px) { .kp-details { grid-template-columns: 1fr; } .kp-details dd { margin-bottom: 0.4rem; } }
@media print {
  body { background: #fff; }
  .kp-carte { box-shadow: none; border: 0; padding: 0; }
  .kp-facture .kp-pastille { border: 1px solid currentColor; }
}
.kp-encart a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kp-chiffre { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--kp-titre); }

/* ---------- Notifications (lot 9) ---------- */
a.kp-cloche { text-decoration: none; }
.kp-cloche.actif { border-color: var(--kp-primaire); color: var(--kp-primaire); }
.kp-cloche-nombre { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--kp-erreur); color: #fff; font-size: 0.7rem; font-weight: 750; display: grid; place-items: center; line-height: 1; border: 2px solid #fff; }
.kp-notifs { margin: 0; }
.kp-notif { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kp-bord); }
.kp-notif:last-child { border-bottom: 0; }
.kp-notif.non-lue { background: var(--kp-primaire-doux); }
.kp-notif-icone { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--kp-bord); color: var(--kp-primaire); }
.kp-notif-icone.urgent { color: var(--kp-erreur); background: var(--kp-erreur-fond); border-color: transparent; }
.kp-notif-titre { background: none; border: 0; padding: 0; text-align: left; font-weight: 700; color: var(--kp-titre); }
.kp-notif-titre:hover, .kp-notif-titre:focus-visible { color: var(--kp-primaire); text-decoration: underline; }
.kp-notif.non-lue .kp-notif-titre::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kp-primaire); margin-right: 0.45rem; vertical-align: middle; }
.kp-notif-texte { color: var(--kp-texte, inherit); overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }
.kp-notif-icone.succes { color: var(--kp-succes); background: var(--kp-succes-fond); border-color: transparent; }
/* Barre du haut sur téléphone : le titre se raccourcit au lieu de faire déborder la page. */
.kp-topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .kp-topbar { gap: 0.5rem; }
  .kp-topbar h1 { font-size: 1.1rem; }
  .kp-langues a, .kp-langues button { padding: 0.2rem 0.45rem; }
}

/* ---------- Site public (lot 10) ---------- */
.text-primaire { color: var(--kp-primaire) !important; }
.kp-public-haut { position: sticky; top: 0; z-index: 20; background: rgba(246, 249, 254, 0.94); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--kp-bord); padding: 0.75rem 0; }
.kp-public-haut .navbar-nav .nav-link { color: var(--kp-titre); font-weight: 600; padding: 0.5rem 0.75rem; border-radius: 10px; }
.kp-public-haut .navbar-nav .nav-link:hover, .kp-public-haut .navbar-nav .nav-link.active { color: var(--kp-primaire); background: var(--kp-primaire-doux); }
.kp-public-haut .navbar-toggler { border: 1px solid var(--kp-bord); }
.kp-public-haut .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--kp-primaire-doux); }
.kp-atouts { padding: 0; }
.kp-section { padding: 4.5rem 0; }
.kp-section-claire { background: #fff; border-top: 1px solid var(--kp-bord); border-bottom: 1px solid var(--kp-bord); }
.kp-section h2:not(.h4):not(.h5):not(.h6) { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.kp-section h3 { font-size: 1.15rem; }
.kp-section-tete { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }
.kp-section-tete p { color: var(--kp-texte); font-size: 1.05rem; margin: 0; }
.kp-mesure { max-width: 640px; }
.kp-mesure-large { max-width: 960px; }
.kp-page-tete { padding: 3.5rem 0 1rem; background: radial-gradient(1000px 300px at 80% -20%, var(--kp-primaire-doux), transparent 70%); }
.kp-page-tete h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; }
.kp-page-tete .lead { max-width: 720px; color: var(--kp-texte); }
.kp-trois-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; }
@media (max-width: 991.98px) { .kp-trois-etapes { grid-template-columns: 1fr; } }
.kp-etape-num { width: 40px; height: 40px; border-radius: 50%; background: var(--kp-primaire); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 0.75rem; flex: none; }
.kp-frise { margin: 0; }
.kp-frise > li { display: flex; gap: 1.25rem; padding: 0 0 2rem; position: relative; }
.kp-frise > li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--kp-bord); }
.kp-frise .kp-etape-num { margin: 0; }
.kp-icone-ronde { width: 48px; height: 48px; border-radius: 50%; background: var(--kp-primaire-doux); color: var(--kp-primaire); display: inline-grid; place-items: center; font-size: 1.3rem; flex: none; }
.kp-coches, .kp-croix, .kp-puces-info { list-style: none; padding-left: 0; }
.kp-coches li, .kp-croix li, .kp-puces-info li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.kp-coches li::before, .kp-croix li::before, .kp-puces-info li::before { font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; }
.kp-coches li::before { content: "\F26A"; color: var(--kp-succes); }
.kp-croix li::before { content: "\F622"; color: var(--kp-erreur); }
.kp-puces-info li::before { content: "\F430"; color: var(--kp-primaire); }
.kp-carte-sobre { background: transparent; box-shadow: none; border: 1px dashed var(--kp-bord); }
.kp-offre { display: flex; flex-direction: column; }
.kp-prix-mise-en-avant { border: 2px solid var(--kp-primaire); }
.kp-prix-montant strong { font-size: 2.2rem; color: var(--kp-titre); letter-spacing: -0.02em; }
.kp-prix-montant span { color: var(--kp-discret); }
.kp-prix-depart strong { font-size: 2.4rem; color: var(--kp-titre); }
.kp-faq details { background: #fff; border: 1px solid var(--kp-bord); border-radius: 14px; padding: 0; margin-bottom: 0.75rem; }
.kp-faq summary { cursor: pointer; font-weight: 700; color: var(--kp-titre); padding: 1rem 3rem 1rem 1.25rem; list-style: none; position: relative; }
.kp-faq summary::-webkit-details-marker { display: none; }
.kp-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 1.25rem; top: 1rem; transition: transform 0.2s; color: var(--kp-primaire); }
.kp-faq details[open] summary::after { transform: rotate(180deg); }
.kp-faq summary:focus-visible { outline: 3px solid var(--kp-primaire-doux); border-radius: 14px; }
.kp-faq details p { padding: 0 1.25rem 1.1rem; margin: 0; color: var(--kp-texte); }
.kp-cta { background: linear-gradient(135deg, var(--kp-primaire), var(--kp-nuit)); color: #e5ebfe; padding: 4rem 0; }
.kp-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.kp-cta .btn-light { color: var(--kp-primaire); font-weight: 700; }
.kp-pied { padding: 3rem 0 2rem; }
.kp-pied-titre { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 0.75rem; }
.kp-pied li { margin-bottom: 0.4rem; }
.kp-pied a { text-decoration: none; }
.kp-pied a:hover { text-decoration: underline; }
.kp-pied-bas { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.kp-piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 575.98px) { .kp-section { padding: 3rem 0; } .kp-page-tete { padding-top: 2rem; } }
.kp-public-haut .nav-link, .kp-public-haut .btn { white-space: nowrap; }
.kp-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.kp-qr { width: 200px; height: 200px; background: #fff; border: 1px solid var(--kp-bord); border-radius: 12px; display: grid; place-items: center; }
.kp-qr svg { width: 200px; height: 200px; }
.kp-codes-secours { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.25rem 1.5rem; font-size: 1rem; }
.kp-controles li { padding: 0.3rem 0; border-bottom: 1px solid var(--kp-bord); }
.kp-controles li:last-child { border-bottom: 0; }
