* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        :root {

            --black: #01030A;
            --blue-black: #020713;
            --blue-dark: #041126;
            --blue: #071A36;

            --gold-shadow: #806217;
            --gold-dark: #A88322;
            --gold: #C6A23A;
            --gold-light: #E4C96A;
            --gold-white: #F5E7AE;

            --white: #FFFFFF;
            --text: #E9EBF0;
            --muted: #9299A7;

            --success: #43D17A;
            --warning: #F2B84B;
            --danger: #EF6262;

            --page-bg: var(--black);
            --header-bg: rgba(1, 3, 10, 0.82);
            --card-start: rgba(7, 26, 54, 0.94);
            --card-end: rgba(2, 7, 19, 0.96);

            --soft-bg: rgba(255, 255, 255, 0.025);
            --soft-bg-hover: rgba(255, 255, 255, 0.038);

            --border-soft: rgba(255, 255, 255, 0.055);
            --border-medium: rgba(255, 255, 255, 0.09);

            --input-bg: rgba(1, 3, 10, 0.65);

            --shadow-card:
                0 30px 80px rgba(0, 0, 0, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.025);
        }


        /* =========================================================
           MODE CLAIR DIGISCALE-PRO
        ========================================================= */

        html.theme-light {

            --page-bg: #EEF1F6;
            --header-bg: rgba(238, 241, 246, 0.90);

            --text: #071A36;
            --muted: #667085;

            --card-start: #E8ECF3;
            --card-end: #EEF1F6;

            --soft-bg: rgba(255, 255, 255, 0.42);
            --soft-bg-hover: rgba(255, 255, 255, 0.64);

            --border-soft: rgba(7, 26, 54, 0.09);
            --border-medium: rgba(7, 26, 54, 0.13);

            --input-bg: #DDE3EC;

            --shadow-card:
                0 22px 55px rgba(4, 17, 38, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.72);
        }


        html {
            color-scheme: dark;
        }


        html.theme-light {
            color-scheme: light;
        }


        body {

            min-height: 100vh;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            color: var(--text);

            background:

                radial-gradient(
                    circle at 15% 10%,
                    rgba(198, 162, 58, 0.08),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 85% 15%,
                    rgba(7, 26, 54, 0.95),
                    transparent 38%
                ),

                radial-gradient(
                    circle at 50% 100%,
                    rgba(128, 98, 23, 0.07),
                    transparent 35%
                ),

                var(--page-bg);

            overflow-x: hidden;

            transition:
                background 0.35s ease,
                color 0.35s ease;
        }


        html.theme-light body {

            background:

                radial-gradient(
                    circle at 12% 8%,
                    rgba(198, 162, 58, 0.10),
                    transparent 27%
                ),

                radial-gradient(
                    circle at 88% 12%,
                    rgba(7, 26, 54, 0.08),
                    transparent 34%
                ),

                radial-gradient(
                    circle at 50% 100%,
                    rgba(198, 162, 58, 0.07),
                    transparent 32%
                ),

                linear-gradient(
                    135deg,
                    #F4F6FA,
                    #EEF1F6 55%,
                    #E8ECF3
                );
        }


        body::before {

            content: "";

            position: fixed;

            inset: 0;

            pointer-events: none;

            background:

                linear-gradient(
                    rgba(255, 255, 255, 0.012) 1px,
                    transparent 1px
                ),

                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.012) 1px,
                    transparent 1px
                );

            background-size: 70px 70px;

            mask-image:
                linear-gradient(
                    to bottom,
                    black,
                    transparent 80%
                );

            opacity: 0.65;
        }


        html.theme-light body::before {

            background:

                linear-gradient(
                    rgba(7, 26, 54, 0.018) 1px,
                    transparent 1px
                ),

                linear-gradient(
                    90deg,
                    rgba(7, 26, 54, 0.018) 1px,
                    transparent 1px
                );

            opacity: 0.45;
        }


        a {
            color: inherit;
            text-decoration: none;
        }


        button,
        input {
            font-family: inherit;
        }


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

        header {

            position: sticky;

            top: 0;

            z-index: 100;

            width: 100%;

            background: var(--header-bg);

            backdrop-filter: blur(18px);

            border-bottom:
                1px solid rgba(198, 162, 58, 0.12);

            box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.20);

            transition:
                background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
        }


        html.theme-light header {

            border-bottom:
                1px solid rgba(128, 98, 23, 0.14);

            box-shadow:
                0 12px 35px rgba(4, 17, 38, 0.07);
        }


        .header-inner {

            max-width: 1180px;

            margin: auto;

            padding: 17px 24px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;
        }


        .brand {

            display: flex;

            align-items: center;

            gap: 13px;
        }


        .brand-logo {

            width: 43px;
            height: 43px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-white),
                    var(--gold-light) 45%,
                    var(--gold)
                );

            color: #05080f;

            font-size: 14px;

            font-weight: 900;

            letter-spacing: 0.5px;

            box-shadow:
                0 0 25px rgba(198, 162, 58, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }


        .brand-text strong {

            display: block;

            color: var(--text);

            font-size: 16px;

            letter-spacing: 0.7px;
        }


        .brand-text span {

            display: block;

            margin-top: 3px;

            color: var(--gold-dark);

            font-size: 10px;

            font-weight: 700;

            letter-spacing: 1.5px;

            text-transform: uppercase;
        }


        .back-home {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            color: var(--muted);

            font-size: 13px;

            font-weight: 600;

            transition: 0.25s ease;
        }


        .back-home:hover {

            color: var(--gold-dark);

            transform: translateX(-2px);
        }


        /* =========================================================
           MAIN
        ========================================================= */

        main {

            position: relative;

            z-index: 1;

            max-width: 1080px;

            margin: auto;

            padding: 58px 24px 90px;
        }


        .page-intro {

            margin-bottom: 30px;
        }


        .eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 12px;

            color: var(--gold-dark);

            font-size: 11px;

            font-weight: 800;

            letter-spacing: 2.2px;

            text-transform: uppercase;
        }


        .eyebrow::before {

            content: "";

            width: 24px;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold)
                );
        }


        .page-intro h1 {

            color: var(--text);

            font-size:
                clamp(34px, 5vw, 52px);

            line-height: 1.04;

            letter-spacing: -1.2px;

            margin-bottom: 13px;
        }


        .page-intro h1 span {

            color: var(--gold-dark);
        }


        .page-intro p {

            max-width: 690px;

            color: var(--muted);

            font-size: 14px;

            line-height: 1.75;
        }


        /* =========================================================
           CARTES
        ========================================================= */

        .profile-card,
        .settings-card,
        .payments-card {

            position: relative;

            overflow: hidden;

            background:
                linear-gradient(
                    145deg,
                    var(--card-start),
                    var(--card-end)
                );

            border:
                1px solid rgba(198, 162, 58, 0.17);

            border-radius: 26px;

            padding: 32px;

            box-shadow: var(--shadow-card);

            margin-bottom: 24px;

            transition:
                background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
        }


        html.theme-light .profile-card,
        html.theme-light .settings-card,
        html.theme-light .payments-card {

            border-color:
                rgba(128, 98, 23, 0.16);
        }


        .profile-card::before,
        .settings-card::before,
        .payments-card::before {

            content: "";

            position: absolute;

            top: 0;

            left: 7%;

            right: 7%;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold),
                    transparent
                );

            opacity: 0.8;
        }


        /* =========================================================
           PROFIL
        ========================================================= */

        .profile-top {

            position: relative;

            z-index: 2;

            display: flex;

            align-items: center;

            gap: 21px;

            padding-bottom: 28px;

            border-bottom:
                1px solid var(--border-soft);

            margin-bottom: 27px;
        }

