/* ==========================================================================
   PROFIL VEFACONNECT — refonte 2026-08
   --------------------------------------------------------------------------
   Transposition de la maquette interactive livrée par l'équipe produit
   (`docs/maquettes/profil/profil-vefaconnect-peps-complet.html`, préfixe `vcp-`).

   Ce qui a été RETIRÉ par rapport à l'ancienne feuille : glassmorphism
   (`backdrop-filter`), effets tilt/ripple/confettis, `mesh-bg`. La hiérarchie
   repose désormais sur des surfaces pleines, des bordures fines et des ombres
   douces — l'orange est réservé aux actions et aux repères communautaires,
   le bleu porte la structure.

   ⚠️ TOKENS : la maquette définissait ses propres `--vcp-*` en hexadécimal.
   Ils tombent EXACTEMENT sur les tokens de marque (`#3498db` = --vefa-primary,
   `#0f172a` = --vefa-text, `#e2e8f0` = --vefa-border…) → ils sont aliasés
   ci-dessous plutôt que recopiés. Seules les teintes sans équivalent dans
   `tokens.css` (rouges/ambres des encarts RGPD, dégradés décoratifs) restent
   en dur, marquées `hex-ok` pour le hook pre-commit.
   ========================================================================== */

.vcp {
    /* --- Marque : alias 1:1 sur les tokens du design system --- */
    --vcp-blue: var(--vefa-primary);
    --vcp-blue-dark: var(--vefa-primary-dark);
    --vcp-blue-deep: var(--vefa-primary-darker);
    --vcp-orange: var(--vefa-accent);
    --vcp-orange-dark: var(--vefa-accent-dark);

    --vcp-ink: var(--vefa-text);
    --vcp-strong: var(--vefa-text-strong);
    --vcp-muted: var(--vefa-text-muted);
    --vcp-subtle: var(--vefa-text-subtle);

    --vcp-white: var(--vefa-bg);
    --vcp-canvas: var(--vefa-bg-soft);
    --vcp-soft: var(--vefa-bg-muted);
    --vcp-line: var(--vefa-border);

    /* --- Teintes sans équivalent en token (encarts RGPD, décor) --- */
    --vcp-danger: var(--vefa-danger);
    --vcp-danger-strong: #b91c1c;              /* hex-ok — titre « données supprimées » */
    --vcp-danger-line: #fecaca;                /* hex-ok — bordure de l'encart rouge */
    --vcp-danger-bg: #fef2f2;                  /* hex-ok — fond de l'encart rouge */
    --vcp-danger-bg-faint: #fffafa;            /* hex-ok — en-tête zone de danger */
    --vcp-keep-strong: #92400e;                /* hex-ok — titre « données anonymisées » */
    --vcp-keep-line: #fde68a;                  /* hex-ok — bordure de l'encart ambre */
    --vcp-keep-bg: #fffbeb;                    /* hex-ok — fond de l'encart ambre */
    --vcp-orange-light: #ff6b3a;               /* hex-ok — 2e arrêt du dégradé accent */
    --vcp-community-dark: #17496f;             /* hex-ok — stop sombre de la bannière communauté (contraste AA) */

    /* Dégradés décoratifs de la maquette (bleu pâle → blanc → pêche). */
    --vcp-hero-gradient: linear-gradient(135deg, #eaf5fc 0%, #ffffff 53%, #fff1eb 100%);  /* hex-ok */
    --vcp-avatar-gradient: linear-gradient(145deg, #dff1fc, #f4f9fc);                     /* hex-ok */
    --vcp-quicklinks-gradient: linear-gradient(180deg, #ffffff, #fbfdff);                 /* hex-ok */
    --vcp-empty-gradient: linear-gradient(135deg, #eff6ff, #ffffff 62%, #fff7ed);         /* hex-ok */

    /* --- Typographie ---
       `--font-ui` (Geist) est posée globalement par `home_e1/00-geist.css`, chargée
       dans base.html : la page hérite donc de la MÊME police que l'en-tête de site
       juste au-dessus. La maquille proposait la pile système `-apple-system…`, gardée
       ici en repli. Le serif Charter est identique à celui de la maquette. */
    --vcp-sans: var(--font-ui, -apple-system), BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --vcp-serif: Charter, "Bitstream Charter", "PT Serif", Georgia, serif;

    color: var(--vcp-ink);
    font-family: var(--vcp-sans);
    font-size: 1rem;
    line-height: 1.5;
}

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

.vcp button,
.vcp input,
.vcp select,
.vcp textarea { font: inherit; }

.vcp button { cursor: pointer; }

.vcp__serif {
    font-family: var(--vcp-serif);
    letter-spacing: -0.02em;
}

/* Accessibilité — anneau de focus visible partout.
   La maquette n'en définissait aucun ; c'est un critère de validation explicite
   du cahier des charges (navigation clavier + états de focus visibles). */
.vcp :focus-visible {
    outline: 2px solid var(--vcp-blue);
    outline-offset: 2px;
    border-radius: var(--vefa-radius-sm);
}

/* ============================ Page ============================ */

.vcp-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 34px 32px 58px;
}

/* ============================ Hero ============================ */

.vcp-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin-bottom: 22px;
    padding: 36px 40px;
    border: 1px solid rgba(52, 152, 219, 0.18);
    border-radius: var(--vefa-radius-xl);
    background: var(--vcp-hero-gradient);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

/* Cercle bleu + carré orange : décor pur, masqués aux lecteurs d'écran par
   construction (pseudo-éléments). */
.vcp-hero::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: 110px;
    top: -100px;
    border: 28px solid rgba(52, 152, 219, 0.10);
    border-radius: 50%;
}

.vcp-hero::after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    right: -32px;
    bottom: -34px;
    border: 22px solid rgba(255, 64, 0, 0.10);
    border-radius: 28px;
    transform: rotate(20deg);
}

.vcp-hero__copy,
.vcp-hero__action {
    position: relative;
    z-index: 1;
}

.vcp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 11px;
    color: var(--vcp-blue-deep);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.vcp-kicker::before {
    content: "";
    width: 24px;
    height: 3px;
    flex: 0 0 auto;
    border-radius: var(--vefa-radius-pill);
    background: var(--vcp-orange);
}

.vcp-hero__title {
    margin: 0;
    color: var(--vcp-strong);
    /* La maquette rend 32px ; on garde cette borne haute mais on descend
       proprement sur petit écran plutôt que de conserver 32px à 360px. */
    font-size: clamp(1.5rem, 3.2vw + 0.7rem, 2rem);
    font-weight: 500;
    line-height: 1.18;
}

.vcp-hero__lead {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--vcp-muted);
    line-height: 1.5;
}

