/* ==========================================================================
KinkyMe CSS V5.0
Bootstrap-first. Bootstrap gère le layout, le sizing, les états natifs.
KinkyMe surcharge via --bs-* quand possible, sinon préfixe km-*.
Aucune classe Bootstrap native n'est écrasée silencieusement.
========================================================================== */

/* ==========================================================================
01. Fonts
========================================================================== */

@font-face {
	font-family: "Rubik";
	src: url("/assets/fonts/Rubik-VariableFont_wght.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Rubik";
	src: url("/assets/fonts/Rubik-Italic-VariableFont_wght.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("/assets/fonts/SourceSans3-VariableFont_wght.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("/assets/fonts/SourceSans3-Italic-VariableFont_wght.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
02. Design tokens KinkyMe
========================================================================== */

:root {
	/* Polices */
	--km-font-title: "Rubik", system-ui, sans-serif;
	--km-font-body: "Source Sans 3", system-ui, sans-serif;
	--km-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

	/* Couleurs marque */
	--km-wine: #8b1e4d;
	--km-wine-dark: #641638;
	--km-purple: #7b3fe4;
	--km-purple-soft: #c77dff;
	--km-purple-light: #ead7ff;
	--km-accent: #d7ff2f;
	--km-accent-soft: #efffa8;
	--km-accent-hot: #caff00;
	--km-accent-dark: #7f9900;

	/* Helpers RGB (pour rgba()) */
	--km-wine-rgb: 139, 30, 77;
	--km-purple-rgb: 123, 63, 228;
	--km-purple-soft-rgb: 199, 125, 255;
	--km-accent-rgb: 215, 255, 47;

	/* Fonds */
	--km-bg: #140d16;
	--km-bg-2: #241020;
	--km-bg-3: #110b14;
	--km-bg-gradient: radial-gradient(circle at top left,  rgba(var(--km-wine-rgb),   .45), transparent 34rem),
	radial-gradient(circle at top right, rgba(var(--km-purple-rgb), .28), transparent 30rem),
	radial-gradient(circle at 70% 12%,   rgba(var(--km-accent-rgb), .08), transparent 22rem),
	linear-gradient(135deg, var(--km-bg) 0%, var(--km-bg-2) 48%, var(--km-bg-3) 100%);

	/* Surfaces */
	--km-surface: rgba(32, 22, 34, .92);
	--km-surface-soft: rgba(255, 255, 255, .06);
	--km-surface-hover: rgba(255, 255, 255, .10);
	--km-surface-strong: rgba(38, 25, 42, .96);
	--km-surface-nav: rgba(20, 13, 22, .88);
	/* --km-surface-footer supprimé — footer utilise directement rgba() */

	/* Texte */
	--km-text: #f7f2f5;
	--km-text-strong: #ffffff;
	--km-text-soft: rgba(247, 242, 245, .88);
	--km-text-muted: rgba(201, 188, 198, .66);
	--km-text-subtle: rgba(247, 242, 245, .40);
	--km-text-faint: rgba(247, 242, 245, .28);
	--km-text-on-accent: #111305;

	/* États — couleur signal + dérivés fond/bordure/texte */
	--km-success: #50ffb4;
	--km-success-bg: rgba(80, 255, 180, .18);
	--km-success-border: rgba(80, 255, 180, .48);
	--km-success-text: #d9fff1;

	--km-info: #8ecbff;
	--km-info-bg: rgba(142, 203, 255, .18);
	--km-info-border: rgba(142, 203, 255, .46);
	--km-info-text: #e8f5ff;

	--km-warning: #ffd166;
	--km-warning-bg: rgba(255, 209, 102, .20);
	--km-warning-border: rgba(255, 209, 102, .55);
	--km-warning-text: #fff3cc;

	--km-danger: #ff5570;
	--km-danger-bg: rgba(255, 85, 112, .18);
	--km-danger-border: rgba(255, 85, 112, .55);
	--km-danger-text: #ffe5ea;

	/* Dégradés */
	--km-gradient-primary: linear-gradient(135deg, var(--km-wine), var(--km-purple));
	--km-gradient-auth: linear-gradient(90deg,  var(--km-wine), var(--km-purple), var(--km-accent));
	--km-gradient-accent: linear-gradient(135deg, var(--km-accent-hot), var(--km-accent), var(--km-accent-soft));
	--km-gradient-soft: linear-gradient(135deg, rgba(var(--km-purple-soft-rgb), .24), rgba(var(--km-purple-rgb), .28));
	--km-gradient-title: linear-gradient(135deg, var(--km-text-strong), var(--km-purple-light) 42%, var(--km-accent-soft));
	--km-gradient-hero: linear-gradient(135deg, rgba(var(--km-wine-rgb), .90), rgba(var(--km-purple-rgb), .78), rgba(var(--km-accent-rgb), .30));

	/* Bordures */
	--km-border: rgba(255, 255, 255, .12);
	--km-border-soft: rgba(255, 255, 255, .08);
	--km-border-strong: rgba(255, 255, 255, .20);
	--km-border-purple: rgba(var(--km-purple-soft-rgb), .45);
	--km-border-accent: rgba(var(--km-accent-rgb), .42);

	/* Rayons */
	--km-radius-sm: .65rem;
	--km-radius-md: .9rem;
	--km-radius-lg: 1.15rem;
	--km-radius-xl: 1.45rem;
	--km-radius-2xl: 2rem;
	--km-radius-btn: .78rem;
	--km-radius-badge: .45rem;

	/* Ombres */
	--km-shadow-sm: 0 .45rem 1.1rem rgba(0, 0, 0, .18);
	--km-shadow-md: 0 .85rem 2rem   rgba(0, 0, 0, .24);
	--km-shadow-lg: 0 1rem 2.5rem   rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
	--km-shadow-btn: 0 .45rem 1.1rem rgba(0, 0, 0, .22);
	--km-shadow-btn-hover: 0 .65rem 1.35rem rgba(0, 0, 0, .28);

	/* Layout */
	--km-container-max: 1080px;
	--km-section-y: clamp(3rem, 8vw, 6rem);
	--km-section-y-sm: clamp(2rem, 5vw, 4rem);
	--km-content-nav-top: 6.25rem;

	/* ---------------------------------------------------------------
	Surcharge des tokens Bootstrap via --bs-* pour éviter de
	réécrire les règles natives (.form-control, .card, .alert…)
	--------------------------------------------------------------- */
	--bs-body-font-family: var(--km-font-body);
	--bs-body-font-size: 1rem;
	--bs-body-line-height: 1.65;
	--bs-body-color: var(--km-text);
	--bs-body-bg: var(--km-bg);
	--bs-border-color: var(--km-border);
	--bs-border-radius: var(--km-radius-md);
	--bs-border-radius-sm: var(--km-radius-sm);
	--bs-border-radius-lg: var(--km-radius-lg);
	--bs-border-radius-xl: var(--km-radius-xl);
	--bs-border-radius-xxl: var(--km-radius-2xl);
	--bs-focus-ring-color: rgba(var(--km-accent-rgb), .25);
	--bs-focus-ring-width: .22rem;
	--bs-link-color: var(--km-text);
	--bs-link-hover-color: var(--km-text);
	/* Forms */
	--bs-form-control-bg: rgba(255, 255, 255, .08);
	--bs-form-control-border-color: rgba(255, 255, 255, .16);
	--bs-form-control-color: #ffffff;
	--bs-form-control-focus-bg: rgba(255, 255, 255, .10);
	--bs-form-control-focus-border-color: rgba(var(--km-accent-rgb), .58);
	--bs-form-control-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--km-accent-rgb), .16);
	--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23efffa8' d='M3.2 5.6a1 1 0 0 1 1.4 0L8 9l3.4-3.4a1 1 0 1 1 1.4 1.4l-4.1 4.1a1 1 0 0 1-1.4 0L3.2 7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
	/* Card */
	--bs-card-bg: transparent;
	--bs-card-border-color: var(--km-border);
	--bs-card-color: var(--km-text);
}

/* ==========================================================================
03. Base
========================================================================== */

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	background: var(--km-bg-gradient);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, canvas {
	max-width: 100%;
}

::selection {
	background: rgba(var(--km-accent-rgb), .34);
	color: var(--km-text-on-accent);
}

:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

code {
	color: var(--km-purple-light);
	font-family: var(--km-font-mono);
}

/* ==========================================================================
04. Layout
========================================================================== */

.container.km-container,
.km-container {
	max-width: var(--km-container-max);
}

.km-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.km-main {
	flex: 1;
}

/* ==========================================================================
05. Typographie
========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--km-font-title);
	color: var(--km-text-strong);
	letter-spacing: -.035em;
	overflow: visible;
}

h1 {
	font-size: clamp(2.45rem, 7vw, 4.85rem);
	font-weight: 820;
	line-height: 1;
	letter-spacing: -.055em;
	padding-bottom: .06em;
}

h2 {
	font-size: clamp(2rem, 5vw, 3.3rem);
	font-weight: 720;
	line-height: 1.02;
	letter-spacing: -.045em;
}

h3 {
	font-size: clamp(1.45rem, 3.5vw, 2.2rem);
	font-weight: 660;
	line-height: 1.06;
}

h4 {
	font-size: 1.3rem;
	font-weight: 620;
	line-height: 1.12;
}
h5 {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.15;
}
h6 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
}

p {
	color: var(--km-text-soft);
}

/* Sécurité clipping dégradé sur les titres */
h1,
.txt-gradient-primary,
.txt-gradient-auth,
.txt-gradient-accent,
.txt-gradient-soft,
.txt-gradient-title {
	overflow: visible;
	padding-right: .055em;
	padding-bottom: .07em;
}

.km-eyebrow {
	margin: 0 0 .75rem;
	font-family: var(--km-font-title);
	font-size: .8rem;
	font-weight: 480;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--km-accent);
}

.km-lead {
	max-width: 760px;
	color: var(--km-text-muted);
	font-size: 1.12rem;
	line-height: 1.58;
}

.km-section-intro {
	max-width: 760px;
	margin-top: 1rem;
	color: var(--km-text-muted);
	font-size: 1.08rem;
}

.km-mark {
	padding: .03em .22em .08em;
	border-radius: .28em;
	background: rgba(var(--km-accent-rgb), .90);
	color: var(--km-text-on-accent);
	box-shadow: 0 .15em 0 rgba(var(--km-accent-rgb), .20);
}

/* ==========================================================================
06. Utilitaires texte (préfixe txt-* = KinkyMe uniquement, pas Bootstrap)
========================================================================== */

.txt-white        {
	color: var(--km-text-strong)   !important;
}
.txt-body         {
	color: var(--km-text)           !important;
}
.txt-soft         {
	color: var(--km-text-soft)      !important;
}
.txt-muted        {
	color: var(--km-text-muted)     !important;
}
.txt-subtle       {
	color: var(--km-text-subtle)    !important;
}
.txt-faint        {
	color: var(--km-text-faint)     !important;
}
.txt-strong       {
	color: var(--km-text-strong)    !important;
}

.txt-wine         {
	color: var(--km-wine)           !important;
}
.txt-wine-dark    {
	color: var(--km-wine-dark)      !important;
}
.txt-purple       {
	color: var(--km-purple)         !important;
}
.txt-purple-soft  {
	color: var(--km-purple-soft)    !important;
}
.txt-purple-light {
	color: var(--km-purple-light)   !important;
}
.txt-accent       {
	color: var(--km-accent)         !important;
}
.txt-accent-soft  {
	color: var(--km-accent-soft)    !important;
}
.txt-accent-hot   {
	color: var(--km-accent-hot)     !important;
}
.txt-accent-dark  {
	color: var(--km-accent-dark)    !important;
}

.txt-km-success   {
	color: var(--km-success)        !important;
}
.txt-km-success-text {
	color: var(--km-success-text) !important;
}
.txt-km-info      {
	color: var(--km-info)            !important;
}
.txt-km-info-text {
	color: var(--km-info-text)       !important;
}
.txt-km-warning   {
	color: var(--km-warning)         !important;
}
.txt-km-warning-text {
	color: var(--km-warning-text) !important;
}
.txt-km-danger    {
	color: var(--km-danger)          !important;
}
.txt-km-danger-text {
	color: var(--km-danger-text)   !important;
}

/* Dégradés texte */
.txt-gradient-primary,
.txt-gradient-auth,
.txt-gradient-accent,
.txt-gradient-soft,
.txt-gradient-title {
	display: inline-block;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
.txt-gradient-primary {
	background-image: var(--km-gradient-primary);
}
.txt-gradient-auth    {
	background-image: var(--km-gradient-auth);
}
.txt-gradient-accent  {
	background-image: var(--km-gradient-accent);
}
.txt-gradient-soft    {
	background-image: linear-gradient(135deg, var(--km-purple-light), var(--km-purple-soft), var(--km-purple));
}
.txt-gradient-title   {
	background-image: var(--km-gradient-title);
}

/* ==========================================================================
07. Utilitaires fond (préfixe bg-km-* pour les couleurs KM)
Les classes sans préfixe km- ne collisionnent pas avec Bootstrap.
bg-surface-*, bg-wine, bg-purple, bg-accent… sont absentes de Bootstrap.
========================================================================== */

.bg-km-page      {
	background: var(--km-bg)             !important;
}
.bg-km-gradient  {
	background: var(--km-bg-gradient)     !important;
}

/* Surfaces — pas dans Bootstrap */
.bg-surface        {
	background: var(--km-surface)        !important;
	color: var(--km-text);
}
.bg-surface-soft   {
	background: var(--km-surface-soft)   !important;
	color: var(--km-text);
}
.bg-surface-hover  {
	background: var(--km-surface-hover)  !important;
	color: var(--km-text);
}
.bg-surface-strong {
	background: var(--km-surface-strong) !important;
	color: var(--km-text);
}

/* Fonds bruts */
.bg-bg   {
	background: var(--km-bg)   !important;
}
.bg-bg-2 {
	background: var(--km-bg-2) !important;
}
.bg-bg-3 {
	background: var(--km-bg-3) !important;
}

/* Couleurs marque */
.bg-wine         {
	background: var(--km-wine)         !important;
	color: #fff !important;
}
.bg-wine-dark    {
	background: var(--km-wine-dark)    !important;
	color: #fff !important;
}
.bg-purple       {
	background: var(--km-purple)       !important;
	color: #fff !important;
}
.bg-purple-soft  {
	background: var(--km-purple-soft)  !important;
	color: #16051f !important;
}
.bg-purple-light {
	background: var(--km-purple-light) !important;
	color: #16051f !important;
}
.bg-accent       {
	background: var(--km-accent)       !important;
	color: var(--km-text-on-accent) !important;
}
.bg-accent-soft  {
	background: var(--km-accent-soft)  !important;
	color: var(--km-text-on-accent) !important;
}
.bg-accent-hot   {
	background: var(--km-accent-hot)   !important;
	color: var(--km-text-on-accent) !important;
}
.bg-accent-dark  {
	background: var(--km-accent-dark)  !important;
	color: #fff !important;
}

/* États KinkyMe (préfixés km- pour ne pas écraser Bootstrap) */
.bg-km-success      {
	background: var(--km-success)        !important;
	color: #04140d !important;
}
.bg-km-info         {
	background: var(--km-info)           !important;
	color: #00111d !important;
}
.bg-km-warning      {
	background: var(--km-warning)        !important;
	color: #1a1200 !important;
}
.bg-km-danger       {
	background: var(--km-danger)         !important;
	color: #210007 !important;
}
.bg-success-soft    {
	background: var(--km-success-bg)     !important;
	color: var(--km-success-text) !important;
}
.bg-info-soft       {
	background: var(--km-info-bg)        !important;
	color: var(--km-info-text)    !important;
}
.bg-warning-soft    {
	background: var(--km-warning-bg)     !important;
	color: var(--km-warning-text) !important;
}
.bg-danger-soft     {
	background: var(--km-danger-bg)      !important;
	color: var(--km-danger-text)  !important;
}

/* Dégradés */
.bg-gradient-primary {
	background: var(--km-gradient-primary) !important;
}
.bg-gradient-auth    {
	background: var(--km-gradient-auth)    !important;
}
.bg-gradient-accent  {
	background: var(--km-gradient-accent)  !important;
	color: var(--km-text-on-accent) !important;
}
.bg-gradient-soft    {
	background: var(--km-gradient-soft)    !important;
}
.bg-gradient-title   {
	background: var(--km-gradient-title)   !important;
}
.bg-gradient-hero    {
	background: var(--km-gradient-hero)    !important;
}

/* ==========================================================================
08. Utilitaires bordure (border-km-* pour les états, évite Bootstrap)
========================================================================== */

.border-km        {
	border: 1px solid var(--km-border)        !important;
}
.border-soft      {
	border: 1px solid var(--km-border-soft)   !important;
}
.border-strong    {
	border: 1px solid var(--km-border-strong) !important;
}
.border-wine      {
	border: 1px solid rgba(var(--km-wine-rgb),         .55) !important;
}
.border-wine-dark {
	border: 1px solid rgba(var(--km-wine-rgb),         .72) !important;
}
.border-purple    {
	border: 1px solid rgba(var(--km-purple-rgb),       .55) !important;
}
.border-purple-soft {
	border: 1px solid var(--km-border-purple)             !important;
}
.border-accent    {
	border: 1px solid var(--km-border-accent)               !important;
}
.border-bg        {
	border: 1px solid var(--km-bg)                          !important;
}
.border-bg-2      {
	border: 1px solid var(--km-bg-2)                        !important;
}
.border-bg-3      {
	border: 1px solid var(--km-bg-3)                        !important;
}
.border-surface   {
	border: 1px solid rgba(255, 255, 255, .14)              !important;
}

/* États préfixés km- pour ne pas écraser Bootstrap */
.border-km-success {
	border: 1px solid var(--km-success-border) !important;
}
.border-km-info    {
	border: 1px solid var(--km-info-border)    !important;
}
.border-km-warning {
	border: 1px solid var(--km-warning-border) !important;
}
.border-km-danger  {
	border: 1px solid var(--km-danger-border)  !important;
}

/* Alias sans préfixe utilisés dans styles.php (sections tokens/cards) */
.border-success {
	border: 1px solid var(--km-success-border) !important;
}
.border-info    {
	border: 1px solid var(--km-info-border)    !important;
}
.border-warning {
	border: 1px solid var(--km-warning-border) !important;
}
.border-danger  {
	border: 1px solid var(--km-danger-border)  !important;
}

/* ==========================================================================
09. Utilitaires radius et ombre
========================================================================== */

.rounded-km-sm  {
	border-radius: var(--km-radius-sm)  !important;
}
.rounded-km-md  {
	border-radius: var(--km-radius-md)  !important;
}
.rounded-km-lg  {
	border-radius: var(--km-radius-lg)  !important;
}
.rounded-km-xl  {
	border-radius: var(--km-radius-xl)  !important;
}
.rounded-km-2xl {
	border-radius: var(--km-radius-2xl) !important;
}

.shadow-km-sm {
	box-shadow: var(--km-shadow-sm) !important;
}
.shadow-km-md {
	box-shadow: var(--km-shadow-md) !important;
}
.shadow-km-lg {
	box-shadow: var(--km-shadow-lg) !important;
}

/* ==========================================================================
10. Boutons KinkyMe
Bootstrap gère le padding, la taille (.btn-sm / .btn-lg), les états actifs.
KinkyMe définit uniquement l'identité visuelle via --bs-btn-*.
========================================================================== */

.btn {
	font-family: var(--km-font-body);
	font-weight: 600;
	border-radius: var(--km-radius-btn);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .42rem;
	line-height: var(--bs-btn-line-height);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.btn:has(.bi:only-child) .bi {
	margin-right: 0;
}

/* Noms avec préfixe btn-km- (Bootstrap-safe) */
.btn-km-primary,
.km-btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(var(--km-purple-soft-rgb), .55);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: rgba(var(--km-purple-soft-rgb), .78);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: rgba(var(--km-purple-soft-rgb), .90);
	background-image: var(--km-gradient-primary);
}

.btn-km-accent,
.km-btn-accent {
	--bs-btn-color: var(--km-text-on-accent);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(var(--km-accent-rgb), .58);
	--bs-btn-hover-color: var(--km-text-on-accent);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: rgba(var(--km-accent-rgb), .82);
	--bs-btn-active-color: var(--km-text-on-accent);
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: rgba(var(--km-accent-rgb), .95);
	background-image: var(--km-gradient-accent);
}

.btn-km-soft,
.km-btn-soft {
	--bs-btn-color: var(--km-purple-light);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(var(--km-purple-soft-rgb), .42);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: rgba(var(--km-purple-soft-rgb), .70);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: rgba(var(--km-purple-soft-rgb), .82);
	background-image: var(--km-gradient-soft);
}

.btn-km-ghost,
.km-btn-ghost {
	--bs-btn-color: var(--km-text-soft);
	--bs-btn-bg: var(--km-surface-soft);
	--bs-btn-border-color: var(--km-border-strong);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(var(--km-purple-soft-rgb), .12);
	--bs-btn-hover-border-color: rgba(var(--km-purple-soft-rgb), .55);
}

.btn-km-success,
.km-btn-success {
	--bs-btn-color: var(--km-success-text);
	--bs-btn-bg: var(--km-success-bg);
	--bs-btn-border-color: var(--km-success-border);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(80, 255, 180, .24);
	--bs-btn-hover-border-color: rgba(80, 255, 180, .72);
}

.btn-km-info,
.km-btn-info {
	--bs-btn-color: var(--km-info-text);
	--bs-btn-bg: var(--km-info-bg);
	--bs-btn-border-color: var(--km-info-border);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(142, 203, 255, .24);
	--bs-btn-hover-border-color: rgba(142, 203, 255, .72);
}

.btn-km-warning,
.km-btn-warning {
	--bs-btn-color: var(--km-warning-text);
	--bs-btn-bg: var(--km-warning-bg);
	--bs-btn-border-color: var(--km-warning-border);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 209, 102, .26);
	--bs-btn-hover-border-color: rgba(255, 209, 102, .76);
}

.btn-km-danger,
.km-btn-danger {
	--bs-btn-color: var(--km-danger-text);
	--bs-btn-bg: var(--km-danger-bg);
	--bs-btn-border-color: var(--km-danger-border);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 85, 112, .25);
	--bs-btn-hover-border-color: rgba(255, 85, 112, .78);
}

