:root {
  --kp-red-1: #ff1238;
  --kp-red-2: #ea0c22;
  --kp-red-3: #b8071b;
  --kp-red-4: #4b0208;
  --kp-black: #0a0a0a;
  --kp-white: #ffffff;
  /* sombre gauche -> clair droite */
  --kp-brand-grad: linear-gradient(90deg, #6a040d 0%, #940a16 28%, #bf1022 62%, #ff2b4f 100%);
  --kp-footer-grad: var(--kp-brand-grad);
}

body.kp-body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111827;
}

.kp-gradient-red {
  background: linear-gradient(145deg, var(--kp-red-1) 0%, var(--kp-red-2) 45%, var(--kp-red-3) 100%);
}

.kp-gradient-red-text {
  background: linear-gradient(135deg, var(--kp-red-1) 0%, var(--kp-white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.kp-surface-card {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 18px 35px -25px rgba(17, 24, 39, 0.4);
}

.kp-link-hover {
  transition: color 0.2s ease, opacity 0.2s ease;
}
.kp-link-hover:hover {
  color: #fff;
  opacity: 0.95;
}

/* Unifie les titres de section publics */
.section-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}
.section-title::after {
  background: linear-gradient(90deg, var(--kp-red-1), var(--kp-red-2), var(--kp-red-3)) !important;
  box-shadow: 0 0 12px rgba(234, 12, 34, 0.35) !important;
}

/* Boutons principaux (Tailwind + classes custom existantes) */
.btn-primary,
.btn-learn-more,
button[type="submit"] {
  background: linear-gradient(145deg, var(--kp-red-1) 0%, var(--kp-red-2) 45%, var(--kp-red-3) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.8rem !important;
  box-shadow: 0 8px 20px rgba(187, 10, 27, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover,
.btn-learn-more:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 12px 24px rgba(187, 10, 27, 0.36);
}

/* Cartes et blocs de contenu */
.service-item,
.portfolio-item,
.plan-content,
article.bg-white.rounded-xl.shadow-lg,
.grid > div > div.bg-white {
  border-radius: 0.9rem !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 35px -25px rgba(15, 23, 42, 0.42) !important;
}

/* Formulaires */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  border-radius: 0.75rem !important;
  border-color: rgba(148, 163, 184, 0.65) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--kp-red-2) !important;
  box-shadow: 0 0 0 3px rgba(234, 12, 34, 0.16) !important;
  outline: none !important;
}

/* Petits accents de lien */
a.text-red-600,
.text-red-600 {
  color: var(--kp-red-2) !important;
}

.text-red-700 {
  color: var(--kp-red-3) !important;
}

.bg-red-50 {
  background-color: rgba(255, 18, 56, 0.08) !important;
}

.bg-red-600 {
  background-color: var(--kp-red-2) !important;
}

.bg-red-700 {
  background-color: var(--kp-red-3) !important;
}

.hover\:bg-red-700:hover {
  background-color: var(--kp-red-3) !important;
}

.border-red-200 {
  border-color: rgba(255, 18, 56, 0.24) !important;
}

.border-red-400 {
  border-color: rgba(234, 12, 34, 0.55) !important;
}

.border-red-500 {
  border-color: var(--kp-red-2) !important;
}

.border-red-600 {
  border-color: var(--kp-red-2) !important;
}

.focus\:border-red-500:focus {
  border-color: var(--kp-red-2) !important;
}

.focus\:ring-red-500:focus {
  --tw-ring-color: rgba(234, 12, 34, 0.3) !important;
}

.hover\:text-red-600:hover,
.hover\:text-red-700:hover {
  color: var(--kp-red-2) !important;
}

.from-red-600 {
  --tw-gradient-from: var(--kp-red-2) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(234 12 34 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-red-800 {
  --tw-gradient-to: var(--kp-red-4) var(--tw-gradient-to-position) !important;
}

/* Accès « Accueil » uniquement via le logo : libellé masqué visuellement pour lecteurs d’écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}