/* ==========================================================================
   Espace membre OPDV : inscription, connexion, tableau de bord, profil, photos, compte.
   Chargé uniquement sur ces pages ('styles' dans site/config/routes.php).
   Règles REMARQUES.md : pas de liseré autour des cartes, états par le fond ou l'ombre, pas de pastille.
   ========================================================================== */

.field__help { margin: 0; color: var(--c-muted); font-size: var(--fs-xs); }
.notice > svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.notice a { color: inherit; font-weight: 600; }
.field--wide { grid-column: 1 / -1; }

/* ---------- Cartes et panneaux ---------- */
.member-card,
.member-panel {
  background: var(--c-paper);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.member-card h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin-bottom: var(--sp-2); }
.member-card-intro,
.member-panel-intro { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.member-card .field input:not([type="checkbox"]):not([type="radio"]),
.member-panel .field input:not([type="checkbox"]):not([type="radio"]),
.member-panel .field textarea,
.member-panel .field select { background: var(--c-white); box-shadow: none; }
.member-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.member-panel-head h2 { font-size: var(--fs-h3); margin: 0; }
.member-panel-head small { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); margin-left: var(--sp-2); }
.member-panel--danger { background: #FBF1EC; }
.member-panel--danger h2 { color: #8A2B08; }

.btn--danger { --btn-bg: #A3360B; --chip-bg: rgba(255, 255, 255, 0.16); --chip-fg-hover: #A3360B; }

/* ---------- Inscription ---------- */
.member-signup { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.member-signup-aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.member-signup-aside h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.member-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: mstep; }
.member-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--sp-4); counter-increment: mstep; }
.member-steps li::before {
  content: counter(mstep, decimal-leading-zero); grid-row: span 2;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-tint); color: var(--c-brand-strong); font: 700 0.95rem/1 var(--f-display);
}
.member-steps strong { color: var(--c-ink); font-family: var(--f-display); }
.member-steps span { color: var(--c-text); font-size: var(--fs-sm); }
.member-welcome .member-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.member-welcome .member-steps li { align-content: start; }
.member-welcome .member-steps a { color: inherit; text-decoration: none; }
.member-welcome .member-steps a:hover { color: var(--c-brand-strong); text-decoration: underline; }
.member-welcome-done { margin-top: var(--sp-6); }
.member-signup-help { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); background: var(--c-tint); font-size: var(--fs-sm); }
.member-signup-help svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--c-brand-strong); }

/* Choix du profil : cartes radio */
.profile-types { border: 0; margin: 0; padding: 0; min-width: 0; }
.profile-types legend { font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-3); padding: 0; }
.profile-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--sp-3); }
.profile-types-grid--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: var(--sp-5); }
.profile-type { position: relative; cursor: pointer; }
.profile-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.profile-type-box {
  display: grid; gap: var(--sp-1); height: 100%;
  padding: var(--sp-4); border-radius: var(--radius-sm);
  background: var(--c-white); box-shadow: var(--shadow-sm);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.profile-type-box svg { width: 26px; height: 26px; color: var(--c-brand-strong); margin-bottom: var(--sp-1); }
.profile-type-box strong { color: var(--c-ink); font-family: var(--f-display); font-size: 0.98rem; }
.profile-type-box small { color: var(--c-muted); font-size: var(--fs-xs); line-height: 1.4; }
.profile-type:hover .profile-type-box { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.profile-type input:checked + .profile-type-box { background: var(--c-brand-strong); box-shadow: var(--shadow-md); }
.profile-type input:checked + .profile-type-box svg,
.profile-type input:checked + .profile-type-box strong { color: var(--c-white); }
.profile-type input:checked + .profile-type-box small { color: rgba(255, 255, 255, 0.82); }
.profile-type input:focus-visible + .profile-type-box { box-shadow: 0 0 0 4px rgba(39, 156, 176, .35), var(--shadow-md); }
.profile-types[aria-invalid="true"] .profile-type-box { background: #FDF0EC; }

/* ---------- Connexion, mot de passe ---------- */
.member-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; max-width: 1080px; }
.member-auth--single { grid-template-columns: minmax(0, 560px); justify-content: center; max-width: none; }
.member-auth-aside {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-md);
  background: var(--c-ink); color: var(--c-on-dark-muted);
}
.member-auth-aside h2 { color: var(--c-white); font-size: var(--fs-h3); }
.member-auth-aside .btn { margin-top: var(--sp-3); }
.member-auth-note { display: flex; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding-top: var(--sp-5); font-size: var(--fs-sm); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.12); }
.member-auth-note svg { width: 20px; height: 20px; flex: none; color: var(--c-brand); margin-top: 2px; }