/* Ombre et hover communs à tous les boutons km */
.btn-km-primary, .km-btn-primary,
.btn-km-accent,  .km-btn-accent,
.btn-km-soft,    .km-btn-soft,
.btn-km-ghost,   .km-btn-ghost,
.btn-km-success, .km-btn-success,
.btn-km-info,    .km-btn-info,
.btn-km-warning, .km-btn-warning,
.btn-km-danger,  .km-btn-danger {
	box-shadow: var(--km-shadow-btn);
}

.btn-km-primary:hover, .km-btn-primary:hover,
.btn-km-accent:hover,  .km-btn-accent:hover,
.btn-km-soft:hover,    .km-btn-soft:hover,
.btn-km-ghost:hover,   .km-btn-ghost:hover,
.btn-km-success:hover, .km-btn-success:hover,
.btn-km-info:hover,    .km-btn-info:hover,
.btn-km-warning:hover, .km-btn-warning:hover,
.btn-km-danger:hover,  .km-btn-danger:hover {
	transform: translateY(-1px);
	box-shadow: var(--km-shadow-btn-hover);
	filter: brightness(1.05);
}

/* ==========================================================================
11. Formulaires
Bootstrap gère la structure. On surcharge uniquement ce que --bs-* ne couvre pas.
========================================================================== */

