/* =========================================================================
   Lolivarie Golf Club : Joomla template styles

   Loaded after bootstrap.min.css. Every colour, size, radius and shadow is a
   custom property in the :root block below; nothing below that block hard-codes
   a value. Rebrand by editing :root only.
   ========================================================================= */

:root {
  /* ---- Brand palette ------------------------------------------------- */
  --lgc-blue:        #1a2b60;
  --lgc-blue-dark:   #142149;
  --lgc-blue-darker: #0e1633;
  --lgc-blue-light:  #2c437f;
  --lgc-blue-pale:   #8e9cc4;

  --lgc-gold:           #b8933f;
  --lgc-gold-light:     #d4b160;
  --lgc-gold-dark:      #85692d; /* was #8f7130, darkened for WCAG AA contrast */

  /* ---- Neutrals (Périgord limestone) --------------------------------- */
  --lgc-ink:            #14182a;
  --lgc-body:           #4b5164;
  --lgc-muted:          #686d7f; /* was #7d8395, darkened for WCAG AA contrast */
  --lgc-line:           #dcdde5;
  --lgc-sand:           #f2f3f7;
  --lgc-sand-deep:      #e4e6ee;
  --lgc-white:          #ffffff;

  /* ---- Tee markers ---------------------------------------------------- */
  /* Muted on purpose: five saturated dots next to navy and gold turn the
     table into a rainbow. These sit at a similar lightness so they read as
     one set, and still tell the repères apart at a glance. */
  --lgc-tee-1: #ffffff;   /* blancs  */
  --lgc-tee-2: #d9b45c;   /* jaunes  */
  --lgc-tee-3: #b46a63;   /* rouges  */
  --lgc-tee-4: #6b8bb0;   /* bleus   */
  --lgc-tee-5: #8f7aa8;   /* violets */
  --lgc-tee-6: #d4894a;   /* orange  */

  /* ---- Semantic ------------------------------------------------------ */
  --lgc-bg:             var(--lgc-white);
  --lgc-bg-alt:         var(--lgc-sand);
  --lgc-text:           var(--lgc-body);
  --lgc-heading:        var(--lgc-ink);
  --lgc-accent:         var(--lgc-gold);
  --lgc-on-dark:        rgba(255, 255, 255, .82);

  /* ---- Type ---------------------------------------------------------- */
  --lgc-font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lgc-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --lgc-fs-xs:    .75rem;
  --lgc-fs-sm:    .875rem;
  --lgc-fs-base:  1rem;
  --lgc-fs-lg:    1.125rem;
  --lgc-fs-xl:    1.375rem;
  --lgc-fs-h3:    clamp(1.35rem, 1.1rem + .8vw,  1.75rem);
  --lgc-fs-h2:    clamp(1.9rem,  1.4rem + 1.8vw, 2.85rem);
  --lgc-fs-h1:    clamp(2.4rem,  1.6rem + 3.4vw, 4.5rem);

  --lgc-lh-tight: 1.15;
  --lgc-lh-base:  1.65;
  --lgc-ls-wide:  .16em;
  --lgc-ls-nav:   .08em;

  /* ---- Space --------------------------------------------------------- */
  --lgc-space-1:  .25rem;
  --lgc-space-2:  .5rem;
  --lgc-space-3:  .75rem;
  --lgc-space-4:  1rem;
  --lgc-space-5:  1.5rem;
  --lgc-space-6:  2rem;
  --lgc-space-7:  3rem;
  --lgc-space-8:  4rem;
  --lgc-section:  clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* ---- Radius / shadow / motion -------------------------------------- */
  --lgc-radius-sm:  2px;
  --lgc-radius:     4px;
  --lgc-radius-lg:  8px;
  --lgc-radius-pill: 999px;

  --lgc-shadow-sm: 0 1px 2px rgba(20, 24, 42, .06);
  --lgc-shadow:    0 4px 16px rgba(20, 24, 42, .09);
  --lgc-shadow-lg: 0 12px 40px rgba(20, 24, 42, .16);

  --lgc-transition: 160ms ease;

  /* ---- Header metrics (JS reads these too) ---------------------------- */
  --lgc-topbar-h:  38px;
  --lgc-nav-h:     92px;
  --lgc-nav-h-sm:  64px;
  --lgc-z-header:  1030;
}

/* =========================================================================
   Base
   ========================================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  font-family: var(--lgc-font-body);
  font-size: var(--lgc-fs-base);
  line-height: var(--lgc-lh-base);
  color: var(--lgc-text);
  background: var(--lgc-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .lgc-display {
  font-family: var(--lgc-font-display);
  font-weight: 600;
  line-height: var(--lgc-lh-tight);
  color: var(--lgc-heading);
}
h1, h2, h3 { overflow-wrap: break-word; }
h1 { font-size: var(--lgc-fs-h1); }
h2 { font-size: var(--lgc-fs-h2); }
h3 { font-size: var(--lgc-fs-h3); }

a { color: var(--lgc-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lgc-gold-dark); }

/* Anchored sections must clear the sticky header when jumped to. */
[id] { scroll-margin-top: calc(var(--lgc-nav-h-sm) + var(--lgc-space-5)); }

.lgc-section     { padding-block: var(--lgc-section); }
.lgc-section--alt { background: var(--lgc-bg-alt); }
/* ---- Band text column --------------------------------------------------
   The columns are 7 and 5, not 6 and 6, and the text keeps a readable measure
   inside its 7. The space left over becomes the gap towards the picture, so
   the two halves stop looking like two equal slabs.

   The cap sits on an inner wrapper rather than on the column: a narrowed column
   would let the row pack its items together and push the picture towards the
   middle. The wrapper moves as one block, so the gold rule stays at the head of
   the text instead of drifting off on its own. */

@media (min-width: 992px) {
  .lgc-band__inner { max-width: 76ch; }
  /* The lead keeps its own tighter measure elsewhere, but inside a band it
     follows the band. */
  .lgc-band__inner > .lgc-lead { max-width: none; }
  .lgc-band__text--end .lgc-band__inner { margin-left: auto; }
}

.lgc-section--dark {
  background: var(--lgc-blue-dark);
  color: var(--lgc-on-dark);
}
.lgc-section--dark h2,
.lgc-section--dark h3 { color: var(--lgc-white); }

.lgc-eyebrow {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lgc-gold-dark);
  margin-bottom: var(--lgc-space-3);
}
.lgc-section--dark .lgc-eyebrow { color: var(--lgc-gold-light); }

.lgc-lead {
  font-size: var(--lgc-fs-lg);
  color: var(--lgc-muted);
  max-width: 62ch;
}
.lgc-section--dark .lgc-lead { color: var(--lgc-on-dark); }

.lgc-rule {
  width: 56px; height: 2px; border: 0; opacity: 1;
  background: var(--lgc-gold);
  margin: var(--lgc-space-4) 0 var(--lgc-space-5);
}
.lgc-rule--center { margin-inline: auto; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  --bs-btn-border-radius: var(--lgc-radius);
  font-family: var(--lgc-font-body);
  font-weight: 600;
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  font-size: var(--lgc-fs-sm);
  padding: var(--lgc-space-3) var(--lgc-space-5);
  transition: var(--lgc-transition);
}
.btn-lgc {
  background: var(--lgc-blue);
  border: 1px solid var(--lgc-blue);
  color: var(--lgc-white);
}
.btn-lgc:hover, .btn-lgc:focus-visible {
  background: var(--lgc-blue-dark);
  border-color: var(--lgc-blue-dark);
  color: var(--lgc-white);
}
.btn-lgc-gold {
  background: var(--lgc-gold);
  border: 1px solid var(--lgc-gold);
  color: var(--lgc-blue-darker);
}
.btn-lgc-gold:hover, .btn-lgc-gold:focus-visible {
  background: var(--lgc-gold-light);
  border-color: var(--lgc-gold-light);
  color: var(--lgc-blue-darker);
}
.btn-lgc-outline {
  background: transparent;
  border: 1px solid var(--lgc-blue);
  color: var(--lgc-blue);
}
.btn-lgc-outline:hover, .btn-lgc-outline:focus-visible {
  background: var(--lgc-blue);
  color: var(--lgc-white);
}
.btn-lgc-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: var(--lgc-white);
}
.btn-lgc-ghost:hover, .btn-lgc-ghost:focus-visible {
  background: var(--lgc-white);
  border-color: var(--lgc-white);
  color: var(--lgc-blue-dark);
}
.btn:focus-visible {
  outline: 2px solid var(--lgc-gold);
  outline-offset: 2px;
  box-shadow: none;
}

/* =========================================================================
   Header : top bar
   ========================================================================= */

.lgc-header {
  position: sticky;
  top: 0;
  z-index: var(--lgc-z-header);
  background: var(--lgc-white);
  transition: box-shadow var(--lgc-transition);
}
.lgc-header.is-stuck { box-shadow: var(--lgc-shadow); }

.lgc-topbar {
  background: var(--lgc-blue-darker);
  color: var(--lgc-on-dark);
  font-size: var(--lgc-fs-xs);
  min-height: var(--lgc-topbar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: min-height var(--lgc-transition), opacity var(--lgc-transition);
}
/* The top bar retracts once the page scrolls; the main nav stays. */
.lgc-header.is-stuck .lgc-topbar { min-height: 0; opacity: 0; }

.lgc-topbar a {
  color: var(--lgc-on-dark);
  text-decoration: none;
  transition: color var(--lgc-transition);
}
.lgc-topbar a:hover, .lgc-topbar a:focus-visible { color: var(--lgc-gold-light); }
.lgc-topbar__sep { color: rgba(255, 255, 255, .25); }

/* -------------------------------------------------------------------------
   Top bar contents, whatever module renders them.

   The bar holds menu modules, so the same mod_menu markup that styles the main
   navigation (uppercase, bold, letter-spaced, underline on hover) lands here
   too. These rules scope that back down to plain small links, so the bar looks
   right whether a module uses the "topbar" layout, the default menu layout, or
   Joomla's own language switcher.
   ------------------------------------------------------------------------- */

/* Lists: strip bullets and lay them out in a row. */
.lgc-topbar ul,
.lgc-topbar .mod-languages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--lgc-space-3);
}

