/*
Theme Name: MDDW
Theme URI: https://lawsociety.example
Author: MDDW
Description: Custom theme for Lawsociety - domiciliation & coworking pour les professionnels du droit.
Version: 1.0.0
Text Domain: mddw
*/

/* ===== Fonts =====
   Weights below are the ones actually used in the source mockup
   (extracted from the vector PDF text layer), not a generic scale. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

/* ===== Design tokens =====
   Colors sampled directly from the vector fill values in the PDF source
   (jpg/site V5_01.ai export), not eyeballed from the compressed JPEG. */
:root {
  --color-bg: #f8f6f1;
  --color-surface: #ffffff;
  --color-dark: #3f2b24;
  --color-dark-soft: #5c4a40;
  --color-accent: #7f463a;
  --color-accent-light: #b79188;
  --color-text-muted: #6c6c6a;
  --color-border: #ece4dd;
  /* Warmer tan rule used by the Communauté panel dividers
     (sampled ~rgb(216,200,175) in site V53/V54.jpg). */
  --color-border-strong: #d8c8af;

  --font-base: "Outfit", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* The mockup's artboard is 428px wide; matching it exactly keeps every
     measurement below (taken at that width) accurate. */
  --content-max-width: 428px;

  /* Desktop only (see the min-width: 1080px block at the end of this file) */
  --wrap-max: 1080px;
}

/* ===== Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p,
ul,
figure,
dl,
dd {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-weight: 300;
  background-color: var(--color-bg);
  color: var(--color-dark);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Room for the fixed .cta-bar pinned near the bottom on mobile - only on
   the front page, where .cta-bar is actually rendered (see header.php).
   Reset to 0 on desktop below, where the CTA moves to a top-right position. */
body.home {
  padding-bottom: 90px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button,
select {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Layout shell ===== */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  background-color: var(--color-bg);
}

/* Sticky footer on basic content pages (index.php, body.page is WP's own
   Page-post-type class - unrelated to .page above): short text shouldn't
   leave the footer floating above the bottom of the viewport. Flex lives
   on .page itself (not body) so its own max-width/margin:auto sizing -
   and the desktop full-bleed override below - are completely untouched. */
body.page .page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page main {
  flex: 1 0 auto;
}

.container {
  padding-inline: 35px;
}

/* ===== Fixed contact CTA (site V56.jpg) =====
   Mobile: full-bleed beige band pinned to the bottom of the viewport
   (edge to edge, like the mockup) with a top divider inset to the same
   35px margin as the white blocks (.pricing-card, .container) - not
   edge to edge itself. The dark button sits centered inside the band.
   Desktop: no band, just the button pinned top-right. Lives outside
   .page (direct body child, see header.php) so position:fixed is never
   affected by .page's own max-width/centering. */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: 16px 35px;
  background-color: var(--color-bg);
}

.cta-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 35px;
  right: 35px;
  border-top: 1px solid var(--color-border);
}

.cta-bar__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 28px;
  background-color: var(--color-dark);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.cta-bar__btn:hover {
  opacity: 0.8;
}

.cta-bar__line1 {
  font-size: 11px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-light);
}

.cta-bar__line2 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

@media (min-width: 1080px) {
  .cta-bar {
    left: auto;
    right: 24px;
    bottom: auto;
    top: 24px;
    padding: 0;
    background: none;
  }

  .cta-bar::before {
    content: none;
  }
}

/* Below the desktop breakpoint these are transparent to layout (their
   children behave as direct children of whatever mobile container they
   sit in, so the mobile markup below never has to know they exist). The
   min-width: 1080px block at the end of this file turns each one into a
   real box. */
.wrap,
.card-col,
.footer-cols,
.footer-brand {
  display: contents;
}

/* ===== Header ===== */
.site-header {
  position: relative;
}

.site-header__photo {
  width: 100%;
  height: 207px;
  object-fit: cover;
  display: block;
}

/* Decorative corner squares sitting at the photo/background seam */
.site-header__accent {
  position: absolute;
  left: 0;
  top: 198px;
  width: 30px;
  height: 10px;
  background-color: var(--color-dark);
}

.site-header__accent::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 10px;
  width: 11px;
  height: 10px;
  background-color: var(--color-accent);
}

.site-header__brand {
  position: relative;
  margin-top: -47px;
  margin-left: 29px;
  width: 207px;
}

.site-header__logo {
  width: 207px;
  height: auto;
}

.site-header__tagline {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--color-dark);
}

/* ===== Tab navigation ===== */
.tab-nav {
  display: flex;
  gap: 28px;
  padding: 40px 35px 0;
  border-bottom: 1px solid var(--color-border);
}

.tab-nav__link {
  position: relative;
  padding-bottom: 13px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tab-nav__link small {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
}

.tab-nav__link[aria-current="page"] {
  color: var(--color-dark);
  font-weight: 700;
}

.tab-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 67%;
  height: 2px;
  background-color: var(--color-dark);
}

/* ===== Tab panels ===== */
.tab-panel {
  display: none;
  padding-top: 30px;
}

/* .brochure-cta owns its own top/bottom spacing (kept iso on purpose) -
   without this, the panel's own padding-top would stack on top of the
   button's margin-top and break the symmetry. */
.tab-panel:has(.brochure-cta) {
  padding-top: 0;
}

.tab-panel.is-active {
  display: block;
}

/* ===== Pricing card ===== */
.pricing-card {
  background-color: var(--color-surface);
  padding: 28px 0 32px 26px;
  margin-inline: 35px;
  margin-bottom: 42px;
}

.pricing-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 16px;
  padding-right: 0;
}

.pricing-card__title {
  font-size: 19px;
  line-height: 0.9;
  text-transform: uppercase;
}

.pricing-card__title span {
  display: block;
}

.pricing-card__title span:first-child {
  font-weight: 700;
}

.pricing-card__title span:last-child {
  font-weight: 300;
}

.pricing-card__badge {
  flex-shrink: 0;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 9px 14px;
  text-align: center;
  white-space: nowrap;
}

/* ===== Brochure download button =====
   Self-contained (no .wrap class) rather than combined with it - .wrap is
   display:contents on mobile (see the layout-shell comment above), which
   would silently drop this block's own centering/padding the same way it
   did on .simple-content earlier. Desktop max-width/padding values are
   duplicated from .wrap's own desktop override on purpose. */
.brochure-cta {
  display: flex;
  justify-content: center;
  padding-inline: 35px;
  margin-top: 28px;
  margin-bottom: 28px;
}

.brochure-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 9px 14px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.brochure-cta__btn:hover {
  opacity: 0.8;
}

.pricing-card__badge-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-card__badge-caption {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pricing-card__badge-caption strong {
  font-weight: 700;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 28px;
}

.feature-list__item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Icons share one square 50x50 viewBox; the visible glyph is already
   positioned/sized inside it by the source artwork, so the box is
   rendered at native size, never stretched to a different aspect ratio. */
.feature-list__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.feature-list__icon img {
  width: 100%;
  height: 100%;
}

.feature-list__label {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-text-muted);
}

.feature-list__note {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.feature-list__note::before {
  content: "> ";
}

.pricing-card__rates {
  margin-top: var(--space-5);
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 300;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.rate-row__label {
  color: var(--color-text-muted);
}

.rate-row__value {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pricing-card__footnote {
  margin-top: var(--space-3);
  margin-right: 28px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: 300;
  color: var(--color-text-muted);
}

/* Edge-to-edge marketing banner (e.g. "Plus que 5 places"), same
   background/type as .pricing-card__badge. Negative margins cancel out
   .pricing-card's own padding (28px 0 32px 26px) on the sides that
   aren't already flush, so it reaches all the way to the card's own
   edges regardless of what's above it. */
.pricing-card__marketing {
  margin: 20px 0 -32px -26px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 14px;
}

/* ===== CTA / state button ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 9px 14px;
  border: none;
  cursor: pointer;
}

.btn--block {
  width: 100%;
}

.btn--muted {
  background-color: var(--color-accent-light);
  color: var(--color-dark);
}

/* ===== Community =====
   Two states on #communaute, driven server-side by is_user_logged_in()
   (front-page.php sets data-auth="in"/"out" at render time - there is
   no client-side auth toggle anymore, real WP login/logout replaces
   the earlier demo):
   - data-auth="out" (site V53.jpg): compact lawyer rows inside the shared
     white panel, separated by tan divider lines. No detail fields.
   - data-auth="in" (site V54.jpg): one white card per lawyer with the
     detail fields always visible below the identity row. */
#communaute[data-auth="out"] .lawyer-list {
  display: none;
}

#communaute[data-auth="in"] .lawyer-rows {
  display: none;
}

/* Same breathing room before the footer as the pricing tabs
   (their last card carries margin-bottom: 42px). */
#communaute {
  padding-bottom: 42px;
}

