/* ── VARIABLES ── */
:root {
  --gold: #f4a01a;
  --gold-dark: #c07d0e;
  --gold-dim: rgba(244,160,26,0.15);
  --gold-border: rgba(244,160,26,0.25);
  --bg: #0e0e0e;
  --bg-card: #171717;
  --bg-nav: rgba(10,10,10,0.97);
  --bg-top: #080808;
  --bg-input: #1a1a1a;
  --bg-dropdown: #111111;
  --bg-alt: #1f1f1f;
  --text: #f0f0f0;
  --text-muted: rgba(240,240,240,0.45);
  --border: rgba(255,255,255,0.06);
  --border-alt: rgba(255,255,255,0.07);
  --hover-nav: rgba(255,255,255,0.05);
  --radius: 10px;
}

/* ── MODE CLAIR ── */
body.light-mode {
  --bg: #c4c4c4;
  --bg-card: #d0d0d0;
  --bg-nav: rgba(196,196,196,0.97);
  --bg-top: #b4b4b4;
  --bg-input: #c0c0c0;
  --bg-dropdown: #b8b8b8;
  --bg-alt: #bcbcbc;
  --text: #000000;
  --text-muted: rgba(0,0,0,0.65);
  --border: rgba(0,0,0,0.15);
  --border-alt: rgba(0,0,0,0.12);
  --hover-nav: rgba(0,0,0,0.07);
  --gold-border: rgba(244,160,26,0.6);
  --gold-dim: rgba(244,160,26,0.2);
}

/* ── OVERRIDES MODE CLAIR ── */
body.light-mode #sp-menu .nav-link,
body.light-mode #sp-menu .sp-menu-item > a,
body.light-mode #sp-menu .menu-item > a,
body.light-mode #sp-menu nav > ul > li > a {
  color: #000000 !important;
  font-weight: 600 !important;
}
body.light-mode #sp-menu .nav-link:hover,
body.light-mode #sp-menu .sp-menu-item > a:hover,
body.light-mode #sp-menu .menu-item > a:hover,
body.light-mode #sp-menu nav > ul > li > a:hover,
body.light-mode #sp-menu .nav-link.active,
body.light-mode #sp-menu .sp-menu-item.active > a,
body.light-mode #sp-menu .current > a {
  color: #000000 !important;
}
body.light-mode a {
  color: #1a3a8a !important;
}
body.light-mode a:hover {
  color: #000000 !important;
}

/* ── GLOBAL ── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
}

a { color: var(--gold); }
a:hover { color: var(--gold-dark); }

/* ── TOP BAR ── */
#sp-top-bar {
  background: var(--bg-top) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
#sp-top-bar a {
  color: var(--text-muted) !important;
}
#sp-top-bar a:hover {
  color: var(--gold) !important;
}

/* ── HEADER / NAV ── */
#sp-header {
  background: var(--bg-nav) !important;
  border-bottom: 1px solid var(--gold-border) !important;
  backdrop-filter: blur(12px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

/* Contenir le logo dans le header sans le clipper */
#sp-header .logo {
  height: 50px !important;
}
.logo-image,
.logo-image-phone {
  height: 44px !important;
  width: auto !important;
}
#sp-header .row {
  min-height: 50px !important;
  align-items: center !important;
}

/* Logo texte */
#sp-logo .sp-logo-text,
#sp-logo a {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--gold) !important;
  letter-spacing: 1px !important;
}

/* Liens de navigation */
#sp-menu .nav-link,
#sp-menu .sp-menu-item > a,
#sp-menu .menu-item > a,
#sp-menu nav > ul > li > a {
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 7px 13px !important;
  border-radius: 7px !important;
  transition: color 0.15s, background 0.15s !important;
}
#sp-menu .nav-link:hover,
#sp-menu .sp-menu-item > a:hover,
#sp-menu .menu-item > a:hover,
#sp-menu nav > ul > li > a:hover,
#sp-menu .nav-link.active,
#sp-menu .sp-menu-item.active > a,
#sp-menu .current > a {
  color: var(--text) !important;
  background: var(--hover-nav) !important;
}

/* Bouton Connexion dans le header */
#sp-menu .login-button a,
#sp-menu a[href*="login"],
#sp-menu .btn-login,
.header-modules a[href*="login"] {
  background: var(--gold) !important;
  color: #111 !important;
  font-weight: 700 !important;
  padding: 7px 18px !important;
  border-radius: 7px !important;
  margin-left: 8px !important;
}
#sp-menu .login-button a:hover,
#sp-menu a[href*="login"]:hover {
  background: var(--gold-dark) !important;
  color: #111 !important;
}

/* Dropdown menus — Helix Ultimate utilise .sp-dropdown, pas .dropdown-menu */
.sp-dropdown,
.sp-dropdown-main,
.sp-dropdown-sub,
.sp-dropdown-inner,
.sp-dropdown-mega {
  background: var(--bg-dropdown) !important;
  background-color: var(--bg-dropdown) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
.sp-dropdown a,
.sp-dropdown-inner a,
.sp-dropdown-items a,
.sp-dropdown li a,
.sp-dropdown li > a {
  color: var(--text-muted) !important;
  background: transparent !important;
  font-size: 13px !important;
}
.sp-dropdown a:hover,
.sp-dropdown-inner a:hover,
.sp-dropdown li a:hover {
  background: rgba(244,160,26,0.1) !important;
  color: var(--gold) !important;
}
/* Fallback Bootstrap dropdown */
.dropdown-menu,
ul.dropdown-menu {
  background: var(--bg-dropdown) !important;
  background-color: var(--bg-dropdown) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--radius) !important;
}
.dropdown-item,
.dropdown-menu a,
.dropdown-menu li a {
  color: var(--text-muted) !important;
  background: transparent !important;
}
.dropdown-item:hover,
.dropdown-menu a:hover {
  background: rgba(244,160,26,0.1) !important;
  color: var(--gold) !important;
}

/* Burger menu mobile */
.burger-icon span {
  background: var(--text) !important;
}

/* ── CONTENU PRINCIPAL ── */
html,
body,
.body-wrapper,
.body-innerwrapper,
#sp-main,
.sp-column,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,
.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8,
.col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.row, .container, .container-inner {
  background: var(--bg) !important;
}

/* ── CK PAGE BUILDER ── */
.pagebuilderck,
.pagebuilderck .ckrow,
.pagebuilderck .ckrow .ckcol,
.pagebuilderck section,
.pagebuilderck > div {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Titres */
.pagebuilderck h1,
.pagebuilderck h2,
.pagebuilderck h3,
.pagebuilderck h4,
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1px !important;
}

/* Texte courant */
.pagebuilderck p,
p:not(.ic-full-description *):not(.ic-short-description *) {
  color: var(--text-muted) !important;
  line-height: 1.65 !important;
}

/* SP Page Builder (si présent) */
.sppb-section {
  background: var(--bg) !important;
}
.sppb-addon-title {
  color: var(--text) !important;
  font-family: 'Bebas Neue', sans-serif !important;
}

/* ── MODULES SIDEBAR ── */
.sp-module {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
/* Annuler le style carte pour les modules dans le header */
#sp-header .sp-module,
#sp-header .sp-module-title {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* Annuler le style carte pour les modules dans le footer */
#sp-footer .sp-module,
#sp-footer .sp-module-title,
footer#sp-footer .sp-module {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
#sp-footer .sp-column {
  background: transparent !important;
}
.sp-module .sp-module-title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--text) !important;
  font-size: 20px !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

/* ── MODULE AGENDA : padding réduit pour que le calendrier tienne ── */
.sp-module.agenda-compact {
  padding: 8px !important;
}

/* Nav iCagenda (nouveau module mod_icagenda_calendar) :
   .ic-calendar-nav-selectors est display:block avec deux enfants inline-block
   mois(~114px) + année(~100px) = 214px > 192px → l'année se replie.
   Fix : passer en flex + annuler les styles form globaux qui gonflent les éléments. */
.ic-calendar-nav-selectors {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ic-calendar-nav-month,
.ic-calendar-nav-year {
  flex: 1 !important;
  min-width: 0 !important;
}
.ic-calendar-month-dropdown,
.ic-calendar-year-input {
  width: 100% !important;
  font-size: 0.875rem !important;
  padding: 0.2rem 0.3rem !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* ── ICAGENDA : calendrier responsive (empêche le débordement) ──
   NB: la table a class="ic-table", ce n'est PAS un div wrapper.
   Sélecteur correct : .iccalendar table.ic-table (pas .ic-table table) */
.iccalendar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
/* La table ELLE-MÊME a class="ic-table" */
.iccalendar table.ic-table,
table#icagenda_calendar {
  width: 100% !important;
  table-layout: fixed !important;
  max-width: 100% !important;
}
.iccalendar table.ic-table th,
.iccalendar table.ic-table td {
  padding: 1px !important;
}
.iccalendar table.ic-table td div {
  font-size: 9px !important;
  line-height: 18px !important;
  width: auto !important;
}
/* Réduire le padding du module contenant le calendrier */
.sp-module:has(.iccalendar) {
  padding: 8px !important;
}

/* ── MODULE ÉVÉNEMENTS À VENIR (mod_ic_event_list — layout icrounded) ── */
/* Le color-mix(currentColor) d'iCagenda crée un fond blanc quand le texte hérite du blanc du body */
.icrounded_eventlist {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  transition: all 0.3s !important;
}
.icrounded_eventlist:nth-child(2n+1) {
  background: var(--bg-alt) !important;
}
.icrounded_eventlist:hover {
  background: rgba(244,160,26,0.08) !important;
  color: var(--text) !important;
}
.icrounded_eventlist a,
.icrounded_eventlist a:link,
.icrounded_eventlist a:visited {
  color: var(--text) !important;
  text-decoration: none !important;
}
.icrounded_eventlist a:hover {
  color: var(--gold) !important;
}
.icrounded_eventlist .iceventlist-venue,
.icrounded_eventlist .iceventlist-city,
.icrounded_eventlist .ic-datetime-div,
.icrounded_eventlist .ic-datetime-label,
.icrounded_eventlist .iceventlist-desc {
  color: var(--text-muted) !important;
}

/* ── MODULE ÉVÉNEMENTS (layout default) ── */
.default_eventlist {
  color: var(--text) !important;
}
.default_eventlist .iceventlist-title a {
  color: var(--text) !important;
}
.default_eventlist .iceventlist-title a:hover {
  color: var(--gold) !important;
}
.default_eventlist .iceventlist-venue,
.default_eventlist .iceventlist-city,
.default_eventlist .ic-datetime-div,
.default_eventlist .ic-datetime-label,
.default_eventlist .iceventlist-desc {
  color: var(--text-muted) !important;
}
.default_eventlist hr {
  border-color: var(--border) !important;
  opacity: 1 !important;
}

/* ── ÉVÉNEMENTS iCAGENDA ── */
.ical_list_event {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 8px !important;
  padding: 8px !important;
}
.ical_list_event:hover {
  border-color: var(--gold-border) !important;
}
.ical_list_event a {
  color: var(--text) !important;
}
.ical_list_event a:hover {
  color: var(--gold) !important;
}
/* Numéro du jour */
.ical_list_event .ical_date_number {
  color: var(--gold) !important;
  font-family: 'Bebas Neue', sans-serif !important;
}

/* ── ARTICLES ── */
.com-content-article__body,
.article-info,
.com-content-categories-blog article {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}

/* ── BOUTONS ── */
.btn-primary,
.sppb-btn-primary,
input[type="submit"] {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #111 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}
.btn-primary:hover,
.sppb-btn-primary:hover {
  background: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
  color: #111 !important;
}

/* ── FORMULAIRES ── */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 7px !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--gold-border) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--gold-dim) !important;
}

/* ── MODULE LOGIN CB ── */
.cbLoginForm {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}