/* ============================ Boutons ============================ */

.vcp-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--vcp-line);
    border-radius: var(--vefa-radius-md);
    color: var(--vcp-ink);
    background: var(--vcp-white);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform var(--vefa-duration-fast) var(--vefa-ease-out),
                box-shadow var(--vefa-duration-fast) var(--vefa-ease-out),
                border-color var(--vefa-duration-fast) var(--vefa-ease-out),
                background var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vcp-button:hover {
    transform: translateY(-1px);
    border-color: var(--vcp-blue);
    color: var(--vcp-blue-deep);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}

.vcp-button:disabled {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Orange = action importante ou geste communautaire. */
.vcp-button--accent,
.vcp-button--accent:hover {
    color: var(--vefa-text-on-primary);
}

.vcp-button--accent {
    border-color: var(--vcp-orange);
    background: linear-gradient(135deg, var(--vcp-orange), var(--vcp-orange-light));
    box-shadow: 0 10px 22px rgba(255, 64, 0, 0.20);
}

.vcp-button--accent:hover {
    border-color: var(--vcp-orange-dark);
    background: var(--vcp-orange-dark);
}

/* Bleu = action structurante (enregistrer, éditer). */
.vcp-button--blue,
.vcp-button--blue:hover {
    color: var(--vefa-text-on-primary);
}

.vcp-button--blue {
    border-color: var(--vcp-blue);
    background: linear-gradient(135deg, var(--vcp-blue), var(--vcp-blue-dark));
    box-shadow: 0 9px 20px rgba(52, 152, 219, 0.20);
}

.vcp-button--blue:hover {
    background: var(--vcp-blue-dark);
}

.vcp-button--danger {
    border-color: var(--vcp-danger-line);
    color: var(--vcp-danger);
    background: var(--vcp-white);
}

.vcp-button--danger:hover {
    border-color: var(--vcp-danger);
    color: var(--vcp-danger);
    background: var(--vcp-danger-bg);
}

.vcp-button--block { width: 100%; }

/* ============================ Grille principale ============================ */

.vcp-grid {
    display: grid;
    /* `minmax(0, …)` sur les DEUX colonnes : sans lui, `min-width: auto` empêche
       les enfants de rétrécir et la carte identité déborde (défaut mesuré sur la
       maquette à 390 px — 482 px de contenu dans 340 px de conteneur). */
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.vcp-identity,
.vcp-workspace {
    min-width: 0;
    border: 1px solid var(--vcp-line);
    border-radius: 20px;
    background: var(--vcp-white);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

/* ============================ Carte identité ============================ */

.vcp-identity {
    position: relative;
    overflow: hidden;
}

/* Liseré vertical bleu → orange : la signature de la carte. */
.vcp-identity::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(var(--vcp-blue), var(--vcp-orange));
}

.vcp-identity__main {
    padding: 28px 27px 24px 31px;
    text-align: center;
}

.vcp-avatar-wrap {
    position: relative;
    width: 96px;
    margin: 0 auto 15px;
}

.vcp-avatar {
    width: 96px;
    height: 96px;
    display: block;
    overflow: hidden;
    border: 5px solid var(--vcp-white);
    border-radius: 28px;
    background: var(--vcp-avatar-gradient);
    box-shadow: 0 0 0 1px var(--vcp-line), 0 11px 25px rgba(52, 152, 219, 0.16);
    transform: rotate(-2deg);
}

.vcp-avatar img,
.profile-enhanced__avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vcp-camera {
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 3px solid var(--vcp-white);
    border-radius: 50%;
    color: var(--vefa-text-on-primary);
    background: var(--vcp-orange);
    font-size: 0.8125rem;
    transition: background var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vcp-camera:hover { background: var(--vcp-orange-dark); }

/* Confirmer / annuler un changement de photo — injecté par profile.js après
   sélection d'un fichier, jamais présent au chargement. */
.vcp .avatar-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 15px;
}

.vcp .avatar-buttons .vcp-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
}

.vcp-name {
    margin: 0;
    color: var(--vcp-strong);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vcp-handle {
    margin: 5px 0 0;
    color: var(--vcp-muted);
    overflow-wrap: anywhere;
}

.vcp-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.vcp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--vefa-radius-pill);
    color: var(--vcp-blue-deep);
    background: rgba(52, 152, 219, 0.10);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.vcp-chip--owner {
    color: var(--vcp-orange-dark);
    background: rgba(255, 64, 0, 0.09);
}

.vcp-chip--badge {
    color: var(--vcp-muted);
    background: var(--vcp-soft);
}

.vcp-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 22px 0 18px;
    padding: 16px 0;
    border-top: 1px solid var(--vcp-line);
    border-bottom: 1px solid var(--vcp-line);
}

