:root {
  --cf-ink: #10231f;
  --cf-muted: #60736a;
  --cf-green: #1f6b4f;
  --cf-green-dark: #174c3c;
  --cf-gold: #c9922e;
  --cf-coral: #b65745;
  --cf-blue: #275d82;
  --cf-paper: #f7f8f4;
  --cf-surface: #ffffff;
  --cf-line: #dfe6df;
  --cf-shadow: 0 8px 22px rgba(16, 35, 31, .07);
  --bs-border-radius: 8px;
}

/* Albums, mémoire et promotions */
.album-memory-filters { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(180px, .8fr) minmax(180px, .8fr) auto; align-items: end; gap: .75rem; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.album-memory-filters .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.album-card-context, .album-memory-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; color: var(--cf-muted); font-size: .75rem; }
.album-card-context span, .album-memory-meta > *, .album-memory-meta a { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.album-memory-meta a:hover { color: var(--cf-green); }
.album-tag-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.album-tag-list span { display: inline-flex; padding: .2rem .45rem; border-radius: 999px; color: #245844; background: #e7f2ed; font-size: .68rem; font-weight: 700; }
.album-report-panel { max-width: 620px; margin-left: auto; padding: .8rem 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.album-report-panel summary { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; color: var(--cf-muted); font-size: .78rem; font-weight: 800; cursor: pointer; }
.album-report-panel form { margin-top: .85rem; }
.promotion-sponsor { display: flex; align-items: center; gap: .65rem; color: var(--cf-ink); text-decoration: none; }
.promotion-sponsor + .promotion-sponsor { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--cf-line); }
.promotion-sponsor span { display: grid; min-width: 0; }
.promotion-sponsor small { color: var(--cf-muted); }
.promotion-memory-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cf-line); }
.promotion-memory-section > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.promotion-memory-section h2 { margin: .15rem 0 0; font-size: 1.35rem; }
.promotion-memory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.promotion-memory-grid .empty-state { grid-column: 1 / -1; }
.promotion-memory-item { min-width: 0; overflow: hidden; border: 1px solid var(--cf-line); border-radius: 8px; color: var(--cf-ink); background: var(--cf-surface); text-decoration: none; }
.promotion-memory-item > img, .promotion-memory-placeholder { display: grid; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; place-items: center; color: var(--cf-green); background: #e8f1ed; font-size: 1.5rem; }
.promotion-memory-item > span:last-child { display: grid; gap: .2rem; padding: .7rem; }
.promotion-memory-item strong { overflow-wrap: anywhere; }
.promotion-memory-item small { color: var(--cf-muted); }
.promotion-life-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.promotion-life-grid > section { min-width: 0; padding-top: 1rem; border-top: 3px solid var(--cf-green); }
.promotion-life-grid h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.promotion-life-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--cf-line); color: var(--cf-ink); text-decoration: none; }
.promotion-life-row > span:not(.promotion-project-progress) { display: grid; min-width: 0; }
.promotion-life-row small { color: var(--cf-muted); overflow-wrap: anywhere; }
.promotion-life-row time, .promotion-project-progress { color: var(--cf-green); font-size: .72rem; font-weight: 800; }

@media (max-width: 767.98px) {
  .album-memory-filters { grid-template-columns: minmax(0, 1fr); }
  .album-memory-filters .btn { width: 100%; }
  .album-viewer-actions [data-album-download] span { display: none; }
  .promotion-memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotion-life-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479.98px) {
  .promotion-memory-section > header { align-items: flex-start; flex-direction: column; }
  .promotion-memory-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Carte mondiale */
.network-map-page { padding: 2rem 0 3.5rem; }
.network-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.network-map-head > div { max-width: 820px; }
.network-map-head h1 { margin: .2rem 0 .55rem; color: #10251f; font-size: 2rem; font-weight: 800; letter-spacing: 0; }
.network-map-head p:last-child { margin: 0; color: #53645f; line-height: 1.65; }
.network-map-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.1rem; border: 1px solid #d9e3df; border-radius: 8px; background: #fff; }
.network-map-stats > div { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: 1rem 1.2rem; }
.network-map-stats > div + div { border-left: 1px solid #e4ebe8; }
.network-map-stats > div > i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #edf5ff; color: #1769e0; font-size: 1.1rem; }
.network-map-stats span { display: grid; min-width: 0; }
.network-map-stats strong { color: #10251f; font-size: 1.35rem; line-height: 1.1; }
.network-map-stats small { overflow: hidden; color: #667772; text-overflow: ellipsis; white-space: nowrap; }
.network-map-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(190px, .65fr) auto auto; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.network-map-filters label { display: grid; gap: .35rem; min-width: 0; color: #344a43; font-size: .82rem; font-weight: 700; }
.network-map-filters .btn { min-height: 42px; }
.network-map-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 580px; overflow: hidden; border: 1px solid #cfdbd7; border-radius: 8px; background: #fff; box-shadow: 0 16px 44px rgb(20 55 44 / 8%); }
.network-map-canvas { z-index: 0; width: 100%; min-height: 580px; background: #dce8ef; }
.network-map-panel { min-width: 0; border-left: 1px solid #dbe4e1; background: #fff; }
.network-map-panel-empty { display: grid; align-content: center; justify-items: center; height: 100%; padding: 2rem; color: #6a7d76; text-align: center; }
.network-map-panel-empty i { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .85rem; border-radius: 50%; background: #edf5ff; color: #1769e0; font-size: 1.35rem; }
.network-map-panel-empty strong { margin-bottom: .35rem; color: #203a32; }
.network-map-panel-empty span { font-size: .9rem; line-height: 1.5; }
.network-map-panel-content { height: 100%; overflow-y: auto; }
.network-map-panel-content > header { padding: 1.35rem; border-bottom: 1px solid #e3eae7; }
.network-map-panel-content > header > span { display: block; margin-bottom: .3rem; color: #1769e0; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.network-map-panel-content h2 { margin: 0 0 .35rem; color: #10251f; font-size: 1.35rem; font-weight: 800; letter-spacing: 0; }
.network-map-panel-content p { margin: 0; color: #697973; font-size: .86rem; }
.network-map-members { display: grid; padding: .5rem 1.1rem 1rem; }
.network-map-member { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: .65rem; min-width: 0; padding: .75rem .2rem; border-bottom: 1px solid #edf1ef; color: inherit; text-decoration: none; }
.network-map-member:hover strong { color: #1769e0; }
.network-map-member img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #e8efec; }
.network-map-member span { display: grid; min-width: 0; }
.network-map-member strong,
.network-map-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-map-member strong { color: #18352c; font-size: .9rem; }
.network-map-member small { color: #73817d; font-size: .76rem; }
.network-map-member > i { color: #91a29c; font-size: .75rem; }
.network-map-no-profiles { padding: 1.2rem .2rem; line-height: 1.5; }
.network-map-privacy { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid #dce7e3; border-radius: 8px; background: #f8fbfa; }
.network-map-privacy > i { color: #1f6b4f; font-size: 1.15rem; }
.network-map-privacy strong { display: block; margin-bottom: .18rem; color: #25433a; }
.network-map-privacy p { margin: 0; color: #687a74; font-size: .84rem; line-height: 1.5; }
.network-map-migration { display: flex; gap: .8rem; align-items: center; }
.network-map-migration > i { font-size: 1.3rem; }
.network-map-migration > div { display: grid; }
.network-map-empty { margin-top: 1rem; }
.network-map-canvas .leaflet-control-attribution { font-size: .68rem; }
.network-map-canvas .leaflet-tooltip { border: 0; border-radius: 6px; box-shadow: 0 8px 24px rgb(22 45 38 / 16%); color: #203a32; font-family: inherit; font-weight: 700; }
.network-map-cluster-icon { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #1769e0; box-shadow: 0 5px 18px rgb(15 64 133 / 28%); font-family: inherit; font-weight: 800; }
.network-map-cluster-icon span { line-height: 1; }

@media (max-width: 991.98px) {
  .network-map-filters { grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr); }
  .network-map-workspace { grid-template-columns: minmax(0, 1fr); }
  .network-map-canvas { min-height: 480px; }
  .network-map-panel { min-height: 260px; border-top: 1px solid #dbe4e1; border-left: 0; }
  .network-map-panel-empty { min-height: 260px; }
}

@media (max-width: 767.98px) {
  .network-map-page { padding-top: 1.2rem; }
  .network-map-head { align-items: stretch; flex-direction: column; }
  .network-map-head h1 { font-size: 1.7rem; }
  .network-map-head .btn { align-self: flex-start; }
  .network-map-stats { grid-template-columns: minmax(0, 1fr); }
  .network-map-stats > div + div { border-top: 1px solid #e4ebe8; border-left: 0; }
  .network-map-filters { grid-template-columns: minmax(0, 1fr); }
  .network-map-filters .btn { width: 100%; }
  .network-map-workspace { min-height: 0; }
  .network-map-canvas { min-height: 430px; }
}

@media (max-width: 479.98px) {
  .network-map-canvas { min-height: 380px; }
  .network-map-panel-empty { min-height: 230px; }
  .network-map-panel-content > header { padding: 1rem; }
  .network-map-members { padding-right: .8rem; padding-left: .8rem; }
}

/* Privacy center and personal-data administration */
.privacy-center { min-height: 70vh; padding: 2rem 0 4rem; }
.privacy-container { max-width: 1080px; }
.privacy-hero { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dce5df; }
.privacy-hero-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 8px; color: #fff; background: #174c3c; font-size: 1.45rem; }
.privacy-hero h1 { margin: .1rem 0 .25rem; font-size: 2.1rem; }
.privacy-hero p { margin: 0; color: var(--cf-muted); }
.privacy-protection-banner { display: flex; gap: .9rem; margin: 1.5rem 0 0; padding: 1rem 1.15rem; border-left: 4px solid #2d6f9f; border-radius: 6px; background: #eef6fb; color: #173f5c; }
.privacy-protection-banner.requires-action { border-left-color: #b96b17; background: #fff7e9; color: #6f420e; }
.privacy-protection-banner > i { margin-top: .1rem; font-size: 1.3rem; }
.privacy-protection-banner p { margin: .15rem 0 0; }
.privacy-protection-banner small { display: block; margin-top: .4rem; font-weight: 700; }
.privacy-section { padding: 2rem 0; border-bottom: 1px solid #dce5df; scroll-margin-top: 90px; }
.privacy-section > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.privacy-section > header span { color: var(--cf-green); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.privacy-section > header h2 { margin: .15rem 0 0; font-size: 1.35rem; }
.privacy-section > header > i { color: #2d6f9f; font-size: 1.5rem; }
.privacy-session-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.privacy-session-toolbar p { max-width: 680px; margin: 0; color: var(--cf-muted); }
.privacy-session-list { border-top: 1px solid #dce5df; }
.privacy-session-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 78px; padding: .85rem 0; border-bottom: 1px solid #e4ebe6; }
.privacy-session-row.is-closed { opacity: .62; }
.privacy-session-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #185076; background: #e8f4fb; font-size: 1.05rem; }
.privacy-session-row.is-current .privacy-session-icon { color: #266244; background: #e5f5eb; }
.privacy-session-copy { display: grid; min-width: 0; gap: .18rem; }
.privacy-session-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.privacy-session-copy small { color: var(--cf-muted); overflow-wrap: anywhere; }
.privacy-current-pill { display: inline-flex; padding: .18rem .42rem; border-radius: 5px; color: #266244; background: #e5f5eb; font-size: .68rem; font-weight: 800; }
.privacy-consent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.privacy-consent-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 76px; padding: .85rem 1rem; border: 1px solid #dce5df; border-radius: 8px; background: #fff; }
.privacy-consent-row > div { display: grid; gap: .15rem; }
.privacy-consent-row small { color: var(--cf-muted); }
.privacy-consent-row.is-locked > span { display: inline-flex; align-items: center; gap: .3rem; color: #2d6f9f; font-size: .75rem; font-weight: 800; }
.privacy-export-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); gap: 2rem; align-items: end; }
.privacy-export-row p { margin: 0 0 .35rem; }
.privacy-export-row small { color: var(--cf-muted); }
.privacy-export-row form label,
.privacy-request-form label,
.privacy-danger-content label,
.privacy-admin-filters label,
.privacy-admin-action label { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 800; color: #183d30; }
.privacy-request-form { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr) auto; gap: .8rem; align-items: end; padding: 1rem; border: 1px solid #dce5df; border-radius: 8px; background: #f8faf9; }
.privacy-request-detail textarea { min-height: 86px; }
.privacy-request-history { margin-top: 1.5rem; }
.privacy-request-history h3 { margin: 0 0 .75rem; font-size: 1rem; }
.privacy-request-history article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid #e4ebe6; }
.privacy-request-history article > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem .55rem; }
.privacy-request-history article small { grid-column: 2; color: var(--cf-muted); }
.privacy-status { display: inline-flex; width: fit-content; padding: .22rem .48rem; border-radius: 5px; color: #315a49; background: #e9f3ee; font-size: .7rem; font-weight: 800; }
.privacy-status-in_progress { color: #185076; background: #e8f4fb; }
.privacy-status-completed { color: #266244; background: #e5f5eb; }
.privacy-status-rejected,
.privacy-status-cancelled { color: #8b3038; background: #faeaec; }
.privacy-empty { margin: 1rem 0 0; color: var(--cf-muted); }
.privacy-danger-zone { border-bottom: 0; }
.privacy-danger-zone > header span,
.privacy-danger-zone > header > i { color: #a3343f; }
.privacy-danger-zone details { border: 1px solid #e7c8cb; border-radius: 8px; background: #fff8f8; }
.privacy-danger-zone summary { padding: 1rem; color: #8b3038; font-weight: 800; cursor: pointer; }
.privacy-danger-content { padding: 0 1rem 1rem; }
.privacy-danger-content form { display: grid; gap: .65rem; margin-top: 1rem; }
.privacy-danger-content .btn { width: fit-content; }
.privacy-minor-notice { display: flex; gap: .8rem; margin-bottom: 1.25rem; padding: 1rem; border-left: 4px solid #2d6f9f; border-radius: 6px; background: #eef6fb; color: #173f5c; }
.privacy-minor-notice > i { font-size: 1.25rem; }
.privacy-minor-notice p { margin: .15rem 0 0; }
.toggle-line.is-disabled { opacity: .7; cursor: not-allowed; }

.privacy-admin { padding-bottom: 4rem; }
.privacy-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.privacy-admin-head h1 { margin: .1rem 0; }
.privacy-admin-head p { margin: 0; color: var(--cf-muted); }
.privacy-admin-filters { display: grid; grid-template-columns: 220px 260px auto; align-items: end; gap: .75rem; padding: 1rem 0 1.5rem; border-bottom: 1px solid #dce5df; }
.privacy-admin-section { padding: 1.75rem 0; border-bottom: 1px solid #dce5df; scroll-margin-top: 90px; }
.privacy-admin-section:last-child { border-bottom: 0; }
.privacy-admin-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.privacy-admin-title span { color: var(--cf-green); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.privacy-admin-title h2 { margin: .15rem 0 0; font-size: 1.35rem; }
.privacy-admin-title > strong { display: grid; place-items: center; min-width: 42px; height: 34px; border-radius: 6px; color: #fff; background: #174c3c; }
.privacy-admin td small { display: block; margin-top: .2rem; color: var(--cf-muted); }
.privacy-admin td p { max-width: 360px; margin: .4rem 0 0; font-size: .82rem; }
.privacy-admin-action { min-width: 190px; }
.privacy-admin-action summary { color: var(--cf-green); font-weight: 800; cursor: pointer; }
.privacy-admin-action form { display: grid; gap: .55rem; min-width: 310px; margin-top: .65rem; }
.privacy-admin-action form > div:last-child { display: flex; flex-wrap: wrap; gap: .35rem; }
.privacy-delete-confirm { display: grid; gap: .45rem; padding: .65rem; border: 1px solid #e7c8cb; border-radius: 6px; background: #fff5f5; }
.privacy-policy-note { display: flex; gap: .6rem; margin-bottom: 1rem; padding: .8rem 1rem; border-left: 4px solid #b96b17; border-radius: 6px; background: #fff7e9; color: #6f420e; }
.privacy-minor-admin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.privacy-minor-admin-list > article { padding: 1rem; border: 1px solid #dce5df; border-radius: 8px; background: #fff; }
.privacy-minor-person { display: flex; align-items: center; gap: .65rem; }
.privacy-minor-person > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; color: #185076; background: #e8f4fb; }
.privacy-minor-person > div { display: grid; min-width: 0; }
.privacy-minor-person small { color: var(--cf-muted); }
.privacy-minor-admin-list details { margin-top: .75rem; }
.privacy-minor-admin-list summary { color: var(--cf-green); font-size: .8rem; font-weight: 800; cursor: pointer; }
.privacy-minor-admin-list form { display: grid; gap: .5rem; margin-top: .65rem; }
.privacy-minor-admin-list form > div { display: flex; flex-wrap: wrap; gap: .35rem; }

@media (max-width: 991px) {
  .privacy-consent-list,
  .privacy-minor-admin-list { grid-template-columns: 1fr; }
  .privacy-export-row { grid-template-columns: 1fr; gap: 1rem; }
  .privacy-request-form { grid-template-columns: 1fr 1fr; }
  .privacy-request-form > button { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .privacy-center { padding-top: 1.25rem; }
  .privacy-hero { grid-template-columns: 48px minmax(0, 1fr); }
  .privacy-hero-icon { width: 48px; height: 48px; }
  .privacy-hero h1 { font-size: 1.7rem; }
  .privacy-hero > .btn { grid-column: 1 / -1; width: 100%; }
  .privacy-section { padding: 1.5rem 0; }
  .privacy-consent-row { align-items: flex-start; }
  .privacy-session-toolbar { align-items: stretch; flex-direction: column; }
  .privacy-session-toolbar .btn { width: 100%; }
  .privacy-session-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
  .privacy-session-icon { width: 38px; height: 38px; }
  .privacy-session-row > form { grid-column: 2; }
  .privacy-session-row > form .btn { width: 100%; }
  .privacy-request-form { grid-template-columns: 1fr; padding: .85rem; }
  .privacy-request-form > button { grid-column: auto; width: 100%; }
  .privacy-request-history article { align-items: flex-start; }
  .privacy-request-history article > div { grid-template-columns: 1fr; }
  .privacy-request-history article small { grid-column: auto; }
  .privacy-export-row .input-group { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .privacy-export-row .input-group > * { width: 100%; border-radius: 6px !important; }
  .privacy-admin-head { align-items: flex-start; flex-direction: column; }
  .privacy-admin-head .btn { width: 100%; }
  .privacy-admin-filters { grid-template-columns: 1fr; }
  .privacy-admin-filters .btn { width: 100%; }
  .privacy-admin-action form { min-width: 0; }
}

/* Administration: état de santé opérationnel */
.system-admin-shell { min-height: 70vh; padding: 2rem 0 4rem; }
.system-admin-container { max-width: 1180px; }
.system-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--cf-line); }
.system-admin-head h1 { margin: .1rem 0 .25rem; }
.system-admin-head p { margin: 0; color: var(--cf-muted); }
.system-admin-head > div:last-child { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.system-checked { display: inline-flex; align-items: center; gap: .35rem; color: var(--cf-muted); font-size: .78rem; }
.system-section { padding: 2rem 0; border-bottom: 1px solid var(--cf-line); scroll-margin-top: 90px; }
.system-section:last-child { border-bottom: 0; }
.system-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.system-section-title span { color: var(--cf-green); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.system-section-title h2 { margin: .15rem 0 0; font-size: 1.35rem; }
.system-check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.system-check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .6rem; padding: .8rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.system-check > i { font-size: 1.05rem; }
.system-check > div { display: grid; gap: .12rem; min-width: 0; }
.system-check small { color: var(--cf-muted); overflow-wrap: anywhere; }
.system-state-ok > i { color: #247449; }
.system-state-warning > i { color: #a76516; }
.system-state-error > i { color: #b03a45; }
.system-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.system-task { padding: 1rem; border: 1px solid var(--cf-line); border-top: 3px solid #4b8a6f; border-radius: 8px; background: var(--cf-surface); }
.system-health-late, .system-health-never { border-top-color: #c1842a; }
.system-health-failed { border-top-color: #b03a45; }
.system-health-disabled { border-top-color: #7a8580; }
.system-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; }
.system-task-top > span, .system-run-status { display: inline-flex; width: fit-content; padding: .2rem .45rem; border-radius: 5px; color: #266244; background: #e5f5eb; font-size: .68rem; font-weight: 800; }
.system-health-late .system-task-top > span, .system-health-never .system-task-top > span, .system-run-skipped, .system-run-retry { color: #7a4b10; background: #fff2dc; }
.system-health-failed .system-task-top > span, .system-run-failed, .system-run-dead { color: #8b3038; background: #faeaec; }
.system-run-running, .system-run-processing { color: #185076; background: #e8f4fb; }
.system-task dl { display: grid; gap: .55rem; margin: 1rem 0 0; }
.system-task dl > div { display: flex; justify-content: space-between; gap: .6rem; }
.system-task dt { color: var(--cf-muted); font-size: .75rem; font-weight: 600; }
.system-task dd { margin: 0; text-align: right; font-size: .75rem; }
.system-inline-error { margin: .75rem 0 0; color: #8b3038; font-size: .78rem; }
.system-history { margin-top: 1rem; }
.system-history summary { color: var(--cf-green); font-weight: 800; cursor: pointer; }
.system-history .table-responsive { margin-top: .75rem; }
.system-title-actions { gap: 1rem; }
.system-email-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.system-email-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--cf-line); border-radius: 8px; overflow: hidden; }
.system-email-stats article { display: grid; gap: .25rem; padding: .85rem; border-right: 1px solid var(--cf-line); background: var(--cf-surface); }
.system-email-stats article:last-child { border-right: 0; }
.system-email-stats span { color: var(--cf-muted); font-size: .72rem; }
.system-email-stats strong { font-size: 1.35rem; }
.system-backlog { margin: .75rem 0 1.5rem; color: var(--cf-muted); }
.system-failure-list h3 { margin: 0 0 .5rem; font-size: 1rem; }
.system-failure-list > article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--cf-line); }
.system-failure-main { display: grid; min-width: 0; gap: .2rem; }
.system-failure-main small { color: var(--cf-muted); }
.system-failure-main p { margin: .15rem 0 0; color: #8b3038; font-size: .78rem; overflow-wrap: anywhere; }
.system-row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.system-bottom-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; }
.system-large-number { margin: 0; font-size: 2.4rem; font-weight: 800; }
.system-large-number span { display: block; margin-top: .15rem; color: var(--cf-muted); font-size: .82rem; font-weight: 500; }
.system-migration-list { display: grid; gap: .45rem; }
.system-migration-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--cf-line); }
.system-migration-list strong { overflow-wrap: anywhere; }
.system-migration-list small { flex: 0 0 auto; color: var(--cf-muted); }
@media (max-width: 991px) {
  .system-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-task-grid { grid-template-columns: 1fr; }
  .system-email-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .system-email-stats article { border-bottom: 1px solid var(--cf-line); }
  .system-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .system-admin-shell { padding-top: 1.25rem; }
  .system-admin-head { align-items: flex-start; flex-direction: column; }
  .system-admin-head > div:last-child { align-items: stretch; justify-content: flex-start; width: 100%; }
  .system-admin-head .btn { width: 100%; }
  .system-section { padding: 1.5rem 0; }
  .system-check-grid { grid-template-columns: 1fr; }
  .system-title-actions { align-items: stretch; flex-direction: column; }
  .system-title-actions .btn { width: 100%; }
  .system-email-actions { display: grid; grid-template-columns: 1fr; }
  .system-email-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-failure-list > article { align-items: stretch; flex-direction: column; }
  .system-row-actions, .system-row-actions form, .system-row-actions .btn { width: 100%; }
  .system-migration-list > div { align-items: flex-start; flex-direction: column; gap: .15rem; }
}

/* Entraide structurée */
.help-page-head,
.help-section-head,
.help-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.help-page-head { margin-bottom: 1.5rem; }
.help-page-head h1 { margin: .2rem 0 .45rem; }
.help-section-head { margin-bottom: 1rem; }
.help-section-head h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.help-section-head p,
.help-results-head p { margin: 0; color: var(--cf-muted); }

.help-kind-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.help-kind-switch .btn { min-height: 44px; }

.help-filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(140px, 1fr)) 44px;
  gap: .6rem;
  margin-bottom: 1rem;
}

.help-filters input,
.help-filters select,
.help-search-field {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-surface);
  color: var(--cf-ink);
}

.help-filters > input,
.help-filters select { padding: .62rem .75rem; }

.help-search-field {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .75rem;
}

.help-search-field input {
  min-height: 42px;
  border: 0;
  background: transparent;
  outline: 0;
}

.help-post-card,
.help-response-card {
  height: 100%;
  padding: 1.15rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
  box-shadow: 0 8px 24px rgba(15, 38, 31, .06);
}

.help-post-card { border-top: 3px solid var(--cf-green); }
.help-post-card.help-post-offer { border-top-color: var(--cf-blue); }
.help-post-card-top,
.help-detail-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.help-kind-badge,
.help-category,
.help-match-reasons span {
  display: inline-flex;
  align-items: center;
  padding: .28rem .52rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
}

.help-kind-request { background: color-mix(in srgb, var(--cf-green) 13%, var(--cf-surface)); color: var(--cf-green); }
.help-kind-offer { background: color-mix(in srgb, var(--cf-blue) 14%, var(--cf-surface)); color: var(--cf-blue); }
.help-category { background: color-mix(in srgb, var(--cf-gold) 18%, var(--cf-surface)); color: var(--cf-ink); }

.help-post-card h2,
.help-response-card h3 {
  margin: .8rem 0 .45rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.help-post-card h2 a,
.help-response-card h3 a { color: var(--cf-ink); text-decoration: none; }
.help-post-card h2 a:hover,
.help-response-card h3 a:hover { color: var(--cf-green); }
.help-post-card > p,
.help-response-card > p { color: var(--cf-muted); }

.help-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  color: var(--cf-muted);
  font-size: .8rem;
}

.help-post-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.help-deadline { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--cf-line); color: var(--cf-ink); font-size: .82rem; }
.help-deadline i { margin-right: .3rem; color: var(--cf-gold); }

.pagination-wrap { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1.5rem; }
.pagination-wrap .page-link { min-width: 38px; min-height: 38px; display: grid; place-items: center; border: 1px solid var(--cf-line); border-radius: 6px; text-decoration: none; color: var(--cf-ink); background: var(--cf-surface); }
.pagination-wrap .page-link.active { background: var(--cf-green); border-color: var(--cf-green); color: #fff; }

.help-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 2rem;
  align-items: start;
}

.back-link { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: 1rem; color: var(--cf-green); text-decoration: none; }
.help-detail { padding-bottom: 1.5rem; border-bottom: 1px solid var(--cf-line); }
.help-detail h1 { margin: .8rem 0 1rem; max-width: 850px; }
.help-author-row { display: flex; align-items: center; gap: .7rem; }
.help-author-row div { display: flex; flex-direction: column; }
.help-author-row span { color: var(--cf-muted); font-size: .82rem; }
.help-detail-body { margin: 1.4rem 0; font-size: 1.02rem; line-height: 1.75; }
.help-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.help-facts div { padding-top: .7rem; border-top: 1px solid var(--cf-line); }
.help-facts dt { color: var(--cf-muted); font-size: .75rem; text-transform: uppercase; }
.help-facts dd { margin: .2rem 0 0; }

.help-action-section { padding: 1.7rem 0; border-bottom: 1px solid var(--cf-line); }
.help-response-list,
.help-match-list { display: grid; gap: .75rem; }
.help-response-row,
.help-match-row {
  display: flex;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
}

.help-response-content { flex: 1; min-width: 0; }
.help-response-content p { margin: .55rem 0 .8rem; line-height: 1.6; }
.help-match-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) auto; align-items: center; }
.help-match-row h3 { margin: .25rem 0; font-size: 1rem; }
.help-match-row p { margin: 0; color: var(--cf-muted); }
.help-match-score { color: var(--cf-green); font-weight: 800; }
.help-match-reasons { display: flex; flex-wrap: wrap; gap: .35rem; }
.help-match-reasons span { background: var(--cf-paper); color: var(--cf-ink); }

.help-detail-aside { position: sticky; top: 92px; display: grid; gap: 1rem; }
.help-aside-block { padding: 1rem; border-left: 3px solid var(--cf-green); background: var(--cf-surface); }
.help-aside-block h2 { margin: 0 0 .75rem; font-size: 1rem; }
.help-aside-block p { margin: 0; color: var(--cf-muted); font-size: .88rem; line-height: 1.55; }

.help-feedback-form { display: grid; grid-template-columns: minmax(170px, 1fr) 150px minmax(220px, 1.5fr) auto; gap: .65rem; align-items: center; margin-bottom: .75rem; }
.help-feedback { margin: .8rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--cf-gold); background: var(--cf-surface); }
.help-feedback p { margin: .25rem 0 0; }

@media (max-width: 991.98px) {
  .help-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-search-field { grid-column: 1 / -1; }
  .help-detail-layout { grid-template-columns: 1fr; }
  .help-detail-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-match-row { grid-template-columns: 1fr; }
  .help-feedback-form { grid-template-columns: 1fr 140px; }
  .help-feedback-form input { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .help-page-head { align-items: stretch; flex-direction: column; }
  .help-page-head .btn { width: 100%; }
  .help-filters { grid-template-columns: 1fr; }
  .help-search-field { grid-column: auto; }
  .help-filters .btn { width: 100%; }
  .help-facts,
  .help-detail-aside { grid-template-columns: 1fr; }
  .help-response-row { align-items: flex-start; }
  .help-feedback-form { grid-template-columns: 1fr; }
  .help-feedback-form input { grid-column: auto; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cf-ink);
  background: var(--cf-paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--cf-green);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  z-index: 2000;
  padding: .75rem 1rem;
  background: var(--cf-ink);
  color: #fff;
}

.skip-link:focus {
  left: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--cf-line);
  backdrop-filter: blur(12px);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
  font-weight: 800;
}

.brand-logo {
  width: 54px;
  height: 42px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.footer-logo {
  width: 68px;
  height: 54px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.navbar-brand {
  font-weight: 800;
  color: var(--cf-ink);
}

.nav-link {
  color: #233a34;
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--cf-green);
}

.btn {
  border-radius: 8px;
  font-weight: 700;
}

.btn-primary {
  --bs-btn-bg: var(--cf-green);
  --bs-btn-border-color: var(--cf-green);
  --bs-btn-hover-bg: var(--cf-green-dark);
  --bs-btn-hover-border-color: var(--cf-green-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--cf-green);
  --bs-btn-border-color: var(--cf-green);
  --bs-btn-hover-bg: var(--cf-green);
  --bs-btn-hover-border-color: var(--cf-green);
}

.btn-accent {
  color: #fff;
  background: var(--cf-coral);
  border-color: var(--cf-coral);
}

.page-band {
  padding: 4.5rem 0;
}

.page-band.alt {
  background: #fff;
}

.hero {
  min-height: clamp(520px, 78vh, 780px);
  display: grid;
  align-items: end;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(11, 28, 24, .82) 0%, rgba(11, 28, 24, .55) 44%, rgba(11, 28, 24, .15) 100%),
    url("../images/hero-school.jpg") center / cover no-repeat;
}

.hero-inner {
  padding: 8rem 0 5rem;
}

.hero h1 {
  max-width: 720px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.hero-rotator {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
}

.hero-rotator-viewport {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2.6em;
  overflow: hidden;
}

.hero-rotator-item {
  display: block;
  width: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .5s ease,
    transform .5s ease,
    visibility 0s linear .5s;
  pointer-events: none;
  will-change: opacity, transform;
}

.hero-rotator-item.is-active {
  position: relative;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .5s ease,
    transform .5s ease,
    visibility 0s linear 0s;
  pointer-events: auto;
}

.hero-rotator-item.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  opacity: 0;
  visibility: visible;
  transform: translate3d(0, -12px, 0);
  transition:
    opacity .4s ease,
    transform .4s ease;
}

.hero-rotator-item:not(.is-active):not(.is-leaving) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator-item,
  .hero-rotator-item.is-active,
  .hero-rotator-item.is-leaving {
    transition: opacity .2s ease;
    transform: none !important;
  }
}

.hero p {
  max-width: 700px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.hero .hero-lead {
  max-width: 640px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.88rem, 1.35vw, 1rem);
  line-height: 1.55;
}

.hero .hero-student-note {
  max-width: 640px;
  margin: .7rem 0 0;
  padding-left: .8rem;
  border-left: 3px solid rgba(255, 255, 255, .72);
  color: rgba(255, 255, 255, .9);
  font-size: .82rem;
  line-height: 1.5;
}

.section-title {
  max-width: 760px;
  margin-bottom: 2rem;
}

.section-title h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0;
}

.text-muted-strong {
  color: var(--cf-muted);
}

.module-tabs {
  gap: .5rem;
  flex-wrap: wrap;
}

.module-tabs .nav-link {
  border-radius: 999px;
  font-weight: 700;
  color: #3f564c;
  background: #eef5f0;
  border: 1px solid transparent;
}

.module-tabs .nav-link:hover {
  color: var(--cf-green-dark);
  background: #e3efe8;
}

.module-tabs .nav-link.active {
  color: #fff;
  background: var(--cf-green-dark);
}

.mentor-card-btn {
  width: 100%;
  border: 1px solid var(--cf-line);
  background: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.mentor-card-btn:hover,
.mentor-card-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18, 40, 28, .12);
  outline: none;
}

.mentor-profile-fact {
  display: grid;
  gap: .2rem;
  padding: .75rem .85rem;
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  background: #f7faf8;
}

.mentor-profile-fact span {
  font-size: .78rem;
  font-weight: 700;
  color: #6a7f75;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.mentor-profile-fact strong {
  font-weight: 650;
  color: #243a34;
  white-space: pre-wrap;
}

.feed-activity-card .feed-activity-body {
  padding: 0 1.15rem 1.1rem;
}

.feed-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.feed-activity-event {
  color: #1f5f4b;
  background: #e5f4ed;
}

.feed-activity-opportunity {
  color: #7a4d12;
  background: #f8efd9;
}

.feed-activity-survey {
  color: #1d4f8c;
  background: #e7f0fb;
}

.feed-activity-forum {
  color: #4a3d8f;
  background: #ecebf9;
}

.feed-activity-announcement {
  color: #8c2f4a;
  background: #fbe9ef;
}

.feed-activity-album {
  color: #1f6b4f;
  background: #e5f4ed;
}

.feed-album-cover {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #edf2ee;
}

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

/* Forums — cartes et modale de participation */
.forum-card-btn {
  width: 100%;
  border: 1px solid var(--cf-line);
  background: #fff;
  padding: 0;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.forum-card-btn:hover,
.forum-card-btn:focus {
  border-color: var(--cf-green);
  box-shadow: 0 6px 18px rgba(31, 107, 79, .12);
}

.forum-join-panel {
  padding: 1rem 1.1rem;
  border-radius: 8px;
  background: #edf6f1;
}

.forum-messages {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: .25rem;
}

.forum-message {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.forum-message .avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.forum-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: baseline;
  margin-bottom: .15rem;
  font-size: .85rem;
}

.forum-message-meta span {
  color: #6b7f76;
}

.forum-compose {
  border-top: 1px solid var(--cf-line);
  padding-top: 1rem;
}

.survey-question-card {
  border: 1px solid var(--cf-line);
  background: #f8fbf9;
}

.survey-question-block {
  border: 0;
  padding: 0;
  margin: 0;
}

.survey-result-bars {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
}

.survey-result-track {
  height: 10px;
  border-radius: 999px;
  background: #e8efe9;
  overflow: hidden;
}

.survey-result-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cf-green), var(--cf-green-dark));
}

.survey-text-answers {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.survey-text-answers li {
  padding: .85rem 1rem;
  border: 1px solid var(--cf-line);
  border-radius: 12px;
  background: #f7faf8;
}

.metric {
  padding: 1.2rem;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  width: 100%;
  text-align: left;
}

.metric strong {
  display: block;
  color: var(--cf-green);
  font-size: 2rem;
}

.metric span {
  display: block;
  color: #3d5249;
  font-weight: 650;
}

.metric-action {
  cursor: pointer;
  appearance: none;
  font: inherit;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.metric-action:hover,
.metric-action:focus {
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 24, 18, .18);
  transform: translateY(-2px);
  outline: none;
}

.home-stat-figure {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 800;
  color: var(--cf-green-dark);
  line-height: 1;
  margin-bottom: .75rem;
}

.home-mentor-list,
.home-country-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.home-mentor-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--cf-line);
  border-radius: 12px;
  background: #f8fbf9;
}

.home-mentor-meta {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.home-mentor-meta strong {
  color: #243a34;
}

.home-mentor-meta span {
  color: #6a7f75;
  font-size: .9rem;
}

.home-country-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  background: #f8fbf9;
}

.home-country-list strong {
  color: var(--cf-green-dark);
}

@media (max-width: 575.98px) {
  .home-mentor-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-mentor-item .btn {
    grid-column: 1 / -1;
  }
}

.card {
  border-color: var(--cf-line);
  border-radius: 8px;
  box-shadow: var(--cf-shadow);
}

.item-card {
  height: 100%;
}

.item-card .card-body > div:last-child {
  min-width: 0;
}

.directory-page a.person-name,
.directory-page a.person-name:hover,
.directory-page a.person-name:focus {
  text-decoration: none;
}

.directory-page a.person-name:hover,
.directory-page a.person-name:focus {
  color: var(--cf-green-dark);
}

.directory-student-legend {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .45rem;
  padding: .35rem .65rem;
  border: 1px solid #bfd5f5;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: .78rem;
  font-weight: 750;
}

.item-card-student {
  position: relative;
  overflow: hidden;
  border-color: #a9c8f4;
  background: #f4f8ff;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .1);
}

.item-card-student::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
}

.item-card-student .avatar {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .25);
}

.directory-page .item-card-student a.person-name,
.directory-page .item-card-student a.person-name:hover,
.directory-page .item-card-student a.person-name:focus {
  color: #1d4ed8;
}

.student-pill,
.student-profile-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  color: #1d4ed8;
  font-weight: 750;
}

.student-pill {
  flex-wrap: wrap;
  padding: .28rem .6rem;
  border: 1px solid #bfd5f5;
  border-radius: 999px;
  background: #eaf3ff;
  font-size: .76rem;
  line-height: 1.25;
}

.student-pill-compact {
  padding: .22rem .5rem;
  font-size: .72rem;
}

.student-profile-label {
  font-size: .9rem;
}

.item-card-mentor {
  position: relative;
  overflow: hidden;
  border-color: rgba(201, 146, 46, .42);
  background:
    linear-gradient(180deg, rgba(201, 146, 46, .1) 0%, rgba(255, 255, 255, .96) 38%),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 12px 28px rgba(153, 108, 24, .12);
}

.item-card-mentor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cf-gold), #d4a84a 45%, var(--cf-green));
}

.item-card-mentor .avatar {
  box-shadow: 0 0 0 2px rgba(201, 146, 46, .35);
}

.mentor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: .28rem;
  vertical-align: -.05em;
  color: #b57d1c;
  font-size: .92em;
  line-height: 1;
}

.mentor-badge i {
  display: block;
  font-size: .95em;
}

.mentor-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(201, 146, 46, .18), rgba(31, 107, 79, .12));
  color: #7a5612;
  font-size: .78rem;
  font-weight: 750;
  border: 1px solid rgba(201, 146, 46, .28);
}

.mentor-profile-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #8a6214;
  font-size: .9rem;
  font-weight: 700;
}

.item-card .card-title {
  font-size: 1.05rem;
  line-height: 1.35;
}

.avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: #e7ece8;
}

.avatar.avatar-zoomable,
.nav-avatar.avatar-zoomable,
.member-photo.avatar-zoomable,
.conversation-avatar.avatar-zoomable,
.chat-dock-avatar.avatar-zoomable {
  cursor: zoom-in;
}

.avatar-lg {
  width: 96px;
  height: 96px;
}

.cover {
  min-height: 210px;
  background: linear-gradient(135deg, #24483c, #2b6282);
  border-radius: 8px;
}

.form-control,
.form-select {
  border-radius: 8px;
  border-color: #cfd9d1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cf-green);
  box-shadow: 0 0 0 .2rem rgba(31, 107, 79, .16);
}

.table-responsive {
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: #fff;
}

.table {
  margin-bottom: 0;
}

.badge-soft {
  color: var(--cf-green-dark);
  background: #e2f0e8;
  border: 1px solid #c7dfd0;
}

.timeline {
  display: grid;
  gap: 1rem;
}

.timeline-item {
  position: relative;
  padding: 1rem 1rem 1rem 1.25rem;
  border-left: 4px solid var(--cf-gold);
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--cf-shadow);
}

.profile-sidebar-timeline {
  gap: .75rem;
}

.profile-sidebar-timeline .timeline-item {
  padding: .75rem .75rem .75rem 1rem;
  box-shadow: none;
  border: 1px solid rgba(31, 107, 79, .12);
}

.messenger-page {
  min-height: calc(100vh - 78px);
  padding: 1rem 0;
  background: #edf2ee;
}

.messenger-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: calc(100vh - 110px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  box-shadow: var(--cf-shadow);
}

.messenger-sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--cf-line);
  background: #fbfcfa;
}

.messenger-sidebar-header,
.chat-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border-bottom: 1px solid var(--cf-line);
}

.messenger-sidebar-header h1,
.chat-header h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
}

.messenger-sidebar-header p,
.chat-header p {
  margin: .15rem 0 0;
  color: var(--cf-muted);
  font-size: .86rem;
}

.chat-header-copy {
  min-width: 0;
  flex: 1;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.chat-call-btn {
  color: #fff;
  background: var(--cf-green);
  border-color: var(--cf-green);
}

.chat-call-btn:hover,
.chat-call-btn:focus {
  background: var(--cf-green-dark, #174c3c);
  border-color: var(--cf-green-dark, #174c3c);
  color: #fff;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--cf-ink);
  background: #eef4f0;
  border: 1px solid #d5e1d9;
  border-radius: 50%;
  text-decoration: none;
}

.icon-button:hover,
.icon-button:focus {
  color: #fff;
  background: var(--cf-green);
}

.messenger-search {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .85rem;
  padding: .65rem .8rem;
  background: #eef4f0;
  border-radius: 8px;
}

.messenger-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.conversation-list {
  min-height: 0;
  overflow: auto;
  padding: .4rem;
}

.conversation-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .75rem;
  color: var(--cf-ink);
  border-radius: 8px;
  text-decoration: none;
}

.conversation-row:hover,
.conversation-row.active {
  background: #e7f0eb;
}

.conversation-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
  border-radius: 50%;
  font-weight: 800;
  text-transform: uppercase;
}

.conversation-avatar.large {
  width: 52px;
  height: 52px;
}

.conversation-meta {
  min-width: 0;
}

.conversation-title,
.conversation-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-title {
  font-weight: 800;
}

.conversation-preview {
  color: var(--cf-muted);
  font-size: .9rem;
}

.unread-pill {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 .4rem;
  color: #fff;
  background: var(--cf-coral);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
}

.chat-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: #f7f9f6;
}

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.chat-message {
  display: flex;
  margin-bottom: .7rem;
}

.chat-message.mine {
  justify-content: flex-end;
}

.message-bubble {
  max-width: min(72%, 680px);
  padding: .78rem .95rem;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(16, 35, 31, .05);
}

.message-bubble.mine {
  color: #fff;
  background: var(--cf-green);
  border-color: var(--cf-green);
}

.message-author {
  margin-bottom: .25rem;
  color: var(--cf-muted);
  font-size: .78rem;
}

.message-bubble.mine .message-author {
  color: rgba(255, 255, 255, .72);
}

.chat-composer {
  padding: .75rem;
  background: #fff;
  border-top: 1px solid var(--cf-line);
}

.quick-replies,
.emoji-tray {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .55rem;
}

.quick-replies button,
.emoji-tray button {
  padding: .35rem .65rem;
  background: #eef4f0;
  border: 1px solid #d5e1d9;
  border-radius: 999px;
}

.emoji-tray {
  display: none;
}

.emoji-tray.open {
  display: flex;
}

.composer-row {
  display: grid;
  grid-template-columns: 44px 44px minmax(0, 1fr) 48px;
  gap: .55rem;
  align-items: end;
}

.composer-row textarea {
  min-height: 44px;
  max-height: 130px;
  resize: none;
  border-radius: 22px;
}

.send-button {
  width: 48px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.chat-placeholder,
.messenger-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100%;
  padding: 2rem;
  color: var(--cf-muted);
  text-align: center;
}

.chat-placeholder i {
  color: var(--cf-green);
  font-size: 3rem;
}

.chat-placeholder h2 {
  margin-top: 1rem;
  color: var(--cf-ink);
}

.admin-shell {
  background: #f1f4f2;
}

.admin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-page-header h1 {
  margin-bottom: .25rem;
}

.admin-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.eyebrow {
  display: inline-block;
  margin-bottom: .35rem;
  color: var(--cf-blue);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.form-panel {
  max-width: 1040px;
}

.register-page .form-panel {
  max-width: 860px;
}

.notice-line {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  color: #23443a;
  background: #edf6f1;
  border: 1px solid #cfe4d7;
  border-radius: 8px;
}

.notice-line i {
  color: var(--cf-green);
  font-size: 1.2rem;
}

.member-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  box-shadow: var(--cf-shadow);
}

.member-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.member-photo {
  width: 44px;
  height: 44px;
}

.member-row-student > td {
  background: #f3f7ff;
}

.member-row-student > td:first-child {
  border-left: 3px solid #3b82f6;
}

.member-row-student .member-list-name,
.member-row-student .member-list-first-name {
  color: #1d4ed8;
}

.member-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
}

.member-actions form {
  margin: 0;
}

.member-actions .icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
}

.icon-button.warning {
  color: #8a5d0a;
  background: #fff6dd;
  border-color: #ead18c;
}

.icon-button.warning:hover,
.icon-button.warning:focus {
  color: #fff;
  background: #9a6a10;
}

.icon-button.danger {
  color: #8f2f2f;
  background: #fff0f0;
  border-color: #edc2c2;
}

.icon-button.danger:hover,
.icon-button.danger:focus {
  color: #fff;
  background: #9f3434;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .65rem;
  color: var(--cf-ink);
  background: #eef4f0;
  border: 1px solid #d5e1d9;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
}

.status-active,
.status-verified {
  color: #144b38;
  background: #e2f0e8;
  border-color: #bfdcc9;
}

.status-pending_verification,
.status-incomplete {
  color: #795516;
  background: #fff6dd;
  border-color: #ead18c;
}

.status-suspended,
.status-blocked,
.status-deleted {
  color: #8f2f2f;
  background: #fff0f0;
  border-color: #edc2c2;
}

.member-edit-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cf-line);
}

.form-section {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--cf-line);
}

.form-section:first-of-type {
  padding-top: 0;
}

.form-section:last-of-type {
  border-bottom: 0;
}

.form-section h2 {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 800;
}

.availability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.toggle-line {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .65rem .8rem;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
}

.toggle-line input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--cf-green);
}

.profile-head {
  margin-top: -2rem;
}

.profile-facts {
  display: grid;
  gap: .6rem;
}

.profile-facts span,
.profile-facts a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.profile-definition {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: .45rem .85rem;
  margin: 0;
}

.profile-definition dt {
  color: var(--cf-muted);
  font-weight: 700;
}

.profile-definition dd {
  margin: 0;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .25rem .65rem;
  color: #174c3c;
  background: #e9f4ee;
  border: 1px solid #c7dfd0;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}

.stat-tile {
  padding: 1.15rem;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  box-shadow: var(--cf-shadow);
}

.stat-tile span {
  display: block;
  color: var(--cf-muted);
  font-size: .88rem;
}

.stat-tile strong {
  font-size: 1.8rem;
}

/* ===== Rapport statistique PDF ===== */
.statistics-report-trigger {
  min-height: 46px;
  box-shadow: 0 10px 24px rgba(24, 113, 219, .16);
}

.statistics-report-modal {
  --bs-modal-width: 620px;
}

.statistics-report-modal .modal-content {
  overflow: hidden;
  border: 1px solid rgba(24, 113, 219, .18);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(8, 42, 91, .22);
}

.statistics-report-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 32px;
  align-items: center;
  gap: .9rem;
  padding: 1.25rem 1.35rem;
  color: #fff;
  background: #082a5b;
  border-bottom: 5px solid #1871db;
}

.statistics-report-head .eyebrow {
  color: #a9d5ff;
}

.statistics-report-head .modal-title {
  margin: .12rem 0 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0;
}

.statistics-report-head .btn-close {
  align-self: start;
  filter: invert(1) grayscale(1) brightness(2);
}

.statistics-report-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  font-size: 1.45rem;
}

.statistics-report-body {
  display: grid;
  gap: .85rem;
  padding: 1.35rem;
}

.statistics-report-body .form-label {
  margin-bottom: -.35rem;
  color: var(--cf-ink);
  font-weight: 750;
}

.statistics-custom-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: .2rem;
  padding: 1rem;
  border: 1px solid #dce7ef;
  border-radius: 8px;
  background: #f5f9fc;
}

.statistics-custom-period[hidden] {
  display: none;
}

.statistics-report-confidentiality {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .2rem;
  padding: .8rem .9rem;
  color: #6f5218;
  border: 1px solid #ead9ae;
  border-radius: 8px;
  background: #fbf7ec;
  font-size: .86rem;
  font-weight: 650;
}

.statistics-report-confidentiality i {
  color: #a87512;
  font-size: 1.05rem;
}

.statistics-report-actions {
  gap: .65rem;
  padding: 1rem 1.35rem 1.25rem;
  border-top: 1px solid #e3ebf0;
  background: #f8fafc;
}

@media (max-width: 575.98px) {
  .statistics-report-modal .modal-dialog {
    margin: .75rem;
  }

  .statistics-report-head {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: .7rem;
    padding: 1rem;
  }

  .statistics-report-mark {
    width: 44px;
    height: 44px;
  }

  .statistics-report-body {
    padding: 1rem;
  }

  .statistics-custom-period {
    grid-template-columns: 1fr;
  }

  .statistics-report-actions {
    display: grid;
    grid-template-columns: 1fr;
    padding: .85rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  .statistics-report-actions .btn {
    width: 100%;
    min-height: 46px;
  }
}

.footer {
  color: #dbe7df;
  background: #10231f;
}

.footer a {
  color: #ffffff;
}

.empty-state {
  padding: 2rem;
  border: 1px dashed #b8c8bf;
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 991.98px) {
  .hero {
    min-height: 620px;
    background-position: center;
  }

  .hero-inner {
    padding-top: 6rem;
  }

  .page-band {
    padding: 3rem 0;
  }

  .admin-page-header {
    align-items: stretch;
  }

  .admin-header-actions,
  .admin-header-actions .btn {
    width: 100%;
  }

  .member-search {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .member-search .btn {
    grid-column: 1 / -1;
  }

  .table-card-mobile thead {
    display: none;
  }

  .table-card-mobile tr,
  .table-card-mobile td {
    display: block;
  }

  .table-card-mobile tr {
    padding: 1rem;
    border-bottom: 1px solid var(--cf-line);
  }

  .table-card-mobile tr.member-row-student {
    border-left: 3px solid #3b82f6;
    background: #f3f7ff;
  }

  .table-card-mobile td {
    padding: .25rem 0;
    border: 0;
  }

  .table-card-mobile .member-row-student > td {
    background: transparent;
  }

  .table-card-mobile .member-row-student > td:first-child {
    border-left: 0;
  }

  .table-card-mobile td[data-label]::before {
    display: block;
    color: var(--cf-muted);
    content: attr(data-label);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .member-actions {
    flex-wrap: wrap;
  }

  .availability-grid {
    grid-template-columns: 1fr;
  }

  .messenger-shell {
    grid-template-columns: 1fr;
  }

  .messenger-sidebar {
    max-height: 38vh;
    border-right: 0;
    border-bottom: 1px solid var(--cf-line);
  }

  .chat-panel {
    min-height: 62vh;
  }

  .message-bubble {
    max-width: 88%;
  }
}

/* ===== Navigation professionnelle ===== */
.site-header .navbar {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.brand-name {
  font-size: 1.02rem;
}

.main-nav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .45rem .85rem;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.15;
  color: #45564f;
}

.main-nav .nav-link i {
  font-size: 1.18rem;
  line-height: 1;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: var(--cf-green);
  background: rgba(31, 107, 79, .07);
}

.main-nav .nav-link.active {
  color: var(--cf-green);
  background: rgba(31, 107, 79, .1);
  font-weight: 700;
}

.main-nav .dropdown-toggle::after {
  display: none;
}

.nav-actions {
  gap: .35rem;
}

.nav-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #45564f;
  font-size: 1.25rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.nav-icon-link:hover,
.nav-icon-link:focus {
  color: var(--cf-green);
  background: rgba(31, 107, 79, .09);
}

.nav-logout-button {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.nav-logout-button:hover,
.nav-logout-button:focus-visible {
  color: var(--cf-coral);
  background: rgba(182, 87, 69, .09);
}

.nav-notification-button,
.nav-modal-link {
  border: 0;
  cursor: pointer;
}

.nav-notification-button {
  padding: 0;
  background: transparent;
  font: inherit;
}

.nav-modal-link {
  width: 100%;
  background: transparent;
  text-align: left;
}

/* ===== Confirmation de déconnexion ===== */
.logout-modal {
  --bs-modal-width: 480px;
}

.logout-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(182, 71, 71, .18);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(31, 27, 27, .25);
}

.logout-modal .modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: #b44747;
}

.logout-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #eadede;
  border-radius: 50%;
  color: #675a5a;
  background: #fff;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.logout-modal-close:hover,
.logout-modal-close:focus-visible {
  color: #a13b3b;
  background: #fbf3f3;
  transform: rotate(4deg);
}

.logout-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.35rem 2rem 1.35rem;
  text-align: center;
}

.logout-modal-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1rem;
  border: 1px solid #f0d2d2;
  border-radius: 22px;
  color: #a93f3f;
  background: #fff5f5;
  font-size: 1.85rem;
  box-shadow: 0 12px 28px rgba(169, 63, 63, .12);
}

.logout-modal.show .logout-modal-symbol {
  animation: logout-symbol-in .32s ease-out both;
}

.logout-modal-eyebrow {
  margin-bottom: .35rem;
  color: #a13b3b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.logout-modal-body h2 {
  max-width: 390px;
  margin: 0;
  color: var(--cf-ink);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
}

.logout-modal-body > p {
  max-width: 360px;
  margin: .6rem 0 1.2rem;
  color: var(--cf-muted);
  font-size: .92rem;
  line-height: 1.5;
}

.logout-modal-account {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--cf-line);
  border-radius: 14px;
  background: #f8faf8;
  text-align: left;
}

.logout-modal-account img,
.logout-modal-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  color: var(--cf-green);
  background: rgba(31, 107, 79, .1);
  font-size: 1.1rem;
}

.logout-modal-account small,
.logout-modal-account strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-modal-account small {
  margin-bottom: .1rem;
  color: var(--cf-muted);
  font-size: .72rem;
}

.logout-modal-account strong {
  color: var(--cf-ink);
  font-size: .9rem;
}

.logout-modal-shield {
  color: var(--cf-green);
  font-size: 1.15rem;
}

.logout-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  padding: 1rem 2rem 1.4rem;
  border-top: 1px solid #f0e8e8;
  background: #fff;
}

.logout-modal-actions form,
.logout-modal-actions .btn {
  width: 100%;
}

.logout-modal-actions .btn {
  min-height: 46px;
  border-radius: 10px;
  font-weight: 750;
}

.logout-confirm-button {
  border-color: #a93f3f;
  color: #fff;
  background: #a93f3f;
}

.logout-confirm-button:hover,
.logout-confirm-button:focus-visible {
  border-color: #8f3434;
  color: #fff;
  background: #8f3434;
}

@keyframes logout-symbol-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logout-modal.show .logout-modal-symbol {
    animation: none;
  }
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #fff;
}

.nav-menu-notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}

.nav-user-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: 999px;
  color: var(--cf-ink);
  text-decoration: none;
  transition: background .15s ease;
}

.nav-user-link:hover,
.nav-user-link:focus {
  background: rgba(31, 107, 79, .08);
  color: var(--cf-ink);
}

.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cf-line);
  background: #fff;
}

.nav-user-caret {
  font-size: .75rem;
  color: var(--cf-muted);
}

.user-menu .dropdown-menu {
  min-width: 260px;
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: color-mix(in srgb, var(--cf-green) 45%, transparent) transparent;
  scrollbar-width: thin;
  box-shadow: var(--cf-shadow);
  border-color: var(--cf-line);
}

.user-menu .dropdown-menu::-webkit-scrollbar,
.feed-role-actions::-webkit-scrollbar {
  width: 7px;
}

.user-menu .dropdown-menu::-webkit-scrollbar-thumb,
.feed-role-actions::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cf-green) 42%, transparent);
  background-clip: padding-box;
}

.user-menu .dropdown-menu::-webkit-scrollbar-track,
.feed-role-actions::-webkit-scrollbar-track {
  background: transparent;
}

.user-menu .dropdown-header strong {
  color: var(--cf-ink);
}

/* ===== Cloche et fenêtre des notifications ===== */
.notification-modal {
  --bs-modal-width: 640px;
}

.notification-modal .modal-dialog {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.notification-modal .modal-content {
  max-height: min(780px, calc(100vh - 3rem));
  overflow: hidden;
  border: 1px solid rgba(31, 107, 79, .14);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 35, 31, .24);
}

.notification-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--cf-line);
  background: #f8fbf9;
}

.notification-modal-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}

.notification-modal-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: var(--cf-green);
  font-size: 1.25rem;
  box-shadow: 0 8px 20px rgba(31, 107, 79, .18);
}

.notification-modal-title {
  margin: 0;
  color: var(--cf-ink);
  font-size: 1.12rem;
  font-weight: 800;
}

.notification-modal-subtitle {
  margin: .15rem 0 0;
  color: var(--cf-muted);
  font-size: .83rem;
}

.notification-modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cf-line);
  border-radius: 50%;
  color: var(--cf-ink);
  background: #fff;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.notification-modal-close:hover,
.notification-modal-close:focus-visible {
  color: var(--cf-coral);
  background: #f7eeee;
  transform: rotate(4deg);
}

.notification-modal-body {
  padding: 0;
  background: #fff;
}

.notification-modal-list {
  display: grid;
}

.notification-modal-row {
  position: relative;
  align-items: center;
  min-height: 84px;
  padding: .9rem 1.25rem;
  border-left: 3px solid transparent;
}

.notification-modal-row.is-unread {
  border-left-color: var(--cf-green);
  background: rgba(31, 107, 79, .055);
}

.notification-modal-row .notification-text {
  flex: 1 1 auto;
}

.notification-modal-row .notification-body {
  margin-top: .12rem;
  line-height: 1.35;
}

.notification-modal-row .notification-time {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .3rem;
}

.notification-modal-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cf-coral);
  box-shadow: 0 0 0 4px rgba(182, 87, 69, .1);
}

.notification-modal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.5rem 1.5rem;
  color: var(--cf-muted);
  text-align: center;
}

.notification-modal-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: .9rem;
  border-radius: 50%;
  color: var(--cf-green);
  background: rgba(31, 107, 79, .09);
  font-size: 1.55rem;
}

