/* ============================================================
   rd.css — Socle du design (maquettes Claude Design .dc.html)
   Le design vit surtout dans les styles inline des pages (fidèle
   aux maquettes) ; ce fichier ne porte que le global partagé.
   ============================================================ */
*{box-sizing:border-box}
/* Police par défaut de tout le site. Sans elle, chaque élément qui ne
   fixe pas la sienne en ligne — barre du bas, boutons du menu mobile —
   retombait sur le sérif du navigateur (Times sur iPhone). */
html,body{margin:0;padding:0;background:#FFFFFF;color:#0B1130;font-family:'Open Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{text-decoration:none}
button{font-family:inherit}

@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
details summary::-webkit-details-marker{display:none}

/* Contenu desktop / mobile (breakpoint maquette : 920px) */
@media (max-width:920px){ header .rd-dsk{display:none !important} }
/* Nav : bascule desktop ↔ hamburger + drawer plein écran à 1024px
   (marge confortable avec la police du menu ; en dessous, hamburger). */
@media (max-width:1023px){ nav .rd-dsk{display:none !important} }
@media (min-width:1024px){ .rd-mob{display:none !important} .rd-mobile-menu{display:none !important} }
.rd-mobile-menu{display:none}
.rd-mobile-menu.open{display:flex !important}

/* ============================================================
   Menus déroulants de la barre PC (« Le club / Jouer / Infos »)
   Le survol ouvre (souris) ; le clic ouvre aussi et pose .open +
   aria-expanded (rd-ui.js) pour les écrans tactiles larges et le
   clavier. Sur mobile, .rd-dsk est masqué : le drawer prend le
   relais, rien ne change.
   ============================================================ */
.rd-menu{position:relative}
.rd-menu-btn{
  background:none;border:0;cursor:pointer;font:inherit;font-weight:800;
  color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:6px;padding:12px 2px
}
.rd-menu-btn svg{transition:transform .18s ease}
.rd-menu:hover .rd-menu-btn,.rd-menu.open .rd-menu-btn{color:#A5EB78}
.rd-menu.open .rd-menu-btn svg{transform:rotate(180deg)}
.rd-menu-panel{
  position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);
  min-width:214px;background:#0A1155;border:1px solid rgba(165,235,120,.22);
  border-radius:14px;box-shadow:0 24px 60px rgba(3,5,28,.55);padding:8px;
  display:none;flex-direction:column;z-index:120
}
/* Pont invisible au-dessus du panneau : il comble l'écart de 9px avec la
   barre pour que le survol ne se coupe pas en traversant le vide. */
.rd-menu-panel::before{content:'';position:absolute;left:-8px;right:-8px;top:-12px;height:12px}
.rd-menu.open .rd-menu-panel{display:flex}
@media (hover:hover){ .rd-menu:hover .rd-menu-panel{display:flex} }
.rd-menu-panel a{color:rgba(255,255,255,.88);font-size:14px;font-weight:700;padding:10px 16px;border-radius:9px;white-space:nowrap}
.rd-menu-panel a:hover{background:rgba(165,235,120,.12);color:#A5EB78}

/* Apparition au scroll (remplace data-reveal des maquettes) */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
[data-reveal].rd-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* Barre de défilement horizontale discrète (scroller joueurs).
   Sur PC seulement : styler ::-webkit-scrollbar désactive la barre
   flottante native et l'affiche en permanence — sur téléphone, cette
   bande grise pesait sous les cartes sans rien apporter, le balayage
   et la carte qui dépasse suffisent. */
@media (min-width:921px){
  .rd-scroll::-webkit-scrollbar{height:8px}
  .rd-scroll::-webkit-scrollbar-thumb{background:rgba(6,11,60,.25);border-radius:4px}
}
@media (max-width:920px){
  .rd-scroll{scrollbar-width:none}
  .rd-scroll::-webkit-scrollbar{display:none}
}

/* ============================================================
   Nav mobile flottante (pill) — injectée par js/rd-mobile.js
   Reprise de la maquette « Site mobile et PWA ».
   ============================================================ */
.rd-pill{
  position:fixed;left:14px;right:14px;bottom:12px;height:60px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(6,11,60,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.09);border-radius:19px;
  display:flex;align-items:center;gap:2px;padding:0 6px;z-index:150;
  box-shadow:0 10px 30px rgba(3,5,28,.45);
  transition:transform .28s ease
}
/* Escamotée pendant qu'on descend (js/rd-mobile.js), revient dès qu'on
   remonte : la barre ne recouvre plus le contenu qu'on est en train de lire. */
.rd-pill.rd-pill-hidden{transform:translateY(calc(100% + 24px))}
@media (prefers-reduced-motion: reduce){ .rd-pill{transition:none} }
.rd-pill a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  align-self:center;height:48px;border-radius:13px;
  text-decoration:none;color:rgba(255,255,255,.6);
  transition:transform .12s ease, background .2s ease, color .2s ease
}
.rd-pill a svg{display:block}
.rd-pill a span{font-size:9px;font-weight:700;letter-spacing:.02em;line-height:1}
.rd-pill a:active{transform:scale(.92)}
/* Section courante : pastille verte translucide derrière l'item, façon
   barre d'onglets d'application — l'œil la trouve sans lire. */
.rd-pill a.is-active{color:#A5EB78;background:rgba(165,235,120,.13)}
.rd-pill a.is-active span{font-weight:800}
.rd-pill a.rd-pill-cta{
  flex:0 0 auto;flex-direction:row;gap:7px;background:#A5EB78;color:#060B3C;
  font-weight:800;padding:0 15px;height:44px;border-radius:12px;margin-left:5px;
  box-shadow:0 4px 14px rgba(165,235,120,.28)
}
.rd-pill a.rd-pill-cta span{font-size:12px;font-weight:800;letter-spacing:.01em;text-transform:none}
.rd-pill a.rd-pill-cta.is-active,.rd-pill a.rd-pill-cta{color:#060B3C}
.rd-pill a.rd-pill-cta:active{transform:scale(.96)}
/* Décale le contenu pour ne pas passer sous la pill */
body.rd-has-pill{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
/* Pill + bannière : mobile uniquement */
@media (min-width:921px){ .rd-pill{display:none !important} body.rd-has-pill{padding-bottom:0} }

/* Bouton « Installer l'application » dans le menu mobile (injecté) */
.rd-install-drawer{
  display:none;align-items:center;justify-content:center;gap:9px;
  background:none;border:none;color:rgba(255,255,255,.7);font-weight:700;font-size:13px;
  cursor:pointer;padding:10px;margin-top:4px
}
.rd-can-install .rd-install-drawer{display:flex}

/* Bannière d'installation PWA (injectée, dismissable) */
.rd-install-banner{
  position:fixed;left:16px;right:16px;z-index:160;
  bottom:calc(92px + env(safe-area-inset-bottom,0px));
  background:#fff;color:#060B3C;border:1px solid rgba(6,11,60,.12);
  border-radius:18px;box-shadow:0 18px 44px rgba(6,11,60,.28);
  display:none;align-items:center;gap:12px;padding:12px 14px
}
.rd-can-install .rd-install-banner{display:flex}
@media (min-width:921px){ .rd-install-banner{left:auto;right:24px;bottom:24px;max-width:360px} }
.rd-install-banner img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.rd-install-banner .rd-ib-txt{flex:1;min-width:0}
.rd-install-banner .rd-ib-txt b{display:block;font-size:14px;line-height:1.2}
.rd-install-banner .rd-ib-txt small{display:block;font-size:11.5px;color:rgba(6,11,60,.6);margin-top:2px}
.rd-install-banner .rd-ib-go{
  background:#A5EB78;color:#060B3C;border:none;border-radius:12px;
  font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase;
  padding:10px 14px;cursor:pointer;flex:0 0 auto;font-family:inherit
}
.rd-install-banner .rd-ib-close{
  background:none;border:none;color:rgba(6,11,60,.4);font-size:20px;line-height:1;
  cursor:pointer;padding:4px;flex:0 0 auto;font-family:inherit
}

/* ============================================================
   Menu mobile plein écran (typo Anton) — reconstruit par
   js/rd-mobile.js à partir du menu existant. Reprise fidèle
   de la maquette « Site mobile et PWA ».
   ============================================================ */
.rd-mobile-menu.rd-drawer{
  position:fixed;top:74px;left:0;right:0;bottom:0;z-index:170;
  background:linear-gradient(180deg,#060B3C,#0A1155);
  flex-direction:column;
  padding:14px 26px calc(24px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;gap:0
}
.rd-drawer-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:26px
}
.rd-drawer-brand{display:flex;align-items:center;gap:10px}
.rd-drawer-brand img{width:38px;height:38px;object-fit:contain}
.rd-drawer-brand span{
  font-family:'Anton',sans-serif;font-size:15px;color:#fff;text-transform:uppercase;line-height:1
}
.rd-drawer-brand span small{
  display:block;font-size:8px;letter-spacing:.2em;color:#A5EB78;
  font-family:'Open Sans',sans-serif;font-weight:700
}
.rd-drawer-close{
  width:46px;height:46px;background:rgba(255,255,255,.08);border:none;color:#fff;
  font-size:20px;cursor:pointer;font-family:inherit;flex:0 0 auto
}
.rd-drawer-links{display:flex;flex-direction:column}
.rd-drawer-link{
  display:flex;align-items:baseline;gap:16px;text-decoration:none;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)
}
.rd-drawer-link .rd-dl-num{
  font-family:'Anton',sans-serif;font-size:13px;color:rgba(165,235,120,.6);width:26px;flex:0 0 auto
}
.rd-drawer-link .rd-dl-label{
  font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;color:#fff;line-height:1;
  transition:color .15s ease
}
.rd-drawer-link:active .rd-dl-label{color:#A5EB78}
/* Entrée mise en avant (Partenaires) : même rythme, teinte du club. */
.rd-drawer-accent .rd-dl-label{color:#A5EB78}
.rd-drawer-foot{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.rd-drawer-foot a{
  display:block;text-align:center;text-decoration:none;padding:15px;
  font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase
}
.rd-drawer-foot .rd-df-outline{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.rd-drawer-foot .rd-df-green{background:#A5EB78;color:#060B3C;padding:16px}
/* Le bouton d'install hérite de .rd-install-drawer (masqué si non installable) */
.rd-drawer-foot .rd-install-drawer{margin-top:4px}

/* ============================================================
   Animation d'ouverture du menu plein écran
   ============================================================ */
@keyframes rd-drawer-in{from{opacity:0}to{opacity:1}}
@keyframes rd-drawer-item-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.rd-mobile-menu.rd-drawer.open{animation:rd-drawer-in .26s ease both}
.rd-mobile-menu.rd-drawer.open .rd-drawer-head{animation:rd-drawer-item-in .34s ease both}
.rd-mobile-menu.rd-drawer.open .rd-drawer-links > *,
.rd-mobile-menu.rd-drawer.open .rd-drawer-foot{animation:rd-drawer-item-in .42s ease both}
.rd-drawer.open .rd-drawer-links > *:nth-child(1){animation-delay:.04s}
.rd-drawer.open .rd-drawer-links > *:nth-child(2){animation-delay:.08s}
.rd-drawer.open .rd-drawer-links > *:nth-child(3){animation-delay:.12s}
.rd-drawer.open .rd-drawer-links > *:nth-child(4){animation-delay:.16s}
.rd-drawer.open .rd-drawer-links > *:nth-child(5){animation-delay:.20s}
.rd-drawer.open .rd-drawer-links > *:nth-child(6){animation-delay:.24s}
.rd-drawer.open .rd-drawer-links > *:nth-child(7){animation-delay:.28s}
.rd-drawer.open .rd-drawer-links > *:nth-child(8){animation-delay:.32s}
.rd-drawer.open .rd-drawer-links > *:nth-child(9){animation-delay:.36s}
.rd-mobile-menu.rd-drawer.open .rd-drawer-foot{animation-delay:.40s}

/* Sous-menu « La structure » dans le drawer */
.rd-drawer-parent{
  width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.1);
  cursor:pointer;font-family:inherit;text-align:left
}
.rd-drawer-parent .rd-dl-caret{
  margin-left:auto;align-self:center;color:#A5EB78;font-size:16px;transition:transform .3s ease
}
.rd-drawer-group.open .rd-drawer-parent .rd-dl-caret{transform:rotate(180deg)}
.rd-drawer-sub{max-height:0;overflow:hidden;transition:max-height .34s ease}
.rd-drawer-group.open .rd-drawer-sub{max-height:280px}
.rd-drawer-sublink{
  display:block;padding:13px 0 13px 42px;text-decoration:none;
  font-family:'Open Sans',sans-serif;font-size:17px;font-weight:600;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.07)
}
.rd-drawer-sublink:active{color:#A5EB78}

/* Lightbox (zoom photo) — [data-zoom] */
@keyframes rd-lb-in{from{opacity:0}to{opacity:1}}
.rd-lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(3,5,28,.97);
  display:none;align-items:center;justify-content:center;padding:22px
}
.rd-lightbox.open{display:flex;animation:rd-lb-in .2s ease both}
.rd-lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.rd-lb-close{
  position:fixed;top:16px;right:16px;width:46px;height:46px;
  background:rgba(255,255,255,.14);border:none;color:#fff;font-size:20px;line-height:1;
  cursor:pointer;font-family:inherit;z-index:2
}

/* ============================================================
   Nav PC reconstruite par js/rd-mobile.js (identique au menu
   mobile, avec le menu déroulant « La structure »).
   ============================================================ */
nav .rd-dsk{gap:16px}
.rd-dsk-link,.rd-dsk-drop-btn{
  color:rgba(255,255,255,.85);text-decoration:none;font-weight:800;font-size:15px;
  background:none;border:none;font-family:inherit;cursor:pointer;white-space:nowrap
}
.rd-dsk-link:hover,.rd-dsk-drop:hover .rd-dsk-drop-btn{color:#A5EB78}
.rd-dsk-drop{position:relative;display:inline-flex;align-items:center}
.rd-dsk-drop-btn{display:inline-flex;align-items:center;gap:5px}
.rd-dsk-drop-btn .rd-dsk-caret{font-size:10px;transition:transform .2s ease}
.rd-dsk-drop:hover .rd-dsk-drop-btn .rd-dsk-caret{transform:rotate(180deg)}
.rd-dsk-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:16px;display:none;flex-direction:column;min-width:186px;z-index:200
}
.rd-dsk-drop:hover .rd-dsk-menu,.rd-dsk-drop:focus-within .rd-dsk-menu{display:flex}
.rd-dsk-menu-inner{
  background:rgba(6,11,60,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(165,235,120,.2);display:flex;flex-direction:column;padding:8px;
  box-shadow:0 18px 44px rgba(6,11,60,.5)
}
.rd-dsk-menu-inner a{
  color:rgba(255,255,255,.85);text-decoration:none;padding:12px 18px;font-size:15px;
  font-weight:700;white-space:nowrap;transition:background .15s,color .15s
}
.rd-dsk-menu-inner a:hover{background:rgba(165,235,120,.12);color:#A5EB78}
.rd-dsk-cta{
  color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.35);
  padding:10px 16px;font-weight:700;font-size:13.5px;white-space:nowrap;transition:border-color .15s,color .15s
}
.rd-dsk-cta:hover{border-color:#A5EB78;color:#A5EB78}
.rd-dsk-cta-green{
  background:#A5EB78;color:#060B3C;text-decoration:none;padding:11px 17px;font-weight:800;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;transform:skewX(-8deg);
  display:inline-block;white-space:nowrap;transition:background .15s
}
.rd-dsk-cta-green>span{display:inline-block;transform:skewX(8deg)}
.rd-dsk-cta-green:hover{background:#7ed957}

/* Boutons « Voir sur YouTube / BadNet » sous les cartes équipes */
.rd-watch{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#060B3C;color:#fff;text-decoration:none;
  padding:14px 18px;font-weight:800;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;border-top:1px solid rgba(255,255,255,.1);
  transition:background .2s ease,color .2s ease
}
.rd-watch:hover{background:#0A1988;color:#A5EB78}
.rd-watch svg{flex:0 0 auto}
.rd-watch img{height:18px;width:auto;display:block;flex:0 0 auto}
.rd-watch-inline{
  display:inline-flex;border-top:none;margin-top:18px;padding:13px 24px;
  border:1.5px solid rgba(10,25,136,.28);background:#060B3C
}
.rd-watch-inline:hover{background:#0A1988;border-color:#A5EB78}
@media (prefers-reduced-motion: reduce){
  .rd-mobile-menu.rd-drawer.open,
  .rd-mobile-menu.rd-drawer.open *{animation:none !important}
}

/* ============================================================
   Carrousels & mise en page mobile (≤ 920px)
   .rd-carousel : grille → défilement horizontal avec accroche
   .rd-stack    : grille multi-colonnes → une seule colonne
   .rd-compact  : réduit les paddings d'une section dense
   ============================================================ */
.rd-dots{display:none}
@media (max-width:920px){
  /* Colonne unique (corrige les grilles minmax trop larges) */
  .rd-stack{grid-template-columns:1fr !important}

  /* Carrousel horizontal à accroche.
     Accroche en début de carte, pas au centre : le centrage laissait une
     tranche de la carte précédente traîner sur le bord gauche — l'effet
     « carte coupée » signalé sur téléphone. Avec un scroll-padding égal à
     l'écart entre cartes, la précédente sort exactement du cadre et la
     suivante dépasse à droite, seule invitation au geste qu'on garde. */
  .rd-carousel{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px !important;
    scroll-padding-left:14px;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .rd-carousel::-webkit-scrollbar{display:none}
  .rd-carousel > *{
    flex:0 0 84% !important;
    scroll-snap-align:start;
    min-width:0;
  }
  .rd-carousel.rd-carousel-sm > *{flex-basis:64% !important}
  /* Cale de fin : sans elle, la dernière carte ne peut pas atteindre son
     point d'accroche — le défilement bute avant, et une tranche de la
     carte précédente reste plaquée au bord gauche (constaté sur les
     tarifs fitness). La cale ouvre juste l'espace qui manque : la
     dernière carte s'aligne comme les autres, le bord gauche est net. */
  .rd-carousel::after{content:'';flex:0 0 16%}
  .rd-carousel.rd-carousel-sm::after{flex-basis:36%}

  /* Partenaires : logos deux par deux, le troisième dépasse pour
     annoncer la suite. La cale générique est inutile ici — des logos
     partiellement visibles aux bords sont l'aspect normal d'un bandeau
     de logos, pas une carte de texte coupée. */
  .rd-carousel.rd-carousel-duo > *{flex:0 0 44% !important;display:flex;align-items:center;justify-content:center}
  .rd-carousel.rd-carousel-duo{align-items:center;min-height:106px}
  /* Cale de la duo : dimensionnée pour que la DERNIÈRE PAIRE puisse
     s'accrocher (12% - l'écart) — caler le dernier logo seul laisserait
     un grand vide à sa droite. Sans cale du tout, l'accroche obligatoire
     rebondissait avant la fin : les derniers logos étaient inatteignables
     au repos. */
  .rd-carousel.rd-carousel-duo::after{flex-basis:calc(12% - 14px)}
  .rd-carousel.rd-carousel-duo img{max-width:96%}

  /* Points indicateurs (générés par js/rd-mobile.js) */
  .rd-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
  /* Un carrousel masqué (bascule Jeunes/Adultes des tarifs) emporte ses
     points : sans cette règle, les deux rangées s'affichaient l'une sous
     l'autre alors qu'une seule grille est visible. */
  .rd-carousel[hidden] + .rd-dots{display:none}
  .rd-dots button{
    width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:rgba(6,11,60,.25);transition:width .2s,background .2s
  }
  .rd-dots button.on{width:20px;border-radius:4px;background:#0A1988}

  /* Section dense : recrutement des officiels */
  .rd-compact{margin-top:44px !important}
  .rd-compact > :first-child{padding:30px 22px !important}
  .rd-compact > :last-child > *{padding:15px 22px !important}

  /* Le club : la photo/étiquette ne doit pas déborder */
  #club .rd-club-media{margin-top:34px}
  /* Sur un écran étroit, la photo n'a pas de marge à sacrifier : le badge
     se fait encore plus petit que sur PC. */
  #club .rd-club-badge{left:0 !important;bottom:-12px !important;padding:9px 13px !important}
  #club .rd-club-badge > div > div:first-child{font-size:16px !important}
  #club .rd-club-badge > div > div:last-child{font-size:8px !important}
}

/* ============================================================
   Bouton « Se licencier » de la barre de navigation
   ------------------------------------------------------------
   Petit sautillement pour attirer l'œil sur l'appel à l'action.
   Le bouton porte déjà transform:skewX(-8deg) en style en ligne :
   une animation qui ne toucherait qu'à translateY écraserait cette
   valeur et redresserait le bouton. Chaque étape reprend donc le
   biais explicitement.

   Le mouvement se concentre sur la fin du cycle (deux petits bonds
   puis une pause) : sur une barre fixe, visible en permanence, une
   animation continue deviendrait vite fatigante.
   ============================================================ */
@keyframes rd-cta-hop{
  0%, 55%, 100% { transform:skewX(-8deg) translateY(0) }
  66%           { transform:skewX(-8deg) translateY(-6px) }
  76%           { transform:skewX(-8deg) translateY(0) }
  86%           { transform:skewX(-8deg) translateY(-3px) }
  94%           { transform:skewX(-8deg) translateY(0) }
}
.rd-cta-hop{ animation:rd-cta-hop 2.6s ease-in-out infinite }
/* Au survol, on rend la main : le bouton ne doit pas fuir le curseur. */
.rd-cta-hop:hover{ animation-play-state:paused }
@media (prefers-reduced-motion: reduce){
  .rd-cta-hop{ animation:none }
}

/* Entre 1024 et 1200 px, la barre PC est affichée mais l'espace est compté :
   les libellés agrandis ne tiennent plus sur une ligne. On resserre les
   écarts et les boutons dans cette plage seulement, plutôt que de laisser
   la nav déborder ou de rapetisser le texte partout.
   Le !important est nécessaire : les styles de la nav sont en ligne. */
@media (min-width:1024px) and (max-width:1320px){
  nav#nav > div{ padding:0 18px !important }
  nav#nav .rd-dsk{ gap:11px !important; font-size:13.5px !important }
  nav#nav .rd-dsk > a{ white-space:nowrap }
  nav#nav .rd-dsk > a[href="#fitness"]{ padding:7px 10px !important; font-size:12px !important }
  nav#nav .rd-dsk > a[href="reservations.html"]{ padding:9px 12px !important; font-size:12.5px !important }
  nav#nav .rd-cta-hop{ padding:10px 13px !important; font-size:12.5px !important }
  /* Le nom du club ne doit pas se couper en deux lignes. */
  nav#nav > div > a:first-child span{ white-space:nowrap; font-size:18px !important }
  nav#nav > div > a:first-child span span{ font-size:10px !important }
}

/* ============================================================
   Compactage mobile — la page faisait 21,8 écrans de haut
   ------------------------------------------------------------
   Mesuré sur iPhone (390×844) : #equipes et #rejoindre pesaient
   4 écrans chacun, l'essentiel en marges pensées pour un écran
   large et en cartes empilées qui gagnent à défiler en carrousel.

   Les !important sont imposés par le style du projet : tout le
   balisage est stylé en ligne, et rd.css corrige par-dessus (même
   procédé que .rd-stack plus haut). Les sélecteurs [style*=…]
   ciblent des motifs précis du balisage en ligne — si l'un d'eux
   change dans index.html, la règle cesse simplement de s'appliquer,
   sans rien casser.
   ============================================================ */
@media (max-width:640px){
  /* --- Respiration verticale : 110px de marge n'ont de sens que
         sur grand écran. On garde une vraie séparation, plus courte. */
  #actus,#equipes,#horaires,#faq{padding-top:60px !important;padding-bottom:44px !important}
  section > div[style*="max-width:1320px"]{padding-top:60px !important;padding-bottom:44px !important}
  [data-reveal][style*="margin-bottom:56px"]{margin-bottom:30px !important}
  [data-reveal][style*="margin-bottom:44px"]{margin-bottom:26px !important}
  #club > div[style*="gap:64px"]{gap:36px !important}
  .rd-stack{gap:26px !important}

  /* Carte actu « à la une » : la version PC est un rang (affiche à
     gauche à son ratio, texte à droite) ; en colonne unique on rempile,
     et l'affiche prend toute la largeur en gardant son ratio — le cadre
     reste l'image, jamais un fond autour. */
  #documents[data-reveal]{margin-top:40px !important}

  /* --- Étapes 01·02·03 de « Rejoindre » : le numéro passe en
         colonne à côté du texte au lieu d'empiler trois pavés. */
  #rejoindre div[style*="padding:34px 28px"]{
    display:grid;grid-template-columns:auto 1fr;column-gap:14px;
    align-items:start;padding:16px 18px !important
  }
  #rejoindre div[style*="padding:34px 28px"] > div[style*="font-size:56px"]{
    font-size:28px !important;grid-row:1 / span 2;margin-top:3px
  }
  #rejoindre div[style*="padding:34px 28px"] h3{margin:0 0 4px !important;font-size:17px !important}
  #rejoindre div[style*="padding:34px 28px"] p{grid-column:2;font-size:13px !important}

  /* --- Lignes de documents (inscription + fitness) : plus denses,
         l'information reste entière. */
  #documents-cards > a, #fitness .rd-stack > a{padding:10px 13px !important;gap:12px !important}
  #documents-cards > a > span:first-child, #fitness .rd-stack > a > span:first-child{
    padding:7px 8px !important;font-size:10px !important
  }

  /* --- Tous les carrousels s'étendent d'un bord à l'autre de l'écran
         (ils annulent les 28px de marge que toutes les sections
         partagent). Fini la gouttière où une tranche de la carte
         voisine flottait entre le contenu et le bord : la carte active
         s'aligne sous le titre de la section (le point d'accroche
         reprend les 28px), la suivante touche le bord de l'écran. */
  .rd-carousel{
    margin-left:-28px;margin-right:-28px;
    padding-left:28px;
    scroll-padding-left:28px !important
  }
  /* Les équipes principales, en plus, élargissent leurs cartes : la
     photo d'équipe est le contenu vitrine. */
  #equipes-grandes > *{flex-basis:90% !important}

  /* --- Cartes d'équipes : sur une carte de 84 % d'écran, le titre à
         34px et ses 30px de marge recouvraient la moitié de la photo.
         L'échelle suit la carte, la photo redevient le sujet. */
  #equipes-grandes [data-zoom] > div[style*="padding:30px"]{padding:14px 16px !important}
  #equipes-grandes [data-zoom] div[style*="font-size:clamp(34px"]{font-size:23px !important;margin:4px 0 5px !important}
  #equipes-grandes [data-zoom] div[style*="letter-spacing:.18em"]{font-size:10px !important;letter-spacing:.14em !important}
  #equipes-grandes [data-zoom] div[style*="font-size:13.5px"]{font-size:11.5px !important}
  #equipes-petites-bloc span[style*="font-size:62px"]{font-size:40px !important}
  #equipes-petites-bloc div[style*="font-size:24px"]{font-size:19px !important}

  /* --- Poules : mêmes informations, carte moitié moins haute. */
  #poules-mount div[style*="padding:22px 20px 18px"]{padding:14px 16px 11px !important}
  #poules-mount div[style*="font-size:26px"]{font-size:20px !important}
  #poules-mount div[style*="padding:13px 16px"]{padding:8px 13px !important;gap:11px !important}
  #poules-mount span[style*="font-size:18px"]{font-size:14px !important;width:20px !important}
  #poules-mount span[style*="font-size:14.5px"]{font-size:13px !important}

  /* --- Journées : dix lignes tenaient sur trois écrans, elles tiennent
         maintenant sur un et demi — rien n'est retiré, tout est resserré. */
  #journees-mount > div{padding:6px 10px !important;gap:9px !important;margin-bottom:6px !important}
  #journees-mount div[style*="font-size:17px"]{font-size:14px !important}
  #journees-mount div[style*="font-size:9.5px"]{font-size:8.5px !important}
  #journees-mount div[style*="font-size:13px"]{font-size:12px !important}
  #journees-mount span[style*="font-size:9px"]{font-size:8px !important;padding:3px 6px !important}

  /* --- Effectif Top 12 : deux rangées titrées Filles puis Garçons
         (choix éditorial), cartes et titres resserrés pour que
         l'empilement coûte le moins possible. */
  #top12-effectif .rd-scroll > a{flex:0 0 176px !important}
  #top12-effectif .rd-scroll > a > div:first-child{height:196px !important}
  #top12-effectif .rd-scroll > a > div:last-child{padding:11px 12px 13px !important}
  #top12-effectif .rd-scroll{padding-bottom:8px !important}
  #top12-effectif .rd-t12-bloc{margin:12px 0 0 !important;gap:10px !important}
  /* La marge basse du bandeau vertical suit le padding-bottom du défileur
     (8px ici) pour finir au ras des cartes. */
  #top12-effectif .rd-t12-vlabel{font-size:11px !important;letter-spacing:.16em !important;padding:12px 5px !important;margin-bottom:8px !important}

  /* --- Ce qui n'a de sens que sur grand écran : redites portées par un
         élément voisin (énumération de la salle → tuiles, mention FFHM du
         fitness → cartes de tarif). */
  .rd-mob-off{display:none}

  /* --- Planning du fitness : sept lignes plus denses. */
  #fitness div[style*="flex-direction:column;gap:8px"]{gap:4px !important}
  #fitness div[style*="font-size:13.5px"]{font-size:12.5px !important}
  #fitness div[style*="font-size:13.5px"] span[style*="width:90px"]{width:78px !important}
  #fitness p[style*="margin:0 0 26px"]{margin:0 0 16px !important}

  /* --- Tuiles de la salle : les chiffres restent l'accroche, sans
         occuper un écran — 44px de chiffre et 26px de marge par tuile
         se justifiaient à côté d'une photo, pas en pleine largeur. */
  #salle div[style*="padding:26px 24px"]{padding:13px 14px !important}
  #salle div[style*="font-size:44px"]{font-size:27px !important}
  #salle div[style*="letter-spacing:.14em"]{font-size:10px !important;margin-top:4px !important}
  #salle p[style*="margin:0 0 40px"]{margin:0 0 22px !important}
  #salle h2{margin:0 0 16px !important}

  /* --- Bloc « Recrutement · Bénévolat » (817px sur mobile) : les trois
         cartes Arbitres / Juges de ligne / Juges-arbitres répètent mot pour
         mot ce que le paragraphe annonce déjà en gras juste au-dessus. Sur
         un écran étroit, cette redite coûte un demi-écran ; le texte et le
         bouton « Je veux me former » portent tout le message. */
  #equipes .rd-compact > div:last-child{display:none !important}
  #equipes .rd-compact > div:first-child{padding:26px 22px !important}
  #equipes .rd-compact{margin-top:40px !important}

  /* --- Pied de page : les trois colonnes de liens passent à deux
         colonnes côte à côte, le bloc marque garde toute la largeur. */
  footer > div:first-child{
    padding-top:44px !important;gap:26px 20px !important;
    grid-template-columns:1fr 1fr !important
  }
  footer > div:first-child > div:first-child{grid-column:1 / -1}
}

/* Les grilles de tarifs deviennent des carrousels sur mobile
   (classe rd-carousel posée dans index.html). display:flex !important
   écraserait aussi le display:none de la catégorie masquée : l'attribut
   hidden, posé par tarifs-load.js, reprend la main. */
.rd-carousel[hidden]{display:none !important}