/* AC Aiacciu · maquette V1 ter
   Noir profond et craie, rouge du club réservé aux gestes forts ; Anton pour les titres, Archivo pour le texte,
   Instrument Serif italique pour les accents corses. Grille de 1320 px, gouttière fluide. */
:root {
  --noir: #0B0B0C;
  --noir-carte: #151516;
  --noir-ligne: #1E1E1E;
  --noir-ligne-2: #222;
  --noir-bord: #3A3A3A;
  /* Fond clair et gris neutres (sans teinte beige, demandé le 16/10) ; le blanc pur reste réservé aux cartes posées dessus */
  --craie: #F6F6F6;
  --craie-ligne: #DEDEDE;
  --craie-chaude: #E8E8E8;
  --gris-clair: #C8C8C8;
  --gris: #A6A6A6;
  --gris-moyen: #8A8A8A;
  --gris-fonce: #5C5C5C;
  --brun: #3D3D3D;
  --pointille: #B6B6B6;
  /* Rouge du logo, relevé sur l'écusson : aplats, boutons (texte blanc 4,6:1), grands titres, filets, icônes */
  --rouge: #E3272C;
  /* Même teinte, pour les petits textes rouges : un peu plus profonde sur fond clair (4,6:1 sur la craie),
     un peu plus claire sur fond noir (4,9:1) */
  --rouge-texte: #D91C21;
  --rouge-sur-noir: #EB3B40;
  /* Petit trait séparatif aux couleurs du club : moitié blanche puis moitié rouge. Réservé aux fonds sombres
     (sur la craie, la moitié blanche disparaîtrait) */
  --trait-sombre: linear-gradient(90deg, var(--blanc) 0 50%, var(--rouge) 50% 100%);
  --blanc: #FFFFFF;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--noir); color: var(--craie); font-family: var(--body); font-size: 16px; line-height: 1.5; overflow-x: hidden }
img { max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
a:hover { opacity: .85 }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px }
h1, h2, h3 { margin: 0 }
p { margin: 0 }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--craie); color: var(--noir); font-weight: 700; border-radius: 999px }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter) }
.disp { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .92 }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0 }
.kicker { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.accent { color: var(--rouge) }
.kicker.accent { color: var(--rouge-texte) }
:is(.hero, .page-tete, .section--noir, .duo__storia, .butteca, .storia-palmares, .storia-tuile, .pied, .retro, .video) .kicker.accent { color: var(--rouge-sur-noir) }
.card-img { transition: transform .5s ease }
.card:hover .card-img { transform: scale(1.04) }
.card:hover { opacity: 1 }
@media (max-width: 720px) { .hide-sm { display: none !important } }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.2 }
.btn svg { width: 18px; height: 18px; flex: none }
.btn--rouge { background: var(--rouge); color: var(--blanc) }
.btn--ligne { border: 1px solid var(--noir-bord) }
.btn--craie { background: var(--craie); color: var(--noir) }
.btn--petit { padding: 14px 22px; font-size: 14px }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px }
.lien-fleche svg { width: 18px; height: 18px; color: var(--rouge) } /* la flèche des liens est toujours rouge */
.lien-souligne { font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px }

/* Barre utilitaire */
.utilitaire { border-bottom: 1px solid var(--noir-ligne-2); background: var(--noir) }
.utilitaire .wrap { padding-block: 10px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--gris) }
.utilitaire__devise { display: flex; gap: 20px; align-items: center }
.utilitaire__devise .serif { font-size: 17px; color: var(--craie) }
.utilitaire__sep { color: #555 }
.utilitaire__reseaux { display: flex; gap: 6px; align-items: center }
.utilitaire__reseaux a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gris) }
.utilitaire__reseaux a:hover, .utilitaire__reseaux a:focus-visible { color: var(--blanc); background: var(--rouge); opacity: 1 }
.utilitaire__reseaux svg { width: 15px; height: 15px; fill: currentColor }
.utilitaire__reseaux a { transition: background-color .15s, color .15s }

/* En-tête */
.entete { position: relative; z-index: 3; background: var(--noir) }
.entete .wrap { padding-block: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap }
.marque { display: flex; align-items: center }
.marque img { height: 80px; width: auto; display: block }
.nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.4vw, 36px); align-items: center; flex-wrap: wrap; font-size: 17px; font-weight: 600 }
/* Sous-menus déroulants : panneau noir, filet rouge, ouverts au survol et au clavier */
.nav-principale li { position: relative }
.nav-principale .menu-item-has-children > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6 }
.nav-principale .sub-menu { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; left: -18px; z-index: 20; min-width: 230px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--noir-carte); border-top: 3px solid var(--rouge); border-radius: 0 0 4px 4px; box-shadow: 0 18px 40px rgba(0,0,0,.45); font-size: 15px; font-weight: 600; opacity: 0; visibility: hidden; transform: translateY(6px) }
.nav-principale .sub-menu a { display: block; padding: 11px 18px; color: var(--gris-clair) }
.nav-principale .sub-menu a:hover, .nav-principale .sub-menu a:focus-visible { color: var(--craie); background: rgba(255,255,255,.04); opacity: 1 }
.nav-principale .menu-item-has-children::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px } /* passage de la souris jusqu'au panneau */
.nav-principale .menu-item-has-children:hover > .sub-menu, .nav-principale .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none }
.nav-principale .sub-menu { transition: opacity .15s ease, transform .15s ease, visibility .15s }
.nav-principale .current-menu-item > a, .nav-principale .current-menu-ancestor > a, .nav-principale .current_page_parent > a { color: var(--rouge-sur-noir) }
.btn-butteca { padding: 14px 24px; border-radius: 999px; background: var(--rouge); color: var(--blanc); font-weight: 700; font-size: 15px }

/* Fonds clairs : halos de lumière (proposition 7) ; aucun motif, seulement des aplats flous : plus clair derrière le
   texte, un peu plus soutenu dans les angles, deux touches de rouge très pâle. Deux sections claires qui se suivent
   sont regroupées dans un .fond-clair : un seul fond pour les deux, pas de raccord visible à la jointure. */
:is(.page-corps, .section--craie, .matchs, .storia-etapes, .storia-rubriques, .orga-bloc:not(.orga-bloc--noir), .fond-clair) {
  color: var(--noir);
  background-color: #F3F3F3;
  background-image:
    radial-gradient(700px 520px at 22% 40%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(520px 420px at 96% 6%, rgba(227, 39, 44, .07), transparent 70%),
    radial-gradient(640px 460px at 82% 30%, rgba(11, 11, 12, .045), transparent 72%),
    radial-gradient(560px 420px at 4% 104%, rgba(11, 11, 12, .05), transparent 72%),
    radial-gradient(420px 300px at 62% 108%, rgba(227, 39, 44, .045), transparent 70%);
}
/* Dans un .fond-clair, les sections n'ont plus leur propre fond */
.fond-clair :is(.section--craie, .matchs, .storia-etapes, .storia-rubriques) { background: none }
/* Menu mobile */
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--noir-bord); background: transparent; color: var(--craie); cursor: pointer; align-items: center; justify-content: center }
.burger svg { width: 22px; height: 22px }
.entete__actions { display: flex; gap: 10px; align-items: center }
@media (max-width: 1080px) {
  .marque img { height: 64px }
  .burger { display: inline-flex }
  .nav-principale { display: none; flex-basis: 100%; order: 3; border-top: 1px solid var(--noir-ligne-2); padding-top: 8px }
  .nav-principale.est-ouvert { display: block }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; font-size: 20px }
  .nav-principale li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--noir-ligne) }
  /* Mobile : sous-rubriques affichées en retrait sous leur rubrique */
  .nav-principale .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; font-size: 16px }
  .nav-principale .sub-menu a { padding: 10px 0; border-bottom: 0; color: var(--gris) }
  .nav-principale .menu-item-has-children > a::after, .nav-principale .menu-item-has-children::before { display: none }
}
@media (max-width: 480px) {
  .btn-butteca { padding: 12px 18px; font-size: 14px }
}

/* Hero */
.hero { position: relative; background: var(--noir); border-bottom: 1px solid var(--noir-ligne) }
.hero__trame { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px); pointer-events: none }
.hero .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; min-height: 720px }
.hero__texte { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 72px 64px; position: relative; z-index: 2 }
.hero__saison { display: flex; align-items: center; gap: 12px }
.hero__saison::before { content: ""; width: 48px; height: 3px; background: var(--trait-sombre); display: block }
.hero__saison span { color: var(--gris) }
.hero h1 { font-size: clamp(64px, 9.5vw, 148px) }
.hero h1 .serif { display: block; font-size: .62em; line-height: 1; margin-top: .06em; color: var(--craie) }
.hero__intro { max-width: 460px; font-size: 18px; line-height: 1.55; color: var(--gris-clair) }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap }
.hero__visuel { flex: 1 1 460px; min-width: 0; position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 520px }
.hero__annee { position: absolute; right: -10px; top: 40px; font-size: clamp(160px, 22vw, 320px); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); line-height: .8; pointer-events: none }
.hero__fondu { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(0deg, var(--noir) 0%, rgba(11,11,12,0) 100%); pointer-events: none }

/* Rétrospective (reprise de la maquette, rythme film : flashs, accélérations, ralenti sur 2022) */
.retro { position: relative; width: 100%; max-width: 600px; height: 680px; overflow: hidden; background: var(--noir) }
.retro img { width: 100%; height: 100%; object-fit: cover; display: block }
.retro__flash { background: var(--blanc) }
.retro__fin { background: var(--noir); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px }
.retro__fin .serif { font-size: 46px; line-height: 1.05 }
.retro__barre { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.18) }
.retro__barre div { height: 100%; background: var(--rouge) }
.retro__legendes { position: absolute; left: 0; right: 0; bottom: 40px; height: 110px; pointer-events: none }
.retro__legendes .rt-layer { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px }
.retro__legendes .disp { font-size: 56px }
.retro__legendes span:last-child { font-size: 16px; font-weight: 600; color: var(--craie-chaude) }
@media (max-width: 720px) {
  .hero .wrap { min-height: 0 }
  .hero__texte { padding-block: 48px 32px }
  .hero__visuel { min-height: 0 }
  .retro { height: auto; aspect-ratio: 600 / 680 }
  .retro__legendes { bottom: 24px }
  .retro__legendes .disp { font-size: 44px }
}

