.page-evenements .icone { width:24px; height:24px; flex:none; }
.evenements-surtitre { font-size:14px; font-weight:600; letter-spacing:2px; color:var(--c-primaryText); margin:0 0 16px; }
/* Colonnes, écart et side : ceux du calendrier des prénoms (.calendrier, .attention). */
.evenements-corps { padding-bottom:64px; scroll-margin-top:90px; }
.evenements-agenda>h2 { font-size:36px; line-height:1.2; margin:0 0 10px; }
.evenements-intro { font-size:19px; color:var(--c-textSecondary); margin:0 0 26px; }
.evenements-filtres { padding:20px; background:var(--c-surface); border:1px solid var(--c-borderSubtle); border-radius:20px; }
.evenements-filtres label { display:flex; flex-direction:column; gap:8px; font-weight:500; font-size:15px; }
.evenements-selects { display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.evenements-selects label { flex:1; min-width:145px; }
.evenements-selects select { width:100%; min-height:48px; padding:10px; font:inherit; color:var(--c-textPrimary); background:var(--c-surface); border:1px solid var(--c-borderControl); border-radius:10px; }
.evenements-reinitialiser { min-height:48px; padding:8px 0; border:0; background:none; color:var(--c-primaryText); text-decoration:underline; cursor:pointer; font:inherit; }
.evenements-resultat { color:var(--c-textSecondary); font-size:15px; margin:20px 0; }
/* Les dates reprennent la carte du calendrier des prénoms (.jour) : mêmes
   colonnes, même bouton « Me le rappeler ». L'événement ajoute un visuel et
   une ligne de détail (lieu, période, statut). */
/* --p : le bloc du bas « Tout ce que tu ne veux plus manquer » en dépend, comme sur les pages prénoms. */
.page-evenements { --m: calc(1.2206 * var(--vu)); --p: calc(1.1343 * var(--vu)); --s: calc(1.185 * var(--vu)); }
.page-evenements .calendrier__jours { margin-top: 0; }
.jour--sans-date { grid-template-columns: minmax(0, 1fr); }
.jour__ligne--evenement { justify-content: flex-start; padding-block: var(--espace-s3); }
.jour__vignette { flex: none; }
.jour__vignette img,.evenement__initiale { display:block; width:48px; height:48px; border-radius:var(--rayon-thumbnail); object-fit:cover; }
/* L'affiche d'un film (media « poster ») se voit : 2:3, bien plus grande que la vignette carrée. */
.jour__vignette--affiche img { width:96px; height:144px; border-radius:10px; }
.jour__ligne--evenement:has(.jour__vignette--affiche) { padding-block:var(--espace-s4); }
.evenement__initiale { display:grid; place-items:center; font-size:24px; font-weight:700; color:var(--c-textPrimary); border:3px solid var(--identite-clair,var(--c-borderSubtle)); background:var(--c-field); }
.jour__texte { display:grid; flex:1; gap:2px; min-width:0; }
.jour__nom { font-size:calc(19.6 * var(--vu)); font-weight:700; line-height:1.25; }
.jour__detail { color:var(--c-textSecondary); font-size:max(15px, calc(16 * var(--vu))); line-height:1.35; }
.page-evenements .jour__rappel .icone { width:calc(16 * var(--m)); height:calc(16 * var(--m)); }
.calendrier-tete__suivre { margin-top:calc(10 * var(--m)); min-height:44px; }
/* La colonne de la page collection est plus etroite que la page competition : 4 equipes par ligne. */
.page-evenements .equipes__grille { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.evenements-sans-date { margin-top:calc(28 * var(--m)); }
.evenements-sans-date__titre { font-size:23px; line-height:1.2; }
.evenements-sans-date__texte { margin:4px 0 calc(15 * var(--m)); color:var(--c-textSecondary); font-size:16px; }
.evenement__statut { display:inline-block; font-size:13px; padding:2px 6px; background:var(--c-field); color:var(--c-textPrimary); border-radius:5px; }
.evenements-suite { display:block; margin:24px auto 0; padding:12px 24px; min-height:48px; border:1px solid var(--c-borderControl); border-radius:12px; background:var(--c-surface); color:var(--c-primaryText); font:inherit; cursor:pointer; }
.evenements-vide { padding:28px; background:var(--c-field); border-radius:16px; }
.page-evenements [hidden] { display:none; }
@media (prefers-color-scheme:dark) { .evenement__initiale { border-color:var(--identite-sombre,var(--identite-clair,var(--c-borderSubtle))); } }
@media(max-width:900px) { .page-evenements { --m: calc((100vw - 40px) / 934); } .page-evenements .equipes__grille { grid-template-columns:repeat(3, minmax(0, 1fr)); } .jour__nom { font-size:18px; } }
@media(max-width:560px) { .evenements-agenda>h2 { font-size:30px; } .page-evenements .equipes__grille { grid-template-columns:repeat(2, minmax(0, 1fr)); } .evenements-filtres { padding:16px; } .page-evenements { --m: calc((100vw - 32px) / 934); } .jour__vignette { display:none; } .jour__vignette--affiche { display:block; } .jour__vignette--affiche img { width:72px; height:108px; } .page-evenements .jour__rappel .icone { width:20px; height:20px; } .jour__nom { font-size:17px; } .jour__detail { font-size:15px; } }

/* Le nom d'une ligne ouvre sa fiche, comme un prénom du calendrier. */
.jour__lien { display:inline-flex; align-items:center; gap:6px; color:var(--c-primaryText); text-decoration:none; }
.jour__lien:hover { text-decoration:underline; text-underline-offset:3px; }
.page-evenements .jour__lien .icone { width:14px; height:14px; color:var(--c-textPrimary); }

/* La fiche d'une entité : le gabarit de la fiche prénom, le visuel du catalogue à la place de la lettre. */
.page-fiche { --s: calc(1.185 * var(--vu)); }
.fiche__visuel { display:flex; align-items:center; justify-content:center; }
.fiche__affiche { width:auto; height:calc(402 * var(--p)); aspect-ratio:2 / 3; object-fit:cover; border-radius:calc(18 * var(--p)); box-shadow:0 18px 40px -18px color-mix(in srgb, var(--marque-ink) 55%, transparent); }
.fiche__carre { width:90%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:calc(28 * var(--p)); }
.fiche__identite { width:80%; height:auto; aspect-ratio:1; border-radius:calc(40 * var(--p)); }
.fiche__identite .identite__icone { width:55%; height:55%; }
.fiche__identite .identite__lettre { font-size:calc(160 * var(--p)); }
.fiche-matchs { margin-top:calc(34 * var(--vu)); }
/* Les dates d'une fiche : les cartes par jour de la collection, à la même échelle (--m). */
.fiche-dates { --m: calc(1.2206 * var(--vu)); }
@media(max-width:900px) { .fiche-dates { --m: calc((100vw - 40px) / 934); } }
@media(max-width:560px) { .fiche-dates { --m: calc((100vw - 32px) / 934); } }

/* La page d'une discipline moto (12-10-2026, maquette « Motocross dans l'app ») : onglets, courses, ligues. */
.moto-onglets { display:flex; gap:4px; padding:4px; background:var(--c-field); border-radius:14px; margin-bottom:16px; }
.moto-onglet { flex:1; min-height:44px; border:0; border-radius:10px; background:none; font:inherit; font-size:17px; font-weight:700; color:var(--c-textSecondary); cursor:pointer; }
.moto-onglet[aria-selected='true'] { background:var(--c-surface); color:var(--c-textPrimary); box-shadow:0 1px 2px color-mix(in srgb, var(--c-textPrimary) 12%, transparent); }
.moto-onglet:focus-visible, .moto-course summary:focus-visible, .moto-groupe summary:focus-visible { outline:2px solid var(--c-primaryText); outline-offset:2px; }
.moto-tri { margin-top:0; margin-bottom:12px; align-items:center; }
.moto-tri__libelle { font-weight:600; color:var(--c-textSecondary); }
.moto-tri .pastille .icone { width:18px; height:18px; }
.moto-tri__aide { color:var(--c-textSecondary); font-size:15px; margin:0 0 12px; }
.moto-courses, .moto-lignes { list-style:none; margin:0; padding:0; background:var(--c-surface); border:1px solid var(--c-borderSubtle); border-radius:16px; overflow:hidden; }
.moto-course + .moto-course, .moto-ligne + .moto-ligne { border-top:1px solid var(--c-borderSubtle); }
.moto-course summary { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; cursor:pointer; list-style:none; }
.moto-course summary::-webkit-details-marker { display:none; }
.moto-course summary > .icone { width:18px; height:18px; margin-top:4px; color:var(--c-textSecondary); transition:transform .15s; }
.moto-course details[open] summary > .icone { transform:rotate(90deg); }
.moto-tuile { display:grid; justify-items:center; width:52px; flex:none; font-size:12px; font-weight:600; color:var(--c-textSecondary); line-height:1.3; }
.moto-tuile b { font-size:22px; line-height:1.15; color:var(--c-textPrimary); }
.moto-course__texte { display:grid; gap:2px; flex:1; min-width:0; }
.moto-course__titre { font-size:18px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.moto-course__meta { color:var(--c-textSecondary); font-size:15px; }
.moto-types { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.moto-types span { font-size:14px; line-height:1.3; padding:2px 8px; border-radius:8px; background:var(--c-field); color:var(--c-textSecondary); }
.moto-types b { color:var(--c-textPrimary); font-weight:600; }
.moto-course__details { padding:0 16px 16px 82px; }
.moto-infos { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px; }
.moto-infos li { display:flex; gap:10px; align-items:flex-start; }
.moto-infos .icone { width:20px; height:20px; color:var(--c-textSecondary); }
.moto-course__sous-titre { margin:12px 0 6px; }
.moto-course__liste { margin:0; padding-left:18px; }
.moto-lien { color:var(--c-primaryText); }
.moto-ligne { display:grid; gap:6px; padding:14px 16px; }
.moto-ligne__nom { font-size:18px; font-weight:700; }
.moto-site { display:inline-flex; align-items:center; gap:8px; color:var(--c-primaryText); font-weight:600; }
.moto-site .icone { width:18px; height:18px; }
.moto-groupe { margin-bottom:12px; }
.moto-groupe > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:56px; padding:0 16px; font-size:19px; font-weight:700; background:var(--c-surface); border:1px solid var(--c-borderSubtle); border-radius:16px; cursor:pointer; }
.moto-groupe > summary span { font-size:15px; font-weight:500; color:var(--c-textSecondary); }
.moto-groupe[open] > summary { margin-bottom:10px; }
.moto-section { margin:14px 0 8px; }
@media(max-width:560px) { .moto-course__details { padding-left:16px; } .moto-tuile { width:44px; } .moto-course__titre { font-size:17px; } }

/* Le niveau d'une catégorie qui a des sous catégories (13-10-2026) : ses cartes, puis le calendrier par jour. */
.niveau-jour { margin-bottom:16px; }
.niveau-jour__titre { margin:0 0 8px; font-size:18px; font-weight:700; }
.niveau-date > a, .niveau-date > div { display:flex; align-items:center; gap:14px; padding:12px 16px; color:inherit; text-decoration:none; }
.niveau-date > a:hover .moto-course__titre { text-decoration:underline; }
.niveau-date > a:focus-visible { outline:2px solid var(--c-primaryText); outline-offset:-2px; }
.niveau-date + .niveau-date { border-top:1px solid var(--c-borderSubtle); }
.niveau-date__heure { flex:none; padding:2px 8px; border-radius:8px; background:var(--c-field); font-weight:600; font-size:15px; }