.notification-modal-empty strong {
  color: var(--cf-ink);
  font-size: 1rem;
}

.notification-modal-empty p {
  max-width: 330px;
  margin: .35rem 0 0;
  font-size: .88rem;
}

.notification-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--cf-line);
  background: #fff;
}
.notification-modal-foot form { margin: 0; }

.notification-menu {
  width: 360px;
  max-width: 92vw;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--cf-shadow);
  border-color: var(--cf-line);
}

.notification-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--cf-line);
  background: #fbfcfa;
}

.notification-menu-foot {
  display: block;
  padding: .7rem 1rem;
  border-top: 1px solid var(--cf-line);
  background: #fbfcfa;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
}

.notification-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  color: var(--cf-ink);
  text-decoration: none;
  border-bottom: 1px solid #eef2ee;
  transition: background .12s ease;
}

.notification-row:last-of-type {
  border-bottom: 0;
}

.notification-row:hover,
.notification-row:focus {
  background: rgba(31, 107, 79, .06);
  color: var(--cf-ink);
}

.notification-row.is-unread {
  background: rgba(31, 107, 79, .05);
}

.notification-row.is-unread .notification-title {
  font-weight: 800;
}

.notification-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(31, 107, 79, .1);
  color: var(--cf-green);
  font-size: 1.05rem;
}

.notification-text {
  display: block;
  min-width: 0;
}

.notification-title {
  display: block;
  font-weight: 600;
  font-size: .92rem;
}

.notification-body {
  display: block;
  color: var(--cf-muted);
  font-size: .84rem;
}

.notification-time {
  display: block;
  margin-top: .15rem;
  color: var(--cf-muted);
  font-size: .76rem;
}

.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  color: var(--cf-muted);
  text-align: center;
}

.notification-empty i {
  font-size: 1.6rem;
}

/* Page centre de notifications */
.notifications-page {
  max-width: 760px;
}

/* Ne jamais masquer la liste (évite le bug d’animation .reveal sur une grande carte) */
.notifications-page .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.notification-row-lg {
  padding: 1rem 1.25rem;
}

.notification-row-lg .notification-title {
  font-size: 1rem;
}

.notification-dot {
  flex: 0 0 auto;
  align-self: center;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cf-coral);
}

@media (max-width: 1199.98px) {
  .main-nav .nav-link,
  .nav-actions .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: .6rem;
    font-size: .95rem;
    padding: .6rem .75rem;
  }

  .main-nav .nav-link i,
  .nav-actions .nav-link i {
    font-size: 1.05rem;
  }

  .nav-user-link {
    margin: .35rem 0;
  }

  .nav-user-name {
    font-weight: 700;
  }
}

/* ===== Page d'accueil professionnelle ===== */
.hero.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #10231f;
}

.home-hero::before,
.home-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.home-hero::before {
  z-index: 0;
  inset: -3%;
  background: url("../images/hero-school.jpg") center / cover no-repeat;
  transform: scale(1.04);
  will-change: transform;
}

.home-hero::after {
  z-index: 1;
  background: linear-gradient(90deg, rgba(11, 28, 24, .82) 0%, rgba(11, 28, 24, .55) 44%, rgba(11, 28, 24, .15) 100%);
}

.home-hero .hero-inner {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: clamp(.58rem, 1.4vw, .7rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.hero-eyebrow i {
  font-size: .9em;
}

.hero .metric span {
  color: var(--cf-muted);
  font-size: .85rem;
  font-weight: 600;
}

.home-metrics .metric {
  position: relative;
  overflow: hidden;
}

.home-metrics .metric::after {
  position: absolute;
  right: 1.2rem;
  bottom: 0;
  left: 1.2rem;
  height: 3px;
  content: "";
  background: var(--cf-green);
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform .3s ease;
}

.home-metrics .metric:hover::after,
.home-metrics .metric:focus-visible::after {
  transform: scaleX(1);
}

.section-title.text-center {
  max-width: 720px;
}

.home-audience-band {
  overflow: hidden;
  background: var(--cf-paper);
  border-bottom: 1px solid var(--cf-line);
}

.home-audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 1rem;
}

.home-audience-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  padding: 1.6rem;
  border: 1px solid var(--cf-line);
  border-top: 4px solid var(--cf-green);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--cf-shadow);
}

.home-audience-card-student {
  border-color: #b8d0ef;
  border-top-color: #2563a9;
  background: #f4f8ff;
}

.home-audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: var(--cf-green-dark);
  background: #e5f1eb;
  font-size: 1.45rem;
}

.home-audience-card-student .home-audience-icon {
  color: #1d4f8c;
  background: #e2edfb;
}

.home-audience-label {
  margin: 0 0 .35rem;
  color: var(--cf-green);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.home-audience-card-student .home-audience-label {
  color: #1d4f8c;
}

.home-audience-card h3 {
  margin-bottom: .65rem;
  font-size: 1.2rem;
}

.home-audience-card p:not(.home-audience-label) {
  margin-bottom: .85rem;
  color: var(--cf-muted);
  line-height: 1.6;
}

.home-audience-benefits {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cf-ink);
  font-size: .88rem;
  font-weight: 650;
}

.home-audience-benefits li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
}

.home-audience-benefits i {
  flex: 0 0 auto;
  color: var(--cf-green);
  font-size: 1rem;
}

.home-audience-card-student .home-audience-benefits i {
  color: #2563a9;
}

.home-generation-bridge {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
}

.home-generation-bridge::before,
.home-generation-bridge::after {
  position: absolute;
  top: 50%;
  height: 2px;
  content: "";
}

.home-generation-bridge::before {
  right: 0;
  left: 0;
  background: #b7c9c0;
}

.home-generation-bridge::after {
  left: 0;
  z-index: 1;
  width: 32px;
  background: var(--cf-green);
}

.home-generation-bridge span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #a9bdb3;
  border-radius: 8px;
  color: var(--cf-green-dark);
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 35, 31, .1);
  font-size: 1.15rem;
}

.home-steps {
  position: relative;
}

@media (min-width: 768px) {
  .home-steps::before {
    position: absolute;
    top: 49px;
    right: 16.666%;
    left: 16.666%;
    z-index: 0;
    height: 2px;
    content: "";
    background: #c9d8d0;
    transform-origin: left;
  }

  .home-steps > div {
    position: relative;
    z-index: 1;
  }
}

.pillar-card {
  border-top: 3px solid var(--cf-green);
  transition: transform .15s ease, box-shadow .15s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 35, 31, .12);
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(31, 107, 79, .1);
  color: var(--cf-green);
  font-size: 1.5rem;
}

.step-card {
  height: 100%;
  padding: 1.75rem;
  background: var(--cf-surface);
  border: 1px solid var(--cf-line);
  border-radius: 12px;
  box-shadow: var(--cf-shadow);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--cf-green);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.testimonial-card {
  height: 100%;
  margin: 0;
  padding: 1.75rem;
  background: var(--cf-surface);
  border: 1px solid var(--cf-line);
  border-radius: 12px;
  box-shadow: var(--cf-shadow);
}

.testimonial-quote {
  display: block;
  margin-bottom: .5rem;
  color: var(--cf-gold);
  font-size: 2rem;
  line-height: 1;
}

.testimonial-card blockquote {
  color: var(--cf-ink);
  font-style: italic;
}

.cta-band {
  padding: 4.5rem 0;
  color: #fff;
  background: linear-gradient(120deg, var(--cf-green-dark), var(--cf-green) 55%, var(--cf-blue));
}

.cta-band h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.cta-band p {
  max-width: 640px;
  color: rgba(255, 255, 255, .88);
  font-size: 1.08rem;
}

.cta-band .btn-outline-light {
  border-width: 2px;
  font-weight: 700;
}

/* ===== Animations professionnelles ===== */
@media (prefers-reduced-motion: no-preference) {

  @keyframes homeHeroPan {
    0% { transform: scale(1.04) translate3d(-.7%, 0, 0); }
    100% { transform: scale(1.08) translate3d(.7%, -.5%, 0); }
  }

  .home-hero::before {
    animation: homeHeroPan 18s ease-in-out infinite alternate;
  }

  @keyframes homeBridgeTravel {
    from { left: 0; }
    to { left: calc(100% - 32px); }
  }

  .home-generation-bridge::after {
    animation: homeBridgeTravel 2.4s ease-in-out infinite alternate;
  }

  @keyframes homeIconIn {
    from {
      opacity: 0;
      transform: translateY(8px) scale(.86);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .home-audience-card.reveal.is-visible .home-audience-icon,
  .pillar-card.reveal.is-visible .pillar-icon {
    animation: homeIconIn .55s cubic-bezier(.2, .8, .2, 1) .18s both;
  }

  /* Entrée du héro au chargement */
  @keyframes heroRise {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-inner > * {
    animation: heroRise .7s cubic-bezier(.22, .61, .36, 1) both;
  }

  .hero-inner > .hero-rotator,
  .hero-inner > .hero-title {
    animation-name: heroFade;
  }

  @keyframes heroFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .hero-inner > *:nth-child(1) { animation-delay: .05s; }
  .hero-inner > *:nth-child(2) { animation-delay: .15s; }
  .hero-inner > *:nth-child(3) { animation-delay: .25s; }
  .hero-inner > *:nth-child(4) { animation-delay: .35s; }
  .hero-inner > *:nth-child(5) { animation-delay: .45s; }
  .hero-inner > *:nth-child(6) { animation-delay: .55s; }

  /* Apparition au défilement */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .68s cubic-bezier(.22, 1, .36, 1), transform .68s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-from-left {
    transform: translateX(-30px);
  }

  .reveal-from-right {
    transform: translateX(30px);
  }

  .reveal-scale {
    transform: translateY(20px) scale(.975);
  }

  .reveal-from-left.is-visible,
  .reveal-from-right.is-visible,
  .reveal-scale.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .home-audience-band .section-title.reveal > *,
  .home-pillars-band .section-title.reveal > *,
  .home-how-band .section-title.reveal > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  }

  .home-audience-band .section-title.reveal.is-visible > *,
  .home-pillars-band .section-title.reveal.is-visible > *,
  .home-how-band .section-title.reveal.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  .home-audience-band .section-title.reveal.is-visible > :nth-child(1),
  .home-pillars-band .section-title.reveal.is-visible > :nth-child(1),
  .home-how-band .section-title.reveal.is-visible > :nth-child(1) {
    transition-delay: .04s;
  }

  .home-audience-band .section-title.reveal.is-visible > :nth-child(2),
  .home-pillars-band .section-title.reveal.is-visible > :nth-child(2),
  .home-how-band .section-title.reveal.is-visible > :nth-child(2) {
    transition-delay: .12s;
  }

  .home-audience-band .section-title.reveal.is-visible > :nth-child(3),
  .home-pillars-band .section-title.reveal.is-visible > :nth-child(3),
  .home-how-band .section-title.reveal.is-visible > :nth-child(3) {
    transition-delay: .2s;
  }

  .home-audience-card.reveal > div > *,
  .pillar-card.reveal .card-body > :not(.pillar-icon),
  .step-card.reveal > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  }

  .home-audience-card.reveal.is-visible > div > *,
  .pillar-card.reveal.is-visible .card-body > :not(.pillar-icon),
  .step-card.reveal.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  .home-audience-card.reveal.is-visible > div > :nth-child(1),
  .pillar-card.reveal.is-visible .card-body > :nth-child(2),
  .step-card.reveal.is-visible > :nth-child(1) {
    transition-delay: .13s;
  }

  .home-audience-card.reveal.is-visible > div > :nth-child(2),
  .pillar-card.reveal.is-visible .card-body > :nth-child(3),
  .step-card.reveal.is-visible > :nth-child(2) {
    transition-delay: .2s;
  }

  .home-audience-card.reveal.is-visible > div > :nth-child(3),
  .pillar-card.reveal.is-visible .card-body > :nth-child(4),
  .step-card.reveal.is-visible > :nth-child(3) {
    transition-delay: .27s;
  }

  .home-audience-card.reveal.is-visible > div > :nth-child(4) {
    transition-delay: .34s;
  }

  /* Survol des cartes */
  .page-band .card,
  .item-card,
  .step-card,
  .testimonial-card {
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .page-band .row .card:hover,
  .item-card:hover,
  .step-card:hover,
  .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(16, 35, 31, .13);
  }

  /* Boutons */
  .btn {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn-primary:hover {
    box-shadow: 0 8px 18px rgba(31, 107, 79, .3);
  }

  .icon-button {
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
  }

  .icon-button:hover {
    transform: scale(1.1);
  }

  /* Menus déroulants */
  @keyframes dropdownIn {
    from {
      opacity: 0;
      transform: translateY(8px) scale(.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .dropdown-menu.show {
    animation: dropdownIn .2s cubic-bezier(.22, .61, .36, 1);
  }

  /* Messages flash */
  @keyframes flashIn {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .alert {
    animation: flashIn .35s cubic-bezier(.22, .61, .36, 1);
  }

  /* Cloche : pulsation discrète du badge */
  @keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }

  .nav-badge {
    animation: badgePulse 2.2s ease-in-out 3;
    transform-origin: center;
  }

  /* Lignes de notification */
  .notification-row {
    transition: background .15s ease, transform .15s ease;
  }

  .notification-row:hover {
    transform: translateX(3px);
  }

  /* Liens de navigation */
  .main-nav .nav-link,
  .nav-icon-link,
  .nav-user-link {
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }

  /* Avatars et images */
  .item-card .avatar,
  .member-photo {
    transition: transform .2s ease;
  }

  .item-card:hover .avatar {
    transform: scale(1.06);
  }

  /* Bulles de chat : apparition douce */
  @keyframes bubbleIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .message-bubble {
    animation: bubbleIn .25s ease both;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .home-steps.reveal::before {
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(.2, .8, .2, 1) .15s;
  }

  .home-steps.reveal.is-visible::before {
    transform: scaleX(1);
  }
}

@media (max-width: 991.98px) {
  .home-audience-grid {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  }

  .home-audience-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .home-hero::after {
    background: linear-gradient(180deg, rgba(11, 28, 24, .18) 0%, rgba(11, 28, 24, .58) 46%, rgba(11, 28, 24, .9) 100%);
  }

  .home-audience-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .home-audience-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1.15rem;
  }

  .home-audience-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  .home-generation-bridge {
    min-height: 66px;
  }

  .home-generation-bridge::before,
  .home-generation-bridge::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: auto;
  }

  .home-generation-bridge::before {
    right: auto;
    bottom: 0;
  }

  .home-generation-bridge::after {
    right: auto;
    bottom: auto;
    height: 24px;
  }

  .home-generation-bridge span i {
    transform: rotate(90deg);
  }

}

/* Carrières et suivi des candidatures */
.opportunity-hub,
.opportunity-detail-page {
  background: color-mix(in srgb, var(--cf-paper) 94%, #fff);
}

.opportunity-heading,
.opportunity-section-heading,
.opportunity-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.opportunity-heading {
  margin-bottom: 1.5rem;
}

.opportunity-heading h1,
.opportunity-detail-title h1 {
  margin: .2rem 0 .35rem;
  letter-spacing: 0;
}

.opportunity-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  margin-bottom: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.opportunity-tabs::-webkit-scrollbar {
  display: none;
}

.opportunity-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.tab-count {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(0, 0, 0, .08);
  font-size: .72rem;
  font-weight: 800;
}

.opportunity-tabs .active .tab-count {
  background: rgba(255, 255, 255, .2);
}

.opportunity-recommendations {
  margin-bottom: 2.25rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--cf-green) 18%, #dce4df);
  border-radius: 8px;
  background: #fff;
}

.opportunity-section-heading {
  margin-bottom: 1rem;
}

.opportunity-section-heading h2 {
  margin: .15rem 0 0;
  font-size: 1.35rem;
}

.opportunity-section-heading > span,
.opportunity-section-heading > a {
  color: var(--cf-green);
  font-size: .88rem;
  font-weight: 700;
}

.opportunity-recommendation-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.opportunity-recommendation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .9rem;
  border: 1px solid #e2e8e4;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.opportunity-recommendation:hover {
  border-color: var(--cf-green);
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 61, 46, .08);
}

.opportunity-recommendation > span:nth-child(2) {
  min-width: 0;
}

.opportunity-recommendation strong,
.opportunity-recommendation small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-recommendation small {
  margin-top: .2rem;
  color: #647169;
}

.opportunity-score {
  color: var(--cf-green);
  font-size: .68rem;
  text-align: center;
}

.opportunity-score strong {
  font-size: 1rem;
}

.opportunity-filters {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)) auto;
  gap: .65rem;
  margin-bottom: 1.25rem;
}

