/* --- Boutons --- */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: var(--font-size-btn);
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-surface);
    text-decoration: none;
}

.app-btn-primary {
    background: var(--color-primary);
    color: var(--color-surface);
}

.app-btn-secondary {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.app-btn-secondary:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.app-btn-danger {
    background: var(--color-error);
    color: var(--color-surface);
}

.app-btn-danger:hover {
    background: var(--color-error);
}

.app-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.app-btn-ghost:hover {
    background: var(--color-bg-secondary);
    color: var(--color-primary-dark);
}

.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min-height);
    height: var(--touch-min-height);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.app-icon-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

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

/* --- Back Button --- */
.app-back-container {
    margin-bottom: var(--space-4);
}

.app-back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min-height);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-back-button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* --- Cards --- */
.app-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.app-card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.app-card__body {
    padding: var(--space-5);
    flex: 1 1 auto;
}

.app-card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* --- Forms --- */
.app-field {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.app-label {
    font-size: var(--font-size-label);
    font-weight: 600;
    color: var(--color-text);
}

.app-input, .app-select, .app-textarea {
    width: 100%;
    min-height: var(--touch-min-height);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-standard);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-textarea {
    min-height: 100px;
    resize: vertical;
}

.app-input:focus, .app-select:focus, .app-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.app-error {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: 2px;
}

.app-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* --- Tables (scoped classes, no global table reset) --- */
.app-table-container {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--font-size-sm);
}

.app-table th, .app-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.app-table th {
    background: var(--color-bg-secondary);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.app-table tbody tr:hover {
    background: var(--color-surface-muted);
}

/* --- Search --- */
.app-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 480px;
}

.app-search__input {
    width: 100%;
    min-height: var(--touch-min-height);
    padding: var(--space-2) var(--space-4) var(--space-2) 42px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: var(--font-size-standard);
}

.app-search__input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.app-search__icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-secondary);
    font-size: 16px;
    pointer-events: none;
}

.app-search__clear {
    position: absolute;
    right: var(--space-2);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--space-1);
    border-radius: 50%;
}

.app-search__clear:hover {
    color: var(--color-text);
    background: var(--color-bg-secondary);
}

/* --- Filter --- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 550;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip:hover, .filter-chip.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.filter-drawer {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

/* --- Messages / Alerts --- */
.app-alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.app-alert-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.app-alert-error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}

.app-alert-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.app-alert-info {
    background: var(--color-info-bg);
    border-color: var(--color-border-strong);
    color: var(--color-info-text);
}

/* --- Empty State --- */
.app-empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.app-empty-state__icon {
    font-size: 48px;
    line-height: 1;
}

.app-empty-state__title {
    font-size: var(--font-size-h3);
    color: var(--color-primary-dark);
    margin: 0;
}

.app-empty-state__text {
    color: var(--color-text-secondary);
    max-width: 400px;
    margin: 0;
}

/* --- Pagination --- */
.app-pagination, .pagination, .bourse-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.app-pagination a, .app-pagination span,
.pagination a, .pagination span,
.bourse-pagination a, .bourse-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.app-pagination a:hover,
.pagination a:hover,
.bourse-pagination a:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.app-pagination .current, .app-pagination .active,
.pagination .current, .pagination .active, .pagination span.active,
.bourse-pagination .current, .bourse-pagination .active, .bourse-pagination span.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
}

/* Panel & Buttons & Auth styles */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--radius-full);
    padding: 12px 18px;
    background: var(--color-primary);
    color: var(--color-surface);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.button:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.button-secondary {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* =========================================================
   P1.4 — DESIGN SYSTEM / COMPOSANTS COMMUNS
   ========================================================= */

/* --- Structure de page --- */

.app-page {
    width: 100%;
}

.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.app-page-header__main {
    min-width: 0;
}

.app-page-header__title {
    margin: 0;
    font-size: var(--font-size-h1);
    color: var(--color-primary-dark);
}

.app-page-header__subtitle {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    max-width: 720px;
}

.app-page-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.app-section-title {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-h2);
    color: var(--color-primary-dark);
}

/* --- Métadonnées / badges --- */

.app-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.app-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.app-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.2;
}

.app-badge-primary {
    background: var(--color-primary-light);
    border-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
    color: var(--color-primary-dark);
}

.app-badge-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.app-badge-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.app-badge-danger {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}

/* --- Listes --- */

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

.app-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.app-list-row:first-child {
    padding-top: 0;
}

.app-list-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.app-list-row__main {
    min-width: 0;
    flex: 1 1 auto;
}

.app-list-row__title {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: var(--font-size-standard);
    font-weight: 700;
}

.app-list-row__description {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.app-list-row__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* --- Onglets --- */

.app-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
}

.app-tabs a,
.app-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.app-tabs a:hover,
.app-tabs a.is-active,
.app-tabs button:hover,
.app-tabs button.is-active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
    background: var(--color-primary-light);
    text-decoration: none;
}

/* --- Actions de formulaire --- */

.app-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

/* --- Toolbar --- */

.app-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.app-toolbar__main,
.app-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* --- Carte événement générique --- */

.app-event-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.app-event-card__date {
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.app-event-card__title {
    margin: var(--space-2) 0;
    color: var(--color-primary-dark);
    font-size: var(--font-size-h3);
}

.app-event-card__body {
    flex: 1 1 auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.app-event-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* --- Séparateur / texte secondaire --- */

.app-divider {
    height: 1px;
    margin: var(--space-5) 0;
    border: 0;
    background: var(--color-border);
}

.app-text-muted {
    color: var(--color-text-secondary);
}

/* P1.4 — Formulaire adhésion */
.member-form-page { max-width:680px; margin:0 auto; }
.member-form-card { padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.member-form-card h1 { margin:0 0 var(--space-1); color:var(--color-primary-dark); font-size:clamp(26px,5vw,36px); }
.member-form-card > p { margin:0 0 var(--space-5); color:var(--color-text-secondary); }
.form-field { margin-bottom:18px; }
.form-field > label { display:block; margin-bottom:6px; font-weight:700; }
.form-field input { width:100%; min-height:46px; padding:9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; }
.form-error { margin:6px 0 0; color:var(--color-error); font-size:var(--font-size-sm); }
.form-checks { display:grid; gap:var(--space-3); margin:var(--space-5) 0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.form-check { display:flex; align-items:flex-start; gap:10px; }
.form-check input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--color-primary); }
.form-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); }
@media (max-width:480px) { .member-form-card { padding:var(--space-4); } .form-actions > .app-btn { flex:1 1 160px; } }


/* P1.4 — Association / membres */
.association-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.association-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.association-card-main { display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-5); flex:1; }
.association-logo { display:block; width:112px; height:112px; flex:0 0 112px; padding:7px; object-fit:contain; object-position:center; border-radius:var(--radius-lg); background:var(--color-primary-light); border:1px solid var(--color-border); }
.association-placeholder { display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--color-primary-dark); }
.association-info { min-width:0; flex:1; }
.association-info h2 { margin:0 0 var(--space-3); color:var(--color-primary-dark); font-size:1.25rem; line-height:1.25; overflow-wrap:anywhere; }
.association-description { margin:0 0 var(--space-4); color:var(--color-text-secondary); line-height:1.5; overflow-wrap:anywhere; }
.association-card-footer { padding:0 var(--space-5) var(--space-5); }
.association-link,.association-link:link,.association-link:visited { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:var(--touch-min-height); padding:10px 16px; border-radius:var(--radius-full); background:var(--color-primary); color:var(--color-surface); font-weight:700; text-align:center; text-decoration:none; }
.association-link:hover,.association-link:active { background:var(--color-primary-dark); color:var(--color-surface); text-decoration:none; }
.association-link:focus,.association-link:focus-visible { background:var(--color-primary-dark); color:var(--color-surface); outline:3px solid var(--color-primary); outline-offset:3px; }
.membership-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); max-width:1080px; margin:0 auto; }
.membership-card__section { margin-top:var(--space-4); }
.membership-card__label { margin:0 0 var(--space-2); color:var(--color-text-secondary); font-size:var(--font-size-sm); font-weight:700; }
.membership-tags { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.membership-tag { display:inline-flex; align-items:center; min-height:30px; padding:6px 11px; color:var(--color-primary); background:var(--color-primary-light); border-radius:var(--radius-full); font-size:.9rem; font-weight:600; }
.membership-tag--role { color:var(--color-text-secondary); background:var(--color-bg-secondary); border:1px solid var(--color-border); font-size:var(--font-size-sm); font-weight:650; padding:4px 10px; }
.membership-card__empty { margin:0; color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.memberships-empty { max-width:720px; margin:0 auto; padding:var(--space-6) var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-align:center; }
.memberships-empty h2 { margin:0 0 var(--space-2); color:var(--color-primary-dark); font-size:var(--font-size-h3); }
.memberships-empty p { margin:0 0 var(--space-4); color:var(--color-text-secondary); }
.memberships-empty a { display:inline-flex; align-items:center; justify-content:center; min-height:var(--touch-min-height); padding:10px 16px; color:var(--color-surface); background:var(--color-primary); border-radius:var(--radius-full); font-weight:700; }
.memberships-empty a:focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
.members-heading { max-width:960px; margin:0 auto var(--space-5); }
.members-heading h1 { margin:0 0 var(--space-1); color:var(--color-primary-dark); font-size:clamp(28px,5vw,40px); line-height:1.15; }
.members-heading p { margin:0; color:var(--color-text-secondary); }
.members-toolbar,.members-section,.members-invitations { max-width:960px; margin-left:auto; margin-right:auto; }
.members-toolbar { margin-bottom:var(--space-5); }
.members-filters { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(130px,1fr)) auto; gap:10px; align-items:end; padding:var(--space-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.members-filter { min-width:0; }
.members-filter label { display:block; margin-bottom:5px; font-size:var(--font-size-xs); font-weight:700; color:var(--color-text-secondary); }
.members-filter input,.members-filter select { width:100%; min-height:42px; box-sizing:border-box; padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; }
.members-filter-actions { display:flex; gap:var(--space-2); align-items:center; }
.members-filter-actions .app-btn { min-height:42px; }
.members-section { margin-bottom:var(--space-6); }
.members-section h2,.members-invitations h2 { margin:0 0 var(--space-3); color:var(--color-primary-dark); font-size:var(--font-size-h3); }
.members-list { display:grid; gap:var(--space-2); }
.member-card { display:grid; grid-template-columns:minmax(280px,0.9fr) minmax(0,1.6fr); gap:var(--space-4); align-items:start; padding:var(--space-3) var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.member-card__avatar { display:block; width:84px; height:84px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:10px; border:1px solid var(--color-border); }
.member-card__main p { overflow-wrap:anywhere; }
.member-card__actions { min-width:0; display:block; }
.member-card__actions form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:end; }
.member-card__actions form > label:first-child { grid-column:1/-1; }
.member-card__actions form > label:has(textarea[name="motif_refus"]) { grid-column:2; }
.member-card__actions form > label:has(textarea[name="motif_refus"]) textarea { display:block; }
.member-card__actions form > button[name="action"][value="valider"] { grid-column:1; grid-row:3; }
.member-card__actions form > label:has(textarea[name="motif_refus"]) { grid-row:3; }
.member-card__actions form > button[name="action"][value="refuser"] { grid-column:2; grid-row:4; justify-self:end; }
.member-card__actions form > label { min-width:0; }
.member-card__actions input[name="fonction"] { width:100%; box-sizing:border-box; min-height:40px; padding:8px 10px; }
.member-card__actions .form-checks { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; min-width:0; }
.member-card__actions .form-check { display:flex; align-items:center; gap:8px; min-width:0; }
.member-card__actions .form-check span { overflow-wrap:anywhere; }
.member-card__actions textarea { width:100%; box-sizing:border-box; min-height:64px; }
.member-card__actions button { justify-self:start; }
.member-card__actions button[name="action"][value="refuser"] { justify-self:end; }
.member-card--inactive { background:var(--color-bg-secondary); box-shadow:none; }
.member-card__main { min-width:0; }
.member-card__name { margin:0; color:var(--color-primary-dark); font-size:var(--font-size-standard); overflow-wrap:anywhere; }
.member-card__meta { display:flex; flex-wrap:wrap; gap:5px var(--space-3); margin:2px 0 0; color:var(--color-text-secondary); font-size:var(--font-size-xs); }
.member-card__email { overflow-wrap:anywhere; }
.member-card__function { color:var(--color-text); font-weight:650; }
.member-card__status { display:inline-flex; align-items:center; max-width:100%; margin-top:6px; padding:var(--space-1) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-full); color:var(--color-primary-dark); background:var(--color-primary-light); font-size:var(--font-size-sm); font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.member-card--inactive .member-card__status { color:var(--color-text-secondary); background:var(--color-bg-secondary); border-color:var(--color-border); }
.member-card__roles { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 0; padding:0; list-style:none; }
.member-card__roles li { padding:3px var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-bg-secondary); color:var(--color-text-secondary); font-size:11px; font-weight:650; }
.member-card__actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.member-card__actions .app-btn { min-height:38px; padding:7px 12px; font-size:13px; }
.members-empty { margin:0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text-secondary); }
.members-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:var(--space-3); }
.members-pagination__summary { color:var(--color-text-secondary); font-size:var(--font-size-xs); }
.members-pagination__links { display:flex; gap:5px; }
.members-pagination__links a { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; padding:0 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-primary-dark); font-weight:650; text-decoration:none; }
.members-pagination__links a:hover { background:var(--color-primary-light); text-decoration:none; }
.members-pagination__links span { display:inline-flex; align-items:center; padding:0 3px; color:var(--color-text-secondary); }
.members-invitations { margin-bottom:var(--space-6); }
.members-add { display:flex; justify-content:flex-end; margin-top:var(--space-2); }
@media (min-width:640px) { .membership-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .members-filters { grid-template-columns:1fr 1fr; } .members-filter:first-child { grid-column:1/-1; } .members-filter-actions { grid-column:1/-1; } .member-card { grid-template-columns:1fr; } .member-card__actions { justify-content:flex-start; } .members-pagination { align-items:flex-start; flex-direction:column; } .members-pagination__links { width:100%; justify-content:space-between; } .members-pagination__links a { flex:1; } }
@media (max-width:480px) { .members-filters { grid-template-columns:1fr; } .members-filter:first-child,.members-filter-actions { grid-column:auto; } .member-card { padding:11px; } .association-card-main { gap:var(--space-3); padding:var(--space-4); } .association-logo { flex-basis:88px; width:88px; height:88px; border-radius:var(--radius-md); } .association-info h2 { font-size:18px; } .association-card-footer { padding:0 var(--space-4) var(--space-4); } }