/* Links: the main-nav treatment has no place in a utility bar. */
.lgc-topbar a,
.lgc-topbar .lgc-menu__link,
.lgc-topbar .mod-languages a {
  display: inline;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--lgc-font-body);
  font-size: var(--lgc-fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--lgc-on-dark);
  text-decoration: none;
  white-space: nowrap;
}
.lgc-topbar a:hover,
.lgc-topbar .lgc-menu__link:hover,
.lgc-topbar .mod-languages a:hover,
.lgc-topbar a:focus-visible,
.lgc-topbar .lgc-menu__link:focus-visible {
  color: var(--lgc-gold-light);
}

/* The page you are on, in the same gold as the current language. */
.lgc-topbar .lgc-menu__item.is-active > .lgc-menu__link { color: var(--lgc-gold-light); }

/* The main nav draws a gold underline on hover. Not here. */
.lgc-topbar .lgc-menu__link::after { content: none; }

/* Separators between items, so no markup is needed for them. */
.lgc-topbar li + li::before {
  content: "|";
  color: rgba(255, 255, 255, .25);
  margin-right: var(--lgc-space-3);
}
.lgc-topbar li {
  display: flex;
  align-items: center;
  gap: var(--lgc-space-3);
}

/* Current language, and the visually hidden label Joomla ships. */
.lgc-topbar .lang-active > a,
.lgc-topbar .lgc-langs .is-active > span {
  color: var(--lgc-gold-light);
  font-weight: 600;
}
.lgc-topbar .mod-languages .visually-hidden { display: none; }

/* Language codes read better capitalised, names do not. */
.lgc-topbar .lgc-langs a,
.lgc-topbar .lgc-langs span { text-transform: uppercase; }




/* =========================================================================
   Header : main navigation
   ========================================================================= */

.lgc-nav { padding-block: var(--lgc-space-3); }

.lgc-brand {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--lgc-space-3);
  text-decoration: none;
  color: var(--lgc-blue);
}
/* Original club crest, sized by height so the lockup holds at any nav height. */
.lgc-brand__crest {
  height: 46px;
  width: auto;
  flex: 0 0 auto;
  transition: height var(--lgc-transition);
}
.lgc-header.is-stuck .lgc-brand__crest { height: 38px; }

.lgc-footer__logo { height: 84px; width: auto; }
.lgc-brand__name {
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--lgc-blue);
}
.lgc-brand__tag {
  display: block;
  white-space: nowrap;
  font-family: var(--lgc-font-body);
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  color: var(--lgc-muted);
  font-weight: 600;
}

/* ---- Menu list ------------------------------------------------------- */

.lgc-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lgc-menu__item { position: relative; }

.lgc-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lgc-space-2);
  width: 100%;
  padding: var(--lgc-space-3) 0;
  background: none;
  border: 0;
  font-size: var(--lgc-fs-sm);
  font-weight: 600;
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-ink);
  text-decoration: none;
  text-align: left;
  transition: color var(--lgc-transition);
}
.lgc-menu__link:hover,
.lgc-menu__link:focus-visible { color: var(--lgc-blue-light); }
.lgc-menu__link:focus-visible {
  outline: 2px solid var(--lgc-gold);
  outline-offset: 2px;
}
.lgc-menu__item.is-active > .lgc-menu__link { color: var(--lgc-blue); }

.lgc-menu__caret {
  flex: 0 0 auto;
  width: .6em; height: .6em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--lgc-transition);
}
.lgc-menu__item.is-open > .lgc-menu__link .lgc-menu__caret { transform: rotate(-135deg); }

/* A menu item styled as the gold call to action. Put "lgc-cta" in the menu
   item's Link CSS Style field (Joomla: menu item > Link Type > Link CSS Style).
   Nothing is hardcoded in the template, so the club decides which item it is
   and where it sits in the menu. */
.lgc-menu__link.lgc-cta {
  justify-content: center;
  padding: var(--lgc-space-3) var(--lgc-space-5);
  border-radius: var(--lgc-radius);
  background: var(--lgc-gold);
  color: var(--lgc-blue-darker);
  transition: background var(--lgc-transition), color var(--lgc-transition);
}
.lgc-menu__link.lgc-cta:hover,
.lgc-menu__link.lgc-cta:focus-visible {
  background: var(--lgc-gold-light);
  color: var(--lgc-blue-darker);
}
/* It is a button, so it does not take the gold underline the other items get. */
.lgc-menu__link.lgc-cta::after { content: none; }
.lgc-menu__item.is-active > .lgc-menu__link.lgc-cta { color: var(--lgc-blue-darker); }

/* ---- Submenu --------------------------------------------------------- */

.lgc-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--lgc-transition);
}
.lgc-menu__item.is-open > .lgc-submenu { max-height: 32rem; }

.lgc-submenu__link {
  display: block;
  padding: var(--lgc-space-2) 0 var(--lgc-space-2) var(--lgc-space-4);
  font-size: var(--lgc-fs-sm);
  color: var(--lgc-body);
  text-decoration: none;
  border-left: 2px solid var(--lgc-line);
  transition: var(--lgc-transition);
}
.lgc-submenu__link:hover,
.lgc-submenu__link:focus-visible {
  color: var(--lgc-blue);
  border-left-color: var(--lgc-gold);
  background: var(--lgc-sand);
}
.lgc-submenu__link.is-active {
  color: var(--lgc-blue);
  border-left-color: var(--lgc-gold);
  font-weight: 600;
}
.lgc-submenu__desc {
  display: block;
  font-size: var(--lgc-fs-xs);
  color: var(--lgc-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.lgc-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--lgc-space-3);
  padding-block: var(--lgc-space-4);
  border-top: 1px solid var(--lgc-line);
  margin-top: var(--lgc-space-3);
}

/* ---- Burger ---------------------------------------------------------- */

.lgc-burger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
  padding: 10px;
  cursor: pointer;
}
.lgc-burger:focus-visible { outline: 2px solid var(--lgc-gold); outline-offset: 2px; }
.lgc-burger span {
  display: block;
  width: 22px; height: 2px;
  grid-area: 1 / 1;
  background: var(--lgc-ink);
  transition: transform var(--lgc-transition), opacity var(--lgc-transition);
}
.lgc-burger span:nth-child(1) { transform: translateY(-6px); }
.lgc-burger span:nth-child(3) { transform: translateY(6px); }
.lgc-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.lgc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lgc-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ---- Mobile drawer --------------------------------------------------- */

.lgc-nav__panel {
  display: none;
  flex: 0 0 100%;
  order: 3;
  padding-bottom: var(--lgc-space-4);
  max-height: calc(100dvh - var(--lgc-nav-h-sm));
  overflow-y: auto;
}
.lgc-nav__panel.is-open { display: block; }

.lgc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 22, 51, .45);
  z-index: calc(var(--lgc-z-header) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--lgc-transition), visibility var(--lgc-transition);
}
.lgc-backdrop.is-visible { opacity: 1; visibility: visible; }

/* =========================================================================
   Desktop navigation (>= lg) : flat bar + hover/click dropdowns
   ========================================================================= */

@media (min-width: 1200px) {
  [id] { scroll-margin-top: calc(var(--lgc-nav-h) + var(--lgc-space-5)); }

  .lgc-burger { display: none; }

  .lgc-nav__panel {
    display: flex !important;
    flex: 1 1 auto;
    order: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lgc-space-4);
    padding-bottom: 0;
    max-height: none;
    overflow: visible;
  }

  .lgc-menu {
    flex-direction: row;
    align-items: center;
    gap: var(--lgc-space-4);
  }
  /* Room to breathe again once the viewport can afford it. */
  @media (min-width: 1500px) {
    .lgc-menu { gap: var(--lgc-space-5); }
  }

  .lgc-menu__link {
    width: auto;
    padding: var(--lgc-space-4) 0;
    position: relative;
  }
  /* Gold underline grows from the centre on hover / active. */
  .lgc-menu__link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: var(--lgc-space-2);
    width: 0; height: 2px;
    background: var(--lgc-gold);
    transform: translateX(-50%);
    transition: width var(--lgc-transition);
  }
  .lgc-menu__item:hover > .lgc-menu__link::after,
  .lgc-menu__item.is-open > .lgc-menu__link::after,
  .lgc-menu__item.is-active > .lgc-menu__link::after { width: 100%; }

  .lgc-menu__caret { width: .45em; height: .45em; }
  .lgc-menu__item.is-open > .lgc-menu__link .lgc-menu__caret { transform: rotate(-135deg); }

  .lgc-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(var(--lgc-space-2));
    min-width: 17rem;
    max-height: none;
    overflow: visible;
    background: var(--lgc-white);
    border-top: 2px solid var(--lgc-gold);
    border-radius: 0 0 var(--lgc-radius) var(--lgc-radius);
    box-shadow: var(--lgc-shadow-lg);
    padding: var(--lgc-space-3) 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--lgc-transition), transform var(--lgc-transition), visibility var(--lgc-transition);
  }
  .lgc-menu__item.is-open > .lgc-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* Submenus near the right edge flip so they never overflow the viewport. */
  .lgc-menu__item--flip-end > .lgc-submenu {
    left: auto; right: 0;
    transform: translateY(var(--lgc-space-2));
  }
  .lgc-menu__item--flip-end.is-open > .lgc-submenu { transform: translateY(0); }

  .lgc-submenu__link {
    padding: var(--lgc-space-2) var(--lgc-space-5);
    border-left: 2px solid transparent;
  }

  .lgc-nav__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--lgc-space-3);
    padding-block: 0;
    border-top: 0;
    margin-top: 0;
  }
}