.form-label {
	color: var(--km-text-soft);
	font-weight: 560;
}

.form-control,
.form-select {
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--km-radius-md);
	background-color: rgba(255, 255, 255, .08);
	color: #fff;
	font-family: var(--km-font-body);
}

.form-control:focus,
.form-select:focus {
	border-color: rgba(var(--km-accent-rgb), .58);
	background-color: rgba(255, 255, 255, .10);
	color: #fff;
	box-shadow: 0 0 0 .22rem rgba(var(--km-accent-rgb), .16);
}

.form-control::placeholder {
	color: var(--km-text-faint);
}

.form-text {
	color: var(--km-text-subtle);
}

.form-select {
	background-image: var(--bs-form-select-bg-img);
	background-size: 1rem .8rem;
}

.form-select option,
.form-select optgroup {
	background-color: #ffffff;
	color: #111111;
}

.form-select option:checked {
	background-color: #7b3fe4;
	color: #ffffff;
}

.form-check-input {
	border-color: var(--km-border-strong);
	background-color: rgba(255, 255, 255, .08);
}

.form-check-input:checked {
	border-color: var(--km-purple-soft);
	background-color: var(--km-purple-soft);
}

.form-check-input:focus {
	box-shadow: 0 0 0 .22rem rgba(var(--km-purple-soft-rgb), .20);
}

