:root {
    /* Couleurs */
    --color-gold: #FFD700;
    --color-gold-dark: #EFB810;
    --color-dark-bg: #2b2b2b;
    --color-white: #ffffff;
    --color-text-dark: #1e1e1e;
    --color-shadow-light: rgba(0, 0, 0, 0.6);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
    --color-hover-shadow: rgba(0, 0, 0, 0.7);
    --color-lux-start: #2c2c2c;
    --color-lux-end: #4b2c2c;
    --color-lux-overlay: rgba(255, 215, 0, 0.3);
    --color-free-start: #1e1e1e;
    --color-free-end: #cccccc;
    --color-block-2: rgba(184, 115, 51, 0.5);
    --color-block-3: rgba(75, 121, 161, 0.5);

    /* Tailles & espacements */
    --font-size-title: 2rem;
    --font-size-block-title-min: 1.5rem;
    --font-size-block-title-vw: 1.5vw;
    --font-size-block-title-max: 2rem;
    --font-size-text-min: 1rem;
    --font-size-text-vw: 1.5vw;
    --font-size-text-max: 1.25rem;
    --line-height-text: 1.5;
    --letter-spacing: 2px;

    --border-radius: 5px;
    --padding-block: 20px;
    --padding-badge-y: 5px;
    --padding-badge-x: 10px;
    --margin-section-bottom: 50px;
    --margin-title-top: 20px;
    --margin-title-bottom: 15px;
    --gap-container: 20px;

    --box-shadow-light: 0 4px 6px var(--color-shadow-light);
    --box-shadow-dark: 0 4px 6px var(--color-shadow-dark);
    --box-shadow-hover: 0 6px 10px var(--color-hover-shadow);

    --transition-fast: 0.2s ease;
    --transition-item: all 0.5s cubic-bezier(0.68, -2, 0.265, 1.55);
}

/* ===========================
   TYPOGRAPHIE
   =========================== */

.abonnement-title {
    font-size: var(--font-size-title);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--box-shadow-light);
    margin: auto;
    position: relative;
}

.text-title-abonnement {
    text-align: center;
    color: var(--color-white);
    font-size: clamp(var(--font-size-text-min), var(--font-size-text-vw), var(--font-size-text-max));
    line-height: var(--line-height-text);
    margin-top: var(--margin-title-top);
    max-width: 1400px;
}

.title-bloc-article-abonnement {
    text-align: center;
    font-size: clamp(var(--font-size-block-title-min), var(--font-size-block-title-vw), var(--font-size-block-title-max));
    border-bottom: 1px solid var(--color-gold);
    padding-bottom: 10px;
    color: var(--color-gold);
    margin-bottom: var(--margin-title-bottom);
}

/* ===========================
   LAYOUT SECTIONS
   =========================== */

.section-title-abonnement,
.section-content-abonnement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-title-abonnement {
    margin-bottom: var(--margin-section-bottom);
}

.section-content-abonnement {
    padding: var(--padding-block);
    margin-bottom: var(--margin-section-bottom);
}

.container-abonnement {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-container);
    max-width: 1400px;
}

/* Cas : un seul bloc => deux colonnes centrées */
.container-abonnement:has(.bloc-article-abonnement:nth-child(1):nth-last-child(1)) .bloc-article-abonnement {
    flex: 1 1 50%;
    max-width: 500px;
}

/* ===========================
   BLOC ABONNEMENT
   =========================== */

.bloc-article-abonnement {
    flex: 1 1 calc(25% - var(--gap-container));
    max-width: 25%;
    box-sizing: border-box;
    padding: var(--padding-block);
    background-color: var(--color-dark-bg);
    box-shadow: var(--box-shadow-dark);
    color: var(--color-white);
    border-radius: var(--border-radius);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.bloc-article-abonnement li {
    list-style: inside;
    margin: 10px 0;
    transition: var(--transition-item);
}

/* Variation : luxury */
.bloc-article-abonnement.luxury {
    background: linear-gradient(135deg, var(--color-lux-start), var(--color-lux-end));
    border: 2px solid var(--color-gold);
    transform: scale(1.05);
}

/* Badge */
.badge-recommande {
    background-color: var(--color-gold);
    color: var(--color-text-dark);
    padding: var(--padding-badge-y) var(--padding-badge-x);
    font-weight: bold;
    border-radius: var(--border-radius);
    margin: 0 auto 10px;
    display: block;
    text-align: center;
}

/* ===========================
   ÉTATS & INTERACTIONS
   =========================== */

.bloc-article-abonnement:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

/* ===========================
   FILTRES / VARIANTS
   =========================== */

.filtre-free {
    background: linear-gradient(135deg, var(--color-free-start), var(--color-free-end));
}

.container-abonnement>.bloc-article-abonnement:nth-child(2) {
    background: linear-gradient(135deg, var(--color-free-start), var(--color-block-2));
}

.container-abonnement>.bloc-article-abonnement:nth-child(3) {
    background: linear-gradient(135deg, var(--color-free-start), var(--color-block-3));
}

.bloc-article-abonnement.luxury {
    /* superposition légère */
    background: linear-gradient(135deg, var(--color-free-start), var(--color-lux-overlay));
}

/* ===========================
   MEDIA QUERIES
   =========================== */

@media (min-width: 768px) and (max-width: 991px) {
  .bloc-article-abonnement {
    flex: 0 0 calc((100% - var(--gap-container)) / 2);
    max-width: calc((100% - var(--gap-container)) / 2);
  }
}

@media (max-width: 767px) {
  .bloc-article-abonnement {
    flex: 0 0 100%;
    max-width: 100%;
  }
}