/*
 * #1870 — Page « Nos abonnements » (plaquette « À chaque enjeu, son pack »).
 * Couleurs de la charte BySince : orange #dc5c3b, bleu nuit #142136,
 * bleu clair #f2fafa, turquoise #6bdbdb, doré #cdc095.
 * Responsive (3 colonnes → 1), modes clair et sombre à double portée
 * (préférence OS + choix explicite html[data-bs-theme]).
 */
.subscriptions {
    --sub-orange: #dc5c3b;
    --sub-orange-dark: #b9472a;
    --sub-navy: #142136;
    --sub-navy-soft: #1f3252;
    --sub-blue-light: #f2fafa;
    --sub-turquoise: #6bdbdb;
    --sub-gold: #cdc095;
    --sub-page-bg: #faf8f3;
    --sub-card-bg: #ffffff;
    --sub-card-border: #e6e1d6;
    --sub-text: #142136;
    --sub-text-muted: #4d5a70;
    --sub-feature-icon-bg: #fdeee9;
    --sub-feature-icon: #dc5c3b;
    --sub-band-bg: #e8f6f6;
    --sub-band-border: #6bdbdb;

    max-width: var(--page-object-max-width, 1400px);
    margin: 0 auto;
    padding: 0 0 48px;
    color: var(--sub-text);
}

/* ---------- En-tête ---------- */
.subscriptions-hero {
    text-align: center;
    padding: 24px 16px 8px;
}

.subscriptions-title {
    text-align: center;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--sub-navy);
    text-wrap: balance;
}

.subscriptions-dot {
    color: var(--sub-orange);
}

.subscriptions-tagline {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin: 0 0 16px;
    color: var(--sub-text-muted);
    text-wrap: balance;
}

.subscriptions-ai {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--sub-band-bg);
    border: 1px solid var(--sub-band-border);
    font-size: 0.95rem;
    color: var(--sub-text);
}

.subscriptions-ai-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 6px;
    border: 2px solid var(--sub-navy);
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--sub-navy);
}

/* ---------- Packs ---------- */
.subscriptions-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Pas d'écart vertical : les rangées des cartes (sous-grille) se touchent ;
       l'espace entre cartes empilées vient de leur marge basse. */
    gap: 0 20px;
    padding: 24px 16px 0;
    align-items: stretch;
}

/* #1941 — Chaque carte occupe neuf rangées partagées avec ses voisines (sous-grille) :
   visuel, nom, accroche, prix, mention, atouts, bandeau et boutons s'alignent d'une
   carte à l'autre, qu'un prix soit affiché ou non (une rangée vide ne prend pas de place). */
.subscription-pack {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 9;
    align-content: start;
    margin-bottom: 20px;
    background: var(--sub-card-bg);
    border: 1px solid var(--sub-card-border);
    border-radius: 18px;
    padding: 20px 20px 24px;
    box-shadow: 0 10px 30px rgba(20, 33, 54, 0.06);
}

.subscription-pack-visual {
    grid-row: 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    aspect-ratio: 480 / 232;
    background: var(--sub-blue-light);
}

.subscription-pack-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subscription-pack-name {
    grid-row: 2;
    font-weight: 800;
    font-size: 1.9rem;
    margin: 0;
    text-align: center;
    color: var(--sub-navy);
}

.subscription-pack-pitch {
    grid-row: 3;
    text-align: center;
    margin: 2px 0 12px;
    color: var(--sub-text-muted);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sub-card-border);
}

.subscription-pack-price {
    grid-row: 4;
    text-align: center;
    margin: 0;
    line-height: 1.1;
}

.subscription-pack-price strong {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--sub-orange);
    font-variant-numeric: tabular-nums;
}


.subscription-pack-unit {
    display: block;
    margin-top: 2px;
    color: var(--sub-text-muted);
}

.subscription-pack-preferential {
    grid-row: 5;
    text-align: center;
    margin: 8px 0 16px;
    color: var(--sub-text-muted);
}