.form-range::-webkit-slider-thumb        {
	background: var(--km-accent);
}
.form-range::-moz-range-thumb            {
	background: var(--km-accent);
	border: 0;
}
.form-range::-webkit-slider-runnable-track {
	background: rgba(255,255,255,.16);
}
.form-range::-moz-range-track            {
	background: rgba(255,255,255,.16);
}

.input-group-text {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: var(--km-text-muted);
}

/* ==========================================================================
12. Alertes KinkyMe
Composées avec les classes Bootstrap (.alert, .alert-success…) + .alert-km
========================================================================== */

.alert-km {
	position: relative;
	border-radius: var(--km-radius-md);
	box-shadow: var(--km-shadow-sm);
	overflow: hidden;
	border-left-width: 1px;
	--km-alert-signal: var(--km-border-strong);
}

.alert-km::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: .35rem;
	background: var(--km-alert-signal);
}

.alert-km strong {
	color: #fff;
}

.alert-success.alert-km {
	--km-alert-signal: var(--km-success);
	border-color: var(--km-success-border);
	background: var(--km-success-bg);
	color: var(--km-success-text);
}

.alert-info.alert-km {
	--km-alert-signal: var(--km-info);
	border-color: var(--km-info-border);
	background: var(--km-info-bg);
	color: var(--km-info-text);
}

