/*--------------------------------------------------------------
LOA design layer — editorial direction (spec 2026-09-01-loa-styling-design.md)
Sections:
  1. Tokens
  2. Base type
  3. Global: buttons, forms, page-header
  4. Header + footer
  5. Home + public pages
  6. Membership (registration + toggle, login, MemberPress)
  7. Community (directory, profile, groups, activity)
  8. Events (MEC list, single, booking, two-ticket, teaser)
!important is used only to beat plugin inline styles — each carries a note.
--------------------------------------------------------------*/

/* ===== 1. TOKENS ===== */
:root{
  --ink:#1A1A1A; --teal:#38ADAE; --magenta:#CD295A;
  --paper:#FFFFFF; --paper-warm:#FAF7F3; --line:#E6E1DB; --muted:#6B6560;
  --grad:linear-gradient(90deg,#38ADAE,#7E6A86,#CD295A,#7E6A86,#38ADAE);
  --radius:2px;
  --serif:"Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
}

/* ===== 2. BASE TYPE =====
   Font FAMILY + SIZE come from BuddyBoss custom typography (customizer script /
   D0) so the theme's own CSS carries Cormorant/Commissioner. Here we only add
   the editorial touches BuddyBoss doesn't: leading, tracking, wrapping, colour. */
body{ line-height:1.65; }
h1,h2,h3,h4,h5,
.bb-title,.entry-title,.page-title{
  line-height:1.08 !important;
  letter-spacing:-.01em;
  text-wrap:balance;
}
p{ text-wrap:pretty; }
a{ color:var(--teal); }
a:hover{ color:var(--ink); }

.loa-eyebrow{
  font:600 12px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.loa-rule,
hr.wp-block-separator{
  height:1px;
  background:var(--line);
  border:0;
  margin:0;
  margin-inline: calc(50% - 50vw);
}

#comments {
    display: none;
}

.content-area{
  padding-bottom: 0;
  padding-top: 0;
}

/* ===== 3. GLOBAL: buttons, forms, page-header =====
   Verified selectors (grep of theme + MemberPress + MEC + BuddyBoss nouveau,
   cross-checked against served HTML on 2026-09-01):
     core block CTA ....... a.wp-block-button__link
     MemberPress submit ... input.mepr-submit  (checkout/form.php, spc_form.php)
     MemberPress pricing .. .mepr-price-box-button  (pricing shortcode — not on site yet)
     MEC booking submit ... button.mec-book-form-next-button(.mec-book-form-pay-button)
     MEC booking back ..... button.mec-book-form-back-button
     MEC register CTA ..... a.mec-booking-button-register
     BuddyBoss buttons .... a.button / .bb-btn  (community, nav, sign-in/up)
     field label .......... .mp-form-label (MemberPress) / .mec-book-form label
     field error .......... .mepr-form-input.mepr-form-has-errors / .mepr-validation-error
   Not yet in markup (added by later Plan-D tasks): .loa-page-header,
   .mepr-price-box-button. Button hook classes (.loa-adherer, .loa-service-link)
   and the core "Outline" style are handled in §3.3–3.4 and §5. */

/* --- 3.1 Button box (shared geometry + typography for every CTA) --- */
.wp-block-button__link,
.mepr-submit,
.mepr-price-box-button,
.mec-book-form-next-button,
.mec-book-form-pay-button,
.mec-book-form-back-button,
.mec-booking-button-register,
.bb-btn,
a.button,
button.button,
input[type="submit"],
button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  border-radius:var(--radius);
  padding:15px 26px;
  border-width:1px;
  border-style:solid;
  box-shadow:none;
  cursor:pointer;
  transition:.18s ease;
}

/* --- 3.2 Primary button: solid teal, white label --- */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.mepr-submit,
.mepr-price-box-button,
.mec-booking-button-register,
.bb-btn:not(.bb-btn-cancle),
a.button:not(.outline),
button.button:not(.outline),
input[type="submit"],
button[type="submit"]{
  color:#fff;
  background:var(--teal);
  border-color:var(--teal);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus,
.mepr-submit:hover,
.mepr-submit:focus,
.mepr-price-box-button:hover,
.mepr-price-box-button:focus,
.mec-booking-button-register:hover,
.mec-booking-button-register:focus,
.bb-btn:not(.bb-btn-cancle):hover,
.bb-btn:not(.bb-btn-cancle):focus,
a.button:not(.outline):hover,
a.button:not(.outline):focus,
button.button:not(.outline):hover,
button.button:not(.outline):focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus{
  color:#fff;
  background:var(--ink);
  border-color:var(--ink);
}


/* MEC ships `.mec-book-form-next-button{background:#47dc6e!important;border-color:#47dc6e
   !important;color:#fff!important;font-weight:700!important}` in frontend.min.css —
   a bare-class !important rule, so match it with !important here. */
.mec-book-form-next-button,
.mec-book-form-next-button.mec-book-form-pay-button{
  color:#fff !important;              /* beats MEC frontend.min.css !important */
  background:var(--teal) !important;  /* beats MEC frontend.min.css !important */
  border-color:var(--teal) !important;/* beats MEC frontend.min.css !important */
  font-weight:600 !important;         /* beats MEC frontend.min.css font-weight:700!important */
}
.mec-book-form-next-button:hover,
.mec-book-form-next-button:focus{
  background:var(--ink) !important;   /* beats MEC frontend.min.css .mec-book-form-next-button:hover{background:#000!important} */
  border-color:var(--ink) !important;
}

/* --- 3.3 Secondary / outline button --- */
/* Core block "Outline" style + BuddyBoss .outline + MEC back button */
.wp-block-button.is-style-outline > .wp-block-button__link,
a.button.outline,
button.button.outline,
.mec-book-form-back-button{
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  padding: 14px 28px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
a.button.outline:hover,
a.button.outline:focus,
button.button.outline:hover,
button.button.outline:focus,
.mec-book-form-back-button:hover,
.mec-book-form-back-button:focus{
  color:#fff;
  background:var(--ink);
  border-color:var(--ink);
}

/* --- 3.4 The breathing "Adhérer" join CTA -----------------------------------
   The class goes on a Button BLOCK (-> .wp-block-button.loa-adherer, link inside)
   or directly on an <a>. The .wp-block-button-qualified selector matches the
   specificity of §3.2's `.wp-block-button:not(.is-style-outline) > __link` and,
   coming later in the file, wins. */
a.loa-adherer,
.wp-block-button.loa-adherer > .wp-block-button__link,
.loa-adherer > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:15px 28px;
  border:0;
  border-radius:var(--radius);
  color:#fff;
  background:var(--grad);
  background-size:300% 100%;
  box-shadow:0 8px 24px -8px rgba(205,41,90,.35);
  animation:loa-breathe 7s ease-in-out infinite;
  cursor:pointer;
  transition:.18s ease;
}



a.loa-adherer:hover,
a.loa-adherer:focus-visible,
.wp-block-button.loa-adherer > .wp-block-button__link:hover,
.wp-block-button.loa-adherer > .wp-block-button__link:focus-visible,
.loa-adherer > a:hover,
.loa-adherer > a:focus-visible{
  color:#fff;
  filter:brightness(1.05);
  box-shadow:0 10px 30px -6px rgba(56,173,174,.45);
}
@keyframes loa-breathe{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
  a.loa-adherer,
  .wp-block-button.loa-adherer > .wp-block-button__link,
  .loa-adherer > a{ animation:none; background:var(--grad); }
}

/* --- 3.5 Form fields --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea{
  font:400 16px/1.5 var(--sans);
  color:var(--ink);
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background-color:#fff;
  box-shadow:none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 2px rgba(56,173,174,.35);
}

/* Field labels */
.mp-form-label,
.mec-book-form label,
.loa-field-label{
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}

/* Field errors — text + border */
.mepr_error,
.mepr-validation-error,
.mepr-form-has-errors,
.mec-book-form-error,
.loa-field-error{
  color:var(--magenta);
}
.mepr-form-input.mepr_error,
.mepr-form-input.mepr-form-has-errors,
input.loa-field-invalid,
select.loa-field-invalid,
textarea.loa-field-invalid{
  border-color:var(--magenta);
}

/* --- 3.5b Contact Form 7 (contact page) --------------------------------------
   Fields + submit inherit §3.1/§3.2/§3.5. This only adds what CF7 leaves bare:
   full-width controls, stacked spaced-caps labels, row rhythm, response and
   validation colours. Scoped to .loa-cf7 (wrapper in the form template) +
   .loa-page-contact so no other CF7 form is touched. Autop-tolerant: rules
   work whether CF7 wraps each row in <p> or joins them with <br>. */
.loa-cf7 p{ margin:0; }
.loa-cf7 br{ display:none; }

.loa-cf7 .loa-cf7-heading{
  display:block;
  margin:0 0 32px;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}

.loa-cf7 .loa-cf7-field{ display:block; margin:0 0 24px; }
.loa-cf7 .loa-cf7-label{
  display:block;
  margin:0 0 8px;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.loa-cf7 .wpcf7-form-control-wrap{ display:block; }
.loa-cf7 input[type="text"],
.loa-cf7 input[type="email"],
.loa-cf7 input[type="tel"],
.loa-cf7 textarea{ width:100%; }
.loa-cf7 textarea{ min-height:170px; resize:vertical; }

.loa-cf7 .loa-cf7-actions{ display:block; margin:8px 0 0; }

/* Inline validation */
.loa-cf7 .wpcf7-not-valid{ border-color:var(--magenta); box-shadow:0 0 0 2px rgba(205,41,90,.25); }
.loa-cf7 .wpcf7-not-valid-tip{
  margin-top:6px;
  font:400 13px/1.4 var(--sans);
  text-transform:none;
  letter-spacing:0;
  color:var(--magenta);
}

/* Response banner (sits just outside .loa-cf7, still inside the form) */
.loa-page-contact .wpcf7-response-output{
  margin:22px 0 0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-left-width:3px;
  border-radius:var(--radius);
  font:400 14px/1.5 var(--sans);
}
.loa-page-contact form.invalid .wpcf7-response-output,
.loa-page-contact form.unaccepted .wpcf7-response-output,
.loa-page-contact form.payment-required .wpcf7-response-output{ border-left-color:var(--magenta); }
.loa-page-contact form.sent .wpcf7-response-output{ border-left-color:var(--teal); }
.loa-page-contact .wpcf7-spinner{ background-color:var(--muted); }

/* --- 3.6 Page-header block (.loa-page-header — markup added by a later task) --- */
.loa-page-header{
  position:relative;
  padding-top:64px;
}
.loa-page-header .loa-eyebrow{
  display:block;
  margin-bottom:16px;
}
.loa-page-header h1{
  margin:0;
}
.loa-standfirst{
  margin-top:16px;
  max-width:56ch;
  color:var(--muted);
  font-size:19px;
}
.loa-page-header::after{
  content:"";
  display:block;
  height:1px;
  margin-top:40px;
  background:var(--line);
}


/* ===== 4. HEADER + FOOTER =====
   Verified against served HTML (curl of "/" logged-out) + theme template-parts
   on 2026-09-01:
     header ............... header#masthead.site-header.site-header--bb
     header container ..... .site-header-container (.container.flex.default-header)
     logo ................. #site-logo.site-branding > .site-title > a > img.bb-logo
     primary menu ......... nav#site-navigation.main-navigation > #primary-navbar
                            > ul#primary-menu.primary-menu.bb-primary-overflow
     menu item / link ..... #primary-menu > li.menu-item > a > span
     dropdown submenu ..... li.menu-item-has-children > .wrapper.ab-submenu
                            > ul.bb-sub-menu > li.menu-item > a > span
     header aside ......... #header-aside.header-aside(.name_and_avatar)
                            > .header-aside-inner
     logged-out actions ... .bb-header-buttons > a.button.small.outline.signin-button.link
                              (label "Se connecter" — already FR, no gettext needed)
                            .bb-header-buttons > a.button.small.signup
                              (label "S'inscrire" — already FR, no gettext needed)
     logged-in account .... .header-aside-inner > .user-wrap.user-wrap-container
                            > a.user-link ( span.user-name + i.bb-icon-angle-down + avatar )
                            dropdown: .user-wrap > .sub-menu > .wrapper > ul.sub-menu-inner
     BuddyBoss footer ..... footer.footer-bottom.bb-footer.style-1 > .container.flex
                            (renders only a copyright line — hidden below)
   Load order (served HTML): every buddyboss-theme/assets/css/*.min.css loads
   BEFORE custom.css, so equal specificity wins here with no !important. The two
   inline Redux <style> blocks (#buddyboss_theme-style, #buddyboss_theme_options-
   dynamic-css) load AFTER custom.css — the one rule that collides with them
   (logo max-height) carries !important + a note. */

/* --- 4.1 Header shell: paper bg, single hairline, no shadow --- */
.site-header.site-header--bb{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:none;                 /* header_shadow already 0 in customizer — keep explicit, never re-add */
}
.site-header .site-header-container{
  max-width:var(--wrap);
  margin-inline:auto;
  width:100%;
  padding-inline:24px;             /* tighten side padding — the logo is a wide lockup */
}

/* --- 4.1b Breathing room under the header ---
   #content.site-content wraps pages, community, MEC and MemberPress screens.
   Specificity (1,1,0) + load order beats BuddyBoss's `.site-content`.
   Overrides: none on the home page, 140px on BuddyBoss community screens.
   NB: `bp-nouveau` sits on EVERY page (template-pack marker); the real
   community discriminator is `body.buddypress` (groups, members, profiles). */
#content.site-content{ padding-top:140px; }
body.buddypress #content.site-content{ padding-top:140px; }
body.home #content.site-content{ padding-top:0; }

@media screen and (max-width: 767px) {
  body.home #content.site-content{ padding-top:40px; }
}

/* --- 4.2 Logo (wide lockup — give it height, keep aspect) --- */
#site-logo .site-title img.bb-logo{
  max-height:44px !important;      /* beats inline <style id="buddyboss_theme-style"> `...img.bb-logo{max-height:80px}`, which loads after custom.css */
  width:auto;
  height:auto;
}

/* --- 4.3 Primary menu: right-aligned, sentence case, animated teal underline --- */
#site-navigation.main-navigation{ margin-left:auto; }
.site-header #primary-menu{ align-items:center; }
.site-header #primary-menu > li > a{
  font:600 15px/1 var(--sans);
  letter-spacing:.02em;
  text-transform:none;             /* spec: sentence case, NOT uppercase */
  color:var(--ink);
}
.site-header #primary-menu > li > a > span{
  position:relative;
  display:inline-block;
  text-transform:none;
  font-weight:inherit;
}
.site-header #primary-menu > li > a > span::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;                      /* collapsed — animates open from the left */
  top:calc(100% + 6px);           /* ~6px below the text */
  height:2px;
  background:var(--teal);
  transition:right .22s ease;
}
.site-header #primary-menu > li:hover > a,
.site-header #primary-menu > li.current-menu-item > a,
.site-header #primary-menu > li.current-menu-parent > a,
.site-header #primary-menu > li.current-menu-ancestor > a{
  color:var(--teal);
}
.site-header #primary-menu > li:hover > a > span::after,
.site-header #primary-menu > li.current-menu-item > a > span::after,
.site-header #primary-menu > li.current-menu-parent > a > span::after,
.site-header #primary-menu > li.current-menu-ancestor > a > span::after,
.site-header #primary-menu > li > a:focus-visible > span::after{
  right:0;
}
.site-header #primary-menu > li > a:focus-visible{
  outline:2px solid var(--teal);   /* keyboard focus stays visible even where the theme kills outlines */
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .site-header #primary-menu > li > a > span::after{ transition:none; }
}

