/*:root {
    --page-bg: #F7F9FA;
    --profile-header-bg: transparent;
}

body {
    background: var(--page-bg);
    
}*/
/* ===== PAGE BACKGROUND ===== */

body {
    background: var(--page-bg);
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px;
    line-height: 1.55;
    color: #505061;
    overflow-x: hidden;
}

body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--page-bg);
        filter: blur(var(--page-bg-blur, 0px));
        z-index: -1;
}

/* ===== PROFILE HEADER ===== */

.profile-header {
    background: var(--profile-header-bg);
    backdrop-filter: blur(10px);
}

/* ===== TIER SCROLLER (Subscription cards + Donation amounts) =====
   Volontairement PAS .cardslider/.donationcardwrapper (Slick, slidesToShow:1,
   déjà utilisé ailleurs sur le site) — ici on veut un scroll natif gauche-droite
   avec plusieurs cards visibles/peekées, pas un carousel une-slide-à-la-fois. */
.tierScrollWrapper { max-width: 680px; margin: 0 auto; position: relative; }

.tierScroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 14px 4px 18px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.tierScroll::-webkit-scrollbar { height: 6px; }
.tierScroll::-webkit-scrollbar-thumb { background: #DADCE0; border-radius: 3px; }

.tierCard {
    scroll-snap-align: start;
    flex: 0 0 240px;
    background: #fff;
    border: 2px solid #DADCE0;
    border-radius: 12px;
    padding: 28px 20px 22px;
    position: relative;
    text-align: center;
}
.tierCard.popular { border-color: #1DA1F2; box-shadow: 0 6px 20px rgba(29,161,242,0.18); }
.tierCard .popular-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: #1DA1F2; color: #fff; font-size: 12px; font-weight: 600;
    padding: 4px 14px; border-radius: 12px; white-space: nowrap; letter-spacing: .02em;
}
.tierCard h4 { font-size: 18px; margin-bottom: 6px; text-transform: capitalize; }
.tierCard .tierPrice { display: block; font-size: 32px; font-weight: 700; color: #1DA1F2; margin-bottom: 2px; }
.tierCard .tierPrice sup { font-size: 13px; font-weight: 500; color: #8a8a99; margin-left: 2px; }
.tierCard .tierDesc { font-size: 13px; color: #8a8a99; margin-bottom: 14px; }
.tierCard .tierPerks { list-style: none; padding: 0; margin: 14px 0 18px; text-align: left; }
.tierCard .tierPerks li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; font-size: 13.5px; }
.tierCard .tierPerks li img { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.tierCard .tierSubscribeBtn { width: 100%; }
.tierCard.currentTier { border-color: #00A651; }
.tierCard.currentTier .popular-badge { background: #00A651; }

.tierScrollArrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid #DADCE0;
    background: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.tierScrollArrow.left { left: -14px; }
.tierScrollArrow.right { right: -14px; }
.tierScrollArrow[hidden] { display: none; }

/* Donation amount chips reuse the same horizontal-scroll behavior on small screens */
.donationAmountScroll {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 10px; -webkit-overflow-scrolling: touch;
}
.donationAmountScroll .amountChip {
    scroll-snap-align: start; flex: 0 0 auto; cursor: pointer;
    border: 2px solid #DADCE0; border-radius: 8px; padding: 12px 20px;
    font-weight: 600; color: #002D56; background: #F7F9FA;
}
.donationAmountScroll .amountChip.selected { border-color: #1DA1F2; background: #fff; color: #1DA1F2; }

.footer-divider {
    width: 100%;
    margin: 0 0 -10px 0;
}

/* ==================== Préférences du footer (langue + devise) ====================
   Groupées dans une pilule compacte, distincte des liens légaux — ce sont des
   réglages persistants du site (langue/devise), pas des liens de navigation.
   Les <select> eux-mêmes sont réduits à la largeur de leur contenu (2-3 lettres),
   sans le style/hauteur imposante de Bootstrap .form-select par défaut. */
.footer-preferences {
    gap: 4px;
    background: rgba(0, 0, 0, .035);
    /*background-color: #111827;*/
    /*border: 1px solid rgba(0, 0, 0, .08);*/
    border-radius: 20px;
    padding: 3px 0px 3px 10px;
}
.footer-preferences .language-selector,
.footer-preferences .currencySwitcherForm {
    display: flex;
    align-items: center;
}
.footer-preferences-divider {
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, .12);
    margin: 0 6px;
}
/* Icône + select regroupés dans une même pilule sombre — l'icône fait partie du
   même bloc visuel que le select, pas un élément séparé sur le fond clair. */
.footer-select-group {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #111827;
    border-radius: 10px;
    padding: 4px 10px;
}
.footer-select-icon {
    font-size: 12px;
    color: #d1d5db;
}
.footer-select {
    appearance: auto;
    -webkit-appearance: menulist;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #f9fafb;
    cursor: pointer;
}
.footer-select:focus { outline: none; box-shadow: none; }

/* La liste déroulante ouverte reste blanche (comportement natif) — seule l'option
   survolée se met en évidence avec la couleur du site. */
.footer-select option:hover {
    background-color: #111827;
    color: #f9fafb;
}