/*
 * AAMV design system: components (DESIGN_SYSTEM.md §5). One structure per component, markup in Components/.
 * Colors come from tones (.is-sun|coral|sky|leaf → --tone, --tone-soft, --tone-ink, --tone-text, see base.css)
 * or from --pop (.pop-sun|coral|sky|leaf) for the "gommette" shadows.
 */

.pop-sun   { --pop: var(--a-sun); }
.pop-coral { --pop: var(--a-coral); }
.pop-sky   { --pop: var(--a-sky); }
.pop-leaf  { --pop: var(--a-leaf); }

/* ---------- Card ---------- */
.a-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--a-pad-card);
    background: var(--a-card);
    border: var(--a-border) solid var(--a-line);
    border-radius: var(--a-radius-card);
    box-shadow: var(--a-shadow-card);
    color: var(--a-ink);
}
.a-card > * { margin: 0; }
.a-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.a-card__title {
    margin: 0;
    font-family: var(--a-font-display);
    font-size: var(--a-fs-card-title);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}
.a-card__text { color: var(--a-ink-2); font-size: var(--a-fs-field); }

.a-card--flat { box-shadow: none; }
.a-card--pop { border-color: var(--a-ink); box-shadow: 6px 6px 0 var(--pop, var(--a-sun)); }

/* Filled card (membership panel, "other places" box): tone background, white text */
.a-card--solid {
    border-color: var(--a-ink);
    background: var(--tone, var(--a-sky));
    color: var(--a-white);
    --a-solid-text: var(--a-sky-light);
}
.a-card--solid.is-leaf { --a-solid-text: var(--a-leaf-light); }
.a-card--solid :is(h1, h2, h3, h4, .a-card__title) { color: var(--a-white); }
.a-card--solid :is(p, .a-card__text) { color: var(--a-solid-text); }
.a-card--solid .a-eyebrow { color: var(--a-sun-light); }
.a-card--solid a:not(.btn) { color: var(--a-white); }
.a-card--solid:not(.a-card--pop) { box-shadow: none; }

/* Membership panel (Components/_membership_panel.html.twig): solid sky card with a sun shadow */
.a-membership { padding: 36px; }
.a-membership__title { padding-right: 56px; font-size: 36px; font-weight: 800; line-height: 1.1; }
.a-membership--band { padding: 40px 48px; }

/* Whole card is a link */
a.a-card, .a-card--link { text-decoration: none; }
.a-card--link { transition: transform var(--a-ease), box-shadow var(--a-ease); }
.a-card--link, .a-card--link:hover { color: var(--a-ink); }
.a-card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--a-shadow); }
.a-card--link.a-card--pop:hover { box-shadow: 6px 8px 0 var(--pop, var(--a-sun)); }
.a-card--link:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 3px; }

/* Link with an arrow (card feet, "Lire l'actualité") */
.a-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tone-text, var(--a-coral));
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
a.a-arrow-link:hover { color: var(--tone-ink, var(--a-coral-ink)); text-decoration: underline; }
.a-arrow-link .bi { transition: transform var(--a-ease); }
a.a-arrow-link:hover .bi-arrow-right, .a-card--link:hover .a-arrow-link .bi-arrow-right { transform: translateX(3px); }

/* ---------- Section head ---------- */
.a-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.a-section-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.a-section-head > .btn { flex-shrink: 0; }
.a-section-title { margin: 0; font-size: var(--a-fs-h2); font-weight: 800; line-height: 1.1; }

.a-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tone-text, var(--a-coral));
    font-size: var(--a-fs-small);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ---------- Chips ---------- */