/* --- 4.4 Dropdown panels: paper, hairline, no shadow --- */
.site-header #primary-menu .wrapper.ab-submenu{
  background:transparent;
  border:0;
  box-shadow:none;
}
.site-header #primary-menu .bb-sub-menu{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}
.site-header #primary-menu .bb-sub-menu > li > a{
  font:500 14px/1.3 var(--sans);
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink);
}
.site-header #primary-menu .bb-sub-menu > li > a span{ text-transform:none; }
.site-header #primary-menu .bb-sub-menu > li > a:hover,
.site-header #primary-menu .bb-sub-menu > li > a:focus-visible{
  background:var(--paper-warm);
  color:var(--teal);
}

/* --- 4.5 Logged-out actions --- */
/* Sign in -> plain text link (overrides the §3 a.button.outline chrome) */
.site-header .bb-header-buttons a.signin-button{
  display:inline-flex;
  align-items:center;
  padding:0 4px;
  font:600 14px/1 var(--sans);
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink);
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.site-header .bb-header-buttons a.signin-button:hover,
.site-header .bb-header-buttons a.signin-button:focus-visible{
  color:var(--teal);
  background:none;
}
/* Sign up -> the breathing "Adhérer" CTA (mirrors §3 .loa-adherer; overrides §3 a.button:not(.outline)) */
.site-header .bb-header-buttons a.button.small.signup{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 12px/1.65 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:13px 24px;
  border:0;
  border-radius:var(--radius);
  color:#fff;
  background:var(--grad);
  background-size:300% 100%;
  box-shadow:0 8px 24px -8px rgba(205,41,90,.35);
  animation:loa-breathe 7s ease-in-out infinite;   /* @keyframes defined in §3.4 */
  transition:.18s ease;
}
.site-header .bb-header-buttons a.button.small.signup:hover,
.site-header .bb-header-buttons a.button.small.signup:focus-visible{
  color:#fff;
  filter:brightness(1.05);
  box-shadow:0 10px 30px -6px rgba(56,173,174,.45);
}
@media (prefers-reduced-motion:reduce){
  .site-header .bb-header-buttons a.button.small.signup{ animation:none; background:var(--grad); }
}

