/* Responsive sports grid: last card with text beside image if odd number of cards */
.sports-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .sports-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Affichage "feature" pour la dernière carte seulement si le nombre de cartes est pair (géré côté HTML via une classe JS ou server, ou via :nth-child(even):last-child si besoin) */
  .sports-grid .card.card-discover-feature.featured-last {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 320px;
  }
  .sports-grid .card.card-discover-feature.featured-last .image-aspect-ratio-2-1 {
    grid-column: 1;
    height: 173px;
    min-height: unset;
    border-radius: 0.5rem 0 0 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .sports-grid .card.card-discover-feature.featured-last .image-aspect-ratio-2-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .sports-grid .card.card-discover-feature.featured-last .card-content-custom-padding {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 2.5rem 2.5rem 2.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--white);
    box-shadow: none;
  }
}
/* Design System Styles */
/* Based on design.md */

/* 1. Root and Base Styles */
:root {
  --primary-color: #000435; /* Deep Navy Blue */
  --secondary-color: #61B0F6; /* Sky Blue */
  --accent-color: #FB2000; /* Maple Red */
  --pretitle-accent-color: #0009a1; /* Accent for pre-titles */
  --background-light-gray: #F2F2F2;
  --text-charcoal: #272625;
  --white: #FFFFFF;
  --disabled-text: #999999;
  --disabled-border: #CCCCCC;
  --disabled-bg: #EDEDED;
  --divider-color: #DCDCDC;

  --font-family-base: 'Kumbh Sans', sans-serif;

  --max-container-width: 1280px;
  --content-padding-mobile: 1.875rem; /* 30px */
  --content-padding-desktop: 3.75rem; /* 60px */
  --section-padding-mobile: 3rem; /* 48px */
  --section-padding-desktop: 5rem; /* 80px */
  --grid-gutter: 1.5rem; /* 24px */
  --card-padding-mobile: 1.5rem; /* 24px */
  --card-padding-desktop: 2.5rem; /* 40px */
  --card-margin-bottom: 32px;
}

html {
  font-size: 16px; /* Base for rem units */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--background-light-gray);
  color: var(--text-charcoal);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

/* Site Header */
.site-header {
  background-color: var(--primary-color);
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--content-padding-mobile);
  padding-right: var(--content-padding-mobile);
  width: 100%; /* Ensure it spans full width if not default for header element */
  box-sizing: border-box; /* Include padding in width/height */
}

@media (min-width: 768px) {
  .site-header { /* Apply desktop padding to .site-header directly */
    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);
  }
}

/* New Styles for index.html layout (Task: CUGA-New-Landing-Page) */

/* Top Bar / Site Header adjustments */
.site-header {
  /* Existing: background-color, height, display, justify-content, align-items, padding, width, box-sizing */
  /* Ensure it's fixed at the top */
  position: fixed; /* Changed from potentially relative/static */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for fixed header */
}


/*
 * Correction : supprimez le max-width et le margin auto pour que .site-header-content occupe toute la largeur,
 * et que le logo soit collé à gauche et les contrôles à droite, sans marge latérale automatique.
 */
/*
 * Correction : supprimez tout padding horizontal sur .site-header-content pour que le logo et les contrôles collent aux bords.
 */
.site-header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0;
}
@media (min-width: 768px) {
  .site-header-content {
    padding: 0;
  }
}

.site-logo-link {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.header-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}


.site-logo {
  /* Existing: max-width, max-height, height: auto, display: block */
  /* Ensure it doesn't shrink too much */
  flex-shrink: 0;
}
/* Optional: if site-logo-text is used */
.site-logo-text {
    color: var(--white);
    font-size: 0.6rem; /* Very small */
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: none; /* Hidden by default, shown on larger screens */
}
@media (min-width: 768px) {
    .site-logo-text {
        display: inline; /* Or block if it needs its own line */
    }
}


.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem; /* Space between lang switcher and hamburger */
}