/* ---------- Mise en page de l'espace membre ---------- */
.member-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.member-main { display: grid; gap: var(--sp-6); min-width: 0; }
.member-main > .notice { margin-top: 0; }

.member-nav { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-4); }
.member-nav-who { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.member-nav-who strong { display: block; color: var(--c-ink); font-family: var(--f-display); line-height: 1.25; }
.member-nav-who small { color: var(--c-muted); font-size: var(--fs-xs); }
.member-nav-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--c-brand-strong); color: var(--c-white); font: 700 1rem/1 var(--f-display); }
.member-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.member-nav a,
.member-nav-logout {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 0.7rem var(--sp-4); border-radius: 12px;
  color: var(--c-text); font: 500 0.98rem/1.2 var(--f-body); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.member-nav svg { width: 20px; height: 20px; flex: none; }
.member-nav a:hover, .member-nav-logout:hover { background: var(--c-paper); color: var(--c-ink); }
.member-nav a[aria-current="page"] { background: var(--c-tint); color: var(--c-brand-deep); font-weight: 600; }
.member-nav-logout { color: var(--c-muted); }

/* Bandeaux d'état */
.member-alert { display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius-md); }
.member-alert > svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.member-alert strong { display: block; color: var(--c-ink); font-family: var(--f-display); margin-bottom: var(--sp-1); }
.member-alert p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.member-alert p:last-child { margin-bottom: 0; }
.member-alert--wait { background: var(--c-tint); }
.member-alert--wait > svg { color: var(--c-brand-strong); }
.member-alert--renew { background: #FDF0EC; }
.member-alert--renew > svg { color: var(--c-sun); }

/* Complétion */
.member-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.member-progress-head h2 { font-size: var(--fs-h3); margin: 0; }
.member-meter { height: 12px; margin: var(--sp-4) 0 var(--sp-3); border-radius: 6px; background: var(--c-white); overflow: hidden; }
.member-meter span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-strong)); transition: width .6s var(--ease); }
.member-progress-missing { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* Raccourcis */
.member-shortcuts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.member-shortcuts a {
  display: grid; gap: var(--sp-1); height: 100%; padding: var(--sp-5); border-radius: var(--radius-md);
  background: var(--c-white); box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.member-shortcuts a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.member-shortcut-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--sp-2); border-radius: 12px; background: var(--c-tint); color: var(--c-brand-strong); }
.member-shortcut-icon svg { width: 22px; height: 22px; }
.member-shortcuts strong { color: var(--c-ink); font-family: var(--f-display); }
.member-shortcuts small { color: var(--c-muted); font-size: var(--fs-sm); }
.member-help { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); }
.member-help svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--c-brand-strong); }
.member-help p { margin: 0; font-size: var(--fs-sm); }

/* ---------- Formulaires (profil, compte) ---------- */
.member-form { display: grid; gap: var(--sp-6); }
.member-panel.member-form { gap: 0; }
.member-form-type { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.member-form-type strong { color: var(--c-ink); }
.member-fieldset { border: 0; margin: 0; min-width: 0; }
.member-fieldset > legend { float: left; width: 100%; margin-bottom: var(--sp-5); padding: 0; font: 700 var(--fs-h3)/var(--lh-snug) var(--f-display); color: var(--c-ink); }
.member-fieldset > legend + * { clear: both; }
.member-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.member-fields .field textarea { min-height: 140px; }
.member-unit { position: relative; }
.member-unit input { padding-right: 3.5rem !important; }
.member-unit span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: var(--fs-sm); pointer-events: none; }

