:root {
  --blue: #0069b4;
  --blue-dark: #005494;
  --blue-light: #e5f0f8;
  --gray-bg: #ebebeb;
  --cream: #faf7f1;
  --gray-line: #c5c5c5;
  --text: #303030;
  --text-soft: #606060;
  --white: #ffffff;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 105, 180, 0.18);
  --max-w: 1100px;
  --max-w-narrow: 720px;
  --header-h: 72px;
  --utility-bar-h: 36px;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  padding-bottom: env(safe-area-inset-bottom);
}
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  font-family: inherit;
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--text);
  font-weight: 700;
}
h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.2rem;
}
p {
  margin: 0 0 1em;
}

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

.utility-bar {
  position: sticky;
  top: 0;
  z-index: 101;
  background: #1f2530;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease;
}
/* Auto-hide sur scroll DOWN, ré-apparition sur scroll UP (pilotage JS).
   Body.is-utility-hidden = utility-bar masquée + site-header collé au top. */
body.is-utility-hidden .utility-bar {
  transform: translateY(-100%);
}
.utility-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.utility-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  line-height: 1.4;
}
.utility-meta-sep {
  opacity: 0.4;
}
.utility-meta-metro {
  white-space: nowrap;
}
.utility-link {
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.utility-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.utility-link svg {
  opacity: 0.85;
}
.utility-link.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}
.utility-arrow {
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.utility-link:hover .utility-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.site-header {
  position: sticky;
  top: var(--utility-bar-h, 36px);
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-line);
  height: var(--header-h);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease;
}
/* Quand on scrolle vers le bas, on cache l'ensemble du header (utility-bar
   ET site-header). Le translate inclut la utility-bar (36px) en plus de la
   propre hauteur du site-header → tout disparaît d'un bloc. */
body.is-utility-hidden .site-header {
  transform: translateY(calc(-100% - var(--utility-bar-h, 36px)));
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.logo:hover {
  text-decoration: none;
}
.logo img,
.logo .brand-logo {
  height: 48px;
  width: auto;
}
.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.brand-name-short {
  display: none;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.nav-link {
  display: inline-block;
  padding: 8px 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nav-link:hover {
  background: var(--blue-light);
  color: var(--blue);
  text-decoration: none;
}
.nav-link.is-active {
  color: var(--blue);
  background: var(--blue-light);
}
.nav-cta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 20px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}
.nav-toggle:hover {
  background: var(--gray-bg);
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-nav.is-open .mobile-nav-backdrop {
  opacity: 1;
}
.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--white);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav-panel {
  transform: translateX(0);
}
.mobile-nav-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 40px 24px 32px;
  border-bottom: 1px solid var(--gray-line);
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--white) 100%);
}
.mobile-nav-logo {
  width: clamp(140px, 38vw, 180px);
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0, 105, 180, 0.18));
}
.mobile-nav-subtitle {
  color: var(--text-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.mobile-nav-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease;
}
.mobile-nav-close:hover {
  background: var(--white);
}
.mobile-nav-section {
  margin: 0;
  padding: 22px 24px 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--blue);
}
/* Section toggle (accordion) : bouton qui se comporte comme un header
   cliquable, taille équivalente aux items de liste pour cohérence visuelle. */
.mobile-nav-section-toggle {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  color: var(--text);
}
.mobile-nav-section-toggle.is-open {
  color: var(--blue);
}
.mobile-nav-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 4px;
}
.mobile-nav-section-toggle.is-open .mobile-nav-chevron {
  transform: rotate(-135deg);
  margin-top: 6px;
}
.mobile-nav-list[hidden] {
  display: none;
}
.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
}
.mobile-nav-list a {
  display: block;
  padding: 14px 24px;
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  border-left: 3px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.mobile-nav-list a:hover,
.mobile-nav-list a:focus {
  background: var(--blue-light);
  color: var(--blue);
  text-decoration: none;
}
.mobile-nav-list a[aria-current="page"] {
  color: var(--blue);
  border-left-color: var(--blue);
  background: var(--blue-light);
}
/* .mobile-nav-secondary partage maintenant le même style que .primary
   (uniformité entre les 2 menus accordion). */
.mobile-nav-tertiary {
  margin-top: auto;
  padding: 12px 0 24px;
  background: var(--gray-bg);
}
.mobile-nav-tertiary a {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-soft);
  padding: 10px 24px;
}
/* Footer du menu mobile (Contactez-nous toujours visible). */
.mobile-nav-footer-list {
  margin-top: auto;
  padding: 16px 0 24px;
  border-top: 1px solid var(--gray-line);
}
.mobile-nav-footer-list a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue);
}
body.nav-open {
  overflow: hidden;
}
.footer-phone-note {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  margin-top: 12px;
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-list li {
  margin: 0 0 6px;
}
.footer-list a {
  color: rgba(255, 255, 255, 0.85);
}
.footer-list a:hover {
  color: var(--white);
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    transform 0.1s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  line-height: 1.2;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover {
  text-decoration: none;
}
.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover {
  background: var(--blue);
  color: var(--white);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--gray-line);
}
.btn-ghost:hover {
  background: var(--white);
  border-color: var(--text);
}
.btn-sm {
  padding: 8px 16px;
  font-size: 0.92rem;
}
.btn-lg {
  padding: 16px 32px;
  font-size: 1.1rem;
}
.btn-block {
  width: 100%;
}

.hero {
  background: linear-gradient(180deg, #f7fafd 0%, var(--gray-bg) 100%);
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 10vw, 120px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero.hero-image {
  background-color: var(--text);
  /* Fallback : 1ère frame de l'animation en CSS bg — assure une image
       visible tant que les frames ne sont pas chargées ou si JS off.
       image-set() : WebP servi aux browsers modernes (~50% plus léger),
       JPG comme fallback (Safari <17.4 sans type() utilise la 1ʳᵉ règle). */
  background-image: url("/assets/photos/hero-scroll/frame-001.jpg");
  background-image: image-set(
    url("/assets/photos/hero-scroll/frame-001.webp") type("image/webp") 1x,
    url("/assets/photos/hero-scroll/frame-001.jpg") type("image/jpeg") 1x
  );
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  color: var(--white);
  padding: clamp(64px, 9vw, 110px) 0 0;
  min-height: clamp(420px, 60vh, 640px);
  display: flex;
  flex-direction: column;
  position: relative;
  /* overflow:hidden déjà sur .hero */
}
.hero-scroll-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.hero-scroll-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}
.hero.hero-image > .hero-content,
.hero.hero-image > .container {
  position: relative;
  z-index: 2;
}
.hero.hero-image::before {
  display: none;
}
.hero.hero-image .hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 clamp(24px, 5vw, 72px) clamp(36px, 5vw, 56px);
  text-align: left;
}

.hero.hero-image .hero-content-logo {
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px);
  text-align: center;
}
.hero-logo {
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 80%;
  filter: brightness(0) invert(1) drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero.hero-image h1 {
  color: var(--white);
  text-align: left;
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}

.hero-stats {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 0;
  text-align: center;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.hero-stat-num {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-stat-num sup {
  font-size: 0.6em;
}
.hero-stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.35;
  max-width: 22ch;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(0, 105, 180, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 105, 180, 0.06) 0%,
      transparent 40%
    );
  pointer-events: none;
}
.hero
  > *:not(.hero-image-bg):not(.hero-scroll-canvas):not(.hero-scroll-overlay) {
  position: relative;
}
.eyebrow {
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin: 0 0 16px;
}
.hero h1 {
  margin: 0 0 20px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-soft);
  max-width: 56ch;
  margin: 0 auto 32px;
}
.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero-meta {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0;
}