.subscription-pack-preferential strong {
    font-size: 1.3rem;
    color: var(--sub-orange);
    font-variant-numeric: tabular-nums;
}

.subscription-pack-features {
    grid-row: 6;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subscription-pack-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
}

.subscription-pack-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sub-feature-icon-bg);
    color: var(--sub-feature-icon);
    font-size: 22px;
}

.subscription-pack-extra {
    grid-row: 7;
    /* Étiré sur la rangée : les bandeaux des cartes ont la même hauteur, texte centré. */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--sub-orange);
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    text-wrap: balance;
}

/* Pack central (Ambassadeur) : carte sombre comme sur la plaquette. */
.subscription-pack--ambassador {
    --sub-card-bg: #142136;
    --sub-card-border: #2a3d5e;
    --sub-text: #ffffff;
    --sub-text-muted: #c9d3e3;
    --sub-feature-icon-bg: #dc5c3b;
    --sub-feature-icon: #ffffff;

    color: var(--sub-text);
}

.subscription-pack--ambassador .subscription-pack-name {
    color: #ffffff;
}

.subscription-pack--ambassador .subscription-pack-price strong,
.subscription-pack--ambassador .subscription-pack-preferential strong {
    color: #ff7a5c;
}

.subscription-pack--ambassador .subscription-pack-visual {
    background: #16304f;
}

/* #1886 — le téléphone doit rester entier quelle que soit la largeur de la carte :
   l'image est contenue (jamais rognée), le fond de la vignette prolonge le sien. */
.subscription-pack--ambassador .subscription-pack-visual img {
    object-fit: contain;
}

/* #1886 — les feuilles de style personnalisées d'organisation forcent la couleur des
   titres (h1, h2 { color: … !important }) : sur la carte sombre le titre devenait
   illisible. Les titres de la page imposent donc leur couleur, en clair comme en sombre. */
.subscriptions .subscriptions-title,
.subscriptions .subscription-pack-name,
.subscriptions .subscriptions-budget-title,
.subscriptions .subscriptions-cta-title {
    color: var(--sub-heading, var(--sub-navy)) !important;
}

.subscriptions .subscription-pack--ambassador .subscription-pack-name {
    color: #ffffff !important;
}

/* #1887 — chaque carte ouvre la popin de demande ; le bouton reste l'accès clavier. */
.subscription-pack {
    cursor: pointer;
}

.subscription-pack-detail-open {
    grid-row: 8;
}

.subscription-pack-choose {
    grid-row: 9;
}

.subscriptions .subscription-pack-choose {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 12px 18px;
    border: 2px solid var(--sub-orange-dark);
    border-radius: 999px;
    background: var(--sub-orange-dark);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
}

.subscriptions .subscription-pack-choose:hover,
.subscriptions .subscription-pack-choose:focus-visible {
    background: #9a3418;
    border-color: #9a3418;
    color: #ffffff;
}

.subscriptions .subscription-pack--ambassador .subscription-pack-choose {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--sub-navy);
}

.subscriptions .subscription-pack--ambassador .subscription-pack-choose:hover,
.subscriptions .subscription-pack--ambassador .subscription-pack-choose:focus-visible {
    background: var(--sub-turquoise);
    border-color: var(--sub-turquoise);
    color: var(--sub-navy);
}

/* #1893 — bouton secondaire « Voir le détail de la formule », au-dessus du bouton principal. */
.subscriptions .subscription-pack-detail-open {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 10px 18px;
    border: 2px solid var(--sub-navy);
    border-radius: 999px;
    background: transparent;
    color: var(--sub-navy);
    font-weight: 700;
}

.subscriptions .subscription-pack-detail-open + .subscription-pack-choose {
    margin-top: 10px;
}

.subscriptions .subscription-pack-detail-open:hover,
.subscriptions .subscription-pack-detail-open:focus-visible {
    background: var(--sub-navy);
    color: #ffffff;
}

.subscriptions .subscription-pack--ambassador .subscription-pack-detail-open {
    border-color: #ffffff;
    color: #ffffff;
}

