/* ==========================================================================
L'Union Saint-Jean FC — feuille de style commune
========================================================================== */
/* Police chargée via dans le des layouts (plus rapide qu'un
@import CSS, qui bloque le rendu le temps d'un aller-retour réseau de plus). */
:root {
/* Couleurs alignées sur le site officiel (lunionsaintjeanfc.fr) : rouge de marque
et noir/blanc francs plutôt que les teintes cassées utilisées jusque-là. */
--rouge: #C80005;
--rouge-sombre: #960004;
--noir: #000000;
--noir-plate: #1B1B1B;
--blanc-casse: #FFFFFF;
--gris: #6B6864;
--gris-fonce: #2B2926;
--display: 'Anton', 'Arial Narrow', sans-serif;
--corps: 'Epilogue', system-ui, sans-serif;
--mono: 'JetBrains Mono', 'Courier New', monospace;
--serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--corps);
color: var(--gris-fonce);
background: var(--blanc-casse);
line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible {
outline: 3px solid var(--rouge);
outline-offset: 3px;
}
.container {
width: min(1100px, 100% - 3rem);
margin-inline: auto;
}
/* ---------- Bandeau supérieur (réseaux sociaux) ---------- */
.topbar-reseaux {
background: var(--rouge);
}
.topbar-reseaux .container {
display: flex;
justify-content: flex-end;
gap: 1.1rem;
padding-block: 0.5rem;
}
.topbar-reseaux a { display: flex; }
.topbar-reseaux svg { width: 1.05rem; height: 1.05rem; fill: var(--blanc-casse); }
.topbar-reseaux a:hover svg { opacity: 0.75; }
/* ---------- En-tête / navigation ---------- */
.site-header {
background: var(--noir);
color: var(--blanc-casse);
position: sticky;
top: 0;
z-index: 20;
border-bottom: 3px solid var(--rouge);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 0.9rem;
}
.marque {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
color: var(--blanc-casse);
}
.marque svg, .marque-logo { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; }
.marque-texte {
font-family: var(--display);
font-size: 1.15rem;
letter-spacing: 0.02em;
line-height: 1.05;
text-transform: uppercase;
}
.marque-texte span {
display: block;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--rouge);
margin-top: 0.25rem;
}
nav.principale > ul {
display: flex;
align-items: center;
gap: 1.9rem;
list-style: none;
margin: 0;
padding: 0;
}
/* Chaque item du menu passe en bloc via flex, y compris les liens simples :
sans ça, le lien "Le Club" (rendu en bloc car enfant direct du conteneur
flex .lien-avec-sous-menu) n'a pas exactement la même hauteur de ligne
qu'un lien simple resté en ligne, d'où le léger décalage vertical. */
nav.principale > ul > li {
display: flex;
align-items: center;
}
nav.principale a,
nav.principale .libelle-menu {
text-decoration: none;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blanc-casse);
padding-bottom: 0.35rem;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
nav.principale a:hover,
nav.principale a[aria-current="page"],
.a-sous-menu:hover .libelle-menu,
.a-sous-menu:focus-within .libelle-menu {
border-color: var(--rouge);
color: var(--rouge);
}
.libelle-menu { cursor: default; }
.lien-deconnexion { display: flex; align-items: center; }
.lien-deconnexion button {
background: none;
border: none;
cursor: pointer;
padding: 0;
text-decoration: none;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: inherit;
color: var(--blanc-casse);
padding-bottom: 0.35rem;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
.lien-deconnexion button:hover { border-color: var(--rouge); color: var(--rouge); }
.menu-toggle {
display: none;
background: none;
border: 1px solid var(--blanc-casse);
color: var(--blanc-casse);
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.5rem 0.8rem;
cursor: pointer;
}
/* ---------- Sous-menu (desktop : menu déroulant au survol) ---------- */
.a-sous-menu { position: relative; }
/* Pont invisible au-dessus du sous-menu : sans lui, la souris "sort" du
survol pendant la fraction de seconde où elle traverse l'espace vide
entre le lien et le menu déroulant (margin-top de .sous-menu), ce qui
referme le menu avant que le clic sur un enfant n'arrive. */
.a-sous-menu::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 0.6rem;
display: none;
}
.a-sous-menu:hover::after,
.a-sous-menu:focus-within::after {
display: block;
}
.lien-avec-sous-menu { display: flex; align-items: center; gap: 0.3rem; }
.sous-menu-toggle {
display: none;
background: none;
border: none;
color: var(--blanc-casse);
font-size: 0.65rem;
cursor: pointer;
padding: 0;
}
.sous-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0.6rem 0 0;
padding: 0.4rem 0;
list-style: none;
background: var(--noir);
border: 1px solid #333;
border-top: 2px solid var(--rouge);
z-index: 30;
}
.a-sous-menu:hover .sous-menu,
.a-sous-menu:focus-within .sous-menu {
display: block;
}
.sous-menu li { width: 100%; }
/* Préfixées par "nav.principale" pour l'emporter sur "nav.principale a",
plus spécifique que ".sous-menu a" seul (même problème que .sous-menu
lui-même face à "nav.principale ul"). */
nav.principale .sous-menu a {
display: block;
padding: 0.6rem 1rem;
border-bottom: none;
white-space: nowrap;
}
/* ---------- Hero ---------- */
.hero {
position: relative;
background: var(--noir);
color: var(--blanc-casse);
overflow: hidden;
padding-block: 5.5rem 4.5rem;
border-bottom: 3px solid var(--rouge);
}
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blanc-casse);
opacity: 0.85;
margin: 0 0 1rem;
}
.hero h1 {
font-family: var(--display);
font-size: clamp(2.6rem, 6vw, 5.2rem);
line-height: 0.96;
text-transform: uppercase;
text-align: center;
margin: 0 auto 1.1rem;
max-width: 20ch;
}
.hero p.lede {
font-size: 1.1rem;
max-width: 46ch;
text-align: left;
color: var(--blanc-casse);
opacity: 0.92;
}
.hero-stats {
display: flex;
gap: 2.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.hero-stats div strong {
display: block;
font-family: var(--display);
font-size: 2.1rem;
line-height: 1;
}
.hero-stats div span {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blanc-casse);
opacity: 0.75;
}
/* ---------- Sections génériques ---------- */
.section {
padding-block: 4.5rem;
}
.section--sombre {
background: var(--noir);
color: var(--blanc-casse);
}
.section--rouge {
background: var(--rouge);
color: var(--blanc-casse);
}
.section-tete {
margin-bottom: 2.8rem;
max-width: 60ch;
}
.section-eyebrow {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rouge);
margin: 0 0 0.6rem;
}
.section h2 {
font-family: var(--display);
text-transform: uppercase;
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
line-height: 1.02;
margin: 0 0 0.9rem;
}
.section--sombre h2,
.section--rouge h2 { color: var(--blanc-casse); }
.section--sombre .section-eyebrow { color: var(--rouge); }
.section--rouge .section-eyebrow,
.section--rouge .niveau-titre { color: var(--blanc-casse); }
.section p.chapo {
font-size: 1.02rem;
color: var(--gris);
margin: 0;
}
.section--sombre p.chapo { color: #cfcbc5; }
.section--rouge p.chapo { color: #ffd9d9; }
.section--rouge .activite-icone { background: var(--noir); }
/* ---------- Grille cartes actus / accueil ---------- */
.grille-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
}
.grille-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.carte {
display: block;
background: #fff;
border: 1px solid #E4E0D9;
border-top: 4px solid var(--rouge);
padding: 1.7rem;
color: inherit;
text-decoration: none;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.carte:hover {
box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.carte-photo {
display: block;
width: calc(100% + 3.4rem);
height: 10rem;
object-fit: cover;
margin: -1.7rem -1.7rem 1.2rem;
}
.carte h3 {
font-family: var(--display);
text-transform: uppercase;
font-size: 1.25rem;
margin: 0 0 0.6rem;
color: var(--gris-fonce);
}
.carte p { color: var(--gris); margin: 0; font-size: 0.95rem; }
.carte .label {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rouge);
margin-bottom: 0.6rem;
display: block;
}
/* ---------- Billets d'événements (motif signature) ---------- */
.billet {
position: relative;
display: grid;
grid-template-columns: 8.5rem 1fr;
background: #fff;
border: 1px solid #E4E0D9;
margin-bottom: 1.4rem;
overflow: hidden;
}
.billet-date {
background: var(--noir);
color: var(--blanc-casse);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--display);
text-transform: uppercase;
position: relative;
padding: 1rem;
}
.billet-date .jour { font-size: 2.4rem; line-height: 1; }
.billet-date .mois { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; margin-top: 0.3rem; }
/* pointillé façon souche de billet déchirée */
.billet-date::after {
content: "";
position: absolute;
right: -1px;
top: 0;
bottom: 0;
width: 0;
border-right: 2px dashed rgba(246,244,240,0.35);
}
.billet-corps {
padding: 1.3rem 1.6rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.35rem;
}
.billet-type {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rouge);
}
.billet-corps h3 {
font-family: var(--display);
text-transform: uppercase;
font-size: 1.3rem;
margin: 0;
color: var(--gris-fonce);
}
.billet-corps p { margin: 0; color: var(--gris); font-size: 0.92rem; }
/* Le billet devient cliquable (lien vers la page événement) : on neutralise
le style de lien par défaut, l'effet visuel reste celui du billet. */
a.billet { text-decoration: none; color: inherit; transition: box-shadow 0.2s ease; }
a.billet:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
/* Variante avec photo à droite. */
.billet--avec-photo { grid-template-columns: 8.5rem 1fr 8rem; }
.billet-photo {
width: 100%;
height: 100%;
min-height: 8rem;
object-fit: cover;
}
@media (max-width: 640px) {
.billet--avec-photo { grid-template-columns: 8.5rem 1fr; }
.billet--avec-photo .billet-photo { grid-column: 1 / -1; }
}
.billet-lieu {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--gris-fonce);
margin-top: 0.3rem;
}
/* ---------- Boutique (collections de produits) ---------- */
.grille-produits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.6rem;
margin-bottom: 3rem;
}
.grille-produits:last-child { margin-bottom: 0; }
.produit {
flex: 0 1 min(calc((100% - (var(--colonnes, 3) - 1) * 1.6rem) / var(--colonnes, 3)), 320px);
max-width: min(calc((100% - (var(--colonnes, 3) - 1) * 1.6rem) / var(--colonnes, 3)), 320px);
background: #fff;
overflow: hidden;
}
.produit img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 640px) {
.produit { flex: 1 1 100%; max-width: 100%; }
}
.produit-info { background: var(--noir); padding: 1.1rem 1.2rem; text-align: center; }
.produit-info--clair {
background: #fff;
}
.produit-info--clair .produit-prix { color: var(--gris-fonce); }
.produit-info h3 {
font-family: var(--display);
text-transform: uppercase;
color: var(--rouge);
font-size: 1.05rem;
margin: 0 0 0.4rem;
}
.produit-prix {
font-family: var(--mono);
color: var(--blanc-casse);
font-size: 1rem;
margin: 0;
}
/* ---------- Frise chronologique : table à souvenirs vintage ---------- */
.table-frise {
position: relative;
padding-block: 4.5rem;
background:
repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 90px),
linear-gradient(180deg, #8a6a4a, #6e5138);
}
.table-frise .titre-section {
font-family: var(--display);
text-transform: uppercase;
color: #fff;
text-align: center;
margin: 0 0 3rem;
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.pile {
max-width: 46rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2.6rem;
}
/* Chaque pièce : légère rotation et décalage qui tournent sur 6 valeurs
fixes selon la position (pas de hasard JS, le rendu reste stable). */
.piece { position: relative; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.piece:nth-child(6n+1) { transform: rotate(-2.4deg) translateX(-0.6rem); }
.piece:nth-child(6n+2) { transform: rotate(1.6deg) translateX(1.2rem); }
.piece:nth-child(6n+3) { transform: rotate(-1deg) translateX(-1.4rem); }
.piece:nth-child(6n+4) { transform: rotate(2.8deg) translateX(0.8rem); }
.piece:nth-child(6n+5) { transform: rotate(-3.2deg) translateX(1.6rem); }
.piece:nth-child(6n+6) { transform: rotate(1deg) translateX(-0.9rem); }
/* Ruban adhésif façon washi tape, comme si la pièce était scotchée sur la table. */
.piece::before {
content: "";
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%) rotate(-4deg);
width: 3.6rem;
height: 1.3rem;
background: rgba(200, 0, 5, 0.55);
box-shadow: 0 2px 3px rgba(0,0,0,0.2);
z-index: 2;
}
/* ---------- Variante billet vintage ---------- */
.piece--billet {
display: grid;
grid-template-columns: 7rem 1fr;
background: #F3E9D2;
border: 1px solid #C9B896;
}
.piece--billet .souche {
background: #2B2117;
color: #F3E9D2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--display);
text-transform: uppercase;
padding: 0.9rem 0.4rem;
position: relative;
}
.piece--billet .souche::after {
content: "";
position: absolute;
right: 0; top: 0; bottom: 0;
border-right: 2px dashed rgba(243,233,210,0.4);
}
.piece--billet .annee { font-size: clamp(1rem, 2.4vw, 1.3rem); line-height: 1.15; text-align: center; }
.piece--billet .numero { font-family: var(--mono); font-size: 0.55rem; opacity: 0.6; margin-top: 0.4rem; }
.piece--billet .corps { padding: 1.1rem 1.4rem; color: #3B2E1F; }
.piece--billet .corps h3 { font-family: var(--serif); font-style: italic; font-size: 1.3rem; margin: 0 0 0.3rem; color: #7A1E14; }
.piece--billet .corps p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #4a3d2c; }
.piece--billet .photo-billet {
margin-top: 0.8rem;
max-width: 100%;
border: 4px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
filter: sepia(0.35) contrast(1.05);
}
/* ---------- Variante coupure de presse ---------- */
.piece--article {
background: #EDE3C4;
padding: 1.4rem 1.6rem;
border: 1px solid #D8C9A0;
clip-path: polygon(0% 2%, 3% 0%, 96% 1%, 100% 3%, 99% 97%, 97% 100%, 4% 99%, 0% 96%);
}
.piece--article .kicker {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7A1E14;
border-bottom: 1px solid #7A1E14;
padding-bottom: 0.3rem;
margin-bottom: 0.5rem;
display: inline-block;
}
.piece--article h3 {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(1.3rem, 3vw, 1.7rem);
line-height: 1.1;
margin: 0 0 0.7rem;
color: #201a10;
}
.piece--article .photo-article {
display: block;
width: 100%;
max-height: 16rem;
object-fit: cover;
margin-bottom: 0.8rem;
border: 6px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
filter: sepia(0.5) contrast(1.05) grayscale(0.2);
}
.piece--article p {
font-family: var(--serif);
font-size: 0.92rem;
line-height: 1.6;
color: #3a3120;
margin: 0;
}
.piece--article p::first-letter {
font-size: 2.4rem;
font-weight: 900;
float: left;
line-height: 0.8;
padding-right: 0.3rem;
color: #7A1E14;
}
@media (max-width: 640px) {
.piece--billet { display: block; }
.piece--billet .souche { flex-direction: row; justify-content: center; gap: 0.6rem; padding: 0.7rem; }
.piece--billet .souche::after { display: none; border-bottom: 2px dashed rgba(243,233,210,0.4); }
}
/* ---------- Activités ---------- */
.activite {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: 1.2rem;
padding: 1.8rem 0;
border-top: 1px solid #E4E0D9;
}
.activite:last-child { border-bottom: 1px solid #E4E0D9; }
.activite-icone {
width: 3.4rem;
height: 3.4rem;
background: var(--rouge);
display: flex;
align-items: center;
justify-content: center;
}
.activite-icone svg { width: 1.7rem; height: 1.7rem; stroke: #fff; }
.activite h3 {
font-family: var(--display);
text-transform: uppercase;
font-size: 1.2rem;
margin: 0 0 0.4rem;
}
.activite p { margin: 0 0 0.5rem; color: var(--gris); font-size: 0.95rem; }
.activite .infos {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rouge-sombre);
}
/* ---------- Partenaires (panneaux stade) ---------- */
.grille-partenaires {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
}
.panneau {
aspect-ratio: 3 / 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.panneau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.panneau span {
font-family: var(--mono);
color: var(--gris-fonce);
font-size: 0.78rem;
letter-spacing: 0.06em;
text-align: center;
}
.section h2.titre-souligne {
display: block;
width: fit-content;
text-align: center;
padding-bottom: 0.5rem;
margin: 0 auto 2.4rem;
border-bottom: 6px solid var(--rouge);
}
.section--sombre .titre-souligne,
.section--rouge .titre-souligne { color: var(--blanc-casse); }
/* ---------- Formulaire "devenir partenaire" / contact ---------- */
.formulaire {
background: #fff;
border: 1px solid #E4E0D9;
padding: 2rem;
max-width: 34rem;
}
.champ { margin-bottom: 1.2rem; }
.champ label {
display: block;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gris-fonce);
margin-bottom: 0.4rem;
}
.champ input,
.champ textarea,
.champ select {
width: 100%;
padding: 0.7rem 0.8rem;
border: 1px solid #D8D3CA;
background: var(--blanc-casse);
font-family: var(--corps);
font-size: 0.95rem;
}
/* ---------- Bloc "Deux cartouches" ---------- */
.grille-cartouches {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.cartouche {
background: var(--noir);
color: var(--blanc-casse);
padding: 2.8rem 2rem;
text-align: center;
}
.cartouche > * + * { margin-top: 0.8rem; }
.cartouche h1 {
display: table;
margin: 0 auto;
padding-bottom: 0.4rem;
font-family: var(--display);
text-transform: uppercase;
font-size: clamp(1.4rem, 3vw, 2rem);
border-bottom: 6px solid var(--rouge);
}
.cartouche a {
display: inline-block;
padding: 0.8rem 1.8rem;
border-radius: 999px;
border: 2px solid var(--rouge-sombre);
background: var(--rouge);
color: #fff;
font-weight: 600;
text-decoration: none;
}
.cartouche a:hover { background: var(--rouge-sombre); }
@media (max-width: 640px) {
.grille-cartouches { grid-template-columns: 1fr; }
}
.bouton {
display: inline-block;
background: var(--rouge);
color: #fff;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border: none;
padding: 0.9rem 1.6rem;
cursor: pointer;
transition: background 0.2s ease;
}
.bouton:hover { background: var(--rouge-sombre); }
/* ---------- Organigramme / bureau ---------- */
.bureau-groupe {
margin-bottom: 3rem;
}
.bureau-groupe:last-child { margin-bottom: 0; }
.grille-bureau {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.4rem;
margin-bottom: 1.4rem;
}
.grille-bureau:last-child { margin-bottom: 0; }
.fiche-membre {
flex: 0 1 min(calc((100% - (var(--colonnes, 3) - 1) * 1.4rem) / var(--colonnes, 3)), 300px);
max-width: min(calc((100% - (var(--colonnes, 3) - 1) * 1.4rem) / var(--colonnes, 3)), 300px);
background: #fff;
border: 1px solid #E4E0D9;
text-align: center;
padding: 1.8rem 1.2rem;
}
@media (max-width: 640px) {
.fiche-membre { flex: 1 1 100%; max-width: 100%; }
}
.avatar-membre {
width: 8rem;
height: 8rem;
margin: 0 auto 1rem;
background: var(--noir);
border-bottom: 3px solid var(--rouge);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
color: var(--blanc-casse);
font-size: 2rem;
text-transform: uppercase;
}
.avatar-membre-photo {
width: 8rem;
height: 8rem;
margin: 0 auto 1rem;
border-bottom: 3px solid var(--rouge);
object-fit: cover;
object-position: center top;
}
.fiche-membre h3 {
font-family: var(--display);
text-transform: uppercase;
font-size: 1.1rem;
margin: 0 0 0.3rem;
color: var(--gris-fonce);
}
.fiche-membre .fonction {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rouge);
}
.fiche-membre--president .avatar-membre {
width: 5.4rem;
height: 5.4rem;
font-size: 1.5rem;
}
/* ---------- Équipes du club ---------- */
.grille-equipes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
.carte-equipe {
background: var(--noir);
color: var(--blanc-casse);
border-bottom: 4px solid var(--rouge);
padding: 1.8rem;
}
.carte-equipe .categorie {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rouge);
display: block;
margin-bottom: 0.7rem;
}
.carte-equipe h3 {
font-family: var(--display);
text-transform: uppercase;
font-size: 1.4rem;
margin: 0 0 0.6rem;
}
.carte-equipe p {
margin: 0;
font-size: 0.9rem;
color: #cfcbc5;
}
.carte-equipe .niveau {
margin-top: 1rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--blanc-casse);
opacity: 0.8;
}
/* ---------- Bloc carrousel (module CMS pages/blocs) ---------- */
.bloc-carrousel h2 { margin-bottom: 2rem; }
.carrousel { position: relative; }
.carrousel-piste {
display: flex;
gap: 1.2rem;
margin: 0;
padding: 0 0 0.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-slide {
position: relative;
flex: 0 0 85%;
scroll-snap-align: center;
margin: 0;
overflow: hidden;
background: var(--noir);
}
@media (min-width: 640px) { .carrousel-slide { flex-basis: 58%; } }
@media (min-width: 960px) { .carrousel-slide { flex-basis: 42%; } }
.carrousel-slide img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
opacity: 0.88;
}
.carrousel-slide figcaption {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
text-align: center;
font-family: var(--display);
text-transform: uppercase;
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
line-height: 1.05;
letter-spacing: 0.01em;
color: var(--blanc-casse);
background: linear-gradient(180deg, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%);
text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.carrousel-fleche {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
color: var(--noir);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: none;
transition: background 0.2s ease;
}
.carrousel-fleche:hover { background: var(--blanc-casse); }
.carrousel-fleche--prec { left: -0.6rem; }
.carrousel-fleche--suiv { right: -0.6rem; }
@media (min-width: 640px) { .carrousel-fleche { display: block; } }
/* ---------- Pied de page ---------- */
.site-footer {
background: var(--noir);
color: var(--blanc-casse);
padding-block: 3.5rem 2rem;
}
.site-footer .container {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.5rem;
}
.footer-marque {
display: flex;
align-items: center;
gap: 1.2rem;
}
.footer-marque svg, .footer-marque img { width: 64px; height: 70px; flex-shrink: 0; object-fit: contain; }
.footer-marque-texte {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blanc-casse);
max-width: 14rem;
}
.footer-texte {
margin-top: 1rem;
font-size: 0.88rem;
line-height: 1.5;
color: #cfcbc5;
max-width: 26rem;
}
.footer-texte p { margin: 0 0 0.6rem; }
.footer-texte a { color: var(--blanc-casse); }
/* ---------- Alignement dans les textes riches (Trix) ---------- */
/* Trix rend "Centrer"/"Droite" en /