.a-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--a-radius-pill);
    background: var(--chip-bg, var(--a-sand));
    color: var(--chip-fg, var(--a-ink));
    font-size: var(--a-fs-small);
    font-weight: 800;
    line-height: 1.3;
}
.a-chip .bi { font-size: 1em; }
.a-chip--sand  { --chip-bg: var(--a-sand); }
.a-chip--leaf  { --chip-bg: var(--a-leaf-soft);  --chip-fg: var(--a-leaf-ink); }
.a-chip--sun   { --chip-bg: var(--a-sun-soft);   --chip-fg: var(--a-sun-ink); }
.a-chip--coral { --chip-bg: var(--a-coral-soft); --chip-fg: var(--a-coral-ink); }
.a-chip--sky   { --chip-bg: var(--a-sky-soft);   --chip-fg: var(--a-sky-ink); }
.a-chip--solid-sky   { --chip-bg: var(--a-sky);   --chip-fg: var(--a-white); }
.a-chip--solid-leaf  { --chip-bg: var(--a-leaf);  --chip-fg: var(--a-white); }
.a-chip--solid-coral { --chip-bg: var(--a-coral); --chip-fg: var(--a-white); }
.a-chip--outline { --chip-bg: var(--a-card); padding: 4px 14px; border: var(--a-border) solid var(--a-ink); }

/* ---------- Sticker ---------- */
.a-sticker {
    position: absolute;
    top: -14px;
    right: 20px;
    z-index: 1;
    padding: 4px 12px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-pill);
    background: var(--a-sun);
    color: var(--a-ink);
    font-size: var(--a-fs-xs);
    font-weight: 800;
    line-height: 1.3;
    transform: rotate(3deg);
    pointer-events: none;
}

/* ---------- Avatar, person ---------- */
.a-avatar {
    --size: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--avatar-bg, var(--a-sun));
    color: var(--a-ink);
    font-family: var(--a-font-display);
    font-size: calc(var(--size) * .39);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.a-avatar--sm { --size: 36px; font-size: 15px; }
.a-avatar--lg { --size: 72px; border: 3px solid var(--a-ink); }
.a-avatar--sun   { --avatar-bg: var(--a-sun); }
.a-avatar--coral { --avatar-bg: var(--a-coral-avatar); }
.a-avatar--sky   { --avatar-bg: var(--a-sky-avatar); }
.a-avatar--leaf  { --avatar-bg: var(--a-leaf-avatar); }

.a-person { display: flex; align-items: center; gap: 14px; min-width: 0; line-height: 1.3; }
.a-person__body { display: flex; flex-direction: column; min-width: 0; }
.a-person__name { font-weight: 800; overflow-wrap: anywhere; }
.a-person__meta { display: flex; align-items: center; gap: 4px; color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 600; }
.a-avatar--lg + .a-person__body .a-person__name { font-family: var(--a-font-display); font-size: var(--a-fs-h3); font-weight: 700; }

/* ---------- Icon tile ---------- */
.a-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--a-radius-tile);
    background: var(--tone-soft, var(--a-sun-soft));
    color: var(--tone-text, var(--a-sun-ink));
    font-size: 28px;
    line-height: 1;
}
.a-icon-tile--sm { width: 48px; height: 48px; font-size: 24px; }

/* ---------- Shortcut ---------- */
/* In a stretching grid: all the tiles of a row keep the same height, content centered vertically */
.a-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 100%;
    min-height: 96px;
    min-width: 0;
    padding: 12px 14px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-card);
    background: var(--a-card);
    box-shadow: 6px 6px 0 var(--pop, var(--a-sun));
    color: var(--a-ink);
    text-decoration: none;
    transition: transform var(--a-ease), box-shadow var(--a-ease);
}
/* Stacked in a column (.a-stack) rather than in a grid of tiles: its own height, not the height of a stretched column */
.a-stack > .a-shortcut { height: auto; }
.a-shortcut:hover { color: var(--a-ink); transform: translateY(-2px); box-shadow: 6px 8px 0 var(--pop, var(--a-sun)); }
.a-shortcut:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 3px; }
.a-shortcut__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.a-shortcut > .a-icon-tile { width: 48px; height: 48px; font-size: 24px; }
.a-shortcut__title { font-size: var(--a-fs-field); font-weight: 800; }
.a-shortcut__sub { color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 600; }