/* ── FOOTER ── */
#sp-footer,
footer#sp-footer,
.sp-footer {
  background: var(--bg-top) !important;
  border-top: 1px solid var(--gold-border) !important;
  color: var(--text-muted) !important;
  padding: 28px 40px !important;
}
#sp-footer a,
.sp-footer a {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
#sp-footer a:hover,
.sp-footer a:hover {
  color: var(--gold) !important;
}

/* ══════════════════════════════════════════════
   MODULES CUSTOM — CLASSES PARTAGÉES
   ══════════════════════════════════════════════ */

/* Conteneur carte sombre */
.hrc-card {
  overflow-x: auto;
  margin: 16px auto;
  background: var(--bg-card);
  color: var(--text);
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  font-family: 'DM Sans', Arial, sans-serif;
}

/* Tableau sombre */
.hrc-table {
  border-collapse: collapse !important;
  width: 100% !important;
}
.hrc-table th,
.hrc-table td {
  border: 1px solid var(--border-alt) !important;
  padding: 10px 12px !important;
  text-align: center !important;
}
.hrc-table th {
  background: var(--gold-dark) !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.hrc-table td {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
.hrc-table tbody tr:nth-child(even) td {
  background: var(--bg-alt) !important;
}
.hrc-table tbody tr:hover td {
  background: var(--gold-dim) !important;
}

/* Bouton doré */
.hrc-btn {
  display: inline-block !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  background: var(--gold) !important;
  border: none !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}
.hrc-btn:hover {
  background: var(--gold-dark) !important;
  color: #111 !important;
}

/* Groupe de boutons */
.hrc-btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}

/* Onglets */
.hrc-tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid var(--gold-dark);
  gap: 4px;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.hrc-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--gold-dark);
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.hrc-tab.active {
  background: var(--gold);
  color: #0e0e0e;
  border-color: var(--gold);
}
.hrc-tab-content { display: none; }
.hrc-tab-content.active { display: block; }

/* ── mod_part — styles spécifiques ── */
#modpart-container { padding: 10px 0; }
#modpart-container select,
#part_id {
  margin: 10px 0;
  padding: 8px 12px;
  width: 250px;
  display: inline-block;
}
@media (max-width: 600px) {
  #modpart-container select,
  #part_id { width: 100%; }
}
#table-container { max-width: 1000px; }
.caption-center {
  caption-side: top;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.4em;
  font-weight: bold;
  color: var(--text);
}
#result-container {
  color: var(--text-muted);
  font-size: 14px;
  margin: 10px 0 16px;
  line-height: 1.7;
}
#result-container strong,
#result-container b { color: var(--gold); }

/* ── mod_uslst — styles spécifiques ── */
#uslst-table-container { max-width: 1200px; }
#uslst-table-container caption {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 12px;
  text-align: left;
}
#uslst-table-container .hrc-table th,
#uslst-table-container .hrc-table td { white-space: nowrap; }
#uslst-table-container .hrc-hog-expired { color: #dc3545 !important; font-weight: 600; }
#uslst-table-container .hrc-hog-current { color: #ff9f1c !important; font-weight: 600; }

.uslst-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 80px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.7);
}
.uslst-modal-content {
  margin: auto;
  width: 80%;
  max-width: 800px;
}
.uslst-close {
  color: var(--text-muted);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.uslst-close:hover { color: var(--gold); }

/* ── mod_monbilan — styles spécifiques ── */
#modpart-monbilan .hrc-table {
  border: 1px solid var(--gold-dark);
  margin: 20px 0;
}
#modpart-monbilan .hrc-table th {
  background: var(--bg-card);
  color: var(--gold);
}
#modpart-monbilan .center-title {
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5em;
  margin: 20px 0;
  color: var(--gold);
}
@media (max-width: 768px) {
  #modpart-monbilan .hrc-table thead { display: none; }
  #modpart-monbilan .hrc-table,
  #modpart-monbilan .hrc-table tbody,
  #modpart-monbilan .hrc-table tr,
  #modpart-monbilan .hrc-table td {
    display: block;
    width: 100%;
  }
  #modpart-monbilan .hrc-table tr {
    margin-bottom: 15px;
    border: 1px solid var(--gold-dark);
    padding: 10px;
    background: var(--bg-card);
    border-radius: 6px;
  }
  #modpart-monbilan .hrc-table td {
    text-align: left;
    padding-left: 40%;
    position: relative;
    border: none;
    border-bottom: 1px solid var(--border-alt);
  }
  #modpart-monbilan .hrc-table td:last-child { border-bottom: none; }
  #modpart-monbilan .hrc-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px; top: 8px;
    font-weight: bold;
    color: var(--gold);
  }
}

/* ── SCROLL TO TOP ── */
.sp-scroll-up {
  background: var(--gold) !important;
  color: #111 !important;
  border-radius: 8px !important;
}

/* ── OFFCANVAS (mobile menu) ── */
.offcanvas-menu {
  background: var(--bg-dropdown) !important;
  border-right: 1px solid var(--border) !important;
}
.offcanvas-menu a {
  color: var(--text-muted) !important;
}
.offcanvas-menu a:hover {
  color: var(--gold) !important;
}

/* ── HERO / POSITIONS HELIX ── */
#sp-position-1, #sp-position-2, #sp-position-3,
#sp-top, #sp-banner, #sp-slideshow,
[id^="sp-position-"],
.lmmq-out, .lmmq-h-left, .lmmq-h-right, .lmmq-h-center,
[class*="lmmq-"],
.sp-section-1, .sp-section-2, .sp-section-3,
[class*="sp-section-"] {
  background: var(--bg) !important;
}

/* ── STATS / COMPTEURS ── */
.counter-box, .count-box, .counterup-box,
.counter, .count, .counterup,
.counter-value, .count-number, .counter-number,
.odometer, .timer, .stat-number,
[class*="counter"] span,
[class*="count"] .number {
  color: var(--gold) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
}
[class*="counter"] .label,
[class*="counter"] .title,
[class*="count"] .label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
/* Liens bleus dans les stats */
.pagebuilderck a,
.pagebuilderck .col a {
  color: var(--gold) !important;
}

/* ── TABS "RUN À VENIR" ── */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item a {
  color: var(--text-muted) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px 7px 0 0 !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item a.active {
  color: var(--gold) !important;
  background: var(--bg) !important;
  border-color: var(--gold-border) !important;
  border-bottom-color: var(--bg) !important;
}
.tab-content {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  padding: 16px !important;
}
.tab-pane {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.tab-pane a {
  color: var(--gold) !important;
}

/* ── FORCER FOND SOMBRE SUR TOUS LES WRAPPERS ── */
/* Ciblé en dernier pour avoir la priorité maximale */
body > div,
body > div > div,
body > div > div > div,
#sp-main > div,
#sp-main > div > div,
#sp-main > section,
#sp-main > section > div {
  background: var(--bg) !important;
}

/* Exceptions : éléments qui ont leur propre fond voulu */
#sp-header,
#sp-header .container,
#sp-header .container-inner,
#sp-header .row,
#sp-top-bar,
#sp-top-bar .container,
#sp-footer,
#sp-footer .container {
  background: revert !important;
}
#sp-header { background: var(--bg-nav) !important; }
#sp-top-bar { background: var(--bg-top) !important; }
#sp-footer, footer#sp-footer { background: var(--bg-top) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #sp-header {
    padding: 0 20px !important;
  }
}

/* ══════════════════════════════════════════════
   CORRECTIONS LOGO / MENU / BANNIÈRE
   ══════════════════════════════════════════════ */

/* Fix 1 — LOGO : supprimer le fond sombre des colonnes dans le header
   La règle .sp-column { background: var(--bg) } créait un bloc opaque
   visible contre le fond translucide du header avec backdrop-filter. */
#sp-header .sp-column {
  background: transparent !important;
}

/* Fix 2 — BANNIÈRE : empêcher le débordement horizontal du slideshow
   camera_wrap utilisait box-sizing: content-box avec une largeur fixe,
   ce qui le faisait dépasser la largeur du viewport. */
.camera_wrap,
.slideshowck {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Fix 3 — OVERFLOW GLOBAL : couper tout dépassement horizontal
   Utilise overflow-x: clip (ne crée pas de scroll container)
   pour ne pas casser le position: sticky du header. */
.body-wrapper,
.body-innerwrapper {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

/* ── MENU UTILISATEUR (dropdown Sébastien Vignal) ── */
.sp-profile-dropdown {
  background: var(--bg-nav) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  min-width: 160px !important;
}
.sp-profile-dropdown li a,
.sp-profile-dropdown .mod-menu a {
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: color 0.15s, background 0.15s !important;
}
.sp-profile-dropdown li a:hover,
.sp-profile-dropdown .mod-menu a:hover {
  color: var(--gold) !important;
  background: rgba(244,160,26,0.08) !important;
}
.sp-profile-dropdown > li:not(:last-child) {
  border-bottom-color: var(--border) !important;
}
/* Logout reste doré */
.sp-profile-dropdown li a[href*="logout"] {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* ── MAILLIST (article sélection e-mails) ── */
#maillist-wrap {
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--text) !important;
  padding: 10px 0;
}
#maillist-wrap h2 {
  text-align: center;
  color: var(--text) !important;
  margin-bottom: 14px;
  font-size: 1.3em;
}
.maillist-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.maillist-btn-group button {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700 !important;
  background: var(--gold) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s;
}
.maillist-btn-group button:hover {
  background: var(--gold-dark) !important;
}
.maillist-table-wrap {
  overflow-x: auto;
  margin: 0 auto 20px auto;
  max-width: 700px;
  background: var(--bg-card) !important;
  border-radius: 10px;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 16px;
}
.custom-table {
  border-collapse: collapse !important;
  width: 100%;
}
.custom-table th,
.custom-table td {
  border: 1px solid var(--border-alt) !important;
  padding: 9px 12px;
  text-align: center;
}
.custom-table th {
  background: var(--gold-dark) !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.custom-table td {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
.custom-table tbody tr:nth-child(even) td {
  background: var(--bg-alt) !important;
}
.custom-table tbody tr:hover td {
  background: rgba(244,160,26,0.08) !important;
}

/* ── SMSLST (article sélection numéros SMS) ── */
.smslst-btn-group {
  text-align: center;
  margin-bottom: 10px;
}
.smslst-btn-group button {
  margin-right: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700 !important;
  background: var(--gold) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s;
}
.smslst-btn-group button:hover {
  background: var(--gold-dark) !important;
}
.smslst-container {
  overflow-x: auto;
  text-align: center;
  margin-bottom: 20px;
}
#table-title {
  text-align: center;
  margin-bottom: 10px;
  color: var(--text) !important;
}
.smslst-table {
  border: 2px solid var(--gold-border) !important;
  border-collapse: collapse !important;
  width: 80%;
  max-width: 800px;
  margin: 0 auto 20px auto;
}
.smslst-table th,
.smslst-table td {
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--border-alt) !important;
  padding: 5px;
  text-align: center;
}
.smslst-table th {
  background: var(--gold-dark) !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.smslst-table td {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
.smslst-table tbody tr:nth-child(even) td {
  background: var(--bg-alt) !important;
}
.smslst-table tbody tr:hover td {
  background: rgba(244,160,26,0.08) !important;
}

/* ── SMSLIST (article sélection numéros SMS) ── */
#smslist-wrap {
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--text) !important;
  padding: 10px 0;
}
#smslist-wrap .button-group {
  text-align: center;
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
#smslist-wrap button {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700 !important;
  background: var(--gold) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s;
}
#smslist-wrap button:hover {
  background: var(--gold-dark) !important;
}
#smslist-wrap h2 {
  text-align: center;
  color: var(--text) !important;
  margin-bottom: 12px;
  font-size: 1.3em;
}
.smslist-table-wrap {
  overflow-x: auto;
  margin: 0 auto 20px auto;
  max-width: 700px;
  background: var(--bg-card) !important;
  border-radius: 10px;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 16px;
}

/* ══════════════════════════════════════════════
   PAGE "CONSEILS & SÉCURITÉ" (itemid-170)
   Alignement sur le thème gold/dark-light du site
   (par défaut le layout carte utilise les couleurs Bootstrap génériques)
   ══════════════════════════════════════════════ */
body.itemid-170 .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
body.itemid-170 .card-title,
body.itemid-170 .card-title a {
  color: var(--text) !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}
body.itemid-170 .card-title a:hover {
  color: var(--gold) !important;
}
body.itemid-170 .card .btn-secondary {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #111 !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  border-radius: 8px !important;
}
body.itemid-170 .card .btn-secondary:hover {
  background: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
  color: #111 !important;
}
body.itemid-170 .card img {
  border-radius: var(--radius) 0 0 var(--radius) !important;
}

/* ══════════════════════════════════════════════
   PAGE "CHAPTER & H.O.G" (itemid-167)
   Alignement sur le thème gold/dark-light du site
   ══════════════════════════════════════════════ */
body.itemid-167 .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
body.itemid-167 .card-title,
body.itemid-167 .card-title a {
  color: var(--text) !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}