/* Match center : prochain scontru dans une carte rouge (décor de terrain), dernier scontru dessous, extrait du classement à droite */
.matchs { background: var(--craie); color: var(--noir) }
/* Même partage que le hero (texte 520, visuel 460) : le classement démarre à l'aplomb de la rétrospective */
.matchs__grille { position: relative; padding-block: 56px 56px; display: flex; align-items: stretch }
/* Filets noirs épais, comme au-dessus de la liste des actualités : un horizontal sous le bloc, un vertical entre les deux
   colonnes, qui s'arrête à la hauteur du bas des cartes */
.matchs__grille::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 2px; background: var(--noir) }
.mc-classement { position: relative }
.mc-classement::before { content: ""; position: absolute; left: -36px; top: 0; bottom: 0; width: 2px; background: var(--noir) } /* s'arrête au bas des colonnes, sans toucher le filet horizontal */
.mc-col { flex: 1 1 520px; min-width: 0; padding-right: 72px; display: flex; flex-direction: column; gap: 30px }
.mc-tete { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap } /* centré, pas sur la ligne de base : la compétition s'aligne à l'œil sur le titre en capitales */
.mc-titre { font-size: 22px }
.mc-compet { font-size: 14px; color: var(--gris-fonce) }
.mc-compet strong { color: var(--noir); font-weight: 700 }
.mc-rencontre { display: grid; grid-template-columns: minmax(0, 1fr) 44px 150px 44px minmax(0, 1fr); align-items: center; gap: 14px }
.mc-rencontre img, .mc-rencontre .mc-logo-vide { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 6px }
.mc-logo-vide { display: block; width: 26px; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--pointille); flex: none }
.mc-nom { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--brun); overflow-wrap: anywhere }
.mc-nom--g { text-align: right }
.mc-nom.est-nous { font-weight: 800; color: var(--noir) }
.mc-centre { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center }
.mc-quand { font-size: 11px; color: var(--gris-fonce) }
.mc-score { font-size: 42px; white-space: nowrap }
.mc-score__sep { color: var(--rouge) }
.mc-tab { font-size: 12px; color: var(--gris-fonce) }
.mc-lien { align-self: flex-end; font-size: 14px }
.mc-lien svg { color: var(--rouge) }
.mc-lien:hover { opacity: 1 }
.mc-lien svg { transition: transform .15s ease } .mc-lien:hover svg { transform: translateX(4px) }

/* La carte : aplat rouge à angles vifs comme le reste du site, lignes du terrain en filigrane, le rond central au centre exact de la carte */
.mc-carte { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 26px 32px 32px; background: var(--rouge); color: var(--blanc) }
.mc-carte > :not(svg) { position: relative }
.mc-carte__terrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5 }
.mc-rond { r: 82px }
.mc-carte .mc-compet, .mc-carte .mc-quand { color: rgba(255, 255, 255, .85) }
.mc-carte .mc-compet strong { color: var(--blanc) }
.mc-carte .mc-rencontre { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); grid-template-areas: "lg c ld" "ng c nd"; gap: 12px 16px; justify-items: center }
/* Chaque équipe : logo au-dessus du nom, la date au centre entre les deux */
.mc-carte .mc-rencontre > :nth-child(1) { grid-area: ng; align-self: start }
.mc-carte .mc-rencontre > :nth-child(2) { grid-area: lg; width: 56px; align-self: end }
.mc-carte .mc-rencontre > :nth-child(3) { grid-area: c }
.mc-carte .mc-rencontre > :nth-child(4) { grid-area: ld; width: 56px; align-self: end }
.mc-carte .mc-rencontre > :nth-child(5) { grid-area: nd; align-self: start }
.mc-carte .mc-nom { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: 26px; line-height: 1; text-align: center; color: var(--blanc) }
.mc-carte .mc-logo-vide { border-color: rgba(255, 255, 255, .5) }
.mc-carte .mc-centre { gap: 4px }
/* La date est posée au centre exact de la carte, dans le rond central ; les équipes l'encadrent */
.mc-carte .mc-rencontre { position: static; margin-block: auto }
.mc-carte .mc-rencontre > * { position: relative }
.mc-carte .mc-rencontre > .mc-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 7px)) } /* 7 px plus bas : centrage à l'œil, le petit jour en surtitre allège le haut du bloc */
.mc-jour { font-size: 40px; white-space: nowrap }
.mc-heure { font-size: 24px; line-height: 1.1 }

/* Extrait du classement, notre ligne en rouge */
.mc-classement { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 4px }
.mc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px }
.mc-table th { padding: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-fonce); text-align: right }
.mc-table td { height: 50px; padding: 0; border-top: 1px solid var(--craie-ligne); text-align: right }
.mc-table .c-rang { width: 56px; padding-left: 14px; text-align: left }
.mc-table td.c-rang, .mc-table td.c-pts { font-size: 20px }
.mc-table .c-club { text-align: left }
.mc-table .c-pts { width: 64px }
.mc-table .c-j { width: 48px }
.mc-table .c-diff { width: 78px; padding-right: 14px }
.mc-club { display: flex; align-items: center; gap: 12px; font-weight: 500 }
.mc-club img { width: 26px; height: 26px; object-fit: contain; flex: none; border-radius: 6px }
.mc-table tr.est-nous td { background: var(--noir); color: var(--blanc); border-top-color: var(--noir) } /* noir : répond à la carte rouge du prochain scontru */
.mc-table tr.est-nous .mc-club { font-weight: 800 }
.mc-table tr.est-nous + tr td { border-top-color: transparent }
.mc-classement .mc-lien { margin-top: auto }

@media (max-width: 1100px) {
  .matchs__grille { flex-direction: column; gap: 40px }
  .mc-classement::before { display: none }
  .mc-col { flex: none; padding-right: 0 }
  .mc-classement { flex: none }
  .mc-classement { padding-top: 32px; border-top: 1px solid var(--craie-ligne) }
}
@media (max-width: 640px) {
  .matchs__grille { padding-block: 32px 40px; gap: 30px }
  .mc-col { gap: 26px }
  .mc-titre { font-size: 20px }
  .mc-compet { font-size: 12px }
  .mc-rencontre { grid-template-columns: minmax(0, 1fr) 34px 84px 34px minmax(0, 1fr); gap: 8px }
  .mc-nom { font-size: 14px }
  .mc-quand { font-size: 10px; letter-spacing: .12em }
  .mc-score { font-size: 32px }
  .mc-carte { padding: 22px 18px 26px; gap: 18px }
  /* Comme sur grand écran : la date au centre de la carte, les deux équipes de part et d'autre */
  .mc-carte { min-height: 250px }
  .mc-rond { r: 58px }
  .mc-carte .mc-rencontre { grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); gap: 10px 6px; padding-top: 12px }
  .mc-carte .mc-rencontre > :nth-child(2), .mc-carte .mc-rencontre > :nth-child(4) { width: 44px }
  .mc-carte .mc-nom { font-size: 18px }
  .mc-carte .mc-quand { font-size: 9px }
  .mc-jour { font-size: 32px }
  .mc-heure { font-size: 20px }
  .mc-table { font-size: 14px }
  .mc-table td { height: 44px }
  .mc-table .c-rang { width: 42px; padding-left: 10px }
  .mc-table td.c-rang, .mc-table td.c-pts { font-size: 18px }
  .mc-table .c-pts { width: 44px }
  .mc-table .c-j { width: 34px; padding-right: 10px }
  .mc-table .c-diff, .mc-saison { display: none }
  .mc-club { gap: 10px; min-width: 0 }
  .mc-club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .mc-club img { width: 22px; height: 22px }
}

/* Sections communes */
.section { padding-block: 96px }
.section--craie { background: var(--craie); color: var(--noir) }
.section--noir { background: var(--noir) }
.section--filet { border-top: 1px solid var(--noir-ligne) }
.section .wrap { display: flex; flex-direction: column; gap: 48px }
.section__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap }
.section__titre { font-size: clamp(48px, 6vw, 88px) }
.section__titre .serif { font-size: .55em }
.section__titre-bloc { display: flex; flex-direction: column; gap: 16px }
@media (max-width: 720px) { .section { padding-block: 64px } .section .wrap { gap: 36px } }

/* L'attualità */
.actus__grille { display: flex; flex-wrap: wrap; gap: 32px }
.actu-une { flex: 1.6 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.actu-media { overflow: hidden; border-radius: 4px; background: var(--craie-ligne) }
.actu-media img { width: 100%; height: 100%; object-fit: cover; display: block }
.actu-une .actu-media { aspect-ratio: 16 / 10 }
.actu-meta { display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--gris-fonce) }
.actu-une h3 { font-size: clamp(34px, 3.6vw, 52px); line-height: .98 }
.actu-une p { font-size: 17px; line-height: 1.6; color: var(--brun); max-width: 640px }
.actus__cote { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 32px }
.actu-petite { display: flex; flex-direction: column; gap: 14px }
.actu-petite .actu-media { aspect-ratio: 16 / 9 }
.actu-petite .actu-meta { font-size: 13px }
.actu-petite h3 { font-size: 28px; line-height: 1 }
.actus__liste { display: flex; flex-wrap: wrap; border-top: 2px solid var(--noir) }
.actus__liste a { flex: 1 1 280px; min-width: 0; padding: 22px 24px 8px 0; display: flex; flex-direction: column; gap: 8px }
.actus__liste time { font-size: 13px; color: var(--gris-fonce) }
.actus__liste span { font-size: 19px; font-weight: 700; line-height: 1.3 }
@media (max-width: 560px) { .actu-une { flex-basis: 100% } .actus__cote { flex-basis: 100% } }

