/*
Theme Name: Rushless Chapter
Theme URI: https://www.samslim.fr/rushless-chapter
Author: Samuel Huaux
Author URI: https://www.samslim.fr
Description: A custom WordPress theme for Rushless Chapter Belgium
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rushless-chapter
*/

:root {
    --color-primary-red: #8B0000;
    --color-primary-red-dark: #6E0000;
    --color-secondary-grey: #55504A;
    --color-accent-silver: #CBBFA9;
    --color-chapter-green: #3B4838;
    --color-chapter-gold: #C58E1A;
    --color-warmth: #734524;
    --color-black: #231F20;
    --color-white: #FFFFFF;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Reset & Basics */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-white);
    color: var(--color-black);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--color-primary-red);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.site-branding .custom-logo-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 90px;
    margin: -22px 0;
    position: relative;
    z-index: 2;
}

.site-branding .custom-logo {
    height: 100%;
    width: auto;
    max-height: none;
    display: block;
    object-fit: contain;
}

.site-branding .site-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    text-transform: uppercase;
}

.site-branding .site-description {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-accent-silver);
    margin: 0;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Main Navigation */
.main-navigation {
    position: relative;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.main-navigation a:hover {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

/* Submenu Indicator Arrow */
.main-navigation .menu-item-has-children > a {
    position: relative;
    padding-right: 34px;
}

.main-navigation .menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-primary-red);
    transform: translateY(-50%);
    transition: transform 0.3s ease, border-top-color 0.3s ease;
}

.main-navigation .menu-item-has-children > a:hover::after {
    border-top-color: var(--color-white);
}

.main-navigation ul ul .menu-item-has-children > a {
    padding-right: 30px;
}

.main-navigation ul ul .menu-item-has-children > a::after {
    right: 12px;
}

/* Dropdown Submenus */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background-color: var(--color-black);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    flex-direction: column;
    border-top: 3px solid var(--color-primary-red);
}

.main-navigation li:hover>ul {
    display: block;
}

.main-navigation ul ul li {
    width: 100%;
}

.main-navigation ul ul a {
    padding: 12px 20px;
    font-size: 0.85rem;
    border-bottom: 1px solid #333;
}

.main-navigation ul ul a:hover {
    background-color: var(--color-primary-red);
    padding-left: 25px;
}

/* Account Icon (Buddy) */
.main-navigation .menu-account-icon>a {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .menu-account-icon>a svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--color-white) !important;
    transition: fill 0.3s ease;
    display: block !important;
}

.main-navigation .menu-account-icon>a:hover svg {
    fill: var(--color-primary-red) !important;
}

/* Responsive adjustments for Account Icon */
@media (max-width: 1200px) {
    .main-navigation .menu-account-icon>a svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 992px) {
    .main-navigation .menu-account-icon>a svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Dealer Portal Icon (Bar & Shield) */
.main-navigation .menu-dealer-icon>a {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .menu-dealer-icon>a svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--color-white) !important;
    transition: fill 0.3s ease;
    display: block !important;
}

.main-navigation .menu-dealer-icon>a:hover svg {
    fill: var(--color-primary-red) !important;
}