.filter-search {
  position: relative;
}

.filter-search i {
  position: absolute;
  left: .9rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #66746c;
}

.filter-search .form-control {
  padding-left: 2.45rem;
}

.opportunity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.opportunity-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  color: #647169;
  font-size: .84rem;
  font-weight: 700;
}

.opportunity-pagination .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.opportunity-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid #dfe6e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 54, 43, .04);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.opportunity-card:hover {
  border-color: color-mix(in srgb, var(--cf-green) 42%, #dfe6e1);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(22, 54, 43, .09);
}

.opportunity-card > header,
.opportunity-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.opportunity-logo,
.opportunity-detail-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e1e7e3;
  border-radius: 8px;
  background: #f7faf8;
  color: var(--cf-green);
  font-weight: 800;
}

.opportunity-logo {
  width: 46px;
  height: 46px;
}

.opportunity-logo img,
.opportunity-detail-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.opportunity-save {
  width: 38px;
  height: 38px;
  color: #56635c;
}

.opportunity-save.is-saved {
  color: var(--cf-green);
  background: color-mix(in srgb, var(--cf-green) 10%, #fff);
}

.opportunity-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: .9rem 0 .65rem;
}

.opportunity-verified,
.opportunity-match {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 700;
}

.opportunity-verified {
  color: #176647;
}

.opportunity-match {
  color: #7a5310;
}

.opportunity-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.35;
}

.opportunity-card h3 a {
  color: #14261f;
  text-decoration: none;
}

.opportunity-card h3 a:hover {
  color: var(--cf-green);
}

.opportunity-organization {
  margin: .35rem 0 .75rem;
  color: #526159;
  font-size: .9rem;
  font-weight: 650;
}

.opportunity-excerpt {
  flex: 1;
  color: #657169;
  font-size: .88rem;
  line-height: 1.55;
}

.opportunity-meta,
.opportunity-detail-meta {
  margin: .15rem 0 1rem;
}

.opportunity-meta > div {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .5rem;
  margin-top: .38rem;
  color: #5e6c64;
  font-size: .82rem;
}

.opportunity-meta dt,
.opportunity-meta dd,
.opportunity-detail-meta dt,
.opportunity-detail-meta dd {
  margin: 0;
}

.opportunity-card > footer {
  min-height: 35px;
  padding-top: .85rem;
  border-top: 1px solid #edf1ee;
}

.application-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: #edf2ef;
  color: #344b40;
  font-size: .74rem;
  font-weight: 750;
}

.status-accepted .application-status,
.application-status.status-accepted { background: #dff4e7; color: #176239; }
.status-refused .application-status,
.application-status.status-refused { background: #fbe3e3; color: #8a2929; }
.status-interview .application-status,
.application-status.status-interview { background: #fff0ca; color: #78540b; }
.status-abandoned .application-status,
.application-status.status-abandoned { background: #ececec; color: #5c5c5c; }

.opportunity-social-proof {
  color: #69766f;
  font-size: .8rem;
}

.application-tracker-list {
  display: grid;
  gap: .85rem;
}

.application-tracker {
  padding: 1.1rem;
  border: 1px solid #dfe6e1;
  border-left: 4px solid var(--cf-green);
  border-radius: 8px;
  background: #fff;
}

.application-tracker > header,
.application-tracker > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.application-tracker h3 {
  margin: .45rem 0 .1rem;
  font-size: 1.05rem;
}

.application-tracker h3 a {
  color: inherit;
  text-decoration: none;
}

.application-tracker p {
  margin: 0;
  color: #68756e;
  font-size: .85rem;
}

.application-tracker-form {
  display: grid;
  grid-template-columns: 180px 220px minmax(240px, 1fr) auto;
  align-items: end;
  gap: .75rem;
  margin-top: 1rem;
}

.application-tracker-form label > span {
  display: block;
  margin-bottom: .3rem;
  color: #526159;
  font-size: .75rem;
  font-weight: 700;
}

.application-tracker > footer {
  justify-content: flex-start;
  margin-top: .8rem;
  color: #66746c;
  font-size: .8rem;
}

.opportunity-publish-form {
  padding: 1.35rem;
  border: 1px solid #dfe6e1;
  border-radius: 8px;
  background: #fff;
}

.opportunity-publish-form fieldset + fieldset {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e6ebe8;
}

.opportunity-publish-form legend {
  margin-bottom: .9rem;
  font-size: 1rem;
  font-weight: 750;
}

.opportunity-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
  color: #4f6258;
  font-weight: 700;
  text-decoration: none;
}

.opportunity-detail-header {
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1.3rem;
  border: 1px solid #dfe6e1;
  border-radius: 8px;
  background: #fff;
}

.opportunity-detail-logo {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  font-size: 1.6rem;
}

.opportunity-detail-title {
  flex: 1;
  min-width: 0;
}

.opportunity-detail-title .opportunity-card-badges {
  margin: 0 0 .55rem;
}

.opportunity-detail-title p {
  margin: 0;
  color: #58675f;
  font-weight: 650;
}

.opportunity-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  align-items: start;
  gap: 1.25rem;
}

.opportunity-detail-content,
.opportunity-action-panel {
  min-width: 0;
}

.opportunity-detail-content > section,
.opportunity-action-panel > section,
.opportunity-report {
  padding: 1.25rem;
  border: 1px solid #dfe6e1;
  border-radius: 8px;
  background: #fff;
}

.opportunity-detail-content > section + section,
.opportunity-action-panel > section + section,
.opportunity-action-panel > section + .opportunity-report,
.opportunity-action-panel > .opportunity-report + section {
  margin-top: 1rem;
}

.opportunity-detail-content h2,
.opportunity-action-panel h2 {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
}

.rich-text {
  color: #435149;
  line-height: 1.7;
}

.opportunity-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
}

.opportunity-detail-meta > div {
  padding-bottom: .65rem;
  border-bottom: 1px solid #edf1ee;
}

.opportunity-detail-meta dt {
  color: #6a776f;
  font-size: .76rem;
}

.opportunity-detail-meta dd {
  margin-top: .2rem;
  color: #26372f;
  font-weight: 650;
}

.opportunity-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  color: #65736b;
  font-size: .8rem;
}

.opportunity-detail-stats span,
.opportunity-contact-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.opportunity-action-panel {
  position: sticky;
  top: 88px;
}

.opportunity-application-form {
  display: grid;
  gap: .55rem;
}

.opportunity-application-form .form-label {
  margin: .25rem 0 0;
  font-size: .8rem;
}

.opportunity-contact-link {
  margin-top: .85rem;
  overflow-wrap: anywhere;
  font-size: .83rem;
}

.opportunity-reminder-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
}

.opportunity-reminders {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.opportunity-reminders li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 0;
  border-top: 1px solid #edf1ee;
  font-size: .82rem;
}

.opportunity-match-reasons ul {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opportunity-match-reasons li {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  color: #405148;
  font-size: .84rem;
}

.opportunity-match-reasons i {
  color: var(--cf-green);
}

.opportunity-report summary {
  cursor: pointer;
  color: #75524a;
  font-size: .84rem;
  font-weight: 700;
}

.opportunity-report form {
  margin-top: 1rem;
}

@media (max-width: 1199.98px) {
  .opportunity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunity-recommendation-list {
    grid-template-columns: 1fr;
  }

  .application-tracker-form {
    grid-template-columns: 1fr 1fr;
  }

  .application-notes {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991.98px) {
  .opportunity-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-search {
    grid-column: 1 / -1;
  }

  .opportunity-detail-layout {
    grid-template-columns: 1fr;
  }

  .opportunity-action-panel {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .opportunity-heading {
    align-items: flex-end;
  }

  .opportunity-heading p {
    max-width: 28ch;
  }

  .opportunity-tabs {
    margin-right: -1rem;
    padding-right: 1rem;
  }

  .opportunity-tabs .nav-link {
    min-height: 42px;
  }

  .opportunity-recommendations,
  .opportunity-publish-form,
  .opportunity-detail-header,
  .opportunity-detail-content > section,
  .opportunity-action-panel > section,
  .opportunity-report {
    padding: 1rem;
  }

  .opportunity-section-heading {
    align-items: flex-end;
  }

  .opportunity-filters,
  .opportunity-grid,
  .application-tracker-form {
    grid-template-columns: 1fr;
  }

  .filter-search,
  .application-notes {
    grid-column: auto;
  }

  .opportunity-filters .btn {
    min-height: 44px;
  }

  .opportunity-card {
    padding: 1rem;
  }

  .application-tracker > header,
  .application-tracker > footer {
    flex-wrap: wrap;
  }

  .application-tracker-form .btn {
    min-height: 44px;
  }

  .opportunity-detail-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .opportunity-detail-logo {
    width: 58px;
    height: 58px;
  }

  .opportunity-detail-header > form {
    grid-column: 1 / -1;
  }

  .opportunity-detail-header > form .btn {
    width: 100%;
  }

  .opportunity-detail-title h1 {
    font-size: 1.55rem;
  }

  .opportunity-detail-meta {
    grid-template-columns: 1fr;
  }

  .opportunity-form-actions .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .opportunity-heading .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 0;
  }

  .opportunity-heading .btn i {
    margin: 0 !important;
    font-size: 1rem;
  }

  .opportunity-section-heading > span {
    font-size: .75rem;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  @keyframes homeBridgeTravelMobile {
    from { top: 0; }
    to { top: calc(100% - 24px); }
  }

  .home-generation-bridge::after {
    animation-name: homeBridgeTravelMobile;
  }
}

/* Ombre du header au défilement (hors media query : simple transition) */
.site-header {
  transition: box-shadow .25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 18px rgba(16, 35, 31, .08);
}

/* ===== Bannière cookies (RGPD) ===== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  padding: 1rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.1rem 1.4rem;
  background: var(--cf-surface);
  border: 1px solid var(--cf-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 35, 31, .18);
}

.cookie-banner-text strong {
  display: block;
  margin-bottom: .3rem;
  color: var(--cf-ink);
}

.cookie-banner-text p {
  color: var(--cf-muted);
  font-size: .92rem;
  max-width: 640px;
}

.cookie-banner-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .5rem;
}

@media (max-width: 767.98px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .cookie-banner-actions {
    flex-direction: column;
  }

  .cookie-banner-actions .btn {
    width: 100%;
  }
}

/* Champ captcha du formulaire de contact */
.captcha-input {
  max-width: 220px;
}

.message-attachment-img {
  display: block;
  max-width: 240px;
  max-height: 200px;
  margin-top: .4rem;
  border-radius: 10px;
}

.message-attachment-file {
  display: inline-flex;
  align-items: center;
  margin-top: .4rem;
  padding: .35rem .65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.message-bubble.mine .message-attachment-file {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* ===== Messagerie flottante (style Messenger) ===== */
.chat-dock {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1400;
  font-size: .92rem;
}

.chat-dock-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(16, 35, 31, .28);
  font-size: 1.45rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.chat-dock-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 32px rgba(16, 35, 31, .32);
}

.chat-dock-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cf-coral);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  border: 2px solid #fff;
}

.chat-dock-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(360px, calc(100vw - 2rem));
  height: min(520px, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(16, 35, 31, .22);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.chat-dock-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-dock-header {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .75rem .85rem;
  background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
  color: #fff;
}

.chat-dock-header strong {
  flex: 1;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-dock-back,
.chat-dock-new,
.chat-dock-call,
.chat-dock-expand,
.chat-dock-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border: 0;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
}

.chat-dock-call {
  background: rgba(255, 255, 255, .22);
}

.chat-dock-call:hover,
.chat-dock-call:focus {
  background: #fff;
  color: var(--cf-green);
}

.chat-dock-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #f7f9f6;
}

.chat-dock-conversations,
.chat-dock-compose,
.chat-dock-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-dock-conversations {
  overflow: auto;
  padding: .35rem;
}

.chat-dock-compose {
  padding: 1rem;
  justify-content: flex-start;
}

.chat-dock-member-picker {
  display: grid;
  gap: .5rem;
}

.chat-dock-member-search-wrap {
  position: relative;
}

.chat-dock-member-search-wrap > i {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf-muted);
  pointer-events: none;
  font-size: .9rem;
}

.chat-dock-member-search-wrap input {
  padding-left: 2rem;
}

.chat-dock-member-selected {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 10px;
  background: #e7f0eb;
}

.chat-dock-member-selected img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-dock-member-selected span {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-dock-member-selected button {
  border: 0;
  background: transparent;
  color: var(--cf-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.chat-dock-member-selected button:hover {
  background: rgba(0, 0, 0, .06);
  color: #111;
}

.chat-dock-member-results {
  max-height: 220px;
  overflow: auto;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(31, 107, 79, .12);
}

.chat-dock-member-results[hidden],
.chat-dock-member-results:empty {
  display: none;
}

.chat-dock-member-result {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  width: 100%;
  padding: .55rem .65rem;
  border: 0;
  border-bottom: 1px solid rgba(31, 107, 79, .08);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-dock-member-result:last-child {
  border-bottom: 0;
}

.chat-dock-member-result:hover,
.chat-dock-member-result:focus-visible {
  background: #e7f0eb;
  outline: none;
}

.chat-dock-member-result img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-dock-member-result strong {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-dock-member-hint {
  padding: .85rem .75rem;
  text-align: center;
  color: var(--cf-muted);
  font-size: .85rem;
}

.chat-dock-loading,
.chat-dock-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--cf-muted);
}

.chat-dock-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  width: 100%;
  padding: .65rem .55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}

.chat-dock-row:hover {
  background: #e7f0eb;
}

.chat-dock-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.chat-dock-row-meta {
  min-width: 0;
}

.chat-dock-row-name,
.chat-dock-row-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-dock-row-name {
  font-weight: 700;
  color: var(--cf-ink);
}

.chat-dock-row-preview {
  color: var(--cf-muted);
  font-size: .84rem;
}

.chat-dock-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cf-coral);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.chat-dock-messages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: .75rem;
}

.chat-dock-msg {
  display: flex;
  margin-bottom: .55rem;
}

.chat-dock-msg.mine {
  justify-content: flex-end;
}

.chat-dock-bubble {
  max-width: 82%;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 35, 31, .05);
}

.chat-dock-msg.mine .chat-dock-bubble {
  color: #fff;
  background: var(--cf-green);
  border-color: var(--cf-green);
}

.chat-dock-msg-author,
.chat-dock-msg-time {
  font-size: .72rem;
  color: var(--cf-muted);
}

.chat-dock-msg.mine .chat-dock-msg-time {
  color: rgba(255, 255, 255, .75);
}

.chat-dock-msg-body {
  word-break: break-word;
}

.chat-dock-img {
  display: block;
  max-width: 200px;
  max-height: 160px;
  margin-top: .35rem;
  border-radius: 10px;
}

.chat-dock-file {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .35rem;
  padding: .3rem .55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
  color: inherit;
  text-decoration: none;
  font-size: .82rem;
}

.chat-dock-composer {
  padding: .55rem .65rem .7rem;
  background: #fff;
  border-top: 1px solid var(--cf-line);
}

.chat-dock-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .45rem;
  padding: .4rem;
  background: #eef4f0;
  border-radius: 10px;
}

.chat-dock-emojis button {
  padding: .2rem .35rem;
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
  border-radius: 6px;
}

.chat-dock-emojis button:hover {
  background: rgba(31, 107, 79, .12);
}

.chat-dock-attachment {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .4rem;
  padding: .35rem .55rem;
  background: #eef4f0;
  border-radius: 8px;
  font-size: .82rem;
}

.chat-dock-attachment button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--cf-muted);
  cursor: pointer;
}

.chat-dock-composer-row {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr) 38px;
  gap: .4rem;
  align-items: end;
}

.chat-dock-tool,
.chat-dock-send {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef4f0;
  color: var(--cf-ink);
  cursor: pointer;
}

.chat-dock-send {
  color: #fff;
  background: var(--cf-green);
}

.chat-dock-composer-row textarea {
  min-height: 34px;
  max-height: 100px;
  resize: none;
  border: 1px solid var(--cf-line);
  border-radius: 18px;
  padding: .45rem .75rem;
  font-size: .88rem;
}

.chat-dock-error {
  margin: .5rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  background: #fdecea;
  color: #8a2f24;
  font-size: .82rem;
}

@media (max-width: 575.98px) {
  .chat-dock {
    right: .75rem;
    bottom: .75rem;
  }

  .chat-dock-panel {
    width: calc(100vw - 1.5rem);
    height: min(70vh, 520px);
  }
}

/* ===== Social feed ===== */
.social-feed-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 1.75rem;
  padding-bottom: 2rem;
  background: linear-gradient(180deg, #eef4f0 0%, var(--cf-paper) 36%, var(--cf-paper) 100%);
}

.social-feed-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 220px;
  background:
    linear-gradient(90deg, transparent, rgba(201, 146, 46, .08), transparent),
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 18px,
      rgba(31, 107, 79, .025) 18px,
      rgba(31, 107, 79, .025) 19px
    );
  pointer-events: none;
}

.social-feed-container {
  max-width: 1120px;
}

.social-feed-head,
.admin-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.feed-kicker {
  margin: 0 0 .35rem;
  color: var(--cf-green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.social-feed-head h1,
.admin-page-head h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.social-feed-head .text-muted-strong {
  max-width: 36rem;
  margin-top: .35rem;
}

.admin-design {
  padding-top: 2rem;
}

.admin-design .section-kicker {
  display: inline-flex;
  margin-bottom: .35rem;
  color: var(--cf-green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.theme-active-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.3rem;
  padding: 1.15rem;
  border: 1px solid rgba(223, 230, 223, .95);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 11%, #fff), #fff 58%),
    #fff;
  box-shadow: 0 10px 26px rgba(16, 35, 31, .06);
}

.theme-active-copy h2 {
  margin: .45rem 0 .2rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
}

.theme-active-copy p {
  margin: 0;
  max-width: 44rem;
  color: var(--cf-muted);
}

.theme-active-preview {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  gap: .5rem;
  flex: 0 0 auto;
}

.theme-active-preview span {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(16, 35, 31, .1);
}

.theme-active-preview span:nth-child(1) {
  background: var(--theme-primary);
}

.theme-active-preview span:nth-child(2) {
  background: var(--theme-secondary);
}

.theme-active-preview span:nth-child(3) {
  background: var(--theme-accent);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.theme-card {
  display: grid;
  gap: .9rem;
  padding: .9rem;
  border: 1px solid rgba(223, 230, 223, .95);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 35, 31, .05);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.theme-card:hover,
.theme-card:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--theme-primary) 45%, var(--cf-line));
  box-shadow: 0 14px 30px rgba(16, 35, 31, .09);
}

.theme-card.is-active {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary) 18%, transparent), 0 14px 30px rgba(16, 35, 31, .08);
}

.theme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.theme-rank {
  color: #7a8b83;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.theme-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 24px;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: var(--theme-primary);
  background: color-mix(in srgb, var(--theme-primary) 10%, #fff);
  font-size: .72rem;
  font-weight: 800;
}

.theme-preview {
  position: relative;
  height: 92px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
}

.theme-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 50%, rgba(255, 255, 255, .1) 50%),
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .25), transparent 28%);
}

.theme-preview-nav,
.theme-preview-hero,
.theme-preview-action {
  position: absolute;
  z-index: 1;
  left: .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
}

.theme-preview-nav {
  top: .65rem;
  width: 44%;
  height: 8px;
}

.theme-preview-hero {
  bottom: 1.65rem;
  width: 62%;
  height: 10px;
}

.theme-preview-action {
  bottom: .65rem;
  width: 34%;
  height: 10px;
  background: var(--theme-accent);
}

.theme-card-body {
  display: grid;
  gap: .45rem;
}

.theme-card-body h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.theme-card-body p {
  min-height: 2.6em;
  margin: 0;
  color: var(--cf-muted);
  font-size: .86rem;
  line-height: 1.45;
}

.theme-swatch-row {
  display: flex;
  gap: .4rem;
  margin-top: .1rem;
}

.theme-swatch {
  display: block;
  width: 34px;
  height: 24px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(16, 35, 31, .14);
}

.background-design-section {
  margin-top: 3rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--cf-line);
  scroll-margin-top: 6rem;
}

.background-design-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.3rem;
}

.background-design-head h2 {
  margin: 0;
  color: var(--cf-ink);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 800;
}

.background-design-head p {
  max-width: 44rem;
  margin: .4rem 0 0;
  color: var(--cf-muted);
}

.background-active-summary {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-width: 230px;
  padding: .7rem .85rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 35, 31, .05);
}

.background-active-swatch {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--background-color);
  box-shadow: inset 0 0 0 1px rgba(16, 35, 31, .12);
}

.background-active-summary small,
.background-active-summary strong,
.background-active-summary code {
  display: block;
}

.background-active-summary small {
  color: var(--cf-muted);
  font-size: .7rem;
}

.background-active-summary strong {
  margin: .08rem 0;
  color: var(--cf-ink);
  font-size: .88rem;
}

.background-active-summary code,
.background-option-name code {
  color: #73827b;
  font-size: .7rem;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .85rem;
}

.background-option {
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(16, 35, 31, .045);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.background-option:hover,
.background-option:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cf-green) 48%, var(--cf-line));
  box-shadow: 0 12px 26px rgba(16, 35, 31, .08);
}

.background-option.is-active {
  border-color: var(--cf-green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-green) 17%, transparent), 0 12px 26px rgba(16, 35, 31, .07);
}

.background-option > button {
  display: grid;
  gap: 0;
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--cf-ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.background-option > button:disabled {
  opacity: 1;
  cursor: default;
}

.background-option-preview {
  position: relative;
  display: block;
  height: 86px;
  overflow: hidden;
  border-bottom: 1px solid rgba(16, 35, 31, .08);
  background: var(--background-color);
}

.background-preview-nav,
.background-preview-surface,
.background-preview-action {
  position: absolute;
  display: block;
  border-radius: 5px;
}

.background-preview-nav {
  top: 10px;
  left: 10px;
  right: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--cf-green) 82%, #fff);
}

.background-preview-surface {
  top: 29px;
  left: 10px;
  right: 38px;
  bottom: 10px;
  border: 1px solid rgba(16, 35, 31, .09);
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 35, 31, .07);
}

.background-preview-action {
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  background: var(--cf-gold);
}

.background-option-meta {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 67px;
  padding: .7rem .75rem;
}

.background-option-rank {
  color: #819087;
  font-size: .7rem;
  font-weight: 800;
}

.background-option-name {
  min-width: 0;
}

.background-option-name strong {
  display: block;
  min-height: 2.35em;
  overflow-wrap: anywhere;
  color: var(--cf-ink);
  font-size: .82rem;
  line-height: 1.18;
}

.background-option-name code {
  display: block;
  margin-top: .22rem;
}

.background-option-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--cf-green);
  font-size: .69rem;
  font-weight: 800;
}

.background-option.is-active .background-option-state {
  font-size: 1rem;
}

.feed-head-cta {
  box-shadow: 0 6px 16px rgba(31, 107, 79, .08);
}

.social-feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 1.35rem;
  align-items: start;
}

.social-feed-main {
  min-width: 0;
}

.feed-composer,
.social-post,
.feed-side-block {
  border: 1px solid rgba(223, 230, 223, .95);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 10px 28px rgba(16, 35, 31, .06);
  backdrop-filter: blur(8px);
}

.feed-composer {
  display: grid;
  gap: .95rem;
  padding: 1.1rem 1.15rem 1.15rem;
  margin-bottom: 1.1rem;
  animation: feed-rise .45s ease both;
}

.composer-author,
.social-post-header,
.comment-form {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.composer-author-copy strong {
  display: block;
  font-size: .98rem;
}

.composer-author .avatar-lg,
.social-post-header .avatar-lg {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(31, 107, 79, .18);
}

.avatar-sm {
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(31, 107, 79, .12);
}

.composer-textarea {
  min-height: 96px;
  padding: .95rem 1rem;
  border: 1px solid #d6e2da;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fbfcfb, #f5f8f6);
  color: var(--cf-ink);
  font-size: 1.02rem;
  line-height: 1.45;
  resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.composer-textarea:focus {
  border-color: rgba(31, 107, 79, .45);
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(31, 107, 79, .12);
}

.composer-actions {
  display: grid;
  grid-template-columns: minmax(120px, .65fr) minmax(150px, .8fr) minmax(250px, 1.4fr);
  gap: .7rem;
  align-items: center;
  padding-top: .15rem;
  border-top: 1px solid #e8eee9;
}

.feed-filter-bar {
  display: flex;
  gap: .45rem;
  margin: -.2rem 0 1rem;
  padding-bottom: .25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.feed-filter-bar a,
.feed-filter-active {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .4rem .7rem;
  border: 1px solid #d8e2dc;
  border-radius: 8px;
  color: #36584b;
  background: rgba(255, 255, 255, .86);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.feed-filter-bar a:hover,
.feed-filter-bar a:focus-visible,
.feed-filter-bar a.active,
.feed-filter-active {
  border-color: var(--cf-green);
  color: #fff;
  background: var(--cf-green);
}

.composer-context-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  border: 1px solid #e0e8e2;
  border-radius: 8px;
  background: #f8faf9;
}

.composer-context-row label {
  color: #51675e;
  font-size: .82rem;
  font-weight: 750;
}

.composer-context-row .form-select {
  min-height: 36px;
  padding-block: .35rem;
  font-size: .85rem;
}

.composer-advanced {
  border-top: 1px solid #e8eee9;
  border-bottom: 1px solid #e8eee9;
  padding: .65rem 0;
}

.composer-advanced summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #456257;
  font-size: .84rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.composer-advanced summary::-webkit-details-marker { display: none; }

.composer-advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  align-items: end;
  padding-top: .8rem;
}

.composer-file-document {
  border-color: #e4d5d5;
  color: #8d3434;
  background: #fff6f5;
  border-radius: 8px;
}

.composer-submit-group {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  min-width: 0;
}

.composer-submit-group .btn {
  min-height: 42px;
  white-space: nowrap;
}

.post-purpose-row {
  padding: .25rem 1.15rem 0;
}

.post-purpose {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .22rem .55rem;
  border-radius: 6px;
  color: #325e4d;
  background: #eaf4ef;
  font-size: .72rem;
  font-weight: 800;
}

.post-purpose-help { color: #7b4523; background: #fff1dc; }
.post-purpose-opportunity { color: #214f78; background: #e9f2fa; }
.post-purpose-advice { color: #5b4776; background: #f1ebf7; }
.post-purpose-event { color: #8a303d; background: #fbecef; }
.post-purpose-project { color: #3b5e26; background: #ecf5e7; }

.post-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: .25rem;
  overflow: hidden;
  background: #101916;
}

.post-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.shared-post-preview {
  display: grid;
  gap: .7rem;
  margin: 0 1.15rem 1rem;
  padding: .9rem;
  border: 1px solid #dce5df;
  border-radius: 8px;
  color: inherit;
  background: #f9fbfa;
  text-decoration: none;
}

.shared-post-preview:hover { border-color: #a9c6b7; color: inherit; }
.shared-post-author { display: flex; align-items: center; gap: .55rem; }
.shared-post-author span { display: grid; }
.shared-post-author small { color: var(--cf-muted); font-size: .73rem; }
.shared-post-preview p { margin: 0; color: #3c5149; line-height: 1.45; }
.shared-post-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(52vh, 420px);
  justify-self: center;
  border-radius: 6px;
  object-fit: contain;
  background: #142821;
}

.post-document-list {
  display: grid;
  gap: .55rem;
  padding: .9rem 1.15rem;
}

.post-document-list .post-media-file {
  min-height: 66px;
  margin: 0;
  border: 1px solid #e2e7e3;
  border-radius: 8px;
  background: #fafbfa;
}

.post-media-file > span { display: grid; min-width: 0; flex: 1; }
.post-media-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-media-file small { color: var(--cf-muted); }

.post-hashtag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .2rem 1.15rem .75rem;
}

.post-hashtag,
.post-hashtag-list a {
  color: #246b9c;
  font-weight: 750;
  text-decoration: none;
}

.post-hashtag-list a {
  padding: .2rem .45rem;
  border-radius: 6px;
  background: #eef6fb;
  font-size: .78rem;
}

.post-stats-useful { color: #53685f; font-size: .83rem; }

.post-share-panel {
  padding: .9rem 1.15rem;
  border-top: 1px solid #e4ebe6;
  background: #f8faf9;
}

.post-share-panel .form-select { width: min(210px, 100%); }
.post-report-inline { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #e3e8e5; }
.post-report-inline .form-label { color: #8b3e46; font-size: .78rem; }

.feed-owned-content { scroll-margin-top: 90px; }
.feed-owned-row { display: flex; align-items: center; justify-content: space-between; gap: .55rem; padding: .65rem 0; border-top: 1px solid #e4ebe6; }
.feed-owned-row > span { display: grid; min-width: 0; }
.feed-owned-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.feed-owned-row small { color: var(--cf-muted); font-size: .7rem; }
.feed-owned-row > div { display: flex; gap: .25rem; }
.feed-owned-row button,
.feed-owned-row > div > a { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #dce5df; border-radius: 6px; color: #315a49; background: #fff; text-decoration: none; }

.content-editor-page { min-height: 70vh; padding: 2rem 0 4rem; }
.content-editor-container { max-width: 1040px; }
.content-editor-head { margin-bottom: 1rem; }
.content-editor-head > a { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.25rem; color: var(--cf-primary); font-weight: 700; text-decoration: none; }
.content-editor-head span { color: var(--cf-primary); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.content-editor-head h1 { margin: .15rem 0 .25rem; font-size: 2.15rem; }
.content-editor-head p { margin: 0; color: var(--cf-muted); }
.content-editor-panel { overflow: hidden; border: 1px solid #dce5df; border-radius: 8px; background: #fff; box-shadow: 0 16px 36px rgba(16, 48, 37, .08); }
.content-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.content-editor-main { padding: 1.5rem; }
.content-editor-main > label,
.content-editor-fields label,
.content-editor-media > label { display: block; margin: 0 0 .4rem; color: #183d30; font-size: .8rem; font-weight: 800; }
.content-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.content-editor-field-full { grid-column: 1 / -1; }
.content-editor-media { padding: 1.5rem; border-left: 1px solid #e4ebe6; background: #f7faf8; }
.content-editor-media h2 { margin: 0 0 1rem; font-size: 1rem; }
.content-editor-media > label { margin-top: 1.15rem; }
.content-editor-media > small { display: block; margin-top: .35rem; color: var(--cf-muted); }
.content-editor-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.content-editor-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.content-editor-document { display: flex; align-items: center; gap: .5rem; min-width: 0; margin-top: .45rem; padding: .65rem; border: 1px solid #dce5df; border-radius: 6px; color: #315a49; background: #fff; text-decoration: none; }
.content-editor-document span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-editor-empty { color: var(--cf-muted); font-size: .85rem; }
.content-editor-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem 1.5rem; border-top: 1px solid #e4ebe6; background: #fbfcfb; }
@media (max-width: 767px) {
  .content-editor-page { padding-top: 1.25rem; }
  .content-editor-head h1 { font-size: 1.75rem; }
  .content-editor-grid { grid-template-columns: 1fr; }
  .content-editor-main,
  .content-editor-media { padding: 1rem; }
  .content-editor-media { border-top: 1px solid #e4ebe6; border-left: 0; }
  .content-editor-fields { grid-template-columns: 1fr; }
  .content-editor-field-full { grid-column: auto; }
  .content-editor-actions { flex-direction: column-reverse; padding: 1rem; }
  .content-editor-actions .btn { width: 100%; }
}

.composer-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .55rem .9rem;
  color: var(--cf-green-dark);
  border: 1px solid transparent;
  border-radius: 999px;
  background: #edf6f1;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.composer-file:hover,
.composer-file:focus-within {
  background: #e2f0e8;
  box-shadow: 0 6px 14px rgba(31, 107, 79, .12);
  transform: translateY(-1px);
}

.composer-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.composer-visibility {
  min-height: 42px;
  border-radius: 999px;
  border-color: #d5e0d8;
  background: #fff;
  font-weight: 600;
}

.composer-submit {
  min-height: 42px;
  padding-inline: 1.15rem;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(31, 107, 79, .22);
}

.feed-list {
  display: grid;
  gap: 1.05rem;
}

.social-post {
  scroll-margin-top: 96px;
  overflow: hidden;
  animation: feed-rise .5s ease both;
  animation-delay: calc(var(--feed-delay, 0) * 45ms);
  transition: transform .22s ease, box-shadow .22s ease;
}

.social-post:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 16px 34px rgba(16, 35, 31, .1);
}

.social-post-header {
  padding: 1.05rem 1.15rem .35rem;
}

.post-moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-left: auto;
}

.post-moderation-actions form {
  min-width: 0;
}

.post-moderation-actions .btn {
  border-radius: 999px;
}

.post-edit-panel {
  margin: 0 1.15rem 1rem;
  padding: 1rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: #f7faf8;
}

.post-edit-form .form-label {
  font-size: .85rem;
  color: #5f7369;
}

.post-author-block {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.post-author-block strong {
  font-size: .98rem;
  letter-spacing: -.01em;
}

.post-author-block > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem .4rem;
  color: var(--cf-muted);
  font-size: .84rem;
}

.post-meta-dot {
  opacity: .55;
}

.post-visibility-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: #456257;
  font-weight: 650;
}

.post-visibility-chip i {
  font-size: .78rem;
  opacity: .85;
}

.social-post-body {
  padding: .55rem 1.15rem 1rem;
  color: #1a2f29;
  font-size: 1.02rem;
  line-height: 1.58;
  white-space: normal;
}

.social-post-media {
  display: grid;
  align-items: start;
  gap: .2rem;
  margin: 0;
  padding: 0;
  background: transparent;
}

.social-post-media.media-count-1 {
  grid-template-columns: 1fr;
}

.social-post-media.media-count-2,
.social-post-media.media-count-3,
.social-post-media.media-count-4 {
  display: block;
  column-count: 2;
  column-gap: .2rem;
}

.post-media-item,
.post-media-file {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
}

.post-media-item {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 100%;
  break-inside: avoid;
  margin-bottom: .2rem;
  background: #142821;
}

.post-media-item img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 720px);
  aspect-ratio: auto;
  object-fit: contain;
  transition: transform .45s ease;
}

.social-post-media:not(.media-count-1) .post-media-item img {
  width: auto;
  max-height: min(58vh, 480px);
}

.post-media-item:hover img,
.post-media-item:focus-visible img {
  transform: scale(1.03);
}

.post-media-viewer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: rgba(4, 10, 8, .96);
}

.post-media-viewer::backdrop { background: rgba(4, 10, 8, .96); }
.post-media-viewer.is-open { position: fixed; inset: 0; z-index: 2200; display: block; }
.has-post-media-viewer { overflow: hidden; }

.post-media-viewer-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 64px 80px 48px;
}

.post-media-viewer-frame > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.post-media-viewer-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: max(.7rem, env(safe-area-inset-top)) 1rem .7rem;
  background: rgba(4, 10, 8, .72);
}

.post-media-viewer-bar span { font-size: .86rem; font-weight: 800; }
.post-media-viewer-bar button,
.post-media-viewer-nav {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.post-media-viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.post-media-viewer-nav.is-previous { left: 1rem; }
.post-media-viewer-nav.is-next { right: 1rem; }
.post-media-viewer-nav:hover,
.post-media-viewer-nav:focus-visible,
.post-media-viewer-bar button:hover,
.post-media-viewer-bar button:focus-visible { color: #fff; background: rgba(255, 255, 255, .18); }

.post-media-file {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 88px;
  margin: 0 1.15rem 1rem;
  padding: 1rem 1.1rem;
  color: var(--cf-ink);
  border: 1px solid #dce6df;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7faf8, #eef4f1);
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease;
}

.post-media-file:hover,
.post-media-file:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16, 35, 31, .08);
}

.post-media-file i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--cf-blue);
  border-radius: 12px;
  background: #e7f0f7;
  font-size: 1.25rem;
}

.post-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.15rem;
  color: var(--cf-muted);
  border-top: 1px solid #ebf0eb;
  font-size: .88rem;
}

.post-stats-reactions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  position: relative;
}

.post-stats-empty {
  color: #7a8c83;
  font-weight: 600;
}

.post-stats-comments {
  font-weight: 700;
  color: #4d6359;
  white-space: nowrap;
}

.reaction-people {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.reaction-people-summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  padding: .1rem .2rem .1rem 0;
  border: 0;
  background: transparent;
  color: #4d6359;
  font-weight: 700;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}

.reaction-people-summary:hover .reaction-people-label,
.reaction-people.is-open .reaction-people-label {
  text-decoration: underline;
  color: #243a34;
}

.reaction-people-icons {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.reaction-people-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: -.28rem;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #f4f8f5;
  box-shadow: 0 1px 2px rgba(20, 40, 30, .12);
  font-size: .78rem;
  line-height: 1;
}

.reaction-people-icon:first-child {
  margin-left: 0;
}

.reaction-people-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.reaction-people-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + .45rem);
  z-index: 40;
  width: min(320px, calc(100vw - 2rem));
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #d9e6de;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(18, 40, 28, .18);
}

.reaction-people-popover[hidden] {
  display: none !important;
}

.reaction-people-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid #ebf0eb;
  color: #243a34;
  font-size: .92rem;
}

.reaction-people-popover-head span {
  color: #6a7f75;
  font-weight: 700;
}

.reaction-people-list {
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  overflow: auto;
  max-height: 260px;
}

.reaction-people-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .9rem;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease;
}

.reaction-people-item:hover,
.reaction-people-item:focus {
  background: #f3f8f5;
  color: inherit;
}

.reaction-people-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: #243a34;
  font-size: .9rem;
}