/* P1.4 — Accueil */
.welcome { max-width: 820px; margin: 0 auto var(--space-6); text-align: center; }
.welcome h1 { margin: 0 0 var(--space-3); color: var(--color-primary-dark); font-size: clamp(30px, 6vw, 46px); line-height: 1.12; letter-spacing: -0.7px; }
.welcome p { max-width: 650px; margin: 0 auto; color: var(--color-text-secondary); font-size: var(--font-size-standard); }
.services-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 1080px; margin: 0 auto; }
.service-card { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; padding: var(--space-5); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
a.service-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
a.service-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: var(--shadow-md); text-decoration: none; }
a.service-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.service-icon { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; border-radius: var(--radius-md); background: var(--color-primary-light); font-size: 27px; }
.service-copy { flex: 1; min-width: 0; }
.service-title { display: block; color: var(--color-primary-dark); font-size: var(--font-size-standard); font-weight: 750; line-height: 1.3; }
.service-description { display: block; margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.5; }
.service-card--upcoming { background: var(--color-bg-secondary); box-shadow: none; }
.service-card--upcoming .service-icon { background: var(--color-border); }
.service-status { display: inline-block; margin-top: var(--space-2); padding: 3px var(--space-2); color: var(--color-text-secondary); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 700; line-height: 1.4; }
@media (min-width: 560px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 960px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
@media (max-width: 420px) { .service-card { gap: var(--space-3); padding: var(--space-4); } .service-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 24px; } }


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

@media (max-width: 768px) {

    .app-page-header {
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .app-page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .app-list-row {
        align-items: flex-start;
    }

    .app-list-row__actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .app-form-actions {
        justify-content: stretch;
    }

    .app-form-actions > .app-btn,
    .app-form-actions > button,
    .app-form-actions > a {
        flex: 1 1 160px;
    }
}

@media (max-width: 480px) {

    .app-page-header__title {
        font-size: 28px;
    }

    .app-card__header,
    .app-card__body,
    .app-card__footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .app-list-row {
        flex-direction: column;
        gap: var(--space-2);
    }

    .app-list-row__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {

    .app-btn,
    .app-icon-btn,
    .app-back-button,
    .app-card,
    .app-tabs a,
    .app-tabs button {
        transition: none;
    }
}
/* =====================================================================
   DESIGN SYSTEM V2 — UNIVERSAL NAVY / BLUE / WHITE
   This layer is intentionally shared by every application screen.
   ===================================================================== */

html { scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--color-primary-dark); }
p { color: var(--color-text-secondary); }

.app-main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6) 20px;
}

.app-footer {
    background: var(--color-primary-darker);
}

.app-btn {
    border-radius: 7px;
    background: var(--color-primary);
    color: var(--color-surface);
    box-shadow: none;
}
.app-btn:hover { background: var(--color-primary-hover); color: var(--color-surface); }
.app-btn-primary { background: var(--color-primary); color: var(--color-surface); }
.app-btn-secondary {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-border-strong);
}
.app-btn-secondary:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.app-btn-ghost {
    background: var(--color-surface);
    color: var(--color-primary-dark);
    border-color: var(--color-border);
}
.app-btn-ghost:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

.app-icon-btn {
    border-radius: 7px;
}
.app-icon-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.app-main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6) 20px;
}

.app-footer {
    background: var(--color-primary-darker);
}

.app-btn {
    border-radius: 7px;
    background: var(--color-primary);
    color: var(--color-surface);
    box-shadow: none;
}
.app-btn:hover { background: var(--color-primary-hover); color: var(--color-surface); }
.app-btn-primary { background: var(--color-primary); color: var(--color-surface); }
.app-btn-secondary {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-border-strong);
}
.app-btn-secondary:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.app-btn-ghost {
    background: var(--color-surface);
    color: var(--color-primary-dark);
    border-color: var(--color-border);
}
.app-btn-ghost:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

.app-icon-btn {
    border-radius: 7px;
}
.app-icon-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.app-back-button {
    border-radius: 7px;
    color: var(--color-primary);
}
.app-back-button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-border-strong);
    color: var(--color-primary-hover);
}

.app-card,
.panel,
.app-table-container,
.app-section {
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.app-card:hover { border-color: var(--color-border-strong); }
.app-card__header,
.app-card__footer { border-color: var(--color-border); }
.app-card__header { color: var(--color-primary-dark); }
.app-card__footer { background: var(--color-bg-secondary); }

.app-field { gap: 5px; }
.app-label { color: var(--color-primary-dark); }
.app-input, .app-select, .app-textarea {
    border-radius: 7px;
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}
.app-input:focus, .app-select:focus, .app-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.app-help { color: var(--color-text-secondary); }

.app-table th {
    background: var(--color-bg-secondary);
    color: var(--color-primary-dark);
}
.app-table tbody tr:hover { background: var(--color-primary-subtle); }

.app-search__input {
    border-radius: 7px;
    border-color: var(--color-border-strong);
}
.app-search__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.filter-chip {
    border-radius: 7px;
}
.filter-chip:hover, .filter-chip.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-border-strong);
    color: var(--color-primary-dark);
}
.filter-drawer { box-shadow: var(--shadow-md); }

.app-alert-info {
    background: var(--color-primary-light);
    border-color: var(--color-border-strong);
    color: var(--color-primary-dark);
}

.app-empty-state {
    border-color: var(--color-border-strong);
}
.app-empty-state__title { color: var(--color-primary-dark); }

.app-pagination a, .app-pagination span,
.pagination a, .pagination span,
.bourse-pagination a, .bourse-pagination span {
    border-radius: 6px;
}
.app-pagination a:hover,
.pagination a:hover,
.bourse-pagination a:hover {
    background: var(--color-primary-light);
    border-color: var(--color-border-strong);
    color: var(--color-primary-dark);
}
.app-pagination .current, .app-pagination .active,
.pagination .current, .pagination .active, .pagination span.active,
.bourse-pagination .current, .bourse-pagination .active, .bourse-pagination span.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
}

/* Common application components */
.app-page { width: 100%; }
.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}
.app-page-header__title { color: var(--color-primary-dark); }
.app-page-header__subtitle { color: var(--color-text-secondary); }
.app-page-header__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.app-section-title {
    color: var(--color-primary-dark);
    font-weight: 750;
}
.app-meta, .app-text-muted { color: var(--color-text-secondary); }
.app-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
.app-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.app-list-row {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.app-list-row:hover { background: var(--color-primary-subtle); }
.app-list-row__title { color: var(--color-primary-dark); }
.app-list-row__description { color: var(--color-text-secondary); }

.app-tabs {
    border-bottom: 1px solid var(--color-border);
}
.app-tabs a, .app-tabs button {
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
}
.app-tabs a:hover, .app-tabs a.is-active,
.app-tabs button:hover, .app-tabs button.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: transparent;
}

.app-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}
.app-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.app-event-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.app-event-card__date { color: var(--color-primary); }
.app-event-card__title { color: var(--color-primary-dark); }
.app-divider { border-color: var(--color-border); }

/* Homepage legacy components use the same system */
.welcome h1 { color: var(--color-primary-dark); }
.service-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
}
.service-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}
.service-icon {
    background: var(--color-primary-light);
}
.service-title { color: var(--color-primary-dark); }
.service-description { color: var(--color-text-secondary); }
.service-card--upcoming { background: var(--color-bg-secondary); }
.service-card--upcoming .service-icon { background: var(--color-primary-light); }

/* Status and semantic colors stay distinct from brand */
.app-alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.app-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.app-alert-error { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-text); }

/* P1.4 — Accueil : structure sobre, sans bloc non validé */
.home-page {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 8px 0 48px;
}

.home-welcome {
    max-width: 820px;
    margin: 0 auto 28px;
    text-align: center;
}

.home-welcome h1 {
    margin: 0 0 12px;
    color: var(--color-primary-dark);
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.home-welcome p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-standard);
    line-height: 1.55;
}

.home-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.home-service-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.home-service-card:hover {
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.home-service-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.home-service-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-primary-light);
    font-size: 25px;
}

.home-service-card__copy {
    flex: 1;
    min-width: 0;
}

.home-service-card__copy strong {
    display: block;
    color: var(--color-primary-dark);
    font-size: var(--font-size-standard);
    line-height: 1.3;
}

.home-service-card__copy > span {
    display: block;
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.home-service-card__copy small {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.home-service-card--disabled {
    background: var(--color-bg-secondary);
    box-shadow: none;
}

.home-service-card--disabled .home-service-card__icon {
    background: var(--color-primary-light);
}

@media (min-width: 560px) {
    .home-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 960px) {
    .home-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 420px) {
    .home-service-card {
        gap: 13px;
        padding: 17px;
    }

    .home-service-card__icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-service-card {
        transition: none;
    }
}

/* P1.4 — Shell finalisé : navigation, menu, mobile */
.app-header {
    background: var(--color-primary-dark);
    border-bottom: 0;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-shadow) 14%, transparent);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-header-inner {
    width: 100%;
    max-width: var(--content-max-width);
    min-height: 68px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-surface);
    text-decoration: none;
}

.app-brand:hover {
    color: var(--color-surface);
    text-decoration: none;
}

.app-brand-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-surface) 18%, transparent);
    color: var(--color-surface);
    font-size: 22px;
}

.app-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.app-brand-text strong {
    color: var(--color-surface);
    font-size: 15px;
}

.app-brand-text small {
    margin-top: 2px;
    color: color-mix(in srgb, var(--color-surface) 72%, transparent);
    font-size: 11px;
    font-weight: 500;
}

