/* =========================================================
   Pokémon TCG Pocket Collection
   Identité claire inspirée du verso des cartes Pokémon
========================================================= */

:root {
    --tcgp-ink: #17233f;
    --tcgp-ink-soft: #43506a;
    --tcgp-muted: #77829a;
    --tcgp-white: #ffffff;
    --tcgp-surface: rgba(255, 255, 255, 0.92);
    --tcgp-surface-solid: #ffffff;
    --tcgp-border: rgba(45, 58, 91, 0.13);
    --tcgp-shadow: 0 18px 55px rgba(41, 52, 82, 0.12);
    --tcgp-shadow-card: 0 10px 28px rgba(48, 58, 86, 0.12);

    --tcgp-yellow: #ffd84d;
    --tcgp-red: #ef4d58;
    --tcgp-cyan: #75dff2;
    --tcgp-blue: #5f82d9;
    --tcgp-lilac: #b69bea;
    --tcgp-pink: #f4a8dc;
    --tcgp-green: #8de4c0;

    --tcgp-radius: 18px;
    --tcgp-radius-small: 12px;

    --font-title: "Plus Jakarta Sans", sans-serif;
    --font-body: "Nunito", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--tcgp-ink);
    font-family: var(--font-body);
    font-weight:500;
    letter-spacing:-0.01em;
    font-size: 16px;
    line-height: 1.6;
    background:
        radial-gradient(circle at 8% 8%, rgba(117, 223, 242, 0.42), transparent 25%),
        radial-gradient(circle at 79% 4%, rgba(255, 216, 77, 0.38), transparent 23%),
        radial-gradient(circle at 96% 40%, rgba(244, 168, 220, 0.34), transparent 27%),
        radial-gradient(circle at 10% 88%, rgba(182, 155, 234, 0.32), transparent 26%),
        linear-gradient(145deg, #f5fdff 0%, #fffdf4 42%, #fff7fc 72%, #f6f4ff 100%);
    background-attachment: fixed;
}



body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 18%, rgba(255,255,255,0.85) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 72%, rgba(255,255,255,0.8) 0 2px, transparent 3px);
    background-size: 220px 220px, 290px 290px, 340px 340px;
}


h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-title);
    font-weight:800;
    letter-spacing:-0.03em;
}

button,
input,
select,
textarea{
    font-family:inherit;
}


img {
    max-width: 100%;
    height: auto;
}

a {
    color: #395fae;
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease;
}

a:hover {
    color: #263f7e;
    text-decoration: none;
}

.wrap,
.container,
.site-header-inner,
.header-inner {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

/* =========================================================
   Header
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(38, 51, 82, 0.10);
    box-shadow: 0 8px 28px rgba(39, 51, 81, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--tcgp-cyan) 0%,
        var(--tcgp-green) 22%,
        var(--tcgp-yellow) 44%,
        var(--tcgp-pink) 68%,
        var(--tcgp-lilac) 100%
    );
}

.site-header-inner,
.header-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.site-logo,
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--tcgp-ink);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.45px;
    white-space: nowrap;
}

.site-logo::before,
.brand::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 3px solid var(--tcgp-ink);
    border-radius: 50%;
    background:
        linear-gradient(
            to bottom,
            var(--tcgp-red) 0 45%,
            var(--tcgp-ink) 45% 55%,
            var(--tcgp-white) 55% 100%
        );
    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,0.28),
        0 4px 10px rgba(31, 42, 68, 0.16);
}

.site-logo:hover,
.brand:hover {
    color: var(--tcgp-ink);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.site-nav a {
    padding: 9px 13px;
    color: #536078;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 750;
}

.site-nav a:hover,
.site-nav a.active,
.site-nav a[aria-current="page"] {
    color: var(--tcgp-ink);
    background: rgba(255, 216, 77, 0.28);
}

/* =========================================================
   Structure générale
========================================================= */

.site-main,
.main-content,
.tcgp-page {
    width: 100%;
}

.site-main,
.main-content {
    padding-top: 44px;
    padding-bottom: 64px;
}

.tcgp-page {
    padding: 42px 0 70px;
}

.site-footer {
    padding: 34px 20px;
    color: var(--tcgp-muted);
    font-size: 13px;
    text-align: center;
}

h1,
h2,
h3 {
    margin-top: 0;
    color: var(--tcgp-ink);
    line-height: 1.18;
}

h1 {
    margin-bottom: 14px;
    font-size: clamp(31px, 5vw, 52px);
    letter-spacing: -0.045em;
}

h2 {
    margin-bottom: 16px;
    font-size: clamp(22px, 3vw, 29px);
    letter-spacing: -0.025em;
}

h3 {
    margin-bottom: 10px;
}

p {
    margin-top: 0;
}

/* =========================================================
   Cartes génériques / authentification / membre
========================================================= */

.auth-container {
    width: min(480px, 100%);
    margin: 0 auto;
}

.auth-card,
.card,
.member-card,
.admin-panel {
    padding: 30px;
    background: var(--tcgp-surface);
    border: 1px solid rgba(255,255,255,0.86);
    border-radius: var(--tcgp-radius);
    box-shadow: var(--tcgp-shadow);
    backdrop-filter: blur(14px);
}

.auth-intro,
.member-card p {
    color: var(--tcgp-ink-soft);
}

.member-header {
    margin-bottom: 30px;
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.member-card h2,
.member-card h3 {
    margin-bottom: 8px;
    font-size: 19px;
}

.member-card p {
    margin-bottom: 0;
}

.member-value {
    margin-bottom: 8px;
    color: var(--tcgp-ink);
    font-size: 28px;
    font-weight: 900;
}

/* =========================================================
   Formulaires
========================================================= */

.form-group,
.field {
    margin-bottom: 18px;
}

label {
    display: block;
    margin-bottom: 7px;
    color: #35415a;
    font-size: 13px;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--tcgp-ink);
    background: rgba(255,255,255,0.9);
    border: 1px solid #d9dfeb;
    border-radius: 11px;
    font: inherit;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

textarea {
    min-height: 130px;
    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #c4ccdc;
}

input:focus,
select:focus,
textarea:focus {
    background: #fff;
    border-color: #8b9fd4;
    box-shadow: 0 0 0 4px rgba(95, 130, 217, 0.12);
}

input::placeholder,
textarea::placeholder {
    color: #98a1b3;
}

button,
.button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 21px;
    color: var(--tcgp-ink);
    background: var(--tcgp-yellow);
    border: 1px solid rgba(68, 55, 10, 0.08);
    border-radius: 11px;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 9px 22px rgba(195, 152, 18, 0.17);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

button:hover,
.button:hover,
.btn:hover {
    color: var(--tcgp-ink);
    filter: brightness(1.02);
    transform: translateY(-1px);
    box-shadow: 0 12px 27px rgba(195, 152, 18, 0.22);
}

.button-secondary,
.btn-secondary {
    color: #45516a;
    background: #eef1f6;
    box-shadow: none;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.form-actions button,
.form-actions .button {
    width: 100%;
}

/* =========================================================
   Messages
========================================================= */

.alert,
.message,
.error,
.success {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 650;
}

.alert-error,
.error {
    color: #9e2933;
    background: #fff0f2;
    border: 1px solid #f5c4c9;
}

.alert-success,
.success {
    color: #216b52;
    background: #ecfbf5;
    border: 1px solid #bfe9d7;
}

.alert-info {
    color: #31548f;
    background: #eef5ff;
    border: 1px solid #cdddf7;
}

.errors {
    margin: 0;
    padding-left: 20px;
}

/* =========================================================
   Catalogue cartes.html
   Compatibilité avec plusieurs noms de classes
========================================================= */

.catalogue,
.cards-page,
.cards-listing {
    padding: 0 0 70px;
}

.catalogue-head,
.cards-head,
.page-head {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 34px 36px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 24px;
    box-shadow: var(--tcgp-shadow);
}

.catalogue-head::after,
.cards-head::after,
.page-head::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -110px;
    right: -55px;
    border: 24px solid rgba(239, 77, 88, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 22px rgba(255,255,255,0.5),
        0 0 0 48px rgba(95,130,217,0.05);
}

.catalogue-head p,
.cards-head p,
.page-head p {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--tcgp-ink-soft);
}

.filters,
.cards-filters,
.catalogue-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(145px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 26px;
    padding: 18px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 17px;
    box-shadow: 0 12px 35px rgba(43, 54, 83, 0.08);
}

.filters .form-group,
.cards-filters .form-group,
.catalogue-filters .form-group {
    margin-bottom: 0;
}

.cards-grid,
.card-grid,
.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px 18px;
}

.card-item,
.pokemon-card,
.catalogue-card {
    position: relative;
    min-width: 0;
    padding: 10px 10px 15px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 17px;
    box-shadow: var(--tcgp-shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-item:hover,
.pokemon-card:hover,
.catalogue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(43, 53, 81, 0.17);
}

.card-item > a,
.pokemon-card > a,
.catalogue-card > a {
    display: block;
    color: inherit;
}

.card-item img,
.pokemon-card img,
.catalogue-card img,
.card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 0.714 / 1;
    object-fit: contain;
    border-radius: 11px;
    background: linear-gradient(145deg, #f5f7fb, #ffffff);
}

.card-item h2,
.card-item h3,
.pokemon-card h2,
.pokemon-card h3,
.catalogue-card h2,
.catalogue-card h3 {
    margin: 13px 3px 4px;
    overflow: hidden;
    color: var(--tcgp-ink);
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-meta,
.card-item p,
.pokemon-card p,
.catalogue-card p {
    margin: 0 3px;
    color: var(--tcgp-muted);
    font-size: 12px;
    line-height: 1.45;
}

.results-count,
.catalogue-count {
    margin: 0 0 16px;
    color: var(--tcgp-muted);
    font-size: 14px;
    font-weight: 700;
}

/* =========================================================
   Fiche carte.php
========================================================= */

.detail {
    padding: 0 0 70px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
    color: var(--tcgp-muted);
    font-size: 13px;
    font-weight: 650;
}

.breadcrumb a {
    color: #566b9d;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: clamp(34px, 6vw, 76px);
    align-items: start;
}

.detail-img {
    position: sticky;
    top: 112px;
    padding: 20px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 25px;
    box-shadow: var(--tcgp-shadow);
    backdrop-filter: blur(13px);
}

.detail-img img {
    display: block;
    width: 100%;
    max-height: 650px;
    object-fit: contain;
    border-radius: 16px;
    filter: drop-shadow(0 18px 24px rgba(42, 48, 67, 0.22));
}

.detail-info {
    min-width: 0;
    padding: clamp(26px, 4vw, 42px);
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 25px;
    box-shadow: var(--tcgp-shadow);
    backdrop-filter: blur(14px);
}

.topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    color: #6b7690;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.detail-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tcgp-border);
}

.detail-title p {
    margin-bottom: 5px;
    color: var(--tcgp-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.detail-title h1 {
    margin-bottom: 0;
    font-size: clamp(34px, 5vw, 56px);
}

.detail-title > b {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 10px 13px;
    color: #9b2731;
    background: #fff0f2;
    border: 1px solid #f4c7cb;
    border-radius: 14px;
    font-size: 25px;
    line-height: 1;
    text-align: center;
}

.detail-title > b small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 19px 0 25px;
}

.badges span {
    padding: 7px 11px;
    color: #3e4962;
    background: linear-gradient(135deg, rgba(117,223,242,0.22), rgba(182,155,234,0.18));
    border: 1px solid rgba(95,130,217,0.15);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.attack {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    margin-top: 14px;
    padding: 20px;
    background: linear-gradient(135deg, #fffdf4, #ffffff);
    border: 1px solid #eee7d2;
    border-radius: 16px;
}

.attack div > span,
.description > span,
.facts span {
    color: var(--tcgp-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.attack h2 {
    margin: 3px 0 0;
    font-size: 21px;
}

.attack > b {
    align-self: center;
    color: #9a6511;
    font-size: 25px;
}

.attack p {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--tcgp-ink-soft);
    font-size: 14px;
}

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.facts > div {
    min-width: 0;
    padding: 15px;
    background: #f7f8fb;
    border: 1px solid #e8ebf1;
    border-radius: 13px;
}

.facts b {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: var(--tcgp-ink);
    font-size: 14px;
}

.description {
    margin-top: 18px;
    padding: 19px 20px;
    background: linear-gradient(135deg, rgba(244,168,220,0.12), rgba(182,155,234,0.10));
    border: 1px solid rgba(182,155,234,0.18);
    border-radius: 15px;
}

.description p {
    margin: 7px 0 0;
    color: var(--tcgp-ink-soft);
}

/* =========================================================
   Textes secondaires
========================================================= */

.text-muted,
.help-text,
.form-help {
    color: var(--tcgp-muted);
    font-size: 13px;
}

.auth-links {
    margin-top: 22px;
    color: var(--tcgp-muted);
    text-align: center;
}

.auth-links a {
    font-weight: 800;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1080px) {
    .cards-grid,
    .card-grid,
    .catalogue-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filters,
    .cards-filters,
    .catalogue-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .site-header {
        position: relative;
    }

    .site-header-inner,
    .header-inner {
        min-height: auto;
        padding: 16px 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .site-nav {
        justify-content: flex-start;
    }

    .site-nav a {
        padding: 7px 10px;
        background: rgba(255,255,255,0.55);
    }

    .site-main,
    .main-content,
    .tcgp-page {
        padding-top: 28px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .detail-img {
        position: static;
        max-width: 440px;
        margin: 0 auto;
    }

    .facts {
        grid-template-columns: 1fr;
    }

    .cards-grid,
    .card-grid,
    .catalogue-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {
    .wrap,
    .container,
    .site-header-inner,
    .header-inner {
        width: min(100% - 24px, 1180px);
    }

    .catalogue-head,
    .cards-head,
    .page-head,
    .detail-info,
    .auth-card,
    .card,
    .member-card,
    .admin-panel {
        padding: 22px 18px;
        border-radius: 17px;
    }

    .filters,
    .cards-filters,
    .catalogue-filters {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .cards-grid,
    .card-grid,
    .catalogue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 11px;
    }

    .card-item,
    .pokemon-card,
    .catalogue-card {
        padding: 7px 7px 12px;
        border-radius: 13px;
    }

    .detail-title {
        flex-direction: column;
        gap: 14px;
    }

    .detail-title > b {
        min-width: 72px;
    }

    .attack {
        padding: 16px;
    }

    .form-actions {
        flex-direction: column;
    }
}




/* =========================================================
   PAGE EXTENSIONS
========================================================= */

.hero {
    padding: 18px 0 26px;
}

.hero .wrap {
    position: relative;
    overflow: hidden;
    padding: 34px 38px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)),
        radial-gradient(circle at 85% 20%, rgba(255,216,77,0.26), transparent 34%);
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 24px;
    box-shadow: var(--tcgp-shadow);
}

.hero .wrap::after {
    content: "";
    position: absolute;
    top: -72px;
    right: -40px;
    width: 210px;
    height: 210px;
    border: 24px solid rgba(95,130,217,0.06);
    border-radius: 50%;
    box-shadow:
        0 0 0 26px rgba(255,255,255,0.42),
        0 0 0 52px rgba(244,168,220,0.05);
}

.hero p {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    color: #6d7790;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero h1 {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.content {
    padding: 0 0 72px;
}

.extension-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.extension-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.94);
    border-radius: 19px;
    box-shadow: var(--tcgp-shadow-card);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.extension-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        var(--tcgp-cyan),
        var(--tcgp-blue),
        var(--tcgp-lilac)
    );
}

.extension-card:hover {
    transform: translateY(-4px);
    border-color: rgba(95,130,217,0.18);
    box-shadow: 0 18px 38px rgba(43,53,81,0.16);
}

.extension-img {
    position: relative;
    display: flex;
    min-height: 148px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--tcgp-ink);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), transparent 25%),
        linear-gradient(145deg, rgba(117,223,242,0.22), rgba(182,155,234,0.18));
    border-right: 1px solid rgba(45,58,91,0.09);
}

.extension-img::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    border: 10px solid rgba(255,255,255,0.42);
    border-radius: 50%;
}