/* --- 4.6 Logged-in account area (avatar + name dropdown) --- */
.site-header .header-aside .user-wrap > a.user-link{ gap:8px; }
.site-header .header-aside .user-wrap > a.user-link img,
.site-header .header-aside .user-wrap > a.user-link .avatar{
  width:32px;
  height:32px;
  border-radius:50%;
}
.site-header .header-aside .user-wrap .user-name{
  font:500 14px/1 var(--sans);
  color:var(--ink);
}
.site-header .header-aside .user-wrap .sub-menu,
.site-header .header-aside .user-wrap .sub-menu-inner{
  background:var(--paper);
  box-shadow:none;
}
.site-header .header-aside .user-wrap .sub-menu{
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.site-header .header-aside .user-wrap .sub-menu a:hover,
.site-header .header-aside .user-wrap .sub-menu a:focus-visible{
  background:var(--paper-warm);
  color:var(--teal);
}

/* --- 4.7 Footer --- */
/* BuddyBoss renders only a near-empty <footer.footer-bottom> (copyright line).
   Approach (a): hide it; loa-integration/inc/theme.php prints .loa-footer on wp_footer. */
.footer-bottom.bb-footer{ display:none; }

.loa-footer{
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  color:var(--muted);
  font:400 15px/1.6 var(--sans);
}
.loa-footer a{ text-decoration:none; }
.loa-footer a:hover,
.loa-footer a:focus-visible{ color:var(--ink); }
.loa-footer-inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:56px 24px 40px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:48px;
}
.loa-footer-col img{ max-height:40px; width:auto; margin-bottom:16px; }
.loa-footer-col p{ margin:.5em 0 0; }
.loa-footer-col--1 p{ max-width:34ch; }
.loa-footer-widget + .loa-footer-widget{ margin-top:22px; }   /* stacked widgets in one column */
.loa-footer h2{ margin:0 0 14px; }        /* .loa-eyebrow supplies the type */
.loa-footer ul{ list-style:none; margin:0; padding:0; }
.loa-footer li{ margin:0 0 9px; }
.loa-footer li:last-child{ margin-bottom:0; }
.loa-footer address{ font-style:normal; }
.loa-footer-legal{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:20px 24px 28px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.loa-footer-legal nav{ display:flex; flex-wrap:wrap; gap:10px 22px; }
/* the two legal-bar widget slots (copyright / links) */
.loa-footer-legal-start,
.loa-footer-legal-end{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.loa-footer-legal .loa-footer-widget,
.loa-footer-legal .textwidget{ display:contents; }   /* let seeded <a>/<span> flow into the flex row */
.loa-footer-legal-end .wp-block-paragraph {
  color: var(--muted);
}
@media (max-width:782px){
  .loa-footer-inner{ grid-template-columns:1fr; gap:32px; }
  .loa-footer-legal{ flex-direction:column; align-items:flex-start; }
}


/* ===== 5. HOOK CLASSES for Gutenberg-built pages =====
   No content shortcodes. Build the layout with core blocks (Group, Columns,
   Heading, Paragraph, Buttons) and drop one of these classes via the block's
   "Advanced → Additional CSS class(es)" field (NOT the Custom CSS box).
   Full reference: docs/superpowers/plans/loa-block-classes.md

     (auto)             a <p> immediately before an <h1>/<h2> inside a Group
                        is styled as a kicker automatically — .loa-eyebrow only
                        needed to force it elsewhere.
     .loa-hero          Group -> full-bleed gradient-wash hero band
     .loa-band          Group -> section vertical rhythm
     .loa-band--warm    + .loa-band -> warm-paper fill + top/bottom hairline
     .loa-cta           Group -> full-bleed warm join band     
     .loa-framed        Embed/Image -> 1px hairline frame
     .loa-cols-divided  Columns -> hairline dividers between columns, no gaps
     .loa-service-link  Button -> teal spaced-caps text link (no button chrome)
     .loa-adherer       Button -> the breathing gradient CTA (see §3.4)
     .loa-num           Heading/Paragraph -> big Cormorant teal number
     .loa-events-teaser  (output of the [loa/events-teaser] block)

   A class on a Group lands on .wp-block-group; on a Button on .wp-block-button
   (the link inside is .wp-block-button__link). Outline buttons: use the core
   block "Outline" style — styled in §3.3, no LOA class needed. */

/* --- 5.1 Auto kicker: <p> right before a heading, inside a layout Group --- */
:is(.wp-block-group, .wp-block-group__inner-container) > p:has(+ h1),
:is(.wp-block-group, .wp-block-group__inner-container) > p:has(+ h2),
:is(.wp-block-group, .wp-block-group__inner-container) > p:has(+ .wp-block-heading),
p.loa-eyebrow{
  font:600 12px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  margin:0 0 16px;
}

/* --- 5.1b Prose --- */
/*.loa-prose p{ margin:0 0 1.15em; }
.loa-prose h2,
.loa-prose h3{ margin:1.8em 0 .5em; }*/

/* --- 5.2 Section rhythm ---------------------------------------------------
   Stacked top-level sections on a page get a consistent gap automatically —
   no .loa-band needed. Add .loa-flow to a page's outer wrapper (or it applies
   on the home) to opt in; scoped to direct children so prose is untouched. */
.home .entry-content > * + *,
.site .site-content .entry-content > * + *,
.loa-flow > * + *{ margin-block-start:clamp(2.5rem,5vw,4rem); }

.loa-band{ padding-block:clamp(3rem,6vw,4.5rem); }
.loa-band--warm{
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* --- 5.3 Full-bleed bands (hero + CTA) -----------------------------------
   Set the Group to "Full width" in the editor (-> .alignfull, theme breaks it
   out). If it ISN'T full-width we break it out here via calc(50% - 50vw)
   (no width:100vw, so no h-scrollbar). Either way, pad the inner content back
   to the --wrap column. */
.loa-hero:not(.alignfull),
.loa-cta:not(.alignfull){
  margin-inline:calc(50% - 50vw);
}
.loa-hero,
.loa-cta{ padding-inline:max(24px, calc(50vw - var(--wrap) / 2)); }
.loa-hero > *,
.loa-cta > *{ max-width:var(--wrap); margin-inline:auto; }

/* --- 5.4 Hero --- */
.loa-hero{
  /* LOW-opacity --grad wash over --paper-warm — a whisper, not a slab */
  background:linear-gradient(180deg,rgba(56,173,174,.10),rgba(205,41,90,.07) 70%,transparent),var(--paper-warm);
  border-bottom:1px solid var(--line);
  padding-block:clamp(4.5rem,9vw,7rem);
}
.loa-hero h1{ max-width:20ch; }
.loa-hero h1 + p{ max-width:52ch; color:var(--muted); font-size:19px; }
.loa-hero .wp-block-buttons{ margin-top:34px; gap:14px; }

/* --- 5.5 Framed media --- */
.loa-framed,
.loa-framed .wp-block-embed__wrapper,
.loa-framed img{ border:1px solid var(--line); }

/* --- 5.6 Columns with hairline dividers --- */
.loa-cols-divided.wp-block-columns{ gap:0; }
.loa-cols-divided > .wp-block-column{
  padding:6px 34px;
  border-left:1px solid var(--line);
}
.loa-cols-divided > .wp-block-column:first-child{ border-left:0; padding-left:0; }
.loa-cols-divided > .wp-block-column:last-child{ padding-right:0; }
.loa-cols-divided > .wp-block-column p{ color:var(--muted); }

.loa-num{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:34px;
  line-height:1;
  color:var(--teal);
  margin:0 0 12px;
}

/* --- 5.7 CTA band --- */
.loa-cta{
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.loa-cta .wp-block-columns{ align-items:center; }
.loa-cta h2{ margin:0; max-width:20ch; }
.loa-cta p{ color:var(--muted); }

/* --- 5.8 .loa-service-link — a Button styled as a plain teal text link ---
   .wp-block-button-qualified to beat §3.2's primary-button rule. */
a.loa-service-link,
.wp-block-button.loa-service-link > .wp-block-button__link,
.loa-service-link > a{
  padding:0;
  border:0;
  background:none;
  color:var(--teal);    
}
a.loa-service-link:hover,
a.loa-service-link:focus-visible,
.wp-block-button.loa-service-link > .wp-block-button__link:hover,
.wp-block-button.loa-service-link > .wp-block-button__link:focus-visible,
.loa-service-link > a:hover,
.loa-service-link > a:focus-visible{
  background:none;
  color:var(--ink);
}

/* --- 5.9 [loa/events-teaser] block output --- */
.loa-events-teaser{
  list-style:none;
  margin:2em 0;
  padding:0;
  border-top:1px solid var(--line);
}
.loa-events-teaser li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content: space-between;
  gap:6px 60px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.loa-events-teaser li a:first-of-type{
  flex-grow: 1;
  color: var(--magenta);  
}
.loa-events-teaser-date{
  font-family:var(--serif);
  font-size:20px;
  color:var(--muted);
  min-width:9ch;
}

.loa-events-teaser-cta{
  margin:22px 0 0;
  font:600 12px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.loa-events-teaser-empty{ color:var(--muted); }


/* --- 5.11 Blockquote --- */
.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow {
  margin: 34px 0;
  padding-left: 24px;
  border-left: 3px solid var(--teal);
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.3;
  font-style: italic;
  color: var(--ink);
  background: transparent;
}

.wp-block-group.has-small-font-size  .wp-block-quote p{
  font-size: 1.3rem;
}
.wp-block-group.has-small-font-size  .wp-block-quote cite{
  font-size: 1.2rem;
}

.wp-block-group.has-medium-font-size  .wp-block-quote p{
  font-size: 1.5rem !important;
}
.wp-block-group.has-medium-font-size  .wp-block-quote cite{
  font-size: 1.4rem !important;
}
.hentry blockquote.wp-block-quote::before{
  background-color: var(--magenta);
}

/* --- 5.12 iFrame, Video --- */
/* hack to remove the ugly border on the left and right of the home video */
.home .entry-content .fluid-width-video-wrapper{
  padding-top: 56.25% !important;
  overflow: hidden;
  margin: 0;
}
.home iframe {
    transform: scale(1.01);
}


/* --- 5.13 Mobile --- */
@media (max-width:782px){
  .loa-cols-divided > .wp-block-column{
    border-left:0;
    border-top:1px solid var(--line);
    padding:24px 0;
  }
  .loa-cols-divided > .wp-block-column:first-child{ border-top:0; padding-top:0; }
}


/* ===== 6. MEMBERSHIP FLOW =====
   Registration toggle + MemberPress signup form on /pourquoi-nous-rejoindre/
   (page 111), the MemberPress Pro login template on /login/ (page 42), and the
   MemberPress account screens shown inside the BuddyBoss profile tab
   (/membres/<user>/mp-membership/).

   Verified selectors (curl of served HTML + grep of MemberPress 1.12.17 and
   buddyboss-theme/assets/css/memberpress.css, 2026-09-01):
     regform wrapper ...... .loa-regform            (loa-integration/inc/registration-form.php)
     toggle cards ......... .loa-regform-choice > .loa-regform-cards > label.loa-regform-card
                            (+ .loa-regform-card--selected, toggled by the shortcode JS)
     signup form .......... form.mepr-signup-form.mepr-form  (wrapped in .mp_wrapper)
     field group .......... .bb-mp-checkout-details  (holds every .mp-form-row)
     field row ............ .mp-form-row  (+ .mepr_first_name / .mepr_last_name /
                            .mepr_email / .mepr_username / .mepr_password /
                            .mepr_password_confirm / .mepr_custom_field.mepr_mepr-address-* /
                            .mepr_custom_field.mepr_loa_linkedin / .mepr_loa_phone)
     price row / cell ..... .mp-form-row.mepr_price , .mepr_price_cell
     submit ............... input.mepr-submit  (inside .mp-form-submit)
     login card chrome .... .mepro-boxed , .mepro-login-contents ,
                            #mepr-template-login form.mepro-form  (readylaunch/login.css)
     login rows ........... .mp-form-row.mepr_username / .mepr_password / .mepr_remember_me
     login submit ......... #mepr-template-login .mepro-form input[type="submit"].mepr-share-button
     login actions ........ .mepr-login-actions a
     login logo ........... .mepr-login-page a > img.site-logo  (printed by the Pro template)
     account nav .......... #mepr-account-nav .mepr-nav-item a ,
                            #mepr-account-nav .mepr-active-nav-tab a
     account tables ....... .mp_wrapper table.mepr-account-table
     account wrapper ...... .bb-mp-account-settings (+ .mp_wrapper.mp_wrapper_nav)

   The child stylesheet (handle buddyboss-child-css) is enqueued LAST, after
   mp-theme / mp-pro-login / buddyboss-theme-memberpress, so these overrides win
   on EQUAL specificity — the #mepr-template-login / #mepr-account-nav ids are
   repeated only to match the plugin/theme specificity, not to force anything.
   !important appears twice, each time only to beat MemberPress' "design" inline
   <style> block (seen in curl) and each is commented.
   Section 3 already sets the field baseline (1px --line border, teal focus ring,
   .mp-form-label eyebrow labels) — section 6 only refines layout + spacing. */

/* --- 6.1 Pay-now / pay-later toggle --- */
.loa-regform{ max-width:var(--wrap); }
.loa-regform-choice{
  margin:0 0 32px;
  padding:0;
  border:0;
}
.loa-regform-legend{
  display:block;
  float:left;            /* <legend> ignores plain display:block in some UAs */
  width:100%;
  margin:0 0 14px;
  padding:0;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.loa-regform-cards{
  clear:both;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:720px){
  .loa-regform-cards{ grid-template-columns:1fr 1fr; }
}
.loa-regform-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 12px;
  align-items:start;
  margin:0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.loa-regform-card > input[type="radio"]{
  grid-row:1 / span 2;
  width:auto;
  margin:3px 0 0;
  accent-color:var(--teal);
}
.loa-regform-card--selected{
  border-width:1.5px;
  border-color:var(--teal);
  padding:19.5px 21.5px;   /* keep the card the same size as the .5px border grows */
  background:rgba(56,173,174,.06);
}
.loa-regform-card:focus-within{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
.loa-regform-card-title{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.2;
  color:var(--ink);
}
.loa-regform-card-note{
  grid-column:2;
  font:400 14px/1.5 var(--sans);
  color:var(--muted);
}

/* --- 6.2 MemberPress signup form (inside the chosen card) --- */
.loa-regform .mp_wrapper{ max-width:none; }
.loa-regform .mepr-signup-form{ margin-top:8px; }

/* price / payment area — --paper-warm panel, hairline border */
.loa-regform .mepr_price{ margin:0 0 20px; }
.loa-regform .mepr_price_cell{
  padding:16px 18px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
}

/* row rhythm + full-width fields (baseline border/focus come from §3.5) */
.loa-regform .mp-form-row{ margin:0 0 18px; }
.loa-regform .mp-form-label{ margin-bottom:8px; }
.loa-regform .mepr-form-input{ width:100%; }

/* 2-column grid on >=720px; most rows span both, specific pairs sit side by side */
@media (min-width:720px){
  .loa-regform .bb-mp-checkout-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
  }
  .loa-regform .bb-mp-checkout-details > .mp-form-row{ grid-column:1 / -1; }
  .loa-regform .bb-mp-checkout-details > .mepr_first_name,
  .loa-regform .bb-mp-checkout-details > .mepr_last_name,
  .loa-regform .bb-mp-checkout-details > .mepr_loa_linkedin,
  .loa-regform .bb-mp-checkout-details > .mepr_loa_phone,
  .loa-regform .bb-mp-checkout-details > .mepr_password,
  .loa-regform .bb-mp-checkout-details > .mepr_password_confirm{
    grid-column:auto;
  }
}

/* address block — one connected --paper-warm panel, full width in the grid */
.loa-regform .bb-mp-checkout-details > [class*="mepr_mepr-address-"]{
  grid-column:1 / -1;
  margin:0;
  padding:14px 16px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-top-width:0;
}
.loa-regform .bb-mp-checkout-details > .mepr_mepr-address-one{
  margin-top:6px;
  border-top-width:1px;
  border-radius:var(--radius) var(--radius) 0 0;
}
.loa-regform .bb-mp-checkout-details > .mepr_mepr-address-zip{
  margin-bottom:18px;
  border-radius:0 0 var(--radius) var(--radius);
}

/* submit → flat --grad gradient, full width (NOT the breathing §3.4 animation) */
.loa-regform .mepr-submit{
  width:100%;
  border:0;
  color:#fff;
  background:var(--grad);
  background-size:100% 100%;   /* whole gradient shown, static — no animation */
  box-shadow:none;
  animation:none;
}
.loa-regform .mepr-submit:hover,
.loa-regform .mepr-submit:focus-visible{
  color:#fff;
  background:var(--grad);
  filter:brightness(1.05);
}

/* --- 6.3 Login page (/login/, MemberPress Pro template) --- */
/* readylaunch/login.css gives .mepro-boxed a 10px radius + faux-shadow border +
   36px flex padding, and #mepr-template-login .mepro-form its own grey button and
   4px input chrome. Child sheet loads after mp-pro-login-css, so matched-
   specificity overrides win with no !important. */
/* NOTE: the site's login route is wp-login.php (branded via
   loa-integration/inc/frontend.php `login_enqueue_scripts`), NOT this page.
   These rules only apply if someone opens /login/ directly. */
.mepr-login-page main#primary{ max-width:520px; margin-inline:auto; }
.mepr-login-page .mepro-boxed{
  display:block;
  width:100%;
  max-width:420px;
  margin:40px auto;
  padding:36px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:none;
  color:var(--ink);
}
.mepr-login-page .mepro-boxed > *{ padding-left:0; padding-right:0; }
.mepr-login-page .mepro-login-contents{ width:100%; }

/* the Pro template prints <a><img class="site-logo"></a> just above <main> */
.mepr-login-page .site-logo{
  display:block;
  width:auto;
  max-width:190px;
  height:auto;
  margin:8px auto 4px;
}

#mepr-template-login .mepro-form h1{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500;
  margin:0 0 24px;
  text-align:center;
  color:var(--ink);
}
#mepr-template-login .mepro-form input[type="text"],
#mepr-template-login .mepro-form input[type="password"]{
  min-height:0;
  margin-bottom:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
#mepr-template-login .mepro-form input[type="text"]:focus-visible,
#mepr-template-login .mepro-form input[type="password"]:focus-visible{
  border:1px solid var(--teal);
  box-shadow:0 0 0 2px rgba(56,173,174,.35);
}
.mepr-login-page .mp-form-row{ margin-bottom:18px; }
.mepr-login-page .mp-form-label{ margin-bottom:8px; }

/* submit → solid teal primary (matches §3.2), flat, full width */
#mepr-template-login .mepro-form input[type="submit"],
#mepr-template-login .mepro-form input[type="submit"].mepr-share-button{
  width:100%;
  border:1px solid var(--teal);
  border-radius:var(--radius);
  background:var(--teal);
  color:#fff;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:15px 26px;
}
#mepr-template-login .mepro-form input[type="submit"]:hover,
#mepr-template-login .mepro-form input[type="submit"]:focus-visible{
  background:var(--ink);
  border-color:var(--ink);
}

/* links below the form (Forgot password / any join link) → muted eyebrow */
.mepr-login-page .mepr-login-actions{ text-align:center; }
.mepr-login-page .mepr-login-actions a{
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.mepr-login-page .mepr-login-actions a:hover{ color:var(--teal); }

/* --- 6.4 MemberPress account (BuddyBoss profile -> mp-membership tab) --- */
/* MemberPress' "design" inline <style> (seen in curl) sets
   #mepr-account-nav{background:#38ADAE!important} and tints its links;
   buddyboss-theme/assets/css/memberpress.css boxes the nav + tables. The
   #mepr-account-nav id is repeated to match; !important is used once, only to
   beat that inline !important. */
#mepr-account-nav{
  background:none !important;   /* beats MP design inline #mepr-account-nav{background:#38ADAE!important} */
  border:0;
  border-bottom:1px solid var(--line);
  margin:0 0 28px;
}
#mepr-account-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:4px 28px;
  margin:0;
  padding:0;
  list-style:none;
}
#mepr-account-nav .mepr-nav-item{ display:block; padding:0; }
#mepr-account-nav .mepr-nav-item a{
  display:block;
  padding:12px 0;
  border-bottom:2px solid transparent;
  background:none;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
#mepr-account-nav .mepr-nav-item a:hover{
  background:none;
  color:var(--ink);
}
#mepr-account-nav .mepr-active-nav-tab a{
  background:none;
  color:var(--teal);
  border-bottom-color:var(--teal);
}