.vcp-social__item {
    min-width: 0;
    text-align: center;
}

.vcp-social__item + .vcp-social__item { border-left: 1px solid var(--vcp-line); }

.vcp-social__item strong {
    display: block;
    color: var(--vcp-strong);
    font-weight: 500;
}

.vcp-social__item span {
    color: var(--vcp-muted);
    font-size: 0.875rem;
}

.vcp-level { text-align: left; }

.vcp-level__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
}

.vcp-level__head strong {
    color: var(--vcp-ink);
    font-weight: 500;
}

.vcp-level__head span { color: var(--vcp-blue-deep); }

.vcp-progress {
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: var(--vefa-radius-pill);
    background: var(--vcp-soft);
}

.vcp-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vcp-blue), var(--vcp-orange));
}

.vcp-level__hint {
    display: block;
    margin-top: 8px;
    color: var(--vcp-muted);
    font-size: 0.8125rem;
}

.vcp-identity__actions {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

/* Le bouton « Suivre » et l'envoi de message réutilisent les composants forum
   existants (`forum-follow-user`) : on ne fait qu'aligner leur gabarit. */
.vcp-identity__actions .forum-follow-user,
.vcp-identity__actions form { margin: 0; }

.vcp-identity__actions .forum-follow-user__btn { width: 100%; }

.vcp-quicklinks {
    padding: 8px 27px 19px 31px;
    border-top: 1px solid var(--vcp-line);
    background: var(--vcp-quicklinks-gradient);
}

.vcp-quicklink {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--vcp-line);
    color: var(--vcp-muted);
    background: transparent;
    text-align: left;
    text-decoration: none;
    transition: color var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vcp-quicklink:last-child { border-bottom: 0; }

.vcp-quicklink:hover {
    color: var(--vcp-blue-deep);
    text-decoration: none;
}

.vcp-quicklink__label { flex: 1; min-width: 0; }

/* L'icône de tête en orange = repère d'action, cohérent avec la règle
   « orange réservé aux actions ». */
.vcp-quicklink__icon {
    width: 1.1rem;
    flex: 0 0 auto;
    color: var(--vcp-orange);
    text-align: center;
}

.vcp-quicklink__chevron {
    flex: 0 0 auto;
    color: var(--vcp-subtle);
    font-size: 0.75rem;
}

/* ============================ Onglets ============================ */

.vcp-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border-bottom: 1px solid var(--vcp-line);
    background: var(--vcp-white);
    border-radius: 20px 20px 0 0;
}

