/* === heritage.css === */
/*
 * Les règles d'avant la refonte (l'ancien style.css), chargées en premier.
 * Beaucoup sont repeintes par jetons.css et socle.css, ou recouvertes par les
 * feuilles de pages et d'extensions. On les absorbe au fil de l'eau : une
 * règle qui déménage vers un fichier nommé quitte celui-ci.
 */
:root {
  --bg: #f4f7fb;
  --bg-soft: #e7eef6;
  --panel: #ffffff;
  --panel-strong: #d4dde9;
  --accent: #1c4a7a;
  --accent-2: #2d74a5;
  --accent-3: #3fa6bf;
  --accent-4: #61c7b5;
  --accent-5: #d8e3bf;
  --accent-6: #f0e6c9;
  --accent-rgb: 28, 74, 122;
  --accent-2-rgb: 45, 116, 165;
  --accent-3-rgb: 63, 166, 191;
  --accent-4-rgb: 97, 199, 181;
  --accent-5-rgb: 216, 227, 191;
  --accent-6-rgb: 240, 230, 201;
  --text: #1a2433;
  --muted: #516278;
  --card-radius: 12px;
  --shadow: 0 8px 18px rgba(16, 32, 53, 0.08);
  --max-width: 1160px;
  /* Column width for the article single view. Set to the full page measure so
     posts sit on exactly the same column as the standard content pages, which
     is the look the club settled on. The prev/next nav reads this same token
     (extensions/cnpr-instagram.css), so it follows automatically.
     The Instagram single view keeps its own narrower column: it is a different
     kind of content (short caption under a square visual), not long-form. */
  --article-width: var(--max-width);
}

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

body {
  margin: 0;
  font-family: "Source Sans 3", "Source Serif 4", sans-serif;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-3-rgb), 0.16) 0%,
    rgba(var(--accent-5-rgb), 0.2) 38%,
    rgba(var(--accent-6-rgb), 0.18) 68%,
    var(--bg) 100%
  );
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--accent-2);
}

.layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-strong);
  padding: 6px 0;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  white-space: nowrap;
}

.brand-logo {
  height: 36px;
  width: 36px;
  border-radius: 6px;
  background: var(--panel);
  padding: 6px;
  object-fit: contain;
}

.brand-text {
  font-size: 16px;
}

.menu-toggle {
  display: none;
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
}

nav.primary-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

nav.primary-nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  font-size: 14px;
  line-height: 1.2;
}

nav.primary-nav a:hover,
nav.primary-nav .current-menu-item > a {
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
}

nav.primary-nav .menu > .menu-item-has-children > a {
  padding-right: 18px;
}

nav.primary-nav .menu > .menu-item-has-children > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
}

nav.primary-nav li {
  position: relative;
}

nav.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px 12px;
  margin: 0;
  list-style: none;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 220px;
  width: max-content;
  z-index: 20;
}

nav.primary-nav li:hover > .sub-menu,
nav.primary-nav li:focus-within > .sub-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

nav.primary-nav .sub-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

nav.primary-nav .sub-menu a:hover {
  background: var(--panel-strong);
}

.hero {
  padding: 18px 0 70px;
}

.mobile-menu {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

body.mobile-menu-open {
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 75%) minmax(0, 25%);
  gap: 28px;
  align-items: stretch;
}

.home .hero {
  padding: 18px 0 18px;
}

.home .hero-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}

.home .hero-copy {
  padding: 24px;
}

.home .hero-calendar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home .hero-calendar__meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.home .hero-calendar__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.home .hero-calendar__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.home .hero-calendar__meta--closure .hero-calendar__label {
  color: #8a1f1f;
}

.home .hero-calendar__meta--closure .hero-calendar__label::before {
  background: #dc3545;
}

.home .hero-calendar__meta--closure .hero-calendar__period {
  color: #8a1f1f;
}

