/* ============================================================
   THEME.CSS - Design System Luvreizel
   Palette: Or / Marine � dark casino, chaud, professionnel
   ============================================================ */

:root {
    /* Brand / Primary (Or Casino) -------------------------*/
    --c-primary:          #FFB800;
    --c-primary-light:    #FFD000;
    --c-primary-dark:     #CC9200;
    --c-primary-bg:       rgba(255, 184, 0, 0.10);
    --c-primary-border:   rgba(255, 184, 0, 0.35);
    --c-primary-tint:     rgba(255, 184, 0, 0.15);
    --c-primary-tint2:    rgba(255, 184, 0, 0.12);
    --c-primary-glow:     rgba(255, 184, 0, 0.40);
    --c-accent:           var(--c-primary);

    /* Neutrals (Marine / Bleu nuit) -----------------------*/
    --c-bg:               #0B1829;
    --c-bg-2:             #0D1B2E;
    --c-surface:          #0F2035;
    --c-surface2:         #152840;
    --c-surface3:         #1A3350;
    --c-surface-hover:    #173048;

    --c-border:           rgba(255, 255, 255, 0.07);
    --c-border-strong:    rgba(255, 255, 255, 0.13);
    --c-border-accent:    rgba(255, 184, 0, 0.40);

    /* Text ------------------------------------------------*/
    --c-text:             #f4f4f5;
    --c-text-2:           #c6c6ce;
    /* muted/faint relevés (audit) : muted échouait sur surface2/3,
       faint était à 2.0-2.8:1 partout — illisible pour du texte. */
    --c-text-muted:       #9a9aa6;
    --c-text-faint:       #7a7a85;

    /* Semantic --------------------------------------------*/
    --c-success:          #22c55e;
    --c-success-bg:       rgba(34, 197, 94, 0.12);
    --c-success-border:   rgba(34, 197, 94, 0.3);

    --c-danger:           #ef4444;
    --c-danger-bg:        rgba(239, 68, 68, 0.12);
    --c-danger-border:    rgba(239, 68, 68, 0.35);

    --c-warning:          #f59e0b;
    --c-warning-bg:       rgba(245, 158, 11, 0.12);
    --c-warning-border:   rgba(245, 158, 11, 0.3);

    --c-info:             #3b82f6;
    --c-info-bg:          rgba(59, 130, 246, 0.12);

    /* Radius ----------------------------------------------*/
    --radius-xs:          4px;
    --radius-sm:          6px;
    --radius-md:          10px;
    --radius-lg:          14px;
    --radius-xl:          20px;
    --radius-pill:        999px;

    /* Shadow ----------------------------------------------*/
    --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-primary:     0 6px 24px var(--c-primary-glow);

    /* Motion ----------------------------------------------*/
    --transition:         all 0.2s ease;
    --transition-slow:    all 0.35s ease;

    /* Layout ----------------------------------------------*/
    --navbar-h:           94px;
    --container-max:      1400px;
}

/* Reset ---------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /* Garde-fou : aucun élément n'est censé déborder horizontalement.
       overflow-x: clip pour ne pas casser position: sticky (vs hidden). */
    overflow-x: clip;
    max-width: 100vw;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    padding-top: var(--navbar-h);
    background-image:
        /* Glow gold collé au top — couvre le strip au-dessus de la navbar
           et bleed sous la pill pour une transition sans cassure. */
        radial-gradient(ellipse 95% 55% at 50% 0%, rgba(255, 184, 0, 0.12), transparent 65%),
        radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(0, 180, 255, 0.04), transparent 70%);
    background-attachment: fixed;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--c-primary-light);
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* Focus clavier global (WCAG 2.4.7) — aucun composant n'en définissait.
   Spécificité élément + pseudo-classe : les outline:none posés par les
   feuilles de page sur l'état de repos ne l'écrasent pas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    display: block;
}

input, select, textarea {
    font-family: inherit;
}

/* Accent utility */
.text-accent {
    color: var(--c-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--c-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--c-surface3);
    border-radius: 10px;
    border: 2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--c-primary-dark);
}

/* Selection — texte sombre sur or (blanc sur or = 1.73:1, illisible) */
::selection {
    background: var(--c-primary);
    color: var(--c-bg);
}

/* ============================================================
   Garde-fous globaux (audit UI/UX 06/2026)
   ============================================================ */

/* iOS Safari zoome automatiquement sur tout champ < 16px au focus.
   !important assumé : les feuilles de page fixent 12-14px en desktop. */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Respect de prefers-reduced-motion : neutralise les animations infinies
   (heroPulse, luvFloaty, glows…) que les blocs locaux ne couvrent pas.
   Les reveals JS restent fonctionnels : la transition devient instantanée. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}