/* A squadra : mosaïque de tout le groupe, photos collées, en noir et blanc, la photo survolée reprend ses couleurs */
.squadra { padding-bottom: 0 } /* la mosaïque est posée sur le bas du bloc noir */
.mosaique { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); background: #111; border-radius: 4px 4px 0 0; overflow: hidden; position: relative }
@media (max-width: 700px) { .mosaique { grid-template-columns: repeat(6, minmax(0, 1fr)) } }
.mosaique__case { aspect-ratio: 4 / 5; overflow: hidden; position: relative }
.mosaique__case img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block;
  filter: grayscale(1) contrast(1.06) brightness(.82); transition: filter .35s ease, transform .5s ease }
.mosaique:hover .mosaique__case img { filter: grayscale(1) contrast(1.06) brightness(.55) }
.mosaique .mosaique__case:hover img, .mosaique__case:focus-visible img, .mosaique .mosaique__case.est-allume img { filter: none; transform: scale(1.04) }
/* La lueur (main.js) : un halo doux qui suit le joueur allumé, puis la souris */
.mosaique::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen;
  background: radial-gradient(circle 190px at var(--lx, -999px) var(--ly, -999px), rgba(255,255,255,.2), rgba(255,255,255,.06) 50%, transparent 75%) }
.mosaique.a-lueur::after { opacity: 1 }
.mosaique__appel { background: var(--rouge); color: var(--blanc); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px }
.mosaique__appel .disp { font-size: clamp(14px, 1.4vw, 20px); line-height: 1 }
.mosaique__appel svg { width: 18px; height: 18px; color: var(--blanc); transition: transform .2s ease }
.mosaique:hover .mosaique__appel svg { transform: translateX(4px) }
@media (max-width: 700px) { .mosaique__appel { padding: 6px; gap: 4px } .mosaique__appel .disp { font-size: 12px } .mosaique__appel svg { width: 14px; height: 14px } }
.joueurs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1100px) { .joueurs { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.joueur { display: flex; flex-direction: column; background: var(--noir-carte); border-radius: 4px; overflow: hidden }
.joueur__photo { overflow: hidden; aspect-ratio: 4 / 5; background: #111 }
.joueur__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block }
.joueur__texte { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--rouge) }
.joueur__prenom { font-size: 13px; color: var(--gris) }
.joueur__nom { font-size: 26px }
.joueur__poste { font-size: 10px; color: var(--gris) }
@media (max-width: 640px) { .joueurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } .joueur__nom { font-size: 21px } }

/* À l'Orsu TV */
.video .wrap { flex-direction: row; flex-wrap: wrap; align-items: center }
.video__texte { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.video__texte p { font-size: 17px; line-height: 1.6; color: var(--gris-clair); max-width: 420px }
.video__texte .btn { align-self: flex-start }
.video__ecran { flex: 2 1 520px; min-width: 0; position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--noir-carte); display: flex; align-items: center; justify-content: center }
.video__ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.video__ecran::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,12,.85) 0%, rgba(11,11,12,.1) 55%) }
.video__trame { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px) }
.video__play { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; background: var(--rouge); display: flex; align-items: center; justify-content: center }
.video__play svg { width: 34px; height: 34px; fill: var(--blanc) }
.video__titre { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; font-size: 15px; font-weight: 600 }
@media (max-width: 560px) { .video__play { width: 68px; height: 68px } .video__titre { left: 16px; bottom: 14px; font-size: 14px } }
/* Lecteur par-dessus la page (main.js) */
.lecteur { width: min(1120px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: none; padding: 0; border: 0; background: none; overflow: visible }
.lecteur::backdrop { background: rgba(11, 11, 12, .9) }
.lecteur__cadre { aspect-ratio: 16 / 9; max-height: calc(100vh - 140px); margin-inline: auto; background: #000; border-radius: 4px; overflow: hidden }
.lecteur__cadre iframe { display: block; width: 100%; height: 100%; border: 0 }
.lecteur__fermer { position: absolute; right: 0; bottom: calc(100% + 14px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: none; color: var(--blanc); cursor: pointer; display: flex; align-items: center; justify-content: center }
.lecteur__fermer:hover { background: var(--rouge); border-color: var(--rouge) }
.lecteur__fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round }
html:has(.lecteur[open]) { overflow: hidden }

/* Club & Scola di ballò */
.duo .wrap { flex-direction: row; flex-wrap: wrap; gap: 32px }
.duo__carte { flex: 1 1 420px; min-width: 0; border-radius: 4px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 380px; position: relative; overflow: hidden }
.duo__carte h2 { font-size: clamp(40px, 4.4vw, 64px) }
.duo__carte p { font-size: 16px; line-height: 1.6; max-width: 420px }
.duo__carte .lien { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px }
.duo__corps { display: flex; flex-direction: column; gap: 16px; position: relative }
.duo__storia { background: var(--noir); color: var(--craie) }
.duo__storia p { color: var(--gris-clair) }
.duo__storia .serif { font-size: .7em }
.duo__1910 { position: absolute; right: -16px; bottom: -40px; font-size: 260px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); pointer-events: none }
.duo__scola { background: var(--rouge); color: var(--blanc) }
/* Photo des espoirs en fond, fondue dans le rouge du côté du texte */
.duo__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; pointer-events: none }
.duo__scola::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--rouge) 18%, rgba(227,39,44,.82) 46%, rgba(227,39,44,.25) 100%), linear-gradient(0deg, rgba(227,39,44,.7), transparent 55%) }
.duo__scola > .kicker, .duo__scola > .duo__corps { position: relative; z-index: 2 }
@media (max-width: 560px) { .duo__carte { padding: 32px 24px; min-height: 320px; gap: 40px } }

/* Butteca */
.butteca { background: var(--noir); border-top: 1px solid var(--noir-ligne); position: relative; overflow: hidden }
.butteca .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 32px }
.butteca__texte { flex: 1 1 440px; min-width: 0; padding-block: 88px; display: flex; flex-direction: column; gap: 22px }
.butteca__texte h2 { font-size: clamp(56px, 8vw, 120px) }
.butteca__texte p { font-size: 17px; line-height: 1.6; color: var(--gris-clair); max-width: 420px }
.butteca__texte .btn { align-self: flex-start }
/* La photo du maillot (médiathèque A13230-01, article « Boutique fermée ce lundi 2 septembre », 2024) */
/* Recadrée en vertical sur le maillot ; elle occupe toute la hauteur de la section, du haut jusqu'en bas */
.butteca .wrap { align-items: stretch }
.butteca__visuel { display: block; flex: 0 1 480px; min-width: 0; align-self: stretch; position: relative; min-height: 460px }
.butteca__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block }
/* Reflet : de temps en temps, un rayon de lumière passe en diagonale sur le maillot, comme sur un bel objet */
.butteca__visuel { overflow: hidden }
.butteca__visuel::after { content: ""; position: absolute; inset: -10% -60%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 41%, rgba(255, 255, 255, .1) 45.5%, rgba(255, 255, 255, .46) 50%, rgba(255, 255, 255, .1) 54.5%, transparent 59%);
  transform: translateX(-35%); animation: aca-reflet 8s cubic-bezier(.45, 0, .3, 1) 1.5s infinite }
@keyframes aca-reflet { 0% { transform: translateX(-35%) } 26%, 100% { transform: translateX(35%) } }
@media (max-width: 720px) {
  .butteca__texte { padding-block: 64px 8px }
  .butteca__visuel { flex: 1 1 100%; min-height: 0; aspect-ratio: 5 / 6; margin-inline: calc(-1 * var(--gutter)) }
}

/* Partenaires */
.partenaires .wrap { gap: 40px }
.partenaires h2 { font-size: clamp(40px, 5vw, 64px) }
.partenaires__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--craie-ligne); border-left: 1px solid var(--craie-ligne) }
.partenaires__grille > * { height: 120px; display: flex; align-items: center; justify-content: center; padding: 20px; border-right: 1px solid var(--craie-ligne); border-bottom: 1px solid var(--craie-ligne) }
.partenaires__grille img { max-height: 72px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s }
.partenaires__grille a:hover img { filter: none; opacity: 1 }
.partenaires__nom { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-moyen); text-align: center }
@media (max-width: 480px) { .partenaires__grille { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Pied de page : la marque et les réseaux à gauche ; à droite, les rubriques du menu principal et leurs sous-rubriques */
/* Bandeau des partenaires : bande blanc pur (le club est rouge et blanc), plus blanche que les fonds clairs des pages,
   logos en noir quelles que soient leurs couleurs, puis le filet rouge du pied de page */
.bandeau-part { background: #fff }
.bandeau-part .wrap { padding-block: 68px 64px }
.bandeau-part__liste a { display: block }
.bandeau-part__liste a:hover { opacity: 1 } /* pas de voile au survol des liens : le rouge reste plein */
.bandeau-part__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 40px } /* 40 px : sept logos tiennent sur une ligne */
.bandeau-part__logo { display: block; height: var(--h, 44px); aspect-ratio: var(--r, 2); background: var(--noir); transition: background-color .2s ease;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat }
.bandeau-part__liste a:hover .bandeau-part__logo, .bandeau-part__liste a:focus-visible .bandeau-part__logo { background: var(--rouge) }
@media (max-width: 640px) { .bandeau-part .wrap { padding-block: 44px 40px } .bandeau-part__liste { gap: 22px 36px } .bandeau-part__logo { height: calc(var(--h, 44px) * .72) } }
.pied { background: var(--noir); border-top: 4px solid var(--rouge) }
.pied .wrap { padding-block: 80px 36px; display: flex; flex-direction: column; gap: 64px }
.pied__haut { display: flex; flex-wrap: wrap; gap: 56px clamp(40px, 6vw, 96px); align-items: flex-start }
.pied__marque { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 28px }
.pied__identite { display: flex; align-items: center; gap: 22px }
.pied__identite img { height: 104px; width: auto; flex: none }
.pied__devise { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.pied__devise .serif { font-size: clamp(30px, 3vw, 42px); line-height: 1.05 }
.pied__devise .kicker { font-size: 10px; color: var(--gris) }
.pied__reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px }
.pied__reseaux a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--noir-bord); display: inline-flex; align-items: center; justify-content: center; color: var(--craie); transition: background-color .15s, border-color .15s }
.pied__reseaux a:hover { background: var(--rouge); border-color: var(--rouge); opacity: 1 }
.pied__reseaux svg { width: 18px; height: 18px; fill: currentColor }
.pied__liens { flex: 2 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px }
.pied__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--gris-clair) }
.pied__col a { align-self: flex-start }
.pied__col a:hover { color: var(--craie); opacity: 1 }
.pied__titre { color: var(--craie); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--noir-ligne-2); align-self: stretch !important }
.pied__col--titres { gap: 0 }
.pied__col--titres .pied__titre { padding-block: 0 14px; margin-bottom: 18px }
.pied__col--titres .pied__titre:last-child { margin-bottom: 0 }
.pied__titre:hover { color: var(--rouge-sur-noir) !important }
.insecable { white-space: nowrap }
/* Bas de page : copyright et liens légaux à gauche, signature Webaxis à droite */
.pied__bas { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--noir-ligne-2); font-size: 13px; color: var(--gris-moyen) }
.pied__legal { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap }
.pied__legal nav { display: flex; gap: 20px; flex-wrap: wrap }
.pied__credit { display: inline-flex; align-items: center; gap: 10px; color: var(--gris-clair) }
/* Le logo à une taille en pixels entiers (95 × 21, même rapport que le dessin) : pas de bord à cheval sur deux pixels */
.pied__credit svg { display: block; width: 95px; height: 21px; flex: none }
.pied__credit a { display: block; color: var(--gris-clair); position: relative; top: -1px } /* 1 px plus haut : aligné à l'œil sur « Une réalisation » */
.pied__credit a:hover { color: var(--craie); opacity: 1 }
@media (max-width: 900px) { .pied__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px } }
@media (max-width: 640px) {
  .pied .wrap { padding-block: 56px 28px; gap: 48px }
  .pied__identite img { height: 80px }
}
/* Gabarits de base (articles, pages, listes) en attendant leur design dédié */
/* En-tête des pages intérieures : la trame verticale du hero de l'accueil, titre en Instrument Serif italique */
.page-tete { position: relative; overflow: hidden; background: var(--noir); border-bottom: 1px solid var(--noir-ligne) }
.page-tete::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px); pointer-events: none }
/* L'Ours de l'écusson en filigrane, retourné en miroir : son bord coupé (là où il touche la tête de Maure dans le logo)
   est collé au bord droit de l'écran, l'Ours semble entrer dans la page et regarde le titre */
