/* Common interface primitives. Values live in design-tokens.css.
 * The two approved Pro layouts do not carry brand-site and retain their design.
 * Page modules keep layout, state, accessibility and density responsibilities.
 */
body.brand-site {
    --paper: var(--mpb-color-fond);
    --surface: var(--mpb-color-fond);
    --ink: var(--mpb-color-encre);
    --text: var(--mpb-color-texte);
    --muted: var(--mpb-color-texte-discret);
    --line: var(--mpb-color-trait);
    --berry: var(--mpb-color-bordeaux);
    --clay: var(--mpb-color-bordeaux);
    --teal: var(--mpb-color-bordeaux);
    --mint: var(--mpb-color-sauge);
    --ivory-2: var(--mpb-color-fond-poudre);
    --champagne: var(--mpb-color-peche);
    --gold: var(--mpb-color-bordeaux);
    --mpb-beige-clair: var(--mpb-color-fond-poudre);
    --mpb-beige-medium: var(--mpb-color-trait);
    --mpb-beige-dore: var(--mpb-color-peche);
    --mpb-brun-doux: var(--mpb-color-texte-discret);
    --mpb-brun: var(--mpb-color-texte);
    --mpb-brun-fonce: var(--mpb-color-encre);
    --mpb-blanc: var(--mpb-color-fond);
    --mpb-gris: var(--mpb-color-texte);
    --mpb-corail: var(--mpb-color-bordeaux);
    --mpb-corail-fonce: var(--mpb-color-bordeaux);
    --shadow: none;
    --shadow-sm: none;
    --page-gutter: var(--mpb-gutter);
    --content-width: 100%;
    background: var(--mpb-color-fond);
    color: var(--mpb-color-texte);
    font-family: var(--font-body);
    font-size: var(--mpb-font-size-body);
    font-weight: var(--mpb-font-weight-body);
    line-height: var(--mpb-font-line-body);
}

body.brand-site :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, legend, summary, dt, dd, td, th, figcaption) {
    font-family: var(--font-body);
}

/* These effects are prohibited, including legacy effects in pseudo-elements. */
body.brand-site *, body.brand-site *::before, body.brand-site *::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

body.brand-site :is(h1, h2) {
    color: var(--mpb-color-encre);
    font-style: normal;
    font-weight: var(--mpb-font-weight-title);
    letter-spacing: normal;
    overflow-wrap: break-word;
}
body.brand-site h1 { font-size: var(--mpb-font-size-hero); line-height: var(--mpb-font-line-hero); }
body.brand-site h2 { font-size: var(--mpb-font-size-section); line-height: var(--mpb-font-line-section); }
body.brand-site :is(h3, h4, h5, h6) { color: var(--mpb-color-encre); font-size: var(--mpb-font-size-block); font-weight: 600; letter-spacing: normal; line-height: var(--mpb-font-line-block); }
body.brand-site p { color: var(--mpb-color-texte); font-size: var(--mpb-font-size-body); font-weight: 300; line-height: var(--mpb-font-line-body); }
body.brand-site :is(strong, b) { font-weight: 600; }
body.brand-site small { color: var(--mpb-color-texte-discret); font-size: var(--mpb-font-size-caption); font-weight: 300; line-height: var(--mpb-font-line-caption); }
body.brand-site :is(.lead, .page-lead, .mpb-lead) { color: var(--mpb-color-texte); font-size: var(--mpb-font-size-lead); font-weight: 300; line-height: var(--mpb-font-line-lead); }
body.brand-site :is(.eyebrow, .mpb-eyebrow) { color: var(--mpb-color-bordeaux); font-size: var(--mpb-font-size-label); font-weight: 600; letter-spacing: var(--mpb-font-tracking-label); line-height: var(--mpb-font-line-label); text-transform: uppercase; }
body.brand-site :is(.card, .panel, .sidebar, .mpb-card) h2 { font-size: var(--mpb-font-size-block); font-weight: 600; line-height: var(--mpb-font-line-block); }
body.brand-site :is(.container, .mpb-container) { box-sizing: border-box; margin-inline: auto; max-width: var(--mpb-content-max); padding-inline: var(--mpb-gutter); width: 100%; }
body.brand-site .mpb-section { background: var(--mpb-color-fond); padding-block: var(--mpb-section-space); }
body.brand-site .mpb-section-powder { background: var(--mpb-color-fond-poudre); }

