/* ══════════════════════════════════════════
   Espace membre — « Mon espace »
   Layout sidebar + contenu principal
   ══════════════════════════════════════════ */

.member-area {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.member-layout {
    display: block;
}

@media (min-width: 1024px) {
    .member-layout {
        display: grid;
        grid-template-columns: 15rem 1fr;
        gap: var(--spacing-2xl);
        align-items: start;
        transition: grid-template-columns 200ms ease;
    }

    /* État replié : le sidebar passe à 3.5rem (icônes seules) */
    .member-layout--collapsed {
        grid-template-columns: 3.5rem 1fr;
    }
}

/* ══════════════════════════════════════════
   Sidebar navigation
   ══════════════════════════════════════════ */

.member-sidebar__toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    background: #fff;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .member-sidebar__toggle { display: none; }

    /* Sidebar = grid item auto-height → on ancre le sticky ici pour avoir
       la pleine plage du contenu principal (ne pas mettre le sticky sur l'inner). */
    .member-sidebar {
        position: sticky;
        top: 5rem;
        align-self: start;
    }
}

.member-sidebar__inner {
    display: none;
}

.member-sidebar__inner--open {
    display: block;
}

@media (min-width: 1024px) {
    .member-sidebar__inner {
        display: block;
        position: relative;
    }
}