.extension-img img {
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(38,48,72,0.15));
    transition: transform 0.2s ease;
}

.extension-card:hover .extension-img img {
    transform: scale(1.05);
}

.extension-img b {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 66px;
    min-height: 66px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--tcgp-ink);
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(41,52,82,0.12);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.extension-card > div,
.extension-card-content {
    display: flex;
    min-width: 0;
    padding: 18px 18px 17px;
    flex-direction: column;
    align-items: flex-start;
}

.extension-card p,
.extension-code {
    margin: 0 0 4px;
    color: #7b86a0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.extension-card h2 {
    width: 100%;
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.extension-card h2 a {
    display: block;
    overflow: hidden;
    color: var(--tcgp-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extension-card h2 a:hover {
    color: #395fae;
}

.extension-card span,
.extension-count {
    margin-bottom: 14px;
    color: var(--tcgp-muted);
    font-size: 13px;
    font-weight: 750;
}

.extension-card > div > a:last-child,
.extension-card .extension-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    color: #385b9f;
    font-size: 13px;
    font-weight: 850;
}

.extension-card > div > a:last-child:hover,
.extension-card .extension-link:hover {
    color: #263f7e;
}

.empty-state {
    padding: 34px;
    color: var(--tcgp-muted);
    text-align: center;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 18px;
    box-shadow: var(--tcgp-shadow-card);
}

@media (max-width: 1080px) {
    .extension-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .hero .wrap {
        padding: 25px 22px;
        border-radius: 18px;
    }

    .extension-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .extension-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .extension-img {
        min-height: 126px;
    }

    .extension-img img {
        width: 68px;
        height: 68px;
    }

    .extension-card > div,
    .extension-card-content {
        padding: 15px 15px 14px;
    }

    .extension-card h2 {
        font-size: 16px;
    }
}


/* =========================================================
   AJOUT FICHE CARTE : lien extension + icônes d'énergie
========================================================= */

.topline .extension-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 11px;
    color: var(--tcgp-ink);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(95, 130, 217, 0.14);
    border-radius: 11px;
    text-transform: none;
    letter-spacing: 0;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.topline .extension-link:hover {
    color: var(--tcgp-ink);
    background: rgba(255, 216, 77, 0.22);
    border-color: rgba(212, 168, 22, 0.24);
    transform: translateY(-1px);
}

.extension-link-label {
    color: var(--tcgp-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.extension-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extension-link-arrow {
    color: #9f7a0b;
    font-size: 17px;
    line-height: 1;
}

.card-number {
    flex: 0 0 auto;
}

.energy-icon {
    --energy-bg: #d9dde5;
    --energy-border: #aeb5c1;
    --energy-text: #4c5564;

    position: relative;
    display: inline-flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--energy-text);
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.92), transparent 27%),
        var(--energy-bg);
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px var(--energy-border),
        0 3px 8px rgba(42, 50, 68, 0.16);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    vertical-align: middle;
}

.energy-icon > span {
    position: relative;
    z-index: 1;
}

.energy-plante {
    --energy-bg: #75cf70;
    --energy-border: #4da64a;
    --energy-text: #174b22;
}

.energy-feu {
    --energy-bg: #f36c59;
    --energy-border: #c7483a;
    --energy-text: #721e19;
}

.energy-eau {
    --energy-bg: #69b8ee;
    --energy-border: #3b89c2;
    --energy-text: #16486f;
}

.energy-electrique,
.energy-foudre {
    --energy-bg: #f8d94f;
    --energy-border: #d3ab22;
    --energy-text: #715800;
}

.energy-psy {
    --energy-bg: #cf84dc;
    --energy-border: #a45bb1;
    --energy-text: #5a2463;
}

.energy-combat {
    --energy-bg: #d79a68;
    --energy-border: #aa7044;
    --energy-text: #633719;
}

.energy-obscurite,
.energy-obscur {
    --energy-bg: #626777;
    --energy-border: #363b48;
    --energy-text: #fff;
}

.energy-metal {
    --energy-bg: #b5bdc8;
    --energy-border: #7e8998;
    --energy-text: #39414c;
}

.energy-dragon {
    --energy-bg: #d8b65c;
    --energy-border: #a98731;
    --energy-text: #5c4710;
}

.energy-incolore {
    --energy-bg: #e4e6eb;
    --energy-border: #b8bec8;
    --energy-text: #58606d;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.type-badge .energy-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 10px;
}

.attack-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.attack-cost {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.fact-value {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.retreat-icons {
    flex-wrap: wrap;
    gap: 5px;
}

@media (max-width: 580px) {
    .topline {
        align-items: stretch;
        flex-direction: column;
    }

    .topline .extension-link {
        width: 100%;
    }

    .card-number {
        align-self: flex-end;
    }

    .attack-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
}


/* ===============================
   Barre de tri
================================ */

.extensions-toolbar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin:0 0 30px;
}

.toolbar-title{
    font-size:13px;
    font-weight:700;
    color:#666;
    margin-right:6px;
}

.sort-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 18px;
    border-radius:999px;
    background:#fff;
    border:1px solid #e4e8f0;
    color:#4b5670;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:.2s;
    box-shadow:0 5px 14px rgba(0,0,0,.05);
}

.sort-btn:hover{
    transform:translateY(-2px);
    background:#f7f9ff;
    border-color:#8ca6e8;
    color:#2954b7;
}

.sort-btn.active{
    background:linear-gradient(135deg,#5f82d9,#3d61b8);
    color:#fff;
    border-color:#5f82d9;
    box-shadow:0 10px 24px rgba(61,97,184,.28);
}

.sort-btn.active:hover{
    color:#fff;
}

/* =========================================================
   REFONTE PAGE CARTES
========================================================= */
.cards-hero {
    padding: 20px 0 24px;
}

.cards-hero-content {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 54px);
    background:
        radial-gradient(circle at 92% 15%, rgba(255, 216, 77, .28), transparent 26%),
        radial-gradient(circle at 72% 110%, rgba(117, 223, 242, .25), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.82));
    border: 1px solid rgba(255,255,255,.96);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(39, 51, 81, .11);
}

.cards-hero-content::after {
    content: "";
    position: absolute;
    top: -88px;
    right: -42px;
    width: 220px;
    height: 220px;
    border: 24px solid rgba(95,130,217,.055);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255,255,255,.45), 0 0 0 56px rgba(244,168,220,.045);
}

.cards-hero-kicker,
.cards-section-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 9px;
    color: #5870aa;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cards-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin-bottom: 12px;
    font-size: clamp(34px, 5vw, 58px);
}

.cards-hero-description {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin-bottom: 22px;
    color: var(--tcgp-ink-soft);
    font-size: 17px;
}

.cards-result-counter {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 13px;
    color: #4f5c76;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(95,130,217,.12);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
}

.cards-result-counter strong {
    color: var(--tcgp-ink);
    font-size: 18px;
}

.cards-catalogue {
    padding: 0 0 72px;
}

.cards-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.25fr) minmax(0, 2fr) auto;
    gap: 18px;
    align-items: end;
    margin: 0 0 34px;
    padding: 24px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 22px;
    box-shadow: 0 15px 45px rgba(43,54,83,.09);
    backdrop-filter: blur(14px);
}

.cards-search-field,
.cards-filter-field {
    min-width: 0;
}

.cards-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cards-filters label {
    margin-bottom: 7px;
    font-size: 12px;
    letter-spacing: .02em;
}

.cards-filters input,
.cards-filters select {
    min-height: 52px;
    background: #fff;
    border-radius: 13px;
}

.cards-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    min-width: 188px;
}

.cards-filter-actions .button {
    width: 100%;
    min-height: 52px;
    white-space: nowrap;
}

.cards-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 20px;
}

.cards-section-header h2 {
    margin-bottom: 0;
    font-size: clamp(25px, 3vw, 34px);
}

.cards-section-kicker {
    margin-bottom: 4px;
}

.cards-results-total {
    flex: 0 0 auto;
    padding: 8px 12px;
    color: #56627a;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(45,58,91,.1);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.cards-empty-state {
    padding: 48px 26px;
    text-align: center;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 22px;
    box-shadow: var(--tcgp-shadow-card);
}

.cards-empty-state p {
    color: var(--tcgp-muted);
}

@media (max-width: 1080px) {
    .cards-filters {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .cards-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-filter-actions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .cards-hero {
        padding-top: 12px;
    }

    .cards-hero-content {
        padding: 25px 20px;
        border-radius: 20px;
    }

    .cards-hero-description {
        font-size: 15px;
    }

    .cards-filters {
        gap: 15px;
        padding: 16px;
        border-radius: 18px;
    }

    .cards-filter-grid,
    .cards-filter-actions {
        grid-template-columns: 1fr;
    }

    .cards-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   NOUVELLE PAGE CARTES : RECHERCHE DYNAMIQUE + EXTENSIONS
========================================================= */

.cards-page-new {
    padding: 42px 0 76px;
}

.cards-page-wrap {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

.cards-new-hero {
    max-width: 820px;
    margin-bottom: 28px;
}

.cards-new-kicker,
.cards-section-kicker {
    margin: 0 0 8px;
    color: #66738d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cards-new-hero h1 {
    max-width: 780px;
    margin-bottom: 13px;
    font-size: clamp(36px, 5vw, 58px);
}

.cards-new-intro {
    max-width: 720px;
    margin: 0;
    color: var(--tcgp-ink-soft);
    font-size: 17px;
}

.cards-live-search {
    position: relative;
    margin-bottom: 34px;
    padding: 24px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.98);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(41,52,82,.12);
    backdrop-filter: blur(16px);
}

.cards-main-search label {
    margin-bottom: 9px;
    font-size: 14px;
}

.cards-search-control {
    position: relative;
}

.cards-search-control input {
    min-height: 62px;
    padding: 15px 56px 15px 50px;
    border: 2px solid #dfe5ef;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 650;
}

.cards-search-control input:focus {
    border-color: #6f8dda;
    box-shadow: 0 0 0 5px rgba(95,130,217,.13);
}

.cards-search-icon {
    position: absolute;
    top: 50%;
    left: 19px;
    z-index: 2;
    width: 17px;
    height: 17px;
    border: 2px solid #697893;
    border-radius: 50%;
    transform: translateY(-58%);
    pointer-events: none;
}

.cards-search-icon::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 7px;
    height: 2px;
    background: #697893;
    border-radius: 2px;
    transform: rotate(45deg);
}

.cards-search-loader {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 3px solid #dde3ee;
    border-top-color: #5f82d9;
    border-radius: 50%;
    animation: cards-spin .65s linear infinite;
}

@keyframes cards-spin {
    to { transform: rotate(360deg); }
}

.cards-advanced-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.cards-filter-field label {
    margin-bottom: 6px;
}

.cards-filter-field select {
    min-height: 48px;
    background-color: #fff;
}

.cards-search-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 17px;
}

.cards-search-actions .button {
    min-width: 145px;
}

.cards-browse-section,
.cards-results-section {
    scroll-margin-top: 110px;
}

.cards-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.cards-section-title h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
}

.cards-section-title > span {
    flex: 0 0 auto;
    color: var(--tcgp-muted);
    font-size: 14px;
    font-weight: 800;
}

.cards-extension-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.cards-extension-choice {
    position: relative;
    display: flex;
    min-height: 145px;
    padding: 19px;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--tcgp-ink);
    text-align: left;
    background:
        radial-gradient(circle at 100% 0, rgba(117,223,242,.32), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,248,255,.93));
    border: 1px solid rgba(95,130,217,.14);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(48,58,86,.10);
}

.cards-extension-choice::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -42px;
    width: 118px;
    height: 118px;
    border: 17px solid rgba(95,130,217,.07);
    border-radius: 50%;
}

.cards-extension-choice:hover {
    color: var(--tcgp-ink);
    border-color: rgba(95,130,217,.28);
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(43,53,81,.15);
}

.cards-extension-code {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-bottom: 13px;
    padding: 5px 9px;
    color: #4f6191;
    background: rgba(95,130,217,.10);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cards-extension-choice strong {
    position: relative;
    z-index: 1;
    max-width: 90%;
    font-size: 17px;
    line-height: 1.25;
}

.cards-extension-open {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 13px;
    color: #4968b0;
    font-size: 13px;
    font-weight: 850;
}

.cards-extension-open::after {
    content: " →";
}

.cards-results-section {
    margin-top: 8px;
}

#cards-live-results {
    transition: opacity .18s ease;
}

#cards-live-results.is-updating {
    opacity: .45;
}

.cards-empty-state {
    padding: 46px 24px;
    color: var(--tcgp-muted);
    text-align: center;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 20px;
    box-shadow: var(--tcgp-shadow-card);
}

.cards-empty-state h2 {
    margin-bottom: 8px;
}

.cards-empty-state p {
    margin-bottom: 0;
}

[hidden] {
    display: none !important;
}