.vcp-tab {
    position: relative;
    flex: 1;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    color: var(--vcp-muted);
    background: transparent;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color var(--vefa-duration-fast) var(--vefa-ease-out),
                background var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vcp-tab:hover { color: var(--vcp-blue-deep); }

.vcp-tab[aria-selected="true"] {
    color: var(--vcp-blue-deep);
    background: rgba(52, 152, 219, 0.10);
}

/* Le trait orange sous l'onglet actif — le seul accent de la barre. */
.vcp-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 28px;
    height: 3px;
    border-radius: var(--vefa-radius-pill);
    background: var(--vcp-orange);
    transform: translateX(-50%);
}

.vcp-panel { padding: 25px; }

.vcp-panel[hidden] { display: none; }

.vcp-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 21px;
}

.vcp-panel__head h2 {
    margin: 0;
    color: var(--vcp-strong);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
}

.vcp-panel__head p {
    margin: 5px 0 0;
    color: var(--vcp-muted);
    font-size: 0.9375rem;
}

/* ============================ Aperçu ============================ */

.vcp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.vcp-stat {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--vcp-line);
    border-radius: 15px;
    background: var(--vcp-white);
}

.vcp-stat::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.08);
}

.vcp-stat:nth-child(2)::after { background: rgba(255, 64, 0, 0.08); }
.vcp-stat:nth-child(3)::after { background: rgba(85, 147, 184, 0.10); }

.vcp-stat__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: var(--vefa-radius-md);
    color: var(--vcp-blue-deep);
    background: rgba(52, 152, 219, 0.10);
}

.vcp-stat:nth-child(2) .vcp-stat__icon {
    color: var(--vcp-orange-dark);
    background: rgba(255, 64, 0, 0.09);
}