.page-tete::after { content: ""; position: absolute; z-index: 0; right: 0; transform: scaleX(-1); top: 10%; height: 118%; aspect-ratio: 236 / 294; background: rgba(255, 255, 255, .06); -webkit-mask: url('../img/ours.svg') no-repeat center / contain; mask: url('../img/ours.svg') no-repeat center / contain; pointer-events: none }
@media (max-width: 720px) { .page-tete::after { right: 0; top: 16%; height: 100%; background: rgba(255, 255, 255, .045) } }
.page-tete .wrap { position: relative; z-index: 1; padding-block: 28px 48px; display: flex; flex-direction: column; gap: 14px }
.page-tete h1 { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; line-height: 1; font-size: clamp(50px, 7vw, 96px); max-width: 16ch; text-wrap: balance }
.page-tete .wrap > .kicker:first-child { display: flex; align-items: center; gap: 12px }
.page-tete .wrap > .kicker:first-child::before, .page-tete .wrap > .actu-meta::before { content: ""; width: 48px; height: 3px; background: var(--trait-sombre); flex: none }
.single .page-tete h1 { font-size: clamp(36px, 4.8vw, 68px); max-width: 22ch; line-height: 1.04 }
.page-tete .actu-meta { color: var(--gris) }
.page-corps { background: var(--craie); color: var(--noir) }
.page-corps .wrap { padding-block: 56px 96px }
.prose { max-width: 720px; font-size: 18px; line-height: 1.7; color: var(--brun) }
.prose > * + * { margin-top: 1.1em }
.prose h2, .prose h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--noir); line-height: 1; margin-top: 1.6em }
.prose h2 { font-size: 36px }
.prose h3 { font-size: 26px }
.prose a { color: var(--rouge-texte); text-decoration: underline; text-underline-offset: 3px }
.prose img, .prose figure { max-width: 100%; height: auto; border-radius: 4px }
.video-lien { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--noir); color: var(--blanc); text-decoration: none !important }
.video-lien img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 }
.video-lien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,12,.85) 0%, rgba(11,11,12,.1) 60%) }
.video-lien__play { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; background: var(--rouge); display: flex; align-items: center; justify-content: center }
.video-lien__play svg { width: 30px; height: 30px; fill: var(--blanc) }
.prose .video-lien, .video-lien__texte { color: var(--blanc) }
.video-lien__texte { position: absolute; z-index: 1; left: 20px; bottom: 16px; font-family: var(--body); font-size: 15px; font-weight: 600 }
.prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; background: var(--noir) }
.prose figure { margin: 1.6em 0 }
.prose figcaption { font-size: 14px; color: var(--gris-fonce); margin-top: 8px }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--rouge); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.35; color: var(--noir) }
.une-article { max-width: 1000px; margin-bottom: 48px; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--craie-ligne) }
.une-article img { width: 100%; height: 100%; object-fit: cover; display: block }
.liste-actus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px 32px }
.pagination { margin-top: 56px; display: flex; gap: 8px; flex-wrap: wrap }
.pagination .page-numbers { min-width: 46px; height: 46px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--craie-ligne); border-radius: 999px; font-weight: 700 }
.pagination .current { background: var(--noir); color: var(--craie); border-color: var(--noir) }
.fiche { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start }
.fiche__photo { flex: 0 1 380px; min-width: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: #111 }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20% }
.fiche__infos { flex: 1 1 320px; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 32px; align-self: center }
.fiche__infos div { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid var(--craie-ligne) }
.fiche__infos dt { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-fonce); padding-top: 4px }
.fiche__infos dd { margin: 0; font-size: 22px; font-weight: 700; color: var(--noir) }
.page-tete__sous { color: var(--gris); font-size: 16px }
.cal-note { margin-top: 40px; max-width: 720px; font-size: 14px; line-height: 1.6; color: var(--gris-fonce) }

/* Calendariu : une ligne par match, groupées par mois */
.cal-mois + .cal-mois { margin-top: 56px }
.cal-mois__titre { font-size: clamp(28px, 3.4vw, 40px); padding-bottom: 14px; border-bottom: 2px solid var(--rouge) }
.cal-liste { list-style: none; margin: 0; padding: 0 }
.cal-match { display: grid; grid-template-columns: 64px minmax(0, 180px) minmax(0, 1fr) 48px; gap: 8px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--craie-ligne) }
.cal-match.est-prochain { background: var(--blanc); box-shadow: inset 4px 0 0 var(--rouge); padding-inline: 16px; margin-inline: -16px }
.cal-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1 }
.cal-date__jour { font-size: 36px }
.cal-date__nom { white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-fonce); margin-top: 4px }
.cal-compet { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.cal-compet .kicker { font-size: 11px; color: var(--gris-fonce); letter-spacing: .12em }
.cal-compet .accent { color: var(--rouge-texte) }
.cal-affiche { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0 }
.cal-equipe { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 16px }
.cal-equipe--dom { justify-content: flex-end; text-align: right }
.cal-equipe--dom img, .cal-equipe--dom .cal-logo-vide { order: 2 }
.cal-equipe img { width: 36px; height: 36px; object-fit: contain; flex: none }
.cal-equipe__nom { min-width: 0; overflow-wrap: anywhere }
.cal-equipe.est-nous .cal-equipe__nom { font-weight: 800 }
.cal-logo-vide { width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed var(--pointille); flex: none }
.cal-centre { min-width: 92px; text-align: center }
.cal-score { font-size: 30px; letter-spacing: .02em }
.cal-heure { display: inline-block; font-weight: 700; font-size: 15px; padding: 6px 12px; border: 1px solid var(--craie-ligne); border-radius: 999px; background: var(--blanc) }
.cal-issue { display: flex; justify-content: flex-end }
.cal-badge { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--craie-ligne); color: var(--brun) }
.cal-badge--victoire { background: var(--rouge); color: var(--blanc) }
.cal-badge--defaite { background: var(--noir); color: var(--craie) }
.cal-badge--nul { background: #767676; color: var(--blanc) } /* gris le plus clair qui reste lisible en blanc (contraste 4,5:1) */
@media (max-width: 760px) {
  .cal-match { grid-template-columns: 52px minmax(0, 1fr) 40px; gap: 10px 14px }
  .cal-compet { grid-column: 2 / 4; grid-row: 1 }
  .cal-date { grid-row: 1 / 3 }
  /* Une équipe par ligne, le score ou l'heure à droite */
  .cal-affiche { grid-column: 2 / 3; grid-row: 2; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 12px }
  .cal-equipe--dom { grid-column: 1; grid-row: 1; justify-content: flex-start; text-align: left }
  .cal-equipe--ext { grid-column: 1; grid-row: 2 }
  .cal-equipe--dom img, .cal-equipe--dom .cal-logo-vide { order: 0 }
  .cal-centre { grid-column: 2; grid-row: 1 / 3; min-width: 0; text-align: right }
  .cal-issue { grid-column: 3; grid-row: 2 }
  .cal-equipe { font-size: 15px; gap: 8px }
  .cal-equipe__nom { overflow-wrap: normal }
  .cal-equipe img, .cal-logo-vide { width: 24px; height: 24px }
  .cal-score { font-size: 24px }
  .cal-heure { font-size: 13px; padding: 4px 8px }
  .cal-date__jour { font-size: 30px }
}

/* Classifica */
.classement-cadre { overflow-x: auto; background: var(--blanc); border-radius: 4px }
.classement { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums }
.classement th { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-fonce); text-align: center; padding: 16px 10px; border-bottom: 2px solid var(--noir) }
.classement td { text-align: center; padding: 14px 10px; border-bottom: 1px solid var(--craie-ligne) }
.classement .c-club { text-align: left; width: 100% }
.classement th.c-club { text-align: left }
.c-club__in { display: flex; align-items: center; gap: 12px; font-weight: 600 }
.c-club__in img { width: 30px; height: 30px; object-fit: contain; flex: none }
.classement .c-rang { width: 56px; font-size: 22px }
.classement .c-pts { font-size: 22px }
.classement tr.est-nous td { background: var(--rouge); color: var(--blanc); border-bottom-color: var(--rouge) }
.classement tr.est-nous .c-rang, .classement tr.est-nous .c-pts { color: var(--blanc) }
.classement tbody tr:not(.est-nous):hover td { background: var(--craie) }
@media (max-width: 760px) { .classement .c-buts { display: none } .classement td, .classement th { padding-inline: 6px } }
@media (max-width: 520px) { .classement .c-detail { display: none } .classement { font-size: 14px } .classement .c-rang { width: 36px } }