@media (max-width: 980px) {
    .cards-advanced-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-extension-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cards-page-new {
        padding-top: 28px;
    }

    .cards-page-wrap {
        width: min(100% - 24px, 1180px);
    }

    .cards-new-hero h1 {
        font-size: 36px;
    }

    .cards-new-intro {
        font-size: 15px;
    }

    .cards-live-search {
        padding: 17px;
        border-radius: 18px;
    }

    .cards-search-control input {
        min-height: 56px;
        padding-left: 46px;
        font-size: 15px;
    }

    .cards-advanced-filters {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cards-search-actions {
        flex-direction: column;
    }

    .cards-search-actions .button {
        width: 100%;
    }

    .cards-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .cards-extension-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .cards-extension-choice {
        min-height: 132px;
        padding: 15px;
        border-radius: 15px;
    }

    .cards-extension-choice strong {
        font-size: 15px;
    }
}

@media (max-width: 430px) {
    .cards-extension-grid {
        grid-template-columns: 1fr;
    }

    .cards-extension-choice {
        min-height: 120px;
    }
}


/* =========================================================
   PAGE INSCRIPTION
========================================================= */

.register-page {
    padding: 44px 0 78px;
}

.register-wrap {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}

.register-intro {
    position: relative;
    padding: clamp(12px, 3vw, 34px) 0;
}

.register-kicker,
.register-card-kicker {
    margin: 0 0 10px;
    color: #5570ad;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.register-intro h1 {
    max-width: 680px;
    margin-bottom: 17px;
    font-size: clamp(40px, 5.5vw, 68px);
}

.register-lead {
    max-width: 650px;
    margin-bottom: 31px;
    color: var(--tcgp-ink-soft);
    font-size: 18px;
    line-height: 1.7;
}

.register-benefits {
    display: grid;
    gap: 13px;
}

.register-benefit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 15px;
    padding: 17px 18px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(43, 54, 83, .06);
    backdrop-filter: blur(12px);
}

.register-benefit-number {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #3f5998;
    background: linear-gradient(135deg, rgba(117, 223, 242, .35), rgba(182, 155, 234, .25));
    border: 1px solid rgba(95, 130, 217, .13);
    border-radius: 13px;
    font-size: 12px;
    font-weight: 950;
}

.register-benefit h2 {
    margin: 1px 0 4px;
    font-size: 17px;
}

.register-benefit p {
    margin: 0;
    color: var(--tcgp-ink-soft);
    font-size: 14px;
    line-height: 1.55;
}

.register-free-note {
    display: flex;
    margin-top: 20px;
    padding: 15px 17px;
    flex-direction: column;
    color: #3e4b64;
    background: rgba(255, 216, 77, .22);
    border: 1px solid rgba(210, 167, 27, .17);
    border-radius: 14px;
    font-size: 13px;
}

.register-free-note strong {
    color: var(--tcgp-ink);
    font-size: 14px;
}

.register-card {
    position: relative;
    overflow: hidden;
    padding: clamp(25px, 4vw, 40px);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .98);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(39, 51, 81, .15);
    backdrop-filter: blur(18px);
}

.register-card::before {
    content: "";
    position: absolute;
    top: -84px;
    right: -66px;
    width: 190px;
    height: 190px;
    border: 24px solid rgba(95, 130, 217, .05);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(255, 216, 77, .045);
    pointer-events: none;
}

.register-card-head {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.register-card-head h2 {
    margin-bottom: 8px;
    font-size: clamp(29px, 4vw, 38px);
}

.register-card-head p:last-child {
    margin-bottom: 0;
    color: var(--tcgp-ink-soft);
    font-size: 14px;
}

.register-errors {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    padding: 15px 17px;
    color: #8d2630;
    background: #fff0f2;
    border: 1px solid #f3c3c8;
    border-radius: 13px;
    font-size: 13px;
}

.register-errors strong {
    display: block;
    margin-bottom: 5px;
}

.register-errors ul {
    margin: 0;
    padding-left: 19px;
}

.register-form {
    position: relative;
    z-index: 1;
}

.register-field {
    margin-bottom: 16px;
}

.register-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.register-field label > span[aria-hidden="true"] {
    color: var(--tcgp-red);
}

.register-optional {
    padding: 3px 7px;
    color: #68758e;
    background: #f0f2f7;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.register-field input {
    min-height: 51px;
    background: #fff;
}

.register-field small {
    display: block;
    margin-top: 6px;
    color: var(--tcgp-muted);
    font-size: 11px;
}

.register-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.register-security-note,
.register-rgpd-note {
    margin-bottom: 17px;
    padding: 13px 14px;
    color: #5c6780;
    background: #f6f8fb;
    border: 1px solid #e6eaf1;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.55;
}

.register-security-note strong,
.register-rgpd-note strong {
    color: var(--tcgp-ink);
}

.register-consent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 11px;
    margin: 4px 0 17px;
    padding: 0;
    color: #4c5870;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
    cursor: pointer;
}

.register-consent input {
    width: 19px;
    min-height: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: #5f82d9;
}

.register-consent a {
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.register-consent strong {
    color: var(--tcgp-red);
}

.register-rgpd-note {
    background: linear-gradient(135deg, rgba(117, 223, 242, .12), rgba(182, 155, 234, .10));
    border-color: rgba(95, 130, 217, .14);
}

.register-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 2px;
    font-size: 15px;
}

.register-required {
    margin: 10px 0 0;
    color: var(--tcgp-muted);
    font-size: 10px;
    text-align: center;
}

.register-login-link {
    position: relative;
    z-index: 1;
    margin: 22px 0 0;
    padding-top: 19px;
    color: var(--tcgp-muted);
    border-top: 1px solid var(--tcgp-border);
    font-size: 13px;
    text-align: center;
}

.register-login-link a {
    font-weight: 900;
}

@media (max-width: 960px) {
    .register-wrap {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .register-intro {
        padding-bottom: 0;
    }

    .register-intro h1 {
        max-width: 720px;
    }
}

@media (max-width: 580px) {
    .register-page {
        padding: 27px 0 58px;
    }

    .register-wrap {
        width: min(100% - 24px, 1180px);
        gap: 24px;
    }

    .register-intro h1 {
        font-size: 38px;
    }

    .register-lead {
        font-size: 15px;
    }

    .register-benefit {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 14px;
    }

    .register-benefit-number {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .register-card {
        padding: 23px 18px;
        border-radius: 20px;
    }

    .register-password-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* =========================================================
   PAGE D'ACCUEIL
========================================================= */

.home-page {
    overflow: hidden;
}

.home-hero {
    padding: 52px 0 34px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(410px, .98fr);
    gap: clamp(38px, 6vw, 82px);
    align-items: center;
}

.home-hero-content {
    position: relative;
    z-index: 2;
}

.home-kicker,
.home-section-kicker {
    margin: 0 0 11px;
    color: #5570ad;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-hero h1 {
    max-width: 700px;
    margin-bottom: 20px;
    font-size: clamp(45px, 6vw, 76px);
    line-height: 1.02;
}

.home-hero h1 span {
    display: block;
    color: #4f70bd;
}

.home-hero-lead {
    max-width: 650px;
    margin-bottom: 28px;
    color: var(--tcgp-ink-soft);
    font-size: 18px;
    line-height: 1.72;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-hero-actions .button,
.home-final-cta .button {
    min-height: 52px;
    padding-inline: 24px;
}

.home-button-primary {
    color: #fff;
    background: linear-gradient(135deg, #5f82d9, #4468bf);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(68, 104, 191, .28);
}

.home-button-primary:hover {
    color: #fff;
    box-shadow: 0 17px 36px rgba(68, 104, 191, .34);
}

.home-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-top: 22px;
    color: #68758d;
    font-size: 12px;
    font-weight: 800;
}

.home-hero-points span {
    position: relative;
    padding-left: 18px;
}

.home-hero-points span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    background: var(--tcgp-green);
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(45, 58, 91, .12);
    transform: translateY(-50%);
}

.home-dashboard-preview {
    position: relative;
    min-width: 0;
    padding: clamp(24px, 4vw, 36px);
    background:
        radial-gradient(circle at 95% 0, rgba(255,216,77,.25), transparent 28%),
        radial-gradient(circle at 0 100%, rgba(117,223,242,.20), transparent 32%),
        rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.98);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(39,51,81,.17);
    transform: none;
}

.home-dashboard-preview::before {
    content: "";
    position: absolute;
    inset: 13px;
    z-index: -1;
    border: 1px solid rgba(95,130,217,.10);
    border-radius: 24px;
}

.home-dashboard-top,
.home-progress-copy,
.home-extension-progress > div,
.home-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.home-dashboard-top {
    margin-bottom: 25px;
}

.home-dashboard-top p,
.home-progress-copy span,
.home-extension-progress span,
.home-next-goal span,
.home-dashboard-mini-grid span {
    margin: 0;
    color: var(--tcgp-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.home-dashboard-top strong {
    display: block;
    margin-top: 3px;
    font-size: 20px;
}

.home-live-badge {
    padding: 7px 10px;
    color: #336c56;
    background: rgba(141,228,192,.24);
    border: 1px solid rgba(77,166,132,.15);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.home-main-progress {
    padding: 19px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(95,130,217,.10);
    border-radius: 17px;
}

.home-progress-copy strong {
    font-size: 26px;
}

.home-progress-bar,
.home-small-progress {
    overflow: hidden;
    background: #e9edf5;
    border-radius: 999px;
}

.home-progress-bar {
    height: 11px;
    margin: 13px 0 9px;
}

.home-progress-bar span,
.home-small-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #5f82d9, #75dff2);
    border-radius: inherit;
}

.home-main-progress p {
    margin: 0;
    color: var(--tcgp-muted);
    font-size: 12px;
}

.home-dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 12px 0;
}

.home-dashboard-mini-grid > div {
    padding: 15px;
    background: #f7f8fb;
    border: 1px solid #e8ebf1;
    border-radius: 14px;
}

.home-dashboard-mini-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 23px;
}

.home-extension-progress {
    margin-top: 13px;
}

.home-extension-progress strong {
    font-size: 13px;
}

.home-small-progress {
    height: 7px;
    margin-top: 7px;
}

.home-next-goal {
    margin-top: 18px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255,216,77,.20), rgba(244,168,220,.10));
    border: 1px solid rgba(210,167,27,.13);
    border-radius: 15px;
}

.home-next-goal strong {
    display: block;
    margin: 3px 0 7px;
    font-size: 15px;
}

.home-next-goal a {
    font-size: 12px;
    font-weight: 850;
}

.home-stats {
    padding: 22px 0 34px;
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(43,54,83,.08);
    backdrop-filter: blur(14px);
}

.home-stat {
    position: relative;
    padding: 24px;
    text-align: center;
}

.home-stat + .home-stat::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 0;
    width: 1px;
    background: var(--tcgp-border);
}

.home-stat strong {
    display: block;
    color: var(--tcgp-ink);
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1;
}

.home-stat span {
    display: block;
    margin-top: 7px;
    color: var(--tcgp-muted);
    font-size: 12px;
    font-weight: 750;
}

.home-section {
    padding: 54px 0;
}

.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 25px;
}

.home-section-head > div {
    max-width: 720px;
}

.home-section-head h2 {
    margin-bottom: 9px;
    font-size: clamp(29px, 4vw, 43px);
}

.home-section-head p:last-child {
    margin-bottom: 0;
    color: var(--tcgp-ink-soft);
}

.home-section-head-centered {
    justify-content: center;
    text-align: center;
}

.home-text-link {
    flex: 0 0 auto;
    padding-bottom: 5px;
    font-size: 13px;
    font-weight: 900;
}

.home-text-link.is-disabled {
    color: var(--tcgp-muted);
    pointer-events: none;
}

.home-extension-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 19px;
}

.home-extension-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(125px, .78fr) minmax(0, 1.22fr);
    min-height: 220px;
    overflow: hidden;
    background: rgba(255,255,255,.91);
    border: 1px solid rgba(255,255,255,.97);
    border-radius: 21px;
    box-shadow: var(--tcgp-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-extension-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(43,53,81,.16);
}

.home-extension-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), transparent 25%),
        linear-gradient(145deg, rgba(117,223,242,.35), rgba(182,155,234,.26));
    border-right: 1px solid rgba(45,58,91,.08);
}

.home-extension-card-2 .home-extension-visual {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), transparent 25%),
        linear-gradient(145deg, rgba(255,216,77,.32), rgba(244,168,220,.26));
}

.home-extension-card-3 .home-extension-visual {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), transparent 25%),
        linear-gradient(145deg, rgba(141,228,192,.32), rgba(117,223,242,.25));
}

.home-extension-visual::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border: 17px solid rgba(255,255,255,.36);
    border-radius: 50%;
}

.home-extension-visual img {
    position: relative;
    z-index: 1;
    width: 100px;
    max-height: 155px;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(38,48,72,.20));
}

.home-extension-visual > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 82px;
    height: 82px;
    align-items: center;
    justify-content: center;
    color: var(--tcgp-ink);
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(41,52,82,.13);
    font-size: 18px;
    font-weight: 950;
}

.home-extension-content {
    display: flex;
    min-width: 0;
    padding: 22px 20px;
    flex-direction: column;
    align-items: flex-start;
}

.home-extension-content > p {
    margin-bottom: 7px;
    color: #65749a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-extension-content h3 {
    width: 100%;
    margin-bottom: 8px;
    font-size: 19px;
}

.home-extension-content h3 a {
    color: var(--tcgp-ink);
}

.home-extension-content > span {
    color: var(--tcgp-muted);
    font-size: 13px;
    font-weight: 750;
}

.home-extension-content > a:last-child {
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
    font-weight: 900;
}

.home-features-section {
    position: relative;
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-feature-card {
    min-height: 235px;
    padding: 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.96);
    border-radius: 19px;
    box-shadow: 0 12px 35px rgba(43,54,83,.08);
}

.home-feature-number {
    display: inline-flex;
    width: 43px;
    height: 43px;
    margin-bottom: 28px;
    align-items: center;
    justify-content: center;
    color: #4561a0;
    background: linear-gradient(135deg, rgba(117,223,242,.30), rgba(182,155,234,.22));
    border-radius: 13px;
    font-size: 12px;
    font-weight: 950;
}

.home-feature-card h3 {
    font-size: 19px;
}

.home-feature-card p {
    margin: 0;
    color: var(--tcgp-ink-soft);
    font-size: 14px;
}

.home-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.home-card {
    min-width: 0;
    padding: 9px 9px 15px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.96);
    border-radius: 17px;
    box-shadow: var(--tcgp-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(43,53,81,.16);
}

.home-card-image {
    display: block;
    overflow: hidden;
    background: linear-gradient(145deg, #f4f6fa, #fff);
    border-radius: 11px;
}

.home-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: .714 / 1;
    object-fit: contain;
}

.home-card-content {
    padding: 12px 4px 0;
}

.home-card-content p {
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--tcgp-muted);
    font-size: 10px;
    font-weight: 850;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-card-content h3 {
    margin-bottom: 3px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-card-content h3 a {
    color: var(--tcgp-ink);
}

.home-card-content span {
    color: var(--tcgp-muted);
    font-size: 11px;
}

.home-news-section {
    background: rgba(255,255,255,.22);
    border-block: 1px solid rgba(255,255,255,.5);
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-news-card {
    display: flex;
    min-height: 250px;
    padding: 25px;
    flex-direction: column;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.97);
    border-radius: 19px;
    box-shadow: 0 12px 35px rgba(43,54,83,.08);
}

.home-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 23px;
}

