/* Club FasoDigit : un espace calme et lumineux, comme une bibliothèque de nuit.
   Fond sombre où ondulent lentement des lueurs aux couleurs du Faso, cartes translucides, jauges circulaires.
   Les mouvements s'arrêtent si la personne a demandé moins d'animations sur son appareil. */

.fd-club {
    --club-nuit: #0b1020;
    --club-nuit-2: #121a33;
    --club-verre: rgba(255, 255, 255, 0.06);
    --club-verre-fort: rgba(255, 255, 255, 0.1);
    --club-bord: rgba(255, 255, 255, 0.12);
    --club-texte: #e8ebf4;
    --club-doux: #a9b1c7;
    --club-or: #fcd116;
    --club-vert: #2fd47a;
    --club-rouge: #ff5a5f;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    padding: 2.5rem 0 4rem;
    background: radial-gradient(ellipse at top, var(--club-nuit-2), var(--club-nuit) 70%);
    color: var(--club-texte);
    isolation: isolate;
}

.fd-club__aurore {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.fd-club__aurore span {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.32;
    animation: fd-club-flotter 26s ease-in-out infinite alternate;
}

.fd-club__aurore span:nth-child(1) { top: -18vmax; left: -12vmax; background: #1f8f4e; }
.fd-club__aurore span:nth-child(2) { top: 10vmax; right: -16vmax; background: #c9a20a; animation-duration: 32s; opacity: 0.22; }
.fd-club__aurore span:nth-child(3) { bottom: -22vmax; left: 25%; background: #b3261e; animation-duration: 38s; opacity: 0.18; }

@keyframes fd-club-flotter {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(6vmax, 4vmax, 0) scale(1.15); }
}

.fd-club__contenu { position: relative; }

.fd-club h1,
.fd-club h2,
.fd-club h3 { color: #fff; font-family: var(--fd-font-title); }

.fd-club a { color: var(--club-or); }

.fd-club__surtitre {
    margin: 0 0 0.3rem;
    color: var(--club-or);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fd-club__message {
    margin: 0 0 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(47, 212, 122, 0.4);
    border-radius: 12px;
    background: rgba(47, 212, 122, 0.12);
}

.fd-club__message--erreur { border-color: rgba(255, 90, 95, 0.45); background: rgba(255, 90, 95, 0.12); }

/* En-tête : salutation et carte de membre */
.fd-club__tete {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
}

@media (min-width: 820px) {
    .fd-club__tete { grid-template-columns: 1fr 360px; }
}

.fd-club__tete h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }

.fd-club__accroche { margin: 0.6rem 0 0; max-width: 36rem; color: var(--club-doux); font-size: 1.05rem; }

.fd-club__carte {
    position: relative;
    aspect-ratio: 1.586;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--club-bord);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 55%),
        linear-gradient(120deg, #0f5132, #13213f 55%, #3a1418);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.fd-club__carte::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    animation: fd-club-reflet 9s ease-in-out infinite;
}

@keyframes fd-club-reflet {
    0%, 60% { transform: translateX(-40%); }
    100% { transform: translateX(40%); }
}

.fd-club__carte-puce {
    width: 42px;
    height: 32px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f7e27a, #c9a20a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.fd-club__carte-marque { margin: 0; color: #fff; font-family: var(--fd-font-title); font-size: 1.05rem; }
.fd-club__carte-marque strong { color: var(--club-or); }
.fd-club__carte-nom { margin: 0; color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.fd-club__carte-infos {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    color: var(--club-doux);
    font-size: 0.78rem;
}

/* Panneaux translucides */
.fd-club__panneau,
.fd-club__jauge,
.fd-club__conseil,
.fd-club__livre {
    border: 1px solid var(--club-bord);
    border-radius: 18px;
    background: var(--club-verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.fd-club__panneau { position: relative; margin: 1.5rem 0; padding: 1.5rem; }
.fd-club__panneau h2 { margin-top: 0; font-size: 1.35rem; }
.fd-club__panneau p { color: var(--club-doux); }

.fd-club__panneau--renouveler {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(120deg, rgba(47, 212, 122, 0.12), rgba(252, 209, 22, 0.08));
}

.fd-club__panneau--renouveler h2 { margin-bottom: 0.2rem; }
.fd-club__panneau--renouveler p { margin: 0; }

.fd-club__panneau--attente { padding-left: 3.5rem; }

.fd-club__pulsation {
    position: absolute;
    top: 1.85rem;
    left: 1.5rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--club-or);
    box-shadow: 0 0 0 0 rgba(252, 209, 22, 0.6);
    animation: fd-club-pulse 2.2s infinite;
}

@keyframes fd-club-pulse {
    to { box-shadow: 0 0 0 16px rgba(252, 209, 22, 0); }
}

.fd-club__etapes { padding-left: 1.2rem; color: var(--club-texte); }
.fd-club__etapes li { margin-bottom: 0.4rem; }

.fd-club__formulaire label { color: #fff; }
.fd-club__formulaire .fd-field__help { color: var(--club-doux); }
.fd-club__formulaire input {
    border-color: var(--club-bord);
    background: rgba(255, 255, 255, 0.92);
}

.fd-club__aide { color: var(--club-doux); font-size: 0.88rem; }

/* Paiement et espace client dans l'ambiance du Club */
.fd-club__paiement .fd-moyen { background: var(--club-verre-fort); }
.fd-club__paiement .fd-moyen small,
.fd-club__paiement .fd-paiement { color: var(--club-texte); }
.fd-club__paiement .fd-moyen--orange span { color: #ffa24d; }
.fd-club__paiement .fd-moyen--wave span { color: #6fdcff; }
.fd-club__formulaire legend,
.fd-club__formulaire .fd-choice { color: #fff; }
.fd-club__espace-client .fd-card { color: var(--fd-texte); }

/* Jauges circulaires */
.fd-club__jauges {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 2.25rem;
}

@media (min-width: 820px) {
    .fd-club__jauges { grid-template-columns: 200px 200px 1fr; }
}

.fd-club__jauge {
    position: relative;
    display: grid;
    place-items: center;
    padding: 1.1rem;
}

.fd-club__jauge svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.fd-club__anneau-fond { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 10; }

.fd-club__anneau {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 1.2s ease;
}

.fd-club__anneau--guides { stroke: var(--club-or); filter: drop-shadow(0 0 6px rgba(252, 209, 22, 0.6)); }
.fd-club__anneau--jours { stroke: var(--club-vert); filter: drop-shadow(0 0 6px rgba(47, 212, 122, 0.55)); }

.fd-club__jauge p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    text-align: center;
}

.fd-club__jauge strong { display: block; color: #fff; font-family: var(--fd-font-title); font-size: 1.6rem; line-height: 1; }
.fd-club__jauge span { color: var(--club-doux); font-size: 0.72rem; }

.fd-club__conseil { grid-column: 1 / -1; padding: 1.2rem 1.4rem; }
@media (min-width: 820px) { .fd-club__conseil { grid-column: auto; } }
.fd-club__conseil p:last-of-type { margin-bottom: 0.6rem; color: var(--club-texte); }

.fd-club__lien { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 700; }
.fd-club__lien svg { width: 1rem; height: 1rem; fill: currentColor; }

/* Bibliothèque et catalogue */
.fd-club__titre { margin: 2rem 0 1rem; font-size: 1.4rem; }

.fd-club__outils {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.fd-club__recherche input {
    width: min(100%, 280px);
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--club-bord);
    border-radius: 999px;
    background: var(--club-verre-fort);
    color: #fff;
}

.fd-club__recherche input::placeholder { color: var(--club-doux); }

.fd-club__filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.fd-club__filtre {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--club-bord);
    border-radius: 999px;
    background: transparent;
    color: var(--club-texte);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.fd-club__filtre[aria-pressed="true"],
.fd-club__filtre:hover { border-color: var(--club-or); background: rgba(252, 209, 22, 0.14); color: #fff; }

.fd-club__grille {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.fd-club__livre {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 0.9rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.fd-club__livre:hover {
    transform: translateY(-3px);
    border-color: rgba(252, 209, 22, 0.45);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.fd-club__livre--choisi { border-color: rgba(47, 212, 122, 0.45); background: rgba(47, 212, 122, 0.08); }

.fd-club__livre img {
    width: 84px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.fd-club__livre h3 { margin: 0 0 0.25rem; font-size: 0.98rem; line-height: 1.3; }
.fd-club__meta { margin: 0 0 0.6rem; color: var(--club-doux); font-size: 0.8rem; }
.fd-club__livre form { margin: 0 0 0.4rem; }
.fd-club__vide { grid-column: 1 / -1; color: var(--club-doux); }

.fd-club__bouton {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--club-or), #ffe680);
    color: #13213f;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.fd-club__bouton:hover,
.fd-club__bouton:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(252, 209, 22, 0.35); }
.fd-club__bouton svg { width: 1rem; height: 1rem; fill: currentColor; }

.fd-club__bouton--contour { border: 1px solid var(--club-or); background: transparent; color: var(--club-or); }
.fd-club__bouton--contour:hover { background: rgba(252, 209, 22, 0.14); }

.fd-club__bouton--discret {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--club-bord);
    background: transparent;
    color: var(--club-texte);
    font-weight: 600;
    font-size: 0.82rem;
}

.fd-club :focus-visible { outline: 2px solid var(--club-or); outline-offset: 3px; }

/* Page de présentation : même ambiance, en bandeau d'accueil */
.fd-club--accueil { min-height: 0; padding: 3.5rem 0; }
.fd-club--accueil h1 { max-width: 44rem; margin: 0 0 0.8rem; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; }
.fd-club--accueil p { max-width: 44rem; color: var(--club-doux); font-size: 1.05rem; }
.fd-club__prix { color: #fff !important; font-family: var(--fd-font-title); font-size: 2rem !important; font-weight: 800; }
.fd-club__prix small { color: var(--club-doux); font-size: 1rem; font-weight: 400; }
a.fd-club__bouton { color: #13213f; text-decoration: none; }
.fd-club__atouts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
.fd-club__atouts li {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--club-bord);
    border-radius: 16px;
    background: var(--club-verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.fd-club__atouts strong { color: var(--club-or); font-family: var(--fd-font-title); font-size: 1.8rem; line-height: 1; }
.fd-club__atouts span { color: var(--club-doux); font-size: 0.82rem; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
    .fd-club__aurore span,
    .fd-club__carte::after,
    .fd-club__pulsation { animation: none; }
    .fd-club__livre,
    .fd-club__anneau,
    .fd-club__bouton { transition: none; }
}