/* Responsive adjustments for Dealer Portal Icon */
@media (max-width: 1200px) {
    .main-navigation .menu-dealer-icon>a svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 992px) {
    .main-navigation .menu-dealer-icon>a svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Language Switcher Flags */
.main-navigation .lang-flag>a {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .lang-flag>a .lang-flag-icon {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

@media (max-width: 1200px) {
    .main-navigation .lang-flag>a .lang-flag-icon {
        width: 22px;
        height: 16px;
    }
}

@media (max-width: 992px) {
    .main-navigation .lang-flag>a .lang-flag-icon {
        width: 20px;
        height: 15px;
    }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Section */
.hero-section {
    color: var(--color-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    background-image: linear-gradient(135deg, #332a22 0%, #150f0c 55%, #3a1408 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(217, 162, 75, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(139, 0, 0, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.78) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-white);
    display: inline-block;
    /* Bordeaux par defaut (aligne sur le badge "A la une"), remplace par
       --hero-subtitle-bg si une couleur est choisie dans Reglages > Accueil. */
    background-color: var(--hero-subtitle-bg, var(--color-primary-red));
    padding: 0.4em 1.4em;
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 1.25rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-subtitle-rotator {
    margin-bottom: 1.25rem;
}

.hero-subtitle-rotator .hero-subtitle-item {
    display: none;
    margin-bottom: 0;
}

.hero-subtitle-rotator .hero-subtitle-item.is-active {
    display: inline-block;
    animation: hero-subtitle-fade 0.6s ease;
}

@keyframes hero-subtitle-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn {
    display: inline-block;
    padding: 12px 26px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    /* Pilule comme le CTA du hero (--btn-cta) : c'etait deja la forme la
       plus accueillante du site (audit design), generalisee ici a tous les
       boutons d'action plutot que reservee au seul hero. */
    border-radius: var(--radius-pill, 999px);
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}

.btn:hover {
    background-color: #a00000;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 0, 0, 0.25);
}

/* Premium CTA Button (Hero) — degrade + halo au repos (pas seulement au survol),
   pour correspondre au traitement "after" cible de l'audit design (bouton
   hero en pilule avec relief), plutot qu'un simple aplat de couleur. */
.btn-cta {
    padding: 18px 45px;
    font-size: 1rem;
    letter-spacing: 2px;
    border-radius: var(--radius-pill, 999px);
    border: 2px solid var(--color-primary-red);
    background: linear-gradient(135deg, var(--color-primary-red), var(--color-primary-red-dark));
    box-shadow: 0 6px 18px rgba(139, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-cta:hover {
    background: linear-gradient(135deg, var(--color-primary-red-dark), var(--color-primary-red-dark));
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(139, 0, 0, 0.6);
}

/* ------------------------------------------------------------------------ */
/* Configured Homepage Sections (ACF "Page d'accueil" + legacy Customizer)  */
/* ------------------------------------------------------------------------ */
.content-section {
    padding: clamp(16px, 2vw, 24px) 0;
}

.content-section--bg-white {
    background-color: var(--color-white);
}

.content-section--bg-gray {
    background-color: #f7f7f8;
}

.content-section--bg-red {
    background-color: var(--color-primary-red);
    color: var(--color-white);
    --bar-color: var(--color-white);
}

.content-section + .content-section {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.content-section .row {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.content-section--image-left .row {
    flex-direction: row-reverse;
}

.content-section .col-text,
.content-section .col-image {
    flex: 1;
}

/* Shared "3 decreasing bars" title decoration (top-to-bottom taper,
   echoing the chapter logo's wings) — also reused as-is by
   .featured-post-label (theme) and .chapter-testimonials-label (plugin)
   so every homepage section heading looks consistent. Bordeaux by
   default; --bar-color is overridden to white wherever the section
   background is bordeaux (see .content-section--bg-red above and the
   inline --bar-color set by rushless_get_bg_style() for the featured
   post section). */
.content-section .col-text h2 {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1.1rem;
}

.content-section .col-text h2::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--bar-color, var(--color-primary-red)), var(--bar-color, var(--color-primary-red))),
        linear-gradient(var(--bar-color, var(--color-primary-red)), var(--bar-color, var(--color-primary-red))),
        linear-gradient(var(--bar-color, var(--color-primary-red)), var(--bar-color, var(--color-primary-red)));
    background-size: 100% 4px, 68% 4px, 38% 4px;
    background-position: top left, 0 10px, 0 20px;
}

.content-section .col-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
}

.content-section--bg-red .col-text p {
    color: rgba(255, 255, 255, 0.85);
}

.content-section .col-text .btn {
    margin-top: 0.5rem;
}

.content-section--bg-red .btn {
    background-color: var(--color-white);
    color: var(--color-primary-red);
}

.content-section--bg-red .btn:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

.content-section .col-image img {
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.4s ease;
}

.content-section .col-image:hover img {
    transform: scale(1.02);
}

/* Back to top */
#rushless-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.3s ease;
    z-index: 999;
}

#rushless-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#rushless-back-to-top:hover {
    background-color: var(--color-primary-red-dark);
}

/* Footer */
.site-footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 24px 0 16px;
    margin-top: 0;
    border-top: 5px solid var(--color-primary-red);
}

.footer-brand {
    margin-bottom: 30px;
}

.footer-brand .custom-logo {
    max-height: 70px;
    width: auto;
    display: block;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-widget h3 {
    color: var(--color-primary-red);
    margin-bottom: 1.5rem;
}

.footer-contact-text {
    color: var(--color-accent-silver);
    margin-bottom: 0.5rem;
}

.footer-contact-text a {
    color: var(--color-accent-silver);
    transition: color 0.3s ease;
}

.footer-contact-text a:hover {
    color: var(--color-primary-red);
}

/* Footer Menu */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.5rem;
}

.footer-menu a {
    color: var(--color-accent-silver);
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: var(--color-primary-red);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--color-accent-silver);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.social-links a:hover {
    color: var(--color-primary-red);
}

.social-icon {
    font-size: 1.2rem;
}

.site-info {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    font-size: 0.8rem;
    color: #888;
}

.header-inner {
    flex-wrap: wrap;
    position: relative;
}

.site-branding {
    flex: 1;
}

.site-branding .site-title {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .site-branding .custom-logo-link {
        height: 60px;
        margin: -12px 0;
    }
}

.site-branding .site-description {
    display: none;
}

/* Menu Toggle Button - iOS Compatible */
.menu-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 15px;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
    color: var(--color-primary-red);
    outline: none;
}

.menu-toggle .hamburger {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-white);
    position: relative;
    transition: all 0.3s ease;
    pointer-events: none;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: var(--color-white);
    transition: all 0.3s ease;
    pointer-events: none;
}

.menu-toggle .hamburger::before {
    top: -8px;
}

.menu-toggle .hamburger::after {
    top: 8px;
}

.menu-toggle.active .hamburger {
    background-color: transparent;
}

.menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile Navigation */
/* transform: translateX() plutot que right:-100% : un decalage en
   pourcentage sur un element position:fixed est quand meme compte dans le
   scrollable overflow de la page (meme hors-ecran), ce qui elargissait le
   viewport mobile au-dela de la largeur de l'appareil et faisait deborder
   tout le contenu en width:100% (ex: recherche/filtres du trombinoscope). */
.main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-black);
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 60px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}



/* Content section columns stack a bit earlier (900px) than the general
   768px mobile breakpoint below, since the two-column layout gets cramped
   on tablet-width viewports well before phone width. */