.subscriptions .subscription-pack--ambassador .subscription-pack-detail-open:hover,
.subscriptions .subscription-pack--ambassador .subscription-pack-detail-open:focus-visible {
    background: #ffffff;
    color: var(--sub-navy);
}

.subscriptions .subscription-pack-detail-open:focus-visible,
.subscriptions .subscription-pack-choose:focus-visible,
.subscription-request :focus-visible {
    outline: 3px solid var(--sub-turquoise);
    outline-offset: 2px;
}

/* ---------- Budget ---------- */
.subscriptions-budget {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 16px 0;
    padding: 18px 22px;
    border-radius: 16px;
    background: var(--sub-band-bg);
    border: 1px solid var(--sub-band-border);
}

.subscriptions-budget-icon {
    font-size: 44px;
    color: var(--sub-navy);
    flex-shrink: 0;
}

.subscriptions-budget-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--sub-navy);
}

.subscriptions-budget-example {
    margin: 0;
    font-size: 1.1rem;
}

.subscriptions-budget-note {
    margin: 4px 0 0;
    color: var(--sub-text-muted);
    font-size: 0.95rem;
}

/* ---------- Appel à l'action ---------- */
.subscriptions-cta {
    text-align: center;
    margin: 36px 16px 0;
}

.subscriptions-cta-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--sub-navy);
    text-wrap: balance;
}

.subscriptions-cta-text {
    margin: 0 0 16px;
    color: var(--sub-text-muted);
}

.subscriptions-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Les boutons de l'application sont compacts : taille de bouton d'appel à l'action ici. */
.subscriptions-cta-actions .btn {
    font-size: 1.05rem;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 999px;
    border-width: 2px;
}

.subscriptions-cta .btn-primary {
    background: var(--sub-orange);
    border-color: var(--sub-orange);
    color: #ffffff;
}

.subscriptions-cta .btn-primary:hover,
.subscriptions-cta .btn-primary:focus-visible {
    background: var(--sub-orange-dark);
    border-color: var(--sub-orange-dark);
}

.subscriptions-cta .btn-outline-primary {
    color: var(--sub-navy);
    border-color: var(--sub-navy);
}

.subscriptions-cta .btn-outline-primary:hover,
.subscriptions-cta .btn-outline-primary:focus-visible {
    background: var(--sub-navy);
    color: #ffffff;
}

.subscriptions a:focus-visible {
    outline: 3px solid var(--sub-turquoise);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .subscription-pack-name { font-size: 1.6rem; }
    .subscription-pack-price strong { font-size: 2.2rem; }
    .subscriptions-budget { flex-direction: column; align-items: flex-start; }
}

/* ---------- Popin de demande d'abonnement (#1887) ---------- */
.subscription-request {
    --req-bg: #ffffff;
    --req-text: #142136;
    --req-muted: #4d5a70;
    --req-border: #c9ced8;
    --req-field-bg: #ffffff;
    --req-error-bg: #fdeee9;
    --req-error-text: #7a2412;
    --req-success: #17794a;

    /* Centrage explicite : les remises à zéro globales annulent la marge automatique du <dialog>. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(640px, calc(100vw - 32px));
    height: fit-content;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--req-bg);
    color: var(--req-text);
    box-shadow: 0 24px 60px rgba(20, 33, 54, 0.35);
    overflow: auto;
    cursor: auto;
}

.subscription-request::backdrop {
    background: rgba(20, 33, 54, 0.62);
}

.subscription-request-form,
.subscription-request-success {
    padding: 24px 28px 28px;
}

.subscription-request-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.subscription-request .subscription-request-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--req-text) !important;
}

.subscription-request-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -12px 0 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--req-text);
}

.subscription-request-close:hover {
    background: rgba(107, 219, 219, 0.25);
}

.subscription-request-intro {
    margin: 8px 0 0;
    color: var(--req-text);
}

.subscription-request-hint,
.subscription-request-privacy,
.subscription-request-optional {
    color: var(--req-muted);
    font-size: 0.9rem;
}

.subscription-request-hint {
    margin: 4px 0 16px;
}

.subscription-request-optional {
    font-weight: 400;
}

.subscription-request-errors {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 5px solid #b9472a;
    border-radius: 8px;
    background: var(--req-error-bg);
    color: var(--req-error-text);
}

.subscription-request-errors ul {
    margin: 0;
    padding-left: 1.2em;
}

.subscription-request-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.subscription-request-field {
    margin-bottom: 14px;
}

.subscription-request-field--short {
    max-width: 320px;
}

.subscription-request-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--req-text);
}

.subscription-request-field input,
.subscription-request-field select,
.subscription-request-field textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    /* !important : les thèmes globaux (sombre, organisation) recolorent les champs un par un. */
    border: 1px solid var(--req-border) !important;
    border-radius: 8px;
    background: var(--req-field-bg) !important;
    color: var(--req-text) !important;
    font: inherit;
}