/* Seven top-level items is a lot of bar. Between the desktop breakpoint and
   large screens, tighten type and spacing so the header stays on one line. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lgc-menu { gap: var(--lgc-space-3); }
  .lgc-nav__panel { gap: var(--lgc-space-3); }
  .lgc-menu__link {
    font-size: .8125rem;
    letter-spacing: .04em;
  }
  .lgc-nav__actions .btn {
    padding-inline: var(--lgc-space-4);
    font-size: .8125rem;
    letter-spacing: .04em;
  }
  .lgc-brand__tag { font-size: .6875rem; letter-spacing: .1em; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.lgc-hero {
  position: relative;
  min-height: clamp(28rem, 76vh, 46rem);
  display: flex;
  align-items: center;
  color: var(--lgc-white);
  overflow: hidden;
  background: linear-gradient(135deg, var(--lgc-blue-light) 0%, var(--lgc-blue-darker) 100%);
}
.lgc-hero h1 { color: var(--lgc-white); }

/* Crossfading hero slides: stacked, only .is-active is opaque. */
.lgc-hero__slides { position: absolute; inset: 0; overflow: hidden; }
.lgc-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.lgc-hero__slide.is-active { opacity: 1; }
/* Slide images come in as custom properties (helpers/herobg.php): a small
   WebP on phones, the large one from 900px. Later slides get theirs from
   template.js just before they are shown. */
.lgc-hero__slide { background-image: var(--lgc-bg-sm, var(--lgc-bg, none)); }
@media (min-width: 900px) {
  .lgc-hero__slide { background-image: var(--lgc-bg, none); }
}
/* Hero rendered by a module rather than hardcoded in the template. */
.lgc-hero--module { min-height: clamp(24rem, 62vh, 40rem); }

/* Captions are stacked like the slides, so only the active one shows. The
   first is in normal flow to give the hero its height; the rest overlay it. */
.lgc-hero__caption {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
}
.lgc-hero__caption:not(:first-child) {
  position: absolute;
  top: 0;
  left: var(--bs-gutter-x, .75rem);
  right: var(--bs-gutter-x, .75rem);
}
.lgc-hero__caption.is-active { opacity: 1; visibility: visible; }

.lgc-hero__title {
  font-size: var(--lgc-fs-h1);
  color: var(--lgc-white);
  margin-bottom: var(--lgc-space-4);
}
.lgc-hero__sub {
  font-size: var(--lgc-fs-lg);
  color: rgba(255, 255, 255, .88);
  max-width: 52ch;
}
.lgc-hero__sub p:last-child { margin-bottom: 0; }

/* The scrim sits above the photos so the headline stays legible on all of them.
   It is darkest behind the left-aligned text and fades out towards the right,
   with a light band top and bottom for the header and the slide controls. */
.lgc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14,22,51,.55) 0%, rgba(14,22,51,.3) 45%, rgba(14,22,51,.05) 85%),
    linear-gradient(180deg, rgba(14,22,51,.3) 0%, rgba(14,22,51,0) 30%, rgba(14,22,51,0) 65%, rgba(14,22,51,.5) 100%);
}
.lgc-hero h1, .lgc-hero__sub, .lgc-pagehero--media h1, .lgc-pagehero--media p { text-shadow: 0 1px 14px rgba(14,22,51,.55); }
.lgc-hero > .container { z-index: 1; }

.lgc-hero__sub {
  font-size: var(--lgc-fs-lg);
  color: rgba(255, 255, 255, .88);
  max-width: 52ch;
}
.lgc-hero__eyebrow {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lgc-gold-light);
}

/* Key facts strip pinned to the bottom of the hero. */
.lgc-facts {
  background: var(--lgc-blue-darker);
  color: var(--lgc-on-dark);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.lgc-facts__item {
  padding: var(--lgc-space-5) var(--lgc-space-4);
  text-align: center;
}
.lgc-facts__num {
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-h3);
  color: var(--lgc-gold-light);
  display: block;
  line-height: 1.1;
}
.lgc-facts__label {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
}

/* =========================================================================
   Cards
   ========================================================================= */

.lgc-card {
  height: 100%;
  background: var(--lgc-white);
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--lgc-transition), box-shadow var(--lgc-transition);
}
.lgc-card:hover { transform: translateY(-3px); box-shadow: var(--lgc-shadow); }
.lgc-card__media {
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, var(--lgc-blue-light), var(--lgc-blue-dark));
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .5);
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
}
.lgc-card__body { padding: var(--lgc-space-5); flex: 1 1 auto; }
.lgc-card__foot { padding: 0 var(--lgc-space-5) var(--lgc-space-5); }
.lgc-card__title { font-size: var(--lgc-fs-xl); margin-bottom: var(--lgc-space-2); }
/* Card media holding a real <img> rather than a background. Fixed ratio so a
   grid of articles stays even whatever the editor uploaded. */
.lgc-card__media--img {
  display: block;
  padding: 0;
  overflow: hidden;
}
.lgc-card__media--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.lgc-card:hover .lgc-card__media--img img { transform: scale(1.04); }

/* ---- Person card ------------------------------------------------------
   A category of people rather than articles. The portrait stands beside the
   text instead of running across the top, because a head and shoulders shot
   cropped to 3:2 loses the head. It also keeps the picture near its own
   width, so a modest photo still looks sharp.

   Switched on with "Article Class" = lgc-card--person on the menu item. */

.lgc-card--person { display: grid; }

@media (min-width: 576px) {
  .lgc-card--person {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .lgc-card--person .lgc-card__media {
    grid-row: 1 / -1;
    aspect-ratio: auto;
    height: 100%;
  }
  /* Crop away the feet, never the forehead. */
  .lgc-card--person .lgc-card__media--img img { object-position: top center; }
  .lgc-card--person .lgc-card__body,
  .lgc-card--person .lgc-card__foot { grid-column: 2; }
}

/* Article reached through a menu item with Page Class "pros": the portrait
   floats beside the text at its own size rather than spanning the column. */

.item-page.pros .item-image {
  float: right;
  width: auto;
  max-width: 40%;
  margin: 0 0 var(--lgc-space-4) var(--lgc-space-5);
}
.item-page.pros .item-image img { width: auto; max-width: 100%; }

/* ---- Article typography -----------------------------------------------
   The display scale is built for hero panels and section openers, where a
   heading stands alone on an empty width. Inside running text those sizes
   shout, and the article title also sits directly under the page hero title,
   which is an h1 at the full scale. Two headings of equal weight tell the
   reader they are equally important, which they are not.

   The tokens are redefined for the scope rather than the headings being given
   new sizes, so h1 to h3 keep their single definition. */

.item-page {
  --lgc-fs-h1: clamp(1.9rem,  1.5rem + 1.5vw, 2.9rem);
  --lgc-fs-h2: clamp(1.45rem, 1.3rem + .65vw, 1.9rem);
  --lgc-fs-h3: clamp(1.15rem, 1.1rem + .25vw, 1.35rem);
}

@media (max-width: 575.98px) {
  .item-page.pros .item-image { float: none; max-width: 100%; margin-left: 0; }
}

/* Article titles inside cards are links, not buttons. */
.lgc-card__title a { color: inherit; text-decoration: none; }
.lgc-card__title a:hover { color: var(--lgc-blue); }
.lgc-card__text > p:last-child { margin-bottom: 0; }

.lgc-card__text { font-size: var(--lgc-fs-sm); margin-bottom: 0; }

.lgc-badge {
  display: inline-block;
  font-size: var(--lgc-fs-xs);
  font-weight: 600;
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  padding: var(--lgc-space-1) var(--lgc-space-3);
  border-radius: var(--lgc-radius-pill);
  background: var(--lgc-sand-deep);
  color: var(--lgc-blue);
}
.lgc-badge--gold { background: var(--lgc-gold); color: var(--lgc-blue-darker); }

/* ---- Price table ----------------------------------------------------- */

.lgc-price {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lgc-fs-sm);
}
.lgc-price th, .lgc-price td {
  padding: var(--lgc-space-3) var(--lgc-space-4);
  border-bottom: 1px solid var(--lgc-line);
  text-align: left;
}
.lgc-price thead th {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-muted);
  border-bottom-width: 2px;
}
.lgc-price td:last-child, .lgc-price th:last-child { text-align: right; font-weight: 600; }
.lgc-price tbody tr:hover { background: var(--lgc-sand); }
/* A row label that needs a line of detail under it, without a second column. */
.lgc-price tbody th small {
  display: block;
  font-weight: 400;
  font-size: var(--lgc-fs-xs);
  color: var(--lgc-muted);
  margin-top: var(--lgc-space-1);
}
.lgc-price, .table-responsive { margin-bottom: var(--lgc-space-6); }

/* ---- Embedded third party page ----------------------------------------
   A cross origin frame cannot report its own height, so it gets a tall box
   and scrolls inside it rather than being cut off at an arbitrary line. */

.lgc-embed {
  border: 1px solid var(--lgc-line);
  background: var(--lgc-sand);
  margin-bottom: var(--lgc-space-3);
}

/* The ffgolf competition list opens with a tall empty band and its own
   title; our heading already says what it is, so the frame is pulled up
   inside a clipped box until its year filter sits at the top. If ffgolf
   ever changes their page, adjust --crop (or set it to 0). */
