/* EAFPS — My Account dashboard
 *
 * Layered ON TOP of forms-global.css : we get the input/checkbox/radio chrome
 * for free and only style the dashboard's own layout (sidebar nav, cards,
 * tables, badges). Designed to defeat Salient's woocommerce.css overrides
 * which : (1) add FontAwesome ::before icons before each nav link,
 * (2) set opacity:.4 on links, (3) split the layout in arbitrary widths,
 * (4) inherit the theme's UPPERCASE h2 styling.
 *
 * Specificity strategy : prefix every selector with `body.woocommerce-account`
 * (specificity 0,2,1) which matches or beats Salient's `.original .woocommerce
 * …` selectors. !important is used only where Salient also uses it.
 */

/* ── Reset Salient + WC defaults inside the account container ────────── */

body.woocommerce-account .woocommerce {
    --eafps-parme-tres-clair:      #F6F7FF;
    --eafps-parme-clair:           #E3E9F6;
    --eafps-contour-champs:        #DCE4F5;
    --eafps-parme:                 #7E93D8;
    --eafps-parme-fonce:           #4B61AA;
    --eafps-bleu-canard:           #128AA2;
    --eafps-bleu-turquoise-fonce:  #08AEC0;
    --eafps-bleu-turquoise:        #4BC1D0;
    --eafps-bg-canard:             #C4F6FD;
    --eafps-bg-parme:              #CFDBFF;
    --eafps-marine-fonce:          #272E47;
    --eafps-gris-fonce:            #4C4C4C;
    --eafps-gris-clair:            #949494;

    color: var(--eafps-gris-fonce);
    font-family: "Inter", inherit;
}

/* Grid layout (nav + content) is applied ONLY when the user is logged in —
 * otherwise WC renders the bare login form inside `.woocommerce` and the
 * 280px/1fr grid would cram it into the narrow column. Logged-out users get
 * the form's natural block layout, kept centered by .eafps-account__login. */
body.logged-in.woocommerce-account .woocommerce {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "notices notices"
        "nav     content";
    gap: 30px 50px;
    align-items: flex-start;
}

body.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
    grid-area: notices;
    margin: 0 !important;
}
body.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
    display: none;
}
body.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
    grid-area: nav;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
body.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    grid-area: content;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* ── Logged-out login form ──────────────────────────────────────────── */
/* Keep WC's login form centered (max-width box) so it doesn't sprawl
 * full-width and looks intentional. */
body.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 480px;
    margin: 0 auto;
}
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
    margin: 0 0 18px !important;
    font-family: "Butler", serif !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    color: var(--eafps-bleu-turquoise-fonce, #08AEC0) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left;
}
body.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-login {
    margin: 0;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--eafps-parme-clair, #E3E9F6);
    border-radius: 14px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.05);
}

/* ── Sidebar nav ─────────────────────────────────────────────────────── */