.subscription-request-field textarea {
    resize: vertical;
}

/* Piège à robots : hors écran, hors tabulation, ignoré des lecteurs d'écran. */
.subscription-request-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.subscription-request-privacy {
    margin: 4px 0 18px;
}

.subscription-request-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.subscription-request .btn {
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
}

.subscription-request .subscription-request-submit {
    background: #b9472a;
    border: 2px solid #b9472a;
    color: #ffffff;
}

.subscription-request .subscription-request-submit:hover,
.subscription-request .subscription-request-submit:focus-visible {
    background: #9a3418;
    border-color: #9a3418;
    color: #ffffff;
}

.subscription-request .subscription-request-submit:disabled {
    opacity: 0.7;
}

.subscription-request .subscription-request-cancel {
    background: transparent;
    border: 2px solid var(--req-text);
    color: var(--req-text);
}

.subscription-request .subscription-request-cancel:hover,
.subscription-request .subscription-request-cancel:focus-visible {
    background: var(--req-text);
    color: var(--req-bg);
}

.subscription-request-success {
    text-align: center;
}

.subscription-request-success-icon {
    font-size: 56px;
    color: var(--req-success);
}

.subscription-request-success-text {
    margin: 8px 0 20px;
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .subscription-request-row { grid-template-columns: 1fr; }
    .subscription-request-form,
    .subscription-request-success { padding: 20px 18px 22px; }
    .subscription-request-actions .btn { flex: 1 1 100%; }
}

@media (prefers-color-scheme: dark) {
    html:not([data-bs-theme="light"]) .subscription-request {
        --req-bg: #1a2740;
        --req-text: #eef2f8;
        --req-muted: #b8c2d3;
        --req-border: #50607c;
        --req-field-bg: #0f1a2d;
        --req-error-bg: #4a2015;
        --req-error-text: #ffd9cf;
        --req-success: #5fd39b;
    }
}

html[data-bs-theme="dark"] .subscription-request {
    --req-bg: #1a2740;
    --req-text: #eef2f8;
    --req-muted: #b8c2d3;
    --req-border: #50607c;
    --req-field-bg: #0f1a2d;
    --req-error-bg: #4a2015;
    --req-error-text: #ffd9cf;
    --req-success: #5fd39b;
}

/* ---------- Détail d'une formule en popin (#1893) ---------- */
/* L'habillage commun (fond, bordure, centrage, boutons, mode sombre) vient de .subscription-request. */
.subscription-detail {
    --detail-accent: #b9472a;
    --detail-icon-bg: #fdeee9;
    --detail-panel-bg: #f7f5ef;
    --detail-band-bg: #e8f1fb;
    --detail-link: #1d3fb5;

    width: min(980px, calc(100vw - 32px));
}

.subscription-detail-body {
    padding: 24px 28px 28px;
}

.subscription-detail .subscription-detail-title {
    font-size: 1.9rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.subscription-detail-pitch {
    margin: 2px 0 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--req-text);
}

.subscription-detail .subscription-detail-ai {
    margin: 14px 0 18px;
    color: var(--req-text);
}