.avatar-wrapper {

    position: relative;

    width: 88px;
    height: 88px;

    flex-shrink: 0;
}

        .avatar {

            position: relative;

            width: 88px;
            height: 88px;

            flex-shrink: 0;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background:
                linear-gradient(
                    145deg,
                    #0c2a55,
                    #050d1d
                );

            border:
                2px solid rgba(228, 201, 106, 0.60);

            color: var(--gold-white);

            font-size: 25px;

            font-weight: 900;

            letter-spacing: 1px;

            box-shadow:
                0 0 0 6px rgba(198, 162, 58, 0.035),
                0 0 35px rgba(198, 162, 58, 0.13),
                inset 0 0 25px rgba(0, 0, 0, 0.30);
        }


        .avatar {
            overflow: hidden;
            cursor: pointer;
        }


        .avatar img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
            z-index: 1;
        }


        .avatar::after {

            content: "";

            position: absolute;

            right: 2px;
            bottom: 5px;

            width: 15px;
            height: 15px;

            border-radius: 50%;

            background: var(--success);

            border: 3px solid #071426;

            box-shadow:
                0 0 12px rgba(67, 209, 122, 0.55);

            z-index: 3;
        }

.avatar-edit {

    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 2px solid var(--blue-black);

    background:
        linear-gradient(
            135deg,
            var(--gold-white),
            var(--gold-light),
            var(--gold)
        );

    color: #080b10;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(198, 162, 58, 0.18);

    z-index: 5;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.avatar-edit:hover {

    transform: scale(1.08);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(198, 162, 58, 0.28);
}


.avatar-edit:active {

    transform: scale(0.96);
}

        .profile-name {

            min-width: 0;
        }


        .profile-name h2 {

            color: var(--text);

            font-size: 27px;

            line-height: 1.15;

            margin-bottom: 8px;

            word-break: break-word;
        }


        .account-status {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            color: var(--success);

            font-size: 12px;

            font-weight: 700;
        }


        .status-dot {

            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: var(--success);

            box-shadow:
                0 0 10px rgba(67, 209, 122, 0.7);
        }


        /* =========================================================
           SECTION
        ========================================================= */

        .section-title {

            display: flex;

            align-items: center;

            gap: 10px;

            color: var(--text);

            font-size: 18px;

            margin-bottom: 17px;
        }


        .section-title::before {

            content: "";

            width: 3px;

            height: 19px;

            border-radius: 5px;

            background:
                linear-gradient(
                    var(--gold-light),
                    var(--gold-dark)
                );

            box-shadow:
                0 0 10px rgba(198, 162, 58, 0.25);
        }


        .info-grid {

            display: grid;

            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 13px;
        }


        .info-item {

            position: relative;

            padding: 19px;

            border-radius: 16px;

            background: var(--soft-bg);

            border:
                1px solid var(--border-soft);

            transition:
                border-color 0.25s ease,
                transform 0.25s ease,
                background 0.25s ease;
        }


        .info-item:hover {

            transform: translateY(-2px);

            background: var(--soft-bg-hover);

            border-color:
                rgba(198, 162, 58, 0.17);
        }


        .info-item span {

            display: block;

            color: var(--muted);

            font-size: 11px;

            font-weight: 600;

            margin-bottom: 8px;

            text-transform: uppercase;

            letter-spacing: 0.7px;
        }


        .info-item strong {

            display: block;

            color: var(--text);

            font-size: 14px;

            word-break: break-word;
        }


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

        .subscription-box {

            position: relative;

            overflow: hidden;

            margin-top: 29px;

            padding: 25px;

            border-radius: 21px;

            background:
                linear-gradient(
                    135deg,
                    rgba(198, 162, 58, 0.075),
                    rgba(7, 26, 54, 0.58)
                );

            border:
                1px solid rgba(198, 162, 58, 0.19);

            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.025);
        }


        html.theme-light .subscription-box {

            background:
                linear-gradient(
                    135deg,
                    rgba(247, 243, 230, 0.95),
                    rgba(232, 236, 243, 0.92)
                );

            border-color:
                rgba(128, 98, 23, 0.17);
        }


        .subscription-header {

            position: relative;

            z-index: 2;

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 15px;

            margin-bottom: 19px;
        }


        .subscription-header h3 {

            color: var(--text);

            font-size: 19px;
        }


        .premium-badge {

            display: inline-flex;

            align-items: center;
            justify-content: center;

            padding: 7px 13px;

            border-radius: 999px;

            background:
                rgba(67, 209, 122, 0.08);

            border:
                1px solid rgba(67, 209, 122, 0.22);

            color: var(--success);

            font-size: 11px;

            font-weight: 800;
        }


        .subscription-details {

            position: relative;

            z-index: 2;

            display: grid;

            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 11px;
        }


        .subscription-detail {

            padding: 16px;

            background:
                rgba(0, 0, 0, 0.20);

            border:
                1px solid rgba(255, 255, 255, 0.045);

            border-radius: 14px;
        }


        html.theme-light .subscription-detail {

            background:
                rgba(221, 227, 236, 0.78);

            border-color:
                rgba(7, 26, 54, 0.07);
        }


        .subscription-detail span {

            display: block;

            color: var(--muted);

            font-size: 10px;

            font-weight: 700;

            margin-bottom: 7px;

            text-transform: uppercase;

            letter-spacing: 0.7px;
        }


        .subscription-detail strong {

            color: var(--gold-white);

            font-size: 14px;
        }


        html.theme-light .subscription-detail strong {

            color: var(--blue-dark);
        }


        /* =========================================================
           ACTIONS
        ========================================================= */

        .actions {

            display: flex;

            flex-wrap: wrap;

            gap: 11px;

            margin-top: 25px;
        }


        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-height: 45px;

            padding: 12px 18px;

            border-radius: 12px;

            font-size: 12px;

            font-weight: 800;

            cursor: pointer;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease,
                background 0.2s ease;

            border: none;
        }


        .btn:hover {

            transform: translateY(-2px);
        }


        .btn-primary {

            color: #080b10;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-white),
                    var(--gold-light) 45%,
                    var(--gold)
                );

            box-shadow:
                0 9px 28px rgba(198, 162, 58, 0.14);
        }


        .btn-secondary {

            color: var(--text);

            background: var(--soft-bg);

            border:
                1px solid var(--border-medium);
        }


        .btn-danger {

            color: #ffb4b4;

            background:
                rgba(239, 98, 98, 0.055);

            border:
                1px solid rgba(239, 98, 98, 0.14);
        }


        /* =========================================================
           PARAMÈTRES DU PROFIL
        ========================================================= */

        .settings-card {

            margin-bottom: 24px;
        }


        .settings-intro {

            color: var(--muted);

            font-size: 12px;

            line-height: 1.7;

            margin-bottom: 24px;

            max-width: 700px;
        }


        .settings-grid {

            display: grid;

            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 18px;
        }


        .settings-box {

            padding: 22px;

            border-radius: 18px;

            background: var(--soft-bg);

            border:
                1px solid var(--border-soft);
        }


        html.theme-light .settings-box {

            background:
                linear-gradient(
                    145deg,
                    rgba(238, 241, 246, 0.94),
                    rgba(232, 236, 243, 0.94)
                );

            border-color:
                rgba(7, 26, 54, 0.08);
        }


        .settings-box h3 {

            color: var(--text);

            font-size: 16px;

            margin-bottom: 7px;
        }


        .settings-box > p {

            color: var(--muted);

            font-size: 11px;

            line-height: 1.6;

            margin-bottom: 19px;
        }


        .form-group {

            margin-bottom: 14px;
        }


        .form-group:last-child {

            margin-bottom: 0;
        }


        .form-group label {

            display: block;

            color: var(--muted);

            font-size: 10px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.7px;

            margin-bottom: 7px;
        }


        .form-group input {

            width: 100%;

            height: 45px;

            padding: 0 13px;

            color: var(--text);

            background: var(--input-bg);

            border:
                1px solid var(--border-medium);

            border-radius: 11px;

            outline: none;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.25s ease;
        }


        .form-group input:focus {

            border-color:
                rgba(198, 162, 58, 0.55);

            box-shadow:
                0 0 0 3px rgba(198, 162, 58, 0.07);
        }


        .form-group input::placeholder {

            color: #606776;
        }


        html.theme-light .form-group input::placeholder {

            color: #7A8392;
        }


        .form-group input[readonly] {

            color: var(--muted);

            cursor: not-allowed;

            background:
                rgba(255, 255, 255, 0.018);
        }


        html.theme-light .form-group input[readonly] {

            background:
                rgba(221, 227, 236, 0.65);
        }


        .form-actions {

            margin-top: 17px;

            display: flex;

            justify-content: flex-end;
        }


        .settings-btn {

            min-height: 42px;

            padding: 10px 16px;

            border-radius: 10px;

            color: #080b10;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-white),
                    var(--gold-light),
                    var(--gold)
                );

            border: none;

            font-size: 11px;

            font-weight: 800;

            cursor: pointer;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }


        .settings-btn:hover {

            transform: translateY(-2px);

            box-shadow:
                0 8px 25px rgba(198, 162, 58, 0.18);
        }


        .settings-btn:disabled {

            opacity: 0.55;

            cursor: wait;

            transform: none;
        }


        .form-message {

            display: none;

            margin-top: 13px;

            padding: 11px 13px;

            border-radius: 10px;

            font-size: 11px;

            line-height: 1.5;
        }


        .form-message.success {

            display: block;

            color: var(--success);

            background:
                rgba(67, 209, 122, 0.06);

            border:
                1px solid rgba(67, 209, 122, 0.16);
        }


        .form-message.error {

            display: block;

            color: var(--danger);

            background:
                rgba(239, 98, 98, 0.06);

            border:
                1px solid rgba(239, 98, 98, 0.16);
        }


        /* =========================================================
           PAYMENTS
        ========================================================= */

        .payments-header {

            display: flex;

            align-items: flex-start;

            justify-content: space-between;

            gap: 20px;

            margin-bottom: 22px;
        }


        .payments-header h2 {

            color: var(--text);

            font-size: 20px;

            margin-bottom: 7px;
        }


        .payments-header p {

            color: var(--muted);

            font-size: 12px;

            line-height: 1.65;
        }


        .payment-count {

            flex-shrink: 0;

            padding: 8px 12px;

            border-radius: 999px;

            background:
                rgba(198, 162, 58, 0.07);

            border:
                1px solid rgba(198, 162, 58, 0.16);

            color: var(--gold-dark);

            font-size: 11px;

            font-weight: 800;
        }


        .payments-list {

            display: flex;

            flex-direction: column;

            gap: 11px;
        }


        .payment-item {

            display: grid;

            grid-template-columns:
                minmax(130px, 1.2fr)
                minmax(100px, 0.8fr)
                minmax(90px, 0.7fr)
                minmax(110px, 0.9fr)
                minmax(115px, 0.9fr);

            align-items: center;

            gap: 14px;

            padding: 18px;

            border-radius: 16px;

            background: var(--soft-bg);

            border:
                1px solid var(--border-soft);

            transition:
                background 0.2s ease,
                border-color 0.2s ease;
        }


        .payment-item:hover {

            background: var(--soft-bg-hover);

            border-color:
                rgba(198, 162, 58, 0.16);
        }


        .payment-main strong {

            display: block;

            color: var(--text);

            font-size: 14px;

            margin-bottom: 5px;
        }


        .payment-main span {

            display: block;

            color: var(--muted);

            font-size: 10px;
        }


        .payment-field span {

            display: block;

            color: var(--muted);

            font-size: 9px;

            font-weight: 700;

            margin-bottom: 5px;

            text-transform: uppercase;

            letter-spacing: 0.65px;
        }


        .payment-field strong {

            color: var(--text);

            font-size: 12px;

            word-break: break-word;
        }


        .provider {

            display: inline-flex;

            align-items: center;

            padding: 6px 9px;

            border-radius: 8px;

            background:
                var(--soft-bg);

            border:
                1px solid var(--border-soft);

            color: var(--text);

            font-size: 11px;

            font-weight: 800;
        }


        .payment-status {

            display: inline-flex;

            align-items: center;

            width: fit-content;

            padding: 6px 10px;

            border-radius: 999px;

            font-size: 10px;

            font-weight: 800;
        }


        .status-success {

            color: var(--success);

            background:
                rgba(67, 209, 122, 0.075);

            border:
                1px solid rgba(67, 209, 122, 0.18);
        }


        .status-pending {

            color: var(--warning);

            background:
                rgba(242, 184, 75, 0.075);

            border:
                1px solid rgba(242, 184, 75, 0.18);
        }


        .status-failed {

            color: var(--danger);

            background:
                rgba(239, 98, 98, 0.075);

            border:
                1px solid rgba(239, 98, 98, 0.18);
        }


        .empty-payments {

            padding: 40px 20px;

            text-align: center;

            border-radius: 17px;

            background: var(--soft-bg);

            border:
                1px dashed var(--border-medium);
        }


        .empty-payments .icon {

            font-size: 30px;

            margin-bottom: 11px;
        }


        .empty-payments h3 {

            color: var(--text);

            font-size: 16px;

            margin-bottom: 7px;
        }


        .empty-payments p {

            color: var(--muted);

            font-size: 12px;

            line-height: 1.6;
        }


        .error-payments {

            padding: 18px;

            border-radius: 14px;

            color: var(--danger);

            background:
                rgba(239, 98, 98, 0.06);

            border:
                1px solid rgba(239, 98, 98, 0.14);

            font-size: 12px;
        }


        /* =========================================================
           LOADING
        ========================================================= */

        .loading {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            color: var(--muted);

            text-align: center;

            padding: 30px;

            font-size: 12px;
        }


        .loading::before {

            content: "";

            width: 13px;
            height: 13px;

            border-radius: 50%;

            border:
                2px solid rgba(198, 162, 58, 0.20);

            border-top-color:
                var(--gold-light);

            animation:
                spin 0.8s linear infinite;
        }


        @keyframes spin {

            to {
                transform: rotate(360deg);
            }
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 900px) {

            .payment-item {

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


            .payment-main {

                grid-column: 1 / -1;
            }


            .settings-grid {

                grid-template-columns: 1fr;
            }
        }

.avatar-edit {

    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 2px solid var(--blue-black);

    background:
        linear-gradient(
            135deg,
            var(--gold-white),
            var(--gold-light),
            var(--gold)
        );

    color: #080b10;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(198, 162, 58, 0.18);

    z-index: 5;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.avatar-edit:hover {

    transform: scale(1.08);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(198, 162, 58, 0.28);
}


.avatar-edit:active {

    transform: scale(0.96);
}

        @media (max-width: 680px) {

            .header-inner {

                padding: 14px 16px;
            }


            .brand-text span {

                display: none;
            }


            .brand-logo {

                width: 39px;
                height: 39px;
            }


            .brand-text strong {

                font-size: 14px;
            }


            main {

                padding:
                    42px 15px 65px;
            }


            .page-intro {

                margin-bottom: 24px;
            }


            .page-intro h1 {

                font-size: 35px;
            }


            .profile-card,
            .settings-card,
            .payments-card {

                padding: 20px;

                border-radius: 21px;
            }


            .profile-top {

                align-items: flex-start;
            }


            .avatar {

                width: 68px;
                height: 68px;

                font-size: 20px;
            }


            .avatar::after {

                width: 13px;
                height: 13px;

                right: 0;
                bottom: 3px;
            }


            .profile-name h2 {

                font-size: 21px;
            }


            .info-grid {

                grid-template-columns: 1fr;
            }


            .subscription-box {

                padding: 20px;
            }


            .subscription-header {

                align-items: flex-start;

                flex-direction: column;
            }


            .subscription-details {

                grid-template-columns: 1fr;
            }


            .payments-header {

                flex-direction: column;
            }


            .payment-count {

                align-self: flex-start;
            }


            .payment-item {

                grid-template-columns: 1fr;

                gap: 13px;
            }


            .payment-main {

                grid-column: auto;
            }


            .actions {

                flex-direction: column;
            }


            .btn {

                width: 100%;
            }


            .form-actions {

                justify-content: stretch;
            }


            .settings-btn {

                width: 100%;
            }
        }


        @media (max-width: 420px) {

            .back-home {

                font-size: 0;
            }


            .back-home::after {

                content: "Accueil";

                font-size: 12px;
            }


            .profile-top {

                gap: 15px;
            }


            .profile-card,
            .settings-card,
            .payments-card {

                padding: 17px;
            }
        }

        .avatar-edit {

    width: 26px;
    height: 26px;

    right: -3px;
    bottom: -3px;

    font-size: 12px;
}