@media (max-width: 900px) {
    .content-section .row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .content-section .col-text,
    .content-section .col-image {
        width: 100%;
        flex: none;
    }

    .content-section .col-text {
        text-align: center;
        padding: 0 10px;
    }

    .content-section .col-image img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .main-navigation a {
        width: 100%;
        padding: 15px 25px;
    }

    /* Sous-menus mobiles : positionnement inline (accordion), masqués par défaut */
    .main-navigation ul ul {
        position: static !important;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--color-primary-red);
        min-width: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Désactiver l'ouverture par :hover sur mobile */
    .main-navigation li:hover > ul {
        display: none;
    }

    /* Ouverture contrôlée uniquement par la classe JS submenu-open */
    .main-navigation .submenu-open > ul {
        display: block !important;
    }

    /* Rotation de la flèche quand le sous-menu accordéon est ouvert */
    .main-navigation .submenu-open > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Décaler le menu sous la barre d'admin WordPress (visible si connecté) */
    body.admin-bar .main-navigation {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-section {
        padding: 20px 0;
    }

    .content-section {
        padding: 16px 0;
    }

    .content-section .row,
    .content-section--image-left .row {
        flex-direction: column;
        gap: 32px;
    }

    /* La photo marquante passe avant le texte sur mobile. Portee au
       .col-image generique des sections de contenu (page/anniversaire) :
       si une future section y place un logo plutot qu'une photo, revoir
       ce point section par section plutot que d'elargir la portee. */
    .content-section .col-image {
        order: -1;
    }

    .content-section .col-text h2 {
        font-size: 1.6rem;
    }

    .content-section .col-image img {
        height: 300px;
    }
}

.main-navigation.toggled {
    transform: translateX(0);
    display: block;
}

.container {
    padding: 0 15px;
}

/* Footer responsive */
.social-links {
    flex-direction: column;
    gap: 10px;
}


/* iPhone & Small Mobile */
@media (max-width: 480px) {
    .site-branding .site-title {
        font-size: 1rem;
    }

    .main-navigation {
        width: 100%;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-section {
        padding: 16px 0;
    }

    .btn-cta {
        padding: 14px 30px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .site-footer {
        padding: 30px 0 15px;
    }
}

/* Hide menu toggle on desktop */
@media (min-width: 769px) {
    /* Rotate the submenu arrow when the dropdown opens on hover */
    .main-navigation li.menu-item-has-children:hover > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .menu-toggle {
        display: none !important;
    }

    .menu-overlay {
        display: none !important;
    }

    /* Reset Main Navigation for Desktop */
    .main-navigation {
        position: static !important;
        height: auto !important;
        width: auto !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding-top: 0 !important;
        overflow-y: visible !important;
        right: auto !important;
        transform: none !important;
        display: block !important;
    }
}

/* Archive / Grid Layout */
.page-header {
    margin-bottom: 3rem;
    text-align: center;
    padding-top: clamp(16px, 2vw, 24px);
}

/* Same size as .chapter-timeline-heading ("RETOUR SUR NOS AVENTURES"),
   so every page heading using the bar-decorated title looks consistent. */
.page-title {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    color: var(--color-black);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

/* Barre de filtres sous le titre (archive-chapter_occasion.php) : recherche
   libre + switch Occasions/Neuves, cote a cote et centres. */
.occasions-filters-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.occasions-search-input {
    padding: 12px 20px;
    border: 1px solid #ddd;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.95rem;
    min-width: 260px;
}

.occasions-search-input:focus {
    outline: none;
    border-color: var(--color-primary-red);
}

/* Switch Occasions/Neuves (archive-chapter_occasion.php) : meme pilule
   rouge que .btn, mais en groupe de 2 segments dont un seul est actif. */
.occasions-state-switch {
    display: inline-flex;
    gap: 6px;
    background: #f2f2f2;
    padding: 6px;
    border-radius: var(--radius-pill, 999px);
}

.occasions-state-switch__option {
    display: inline-block;
    padding: 10px 24px;
    border-radius: var(--radius-pill, 999px);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--color-black);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.occasions-state-switch__option:hover {
    color: var(--color-primary-red);
}

.occasions-state-switch__option.is-active {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

.occasions-state-switch__option.is-active:hover {
    color: var(--color-white);
}

/* Bar-decorated page heading (e.g. "= RETOUR SUR NOS AVENTURES =")
   Each side shows 3 bars of decreasing size top-to-bottom, echoing the
   tapered wings on the chapter logo. */
.page-title-bars {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.page-title-bars::before,
.page-title-bars::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--color-primary-red), var(--color-primary-red)),
        linear-gradient(var(--color-primary-red), var(--color-primary-red)),
        linear-gradient(var(--color-primary-red), var(--color-primary-red));
    background-size: 100% 4px, 68% 4px, 38% 4px;
    background-position: top right, 100% 10px, 100% 20px;
}

.page-title-bars::after {
    background-position: top left, 0 10px, 0 20px;
}

.archive-description {
    color: var(--color-secondary-grey);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* Increased min-width */
    gap: 50px;
    /* Increased from 30px */
    margin-bottom: 2.5rem;
}

.post-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.post-card .post-thumbnail {
    position: relative;
    padding-top: 60%;
    /* Taller image */
    overflow: hidden;
    background: #fafafa;
}

.post-card .post-thumbnail a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.post-card:hover .post-thumbnail img {
    transform: scale(1.08);
}

.post-card .post-content {
    padding: 30px;
    /* Increased from 20px */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card .entry-meta {
    font-size: 0.9rem;
    color: var(--color-primary-red);
    /* Changed to red for contrast */
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.post-card .entry-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.post-card .entry-title a {
    text-decoration: none;
    color: var(--color-black);
}

.post-card .entry-title a:hover {
    color: var(--color-primary-red);
}

.post-card .entry-summary {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
    flex-grow: 1;
    line-height: 1.8;
    /* improved readability */
}

.post-card .entry-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

/* Carte "Hommages" : meme gabarit que les autres articles (coherence de
   grille), mais un accent or/bronze plutot que rouge pour signaler le
   changement de ton avant le clic, au lieu d'un rendu identique a une
   actualite ordinaire (audit design du 2026-07-07). */
.post-card--tribute {
    border-color: var(--color-chapter-gold);
    border-width: 1px 1px 1px 4px;
}

.post-card-tribute-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(197, 142, 26, 0.12);
    color: var(--color-warmth);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
}

.post-card-tribute-badge .dashicons {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.btn-read-more {
    display: inline-block;
    color: var(--color-primary-red);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-read-more:hover {
    color: var(--color-black);
    padding-left: 5px;
    /* Subtle movement */
}

.pagination-wrapper .nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 1rem;
}

/* Meme pilule rouge que les boutons du site (.btn), au lieu d'un simple
   lien souligne : coherence visuelle demandee sur la pagination des
   archives (motos d'occasion, actualites, etc.). */
.pagination-wrapper a {
    display: inline-block;
    padding: 12px 26px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border-radius: var(--radius-pill, 999px);
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}

.pagination-wrapper a:hover {
    background-color: #a00000;
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 0, 0, 0.25);
}

/* Single Post Specifics */
.small-container {
    max-width: 800px;
    /* Optimal reading width */
    margin: 0 auto;
}

.single-post-article .entry-header {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.entry-back-link {
    margin-top: 2rem;
}

.back-to-reportages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-secondary-grey);
    transition: color 0.3s ease;
}

.back-to-reportages:hover {
    color: var(--color-primary-red);
}

.single-post-article .header-meta {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--color-secondary-grey);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}

.single-post-article .cat-links a {
    color: var(--color-primary-red);
}

.single-post-article .entry-title {
    font-size: 3rem;
    /* Big title */
    line-height: 1.2;
    margin-bottom: 1rem;
}

.post-hero-image {
    margin-bottom: 3rem;
}

.post-hero-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.single-post-article .entry-content {
    font-size: 1.1rem;
    /* Slightly larger for reading */
    line-height: 1.8;
    color: #333;
}

.single-post-article .entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content p {
    text-align: left;
}

.single-post-article .entry-content h2 {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-primary-red);
    padding-left: 15px;
}

.separator {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 3rem 0;
}

.single-post-navigation {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4rem;
}

.single-post-navigation a {
    transition: color 0.3s ease;
}

.single-post-navigation a:hover {
    color: var(--color-primary-red);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .single-post-article .entry-title {
        font-size: 2rem;
    }

    .single-post-article .entry-content {
        font-size: 1rem;
    }
}

/* espacement images & blocs */

.single-post-article .entry-content img {
    display: block;
    margin: 2.5rem auto;
    /* espace au-dessus / au-dessous de chaque image */
    border-radius: 8px;
}

.single-post-article .entry-content hr,
.single-post-article .entry-content .wp-block-separator {
    margin: 3rem 0;
    /* confirme un bon espace autour des séparateurs */
}

.single-post-article .entry-content h2,
.single-post-article .entry-content h3 {
    margin-top: 3rem;
    /* souffle avant un nouveau bloc/titre */
}

/* Hero Title Row: club logo + title + dealership partner logo */
.hero-title-row {
    display: flex;
    /* nowrap on purpose: with flex-wrap the row could partially wrap (e.g.
       club logo + title fit on one line but the dealership logo alone gets
       pushed to a second line, misaligned) whenever the three items didn't
       quite fit — the logos below shrink fluidly instead so all items
       always stay on the same line. */
    flex-wrap: nowrap;
    /* Aligne le bas des logos sur le bas du titre plutot que de centrer :
       avec des logos hauts de 150-200px, un centrage vertical laissait un
       grand vide sous le texte, ce qui eloignait visuellement le sous-titre
       du titre (audit design). */
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 3vw, 24px);
    margin-bottom: 0.3rem;
}