.page-hero {
  background: linear-gradient(180deg, #f7fafd 0%, var(--gray-bg) 100%);
  padding: clamp(48px, 7vw, 80px) 0 clamp(48px, 7vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 80% 30%,
    rgba(0, 105, 180, 0.07) 0%,
    transparent 50%
  );
  pointer-events: none;
}
.page-hero > * {
  position: relative;
}
.page-hero h1 {
  margin: 0 0 20px;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
.page-hero[data-tone="competition"] {
  background: linear-gradient(180deg, #f0f5fb 0%, #e3edf6 100%);
}
.page-hero[data-tone="teambuilding"] {
  background: linear-gradient(180deg, #f7faf7 0%, #ecf3ec 100%);
}

/* Image hero : le bg est dans un <div class="page-hero-bg"> enfant
   (parallax JS), pas en background-image — pour gérer iOS où
   background-attachment:fixed dimensionne au viewport au lieu de
   l'élément, ce qui zoomait/pixelisait l'image en portrait. */
.page-hero.has-image {
  position: relative;
  overflow: hidden;
  background-color: var(--text);
  color: var(--white);
  min-height: clamp(280px, 38vh, 380px);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.page-hero-bg {
  position: absolute;
  /* Moins d'overflow vertical que .section-banner-bg pour que cover ne
       scale pas l'image trop fort : on veut voir la composition de la
       photo dans le hero. Parallax JS plus discrète en contrepartie. */
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.65) 100%
    ),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 0;
}
/* École : la photo cadre l'enfant haut → on remonte le point de visée
   (Y plus bas) pour ne pas lui couper la tête dans le hero. */
.page-hero[data-tone="ecole"] .page-hero-bg {
  background-position: center 18%;
}

.page-hero.has-image > .hero-content,
.page-hero.has-image > .container {
  position: relative;
  z-index: 1;
}
.page-hero.has-image::before {
  display: none;
}
.page-hero.has-image .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.page-hero.has-image h1 {
  color: var(--white);
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}
.page-hero.has-image .hero-sub {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.page-hero.has-image .hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 clamp(24px, 5vw, 72px) clamp(36px, 5vw, 56px);
  text-align: left;
}
.page-hero.has-image .hero-content h1 {
  text-align: left;
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}

.trust-bar {
  background: var(--blue);
  color: var(--white);
  padding: 28px 0;
}
.trust-bar-compact {
  padding: 20px 0;
}
.trust-bar-compact .trust-num {
  font-size: 1.6rem;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trust-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.trust-num sup {
  font-size: 0.6em;
}
.trust-label {
  font-size: 0.92rem;
  opacity: 0.92;
  line-height: 1.3;
}

.section {
  padding: clamp(56px, 8vw, 96px) 0;
}
.section-alt {
  background: var(--gray-bg);
}
.section h2 {
  text-align: center;
  margin-bottom: 12px;
}
.section-lead {
  text-align: center;
  color: var(--text-soft);
  max-width: 60ch;
  margin: 0 auto 48px;
  font-size: 1.05rem;
}

/* Encart d'intro du club : même grammaire que les sections « L'équipe du
   club » / « Le journal du club » — sur-titre + titre aligné à gauche + lead,
   puis une phrase d'accroche vers les offres. */
.profiles-intro .eyebrow {
  margin: 0 0 12px;
}
.profiles-intro h2 {
  text-align: left;
  margin: 0 0 18px;
}
.profiles-intro-lead {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 72ch;
  margin: 0;
}
.profiles-intro-cta {
  margin: 22px 0 0;
  max-width: 72ch;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
}

.cards {
  display: grid;
  gap: 24px;
}
.cards-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 480px;
  margin: 0 auto;
}
.cards-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}
.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}
.section h2.centered,
.centered {
  text-align: center;
}

.card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card h3 {
  margin: 0 0 8px;
}
.card p {
  color: var(--text-soft);
}
.card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.card-eyebrow {
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.steps-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
.steps-list li {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  border: 1px solid var(--gray-line);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 16px;
}
.steps-list h3 {
  margin: 0 0 8px;
}
.steps-list p {
  color: var(--text-soft);
  margin: 0;
}

.price-card {
  text-align: center;
}
/* ── Bloc « Cotisation et inscription » (deux colonnes) ──────────── */
.inscription-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .inscription-grid {
    grid-template-columns: 1fr;
  }
}

/* Colonne gauche : carte cotisation */
.cotisation-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  padding: 26px 28px 24px;
}
.cotisation-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 6px;
}
.cotisation-price {
  margin: 0 0 8px;
  line-height: 1;
}
.cotisation-price strong {
  font-size: 3rem;
  font-weight: 800;
  color: var(--blue);
}
.cotisation-price span {
  color: var(--text-soft);
  font-size: 1.1rem;
  font-weight: 600;
}
.cotisation-sep {
  border: 0;
  border-top: 1px solid var(--gray-line);
  margin: 18px 0;
}
.cotisation-checks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.cotisation-checks li {
  position: relative;
  padding: 7px 0 7px 28px;
  color: var(--text);
}
.cotisation-checks li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 6px;
  color: var(--blue);
  font-weight: 800;
}
.cotisation-fineprint {
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Colonne droite : réassurance paiement + reprise + options */
.inscription-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reassurance-box,
.reprise-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 18px 20px;
}
.reassurance-box {
  background: var(--blue-light);
}
.reprise-box {
  background: var(--gray-bg);
}
.box-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.box-icon svg {
  width: 22px;
  height: 22px;
}
.reassurance-box .box-icon {
  background: var(--blue);
  color: var(--white);
}
.reprise-box .box-icon {
  background: #dde2e8;
  color: var(--text-soft);
}
.reassurance-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--blue-dark);
  font-size: 1.05rem;
}
.reassurance-box p,
.reprise-box p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.reprise-title {
  font-weight: 700;
  color: var(--text);
}
.reprise-box p:last-child {
  color: var(--text-soft);
}
.price {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--blue);
  margin: 8px 0 16px;
  line-height: 1;
}
.price span {
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 2px;
}
.price small {
  display: block;
  font-size: 0.32em;
  color: var(--text-soft);
  font-weight: 500;
  margin-top: 4px;
}
.price-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  text-align: left;
  color: var(--text-soft);
}
.price-feats li {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-line);
}
.price-feats li:last-child {
  border-bottom: 0;
}
.price-feats li::before {
  content: "✓ ";
  color: var(--blue);
  font-weight: 700;
}
.price-card-highlight {
  border-color: var(--blue);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.price-card-highlight:hover {
  transform: translateY(-6px);
}
.tarifs-note {
  text-align: center;
  margin: 32px auto 0;
  max-width: 60ch;
  background: var(--blue-light);
  padding: 16px 24px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
}

.team-card.card {
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  position: relative;
  display: block;
  box-shadow: var(--shadow-md);
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.team-card.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 0.5s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--gray-bg);
}
.team-card:hover .team-photo {
  transform: scale(1.04);
}
.team-card-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 14px 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.88) 100%
  );
  color: var(--white);
  text-align: left;
  pointer-events: none;
}
.team-card-meta h3 {
  margin: 0 0 3px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: 0;
}
.team-card-meta h3 span {
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-left: 3px;
}
.team-card-meta p {
  margin: 0;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

details {
  border-bottom: 1px solid var(--gray-line);
  padding: 16px 0;
}
details:first-of-type {
  border-top: 1px solid var(--gray-line);
}
details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 4px 32px 4px 0;
  position: relative;
  list-style: none;
  color: var(--text);
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--blue);
  font-weight: 400;
  transition: transform 0.15s ease;
}
details[open] summary::after {
  content: "−";
}
details p {
  margin: 12px 0 4px;
  color: var(--text-soft);
}

.cta-final {
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--white) 60%);
}
.lead-form {
  background: var(--white);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-line);
  box-shadow: var(--shadow-md);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.lead-form label {
  display: block;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}
.lead-form label small {
  font-weight: 400;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.lead-form input,
.lead-form select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1.5px solid var(--gray-line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.lead-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230069B4' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.lead-form input:focus,
.lead-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 105, 180, 0.18);
}
.lead-form .hp {
  display: none;
}
.form-note {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: center;
}