/* Language switcher in header */
.main-lang-switcher {
  display: flex;
}
.main-lang-switcher .lang-button {
  /* Using .btn .btn-small from existing styles.css for base */
  /* .btn: font-size: 0.875rem (14px), font-weight: 700, text-transform: uppercase, padding: 12px 24px */
  /* .btn-small might not exist, so we might need to define it or override padding */
  padding: 6px 10px; /* Smaller padding for header buttons */
  font-size: 0.75rem; /* 12px */
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  line-height: 1; /* Ensure text is centered */
}
.main-lang-switcher .lang-button:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right-width: 0.5px; /* Create separation */
}
.main-lang-switcher .lang-button:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left-width: 0.5px;
}
.main-lang-switcher .lang-button:hover,
.main-lang-switcher .lang-button:focus {
  background-color: var(--white);
  color: var(--primary-color);
}
.main-lang-switcher .lang-button.active-lang { /* JS will add .active-lang */
  background-color: var(--white);
  color: var(--primary-color);
  font-weight: 700;
}


/* Body padding to offset fixed header */
body {
  /* This padding is already applied via inline styles in each HTML file,
     but it's good to have it here as a reference or primary source if inline styles are removed.
     Ensure this matches the .site-header height. */
  padding-top: 64px; /* Mobile header height */
}
@media (min-width: 768px) {
  body {
    padding-top: 120px; /* Desktop header height */
  }
}

/* Main Layout: Sidebar and Content Area */
/*
 * Pour centrer verticalement le contenu du hero (sidebar) par rapport à la hauteur de la sports-grid,
 * on utilise align-items: stretch sur .main-layout et un flex-grow sur .left-sidebar et .main-content-area.
 */
.main-layout {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: stretch;
  min-height: 0;
}

.left-sidebar {
  width: 100%; /* Full width on mobile */
  background-color: var(--white);
  color: var(--text-charcoal);
  padding: var(--content-padding-mobile);
  display: flex; /* Flex to center content wrapper */
  flex-direction: column;
  justify-content: center; /* Vertically center content if sidebar has fixed height or enough content */
  align-items: flex-start; /* Align content to the start (left) */
  min-height: 300px; /* Minimum height for visual appeal on mobile */
}

.sidebar-content-wrapper {
  width: 100%;
  max-width: 500px; /* Max width for sidebar text content */
  text-align: left; /* Ensure text is left-aligned */
}

.main-content-area {
  width: 100%; /* Full width on mobile */
  background-color: var(--white); /* Main content usually has a light background */
  color: var(--text-charcoal);
  padding: var(--section-padding-mobile);
  flex-grow: 1; /* Takes remaining space */
}

@media (min-width: 1024px) {
  .main-layout {
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    height: 100%;
  }
  .left-sidebar {
    width: 33.333333%;
    min-height: 0;
    padding: var(--content-padding-desktop);
    position: relative;
    top: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* S'étire pour matcher la hauteur de la colonne de droite */
    flex-grow: 1;
  }
  .main-content-area {
    width: 66.666667%;
    padding: var(--section-padding-desktop);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  /* Pour que la sports-grid prenne toute la hauteur de la colonne droite */
  .sports-grid {
    flex-grow: 1;
    display: grid;
    align-content: center;
    height: 100%;
  }
}

/* Sidebar Elements */
.sidebar-maple-leaf {
  width: 70px; /* Adjust as needed */
  height: auto;
  margin-bottom: 1.5rem;
  /* The image is red, if it needs to be programmatically colored red and it's an SVG:
     fill: var(--accent-color); */
}

.sidebar-hero-title {
  /* Based on "WELCOME TO THE HOME..." description: Very Large */
  /* Kumbh Sans, 900 weight, uppercase is in .hero-title / .display-h1 */
  font-size: 1.9rem; /* Approx 40px, adjust as needed */
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-charcoal); /* Noir pour le titre hero */
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .sidebar-hero-title {
    font-size: 2.5rem; /* Approx 48px for desktop */
  }
}
@media (min-width: 1280px) {
  .sidebar-hero-title {
    font-size: 3rem; /* Approx 56px for larger desktops */
  }
}


.sidebar-wave {
  width: 100px; /* Match .wave-separator if desired */
  height: auto;
  margin-top: 1rem;
  /* If it's an SVG and needs to be primary color:
     fill: var(--primary-color); but on primary bg, this might not be visible.
     It's likely a white or accent color wave on primary bg.
     Assuming CUGA_wave.png is suitable as is, or a white version is needed.
     For now, no color change via CSS.
  */
}