.home .hero-calendar__period {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.home .hero-calendar__event {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
  max-width: 100%;
  white-space: normal;
}

.home .hero-calendar__event--closure {
  background: rgba(220, 53, 69, 0.15);
  color: #8a1f1f;
}

.home .hero-calendar__event--event {
  background: rgba(var(--accent-2-rgb), 0.15);
  color: var(--accent);
}

.home .hero-calendar__event--info {
  background: rgba(40, 167, 69, 0.18);
  color: #1f6b35;
}

.home .hero-calendar__description {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.home .hero-copy .lead {
  max-width: none;
}

.home .cta-row {
  margin-top: 16px;
}

.home .showcase {
  padding: 16px 0 16px;
}

.home .section-heading {
  margin-bottom: 12px;
}

.home .card-grid,
.home .news-list {
  gap: 14px;
}

.hero-copy {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.hero-grid .quick-nav {
  height: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--accent-2-rgb), 0.12);
  border: 1px solid rgba(var(--accent-2-rgb), 0.2);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 16px 0 12px;
  line-height: 1.1;
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

h2,
h3,
h4 {
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 640px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(var(--accent-2-rgb), 0.2);
}

.btn-secondary {
  background: var(--panel);
  border-color: var(--panel-strong);
  color: var(--text);
}

.btn:hover {
  transform: translateY(-2px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 20px;
}

.showcase {
  padding: 40px 0 20px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: 26px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: var(--card-radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.card-title {
  font-size: 18px;
  margin: 0;
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

.card p {
  color: var(--muted);
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--muted);
  font-size: 13px;
}

/* Posts listing page. Longhands: the shorthand would wipe .layout's horizontal
   gutters, which is what an inline `padding: 70px 0 40px` used to do here. */
.blog-layout {
  padding-top: 18px;
  padding-bottom: 40px;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.news-list--blog {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.news-list--full {
  grid-template-columns: 1fr;
  gap: 22px;
}

.news-item {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-item__media {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft);
  /* 16:9, the format of the article visuals (cnpr-visuels): shown whole. */
  aspect-ratio: 16 / 9;
}

.news-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-item__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.news-item__cta {
  margin-top: auto;
  align-self: flex-start;
}

.news-list--blog .news-item {
  border-radius: 26px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 32, 54, 0.12);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-list--blog .news-card__body {
  flex: 1;
}

.news-list--blog .news-card__meta {
  margin-top: auto;
}

.news-card__media {
  display: block;
  background: var(--bg-soft);
  position: relative;
  /* 16:9, the format of the article visuals (cnpr-visuels): shown whole. */
  aspect-ratio: 16 / 9;
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.news-card__body {
  padding: 18px 22px 6px;
  display: grid;
  gap: 10px;
}

.news-card__pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 28px;
  align-items: center;
  overflow: hidden;
}

.news-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.news-card__pill--date {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--panel-strong);
}

.news-card__pill--cat {
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

.news-card__title a {
  color: var(--text);
}

.news-card__excerpt {
  margin: 0;
  color: var(--muted);
}

.news-card__excerpt .news-card__more {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.news-card__excerpt .news-card__more:hover {
  text-decoration: underline;
}

.news-card__meta {
  padding: 0 22px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.news-card__meta a {
  color: var(--text);
  font-weight: 600;
}

/* Blog listing pagination (/actu-du-club/). Scoped to the sibling right after the
   blog list so it does not affect archive/search paginations. */
.news-list--blog + .pagination {
  margin-top: 44px;
  width: 100%;
}

.news-list--blog + .pagination .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}

.news-list--blog + .pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.news-list--blog + .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--card-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-list--blog + .pagination a.page-numbers:hover {
  background: rgba(var(--accent-2-rgb), 0.12);
  border-color: rgba(var(--accent-2-rgb), 0.5);
  color: var(--accent);
  text-decoration: none;
}

.news-list--blog + .pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.news-list--blog + .pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--muted);
  pointer-events: none;
}

.news-list--blog + .pagination .prev.page-numbers,
.news-list--blog + .pagination .next.page-numbers {
  padding: 0 18px;
}

.cnpr-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 30, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cnpr-lightbox.is-open {
  opacity: 1;
}

.cnpr-lightbox__content {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  transform: translateY(6px) scale(0.98);
  transition: transform 0.2s ease;
}

.cnpr-lightbox.is-open .cnpr-lightbox__content {
  transform: translateY(0) scale(1);
}

.cnpr-lightbox__content img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: block;
}

.cnpr-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.news-item .entry-content {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.news-item .entry-content p {
  margin: 0 0 1em;
}

.news-item .entry-content a {
  color: var(--accent);
  font-weight: 600;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.page-content h2,
.page-content h3 {
  margin: 8px 0 6px;
}

/* h4 and below were orphans here: the global ramp only gives them a
   font-family, so they came out at body size, bold, with the browser's default
   1.33em margins stacked on top of this container's 16px flex gap. A sub-title
   ended up looking exactly like the bold sentence under it, and pushed a hole
   between the two. Size them down from h3 and hand them the same tight margins
   as their siblings so the gap stays the container's business. */
.page-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 0;
  color: var(--accent);
}

.page-content h5,
.page-content h6 {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0 0;
  color: var(--accent);
}

/* Same orphan story as the headings above: an editor's separator block landed
   here with no rule of its own, so it drew nothing and just ate a slot of the
   container's gap — a hole readers cannot tell apart from a mistake. Give it
   the panel border used everywhere else on the site. */
.page-content hr,
.page-content .wp-block-separator {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--panel-strong);
  margin: 8px 0;
}

.page-content p {
  margin: 0;
}

/* Standard content pages (page.php only, via the .page-standard hook): body
   copy in the ink colour instead of the muted card-preview grey, at the article
   reading size. Width is deliberately left to .layout so these pages keep the
   full page width they have always had. Scoped to .page-standard so the
   listing/search/bureau/calendar templates that share .page-content are
   untouched. */
.page-standard .page-content {
  font-size: 17px;
}

.page-standard .page-content p,
.page-standard .page-content li {
  color: var(--text);
}

.page-content form {
  background: var(--bg);
  border: 1px solid var(--panel-strong);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}

.page-content form p {
  margin: 0;
}

.page-content form input[type="text"],
.page-content form input[type="email"],
.page-content form input[type="tel"],
.page-content form input[type="url"],
.page-content form input[type="password"],
.page-content form textarea,
.page-content form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--panel-strong);
  background: #ffffff;
  font-size: 15px;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(var(--accent-3-rgb), 0.08);
}

.page-content form textarea {
  min-height: 120px;
  resize: vertical;
}

.page-content form input:focus,
.page-content form textarea:focus,
.page-content form select:focus {
  outline: none;
  border-color: rgba(var(--accent-2-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.15);
}

.page-content form input[type="submit"],
.page-content form button,
.page-content form .btn {
  justify-self: start;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(var(--accent-2-rgb), 0.25);
}

/* --- MailPoet subscription form (page Inscription Newsletter) ------------
   The block ships its own look as INLINE styles from the MailPoet form
   editor (Montserrat, #0081ff, 15px paddings), and the generic
   ".page-content form" card above then wraps it in a second frame inside
   the article.card. De-card the form so the page card is the only frame,
   and remap the inline palette onto the theme tokens — !important is
   required wherever the value comes from an inline style attribute. */
.page-content form.mailpoet_form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: block;
  max-width: 560px;
}
.page-content .mailpoet_form,
.page-content .mailpoet_form * {
  font-family: inherit !important;
}
.page-content .mailpoet_form h2.mailpoet-heading {
  color: var(--accent) !important;
  font-family: var(--soleil-titre, "Source Serif 4", serif) !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
}
.page-content .mailpoet_form .mailpoet_text,
.page-content .mailpoet_form .mailpoet_textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--panel-strong) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 15px !important;
  color: var(--text) !important;
  box-shadow: 0 10px 20px rgba(var(--accent-3-rgb), 0.08) !important;
}
.page-content .mailpoet_form .mailpoet_text:focus,
.page-content .mailpoet_form .mailpoet_textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-2-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.15) !important;
}
/* Inline border-radius carries !important in the block markup and cannot be
   overridden — the 40px pill happens to match the theme buttons, keep it. */