/* ---------- Rows (news list) and dates ---------- */
.a-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--a-card);
    border: var(--a-border) solid var(--a-line);
    border-radius: var(--a-radius-card);
}
.a-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 92px;
    padding: 14px 28px;
    border-bottom: var(--a-border) dashed var(--a-line);
    color: var(--a-ink);
    text-decoration: none;
    transition: background-color var(--a-ease);
}
.a-row:last-child { border-bottom: 0; }
a.a-row:hover { background: var(--a-paper); color: var(--a-ink); }
a.a-row:hover .a-row__title { color: var(--a-coral); }
a.a-row:focus-visible { outline: 3px solid var(--a-sun); outline-offset: -3px; }
p.a-row { margin: 0; color: var(--a-muted); font-weight: 700; }
.a-row__title { flex: 1 1 0; min-width: 0; font-size: var(--a-fs-row); font-weight: 800; line-height: 1.3; }
/* Title and excerpt of a row (_news_rows with excerpt: archive of the news) */
.a-row__body { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-width: 0; }
.a-row__text { color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 600; line-height: 1.4; }
.a-row > .a-chip { flex-shrink: 0; }
.a-row > .bi:last-child { flex-shrink: 0; font-size: 22px; transition: transform var(--a-ease); }
a.a-row:hover > .bi:last-child { transform: translateX(3px); }
/* Current page in a list of links (side column of the legal pages): highlighted, no chevron */
.a-row[aria-current="page"], a.a-row[aria-current="page"]:hover { background: var(--a-sun-soft); }
a.a-row[aria-current="page"]:hover .a-row__title { color: var(--a-ink); }
.a-row[aria-current="page"] > .bi:last-child { visibility: hidden; }
/* Compact rows: simple links (side columns), not dated news */
.a-rows--compact .a-row { min-height: 60px; }
/*
 * Phone: a chip ("Important") no longer takes a column of its own, which left 1 or 2 words per line to the
 * title and its excerpt (M3). It goes above the title, the date and the chevron span both lines.
 */
@media (max-width: 575.98px) {
    .a-row:has(> .a-chip) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
    .a-row:has(> .a-chip) > .a-date { grid-row: 1 / span 2; grid-column: 1; }
    .a-row:has(> .a-chip) > .a-chip { grid-row: 1; grid-column: 2; justify-self: start; }
    .a-row:has(> .a-chip) > .a-row__title,
    .a-row:has(> .a-chip) > .a-row__body { grid-row: 2; grid-column: 2; align-self: start; }
    .a-row:has(> .a-chip) > .bi:last-child { grid-row: 1 / span 2; grid-column: 3; }
}

.a-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    padding: 6px 0;
    border-radius: var(--a-radius-tile);
    background: var(--tone-soft, var(--a-sun-soft));
    color: var(--a-ink);
    line-height: 1.1;
    text-align: center;
}
.a-date__day { font-family: var(--a-font-display); font-size: 24px; font-weight: 800; }
.a-date__month { font-size: 13px; font-weight: 800; text-transform: uppercase; }

/* ---------- Ad card ---------- */
.a-annonce-card__excerpt { display: block; }
/* Short chips (see _ad_card), on one line in a 3-column grid */
.a-annonce-card .a-chip { padding: 5px 12px; font-size: var(--a-fs-xs); white-space: nowrap; }

