/* ==========================================================================
LSFFOOT — feuille de style unique du correctif maison.
Regroupe : accessibilité, fil d'Ariane, icônes, corrections responsive.
Déployée par le mu-plugin lsffoot-core.php.
========================================================================== */
:root {
--lsf-accent: #e27013;
--lsf-ink: #010101;
--lsf-rule: rgba(1, 1, 1, 0.14);
}
/* --------------------------------------------------------------------------
1. Accessibilité
-------------------------------------------------------------------------- */
/* Titre de page lu par les lecteurs d'écran et les moteurs, sans effet visuel.
Nécessaire ici : sur plusieurs pages le titre visible est aplati dans un PNG,
il n'existe donc nulle part sous forme de texte. */
.lsf-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Lien d'évitement : premier élément focusable, mène au contenu. */
.lsf-skip-link {
position: absolute;
top: -100px;
left: 0.5rem;
z-index: 100000;
padding: 0.7rem 1.1rem;
background: var(--lsf-ink);
color: #fff;
font: 600 0.95rem/1 system-ui, sans-serif;
text-decoration: none;
border-radius: 0 0 4px 4px;
transition: top 0.15s ease;
}
.lsf-skip-link:focus {
top: 0;
}
/* Le thème ne dessine aucun anneau de focus visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 3px solid var(--lsf-accent);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
2. Fil d'Ariane + retour
-------------------------------------------------------------------------- */
.lsf-breadcrumb {
max-width: 1140px;
margin: 0 auto;
padding: 1.1rem 1.25rem 0;
font: 400 0.9rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
color: rgba(1, 1, 1, 0.62);
}
.lsf-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.lsf-breadcrumb li {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0;
}
/* Chevron dessiné en CSS : pas de glyphe à charger, et invisible aux
lecteurs d'écran puisqu'il vit dans un pseudo-élément. */
.lsf-breadcrumb li + li::before {
content: "";
width: 0.4em;
height: 0.4em;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: 0.55;
}
.lsf-breadcrumb a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.lsf-breadcrumb a:hover,
.lsf-breadcrumb a:focus {
color: var(--lsf-accent);
border-bottom-color: currentColor;
}
.lsf-breadcrumb [aria-current="page"] {
color: var(--lsf-ink);
font-weight: 600;
}
/* Retour en bas de page : la cible principale sur mobile, où le fil d'Ariane
est loin après un long défilement. */
.lsf-backlink-wrap {
max-width: 1140px;
margin: 0 auto;
padding: 2.5rem 1.25rem 3.5rem;
border-top: 1px solid var(--lsf-rule);
}
.lsf-backlink {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.35rem;
background: transparent;
border: 2px solid var(--lsf-ink);
color: var(--lsf-ink);
font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lsf-backlink::before {
content: "";
width: 0.45em;
height: 0.45em;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
transform: rotate(45deg);
}
.lsf-backlink:hover,
.lsf-backlink:focus {
background: var(--lsf-accent);
border-color: var(--lsf-accent);
color: #fff;
}
@media (max-width: 575px) {
.lsf-backlink {
display: flex;
justify-content: center;
}
}
/* --------------------------------------------------------------------------
3. Icônes (remplace Font Awesome 4.7 chargé depuis un CDN tiers)
Seules trois icônes servent sur le site, toutes dans le flux Instagram.
Masque SVG en ligne : aucune police à télécharger, aucun tiers contacté.
-------------------------------------------------------------------------- */
.fa {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.fa-instagram {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.fa-play {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.fa-clone {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* --------------------------------------------------------------------------
4. Corrections responsive (débordement horizontal mobile / tablette)
-------------------------------------------------------------------------- */
iframe,
embed,
object,
video {
max-width: 100%;
}
/* Carte Google Maps : ratio fluide au lieu de width="1500" height="400" */
iframe[src*="google.com/maps"] {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
@media (min-width: 576px) {
iframe[src*="google.com/maps"] { aspect-ratio: 16 / 9; }
}
@media (min-width: 992px) {
iframe[src*="google.com/maps"] { aspect-ratio: 21 / 6; }
}
.wp-block-gallery {
max-width: 100%;
min-width: 0;
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
min-width: 0;
max-width: 100%;
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
max-width: 100%;
height: auto;
}
@media (max-width: 781px) {
.wp-block-gallery.has-nested-images figure.wp-block-image {
flex-basis: 100%;
width: 100%;
}
}
/* Chaînes insécables (pointillés des grilles tarifaires) */
.entry-content,
.wp-block-group,
.wp-block-group p,
.wp-block-group strong,
.elementor-widget-text-editor {
overflow-wrap: anywhere;
}
/* --------------------------------------------------------------------------
5. Grilles tarifs / horaires
-------------------------------------------------------------------------- */
.wp-block-table.lsf-grille {
margin-inline: 0;
overflow-x: visible;
}
.lsf-grille table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.lsf-grille th,
.lsf-grille td {
padding: 0.7em 0.6em;
text-align: left;
vertical-align: top;
border: 0;
border-bottom: 1px solid var(--lsf-rule);
word-break: normal;
overflow-wrap: break-word;
}
.lsf-grille thead th {
font-weight: 700;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.04em;
border-bottom-width: 2px;
}
.lsf-grille thead th:last-child { text-align: right; }
.lsf-grille tbody td:first-child { font-weight: 700; }
.lsf-grille tbody td:last-child { text-align: right; }
.lsf-grille tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.03); }
/* Sous 576px : une ligne = un bloc empilé, plus lisible que deux colonnes */
@media (max-width: 575px) {
.lsf-grille thead { display: none; }
.lsf-grille tbody tr {
display: block;
padding: 0.6em 0;
border-bottom: 1px solid var(--lsf-rule);
}
.lsf-grille tbody td {
display: block;
border: 0;
padding: 0.1em 0;
text-align: left;
}
.lsf-grille tbody td:last-child {
text-align: left;
opacity: 0.85;
}
}
/* --------------------------------------------------------------------------
6. Page 404 : porte de sortie
-------------------------------------------------------------------------- */
.lsf-404-liens {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 0.9rem;
margin: 1.4rem 0 0;
padding: 0;
list-style: none;
}
.lsf-404-liens a {
display: inline-block;
padding: 0.6rem 1.1rem;
border: 2px solid var(--lsf-ink);
color: var(--lsf-ink);
font: 600 0.9rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lsf-404-liens a:hover,
.lsf-404-liens a:focus {
background: var(--lsf-accent);
border-color: var(--lsf-accent);
color: #fff;
}
/* --------------------------------------------------------------------------
7. Bandeaux de titre
Ces images sont très allongées (1024x222, soit 4,6:1) et posées dans un
bloc à hauteur imposée avec « object-fit: cover ». Pour couvrir une boîte
de 295px de haut, l'image doit faire au moins 1361px de large : sous cette
largeur de fenêtre, elle était rognée sur les côtés et le titre coupé.
« contain » sur un fond noir règle le problème à toutes les largeurs — le
fond de ces images étant lui-même noir, le raccord est invisible.
Les classes sont posées par le mu-plugin d'après les proportions de l'image.
-------------------------------------------------------------------------- */
.wp-block-cover.lsf-bandeau {
background-color: #000;
}
.wp-block-cover.lsf-bandeau > img.wp-block-cover__image-background {
object-fit: contain;
}
@media (max-width: 900px) {
/* L'en-tête n'est plus posé dessus (voir section 8) : le bandeau n'a plus
à lui réserver de la hauteur, il suffit qu'il loge le titre. */
.wp-block-cover.lsf-bandeau {
/* Juste la hauteur de l'image, pas plus : le titre suit le menu de
près au lieu de flotter au milieu d'un grand aplat noir. */
min-height: 22vw !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* L'espaceur ne sert qu'à caler le titre sur grand écran. */
.wp-block-cover.lsf-bandeau .wp-block-spacer {
display: none !important;
}
}
@media (max-width: 600px) {
.wp-block-cover.lsf-bandeau {
min-height: 22vw !important;
}
}
/* --------------------------------------------------------------------------
8. En-tête sur petit écran
Le thème pose l'en-tête en superposition sur la première bannière
(« position: absolute »). Sur grand écran il tombe dans le ciel de la photo
et tout va bien ; sur téléphone la bannière est trop courte et le logo se
retrouve par-dessus les joueurs — alors que l'image d'accueil contient déjà
le logo du club deux fois et le nom du site. On lui rend donc sa place dans
le flux, sur son propre bandeau noir.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
body header.wp-block-template-part .is-style-header-fixed {
position: static !important;
background-color: #000;
padding-top: 0.8rem !important;
padding-bottom: 0.6rem !important;
}
/* 120px est la taille prévue pour un logo posé sur une grande photo ;
dans un bandeau compact, c'est trop. */
body header.wp-block-template-part .wp-block-site-logo.is-default-size img {
width: 74px;
}
}
/* --------------------------------------------------------------------------
9. Équilibre de l'en-tête sur grand écran
La colonne du logo réserve 30 % de la largeur pour une image de 120px : le
menu démarrait au tiers de la page, d'où un grand vide après le logo.
On réduit simplement cette réserve ; le menu reste aligné comme le thème
le prévoit, il se décale juste vers la gauche.
-------------------------------------------------------------------------- */
@media (min-width: 901px) {
header.wp-block-template-part .wp-block-columns > .wp-block-column:first-child {
flex-basis: 16% !important;
}
/* Le titre est peint dans l'image du bandeau : on descend l'image pour
l'écarter du menu, le fond noir masquant le décalage. */
.wp-block-cover.lsf-bandeau > img.wp-block-cover__image-background {
object-position: center 64%;
}
}
/* --------------------------------------------------------------------------
10. Bannière de l'accueil, à toutes les largeurs
Photo et texte sont aplatis dans la même image (1366x779). Le bloc imposait
779px de haut : au-delà de 1366px de large, « cover » agrandissait l'image
et rognait le ciel et la pelouse. 57vw = 779/1366, soit les proportions
exactes de l'image : le bloc l'épouse et plus rien n'est coupé.
On passe par min-height et non par aspect-ratio, que le style en ligne du
bloc neutralise avec « aspect-ratio: unset ».
-------------------------------------------------------------------------- */
.wp-block-cover.lsf-banniere {
min-height: 57vw !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Sur ordinateur, on rogne le ciel et la pelouse vide : ces deux zones
n'apportent rien et représentaient un tiers de la hauteur. Le cadre se
resserre sur les joueurs et sur le titre, et le contenu de la page arrive
plus vite à l'écran. Sur téléphone la bannière reste entière (57vw). */
@media (min-width: 901px) {
.wp-block-cover.lsf-banniere {
min-height: 40vw !important;
}
.wp-block-cover.lsf-banniere > img.wp-block-cover__image-background {
object-position: center 40%;
}
}
/* --------------------------------------------------------------------------
11. Menu complet sur téléphone
Le volet à trois barres est désactivé côté bloc (voir menu_sans_volet).
Il reste à le rendre lisible sur une largeur réduite.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
header.wp-block-template-part .wp-block-navigation {
font-size: 0.82rem;
}
header.wp-block-template-part .wp-block-navigation__container {
justify-content: flex-end;
gap: 0.5rem 0.9rem;
}
/* Les deux colonnes de l'en-tête ne doivent plus rester côte à côte de
force : le logo au-dessus, le menu en dessous, chacun sur sa ligne. */
header.wp-block-template-part .wp-block-columns.is-not-stacked-on-mobile {
flex-wrap: wrap !important;
gap: 0.4rem;
}
header.wp-block-template-part .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
header.wp-block-template-part .wp-block-site-logo {
display: flex;
justify-content: center;
}
header.wp-block-template-part .wp-block-navigation__container {
justify-content: center;
}
}