/*=============================================================================
  1. RESET, VARIABLES GLOBALES & CONFIGURATION
=============================================================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Typographie */
    --font-p:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --font-h1: clamp(2rem, 1.5rem + 2vw, 4rem);

    /* Charte graphique GameXPass */
    --color-primary:      #5E17EB;
    --color-primary-dark: #764ba2;
    --color-text:         #1e293b;
    --color-text-body:    #334155;
    --color-text-muted:   #64748b;
    --color-text-light:   #718096;
    --color-border:       #e2e8f0;
    --color-border-light: #e0e0e0;
    --color-bg:           #ffffff;
    --color-bg-muted:     #f8fafc;
    --color-bg-accent:    #eef2ff;
    --color-danger:       #cc0000;
    --color-warning:      #d35400;
    --gradient-primary:   linear-gradient(135deg, #5E17EB 0%, #764ba2 100%);
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   20px;
    --radius-pill: 50px;
    --shadow-card:     0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-elevated: 0 15px 35px rgba(0, 0, 0, 0.05);
}

body {
    background-color: var(--color-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*=============================================================================
  2. TYPOGRAPHIE ET BALISES DE BASE
=============================================================================*/
h1 {
    font-size: var(--font-h1);
    color: #000000;
    text-align: center;
}

h2 {
    font-size: var(--font-h2);
    color: #000000;
    text-align: center;
}

p {
    font-size: var(--font-p);
    color: #000000;
    text-align: left;
}

/*=============================================================================
  3. MISE EN PAGE ET STRUCTURE (LAYOUT)
=============================================================================*/
/* .center-page : conteneur centré réutilisable — version fusionnée */
.center-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    padding: 10px;
    margin: 0 auto;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.main-content-no-gap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.grid-two-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.grid-two-cols > * {
    flex: 1 1 calc(50% - 10px);
    min-width: 300px;
    box-sizing: border-box;
}

/* Espacements et séparateurs communs */
.title-padding {
    padding: 20px 10px;
}

.separator {
    border: 0;
    border-top: 1px solid var(--color-border-light);
    margin: 15px 0;
}