.alert-warning.alert-km {
	--km-alert-signal: var(--km-warning);
	border-color: var(--km-warning-border);
	background: var(--km-warning-bg);
	color: var(--km-warning-text);
}

.alert-danger.alert-km {
	--km-alert-signal: var(--km-danger);
	border-color: var(--km-danger-border);
	background: var(--km-danger-bg);
	color: var(--km-danger-text);
}

/* ==========================================================================
13. Badges KinkyMe
Composés avec .badge Bootstrap + .badge-km + variante couleur .badge-km-*
========================================================================== */

.badge-km,
.badge.badge-km {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .42rem;
	min-height: 1.45rem;
	padding: .30rem .52rem .28rem;
	border-radius: var(--km-radius-badge);
	font-family: var(--km-font-body);
	font-size: .78rem;
	font-weight: 350;
	letter-spacing: .01em;
	line-height: 1;
	vertical-align: middle;
}

.badge-km .bi,
.badge.badge-km .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: .95em;
	margin-right: .08rem;
}

.badge-km-success {
	border: 1px solid var(--km-success-border);
	background: var(--km-success-bg);
	color: var(--km-success-text);
}
.badge-km-info {
	border: 1px solid var(--km-info-border);
	background: var(--km-info-bg);
	color: var(--km-info-text);
}
.badge-km-warning {
	border: 1px solid var(--km-warning-border);
	background: var(--km-warning-bg);
	color: var(--km-warning-text);
}
.badge-km-danger {
	border: 1px solid var(--km-danger-border);
	background: var(--km-danger-bg);
	color: var(--km-danger-text);
}
.badge-km-accent {
	border: 1px solid var(--km-border-accent);
	background: rgba(var(--km-accent-rgb), .14);
	color: var(--km-accent-soft);
}
.badge-km-purple {
	border: 1px solid var(--km-border-purple);
	background: rgba(var(--km-purple-soft-rgb), .14);
	color: var(--km-purple-light);
}