body.itemid-167 .card-title a:hover {
  color: var(--gold) !important;
}
body.itemid-167 .card .btn-secondary {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #111 !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  border-radius: 8px !important;
}
body.itemid-167 .card .btn-secondary:hover {
  background: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
  color: #111 !important;
}
body.itemid-167 .card img {
  border-radius: var(--radius) 0 0 var(--radius) !important;
}

/* ── WIDGET "RUN à venir" (mod_nextruns) ── */
.hrc-run-upcoming {
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--gold-dim), transparent 60%);
  font-family: Helvetica, Arial, sans-serif;
}
.hrc-run-upcoming .hrc-ru-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gold-border);
}
.hrc-run-upcoming .hrc-ru-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hrc-run-upcoming .hrc-ru-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  text-decoration: none;
  transition: border-color .15s ease;
}
.hrc-run-upcoming .hrc-ru-row:hover {
  border-color: var(--gold-border);
}
.hrc-run-upcoming .hrc-ru-date {
  flex: 0 0 auto;
  width: 36px;
  text-align: center;
  line-height: 1.1;
}
.hrc-run-upcoming .hrc-ru-date .d {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}
.hrc-run-upcoming .hrc-ru-date .m {
  display: block;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hrc-run-upcoming .hrc-ru-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrc-run-upcoming .hrc-ru-arrow {
  color: var(--text-muted);
  font-size: 13px;
}
.hrc-run-upcoming .hrc-ru-row:hover .hrc-ru-arrow {
  color: var(--gold);
}
.hrc-run-upcoming .hrc-ru-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 14px;
  text-align: center;
}
.hrc-run-upcoming .hrc-ru-more {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  padding: 8px 10px 12px;
}
.hrc-run-upcoming .hrc-ru-more:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════
   CHAPTER & H.O.G — REFONTE TUILES (icônes vectorielles)
   Remplace les anciennes images avec titre incrusté.
   Ajouté suite à la refonte validée (voir maquette).
   ══════════════════════════════════════════════ */

/* 3 colonnes sur desktop (au lieu de 4 -> 1 carte isolée) */
body.itemid-167 .row.row-cols-lg-4 > .col {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
}
@media (max-width: 991px) {
  body.itemid-167 .row.row-cols-lg-4 > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 575px) {
  body.itemid-167 .row.row-cols-lg-4 > .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

body.itemid-167 .card {
  padding: 30px 22px 26px !important;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
body.itemid-167 .card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-border) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
}
body.itemid-167 .card-body {
  padding: 0 !important;
}

/* icône générée en CSS pur (une forme par carte, via :has) */
body.itemid-167 .card-title::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  -webkit-mask-size: 24px;
  mask-size: 24px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.itemid-167 .card:has(a[href$="/qui-sommes-nous"]) .card-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012l2-6%207-3%207%203%202%206%22/%3E%3Cpath%20d%3D%22M5%2012v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6%22/%3E%3Cpath%20d%3D%22M12%2012v8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012l2-6%207-3%207%203%202%206%22/%3E%3Cpath%20d%3D%22M5%2012v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6%22/%3E%3Cpath%20d%3D%22M12%2012v8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
}
body.itemid-167 .card:has(a[href$="/reglement-du-hrc"]) .card-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6l1%203h3a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1h3l1-3z%22/%3E%3Cpath%20d%3D%22M9%2011h6M9%2015h6%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6l1%203h3a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1h3l1-3z%22/%3E%3Cpath%20d%3D%22M9%2011h6M9%2015h6%22/%3E%3C/svg%3E");
}
body.itemid-167 .card:has(a[href$="/nous-rejoindre"]) .card-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22/%3E%3C/svg%3E");
}
body.itemid-167 .card:has(a[href$="/la-chartre-du-hog"]) .card-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l8%203v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5l8-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l8%203v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5l8-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
}
body.itemid-167 .card:has(a[href$="/a-comite"]) .card-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
}

body.itemid-167 .card-title {
  font-size: 22px !important;
  letter-spacing: .02em;
  margin-bottom: 18px !important;
}
body.itemid-167 .card-title a {
  color: var(--text) !important;
  text-decoration: none !important;
}
body.itemid-167 .card-title a:hover {
  color: var(--gold) !important;
}

body.itemid-167 .card .btn-secondary {
  border-radius: 999px !important;
  padding: 8px 22px !important;
  font-size: 12px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* ── CHAPTER & H.O.G — HERO + LIEN FLECHE + TAGLINES + ICONES (8 cartes, membres inclus) ── */
body:is(.itemid-167, .itemid-170) .page-header {
    text-align: center;
    padding: 52px 20px 10px;
  }
body:is(.itemid-167, .itemid-170) .page-header h1 {
    font-size: clamp(40px, 8vw, 72px) !important;
    letter-spacing: .03em;
    text-shadow: 0 1px 0 var(--gold-border), 0 2px 10px rgba(0,0,0,0.35);
    margin: 0 !important;
  }
body:is(.itemid-167, .itemid-170) .category-desc {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
    padding: 0 20px;
  }
body:is(.itemid-167, .itemid-170) .category-desc p {
    color: var(--text-muted) !important;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 !important;
  }
body.itemid-167 .card .btn-secondary {
    background: transparent !important;
    border: none !important;
    color: var(--gold) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
body.itemid-167 .card .btn-secondary::after {
    content: "\2192";
    transition: transform .15s ease;
  }
body.itemid-167 .card .btn-secondary:hover {
    color: var(--gold-dark) !important;
  }
body.itemid-167 .card .btn-secondary:hover::after {
    transform: translateX(3px);
  }
body.itemid-167 .card-title::after {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.5;
  }
body.itemid-167 .card:has(a[href$="/qui-sommes-nous"]) .card-title::after {
    content: "Notre histoire, nos valeurs et l'esprit qui anime le Haut-Rhin Chapter depuis sa création.";
  }
body.itemid-167 .card:has(a[href$="/reglement-du-hrc"]) .card-title::after {
    content: "Les règles de vie du chapitre, pour rouler ensemble en toute confiance.";
  }
body.itemid-167 .card:has(a[href$="/nous-rejoindre"]) .card-title::after {
    content: "La marche à suivre pour devenir membre et rouler avec la bande.";
  }
body.itemid-167 .card:has(a[href$="/la-chartre-du-hog"]) .card-title::after {
    content: "Les engagements officiels liés à notre reconnaissance par le Harley Owners Group.";
  }
body.itemid-167 .card:has(a[href$="/a-comite"]) .card-title::after {
    content: "Les bénévoles qui font tourner le chapitre au quotidien.";
  }
body.itemid-167 .card:has(a[href$="/membres-du-chapter"]) .card-title::after {
    content: "L'annuaire des membres du chapitre.";
  }
body.itemid-167 .card:has(a[href$="/liste-safeties"]) .card-title::after {
    content: "Les référents sécurité et route lors des sorties.";
  }
body.itemid-167 .card:has(a[href$="/nos-ladies"]) .card-title::after {
    content: "Le groupe des Ladies du Haut-Rhin Chapter.";
  }
body.itemid-167 .card:has(a[href$="/membres-du-chapter"]) .card-title::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h6M14%2014h4%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h6M14%2014h4%22/%3E%3C/svg%3E");
  }
body.itemid-167 .card:has(a[href$="/liste-safeties"]) .card-title::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3L12%203z%22/%3E%3Cpath%20d%3D%22M12%2010v4%22/%3E%3Cpath%20d%3D%22M12%2016.2v.1%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3L12%203z%22/%3E%3Cpath%20d%3D%22M12%2010v4%22/%3E%3Cpath%20d%3D%22M12%2016.2v.1%22/%3E%3C/svg%3E");
  }
body.itemid-167 .card:has(a[href$="/nos-ladies"]) .card-title::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-4.5-9.5-9A5.5%205.5%200%200%201%2012%206a5.5%205.5%200%200%201%209.5%206c-2.5%204.5-9.5%209-9.5%209z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-4.5-9.5-9A5.5%205.5%200%200%201%2012%206a5.5%205.5%200%200%201%209.5%206c-2.5%204.5-9.5%209-9.5%209z%22/%3E%3C/svg%3E");
  }

/* ══════════════════════════════════════════════
   CHAPTER & H.O.G — HUB HAND-AUTHORED (category description)
   Remplace la grille auto-générée par un contenu maîtrisé,
   fidèle à la maquette validée.
   ══════════════════════════════════════════════ */

/* masque la grille Joomla auto-générée (articles de la catégorie) */
body:is(.itemid-167, .itemid-170) .com-content-category-card > .row.g-4 {
    display: none !important;
  }

body:is(.itemid-167, .itemid-170) .hrc-hog-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 44px;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 14px;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(42px, 8vw, 76px) !important;
    letter-spacing: .03em;
    line-height: .95;
    color: var(--text) !important;
    text-shadow: 0 1px 0 var(--gold-border), 0 2px 10px rgba(0,0,0,0.35);
    margin: 0 !important;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tagline {
    font-family: 'DM Sans', sans-serif;
    margin: 18px 0 0;
    color: var(--text-muted) !important;
    font-size: 16px;
    line-height: 1.6;
  }

body:is(.itemid-167, .itemid-170) .hrc-hog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px 56px;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-grid > a:first-child {
    grid-column: span 2;
  }
@media (max-width: 860px) {
    body:is(.itemid-167, .itemid-170) .hrc-hog-grid { grid-template-columns: repeat(2, 1fr); }
    body:is(.itemid-167, .itemid-170) .hrc-hog-grid > a:first-child { grid-column: span 2; }
  }
@media (max-width: 580px) {
    body:is(.itemid-167, .itemid-170) .hrc-hog-grid { grid-template-columns: 1fr; }
    body:is(.itemid-167, .itemid-170) .hrc-hog-grid > a:first-child { grid-column: span 1; }
  }

body:is(.itemid-167, .itemid-170) .hrc-hog-tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile:hover {
    transform: translateY(-3px);
    border-color: var(--gold-border);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile--featured {
    padding: 32px;
  }

body:is(.itemid-167, .itemid-170) .hrc-hog-icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--gold-dim);
    border: 1px solid var(--gold-border);
    -webkit-mask-size: 24px;
    mask-size: 24px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile--featured .hrc-hog-icon {
    width: 58px;
    height: 58px;
  }