/* ---------- Contact details loaded on click (js/contact.js) ---------- */
/* The button needs JavaScript: without it, a <noscript> gives the association's contact details instead */
html:not(.js) [data-contact-url] { display: none; }
/* Live region for the error message: always in the page, out of the layout while empty */
.a-contact-message { margin: 0; font-size: var(--a-fs-small); font-weight: 700; color: var(--a-ink-2); }
.a-contact-message:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Search strip ---------- */
.a-search-strip {
    display: grid;
    grid-template-columns: 264px repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 24px;
    padding: 28px 32px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-card);
    background: var(--a-card);
    box-shadow: var(--a-shadow-strip-box);
}
.a-search-strip__intro { display: flex; flex-direction: column; gap: 4px; align-self: center; }
.a-search-strip__title { font-family: var(--a-font-display); font-size: var(--a-fs-card-title); font-weight: 700; line-height: 1.15; }
.a-search-strip__sub { color: var(--a-muted); font-size: var(--a-fs-small); }
.a-search-strip .form-label { display: block; }
.a-search-strip .form-select { padding-left: 14px; padding-right: 34px; background-position: right 12px center; }
.a-search-strip .btn { min-height: var(--a-h-btn-lg); padding: 0 28px; font-size: 18px; }

/* ---------- Doors (hero access by audience) ---------- */
.a-door {
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    padding: 24px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-card);
    background: var(--a-card);
    box-shadow: 6px 6px 0 var(--pop, var(--a-coral));
    color: var(--a-ink);
    text-decoration: none;
    transition: transform var(--a-ease), box-shadow var(--a-ease);
}
a.a-door:hover { color: var(--a-ink); transform: translateY(-2px); box-shadow: 6px 8px 0 var(--pop, var(--a-coral)); }
a.a-door:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 3px; }
.a-door__kicker { color: var(--pop, var(--a-coral)); font-size: var(--a-fs-small); font-weight: 800; letter-spacing: 1px; line-height: 1.3; text-transform: uppercase; }
.a-door__title { font-family: var(--a-font-display); font-size: 25px; font-weight: 700; line-height: 1.15; }
.a-door__action { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; color: var(--pop, var(--a-coral)); font-weight: 800; }
a.a-door:hover .a-door__action .bi { transform: translateX(3px); }
.a-door__action .bi { transition: transform var(--a-ease); }

/* ---------- Checklist ---------- */
.a-checklist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
/*
 * The check sits on the first line of a long item (N11): the text starts 6px lower, the check 6px higher
 * ((36px - 1.4 × 17px) / 2). Tone of the page with .is-coral|sky|leaf on the list (sky by default).
 * .a-checklist--text: sentences rather than short facts, in 600 instead of 700.
 */
.a-checklist > li { display: flex; align-items: flex-start; gap: 14px; padding-top: 6px; font-weight: 700; line-height: 1.4; }
.a-checklist--text > li { font-weight: 600; }
.a-checklist > li::before {
    content: "\f633"; /* Bootstrap Icons check-lg */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--tone, var(--a-sky));
    color: var(--a-white);
    font-family: bootstrap-icons;
    font-size: 18px;
    font-weight: 400;
}