/* Main Content Area - Sports Grid */
.sports-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: var(--grid-gutter, 1.5rem);
}

@media (min-width: 768px) { /* md breakpoint */
  .sports-grid {
    /* Two columns on tablet, or keep single if design prefers stacking until wider */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
  }
}

@media (min-width: 1024px) { /* lg breakpoint for 3 columns if sidebar is active */
  /* If sidebar takes 1/3, main content is 2/3. 3 cards in 2/3 might be tight.
     Let's aim for 2 cards if sidebar is present and main content is narrower,
     or let auto-fit handle it. If fixed 3 columns are needed:
  .sports-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  */
}


/* Sports Card (.card-discover-feature) adjustments */
.card-discover-feature {
  /* Existing: .card styles (bg, margin-bottom, overflow) */
  /* New: Add shadow or border if desired for this specific context, default card has none */
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
   border-radius: 8px; /* Optional: slight rounding for modern feel */
}

.card-discover-feature .image-aspect-ratio-2-1 img {
    border-top-left-radius: 8px; /* Match card radius */
    border-top-right-radius: 8px; /* Match card radius */
}


/* Custom padding for card content in the new index.html sports cards */
.card-content-custom-padding {
  padding: var(--card-padding-mobile); /* Use existing card padding variables */
}
@media (min-width: 768px) {
  .card-content-custom-padding {
    padding: 1.5rem; /* Slightly less than var(--card-padding-desktop) for a denser look if needed */
  }
}

/* Title Block Discover within cards - adjustments if needed */
.card-discover-feature .title-block-discover .pre-title {
  /* Existing: color, font-size (18px), font-weight, text-transform, margin-bottom */
  font-size: 1rem; /* 16px, as per "Medium-large" potentiellement */
  color: var(--pretitle-accent-color); /* Déjà défini */
  font-weight: 700; /* Plus gras */
  margin-top: 0; /* Réduit l'espace au-dessus du texte */
  padding-top: 0; /* Supprime tout padding éventuel */
  margin-bottom: 0.1rem; /* Garde l'espace sous le texte très compact */
}

.card-discover-feature .title-block-discover .main-title {
  /* Existing: font-size (28px), color, font-weight, text-transform, line-height, margin */
  /* "Similar size to DISCOVER, perhaps slightly larger or the same, bolded" */
  font-size: 1.5rem; /* 24px, adjust as needed */
  font-weight: 900; /* Keep very bold */
  color: var(--text-charcoal); /* Ensure it's not primary color like h1/h2/h3 by default */
  line-height: 1.2;
}
.card-discover-feature .title-block-discover .main-title .title-wave {
    height: 0.7em; /* Scale with new font size */
}


/* Card Actions within sports cards */
.card-discover-feature .card-actions {
  /* Existing: display:flex, flex-wrap, gap */
  margin-top: 1rem; /* Space above buttons */
}
.card-discover-feature .card-actions .btn {
  /* Existing: .btn properties, .btn-primary properties */
  /* "Small to medium, button text, likely ~14pt or ~16pt" */
  /* .btn is 14px. This is fine. */
  width: 100%; /* Make buttons full width of their flex item */
}
@media (min-width: 480px) { /* Small screen, allow buttons side-by-side */
    .card-discover-feature .card-actions .btn {
        width: auto; /* Revert to content width */
        flex-grow: 1; /* Allow them to share space */
    }
}


/* Ensure hamburger icon button is styled correctly */
/* .hamburger-icon-button is already styled in general section */

/* Nav Menu Placeholder - for the actual slide-out menu */
#nav-menu-placeholder {
  /* This div itself doesn't need style; .nav-menu inside it is styled */
}

/* Ensure bubbles are behind everything */
.bubbles {
    z-index: -1; /* Ensure it's behind page content */
}

/* General page wrapper to help with sticky footer if needed */
/* body is already display:flex, flex-direction:column, min-height:100vh */
/* .page-wrapper is display:flex, flex-direction:column, flex-grow:1 */
/* This setup should make footer (if any) stick to bottom. */