.app-desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.app-desktop-nav > a,
.app-desktop-nav > .app-nav-disabled {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: var(--font-size-sm);
    font-weight: 650;
    white-space: nowrap;
}

.app-desktop-nav > a {
    color: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.app-desktop-nav > a:hover,
.app-desktop-nav > a.is-active {
    background: color-mix(in srgb, var(--color-surface) 12%, transparent);
    color: var(--color-surface);
    text-decoration: none;
}

.app-desktop-nav > .app-nav-disabled {
    color: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

.app-coming-soon {
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--color-surface) 14%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    color: color-mix(in srgb, var(--color-surface) 70%, transparent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.app-notification-button,
.app-menu-toggle {
    border-color: color-mix(in srgb, var(--color-surface) 20%, transparent);
    background: transparent;
    color: var(--color-surface);
}

.app-notification-button:hover,
.app-menu-toggle:hover,
.app-menu-toggle:focus-visible {
    background: color-mix(in srgb, var(--color-surface) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
    color: var(--color-surface);
}

.app-notification-button {
    position: relative;
}

.app-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-error);
    color: var(--color-surface);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.app-menu {
    position: relative;
}

.app-menu-toggle {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-surface) 20%, transparent);
    border-radius: 7px;
    font-size: var(--font-size-sm);
    font-weight: 650;
}

.app-menu-toggle::-webkit-details-marker,
.app-mobile-more > summary::-webkit-details-marker {
    display: none;
}

.app-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-surface) 16%, transparent);
    color: var(--color-surface);
    font-size: 12px;
    font-weight: 800;
}

.app-menu-toggle-label {
    max-width: 90px;
    color: var(--color-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.app-menu-section-label {
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.app-menu-group,
.app-menu-subitems {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-menu-panel a,
.app-menu-submenu summary {
    display: block;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.app-menu-panel a:hover,
.app-menu-submenu summary:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.app-menu-submenu {
    border-top: 1px solid var(--color-border);
    padding-top: 4px;
}

.app-menu-submenu summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
}

.app-menu-arrow {
    transition: transform .15s ease;
}

.app-menu-submenu[open] .app-menu-arrow {
    transform: rotate(90deg);
}

.app-menu-subitems {
    padding-left: 8px;
}

.app-menu-actions {
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.app-menu-actions form {
    margin: 0;
}

.app-menu-danger {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 7px;
    background: var(--color-error);
    color: var(--color-surface);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.app-login-btn {
    min-height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--color-primary);
    color: var(--color-surface) !important;
    font-weight: 700;
    text-decoration: none;
}

.app-login-btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-surface) !important;
    text-decoration: none;
}

/* P1.4 — Détail événement : partage */
.partager-evenement {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .55rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.partager-evenement:hover {
    background: var(--color-primary-light);
}

.partager-evenement:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.partager-evenement svg {
    width: 20px;
    height: 20px;
}

.partager-evenement-statut {
    display: inline-block;
    margin-left: .5rem;
}

/* P1.4 — Accès Bourse : assurance */
.bourse-acces {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    color: var(--color-text);
}

.bourse-acces h1,
.bourse-acces h2 {
    color: var(--color-primary-dark);
}

.bourse-acces-form,
.bourse-acces-historique {
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.bourse-acces-form p {
    display: grid;
    gap: .35rem;
}

.bourse-acces-form input {
    max-width: 100%;
    min-height: 42px;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
}

.bourse-acces button {
    min-height: 44px;
    padding: .6rem 1rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-surface);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.bourse-acces :focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.bourse-acces-alerte {
    margin: 1rem 0;
    padding: 1rem;
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
}

.bourse-acces-erreur {
    color: var(--color-error);
}

.bourse-acces-table {
    width: 100%;
    border-collapse: collapse;
}

.bourse-acces-table th,
.bourse-acces-table td {
    padding: .65rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

@media (max-width: 620px) {
    .bourse-acces-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .bourse-acces-table,
    .bourse-acces-table tbody,
    .bourse-acces-table tr,
    .bourse-acces-table td {
        display: block;
        width: 100%;
    }

    .bourse-acces-table tr {
        padding: .65rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .bourse-acces-table td {
        display: grid;
        grid-template-columns: minmax(7rem, 35%) 1fr;
        gap: .5rem;
        border: 0;
    }

    .bourse-acces-table td::before {
        content: attr(data-label);
        font-weight: 700;
    }
}

/* Breadcrumb / retour */
.app-breadcrumb {
    position: sticky;
    top: 68px;
    z-index: 90;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-breadcrumb-inner {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 9px 20px;
}

.app-breadcrumb a {
    color: var(--color-primary);
}

.app-breadcrumb-current {
    color: var(--color-text);
}

.app-mobile-back {
    display: none;
}

.app-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.app-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.app-breadcrumb-separator {
    color: var(--color-text-secondary);
    font-size: 14px;
    flex-shrink: 0;
}

.app-desktop-nav > a:focus-visible,
.app-notification-button:focus-visible,
.app-login-btn:focus-visible,
.app-mobile-nav > a:focus-visible,
.app-mobile-more > summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-surface) 72%, transparent);
    outline-offset: 2px;
}

.app-mobile-nav > a:focus-visible,
.app-mobile-more > summary:focus-visible {
    outline-color: var(--color-primary);
}

.app-menu[open] .app-menu-toggle {
    background: color-mix(in srgb, var(--color-surface) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
}

.app-mobile-more[open] > summary {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
}

/* Barre mobile fixe : Annuaire / Agenda / Bourse / Discussions */
.app-mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: 72px;
    }

    .app-breadcrumb {
        top: 56px;
    }

    .app-header-inner {
        min-height: 56px;
        padding: 7px 12px;
        gap: 8px;
    }

    .app-brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .app-brand-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 20px;
    }

    .app-brand-text strong {
        font-size: 14px;
    }

    .app-brand-text small {
        font-size: 10px;
    }

    .app-desktop-nav,
    .app-login-desktop,
    .app-menu-toggle-label {
        display: none !important;
    }

    .app-header-actions {
        gap: 6px;
    }

    .app-notification-button,
    .app-menu-toggle {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }

    .app-menu-toggle {
        justify-content: center;
    }

    .app-menu-panel {
        right: 0;
        width: min(292px, calc(100vw - 24px));
        max-height: calc(100vh - 120px);
    }

    .app-breadcrumb-inner {
        padding: 7px 12px;
    }

    .app-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        width: 100%;
        min-height: 64px;
        padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px color-mix(in srgb, var(--color-shadow) 10%, transparent);
    }

    .app-mobile-nav > a,
    .app-mobile-nav > span,
    .app-mobile-more,
    .app-mobile-more > summary {
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }

    .app-mobile-nav > a,
    .app-mobile-nav > span,
    .app-mobile-more > summary {
        min-height: 54px;
        padding: 5px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 7px;
        color: var(--color-text-secondary);
        font-size: 19px;
        text-decoration: none;
    }

    .app-mobile-nav small {
        white-space: nowrap;
        font-size: 10px;
        font-weight: 650;
    }

    .app-mobile-nav > a:hover,
    .app-mobile-nav > a.is-active,
    .app-mobile-more > summary:hover {
        background: var(--color-primary-light);
        color: var(--color-primary-hover);
        text-decoration: none;
    }

    .app-mobile-nav > span.is-disabled {
        opacity: .48;
        pointer-events: none;
    }

    .app-mobile-more {
        position: relative;
    }

    .app-mobile-more-panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 10px);
        width: min(280px, calc(100vw - 24px));
        padding: 8px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .app-mobile-more-panel a {
        display: block;
        min-height: 44px;
        padding: 11px 12px;
        border-radius: 8px;
        color: var(--color-text);
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

    .app-mobile-more-panel a:hover {
        background: var(--color-primary-light);
        color: var(--color-primary-dark);
        text-decoration: none;
    }
}

/* P1.4 — Formulaire événement */
.event-form-page { max-width:960px; margin:0 auto; }
.event-form-card { padding:28px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.event-form-heading { margin:0 0 8px; color:var(--color-primary-dark); font-size:clamp(26px,4vw,36px); line-height:1.2; }
.event-form-intro { margin:0 0 24px; color:var(--color-text-secondary); }
.event-form-association { margin:0 0 24px; padding:13px 16px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-bg); }
.event-form-association strong { display:block; color:var(--color-primary-dark); font-size:14px; }
.event-form-association span { display:block; margin-top:2px; font-weight:650; overflow-wrap:anywhere; }
.event-form-section { min-width:0; margin:0 0 18px; padding:20px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); }
.event-form-section legend { padding:0 8px; color:var(--color-primary-dark); font-size:18px; font-weight:750; }
.event-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.event-form-field { min-width:0; }
.event-form-field--wide { grid-column:1 / -1; }
.event-form-field > label, .event-form-label { display:block; margin-bottom:6px; color:var(--color-text); font-weight:700; }
.event-form-field input:not([type="checkbox"]):not([type="file"]), .event-form-field select, .event-form-field textarea { display:block; width:100%; min-width:0; min-height:46px; padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; }
.event-form-field textarea { min-height:112px; resize:vertical; }
.event-form-field input[type="datetime-local"] { padding-inline:9px; }
.event-form-field input[type="file"] { display:block; width:100%; max-width:100%; min-height:44px; padding:7px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; }
.event-form-field select[multiple] { min-height:140px; padding:8px; }
.event-form-field input[type="checkbox"] { width:20px; height:20px; margin:2px 8px 0 0; accent-color:var(--color-primary); vertical-align:top; }
.event-form-field :focus-visible { outline:3px solid color-mix(in srgb, var(--color-primary) 28%, transparent); outline-offset:2px; border-color:var(--color-primary); }
.event-form-help { margin:6px 0 0; color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.event-form-error { margin:6px 0 0; color:var(--color-error-text); font-size:var(--font-size-sm); font-weight:600; }
.event-form-error-summary { margin:0 0 18px; padding:13px 16px; border:1px solid var(--color-error-border); border-radius:10px; background:var(--color-error-bg); color:var(--color-error-text); }
.event-form-check { display:flex; align-items:flex-start; gap:2px; }
.event-form-check label { margin:0; font-weight:600; }
.event-form-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.event-form-actions .button { min-height:48px; padding:12px 20px; }
.event-form-actions .button:focus-visible { outline:3px solid var(--color-primary-dark); outline-offset:3px; }
.event-place-card { margin:8px 0 12px; padding:14px 16px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-bg); overflow-wrap:anywhere; }
.event-place-card strong { display:block; color:var(--color-primary-dark); font-size:17px; }
.event-place-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.event-place-actions .button { min-height:46px; }
@media (max-width:640px) {
    .event-form-card { padding:18px; }
    .event-form-section { padding:16px; }
    .event-form-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    .event-form-field--wide { grid-column:auto; }
    .event-form-actions, .event-place-actions { flex-direction:column; }
    .event-form-actions .button, .event-place-actions .button { width:100%; }
}

/* P1.4 — Invitation */
.invite-page { max-width:640px; margin:0 auto; }
.invite-card { padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.invite-card h1 { margin-top:0; color:var(--color-primary-dark); }
.invite-field { margin:16px 0; }
.invite-field label { display:block; font-weight:700; margin-bottom:6px; }
.invite-field input { width:100%; min-height:46px; padding:9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font:inherit; }
.invite-button { min-height:44px; padding:10px 18px; border:0; border-radius:var(--radius-full); background:var(--color-primary); color:var(--color-surface); font:inherit; font-weight:700; cursor:pointer; }
.invite-message { padding:14px; border-radius:10px; background:var(--color-primary-light); }
.invite-error { padding:14px; border-radius:10px; color:var(--color-error-text); background:var(--color-error-bg); }
.invite-button:focus-visible, .invite-card a:focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }

@media (min-width: 769px) {
    .app-mobile-nav {
        display: none;
    }
}

/* P1.5 — Sécurité / mot de passe */
.security-page {
    max-width: 760px;
    margin: 0 auto;
}

.security-card {
    width: 100%;
}

.security-card .app-field input,
.security-card .app-field input[type="password"],
.security-card .app-field input[type="text"],
.security-card .app-field input[type="email"] {
    width: 100%;
    box-sizing: border-box;
}

/* P1.5 — Profil utilisateur : design aligné sur la planche de référence */
.profile-page { width:min(1200px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.profile-nav { min-width:0; position:sticky; top:76px; padding:8px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:0 2px 8px color-mix(in srgb, var(--color-shadow) 4%, transparent); }
.profile-nav__account { display:flex; align-items:center; gap:10px; padding:8px 8px 14px; border-bottom:1px solid var(--color-border); }
.profile-nav__avatar,.profile-overview__avatar { display:grid; place-items:center; border-radius:50%; background:var(--color-primary-light); color:var(--color-primary-hover); font-weight:800; }
.profile-nav__avatar { width:36px; height:36px; flex:0 0 36px; font-size:.86rem; }
.profile-nav__account-text { min-width:0; display:flex; flex-direction:column; gap:2px; }
.profile-nav__account-text strong { color:var(--color-primary-dark); font-size:.82rem; }
.profile-nav__account-text small { overflow:hidden; color:var(--color-text-secondary); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-nav__links { display:flex; flex-direction:column; gap:2px; padding-top:9px; }
.profile-nav__links a,.profile-nav__disabled { min-height:40px; padding:8px 10px; display:flex; align-items:center; gap:10px; border-radius:7px; color:var(--color-text); font-size:.79rem; font-weight:600; line-height:1.2; text-decoration:none; }
.profile-nav__links a:hover { background:var(--color-primary-subtle); text-decoration:none; }
.profile-nav__links a.is-active { background:var(--color-primary-light); color:var(--color-primary-hover); }
.profile-icon { width:18px; flex:0 0 18px; color:currentColor; font-size:1rem; text-align:center; }
.profile-nav__disabled { color:var(--color-text-disabled); }
.profile-nav__logout { margin:14px 4px 2px; padding-top:12px; border-top:1px solid var(--color-border); }
.profile-nav__logout button { width:100%; min-height:36px; padding:7px 8px; border:0; background:transparent; color:var(--color-error); font:inherit; font-size:.76rem; text-align:left; cursor:pointer; }
.profile-nav__logout button:hover { background:var(--color-error-bg); border-radius:7px; }
.profile-content { min-width:0; }
.profile-page-heading { margin:0 0 18px; }
.profile-page-heading h1 { margin:0 0 4px; color:var(--color-primary-darker); font-size:clamp(1.55rem,2.4vw,1.9rem); line-height:1.15; letter-spacing:-.02em; }
.profile-page-heading p { margin:0; color:var(--color-text-secondary); font-size:.86rem; }
.profile-messages { margin:0 0 14px; }
.profile-card { padding:18px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; box-shadow:0 2px 8px color-mix(in srgb, var(--color-shadow) 4.5%, transparent); }
.profile-card + .profile-card { margin-top:14px; }
.profile-overview { display:flex; align-items:center; gap:16px; }
.profile-overview__avatar { width:76px; height:76px; flex:0 0 76px; font-size:1.45rem; }
.profile-overview__main { flex:1; min-width:0; }
.profile-overview__heading,.profile-card__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.profile-card h2,.profile-overview h2 { margin:0; color:var(--color-primary-darker); font-size:1rem; line-height:1.25; }
.profile-overview h2 { font-size:1.08rem; }
.profile-contact,.profile-verified { margin:6px 0 0; font-size:.79rem; }
.profile-contact { color:var(--color-primary-hover); } .profile-contact span { color:var(--color-primary); }
.profile-verified { color:var(--color-success); } .profile-verified span { color:var(--color-success); }
.profile-description { max-width:680px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--color-border); color:var(--color-text-secondary); font-size:.78rem; line-height:1.5; }
.profile-text-link { flex:0 0 auto; color:var(--color-primary-hover); font-size:.77rem; font-weight:700; text-decoration:none; }
.profile-text-link:hover { text-decoration:underline; }
.profile-two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.profile-card__heading h2 { margin:0; } .profile-card__heading p { margin:5px 0 0; color:var(--color-text-secondary); font-size:.77rem; line-height:1.45; }
.profile-card__heading--stack { display:block; }
.profile-list { margin-top:12px; }
.profile-list-row { min-height:56px; padding:9px 0; display:flex; align-items:center; gap:10px; border-top:1px solid var(--color-border); text-decoration:none; }
.profile-list-row:first-child { border-top:0; padding-top:2px; }
.profile-list-row__avatar { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; background:var(--color-primary-subtle); color:var(--color-primary-hover); font-size:.76rem; font-weight:800; }
.profile-list-row__content { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.profile-list-row__content strong { overflow:hidden; color:var(--color-primary-dark); font-size:.76rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.profile-list-row__content small { color:var(--color-text-secondary); font-size:.67rem; }
.profile-mini-button { flex:0 0 auto; min-height:32px; padding:6px 10px; display:inline-flex; align-items:center; border:1px solid var(--color-border-strong); border-radius:7px; background:var(--color-primary-subtle); color:var(--color-primary-hover); font-size:.7rem; font-weight:700; text-decoration:none; }
.profile-mini-button:hover { background:var(--color-primary-light); text-decoration:none; }
.profile-list-row--activity { color:inherit; }
.profile-activity-icon { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:7px; background:var(--color-primary-subtle); color:var(--color-primary-hover); font-size:.75rem; }
.profile-empty { margin:14px 0 0; color:var(--color-text-secondary); font-size:.78rem; }
.profile-card--edit { margin-top:14px; scroll-margin-top:90px; }
.profile-form { margin-top:16px; } .profile-form-grid { max-width:620px; }
.profile-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--color-border); }
.profile-card--security { display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--color-surface-muted); }
.profile-card--security p { margin:5px 0 0; color:var(--color-text-secondary); font-size:.77rem; }
.profile-card--security .app-btn { flex:0 0 auto; }
@media (max-width:900px) {
 .profile-page { width:min(100% - 32px,720px); grid-template-columns:1fr; gap:16px; }
 .profile-nav { position:static; } .profile-nav__account,.profile-nav__logout { display:none; }
 .profile-nav__links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:4px; }
 .profile-nav__links a,.profile-nav__disabled { justify-content:center; min-height:44px; padding:6px; }
 .profile-nav__links a span:last-child,.profile-nav__disabled span:last-child { display:none; }
}
@media (max-width:640px) {
 .profile-page { width:min(100% - 20px,560px); gap:12px; } .profile-nav { display:none; }
 .profile-page-heading { margin-bottom:14px; } .profile-page-heading h1 { font-size:1.35rem; }
 .profile-card { padding:14px; border-radius:9px; } .profile-overview { align-items:flex-start; gap:12px; }
 .profile-overview__avatar { width:58px; height:58px; flex-basis:58px; font-size:1.1rem; }
 .profile-overview__heading,.profile-card--security { flex-direction:column; align-items:stretch; }
 .profile-text-link { align-self:flex-start; } .profile-two-columns { grid-template-columns:1fr; gap:12px; }
 .profile-card__heading { gap:10px; } .profile-list-row { min-height:54px; } .profile-mini-button { min-height:34px; }
 .profile-form-actions { flex-direction:column-reverse; }
 .profile-form-actions .app-btn,.profile-card--security .app-btn { width:100%; }
}


/* P1.5 — Tableau de bord sécurité */
.security-dashboard {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto;
}
.security-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.security-status-card {
    min-width: 0;
}
.security-status-card--wide {
    grid-column: 1 / -1;
}
.security-status-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    font-size: 20px;
    font-weight: 800;
}
.security-status-card .app-card__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.security-status-card__content {
    min-width: 0;
}
.security-status-card__content h2,
.security-guidance h2 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: var(--font-size-h3);
}
.security-status-card__content p {
    margin: var(--space-1) 0 var(--space-2);
    overflow-wrap: anywhere;
}
.security-status-card .app-card__footer {
    align-items: center;
    gap: var(--space-3);
}
.security-status-card .app-card__footer .app-text-muted {
    flex: 1 1 auto;
}
.security-guidance {
    margin-bottom: var(--space-6);
}
.security-guidance .app-list {
    margin-top: var(--space-4);
}
@media (max-width: 760px) {
    .security-dashboard {
        width: min(100% - 24px, 680px);
    }
    .security-dashboard__grid {
        grid-template-columns: 1fr;
    }
    .security-status-card--wide {
        grid-column: auto;
    }
    .security-status-card .app-card__footer {
        align-items: stretch;
        flex-direction: column;
    }
    .security-status-card .app-card__footer .app-btn {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .security-dashboard {
        width: calc(100% - 16px);
    }
    .security-status-card .app-card__body,
    .security-guidance .app-card__body {
        padding: var(--space-4);
    }
}


/* P1.5 — Notifications et préférences */
.preferences-page {
    width: min(820px, calc(100% - 48px));
    margin: 0 auto;
}
.preferences-card {
    overflow: hidden;
}
.preferences-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
.preferences-fieldset legend {
    margin-bottom: var(--space-4);
    color: var(--color-primary-dark);
    font-size: var(--font-size-h3);
    font-weight: 750;
}
.preference-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.preference-row:first-of-type {
    padding-top: 0;
}
.preference-row:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
.preference-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
    accent-color: var(--color-primary);
}
.preference-row__copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.preference-row__copy strong {
    color: var(--color-primary-dark);
    font-size: var(--font-size-standard);
}
.preference-row__copy small {
    color: var(--color-text-secondary);
    line-height: 1.45;
}
@media (max-width: 600px) {
    .preferences-page {
        width: calc(100% - 24px);
    }
    .preferences-card .app-card__footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .preferences-card .app-card__footer .app-btn {
        width: 100%;
    }
}