/* On wide screens, spread the logos out to the edges of the container
   instead of hugging the title, using the empty space either side. */
@media (min-width: 993px) {
    .hero-title-row {
        justify-content: space-between;
    }
}

.hero-title-row .hero-title {
    margin-bottom: 0;
    /* Lets the title shrink/wrap onto a second line instead of overflowing
       the row when the two fixed-size logo slots leave little room — the
       default flex min-width:auto would otherwise refuse to shrink below
       its single-line width. */
    min-width: 0;
}

/* Fluid box (vw-based, not tied to the source image's own aspect ratio) so
   the row's width never depends on how the logo happens to be cropped — if
   the logo is recropped to a different shape, the slot stays put and the
   title stays centered between the two logos; object-fit: contain then
   fits whatever aspect ratio inside without distorting the box. Sized with
   clamp() rather than fixed breakpoint steps so it shrinks smoothly and
   never forces the row wider than the viewport (which used to make the
   row's flex-wrap kick in and misalign the logos — see nowrap note above). */
.hero-logo {
    flex-shrink: 1;
    min-width: 0;
    width: clamp(70px, 12vw, 170px);
    height: clamp(48px, 8vw, 110px);
    display: flex;
    align-items: flex-end;
}

.hero-logo-club {
    justify-content: flex-start;
}