.page-content .mailpoet_form .mailpoet_submit {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 18px !important;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(var(--accent-2-rgb), 0.25);
  transition: background-color 0.15s ease;
}
.page-content .mailpoet_form .mailpoet_submit:hover {
  background-color: var(--accent-2) !important;
}
.page-content .mailpoet_form .mailpoet_paragraph:last-child p,
.page-content .mailpoet_form p {
  color: var(--muted);
}
.page-content .mailpoet_form a {
  color: var(--accent);
  font-weight: 600;
}

.page-content form input[type="submit"]:hover,
.page-content form button:hover,
.page-content form .btn:hover {
  transform: translateY(-1px);
}

/* Longhands: the shorthand would wipe .layout's horizontal gutters. */
.calendar-page {
  padding-top: 18px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calendar-hero {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: var(--card-radius);
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.calendar-hero::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -90px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(var(--accent-4-rgb), 0.2), transparent 70%);
}

.calendar-sections {
  display: grid;
  gap: 24px;
}

@media (max-width: 900px) {
  .home .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .news-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}


.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
}

.article-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.article-pill--date {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--panel-strong);
}

.article-pill--cat {
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
}

.news-item time {
  color: var(--muted);
  font-size: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
  font-weight: 600;
}

footer.site-footer {
  margin-top: 50px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--panel-strong);
  background: var(--bg-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel);
}

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--accent);
}