.subscription-detail-columns {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
    align-items: stretch;
}

.subscription-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background: var(--detail-panel-bg);
    text-align: center;
}

.subscription-detail-visual {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 480 / 232;
    background: #ffffff;
}

.subscription-detail-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subscription-detail-price,
.subscription-detail-quote,
.subscription-detail-preferential,
.subscription-detail-extra p {
    margin: 0;
}

.subscription-detail-price strong {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--detail-accent);
}


.subscription-detail-price span,
.subscription-detail-quote {
    color: var(--req-text);
    font-size: 1.1rem;
}

.subscription-detail-preferential strong {
    color: var(--detail-accent);
}

.subscription-detail-extra {
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 10px;
    background: #b9472a;
    color: #ffffff;
}

.subscription-detail .subscription-detail-extra p {
    color: #ffffff !important;
}

.subscription-detail-extra-title {
    font-weight: 700;
    font-size: 1.1rem;
}

.subscription-detail-extra-text {
    margin-top: 4px !important;
    font-size: 0.95rem;
}

/* Carte sombre du pack Ambassadeur, comme sur la plaquette. */
.subscription-detail--ambassador .subscription-detail-aside {
    background: #142136;
}

.subscription-detail--ambassador .subscription-detail-visual {
    background: #16304f;
}

.subscription-detail--ambassador .subscription-detail-visual img {
    object-fit: contain;
}

.subscription-detail--ambassador .subscription-detail-price strong,
.subscription-detail--ambassador .subscription-detail-preferential strong {
    color: #ff7a5c;
}

.subscription-detail--ambassador .subscription-detail-price span,
.subscription-detail--ambassador .subscription-detail-preferential {
    color: #ffffff;
}

.subscription-detail-main {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--detail-panel-bg);
}

.subscription-detail .subscription-detail-heading {
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--req-border);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--req-text) !important;
}

.subscription-detail-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.subscription-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
}

.subscription-detail-item + .subscription-detail-item {
    border-top: 1px solid var(--req-border);
}

.subscription-detail-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--detail-icon-bg);
    color: var(--detail-accent);
    font-size: 30px;
}

.subscription-detail .subscription-detail-item h4 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--detail-link) !important;
}

.subscription-detail-item p {
    margin: 0;
    color: var(--req-text);
}

.subscription-detail-band {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0 20px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--detail-band-bg);
    color: var(--req-text);
}

.subscription-detail-band-icon {
    flex-shrink: 0;
    font-size: 36px;
}

.subscription-detail-band p {
    margin: 0;
}

.subscription-detail-band-title,
.subscription-detail--explorer .subscription-detail-band-text {
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 760px) {
    .subscription-detail-columns { grid-template-columns: 1fr; }
    .subscription-detail-body { padding: 20px 18px 22px; }
    .subscription-detail .subscription-detail-title { font-size: 1.5rem; }
    .subscription-detail-band { align-items: flex-start; }
}

@media (prefers-color-scheme: dark) {
    html:not([data-bs-theme="light"]) .subscription-detail {
        --detail-accent: #ff8a6e;
        --detail-icon-bg: #3a1d14;
        --detail-panel-bg: #0f1a2d;
        --detail-band-bg: #223352;
        --detail-link: #9dc1ff;
    }

    html:not([data-bs-theme="light"]) .subscriptions .subscription-pack-detail-open {
        border-color: #ffffff;
        color: #ffffff;
    }

    html:not([data-bs-theme="light"]) .subscriptions .subscription-pack-detail-open:hover,
    html:not([data-bs-theme="light"]) .subscriptions .subscription-pack-detail-open:focus-visible {
        background: #ffffff;
        color: #142136;
    }
}

html[data-bs-theme="dark"] .subscription-detail {
    --detail-accent: #ff8a6e;
    --detail-icon-bg: #3a1d14;
    --detail-panel-bg: #0f1a2d;
    --detail-band-bg: #223352;
    --detail-link: #9dc1ff;
}