.home-news-meta span {
    padding: 5px 9px;
    color: #4860a0;
    background: rgba(95,130,217,.11);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.home-news-meta time {
    color: var(--tcgp-muted);
    font-size: 11px;
    font-weight: 750;
}

.home-news-card h3 {
    font-size: 20px;
}

.home-news-card p {
    color: var(--tcgp-ink-soft);
    font-size: 14px;
}

.home-news-card > a {
    margin-top: auto;
    padding-top: 17px;
    font-size: 12px;
    font-weight: 900;
}

.home-final-cta {
    padding: 64px 0 78px;
}

.home-final-cta-inner {
    padding: clamp(28px, 5vw, 52px);
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 0, rgba(255,216,77,.24), transparent 28%),
        radial-gradient(circle at 0 100%, rgba(117,223,242,.20), transparent 34%),
        rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.98);
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(39,51,81,.12);
}

.home-final-cta-inner > div {
    max-width: 730px;
}

.home-final-cta h2 {
    margin-bottom: 9px;
    font-size: clamp(28px, 4vw, 43px);
}

.home-final-cta p:last-child {
    margin-bottom: 0;
    color: var(--tcgp-ink-soft);
}

.home-empty {
    padding: 35px;
    color: var(--tcgp-muted);
    text-align: center;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.96);
    border-radius: 18px;
}

@media (max-width: 1080px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-dashboard-preview {
        width: min(680px, 100%);
        transform: none;
    }

    .home-extension-grid {
        grid-template-columns: 1fr;
    }

    .home-extension-card {
        grid-template-columns: 180px minmax(0, 1fr);
        min-height: 190px;
    }

    .home-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .home-hero {
        padding-top: 34px;
    }

    .home-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-stat:nth-child(3)::before {
        display: none;
    }

    .home-stat:nth-child(n+3) {
        border-top: 1px solid var(--tcgp-border);
    }

    .home-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-news-grid {
        grid-template-columns: 1fr;
    }

    .home-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .home-hero {
        padding-top: 25px;
    }

    .home-hero h1 {
        font-size: 43px;
    }

    .home-hero-lead {
        font-size: 16px;
    }

    .home-hero-actions {
        flex-direction: column;
    }

    .home-hero-actions .button {
        width: 100%;
    }

    .home-dashboard-preview {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .home-dashboard-mini-grid {
        grid-template-columns: 1fr;
    }

    .home-section {
        padding: 40px 0;
    }

    .home-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .home-extension-card {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 165px;
    }

    .home-extension-visual img {
        width: 76px;
        max-height: 125px;
    }

    .home-extension-content {
        padding: 17px 15px;
    }

    .home-extension-content h3 {
        font-size: 16px;
    }

    .home-feature-grid {
        grid-template-columns: 1fr;
    }

    .home-feature-card {
        min-height: 0;
    }

    .home-feature-number {
        margin-bottom: 18px;
    }

    .home-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-final-cta {
        padding: 43px 0 58px;
    }
}

/* =========================================================
   HEADER RESPONSIVE FINAL
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(38, 51, 82, 0.10);
    box-shadow: 0 8px 28px rgba(39, 51, 81, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--tcgp-cyan) 0%,
        var(--tcgp-green) 22%,
        var(--tcgp-yellow) 44%,
        var(--tcgp-pink) 68%,
        var(--tcgp-lilac) 100%
    );
}

.header-inner {
    position: relative;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--tcgp-ink);
    white-space: nowrap;
}

.brand::before,
.site-logo::before {
    display: none !important;
    content: none !important;
}

.brand:hover {
    color: var(--tcgp-ink);
}

.brand-ball {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    overflow: hidden;
    border: 4px solid var(--tcgp-ink);
    border-radius: 50%;
    background: linear-gradient(
        to bottom,
        var(--tcgp-red) 0 45%,
        var(--tcgp-ink) 45% 55%,
        #fff 55% 100%
    );
    box-shadow: 0 6px 15px rgba(31, 42, 68, 0.16);
}

.brand-ball-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid var(--tcgp-ink);
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

.brand-text strong,
.brand-text small {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.brand-text small {
    color: var(--tcgp-ink);
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    flex: 0 0 46px;
    border: 1px solid rgba(45, 58, 91, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

.nav-toggle:hover {
    transform: none;
    box-shadow: none;
}

.nav-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    margin: 4px auto;
    background: var(--tcgp-ink);
    border-radius: 999px;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.site-nav-main,
.site-nav-account {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-nav-account {
    padding-left: 10px;
    border-left: 1px solid var(--tcgp-border);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 12px;
    color: #536078;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.is-active,
.site-nav a[aria-current="page"] {
    color: var(--tcgp-ink);
    background: rgba(255, 216, 77, 0.30);
}

.site-nav .nav-login {
    color: #fff;
    background: linear-gradient(135deg, #5f82d9, #4468bf);
}

.site-nav .nav-login:hover,
.site-nav .nav-login.is-active {
    color: #fff;
    background: linear-gradient(135deg, #5578cf, #3d5fad);
}

@media (max-width: 820px) {
    body.nav-open {
        overflow: hidden;
    }

    .site-header {
        position: sticky;
    }

    .header-inner,
    .site-header-inner {
        min-height: 68px;
        padding: 0;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .brand-ball {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-width: 3px;
    }

    .brand-text {
        gap: 5px;
    }

    .brand-text strong,
    .brand-text small {
        font-size: 19px;
    }

    .nav-toggle {
        display: block;
        margin-left: auto;
    }

    .site-nav {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        z-index: 1001;
        display: block;
        max-height: calc(100vh - 92px);
        padding: 13px;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        background: rgba(255, 255, 255, 0.985);
        border: 1px solid rgba(45, 58, 91, 0.12);
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(31, 42, 68, 0.22);
        transform: translateY(-10px) scale(.985);
        transform-origin: top center;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .nav-open .site-nav {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .site-nav-main,
    .site-nav-account {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .site-nav-account {
        margin-top: 10px;
        padding: 10px 0 0;
        border-top: 1px solid var(--tcgp-border);
        border-left: 0;
    }

    .site-nav a {
        width: 100%;
        min-height: 48px;
        padding: 11px 14px;
        justify-content: flex-start;
        background: transparent;
        border-radius: 12px;
        font-size: 15px;
    }

    .site-nav a:hover,
    .site-nav a.is-active,
    .site-nav a[aria-current="page"] {
        background: rgba(255, 216, 77, 0.27);
    }

    .site-nav .nav-login {
        justify-content: center;
    }

    .main-content {
        padding-top: 26px;
    }
}

@media (max-width: 420px) {
    .brand-text {
        display: block;
    }

    .brand-text strong,
    .brand-text small {
        font-size: 18px;
    }

    .brand-text small {
        margin-left: 4px;
    }
}


/* =========================================================
   GRILLE DES CARTES — VERSION COMPACTE ET RESPONSIVE
   Classes dédiées pour éviter le conflit avec .card générique
========================================================= */

.tcgp-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px 18px;
    align-items: start;
}

.tcgp-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(45, 58, 91, 0.10);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(48, 58, 86, 0.11);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.tcgp-card:hover {
    transform: translateY(-5px);
    border-color: rgba(95, 130, 217, 0.22);
    box-shadow: 0 19px 42px rgba(43, 53, 81, 0.17);
}

.tcgp-card-visual {
    position: relative;
    display: block;
    padding: 9px 9px 0;
    overflow: hidden;
    color: inherit;
    background: linear-gradient(145deg, #f3f6fb 0%, #ffffff 72%);
}

.tcgp-card-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 0.714 / 1;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 8px 12px rgba(34, 42, 61, 0.14));
    transition: transform 0.24s ease;
}

.tcgp-card:hover .tcgp-card-visual img {
    transform: scale(1.018);
}

