:root {
            --cream:      #F3EDE3;
            --cream-dark: #EAE2D5;
            --orange:     #B84B0C;
            --orange-lt:  #C95A18;
            --text:       #1A1208;
            --text-muted: #7A6E62;
            --text-light: #A89D92;
            --border:     rgba(26,18,8,0.1);
            --border-md:  rgba(26,18,8,0.16);
            --white:      #FFFFFF;
            --card-bg:    #FAF6F0;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 16px; }

        body {
            font-family: 'Jost', sans-serif;
            background: var(--cream);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            padding-bottom: 60px;
        }

        h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.1; }
        a { text-decoration: none; color: inherit; }

        .app-nav {
            position: sticky; top: 0; z-index: 100;
            background: var(--white);
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center;
            padding: 0 28px; height: 54px;
        }
        .app-logo {
            font-family: 'Jost', sans-serif;
            font-weight: 600; font-size: 0.95rem;
            color: var(--text); text-decoration: none;
            display: flex; align-items: center; gap: 5px; flex-shrink: 0;
        }
        .logo-star { color: var(--orange-text, var(--orange)); }

        .app-nav__tabs {
            display: flex; align-items: center;
            flex: 1; justify-content: center;
        }
        .nav-tab {
            display: inline-flex; align-items: center;
            height: 54px; padding: 0 18px;
            font-size: 0.84rem; font-weight: 500;
            color: var(--text-muted); text-decoration: none;
            border-bottom: 2px solid transparent;
            transition: color 0.2s, border-color 0.2s;
        }
        .nav-tab:hover { color: var(--text); }
        .nav-tab.active { color: var(--orange-text, var(--orange)); border-bottom-color: var(--orange); font-weight: 600; }

        .app-nav__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .nav-user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .user-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: var(--orange); color: var(--on-orange, white);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em;
        }
        .user-plan {
            font-size: 0.63rem; font-weight: 700;
            letter-spacing: 0.07em; text-transform: uppercase;
            color: var(--text-muted); background: var(--cream-dark);
            border: 1px solid var(--border-md); border-radius: 4px; padding: 3px 7px;
        }
        .user-arrow { font-size: 0.65rem; color: var(--text-light); }

        .main { max-width: 560px; margin: 0 auto; padding: 32px 20px 0; }
        .page-header { margin-bottom: 24px; }
        .page-title { font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 6px; }
        .page-subtitle { font-size: 0.86rem; color: var(--orange-text, var(--orange)); font-style: italic; }

        .form-card {
            background: var(--white);
            border: 1px solid var(--border-md);
            border-radius: 16px;
            padding: 22px 24px;
            margin-bottom: 14px;
        }

        .field { margin-bottom: 16px; }
        .field:last-child { margin-bottom: 0; }

        .field-label {
            display: block;
            font-size: 0.76rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 7px;
        }
        .field-hint {
            font-size: 0.72rem;
            color: var(--orange-text, var(--orange));
            margin-bottom: 10px;
            font-style: italic;
        }

        .field-row { display: flex; gap: 12px; }
        .field-row .field { flex: 1; }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"] {
            width: 100%;
            height: 42px;
            padding: 0 14px;
            font-family: 'Jost', sans-serif;
            font-size: 0.88rem;
            color: var(--text);
            background: var(--cream);
            border: 1px solid var(--border-md);
            border-radius: 10px;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
        }
        input:focus {
            border-color: var(--orange);
            background: var(--white);
        }

        .btn-save {
            font-family: 'Jost', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            padding: 11px 24px;
            border-radius: 10px;
            border: none;
            background: var(--orange);
            color: var(--on-orange, white);
            cursor: pointer;
            transition: background 0.2s, transform 0.15s;
            margin-bottom: 18px;
            letter-spacing: 0.01em;
        }
        .btn-save:hover { background: var(--orange-lt); transform: translateY(-1px); }
        .btn-save:active { transform: translateY(0); }

        .save-message {
            display: inline-block;
            margin-left: 12px;
            font-size: 0.86rem;
            font-weight: 600;
            color: var(--orange-text, var(--orange));
        }

        .email-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px 20px;
            margin-bottom: 14px;
        }
        .email-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-light);
            margin-bottom: 4px;
        }

        .danger-card {
            background: var(--white);
            border: 1px solid var(--border-md);
            border-radius: 14px;
            padding: 20px 22px;
        }
        .danger-title {
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 600;
            color: var(--orange-text, var(--orange));
            margin-bottom: 8px;
        }
        .danger-text {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .btn-delete {
            font-family: 'Jost', sans-serif;
            font-size: 0.8rem;
            font-weight: 500;
            padding: 9px 18px;
            border-radius: 8px;
            border: 1px solid rgba(var(--orange-rgb, 184,75,12),0.3);
            background: white;
            color: var(--orange-text, var(--orange));
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-delete:hover {
            background: rgba(var(--orange-rgb, 184,75,12),0.05);
            border-color: var(--orange);
        }
        html.dark-mode .btn-delete {
            background: transparent;
        }
        /* Dialogue de suppression du compte (code email). */
        .fp-delete-code-row { margin: -8px 0 12px; }
        .fp-delete-code-row input {
            width: 100%; box-sizing: border-box; padding: 11px 14px;
            font-size: 1.05rem; letter-spacing: 0.3em; text-align: center;
        }
        /* Clôture avec solde de parrainage : case obligatoire + IBAN. */
        .fp-closure-ack { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 0.9rem; line-height: 1.4; cursor: pointer; }
        .fp-closure-ack input { flex: 0 0 auto; margin-top: 3px; width: 18px; height: 18px; }
        .fp-closure-note { margin: -6px 0 14px; font-size: 0.8rem; line-height: 1.4; opacity: 0.8; }
        .fp-closure-disabled { opacity: 0.5; cursor: not-allowed; }
        #fp-delete-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
        .fp-closure-iban { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
        /* L’attribut hidden doit masquer réellement le bloc (sinon display:flex l’emporte). */
        .fp-closure-iban[hidden] { display: none; }
        .fp-closure-iban input { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 1rem; }
        .fp-delete-error { min-height: 1em; margin: 0 0 12px; font-size: 0.82rem; color: #C0392B; }
        .fp-delete-error:empty { display: none; }

        .phones-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
        .phone-entry {
            border: 1px solid var(--border-md);
            border-radius: 10px;
            background: var(--cream);
            padding: 12px 14px;
        }
        .phone-entry-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
        .phone-entry-top input[type="tel"],
        .phone-entry-top input[type="url"] { height: 36px; font-size: 0.84rem; flex: 1; min-width: 0; }
        .btn-phone-remove {
            width: 28px; height: 28px; min-width: 28px;
            border: 1px solid var(--border-md); border-radius: 7px;
            background: var(--white); color: var(--text-muted);
            font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .btn-phone-remove:hover { background: rgba(var(--orange-rgb, 184,75,12),0.08); color: var(--orange-text, var(--orange)); border-color: var(--orange); }
        .btn-phone-remove:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
        .phone-entry-opts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
        .phone-opt {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 0.76rem; font-weight: 500; color: var(--text-muted);
            cursor: pointer; user-select: none;
        }
        .phone-opt input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--orange); cursor: pointer; }
        .btn-add-phone {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            background: none; border: 1px dashed var(--border-md); border-radius: 8px;
            padding: 8px 14px; width: 100%;
            font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500;
            color: var(--text-muted); cursor: pointer;
            transition: border-color 0.2s, color 0.2s;
        }
        .btn-add-phone:hover { border-color: var(--orange); color: var(--orange-text, var(--orange)); }

        /* ══════════════════════════════════════════════
           RESPONSIVE — TABLETTE (≤ 768px)
           Réduction des espacements horizontaux de la nav et des
           onglets uniquement. Ils restent sur une seule ligne.
           Aucun autre élément de la page n'est modifié.
        ══════════════════════════════════════════════ */
        @media (max-width: 768px) {
            .app-nav {
                padding: 0 16px;
            }
            .nav-tab {
                padding: 0 10px;
                font-size: 0.76rem;
            }
        }

        /* ══════════════════════════════════════════════
           RESPONSIVE — SMARTPHONE (≤ 480px)
           La nav passe sur deux lignes : logo + menu utilisateur
           (horloge/thème + compte) en haut, les 4 onglets en
           dessous, avec repli naturel en 2×2 si nécessaire.
           Aucun défilement horizontal, aucun élément masqué,
           aucun menu hamburger — uniquement flex-wrap/order/
           flex-basis sur la structure HTML existante.
        ══════════════════════════════════════════════ */
        @media (max-width: 480px) {
            .app-nav {
                flex-wrap: wrap;
                height: auto;
                padding: 10px 16px;
                row-gap: 8px;
            }
            .app-logo {
                order: 1;
            }
            .app-nav__right {
                order: 2;
                margin-left: auto;
            }
            .app-nav__tabs {
                order: 3;
                flex-basis: 100%;
                flex-wrap: wrap;
                gap: 4px;
            }
            .nav-tab {
                height: auto;
                padding: 8px 12px;
                font-size: 0.74rem;
            }
        }

        /* Dialogue de suppression : la remise à zéro "* { margin: 0 }" ci-dessus
           annulait le centrage natif (margin: auto) des <dialog> modaux. */
        .fp-exit-dialog[open] { margin: auto; }