.member-checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.member-checks legend { font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-3); padding: 0; }
.member-checks-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-check { position: relative; cursor: pointer; }
.member-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.member-check span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.45rem 0.9rem; border-radius: 10px;
  background: var(--c-white); color: var(--c-text); font-size: var(--fs-sm); box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.member-check:hover span { background: var(--c-tint); }
.member-check input:checked + span { background: var(--c-brand-strong); color: var(--c-white); font-weight: 600; }
.member-check input:focus-visible + span { box-shadow: 0 0 0 4px rgba(39, 156, 176, .35); }

.member-savebar { display: flex; justify-content: flex-end; margin-top: var(--sp-5); }
.member-form:not(.member-panel) > .member-savebar {
  position: sticky; bottom: var(--sp-4); z-index: 5; margin-top: 0;
  padding: var(--sp-3); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- Photos et CV ---------- */
.member-photos { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.member-photo { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-sm); aspect-ratio: 3 / 4; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.member-photo a:hover img { transform: scale(1.04); }
.member-photo.is-main { box-shadow: 0 0 0 4px var(--c-brand), var(--shadow-md); }
.member-photo-badge {
  position: absolute; left: var(--sp-2); top: var(--sp-2); display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px; background: var(--c-brand-strong); color: var(--c-white); font-size: var(--fs-xs); font-weight: 600;
}
.member-photo-badge svg { width: 14px; height: 14px; }
.member-photo-actions { position: absolute; right: var(--sp-2); bottom: var(--sp-2); display: flex; gap: var(--sp-1); }
.member-photo-actions form { margin: 0; }
.member-icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--c-ink); box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.member-icon-btn svg { width: 18px; height: 18px; }
.member-icon-btn:hover { background: var(--c-brand-strong); color: var(--c-white); transform: scale(1.06); }
.member-icon-btn--danger:hover { background: #A3360B; }
.member-empty { color: var(--c-muted); margin: 0 0 var(--sp-5); }

.member-upload { display: flex; gap: var(--sp-4); align-items: stretch; flex-wrap: wrap; }
.member-upload .btn { align-self: center; }
.member-upload-zone {
  position: relative; flex: 1 1 280px; display: grid; justify-items: start; gap: 2px;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 4.25rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--c-white); box-shadow: var(--shadow-sm);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.member-upload-zone > svg { position: absolute; left: var(--sp-5); top: 50%; transform: translateY(-50%); width: 28px; height: 28px; color: var(--c-brand-strong); }
.member-upload-zone strong { color: var(--c-ink); overflow-wrap: anywhere; }
.member-upload-zone small { color: var(--c-muted); font-size: var(--fs-xs); }
.member-upload-zone:hover, .member-upload-zone.has-files { background: var(--c-tint); }
.member-upload-zone:focus-within { box-shadow: 0 0 0 4px rgba(39, 156, 176, .35); }
.member-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.member-file { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); }
.member-file form { margin: 0; }
.member-file-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--c-tint); color: var(--c-brand-strong); }
.member-file-icon svg { width: 22px; height: 22px; }
.member-file-name { flex: 1; min-width: 0; display: grid; }
.member-file-name strong { color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-file-name small { color: var(--c-muted); font-size: var(--fs-xs); }

/* ---------- Compte ---------- */
.member-tag { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: var(--fs-xs); font-weight: 600; background: var(--c-white); color: var(--c-text); }
.member-tag--active { background: var(--c-tint); color: var(--c-brand-deep); }
.member-tag--pending { background: #FFF4DB; color: #7A4B00; }
.member-tag--expired, .member-tag--suspended { background: #FDF0EC; color: #8A2B08; }
.member-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.member-facts div { padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); }
.member-facts dt { color: var(--c-muted); font-size: var(--fs-xs); }
.member-facts dd { margin: 2px 0 0; color: var(--c-ink); font-weight: 600; }
.member-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.member-table caption { text-align: left; font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-2); }
.member-table th { text-align: left; color: var(--c-muted); font-weight: 500; padding: var(--sp-2) var(--sp-3); }
.member-table td { padding: var(--sp-3); background: var(--c-white); }
.member-table tr td:first-child { border-radius: 8px 0 0 8px; }
.member-table tr td:last-child { border-radius: 0 8px 8px 0; }
.member-table tbody tr + tr td { box-shadow: inset 0 4px 0 var(--c-paper); }
.member-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .member-signup, .member-auth, .member-layout { grid-template-columns: minmax(0, 1fr); }
  .member-signup-aside, .member-nav { position: static; }
  .member-nav ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: var(--sp-1); }
  .member-nav { gap: var(--sp-2); }
  .member-nav-logout { width: auto; padding-left: 0; }
  .member-shortcuts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .member-fields, .member-facts { grid-template-columns: minmax(0, 1fr); }
  .member-upload .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-type-box, .member-shortcuts a, .member-photo img, .member-meter span { transition: none; }
}