.lgc-embed--ffgolf { --crop: 290px; overflow: hidden; background: var(--lgc-white); border-radius: var(--lgc-radius); }
.lgc-embed.lgc-embed--ffgolf iframe { margin-top: calc(-1 * var(--crop)); height: calc(clamp(32rem, 80vh, 54rem) + var(--crop)); }
@media (max-width: 767.98px) {
  .lgc-embed--ffgolf { --crop: 490px; }
}
.lgc-embed iframe {
  display: block;
  width: 100%;
  height: clamp(28rem, 75vh, 50rem);
  border: 0;
}
.lgc-embed__note { font-size: var(--lgc-fs-xs); color: var(--lgc-muted); }

/* ---- Telephone booking panel ------------------------------------------
   The club takes no bookings online, so the number is the call to action
   rather than a line of small print. This block repeats in the sidebar of
   every content page. */

.lgc-booking {
  height: auto;              /* .lgc-card stretches to its row, not wanted here */
  padding: var(--lgc-space-5);
  background: var(--lgc-sand);
  border-left: 3px solid var(--lgc-gold);
}
.lgc-booking:hover { transform: none; box-shadow: none; }
.lgc-booking__num {
  display: block;
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lgc-blue);
  text-decoration: none;
  margin-bottom: var(--lgc-space-1);
}
.lgc-booking__num:hover { color: var(--lgc-gold-dark); }
.lgc-booking__hours { font-size: var(--lgc-fs-sm); color: var(--lgc-muted); margin-bottom: var(--lgc-space-4); }
.lgc-booking__text { font-size: var(--lgc-fs-sm); margin-bottom: var(--lgc-space-4); }
.lgc-booking .lgc-contact__list { margin-bottom: var(--lgc-space-4); }

/* Every column after the first holds a figure. Not the default, because some
   price tables carry a description column that must stay left aligned. */
.lgc-price--prices th:not(:first-child),
.lgc-price--prices td:not(:first-child) { text-align: right; }
.lgc-price--prices td:not(:first-child) { font-weight: 600; }

/* A band across the table naming the rows beneath it, so one table can hold
   two seasons or four kinds of membership without repeating its header. */
.lgc-price tr.lgc-price__group th {
  background: var(--lgc-sand-deep);
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-lg);
  font-weight: 700;
  color: var(--lgc-blue);
  text-align: left;
}
.lgc-price tr.lgc-price__group th small {
  font-family: var(--lgc-font-body);
  font-size: var(--lgc-fs-xs);
  font-weight: 400;
  color: var(--lgc-muted);
  letter-spacing: 0;
  text-transform: none;
}

/* =========================================================================
   Sub-page chrome
   ========================================================================= */

.lgc-pagehero {
  background: var(--lgc-blue-darker);
  color: var(--lgc-on-dark);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.lgc-pagehero h1 { color: var(--lgc-white); margin-bottom: var(--lgc-space-4); }
.lgc-pagehero .lgc-eyebrow { color: var(--lgc-gold-light); }
.lgc-pagehero__sub {
  font-size: var(--lgc-fs-lg);
  color: var(--lgc-on-dark);
  max-width: 56ch;
  margin: 0;
}

/* Sub-page hero carrying a crossfading photo sequence behind the title. */
.lgc-pagehero--media {
  position: relative;
  overflow: hidden;
  min-height: clamp(20rem, 46vh, 30rem);
  display: flex;
  align-items: center;
}
.lgc-pagehero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 22, 51, .6) 0%, rgba(14, 22, 51, .35) 45%, rgba(14, 22, 51, .05) 85%),
    linear-gradient(180deg, rgba(14, 22, 51, .3) 0%, rgba(14, 22, 51, 0) 30%, rgba(14, 22, 51, 0) 65%, rgba(14, 22, 51, .45) 100%);
}
.lgc-pagehero--media > .container { position: relative; z-index: 1; }

/* Slideshow controls. Present whenever a slideshow does not advance itself,
   so the visitor always has a way through. */
.lgc-slidenav {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--lgc-space-5);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--lgc-space-4);
}
.lgc-slidenav__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: var(--lgc-white);
  font-size: var(--lgc-fs-xl);
  line-height: 1;
  cursor: pointer;
  transition: var(--lgc-transition);
}
.lgc-slidenav__arrow:hover {
  background: var(--lgc-gold);
  border-color: var(--lgc-gold);
  color: var(--lgc-blue-darker);
}
.lgc-slidenav__arrow:focus-visible { outline: 2px solid var(--lgc-gold); outline-offset: 3px; }

.lgc-slidenav__dots {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--lgc-space-2);
}
/* The dot stays 9px, but the button around it is 24px so it is easy to tap
   (WCAG 2.5.8 target size). The visible dot is the ::before. */
.lgc-slidenav__dots { gap: 0; }
.lgc-slidenav__dots button {
  position: relative;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lgc-slidenav__dots button::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: transparent;
  transition: var(--lgc-transition);
}
.lgc-slidenav__dots button:hover::before { background: rgba(255, 255, 255, .6); }
.lgc-slidenav__dots button[aria-current]::before {
  background: var(--lgc-gold);
  border-color: var(--lgc-gold);
  transform: scale(1.25);
}
.lgc-slidenav__dots button:focus-visible { outline: 2px solid var(--lgc-gold); outline-offset: -2px; }

/* The controls sit low; keep the hero text clear of them. */
.lgc-pagehero--media { padding-bottom: calc(var(--lgc-space-8) + var(--lgc-space-5)); }

.lgc-crumbs {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-blue-pale);
  margin-bottom: var(--lgc-space-5);
}
.lgc-crumbs a { color: var(--lgc-blue-pale); text-decoration: none; }
.lgc-crumbs a:hover { color: var(--lgc-gold-light); text-decoration: underline; }
.lgc-crumbs span { margin-inline: var(--lgc-space-2); }
.lgc-crumbs [aria-current] { color: var(--lgc-white); margin-inline: 0; }
/* Joomla's breadcrumbs module inside the page hero, styled as our crumb trail. */
.lgc-pagehero .mod-breadcrumbs,
.lgc-pagehero .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lgc-space-2);
  margin: 0 0 var(--lgc-space-5);
  padding: 0;
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-blue-pale);
}
.lgc-pagehero .breadcrumb a { color: var(--lgc-blue-pale); text-decoration: none; }
.lgc-pagehero .breadcrumb a:hover { color: var(--lgc-gold-light); text-decoration: underline; }
.lgc-pagehero .breadcrumb .active { color: var(--lgc-white); }
.lgc-pagehero .breadcrumb li + li::before { content: "\203A"; margin-right: var(--lgc-space-2); opacity: .6; }
.lgc-pagehero .breadcrumb .visually-hidden { display: none; }
/* No "Vous êtes ici :" label; the trail starts with a house icon for the home
   page. The word stays in the link for screen readers. */
.lgc-pagehero .breadcrumb .mod-breadcrumbs__here { display: none; }
.lgc-pagehero .breadcrumb .mod-breadcrumbs__here + li::before { content: none; }
.lgc-pagehero .breadcrumb .mod-breadcrumbs__here + li a { display: inline-flex; align-items: center; }
.lgc-pagehero .breadcrumb .mod-breadcrumbs__here + li a span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lgc-pagehero .breadcrumb .mod-breadcrumbs__here + li a::before {
  content: ""; width: 1.05rem; height: 1.05rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* =========================================================================
   Hole cards
   ========================================================================= */

.lgc-nine__head { margin-bottom: var(--lgc-space-6); }
.lgc-nine__sum {
  font-size: var(--lgc-fs-sm);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-muted);
  margin: 0;
}

.lgc-holes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr));
  gap: var(--lgc-space-4);
}

.lgc-hole {
  display: flex;
  flex-direction: column;
  background: var(--lgc-white);
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
  padding: var(--lgc-space-5);
  transition: transform var(--lgc-transition), box-shadow var(--lgc-transition);
}
.lgc-hole:hover { transform: translateY(-3px); box-shadow: var(--lgc-shadow); }

.lgc-hole__head {
  display: flex;
  align-items: center;
  gap: var(--lgc-space-4);
  padding-bottom: var(--lgc-space-4);
  border-bottom: 1px solid var(--lgc-line);
}
.lgc-hole__num {
  font-family: var(--lgc-font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lgc-blue);
  min-width: 2ch;
}
.lgc-hole__meta { display: flex; flex-direction: column; gap: var(--lgc-space-1); }
.lgc-hole__par {
  font-size: var(--lgc-fs-sm);
  font-weight: 700;
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-ink);
}
.lgc-hole__hcp {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-muted);
}

/* Six tee distances in one strip, each marked with its tee colour. */
.lgc-hole__dist {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--lgc-space-1);
  margin: var(--lgc-space-4) 0 0;
}
.lgc-hole__tee {
  min-width: 0;
  text-align: center;
  padding: var(--lgc-space-2) 2px;
  background: var(--lgc-sand);
  border-radius: var(--lgc-radius-sm);
}
.lgc-hole__tee dt {
  font-size: .625rem;
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-muted);
  font-weight: 600;
}
.lgc-hole__tee dd {
  margin: 0;
  font-size: var(--lgc-fs-sm);
  font-weight: 700;
  color: var(--lgc-ink);
}
.lgc-hole__tee dd span { font-weight: 400; font-size: var(--lgc-fs-xs); color: var(--lgc-muted); }