/* ==========================================================================
14. Carte KinkyMe
Bootstrap gère .card. .card-km neutralise les couleurs par défaut.
Ensuite on compose avec bg-*, border-*, rounded-*, shadow-*.
========================================================================== */

.card-km {
	background: transparent;
	color: var(--km-text);
	border: 0;
}

.card-km .card-title,
.card-km h1, .card-km h2, .card-km h3,
.card-km h4, .card-km h5, .card-km h6 {
	color: var(--km-text-strong);
}

/* ==========================================================================
15. Navbar et footer
========================================================================== */

.km-navbar {
	background: var(--km-surface-nav);
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	backdrop-filter: blur(14px);
}

.km-brand,
.km-navbar .navbar-brand {
	color: #fff;
	font-family: var(--km-font-title);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.025em;
}

.km-brand span,
.km-navbar .navbar-brand span {
	color: var(--km-accent);
}

.km-navbar .nav-link {
	position: relative;
	color: rgba(247, 242, 245, .78);
	font-weight: 520;
}

.km-navbar .nav-link::after {
	content: "";
	position: absolute;
	left: .5rem;
	right: .5rem;
	bottom: .25rem;
	height: 1px;
	background: var(--km-accent);
	transform: scaleX(0);
	transition: transform .16s ease;
}