.tcgp-card-rarity {
    position: absolute;
    right: 15px;
    bottom: 8px;
    z-index: 2;
    max-width: calc(100% - 30px);
    padding: 5px 9px;
    overflow: hidden;
    color: #39445c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(45, 58, 91, 0.10);
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(34, 42, 61, 0.12);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.tcgp-card-content {
    padding: 14px 15px 15px;
}

.tcgp-card-reference {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 17px;
    margin: 0 0 5px;
    color: #7a859d;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.tcgp-card-reference span + span::before {
    content: "•";
    margin-right: 7px;
    color: #b2b9c7;
}

.tcgp-card-title {
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcgp-card-title a {
    display: block;
    overflow: hidden;
    color: var(--tcgp-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcgp-card-title a:hover {
    color: #395fae;
}

.tcgp-card-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 25px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(45, 58, 91, 0.09);
}

.tcgp-card-type {
    min-width: 0;
    padding: 4px 8px;
    overflow: hidden;
    color: #4d5d83;
    background: rgba(95, 130, 217, 0.10);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcgp-card-hp {
    flex: 0 0 auto;
    color: #8d4550;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.tcgp-card-hp strong {
    color: #9b2731;
    font-size: 13px;
}

.tcgp-empty-state {
    padding: 42px 24px;
    color: var(--tcgp-muted);
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: var(--tcgp-shadow-card);
}

.tcgp-empty-state h2 {
    margin-bottom: 7px;
}

.tcgp-empty-state p {
    margin-bottom: 0;
}

@media (max-width: 1080px) {
    .tcgp-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .tcgp-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 17px 13px;
    }
}

@media (max-width: 580px) {
    .tcgp-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px 10px;
    }

    .tcgp-card {
        border-radius: 14px;
    }

    .tcgp-card-visual {
        padding: 6px 6px 0;
    }

    .tcgp-card-visual img {
        border-radius: 10px;
        filter: drop-shadow(0 5px 8px rgba(34, 42, 61, 0.12));
    }

    .tcgp-card-rarity {
        right: 10px;
        bottom: 6px;
        max-width: calc(100% - 20px);
        padding: 4px 7px;
        font-size: 9px;
    }

    .tcgp-card-content {
        padding: 11px 11px 12px;
    }

    .tcgp-card-reference {
        gap: 5px;
        margin-bottom: 4px;
        font-size: 9px;
    }

    .tcgp-card-reference span + span::before {
        margin-right: 5px;
    }

    .tcgp-card-title {
        font-size: 14px;
    }

    .tcgp-card-details {
        min-height: 22px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .tcgp-card-type,
    .tcgp-card-hp {
        font-size: 9px;
    }

    .tcgp-card-hp strong {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .tcgp-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Grille de cartes Pokémon TCG Pocket
   À placer à la fin de global.css
   ========================================================================== */

.tcgp-card-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:28px 22px;
    align-items:start;
}

.tcgp-card{
    position:relative;
    min-width:0;
    border:0;
    border-radius:24px;
    background:rgba(255,255,255,.9);
    box-shadow:
        0 14px 36px rgba(30,42,72,.10),
        0 2px 6px rgba(30,42,72,.05);
    overflow:visible;
    isolation:isolate;
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.tcgp-card::before{
    content:"";
    position:absolute;
    inset:10px 12px -10px;
    z-index:-1;
    border-radius:24px;
    background:rgba(255,255,255,.65);
    filter:blur(14px);
    opacity:0;
    transition:opacity .22s ease;
}

.tcgp-card:hover{
    transform:translateY(-7px);
    box-shadow:
        0 24px 50px rgba(30,42,72,.16),
        0 5px 12px rgba(30,42,72,.08);
}

.tcgp-card:hover::before{
    opacity:1;
}

.tcgp-card-visual{
    position:relative;
    display:block;
    padding:12px 12px 0;
    text-decoration:none;
}

.tcgp-card-visual img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:367 / 512;
    object-fit:contain;
    border-radius:17px;
    background:transparent;
    filter:drop-shadow(0 10px 13px rgba(28,38,64,.16));
    transition:
        transform .22s ease,
        filter .22s ease;
}

.tcgp-card:hover .tcgp-card-visual img{
    transform:scale(1.025) rotate(-.35deg);
    filter:drop-shadow(0 15px 18px rgba(28,38,64,.22));
}

.tcgp-card-rarity{
    position:absolute;
    right:20px;
    bottom:9px;
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:#273149;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:0 6px 16px rgba(23,31,50,.15);
    backdrop-filter:blur(10px);
    white-space:nowrap;
}

.tcgp-card-rarity::before{
    content:"";
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
    background:#aeb6c6;
    box-shadow:0 0 0 3px rgba(174,182,198,.18);
}

.tcgp-card-rarity.rarity-peu-commune::before{
    background:#5cae79;
    box-shadow:0 0 0 3px rgba(92,174,121,.18);
}

.tcgp-card-rarity.rarity-rare::before{
    background:#4b87e8;
    box-shadow:0 0 0 3px rgba(75,135,232,.18);
}

.tcgp-card-rarity.rarity-double-rare::before,
.tcgp-card-rarity.rarity-deux-etoiles::before{
    background:#8d62d7;
    box-shadow:0 0 0 3px rgba(141,98,215,.18);
}

.tcgp-card-rarity.rarity-une-etoile::before,
.tcgp-card-rarity.rarity-trois-etoiles::before{
    background:#ef6d9d;
    box-shadow:0 0 0 3px rgba(239,109,157,.18);
}

.tcgp-card-rarity.rarity-couronne::before{
    background:#e9b52f;
    box-shadow:0 0 0 3px rgba(233,181,47,.2);
}

.tcgp-card-info{
    padding:16px 16px 15px;
}

.tcgp-card-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}

.tcgp-card-heading h2{
    min-width:0;
    margin:0;
    font-size:17px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.025em;
}

.tcgp-card-heading h2 a{
    display:block;
    overflow:hidden;
    color:#19233a;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tcgp-card-heading h2 a:hover{
    color:#385fd4;
}

.tcgp-card-hp{
    flex:0 0 auto;
    padding-top:1px;
    color:#e34f66;
    font-size:15px;
    line-height:1;
    font-weight:900;
    white-space:nowrap;
}

.tcgp-card-hp small{
    font-size:9px;
    letter-spacing:.04em;
}

.tcgp-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
}

.tcgp-card-number{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#8790a3;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}

.tcgp-card-number b{
    color:#4f596e;
}

.tcgp-card-type{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:25px;
    padding:5px 9px;
    border-radius:999px;
    background:#eef1f7;
    color:#4c5870;
    font-size:11px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
}

.tcgp-card-type i{
    display:block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#929caf;
    box-shadow:0 0 0 3px rgba(146,156,175,.15);
}

.tcgp-card-type.type-plante{
    background:#edf8ef;
    color:#39764d;
}

.tcgp-card-type.type-plante i{
    background:#66ad78;
    box-shadow:0 0 0 3px rgba(102,173,120,.16);
}

.tcgp-card-type.type-feu{
    background:#fff0ed;
    color:#b84e41;
}

.tcgp-card-type.type-feu i{
    background:#e96b59;
    box-shadow:0 0 0 3px rgba(233,107,89,.16);
}

.tcgp-card-type.type-eau{
    background:#edf5ff;
    color:#3970a8;
}

.tcgp-card-type.type-eau i{
    background:#5e9bd4;
    box-shadow:0 0 0 3px rgba(94,155,212,.16);
}

.tcgp-card-type.type-electrik{
    background:#fff8df;
    color:#9a7417;
}

.tcgp-card-type.type-electrik i{
    background:#e6b72d;
    box-shadow:0 0 0 3px rgba(230,183,45,.18);
}

.tcgp-card-type.type-psy{
    background:#f8ecfb;
    color:#85529a;
}

.tcgp-card-type.type-psy i{
    background:#ad70c5;
    box-shadow:0 0 0 3px rgba(173,112,197,.16);
}

.tcgp-card-type.type-combat{
    background:#f5eee9;
    color:#8a5842;
}

.tcgp-card-type.type-combat i{
    background:#ae7457;
    box-shadow:0 0 0 3px rgba(174,116,87,.16);
}

.tcgp-card-type.type-obscurite{
    background:#edf0f5;
    color:#465166;
}

.tcgp-card-type.type-obscurite i{
    background:#59667c;
    box-shadow:0 0 0 3px rgba(89,102,124,.16);
}

.tcgp-card-type.type-metal{
    background:#edf4f5;
    color:#536e73;
}

.tcgp-card-type.type-metal i{
    background:#7e9ca2;
    box-shadow:0 0 0 3px rgba(126,156,162,.16);
}

.tcgp-card-type.type-dragon{
    background:#f1effd;
    color:#6555a8;
}

.tcgp-card-type.type-dragon i{
    background:#7a68c3;
    box-shadow:0 0 0 3px rgba(122,104,195,.16);
}

.tcgp-card-type.type-incolore{
    background:#f2f3f6;
    color:#697284;
}

.tcgp-card-type.type-incolore i{
    background:#9da5b4;
    box-shadow:0 0 0 3px rgba(157,165,180,.16);
}

@media (max-width:1250px){
    .tcgp-card-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media (max-width:980px){
    .tcgp-card-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:24px 18px;
    }
}

@media (max-width:680px){
    .tcgp-card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px 12px;
    }

    .tcgp-card{
        border-radius:18px;
    }

    .tcgp-card-visual{
        padding:8px 8px 0;
    }

    .tcgp-card-visual img{
        border-radius:13px;
    }

    .tcgp-card-info{
        padding:12px 11px 12px;
    }

    .tcgp-card-heading{
        display:block;
    }

    .tcgp-card-heading h2{
        font-size:14px;
    }

    .tcgp-card-hp{
        display:none;
    }

    .tcgp-card-meta{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
        margin-top:9px;
    }

    .tcgp-card-rarity{
        right:14px;
        bottom:5px;
        max-width:calc(100% - 28px);
        overflow:hidden;
        font-size:9px;
        text-overflow:ellipsis;
    }

    .tcgp-card-type{
        min-height:23px;
        padding:4px 8px;
        font-size:10px;
    }
}

@media (max-width:380px){
    .tcgp-card-grid{
        gap:16px 9px;
    }

    .tcgp-card-info{
        padding-inline:9px;
    }

    .tcgp-card-number{
        font-size:9px;
    }
}

/* page carte individuelle */


/* =========================================================
   FICHE CARTE — GESTION DE LA COLLECTION
========================================================= */

.collection-box {
    margin: 24px 0 20px;
    padding: 19px 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,255,.94));
    border: 1px solid rgba(95,130,217,.15);
    border-radius: 17px;
    box-shadow:
        0 12px 30px rgba(31,42,68,.07),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.collection-box-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.collection-box-head > div {
    min-width: 0;
}

.collection-box-head > div > span {
    display: block;
    margin-bottom: 2px;
    color: var(--tcgp-muted);
    font-size: 12px;
    font-weight: 750;
}

.collection-box-head strong {
    display: block;
    color: var(--tcgp-ink);
    font-size: 15px;
    line-height: 1.35;
}

.collection-box-head > span {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: #52617f;
    background: #eef2f8;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

/* Formulaire compact */

.collection-quantity-form {
    display: grid;
    grid-template-columns: 38px 58px 38px minmax(135px, 1fr);
    gap: 8px;
    align-items: center;
}

/* Boutons moins / plus */

.collection-quantity-form button[data-quantity-minus],
.collection-quantity-form button[data-quantity-plus] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: #39445d;
    background: #f4f6fa;
    border: 1px solid #dce2ec;
    border-radius: 10px;
    box-shadow: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.collection-quantity-form button[data-quantity-minus]:hover,
.collection-quantity-form button[data-quantity-plus]:hover {
    color: #26385f;
    background: #eaf0fb;
    border-color: #bdc9e0;
    box-shadow: none;
    transform: none;
}

/* Quantité */

.collection-quantity-form input[name="quantite"] {
    width: 58px;
    min-width: 58px;
    height: 38px;
    min-height: 38px;
    padding: 4px;
    color: var(--tcgp-ink);
    background: #fff;
    border: 1px solid #d8deea;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(28,39,65,.04);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.collection-quantity-form input[name="quantite"]::-webkit-inner-spin-button,
.collection-quantity-form input[name="quantite"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.collection-quantity-form input[name="quantite"]:focus {
    border-color: #8098d6;
    box-shadow: 0 0 0 3px rgba(95,130,217,.12);
}

/* Bouton principal */

.collection-quantity-form .button {
    width: 100%;
    min-height: 40px;
    padding: 9px 17px;
    color: #17233f;
    background: linear-gradient(135deg, #ffd84d, #ffe78f);
    border: 1px solid rgba(181,139,15,.16);
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(195,152,18,.15);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.collection-quantity-form .button:hover {
    color: #17233f;
    box-shadow: 0 11px 23px rgba(195,152,18,.22);
    transform: translateY(-1px);
}

/* Utilisateur non connecté */

.collection-login-note {
    margin: 22px 0 19px;
    padding: 16px 18px;
    color: #56617a;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(95,130,217,.13);
    border-radius: 15px;
    font-size: 13px;
}

.collection-login-note a {
    color: #4263ae;
    font-weight: 900;
}

/* Tablette */

@media (max-width: 1050px) {
    .collection-quantity-form {
        grid-template-columns: 38px 58px 38px;
    }

    .collection-quantity-form .button {
        grid-column: 1 / -1;
    }
}

/* Mobile */

@media (max-width: 620px) {
    .collection-box {
        margin: 20px 0 18px;
        padding: 17px;
        border-radius: 15px;
    }

    .collection-box-head {
        margin-bottom: 13px;
    }

    .collection-box-head > span {
        display: none;
    }

    .collection-quantity-form {
        grid-template-columns: 40px minmax(60px, 1fr) 40px;
        gap: 7px;
    }

    .collection-quantity-form button[data-quantity-minus],
    .collection-quantity-form button[data-quantity-plus] {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .collection-quantity-form input[name="quantite"] {
        width: 100%;
        height: 40px;
        min-height: 40px;
    }

    .collection-quantity-form .button {
        grid-column: 1 / -1;
        min-height: 43px;
        margin-top: 2px;
    }
}


/* =========================================================
   FICHE CARTE — NAVIGATION PRÉCÉDENTE / SUIVANTE
========================================================= */

.card-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: -6px 0 24px;
}

.card-navigation-link {
    display: flex;
    min-width: 0;
    min-height: 72px;
    padding: 13px 16px;
    flex-direction: column;
    justify-content: center;
    color: var(--tcgp-ink);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(95,130,217,.13);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(42,52,80,.06);
    backdrop-filter: blur(10px);
}

.card-navigation-link:hover {
    color: var(--tcgp-ink);
    background: rgba(255,255,255,.94);
    border-color: rgba(95,130,217,.28);
    box-shadow: 0 12px 28px rgba(42,52,80,.11);
    transform: translateY(-2px);
}

.card-navigation-link span {
    margin-bottom: 3px;
    color: var(--tcgp-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.card-navigation-link strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-navigation-next {
    align-items: flex-end;
    text-align: right;
}

.card-navigation-empty {
    min-height: 1px;
}

@media (max-width: 580px) {
    .card-navigation {
        gap: 8px;
        margin-bottom: 18px;
    }

    .card-navigation-link {
        min-height: 58px;
        padding: 10px 12px;
    }

    .card-navigation-link span {
        font-size: 9px;
    }

    .card-navigation-link strong {
        font-size: 11px;
    }
}

/*  ----------------------- */

.extension-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0 18px;
    min-height: 72px;
}

.extension-icon img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

@media (max-width: 700px) {
    .extension-icon {
        min-height: 60px;
        margin: 10px 0 15px;
    }

    .extension-icon img {
        width: 60px;
        height: 60px;
    }
}
/* =========================================================
   REFONTE PREMIUM PAGE EXTENSIONS - 25/07/2026
========================================================= */
.extensions-hero {
    padding: 24px 0 34px;
}

.extensions-hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    min-height: 420px;
    overflow: hidden;
    padding: clamp(34px, 6vw, 72px);
    background:
        radial-gradient(circle at 84% 18%, rgba(255,216,77,.34), transparent 24%),
        radial-gradient(circle at 72% 92%, rgba(117,223,242,.30), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,255,.89));
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 32px;
    box-shadow: 0 26px 80px rgba(39,51,81,.14);
}

.extensions-hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
}

.extensions-kicker,
.extensions-section-kicker,
.extension-card-eyebrow {
    margin: 0 0 10px;
    color: #6277ad;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.extensions-hero h1 {
    max-width: 780px;
    margin: 0 0 18px;
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.extensions-lead {
    max-width: 650px;
    margin: 0;
    color: var(--tcgp-ink-soft);
    font-size: clamp(16px, 2vw, 19px);
}

.extensions-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.extensions-hero-stats > div {
    min-width: 145px;
    padding: 13px 16px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(95,130,217,.12);
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(49,61,91,.07);
    backdrop-filter: blur(10px);
}

.extensions-hero-stats strong,
.extensions-hero-stats span {
    display: block;
}

.extensions-hero-stats strong {
    color: var(--tcgp-ink);
    font-size: 21px;
    line-height: 1.15;
}

.extensions-hero-stats span {
    margin-top: 3px;
    color: var(--tcgp-muted);
    font-size: 11px;
    font-weight: 750;
}

.extensions-hero-visual {
    position: relative;
    min-height: 300px;
}

.hero-card {
    position: absolute;
    display: block;
    width: 150px;
    aspect-ratio: .714 / 1;
    border: 8px solid rgba(255,255,255,.9);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.9) 0 13%, transparent 14%),
        linear-gradient(to bottom, #e94e59 0 45%, #1d2947 45% 55%, #fff 55% 100%);
    box-shadow: 0 25px 46px rgba(32,44,73,.23);
}

.hero-card-one { right: 118px; top: 30px; transform: rotate(-12deg); }
.hero-card-two { right: 18px; top: 78px; transform: rotate(10deg); }
.hero-card-three { right: 78px; top: 142px; transform: rotate(1deg) scale(.86); }

.hero-orbit {
    position: absolute;
    right: -70px;
    top: -70px;
    width: 360px;
    height: 360px;
    border: 40px solid rgba(95,130,217,.06);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(255,255,255,.35), 0 0 0 76px rgba(244,168,220,.05);
}

.extensions-content {
    padding: 0 0 82px;
}

.extensions-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 28px;
}

.extensions-toolbar h2 {
    margin: 0;
    font-size: clamp(26px, 4vw, 38px);
}

.extensions-sort-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.extensions-toolbar .sort-btn {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
}

.extension-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.extension-card-premium {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.98);
    border-radius: 24px;
    box-shadow: 0 16px 42px rgba(43,53,81,.12);
    transition: transform .24s ease, box-shadow .24s ease;
}

.extension-card-premium:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 58px rgba(43,53,81,.19);
}

.extension-cover {
    --extension-accent: 95,130,217;
    position: relative;
    display: flex;
    min-height: 230px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background:
        radial-gradient(circle at 28% 15%, rgba(255,255,255,.92), transparent 26%),
        linear-gradient(145deg, rgba(var(--extension-accent),.32), rgba(255,255,255,.82));
}

.extension-accent-1 .extension-cover { --extension-accent: 95,130,217; }
.extension-accent-2 .extension-cover { --extension-accent: 239,77,88; }
.extension-accent-3 .extension-cover { --extension-accent: 117,223,242; }
.extension-accent-4 .extension-cover { --extension-accent: 182,155,234; }
.extension-accent-5 .extension-cover { --extension-accent: 244,168,220; }
.extension-accent-6 .extension-cover { --extension-accent: 141,228,192; }

.extension-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.52) 44%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.extension-card-premium:hover .extension-cover::after {
    transform: translateX(120%);
}

.extension-cover-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 26px solid rgba(255,255,255,.28);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(255,255,255,.14);
}

.extension-cover img {
    position: relative;
    z-index: 2;
    width: min(190px, 82%);
    max-height: 165px;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(40,50,76,.2));
    transition: transform .24s ease;
}

.extension-card-premium:hover .extension-cover img {
    transform: scale(1.045) rotate(-1deg);
}

.extension-cover-code {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 112px;
    height: 112px;
    align-items: center;
    justify-content: center;
    color: var(--tcgp-ink);
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 50%;
    box-shadow: 0 16px 34px rgba(42,52,80,.14);
    font-size: 28px;
    font-weight: 950;
}

.extension-code-badge {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 16px;
    padding: 7px 10px;
    color: var(--tcgp-ink);
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    backdrop-filter: blur(10px);
}

.extension-card-premium .extension-card-content {
    display: flex;
    padding: 24px;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
}

.extension-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.extension-title-row > div:first-child {
    min-width: 0;
}

.extension-card-premium h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.16;
}

.extension-card-premium h2 a {
    display: block;
    color: var(--tcgp-ink);
    white-space: normal;
}

.extension-icon {
    display: flex;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px;
    background: linear-gradient(145deg, #fff, #f1f4fb);
    border: 1px solid #e5e9f2;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(45,56,84,.11);
}

.extension-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.extension-meta-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 10px;
    margin: 23px 0;
}

.extension-meta-grid > div {
    min-width: 0;
    padding: 13px 14px;
    background: #f7f8fb;
    border: 1px solid #e9ecf2;
    border-radius: 14px;
}

.extension-meta-grid span,
.extension-meta-grid strong {
    display: block;
}

