/* ==========================================================================
   css/accueil.css — Page d'accueil publique (index.php)
   --------------------------------------------------------------------------
   Chargée UNIQUEMENT par index.php, juste après l'en-tête.
   Préfixe de toutes les classes : .acc-  (aucun risque de collision avec
   style_public.css / style_commun.css).

   RÈGLE D'OR : aucune couleur en dur. Tout passe par les variables du thème
   du club (--gold, --bg-card, --border, --green, --steel...). Les teintes
   translucides sont obtenues avec color-mix(), à partir de ces variables.

   Organisation :
     0. Variables locales et conteneurs
     1. Typographie commune (sur-titres, titres en casse normale, liens)
     2. Bandeau personnel du membre
     3. Bloc « Le jour J : Mon tournoi »
     4. Grande carte « Prochain tournoi »
     5. Rangée « Ensuite » (tournois suivants)
     6. État vide illustré
     7. Carte « À la une »
     8. Tournois des partenaires (encadrés existants, retouchés)
     9. Actualités
    10. Le club (logo, citation, chiffres)
    11. Devenez membre
    12. Animations (et respect de prefers-reduced-motion)
   ========================================================================== */

/* ── 0. VARIABLES LOCALES ET CONTENEURS ─────────────────────────────────── */
.accueil {
  /* Arrondi de base de l'accueil : suit le réglage « arrondi » du thème */
  --acc-r: calc(var(--radius, 8px) * 1.5);
  --acc-r-petit: var(--radius, 8px);
  /* Marge latérale : 16px sur mobile, plus large ensuite */
  --acc-gouttiere: 16px;
  /* Espace réservé sous le contenu sur mobile pour la barre d'onglets fixe
     (ajoutée dans l'en-tête / le pied de page). Si cette barre définit
     --barre-onglets-h, on la suit ; sinon 72px. */
  --acc-espace-bas: 16px;   /* la place de la barre d'onglets mobile est déjà réservée sur <body> (--barre-mobile-h, includes/navigation.php) */
  display: block;
  overflow-x: clip;              /* jamais de défilement horizontal */
}
@media (min-width: 768px) {
  .accueil { --acc-gouttiere: 2rem; }
}
@media (max-width: 768px) {
  .accueil { padding-bottom: var(--acc-espace-bas); }
}

.acc-conteneur {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--acc-gouttiere);
}
.acc-section { padding-block: 2.5rem; }
@media (min-width: 768px) {
  .acc-section { padding-block: 4rem; }
}
/* Les grilles et leurs enfants peuvent rétrécir (évite tout débordement) */
.accueil * { min-width: 0; }
.acc-centre { display: flex; justify-content: center; margin-top: 2rem; }

/* Icônes SVG (trait, couleur héritée) */
.acc-ico { flex-shrink: 0; width: 1.1em; height: 1.1em; vertical-align: -0.15em; }

/* ── 1. TYPOGRAPHIE COMMUNE ─────────────────────────────────────────────── */
.acc-surtitre {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--gold);
  margin-bottom: .35rem;
}
.acc-titre {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
  margin: 0;
}
.acc-titre-petit {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.acc-section-tete { margin-bottom: 1.75rem; text-align: center; }
.acc-section-tete-ligne {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}
.acc-lien {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}
.acc-lien:hover { color: var(--gold-light, var(--gold)); }
.acc-lien:hover .acc-ico { transform: translateX(2px); }
.acc-lien .acc-ico { transition: transform .2s ease; }

/* Boutons de l'accueil : mêmes boutons que le site (.btn-primary / .btn-secondary)
   mais en casse normale, plus grands et confortables au pouce. */
.accueil .acc-btn {
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.4rem;
  font-size: .95rem;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: var(--acc-r-petit);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.accueil .acc-btn-inscrit {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 55%, transparent);
  color: var(--green);
}
.accueil .acc-btn-inscrit:hover { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.accueil .acc-btn-inactif { opacity: .6; cursor: default; pointer-events: none; }
.accueil :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── 2. BANDEAU PERSONNEL DU MEMBRE ─────────────────────────────────────── */
.acc-conteneur-perso { padding-top: 16px; }
.acc-perso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .75rem 1rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--acc-r);
}
.acc-perso-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  margin: 0;
  font-size: .95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.acc-perso-bonjour strong { color: var(--text-primary); font-weight: 700; }