@media (max-width: 860px) {
  .nav-bar {
    align-items: flex-start;
  }

  nav.primary-nav ul {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  nav.primary-nav .sub-menu {
    position: static;
    display: block;
    padding: 6px 0 0 12px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  nav.primary-nav .sub-menu a {
    background: transparent;
    padding: 8px 0;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;
    height: 100vh;
    padding: 16px 18px 24px;
    background: var(--panel);
    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.2);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1001;
    overflow-y: auto;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
  }

  .mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu__close {
    align-self: flex-end;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
  }

  .mobile-menu ul,
  .mobile-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu a {
    display: block;
    background: var(--panel);
    padding: 12px;
    border-radius: 12px;
    color: var(--text);
  }

  /* Destination-less parents render as inert headings (CNPR_Walker_Inert_Parents).
     Styled as a group label, not a pale link: no card background, no radius, no
     pointer — nothing that invites a tap. */
  .mobile-menu .menu-heading__label {
    display: block;
    padding: 18px 2px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--panel-strong);
  }

  /* Indent the group under its heading. Top-level rows carry 12px of their own
     padding, so the children need more than that to read as nested rather than
     as siblings sitting further left. */
  .mobile-menu .menu-heading > .sub-menu {
    margin-top: 4px;
    padding-left: 24px;
  }

  .mobile-menu .sub-menu {
    margin-top: 8px;
    padding-left: 16px;
  }

  .mobile-menu .sub-menu a {
    background: transparent;
    padding: 8px 0;
    color: var(--muted);
  }

  .hero {
    padding-top: 60px;
  }
}

/* -------------------------------------------------------------------------
 * Details block (core) — used as a toggle heading on content pages.
 *
 * The default UA rendering is a small triangle beside plain body text, which
 * reads as a bullet list rather than a row of openable headings. These rules
 * give the summary the weight of the h3 it replaced and a chevron that turns
 * on open. No rule between siblings: the chevron and the accent-coloured bold
 * title already say "openable", so hairlines only added noise to a list whose
 * items are one click apart.
 * ---------------------------------------------------------------------- */
.wp-block-details {
  margin: 0;
}

.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none; /* Firefox */
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }

/* Chevron drawn in CSS: no icon font, no image request. */
.wp-block-details > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-left: 2px;
}
.wp-block-details[open] > summary::before {
  transform: rotate(45deg);
}

.wp-block-details > summary:hover { color: var(--accent-2); }
.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The panel is indented to the summary's text, so an open block reads as one
   unit rather than as content that escaped its heading. */
.wp-block-details[open] > *:not(summary) {
  margin-left: 18px;
}
.wp-block-details > *:not(summary):last-child { margin-bottom: 18px; }

/* === jetons.css === */
/*
 * Les jetons du thème : toutes les couleurs, polices et formes que le reste
 * du site lit. Changer de style commence ici.
 *
 * « Le soleil sur l'eau » (refonte du 23/09/2026). L'idée vient du logo : une
 * vague bleu ciel qui enroule un disque, lue comme un soleil posé sur l'eau.
 * - UNE seule audace : la ligne d'eau de l'accueil, où le soleil se couche
 *   dans le bassin. Le reste du site est calme : fonds blancs, aplats d'eau
 *   claire, pas d'ombres portées.
 * - Le jaune soleil est réservé à l'ACTION (s'inscrire, choisir). Il n'est
 *   jamais décoratif ailleurs que dans l'astre de l'accueil.
 * - La ligne de bouées (les flotteurs des lignes d'eau) sépare les grandes
 *   zones. C'est le vocabulaire du club, déjà présent sur ses visuels.
 *
 * Chargé APRÈS heritage.css : les jetons historiques (--accent, --panel…)
 * y sont repeints, et tout ce qui les lit suit, y compris les écrans de
 * l'extension d'inscription.
 */