/* ---------- Steps ---------- */
.a-steps { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: a-step; }
.a-steps > li { display: flex; align-items: flex-start; gap: 16px; counter-increment: a-step; }
.a-steps > li::before {
    content: counter(a-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-tile);
    background: var(--a-sun);
    font-family: var(--a-font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.a-steps > li:nth-child(3n+2)::before { background: var(--a-coral-avatar); }
.a-steps > li:nth-child(3n)::before { background: var(--a-leaf-avatar); }
.a-steps__title { display: block; font-weight: 800; }
.a-steps__text { display: block; color: var(--a-ink-2); font-size: var(--a-fs-field); }

/* ---------- Key facts ---------- */
.a-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.a-fact { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.a-fact__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.a-fact__label { color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 700; }
.a-fact__value { font-weight: 800; }
.a-fact__body .a-days { margin-top: 4px; }

/* ---------- Days ---------- */
.a-days { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.a-days > * {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: var(--a-border) dashed var(--a-line-dashed);
    border-radius: 9px;
    color: var(--a-muted);
    font-size: var(--a-fs-xs);
    font-weight: 800;
    line-height: 1;
}
.a-days > .is-on { border: var(--a-border) solid var(--a-sky); background: var(--a-sky); color: var(--a-white); }

/* Clickable days (filters): real checkboxes in labels, the whole label is the target */
.a-days--toggle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.a-days--toggle > *, .a-filters .a-days > * {
    width: auto;
    height: 44px;
    border: var(--a-border) solid var(--a-line-strong);
    border-radius: 12px;
    background: var(--a-card);
    color: var(--a-ink);
    font-size: var(--a-fs-small);
    cursor: pointer;
    transition: border-color var(--a-ease), background-color var(--a-ease);
}
.a-filters .a-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.a-days--toggle > :hover, .a-filters .a-days > :hover { border-color: var(--a-ink); }
.a-days--toggle > .is-on, .a-days--toggle > :has(input:checked),
.a-filters .a-days > .is-on, .a-filters .a-days > :has(input:checked) { border-color: var(--a-sky); background: var(--a-sky); color: var(--a-white); }
.a-days input, .a-chip-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.a-days > :has(input:focus-visible), .a-chip-toggle:has(input:focus-visible) { outline: 3px solid var(--a-sun); outline-offset: 2px; }

/* ---------- Filters ---------- */
.a-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    width: 320px;
    max-width: 100%;
    padding: var(--a-pad-card);
    border: var(--a-border) solid var(--a-line);
    border-radius: var(--a-radius-card);
    background: var(--a-card);
}
.a-filters > * { margin: 0; }
.a-filters__title, .a-filters > h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; }
.a-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.a-filters legend { float: none; width: auto; margin-bottom: 10px; padding: 0; font-size: var(--a-fs-small); font-weight: 800; line-height: 1.3; }
.a-filters .btn { width: 100%; }
.a-filters__reset { align-self: center; color: var(--a-muted); font-size: 16px; font-weight: 700; }

.a-chip-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 6px 14px;
    border: var(--a-border) solid var(--a-line-strong);
    border-radius: var(--a-radius-pill);
    background: var(--a-card);
    color: var(--a-ink);
    font-size: var(--a-fs-small);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--a-ease), background-color var(--a-ease);
}
.a-chip-toggle:hover { border-color: var(--a-ink); color: var(--a-ink); }
.a-chip-toggle.is-on, .a-chip-toggle:has(input:checked) { border-color: var(--a-ink); background: var(--a-ink); color: var(--a-white); font-weight: 800; }
.a-chip-toggle:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 2px; }

/* ---------- Tabs (at the bottom of a band) ---------- */
.a-tabs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs > * {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 24px;
    border-radius: 22px 22px 0 0;
    background: var(--a-veil);
    color: var(--a-ink-2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.a-tabs > :hover { color: var(--a-ink); background: var(--a-paper); }
.a-tabs > :focus-visible { outline: 3px solid var(--a-sun); outline-offset: -3px; }
.a-tabs > .is-active, .a-tabs > [aria-selected="true"], .a-tabs > [aria-current="page"] {
    padding: 16px 26px;
    background: var(--a-paper);
    color: var(--a-ink);
    font-weight: 800;
}
.a-tabs__note { font-size: var(--a-fs-xs); font-weight: 700; }
.a-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    box-sizing: border-box;
    padding: 2px 10px;
    border-radius: var(--a-radius-pill);
    /* Sand, not white: readable on the white veil of an inactive tab (ANN-5) */
    background: var(--a-sand);
    color: var(--a-ink);
    font-size: var(--a-fs-small);
    font-weight: 800;
    line-height: 1.3;
}
.a-tabs > .is-active .a-count, .a-tabs > [aria-selected="true"] .a-count, .a-tabs > [aria-current="page"] .a-count { background: var(--a-coral); color: var(--a-white); }

/* ---------- Callout ---------- */
.a-callout {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border: var(--a-border) dashed var(--tone, var(--a-sky));
    border-radius: var(--a-radius-card);
    background: var(--tone-soft, var(--a-sky-soft));
    color: var(--a-ink);
}
.a-callout .a-icon-tile { background: var(--tone, var(--a-sky)); color: var(--a-white); }
/* Flat callout: information with nothing to do (an online ad, for its author); the tone stays on the tile only */
.a-callout.a-callout--flat { border: var(--a-border) solid var(--a-line); background: var(--a-card); }
/* margin: 0 on the body itself (a <p> in the compact callout), not only on its children */
.a-callout__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; margin: 0; }
.a-callout__title { font-size: var(--a-fs-row); font-weight: 800; line-height: 1.3; }
.a-callout__text { color: var(--a-ink-2); font-size: var(--a-fs-field); }
.a-callout > .btn { flex-shrink: 0; }
.a-callout__body > * { margin: 0; }
.a-callout__body ul { margin: 4px 0 0; padding-left: 1.2em; }
.a-callout__body ul a { font-weight: 800; }