body.brand-site :is(.button, .button-accent, .mpb-button, .wp-element-button, .wp-block-button__link, button[type="submit"], input[type="submit"]) {
    align-items: center;
    background: var(--mpb-color-bordeaux);
    background-image: none;
    border: 1px solid var(--mpb-color-bordeaux);
    border-radius: var(--mpb-radius-pilule);
    color: var(--mpb-color-sur-bordeaux);
    display: inline-flex;
    font-family: var(--font-body);
    font-size: var(--mpb-font-size-button);
    font-weight: 600;
    gap: var(--mpb-space-3);
    justify-content: center;
    letter-spacing: var(--mpb-font-tracking-button);
    line-height: var(--mpb-font-line-button);
    max-width: 100%;
    min-height: 48px;
    min-width: 0;
    padding: 15px 24px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
}
body.brand-site :is(.button, .mpb-button, .wp-element-button, .wp-block-button__link) > span { min-width: 0; }
body.brand-site :is(.button-secondary, .mpb-button-secondary, .is-style-outline .wp-block-button__link) { background: var(--mpb-color-gris-bouton); border-color: var(--mpb-color-gris-bouton); color: var(--mpb-color-encre); }
body.brand-site :is(.button, .button-accent, .mpb-button, .wp-element-button, .wp-block-button__link, button[type="submit"]):hover { filter: none; transform: none; }
body.brand-site :is(.button, button, input, select, textarea, summary, a):focus-visible { outline: 2px solid var(--mpb-color-bordeaux); outline-offset: 4px; }
body.brand-site :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .55; }
body.brand-site :is(input, select, textarea) { accent-color: var(--mpb-color-bordeaux); font-family: var(--font-body); }
body.brand-site :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="file"]), select, textarea) {
    background: var(--mpb-color-fond);
    border-color: var(--mpb-color-trait);
    color: var(--mpb-color-encre);
    font-size: var(--mpb-font-size-body);
    font-weight: 300;
    line-height: var(--mpb-font-line-body);
    max-width: 100%;
    min-width: 0;
}
body.brand-site :is(input, textarea)::placeholder { color: var(--mpb-color-texte-discret); opacity: 1; }
body.brand-site :is(.field > label, legend) { color: var(--mpb-color-encre); font-size: var(--mpb-font-size-small); font-weight: 600; letter-spacing: normal; line-height: var(--mpb-font-line-small); text-transform: none; }
body.brand-site :is(.field-helper, .field-help, .help-text, .form-help) { color: var(--mpb-color-texte-discret); font-size: var(--mpb-font-size-caption); font-weight: 300; line-height: var(--mpb-font-line-caption); }
body.brand-site :is(.form-errors, .field-error, .flash-error, .flash-danger, .form-error-message) { color: var(--mpb-color-bordeaux); }
body.brand-site :is(.flash, .alert, .notice) { background: var(--mpb-color-fond-poudre); border-color: var(--mpb-color-trait); color: var(--mpb-color-encre); }
body.brand-site :is(.flash-success, .alert-success) { background: var(--mpb-color-sauge); }
body.brand-site :is(.flash-error, .flash-danger, .alert-danger) { background: var(--mpb-color-rose); }
body.brand-site dialog { background: var(--mpb-color-fond); border: 1px solid var(--mpb-color-trait); color: var(--mpb-color-texte); }
body.brand-site dialog::backdrop { background: rgb(71 71 70 / 45%); }