/* Logos de clubs : coins adoucis pour les logos carrés (sans effet sur les logos détourés) */
.matchs__equipe img, .cal-equipe img, .c-club__in img { border-radius: 6px }

/* L'urganigramma : trois blocs, titre et photo à gauche (qui restent visibles pendant la lecture), personnes à droite */
.orga-bloc { background: var(--craie); color: var(--noir) }
.orga-bloc + .orga-bloc:not(.orga-bloc--noir) { border-top: 1px solid var(--craie-ligne) }
.orga-bloc--noir { background: var(--noir); color: var(--craie); position: relative }
.orga-bloc--noir::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px); pointer-events: none }
.orga-bloc__grille { position: relative; padding-block: 88px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start }
.orga-bloc__aside { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 20px }
.orga-bloc__titre { font-size: clamp(40px, 4.6vw, 64px) }
.orga-bloc__figure { margin: 8px 0 0; max-width: 420px; display: flex; flex-direction: column; gap: 8px }
.orga-bloc__credit { font-size: 12px; color: var(--gris-fonce) }
.orga-bloc--noir .orga-bloc__credit { color: var(--gris) }
.orga-bloc__photo { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--craie-ligne) }
.orga-bloc--noir .orga-bloc__photo { background: var(--noir-carte) }
.orga-bloc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block } /* visage gardé quand le cadre s'élargit */
.orga-bloc__corps { min-width: 0; display: flex; flex-direction: column; gap: 40px; padding-top: 6px }
.orga-chef { display: flex; flex-direction: column; gap: 8px; padding-bottom: 28px; border-bottom: 1px solid var(--craie-ligne) }
.orga-bloc--noir .orga-chef { border-bottom-color: var(--noir-ligne-2) }
.orga-chef__fonction { color: var(--rouge-texte) }
.orga-bloc--noir .orga-chef__fonction { color: var(--rouge-sur-noir) }
/* Détaché en tête, à peine plus grand que les autres ; seule sa fonction est en rouge */
.orga-chef__nom { font-size: 31px; font-weight: 800; line-height: 1.2 }
.orga-grille { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 28px 40px }
.orga-grille div { display: flex; flex-direction: column; gap: 6px }
.orga-grille dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-fonce) }
.orga-bloc--noir .orga-grille dt { color: var(--gris) }
.orga-grille dd { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25 }
.orga-conseil { display: flex; flex-direction: column; gap: 16px; padding-top: 36px; border-top: 1px solid var(--craie-ligne) }
.orga-conseil .kicker { margin: 0; color: var(--gris-fonce) }
.orga-conseil ul { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 40px }
.orga-conseil li { padding: 10px 0; border-bottom: 1px solid var(--craie-ligne); font-size: 17px; font-weight: 600; break-inside: avoid }
.orga-ecole { margin: 0; display: flex; flex-direction: column }
.orga-ecole div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--craie-ligne) }
.orga-ecole div:last-child { border-bottom: 1px solid var(--craie-ligne) }
.orga-ecole dt { font-size: 34px; line-height: 1 }
.orga-ecole dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5 }
@media (max-width: 900px) {
  .orga-bloc__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 56px }
  .orga-bloc__aside { position: static }
  .orga-bloc__figure { max-width: none }
  .orga-bloc__photo { aspect-ratio: 16 / 10 }
}
@media (max-width: 640px) {
  .orga-ecole div { grid-template-columns: 96px minmax(0, 1fr); gap: 16px }
  .orga-ecole dt { font-size: 26px }
  .orga-ecole dd { font-size: 16px }
}

/* I ghjucadori : une section par ligne, du gardien à l'attaquant, puis le staff */
.effectif .wrap { padding-block: 24px 96px }
.effectif-ligne { padding-top: 56px }
.effectif-ligne__tete { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px }
.effectif-ligne__tete h2 { font-size: clamp(36px, 4.4vw, 56px) }
.effectif .joueurs { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) }
/* Cartes légères sur la craie : pas de fond sous le nom, prénom en rouge, nom en Anton noir, tailles rapprochées */
.effectif .joueur { background: none; border-radius: 0; overflow: visible; gap: 14px }
.effectif .joueur__photo { border-radius: 4px }
/* Arrivée depuis la mosaïque de l'accueil : le joueur visé est signalé par un cadre rouge */
.effectif-ligne__joueurs li { scroll-margin-top: 32px }
.effectif-ligne__joueurs li:target .joueur__photo { outline: 3px solid var(--rouge); outline-offset: 4px }
.effectif .joueur__texte { padding: 0; border-top: 0; gap: 4px }
.effectif .joueur__prenom { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--rouge-texte) }
.effectif .joueur__nom { font-size: 24px; line-height: 1; color: var(--noir) }
.effectif .joueur__poste { margin-top: 4px; font-size: 11px; color: var(--gris-fonce) }
.effectif .joueur:hover .joueur__nom { color: var(--rouge-texte) }
.effectif .joueurs { gap: 40px 20px }
@media (max-width: 640px) { .effectif .joueurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px } .effectif .joueur__prenom { font-size: 15px } .effectif .joueur__nom { font-size: 20px } }

/* Fiche d'un joueur : prénom en Instrument Serif, nom en Anton, numéro en filigrane */
.fiche-tete .wrap { position: relative }
.fiche-tete .kicker a { color: inherit }
.fiche-tete__nom { margin: 0; display: flex; flex-direction: column; gap: 4px }
.fiche-tete__prenom { font-size: clamp(32px, 4vw, 52px); line-height: 1 }
.fiche-tete__nom .disp { font-family: var(--display); font-style: normal; letter-spacing: .01em; line-height: .92; font-size: clamp(56px, 8vw, 112px) }
.fiche-tete__numero { position: absolute; right: var(--gutter); bottom: 24px; font-size: clamp(96px, 14vw, 200px); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .18); line-height: .8; pointer-events: none }
.fiche__texte { margin-top: 48px }
.fiche__retour { margin-top: 48px; font-size: 15px }
.fiche__retour svg { color: var(--rouge) }
.effectif .staff-liste { margin-top: 56px }

/* Scola di ballò : page récapitulative (introduction, photo, catégories) et pages de catégorie (photo de groupe, effectif) */
.scola .wrap { padding-block: 56px 96px }
.scola-intro__photo { margin: 0 0 48px; border-radius: 4px; overflow: hidden }
.scola-intro__photo img { width: 100%; height: auto; display: block }
.scola-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start }
.scola-intro__accroche { display: flex; flex-direction: column; gap: 16px }
.scola-intro__accroche p { margin: 0 }
.scola-intro__accroche .disp { font-size: clamp(40px, 4.6vw, 64px); line-height: .95; color: var(--noir) }
.scola-intro__accroche .serif { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; color: var(--gris-fonce) }
.scola-titre { margin-top: 80px; margin-bottom: 28px; font-size: clamp(36px, 4.4vw, 56px) }
.scola-categories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px }
.scola-carte { display: flex; flex-direction: column; gap: 14px }
.scola-carte__photo { aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: var(--noir); display: flex; align-items: center; justify-content: center }
.scola-carte__photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.scola-carte__photo .scola-carte__ecusson { width: 26%; height: auto; opacity: .4 }
.scola-carte__pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--noir) }
.scola-carte__titre { font-size: 34px; line-height: 1 }
.scola-carte__fleche { width: 40px; height: 40px; border-radius: 50%; background: var(--rouge); color: var(--blanc); display: flex; align-items: center; justify-content: center; flex: none }
.scola-carte__fleche svg { width: 17px; height: 17px }
.scola-carte:hover { opacity: 1 } .scola-carte:hover .scola-carte__titre { color: var(--rouge-texte) }
.scola-carte__photo img { transition: transform .5s ease } .scola-carte:hover .scola-carte__photo img { transform: scale(1.04) }
.scola-groupe { margin: 0 0 48px; border-radius: 4px; overflow: hidden }
.scola-groupe img { width: 100%; height: auto; display: block }
.scola-effectif { max-width: 900px }
.scola-effectif p { margin: 0 }
.scola-effectif p + p { margin-top: 18px }
.scola-effectif p:first-child strong { font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: .01em; color: var(--noir) }
.scola-effectif strong { color: var(--noir) }
.scola-retour { margin-top: 48px; font-size: 15px }
@media (max-width: 900px) { .scola-intro { grid-template-columns: minmax(0, 1fr); gap: 24px } .scola-intro__photo { margin-bottom: 32px } .scola-titre { margin-top: 56px } }
/* Sur mobile, la photo panoramique est recadrée plus haute, centrée sur les jeunes */
@media (max-width: 640px) { .scola-intro__photo { aspect-ratio: 4 / 3 } .scola-intro__photo img { height: 100%; object-fit: cover; object-position: 50% 78% } }
.page-tete .kicker a { color: inherit }