/* Tee colours, as on the club's scorecard. */
.lgc-hole__tee { border-top: 3px solid var(--tee, var(--lgc-line)); }
.lgc-hole__tee--white, .lgc-tee--white { --tee: #d9dde5; }
.lgc-hole__tee--yellow, .lgc-tee--yellow { --tee: var(--lgc-tee-2); }
.lgc-hole__tee--blue, .lgc-tee--blue { --tee: var(--lgc-tee-4); }
.lgc-hole__tee--red, .lgc-tee--red { --tee: var(--lgc-tee-3); }
.lgc-hole__tee--purple, .lgc-tee--purple { --tee: var(--lgc-tee-5); }
.lgc-hole__tee--orange, .lgc-tee--orange { --tee: var(--lgc-tee-6); }
.lgc-tee {
  display: inline-block; width: .7em; height: .7em; margin-right: .4em; vertical-align: .02em;
  border-radius: 50%; background: var(--tee); box-shadow: inset 0 0 0 1px rgba(14, 22, 51, .15);
}
.lgc-score .lgc-score__sub th, .lgc-score .lgc-score__sub td { font-weight: 700; background: var(--lgc-sand); }

.lgc-hole__tip { flex: 1 1 auto; margin-top: var(--lgc-space-4); }
.lgc-hole__tiplabel {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lgc-gold-dark);
  margin-bottom: var(--lgc-space-1);
}
.lgc-hole__tiptext {
  font-size: var(--lgc-fs-sm);
  margin: 0;
  color: var(--lgc-body);
}

.lgc-hole__video {
  margin-top: var(--lgc-space-4);
  padding-top: var(--lgc-space-3);
  border-top: 1px solid var(--lgc-line);
  font-size: var(--lgc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-blue);
  text-decoration: none;
}
.lgc-hole__video::after { content: " \2197"; }
.lgc-hole__video:hover { color: var(--lgc-gold-dark); text-decoration: underline; }

/* =========================================================================
   Tariff tables
   ========================================================================= */

.lgc-tariff th[scope="row"] { font-weight: 400; }
.lgc-tariff__sub th {
  text-align: left;
  background: var(--lgc-sand-deep);
  font-family: var(--lgc-font-body);
  font-size: var(--lgc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  color: var(--lgc-blue);
}
.lgc-section--alt .lgc-tariff__sub th { background: var(--lgc-white); }
.lgc-tariffs .lgc-price { background: var(--lgc-white); }
.lgc-section--alt .lgc-tariffs .lgc-price { background: transparent; }

.lgc-note { text-decoration: none; font-size: var(--lgc-fs-xs); color: var(--lgc-gold-dark); }
.lgc-note:hover { text-decoration: underline; }

.lgc-notes {
  margin-top: var(--lgc-space-6);
  padding: var(--lgc-space-5);
  border-left: 2px solid var(--lgc-gold);
  background: var(--lgc-white);
  font-size: var(--lgc-fs-sm);
  color: var(--lgc-muted);
}
.lgc-notes p { margin-bottom: var(--lgc-space-2); }

/* The score card is wide; keep it readable rather than cramped. */
.lgc-score { min-width: 46rem; font-variant-numeric: tabular-nums; }
.lgc-score td, .lgc-score th { text-align: right; }
.lgc-score th[scope="row"] { text-align: left; white-space: nowrap; }
.lgc-score thead th:first-child { text-align: left; }
.lgc-score tfoot th, .lgc-score tfoot td {
  font-weight: 700;
  color: var(--lgc-ink);
  border-top: 2px solid var(--lgc-line);
}

/* =========================================================================
   Partners
   ========================================================================= */

.lgc-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fixed counts rather than auto-fill: a logo strip reads as a block, and the
     count changing by one at an odd width makes the last row look accidental. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lgc-space-3);
}
@media (min-width: 576px) { .lgc-partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .lgc-partners { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .lgc-partners { grid-template-columns: repeat(5, 1fr); } }
.lgc-partner a {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 7rem;
  padding: var(--lgc-space-4);
  background: var(--lgc-white);
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
  transition: var(--lgc-transition);
}
.lgc-partner a:hover,
.lgc-partner a:focus-visible {
  border-color: var(--lgc-gold);
  box-shadow: var(--lgc-shadow);
  transform: translateY(-2px);
}
/* Supplied logos vary wildly in size and aspect; cap both axes so the grid
   stays even and nothing is cropped. */
.lgc-partner img {
  max-width: 100%;
  max-height: 4.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The tile is one link around both the logo and the name, so it needs to stack
   them itself rather than rely on the grid's centring alone. */
.lgc-partner a,
.lgc-partner span.lgc-partner__wrap,
.lgc-partner > span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--lgc-space-3);
  text-decoration: none;
}

/* Half of these logos are unreadable at tile size, so the name carries the
   meaning and the logo is the recognition. */
.lgc-partner__name {
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  text-align: center;
  color: var(--lgc-muted);
  line-height: 1.3;
}
.lgc-partner a:hover .lgc-partner__name,
.lgc-partner a:focus-visible .lgc-partner__name { color: var(--lgc-blue); }

/* A partner without a link is still a tile, just not a clickable one. */
.lgc-partner > span {
  height: 100%;
  min-height: 7rem;
  padding: var(--lgc-space-4);
  background: var(--lgc-white);
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
}

/* =========================================================================
   Reviews
   ========================================================================= */

.lgc-review {
  height: 100%;
  margin: 0;
  padding: var(--lgc-space-6);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--lgc-radius);
  display: flex;
  flex-direction: column;
}
/* Reviews shown a page at a time. Only the active page is in the flow, so the
   section keeps the height of two cards rather than of all of them. */
.lgc-reviews { position: relative; }
.lgc-reviews__page { display: none; }
.lgc-reviews__page.is-active { display: flex; }

/* Arrows under the cards instead of floating over a photo. */
.lgc-slidenav--static {
  position: static;
  transform: none;
  justify-content: center;
  margin-top: var(--lgc-space-6);
}
/* Sitting above the slides instead of under them, it needs its space on the
   other side. */
.lgc-slidenav--static:first-child {
  margin-top: 0;
  margin-bottom: var(--lgc-space-5);
}
/* On a light background the white-on-transparent arrows would vanish. */
.lgc-section:not(.lgc-section--dark) .lgc-slidenav--static .lgc-slidenav__arrow {
  border-color: var(--lgc-line);
  color: var(--lgc-blue);
  background: var(--lgc-white);
}
.lgc-section:not(.lgc-section--dark) .lgc-slidenav--static .lgc-slidenav__arrow:hover {
  background: var(--lgc-gold);
  border-color: var(--lgc-gold);
  color: var(--lgc-blue-darker);
}
.lgc-section:not(.lgc-section--dark) .lgc-slidenav--static .lgc-slidenav__dots button {
  border-color: var(--lgc-muted);
}
.lgc-section:not(.lgc-section--dark) .lgc-slidenav--static .lgc-slidenav__dots button[aria-current] {
  background: var(--lgc-gold);
  border-color: var(--lgc-gold);
}

/* Unfilled stars stay in place but recede, so a four star review reads as
   four out of five rather than as a rendering fault. */
.lgc-review__star-empty { opacity: .28; }

.lgc-review__stars {
  color: var(--lgc-gold-light);
  font-size: var(--lgc-fs-lg);
  letter-spacing: .12em;
  line-height: 1;
  margin-bottom: var(--lgc-space-4);
}
.lgc-review__quote {
  margin: 0 0 var(--lgc-space-5);
  flex: 1 1 auto;
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-xl);
  line-height: 1.45;
  color: var(--lgc-white);
}
/* Real quotes vary a lot in length; the shorter one must not float mid-card. */
.lgc-review__by {
  font-size: var(--lgc-fs-sm);
  font-weight: 600;
  color: var(--lgc-white);
  padding-top: var(--lgc-space-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.lgc-review__src {
  display: block;
  font-weight: 400;
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-nav);
  text-transform: uppercase;
  color: var(--lgc-blue-pale);
  margin-top: var(--lgc-space-1);
}

/* =========================================================================
   Contact
   ========================================================================= */

.lgc-contact__address {
  font-style: normal;
  margin-bottom: var(--lgc-space-5);
}

.lgc-contact__list {
  list-style: none;
  margin: 0 0 var(--lgc-space-5);
  padding: 0;
}
.lgc-contact__list li + li {
  margin-top: var(--lgc-space-4);
  padding-top: var(--lgc-space-4);
  border-top: 1px solid var(--lgc-line);
}
.lgc-contact__label {
  display: block;
  font-size: var(--lgc-fs-xs);
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lgc-muted);
  margin-bottom: var(--lgc-space-1);
}

/* Map. A fixed height on small screens (a 4:3 ratio plus the minimum height
   made it wider than a phone), then it stretches to match the column
   beside it so the two halves line up. */
.lgc-map {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  min-height: 20rem;
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
  background: var(--lgc-sand);
}
.lgc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 992px) {
  .lgc-map { aspect-ratio: auto; min-height: 26rem; }
}

/* The Surtitre field is already printed above the title by the article
   override, so Joomla's own automatic field output for it is a duplicate.
   Setting "Automatic Display" to "Do not automatically display" on the field
   removes it at the source; this keeps it hidden if that ever gets switched
   back. Only this one field is hidden, so other custom fields still show. */
.field-entry.eyebrow { display: none; }

/* Without this the empty list would still take up its own margin. */
.fields-container:has(> .field-entry.eyebrow:only-child) { display: none; }

/* The two teaching pros, one card each, in the sidebar. A support block, not a
   feature: the article is what the reader came for. Compact enough that the
   whole thing fits on screen, which is what makes the sticky behaviour useful.
   Big portraits belong on the Nos pros page, not here. */
.lgc-pros { list-style: none; margin: 0 0 var(--lgc-space-4); padding: 0; }