.extension-meta-grid span {
    margin-bottom: 4px;
    color: var(--tcgp-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.extension-meta-grid strong {
    overflow-wrap: anywhere;
    color: var(--tcgp-ink);
    font-size: 14px;
    line-height: 1.3;
}

.extension-link-premium {
    display: flex !important;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    margin-top: auto !important;
    padding: 12px 15px;
    color: var(--tcgp-ink) !important;
    background: linear-gradient(135deg, rgba(255,216,77,.92), rgba(255,229,130,.92));
    border: 1px solid rgba(180,137,13,.12);
    border-radius: 13px;
    box-shadow: 0 10px 23px rgba(190,146,18,.15);
    font-size: 13px !important;
    font-weight: 900 !important;
}

.extension-link-premium b {
    font-size: 20px;
    transition: transform .18s ease;
}

.extension-link-premium:hover b {
    transform: translateX(4px);
}

@media (max-width: 1040px) {
    .extensions-hero-panel { grid-template-columns: 1fr; min-height: 0; }
    .extensions-hero-visual { display: none; }
    .extension-grid-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .extensions-hero { padding-top: 14px; }
    .extensions-hero-panel { padding: 28px 22px; border-radius: 22px; }
    .extensions-hero h1 { font-size: clamp(34px, 11vw, 48px); }
    .extensions-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
    .extensions-hero-stats > div:last-child:nth-child(3) { grid-column: 1 / -1; }
    .extensions-toolbar { align-items: flex-start; flex-direction: column; }
    .extensions-sort-buttons { justify-content: flex-start; }
    .extension-grid-premium { grid-template-columns: 1fr; gap: 18px; }
    .extension-cover { min-height: 210px; }
}

@media (max-width: 430px) {
    .extensions-hero-stats { grid-template-columns: 1fr; }
    .extensions-hero-stats > div:last-child:nth-child(3) { grid-column: auto; }
    .extension-card-premium .extension-card-content { padding: 20px; }
    .extension-title-row { gap: 10px; }
    .extension-icon { width: 58px; height: 58px; flex-basis: 58px; border-radius: 15px; }
    .extension-meta-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   PAGE EXTENSION : GRAND EMBLÈME + PROGRESSION PERSONNELLE
   À ajouter à la fin de global.css
   ========================================================= */

.extension-page .ext-hero-in{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,470px);
    align-items:center;
    gap:60px;
}

.extension-page .extension-hero-content{
    min-width:0;
}

.extension-page .extension-code{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 11px;
    margin:0 0 14px;
    border:1px solid rgba(15,23,42,.12);
    border-radius:999px;
    background:rgba(255,255,255,.68);
    color:#64748b;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.extension-page .extension-hero h1{
    margin:0 0 18px;
}

.extension-page .extension-catalog-count{
    display:flex;
    align-items:baseline;
    gap:7px;
    margin-top:22px;
    color:#64748b;
}

.extension-page .extension-catalog-count strong{
    color:#0f172a;
    font-size:1.15rem;
}

.extension-page .ext-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:320px;
    padding:28px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:30px;
    background:rgba(255,255,255,.62);
    box-shadow:0 20px 55px rgba(15,23,42,.10);
}

.extension-page .ext-logo img{
    display:block;
    width:100%;
    max-width:410px;
    max-height:280px;
    object-fit:contain;
}

.extension-progress-card{
    max-width:680px;
    margin-top:28px;
    padding:22px;
    border:1px solid rgba(37,99,235,.14);
    border-radius:22px;
    background:rgba(255,255,255,.88);
    box-shadow:0 16px 38px rgba(15,23,42,.08);
}

.extension-progress-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.extension-progress-head > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.extension-progress-head span{
    color:#64748b;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.extension-progress-head strong{
    color:#0f172a;
    font-size:2rem;
    line-height:1;
}

.extension-progress-head p{
    margin:0;
    color:#475569;
    font-weight:700;
}

.extension-progress-bar{
    height:12px;
    margin:18px 0 14px;
    overflow:hidden;
    border-radius:999px;
    background:#e2e8f0;
}

.extension-progress-bar span{
    display:block;
    height:100%;
    min-width:0;
    border-radius:inherit;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
}

.extension-progress-details{
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    color:#64748b;
    font-size:.92rem;
}

.extension-progress-details strong{
    color:#0f172a;
}

.extension-progress-login{
    max-width:680px;
    margin-top:28px;
    padding:22px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:22px;
    background:rgba(255,255,255,.78);
}

.extension-progress-login p{
    margin:6px 0 16px;
    color:#64748b;
}

@media (max-width:900px){
    .extension-page .ext-hero-in{
        grid-template-columns:1fr;
        gap:28px;
    }

    .extension-page .ext-logo{
        grid-row:1;
        min-height:220px;
        padding:22px;
    }

    .extension-page .ext-logo img{
        max-width:340px;
        max-height:200px;
    }
}

@media (max-width:600px){
    .extension-page .ext-logo{
        min-height:180px;
        border-radius:22px;
    }

    .extension-page .ext-logo img{
        max-height:160px;
    }

    .extension-progress-card{
        padding:18px;
        border-radius:18px;
    }

    .extension-progress-head{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .extension-progress-head strong{
        font-size:1.7rem;
    }
}


/* ==========================================================
   LISTE DES EXTENSIONS — ICÔNES PRINCIPALES
   ========================================================== */

.extensions-page .extension-main-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:190px;
    padding:20px;
    overflow:hidden;
}

.extensions-page .extension-main-icon img{
    display:block;
    width:auto;
    height:auto;
    max-width:88%;
    max-height:150px;
    object-fit:contain;
}

.extensions-page .extension-code{
    display:inline-flex;
    width:auto;
    margin:0 0 8px;
    padding:4px 9px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:800;
    line-height:1;
}

@media (max-width:700px){
    .extensions-page .extension-main-icon{
        min-height:145px;
        padding:14px;
    }

    .extensions-page .extension-main-icon img{
        max-width:92%;
        max-height:115px;
    }
}

/* ==========================================================
   PAGE /extensions.html — PORTAIL COMPLET
   À placer tout en bas de global.css
   ========================================================== */

.extensions-portal{
    min-height:100vh;
    padding-bottom:80px;
    background:
        radial-gradient(circle at 4% 20%,rgba(37,218,255,.14),transparent 24%),
        radial-gradient(circle at 94% 24%,rgba(255,109,208,.15),transparent 25%),
        linear-gradient(180deg,#071538 0,#111d4b 320px,#f7f8ff 760px);
}

.extensions-portal .wrap{
    width:min(1420px,calc(100% - 44px));
    margin-inline:auto;
}

.extensions-portal-hero{
    padding:58px 0 34px;
    color:#fff;
}

.extensions-portal-hero-inner{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
}

.extensions-portal-kicker{
    margin:0 0 8px;
    color:#9ec8ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.extensions-portal-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(38px,5vw,66px);
    line-height:1;
    letter-spacing:-.05em;
}

.extensions-portal-lead{
    max-width:720px;
    margin:16px 0 0;
    color:rgba(255,255,255,.78);
    font-size:18px;
    line-height:1.65;
}

.extensions-login-button{
    flex:0 0 auto;
    background:#fff;
    color:#17234e;
}

.extensions-portal-content{
    padding-top:12px;
}

.extensions-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    margin-bottom:22px;
    color:#fff;
}

.extensions-toolbar > span{
    color:rgba(255,255,255,.6);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.extensions-toolbar nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
}

.extensions-toolbar a{
    display:inline-flex;
    min-height:42px;
    padding:0 18px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:13px;
    color:#fff;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
    transition:.2s ease;
}

.extensions-toolbar a:hover,
.extensions-toolbar a.is-active{
    border-color:transparent;
    background:linear-gradient(135deg,#4567ff,#8a36f3);
    box-shadow:0 9px 24px rgba(65,80,255,.3);
    transform:translateY(-1px);
}

.extensions-showcase-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.extension-showcase-card{
    position:relative;
    display:flex;
    min-width:0;
    overflow:hidden;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.82);
    border-radius:20px;
    background:#fff;
    box-shadow:
        0 18px 50px rgba(8,20,67,.14),
        0 0 0 1px color-mix(in srgb,var(--extension-primary) 12%,transparent);
    transition:transform .22s ease,box-shadow .22s ease;
}

.extension-showcase-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 26px 64px rgba(8,20,67,.2),
        0 0 0 2px color-mix(in srgb,var(--extension-primary) 45%,transparent);
}

.extension-showcase-card.is-complete::after{
    position:absolute;
    z-index:4;
    top:14px;
    right:14px;
    content:"Terminée";
    padding:6px 10px;
    border-radius:999px;
    background:#1fbd73;
    color:#fff;
    font-size:11px;
    font-weight:900;
    box-shadow:0 7px 18px rgba(31,189,115,.3);
}

.extension-showcase-visual{
    position:relative;
    display:flex;
    height:205px;
    overflow:hidden;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at center,color-mix(in srgb,var(--extension-secondary) 32%,#fff),transparent 58%),
        linear-gradient(135deg,color-mix(in srgb,var(--extension-primary) 22%,#eff3ff),#eef3ff);
}

.extension-showcase-visual::after{
    position:absolute;
    inset:0;
    content:"";
    box-shadow:inset 0 -35px 45px rgba(6,16,45,.08);
    pointer-events:none;
}

.extension-showcase-visual > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.extension-showcase-card:hover .extension-showcase-visual > img{
    transform:scale(1.035);
}

.extension-showcase-visual.has-no-visual span{
    color:var(--extension-primary);
    font-size:44px;
    font-weight:950;
    letter-spacing:-.05em;
}

.extension-showcase-corner-icon{
    position:absolute;
    z-index:3;
    right:14px;
    bottom:14px;
    display:flex;
    width:62px;
    height:62px;
    padding:8px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.88);
    border-radius:17px;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 24px rgba(8,20,67,.18);
    backdrop-filter:blur(8px);
}

.extension-showcase-corner-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.extension-showcase-body{
    display:flex;
    min-height:330px;
    padding:22px;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
}

.extension-showcase-code{
    display:inline-flex;
    min-height:25px;
    margin:-34px 0 12px;
    padding:0 11px;
    position:relative;
    z-index:4;
    align-items:center;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,var(--extension-primary),var(--extension-secondary));
    color:#fff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.04em;
    box-shadow:0 5px 13px color-mix(in srgb,var(--extension-primary) 35%,transparent);
}

.extension-showcase-body h2{
    width:100%;
    min-height:50px;
    margin:0 0 14px;
    font-size:19px;
    line-height:1.28;
    letter-spacing:-.025em;
}

.extension-showcase-body h2 a{
    color:#111d3f;
    text-decoration:none;
}

.extension-showcase-meta{
    display:grid;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:18px;
}

.extension-showcase-meta > div{
    padding:10px 11px;
    border-radius:12px;
    background:#f6f8fd;
}

.extension-showcase-meta span{
    display:block;
    margin-bottom:3px;
    color:#8992a9;
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
}

.extension-showcase-meta strong{
    display:block;
    color:#25304d;
    font-size:12px;
    line-height:1.35;
}

.extension-showcase-progress{
    width:100%;
    margin:0 0 18px;
    padding:13px;
    border:1px solid color-mix(in srgb,var(--extension-primary) 18%,#e7ebf5);
    border-radius:14px;
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--extension-primary) 7%,#fff),
        #fff
    );
}

.extension-showcase-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.extension-showcase-progress-head span{
    color:#65708a;
    font-size:11px;
    font-weight:850;
}

.extension-showcase-progress-head strong{
    color:var(--extension-primary);
    font-size:16px;
}

.extension-showcase-progress-bar{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#e7eaf2;
}

.extension-showcase-progress-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--extension-primary),var(--extension-secondary));
}

.extension-showcase-progress-copy{
    display:flex;
    margin-top:8px;
    flex-wrap:wrap;
    gap:5px 11px;
    color:#7a849d;
    font-size:10px;
    font-weight:750;
}

.extension-showcase-progress-copy strong{
    color:#26304c;
}

.extension-showcase-button{
    display:flex;
    width:100%;
    min-height:44px;
    margin-top:auto;
    padding:0 15px;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid color-mix(in srgb,var(--extension-primary) 64%,#dce2ef);
    border-radius:12px;
    color:var(--extension-primary);
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    transition:.2s ease;
}

.extension-showcase-button:hover{
    background:linear-gradient(135deg,var(--extension-primary),var(--extension-secondary));
    color:#fff;
    box-shadow:0 9px 20px color-mix(in srgb,var(--extension-primary) 25%,transparent);
}

.extensions-empty{
    padding:40px;
    border-radius:20px;
    background:#fff;
    color:#68728b;
    text-align:center;
}

/* Neutralisation de l’ancien design horizontal */
.extensions-portal .extension-grid,
.extensions-portal .extension-card,
.extensions-portal .extension-img{
    all:unset;
}

@media (max-width:1200px){
    .extensions-showcase-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:900px){
    .extensions-portal-hero-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .extensions-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .extensions-toolbar nav{
        justify-content:flex-start;
    }

    .extensions-showcase-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px){
    .extensions-portal{
        padding-bottom:50px;
    }

    .extensions-portal .wrap{
        width:min(100% - 24px,1420px);
    }

    .extensions-portal-hero{
        padding:34px 0 25px;
    }

    .extensions-portal-hero h1{
        font-size:39px;
    }

    .extensions-portal-lead{
        font-size:15px;
    }

    .extensions-toolbar nav{
        display:grid;
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .extensions-toolbar a{
        width:100%;
        padding-inline:10px;
    }

    .extensions-showcase-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .extension-showcase-visual{
        height:190px;
    }

    .extension-showcase-body{
        min-height:0;
        padding:19px;
    }

    .extension-showcase-body h2{
        min-height:0;
    }
}


/* =========================================================
   PAGE EXTENSION — TABLEAU DE BORD COMPACT
========================================================= */

.extension-collection-page{
    padding-bottom:70px;
}

.extension-dashboard{
    padding:28px 0 22px;
    background:linear-gradient(180deg,#f7f9ff 0%,#fff 100%);
}

.extension-dashboard-card{
    overflow:hidden;
    border:1px solid rgba(66,88,145,.13);
    border-radius:22px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 48px rgba(31,42,68,.08);
}

.extension-dashboard-main{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);
    gap:34px;
    align-items:center;
    padding:24px 26px 20px;
}

.extension-dashboard-identity{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}

.extension-dashboard-icon{
    display:grid;
    flex:0 0 86px;
    width:86px;
    height:86px;
    place-items:center;
    padding:10px;
    border:1px solid rgba(68,87,136,.12);
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 25px rgba(37,49,78,.08);
}

.extension-dashboard-icon img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.extension-dashboard-code{
    display:inline-flex;
    margin-bottom:5px;
    color:#5c6b8c;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.extension-dashboard h1{
    margin:0;
    color:#17233f;
    font-size:clamp(2rem,4vw,3.25rem);
    line-height:1.02;
}

.extension-dashboard-description{
    max-width:720px;
    margin:9px 0 0;
    color:#5e687d;
    font-size:.95rem;
    line-height:1.55;
}

.extension-dashboard-progress{
    padding:17px 18px;
    border:1px solid rgba(85,104,164,.12);
    border-radius:16px;
    background:#f8faff;
}

.extension-dashboard-progress-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}

.extension-dashboard-progress-top span{
    color:#667085;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.extension-dashboard-progress-top strong{
    color:#283f91;
    font-size:1.35rem;
}

.extension-dashboard-progress-bar{
    height:10px;
    margin:11px 0 9px;
    overflow:hidden;
    border-radius:999px;
    background:#e5eaf5;
}

.extension-dashboard-progress-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#5168dc,#8b5cf6);
}