:root {
  /* Les couleurs du logo. */
  --soleil-marine: #1e3f94;
  --soleil-piscine: #009fe0;
  --soleil-ciel: #5bc5f2;
  /* Dérivées : le bleu du fond du bassin (texte blanc lisible dessus),
     l'eau claire des aplats, l'encre du texte courant. */
  --soleil-fond: #0a6fb2;
  --soleil-eau: #eaf7fd;
  --soleil-eau-2: #d3eefb;
  --soleil-encre: #16284f;
  --soleil-gris: #4c5f80;
  /* L'astre. */
  --soleil-jaune: #ffc53d;
  --soleil-jaune-fonce: #f5a900;

  --soleil-titre: "Unbounded", "Figtree", system-ui, sans-serif;
  --soleil-texte: "Figtree", system-ui, sans-serif;

  /* Les jetons historiques, repeints : tout ce qui les lit suit. */
  --bg: #ffffff;
  --bg-soft: var(--soleil-eau);
  --panel: #ffffff;
  --panel-strong: var(--soleil-eau-2);
  --accent: var(--soleil-marine);
  --accent-2: #0a7cc4;
  --accent-3: var(--soleil-piscine);
  --accent-4: var(--soleil-ciel);
  --accent-rgb: 30, 63, 148;
  --accent-2-rgb: 10, 124, 196;
  --accent-3-rgb: 0, 159, 224;
  --accent-4-rgb: 91, 197, 242;
  --text: var(--soleil-encre);
  --muted: var(--soleil-gris);
  --card-radius: 20px;
  --shadow: none;
}

/* La ligne de bouées : des flotteurs ronds, bleu piscine et jaune, alternés
   deux par deux comme sur une vraie ligne d'eau. */
:root {
  --bouees:
    radial-gradient(circle at 5px 5px, var(--soleil-piscine) 4.5px, transparent 5px) 0 0 / 40px 10px repeat-x,
    radial-gradient(circle at 15px 5px, var(--soleil-piscine) 4.5px, transparent 5px) 0 0 / 40px 10px repeat-x,
    radial-gradient(circle at 25px 5px, var(--soleil-jaune) 4.5px, transparent 5px) 0 0 / 40px 10px repeat-x,
    radial-gradient(circle at 35px 5px, var(--soleil-jaune) 4.5px, transparent 5px) 0 0 / 40px 10px repeat-x;
}

/* LE CONTRAT AVEC LES EXTENSIONS DU CLUB (docs/theme-et-extensions.md).
   Leur style par défaut ne lit QUE ces jetons-ci, avec une valeur de repli :
   un autre thème qui les définit les habille à ses couleurs, sans toucher à
   leur code. Ajouter un jeton ici, c'est l'ajouter au contrat. */
:root {
  --cnpr-couleur-titre: var(--soleil-marine);
  --cnpr-couleur-texte: var(--soleil-encre);
  --cnpr-couleur-texte-doux: var(--soleil-gris);
  --cnpr-couleur-lien: var(--soleil-fond);
  --cnpr-couleur-accent: var(--soleil-piscine);
  --cnpr-couleur-accent-clair: var(--soleil-ciel);
  --cnpr-couleur-action: var(--soleil-jaune);
  --cnpr-couleur-action-survol: var(--soleil-jaune-fonce);
  --cnpr-couleur-sur-action: var(--soleil-marine);
  --cnpr-fond: #ffffff;
  --cnpr-fond-doux: var(--soleil-eau);
  --cnpr-filet: var(--soleil-eau-2);
  --cnpr-rayon: 20px;
  /* Les cartes de ce thème sont à plat. */
  --cnpr-ombre: none;
  --cnpr-police-titre: var(--soleil-titre);
  --cnpr-police-texte: var(--soleil-texte);
  /* La hauteur de l'en-tête collant : ce qui se colle en haut de l'écran
     (le nom d'un mois du calendrier…) se pose juste dessous. */
  --cnpr-decalage-haut: 110px;
}

/* === socle.css === */
/*
 * Le socle commun à toutes les pages : texte, titres, liens, boutons,
 * en-tête, titre de page, pied de page, menu mobile.
 */

/* La place de la barre de défilement est toujours réservée : quand la
   visionneuse ou le menu mobile bloquent le défilement, la barre disparaît, et
   sans cette réserve toute la page glissait de sa largeur vers la droite. */