.km-navbar .nav-link:hover,
.km-navbar .nav-link:focus,
.km-navbar .nav-link.active {
	color: #fff;
}

.km-navbar .nav-link:hover::after,
.km-navbar .nav-link.active::after {
	transform: scaleX(1);
}

.km-navbar .navbar-toggler {
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .08);
}

.km-navbar .navbar-toggler-icon,
.navbar-toggler-icon {
	filter: invert(1);
}

.km-footer {
	padding: 1.75rem 0 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	background: rgba(20, 13, 22, .60);
	backdrop-filter: blur(10px);
}

/* Marque — réutilisée aussi dans la navbar */
.km-footer-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-family: var(--km-font-title);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -.025em;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}

.km-footer-brand span {
	color: var(--km-accent);
}
.km-footer-brand:hover {
	color: #fff;
	text-decoration: none;
}

/* Ligne de liens */
.km-footer-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .9rem;
	margin: .9rem 0;
}

.km-footer-nav a {
	color: var(--km-text-muted);
	font-size: .875rem;
	text-decoration: none;
	transition: color .14s ease;
}

.km-footer-nav a:hover {
	color: var(--km-accent-soft);
}

/* Séparateur visuel entre groupes de liens */
.km-footer-nav-sep {
	color: var(--km-text-faint);
	font-size: .75rem;
	pointer-events: none;
	user-select: none;
}

/* Bas de page */
.km-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	padding-top: .9rem;
	border-top: 1px solid rgba(255, 255, 255, .06);
	color: var(--km-text-faint);
	font-size: .8rem;
}

@media (max-width: 575.98px) {
	.km-footer-nav {
		gap: .35rem .75rem;
	}
	.km-footer-nav-sep {
		display: none;
	}
	.km-footer-bottom {
		flex-direction: column;
	gap: .15rem;
	}
}

/* ==========================================================================
16. Sections et layout de page
========================================================================== */

.km-section    {
	padding: var(--km-section-y) 0;
}
.km-section-sm {
	padding: var(--km-section-y-sm) 0;
}

.km-section-header {
	max-width: 780px;
	margin-bottom: 2rem;
}

/* Sections avec angles décoratifs */
.km-section-angled,
.km-section-angle-top,
.km-section-angle-bottom,
.km-section-hero-wide {
	position: relative;
	overflow: hidden;
}

.km-section-angled::after,
.km-section-angle-bottom::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: clamp(3rem, 7vw, 6rem);
	background: var(--km-angle-bottom, var(--km-purple));
	clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%);
	z-index: 0;
}