body.woocommerce-account .woocommerce-MyAccount-navigation {
    padding: 25px !important;
    background: #fff;
    border: 1px solid var(--eafps-parme-tres-clair, #F6F7FF);
    border-radius: 15px;
    position: sticky;
    top: 120px;
}
/* ── Header user dropdown (Figma DEV-2 / node 591:1447) ────────────────
 * Logged-in only. Anchored under Salient's #nectar-user-account icon by
 * the JS in Eafps_Membres_Account::output_header_dropdown(). */

/* Our custom <li#eafps-user-account> sits in the Salient header buttons
 * strip (rendered via the `nectar_before_header_button_list_items` hook
 * after we suppressed Salient's own #nectar-user-account). It is the
 * hover anchor for the dropdown — `position: relative` so the absolutely
 * positioned menu lands directly under it. !important + max specificity
 * to win over Salient's generic header-button rules that lock width to
 * 24px and force display: block on the link. */
body #header-outer #top nav ul.buttons li#eafps-user-account {
    position: relative !important;
    overflow: visible !important;
    order: -2; /* matches the layout slot Salient's icon used to occupy */
    width: auto !important;
    height: auto !important;
}
body #header-outer #top nav ul.buttons li#eafps-user-account > div {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
}
body #header-outer #top nav ul.buttons li#eafps-user-account a.eafps-account-link {
    display: inline-flex !important;
    align-items: center;
    gap: 4px !important; /* Figma DEV-2 / node 604:1878 */
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
body #header-outer #top nav ul.buttons li#eafps-user-account .eafps-account-icon {
    display: inline-block !important;
    color: #4BC1D0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* "Login" label rendered next to the icon when not logged in.
 * Max specificity + !important to bypass Salient's `#header-outer #top
 * nav ul a span { font-size: 0 / position: absolute }` style overrides
 * that may apply to spans inside header-button links. */
body #header-outer #top nav ul.buttons li#eafps-user-account .eafps-account-label,
.eafps-account-label {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #4C4C4C !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
}

/* ── Mobile (< 1000px) account icon ─────────────────────────────────────
 * Below 1000px Salient hides the desktop buttons strip — and with it our
 * #eafps-user-account (icon + name) — and instead shows its own name-less
 * mobile icon `.mobile-user-account`. That icon is enabled at the option
 * level (Eafps_Membres_Account::configure_salient_account_button); here we
 * only tidy two things :
 *   1. Hide the DESKTOP #nectar-user-account that Salient also emits once the
 *      option is on — on desktop our #eafps-user-account replaces it.
 *   2. Belt-and-suspenders : keep our #eafps-user-account out of the mobile
 *      header so the Salient icon is the only account affordance < 1000px. */
body #header-outer #top nav ul.buttons li#nectar-user-account {
    display: none !important;
}
@media ( max-width: 1000px ) {
    body #header-outer #top nav ul.buttons li#eafps-user-account {
        display: none !important;
    }
}
/* Tint the reused Salient mobile icon with the account turquoise so it reads
 * as the same affordance as the desktop icon (Salient's default is grey). */
#header-outer #top .mobile-user-account .icon-salient-m-user {
    color: #4BC1D0 !important;
}

/* Visibility is driven by the `.is-open` class added by JS on the
 * #eafps-user-account wrapper. JS adds the class on mouseenter (trigger
 * OR menu), removes it after a 350ms delay on mouseleave (both surfaces),
 * and on click-outside / Escape. Keyboard focus also keeps it open via
 * :focus-within. No CSS :hover here — that turned out to be ambiguous
 * when the menu's bordered card has its own padding/border layout. */
.eafps-header-user-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999;
    width: 260px;
    /* 8px transparent padding-top extends the dropdown's hit area up to
     * the bottom of the trigger so the pointer never crosses an "empty"
     * region in between. */
    padding-top: 8px;
    background: transparent;
    text-align: left;
}
#eafps-user-account.is-open .eafps-header-user-menu {
    display: block;
    pointer-events: auto !important;
}
/* Ensure no ancestor disables pointer events on our dropdown subtree. */
.eafps-header-user-menu,
.eafps-header-user-menu * {
    pointer-events: auto !important;
}
/* Extra 4px hit area extension at top to absorb header vertical padding. */
.eafps-header-user-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 12px;
}
/* The __inner is just a transparent layout container now — all the
 * white-card chrome lives on .eafps-account-menu below so the dropdown
 * is a SINGLE visible box (no double-frame, no leftover white strip
 * above the bordered list). */
.eafps-header-user-menu__inner {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
/* The bordered card IS the dropdown's visible chrome. !important on
 * position/width/height/display because some upstream Salient or WC
 * rule sets `position: absolute` on header-nav `<ul>` elements — which
 * would yank the list out of __inner's flow, collapse __inner to 0
 * height, and shrink the dropdown's bounding rect to just the 8px
 * transparent bridge (= the hot-zone JS would think the cursor is
 * outside the menu the moment it crosses into the items area). */
.eafps-header-user-menu .eafps-header-user-menu__inner .eafps-account-menu {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    padding: 14px 22px !important;
    background: #fff !important;
    border: 1px solid var(--eafps-parme-clair, #E3E9F6) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(39, 46, 71, 0.10);
}
/* Items inside .woocommerce-MyAccount-navigation-link inherit `float:
 * right` from WC's stock my-account stylesheet — that collapses our
 * <ul> (floats don't contribute to parent height) and visually leaks
 * the items OUT of the white card. Force float:none + display:block
 * so each item stacks normally inside the bordered card. */
.eafps-header-user-menu .eafps-account-menu > li {
    float: none !important;
    display: block !important;
    clear: both !important;
    width: auto !important;
}

/* ── Sectioned dashboard menu (Figma DEV-2 / node 591:1447) ─────────────
 * The same markup is rendered by render_menu_sections() in both the
 * sidebar (here) AND the header user dropdown (.eafps-header-user-menu).
 * Selectors below target the shared class `.eafps-account-menu`. */

body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu,
.eafps-header-user-menu .eafps-account-menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-top: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu li,
.eafps-header-user-menu .eafps-account-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

/* Section headers (Membership / Content / Account) — turquoise, uppercase.
 * Loud `!important` everywhere to win against Salient's nav link styles
 * (.original .woocommerce-MyAccount-navigation ul li a etc. at spec 0,3,1). */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu__section-header,
.eafps-header-user-menu .eafps-account-menu__section-header {
    display: block !important;
    padding: 14px 0 10px !important;
    margin: 0 !important;
    color: var(--eafps-bleu-turquoise-fonce, #08AEC0) !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-bottom: 1px solid var(--eafps-parme-clair, #E3E9F6) !important;
    cursor: default;
}
/* First section header has no top padding (sits flush). */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu li:first-child.eafps-account-menu__section-header,
.eafps-header-user-menu .eafps-account-menu li:first-child.eafps-account-menu__section-header {
    padding-top: 0 !important;
}
/* Section header NOT first-child : a bit more top spacing to "open" the
 * new section visually. */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu li.eafps-account-menu__item + li.eafps-account-menu__section-header,
.eafps-header-user-menu .eafps-account-menu li.eafps-account-menu__item + li.eafps-account-menu__section-header {
    padding-top: 18px !important;
}

/* Menu items — navy text, normal case, bordered rows.
 * Salient sets `text-transform: uppercase` + `font-weight: 700` on every
 * .nectar-menu li a and similar — multiple !important overrides + maximum
 * specificity selector is required. */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu .eafps-account-menu__item > a,
body .eafps-header-user-menu .eafps-account-menu .eafps-account-menu__item > a {
    display: block !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    color: var(--eafps-marine-fonce, #272E47) !important;
    background: transparent !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid var(--eafps-parme-clair, #E3E9F6) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: color 0.15s ease;
    white-space: normal;
}
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu .eafps-account-menu__item > a:hover,
body .eafps-header-user-menu .eafps-account-menu .eafps-account-menu__item > a:hover {
    color: var(--eafps-bleu-turquoise-fonce, #08AEC0) !important;
}

/* Active item (current page) : turquoise + medium weight, no background. */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu .eafps-account-menu__item.is-active > a,
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu .eafps-account-menu__item.is-active > a:hover {
    color: var(--eafps-bleu-turquoise-fonce, #08AEC0) !important;
    font-weight: 500 !important;
}

/* Last item / last section header : no border-bottom (flush bottom). */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu > li:last-child > a,
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu > li:last-child.eafps-account-menu__section-header,
body .eafps-header-user-menu .eafps-account-menu > li:last-child > a,
body .eafps-header-user-menu .eafps-account-menu > li:last-child.eafps-account-menu__section-header {
    border-bottom: 0 !important;
}

.eafps-account-menu__ext {
    display: inline-block;
    margin-left: 8px;
    opacity: 0.5;
    font-size: 11px;
    vertical-align: middle;
}

/* Kill Salient's FontAwesome icons before each nav link. */
body.woocommerce-account .woocommerce-MyAccount-navigation .eafps-account-menu li a:before,
body .eafps-header-user-menu .eafps-account-menu li a:before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    float: none !important;
}

/* Below 1000px the sidebar + content grid gets too cramped — stack it into a
 * single full-width column (nav above content). The selector MUST match the
 * base grid rule's specificity (body.logged-in.woocommerce-account, 0,3,1) to
 * override its `grid-template-columns: 280px 1fr`; a lower-specificity
 * selector here is silently ignored and the 2-column layout sticks. */
@media ( max-width: 1000px ) {
    body.logged-in.woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
        grid-template-areas:
            "notices"
            "nav"
            "content";
        gap: 24px;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        position: static;
    }
}

/* ── Content container ──────────────────────────────────────────────── */

body.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
}
/* WC's dashboard intro <p> (from the override template, none — but Salient
 * also injects some Hello text via hooks if WC subscriptions is active).
 * Hide any stray paragraph that lands directly before our .eafps-account block. */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-child:not(.eafps-account__notice) {
    display: none;
}

/* ── Section / cards ─────────────────────────────────────────────────── */

.eafps-account {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.eafps-account__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 4px;
    flex-wrap: wrap;
}
.eafps-account__header--badge-only {
    justify-content: flex-end;
}
.eafps-account__title {
    margin: 0;
    font-family: "Butler", serif !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: var(--eafps-bleu-turquoise-fonce) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.eafps-account__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
@media ( max-width: 690px ) {
    .eafps-account__cards { grid-template-columns: 1fr; }
}

.eafps-account__card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--eafps-parme-clair);
    border-radius: 14px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.05);
}
.eafps-account__card h3 {
    margin: 0 0 14px !important;
    font-family: "Butler", serif !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: var(--eafps-marine-fonce) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.eafps-account__big {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 500;
    color: var(--eafps-marine-fonce);
}
.eafps-account__muted {
    margin: 0;
    font-size: 14px;
    color: var(--eafps-gris-clair);
}
.eafps-account__pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    background: var(--eafps-bg-canard);
    color: var(--eafps-bleu-canard);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
}

/* ── Status badge ────────────────────────────────────────────────────── */

.eafps-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 50px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
}
.eafps-badge--ok    { background: var(--eafps-bg-canard);  color: var(--eafps-bleu-canard); }
.eafps-badge--warn  { background: #FFF3CD;                  color: #8A6A00; }
.eafps-badge--off   { background: #F8D7DA;                  color: #842029; }
.eafps-badge--info  { background: var(--eafps-bg-parme);   color: var(--eafps-parme-fonce); }

/* ── Quick actions list ──────────────────────────────────────────────── */

.eafps-account__actions {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eafps-account__actions li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.eafps-account__actions li:before {
    content: none !important;
}
.eafps-account__actions a:not(.eafps-account__btn) {
    color: var(--eafps-parme-fonce);
    text-decoration: none;
    font-weight: 400;
}
.eafps-account__actions a:not(.eafps-account__btn):hover {
    text-decoration: underline;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.eafps-account__btn {
    display: inline-block;
    padding: 10px 22px !important;
    background: #fff;
    color: var(--eafps-bleu-turquoise) !important;
    border: 1px solid var(--eafps-bleu-turquoise) !important;
    border-radius: 50px !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-shadow: none !important;
}
.eafps-account__btn:hover {
    background: var(--eafps-bleu-turquoise) !important;
    color: #fff !important;
}
.eafps-account__btn--primary {
    background: var(--eafps-bleu-turquoise) !important;
    color: #fff !important;
}
.eafps-account__btn--primary:hover {
    background: var(--eafps-bleu-turquoise-fonce) !important;
    color: #fff !important;
}
/* Bouton aligné sur la primaire du thème Salient (--nectar-accent-color).
   !important : Salient écrase sinon le fond → bleu-sur-bleu illisible. */
.eafps-account__btn--nectar {
    background: var(--nectar-accent-color, #2e6da8) !important;
    color: #fff !important;
    border-color: var(--nectar-accent-color, #2e6da8) !important;
}
.eafps-account__btn--nectar:hover {
    filter: brightness(0.92);
    color: #fff !important;
}

/* ── Table ───────────────────────────────────────────────────────────── */

.eafps-account__table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Inter", sans-serif;
    font-size: 14px;
}
.eafps-account__table thead th {
    text-align: left;
    padding: 12px 14px;
    background: var(--eafps-parme-tres-clair);
    color: var(--eafps-parme-fonce);
    font-weight: 500;
    border-bottom: 1px solid var(--eafps-parme-clair);
}
.eafps-account__table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--eafps-parme-clair);
    color: var(--eafps-gris-fonce);
}
.eafps-account__table tbody tr:last-child td {
    border-bottom: none;
}
.eafps-account__table a {
    color: var(--eafps-bleu-turquoise-fonce);
    text-decoration: none;
    font-weight: 500;
}
.eafps-account__table a:hover {
    text-decoration: underline;
}

/* ── Definition list ─────────────────────────────────────────────────── */

.eafps-account__dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px 18px;
    margin: 0;
    font-size: 15px;
}
.eafps-account__dl dt {
    color: var(--eafps-gris-clair);
    font-weight: 400;
}
.eafps-account__dl dd {
    margin: 0;
    color: var(--eafps-marine-fonce);
    font-weight: 500;
}

/* ── Profile form ────────────────────────────────────────────────────── */

.eafps-account__form .eafps-account__card + .eafps-account__card {
    margin-top: 24px;
}
.eafps-account__submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}
.eafps-account__notice {
    padding: 14px 18px;
    border-radius: 10px;
    border-left: 4px solid;
    font-size: 14px;
}
.eafps-account__notice--success { background: #E8F5E9; border-color: #2E7D32; color: #1B4720; }
.eafps-account__notice--error   { background: #FBE9E7; border-color: #D84315; color: #4A1E16; }
.eafps-account__notice--warning { background: #FFF4E5; border-color: #E08600; color: #5A3A00; }
.eafps-account__notice--info    { background: #E8F1FB; border-color: #2E6DA8; color: #163C5E; }
.eafps-account__notice p { margin: 0; }
.eafps-account__notice a { font-weight: 600; white-space: nowrap; }

/* Stripe portal CTA inside Invoices card */
.eafps-account__portal-form {
    margin: 0;
}

/* Renew CTA row sitting below the membership <dl> */
.eafps-account__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}
.eafps-account__cta-row form {
    margin: 0;
}

/* ── Profile photo widget (Account → My profile) ─────────────────────── */

.eafps-account__photo-row {
    align-items: center;
}
.eafps-account__photo-preview {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--eafps-parme-clair, #E3E9F6);
    background: var(--eafps-parme-tres-clair, #F6F7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eafps-gris-clair, #949494);
    font-size: 12px;
    text-align: center;
    margin: 0 0 6px;
}
.eafps-account__photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Default-silhouette variant : the SVG fills the circle without cropping
 * (silhouette is centered on a transparent canvas). */
.eafps-account__photo-preview--default {
    background: var(--eafps-parme-tres-clair, #F6F7FF);
}
.eafps-account__photo-preview--default img {
    object-fit: contain;
}
.eafps-account__photo-remove {
    color: var(--eafps-gris-fonce, #4C4C4C);
}

/* ── Responsive : text wrapping + stacked table (mobile) ─────────────────
 * Long values (emails, descriptions, Stripe URLs) must wrap instead of
 * forcing horizontal overflow. Applied at every width. */
.eafps-account__big,
.eafps-account__muted,
.eafps-account__dl dd,
.eafps-account__table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media ( max-width: 640px ) {
    /* Tighter card padding on small screens. */
    .eafps-account__card {
        padding: 18px;
    }
    .eafps-account__title {
        font-size: 26px !important;
    }

    /* Definition list (My subscriptions) → single column so the value isn't
     * squeezed against a fixed 200px label column. */
    .eafps-account__dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .eafps-account__dl dt {
        margin-top: 10px;
    }
    .eafps-account__dl dt:first-child {
        margin-top: 0;
    }

    /* Tables (Invoices, Subscription history) → stacked "cards", one row per
     * block, each cell labelled by its column header via data-label. Avoids a
     * cramped horizontal scroll on phones. */
    .eafps-account__table,
    .eafps-account__table tbody,
    .eafps-account__table tr,
    .eafps-account__table td {
        display: block;
        width: 100%;
    }
    .eafps-account__table thead {
        display: none;
    }
    .eafps-account__table tbody tr {
        margin: 0 0 14px;
        border: 1px solid var(--eafps-parme-clair);
        border-radius: 10px;
        overflow: hidden;
    }
    .eafps-account__table tbody tr:last-child {
        margin-bottom: 0;
    }
    .eafps-account__table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 10px 14px;
        text-align: right;
        border-bottom: 1px solid var(--eafps-parme-tres-clair);
    }
    .eafps-account__table tbody tr td:last-child {
        border-bottom: none;
    }
    /* Column label, pulled from the cell's data-label attribute. */
    .eafps-account__table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        text-align: left;
        color: var(--eafps-parme-fonce);
        font-weight: 500;
    }
    /* Actions cell : no label, buttons wrap full-width. */
    .eafps-account__table td.eafps-account__cell-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }
    .eafps-account__table td.eafps-account__cell-actions::before {
        content: none;
    }
    .eafps-account__table td.eafps-account__cell-actions:empty {
        display: none;
    }
    .eafps-account__table td.eafps-account__cell-actions .eafps-account__btn {
        flex: 1 1 auto;
        text-align: center;
    }
}