.alert {
  padding: 20px 24px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.alert p {
  margin: 0 0 6px;
}
.alert p:last-child {
  margin-bottom: 0;
}
.alert-success {
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  color: #1b5e20;
}
.alert-error {
  background: #fff0f0;
  border: 1px solid #e57373;
  color: #b71c1c;
}

.site-footer {
  background-color: var(--text);
  background-image:
    linear-gradient(
      180deg,
      rgba(20, 24, 30, 0.96) 0%,
      rgba(20, 24, 30, 0.84) 40%,
      rgba(20, 24, 30, 0.78) 100%
    ),
    var(--hero-bg, url("/assets/photos/competition/competition-2.jpg"));
  background-size: cover;
  background-position: center 75%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0 24px;
  margin-bottom: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 {
  color: var(--white);
  margin: 0 0 12px;
  font-size: 1rem;
}
.footer-grid p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.78);
}
.footer-grid a {
  color: var(--white);
}
.footer-logo {
  background: var(--white);
  border-radius: var(--radius);
  padding: 8px;
  margin-bottom: 12px;
  width: 100px;
  height: auto;
}
.social-links a {
  margin-right: 16px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
}
.copyright {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  text-decoration: none;
}
.footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* CTA inscription persistant. Desktop : pastille flottante en bas à droite.
   Mobile (≤640px, cf. plus bas) : barre pleine largeur en bas d'écran. */
.mobile-cta {
  display: inline-flex;
  align-items: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 6px 24px rgba(0, 105, 180, 0.35);
  z-index: 90;
}
.mobile-cta:hover {
  text-decoration: none;
  background: var(--blue-dark);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.check-list li {
  padding: 10px 0 10px 32px;
  position: relative;
  border-bottom: 1px solid var(--gray-line);
  color: var(--text);
}
.check-list li:last-child {
  border-bottom: 0;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.steps-list-vertical {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--gray-line);
}
.steps-list-vertical li {
  counter-increment: step;
  padding: 22px 0 22px 56px;
  border-bottom: 1px solid var(--gray-line);
  position: relative;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}
.steps-list-vertical li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 24px;
  color: var(--blue);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline;
}
.steps-list-vertical h3 {
  margin: 0 0 6px;
}
.steps-list-vertical p {
  margin: 0;
  color: var(--text-soft);
}

.info-block {
  background: transparent;
  border-left: 3px solid var(--blue);
  padding: 6px 0 6px 18px;
  border-radius: 0;
  margin: 24px 0;
}
.info-block p {
  margin: 0 0 8px;
}
.info-block p:last-child {
  margin-bottom: 0;
}

.schedule-block {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--blue);
  border-radius: 0;
  padding: 4px 0 4px 18px;
  margin: 0 0 28px;
}
.schedule-block h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 1.05rem;
}
.schedule-slots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.schedule-slots li {
  background: var(--blue-light);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
}
.schedule-slots li strong {
  color: var(--blue);
  margin-right: 4px;
}
.schedule-note {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-soft);
  font-style: italic;
}

.profile-card {
  text-align: left;
  padding: 0;
  overflow: hidden;
}
.profile-card-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gray-bg);
}
.profile-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrer plus haut : visages typiquement dans le tiers sup. de la photo. */
  object-position: 50% 30%;
  display: block;
  transition: transform 0.5s ease;
}
.profile-card:hover .profile-card-photo img {
  transform: scale(1.04);
}
.profile-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.profile-card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}
.profile-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ─── Profiles stack : sticky cards qui se superposent au scroll ──────────
   Style HelloAsso adapté en mode card : chaque card a des marges visibles,
   bords arrondis complets, légère ombre, et reste sticky top. Le scroll fait
   glisser la suivante par-dessus la précédente. --stack-step (0..N-1) crée
   un offset top progressif → un fin bandeau de la card précédente déborde
   en haut, donnant l'impression d'un deck. */
.profiles-stack {
  position: relative;
  padding: 16px 0; /* respiration en haut/bas de la pile */
}
.profile-stack-card {
  position: sticky;
  /* Bande blanche au-dessus de la card quand elle est épinglée : 72px de
     respiration entre le haut du viewport et le deck. */
  top: calc(72px + var(--stack-step, 0) * 10px);
  /* Hauteur décroissante avec le step pour aligner les bottoms sticky :
       top + height = constant → toutes les cards sortent sticky en même
       temps, donc elles "poussent" ensemble vers le haut au scroll. La
       différence visuelle est minime (10px par card).
     Proportion paysage compacte (~500px, ratio ≈ 2.4:1 comme le sketch
       d'accueil) plutôt que plein viewport : le contenu ne se retrouve
       plus étiré sur les grands écrans. */
  height: calc(500px - var(--stack-step, 0) * 10px);
  background: var(--card-bg, var(--blue));
  overflow: hidden;
  border-radius: 24px;
  /* Ombre uniquement sur la card de devant (depth 0) — sinon les ombres
       des cards derrière s'accumulent au même bottom et ça fait sale. */
  box-shadow: 0 18px 48px
    rgba(0, 0, 0, max(0, 0.2 - var(--stack-depth, 0) * 0.05));
  margin: 0 auto;
  /* Effet profondeur : chaque card "derrière" (--stack-depth élevé)
       est plus étroite → tapered deck. Front (depth 0) = largeur max,
       1ʳᵉ card (depth N-1) = la plus étroite. 24px par niveau = 12 de
       chaque côté. */
  width: calc(100% - 32px - var(--stack-depth, 0) * 24px);
  /* Front card alignée sur le contenu de la section « Ils s'engagent »
     (.container = 1100px max - 2×24px de padding ≈ 1052px). */
  max-width: calc(1052px - var(--stack-depth, 0) * 24px);
}
.profile-stack-inner {
  display: grid;
  /* Colonne texte en largeur FIXE (≈ 60 % de la front card) plutôt qu'en
     proportion : comme les cards du deck ont des largeurs différentes
     (effet tapered), une fraction donnerait des zones texte de largeurs
     variables. Le fixe garantit la même largeur de texte sur toutes les
     cards ; la photo (1fr) absorbe l'écart de largeur. */
  grid-template-columns: 620px 1fr;
  height: 100%;
  align-items: stretch;
}
.profile-stack-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 80px);
  gap: 18px;
}
.profile-stack-eyebrow {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
}
.profile-stack-title {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  font-weight: 700;
  color: inherit;
}
.profile-stack-desc {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  max-width: 520px;
  opacity: 0.92;
}
.profile-stack-photo {
  position: relative;
  overflow: hidden;
}
.profile-stack-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.profile-stack-cta {
  align-self: flex-start;
  margin-top: 8px;
  padding: 14px 28px;
  font-size: 1rem;
}
/* Thèmes : dark = fond sombre + texte blanc, light = fond clair + texte navy.
   CTA sur dark = bouton plein blanc + texte foncé (>12:1 de contraste, vs
   ~4.3:1 pour un ghost translucide qui ne passe pas WCAG AA). Hover inverse
   en ghost. */
.profile-stack-card.is-dark {
  color: var(--white);
}
.profile-stack-card.is-dark .profile-stack-cta {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--white);
}
.profile-stack-card.is-dark .profile-stack-cta:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.profile-stack-card.is-light {
  color: var(--text);
}
.profile-stack-card.is-light .profile-stack-cta {
  background: var(--text);
  color: var(--white);
  border: 1px solid var(--text);
}
.profile-stack-card.is-light .profile-stack-cta:hover {
  background: transparent;
  color: var(--text);
}

/* Mobile : sticky stack conservé, layout 1 colonne avec TEXTE EN HAUT,
   PHOTO EN BAS (style HelloAsso). Card pleine hauteur viewport. */
