/* =========================================================================
   CaisseMarket — Design System
   Charte V1 : thème sombre, Vert Signal = action/disponible, Gris = pris.
   Typo : Inter Tight (titres 800) + Inter (texte/UI).
   ========================================================================= */

:root {
	/* --- Couleurs de marque (charte V1) --- */
	--cm-vert:        #00D26A; /* Primaire · action, disponible */
	--cm-vert-hover:  #00E676;
	--cm-vert-press:  #00B85C;
	--cm-noir:        #000000; /* Logo, aplats forts */
	--cm-anthracite:  #101418; /* Fond principal */
	--cm-ardoise:     #1B222B; /* Surfaces, cartes */
	--cm-ardoise-2:   #222B35; /* Surfaces élevées / hover */
	--cm-blanc:       #FFFFFF; /* Texte principal */
	--cm-gris:        #8A929C; /* Texte secondaire, désactivé, lead PRIS */

	/* --- Tokens sémantiques --- */
	--cm-bg:          var(--cm-anthracite);
	--cm-surface:     var(--cm-ardoise);
	--cm-surface-2:   var(--cm-ardoise-2);
	--cm-text:        var(--cm-blanc);
	--cm-text-muted:  var(--cm-gris);
	--cm-accent:      var(--cm-vert);
	--cm-on-accent:   #04140B; /* Texte sur bouton vert (contraste AA) */
	--cm-taken:       var(--cm-gris);
	--cm-border:      rgba(255,255,255,0.08);
	--cm-border-strong: rgba(255,255,255,0.16);
	--cm-danger:      #FF5A5F;

	/* --- Rayons --- */
	--cm-r-sm: 8px;
	--cm-r:    12px;
	--cm-r-lg: 18px;
	--cm-r-pill: 999px;

	/* --- Espacements (échelle 4/8) --- */
	--cm-1: 4px;  --cm-2: 8px;  --cm-3: 12px; --cm-4: 16px;
	--cm-5: 24px; --cm-6: 32px; --cm-7: 48px; --cm-8: 64px;

	/* --- Ombres / élévation --- */
	--cm-shadow:    0 4px 24px rgba(0,0,0,.35);
	--cm-shadow-lg: 0 12px 48px rgba(0,0,0,.45);
	--cm-glow:      0 0 0 1px rgba(0,210,106,.4), 0 8px 32px rgba(0,210,106,.18);

	/* --- Typo --- */
	--cm-font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--cm-font-title: 'Inter Tight', var(--cm-font);

	--cm-container: 1200px;
	--cm-ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset léger, scoped à nos composants --- */
.cm-scope, .cm-scope * { box-sizing: border-box; }
.cm-scope {
	font-family: var(--cm-font);
	color: var(--cm-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Fond sombre appliqué au body des pages CaisseMarket. */
body.cm-dark {
	background: var(--cm-bg);
	color: var(--cm-text);
}

.cm-container { max-width: var(--cm-container); margin-inline: auto; padding-inline: var(--cm-4); }

/* =========================================================================
   Typographie
   ========================================================================= */
.cm-h1, .cm-h2, .cm-h3 { font-family: var(--cm-font-title); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.cm-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.cm-h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
.cm-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
.cm-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cm-text-muted); max-width: 62ch; }
.cm-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-accent); }
.cm-muted { color: var(--cm-text-muted); }
.cm-tabular { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Boutons
   ========================================================================= */
.cm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--cm-2);
	font-family: var(--cm-font); font-weight: 600; font-size: 1rem;
	padding: 14px 22px; min-height: 48px; border-radius: var(--cm-r-pill);
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .15s var(--cm-ease), background-color .2s var(--cm-ease), box-shadow .2s var(--cm-ease), opacity .2s;
	user-select: none;
}
.cm-btn:active { transform: scale(.97); }
.cm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,210,106,.5); }

.cm-btn--primary { background: var(--cm-accent); color: var(--cm-on-accent); }
.cm-btn--primary:hover { background: var(--cm-vert-hover); box-shadow: var(--cm-glow); }
.cm-btn--ghost { background: transparent; color: var(--cm-text); border-color: var(--cm-border-strong); }
.cm-btn--ghost:hover { background: var(--cm-surface-2); }
.cm-btn--block { width: 100%; }
.cm-btn[disabled], .cm-btn--taken { background: var(--cm-surface-2); color: var(--cm-taken); cursor: not-allowed; box-shadow: none; }

/* =========================================================================
   Badges & statuts (couleur fonctionnelle : vert = dispo, gris = pris)
   ========================================================================= */
.cm-badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: var(--cm-r-pill);
	border: 1px solid var(--cm-border-strong);
}
.cm-badge--verified { color: var(--cm-accent); border-color: rgba(0,210,106,.35); background: rgba(0,210,106,.10); }
.cm-badge--available { color: var(--cm-accent); border-color: rgba(0,210,106,.35); background: rgba(0,210,106,.08); }
.cm-badge--taken { color: var(--cm-taken); background: rgba(138,146,156,.10); }
.cm-badge--discussion { color: #FFC24B; border-color: rgba(255,194,75,.35); background: rgba(255,194,75,.08); }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; }
.cm-dot--on { background: var(--cm-accent); box-shadow: 0 0 8px rgba(0,210,106,.8); }
.cm-dot--off { background: var(--cm-taken); }

/* =========================================================================
   Cartes véhicule
   ========================================================================= */
.cm-grid { display: grid; gap: var(--cm-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.cm-card {
	background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-r-lg);
	overflow: hidden; display: flex; flex-direction: column;
	transition: transform .2s var(--cm-ease), border-color .2s, box-shadow .2s;
}
.cm-card:hover { transform: translateY(-3px); border-color: var(--cm-border-strong); box-shadow: var(--cm-shadow); }
.cm-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cm-surface-2); overflow: hidden; }
.cm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-card__flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.cm-card__body { padding: var(--cm-4); display: flex; flex-direction: column; gap: var(--cm-2); flex: 1; }
.cm-card__title { font-family: var(--cm-font-title); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.cm-card__specs { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--cm-text-muted); font-size: .85rem; }
.cm-card__price { font-family: var(--cm-font-title); font-weight: 800; font-size: 1.25rem; margin-top: auto; }
.cm-card__foot { display: flex; align-items: center; justify-content: space-between; padding: var(--cm-3) var(--cm-4); border-top: 1px solid var(--cm-border); }

/* =========================================================================
   Fiche véhicule + panneau de déblocage
   ========================================================================= */
.cm-listing { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--cm-6); align-items: start; }
@media (max-width: 900px) { .cm-listing { grid-template-columns: 1fr; } }

.cm-specs-table { width: 100%; border-collapse: collapse; }
.cm-specs-table td { padding: 12px 0; border-bottom: 1px solid var(--cm-border); }
.cm-specs-table td:first-child { color: var(--cm-text-muted); width: 45%; }

.cm-unlock {
	position: sticky; top: 24px;
	background: var(--cm-surface); border: 1px solid var(--cm-border-strong);
	border-radius: var(--cm-r-lg); padding: var(--cm-5); box-shadow: var(--cm-shadow);
}
.cm-unlock__price { font-family: var(--cm-font-title); font-weight: 800; font-size: 2rem; }
.cm-unlock__meter { display: flex; gap: 5px; margin: var(--cm-3) 0; }
.cm-unlock__pip { flex: 1; height: 6px; border-radius: 3px; background: var(--cm-surface-2); }
.cm-unlock__pip.is-taken { background: var(--cm-taken); }
.cm-unlock__pip.is-free { background: var(--cm-accent); }
.cm-guarantee { font-size: .82rem; color: var(--cm-text-muted); display: flex; gap: 8px; margin-top: var(--cm-3); }

.cm-revealed { background: rgba(0,210,106,.08); border: 1px solid rgba(0,210,106,.35); border-radius: var(--cm-r); padding: var(--cm-4); margin-top: var(--cm-3); }
.cm-revealed a { color: var(--cm-accent); font-weight: 600; }

/* =========================================================================
   Formulaires
   ========================================================================= */
.cm-form { display: grid; gap: var(--cm-4); }
.cm-field { display: grid; gap: 6px; }
.cm-field label { font-size: .88rem; font-weight: 500; }
.cm-field .req { color: var(--cm-accent); }
.cm-input, .cm-select, .cm-textarea {
	width: 100%; min-height: 48px; padding: 12px 14px; font-size: 1rem; font-family: var(--cm-font);
	color: var(--cm-text); background: var(--cm-surface-2); border: 1px solid var(--cm-border-strong);
	border-radius: var(--cm-r-sm); transition: border-color .15s, box-shadow .15s;
}
.cm-textarea { min-height: 120px; resize: vertical; }
.cm-input:focus, .cm-select:focus, .cm-textarea:focus { outline: none; border-color: var(--cm-accent); box-shadow: 0 0 0 3px rgba(0,210,106,.18); }
.cm-input::placeholder { color: rgba(138,146,156,.7); }
.cm-help { font-size: .8rem; color: var(--cm-text-muted); }
.cm-error { font-size: .82rem; color: var(--cm-danger); }
.cm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cm-4); }
@media (max-width: 560px) { .cm-grid-2 { grid-template-columns: 1fr; } }

/* Choix d'intention (le tri central) */
.cm-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--cm-3); }
.cm-choice input { position: absolute; opacity: 0; }
.cm-choice label {
	display: block; padding: var(--cm-4); border: 1px solid var(--cm-border-strong);
	border-radius: var(--cm-r); cursor: pointer; transition: border-color .15s, background .15s;
}
.cm-choice input:checked + label { border-color: var(--cm-accent); background: rgba(0,210,106,.08); }
.cm-choice input:focus-visible + label { box-shadow: 0 0 0 3px rgba(0,210,106,.4); }

/* =========================================================================
   Hero + recherche
   ========================================================================= */
.cm-hero { padding: var(--cm-8) 0 var(--cm-7); position: relative; overflow: hidden; }
.cm-hero__inner { display: grid; gap: var(--cm-5); max-width: 820px; }
.cm-searchbar {
	display: flex; gap: var(--cm-2); background: var(--cm-surface); border: 1px solid var(--cm-border-strong);
	border-radius: var(--cm-r-pill); padding: 8px; box-shadow: var(--cm-shadow); flex-wrap: wrap;
}
.cm-searchbar .cm-input { border: none; background: transparent; box-shadow: none; flex: 1; min-width: 160px; }
.cm-searchbar .cm-input:focus { box-shadow: none; }
.cm-chips { display: flex; gap: var(--cm-2); flex-wrap: wrap; }
.cm-chip { font-size: .85rem; color: var(--cm-text-muted); padding: 7px 13px; border: 1px solid var(--cm-border); border-radius: var(--cm-r-pill); text-decoration: none; transition: border-color .15s, color .15s; }
.cm-chip:hover { color: var(--cm-text); border-color: var(--cm-border-strong); }

/* Bandeau de valeur */
.cm-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--cm-4); }
.cm-value { background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-r); padding: var(--cm-5); }
.cm-value__k { font-family: var(--cm-font-title); font-weight: 800; font-size: 1.6rem; color: var(--cm-accent); }

/* Sections */
.cm-section { padding: var(--cm-7) 0; }
.cm-section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--cm-4); margin-bottom: var(--cm-5); flex-wrap: wrap; }

/* Toast */
.cm-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--cm-surface-2); border: 1px solid var(--cm-border-strong); color: var(--cm-text); padding: 12px 18px; border-radius: var(--cm-r); box-shadow: var(--cm-shadow-lg); z-index: 1000; opacity: 0; transition: opacity .2s, transform .2s; }
.cm-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.cm-toast--err { border-color: var(--cm-danger); }

/* Spinner */
.cm-spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; border-radius: 50%; animation: cm-rot .7s linear infinite; }
@keyframes cm-rot { to { transform: rotate(360deg); } }

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	.cm-scope *, .cm-btn, .cm-card { transition: none !important; animation: none !important; }
}