.member-sidebar__inner {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* Bouton collapse/expand (desktop uniquement) */
.member-sidebar__collapse {
    display: none;
}

@media (min-width: 1024px) {
    .member-sidebar__collapse {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: #fff;
        color: var(--color-text-light);
        cursor: pointer;
        transition: color 150ms ease, border-color 150ms ease;
        z-index: 2;
    }

    .member-sidebar__collapse:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .member-sidebar__collapse svg {
        transition: transform 200ms ease;
    }
}

/* Header profil */
.member-nav__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.member-nav__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.member-nav__greeting {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0;
}

.member-nav__email {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Navigation items */
.member-nav__list {
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
}

.member-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.5rem var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.member-nav__link:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.member-nav__link--active {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

/* Accent vertical à gauche — rend l'état actif clairement visible même
   quand la couleur d'accent du thème est subtile. */
.member-nav__link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--color-primary);
}

.member-nav__icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.member-nav__link--active .member-nav__icon {
    opacity: 1;
}

/* Footer logout */
.member-nav__footer {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.member-nav__link--logout {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    gap: var(--spacing-xs);
}

.member-nav__link--logout:hover {
    color: var(--color-danger);
    background: none;
}

/* ══════════════════════════════════════════
   Sidebar repliée — icônes seules, tooltips natifs via title=""
   Desktop uniquement (≥ 1024px)
   ══════════════════════════════════════════ */

@media (min-width: 1024px) {
    /* Sidebar repliée : on masque entièrement le bloc avatar + identité.
       Seul le bouton collapse reste en haut, centré, pour reprendre la
       fonction de point d'ancrage visuel et l'action « déplier ». */
    .member-layout--collapsed .member-nav__header {
        display: none;
    }

    .member-layout--collapsed .member-sidebar__collapse {
        position: static;
        display: flex;
        margin: var(--spacing-sm) auto;
        width: 2rem;
        height: 2rem;
    }

    /* Liens : centrer l'icône, masquer le label */
    .member-layout--collapsed .member-nav__link {
        justify-content: center;
        padding-inline: 0;
    }

    .member-layout--collapsed .member-nav__label {
        display: none;
    }

    /* Compense l'indicateur actif (plus de fond large, juste l'icône teintée) */
    .member-layout--collapsed .member-nav__link--active {
        background: transparent;
    }

    .member-layout--collapsed .member-nav__link--active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.25rem;
        bottom: 0.25rem;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: var(--color-primary);
    }

    .member-layout--collapsed .member-nav__link {
        position: relative;
    }

    /* Footer déconnexion : même traitement */
    .member-layout--collapsed .member-nav__footer {
        padding: var(--spacing-sm);
    }

    .member-layout--collapsed .member-nav__link--logout {
        justify-content: center;
        gap: 0;
    }
}

/* ══════════════════════════════════════════
   Contenu principal
   ══════════════════════════════════════════ */

.member-content {
    min-width: 0;
}

/* Alertes */
.member-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Border 1px très subtil pour détacher le background tinté du fond
   neutre de la page (canvas gris très clair). Couleur dérivée du texte
   à très faible opacité pour rester discrète. */
.member-alert--success { background: #e8f5e9; color: #2e7d32; border: 1px solid color-mix(in srgb, #2e7d32 18%, transparent); }
.member-alert--info { background: var(--color-primary-light); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent); }
.member-alert--warning { background: #fff7ed; color: #9a3412; border: 1px solid color-mix(in srgb, #9a3412 18%, transparent); }
.member-alert--danger { background: #fef2f2; color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 18%, transparent); }

.member-alert p {
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Variante --stacked : empile les paragraphes verticalement (flex column),
   tous alignés à gauche. Indispensable quand l'alerte porte plusieurs <p>
   (sinon le flex row les met côte à côte et les tronque). */
.member-alert--stacked {
    flex-direction: column;
    align-items: flex-start;
}

.member-alert--stacked p {
    flex: 0 0 auto;
    width: 100%;
}

.member-alert--stacked p + p {
    margin-top: var(--spacing-xs);
}

.member-alert button,
.member-alert__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    line-height: 1;
    cursor: pointer !important;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.member-alert__close svg,
.member-alert button svg {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

.member-alert__close:hover,
.member-alert__close:focus-visible,
.member-alert button:hover,
.member-alert button:focus-visible {
    opacity: 1;
    background: rgb(0 0 0 / 10%);
}

.member-alert__close:focus-visible,
.member-alert button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════
   Pages — titres, sections
   ══════════════════════════════════════════ */

.member-page__title {
    font-size: var(--font-size-2xl);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: var(--spacing-xl);
}

/* Header de page avec actions à droite (titre + bouton primaire). Réutilisé
   par /forum, alignable sur les autres pages liste à venir. */
.member-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.member-page__header .member-page__title {
    margin-bottom: 0;
}

.member-page__header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Dashboard — cards + shortcuts
   ══════════════════════════════════════════ */

.member-dashboard__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

@media (min-width: 640px) {
    .member-dashboard__cards { grid-template-columns: 1fr 1fr; }
}

.member-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.member-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.member-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.member-card__detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.member-card__detail-meta {
    display: block;
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

/* Variante "success" : utilisee sur le dashboard quand une adhesion
   est active pour souligner visuellement l'etat positif (icone
   doree, accent vert, libelle "Adherent actif" en valeur). */
.member-card--success {
    background: color-mix(in srgb, #2f9e44 4%, #fff);
    border-color: color-mix(in srgb, #2f9e44 25%, var(--color-border));
}

.member-card--success .member-card__icon {
    background: color-mix(in srgb, #2f9e44 14%, #fff);
    color: #2f9e44;
}

.member-card__highlight {
    margin: 0 0 2px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #2f9e44;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.member-card__highlight::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #2f9e44;
}

.member-card__link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.member-card__link:hover {
    text-decoration: underline;
}

/* Shortcuts grid */
.member-dashboard__subtitle {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.member-dashboard__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .member-dashboard__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .member-dashboard__grid { grid-template-columns: repeat(3, 1fr); }
}

.member-shortcut {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.member-shortcut:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.member-shortcut__icon {
    flex-shrink: 0;
    color: var(--color-primary);
    grid-column: 1;
    grid-row: 1 / span 2;
}

.member-shortcut__name {
    display: block;
    grid-column: 2;
    grid-row: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.member-shortcut__desc {
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.4;
}

/* ══════════════════════════════════════════
   Formulaires membre
   ══════════════════════════════════════════ */

.member-section {
    padding: var(--spacing-xl) 0;
}

/* Séparateur uniquement entre deux sections member-section consécutives.
   `:has(~ .member-section)` cible une section qui a une sœur suivante de
   même type — donc pas de border orpheline quand l'onglet Présentation
   contient une seule section + des modales (pickers) en frères. */
.member-section:has(~ .member-section) {
    border-bottom: 1px solid var(--color-border);
}

.member-section__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.member-section--danger {
    border-bottom-color: #fecaca;
}

.member-section--danger .member-section__title {
    color: var(--color-danger);
}

.member-section__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.member-section__alert {
    margin-bottom: var(--spacing-md);
}

/* ── Barre de filtres GET (chips type segmented control) ───────────────
   Utilisée par /marque-pages pour filtrer la liste par sous-type sans
   passer par un onglet Alpine. Liens GET (pas radios), donc visuel
   distinct du `.notif-pref-chips` (qui pilote un form). Compteur intégré
   à la pilule via `.member-filter-bar__badge`. */
.member-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.member-filter-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.member-filter-bar__chip:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-primary, #304278) 30%, var(--color-border));
}

.member-filter-bar__chip:focus-visible {
    outline: 2px solid var(--color-primary, #304278);
    outline-offset: 2px;
}

.member-filter-bar__chip--active {
    background: var(--color-primary, #304278);
    border-color: var(--color-primary, #304278);
    color: #fff;
}

.member-filter-bar__chip--active:hover {
    color: #fff;
    border-color: var(--color-primary, #304278);
}

.member-filter-bar__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    background: rgb(0 0 0 / 8%);
    color: inherit;
}

.member-filter-bar__chip--active .member-filter-bar__badge {
    background: rgb(255 255 255 / 22%);
}

/* Modifieur « card » — section encadrée façon panneau d'équipe Mon CESU
   (`.cesu-team-add__panel`). Utilisé pour donner aux formulaires Mon profil
   (Coordonnées, Biographie) la même ergonomie visuelle que les forms de
   gestion d'équipe : fond légèrement grisé, bord visible, padding interne,
   titre cohérent. Annule la border-bottom de séparation entre sections (les
   panels se suffisent à eux-mêmes). */
.member-section--card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: var(--color-surface-alt, #f9f9fb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}

.member-section--card:has(~ .member-section),
.member-section.member-section--card:has(~ .member-section--card) {
    border-bottom: 1px solid var(--color-border);
}

.member-section--card .member-section__title {
    margin-top: 0;
}

/* Mode compact pour adhésion terminée (expirée / annulée) — une seule ligne
   horizontale lisible : badge statut + tarif + période + compteur contacts.
   On allège le padding et on retire les actions (lecture seule). */
.member-section--terminated {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light, #f3f4f6);
    opacity: 0.85;
}

.cesu-membership-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.cesu-membership-compact__title {
    font-weight: 600;
    color: var(--color-text);
}

.cesu-membership-compact__period,
.cesu-membership-compact__count {
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════
   Formulaire OTP dédié (confirmation suppression / changement email)
   ══════════════════════════════════════════ */

.member-otp-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.member-otp-form__field {
    max-width: 22rem;
}

.member-otp-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

/* ══════════════════════════════════════════
   Formulaire newsletter (préférences topics)
   ══════════════════════════════════════════ */

.member-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ══════════════════════════════════════════
   Toolbar inbox notifications — tabs statuts + accès préférences
   ══════════════════════════════════════════ */

.member-notifications-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

/* ══════════════════════════════════════════
   Préférences notifications — liste type + chips fréquence email
   (segmented control via radios cachés, un chip sélectionné par ligne)
   ══════════════════════════════════════════ */

.notif-pref-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.notif-pref-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.notif-pref-list__item:last-child {
    border-bottom: none;
}

.notif-pref-list__label {
    flex: 1 1 12rem;
    min-width: 0;
}

.notif-pref-list__name {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

/* Segmented control : un groupe de chips dont un seul peut être actif */
.notif-pref-chips {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-light);
    padding: 0.25rem;
    flex-wrap: wrap;
}

.notif-pref-chips__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.notif-pref-chips__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.notif-pref-chips__chip:hover {
    color: var(--color-text);
}

.notif-pref-chips__input:checked + .notif-pref-chips__chip {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.notif-pref-chips__input:focus-visible + .notif-pref-chips__chip {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Responsive : mobile — chips passent en wrap, label au-dessus */
@media (max-width: 640px) {
    .notif-pref-list__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .notif-pref-list__label {
        flex: 1 1 auto;
    }

    .notif-pref-chips {
        width: 100%;
        justify-content: space-between;
    }

    .notif-pref-chips__chip {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.5rem;
    }
}

/* ══════════════════════════════════════════
   Boutons membre
   ══════════════════════════════════════════ */

/* member-btn supprimé — utiliser les classes btn globales */

/* ══════════════════════════════════════════
   Badges membre
   ══════════════════════════════════════════ */

/* .member-badge — variante "pill compact" distincte de .badge global :
   border-radius: 100px (vs 0.5rem), casse normale (vs UPPERCASE),
   font-weight: 600 (vs 700). Conservé volontairement pour les
   indicateurs de statut espace membre (adhésion, MFA, légal) où le
   ton plus discret est préférable. */
.member-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* Border 1px très subtil — même formule que .member-alert--* :
   couleur dérivée du texte à 18% d'opacité. Détache le tag du fond
   neutre quand il est posé contre un canvas blanc. */
.member-badge--success { background: #e8f5e9; color: #2e7d32; border: 1px solid color-mix(in srgb, #2e7d32 18%, transparent); }
.member-badge--warning { background: #fff3e0; color: #e65100; border: 1px solid color-mix(in srgb, #e65100 18%, transparent); }
.member-badge--secondary { background: var(--color-bg-light); color: var(--color-text-light); border: 1px solid color-mix(in srgb, var(--color-text-light) 18%, transparent); }

/* ══════════════════════════════════════════
   Info grid (données, session)
   ══════════════════════════════════════════ */

.member-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .member-info-grid { grid-template-columns: 1fr 1fr; }
}

.member-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.member-info-item__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
}

.member-info-item__value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

/* ══════════════════════════════════════════
   Méthodes de sécurité — liste post-login
   ══════════════════════════════════════════ */

.member-methods-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Boutons d'ajout de méthodes placés sous la liste — flex wrap pour
   responsive, gap cohérent avec le reste. */
.member-methods-add {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.member-method {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Variante d'alerte (ex: codes de secours épuisés) */
.member-method--warning {
    background: #fffbeb;
    border-color: #fcd34d;
}

.member-method--warning .member-method__icon {
    background: #fde68a;
    color: #b45309;
}

/* Variante session courante — met légèrement en évidence l'appareil actuel */
.member-method--current {
    border-color: var(--color-primary, #304278);
    background: color-mix(in srgb, var(--color-primary, #304278) 4%, #fff);
}

.member-method__badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-primary, #304278);
    color: #fff;
    line-height: 1;
}

@media (max-width: 639px) {
    .member-method {
        grid-template-columns: auto 1fr;
    }

    .member-method__actions {
        grid-column: 1 / -1;
    }
}

.member-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-50, #e8edfa);
    color: var(--color-primary, #304278);
    flex-shrink: 0;
}

.member-method__body {
    min-width: 0;
}

.member-method__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text);
    margin-bottom: 0.125rem;
}

.member-method__device {
    font-weight: 400;
    color: var(--color-text-light);
    text-transform: lowercase;
}

.member-method__meta {
    font-size: var(--font-size-xs, 0.8rem);
    color: var(--color-text-light, #555);
    line-height: 1.4;
}

.member-method__actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

/* Compense les deux niveaux de sticky header (workspace topbar + tabs
   globaux + sticky de la page Confidentialité) lors d'un scrollIntoView
   sur une ancre interne (ex. #codes-secours après régénération). */
.member-section[id] {
    scroll-margin-top: 14rem;
}

.member-method__rename {
    position: relative;
}

.member-method__rename-form {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

.member-method__rename-form input[type="text"] {
    flex: 1;
    min-width: 10rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.member-method__rename-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(48, 66, 120, 0.15);
}

/* Panneau de confirmation inline (remplace le confirm() natif pour les
   actions destructives : supprimer clé, désactiver TOTP, régénérer codes). */
.member-method__confirm {
    grid-column: 1 / -1;
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
}

.member-method__confirm-text {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.5;
}

.member-method__confirm-text strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-danger, #b91c1c);
    font-weight: var(--font-weight-semibold, 600);
}

.member-method__confirm-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    align-items: center;
}

.member-method__confirm-actions form {
    margin: 0;
}

/* ══════════════════════════════════════════
   Confirmation danger
   ══════════════════════════════════════════ */

.member-confirm-danger {
    padding: var(--spacing-md);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
}

.member-confirm-danger__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ══════════════════════════════════════════
   Empty state
   ══════════════════════════════════════════ */

.member-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-3xl) var(--spacing-md);
    text-align: center;
    color: var(--color-text-light);
}

.member-empty svg { opacity: 0.4; }

.member-empty__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.member-empty__text {
    font-size: var(--font-size-sm);
}

/* ══════════════════════════════════════════
   Benefits list (adhésion)
   ══════════════════════════════════════════ */

.member-benefits {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.member-benefits__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.member-benefits__item svg {
    flex-shrink: 0;
    color: #2e7d32;
}

/* ══════════════════════════════════════════
   Support actions
   ══════════════════════════════════════════ */

.member-support__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* ══════════════════════════════════════════
   Form actions
   ══════════════════════════════════════════ */

.member-form__actions {
    padding-top: var(--spacing-xl);
}

.member-card--large {
    padding: var(--spacing-xl);
}

.member-card--large .member-card__icon {
    width: 3.5rem;
    height: 3.5rem;
}

/* ══════════════════════════════════════════
   Connexion OTP — 2 colonnes semantiques :
   gauche = "Connexion sans mot de passe" (photo + carte form)
   droite = "Pas encore de compte ?" (3 CTAs)
   ══════════════════════════════════════════ */

.login-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

@media (min-width: 64em) {
    .login-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 1fr);
        gap: var(--spacing-3xl);
        align-items: stretch;
    }
}

/* ── Hero : photo en arriere-plan + titre + carte form superposes ── */

.login-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    background: #0c1520;
    isolation: isolate;
}

/* Photo = fond absolute du hero (z-0) */
.login-hero__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    pointer-events: none;
}

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

/* Degrade uniforme : assombrit pour lisibilite du titre et de la carte */
.login-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 35%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
}

/* Contenu : titre + carte form, en flux normal, au-dessus de la photo */
.login-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
}

@media (min-width: 64em) {
    .login-hero__content {
        padding: var(--spacing-2xl);
        gap: var(--spacing-2xl);
    }
}

.login-hero__content > * {
    width: 100%;
    max-width: 32rem;
}

.login-hero__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    max-width: 28rem;
}

.login-hero__title mark {
    background: transparent;
    color: inherit;
    padding: 0;
    font-weight: 800;
}

/* Credit photo : pastille bas-gauche, pointer-events auto pour les liens */
.login-hero__caption {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 3;
    pointer-events: auto;
}

.login-hero__caption .photo-credit {
    margin: 0;
    padding: 0.25rem var(--spacing-sm);
    font-size: 0.6875rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-sm);
    text-align: left;
}

.login-hero__caption .photo-credit a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.login-hero__caption .photo-credit a:hover {
    color: var(--color-accent);
}

/* Arrondis prononces cote droit quand le hero colle au bord gauche */
@media (min-width: 64em) {
    .login-hero {
        margin-left: calc(-1 * max(var(--spacing-md), (100vw - var(--container-max)) / 2 + var(--spacing-md)));
        width: calc(100% + max(var(--spacing-md), (100vw - var(--container-max)) / 2 + var(--spacing-md)));
        border-radius: 0 2.5rem 2.5rem 0;
    }
}

@media (min-width: 75em) {
    .login-hero {
        margin-left: calc(-1 * max(var(--spacing-xl), (100vw - var(--container-max)) / 2 + var(--spacing-xl)));
        width: calc(100% + max(var(--spacing-xl), (100vw - var(--container-max)) / 2 + var(--spacing-xl)));
        border-radius: 0 3rem 3rem 0;
    }
}

/* ── Carte form "Connexion sans mot de passe" ── */
.login-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-2xl);
    max-width: 32rem;
}

@media (max-width: 47.9375em) {
    .login-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

.login-card__lead {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.55;
}

.login-card__alert {
    margin-bottom: var(--spacing-lg);
}

/* Bandeau de suggestion d'enrôlement passkey affiché au dashboard pour
   les utilisateurs sans passkey. Auto-dismissible le temps de la session. */
.passkey-suggestion {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-xl);
    padding: var(--spacing-lg);
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg);
}

@media (max-width: 47.9375em) {
    .passkey-suggestion {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .passkey-suggestion__actions {
        grid-column: 1 / -1;
        margin-top: var(--spacing-sm);
    }
}

.passkey-suggestion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary, #1e3a8a);
    color: #fff;
    flex-shrink: 0;
}

.passkey-suggestion__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
}

.passkey-suggestion__lead {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light, #475569);
    line-height: 1.5;
}

.passkey-suggestion__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

@media (max-width: 35.9375em) {
    .passkey-suggestion__actions {
        flex-direction: column;
        width: 100%;
    }
}

/* Variantes pages access (login_required / forbidden) — icone d'amorce
   en haut de la carte + texte d'accompagnement + pile d'actions verticales. */
.login-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--spacing-lg);
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.login-card__text {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.55;
}

.login-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Variante : conserve pour pages qui gardent un H2 (ex: login_code) */
.login-card__header {
    margin-bottom: var(--spacing-lg);
}

.login-card__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.login-card__header .login-card__lead {
    margin: 0;
}

/* Footer de la carte : separateur + liste des benefices */
.login-card__footer {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.login-benefits__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.login-benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.5;
}

.login-benefits li svg {
    flex-shrink: 0;
    color: var(--color-success);
    margin-top: 2px;
}

/* ── Colonne CTAs "Pas encore de compte ?" ── */
.login-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

@media (min-width: 64em) {
    .login-ctas {
        /* Centrage vertical dans la colonne pour equilibrer avec le hero gauche */
        justify-content: center;
        align-self: stretch;
        min-height: 100%;
    }
}

.login-ctas__header {
    margin: 0;
}

.login-ctas__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.login-ctas__lead {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.55;
}

.login-cta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.login-cta {
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--color-border);
    transition: transform var(--transition-fast);
}

.login-cta:first-child {
    border-top: none;
    padding-top: var(--spacing-md);
}

.login-cta:last-child {
    padding-bottom: var(--spacing-md);
}

.login-cta:hover {
    transform: translateX(2px);
}

.login-cta__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.login-cta__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.55;
    margin: 0 0 var(--spacing-sm);
}

.login-cta__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-navy);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.login-cta__link svg {
    transition: transform var(--transition-fast);
}

.login-cta__link:hover {
    color: var(--color-primary);
}

.login-cta__link:hover svg {
    transform: translateX(3px);
}

.login-note {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-light);
    border-left: 3px solid var(--color-navy);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.55;
    margin: 0;
}

.login-note strong {
    color: var(--color-text);
}

.login-note__icon {
    float: left;
    margin-right: var(--spacing-sm);
    color: var(--color-navy);
}

.login-code {
    max-width: 24rem;
}

.login-code__input {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: 0.5rem;
    text-align: center;
    padding: var(--spacing-md);
}

.login-code__input::placeholder {
    letter-spacing: 0.5rem;
    color: var(--color-border);
}

.login-code__actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MFA — Enrôlement et challenge 2FA (Identity module)
   ═══════════════════════════════════════════════════════════════════════════ */

.mfa-steps {
    list-style: decimal inside;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
    padding: 0;
}

.mfa-steps__item {
    padding-left: var(--spacing-sm);
}

.mfa-steps .mfa-steps__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--spacing-xs);
}