/* Partenarii : en ouverture, l'accroche et son texte à gauche, le bloc des chiffres clés à droite */
.partenaires-intro .wrap { padding-block: 64px 80px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center }
.partenaires-intro__texte { display: flex; flex-direction: column; gap: 24px; align-items: flex-start }
.partenaires-intro__titre { font-size: clamp(40px, 4.4vw, 60px) }
.partenaires-intro__titre .serif { display: block; font-size: .7em; line-height: 1.1; color: var(--rouge) }
.partenaires-intro__texte .prose { font-size: 17px }
.partenaires-chiffres { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 36px 36px 30px; border-radius: 4px; background: var(--noir); color: var(--craie) }
.partenaires-chiffres::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px); pointer-events: none }
.partenaires-chiffres > * { position: relative }
.partenaires-chiffres__principal { margin: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--noir-ligne-2) }
.partenaires-chiffres__principal .partenaires-chiffres__valeur { font-size: clamp(64px, 7vw, 96px); line-height: .9; color: var(--rouge) }
.partenaires-chiffres__principal .partenaires-chiffres__libelle { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.15; color: var(--craie) }
.partenaires-chiffres__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px }
.partenaires-chiffres__liste li { display: flex; flex-direction: column; gap: 6px }
.partenaires-chiffres__liste .partenaires-chiffres__valeur { font-size: 38px; line-height: .95 }
.partenaires-chiffres__liste .partenaires-chiffres__libelle { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gris-clair) }
.partenaires-chiffres__icone svg { width: 15px; height: 15px; fill: currentColor; display: block }
.partenaires-chiffres__date { margin: 0; font-size: 12px; color: var(--gris) }
.partenaires-titre { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 28px }
.partenaires-supports .wrap { padding-block: 24px 24px }
.partenaires-supports__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--noir) }
.partenaires-supports__liste li { display: flex; flex-direction: column; gap: 10px; padding: 24px 0 28px; border-bottom: 1px solid var(--craie-ligne) }
.partenaires-supports__num { font-size: 22px; color: var(--rouge) }
.partenaires-supports__titre { font-size: 22px; font-weight: 800; line-height: 1.2 }
.partenaires-supports__texte { font-size: 15px; color: var(--gris-fonce) }
.partenaires-actuels .wrap { padding-block: 56px 24px }
.partenaires-actuels .partenaires__grille { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) } /* les colonnes s'ajustent au nombre de partenaires */
.partenaires-actuels .partenaires__logo { display: block; height: var(--h, 44px); aspect-ratio: var(--r, 2); background: var(--noir); transition: background-color .2s ease;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat }
.partenaires-actuels a:hover .partenaires__logo, .partenaires-actuels a:focus-visible .partenaires__logo { background: var(--rouge) }
.partenaires-contact .wrap { padding-block: 72px 96px }
.partenaires-contact__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start }
.partenaires-contact__tete p { font-size: 17px; line-height: 1.6; color: var(--brun); max-width: 420px }
.formulaire { display: flex; flex-direction: column; gap: 18px; padding: 36px; background: var(--blanc); border-radius: 4px }
.formulaire p { margin: 0; display: flex; flex-direction: column; gap: 8px }
.formulaire__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.formulaire label { font-size: 13px; font-weight: 700; color: var(--noir) }
.formulaire label span { color: var(--rouge-texte) }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire textarea, .formulaire select { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--craie-ligne); border-radius: 4px; background: var(--craie); font: inherit; font-size: 16px; color: var(--noir) }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { outline: 2px solid var(--rouge); outline-offset: 1px; background: var(--blanc) }
.formulaire__accord { flex-direction: row !important; align-items: flex-start; gap: 10px !important }
.formulaire__accord input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--rouge); flex: none }
.formulaire__accord label { font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--brun) }
.formulaire__accord a { color: var(--rouge-texte); text-decoration: underline; text-underline-offset: 2px }
.formulaire select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer }
.formulaire .btn { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.formulaire__message { padding: 14px 16px; border-radius: 4px; font-size: 15px; font-weight: 600 }
.formulaire__message.est-ok { background: #EAF5EC; color: #1E5B2A }
.formulaire__message.est-erreur { background: #FCEBEC; color: #9E0B0F }
@media (max-width: 900px) {
  .partenaires-intro .wrap, .partenaires-contact__grille { grid-template-columns: minmax(0, 1fr); gap: 36px }
}
@media (max-width: 720px) { .partenaires-supports__liste { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 560px) { .formulaire { padding: 22px } .formulaire__ligne { grid-template-columns: minmax(0, 1fr) } .partenaires-chiffres { padding: 28px 22px 24px } .partenaires-chiffres__liste .partenaires-chiffres__valeur { font-size: 32px } }

/* Contact : coordonnées à gauche, formulaire à droite (même grille que le bloc « Devenir partenaire ») */
.contact .wrap { padding-block: 64px 96px }
.contact__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start }
.contact__infos { display: flex; flex-direction: column; gap: 32px }
.contact__intro { margin: 0; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--noir); max-width: 420px }
.contact__liste { margin: 0; display: flex; flex-direction: column; border-top: 2px solid var(--noir) }
.contact__liste > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--craie-ligne) }
.contact__liste dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--noir) }
.contact__liste dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--craie-ligne); text-underline-offset: 3px }
.contact__liste dd a:hover { text-decoration-color: var(--rouge) }
.contact__carte { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--rouge-texte) !important }
.contact__reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px }
.contact__reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--noir); color: var(--blanc) !important; transition: background .2s }
.contact__reseaux a:hover { background: var(--rouge) }
.contact__reseaux svg { width: 18px; height: 18px; fill: currentColor }
.contact__partenaires { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; border-radius: 4px; background: var(--noir); color: var(--craie) }
.contact__partenaires::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px); pointer-events: none }
.contact__partenaires > * { position: relative }
.contact__partenaires .kicker { color: var(--rouge-sur-noir) }
.contact__partenaires-titre { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800 }
.contact__partenaires svg { width: 20px; height: 20px; flex: none; transition: transform .2s }
.contact__partenaires:hover svg { transform: translateX(4px) }
@media (max-width: 900px) { .contact__grille { grid-template-columns: minmax(0, 1fr); gap: 40px } }

/* Article : la photo chevauche l'en-tête noir et le fond clair ; texte centré ; partage ; trois autres actualités */
.article-tete .actu-meta { display: flex; align-items: center; gap: 14px }
.article-tete .actu-meta .kicker { color: var(--rouge-sur-noir) }
.article-tete--photo .wrap { padding-bottom: 148px }
.fond-clair .page-corps { background: none }
.article .wrap { padding-bottom: 72px }
.article-tete--photo + .fond-clair .article .wrap { padding-top: 0 }
.article__une { max-width: 1100px; margin: -100px auto 56px; position: relative }
.article__une img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--craie-ligne) }
.article__une figcaption { margin-top: 10px; font-size: 13px; color: var(--gris-fonce) }
.article__texte { margin-inline: auto; max-width: 680px }
.prose .chapo { font-size: 21px; line-height: 1.55; font-weight: 600; color: var(--noir) }
.prose .question { color: var(--rouge-texte) }
.article__pied { max-width: 680px; margin: 56px auto 0; padding-top: 22px; border-top: 2px solid var(--noir); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap }
.article__partage { display: flex; align-items: center; gap: 16px }
.article__partage .kicker { color: var(--gris-fonce) }
.article__partage ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px }
.article__partage a, .article__copier { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; background: var(--noir); color: var(--blanc); cursor: pointer; transition: background .2s }
.article__partage a:hover, .article__copier:hover, .article__copier.est-copie { background: var(--rouge) }
.article__partage svg { width: 18px; height: 18px; fill: currentColor }
.article__copie { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 4px; background: var(--noir); color: var(--blanc); font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s }
.article__copier.est-copie .article__copie { opacity: 1 }
.article-suite { padding-top: 24px }
.article-suite .section__tete { border-top: 1px solid var(--craie-ligne); padding-top: 72px }
@media (min-width: 1000px) { .article-suite__liste { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 720px) {
  .article-tete--photo .wrap { padding-bottom: 96px }
  .article__une { margin: -64px calc(-1 * var(--gutter)) 40px; max-width: none }
  .article__une img { border-radius: 0 }
  .prose .chapo { font-size: 19px }
  .article-suite .section__tete { padding-top: 56px }
}

/* L'attualità : grille simple sur les trois quarts, colonne sobre à droite (recherche, années) qui suit le défilement */
.actus-page__grille-page { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; align-items: start }
.actus-page__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px }
.actus-page .actu-petite h2 { font-size: 22px; line-height: 1.02 }
.actus-bloc { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 40px }
.actus-recherche { display: flex; flex-direction: column; gap: 10px }
.actus-recherche__champ { display: flex; align-items: center; border-bottom: 1px solid var(--noir) }
.actus-recherche__champ:focus-within { border-color: var(--rouge) }
.actus-recherche input[type="search"] { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--noir) }
.actus-recherche input::placeholder { color: var(--gris-fonce) }
.actus-recherche input:focus { outline: none }
.actus-recherche button { display: grid; place-items: center; width: 32px; height: 40px; border: 0; padding: 0; background: none; color: var(--noir); cursor: pointer }
.actus-recherche button:hover { color: var(--rouge) }
.actus-recherche svg { width: 19px; height: 19px }
.actus-annees { display: flex; flex-direction: column; gap: 10px }
.actus-annees ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.actus-annees a { display: block; padding: 4px 0; font-size: 15px; font-weight: 600; color: var(--gris-fonce); transition: color .2s }
.actus-annees a:hover { color: var(--noir) }
.actus-annees a.est-actif { color: var(--rouge-texte) }
.actus-page .pagination { justify-content: center; align-items: center }
.pagination .current { background: var(--rouge); border-color: var(--rouge); color: var(--blanc) }
.pagination a.page-numbers:hover { border-color: var(--noir) }
.pagination .dots { border: 0; min-width: 0; padding: 0 4px }
.pagination svg { width: 18px; height: 18px }
.pagination .prev svg { transform: rotate(180deg) }
.actus-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 18px }
@media (max-width: 1100px) { .actus-page__grille { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 860px) {
  .actus-page__grille-page { grid-template-columns: minmax(0, 1fr); gap: 40px }
  .actus-bloc { position: static; order: -1; gap: 24px }
  .actus-annees ul { flex-direction: row; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none }
  .actus-annees ul::-webkit-scrollbar { display: none }
  .actus-annees a { white-space: nowrap }
}
@media (max-width: 560px) { .actus-page__grille { grid-template-columns: minmax(0, 1fr) } }

/* Page introuvable : la recherche à gauche, les rubriques du site à droite, sur le fond clair */
.introuvable .wrap { padding-block: 64px 96px }
.introuvable__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start }
.introuvable__rubriques { display: flex; flex-direction: column; gap: 14px }
.introuvable__rubriques ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 2px solid var(--noir) }
.introuvable__rubriques a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--craie-ligne); font-size: 17px; font-weight: 700; color: var(--noir); transition: color .2s }
.introuvable__rubriques a:hover { color: var(--rouge-texte) }
.introuvable__rubriques svg { width: 18px; height: 18px; flex: none; color: var(--rouge); transition: transform .2s }
.introuvable__rubriques a:hover svg { transform: translateX(4px) }
@media (max-width: 860px) { .introuvable__grille { grid-template-columns: minmax(0, 1fr); gap: 40px } }
@media (max-width: 560px) { .introuvable__rubriques ul { grid-template-columns: minmax(0, 1fr) } }