.extension-dashboard-progress p{
    margin:0;
    color:#59647b;
    font-size:.87rem;
}

.extension-dashboard-login{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:16px 18px;
    border-radius:16px;
    background:#f7f9fd;
}

.extension-dashboard-login span{
    color:#667085;
    font-size:.86rem;
}

.extension-dashboard-login a{
    margin-top:6px;
    font-weight:900;
}

.extension-dashboard-tools{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.75fr);
    gap:20px;
    align-items:center;
    padding:16px 26px;
    border-top:1px solid #edf0f5;
    background:#fbfcff;
}

.extension-dashboard-stats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.extension-dashboard-stats span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:8px 11px;
    color:#667085;
    border:1px solid #e5e9f1;
    border-radius:999px;
    background:#fff;
    font-size:.78rem;
}

.extension-dashboard-stats strong{
    color:#1d2a46;
    font-size:.9rem;
}

.extension-dashboard-search label{
    display:block;
    margin-bottom:6px;
    color:#56617a;
    font-size:.76rem;
    font-weight:850;
}

.extension-dashboard-search>div{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
}

.extension-dashboard-search input{
    min-width:0;
    height:42px;
    padding:0 14px;
    border:1px solid #dce2ec;
    border-radius:11px;
    background:#fff;
}

.extension-dashboard-search button{
    height:42px;
    padding:0 17px;
    border:0;
    border-radius:11px;
    background:#ffd84d;
    color:#17233f;
    font-weight:900;
    cursor:pointer;
}

.extension-dashboard-card.is-complete{
    border-color:rgba(209,158,22,.32);
    box-shadow:0 18px 48px rgba(181,135,13,.14);
}

.extension-dashboard-card.is-complete .extension-dashboard-progress-bar span{
    background:linear-gradient(90deg,#e4b52b,#ffd85a);
}

/* =========================================================
   FILTRES COLLECTION
========================================================= */

.extension-cards-section{
    padding:24px 0 0;
}

.extension-cards-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:15px;
}

.extension-cards-heading span{
    color:#65708a;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.extension-cards-heading h2{
    margin:4px 0 0;
}

.extension-cards-heading>strong{
    color:#5d6880;
    font-size:.88rem;
}

.extension-collection-filters{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:20px;
}

.extension-collection-filters button{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:8px 13px;
    color:#59647b;
    border:1px solid #dfe4ed;
    border-radius:999px;
    background:#fff;
    font-size:.82rem;
    font-weight:850;
    cursor:pointer;
}

.extension-collection-filters button span{
    display:grid;
    min-width:22px;
    height:22px;
    place-items:center;
    padding:0 6px;
    border-radius:999px;
    background:#eef1f6;
    font-size:.72rem;
}

.extension-collection-filters button:hover,
.extension-collection-filters button.is-active{
    color:#fff;
    border-color:#5067d8;
    background:#5067d8;
}

.extension-collection-filters button.is-active span,
.extension-collection-filters button:hover span{
    color:#31458f;
    background:#fff;
}

/* =========================================================
   ÉTAT DES CARTES DANS LA COLLECTION
========================================================= */

.card{
    position:relative;
}

.card[hidden]{
    display:none !important;
}

.card.is-missing .card-img img{
    filter:grayscale(.78) saturate(.32) brightness(.9);
    opacity:.72;
    transition:filter .22s ease,opacity .22s ease,transform .22s ease;
}

.card.is-missing:hover .card-img img{
    filter:grayscale(.28) saturate(.72) brightness(.98);
    opacity:.93;
}

.card.is-missing .card-body{
    opacity:.72;
}

.card-collection-badge{
    position:absolute;
    z-index:3;
    top:11px;
    left:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    min-height:28px;
    padding:5px 9px;
    border-radius:999px;
    box-shadow:0 8px 18px rgba(21,30,51,.18);
    font-size:.72rem;
    font-weight:950;
    line-height:1;
}

.card-collection-badge-missing{
    color:#fff;
    background:rgba(35,43,59,.84);
    backdrop-filter:blur(7px);
}

.card-collection-badge-owned{
    color:#155b38;
    background:rgba(224,250,235,.95);
    border:1px solid rgba(44,153,99,.18);
}

.card.is-owned{
    box-shadow:0 12px 30px rgba(46,142,90,.08);
}

.card.is-duplicate .card-collection-badge-owned{
    color:#56379a;
    background:rgba(239,232,255,.96);
    border-color:rgba(109,76,190,.18);
}

.extension-filter-empty{
    margin-top:18px;
}

@media(max-width:900px){
    .extension-dashboard-main,
    .extension-dashboard-tools{
        grid-template-columns:1fr;
    }

    .extension-dashboard-main{
        gap:20px;
    }
}

