/*
 * Thème Konkrete : surcharge de Bootstrap 5.3 (pas de Sass, pas de build, vendor/ intact).
 * Référence : docs/charte/README.md.
 *
 * Règle centrale : le jaune sert aux FONDS, jamais au texte. Jaune sur blanc = 1,6:1 (illisible),
 * noir sur jaune = 12,65:1. D'où deux jetons distincts, --kk-yellow (fonds) et --kk-ink (texte).
 */

@font-face {
  font-family: "Space Grotesk";
  src: url("../vendor/space-grotesk/space-grotesk-latin-500-normal.ab4861869c91.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../vendor/space-grotesk/space-grotesk-latin-700-normal.f9e147a59a93.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Jetons de la charte */
  --kk-yellow: #fec405;
  --kk-yellow-rgb: 254, 196, 5;
  --kk-yellow-soft: #fff6d1;
  --kk-yellow-border: #efd77a;
  --kk-yellow-dark: #7a5900;
  --kk-black: #060606;
  --kk-black-rgb: 6, 6, 6;
  --kk-ink: #1a1a1a;
  --kk-orange: #b8430a;
  --kk-orange-rgb: 184, 67, 10;
  --kk-page: #f6f5f1;
  --kk-font-heading: "Space Grotesk", var(--bs-font-sans-serif);

  /* Couleur primaire : un fond jaune. Le texte « primaire » reste noir (voir plus bas). */
  --bs-primary: var(--kk-yellow);
  --bs-primary-rgb: var(--kk-yellow-rgb);
  --bs-primary-text-emphasis: #5c4300;
  --bs-primary-bg-subtle: var(--kk-yellow-soft);
  --bs-primary-border-subtle: var(--kk-yellow-border);

  /* Alerte en orange : sinon « publié » et « à signer » seraient tous les deux jaunes. */
  --bs-warning: var(--kk-orange);
  --bs-warning-rgb: var(--kk-orange-rgb);
  --bs-warning-text-emphasis: #7a2c06;
  --bs-warning-bg-subtle: #fdebdd;
  --bs-warning-border-subtle: #f3c1a0;

  /* Information : ardoise, pour ne pas ajouter un cyan vif à la palette. */
  --bs-info: #2f6f8f;
  --bs-info-rgb: 47, 111, 143;
  --bs-info-text-emphasis: #1b4a60;
  --bs-info-bg-subtle: #e3f0f5;
  --bs-info-border-subtle: #b5d5e2;

  /* Rouge un peu plus sombre : celui de Bootstrap n'atteint que 4,15:1 sur le fond de page. */
  --bs-danger: #c4232f;
  --bs-danger-rgb: 196, 35, 47;

  /* Code : le rose de Bootstrap sort de la palette (4,13:1 sur le fond de page). */
  --bs-code-color: var(--kk-yellow-dark);

  /* Liens : noirs et soulignés. */
  --bs-link-color: var(--kk-ink);
  --bs-link-color-rgb: 26, 26, 26;
  --bs-link-hover-color: var(--kk-yellow-dark);
  --bs-link-hover-color-rgb: 122, 89, 0;

  --bs-body-bg: var(--kk-page);
  --bs-body-bg-rgb: 246, 245, 241;
  --bs-body-color: var(--kk-ink);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-heading-color: var(--kk-black);

  /* Angles nets, comme le logo. */
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.2rem;
  --bs-border-radius-lg: 0.25rem;
  --bs-border-radius-xl: 0.25rem;
  --bs-box-shadow-sm: 0 1px 2px rgba(var(--kk-black-rgb), 0.08);
  --bs-box-shadow: 0 3px 10px rgba(var(--kk-black-rgb), 0.1);

  --bs-focus-ring-color: rgba(var(--kk-black-rgb), 0.3);
}

/* --- Titres --------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--kk-font-heading);
  letter-spacing: -0.01em;
}

/* --- Utilitaires « primary » : Bootstrap en ferait du jaune sur blanc, ou du blanc sur jaune --- */
.text-primary { color: var(--kk-ink) !important; }
.link-primary { color: var(--kk-ink) !important; text-decoration-color: var(--kk-ink) !important; }
.border-primary { border-color: var(--kk-black) !important; }
.bg-primary,
.text-bg-primary { color: var(--kk-black) !important; }

/* Sur ces fonds foncés, Bootstrap met du noir en dur (contraste trop faible). */
.text-bg-warning,
.text-bg-info { color: #fff !important; }

/* Étoile de note : jaune de la marque, cernée pour rester visible sur le blanc. */
.bi-star-fill.text-warning {
  color: var(--kk-yellow) !important;
  -webkit-text-stroke: 0.6px var(--kk-black);
}

/* --- Boutons -------------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--kk-black);
  --bs-btn-bg: var(--kk-yellow);
  --bs-btn-border-color: var(--kk-yellow);
  --bs-btn-hover-color: var(--kk-yellow);
  --bs-btn-hover-bg: var(--kk-black);
  --bs-btn-hover-border-color: var(--kk-black);
  --bs-btn-active-color: var(--kk-yellow);
  --bs-btn-active-bg: var(--kk-black);
  --bs-btn-active-border-color: var(--kk-black);
  --bs-btn-disabled-color: var(--kk-black);
  --bs-btn-disabled-bg: var(--kk-yellow);
  --bs-btn-disabled-border-color: var(--kk-yellow);
  --bs-btn-focus-shadow-rgb: var(--kk-black-rgb);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--kk-black);
  --bs-btn-border-color: var(--kk-black);
  --bs-btn-hover-color: var(--kk-yellow);
  --bs-btn-hover-bg: var(--kk-black);
  --bs-btn-hover-border-color: var(--kk-black);
  --bs-btn-active-color: var(--kk-yellow);
  --bs-btn-active-bg: var(--kk-black);
  --bs-btn-active-border-color: var(--kk-black);
  --bs-btn-disabled-color: var(--kk-black);
  --bs-btn-disabled-border-color: var(--kk-black);
  --bs-btn-focus-shadow-rgb: var(--kk-black-rgb);
}

/* Gris de Bootstrap trop clair sur le fond chaud (4,3:1). */
.btn-outline-secondary {
  --bs-btn-color: #565e64;
  --bs-btn-border-color: #565e64;
  --bs-btn-hover-bg: #565e64;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #565e64;
}

/* --- Composants où Bootstrap garde son bleu en dur ------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-link-active-color: var(--kk-yellow);
  --bs-dropdown-link-active-bg: var(--kk-black);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--kk-black);
  --bs-nav-pills-link-active-bg: var(--kk-yellow);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--kk-yellow);
  --bs-progress-bar-color: var(--kk-black);
  --bs-progress-bg: #e3e1da;
}

.pagination {
  --bs-pagination-active-color: var(--kk-black);
  --bs-pagination-active-bg: var(--kk-yellow);
  --bs-pagination-active-border-color: var(--kk-yellow);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.list-group {
  --bs-list-group-active-color: var(--kk-black);
  --bs-list-group-active-bg: var(--kk-yellow);
  --bs-list-group-active-border-color: var(--kk-yellow);
}

/* Champs blancs : Bootstrap leur donne le fond de page, gris sur les cartes blanches. */
.form-control,
.form-select {
  background-color: #fff;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--kk-black);
  box-shadow: 0 0 0 0.25rem rgba(var(--kk-yellow-rgb), 0.55);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--kk-yellow);
  border-color: var(--kk-black);
}

/* Coche, point et curseur en noir : Bootstrap les dessine en blanc, invisibles sur le jaune. */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23060606' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23060606'/%3e%3c/svg%3e");
}

.form-check-input[type="checkbox"]:indeterminate {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23060606' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23060606'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: var(--kk-black); }
.form-range::-moz-range-thumb { background-color: var(--kk-black); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--kk-yellow-rgb), 0.55); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--kk-yellow-rgb), 0.55); }

.nav-link:focus-visible { box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); }

/* --- Structure de page ---------------------------------------------------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* Bandeau « Prototype » (F-GEN-03) : toujours visible, sans se confondre avec la marque. */
.prototype-banner {
  background: #e7e5de;
  color: var(--kk-ink);
  border-bottom: 1px solid #d3d0c6;
  font-size: 0.85rem;
}

/* Barre de navigation noire : logo inversé, lien actif en jaune. */
.kk-navbar {
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.5);
  --bs-navbar-active-color: var(--kk-yellow);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.4);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background: var(--kk-black);
  border-bottom: 3px solid var(--kk-yellow);
}

.kk-navbar .brand-logo {
  display: block;
  height: 2.1rem;
  width: auto;
}

.kk-navbar .nav-link.active {
  font-weight: 600;
}

@media (min-width: 992px) {
  .kk-navbar .navbar-nav > .nav-item > .nav-link.active {
    box-shadow: inset 0 -2px 0 var(--kk-yellow);
  }
}

.kk-navbar .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--kk-yellow-rgb), 0.7);
}

/* Le lien du panneau de démo garde sa couleur d'alerte ailleurs ; sur le noir, il passe en jaune. */
.kk-navbar .nav-link.text-warning-emphasis { color: var(--kk-yellow) !important; }