.acc-perso-info {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-secondary);
  text-decoration: none;
}
a.acc-perso-info:hover { color: var(--gold); }
.acc-perso-info .acc-ico { color: var(--gold); }
.acc-perso-sep { color: var(--text-muted); }
/* Sur mobile, chaque information passe à la ligne : les « · » deviennent inutiles */
@media (max-width: 639px) {
  .acc-perso-ligne { flex-direction: column; align-items: flex-start; }
  .acc-perso-sep { display: none; }
}
.acc-perso-lien { white-space: nowrap; }

/* ── 3. LE JOUR J : MON TOURNOI ─────────────────────────────────────────── */
.acc-jourj {
  display: grid;
  gap: 1.1rem;
  margin-top: 16px;
  padding: 1.25rem;
  border-radius: var(--acc-r);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background:
    radial-gradient(120% 140% at var(--acc-grad-pos, 0% 0%), color-mix(in srgb, var(--acc-grad-couleur, var(--gold)) var(--acc-grad-force, 20%), transparent) 0%, transparent 60%),
    var(--bg-card);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--gold) 12%, transparent);
}
.acc-jourj-titre {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 .3rem;
}
.acc-jourj-sous { margin: 0; color: var(--text-secondary); font-size: .95rem; }
.acc-jourj-siege { display: flex; gap: .75rem; }
.acc-jourj-siege > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem .5rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-bright);
  border-radius: var(--acc-r-petit);
}
.acc-jourj-num {
  font-family: var(--font-num);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.acc-jourj-lbl { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.acc-jourj-attente {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9rem;
  color: var(--text-muted);
}
.acc-jourj-boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.acc-jourj-boutons .acc-btn { flex: 1 1 130px; padding-inline: 1rem; }
@media (min-width: 900px) {
  .acc-jourj {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
  }
  .acc-jourj-siege > div { min-width: 96px; }
  .acc-jourj-boutons { flex-direction: column; min-width: 200px; }
  .acc-jourj-boutons .acc-btn { flex: none; }
}

/* ── 4. GRANDE CARTE « PROCHAIN TOURNOI » ───────────────────────────────── */
.acc-haut { padding-top: 16px; padding-bottom: 0; }
@media (min-width: 768px) { .acc-haut { padding-top: 2rem; } }
.acc-haut-grille { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .acc-haut-avec-une .acc-haut-grille { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.acc-pt {
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem;
  border-radius: var(--acc-r);
  border: 1px solid var(--border-bright);
  background:
    /* Lueur colorée réglable dans Apparence (couleur, intensité, position) ; d'origine : accent, 14 %, en haut à droite */
    radial-gradient(140% 120% at var(--acc-grad-pos, 100% 0%), color-mix(in srgb, var(--acc-grad-couleur, var(--gold)) var(--acc-grad-force, 14%), transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-card2), var(--bg-card));
  box-shadow: 0 18px 50px color-mix(in srgb, var(--bg-deep) 70%, transparent);
  overflow: hidden;
}
/* Liseré d'accent en haut de la carte */
.acc-pt::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dim, var(--gold)), var(--gold), var(--gold-dim, var(--gold)));
}
@media (min-width: 900px) {
  .acc-pt {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    grid-template-areas: "tete tete" "corps action" "tournois tournois";
    gap: 1.25rem 2.25rem;
    padding: 1.75rem 2rem 2rem;
  }
  .acc-pt-tete   { grid-area: tete; }
  .acc-pt-corps  { grid-area: corps; }
  .acc-pt-action { grid-area: action; }
  .acc-pt-tournois { grid-area: tournois; }
}

.acc-pt-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.acc-pt-tete .acc-surtitre { margin: 0; font-size: .95rem; }

/* Pastille d'état (couleur selon l'état) */
.acc-pastille {
  --acc-c: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--acc-c);
  background: color-mix(in srgb, var(--acc-c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc-c) 45%, transparent);
  white-space: nowrap;
}
.acc-pastille::before {
  content: '';
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
}
.acc-pastille-ouvert, .acc-pastille-inscrit { --acc-c: var(--green); }
.acc-pastille-bientot   { --acc-c: var(--steel); }
.acc-pastille-qualif    { --acc-c: var(--purple); }
.acc-pastille-en_cours  { --acc-c: var(--red-bright, var(--red)); }
.acc-pastille-complet,
.acc-pastille-annule    { --acc-c: var(--red-bright, var(--red)); }
.acc-pastille-ferme     { --acc-c: var(--text-muted); }