.vcp-stat__value {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--vcp-strong);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
}

.vcp-stat__label {
    position: relative;
    z-index: 1;
    color: var(--vcp-muted);
    font-size: 0.9375rem;
}

.vcp-bio {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 21px;
    border: 1px solid rgba(52, 152, 219, 0.18);
    border-radius: var(--vefa-radius-lg);
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.07), rgba(255, 255, 255, 1) 66%);
}

.vcp-bio__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--vefa-text-on-primary);
    background: linear-gradient(135deg, var(--vcp-blue), var(--vcp-blue-dark));
}

.vcp-bio__title {
    display: block;
    margin-bottom: 6px;
    color: var(--vcp-strong);
    font-weight: 500;
}

.vcp-bio__text {
    margin: 0;
    color: var(--vcp-muted);
    font-family: var(--vcp-serif);
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.vcp-community {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: var(--vefa-radius-lg);
    color: var(--vefa-text-on-dark);
    /* ⚠️ Dégradé ASSOMBRI par rapport à la maquette (`--vcp-blue-deep` → `--vcp-blue`).
       Mesuré : sur le stop clair `#3498db`, du blanc à 82 % (valeur de la maquette)
       donne 2,61:1 — et même du blanc PUR n'atteint que 3,15:1, donc sous le seuil AA
       de 4,5:1 quelle que soit l'opacité du texte. Avec `#1f6396` comme stop le plus
       clair, le pire cas remonte à 5,87:1. La bannière reste bleue, en plus profond. */
    background: linear-gradient(135deg, var(--vcp-community-dark), var(--vcp-blue-deep));
}

.vcp-community h3 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Opacité relevée par rapport à la maquette (.82) : sur ce dégradé bleu, .82
   passait sous le seuil AA pour du texte courant. */
.vcp-community p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.9375rem;
}

.vcp-community .vcp-button {
    border-color: var(--vcp-white);
    color: var(--vcp-blue-deep);
    background: var(--vcp-white);
}

.vcp-community .vcp-button:hover {
    color: var(--vcp-blue-deep);
    background: var(--vcp-canvas);
}

/* ============================ Activité ============================ */

.vcp-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vcp-event {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: start;
    padding: 17px 0;
    border-bottom: 1px solid var(--vcp-line);
}

.vcp-event:last-child { border-bottom: 0; }

.vcp-event__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--vcp-blue-deep);
    background: rgba(52, 152, 219, 0.10);
}

.vcp-event:nth-child(2) .vcp-event__icon {
    color: var(--vcp-orange-dark);
    background: rgba(255, 64, 0, 0.09);
}

.vcp-event__text { margin: 0; }

/* `--vcp-subtle` (#94a3b8) tombe à 2.8:1 sur blanc : sous le seuil AA.
   Les horodatages passent donc en `--vcp-muted` (8.6:1). */
.vcp-event time {
    color: var(--vcp-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ============================ États vides ============================ */

.vcp-empty {
    padding: 36px 22px;
    text-align: center;
    border: 1px dashed rgba(52, 152, 219, 0.35);
    border-radius: var(--vefa-radius-lg);
    background: var(--vcp-empty-gradient);
}

.vcp-empty__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: var(--vefa-radius-lg);
    color: var(--vefa-text-on-primary);
    background: linear-gradient(135deg, var(--vcp-blue), var(--vcp-orange));
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.18);
    font-size: 1.25rem;
}

.vcp-empty h3 {
    margin: 0;
    color: var(--vcp-strong);
    font-size: 1.25rem;
    font-weight: 500;
}

.vcp-empty p {
    max-width: 470px;
    margin: 7px auto 17px;
    color: var(--vcp-muted);
}

/* ============================ Programmes ============================ */

.vcp-programs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.vcp-program {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--vcp-line);
    border-radius: 15px;
    background: var(--vcp-white);
    transition: transform var(--vefa-duration-fast) var(--vefa-ease-out),
                border-color var(--vefa-duration-fast) var(--vefa-ease-out),
                box-shadow var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vcp-program:hover {
    transform: translateY(-2px);
    border-color: rgba(52, 152, 219, 0.35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.vcp-program__media {
    aspect-ratio: 16 / 10;
    background: var(--vcp-soft);
}

.vcp-program__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vcp-program__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap: 4px;
    color: var(--vcp-subtle);
    font-size: 1.5rem;
}

.vcp-program__body { padding: 14px 16px 16px; }

.vcp-program__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}

.vcp-program__title a {
    color: var(--vcp-strong);
    text-decoration: none;
}

.vcp-program__title a:hover { color: var(--vcp-blue-deep); }

.vcp-program__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    color: var(--vcp-muted);
    font-size: 0.875rem;
}

/* ============================ Badges ============================ */

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

.vcp-badge-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--vcp-line);
    border-radius: 15px;
    background: var(--vcp-white);
    transition: transform var(--vefa-duration-fast) var(--vefa-ease-out),
                border-color var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vcp-badge-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 64, 0, 0.35);
}

.vcp-badge-item--locked {
    opacity: 0.62;
    background: var(--vcp-canvas);
}

.vcp-badge-item__mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--vcp-orange-dark);
    background: rgba(255, 64, 0, 0.09);
}

.vcp-badge-item__copy {
    flex: 1;
    min-width: 0;
}

.vcp-badge-item__copy strong {
    display: block;
    color: var(--vcp-strong);
    font-weight: 500;
}

.vcp-badge-item__copy span {
    color: var(--vcp-muted);
    font-size: 0.875rem;
}

.vcp-badge-item__state {
    flex: 0 0 auto;
    color: var(--vcp-muted);
}

.vcp-badge-item:not(.vcp-badge-item--locked) .vcp-badge-item__state { color: var(--vefa-success); }

/* ============================ Réglages ============================ */

.vcp-settings {
    display: grid;
    gap: 12px;
}

.vcp-setting {
    overflow: hidden;
    border: 1px solid var(--vcp-line);
    border-radius: 15px;
}

.vcp-setting__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px;
    border: 0;
    color: var(--vcp-ink);
    background: var(--vcp-white);
    text-align: left;
    font-weight: 500;
}

.vcp-setting__label { flex: 1; min-width: 0; }

.vcp-setting__chevron {
    flex: 0 0 auto;
    color: var(--vcp-muted);
    transition: transform var(--vefa-duration-base) var(--vefa-ease-out);
}

.vcp-setting__toggle[aria-expanded="true"] .vcp-setting__chevron { transform: rotate(180deg); }

.vcp-setting__content {
    padding: 17px;
    border-top: 1px solid var(--vcp-line);
    background: var(--vcp-white);
}

.vcp-setting__content[hidden] { display: none; }

.vcp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vcp-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.vcp-field--full { grid-column: 1 / -1; }

.vcp-field label {
    color: var(--vcp-muted);
    font-size: 0.9375rem;
    font-weight: 500;
}

.vcp-field input,
.vcp-field select,
.vcp-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--vcp-line);
    border-radius: var(--vefa-radius-md);
    color: var(--vcp-ink);
    background: var(--vcp-canvas);
}

.vcp-field input:focus,
.vcp-field select:focus,
.vcp-field textarea:focus {
    border-color: var(--vcp-blue);
    background: var(--vcp-white);
    outline: none;
    box-shadow: var(--vefa-ring-focus);
}

.vcp-field textarea {
    min-height: 90px;
    resize: vertical;
}

.vcp-field__help {
    color: var(--vcp-muted);
    font-size: 0.8125rem;
}

.vcp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 15px;
}

.vcp-notification-fields {
    display: grid;
    gap: 14px;
}

.vcp-notification-fields .vcp-field { max-width: 330px; }

.vcp-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.vcp-setting-row + .vcp-setting-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vcp-line);
}