/* P1.5 — Centre de notifications utilisateur */
.notifications-page {
    width: min(920px, calc(100% - 48px));
    margin: 0 auto;
}
.notifications-card {
    overflow: hidden;
}
.notifications-list {
    display: flex;
    flex-direction: column;
}
.notification-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}
.notification-row:first-child {
    padding-top: 0;
}
.notification-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.notification-row__indicator {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: transparent;
}
.notification-row--unread .notification-row__indicator {
    background: var(--color-primary);
}
.notification-row__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.notification-row__message {
    color: var(--color-primary-dark);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.notification-row__message:hover {
    color: var(--color-primary-hover);
}
.notification-row time {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}
.notification-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex: 0 0 auto;
}
.notification-row__actions form {
    margin: 0;
}
.notification-row__actions .app-btn {
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .notifications-page {
        width: calc(100% - 24px);
    }
    .notifications-page .app-page-header__actions {
        width: 100%;
    }
    .notifications-page .app-page-header__actions .app-btn {
        width: 100%;
    }
    .notification-row {
        gap: var(--space-2);
    }
    .notification-row__actions {
        align-items: flex-end;
        flex-direction: column;
        gap: 6px;
    }
    .notification-row__actions .app-btn {
        width: auto;
    }
}


/* P1.5 — Sessions actives */
.security-sessions {
    margin-bottom: var(--space-5);
}
.security-sessions__heading {
    margin: 0 0 var(--space-4);
}
.security-sessions__heading .app-page-header__main {
    min-width: 0;
}
.security-sessions__heading .app-section-title {
    margin-bottom: var(--space-1);
}
.security-session-list {
    display: flex;
    flex-direction: column;
}
.security-session-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}
.security-session-row:first-child {
    border-top: 0;
    padding-top: 0;
}
.security-session-row:last-child {
    padding-bottom: 0;
}
.security-session-row__icon {
    width: 26px;
    flex: 0 0 26px;
    text-align: center;
    color: var(--color-primary);
}
.security-session-row__action {
    margin-left: auto;
    flex: 0 0 auto;
}
.security-session-row__action .app-btn {
    white-space: nowrap;
}
.security-session-row > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.security-session-row strong {
    color: var(--color-primary-dark);
}
.security-session-row small {
    color: var(--color-text-secondary);
}
@media (max-width: 760px) {
    .security-sessions__heading {
        align-items: stretch;
    }
    .security-sessions__heading form,
    .security-sessions__heading form .app-btn {
        width: 100%;
    }
    .security-session-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .security-session-row__action {
        width: 100%;
        margin-left: 52px;
    }
    .security-session-row__action .app-btn {
        width: 100%;
    }
}