.acc-pt-corps { display: flex; gap: 1rem; align-items: flex-start; }

/* Pavé date (jour / mois) */
.acc-pave-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  padding: .45rem 0 .5rem;
  border-radius: var(--acc-r-petit);
  background: var(--bg-deep);
  border: 1px solid var(--border-bright);
  line-height: 1.05;
}
.acc-pave-jsem { font-size: .72rem; color: var(--text-muted); text-transform: capitalize; }
.acc-pave-jour { font-family: var(--font-num); font-size: 2rem; font-weight: 700; color: var(--gold); }
.acc-pave-mois { font-size: .78rem; color: var(--text-secondary); }

.acc-pt-infos { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.acc-badge-type {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.acc-pt-nom {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  overflow-wrap: anywhere;
}
.acc-pt-liste {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  color: var(--text-secondary);
  font-size: .95rem;
}
.acc-pt-liste li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.45; }
.acc-pt-liste .acc-ico { color: var(--gold); margin-top: .1em; }
.acc-puces { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.acc-puces li {
  font-size: .78rem;
  color: var(--text-muted);
  padding: .15rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-deep) 50%, transparent);
}

/* Colonne action : compte à rebours, places, boutons */
.acc-pt-action {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) {
  .acc-pt-action { padding: 0 0 0 2rem; border-top: 0; border-left: 1px solid var(--border); justify-content: center; }
}
.acc-compte {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.acc-compte .acc-ico { color: var(--gold); width: 1.1rem; height: 1.1rem; }
.acc-compte-txt::first-letter { text-transform: uppercase; }
.acc-point-live {
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--red-bright, var(--red));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--red-bright, var(--red)) 60%, transparent);
  animation: acc-pulse 1.6s ease-out infinite;
}

/* Places : barre de remplissage ou compteur simple */
.acc-places { display: grid; gap: .4rem; font-size: .88rem; color: var(--text-secondary); }
.acc-places-ligne { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.acc-places-reste { font-weight: 700; color: var(--green); }
.acc-places-reste.is-presque { color: var(--gold); }
.acc-places-reste.is-complet { color: var(--red-bright, var(--red)); }
.acc-places-compte { color: var(--text-muted); }
.acc-barre {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  overflow: hidden;
}
.acc-barre-remplie {
  display: block;
  height: 100%;
  width: var(--acc-pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-dim, var(--gold)), var(--gold));
  transform-origin: left center;
  animation: acc-remplir .9s cubic-bezier(.2, .7, .2, 1) both;
}
.acc-places-simple { display: flex; align-items: center; gap: .45rem; }
.acc-places-simple .acc-ico { color: var(--gold); }

.acc-pt-boutons { display: flex; gap: .6rem; }
.acc-pt-boutons .acc-btn-principal { flex: 1 1 auto; }
.acc-pt-boutons .acc-btn-infos { flex: 0 0 auto; }
.acc-aide { margin: 0; font-size: .82rem; color: var(--text-muted); }

/* Carte d'un tournoi annulé : contenu atténué, nom barré */
.acc-etat-annule .acc-pt-nom { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-muted); }

/* ── 4 bis. TOUS LES TOURNOIS DE L'ÉTAPE (dans la grande carte) ─────────── */
.acc-compte-sous { margin: -.5rem 0 0; font-size: .82rem; color: var(--text-muted); }
.acc-pt-resume { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .88rem; color: var(--text-secondary); }
.acc-pt-resume .acc-ico { color: var(--gold); }
.acc-pt-liste .acc-pt-aide { color: var(--text-muted); font-size: .88rem; }
.acc-pt-boutons .acc-btn-infos:only-child { flex: 1 1 auto; }

