/* ==========================================================================
   css/styles/classique.css - Style « Classique » modernisé (site public des clubs)
   --------------------------------------------------------------------------
   Chargée UNIQUEMENT quand le style du site est « Classique » (voir
   site_style_feuille_url() dans includes/site_styles.php), après les variables
   du thème du club : tout passe par ces variables (aucune couleur en dur),
   donc couleurs et polices du club restent celles de l'administration.

   Esprit conservé (cartes encadrées, sobriété) ; ce qui change :
     1. Cartes et boutons : arrondis, ombres douces, survol qui se soulève
     2. Titres de section : petit filet d'accent qui se dessine
     3. « Prochains événements » et « Actualités » : cartes posées dans la
        page (et non plus des bandes pleine largeur collées au bloc précédent)
     4. Mouvement discret : entrée en cascade, apparition au défilement sur
        les autres pages, survols. Rien ne clignote.
     5. Respect de prefers-reduced-motion (tout est coupé)
   ========================================================================== *//* ── 0. VARIABLES LOCALES ───────────────────────────────────────────────── */
:root {
  /* Ombres douces, teintées par le fond du thème (jamais de noir pur) */
  --cl-ombre:       0 1px 2px color-mix(in srgb, var(--bg-deep) 55%, transparent),
                    0 10px 26px -14px color-mix(in srgb, var(--bg-deep) 80%, transparent);
  --cl-ombre-haute: 0 2px 4px color-mix(in srgb, var(--bg-deep) 50%, transparent),
                    0 18px 38px -16px color-mix(in srgb, var(--bg-deep) 90%, transparent);
  /* Arrondi des cartes : un cran de plus que l'ancien Classique */
  --cl-r:           calc(var(--radius, 8px) * 1.1);
  /* Courbe de mouvement commune (départ vif, arrivée douce) */
  --cl-courbe:      cubic-bezier(.22, .8, .3, 1);
}

/* ── 1. CARTES ──────────────────────────────────────────────────────────── */
:root .card,
:root .tournoi-card,
:root .encadre-event,
:root .acc-news,
:root .acc-une,
:root .acc-mini,
:root .act-carte,
:root .trn-carte,
:root .acc-club-carte,
:root .acc-cta-carte {
  border-radius: var(--cl-r);
  box-shadow: var(--cl-ombre);
  transition: transform .35s var(--cl-courbe), box-shadow .35s var(--cl-courbe), border-color .25s ease;
}

/* Liseré d'accent en haut des cartes, comme sur « Prochaine étape » :
   - cartes sans effet de survol : toujours visible (le trait suit les coins arrondis) ;
   - cartes avec effet de survol : il se dessine du centre vers les bords quand on les survole. */
:root .acc-cta-carte,
:root .trn-carte,
:root .trn-formule,
:root .rec-carte,
:root .mc-carte,
:root .mc-rang,
:root .mc-promo,
:root .mc-verrou,
:root .acc-club-carte { position: relative; }
:root .acc-cta-carte::before,
:root .trn-carte::before,
:root .trn-formule::before,
:root .rec-carte::before,
:root .mc-carte::before,
:root .mc-rang::before,
:root .mc-promo::before,
:root .mc-verrou::before,
:root .acc-club-carte::after,
:root .acc-partenaires.acc-avec-calque .evenements-encadres::after,
:root .acc-actus.acc-avec-calque .acc-news-grille::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--cl-r) var(--cl-r) 0 0;
  /* même dégradé que le liseret de « Prochaine étape » : or foncé sur les côtés, or franc au centre */
  background: linear-gradient(90deg, var(--gold-dim, var(--gold)), var(--gold), var(--gold-dim, var(--gold)));
}

:root .card,
:root .tournoi-card:not(.tournoi-card-flat),
:root .encadre-event,
:root .acc-news,
:root .acc-une,
:root .acc-mini,
:root .act-carte,
:root .trn-choix,
:root .trn-tournoi,
:root .acc-tn { position: relative; }
:root .card::before,
:root .tournoi-card:not(.tournoi-card-flat)::before,
:root .encadre-event::before,
:root .acc-news::before,
:root .acc-une::before,
:root .acc-mini::before,
:root .act-carte::before,
:root .trn-choix::before,
:root .trn-tournoi::before,
:root .acc-tn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--cl-r) var(--cl-r) 0 0;
  background: linear-gradient(90deg, var(--gold-dim, var(--gold)), var(--gold), var(--gold-dim, var(--gold)));
  transform: scaleX(0);
  transition: transform .45s var(--cl-courbe);
}
:root .card:hover::before,
:root .tournoi-card:not(.tournoi-card-flat):hover::before,
:root .encadre-event:hover::before,
:root .acc-news:hover::before,
:root .acc-une:hover::before,
:root .acc-mini:hover::before,
:root .act-carte:hover::before,
:root .trn-choix:hover::before,
:root .trn-tournoi:hover::before,
:root .acc-tn:hover::before { transform: scaleX(1); }

/* Survol : la carte se soulève un peu, l'ombre s'allonge (plus de halo doré) */
:root .card:hover,
:root .tournoi-card:hover,
:root .encadre-event:hover,
:root .acc-news:hover,
:root .acc-une:hover,
:root .acc-mini:hover,
:root .act-carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--cl-ombre-haute);
  border-color: var(--border-bright);
}

:root .trn-tournoi { transition: transform .35s var(--cl-courbe), box-shadow .35s var(--cl-courbe), border-color .2s ease; }
:root .trn-tournoi:hover { transform: translateY(-2px); box-shadow: var(--cl-ombre); }
:root .acc-tn { transition: transform .35s var(--cl-courbe), box-shadow .35s var(--cl-courbe), border-color .25s ease; }
:root .acc-tn:hover { transform: translateY(-2px); box-shadow: var(--cl-ombre); }
:root .trn-etape::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dim, var(--gold)), var(--gold), var(--gold-dim, var(--gold)));
}
/* Cartes imbriquées dans un encadré : pas de survol propre (l'encadré porte déjà l'effet) */
:root .tournoi-card-flat,
:root .tournoi-card-flat:hover { box-shadow: none; transform: none; }

/* Images des actualités : léger zoom au survol (déjà en place, on l'adoucit) */
:root .acc-news-media img,
:root .acc-une-media img { transition: transform .7s var(--cl-courbe); }

/* ── 2. BOUTONS ─────────────────────────────────────────────────────────── */
:root .btn {
  letter-spacing: .05em;
  border-radius: calc(var(--radius, 8px) * .6);
  transition: transform .25s var(--cl-courbe), box-shadow .25s ease, background-color .25s ease,
              border-color .25s ease, color .25s ease, filter .25s ease;
}
:root .btn:active { transform: translateY(0) scale(.98); }

/* Liens fléchés : la flèche avance au survol (déjà en place sur l'accueil) */
:root .acc-lien {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .3s var(--cl-courbe), color .2s ease;
}
:root .acc-lien:hover { background-size: 100% 1px; }

/* ── 3. TITRES DE SECTION : ornement sous le titre ─────────────────────────
   Deux filets qui s'effacent de part et d'autre d'un losange, qui se déploient
   depuis le centre (accueil : quand le bloc apparaît ; autres pages : au chargement). */
:root .acc-titre::after,
:root .page-hero-title::after {
  content: "\2666";                       /* losange plein, symbole de carte */
  display: block;
  width: 0;
  max-width: 100%;
  height: 1rem;
  margin: .7rem auto 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: .7rem;
  line-height: 1rem;
  color: var(--gold);
  background:
    linear-gradient(90deg, transparent, var(--gold)) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(90deg, var(--gold), transparent) right center / calc(50% - 14px) 1px no-repeat;
  transition: width .8s var(--cl-courbe) .15s;
}
/* Il se déploie quand le bloc apparaît (accueil) ; sans JS ou ailleurs il est déjà tracé */
:root .acc-section-tete.est-visible .acc-titre::after,
:root .accueil:not(.acc-js) .acc-titre::after,
:root .page-hero-title::after { width: 170px; }
/* Bandeau des autres pages : le déploiement se joue au chargement */
:root .page-hero-title::after { animation: cl-ornement .9s var(--cl-courbe) .3s backwards; }
@keyframes cl-ornement { from { width: 0; } to { width: 170px; } }
/* Titres alignés à gauche (en-tête avec lien) : l'ornement suit */
:root .acc-section-tete-ligne .acc-titre::after { margin-left: 0; }

/* ── 4. « PROCHAINS ÉVÉNEMENTS » ET « ACTUALITÉS » ──────────────────────────
   Comme les autres blocs de l'accueil : le titre reste dans la page, sans bande ni cadre
   pleine largeur collés au bloc précédent. Si le club a réglé une image de fond, elle
   n'enveloppe plus tout le bloc : elle se place derrière les cartes seulement (cadre aux coins
   arrondis autour de la grille), le titre restant à l'extérieur. Les variables --acc-fond-*
   sont posées sur la section et héritées : on les reprend sur la grille. */
:root .acc-partenaires {
  background-color: transparent;
  border: 0;
}
/* Lueur réglable (Apparence) : accueil.css la pose sur toute la section, donc de bord à bord.
   Ici elle est retirée de la section et posée sur la grille de cartes, avec un peu d'air autour
   (la marge négative compense le remplissage : la mise en page ne bouge pas). Intensité 0 % = invisible. */
:root .acc-partenaires[data-acc-card],
:root .acc-actus[data-acc-card] { background-image: none; }
:root .acc-partenaires .evenements-encadres,
:root .acc-actus .acc-news-grille {
  padding: .75rem;
  margin: -.75rem;
  border-radius: var(--cl-r);
  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%);
}

/* le calque d'image posé sur toute la section n'est plus utilisé en Classique */
:root .acc-partenaires > .acc-calque,
:root .acc-actus > .acc-calque { display: none; }

:root .acc-partenaires.acc-avec-calque .evenements-encadres,
:root .acc-actus.acc-avec-calque .acc-news-grille {
  position: relative;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--cl-r);
  background-color: var(--bg-card);
  box-shadow: var(--cl-ombre);
  overflow: hidden;
}
@media (min-width: 768px) {
  :root .acc-partenaires.acc-avec-calque .evenements-encadres,
  :root .acc-actus.acc-avec-calque .acc-news-grille { padding: 2rem; }
}
/* l'image : même rendu que le calque d'origine (voile, teinte, zoom, fondu, opacité réglés dans Apparence) */
:root .acc-partenaires.acc-avec-calque .evenements-encadres::before,
:root .acc-actus.acc-avec-calque .acc-news-grille::before {
  content: "";
  position: absolute;
  inset: 0 0 0 30%;
  z-index: 0;
  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-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%);
  opacity: var(--acc-fond-opacite, 1);
  -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%);
}
:root .acc-partenaires.acc-avec-calque .evenements-encadres > *,
:root .acc-actus.acc-avec-calque .acc-news-grille > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
  :root .acc-partenaires.acc-avec-calque .evenements-encadres::before,
  :root .acc-actus.acc-avec-calque .acc-news-grille::before {
    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%);
  }
}

/* ── 5. MOUVEMENT ───────────────────────────────────────────────────────── */
@keyframes cl-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cl-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* 5a. Accueil : les cartes d'une grille arrivent l'une après l'autre.
   fill-mode « backwards » : une fois l'entrée finie, le survol reprend la main. */
:root .acc-news-grille.est-visible > .acc-news,
:root .acc-suivants-liste > li {
  animation: cl-monte .6s var(--cl-courbe) backwards;
}
:root .acc-news-grille.est-visible > .acc-news:nth-child(2) { animation-delay: .08s; }
:root .acc-news-grille.est-visible > .acc-news:nth-child(3) { animation-delay: .16s; }
:root .acc-news-grille.est-visible > .acc-news:nth-child(4) { animation-delay: .24s; }
:root .acc-news-grille.est-visible > .acc-news:nth-child(5) { animation-delay: .32s; }
:root .acc-news-grille.est-visible > .acc-news:nth-child(6) { animation-delay: .4s; }
:root .acc-suivants-liste > li:nth-child(2) { animation-delay: .1s; }
:root .acc-suivants-liste > li:nth-child(3) { animation-delay: .2s; }

/* 5b. Bandeau de titre des autres pages : étiquette, titre et sous-titre montent en cascade */
:root .page-hero-label { animation: cl-monte .6s var(--cl-courbe) backwards; }
:root .page-hero-title { animation: cl-monte .7s var(--cl-courbe) .08s backwards; }
:root .page-hero-sub { animation: cl-monte .7s var(--cl-courbe) .16s backwards; }

/* 5c. Autres pages (tournois, classements, actualités, compte...) : chaque carte
   apparaît quand on arrive dessus. Uniquement si le navigateur sait animer au
   défilement ; sinon tout reste simplement visible. */
@supports (animation-timeline: view()) {
  :root main:not(.accueil) .card,
  :root main:not(.accueil) .tournoi-card:not(.tournoi-card-flat),
  :root main:not(.accueil) .encadre-event,
  :root main:not(.accueil) .clt-table tbody tr,
  :root main:not(.accueil) .clt-card,
  :root main:not(.accueil) .forum-ligne {
    animation: cl-monte linear backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* 5d. Tableaux (classements, records) : la ligne survolée se met en évidence */
:root .clt-table tbody tr { transition: background-color .2s ease; }
:root .clt-table tbody tr:hover { background-color: color-mix(in srgb, var(--gold) 8%, transparent); }

/* 5e. Champs de formulaire : le focus s'éclaire en douceur */
:root input:not([type="checkbox"]):not([type="radio"]),
:root select,
:root textarea { transition: border-color .2s ease, box-shadow .2s ease; }
:root input:not([type="checkbox"]):not([type="radio"]):focus,
:root select:focus,
:root textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }

/* 5f. Bandeau de titre des autres pages : halo doux derrière le titre, plus d'air */
:root .page-hero::before {
  background: radial-gradient(ellipse 55% 90% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent);
}
:root .page-hero { padding-block: 5.5rem 3.5rem; }

/* 5g. Onglets : le trait de l'onglet actif glisse en douceur, le contenu s'ouvre en fondu */
:root .tab-btn {
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
  border-radius: calc(var(--radius, 8px) * .6) calc(var(--radius, 8px) * .6) 0 0;
}
:root .tab-btn:hover { background-color: color-mix(in srgb, var(--gold) 7%, transparent); }
:root .tab-btn.active { background-color: color-mix(in srgb, var(--gold) 10%, transparent); }
@keyframes cl-fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
:root .tab-panel.active { animation: cl-fondu .45s var(--cl-courbe) backwards; }

/* 5h. Titres de cartes : un filet doré à gauche de l'en-tête de carte */
:root .card-header { border-left: 3px solid var(--gold); }

/* 5i. TITRES : tous les titres suivent le réglage « Titres » (police) de l'administration, comme l'accueil.
   Avant, les titres des autres pages utilisaient la police du texte (--font-body) ; le bloc de style_public.css
   « .tournoi-name, .etape-title, ... » leur imposait aussi cette police. Même casse et même interlettrage que .acc-titre. */
:root .page-hero-title,
:root .section-title,
:root .card-title,
:root .accordion-title,
:root .trn-carte-titre,
:root .act-titre,
:root .forum-form h2,
:root .mc-carte-tete h2,
:root .mc-carte-tete h3,
:root .mc-promo h2,
:root .mc-verrou h2,
:root .auth-etapes .form-section-title,
:root .tournoi-name,
:root .etape-title,
:root .etape-header-title,
:root .modal-title,
:root .news-card-title,
:root .news-detail-title,
:root .hero-une-title,
:root .news-detail-content h2,
:root .news-detail-content h3,
:root .cal-nav-title,
:root .snack-title,
:root .form-section-title,
:root .encadre-event-title {
  font-family: var(--font-display);
  letter-spacing: normal;
  text-transform: none;
}

/* 5j. Mon compte : bouton « Activer / Désactiver les notifications » de l'en-tête de carte.
   mon_compte.css lui donne « color: inherit » (la couleur d'accent de l'en-tête) sur un fond transparent :
   texte d'accent sur la carte, illisible selon le thème. On le passe en bouton plein, texte sur accent
   comme les boutons principaux du site (--on-accent), toujours lisible. */
:root .mc-carte-tete .mc-btn-petit {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--on-accent, var(--bg-deep));
  border: 0;
  font-weight: 700;
}
:root .mc-carte-tete .mc-btn-petit:hover { color: var(--on-accent, var(--bg-deep)); filter: brightness(1.1); }
:root .mc-carte-tete .mc-btn-petit:disabled { opacity: .6; cursor: default; filter: none; }

/* ── 6. ACCESSIBILITÉ : AUCUN MOUVEMENT SI LE VISITEUR L'A DEMANDÉ ──────── */
@media (prefers-reduced-motion: reduce) {
  :root *,
  :root *::before,
  :root *::after {
    animation: none !important;
    transition: none !important;
  }
  :root .card:hover,
  :root .tournoi-card:hover,
  :root .encadre-event:hover,
  :root .acc-news:hover,
  :root .acc-une:hover,
  :root .acc-mini:hover,
  :root .acc-tn:hover,
  :root .trn-tournoi:hover { transform: none; }
  :root .acc-titre::after,
  :root .page-hero-title::after { width: 170px; }
}