body.brand-site .mpb-word { color: var(--mpb-color-bordeaux); font-family: var(--font-handwritten); font-size: var(--mpb-font-size-handwritten); font-style: normal; font-weight: 400; line-height: 1; }
body.brand-site .mpb-highlight { background: none; box-decoration-break: clone; isolation: isolate; padding-inline: .08em; position: relative; -webkit-box-decoration-break: clone; }
body.brand-site .mpb-highlight::before { background: var(--mpb-color-rose); bottom: .03em; content: ''; height: .48em; inset-inline: 0; position: absolute; z-index: -1; }
body.brand-site .mpb-icon-disc { align-items: center; background: var(--mpb-color-rose); border-radius: 50%; color: var(--mpb-color-bordeaux); display: inline-flex; flex: 0 0 56px; height: 56px; justify-content: center; width: 56px; }
body.brand-site .mpb-icon-disc svg { fill: none; height: 28px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 28px; }

/* Shared navigation and audience footers retain their existing controls. */
body.brand-site .site-header { background: var(--mpb-color-fond); border-color: var(--mpb-color-trait); gap: 24px; min-height: 84px; padding-block: 8px; }
body.brand-site .site-header .brand-logo-lockup { background: transparent; background-image: none; border: 0; border-radius: 0; flex: 0 1 160px; height: 68px; min-height: 0; padding: 0; width: 160px; }
body.brand-site .site-header .brand-logo-lockup img { filter: none; height: auto; max-height: 68px; object-fit: contain; width: 160px; }
body.brand-site .site-header .brand-logo-lockup::after { display: none; }
body.brand-site :is(.main-nav, .mobile-nav-panel, .pro-access-panel) { background: var(--mpb-color-fond); border-color: var(--mpb-color-trait); }
body.brand-site .site-header :is(.main-nav a, .mobile-nav-links a) { background: transparent; border-color: transparent; color: var(--mpb-color-encre); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .07em; }
body.brand-site .site-header :is(.main-nav a.is-active, .main-nav a:hover, .mobile-nav-links a.is-active) { background: transparent; border-color: var(--mpb-color-bordeaux); color: var(--mpb-color-bordeaux); }
body.brand-site .site-header :is(.pro-public-site-link, .pro-public-site-link:hover) { background: var(--mpb-color-fond); border-color: var(--mpb-color-trait); border-radius: 999px; color: var(--mpb-color-encre); }
body.brand-site .site-header :is(.pro-public-site-link-arrow, .mobile-nav-toggle, .mobile-nav-toggle:hover, .mobile-pro-login) { background: var(--mpb-color-gris-bouton); border-color: var(--mpb-color-trait); color: var(--mpb-color-encre); }
body.brand-site .site-header :is(.mobile-pro-access, .pro-access-trigger) { border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 600; }
body.brand-site .site-header :is(.mobile-pro-register, .pro-access-trigger) { background: var(--mpb-color-bordeaux); color: var(--mpb-color-sur-bordeaux); }
body.brand-site .site-header .pro-access-trigger small { color: var(--mpb-color-sur-bordeaux); font-weight: 300; }
body.brand-site .site-header :is(.pro-access-option, .pro-access-option:hover, .pro-access-option:focus-visible) { background: var(--mpb-color-fond); color: var(--mpb-color-encre); }
body.brand-site .site-header :is(.pro-public-site-link-copy small, .pro-access-option-copy small) { color: var(--mpb-color-texte-discret); font-weight: 300; }
body.brand-site .site-header .pro-public-site-link:focus-visible { outline: 2px solid var(--mpb-color-bordeaux); outline-offset: 4px; }
body.brand-site .site-header .pro-access-option:hover { background: var(--mpb-color-fond-poudre); }