/* Afficher / masquer le mot de passe */
.member-password { position: relative; }
.member-password input { width: 100%; padding-right: 6.5rem !important; }
.member-password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--c-tint); color: var(--c-brand-deep); font: 600 var(--fs-xs)/1 var(--f-body);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.member-password-toggle:hover { background: var(--c-brand-strong); color: var(--c-white); }
.member-password-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(39, 156, 176, .35); }

/* ---------- Fiche profil (« Voir mon profil », annuaire) ---------- */
.member-profile { display: grid; gap: var(--sp-6); }
.member-profile-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.member-profile-photo { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-md); }
.member-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-profile-photo--empty { display: grid; place-items: center; color: var(--c-brand-strong); background: var(--c-tint); font: 700 2.5rem/1 var(--f-display); }
.member-profile-type { margin: 0 0 var(--sp-1); color: var(--c-brand-strong); font-weight: 600; font-size: var(--fs-sm); }
.member-profile-id h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); }
.member-profile-headline { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); color: var(--c-ink); }
.member-profile-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-profile-links a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0.45rem 0.85rem; border-radius: 10px;
  background: var(--c-white); color: var(--c-ink); font-size: var(--fs-sm); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.member-profile-links a:hover { background: var(--c-brand-strong); color: var(--c-white); }
.member-profile-links svg { width: 18px; height: 18px; flex: none; }
.member-profile-bio { padding: var(--sp-5); border-radius: var(--radius-sm); background: var(--c-white); line-height: var(--lh-body); }
.member-profile-section h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-4); }
.member-profile-section dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin: 0; }
.member-profile-section dl div { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); }
.member-profile-section dl .is-wide { grid-column: 1 / -1; }
.member-profile-section dt { color: var(--c-muted); font-size: var(--fs-xs); }
.member-profile-section dd { margin: 2px 0 0; color: var(--c-ink); font-weight: 600; overflow-wrap: anywhere; }
.member-profile-section dl .is-wide dd { font-weight: 400; }
.member-photos--view { margin: 0; }

/* ---------- Annuaire ---------- */
.member-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-4); align-items: end; }
.member-filters .field input, .member-filters .field select { background: var(--c-white); box-shadow: none; }
.member-directory-count { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.member-directory-note { display: flex; gap: var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--c-tint); font-size: var(--fs-sm); }
.member-directory-note svg { width: 20px; height: 20px; flex: none; color: var(--c-brand-strong); }
.member-directory { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-5); }
.member-directory a {
  display: grid; height: 100%; border-radius: var(--radius-md); overflow: hidden; text-decoration: none;
  background: var(--c-white); box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.member-directory a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.member-directory img, .member-directory-initials { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.member-directory-initials { display: grid; place-items: center; background: var(--c-tint); color: var(--c-brand-strong); font: 700 2rem/1 var(--f-display); }
.member-directory-text { display: grid; gap: 2px; padding: var(--sp-4); }
.member-directory-text strong { color: var(--c-ink); font-family: var(--f-display); }
.member-directory-text small { color: var(--c-brand-strong); font-weight: 600; font-size: var(--fs-xs); }
.member-directory-text span { color: var(--c-text); font-size: var(--fs-sm); line-height: 1.4; }

/* ---------- Documents, historique ---------- */
.member-docs { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.member-docs li { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); flex-wrap: wrap; }
.member-docs .btn { margin-left: auto; }
.member-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.member-history li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); font-size: var(--fs-sm); }
.member-history time { color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* ---------- Interrupteurs du profil (section Annuaire) ---------- */
.member-toggle { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); }
.member-toggle .field__help { grid-column: 2; }