/* ---------- Empty state (Components/_empty.html.twig) ---------- */
.a-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px var(--a-pad-card);
    background: var(--a-card);
    border: var(--a-border) solid var(--a-line);
    border-radius: var(--a-radius-card);
    color: var(--a-ink);
    text-align: center;
}
.a-empty > * { margin: 0; }
/* Neutral tile unless a tone is given */
.a-empty > .a-icon-tile:not(.is-sun, .is-coral, .is-sky, .is-leaf) { background: var(--a-sand); color: var(--a-ink-2); }
.a-empty__title { max-width: 40ch; font-family: var(--a-font-display); font-size: var(--a-fs-h4); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.a-empty__text { max-width: 52ch; color: var(--a-ink-2); font-size: var(--a-fs-field); text-wrap: pretty; }
.a-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
/* Call card: completes the incomplete last row of a grid of cards (stretched to the row height) */
.a-empty--call {
    justify-content: center;
    padding: var(--a-pad-card);
    background: transparent;
    border-style: dashed;
    border-color: var(--a-line-strong);
    text-decoration: none;
    transition: border-color var(--a-ease), background-color var(--a-ease);
}
.a-empty--call, .a-empty--call:hover { color: var(--a-ink); }
.a-empty--call:hover { border-color: var(--a-ink); background: var(--a-card); }
.a-empty--call:hover .a-arrow-link .bi-arrow-right { transform: translateX(3px); }
.a-empty--call:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 3px; }

/* Compact callout (notices zone: ads to revalidate): one line of text on desktop, dismissible (.alert) */
.a-callout.a-callout--compact {
    position: relative;
    gap: 14px;
    margin: 0;
    padding: 10px 56px 10px 12px;
    border-radius: var(--a-radius-field);
}
.a-callout--compact .a-callout__body { display: block; font-size: var(--a-fs-field); line-height: 1.4; }
.a-callout--compact .a-callout__title { margin-right: 6px; font-size: inherit; }
.a-callout--compact .a-callout__text { margin-right: 4px; font-size: inherit; }
.a-callout--compact .a-callout__body a { color: var(--a-coral-ink); font-weight: 800; }
.a-callout--compact .btn-close { top: 50%; right: 6px; padding: 14px; transform: translateY(-50%); }

/* ---------- Locked (members only preview) ---------- */
.a-locked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    padding: var(--a-pad-card);
    border: var(--a-border) dashed var(--a-coral);
    border-radius: var(--a-radius-card);
    background: var(--a-card);
}
.a-locked > * { margin: 0; }
.a-locked__head { display: flex; align-items: center; gap: 12px; }
.a-locked__title { font-family: var(--a-font-display); font-size: var(--a-fs-h3); font-weight: 700; line-height: 1.15; }
.a-locked__text { color: var(--a-ink-2); }
.a-locked__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.a-locked__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--a-radius-tile);
    background: var(--a-coral-faint);
    font-weight: 800;
}
.a-locked__item > :last-child:not(:first-child) { flex-shrink: 0; color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 700; }
.a-locked > .btn:last-child { align-self: flex-start; margin-top: auto; }