.lgc-pro {
  display: flex;
  flex-direction: row-reverse;   /* portrait sits right, name leads on the left */
  gap: var(--lgc-space-4);
  align-items: flex-start;
  height: auto;                /* .lgc-card sets 100%, which stretches it here */
  padding: var(--lgc-space-4);
  margin-bottom: var(--lgc-space-3);
  background: var(--lgc-sand);
  border: 1px solid var(--lgc-line);
  border-left: 3px solid var(--lgc-gold);
}
.lgc-pro:hover { transform: none; box-shadow: none; }
.lgc-pro p { margin-bottom: var(--lgc-space-1); }

/* ---- Interview, question and answer ---------------------------------- */

.lgc-qa { margin: 0 0 var(--lgc-space-6); }
.lgc-qa dt {
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--lgc-blue);
  margin-top: var(--lgc-space-5);
}
.lgc-qa dt:first-child { margin-top: 0; }
.lgc-qa dd {
  margin: var(--lgc-space-2) 0 0;
  padding-left: var(--lgc-space-4);
  border-left: 2px solid var(--lgc-sand-deep);
}

/* Square crop from a 250 by 318 portrait, anchored to the top so the face
   stays in frame and the background falls away. */
.lgc-pro__photo {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--lgc-radius);
}
.lgc-pro__text { flex: 1 1 auto; min-width: 0; padding: 0; }

.lgc-pro__name {
  font-family: var(--lgc-font-display);
  font-size: var(--lgc-fs-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--lgc-heading);
  margin-bottom: var(--lgc-space-2);
}
.lgc-pro__role {
  font-size: var(--lgc-fs-sm);
  color: var(--lgc-muted);
}
.lgc-pro__contact { font-size: var(--lgc-fs-sm); margin-bottom: 0; }

/* The snippet brings its own cards, so the sidebar chrome around it steps back.
   Without this you get a card inside a card: two borders, double padding. */
.lgc-card:has(.lgc-pros--cards),
.lgc-card:has(.lgc-booking) {
  background: none;
  border: 0;
  box-shadow: none;
  /* .lgc-card is 100% tall, which fills the whole column and leaves sticky
     nothing to travel through. It has to be its own height to follow along. */
  height: auto;
  overflow: visible;
}
.lgc-card:has(.lgc-pros--cards) > .lgc-card__body,
.lgc-card:has(.lgc-booking) > .lgc-card__body { padding: 0; }
.lgc-card:has(.lgc-pros--cards):hover,
.lgc-card:has(.lgc-booking):hover { transform: none; }

/* Follows the reader down the page, so the pros stay reachable while they work
   through the prices. Desktop only: on a phone the sidebar sits under the
   article and there is nothing to stick to. */
@media (min-width: 992px) {
  .lgc-card:has(.lgc-pros--cards),
  .lgc-card:has(.lgc-booking) {
    position: sticky;
    top: calc(var(--lgc-nav-h-sm) + var(--lgc-space-4));
  }
}

/* =========================================================================
   Article image
   ========================================================================= */

/* The float class comes from a free text field on the article, so Joomla puts
   whatever was typed straight into the markup. Bootstrap's own names are
   handled, and so are the plain English ones, because someone will type
   "right" and be puzzled when nothing moves. */
.item-image {
  margin-bottom: var(--lgc-space-5);
}
.item-image img {
  border-radius: var(--lgc-radius);
  width: 100%;
  height: auto;
}
.item-image .caption {
  font-size: var(--lgc-fs-sm);
  color: var(--lgc-muted);
  margin-top: var(--lgc-space-2);
}

/* Full width on phones: half a column of text beside a picture is unreadable. */
@media (min-width: 768px) {
  .item-image.right,
  .item-image.float-end,
  .item-image.pull-right {
    float: right;
    max-width: 50%;
    margin-left: var(--lgc-space-6);
  }

  .item-image.left,
  .item-image.float-start,
  .item-image.pull-left {
    float: left;
    max-width: 50%;
    margin-right: var(--lgc-space-6);
  }
}

/* A floated image taller than its text would otherwise hang out of the article. */
.com-content-article::after {
  content: "";
  display: block;
  clear: both;
}

/* Summary table beside the intro text, above the full score card. It comes
   first in the source because a float has to, but it reads as a sidebar. */
.lgc-score-summary {
  margin-bottom: var(--lgc-space-5);
}
.lgc-score-intro > p {
  font-size: var(--lgc-fs-lg);
  color: var(--lgc-muted);
  max-width: 46ch;
}

@media (min-width: 768px) {
  .lgc-score-summary {
    float: right;
    width: 30rem;
    max-width: 52%;
    margin-left: var(--lgc-space-6);
  }
}

/* Each row is one set of tees, so it carries the same colour as the matching
   column in the score card below. The stripe on the left does the work; the
   disc repeats it at the label so the link is unmistakable. */
.lgc-score-summary tbody th {
  border-left: 3px solid transparent;
  padding-left: var(--lgc-space-4);
}
.lgc-score-summary tbody th { border-left-color: var(--tee, transparent); }

/* Sits as a quiet block beside the text rather than as a second full table. */
.lgc-score-summary .lgc-price { background: var(--lgc-sand); }
.lgc-score-summary .lgc-price th[scope="row"] { font-weight: 600; }

/* The float must not run on into the score card below it. */
.lgc-score-intro::after {
  content: "";
  display: block;
  clear: both;
}
.lgc-score-intro { margin-bottom: var(--lgc-space-6); }

/* Tee colours on the score card: each distance column header carries its tee
   colour (class lgc-tee--*), as a disc and as a hairline underneath, which
   ties the column to its colour without tinting every cell. */
.lgc-score thead th[class*="lgc-tee--"] { box-shadow: inset 0 -2px 0 var(--tee); }

/* =========================================================================
   Lightbox
   ========================================================================= */

.lgc-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--lgc-z-header) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lgc-space-6);
  background: rgba(14, 22, 51, .92);
}
.lgc-lightbox[hidden] { display: none; }

.lgc-lightbox__body {
  max-width: min(96vw, 1200px);
  max-height: 90vh;
  display: flex;
}
.lgc-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--lgc-radius);
  display: block;
}

/* Video keeps its shape at any window size. */
.lgc-lightbox__video {
  width: min(96vw, 1200px);
  aspect-ratio: 16 / 9;
  max-height: 90vh;
}
.lgc-lightbox__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--lgc-radius);
  display: block;
}

.lgc-lightbox__close {
  position: absolute;
  top: var(--lgc-space-4);
  right: var(--lgc-space-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: var(--lgc-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--lgc-transition);
}
.lgc-lightbox__close:hover {
  background: var(--lgc-gold);
  border-color: var(--lgc-gold);
  color: var(--lgc-blue-darker);
}
.lgc-lightbox__close:focus-visible { outline: 2px solid var(--lgc-gold); outline-offset: 3px; }

/* A picture that opens is worth signalling. */
[data-lgc-lightbox] {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
}
[data-lgc-lightbox]:focus-visible { outline: 2px solid var(--lgc-gold); outline-offset: 3px; }

/* =========================================================================
   Footer
   ========================================================================= */

.lgc-footer {
  background: var(--lgc-blue-darker);
  color: var(--lgc-on-dark);
  font-size: var(--lgc-fs-sm);
}
.lgc-footer h2, .lgc-footer h3 { color: var(--lgc-white); }
.lgc-footer__title {
  font-family: var(--lgc-font-body);
  font-size: var(--lgc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--lgc-ls-wide);
  text-transform: uppercase;
  color: var(--lgc-gold-light);
  margin-bottom: var(--lgc-space-4);
}
.lgc-footer a { color: var(--lgc-on-dark); text-decoration: none; transition: color var(--lgc-transition); }
.lgc-footer a:hover, .lgc-footer a:focus-visible { color: var(--lgc-gold-light); text-decoration: underline; }
.lgc-footer__list { list-style: none; margin: 0; padding: 0; }
/* Footer columns rendered through the "footer" module chrome. */
.lgc-footer__col ul { list-style: none; margin: 0; padding: 0; }
.lgc-footer__col li + li { margin-top: var(--lgc-space-2); }
.lgc-footer__col a { display: inline-block; }
.lgc-footer address { font-style: normal; }

.lgc-footer__list li + li { margin-top: var(--lgc-space-2); }

.lgc-footer__newsletter .form-control {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--lgc-white);
  border-radius: var(--lgc-radius);
  padding: var(--lgc-space-3) var(--lgc-space-4);
}
.lgc-footer__newsletter .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.lgc-footer__newsletter .form-control:focus {
  background: rgba(255, 255, 255, .1);
  border-color: var(--lgc-gold);
  box-shadow: none;
  color: var(--lgc-white);
}

.lgc-social {
  display: flex;
  gap: var(--lgc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lgc-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
}
.lgc-social a:hover {
  background: var(--lgc-gold);
  border-color: var(--lgc-gold);
  color: var(--lgc-blue-darker);
  text-decoration: none;
}

.lgc-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--lgc-space-5);
  font-size: var(--lgc-fs-xs);
  color: rgba(255, 255, 255, .6);
}

/* Agency credit, quieter than the copyright line next to it. */
.lgc-footer__credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.lgc-footer__credit a:hover { color: var(--lgc-gold-light); }

.lgc-footer__bar ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--lgc-space-2) var(--lgc-space-4);
}

/* ---- Back to top ----------------------------------------------------- */

.lgc-totop {
  position: fixed;
  right: var(--lgc-space-5);
  bottom: var(--lgc-space-5);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--lgc-blue);
  color: var(--lgc-white);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--lgc-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--lgc-transition), visibility var(--lgc-transition), background var(--lgc-transition);
  z-index: calc(var(--lgc-z-header) - 2);
}
.lgc-totop.is-visible { opacity: 1; visibility: visible; }
.lgc-totop:hover { background: var(--lgc-blue-dark); }
.lgc-totop:focus-visible { outline: 2px solid var(--lgc-gold); outline-offset: 3px; }