/* Storia : page d'entrée, rubriques, frise des récits, portraits, présidents et entraîneurs, coupes */
.storia-tete .kicker a { color: inherit }
.storia-tete__intro { max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--gris-clair) }
.storia-tete__annee::before { content: "·"; margin: 0 10px; color: var(--gris) }
.storia-tete--recit h1 { font-size: clamp(36px, 4.8vw, 68px); max-width: 22ch; line-height: 1.04 }

/* Barre des six rubriques, dans le prolongement de l'en-tête noir */
.storia-nav { background: var(--noir); border-bottom: 1px solid var(--noir-ligne) }
.storia-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none }
.storia-nav ul::-webkit-scrollbar { display: none }
.storia-nav a { display: block; padding: 18px 0 15px; border-bottom: 3px solid transparent; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--gris-clair) }
.storia-nav a:hover { color: var(--craie); opacity: 1 }
.storia-nav a[aria-current="page"] { color: var(--craie); border-bottom-color: var(--rouge) }

/* Page d'entrée : grandes étapes sur un filet, avec un point rouge par année */
.storia-etapes { background: var(--craie); color: var(--noir) }
.storia-etapes .wrap { padding-block: 64px 24px }
.storia-etapes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); position: relative }
.storia-etapes__liste::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--craie-ligne) }
.storia-etape > a, .storia-etape > div { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 20px 0 0 }
.storia-etape > a::before, .storia-etape > div::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--rouge) }
.storia-etape__annee { font-size: clamp(44px, 4.6vw, 64px); line-height: .9 }
.storia-etape__titre { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--brun); max-width: 22ch }
.storia-etape a:hover { opacity: 1 } .storia-etape a:hover .storia-etape__titre { text-decoration: underline; text-underline-offset: 3px }

/* Les six rubriques en tuiles photo */
.storia-rubriques { background: var(--craie) }
.storia-rubriques .wrap { padding-block: 48px 96px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px }
.storia-tuile { position: relative; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: 4px; overflow: hidden; background: var(--noir); color: var(--craie) }
.storia-tuile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .55 }
.storia-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.35) 55%, rgba(11,11,12,.1) 100%) }
.storia-tuile__corps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px }
.storia-tuile__compte { color: var(--gris-clair) }
.storia-tuile__titre { font-size: clamp(34px, 3vw, 44px) }
.storia-tuile__intro { font-size: 15px; line-height: 1.5; color: var(--gris-clair); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.storia-tuile__fleche { position: absolute; z-index: 1; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--rouge); color: var(--blanc); display: flex; align-items: center; justify-content: center }
.storia-tuile__fleche svg { width: 18px; height: 18px }
.storia-tuile:hover { opacity: 1 }
.storia-tuile__photo { transition: opacity .3s ease, transform .5s ease }
.storia-tuile:hover .storia-tuile__photo { opacity: .7; transform: scale(1.03) }

/* Palmarès sur fond noir */
.storia-palmares { background: var(--noir); color: var(--craie); position: relative }
.storia-palmares::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px); pointer-events: none }
.storia-palmares .wrap { position: relative; padding-block: 88px 96px; display: flex; flex-direction: column; gap: 40px }
.storia-palmares__titre { font-size: clamp(48px, 6vw, 88px) }
.storia-palmares__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 48px }
.storia-palmares__liste li { display: flex; flex-direction: column; gap: 8px; padding: 26px 0; border-top: 1px solid var(--noir-ligne-2) }
.storia-palmares__liste li::before { content: ""; width: 48px; height: 3px; background: var(--trait-sombre); margin-bottom: 8px }
.storia-palmares__liste .disp { font-size: 26px; line-height: 1 }
.storia-palmares__liste .serif { font-size: 22px; line-height: 1.3; color: var(--gris-clair) }

/* Chapitres (récits et portraits) */
.storia-corps .wrap { padding-block: 24px 96px }
.storia-chapitre { padding-top: 72px; scroll-margin-top: 72px }
.storia-chapitre__tete { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; max-width: 760px }
.storia-chapitre__tete h2 { font-size: clamp(36px, 4.4vw, 56px) }
.storia-chapitre__tete p { font-size: 17px; line-height: 1.6; color: var(--brun) }

/* Frise verticale : l'année à gauche, un point rouge sur le filet, le récit à droite */
.frise { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 40px }
.frise::before { content: ""; position: absolute; left: 175px; top: 10px; bottom: 10px; width: 1px; background: var(--craie-ligne) }
.frise__item { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 52px; align-items: start }
.frise__item::before { content: ""; position: absolute; left: 169px; top: 10px; width: 13px; height: 13px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 5px var(--craie) }
.frise__annee { font-size: 40px; line-height: 1; text-align: right; overflow-wrap: anywhere }
.frise__annee--long { font-size: 26px; padding-top: 6px }
.frise__carte { display: flex; gap: 28px; align-items: flex-start }
.frise__photo { flex: 0 0 280px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--craie-ligne) }
.frise__photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.frise__texte { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 2px }
.frise__titre { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--noir) }
.frise__extrait { font-size: 16px; line-height: 1.55; color: var(--brun); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.frise__lien { font-size: 14px; margin-top: 4px }
.frise__lien svg, .storia-retour svg { color: var(--rouge) }
.frise__carte:hover { opacity: 1 } .frise__carte:hover .frise__titre { text-decoration: underline; text-underline-offset: 4px }

/* Portraits */
.portraits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 36px 24px }
.portrait { display: flex; flex-direction: column; gap: 14px }
.portrait__photo { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--noir); display: flex; align-items: center; justify-content: center }
.portrait__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block }
.portrait__photo .portrait__ecusson { width: 34%; height: auto; opacity: .35 }
.portrait__titre { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--noir) }
.portrait:hover { opacity: 1 } .portrait:hover .portrait__titre { text-decoration: underline; text-underline-offset: 4px }
.portrait__photo img { transition: transform .5s ease } .portrait:hover .portrait__photo img { transform: scale(1.04) }

/* Présidents et entraîneurs : la personne en fonction, puis la liste */
.personne-actuelle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px; padding: 48px 0; border-bottom: 1px solid var(--craie-ligne) }
.personne-actuelle__photo { flex: 0 0 260px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--noir); display: flex; align-items: center; justify-content: center }
.personne-actuelle__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20% }
.personne-actuelle__texte { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px }
.personne-actuelle__nom { font-size: clamp(48px, 6vw, 84px) }
.personnes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 40px }
.personne { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--craie-ligne) }
.personne__photo { flex: none; width: 72px; height: 72px; border-radius: 4px; overflow: hidden; background: var(--noir); display: flex; align-items: center; justify-content: center }
.personne__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20% }
.personne__photo .personne__ecusson, .personne-actuelle__photo .personne__ecusson { width: 40%; height: auto; object-fit: contain; opacity: .35 }
.personne__texte { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.personne__nom { font-size: 18px; font-weight: 700; color: var(--noir) }
.personne__periode { font-size: 14px; color: var(--gris-fonce) }

/* Coupes : compteurs, puis une ligne par saison */
.coupe-compteurs { margin: 48px 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px }
.coupe-compteurs div { display: flex; flex-direction: column-reverse; gap: 8px }
.coupe-compteurs dt { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-fonce) }
.coupe-compteurs dd { margin: 0; font-size: clamp(56px, 6vw, 84px); line-height: .9; color: var(--rouge) }
.coupe-saisons { list-style: none; margin: 40px 0 0; padding: 0 }
.coupe-saison { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--craie-ligne) }
.coupe-saison__nom { font-size: 30px; line-height: 1.05 }
.coupe-saison__matchs { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.coupe-match { display: grid; grid-template-columns: 210px minmax(0, 1fr) 170px; gap: 6px 20px; align-items: center }
.coupe-match__quand { font-size: 13px; color: var(--gris-fonce) }
.coupe-match__affiche { display: grid; grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0 }
.coupe-match__equipe { font-size: 16px; font-weight: 500; color: var(--brun); overflow-wrap: anywhere }
.coupe-match__equipe--dom { text-align: right }
.coupe-match__equipe.est-nous { font-weight: 800; color: var(--noir) }
.coupe-match__score { font-size: 26px; text-align: center; white-space: nowrap }
.coupe-match.est-victoire .coupe-match__score { color: var(--rouge) }
.coupe-match__fin { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 13px; color: var(--gris-fonce) }
.coupe-match__note { font-style: italic }
.coupe-match__video { font-weight: 700; color: var(--rouge-texte); text-decoration: underline; text-underline-offset: 3px }
.coupe-saison__note { font-size: 14px; color: var(--gris-fonce) }

/* Un récit */
.storia-recit .wrap { padding-block: 56px 96px }
.storia-recit__photo { margin: 0 0 48px; max-width: 1000px }
.storia-recit__photo img { width: 100%; height: auto; display: block; border-radius: 4px }
.storia-suite { max-width: 720px; margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--craie-ligne) }
.storia-suite__lien { display: flex; flex-direction: column; gap: 8px; padding-top: 22px }
.storia-suite__lien .kicker { color: var(--gris-fonce) }
.storia-suite__lien--apres { grid-column: 2; text-align: right }
.storia-suite__titre { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--noir) }
.storia-suite__lien:hover { opacity: 1 } .storia-suite__lien:hover .storia-suite__titre { text-decoration: underline; text-underline-offset: 4px }
.storia-retour { margin-top: 40px; font-size: 15px }