.mfa-steps__text {
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md);
}

.mfa-qrcode {
    display: flex;
    justify-content: center;
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.mfa-secret {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.mfa-secret__toggle {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
}

.mfa-secret__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-sm) 0;
}

.mfa-secret__value {
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--font-size-base);
    background: var(--color-background);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    word-break: break-all;
}

.mfa-recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.mfa-recovery-codes__item {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--font-size-base);
    font-weight: 500;
    padding: var(--spacing-sm);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    letter-spacing: 0.05em;
    user-select: all;
}

.mfa-recovery {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-md);
}

.mfa-recovery__toggle {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
}

.mfa-webauthn-section {
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.mfa-webauthn-section > .mfa-steps__title {
    margin-top: 0;
}

.mfa-recovery-codes-inline {
    margin-top: var(--spacing-lg);
}

@media print {
    .login-ctas,
    .login-card__header,
    .login-hero__photo,
    .mfa-ack,
    .login-code__actions,
    .mfa-webauthn-section,
    form {
        display: none !important;
    }

    .mfa-recovery-codes {
        grid-template-columns: repeat(2, 1fr);
        border: 2px solid #000;
    }

    .mfa-recovery-codes__item {
        border: 1px solid #000;
        background: #fff;
    }
}

/* ══════════════════════════════════════════
   Impression — codes de secours uniquement
   Sur /espace/securite, le bouton Imprimer doit produire une feuille
   minimaliste contenant uniquement l'en-tête + les 10 codes (pas de navbar,
   pas de sidebar, pas des autres sections).
   ══════════════════════════════════════════ */

/* En-tête visible uniquement à l'impression */
.member-print-header {
    display: none;
}

@media print {
    /* Masque tout ce qui n'est pas dans la zone imprimable, via visibility
       (garde l'espace de layout mais cache visuellement). */
    body * {
        visibility: hidden;
    }

    .member-print-zone,
    .member-print-zone * {
        visibility: visible;
    }

    /* Promeut la zone en plein document imprimé */
    .member-print-zone {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 1.5cm;
    }

    /* En-tête papier visible */
    .member-print-header {
        display: block;
        margin-bottom: 0.8cm;
        padding-bottom: 0.4cm;
        border-bottom: 2px solid #000;
    }

    .member-print-header h2 {
        margin: 0 0 0.3cm;
        font-size: 18pt;
        color: #000;
    }

    .member-print-header p {
        margin: 0.15cm 0;
        font-size: 10pt;
        color: #000;
        line-height: 1.4;
    }

    /* Cache les alertes, actions et tout élément interactif dans la zone */
    .member-print-zone .alert,
    .member-print-zone .mfa-recovery-actions,
    .member-print-zone form,
    .member-print-zone button {
        display: none !important;
    }

    /* Grille de codes : noir sur blanc, grande, lisible au stylo */
    .member-print-zone .mfa-recovery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.3cm !important;
        margin: 0 !important;
    }

    .member-print-zone .mfa-recovery-grid__code {
        display: block;
        border: 1px solid #000;
        background: #fff;
        padding: 0.4cm;
        font-family: 'Courier New', monospace;
        font-size: 12pt;
        font-weight: 700;
        color: #000;
        text-align: center;
        letter-spacing: 1px;
    }
}

/* ══════════════════════════════════════════
   Toggle switch pour les consentements RGPD
   /espace/consentements
   ══════════════════════════════════════════ */
.consent-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.consent-toggle__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.consent-toggle__track {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--color-border);
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.consent-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    transition: transform 0.2s ease;
}

.consent-toggle__input:checked ~ .consent-toggle__track {
    background: var(--color-primary);
}

.consent-toggle__input:checked ~ .consent-toggle__track .consent-toggle__thumb {
    transform: translateX(1.25rem);
}

.consent-toggle__input:focus-visible ~ .consent-toggle__track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.consent-toggle__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    min-width: 4.5rem;
}

.consent-toggle__state {
    display: none;
}

.consent-toggle__input:checked ~ .consent-toggle__label .consent-toggle__state--on {
    display: inline;
    color: var(--color-primary);
}

.consent-toggle__input:not(:checked) ~ .consent-toggle__label .consent-toggle__state--off {
    display: inline;
}

/* ══════════════════════════════════════════
   Hints et liens d'aide dans les formulaires membre
   ══════════════════════════════════════════ */
.member-form__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.4;
    margin: var(--spacing-xs) 0 0;
    font-weight: 400;
}

.member-form__hint-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.member-form__hint-link:hover,
.member-form__hint-link:focus-visible {
    color: color-mix(in srgb, var(--color-primary) 70%, #000);
    text-decoration: underline;
}

/* Ligne consentement inline dans un formulaire (toggle + libellé + hint).
   Utilisé par /profil pour le consentement biographie publique. */
.member-form__consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    margin-top: var(--spacing-sm);
}

.member-form__consent-row .consent-toggle {
    flex-shrink: 0;
    margin-top: 2px;
}

.member-form__consent-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.member-form__consent-text strong {
    font-weight: 600;
}

.member-form__consent-text .member-form__hint {
    margin-top: 0;
}

/* ══════════════════════════════════════════
   Saisie téléphone (indicatif pays + numéro) — /espace/profil
   ══════════════════════════════════════════ */
.phone-input {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}

.phone-input__country {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-alt, #f4f4f5);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.phone-input__country:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-alt, #f4f4f5));
}

.phone-input__country-flag {
    font-size: 1.125rem;
    line-height: 1;
}

.phone-input__country-caret {
    font-size: 0.75rem;
    color: var(--color-text-light);
    transition: transform 0.15s ease;
}

.phone-input__country[aria-expanded="true"] .phone-input__country-caret {
    transform: rotate(180deg);
}

.phone-input__number {
    flex: 1;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    min-width: 0;
}

.phone-input__dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    z-index: 20;
    min-width: 18rem;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
}

.phone-input__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.phone-input__option:last-child {
    border-bottom: none;
}

.phone-input__option:hover,
.phone-input__option--active {
    background: var(--color-surface-alt, #f4f4f5);
}

.phone-input__option-flag {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

.phone-input__option-name {
    flex: 1;
}

.phone-input__option-dial {
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   Autocomplete d'adresse (BAN) — /espace/profil
   ══════════════════════════════════════════ */
.address-autocomplete__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: var(--spacing-xs);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
    max-height: 18rem;
    overflow-y: auto;
}

.address-autocomplete__option {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.address-autocomplete__option:last-child {
    border-bottom: none;
}

.address-autocomplete__option:hover,
.address-autocomplete__option--active {
    background: var(--color-surface-alt, #f4f4f5);
}

/* ══════════════════════════════════════════
   Description list (Mon CESU & pages de consultation read-only)
   ══════════════════════════════════════════ */

.member-description-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

.member-description-list__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.member-description-list__row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

@media (min-width: 768px) {
    .member-description-list__row {
        grid-template-columns: 12rem 1fr;
        gap: var(--spacing-md);
    }
}

.member-description-list__term {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.member-description-list__value {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.member-description-list__value p {
    margin: 0 0 var(--spacing-sm);
}

.member-description-list__value p:last-child {
    margin-bottom: 0;
}

.member-description-list__value code {
    padding: 0.125rem 0.375rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.9em;
    background: var(--color-surface-alt, #f4f4f5);
    border-radius: var(--radius-sm, 4px);
    margin-right: var(--spacing-sm);
}

/* ══════════════════════════════════════════
   Mon CESU — Dropzone médias + grille
   ══════════════════════════════════════════ */

.cesu-media-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl) var(--spacing-lg);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-alt, #f9f9fb);
    text-align: center;
    transition: border-color 120ms ease, background-color 120ms ease;
    margin-top: var(--spacing-md);
}

.cesu-media-dropzone--over {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-alt, #f9f9fb));
}

.cesu-media-dropzone--busy {
    opacity: 0.75;
    pointer-events: none;
}

.cesu-media-dropzone__icon {
    color: var(--color-text-muted);
}

.cesu-media-dropzone__text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.cesu-media-dropzone__text strong {
    display: block;
    font-size: var(--font-size-base);
    margin-bottom: 0.25rem;
}

.cesu-media-dropzone__hint {
    color: var(--color-text-muted);
}

.cesu-media-dropzone__progress {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Mon CESU — Onglet Fichiers : barre de quota total */

.cesu-media-quota {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface-alt, #fafafa);
}

.cesu-media-quota__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.cesu-media-quota__label {
    font-weight: 600;
}

.cesu-media-quota__percent {
    color: var(--color-text-muted);
    font-weight: 400;
    margin-left: 0.25rem;
}

.cesu-media-quota__count {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.cesu-media-quota__bar {
    height: 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 15%, #fff);
    overflow: hidden;
}

.cesu-media-quota__bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.2s ease, background 0.2s ease;
    background: var(--color-primary);
}

.cesu-media-quota__bar--warning .cesu-media-quota__bar-fill {
    background: #f59e0b; /* orange */
}

.cesu-media-quota__bar--danger .cesu-media-quota__bar-fill {
    background: var(--color-danger, #dc2626);
}

/* Mon CESU — Onglet Fichiers : table alignée sur les onglets Formations / Équipe */

.cesu-media-toolbar__count {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Spécificité 0,2,0 pour battre `.cesu-trainings-table-wrap` (overflow-x:
   auto) défini plus loin dans ce même fichier — la table Fichiers ne doit
   jamais imposer un ascenseur horizontal, la colonne Nom tronque. */
.cesu-trainings-table-wrap.cesu-media-table-wrap {
    margin-top: var(--spacing-sm);
    overflow-x: hidden;
}

.cesu-media-table {
    width: 100%;
}

.cesu-media-table tbody td {
    height: 3rem;
}

/* Hack auto-layout : max-width: 0 sur la cellule Nom laisse les autres
   colonnes (icônes, badges, taille) prendre leur largeur naturelle. La
   cellule Nom récupère le reste et tronque via les span enfants
   (.cesu-media-row__name / __filename ont déjà l overflow + ellipsis). */
.cesu-media-table__name-cell {
    max-width: 0;
    overflow: hidden;
}

.cesu-media-table__preview-col {
    width: 3.5rem;
    padding-left: var(--spacing-sm);
    padding-right: 0;
}

.cesu-media-table__preview-cell {
    padding-left: var(--spacing-sm);
    padding-right: 0;
    width: 3.5rem;
}

.cesu-media-table__type-col,
.cesu-media-table__size-col {
    width: 1%;
    white-space: nowrap;
}

.cesu-media-row__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    background: var(--color-surface-alt, #f4f4f5);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.cesu-media-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cesu-media-row__thumb--doc {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
}

.cesu-media-row__name-block {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.cesu-media-row__name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cesu-media-row__filename {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cesu-media-row__rename {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cesu-media-row__rename .form-control--sm {
    height: 2rem;
    padding: 0 0.5rem;
    font-size: var(--font-size-sm);
}

.cesu-media-row--editing {
    background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}

.cesu-media-row__type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    background: color-mix(in srgb, var(--color-text-muted) 12%, #fff);
    color: var(--color-text);
}

.cesu-media-row__type-badge--image {
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    color: var(--color-primary);
}

.cesu-media-row__type-badge--doc {
    background: color-mix(in srgb, var(--color-text-muted) 14%, #fff);
    color: var(--color-text);
}

.cesu-media-table__size-cell {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.cesu-media-empty-filter {
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-md);
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface-alt, #fafafa);
}

/* ══════════════════════════════════════════
   Mon CESU — Éditeur de présentation EditorJS + picker image
   ══════════════════════════════════════════ */

/* Header en haut du panneau Présentation : description + bouton Enregistrer.
   STICKY pour rester visible quand l'utilisateur scroll dans l'éditeur EditorJS
   ou les blocs ESR/Qualité/Réseau (souvent longs). Le bouton est ainsi
   toujours accessible sans avoir à remonter, aligné à droite pour respecter
   le pattern « titre/intro à gauche, action principale à droite » des forms admin.
   Bouton unique « Enregistrer » qui agrège l'éditeur EditorJS et la fiche
   structurée via `cesuPresentationOrchestrator` Alpine.data. */
.cesu-description-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    position: sticky;
    /* Top collé à la hauteur exacte de la top-bar du site, sans aucun gap.
       Si on ajoute un spacing-sm en dessous, du contenu défile entre la
       top-bar et le sticky — pas propre. Et un pseudo-élément blanc
       au-dessus pour masquer ce gap cache aussi la border du tab nav
       qui se trouve juste sous la top-bar. La solution propre : faire
       commencer le sticky exactement au bas de la top-bar.
       1px de moins pour absorber un éventuel border-bottom de la top-bar
       (zéro gap garanti, overlap invisible si la top-bar mesure pile
       --header-height). */
    top: calc(var(--header-height, 3.5rem) - 1px);
    /* z-index élevé pour passer au-dessus de tout contenu qui scroll
       (chips, cards qualité, EditorJS toolbar). 50 > z-index typique
       des dropdowns Alpine (10-20). */
    z-index: 50;
    /* Fond blanc explicite et opaque — l'utilisateur ne doit JAMAIS voir
       transparaître le contenu qui passe en dessous au scroll. Pas de
       var(--color-bg) (peut être semi-transparent en thème sombre futur). */
    background: white;
    padding: var(--spacing-md);
    margin: calc(var(--spacing-md) * -1);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
    /* Shadow plus marquée pour signaler clairement le « pinning » sticky
       quand l'utilisateur scrolle — l'œil identifie le header comme barre
       d'action figée, pas comme contenu qui défile. */
    box-shadow: 0 4px 8px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.cesu-description-header .member-section__desc {
    flex: 1 1 20rem;
    margin: 0;
}

.cesu-description-header__save {
    flex-shrink: 0;
    align-self: flex-start;
    transition: box-shadow 150ms ease, transform 100ms ease;
}

/* Indicateur visuel de modifications en attente — léger glow sur le bouton
   pour signaler à l'utilisateur qu'il a une action en cours. Pas
   d'animation pour respecter prefers-reduced-motion. */
.cesu-description-header__save--dirty {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* État disabled « Aucune modification » : conserve l'apparence primary mais
   plus discret pour signaler que l'action est volontairement bloquée. */
.cesu-description-header__save:disabled:not(.cesu-description-header__save--dirty) {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 640px) {
    /* Mobile : header non-sticky (pas assez de hauteur viewport pour rester
       lisible) + bouton pleine largeur sous la description. */
    .cesu-description-header {
        position: static;
        margin: 0;
        padding: 0;
        background: transparent;
        border-bottom: 0;
        box-shadow: none;
    }
    .cesu-description-header__save {
        width: 100%;
    }
}

.cesu-editor {
    min-height: 120px;
    margin-top: var(--spacing-md);
    /* `padding-left` 4.5rem réservé à la toolbar EditorJS — la barre
       d'actions contient le bouton `+` (ajout de bloc) ET le bouton `≡`
       (réglages bloc) côte à côte, soit ~64px + gap. Sans cette marge,
       ils débordent à l'extérieur du cadre `.cesu-editor`. */
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 4.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    position: relative;
    /* Empêche les popovers EditorJS qui se déploient en absolute de
       déborder horizontalement sur la page (clip côté droit). */
    overflow-x: clip;
}

@media (max-width: 640px) {
    .cesu-editor {
        /* Mobile : toolbar plus serrée pour préserver la zone de saisie. */
        padding-left: 3.5rem;
    }
}

.cesu-editor .ce-block__content,
.cesu-editor .ce-toolbar__content {
    max-width: 100%;
}

.cesu-editor .ce-block {
    margin: 0.5em 0;
}

.cesu-editor .ce-paragraph {
    line-height: 1.6;
}

/* Popovers EditorJS (menu d'ajout de blocs, réglages) — z-index plus
   haut que la modale parente du picker média (z-index 2200) afin
   qu'ils restent cliquables même quand un picker est ouvert. */
.cesu-editor .ce-popover {
    z-index: 2400;
}

.cesu-editor-image {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm, 4px);
}

.cesu-editor-image__preview {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--radius-sm, 4px);
}

.cesu-editor-image__caption {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
}

.cesu-editor-image__hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.cesu-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    /* Doit recouvrir le header (.navbar z-index 1000, sous-éléments jusqu'à 2000)
       et la preview-banner (z-index 1100). */
    z-index: 2200;
}

.cesu-picker-modal {
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Modificateur pour modale de formulaire long (équipe CESU, …) :
   plus large + footer sticky avec actions Annuler/Enregistrer. */
.cesu-picker-modal--form {
    max-width: 960px;
    max-height: 92vh;
}

.cesu-team-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt, #f9fafb);
}

@media (max-width: 640px) {
    .cesu-picker-modal--form {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

.cesu-picker-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.cesu-picker-modal__header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.cesu-picker-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background-color 0.1s ease;
}

.cesu-picker-modal__close:hover {
    background: var(--color-surface-alt, #f4f4f5);
    color: var(--color-text);
}

.cesu-picker-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.cesu-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .cesu-picker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cesu-picker-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.1s ease, transform 0.1s ease;
}

.cesu-picker-item:hover,
.cesu-picker-item:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.cesu-picker-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
}

.cesu-picker-item__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cesu-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.cesu-picker-doc {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.cesu-picker-doc:hover,
.cesu-picker-doc:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface-muted, #f8f9fc);
}

.cesu-picker-doc__icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.cesu-picker-doc__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cesu-picker-doc__name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cesu-picker-doc__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ══════════════════════════════════════════
   Mon CESU — Équipe (liste + édition inline + formulaire ajout)
   ══════════════════════════════════════════ */

.cesu-team-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cesu-team-item {
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    cursor: grab;
    transition: box-shadow .15s, border-color .15s, opacity .15s;
}

.cesu-team-item[draggable="true"]:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.cesu-team-item--editing {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, #fff);
    cursor: default;
}

.cesu-team-item--dragging {
    opacity: .5;
    cursor: grabbing;
}

.cesu-team-item--drop-target {
    border-color: var(--color-primary);
    border-style: dashed;
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
}

.cesu-team-item__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    cursor: grab;
}

.cesu-team-item--dragging .cesu-team-item__drag-handle { cursor: grabbing; }

.cesu-team-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cesu-team-item__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.cesu-team-item__name {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.cesu-team-item__badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-sm, 4px);
}

.cesu-team-item__badge--muted {
    background: var(--color-text-muted);
}

.cesu-team-item__badge--success {
    background: var(--color-success, #16a34a);
}

.cesu-team-item__badge--info {
    background: var(--color-info, #0ea5e9);
}

.cesu-team-item__blocked {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
    max-width: 36rem;
}

.consent-toggle--inline {
    padding: 0 var(--spacing-sm);
    margin: 0;
    gap: var(--spacing-xs);
}

.cesu-team-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.cesu-team-item__meta > span {
    display: inline-flex;
    gap: 0.25rem;
    align-items: baseline;
}

.cesu-team-item__meta-label {
    font-weight: 600;
    color: var(--color-text-muted);
}

.cesu-team-item__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.cesu-team-item__confirm {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.cesu-team-add__panel {
    margin-top: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-surface-alt, #f9f9fb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}

.cesu-team-add__title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--color-navy-dark, var(--color-text));
}

.cesu-team-add__match {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
}

.cesu-team-add__match--blocked {
    border-color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 8%, #fff);
}

/* ══════════════════════════════════════════
   Mon CESU — Formations (onglets + listes)
   ══════════════════════════════════════════ */

.cesu-trainings-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.cesu-trainings-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: border-color 0.1s ease, color 0.1s ease;
}

.cesu-trainings-tab:hover {
    color: var(--color-text);
}

.cesu-trainings-tab--active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

.cesu-trainings-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cesu-trainings-item {
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cesu-trainings-item__body > strong {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.cesu-trainings-item__actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    align-items: center;
}

/* ══════════════════════════════════════════
   Sous-navigation à onglets — pattern partagé par les hubs de l'espace
   membre (Mon profil, Mon CESU, Communications, Confidentialité).
   ══════════════════════════════════════════ */

.member-tabs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}

.member-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    /* L'onglet chevauche la border 1px de .member-tabs pour fusionner
       les deux traits — sans cela, l'onglet actif affiche son trait
       primaire 2px au-dessus du trait gris 1px du conteneur (double bord
       visible). */
    margin-bottom: -1px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    border-top-left-radius: var(--radius-sm, 6px);
    border-top-right-radius: var(--radius-sm, 6px);
}

.member-tab:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    border-bottom-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.member-tab--active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.member-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.member-panel {
    margin-top: 0;
    padding-top: 0;
}

/* Intro de hub — phrase descriptive courte au-dessus des onglets, pour
   donner le contexte global de la page avant la sous-navigation. */
.member-hub-intro {
    margin: var(--spacing-md) 0 var(--spacing-lg);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    max-width: 70ch;
}

/* Layout 2 colonnes par section pour Mon profil (Coordonnées, Biographie,
   Adhésion). À gauche : titre de la rubrique + description. À droite :
   les champs. Mobile : 1 colonne (intro empilée au-dessus des champs).
   Pattern « settings » type Stripe / GitHub : la zone de description
   reste accrochée au champ correspondant pendant le scroll. */
.member-section--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0;
}

@media (min-width: 960px) {
    .member-section--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        column-gap: var(--spacing-2xl, 3rem);
        gap: var(--spacing-2xl, 3rem);
    }
}

.member-section--split .member-section__intro {
    min-width: 0;
}

.member-section--split .member-section__title {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.member-section--split .member-section__desc {
    margin: 0;
    max-width: 32ch;
}

.member-section--split .member-section__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

/* Variante compact pour les sections à beaucoup de champs serrés (adresse
   postale). Le gap reste sur spacing-md (aligné sur l'espacement
   Civilité ↔ Prénom de la section Identité), mais on neutralise les
   marges-bottom internes des form-field / form-group / form-row qui
   s'additionnaient au gap et créaient un double espacement. */
.member-section--compact .member-section__fields {
    gap: var(--spacing-md);
}

/* Variante stacked : intro empilée AU-DESSUS du contenu sur toute la largeur
   narrow (pas de grid 2 colonnes). Utilisée pour la rubrique Présentation du
   tableau de bord CESU — l'éditeur TipTap a besoin de toute la largeur pour
   tables, images et longues lignes de texte. */
.member-section--stacked {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0;
}

.member-section--stacked .member-section__intro {
    min-width: 0;
}

.member-section--stacked .member-section__title {
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
}

.member-section--stacked .member-section__desc {
    margin: 0;
    max-width: none;
}

.member-section--stacked .member-section__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

/* Liste « CESU rattachés » sur la fiche RESU. Cards plates, hover discret,
   icone d'ouverture en nouvel onglet a droite. */
.resu-cesus-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--spacing-sm);
}

.resu-cesus-list__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.resu-cesus-list__link:hover,
.resu-cesus-list__link:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface-hover, var(--color-surface));
    text-decoration: none;
}

.resu-cesus-list__icon {
    color: var(--color-text-muted);
    display: inline-flex;
}

.resu-cesus-list__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resu-cesus-list__ext {
    color: var(--color-text-muted);
    display: inline-flex;
}

.member-section--compact .member-section__fields .form-field,
.member-section--compact .member-section__fields .form-group,
.member-section--compact .member-section__fields .form-row {
    margin-bottom: 0;
}

/* Civilité — chips radiogroup en `fit-content` pour ne pas s'étirer sur
   toute la largeur de la colonne fields. Le label visible « Civilité »
   au-dessus suit le pattern des autres champs. */
.member-section__field-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.member-civility-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    width: fit-content;
    max-width: 100%;
}

/* Bouton lien pour supprimer un sous-bloc de formulaire (téléphone,
   adresse). Calibré pour matcher visuellement `member-form__hint-link`
   (« Changer d'adresse email ») : font-size-xs + weight 600 + underline.
   Couleur danger plutôt que primary pour la sémantique « suppression ». */
.member-form__remove-action {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: right;
    white-space: nowrap;
}

.member-form__remove-action:hover,
.member-form__remove-action:focus-visible {
    color: color-mix(in srgb, var(--color-danger) 80%, #000);
}

/* ══════════════════════════════════════════
   Combobox — select filtrable accessible (Mon profil → Profession)
   ══════════════════════════════════════════ */
.combobox {
    position: relative;
}

.combobox__field {
    position: relative;
    display: flex;
    align-items: stretch;
}

.combobox__input {
    flex: 1;
    padding-right: 2.5rem;
}

.combobox__clear {
    position: absolute;
    top: 50%;
    right: var(--spacing-sm);
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
}

.combobox__clear:hover {
    background: var(--color-surface-alt, #f4f4f5);
    color: var(--color-text);
}

.combobox__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: var(--spacing-xs);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
    max-height: 18rem;
    overflow-y: auto;
}

.combobox__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.combobox__option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combobox__option-meta {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    font-variant: small-caps;
    letter-spacing: 0.02em;
}

.combobox__option:last-child {
    border-bottom: none;
}

.combobox__option:hover,
.combobox__option--active {
    background: var(--color-surface-alt, #f4f4f5);
}

.combobox__empty {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Sticky save bar — pattern réutilisable pour les hubs avec formulaires
   longs (Mon profil → Coordonnées + Biographie). Aligné sur le pattern
   `.cesu-description-header` de Mon CESU. Le bouton « Enregistrer » reste
   accessible quand l'utilisateur scrolle dans un formulaire long, sans
   avoir à remonter en haut. */
.member-form-sticky {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    position: sticky;
    top: calc(var(--header-height, 3.5rem) - 1px);
    z-index: 50;
    background: white;
    padding: var(--spacing-md);
    margin: calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.member-form-sticky__intro {
    flex: 1 1 20rem;
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.member-form-sticky__action {
    flex-shrink: 0;
    align-self: flex-start;
}

@media (max-width: 640px) {
    .member-form-sticky {
        position: static;
        margin: 0 0 var(--spacing-md);
        padding: 0;
        background: transparent;
        border-bottom: 0;
        box-shadow: none;
    }
    .member-form-sticky__action {
        width: 100%;
    }
}

.mycesu-panel {
    /* Le panneau garde sa structure `.member-section` pour la cohérence visuelle ;
       on allège la marge ET le padding haut puisqu'il suit directement la barre d'onglets. */
    margin-top: 0;
    padding-top: 0;
}

/* Panneau Présentation — ordonne ses enfants directs : header sticky,
   alertes, éditeur EditorJS d'abord (contenu éditorial principal), puis le
   manager (blocs structurés ESR/Qualité/Réseau). On utilise `order` plutôt
   que de réorganiser le markup pour éviter une refacto à risque sur 350+
   lignes de template imbriqué. */
.mycesu-panel--presentation {
    display: flex;
    flex-direction: column;
}

.mycesu-panel--presentation > .cesu-description-header { order: 1; }
.mycesu-panel--presentation > .member-alert { order: 2; }
.mycesu-panel--presentation > [x-data*="cesuDescriptionEditor"] { order: 3; }
.mycesu-panel--presentation > .cesu-presentation-info { order: 4; }

/* ══════════════════════════════════════════
   Mon CESU — onglet Coordonnées (formulaire)
   ══════════════════════════════════════════ */

.mycesu-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.mycesu-form__fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mycesu-form__legend {
    padding: 0 var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════
   Mon CESU — Autres sites (adresses secondaires)
   ══════════════════════════════════════════ */

.mycesu-site-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mycesu-site-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
}

.mycesu-site-item--primary {
    background: color-mix(in srgb, var(--color-primary) 6%, #fff);
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.mycesu-site-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
}

.mycesu-site-item__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.mycesu-site-item__name {
    font-weight: 600;
    color: var(--color-text);
}

.mycesu-site-item__badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--spacing-xs);
    height: 1.6em;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-primary);
    color: #fff;
}

.mycesu-site-item__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    word-break: break-word;
}

.mycesu-site-item__actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    align-items: center;
}

.mycesu-site-item__confirm {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.mycesu-site-form {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: color-mix(in srgb, var(--color-text-muted) 5%, #fff);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm, 6px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mycesu-site-form__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 var(--spacing-xs);
    color: var(--color-text);
}

/* ══════════════════════════════════════════
   Mon CESU — Site internet et réseaux sociaux
   Liste verticale icône + label + URL au lieu d'une grille 3×N qui
   gaspillait l'espace horizontal et n'était pas très lisible.
   ══════════════════════════════════════════ */

.mycesu-social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mycesu-social-row {
    display: grid;
    grid-template-columns: 1.75rem 9rem 1fr;
    align-items: center;
    gap: var(--spacing-sm);
}

.mycesu-social-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text-muted);
    background: var(--color-surface-alt, #f4f4f5);
}

/* Couleurs marque pour chaque réseau au survol — discret mais identifiant. */
.mycesu-social-row__icon--linkedin { color: #0a66c2; }
.mycesu-social-row__icon--facebook { color: #1877f2; }
.mycesu-social-row__icon--youtube { color: #ff0000; }
.mycesu-social-row__icon--twitter { color: #000; }
.mycesu-social-row__icon--instagram { color: #e1306c; }

.mycesu-social-row__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.mycesu-social-row__input {
    width: 100%;
}

@media (max-width: 640px) {
    /* Mobile : empile icône+label sur une ligne, input pleine largeur dessous. */
    .mycesu-social-row {
        grid-template-columns: 1.75rem 1fr;
        grid-template-areas:
            "icon label"
            "input input";
        row-gap: var(--spacing-xs);
    }
    .mycesu-social-row__icon { grid-area: icon; }
    .mycesu-social-row__label { grid-area: label; }
    .mycesu-social-row__input { grid-area: input; }
}

/* Mon CESU — Formations : groupes de pills (domaine, tags, PDF picker) */
.cesu-trainings-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.cesu-trainings-pill {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: color-mix(in srgb, var(--color-text-muted) 5%, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.cesu-trainings-pill:hover {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
}

.cesu-trainings-pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Tags inline dans les cellules de tableau (lecture seule, compact). */
.cesu-trainings-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cesu-trainings-pill--tag {
    cursor: default;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.cesu-trainings-pill--tag:hover {
    border-color: var(--color-border);
}

.cesu-trainings-pill--readonly {
    cursor: default;
    background: color-mix(in srgb, var(--color-text-muted) 8%, #fff);
}

.cesu-trainings-pill--readonly:hover {
    border-color: var(--color-border);
}

/* Tableau formations + sessions — alternative aux cards pour densité */
.cesu-trainings-table-wrap {
    margin-top: var(--spacing-md);
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
}

.cesu-trainings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.cesu-trainings-table thead th {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 5%, #fff);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.cesu-trainings-table tbody td {
    padding: 0.55rem var(--spacing-md);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, #fff);
    font-size: var(--font-size-sm);
    vertical-align: top;
}

.cesu-trainings-table tbody tr:last-child td {
    border-bottom: none;
}

.cesu-trainings-table tbody tr:hover td {
    background: color-mix(in srgb, var(--color-primary) 3%, #fff);
}

.cesu-trainings-table__actions-col {
    width: 1%;
    white-space: nowrap;
}

.cesu-trainings-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.cesu-trainings-table__actions .btn {
    margin: 0;
}

/* Toggle Adoptée — checkbox dans la table catalogue */
.cesu-trainings-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
}

.cesu-trainings-toggle input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
}

.cesu-trainings-toggle--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.cesu-trainings-toggle--disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* Pill upload — variante outline + couleur primaire pour distinguer */
.cesu-trainings-pill--upload {
    background: transparent;
    border-style: dashed;
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.cesu-trainings-pill--upload:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.cesu-trainings-pill--upload:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Boutons icône compacts pour les actions tableaux formations/sessions */
.cesu-trainings-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.cesu-trainings-icon-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    border-color: var(--color-primary);
}

.cesu-trainings-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cesu-trainings-icon-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, #fff);
    border-color: var(--color-danger, #dc2626);
}

.cesu-trainings-icon-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--color-text-muted);
}

.cesu-trainings-icon-btn--disabled:hover {
    background: transparent;
    border-color: var(--color-border);
}

/* ══════════════════════════════════════════
   Mon CESU — Équipe : table alignée sur les onglets Formations
   ══════════════════════════════════════════ */

.cesu-team-table-wrap {
    margin-top: var(--spacing-sm);
}

.cesu-team-table__handle-col {
    width: 2rem;
    padding-left: var(--spacing-sm);
    padding-right: 0;
}

.cesu-team-table__visible-col {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.cesu-team-row {
    transition: background 0.1s ease, opacity 0.15s ease;
}

.cesu-team-row[draggable="true"] {
    cursor: grab;
}

.cesu-team-row--editing {
    background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}

.cesu-team-row--dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.cesu-team-row--drop-target td {
    box-shadow: inset 0 2px 0 var(--color-primary);
}

.cesu-team-row__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
    cursor: grab;
    border-radius: var(--radius-sm, 4px);
}

.cesu-team-row[draggable="true"] .cesu-team-row__drag-handle:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
}

.cesu-team-row__drag-handle--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cesu-team-row__name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cesu-team-row__correspondent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    cursor: help;
}

.cesu-team-row__self {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.cesu-team-row__role {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.cesu-team-row__position {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    margin-top: 0.125rem;
}

.cesu-team-row__placeholder {
    display: inline-block;
}

.cesu-team-row__link {
    color: var(--color-primary);
    text-decoration: none;
}

.cesu-team-row__link:hover {
    text-decoration: underline;
}

/* Email + téléphone empilés dans la colonne Coordonnées — 1 colonne
   dédiée pour 2 lignes au lieu de 2 colonnes séparées qui débordaient
   quand l'aside est étendu. */
.cesu-team-row__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cesu-team-row__contact-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    /* Truncate quand le nom est très long et que la colonne se rétrécit. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cesu-team-row__contact-line svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.cesu-team-row__contact-line:hover {
    color: var(--color-primary);
}

.cesu-team-row__contact-line:hover svg {
    color: var(--color-primary);
}

.cesu-team-row__contact-line span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cellules `vertical-align: top` héritées de `.cesu-trainings-table` —
   plus d'override nécessaire ici. Quand la colonne Coordonnées porte
   2 lignes (email + tél), les autres colonnes (Contact, Rôle, Public,
   Actions) restent ancrées en haut. */

/* Cellule actions : on garde le td en table-cell pur (vertical-align: middle
   actif) et on délègue le flex au div interne, sinon le td devient un flex
   container et perd l'alignement vertical de la rangée. */
.cesu-team-table__actions-cell {
    width: 1%;
    white-space: nowrap;
}

.cesu-team-row__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: nowrap;
}

/* Champs verrouillés — fond grisé + texte muted + curseur not-allowed +
   bordure pointillée discrète, pour signaler visuellement que l'identité
   partagée n'est pas modifiable. */
.form-control--locked,
.form-control--locked:focus,
.form-control--locked:hover {
    background: color-mix(in srgb, var(--color-text-muted) 8%, #fff) !important;
    color: var(--color-text-muted) !important;
    border-style: dashed !important;
    cursor: not-allowed !important;
    opacity: 1;
}

.form-control--locked option {
    color: var(--color-text);
}

/* Cadenas inline dans le label du champ verrouillé */
.form-label__lock {
    display: inline-block;
    margin-left: 0.25rem;
    color: var(--color-text-muted);
    vertical-align: -1px;
}

/* Alignement vertical strict du switch consent-toggle avec son libellé dans
   le panneau d'édition contact CESU. Le libellé reste sur une seule ligne
   (labels courts : « Correspondant », « Affiché publiquement »), aligné
   verticalement au centre du switch via line-height = hauteur de la track. */
.cesu-trainings-form .consent-toggle {
    align-items: center;
    display: flex;
}

.cesu-trainings-form .consent-toggle__label {
    line-height: 1.5rem;
    min-width: 0;
    white-space: nowrap;
}

/* Modale de confirmation — réutilise le squelette du picker média avec un
   footer dédié pour les actions destructives. */
.cesu-confirm-modal {
    max-width: 480px;
}

.cesu-confirm-modal .cesu-picker-modal__body p {
    margin: 0 0 var(--spacing-sm);
    line-height: 1.5;
}

.cesu-confirm-modal .cesu-picker-modal__body p:last-child {
    margin-bottom: 0;
}

.cesu-confirm-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt, #f9f9fb);
}

.cesu-team-row__confirm {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-xs);
    flex-wrap: wrap;
}

/* Toggle compact (track 32x18) — distinct du consent-toggle plus large
   utilisé dans le formulaire d'édition. */
.cesu-team-row__toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.cesu-team-row__toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cesu-team-row__toggle-track {
    display: inline-block;
    width: 32px;
    height: 18px;
    background: color-mix(in srgb, var(--color-text-muted) 30%, #fff);
    border-radius: 999px;
    position: relative;
    transition: background 0.15s ease;
}

.cesu-team-row__toggle-thumb {
    display: block;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.cesu-team-row__toggle-input:checked + .cesu-team-row__toggle-track {
    background: var(--color-primary);
}

.cesu-team-row__toggle-input:checked + .cesu-team-row__toggle-track .cesu-team-row__toggle-thumb {
    transform: translateX(14px);
}

.cesu-team-row__toggle-input:focus-visible + .cesu-team-row__toggle-track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cesu-team-row__toggle-input:disabled + .cesu-team-row__toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icône origine "issue du catalogue national" placée avant le titre */
.cesu-trainings-origin-icon {
    margin-right: var(--spacing-xs);
    cursor: help;
    font-size: 0.95em;
}

/* Pill version small pour les filtres */
.cesu-trainings-pill--sm {
    padding: 0.15rem var(--spacing-sm);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.4;
}

/* Bandeau filtres + recherche au-dessus du tableau formations locales */
.cesu-trainings-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: color-mix(in srgb, var(--color-text-muted) 4%, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
}

.cesu-trainings-filters__search {
    flex: 0 1 18rem;
    margin: 0;
}

.cesu-trainings-filters__domain {
    flex: 1 1 24rem;
    margin: 0;
}

/* Filtre formations locales — single ligne avec recherche + dropdown */
.cesu-trainings-filters {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.cesu-trainings-filters .form-label {
    font-size: var(--font-size-xs, 0.75rem);
    margin-bottom: 0.25rem;
}

.cesu-trainings-filters__search {
    flex: 1 1 auto;
    min-width: 0;
}

.cesu-trainings-filters__domain {
    flex: 0 0 auto;
}

/* Origin icon — petit pictogramme avant le titre, couleur primary */
.cesu-trainings-origin-icon {
    display: inline-flex;
    margin-right: var(--spacing-xs);
    color: var(--color-primary);
    cursor: help;
    vertical-align: -2px;
}

/* Lien icone (URL inscription session, etc.) */
.cesu-trainings-link-icon {
    display: inline-flex;
    color: var(--color-primary);
    align-items: center;
    justify-content: center;
}

.cesu-trainings-link-icon:hover {
    color: var(--color-text);
}

/* Sépatateur dans le dropdown menu */
.dropdown__separator {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--color-border);
    list-style: none;
}

@media (max-width: 640px) {
    .cesu-trainings-filters {
        flex-wrap: wrap;
    }
    .cesu-trainings-filters__search,
    .cesu-trainings-filters__domain {
        flex: 1 1 100%;
    }
}

/* ══════════════════════════════════════════
   Mon CESU — Tableaux Formations : refonte design
   ══════════════════════════════════════════ */

/* Resserre le wrap : moins de bordure, ombre légère */
.cesu-trainings-table-wrap {
    position: relative;
    margin-top: var(--spacing-sm);
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
    min-height: 6rem;
}

/* Overlay de chargement par tableau — voile blanc translucide + spinner SVG animé */
.cesu-trainings-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: rgb(255 255 255 / 78%);
    backdrop-filter: blur(2px);
    z-index: 5;
    border-radius: inherit;
    pointer-events: all;
}

.cesu-trainings-loader__spinner {
    color: var(--color-primary);
    animation: cesu-trainings-spin 0.9s linear infinite;
}

.cesu-trainings-loader__label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

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


.cesu-trainings-table thead th {
    padding: 0.5rem var(--spacing-md);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 4%, #fff);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Actions strictement inline, pas de wrap */
.cesu-trainings-table__actions {
    white-space: nowrap;
}

.cesu-trainings-table__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-end;
}

/* Boutons icône épurés : pas de bordure par défaut, rond hover subtil */
.cesu-trainings-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.cesu-trainings-icon-btn svg {
    display: block;
    width: 15px;
    height: 15px;
}

.cesu-trainings-icon-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, #fff);
    color: var(--color-primary);
}

.cesu-trainings-icon-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 10%, #fff);
    color: var(--color-danger, #dc2626);
}

.cesu-trainings-icon-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.cesu-trainings-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Origin icon plus discrète */
.cesu-trainings-origin-icon {
    display: inline-flex;
    margin-right: 0.4rem;
    color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text-muted));
    cursor: help;
    vertical-align: -2px;
}

.cesu-trainings-origin-icon svg {
    width: 13px;
    height: 13px;
}

/* Lien icone (URL inscription session, etc.) */
.cesu-trainings-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
    border-radius: var(--radius-sm, 6px);
    transition: background 0.12s ease;
}

.cesu-trainings-link-icon:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, #fff);
}

/* Pills readonly (tags) plus discrètes dans les cellules */
.cesu-trainings-table .cesu-trainings-pill--readonly {
    padding: 0.1rem 0.4rem;
    font-size: var(--font-size-xs, 0.75rem);
    margin-right: 0.2rem;
}

/* Confirmer suppression — inline avec les autres icônes */
.cesu-trainings-table .cesu-team-item__confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.3rem;
    white-space: nowrap;
}

/* Filtre — bandeau plus discret */
.cesu-trainings-filters {
    margin-top: var(--spacing-sm);
    padding: 0.6rem var(--spacing-md);
    background: transparent;
    border: 0;
}

.cesu-trainings-filters .form-label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

/* Toolbar formations locales — bouton + recherche + filtre sur une ligne */
.cesu-trainings-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    flex-wrap: nowrap;
}

.cesu-trainings-toolbar__create {
    flex: 0 0 auto;
}

/* Recherche + filtre groupés et alignés à droite (le bouton « Nouvelle » reste à gauche) */
.cesu-trainings-toolbar__search {
    position: relative;
    flex: 0 1 18rem;
    min-width: 12rem;
    margin-left: auto;
}

.cesu-trainings-toolbar__search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.cesu-trainings-toolbar__search-input {
    width: 100%;
    height: 2rem;
    padding: 0 0.6rem 0 2rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cesu-trainings-toolbar__search-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.cesu-trainings-toolbar__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Filtre dropdown — collé à la recherche (search a déjà margin-left: auto).
   Force le wrapper interne et le trigger à remplir la largeur du conteneur,
   sinon ils se calent à gauche dans la zone .dropdown (display: inline-flex). */
.cesu-trainings-toolbar__filter {
    flex: 0 0 auto;
    width: 14rem;
    display: flex;
}

.cesu-trainings-toolbar__filter .dropdown__wrapper {
    width: 100%;
}

.cesu-trainings-toolbar__filter .dropdown__trigger {
    height: 2rem;
    width: 100%;
}

/* Menu dropdown — aligne à droite quand le wrapper est en bout de ligne */
.dropdown__menu--right {
    right: 0;
    left: auto;
}

@media (max-width: 768px) {
    .cesu-trainings-toolbar {
        flex-wrap: wrap;
    }
    .cesu-trainings-toolbar__create,
    .cesu-trainings-toolbar__search,
    .cesu-trainings-toolbar__filter {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }
}

/* ══════════════════════════════════════════
   Dropdown component (copié depuis content.css car zones/member ne charge pas content.css)
   ══════════════════════════════════════════ */

.dropdown {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
}

.dropdown__wrapper {
    position: relative;
}

.dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

.dropdown__trigger:hover {
    border-color: var(--color-primary);
}

.dropdown__trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.dropdown__value {
    flex: 1;
    text-align: left;
}

.dropdown__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.dropdown__chevron--open {
    transform: rotate(180deg);
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 6%);
    z-index: 50;
}

.dropdown__menu--right {
    right: 0;
    left: auto;
}

.dropdown__option {
    list-style: none;
}

.dropdown__option-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm);
    text-align: left;
    text-decoration: none;
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.dropdown__option-link:hover {
    background: color-mix(in srgb, var(--color-text-muted) 8%, #fff);
    color: var(--color-primary);
}

.dropdown__option--active .dropdown__option-link {
    color: var(--color-primary);
    font-weight: 600;
}

.dropdown--sm .dropdown__trigger {
    padding: 0.3125rem 0.625rem;
    font-size: var(--font-size-xs);
}

.dropdown--sm .dropdown__option-link {
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-xs);
}

/* ══════════════════════════════════════════
   Formulaire formation — cohérence typographique
   alignée sur .form-control (1rem) / .form-label (0.875rem)
   ══════════════════════════════════════════ */

.cesu-trainings-form .form-row.form-row--compact {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--spacing-md);
}

/* Dropdown utilisé en remplacement de select dans le formulaire :
   on aligne sa taille sur .form-control (vs la version sm utilisée pour les filtres) */
.cesu-trainings-form__select {
    width: 100%;
    display: flex;
}

.cesu-trainings-form__select .dropdown__wrapper {
    width: 100%;
}

.cesu-trainings-form__select .dropdown__trigger {
    width: 100%;
    height: auto;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--radius-md);
}

.cesu-trainings-form__select .dropdown__option-link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9375rem;
}

/* Sous-titre du panneau session : formation associée affichée en pill discret. */
.cesu-trainings-form__training {
    display: inline-block;
    margin-left: var(--spacing-sm);
    padding: 0.125rem 0.625rem;
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    vertical-align: middle;
}

.cesu-trainings-form__required {
    color: var(--color-danger, #dc2626);
    margin-left: 0.15rem;
}

/* Fieldset groupant programme/inscription/pédagogique — visuel discret */
.cesu-trainings-form__fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    margin: 0 0 var(--spacing-lg);
}

.cesu-trainings-form__legend {
    padding: 0 var(--spacing-xs);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mode toggle programme : 3 radios horizontal */
.cesu-trainings-form__mode {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.cesu-trainings-form__radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.cesu-trainings-form__radio input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Zone PDF select + bouton upload alignés */
.cesu-trainings-form__select-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.cesu-trainings-form__select-row .cesu-trainings-form__select {
    flex: 1 1 auto;
}

.cesu-trainings-form__upload {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cesu-trainings-form__empty {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

/* ══════════════════════════════════════════
   Holders EditorJS pour les 10 champs éditoriaux + Qualiopi de la modale
   formation locale. Visuellement alignés sur les .form-control existants.
   ══════════════════════════════════════════ */

.cesu-field-editor {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.4rem var(--spacing-md);
    min-height: 5rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cesu-field-editor:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.cesu-field-editor .codex-editor__redactor {
    padding-bottom: 0 !important;
}

/* ══════════════════════════════════════════
   Tag autocomplete — input avec chips intégrés + suggestions
   ══════════════════════════════════════════ */

.cesu-trainings-tagselect {
    position: relative;
}

.cesu-trainings-tagselect__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: calc(1rem * 1.5 + var(--spacing-sm) * 2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: text;
}

.cesu-trainings-tagselect__chips:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.cesu-trainings-tagselect__input {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.cesu-trainings-tagselect__input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.cesu-trainings-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.cesu-trainings-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.cesu-trainings-chip__remove:hover {
    opacity: 1;
    background: rgb(0 0 0 / 5%);
}

.cesu-trainings-tagselect__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 6%);
    z-index: 50;
}

.cesu-trainings-tagselect__option {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    transition: background 0.1s ease, color 0.1s ease;
}

.cesu-trainings-tagselect__option:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    color: var(--color-primary);
}

/* Code session affiché en monospace dans la table */
.cesu-trainings-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Commercialisation : checkboxes INTER/INTRA */
.cesu-trainings-form__checks {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cesu-trainings-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.cesu-trainings-form__check:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.cesu-trainings-form__check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.cesu-trainings-form__check input[type="checkbox"]:checked + span {
    color: var(--color-primary);
    font-weight: 500;
}

/* <details> repliable pour les sections optionnelles (pédago + Qualiopi) */
.cesu-trainings-form__details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0 0 var(--spacing-lg);
    background: #fff;
    overflow: hidden;
}

.cesu-trainings-form__summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text-muted) 4%, #fff);
    transition: background 0.12s ease;
}

.cesu-trainings-form__summary::-webkit-details-marker {
    display: none;
}

.cesu-trainings-form__summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-text-muted);
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

details[open] > .cesu-trainings-form__summary::before {
    transform: rotate(0deg);
}

.cesu-trainings-form__summary:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, #fff);
}

.cesu-trainings-form__details-body {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* Coherence typographique formulaires formation */

.cesu-trainings-form__summary {
    align-items: baseline;
}

.cesu-trainings-form__summary .member-form__hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.cesu-trainings-form__check {
    align-items: baseline;
}

.cesu-trainings-form__check input[type=checkbox] {
    margin-top: 0;
    transform: translateY(0.15rem);
}

.cesu-trainings-form__check .member-form__hint {
    font-size: 0.8125rem;
    font-weight: 400;
    margin-left: 0.25rem;
}

.cesu-trainings-form .form-control,
.cesu-trainings-form input.form-control,
.cesu-trainings-form textarea.form-control {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cesu-trainings-form .form-control::placeholder,
.cesu-trainings-form textarea.form-control::placeholder {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    opacity: 0.55;
}

.cesu-trainings-form .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}

.cesu-trainings-form .form-group .member-form__hint {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.cesu-trainings-form__select .dropdown__trigger {
    font-size: 0.9375rem;
}

.cesu-trainings-form__select .dropdown__option-link {
    font-size: 0.9375rem;
}

.cesu-trainings-form__radio {
    align-items: baseline;
    font-size: 0.9375rem;
}

.cesu-trainings-form__radio input[type=radio] {
    transform: translateY(0.15rem);
}

/* Resserre l espacement bas des form-group à l intérieur des fieldsets et
   des sections details : le dernier .form-group d un conteneur ne doit pas
   conserver son margin-bottom (qui s additionnait avec le padding du
   conteneur, créant un trou visible avant la bordure). */
.cesu-trainings-form__fieldset > .form-group:last-child,
.cesu-trainings-form__fieldset > .form-row:last-child .form-group,
.cesu-trainings-form__details-body > .form-group:last-child,
.cesu-trainings-form__details-body > .form-row:last-child .form-group {
    margin-bottom: 0;
}

/* Resserre aussi l espacement entre form-row et autre contenu dans les
   fieldsets/details : la grille .form-row n a pas de margin-bottom mais
   ses enfants .form-group oui (var --spacing-lg = ~1.5rem). On uniformise
   à --spacing-md pour la densité visuelle des sections optionnelles. */
.cesu-trainings-form__fieldset .form-group,
.cesu-trainings-form__details-body .form-group {
    margin-bottom: var(--spacing-md);
}

/* Placeholders : nettement plus petits que le texte saisi pour une
   distinction nette (l'utilisateur voit immédiatement ce qui est saisi
   vs ce qui est suggéré). 0.8125rem (13px) + opacity 0.5. */
.cesu-trainings-form .form-control::placeholder,
.cesu-trainings-form input.form-control::placeholder,
.cesu-trainings-form textarea.form-control::placeholder {
    font-size: 0.8125rem;
    line-height: 1.5;
    opacity: 0.5;
    font-style: italic;
}

/* Resserre l espacement entre la rangée de radios (Aucune / PDF / Lien)
   et le champ conditionnel qui suit. spacing-md était trop visible. */
.cesu-trainings-form__mode {
    margin-bottom: var(--spacing-sm);
}

/* appSelect — styles déplacés vers components/app-select.css (chargé globalement par app.css) */

/* ══════════════════════════════════════════
   Mon CESU — Présentation enrichie (P7)
   3 blocs ESR / Qualité / Réseau au-dessus de l'éditeur EditorJS.
   ══════════════════════════════════════════ */

.cesu-presentation-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

/* Toggle pill — bouton checkbox stylisé pour les flags ESR (régional/national)
   et accessibilité PSH. Touch target ≥ 44px (rule front.md). État coché
   transitionne vers une couleur primary subtle pour signaler clairement
   l'activation. Variante .mycesu-toggle--esr pour les toggles ESR (taille
   plus marquée que les toggles secondaires comme PSH). */
.mycesu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease;
    min-height: 2.75rem;
}

.mycesu-toggle:hover {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
}

.mycesu-toggle:has(input[type="checkbox"]:checked) {
    border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
}

.mycesu-toggle:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mycesu-toggle input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-primary);
}

.mycesu-toggle span {
    font-weight: 500;
    color: var(--color-text);
}

/* Bloc ESR : toggle + chips groupes côte à côte. Marge entre régional et national
   pour séparer visuellement les deux scopes. */
.mycesu-esr-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mycesu-esr-block + .mycesu-esr-block {
    margin-top: var(--spacing-md);
}

.mycesu-chip-group {
    padding-left: var(--spacing-md);
    border-left: 2px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Container chips : flexbox wrappant. Gap petit pour densité élevée. */
.mycesu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

/* Chip — bouton toggle multi-select (volet ORSAN, type HAS). Cohérent avec
   le pattern « pill » utilisé sur le site. État actif : fond coloré (couleur
   du volet ou du type, fournie inline via :style), texte blanc. État neutre :
   fond transparent, bordure légère. Couleur inline garantit le contraste
   AA même sur fonds clairs (couleurs des volets ORSAN choisies pour ça :
   verts, rouges, jaunes saturés). */
.mycesu-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease, transform 100ms ease;
    /* Touch target ≥ 44px de hauteur (WCAG 2.5.5) */
    min-height: 2.25rem;
}

.mycesu-chip:hover:not(.mycesu-chip--active) {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
}

.mycesu-chip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mycesu-chip:active {
    transform: scale(0.97);
}

/* Quand actif : background + border-color sont posés inline via :style côté
   template (couleur du volet/type). Le `color: white` ici garantit le
   contraste sur les fonds saturés. */
.mycesu-chip--active {
    color: white;
    font-weight: 600;
}

.mycesu-chip__code {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
    padding: 1px 0.25rem;
    background: color-mix(in srgb, white 25%, transparent);
    border-radius: var(--radius-sm, 3px);
}

.mycesu-chip:not(.mycesu-chip--active) .mycesu-chip__code {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.mycesu-chip__name {
    font-size: var(--font-size-sm);
}

/* Type HAS : pas de description (texte trop long), uniquement le name court (Type 1, etc.).
   Le composant met la description en `title` HTML pour le tooltip natif. */
.mycesu-chip--has-type {
    padding-inline: var(--spacing-sm);
}

@media (max-width: 480px) {
    .mycesu-chip__name {
        /* Sur mobile très étroit, on laisse les chips se compacter en
           gardant uniquement le code (REB, NR, etc.) — l'utilisateur peut
           taper pour voir le nom complet en tooltip ou dans la fiche publique. */
        display: none;
    }
    .mycesu-chip {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

.member-form__sub-hint {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Grid 2 colonnes Qualiopi/DPC desktop, stack mobile */
.mycesu-quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

@media (max-width: 720px) {
    .mycesu-quality-grid {
        grid-template-columns: 1fr;
    }
}

/* Card certification — header avec checkbox + body révélé sur cochage. État
   inactif : carte légèrement grisée. État actif : bordure primary + fond
   subtil pour signaler clairement « cette certification est déclarée ». */
.mycesu-quality-card {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg);
    transition: border-color 150ms ease, background-color 150ms ease;
    overflow: hidden;
}

.mycesu-quality-card--active {
    border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
}

/* Header cliquable de la card — hauteur confortable, le checkbox à gauche
   et le titre/sous-titre à droite. Le label englobe le tout pour permettre
   le clic n'importe où (pattern click-target large WCAG). */
.mycesu-quality-card__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    cursor: pointer;
    user-select: none;
}

.mycesu-quality-card__head input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.mycesu-quality-card__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mycesu-quality-card__label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.mycesu-quality-card__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Body révélé — séparateur visuel avec le header + padding compact pour
   ne pas faire trop volumineuse une card que l'utilisateur peut juste
   « cocher pour activer ». */
.mycesu-quality-card__body {
    padding: 0 var(--spacing-md) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    padding-top: var(--spacing-md);
    margin-top: 0;
}

.mycesu-cert-asset {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.mycesu-cert-asset__remove {
    flex-shrink: 0;
}

.mycesu-cert-url {
    margin-top: var(--spacing-sm);
}

/* Radio source justificatif (Aucun / PDF / Lien externe) — segment-style
   pour signaler le choix exclusif. Touch target padding ≥ 0.5rem. */
.mycesu-cert-source {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 4px;
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
    border-radius: var(--radius-sm, 4px);
}

.mycesu-cert-source__radio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm);
    transition: background-color 120ms ease;
    min-height: 2rem;
}

.mycesu-cert-source__radio:hover {
    background: var(--color-bg);
}

.mycesu-cert-source__radio:has(input[type="radio"]:checked) {
    background: var(--color-bg);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.mycesu-cert-source__radio input[type="radio"] {
    accent-color: var(--color-primary);
    margin: 0;
}

/* Section RESU / CESU partenaires : header (titre + bouton + Ajouter), table
   compacte des relations existantes ou état vide + recherche typeahead à
   la demande. Pattern progressive disclosure : la recherche est masquée
   par défaut pour ne pas alourdir l'écran, révélée via clic « + Ajouter ». */
.mycesu-relation-section + .mycesu-relation-section {
    margin-top: var(--spacing-lg);
}

.mycesu-relation-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.mycesu-relation-section__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

/* État vide (pas de relation, pas de recherche en cours) */
.mycesu-relation-empty {
    margin: 0;
    padding: var(--spacing-md);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Recherche typeahead inline — input + bouton Annuler + suggestions */
.mycesu-relation-search {
    position: relative;
    margin-bottom: var(--spacing-sm);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-sm);
    align-items: start;
}

.mycesu-relation-search__cancel {
    flex-shrink: 0;
}

.mycesu-relation-search__empty {
    grid-column: 1 / -1;
    margin: var(--spacing-xs) 0 0;
    padding: var(--spacing-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.mycesu-relation-suggestions {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg);
    max-height: 16rem;
    overflow-y: auto;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.mycesu-relation-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 0;
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    /* Touch target ≥ 44px (rule front.md « Touch targets minimum 44×44px ») */
    min-height: 2.75rem;
}

.mycesu-relation-suggestion:hover,
.mycesu-relation-suggestion:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    outline: none;
}

/* Table compacte des relations existantes — calquée sur cesu-team-table /
   cesu-trainings-table (top-aligned, headers compacts). Wrapper pour scroll
   horizontal si jamais le tableau dépasse sur mobile très étroit. */
.cesu-relations-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
}

.cesu-relations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.cesu-relations-table thead {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.cesu-relations-table th {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
}

.cesu-relations-table tbody td {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}

.cesu-relations-table tbody tr:last-child td {
    border-bottom: 0;
}

.cesu-relations-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── Aperçu sécurité (panel Sécurité, Confidentialité) ── */

.member-section--overview {
    padding-bottom: var(--spacing-lg);
}

.member-overview__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.member-overview__heading .member-section__title {
    margin: 0;
    /* Annule le margin-bottom hérité éventuel pour que `align-items: center`
       fonctionne au pixel près sans décalage optique. */
    align-self: center;
}

.member-overview__last-login {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.member-overview__alerts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.member-overview__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

.member-overview__stat {
    padding: var(--spacing-md);
    background: var(--color-surface-alt, #f9f9fb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}

.member-overview__stat-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

.member-overview__stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
}

.member-overview__stat-value--small {
    font-size: var(--font-size-lg);
}

.member-overview__stat-unit {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-light);
}

.member-overview__stat-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.member-overview__badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.member-overview__badge--ok {
    background: #d4edda;
    color: #155724;
}

.member-overview__badge--off {
    background: #f8d7da;
    color: #721c24;
}

/* ══════════════════════════════════════════
   Page « Mon adhésion » — liste des adhésions actives
   ══════════════════════════════════════════ */
.member-membership-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0 0;
    display: grid;
    gap: var(--spacing-md);
}

.member-membership-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: var(--spacing-lg);
}

.member-membership-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.member-membership-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.member-membership-card__status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-primary) 10%, #fff);
    color: var(--color-primary);
}

.member-membership-card__status[data-color="green"] {
    background: #d4edda;
    color: #155724;
}

.member-membership-card__status[data-color="red"] {
    background: #f8d7da;
    color: #721c24;
}

.member-membership-card__status[data-color="orange"],
.member-membership-card__status[data-color="yellow"] {
    background: #fff3cd;
    color: #856404;
}

.member-membership-card__status[data-color="gray"] {
    background: var(--color-bg-muted, #f1f3f5);
    color: var(--color-text-light);
}

.member-membership-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin: 0;
}

.member-membership-card__meta dt {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.member-membership-card__meta dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* ── Cartes de tarif d'adhésion (page /adhesion) ────────────────────────
   Une carte par formule individuelle disponible, alignée en ligne avec
   le prix + le bouton « Adhérer » à droite (passe en colonne sur mobile).
   Réutilise la même base visuelle que .member-membership-card pour la
   cohérence sur la page. */

.member-tariff-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    display: grid;
    gap: var(--spacing-md);
}

.member-tariff-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.member-tariff-card__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.member-tariff-card__title {
    margin: 0 0 0.35rem;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.member-tariff-card__desc {
    margin: 0 0 0.35rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.member-tariff-card__meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.member-tariff-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.member-tariff-card__price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary, #304278);
    white-space: nowrap;
}

.member-tariff-card__actions form {
    margin: 0;
}

/* ── Modale d'ajout d'une clé WebAuthn ── */

.member-action-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.member-action-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.member-action-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - 2 * var(--spacing-md));
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.member-action-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.member-action-modal__title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.member-action-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    cursor: pointer;
}

.member-action-modal__close:hover,
.member-action-modal__close:focus-visible {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.member-action-modal__body {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}

.member-action-modal__desc {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Classes génériques d'éléments internes de la modale, partagées avec
   la sous-vue MFA (cf. `_mfa_step_up.html.twig` qui se branche aussi
   bien sur la modale d'enrôlement passkey que sur la modale d'actions
   MFA-protégées génériques).

   Deux variantes structurelles cohabitent :
   - `.member-action-modal__field` : `<label for=...>` + `<input id=...>` en
     siblings (champs uniques par modale, ids stables OK).
   - `.mfa-step-up__field`         : `<label><span>…</span><input></label>`
     wrap (le partial est inclus N fois, on évite les duplicate ids). */
.member-action-modal__field,
.mfa-step-up__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.member-action-modal__field label,
.mfa-step-up__field label span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.mfa-step-up__field label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.member-action-modal__field input,
.mfa-step-up__field input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    background: #fff;
    color: var(--color-text);
}

.member-action-modal__field input:focus-visible,
.mfa-step-up__field input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.member-action-modal__hint,
.mfa-step-up__hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.member-action-modal__alert,
.mfa-step-up__alert {
    margin-bottom: var(--spacing-md);
}

.member-action-modal__actions,
.mfa-step-up__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

@media (max-width: 480px) {
    .member-action-modal__actions,
    .mfa-step-up__actions {
        flex-direction: column-reverse;
    }

    .member-action-modal__actions .btn,
    .mfa-step-up__actions .btn {
        width: 100%;
    }
}

/* ── Sous-vue step-up MFA dans la modale ── */

.mfa-step-up__tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    margin: 0 0 var(--spacing-md);
    /* Pas de wrap : les 3 onglets se partagent l'espace dispo. Sur
       écrans très étroits le `flex: 1` + `min-width: 0` laisse les
       libellés se rétrécir / wrapper en interne plutôt que pousser
       sur une 2e ligne. */
}

.mfa-step-up__tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--spacing-sm) var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    /* Partage équitable de la largeur du tabbar. */
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    /* Hyphenation auto pour les libellés un peu longs (ex. Code de
       récupération) sur petits écrans plutôt que dépassement. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.mfa-step-up__tab:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-bottom-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.mfa-step-up__tab--active,
.mfa-step-up__tab--active:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: transparent;
}

.mfa-step-up__pane {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Hero securite : icone cadenas dans pastille + titre + description.
   Centre, accentue color-primary, pour signaler explicitement qu'on est
   sur un controle d'identite et pas un autre formulaire d'enrolement. */

.mfa-step-up__hero {
    text-align: center;
    margin: 0 0 var(--spacing-lg);
}

.mfa-step-up__hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm);
}

.mfa-step-up__hero-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
}

.mfa-step-up__hero-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════════════════════════
   Member section — utilitaires partagés (sous-titre H3, zone actions)
   utilisés par les onglets Mon CESU mais réutilisables ailleurs
   ══════════════════════════════════════════ */

.member-section__subtitle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
}

.member-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-md);
}

/* ══════════════════════════════════════════
   Mon CESU — dropdown sélecteur multi-CESU
   (<details>/<summary> natif, accessible clavier, CSP-safe)
   ══════════════════════════════════════════ */

.mycesu-switch {
    position: relative;
}

.mycesu-switch__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    list-style: none;
    cursor: pointer;
}

.mycesu-switch__trigger::-webkit-details-marker {
    display: none;
}

.mycesu-switch__caret {
    margin-left: 0.15rem;
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 150ms ease;
}

.mycesu-switch[open] .mycesu-switch__caret {
    transform: rotate(180deg);
}

.mycesu-switch__menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 60;
    min-width: 18rem;
    max-width: 24rem;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
}

.mycesu-switch__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    color: var(--color-text);
    transition: background 120ms ease;
}

.mycesu-switch__option:hover,
.mycesu-switch__option:focus-visible {
    background: var(--color-bg-light, #f3f4f6);
    outline: none;
}

.mycesu-switch__option--active {
    background: color-mix(in srgb, var(--color-primary, #304278) 8%, #fff);
}

.mycesu-switch__option-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mycesu-switch__option-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mycesu-switch__option-slug {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.mycesu-switch__option-badge {
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent, #d97706);
    background: color-mix(in srgb, var(--color-accent, #d97706) 10%, #fff);
    border-radius: 999px;
}