.acc-pt-tournois { padding-top: 1.1rem; border-top: 1px solid var(--border); }
.acc-pt-tournois .acc-titre-petit { margin-bottom: .75rem; }
.acc-pt-programme { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--text-muted); font-size: .92rem; }
/* Liste sur mobile, grille sur bureau */
.acc-tn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) {
  .acc-tn-liste { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
}
.acc-tn {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .85rem .9rem;
  border-radius: var(--acc-r-petit);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  border: 1px solid var(--border);
}
/* Tournoi auquel le membre est inscrit : liseré vert */
.acc-tn.is-moi { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.acc-tn-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.acc-tn-etiquette { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; }
.acc-tn-etiquette.is-inscrit { color: var(--green); }
.acc-tn-etiquette.is-live { color: var(--red-bright, var(--red)); }
.acc-tn-etiquette .acc-point-live { width: .5rem; height: .5rem; }
.acc-tn-quand { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 700; color: var(--text-primary); font-size: .98rem; }
.acc-tn-quand .acc-ico { color: var(--gold); }
.acc-tn-format { margin: 0; font-size: .8rem; color: var(--text-muted); }
.acc-tn-inscrits, .acc-tn-siege { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .84rem; color: var(--text-secondary); }
.acc-tn-inscrits .acc-ico { color: var(--text-muted); }
.acc-tn-siege { color: var(--gold); font-weight: 600; }
.acc-tn .acc-places { font-size: .8rem; }
.acc-tn-action { margin-top: auto; padding-top: .35rem; display: flex; }
.accueil .acc-tn-action .acc-btn { flex: 1; min-height: 44px; padding: .55rem .9rem; font-size: .88rem; }
/* Résumé des tournois dans la rangée « Ensuite » */
.acc-mini.is-moi .acc-mini-etat { color: var(--green); }
.acc-mini-resume { font-size: .78rem; color: var(--text-secondary); line-height: 1.35; }

/* ── 5. RANGÉE « ENSUITE » ──────────────────────────────────────────────── */
.acc-suivants { margin-top: 1.25rem; }
.acc-suivants-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.acc-suivants-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
@media (min-width: 640px) {
  .acc-suivants-liste { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.acc-mini {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 100%;
  padding: .7rem .85rem;
  border-radius: var(--acc-r-petit);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.acc-mini:hover { border-color: var(--border-bright); background: var(--bg-card2); color: inherit; transform: translateY(-2px); }
.acc-mini-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 3rem;
  padding: .3rem 0;
  border-radius: calc(var(--radius, 8px) * .75);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  font-size: .7rem;
  color: var(--text-muted);
  line-height: 1.1;
}
.acc-mini-date b { font-family: var(--font-num); font-size: 1.3rem; color: var(--gold); }
.acc-mini-corps { display: flex; flex-direction: column; gap: .1rem; }
.acc-mini-type { font-weight: 700; color: var(--text-primary); font-size: .92rem; line-height: 1.3; }
.acc-mini-meta { font-size: .8rem; color: var(--text-secondary); line-height: 1.35; }
.acc-mini-etat { font-size: .76rem; color: var(--text-muted); }
.acc-mini.acc-etat-ouvert .acc-mini-etat,
.acc-mini.acc-etat-inscrit .acc-mini-etat { color: var(--green); }
.acc-mini.acc-etat-en_cours .acc-mini-etat { color: var(--red-bright, var(--red)); }

/* ── 6. ÉTAT VIDE ILLUSTRÉ ──────────────────────────────────────────────── */
.acc-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: 2.25rem 1.25rem;
  border-radius: var(--acc-r);
  border: 1px dashed var(--border-bright);
  background: var(--bg-card);
}
.acc-vide-illu { width: 120px; height: 80px; margin-bottom: .25rem; }
.acc-vide-c1 { fill: var(--bg-card2); stroke: var(--border-bright); stroke-width: 1.5; }
.acc-vide-c2 { fill: var(--bg-deep); stroke: var(--gold); stroke-width: 1.5; }
.acc-vide-symbole { fill: var(--gold); font-size: 22px; font-family: var(--font-body); }
.acc-vide-titre { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--text-primary); }
.acc-vide-texte { margin: 0 0 .5rem; color: var(--text-secondary); max-width: 34rem; }

/* ── 7. CARTE « À LA UNE » ──────────────────────────────────────────────── */
.acc-une {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--acc-r);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.acc-une:hover { border-color: var(--border-bright); transform: translateY(-2px); color: inherit; }
.acc-une-media { display: block; aspect-ratio: 16 / 9; background: var(--bg-card2); overflow: hidden; }
.acc-une-media img { width: 100%; height: 100%; object-fit: cover; }
.acc-une-corps { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.15rem 1.15rem; flex: 1; }
.acc-une-tag {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gold);
  padding: .15rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.acc-une-titre { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.acc-une-extrait {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acc-une-meta, .acc-news-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-muted);
  padding-top: .5rem;
}
.acc-une-meta .acc-lien, .acc-news-meta .acc-lien { font-size: .82rem; }

/* ── 8. TOURNOIS DES PARTENAIRES ─────────────────────────────────────────
   Les encadrés gardent leur style d'origine (style_public.css) ;
   on aligne seulement les arrondis et l'espacement sur l'accueil. */
.acc-partenaires { background: var(--bg-dark); border-block: 1px solid var(--border); }
.acc-partenaires .evenements-encadres { max-width: none; }
.acc-partenaires .encadre-event { border-radius: var(--acc-r); }
/* ── 9. ACTUALITÉS ──────────────────────────────────────────────────────── */
.acc-news-grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* Mobile : 3 actus ; 2 colonnes : 4 ; 3 colonnes : 6 */
.acc-news-grille > .acc-news:nth-child(n+4) { display: none; }
@media (min-width: 640px) {
  .acc-news-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .acc-news-grille > .acc-news:nth-child(4) { display: flex; }
}
@media (min-width: 1024px) {
  .acc-news-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc-news-grille > .acc-news:nth-child(n+4) { display: flex; }
}
.acc-news {
  display: flex;
  flex-direction: column;
  border-radius: var(--acc-r);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.acc-news:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--bg-deep) 70%, transparent);
  color: inherit;
}
.acc-news-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-card2); overflow: hidden; }
.acc-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.acc-news:hover .acc-news-media img { transform: scale(1.03); }
.acc-news-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  border: 2px solid var(--text-primary);
}
.acc-news-play::after {
  content: '';
  position: absolute;
  left: 18px; top: 13px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--text-primary);
}
.acc-news-corps { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.acc-news-titre-ligne { display: flex; align-items: center; gap: .6rem; }
.acc-news-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.acc-news-titre { font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--text-primary); }
.acc-news-extrait {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Lien « voir toutes » : dans l'en-tête sur grand écran, en bas sur mobile */
.acc-lien-tete { display: none; }
/* (le lien « voir toutes les actualités » est désormais un bouton sous la grille, comme le calendrier) */
@media (max-width: 639px) {
  .acc-section-tete-ligne { display: block; }
}

/* ── 10. LE CLUB ────────────────────────────────────────────────────────── */
.acc-club { position: relative; }
/* Fond d'écran choisi par le club (Site › Identité) : l'image occupe la MOITIÉ DROITE de la carte
   et se fond dans le fond de la carte vers la gauche, là où se trouve le texte (lisibilité garantie).
   Le « voile » réglé par le club assombrit l'image. Sur mobile, l'image passe derrière la carte,
   atténuée vers le bas. */
.acc-club-avec-fond .acc-club-carte { position: relative; overflow: hidden; }
.acc-club-avec-fond .acc-club-carte::before {
  content: ""; position: absolute; inset: 0 0 0 30%; pointer-events: none;
  --acc-teinte-c: color-mix(in srgb, var(--acc-fond-teinte, transparent) var(--acc-fond-teinte-force, 0%), transparent);
  background:
    linear-gradient(var(--acc-teinte-c), var(--acc-teinte-c)),
    linear-gradient(color-mix(in srgb, var(--bg-deep) calc(var(--acc-club-voile, .55) * 70%), transparent),
                    color-mix(in srgb, var(--bg-deep) calc(var(--acc-club-voile, .55) * 70%), transparent)),
    var(--acc-club-fond) var(--acc-fond-x, 50%) var(--acc-fond-y, 50%) / cover no-repeat;
  background-blend-mode: color, normal, normal;
  /* Zoom / position / fondu : voir le commentaire de .acc-fond::after */
  transform: scale(var(--acc-fond-zoom, 1));
  transform-origin: var(--acc-fond-x, 50%) var(--acc-fond-y, 50%);
  /* Fondu par MASQUE (comme .acc-fond) et non par un aplat de la couleur de la card : l'aplat ne raccordait pas
     avec la lueur réglable de la card (dégradé), d'où un trait vertical visible à gauche de l'image. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 85%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 85%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(100% / var(--acc-fond-zoom, 1)) calc(100% / var(--acc-fond-zoom, 1));
          mask-size: calc(100% / var(--acc-fond-zoom, 1)) calc(100% / var(--acc-fond-zoom, 1));
  -webkit-mask-position: var(--acc-fond-x, 50%) var(--acc-fond-y, 50%);
          mask-position: var(--acc-fond-x, 50%) var(--acc-fond-y, 50%);
}
.acc-club-avec-fond .acc-club-carte > * { position: relative; }
@media (max-width: 767px) {
  .acc-club-avec-fond .acc-club-carte::before {
    inset: 0;
    /* mobile : l'image passe derrière le texte, atténuée vers le haut (même masque que .acc-fond) */
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.45) 100%);
            mask-image: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.45) 100%);
  }
}
.acc-club-carte {
  padding: 1.75rem 1.25rem;
  border-radius: var(--acc-r);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border: 1px solid var(--border);
}
@media (min-width: 768px) { .acc-club-carte { padding: 2.5rem; } }
.acc-club-identite {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .acc-club-identite { flex-direction: row; align-items: center; text-align: left; gap: 2.5rem; }
}
.acc-club-logo {
  width: auto;
  height: auto;
  max-width: min(220px, 60vw);
  max-height: 220px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 25%, transparent));
}
.acc-club-texte { display: flex; flex-direction: column; gap: .5rem; align-items: inherit; }
@media (min-width: 768px) { .acc-club-texte { align-items: flex-start; } }
.acc-club-texte .acc-surtitre { margin: 0; }
.acc-club-saison { margin: 0; color: var(--text-muted); font-size: .9rem; }
.acc-club-citation {
  margin: .5rem 0 .25rem;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid var(--gold);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: left;
  max-width: 40rem;
}
.acc-club-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; justify-content: inherit; }
@media (max-width: 767px) {
  .acc-club-actions { justify-content: center; }
  .acc-club-actions .acc-btn { flex: 1 1 100%; }
}
.acc-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.75rem 0 0;
}
@media (min-width: 768px) { .acc-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acc-chiffre {
  display: flex;
  flex-direction: column-reverse;   /* le nombre (dd) au-dessus du libellé (dt) */
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
  padding: 1rem .75rem;
  text-align: center;
  border-radius: var(--acc-r-petit);
  background: var(--bg-card2);
  border: 1px solid var(--border);
}
.accueil .acc-chiffre-nb {
  margin: 0;
  font-family: var(--font-num);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.acc-chiffre-lbl { font-size: .8rem; color: var(--text-muted); line-height: 1.35; }

/* ── 11. DEVENEZ MEMBRE ─────────────────────────────────────────────────── */
.acc-cta { padding-top: 0; }
.acc-cta-carte {
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: var(--acc-r);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  background:
    /* Lueur réglable dans Apparence ; d'origine : accent, 12 %, en haut */
    radial-gradient(80% 120% at var(--acc-grad-pos, 50% 0%), color-mix(in srgb, var(--acc-grad-couleur, var(--gold)) var(--acc-grad-force, 12%), transparent) 0%, transparent 70%),
    var(--bg-card);
}
@media (min-width: 768px) { .acc-cta-carte { padding: 3rem 2.5rem; } }
.acc-cta-texte { max-width: 38rem; margin: .9rem auto 1.5rem; color: var(--text-secondary); line-height: 1.75; }
.acc-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
@media (max-width: 639px) { .acc-cta-actions .acc-btn { flex: 1 1 100%; } }

/* ── 12. ANIMATIONS ─────────────────────────────────────────────────────── */
@keyframes acc-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red-bright, var(--red)) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes acc-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes acc-entree  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* La grande carte entre en douceur au chargement */
.acc-pt, .acc-jourj, .acc-perso { animation: acc-entree .5s ease-out both; }
.acc-jourj { animation-delay: .05s; }
.acc-pt    { animation-delay: .08s; }

/* Apparition au défilement : uniquement si js/accueil.js est actif
   (sans JavaScript, tout reste visible) */
.accueil.acc-js .acc-apparait { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.accueil.acc-js .acc-apparait.est-visible { opacity: 1; transform: none; }

/* Accessibilité : aucune animation si le visiteur l'a demandé */
@media (prefers-reduced-motion: reduce) {
  .accueil *, .accueil *::before, .accueil *::after {
    animation: none !important;
    transition: none !important;
  }
  .accueil.acc-js .acc-apparait { opacity: 1; transform: none; }
  .acc-mini:hover, .acc-news:hover, .acc-une:hover { transform: none; }
}

/* ── ORDRE DES BLOCS (Site › Rubriques) ─────────────────────────────────────
   Le bloc placé en premier peut être n'importe lequel : il se loge dans la
   colonne principale de .acc-haut, à côté de « À la une ». On neutralise donc
   son conteneur et son espacement propres pour qu'il ne les double pas. */
.acc-haut-generique .acc-haut-principal > .acc-section { padding-block: 0; }
.acc-haut-generique .acc-haut-principal > .acc-section > .acc-conteneur {
  max-width: none;
  padding-inline: 0;
}
/* Prochain tournoi qui n'est pas en tête : espacement de section normal */
.acc-prochaine { padding-bottom: 0; }
/* Bloc générique placé en tête : espacement bas normal (les blocs suivants comptent dessus) */
.acc-haut-generique { padding-bottom: 2.5rem; }
@media (min-width: 768px) { .acc-haut-generique { padding-bottom: 4rem; } }
/* « Devenez membre » n'a pas d'espace en haut (il suit normalement « Le club »).
   Après un bloc sans espace bas, on lui en rend un. */
.acc-haut + .acc-cta,
.acc-prochaine + .acc-cta { padding-top: 2.5rem; }
@media (min-width: 768px) {
  .acc-haut + .acc-cta,
  .acc-prochaine + .acc-cta { padding-top: 4rem; }
}


/* ─── Image de fond d'une card (prochain tournoi, devenir membre) ───────────────────────────
   Réglée dans Admin › Site › Apparence › Images de fond. Même principe que la carte « Le club » :
   l'image occupe la moitié droite et se fond dans la couleur de la card vers la gauche (texte lisible) ;
   sur mobile elle passe derrière, atténuée vers le bas. Le voile est réglé par le club. */
.acc-fond { position: relative; overflow: hidden; }

/* Calque d'image des cards qui sont des sections (Prochains événements, Actualités) ou ont leur propre mise en page
   (Mon tournoi) : <span class="acc-calque"><i></i></span> posé en premier enfant. Le span découpe (coins arrondis),
   le <i> porte l'image. Les ::before / ::after de ces éléments restent libres pour les styles du site. */
.acc-avec-calque { position: relative; }
.acc-avec-calque > :not(.acc-calque) { position: relative; z-index: 1; }
.acc-calque { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.acc-calque > i { position: absolute; inset: 0 0 0 30%; }

/* Image + voile + teinte, réglés par le club (Apparence) :
   - teinte = couleur posée en mode de fusion « couleur » sur l'image (intensité 0 = image d'origine) ;
   - zoom / position : le calque est agrandi autour du point choisi (transform) ; le masque de fondu est réduit dans
     la même proportion (mask-size / mask-position) pour que la zone de fondu garde sa place. Zoom 1 = rendu d'origine. */
.acc-fond::after,
.acc-calque > i {
  --acc-teinte-c: color-mix(in srgb, var(--acc-fond-teinte, transparent) var(--acc-fond-teinte-force, 0%), transparent);
  background:
    linear-gradient(var(--acc-teinte-c), var(--acc-teinte-c)),
    linear-gradient(color-mix(in srgb, var(--bg-deep) calc(var(--acc-fond-voile, .55) * 70%), transparent),
                    color-mix(in srgb, var(--bg-deep) calc(var(--acc-fond-voile, .55) * 70%), transparent)),
    var(--acc-fond-url) var(--acc-fond-x, 50%) var(--acc-fond-y, 50%) / cover no-repeat;
  background-blend-mode: color, normal, normal;
  transform: scale(var(--acc-fond-zoom, 1));
  transform-origin: var(--acc-fond-x, 50%) var(--acc-fond-y, 50%);
  /* Le fondu est un MASQUE (et non un dégradé de la couleur de la card) : l'image se dissout dans n'importe quel fond,
     dégradé ou uni, sans laisser de trait à la jonction. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 85%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 85%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(100% / var(--acc-fond-zoom, 1)) calc(100% / var(--acc-fond-zoom, 1));
          mask-size: calc(100% / var(--acc-fond-zoom, 1)) calc(100% / var(--acc-fond-zoom, 1));
  -webkit-mask-position: var(--acc-fond-x, 50%) var(--acc-fond-y, 50%);
          mask-position: var(--acc-fond-x, 50%) var(--acc-fond-y, 50%);
}
/* Opacité de l'image (réglage Apparence, 100 % d'origine) : toute la couche image (image + voile + teinte) se fond dans le fond de la card */
.acc-fond::after,
.acc-calque > i,
.acc-club-avec-fond .acc-club-carte::before { opacity: var(--acc-fond-opacite, 1); }
.acc-fond::after { content: ""; position: absolute; inset: 0 0 0 30%; z-index: 0; pointer-events: none; }
.acc-fond > * { position: relative; z-index: 1; }
.acc-fond::before { z-index: 2; }   /* le filet doré du haut de .acc-pt reste au-dessus de l'image */
@media (max-width: 767px) {
  .acc-fond::after,
  .acc-calque > i {
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.45) 100%);
            mask-image: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.45) 100%);
  }
}