/* The dealership logo is optionally wrapped in a <a href="..."> (see
   hero.php) when a partner URL is set — unlike the club logo, which is a
   bare <img>. That anchor has no height of its own, so the img's
   max-height:100% below has nothing to resolve against and renders
   uncapped (percentage heights need a parent with a real height), letting
   the logo grow taller than its box and throwing off the bottom alignment.
   Giving the anchor the box's full size and re-declaring the flex
   alignment on it fixes that. */
.hero-logo a {
    display: flex;
    align-items: flex-end;
    justify-content: inherit;
    width: 100%;
    height: 100%;
}

.hero-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Same height as .hero-logo (club badge) so both boxes share the same
   vertical center once bottom-aligned in the row — a taller box here would
   put its center higher than the club logo's, reading as misaligned even
   though both bottoms line up. Only the width differs, for visual balance. */
.hero-logo-dealership-desktop {
    width: clamp(80px, 14vw, 200px);
    height: clamp(48px, 8vw, 110px);
    justify-content: flex-end;
}

/* The dealership logo is rendered twice in the markup: once beside the title
   (desktop) and once below the subtitle (mobile). Only one copy is shown at
   a time — the other stays hidden per breakpoint below. */
.hero-logo-dealership-mobile {
    display: none;
    width: 220px;
    height: 130px;
}

/* Responsive for Hero Title Row */
@media (max-width: 992px) {
    .hero-title-row {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .hero-title-row {
        gap: 12px;
    }

    /* The club logo already appears in the site header on every screen size;
       drop it here on small screens to avoid redundancy and keep the title readable. */
    .hero-logo-club {
        display: none;
    }

    /* Below the subtitle instead of cramped next to the title on narrow screens. */
    .hero-logo-dealership-desktop {
        display: none;
    }

    .hero-logo-dealership-mobile {
        display: flex;
        justify-content: center;
        /* Fixed box from the base rule (220x130) isn't centered by the
           ancestor's text-align:center, since a block-level flex box ignores
           it; margin:auto does the actual centering. Also shrunk — 220px
           read as oversized against the mobile title/subtitle. */
        width: 150px;
        height: 90px;
        margin: 0.5rem auto 1rem;
    }
}

/* Restrict Excerpt Length Visuals in Grid */
.entry-summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    /* Limit to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fallback for non-webkit if needed, usually webkit works in most modern browsers for this prop */
    height: 6em;
    /* Fallback height approximately 4 lines */
}

/* =========================================
   ABOUT PAGE IMPROVEMENTS
   ========================================= */

/* About Page Container */
.about-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Montserrat', sans-serif;
}

/* Titles */
.about-hero-title {
    text-align: center;
    margin-bottom: 60px;
}

.about-hero-title h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 20px;
}

.red-separator {
    width: 60px;
    height: 4px;
    background-color: var(--color-primary-red);
    border: none;
    margin: 0 auto;
}

.yellow-separator {
    width: 80px;
    height: 3px;
    background-color: var(--color-primary-red);
    /* Changed to red */
    border: none;
    margin: 20px auto 0;
}

/* Intro Section */
.about-section-cols {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    /* Better for text alignment */
    margin-bottom: 80px;
}

.about-col-text {
    flex: 1;
}

.about-col-text h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

.about-col-text h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--color-primary-red);
}

.about-col-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
    text-align: left;
}

.about-col-image {
    flex: 1;
}

.about-col-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Mantra Section */
.about-mantra-section {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--color-black);
    color: #fff;
    margin: 0 -20px 80px;
    border-radius: 4px;
}

.about-mantra-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mantra-highlight {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: var(--color-chapter-gold);
    display: block;
    margin-bottom: 20px;
}

/* History Section */
.about-history-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    margin: 0 -20px 60px;
    text-align: center;
}

.about-history-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-history-node h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-history-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    text-align: left;
}

/* Tribute Box */
.about-tribute-box {
    background: #fff;
    border-left: 5px solid var(--color-primary-red);
    padding: 30px;
    margin-top: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.about-tribute-box h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-black);
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.about-tribute-box p {
    font-style: italic;
    color: #444;
}

/* Values Grid */
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.about-values-grid.five-cols {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Espace entre le medaillon partage (chapter-tools) et le titre, dans le
   contexte specifique de cette grille — pas une regle du composant lui-meme. */
.value-item .chapter-icon-medallion {
    margin-bottom: 20px;
}

/* Repli si le plugin chapter-tools (et son composant medaillon partage)
   est desactive — voir template-about.php. Valeurs alignees sur
   .chapter-icon-medallion--md pour rester visuellement identique. */
.value-item .value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(197, 142, 26, 0.12);
    border: 1px solid rgba(197, 142, 26, 0.3);
}

.value-item .value-icon .dashicons {
    font-size: 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--color-primary-red);
}

.value-item h3 {
    font-family: 'Oswald', sans-serif;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 700;
}

.value-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

/* CTA Section */
.about-cta-section {
    text-align: center;
    background: var(--color-black);
    color: #fff;
    padding: 80px 20px;
    margin: 80px -20px -60px;
    border-radius: 4px;
}

.about-cta-section h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.about-cta-section p {
    max-width: 600px;
    margin: 0 auto 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc;
}

.about-cta-section .btn {
    display: inline-block;
    background-color: var(--color-primary-red);
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: var(--radius-pill, 999px);
    margin-top: 30px;
    text-decoration: none;
    transition: background 0.3s;
    border: 2px solid var(--color-primary-red);
}