/* tables → hairline, no rounded fill / shadow */
.mp_wrapper table.mepr-account-table{
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  border-collapse:collapse;
}
.mp_wrapper table.mepr-account-table th,
.mp_wrapper table.mepr-account-table td{
  border:1px solid var(--line);
  font-family:var(--sans);
}
.mp_wrapper table.mepr-account-table th{
  background:var(--paper-warm);
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.mp_wrapper.mp_login_form {
  position: absolute;
  top: 25vh;
  left: calc( 50% - 144px);
}

/* active membership emphasis */
.mepr-account-active,
.mepr-account-product a{ color:var(--teal); }

/* drop the BuddyBoss white card wrapper + sidebar chrome */
.bb-mp-account-settings{
  background:none;
  border:0;
  border-radius:0;
}
.bb-mp-account-settings .mp_wrapper.mp_wrapper_nav{
  flex-basis:100%;
  min-height:0;
  margin:0;
  padding:0;
  background:none;
  border-right:0;
  border-radius:0;
}
.bb-mp-account-settings .mp_wrapper:not(.mp_wrapper_nav){ padding:0; }


/* ===== 7. COMMUNITY (BuddyBoss) =====
   BuddyBoss Platform 3.4.3, "nouveau" templates, with buddyboss-theme
   /buddypress/ overrides active. Verified against TEMPLATE SOURCE on
   2026-09-02 (pages are access-gated — cannot curl rendered HTML):

     wrapper .............. <div id="buddypress" class="buddypress-wrap ...">
                            (buddypress-functions.php ::inject_ajax_response /
                            template output). Everything below is scoped to it.

     -- Member directory (members/index.php + members/members-loop.php) --
     type nav ............ nav.bp-navs.bp-nouveau-... > ul.component-navigation
                           > li(.selected/.current) > a           [directory-nav.php]
     secondary header ... .flex.bp-secondary-header  (theme members/index.php)
     search box ......... .subnav-search.members-search input (+ .bb-subnav-filters*)
     filter selects ..... .subnav-filters select  /  .bp-profile-filter-wrap
     item count ......... .bb-item-count > .bb-count
     grid list .......... ul#members-list.grid  (bp_nouveau_loop_classes())
     item ............... li.item-entry  (bp_member_class(); also .member)
     card box .......... li.item-entry > .list-wrap > .list-wrap-inner
     avatar ............ .item-avatar > a > img.avatar
     name .............. h2.list-title.member-name > a
     meta .............. p.item-meta.member-type , p.item-meta.last-activity ,
                         span.separator
     actions ........... .member-buttons-wrap , .primary-action , .member-button-wrap

     -- Member profile header (members/single/member-header.php) --
     wrap .............. #cover-image-container.item-header-wrap
     avatar ............ #item-header-avatar > img
     content ........... #item-header-content
     name .............. h2.user-nicename
     meta .............. .header-meta-wrap , .item-meta , span.mention-name , .separator
     action buttons .... .member-header-actions-wrap > .member-header-actions
                         a  (friendship wrapper #friendship-button /
                         a.friendship-button.not_friends = primary "Connect";
                         .follow-button a , .message-button a = secondary)
     primary nav ....... nav#object-nav.bp-navs.single-screen-navs.bb-single-main-nav.users-nav
                         > ul > li(.current.selected) > a > .bb-single-nav-item-point
     sub nav ........... nav#subnav.bp-navs.bp-subnavs.user-subnav > ul.subnav
                         > li(.current.selected) > a          [item-subnav.php]
     xProfile .......... .bp-widget.<group-slug> > table.profile-fields.bp-tables-user
                         > tr > td.label / td.data            [profile-loop.php]

     -- Groups directory (groups/index.php + groups/groups-loop.php) --
     grid list ......... ul#groups-list.grid.groups-dir-list
     item .............. li.item-entry  (bp_group_class(); also .group)
     card box ......... li.item-entry > .list-wrap
     cover ............ .bs-group-cover  |  avatar .item-avatar > a.group-avatar-wrap
     name ............. h2.list-title.groups-title > a
     meta ............. .item-meta-wrap , p.item-meta.group-details , p.last-activity.item-meta
     desc ............. .item-desc.group-item-desc
     footer ........... .group-footer-wrap , .group-members-wrap , .groups-loop-buttons

     -- Single group header (groups/single/group-header.php) --
     wrap ............. #cover-image-container.item-header-wrap
     avatar .......... #item-header-avatar
     name ............ .bp-group-title-wrap > h2.bb-bp-group-title
     meta ............ .bp-group-meta-wrap , p.highlight.bp-group-meta.bp-group-status ,
                       p.bp-group-meta.bp-group-type , p.last-activity.item-meta
     desc ............ .group-description
     actions ......... .group-actions-wrap , #item-actions.group-item-actions
     sub nav ......... nav#subnav.bp-navs.bp-subnavs.group-subnav > ul.subnav > li > a

     -- Activity (theme activity/index.php + activity/entry.php) --
     stream .......... #activity-stream.activity  >  ul.activity-list.bp-list
     post form ....... #bp-nouveau-activity-form.activity-update-form (Backbone-rendered:
                       .activity-update-form form , #whats-new-form , #whats-new ,
                       .whats-new-toolbar , #whats-new-submit)
     item ............ li.activity-item  (bp_activity_css_class(); + .activity .activity_update)
     head ............ .bb-activity-head  (group variant: .bp-activity-head-group)
     avatar .......... .activity-avatar.item-avatar > a > img.avatar
     header .......... .activity-header  (group: .activity-header--group ,
                       .activity-group-heading , .activity-group-post-meta ,
                       .activity-post-author)
     date/meta ....... p.activity-date > a , span.time-since , p.activity-topic
     content ......... .activity-content > .activity-inner   |  .activity-title > h2
     state line ...... .activity-state(.has-likes/.has-comments) , .activity-state-comments ,
                       span.comments-count
     action bar ...... .activity-meta , .bp-generic-meta.action , a.button.fav.bp-like-button
                       (reacted: a.unfav.has-reaction.has-like/.has-emotion) ,
                       span.like-count , span.like-count.reactions_item ,
                       a.acomment-reply , a.bp-primary-action
     load more ....... li.load-more > a.button.outline   [activity-loop.php]

   LOAD ORDER: buddyboss_theme_child_scripts_styles() enqueues this file at
   priority 9999 — it loads AFTER every plugin (bp-nouveau*.css) and theme
   (buddypress.min.css) stylesheet, so #buddypress-scoped rules here win on
   equal-or-greater specificity with NO !important. The theme's minified
   buddypress CSS ships a handful of !important declarations; the only ones
   whose PROPERTY this section also sets are noted inline. */

/* --- 7.1 Directory type-nav + filter bar -> hairline, eyebrow ------------
   Strip BuddyBoss's pill/tab/box chrome on the members & groups directory
   sub-header. Nothing here carries theme !important. */
#buddypress .bp-secondary-header,
#buddypress .dir-navs.component-navigation,
#buddypress nav.bp-navs.bp-dir-navs{
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  border-bottom:1px solid var(--line);
}
#buddypress .component-navigation{
  display:flex;
  flex-wrap:wrap;
  gap:0 28px;
  margin:0;
  padding:0;
  list-style:none;
}
#buddypress .component-navigation > li{ margin:0; background:none; }
#buddypress .component-navigation > li > a{
  display:block;
  padding:12px 0;
  border-bottom:2px solid transparent;
  background:none;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
#buddypress .component-navigation > li > a:hover{ color:var(--ink); background:none; }
#buddypress .component-navigation > li.selected > a,
#buddypress .component-navigation > li.current > a{
  color:var(--ink);
  border-bottom-color:var(--teal);
  background:none;
}
#buddypress .component-navigation > li .count{
  background:none;
  color:var(--muted);
  padding:0 0 0 4px;
  font-size:inherit;
}

/* item count line */
#buddypress .bb-item-count{
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  border:0;
  padding:14px 0;
}
#buddypress .bb-item-count .bb-count{ color:var(--ink); font-weight:700; }

/* search + order-by: hairline inputs (restated here because §3's plain
   input/select baseline loses specificity inside #buddypress) */
#buddypress .subnav-search input[type="text"],
#buddypress .subnav-search input[type="search"],
#buddypress .dir-search input[type="text"],
#buddypress .dir-search input[type="search"],
#buddypress .subnav-filters select,
#buddypress .last select,
#buddypress .filter select{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  font:400 14px/1.4 var(--sans);
  color:var(--ink);
  padding:9px 12px;
}
#buddypress .subnav-search input:focus,
#buddypress .subnav-filters select:focus{
  outline:none;
  border-color:var(--teal);
}
#buddypress .subnav-search button,
#buddypress .dir-search .nouveau-search-submit{
  background:none;
  border:0;
  color:var(--muted);
  box-shadow:none;
}
/* BuddyBoss "filter" dropdown pill (Newest/Alphabetical/…) */
#buddypress .bb-subnav-filters-container,
#buddypress .subnav-filters-modal{
  background:none;
  border:0;
  box-shadow:none;
}
#buddypress .bb-subnav-filters-container button.subnav-filters-opener{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  font:400 13px/1.4 var(--sans);
  color:var(--ink);
  padding:8px 12px;
}
#buddypress .bb-subnav-filters-label{
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
/* grid/list view toggle — plain, no filled active pill */
#buddypress .grid-filters .layout-view{
  background:none;
  border:0;
  color:var(--muted);
  box-shadow:none;
}
#buddypress .grid-filters .layout-view.active{ color:var(--teal); background:none; }

/* --- 7.2 Member & group directory items -> cards (shared card language) -- */
#buddypress #members-list.grid,
#buddypress #groups-list.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}
#buddypress #members-list li.item-entry,
#buddypress #groups-list li.item-entry{
  margin:0;
  list-style:none;
  background:none;
}
#buddypress #members-list li.item-entry .list-wrap,
#buddypress #groups-list li.item-entry .list-wrap{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  padding:24px;
  height:100%;
  overflow:visible;
  transition:border-color .18s ease;
}
/* hover: border -> teal, NO lift / NO shadow (spec §3) */
#buddypress #members-list li.item-entry .list-wrap:hover,
#buddypress #groups-list li.item-entry .list-wrap:hover,
#buddypress #members-list li.item-entry:focus-within .list-wrap,
#buddypress #groups-list li.item-entry:focus-within .list-wrap{
  border-color:var(--teal);
  transform:none;
  box-shadow:none;
}
/* stacked (list) view — full-width rows, hairline separated */
#buddypress #members-list:not(.grid) li.item-entry .list-wrap,
#buddypress #groups-list:not(.grid) li.item-entry .list-wrap{
  border-width:0 0 1px;
  border-radius:0;
  padding:20px 0;
}