/* ---------- Stat badge ---------- */
.a-stat {
    display: inline-flex;
    flex-direction: column;
    padding: 12px 18px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-tile);
    background: var(--a-leaf);
    color: var(--a-white);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    transform: rotate(-4deg);
}
.a-stat__value { font-family: var(--a-font-display); font-size: 34px; line-height: 1; }
.a-stat__label { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .a-search-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
    .a-search-strip__intro { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
    .a-search-strip { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
    .a-search-strip .btn { width: 100%; }
    .a-filters { width: 100%; }
    /* One column: no incomplete row to complete */
    .a-grid--2 > .a-empty--call { display: none; }
}
@media (max-width: 767.98px) {
    .a-empty { padding: 32px var(--a-pad-card-mobile); }
    /* Stacked actions of equal width (T18) */
    .a-empty__actions { flex-direction: column; align-self: stretch; }
    .a-avatar:not(.a-avatar--sm):not(.a-avatar--lg) { --size: 46px; }
    .a-person { gap: 12px; }
    .a-section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
    .a-row { gap: 14px; min-height: 0; padding: 16px 18px; }
    .a-date { width: 56px; border-radius: 14px; }
    .a-date__day { font-size: 21px; }
    .a-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .a-door { padding: 20px; }
    .a-door__title { font-size: 22px; }
    .a-callout { flex-direction: column; align-items: flex-start; padding: 20px; }
    .a-callout.a-callout--compact { flex-direction: row; align-items: flex-start; padding: 10px 48px 10px 10px; }
    .a-callout--compact .a-icon-tile { width: 36px; height: 36px; font-size: 18px; border-radius: 12px; }
    /* Phone: title, text and links on three lines (not one run-on paragraph) */
    .a-callout--compact .a-callout__body { display: flex; flex-direction: column; gap: 2px; font-size: var(--a-fs-small); }
    .a-callout--compact .a-callout__title, .a-callout--compact .a-callout__text { margin-right: 0; }
    .a-callout--compact .btn-close { top: 4px; transform: none; }
    .a-callout > .btn { width: 100%; }
    /*
     * Phone: the buttons of a card or of a section head take the full width (stacked buttons of equal width;
     * B8: full width in a narrow card). Not the link buttons, nor the small buttons of a table.
     */
    .a-card .btn:not(.btn-link, .btn-sm), .a-section-head > .btn { width: 100%; }
    .a-card .table .btn { width: auto; }
    .a-chip-toggle { min-height: 44px; }
    /* Mobile: the tabs become a segmented control that wraps (no label cut by a scroll area) */
    .a-tabs { flex-wrap: wrap; align-items: stretch; gap: 8px; overflow: visible; }
    .a-tabs > *,
    .a-tabs > .is-active, .a-tabs > [aria-selected="true"], .a-tabs > [aria-current="page"] {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
        padding: 8px 16px;
        border-radius: var(--a-radius-pill);
        font-size: 16px;
        text-align: center;
        white-space: normal;
    }
    .a-tabs > .is-active, .a-tabs > [aria-selected="true"], .a-tabs > [aria-current="page"] { box-shadow: inset 0 0 0 var(--a-border) var(--a-ink); }
    .a-shortcut { min-height: 80px; padding: 12px 18px; }
    .a-stat__value { font-size: 28px; }
    .a-membership, .a-membership--band { padding: 24px 20px; }
    .a-membership__title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .a-card--link:hover, .a-shortcut:hover, a.a-door:hover,
    .a-arrow-link .bi, a.a-row:hover > .bi:last-child, .a-door__action .bi { transform: none !important; }
}