.reaction-people-item-emoji {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.reaction-people-sm .reaction-people-summary {
  gap: .3rem;
  font-size: .8rem;
  font-weight: 650;
}

.reaction-people-sm .reaction-people-icon {
  width: 1.1rem;
  height: 1.1rem;
  font-size: .68rem;
}

.reaction-people-sm .reaction-people-popover {
  width: min(280px, calc(100vw - 2rem));
}

.reaction-pill-mini {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  min-height: 26px;
  padding: .12rem .48rem;
  color: #243a34;
  border: 1px solid #e1ebe4;
  border-radius: 999px;
  background: #f4f8f5;
  font-weight: 750;
  font-size: .82rem;
}

.reaction-bar {
  display: flex;
  align-items: center;
  padding: .35rem .7rem .55rem;
  border-top: 1px solid #ebf0eb;
}

.reaction-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reaction-trigger-form {
  margin: 0;
}

.reaction-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 42px;
  min-width: 110px;
  padding: .35rem .9rem;
  border: 0;
  border-radius: 12px;
  color: #4a5f56;
  background: transparent;
  font-weight: 750;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.reaction-trigger .reaction-emoji {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .18s ease;
}

.reaction-trigger:hover,
.reaction-trigger:focus,
.reaction-picker.is-open .reaction-trigger,
.reaction-picker:hover .reaction-trigger {
  color: var(--cf-green-dark);
  background: #edf6f1;
}

.reaction-trigger:hover .reaction-emoji,
.reaction-picker.is-open .reaction-trigger .reaction-emoji {
  transform: scale(1.12);
}

.reaction-trigger.active {
  color: var(--cf-green-dark);
  background: linear-gradient(180deg, #e8f5ee, #dff0e7);
  box-shadow: inset 0 0 0 1px rgba(31, 107, 79, .18);
}

.reaction-trigger.active .reaction-emoji {
  animation: reaction-pop .35s ease;
}

.reaction-trigger-sm {
  min-height: 30px;
  min-width: 0;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .86rem;
}

.reaction-trigger-sm .reaction-emoji {
  font-size: 1rem;
}

.reaction-count {
  font-weight: 750;
  color: #4d6359;
}

.reaction-flyout {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .4rem .45rem;
  border: 1px solid #dfe8e2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 35, 31, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.92);
  transform-origin: bottom left;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.reaction-picker:hover .reaction-flyout,
.reaction-picker:focus-within .reaction-flyout,
.reaction-picker.is-open .reaction-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.reaction-flyout form {
  margin: 0;
}

.reaction-option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: transform .15s ease, background .15s ease;
}

.reaction-option-emoji {
  font-size: 1.45rem;
  line-height: 1;
}

.reaction-option-label {
  display: none;
  font-size: .62rem;
  font-weight: 700;
  color: #4d6359;
}

.reaction-option:hover,
.reaction-option:focus,
.reaction-option.active {
  background: #edf6f1;
  transform: translateY(-6px) scale(1.28);
}

.reaction-picker-comment .reaction-flyout {
  left: 0;
}

.comments-panel {
  border-top: 1px solid #ebf0eb;
  background: linear-gradient(180deg, #f7faf8 0%, #fff 28%);
}

.comments-list {
  display: grid;
  gap: .75rem;
  padding: .9rem 1.15rem 0;
}

.comment-thread {
  display: grid;
  gap: .35rem;
}

.comment-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: start;
}

.comment-bubble {
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid #e4ece7;
  border-radius: 16px 16px 16px 6px;
  background: #fff;
  color: #1d332d;
  box-shadow: 0 4px 12px rgba(16, 35, 31, .04);
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  margin-bottom: .18rem;
  font-size: .86rem;
}

.comment-meta strong {
  letter-spacing: -.01em;
}

.comment-meta span {
  color: var(--cf-muted);
}

.comment-body {
  line-height: 1.45;
}

.comment-delete {
  align-self: center;
}

.comment-delete .btn {
  min-height: 32px;
  padding: .15rem .35rem;
  font-size: .8rem;
}

.comment-social-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
  padding-left: 42px;
  position: relative;
}

.comment-reply {
  display: grid;
  gap: .35rem;
  margin-left: 42px;
  padding-left: .85rem;
  border-left: 2px solid #d9e5dd;
}

.comment-reply-form {
  padding: .25rem 0 0 42px;
}

.comment-form {
  padding: .85rem 1.15rem 1.1rem;
}

.comment-form.comment-reply-form {
  padding: .25rem 0 0 42px;
}

.comment-form .form-control {
  min-height: 42px;
  border: 1px solid #d9e3dc;
  border-radius: 999px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.comment-form .form-control:focus {
  border-color: rgba(31, 107, 79, .4);
  box-shadow: 0 0 0 .18rem rgba(31, 107, 79, .12);
}

.comment-form .btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
}

.feed-empty-state {
  padding: 2.4rem 1.4rem;
  border: 1px dashed #c9d8cf;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.feed-empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto .85rem;
  color: var(--cf-green);
  border-radius: 16px;
  background: #e8f4ee;
  font-size: 1.45rem;
}

.feed-side-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: .9rem;
}

.feed-side-block {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.05rem;
  animation: feed-rise .55s ease both;
  animation-delay: .08s;
}

.feed-side-block h2 {
  margin: 0 0 .35rem;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.feed-side-block a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem .75rem;
  color: #263a34;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 750;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.feed-side-block a i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--cf-green);
  border-radius: 9px;
  background: #edf6f1;
  font-size: .95rem;
}

.feed-side-block a:hover,
.feed-side-block a:focus {
  color: var(--cf-green-dark);
  background: #f0f7f3;
  transform: translateX(2px);
}

.feed-role-context {
  border-left: 3px solid var(--cf-gold);
  background: color-mix(in srgb, var(--cf-surface) 94%, var(--cf-gold) 6%);
}

.feed-role-eyebrow {
  color: var(--cf-green-dark);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.feed-role-indicators {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: .35rem;
}

.feed-role-indicators a {
  display: grid;
  gap: .1rem;
  min-width: 0;
  padding: .6rem;
  border: 1px solid var(--cf-border);
  border-radius: 8px;
  background: var(--cf-surface);
}

.feed-role-indicators strong {
  color: var(--cf-green-dark);
  font-size: 1.15rem;
  line-height: 1;
}

.feed-role-indicators span {
  overflow-wrap: anywhere;
  color: var(--cf-muted);
  font-size: .72rem;
  line-height: 1.25;
}

.feed-role-actions {
  display: grid;
  gap: .15rem;
  min-height: 0;
  max-height: clamp(180px, 38vh, 360px);
  max-height: clamp(180px, 38dvh, 360px);
  padding-right: .2rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: color-mix(in srgb, var(--cf-green) 45%, transparent) transparent;
  scrollbar-width: thin;
}

.feed-role-actions:focus-visible {
  border-radius: 8px;
  outline: 3px solid color-mix(in srgb, var(--cf-green) 25%, transparent);
  outline-offset: 2px;
}

.feed-profile-progress {
  gap: .55rem;
}

.feed-completion-value {
  color: var(--cf-green-dark);
  font-size: 1.05rem;
}

.feed-profile-progress .reward-progress {
  margin: .1rem 0;
  height: 9px;
}

.feed-reward-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .2rem;
  padding-top: .7rem;
  border-top: 1px solid #e6eee8;
}

.feed-reward-mini strong {
  color: var(--cf-ink);
  font-size: .95rem;
}

.reward-profile-card {
  display: grid;
  gap: .9rem;
}

.profile-completion-card {
  display: grid;
  gap: .65rem;
}

.reward-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
}

.reward-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: .35rem .6rem;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(31, 107, 79, .2);
}

.reward-points {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

.reward-points strong {
  color: var(--cf-ink);
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1;
}

.reward-points span {
  color: var(--cf-muted);
  font-weight: 800;
}

.reward-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eee8;
}

.reward-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cf-green), var(--cf-gold));
  transition: width .6s ease;
}

@keyframes feed-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reaction-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .feed-composer,
  .social-post,
  .feed-side-block,
  .reaction-trigger.active .reaction-emoji {
    animation: none;
  }

  .social-post,
  .composer-file,
  .feed-side-block a,
  .post-media-item img {
    transition: none;
  }

  .social-post:hover {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .social-feed-layout {
    grid-template-columns: 1fr;
  }

  .feed-side-panel {
    position: static;
    order: -1;
  }

  .feed-side-block:not(.feed-profile-progress) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feed-role-context {
    grid-template-columns: 1fr !important;
  }

  .feed-side-block h2 {
    grid-column: 1 / -1;
  }

  .feed-profile-progress {
    grid-template-columns: 1fr;
  }

  .feed-profile-progress .d-flex,
  .feed-profile-progress .reward-progress,
  .feed-profile-progress p,
  .feed-profile-progress a,
  .feed-profile-progress .feed-reward-mini {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .social-post-media.media-count-2,
  .social-post-media.media-count-3,
  .social-post-media.media-count-4 {
    display: grid;
    column-count: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .post-media-item {
    margin-bottom: 0;
  }

  .post-media-item img,
  .social-post-media:not(.media-count-1) .post-media-item img {
    width: auto;
    max-width: 100%;
    max-height: min(68vh, 620px);
  }

  .shared-post-image {
    max-height: min(58vh, 440px);
  }

  .social-feed-page {
    padding-top: .85rem;
  }

  .social-feed-head,
  .admin-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .social-feed-head .btn {
    width: 100%;
  }

  .admin-page-head .btn,
  .theme-card .btn {
    width: 100%;
  }

  .theme-active-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .theme-active-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .theme-grid {
    grid-template-columns: 1fr;
  }

  .background-design-head {
    align-items: stretch;
    flex-direction: column;
  }

  .background-active-summary {
    width: 100%;
    min-width: 0;
  }

  .background-option-preview {
    height: 76px;
  }

  .feed-composer,
  .social-post,
  .feed-side-block {
    border-radius: 8px;
  }

  .composer-actions {
    grid-template-columns: 1fr;
  }

  .composer-context-row,
  .composer-advanced-grid {
    grid-template-columns: 1fr;
  }

  .composer-submit-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer-submit-group .composer-submit {
    grid-column: 1 / -1;
  }

  .composer-file,
  .composer-actions .btn {
    width: 100%;
  }

  .social-post:hover {
    transform: none;
  }

  .social-post-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    padding: .85rem .85rem .35rem;
  }

  .social-post-header > a {
    grid-column: 1;
    grid-row: 1;
  }

  .social-post-header .avatar-lg {
    width: 44px;
    height: 44px;
  }

  .social-post-header .post-author-block {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    overflow: hidden;
  }

  .post-author-block strong {
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .post-author-block > span {
    gap: .2rem .32rem;
    font-size: .78rem;
  }

  .post-purpose-row {
    padding: .45rem .85rem 0;
  }

  .social-post-body {
    padding: .55rem .85rem .9rem;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .post-stats {
    flex-flow: row wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding: .65rem .85rem;
  }

  .post-moderation-actions {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    padding-top: .55rem;
    justify-content: flex-end;
    border-top: 1px solid #edf1ee;
  }

  .post-moderation-actions form {
    width: auto;
    margin: 0;
  }

  .post-moderation-actions .btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 6px;
  }

  .post-moderation-actions .btn span {
    display: none;
  }

  .post-moderation-actions .btn i {
    margin: 0 !important;
    font-size: 1rem;
  }

  .reaction-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .1rem;
    padding: .35rem .45rem .5rem;
  }

  .reaction-bar > form,
  .reaction-bar > button,
  .reaction-bar .reaction-picker,
  .reaction-bar .reaction-trigger { width: 100%; min-width: 0; }

  .reaction-bar > form,
  .reaction-bar > button,
  .reaction-bar > .reaction-picker { margin: 0; }

  .reaction-bar .reaction-trigger {
    justify-content: center;
    gap: .25rem;
    min-height: 44px;
    padding-inline: .25rem;
    font-size: .74rem;
    white-space: nowrap;
  }

  .reaction-flyout {
    left: 50%;
    transform: translate(-50%, 8px) scale(.92);
    transform-origin: bottom center;
  }

  .reaction-picker:hover .reaction-flyout,
  .reaction-picker:focus-within .reaction-flyout,
  .reaction-picker.is-open .reaction-flyout {
    transform: translate(-50%, 0) scale(1);
  }

  .reaction-trigger {
    min-width: 96px;
  }

  .reaction-label {
    min-width: 0;
    overflow: hidden;
    font-size: .76rem;
    text-overflow: ellipsis;
  }

  .comment-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .comment-delete {
    grid-column: 2;
    justify-self: start;
    margin-top: -.25rem;
  }

  .comment-social-actions,
  .comment-form.comment-reply-form {
    padding-left: 0;
  }

  .comment-reply {
    margin-left: 1rem;
    padding-left: .6rem;
  }

  .comment-form {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 42px;
    gap: .5rem;
    padding: .75rem .85rem .9rem;
  }

  .comments-list {
    padding: .8rem .85rem 0;
  }

  body.has-mobile-tabbar .chat-dock {
    display: none;
  }

  .feed-side-block {
    grid-template-columns: 1fr;
  }

  .reward-card-head {
    flex-direction: column;
  }
}

/* ===== Mobile app experience ===== */
.mobile-tabbar {
  display: none;
}

@media (max-width: 1199.98px) {
  .site-header {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 24px rgba(16, 35, 31, .07);
  }

  .site-header .container {
    max-width: 100%;
  }

  .navbar-brand {
    min-width: 0;
  }

  .brand-logo {
    width: 46px;
    height: 36px;
  }

  .brand-name {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .96rem;
  }

  .navbar-toggler {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #d8e2dc;
    border-radius: 12px;
    background: #f6faf7;
    box-shadow: none;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(31, 107, 79, .16);
  }

  .navbar-collapse {
    margin-top: .75rem;
    padding: .85rem;
    max-height: calc(100vh - 96px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(16, 35, 31, .14);
  }

  .user-menu .dropdown-menu {
    max-height: min(62vh, 520px);
    max-height: min(62dvh, 520px);
  }

  .guest-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .guest-nav .nav-item {
    display: flex;
    min-width: 0;
  }

  .guest-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: .7rem .85rem;
    color: #243a34;
    border: 1px solid #e2ebe5;
    border-radius: 12px;
    background: #f7faf8;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
  }

  .guest-nav .nav-link.active {
    color: var(--cf-green-dark);
    border-color: #cfe3d7;
    background: #e8f3ed;
  }

  .guest-nav .guest-nav-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    border-radius: 12px;
    font-size: .92rem;
  }

  .main-nav,
  .nav-actions {
    gap: .35rem;
  }

  .main-nav .nav-link,
  .nav-actions .nav-link {
    min-height: 48px;
    padding: .75rem .85rem;
    border-radius: 12px;
    background: #f8fbf8;
  }

  .main-nav .nav-link.active,
  .nav-actions .nav-link.active {
    background: #e6f1eb;
  }

  .dropdown-menu {
    margin: .25rem 0 .55rem;
    padding: .35rem;
    border-color: #e5ece7;
    border-radius: 14px;
    box-shadow: none;
  }

  .dropdown-item {
    min-height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
  }

  body.has-mobile-tabbar {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .mobile-tabbar {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(.65rem + env(safe-area-inset-bottom));
    z-index: 1350;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .25rem;
    padding: .45rem;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(223, 230, 223, .92);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(16, 35, 31, .22);
    backdrop-filter: blur(16px);
    transition: opacity .2s ease, transform .2s ease;
  }

  .mobile-tabbar.is-hidden {
    opacity: 0;
    transform: translateY(calc(100% + 1rem));
    pointer-events: none;
  }

  .mobile-tabbar-link {
    display: grid;
    place-items: center;
    gap: .15rem;
    min-width: 0;
    min-height: 54px;
    color: #53645d;
    border-radius: 15px;
    text-decoration: none;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
  }

  .mobile-tabbar-link i {
    font-size: 1.25rem;
    line-height: 1;
  }

  .mobile-tabbar-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--cf-green), var(--cf-blue));
    box-shadow: 0 8px 18px rgba(31, 107, 79, .25);
  }

  .chat-dock {
    right: 1rem;
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 767.98px) {
  body {
    background: #f4f7f4;
  }

  main > .page-band:first-child {
    padding-top: 1.6rem;
  }

  .page-band {
    padding: 2.25rem 0;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  h1,
  .h1 {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  h2,
  .h2 {
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .hero {
    min-height: calc(100svh - 72px);
    align-items: end;
    background:
      linear-gradient(180deg, rgba(11, 28, 24, .18) 0%, rgba(11, 28, 24, .58) 46%, rgba(11, 28, 24, .9) 100%),
      url("../images/hero-school.jpg") center / cover no-repeat;
  }

  .hero-inner {
    padding: 5.25rem 0 2.25rem;
  }

  .hero h1,
  .hero .hero-rotator {
    max-width: 100%;
    font-size: clamp(1.55rem, 7.2vw, 2rem);
    line-height: 1.18;
  }

  .hero-rotator-viewport {
    min-height: 3.6em;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero .hero-lead {
    margin-top: .85rem !important;
    font-size: .86rem;
    line-height: 1.5;
  }

  .hero .d-flex.flex-wrap.gap-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .65rem !important;
    margin-top: 1.15rem !important;
  }

  .hero .btn,
  .cta-band .btn,
  .admin-header-actions .btn,
  .card-body > .btn,
  .card-body > .d-flex .btn {
    min-height: 46px;
  }

  .hero .btn {
    width: 100%;
    justify-content: center;
    padding-left: .65rem;
    padding-right: .65rem;
    font-size: .9rem;
  }

  .hero .metric {
    padding: .85rem .7rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(11, 28, 24, .12);
  }

  .hero .metric strong {
    font-size: 1.35rem;
  }

  .hero .row.g-3.mt-5 {
    margin-top: 1.5rem !important;
  }

  .cta-band {
    padding: 2.75rem 0;
  }

  .cta-band .d-flex.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .65rem !important;
  }

  .cta-band .btn {
    width: 100%;
    justify-content: center;
    font-size: .9rem;
  }

  .section-title {
    margin-bottom: 1.25rem;
  }

  .section-title h2 {
    font-size: 1.7rem;
  }

  .card,
  .stat-tile,
  .step-card,
  .testimonial-card,
  .empty-state {
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 35, 31, .06);
  }

  .card-body {
    padding: 1rem;
  }

  .row.g-4 {
    --bs-gutter-y: 1rem;
  }

  .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
  }

  .d-flex.flex-wrap.gap-2 > .btn,
  .admin-header-actions .btn {
    flex: 1 1 100%;
  }

  .form-control,
  .form-select {
    min-height: 46px;
    font-size: 1rem;
  }

  textarea.form-control {
    min-height: 110px;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    background: transparent;
  }

  .table-responsive table:not(.table-card-mobile) {
    min-width: 720px;
  }

  .table-card-mobile tr {
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(16, 35, 31, .05);
  }

  .member-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-actions .icon-button {
    width: 100%;
  }

  .profile-head {
    margin-top: -1rem;
  }

  .profile-definition {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .messenger-page {
    min-height: calc(100svh - 150px);
    padding: .75rem 0;
  }

  .messenger-shell {
    min-height: calc(100svh - 165px);
    border-radius: 16px;
  }

  .messenger-sidebar {
    max-height: 34svh;
  }

  .chat-panel {
    min-height: 50svh;
  }

  .composer-row {
    grid-template-columns: 42px 42px minmax(0, 1fr) 46px;
  }

  .message-bubble {
    max-width: 92%;
  }

  .chat-dock-panel {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
    width: auto;
    height: min(68svh, 560px);
    border-radius: 18px;
  }

  .cookie-banner {
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 575.98px) {
  .brand-name {
    max-width: 36vw;
  }

  .nav-quick-actions {
    margin-right: .35rem !important;
  }

  .logout-modal .modal-dialog {
    margin: .75rem;
  }

  .logout-modal .modal-content {
    border-radius: 18px;
  }

  .logout-modal-body {
    padding: 2rem 1.15rem 1.1rem;
  }

  .logout-modal-symbol {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 1.6rem;
  }

  .logout-modal-body h2 {
    font-size: 1.2rem;
  }

  .logout-modal-actions {
    grid-template-columns: 1fr;
    padding: .9rem 1.15rem 1.15rem;
  }

  .notification-modal .modal-dialog {
    margin: 0;
  }

  .notification-modal .modal-content {
    max-height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .notification-modal-head {
    padding: calc(.9rem + env(safe-area-inset-top)) 1rem .9rem;
  }

  .notification-modal-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .notification-modal-row {
    min-height: 80px;
    padding: .8rem 1rem;
  }

  .notification-modal-row .notification-icon {
    width: 36px;
    height: 36px;
  }

  .notification-modal-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  }

  .notification-modal-foot form,
  .notification-modal-foot .btn {
    width: 100%;
    min-height: 44px;
  }

  .hero-eyebrow {
    white-space: normal;
  }

  .notification-menu,
  .user-menu .dropdown-menu {
    width: 100%;
    max-width: none;
  }

  .mobile-tabbar {
    left: .5rem;
    right: .5rem;
    border-radius: 18px;
  }

  .mobile-tabbar-link {
    min-height: 52px;
    font-size: .62rem;
  }

  .mobile-tabbar-link i {
    font-size: 1.15rem;
  }

  .chat-dock-toggle {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }
}

/* Promotions management */
.promotion-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.promotion-edit-thumb {
  max-width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.promotion-card {
  overflow: hidden;
}

.promotion-card .card-img-top,
.promotion-card-fallback {
  height: 160px;
  object-fit: cover;
  background: linear-gradient(135deg, color-mix(in srgb, var(--promotion-color, #1f6b4f) 75%, white), var(--promotion-color, #1f6b4f));
}

.promotion-card-accent {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--promotion-color, #1f6b4f);
  margin-bottom: 0.75rem;
}

.promotion-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  background-color: var(--promotion-color, #1f6b4f);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.promotion-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.62));
}

.promotion-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.promotion-hero-copy h1 {
  color: inherit;
}

.promotion-manage-card {
  border-top: 4px solid var(--promotion-color, #1f6b4f);
}

@media (max-width: 767.98px) {
  .promotion-hero {
    min-height: 220px;
  }

  .promotion-hero-inner {
    padding-top: 3rem;
  }
}

/* Feed composer enrichment */
.composer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.composer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d6e2da;
  border-radius: 10px;
  background: #f7faf8;
  color: var(--cf-green-dark);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.composer-tool:hover {
  background: #edf6f1;
  border-color: rgba(31, 107, 79, .35);
  transform: translateY(-1px);
}

.composer-color-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .2rem .35rem;
  border: 1px solid #d6e2da;
  border-radius: 999px;
  background: #f7faf8;
}

.composer-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(16, 35, 31, .18);
  background: var(--swatch, #111827);
  padding: 0;
}

.composer-panel {
  padding: .7rem;
  border: 1px solid #e2ebe5;
  border-radius: 14px;
  background: #f8fbf9;
}

.composer-emoji-grid,
.composer-mood-grid {
  display: grid;
  gap: .4rem;
}

.composer-emoji-grid {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

.composer-mood-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.composer-emoji-grid button,
.composer-mood-option {
  border: 1px solid #d9e5dd;
  border-radius: 12px;
  background: #fff;
  min-height: 40px;
  transition: background .15s ease, border-color .15s ease;
}

.composer-emoji-grid button {
  font-size: 1.25rem;
}

.composer-mood-option {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .6rem;
  text-align: left;
  font-size: .86rem;
}

.composer-mood-option.is-active,
.composer-emoji-grid button:hover,
.composer-mood-option:hover {
  background: #edf6f1;
  border-color: rgba(31, 107, 79, .4);
}

.composer-location-row {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.composer-location-row > i {
  color: var(--cf-green-dark);
}

.composer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.composer-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: #edf6f1;
  color: var(--cf-green-dark);
  font-size: .86rem;
  font-weight: 600;
}

.composer-editor {
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}

.composer-editor.is-empty::before {
  content: attr(data-placeholder);
  color: #7a8b83;
  pointer-events: none;
}

.composer-editor b,
.composer-editor strong,
.social-post-body b,
.social-post-body strong {
  font-weight: 700;
}

.post-mood {
  font-weight: 500;
  color: #4b6358;
  font-size: .92rem;
}

.post-location {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

@media (max-width: 767.98px) {
  .composer-color-group {
    width: 100%;
    justify-content: space-between;
  }

  .composer-mood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.composer-media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .65rem;
}

.composer-media-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #d6e2da;
  background: #edf3ef;
}

.composer-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-media-item.is-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .7rem;
  text-align: center;
  color: var(--cf-green-dark);
}

.composer-media-item.is-file i {
  font-size: 1.5rem;
}

.composer-media-item.is-file span {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.composer-media-item.is-file small {
  font-size: .68rem;
  color: #6b7f76;
}

.composer-media-remove {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 35, 31, .72);
  color: #fff;
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
}

.composer-media-remove:hover {
  background: rgba(16, 35, 31, .9);
}

@media (max-width: 575.98px) {
  .composer-media-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.composer-audience {
  display: grid;
  gap: .45rem;
  min-width: 0;
}

.composer-audience .composer-visibility,
.composer-audience .composer-scope {
  min-width: 0;
}

@media (min-width: 768px) {
  .composer-actions {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto;
  }
}

.mention,
.mention-chip {
  color: var(--cf-green-dark, #1f6b4f);
  font-weight: 700;
  text-decoration: none;
}

.mention:hover {
  text-decoration: underline;
}

.mention-everyone,
.mention-chip-everyone {
  color: #0f4c81;
  background: #e8f1fb;
}

.mention-chip {
  display: inline-block;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: #edf6f1;
  white-space: nowrap;
}

.mention-chip-everyone {
  color: #0f4c81;
  background: #e8f1fb;
}

.mention-menu {
  position: fixed;
  z-index: 1080;
  width: min(280px, calc(100vw - 16px));
  max-height: 240px;
  overflow: auto;
  padding: .35rem;
  border: 1px solid #d6e2da;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 35, 31, .14);
}

.mention-menu-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: .45rem .55rem;
  text-align: left;
  color: inherit;
}

.mention-menu-item img,
.mention-menu-everyone-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}

.mention-menu-everyone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f1fb;
  font-size: .95rem;
}

.mention-menu-item.is-everyone span {
  font-weight: 700;
}

.mention-menu-item.is-active,
.mention-menu-item:hover {
  background: #f2f7f4;
}

.mention-menu-empty {
  padding: .7rem;
  color: #6b7f76;
  font-size: .9rem;
}

/* Profil — photos style Facebook */
.profile-cover-wrap {
  position: relative;
  margin-bottom: -48px;
}

.profile-cover-wrap .cover {
  min-height: 280px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, #1f4d3a 0%, #2f6b52 45%, #5a8f74 100%);
}

.profile-cover-wrap .cover-empty {
  background:
    linear-gradient(180deg, rgba(15, 30, 24, .08), rgba(15, 30, 24, .28)),
    linear-gradient(135deg, #1f4d3a 0%, #2f6b52 45%, #5a8f74 100%);
}

.profile-head {
  position: relative;
  z-index: 1;
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}

.profile-avatar-wrap {
  position: relative;
  margin-top: -72px;
}

.profile-avatar-wrap .avatar-lg {
  width: 120px;
  height: 120px;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.profile-photo-form {
  margin: 0;
}

.profile-cover-form {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
}

.profile-cover-btn {
  background: rgba(255, 255, 255, .95);
}

.profile-avatar-form {
  position: absolute;
  right: 0;
  bottom: 4px;
  z-index: 2;
}

.profile-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: #1f2d28;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.profile-photo-btn-round {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.profile-photo-btn:hover {
  background: #fff;
}

@media (max-width: 575.98px) {
  .profile-cover-wrap .cover {
    min-height: 180px;
  }

  .profile-cover-form {
    right: .65rem;
    bottom: .65rem;
  }

  .profile-cover-btn span {
    display: none;
  }

  .profile-cover-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

.profile-edit-cover-preview {
  width: 100%;
  height: 96px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #d8e4de;
}

.person-name-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.person-name-link:hover {
  color: var(--cf-green, #1f6b4f);
  text-decoration: underline;
}

.profile-wall-composer .composer-actions {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(170px, 1fr) auto;
  align-items: center;
  gap: .75rem;
}

.profile-composer-advanced-grid { grid-template-columns: minmax(160px, .7fr) minmax(0, 1.3fr); }

.profile-wall-feed {
  display: grid;
  gap: 1rem;
}

.profile-wall-post { margin-bottom: 0 !important; }

.profile-wall-post .reaction-bar {
  display: flex;
  align-items: stretch;
  gap: .15rem;
}

.profile-wall-post .reaction-bar > form,
.profile-wall-post .reaction-bar > button,
.profile-wall-post .reaction-bar > .reaction-picker {
  flex: 1 1 0;
  min-width: 0;
}

.profile-wall-post .reaction-bar .reaction-trigger {
  width: 100%;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .profile-wall-composer .composer-actions,
  .profile-composer-advanced-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-wall-post .reaction-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .profile-wall-post .reaction-label { font-size: .75rem; }
  .profile-wall-post .reaction-trigger { padding-inline: .3rem; }
  .post-media-viewer-frame { padding: 58px .5rem max(.5rem, env(safe-area-inset-bottom)); }
  .post-media-viewer-nav { top: auto; bottom: max(.85rem, env(safe-area-inset-bottom)); }
  .post-media-viewer-nav.is-previous { left: calc(50% - 54px); }
  .post-media-viewer-nav.is-next { right: calc(50% - 54px); }
}

@media (max-width: 359.98px) {
  .reaction-bar .reaction-trigger > span:not(.reaction-emoji) { display: none; }
  .reaction-bar .reaction-trigger { gap: 0; }
}

/* Aperçu / validation photo profil & couverture */
.profile-photo-preview {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.profile-photo-preview[hidden] {
  display: none !important;
}

.profile-photo-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 18, 15, .72);
  cursor: zoom-out;
}

.profile-photo-preview-dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.profile-photo-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.profile-photo-preview-close {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #edf2ef;
  color: #24352e;
}

.profile-photo-preview-body {
  display: grid;
  gap: .75rem;
  min-height: 0;
}

.profile-photo-preview-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #0f1a16;
  max-height: min(58vh, 520px);
}

.profile-photo-preview-frame.is-avatar {
  width: min(360px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
}

.profile-photo-preview-frame.is-cover {
  width: 100%;
  aspect-ratio: 16 / 6;
}

.profile-photo-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

body.profile-photo-preview-open {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .profile-photo-preview-actions {
    flex-direction: column-reverse;
  }

  .profile-photo-preview-actions .btn {
    width: 100%;
  }

  .profile-photo-preview-frame.is-cover {
    aspect-ratio: 16 / 9;
  }
}

/* Albums */
.album-card-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.album-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.album-photo-card {
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  overflow: hidden;
}

.album-photo-frame {
  position: relative;
  aspect-ratio: 1;
  background: #edf2ee;
  overflow: hidden;
}

.album-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.album-photo-no-download {
  user-select: none;
}

.album-photo-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .75rem;
}

.album-photo-badge-danger {
  background: rgba(180, 40, 40, .85);
}

.album-photo-meta {
  padding: .75rem;
}

.album-photo-reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* Visionneuse album type galerie */
.album-viewer {
  margin-bottom: 1.5rem;
}

.album-viewer-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  min-height: 420px;
  padding: 1.25rem 1rem;
  border-radius: 10px;
  background: #1b2430;
}

.album-viewer-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  max-height: 70vh;
}

.album-viewer-main img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}

.album-viewer-main img.album-photo-zoomable {
  cursor: zoom-in;
}

.album-viewer-nav {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #1f3a5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  z-index: 2;
}

.album-viewer-nav:hover,
.album-viewer-nav:focus {
  background: #f3f6fb;
  color: #0f2744;
}

.album-viewer-nav:disabled {
  opacity: .35;
  cursor: default;
}

.album-viewer-status {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .25rem .55rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .8rem;
}

.album-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: .85rem;
}

.album-reaction-picker .reaction-trigger {
  min-height: 2.4rem;
}

.album-viewer-reaction-count {
  color: #5b6b63;
  font-size: .9rem;
}

.album-like-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  border-radius: 999px;
  padding: .45rem .95rem;
  background: #e11d48;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}

.album-like-btn.is-active,
.album-like-btn:hover {
  background: #be123c;
}

.album-viewer-caption {
  flex: 1 1 180px;
  color: #44584f;
}

.album-viewer-comments {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(55, 78, 68, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.album-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.album-comments-list {
  display: grid;
  gap: .85rem;
}

.album-comment-form {
  align-items: flex-start;
}

.album-comment-compose {
  flex: 1;
  display: grid;
  gap: .45rem;
}

.album-comment-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}

.album-emoji-tray {
  display: none;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .35rem;
  border: 1px solid rgba(55, 78, 68, .12);
  border-radius: 10px;
  background: #f7faf8;
}

.album-emoji-tray.is-open {
  display: flex;
}

.album-emoji-tray button {
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 1.15rem;
  line-height: 1;
  padding: .2rem .3rem;
}

.album-emoji-tray button:hover {
  background: rgba(55, 78, 68, .08);
}

.album-viewer-counter {
  margin-left: auto;
  color: #6b7f76;
  font-size: .9rem;
}

.album-viewer-thumbs {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .85rem 0 .25rem;
  scroll-snap-type: x mandatory;
}

.album-viewer-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 68px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #edf2ee;
  scroll-snap-align: start;
}

.album-viewer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.album-viewer-thumb.is-active {
  border-color: #e67e22;
}

.album-viewer-thumb:hover {
  border-color: #f0a35a;
}

@media (max-width: 767.98px) {
  .album-viewer-stage {
    grid-template-columns: 1fr;
    min-height: 280px;
    padding: .85rem .65rem 3.5rem;
  }

  .album-viewer-main {
    min-height: 240px;
    max-height: 55vh;
  }

  .album-viewer-main img {
    max-height: 55vh;
  }

  .album-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }

  .album-viewer-prev { left: .5rem; }
  .album-viewer-next { right: .5rem; }
}

.album-upload-queue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}