@media (max-width: 860px) {
  .profile-stack-card {
    top: calc(12px + var(--stack-step, 0) * 8px);
    /* Card plus compacte (~75% du viewport). Hauteur décroissante avec
           le step → bottoms sticky alignés → push group au scroll. */
    height: calc(75vh - var(--stack-step, 0) * 8px);
    /* Effet profondeur en mobile : 16px par niveau (8 de chaque côté). */
    width: calc(100% - 16px - var(--stack-depth, 0) * 16px);
    border-radius: 18px;
    box-shadow: 0 12px 32px
      rgba(0, 0, 0, max(0, 0.18 - var(--stack-depth, 0) * 0.045));
  }
  .profile-stack-inner {
    grid-template-columns: 1fr;
    /* Texte en haut (auto), photo remplit le reste. */
    grid-template-rows: auto 1fr;
  }
  .profile-stack-text {
    padding: 32px 24px 24px;
    gap: 14px;
    justify-content: flex-start;
    overflow: hidden;
  }
  .profile-stack-photo {
    /* Pas de order:-1 — la photo suit le texte dans le flux normal. */
    height: 100%;
    min-height: 0;
  }
  .profile-stack-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
  .profile-stack-desc {
    font-size: 1rem;
  }
}

/* Respect prefers-reduced-motion : pas de sticky (juste pile naturelle) */
@media (prefers-reduced-motion: reduce) {
  .profile-stack-card {
    position: relative;
    top: auto;
    height: auto;
  }
  .profile-stack-inner {
    grid-template-rows: auto;
  }
}

/* Reveal au scroll — animation neutre opacity + translateY.
   JS reveal.js ajoute .is-visible via IntersectionObserver. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.profile-card-help {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.profile-card-help h3,
.profile-card-help p {
  color: var(--white);
}
.profile-card-help p {
  opacity: 0.92;
}
.profile-card-help .btn-primary {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.profile-card-help .btn-primary:hover {
  background: var(--blue-light);
  border-color: var(--blue-light);
  color: var(--blue);
}

.form-message-label {
  display: block;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 20px;
}
.form-message-label small {
  font-weight: 400;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1.5px solid var(--gray-line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  resize: vertical;
  min-height: 100px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.lead-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 105, 180, 0.18);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 12px;
  margin-top: 24px;
}
.gallery-cell {
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
  background: linear-gradient(
    135deg,
    var(--blue-light) 0%,
    rgba(0, 105, 180, 0.18) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.gallery-cell:hover {
  transform: scale(1.01);
}
.gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-cell:not(.is-feature) img {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  will-change: transform;
}

.gallery-cell:nth-child(2) {
  background: linear-gradient(
    225deg,
    var(--blue-light) 0%,
    rgba(0, 105, 180, 0.22) 100%
  );
}
.gallery-cell:nth-child(3) {
  background: linear-gradient(
    45deg,
    rgba(0, 105, 180, 0.1) 0%,
    rgba(0, 105, 180, 0.25) 100%
  );
}
.gallery-cell:nth-child(4) {
  background: linear-gradient(
    315deg,
    var(--blue-light) 0%,
    rgba(0, 105, 180, 0.2) 100%
  );
}
.gallery-cell:nth-child(5) {
  background: linear-gradient(
    180deg,
    rgba(0, 105, 180, 0.08) 0%,
    rgba(0, 105, 180, 0.2) 100%
  );
}
.gallery-cell:nth-child(6) {
  background: linear-gradient(
    90deg,
    var(--blue-light) 0%,
    rgba(0, 105, 180, 0.15) 100%
  );
}

.gallery-cell.is-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-cell.is-tall {
  grid-row: span 2;
}
.gallery-cell.is-wide {
  grid-column: span 2;
}

.gallery-placeholder {
  color: var(--blue);
  opacity: 0.32;
  transition: opacity 0.2s ease;
}
.gallery-cell:hover .gallery-placeholder {
  opacity: 0.5;
}
.gallery-placeholder svg {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}
.gallery-cell.is-feature .gallery-placeholder svg {
  width: 64px;
  height: 64px;
}

.gallery-note {
  margin-top: 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-soft);
  font-style: italic;
}

.hero-back {
  color: var(--blue-dark);
  text-decoration: none;
  font-weight: 600;
}
.hero-back:hover {
  color: var(--blue);
}

.album-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.album-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.15s ease;
}
.album-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue);
  text-decoration: none;
}
.album-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--gray-bg);
  overflow: hidden;
}
.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.album-card:hover .album-cover img {
  transform: scale(1.04);
}
.album-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.album-meta {
  padding: 16px 20px;
}
.album-meta h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  line-height: 1.3;
}
.album-date {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.album-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
  gap: 12px;
}
.album-cell {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-bg);
  display: block;
  position: relative;
  transition: transform 0.15s ease;
}
.album-cell:hover {
  transform: scale(1.01);
}
.album-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrer vers le haut plutôt que centré : pour les portraits/carrés
       dans des cellules paysage, on garde les visages visibles (typiquement
       dans le tiers supérieur de la photo). */
  object-position: 50% 25%;
  display: block;
}
/* Bento sizing : feature 2x2, tall 1x2, wide 2x1 — pattern dans le PHP.
   Dense grid flow remplit les trous automatiquement. */
.album-cell.is-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.album-cell.is-tall {
  grid-row: span 2;
}
.album-cell.is-wide {
  grid-column: span 2;
}
/* Parallax : l'image dépasse la cellule en hauteur, parallax.js translate
   le translateY en fonction du scroll. Exclu sur is-feature (l'image
   tient déjà tout l'espace) et is-video (le poster reste fixe sous le bouton play). */
.album-cell:not(.is-feature):not(.is-video) img {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  will-change: transform;
}
.album-cell {
  cursor: zoom-in;
}
.album-cell.is-video {
  cursor: pointer;
}
.album-cell-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.album-cell-play svg {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.album-cell.is-video:hover .album-cell-play {
  opacity: 0.85;
}

/* ─── Journal du club (home) : 1 actu en grand + grille de cards ──────────
   En-tête aligné à gauche (sur-titre + titre + lead), pas de bouton — la
   12ᵉ card de la grille mène à /actualites. */
.journal-head {
  margin-bottom: 32px;
}
.journal-head h2 {
  text-align: left;
  margin: 0;
}
.journal-head .eyebrow {
  margin: 0 0 12px;
}
.journal-lead {
  margin: 12px 0 0;
  max-width: 60ch;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Bandeau « à ne pas manquer » (haut de page) : message court + CTA qui
   scrolle vers l'annonce épinglée (#annonce). N'apparaît que si une actu est
   épinglée. */
.alert-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 13px 18px;
  border-radius: var(--radius-lg);
  background: var(--cream);
  border: 1px solid var(--cream-line, #e7ddcd);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
}
.alert-bar:hover {
  background: #f3ece0;
}
.alert-bar-text {
  flex: 1;
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.4;
}
.alert-bar-arrow {
  flex: none;
  display: inline-flex;
  color: var(--blue);
}
.alert-bar-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.16s ease;
}
.alert-bar:hover .alert-bar-arrow svg {
  transform: translateX(3px);
}
/* Cible du scroll : dégager la hauteur du header sticky. */
#annonce {
  scroll-margin-top: 96px;
}

/* Annonce épinglée : message complet (≈80 %) + image illustrative (≈20 %
   sur desktop). Pas de CTA — le texte est lu directement sur la home. */
.journal-annonce {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--cream);
  border: 1px solid var(--cream-line, #e7ddcd);
  box-shadow: var(--shadow-sm);
}
.journal-annonce-body {
  padding: clamp(28px, 3.5vw, 48px);
}
.journal-annonce-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.journal-annonce-body h3 {
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
}
.journal-annonce-media {
  position: relative;
  background: var(--gray-bg);
  min-height: 220px;
}
.journal-annonce-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Prose de l'annonce */
.annonce-text {
  color: var(--text);
  line-height: 1.6;
}
.annonce-text p {
  margin: 0 0 14px;
}
.annonce-text ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.annonce-text li {
  margin: 4px 0;
}
.annonce-text .annonce-audiences {
  list-style: none;
  padding-left: 0;
}
.annonce-text .annonce-audiences li {
  padding-left: 18px;
  position: relative;
}
.annonce-text .annonce-audiences li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}
/* Desktop : image étroite (~20 %) à droite, texte à gauche — seulement si
   une image est présente, sinon le texte prend toute la largeur. */
