/*
 * Portail Associations — Design system 4.0
 * Compatibility layer loaded after portal.css.
 * The legacy stylesheet keeps historical layouts functional; this file owns
 * the coherent visual language used by all current screens.
 */

.pa-app,
.pa-login {
  --pa-space-1:.375rem;
  --pa-space-2:.625rem;
  --pa-space-3:.875rem;
  --pa-space-4:1.125rem;
  --pa-space-5:1.5rem;
  --pa-space-6:2rem;
  --pa-space-7:2.75rem;
  --pa-radius-xs:8px;
  --pa-radius-sm:12px;
  --pa-radius-md:16px;
  --pa-radius-lg:22px;
  --pa-radius-xl:30px;
  --pa-shadow-card:0 1px 2px rgba(18,38,33,.04),0 9px 28px rgba(18,38,33,.055);
  --pa-shadow-card-hover:0 18px 48px rgba(18,38,33,.12);
  --pa-control-height:46px;
  --pa-content-max:1560px;
  --pa-readable:76ch;
}

/* Association spaces inherit a safe palette generated server-side from the logo. */
.pa-app-association {
  --pa-assoc-primary:#176f45;
  --pa-assoc-secondary:#b8cf38;
  --pa-assoc-on-primary:#fff;
  --pa-assoc-on-secondary:#17343a;
  --pa-assoc-soft:#eef7f2;
  --pa-brand:var(--pa-assoc-primary);
  --pa-accent:var(--pa-assoc-secondary);
  --pa-surface-brand:var(--pa-assoc-soft);
  --pa-brand-deep:color-mix(in srgb,var(--pa-assoc-primary) 78%,#102b2f);
  --pa-brand-dark:color-mix(in srgb,var(--pa-assoc-primary) 58%,#0c2428);
}

/* Keep the municipality analytical and neutral. */
.pa-app-municipal {
  --pa-brand:#0a672f;
  --pa-accent:#b8cf38;
  --pa-surface-brand:#e8f0ea;
  --pa-text:#172a2e;
  --pa-text-soft:#4f625e;
  --pa-text-faint:#63736f;
  --pa-border:#cbd5ce;
  --pa-border-strong:#b8c6bc;
  --pa-surface-soft:#f2f5f3;
  --pa-shadow-card:0 1px 2px rgba(18,38,33,.055),0 9px 28px rgba(18,38,33,.075);
}

.pa-app :where(h1,h2,h3,h4,p,span,strong,small,label,a,button,summary,td,th) {
  overflow-wrap:break-word;
}
.pa-app :where(img,svg,video,canvas) { max-width:100%; }
.pa-app :where(input,select,textarea,button) { font:inherit; }
.pa-app :where(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  width:100%;
  min-width:0;
  min-height:var(--pa-control-height);
  padding:.72rem .84rem;
  border:1px solid var(--pa-border-strong);
  border-radius:var(--pa-radius-sm);
  background:#fff;
  color:var(--pa-text);
  box-shadow:0 1px 0 rgba(17,36,31,.025);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.pa-app textarea { min-height:112px; resize:vertical; }
.pa-app :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus {
  border-color:color-mix(in srgb,var(--pa-brand) 62%,#fff);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pa-brand) 12%,transparent);
  outline:0;
}
.pa-app input[type=color] { padding:.25rem; min-height:46px; }
.pa-app input[type=checkbox], .pa-app input[type=radio] { accent-color:var(--pa-brand); }

/* Layout and readable hierarchy. */
.pa-main,
.pa-association-main {
  max-width:var(--pa-content-max);
  padding-inline:clamp(14px,2.5vw,42px);
  padding-top:clamp(20px,2.5vw,36px);
}
.pa-page-title,
.pa-page-title-split {
  position:relative;
  margin-bottom:clamp(20px,2.5vw,32px);
  padding-bottom:0;
}
.pa-page-title h2,
.pa-page-title-visual h1 {
  margin:.2rem 0 .55rem;
  max-width:18ch;
  color:var(--pa-text);
  font-size:clamp(1.9rem,3.2vw,3rem);
  line-height:1.02;
  letter-spacing:-.045em;
  text-transform:none;
}
.pa-page-title p,
.pa-page-title-visual p,
.pa-section-heading p { max-width:var(--pa-readable); }
.pa-eyebrow {
  display:inline-block;
  color:var(--pa-brand);
  font-size:.7rem;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.pa-section-heading {
  align-items:end;
  margin:0 0 14px;
}
.pa-section-heading h2,
.pa-section-heading h3 {
  margin:.2rem 0 0;
  color:var(--pa-text);
  font-size:clamp(1.18rem,2vw,1.55rem);
  line-height:1.18;
  letter-spacing:-.025em;
}
.pa-section-heading > a { color:var(--pa-brand); font-weight:800; text-decoration:none; }

/* Consistent surfaces. */
.pa-card,
.pa-content-card,
.pa-association-panel,
.pa-profile-form-section,
.pa-admin-panel,
.pa-gate-card,
.pa-member-card,
.pa-office-card,
.pa-staff-association-card,
.pa-request-row,
.pa-treatment-list-item {
  border:1px solid var(--pa-border);
  border-radius:var(--pa-radius-lg);
  background:var(--pa-surface);
  box-shadow:var(--pa-shadow-card);
}
.pa-card { padding:clamp(17px,1.8vw,25px); }
.pa-card + .pa-card { margin-top:var(--pa-space-4); }
.pa-card-soft { background:linear-gradient(145deg,#fff,var(--pa-surface-soft)); }
.pa-card-head { align-items:flex-start; gap:14px; margin-bottom:16px; }
.pa-card-head h3 { font-size:1.12rem; letter-spacing:-.02em; }
.pa-card-head p { margin:.3rem 0 0; color:var(--pa-text-soft); }

/* Buttons: one clearly dominant action, secondary actions visually quieter. */
.pa-button,
.pa-link-button {
  min-height:44px;
  padding:.7rem 1rem;
  border-radius:var(--pa-radius-sm);
  font-weight:800;
  box-shadow:none;
}
.pa-button:not(.pa-button-secondary):not(.pa-button-danger):not(.pa-button-light) {
  background:var(--pa-brand);
  border-color:var(--pa-brand);
  color:var(--pa-assoc-on-primary,#fff);
}
.pa-app-municipal .pa-button:not(.pa-button-secondary):not(.pa-button-danger):not(.pa-button-light) { color:#fff; }
.pa-button:hover { transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb,var(--pa-brand) 15%,transparent); }
.pa-button-secondary,
.pa-button-light {
  background:#fff;
  border:1px solid var(--pa-border-strong);
  color:var(--pa-text);
}
.pa-button-secondary:hover,
.pa-button-light:hover {
  background:var(--pa-surface-brand);
  border-color:color-mix(in srgb,var(--pa-brand) 35%,var(--pa-border));
  color:var(--pa-brand);
}
.pa-button-large { min-height:50px; padding-inline:1.2rem; }
.pa-text-button { color:var(--pa-brand); font-weight:800; text-decoration:none; }
.pa-text-button:hover { text-decoration:underline; }
.pa-actions { gap:9px; }

/* Forms should read like guided content rather than database editors. */
.pa-form { display:grid; gap:17px; }
.pa-form > label,
.pa-form-grid > label,
.pa-field,
.pa-form-field,
.pa-generic-field {
  display:grid;
  gap:6px;
  min-width:0;
  color:var(--pa-text);
  font-size:.83rem;
  font-weight:760;
}
.pa-form-grid { gap:14px; }
.pa-profile-form-section { padding:clamp(16px,2vw,24px); box-shadow:none; }
.pa-profile-section-title { margin-bottom:14px; }
.pa-help { line-height:1.45; }
.pa-app .pa-check {
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-height:40px;
  padding:9px 11px;
  border-radius:11px;
  background:var(--pa-surface-soft);
  font-weight:650;
}
.pa-check input { flex:0 0 auto; margin-top:2px; }

/* Tables stay usable where they are genuinely the right representation. */
.pa-table-wrap {
  overflow:auto;
  border:1px solid var(--pa-border);
  border-radius:var(--pa-radius-md);
  background:#fff;
}
.pa-table { width:100%; border-collapse:separate; border-spacing:0; }
.pa-table th {
  position:sticky;
  top:0;
  z-index:1;
  padding:11px 13px;
  background:#f7f8f6;
  color:var(--pa-text-soft);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pa-table td { padding:12px 13px; border-top:1px solid var(--pa-border); vertical-align:top; }

/* Common compact visual identities. */
.pa-association-mark {
  --pa-mark-size:44px;
  display:grid;
  place-items:center;
  flex:0 0 var(--pa-mark-size);
  width:var(--pa-mark-size);
  height:var(--pa-mark-size);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--pa-assoc-primary,#176f45) 18%,#dfe5e1);
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 14px rgba(17,38,32,.08);
}
.pa-association-mark.is-xs { --pa-mark-size:28px; border-radius:9px; }
.pa-association-mark.is-sm { --pa-mark-size:36px; border-radius:11px; }
.pa-association-mark.is-md { --pa-mark-size:46px; }
.pa-association-mark.is-lg { --pa-mark-size:62px; border-radius:18px; }
.pa-association-mark.is-xl { --pa-mark-size:78px; border-radius:22px; }
.pa-association-mark img { width:100%; height:100%; padding:7%; object-fit:contain; background:#fff; }
.pa-association-mark.is-fallback {
  background:var(--pa-assoc-primary,#176f45);
  color:var(--pa-assoc-on-primary,#fff);
  border-color:transparent;
}
.pa-association-mark.is-fallback > span { font-size:clamp(.58rem,1vw,.82rem); font-weight:900; letter-spacing:.035em; }
.pa-association-mark.is-xl.is-fallback > span { font-size:1.05rem; }

/* Badges and state language. */
.pa-badge,
.pa-status-pill {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:26px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--pa-surface-soft);
  color:var(--pa-text-soft);
  font-size:.68rem;
  line-height:1.2;
  font-weight:850;
}
.pa-status-pill.is-success,.pa-badge.is-success { background:var(--pa-success-soft); color:var(--pa-success); }
.pa-status-pill.is-warning,.pa-badge.is-warning { background:var(--pa-warning-soft); color:var(--pa-warning); }
.pa-status-pill.is-danger,.pa-badge.is-danger { background:var(--pa-danger-soft); color:var(--pa-danger); }
.pa-status-pill.is-info,.pa-badge.is-info { background:var(--pa-info-soft); color:var(--pa-info); }

/* Menus move destructive/rare actions out of the primary visual path. */
.pa-action-menu { position:relative; flex:0 0 auto; margin:0; }
.pa-action-menu > summary {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--pa-border);
  border-radius:11px;
  background:#fff;
  color:var(--pa-text-soft);
  font-weight:900;
  letter-spacing:.08em;
  list-style:none;
  cursor:pointer;
}
.pa-action-menu > summary::-webkit-details-marker { display:none; }
.pa-action-menu[open] > summary { border-color:color-mix(in srgb,var(--pa-brand) 35%,var(--pa-border)); background:var(--pa-surface-brand); color:var(--pa-brand); }
.pa-action-menu-popover {
  position:absolute;
  z-index:30;
  top:calc(100% + 7px);
  right:0;
  min-width:160px;
  padding:6px;
  border:1px solid var(--pa-border);
  border-radius:13px;
  background:#fff;
  box-shadow:0 18px 45px rgba(18,38,33,.16);
}
.pa-action-menu-popover a,
.pa-action-menu-popover button {
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--pa-text);
  font-size:.78rem;
  font-weight:750;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
}
.pa-action-menu-popover :where(a,button):hover { background:var(--pa-surface-soft); }
.pa-action-menu-popover button.pa-danger { color:var(--pa-danger); }
.pa-action-menu-popover form { margin:0; }

/* Accessible focus and reduced-motion contract. */
.pa-app :where(a,button,input,select,textarea,summary):focus-visible {
  outline:3px solid color-mix(in srgb,var(--pa-brand) 32%,transparent);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce) {
  .pa-app *, .pa-app *::before, .pa-app *::after { scroll-behavior:auto; transition-duration:.01ms; animation-duration:.01ms; animation-iteration-count:1; }
}

@media (min-width:720px) {
  .pa-page-title,
  .pa-page-title-split { grid-template-columns:minmax(0,1fr) auto; }
  .pa-page-actions,
  .pa-page-title-actions { width:auto; }
  .pa-page-actions > .pa-button,
  .pa-page-title-actions > .pa-button { width:auto; }
  .pa-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Operational lists vs. history: terminal states stay accessible without polluting work queues. */
.pa-history-group{
  padding:0;
  overflow:hidden;
}
.pa-history-group>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  cursor:pointer;
  list-style:none;
  background:var(--pa-surface-soft);
}
.pa-history-group>summary::-webkit-details-marker{display:none}
.pa-history-group>summary>span:first-child{
  display:grid;
  gap:2px;
}
.pa-history-group>summary strong{
  color:var(--pa-text);
  font-size:.92rem;
}
.pa-history-group>summary small{
  color:var(--pa-text-soft);
  font-size:.72rem;
}
.pa-history-group>summary::after{
  content:"⌄";
  color:var(--pa-text-soft);
  font-size:1rem;
  transition:transform .16s ease;
}
.pa-history-group[open]>summary::after{transform:rotate(180deg)}
.pa-history-group-body{
  padding:12px 16px 16px;
  border-top:1px solid var(--pa-border);
  background:#fff;
}
.pa-history-group .is-history{
  opacity:.86;
}

/* Historical/terminal records: visible for traceability, never styled as active work. */
.pa-event-cockpit.is-archived{
  border-color:var(--pa-border);
  background:var(--pa-surface-soft);
  box-shadow:none;
}
.pa-event-cockpit.is-archived .pa-event-cockpit-head h3{color:var(--pa-text)}
.pa-event-cockpit.is-archived .pa-event-cockpit-head p{max-width:72ch}
.pa-event-cockpit.is-archived.is-cancelled{
  border-left:4px solid var(--pa-danger);
}
.pa-history-group .pa-status,
.pa-history-group .pa-badge{filter:saturate(.72)}

/* ========================================================================== 
   4.1 — accessibility, invitation workflow and calmer information density
   ========================================================================== */
.pa-app,
.pa-login{
  --pa-focus-ring:color-mix(in srgb,var(--pa-brand) 30%,transparent);
  --pa-control-border:#b9c6c0;
}
.pa-app :where(a,button,input,select,textarea,summary):focus-visible,
.pa-login :where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--pa-focus-ring);
  outline-offset:2px;
}
.pa-app :where(button,input,select,textarea):disabled{
  opacity:.58;
  cursor:not-allowed;
}
.pa-app :where(input:not([type=checkbox]):not([type=radio]),select,textarea){
  border-color:var(--pa-control-border);
}
.pa-app :where(input:not([type=checkbox]):not([type=radio]),select,textarea):hover{
  border-color:color-mix(in srgb,var(--pa-brand) 26%,var(--pa-control-border));
}
.pa-app :where(input:not([type=checkbox]):not([type=radio]),select,textarea)[aria-invalid="true"]{
  border-color:var(--pa-danger);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pa-danger) 12%,transparent);
}
.pa-form label>small,
.pa-form-grid label>small,
.pa-field>small{
  color:var(--pa-text-soft);
  font-size:.7rem;
  font-weight:600;
  line-height:1.35;
}
.pa-readonly-field{
  display:grid;
  gap:4px;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--pa-border);
  border-radius:var(--pa-radius-sm);
  background:var(--pa-surface-soft);
}
.pa-readonly-field>span{
  color:var(--pa-text-faint);
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.pa-readonly-field>small{color:var(--pa-text-soft);font-size:.7rem;line-height:1.4}
.pa-callout{
  border-radius:var(--pa-radius-md);
  line-height:1.48;
}
.pa-callout-neutral{
  border:1px solid var(--pa-border);
  background:linear-gradient(145deg,#fff,var(--pa-surface-soft));
}
.pa-callout-neutral strong{color:var(--pa-text)}
.pa-callout-neutral p{color:var(--pa-text-soft)}
.pa-create-panel{
  overflow:hidden;
  border:1px solid var(--pa-border);
  border-radius:var(--pa-radius-lg);
  background:#fff;
  box-shadow:var(--pa-shadow-card);
}
.pa-create-panel>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:58px;
  padding:15px 17px;
  cursor:pointer;
  list-style:none;
  color:var(--pa-text);
  background:linear-gradient(145deg,#fff,var(--pa-surface-soft));
}
.pa-create-panel>summary::-webkit-details-marker{display:none}
.pa-create-panel>summary>span{font-weight:850}
.pa-create-panel>summary>small{color:var(--pa-text-soft);font-size:.7rem;text-align:right}
.pa-create-panel>summary::after{
  content:"+";
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--pa-surface-brand);
  color:var(--pa-brand);
  font-size:1.1rem;
  font-weight:800;
}
.pa-create-panel[open]>summary::after{content:"–"}
.pa-create-panel[open]>summary{border-bottom:1px solid var(--pa-border)}
.pa-create-panel>.pa-form{padding:clamp(16px,2.2vw,24px)}

.pa-member-list,
.pa-invitation-list{
  display:grid;
  gap:12px;
}
.pa-member-card,
.pa-invitation-card{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--pa-border);
  border-radius:var(--pa-radius-md);
  background:#fff;
  box-shadow:0 5px 18px rgba(18,38,33,.045);
}
.pa-member-card h4,
.pa-invitation-card h4{margin:4px 0 2px;color:var(--pa-text);font-size:1rem}
.pa-member-card p,
.pa-invitation-card p{margin:0;color:var(--pa-text-soft);font-size:.78rem}
.pa-member-card small,
.pa-invitation-card small{color:var(--pa-text-soft)}
.pa-permission-badges{display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.pa-permission-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--pa-brand) 16%,var(--pa-border));
  border-radius:999px;
  background:var(--pa-surface-brand);
  color:var(--pa-brand);
  font-size:.64rem;
  font-weight:760;
}
.pa-invitation-section{
  display:grid;
  gap:10px;
  margin:22px 0;
  padding:clamp(14px,2vw,20px);
  border:1px dashed color-mix(in srgb,var(--pa-brand) 24%,var(--pa-border));
  border-radius:var(--pa-radius-lg);
  background:color-mix(in srgb,var(--pa-surface-brand) 62%,#fff);
}
.pa-invitation-section .pa-section-heading{margin:0}
.pa-invitation-card{
  grid-template-columns:minmax(0,1fr);
  box-shadow:none;
}
.pa-invitation-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.pa-invitation-actions form{margin:0}
.pa-directory-consent{border-left:4px solid var(--pa-brand)}
.pa-directory-consent .pa-toggle-row{margin-bottom:12px}

@media (min-width:720px){
  .pa-member-card{grid-template-columns:minmax(180px,.8fr) minmax(280px,1.4fr);align-items:start}
  .pa-member-card>.pa-inline-editor,
  .pa-member-card>.pa-member-safety-note,
  .pa-member-card>.pa-member-remove{grid-column:1/-1}
  .pa-invitation-card{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .pa-invitation-actions{justify-content:flex-end}
}