/* In the mockups the button's top edge sits flush with the panel's top
   edge (it hangs over the panel corner), so the toolbar takes no height
   of its own. */
.community-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  height: 0;
  margin: 0 35px;
  position: relative;
  z-index: 1;
}

.community-panel {
  background-color: var(--color-surface);
  margin-inline: 35px;
}

/* Logged-in: the panel closes shortly after the filter line */
#communaute[data-auth="in"] .community-panel {
  padding-bottom: 20px;
}

.community-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 66px 32px 48px;
  text-align: center;
}

/* Same native-size rule as .feature-list__icon */
.community-intro__icon {
  width: 50px;
  height: 50px;
}

.community-intro__title {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 14px;
}

/* The filter's top/bottom rules are inset 33px, like every divider in
   this panel (they span x68-359 on the 428px artboard). */
.select-field-wrap {
  margin-inline: 33px;
  border-top: 1px solid var(--color-border-strong);
}

.select-field {
  width: 100%;
  padding: 6px 24px;
  border: none;
  border-bottom: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%233f2b24'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  color: var(--color-dark-soft);
  appearance: none;
}

/* --- Logged-out: compact rows in the shared panel --- */
.lawyer-rows {
  padding: 0 33px;
}

.lawyer-row {
  padding-block: 40px;
}

.lawyer-row + .lawyer-row {
  border-top: 1px solid var(--color-border-strong);
}

/* Expertise filter (js/main.js): hides non-matching lawyer-row/lawyer items */
.lawyer-row.is-hidden,
.lawyer.is-hidden {
  display: none;
}

/* --- Logged-in: one card per lawyer --- */
.lawyer-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 48px;
}

.lawyer {
  background-color: var(--color-surface);
  margin-inline: 35px;
  padding: 24px 33px 36px;
}

/* --- Identity row, shared by both states --- */
.lawyer-card {
  display: flex;
  gap: 15px;
}

.lawyer-card__avatar {
  width: 80px;
  height: 112px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-accent);
}

.lawyer-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lawyer-card__role {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark-soft);
}