/* Sur le noir, le survol habituel (fond noir) ferait disparaître le bouton. */
.kk-navbar .btn-primary {
  --bs-btn-hover-color: var(--kk-black);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--kk-black);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.kk-footer {
  background: var(--kk-black);
  color: rgba(255, 255, 255, 0.85);
  border-top: 3px solid var(--kk-yellow);
}

.kk-footer .kk-slogan {
  color: var(--kk-yellow);
  font-family: var(--kk-font-heading);
  font-weight: 500;
}

/* --- Accueil (T12) : un bloc par partie, dans l'ordre de la page (core/home/) ---------------- */
/* Surtitre des parties : petites capitales ; en jaune sur le noir (12,65:1), en noir ailleurs. */
.kk-eyebrow {
  font-family: var(--kk-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kk-ink);
}

.kk-eyebrow-on-dark { color: var(--kk-yellow); }

/* Hero : bloc noir aux angles nets, bande de sécurité jaune en bas (diagonale du K). */
.kk-hero {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem 3rem;
  background: var(--kk-black);
  color: #fff;
  border-radius: var(--bs-border-radius-sm);
}

@media (min-width: 768px) {
  .kk-hero { padding: 3.5rem 3rem 4rem; }
}

.kk-hero-title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
}

.kk-hero-highlight { color: var(--kk-yellow); }

.kk-hero-lead {
  max-width: 38rem;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.88);
}

.kk-hero-link { color: #fff; text-underline-offset: 0.2em; }
.kk-hero-link:hover,
.kk-hero-link:focus { color: var(--kk-yellow); }

.kk-hero-mark {
  width: min(100%, 220px);
  height: auto;
}

.kk-safety-stripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.6rem;
  background: repeating-linear-gradient(-45deg, var(--kk-yellow) 0 14px, var(--kk-black) 14px 28px);
}

/* Sur le noir, le survol habituel du bouton principal (fond noir) le ferait disparaître. */
.kk-hero .btn-primary {
  --bs-btn-hover-color: var(--kk-black);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--kk-black);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.kk-hero .btn-outline-light { --bs-btn-hover-color: var(--kk-black); }

/* Le constat */
/* Chiffre clé : barre jaune à gauche (aplat), chiffre en noir. */
.kk-stat { border-left: 0.5rem solid var(--kk-yellow); }

.kk-stat-number {
  font-family: var(--kk-font-heading);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--kk-black);
}

/* Les services : cartes cliquables ; au survol, une bordure noire (le jaune ne borde rien). */
.kk-service-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kk-service-card:hover,
.kk-service-card:focus-visible {
  border-color: var(--kk-black);
  box-shadow: var(--bs-box-shadow-sm);
}

.kk-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bs-border-radius-sm);
  background: var(--kk-yellow);
  color: var(--kk-black);
  font-size: 1.5rem;
}

.kk-service-card:hover .kk-service-link { text-decoration: underline; }

/* Les étapes et les garanties */
.kk-guarantee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bs-border-radius-sm);
  background: var(--kk-yellow-soft);
  color: var(--kk-black);
  font-size: 1.25rem;
}

/* Dernier appel à l'action : bande blanche, liseré noir en haut (le jaune reste aux boutons). */
.kk-closing {
  padding: 1.5rem;
  background: #fff;
  border-top: 3px solid var(--kk-black);
}


/* --- Socle T0b : états vides, étapes, connexion ------------------------------------------------ */
.notification-count {
  font-size: 0.65rem;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--kk-yellow-soft);
  color: var(--kk-ink);
  font-size: 1.75rem;
}

.empty-state-text {
  max-width: 36rem;
}

.error-card {
  max-width: 40rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bs-border-radius);
  background: var(--kk-yellow);
  color: var(--kk-black);
  font-family: var(--kk-font-heading);
  font-weight: 700;
}

.demo-login-button .demo-hint {
  color: var(--bs-secondary-color);
}

.demo-login-button:hover .demo-hint,
.demo-login-button:focus .demo-hint {
  color: rgba(255, 255, 255, 0.85);
}

/* Cartes blanches sur le fond gris chaud (Bootstrap 5.3 leur donne sinon --bs-body-bg). */
.card {
  --bs-card-bg: #fff;
}

/* Listes dans une carte : fond blanc, comme la carte. */
.card .list-group { --bs-list-group-bg: #fff; }

/* Notifications (T3b) : cloche, liste, boîte d'envoi simulée. */
.notification-menu { width: min(22rem, calc(100vw - 2rem)); }
.notification-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--kk-black); flex-shrink: 0; }
.notification-unread { background: var(--kk-yellow-soft); }
.outbox-list { max-height: 70vh; overflow-y: auto; }
.outbox-body { white-space: pre-wrap; font-size: 0.925rem; line-height: 1.55; }
.min-w-0 { min-width: 0; }