@media(max-width:620px){
    .extension-dashboard{
        padding-top:14px;
    }

    .extension-dashboard-card{
        border-radius:16px;
    }

    .extension-dashboard-main,
    .extension-dashboard-tools{
        padding:17px;
    }

    .extension-dashboard-identity{
        align-items:flex-start;
        gap:12px;
    }

    .extension-dashboard-icon{
        flex-basis:62px;
        width:62px;
        height:62px;
        border-radius:14px;
    }

    .extension-dashboard h1{
        font-size:2rem;
    }

    .extension-dashboard-description{
        font-size:.86rem;
    }

    .extension-dashboard-search>div{
        grid-template-columns:1fr;
    }

    .extension-dashboard-search button{
        width:100%;
    }

    .extension-cards-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .extension-collection-filters{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .extension-collection-filters button{
        justify-content:space-between;
        border-radius:11px;
    }
}


/* =========================================================
   CARTES — INFORMATIONS DE CATALOGUE
========================================================= */

.card .card-body {
    display: flex;
    min-height: 148px;
    padding: 17px 18px 18px;
    flex-direction: column;
}

.card-catalogue-meta {
    display: flex;
    min-width: 0;
    margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-catalogue-number {
    flex: 0 0 auto;
    color: #344054;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.card-catalogue-number.is-secret {
    padding: 4px 8px;
    color: #6f45b4;
    background: linear-gradient(
        135deg,
        rgba(129, 87, 194, .1),
        rgba(238, 102, 182, .1)
    );
    border: 1px solid rgba(129, 87, 194, .14);
    border-radius: 999px;
}

.card-catalogue-rarity {
    min-width: 0;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 750;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-catalogue-title {
    margin: 0;
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.card-catalogue-title a {
    color: #345fa5;
    text-decoration: none;
}

.card-catalogue-title a:hover {
    color: #243f76;
}

.card-catalogue-footer {
    display: flex;
    margin-top: auto;
    padding-top: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #475467;
    font-size: 13px;
}

.card-catalogue-secret-label {
    color: #8157c2;
    font-weight: 800;
}

@media (max-width: 620px) {
    .card .card-body {
        min-height: 128px;
        padding: 14px;
    }

    .card-catalogue-meta {
        margin-bottom: 8px;
    }

    .card-catalogue-title {
        font-size: 18px;
    }

    .card-catalogue-rarity {
        font-size: 11px;
    }

    .card-catalogue-number {
        font-size: 12px;
    }
}

/* =========================================================
   GRILLE CARTES — MISE EN PAGE FINALE DES INFORMATIONS
   Ce bloc doit rester tout en bas du fichier.
========================================================= */

.card .card-body,
.card-body-reworked {
    display: flex !important;
    min-height: 0 !important;
    padding: 14px 15px 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.card-title-reworked,
.card .card-catalogue-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 17px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.card-title-reworked a,
.card .card-catalogue-title a {
    display: block !important;
    overflow: hidden !important;
    color: #345fa5 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.card-meta-reworked {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
}

.card-number-reworked,
.card-catalogue-number {
    display: block !important;
    flex: 0 0 auto !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.card-icons-reworked,
.card-catalogue-icons {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow: hidden !important;
}

.card-energy-svg,
.card-icons-reworked img[src*="/icones-type/"] {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.card-rarity-icons {
    display: inline-flex !important;
    width: auto !important;
    max-width: 62px !important;
    height: 14px !important;
    min-height: 14px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    flex: 0 1 auto !important;
}

.card-rarity-svg,
.card-icons-reworked img[src*="/icones-rarete/"] {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 62px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    flex: 0 1 auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.card-hp-reworked,
.card-catalogue-hp {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    justify-self: end !important;
    color: #9b2731 !important;
    white-space: nowrap !important;
}

.card-hp-reworked strong,
.card-catalogue-hp strong {
    font-size: 14px !important;
    line-height: 1 !important;
}

.card-hp-reworked small,
.card-catalogue-hp small {
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
}

@media (max-width: 620px) {
    .card .card-body,
    .card-body-reworked {
        padding: 11px 10px 12px !important;
        gap: 8px !important;
    }

    .card-title-reworked,
    .card .card-catalogue-title {
        font-size: 14px !important;
    }

    .card-meta-reworked {
        gap: 6px !important;
    }

    .card-number-reworked,
    .card-catalogue-number {
        font-size: 9px !important;
    }

    .card-energy-svg,
    .card-icons-reworked img[src*="/icones-type/"] {
        width: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        flex-basis: 14px !important;
    }

    .card-rarity-icons {
        max-width: 50px !important;
        height: 12px !important;
        min-height: 12px !important;
    }

    .card-rarity-svg,
    .card-icons-reworked img[src*="/icones-rarete/"] {
        max-width: 50px !important;
        height: 11px !important;
        min-height: 11px !important;
        max-height: 11px !important;
    }
}

/* =========================================================
   GRILLE CARTES — DESIGN COMPACT SANS GROS BLOCS BLANCS
   ========================================================= */
.catalogue-card-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:24px 18px !important;
    align-items:start !important;
}

.catalogue-card-tile{
    position:relative !important;
    min-width:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    transition:transform .2s ease !important;
}

.catalogue-card-tile:hover{
    transform:translateY(-5px) !important;
    box-shadow:none !important;
}

.catalogue-card-visual{
    position:relative !important;
    display:block !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#eef1f6 !important;
    border:1px solid rgba(28,39,65,.10) !important;
    border-radius:16px !important;
    box-shadow:0 10px 24px rgba(31,42,68,.12) !important;
}

.catalogue-card-visual > img:first-child{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:367 / 512 !important;
    object-fit:cover !important;
    border-radius:0 !important;
    background:transparent !important;
    filter:none !important;
    transition:transform .2s ease,filter .2s ease,opacity .2s ease !important;
}

.catalogue-card-tile:hover .catalogue-card-visual > img:first-child{
    transform:scale(1.018) !important;
}

.catalogue-card-number{
    position:absolute !important;
    z-index:4 !important;
    left:9px !important;
    bottom:9px !important;
    display:inline-flex !important;
    align-items:center !important;
    min-height:25px !important;
    padding:4px 8px !important;
    color:#17233f !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(255,255,255,.9) !important;
    border-radius:8px !important;
    box-shadow:0 5px 14px rgba(20,29,48,.16) !important;
    backdrop-filter:blur(8px) !important;
    font-size:11px !important;
    font-weight:950 !important;
    line-height:1 !important;
    white-space:nowrap !important;
}

.catalogue-card-number.is-secret{
    color:#6b3aa8 !important;
    background:rgba(250,244,255,.96) !important;
}

.catalogue-card-icons{
    position:absolute !important;
    z-index:4 !important;
    right:9px !important;
    bottom:9px !important;
    display:inline-flex !important;
    min-height:25px !important;
    padding:4px 7px !important;
    align-items:center !important;
    gap:5px !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(255,255,255,.9) !important;
    border-radius:8px !important;
    box-shadow:0 5px 14px rgba(20,29,48,.16) !important;
    backdrop-filter:blur(8px) !important;
}

.catalogue-card-icons .card-energy-svg{
    display:block !important;
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    object-fit:contain !important;
    border-radius:0 !important;
}

.catalogue-card-icons .card-rarity-svg{
    display:block !important;
    width:auto !important;
    max-width:48px !important;
    height:12px !important;
    min-height:12px !important;
    max-height:12px !important;
    object-fit:contain !important;
    border-radius:0 !important;
}

.catalogue-card-info,
.catalogue-card-tile .card-body{
    position:relative !important;
    display:flex !important;
    min-height:0 !important;
    padding:11px 4px 0 !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    background:transparent !important;
    opacity:1 !important;
}

.catalogue-card-title,
.catalogue-card-tile .card-catalogue-title{
    min-width:0 !important;
    margin:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
}

.catalogue-card-title a,
.catalogue-card-tile .card-catalogue-title a{
    display:block !important;
    overflow:hidden !important;
    color:#315d9e !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.catalogue-card-hp,
.catalogue-card-tile .card-catalogue-hp{
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:baseline !important;
    gap:2px !important;
    color:#a33242 !important;
}

.catalogue-card-hp strong{
    font-size:13px !important;
}

.catalogue-card-hp small{
    font-size:8px !important;
    font-weight:900 !important;
}

.catalogue-card-secret{
    position:absolute !important;
    top:-20px !important;
    right:4px !important;
    padding:2px 6px !important;
    color:#7348a9 !important;
    background:#f5edff !important;
    border-radius:999px !important;
    font-size:9px !important;
    font-weight:900 !important;
}

.catalogue-card-tile .card-collection-badge{
    top:9px !important;
    left:9px !important;
}

.catalogue-card-tile.is-missing .catalogue-card-visual > img:first-child{
    filter:grayscale(.72) saturate(.4) brightness(.92) !important;
    opacity:.72 !important;
}

.catalogue-card-tile.is-missing:hover .catalogue-card-visual > img:first-child{
    filter:grayscale(.25) saturate(.8) brightness(.98) !important;
    opacity:.94 !important;
}

@media(max-width:1080px){
    .catalogue-card-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}

@media(max-width:820px){
    .catalogue-card-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:20px 14px !important;}
}

@media(max-width:580px){
    .catalogue-card-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px 10px !important;}
    .catalogue-card-visual{border-radius:12px !important;}
    .catalogue-card-number{left:6px !important;bottom:6px !important;padding:4px 6px !important;font-size:9px !important;}
    .catalogue-card-icons{right:6px !important;bottom:6px !important;padding:4px 5px !important;}
    .catalogue-card-title,.catalogue-card-tile .card-catalogue-title{font-size:13px !important;}
    .catalogue-card-info,.catalogue-card-tile .card-body{padding-top:8px !important;}
}


/* =========================================================
   ESPACE MEMBRE — CSS ISOLÉ
   À ajouter tout en bas de global.css.
   Toutes les règles sont limitées à .member-dashboard-page.
========================================================= */

/* ESPACE MEMBRE UNIQUEMENT — à coller tout en bas de global.css */
.member-dashboard-page{--md-ink:#17233f;--md-muted:#748098;--md-blue:#536fd8;--md-purple:#7b55e7;--md-yellow:#ffd84d;padding:0 0 72px}
.member-dashboard-page .member-dashboard-hero{padding:44px 0 28px}
.member-dashboard-page .member-dashboard-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:52px;align-items:center}
.member-dashboard-page .member-dashboard-kicker{margin:0 0 8px;color:#5d72a8;font-size:11px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.member-dashboard-page h1{margin:0 0 14px;font-size:clamp(42px,6vw,68px)}
.member-dashboard-page .member-dashboard-lead{max-width:650px;color:#43506a;font-size:17px}
.member-dashboard-page .member-dashboard-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}
.member-dashboard-page .member-dashboard-button{display:inline-flex;min-height:48px;padding:11px 20px;align-items:center;justify-content:center;border-radius:12px;font-size:14px;font-weight:900}
.member-dashboard-page .member-dashboard-button-primary{color:#fff;background:linear-gradient(135deg,var(--md-blue),var(--md-purple));box-shadow:0 14px 30px rgba(83,111,216,.25)}
.member-dashboard-page .member-dashboard-button-secondary{color:#45516a;background:#eef1f6}
.member-dashboard-page .member-dashboard-global-card{padding:29px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.98);border-radius:25px;box-shadow:0 22px 60px rgba(39,51,81,.13)}
.member-dashboard-page .member-dashboard-global-head,.member-dashboard-page .member-dashboard-priority-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.member-dashboard-page .member-dashboard-global-head span,.member-dashboard-page .member-dashboard-priority-head span,.member-dashboard-page .member-dashboard-stat-grid span,.member-dashboard-page .member-dashboard-extension-copy>span,.member-dashboard-page .member-dashboard-extension-progress span,.member-dashboard-page .member-dashboard-footer-stats span{color:var(--md-muted);font-size:11px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.member-dashboard-page .member-dashboard-global-head strong{display:block;margin-top:5px;font-size:50px;line-height:1}
.member-dashboard-page .member-dashboard-status{padding:6px 9px;color:#2d6b4e!important;background:#e7f8ef;border-radius:999px}
.member-dashboard-page .member-dashboard-progress{height:9px;overflow:hidden;background:#e7ebf3;border-radius:999px}
.member-dashboard-page .member-dashboard-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--md-blue),var(--md-purple));border-radius:inherit}
.member-dashboard-page .member-dashboard-global-card>.member-dashboard-progress{height:12px;margin:22px 0 11px}
.member-dashboard-page .member-dashboard-global-card>p{margin:0;color:var(--md-muted);font-size:13px}
.member-dashboard-page .member-dashboard-content{padding-top:12px}
.member-dashboard-page .member-dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:44px}
.member-dashboard-page .member-dashboard-stat-grid article{padding:20px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.96);border-radius:17px;box-shadow:0 10px 30px rgba(43,54,83,.07)}
.member-dashboard-page .member-dashboard-stat-grid strong{display:block;margin-top:7px;font-size:29px}
.member-dashboard-page .member-dashboard-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.member-dashboard-page .member-dashboard-section-head h2{margin:0;font-size:clamp(26px,3vw,36px)}
.member-dashboard-page .member-dashboard-section-head>span{color:var(--md-muted);font-size:13px;font-weight:800}
.member-dashboard-page .member-dashboard-priority-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.member-dashboard-page .member-dashboard-priority-card{overflow:hidden;background:#fff;border:1px solid rgba(45,58,91,.09);border-radius:20px;box-shadow:0 14px 38px rgba(43,53,81,.11)}
.member-dashboard-page .member-dashboard-priority-visual{display:flex;height:150px;align-items:center;justify-content:center;overflow:hidden;background:#eef2fb}
.member-dashboard-page .member-dashboard-priority-visual img{width:100%;height:100%;object-fit:cover}
.member-dashboard-page .member-dashboard-priority-visual span{font-size:26px;font-weight:950}
.member-dashboard-page .member-dashboard-priority-body{padding:17px}
.member-dashboard-page .member-dashboard-priority-head strong{font-size:18px}
.member-dashboard-page .member-dashboard-priority-card h3{margin:7px 0 13px;font-size:18px}
.member-dashboard-page .member-dashboard-priority-card h3 a{color:var(--md-ink)}
.member-dashboard-page .member-dashboard-priority-card p{margin:10px 0 12px;color:var(--md-muted);font-size:12px}
.member-dashboard-page .member-dashboard-card-link{font-size:12px;font-weight:900}
.member-dashboard-page .member-dashboard-all{margin-top:52px}
.member-dashboard-page .member-dashboard-extension-list{display:grid;gap:10px}
.member-dashboard-page .member-dashboard-extension-row{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(220px,.7fr) 42px;gap:16px;align-items:center;padding:13px;background:rgba(255,255,255,.9);border:1px solid rgba(45,58,91,.09);border-radius:16px;box-shadow:0 8px 24px rgba(43,54,83,.06)}
.member-dashboard-page .member-dashboard-extension-image{display:flex;width:92px;height:66px;align-items:center;justify-content:center;overflow:hidden;background:#f2f4f9;border-radius:12px}
.member-dashboard-page .member-dashboard-extension-image img{max-width:82%;max-height:78%;object-fit:contain}
.member-dashboard-page .member-dashboard-extension-image span{font-size:16px;font-weight:950}
.member-dashboard-page .member-dashboard-extension-copy h3{margin:2px 0 4px;font-size:17px}
.member-dashboard-page .member-dashboard-extension-copy h3 a{color:var(--md-ink)}
.member-dashboard-page .member-dashboard-extension-copy p{margin:0;color:var(--md-muted);font-size:12px}
.member-dashboard-page .member-dashboard-extension-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.member-dashboard-page .member-dashboard-extension-progress strong{font-size:16px}
.member-dashboard-page .member-dashboard-extension-arrow{display:grid;width:38px;height:38px;place-items:center;border-radius:10px;background:#eef2fb;font-size:20px;font-weight:900}
.member-dashboard-page .member-dashboard-footer-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.member-dashboard-page .member-dashboard-footer-stats div{padding:18px;text-align:center;background:rgba(255,255,255,.76);border-radius:15px}
.member-dashboard-page .member-dashboard-footer-stats strong{display:block;margin-top:4px;font-size:24px}
@media(max-width:1050px){.member-dashboard-page .member-dashboard-priority-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.member-dashboard-page .member-dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.member-dashboard-page .member-dashboard-extension-row{grid-template-columns:78px minmax(0,1fr) minmax(180px,.7fr) 40px}.member-dashboard-page .member-dashboard-extension-image{width:78px;height:60px}}
@media(max-width:820px){.member-dashboard-page .member-dashboard-hero-grid{grid-template-columns:1fr}.member-dashboard-page .member-dashboard-extension-row{grid-template-columns:72px minmax(0,1fr) 38px}.member-dashboard-page .member-dashboard-extension-progress{grid-column:2 / 4}.member-dashboard-page .member-dashboard-extension-image{width:72px;height:58px}}
@media(max-width:580px){.member-dashboard-page .member-dashboard-hero{padding-top:27px}.member-dashboard-page h1{font-size:40px}.member-dashboard-page .member-dashboard-actions{flex-direction:column}.member-dashboard-page .member-dashboard-button{width:100%}.member-dashboard-page .member-dashboard-stat-grid,.member-dashboard-page .member-dashboard-priority-grid,.member-dashboard-page .member-dashboard-footer-stats{grid-template-columns:1fr}.member-dashboard-page .member-dashboard-priority-visual{height:135px}.member-dashboard-page .member-dashboard-extension-row{grid-template-columns:60px minmax(0,1fr) 34px;gap:10px;padding:10px}.member-dashboard-page .member-dashboard-extension-image{width:60px;height:50px}.member-dashboard-page .member-dashboard-extension-copy h3{font-size:15px}.member-dashboard-page .member-dashboard-extension-progress{grid-column:1 / -1}.member-dashboard-page .member-dashboard-extension-arrow{width:34px;height:34px}}


.hero h1,
.extension-dashboard h1,
.cards-new-hero h1{
    font-weight:800;
    letter-spacing:-0.04em;
}

/* =========================================================
   FICHE CARTE — SWIPE MOBILE PRÉCÉDENTE / SUIVANTE
========================================================= */
.card-swipe-zone {
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}

.card-swipe-stage {
    position: relative;
    z-index: 2;
    will-change: transform, opacity;
    transform-origin: 50% 82%;
}

.card-swipe-stage.is-resetting {
    transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}

.card-swipe-stage.is-leaving {
    pointer-events: none;
    transition: transform .22s cubic-bezier(.4,0,.85,.35), opacity .18s ease;
}

.card-swipe-feedback {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    color: #33415f;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(95,130,217,.16);
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(31,42,68,.12);
    font-size: 11px;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.88);
    transition: opacity .15s ease, transform .15s ease;
    backdrop-filter: blur(10px);
}

.card-swipe-feedback.is-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.card-swipe-feedback-previous {
    left: 10px;
}

.card-swipe-feedback-next {
    right: 10px;
}

.card-swipe-feedback b {
    font-size: 15px;
    line-height: 1;
}

.card-swipe-hint {
    display: none;
    margin: 11px 0 -4px;
    color: var(--tcgp-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 820px) and (pointer: coarse) {
    .card-swipe-zone {
        position: relative;
    }

    .card-swipe-hint {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-swipe-stage,
    .card-swipe-feedback {
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   CORRECTION FICHE CARTE MOBILE
   Navigation rapprochée + suppression de tout chevauchement
========================================================= */
@media (max-width: 820px) {
    .tcgp-page {
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .detail {
        padding-bottom: 36px;
    }

    .breadcrumb {
        margin-bottom: 14px;
    }

    .card-navigation {
        margin: 0 0 12px;
        gap: 8px;
    }

    .detail-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .detail-img,
    .detail-img.card-swipe-zone {
        position: relative !important;
        top: auto !important;
        width: 100%;
        max-width: 440px;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto;
        padding: 14px;
        align-self: center;
        overflow: hidden;
    }

    .card-swipe-stage {
        display: block;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
    }

    .detail-img img,
    .card-swipe-stage img {
        display: block;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        margin: 0;
        object-fit: contain;
    }

    .card-swipe-hint {
        margin: 9px 0 0;
    }

    .detail-info {
        position: relative;
        z-index: 1;
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 580px) {
    .tcgp-page {
        padding-top: 16px;
    }

    .breadcrumb {
        gap: 5px;
        margin-bottom: 11px;
        font-size: 12px;
    }

    .card-navigation {
        margin-bottom: 10px;
    }

    .card-navigation-link {
        min-height: 54px;
        padding: 9px 10px;
    }

    .detail-grid {
        gap: 12px;
    }

    .detail-img,
    .detail-img.card-swipe-zone {
        padding: 10px;
        border-radius: 20px;
    }

    .detail-img img,
    .card-swipe-stage img {
        border-radius: 13px;
    }

    .detail-info {
        padding: 20px 16px;
        border-radius: 18px;
    }
}

.collection-bulk-toolbar{
    margin:0 0 18px;
    padding:14px 16px;
    background:#fff;
    border:1px solid rgba(45,58,91,.12);
    border-radius:18px;
    box-shadow:0 12px 32px rgba(31,42,68,.09);
}
.collection-bulk-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.collection-bulk-main>div:first-child{display:flex;flex-direction:column;gap:2px}
.collection-bulk-main strong{font-size:15px;color:#17233f}
.collection-bulk-main span{font-size:13px;color:#6e7890}
.collection-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.collection-bulk-actions button{min-height:40px;padding:9px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.collection-bulk-secondary{color:#273450;background:#f4f6fa;border:1px solid #dfe4ed}
.collection-bulk-add{color:#fff;background:#273450;border:1px solid #273450}
.collection-bulk-add:disabled{opacity:.45;cursor:not-allowed}
.collection-bulk-feedback{min-height:0;margin-top:6px;font-size:13px;font-weight:700;color:#27845a}
.collection-card-selector{
    width:100%;
    min-height:34px;
    margin:7px 0 2px;
    padding:6px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:#4f5c74;
    background:#f4f6fa;
    border:1px solid #dfe4ed;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.collection-card-selector:hover{background:#e9edf5;border-color:#cbd2df;color:#273450}
.collection-card-selector:active{transform:translateY(1px)}
.collection-card-selector[aria-pressed="true"]{color:#fff;background:#273450;border-color:#273450}
.collection-add-plus{font-size:17px;font-weight:800;line-height:1}
.catalogue-card-tile.is-collection-selected .catalogue-card-visual{outline:3px solid #273450;outline-offset:2px;border-radius:inherit}
@media(max-width:760px){
    .collection-bulk-main{align-items:flex-start;flex-direction:column}
    .collection-bulk-actions{width:100%;justify-content:stretch}
    .collection-bulk-actions button{flex:1 1 auto}
    .collection-bulk-add{flex-basis:100%!important}
}

/* =========================================================
   Collection rapide V8 - barre toujours accessible
========================================================= */
.collection-bulk-toolbar{
    position:sticky;
    top:92px;
    z-index:900;
    margin:0 0 18px;
    box-shadow:0 12px 32px rgba(31,42,68,.12);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
.collection-bulk-add{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
}
@media(max-width:760px){
    .collection-bulk-toolbar{
        top:80px;
        padding:11px 12px;
        border-radius:14px;
    }
    .collection-bulk-main{gap:10px}
    .collection-bulk-main>div:first-child{display:none}
    .collection-bulk-actions{gap:6px}
    .collection-bulk-actions button{min-height:38px;padding:8px 10px;font-size:13px}
}

/* Collection progression V9 */
.extension-progress-goal + .extension-progress-goal{margin-top:16px;padding-top:16px;border-top:1px solid rgba(85,104,164,.12)}
.extension-progress-goal.is-complete .extension-dashboard-progress-bar span{background:linear-gradient(90deg,#22a06b,#65c466)}
.extension-progress-congrats{margin-top:8px!important;color:#16784b!important;font-weight:800}
.extension-progress-congrats[hidden]{display:none!important}