/* P1.5 — Refonte de la page Mon profil */
.profile-page--refonte {
    width: min(1040px, calc(100% - 48px));
    display: block;
}

.profile-page--refonte .profile-content {
    max-width: 920px;
    margin: 0 auto;
}

.profile-page--refonte .profile-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.profile-card--identity {
    background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-primary-subtle) 100%);
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.profile-identity__main h2 {
    margin: 0;
    color: var(--color-primary-darker);
    font-size: 1.25rem;
}

.profile-identity__status {
    margin: 5px 0 0;
    color: var(--color-text-secondary);
    font-size: .82rem;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 18px 0 0;
}

.profile-details-grid > div {
    padding: 13px 0;
    border-top: 1px solid var(--color-border);
}

.profile-details-grid dt {
    color: var(--color-text-secondary);
    font-size: .72rem;
    font-weight: 650;
    margin-bottom: 4px;
}

.profile-details-grid dd {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: .84rem;
    font-weight: 650;
}

.profile-details-grid small {
    display: block;
    margin-top: 4px;
    font-size: .69rem;
}

.profile-status--ok { color: var(--color-success); }
.profile-status--warning { color: var(--color-warning, var(--color-warning)); }

.profile-org-summary {
    margin-top: 14px;
    border-top: 1px solid var(--color-border);
}

.profile-org-summary__item {
    min-height: 58px;
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

.profile-org-summary__item > span:nth-child(2) {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-org-summary__item strong {
    overflow: hidden;
    color: var(--color-primary-dark);
    font-size: .79rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-org-summary__item small {
    color: var(--color-text-secondary);
    font-size: .68rem;
}

.profile-org-summary__item > span:last-child {
    color: var(--color-primary-hover);
    font-size: 1.15rem;
}

.profile-org-summary__item:hover {
    text-decoration: none;
}

.profile-more-hint {
    margin: 9px 0 0;
    color: var(--color-text-secondary);
    font-size: .72rem;
}

.profile-empty-state {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.profile-empty-state p {
    margin: 0 0 12px;
    color: var(--color-text-secondary);
    font-size: .78rem;
}

.profile-quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.profile-quick-links > a {
    min-height: 70px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted);
    color: inherit;
    text-decoration: none;
}

.profile-quick-links > a:hover {
    border-color: var(--color-border-strong);
    background: var(--color-primary-subtle);
    text-decoration: none;
}

.profile-quick-links__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--color-primary-subtle);
}

.profile-quick-links > a > span:nth-child(2) {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-quick-links strong {
    color: var(--color-primary-dark);
    font-size: .78rem;
}

.profile-quick-links small {
    color: var(--color-text-secondary);
    font-size: .68rem;
}

.profile-quick-links > a > span:last-child {
    color: var(--color-primary-hover);
    font-size: 1.15rem;
}

.profile-edit-page {
    max-width: 760px;
}

.profile-form-grid--two {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-edit-email-field {
    max-width: none;
    margin-top: 14px;
}

@media (max-width: 700px) {
    .profile-page--refonte {
        width: min(100% - 20px, 620px);
    }

    .profile-page--refonte .profile-page-heading {
        flex-direction: column;
        gap: 12px;
    }

    .profile-page--refonte .profile-page-heading .app-btn {
        width: 100%;
    }

    .profile-details-grid,
    .profile-quick-links,
    .profile-form-grid--two {
        grid-template-columns: 1fr;
    }

    .profile-identity {
        gap: 13px;
    }

    .profile-overview__avatar {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .profile-quick-links > a {
        min-height: 64px;
    }
}

/* P1.5 — Mes organisations : espace personnel */
.organisations-page { max-width:1080px; }
.organisations-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin:0 auto var(--space-7); padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.organisations-kicker { margin:0 0 var(--space-2); color:var(--color-primary); font-size:var(--font-size-sm); font-weight:750; letter-spacing:.02em; text-transform:uppercase; }
.organisations-heading .page-heading__title { margin:0 0 var(--space-2); }
.organisations-intro { max-width:680px; margin:0; color:var(--color-text-secondary); line-height:1.55; }
.organisations-count { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; min-width:116px; min-height:116px; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg-secondary); }
.organisations-count strong { color:var(--color-primary-dark); font-size:2rem; line-height:1; }
.organisations-count span { margin-top:var(--space-2); color:var(--color-text-secondary); font-size:var(--font-size-sm); font-weight:650; }
.organisations-section-heading { margin-bottom:var(--space-4); }
.organisations-section-heading h2 { margin:0 0 4px; color:var(--color-primary-dark); font-size:var(--font-size-h2); }
.organisations-section-heading p { margin:0; color:var(--color-text-secondary); }
.organisations-list { max-width:900px; margin:0 auto; }
.organisation-card { display:grid; grid-template-columns:minmax(250px,.9fr) minmax(0,1.6fr) auto; align-items:stretch; overflow:hidden; margin-bottom:var(--space-4); }
.organisation-card__identity { display:flex; align-items:center; gap:var(--space-4); min-width:0; padding:var(--space-5); border-right:1px solid var(--color-border); }
.organisation-card__logo { display:block; width:82px; height:82px; flex:0 0 82px; padding:6px; object-fit:contain; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-primary-light); }
.organisation-card__logo--placeholder { display:flex; align-items:center; justify-content:center; font-size:2rem; }
.organisation-card__name { min-width:0; }
.organisation-card__type { margin:0 0 5px; color:var(--color-primary); font-size:var(--font-size-sm); font-weight:700; }
.organisation-card__name h3 { margin:0; color:var(--color-primary-dark); font-size:1.18rem; line-height:1.3; overflow-wrap:anywhere; }
.organisation-card__location { margin:5px 0 0; color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.organisation-card__body { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); padding:var(--space-5); }
.organisation-card__block h4 { margin:0 0 var(--space-2); color:var(--color-text-secondary); font-size:var(--font-size-sm); font-weight:750; }
.organisation-role-list,.organisation-domain-list { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.organisation-role,.organisation-domain-list span { display:inline-flex; align-items:center; min-height:26px; padding:4px 8px; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-bg-secondary); color:var(--color-text-secondary); font-size:var(--font-size-xs); line-height:1.35; font-weight:650; }
.organisation-role--color-primary { border-color:var(--color-primary); background:var(--color-primary-light); color:var(--color-primary-dark); }
.organisation-domain-list span { border-color:transparent; background:var(--color-primary-light); color:var(--color-primary); }

/* Pastilles de domaines d'activité — style commun aux fiches d'association. */
.categories { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.categorie { display:inline-flex; align-items:center; max-width:100%; padding:var(--space-1) var(--space-3); border:1px solid var(--color-primary-light); border-radius:var(--radius-full); background:var(--color-primary-light); color:var(--color-primary); font-size:var(--font-size-xs); line-height:1.3; font-weight:600; }
.organisation-card__muted { margin:0; color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.organisation-card__footer { display:flex; align-items:center; padding:var(--space-5); border-left:1px solid var(--color-border); }
.organisation-card__footer .app-btn { white-space:nowrap; }
.organisations-empty { max-width:720px; margin:var(--space-6) auto 0; padding:var(--space-7) var(--space-6); text-align:center; }
.organisations-empty__icon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto var(--space-4); border-radius:50%; background:var(--color-primary-light); font-size:1.8rem; }
.organisations-empty h2 { margin:0 0 var(--space-2); color:var(--color-primary-dark); font-size:var(--font-size-h3); }
.organisations-empty p { max-width:560px; margin:0 auto var(--space-5); color:var(--color-text-secondary); line-height:1.55; }
@media (max-width:850px) {
    .organisation-card { grid-template-columns:1fr; }
    .organisation-card__identity { border-right:0; border-bottom:1px solid var(--color-border); }
    .organisation-card__footer { justify-content:flex-start; padding-top:0; border-left:0; }
}
@media (max-width:700px) {
    .organisations-heading { align-items:flex-start; flex-direction:column; padding:var(--space-5); }
    .organisations-count { flex-direction:row; gap:var(--space-2); width:100%; min-height:0; min-width:0; justify-content:flex-start; }
    .organisations-count span { margin-top:0; }
    .organisation-card__identity,.organisation-card__body { padding:var(--space-4); }
    .organisation-card__body { grid-template-columns:1fr; gap:var(--space-4); }
    .organisation-card__footer { padding:0 var(--space-4) var(--space-4); }
    .organisation-card__footer .app-btn { width:100%; }
    .organisations-empty { padding:var(--space-6) var(--space-4); }
}

/* Identité visuelle paramétrable de la plateforme */
.app-brand-logo { display:block; width:42px; height:42px; flex:0 0 42px; object-fit:contain; border-radius:10px; background:var(--color-surface); }


/* Audit UX/UI P1.5 — éviter les collisions de navigation aux largeurs intermédiaires. */
@media (min-width: 769px) {
    .app-header-inner {
        gap: clamp(8px, 1.25vw, 18px);
    }

    .app-brand {
        flex: 0 1 auto;
    }

    .app-brand-text {
        overflow-wrap: anywhere;
    }

    .app-desktop-nav {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .app-desktop-nav > a {
        padding-inline: clamp(6px, .8vw, 12px);
    }

    .app-desktop-nav > .app-nav-disabled {
        max-width: 176px;
        white-space: normal;
        flex-wrap: wrap;
        gap: 3px 5px;
        line-height: 1.2;
    }

    .app-coming-soon {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }

    .app-menu-toggle-label {
        white-space: nowrap;
    }
}

@media (min-width: 769px) and (max-width: 1080px) {
    .app-header-inner {
        padding-inline: 12px;
        gap: 8px;
    }

    .app-brand {
        gap: 7px;
    }

    .app-brand-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 18px;
    }

    .app-brand-text strong {
        font-size: 13px;
    }

    .app-brand-text small {
        font-size: 10px;
    }

    .app-desktop-nav > a,
    .app-desktop-nav > .app-nav-disabled {
        padding-inline: 6px;
        font-size: 12px;
    }

    .app-coming-soon {
        display: inline-block;
        font-size: 9px;
        letter-spacing: 0;
    }

    .app-header-actions {
        gap: 4px;
    }

    .app-menu-toggle-label {
        max-width: 100px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* Champs complémentaires du profil et réglage 2FA. */
.profile-overview__avatar[src] {
    display: block;
    object-fit: cover;
    flex: 0 0 auto;
}

.security-2fa-form {
    display: grid;
    gap: 10px;
    width: 100%;
}

.security-2fa-form .app-input {
    width: 100%;
    max-width: 360px;
}

@media (max-width: 600px) {
    .security-2fa-form .app-btn {
        width: 100%;
    }
}


/* Agenda — mise en conformité des pages de détail avec le Design System commun. */
.agenda-detail {
    max-width: 900px;
    margin-inline: auto;
    padding-block: clamp(1rem, 3vw, 2rem);
}
.agenda-detail-carte {
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface, var(--color-surface));
    color: var(--color-text);
}
.agenda-detail-carte h1 {
    margin-block: 1.25rem .75rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.agenda-detail-carte h2 {
    margin-block: 1.5rem .5rem;
    color: var(--color-text);
}
.agenda-detail-image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: .75rem;
}
.agenda-detail-carte-lieu {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(240px, 42vw, 350px);
    border: 0;
    border-radius: .75rem;
}
.agenda-detail-liens-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: .85rem 0 1.25rem;
}
.agenda-detail-liens-carte a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: .5rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.agenda-detail-liens-carte a:hover,
.agenda-detail-liens-carte a:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    text-decoration: underline;
}
.agenda-detail-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.agenda-partage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.agenda-confirmation-suppression {
    width: min(100% - 2rem, 680px);
    margin: 1.5rem auto;
}
.agenda-retour-evenement {
    max-width: 600px;
}
@media (max-width: 600px) {
    .agenda-detail { padding-inline: .75rem; }
    .agenda-detail-carte { padding: 1rem; border-radius: .75rem; }
    .agenda-detail-carte h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    .agenda-detail-liens-carte { flex-direction: row; align-items: center; }
    .agenda-detail-liens-carte a { flex: 0 1 auto; white-space: normal; }
}


/* Agenda — parcours de création en quatre étapes conforme à la maquette. */
.event-wizard-step[hidden],
.event-form-actions[hidden],
.event-wizard-navigation [hidden] {
    display: none !important;
}
.event-wizard-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin: 1.25rem 0;
}
.event-wizard-progress span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: .65rem;
    background: var(--color-surface-muted, var(--color-surface-muted));
    color: var(--color-text-secondary);
    font-size: .85rem;
    font-weight: 650;
}
.event-wizard-progress span[aria-current="step"] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    box-shadow: inset 0 -3px 0 var(--color-primary);
}
.event-wizard-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1.25rem 0;
}
.event-wizard-navigation button { min-height: 44px; }
.event-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 640px) {
    .event-wizard-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-wizard-progress span { font-size: .78rem; }
    .event-wizard-navigation button { flex: 1 1 0; }
    .event-form-actions { align-items: stretch; flex-direction: column; }
    .event-form-actions .button { width: 100%; justify-content: center; }
}