/* ---- Skip link ------------------------------------------------------- */

.lgc-skip {
  position: absolute;
  left: var(--lgc-space-4);
  top: var(--lgc-space-4);
  transform: translateY(-200%);
  z-index: calc(var(--lgc-z-header) + 10);
  background: var(--lgc-white);
  color: var(--lgc-blue);
  padding: var(--lgc-space-2) var(--lgc-space-4);
  border-radius: var(--lgc-radius);
  box-shadow: var(--lgc-shadow);
  transition: transform var(--lgc-transition);
}
.lgc-skip:focus { transform: translateY(0); }


/* =========================================================================
   Band slideshow

   Several photos in the picture column of a "highlights" band, from a folder
   named in the article's "galerie" custom field.

   Native scroll snapping does the work: swiping is the browser's own, and the
   arrows only nudge it along. One fixed ratio for every slide, otherwise the
   band would change height as the reader swipes.
   ========================================================================= */

.lgc-bandshots {
  position: relative;
  border-radius: var(--lgc-radius);
  overflow: hidden;
  box-shadow: var(--lgc-shadow-sm);
}

.lgc-bandshots__track {
  display: flex;
  aspect-ratio: 3 / 2;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lgc-bandshots__track::-webkit-scrollbar { display: none; }

.lgc-bandshots__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scroll-snap-align: center;
}

.lgc-bandshots__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--lgc-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--lgc-transition, .2s);
  box-shadow: var(--lgc-shadow-sm);
}

.lgc-bandshots__nav.is-prev { left: 10px; }
.lgc-bandshots__nav.is-next { right: 10px; }

/* Shown on hover where there is a pointer, always shown on touch, where there
   is no hover to reveal them. */
.lgc-bandshots:hover .lgc-bandshots__nav,
.lgc-bandshots__nav:focus-visible { opacity: 1; }

@media (hover: none) {
  .lgc-bandshots__nav { opacity: 1; }
}

.lgc-bandshots__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.lgc-bandshots__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(20, 24, 42, .18);
  transition: background var(--lgc-transition, .2s);
}

.lgc-bandshots__dots span.is-on { background: var(--lgc-white); }


/* Leading card in a category blog.

   Not a wider card but a band, like the ones on Notre Région: text on the left
   over seven columns, picture floating right over five, no border and no
   background. A card stretched across twelve columns reads as a mistake; a band
   reads as a deliberate opening. */

.lgc-card--lead {
  /* Explicit, because .lgc-card is flex and .lgc-card--person is grid from the
     small breakpoint up. Below the large breakpoint the band simply stacks. */
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.lgc-card--lead .lgc-card__media {
  border-radius: var(--lgc-radius);
  overflow: hidden;
  box-shadow: var(--lgc-shadow-sm);
}

/* The gold rule the bands carry under their heading, without needing it in the
   markup: the card layout is shared with the grid, which does not want one. */
.lgc-card--lead .lgc-card__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--lgc-gold);
  margin: var(--lgc-space-4) 0;
}

.lgc-card--lead .lgc-card__foot .btn { width: auto; }

@media (min-width: 992px) {
  .lgc-card--lead {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--lgc-space-6);
    padding-block: var(--lgc-space-5);
  }

  .lgc-card--lead .lgc-card__media {
    grid-column: 2;
    grid-row: 1 / -1;
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .lgc-card--lead .lgc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lgc-card--lead .lgc-card__body { grid-column: 1; grid-row: 1; padding: 0; }
  .lgc-card--lead .lgc-card__foot { grid-column: 1; grid-row: 2; padding: var(--lgc-space-4) 0 0; }

  .lgc-card--lead .lgc-card__title { font-size: var(--lgc-fs-h2); }
  .lgc-card--lead .lgc-card__text  { font-size: var(--lgc-fs-base); }
}

/* Without a picture the text should not sit in a seven column column of its
   own with five columns of nothing beside it. */
.lgc-card--lead:not(:has(.lgc-card__media)) { display: block; }


/* Person cards size their own portrait.

   The blog columns become query containers, so a card decides its shape from
   the width it actually gets rather than from the viewport. Two across on Nos
   Pros keep the portrait beside the text; four across on Equipe stack it, where
   38% of a 270px card leaves a sliver rather than a photograph. */

.lgc-blog .row > [class*="col-"] { container-type: inline-size; }

@container (max-width: 400px) {
  .lgc-card--person {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .lgc-card--person .lgc-card__media {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .lgc-card--person .lgc-card__body,
  .lgc-card--person .lgc-card__foot { grid-column: 1; }
}

/* Nos Pros ("Article Class" = lgc-card--person lgc-card--pro): the portrait
   runs across the top of the card, the text below. Only this menu item has
   the class, so the Équipe cards keep their own layout. */
.lgc-card--person.lgc-card--pro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.lgc-card--person.lgc-card--pro .lgc-card__media { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; height: auto; }
.lgc-card--person.lgc-card--pro .lgc-card__media--img img { object-position: center 20%; }
.lgc-card--person.lgc-card--pro .lgc-card__body,
.lgc-card--person.lgc-card--pro .lgc-card__foot { grid-column: 1; }
.lgc-card--person.lgc-card--pro .lgc-card__body { padding: var(--lgc-space-5); }
.lgc-card--person.lgc-card--pro .lgc-card__foot { padding: 0 var(--lgc-space-5) var(--lgc-space-5); }
.lgc-card--person.lgc-card--pro .lgc-card__title { font-size: 1.9rem; }
.lgc-card--person.lgc-card--pro .lgc-card__foot .btn { width: auto; padding-left: 2.5rem; padding-right: 2.5rem; }

/* The band is not a card, so it should not lift or zoom under the pointer.
   Those cues say "this whole thing is one click", which a band is not. */
.lgc-card--lead:hover { transform: none; box-shadow: none; }
.lgc-card--lead:hover .lgc-card__media--img img { transform: none; }

/* ==========================================================================
   Actualités: Facebook posts (mod_lolivarie_facebook)
   ========================================================================== */

.lgc-news__intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 3rem; }
.lgc-news__intro .lgc-lead { max-width: 40rem; margin: 0; }
.lgc-news__follow { display: inline-flex; align-items: center; gap: .6rem; }
.lgc-news { columns: 3; column-gap: 1.75rem; }
.lgc-news__card { break-inside: avoid; margin: 0 0 1.75rem; background: #fff; border: 1px solid var(--lgc-line); border-radius: 4px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.lgc-news__card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(20, 24, 42, .45); }
.lgc-news__media { position: relative; display: block; background: var(--lgc-sand); }
.lgc-news__media img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.lgc-news__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.lgc-news__play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--lgc-blue); }
.lgc-news__body { padding: 1.4rem 1.5rem 1.6rem; }
.lgc-news__date { margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lgc-gold-dark); }
.lgc-news__date i { margin-right: .35rem; color: var(--lgc-blue); }
.lgc-news__title { margin: 0 0 .6rem; font-family: var(--lgc-font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--lgc-ink); }
.lgc-news__text { margin: 0 0 1rem; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lgc-news__more { font-weight: 700; font-size: .9rem; color: var(--lgc-blue); text-decoration: none; border-bottom: 2px solid var(--lgc-gold); }
.lgc-news__more:hover { color: var(--lgc-gold-dark); }
.lgc-news__all, .lgc-news__empty { margin-top: 1.5rem; text-align: center; }

/* One row of four, for the home page */
.lgc-news-module--row .lgc-news { columns: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.lgc-news-module--row .lgc-news__card { margin: 0; }
.lgc-news-module--row .lgc-news__media img { aspect-ratio: 4 / 3; max-height: none; }

@media (max-width: 991px) {
	.lgc-news { columns: 2; }
	.lgc-news-module--row .lgc-news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lgc-news { columns: 1; }
	.lgc-news-module--row .lgc-news { grid-template-columns: 1fr; }
}

/* Small photo gallery, e.g. in the sidebar: thumbnails that open in the lightbox. */
.lgc-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lgc-gallery a { display: block; overflow: hidden; border-radius: 3px; cursor: zoom-in; }
.lgc-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s; }
.lgc-gallery a:hover img { transform: scale(1.06); }

/* Bootstrap's .g-5 gutter (3rem) is wider than the container padding on small
   screens, so its negative margins pushed every page 12px sideways on phones. */
@media (max-width: 991.98px) {
	.row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Lightbox arrows, shown when the picture belongs to a gallery. */
.lgc-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(14, 22, 51, .55);
  color: var(--lgc-white);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.lgc-lightbox__nav:hover, .lgc-lightbox__nav:focus-visible { background: var(--lgc-gold); border-color: var(--lgc-gold); }
.lgc-lightbox__nav.is-prev { left: 1rem; }
.lgc-lightbox__nav.is-next { right: 1rem; }
.lgc-lightbox__count {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: var(--lgc-fs-sm, .875rem);
  letter-spacing: .1em;
}

/* Band with a photo mosaic: the text on top, then the photos across the full
   width. The first photo is the big one; the columns and the wide tiles at
   the end are worked out in highlights_item.php so every row comes out full. */
.lgc-mosaic {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-auto-rows: clamp(9rem, 15vw, 14rem);
  gap: .75rem;
  margin: var(--lgc-space-6, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.lgc-mosaic > li:first-child { grid-column: span 2; grid-row: span 2; }
.lgc-mosaic > li.is-wide-2 { grid-column: span 2; }
.lgc-mosaic > li.is-wide-3 { grid-column: span 3; }
.lgc-mosaic > li.is-wide-4 { grid-column: span 4; }
.lgc-mosaic button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--lgc-radius);
  background: var(--lgc-sand);
  cursor: zoom-in;
}
.lgc-mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.lgc-mosaic button:hover img, .lgc-mosaic button:focus-visible img { transform: scale(1.04); }
@media (max-width: 767.98px) {
  .lgc-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; gap: .5rem; }
  .lgc-mosaic > li[class] { grid-column: span 1; }
  .lgc-mosaic > li:first-child { grid-column: span 2; grid-row: span 2; }
  .lgc-mosaic > li:last-child:nth-child(even) { grid-column: span 2; }
}

/* A band with a mosaic and nothing beside it: the text runs the full width. */
.lgc-band__text--wide .lgc-band__inner { max-width: none; }

/* YouTube clip beside a band's text, playing muted on a loop. */
.lgc-bandvideo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--lgc-radius);
  background: var(--lgc-blue-darker);
  box-shadow: 0 .5rem 1.5rem rgba(14, 22, 51, .15);
}
.lgc-bandvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================================
   Notre équipe (category layout "team")
   ========================================================================= */