html { scrollbar-gutter: stable; }

body {
  font-family: var(--soleil-texte);
  font-size: 17px;
  line-height: 1.6;
  background: #ffffff;
  color: var(--soleil-encre);
}

h1, h2, h3,
.card-title,
.section-heading h2 {
  font-family: var(--soleil-titre);
  font-weight: 600;
  color: var(--soleil-marine);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Où la ligne se coupe. Un titre se répartit en lignes égales au lieu de
   laisser un mot seul en bas (« S'inscrire, en trois / temps ») ; un
   paragraphe fait remonter un mot sur sa dernière ligne quand il y resterait
   seul. Un navigateur qui ne connaît pas ces règles coupe comme avant. */
h1, h2, h3, h4,
.card-title,
figcaption { text-wrap: balance; }
p, li, dd, dt, blockquote, td, th, label, small { text-wrap: pretty; }

/* Un mot composé ne se coupe pas à son trait d'union (inc/typographie.php).
   `display: contents` : l'enveloppe ne fait pas de boîte. Dans un lien ou un
   bouton en flex, elle serait devenue un élément à part, écarté du reste du
   texte (« Bien-être     aquatique ») ; ainsi le texte reste d'un seul
   tenant, et garde l'interdiction de couper.

   `!important`, ET C'EST LE SEUL SENS DE CETTE CLASSE : l'enveloppe est posée
   après coup sur n'importe quel texte, donc dans des blocs dont le CSS vise
   « tout span du bloc ». `.site-footer .footer-adresse span { display: block }`
   la mettait à la ligne (« 13610 Le » / « Puy-Sainte-Réparade », sur toutes
   les pages), `.boutique-achat__points span` la passait en gris sous son
   titre. Elle ne doit rien changer à l'affichage : ni boîte, ni couleur, ni
   police — tout vient du parent. */
.insecable-mot {
  display: contents !important;
  white-space: nowrap;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

a { color: #0a6fb2; }
a:hover { color: var(--soleil-marine); }

/* Une ancre arrive SOUS l'en-tête collant, pas dessous : sans cette marge, le
   titre visé (une activité, une question) finissait caché derrière lui. */
[id] { scroll-margin-top: var(--cnpr-decalage-haut, 110px); }

/* Lu par un lecteur d'écran, invisible à l'œil (la classe de WordPress). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--soleil-jaune-fonce);
  outline-offset: 3px;
}

/* --- Boutons --------------------------------------------------------------
   Le jaune = agir. Le contour marine = s'informer. Formes de galet (999px),
   la seule forme arrondie franche du site avec l'astre. */
.btn {
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--soleil-texte);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: none; }
.btn-primary,
.btn-soleil {
  background: var(--soleil-jaune);
  color: var(--soleil-marine);
  border: 2px solid var(--soleil-jaune);
  box-shadow: none;
}
.btn-primary:hover,
.btn-soleil:hover {
  background: var(--soleil-jaune-fonce);
  border-color: var(--soleil-jaune-fonce);
  color: var(--soleil-marine);
}
.btn-secondary {
  background: transparent;
  color: var(--soleil-marine);
  border: 2px solid var(--soleil-marine);
}
.btn-secondary:hover {
  background: var(--soleil-marine);
  color: #ffffff;
}

/* --- En-tête ------------------------------------------------------------- */
header.site-header {
  /* Opaque : à .96 le texte de la page transparaissait sous le menu collant. */
  background: #ffffff;
  border-bottom: 1px solid var(--soleil-eau-2);
  padding: 4px 0;
}
.brand { gap: 10px; }
.brand-logo {
  width: 48px;
  height: 46px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.brand-text {
  font-family: var(--soleil-titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--soleil-marine);
  line-height: 1.1;
}
.brand-text small {
  display: block;
  font-family: var(--soleil-texte);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--soleil-gris);
}
nav.primary-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--soleil-encre);
  border-radius: 999px;
  padding: 9px 13px;
}
nav.primary-nav a:hover,
nav.primary-nav .current-menu-item > a,
nav.primary-nav .current-menu-ancestor > a {
  background: var(--soleil-eau);
  color: var(--soleil-marine);
}
nav.primary-nav .sub-menu {
  border-radius: 16px;
  border-color: var(--soleil-eau-2);
  box-shadow: 0 14px 30px rgba(22, 40, 79, .10);
}
nav.primary-nav .sub-menu a { border-radius: 10px; font-weight: 500; }
nav.primary-nav .sub-menu a:hover { background: var(--soleil-eau); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 10px 18px; font-size: 15px; }
/* « S'inscrire » ne quitte l'en-tête que lorsque le bouton Menu le remplace
   (860 px) : il se retrouve alors en tête du menu ouvert. Entre les deux, on
   resserre la navigation plutôt que de perdre l'action principale. */
@media (max-width: 1080px) and (min-width: 861px) {
  .nav-bar { gap: 10px; }
  nav.primary-nav ul { gap: 0; }
  nav.primary-nav a { padding: 9px 6px; font-size: 14.5px; }
  .nav-actions .btn { padding: 9px 14px; }
}
@media (max-width: 860px) {
  .nav-actions .btn-inscrire { display: none; }
}
/* L'action principale en tête du menu ouvert : la règle générique des liens
   du menu (fond neutre, texte encre) ne doit pas l'éteindre. */
.mobile-menu__inscrire { display: none; }
@media (max-width: 860px) {
  .mobile-menu a.mobile-menu__inscrire {
    display: flex;
    justify-content: center;
    margin: 0 0 8px;
    padding: 14px 18px;
    border-radius: 999px;
    background: var(--soleil-jaune);
    color: var(--soleil-marine);
  }
}
/* « Mon espace » : contour marine à côté du jaune, qui reste l'action
   principale. Le pictogramme suit la couleur du texte, survol compris. */
.btn-espace { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.btn-espace__icone {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* Sur téléphone, et sur la plage serrée où la navigation est encore là, le
   libellé en toutes lettres renvoyait les boutons sous le logo : le
   pictogramme seul, rond ; le libellé reste lu par les lecteurs d'écran.
   En toutes lettres, il ne tient qu'à partir de 1 200 px. */
@media (max-width: 1199px) {
  .nav-actions .btn-espace {
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
  }
  .btn-espace__icone { width: 19px; height: 19px; }
  .btn-espace__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* Le logo et les deux boutons sur UNE ligne : la navigation d'ordinateur,
   vide sur téléphone, comptait encore un intervalle, et sous 400 px la marge
   de page se resserre. Au plus étroit, le nom du club passe à la ligne
   plutôt que de pousser les boutons dessous. */
@media (max-width: 860px) {
  nav.primary-nav { display: none; }
  .nav-bar { flex-wrap: nowrap; align-items: center; }
  .brand { min-width: 0; }
  .nav-actions { flex: none; gap: 8px; }
}
@media (max-width: 400px) {
  .site-header .layout { padding: 0 16px; }
  .nav-bar { gap: 8px; }
}
/* À côté de « Menu », sa jumelle : même hauteur, même pilule. */
@media (max-width: 860px) {
  .nav-actions .btn-espace { width: 52px; height: 35px; }
  .btn-espace__icone { width: 18px; height: 18px; }
}
/* Dans le menu ouvert, sous « S'inscrire », en toutes lettres. */
.mobile-menu__espace { display: none; }
@media (max-width: 860px) {
  .mobile-menu a.mobile-menu__espace {
    display: flex;
    justify-content: center;
    margin: 0 0 8px;
    padding: 12px 18px;
    border: 2px solid var(--soleil-marine);
    border-radius: 999px;
    background: #ffffff;
    color: var(--soleil-marine);
  }
}
.menu-toggle {
  border-radius: 999px;
  border: 2px solid var(--soleil-marine);
  color: var(--soleil-marine);
  font-weight: 700;
  padding: 8px 16px;
}

/* --- Pages intérieures ----------------------------------------------------
   Le titre de page se pose sur un aplat d'eau claire, fermé en bas par la
   ligne de bouées. La carte blanche qui suit n'a plus d'ombre. */
.page-standard,
.calendar-page { padding-top: 0; }
.calendar-hero {
  position: relative;
  margin: 28px 0 28px;
  padding: 40px 44px 46px;
  border-radius: 28px;
  background: var(--soleil-eau);
  overflow: hidden;
}
.calendar-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 48px);
  max-width: 20ch;
}
.calendar-hero .lead {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 19px;
  color: var(--soleil-gris);
}
.calendar-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--bouees);
}
/* Avec une photo : le texte à gauche, la photo à droite jusqu'aux bords de
   l'aplat, et la ligne de bouées qui passe dessous comme le bord du bassin. */