.about-cta-section .btn:hover {
    background-color: transparent;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .about-section-cols {
        flex-direction: column;
    }

    .about-col-image img {
        height: 220px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        /* Fallback */
    }

    .about-values-grid.five-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-hero-title h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .about-values-grid.five-cols {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------------------------------- */
/*COMMENTS SECTION STYLING (Added for Routes & Posts)
/* -------------------------------------------------------------------------- */

/* Comment Area Container */
.comments-area {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #eee;
}

.comments-title,
.comment-reply-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 2rem;
    border-left: 5px solid var(--color-primary-red);
    padding-left: 15px;
}

/* Comment List */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list .comment {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 2.5rem;
}

.comment-list .comment:last-child {
    border-bottom: none;
}

.comment-body {
    position: relative;
    padding-left: 80px;
    /* Space for avatar */
}

/* Chapter Google Photos Block */
.chapter-photos-block-container {
    padding: 20px 0;
}

.splide__slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Trombinoscope Styling Update */
.member-real-name {
    font-size: 0.9em;
    color: #777;
    margin: -5px 0 10px 0;
    /* Tighten to main name */
    font-style: italic;
}

/* Avatar */
.comment-list .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--color-chapter-gold);
}

/* Metadata */
.comment-meta {
    margin-bottom: 0.5rem;
}

.comment-author .fn {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
}

.comment-metadata {
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
}

.comment-content {
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Reply Link */
.reply {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
}

.comment-reply-link {
    color: var(--color-primary-red);
    text-decoration: none;
}

.comment-reply-link:hover {
    color: var(--color-black);
    text-decoration: underline;
}

/* Comment Form */
.comment-respond {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 4px;
    margin-top: 3rem;
    border-left: 3px solid var(--color-secondary-grey);
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.comment-notes,
.logged-in-as {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-black);
    text-transform: uppercase;
    font-size: 0.85rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Submit Button */
.comment-respond .submit,
.comment-respond input[type="submit"],
.comment-respond button[type="submit"],
.comment-form-submit .submit {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-form-submit .submit:hover {
    background-color: #a00000;
}

/* Threaded Comments (Nested) */
.comment-list .children {
    list-style: none;
    margin-left: 50px;
    margin-top: 2rem;
    border-left: 2px solid #eee;
    padding-left: 2rem;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .comment-list .children {
        margin-left: 20px;
        padding-left: 1rem;
    }

    .comment-body {
        padding-left: 0;
    }

    .comment-list .avatar {
        position: static;
        margin-bottom: 1rem;
        width: 50px;
        height: 50px;
    }
}

/* -------------------------------------------------------------------------- */
/*ROUTE LIBRARY FILTERS (Search & Country)
/* -------------------------------------------------------------------------- */

/* The container's own layout (flex row, gap, margin) is set inline in
   Chapter_Routes_Library_Renderer::display_routes_library(); the actual
   search/select/button sizing (pill radius, padding, font-size — same scale
   as .occasions-search-input / .occasions-state-switch__option) lives
   entirely in chapter-tools-public.css (.chapter-routes-filters input/select,
   .chapter-routes-filter-btn). This block used to duplicate both with
   different, older values (2px #eee borders, 4px radius, 1rem font) — two
   competing definitions fighting over the same elements is exactly what
   made the filter bar look unstyled/mismatched with the rest of the site,
   so it's removed here rather than kept in sync in two places. Only the
   mobile stacking behaviour below still belongs here. */

/* Mobile Adjustments */
@media (max-width: 768px) {

    .chapter-routes-filters input[type="text"],
    .chapter-routes-filters select,
    .chapter-routes-filters button[type="submit"] {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* -------------------------------------------------------------------------- */
/*CHAPTER PROFILE FORM STYLING
/* -------------------------------------------------------------------------- */

.chapter-profile-container {
    padding: 2rem 0;
}

.chapter-profile-container h2,
.chapter-profile-container h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--color-primary-red);
    padding-left: 15px;
}

.chapter-profile-container h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.chapter-profile-container h3 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
    color: var(--color-secondary-grey);
}

.chapter-profile-form .form-row {
    margin-bottom: 1.5rem;
}

.chapter-profile-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-black);
}

.chapter-profile-form input[type="text"],
.chapter-profile-form input[type="email"],
.chapter-profile-form input[type="tel"],
.chapter-profile-form input[type="date"],
.chapter-profile-form input[type="number"],
.chapter-profile-form textarea,
.chapter-profile-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.chapter-profile-form input:focus,
.chapter-profile-form textarea:focus,
.chapter-profile-form select:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

/* Specific adjustments for Moto Repeater */
.chapter-moto-row {
    background: #fff !important;
    /* Override inline */
    border: 1px solid #eee !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chapter-moto-row strong {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-red);
    text-transform: uppercase;
}

/* Submit Button */
.chapter-profile-form button[type="submit"] {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 2rem;
    width: 100%;
    /* Full width on mobile/tablet */
}

@media (min-width: 768px) {
    .chapter-profile-form button[type="submit"] {
        width: auto;
    }
}

.chapter-profile-form button[type="submit"]:hover {
    background-color: var(--color-black);
}

/* Custom File Input Styling */
.chapter-profile-form input[type="file"] {
    border: none;
    padding: 10px 0;
    background: transparent;
    font-size: 1rem;
    /* Larger text for 'No file chosen' */
    color: var(--color-secondary-grey);
    width: 100%;
}

.chapter-profile-form input[type="file"]::file-selector-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    /* Slight radius */
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 15px;
}

.chapter-profile-form input[type="file"]::file-selector-button:hover {
    background-color: var(--color-primary-red);
}

/* Legacy Webkit support */
.chapter-profile-form input[type="file"]::-webkit-file-upload-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 15px;
}

