/* Pages CMS (table MainCMS, rendues par MainPages.razor) : socle graphique partagé.
   Le contenu de chaque page ne stocke plus que du HTML référençant ces classes. */

.pal-cms * { box-sizing: border-box; }

/* Hero */
.pal-cms-hero { padding: 1.75rem 0 2.25rem; border-bottom: 1px solid var(--surface-border); margin-bottom: 2rem; }
.pal-cms-eyebrow { color: var(--pal-red); text-transform: uppercase; font-weight: 800; letter-spacing: .06em; font-size: .78rem; margin-bottom: .5rem; }
.pal-cms-hero h1 { margin: 0 0 1rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; color: var(--text); }
.pal-cms-hero h1:last-child { margin-bottom: 0; }
.pal-cms-hero p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.7; max-width: 46rem; margin: 0; }

/* Actions / boutons */
.pal-cms-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.pal-cms-btn { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.3rem; border-radius: 6px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; transition: filter .2s ease, border-color .2s ease, color .2s ease; }
.pal-cms-btn-primary { color: var(--chrome-text); background: var(--pal-red); }
.pal-cms-btn-primary:hover { background: var(--pal-red-mid); }
.pal-cms-btn-secondary { color: var(--text); background: transparent; border: 1px solid var(--surface-border); }
.pal-cms-btn-secondary:hover { border-color: var(--pal-red); color: var(--pal-red); }

/* Sections */
.pal-cms-section { padding: 1.75rem 0; }
.pal-cms-section:first-child { padding-top: 0; }
.pal-cms-section h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 .5rem; color: var(--text); }
.pal-cms-lead { color: var(--text-muted); line-height: 1.7; max-width: 48rem; margin: 0 0 1.5rem; }

/* Grilles — chaque suffixe correspond à une courbe responsive distincte déjà en usage,
   fusionnées uniquement quand deux pages avaient exactement le même comportement. */
.pal-cms-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* seuil: --bp-tablet */
@media (min-width: 600px) {
    .pal-cms-grid-2, .pal-cms-grid-4, .pal-cms-grid-special { grid-template-columns: repeat(2, 1fr); }
    .pal-cms-grid-ca, .pal-cms-grid-office { grid-template-columns: repeat(3, 1fr); }
}
/* seuil: --bp-desktop-sm */
@media (min-width: 1024px) {
    .pal-cms-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .pal-cms-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .pal-cms-grid-5, .pal-cms-grid-ca, .pal-cms-grid-office { grid-template-columns: repeat(5, 1fr); }
    .pal-cms-grid-special { grid-template-columns: repeat(3, 1fr); }
}

/* Tour de fonctionnalités : texte + capture d'écran, alternées (ex. news "le site fait peau
   neuve" annonçant une refonte page par page). Casse la monotonie d'un simple empilement
   texte+image identique répété N fois — .pal-cms-feature-flip inverse l'ordre visuel une
   section sur deux à partir du seuil tablette (en dessous, toujours texte puis capture, ordre
   du HTML). .pal-cms-feature-shot-two accueille 2 captures côte à côte dans le même slot
   (ex. liste + fiche détail d'une même page). */
.pal-cms-feature { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--surface-border); }
.pal-cms-feature:first-child { border-top: none; padding-top: 0; }
/* seuil: --bp-tablet */
@media (min-width: 600px) {
    .pal-cms-feature { grid-template-columns: 1fr 1.1fr; gap: 2.5rem; }
    .pal-cms-feature-flip .pal-cms-feature-text { order: 2; }
    .pal-cms-feature-flip .pal-cms-feature-shot { order: 1; }
}
.pal-cms-feature-text .pal-cms-eyebrow { display: block; }
.pal-cms-feature-text h3 { margin: 0 0 .6rem; font-size: 1.2rem; color: var(--text); }
.pal-cms-feature-text p { margin: 0 0 .7rem; color: var(--text-muted); line-height: 1.6; }
.pal-cms-feature-text p:last-child { margin-bottom: 0; }
.pal-cms-feature-shot { border-radius: var(--pal-card-radius); border: 1px solid var(--surface-border); background: var(--surface-card); box-shadow: var(--pal-card-shadow); overflow: hidden; }
.pal-cms-feature-shot img { display: block; width: 100%; height: auto; }
/* ckeditor5.css pose .ck-content .image{display:table} + .image img{max-width/min-width:100%} avec
   exactement la meme specificite (2 classes + type) que les deux regles ci-dessus, et il est charge
   avant pal-cms.css dans App.razor : sans ce reset, le <figure class="image"> de CKEditor reste en
   table (largeur = son contenu, pas la colonne de la grille .pal-cms-feature) et l'image ne peut pas
   resoudre son width:100% contre un ancetre en auto-width -> elle s'affiche a sa taille native et
   deborde, coupee par l'overflow:hidden ci-dessus. */
.pal-cms-feature-shot .image { display: block; margin: 0; min-width: 0; clear: none; text-align: initial; }
.pal-cms-feature-shot .image img { display: block; width: 100%; height: auto; max-width: none; min-width: 0; margin: 0; }
.pal-cms-feature-shot-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--surface-border); }
.pal-cms-feature-shot-two img { height: 100%; object-fit: cover; }
.pal-cms-feature-shot-two .image img { height: 100%; object-fit: cover; }

/* Cartes */
.pal-cms-card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--pal-card-radius); padding: 1.5rem; box-shadow: var(--pal-card-shadow); }
.pal-cms-card-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--pal-red) 14%, transparent); color: var(--pal-red); font-size: 1.3rem; margin-bottom: 1rem; }
.pal-cms-card h3 { margin: 0 0 .6rem; font-size: 1.1rem; color: var(--text); }
.pal-cms-card p, .pal-cms-card li { color: var(--text-muted); line-height: 1.6; }
.pal-cms-card ul { padding-left: 1.1rem; margin: 0; }
.pal-cms-card p + p { margin-top: .75rem; }
.pal-cms-info-panel { background: color-mix(in srgb, var(--pal-red) 8%, var(--surface-card)); border-color: color-mix(in srgb, var(--pal-red) 30%, var(--surface-border)); }
.pal-cms-highlight { color: var(--text); font-weight: 700; }
.pal-cms-link { color: var(--pal-red-mid); font-weight: 700; text-decoration: underline; }
.pal-cms-link:hover { color: var(--pal-red); }

/* Badges */
.pal-cms-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.pal-cms-badge { display: inline-flex; align-items: center; padding: .35rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--pal-red) 16%, transparent); color: var(--pal-red-mid); font-size: .72rem; text-transform: uppercase; font-weight: 800; }
.pal-cms-badge-muted { background: var(--surface-border); color: var(--text); }

/* Mini-bloc icône + texte (listes de petits points, ex. "à quoi sert votre don ?") */
.pal-cms-mini-item { padding: 1.1rem; border-radius: 12px; background: var(--surface-card); border: 1px solid var(--surface-border); }
.pal-cms-mini-item-icon { font-size: 1.4rem; color: var(--pal-red); margin-bottom: .6rem; }
.pal-cms-mini-item-icon svg { width: var(--pal-cms-icon-size); height: var(--pal-cms-icon-size); display: block; }
.pal-cms-mini-item strong { display: block; margin-bottom: .5rem; color: var(--text); }
.pal-cms-mini-item span { display: block; color: var(--text-muted); line-height: 1.55; font-size: .87rem; }

/* Citation */
.pal-cms-quote { border-left: 4px solid var(--pal-red); padding-left: 1.3rem; margin: 0; }
.pal-cms-quote strong { display: block; font-size: 1.3rem; line-height: 1.3; margin-bottom: .6rem; color: var(--text); }
.pal-cms-quote span { color: var(--text-muted); line-height: 1.7; }

/* Grand nombre (montant, statistique) */
.pal-cms-amount { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1; font-weight: 900; color: var(--text); margin: .5rem 0 .6rem; }
.pal-cms-amount span { color: var(--pal-red); }

/* Appel à l'action */
.pal-cms-cta { text-align: center; padding: 2.5rem 1.5rem; border-radius: 18px; background: color-mix(in srgb, var(--pal-red) 10%, var(--surface-card)); border: 1px solid var(--surface-border); }
.pal-cms-cta h2 { margin: 0 0 .8rem; color: var(--text); font-size: clamp(1.5rem, 4vw, 2.1rem); }
.pal-cms-cta p { color: var(--text-muted); max-width: 44rem; margin: 0 auto 1.5rem; line-height: 1.7; }

/* ============ Présentation : statistique en carte, liste de valeurs, timeline ============ */
.pal-cms-stat { text-align: center; }
.pal-cms-stat strong { display: block; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; color: var(--text); margin-bottom: .5rem; }
.pal-cms-stat span { color: var(--text-muted); line-height: 1.45; font-size: .9rem; }
.pal-cms-values-list { display: grid; gap: .85rem; }
.pal-cms-value-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: .85rem; padding: 1rem; border-radius: 12px; background: var(--surface-bg); border: 1px solid var(--surface-border); }
.pal-cms-value-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--pal-red) 14%, transparent); color: var(--pal-red); font-size: 1.1rem; }
.pal-cms-value-icon svg { width: var(--pal-cms-icon-size); height: var(--pal-cms-icon-size); display: block; }
.pal-cms-value-item strong { display: block; margin-bottom: .3rem; color: var(--text); }
.pal-cms-value-item span { color: var(--text-muted); line-height: 1.55; font-size: .92rem; }
.pal-cms-timeline { position: relative; display: grid; gap: 1rem; }
.pal-cms-timeline::before { content: ""; position: absolute; left: 1.1rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(180deg, var(--pal-red), transparent); }
.pal-cms-timeline-item { position: relative; padding-left: 3.4rem; }
.pal-cms-timeline-dot { position: absolute; left: .4rem; top: .2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pal-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pal-red) 18%, transparent); }
.pal-cms-timeline-card { padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--surface-border); }
.pal-cms-timeline-card strong { display: block; margin-bottom: .4rem; font-size: 1.05rem; color: var(--text); }
.pal-cms-timeline-card span { color: var(--text-muted); line-height: 1.6; }

/* ============ Équipe : cartes membres ============ */
.pal-cms-member-card { text-align: center; padding: 1.5rem 1.2rem; }
.pal-cms-member-avatar { width: 6.2rem; height: 6.2rem; margin: 0 auto 1rem; border-radius: 50%; padding: 3px; background: var(--pal-red); }
.pal-cms-member-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; border: 3px solid var(--surface-card); }
.pal-cms-member-name { display: block; margin-bottom: .6rem; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.pal-cms-member-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pal-cms-ca-card { padding: 1.2rem .9rem; }
.pal-cms-ca-card .pal-cms-member-avatar { width: 5rem; height: 5rem; margin-bottom: .85rem; }
.pal-cms-ca-card .pal-cms-member-name { font-size: .95rem; margin-bottom: .5rem; }

/* ============ Découvrir P@L : étapes en timeline, prix ============
   Verticale sous 600px (ligne a gauche), horizontale au-dela (ligne en haut) — meme seuil
   que la jauge de palier (PalGauge/.pal-ladder) : au-dessus de 5 items, une grille simple perdait
   la notion de sequence (etape 1 -> 2 -> 3...), d'ou la ligne de connexion plutot qu'une grille nue. */
.pal-cms-steps { counter-reset: pal-cms-step; position: relative; display: flex; flex-direction: column; gap: 1.4rem; }
.pal-cms-steps::before { content: ""; position: absolute; left: 1.05rem; top: .3rem; bottom: .3rem; width: 2px; background: linear-gradient(180deg, var(--pal-red), color-mix(in srgb, var(--pal-red) 15%, transparent)); }
.pal-cms-step { position: relative; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 14px; padding: 1.1rem 1.2rem 1.1rem 3.6rem; }
.pal-cms-step::before { counter-increment: pal-cms-step; content: counter(pal-cms-step); position: absolute; left: .15rem; top: 1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--pal-red); color: var(--chrome-text); border-radius: 50%; font-weight: 900; box-shadow: 0 0 0 4px var(--surface-bg); }
.pal-cms-step h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--text); }
.pal-cms-step p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.pal-cms-price { color: var(--pal-red); font-weight: 900; margin-bottom: .75rem; }

/* Evenements speciaux : meme traitement que .pal-cms-mini-item (dont l'icone est reutilisee telle
   quelle), etait jusqu'ici du texte brut (strong+span) sans fond ni icone. */
.pal-cms-special-item { padding: 1.1rem; border-radius: 12px; background: var(--surface-card); border: 1px solid var(--surface-border); }
.pal-cms-special-item strong { display: block; margin-bottom: .5rem; color: var(--text); }
.pal-cms-special-item span { display: block; color: var(--text-muted); line-height: 1.55; font-size: .87rem; }

/* seuil: --bp-tablet (600px), identique a .pal-ladder */
@media (min-width: 600px) {
    .pal-cms-steps { flex-direction: row; align-items: stretch; gap: 1rem; }
    .pal-cms-steps::before { left: 0; right: 0; top: 1.05rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--pal-red), color-mix(in srgb, var(--pal-red) 15%, transparent)); }
    .pal-cms-step { flex: 1; min-width: 0; padding: 2.7rem .9rem .9rem; text-align: center; }
    .pal-cms-step::before { left: 50%; top: 0; transform: translateX(-50%); width: 1.9rem; height: 1.9rem; font-size: .82rem; }
}

/* ============ Glossaire : nav alphabétique, fiches de définition ============ */
.pal-cms-glossaire-nav-wrap { position: sticky; top: 0; z-index: 20; background: var(--surface-bg); border-bottom: 1px solid var(--surface-border); margin-bottom: 2rem; }
.pal-cms-glossaire-nav { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; padding: 1rem 0; margin: 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pal-cms-glossaire-nav a { flex: 0 0 auto; width: 2.375rem; height: 2.375rem; display: grid; place-items: center; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 900; background: var(--surface-card); border: 1px solid var(--surface-border); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.pal-cms-glossaire-nav a:hover { background: var(--pal-red); color: var(--chrome-text); border-color: var(--pal-red); transform: translateY(-2px); }
.pal-cms-glossaire-letter { scroll-margin-top: 5.5rem; margin-bottom: 3.25rem; }
.pal-cms-glossaire-letter-title { display: flex; align-items: center; margin-bottom: 1.5rem; }
.pal-cms-glossaire-letter-title span { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 14px; background: var(--pal-red); color: var(--chrome-text); font-size: 1.75rem; font-weight: 900; }
.pal-cms-glossaire-note { margin-top: 1.1rem; padding: 1rem; border-left: 4px solid var(--pal-red); border-radius: 10px; background: color-mix(in srgb, var(--pal-red) 10%, transparent); }
.pal-cms-glossaire-note strong { display: block; color: var(--text); margin-bottom: .35rem; }
.pal-cms-glossaire-note span { color: var(--text-muted); line-height: 1.6; }

/* ============ Dotation : ligne rang + lot (News annonçant un tournoi avec classement/lots) ============ */
.pal-cms-prize-row { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .5rem 0; }
.pal-cms-prize-row + .pal-cms-prize-row { border-top: 1px dashed var(--surface-border); }
.pal-cms-prize-rank { width: 1.9rem; height: 1.9rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--pal-red); color: var(--chrome-text); font-weight: 900; font-size: .85rem; }
.pal-cms-prize-rank.second { background: color-mix(in srgb, var(--pal-red) 55%, var(--text-muted)); }
.pal-cms-prize-amount { font-weight: 800; color: var(--text); }
.pal-cms-prize-amount span { color: var(--pal-red); }
.pal-cms-prize-amount small { display: block; margin-top: .3rem; font-weight: 600; font-size: .78rem; color: var(--text-muted); }

/* ============ Ticket agenda (news mensuelle) : tournoi + stats compactes ============
   .pal-cms-ticket est un <div>, PAS un <a> : le schema CKEditor n'autorise pas un <a> a contenir
   du contenu bloc (div/h3/...) — colle tel quel dans l'editeur, il eclate le lien en le
   redistribuant sur chaque enfant, cassant la mise en page ET la couleur (la classe live/online
   se retrouve sur un <a> interne, plus un ancetre de .pal-cms-ticket-date, donc la variable ne
   cascade plus). Toute la carte reste cliquable via .stretched-link (Bootstrap, deja utilise
   ailleurs sur le site) pose sur le lien du titre — necessite position:relative ici.
   Couleur du talon via .live/.online, deja globales (app.css, posent --agenda-link-color) — memes
   classes que celles utilisees par le vrai agenda du site.
   Icones : SVG inline uniquement, jamais de <i class="bi bi-..."> — CKEditor supprime les
   elements inline sans contenu texte (une icone-police n'a rien a l'interieur, juste un
   ::before CSS), le SVG lui a un vrai contenu et survit. */
.pal-cms-ticket { position: relative; display: flex; align-items: stretch; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--pal-card-radius); box-shadow: var(--pal-card-shadow); overflow: hidden; margin-bottom: 1rem; }
.pal-cms-ticket-date { flex: none; width: 5.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .75rem .5rem; background: var(--agenda-link-color, var(--pal-red)); color: var(--chrome-text); }
.pal-cms-ticket-date .d { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.pal-cms-ticket-date .m { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }
.pal-cms-ticket-date .w { font-size: .64rem; opacity: .85; }
.pal-cms-ticket-divider { flex: none; width: 0; border-left: 2px dashed var(--surface-border); }
.pal-cms-ticket-body { flex: 1 1 auto; min-width: 0; padding: .85rem 1rem; }
.pal-cms-ticket-mode { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--agenda-link-color, var(--pal-red)); }
.pal-cms-ticket-body h3 { margin: .2rem 0 .5rem; font-size: 1rem; }
.pal-cms-ticket-title { color: var(--text); text-decoration: none; }
.pal-cms-ticket-title:hover { color: var(--pal-red); }
.pal-cms-ticket-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: .8rem; color: var(--text-muted); }
.pal-cms-ticket-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.pal-cms-ticket-stats svg { flex: none; width: 14px; height: 14px; color: var(--pal-red-mid); }
.pal-cms-ticket-arrow { flex: none; display: flex; align-items: center; padding: 0 1.1rem; color: var(--text-muted); }

/* ============ Carte vainqueur (news mensuelle, section Flashback) ============
   Une carte par tournoi du mois ecoule : photo du vainqueur, pseudo, tournoi, date, participants,
   et un lien « Lire la news » (news du tournoi) ou « News a venir » (fiche du tournoi a defaut).
   Meme mecanique que .pal-cms-ticket : un <div> (pas un <a>, cf. schema CKEditor) rendu cliquable
   par .stretched-link pose sur le lien du tournoi, d'ou position:relative. Couleur d'accent via
   .live/.online (--agenda-link-color, app.css), comme le talon du ticket agenda.
   Photo : Picture_Id du membre, sinon Avatar_Id, sinon /media/img/defaut.jpg (meme repli que
   UserAvatar.razor). Icones : SVG inline uniquement (cf. commentaire .pal-cms-ticket). */
.pal-cms-winner-card { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--pal-card-radius); box-shadow: var(--pal-card-shadow); transition: border-color .2s ease; }
.pal-cms-winner-card:hover { border-color: var(--agenda-link-color, var(--pal-red)); }
.pal-cms-winner-photo { flex: none; width: var(--pal-cms-winner-photo-size); height: var(--pal-cms-winner-photo-size); border-radius: 50%; padding: 3px; background: var(--agenda-link-color, var(--pal-red)); }
.pal-cms-winner-photo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; border: 3px solid var(--surface-card); }
.pal-cms-winner-body { flex: 1 1 auto; min-width: 0; }
.pal-cms-winner-meta { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--agenda-link-color, var(--pal-red)); }
.pal-cms-winner-name { margin: .15rem 0 .1rem; font-size: 1.15rem; font-weight: 800; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.pal-cms-winner-event { font-size: .92rem; font-weight: 700; }
.pal-cms-winner-link { color: var(--text-muted); text-decoration: none; }
.pal-cms-winner-link:hover { color: var(--pal-red); }
.pal-cms-winner-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .45rem; font-size: .8rem; color: var(--text-muted); }
.pal-cms-winner-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.pal-cms-winner-stats svg { flex: none; width: 14px; height: 14px; color: var(--pal-red-mid); }
.pal-cms-winner-trophy { flex: none; align-self: flex-start; color: color-mix(in srgb, var(--agenda-link-color, var(--pal-red)) 45%, transparent); }
.pal-cms-winner-trophy svg { width: var(--pal-cms-icon-size); height: var(--pal-cms-icon-size); display: block; }

/* ============ Podium d'un classement (news de résultats) : 2e, 1er, 3e, comme la page Archives ============
   Ordre dans le HTML : argent, or, bronze. Médaille = <svg> inline (currentColor), avatar facultatif
   (un club n'en a pas). Les lignes suivantes passent par .pal-cms-ranking, la ligne du club par
   .pal-cms-ranking-us. */
/* Alignement par le haut : 2e et 3e au même niveau, un cran sous le 1er (--pal-cms-podium-step), quelle
   que soit la longueur des pseudos (un alignement par le bas décalait le 3e dès qu'un nom passait sur 2 lignes).
   Mobile d'abord : trois colonnes souples (le 1er un peu plus large) et pseudos plus petits, pour qu'un
   pseudo de 12 lettres tienne sans être coupé au milieu ; tailles d'origine dès 600px. */
.pal-cms-podium { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; padding: .5rem 0 1.25rem; }
.pal-cms-podium-slot { flex: 1 1 0; min-width: 0; text-align: center; }
.pal-cms-podium-gold { flex-grow: 1.25; }
.pal-cms-podium-silver, .pal-cms-podium-bronze { margin-top: var(--pal-cms-podium-step); }
.pal-cms-podium-medal { display: block; width: var(--pal-cms-podium-medal-size); height: var(--pal-cms-podium-medal-size); margin: 0 auto .4rem; }
.pal-cms-podium-gold .pal-cms-podium-medal { color: var(--podium-gold); }
.pal-cms-podium-silver .pal-cms-podium-medal { color: var(--podium-silver); }
.pal-cms-podium-bronze .pal-cms-podium-medal { color: var(--podium-bronze); }
.pal-cms-podium-avatar { display: block; width: var(--pal-cms-podium-avatar-size); height: var(--pal-cms-podium-avatar-size); margin: 0 auto .5rem; border-radius: 50%; object-fit: cover; }
.pal-cms-podium-gold .pal-cms-podium-avatar { width: var(--pal-cms-podium-avatar-size-first); height: var(--pal-cms-podium-avatar-size-first); }
.pal-cms-podium-name { display: block; font-size: .8rem; font-weight: 800; color: var(--text); overflow-wrap: break-word; }
.pal-cms-podium-gold .pal-cms-podium-name { font-size: .9rem; }
.pal-cms-podium-pts { display: block; font-size: .78rem; color: var(--text-muted); }
/* Pseudo club à côté du pseudo Winamax : « (Hugs) », plus petit, sans gras, en italique. Span frère du nom
   et non <em> imbriqué : CKEditor coupe un span à classe autour d'un <em> (nom en 3 morceaux). */
.pal-cms-podium-alias { display: block; font-size: .75rem; font-style: italic; color: var(--text-muted); overflow-wrap: break-word; }
/* Lignes du classement. Mobile d'abord : grille rang | évolution | pseudo (pseudo club en dessous) | points,
   pour laisser au pseudo la place de tenir sur une ligne ; dès 600px, tout sur une ligne (flex). */
.pal-cms-ranking { display: grid; }
.pal-cms-ranking-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; padding: .55rem .4rem; border-top: 1px solid var(--surface-border); }
.pal-cms-ranking-rank { grid-column: 1; grid-row: 1 / span 2; margin-right: .5rem; flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-border); color: var(--text); font-weight: 900; font-size: .85rem; }
.pal-cms-ranking-name { grid-column: 3; grid-row: 1; align-self: end; min-width: 0; font-size: .88rem; font-weight: 700; color: var(--text); overflow-wrap: break-word; }
.pal-cms-ranking-row:not(:has(.pal-cms-ranking-alias)) .pal-cms-ranking-name { grid-row: 1 / span 2; align-self: center; }
.pal-cms-ranking-alias { grid-column: 3; grid-row: 2; align-self: start; min-width: 0; font-size: .78rem; font-style: italic; color: var(--text-muted); overflow-wrap: break-word; }
.pal-cms-ranking-pts { grid-column: 4; grid-row: 1 / span 2; margin-left: .4rem; font-size: .75rem; white-space: nowrap; color: var(--text-muted); }
.pal-cms-ranking-us { border-radius: 10px; background: color-mix(in srgb, var(--pal-red) 8%, transparent); }
.pal-cms-ranking-us .pal-cms-ranking-rank { background: var(--pal-red); color: var(--chrome-text); }
/* Évolution depuis le classement précédent (« ▲ 17 », « ▼ 2 », « = », « Nouveau ») : colonne de largeur
   fixe juste après le rang, pour que les pseudos restent alignés ; sous les points dans le podium. */
.pal-cms-ranking-evo { width: var(--pal-cms-ranking-evo-width-mobile); text-align: center; font-size: .75rem; font-weight: 800; line-height: 1.2; color: var(--text-muted); white-space: nowrap; }
.pal-cms-ranking-row .pal-cms-ranking-evo { grid-column: 2; grid-row: 1 / span 2; margin-right: .4rem; }
.pal-cms-ranking-evo-up { color: var(--pal-success); }
.pal-cms-ranking-evo-down { color: var(--pal-red); }
.pal-cms-podium-slot .pal-cms-ranking-evo { display: block; width: auto; margin-top: .3rem; }
/* seuil: --bp-tablet */
@media (min-width: 600px) {
    .pal-cms-podium { gap: .75rem; }
    .pal-cms-podium-slot { flex: 0 1 var(--pal-cms-podium-slot-width); }
    .pal-cms-podium-name { font-size: 1rem; }
    .pal-cms-podium-gold .pal-cms-podium-name { font-size: 1.1rem; }
    .pal-cms-podium-pts { font-size: .82rem; }
    .pal-cms-podium-alias { font-size: .8rem; }
    .pal-cms-ranking-row { display: flex; gap: .75rem; }
    .pal-cms-ranking-rank { margin-right: 0; }
    .pal-cms-ranking-name { flex: 0 1 auto; align-self: auto; font-size: 1rem; }
    .pal-cms-ranking-row:not(:has(.pal-cms-ranking-alias)) .pal-cms-ranking-name { align-self: auto; }
    .pal-cms-ranking-alias { flex: 0 1 auto; align-self: auto; margin-left: -.4rem; font-size: .82rem; }
    .pal-cms-ranking-pts { flex: none; margin-left: auto; font-size: .9rem; }
    .pal-cms-ranking-evo { font-size: .78rem; }
    .pal-cms-ranking-row .pal-cms-ranking-evo { flex: none; width: var(--pal-cms-ranking-evo-width); margin-right: 0; }
}
/* Pseudo en gras dans le récit d'une étape de chronologie : reste dans la phrase (seul le titre de
   l'étape, <strong> enfant direct de la carte, passe en bloc). */
.pal-cms-timeline-card span strong { display: inline; margin: 0; font-size: inherit; color: var(--text); }

/* ============ Chronologie : joueur en tête d'étape, point d'un membre non affilié au club ============
   <div class="pal-cms-timeline-item [pal-cms-timeline-ext]"> … <div class="pal-cms-timeline-card pal-cms-timeline-card-player">
   <div class="pal-cms-timeline-player"><img …><div><span class="pal-cms-timeline-player-name">…</span><span class="pal-cms-timeline-player-alias">…</span></div></div>
   <div><strong>titre</strong><span>récit</span></div></div>. Joueur au-dessus du récit sur mobile, à sa gauche dès 600px. */
.pal-cms-timeline-ext .pal-cms-timeline-dot { background: var(--pal-cms-timeline-dot-ext); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pal-cms-timeline-dot-ext) 18%, transparent); }
.pal-cms-timeline-card-player { display: flex; flex-direction: column; gap: .8rem; }
.pal-cms-timeline-player { display: flex; align-items: center; gap: .6rem; }
.pal-cms-timeline-player img { flex: none; width: var(--pal-cms-timeline-avatar-size); height: var(--pal-cms-timeline-avatar-size); border-radius: 50%; object-fit: cover; }
.pal-cms-timeline-player .pal-cms-timeline-player-name { display: block; font-weight: 800; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.pal-cms-timeline-player .pal-cms-timeline-player-alias { display: block; font-size: .8rem; font-style: italic; line-height: 1.3; color: var(--text-muted); overflow-wrap: anywhere; }
@media (min-width: 600px) {
    .pal-cms-timeline-card-player { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
    .pal-cms-timeline-player { flex: none; width: var(--pal-cms-timeline-player-width); flex-direction: column; gap: .4rem; text-align: center; }
}

/* ============ Cartes dans un récit : cœur et carreau en rouge (<span class="pal-cms-suit-red">♥</span>) ============
   Double sélecteur : passe devant « .pal-cms-timeline-card span » (texte atténué de la chronologie). */
.pal-cms-suit-red, .pal-cms-timeline-card .pal-cms-suit-red { color: var(--pal-red); }
/* CKEditor découpe le texte d'une étape : <span style="color:…"><span>♥</span></span>. Le span intérieur
   hérite de la couleur de son parent au lieu de reprendre le gris de « .pal-cms-timeline-card span ». */
.pal-cms-timeline-card span span { color: inherit; }