@media (min-width: 901px) {
  .journal-annonce:has(.journal-annonce-media) {
    grid-template-columns: 4fr 1fr;
  }
}
/* Mobile : pas d'image (l'illustration est un plus desktop), texte seul. */
@media (max-width: 900px) {
  .journal-annonce-media {
    display: none;
  }
}

/* Actu en avant (large) : panneau navy à gauche, photo à droite. */
.journal-feat {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 24px;
  min-height: 360px;
  box-shadow: var(--shadow-md);
}
.journal-feat-panel {
  background: #0a1f44;
  color: #fff;
  padding: clamp(32px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.journal-feat-rubric {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}
.journal-feat-panel h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}
.journal-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: 28px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: var(--radius-lg);
}
.journal-feat-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.16s ease;
}
.journal-feat:hover .journal-feat-cta svg {
  transform: translateX(3px);
}
.journal-feat-media {
  position: relative;
  overflow: hidden;
  background: var(--gray-bg);
  min-height: 280px;
}
.journal-feat-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform 0.6s ease;
}
.journal-feat:hover .journal-feat-media img {
  transform: scale(1.04);
}

/* Grille de cards (3 col desktop). */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.journal-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.journal-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gray-bg);
}
.journal-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform 0.5s ease;
}
.journal-card:hover .journal-card-media img {
  transform: scale(1.05);
}
.journal-card-cap {
  padding: 16px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.journal-rubric {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
/* Couleur par catégorie (le reste = vie du club, neutre). */
.journal-rubric--competition {
  color: var(--blue);
}
.journal-rubric--international {
  color: #0a1f44;
}
.journal-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 12ᵉ card : accès à toutes les actualités (même format, fond bleu). */
.journal-card--all {
  background: var(--blue);
  color: var(--white);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 160px;
}
.journal-card--all:hover {
  background: var(--blue-dark);
  transform: translateY(-4px);
}
.journal-all-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 24px;
}
.journal-all-inner svg {
  width: 18px;
  height: 18px;
  transition: transform 0.16s ease;
}
.journal-card--all:hover .journal-all-inner svg {
  transform: translateX(3px);
}

@media (max-width: 1000px) {
  .journal-feat {
    grid-template-columns: 1fr;
  }
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .journal-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile : on n'affiche que 5 cards (+ la card « toutes les actualités »). */
  .journal-card--extra {
    display: none;
  }
}

body.lightbox-open {
  overflow: hidden;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 18, 25, 0.96);
  display: flex;
  flex-direction: column;
  color: var(--white);
  user-select: none;
  -webkit-user-select: none;
}
.lightbox[hidden] {
  display: none;
}

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 80px 24px;
  overflow: hidden;
  position: relative;
}
.lightbox-img,
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  background: #000;
}
.lightbox-video[hidden],
.lightbox-img[hidden] {
  display: none;
}

.lightbox-bottom {
  padding: 12px 24px 18px;
  text-align: center;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
}
.lightbox-counter {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--white);
}
.lightbox-caption {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.lightbox-link-wrap {
  margin: 8px 0 0;
}
.lightbox-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.lightbox-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}
.lightbox-link[hidden] {
  display: none;
}

.lightbox-btn {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}
.lightbox-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}
.lightbox-btn:active {
  transform: scale(0.95);
}

.lightbox-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  z-index: 2;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 2.2rem;
  line-height: 1;
}
.lightbox-prev {
  left: 16px;
}
.lightbox-next {
  right: 16px;
}
.lightbox-btn:active {
  transform: translateY(-50%) scale(0.95);
}
.lightbox-close:active {
  transform: scale(0.95);
}

@media (max-width: 640px) {
  .lightbox-stage {
    padding: 56px 8px 16px;
  }
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }
  .lightbox-prev {
    left: 6px;
  }
  .lightbox-next {
    right: 6px;
  }
}

.info-banner {
  background: linear-gradient(135deg, #fef9f1 0%, #fbf3e5 100%);
  border-top: 4px solid var(--blue);
  border-bottom: 1px solid rgba(0, 105, 180, 0.12);
}
.info-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 22px 24px;
}
.info-banner-item + .info-banner-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.info-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}
.info-banner-tag svg {
  width: 14px;
  height: 14px;
}
.info-banner-body p {
  margin: 0 0 6px;
}
.info-banner-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .info-banner-inner {
    padding: 18px 16px;
  }
}

.member-hero {
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
  background: linear-gradient(180deg, #f4f7fa 0%, #e8eef5 100%);
}
/* Variante photo : le hero adhérents porte une image de fond (div
   .page-hero-bg) → on retire le dégradé clair et le titre passe en blanc
   via les règles .page-hero.has-image. */
.member-hero.has-image { background: var(--text); }
.member-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.member-hero .eyebrow {
  color: var(--blue-dark);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.member-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.15s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.member-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue);
  text-decoration: none;
}
.member-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
}
.member-icon svg {
  width: 26px;
  height: 26px;
}
.member-card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.member-card p {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0 0 16px;
  flex-grow: 1;
}
.member-soon {
  display: inline-block;
  align-self: flex-start;
  background: var(--gray-bg);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
}
.member-help {
  background: var(--blue-light);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.member-help h3 {
  margin: 0 0 6px;
}
.member-help p {
  margin: 0;
  color: var(--text);
}

.footer-member-link {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-member-link a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.footer-member-link a:hover {
  color: var(--white);
}

.highlight-block {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.highlight-block:last-child {
  margin-bottom: 0;
}
.highlight-tag {
  display: inline-block;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 12px;
}
.highlight-block h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
}
.highlight-block p {
  color: var(--text-soft);
  margin: 0 0 8px;
}
.highlight-block p:last-child {
  margin-bottom: 0;
}
.highlight-block strong {
  color: var(--text);
}

.feminin-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border-left: 0;
  box-shadow: none;
  position: relative;
}
.feminin-tag {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 18px;
}
.feminin-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
}
.feminin-card .section-lead {
  text-align: left;
  margin: 0 0 20px;
  color: var(--text);
  font-weight: 600;
}
.feminin-card .check-list li::before {
  background: var(--blue);
}
.feminin-close {
  margin-top: 24px;
  padding: 6px 0 6px 18px;
  background: transparent;
  border-left: 3px solid var(--blue);
  border-radius: 0;
  font-style: italic;
  color: var(--text-soft);
}
.feminin-close strong {
  color: var(--text);
  font-style: normal;
}

.pedagogy .section-lead {
  max-width: 70ch;
}
.pedagogy .section-lead strong {
  color: var(--blue);
  font-weight: 700;
}
.weapons-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.weapons-row li {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.weapons-row li.weapon-ours {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--white) 60%);
}
.weapons-row strong {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
}
.weapons-row .weapon-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--blue);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.weapons-row .weapon-desc {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.heritage .section-lead {
  max-width: 72ch;
}
.palmares-grid {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.palmares-grid li {
  padding: 28px 16px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--blue);
}
.palmares-num {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.palmares-label {
  display: block;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.35;
}
.values-row {
  list-style: none;
  padding: 32px 0 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  border-top: 1px solid var(--gray-line);
}
.values-row li {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}
.values-row strong {
  display: block;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.legal-page {
  color: var(--text);
  line-height: 1.7;
}
.legal-page h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.25rem;
  color: var(--blue);
}
.legal-page h2:first-of-type {
  margin-top: 8px;
}
.legal-page p {
  margin: 0 0 14px;
}
.legal-list {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 16px;
}
.legal-list li {
  margin-bottom: 6px;
}
.legal-meta {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-line);
  font-size: 0.88rem;
  color: var(--text-soft);
  font-style: italic;
}

.step-tag {
  display: inline-block;
  margin-left: 8px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}
.step-note {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--gray-bg);
  border-left: 3px solid var(--gray-line);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.5;
}