.vcp-setting-row__copy { min-width: 0; }

.vcp-setting-row strong {
    display: block;
    color: var(--vcp-ink);
    font-weight: 500;
}

.vcp-setting-row p {
    margin: 4px 0 0;
    color: var(--vcp-muted);
    font-size: 0.875rem;
}

/* Interrupteur — la case native reste dans le flux (jamais `display:none`)
   pour rester atteignable au clavier et exposée aux lecteurs d'écran. */
.vcp-switch {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.vcp-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.vcp-switch__track {
    position: absolute;
    inset: 0;
    border-radius: var(--vefa-radius-pill);
    background: var(--vcp-line);
    pointer-events: none;
    transition: background var(--vefa-duration-base) var(--vefa-ease-out);
}

.vcp-switch__track::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--vcp-white);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: transform var(--vefa-duration-base) var(--vefa-ease-out);
}

.vcp-switch input:checked + .vcp-switch__track { background: var(--vcp-blue); }
.vcp-switch input:checked + .vcp-switch__track::after { transform: translateX(19px); }
.vcp-switch input:focus-visible + .vcp-switch__track { box-shadow: var(--vefa-ring-focus); }

.vcp-setting--danger { border-color: var(--vcp-danger-line); }

.vcp-setting--danger .vcp-setting__toggle {
    color: var(--vcp-danger);
    background: var(--vcp-danger-bg-faint);
}

.vcp-setting--danger .vcp-setting__chevron { color: var(--vcp-danger); }

/* ============================ Modale de suppression ============================ */

.vcp-modal-backdrop {
    position: fixed;
    inset: 0;
    /* Au-dessus de l'en-tête de site (z-index 1030) mais sous les toasts (1080). */
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: var(--vefa-overlay);
}

.vcp-modal-backdrop.is-open { display: flex; }

.vcp-modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    border: 1px solid var(--vcp-line);
    border-radius: 20px;
    background: var(--vcp-white);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.25);
}

.vcp-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 21px 22px;
    border-bottom: 1px solid var(--vcp-line);
}

.vcp-modal__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    color: var(--vcp-danger);
    background: var(--vcp-danger-bg);
}

.vcp-modal__titles { flex: 1; min-width: 0; }

.vcp-modal__titles h2 {
    margin: 0;
    color: var(--vcp-strong);
    font-size: 1.375rem;
    font-weight: 500;
}

.vcp-modal__titles p {
    margin: 5px 0 0;
    color: var(--vcp-muted);
    font-size: 0.9375rem;
}

.vcp-modal__close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    color: var(--vcp-muted);
    background: var(--vcp-soft);
}

.vcp-modal__close:hover { color: var(--vcp-ink); }

.vcp-modal__body { padding: 22px; }

.vcp-data-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.vcp-data-note > div {
    padding: 14px;
    border-radius: 12px;
}

.vcp-data-note strong {
    display: block;
    margin-bottom: 7px;
    font-weight: 500;
}

.vcp-data-note ul {
    margin: 0;
    padding-left: 18px;
    color: var(--vcp-muted);
    font-size: 0.875rem;
}

.vcp-data-note--deleted {
    border: 1px solid var(--vcp-danger-line);
    background: var(--vcp-danger-bg);
}

.vcp-data-note--deleted strong { color: var(--vcp-danger-strong); }

.vcp-data-note--kept {
    border: 1px solid var(--vcp-keep-line);
    background: var(--vcp-keep-bg);
}

.vcp-data-note--kept strong { color: var(--vcp-keep-strong); }

.vcp-delete-fields {
    display: grid;
    gap: 13px;
}

.vcp-delete-note {
    margin: 5px 0 0;
    color: var(--vcp-muted);
    font-size: 0.8125rem;
}

.vcp-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 19px;
}

.vcp-delete-final {
    border-color: var(--vcp-danger);
    color: var(--vefa-text-on-primary);
    background: var(--vcp-danger);
}