.album-upload-item {
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.album-upload-preview {
  aspect-ratio: 1;
  background: #edf2ee;
  position: relative;
}

.album-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-upload-body {
  padding: .65rem .7rem .75rem;
}

.album-upload-name {
  display: block;
  font-size: .8rem;
  color: #44584f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .45rem;
}

.album-upload-progress {
  height: .45rem;
  border-radius: 999px;
  background: #e5eee8;
  overflow: hidden;
}

.album-upload-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cf-green), #3d9a72);
  transition: width .15s ease;
}

.album-upload-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .4rem;
  font-size: .75rem;
  color: #6b7f76;
}

.album-upload-item.is-done .album-upload-progress > span {
  background: #2f8f63;
}

.album-upload-item.is-error .album-upload-progress > span {
  background: #c0392b;
  width: 100%;
}

.album-upload-item.is-error .album-upload-meta {
  color: #c0392b;
}

.album-caption-form .form-label {
  color: #5f7369;
}

.album-reaction-summary {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .85rem;
  color: #5f7369;
}

.moderation-album-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Champ mot de passe avec bouton afficher/masquer */
.password-field {
  position: relative;
}

.password-field .form-control {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #5f7369;
}

.password-toggle:hover,
.password-toggle:focus {
  background: #edf6f1;
  color: var(--cf-green);
}

/* ===== Visionneuse photo de profil ===== */
.avatar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.avatar-lightbox[hidden] {
  display: none !important;
}

.avatar-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(12, 22, 18, .78);
  cursor: zoom-out;
}

.avatar-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 560px);
  max-height: min(88vh, 560px);
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: #0f1a16;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: avatar-lightbox-in .28s ease both;
}

.avatar-lightbox-dialog.is-photo {
  max-width: min(96vw, 1100px);
  max-height: min(92vh, 900px);
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: 12px;
  background: #0b1210;
}

.avatar-lightbox-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-lightbox-dialog.is-photo .avatar-lightbox-image {
  width: auto;
  height: auto;
  max-width: min(96vw, 1100px);
  max-height: min(92vh, 900px);
  object-fit: contain;
}

.avatar-lightbox-close {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1rem;
}

.avatar-lightbox-close:hover,
.avatar-lightbox-close:focus {
  background: rgba(0, 0, 0, .75);
}

body.avatar-lightbox-open {
  overflow: hidden;
}

@keyframes avatar-lightbox-in {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-lightbox-dialog {
    animation: none;
  }
}

/* ===== Appel audio natif Clairef’Alumni (WebRTC) ===== */
.audio-call-body {
  margin: 0;
  min-height: 100vh;
  background: #0c1a16;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
}

.audio-call-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.audio-call-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #174c3c, #1f6b4f 55%, #275d82);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.audio-call-bar-copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.audio-call-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .9;
}

.audio-call-bar-copy strong {
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-call-hint {
  font-size: .82rem;
  opacity: .78;
}

.audio-call-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.audio-call-mute,
.audio-call-leave {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.audio-call-mute {
  background: rgba(255, 255, 255, .16);
}

.audio-call-mute.is-muted {
  background: rgba(201, 146, 46, .95);
  color: #111;
}

.audio-call-leave {
  background: rgba(182, 87, 69, .95);
}

.audio-call-stage {
  position: relative;
  min-height: 0;
  padding: 1.25rem;
  background:
    radial-gradient(circle at top, rgba(31, 107, 79, .28), transparent 45%),
    #0c1a16;
}

.audio-call-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  align-content: start;
  max-width: 960px;
  margin: 0 auto;
}

.audio-call-tile {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}

.audio-call-tile.is-self {
  background: rgba(31, 107, 79, .28);
  border-color: rgba(201, 146, 46, .45);
}

.audio-call-tile.is-muted {
  opacity: .82;
}

.audio-call-tile img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a2e28;
  border: 2px solid rgba(255, 255, 255, .2);
}

.audio-call-tile-meta {
  display: grid;
  gap: .2rem;
  min-width: 0;
  width: 100%;
}

.audio-call-tile-meta strong {
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-call-tile-meta span {
  font-size: .8rem;
  opacity: .75;
}

.audio-call-loading,
.audio-call-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .75rem;
  padding: 2rem;
  text-align: center;
  background: #0c1a16;
  z-index: 2;
}

.audio-call-loading .spinner-border {
  width: 2.4rem;
  height: 2.4rem;
  border: .25rem solid rgba(201, 146, 46, .25);
  border-top-color: #c9922e;
  border-radius: 50%;
  animation: audioCallSpin .7s linear infinite;
}

@keyframes audioCallSpin {
  to { transform: rotate(360deg); }
}

.audio-call-error i {
  font-size: 2rem;
  color: #c9922e;
}

.audio-call-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
}

.audio-call-error .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.audio-call-error .btn-primary {
  background: #1f6b4f;
  color: #fff;
}

.audio-call-error .btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
}

@media (max-width: 767.98px) {
  .chat-header-actions .icon-button {
    width: 36px;
    height: 36px;
  }

  .audio-call-bar {
    padding: .75rem;
  }

  .audio-call-stage {
    padding: 1rem;
  }
}

/* Pôle Orientation */
.orientation-hub {
  min-height: 70vh;
}

.orientation-heading,
.orientation-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.orientation-heading {
  margin-bottom: 1.25rem;
}

.orientation-heading h1 {
  margin: .2rem 0 .35rem;
}

.orientation-heading p,
.orientation-section-heading > span {
  margin: 0;
  color: var(--cf-muted);
}

.orientation-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.orientation-tabs .nav-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .45rem;
}

.orientation-tabs .tab-count {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 .3rem;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cf-green) 12%, var(--cf-surface));
  font-size: .7rem;
  font-weight: 800;
}

.orientation-tabs .active .tab-count {
  background: rgba(255, 255, 255, .2);
}

.orientation-section-heading {
  align-items: end;
  margin-bottom: 1rem;
}

.orientation-section-heading h2 {
  margin: .15rem 0 0;
  font-size: 1.35rem;
}

.orientation-section-heading a {
  color: var(--cf-green);
  font-weight: 700;
  text-decoration: none;
}

.orientation-recommended {
  margin-bottom: 2.25rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--cf-gold) 35%, var(--cf-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cf-gold) 6%, var(--cf-surface));
}

.orientation-recommended-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.orientation-recommended-list > a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: .75rem;
  min-height: 68px;
  padding: .65rem .75rem;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-surface);
  color: var(--cf-ink);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.orientation-recommended-list > a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cf-green) 45%, var(--cf-line));
  box-shadow: var(--cf-shadow);
}

.orientation-recommended-list > a > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.orientation-recommended-list strong,
.orientation-recommended-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-recommended-list small {
  color: var(--cf-muted);
}

.orientation-score {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cf-green) 13%, var(--cf-surface));
  color: var(--cf-green);
  font-size: .8rem;
  font-weight: 800;
}

.orientation-list-section {
  min-width: 0;
}

.orientation-question-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: .9rem 1rem;
  border-left: 3px solid var(--cf-blue);
  background: color-mix(in srgb, var(--cf-blue) 6%, var(--cf-surface));
}

.orientation-question-prompt > div,
.orientation-question-prompt > span,
.orientation-question-prompt > div > span {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.orientation-question-prompt > div > i {
  color: var(--cf-blue);
  font-size: 1.35rem;
}

.orientation-question-prompt > div > span {
  align-items: flex-start;
  flex-direction: column;
  gap: .1rem;
}

.orientation-question-prompt small {
  color: var(--cf-muted);
}

.orientation-filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: .6rem;
  margin-bottom: 1.25rem;
}

.orientation-filters .filter-search {
  position: relative;
  display: block;
}

.orientation-filters .filter-search > i {
  position: absolute;
  top: 50%;
  left: .8rem;
  z-index: 1;
  color: var(--cf-muted);
  transform: translateY(-50%);
}

.orientation-filters .filter-search input {
  padding-left: 2.35rem;
}

.orientation-filters .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.orientation-testimonial-filters {
  grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(150px, 1fr)) auto;
}

.orientation-resource-grid,
.orientation-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.orientation-resource-card,
.orientation-testimonial-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
  box-shadow: 0 5px 18px rgba(16, 35, 31, .05);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.orientation-resource-card:hover,
.orientation-testimonial-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cf-green) 32%, var(--cf-line));
  box-shadow: var(--cf-shadow);
}

.orientation-resource-media {
  position: relative;
  display: grid;
  height: 150px;
  flex: 0 0 150px;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--cf-blue) 10%, var(--cf-paper));
}

.orientation-resource-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orientation-resource-media > i {
  color: var(--cf-blue);
  font-size: 2.4rem;
}

.orientation-resource-media form {
  position: absolute;
  top: .6rem;
  right: .6rem;
}

.orientation-resource-media .icon-button,
.orientation-testimonial-card .icon-button {
  width: 36px;
  height: 36px;
  background: var(--cf-surface);
  box-shadow: 0 3px 12px rgba(16, 35, 31, .12);
}

.orientation-resource-media .is-bookmarked,
.orientation-testimonial-card .is-bookmarked {
  color: var(--cf-green);
}

.orientation-resource-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
}

.orientation-card-badges,
.orientation-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
}

.orientation-card-badges {
  min-height: 26px;
}

.orientation-verified,
.orientation-match {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .73rem;
  font-weight: 750;
}

.orientation-verified {
  color: var(--cf-green);
}

.orientation-match {
  color: var(--cf-blue);
}

.orientation-resource-body h3,
.orientation-testimonial-card h3 {
  margin: .75rem 0 .45rem;
  font-size: 1.02rem;
  line-height: 1.4;
}

.orientation-resource-body h3 a,
.orientation-testimonial-card h3 a {
  color: var(--cf-ink);
  text-decoration: none;
}

.orientation-resource-body h3 a:hover,
.orientation-testimonial-card h3 a:hover {
  color: var(--cf-green);
}

.orientation-resource-body > p {
  flex: 1;
  margin-bottom: .9rem;
  color: var(--cf-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.orientation-card-meta {
  color: var(--cf-muted);
  font-size: .78rem;
}

.orientation-card-meta span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .25rem;
}

.orientation-resource-card > footer,
.orientation-testimonial-card > footer {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--cf-line);
}

.orientation-resource-card > footer > a,
.orientation-testimonial-card > footer > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  color: var(--cf-green);
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
}

.orientation-card-date,
.orientation-testimonial-card > footer > span {
  min-width: 0;
  overflow: hidden;
  color: var(--cf-muted);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-progress {
  display: grid;
  min-width: 120px;
  flex: 1;
  gap: .35rem;
}

.orientation-progress > span {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: var(--cf-muted);
  font-size: .72rem;
}

.orientation-progress > span strong {
  color: var(--cf-ink);
}

.orientation-progress > div {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cf-line) 75%, var(--cf-surface));
}

.orientation-progress > div > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cf-green);
}

.orientation-progress.large {
  margin-bottom: 1rem;
}

.orientation-progress.large > div {
  height: 8px;
}

.orientation-testimonial-card {
  padding: 1rem;
}

.orientation-testimonial-card > header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: .65rem;
}

.orientation-testimonial-card > header > div {
  display: grid;
  min-width: 0;
}

.orientation-testimonial-card > header span {
  color: var(--cf-muted);
  font-size: .72rem;
}

.orientation-testimonial-card > header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-testimonial-card blockquote {
  min-height: 96px;
  margin: 1rem 0 .35rem;
  color: var(--cf-ink);
  font-size: .93rem;
  line-height: 1.65;
}

.orientation-testimonial-card > footer {
  min-height: 48px;
  margin: 1rem -1rem -1rem;
}

.orientation-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  gap: 2rem;
  align-items: start;
}

.orientation-deadline-list,
.orientation-event-list {
  display: grid;
  gap: .7rem;
}

.orientation-deadline {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) minmax(190px, auto);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
}

.orientation-deadline > time {
  display: grid;
  width: 60px;
  height: 64px;
  place-content: center;
  text-align: center;
  border-left: 3px solid var(--cf-gold);
  background: color-mix(in srgb, var(--cf-gold) 8%, var(--cf-paper));
}

.orientation-deadline > time strong {
  font-size: 1.35rem;
  line-height: 1;
}

.orientation-deadline > time span {
  margin-top: .2rem;
  color: var(--cf-muted);
  font-size: .7rem;
  font-weight: 750;
}

.orientation-deadline-body {
  min-width: 0;
}

.orientation-deadline-body h3 {
  margin: .45rem 0 .3rem;
  font-size: 1rem;
}

.orientation-deadline-body p {
  margin: 0 0 .5rem;
  color: var(--cf-muted);
  font-size: .86rem;
}

.orientation-deadline-actions {
  display: flex;
  min-width: 190px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}

.orientation-reminder-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 38px;
  gap: .35rem;
}

.orientation-reminder-form .btn {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
}

.orientation-reminder-set {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--cf-green);
  font-size: .78rem;
  font-weight: 750;
}

.orientation-inline-report {
  position: relative;
}

.orientation-inline-report > summary,
.orientation-report > summary {
  color: var(--cf-muted);
  cursor: pointer;
  list-style: none;
}

.orientation-inline-report > summary::-webkit-details-marker,
.orientation-report > summary::-webkit-details-marker {
  display: none;
}

.orientation-inline-report > form {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 5;
  width: 240px;
  padding: .75rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
  box-shadow: var(--cf-shadow);
}

.orientation-event-list > a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  gap: .65rem;
  align-items: center;
  min-height: 64px;
  padding: .75rem;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-surface);
  color: var(--cf-ink);
  text-decoration: none;
}

.orientation-event-list > a:hover {
  border-color: var(--cf-green);
}

.orientation-event-list time {
  color: var(--cf-gold);
  font-weight: 800;
}

.orientation-event-list > a > span {
  display: grid;
  min-width: 0;
}

.orientation-event-list strong,
.orientation-event-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-event-list small {
  color: var(--cf-muted);
}

.orientation-contribution-list {
  display: grid;
  gap: .75rem;
  max-width: 1040px;
}

.orientation-contribution {
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
}

.orientation-contribution > summary {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.orientation-contribution > summary::-webkit-details-marker {
  display: none;
}

.orientation-contribution > summary > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  column-gap: .75rem;
}

.orientation-contribution > summary > span > i {
  grid-row: span 2;
  color: var(--cf-green);
  font-size: 1.35rem;
}

.orientation-contribution > summary small {
  color: var(--cf-muted);
}

.orientation-contribution[open] > summary > .bi-chevron-down {
  transform: rotate(180deg);
}

.orientation-contribution-form {
  padding: 1.15rem;
  border-top: 1px solid var(--cf-line);
  background: color-mix(in srgb, var(--cf-paper) 58%, var(--cf-surface));
}

.orientation-detail-page .back-link {
  margin-bottom: 1.25rem;
}

.orientation-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 32%);
  gap: 2rem;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-line);
}

.orientation-detail-header > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  object-fit: cover;
}

.orientation-detail-copy h1,
.orientation-testimonial-hero h1 {
  margin: .65rem 0 .75rem;
  line-height: 1.18;
}

.orientation-detail-copy > p {
  max-width: 780px;
  color: var(--cf-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.orientation-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}

.orientation-detail-content,
.orientation-detail-actions {
  display: grid;
  gap: 1.75rem;
}

.orientation-detail-content > section {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-line);
}

.orientation-detail-content h2,
.orientation-detail-actions h2 {
  margin: 0 0 .85rem;
  font-size: 1.05rem;
}

.orientation-detail-content .rich-text {
  line-height: 1.75;
}

.orientation-detail-actions > section {
  padding: 1rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
}

.orientation-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1.5rem;
  margin: 0;
}

.orientation-detail-meta > div {
  padding-top: .65rem;
  border-top: 1px solid var(--cf-line);
}

.orientation-detail-meta dt {
  color: var(--cf-muted);
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.orientation-detail-meta dd {
  margin: .2rem 0 0;
}

.orientation-related-list {
  display: grid;
  gap: .5rem;
}

.orientation-related-list > a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--cf-line);
  color: var(--cf-ink);
  text-decoration: none;
}

.orientation-related-list > a > span {
  display: grid;
  min-width: 0;
}

.orientation-related-list strong,
.orientation-related-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-related-list small {
  color: var(--cf-muted);
}

.orientation-match-reasons ul {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orientation-match-reasons li {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  color: var(--cf-muted);
  font-size: .84rem;
}

.orientation-match-reasons li i {
  color: var(--cf-green);
}

.orientation-report {
  padding: .25rem 0;
}

.orientation-report > summary {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

.orientation-report > form {
  margin-top: .7rem;
}

.orientation-testimonial-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-line);
}

.orientation-testimonial-hero .avatar {
  width: 72px;
  height: 72px;
}

.orientation-testimonial-hero p {
  margin: 0;
  color: var(--cf-muted);
}

.orientation-story {
  position: relative;
  padding-left: 2.4rem;
}

.orientation-story > i {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cf-gold);
  font-size: 1.8rem;
}

.moderation-orientation-column {
  height: 100%;
  padding: .9rem;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
}

.moderation-orientation-column > h3 {
  margin-bottom: .75rem;
}

.moderation-orientation-column > h3 i {
  color: var(--cf-green);
}

.moderation-orientation-item {
  padding: .8rem 0;
  border-top: 1px solid var(--cf-line);
}

.moderation-orientation-item p {
  margin: .35rem 0;
  color: var(--cf-muted);
  font-size: .82rem;
}

.moderation-orientation-item small {
  color: var(--cf-muted);
}

@media (max-width: 1199.98px) {
  .orientation-resource-grid,
  .orientation-testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orientation-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .orientation-filters .filter-search {
    grid-column: span 4;
  }

  .orientation-deadline {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .orientation-deadline-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 991.98px) {
  .orientation-calendar-layout,
  .orientation-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .orientation-calendar-layout {
    gap: 2.5rem;
  }

  .orientation-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orientation-report {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .orientation-heading {
    align-items: center;
  }

  .orientation-heading p {
    max-width: 32ch;
  }

  .orientation-heading .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 0;
  }

  .orientation-heading .btn i {
    margin: 0 !important;
    font-size: 1rem;
  }

  .orientation-tabs {
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .45rem;
  }

  .orientation-recommended {
    padding: 1rem;
  }

  .orientation-recommended-list,
  .orientation-resource-grid,
  .orientation-testimonial-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .orientation-question-prompt {
    align-items: stretch;
    flex-direction: column;
  }

  .orientation-question-prompt > span {
    flex-wrap: wrap;
  }

  .orientation-filters {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .orientation-filters .filter-search {
    grid-column: 1 / -1;
  }

  .orientation-filters select,
  .orientation-filters > input {
    grid-column: 1 / -1;
  }

  .orientation-filters .btn {
    grid-column: 2;
  }

  .orientation-filters .btn span {
    display: none;
  }

  .orientation-resource-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .orientation-resource-media {
    height: 100%;
    min-height: 166px;
  }

  .orientation-resource-card > footer {
    grid-column: 1 / -1;
  }

  .orientation-resource-body {
    padding: .85rem;
  }

  .orientation-resource-body > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .orientation-resource-body .orientation-card-meta span:first-child {
    display: none;
  }

  .orientation-deadline {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: .75rem;
    padding: .85rem;
  }

  .orientation-deadline > time {
    width: 50px;
    height: 58px;
  }

  .orientation-deadline-actions {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .orientation-reminder-form {
    flex: 1;
    min-width: 220px;
  }

  .orientation-detail-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .orientation-detail-header > img {
    grid-row: 1;
  }

  .orientation-detail-actions,
  .orientation-detail-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .orientation-testimonial-hero {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .orientation-testimonial-hero .avatar {
    width: 56px;
    height: 56px;
  }

  .orientation-testimonial-hero > form {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479.98px) {
  .orientation-recommended-list > a {
    grid-template-columns: 42px minmax(0, 1fr) 16px;
  }

  .orientation-score {
    width: 42px;
    height: 42px;
  }

  .orientation-resource-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .orientation-resource-media {
    min-height: 180px;
  }

  .orientation-card-badges {
    align-items: flex-start;
  }

  .orientation-inline-report > form {
    right: -8px;
    width: min(240px, calc(100vw - 32px));
  }
}

/* ===== Clairef'Visio natif ===== */
.visio-index {
  min-height: calc(100vh - 76px);
  padding: 2.2rem 0 4rem;
}

.visio-index-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.visio-index-head h1 {
  margin: .15rem 0 .35rem;
  color: var(--cf-ink);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.visio-index-head p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--cf-muted);
}

.visio-room-list {
  display: grid;
  gap: .65rem;
}

.visio-room-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 104px;
  padding: .9rem 1rem;
  border: 1px solid var(--cf-line);
  border-left: 4px solid var(--cf-green);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 48, 39, .06);
}

.visio-room-row.status-scheduled { border-left-color: var(--cf-blue); }
.visio-room-row.status-paused { border-left-color: var(--cf-gold); }
.visio-room-row.status-closed { border-left-color: #8a9691; opacity: .82; }

.visio-room-date {
  display: grid;
  place-content: center;
  width: 60px;
  height: 68px;
  border: 1px solid rgba(31, 107, 79, .16);
  border-radius: 8px;
  color: var(--cf-green);
  background: rgba(31, 107, 79, .06);
  text-align: center;
}

.visio-room-date strong { font-size: 1.45rem; line-height: 1; }
.visio-room-date span { margin-top: .18rem; font-size: .72rem; font-weight: 800; }
.visio-room-copy { min-width: 0; }

.visio-room-copy h2 {
  overflow: hidden;
  margin: .18rem 0;
  color: var(--cf-ink);
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visio-room-copy p { margin: 0; color: var(--cf-muted); font-size: .86rem; }

.visio-room-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--cf-green);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.visio-room-capacity {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--cf-muted);
  font-size: .88rem;
  font-weight: 700;
}

.visio-room-row > form { margin: 0; }

.visio-index-empty {
  display: grid;
  justify-items: center;
  padding: 4rem 1rem;
  color: var(--cf-muted);
  text-align: center;
}

.visio-index-empty i { color: var(--cf-green); font-size: 2.6rem; }
.visio-index-empty h2 { margin: 1rem 0 .35rem; color: var(--cf-ink); font-size: 1.25rem; }
.visio-index-empty p { margin: 0; }

.event-visio-admin > .event-admin-section-head > i {
  color: var(--cf-green);
  font-size: 1.4rem;
}

.event-visio-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, .45fr) auto;
  align-items: end;
  gap: .75rem;
  padding: 1rem 0;
}

.event-visio-form label { display: grid; gap: .35rem; }
.event-visio-form label > span { color: var(--cf-muted); font-size: .78rem; font-weight: 800; }
.event-visio-form select { min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--cf-line); border-radius: 6px; color: var(--cf-ink); background: #fff; }

.event-visio-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0 0;
  border-top: 1px solid var(--cf-line);
}

.event-visio-status > div:first-child { display: grid; justify-items: start; gap: .25rem; }
.event-visio-status > div:first-child strong { color: var(--cf-ink); }
.event-visio-status > div:first-child small { color: var(--cf-muted); }
.event-visio-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }

.event-visio-log { margin-top: 1rem; border-top: 1px solid var(--cf-line); }
.event-visio-log summary { padding: .8rem 0; color: var(--cf-green); font-size: .83rem; font-weight: 800; cursor: pointer; }
.event-visio-log > div { display: grid; }
.event-visio-log p { display: grid; grid-template-columns: 120px 160px minmax(0, 1fr); gap: .6rem; margin: 0; padding: .55rem 0; border-top: 1px solid #edf1ee; font-size: .78rem; }
.event-visio-log time,
.event-visio-log span { color: var(--cf-muted); }

.visio-body {
  overflow: hidden;
  margin: 0;
  background: #08130f;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
}

.visio-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #0a1813;
}

.visio-topbar {
  z-index: 5;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .8rem;
  min-height: 70px;
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: #10251e;
}

.visio-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

.visio-back:hover,
.visio-back:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); transform: translateX(-2px); }

.visio-title {
  display: grid;
  min-width: 0;
}

.visio-title span {
  color: #79d6ad;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.visio-title strong {
  overflow: hidden;
  font-size: .98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visio-supervision {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .65rem;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.visio-supervision > i { color: #79d6ad; font-size: 1.15rem; }
.visio-supervision span { display: grid; }
.visio-supervision strong { font-size: .78rem; }
.visio-supervision small { max-width: 210px; overflow: hidden; color: rgba(255, 255, 255, .64); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }

.visio-count {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 52px;
  font-size: .82rem;
  font-weight: 800;
}

.visio-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: .75rem;
  background: #08130f;
}

.visio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: .65rem;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.visio-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.visio-grid[data-count="3"],
.visio-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.visio-grid[data-count="5"],
.visio-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.visio-stage.is-scrollable { overflow-y: auto; overscroll-behavior: contain; }
.visio-grid.is-large { height: auto; min-height: 100%; align-content: stretch; }

.visio-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: #14241f;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.visio-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0d1d18;
}

.visio-tile.is-self video { transform: scaleX(-1); }
.visio-tile.is-screen video { object-fit: contain; transform: none; background: #060b09; }

.visio-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #14241f;
}

.visio-avatar-fallback img {
  width: min(22vw, 150px);
  height: min(22vw, 150px);
  border: 3px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  object-fit: cover;
}

.visio-avatar-fallback span {
  display: none;
  align-items: center;
  justify-content: center;
  width: min(22vw, 150px);
  height: min(22vw, 150px);
  border-radius: 50%;
  color: #dff6eb;
  background: #24533f;
  font-size: clamp(1.4rem, 4vw, 3rem);
  font-weight: 800;
}

.visio-avatar-fallback img[hidden] + span { display: inline-flex; }
.visio-tile:not(.is-video-off) .visio-avatar-fallback { visibility: hidden; }

.visio-tile-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .65rem;
  padding: 2.2rem .75rem .65rem;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .78));
}

.visio-tile-identity { display: grid; min-width: 0; }
.visio-tile-identity strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.visio-tile-identity small { color: rgba(255, 255, 255, .68); font-size: .68rem; }
.visio-media-indicators { display: inline-flex; gap: .4rem; font-size: .8rem; }
.visio-media-indicators .is-off { color: #ff8275; }

.visio-remove-participant {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 22, 18, .72);
  backdrop-filter: blur(8px);
}

.visio-screen-permission {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 22, 18, .72);
  backdrop-filter: blur(8px);
}

.visio-remove-participant + .visio-screen-permission { right: 3.25rem; }
.visio-screen-permission:hover,
.visio-screen-permission:focus-visible,
.visio-screen-permission.is-allowed { border-color: #79d6ad; color: #79d6ad; background: rgba(15, 69, 48, .88); }

.visio-remove-participant:hover,
.visio-remove-participant:focus-visible { border-color: #ff8275; color: #ff8275; }

.visio-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #fff;
  background: #0a1813;
  text-align: center;
}

.visio-state[hidden] { display: none; }
.visio-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border: 1px solid rgba(121, 214, 173, .3); border-radius: 50%; color: #79d6ad; background: rgba(121, 214, 173, .08); font-size: 1.7rem; }
.visio-state h1 { margin: 1rem 0 .4rem; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.visio-state p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .68); }

.visio-retry {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 42px;
  margin-top: 1rem;
  padding: .5rem .9rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  color: #fff;
  background: #245f47;
  font-weight: 700;
}

.visio-controls {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 84px;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: #10251e;
}

.visio-control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 58px;
  min-width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  transition: background .15s ease, transform .15s ease;
}