.calendar-hero--photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: 40px;
  padding: 0;
}
.calendar-hero__texte { align-self: center; padding: 40px 0 46px 44px; }
.calendar-hero__photo { position: relative; min-height: 280px; }
.calendar-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.calendar-hero--photo::after { z-index: 1; }
.calendar-hero__credit {
  position: absolute;
  right: 12px;
  bottom: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: #ffffff;
  background: rgba(0, 0, 0, .45);
}

.card {
  border: 1px solid var(--soleil-eau-2);
  border-radius: 24px;
  box-shadow: none;
}
.page-content h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-top: 1.6em;
}
.page-content h3 { font-size: 20px; }


.bouees {
  height: 10px;
  background: var(--bouees);
  border: 0;
  margin: 0;
}

/* --- Pied de page -------------------------------------------------------- */
/* footer.site-footer : style.css pose déjà ce sélecteur (0,1,1), une seule
   classe ici perdrait le fond. */
footer.site-footer {
  margin-top: 80px;
  padding: 56px 0 30px;
  background: var(--soleil-marine);
  color: #dbe7ff;
  border-top: 0;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  background: var(--bouees);
}
.site-footer strong { color: #ffffff; font-family: var(--soleil-titre); font-weight: 600; font-size: 15px; }
.site-footer a { color: #ffffff; }
.site-footer .footer-links a { color: #dbe7ff; }
.site-footer .footer-adresse {
  margin: 12px 0 0;
  font-style: normal;
  line-height: 1.55;
  color: #b9cbf0;
}
.site-footer .footer-adresse span { display: block; }
.site-footer .footer-joindre { list-style: none; margin: 10px 0 0; padding: 0; line-height: 1.8; }
.site-footer .footer-joindre a { font-weight: 600; text-decoration: none; }
.site-footer .footer-joindre a:hover { color: var(--soleil-jaune); }
.site-footer .footer-links a:hover { color: var(--soleil-jaune); }
.site-footer .pill {
  background: none;
  padding: 0;
  font-family: var(--soleil-titre);
  font-size: 20px;
  color: #ffffff;
}
.site-footer p,
.site-footer .layout[style] { color: #b9cbf0 !important; }
.site-footer .social a {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffffff;
  border-radius: 999px;
}
.site-footer .social a:hover { background: rgba(255, 255, 255, .16); }
.site-footer .social svg { fill: currentColor; }


@media (max-width: 860px) {
  .calendar-hero { padding: 28px 24px 34px; border-radius: 22px; }
  .calendar-hero--photo { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .calendar-hero__texte { padding: 28px 24px 24px; }
  .calendar-hero__photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Les boutons de l'éditeur de blocs (« S'inscrire en ligne » sur la page des
   tarifs) parlent la même langue que ceux du thème. */
.page-content .wp-block-button__link {
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--soleil-jaune);
  color: var(--soleil-marine);
  font-weight: 700;
}
.page-content .wp-block-button__link:hover { background: var(--soleil-jaune-fonce); color: var(--soleil-marine); }
.page-content h4 { font-family: var(--soleil-titre); font-size: 17px; color: var(--soleil-marine); }

/* =========================================================================
   Menu mobile fermé : il attend hors écran, à droite. Son ombre portée,
   elle, débordait dans la page et posait une bande grise sur le bord droit
   de tous les écrans — le contenu paraissait décentré. Fermé, il n'a ni
   ombre ni présence (visibility : ses liens ne se tabulent plus non plus).
   ========================================================================= */
@media (max-width: 1024px) {
  body .mobile-menu:not(.open) {
    box-shadow: none;
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  body .mobile-menu.open { visibility: visible; }
}

/* Formulaires MailPoet (« Rejoignez le club » sur l'accueil, la page
   Newsletter) : leur éditeur les écrit en Montserrat, en style en ligne —
   d'où !important. Le thème ne charge plus ces polices (inc/styles-et-scripts.php) :
   les formulaires prennent la police du texte du site, titres compris : celle
   des titres, très large, mettait celui de la fenêtre sur cinq lignes. */
.mailpoet_form,
.mailpoet_form * { font-family: var(--soleil-texte) !important; }