.km-section-angle-top::before,
.km-section-hero-wide::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(3rem, 7vw, 6rem);
	background: var(--km-angle-top, var(--km-wine));
	clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%);
	z-index: 0;
}

.km-section-hero-wide::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: clamp(3rem, 7vw, 6rem);
	background: var(--km-angle-bottom, var(--km-purple));
	clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%);
	z-index: 0;
}

.km-section-angled    > .container,
.km-section-angle-top > .container,
.km-section-angle-bottom > .container,
.km-section-hero-wide > .container {
	position: relative;
	z-index: 1;
}

/* Variantes d'angle */
.angle-top-wine        {
	--km-angle-top: var(--km-wine);
}
.angle-top-purple      {
	--km-angle-top: var(--km-purple);
}
.angle-top-purple-soft {
	--km-angle-top: var(--km-purple-soft);
}
.angle-top-accent      {
	--km-angle-top: var(--km-accent);
}
.angle-top-auth        {
	--km-angle-top: var(--km-gradient-auth);
}
.angle-bottom-wine     {
	--km-angle-bottom: var(--km-wine);
}
.angle-bottom-purple   {
	--km-angle-bottom: var(--km-purple);
}
.angle-bottom-purple-soft {
	--km-angle-bottom: var(--km-purple-soft);
}
.angle-bottom-accent   {
	--km-angle-bottom: var(--km-accent);
}
.angle-bottom-auth     {
	--km-angle-bottom: var(--km-gradient-auth);
}

/* ==========================================================================
17. Composants UI spécifiques
========================================================================== */

/* Hero panel */
.km-hero-panel {
	padding: clamp(24px, 5vw, 50px);
	border-radius: var(--km-radius-2xl);
	background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), var(--km-gradient-hero);
	box-shadow: var(--km-shadow-lg);
}

.km-hero-panel-inner {
	border-radius: var(--km-radius-xl);
	background: rgba(20, 13, 22, .78);
	border: 1px solid var(--km-border);
	backdrop-filter: blur(12px);
}

/* Navigation contextuelle (sidebar sticky) */
.content-nav {
	position: sticky;
	top: var(--km-content-nav-top);
	z-index: 1;
	padding: 1rem;
	border-radius: var(--km-radius-lg);
	background: rgba(32, 22, 34, .74);
	border: 1px solid var(--km-border);
	backdrop-filter: blur(12px);
}

.content-nav-title {
	margin: 0 0 .75rem;
	padding: 0 .35rem;
	color: var(--km-text-subtle);
	font-family: var(--km-font-title);
	font-size: .8rem;
	font-weight: 480;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.content-nav a {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin-top: .2rem;
	padding: .62rem .75rem;
	border-radius: var(--km-radius-sm);
	color: var(--km-text-muted);
	font-weight: 520;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.content-nav a:hover {
	background: rgba(var(--km-purple-soft-rgb), .12);
	color: #fff;
}

.content-nav a.active {
	background: rgba(var(--km-purple-soft-rgb), .18);
	color: #fff;
	box-shadow: inset .18rem 0 0 var(--km-purple-soft);
}

/* Liste de liens type Linktree */
.link-list {
	display: grid;
	gap: .75rem;
}

.link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.1rem;
	border-radius: var(--km-radius-md);
	border: 1px solid var(--km-border);
	background: var(--km-surface-soft);
	color: var(--km-text);
	font-weight: 590;
	text-decoration: none;
	transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.link-list a::after {
	content: "→";
	color: var(--km-accent);
}

.link-list a:hover {
	transform: translateY(-1px);
	border-color: var(--km-border-purple);
	background: rgba(var(--km-purple-soft-rgb), .11);
	color: #fff;
}

/* Lien discret (ex: mot de passe oublié) */
.km-small-link {
	font-size: .875rem;
	color: var(--km-text-muted);
	text-decoration: none;
}
.km-small-link:hover {
	color: var(--km-accent-soft);
}

/* ==========================================================================
18. Responsive
========================================================================== */

@media (max-width: 991.98px) {
	.content-nav {
		position: static;
		top: auto;
	}
}

@media (max-width: 767.98px) {
	h1 {
		font-size: clamp(2.15rem, 12vw, 3.25rem);
	}

	.km-section {
		padding: clamp(2.5rem, 7vw, 4rem) 0;
	}

	.km-card, .rounded-km-xl, .rounded-km-2xl {
		border-radius: var(--km-radius-lg) !important;
	}

	.km-footer-bottom {
		display: block;
	}

	.km-footer-bottom span {
		display: block;
	}

	.km-footer-bottom span + span {
		margin-top: .5rem;
	}
}