.visio-control i { font-size: 1.05rem; }
.visio-control span { font-size: .62rem; font-weight: 700; }
.visio-control:hover:not(:disabled),
.visio-control:focus-visible:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.visio-control.is-off { color: #ffb0a8; background: rgba(205, 66, 52, .18); }
.visio-control.is-active { color: #08130f; background: #79d6ad; }
.visio-control.is-leave { border-color: #ce4a40; background: #bd3d35; }
.visio-control:disabled { opacity: .42; cursor: not-allowed; }

.visio-remove-dialog {
  width: min(440px, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #17231f;
  background: #fff;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

.visio-remove-dialog::backdrop { background: rgba(3, 10, 7, .76); backdrop-filter: blur(3px); }
.visio-remove-dialog form { display: grid; padding: 1.4rem; }
.visio-dialog-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #b5372e; background: #f9e9e7; font-size: 1.2rem; }
.visio-remove-dialog h2 { margin: .9rem 0 .3rem; font-size: 1.25rem; }
.visio-remove-dialog p { margin: 0 0 1rem; color: #61706a; font-size: .88rem; }
.visio-remove-dialog label { margin-bottom: .3rem; font-size: .82rem; font-weight: 800; }
.visio-remove-dialog input { min-height: 44px; padding: .55rem .7rem; border: 1px solid #cfd8d3; border-radius: 6px; }
.visio-remove-dialog form > div { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1rem; }
.visio-remove-dialog button { min-height: 42px; padding: .5rem .8rem; border-radius: 6px; font-weight: 800; }
.visio-dialog-cancel { border: 1px solid #cfd8d3; color: #263a32; background: #fff; }
.visio-dialog-confirm { border: 1px solid #b5372e; color: #fff; background: #b5372e; }

@media (max-width: 767.98px) {
  .visio-index { padding-top: 1.25rem; }
  .visio-index-head { align-items: stretch; flex-direction: column; }
  .visio-index-head .btn { align-self: flex-start; }
  .visio-room-row { grid-template-columns: 58px minmax(0, 1fr) auto; gap: .7rem; min-height: 92px; padding: .75rem; }
  .visio-room-date { width: 54px; height: 62px; }
  .visio-room-capacity { grid-column: 2; }
  .visio-room-row > .btn { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; min-width: 44px; padding-right: .65rem; padding-left: .65rem; }
  .visio-room-row > .btn { font-size: 0; }
  .visio-room-row > .btn i { margin: 0; font-size: 1rem; }
  .visio-room-row > form { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .visio-room-row > form .btn { width: 100%; height: 100%; min-width: 44px; padding-right: .65rem; padding-left: .65rem; font-size: 0; }
  .visio-room-row > form .btn i { margin: 0; font-size: 1rem; }
  .event-visio-form { grid-template-columns: minmax(0, 1fr); }
  .event-visio-form .btn { width: 100%; }
  .event-visio-status { align-items: stretch; flex-direction: column; }
  .event-visio-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .event-visio-actions .btn,
  .event-visio-actions form .btn { width: 100%; }
  .event-visio-log p { grid-template-columns: minmax(0, 1fr); gap: .1rem; }

  .visio-topbar { grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 62px; padding: calc(.45rem + env(safe-area-inset-top)) .65rem .45rem; }
  .visio-supervision { display: none; }
  .visio-title strong { font-size: .86rem; }
  .visio-stage { padding: .35rem; }
  .visio-grid { gap: .35rem; }
  .visio-tile video { object-fit: contain; }
  .visio-grid[data-count="2"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .visio-grid[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .visio-grid[data-count="3"] .visio-tile:first-child { grid-column: 1 / -1; }
  .visio-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .visio-grid[data-count="5"],
  .visio-grid[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .visio-avatar-fallback img,
  .visio-avatar-fallback span { width: min(28vw, 110px); height: min(28vw, 110px); }
  .visio-tile-meta { padding: 1.7rem .5rem .45rem; }
  .visio-tile-identity strong { font-size: .74rem; }
  .visio-tile-identity small { display: none; }
  .visio-media-indicators { gap: .25rem; font-size: .7rem; }
  .visio-remove-participant { width: 34px; height: 34px; }
  .visio-screen-permission { width: 34px; height: 34px; }
  .visio-remove-participant + .visio-screen-permission { right: 2.95rem; }
  .visio-controls { gap: .5rem; min-height: 74px; padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); }
  .visio-control { width: 52px; min-width: 52px; height: 52px; }
  .visio-control span { display: none; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .visio-topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 52px;
    padding: calc(.3rem + env(safe-area-inset-top)) .55rem .3rem;
  }
  .visio-supervision { display: none; }
  .visio-title strong { font-size: .82rem; }
  .visio-stage { padding: .3rem; }
  .visio-grid { gap: .3rem; }
  .visio-tile video { object-fit: contain; }
  .visio-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
  .visio-grid[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
  .visio-grid[data-count="3"] .visio-tile:first-child { grid-column: auto; }
  .visio-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .visio-grid[data-count="5"],
  .visio-grid[data-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .visio-controls {
    gap: .4rem;
    min-height: 62px;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .visio-control {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }
  .visio-control i { font-size: .95rem; }
  .visio-control span { display: none; }
}

@media (max-width: 420px) {
  .visio-room-copy p { font-size: .76rem; }
  .visio-count { min-width: 42px; font-size: .74rem; }
  .visio-title span { font-size: .66rem; }
  .visio-controls { justify-content: space-around; }
}

@media (prefers-reduced-motion: reduce) {
  .visio-back,
  .visio-control { transition: none; }
}

/* Salles Clairef'Visio personnelles */
.personal-visio-manager {
  margin: 0 0 2.25rem;
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-top: 4px solid var(--cf-green);
  border-radius: 8px;
  background: var(--cf-surface);
  box-shadow: var(--cf-shadow);
}

.personal-visio-manager-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--cf-line);
}

.personal-visio-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #fff;
  background: var(--cf-green);
  font-size: 1.2rem;
}

.personal-visio-manager-head h2 { margin: .1rem 0 .2rem; font-size: 1.3rem; }
.personal-visio-manager-head p { margin: 0; color: var(--cf-muted); font-size: .84rem; }
.visio-room-status.status-open { color: var(--cf-green); }
.visio-room-status.status-paused { color: #8a5b0b; }
.visio-room-status.status-scheduled,
.visio-room-status.status-closed { color: var(--cf-muted); }
.visio-room-status .bi-circle-fill { font-size: .45rem; }

.personal-visio-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 0;
}

.visio-schedule-panel,
.visio-slot-form { padding: 1.1rem 1.2rem; }
.visio-slot-form { display: grid; gap: .75rem; border-left: 1px solid var(--cf-line); }
.visio-panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.visio-panel-title > div { display: grid; }
.visio-panel-title span { color: var(--cf-ink); font-size: .9rem; font-weight: 800; }
.visio-panel-title small { color: var(--cf-muted); font-size: .72rem; }
.visio-panel-title > i { color: var(--cf-blue); font-size: 1.15rem; }
.visio-slot-form .visio-panel-title { margin-bottom: 0; }
.visio-slot-form label { display: grid; gap: .3rem; }
.visio-slot-form label > span { color: var(--cf-ink); font-size: .75rem; font-weight: 800; }
.visio-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.visio-slot-form > .btn { justify-self: start; }

.visio-slot-list { display: grid; }
.visio-slot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 54px; padding: .6rem 0; border-top: 1px solid var(--cf-line); }
.visio-slot:first-child { border-top: 0; }
.visio-slot-copy { display: grid; min-width: 0; gap: .12rem; }
.visio-slot strong { font-size: .8rem; }
.visio-slot span { color: var(--cf-muted); font-size: .76rem; overflow-wrap: anywhere; }
.visio-slot form { margin: 0; }
.visio-slot-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .2rem; }
.visio-slot-edit,
.visio-slot-delete { width: 36px; height: 36px; color: #a33d42; }
.visio-slot-edit { color: var(--cf-blue); }
.visio-slot-empty { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1rem 0; color: var(--cf-muted); font-size: .82rem; }

.visio-slot-dialog {
  width: min(620px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  color: var(--cf-ink);
  background: var(--cf-surface);
  box-shadow: 0 22px 70px rgb(5 31 24 / 28%);
}
.visio-slot-dialog::backdrop { background: rgb(2 24 19 / 66%); backdrop-filter: blur(4px); }
.visio-slot-dialog-form { display: grid; gap: 0; margin: 0; }
.visio-slot-dialog-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  align-items: start;
  gap: .8rem;
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--cf-line);
}
.visio-slot-dialog-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: #fff; background: var(--cf-blue); }
.visio-slot-dialog-head h2 { margin: .08rem 0 .18rem; font-size: 1.18rem; }
.visio-slot-dialog-head p { margin: 0; color: var(--cf-muted); font-size: .78rem; line-height: 1.45; }
.visio-slot-dialog-head > .btn-icon { width: 38px; height: 38px; color: var(--cf-muted); }
.visio-slot-dialog-fields { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, .9fr)); gap: .75rem; padding: 1.1rem 1.2rem; }
.visio-slot-dialog-fields label { display: grid; gap: .3rem; }
.visio-slot-dialog-fields label > span,
.visio-duplicate-days legend { color: var(--cf-ink); font-size: .75rem; font-weight: 800; }
.visio-slot-dialog-label { grid-column: 1 / -1; }
.visio-duplicate-days { min-width: 0; margin: 0; padding: 0 1.2rem 1.15rem; border: 0; }
.visio-duplicate-days legend { margin: 0; }
.visio-duplicate-days > p { margin: .15rem 0 .7rem; color: var(--cf-muted); font-size: .72rem; }
.visio-duplicate-days > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.visio-duplicate-days label { display: flex; align-items: center; gap: .42rem; min-width: 0; padding: .55rem .6rem; border: 1px solid var(--cf-line); border-radius: 6px; background: var(--cf-paper); cursor: pointer; }
.visio-duplicate-days label:has(input:checked) { border-color: var(--cf-blue); background: color-mix(in srgb, var(--cf-blue) 9%, var(--cf-surface)); }
.visio-duplicate-days label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.visio-duplicate-days input { flex: 0 0 auto; margin: 0; accent-color: var(--cf-blue); }
.visio-duplicate-days span { min-width: 0; overflow: hidden; color: var(--cf-ink); font-size: .72rem; font-weight: 700; text-overflow: ellipsis; }
.visio-slot-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.2rem; border-top: 1px solid var(--cf-line); background: color-mix(in srgb, var(--cf-paper) 70%, var(--cf-surface)); }

.personal-visio-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.2rem;
  border-top: 1px solid var(--cf-line);
  background: color-mix(in srgb, var(--cf-paper) 65%, var(--cf-surface));
}
.personal-visio-actions > div { display: flex; align-items: center; gap: .55rem; }
.personal-visio-actions > div:first-child { color: var(--cf-muted); font-size: .78rem; }
.personal-visio-actions > div:first-child i { color: var(--cf-green); font-size: 1.05rem; }
.personal-visio-actions form { margin: 0; }
.visio-capacity-form {
  display: inline-grid;
  grid-template-columns: auto 62px 36px;
  align-items: center;
  gap: .35rem;
  min-height: 42px;
  padding: .2rem .35rem .2rem .65rem;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-surface);
}
.visio-capacity-form label { color: var(--cf-muted); font-size: .72rem; font-weight: 800; }
.visio-capacity-form select { min-height: 34px; padding: .25rem .4rem; border: 1px solid var(--cf-line); border-radius: 5px; color: var(--cf-ink); background: var(--cf-surface); }
.visio-capacity-form .btn-icon { width: 34px; height: 34px; color: var(--cf-green); }

.visio-community-section,
.visio-event-section { margin-top: 2rem; }
.visio-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.visio-section-head h2 { margin: .15rem 0 0; font-size: 1.35rem; }
.visio-section-head > p { max-width: 520px; margin: 0; color: var(--cf-muted); text-align: right; }
.personal-visio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.personal-visio-card { display: flex; min-width: 0; flex-direction: column; padding: 1rem; border: 1px solid var(--cf-line); border-top: 3px solid var(--cf-muted); border-radius: 8px; background: var(--cf-surface); }
.personal-visio-card.status-open { border-top-color: var(--cf-green); }
.personal-visio-card.status-paused { border-top-color: var(--cf-gold); }
.personal-visio-card-top { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: start; gap: .7rem; }
.personal-visio-card-top > .avatar { width: 58px; height: 58px; }
.personal-visio-card-top > div { min-width: 0; }
.personal-visio-card-top h3 { margin: .2rem 0 .12rem; font-size: .96rem; line-height: 1.25; overflow-wrap: anywhere; }
.personal-visio-card-top p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--cf-muted); font-size: .74rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.personal-visio-card-top .visio-room-capacity { font-size: .72rem; }
.personal-visio-slots { display: flex; min-height: 44px; flex-wrap: wrap; align-content: flex-start; gap: .35rem; margin: .85rem 0; }
.personal-visio-slots span { padding: .3rem .45rem; border-radius: 5px; color: var(--cf-green-dark); background: color-mix(in srgb, var(--cf-green) 9%, var(--cf-surface)); font-size: .68rem; }
.personal-visio-slots span.empty { color: var(--cf-muted); background: var(--cf-paper); }
.personal-visio-card-actions { display: flex; align-items: center; min-height: 42px; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--cf-line); }
.personal-visio-card-actions form { width: 100%; margin: 0; }
.personal-visio-card-actions .btn { width: 100%; }
.visio-room-closed { display: inline-flex; align-items: center; gap: .4rem; color: var(--cf-muted); font-size: .78rem; font-weight: 700; }
.visio-room-copy h3 { overflow: hidden; margin: .18rem 0; color: var(--cf-ink); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }

/* Les identités longues restent dans leur colonne, sans recouvrir l’avatar. */
.mentor-result-top { isolation: isolate; }
.mentor-result-top > .avatar { display: block; grid-column: 1; overflow: hidden; object-fit: cover; }
.mentor-result-name { grid-column: 2; position: relative; z-index: 1; overflow: hidden; }
.mentor-result-name h3,
.mentor-result-name p { overflow-wrap: anywhere; }
.mentor-score { grid-column: 3; }

@media (max-width: 991.98px) {
  .personal-visio-manager-grid { grid-template-columns: minmax(0, 1fr); }
  .visio-slot-form { border-top: 1px solid var(--cf-line); border-left: 0; }
  .personal-visio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .personal-visio-manager-head { grid-template-columns: 44px minmax(0, 1fr); padding: .9rem; }
  .personal-visio-icon { width: 44px; height: 44px; }
  .personal-visio-manager-head > .visio-room-status { grid-column: 2; justify-self: start; }
  .visio-schedule-panel,
  .visio-slot-form { padding: .9rem; }
  .personal-visio-actions { align-items: stretch; flex-direction: column; padding: .9rem; }
  .personal-visio-actions > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr); }
  .personal-visio-actions .btn,
  .personal-visio-actions form .btn { width: 100%; }
  .visio-capacity-form { grid-template-columns: minmax(0, 1fr) 72px 38px; width: 100%; }
  .visio-section-head { align-items: stretch; flex-direction: column; gap: .4rem; }
  .visio-section-head > p { text-align: left; }
  .personal-visio-grid { grid-template-columns: minmax(0, 1fr); }
  .visio-slot-dialog { max-height: calc(100dvh - 1rem); }
  .visio-slot-dialog-head { padding: 1rem; }
  .visio-slot-dialog-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
  .visio-slot-dialog-fields > label:first-child,
  .visio-slot-dialog-label { grid-column: 1 / -1; }
  .visio-duplicate-days { padding: 0 1rem 1rem; }
  .visio-duplicate-days > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visio-slot-dialog-actions { padding: .8rem 1rem; }
}

@media (max-width: 479.98px) {
  .visio-time-fields { grid-template-columns: minmax(0, 1fr); }
  .visio-slot-form > .btn { width: 100%; }
  .personal-visio-card-top { grid-template-columns: 52px minmax(0, 1fr); }
  .personal-visio-card-top > .avatar { width: 52px; height: 52px; }
  .personal-visio-card-top .visio-room-capacity { grid-column: 2; }
  .mentor-result-top { grid-template-columns: 58px minmax(0, 1fr) 30px; gap: .5rem; }
  .mentor-result-top > .avatar { width: 58px; height: 58px; }
  .mentor-score { width: 30px; height: 30px; }
  .visio-slot-dialog-head { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: .6rem; }
  .visio-slot-dialog-icon { width: 40px; height: 40px; }
  .visio-slot-dialog-fields { grid-template-columns: minmax(0, 1fr); }
  .visio-slot-dialog-fields > label:first-child,
  .visio-slot-dialog-label { grid-column: auto; }
  .visio-slot-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .visio-slot-dialog-actions .btn { width: 100%; }
}

/* Events */
.event-hub { min-height: 70vh; background: color-mix(in srgb, var(--cf-paper) 90%, #fff); }
.event-container,
.event-detail-container,
.event-admin-container { max-width: 1220px; }
.event-hub-head,
.event-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.75rem; }
.event-hub-head h1,
.event-admin-head h1 { margin: 0; color: #102d26; font-size: 2rem; font-weight: 800; letter-spacing: 0; }
.event-hub-head p:last-child,
.event-admin-head p:last-child { max-width: 700px; margin: .45rem 0 0; color: #52645f; }
.event-head-actions,
.event-admin-head > div:last-child { display: flex; flex-wrap: wrap; gap: .6rem; }
.event-filters { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: 1.4rem; padding-bottom: .25rem; scrollbar-width: thin; }
.event-filters a { flex: 0 0 auto; min-height: 42px; padding: .65rem 1rem; border: 1px solid #d8e1dd; border-radius: 6px; color: #435952; background: #fff; font-weight: 700; text-decoration: none; }
.event-filters a:hover,
.event-filters a.active { border-color: var(--cf-green); color: #fff; background: var(--cf-green); }
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.event-card { min-width: 0; overflow: hidden; border: 1px solid #dce5e1; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(22, 54, 45, .07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.event-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cf-green) 45%, #dce5e1); box-shadow: 0 16px 36px rgba(22, 54, 45, .11); }
.event-card-media { position: relative; display: block; height: 190px; overflow: hidden; background: #e6eeeb; }
.event-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.event-card:hover .event-card-media img { transform: scale(1.035); }
.event-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #55766b; background: linear-gradient(135deg, #e8f0ed, #dbe7e2); font-size: 2.3rem; }
.event-card-media time { position: absolute; top: .75rem; left: .75rem; display: grid; width: 58px; height: 62px; place-content: center; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; color: #153c31; background: rgba(255,255,255,.94); text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.event-card-media time strong { font-size: 1.25rem; line-height: 1; }
.event-card-media time span { margin-top: .2rem; color: #b14a3f; font-size: .68rem; font-weight: 800; }
.event-card-body { padding: 1rem; }
.event-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.event-card-tags span,
.event-detail-tags span { display: inline-flex; align-items: center; gap: .3rem; min-height: 26px; padding: .25rem .5rem; border-radius: 4px; color: #315f52; background: #eaf2ef; font-size: .72rem; font-weight: 800; }
.event-card-tags span:nth-child(2),
.event-detail-tags span:nth-child(2) { color: #28536d; background: #e7f0f5; }
.event-card h2 { min-height: 2.8rem; margin: .75rem 0 .45rem; font-size: 1.08rem; line-height: 1.3; }
.event-card h2 a { color: #17372f; text-decoration: none; }
.event-card h2 a:hover { color: var(--cf-green); }
.event-card-body > p { min-height: 3.9rem; margin-bottom: .8rem; color: #61716c; font-size: .9rem; }
.event-card-meta { display: grid; gap: .38rem; margin: 0; padding: .75rem 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }
.event-card-meta > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .35rem; }
.event-card-meta dt { color: var(--cf-green); }
.event-card-meta dd { min-width: 0; margin: 0; overflow: hidden; color: #4e615b; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.event-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 42px; padding-top: .7rem; }
.event-card-footer > a { color: var(--cf-green); font-size: .84rem; font-weight: 800; text-decoration: none; }
.event-seats { color: #536660; font-size: .8rem; font-weight: 700; }
.event-seats i { margin-right: .28rem; }
.event-seats.is-full { color: #a5463c; }
.event-member-state { display: inline-flex; max-width: 58%; min-height: 27px; align-items: center; padding: .25rem .45rem; border-radius: 4px; color: #27624f; background: #e7f4ee; font-size: .7rem; font-weight: 800; text-align: right; }
.event-member-state.waiting { color: #7b5715; background: #fff3cf; }
.event-empty { display: grid; min-height: 280px; place-items: center; align-content: center; padding: 2rem; color: #5c6e68; text-align: center; }
.event-empty > i { margin-bottom: .7rem; color: #7ba092; font-size: 2.4rem; }
.event-empty h2 { color: #1c3d33; font-size: 1.25rem; }
.event-empty p { margin-bottom: 1rem; }

.event-create-section { display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding: 1.5rem 0 2rem; }
.event-create-intro { position: sticky; top: 95px; }
.event-create-intro > span,
.event-admin-section-head span { color: #a44a40; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.event-create-intro h2 { margin: .45rem 0 .7rem; color: #17372f; font-size: 1.45rem; }
.event-create-intro p { color: #63736e; }
.event-create-form { padding-left: 2rem; border-left: 1px solid #d7e1dd; }
.event-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.event-field { display: grid; min-width: 0; gap: .42rem; }
.event-field > span { color: #29483f; font-size: .84rem; font-weight: 750; }
.event-field-wide { grid-column: 1 / -1; }
.event-field .form-control,
.event-field .form-select { min-height: 46px; }
.event-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #dfe6e3; }
.event-form-footer > div { display: flex; gap: .55rem; }
.event-switch { display: flex; align-items: flex-start; gap: .6rem; color: #4c615a; font-size: .85rem; }
.event-switch input { width: 18px; height: 18px; margin-top: .05rem; accent-color: var(--cf-green); }

.event-detail-shell { padding-bottom: 4rem; background: color-mix(in srgb, var(--cf-paper) 92%, #fff); }
.event-detail-media { position: relative; height: 320px; overflow: hidden; background: #183c32; }
.event-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.event-detail-media::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, rgba(8,28,23,.22), rgba(8,28,23,.62)); }
.event-detail-media.no-image { height: 155px; background: #214f42; }
.event-detail-media.no-image::after { display: none; }
.event-detail-media-inner { position: relative; z-index: 1; height: 100%; padding-top: 1rem; }
.event-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .7rem; border-radius: 5px; color: #fff; background: rgba(10,34,27,.6); font-weight: 700; text-decoration: none; }
.event-detail-container { position: relative; z-index: 2; margin-top: -58px; }
.event-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 2rem; align-items: start; }
.event-detail-main { padding: 2rem 0; }
.event-detail-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.event-detail-main h1 { max-width: 850px; margin: .85rem 0 1rem; color: #13362d; font-size: 2.15rem; font-weight: 850; letter-spacing: 0; }
.event-detail-lead { color: #455f56; font-size: 1rem; line-height: 1.75; }
.event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin-top: 1.5rem; padding: 1.25rem 0; border-top: 1px solid #d8e2de; border-bottom: 1px solid #d8e2de; }
.event-facts > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .65rem; align-items: start; }
.event-facts > div > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 6px; color: #fff; background: var(--cf-blue); }
.event-facts span { color: #50645d; font-size: .88rem; }
.event-facts strong { display: block; margin-bottom: .15rem; color: #203f36; }
.event-safety-note { display: flex; gap: .75rem; margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--cf-gold); color: #4c5c57; background: #fff7df; }
.event-safety-note > i { color: #9d721b; font-size: 1.25rem; }
.event-safety-note span { display: block; font-size: .85rem; }
.event-registration-panel { display: grid; gap: .8rem; padding: 1.25rem; border: 1px solid #d9e3df; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(19, 53, 44, .13); }
.event-registration-kicker { color: #a44a40; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.event-registration-panel h2 { margin: 0; color: #17372f; font-size: 1.08rem; }
.event-registration-panel form { display: contents; }
.event-registration-panel small { color: #63746f; }
.event-registration-panel small i { margin-right: .25rem; }
.event-capacity { height: 8px; overflow: hidden; border-radius: 4px; background: #e4ebe8; }
.event-capacity span { display: block; height: 100%; border-radius: inherit; background: var(--cf-green); }
.event-registration-state { display: flex; gap: .65rem; padding: .8rem; border-radius: 6px; }
.event-registration-state > i { font-size: 1.2rem; }
.event-registration-state strong,
.event-registration-state span { display: block; }
.event-registration-state span { margin-top: .1rem; font-size: .8rem; }
.event-registration-state.success { color: #245d4a; background: #e8f5ef; }
.event-registration-state.warning { color: #72531b; background: #fff4d6; }
.event-admin-link { padding-top: .65rem; border-top: 1px solid #e5ebe8; color: var(--cf-green); font-size: .84rem; font-weight: 750; text-decoration: none; }

.event-admin-shell { min-height: 75vh; background: color-mix(in srgb, var(--cf-paper) 90%, #fff); }
.event-admin-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.event-admin-list { position: sticky; top: 92px; overflow: hidden; border: 1px solid #d9e2de; border-radius: 8px; background: #fff; }
.event-admin-list-head { display: flex; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid #e2e9e6; }
.event-admin-list-head a { color: var(--cf-green); font-size: .8rem; font-weight: 750; text-decoration: none; }
.event-admin-list-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .7rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid #edf1ef; color: #2b4740; text-decoration: none; }
.event-admin-list-item:hover,
.event-admin-list-item.active { background: #edf5f1; }
.event-admin-list-item.active { box-shadow: inset 3px 0 var(--cf-green); }
.event-admin-list-item time { display: grid; width: 46px; height: 50px; place-content: center; border-radius: 5px; color: #264d41; background: #e5efeb; text-align: center; }
.event-admin-list-item time strong { line-height: 1; }
.event-admin-list-item time span { margin-top: .15rem; color: #a3483f; font-size: .62rem; font-weight: 850; }
.event-admin-list-item > span { min-width: 0; }
.event-admin-list-item > span > strong,
.event-admin-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-admin-list-item small { margin-top: .2rem; color: #6b7a75; font-size: .72rem; }
.event-admin-empty { padding: 1rem; color: #6c7b76; }
.event-admin-workspace { min-width: 0; }
.event-admin-event-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #d9e2de; }
.event-admin-event-head h2 { margin: .45rem 0 .35rem; color: #17372f; font-size: 1.45rem; }
.event-admin-event-head p { margin: 0; color: #61726d; font-size: .85rem; }
.event-status-pill,
.event-registration-badge { display: inline-flex; min-height: 25px; align-items: center; padding: .22rem .48rem; border-radius: 4px; color: #365a4e; background: #e6efec; font-size: .68rem; font-weight: 850; }
.event-status-cancelled,
.event-status-rejected,
.status-cancelled,
.status-no_show { color: #923e35; background: #fbe9e7; }
.event-status-published,
.status-confirmed,
.status-registered,
.status-attended { color: #236149; background: #e6f4ed; }
.status-pending { color: #775919; background: #fff3d5; }
.event-admin-status-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1rem 0; }
.event-admin-status-actions form { display: contents; }
.event-admin-section { padding: 1rem 0 1.25rem; border-top: 1px solid #dce4e1; }
.event-admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.event-admin-section-head h3 { margin: .1rem 0 0; color: #204138; font-size: 1.08rem; }
.event-admin-section-head > strong { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--cf-blue); font-size: .8rem; }
.event-participant { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .6rem; align-items: center; min-width: 220px; }
.event-participant img,
.event-waiting-admin-list img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.event-participant strong,
.event-participant small { display: block; }
.event-participant small { color: #71807b; font-size: .72rem; }
.event-row-actions,
.event-row-actions form { display: flex; justify-content: flex-end; gap: .3rem; }
.icon-button.is-success { color: #267052; background: #e5f3ec; }
.icon-button.is-danger { color: #a04238; background: #fbe9e7; }
.event-table-empty { padding: 1rem; color: #72817c; text-align: center; }
.event-waiting-admin-list { display: grid; gap: .35rem; }
.event-waiting-admin-list > div { display: grid; grid-template-columns: 30px 42px minmax(0, 1fr); gap: .65rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid #e8edeb; }
.event-waiting-admin-list strong,
.event-waiting-admin-list small { display: block; }
.event-waiting-admin-list small { color: #71807b; font-size: .75rem; }
.event-waiting-position { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #7d5b17; background: #fff1c8; font-size: .76rem; font-weight: 850; }

@media (max-width: 991.98px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-create-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .event-create-intro,
  .event-admin-list { position: static; }
  .event-create-form { padding-left: 0; border-left: 0; }
  .event-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .event-registration-panel { margin-top: 0; }
  .event-admin-layout { grid-template-columns: minmax(0, 1fr); }
  .event-admin-list { display: flex; overflow-x: auto; }
  .event-admin-list-head { min-width: 145px; flex-direction: column; justify-content: center; }
  .event-admin-list-item { min-width: 270px; border-right: 1px solid #edf1ef; border-bottom: 0; }
}

@media (max-width: 767.98px) {
  .event-hub-head,
  .event-admin-head { align-items: stretch; flex-direction: column; gap: 1rem; }
  .event-head-actions,
  .event-admin-head > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-head-actions .btn,
  .event-admin-head .btn { width: 100%; }
  .event-grid { grid-template-columns: minmax(0, 1fr); }
  .event-card-body > p,
  .event-card h2 { min-height: 0; }
  .event-form-grid { grid-template-columns: minmax(0, 1fr); }
  .event-field-wide { grid-column: auto; }
  .event-form-footer { align-items: stretch; flex-direction: column; }
  .event-form-footer > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-detail-media { height: 240px; }
  .event-detail-media.no-image { height: 115px; }
  .event-detail-container { margin-top: 0; }
  .event-detail-main { padding: 1.25rem 0 .5rem; }
  .event-detail-main h1 { font-size: 1.7rem; }
  .event-facts { grid-template-columns: minmax(0, 1fr); }
  .event-registration-panel { padding: 1rem; }
  .event-admin-event-head { flex-direction: column; }
  .event-admin-status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-admin-status-actions .btn { width: 100%; }
}

@media (max-width: 479.98px) {
  .event-hub-head h1,
  .event-admin-head h1 { font-size: 1.65rem; }
  .event-head-actions,
  .event-admin-head > div:last-child { grid-template-columns: minmax(0, 1fr); }
  .event-card-media { height: 175px; }
  .event-card-footer { align-items: flex-start; flex-direction: column; }
  .event-member-state { max-width: 100%; }
  .event-form-footer > div { grid-template-columns: minmax(0, 1fr); }
  .event-admin-status-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Mentorat structuré */
.mentorship-hub,
.mentorship-detail { min-height: 72vh; padding: 2rem 0 4rem; }
.mentorship-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--cf-line); }
.mentorship-heading h1 { margin: .15rem 0 .35rem; font-size: 2.15rem; }
.mentorship-heading p { max-width: 760px; margin: 0; color: var(--cf-muted); }
.section-kicker { display: block; color: var(--cf-green); font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.mentorship-nav { display: flex; gap: .2rem; margin: 1rem 0 2rem; overflow-x: auto; border-bottom: 1px solid var(--cf-line); scrollbar-width: thin; }
.mentorship-nav a { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .45rem; min-height: 48px; padding: .7rem .9rem; border-bottom: 3px solid transparent; color: var(--cf-muted); font-size: .86rem; font-weight: 800; text-decoration: none; }
.mentorship-nav a:hover { color: var(--cf-green); }
.mentorship-nav a.active { border-bottom-color: var(--cf-green); color: var(--cf-green); }
.mentorship-section { padding: .25rem 0 1rem; }
.mentorship-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.mentorship-section-head h2 { margin: .15rem 0 0; font-size: 1.45rem; }
.mentorship-section-head > p { max-width: 520px; margin: 0; color: var(--cf-muted); text-align: right; }
.mentor-filter { display: grid; grid-template-columns: 1.2fr .8fr .8fr .8fr .75fr auto; align-items: end; gap: .65rem; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.mentor-filter label { display: block; margin-bottom: .35rem; color: var(--cf-ink); font-size: .75rem; font-weight: 800; }
.mentor-filter .btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; }
.mentor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.mentor-result { display: flex; min-width: 0; flex-direction: column; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mentor-result:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cf-green) 40%, var(--cf-line)); box-shadow: var(--cf-shadow); }
.mentor-result-top { display: grid; grid-template-columns: 76px minmax(0, 1fr) 32px; align-items: start; gap: .7rem; }
.mentor-result-top > .avatar { width: 76px; height: 76px; max-width: 100%; }
.mentor-result-name { min-width: 0; }
.mentor-result-name h3 { max-width: 100%; margin: .15rem 0 .1rem; font-size: 1.02rem; line-height: 1.18; overflow-wrap: anywhere; word-break: normal; }
.mentor-result-name p { margin: 0; color: var(--cf-muted); font-size: .78rem; }
.mentor-verified { display: inline-flex; align-items: center; gap: .25rem; color: var(--cf-blue); font-size: .66rem; font-weight: 800; }
.mentor-score { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: #fff; background: var(--cf-blue); font-size: .76rem; font-weight: 900; }
.mentor-domains { min-height: 42px; margin: .9rem 0 .6rem; font-size: .84rem; }
.mentor-reasons { display: grid; gap: .35rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.mentor-reasons li { display: flex; align-items: flex-start; gap: .4rem; color: #31564a; font-size: .75rem; }
.mentor-reasons i { flex: 0 0 auto; color: var(--cf-green); }
.mentor-result-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--cf-line); color: var(--cf-muted); font-size: .72rem; }
.mentor-result-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.mentor-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .75rem; }
.mentor-result-actions .btn { min-width: 0; padding-right: .45rem; padding-left: .45rem; font-size: .76rem; }
.mentorship-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: .55rem; padding: 2.5rem 1rem; text-align: center; }
.mentorship-empty > i { color: var(--cf-blue); font-size: 1.75rem; }
.mentorship-empty > span { color: var(--cf-muted); }
.mentorship-form-layout { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); align-items: start; gap: 2rem; }
.mentorship-form-intro { position: sticky; top: 92px; padding: .5rem 0; }
.mentorship-form-intro h2 { margin: .25rem 0 .65rem; font-size: 1.6rem; }
.mentorship-form-intro > p { color: var(--cf-muted); }
.mentorship-safety-note { display: flex; gap: .7rem; margin-top: 1.2rem; padding: .9rem; border-left: 4px solid var(--cf-blue); border-radius: 6px; color: #173f5c; background: #eef6fb; }
.mentorship-safety-note.pending { border-left-color: var(--cf-gold); color: #6f420e; background: #fff7e9; }
.mentorship-safety-note > i { flex: 0 0 auto; font-size: 1.2rem; }
.mentorship-safety-note div { display: grid; gap: .2rem; }
.mentorship-safety-note span { font-size: .8rem; }
.mentorship-form { display: grid; gap: 1.25rem; padding: 1.15rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.form-section-title { display: flex; align-items: center; gap: .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--cf-line); }
.form-section-title > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #fff; background: var(--cf-green); font-weight: 800; }
.form-section-title h3 { margin: 0; font-size: 1rem; }
.form-section-title p { margin: .05rem 0 0; color: var(--cf-muted); font-size: .75rem; }
.mentor-availability-toggle { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem; border: 1px solid var(--cf-line); border-radius: 8px; background: #f8faf8; cursor: pointer; }
.mentor-availability-toggle > span { display: grid; gap: .15rem; }
.mentor-availability-toggle small { color: var(--cf-muted); }
.mentorship-list { border-top: 1px solid var(--cf-line); }
.mentorship-list-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 90px 16px; align-items: center; gap: .75rem; min-height: 78px; padding: .8rem 0; border-bottom: 1px solid var(--cf-line); color: var(--cf-ink); text-decoration: none; }
.mentorship-list-item:hover { color: var(--cf-green); background: color-mix(in srgb, var(--cf-surface) 80%, var(--cf-paper)); }
.mentorship-list-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--cf-blue); background: #e8f4fb; }
.mentorship-list-main { display: grid; min-width: 0; gap: .2rem; }
.mentorship-list-main strong { overflow-wrap: anywhere; }
.mentorship-list-main small,
.mentorship-list-date { color: var(--cf-muted); font-size: .75rem; }
.mentorship-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem; color: var(--cf-green); font-size: .82rem; font-weight: 800; text-decoration: none; }
.mentorship-detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--cf-line); }
.mentorship-detail-title h1 { margin: .5rem 0 .25rem; font-size: 1.9rem; }
.mentorship-detail-title p { margin: 0; color: var(--cf-muted); }
.mentorship-header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.action-popover { position: relative; }
.action-popover > summary { list-style: none; cursor: pointer; }
.action-popover > summary::-webkit-details-marker { display: none; }
.action-popover > form { position: absolute; z-index: 20; top: calc(100% + .5rem); right: 0; display: grid; width: min(340px, 86vw); gap: .55rem; padding: .8rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: 0 14px 35px rgba(16, 35, 31, .18); }
.action-popover label,
.mentorship-decision-panel label,
.inline-create-form label,
.mentorship-report-box label,
.review-form label { font-size: .76rem; font-weight: 800; }
.mentorship-supervision-banner { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0; padding: .85rem 1rem; border-left: 4px solid var(--cf-blue); border-radius: 6px; color: #173f5c; background: #eef6fb; }
.mentorship-supervision-banner > i { font-size: 1.2rem; }
.mentorship-supervision-banner div { display: grid; gap: .15rem; }
.mentorship-supervision-banner span { font-size: .82rem; }
.mentorship-decision-panel { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); align-items: end; gap: 1.5rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid #d6e4ed; border-radius: 8px; background: #f3f8fb; }
.mentorship-decision-panel h2 { margin: .15rem 0 .3rem; font-size: 1.2rem; }
.mentorship-decision-panel p { margin: 0; color: var(--cf-muted); font-size: .82rem; }
.mentorship-decision-panel form { display: grid; gap: .5rem; }
.decision-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.mentorship-response { display: flex; gap: .7rem; margin-bottom: 1rem; padding: .9rem 1rem; border-left: 4px solid var(--cf-gold); border-radius: 6px; color: #66420f; background: #fff8e9; }
.mentorship-response > i { font-size: 1.2rem; }
.mentorship-response p { margin: .2rem 0 0; }
.mentorship-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1rem; }
.mentorship-detail-main { display: grid; gap: 1rem; min-width: 0; }
.mentorship-detail-aside { display: grid; position: sticky; top: 88px; gap: .8rem; }
.mentorship-panel { padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.panel-heading h2 { margin: .1rem 0 0; font-size: 1.18rem; }
.panel-heading > i { color: var(--cf-blue); font-size: 1.3rem; }
.progress-value { color: var(--cf-green); font-size: .85rem; font-weight: 900; }
.mentorship-progress { height: 7px; margin-bottom: .8rem; }
.mentorship-goals { border-top: 1px solid var(--cf-line); }
.mentorship-goal { display: grid; grid-template-columns: 22px minmax(0, 1fr) 125px; align-items: center; gap: .55rem; min-height: 58px; border-bottom: 1px solid var(--cf-line); }
.mentorship-goal > i { color: var(--cf-muted); }
.mentorship-goal.done > i { color: var(--cf-green); }
.mentorship-goal.done strong { color: var(--cf-muted); text-decoration: line-through; }
.mentorship-goal > div { display: grid; min-width: 0; }
.mentorship-goal small { color: var(--cf-muted); }
.panel-empty { margin: 1rem 0; color: var(--cf-muted); text-align: center; }
.inline-create-form { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; align-items: end; gap: .55rem; margin-top: .9rem; padding: .8rem; border-radius: 8px; background: #f7f9f7; }
.inline-create-form label { display: block; margin-bottom: .3rem; }
.inline-create-form .btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 42px; }
.mentorship-sessions { border-top: 1px solid var(--cf-line); }
.mentorship-session { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--cf-line); }
.session-date { display: grid; place-items: center; align-content: center; height: 64px; border-radius: 8px; color: #fff; background: var(--cf-blue); }
.session-date strong { font-size: 1.25rem; line-height: 1; }
.session-date span { font-size: .68rem; text-transform: uppercase; }
.session-content { min-width: 0; }
.session-title { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.session-content > p { margin: .35rem 0; color: var(--cf-muted); font-size: .84rem; }
.session-location { display: inline-flex; align-items: flex-start; gap: .3rem; color: var(--cf-blue); font-size: .76rem; overflow-wrap: anywhere; }
.session-summary { margin-top: .6rem; padding: .65rem; border-left: 3px solid var(--cf-green); background: #f1f7f3; }
.session-summary p { margin: .2rem 0 0; font-size: .82rem; }
.session-update { margin-top: .55rem; }
.session-update summary { color: var(--cf-green); font-size: .76rem; font-weight: 800; cursor: pointer; }
.session-update form { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: end; gap: .45rem; margin-top: .45rem; }
.session-create-form { display: grid; gap: .7rem; margin-top: .9rem; padding: .85rem; border-radius: 8px; background: #f7f9f7; }
.session-create-form h3 { margin: 0; font-size: .95rem; }
.session-create-form > .btn { justify-self: start; }
.note-create-form { display: grid; gap: .5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--cf-line); }
.note-create-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.mentorship-notes article { padding: .8rem 0; border-bottom: 1px solid var(--cf-line); }
.mentorship-notes article:last-child { border-bottom: 0; }
.note-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.note-meta span { color: var(--cf-muted); font-size: .7rem; }
.mentorship-notes p { margin: .35rem 0 0; font-size: .85rem; }
.review-form { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: end; gap: .55rem; padding-bottom: .9rem; border-bottom: 1px solid var(--cf-line); }
.review-form label { display: block; margin-bottom: .3rem; }
.review-list article { padding: .7rem 0; border-bottom: 1px solid var(--cf-line); }
.review-list article > div { display: flex; justify-content: space-between; gap: .6rem; }
.review-list article span { color: var(--cf-gold); }
.review-list article p { margin: .25rem 0 0; }
.mentorship-summary h2,
.mentorship-history h2 { margin: 0 0 .8rem; font-size: 1.05rem; }
.mentorship-summary dl { display: grid; gap: .55rem; margin: 0; }
.mentorship-summary dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--cf-line); }
.mentorship-summary dt { color: var(--cf-muted); font-size: .72rem; }
.mentorship-summary dd { margin: 0; font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.mentorship-objective { margin-top: .75rem; }
.mentorship-objective strong { font-size: .78rem; }
.mentorship-objective p { margin: .25rem 0 0; color: var(--cf-muted); font-size: .8rem; }
.mentorship-report-box { border: 1px solid #ead1d4; border-radius: 8px; background: #fff8f8; }
.mentorship-report-box summary { display: flex; align-items: center; gap: .4rem; padding: .8rem; color: #9a3440; font-size: .8rem; font-weight: 800; cursor: pointer; }
.mentorship-report-box form { display: grid; gap: .5rem; padding: 0 .8rem .8rem; }
.mentorship-charter { display: flex; gap: .55rem; padding: .8rem; border-left: 4px solid var(--cf-gold); border-radius: 6px; color: #66420f; background: #fff8e9; }
.mentorship-charter p { margin: .2rem 0 0; font-size: .75rem; }
.mentorship-history ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mentorship-history li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: .45rem; }
.mentorship-history li > span { position: relative; }
.mentorship-history li > span::before { content: ''; position: absolute; top: .35rem; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cf-blue); }
.mentorship-history li > span::after { content: ''; position: absolute; top: 1rem; bottom: 0; left: 6px; width: 2px; background: var(--cf-line); }
.mentorship-history li:last-child > span::after { display: none; }
.mentorship-history li > div { display: grid; gap: .1rem; padding-bottom: .8rem; }
.mentorship-history small { color: var(--cf-muted); font-size: .68rem; }
.mentorship-history p { margin: .15rem 0 0; color: var(--cf-muted); font-size: .72rem; }

/* Projets collaboratifs */
.project-hub,
.project-detail { background: color-mix(in srgb, var(--cf-paper) 94%, #eaf2ee); }
.project-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.project-heading h1 { margin: .2rem 0 .35rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.project-heading p { max-width: 720px; margin: 0; color: var(--cf-muted); }
.project-schema-notice { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #e4c36d; border-left: 4px solid #d39b18; border-radius: 8px; color: #5f470e; background: #fff8df; }
.project-schema-notice > i { flex: 0 0 auto; font-size: 1.25rem; }
.project-schema-notice > div { display: grid; min-width: 0; gap: .1rem; }
.project-schema-notice span { font-size: .76rem; overflow-wrap: anywhere; }
.project-heading .btn,
.project-filters .btn,
.project-create-form > .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.project-filters { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(160px, .75fr) minmax(150px, .65fr) auto; align-items: end; gap: .65rem; padding: .95rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.project-filters label { display: block; margin-bottom: .3rem; color: var(--cf-muted); font-size: .72rem; font-weight: 800; }
.project-filter-search .input-icon-wrap { position: relative; }
.project-filter-search .input-icon-wrap i { position: absolute; z-index: 1; top: 50%; left: .8rem; color: var(--cf-muted); transform: translateY(-50%); }
.project-filter-search .form-control { padding-left: 2.2rem; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.project-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cf-green) 36%, var(--cf-line)); box-shadow: var(--cf-shadow); }
.project-card-media { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: #e7efeb; }
.project-card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.project-card:hover .project-card-media > img { transform: scale(1.035); }
.project-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--cf-green); font-size: 2.2rem; background: linear-gradient(135deg, #edf5f1, #e8f2fa); }
.project-status { display: inline-flex; align-items: center; width: fit-content; min-height: 25px; padding: .25rem .55rem; border-radius: 999px; color: #23473a; background: #e6f1ec; font-size: .68rem; font-weight: 800; }
.project-card-media .project-status { position: absolute; top: .65rem; right: .65rem; box-shadow: 0 3px 10px rgba(16, 37, 29, .12); }
.project-status-pending { color: #754f12; background: #fff0c9; }
.project-status-active { color: #fff; background: var(--cf-green); }
.project-status-completed { color: #173d5b; background: #dceefa; }
.project-status-hidden,
.project-status-cancelled,
.project-status-rejected { color: #7a2831; background: #f9dfe2; }
.project-card-body { display: flex; min-height: 325px; flex-direction: column; padding: 1rem; }
.project-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--cf-muted); font-size: .7rem; font-weight: 700; }
.project-card-meta span:last-child { display: inline-flex; align-items: center; gap: .3rem; }
.project-card h2 { margin: .45rem 0 .35rem; font-size: 1.08rem; line-height: 1.25; }
.project-card h2 a { color: var(--cf-ink); text-decoration: none; overflow-wrap: anywhere; }
.project-card h2 a:hover { color: var(--cf-green); }
.project-card-body > p { min-height: 60px; margin: 0 0 .8rem; color: var(--cf-muted); font-size: .8rem; }
.project-owner,
.project-detail-owner { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.project-owner .avatar { width: 36px; height: 36px; }
.project-owner span,
.project-detail-owner span { display: grid; min-width: 0; }
.project-owner small,
.project-detail-owner small { color: var(--cf-muted); font-size: .62rem; }
.project-owner strong,
.project-detail-owner strong { font-size: .75rem; overflow-wrap: anywhere; }
.project-progress-head { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .85rem; color: var(--cf-muted); font-size: .68rem; }
.project-progress-head strong { color: var(--cf-ink); }
.project-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e3e9e6; }
.project-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--cf-green); }
.project-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .45rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--cf-line); color: var(--cf-muted); font-size: .66rem; }
.project-card-footer span { display: inline-flex; align-items: center; gap: .3rem; }
.project-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: .45rem; padding: 3rem 1rem; color: var(--cf-muted); text-align: center; }
.project-empty > i { color: var(--cf-green); font-size: 2rem; }
.project-create-section { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); align-items: start; gap: 2.2rem; margin-top: 3rem; padding: 2rem 0; border-top: 1px solid var(--cf-line); scroll-margin-top: 90px; }
.project-create-intro { position: sticky; top: 92px; }
.project-create-intro h2 { margin: .25rem 0 .6rem; font-size: 1.55rem; }
.project-create-intro > p { color: var(--cf-muted); }
.project-safety { display: flex; gap: .6rem; margin-top: 1rem; padding: .8rem; border-left: 4px solid var(--cf-blue); border-radius: 6px; color: #173f5c; background: #eaf4fa; font-size: .78rem; }
.project-create-form { display: grid; gap: 1rem; padding: 1.15rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.project-create-form > .btn { justify-self: start; }

.project-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: var(--cf-green); font-size: .8rem; font-weight: 800; text-decoration: none; }
.project-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .32fr); gap: 1.25rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--cf-line); }
.project-detail-cover { grid-column: 1 / -1; width: 100%; max-height: 370px; aspect-ratio: 21 / 7; border-radius: 8px; object-fit: cover; }
.project-detail-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.project-detail-title h1 { margin: .5rem 0 .45rem; font-size: clamp(1.75rem, 4vw, 2.65rem); overflow-wrap: anywhere; }
.project-detail-title > p { max-width: 780px; color: var(--cf-muted); }
.project-detail-owner { margin-top: .9rem; }
.project-detail-owner .avatar { width: 44px; height: 44px; }
.project-detail-owner strong { font-size: .82rem; }
.project-impact-summary { display: grid; align-self: stretch; border-left: 1px solid var(--cf-line); }
.project-impact-summary > div { display: grid; align-content: center; padding: .65rem 1rem; border-bottom: 1px solid var(--cf-line); }
.project-impact-summary > div:last-child { border-bottom: 0; }
.project-impact-summary strong { color: var(--cf-green); font-size: 1.35rem; }
.project-impact-summary span { color: var(--cf-muted); font-size: .68rem; }
.project-anchor-nav { position: sticky; z-index: 8; top: 70px; display: flex; gap: .1rem; margin: 0 0 1.2rem; padding: .25rem 0; overflow-x: auto; border-bottom: 1px solid var(--cf-line); background: color-mix(in srgb, var(--cf-paper) 95%, transparent); backdrop-filter: blur(8px); }
.project-anchor-nav a { flex: 0 0 auto; padding: .7rem .65rem; color: var(--cf-muted); font-size: .72rem; font-weight: 800; text-decoration: none; }
.project-anchor-nav a:hover { color: var(--cf-green); }
.project-join-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--cf-green) 28%, var(--cf-line)); border-radius: 8px; background: #edf6f1; }
.project-join-strip > div { display: flex; align-items: center; gap: .7rem; }
.project-join-strip > div > i { color: var(--cf-green); font-size: 1.35rem; }
.project-join-strip span { display: grid; }
.project-join-strip small { color: var(--cf-muted); }
.project-join-strip details { position: relative; }
.project-join-strip summary { list-style: none; cursor: pointer; }
.project-join-strip details form { position: absolute; z-index: 10; top: calc(100% + .5rem); right: 0; display: grid; width: min(420px, 88vw); gap: .65rem; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.project-notice { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 8px; color: #744f12; background: #fff1cc; }
.project-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .3fr); align-items: start; gap: 1.4rem; }
.project-detail-main { min-width: 0; }
.project-section { padding: 1.5rem 0; border-bottom: 1px solid var(--cf-line); scroll-margin-top: 125px; }
.project-section:first-child { padding-top: .5rem; }
.project-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.project-section-head h2 { margin: .12rem 0 0; font-size: 1.35rem; }
.project-section-head > span { color: var(--cf-muted); font-size: .75rem; }
.project-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .45fr); gap: 1.3rem; }
.project-overview-primary h3,
.project-calendar-text h3 { margin: 0 0 .4rem; font-size: .9rem; }
.project-overview-primary p,
.project-calendar-text p { color: var(--cf-muted); font-size: .82rem; }
.project-facts { margin: 0; padding: .8rem; border-left: 3px solid var(--cf-green); background: color-mix(in srgb, var(--cf-surface) 75%, #e8f1ed); }
.project-facts > div { padding: .5rem 0; border-bottom: 1px solid var(--cf-line); }
.project-facts > div:last-child { border-bottom: 0; }
.project-facts dt { display: flex; align-items: center; gap: .35rem; color: var(--cf-muted); font-size: .66rem; }
.project-facts dd { margin: .2rem 0 0; font-size: .78rem; font-weight: 700; }
.project-skill-callout,
.project-results { display: flex; gap: .7rem; margin-top: 1rem; padding: .9rem; border-radius: 8px; color: #173f5c; background: #eaf4fa; }
.project-results { color: #654714; background: #fff3d5; }
.project-skill-callout > i,
.project-results > i { flex: 0 0 auto; font-size: 1.2rem; }
.project-skill-callout p,
.project-results p { margin: .25rem 0 0; font-size: .78rem; }

/* Connexions professionnelles */
.career-hub { min-height: 70vh; padding: 1.25rem 0 3rem; }
.career-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1rem; }
.career-heading h1 { margin: .15rem 0 .35rem; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: 0; }
.career-heading p { max-width: 760px; margin: 0; color: var(--cf-muted); }
.career-heading .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; }
.career-install-notice { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid #ebc66b; border-radius: 8px; color: #64480a; background: #fff7dd; }
.career-install-notice > i { flex: 0 0 auto; font-size: 1.35rem; }
.career-install-notice strong,
.career-install-notice span { display: block; }
.career-install-notice span { margin-top: .1rem; font-size: .84rem; }
.career-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); overflow: hidden; }
.career-metrics a { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .85rem 1rem; color: var(--cf-text); text-decoration: none; border-right: 1px solid var(--cf-line); }
.career-metrics a:last-child { border-right: 0; }
.career-metrics a:hover { background: color-mix(in srgb, var(--cf-green) 6%, var(--cf-surface)); }
.career-metrics i { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; color: #fff; background: var(--cf-green); }
.career-metrics a:nth-child(2) i { background: #1d5f8d; }
.career-metrics a:nth-child(3) i { background: #875c16; }
.career-metrics a:nth-child(4) i { background: #7b3f75; }
.career-metrics span { min-width: 0; color: var(--cf-muted); font-size: .72rem; line-height: 1.25; }
.career-metrics strong { display: block; color: var(--cf-text); font-size: 1.2rem; line-height: 1; }
.career-tabs { margin: 1rem 0 1.15rem; }
.career-overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 1rem; }
.career-overview-section,
.career-directory-section,
.career-referrals-section,
.career-requests-section,
.career-impact-summary,
.career-outcome-form-section,
.career-my-outcomes { min-width: 0; padding: 1.05rem 1.1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.career-overview-section:nth-child(n + 3) { align-self: start; }
.career-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.career-section-heading > div > span { display: block; color: var(--cf-green); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.career-section-heading h2 { margin: .12rem 0 0; font-size: 1.02rem; letter-spacing: 0; }
.career-section-heading > a { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; color: var(--cf-green); font-size: .75rem; font-weight: 700; text-decoration: none; }
.career-section-heading > span { color: var(--cf-muted); font-size: .75rem; }
.career-compact-list { display: grid; }
.career-compact-list > a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-width: 0; padding: .72rem 0; color: var(--cf-text); text-decoration: none; border-bottom: 1px solid var(--cf-line); }
.career-compact-list > a:first-child { padding-top: .2rem; }
.career-compact-list > a:last-child { padding-bottom: .2rem; border-bottom: 0; }
.career-list-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; color: #21567b; background: #e7f1f8; }
.career-compact-list > a > span:nth-child(2) { min-width: 0; }
.career-compact-list strong,
.career-compact-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.career-compact-list strong { font-size: .82rem; }
.career-compact-list small { margin-top: .1rem; color: var(--cf-muted); font-size: .7rem; }
.career-list-badge { padding: .25rem .45rem; border-radius: 5px; color: #5c4511; background: #f8edcc; font-size: .66rem; font-weight: 700; }
.career-event-list { display: grid; }
.career-event-list > a { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; gap: .7rem; padding: .65rem 0; color: var(--cf-text); text-decoration: none; border-bottom: 1px solid var(--cf-line); }
.career-event-list > a:first-child { padding-top: .2rem; }
.career-event-list > a:last-child { border-bottom: 0; }
.career-event-list time { display: grid; place-items: center; min-height: 45px; border-radius: 6px; color: #fff; background: #1d5f8d; line-height: 1; }
.career-event-list time strong { font-size: 1rem; }
.career-event-list time span { margin-top: .08rem; font-size: .55rem; font-weight: 800; }
.career-event-list > a > span { min-width: 0; }
.career-event-list strong,
.career-event-list small { display: block; }
.career-event-list strong { font-size: .78rem; }
.career-event-list small { margin-top: .1rem; color: var(--cf-muted); font-size: .68rem; }
.career-company-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.career-company-preview a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .08rem .5rem; min-width: 0; padding: .55rem; color: var(--cf-text); text-decoration: none; border: 1px solid var(--cf-line); border-radius: 7px; }
.career-company-preview a > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #fff; background: #32634e; font-size: .72rem; font-weight: 800; }
.career-company-preview strong,
.career-company-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.career-company-preview strong { font-size: .72rem; }
.career-company-preview small { color: var(--cf-muted); font-size: .62rem; }
.career-recruiter-preview { display: grid; }
.career-recruiter-preview a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem 0; color: var(--cf-text); text-decoration: none; border-bottom: 1px solid var(--cf-line); }
.career-recruiter-preview a:last-child { border-bottom: 0; }
.career-recruiter-preview .avatar { width: 34px; height: 34px; }
.career-recruiter-preview a > span { min-width: 0; }
.career-recruiter-preview strong,
.career-recruiter-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.career-recruiter-preview strong { font-size: .75rem; }
.career-recruiter-preview small { color: var(--cf-muted); font-size: .65rem; }
.career-recruiter-preview a > i { color: #1d5f8d; }
.career-inline-empty { padding: .9rem 0; color: var(--cf-muted); font-size: .76rem; }
.career-search-form,
.career-request-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; margin-bottom: 1rem; }
.career-search-form label,
.career-request-filters label { position: relative; min-width: 0; }
.career-search-form label > i,
.career-request-filters label > i { position: absolute; top: 50%; left: .8rem; z-index: 1; transform: translateY(-50%); color: var(--cf-muted); }
.career-search-form input,
.career-request-filters input { padding-left: 2.25rem; }
.career-company-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.career-company-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 32px; align-items: center; gap: .65rem; min-width: 0; padding: .8rem; border: 1px solid var(--cf-line); border-radius: 8px; }
.career-company-initial { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 7px; color: #fff; background: #32634e; font-weight: 800; }
.career-company-card > div { min-width: 0; }
.career-company-card h3 { margin: 0; overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.career-company-card p { display: flex; flex-wrap: wrap; gap: .2rem .55rem; margin: .25rem 0 0; color: var(--cf-muted); font-size: .65rem; }
.career-company-card p span { display: inline-flex; align-items: center; gap: .2rem; }
.career-recruiter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.career-recruiter-card { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: .85rem; border: 1px solid var(--cf-line); border-radius: 8px; }
.career-recruiter-card header { position: relative; width: 58px; }
.career-recruiter-card .avatar { width: 58px; height: 58px; }
.career-verified-mark { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--cf-surface); border-radius: 50%; color: #fff; background: #1d5f8d; font-size: .68rem; }
.career-recruiter-card h3 { margin: .65rem 0 .15rem; font-size: .9rem; overflow-wrap: anywhere; }
.career-recruiter-card > div > p { min-height: 2.1em; margin: 0; color: var(--cf-muted); font-size: .72rem; }
.career-recruiter-card dl { display: grid; gap: .3rem; margin: .65rem 0; }
.career-recruiter-card dl div { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; color: var(--cf-muted); font-size: .68rem; }
.career-recruiter-card dt,
.career-recruiter-card dd { margin: 0; }
.career-recruiter-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; }
.career-referrals-section { margin-bottom: 1rem; border-color: #b9d2e3; background: color-mix(in srgb, #e8f2f8 55%, var(--cf-surface)); }
.career-referral-list { display: grid; gap: .65rem; }
.career-referral-list > article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: .7rem; padding: .75rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.career-referral-list .avatar { width: 42px; height: 42px; }
.career-referral-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.career-referral-title strong { font-size: .8rem; }
.career-referral-list small { color: var(--cf-muted); font-size: .65rem; }
.career-referral-list p { margin: .45rem 0 0; font-size: .75rem; }
.career-referral-status { flex: 0 0 auto; padding: .2rem .4rem; border-radius: 5px; color: #674c12; background: #f9edca; font-size: .62rem; font-weight: 800; }
.career-referral-status.status-accepted { color: #176239; background: #dff4e7; }
.career-referral-status.status-declined,
.career-referral-status.status-withdrawn { color: #5f6268; background: #eceff2; }
.career-referral-context { display: flex; gap: .35rem; padding: .45rem; border-left: 3px solid #1d5f8d; color: #264f6b; background: #edf5fa; }
.career-referral-actions { display: flex; gap: .35rem; }
.career-request-create,
.career-profile-layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 1.5rem; margin-bottom: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--cf-line); border-bottom: 1px solid var(--cf-line); }
.career-form-intro h2 { margin: .15rem 0 .4rem; font-size: 1.25rem; }
.career-form-intro > p { color: var(--cf-muted); font-size: .82rem; }
.career-safety-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; padding: .65rem .7rem; border-left: 3px solid #1d5f8d; color: #254f6d; background: #eaf3f9; font-size: .72rem; }
.career-request-create form > .btn,
.career-profile-form > .btn,
.career-outcome-form-section form > .btn { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; }
.career-request-filters { grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr) auto; }
.career-request-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.career-request-card { min-width: 0; padding: .9rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.career-request-card.status-hidden { opacity: .72; border-style: dashed; }
.career-request-card > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: .65rem; }
.career-request-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; color: #fff; background: #32634e; }
.career-request-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.career-request-badges span { padding: .2rem .4rem; border-radius: 5px; color: #285740; background: #e5f2eb; font-size: .58rem; font-weight: 800; }
.career-request-badges .status-matched { color: #1f5274; background: #e2f0f8; }
.career-request-badges .status-fulfilled { color: #5c4310; background: #f8edca; }
.career-request-badges .status-closed,
.career-request-badges .status-hidden { color: #5f6268; background: #eceff2; }
.career-request-card h3 { margin: .35rem 0 .1rem; font-size: .9rem; overflow-wrap: anywhere; }
.career-request-card > header p { margin: 0; color: var(--cf-muted); font-size: .65rem; }
.career-request-description { margin: .75rem 0; font-size: .76rem; line-height: 1.55; }
.career-request-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; padding-top: .65rem; border-top: 1px solid var(--cf-line); color: var(--cf-muted); font-size: .65rem; }
.career-request-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.career-referral-form { margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--cf-line); }
.career-referral-form summary { display: flex; align-items: center; gap: .35rem; color: var(--cf-green); cursor: pointer; font-size: .72rem; font-weight: 800; }
.career-referral-form form { display: grid; gap: .65rem; margin-top: .75rem; }
.career-referral-form .form-label { margin: 0; font-size: .7rem; }
.career-referral-form .form-label .form-control { margin-top: .25rem; }
.career-referral-form .form-check { font-size: .68rem; }
.career-profile-current { display: grid; gap: .55rem; margin-top: 1rem; }
.career-profile-current > span { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .1rem .4rem; padding: .7rem; border: 1px solid var(--cf-line); border-radius: 7px; }
.career-profile-current i { grid-row: 1 / 3; color: var(--cf-green); }
.career-profile-current strong,
.career-profile-current small { min-width: 0; overflow-wrap: anywhere; }
.career-profile-current strong { font-size: .76rem; }
.career-profile-current small { color: var(--cf-muted); font-size: .66rem; }
.career-profile-current > a { color: var(--cf-green); font-size: .7rem; font-weight: 700; text-decoration: none; }
.career-profile-current > a i { margin-left: .3rem; }
.career-impact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); gap: 1rem; }
.career-impact-summary { grid-column: 1 / -1; }
.career-impact-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.career-impact-grid > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: .1rem .45rem; padding: .65rem; border: 1px solid var(--cf-line); border-radius: 7px; }
.career-impact-grid i { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #fff; background: #32634e; }
.career-impact-grid > div:nth-child(even) i { background: #1d5f8d; }
.career-impact-grid strong { font-size: .95rem; line-height: 1; }
.career-impact-grid span { color: var(--cf-muted); font-size: .58rem; line-height: 1.2; }
.career-outcome-list { display: grid; }
.career-outcome-list article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .65rem 0; border-bottom: 1px solid var(--cf-line); }
.career-outcome-list article:last-child { border-bottom: 0; }
.career-outcome-list article > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #176239; background: #dff4e7; }
.career-outcome-list strong { display: block; font-size: .75rem; }
.career-outcome-list p { margin: .1rem 0 0; color: var(--cf-muted); font-size: .65rem; }
.career-outcome-list time { color: var(--cf-muted); font-size: .62rem; }

@media (max-width: 1199.98px) {
  .career-company-grid,
  .career-recruiter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .career-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-metrics a:nth-child(2) { border-right: 0; }
  .career-metrics a:nth-child(-n + 2) { border-bottom: 1px solid var(--cf-line); }
  .career-overview-grid,
  .career-impact-layout { grid-template-columns: minmax(0, 1fr); }
  .career-request-create,
  .career-profile-layout { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
}

@media (max-width: 767.98px) {
  .career-hub { padding-top: .8rem; }
  .career-heading { align-items: flex-start; }
  .career-heading .btn { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .career-heading .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .career-heading h1 { font-size: 1.55rem; }
  .career-heading p { font-size: .78rem; }
  .career-tabs { margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); }
  .career-tabs .nav-link { flex: 0 0 auto; min-width: 96px; }
  .career-request-list { grid-template-columns: minmax(0, 1fr); }
  .career-referral-list > article { grid-template-columns: 36px minmax(0, 1fr); }
  .career-referral-list .avatar { width: 36px; height: 36px; }
  .career-referral-actions { grid-column: 2; }
  .career-request-filters { grid-template-columns: minmax(0, 1fr) 42px; }
  .career-request-filters select { grid-column: 1; grid-row: 2; }
  .career-request-filters .btn { grid-column: 2; grid-row: 1; width: 42px; padding: 0; }
  .career-request-filters .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; }
}

@media (max-width: 575.98px) {
  .career-metrics a { padding: .7rem; }
  .career-metrics i { width: 30px; height: 30px; }
  .career-metrics strong { font-size: 1rem; }
  .career-metrics span { font-size: .62rem; }
  .career-overview-section,
  .career-directory-section,
  .career-referrals-section,
  .career-requests-section,
  .career-impact-summary,
  .career-outcome-form-section,
  .career-my-outcomes { padding: .85rem; }
  .career-company-grid,
  .career-recruiter-grid,
  .career-company-preview { grid-template-columns: minmax(0, 1fr); }
  .career-search-form { grid-template-columns: minmax(0, 1fr) 42px; }
  .career-search-form .btn { width: 42px; padding: 0; }
  .career-search-form .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .career-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-compact-list > a { grid-template-columns: 34px minmax(0, 1fr); }
  .career-list-badge { grid-column: 2; justify-self: start; }
  .career-request-card > header { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .career-request-icon { width: 34px; height: 34px; }
  .career-referral-title { align-items: flex-start; flex-direction: column; }
  .career-outcome-list article { grid-template-columns: 28px minmax(0, 1fr); }
  .career-outcome-list time { grid-column: 2; }
}
.project-calendar-text { margin-top: 1rem; }
.project-members-list { border-top: 1px solid var(--cf-line); }
.project-member-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; min-height: 72px; padding: .65rem 0; border-bottom: 1px solid var(--cf-line); }
.project-member-row .avatar { width: 42px; height: 42px; }
.project-member-row > div { display: grid; min-width: 0; }
.project-member-row > div strong { font-size: .8rem; overflow-wrap: anywhere; }
.project-member-row > div span,
.project-member-row > div small { color: var(--cf-muted); font-size: .66rem; }
.project-hours { display: grid; justify-items: end; color: var(--cf-muted); }
.project-hours strong { color: var(--cf-green); font-size: .76rem; }
.project-hours small { font-size: .6rem; }
.project-member-action { display: flex; align-items: center; gap: .3rem; }
.project-member-action .form-select { width: 112px; }
.project-inline-form,
.project-document-form { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(90px, .3fr) auto; gap: .5rem; margin-top: .8rem; }
.project-task-board { display: grid; gap: .55rem; margin-top: .8rem; }
.project-progress-large { height: 9px; }
.project-task { display: grid; grid-template-columns: minmax(0, 1fr) 135px; align-items: center; gap: .8rem; padding: .8rem; border-left: 4px solid #8b9892; border-radius: 6px; background: var(--cf-surface); }
.project-task-in_progress { border-left-color: var(--cf-blue); }
.project-task-blocked { border-left-color: var(--cf-coral); }
.project-task-done { border-left-color: var(--cf-green); opacity: .8; }
.project-task > div > span { color: var(--cf-muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.project-task h3 { margin: .12rem 0; font-size: .85rem; }
.project-task p { margin: 0; color: var(--cf-muted); font-size: .72rem; }
.project-task small { color: var(--cf-muted); font-size: .64rem; }
.project-create-disclosure { margin-top: .8rem; }
.project-create-disclosure summary,
.project-aside-edit summary { display: inline-flex; align-items: center; gap: .4rem; color: var(--cf-green); font-size: .75rem; font-weight: 800; cursor: pointer; list-style: none; }
.project-create-disclosure form,
.project-aside-edit form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; padding: .8rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.project-create-disclosure textarea,
.project-create-disclosure .btn { grid-column: 1 / -1; }
.project-update-list { display: grid; gap: .8rem; }
.project-update-list > article { padding: .9rem; border-left: 3px solid var(--cf-blue); background: var(--cf-surface); }
.project-update-author { display: flex; align-items: center; gap: .5rem; }
.project-update-author .avatar { width: 34px; height: 34px; }
.project-update-author span { display: grid; }
.project-update-author strong { font-size: .72rem; }
.project-update-author small { color: var(--cf-muted); font-size: .62rem; }
.project-update-list h3 { margin: .7rem 0 .3rem; font-size: .92rem; }
.project-update-list p { margin: 0; color: var(--cf-muted); font-size: .78rem; }
.project-meeting-list,
.project-document-list { display: grid; border-top: 1px solid var(--cf-line); }
.project-meeting-list > article { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--cf-line); }
.project-meeting-list time { display: grid; justify-items: center; padding: .4rem; border-radius: 6px; color: var(--cf-green); background: #e8f2ed; }
.project-meeting-list time strong { font-size: 1.05rem; }
.project-meeting-list time span { font-size: .55rem; text-transform: uppercase; }
.project-meeting-list h3 { margin: 0; font-size: .84rem; }
.project-meeting-list p,
.project-meeting-list small { margin: .15rem 0 0; color: var(--cf-muted); font-size: .66rem; }
.project-document-list > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: .55rem; padding: .65rem 0; border-bottom: 1px solid var(--cf-line); color: var(--cf-ink); text-decoration: none; }
.project-document-list > a > i:first-child { color: var(--cf-blue); font-size: 1.2rem; }
.project-document-list span { display: grid; min-width: 0; }
.project-document-list strong { font-size: .76rem; overflow-wrap: anywhere; }
.project-document-list small { color: var(--cf-muted); font-size: .62rem; overflow-wrap: anywhere; }
.project-document-form { grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) 120px auto; }
.project-indicator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.project-indicator-grid article { display: grid; gap: .25rem; padding: .8rem; border: 1px solid var(--cf-line); border-radius: 7px; background: var(--cf-surface); }
.project-indicator-grid article > span { color: var(--cf-muted); font-size: .66rem; }
.project-indicator-grid article > strong { color: var(--cf-green); font-size: 1.1rem; }
.project-indicator-grid article > small { color: var(--cf-muted); font-size: .62rem; }
.project-indicator-form { grid-template-columns: 1.2fr .5fr .5fr .45fr auto; }
.project-testimonial-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.project-testimonial-list blockquote { margin: 0; padding: .85rem; border-left: 3px solid var(--cf-gold); background: var(--cf-surface); }
.project-testimonial-list blockquote > div { display: flex; align-items: center; gap: .5rem; }
.project-testimonial-list .avatar { width: 34px; height: 34px; }
.project-testimonial-list span { display: grid; }
.project-testimonial-list strong { font-size: .72rem; }
.project-testimonial-list small { color: var(--cf-muted); font-size: .6rem; }
.project-testimonial-list p { margin: .6rem 0 0; color: var(--cf-muted); font-size: .76rem; }
.project-testimonial-review { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.project-testimonial-form { display: grid; gap: .5rem; margin-top: .8rem; }
.project-testimonial-form .btn { justify-self: start; }
.project-empty-inline { padding: .8rem; color: var(--cf-muted); font-size: .74rem; text-align: center; }
.project-detail-aside { position: sticky; top: 125px; display: grid; gap: .8rem; }
.project-detail-aside > section,
.project-aside-edit { padding: .9rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.project-detail-aside h2 { margin: .2rem 0 .6rem; font-size: .95rem; }
.project-detail-aside form { display: grid; gap: .5rem; }
.project-detail-aside form label { margin-top: .2rem; color: var(--cf-muted); font-size: .65rem; font-weight: 800; }
.project-progress-ring { --ring-color: var(--cf-green); display: grid; width: 112px; height: 112px; margin: .7rem auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--project-progress) * 1%), #e3e9e6 0); }
.project-progress-ring::before { grid-area: 1 / 1; width: 82px; height: 82px; border-radius: 50%; background: var(--cf-surface); content: ''; }
.project-progress-ring strong { z-index: 1; grid-area: 1 / 1; }
.project-detail-aside > section > small { display: block; color: var(--cf-muted); font-size: .62rem; text-align: center; }
.project-aside-edit form { grid-template-columns: minmax(0, 1fr); max-height: 65vh; overflow-y: auto; }
.project-activity ol { margin: .7rem 0 0; padding: 0; list-style: none; }
.project-activity li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: .5rem; }
.project-activity li > span { position: relative; width: 8px; height: 8px; margin-top: .25rem; border-radius: 50%; background: var(--cf-green); }
.project-activity li > span::after { position: absolute; top: 8px; bottom: -42px; left: 3px; width: 1px; background: var(--cf-line); content: ''; }
.project-activity li:last-child > span::after { display: none; }
.project-activity li > div { display: grid; padding-bottom: .7rem; }
.project-activity li strong { font-size: .65rem; }
.project-activity li small { color: var(--cf-muted); font-size: .58rem; }
.project-activity li p { margin: .15rem 0 0; color: var(--cf-muted); font-size: .6rem; }

@media (max-width: 1199.98px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-filters .btn { justify-self: start; }
  .project-member-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .project-member-action { grid-column: 2 / -1; }
}

@media (max-width: 991.98px) {
  .project-create-section,
  .project-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .project-create-intro,
  .project-detail-aside { position: static; }
  .project-detail-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-aside-edit,
  .project-activity { grid-column: 1 / -1; }
  .project-document-form,
  .project-indicator-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .project-hub,
  .project-detail { padding-top: 1.2rem; }
  .project-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
  .project-heading .btn { align-self: flex-start; }
  .project-filters,
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-filters .btn { width: 100%; }
  .project-card-body { min-height: 0; }
  .project-card-body > p { min-height: 0; }
  .project-create-section { margin-top: 2rem; gap: 1rem; }
  .project-create-form { padding: .85rem; }
  .project-detail-hero { grid-template-columns: minmax(0, 1fr); }
  .project-detail-cover { aspect-ratio: 16 / 8; }
  .project-impact-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cf-line); border-left: 0; }
  .project-impact-summary > div { padding: .65rem .35rem; border-right: 1px solid var(--cf-line); border-bottom: 0; text-align: center; }
  .project-impact-summary > div:last-child { border-right: 0; }
  .project-impact-summary strong { font-size: 1rem; }
  .project-anchor-nav { top: 57px; margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .project-join-strip { align-items: stretch; flex-direction: column; }
  .project-join-strip details > summary { width: 100%; }
  .project-join-strip details form { position: static; width: 100%; margin-top: .5rem; }
  .project-overview-grid,
  .project-detail-aside,
  .project-indicator-grid,
  .project-testimonial-list { grid-template-columns: minmax(0, 1fr); }
  .project-member-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: .5rem; }
  .project-member-row .avatar { width: 38px; height: 38px; }
  .project-member-action { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .project-member-action .form-select { width: 100%; }
  .project-inline-form,
  .project-document-form,
  .project-indicator-form { grid-template-columns: minmax(0, 1fr); }
  .project-task { grid-template-columns: minmax(0, 1fr); }
  .project-create-disclosure form { grid-template-columns: minmax(0, 1fr); }
  .project-create-disclosure textarea,
  .project-create-disclosure .btn { grid-column: auto; }
  .project-meeting-list > article { grid-template-columns: 50px minmax(0, 1fr); }
  .project-meeting-list > article > .btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 1199.98px) {
  .mentor-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mentor-filter .btn { justify-self: start; }
  .mentor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .mentorship-form-layout,
  .mentorship-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .mentorship-form-intro,
  .mentorship-detail-aside { position: static; }
  .mentorship-detail-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mentorship-history { grid-column: 1 / -1; }
  .session-update form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .mentorship-hub,
  .mentorship-detail { padding-top: 1.25rem; }
  .mentorship-heading,
  .mentorship-detail-header,
  .mentorship-section-head { align-items: stretch; flex-direction: column; }
  .mentorship-heading h1 { font-size: 1.75rem; }
  .mentorship-heading .btn { align-self: flex-start; }
  .mentorship-section-head > p { text-align: left; }
  .mentorship-nav { margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .mentorship-nav a { min-height: 46px; padding: .65rem .7rem; }
  .mentor-filter { grid-template-columns: minmax(0, 1fr); padding: .85rem; }
  .mentor-filter .btn { width: 100%; justify-content: center; }
  .mentor-grid { grid-template-columns: minmax(0, 1fr); }
  .mentor-result-top { grid-template-columns: 64px minmax(0, 1fr) 32px; gap: .6rem; }
  .mentor-result-top > .avatar { width: 64px; height: 64px; }
  .mentorship-form { padding: .9rem; }
  .mentorship-list-item { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .55rem; }
  .mentorship-list-date { grid-column: 2; }
  .mentorship-list-item > .bi-chevron-right { display: none; }
  .mentorship-header-actions { justify-content: flex-start; }
  .action-popover { position: static; }
  .action-popover > form { position: fixed; z-index: 1080; right: .75rem; bottom: .75rem; top: auto; left: .75rem; width: auto; }
  .mentorship-decision-panel { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .decision-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .inline-create-form { grid-template-columns: minmax(0, 1fr); }
  .inline-create-form .btn { width: 100%; justify-content: center; }
  .note-create-form > div,
  .review-form { grid-template-columns: minmax(0, 1fr); }
  .session-create-form > .btn { width: 100%; }
  .mentorship-detail-aside { grid-template-columns: minmax(0, 1fr); }
  .mentorship-history { grid-column: auto; }
}

@media (max-width: 479.98px) {
  .mentorship-nav a span { font-size: .75rem; }
  .mentor-result-actions { grid-template-columns: minmax(0, 1fr); }
  .mentorship-list-item { grid-template-columns: 38px minmax(0, 1fr); }
  .mentorship-list-item > .badge { grid-column: 2; justify-self: start; }
  .mentorship-goal { grid-template-columns: 20px minmax(0, 1fr); padding: .55rem 0; }
  .mentorship-goal form { grid-column: 2; }
  .mentorship-session { grid-template-columns: 54px minmax(0, 1fr); }
  .session-date { width: 54px; height: 58px; }
  .session-title { align-items: flex-start; flex-direction: column; }
  .note-meta { align-items: flex-start; flex-direction: column; }
}

/* Annuaire intelligent */
.directory-heading,
.directory-section-heading,
.directory-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.directory-heading {
  margin-bottom: 1.15rem;
}

.directory-heading h1,
.directory-section-heading h2 {
  margin: 0;
}

.directory-tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--cf-line);
  overflow-x: auto;
}

.directory-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .65rem .9rem;
  border-bottom: 3px solid transparent;
  color: var(--cf-muted);
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.directory-tab:hover,
.directory-tab:focus,
.directory-tab.active {
  border-bottom-color: var(--cf-green);
  color: var(--cf-green-dark);
}

.directory-tab > span {
  min-width: 24px;
  padding: .1rem .35rem;
  border-radius: 999px;
  background: var(--cf-paper);
  color: var(--cf-ink);
  font-size: .72rem;
  text-align: center;
}

.directory-filter-panel {
  margin-bottom: 2rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--cf-line);
  background: var(--cf-surface);
}

.directory-filter-primary {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) minmax(160px, .7fr) minmax(160px, .7fr) auto;
  align-items: end;
  gap: .8rem;
}

.directory-search-field,
.directory-member-copy {
  min-width: 0;
}

.directory-filter-submit {
  min-height: 42px;
  padding-inline: 1rem;
}

.directory-advanced-filters {
  margin-top: .8rem;
}

.directory-advanced-filters summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  color: var(--cf-green-dark);
  font-size: .88rem;
  font-weight: 750;
  cursor: pointer;
}

.directory-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  padding-top: .7rem;
}

.directory-mentor-check {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  margin-top: 1.9rem;
}

.directory-mentor-check span,
.directory-mentor-check small {
  display: block;
}

.directory-mentor-check small {
  margin-top: .1rem;
  color: var(--cf-muted);
  font-size: .72rem;
}

.directory-filter-actions {
  display: flex;
  gap: .55rem;
  margin-top: 1rem;
}

.directory-suggestions,
.directory-results {
  margin-top: 2rem;
}

.directory-suggestions {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cf-line);
}

.directory-section-heading {
  align-items: end;
  margin-bottom: 1rem;
}

.directory-section-heading > p {
  max-width: 520px;
  margin: 0;
  color: var(--cf-muted);
  font-size: .85rem;
  text-align: right;
}

.directory-member-card {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.directory-member-card:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 107, 79, .32);
  box-shadow: 0 15px 32px rgba(24, 52, 43, .11);
}

.directory-member-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .9rem;
  padding: 1.05rem;
}

.directory-member-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: .8rem;
  padding-right: 2.25rem;
}

.directory-member-main .avatar {
  width: 52px;
  height: 52px;
}

.directory-member-copy h2 {
  overflow-wrap: anywhere;
}

.directory-member-position {
  color: var(--cf-ink);
  font-size: .9rem;
  font-weight: 650;
}

.directory-member-meta {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin-top: .25rem;
  color: var(--cf-muted);
  font-size: .78rem;
}

.directory-member-signals {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.directory-match-reason {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .26rem .5rem;
  border: 1px solid #c7ddd5;
  border-radius: 999px;
  background: #eef7f3;
  color: #245d49;
  font-size: .72rem;
  font-weight: 700;
}

.directory-favorite-form {
  position: absolute;
  top: .72rem;
  right: .72rem;
  z-index: 3;
  margin: 0;
}

.directory-favorite-button,
.directory-reshuffle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cf-line);
  border-radius: 50%;
  background: var(--cf-surface);
  color: var(--cf-muted);
  text-decoration: none;
}

.directory-favorite-button:hover,
.directory-favorite-button:focus,
.directory-favorite-button.is-favorite {
  border-color: #dc7884;
  color: #b42335;
  background: #fff1f3;
}

.directory-reshuffle:hover,
.directory-reshuffle:focus {
  border-color: var(--cf-green);
  color: var(--cf-green-dark);
}

.directory-empty {
  display: grid;
  justify-items: center;
  gap: .35rem;
}

.directory-empty > i {
  color: var(--cf-green);
  font-size: 1.7rem;
}

.directory-empty h3,
.directory-empty p {
  margin: 0;
}

.directory-pagination {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cf-line);
}

.directory-page-links {
  display: flex;
  gap: .4rem;
}

@media (max-width: 991.98px) {
  .directory-filter-primary {
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, .7fr) minmax(150px, .7fr);
  }

  .directory-filter-submit {
    grid-column: 3;
  }

  .directory-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .directory-page {
    padding-top: 1.25rem;
  }

  .directory-heading,
  .directory-section-heading,
  .directory-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .directory-heading h1 {
    font-size: 1.75rem;
  }

  .directory-tabs {
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
  }

  .directory-filter-primary,
  .directory-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .directory-filter-submit {
    grid-column: auto;
    width: 100%;
  }

  .directory-mentor-check {
    margin-top: .25rem;
  }

  .directory-section-heading > p {
    text-align: left;
  }

  .directory-member-card {
    min-height: 0;
  }

  .directory-pagination,
  .directory-page-links {
    width: 100%;
  }

  .directory-page-links {
    overflow-x: auto;
    padding-bottom: .2rem;
  }
}

@media (max-width: 479.98px) {
  .directory-student-legend {
    border-radius: 6px;
  }

  .directory-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-member-card .card-body {
    padding: .9rem;
  }

  .directory-member-main {
    grid-template-columns: 46px minmax(0, 1fr);
    padding-right: 2rem;
  }

  .directory-member-main .avatar {
    width: 46px;
    height: 46px;
  }

  .directory-favorite-button {
    width: 36px;
    height: 36px;
  }

  .directory-page-links .btn span {
    display: none;
  }
}

/* ===== Sondages Phase 3B ===== */
.survey-hub,
.survey-reader-page,
.survey-results-page {
  min-height: calc(100vh - 80px);
  padding-top: 1.6rem;
  background: linear-gradient(180deg, #edf4f1 0, var(--cf-paper) 260px);
}

.survey-hub-container { max-width: 1080px; }
.survey-reader-container { max-width: 820px; }

.survey-hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.survey-hub-head h1,
.survey-results-head h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
}

.survey-hub-head p:last-child,
.survey-results-head p { margin: .35rem 0 0; color: var(--cf-muted); }

.survey-tabs {
  display: flex;
  gap: .45rem;
  margin-bottom: 1.1rem;
  overflow-x: auto;
}

.survey-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .5rem .75rem;
  border: 1px solid #d9e3dd;
  border-radius: 8px;
  color: #456157;
  background: #fff;
  font-size: .86rem;
  font-weight: 750;
  text-decoration: none;
}

.survey-tabs a span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #edf3ef;
  font-size: .7rem;
}

.survey-tabs a.active { border-color: var(--cf-green); color: #fff; background: var(--cf-green); }
.survey-tabs a.active span { color: var(--cf-green-dark); background: #fff; }

.survey-builder-panel,
.survey-list,
.survey-reader,
.survey-results-head,
.survey-result-section {
  border: 1px solid #dde6e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 35, 31, .06);
}

.survey-builder-panel { overflow: hidden; }
.survey-back-link { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: var(--cf-primary); font-weight: 700; text-decoration: none; }
.survey-edit-page { padding-top: 2rem; padding-bottom: 4rem; }

.survey-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  color: #fff;
  background: linear-gradient(115deg, var(--cf-green-dark), var(--cf-blue));
}

.survey-builder-head span,
.survey-questions-head span { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.survey-builder-head h2,
.survey-questions-head h2 { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 800; }
.survey-builder-head > i { font-size: 1.7rem; opacity: .86; }

.survey-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  padding: 1.25rem;
}

.survey-field { min-width: 0; }
.survey-field-wide { grid-column: span 2; }
.survey-field-full { grid-column: 1 / -1; }
.survey-field label,
.survey-question-fields label { display: block; margin-bottom: .35rem; color: #4d635a; font-size: .8rem; font-weight: 750; }

.survey-toggle {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin-top: 1.55rem;
  padding: .65rem .75rem;
  border: 1px solid #dce5df;
  border-radius: 8px;
  cursor: pointer;
}

.survey-toggle > input { margin-right: .6rem; }
.survey-toggle span { display: flex; align-items: center; gap: .45rem; color: #385448; font-size: .84rem; }

.survey-questions-section { padding: 0 1.25rem 1.25rem; }
.survey-questions-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 0 .75rem; border-top: 1px solid #e4ebe6; }
.survey-questions-head span { color: var(--cf-muted); }
.survey-questions { display: grid; gap: .7rem; }

.survey-question-builder {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 38px;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid #dde6e0;
  border-radius: 8px;
  background: #f9fbfa;
}

.survey-question-number { padding-top: 1.85rem; color: #819087; text-align: center; }
.survey-question-fields { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(150px, .7fr); gap: .7rem; }
.survey-options-field { grid-column: 1 / -1; }
.survey-question-required { grid-column: 1 / -1; margin: 0 !important; }
.survey-question-remove { align-self: start; display: grid; place-items: center; width: 36px; height: 36px; margin-top: 1.45rem; border: 1px solid #efcfd3; border-radius: 6px; color: #a33b48; background: #fff; }

.survey-builder-actions { display: flex; justify-content: flex-end; gap: .55rem; padding: 1rem 1.25rem; border-top: 1px solid #e4ebe6; background: #f8faf9; }

.survey-list { overflow: hidden; }
.survey-list-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-bottom: 1px solid #e5ebe7; }
.survey-list-row:last-child { border-bottom: 0; }
.survey-list-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; color: #27644d; background: #e8f3ed; font-size: 1.2rem; }
.survey-list-copy { min-width: 0; }
.survey-list-copy h2 { margin: .25rem 0; font-size: 1rem; font-weight: 800; }
.survey-list-copy h2 a { color: inherit; text-decoration: none; }
.survey-list-copy p { margin: 0; color: #5f7169; font-size: .86rem; }
.survey-list-copy small { display: block; margin-top: .3rem; color: #7b8982; }
.survey-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; color: #73827b; font-size: .72rem; }
.survey-status { padding: .18rem .42rem; border-radius: 5px; color: #315d4a; background: #e8f3ed; font-weight: 800; }
.survey-status-draft { color: #5d5962; background: #eeecef; }
.survey-status-scheduled { color: #5b4776; background: #f0ebf5; }
.survey-status-closed { color: #755b32; background: #f5efdf; }
.survey-status-rejected { color: #983d48; background: #f9e9eb; }
.survey-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.survey-answered { display: inline-flex; align-items: center; gap: .3rem; color: #39705a; font-size: .8rem; font-weight: 750; }

.survey-reader-nav { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .8rem; }
.survey-reader-nav > a:first-child { color: #385a4c; font-weight: 750; text-decoration: none; }
.survey-reader { overflow: hidden; }
.survey-reader > header { padding: 1.3rem 1.4rem; border-bottom: 1px solid #e4ebe6; background: #f9fbfa; }
.survey-reader > header h1 { margin: .7rem 0 .4rem; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800; }
.survey-reader > header p { margin: 0 0 .65rem; color: #4f635a; }
.survey-reader > header small { color: var(--cf-muted); }
.survey-reader-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.survey-reader-badges span { padding: .3rem .5rem; border-radius: 6px; color: #36594b; background: #e9f3ee; font-size: .73rem; font-weight: 750; }
.survey-response-form { padding: 0 1.4rem 1.4rem; }
.survey-question-block { padding: 1.2rem 0; border-bottom: 1px solid #e5ebe7; }
.survey-question-block legend { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .8rem; color: #203c32; font-size: .98rem; font-weight: 800; }
.survey-question-block legend > span { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: #fff; background: var(--cf-green); font-size: .75rem; }
.survey-question-block legend sup { color: #b53646; }
.survey-choice { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin-bottom: .45rem; padding: .55rem .7rem; border: 1px solid #dee6e1; border-radius: 8px; background: #fbfcfb; cursor: pointer; }
.survey-choice:hover { border-color: #a7c5b6; background: #f3f8f5; }
.survey-choice input { flex: 0 0 auto; }
.survey-response-form > footer { display: flex; flex-wrap: wrap; gap: .55rem; padding-top: 1.1rem; }
.survey-state { display: flex; align-items: center; gap: .8rem; margin: 1.4rem; padding: 1rem; border: 1px solid #eadfbf; border-radius: 8px; color: #6f592a; background: #fffaf0; }
.survey-state.success { border-color: #cfe3d8; color: #285b45; background: #f0f8f4; }
.survey-state > i { font-size: 1.5rem; }
.survey-state h2 { margin: 0; font-size: 1rem; }
.survey-state p { margin: .2rem 0 0; }
.survey-reader > .btn { margin: 0 1.4rem 1.4rem; }
.survey-report { margin: 0 1.4rem 1.4rem; padding-top: .8rem; border-top: 1px solid #e5ebe7; }
.survey-report summary { color: #91505a; font-size: .8rem; cursor: pointer; }
.survey-report form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: .6rem; }

.survey-results-head { margin-bottom: .9rem; padding: 1.2rem 1.3rem; }
.survey-results-head > span { color: #32634e; font-size: .8rem; font-weight: 800; }
.survey-results-list { display: grid; gap: .8rem; }
.survey-result-section { padding: 1.1rem 1.2rem; }
.survey-result-section h2 { display: flex; align-items: flex-start; gap: .55rem; margin: 0; font-size: 1rem; font-weight: 800; }
.survey-result-section h2 > span { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: #fff; background: var(--cf-green); font-size: .72rem; }
.survey-result-row > div:first-child { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .3rem; font-size: .84rem; }
.survey-result-track { height: 9px; border-radius: 5px; }
.survey-text-answers blockquote { margin: .7rem 0 0; padding: .75rem .85rem; border-left: 3px solid #94b7a6; background: #f7faf8; }
.survey-text-answers blockquote p { margin: 0; }
.survey-text-answers blockquote footer { margin-top: .35rem; color: var(--cf-muted); font-size: .72rem; }

@media (max-width: 767.98px) {
  .survey-hub,
  .survey-reader-page,
  .survey-results-page { padding-top: .85rem; }
  .survey-hub-head { align-items: stretch; flex-direction: column; }
  .survey-hub-head .btn { width: 100%; }
  .survey-form-grid { grid-template-columns: 1fr; padding: .9rem; }
  .survey-field-wide,
  .survey-field-full { grid-column: auto; }
  .survey-toggle { margin-top: 0; }
  .survey-questions-section { padding: 0 .9rem .9rem; }
  .survey-question-builder { grid-template-columns: minmax(0, 1fr) 36px; }
  .survey-question-number { display: none; }
  .survey-question-fields { grid-template-columns: 1fr; }
  .survey-options-field,
  .survey-question-required { grid-column: auto; }
  .survey-builder-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .9rem; }
  .survey-builder-actions .btn:last-child { grid-column: 1 / -1; }
  .survey-list-row { grid-template-columns: 42px minmax(0, 1fr); padding: .85rem; }
  .survey-list-icon { width: 40px; height: 40px; }
  .survey-row-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 50px; }
  .survey-reader > header,
  .survey-response-form { padding-inline: .9rem; }
  .survey-state { margin: .9rem; }
  .survey-report { margin-inline: .9rem; }
}

@media (max-width: 479.98px) {
  .survey-builder-actions { grid-template-columns: 1fr; }
  .survey-builder-actions .btn:last-child { grid-column: auto; }
  .survey-row-actions { padding-left: 0; }
  .survey-row-actions .btn,
  .survey-row-actions form { flex: 1 1 auto; }
  .survey-row-actions form .btn { width: 100%; }
  .survey-report form { grid-template-columns: 1fr; }
}

/* Groupes et communautés */
.group-community-page,
.group-space-page {
  min-height: 75vh;
}

.group-community-heading,
.group-content-heading,
.group-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.group-community-heading { margin-bottom: 1.4rem; }
.group-community-heading h1 { margin: .2rem 0 .45rem; }
.group-section-heading { margin: 1.7rem 0 .9rem; }
.group-section-heading h2,
.group-content-heading h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.group-section-heading p,
.group-content-heading p { margin: 0; color: var(--cf-muted); }

.group-community-tabs,
.group-space-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 50px;
  border-bottom: 1px solid var(--cf-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.group-community-tabs::-webkit-scrollbar,
.group-space-tabs::-webkit-scrollbar { display: none; }

.group-community-tabs a,
.group-space-tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
  min-height: 49px;
  padding: .72rem .9rem;
  color: var(--cf-muted);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.group-community-tabs a::after,
.group-space-tabs a::after {
  position: absolute;
  right: .65rem;
  bottom: -1px;
  left: .65rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cf-green);
  content: "";
  opacity: 0;
}

.group-community-tabs a.active,
.group-space-tabs a.active { color: var(--cf-green-dark); }
.group-community-tabs a.active::after,
.group-space-tabs a.active::after { opacity: 1; }
.group-community-tabs .notification-count,
.group-space-tabs b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: .72rem;
}

.group-discovery-filters {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(170px, 1fr) minmax(140px, .8fr) auto;
  gap: .65rem;
  margin: 1.25rem 0;
}

.group-search-field {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding-left: .8rem;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-surface);
  color: var(--cf-muted);
}

.group-search-field .form-control { border: 0; box-shadow: none; }

.group-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.group-suggestion-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--cf-line);
}

.group-community-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
  box-shadow: 0 4px 16px rgba(16, 35, 31, .045);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.group-community-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 107, 79, .35);
  box-shadow: var(--cf-shadow);
}

.group-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: linear-gradient(135deg, #e9f4ef, #e8f0f6 55%, #f6efe1);
  color: var(--cf-green);
  text-decoration: none;
}

.group-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.group-card-visual > i { font-size: 2.4rem; }
.group-card-visual.small { width: 86px; min-width: 86px; aspect-ratio: 1; border-radius: 6px; }
.group-match-badge {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .3rem .5rem;
  border-radius: 5px;
  background: rgba(16, 35, 31, .88);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.group-card-body { padding: 1rem; }
.group-card-meta { display: flex; justify-content: space-between; gap: .5rem; color: var(--cf-muted); font-size: .75rem; font-weight: 700; }
.group-card-body h2 { margin: .6rem 0 .4rem; font-size: 1.05rem; line-height: 1.3; }
.group-card-body h2 a { color: var(--cf-ink); text-decoration: none; }
.group-card-body > p { min-height: 3.75rem; margin: 0; color: var(--cf-muted); font-size: .9rem; }
.group-match-reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.group-match-reasons span { padding: .25rem .45rem; border-radius: 4px; background: #eef5f1; color: var(--cf-green-dark); font-size: .7rem; }
.group-card-footer { display: flex; align-items: center; gap: .75rem; min-height: 35px; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--cf-line); color: var(--cf-muted); font-size: .82rem; }
.group-card-open { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--cf-paper); color: var(--cf-green); }

.group-form-layout {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.7fr);
  gap: 1.5rem;
  margin-top: 1.4rem;
  align-items: start;
}

.group-form-intro { position: sticky; top: 90px; padding: 1.3rem; border-left: 4px solid var(--cf-gold); background: var(--cf-surface); }
.group-form-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: #e8f0f6; color: var(--cf-blue); font-size: 1.35rem; }
.group-form-intro h2 { margin: 1rem 0 .5rem; font-size: 1.3rem; }
.group-form-intro p { color: var(--cf-muted); }
.group-feature-list { display: grid; gap: .65rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.group-feature-list li { display: flex; gap: .55rem; align-items: center; color: var(--cf-ink); }
.group-feature-list i { color: var(--cf-green); }
.group-community-form { border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.group-form-section { padding: 1.25rem; border-bottom: 1px solid var(--cf-line); }
.group-form-section h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.group-form-actions { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.25rem; }

.group-invitation-list { display: grid; gap: .75rem; }
.group-invitation-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.group-invitation-copy h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.group-invitation-copy p { margin: 0 0 .25rem; color: var(--cf-muted); }
.group-invitation-copy span { font-size: .8rem; color: var(--cf-muted); }
.group-invitation-actions { display: flex; gap: .5rem; }

.group-back-link { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .8rem; color: var(--cf-muted); font-weight: 700; text-decoration: none; }
.group-space-hero { position: relative; min-height: 280px; overflow: hidden; border-radius: 8px; background: linear-gradient(120deg, #173c34, #245f52 50%, #244e6b); color: #fff; }
.group-space-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-space-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 31, 27, .95), rgba(10, 31, 27, .72) 55%, rgba(10, 31, 27, .42)); }
.group-space-hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 1rem; align-items: end; min-height: 280px; padding: 1.5rem; }
.group-space-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 1.8rem; backdrop-filter: blur(8px); }
.group-space-title h1 { margin: .45rem 0; color: #fff; font-size: clamp(1.75rem, 3vw, 2.65rem); }
.group-space-title > p { max-width: 760px; margin: 0; color: rgba(255,255,255,.82); }
.group-space-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.group-space-badges span { padding: .3rem .5rem; border-radius: 4px; background: rgba(255,255,255,.16); font-size: .74rem; font-weight: 700; }
.group-space-badges .warning { background: #f3c86a; color: #3d2d0d; }
.group-space-stats { display: flex; gap: 1rem; margin-top: .8rem; color: rgba(255,255,255,.78); }
.group-space-stats strong { color: #fff; }
.group-space-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; align-items: center; }
.group-space-actions form { margin: 0; }
.group-member-state { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .7rem; border-radius: 6px; background: rgba(255,255,255,.16); font-weight: 700; }
.group-member-state.danger { background: rgba(182,87,69,.75); }

.group-space-tabs { margin-bottom: 1.25rem; }
.group-feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.group-feed-main { min-width: 0; }
.group-feed-aside { position: sticky; top: 88px; display: grid; gap: .8rem; }
.group-side-block,
.group-side-form,
.group-management-section,
.group-about-section { padding: 1.1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.group-side-block h2,
.group-side-form h2,
.group-about-section h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.group-side-block p { color: var(--cf-muted); }
.group-side-block dl { display: grid; gap: .55rem; margin: 0; }
.group-side-block dl div { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--cf-line); }
.group-side-block dl div:last-child { border: 0; padding: 0; }
.group-side-block dt { color: var(--cf-muted); font-weight: 500; }
.group-side-block dd { margin: 0; text-align: right; font-weight: 700; }

.group-post-composer { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.group-post-composer .composer-author > div { display: grid; }
.group-post-composer .composer-author span { color: var(--cf-muted); font-size: .82rem; }
.group-post-composer textarea { margin-top: .8rem; border: 0; background: var(--cf-paper); resize: vertical; }
.group-composer-actions { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; }
.group-composer-actions .btn { margin-left: auto; }
.group-file-button { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .45rem .65rem; border-radius: 6px; color: var(--cf-green); font-weight: 700; cursor: pointer; }
.group-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.group-feed-list { display: grid; gap: 1rem; }
.group-social-post { position: relative; }
.group-social-post.pinned { border-top: 3px solid var(--cf-gold); }
.group-pinned-label { padding: .55rem 1rem; border-bottom: 1px solid var(--cf-line); color: #7b5514; font-size: .78rem; font-weight: 700; }
.group-post-management { display: flex; gap: .3rem; margin-left: auto; }
.group-post-management form { margin: 0; }
.group-reaction-bar { display: flex; align-items: stretch; min-height: 48px; padding: .35rem .65rem; border-top: 1px solid var(--cf-line); border-bottom: 1px solid var(--cf-line); overflow-x: auto; }
.group-reaction-bar form { flex: 1 1 0; min-width: 62px; margin: 0; }
.group-reaction-bar button { display: flex; align-items: center; justify-content: center; gap: .28rem; width: 100%; min-height: 38px; border: 0; border-radius: 5px; background: transparent; color: var(--cf-muted); }
.group-reaction-bar button:hover,
.group-reaction-bar button.active { background: var(--cf-paper); color: var(--cf-green-dark); }
.group-reaction-bar small { font-size: .68rem; }
.group-reaction-bar .group-report-trigger { width: 42px; min-width: 42px; }
.group-inline-report { padding: .6rem 1rem; background: #fff7f5; }
.group-inline-report form { display: flex; gap: .5rem; }
.group-comment-reactions { display: flex; gap: .12rem; }
.group-comment-reactions form { margin: 0; }
.group-comment-reactions button { border: 0; background: transparent; opacity: .72; }
.group-comment-reactions button:hover { opacity: 1; transform: scale(1.12); }
.group-legacy-post { border-left: 3px solid var(--cf-blue); }

.group-locked-notice { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: 1.2rem; border: 1px solid #d8e2eb; border-radius: 8px; background: #edf3f8; }
.group-locked-notice > i { font-size: 1.8rem; color: var(--cf-blue); }
.group-locked-notice h2 { margin: 0 0 .25rem; font-size: 1.12rem; }
.group-locked-notice p { margin: 0; color: var(--cf-muted); }

.group-member-list,
.group-document-list,
.group-event-list,
.group-survey-list { display: grid; gap: .65rem; margin-top: 1rem; }
.group-member-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .8rem; border-bottom: 1px solid var(--cf-line); }
.group-member-copy h2 { margin: 0; font-size: .98rem; }
.group-member-copy p { margin: .15rem 0 0; color: var(--cf-muted); font-size: .82rem; }
.group-role-badge { padding: .3rem .5rem; border-radius: 4px; background: var(--cf-paper); color: var(--cf-muted); font-size: .72rem; font-weight: 700; }
.group-role-badge.role-admin { background: #f8ecd5; color: #795516; }
.group-role-badge.role-moderator { background: #e8f0f6; color: var(--cf-blue); }
.group-member-actions { display: flex; gap: .35rem; min-width: 190px; }

.group-content-split,
.group-management-grid,
.group-about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; }
.group-content-split > div:first-child { min-width: 0; }
.group-side-form { position: sticky; top: 88px; }
.group-document-row,
.group-survey-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--cf-line); border-radius: 7px; background: var(--cf-surface); color: var(--cf-ink); text-decoration: none; }
.group-document-row > span,
.group-survey-row > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 7px; background: #e8f0f6; color: var(--cf-blue); font-size: 1.15rem; }
.group-document-row strong,
.group-document-row small { display: block; }
.group-document-row small { margin-top: .15rem; color: var(--cf-muted); }
.group-survey-row h2 { margin: 0 0 .2rem; font-size: .98rem; }
.group-survey-row p { margin: 0; color: var(--cf-muted); font-size: .85rem; }
.group-survey-row small { color: var(--cf-green); font-weight: 700; }
.group-event-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .9rem; padding: 1rem; border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-surface); }
.group-event-row time { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 64px; border-radius: 7px; background: #f8ecd5; color: #795516; }
.group-event-row time strong { font-size: 1.35rem; line-height: 1; }
.group-event-row time span { margin-top: .2rem; font-size: .68rem; font-weight: 800; }
.group-event-row h2 { margin: 0 0 .25rem; font-size: 1rem; }
.group-event-row p { margin: 0 0 .5rem; color: var(--cf-muted); }
.group-event-row small { display: block; color: var(--cf-muted); }
.group-event-row a { display: inline-block; margin-top: .5rem; font-weight: 700; }

.group-management-main { display: grid; gap: 1rem; }
.group-management-section .group-content-heading { margin-bottom: .8rem; }
.group-request-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) minmax(260px, .8fr); gap: .75rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--cf-line); }
.group-request-row p { margin: .2rem 0 0; color: var(--cf-muted); }
.group-request-row form { display: grid; gap: .45rem; }
.group-request-row form > div { display: flex; justify-content: flex-end; gap: .35rem; }
.group-about-layout main { display: grid; gap: 1rem; }
.group-about-layout aside { display: grid; gap: .8rem; }
.group-about-section > p,
.group-rules-copy { color: var(--cf-muted); line-height: 1.75; }
.group-report-form { padding: .9rem; border: 1px solid #ecd5cf; border-radius: 8px; background: #fff7f5; }
.group-report-form > div { display: flex; gap: .4rem; }
.group-report-form .btn { width: 42px; min-width: 42px; }
.empty-state.compact { padding: 1.2rem; }

@media (max-width: 1199.98px) {
  .group-card-grid,
  .group-suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-space-hero-content { grid-template-columns: 72px minmax(0, 1fr); }
  .group-space-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .group-feed-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}

@media (max-width: 991.98px) {
  .group-discovery-filters { grid-template-columns: minmax(0, 1fr) minmax(160px, .6fr); }
  .group-form-layout { grid-template-columns: minmax(0, 1fr); }
  .group-form-intro,
  .group-feed-aside,
  .group-side-form { position: static; }
  .group-feed-layout,
  .group-content-split,
  .group-management-grid,
  .group-about-layout { grid-template-columns: minmax(0, 1fr); }
  .group-feed-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .group-community-heading { align-items: stretch; flex-direction: column; }
  .group-community-heading .btn { align-self: flex-start; }
  .group-community-tabs,
  .group-space-tabs { margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .group-community-tabs a,
  .group-space-tabs a { min-height: 46px; padding: .65rem .7rem; }
  .group-discovery-filters { grid-template-columns: minmax(0, 1fr); }
  .group-card-grid,
  .group-suggestion-grid { grid-template-columns: minmax(0, 1fr); }
  .group-card-body > p { min-height: 0; }
  .group-invitation-row { grid-template-columns: 70px minmax(0, 1fr); }
  .group-card-visual.small { width: 70px; min-width: 70px; }
  .group-invitation-actions { grid-column: 1 / -1; }
  .group-space-hero,
  .group-space-hero-content { min-height: 330px; }
  .group-space-hero-content { grid-template-columns: 58px minmax(0, 1fr); align-content: end; padding: 1rem; }
  .group-space-icon { width: 54px; height: 54px; font-size: 1.35rem; }
  .group-space-title h1 { font-size: 1.7rem; }
  .group-space-title > p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .group-space-actions { gap: .4rem; }
  .group-space-actions .btn,
  .group-member-state { min-height: 40px; font-size: .82rem; }
  .group-feed-aside { grid-template-columns: minmax(0, 1fr); }
  .group-post-management { gap: .15rem; }
  .group-reaction-bar small { display: none; }
  .group-reaction-bar form { min-width: 42px; }
  .group-member-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .group-member-actions { grid-column: 2 / -1; min-width: 0; }
  .group-request-row { grid-template-columns: 46px minmax(0, 1fr); }
  .group-request-row form { grid-column: 1 / -1; }
}

@media (max-width: 479.98px) {
  .group-community-heading h1 { font-size: 1.65rem; }
  .group-community-tabs a span,
  .group-space-tabs a span { font-size: .78rem; }
  .group-card-footer { gap: .55rem; }
  .group-form-actions { flex-direction: column-reverse; }
  .group-form-actions .btn { width: 100%; }
  .group-invitation-row { grid-template-columns: 54px minmax(0, 1fr); padding: .8rem; }
  .group-card-visual.small { width: 54px; min-width: 54px; }
  .group-invitation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-space-hero-content { grid-template-columns: minmax(0, 1fr); }
  .group-space-icon { display: none; }
  .group-space-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-space-actions > * { min-width: 0; }
  .group-space-actions .btn,
  .group-space-actions form .btn { width: 100%; }
  .group-space-stats { font-size: .82rem; }
  .group-composer-actions { flex-wrap: wrap; }
  .group-composer-actions .btn { width: 100%; margin-left: 0; }
  .group-file-button span { font-size: .8rem; }
  .group-post-management { flex-wrap: wrap; justify-content: flex-end; }
  .group-inline-report form { align-items: stretch; flex-direction: column; }
  .group-member-row { grid-template-columns: 42px minmax(0, 1fr); padding: .7rem 0; }
  .group-role-badge { grid-column: 2; justify-self: start; }
  .group-member-actions { grid-column: 1 / -1; }
  .group-document-row,
  .group-survey-row { grid-template-columns: 40px minmax(0, 1fr) 18px; padding: .7rem; }
  .group-event-row { grid-template-columns: 52px minmax(0, 1fr); padding: .75rem; }
  .group-event-row time { width: 50px; height: 58px; }
}