@media (max-width: 900px) {
  .coupe-match { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .coupe-match__fin { justify-content: flex-start }
  .coupe-match + .coupe-match { padding-top: 14px; border-top: 1px dashed var(--craie-ligne) }
}
@media (max-width: 720px) {
  .storia-etapes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px }
  .storia-etapes__liste::before { display: none }
  .storia-tuile { min-height: 280px; padding: 22px }
  .frise { gap: 36px }
  .frise::before { left: 6px }
  .frise__item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 32px }
  .frise__item::before { left: 0; top: 6px }
  .frise__annee { text-align: left; font-size: 32px }
  .frise__carte { flex-direction: column; gap: 16px }
  .frise__photo { flex: none; width: 100% }
  .portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px }
  .portrait__titre { font-size: 15px }
  .personne-actuelle { gap: 24px; padding: 32px 0 }
  .personne-actuelle__photo { flex-basis: 180px }
  .coupe-saison { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .storia-suite { grid-template-columns: minmax(0, 1fr) }
  .storia-suite__lien--apres { grid-column: 1; text-align: left }
}
@keyframes rt-s1{0.000%{opacity:0;transform:scale(1.14)} 2.232%{opacity:1} 13.393%{opacity:1;transform:scale(1.0)} 13.482%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s1{animation:rt-s1 22.4s linear infinite}
@keyframes rt-f1{0.000%{opacity:0}13.393%{opacity:0}13.571%{opacity:1}14.732%{opacity:0}100.000%{opacity:0}}
.rt-f1{animation:rt-f1 22.4s linear infinite}
@keyframes rt-s2{0.000%{opacity:0;transform:scale(1.0)} 13.839%{opacity:0;transform:scale(1.0)} 13.928%{opacity:1} 26.340%{opacity:1;transform:scale(1.08)} 26.429%{opacity:0} 100.000%{opacity:0;transform:scale(1.08)}}
.rt-s2{animation:rt-s2 22.4s linear infinite}
@keyframes rt-f2{0.000%{opacity:0}26.340%{opacity:0}26.518%{opacity:1}27.455%{opacity:0}100.000%{opacity:0}}
.rt-f2{animation:rt-f2 22.4s linear infinite}
@keyframes rt-s3{0.000%{opacity:0;transform:scale(1.08)} 26.786%{opacity:0;transform:scale(1.08)} 26.875%{opacity:1} 37.053%{opacity:1;transform:scale(1.0)} 37.143%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s3{animation:rt-s3 22.4s linear infinite}
@keyframes rt-s5{0.000%{opacity:0;transform:scale(1.05)} 37.053%{opacity:0;transform:scale(1.05)} 37.143%{opacity:1} 41.518%{opacity:1;transform:scale(1.0)} 41.607%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s5{animation:rt-s5 22.4s linear infinite}
@keyframes rt-s6{0.000%{opacity:0;transform:scale(1.0)} 41.518%{opacity:0;transform:scale(1.0)} 41.607%{opacity:1} 45.536%{opacity:1;transform:scale(1.04)} 45.625%{opacity:0} 100.000%{opacity:0;transform:scale(1.04)}}
.rt-s6{animation:rt-s6 22.4s linear infinite}
@keyframes rt-s4{0.000%{opacity:0;transform:scale(1.05)} 45.536%{opacity:0;transform:scale(1.05)} 45.625%{opacity:1} 50.000%{opacity:1;transform:scale(1.0)} 50.089%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s4{animation:rt-s4 22.4s linear infinite}
@keyframes rt-s14{0.000%{opacity:0;transform:scale(1.0)} 50.000%{opacity:0;transform:scale(1.0)} 50.089%{opacity:1} 54.464%{opacity:1;transform:scale(1.04)} 54.554%{opacity:0} 100.000%{opacity:0;transform:scale(1.04)}}
.rt-s14{animation:rt-s14 22.4s linear infinite}
@keyframes rt-c7{0.000%{opacity:0} 46.429%{opacity:0} 47.545%{opacity:1} 54.464%{opacity:1} 54.554%{opacity:0} 100.000%{opacity:0}}
.rt-c7{animation:rt-c7 22.4s linear infinite}
@keyframes rt-f3{0.000%{opacity:0}54.464%{opacity:0}54.643%{opacity:1}55.580%{opacity:0}100.000%{opacity:0}}
.rt-f3{animation:rt-f3 22.4s linear infinite}
@keyframes rt-s7{0.000%{opacity:0;transform:scale(1.05)} 54.911%{opacity:0;transform:scale(1.05)} 55.000%{opacity:1} 58.036%{opacity:1;transform:scale(1.0)} 58.125%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s7{animation:rt-s7 22.4s linear infinite}
@keyframes rt-s8{0.000%{opacity:0;transform:scale(1.0)} 58.036%{opacity:0;transform:scale(1.0)} 58.125%{opacity:1} 61.161%{opacity:1;transform:scale(1.04)} 61.250%{opacity:0} 100.000%{opacity:0;transform:scale(1.04)}}
.rt-s8{animation:rt-s8 22.4s linear infinite}
@keyframes rt-s9{0.000%{opacity:0;transform:scale(1.14)} 61.161%{opacity:0;transform:scale(1.14)} 61.250%{opacity:1} 63.393%{transform:scale(1.06)} 66.964%{transform:scale(1.02)} 73.214%{opacity:1;transform:scale(1.0)} 73.303%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s9{animation:rt-s9 22.4s linear infinite}
@keyframes rt-f4{0.000%{opacity:0}73.214%{opacity:0}73.393%{opacity:1}74.331%{opacity:0}100.000%{opacity:0}}
.rt-f4{animation:rt-f4 22.4s linear infinite}
@keyframes rt-s10{0.000%{opacity:0;transform:scale(1.04)} 73.660%{opacity:0;transform:scale(1.04)} 73.750%{opacity:1} 77.232%{opacity:1;transform:scale(1.0)} 77.321%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s10{animation:rt-s10 22.4s linear infinite}
@keyframes rt-s11{0.000%{opacity:0;transform:scale(1.0)} 77.232%{opacity:0;transform:scale(1.0)} 77.321%{opacity:1} 80.357%{opacity:1;transform:scale(1.04)} 80.446%{opacity:0} 100.000%{opacity:0;transform:scale(1.04)}}
.rt-s11{animation:rt-s11 22.4s linear infinite}
@keyframes rt-s12{0.000%{opacity:0;transform:scale(1.04)} 80.357%{opacity:0;transform:scale(1.04)} 80.446%{opacity:1} 83.482%{opacity:1;transform:scale(1.0)} 83.572%{opacity:0} 100.000%{opacity:0;transform:scale(1.0)}}
.rt-s12{animation:rt-s12 22.4s linear infinite}
@keyframes rt-s13{0.000%{opacity:0;transform:scale(1.0)} 83.482%{opacity:0;transform:scale(1.0)} 83.572%{opacity:1} 87.500%{opacity:1} 89.285%{opacity:0;transform:scale(1.05)} 100.000%{opacity:0;transform:scale(1.05)}}
.rt-s13{animation:rt-s13 22.4s linear infinite}
@keyframes rt-end{0.000%{opacity:0} 89.285%{opacity:0} 91.294%{opacity:1} 95.759%{opacity:1} 97.768%{opacity:0} 100.000%{opacity:0}}
.rt-end{animation:rt-end 22.4s linear infinite}
@keyframes rt-c1{0.000%{opacity:0} 1.786%{opacity:0} 3.572%{opacity:1} 13.393%{opacity:1} 13.482%{opacity:0} 100.000%{opacity:0}}
.rt-c1{animation:rt-c1 22.4s linear infinite}
@keyframes rt-c2{0.000%{opacity:0} 15.179%{opacity:0} 16.518%{opacity:1} 26.340%{opacity:1} 26.429%{opacity:0} 100.000%{opacity:0}}
.rt-c2{animation:rt-c2 22.4s linear infinite}
@keyframes rt-c3{0.000%{opacity:0} 28.125%{opacity:0} 29.241%{opacity:1} 37.053%{opacity:1} 37.143%{opacity:0} 100.000%{opacity:0}}
.rt-c3{animation:rt-c3 22.4s linear infinite}
@keyframes rt-c4{0.000%{opacity:0} 37.947%{opacity:0} 39.062%{opacity:1} 45.536%{opacity:1} 45.625%{opacity:0} 100.000%{opacity:0}}
.rt-c4{animation:rt-c4 22.4s linear infinite}
@keyframes rt-c5{0.000%{opacity:0} 55.804%{opacity:0} 57.143%{opacity:1} 73.214%{opacity:1} 73.303%{opacity:0} 100.000%{opacity:0}}
.rt-c5{animation:rt-c5 22.4s linear infinite}
@keyframes rt-c6{0.000%{opacity:0} 75.000%{opacity:0} 76.340%{opacity:1} 87.053%{opacity:1} 88.393%{opacity:0} 100.000%{opacity:0}}
.rt-c6{animation:rt-c6 22.4s linear infinite}
@keyframes rt-bar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}.rt-bar{transform-origin:left center;animation:rt-bar 22.4s linear infinite}
@keyframes rt-flicker{0%{filter:grayscale(1) contrast(1.15) brightness(1)}25%{filter:grayscale(1) contrast(1.15) brightness(.9)}50%{filter:grayscale(1) contrast(1.15) brightness(1.06)}75%{filter:grayscale(1) contrast(1.15) brightness(.95)}100%{filter:grayscale(1) contrast(1.15) brightness(1)}}.rt-old{animation:rt-flicker .24s steps(4) infinite}
@keyframes rt-flicker2{0%{filter:sepia(.4) saturate(.7) contrast(1.12) brightness(1)}25%{filter:sepia(.4) saturate(.7) contrast(1.12) brightness(.9)}50%{filter:sepia(.4) saturate(.7) contrast(1.12) brightness(1.06)}75%{filter:sepia(.4) saturate(.7) contrast(1.12) brightness(.95)}100%{filter:sepia(.4) saturate(.7) contrast(1.12) brightness(1)}}.rt-old-color{animation:rt-flicker2 .24s steps(4) infinite}
.rt-layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform}