/* ======================================================================
   Site public Le Break'Hub — site vitrine du club : barre de navigation en haut
   (transparente sur l'image d'accueil, pleine au défilement), menu déroulant
   « Le club », menu plein écran sur téléphone/tablette. Identité de l'application
   (noirs chauds, or, rouge, arrondis 12/16 px) sans en reprendre la mise en page.
   Chargé APRÈS style.css (jetons, formulaires).
   ====================================================================== */

:root {
  --gutter: clamp(16px, 4vw, 40px);
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --menu-courbe: var(--courbe);
  --entete-hauteur: 76px;
  --largeur-max: 1200px;
}

body.site {
  display: block;
  padding: 0;
}

/* Un bloc masqué (contenu non renseigné) reste masqué même si sa classe fixe un display. */
[hidden] {
  display: none !important;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--gold-bright);
  color: #0b0a08;
  font-weight: 700;
  text-decoration: none;
}

.lien-evitement:focus {
  left: 8px;
}

/* ---- Barre de navigation ---- */
.entete-site {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--entete-hauteur);
  background: rgba(10, 9, 8, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-gold);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 350ms var(--courbe);
}

/* Accueil : transparente sur la grande image tant qu'on n'a pas défilé. */
body.vue-accueil .entete-site:not(.entete-site--pleine) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.entete-site--pleine {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.entete-site--cachee {
  transform: translateY(-100%);
}

.entete-site__barre {
  height: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.entete-site__logo {
  flex-shrink: 0;
}

.entete-site__logo img {
  display: block;
  height: 46px;
  width: auto;
  transition: transform 200ms var(--courbe);
}

.entete-site__logo:hover img {
  transform: scale(1.04);
}

.nav {
  flex: 1;
}

.nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav__lien,
button.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: #e8e2d6;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}

.nav__lien::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--red-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--courbe);
}

.nav__lien:hover,
.nav__deroulant--ouvert .nav__lien {
  color: #ffffff;
}

.nav__lien[aria-current="page"],
.nav__lien[data-actif] {
  color: var(--gold-bright);
}

.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after,
.nav__lien[data-actif]::after {
  transform: scaleX(1);
}

button.nav__lien:not(:disabled):hover {
  transform: none;
  box-shadow: none;
}

.nav__bouton svg {
  width: 18px;
  height: 18px;
  transition: transform 220ms var(--courbe);
}

.nav__deroulant {
  position: relative;
}

.nav__deroulant--ouvert .nav__bouton svg {
  transform: rotate(180deg);
}

.sous-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 330px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(16, 14, 11, 0.97);
  border: 1px solid var(--border-gold);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 220ms var(--courbe), visibility 0s linear 220ms;
}

/* Pont invisible entre le bouton et le panneau : le survol ne se perd pas dans l'espace. */
.sous-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav__deroulant--ouvert .sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 180ms ease, transform 220ms var(--courbe);
}

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

.sous-menu__lien {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.sous-menu__lien:hover,
.sous-menu__lien[aria-current="page"] {
  background: rgba(212, 167, 44, 0.1);
}

.sous-menu__icone {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(212, 167, 44, 0.12);
  color: var(--gold-bright);
  transition: background-color 150ms ease, color 150ms ease;
}

.sous-menu__lien:hover .sous-menu__icone {
  background: var(--gradient-or);
  color: #0b0a08;
}

.sous-menu__icone svg {
  width: 22px;
  height: 22px;
}

.sous-menu__lien strong {
  display: block;
  font-size: 0.95rem;
}

.sous-menu__lien small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.entete-site__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.icone-bouton,
button.icone-bouton {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: var(--gold-bright);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.icone-bouton:hover,
.icone-bouton[aria-current="page"] {
  background: rgba(212, 167, 44, 0.14);
  border-color: var(--border-gold-strong);
}

button.icone-bouton:not(:disabled):hover {
  transform: none;
  box-shadow: none;
}

.icone-bouton svg {
  width: 22px;
  height: 22px;
}

.pastille {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red-bright);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.pastille[hidden] {
  display: none;
}

.entete-site__compte {
  padding: 10px 16px;
}

.entete-site__compte svg {
  width: 18px;
  height: 18px;
}

.entete-site__burger,
button.entete-site__burger {
  display: none;
}

.burger {
  position: relative;
  width: 20px;
  height: 14px;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 250ms var(--courbe), transform 250ms var(--courbe), opacity 150ms ease;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }

.menu-mobile-ouvert .burger span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.menu-mobile-ouvert .burger span:nth-child(2) {
  opacity: 0;
}

.menu-mobile-ouvert .burger span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.menu-mobile {
  display: none;
}

/* ---- Contenu principal ---- */
.principal {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--entete-hauteur);
}

body.vue-accueil .principal {
  padding-top: 0;
}

.principal > main {
  flex: 1;
}

.page {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px var(--gutter) 24px;
}

.entete-page {
  margin-bottom: 24px;
}

.entete-page__surtitre {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.titre-page,
.titre-section {
  position: relative;
  margin: 0;
  padding-bottom: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.titre-page {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.1;
}

.titre-section {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
}

.titre-page::after,
.titre-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--red-bright));
}

.entete-page__texte {
  max-width: 680px;
  margin: 14px 0 0;
  color: #d6d0c4;
  line-height: 1.6;
}

.section {
  margin-top: 48px;
}

.section__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.lien-fleche {
  color: var(--gold-bright);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.lien-fleche:hover {
  text-decoration: underline;
}

.texte-riche {
  white-space: pre-line;
  line-height: 1.65;
  color: #e3ddd1;
}

/* ---- Cartes ---- */
.carte-site {
  border-radius: 16px;
  background: var(--gradient-surface);
  border: 1px solid var(--border-gold);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.carte-site:hover {
  border-color: rgba(242, 201, 76, 0.4);
}

.apparition {
  opacity: 0;
  transform: translateY(8px);
  animation: apparition 500ms var(--menu-courbe) forwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes apparition {
  to { opacity: 1; transform: none; }
}

/* ---- Boutons-liens ---- */
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bouton-lien svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.bouton-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.45);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.bouton-lien:hover {
  background: rgba(212, 167, 44, 0.1);
  border-color: var(--border-gold-strong);
}

.bouton-lien--or {
  background: var(--gradient-or);
  border-color: transparent;
  color: #0b0a08;
  box-shadow: 0 4px 16px rgba(212, 167, 44, 0.22);
}

.bouton-lien--or:hover {
  background: var(--gradient-or);
  box-shadow: 0 6px 22px rgba(212, 167, 44, 0.35);
  transform: translateY(-1px);
}

.grille-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.bloc {
  padding: 22px;
}

.bloc h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.infos-pratiques dt {
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(212, 167, 44, 0.85);
}

.infos-pratiques dt:first-child {
  margin-top: 0;
}

.infos-pratiques dd {
  margin: 4px 0 0;
  white-space: pre-line;
  color: #e3ddd1;
}

/* ---- Produits ---- */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.carte-produit {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.carte-produit:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.carte-produit__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #efece6;
  overflow: hidden;
}

.carte-produit__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--menu-courbe);
}

.carte-produit:hover .carte-produit__photo img {
  transform: scale(1.04);
}

.sans-image {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background: radial-gradient(circle at 30% 20%, rgba(212, 167, 44, 0.22), transparent 60%), #16130f;
  color: rgba(242, 201, 76, 0.75);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sans-image svg {
  width: 34px;
  height: 34px;
}

.pastille-categorie {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(12, 10, 8, 0.82);
  border: 1px solid rgba(212, 167, 44, 0.35);
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 700;
}

.carte-produit__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 14px 16px 16px;
}

.carte-produit__nom {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.carte-produit__options {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.carte-produit__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.prix {
  white-space: nowrap;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.dispo {
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.dispo--oui { background: rgba(29, 185, 84, 0.14); color: #b9f6ca; }
.dispo--non { background: rgba(226, 33, 52, 0.14); color: #ffd9dc; }

/* ---- Boutique : catégories et filtres ---- */
.onglets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.onglet,
.puce {
  width: auto;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 167, 44, 0.3);
  background: transparent;
  color: #d6d0c4;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: none;
}

.onglet:not(:disabled):hover,
.puce:not(:disabled):hover {
  background: rgba(212, 167, 44, 0.1);
  transform: none;
  box-shadow: none;
}

.onglet[aria-selected="true"],
.puce[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(212, 167, 44, 0.25) 0%, rgba(179, 18, 27, 0.18) 100%);
  border-color: var(--border-gold-strong);
  color: #ffffff;
}

.barre-filtres {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 14px;
}

.barre-filtres input[type="search"] {
  flex: 1 1 200px;
  width: auto;
}

.barre-filtres select {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.22);
  background: #17140f;
  color: var(--text);
  font: inherit;
}

.case {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #d6d0c4;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.case input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.resultats {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---- Fiche produit ---- */
.fiche {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.fiche__photo {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #efece6;
}

.fiche__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fiche__nom {
  margin: 8px 0 10px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fiche__prix {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.fiche__description {
  margin: 18px 0;
}

.groupe-options {
  margin: 18px 0 8px;
  border: 0;
  padding: 0;
}

.groupe-options legend {
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212, 167, 44, 0.85);
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option {
  width: auto;
  min-width: 52px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.35);
  background: transparent;
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
}

.option:not(:disabled):hover {
  background: rgba(212, 167, 44, 0.1);
  transform: none;
  box-shadow: none;
}

.option[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(212, 167, 44, 0.3) 0%, rgba(179, 18, 27, 0.2) 100%);
  border-color: var(--gold-bright);
}

/* Taille / option épuisée : barrée en diagonale, toujours visible (le client sait qu'elle existe). */
.option:disabled,
button.espace-taille:disabled {
  opacity: 0.6;
  color: var(--text-muted);
  text-decoration: none;
  border-style: dashed;
  cursor: not-allowed;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(226, 33, 52, 0.9) calc(50% - 1px),
    rgba(226, 33, 52, 0.9) calc(50% + 1px), transparent calc(50% + 1px));
}

.note-tailles {
  width: 100%;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.quantite {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(212, 167, 44, 0.35);
  border-radius: 12px;
  overflow: hidden;
}

.quantite button {
  width: 42px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gold-bright);
  font-size: 1.2rem;
  box-shadow: none;
}

.quantite button:not(:disabled):hover {
  background: rgba(212, 167, 44, 0.1);
  transform: none;
  box-shadow: none;
}

.quantite output {
  min-width: 36px;
  text-align: center;
  font-weight: 700;
}

.fiche__achat {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.fiche__achat button.principal-action {
  width: auto;
  flex: 1 1 200px;
  margin: 0;
}

.fil-ariane {
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.fil-ariane a {
  color: #d6d0c4;
  text-decoration: none;
}

.fil-ariane a:hover {
  color: var(--gold-bright);
}

/* ---- Panier ---- */
.panier {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ligne-panier {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
}

.ligne-panier + .ligne-panier {
  margin-top: 10px;
}

.ligne-panier__photo {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: #efece6;
}

.ligne-panier__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ligne-panier__nom {
  margin: 0 0 4px;
  font-weight: 700;
}

.ligne-panier__outils {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.lien-retirer {
  width: auto;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: transparent;
  color: #ffb3bb;
  font-size: 0.8rem;
  box-shadow: none;
}

.lien-retirer:not(:disabled):hover {
  background: rgba(226, 33, 52, 0.12);
  transform: none;
  box-shadow: none;
}

.recap {
  padding: 22px;
  position: sticky;
  top: 20px;
}

.recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-gold);
  font-weight: 800;
  font-size: 1.2rem;
}

.recap__total span:last-child {
  color: var(--gold-bright);
}

.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Compétitions ---- */
.mois {
  margin: 32px 0 12px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 167, 44, 0.9);
}

.publication {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.publication + .publication {
  margin-top: 14px;
}

.publication--image {
  grid-template-columns: 220px minmax(0, 1fr);
}

.publication__image {
  background: #16130f;
}

.publication__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publication__corps {
  padding: 18px 20px;
}

.publication__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.type-pub {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.type-pub--ACTUALITE { background: rgba(242, 201, 76, 0.16); color: var(--gold-bright); }
.type-pub--RESULTAT { background: rgba(29, 185, 84, 0.14); color: #b9f6ca; }
.type-pub--CLASSEMENT { background: rgba(120, 160, 255, 0.14); color: #cddcff; }
.type-pub--ANNONCE { background: rgba(226, 33, 52, 0.16); color: #ffd9dc; }

.publication__titre {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

/* ---- Événements ---- */
.carte-evenement {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  overflow: hidden;
}

.carte-evenement + .carte-evenement {
  margin-top: 14px;
}

.date-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(212, 167, 44, 0.22), rgba(179, 18, 27, 0.18));
  border-right: 1px solid var(--border-gold);
  text-align: center;
}

.date-bloc__jour {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.date-bloc__mois {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.date-bloc__annee {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.carte-evenement__corps {
  padding: 16px 20px;
}

.carte-evenement__image {
  margin: -16px -20px 14px;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #16130f;
}

.carte-evenement__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carte-evenement__titre {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.meta-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  color: #d6d0c4;
  font-size: 0.86rem;
}

.meta-ligne span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meta-ligne svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

.carte-evenement__pied {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.carte-evenement__pied button {
  width: auto;
  margin: 0;
  padding: 10px 18px;
}

.note-places {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ---- Partenaires (liste) ---- */
.grille-partenaires {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.carte-partenaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  text-align: center;
}

.carte-partenaire__logo {
  width: 100%;
  height: 90px;
  display: grid;
  place-items: center;
}

.carte-partenaire__logo img {
  /* Hauteur fixe en px : un pourcentage n'est pas appliqué dans une case de grille sans hauteur définie,
     et un logo haut (carré, vertical) débordait sur le nom du partenaire. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.carte-partenaire__initiale {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(212, 167, 44, 0.3), transparent 70%), #16130f;
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  font-size: 1.6rem;
  font-weight: 800;
}

.carte-partenaire__nom {
  margin: 0;
  font-size: 1rem;
}

.lien-discret {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ---- Fenêtre (inscription) ---- */
dialog.fenetre {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  background: var(--gradient-surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

dialog.fenetre::backdrop {
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.fenetre__corps {
  padding: 22px 24px 24px;
}

.fenetre__corps h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.fenetre__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.fenetre__actions button,
.formulaire-site .fenetre__actions button[type="submit"] {
  flex: 1;
  margin: 0;
}

/* ---- Notification (ajout au panier...) ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #17140f;
  border: 1px solid rgba(212, 167, 44, 0.3);
  border-left: 4px solid var(--gold-bright);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.9rem;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms var(--menu-courbe);
}

.toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast a {
  color: var(--gold-bright);
  font-weight: 700;
}

/* ---- Pied de page ---- */
.pied {
  margin-top: 88px;
  border-top: 1px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(12, 10, 8, 0.7), rgba(6, 5, 4, 0.97));
  color: #9d9687;
  font-size: 0.9rem;
}

.pied__haut {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 52px var(--gutter) 36px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) 1.5fr;
  gap: 32px;
}

.pied__marque img {
  display: block;
  height: 58px;
  width: auto;
}

.pied__slogan {
  max-width: 300px;
  margin: 14px 0 0;
  color: #d6d0c4;
  line-height: 1.55;
}

.pied__reseaux {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.pied__titre {
  margin: 4px 0 16px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.pied__colonne ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pied a {
  color: #d1cabd;
  text-decoration: none;
  transition: color 150ms ease;
}

.pied a:hover {
  color: var(--gold-bright);
}

.pied__contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
  white-space: pre-line;
  color: #d1cabd;
}

.pied__contact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--gold);
}

.pied__bas {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(212, 167, 44, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}

.pied__remonter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pied__remonter svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.vide-etat {
  padding: 40px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-gold);
  background: rgba(23, 20, 15, 0.6);
  text-align: center;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Partenaires : bandeau pleine largeur de la colonne de contenu */
.page .partenaires {
  width: 100%;
  margin: 0;
}

.page .section.partenaires {
  margin-top: 48px;
}

/* Formulaires en pleine page (adhésion, commande) */
.formulaire-site label:first-child {
  margin-top: 0;
}

.formulaire-site button[type="submit"] {
  margin-top: 22px;
}

/* ======================================================================
   Responsive
   - Navigation « mobile » (barre en haut + panneau coulissant) : téléphones et tablettes
     (< 1024 px) et téléphones tenus à l'horizontale (hauteur < 500 px) — un menu latéral
     fixe y mangerait la place du contenu.
   - Mise en page « téléphone » (< 768 px) : grilles à 2 colonnes, onglets qui défilent au
     doigt, boutons pleine largeur, barre d'achat qui reste visible.
   - Ordinateur 1024–1279 px : menu replié en icônes par défaut (voir site.js).
   ====================================================================== */
@media (max-width: 1023.98px) {
  .fiche,
  .panier {
    grid-template-columns: minmax(0, 1fr);
  }

  .recap {
    position: static;
  }
}

@media (max-width: 1023.98px), (max-height: 499.98px) {
  :root {
    --entete-hauteur: 64px;
  }

  .nav,
  .entete-site__compte {
    display: none;
  }

  .entete-site__barre {
    gap: 12px;
  }

  .entete-site__logo img {
    height: 38px;
  }

  .entete-site__burger,
  button.entete-site__burger {
    display: grid;
  }

  body.menu-mobile-ouvert .entete-site,
  body.vue-accueil.menu-mobile-ouvert .entete-site:not(.entete-site--pleine) {
    background: rgba(9, 8, 7, 0.98);
    border-bottom-color: var(--border-gold);
  }

  .menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: calc(var(--entete-hauteur) + 8px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(179, 18, 27, 0.22), transparent 60%),
      radial-gradient(100% 50% at 0% 100%, rgba(212, 167, 44, 0.16), transparent 60%),
      rgba(9, 8, 7, 0.985);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 250ms ease, transform 300ms var(--courbe), visibility 0s linear 300ms;
  }

  .menu-mobile-ouvert .menu-mobile {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 250ms ease, transform 300ms var(--courbe);
  }

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

  .menu-mobile__groupe {
    margin: 22px 0 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(212, 167, 44, 0.85);
  }

  .menu-mobile__lien {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(212, 167, 44, 0.1);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
  }

  .menu-mobile__lien svg {
    width: 24px;
    height: 24px;
    color: var(--gold);
  }

  .menu-mobile__lien[aria-current="page"] {
    color: var(--gold-bright);
  }

  .menu-mobile__compte {
    margin-top: 28px;
    padding: 15px;
    font-size: 1rem;
  }

  .menu-mobile__compte svg {
    width: 20px;
    height: 20px;
  }

  /* Liens qui apparaissent l'un après l'autre à l'ouverture. */
  .menu-mobile__liste > li,
  .menu-mobile__compte {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 250ms ease, transform 350ms var(--courbe);
  }

  .menu-mobile-ouvert .menu-mobile__liste > li,
  .menu-mobile-ouvert .menu-mobile__compte {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 35ms + 60ms);
  }

  .pied__haut {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pied__marque,
  .pied__colonne[data-pied-contact] {
    grid-column: 1 / -1;
  }

  .page {
    padding-top: 24px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --gutter: 16px;
  }

  .page {
    padding-top: 20px;
  }

  .section {
    margin-top: 36px;
  }

  .page .section.partenaires {
    margin-top: 36px;
  }

  /* Onglets et filtres : une seule ligne qui défile au doigt, jusqu'au bord de l'écran. */
  .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter)) 14px;
    padding: 2px var(--gutter) 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .onglets::-webkit-scrollbar {
    display: none;
  }

  .onglet,
  .puce {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
  }

  .barre-filtres {
    padding: 12px;
  }

  .barre-filtres input[type="search"],
  .barre-filtres select {
    flex: 1 1 100%;
  }

  .grille-produits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .carte-produit__corps {
    padding: 12px;
    gap: 6px;
  }

  .carte-produit__nom {
    font-size: 0.92rem;
  }

  .carte-produit__options {
    display: none;
  }

  .carte-produit__bas {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .prix {
    font-size: 1rem;
  }

  .pastille-categorie {
    left: 8px;
    top: 8px;
    font-size: 0.68rem;
  }

  /* Fiche produit : la barre quantité + « Ajouter au panier » reste visible en bas de l'écran. */
  .fiche {
    gap: 18px;
  }

  .fiche__achat {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px calc(-1 * var(--gutter)) 0;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 10, 8, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-gold);
    flex-wrap: nowrap;
  }

  .fiche__achat button.principal-action {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 10px;
  }

  .hero-accueil .actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin: 30px auto 0;
  }

  .bouton-lien {
    min-height: 46px;
  }

  .publication--image {
    grid-template-columns: minmax(0, 1fr);
  }

  .publication__image {
    aspect-ratio: 16 / 8;
  }

  .carte-evenement {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .date-bloc__jour {
    font-size: 1.6rem;
  }

  .carte-evenement__corps {
    padding: 14px;
  }

  .carte-evenement__image {
    margin: -14px -14px 12px;
  }

  .carte-evenement__pied button {
    flex: 1 1 100%;
  }

  .ligne-panier {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .ligne-panier__photo {
    width: 60px;
    height: 60px;
  }

  .ligne-panier > .prix {
    grid-column: 2;
  }

  .bloc,
  .recap {
    padding: 18px;
  }

  .grille-partenaires {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .carte-partenaire {
    padding: 16px 12px;
  }

  .carte-partenaire .bouton-lien {
    padding: 10px 12px;
    white-space: normal;
    text-align: center;
  }

  /* Notification : pleine largeur, au-dessus de la barre d'achat et de la zone système. */
  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    max-width: none;
    transform: translateY(20px);
  }

  .toast--visible {
    transform: translateY(0);
  }

  .pied {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .grille-produits,
  .grille-partenaires {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apparition {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .entete-site,
  .sous-menu,
  .menu-mobile,
  .menu-mobile__liste > li,
  .menu-mobile__compte,
  .carte-produit__photo img,
  .toast {
    transition: none !important;
  }
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.liste-avantages {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.liste-avantages li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
}

.liste-avantages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--red-bright));
}

/* Connexion / espace adhérent dans la mise en page du site */
.page-centree {
  display: flex;
  justify-content: center;
  padding-top: clamp(32px, 8vh, 80px);
}

body.site .entete-espace {
  position: static;
  max-width: 640px;
  margin: 24px auto 0;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
}

.prix-a-venir {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(242, 201, 76, 0.6);
  background: rgba(242, 201, 76, 0.1);
  color: var(--gold-bright);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ======================================================================
   Accueil — grande image de marque, tables en direct, sections du club.
   Une section dont le contenu n'est pas renseigné est masquée (jamais de
   texte inventé ni d'encadré « à compléter » visible par les visiteurs).
   ====================================================================== */
body.vue-accueil::before {
  filter: none;
  background: var(--bg);
}

body.vue-accueil::after {
  display: none;
}

.hero-accueil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(100vh, 940px);
  min-height: min(100svh, 940px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--entete-hauteur) + 24px) var(--gutter) 104px;
  text-align: center;
}

.hero-accueil__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0b0a08 url("fond-breakhub.jpg") center / cover no-repeat;
  transform: scale(1.08);
  animation: zoom-hero 16s var(--courbe) forwards;
}

.hero-accueil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 50% at 50% 46%, rgba(0, 0, 0, 0.6), transparent 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 28%, transparent 62%, var(--bg) 100%);
}

.hero-accueil__logo {
  display: block;
  width: min(540px, 84vw);
  height: auto;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.65));
  animation: entree 900ms var(--courbe) both;
}

.hero-accueil__slogan {
  max-width: 660px;
  margin: 20px auto 0;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  line-height: 1.5;
  color: #f3eee4;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
  animation: entree 900ms 120ms var(--courbe) both;
}

.hero-accueil .actions {
  justify-content: center;
  margin-top: 32px;
  animation: entree 900ms 220ms var(--courbe) both;
}

.hero-accueil .bouton-lien {
  padding: 14px 26px;
  font-size: 1rem;
}

.bouton-lien--verre {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.35);
}

.statut-direct {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(29, 185, 84, 0.4);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #e9fbe9;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  animation: entree 900ms 320ms var(--courbe) both;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.statut-direct:hover {
  border-color: rgba(29, 185, 84, 0.75);
  background: rgba(0, 0, 0, 0.65);
}

.statut-direct--complet {
  border-color: rgba(226, 33, 52, 0.45);
  color: #ffe3e6;
}

.statut-direct[hidden] {
  display: none;
}

.point-direct {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--felt);
  animation: pulsation 2s infinite;
}

.statut-direct--complet .point-direct {
  background: var(--red-bright);
  animation-name: pulsation-rouge;
}

.hero-accueil__defiler {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  animation: rebond 2.4s ease-in-out infinite;
}

.hero-accueil__defiler svg {
  width: 30px;
  height: 30px;
}

@keyframes zoom-hero {
  to { transform: scale(1); }
}

@keyframes entree {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulsation {
  0% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(29, 185, 84, 0); }
}

@keyframes pulsation-rouge {
  0% { box-shadow: 0 0 0 0 rgba(226, 33, 52, 0.6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(226, 33, 52, 0); }
}

@keyframes rebond {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---- Sections ---- */
.accueil-sections {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.bloc-accueil {
  margin-top: clamp(64px, 9vw, 112px);
  scroll-margin-top: calc(var(--entete-hauteur) + 16px);
}

.bloc-accueil:first-child {
  margin-top: 8px;
}

.bloc-accueil[hidden] {
  display: none;
}

.surtitre {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.bloc-accueil__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.bloc-accueil__titre {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.bloc-accueil__intro {
  max-width: 620px;
  margin: 12px 0 0;
  color: #d6d0c4;
  line-height: 1.6;
}

/* ---- En direct : tables libres / occupées ---- */
.direct {
  padding: clamp(20px, 3vw, 32px);
}

.direct__resume {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chiffre {
  min-width: 140px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(212, 167, 44, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.chiffre strong {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
}

.chiffre span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.chiffre--libre strong {
  color: #6fe39a;
}

.chiffre--occupee strong {
  color: #ff7a87;
}

.plan-tables {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
}

.table-direct {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(29, 185, 84, 0.35);
  background: linear-gradient(160deg, rgba(29, 185, 84, 0.16), rgba(29, 185, 84, 0.03));
  transition: border-color 300ms ease, background-color 300ms ease;
}

.table-direct--occupee {
  border-color: rgba(226, 33, 52, 0.35);
  background: linear-gradient(160deg, rgba(226, 33, 52, 0.16), rgba(226, 33, 52, 0.03));
}

.table-direct svg {
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.55);
}

.table-direct__nom {
  display: block;
  margin-top: 6px;
  font-weight: 700;
}

.table-direct__statut {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6fe39a;
}

.table-direct--occupee .table-direct__statut {
  color: #ff7a87;
}

.table-direct__statut::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.direct__maj {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ---- Le club ---- */
.club {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.club--sans-texte {
  grid-template-columns: minmax(0, 1fr);
}

.club__texte {
  padding: clamp(22px, 3vw, 36px);
}

.club__chiffres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-content: start;
}

.chiffre-club {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chiffre-club svg {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  color: var(--gold-bright);
}

.chiffre-club strong {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.chiffre-club span {
  color: var(--text-muted);
}

/* ---- Bandeau adhésion ---- */
.bandeau-adhesion {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 24px;
  border: 1px solid var(--border-gold-strong);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(179, 18, 27, 0.38), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(212, 167, 44, 0.24), transparent 60%),
    #120f0b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.bandeau-adhesion .actions {
  justify-content: flex-end;
}

.bandeau-adhesion .bouton-lien {
  padding: 14px 24px;
  font-size: 1rem;
}

/* ---- Nous trouver ---- */
.infos-club {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.info-club {
  display: flex;
  gap: 16px;
  padding: 22px;
}

.info-club__icone {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(212, 167, 44, 0.12);
  color: var(--gold-bright);
}

.info-club__icone svg {
  width: 24px;
  height: 24px;
}

.info-club h3 {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 167, 44, 0.9);
}

.info-club p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.5;
  color: #ece6da;
}

.info-club .lien-fleche {
  display: inline-block;
  margin-top: 8px;
}

/* ---- Apparition au défilement ---- */
.reveler {
  opacity: 0;
  transform: translateY(48px) scale(0.96);
  transition: opacity 900ms ease, transform 1000ms var(--courbe);
  /* Cartes voisines : en cascade (au plus 6 crans). */
  transition-delay: calc(var(--rang-revelation, 0) * 120ms);
}

.reveler.revele {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .club,
  .bandeau-adhesion {
    grid-template-columns: minmax(0, 1fr);
  }

  .bandeau-adhesion .actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .hero-accueil {
    padding-bottom: 96px;
  }

  /* Portrait : on décale l'image pour garder le loup visible derrière le logo. */
  .hero-accueil__fond {
    background-position: 16% center;
  }

  .hero-accueil::after {
    background:
      radial-gradient(80% 45% at 50% 42%, rgba(0, 0, 0, 0.55), transparent 80%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 25%, transparent 60%, var(--bg) 100%);
  }

  .club__chiffres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .chiffre-club {
    padding: 16px 12px;
  }

  .chiffre-club strong {
    font-size: 1.8rem;
  }

  .chiffre-club span {
    font-size: 0.85rem;
  }

  .hero-accueil .bouton-lien {
    width: 100%;
  }

  .chiffre {
    flex: 1 1 130px;
    min-width: 0;
  }

  .plan-tables {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
  }

  .table-direct {
    padding: 10px;
  }

  .table-direct svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-accueil__fond,
  .hero-accueil__logo,
  .hero-accueil__slogan,
  .hero-accueil .actions,
  .statut-direct,
  .point-direct,
  .hero-accueil__defiler {
    animation: none;
    transform: none;
  }

  .hero-accueil__defiler {
    transform: translateX(-50%);
  }

  .reveler {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================================================
   Compétitions (source : CueScore) — tournois, podiums, classement.
   ====================================================================== */
.bloc-competitions {
  margin-top: 40px;
}

.bloc-competitions:first-of-type {
  margin-top: 8px;
}

.bloc-competitions[hidden] {
  display: none;
}

.grille-tournois {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.tournoi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.tournoi__entete {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tournoi__titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.tournoi__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.tournoi__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tournoi__meta svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.discipline {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(242, 201, 76, 0.4);
  background: rgba(242, 201, 76, 0.1);
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-direct {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(226, 33, 52, 0.16);
  color: #ff8a95;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-direct::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-bright);
  animation: pulsation-rouge 2s infinite;
}

.podium {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(212, 167, 44, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.podium li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.podium a {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium a:hover {
  color: var(--gold-bright);
}

.podium li:first-child {
  font-weight: 700;
}

.medaille {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0b0a08;
  background: linear-gradient(135deg, #cd8b52, #8a5a2b);
}

.medaille--1 {
  background: var(--gradient-or);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.2);
}

.medaille--2 {
  background: linear-gradient(135deg, #f1f1f1, #9ea3a8);
}

.avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid rgba(212, 167, 44, 0.25);
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  font-size: 0.8rem;
  font-weight: 800;
}

.tournoi__lien {
  margin-top: auto;
  font-size: 0.86rem;
}

/* Classement */
.classement {
  overflow: hidden;
}

.classement table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.classement th {
  padding: 14px 18px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(212, 167, 44, 0.9);
  border-bottom: 1px solid var(--border-gold);
}

.classement td {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(212, 167, 44, 0.08);
}

.classement tr:last-child td {
  border-bottom: 0;
}

.classement tbody tr {
  transition: background-color 150ms ease;
}

.classement tbody tr:hover {
  background: rgba(212, 167, 44, 0.05);
}

.classement .nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.classement td.nombre strong {
  color: var(--gold-bright);
}

.classement a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.classement a:hover {
  color: var(--gold-bright);
}

.rang {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 800;
  color: var(--text-muted);
}

.rang.medaille {
  color: #0b0a08;
}

.source-cuescore {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.source-cuescore a {
  color: var(--gold-bright);
}

/* Accueil : bloc compétitions */
.accueil-competitions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .accueil-competitions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .classement th,
  .classement td {
    padding: 11px 10px;
  }

  .classement .col-tournois {
    display: none;
  }

  .grille-tournois {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-direct::before {
    animation: none;
  }
}

.annonce__image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

.annonce__extrait {
  margin: 0;
  color: #d6d0c4;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ======================================================================
   Espace adhérent — coach, maillots, commandes, tables, parties.
   ====================================================================== */
.fond-modale:not([hidden]) {
  display: flex;
}

.fond-modale {
  z-index: 70;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modale {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.espace-entete {
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(179, 18, 27, 0.28), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(212, 167, 44, 0.18), transparent 60%),
    var(--gradient-surface);
}

.espace-entete__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

button.espace-deconnexion {
  width: auto;
  margin: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
}

.espace-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.espace-chiffre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(212, 167, 44, 0.16);
  background: rgba(0, 0, 0, 0.25);
}

.espace-chiffre__valeur {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.espace-chiffre--or .espace-chiffre__valeur {
  color: var(--gold-bright);
}

.espace-chiffre__libelle {
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* Crédit à régler : tuile en rouge et lien vers « Mes crédits » quand il reste quelque chose à payer. */
a.espace-chiffre {
  color: inherit;
  text-decoration: none;
}

.espace-chiffre--alerte {
  border-color: rgba(226, 33, 52, 0.45);
  background: rgba(226, 33, 52, 0.1);
  transition: border-color 0.2s ease;
}

.espace-chiffre--alerte:hover,
.espace-chiffre--alerte:focus-visible {
  border-color: var(--red-bright);
}

.espace-chiffre--alerte .espace-chiffre__valeur {
  color: #ff8a95;
}

.espace-credits__total {
  margin: 14px 0 0;
  text-align: right;
  font-size: 1.02rem;
}

.espace-credits__total strong {
  color: #ff8a95;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.espace-raccourcis {
  margin: 18px 0 0;
}

.espace-raccourcis .puce {
  text-decoration: none;
}

.espace-section {
  margin-top: 44px;
  scroll-margin-top: calc(var(--entete-hauteur) + 16px);
}

.espace-intro {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Coachs */
.espace-coachs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.espace-coach {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.espace-coach__identite {
  display: flex;
  align-items: center;
  gap: 14px;
}

.espace-coach h3 {
  margin: 0;
  font-size: 1.05rem;
}

.espace-coach__identite p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.avatar--grand {
  width: 52px;
  height: 52px;
  font-size: 1.05rem;
  background: linear-gradient(135deg, rgba(212, 167, 44, 0.3), rgba(179, 18, 27, 0.3));
}

.espace-coach .bouton-lien {
  align-self: flex-start;
}

.espace-coach__form label {
  margin-top: 0;
}

/* Maillots */
.espace-maillots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.espace-maillot {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.espace-maillot__photo {
  aspect-ratio: 4 / 3;
  background: #f1efe9;
}

.espace-maillot__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.espace-maillot__photo .sans-image {
  height: 100%;
}

.espace-maillot__corps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.espace-maillot h3 {
  margin: 0;
  font-size: 1.1rem;
}

.espace-maillot .prix {
  margin: 0;
  font-size: 1.25rem;
}

.espace-tailles {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.espace-tailles legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

button.espace-taille {
  width: auto;
  min-width: 46px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(212, 167, 44, 0.35);
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
}

button.espace-taille[aria-pressed="true"] {
  background: var(--gradient-or);
  border-color: transparent;
  color: #0b0a08;
}

button.espace-taille:not(:disabled):hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gold-bright);
}

.espace-maillot__achat {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.espace-maillot__achat button.principal-action {
  flex: 1;
  margin: 0;
}

.espace-maillot__etat {
  margin: 0;
  min-height: 1.2em;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.espace-recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.espace-recap__ligne strong {
  color: var(--gold-bright);
  white-space: nowrap;
}

/* Mes commandes */
.espace-commandes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.espace-commande {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.espace-commande--annulee {
  opacity: 0.6;
}

.espace-commande__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.espace-commande h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.espace-commande__entete p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.espace-commande__lignes {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #e3ddd1;
  font-size: 0.92rem;
}

.espace-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.espace-etapes li {
  padding-top: 10px;
  border-top: 3px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

.espace-etapes li.faite {
  border-top-color: var(--gold);
  color: #e3ddd1;
}

.espace-etapes li.courante {
  border-top-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* Tables */
.espace-bandeau {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-gold);
  background: rgba(212, 167, 44, 0.08);
  line-height: 1.5;
}

.espace-bandeau.succes {
  border-color: rgba(29, 185, 84, 0.4);
  background: rgba(29, 185, 84, 0.1);
}

.espace-bandeau.erreur {
  border-color: rgba(226, 33, 52, 0.4);
  background: rgba(226, 33, 52, 0.1);
}

.espace-table__score {
  display: block;
  margin-top: 4px;
  color: #ffd1d6;
  font-size: 0.75rem;
}

button.espace-table__reserver {
  width: 100%;
  margin: 10px 0 0;
  padding: 8px;
  border-radius: 10px;
  font-size: 0.82rem;
}

/* Réservation pour plus tard : prochain créneau sur la table, détail au survol (ou dans la fenêtre au toucher). */
.plan-tables .table-direct {
  position: relative;
  cursor: pointer;
}

.plan-tables .table-direct:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.table-direct__prochain {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--gold-bright);
  font-size: 0.74rem;
  font-weight: 700;
}

.table-direct__prochain svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: currentColor;
}

.table-direct__creneaux {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-gold);
  background: #15120e;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  font-size: 0.82rem;
}

.table-direct__creneaux ul,
.creneaux-table ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.table-direct__creneaux li,
.creneaux-table li {
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}

.table-direct__creneaux li.a-moi,
.creneaux-table li.a-moi {
  color: var(--gold-bright);
  font-weight: 700;
}

@media (hover: hover) {
  .table-direct:hover .table-direct__creneaux,
  .table-direct:focus-within .table-direct__creneaux {
    display: block;
  }
}

.creneaux-table {
  margin: 4px 0 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 167, 44, 0.16);
  font-size: 0.86rem;
}

.creneaux-table__titre {
  margin: 0;
  color: var(--text-muted);
}

.choix-quand {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choix-lieu__option input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}

.champs-plus-tard {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.resume-plus-tard {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.resume-plus-tard strong {
  color: var(--gold-bright);
}

button.espace-bandeau__action {
  display: inline-flex;
  width: auto;
  margin: 10px 0 0;
  padding: 8px 16px;
  font-size: 0.86rem;
}

@media (max-width: 560px) {
  .champs-plus-tard {
    grid-template-columns: 1fr 1fr;
  }

  .champs-plus-tard > div:first-child {
    grid-column: 1 / -1;
  }
}

/* Mes parties */
.espace-parties {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.espace-partie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-left: 3px solid transparent;
}

.espace-partie--victoire {
  border-left-color: var(--felt);
}

.espace-partie--defaite {
  border-left-color: var(--red-bright);
}

.espace-partie h3 {
  margin: 0;
  font-size: 1rem;
}

.espace-partie__details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.espace-partie__details span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.espace-partie__details svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.espace-partie__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.espace-partie__score strong {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.espace-issue {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.espace-issue--victoire {
  background: rgba(29, 185, 84, 0.16);
  color: #7ee2a0;
}

.espace-issue--defaite {
  background: rgba(226, 33, 52, 0.16);
  color: #ff8a95;
}

button.espace-plus {
  display: flex;
  width: auto;
  margin: 16px auto 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
}

@media (max-width: 860px) {
  .espace-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  /* En-tête compact : « Trouver un coach » reste visible dès l'ouverture sur téléphone. */
  .espace-entete {
    padding: 18px 16px;
  }

  .espace-entete .titre-page {
    font-size: 1.6rem;
  }

  button.espace-deconnexion {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .espace-chiffres {
    gap: 8px;
    margin-top: 16px;
  }

  .espace-chiffre {
    padding: 10px 12px;
  }

  .espace-chiffre__valeur {
    font-size: 1.3rem;
  }

  .espace-chiffre__libelle {
    font-size: 0.76rem;
  }

  .espace-section {
    margin-top: 32px;
  }

  .espace-partie {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .espace-partie__score {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .espace-coach .bouton-lien {
    align-self: stretch;
  }

  .espace-maillots,
  .espace-commandes,
  .espace-coachs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Choix du lieu de retrait (panier et espace adhérent) */
.choix-lieu {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.choix-lieu legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

label.choix-lieu__option {
  position: relative;
  margin: 0;
}

.choix-lieu__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choix-lieu__option span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.3);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.choix-lieu__option span svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.choix-lieu__option span:hover {
  border-color: var(--border-gold-strong);
}

.choix-lieu__option input:checked + span {
  border-color: var(--gold-bright);
  background: rgba(212, 167, 44, 0.12);
  box-shadow: inset 0 0 0 1px var(--gold-bright);
}

.choix-lieu__option input:focus-visible + span {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.espace-commande__lieu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-bright);
  font-size: 0.88rem;
  font-weight: 700;
}

.espace-commande__lieu svg {
  width: 16px;
  height: 16px;
}

/* ---- Coaching : créneaux, demandes, espace coach ---- */
.puce--or {
  border-color: var(--gold-bright) !important;
  color: var(--gold-bright) !important;
}

.puce--alerte {
  border-color: rgba(255, 138, 149, 0.6) !important;
  color: #ff8a95 !important;
}

.espace-sous-titre {
  margin: 26px 0 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.creneaux {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creneaux legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

button.creneau-puce {
  width: auto;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(29, 185, 84, 0.45);
  background: rgba(29, 185, 84, 0.08);
  box-shadow: none;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 0.82rem;
  font-weight: 600;
}

button.creneau-puce span {
  color: #9fe8b9;
}

button.creneau-puce:not(:disabled):hover {
  transform: none;
  box-shadow: none;
  border-color: #6fe39a;
}

button.creneau-puce[aria-pressed="true"] {
  background: var(--gradient-or);
  border-color: transparent;
  color: #0b0a08;
}

button.creneau-puce[aria-pressed="true"] span {
  color: #3a2a05;
}

.espace-coach__vide {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.espace-coach__choix {
  margin: 0 0 4px;
  color: var(--gold-bright);
  font-weight: 700;
}

.espace-demandes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.espace-demande {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}

.espace-demande--nouvelle {
  border-color: var(--border-gold-strong);
  box-shadow: 0 0 0 1px rgba(242, 201, 76, 0.25), 0 8px 28px rgba(0, 0, 0, 0.38);
}

.espace-demande__haut {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.espace-demande h4 {
  margin: 0;
  font-size: 1rem;
}

.espace-demande__haut p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.espace-demande__message {
  margin: 0;
  color: #e3ddd1;
  font-style: italic;
}

.espace-statut {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.espace-statut--attente {
  background: rgba(242, 201, 76, 0.14);
  color: var(--gold-bright);
}

.espace-statut--ok {
  background: rgba(29, 185, 84, 0.16);
  color: #7ee2a0;
}

.espace-statut--non {
  background: rgba(226, 33, 52, 0.16);
  color: #ff8a95;
}

.espace-statut--or {
  background: var(--gradient-or);
  color: #0b0a08;
}

.dispo-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
}

.dispo-form label {
  margin-top: 0;
}

.dispo-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
}

.dispo-form button[type="submit"] {
  width: auto;
  margin: 0;
  white-space: nowrap;
}

.dispo-form .message {
  grid-column: 1 / -1;
  margin: 0;
}

.dispo-liste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dispo-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-gold);
  background: rgba(23, 20, 15, 0.6);
}

.dispo-ligne__quand {
  flex: 1;
  min-width: 200px;
}

button.dispo-supprimer {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(226, 33, 52, 0.45);
  background: transparent;
  box-shadow: none;
  color: #ff8a95;
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .dispo-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dispo-form button[type="submit"] {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ---- Réclamations ---- */
.formulaire-reclamation {
  max-width: 680px;
}

select.champ-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 167, 44, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
}

select.champ-select option {
  background: #17140f;
}

.espace-reponse-club {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(29, 185, 84, 0.3);
  background: rgba(29, 185, 84, 0.08);
  white-space: pre-line;
  line-height: 1.5;
}

/* ---- Charte du club ---- */
.charte {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-gold);
}

.charte__titre {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.charte__texte {
  max-height: 260px;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-gold);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.92rem;
}

label.charte__accepte {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.charte__accepte input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--gold);
}

.charte__consigne {
  margin: 14px 0 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.charte__cadre {
  position: relative;
}

.charte__cadre canvas {
  display: block;
  width: 100%;
  height: 170px;
  border-radius: 12px;
  border: 2px dashed rgba(212, 167, 44, 0.6);
  background: #ffffff;
  cursor: crosshair;
}

button.charte__effacer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: auto;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.75);
  box-shadow: none;
  color: #ffffff;
  font-size: 0.78rem;
}

.modale--large {
  max-width: 720px;
}

.fond-modale--charte {
  z-index: 80;
  background: rgba(0, 0, 0, 0.82);
}

.charte__rubrique {
  margin: 14px 0 4px;
  color: var(--gold-bright);
  font-size: 0.92rem;
  font-weight: 800;
}

.charte__rubrique:first-child {
  margin-top: 0;
  color: #ffffff;
  font-size: 1rem;
}

.charte__texte p {
  margin: 0 0 6px;
  line-height: 1.55;
  color: #e3ddd1;
}

/* ---- Mes matchs filmés (24 h) et direct YouTube ---- */
.espace-video__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

button.espace-video__bouton {
  width: auto;
  min-width: 128px;
  margin: 0;
  padding: 8px 16px;
  font-size: 0.86rem;
}

.espace-video__reste {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.espace-video__jauge {
  display: block;
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.espace-video__jauge span {
  display: block;
  height: 100%;
  background: var(--gradient-or);
  transition: width 400ms ease;
}

.modale--video {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
}

.modale--video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  margin-top: 12px;
  border-radius: 12px;
  background: #000;
}

.modale--video .actions-modale a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  flex: 1;
}

.aide-champ {
  margin: 6px 0 14px;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.aide-champ a {
  color: var(--gold-bright);
  word-break: break-all;
}

label.case-a-cocher {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-weight: 600;
  cursor: pointer;
}

label.case-a-cocher input {
  width: auto;
  margin: 3px 0 0;
}

.en-direct {
  color: #ff5a67;
  animation: clignote-direct 1.6s ease-in-out infinite;
}

@keyframes clignote-direct {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .en-direct { animation: none; }
}

button#boutonDirect {
  width: auto;
  margin: 0;
  flex: none;
  align-self: flex-start;
  white-space: nowrap;
}

#boutonDirect[hidden] {
  display: none;
}

.espace-bandeau a {
  color: var(--gold-bright);
  font-weight: 700;
  word-break: break-all;
}

@media (max-width: 560px) {
  .espace-video .espace-video__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
}


.anti-robot { margin-top: 14px; display: flex; justify-content: center; }
.anti-robot:empty { display: none; }

/* ---- Quantité au-delà du stock disponible (fiche produit, panier) ---- */
.alerte-quantite {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(226, 33, 52, 0.45);
  background: rgba(179, 18, 27, 0.14);
  color: #ffb4b9;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- Galerie « Le club en images » (accueil) ---- */
/* Mosaïque en colonnes : chaque photo garde ses proportions (en hauteur ou en largeur), sans trou. */
.galerie-filtres {
  margin-bottom: 16px;
}

.galerie-club {
  columns: 3 260px;
  column-gap: 12px;
}

.galerie-club__photo {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  background: #0b0a08;
  cursor: zoom-in;
}

.galerie-club__photo[hidden] {
  display: none;
}

.galerie-club__photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.92);
  transition: transform 700ms var(--courbe), filter 700ms ease;
}

.galerie-club__photo:hover img,
.galerie-club__photo:focus-visible img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

@media (max-width: 600px) {
  .galerie-club {
    columns: 2;
    column-gap: 8px;
  }

  .galerie-club__photo {
    margin-bottom: 8px;
    border-radius: 12px;
  }
}

.visionneuse {
  width: min(1100px, 96vw);
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  background: #0b0a08;
  color: #ffffff;
}

.visionneuse::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.visionneuse figure {
  margin: 0;
}

.visionneuse img {
  display: block;
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
}

.visionneuse figcaption {
  padding: 10px 16px 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.visionneuse__fermer,
.visionneuse__nav {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.visionneuse__fermer {
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
}

.visionneuse__nav {
  top: 45%;
  width: 46px;
  height: 46px;
}

.visionneuse__nav--prec {
  left: 10px;
}

.visionneuse__nav--suiv {
  right: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .galerie-club__photo img {
    transition: none;
  }
}

/* ---- Langues (FR · EN · ع), voir i18n.js ---- */
html.i18n-chargement body {
  opacity: 0;
}

.langues {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
}

.langues__choix {
  margin: 0;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.langues__choix[aria-pressed="true"] {
  background: var(--gradient-or, #d4a72c);
  color: #1a1408;
}

.langues__choix:hover:not([aria-pressed="true"]) {
  color: #ffffff;
}

.menu-mobile__langues {
  margin-top: 16px;
  align-self: center;
}

@media (max-width: 1023.98px), (max-height: 499.98px) {
  .entete-site__langues {
    display: none;
  }
}

/* ---- Arabe (droite à gauche) ---- */
/* Lien d'évitement caché à droite : en arabe, un élément sorti à gauche rendrait la page défilable. */
[dir="rtl"] .lien-evitement {
  left: auto;
  right: -9999px;
}

[dir="rtl"] .lien-evitement:focus {
  right: 8px;
}

/* Bandeau défilant des partenaires : sens de défilement inchangé (ordre des logos sans importance). */
[dir="rtl"] .partenaires__piste {
  direction: ltr;
}

/* Champ piège anti-robots, caché à droite en arabe (même raison que le lien d'évitement). */
[dir="rtl"] .piege {
  left: auto;
  right: -9999px;
}

/* ---- Page Confidentialité et mentions légales ---- */
.page-legale .bloc {
  margin-bottom: 16px;
}

.texte-legal ul {
  margin: 8px 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 6px;
}

.texte-legal p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.pied__legal {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.pied__legal:hover {
  color: #ffffff;
}

.texte-legal a {
  color: var(--gold-bright);
}