/* ==========================
   :ROOT — Variables douces et élégantes
========================== */
:root {

     /* Arrière-plans glass */
    --bg-white: rgba(255, 255, 255, 0.25);
    --bg-white-heavy: rgba(255, 255, 255, 0.25);
    --bg-card: rgba(255, 255, 255, 0.35);
    --bg-input: rgba(255, 255, 255, 0.25);
    --bg-hover: rgba(255, 255, 255, 0.18);

    /* Bordures */
    --border-color: rgba(255, 255, 255, 0.25);
    --border-strong: rgba(0, 180, 220, 0.45);

    /* Accent */
    --accent: #00d4ff;
    --accent-hover: #ff6ec7;

    /* Texte */
    --text-color: #111827;
    --text-muted: rgba(17, 24, 39, 0.55);

    /* Aurora douce */
    --aurora-cyan: rgba(0,212,255,0.4);
    --aurora-pink: rgba(255,110,199,0.35);
    --aurora-purple: rgba(120,90,200,0.35);
    --aurora-green: rgba(0,200,120,0.25);
--header-gradient-start: rgba(126, 102, 44, 0.78);
--header-gradient-end: rgba(26, 132, 144, 0.62);}


}

/* ==========================
   BODY — Fond animé doux + Image
========================== */
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

}

/* Couche animée subtile */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(circle at 25% 25%, var(--aurora-cyan), transparent 50%),
        radial-gradient(circle at 75% 35%, var(--aurora-pink), transparent 50%),
        radial-gradient(circle at 50% 75%, var(--aurora-purple), transparent 50%);

    background-size: 200% 200%;
    background-repeat: no-repeat;
    background-blend-mode: screen;

    filter: blur(60px) saturate(140%) contrast(110%);
    animation: softAurora 30s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes softAurora {
    0%   { background-position: 0% 50%, 0% 0%, 0% 0%; }
    50%  { background-position: 50% 10%, 50% 20%, 50% 30%; }
    100% { background-position: 0% 50%, 0% 0%, 0% 0%; }
}

/* ==========================
   #APP — Glass doux
========================== */
#app {
    position: relative;
    min-height: 100vh;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(140%) contrast(105%);
    -webkit-backdrop-filter: blur(20px) saturate(140%) contrast(105%);

    box-shadow: inset 0 0 80px rgba(0,0,0,0.15);
    border-radius: 16px;
}