.dates-list {
  list-style: none;
  counter-reset: date;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--gray-line);
}
.dates-list li {
  counter-increment: date;
  display: grid;
  grid-template-columns: 56px minmax(180px, auto) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 8px;
  border-bottom: 1px solid var(--gray-line);
}
.dates-list li::before {
  content: counter(date, decimal-leading-zero);
  color: var(--blue);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  grid-column: 1;
}
.dates-list .date-label {
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  grid-column: 2;
}
.dates-list .date-desc {
  color: var(--text-soft);
  line-height: 1.5;
  grid-column: 3;
}
@media (max-width: 640px) {
  .dates-list li {
    grid-template-columns: 40px 1fr;
    gap: 12px 16px;
    padding: 16px 4px;
  }
  .dates-list .date-label {
    grid-column: 2;
  }
  .dates-list .date-desc {
    grid-column: 2;
    margin-top: 4px;
  }
}

/* Section banner : image dans .section-banner-bg pour parallax JS
   (équivalent visuel de background-attachment:fixed sans le bug iOS). */
.section-banner {
  padding: clamp(30px, 5vw, 58px) 24px;
  margin: 0 0 clamp(22px, 3.5vw, 38px);
  background-color: var(--text);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-banner-bg {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 100%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 0;
}
.section-banner > *:not(.section-banner-bg) {
  position: relative;
  z-index: 1;
}
.section-banner h2 {
  color: var(--white);
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.01em;
}
.section-banner-eyebrow {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  margin: 0 0 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.section-banner p.section-lead {
  color: rgba(255, 255, 255, 0.92);
  margin-top: 12px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.section:has(> .section-banner:first-child) {
  padding-top: 0;
}

.inscription-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
  margin-bottom: 28px;
}
.inscription-status {
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.inscription-status-tag {
  background: var(--blue);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.inscription-status-date {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.btn-disabled,
.btn-disabled:hover {
  background: var(--gray-line);
  border-color: var(--gray-line);
  color: var(--text-soft);
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: none;
  transform: none;
}
.inscription-availability {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-style: italic;
}
.inscription-details {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-line);
  text-align: left;
}
.inscription-details > p {
  margin: 0 0 12px;
  color: var(--text);
}
.inscription-disclaimer {
  margin: 20px 0 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: left;
  padding: 6px 0 6px 18px;
  background: transparent;
  border-left: 3px solid var(--gray-line);
  border-radius: 0;
  line-height: 1.5;
}
.season-dates-compact {
  text-align: center;
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 16px;
  line-height: 1.6;
}
.contact-before {
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

.contact-section {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--blue-light);
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.contact-card h2 {
  margin: 0 0 12px;
  text-align: center;
}
.contact-intro {
  color: var(--text-soft);
  font-size: 1.05rem;
  max-width: 50ch;
  margin: 0 auto 28px;
}
.contact-email-link {
  display: inline-block;
  margin: 0 auto 24px;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-light);
  border: 2px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 14px 28px;
  text-decoration: none;
  word-break: break-all;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.contact-email-link:hover {
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
}
.contact-meta {
  color: var(--text-soft);
  font-size: 0.92rem;
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.5;
}

a.email-protected:not(.contact-email-link) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.email-protected:not(.contact-email-link):hover {
  color: var(--blue-dark);
}
.site-footer a.email-protected:not(.contact-email-link),
.site-footer a.email-protected:not(.contact-email-link):hover {
  color: var(--white);
}
.email-fallback {
  color: inherit;
  font-style: italic;
}
.contact-email-link .email-fallback {
  font-style: normal;
}

@media (max-width: 1100px) {
  .nav-link {
    padding: 8px 8px;
    font-size: 0.85rem;
  }
}

@media (max-width: 980px) {
  .nav-list {
    display: none;
  }
  .header-nav {
    gap: 12px;
  }
  .nav-cta {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .utility-meta {
    font-size: 0.72rem;
  }
}

@media (max-width: 880px) {
  .cards-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards-2 {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .steps-list {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
  }
  .price-card-highlight {
    transform: none;
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 140px;
  }
  .album-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 140px;
  }
  .member-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .weapons-row {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .palmares-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .values-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
  .header-nav .btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .page-hero .btn {
    display: none;
  }
  .site-footer {
    display: none;
  }
  /* Footer caché sur mobile : on garde les logos, avec un espace bas pour
       passer sous le CTA sticky « Inscription ». */
  .prefooter-logos {
    padding-bottom: 150px;
  }
  .hero {
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .page-hero {
    padding-top: 32px;
    padding-bottom: 40px;
  }
  /* En portrait mobile, on cache la utility-bar — il faut donc remettre
       --utility-bar-h à 0 pour que le .site-header sticky reste collé au
       haut sans laisser de gap noir vide. */
  :root {
    --utility-bar-h: 0px;
  }
  .utility-bar {
    display: none;
  }
  .brand-logo {
    display: none;
  }
  .brand-text {
    display: inline-flex;
  }
  .brand-name-long {
    display: none;
  }
  .brand-name-short {
    display: inline;
    font-size: 1.05rem;
  }
  .member-grid {
    grid-template-columns: 1fr;
  }
  .album-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 110px;
    gap: 8px;
  }
  .album-list {
    grid-template-columns: 1fr;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .cards-3 {
    grid-template-columns: 1fr;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
    gap: 8px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .lead-form {
    padding: 24px 20px;
  }
  /* Mobile : barre pleine largeur en bas (override de la pastille desktop). */
  .mobile-cta {
    display: block;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
  }
  main {
    padding-bottom: 80px;
  }
  .price-card-highlight {
    transform: none;
  }
  .trust-num {
    font-size: 1.6rem;
  }
  .steps-list-vertical li {
    padding-left: 24px;
    padding-top: 72px;
  }
  .steps-list-vertical li::before {
    top: 20px;
  }
}

@media (max-width: 380px) {
  .header-nav {
    gap: 8px;
  }
  .logo img,
  .logo .brand-logo {
    height: 40px;
  }
}

/* ----- Logos affiliations et labels (sous .team-cards des pages d'offres) -----
   FFE + Mairie de Paris + labels FFE (CL, EPTB, ESA). Affichage discret,
   sans texte d'explication — interaction au clic à venir. */
.club-logos {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
/* Bandeau d'affiliations en pré-footer (présent sur toutes les pages). */
/* Partenaires « escrime ancienne » : 2 cartes côte à côte (photo + texte). */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.partner-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.partner-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gray-bg);
}
.partner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 28px;
}
.partner-body h2 {
  text-align: left;
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.partner-body p {
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0 0 20px;
}
.partner-body .btn {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 760px) {
  .partner-grid {
    grid-template-columns: 1fr;
  }
}

/* Bande newsletter (inscription par e-mail via formulaire StatsLive). */
.newsletter {
  background: var(--cream);
  padding: clamp(40px, 6vw, 72px) 0;
  text-align: center;
}
.newsletter-inner .eyebrow {
  margin: 0 0 12px;
}
.newsletter h2 {
  margin: 0 0 12px;
}
.newsletter-lead {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 52ch;
}
.newsletter-embed {
  max-width: 520px;
  margin: 0 auto;
}

.prefooter-logos {
  padding: clamp(28px, 4.5vw, 48px) 0;
  border-top: 1px solid var(--gray-line);
}
.prefooter-logos .club-logos {
  margin-top: 0;
}
.club-logo {
  height: clamp(70px, 8vw, 100px);
  width: auto;
  opacity: 0.92;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.club-logo:hover {
  opacity: 1;
  transform: scale(1.04);
}

/* ===========================================
   Calendrier — page /calendrier
   Layout plat, mobile-first, pas de bloc-dans-bloc.
   =========================================== */

.cal-controls {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cal-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.cal-cat-toggle {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.4;
}
.cal-cat-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.cal-cat-toggle.is-active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  font-weight: 600;
}
.cal-cat-toggle.cal-cat-club {
  border-style: dashed;
}
.cal-cat-toggle.cal-cat-club.is-active {
  background: #0d6c4d;
  border-color: #0d6c4d;
  border-style: solid;
}

.cal-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 8px 0 12px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.cal-controls-status {
  font-style: italic;
}
.cal-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.cal-toggle-past {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-left: auto;
}
.cal-toggle-past input {
  margin: 0;
}

.cal-subscribe-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.cal-subscribe-bar strong {
  color: var(--text);
  margin-right: 4px;
}
.cal-sub-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s ease;
}
.cal-sub-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.cal-sub-btn.cal-sub-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.cal-sub-btn.cal-sub-primary:hover {
  background: var(--blue-dark);
  color: var(--white);
}
.cal-sub-pdf {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-decoration: underline;
}

.cal-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cal-week {
  padding: 4px 0 8px 14px;
  border-left: 3px solid var(--blue);
}
.cal-week.is-past {
  opacity: 0.5;
}
.cal-week-header {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue);
  margin-bottom: 6px;
}
.cal-week-events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cal-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}
.cal-event[hidden],
.cal-week[hidden],
.cal-timeline[hidden],
.cal-empty[hidden] {
  display: none !important;
}
.cal-event + .cal-event {
  padding-top: 6px;
}
.cal-event-main {
  flex: 1;
  min-width: 0;
}
.cal-event-title {
  margin: 0 0 3px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.cal-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cal-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-soft);
  line-height: 1.4;
}
.cal-tag-cat {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  font-weight: 500;
}
.cal-tag-type {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-tag-type-international {
  background: #fdf3d7;
  color: #7a5d0a;
}
.cal-tag-type-national {
  background: #fadbd8;
  color: #842029;
}
.cal-tag-type-regional {
  background: var(--blue-light);
  color: var(--blue-dark);
}
.cal-tag-type-open {
  background: #e8dcf2;
  color: #4a235a;
}
.cal-tag-type-club {
  background: #d4f0e6;
  color: #0d6c4d;
}

.cal-gap {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
  padding: 2px 0;
  font-style: italic;
}

.cal-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-soft);
}

.cal-disclaimer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
  color: var(--text-soft);
}

@media (max-width: 640px) {
  .cal-cat-toggle {
    font-size: 0.82rem;
    padding: 4px 10px;
  }
  .cal-toggle-past {
    margin-left: 0;
    width: 100%;
  }
  .cal-sub-pdf {
    margin-left: 0;
  }
  .cal-week-header {
    font-size: 0.75rem;
  }
  .cal-event-title {
    font-size: 0.92rem;
  }
}

/* ----- Contact page (/contact) ----- */
.contact-page .contact-line {
  margin: 4px 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
}
.contact-page .contact-line a {
  color: var(--blue);
}
.contact-page .contact-note {
  margin: 0 0 24px;
  color: var(--text-soft);
  font-size: 0.92rem;
}

/* ─── Page Performances ──────────────────────────────────────────────── */
.perf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.perf-views {
  display: inline-flex;
  gap: 4px;
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 4px;
}
.perf-view-btn {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.perf-view-btn.is-active {
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
/* Sélecteur de saison : secondaire et discret (changer de saison est rare,
   on n'y va que pour consulter les saisons passées). */
.perf-seasons {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.perf-season-btn {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.perf-season-btn:hover {
  color: var(--text);
  background: var(--gray-bg);
}
.perf-season-btn.is-active {
  color: var(--blue);
  font-weight: 700;
}
.perf-search {
  position: relative;
  margin-left: auto;
  min-width: 240px;
}
.perf-search input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  font: inherit;
}
.perf-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
}
.perf-search-results li {
  margin: 0;
}
.perf-search-results button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.perf-search-results button:hover {
  background: var(--blue-light);
}

.perf-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
/* L'attribut [hidden] doit l'emporter sur display:flex */
.perf-filters[hidden] {
  display: none;
}

/* Sparkline d'évolution multi-saisons (vue tireur, colonne "Évolution") */
.perf-spark-cell {
  padding: 4px 8px;
  white-space: nowrap;
}
.perf-spark {
  vertical-align: middle;
  display: inline-block;
}
.perf-spark-line {
  stroke: var(--gray-line, #c8cdd2);
  stroke-width: 1.2;
}
.perf-spark-dot {
  fill: #9aa0a6;
  cursor: help;
}
.perf-spark-dot.is-curr {
  fill: var(--blue, #0069b4);
}
.perf-spark-na {
  color: var(--text-soft, #8a8f96);
  font-size: 14px;
}

/* Lien-bouton sur un nom de compétition (vue tireur, vue choucroute) */
.perf-comp-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--blue, #0069b4);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.perf-comp-link:hover {
  text-decoration: underline;
}

/* Vue compétition (bracket) */
.perf-comp-detail {
  margin-top: 12px;
}
.perf-comp-title {
  margin: 4px 0 4px;
  font-size: 1.35rem;
}
.perf-comp-meta {
  color: var(--text-soft, #606060);
  margin: 0 0 14px;
  font-size: 0.95rem;
}

/* Points "entre crochets" dans les CSVs FFE = compétition non retenue dans
   la moyenne du classement saison (la FFE ne garde que les N meilleurs). */
.perf-table .is-bracketed {
  color: var(--text-soft, #8a8f96);
  font-style: italic;
  cursor: help;
}
.perf-table .is-bracketed::before {
  content: "[";
}
.perf-table .is-bracketed::after {
  content: "]";
}
.perf-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.perf-chip {
  border: 1px solid var(--gray-line);
  background: var(--white);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.9rem;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.perf-chip.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.perf-meta {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0 0 16px;
}
.perf-loading,
.perf-empty,
.perf-error {
  color: var(--text-soft);
  padding: 20px 0;
}
.perf-error {
  color: #b00020;
}

/* Carte catégorie (vue Classement) — alignée sur les cartes Résultats. */
.perf-cat-block {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
  margin: 0 0 16px;
}
.perf-cat-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
.perf-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}
.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.perf-table th,
.perf-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--gray-line);
  white-space: nowrap;
}
.perf-table thead th {
  background: var(--gray-bg);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}
.perf-table td.num,
.perf-table th.num {
  text-align: right;
}
.perf-table td.is-zero {
  color: var(--gray-line);
}
.perf-tireur-row:hover {
  background: var(--blue-light);
}
.perf-rang {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.perf-total {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.85em;
}
.perf-name-btn {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.perf-name-btn:hover {
  text-decoration: underline;
}
.perf-cl-lib {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.85em;
  white-space: normal;
}

.perf-tireur-detail .perf-back {
  border: 0;
  background: var(--gray-bg);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 14px;
}
.perf-tireur-name {
  font-size: 1.5rem;
  color: var(--blue-dark);
  margin: 0 0 18px;
}
.perf-sub {
  font-size: 1.05rem;
  margin: 22px 0 10px;
  color: var(--text);
}
.perf-sub-note {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.85rem;
}

.perf-choucroute-intro {
  background: var(--blue-light);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
/* Carte choucroute — alignée sur les cartes Résultats. */
.perf-chou-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
  margin: 0 0 16px;
}
.perf-chou-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.perf-chou-events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.perf-chou-events li {
  padding: 3px 0;
  font-size: 0.92rem;
}
.perf-chou-date {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* Vue résultats par semaine (chrono décroissant). Une carte par compétition. */
.perf-week-title {
  font-size: 1.2rem;
  color: var(--blue-dark);
  border-bottom: 2px solid var(--blue-light);
  padding-bottom: 6px;
  margin: 30px 0 16px;
}
.perf-resultats > .perf-week-title:first-child {
  margin-top: 4px;
}

/* Carte compétition : fond blanc, liseré bleu à gauche, ombre légère. */
.perf-week-comp {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
  margin: 0 0 16px;
}
.perf-week-comp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.perf-week-comp-title {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.perf-week-comp-meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
}

/* Bilan médailles du club (haut droite de la carte). */
.perf-comp-medals {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.perf-medal-tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gray-bg);
  border-radius: 999px;
  padding: 3px 11px 3px 3px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
/* Pastille médaille ronde (rang sur une ligne, ou compte dans le bilan). */
.perf-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.perf-medal-or {
  background: #f1c40f;
  color: #6b5200;
}
.perf-medal-arg {
  background: #c8cdd4;
  color: #444a52;
}
.perf-medal-bronze {
  background: #d99b6c;
  color: #5a3417;
}

/* Sous-titre catégorie (vétérans V1/V2/V3) : label bleu + filet. */
.perf-week-cat {
  margin: 0 0 6px;
}
.perf-week-cat + .perf-week-cat {
  margin-top: 14px;
}
.perf-week-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.perf-week-cat-head span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
}
.perf-week-cat-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-line);
}

/* Colonnes par sexe : côte-à-côte desktop, empilées mobile. */
.perf-week-sexes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
}
.perf-week-sexe {
  flex: 1 1 260px;
  min-width: 0;
}
.perf-week-sexe-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-line);
}
.perf-week-sexe-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}
.perf-week-count {
  background: var(--gray-bg);
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}
.perf-week-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Séparateur de palier : pastille T-N à gauche, filet, « Tableau de N » à droite. */
.perf-week-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.perf-tier-pill {
  background: var(--gray-bg);
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 5px;
  flex: 0 0 auto;
}
.perf-tier-rule {
  flex: 1;
  height: 1px;
  background: var(--gray-line);
}
.perf-tier-tableau {
  color: var(--text-soft);
  font-size: 0.76rem;
  flex: 0 0 auto;
}

/* Lignes de résultat. */
.perf-week-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.94rem;
}
.perf-week-row.is-winner {
  background: var(--blue-light);
}
.perf-week-rang {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
.perf-week-row .perf-name-btn {
  flex: 1 1 auto;
}
.perf-week-row .perf-medal {
  margin-left: auto;
}

@media (max-width: 640px) {
  .perf-search {
    margin-left: 0;
    width: 100%;
  }
  .perf-controls {
    gap: 12px;
  }
}

/* ----- Performance : deltas, tri colonnes, masquage classements ----- */
.perf-delta {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.3;
  cursor: help;
  vertical-align: middle;
}
.perf-delta-up {
  background: #d4f0e6;
  color: #0d6c4d;
}
.perf-delta-down {
  background: #fadbd8;
  color: #842029;
}
.perf-delta-eq {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-soft);
}
.perf-delta-num {
  margin-left: 1px;
}

.perf-sort-th {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.perf-sort-th:hover {
  background: var(--blue-light);
}
.perf-sort-th.is-sorted {
  color: var(--blue);
}
.perf-sort-th:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.perf-show-more {
  margin: 10px 0 18px;
  text-align: center;
}
.perf-link-btn {
  background: none;
  border: 0;
  color: var(--blue);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}
.perf-link-btn:hover {
  color: var(--blue-dark);
}

/* Compétition reportée de la saison précédente (en attente de remplacement) */
.perf-comp-carryover td {
  opacity: 0.55;
  font-style: italic;
}
.perf-carryover-badge {
  display: inline-block;
  margin-left: 4px;
  color: var(--text-soft);
  font-style: normal;
  cursor: help;
  font-size: 0.85em;
}

/* Chips compact sous la vue tireur (filtre catégorie compétitions). */
.perf-comp-filters {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 12px;
}
.perf-comp-filters .perf-chip {
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Lien vers fiche FFE depuis un classement */
.perf-ffe-link {
  color: var(--blue);
  text-decoration: none;
}
.perf-ffe-link:hover {
  text-decoration: underline;
}
.perf-ext-icon {
  font-size: 0.8em;
  color: var(--text-soft);
  margin-left: 2px;
}

/* Âge à côté du nom du tireur (badge discret mais visible) */
.perf-tireur-age {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  vertical-align: middle;
  cursor: help;
}

/* Colonne 'Perf' : bucket de performance (🥇/🥈/🥉/T8/T16/...) */
.perf-bucket {
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ─── Section équipe (homepage) : slider snap, 1 active = image+texte ──── */
/* Démarcation de fond (crème) comme le sketch, pour séparer la section des
   blocs blancs autour. Uniquement sur la home (.equipe-home). */
.equipe-home {
  background: var(--cream);
}
/* En-tête type sketch : sur-titre + titre alignés à gauche, flèches de
   défilement remontées en bas à droite (au lieu d'être sous le slider). */
.team-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.team-head-text {
  text-align: left;
}
.team-head .eyebrow {
  margin: 0 0 12px;
}
.team-head h2 {
  text-align: left;
  margin: 0;
}
.team-head-lead {
  margin: 12px 0 0;
  max-width: 52ch;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.5;
}
.team-slider-nav-head {
  flex: none;
  margin-top: 0;
}
@media (max-width: 700px) {
  .team-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.team-slider {
  position: relative;
  margin-top: 12px;
}
.team-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 18px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.team-track::-webkit-scrollbar {
  height: 6px;
}
.team-track::-webkit-scrollbar-thumb {
  background: var(--gray-line);
  border-radius: 3px;
}
.team-track::-webkit-scrollbar-track {
  background: transparent;
}

/* Carte slide : largeur visible variable (180 inactive ↔ 540 active),
   mais le contenu interne (photo 220 + texte 320 = 540) garde une LARGEUR FIXE.
   Conséquence : le texte ne reflow JAMAIS quand on passe inactif → actif.
   On voit juste la fenêtre s'élargir et révéler le texte déjà mis en page. */
.team-slide {
  flex: 0 0 220px;
  height: 380px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--white);
  cursor: pointer;
  scroll-snap-align: center;
  display: flex;
  transition: flex-basis 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.team-slide:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.team-slide-photo {
  flex: 0 0 220px;
  position: relative;
  background: #111;
  overflow: hidden;
  height: 100%;
}
.team-slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-slide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  pointer-events: none;
  transition: opacity 0.25s;
}
.team-slide-overlay strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
}
.team-slide-overlay span {
  font-size: 0.78rem;
  opacity: 0.88;
  font-style: italic;
}
.team-slide-text {
  flex: 0 0 320px; /* largeur FIXE — pas de reflow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 28px;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
}
.team-quote {
  margin: 0 0 18px;
  border: 0;
  padding: 0;
}
.team-quote p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.team-quote p::before {
  content: "« ";
  color: var(--blue);
  font-weight: 700;
}
.team-quote p::after {
  content: " »";
  color: var(--blue);
  font-weight: 700;
}
.team-slide-info h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.team-slide-info h3 span {
  color: var(--blue);
  margin-left: 4px;
}
.team-role {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-style: italic;
  font-size: 0.95rem;
}

/* ── Carte active : la fenêtre visible s'élargit à 540px pour révéler le texte ── */
.team-slide.is-active {
  flex-basis: 540px;
  cursor: default;
}
.team-slide.is-active .team-slide-overlay {
  opacity: 0;
}

/* Boutons prev/next */
.team-slider-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.team-nav-btn {
  border: 1px solid var(--gray-line);
  background: var(--white);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.team-nav-btn:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

/* ── Mobile : toutes les cartes identiques (photo + texte), 75vw de large.
   ~15% de la carte suivante reste visible pour suggérer le scroll horizontal.
   Pas d'état "actif" différent visuellement → pas de flick. ── */
@media (max-width: 700px) {
  .team-track {
    gap: 10px;
    scroll-padding-left: 12.5vw;
    scroll-padding-right: 12.5vw;
  }
  .team-slide,
  .team-slide.is-active {
    flex: 0 0 75vw;
    height: auto;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    transition: none;
    cursor: default;
  }
  .team-slide-photo {
    flex: 0 0 60vw;
    width: 100%;
    height: 60vw;
    max-height: 360px;
  }
  .team-slide-text {
    flex: 1 1 auto;
    width: 100%;
    padding: 16px 20px 20px;
  }
  /* Overlay nom sur photo : on cache complètement, le nom est déjà
       dans le bloc texte juste en-dessous. */
  .team-slide-overlay {
    display: none;
  }
  .team-quote p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .team-quote {
    margin-bottom: 12px;
  }
  .team-slide-info h3 {
    font-size: 1.05rem;
  }
  /* Flèches inutiles : swipe natif. */
  .team-slider-nav {
    display: none;
  }
}