.lgc-team__intro,
.lgc-team__outro {
  margin: var(--lgc-space-6, 3rem) 0;
}
@media (min-width: 992px) {
  .lgc-team__intro, .lgc-team__outro { max-width: 75%; }
}
.lgc-team__intro .lgc-lead { margin-bottom: var(--lgc-space-4, 1.5rem); }
.lgc-team__outro {
  padding-top: var(--lgc-space-6, 3rem);
  border-top: 1px solid var(--lgc-line);
}
.lgc-team__group { margin-top: var(--lgc-space-6, 3rem); }
.lgc-team__title { text-align: center; margin-bottom: var(--lgc-space-3, 1rem); }
.lgc-team__group .lgc-rule--center { margin-bottom: var(--lgc-space-5, 2rem); }

/* Portrait card. The whole card is the button that opens the dialog. */
.lgc-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 var(--lgc-space-4, 1.5rem);
  border: 1px solid var(--lgc-line);
  border-radius: var(--lgc-radius);
  background: var(--lgc-white);
  text-align: center;
  cursor: pointer;
  transition: box-shadow .3s, transform .3s;
}
.lgc-person:hover, .lgc-person:focus-visible { box-shadow: var(--lgc-shadow-lg); transform: translateY(-3px); }
.lgc-person__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--lgc-radius) var(--lgc-radius) 0 0;
  background: var(--lgc-sand);
}
.lgc-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s; }
.lgc-person:hover .lgc-person__photo img { transform: scale(1.04); }
.lgc-person__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--lgc-font-display, serif);
  font-size: 3.5rem;
  color: var(--lgc-gold);
  background: linear-gradient(135deg, var(--lgc-blue) 0%, var(--lgc-blue-darker) 100%);
}
.lgc-person__name {
  margin-top: var(--lgc-space-4, 1.5rem);
  padding: 0 1rem;
  font-family: var(--lgc-font-display, serif);
  font-size: 1.35rem;
  color: var(--lgc-ink);
}
.lgc-person__role {
  margin-top: .25rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lgc-gold-dark);
}
.lgc-person__since { margin-top: .25rem; font-size: .9rem; color: var(--lgc-muted); }
.lgc-person__more {
  margin-top: auto;
  padding-top: var(--lgc-space-3, 1rem);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lgc-blue);
}
.lgc-person__more::after { content: " \203A"; }

/* The full profile, in a native <dialog>. */
.lgc-dialog {
  width: min(92vw, 56rem);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: var(--lgc-radius-lg);
  box-shadow: var(--lgc-shadow-lg);
  overflow: auto;
}
.lgc-dialog::backdrop { background: rgba(14, 22, 51, .75); }
.lgc-dialog__grid { display: grid; grid-template-columns: 2fr 3fr; }
.lgc-dialog__grid > div:last-child { padding: var(--lgc-space-6, 3rem) var(--lgc-space-5, 2rem); text-align: left; }
.lgc-dialog .lgc-person__photo { height: 100%; aspect-ratio: auto; min-height: 22rem; border-radius: 0; }
.lgc-dialog h3 { margin-bottom: .25rem; }
.lgc-dialog .lgc-person__role, .lgc-dialog .lgc-person__since { margin-bottom: 0; }
.lgc-dialog__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--lgc-white);
  box-shadow: var(--lgc-shadow);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 767.98px) {
  .lgc-dialog__grid { grid-template-columns: 1fr; }
  .lgc-dialog .lgc-person__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .lgc-dialog__grid > div:last-child { padding: var(--lgc-space-5, 2rem) var(--lgc-space-4, 1.5rem); }
}

/* =========================================================================
   Rate cards (Tarifs & green-fees)
   ========================================================================= */

.lgc-rates { list-style: none; margin: 0; padding: 0; }
.lgc-rates li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--lgc-line); }
.lgc-rates li:last-child { border-bottom: 0; }
/* b and strong alike: Joomla's editor turns <b> into <strong> on save. */
.lgc-rates b, .lgc-rates li > strong { color: var(--lgc-blue); white-space: nowrap; font-weight: 700; }
.lgc-rates__gift { font-family: var(--lgc-font-display); font-style: italic; font-size: 1.2rem; color: var(--lgc-gold-dark) !important; }

.lgc-seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0 4rem; }
.lgc-season { padding: 2.25rem 2.25rem 1.5rem; border: 1px solid var(--lgc-line); border-top: 4px solid var(--lgc-gold); border-radius: var(--lgc-radius); background: var(--lgc-white); }
.lgc-season__name { margin: 0; font-family: var(--lgc-font-display); font-size: 2rem; line-height: 1.1; color: var(--lgc-blue); }
.lgc-season__dates { margin: .25rem 0 1.5rem; color: var(--lgc-muted); }
.lgc-season__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: .5rem; border-bottom: 1px solid var(--lgc-line); }
.lgc-season__prices span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lgc-gold-dark); }
.lgc-season__prices strong { display: block; font-family: var(--lgc-font-display); font-size: 3.25rem; font-weight: 600; line-height: 1.1; color: var(--lgc-blue); }
.lgc-season--high { background: var(--lgc-blue-darker); border-color: var(--lgc-blue-darker); border-top-color: var(--lgc-gold); color: rgba(255, 255, 255, .85); }
.lgc-season--high .lgc-season__name { color: var(--lgc-white); }
.lgc-season--high .lgc-season__dates { color: rgba(255, 255, 255, .6); }
.lgc-season--high .lgc-season__prices { border-color: rgba(212, 177, 96, .35); }
.lgc-season--high .lgc-season__prices span { color: var(--lgc-gold-light); }
.lgc-season--high .lgc-season__prices strong, .lgc-season--high .lgc-rates b, .lgc-season--high .lgc-rates li > strong { color: var(--lgc-gold-light); }
.lgc-season--high .lgc-rates li { border-color: rgba(255, 255, 255, .15); }

.lgc-ratecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1.5rem 0 4rem; }
.lgc-ratecards--two { grid-template-columns: repeat(2, 1fr); }
.lgc-ratecard { padding: 1.75rem 1.75rem 1.25rem; border: 1px solid var(--lgc-line); border-radius: var(--lgc-radius); background: var(--lgc-white); transition: box-shadow .3s, transform .3s; }
.lgc-ratecard:hover { box-shadow: var(--lgc-shadow); }
.lgc-ratecard h3 { margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 2px solid var(--lgc-gold); font-size: 1.5rem; color: var(--lgc-blue); }
.lgc-ratecard--lead { border-top: 4px solid var(--lgc-gold); }
.lgc-ratecard--lead h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: .25rem; }
.lgc-ratecard__price { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lgc-line); color: var(--lgc-muted); font-size: .9rem; }
.lgc-ratecard__price strong { display: block; font-family: var(--lgc-font-display); font-size: 2.6rem; font-weight: 600; line-height: 1.1; color: var(--lgc-blue); }

.lgc-join { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; margin: 1rem 0 2rem; padding: 2.75rem 3rem; border-radius: var(--lgc-radius); position: relative; overflow: hidden; background: var(--lgc-blue-darker); color: rgba(255, 255, 255, .85); }
.lgc-join::before { content: ""; position: absolute; left: -3rem; top: 50%; width: 16rem; height: 8rem; transform: translateY(-50%); background: url('../images/logo-light.svg') center top / 16rem auto no-repeat; opacity: .07; pointer-events: none; }
.lgc-join > * { position: relative; }
.lgc-join__eyebrow { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--lgc-gold-light); }
.lgc-join__title { margin: .35rem 0 .75rem; font-family: var(--lgc-font-display); font-size: 2rem; line-height: 1.15; color: var(--lgc-white); }
.lgc-join p:last-child { margin-bottom: 0; }
.lgc-join a:not(.btn) { color: var(--lgc-gold-light); }
.lgc-join__actions { display: flex; flex-direction: column; gap: .75rem; }

/* Linked cards to sub-pages (Pro-Shop: occasion, nouveautés, offres). */
.lgc-ratecards--links { clear: both; padding-top: 1rem; }
a.lgc-ratecard { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-top: 4px solid var(--lgc-gold); }
a.lgc-ratecard h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: .5rem; }
a.lgc-ratecard p { flex: 1 1 auto; color: var(--lgc-muted); }
a.lgc-ratecard .lgc-ratecard__more { flex: 0 0 auto; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lgc-gold-dark); }
a.lgc-ratecard:hover { transform: translateY(-3px); }
a.lgc-ratecard:hover .lgc-ratecard__more { color: var(--lgc-blue); }

@media (max-width: 991.98px) {
  .lgc-seasons, .lgc-ratecards, .lgc-ratecards--two, .lgc-join { grid-template-columns: 1fr; }
  .lgc-join { padding: 2rem 1.5rem; }
}