/**
* brand.css - Surcouche WCAG 2.2 AA + Charte ÉMOICQ
* Chargé APRÈS les CSS du thème Kester (vendor non modifié).
* Ne jamais éditer public/theme/assets/, surcharger ici uniquement.
*
* CHARTE ÉMOICQ :
* --brand-gold : #fdb927 (or - remplace le rouge Kester #940f0f)
* --brand-navy : #131e26 (marine - fonds sombres)
* --brand-teal : #005d7e (sarcelle - accents secondaires)
*
* STRATÉGIE ROUGE → OR :
* Le thème utilise --theme-color: #940F0F (variable2.css).
* On la redéfinit ici (chargé après) → toutes les occurrences
* var(--theme-color) passent automatiquement à l'or. Zéro vendor modifié.
*/
/* ============================================================
POLICES AUTO-HÉBERGÉES (Roboto + Oswald)
Remplacent l'appel externe à Google Fonts : meilleur LCP, CSP plus
stricte, et CONFIDENTIALITÉ (aucune IP de visiteur envoyée à Google, Loi 25).
============================================================ */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/roboto-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/roboto-900.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/oswald-400.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/oswald-500.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/oswald-600.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/oswald-700.woff2') format('woff2');}
/* ACTION 2026-09-09 : Caveat (légende manuscrite du polaroid champions,
voir resources/views/theme/partials/polaroid-champions.blade.php)
auto-hébergée au lieu d'un appel Google Fonts - la CSP de production
(app/Http/Middleware/SecurityHeaders.php, style-src 'self' 'unsafe-inline')
n'autorise pas le domaine de feuilles de style de Google Fonts : le
externe était donc silencieusement bloqué, jamais chargé en
production. Fichiers extraits du
paquet npm @fontsource/caveat (licence SIL OFL, voir LICENCE-OFL.txt dans
ce dossier), sous-ensembles latin + latin-ext (accents français) pour un
seul poids (600, seul utilisé). MCP: aucun - polices statiques.
RAISON: contraste et confidentialité (aucune IP visiteur envoyée à
Google), cohérent avec Roboto/Oswald ci-dessus. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/caveat/caveat-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/caveat/caveat-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* ============================================================
TOKENS DE MARQUE ÉMOICQ
============================================================ */
:root {
--brand-gold: #fdb927;
--brand-navy: #131e26;
--brand-teal: #005d7e;
/* Écrase la variable Kester variable2.css → tout le rouge devient or */
--theme-color: #fdb927;
/* ACTION : largeur COMMUNE des panneaux de sous-menu de la navigation
publique (en-tête desktop, « Horaire » et « Compétition ») - UNE
seule valeur, réutilisée par .emoicq-nav-panel ci-dessous, jamais
recopiée panneau par panneau. RAISON : demande du fondateur - « les
sous menus doivent avoir une largeur égale, car certains sous menu
trop mince » ; un simple min-width laissait chaque panneau
s'ajuster à son propre contenu (un plancher, pas une largeur). */
--emoicq-nav-panel-largeur: 210px;
}
/* ============================================================
FONDS SOMBRES, marine ÉMOICQ remplace #111111 / #1a1a1a Kester
============================================================ */
/* Header principal */
.navbar-sticky,
.navbar-part1,
.sticky-menu .navbar-sticky,
.sticky-menu-mobile .navbar-sticky,
#rtsHeader.header-four .navbar-sticky {
background: var(--brand-navy) !important;
}
/* Sidebar mobile */
.slide-bar {
background: var(--brand-navy) !important;
}
/* Footer */
.footer {
background: var(--brand-navy) !important;
}
.footer.baseball .footer-bottom-area .bottom-area-inner {
background: #0c141b !important;
/* marine plus sombre pour la barre de bas de page */
}
/* Section PROCHAIN MATCH (bandeau baseball-court2.jpg → marine) */
.rts-latest-match.baseball {
background: var(--brand-navy) !important;
background-image: none !important;
}
/* Section CLASSEMENTS (baseball-court.jpg → marine foncé + overlay) */
.rts-player-static.baseball {
background: var(--brand-navy) !important;
background-image: none !important;
}
.rts-player-static.baseball::before {
background: rgba(19, 30, 38, 0.85) !important;
opacity: 1 !important;
}
/* Preloader, volleyball doré qui tourne (remplace le ballon soccer Kester) */
#rts__preloader .main-fader {
background: var(--brand-navy) !important;
}
#rts__preloader .loader svg {
animation: emoicq-ballspin 1.6s linear infinite;
transform-origin: center;
}
/* Neutralise le pulse par-path d'origine (sinon les coutures clignotent) */
#rts__preloader .loader svg path {
animation: none !important;
opacity: 1 !important;
}
@keyframes emoicq-ballspin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
#rts__preloader .loader svg { animation: none !important; }
}
/* ============================================================
HERO, remplace les images baseball par dégradé marine→sarcelle
.banner-single-1, .banner-single-1_2, .banner-single-3 (swiper home-five)
============================================================ */
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single.banner-bg,
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single-1,
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single-1_2,
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single-3 {
background-color: var(--brand-navy) !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
/* Photos beach-volley + overlay marine degrade (texte blanc AAA a gauche, photo visible a droite) */
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single-1 {
background-image: linear-gradient(to right, rgba(19,30,38,0.92) 0%, rgba(19,30,38,0.74) 45%, rgba(19,30,38,0.50) 100%), url('/img/beach/beach-volley-3.jpg') !important;
background-image: linear-gradient(to right, rgba(19,30,38,0.92) 0%, rgba(19,30,38,0.74) 45%, rgba(19,30,38,0.50) 100%), image-set(url('/img/beach/beach-volley-3.webp') type('image/webp'), url('/img/beach/beach-volley-3.jpg') type('image/jpeg')) !important;
}
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single-1_2 {
background-image: linear-gradient(to right, rgba(19,30,38,0.92) 0%, rgba(19,30,38,0.74) 45%, rgba(19,30,38,0.50) 100%), url('/img/beach/beach-volley-2.jpg') !important;
background-image: linear-gradient(to right, rgba(19,30,38,0.92) 0%, rgba(19,30,38,0.74) 45%, rgba(19,30,38,0.50) 100%), image-set(url('/img/beach/beach-volley-2.webp') type('image/webp'), url('/img/beach/beach-volley-2.jpg') type('image/jpeg')) !important;
}
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single-3 {
background-image: linear-gradient(to right, rgba(19,30,38,0.92) 0%, rgba(19,30,38,0.74) 45%, rgba(19,30,38,0.50) 100%), url('/img/beach/beach-volley-1.jpg') !important;
background-image: linear-gradient(to right, rgba(19,30,38,0.92) 0%, rgba(19,30,38,0.74) 45%, rgba(19,30,38,0.50) 100%), image-set(url('/img/beach/beach-volley-1.webp') type('image/webp'), url('/img/beach/beach-volley-1.jpg') type('image/jpeg')) !important;
}
/* Neutralise le sur-overlay ::before/::after pour laisser voir la photo */
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single.banner-bg::before,
.banner1.banner5 .bannerSlide2 .swiper-slide .banner-single.banner-bg::after {
background: transparent !important;
}
/* Image décorative baseball (joueur) dans rts-player-static → masquer */
.rts-player-static .banner-image {
display: none !important;
}
/* ============================================================
HOVER NAV, rouge → or déjà couvert par --theme-color mais on
réécrit les règles brand.css existantes pour cohérence
============================================================ */
#rtsHeader .nav__menu .menu-item:hover,
#rtsHeader .nav__menu li > a:hover,
#rtsHeader .nav__menu .menu-item:focus,
#rtsHeader .nav__menu li > a:focus,
#rtsHeader .rts-menu li:hover .menu-item,
#rtsHeader .rts-menu li .menu-item.active1 {
color: var(--brand-gold) !important;
}
/* Focus visible, outline or à la place du rouge */
.skip-link:focus {
outline-color: var(--brand-gold) !important;
}
/* Section-title accent (barre colorée, soulignement) → or */
.section-title-area1 .section-title::after,
.section-title-area1 .section-title::before {
background: var(--brand-gold) !important;
}
/* ============================================================
ORGANISÉ PAR ÉMOICQ, bloc remplacement sponsors
============================================================ */
.emoicq-org-block {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 2.5rem 1rem;
background: var(--brand-navy);
border-radius: 8px;
}
.emoicq-org-block span {
color: #ffffff;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.emoicq-org-block span strong {
color: var(--brand-gold);
}
/* ============================================================
SKIP LINK
============================================================ */
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 99999;
padding: 0.75rem 1.5rem;
background: #fff;
color: #000;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border: 3px solid #000;
border-radius: 0 0 4px 0;
/* Ratio sur blanc : 21:1, conforme */
}
.skip-link:focus {
top: 0;
outline: 3px solid #0040a0;
/* bleu AAA sur blanc : 9.37:1 */
outline-offset: 2px;
}
/* ============================================================
NAVIGATION, liens de nav illisibles (ratio ~1.22:1 signalé)
Correction : texte blanc (#fff) sur fond sombre → 21:1 sur #111
Règles avec ID + classes pour battre la spécificité du thème :
.sticky-menu .navbar-part1 .rts-menu .menu-item { color:#111 } → 3 classes
Notre règle : #rtsHeader + 3 classes = ID + 3 classes → gagne
============================================================ */
#rtsHeader .nav__menu .menu-item,
#rtsHeader .nav__menu li > a,
#rtsHeader .rts-menu .menu-item,
.sticky-menu .navbar-part1 .rts-menu .menu-item,
.sticky-menu-mobile .navbar-part1 .rts-menu .menu-item {
color: #ffffff !important;
}
#rtsHeader .nav__menu .menu-item:hover,
#rtsHeader .nav__menu li > a:hover,
#rtsHeader .nav__menu .menu-item:focus,
#rtsHeader .nav__menu li > a:focus,
#rtsHeader .rts-menu li:hover .menu-item,
#rtsHeader .rts-menu li .menu-item.active1,
.sticky-menu .navbar-part1 .rts-menu .menu-item.active1,
.sticky-menu .navbar-part1 .rts-menu a.menu-item:hover {
color: var(--brand-gold) !important;
/* Or #fdb927 sur fond marine #131e26 : 9.78:1, AAA */
}
/* Mobile menu (slide-bar) */
#rtsHeader .side-mobile-menu a.mm-link,
.side-bar .side-mobile-menu a.mm-link {
color: #ffffff !important;
}
/* ============================================================
ÉTAT ACTIF DU MENU (page réellement consultée), WCAG 1.4.1 :
jamais la couleur seule. Soulignement + graisse en plus de
l'or, sur les 3 zones du menu (liens de premier niveau,
sous-menus déroulants desktop, menu mobile).
============================================================ */
#rtsHeader .rts-menu li .menu-item.active1,
.sticky-menu .navbar-part1 .rts-menu .menu-item.active1 {
text-decoration: underline !important;
text-underline-offset: 6px;
text-decoration-thickness: 2px;
font-weight: 700;
}
/* Sous-menus « Horaire » / « Compétition » (desktop) */
#rtsHeader .emoicq-nav-panel li a.active1 {
background: var(--brand-gold) !important;
color: var(--brand-navy) !important;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Menu mobile (slide-bar), premier niveau et sous-menus */
#rtsHeader .side-mobile-menu a.mm-link.active1,
.side-bar .side-mobile-menu a.mm-link.active1 {
color: var(--brand-gold) !important;
text-decoration: underline !important;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
font-weight: 700;
}
/* Footer links, même problème rgb(33,37,41) sur fond sombre #111 */
.footer .widget-items .widget-list-item a,
.footer .address-widget a,
.footer .footer-bottom-links a,
.footer-bottom-area .footer-bottom-links a {
color: #dddddd !important;
/* #ddd sur #111 : ~9.7:1, conforme AA */
}
/* ============================================================
MARQUE / APP NAME, rouge #940f0f sur fond sombre → ratio 1.93:1 (ÉCHEC)
Correction : blanc #ffffff → 21:1
============================================================ */
.footer-bottom-area .brand,
.copyright .brand {
color: #ffffff !important;
}
/* ============================================================
FOCUS VISIBLE, renforcement focus pour tous contrôles
WCAG 2.4.11 (AA, nouveau en 2.2)
============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #e8e800 !important;
/* jaune sur fond sombre : ~10:1 */
outline-offset: 3px !important;
border-radius: 2px;
}
/* ============================================================
CIBLES TACTILES, min 24×24px (WCAG 2.5.8 AA, nouveau en 2.2)
============================================================ */
.footer .widget-items .widget-list-item a,
.footer-bottom-links a {
display: inline-block;
padding: 0.35rem 0.25rem;
min-height: 24px;
line-height: 1.4;
}
.scroll-top-btn {
cursor: pointer;
min-width: 44px;
min-height: 44px;
border: none;
/* Pilule or + flèche marine : visible sur fond clair ET foncé
(avant : fond transparent + flèche blanche = invisible sur fond clair). */
background: var(--brand-gold) !important;
border-radius: 22px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
padding: 0;
}
.scroll-top-btn i,
.scroll-top-btn svg {
/* svg : ACTION 2026-08-14, icônes SVG intégrées (voir components/icon.blade.php)
remplaçant les - même sélecteur, même couleur. */
color: var(--brand-navy) !important;
}
/* ============================================================
HAMBURGER, cible min 44×44px (WCAG 2.5.5 best practice)
============================================================ */
.hamburger-menu {
min-width: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* ============================================================
MOBILE MENU, liens assez grands
============================================================ */
.side-mobile-menu ul li a {
padding: 0.5rem 1rem;
display: block;
min-height: 44px;
line-height: 2.2;
}
/* ============================================================
CLASSEMENTS, titres de poule (blanc sur blanc → illisible)
Remplacement de l'inline style="color:#fff" retiré de la vue
============================================================ */
.pool-heading {
color: #f5f5f5 !important;
/* #f5f5f5 sur fond thème sombre (#0d0d0d env.) : ~19:1 */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* ============================================================
SWIPER PAGINATION, cibles 12×12px → élargir à 24×24px
(WCAG 2.5.8 AA, sans casser la mise en page)
============================================================ */
.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px !important;
/* padding agrandit la zone cliquable à 24×24 sans changer l'apparence visuelle */
box-sizing: content-box !important;
margin: 0 2px !important;
}
/* ============================================================
IDENTITÉ DÉPARTEMENT, icônes et badges rivalité inter-métiers
============================================================ */
/* Icône inline dans les tableaux et les cellules */
.dept-icon {
width: 48px;
height: 48px;
object-fit: contain;
flex: 0 0 auto;
vertical-align: middle;
flex-shrink: 0;
border-radius: 2px;
}
/* Cellule department + nom d'équipe dans les tableaux */
.dept-cell {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.dept-name {
color: var(--brand-gold);
font-weight: 600;
font-size: 0.85em;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.dept-separator {
color: #888;
font-size: 0.8em;
}
/* Code d'équipe secondaire (sous le nom du département) */
.dept-team-code {
display: block;
font-size: 0.75em;
color: #aaa;
margin-top: 0.15rem;
}
/* Duel de départements dans les résultats */
.dept-duel {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.dept-duel-side {
display: flex;
align-items: center;
gap: 0.35rem;
}
.dept-duel-vs {
color: var(--brand-gold);
font-weight: 700;
font-size: 0.8em;
padding: 0 0.25rem;
}
/* Badge département sur la page équipes */
.dept-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(253, 185, 39, 0.12);
border: 1px solid var(--brand-gold);
border-radius: 4px;
padding: 0.2rem 0.5rem;
margin-bottom: 0.4rem;
}
.dept-badge .dept-name {
font-size: 0.78em;
}
/* Grande icône sur la carte équipe */
.dept-icon-hero {
width: 64px;
height: 64px;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(253, 185, 39, 0.4));
}
/* Icône dans le slider prochains matchs */
.dept-icon-match {
width: 48px;
height: 48px;
object-fit: contain;
filter: drop-shadow(0 0 6px rgba(255,255,255,0.2));
}
/* Icône large dans le calendrier */
.dept-icon-lg {
width: 36px;
height: 36px;
object-fit: contain;
vertical-align: middle;
}
/* Nom département principal dans le calendrier */
.dept-name-main {
display: block;
font-size: 1em;
color: #ffffff;
font-weight: 700;
}
/* Code équipe secondaire dans le calendrier */
.dept-team-secondary {
display: block !important;
font-size: 0.75em !important;
color: #aaa !important;
font-weight: 400 !important;
margin-top: 0.1rem;
}
/* Code équipe secondaire dans le slider home */
.dept-team-secondary-home {
font-size: 0.75em;
color: rgba(255,255,255,0.6);
margin-top: 0.15rem;
margin-bottom: 0;
}
/* Classement des départements, différentiel positif/négatif */
.dept-net-pos {
color: #4caf50;
/* #4caf50 sur fond sombre ~5.3:1, AA conforme */
}
.dept-net-neg {
color: #b71c1c;
/* #b71c1c sur fond sombre ~4.6:1, AA conforme */
}
/* Sous-titre section rivalité */
/* #ccc sur blanc = 1.60:1 → FAIL. Correction : #595959 = 7:1 → PASS AAA.
Sur fond sombre rts-dept-rivalry il y a une surcharge plus bas. */
.dept-subtitle {
color: #595959 !important;
font-size: 1rem;
margin-top: 0.5rem;
}
/*
* .letter (JOURS/HEURES/MINUTES/SEC du countdown) :
* - Sur fond marine .rts-latest-match.baseball (home) → blanc 16.92:1 AAA.
* - Sur fond clair .rts-latest-match (page /departements, fond thème) → #131e26 AAA.
* - Générique : #131e26 sur fond clair = 16.92:1 AAA.
*/
.countdown .letter,
.match-countdown-area .countdown .letter {
color: var(--brand-navy, #131e26) !important;
/* marine sur fond clair : 16.92:1, AAA */
}
/* Section "Prochain match" home (fond marine) : blanc sur marine */
.rts-latest-match.baseball .countdown .letter,
.rts-latest-match.baseball .match-countdown-area .countdown .letter {
color: #ffffff !important;
/* blanc sur marine #131e26 : 16.92:1, AAA */
}
/*
* Widget list items footer, contraste 1.1:1 (#212529 sur #131e26).
* Ciblage exhaustif : .widget-items, .address-widget, et sans classe.
* On surcharge Bootstrap body color (#212529) et Kester (#888888) avec !important.
* #dddddd sur #131e26 : 12.45:1, AAA
*/
.footer .widget-list-item,
.footer .widget-list-item a,
.footer .widget-list-item span,
.footer .widget-list-item i,
.footer-bottom-area .widget-list-item,
.footer-bottom-area .widget-list-item a {
color: #dddddd !important;
/* #ddd sur #131e26 : 12.45:1, AAA */
}
/* Footer INFORMATIONS : centrer verticalement l'icône avec son texte
(le thème utilisait align-items:flex-start + un nudge translateY(7px) → mal aligné) */
.footer .address-widget .widget-list-item {
align-items: center !important;
}
.footer .address-widget .widget-list-item i {
transform: none !important;
}
/* Légende du classement équitable des départements (couleur héritée = lisible
sur fond clair comme foncé). Mobile-first. */
.dept-legend {
color: #333333; /* AAA sur les fonds clairs où ce bloc apparaît (accueil + /departements) */
font-size: 0.92rem;
line-height: 1.5;
margin: 0 0 1rem;
max-width: 62ch;
}
.dept-legend strong { font-weight: 800; }
/* Bouton « Trouver mes matchs » (calendrier) : oriente vers /horaire/groupes
(recherche par équipe + filtre par département), en haut de page, 2026-08-14 */
.emoicq-find-match-cta {
display: flex;
justify-content: center;
margin: 0.9rem 0 1.4rem;
}
.find-match-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-height: 56px;
padding: 0.75rem 1.5rem;
background: var(--brand-gold, #fdb927);
color: var(--brand-navy, #131e26);
border: 2px solid var(--brand-navy, #131e26);
border-radius: 12px;
font-size: 1.05rem;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.find-match-btn i,
.find-match-btn svg { font-size: 1.2rem; color: var(--brand-navy, #131e26); }
.find-match-btn-text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.find-match-btn-text strong { color: var(--brand-navy, #131e26); font-weight: 800; }
.find-match-btn-text small { color: #3a2e00; font-weight: 600; font-size: 0.82rem; }
.find-match-btn:hover,
.find-match-btn:focus-visible {
color: var(--brand-navy, #131e26);
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.find-match-btn:focus-visible {
outline: 3px solid var(--brand-navy, #131e26);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.find-match-btn:hover { transform: translateY(-1px); }
}
@media (max-width: 480px) {
.find-match-btn { width: 100%; max-width: 360px; justify-content: center; }
}
/* Récap des durées sur le calendrier (pastilles lisibles sur fond clair ou foncé) */
.emoicq-schedule-recap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 0.9rem;
}
.rcp-pill {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 999px;
padding: 0.5rem 1rem;
font-size: 0.95rem;
font-weight: 700;
color: #131e26;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}
.rcp-pill strong { color: #0050A8; font-weight: 800; }
/* Page « À propos » (contenu francisé, fond foncé du thème Kester) */
.emoicq-about { max-width: 760px; margin: 0 auto; color: #e8edf2; }
.emoicq-about .about-title { color: #ffffff; font-weight: 800; margin-bottom: 1.25rem; }
.emoicq-about .about-lead { font-size: 1.15rem; line-height: 1.7; color: #f1f4f8; margin-bottom: 1.1rem; }
.emoicq-about .about-text { font-size: 1.05rem; line-height: 1.7; color: #cfd6dd; margin-bottom: 1.4rem; }
.emoicq-about .about-highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.emoicq-about .about-highlights li { position: relative; padding-left: 1.6rem; color: #f1f4f8; font-weight: 600; line-height: 1.5; }
.emoicq-about .about-highlights li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; background: var(--brand-gold); border-radius: 50%; }
/* Saisie de score : l'indicateur de chargement (overlay invisible) ne doit jamais
intercepter les clics sur les boutons +/- (sinon clics « avalés » sur réseau lent). */
[data-flux-loading-indicator] { pointer-events: none !important; }
/* ============================================================
ALTERNANCE CLAIR/SOMBRE, Sections Home ÉMOICQ
Hero (sombre) → Prochains matchs (clair, géré par le thème)
→ Rivalité (SOMBRE marine) → Classements (CLAIR) → Prochain match (SOMBRE) → Footer (sombre)
Contraste AAA ≥7:1 : blanc #fff sur marine #131e26 ~14:1 ; marine #131e26 sur #f6f6f6 ~14:1
============================================================ */
/* --- RIVALITÉ DES DÉPARTEMENTS : fond CLAIR --- */
/* Équilibre clair-dominant : 4 sections claires + 1 seul accent sombre (Prochain match) */
.rts-dept-rivalry {
background: #f8f8f8 !important;
padding-top: 64px !important;
padding-bottom: 64px !important;
}
/* Titre section rivalité → marine sur clair */
.rts-dept-rivalry .section-title {
color: var(--brand-navy) !important;
/* marine #131e26 sur #f8f8f8 : ~14:1, AAA */
}
/* Paragraphe intro rivalité → #404040 sur clair */
.rts-dept-rivalry .section-title-area p {
color: #404040 !important;
/* #404040 sur #f8f8f8 : 9.59:1, AAA */
}
/* Sous-titre rivalité */
.rts-dept-rivalry .dept-subtitle {
color: #404040 !important;
/* 9.59:1 sur #f8f8f8, AAA */
}
/* Lien "VOIR LE CLASSEMENT COMPLET" → bouton marine sur fond clair */
.rts-dept-rivalry .nxt-match-btn {
background: var(--brand-navy) !important;
color: #ffffff !important;
border-color: var(--brand-navy) !important;
/* blanc sur marine : 16.92:1, AAA */
}
.rts-dept-rivalry .nxt-match-btn:hover {
background: var(--brand-gold) !important;
color: var(--brand-navy) !important;
border-color: var(--brand-gold) !important;
/* marine sur or : 9.78:1, AAA */
}
/* Rangs, valeurs dans le tableau rivalité → marine sur fond blanc de ligne */
.rts-dept-rivalry .position-number,
.rts-dept-rivalry .win-count,
.rts-dept-rivalry .table td,
.rts-dept-rivalry .table td span {
color: var(--brand-navy) !important;
/* marine #131e26 sur #fff/#f5f5f5 : 16.92:1, AAA */
}
/* Noms de départements dans la section rivalité → marine (lisible sur fond clair) */
.rts-dept-rivalry .dept-name {
color: var(--brand-navy) !important;
/* marine #131e26 sur blanc : 16.92:1, AAA */
}
/*
* Tableau rivalité : fond des lignes, fond CLAIR, texte marine.
* Fond clair = sections impaires #fff, paires #f5f5f5.
* marine sur #fff : 16.92:1, AAA / marine sur #f5f5f5 : 14:1, AAA.
*/
.rts-dept-rivalry .table tbody tr:nth-child(odd) {
background: #ffffff !important;
/* marine sur blanc : 16.92:1, AAA */
}
.rts-dept-rivalry .table tbody tr:nth-child(even) {
background: #f5f5f5 !important;
/* marine sur #f5f5f5 : 14:1, AAA */
}
.rts-dept-rivalry .table {
--bs-table-bg: #ffffff;
--bs-table-striped-bg: #f5f5f5;
background: #ffffff !important;
border-color: #d0d0d0 !important;
}
.rts-dept-rivalry .table td,
.rts-dept-rivalry .table th {
border-color: #d0d0d0 !important;
}
/* Différentiel positif/négatif sur fond CLAIR → couleurs foncées accessibles */
.rts-dept-rivalry .dept-net-pos {
color: #276727 !important;
/* vert foncé #276727 sur blanc : 9.33:1, AAA */
}
.rts-dept-rivalry .dept-net-neg {
color: #b71c1c !important;
/* rouge foncé #b71c1c sur blanc : 5.94:1, AA conforme (texte court) */
}
/* --- CLASSEMENTS & RÉSULTATS : fond CLAIR --- */
.rts-player-static.baseball {
background: #f6f6f6 !important;
background-image: none !important;
padding-top: 64px !important;
padding-bottom: 64px !important;
}
.rts-player-static.baseball::before {
display: none !important;
/* Pas d'overlay sur fond clair */
}
/* Titre et paragraphe de la section classements → marine sur clair */
.rts-player-static .section-title {
color: var(--brand-navy) !important;
/* marine #131e26 sur #f6f6f6 : ~14:1, AAA */
}
.rts-player-static p,
.rts-player-static .section-title-area p,
.rts-player-static .section-inner > p {
color: #404040 !important;
/* #404040 sur #f6f6f6 : 9.59:1, AAA
(annule la règle globale "Paragraphes sur fonds sombres" qui mettait rgba blanc) */
}
/* Cellules du tableau classements → marine sur fond clair */
.rts-player-static .table td,
.rts-player-static .table td span,
.rts-player-static .position-number,
.rts-player-static .player,
.rts-player-static .win-count {
color: var(--brand-navy) !important;
/* marine sur #f6f6f6 : ~14:1, AAA */
}
/* Tableau classements : fond blanc des lignes */
.rts-player-static .table tbody tr {
background: #ffffff !important;
}
.rts-player-static .table tbody tr:hover {
background: #f0f0f0 !important;
}
.rts-player-static .table {
background: #ffffff !important;
}
/* Résultats récents (right-side-content) → textes marine sur fond clair */
.rts-player-static .right-side-content .top,
.rts-player-static .right-side-content h3.top {
color: var(--brand-navy) !important;
}
.rts-player-static .right-side-content .date,
.rts-player-static .right-side-content .result,
.rts-player-static .right-side-content .team {
color: var(--brand-navy) !important;
}
.rts-player-static .right-side-content .team span {
color: var(--brand-gold) !important;
}
.rts-player-static .match-wrapper {
background: #ffffff !important;
border: 1px solid #e0e0e0 !important;
}
/* --- PROCHAINS MATCHS : fond CLAIR (garantir) --- */
.rts-upcoming-match {
background: #f6f6f6 !important;
padding-top: 64px !important;
padding-bottom: 64px !important;
}
.rts-upcoming-match .section-title {
color: var(--brand-navy) !important;
}
.rts-upcoming-match p,
.rts-upcoming-match .section-title-area p {
color: #404040 !important;
/* #404040 sur #f6f6f6 : 9.59:1, AAA (était #595959 = 6.48:1 FAIL) */
}
/*
* Cartes "Prochains matchs", CLAIRES (#fff) pour lisibilité AAA.
* Avant : fond marine #131e26, textes marine/gris → 1:1 et 2.42:1 FAIL.
* Après : fond blanc #fff, textes marine #131e26 → 16.92:1 AAA.
*/
.rts-upcoming-match .match-wrapper {
background: #ffffff !important;
border: 1px solid #e0e0e0 !important;
box-shadow: 0 2px 8px rgba(19,30,38,0.10) !important;
}
/* Noms d'équipes / département dans les cartes claires */
.rts-upcoming-match .match-wrapper h3.team,
.rts-upcoming-match .match-wrapper .team {
color: var(--brand-navy) !important;
/* #131e26 sur #fff : 16.92:1, AAA */
}
.rts-upcoming-match .match-wrapper .team span {
color: var(--brand-navy) !important;
/* "VS" : marine #131e26 sur #fff : 16.92:1, AAA
(or #fdb927 sur blanc = 1.73:1 FAIL AAA) */
}
/* Date et heure dans les cartes claires */
.rts-upcoming-match .match-wrapper .date,
.rts-upcoming-match .match-wrapper .time,
.rts-upcoming-match .match-wrapper p.date,
.rts-upcoming-match .match-wrapper p.time {
color: #404040 !important;
/* #404040 sur #fff : 9.59:1, AAA (était #595959 sur marine = 2.42:1 FAIL) */
}
/* Code équipe secondaire dans les cartes claires */
.rts-upcoming-match .match-wrapper .dept-team-secondary-home,
.rts-upcoming-match .match-wrapper p.dept-team-secondary-home {
color: #404040 !important;
/* #404040 sur #fff : 9.59:1, AAA (était rgba/marine = FAIL) */
}
/* Icônes département dans les cartes claires, garder apparence SVG naturelle */
.rts-upcoming-match .match-wrapper .dept-icon-match {
filter: none !important;
/* Enlever le drop-shadow blanc conçu pour fond sombre */
}
/* Badge statut EN COURS sur carte claire */
.rts-upcoming-match .match-wrapper .match-status-live {
background: #b71c1c !important;
color: #ffffff !important;
/* blanc sur rouge #b71c1c : 4.6:1, AA (texte court en gras) */
}
/* Badge À VENIR sur carte claire, or + marine */
.rts-upcoming-match .match-wrapper .match-status-upcoming {
background: var(--brand-gold) !important;
color: var(--brand-navy) !important;
/* marine sur or : 9.78:1, AAA */
}
/* ============================================================
ESPACEMENTS, tableaux et sections (Problème #5)
============================================================ */
/* Padding cellules : col RANG/POS non collée au bord */
.rts-dept-rivalry .table td:first-child,
.rts-dept-rivalry .table th:first-child,
.rts-player-static .table td:first-child,
.rts-player-static .table th:first-child {
padding-left: 16px !important;
}
.rts-dept-rivalry .table td,
.rts-dept-rivalry .table th,
.rts-player-static .table td,
.rts-player-static .table th {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/*
* DÉFAUT PRÉEXISTANT (confirmé 2026-08-14 avec les feuilles d'origine du thème,
* AVANT toute purge CSS - ce n'est pas une régression de l'allègement) :
* le thème (main.css) neutralise sa propre règle "padding-left: 40px" sur td/th
* via le raccourci "padding: 20px 0 !important" placé juste avant (le raccourci
* !important gagne toujours sur le "padding-left" non !important qui suit).
* Résultat : aucun espacement horizontal entre colonnes. Sur mobile étroit
* (≤480px), les en-têtes « RANG » et « DÉPARTEMENT » se touchent et se lisent
* comme un seul mot, et le bouton « Suivre » (97px avec son libellé) fait
* déborder le tableau de son conteneur.
* Correctif ciblé mobile uniquement : espace entre en-têtes/cellules +
* bouton Suivre compact (icône seule, cible tactile 44px WCAG 2.5.8 conservée).
* Le bureau (>480px) n'est pas touché.
*/
@media (max-width: 480px) {
.rts-dept-rivalry .table th:first-child,
.rts-dept-rivalry .table td:first-child,
.rts-player-static .table th:first-child,
.rts-player-static .table td:first-child {
padding-left: 10px !important;
}
.rts-dept-rivalry .table th:not(:first-child),
.rts-dept-rivalry .table td:not(:first-child),
.rts-player-static .table th:not(:first-child),
.rts-player-static .table td:not(:first-child) {
padding-left: 4px !important;
}
/* Bouton Suivre compact : icône seule sur mobile pour libérer la place
qui fait déborder le tableau. Libellé conservé pour les lecteurs
d'écran (technique "visually-hidden" standard). */
.dept-fav-cell .emoicq-fav-btn {
width: 44px;
min-width: 44px;
padding: .35rem;
justify-content: center;
gap: 0;
}
.dept-fav-cell .emoicq-fav-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/* Section prochain match, espacement */
.rts-latest-match.baseball {
padding-top: 64px !important;
padding-bottom: 64px !important;
}
/* Titre des sections, pas collé en haut */
.rts-dept-rivalry .section-title-area,
.rts-player-static .section-inner .section-title-area,
.rts-upcoming-match .section-title-area,
.rts-latest-match .section-title-area {
margin-bottom: 2.5rem !important;
}
/* ============================================================
PROCHAINS MATCHS, Badges statut (Problème #6)
============================================================ */
.match-wrapper {
position: relative;
}
.match-status-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
padding: 3px 10px;
border-radius: 12px;
text-transform: uppercase;
white-space: nowrap;
}
.match-status-live {
background: #b71c1c;
color: #ffffff;
/* blanc sur rouge #b71c1c : 4.6:1, AA conforme ; texte court en gras */
animation: pulse-live 2s ease-in-out infinite;
}
.match-status-upcoming {
background: var(--brand-gold);
color: var(--brand-navy);
/* marine sur or : 9.78:1, AAA */
}
.match-en-cours {
border: 2px solid #b71c1c !important;
}
@keyframes pulse-live {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
.match-status-live {
animation: none !important;
}
}
/* FORMULAIRE CONTACT : règle unique dans la section
« FORMULAIRE CONTACT, champs clairs » plus bas dans ce fichier (DRY, un seul endroit). */
/* ============================================================
VISUALLY HIDDEN (classe utilitaire Bootstrap 5)
Réutilisée pour les labels cachés du formulaire contact
============================================================ */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ============================================================
WCAG 2.2 AAA, HEADING SUR FOND SOMBRE
Remplace les inline style="color:#fff" retirés des vues.
============================================================ */
.wcag-heading-on-dark {
color: #ffffff !important;
/* blanc sur fond sombre #111/#131e26 : >14:1, AAA */
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*
* .dept-team-secondary-home : rgba(255,255,255,0.6) sur fond clair = 1.08:1 FAIL.
* Le composant .rts-latest-match a bg #f6f6f6 (clair), texte foncé requis.
* On corrige → #595959 = 7.00:1 sur #f6f6f6, AAA.
*/
.dept-team-secondary-home {
color: #595959 !important;
/* 7.00:1 sur #f6f6f6, AAA */
}
/* Sous-texte équipes sur fond sombre (section PROCHAIN MATCH marine) */
.match-detail-secondary {
color: rgba(255,255,255,0.9) !important;
font-size: 0.85rem;
/* blanc quasi-opaque sur fond marine : >12:1, AAA */
}
/*
* .dept-name et VS (.dept-duel-vs) sont en or sur #f6f6f6 dans la section
* .rts-latest-match (fond clair). Ratio or/gris clair = 1.6:1 → FAIL.
* Dans ce contexte spécifique (fond clair), on surcharge en marine.
*/
.rts-latest-match .dept-name,
.rts-upcoming-match .dept-name,
.rts-latest-match .dept-duel-vs,
.rts-upcoming-match .dept-duel-vs,
.rts-latest-match .team,
.rts-upcoming-match .team,
.rts-latest-match h3.team {
color: var(--brand-navy) !important;
/* marine #131e26 sur #f6f6f6 : 12.5:1, AAA */
}
/* ============================================================
FILIGRANE « LIVE », visible sur fond clair ET fond sombre
Le thème Kester définit color:#fff sur ::after, invisible sur #f6f6f6.
On surcharge : marine très translucide sur fond clair, même valeur sur sombre.
Classe : .rts-latest-match .latest-match-inner::after (main.css l.8907)
============================================================ */
.rts-latest-match .latest-match-inner::after {
color: rgba(19, 30, 38, 0.06) !important;
/* marine très translucide : discret mais visible sur fond clair #f6f6f6 */
/* Sur fond sombre (rts-latest-match.baseball = brand-navy) : valeur identique,
légèrement visible comme ombre, reste décoratif et non-intrusif */
}
/* ============================================================
WCAG 2.2 AAA, CONTRASTE 7:1 (1.4.6)
Corrections appliquées 2026-06-19
============================================================ */
/*
* Or #fdb927 sur blanc #fff : ratio 1.73:1 → FAIL AAA.
* Remplacement par marine #131e26 sur blanc : 9.78:1 → PASS AAA.
* Concerne : .dept-name, .dept-duel-vs, .pts-count sur fond clair.
*/
.dept-name {
color: var(--brand-navy) !important;
/* #131e26 sur blanc #fff : 9.78:1, AAA */
}
.dept-duel-vs {
color: var(--brand-navy) !important;
/* #131e26 sur blanc #fff : 9.78:1, AAA */
}
/*
* Scores (pts-count) en or sur blanc → marine.
* Les scores EN GRAS sur fond sombre restent en or (contexte dark conservé).
*/
.td.pts-count {
color: var(--brand-navy) !important;
font-weight: 700;
/* #131e26 sur blanc #fff : 9.78:1, AAA */
}
/*
* .win-count (tableaux) : #777 sur blanc = 4.48:1 → FAIL AA.
* Correction → #595959 = 7.00:1 → PASS AAA.
*/
.win-count {
color: #595959 !important;
/* 7.00:1 sur blanc #fff, AAA */
}
/*
* .dept-team-code / .dept-team-secondary : #aaa sur blanc = 2.32:1 → FAIL.
* Correction → #595959 = 7.00:1 → PASS AAA.
*/
.dept-team-code,
.dept-team-secondary {
color: #595959 !important;
/* 7.00:1 sur blanc #fff, AAA */
}
/*
* .dept-separator : #888 sur blanc = 3.54:1 → FAIL.
* Correction → #595959.
*/
.dept-separator {
color: #595959 !important;
}
/*
* .pool-heading : #f5f5f5 sur blanc = 1.09:1 → FAIL.
* Correction → marine #131e26 sur blanc = 9.78:1 → PASS AAA.
*/
.pool-heading {
color: var(--brand-navy) !important;
text-shadow: none !important;
/* #131e26 sur blanc #fff : 9.78:1, AAA */
}
/*
* Texte blanc sur or (#fdb927) dans les en-têtes de tableaux (.head-tr th)
* Ratio 1.73:1 → FAIL. Correction : marine #131e26 sur or = 9.78:1 → PASS AAA.
*/
.head-tr th,
table .head-tr th,
.table .head-tr th {
color: var(--brand-navy) !important;
background: var(--brand-gold) !important;
/* marine sur or : 9.78:1, AAA */
}
/*
* Dates (.match-date, .match-type, .date, .time) en blanc sur or → marine sur or.
*/
.match-date,
.match-type,
.rts-match-area .date,
.rts-match-area .time {
color: var(--brand-navy) !important;
/* #131e26 sur or #fdb927 : 9.78:1, AAA */
}
/*
* Liens de navigation : bleu #0d6efd sur blanc = 4.5:1 → FAIL AAA (besoin 7:1).
* Correction : bleu foncé #0040a0 = 9.37:1 → PASS AAA.
* N'affecte QUE les pages du thème Kester (le layout public.blade.php Flux/Tailwind
* utilise text-blue-700 = #1d4ed8 = 7.72:1 qui passe AAA, pas touché).
*/
#rtsHeader .nav__menu .menu-item,
#rtsHeader .nav__menu li > a,
#rtsHeader .rts-menu .menu-item {
color: #ffffff !important;
/* blanc sur marine #131e26 : 14.7:1, AAA (déjà défini plus haut, confirmé) */
}
/* Surcharge footer avec fond sombre : les liens doivent rester blancs */
.footer .widget-items .widget-list-item,
.footer .widget-items .widget-list-item a,
.footer .address-widget a,
.footer .footer-bottom-links a,
.footer-bottom-area .footer-bottom-links a {
color: #dddddd !important;
/* #ddd sur #131e26 : ~8.9:1, AAA */
}
/* Li wrappers dans la nav et footer qui héritent un dark color du parent */
#rtsHeader .nav__menu li,
#rtsHeader .rts-menu li,
.slide-bar .side-mobile-menu ul li,
.footer .widget-items .widget-list-item,
.footer-bottom-area .widget-list-item {
color: #ffffff !important;
/* blanc sur fond marine, couvre les `- ` wrappers détectés par le scanner */
}
/*
* Banner section headings blanc sur blanc (1:1), corrigibles via override ?
* Le problème est que l'image de fond n'est pas chargée, donc fond = blanc.
* Forçage du fond de la section banner en marine (déjà fait via gradient au-dessus).
* L'override ici ajoute la protection texte marine sur fond clair au cas où.
*/
.banner-heading {
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
/*
* .pretitle dans les banners/heroes : badge or + marine, marine sur or : 9.78:1, AAA.
* Exclure .rts-sponsors-section (watermark 220px décoratif, non-texte WCAG 1.4.6).
*/
.banner-content .pretitle,
.banner1 .pretitle,
.pretitle:not(.rts-sponsors-section .pretitle) {
color: var(--brand-navy) !important;
background: rgba(253,185,39,0.9);
padding: 0.15em 0.4em;
border-radius: 3px;
/* marine sur or : 9.78:1, AAA */
}
/*
* Watermark .pretitle de la section sponsors, élément décoratif (non-texte au sens
* WCAG 1.4.6 car il est masqué par la mise en page). On restaure l'apparence thème :
* transparent + stroke très clair. Pas de fond or ajouté.
*/
.rts-sponsors-section .pretitle {
color: transparent !important;
background: transparent !important;
-webkit-text-fill-color: rgba(0,0,0,0.06) !important;
-webkit-text-stroke-color: rgba(0,0,0,0.08) !important;
padding: 0 !important;
border-radius: 0 !important;
}
/*
* Le thème Kester fixe color:#999999 sur tout `p` → 2.85:1 sur blanc → FAIL.
* Correction globale → #595959 = 7.00:1 sur blanc, AAA.
* Exceptions pour les fonds sombres (déjà gérées par couleur blanche explicite).
*/
p,
.rts-dept-rivalry p,
.section-subtitle,
p.p1,
p.p2 {
color: #595959;
/* 7.00:1 sur blanc #fff, AAA */
}
/* Paragraphes sur fonds sombres : rester blancs.
NB: .rts-player-static est fond CLAIR → exclu d'ici, géré par sa propre règle. */
.rts-latest-match p,
.banner-content p,
.footer p,
.slide-bar p,
.rts-dept-rivalry .dept-subtitle {
color: rgba(255,255,255,0.9) !important;
}
/* ============================================================
WCAG 2.2 AAA, FOCUS VISIBLE RENFORCÉ (2.4.13)
Anneau ≥2px, contraste ≥3:1 avec fond (7:1 visé pour AAA).
Or/noir sur fond blanc : ratios excellents.
============================================================ */
/* Réinitialise la règle skip-link qui utilisait rouge #e41b23 (insuffisant AAA) */
.skip-link:focus {
outline: 3px solid #0040a0 !important;
/* bleu #0040a0 sur blanc : 9.37:1, AAA */
outline-offset: 3px !important;
}
/* Focus universel (surcharge la règle précédente) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.menu-item:focus-visible,
.mm-link:focus-visible {
outline: 3px solid #0040a0 !important;
/* bleu #0040a0 sur blanc : 9.37:1 (≥3:1 requis, ≥7:1 AAA visé) */
outline-offset: 3px !important;
border-radius: 2px;
}
/* Focus sur fonds sombres (nav marine, footer marine) : or sur marine */
#rtsHeader a:focus-visible,
#rtsHeader button:focus-visible,
.slide-bar a:focus-visible,
.footer a:focus-visible {
outline: 3px solid var(--brand-gold) !important;
/* or #fdb927 sur marine #131e26 : 9.78:1, AAA */
outline-offset: 3px !important;
}
/* Focus sur la carte météo (fond dégradé variable selon la condition, voir
section MÉTÉO plus bas) : même principe - le bleu #0040a0 réglé pour un
fond blanc y deviendrait illisible. Or mesuré contre le point le PLUS
CLAIR de chacun des 7 dégradés (le cas le plus défavorable) : de 3.60:1
(brouillard) à 8.69:1 (orage), toujours ≥ 3:1 (SC 1.4.11/2.4.13). */
.meteo-tournoi-carte a:focus-visible,
.meteo-tournoi-carte [tabindex]:focus-visible {
outline: 3px solid var(--brand-gold) !important;
outline-offset: 3px !important;
}
/* ============================================================
WCAG 2.2 AAA, CIBLES 44×44px (2.5.5)
Objectif : tout contrôle interactif ≥ 44×44px CSS.
============================================================ */
/* Skip link */
.skip-link {
padding: 0.85rem 1.5rem !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
}
/* Logo (header) : agrandir la zone cliquable
IMPORTANT : ne PAS forcer display:inline-flex sur .logo-sticky, le thème
Kester le masque via display:none par défaut et le réaffiche en sticky.
Forcer les deux à la fois crée le doublon visuel rapporté. */
a.logo,
.navbar-part1 a.logo {
display: inline-flex !important;
align-items: center;
min-height: 44px !important;
padding: 0.25rem 0.5rem !important;
}
/* .logo-sticky : masqué en PERMANENCE, le logo principal (.logo) est toujours visible.
Le sélecteur ID+classe bat le display:block que Kester JS applique via .sticky-menu. */
#rtsHeader a.logo-sticky,
#rtsHeader .sticky-menu a.logo-sticky,
#rtsHeader.sticky-menu a.logo-sticky {
display: none !important;
}
/* Bouton fermer sidebar, 31×32px → 44×44px (2.5.5 AAA).
Double sélecteur pour battre la spécificité du thème. */
.slide-bar .slide-bar-close,
button.slide-bar-close {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0.5rem !important;
cursor: pointer;
box-sizing: border-box !important;
font-size: 1.25rem !important;
}
/* Liens nav main : élargir zone cliquable */
#rtsHeader .nav__menu .menu-item,
#rtsHeader .rts-menu .menu-item,
.navbar-part1 .rts-menu a.menu-item {
padding: 0.65rem 0.9rem !important;
display: inline-block !important;
min-height: 44px !important;
line-height: 1.6 !important;
}
/* Footer links (déjà partiellement, on renforce à 44px) */
.footer .widget-items .widget-list-item a,
.footer .address-widget a,
.footer .footer-bottom-links a,
.footer-bottom-area .footer-bottom-links a {
display: inline-flex !important;
align-items: center;
min-height: 44px !important;
padding: 0.5rem 0.25rem !important;
}
/* Scroll-top button */
.scroll-top-btn,
.scroll-top-btn1 {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/*
* Flèches swiper prev/next, 40×40px → 44×44px (2.5.5 AAA).
* On agrandit via padding (la taille de la flèche reste visuellement 40px).
*/
.swiper-button-prev,
.swiper-button-next {
min-width: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 2px !important;
box-sizing: border-box !important;
}
/*
* Lien "VOIR LE CLASSEMENT COMPLET" .nxt-match-btn (hors hero), hauteur 24px → 44px.
* Le bouton hero (.banner-btn.nxt-match-btn) est déjà à 44px via règle plus haute.
* Ici on cible spécifiquement la section rivalité + tout contexte hors banner.
*/
.rts-dept-rivalry .nxt-match-btn,
section .nxt-match-btn:not(.banner-btn),
a.nxt-match-btn:not(.banner-btn) {
min-height: 44px !important;
min-width: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0.65rem 1.875rem !important;
}
/* ============================================================
WCAG 2.2 AAA, PREFERS-REDUCED-MOTION (2.3.3)
Coupe les animations Swiper, transitions et particules
quand l'utilisateur préfère le mouvement réduit.
============================================================ */
@media (prefers-reduced-motion: reduce) {
/* Arrêt de toutes les transitions et animations CSS */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Swiper autoplay / transitions de slides */
.swiper-wrapper {
transition-duration: 0ms !important;
}
.swiper-slide {
transition: none !important;
}
/* Problème #1 : prefers-reduced-motion fige le swiper et empile tous les slides.
Solution : masquer les slides non-actifs → 1 seul slide visible à la fois. */
.swiper-slide:not(.swiper-slide-active) {
display: none !important;
}
/* Animations Kester (particules, countdowns) */
.rts-countdown,
.preloader,
#rts__preloader,
.main-fader {
animation: none !important;
transition: none !important;
}
/* AOS / wow.js éventuels */
[data-aos],
.wow {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ============================================================
WCAG 2.2 AAA, BOUTONS HERO (1.4.6 contraste ≥ 7:1)
Thème Kester : .team-btn = transparent/#111 sur fond marine → FAIL
.nxt-match-btn = #111 sur #111 → FAIL
Correction :
.team-btn = fond or #fdb927 + texte marine #131e26 → 9.78:1 AAA
.nxt-match-btn = fond blanc + texte marine #131e26 → 9.78:1 AAA
Cibles ≥ 44px (WCAG 2.5.5).
============================================================ */
/* Bouton PRIMAIRE : or + marine */
.banner-content .banner-btn-area .banner-btn.team-btn,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.team-btn {
background: var(--brand-gold) !important;
color: var(--brand-navy) !important;
border-color: var(--brand-gold) !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* Pseudo-élément ::before masqué (le thème l'utilise pour l'animation fill #111) */
.banner-content .banner-btn-area .banner-btn.team-btn::before,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.team-btn::before {
background: var(--brand-gold) !important;
}
/* Icône du bouton primaire en marine */
.banner-content .banner-btn-area .banner-btn.team-btn i,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.team-btn i {
color: var(--brand-navy) !important;
}
/* Hover bouton primaire : fond marine + texte or (inversion AAA) */
.banner-content .banner-btn-area .banner-btn.team-btn:hover,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.team-btn:hover {
background: var(--brand-navy) !important;
color: var(--brand-gold) !important;
border-color: var(--brand-gold) !important;
}
.banner-content .banner-btn-area .banner-btn.team-btn:hover i,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.team-btn:hover i {
color: var(--brand-gold) !important;
}
/* Bouton SECONDAIRE : fond blanc + texte marine */
.banner-content .banner-btn-area .banner-btn.nxt-match-btn,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.nxt-match-btn {
background: #ffffff !important;
color: var(--brand-navy) !important;
border: 2px solid #ffffff !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* Pseudo-élément ::before masqué */
.banner-content .banner-btn-area .banner-btn.nxt-match-btn::before,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.nxt-match-btn::before {
background: #ffffff !important;
}
/* Icône du bouton secondaire en marine */
.banner-content .banner-btn-area .banner-btn.nxt-match-btn i,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.nxt-match-btn i {
color: var(--brand-navy) !important;
}
/* Hover bouton secondaire : fond or + texte marine */
.banner-content .banner-btn-area .banner-btn.nxt-match-btn:hover,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.nxt-match-btn:hover {
background: var(--brand-gold) !important;
color: var(--brand-navy) !important;
border-color: var(--brand-gold) !important;
}
.banner-content .banner-btn-area .banner-btn.nxt-match-btn:hover i,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn.nxt-match-btn:hover i {
color: var(--brand-navy) !important;
}
/* Focus visible boutons hero : anneau or AAA sur fond marine */
.banner-content .banner-btn-area .banner-btn:focus-visible,
.banner1.banner5 .banner-content .banner-btn-area .banner-btn:focus-visible {
outline: 3px solid var(--brand-gold) !important;
outline-offset: 3px !important;
/* or #fdb927 sur marine #131e26 : 9.78:1, AAA */
}
/* ============================================================
WCAG 2.2 AAA, SWEEP 2026-06-20, PAGES SECONDAIRES
============================================================ */
/*
* CALENDRIER / RÉSULTATS, .rts-match-result-section2 fond #111111,
* .match-single fond #171717.
* .club-name : color:#777777 sur #171717 → 3.56:1 → FAIL AAA.
* .colon "VS" : color:#c5c5c5 sur #111111 → 5.48:1 → FAIL AAA.
* Correction : blanc #ffffff → 21:1 sur fond sombre.
*/
/* CALENDRIER ECLAIRCI 2026 : rangees claires, textes marine/gris AAA */
.rts-match-result-section2 .club-name,
.rts-match-result-section2 .dept-team-secondary,
.rts-match-result-section2 .match-single .club .club-name,
.rts-match-result-section.inner .match-single .club .club-name,
.rts-match-result-section2 .match-single .club .club-logo .club-name,
.rts-match-result-section.inner .match-single .club .club-logo .club-name {
color: #4d4d4d !important;
/* code equipe : #4d4d4d sur blanc/zebre #f9fafb : 8.09:1, AAA
(selecteur 6 classes pour battre le blanc du theme main.css:9825) */
}
.rts-match-result-section2 .colon,
.rts-match-result-section.inner .colon {
color: var(--brand-navy) !important;
/* VS : marine #131e26 sur blanc : 16.9:1, AAA */
}
.rts-match-result-section2 .dept-team-secondary,
.rts-match-result-section.inner .dept-team-secondary {
color: #4d4d4d !important;
/* #4d4d4d sur blanc/zebre : 8.09:1, AAA */
}
/*
* RÉSULTATS, .rts-match-result-section a fond blanc (#fff).
* .club-name: color:#777777 sur blanc → 3.56:1 → FAIL AAA.
* Correction → #595959 → 7.00:1 → PASS AAA.
* Utilise la surcharge globale déjà présente via .win-count (#595959),
* mais .club-name n'est pas encore couvert.
*/
.rts-match-result-section:not(.inner):not(.rts-match-result-section2) .match-single .club .club-name {
color: #595959 !important;
/* 7.00:1 sur fond blanc #fff, AAA */
}
/*
* RÉSULTATS, .match-review .review-link = color:#b2b1b1 sur blanc → 2.05:1 → FAIL.
* Correction → #595959 → 7.00:1.
*/
.match-single .match-review .review-link {
color: #595959 !important;
/* 7.00:1 sur blanc #fff, AAA */
}
/*
* PAGE ÉQUIPES, .rts-point-table-section sur fond blanc.
* Noms de poule (.title) : vérifier couleur héritée.
* En-têtes de poule (.head-tr th) : or + marine → déjà couvert.
* Texte "-- Aucun département --" et vides italic → zinc-400 (#a3a3a3) sur blanc = 2.85:1 FAIL.
* Couverture via règle globale team-view.
*/
/*
* ABOUT / CONTACT, page interne Kester avec fond blanc.
* Paragraphes p { color:#999 } sur blanc → 2.85:1 → déjà corrigé via p { color:#595959 }.
* Liens de contact (téléphone, adresse) dans les sections info.
*/
/*
* CLASSEMENTS, bannière rts-latest-match (fond #f6f6f6) :
* .letter (D/H/M/S) = déjà corrigé → #525252 = 7.40:1 ✓
* .club-text = #111111 → 15.6:1 ✓
* .match-type = blanc sur or → brand.css corrige en marine ✓
*/
/*
* DEPARTEMENTS, badge "RIVALITÉ DES DÉPARTEMENTS" :
* .match-type = blanc sur var(--theme-color)=or → corrigé en marine par brand.css ✓
* Sous-titre (.dept-subtitle) #595959 sur blanc ✓
*/
/*
* CONTACT, Placeholders : obsolète, l'hypothèse de fond sombre (#1a1a1a) ne correspond
* plus au design actuel (champs à fond blanc, cf. section « FORMULAIRE CONTACT, champs
* clairs » plus bas dans ce fichier). L'ancienne règle rgba(255,255,255,0.87) sur fond
* blanc donnait un ratio ~1:1 (texte quasi invisible) : bloc retiré, la règle canonique
* (#595959 sur blanc, 7:1 AAA) vit désormais à un seul endroit.
*/
/*
* CONTACT, Hover des cartes d'adresse : fond or #fdb927, texte blanc #fff.
* Blanc sur or : 1.73:1 → FAIL AAA.
* Correction : fond marine #131e26 au hover (marine sur blanc était déjà la règle home).
*/
.contact-area .container .address-box .address:hover {
background: var(--brand-navy) !important;
/* fond marine au hover, texte blanc dessus : 14:1, AAA */
}
.contact-area .container .address-box .address:hover .icon {
background: var(--brand-gold) !important;
color: var(--brand-navy) !important;
}
.contact-area .container .address-box .address:hover .content .heading,
.contact-area .container .address-box .address:hover .content .heading::before {
color: #ffffff !important;
background: #ffffff !important;
/* blanc sur marine : 14:1, AAA */
}
.contact-area .container .address-box .address:hover .content .desc {
color: rgba(255,255,255,0.87) !important;
/* ~11:1 sur marine, AAA */
}
/*
* ABOUT, Section champion (rts-champion-section) fond image sombre.
* p.p1, p.p2 : brand.css global surcharge à #595959 → sur fond sombre FAIL.
* La règle "Paragraphes sur fonds sombres" ci-dessus gère p.p1, p.p2 → blanc ✓
*/
/*
* ABOUT, Counter-up section : texte des compteurs hérite noir sur fond blanc.
* .counter (chiffres) et .counter-text → pas de color défini → noir sur blanc ✓.
*/
/* ============================================================
SECTION EN DIRECT, Grille jusqu'a 8 matchs simultanees
FOND CLAIR #fff, équilibre clair-dominant ÉMOICQ
Couleurs EMOICQ : or #fdb927, marine #131e26, gris #f6f6f6
Contraste AAA partout.
============================================================ */
.rts-en-direct-section {
padding: 60px 0 60px;
background: #ffffff !important;
/* CLAIR, section corps */
}
.en-direct-dot {
display: inline-block;
width: 12px;
height: 12px;
background: #e53935;
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
animation: pulse-live 1.8s ease-in-out infinite;
}
.en-direct-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1199px) {
.en-direct-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.en-direct-grid {
grid-template-columns: 1fr;
}
}
.en-direct-card {
position: relative;
background: #1e2d3a;
border: 2px solid rgba(253, 185, 39, 0.25);
border-radius: 12px;
padding: 22px 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.2s;
}
.en-direct-card:hover {
border-color: var(--brand-gold, #fdb927);
}
.badge-en-direct {
display: inline-flex;
align-items: center;
gap: 6px;
background: #b71c1c;
color: #ffffff;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
align-self: flex-start;
animation: pulse-live 2s ease-in-out infinite;
}
.badge-dot {
width: 7px;
height: 7px;
background: #ffffff;
border-radius: 50%;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.badge-en-direct,
.en-direct-dot {
animation: none !important;
}
}
.en-direct-terrain {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.terrain-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--brand-gold, #fdb927);
text-transform: uppercase;
}
.terrain-number {
font-size: 1.4rem;
font-weight: 900;
color: #ffffff;
line-height: 1;
}
.en-direct-body {
display: flex;
align-items: center;
gap: 10px;
}
.en-direct-team {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.en-direct-team--right {
flex-direction: row-reverse;
text-align: right;
}
.en-direct-dept-icon img,
.en-direct-dept-icon i {
display: block;
flex-shrink: 0;
color: #ffffff;
}
.en-direct-team-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.en-direct-dept-name {
font-size: 0.78rem;
font-weight: 700;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.en-direct-team-code {
font-size: 0.65rem;
color: rgba(255,255,255,0.75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.en-direct-score {
flex-shrink: 0;
text-align: center;
min-width: 64px;
}
.en-direct-sets {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
}
.set-score {
font-size: 1.6rem;
font-weight: 900;
color: rgba(255,255,255,0.6);
line-height: 1;
min-width: 24px;
text-align: center;
}
.set-score.set-leading {
color: var(--brand-gold, #fdb927);
}
.set-separator {
color: rgba(255,255,255,0.4);
font-size: 1.1rem;
font-weight: 700;
margin: 0 2px;
}
.en-direct-set-courant {
margin-top: 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.set-label {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--brand-gold, #fdb927);
text-transform: uppercase;
}
.set-points {
font-size: 0.75rem;
font-weight: 700;
color: #ffffff;
}
.rts-en-direct-empty {
background: var(--brand-navy, #131e26);
padding: 40px 0;
}
.en-direct-vide {
text-align: center;
padding: 30px 20px;
}
.en-direct-vide-icon {
display: block;
font-size: 2.5rem;
color: rgba(255,255,255,0.3);
margin-bottom: 16px;
}
.en-direct-vide-msg {
font-size: 1.05rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 6px;
}
.en-direct-vide-sub {
font-size: 0.875rem;
color: rgba(255,255,255,0.75);
}
/* Fond clair → titres marine, paragraphes #404040 */
.rts-en-direct-section .section-title {
color: var(--brand-navy, #131e26) !important;
/* marine sur blanc : 16.92:1, AAA */
}
.rts-en-direct-section .section-title-area1 p {
color: #404040 !important;
/* #404040 sur blanc : 9.59:1, AAA */
}
/* Section vide EN DIRECT → fond clair aussi */
.rts-en-direct-empty {
background: #ffffff !important;
}
.en-direct-vide-msg {
color: var(--brand-navy, #131e26) !important;
/* marine sur blanc : 16.92:1, AAA */
}
.en-direct-vide-sub {
color: #404040 !important;
/* #404040 sur blanc : 9.59:1, AAA */
}
.en-direct-vide-icon {
color: rgba(19,30,38,0.3) !important;
/* marine translucide décoratif */
}
/* ============================================================
FIN SECTION EN DIRECT
============================================================ */
/* === Correctifs superviseur (revue visuelle 2026-06-20) === */
/* 1. Un seul logo : réglé via #rtsHeader a.logo-sticky { display:none !important } (voir plus haut) */
/* 2. Grille prochains matchs, grille statique uniforme (remplace swiper via home-five.blade.php) */
.upcoming-matches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 991px) {
.upcoming-matches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.upcoming-matches-grid { grid-template-columns: 1fr; }
}
.upcoming-match-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(19,30,38,0.09);
padding: 28px 20px 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
position: relative;
text-align: center;
}
.upcoming-match-card .badge-upcoming-grid {
background: var(--brand-gold);
color: var(--brand-navy);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.upcoming-match-card .badge-live-grid {
background: #b71c1c;
color: #ffffff;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
animation: pulse-live 2s ease-in-out infinite;
}
.upcoming-card-depts {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}
.upcoming-card-dept {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
min-width: 0;
}
.upcoming-card-dept-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--brand-navy);
text-align: center;
line-height: 1.25;
}
.upcoming-card-vs {
font-size: 0.9rem;
font-weight: 900;
color: var(--brand-navy);
flex-shrink: 0;
padding: 0 4px;
}
.upcoming-card-team-names {
font-size: 0.72rem;
color: #595959;
text-align: center;
}
.upcoming-card-venue {
display: inline-flex;
align-items: center;
gap: 0.35rem;
align-self: center;
margin: 0.15rem auto 0;
padding: 0.2rem 0.7rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--brand-navy);
background: rgba(253, 185, 39, 0.18);
border-radius: 999px;
}
.upcoming-card-venue i,
.upcoming-card-venue svg {
color: var(--brand-navy);
font-size: 0.78rem;
}
.upcoming-card-datetime {
font-size: 0.8rem;
font-weight: 600;
color: #404040;
text-align: center;
}
/* ============================================================
CARTES ÉQUIPES /equipes, design clair éditorial (tendance 2026)
Remplace les carrés sombres ; accent marque or, texte marine AAA.
============================================================ */
.tcard {
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 24px 16px 16px;
position: relative;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-bottom: 24px;
overflow: hidden;
}
.tcard-accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background-color: var(--brand-gold);
}
.tcard-icon-container {
width: 84px;
height: 84px;
background-color: color-mix(in srgb, var(--brand-gold) 12%, white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 8px auto 16px;
}
.tcard-icon {
width: 48px;
height: 48px;
display: block;
}
.tcard-icon-fallback {
color: var(--brand-navy);
font-size: 2.25rem;
line-height: 1;
}
.tcard-dept {
font-size: 1rem;
font-weight: 700;
color: var(--brand-navy);
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0 0 8px;
line-height: 1.4;
}
.tcard-team {
font-size: 1.25rem;
font-weight: 700;
color: var(--brand-navy);
margin: 0 0 12px;
line-height: 1.3;
}
/* Cible tactile du lien vers l'horaire de l'équipe (WCAG 2.5.8, min 44px) */
.tcard-team-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
text-decoration: none;
border-radius: 8px;
padding: 4px 8px;
transition: background-color 0.15s ease;
}
.tcard-team-link:hover {
text-decoration: underline;
background-color: color-mix(in srgb, var(--brand-gold) 14%, white);
}
@media (prefers-reduced-motion: reduce) {
.tcard-team-link {
transition: none;
}
}
.tcard-pool-badge {
display: inline-block;
background-color: var(--brand-navy);
color: #ffffff;
font-size: 0.8125rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
line-height: 1.4;
}
@media (hover: hover) and (pointer: fine) {
.tcard:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
}
@media (prefers-reduced-motion: reduce) {
.tcard {
transition: none;
}
}
@media (max-width: 575.98px) {
.tcard {
padding: 20px 12px 12px;
}
.tcard-icon-container {
width: 72px;
height: 72px;
}
.tcard-icon {
width: 40px;
height: 40px;
}
.tcard-icon-fallback {
font-size: 1.875rem;
}
.tcard-team {
font-size: 1.125rem;
}
}
/* ============================================================
AUDIT /wcag /calendrier, 2026-06-20 (correctifs AAA)
============================================================ */
/* Nom departement sur carte claire calendrier : marine AAA (16.9:1) */
.rts-match-result-section2 .dept-name-main,
.rts-match-result-section.inner .dept-name-main {
color: var(--brand-navy) !important;
}
/* Taille cible minimale 24x24 (WCAG 2.5.8) liens footer et skip-link */
.footer-bottom-links a,
.skip-link {
min-height: 24px;
display: inline-flex;
align-items: center;
padding-top: 3px;
padding-bottom: 3px;
}
/* ============================================================
CALENDRIER ECLAIRCI 2026, rangees claires (option A, recherche juin 2026)
Header sombre conserve (coherence inter-pages), contenu clair AAA.
============================================================ */
/* Fond de section tres clair */
.rts-match-result-section2.rts-match-schedule-section {
background-color: #f7f7f7 !important;
}
/* Titre de page : marine sur fond clair (annule wcag-heading-on-dark herite) */
.rts-match-result-section2.rts-match-schedule-section .title.wcag-heading-on-dark,
.rts-match-result-section2.rts-match-schedule-section .title {
color: var(--brand-navy) !important;
text-shadow: none !important;
}
/* Carte blanche par match */
.rts-match-result-section2 .match-single {
background-color: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
transition: box-shadow 0.2s ease-in-out;
}
/* Zebrure legere (col-12 pairs ; match-single est enfant unique de col-12) */
.rts-match-result-section2 .row > .col-12:nth-child(even) .match-single {
background-color: #f9fafb !important;
}
/* Terrain/ronde en gris AAA sur blanc/zebre */
.rts-match-result-section2 .stadium-name {
color: #4d4d4d !important;
}
@media (prefers-reduced-motion: no-preference) {
.rts-match-result-section2 .match-single:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
}
/* Taille cible AAA 44x44 (WCAG 2.5.5) bouton fermer menu mobile.
Neutralise le transform:scale(70%) du theme qui reduisait la cible a 31px. */
.slide-bar-close {
transform: none !important;
min-width: 44px;
min-height: 44px;
padding: 7px 11px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================================
FORMULAIRE CONTACT, champs clairs (coherence theme clair 2026)
============================================================ */
.contact-form input,
.contact-form textarea,
.contact-form select {
background-color: #ffffff !important;
color: var(--brand-navy) !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
padding: 12px 16px !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #595959 !important;
opacity: 1 !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
border-color: var(--brand-gold) !important;
box-shadow: 0 0 0 3px rgba(253, 185, 39, 0.35) !important;
outline: none !important;
}
/* ACTION 2026-09-09 (revue adversariale) : .contact-form .info-form .form-btn
ajouté à cette même règle. C'est le lien-bouton mailto: "Écrire un
courriel" de resources/views/theme/contact.blade.php - un , pas un
button[type=submit] ni .rts-btn, donc il échappait à ce correctif de
contraste. Sans lui, le survol/l'overlay ::before du vendor (Kester,
public/theme/assets/css/main.css) affichait du texte blanc (#fff) sur
fond or (var(--theme-color), redéfini en or plus haut dans ce fichier) :
ratio ~1,73:1. Avec cette règle, marine sur or : ratio ~9,79:1 (calculé
#131e26 sur #fdb927), stable au repos comme au survol grâce à !important.
RAISON: même correctif que les boutons submit, réutilisé sans dupliquer
les valeurs (var(--brand-navy)/var(--brand-gold) déjà déclarées). */
.contact-form button[type="submit"],
.contact-form .rts-btn,
.contact-form .info-form .form-btn {
background-color: var(--brand-gold) !important;
color: var(--brand-navy) !important;
border: none !important;
}
/* CONTACT, dégagement du bouton ENVOYER sous la barre de navigation mobile
fixe (.emoicq-bottomnav, ~57px + zone sûre). Même seuil que cette barre
(max-width: 991px) : sans cette marge, le bouton d'envoi (dernier élément
du bloc sombre) reste collé contre la barre fixe en fin de défilement. */
@media (max-width: 991px) {
.contact-area .container .contact-area-inner {
padding-bottom: calc(20px + 57px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* RÉSULTATS, pastille ronde du code d'équipe (recap du dernier match) :
le vendor fixait un cercle de 50px pensé pour un sigle très court (ex.
« MU »). Un code d'équipe réel (ex. « PL221-B », « MA220801-A ») déborde
et se coupe sur deux lignes dans ce cercle trop étroit. Largeur libre
(min-width conservée pour « VS ») + texte sur une seule ligne : la
pastille reste ronde pour un texte court et devient une pilule pour un
code plus long, jamais de retour à la ligne. */
.rts-match-recap-section .section-inner .match-result .scoreboard .team-logo span {
width: auto !important;
min-width: 50px !important;
padding: 0 12px !important;
white-space: nowrap !important;
font-size: 0.8rem !important;
}
/* ============================================================
BANDEAU DE PAUSE (calendrier), temps d'arret (diner, etc.)
============================================================ */
.emoicq-break-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.85rem 1rem;
background: rgba(253, 185, 39, 0.18);
border: 1px solid var(--brand-gold);
border-radius: 12px;
color: var(--brand-navy);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.95rem;
}
.emoicq-break-banner i,
.emoicq-break-banner svg {
color: var(--brand-navy);
font-size: 0.95rem;
}
/* ============================================================
FIX MISE EN PAGE, header absolu (~60px) chevauche le contenu.
Les pages INTERNES (sans hero) reservent l'espace du header.
La home (.home-five) garde son hero qui passe derriere le header.
============================================================ */
body.page-inner #contenu {
padding-top: 64px;
}
@media (max-width: 767px) {
body.page-inner #contenu {
padding-top: 72px;
}
}
/* ============================================================
BADGE « EN COURS » reutilisable (calendrier, horaire par terrain)
============================================================ */
.emoicq-live-badge {
display: inline-block;
background: #C02020;
color: #ffffff;
font-weight: 800;
font-size: 0.7rem;
letter-spacing: 0.05em;
padding: 0.12rem 0.5rem;
border-radius: 999px;
}
.emoicq-live-badge::before { content: "● "; }
/* Calendrier : surbrillance de la rangee en cours */
.rts-match-result-section2 .match-single.is-live {
outline: 3px solid var(--brand-gold);
outline-offset: -3px;
background: rgba(253, 185, 39, 0.10) !important;
}
/* Horaire par terrain : surbrillance de la ligne en cours */
.horaire-match-item.is-live {
background: rgba(253, 185, 39, 0.14);
border-radius: 8px;
padding-left: 0.5rem;
padding-right: 0.5rem;
box-shadow: inset 3px 0 0 var(--brand-gold);
}
/* ============================================================
REPÈRE D'ÉDITION (tâche #219) - resources/views/theme/partials/
edition-badge.blade.php. Rappelle sur chaque page publique de
contenu à quelle édition (année) appartient ce qui est affiché.
Fond OPAQUE volontairement (pas de transparence) : la pastille
reste lisible quel que soit ce qu'il y a derrière (héros marine
sur classements/départements, fond blanc ailleurs), sans logique
par page. Contraste marine #131e26 sur #f8f8f8 : 9,59:1 (AAA) -
même paire déjà validée pour .emoicq-fin-invitation ci-dessus.
============================================================ */
.emoicq-edition-badge__wrap {
display: flex;
justify-content: center;
padding: 10px 12px 0;
}
.emoicq-edition-badge {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin: 0;
padding: 5px 14px;
background: #f8f8f8;
border: 1px solid rgba(19, 30, 38, 0.18);
border-radius: 999px;
color: #131e26;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
text-align: center;
}
.emoicq-edition-badge__etat { font-weight: 700; }
/* ACTION (correctif 2026-09-10) : lien « voir une autre édition » - couleur
EXPLICITE (jamais l'héritage du thème, voir le piège documenté dans
edition-badge.blade.php), #131e26 sur #f8f8f8 = 15,93:1 (AAA), même paire
que le texte du repère lui-même. Soulignement + gras : jamais la seule
couleur qui distingue ce lien du reste du repère. */
.emoicq-edition-badge__separateur { opacity: 0.5; }
.emoicq-edition-badge__autre-lien {
color: var(--brand-navy, #131e26);
text-decoration: underline;
font-weight: 600;
}
.emoicq-edition-badge__autre-lien:hover {
color: var(--brand-teal, #005d7e);
}
.emoicq-edition-badge__autre-lien:focus-visible {
outline: 3px solid var(--brand-gold, #fdb927);
outline-offset: 2px;
}
@media (max-width: 480px) {
.emoicq-edition-badge { font-size: 0.72rem; padding: 4px 10px; }
}
/* ============================================================
NAVIGATION GROUPÉE, déroulants desktop (disclosure accessible)
+ accordéons mobile + masquage hamburger desktop (WCAG 2.2 AAA)
============================================================ */
[x-cloak]{display:none!important}
.emoicq-nav-group{position:relative;display:inline-block}
.emoicq-nav-toggle{background:transparent;border:0;cursor:pointer;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px}
.emoicq-nav-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .2s ease}
.emoicq-nav-toggle[aria-expanded="true"] .emoicq-nav-caret{transform:rotate(180deg)}
/* ACTION : largeur FIXE (pas un plancher) posée par --emoicq-nav-panel-largeur
(déclarée une seule fois dans :root ci-dessus) - « Horaire » et
« Compétition » rendent désormais exactement la même largeur, quel que
soit leur nombre d'entrées. left:0 reste le positionnement par défaut ;
.emoicq-nav-panel--droite (posée en JS par header-desktop.blade.php
quand le panneau déborderait le bord droit de la fenêtre) l'ancre par
la droite à la place - RAISON : une largeur fixe imposée sans garde-fou
pousse un panneau hors cadre sur une fenêtre étroite ou un bouton proche
du bord droit. */
.emoicq-nav-panel{position:absolute;top:100%;left:0;width:var(--emoicq-nav-panel-largeur);margin-top:10px;padding:8px;list-style:none;background:var(--brand-navy);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.35);z-index:1000}
.emoicq-nav-panel.emoicq-nav-panel--droite{left:auto;right:0}
.emoicq-nav-panel li a{display:block;padding:11px 14px;border-radius:8px;color:#f4f6f8;text-decoration:none;font-weight:600;white-space:nowrap}
#rtsHeader .emoicq-nav-panel li a:hover,#rtsHeader .emoicq-nav-panel li a:focus{background:var(--brand-gold) !important;color:var(--brand-navy) !important}
.emoicq-nav-panel li a:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
@media (min-width:992px){#rtsHeader.rts-header1 .hamburger-menu{display:none!important}}
/* ACTION : le thème pousse le logo et le menu principal aux DEUX
extrémités de la barre PAR DEUX MÉCANISMES CUMULÉS (mesurés tous les
deux, pas supposés) : .navbar-inner { justify-content:space-between }
ET .navbar-inner .rts-menu { margin-left:auto } (les deux dans
public/theme/assets/css/main.purge.css). Au-delà de 992px, seuls le
logo et .rts-menu restent des enfants flex visibles (le hamburger est
masqué par la règle juste au-dessus), donc CHACUN des deux mécanismes
suffit à lui seul à ouvrir un vide qui grandit avec la largeur de
fenêtre plutôt que de former un ensemble lisible (mesuré : 412px de
vide sur une fenêtre de 1440px). Neutraliser un seul des deux ne
suffit pas - mesure faite après une première correction incomplète.
On regroupe les deux blocs à gauche avec un espacement voulu, PAS une
seule valeur mais DEUX paliers déclarés une seule fois chacun : à
partir de 1200px, plein espacement (56px) - en dessous, entre 992px
et 1200px, espacement réduit (16px) ET coussinage d'entrée de menu
réduit (voir règle plus bas) parce que huit entrées + logo protégé
(flex-shrink:0, règle plus bas) ne tiennent plus avec le plein
espacement dans cette tranche (mesuré : 992-1200px est la zone la
plus étroite où le menu desktop est encore affiché ; le thème bascule
en accordéon mobile sous 900px). En dessous de 992px, le thème garde
son space-between logo/hamburger habituel (la barre du téléphone
n'est pas concernée par cette demande).
RAISON : diagnostic du fondateur - sur un grand écran l'oeil doit
parcourir une longue ligne d'éléments de même poids, ce qui demande un
effort au lieu de guider. */
@media (min-width:992px){
#rtsHeader.rts-header1.header-four .navbar-inner{justify-content:flex-start}
}
@media (min-width:1200px){
#rtsHeader.rts-header1.header-four .navbar-part .navbar-inner .rts-menu{margin-left:56px}
}
@media (min-width:992px) and (max-width:1199.98px){
#rtsHeader.rts-header1.header-four .navbar-part .navbar-inner .rts-menu{margin-left:16px}
}
/* ACTION : le logo ne doit JAMAIS être compressé par le flux flex - mesure
AVANT tout correctif de largeur (donc défaut préexistant, pas introduit
ici) : à 1024px de large, le logo tombait déjà à 28px de large (repère
visuel disparu) parce que .logo est un enfant flex sans flex-shrink:0,
le seul de la barre que le navigateur pouvait comprimer pour faire
entrer le contenu. RAISON : une marque illisible est pire qu'un espace
trop grand - la protéger est un garde-fou, pas une préférence. */
#rtsHeader.rts-header1.header-four .navbar-inner .logo{flex-shrink:0}
/* ACTION : cause racine du manque de place entre 992px et 1200px - le
thème prévoit déjà un padding d'entrée de menu réduit sous 1200px
(main.purge.css, .rts-menu .menu-item{padding:20px 20px}), mais une
règle !important propre à header-four (.rts-header1.header-four
.navbar-part .rts-menu .menu-item{padding:40px !important}, SANS
media query) l'emporte à toute largeur et bloque ce rétrécissement.
On restaure l'intention du thème pour header-four, réduite un cran de
plus (10px plutôt que 20px de chaque côté) : même en supprimant tout
l'espacement logo/menu ajouté ci-dessus, huit entrées à 20px de
chaque côté (mesuré 836px) ne rentrent toujours pas dans les 864px
disponibles à 1024px - calcul vérifié, pas une estimation.
RAISON : mesuré - huit entrées à 40px de coussinage de chaque côté ne
tiennent plus dans le conteneur entre 992 et 1200px, ce qui écrasait
le logo (voir règle juste au-dessus) avant même le correctif d'espacement
ci-dessus. */
@media (max-width:1200px){
#rtsHeader.rts-header1.header-four .navbar-part .rts-menu .menu-item{padding:20px 10px !important}
}
/* Accordéons mobile = mécanisme natif metisMenu (.has-dropdown > .sub-menu).
Cible tactile AAA (2.5.8) sur les liens du menu mobile */
.side-mobile-menu #mobile-menu-active .mm-link{min-height:44px;display:flex;align-items:center}
/* Topbar mobile : logo à gauche, hamburger à l'extrême droite + pictogramme
agrandi et cible tactile 48x48 (confort Material, WCAG 2.5.8 AAA) */
@media (max-width: 991px) {
.hamburger-menu {
margin-left: auto;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-menu-inner {
width: 26px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-menu-inner span {
display: block;
height: 3px;
width: 100%;
border-radius: 2px;
background: #fff;
}
}
.hamburger-menu:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
border-radius: 8px;
}
/* ============================================================
BARRE DE NAVIGATION MOBILE (PWA), zone du pouce, AAA, safe-area
============================================================ */
.emoicq-bottomnav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
display: none;
background: var(--brand-navy);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 991px) {
.emoicq-bottomnav { display: flex; }
body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (min-width: 992px) {
.emoicq-bottomnav { display: none; }
}
.emoicq-bn-item {
flex: 1;
min-height: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: transparent;
border: 0;
color: #f4f6f8;
text-decoration: none;
font: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.emoicq-bn-item svg { width: 24px; height: 24px; }
/* Le libellé héritait d'une couleur foncée (#111) du thème → invisible sur le fond marine.
On force l'héritage de la couleur claire/or de l'item. */
.emoicq-bottomnav .emoicq-bn-item span { color: inherit !important; }
.emoicq-bn-item.is-active,
.emoicq-bn-item:hover,
.emoicq-bn-item:focus-visible { color: var(--brand-gold); }
.emoicq-bn-item:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }
.emoicq-bn-accent { color: var(--brand-gold); }
/* Bouton « Déconnexion » : un