/* =========================================================
   CHARTE VISUELLE ReGo — feuille globale (non destructive)
   Référence validée : cartes CLAIRES + texte lisible,
   et SEULS les boutons portent l'identité (fond aubergine,
   texte orange). On n'impose donc PAS de fond sombre ici.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --rego-aubergine: #4A2A66;
    --rego-aubergine-700: #3D2255;
    --rego-aubergine-900: #271338;
    --rego-aubergine-100: #EAE3F1;
    --rego-aubergine-50: #F6F3F9;
    --rego-saffron: #F0A732;
    --rego-saffron-dark: #D98E1C;
    --rego-cream: #FBF8F3;
    --rego-ink: #2A2433;
    --rego-font-display: "Fraunces", "Georgia", serif;
    --rego-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================
   Helpers OPT-IN (à ajouter dans le markup d'une page).
   Rien n'est imposé globalement : pas de fond, pas de
   couleur de texte forcée — la page garde son rendu clair.
   ========================================================= */

/* En-tête de marque : bandeau aubergine + logo orange */
.rego-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--rego-aubergine-900) 0%, var(--rego-aubergine) 60%, var(--rego-aubergine-700) 100%);
    color: #fff;
}
.rego-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
}
.rego-wordmark {
    font-family: var(--rego-font-display);
    font-weight: 700;
    font-size: 19px;
    color: #fff;
    letter-spacing: -0.3px;
}

/* Bouton ReGo : fond aubergine + texte orange (l'identité) */
.rego-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--rego-aubergine), var(--rego-aubergine-700));
    color: var(--rego-saffron);
    box-shadow: 0 8px 20px rgba(74, 42, 102, 0.22);
    text-decoration: none;
}
.rego-btn:hover {
    filter: brightness(1.08);
    color: var(--rego-saffron);
}