body.brand-site .audience-footer {
    --footer-muted: var(--mpb-color-texte);
    --footer-line: var(--mpb-color-trait);
    --footer-accent: var(--mpb-color-bordeaux);
    background: var(--mpb-color-fond-poudre);
    border-color: var(--mpb-color-trait);
    color: var(--mpb-color-texte);
    margin-top: 0;
}
body.brand-site .audience-footer :is(h2, .footer-audience-switch h2) { color: var(--mpb-color-encre); font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.3; }
body.brand-site .audience-footer :is(p, .pro-footer-link-list a, .public-footer-link-list a, .pro-footer-bottom, .public-footer-bottom) { color: var(--mpb-color-texte); font-family: var(--font-body); font-size: 15px; font-weight: 300; }
body.brand-site .audience-footer :is(.footer-text-link, .pro-footer-link-list a:hover, .public-footer-link-list a:hover, .footer-text-link:hover, .public-footer-area-links a) { border-color: var(--mpb-color-trait); color: var(--mpb-color-bordeaux); text-decoration-color: currentColor; }
body.brand-site .audience-footer .footer-audience-label { color: var(--mpb-color-bordeaux); font-size: 13px; font-weight: 600; letter-spacing: .16em; line-height: 16px; }
body.brand-site .audience-footer .footer-audience-switch { background: var(--mpb-color-fond); border-color: var(--mpb-color-trait); }
body.brand-site .photographer-ranking-notice { color: var(--mpb-color-texte); font-size: var(--mpb-font-size-caption, 13px); font-weight: 300; line-height: 1.6; margin: 0 0 var(--mpb-space-3, 14px); }
body.brand-site .photographer-ranking-notice a { color: var(--mpb-color-bordeaux); text-decoration: underline; text-underline-offset: 3px; }

body.brand-site .audience-footer .brand-logo-lockup { background: var(--mpb-color-fond); background-image: none; }
body.brand-site .audience-footer .brand-logo-lockup img { filter: none; }
body.brand-site .audience-footer :is(.button-accent, .button-accent:hover) { background: var(--mpb-color-bordeaux); border-color: var(--mpb-color-bordeaux); border-radius: 999px; color: var(--mpb-color-sur-bordeaux); font-weight: 600; }
body.brand-site .audience-footer :is(.button-secondary, .button-secondary:hover) { background: var(--mpb-color-gris-bouton); border-color: var(--mpb-color-gris-bouton); border-radius: 999px; color: var(--mpb-color-encre); font-weight: 600; }
body.brand-site .audience-footer :is(.public-footer-city-grid a, .public-footer-profile, .public-footer-city-grid a:hover, .public-footer-profile:hover) { background: var(--mpb-color-fond); border-color: var(--mpb-color-trait); color: var(--mpb-color-encre); }
body.brand-site .audience-footer :is(.public-footer-city-grid strong, .public-footer-profile strong) { color: var(--mpb-color-encre); font-size: 15px; font-weight: 600; }
body.brand-site .audience-footer :is(.public-footer-profile-rating, .public-footer-profile-meta, .public-footer-city-grid span, .public-footer-profile small) { color: var(--mpb-color-texte); font-size: 13px; font-weight: 300; }
body.brand-site .audience-footer :is(.public-footer-profile-arrow, .public-footer-profile-rating.is-new) { background: var(--mpb-color-fond-poudre); color: var(--mpb-color-bordeaux); }
body.brand-site .audience-footer .footer-audience-switch .button > span { color: inherit; }
body.brand-site:has(:is(.pro-library-page, .pro-login-page, .pro-password-page)) .audience-footer { background: var(--mpb-color-fond); }

@media (max-width: 767px) {
    body.brand-site h1 { font-size: clamp(32px, 7.5vw, 44px); }
    body.brand-site h2 { font-size: 28px; }
    body.brand-site .site-header { gap: 12px; }
    body.brand-site .site-header .brand-logo-lockup { flex-basis: 130px; width: 130px; }
    body.brand-site .site-header .brand-logo-lockup img { width: 130px; }
    body.brand-site :is(.button, .mpb-button, .wp-element-button, .wp-block-button__link) { overflow-wrap: anywhere; }
    body.brand-site .audience-footer :is(h2, .footer-audience-switch h2) { font-size: 20px; }
}

@media (max-width: 480px) {
    body.brand-site :is(.audience-footer .pro-footer, .audience-footer .public-footer-inner, .audience-footer .public-footer-discovery) { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); }
    body.brand-site :is(.audience-footer .pro-footer, .audience-footer .public-footer-inner, .audience-footer .public-footer-discovery) > * { grid-area: auto; }
    body.brand-site .audience-footer :is(.pro-footer-section, .pro-footer-public, .public-footer-pro, .public-footer-section) { grid-column: auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.brand-site *, body.brand-site *::before, body.brand-site *::after { scroll-behavior: auto !important; transition: none !important; }
}