html[data-bs-theme="dark"] .subscriptions .subscription-pack-detail-open {
    border-color: #ffffff;
    color: #ffffff;
}

html[data-bs-theme="dark"] .subscriptions .subscription-pack-detail-open:hover,
html[data-bs-theme="dark"] .subscriptions .subscription-pack-detail-open:focus-visible {
    background: #ffffff;
    color: #142136;
}

/* ---------- Mode sombre (double portée) ---------- */
@media (prefers-color-scheme: dark) {
    html:not([data-bs-theme="light"]) .subscriptions {
        --sub-heading: #ffffff;
        --sub-card-bg: #1a2740;
        --sub-card-border: #2f4263;
        --sub-text: #eef2f8;
        --sub-text-muted: #b8c5d6;
        --sub-feature-icon-bg: #4a2015;
        --sub-feature-icon: #ff9b84;
        --sub-band-bg: #16303a;
        --sub-band-border: #3a8f8f;
    }
    html:not([data-bs-theme="light"]) .subscriptions-title,
    html:not([data-bs-theme="light"]) .subscription-pack-name,
    html:not([data-bs-theme="light"]) .subscriptions-budget-title,
    html:not([data-bs-theme="light"]) .subscriptions-budget-icon,
    html:not([data-bs-theme="light"]) .subscriptions-cta-title { color: #ffffff; }
    html:not([data-bs-theme="light"]) .subscriptions-ai-chip { border-color: #ffffff; color: #ffffff; }
    html:not([data-bs-theme="light"]) .subscription-pack-price strong,
    html:not([data-bs-theme="light"]) .subscription-pack-preferential strong { color: #ff7a5c; }
    html:not([data-bs-theme="light"]) .subscription-pack--ambassador { --sub-card-bg: #0d1626; --sub-card-border: #3a4d6e; }
    html:not([data-bs-theme="light"]) .subscription-pack-visual { background: #223352; }
    html:not([data-bs-theme="light"]) .subscriptions-cta .btn-outline-primary { color: #ffffff; border-color: #ffffff; }
    html:not([data-bs-theme="light"]) .subscriptions-cta .btn-outline-primary:hover,
    html:not([data-bs-theme="light"]) .subscriptions-cta .btn-outline-primary:focus-visible { background: #ffffff; color: #142136; }
}

html[data-bs-theme="dark"] .subscriptions {
    --sub-heading: #ffffff;
    --sub-card-bg: #1a2740;
    --sub-card-border: #2f4263;
    --sub-text: #eef2f8;
    --sub-text-muted: #b8c5d6;
    --sub-feature-icon-bg: #4a2015;
    --sub-feature-icon: #ff9b84;
    --sub-band-bg: #16303a;
    --sub-band-border: #3a8f8f;
}
html[data-bs-theme="dark"] .subscriptions-title,
html[data-bs-theme="dark"] .subscription-pack-name,
html[data-bs-theme="dark"] .subscriptions-budget-title,
html[data-bs-theme="dark"] .subscriptions-budget-icon,
html[data-bs-theme="dark"] .subscriptions-cta-title { color: #ffffff; }
html[data-bs-theme="dark"] .subscriptions-ai-chip { border-color: #ffffff; color: #ffffff; }
html[data-bs-theme="dark"] .subscription-pack-price strong,
html[data-bs-theme="dark"] .subscription-pack-preferential strong { color: #ff7a5c; }
html[data-bs-theme="dark"] .subscription-pack--ambassador { --sub-card-bg: #0d1626; --sub-card-border: #3a4d6e; }
html[data-bs-theme="dark"] .subscription-pack-visual { background: #223352; }
html[data-bs-theme="dark"] .subscriptions-cta .btn-outline-primary { color: #ffffff; border-color: #ffffff; }
html[data-bs-theme="dark"] .subscriptions-cta .btn-outline-primary:hover,
html[data-bs-theme="dark"] .subscriptions-cta .btn-outline-primary:focus-visible { background: #ffffff; color: #142136; }