/* ================================================================
   assets/styles/app.css
   Variables CSS globales — Accessibles partout sur le site
   ================================================================ */

/* ── VARIABLES GLOBALES ────────────────────────────────────────── */
:root {
    /* Couleurs principales */
    --violet:        #7C3AED;
    --violet-light:  #A78BFA;
    --violet-glow:   rgba(124, 58, 237, 0.18);

    /* Backgrounds de navigation */
    --nav-bg-light:  rgba(255, 255, 255, 0.5);
    --nav-bg-dark:   rgba(12, 10, 18, 0.4);
    --nav-bg-light-so: rgba(255, 255, 255, 0.82);
    --nav-bg-dark-so:   rgba(12, 10, 18, 0.8);

    /* Couleurs de texte */
    --text-light:    #1a1625;
    --text-dark:     #ede9f6;
    --muted-light: #595d6a;
    --muted-dark:    #9ca3af;

    /* Couleurs de bordure */
    --border-light:  rgba(0, 0, 0, 0.08);
    --border-dark:   rgba(255, 255, 255, 0.08);

    /* Backgrounds des éléments pilule */
    --pill-bg-light: rgba(124, 58, 237, 0.08);
    --pill-bg-dark:  rgba(124, 58, 237, 0.20);

    /* Effets de blur */
    --blur-sm:       8px;
    --blur-md:       25px;

    /* Durées de transition */
    --duration-fast:   0.15s;   /* Transforms rapides */
    --duration-normal: 0.2s;    /* Animations standard */
    --duration-medium: 0.25s;   /* Animations moyennes */
    --duration-slow:   0.4s;    /* Changements de thème */
}

/* ── RESET MINIMAL ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── STYLES GLOBAUX ────────────────────────────────────────────── */
html, body {
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    transition: background var(--duration-slow) ease;
}

body {
    background-image: url("../images/background/bg-light-MdvfjI5.avif");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-top: 72px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-theme="dark"] body {
    background-image: url("../images/background/bg-dark-ZD54px5.webp");
}

@supports not (background-image: url("../images/background/bg-light-MdvfjI5.avif")) {
    body {
        background-image: url("../images/background/bg-light-3dDII6A.webp");
    }
    [data-theme="dark"] body {
        background-image: url("../images/background/bg-dark-ZD54px5.webp");
    }
}

main {
    width: 100%;
    max-width: 1200px;
}

/* ── STYLES POUR LE LIEN COPIABLE ──────────────────────────────── */
.copy-link {
    cursor: pointer;
    font-weight: 500;
    color: var(--violet);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background var(--duration-fast), color var(--duration-fast);
    position: relative;
}

[data-theme="dark"] .copy-link {
    color: var(--violet-light);
}

.copy-link:hover {
    background: var(--pill-bg-light);
    text-decoration: underline;
}

[data-theme="dark"] .copy-link:hover {
    background: var(--pill-bg-dark);
}

.copy-link.copied {
    color: #10b981;
    animation: pulse-copied var(--duration-normal);
}

@keyframes pulse-copied {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ── STYLES POUR LE LIEN ──────────────────────────────── */

a {
    color: var(--violet);
    text-decoration: none;
    transition: color var(--duration-fast);
}
[data-theme="dark"] a {
    color: var(--violet-light);
}
a:hover{
    text-decoration: underline;
}