/* --- 7.2a Member card: let it grow, put the action row back in flow ------
   BuddyBoss buddypress.min.css pins the member card's button rows and then
   reserves space with a fixed padding-bottom + card min-height, so any card
   whose content is taller than the reserve gets its last meta line clipped
   behind the absolutely-positioned icon bar. Rules being overridden (none
   carry !important -> equal-or-greater specificity + priority-9999 load wins):
     .grid.members-list .list-wrap{min-height:40px}
     #members-list.grid .list-wrap .item-block{min-height:10px}
     #members-list.item-list.grid .list-wrap.secondary-buttons{padding:15px 20px 52px}
     #members-list.item-list.grid .list-wrap.primary-button.no-secondary-buttons{padding-bottom:75px}
     #members-list.item-list.grid .list-wrap.primary-button.secondary-buttons{padding-bottom:115px}
     #members-list.item-list.grid .list-wrap.primary-button .primary-action{position:absolute;left:20px;right:20px;bottom:50px}
     #buddypress .only-grid-view.button-wrap.member-button-wrap.footer-button-wrap{position:absolute;width:100%;bottom:0;margin:0 -20px;background-color:…;border-top:1px solid …;border-radius:0 0 … …}
     .button-wrap.member-button-wrap.on-top{position:absolute;top:2px;right:5px} */
#buddypress #members-list li.item-entry .list-wrap,
#buddypress #members-list.item-list.grid li.item-entry .list-wrap,
#buddypress #members-list.item-list.grid li.item-entry .list-wrap.secondary-buttons,
#buddypress #members-list.item-list.grid li.item-entry .list-wrap.primary-button,
#buddypress #members-list.item-list.grid li.item-entry .list-wrap.primary-button.secondary-buttons,
#buddypress #members-list.item-list.grid li.item-entry .list-wrap.primary-button.no-secondary-buttons{
  height:auto;
  min-height:0;
  padding:24px;                 /* kill the theme's reserved padding-bottom */
  overflow:visible;
}
#buddypress #members-list li.item-entry .list-wrap-inner{
  height:auto;
  min-height:0;
  overflow:visible;
}
#buddypress #members-list li.item-entry .list-wrap .item-block,
#buddypress #members-list.grid li.item-entry .list-wrap .item-block{
  min-height:0;
}
/* content column (GRID view only — list view keeps the theme's flex row):
   avatar + name + meta stacked, with breathing room before the action row */
#buddypress #members-list.item-list.grid li.item-entry .list-wrap-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:0 0 4px;
}
/* de-pin every action row -> normal flow, hairline-topped, after the meta */
#buddypress #members-list li.item-entry .member-buttons-wrap,
#buddypress #members-list li.item-entry .primary-action,
#buddypress #members-list.item-list.grid li.item-entry .list-wrap.primary-button .primary-action,
#buddypress #members-list li.item-entry .only-grid-view.button-wrap.member-button-wrap.footer-button-wrap,
#buddypress #members-list li.item-entry .button-wrap.member-button-wrap.on-top{
  position:static;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  width:auto;
  margin:0;
  background:none;
  border-radius:0;
}
#buddypress #members-list.item-list.grid li.item-entry .member-buttons-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
/* the followers count line sits with the meta, not under the buttons */
#buddypress #members-list li.item-entry .follow-container{
  margin:2px 0 0;
  justify-content:flex-start;
}

/* avatar */
#buddypress #members-list .item-avatar img,
#buddypress #members-list .item-avatar .avatar,
#buddypress #groups-list .item-avatar img,
#buddypress #groups-list .item-avatar .avatar{
  width:60px;
  height:60px;
  border-radius:50%;
}
#buddypress #groups-list .item-avatar img,
#buddypress #groups-list .item-avatar .avatar{ border-radius:var(--radius); }

/* name -> Cormorant */
#buddypress #members-list .list-title.member-name,
#buddypress #groups-list .list-title.groups-title{
  margin:0 0 4px;
  font:600 20px/1.25 var(--serif);
  letter-spacing:.01em;
}
#buddypress #members-list .list-title.member-name a,
#buddypress #groups-list .list-title.groups-title a{ color:var(--ink); }
#buddypress #members-list .list-title.member-name a:hover,
#buddypress #groups-list .list-title.groups-title a:hover{ color:var(--teal); }

/* meta line -> muted Commissioner */
#buddypress #members-list .item-meta,
#buddypress #groups-list .item-meta,
#buddypress #groups-list .item-desc{
  margin:2px 0 0;
  font:400 13px/1.5 var(--sans);
  color:var(--muted);
}
#buddypress #members-list .item-meta.member-type{
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.12em;
}
#buddypress #members-list .item-meta .separator,
#buddypress #groups-list .item-meta .separator{ margin:0 6px; color:var(--line); }

/* card action buttons — quiet outline, teal on hover */
#buddypress #members-list .member-buttons-wrap a.button,
#buddypress #members-list .primary-action a.button,
#buddypress #groups-list .groups-loop-buttons a.button{
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  color:var(--ink);
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:9px 14px;
}
#buddypress #members-list .member-buttons-wrap a.button:hover,
#buddypress #members-list .primary-action a.button:hover,
#buddypress #groups-list .groups-loop-buttons a.button:hover{
  border-color:var(--teal);
  color:var(--teal);
  background:none;
}
#buddypress #groups-list .group-footer-wrap{
  border-top:1px solid var(--line);
  margin-top:16px;
  padding-top:14px;
}

/* --- 7.3 Single-item headers (member profile + group) ------------------- */
#buddypress #cover-image-container.item-header-wrap{
  background:var(--paper);
  border:0;
  border-bottom:1px solid var(--line);
  box-shadow:none;
  border-radius:0;
  padding:0 0 28px;
}
#buddypress #item-header-cover-image{ background:none; }
#buddypress #item-header-avatar img,
#buddypress #item-header-avatar .avatar{
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid var(--line);
  box-shadow:none;
}
#buddypress #cover-image-container #item-header-content h2.user-nicename,
#buddypress #cover-image-container #item-header-content h2.bb-bp-group-title{
  margin:0 0 6px;
  font:600 30px/1.15 var(--serif);
  letter-spacing:.01em;
  color:var(--ink);
}
#buddypress #item-header-content .item-meta,
#buddypress #item-header-content .header-meta-wrap,
#buddypress #item-header-content .activity,
#buddypress .bp-group-meta-wrap,
#buddypress .group-description{
  font:400 14px/1.55 var(--sans);
  color:var(--muted);
}
#buddypress #item-header-content .mention-name{ color:var(--muted); }
#buddypress #item-header-content .item-meta .separator,
#buddypress .bp-group-meta-wrap .separator{ margin:0 6px; color:var(--line); }
/* group privacy / type chips -> plain eyebrow text, no highlight fill */
#buddypress .bp-group-meta.bp-group-status,
#buddypress .bp-group-meta.bp-group-type,
#buddypress .bp-group-status.highlight{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  color:var(--muted);
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* profile / group header action buttons -> §3 button system, #buddypress-scoped
   (beats id-scoped `#buddypress a.button` from Task D2, specificity 1,1,1) */
#buddypress .member-header-actions a,
#buddypress .member-header-actions .generic-button > a,
#buddypress .group-actions-wrap a.button,
#buddypress .group-item-actions a.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:none;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:none;
  color:var(--ink);
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:11px 18px;
  transition:.16s ease;
}
#buddypress .member-header-actions a:hover,
#buddypress .member-header-actions .generic-button > a:hover,
#buddypress .group-actions-wrap a.button:hover,
#buddypress .group-item-actions a.button:hover{
  background:var(--ink);
  color:var(--paper);
}
/* primary CTA: Connect (not-yet-friends) + group Join -> teal fill */
#buddypress .member-header-actions #friendship-button.not_friends a,
#buddypress .member-header-actions a.friendship-button.not_friends,
#buddypress .group-actions-wrap .group-button.join-group a.button,
#buddypress .group-actions-wrap a.join-group,
#buddypress .group-actions-wrap a.accept-invite{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--paper);
}
#buddypress .member-header-actions #friendship-button.not_friends a:hover,
#buddypress .member-header-actions a.friendship-button.not_friends:hover,
#buddypress .group-actions-wrap .group-button.join-group a.button:hover,
#buddypress .group-actions-wrap a.join-group:hover,
#buddypress .group-actions-wrap a.accept-invite:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* --- 7.4 Primary + sub navigation -> underlined eyebrow tabs -------------
   Same treatment as §4 header-nav underline / §6 account-nav tabs:
   muted default, ink + 2px teal bottom-border on the current tab. */
#buddypress nav#object-nav.bp-navs,
#buddypress nav#subnav.bp-navs,
#buddypress .bp-navs.single-screen-navs,
#buddypress .bp-navs.bp-subnavs{
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  box-shadow:none;
  border-radius:0;
}
#buddypress nav#object-nav.bp-navs ul,
#buddypress nav#subnav.bp-navs ul,
#buddypress .bp-navs.single-screen-navs > ul,
#buddypress .bp-navs.bp-subnavs ul.subnav{
  display:flex;
  flex-wrap:wrap;
  gap:0 28px;
  margin:0;
  padding:0;
  list-style:none;
  background:none;
}
#buddypress nav#object-nav.bp-navs li,
#buddypress nav#subnav.bp-navs li,
#buddypress .bp-navs.single-screen-navs li,
#buddypress .bp-navs.bp-subnavs li{
  margin:0;
  background:none;
  border:0;
}
#buddypress nav#object-nav.bp-navs li > a,
#buddypress nav#subnav.bp-navs li > a,
#buddypress .bp-navs.single-screen-navs li > a,
#buddypress .bp-navs.bp-subnavs li > a{
  display:block;
  padding:14px 0;
  border-bottom:2px solid transparent;
  background:none;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
#buddypress nav#object-nav.bp-navs li > a:hover,
#buddypress nav#subnav.bp-navs li > a:hover,
#buddypress .bp-navs.single-screen-navs li > a:hover,
#buddypress .bp-navs.bp-subnavs li > a:hover{ color:var(--ink); background:none; }
#buddypress nav#object-nav.bp-navs li.current > a,
#buddypress nav#object-nav.bp-navs li.selected > a,
#buddypress nav#subnav.bp-navs li.current > a,
#buddypress nav#subnav.bp-navs li.selected > a,
#buddypress .bp-navs.single-screen-navs li.current > a,
#buddypress .bp-navs.single-screen-navs li.selected > a,
#buddypress .bp-navs.bp-subnavs li.current > a,
#buddypress .bp-navs.bp-subnavs li.selected > a{
  color:var(--ink);
  border-bottom-color:var(--teal);
  background:none;
}
#buddypress .bp-navs li .count{
  background:none;
  color:var(--muted);
  min-width:0;
  padding:0 0 0 5px;
  font:inherit;
  line-height:inherit;
}
#buddypress .bb-single-nav-item-point{ display:inline; }
/* the theme's mobile <select class="bp-navs__dropdown"> alternate nav */
#buddypress select.bp-navs__dropdown{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  font:400 14px/1.4 var(--sans);
  padding:9px 12px;
}

/* --- 7.5 xProfile "Coordonnées" -> definition list feel ----------------- */
#buddypress .bp-widget table.profile-fields,
#buddypress table.profile-fields.bp-tables-user{
  border:0;
  background:none;
  border-collapse:collapse;
  width:100%;
  margin:8px 0 0;
}
#buddypress table.profile-fields tr{ border-bottom:1px solid var(--line); }
#buddypress table.profile-fields td{
  border:0;
  padding:14px 0;
  vertical-align:baseline;
}
#buddypress table.profile-fields td.label{
  width:34%;
  padding-right:24px;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
#buddypress table.profile-fields td.data{
  font:400 15px/1.6 var(--sans);
  color:var(--ink);
}
#buddypress table.profile-fields td.data a{ color:var(--teal); }
#buddypress .bp-widget h3.profile-group-title,
#buddypress .group-separator-block h1.bb-profile-title,
#buddypress h2.screen-heading{
  margin:28px 0 4px;
  font:600 22px/1.2 var(--serif);
  color:var(--ink);
}

/* --- 7.6 Activity -> editorial stream (no cards, no shadows) ------------- */
#buddypress #activity-stream ul.activity-list,
#buddypress ul.activity-list.bp-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
#buddypress ul.activity-list > li.activity-item{
  margin:0;
  padding:26px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  box-shadow:none;
  border-radius:0;
}
#buddypress ul.activity-list > li.activity-item .list-wrap,
#buddypress ul.activity-list > li.activity-item .activity-content{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
/* head */
#buddypress .activity-item .activity-avatar img,
#buddypress .activity-item .activity-avatar .avatar{
  width:44px;
  height:44px;
  border-radius:50%;
}
#buddypress .activity-item .activity-header,
#buddypress .activity-item .activity-header a{
  font:400 14px/1.55 var(--sans);
  color:var(--muted);
}
/* actor name -> ink (Cormorant for the name link only) */
#buddypress .activity-item .activity-header > a:first-child,
#buddypress .activity-item .activity-header strong a,
#buddypress .activity-item .activity-post-author a,
#buddypress .activity-item .activity-group-heading a{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
#buddypress .activity-item .activity-header > a:first-child:hover,
#buddypress .activity-item .activity-post-author a:hover,
#buddypress .activity-item .activity-group-heading a:hover{ color:var(--teal); }
#buddypress .activity-item .activity-date,
#buddypress .activity-item .activity-date a,
#buddypress .activity-item .time-since,
#buddypress .activity-item .activity-topic,
#buddypress .activity-item .activity-group-post-meta{
  font:400 12px/1.5 var(--sans);
  color:var(--muted);
}
#buddypress .activity-item .activity-topic a{ color:var(--muted); }
/* content */
#buddypress .activity-item .activity-title h2{
  margin:0 0 6px;
  font:600 22px/1.25 var(--serif);
  color:var(--ink);
}
#buddypress .activity-item .activity-inner{
  font:400 15px/1.65 var(--sans);
  color:var(--ink);
}
#buddypress .activity-item .activity-inner a{ color:var(--teal); }

/* state line (counts) — quiet */
#buddypress .activity-item .activity-state a,
#buddypress .activity-item .activity-state .comments-count{
  font:400 12px/1.4 var(--sans);
  color:var(--muted);
}

/* action bar: like / comment / share — borderless, muted; MAGENTA only on
   the active/reacted state. `.action.bp-generic-meta .button` already comes
   borderless from theme buddypress.min.css (background:0 0;border:0;
   color:var(--bb-primary-color) — NOT !important there, so colour overrides
   cleanly); we only restate colour + kill its transition:none note is moot. */
#buddypress .activity-item .activity-meta a.button,
#buddypress .activity-item .bp-generic-meta a.button,
#buddypress .activity-item a.acomment-reply,
#buddypress .activity-item a.bp-primary-action{
  background:none;
  border:0;
  box-shadow:none;
  color:var(--muted);
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.1em;
}
#buddypress .activity-item .activity-meta a.button:hover,
#buddypress .activity-item .bp-generic-meta a.button:hover,
#buddypress .activity-item a.acomment-reply:hover,
#buddypress .activity-item a.bp-primary-action:hover{ color:var(--ink); background:none; }
/* liked / reacted -> magenta */
#buddypress .activity-item a.fav.has-reaction,
#buddypress .activity-item a.unfav,
#buddypress .activity-item a.unfav .like-count,
#buddypress .activity-item a.fav.selected,
#buddypress .activity-item .like-count.reactions_item,
#buddypress .activity-item .activity-state.has-likes .count{
  color:var(--magenta);
}

/* "Load More" -> magenta text affordance (spec: magenta ONLY here + reactions) */
#buddypress li.load-more a,
#buddypress li.load-more a.button,
#buddypress .activity-list li.load-more a.button.outline{
  display:inline-block;
  width:100%;
  background:none;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:18px 0 0;
  color:var(--magenta);
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  text-align:center;
}
#buddypress li.load-more a:hover,
#buddypress li.load-more a.button:hover{ color:var(--ink); background:none; }

/* post-update form -> hairline box, no fill / shadow */
#buddypress #bp-nouveau-activity-form.activity-update-form,
#buddypress .activity-update-form,
#buddypress #whats-new-form{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  padding:16px;
}
#buddypress #whats-new,
#buddypress .activity-update-form .bb-editor-inner,
#buddypress #whats-new-textarea{
  background:none;
  border:0;
  box-shadow:none;
  font:400 15px/1.6 var(--sans);
  color:var(--ink);
}
#buddypress .whats-new-toolbar,
#buddypress #whats-new-attachments{ border-color:var(--line); }
#buddypress #whats-new-submit .button,
#buddypress #aw-whats-new-submit{
  background:var(--teal);
  border:0;
  border-radius:var(--radius);
  box-shadow:none;
  color:var(--paper);
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:11px 20px;
}
#buddypress #whats-new-submit .button:hover,
#buddypress #aw-whats-new-submit:hover{ background:var(--ink); color:var(--paper); }

/* --- 7.7 Shared: feedback notices + empty states -> hairline ------------ */
#buddypress .bp-feedback,
#buddypress .widget_bp_core_members_widget .bp-feedback{
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  color:var(--muted);
  font:400 14px/1.55 var(--sans);
}

/* --- 7.8 Responsive --- */
@media (max-width:800px){
  #buddypress #members-list.grid,
  #buddypress #groups-list.grid{ grid-template-columns:1fr; }
  #buddypress #cover-image-container #item-header-content h2.user-nicename,
  #buddypress #cover-image-container #item-header-content h2.bb-bp-group-title{ font-size:25px; }
  #buddypress #item-header-avatar img,
  #buddypress #item-header-avatar .avatar{ width:88px; height:88px; }
  #buddypress .component-navigation,
  #buddypress .bp-navs.bp-subnavs ul.subnav,
  #buddypress nav#object-nav.bp-navs ul{ gap:0 18px; }
  #buddypress table.profile-fields td{ display:block; padding:6px 0; }
  #buddypress table.profile-fields td.label{ width:auto; padding:12px 0 2px; }
  #buddypress table.profile-fields tr{ padding:6px 0; }
}


/* --- 7.9 Members map (Leaflet/OSM, injected via bp_before_directory_members_content) --- */
.loa-members-map{
  width:100%;
  height:380px;
  margin:0 0 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-warm);
}
.loa-members-map .leaflet-popup-content-wrapper{
  border-radius:var(--radius);
  box-shadow:none;
  border:1px solid var(--line);
}
.loa-map-popup{ font:400 13px/1.5 var(--sans); color:var(--ink); }
.loa-map-popup strong{ display:block; margin:0 0 6px; font:600 13px/1.3 var(--sans); }
.loa-map-popup ul{ list-style:none; margin:0; padding:0; max-height:160px; overflow-y:auto; }
.loa-map-popup li{ margin:0 0 4px; }
.loa-map-popup a{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  text-decoration:none;
}
.loa-map-popup a:hover{ color:var(--magenta); }
.loa-map-popup img{
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
@media (max-width:600px){
  .loa-members-map{ height:280px; }
}

/* --- 7.10 "Not a Cotisant yet" notice on the user's own profile header ---
   inc/profile-membership-banner.php prints, on bp_before_member_header_meta
   for a logged-in user viewing their own profile with no active Cotisant
   subscription:
     <div class="loa-membership-notice"><p>… <a href="…">ici</a>.</p></div>
   Fires inside both #item-header-content (classic) and #bb-rl-item-header-content
   (ReadyLaunch), so no header-variant scoping is needed. */
.loa-membership-notice{
  margin:10px 0 0;
  padding:14px 18px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font:400 14px/1.55 var(--sans);
  color:var(--ink);
}
.loa-membership-notice a{
  color:var(--magenta);
  font-weight:600;
  text-decoration:underline;
}
.loa-membership-notice a:hover{ color:var(--ink); }


/* ===== 8. EVENTS (Modern Events Calendar) ===== */
/* MEC 7.35.1, ReadyLaunch OFF (renders through the theme). Every rule below is
   scoped under .mec-wrap / .mec-single-event / .mec-event-list-modern or one of
   our own .loa-* hooks, so nothing here can touch a non-event page.
   NOT re-declared here (owned elsewhere, left intact):
     - §3  MEC booking buttons  .mec-book-form-next-button / -pay-button /
           -back-button / a.mec-booking-button-register  + MEC field baseline.
     - §5.9  our teaser output   .loa-events-teaser  (block on /evenements-a-venir/).
   Markup was read from authenticated curls (logged in as Cotisant test user 3,
   and as Inscrit test user 2 for the two-price row). Steps 2+ of the booking
   form load by AJAX and could not be curled — those blocks (8.8) are built from
   the MEC 7.35.1 templates and flagged inline. */

/* --- 8.1 List / archive skin (skin "list" => .mec-event-list-modern) --------
   /evenements/ renders: #mec_skin_mec1 .mec-skin-list-events-container
     .mec-wrap.colorskin-custom .mec-event-list-modern
       .mec-month-divider > h5              (section header)
       article.mec-event-article
         > .col-md-2 .mec-event-date  ( .event-d day | .event-f month | .event-da wday )
         > .col-md-6  h4.mec-event-title > a( .mec-color-hover ) + span.event-color
                      .mec-event-detail > .mec-event-loc-place
         > .col-md-4.mec-btn-wrapper  a.mec-booking-button ("Voir le détail")
   Neutralise MEC's heavy modern skin -> flat editorial rows, hairline rules. */
.mec-wrap .mec-event-list-modern .mec-month-divider{
  margin:46px 0 22px;
}
.mec-wrap .mec-event-list-modern .mec-month-divider:first-of-type{ margin-top:6px; }
.mec-wrap .mec-event-list-modern .mec-month-divider h5{
  flex:0 0 auto;
  margin:0 16px 0 0;
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.mec-wrap .mec-event-list-modern .mec-month-divider:before{ display:none; }   /* MEC: :before is a 4px #ebebeb flex bar */
.mec-wrap .mec-event-list-modern .mec-month-divider:after{
  height:1px;                                                                 /* MEC: height:4px */
  background:var(--line);                                                     /* MEC: background:#ebebeb */
}
.mec-wrap .mec-event-list-modern .mec-month-divider span{ display:none; }     /* non-toggle divider markup: kill the underlined pill + its teal :before */
.mec-wrap .mec-event-list-modern .mec-month-divider i{ display:none; }


.mec-event-image img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
}


/* Row = editorial grid  [ date | title+meta | link ]  matching the homepage
   teaser. MEC's modern skin absolutely-positions .col-md-2 (date) and
   .col-md-4.mec-btn-wrapper (button) and reserves min-height:160px on the row,
   with .col-md-6 padded 225px/195px to clear them — that's what caused the
   overlap + empty space. Kill all of it and lay the three MEC columns out as
   grid cells in document order (date, title, button). None of the MEC layout
   rules below are !important, so out-specifying + later source order wins. */
.mec-wrap .mec-event-list-modern article.mec-event-article{
  display:grid;
  grid-template-columns:minmax(110px,max-content) 1fr auto;  /* teaser is "110px 1fr auto"; min()->max-content so the full month name ("septembre") never clips */
  column-gap:32px;
  align-items:center;
  margin:0;
  padding:22px 0;
  min-height:0;                            /* MEC @media(min-width:768px): .mec-event-list-modern .mec-event-article{min-height:160px} */
  position:static;                         /* MEC @media(min-width:768px): …{position:relative} anchor for the absolute columns */
  overflow:visible;
  border:0;
  border-top:1px solid var(--line);        /* MEC: .mec-event-list-modern .mec-event-article{border-bottom:1px solid #efefef;padding:30px 0 10px} */
  background:none;
  box-shadow:none;
}
.mec-wrap .mec-event-list-modern article.mec-event-article:last-child{
  border-bottom:1px solid var(--line);
}
.mec-wrap .mec-event-list-modern article.mec-event-article::before,
.mec-wrap .mec-event-list-modern article.mec-event-article::after{
  content:none;                            /* MEC .mec-wrap .mec-clear:before/:after{content:" ";display:table} would add phantom grid items */
}
/* neutralise MEC's bootstrap columns — 2-attr child selector beats
   .mec-event-list-modern .col-md-4.col-sm-4.mec-btn-wrapper (0,0,4,0) */
.mec-wrap .mec-event-list-modern article.mec-event-article > div[class*="col-md-"][class*="col-sm-"]{
  position:static;                         /* MEC: .col-md-2{position:absolute;left:0;top:20px} / .col-md-4.mec-btn-wrapper{position:absolute;right:0;top:30%} */
  top:auto; left:auto; right:auto;
  float:none;
  width:auto;                              /* MEC: .col-md-2{width:210px} / .col-md-6{width:100%;padding-left:225px;padding-right:195px} */
  min-width:0;
  margin:0;
  padding:0;
}
.mec-wrap .mec-event-list-modern article.mec-event-article > .mec-btn-wrapper{ justify-self:end; }

/* date block: large Cormorant day + eyebrow-caps month, baseline-aligned */
.mec-wrap .mec-event-list-modern .mec-event-date{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:0;
  white-space:nowrap;
  text-transform:none;
}
.mec-wrap .mec-event-list-modern .mec-event-date .event-d{
  display:inline-block;                    /* MEC: display:table-cell;font-size:48px */
  padding:0;
  font:400 40px/1 var(--serif);
  color:var(--ink);
}
.mec-wrap .mec-event-list-modern .mec-event-date .event-f{
  display:inline-block;                    /* MEC: display:table-cell;vertical-align:middle;padding-left:7px;color:#777 */
  padding:0;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.mec-wrap .mec-event-list-modern .mec-event-date .event-da{ display:none; }   /* MEC: 28px "silver" weekday — drop for a clean date block */

/* title + meta */
.mec-wrap .mec-event-list-modern .mec-event-title{
  margin:0 0 4px;
  font:400 22px/1.25 var(--serif);         /* MEC: font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:1px */
  text-transform:none;
  letter-spacing:0;
}
.mec-wrap .mec-event-list-modern .mec-event-title a{ color:var(--ink); box-shadow:none; }
.mec-wrap.colorskin-custom .mec-event-list-modern .mec-event-title a:hover{ color:var(--teal); }  /* out-specifies MEC .mec-wrap.colorskin-custom h4 a:hover (0,0,3,2) */
.mec-wrap .mec-event-list-modern .mec-event-title .event-color{ display:none; }                   /* the inline-styled per-event colour dot */
.mec-wrap .mec-event-list-modern .mec-event-detail,
.mec-wrap .mec-event-list-modern .mec-event-loc-place{
  margin:0;
  font:400 14px/1.5 var(--sans);           /* MEC: color:#9a9a9a;font-size:15px;line-height:25px */
  color:var(--muted);
}
.mec-wrap .mec-event-list-modern .mec-event-sharing{ display:none; }

/* "Voir le détail" -> teal eyebrow-caps text link, no button chrome */
.mec-wrap .mec-event-list-modern .mec-btn-wrapper{ padding:0; }
.mec-wrap .mec-event-list-modern .mec-btn-wrapper .mec-booking-button{
  padding:0;                               /* MEC: padding:13px 20px */
  border:0;                                /* MEC: border:1px solid #e6e6e6 */
  border-radius:0;
  background:none;                         /* MEC: background-color:#fff */
  box-shadow:none;                         /* MEC: box-shadow:0 2px 0 0 rgba(0,0,0,…) */
  font:600 12px/1 var(--sans);             /* MEC: font-weight:700;font-size:10px;letter-spacing:2px */
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--teal) !important;            /* beats MEC frontend.css .mec-event-list-modern .mec-btn-wrapper .mec-booking-button{color:#333!important} */
}
.mec-wrap .mec-event-list-modern .mec-btn-wrapper .mec-booking-button:hover{
  border:0;
  background:none;                          /* MEC hover: border-color:#222;background:#222 (not !important) */
  color:var(--ink) !important;             /* beats MEC frontend.css .mec-event-list-modern .mec-btn-wrapper .mec-booking-button:hover{color:#fff!important} */
}
.mec-wrap .mec-event-list-modern .mec-load-more-button{
  border:1px solid var(--line);
  background:none;
  color:var(--ink);
  box-shadow:none;
}
.mec-wrap .mec-skin-list-no-events-container{ color:var(--muted); font-style:italic; }

/* --- 8.2 Month / calendar skin (recolour only) ---------------------------
   FLAG: no month view is rendered on the site today (/evenements/ is the LIST
   skin). These use MEC's documented month-grid classes and are intentionally
   specificity-light — a month view added later gets a neutral first pass and
   may need a tighter selector then. No !important (avoids fighting skin rules
   that are not currently on the page). */
.mec-wrap .mec-calendar dl dt,
.mec-wrap .mec-calendar .mec-calendar-row .mec-calendar-day{
  border-color:var(--line);
  background-color:var(--paper);
}
.mec-wrap .mec-calendar dl dt.mec-table-nullday{ background-color:var(--paper-warm); }
.mec-wrap .mec-calendar .mec-event-article .mec-event-title,
.mec-wrap .mec-calendar .mec-calendar-events-sec .mec-event-title{ color:var(--ink); }
.mec-wrap .mec-calendar .mec-has-event:after{ background-color:var(--teal); }
.mec-wrap .mec-calendar dt.mec-selected-day,
.mec-wrap .mec-calendar dt.mec-today{
  background:var(--paper);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--teal);   /* today = teal ring, not a fill */
}

/* --- 8.3 Single event: header band + two-column re-flow ----------------
   Verified DOM (authed curl, event 54):
     article.row.mec-single-event
     ├─ div.col-md-8
     │   ├─ div.mec-events-event-image > img
     │   ├─ div.mec-event-content
     │   │    ├─ h1.mec-single-title
     │   │    └─ div.mec-single-event-description   (nested <article> prose)
     │   ├─ div.mec-event-info-mobile              (empty)
     │   ├─ div.mec-event-export-module.mec-frontbox
     │   ├─ div.mec-events-meta-group-booking      (the booking form)
     │   └─ div.mec-events-meta-group-tags         (empty)
     └─ div.col-md-4
         ├─ div.mec-event-info-desktop.mec-event-meta.mec-frontbox
         │    └─ .mec-single-event-date / -time / -location / -category + a.mec-booking-button-register
         ├─ div.mec-event-social.mec-frontbox
         ├─ div.mec-events-meta-group-gmap         (empty)
         └─ div.mec-qrcode-details.mec-frontbox

   The blocks the mockup wants in one visual column come from BOTH .col-md-8
   and .col-md-4, and .mec-single-event has only those two direct children, so a
   grid on the <article> alone can't place them. Fix: display:contents on
   .col-md-8, .col-md-4 AND .mec-event-content lifts their children up to be grid
   items of .mec-single-event; then place them:
       row 1   h1.mec-single-title                     full width  (header band)
       row 2   .mec-event-meta            | .mec-events-event-image
       row 3   .mec-single-event-description | .mec-events-meta-group-booking
   Ancillary MEC modules (export / social / QR / gmap / tags / mobile-info) are
   hidden on the single event to match the editorial mockup.
   KNOWN CSS-ONLY LIMITATIONS (need a MEC PHP template change, out of scope here):
   (a) grid rows are shared by both columns, so when the 4:3 image is taller than
       the short definition list, ~80-110px of blank sits under the list before
       the "À propos" rule; (b) the mockup's muted "date · time · city" line under
       the title can't be composed — MEC emits date/time/location only as the
       separate blocks now shown in the left-column list; (c) the "Évènement"
       eyebrow and the "À propos" heading are injected with ::before generated
       content (no MEC element exists for them). */
.mec-single-event{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  column-gap:64px;
  align-items:start;
  align-content:start;
  margin:6px 0 0;
}
.mec-single-event > .col-md-8,
.mec-single-event > .col-md-4,
.mec-single-event .mec-event-content{ display:contents; }

/* MEC modules not in the mockup */
.mec-single-event .mec-event-info-mobile,
.mec-single-event .mec-event-export-module,
.mec-single-event .mec-events-meta-group-tags,
.mec-single-event .mec-event-social,
.mec-single-event .mec-events-meta-group-gmap,
.mec-single-event .mec-qrcode-details{ display:none; }

/* header band */
.mec-single-event .mec-single-title{
  grid-column:1 / -1;
  grid-row:1;
  margin:0 0 40px;
  padding:0 0 32px;
  border-bottom:1px solid var(--line);
  font:600 clamp(34px,4.4vw,52px)/1.1 var(--serif);
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}
.mec-single-event .mec-single-title::before{
  content:"Évènement";
  display:block;
  margin-bottom:16px;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}

/* column assignment */
.mec-single-event .mec-event-meta{ grid-column:1; grid-row:2; }
.mec-single-event .mec-single-event-description{ grid-column:1; grid-row:3; }
.mec-single-event .mec-events-event-image{
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin:0 0 22px;
}
.mec-single-event .mec-events-event-image:empty{ display:none; }        /* no featured image -> right column is just the booking card, no gap */
.mec-single-event .mec-events-event-image img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:0;
}
.mec-single-event .mec-events-meta-group-booking{
  grid-column:2;
  grid-row:3;
  align-self:start;
  position:sticky;
  top:100px;
}

/* description prose + injected "À propos" heading/rule */
.mec-single-event .mec-single-event-description{
  max-width:60ch;
  font:400 16px/1.7 var(--sans);
  color:#2b2926;
}
.mec-single-event .mec-single-event-description::before{
  content:"À propos";
  display:block;
  margin:0 0 14px;
  padding:28px 0 0;
  border-top:1px solid var(--line);
  font:600 1.7rem/1.15 var(--serif);
  color:var(--ink);
}
.mec-single-event .mec-single-event-description > article,
.mec-single-event .mec-single-event-description .inner-wrap,
.mec-single-event .mec-single-event-description .post-content,
.mec-single-event .mec-single-event-description .content-inner{
  margin:0;
  padding:0;
  animation:none;                          /* BuddyBoss .inner-wrap.animated entrance */
}
.mec-single-event .mec-single-event-description p{ margin:0 0 14px; }
.mec-single-event .mec-single-event-description ul{ margin:0 0 14px; padding-left:1.2em; }

/* --- 8.4 Single event: the LEFT-column definition list ----------------
   .mec-event-meta > .mec-single-event-date / -time / -location / -category,
   each = <i> + label ( .mec-events-single-section-title OR bare .mec-date /
   .mec-time / .mec-location / .mec-category ) + <dl><dd>. */