.chapter-profile-form input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--color-primary-red);
}

/* -------------------------------------------------------------------------- */
/* REPORTAGE AUTHORS & CREDITS
/* -------------------------------------------------------------------------- */
.chapter-reportage-credits {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}

.chapter-reportage-credits h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--color-black);
    text-transform: uppercase;
    font-weight: 700;
}

.reportage-authors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.reportage-author-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #fff;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.reportage-author-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary-red);
}

.reportage-author-info {
    display: flex;
    flex-direction: column;
}

.reportage-author-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-black);
}

.reportage-author-role {
    font-size: 0.75rem;
    color: var(--color-secondary-grey);
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* GOOGLE PHOTOS BLOCK
/* -------------------------------------------------------------------------- */
.chapter-photos-block-container {
    margin: 2rem 0;
}

.chapter-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.chapter-photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.chapter-photo-item img:hover {
    transform: scale(1.02);
}

/* Carousel Mode */
.chapter-photos-carousel {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 15px;
    /* Scrollbar space */
    scroll-snap-type: x mandatory;
}

.chapter-photos-carousel .chapter-photo-item {
    flex: 0 0 300px;
    scroll-snap-align: center;
}

.chapter-photos-carousel .chapter-photo-item img {
    height: 250px;
}

.chapter-photos-link {
    display: block;
    margin-top: 1rem;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary-red);
    text-decoration: none;
}

.chapter-photos-link:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* BIRTHDAY FEATURE
/* Positionnable via ACF (Réglages — Page d'accueil > Sections > "Section
   shortcode" avec [chapter_birthday]) ou via le shortcode direct dans une
   page. Toujours son propre design (pas la section generique image/texte) :
   photo et nom restent associes dans une meme carte, y compris si deux
   membres partagent un surnom. */
/* -------------------------------------------------------------------------- */
.chapter-birthday-section {
    padding: 32px 0;
}

.chapter-birthday-heading {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.chapter-birthday-heading-icon {
    color: var(--color-warmth);
}

.chapter-birthday-intro {
    text-align: center;
    color: var(--color-secondary-grey);
    margin-bottom: 20px;
}

.chapter-birthday-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.chapter-birthday-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

.chapter-birthday-card-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--color-warmth);
    box-shadow: var(--shadow-soft);
    margin-bottom: 10px;
}

.chapter-birthday-card-name {
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    color: var(--color-black);
}

/* -------------------------------------------------------------------------- */
/* TROMBINOSCOPE MEMBER NAME
/* -------------------------------------------------------------------------- */
.member-real-name {
    display: block;
    font-size: 0.85em;
    color: #777;
    margin-top: 2px;
    font-weight: normal;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE SHOP DROPDOWNS
/* -------------------------------------------------------------------------- */
.woocommerce-ordering select.orderby,
.woocommerce select {
    padding: 10px 35px 10px 15px;
    border: 2px solid #eee;
    border-radius: 4px;
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-black);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238B0000' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    transition: border-color 0.3s ease;
}

.woocommerce-ordering select.orderby:focus,
.woocommerce select:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE SALE BADGE
/* -------------------------------------------------------------------------- */
.woocommerce span.onsale {
    background-color: var(--color-chapter-green) !important;
    color: var(--color-white) !important;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Prix soldé (ins) : rouge du club au lieu du vert WooCommerce par défaut */
.woocommerce ul.products li.product .price ins,
.woocommerce .price ins,
.woocommerce .price ins .woocommerce-Price-amount {
    color: var(--color-primary-red) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Prix barré (del) : gris discret */
.woocommerce ul.products li.product .price del,
.woocommerce .price del,
.woocommerce .price del .woocommerce-Price-amount {
    color: var(--color-secondary-grey) !important;
    opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE BUTTONS
/* -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button {
    background-color: var(--color-primary-red) !important;
    color: var(--color-white) !important;
    border: none;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

/* -------------------------------------------------------------------------- */
/* WOOCOMMERCE MY ACCOUNT
/* -------------------------------------------------------------------------- */
.woocommerce form.login,
.woocommerce form.register {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.woocommerce form .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce form .form-row label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-black);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-primary-red);
    outline: none;
}

.woocommerce form .show-password-input {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}

/* Bouton "Se connecter" : explicite plutot que de dependre uniquement de la
   regle "Harmonize Buttons" (chapter-tools-public.css) — le formulaire de
   connexion WooCommerce s'affiche avant que l'utilisateur soit identifie,
   contexte ou d'autres regles de specificite peuvent differer. */
.woocommerce-form-login__submit,
button[name="login"] {
    background-color: var(--color-primary-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill, 999px) !important;
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px !important;
}

.woocommerce-form-login__submit:hover,
button[name="login"]:hover {
    background-color: var(--color-primary-red-dark, #6E0000) !important;
}

.woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: normal;
    text-transform: none;
    cursor: pointer;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: var(--color-white);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
    background: var(--color-primary-red);
    border-color: var(--color-primary-red);
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    margin: 1px auto 0;
    transform: rotate(45deg);
}

.woocommerce-form-login__rememberme input[type="checkbox"]:hover {
    border-color: var(--color-primary-red);
}

.woocommerce form.login .woocommerce-error,
.woocommerce form.register .woocommerce-error {
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

.woocommerce form .form-row.woocommerce-form-row--first,
.woocommerce form .form-row.woocommerce-form-row--last,
p.woocommerce-form-login__submit ~ * {
    margin-top: 1rem;
}

.woocommerce form.login .lost_password,
.woocommerce-LostPassword {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.woocommerce form.login .lost_password a,
.woocommerce-LostPassword a {
    color: var(--color-primary-red);
    text-decoration: none;
}

.woocommerce form.login .lost_password a:hover,
.woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* My Account dashboard (logged-in) – navigation verticale sidebar */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: none;
    border-right: 2px solid #eee;
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
    width: 100%;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: var(--color-secondary-grey);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.woocommerce-MyAccount-navigation li:last-child a {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--color-primary-red);
    border-left-color: var(--color-primary-red);
    background: #fdf5f5;
}

.woocommerce-MyAccount-content {
    max-width: 800px;
}

.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
    padding: 12px;
    border: 1px solid #eee;
    text-align: left;
}

.woocommerce-MyAccount-content table.shop_table th {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    list-style: none;
    /* WooCommerce core reserves left space for its icon (::before, absolutely
       positioned around left:1.5em); a flat symmetric padding here collapses
       that space and the icon lands on top of the message text. */
    padding: 1rem 1.5rem 1rem 3.5rem;
    margin: 0 0 1.5rem;
    border-radius: 4px;
    border-left: 4px solid var(--color-primary-red);
    background: #fdf5f5;
    font-size: 0.95rem;
    /* WooCommerce JS focuses this element on render so screen readers
       announce it; it isn't an interactive control, so drop the default
       focus ring instead of leaving a stray blue box (visible on iOS Safari). */
    outline: none;
}

.woocommerce-message {
    border-left-color: var(--color-chapter-green);
    background: #f3f7f4;
}

.woocommerce-info {
    border-left-color: var(--color-secondary-grey);
    background: #f5f5f5;
}

/* --- Featured Post (Article à la une) ---
   Rendered as a plain section title (same size + left-side bar decoration
   as the other homepage section headings) rather than a colored pill
   badge, for visual consistency across the homepage. */
.featured-post-label {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.featured-post-label::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--bar-color, var(--color-primary-red)), var(--bar-color, var(--color-primary-red))),
        linear-gradient(var(--bar-color, var(--color-primary-red)), var(--bar-color, var(--color-primary-red))),
        linear-gradient(var(--bar-color, var(--color-primary-red)), var(--bar-color, var(--color-primary-red)));
    background-size: 100% 4px, 68% 4px, 38% 4px;
    background-position: top left, 0 10px, 0 20px;
}