body:is(.itemid-167, .itemid-170) .hrc-hog-body {
    display: block;
    flex: 1;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile-title {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 25px;
    letter-spacing: .02em;
    color: var(--text);
    margin-bottom: 8px;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile--featured .hrc-hog-tile-title {
    font-size: 30px;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile-desc {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile--featured .hrc-hog-tile-desc {
    font-size: 15px;
    max-width: 52ch;
  }

body:is(.itemid-167, .itemid-170) .hrc-hog-more {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gold);
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-arrow {
    transition: transform .18s ease;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile:hover .hrc-hog-arrow {
    transform: translateX(3px);
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--qui-sommes-nous {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012l2-6%207-3%207%203%202%206%22/%3E%3Cpath%20d%3D%22M5%2012v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6%22/%3E%3Cpath%20d%3D%22M12%2012v8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012l2-6%207-3%207%203%202%206%22/%3E%3Cpath%20d%3D%22M5%2012v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6%22/%3E%3Cpath%20d%3D%22M12%2012v8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--reglement {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6l1%203h3a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1h3l1-3z%22/%3E%3Cpath%20d%3D%22M9%2011h6M9%2015h6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6l1%203h3a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1h3l1-3z%22/%3E%3Cpath%20d%3D%22M9%2011h6M9%2015h6%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--rejoindre {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--charte {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l8%203v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5l8-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l8%203v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5l8-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--comite {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
  }

/* ══════════════════════════════════════════════
   CHAPTER & H.O.G — FIX ICONES (visibilité) + 3 TUILES MEMBRES
   ══════════════════════════════════════════════ */

body:is(.itemid-167, .itemid-170) .hrc-hog-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0;
    background: var(--gold-dim) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: var(--gold);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-tile--featured .hrc-hog-icon::before {
    width: 28px;
    height: 28px;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--qui-sommes-nous::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012l2-6%207-3%207%203%202%206%22/%3E%3Cpath%20d%3D%22M5%2012v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6%22/%3E%3Cpath%20d%3D%22M12%2012v8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012l2-6%207-3%207%203%202%206%22/%3E%3Cpath%20d%3D%22M5%2012v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6%22/%3E%3Cpath%20d%3D%22M12%2012v8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%222%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--reglement::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6l1%203h3a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1h3l1-3z%22/%3E%3Cpath%20d%3D%22M9%2011h6M9%2015h6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6l1%203h3a1%201%200%200%201%201%201v15a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1h3l1-3z%22/%3E%3Cpath%20d%3D%22M9%2011h6M9%2015h6%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--rejoindre::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--charte::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l8%203v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5l8-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l8%203v6c0%205-3.5%208.5-8%2011-4.5-2.5-8-6-8-11V5l8-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--comite::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
  }

/* le module des 3 tuiles membres (chargé via loadmoduleid) ne doit pas casser la grille */
body:is(.itemid-167, .itemid-170) .hrc-hog-grid > div {
    display: contents;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--membres-du-chapter::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h6M14%2014h4%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h6M14%2014h4%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--safeties::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3L12%203z%22/%3E%3Cpath%20d%3D%22M12%2010v4%22/%3E%3Cpath%20d%3D%22M12%2016.2v.1%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3L12%203z%22/%3E%3Cpath%20d%3D%22M12%2010v4%22/%3E%3Cpath%20d%3D%22M12%2016.2v.1%22/%3E%3C/svg%3E");
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-icon--nos-ladies::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-4.5-9.5-9A5.5%205.5%200%200%201%2012%206a5.5%205.5%200%200%201%209.5%206c-2.5%204.5-9.5%209-9.5%209z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-4.5-9.5-9A5.5%205.5%200%200%201%2012%206a5.5%205.5%200%200%201%209.5%206c-2.5%204.5-9.5%209-9.5%209z%22/%3E%3C/svg%3E");
  }

/* tuiles membres : masquées par défaut, révélées en JS si connecté */
body:is(.itemid-167, .itemid-170) .hrc-hog-member-hide {
    display: none;
  }


/* ══════════════════════════════════════════════
   CONSEILS & SÉCURITÉ (itemid-170) — HUB À TUILES
   Réutilise le système .hrc-hog-* de Chapter & H.O.G
   (sélecteurs body:is(.itemid-167, .itemid-170) ci-dessus).
   ══════════════════════════════════════════════ */

body.itemid-170 .hrc-hog-icon--rouler-en-groupe::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21L9 3'/%3E%3Cpath d='M20 21L15 3'/%3E%3Cpath d='M12 5v3M12 11v3M12 17v3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21L9 3'/%3E%3Cpath d='M20 21L15 3'/%3E%3Cpath d='M12 5v3M12 11v3M12 17v3'/%3E%3C/svg%3E");
  }
body.itemid-170 .hrc-hog-icon--classification-run::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-4M9 20v-8M14 20V8M19 20V4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-4M9 20v-8M14 20V8M19 20V4'/%3E%3C/svg%3E");
  }
body.itemid-170 .hrc-hog-icon--guide-routier::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E");
  }
body.itemid-170 .hrc-hog-icon--road-captain::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h13l-3 4 3 4H5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h13l-3 4 3 4H5'/%3E%3C/svg%3E");
  }
body.itemid-170 .hrc-hog-icon--safety-officer::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v3H9z'/%3E%3Cpath d='M9 5H5v16h14V5h-4'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v3H9z'/%3E%3Cpath d='M9 5H5v16h14V5h-4'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
  }

/* tuiles à accès restreint : révélées seulement si Joomla a listé l'article
   dans sa grille (masquée), donc si l'utilisateur y a réellement accès */
body.itemid-170:has(.com-content-category-card > .row.g-4 a[href$="/guide-de-comportement-routier"]) .hrc-hog-tile[href$="/guide-de-comportement-routier"],
body.itemid-170:has(.com-content-category-card > .row.g-4 a[href$="/road-captain"]) .hrc-hog-tile[href$="/road-captain"],
body.itemid-170:has(.com-content-category-card > .row.g-4 a[href$="/fiche-de-poste-safety-officer"]) .hrc-hog-tile[href$="/fiche-de-poste-safety-officer"] {
    display: flex;
  }

/* ══════════════════════════════════════════════
   PAGES LISTES DE MEMBRES — Ladies, Comité, Safeties, Membres
   (articles 11, 4, 24, 25 ; modules CB list 138, 126, 147, 148)
   Bandeau .hrc-hog-hero + une carte .hrc-person-card par membre.
   Les !important écrasent les styles en ligne de mod_cblistmodule.
   ══════════════════════════════════════════════ */

/* bandeau : mêmes valeurs que sur les hubs, mais sans dépendre de l'itemid
   (la page Safeties est aussi servie par le menu Comité > Listes) */
.article-details .hrc-hog-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 44px;
  }
.article-details .hrc-hog-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 14px;
  }
.article-details .hrc-hog-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(42px, 8vw, 76px) !important;
    letter-spacing: .03em;
    line-height: .95;
    color: var(--text) !important;
    text-shadow: 0 1px 0 var(--gold-border), 0 2px 10px rgba(0,0,0,0.35);
    margin: 0 !important;
  }
.article-details .hrc-hog-tagline {
    font-family: 'DM Sans', sans-serif;
    margin: 18px 0 0;
    color: var(--text-muted) !important;
    font-size: 16px;
    line-height: 1.6;
  }
.article-details:has(.hrc-person-card) .featured-article-badge {
    display: none;
  }

.cblist:has(.hrc-person-card) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    grid-gap: 18px !important;
    max-width: 1100px;
    margin: 0 auto !important;
    padding: 0 20px 56px;
  }
/* cartes plus larges quand elles portent un e-mail / téléphone */
.hrc-people--wide .cblist:has(.hrc-person-card) {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }
.cblist:has(.hrc-person-card) > .cblist-user {
    padding: 0 !important;
  }
.hrc-person-card {
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 12px 18px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
.hrc-person-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-border);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  }
.hrc-person-card img {
    display: block;
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-border);
    background: var(--gold-dim);
  }
.hrc-person-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 23px;
    letter-spacing: .02em;
    line-height: 1.1;
    color: var(--text);
  }
.hrc-person-role {
    margin-top: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--gold);
  }
.hrc-person-meta {
    margin-top: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: anywhere;
  }
.hrc-person-meta:empty,
.hrc-person-role:empty {
    display: none;
  }
.hrc-person-meta a {
    color: var(--text-muted);
    text-decoration: none;
  }
.hrc-person-meta a:hover {
    color: var(--gold);
  }
@media (max-width: 480px) {
    .cblist:has(.hrc-person-card) {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 12px !important;
        padding: 0 12px 40px;
    }
    .hrc-people--wide .cblist:has(.hrc-person-card) {
        grid-template-columns: 1fr !important;
    }
    .hrc-person-card img {
        width: 76px !important;
        height: 76px !important;
    }
  }

/* ══════════════════════════════════════════════
   LISIBILITÉ CLAIR / SOMBRE (lot 2 de l'audit du 2026-10-03)
   ══════════════════════════════════════════════ */

/* le badge « Featured » de Joomla n'apporte rien aux visiteurs */
.article-details .featured-article-badge {
    display: none;
  }

/* Classification RUN (article 8) : une carte par niveau, pastille de couleur
   à texte blanc, lisible quel que soit le fond de page */
.hrc-levels {
    display: grid;
    grid-gap: 16px;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px 40px;
  }
.hrc-level {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 6px solid var(--lvl);
    border-radius: var(--radius);
    padding: 20px 22px;
  }
.hrc-level-badge {
    display: inline-block;
    background: var(--lvl);
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: .04em;
    line-height: 1.2;
    padding: 5px 16px 3px;
    border-radius: 999px;
  }
.hrc-level p {
    margin: 12px 0 0 !important;
    color: var(--text);
    line-height: 1.6;
  }
.hrc-level--1 { --lvl: #2e7d32; }
.hrc-level--2 { --lvl: #1565c0; }
.hrc-level--3 { --lvl: #c62828; }
.hrc-level--4 { --lvl: #111111; border-left-color: var(--text-muted); }
.hrc-level--4 .hrc-level-badge {
    border: 1px solid rgba(255,255,255,0.45);
  }

/* lot 3 : le bandeau .hrc-hog-hero remplace le titre d'article de Joomla */
.article-details:has(.hrc-hog-hero) .article-header {
    display: none;
  }

/* hubs à tuiles : la description de catégorie contient désormais bandeau + grille,
   elle ne doit plus être limitée aux 640 px prévus pour une simple phrase */
body:is(.itemid-167, .itemid-170) .category-desc:has(.hrc-hog-grid) {
    max-width: none;
    padding: 0;
    margin: 0 auto;
  }
body:is(.itemid-167, .itemid-170) .hrc-hog-grid {
    text-align: left;
  }

/* listes de membres : rôles affichés seulement s'ils sont cochés (valeur 1) */
.hrc-role-line {
    display: block;
  }
.hrc-role-line[data-on="0"],
.hrc-role-line[data-on=""] {
    display: none;
  }

/* pages d'article à bandeau : le texte ne s'étale plus sur toute la largeur des grands écrans */
.article-details:has(.hrc-hog-hero) [itemprop="articleBody"] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
  }

/* volets dépliants Page Builder CK (ex. Inscription au H.O.G) : aux couleurs du thème */
.accordionck-header {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-alt) !important;
  }
.accordionck-header a,
.accordionck-header span {
    color: var(--text) !important;
  }
.accordionck-header.ui-state-active,
.accordionck-header:hover {
    border-color: var(--gold-border) !important;
  }
.accordionck-content,
.ui-accordion .ui-accordion-content {
    background: transparent !important;
    color: var(--text) !important;
    border-color: var(--border-alt) !important;
  }

/* ── MODE CLAIR : or foncé pour les textes, icônes et filets (lisible sur fond gris) ── */
body.light-mode {
  --gold: #784800;
  --gold-dark: #5f3900;
  --gold-border: rgba(120,72,0,0.45);
  --gold-dim: rgba(120,72,0,0.12);
}
/* les boutons à fond or gardent l'or vif (leur texte est sombre) */
body.light-mode :is(button, .btn, input[type="submit"], input[type="button"], .hrc-btn, .hrc-tab.active, .sp-scroll-up, .header-modules a[href*="login"]) {
  --gold: #f4a01a;
  --gold-dark: #c07d0e;
}

/* ══════════════════════════════════════════════
   PAGE PHOTOS (article 23) — encadré de dépôt + albums en grille de cartes
   Ciblage par .hrc-photo-drop, présent dans l'article.
   ══════════════════════════════════════════════ */
.hrc-photo-drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin: 0 0 36px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  }
.hrc-photo-drop-text {
    flex: 1;
  }
.hrc-photo-drop h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    letter-spacing: .02em;
    color: var(--text);
    margin: 0 0 10px;
  }
.hrc-photo-drop p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px;
  }
.hrc-photo-drop p:last-child {
    margin-bottom: 0;
  }
.hrc-photo-drop a.hrc-btn {
    text-decoration: none !important;
    border-radius: 8px;
  }
.hrc-photo-drop-qr img {
    display: block;
    width: 170px;
    height: 170px;
    padding: 8px;
    background: #fff;
    border-radius: 10px;
  }
@media (max-width: 640px) {
    .hrc-photo-drop {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
    }
  }
.hrc-year-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: .03em;
    color: var(--gold);
    border-bottom: 1px solid var(--gold-border);
    padding-bottom: 6px;
    margin: 0 0 14px;
  }
.article-details:has(.hrc-photo-drop) [itemprop="articleBody"] ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 10px;
    padding: 0;
    margin: 0 0 28px;
  }
.article-details:has(.hrc-photo-drop) [itemprop="articleBody"] ul ul {
    display: block;
    margin: 6px 0 0;
  }
.article-details:has(.hrc-photo-drop) [itemprop="articleBody"] li {
    margin: 0;
  }
.article-details:has(.hrc-photo-drop) [itemprop="articleBody"] li > a {
    display: block;
    height: 100%;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-alt);
    border-radius: 8px;
    color: var(--text) !important;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none !important;
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
  }
.article-details:has(.hrc-photo-drop) [itemprop="articleBody"] li > a:hover {
    border-color: var(--gold-border);
    color: var(--gold) !important;
    transform: translateY(-2px);
  }
/* album sans lien : même gabarit, en retrait visuel */
.article-details:has(.hrc-photo-drop) [itemprop="articleBody"] li:not(:has(a)) {
    padding: 10px 14px;
    border: 1px dashed var(--border-alt);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.35;
  }
.article-details:has(.hrc-photo-drop) .accordionck-header {
    margin-top: 8px;
    border-radius: 8px;
  }
.article-details:has(.hrc-photo-drop) .accordionck.itemcontentck {
    padding: 14px 0 0;
  }