/* Ensure .site-header doesn't get Tailwind background if Tailwind is removed later */
.site-header {
    background-color: var(--primary-color) !important;
}

/* Override for nav-link color inside the main nav menu if it was different from general .nav-link */
/* .nav-menu .nav-link is already white in existing rules, this is fine */

@media (max-width: 767px) {
  .site-header {
    height: 64px;
  }
  .site-logo {
    max-width: 220px;
    max-height: 44px; /* Adjusted for 64px header height with 10px padding top/bottom */
  }
  /* Adjust hamburger icon if needed for smaller header */
  /* .hamburger-icon-button { width: 24px; height: 20px; } */
  /* .hamburger-icon-button span { height: 2px; } */
}
/* Note: This media query block is moved further down to ensure overrides. */

/* Style Guide Header / Subpage Hero Banner Styling */
.style-guide-header {
  background-color: var(--secondary-color); /* Sky Blue */
  padding: 2rem var(--content-padding-mobile);
  margin-bottom: 2rem;
}

.style-guide-header h1 {
  color: var(--white); /* Changed to white */
  margin-bottom: 0;
}
/* Note: p.small-text color is handled inline in styles.html for now to be var(--white) */

@media (min-width: 768px) {
  .style-guide-header {
    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);
  }
}

/* .site-logo-link is defined below, this is just ensuring no duplication from erroneous merge */

.site-logo-link {
  display: inline-block; /* Or flex item if other items are beside it directly */
  line-height: 0; /* Prevent extra space if img is display:inline */
}

.site-logo {
  max-width: 350px;
  max-height: 80px; /* Fits within 120px header with some breathing room */
  height: auto;   /* Maintain aspect ratio */
  display: block; /* Remove extra space below if inline */
}

.hamburger-icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  padding: 0;
  z-index: 1002; /* Ensure it's above other header content if needed, and below menu */
}

.hamburger-icon-button span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--white);
  border-radius: 1px;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* For X animation */
}

/* Hamburger to X animation */
.hamburger-icon-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg); /* Adjust if button height/span height changes */
}
.hamburger-icon-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger-icon-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg); /* Adjust if button height/span height changes */
}

/* Ensure .nav-menu-close is not affected by these span animations */
.nav-menu-close {
  /* Styles for .nav-menu-close are defined further down in the .nav-menu section */
  /* This is just a check to ensure no conflicting span-based animations are applied here */
}

@media (max-width: 767px) {
  .site-header {
    height: 64px;
  }
  .site-logo {
    max-width: 220px;
    max-height: 44px; /* Adjusted for 64px header height with 10px padding top/bottom */
  }
  /* Adjust hamburger icon if needed for smaller header */
  /* .hamburger-icon-button { width: 24px; height: 20px; } */
  /* .hamburger-icon-button span { height: 2px; } */
}

