/* Reset CSS */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Variables - Thème vinyle rétro warm */
:root {
    --couleur-fond: #1a1612;
    --couleur-fond-carte: #2a2420;
    --couleur-orange: #ff6b35;
    --couleur-jaune: #f7c531;
    --couleur-rouge: #e63946;
    --couleur-cream: #fef3e2;
    --couleur-brun: #8b5a2b;
    --couleur-texte: #fef3e2;
    --couleur-texte-secondaire: #c9b99a;
    --degrade-vinyle: linear-gradient(135deg, var(--couleur-orange), var(--couleur-jaune));
    --ombre-vinyle: 0 10px 40px rgba(255, 107, 53, 0.2);
}



html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Georgia', serif;
    background: var(--couleur-fond);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255,107,53,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(247,197,49,0.05) 0%, transparent 50%);
    min-height: 100vh;
    color: var(--couleur-texte);
    line-height: 1.6;
}



/* En-tête avec vinyle animé */
#entete-principal {
    text-align: center;
    padding: 3rem 1rem;
    position: relative;
}

#logo-vinyle {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
    position: relative;
}

.vinyle-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #333 0%, #333 15%, transparent 15%),
        radial-gradient(circle at center, var(--couleur-orange) 15%, var(--couleur-orange) 17%, transparent 17%),
        repeating-radial-gradient(circle at center, #1a1a1a 20%, #2a2a2a 22%, #1a1a1a 24%);
    animation: rotation-vinyle 8s linear infinite;
    box-shadow: 0 5px 30px rgba(0,0,0,0.5);
}

@keyframes rotation-vinyle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vinyle-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--degrade-vinyle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--couleur-fond);
}

#titre-site {
    font-size: 0rem;
    min-height: 7rem;
    width: 100%;
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#slogan {
    color: var(--couleur-texte-secondaire);
    font-style: italic;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}



/* Pied de page */
#pied-page {
    text-align: center;
    padding: 2rem;
    color: var(--couleur-texte-secondaire);
    font-style: italic;
}