.featured-post-card {
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
}

.featured-post-card .post-thumbnail {
    flex: 1 1 45%;
    padding-top: 0;
    height: 300px;
}

.featured-post-card .post-content {
    flex: 1 1 55%;
    justify-content: center;
}

@media (max-width: 768px) {
    .featured-post-card {
        flex-direction: column;
    }

    .featured-post-card .post-thumbnail {
        flex: 0 0 220px;
        height: 220px;
    }
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
    color: var(--color-primary-red);
    font-weight: 700;
    text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* DEALERSHIP EVENTS - "Suivez-nous sur Facebook" (recolor to match site .btn) */
/* -------------------------------------------------------------------------- */
.chapter-dealership-fb-follow {
    background: var(--color-primary-red) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.chapter-dealership-fb-follow:hover {
    background: #a00000 !important;
    color: var(--color-white) !important;
}

/* Mobile: stack logo / name / FB button instead of squeezing them onto one
   row, which made the button wrap and overlap the partner name. */
@media (max-width: 768px) {
    .chapter-dealership-events-partner {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left;
    }

    .chapter-dealership-events-partner-info {
        width: 100%;
    }

    .chapter-dealership-fb-follow {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
        font-size: 12px;
    }
}

/* -------------------------------------------------------------------------- */
/* LIFE MEMBER – Toggle switch
/* -------------------------------------------------------------------------- */

/* Aligne le label et le toggle sur la même ligne */
.form-row:has(#chapter_hog_life) {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.form-row:has(#chapter_hog_life) label {
    display: inline;
    margin-bottom: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Toggle switch */
#chapter_hog_life {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 24px;
    position: relative;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: background 0.3s ease;
    border: none;
}

#chapter_hog_life::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#chapter_hog_life:checked {
    background: var(--color-chapter-gold);
}

#chapter_hog_life:checked::before {
    left: 23px;
}

/* Fallback : si :has() non supporté, on garde quand même le switch visible */
p.form-row input[type="checkbox"]#chapter_hog_life {
    min-width: 44px;
}

/* -------------------------------------------------------------------------- */
/* EVENT CTAs — S'inscrire (cards & list)
/* -------------------------------------------------------------------------- */

/* Bouton "S'inscrire" dans les cartes événement (vue grille / inscriptions ouvertes) */
a.event-card-cta {
    display: block;
    text-align: center;
    padding: 10px 20px;
    background-color: var(--color-primary-red);
    color: var(--color-white) !important;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

a.event-card-cta:hover {
    background-color: var(--color-primary-red-dark);
    color: var(--color-white) !important;
    transform: translateY(-1px);
}

/* Conteneur de détails d'un item événement (liste) — flex pour aligner le CTA à droite */
.event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: #555;
}

/* Lien "S'inscrire" dans les lignes de la liste événement (vue calendrier) */
a.event-item-cta {
    display: inline-block;
    padding: 5px 16px;
    background-color: var(--color-primary-red);
    color: var(--color-white) !important;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    margin-left: auto;
    white-space: nowrap;
}

a.event-item-cta:hover {
    background-color: var(--color-primary-red-dark);
    color: var(--color-white) !important;
}