/* Statut des événements : badges réservés aux personnes habilitées à gérer l'agenda. */
.event-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: .35rem 0 .6rem;
    padding: .25rem .65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
}
.event-status-badge--draft { color: var(--color-status-purple); background: var(--color-status-purple-bg); border-color: var(--color-status-purple-border); }
.event-status-badge--pending { color: var(--color-warning-text); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.event-status-badge--published { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.event-status-badge--rejected { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error-border); }
.event-status-badge--cancelled { color: var(--color-text-secondary); background: var(--color-surface-muted); border-color: var(--color-border); }


/* Actions indisponibles : apparence grisée et absence d'interaction. */
.button:disabled, button.button:disabled, .button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
    box-shadow: none;
}


/* Centre de notifications — filtres, pagination et actions tactiles */
.notifications-filters {
    display: flex;
    gap: 8px;
    margin: 0 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.notifications-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.notifications-filter.is-active {
    color: var(--color-primary-dark);
    font-weight: 700;
    border-bottom-color: var(--color-primary);
}
.notifications-filter__count {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary-light);
    font-size: var(--font-size-xs);
}
.notifications-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}
.notifications-pagination__info {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.notifications-pagination .is-disabled {
    opacity: .5;
    cursor: not-allowed;
}
.notifications-swipe-help {
    margin: var(--space-3) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}
.notification-row__actions {
    max-width: 45%;
}
.notification-state-form {
    margin: 0;
}
.notification-state-button {
    white-space: normal !important;
}
@media (max-width: 600px) {
    .notifications-pagination {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .notifications-pagination__info {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }
    .notifications-pagination .app-btn {
        width: 100%;
    }
    .notification-row__actions {
        max-width: 42%;
    }
    .notification-state-button {
        font-size: 11px !important;
        padding: 5px 7px !important;
    }
}

/* Notifications: filtre segmenté et retour visuel pendant le swipe */
.notifications-filters{display:inline-flex;align-items:stretch;gap:3px;padding:4px;margin:0 0 var(--space-4);border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg-secondary)}
.notifications-filter{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 18px;border:0;border-radius:999px;color:var(--color-text-secondary);font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.notifications-filter.is-active{background:var(--color-surface);color:var(--color-primary-dark);box-shadow:0 1px 4px color-mix(in srgb, var(--color-shadow) 16%, transparent)}
.notifications-filter__count{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;padding:0 6px;border-radius:999px;background:var(--color-primary-light);color:var(--color-primary-dark);font-size:var(--font-size-xs)}
.notification-row{position:relative;touch-action:pan-y;will-change:transform}
.notification-row[data-swiping="true"]{z-index:1;background:var(--color-bg-secondary);box-shadow:0 2px 8px color-mix(in srgb, var(--color-shadow) 12%, transparent)}
@media(max-width:600px){.notifications-filters{display:flex;width:100%}.notifications-filter{flex:1 1 50%;padding-inline:10px}}

/* Fil d’Ariane : séparateur uniforme entre chaque niveau */
.app-breadcrumb-item + .app-breadcrumb-item::before {
    content: "/";
    display: inline-block;
    margin: 0 8px;
    color: var(--color-text-secondary);
    font-weight: 400;
}
.app-breadcrumb-item + .app-breadcrumb-item {
    gap: 0;
}
/* Filtres notifications : vrais boutons du système de design */
.notifications-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.notifications-filters .app-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.notifications-filters .app-btn[aria-current="page"] {
    box-shadow: 0 0 0 2px var(--color-primary-light);
}
.notifications-filter__count {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 24%, transparent);
    font-size: var(--font-size-xs);
}
.notifications-filters .app-btn-secondary .notifications-filter__count {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}
.notification-row {
    cursor: grab;
}
.notification-row[data-swiping="true"] {
    cursor: grabbing;
}
@media (max-width: 600px) {
    .notifications-filters { display: flex; width: 100%; }
    .notifications-filters .app-btn { flex: 1 1 0; }
}

/* Le badge doit respecter l'attribut hidden malgré le display des badges génériques. */
.notification-unread-badge[hidden] { display: none !important; }


/* Gestion des membres : garantir un contraste lisible sur les actions primaires. */
.members-toolbar .app-btn-primary,
.members-section .app-btn-primary,
.members-table a.app-btn-primary,
.members-pending-requests .app-btn-primary {
    color: var(--color-surface);
}
.members-toolbar .app-btn-primary:hover,
.members-section .app-btn-primary:hover,
.members-table a.app-btn-primary:hover,
.members-pending-requests .app-btn-primary:hover {
    color: var(--color-surface);
}
.member-card__actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.member-card__actions form { margin:0; }
@media (max-width: 640px) {
    .member-card__actions { grid-column:1 / -1; }
}


/* Contraste du bouton principal sur la fiche association (mobile et desktop). */
.bloc a.app-btn.app-btn-primary,
.bloc a.app-btn.app-btn-primary:visited,
.bloc a.app-btn.app-btn-primary:hover,
.bloc a.app-btn.app-btn-primary:focus,
.bloc a.app-btn.app-btn-primary:active {
    color: var(--color-surface) !important;
}

/* Cartes de validation : équilibrer les informations du membre et le formulaire d'attribution. */
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) {
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.6fr);
    align-items: start;
}
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) .member-card__actions {
    display: block;
    min-width: 0;
}
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) .member-card__actions form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.8fr);
    gap: 12px;
    align-items: end;
}
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) .member-card__actions form > label:first-child,
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) .form-checks {
    grid-column: 1 / -1;
}
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) .form-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.member-card:has(.member-card__actions form[action*="traiter-fiche"]) .member-card__actions textarea {
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 760px) {
    .member-card:has(.member-card__actions form[action*="traiter-fiche"]) {
        grid-template-columns: minmax(0, 1fr);
    }
    .member-card:has(.member-card__actions form[action*="traiter-fiche"]) .member-card__actions form {
        grid-template-columns: minmax(0, 1fr);
    }
    .member-card:has(.member-card__actions form[action*="traiter-fiche"]) .form-checks {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Accordéon exclusif de la gestion des membres */
.members-accordion > summary { display:flex; align-items:center; gap:var(--space-2); cursor:pointer; list-style:none; padding:var(--space-3) 0; }
.members-accordion > summary::-webkit-details-marker { display:none; }
.members-accordion > summary::before { content:"＋"; display:inline-flex; align-items:center; justify-content:center; flex:0 0 1.5rem; width:1.5rem; height:1.5rem; border:1px solid var(--color-border); border-radius:50%; font-size:1rem; }
.members-accordion[open] > summary::before { content:"−"; }
.members-accordion > summary h2 { margin:0; }
.members-accordion__content { padding-bottom:var(--space-3); }

/* Gestion des membres : formulaires de validation lisibles sur grand écran et mobile */
.member-card__actions form:has(textarea[name="motif_refus"]) { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; }
.member-card__actions form:has(textarea[name="motif_refus"]) > label:first-child { grid-column:1/-1; grid-row:1; }
.member-card__actions form:has(textarea[name="motif_refus"]) .form-checks { grid-column:1/-1; grid-row:2; }
.member-card__actions form:has(textarea[name="motif_refus"]) > button[value="valider"] { grid-column:1; grid-row:3; align-self:end; }
.member-card__actions form:has(textarea[name="motif_refus"]) > label:has(textarea[name="motif_refus"]) { grid-column:2; grid-row:3; }
.member-card__actions form:has(textarea[name="motif_refus"]) > button[value="refuser"] { grid-column:2; grid-row:4; justify-self:end; }
@media (max-width:760px) {
  .member-card__actions form:has(textarea[name="motif_refus"]) { grid-template-columns:minmax(0,1fr); }
  .member-card__actions form:has(textarea[name="motif_refus"]) > label:first-child,
  .member-card__actions form:has(textarea[name="motif_refus"]) .form-checks,
  .member-card__actions form:has(textarea[name="motif_refus"]) > button[value="valider"],
  .member-card__actions form:has(textarea[name="motif_refus"]) > label:has(textarea[name="motif_refus"]),
  .member-card__actions form:has(textarea[name="motif_refus"]) > button[value="refuser"] { grid-column:1; grid-row:auto; justify-self:stretch; }
}

/* Relecture de fiche : informations en haut, deux décisions clairement séparées en bas. */
.member-card__actions form:has(.member-review-choice) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
}
.member-card__actions form:has(.member-review-choice) > label:first-of-type,
.member-card__actions form:has(.member-review-choice) > .form-checks {
    grid-column: 1 / -1;
}
.member-card__actions form:has(.member-review-choice) > label:first-of-type { grid-row: 1; }
.member-card__actions form:has(.member-review-choice) > .form-checks { grid-row: 2; }
.member-review-choice { min-width:0; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:12px; padding:16px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-bg-secondary); }
.member-review-choice p { margin:0; color:var(--color-text-secondary); line-height:1.5; }
.member-review-choice label { display:flex; flex-direction:column; gap:8px; min-width:0; }
.member-review-choice label span { color:var(--color-text-secondary); font-size:.92em; }
.member-review-choice textarea { width:100%; box-sizing:border-box; min-height:100px; }
.member-review-choice button { align-self:flex-start; max-width:100%; white-space:normal; text-align:center; }
.member-review-choice--approve { grid-column:1; grid-row:3; align-self:start; }
.member-review-choice--correction { grid-column:2; grid-row:3; align-self:start; }
.member-review-choice--correction button { align-self:flex-start; }
@media (max-width:760px) {
 .member-card__actions form:has(.member-review-choice) { grid-template-columns:minmax(0,1fr); }
 .member-card__actions form:has(.member-review-choice) > label:first-of-type,
 .member-card__actions form:has(.member-review-choice) > .form-checks,
 .member-review-choice--approve,.member-review-choice--correction { grid-column:1; grid-row:auto; }
 .member-review-choice--correction button,.member-review-choice--approve button { align-self:stretch; }
}