/* le texte du bouton de dépôt reste sombre malgré la couleur des liens d'article */
.article-details .hrc-photo-drop a.hrc-btn,
.article-details .hrc-photo-drop a.hrc-btn:hover {
    color: #111 !important;
  }

/* ══════════════════════════════════════════════
   LISTE DES MEMBRES (Comité, mod_uslst) — barre d'outils, recherche,
   colonnes resserrées et en-têtes collants
   ══════════════════════════════════════════════ */
.article-details:has(#uslst-table-container) [itemprop="articleBody"] {
    max-width: 1400px;
  }
.uslst-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 6px;
  }
.uslst-count {
    flex: 1 1 240px;
    margin: 0 !important;
    color: var(--text-muted);
    font-size: 14px;
    text-align: left;
  }
.uslst-search {
    flex: 0 1 340px;
    padding: 9px 12px;
    border: 1px solid var(--border-alt);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 14px;
  }
.uslst-search:focus {
    border-color: var(--gold);
    outline: none;
  }
.uslst-toolbar .hrc-btn-group {
    margin: 0;
  }
.uslst-notice {
    min-height: 0;
    margin: 0 !important;
    color: #e03e2d;
    font-size: 14px;
    text-align: right;
  }
.uslst-notice:empty {
    display: none;
  }
#uslst-table-container {
    max-width: none;
    margin: 10px 0 40px;
    padding: 0;
    scrollbar-color: var(--gold-border) transparent;
  }
#uslst-table-container .hrc-table {
    font-size: 14px;
  }
#uslst-table-container .hrc-table th,
#uslst-table-container .hrc-table td {
    padding: 8px 12px !important;
  }
#uslst-table-container .hrc-table .uslst-col-sel {
    width: 46px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
#uslst-table-container .hrc-table .uslst-col-id {
    width: 56px;
    color: var(--text-muted) !important;
  }
#uslst-table-container .hrc-table th.uslst-col-id {
    color: #111 !important;
  }
#uslst-table-container .hrc-table .uslst-col-text {
    text-align: left !important;
  }
#uslst-table-container .hrc-table tr.uslst-selected td {
    background: var(--gold-dim) !important;
  }
#uslst-table-container .hrc-table tr[hidden] {
    display: none;
  }
.uslst-empty {
    display: none;
    margin: 0 !important;
    padding: 18px;
    text-align: center;
    color: var(--text-muted);
  }
/* grand écran : les 8 colonnes tiennent, on peut coller les en-têtes
   (impossible tant que le conteneur défile horizontalement) */
@media (min-width: 1200px) {
    #uslst-table-container {
        overflow: visible;
    }
    #uslst-table-container .hrc-table thead th {
        position: sticky;
        top: var(--uslst-top, 0px);
        z-index: 5;
    }
  }

/* le champ de recherche suit le thème malgré les styles globaux des champs */
.hrc-uslst input.uslst-search {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-alt) !important;
  }
.hrc-uslst input.uslst-search::placeholder {
    color: var(--text-muted);
  }
.hrc-uslst input.uslst-search:focus {
    border-color: var(--gold) !important;
  }

/* mode clair : les en-têtes de tableaux et boutons restants gardent leur fond or (texte sombre dessus) */
body.light-mode :is(.hrc-table th, .custom-table th, .smslst-table th, .sppb-btn-primary, #sp-menu a[href*="login"]) {
  --gold: #f4a01a;
  --gold-dark: #c07d0e;
}

/* ══════════════════════════════════════════════
   LISTES DES PARTICIPANTS (Comité, mod_part) — barre d'outils, résumé en pastilles,
   en-têtes collants
   ══════════════════════════════════════════════ */
.part-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 0 0 8px;
  }
.part-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 280px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
.part-field #part_id {
    width: 100%;
    max-width: 420px;
  }
.part-toolbar .uslst-search {
    flex: 0 1 260px;
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-alt) !important;
  }
.part-toolbar .hrc-btn-group {
    margin: 0;
  }
.part-notice {
    margin: 0 0 8px !important;
    color: var(--gold);
    font-size: 14px;
    text-align: right;
  }
.part-notice:empty {
    display: none;
  }
#result-container.part-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 14px;
  }
#result-container.part-summary:empty {
    display: none;
  }
.part-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
.part-chips-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
  }
.part-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    background: var(--gold-dim);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
  }
.part-chips--field .part-chip {
    background: transparent;
    border-color: var(--border-alt);
  }
#modpart-container #table-container {
    max-width: none;
    margin: 0 0 40px;
    padding: 0;
    scrollbar-color: var(--gold-border) transparent;
  }
#modpart-container .hrc-table {
    font-size: 14px;
  }
#modpart-container .hrc-table th,
#modpart-container .hrc-table td {
    padding: 8px 12px !important;
  }
#modpart-container .hrc-table .part-col-date {
    white-space: nowrap;
  }
#modpart-container .hrc-table .part-col-text {
    text-align: left !important;
  }
#modpart-container .hrc-table tr[hidden] {
    display: none;
  }
#modpart-container .caption-center {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .03em;
    margin: 0;
    padding: 12px 14px;
    text-align: left;
  }
@media (min-width: 1200px) {
    #modpart-container #table-container {
        overflow: visible;
    }
    #modpart-container .hrc-table thead th {
        position: sticky;
        top: var(--uslst-top, 0px);
        z-index: 5;
    }
  }

/* ══════════════════════════════════════════════
   LISTE MAILS (Comité, article 33) — barre d'outils collante, compteur, recherche
   ══════════════════════════════════════════════ */
#maillist-wrap {
    max-width: 760px;
    margin: 0 auto;
  }
.maillist-toolbar {
    position: sticky;
    top: var(--uslst-top, 0px);
    z-index: 6;
    background: var(--bg);
    padding: 10px 0 8px;
  }
.maillist-toolbar .maillist-btn-group {
    margin-bottom: 10px;
  }
.maillist-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
  }
.maillist-tools .uslst-search {
    flex: 1 1 260px;
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-alt) !important;
  }
.maillist-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
  }
.maillist-notice {
    margin: 8px 0 0 !important;
    font-size: 14px;
    color: var(--text);
    text-align: center;
  }
.maillist-notice:empty {
    display: none;
  }
#maillist-wrap .maillist-table-wrap {
    overflow: visible;
    max-width: none;
    padding: 0;
    margin: 6px 0 40px;
  }
#maillist-wrap .custom-table thead th {
    position: sticky;
    top: var(--maillist-th-top, 0px);
    z-index: 5;
  }
#maillist-wrap .custom-table .maillist-col-sel {
    width: 46px;
  }
#maillist-wrap .custom-table .maillist-col-text {
    text-align: left;
  }
#maillist-wrap .custom-table tr.maillist-selected td {
    background: var(--gold-dim) !important;
  }
#maillist-wrap .custom-table tr[hidden] {
    display: none;
  }

/* ══════════════════════════════════════════════
   ACCUEIL (itemid-101) — page recentrée sur la largeur du menu + bloc météo
   ══════════════════════════════════════════════ */
@media (min-width: 992px) {
    body.itemid-101 #sp-main-body > .row {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
    body.itemid-101 #sp-main-body #sp-user1 {
        flex: 0 0 340px;
        width: 340px;
        max-width: 340px;
    }
    body.itemid-101 #sp-main-body #sp-component {
        flex: 1 1 0;
        width: auto;
        max-width: calc(100% - 340px);
    }
  }

.hrc-meteo {
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 18px 12px;
    background: var(--bg-card);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    text-align: left;
  }
.hrc-meteo:empty {
    display: none;
  }
.hrc-meteo-now {
    display: flex;
    align-items: center;
    gap: 14px;
  }
.hrc-meteo-icon {
    font-size: 40px;
    line-height: 1;
  }
.hrc-meteo-temp {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 46px;
    line-height: 1;
    color: var(--gold);
  }
.hrc-meteo-text span {
    display: block;
  }
.hrc-meteo-place {
    font-weight: 700;
    font-size: 16px;
  }
.hrc-meteo-desc {
    font-size: 14px;
    color: var(--text-muted);
  }
.hrc-meteo-days {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-alt);
    text-align: center;
  }
.hrc-meteo-day span {
    display: block;
  }
.hrc-meteo-dayname {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
.hrc-meteo-dayicon {
    font-size: 22px;
    line-height: 1.5;
  }
.hrc-meteo-max {
    font-weight: 700;
    font-size: 15px;
  }
.hrc-meteo-min {
    font-size: 13px;
    color: var(--text-muted);
  }
.hrc-meteo-credit {
    margin: 10px 0 0 !important;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
  }
.hrc-meteo-credit a {
    color: var(--text-muted);
  }

/* icônes météo en couleur (police emoji du système) */
.hrc-meteo-icon,
.hrc-meteo-dayicon {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  }


/* ============================================================
   Onglet Facebook maison (#hrc-fb) — module Custom « HRC Facebook »
   position debug, accueil. Le plugin Facebook n'est chargé qu'à l'ouverture.
   ============================================================ */
.hrc-fb {
    --hrc-fb-w: min(340px, calc(100vw - 60px));
    position: fixed;
    top: 22vh;
    right: 0;
    z-index: 9990;
    display: flex;
    align-items: flex-start;
    transform: translateX(var(--hrc-fb-w));
    transition: transform .3s ease;
  }
.hrc-fb.hrc-open {
    transform: none;
  }
.hrc-fb-tab {
    flex: 0 0 auto;
    width: 44px;
    height: 48px;
    padding: 0 !important;
    border: 1px solid var(--gold-border) !important;
    border-right: none !important;
    border-radius: var(--radius) 0 0 var(--radius) !important;
    background: var(--bg-card) !important;
    color: var(--gold) !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 2px 12px rgba(0,0,0,0.4);
    transition: background .2s, border-color .2s;
  }
.hrc-fb-tab:hover,
.hrc-fb-tab:focus-visible {
    background: var(--bg-alt) !important;
    border-color: var(--gold) !important;
  }
.hrc-fb-panel {
    box-sizing: border-box;
    width: var(--hrc-fb-w);
    max-height: calc(100vh - 22vh - 72px);
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--gold-border);
    border-right: none;
    border-radius: 0 0 0 var(--radius);
    box-shadow: -4px 4px 18px rgba(0,0,0,0.45);
    visibility: hidden;
    transition: visibility 0s linear .3s;
  }
.hrc-fb.hrc-open .hrc-fb-panel {
    visibility: visible;
    transition-delay: 0s;
  }
.hrc-fb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
#hrc-fb .hrc-fb-panel p.hrc-fb-title {
    margin: 0 !important;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 1.1;
    color: var(--gold) !important;
  }
.hrc-fb-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
.hrc-fb-close:hover,
.hrc-fb-close:focus-visible {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
  }
.hrc-fb-feed {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: 14px;
  }
.hrc-fb-feed iframe {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
  }
.hrc-fb-link {
    display: block;
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 20px;
    background: #f4a01a;
    color: #111 !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-decoration: none !important;
  }
.hrc-fb-link:hover,
.hrc-fb-link:focus-visible {
    background: #c07d0e;
  }
.hrc-fb-note {
    margin: 8px 0 0 !important;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
  }
@media (prefers-reduced-motion: reduce) {
.hrc-fb,
.hrc-fb-panel {
    transition: none;
  }
}
@media print {
.hrc-fb {
    display: none;
  }
}
/* mode clair : l'onglet et la croix sont des boutons à fond sombre→gris, ils prennent l'or foncé */
body.light-mode #hrc-fb :is(.hrc-fb-tab, .hrc-fb-close) {
  --gold: #784800;
  --gold-border: rgba(120,72,0,0.45);
}

/* Pied de page : les blocs internes (rangée, colonnes) ne doivent pas reprendre le fond général,
   sinon un rectangle plus clair apparaît derrière les trois logos */
#sp-footer .container,
#sp-footer .container-inner,
#sp-footer .row,
#sp-footer [class*="col-"],
#sp-footer .sp-column {
  background: transparent !important;
}
/* le filet par défaut de Helix doublait la bordure dorée du pied de page */
#sp-footer .container-inner {
  border-top: none !important;
}

/* Même correction en haut du site : barre du haut et en-tête */
#sp-top-bar .container,
#sp-top-bar .container-inner,
#sp-top-bar .row,
#sp-top-bar [class*="col-"],
#sp-top-bar .sp-column,
#sp-header .container,
#sp-header .container-inner,
#sp-header .row,
#sp-header [class*="col-"],
#sp-header .sp-column {
  background: transparent !important;
}