.vcp-delete-final:hover {
    border-color: var(--vcp-danger-strong);
    color: var(--vefa-text-on-primary);
    background: var(--vcp-danger-strong);
}

.vcp-delete-final:disabled,
.vcp-delete-final:disabled:hover {
    border-color: var(--vcp-line);
    color: var(--vcp-muted);
    background: var(--vcp-soft);
}

/* Rappel des chiffres du compte avant suppression (page /delete-account/). */
.vcp-delete-stats {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--vcp-line);
    border-radius: 12px;
    background: var(--vcp-canvas);
}

.vcp-delete-stats__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9375rem;
}

.vcp-delete-stats__row dt {
    margin: 0;
    color: var(--vcp-muted);
    font-weight: 400;
}

.vcp-delete-stats__row dd {
    margin: 0;
    color: var(--vcp-strong);
    font-weight: 500;
}

/* Page autonome /delete-account/ : même vocabulaire visuel que la modale. */
.vcp-standalone {
    max-width: 640px;
    margin: 0 auto;
    padding: 34px 16px 58px;
}

.vcp-standalone .vcp-modal {
    width: 100%;
    max-height: none;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.vcp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid var(--vcp-danger-line);
    border-radius: 12px;
    color: var(--vcp-danger-strong);
    background: var(--vcp-danger-bg);
    font-size: 0.9375rem;
}

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

@media (max-width: 960px) {
    .vcp-grid { grid-template-columns: minmax(0, 1fr); }

    .vcp-identity__main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 20px;
        text-align: left;
    }

    .vcp-avatar-wrap {
        grid-row: 1 / 4;
        margin: 0;
    }

    .vcp-chips { justify-content: flex-start; }

    .vcp-social,
    .vcp-level,
    .vcp-identity__actions { grid-column: 1 / -1; }

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

    .vcp-quicklink { border-bottom: 0; }
}

@media (max-width: 690px) {
    .vcp-page { padding: 22px 14px 40px; }
    .vcp-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 28px 22px;
    }
    .vcp-hero__action .vcp-button { width: 100%; }

    .vcp-identity__main {
        display: block;
        text-align: center;
    }
    .vcp-avatar-wrap { margin: 0 auto 15px; }
    .vcp-chips { justify-content: center; }

    .vcp-quicklinks { grid-template-columns: minmax(0, 1fr); }

    .vcp-tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .vcp-tab {
        flex: 0 0 auto;
        padding: 0 12px;
    }

    .vcp-panel { padding: 18px; }

    .vcp-stats,
    .vcp-badge-grid,
    .vcp-form-grid,
    .vcp-data-note { grid-template-columns: minmax(0, 1fr); }

    .vcp-field--full { grid-column: auto; }

    .vcp-community { grid-template-columns: minmax(0, 1fr); }

    .vcp-event { grid-template-columns: 42px minmax(0, 1fr); }
    .vcp-event time { grid-column: 2; }

    .vcp-panel__head { flex-direction: column; }

    .vcp-modal__actions { flex-direction: column-reverse; }
    .vcp-modal__actions .vcp-button { width: 100%; }
}

/* ⚠️ Sur mobile, `.mobile_bottom_nav` (65 px, membres connectés) est fixée en bas
   et recouvrait le bas de la modale : avec `flex-direction: column-reverse`, c'est
   « Annuler » qui passait dessous, donc inatteignable. On réserve la hauteur de la
   barre — plus la zone sûre iOS — dans le fond de la modale. */
@media (max-width: 767px) {
    .vcp-modal-backdrop {
        padding-bottom: calc(22px + 65px + env(safe-area-inset-bottom, 0px));
    }
    .vcp-modal {
        max-height: calc(100vh - 44px - 65px - env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vcp-button:hover,
    .vcp-badge-item:hover,
    .vcp-program:hover { transform: none; }
    .vcp-setting__chevron,
    .vcp-switch__track,
    .vcp-switch__track::after { transition: none; }
}