/**
 * Thème global Lozand — chargé EN DERNIER après main.css / Vite.
 * Impose la stack système (ui-sans-serif / system-ui) et les couleurs de base
 * même si une ancienne build Tailwind embarque Inter / Space Grotesk.
 */

/* Anciennes builds main.css : mêmes teintes que brand.css @theme */
:root {
    --color-primary-dark: #09090b;
    --color-secondary-dark: #09090b;
    --color-slate-800: #09090b;
    --color-slate-900: #09090b;
    --form-input-border: rgba(255, 255, 255, 0.12);
    --form-input-border-focus: rgba(139, 92, 246, 0.7);
    --form-input-bg: rgba(255, 255, 255, 0.04);
    --form-input-placeholder: rgba(148, 163, 184, 0.55);
    --form-control-radius: 0.5rem;
}

html {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    letter-spacing: normal !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #fafafa !important;
    background-color: #09090b !important;
    text-align: start !important;
    text-indent: 0 !important;
    vertical-align: baseline !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    word-spacing: 0 !important;
}

/* Utilitaires Tailwind : écrase les polices embarquées dans d’anciennes builds */
.font-sans,
.font-body,
.font-heading,
.font-display {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-mono {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas,
        "DejaVu Sans Mono", monospace !important;
}

/*
 * Boutons — légèrement plus compacts, sans ombre portée.
 * :not(:focus-visible) évite de supprimer les anneaux de focus Tailwind (ring).
 */
button:not(.preserve-btn-ui)[class],
input[type="submit"]:not(.preserve-btn-ui)[class],
input[type="button"]:not(.preserve-btn-ui)[class],
input[type="reset"]:not(.preserve-btn-ui)[class] {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

button:not(.preserve-btn-ui)[class]:not(:focus-visible),
input[type="submit"]:not(.preserve-btn-ui)[class]:not(:focus-visible),
input[type="button"]:not(.preserve-btn-ui)[class]:not(:focus-visible),
input[type="reset"]:not(.preserve-btn-ui)[class]:not(:focus-visible) {
    box-shadow: none !important;
}

button:not(.preserve-btn-ui):not(:focus-visible):not([class]),
input[type="submit"]:not(.preserve-btn-ui):not(:focus-visible):not([class]),
input[type="button"]:not(.preserve-btn-ui):not(:focus-visible):not([class]),
input[type="reset"]:not(.preserve-btn-ui):not(:focus-visible):not([class]) {
    box-shadow: none !important;
}

/* CTAs en <a> (header, home, erreurs…) : pas d’ombre même avec utilitaires shadow-* */
a.btn-hover-effect,
a[class*="from-accent-primary"][class*="shadow-"],
a[class*="bg-accent-primary"][class*="shadow-"] {
    box-shadow: none !important;
}

a.btn-hover-effect:hover,
a[class*="bg-accent-primary"][class*="shadow-"]:hover,
a[class*="from-accent-primary"][class*="shadow-"]:hover {
    box-shadow: none !important;
}

/*
 * Champs de formulaire — gabarit par défaut (h-9), bordure discrète, accent au focus.
 * Les sélecteurs sont dans :where(...) (spécificité 0) pour ne pas écraser les paddings
 * Tailwind (pl-10, pr-12, etc.) utilisés avec une icône en absolute — sans ça, le texte
 * recouvre l’icône. Opt-out : .preserve-input-style sur le contrôle.
 */

input[data-slot="input"] {
    flex: 1 1 0%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    font-weight: 500 !important;
    color: inherit;
}

input[data-slot="input"]:focus,
input[data-slot="input"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

input[data-slot="input"]::placeholder {
    color: var(--form-input-placeholder) !important;
    opacity: 1;
}

/* Shell optionnel : bordure fine autour d’un groupe flex contenant [data-slot=input] */
.form-input-shell {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    width: 100%;
    max-width: 100%;
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    gap: 0.5rem;
    border-radius: var(--form-control-radius, 0.5rem);
    border: 1px solid var(--form-input-border);
    background-color: var(--form-input-bg);
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.form-input-shell:focus-within {
    border-color: var(--form-input-border-focus);
    background-color: rgba(255, 255, 255, 0.06);
}

:where(input[type="text"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="search"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="email"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="url"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="tel"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="password"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="number"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="date"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="datetime-local"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="time"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="month"]:not(.preserve-input-style):not([data-slot="input"])),
:where(input[type="week"]:not(.preserve-input-style):not([data-slot="input"])),
:where(textarea:not(.preserve-input-style)),
:where(select:not(.preserve-input-style)) {
    box-sizing: border-box !important;
    width: 100%;
    max-width: 100%;
    min-height: 2.25rem !important;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    /* Laisser text-base / text-2xl / font-bold des utilitaires Tailwind s’appliquer */
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #fafafa !important;
    background-color: var(--form-input-bg) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--form-input-border) !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    outline: none !important;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

:where(input[type="text"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(input[type="search"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(input[type="email"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(input[type="url"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(input[type="tel"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(input[type="password"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(input[type="number"]:not(.preserve-input-style):not([data-slot="input"]))::placeholder,
:where(textarea:not(.preserve-input-style))::placeholder {
    color: var(--form-input-placeholder) !important;
}

:where(input[type="text"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="search"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="email"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="url"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="tel"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="password"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="number"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="date"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="datetime-local"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="time"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="month"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(input[type="week"]:not(.preserve-input-style):not([data-slot="input"])):focus,
:where(textarea:not(.preserve-input-style)):focus,
:where(select:not(.preserve-input-style)):focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--form-input-border-focus) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

:where(input[type="text"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(input[type="search"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(input[type="email"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(input[type="url"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(input[type="tel"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(input[type="password"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(input[type="number"]:not(.preserve-input-style):not([data-slot="input"])):disabled,
:where(textarea:not(.preserve-input-style)):disabled,
:where(select:not(.preserve-input-style)):disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

:where(textarea:not(.preserve-input-style)) {
    min-height: 4.5rem !important;
    resize: vertical;
}

/*
 * Ne pas forcer appearance sur select : une règle du type select:not(...) bat la
 * spécificité de la seule classe .appearance-none et réaffiche la flèche native
 * en plus des chevrons custom (ex. KYC indicatif téléphonique).
 */

/* .flat-input / .flat-select — :where pour laisser pl-/pr- Tailwind si icône dans le champ */
:where(input.flat-input:not(.preserve-input-style)),
:where(textarea.flat-input:not(.preserve-input-style)),
:where(select.flat-input:not(.preserve-input-style)),
:where(select.flat-select:not(.preserve-input-style)) {
    box-sizing: border-box !important;
    min-height: 2.25rem !important;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #fafafa !important;
    background-color: var(--form-input-bg) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--form-input-border) !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

textarea.flat-input {
    min-height: 4.5rem !important;
    resize: vertical !important;
}

:where(input.flat-input:not(.preserve-input-style)):focus,
:where(textarea.flat-input:not(.preserve-input-style)):focus,
:where(select.flat-input:not(.preserve-input-style)):focus,
:where(select.flat-select:not(.preserve-input-style)):focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--form-input-border-focus) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    transform: none !important;
}

/*
 * Secours : réserver de la place quand une icône est en absolute juste avant l’input
 * (recherche méthodes, retraits, etc.) — complète les utilitaires pl-* si absents de la build.
 */
.relative:has(> .absolute + input[type="text"]) > input[type="text"],
.relative:has(> .absolute + input[type="search"]) > input[type="search"],
.relative:has(> .absolute + input[type="email"]) > input[type="email"],
.relative:has(> .absolute + input[type="tel"]) > input[type="tel"],
.relative:has(> .absolute + input[type="number"]) > input[type="number"] {
    padding-left: 3.25rem !important;
}

/* Montant : input en premier, symbole $ / devise en absolute après */
.relative:has(> input[type="number"]:first-child ~ .absolute.inset-y-0.left-0) > input[type="number"] {
    padding-left: 3.5rem !important;
}

.relative:has(> input[type="number"]:first-child ~ .absolute[class*="right"]) > input[type="number"] {
    padding-right: 6rem !important;
}