/* Lueur réglable (Apparence) des sections « Prochains événements » et « Actualités » : d'origine aucune (intensité 0 %) */
.acc-partenaires[data-acc-card],
.acc-actus[data-acc-card] {
  background-image: radial-gradient(120% 120% at var(--acc-grad-pos, 50% 0%), color-mix(in srgb, var(--acc-grad-couleur, var(--gold)) var(--acc-grad-force, 0%), transparent) 0%, transparent 60%);
}

/* ── « À la une » à côté du premier bloc (PC) : hauteur propre, image jamais déformée ──
   La card garde sa hauteur naturelle (image 4/3 recadrée sans déformation) au lieu de s'étirer sur celle du bloc de
   gauche : quand ce bloc est haut (beaucoup de tournois), l'image ne s'allonge plus. La card reste visible en défilant. */
@media (min-width: 1024px) {
  .acc-haut-avec-une .acc-haut-grille { align-items: start; }
  .acc-haut-avec-une .acc-haut-une { position: sticky; top: 1rem; }
  .acc-haut-avec-une .acc-une { height: auto; }
  .acc-haut-avec-une .acc-une-media { aspect-ratio: 4 / 3; }
}

/* Carte « Le club » : lueur colorée réglable dans Apparence (d'origine : aucune, intensité 0 %) */
.acc-club-carte {
  background-image: radial-gradient(120% 120% at var(--acc-grad-pos, 0% 0%), color-mix(in srgb, var(--acc-grad-couleur, var(--gold)) var(--acc-grad-force, 0%), transparent) 0%, transparent 60%);
}

/* ─── Éléments réservés aux styles du site (Site > Apparence > Style) ───────
   Décor de la section « Le club », ligne de date, bandeau défilant, compte à
   rebours en blocs, dernier jour / mois-année du pavé date, plage de dates en
   titre, heure « 13:30 » et jour complet des tournois, date en pavé des
   événements partenaires : masqués en style Classique, montrés par css/styles/*.css. */
.acc-deco,
.acc-ours,
.acc-ruban,
.acc-compte-blocs,
.acc-pave-fin,
.acc-pave-an,
.acc-pt-plage,
.acc-tn-hm,
.acc-tn-jsem,
.evt-pave {
  display: none;
}