.mec-single-event .mec-event-info-desktop.mec-event-meta{
  padding:0;                               /* MEC: .mec-single-event .mec-frontbox{padding:40px;border:1px solid #e6e7e8} — strip the card here (0,0,3,0 beats 0,0,2,0) */
  border:0;
  background:none;
  box-shadow:none;
  margin:0;
}
.mec-single-event .mec-event-meta .mec-single-event-date,
.mec-single-event .mec-event-meta .mec-single-event-time,
.mec-single-event .mec-event-meta .mec-single-event-location,
.mec-single-event .mec-event-meta .mec-single-event-category{
  margin:0 0 18px;
  padding:0;
  border:0;
}
.mec-single-event .mec-event-meta i{ display:none; }                    /* coloured icon bullets */
.mec-single-event .mec-event-meta .mec-events-single-section-title,
.mec-single-event .mec-event-meta .mec-date,
.mec-single-event .mec-event-meta .mec-time,
.mec-single-event .mec-event-meta .mec-location,
.mec-single-event .mec-event-meta .mec-category{
  display:block;
  margin:0 0 2px;
  padding:0;
  border:0;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.mec-single-event .mec-event-meta dl{ margin:0; }
.mec-single-event .mec-event-meta dd{
  margin:0;
  font:400 16px/1.5 var(--sans);
  color:var(--ink);
}
.mec-single-event .mec-event-meta .mec-events-event-categories a{ color:var(--ink); }
.mec-single-event .mec-event-meta .mec-events-event-categories a:hover{ color:var(--teal); }
.mec-single-event .mec-event-meta a.mec-booking-button-register{ display:none; }  /* mockup has no scroll-to button; the form is in the right column */

/* --- 8.5 Booking form: bordered card + step-1 ticket list ------------
   .mec-events-meta-group-booking > .mec-booking > form#mec_book_form* >
     h4 ("Réserver l'événement")  -> restyled as the "RÉSERVATION" eyebrow
     + .mec-event-tickets-list > .mec-event-ticket rows
     + .mec-book-form-btn-wrap > button.mec-book-form-next-button ("Suivant")
   Attendee fields / totals arrive in a later AJAX step (styled in 8.8).
   Submit stays §3's flat teal (per the approved spec — NOT the mockup's
   gradient .btn--adherer), just forced full-width. */
.mec-single-event .mec-events-meta-group-booking{
  padding:0;                               /* MEC: .mec-single-event .mec-events-meta-group-booking{padding:40px} */
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}
.mec-single-event .mec-events-meta-group-booking .mec-booking{ margin:0; padding:0; }
.mec-single-event .mec-events-meta-group-booking form{ margin:0; }
.mec-single-event .mec-events-meta-group-booking form > h4{
  margin:0;
  padding:22px 22px 4px;
  font:600 12px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.mec-single-event .mec-event-tickets-list{ margin:0; }
.mec-single-event .mec-event-ticket{
  padding:0;
  border:0;
  border-top:1px solid var(--line);
  background:none;
}
.mec-single-event .mec-event-ticket:first-child{ border-top:0; }
.mec-single-event .mec-ticket-style-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  padding:20px 22px;
}
.mec-single-event .mec-ticket-style-row-section-1{ display:none; }      /* MEC ticket icon */
.mec-single-event .mec-ticket-style-row-section-2{ flex:1 1 100%; min-width:0; }
.mec-single-event .mec-ticket-name-description-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.mec-single-event .mec-ticket-style-row-section-3{ flex:1 1 100%; }      /* stepper drops onto its own line under name+price */
.mec-single-event .mec-event-ticket-name{
  font:600 1.35rem/1.25 var(--serif);
  color:var(--ink);
}
.mec-single-event .mec-event-ticket-price{
  margin:0;
  font:600 1.35rem/1.25 var(--serif);
  color:var(--ink);
  text-align:right;
  white-space:nowrap;
}
.mec-single-event .mec-event-ticket-description{
  margin:6px 0 0;
  font:400 13px/1.5 var(--sans);
  color:var(--muted);
  padding: 0 22px 20px;
}
.mec-single-event .mec-event-ticket-available{
  margin:8px 0 0;
  font:400 12px/1.4 var(--sans);
  color:var(--muted);
}
.mec-single-event .mec-book-form-btn-wrap{
  margin:0;
  padding:20px 22px;
  border-top:1px solid var(--line);
}
.mec-single-event .mec-book-form-btn-wrap .mec-book-form-next-button{ width:100%; }

/* --- 8.6 Quantity stepper: round teal pills, order  + n - --------------- */
.mec-single-event .mec-event-ticket-input-wrapper{
  margin-top:14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0px;
}
.mec-single-event .mec-event-ticket-input-wrapper a.minus,
.mec-single-event .mec-event-ticket-input-wrapper a.plus{
  width:30px;
  height:30px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid var(--teal);
 
  background:var(--teal);
  transition:background .15s ease, border-color .15s ease;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}
.mec-single-event .mec-event-ticket-input-wrapper a.plus{ 
  order:3;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  position: relative;
 }
 .mec-single-event .mec-event-ticket-input-wrapper a.plus::after,
 .mec-single-event .mec-event-ticket-input-wrapper a.minus::after{
  content: '+';
  color: #fff;   
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,calc( -50% + -1px));
 }

.mec-single-event .mec-event-ticket-input-wrapper a.minus{ 
  position: relative;
  order:1; 
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.mec-single-event .mec-event-ticket-input-wrapper a.minus::after{
  content: '-';
}  
.mec-single-event .mec-event-ticket-input-wrapper a.minus:hover,
.mec-single-event .mec-event-ticket-input-wrapper a.plus:hover{
  background:var(--ink);
  border-color:var(--ink);
}
.mec-single-event .mec-event-ticket-input-wrapper a.minus img,
.mec-single-event .mec-event-ticket-input-wrapper a.plus img{
  display: none;
  width:11px;
  height:11px;
  _filter:brightness(0) invert(1);
}
.mec-single-event .mec-event-tickets-list .mec-ticket-style-row input.mec-book-ticket-limit{
  order:2;
  min-width:40px;
  width:40px !important;                    /* beats MEC frontend.css .mec-booking .mec-event-tickets-list .mec-ticket-style-row input[type="number"]{width:80px!important} */
  min-height:30px;
  height:30px;
  margin:0;
  padding:0;
  text-align:center;
  font-weight:600;
  border:none;
  background:transparent;
  border-radius:0;
}

/* --- 8.7 Two-price adhérent row for a non-Cotisant --------------------
   inc/events-tickets.php (wp_footer JS) adds .loa-members-only to the
   "Tarif adhérent" .mec-event-ticket row (qty input zeroed + disabled) and
   appends  <p class="loa-ticket-members-only"> … <a>Adhérer</a></p>  inside
   .mec-ticket-style-row. That plugin's own footer <style> already hides the
   row's .mec-event-ticket-input-wrapper + .mec-event-ticket-available. Seen in
   the authenticated Inscrit curl: the selectors live in that footer style/script
   (added client-side).  NOTE: this MEC build did NOT emit a <del> inside
   .mec-event-ticket-price (the ticket template recomputes the price from the
   numeric value, ignoring our price_label), so the row is muted + struck
   directly here; a <del>, if present, is covered too. */
.mec-single-event .mec-event-ticket.loa-members-only .mec-ticket-style-row{ flex-wrap:wrap; }
.mec-single-event .mec-event-ticket.loa-members-only .mec-event-ticket-name{
  font-weight:400;
  color:var(--muted);
}
.mec-single-event .mec-event-ticket.loa-members-only .mec-event-ticket-price,
.mec-single-event .mec-event-ticket.loa-members-only .mec-event-ticket-price del{
  color:var(--muted);
  text-decoration:line-through;
}
.mec-single-event .mec-event-ticket .loa-ticket-members-only{
  flex:0 0 100%;
  margin:2px 0 6px;
  padding:0;
  font-family:var(--sans);
  color:var(--magenta);
}
.mec-single-event .mec-event-ticket .loa-ticket-members-only a{
  color:var(--magenta);
  font-weight:600;
  text-decoration:underline;
}
.mec-single-event .mec-event-ticket .loa-ticket-members-only a:hover{ color:var(--ink); }

/* --- 8.8 Booking form: attendee step + totals -------------------------
   FLAG: booking steps 2+ load by AJAX and were not in any curl. Classes are
   from MEC 7.35.1 (app/core/src/BookingForm/Attendees.php,
   app/modules/booking/steps/checkout.php):
     progress bar  .mec-booking-progress-bar > li(.mec-active)
     attendee blk  .mec-book-ticket-container > .mec-ticket-detail .mec-ticket-name
     fields        .mec-book-tickets-reg-fields-container > .mec-form-row.mec-field-<type> > <label>
     totals        .mec-book-price-details > li.mec-book-price-detail
                     ( .mec-book-price-detail-description | -amount )
                   .mec-book-price-total ( -description | -amount ) */
.mec-single-event .mec-booking-progress-bar{
  margin:0;
  padding:20px 22px 14px;
  border:0;
  border-bottom:1px solid var(--line);
}
.mec-single-event .mec-booking-progress-bar li{
  margin:0 !important;                      /* beats MEC frontend.css .mec-wrap .mec-booking-progress-bar li{margin:30px 0 10px!important} */
  font:600 10px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.mec-single-event .mec-booking-progress-bar li.mec-active{ color:var(--teal); }
/* attendee step: each section is a 22px-padded band with a hairline */
.mec-single-event .mec-ticket-subtotal-wrapper{
  padding:16px 22px;
  border-bottom:1px solid var(--line);
}
.mec-single-event .mec-book-bfixed-fields-container,
.mec-single-event .mec-book-username-password-wrapper,
.mec-single-event .mec-first-for-all-wrapper{
  margin:0;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
}
.mec-single-event .mec-book-ticket-container{
  margin:0;
  padding:20px 22px;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
}
.mec-single-event .mec-ticket-detail .mec-ticket-name{
  font:600 1.2rem/1.25 var(--serif);
  color:var(--ink);
}
.mec-single-event .mec-ticket-attendee-counter{
  display:block;
  margin:0 0 8px;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.mec-single-event .mec-ticket-price-label{
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
/* attendee fields: always stacked (the card is only ~400px wide) */
.mec-single-event .mec-book-tickets-reg-fields-container{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.mec-single-event .mec-book-tickets-reg-fields-container > li,
.mec-single-event .mec-book-tickets-reg-fields-container .mec-form-row{ margin:0; }
.mec-single-event .mec-book-tickets-reg-fields-container label,
.mec-single-event .mec-book-bfixed-fields-container label{
  display:block;
  margin:0 0 6px;
  font:600 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
/* totals band */
.mec-single-event .mec-book-form-price,
.mec-single-event .mec-wrap-checkout{ margin:0; padding:20px 22px; }
.mec-single-event .mec-book-price-details{
  margin:0;
  padding:0;
  list-style:none;
}
.mec-single-event .mec-events-meta-group-booking .mec-book-price-details li.mec-book-price-detail{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:0 !important;                      /* beats MEC frontend.css .mec-events-meta-group-booking .mec-book-price-details li{margin-right:20px!important} */
  padding:8px 0 !important;                 /* beats MEC frontend.css .mec-events-meta-group-booking .mec-book-price-details li{padding-right:20px!important} */
  border:0;                                 /* MEC: border-right:1px dashed #e6e7e8 (not !important) */
  text-align:left;
  font:400 14px/1.5 var(--sans);
  color:var(--muted);
}
.mec-single-event .mec-book-price-total{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:6px;
  padding:14px 0 0;
  border-top:1px solid var(--line);
  font:400 18px/1.3 var(--serif);
  color:var(--ink);
}
.mec-single-event .mec-book-form-price{ margin:8px 0 20px; }

/* --- 8.9 "Réservé adhérents" lock notice -----------------------------
   inc/events.php prints, on mec_before_booking_form for a non-Cotisant opening
   a members-only event (booking module itself suppressed):
     <div class="loa-event-locked"><p> … <a href="/pourquoi-nous-rejoindre/">Adhérer</a></p></div>
   Not in the curl (test users are Cotisant / not gated) — class from source. */
.mec-single-event .loa-event-locked,
.loa-event-locked{
  margin:0 0 24px;
  padding:24px 28px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.loa-event-locked p{
  margin:0;
  font:400 16px/1.6 var(--sans);
  color:var(--ink);
}
.loa-event-locked a{
  color:var(--magenta);
  font-weight:600;
  text-decoration:underline;
}
.loa-event-locked a:hover{ color:var(--ink); }

/* --- 8.10 Responsive --- */
/* single event: stack the two columns (details first, then booking); the image
   goes full-width under the title. .col-md-8 / .col-md-4 / .mec-event-content are
   display:contents (set in 8.3), so the flattened blocks are flex items here and
   `order` sequences them. */
@media (max-width:900px){
  .mec-single-event{
    display:flex;
    flex-direction:column;
  }
  .mec-single-event .mec-single-title{ order:1; margin:0 0 28px; padding:0 0 24px; }
  .mec-single-event .mec-events-event-image{ order:2; margin:0 0 30px; }
  .mec-single-event .mec-event-meta{ order:3; margin:0 0 30px; }
  .mec-single-event .mec-single-event-description{ order:4; max-width:none; }
  .mec-single-event .mec-events-meta-group-booking{
    order:5;
    margin:34px 0 0;
    position:static;                       /* drop the desktop sticky */
  }
}
@media (max-width:719px){
  .mec-wrap .mec-event-list-modern article.mec-event-article{
    grid-template-columns:1fr auto;
    column-gap:20px;
    row-gap:4px;
    padding:18px 0;
  }
  .mec-wrap .mec-event-list-modern article.mec-event-article > .col-md-2{ grid-column:1 / -1; }
  .mec-single-event .mec-single-title{ font-size:32px; }
}

/* --- 9.1 .center-screen — centers a block's content (e.g. the MEC booking
   "thank you" page) both horizontally and vertically in the space below the
   header. ------------------------------------------------------------- */
.center-screen{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-block:clamp(2rem,6vw,4rem);
}
.center-screen .wp-block-paragraph{
  font:600 1.5rem/1.4 var(--serif);
  color:var(--ink);
  margin:0;
}