:root {
    --brand-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --tagline-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bg: #fbfbfd;
    --surface: rgba(255, 255, 255, 0.78);
    --surface-2: rgba(255, 255, 255, 0.92);
    --border: rgba(15, 23, 42, 0.10);
    --text: #0f172a;
    --muted: rgba(15, 23, 42, 0.70);
    --primary: #caa65a;
    --primary-2: #e2c27a;
    --primary-on-dark: #d9b36a;
    --primary-soft: #f2d6a4;
    --primary-ink: #8d6b2f;
    --cream: #fff4db;
    --accent-1: #6d28d9;
    --accent-2: #0891b2;
    --accent-3: #f59e0b;
    --harmony: var(--primary-on-dark);
    --tension: #c98267;
    --neutral-cool: #9ba3b2;
    --dark-bg: #0b1018;
    --dark-bg-deep: #06090f;
    --shadow: 0 12px 40px rgba(2, 6, 23, 0.06);
    --shadow-strong: 0 18px 60px rgba(2, 6, 23, 0.10);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --content-form: 36rem;
    --content-narrow: 42rem;
    --content-medium: 58rem;
    --content-wide: 66rem;
    --focus-ring-gap: #ffffff;
    --line: rgba(15, 23, 42, 0.12);
    --ink: rgba(15, 23, 42, 0.92);
    --bs-body-font-family: var(--tagline-font);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 202, 166, 90;
    --bs-danger: #b92b24;
    --bs-danger-rgb: 185, 43, 36;
    --bs-danger-text-emphasis: #b92b24;
    --bs-form-invalid-color: #b92b24;
    --bs-form-invalid-border-color: #b92b24;
    --bs-border-color: rgba(15, 23, 42, 0.12);
    --bs-link-color: var(--text);
    --bs-link-hover-color: var(--primary);
    --bs-secondary-color: var(--muted);
    --bs-progress-bg: rgba(15, 23, 42, 0.08);
    --bs-progress-bar-bg: var(--primary);
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-border-radius: var(--radius-md);
}

html, body {
    min-height: 100%;
}

body {
    background:
        radial-gradient(900px 600px at 20% 10%, rgba(202, 166, 90, 0.18), transparent 55%),
        radial-gradient(900px 600px at 80% 0%, rgba(226, 194, 122, 0.14), transparent 55%),
        linear-gradient(180deg, var(--bg), #ffffff 55%, var(--bg));
    color: var(--text);
    font-family: var(--tagline-font);
}

a, .btn-link {
    color: inherit;
}

.text-muted {
    color: var(--muted) !important;
}

.brand {
    font-family: var(--brand-font);
    letter-spacing: -0.02em;
}

.tagline {
    font-family: var(--tagline-font);
    color: var(--muted);
}

.glass {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.10);
    margin: 50px 0;
}

.color-primary {
    color: var(--primary);
}

.logo-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    position: relative;
}

.logo-wrap img {
    width: 84px;
    height: 84px;
    position: absolute;
    top: -13px;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #b8924a;
    --bs-btn-hover-border-color: rgba(202, 166, 90, 0.85);
    --bs-btn-active-bg: #b8924a;
    --bs-btn-active-border-color: rgba(202, 166, 90, 0.85);
    --bs-btn-color: #221a09;
    --bs-btn-hover-color: #221a09;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: rgba(34, 26, 9, 0.65);
    --bs-btn-font-weight: 600;
    box-shadow: 0 10px 28px rgba(202, 166, 90, 0.18);
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(202, 166, 90, 0.24);
}

.btn-outline-primary {
    --bs-btn-color: rgba(15, 23, 42, 0.85);
    --bs-btn-border-color: rgba(202, 166, 90, 0.24);
    --bs-btn-hover-bg: rgba(202, 166, 90, 0.12);
    --bs-btn-hover-border-color: rgba(202, 166, 90, 0.45);
    --bs-btn-hover-color: var(--primary);
    --bs-btn-active-bg: rgba(202, 166, 90, 0.14);
    --bs-btn-disabled-color: rgba(15, 23, 42, 0.45);
    --bs-btn-disabled-border-color: rgba(202, 166, 90, 0.24);
    background: rgba(202, 166, 90, 0.10);
    font-weight: 600;
}

.btn-soft-dark {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: rgba(15, 23, 42, 0.92);
    font-weight: 600;
}

.btn-soft-dark:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.14);
    color: rgba(15, 23, 42, 0.92);
}

.card, .card-soft {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.alert,
.validation-errors {
    border: 1px solid var(--border);
    border-left: 4px solid var(--bs-alert-color) !important;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.validation-errors {
    border-radius: var(--radius-md);
    padding: 1rem;
}

.bg-soft-primary {
    background: rgba(202, 166, 90, 0.10);
    border: 1px solid rgba(202, 166, 90, 0.18);
}

.fine-print {
    font-family: var(--tagline-font);
    color: rgba(15, 23, 42, 0.55);
    font-size: 0.92rem;
}

.form-control, .form-select {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.form-control:focus, .form-select:focus, .form-check-input:focus,
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.1rem var(--focus-ring-gap), 0 0 0 0.25rem rgba(202, 166, 90, 0.35);
    border-color: rgba(202, 166, 90, 0.55);
}

.ad-site-footer, .ad-landing-section--contrast, .ad-landing-social__constellation,
.ad-social-network, .blueprint-card {
    --focus-ring-gap: var(--dark-bg);
}

/* Blazor place le focus sur le H1 après chaque navigation (FocusOnNavigate):
   aucun cadre de focus ne doit apparaître sur les titres. */
h1:focus,
h1:focus-visible {
    outline: none;
}

.invalid {
    outline: 1px solid var(--bs-danger);
}

.validation-message {
    color: var(--bs-danger);
}

.progress {
    background-color: var(--bs-progress-bg);
}

.progress-bar {
    background-color: var(--bs-progress-bar-bg);
}

/* Cases a cocher et interrupteurs : champagne de la marque plutot que le bleu Bootstrap. */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary-2);
    box-shadow: 0 0 0 0.2rem rgba(202, 166, 90, 0.25);
}

.form-check-input:focus:not(:checked) {
    --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='3' fill='%23caa65a'/%3e%3c/svg%3e");
}