/* Mode clair : le logo blanc de la concession (pied de page) passe en noir pour rester lisible sur le gris */
body.light-mode #sp-footer img[src*="dream."] {
  filter: brightness(0);
}

/* Menu latéral (trois tirets) : le voile ne doit pas masquer la page, et le volet garde un fond uni */
body > .offcanvas-overlay {
  background: rgba(0,0,0,0.6) !important;
}
body > .offcanvas-menu {
  background: var(--bg-dropdown) !important;
}
body > .offcanvas-menu > div,
body > .offcanvas-menu .offcanvas-inner > div,
body > .offcanvas-menu .sp-module {
  background: transparent !important;
}
body > .offcanvas-menu .sp-module {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* dans le volet : le nom du membre connecté s'affiche, avec son icône, comme dans l'en-tête */
body > .offcanvas-menu .offcanvas-inner .sp-profile-wrapper .user-text {
  display: inline-block !important;
}
body > .offcanvas-menu .sp-profile-wrapper > a,
body > .offcanvas-menu .sp-profile-wrapper > a i,
body > .offcanvas-menu .sp-profile-wrapper > a .user-text {
  color: var(--gold) !important;
  font-size: 15px !important;
}
/* le sous-menu du membre se déplie dans le volet au lieu de déborder à gauche */
body > .offcanvas-menu .offcanvas-inner .sp-profile-wrapper .sp-profile-dropdown {
  position: static !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  box-shadow: none !important;
}
body > .offcanvas-menu .header-modules .sp-module,
body > .offcanvas-menu .header-modules .sp-profile-wrapper {
  width: 100% !important;
}
body > .offcanvas-menu .offcanvas-inner .sp-profile-dropdown a {
  font-size: 15px !important;
}
/* le bouton de déconnexion garde un texte sombre sur son fond or */
body > .offcanvas-menu .offcanvas-inner .sp-profile-dropdown li a[href*="logout"] {
  color: #111 !important;
}

/* ══════════════════════════════════════════════
   PROFIL COMMUNITY BUILDER (.cbProfile) — page « cb-profile »
   Blocs blancs de Bootstrap remis aux couleurs du thème, valeurs lisibles, largeur limitée.
   ══════════════════════════════════════════════ */
.cbProfile {
  max-width: 1140px;
  margin: 0 auto 40px;
}
.cbProfile .row,
.cbProfile [class*="col-"] {
  background: transparent !important;
}
.cbProfile .bg-light,
.cbProfile .bg-white,
.cbProfile .navbar-light {
  background: var(--bg-card) !important;
}
.cbProfile .border,
.cbProfile .border-top,
.cbProfile .border-bottom,
.cbProfile .border-left,
.cbProfile .border-right {
  border-color: var(--border-alt) !important;
}
.cbProfile .cbPosCanvasMenu .navbar {
  border-radius: var(--radius) var(--radius) 0 0;
}
.cbProfile .cbPosCanvasBottom {
  border-radius: 0 0 var(--radius) var(--radius);
}
.cbProfile .cbPosCanvasMain .navbar {
  border-radius: var(--radius) !important;
}
.cbProfile .navbar-light .nav-link,
.cbProfile .navbar-light label.nav-link {
  color: var(--text-muted) !important;
}
.cbProfile .navbar-light .nav-link:hover,
.cbProfile .navbar-light .nav-link.active {
  color: var(--gold) !important;
}
.cbProfile .nav-tabs {
  border-bottom-color: var(--border-alt) !important;
}
.cbProfile .nav-tabs .nav-link {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.cbProfile .nav-tabs .nav-link.active {
  color: var(--gold) !important;
  background: var(--bg-card) !important;
  border-color: var(--border-alt) var(--border-alt) transparent !important;
}
.cbProfile .cb_field,
.cbProfile .cb_field div,
.cbProfile .cb_field span,
.cbProfile .cbPosCanvasTitle,
.cbProfile .cb-page-header-title {
  color: var(--text) !important;
}
.cbProfile .cb_form_line > label,
.cbProfile .col-form-label,
.cbProfile .text-muted,
.cbProfile .cbPosCanvasStats,
.cbProfile .cbPosCanvasStats * {
  color: var(--text-muted) !important;
}
.cbProfile .cb-page-header {
  border-bottom: none !important;
}
/* pastille « en ligne » : elle garde sa couleur */
.cbProfile .text-success,
.cbProfile .cb_field .text-success {
  color: #2ea44f !important;
}
.cbProfile .cb_field [class*="text-"] > span {
  color: inherit !important;
}

/* ══════════════════════════════════════════════
   FORMULAIRE « MODIFIER MES INFORMATIONS » (.cbEditProfile) — page « cb-profile-edit »
   ══════════════════════════════════════════════ */
.cbEditProfile {
  max-width: 1140px;
  margin: 0 auto 40px;
}
.cbEditProfile .row,
.cbEditProfile [class*="col-"] {
  background: transparent !important;
}
.cbEditProfile .bg-light,
.cbEditProfile .bg-white,
.cbEditProfile .card,
.cbEditProfile .card-header,
.cbEditProfile .card-body,
.cbEditProfile .list-group-item {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
.cbEditProfile .border,
.cbEditProfile .border-top,
.cbEditProfile .border-bottom,
.cbEditProfile .card,
.cbEditProfile .card-header {
  border-color: var(--border-alt) !important;
}
.cbEditProfile .nav-tabs {
  border-bottom-color: var(--border-alt) !important;
}
.cbEditProfile .nav-tabs .nav-link {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.cbEditProfile .nav-tabs .nav-link.active {
  color: var(--gold) !important;
  background: var(--bg-card) !important;
  border-color: var(--border-alt) var(--border-alt) transparent !important;
}
.cbEditProfile .cb_field,
.cbEditProfile .cb_field div,
.cbEditProfile .cb_field span,
.cbEditProfile .cb_field p,
.cbEditProfile .cb_field h1,
.cbEditProfile .cb_field h2,
.cbEditProfile .cb_field h3,
.cbEditProfile .cb_field h4,
.cbEditProfile .cb_field strong,
.cbEditProfile .cb_field label {
  color: var(--text) !important;
}
.cbEditProfile .text-muted,
.cbEditProfile .cbFieldIcons,
.cbEditProfile .cbFieldIcons span,
.cbEditProfile .form-text {
  color: var(--text-muted) !important;
}
/* champs que le thème ne couvrait pas (nombre, fichier, zone de texte) */
.cbEditProfile input[type="number"],
.cbEditProfile input[type="file"],
.cbEditProfile input[type="date"],
.cbEditProfile textarea {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--border-alt) !important;
}
/* bouton « Afficher » du mot de passe */
.cbEditProfile .cb_field .btn-outline-light,
.cbEditProfile .cb_field .text-body {
  color: var(--text) !important;
  background: var(--bg-input) !important;
  border-color: var(--border-alt) !important;
}
/* double authentification : logos noirs sur pastille claire, boutons secondaires en or */
.cbEditProfile .com-users-methods-list-method-image {
  background: #d8d8d8 !important;
  border-radius: 6px;
  padding: 6px 10px;
}
.cbEditProfile .btn-outline-primary,
.cbEditProfile .btn-secondary,
.cbEditProfile .btn-outline-secondary {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold-border) !important;
}
.cbEditProfile .btn-outline-primary:hover,
.cbEditProfile .btn-secondary:hover,
.cbEditProfile .btn-outline-secondary:hover {
  background: var(--gold-dim) !important;
  border-color: var(--gold) !important;
}
/* bouton « Choisir un fichier » et mention Community Builder */
.cbEditProfile input[type="file"]::file-selector-button {
  background: var(--bg-alt);
  color: var(--text);
  border: none;
  border-right: 1px solid var(--border-alt);
}
.cb_template .cbPoweredBy a {
  color: var(--text-muted) !important;
}
/* mode clair : les boutons à contour (Annuler, double authentification) prennent l'or foncé */
body.light-mode .cb_template.cbEditProfile :is(.btn-outline-primary, .btn-secondary, .btn-outline-secondary) {
  --gold: #784800;
  --gold-border: rgba(120,72,0,0.45);
  --gold-dim: rgba(120,72,0,0.12);
}

/* ============================================================
   Affichage sur téléphone (vérification du 2026-10-05)
   ============================================================ */
/* Onglet Facebook : le conteneur fixe reprenait le fond général (body > div…) et masquait
   une bande de 44 px sous l'onglet ; il devient transparent et laisse passer les clics */
#hrc-fb {
  background: transparent !important;
  pointer-events: none;
}
#hrc-fb > * {
  pointer-events: auto;
}
/* Événement annulé (iCagenda) : titre de l'alerte lisible sur son fond rose */
.ic-event-cancelled-alert .alert-heading {
  color: #842029 !important;
}
/* « Nous trouver » (menu 219) : la carte passe en pleine largeur, l'adresse dessous */
@media (max-width: 767px) {
  body.itemid-219 .article-details table,
  body.itemid-219 .article-details tbody,
  body.itemid-219 .article-details tr,
  body.itemid-219 .article-details td {
    display: block;
    width: 100% !important;
  }
  body.itemid-219 .article-details td:first-child {
    display: none;
  }
  body.itemid-219 .article-details .leaflet-container {
    height: 320px !important;
    margin-bottom: 16px;
  }
}
/* Formulaire d'adhésion : les champs date et téléphone restaient blancs */
form.hrc-adhesion input[type="date"],
form.hrc-adhesion input[type="tel"] {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
}
body:not(.light-mode) form.hrc-adhesion input[type="date"] {
  color-scheme: dark;
}
@media (max-width: 767px) {
  /* Liste Mails : le tableau dépassait de l'écran sans pouvoir défiler, les adresses passent à la ligne */
  #maillist-wrap .custom-table {
    width: 100%;
  }
  #maillist-wrap .custom-table th,
  #maillist-wrap .custom-table td {
    padding-left: 6px;
    padding-right: 6px;
    overflow-wrap: anywhere;
  }
  /* liens très longs (Liens utiles) : coupés plutôt que tronqués par le bord de l'écran */
  .article-details a {
    overflow-wrap: anywhere;
  }
}

/* ══════════════════════════════════════════════
   Page « Libre » (article 31) — une carte .hrc-libre-card par événement :
   image à gauche, texte à droite, l'un sous l'autre sur téléphone.
   Pour ajouter un événement : dupliquer un bloc <article class="hrc-libre-card">.
   ══════════════════════════════════════════════ */
.hrc-libre {
  display: grid;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto 40px;
}
.hrc-libre-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.hrc-libre-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}
.hrc-libre-body {
  padding: 26px 30px;
  align-self: center;
}
.hrc-libre-body p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.hrc-libre-body p:last-child {
  margin-bottom: 0;
}
.hrc-libre-body p.hrc-libre-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: 8px;
}
.hrc-libre-body h2.hrc-libre-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.05;
  color: var(--text);
  margin: 0 0 6px;
}
.hrc-libre-body p.hrc-libre-place {
  font-weight: 700;
  color: var(--text) !important;
  margin-bottom: 14px;
}
body.light-mode .hrc-libre-body p.hrc-libre-date {
  color: #784800 !important;
}
@media (max-width: 767px) {
  .hrc-libre-card {
    grid-template-columns: 1fr;
  }
  .hrc-libre-img img {
    height: 200px;
    min-height: 0;
  }
  .hrc-libre-body {
    padding: 20px;
  }
}

/* ══════════════════════════════════════════════
   « Nous contacter » (menu 220) — formulaire Convert Forms n° 2, classe .my-form.
   Le bandeau est dans le réglage « texte » du formulaire ; la carte et les champs
   prennent les couleurs du thème à la place du fond blanc d'origine.
   ══════════════════════════════════════════════ */