/* Harmonisation Design System — lot 2 : composants partagés */
.members-join-settings { border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.members-filters input:not([type=checkbox]), .members-filters select,
.member-request-refusal-form textarea, .member-request-report textarea,
.member-card__actions input:not([type=checkbox]), .member-card__actions textarea,
.member-form-card .form-field input, .member-form-card .form-field select, .member-form-card .form-field textarea,
.invite-field input, .invite-field select, .invite-field textarea {
    max-width:100%; box-sizing:border-box; border:1px solid var(--color-border); border-radius:var(--radius-sm);
    background:var(--color-surface); color:var(--color-text); font:inherit;
}
.members-filters input:not([type=checkbox]), .members-filters select,
.member-request-refusal-form textarea, .member-request-report textarea,
.member-card__actions input:not([type=checkbox]), .member-card__actions textarea,
.member-form-card .form-field input, .member-form-card .form-field select, .member-form-card .form-field textarea,
.invite-field input, .invite-field select, .invite-field textarea { width:100%; }
.members-filters input:focus-visible, .members-filters select:focus-visible,
.member-request-refusal-form textarea:focus-visible, .member-request-report textarea:focus-visible,
.member-card__actions input:focus-visible, .member-card__actions textarea:focus-visible,
.member-form-card .form-field input:focus-visible, .member-form-card .form-field select:focus-visible, .member-form-card .form-field textarea:focus-visible,
.invite-field input:focus-visible, .invite-field select:focus-visible, .invite-field textarea:focus-visible,
.members-accordion > summary:focus-visible, .members-pagination__links a:focus-visible {
    outline:2px solid var(--color-primary); outline-offset:2px; border-color:var(--color-primary);
}
.member-form-card { border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); background:var(--color-surface); }
.member-form-card .form-checks, .member-card__actions .form-checks { border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); }
.member-form-card .form-error { color:var(--color-error); font-size:var(--font-size-sm); }
.member-form-card .form-actions .app-btn, .members-table .app-btn, .members-filter-actions .app-btn, .members-add .app-btn { min-height:var(--touch-min-height); }
.member-card__avatar { width:3rem; height:3rem; flex:0 0 3rem; object-fit:cover; border-radius:var(--radius-full); border:1px solid var(--color-border); }
.member-card__status { max-width:100%; overflow-wrap:anywhere; }
.member-review-choice { min-width:0; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.member-review-choice p { margin:0; }
.member-review-choice--approve { background:var(--color-primary-light); }
.member-review-choice--correction { background:var(--color-surface); }
@media (max-width:600px) { .member-card__actions .app-btn { width:100%; justify-content:center; } .member-review-choice { padding:var(--space-2); } }


/* Design System — gestion des signalements */
.signalements-page{display:grid;gap:1rem;max-width:1100px;margin-inline:auto}
.signalements-section{border:1px solid var(--color-border,var(--color-border));border-radius:12px;background:var(--color-surface,var(--color-surface));overflow:hidden}
.signalements-section>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;cursor:pointer;font-weight:700;list-style:none}
.signalements-section>summary::-webkit-details-marker{display:none}
.signalements-section>summary:after{content:"+";font-size:1.2rem}
.signalements-section[open]>summary:after{content:"−"}
.signalements-section>summary:hover{background:var(--color-surface-muted,var(--color-bg))}
.signalements-section__count{font-size:.875rem;font-weight:500;color:var(--color-text-secondary,var(--color-text-secondary));white-space:nowrap}
.signalements-section__body{padding:0 1rem 1rem}
.signalements-list{list-style:none;margin:0;padding:0}
.signalements-list li{padding:.9rem 0;border-top:1px solid var(--color-border,var(--color-border));overflow-wrap:anywhere}
.signalements-list li p{margin:.35rem 0}
.signalements-list li small{color:var(--color-text-secondary,var(--color-text-secondary))}
.signalements-pagination{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;padding-top:1rem}
.signalements-pagination__info{font-size:.9rem}
.signalements-empty{padding:1rem 0;margin:0;color:var(--color-text-secondary,var(--color-text-secondary))}
.signalements-detail dl{display:grid;grid-template-columns:minmax(150px, .35fr) 1fr;gap:.5rem 1rem}
.signalements-detail dt{font-weight:700}
.signalements-detail dd{margin:0;overflow-wrap:anywhere}
@media(max-width:600px){.signalements-section>summary{padding:.85rem}.signalements-section__body{padding:0 .85rem .85rem}.signalements-detail dl{grid-template-columns:1fr;gap:.2rem}.signalements-detail dd{margin-bottom:.65rem}}


/* Design System — parcours rejoindre une organisation */
.page-rejoindre-organisation .join-page { display:grid; gap:var(--space-6); padding-block:var(--space-5) var(--space-8); }
.page-rejoindre-organisation .join-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; }
.page-rejoindre-organisation .join-eyebrow { margin:0 0 var(--space-1); color:var(--color-primary-dark); font-size:var(--font-size-sm); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.page-rejoindre-organisation .join-hero h1 { margin:0 0 var(--space-2); color:var(--color-text); font-size:clamp(1.7rem,4vw,2.25rem); line-height:1.2; }
.page-rejoindre-organisation .join-hero p { max-width:680px; margin:0; color:var(--color-text-secondary); line-height:1.6; }
.page-rejoindre-organisation .join-panel { padding:var(--space-5); gap:var(--space-4); }
.page-rejoindre-organisation .join-panel__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.page-rejoindre-organisation .join-panel__heading h2 { margin:0 0 var(--space-1); font-size:1.2rem; color:var(--color-text); }
.page-rejoindre-organisation .join-panel__heading p { margin:0; color:var(--color-text-secondary); }
.page-rejoindre-organisation .join-search { display:flex; gap:var(--space-2); align-items:center; }
.page-rejoindre-organisation .join-search input { flex:1; min-width:0; width:100%; min-height:var(--touch-min-height); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); font:inherit; }
.page-rejoindre-organisation .join-search input:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.page-rejoindre-organisation .join-results { display:grid; gap:var(--space-3); }
/* Le tableau reste dans son propre conteneur défilant, sans élargir la page. */
.page-rejoindre-organisation .join-table-wrap { display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.page-rejoindre-organisation .join-table { width:100%; min-width:620px; border-collapse:collapse; table-layout:auto; }
.page-rejoindre-organisation .join-table th, .page-rejoindre-organisation .join-table td { padding:var(--space-3); text-align:left; vertical-align:middle; border-bottom:1px solid var(--color-border); }
.page-rejoindre-organisation .join-table th { background:var(--color-bg-secondary); font-size:var(--font-size-sm); white-space:nowrap; }
.page-rejoindre-organisation .join-table tbody tr:last-child td { border-bottom:0; }
.page-rejoindre-organisation .join-table__action { width:1%; white-space:nowrap; }
.page-rejoindre-organisation .join-table__action form { margin:0; }
.page-rejoindre-organisation .join-action-btn { min-height:36px; padding:6px 12px; white-space:nowrap; }
.page-rejoindre-organisation .join-organisation { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.page-rejoindre-organisation .join-organisation__name { margin:0 0 var(--space-1); color:var(--color-text); font-size:1rem; font-weight:700; }
.page-rejoindre-organisation .join-organisation__meta { margin:0; color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.page-rejoindre-organisation .join-empty { padding:var(--space-5); border:1px dashed var(--color-border); border-radius:var(--radius-md); text-align:center; color:var(--color-text-secondary); }
.page-rejoindre-organisation .join-empty p { margin:0; }
.page-rejoindre-organisation .join-status-list { display:grid; gap:var(--space-3); }
.page-rejoindre-organisation .join-status-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:start; padding:var(--space-4) 0; border-top:1px solid var(--color-border); }
.page-rejoindre-organisation .join-status-item:first-child { border-top:0; padding-top:0; }
.page-rejoindre-organisation .join-status-item:last-child { padding-bottom:0; }
.page-rejoindre-organisation .join-status-item h3 { margin:0 0 var(--space-1); color:var(--color-text); font-size:1rem; }
.page-rejoindre-organisation .join-status-item p { margin:var(--space-1) 0 0; color:var(--color-text-secondary); font-size:var(--font-size-sm); line-height:1.5; }
.page-rejoindre-organisation .join-status-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--radius-full); background:var(--color-bg-secondary); color:var(--color-text); font-size:var(--font-size-sm); font-weight:650; }
.page-rejoindre-organisation .join-status-item__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); }
@media(max-width:640px) {
 .page-rejoindre-organisation .join-page { gap:var(--space-4); padding-top:var(--space-3); }
 .page-rejoindre-organisation .join-panel { padding:var(--space-4); }
 .page-rejoindre-organisation .join-search { align-items:stretch; flex-direction:column; }
 .page-rejoindre-organisation .join-search .app-btn { width:100%; }
 .page-rejoindre-organisation .join-table th, .page-rejoindre-organisation .join-table td { padding:var(--space-2); }
 .page-rejoindre-organisation .join-table__action .join-action-btn { white-space:nowrap; }
 .page-rejoindre-organisation .join-status-item { grid-template-columns:1fr; }
 .page-rejoindre-organisation .join-status-item__actions { justify-content:flex-start; }
}

/* Composant commun — languette latérale d'ouverture des filtres.
   Référence visuelle : Annuaire. Les pages gardent leurs classes fonctionnelles et leurs panneaux propres. */
.filter-tab {
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 43%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 14px 9px;
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.filter-tab:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}
.filter-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.filter-tab[aria-expanded="true"] {
    visibility: hidden;
}
.filter-tab .filter-active-dot,
.filter-tab .agenda-filtres-actifs {
    margin: 0;
    color: var(--color-primary);
    font-size: 1rem;
}
@media (max-width: 640px) {
    .filter-tab {
        top: 42%;
        padding: 12px 7px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .filter-tab { transition: none; }
}
/* Harmonisation globale de la hauteur des boutons d'action sur toutes les pages.
   Les onglets, boutons icônes et commandes de navigation restent indépendants. */
.app-btn,
.button,
.invite-button,
.join-action-btn {
    min-height: 36px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Harmonisation des règles historiques spécifiques aux pages. */
.page-annuaire .filter-row .filter-tab,
.agenda-recherche .filter-tab {
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 43%;
    min-height: 44px;
    margin: 0;
    padding: 14px 9px;
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: inherit;
    font-weight: 700;
}
@media (max-width: 640px) {
    .page-annuaire .filter-row .filter-tab,
    .agenda-recherche .filter-tab { top: 42%; padding: 12px 7px; }
}

/* P1.4 — Convergence responsive transversale inspirée de la structure du Forum.
   Ces règles harmonisent les composants communs sans remplacer les styles métier des pages. */
.app-page-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.app-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    margin-bottom: var(--space-3);
}

.app-section-heading > :first-child,
.app-page-header__main {
    min-width: 0;
}

.app-section-heading h1,
.app-section-heading h2,
.app-section-heading h3 {
    margin-top: 0;
}

.app-toolbar > input,
.app-toolbar > select,
.app-toolbar > div {
    min-width: 0;
}

.app-list-row__description {
    overflow-wrap: anywhere;
}

.app-icon-btn[aria-label],
button.app-icon-btn[title],
a.app-icon-btn[title] {
    flex: 0 0 var(--touch-min-height);
}

@media (max-width: 768px) {
    .app-page-stack { gap: var(--space-4); }
    .app-page-header,
    .app-section-heading {
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }
    .app-page-header__actions {
        gap: var(--space-2);
    }
    .app-list-row {
        gap: var(--space-2);
        padding-block: var(--space-3);
    }
    .app-list-row__title { line-height: 1.3; }
    .app-list-row__description {
        font-size: var(--font-size-xs);
        line-height: 1.4;
    }
    .app-toolbar {
        gap: var(--space-2);
        padding: var(--space-3);
    }
    .app-toolbar > input[type="search"] {
        flex: 1 1 12rem;
        width: 100%;
    }
    .app-toolbar > button,
    .app-toolbar > .app-button,
    .app-toolbar > .app-btn {
        min-height: var(--touch-min-height);
    }
    .app-card { min-width: 0; }
}

@media (max-width: 480px) {
    .app-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .app-page-header__actions {
        justify-content: flex-start;
    }
    .app-section-heading {
        flex-wrap: wrap;
        align-items: center;
    }
    .app-section-heading > :first-child { flex: 1 1 12rem; }
    .app-section-heading > .app-badge { flex: 0 0 auto; }
    .app-list-row { align-items: flex-start; }
    .app-list-row__main { overflow-wrap: anywhere; }
    .app-list-row > .app-badge { max-width: 8.5rem; flex: 0 0 auto; white-space: normal; }
    .app-page-stack > .app-card { border-radius: var(--radius-md); }
}


/* P3.1 — Accueil Forum : hiérarchie alignée sur la planche figée, palette globale conservée. */
.forum-home { gap: var(--space-4); }
.forum-page-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.forum-page-heading h1 { margin:0; color:var(--color-primary-dark); font-size:var(--font-size-h1); }
.forum-page-heading p { margin:var(--space-1) 0 0; }
.forum-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); flex-wrap:wrap; }
.forum-theme-toggle[hidden] { display:none !important; }
.forum-home-layout { display:grid; grid-template-columns:minmax(205px, 245px) minmax(0,1fr); gap:var(--space-3); align-items:start; }
.forum-theme-panel { position:sticky; top:var(--space-4); min-width:0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.forum-theme-panel h2 { margin:0 0 var(--space-3); font-size:var(--font-size-h3); color:var(--color-primary-dark); }
.forum-theme-link { display:flex; align-items:center; gap:var(--space-2); min-height:38px; padding:var(--space-2); border-radius:var(--radius-sm); color:var(--color-text); text-decoration:none; }
.forum-theme-link:hover,.forum-theme-link.is-active { background:var(--color-primary-light); color:var(--color-primary-dark); text-decoration:none; }
.forum-theme-link.is-active { box-shadow:inset 3px 0 var(--color-primary); font-weight:700; }
.forum-theme-icon,.forum-row-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:700; }
.forum-theme-name { min-width:0; flex:1 1 auto; font-size:var(--font-size-sm); }
.forum-theme-count { flex:0 0 auto; padding:2px 6px; border-radius:var(--radius-full); background:var(--color-bg-secondary); color:var(--color-text-secondary); font-size:var(--font-size-xs); }
.forum-home-main { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.forum-section { padding:var(--space-4); }
.forum-section-pinned { background:var(--color-warning-bg); border-color:var(--color-warning-border); }
.forum-section-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.forum-section-heading h2 { display:flex; align-items:center; gap:var(--space-2); min-width:0; margin:0; color:var(--color-primary-dark); font-size:var(--font-size-h3); }
.forum-section-heading > a { flex:0 0 auto; font-size:var(--font-size-sm); }
.forum-pinned-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }
.forum-pinned-card { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); text-decoration:none; }
.forum-pinned-card:hover { border-color:var(--color-primary); text-decoration:none; }
.forum-category-chip { display:inline-flex; align-items:center; align-self:flex-start; gap:var(--space-2); max-width:100%; padding:3px 8px; border-radius:var(--radius-full); background:var(--color-primary-light); color:var(--color-primary-dark); font-size:var(--font-size-xs); font-weight:700; }
.forum-pinned-title { color:var(--color-primary-dark); font-weight:700; line-height:1.35; }
.forum-card-description { color:var(--color-text-secondary); font-size:var(--font-size-xs); line-height:1.4; }
.forum-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:auto; color:var(--color-text-secondary); font-size:var(--font-size-xs); }
.forum-discussion-list { display:flex; flex-direction:column; min-width:0; }
.forum-discussion-row { display:grid; grid-template-columns:32px minmax(105px,145px) minmax(0,1fr) auto auto auto; align-items:center; gap:var(--space-2); min-width:0; padding:var(--space-2) 0; border-bottom:1px solid var(--color-border); color:var(--color-text); text-decoration:none; }
.forum-discussion-row:last-child { border-bottom:0; }
.forum-discussion-row:hover { background:var(--color-primary-subtle); text-decoration:none; }
.forum-row-theme { overflow-wrap:anywhere; color:var(--color-text-secondary); font-size:var(--font-size-xs); }
.forum-row-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.forum-row-main strong { overflow:hidden; color:var(--color-primary-dark); font-size:var(--font-size-sm); line-height:1.35; text-overflow:ellipsis; }
.forum-row-main small { overflow:hidden; color:var(--color-text-secondary); font-size:var(--font-size-xs); text-overflow:ellipsis; white-space:nowrap; }
.forum-row-metric { color:var(--color-text-secondary); font-size:var(--font-size-xs); white-space:nowrap; }
.forum-row-status { justify-self:end; }
.forum-sort-label { color:var(--color-text-secondary); font-size:var(--font-size-xs); }
@media (max-width: 1000px) {
  .forum-home-layout { grid-template-columns:minmax(185px,215px) minmax(0,1fr); }
  .forum-pinned-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .forum-discussion-row { grid-template-columns:30px minmax(0,1fr) auto auto; }
  .forum-row-theme { grid-column:2; grid-row:1; }
  .forum-row-main { grid-column:2; grid-row:2; }
  .forum-row-metric { grid-row:2; }
  .forum-row-status { grid-column:4; grid-row:1; }
}
@media (max-width: 768px) {
  .forum-page-heading { align-items:stretch; flex-direction:column; }
  .forum-heading-actions { display:grid; grid-template-columns:auto auto minmax(0,1fr); justify-content:stretch; }
  .forum-heading-actions > a { justify-content:center; min-width:0; }
  .forum-home-layout { display:flex; flex-direction:column; }
  .forum-theme-panel { position:static; width:100%; }
  .forum-theme-panel[hidden] { display:none; }
  .forum-home-main { width:100%; }
  .forum-section { padding:var(--space-3); }
  .forum-section-heading { align-items:flex-start; }
  .forum-section-heading h2 { font-size:18px; }
  .forum-section-heading > a { font-size:var(--font-size-xs); text-align:right; }
  .forum-pinned-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--space-1); }
  .forum-pinned-card { flex:0 0 min(84%,320px); scroll-snap-align:start; }
  .forum-discussion-row { grid-template-columns:32px minmax(0,1fr) auto; gap:var(--space-2); padding:var(--space-3) 0; }
  .forum-row-theme { grid-column:2; grid-row:1; }
  .forum-row-main { grid-column:2; grid-row:2; }
  .forum-row-metric { grid-column:3; grid-row:2; }
  .forum-row-status { grid-column:3; grid-row:1; }
  .forum-row-metric:nth-last-of-type(2) { display:none; }
}
@media (max-width: 480px) {
  .forum-heading-actions { grid-template-columns:auto auto; }
  .forum-heading-actions .app-button-primary { grid-column:1/-1; }
  .forum-heading-actions > a { min-height:var(--touch-min-height); }
  .forum-section-heading { flex-wrap:wrap; }
  .forum-section-heading > a { margin-left:auto; }
  .forum-pinned-card { flex-basis:88%; }
  .forum-row-icon { width:30px; height:30px; flex-basis:30px; }
  .forum-row-status .app-badge { min-height:24px; padding-inline:5px; }
}


/* P3.1 — Liste de discussions par thème : densité, hiérarchie et responsive. */
.forum-theme-intro { padding:var(--space-5); }
.forum-theme-intro h1 { display:flex; align-items:center; gap:var(--space-3); margin:0; color:var(--color-primary-dark); }
.forum-title-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border-radius:var(--radius-md); background:var(--color-primary-light); color:var(--color-primary); font-size:22px; }
.forum-create-discussion { display:grid; grid-template-columns:minmax(180px,auto) minmax(0,1fr) auto; align-items:center; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--color-border); }
.forum-create-discussion label { font-weight:700; color:var(--color-primary-dark); }
.forum-create-discussion input { width:100%; min-width:0; }
.forum-theme-list { padding:var(--space-5); }
.forum-theme-discussion-row { gap:var(--space-3); }
.forum-theme-discussion-row .app-list-row__title { display:flex; align-items:center; gap:var(--space-2); }
.forum-status-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; border-radius:var(--radius-sm); background:var(--color-primary-light); color:var(--color-primary); font-size:14px; }
.forum-theme-discussion-row .app-list-row__description { font-size:var(--font-size-xs); }
@media (max-width:768px) {
 .forum-theme-intro,.forum-theme-list { padding:var(--space-3); }
 .forum-create-discussion { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
 .forum-create-discussion label { margin-bottom:0; }
 .forum-create-discussion button { min-height:var(--touch-min-height); }
 .forum-theme-discussion-row { align-items:flex-start; }
 .forum-theme-discussion-row .app-badge { align-self:center; }
}


/* P3.1 — Détail d'une discussion : fil lisible et actions regroupées. */
.forum-discussion-header { padding:var(--space-5); }
.forum-discussion-header h1 { margin:0 0 var(--space-2); color:var(--color-primary-dark); overflow-wrap:anywhere; }
.forum-theme-kicker { margin:0 0 var(--space-2); color:var(--color-primary); font-size:var(--font-size-sm); font-weight:700; }
.forum-post-card { padding:var(--space-4); gap:var(--space-3); }
.forum-post-card .app-section-heading { align-items:center; padding-bottom:var(--space-3); border-bottom:1px solid var(--color-border); margin-bottom:0; }
.forum-post-card .app-toolbar { margin:0; align-items:center; }
.forum-post-content { color:var(--color-text); line-height:1.7; overflow-wrap:anywhere; }
.forum-post-content a { overflow-wrap:anywhere; }
.forum-post-card img,.forum-post-card iframe { max-width:100%; }
.forum-post-card form { min-width:0; }
.forum-reply-card,.forum-management-card { padding:var(--space-5); gap:var(--space-3); }
.forum-reply-card h2,.forum-management-card h2 { margin:0; color:var(--color-primary-dark); }
.forum-reply-card textarea { width:100%; min-height:140px; }
.forum-discussion-page > .app-card > .app-pagination { margin-top:var(--space-4); }
@media (max-width:768px) {
 .forum-discussion-header,.forum-post-card,.forum-reply-card,.forum-management-card { padding:var(--space-3); }
 .forum-discussion-header .app-section-heading { flex-direction:column; }
 .forum-discussion-header .app-section-heading > div:last-child { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; }
 .forum-post-card .app-toolbar { flex-wrap:wrap; }
 .forum-post-card .app-toolbar form { flex:1 1 auto; }
 .forum-post-card .app-toolbar form button { min-height:var(--touch-min-height); }
}


/* P3.1 — Repérage rapide : filtre des thèmes et recherche globale immédiatement visibles. */
.forum-theme-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-3); }
.forum-theme-panel-heading h2 { margin:0; }
.forum-theme-total { display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:26px; padding:0 7px; border-radius:var(--radius-full); background:var(--color-primary-light); color:var(--color-primary-dark); font-size:var(--font-size-xs); font-weight:700; }
.forum-theme-filter-wrap { display:flex; align-items:center; gap:var(--space-2); min-width:0; margin-bottom:var(--space-3); padding:0 var(--space-2); border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text-secondary); }
.forum-theme-filter-wrap:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-ring); }
.forum-theme-filter-wrap input { width:100%; min-width:0; min-height:40px; padding:var(--space-2) 0; border:0; outline:0; background:transparent; color:var(--color-text); font:inherit; font-size:var(--font-size-sm); box-shadow:none; }
.forum-theme-filter-wrap input:focus { box-shadow:none; }
.forum-theme-filter-wrap button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 32px; border:0; border-radius:var(--radius-sm); background:var(--color-bg-secondary); color:var(--color-text); cursor:pointer; }
.forum-theme-filter-wrap button[hidden] { display:none; }
.forum-theme-link[hidden] { display:none !important; }
.forum-theme-filter-empty { margin:var(--space-3) 0 0; padding:var(--space-3); border-radius:var(--radius-sm); background:var(--color-bg-secondary); color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.forum-sr-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.forum-quick-search { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.forum-quick-search:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-ring); }
.forum-quick-search-icon { flex:0 0 auto; color:var(--color-primary); font-size:24px; line-height:1; }
.forum-quick-search input { flex:1 1 auto; width:100%; min-width:0; min-height:44px; border:0; outline:0; box-shadow:none; background:transparent; color:var(--color-text); font:inherit; }
.forum-quick-search input:focus { box-shadow:none; }
.forum-quick-search button { flex:0 0 auto; min-height:44px; }
@media (max-width:768px) {
 .forum-theme-panel-heading { margin-bottom:var(--space-2); }
 .forum-theme-filter-wrap { margin-bottom:var(--space-2); }
 .forum-theme-filter-wrap input { min-height:44px; }
 .forum-quick-search { gap:var(--space-2); padding:var(--space-2); }
 .forum-quick-search input { font-size:var(--font-size-sm); }
 .forum-quick-search button { padding-inline:var(--space-3); }
}
@media (max-width:420px) {
 .forum-quick-search { flex-wrap:wrap; }
 .forum-quick-search input { flex:1 1 calc(100% - 45px); }
 .forum-quick-search button { width:100%; }
}