@media (max-width: 980px) {
  .member-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .member-profile-head, .member-filters { grid-template-columns: minmax(0, 1fr); }
  .member-profile-photo { max-width: 240px; }
  .member-history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .member-docs .btn { margin-left: 0; width: 100%; }
}

/* Envoi des photos / du CV : bouton à côté de la zone, actif seulement quand un fichier attend */
.member-upload [data-upload-submit]:disabled { opacity: .45; cursor: not-allowed; }
.member-upload [data-upload-submit].is-ready { box-shadow: 0 0 0 4px rgba(39, 156, 176, .3), var(--shadow-md); }
.member-upload-status { flex-basis: 100%; margin: 0; color: var(--c-brand-deep); font-size: var(--fs-sm); font-weight: 600; }
.member-upload-status:empty { display: none; }

/* ---------- Page publique d'un membre Accompagné (/membres/{identifiant}) ---------- */
.member-page-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.member-page-grid:not(:has(.member-page-photo)) { grid-template-columns: minmax(0, 52rem); }
.member-page-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.member-page-photo img { display: block; width: 100%; height: auto; }
.member-page-text { font-size: var(--fs-lg); line-height: var(--lh-body); }
.member-page-text p { margin: 0 0 var(--sp-4); }
.member-page-text ul { margin: 0 0 var(--sp-4); padding-left: 1.2rem; }
.member-page-highlights { margin: var(--sp-5) 0; padding: var(--sp-5); border-radius: var(--radius-md); background: var(--c-paper); }
.member-page-highlights h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.member-page-highlights ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.member-page-highlights li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.member-page-highlights svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--c-brand-strong); }
.member-page-links { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-page-links a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0.5rem 0.95rem; border-radius: 12px;
  background: var(--c-paper); color: var(--c-ink); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.member-page-links a:hover { background: var(--c-brand-strong); color: var(--c-white); }
.member-page-links svg { width: 18px; height: 18px; }
.member-page-video { max-width: 960px; }
.member-page-video h2 { margin-bottom: var(--sp-5); }

/* Réussir dans le cinéma (Christophe Weigert) */
.cinema-visual { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.cinema-visual img { display: block; width: 100%; height: auto; }
.cinema-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: var(--sp-5); }
.cinema-videos figure { margin: 0; }
.cinema-videos .embed { margin: 0; }
.cinema-videos figcaption { margin-top: var(--sp-3); font-family: var(--f-display); font-weight: 700; color: var(--c-ink); }
@media (max-width: 900px) { .cinema-videos { grid-template-columns: minmax(0, 1fr); } }

/* « Ma page » (espace membre) */
.member-field-label { font-weight: 600; color: var(--c-ink); }
.member-page-current { display: flex; align-items: center; gap: var(--sp-4); }
.member-page-current img { width: 160px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); }
.member-savebar { flex-wrap: wrap; gap: var(--sp-3); }
.member-savebar .member-savebar-first { order: -1; }
@media (max-width: 900px) { .member-page-grid { grid-template-columns: minmax(0, 1fr); } .member-page-photo { max-width: 360px; } }

/* ---------- Accompagnement : heures ---------- */
.hours-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.hours-summary div { padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--c-white); }
.hours-summary dt { color: var(--c-muted); font-size: var(--fs-xs); }
.hours-summary dd { margin: var(--sp-1) 0 0; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.hours-summary div:first-child dd { color: var(--c-brand-strong); }
.hours-facts { margin: var(--sp-5) 0 0; }
.member-panel .member-alert { margin-top: var(--sp-4); }
@media (max-width: 560px) {
  .hours-summary { grid-template-columns: 1fr; }
}