.convertforms.my-form {
  background: transparent !important;
  width: auto !important;
  max-width: 640px !important;
  margin: 0 auto 48px !important;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
  overflow: visible !important;
}
.my-form .hrc-hog-hero {
  text-align: center;
  padding: 14px 20px 36px;
}
.my-form .hrc-hog-eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  font-weight: 700;
  margin: 0 0 14px;
}
.my-form .hrc-hog-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(42px, 8vw, 76px) !important;
  letter-spacing: .03em;
  line-height: .95;
  color: var(--text) !important;
  text-shadow: 0 1px 0 var(--gold-border), 0 2px 10px rgba(0,0,0,0.35);
  margin: 0 !important;
}
.my-form .hrc-hog-tagline {
  margin: 18px 0 0;
  color: var(--text-muted) !important;
  font-size: 16px;
  line-height: 1.6;
}
.convertforms.my-form form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.my-form .cf-label {
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 600;
}
.my-form .cf-phone-number-wrapper {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text) !important;
}
.my-form .cf-phone-number-wrapper .tf-phone-control {
  box-shadow: none !important;
}
.my-form .cf-phone-number-wrapper input[type="tel"] {
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
}
.my-form .cf-phone-number-wrapper .choices__item {
  color: var(--text) !important;
}
.my-form .cf-btn {
  background: var(--gold) !important;
  color: #111 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 7px !important;
}
.my-form .cf-btn:hover {
  background: var(--gold-dark) !important;
}

/* ══════════════════════════════════════════════
   « Abonnements » (article 37, menu 452) — notifications OneSignal.
   Le code Sourcerer de l'article n'est pas modifié : on habille son message d'état
   et ses trois boutons (le dernier, « Réinitialiser », est volontairement discret).
   ══════════════════════════════════════════════ */
.article-details #onesignal-status {
  max-width: 560px;
  margin: 0 auto 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--text);
}
.article-details #onesignal-buttons {
  max-width: 560px;
  margin: 0 auto 48px;
  align-items: stretch;
  gap: 10px;
}
.article-details #onesignal-buttons button {
  padding: 12px 16px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--gold-border);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.article-details #onesignal-buttons button:hover,
.article-details #onesignal-buttons button:focus-visible {
  background: var(--gold-dim);
  border-color: var(--gold);
}
.article-details #onesignal-buttons button:last-child {
  margin-top: 8px;
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
/* page « Libre » : carte sans image, le texte prend toute la largeur */
.hrc-libre-card:not(:has(.hrc-libre-img)) {
  grid-template-columns: 1fr;
}

/* =====================================================================
   DÉBUT — Page « Accueil v2 » (Haut-Rhin Chapter)
   Tous les sélecteurs sont préfixés par .hrc-home : aucun effet ailleurs.
   ===================================================================== */

.hrc-home {
  --hrc-bg: #0f0e0d;
  --hrc-bg-alt: #161412;
  --hrc-card: #1a1816;
  --hrc-line: #2a2622;
  --hrc-line-strong: #5a524a;
  --hrc-text: #f2ede4;
  --hrc-muted: #cfc6b8;
  --hrc-dim: #b5ab9c;
  --hrc-accent: #f4a01a;
  --hrc-accent-hover: #ffc25c;
  --hrc-rose: #f08fb4;
  --hrc-rose-line: #e8739f;
  --hrc-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --hrc-body: 'Barlow', 'Helvetica Neue', Helvetica, sans-serif;

  color: var(--hrc-text);
  font-family: var(--hrc-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

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

/* Remise à zéro des styles du template à l'intérieur de la page */
.hrc-home h1,
.hrc-home h2,
.hrc-home h3,
.hrc-home p,
.hrc-home ul { margin: 0; padding: 0; }
.hrc-home ul { list-style: none; }
.hrc-home img { max-width: 100%; height: auto; display: block; }

/* ---------- Bandeaux pleine largeur (sans défilement horizontal) ---------- */
.hrc-home .hrc-band {
  background: var(--hrc-bg);
  box-shadow: 0 0 0 100vmax var(--hrc-bg);
  clip-path: inset(0 -100vmax);
}
.hrc-home .hrc-band--alt {
  background: var(--hrc-bg-alt);
  box-shadow: 0 0 0 100vmax var(--hrc-bg-alt);
  border-top: 1px solid var(--hrc-line);
  border-bottom: 1px solid var(--hrc-line);
}

/* ---------- Typographie ---------- */
.hrc-home .hrc-kicker {
  color: var(--hrc-accent);
  font-family: var(--hrc-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.hrc-home .hrc-h2 {
  font-family: var(--hrc-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--hrc-text);
}
.hrc-home .hrc-h3 {
  font-family: var(--hrc-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--hrc-text);
  margin-bottom: 12px;
}

/* ---------- Liens et boutons ---------- */
.hrc-home a.hrc-link {
  color: var(--hrc-accent);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  padding: 10px 0;
}
.hrc-home a.hrc-link:hover,
.hrc-home a.hrc-link:focus-visible { color: var(--hrc-accent-hover); text-decoration: underline; }

.hrc-home a.hrc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.hrc-home a.hrc-btn--primary { background: var(--hrc-accent); color: var(--hrc-bg); border: 1px solid var(--hrc-accent); }
.hrc-home a.hrc-btn--primary:hover,
.hrc-home a.hrc-btn--primary:focus-visible { background: var(--hrc-accent-hover); border-color: var(--hrc-accent-hover); color: var(--hrc-bg); }
.hrc-home a.hrc-btn--ghost { color: var(--hrc-text); border: 1px solid var(--hrc-line-strong); background: transparent; }
.hrc-home a.hrc-btn--ghost:hover,
.hrc-home a.hrc-btn--ghost:focus-visible { border-color: var(--hrc-accent); color: var(--hrc-accent); }

.hrc-home a:focus-visible { outline: 2px solid var(--hrc-accent); outline-offset: 3px; }

/* ---------- Bandeau d'accueil ---------- */
.hrc-home .hrc-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding: 64px 0;
}
.hrc-home .hrc-hero__text { flex: 1 1 440px; min-width: 0; }
.hrc-home .hrc-hero__title {
  font-family: var(--hrc-display);
  font-weight: 400;
  font-size: 96px;
  line-height: .92;
  letter-spacing: 1px;
  color: var(--hrc-text);
  margin: 16px 0 24px;
}
.hrc-home .hrc-hero__lead { color: var(--hrc-muted); font-size: 19px; max-width: 520px; margin-bottom: 32px; }
.hrc-home .hrc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hrc-home .hrc-hero__photo {
  flex: 1 1 480px;
  min-width: 0;
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center 45%;
  border-radius: 6px;
  border: 1px solid var(--hrc-line);
}

/* ---------- Compteurs ---------- */
.hrc-home .hrc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 40px 0;
}
.hrc-home .hrc-stat { display: flex; flex-direction: column; }
.hrc-home .hrc-stat__num { font-family: var(--hrc-display); font-size: 56px; line-height: 1; color: var(--hrc-accent); }
.hrc-home .hrc-stat__label { color: var(--hrc-muted); font-weight: 600; }

/* ---------- Sections ---------- */
.hrc-home .hrc-section { padding: 72px 0 40px; }
.hrc-home .hrc-section--tight { padding: 0 0 72px; }
.hrc-home .hrc-section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 32px;
}

/* ---------- Cartes d'événements ---------- */
.hrc-home .hrc-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.hrc-home .hrc-event {
  background: var(--hrc-card);
  border: 1px solid var(--hrc-line);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hrc-home .hrc-event--rose { border-top: 3px solid var(--hrc-rose-line); }
.hrc-home .hrc-event__top { display: flex; gap: 16px; align-items: center; }
.hrc-home .hrc-date {
  flex: none;
  width: 64px;
  padding-right: 16px;
  border-right: 1px solid #3a342e;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.hrc-home .hrc-date__day { font-family: var(--hrc-display); font-size: 44px; line-height: 1; color: var(--hrc-text); }
.hrc-home .hrc-date__month { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--hrc-dim); }
.hrc-home .hrc-event__tag { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--hrc-accent); }
.hrc-home .hrc-event--rose .hrc-event__tag,
.hrc-home .hrc-event--rose a.hrc-link { color: var(--hrc-rose); }
.hrc-home .hrc-event__title { font-family: var(--hrc-body); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--hrc-text); margin-top: 4px; }
.hrc-home .hrc-event__meta { color: var(--hrc-muted); font-size: 15px; }
.hrc-home .hrc-event__cta { margin-top: auto; }

/* ---------- Encart Run des Pères Noël ---------- */
.hrc-home .hrc-promo {
  background: #1f1a14;
  border: 1px solid #4a3a20;
  border-radius: 6px;
  padding: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.hrc-home .hrc-promo__text { flex: 999 1 440px; min-width: 0; }
.hrc-home .hrc-promo__text .hrc-kicker { font-size: 12px; }
.hrc-home .hrc-promo__text .hrc-h2 { font-size: 48px; margin: 8px 0 12px; }
.hrc-home .hrc-promo__text p:last-child { color: var(--hrc-muted); }
.hrc-home a.hrc-promo__cta { flex: 1 1 220px; }

/* ---------- Le Chapter / Bar / Adhésion ---------- */
.hrc-home .hrc-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 72px 0;
}
.hrc-home .hrc-trio__item p { color: var(--hrc-muted); }

/* ---------- Nous trouver ---------- */
.hrc-home .hrc-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 72px;
}
.hrc-home .hrc-find__col { flex: 1 1 300px; }
.hrc-home .hrc-find__col p { color: var(--hrc-muted); }
.hrc-home .hrc-find__links { flex: 1 1 240px; display: flex; flex-direction: column; }
.hrc-home .hrc-find__logo { flex: none; width: 160px; height: auto; }