/* 2. Typography */
.hero-title, .display-h1 {
  font-size: 3rem; /* 48px */
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

h1, .h1 {
  font-size: 2.375rem; /* 38px */
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 1rem;
}

h2, .h2 {
  font-size: 1.625rem; /* 26px */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

h3, .h3 {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p, .p {
  font-size: 1rem; /* 16px */
  font-weight: 400;
  color: var(--text-charcoal);
  line-height: 1.6;
  max-width: 700px;
  margin-top: 0;
  margin-bottom: 1rem;
}

.small-text {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  color: var(--text-charcoal);
}

/* 3. Layout */
.container {
  width: 100%;
  max-width: var(--max-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-mobile);
  padding-right: var(--content-padding-mobile);
}

.section {
  padding-top: var(--section-padding-mobile);
  padding-bottom: var(--section-padding-mobile);
}

.content-block {
  background-color: var(--white);
  /* No border-radius or box-shadow as per guidelines */
}

/* Grid System (Basic Example) */
.grid {
  display: grid;
  gap: var(--grid-gutter);
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

/* Responsive Layout Adjustments */
@media (min-width: 768px) { /* Tablet and Desktop */
  .container {
    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);
  }
  .section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
  .grid-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-cols-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4. Buttons */
.btn {
  font-family: var(--font-family-base);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  padding: 12px 24px;
  letter-spacing: 0.05em;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


/* Plus de flèche automatique sur les boutons via CSS. Ajoutez la flèche directement dans le HTML. */

.btn-primary {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color); /* Ensure border matches background */
}

.btn-secondary {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color); /* Ensure border for consistency */
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color); /* Ensure border matches background */
}

.btn:disabled,
.btn.disabled {
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  background-color: var(--disabled-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 5. Links & Interactive Elements */
a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease, font-weight 0.3s ease;
}

a:hover,
a:active,
a:focus {
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: 600;
}

/* Focus Styles - general */
*:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}
/* For elements that hide default outline (like buttons, inputs), ensure custom focus is visible */
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Navigation Specific Styles */
.nav-link {
  font-size: 0.875rem; /* 14px */
  text-transform: uppercase;
  font-weight: 700;
  color: var(--secondary-color); /* Default color in potential header */
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Hamburger Menu */
.nav-menu {
  position: fixed;
  top: 0;
  right: -100%; /* Start off-screen to the right */
  width: 300px; /* Fixed width for the menu */
  max-width: 80%; /* Max width for smaller screens */
  height: 100vh;
  background-color: var(--primary-color);
  color: var(--white);
  transition: right 0.3s ease-in-out;
  z-index: 1001; /* Below hamburger icon (1002), above content */
  overflow-y: auto; /* Allow scrolling for many menu items */
  padding-top: 60px; /* Space for a close button or header within menu */
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
}

.nav-menu.is-open {
  right: 0; /* Slide in from the right */
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu ul li:last-child {
  border-bottom: none;
}

.nav-menu .nav-link,
.nav-menu .submenu-toggle {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--white);
  background: var(--primary-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link:focus,
.nav-menu .nav-link.active, /* Style for active page link */
.nav-menu .submenu-toggle:hover,
.nav-menu .submenu-toggle:focus {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.nav-menu .nav-link.active { /* Specific style for the current page link */
    background-color: var(--accent-color);
    color: var(--white);
}


/* Submenu Styles */
.nav-menu .submenu {
  list-style: none;
  padding-left: 0; /* Remove default padding */
  margin: 0;
  background-color: var(--white); /* Blanc pour la lisibilité */
  color: var(--primary-color); /* Texte foncé pour contraste */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Optionnel: légère ombre pour détacher */
  display: none; /* Hidden by default */
}

.nav-menu .submenu.is-open {
  display: block;
}

.nav-menu .submenu .nav-link {
  padding-left: 2.5rem; /* Indent submenu items */
  font-size: 0.9rem;
  color: var(--primary-color); /* Texte foncé pour sous-menu */
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.nav-menu .submenu .nav-link:hover,
.nav-menu .submenu .nav-link:focus {
  background: var(--secondary-color);
  color: var(--white);
}

.nav-menu .submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.nav-menu .submenu-toggle::after {
  content: '▶'; /* Flèche droite par défaut */
  font-family: inherit;
  font-size: 0.8em;
  margin-left: 0.5em;
  transition: transform 0.3s ease;
}

.nav-menu .submenu-toggle[aria-expanded="true"]::after {
  content: '▼'; /* Flèche vers le bas quand ouvert */
  transform: none;
}

/* Language switcher and other utilities in menu */
.nav-menu-utils {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1rem;
}

.nav-menu-utils .lang-button {
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.nav-menu-utils .lang-button:hover,
.nav-menu-utils .lang-button.active-lang { /* JS will add active-lang */
    background-color: var(--white);
    color: var(--primary-color);
}

/* Overlay for when menu is open */
.nav-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* Below menu, above content */
}

.nav-menu-overlay.is-visible {
  display: block;
}


/* 6. Cards & Containers */
.card {
  background-color: var(--white);
  /* padding: var(--card-padding-mobile); -- Removed, will be handled by .card-content */
  margin-bottom: var(--card-margin-bottom);
  /* No border-radius or box-shadow */
  overflow: hidden; /* Added to contain child elements like images */
}

.card-content { /* Universal content wrapper for cards */
  padding: var(--card-padding-mobile);
}

@media (min-width: 768px) {
  .card-content { /* Universal content wrapper for cards */
    padding: var(--card-padding-desktop);
  }
}

/* .card .card-content specificity is no longer needed if .card-content is consistently used */

/* Removed .card-image-top img rule as the component example is removed */

.card-callout {
  background-color: var(--background-light-gray); /* Different background for callout */
  /* padding: var(--card-padding-mobile); -- Removed, will use .card-content */
  margin-bottom: var(--card-margin-bottom); /* This is fine as it's on the .card itself */
}

@media (min-width: 768px) {
  /* .card, .card-callout {
    padding: var(--card-padding-desktop); Removed here, handled by .card-content
  } */
}

/* New Card Styles */
.card-discover-feature .title-block-discover {
  margin-top: 1rem; /* Space between image and title block */
  margin-bottom: 1rem; /* Space between title block and buttons */
}

/* Ensure title block inside card uses card's content padding, or reset if necessary */
.card-discover-feature .title-block-discover .pre-title {
  font-size: 18px; /* Slightly smaller pre-title for card context */
}
.card-discover-feature .title-block-discover .main-title {
  font-size: 28px; /* Slightly smaller main title for card context */
  overflow-wrap: break-word; /* Ensure long text wraps and doesn't stretch the card */
}

.card-discover-feature .card-content {
  padding: 0 !important; /* Ensure padding is removed for this specific card's content area */
}

.image-aspect-ratio-2-1 { /* Renamed from .image-aspect-ratio-16-9 */
  position: relative;
  height: 173px;
  width: 100%;
  overflow: hidden;
  background-color: var(--background-light-gray); /* Placeholder bg */
  display: flex;
  align-items: center;
  justify-content: center;
}

 .image-aspect-ratio-2-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-actions {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  gap: 0.75rem; /* Space between buttons */
}

.card-actions .btn {
  flex-grow: 1; /* Allow buttons to grow and share space if needed */
  /* Alternatively, set a specific width or rely on content size */
}


/* 7. Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem; /* 14px */
  font-weight: 700; /* Bold */
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.form-control {
  font-family: var(--font-family-base);
  font-size: 1rem; /* 16px */
  padding: 12px 16px;
  border: 1px solid var(--disabled-border); /* Using --disabled-border as #CCCCCC */
  border-radius: 0;
  background-color: var(--white);
  width: 100%;
  line-height: 1.5; /* Ensure text is vertically centered and readable */
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: var(--secondary-color);
  outline: 2px solid var(--secondary-color); /* Focus style from guidelines */
  outline-offset: 0; /* Adjusted for inputs to align with border */
}

.form-control.is-error {
  border-color: var(--accent-color);
  color: var(--accent-color); /* Text color of input for error */
}

.form-error-message {
  display: block;
  color: var(--accent-color);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Placeholder styling for select, textarea if needed */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* 8. Icons & Visual Elements */
.icon {
  display: inline-block;
  width: 1em; /* Default to font size */
  height: 1em; /* Default to font size */
  stroke-width: 2; /* Common for stroke icons */
  vertical-align: middle;
  /* Color will be inherited or set via utility classes */
}

.icon-sm { font-size: 16px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }

.icon-text { /* For icons used within text flow */
  color: var(--primary-color);
  margin-right: 8px; /* Spacing from text */
}

.icon-accent { color: var(--accent-color); }
.icon-secondary { color: var(--secondary-color); }


/* Maple Leaf (PNG image) */
.maple-leaf-decorative {
  width: 40px; /* Example size, can be adjusted */
  height: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Better alignment if used inline with text */
  /* color: var(--accent-color); /* Removed as PNG color is inherent */
}

/* Dividers */
.divider {
  border: 0;
  height: 1px;
  background-color: var(--divider-color);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.divider-subtle { /* For section separation */
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* 9. Decorative Elements */
.wave-separator {
  display: block;
  width: 100px; /* Fixed width as per guideline, adjust as needed for PNG */
  height: auto; /* Maintain aspect ratio */
  /* color: var(--primary-color); /* Removed as PNG color is inherent */
  margin: 16px 0; /* Adjusted for left alignment, spacing top/bottom */
}

/* 9.5. Title Block Styles */
.title-block-discover {
  margin-bottom: 1rem; /* Space below the block */
}

.title-block-discover .pre-title {
  color: var(--pretitle-accent-color);
  font-size: 21px;
  font-weight: 900; /* Updated font weight */
  text-transform: uppercase;
  margin-bottom: 0.1rem; /* Reduced space between pre-title and main title */
  display: block; /* Ensure it takes its own line and margin works */
}

.title-block-discover .main-title {
  font-size: 32px;
  color: var(--text-charcoal);
  font-weight: 900; /* Assuming main titles are very bold */
  text-transform: uppercase; /* As per "Underwater RUGBY" */
  line-height: 1.1; /* Adjust for tight two-line display */
  margin: 0; /* Reset margin for precise control */
}

.title-block-discover .title-line-break {
  display: block; /* Puts "Rugby" on a new line */
}

.title-block-discover .title-wave {
  height: 0.8em; /* Scale with font size of "RUGBY" */
  max-width: 133px;
  width: auto;
  margin-left: 0.25em; /* Space between "RUGBY" and wave */
  vertical-align: baseline; /* Align with the text baseline */
  object-fit: contain;
}

.title-block-maple-welcome {
  text-align: left; /* Changed from center to left */
  margin-bottom: 1rem; /* Space below the entire block */
  padding: 1rem 0; /* Add some padding for visual separation if needed */
}

.title-block-maple-welcome .maple-leaf-icon {
  width: 90px;
  height: 66px;
  display: block;
  margin: 0 0 1rem 0; /* Adjusted for left alignment, space below it */
}

.title-block-maple-welcome .welcome-title {
  font-size: clamp(1.2rem, 2vw, 36px); /* Réduit la taille : min 1.2rem, idéal 2vw, max 36px */
  color: var(--primary-color);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1.2; /* Adjust for multi-line readability */
  margin: 0 0 1rem 0; /* Adjusted for left alignment, space below it */
  max-width: 800px; /* Prevents text from becoming too wide on large screens */
  border-bottom: none; /* Ensure no border inherited from section styles */
  padding-bottom: 0; /* Ensure no padding inherited */
}

.title-block-maple-welcome .welcome-wave {
  display: block;
  width: 133px; /* As per existing .wave-separator */
  height: auto; /* Maintain aspect ratio */
  margin: 1rem 0 0 0; /* Adjusted for left alignment, space above it */
}


/* Utility Classes */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-light-gray { background-color: var(--background-light-gray); }
.bg-white { background-color: var(--white); }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-charcoal { color: var(--text-charcoal); }
.text-white { color: var(--white); }

.text-uppercase { text-transform: uppercase; }
.text-center { text-align: center; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
/* Add more spacing utilities as needed */

/* Accessibility: Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 10. Site Footer Bar */
.site-footer-bar {
  background-color: var(--primary-color);
  color: var(--white);
  height: 60px; /* Updated height */
  padding: 0 var(--content-padding-mobile); /* Use existing padding variables */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.site-footer-bar a {
  color: var(--white);
  text-decoration: none;
  font-size: 13px; /* Ensure links also have this font size */
  font-weight: 400; /* Override generic link hover bolding if not desired */
}

.site-footer-bar a:hover,
.site-footer-bar a:focus {
  text-decoration: underline;
  color: var(--secondary-color); /* Lighter color on hover for visibility */
  font-weight: 400; /* Keep font weight consistent */
}

.footer-links a {
  margin-left: 1.5rem; /* Space between links */
}

/* Responsive Footer */
@media (max-width: 767px) {
  .site-footer-bar { /* This seems to be for a different footer, .site-footer-bar, not the main page footer */
    height: auto; /* Allow height to adjust to content */
    flex-direction: column;
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
    text-align: center;
  }
  .footer-copyright {
    margin-bottom: 0.5rem; /* Space between copyright and links */
  }
  .footer-links a {
    margin-left: 0.75rem; /* Reduce space for mobile */
    margin-right: 0.75rem;
    display: inline-block; /* Ensure proper spacing */
  }
}

@media (min-width: 768px) {
  .site-footer-bar {
    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);
  }
}