.lawyer-card__name {
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.lawyer-card__name span {
  text-transform: uppercase;
}

.lawyer-card__specialty {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.lawyer-card__socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* Thin vertical rule between the LinkedIn and Mail icons (per mockup) */
.lawyer-card__socials a + a {
  border-left: 1px solid var(--color-border-strong);
  padding-left: 10px;
}

.lawyer-card__socials img {
  width: 22px;
  height: 22px;
}

/* --- Detail fields (logged-in cards only, always visible) --- */
.lawyer-detail {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.lawyer-detail dt {
  color: var(--color-accent-light);
}

.lawyer-detail__row dd {
  margin-top: 2px;
}

.lawyer-detail__row--inline dt,
.lawyer-detail__row--inline dd {
  display: inline;
  margin: 0;
}

/* Whitespace between the inline label and its value ("Avocat depuis : 1998") */
.lawyer-detail__row--inline dt::after {
  content: " ";
}

.lawyer-detail__socials {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.lawyer-detail__socials img {
  width: 22px;
  height: 22px;
}

/* ===== Simple content template =====
   Generic text page (About, FAQ, Contact...): header kept, no tab-nav,
   just a title/text column and a link back to the tabbed front page.
   This is index.php - the theme's default fallback template. */
.simple-content {
  display: block;
  padding: 30px 35px 64px;
}

.simple-content h1 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.simple-content h2 {
  font-size: 19px;
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
}

.simple-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin: var(--space-5) 0 var(--space-2);
}

.simple-content p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.simple-content ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: var(--space-4);
  text-align: left;
}

.simple-content li {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: var(--space-2);
}

.simple-content a:not(.simple-content__back) {
  color: var(--color-accent);
  text-decoration: underline;
}

.simple-content__back {
  display: inline-flex;
  margin-top: var(--space-5);
}

/* ===== Footer ===== */
.site-footer {
  background-color: var(--color-dark);
  color: #fff;
  padding: var(--space-6) 35px;
}

.site-footer__logo {
  width: 140px;
  margin-bottom: var(--space-6);
}

.footer-feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 32px;
}

/* Same native-size rule as .feature-list__icon */
.footer-feature__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.footer-feature__title {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-feature__text {
  font-size: 16px;
  font-weight: 300;
  color: #e7e1da;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: var(--space-5) 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}

.footer-links a {
  color: #f1ece7;
}

/* ============================================================
   Desktop (>= 1080px)
   No mockup for this tier - direction came from a design consult,
   the rules themselves were written and verified by hand. Every rule
   above this block is the mobile build and is untouched; nothing
   below changes anything below the breakpoint. `.wrap`, `.card-col`,
   `.footer-cols` and `.footer-brand` are `display: contents` by
   default (declared with the layout shell above) so the extra markup
   they need is invisible to the mobile layout - each override below
   just turns them into a real box.

   Breakpoint value: chosen for the pricing-card row (the tightest
   constraint below) - three cards at a readable ~300px minimum, two
   32px gaps and the wrap's 40px side padding need 3*300 + 64 + 80 =
   1044px; 1080px gives that a little air without ballooning the gap
   between "still mobile" and "three comfortable cards". Header,
   nav, footer and Communauté aren't as width-sensitive so they just
   ride the same single jump. */
/* ===== Small screens (<400px) ===== */
@media (max-width: 399px) {
  .tab-nav {
    gap: 15px;
  }

  .pricing-card__badge {
    font-size: 12px;
  }
}

/* ===== Small screens (<375px) ===== */
@media (max-width: 374px) {
  .pricing-card {
    margin-inline: 15px;
  }

  .tab-nav__link {
    font-size: 12px;
  }
}

@media (min-width: 1080px) {
  body.home {
    padding-bottom: 0;
  }

  .page {
    max-width: none;
  }

  .wrap {
    display: block;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: 40px;
  }

  /* ===== Header =====
     Otherwise untouched beyond going full-bleed: the photo keeps its
     mobile height and the brand block (logo + tagline) and accent
     square keep their exact mobile layout, just against a wider photo -
     the same object, not a redesigned one. The one deliberate desktop
     change: drop the mobile 29px margin so the logo's left edge lines
     up with .wrap's 40px padding instead - the same edge every card
     and column below starts from.

     The accent square must move by that same amount, but it's NOT
     supposed to land flush with the logo - in mobile it sits 29px to
     the logo's left (square at left:0, brand at margin-left:29px), a
     deliberate slight peek-out under the card's corner. --header-inset
     is "wherever the logo's left edge now is"; the square stays offset
     -29px from that, preserving the mobile relationship instead of
     collapsing it. */
  .site-header {
    --header-inset: max(40px, calc((100% - var(--wrap-max)) / 2 + 40px));
  }

  .site-header__brand {
    margin-left: 0;
  }

  .site-header__accent {
    left: calc(var(--header-inset) - 29px);
  }

  /* ===== Tab nav ===== */
  .tab-nav {
    padding: 0;
  }

  .tab-nav .wrap {
    display: flex;
    justify-content: center;
    gap: 72px;
    padding-top: 56px;
  }

  .tab-nav__link {
    padding-bottom: 18px;
    font-size: 16px;
  }

  .tab-nav__link small {
    font-size: 12px;
  }

  /* Mobile has no hover surface to design for; desktop does. Only
     applies to inactive links - the active one keeps its own
     permanent underline below. */
  .tab-nav__link:not([aria-current="page"]):hover {
    color: var(--color-dark);
  }

  .tab-nav__link:not([aria-current="page"]):hover::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 67%;
    height: 2px;
    background-color: var(--color-border-strong);
  }

  /* ===== Tab panels ===== */
  .tab-panel {
    padding-top: 56px;
    padding-bottom: calc(var(--space-6) * 2);
  }

  .tab-panel:has(.brochure-cta) {
    padding-top: 0;
  }

  /* ===== Simple content template ===== */
  .simple-content {
    max-width: 720px;
    margin-inline: auto;
    padding-block: 96px;
  }

  /* ===== Pricing cards: plain row, not a quinconce =====
     All three (or four) cards side by side, sharing the row equally
     and shrinking together if the viewport is on the narrow end of
     this tier. `.card-col` reverts to `display: contents` here (same
     as mobile) so the cards are flat flex items of `.pricing-grid`
     regardless of which column-group div they're nested in. */
  .card-col {
    display: contents;
  }

  .wrap.pricing-grid {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  /* Right-aligned, level with the card row below it (site V5x.jpg desktop
     detail: same look as mobile, just right-aligned instead of centered). */
  .brochure-cta {
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: 40px;
    justify-content: flex-end;
  }

  .pricing-card {
    flex: 1 1 0;
    min-width: 0;
    margin-inline: 0;
    margin-bottom: 0;
  }

  /* ===== Communauté =====
     Both data-auth states get an alternative desktop layout: full width
     (same as the pricing-card row), a shared header box (icon + title +
     sort, front-page.php's .community-header), and a 3-wide grid of
     avocat cards below it, separated by a transparent gutter. Ported
     from www/css/styles.css (prototyped there first, see PROJECT
     history) - front-page.php currently forces data-auth="in" via
     $community_always_full, so this is the layout actually live today,
     but the data-auth="out" rules are kept fully working so the compact
     rows come back automatically the day that flag is reverted. */
  #communaute .wrap {
    max-width: var(--wrap-max);
  }

  #communaute .community-panel {
    background-color: transparent;
    margin-inline: 0;
    padding-bottom: 0;
  }

  #communaute[data-auth="out"] .lawyer-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 0;
    margin-top: 32px;
  }

  /* .lawyer-row already stretches to the tallest card in its grid row
     (CSS Grid's default align-items:stretch), but .lawyer-card and its
     content were still just top-aligned inside that taller box, so the
     socials row landed at a different height on every card depending on
     how many lines the specialty text wrapped to. Turning .lawyer-row/
     .lawyer-card/.lawyer-card__body into a stretched flex column lets
     margin-top:auto pin the socials to the bottom, right-aligned, the
     same on every card regardless of text length. */
  #communaute[data-auth="out"] .lawyer-row {
    display: flex;
    background-color: var(--color-surface);
    padding: 32px 28px;
    border-top: none;
  }

  #communaute[data-auth="out"] .lawyer-row + .lawyer-row {
    border-top: none;
  }

  #communaute[data-auth="out"] .lawyer-card {
    flex: 1;
  }

  #communaute[data-auth="out"] .lawyer-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  #communaute[data-auth="out"] .lawyer-card__socials {
    margin-top: auto;
    justify-content: flex-end;
  }

  /* Shared by both states: the header (icon + title + sort) keeps its
     original centered/stacked mobile look almost untouched - just capped
     narrower (.select-field-wrap alone would otherwise stretch edge to
     edge on a 1080px-wide box) and given bottom padding to close off the
     white box properly - widened into its own full-width white box.
     .community-toolbar keeps its original mobile height:0 + flex-end +
     z-index hack (still what makes the Connexion/Déconnexion button hang
     over the header box's top corner) but drops its 35px side margin
     here, so the button sits flush with the white box's right edge
     instead of inset from it. */
  #communaute .community-header {
    background-color: var(--color-surface);
    padding-bottom: 32px;
  }

  #communaute .community-toolbar {
    margin: 0;
  }

  #communaute .select-field-wrap {
    max-width: 360px;
    margin-inline: auto;
  }

  /* Logged-in (data-auth="in"): full width, same header box, then the
     detailed cards (already individually white, .lawyer) move from a
     single stacked column into a 3-wide grid with a transparent gutter,
     same as the logged-out cards. */
  #communaute[data-auth="in"] .lawyer-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 32px;
  }

  #communaute[data-auth="in"] .lawyer {
    margin-inline: 0;
  }

  /* ===== Footer =====
     Logo alone on its own row, then a three-column row below it: the
     two info blocks stacked in column 1, the site-plan link list
     spanning columns 2-3 (split into its own two sub-columns
     internally, not three) - top-aligned with column 1, i.e. with the
     140m² block, since the logo is no longer part of that column. */
  .site-footer__logo {
    margin-bottom: var(--space-6);
  }

  .footer-cols {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    column-gap: 64px;
    align-items: start;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .footer-feature {
    margin-bottom: 0;
  }

  /* A horizontal rule doesn't read once the brand column and the link
     list sit side by side instead of stacked. */
  .footer-divider {
    display: none;
  }

  .footer-links {
    grid-column: 2 / span 2;
    display: block;
    columns: 2;
    column-gap: 48px;
  }

  .footer-links a {
    display: block;
    margin-bottom: 9px;
    break-inside: avoid;
  }
}