/* ---------- Tablette ---------- */
@media (max-width: 991px) {
  .hrc-home .hrc-hero__title { font-size: 76px; }
  .hrc-home .hrc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrc-home .hrc-trio { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 575px) {
  .hrc-home { font-size: 16px; }
  .hrc-home .hrc-hero { padding: 32px 0 40px; gap: 24px; }
  .hrc-home .hrc-hero__text { flex-basis: 100%; }
  .hrc-home .hrc-kicker { font-size: 12px; letter-spacing: 2px; }
  .hrc-home .hrc-hero__title { font-size: 56px; margin: 12px 0 16px; }
  .hrc-home .hrc-hero__lead { font-size: 16px; margin-bottom: 24px; }
  .hrc-home .hrc-actions { flex-direction: column; }
  .hrc-home .hrc-actions a.hrc-btn { width: 100%; }
  .hrc-home .hrc-hero__photo { flex-basis: 100%; height: 220px; object-position: center 50%; }
  .hrc-home .hrc-stats { padding: 28px 0; gap: 20px; }
  .hrc-home .hrc-stat__num { font-size: 42px; }
  .hrc-home .hrc-stat__label { font-size: 14px; }
  .hrc-home .hrc-section { padding: 40px 0 24px; }
  .hrc-home .hrc-section--tight { padding: 8px 0 40px; }
  .hrc-home .hrc-h2 { font-size: 40px; }
  .hrc-home .hrc-h3 { font-size: 32px; }
  .hrc-home .hrc-events { grid-template-columns: 1fr; gap: 12px; }
  .hrc-home .hrc-event { padding: 16px; gap: 10px; }
  .hrc-home .hrc-date__day { font-size: 36px; }
  .hrc-home .hrc-event__title { font-size: 17px; }
  .hrc-home .hrc-promo { padding: 24px; gap: 20px; }
  .hrc-home .hrc-promo__text .hrc-h2 { font-size: 36px; }
  .hrc-home a.hrc-promo__cta { flex-basis: 100%; }
  .hrc-home .hrc-trio { padding: 36px 0; }
  .hrc-home .hrc-find { padding-bottom: 40px; gap: 24px; }
  .hrc-home .hrc-find__logo { width: 120px; }
}

/* =====================================================================
   FIN — Page « Accueil v2 »
   ===================================================================== */

/* =====================================================================
   DÉBUT — Accueil v2 : correctif 1
   À coller dans custom.css JUSTE APRÈS le bloc « FIN — Page Accueil v2 ».
   Corrige : largeur/décalage, bouton secondaire, styles du template
   qui écrasent titres, paragraphes et liens.
   ===================================================================== */

/* 1. Largeur : la page reste centrée dans 1200 px, quel que soit le conteneur Helix */
body .hrc-home {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative;
  left: auto !important;
  transform: none !important;
}
/* Neutralise le conteneur de l'article autour de la page */
body .article-details:has(.hrc-home),
body .article-body:has(.hrc-home),
body [itemprop="articleBody"]:has(.hrc-home) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:has(.hrc-home), body:has(.hrc-home) { overflow-x: hidden; }

/* 2. Titres : on reprend la main sur le template */
body .hrc-home h1,
body .hrc-home h2,
body .hrc-home h3 {
  text-transform: none !important;
  letter-spacing: normal;
  color: #f2ede4 !important;
}
body .hrc-home .hrc-hero__title,
body .hrc-home .hrc-h2,
body .hrc-home .hrc-h3 {
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}
body .hrc-home .hrc-event__title {
  font-family: 'Barlow', 'Helvetica Neue', Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* 3. Paragraphes et petits libellés */
body .hrc-home p { margin: 0 !important; color: #cfc6b8; }
body .hrc-home .hrc-kicker,
body .hrc-home .hrc-event__tag { color: #f4a01a !important; }
body .hrc-home .hrc-event--rose .hrc-event__tag { color: #f08fb4 !important; }
body .hrc-home .hrc-hero__lead { color: #cfc6b8 !important; margin-bottom: 32px !important; }
body .hrc-home .hrc-hero__title { margin: 16px 0 24px !important; }
body .hrc-home .hrc-promo__text .hrc-h2 { margin: 8px 0 12px !important; }
body .hrc-home .hrc-h3 { margin-bottom: 12px !important; }

/* 4. Boutons : plus gros, et le secondaire redevient transparent */
body .hrc-home a.hrc-btn {
  font-family: 'Barlow', 'Helvetica Neue', Helvetica, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  min-height: 52px !important;
  padding: 12px 28px !important;
  box-shadow: none !important;
}
body .hrc-home a.hrc-btn--primary,
body .hrc-home a.hrc-btn--primary:visited {
  background: #f4a01a !important;
  border: 1px solid #f4a01a !important;
  color: #0f0e0d !important;
}
body .hrc-home a.hrc-btn--primary:hover { background: #ffc25c !important; border-color: #ffc25c !important; }
body .hrc-home a.hrc-btn--ghost,
body .hrc-home a.hrc-btn--ghost:visited {
  background: transparent !important;
  border: 1px solid #5a524a !important;
  color: #f2ede4 !important;
}
body .hrc-home a.hrc-btn--ghost:hover { border-color: #f4a01a !important; color: #f4a01a !important; }

/* 5. Liens texte : pas de fond ni de soulignement venant du template */
body .hrc-home a.hrc-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body .hrc-home .hrc-event--rose a.hrc-link { color: #f08fb4 !important; }

/* Mobile : on garde les tailles prévues */
@media (max-width: 575px) {
  body .hrc-home { padding: 0 16px !important; }
  body .hrc-home .hrc-hero__title { font-size: 56px !important; margin: 12px 0 16px !important; }
  body .hrc-home .hrc-event__title { font-size: 17px !important; }
  body .hrc-home .hrc-hero__lead { margin-bottom: 24px !important; }
}

/* =====================================================================
   FIN — Accueil v2 : correctif 1
   ===================================================================== */

/* =====================================================================
   DÉBUT — Accueil v2 : correctif 2 (titre principal)
   À coller dans custom.css JUSTE APRÈS « FIN — Accueil v2 : correctif 1 ».
   Le titre tient sur 3 lignes fixes, sans couper « Haut-Rhin ».
   ===================================================================== */

body .hrc-home .hrc-hero__title {
  font-size: clamp(44px, 5.4vw, 80px) !important;
  line-height: .95 !important;
  letter-spacing: .5px !important;
  margin: 16px 0 24px !important;
}
body .hrc-home .hrc-hero__title span {
  display: block;
  white-space: nowrap;
}
body .hrc-home .hrc-hero { align-items: center !important; }

@media (max-width: 575px) {
  body .hrc-home .hrc-hero__title { font-size: clamp(34px, 11vw, 48px) !important; }
}
/* Très petits écrans : on autorise le retour à la ligne pour éviter le débordement */
@media (max-width: 340px) {
  body .hrc-home .hrc-hero__title span { white-space: normal; }
}

/* =====================================================================
   FIN — Accueil v2 : correctif 2
   ===================================================================== */

/* =====================================================================
   Pages iCagenda (liste, fiche d’un événement, inscription) :
   contenu limité à 1140 px et centré, comme les articles à bandeau.
   Sans cela il s’étale sur toute la largeur de l’écran.
   ===================================================================== */
body.com-icagenda #sp-component > .sp-column {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* =====================================================================
   En-tête sur écrans de portables (992 à 1399 px) : le menu ne tenait
   plus à côté du logo, passait dessous et chevauchait la page.
   De 1200 à 1399 px : menu resserré sur une ligne.
   De 992 à 1199 px : menu masqué, le volet (burger) le contient déjà.
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1399.98px) {
  #sp-header .row { flex-wrap: nowrap; }
  #sp-header #sp-menu { min-width: 0; }
  #sp-header .sp-megamenu-parent { white-space: nowrap; }
  /* !important : la règle générale du menu (#sp-menu nav > ul > li > a) l'est aussi */
  #sp-header #sp-menu nav > ul > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #sp-header .header-modules,
  #sp-header .header-modules .sp-module { margin-left: 8px; }
  /* le nom du membre reste sur une ligne (menu en gras, plus large, en mode clair) */
  #sp-header .header-modules { white-space: nowrap; flex: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  #sp-header .sp-megamenu-parent { display: none !important; }
}

/* =====================================================================
   Accueil v2 : correctif 3 — la page reste sombre, y compris en mode clair
   (elle a sa propre palette --hrc-*). Sans cela, en mode clair, les
   sections sans fond devenaient grises, les liens bleus et le logo
   clair disparaissait.
   ===================================================================== */
body .hrc-home { background: var(--hrc-bg); }
body:has(.hrc-home) #sp-main,
body:has(.hrc-home) #sp-main-body,
body:has(.hrc-home) #sp-main-body > .row,
body:has(.hrc-home) #sp-main-body #sp-component,
body:has(.hrc-home) #sp-main-body #sp-component > .sp-column { background: #0f0e0d !important; }

/* Paragraphes : la couleur prévue (--hrc-muted) était écrasée par celle du site */
body .hrc-home p:not([class]),
body .hrc-home p.hrc-event__meta,
body .hrc-home p.hrc-event__cta { color: var(--hrc-muted) !important; }

/* Liens : or (ou rose pour Octobre Rose) dans les deux modes */
body .hrc-home a.hrc-link,
body.light-mode .hrc-home a.hrc-link { color: var(--hrc-accent) !important; }
body .hrc-home a.hrc-link:hover,
body .hrc-home a.hrc-link:focus-visible,
body.light-mode .hrc-home a.hrc-link:hover,
body.light-mode .hrc-home a.hrc-link:focus-visible { color: var(--hrc-accent-hover) !important; }
body .hrc-home .hrc-event--rose a.hrc-link,
body.light-mode .hrc-home .hrc-event--rose a.hrc-link { color: var(--hrc-rose) !important; }

/* =====================================================================
   FIN — Accueil v2 : correctif 3
   ===================================================================== */

/* =====================================================================
   Invitation à installer l'appli (#hrc-pwa, membres connectés) — 2026-10-14
   Balisage et script en fin de index.php du template.
   <aside> et non <div> : custom.css impose un fond à « body > div ».
   ===================================================================== */
.hrc-pwa[hidden], .hrc-pwa [hidden] { display: none !important; }
.hrc-pwa {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius, 10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
}
.hrc-pwa.is-open { opacity: 1; transform: none; }
.hrc-pwa-icon { width: 48px; height: 48px; border-radius: 10px; flex: 0 0 auto; }
.hrc-pwa-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.hrc-pwa-text strong { color: var(--gold); font-size: 15px; }
.hrc-pwa-text b { color: var(--text); }
.hrc-pwa-share { width: 18px; height: 18px; vertical-align: -3px; color: var(--gold); }
.hrc-pwa-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.hrc-pwa-actions button {
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hrc-pwa .hrc-pwa-install { background: var(--gold); color: #111; }
.hrc-pwa .hrc-pwa-install:hover, .hrc-pwa .hrc-pwa-install:focus-visible { background: var(--gold-dark); }
.hrc-pwa .hrc-pwa-later { background: transparent; color: var(--text-muted); border: 1px solid var(--border-alt); }
.hrc-pwa .hrc-pwa-later:hover, .hrc-pwa .hrc-pwa-later:focus-visible { color: var(--text); }
@media (max-width: 420px) {
  .hrc-pwa { flex-wrap: wrap; }
  .hrc-pwa-text { flex-basis: calc(100% - 62px); }
  .hrc-pwa-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .hrc-pwa { transition: none; } }
/* FIN — Invitation à installer l'appli */

/* =====================================================================
   Fiches RUN & Séjour (menu 113, thème iCagenda « arrondi ») — 2026-11-01
   Un seul niveau de cadre, texte lisible, boutons or, case Information lisible
   ===================================================================== */
body.itemid-113.view-event .ic-event-header { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
body.itemid-113.view-event .ic-event-header .ic-title-header { float: none; width: auto; flex: 1 1 320px; }
body.itemid-113.view-event .ic-event-header .ic-features-container:empty { display: none; }
body.itemid-113.view-event .ic-event-header h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin: 0; color: var(--text); }
body.itemid-113.view-event .ic-event-header .ic-title-cat { float: none; width: auto; font-size: 14px; color: var(--gold); border: 1px solid var(--gold-border); border-radius: 999px; padding: 4px 14px; }
/* Boutons : or du site au lieu du bleu Bootstrap */
body.itemid-113.view-event .ic-event-view .btn-info { background: var(--gold); border-color: var(--gold); color: #111; border-radius: 6px; }
body.itemid-113.view-event .ic-event-view .btn-info.disabled { background: transparent; border-color: var(--gold-border); color: var(--text); opacity: 1; }
body.itemid-113.view-event .ic-event-view .btn-outline-info { background: transparent; border-color: var(--gold-border); color: var(--gold); }
body.itemid-113.view-event .ic-event-view .btn-outline-info:hover { background: var(--gold); border-color: var(--gold); color: #111; }
body.itemid-113.view-event .ic-event-view .btn-light.disabled { background: transparent; border-color: var(--border); color: var(--text); opacity: 1; }
body.itemid-113.view-event.light-mode .ic-event-view .btn-info:not(.disabled),
body.itemid-113.view-event.light-mode .ic-event-view .btn-outline-info:hover { color: #fff; }
/* Bloc principal : le cadre extérieur disparaît, le contenu tient dans une colonne */
body.itemid-113.view-event .ic-info { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.itemid-113.view-event .ic-image { float: none; width: 100%; max-width: 860px; height: auto; max-height: none; margin: 16px auto; padding: 0; border: 0; overflow: visible; }
body.itemid-113.view-event .ic-image img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border-radius: var(--radius); }
body.itemid-113.view-event .ic-details { width: 100%; max-width: 860px; margin: 0 auto; float: none; }
body.itemid-113.view-event .ic-event-date { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold); padding: 8px 0 12px; }
body.itemid-113.view-event .ic-event-date h2 { font-size: 20px; margin: 0; color: var(--text); }
body.itemid-113.view-event .ic-detail-desc { width: 100%; max-width: 860px; margin: 0 auto 24px; padding: 24px 28px; color: var(--text); font-size: 17px; line-height: 1.65; hyphens: none; word-break: normal; overflow-wrap: break-word; }
body.itemid-113.view-event .ic-detail-desc p,
body.itemid-113.view-event .ic-detail-desc li { color: var(--text); hyphens: none; word-break: normal; overflow-wrap: break-word; }
/* Case Information : pleine largeur de lecture, libellé à gauche, chiffre à droite */
body.itemid-113.view-event .ic-detail-desc .ic-info-box { width: 100%; max-width: 460px; margin: 24px auto 4px; }
body.itemid-113.view-event .ic-info-box-header { border-radius: 0; padding: 8px 20px; }
body.itemid-113.view-event .ic-info-box-header label { color: #111; margin: 0; letter-spacing: 1px; }
body.itemid-113.view-event.light-mode .ic-info-box-header label { color: #fff; }
body.itemid-113.view-event .ic-info-box-content { display: block; width: auto; margin: 0; padding: 6px 20px 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.itemid-113.view-event .ic-info-box .ic-divRow { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--border); }
body.itemid-113.view-event .ic-info-box .ic-divRow:last-child { border-bottom: 0; }
body.itemid-113.view-event .ic-info-box .ic-divCell { display: block; float: none; padding: 0; white-space: nowrap; color: var(--text); }
body.itemid-113.view-event .ic-info-box .ic-value { color: var(--gold); font-weight: 700; font-size: 1.15em; }
@media (max-width: 600px) {
  body.itemid-113.view-event .ic-detail-desc { padding: 16px; font-size: 16px; }
  body.itemid-113.view-event .ic-event-registration { float: none; width: 100%; }
}
/* FIN — Fiches RUN & Séjour */