/* ==========================================================================
   FC MARISCA MERSCH — feuille de style du site
   Couleurs et typographies conformes au manuel "Corporate Identity" du club
   (septembre 2016) : Primärblau #00569D (60%), Sonnengelb #FFCC00 (40%).
   Polices officielles DIN Condensed / Helvetica Neue étant des polices
   commerciales, remplacées ici par des équivalents libres (Oswald pour les
   titres condensés, pile Helvetica Neue/Arial pour le texte courant) —
   si le club possède les licences des vraies polices, elles pourront être
   ajoutées facilement (voir @font-face en commentaire plus bas).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

:root {
  --couleur-principale: #00569D;   /* Primärblau officiel */
  --couleur-principale-claire: #0072C6;
  --couleur-principale-foncee: #003B6E;
  --couleur-accent: #FFCC00;       /* Sonnengelb officiel */
  --couleur-texte: #000000;
  --couleur-texte-clair: #ffffff;
  --couleur-fond: #ffffff;
  --couleur-fond-alt: #f2f6fa;
  --couleur-bordure: #dbe4ec;
  --rayon: 8px;
  --ombre: 0 2px 10px rgba(0,0,0,0.08);
  --largeur-max: 1100px;
  --police-titres: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --police-texte: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
}

/* Si un jour vous ajoutez les vrais fichiers de police du club, il suffit
   de les déposer dans /fonts et de décommenter/adapter ceci :
@font-face {
  font-family: 'DIN Condensed';
  src: url('../fonts/DINCondensed-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--police-texte);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: 1.6;
}

h1, h2, h3, .bouton, nav.navigation-principale a, .logo-club span {
  font-family: var(--police-titres);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

img { max-width: 100%; display: block; }

a { color: var(--couleur-principale-claire); text-decoration: none; }
a:hover { text-decoration: underline; }

.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- En-tête / navigation ---------- */

/* Fond blanc : le manuel de marque impose que le logo (couleur) soit
   toujours placé sur blanc ou fond clair — jamais sur le bleu primaire. */
header.site-header {
  background: var(--couleur-fond);
  color: var(--couleur-principale);
  box-shadow: var(--ombre);
  border-bottom: 3px solid var(--couleur-principale);
}

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  max-width: var(--largeur-max);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 16px;
}

.logo-club {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--couleur-principale);
  font-weight: 700;
  font-size: 1.15rem;
}

.logo-club img {
  height: 58px;
  width: auto;
  flex-shrink: 0;
}

nav.navigation-principale ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
}

nav.navigation-principale a {
  color: var(--couleur-principale);
  padding: 8px 12px;
  border-radius: var(--rayon);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-block;
  border-bottom: 3px solid transparent;
}

nav.navigation-principale a:hover,
nav.navigation-principale a[aria-current="page"] {
  border-bottom: 3px solid var(--couleur-accent);
  text-decoration: none;
}

/* ---------- Bannière / hero ---------- */

.hero {
  background: linear-gradient(100deg, var(--couleur-principale-claire) 0%, var(--couleur-principale-claire) 48%, var(--couleur-principale-foncee) 52%, var(--couleur-principale-foncee) 100%);
  color: var(--couleur-texte-clair);
  padding: 56px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 2.6rem;
  margin: 0 0 10px;
}

.hero p {
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
  opacity: 0.95;
}

.hero-liens {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.bouton {
  display: inline-block;
  background: var(--couleur-accent);
  color: var(--couleur-principale);
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--rayon);
}
.bouton:hover { text-decoration: none; filter: brightness(1.05); }

.bouton-secondaire {
  background: transparent;
  color: var(--couleur-texte-clair);
  border: 2px solid var(--couleur-texte-clair);
}

/* ---------- Contenu ---------- */

main { padding: 48px 0 60px; }

section + section { margin-top: 44px; }

h2 {
  color: var(--couleur-principale);
  font-size: 1.6rem;
  margin-top: 0;
  border-bottom: 3px solid var(--couleur-accent);
  display: inline-block;
  padding-bottom: 6px;
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.carte {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 22px;
}

.carte h3 {
  margin-top: 0;
  color: var(--couleur-principale);
}

/* ---------- Cartes "Nächst Match" / "Leschte Match" (Homepage) ---------- */
/* Contenu rempli dynamiquement par js/matchs.js selon la date réelle du
   visiteur ; le rendu ci-dessous correspond au HTML généré côté serveur
   (rendu initial, avant que le script ne prenne le relais). */

.grille-matchs { align-items: stretch; }

.grille-matchs-eenzel {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

/* ---------- Affiches de match (Homepage) ---------- */
/* Générées par scripts/build_homepage_matches.py à partir des données FuPa. */

.grille-affiches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.affiche-match {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--couleur-bordure);
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0, 40, 80, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.affiche-match:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.12);
}

.affiche-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affiche-plaz {
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: none;
}

.affiche-leschte .affiche-tag {
  background: linear-gradient(100deg, var(--couleur-principale-claire) 0%, var(--couleur-principale-claire) 48%, var(--couleur-principale-foncee) 52%, var(--couleur-principale-foncee) 100%);
  color: #ffffff;
}

.affiche-prochain .affiche-tag {
  background: linear-gradient(100deg, var(--couleur-accent) 0%, var(--couleur-accent) 48%, #F5A800 52%, #F5A800 100%);
  color: var(--couleur-principale-foncee);
}

.affiche-corps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 26px 16px 22px;
  flex: 1;
}

.affiche-equipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.affiche-equipe img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.affiche-equipe span {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
  text-align: center;
  color: var(--couleur-principale-foncee);
}

.affiche-milieu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.affiche-score {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--couleur-principale-foncee);
}

.affiche-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--couleur-principale-foncee);
  color: var(--couleur-accent);
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.05rem;
}

.affiche-infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.76rem;
  line-height: 1.45;
  text-align: center;
  color: #56636e;
}

.affiche-infos span { white-space: nowrap; }

.affiche-comp {
  font-weight: 700;
  color: var(--couleur-principale);
}

.affiche-auer {
  margin-top: 2px;
  font-weight: 700;
  color: var(--couleur-principale-foncee);
}

.affiches-source {
  margin-top: 12px;
  font-size: 0.82rem;
  color: #56636e;
}

@media (max-width: 420px) {
  .affiche-equipe img { width: 56px; height: 56px; }
  .affiche-score { font-size: 1.6rem; }
  .affiche-corps { gap: 6px; padding: 22px 10px 18px; }
  .affiche-infos { font-size: 0.72rem; }
  .affiche-equipe span { font-size: 0.8rem; }
}

.carte-match {
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.carte-match-visuel {
  padding: 34px 26px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carte-match-prochain .carte-match-visuel {
  background: linear-gradient(100deg, var(--couleur-accent) 0%, var(--couleur-accent) 48%, #F5A800 52%, #F5A800 100%);
  color: var(--couleur-principale-foncee);
}

.carte-match-leschte .carte-match-visuel {
  background: linear-gradient(100deg, var(--couleur-principale-claire) 0%, var(--couleur-principale-claire) 48%, var(--couleur-principale-foncee) 52%, var(--couleur-principale-foncee) 100%);
}

.carte-match-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.78rem;
  margin-bottom: 14px;
  opacity: 0.85;
}

.carte-match-prochain .carte-match-eyebrow { color: var(--couleur-principale-foncee); }
.carte-match-leschte .carte-match-eyebrow { color: var(--couleur-accent); }

.carte-match-text {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
}

.carte-match-logo {
  width: 54px;
  height: 54px;
  margin-top: 20px;
  object-fit: contain;
}

.carte-match-legende {
  padding: 14px 20px;
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-top: none;
}

.carte-match-legende h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--couleur-principale);
}

.placeholder {
  background: #fff8e6;
  border: 1px dashed #d9b64d;
  color: #6b5100;
  padding: 14px 16px;
  border-radius: var(--rayon);
  font-size: 0.92rem;
  margin: 16px 0;
}

.placeholder strong { color: #4a3900; }

table.donnees {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
table.donnees th, table.donnees td {
  border: 1px solid var(--couleur-bordure);
  padding: 10px 12px;
  text-align: left;
}
table.donnees th {
  background: var(--couleur-fond-alt);
  color: var(--couleur-principale);
}

.info-legale {
  background: var(--couleur-fond-alt);
  border-radius: var(--rayon);
  padding: 20px 24px;
}

/* ---------- Formulaires (contact, inscriptions) ---------- */

form.formulaire {
  max-width: 560px;
  margin-top: 16px;
}

form.formulaire .champ {
  margin-bottom: 18px;
}

form.formulaire label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--couleur-principale);
  font-family: var(--police-texte);
  text-transform: none;
  letter-spacing: normal;
}

form.formulaire input,
form.formulaire textarea,
form.formulaire select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-size: 1rem;
}

form.formulaire input:focus,
form.formulaire textarea:focus,
form.formulaire select:focus {
  outline: 2px solid var(--couleur-principale-claire);
  outline-offset: 1px;
}

form.formulaire button {
  font-family: var(--police-titres);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--couleur-accent);
  color: var(--couleur-principale-foncee);
  border: none;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--rayon);
  cursor: pointer;
  font-size: 0.95rem;
}
form.formulaire button:hover { filter: brightness(1.05); }
form.formulaire button:disabled { opacity: 0.6; cursor: not-allowed; }

.formulaire-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--rayon);
  font-size: 0.92rem;
  display: none;
}
.formulaire-message.ok {
  background: #e7f6ec;
  color: #16663a;
  border: 1px solid #b6e3c6;
}
.formulaire-message.erreur {
  background: #fdecec;
  color: #8a1f1f;
  border: 1px solid #f3c2c2;
}

/* honeypot anti-spam, invisible pour les humains */
.piege-a-spam {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Grille de logos sponsors ---------- */

.grille-sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.logo-sponsor {
  background: #ffffff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}

.logo-sponsor img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.logo-sponsor a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logo-sponsor.fond-sombre {
  background: var(--couleur-principale-foncee);
}

.logo-sponsor.texte {
  padding: 12px 14px;
  text-align: center;
}
.logo-sponsor.texte a,
.logo-sponsor.texte span {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--couleur-principale);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.logo-sponsor.texte span { color: #56636e; }

/* Grille unifiée (page Sponsoren) : plus de titres Gold/Sëlwer/Bronz, la
   hiérarchie se voit uniquement à la taille des logos. */
.grille-sponsors-unifiee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.grille-sponsors-unifiee .logo-sponsor { margin: 0; }

.grille-sponsors-unifiee .logo-sponsor-gold {
  flex: 0 0 230px;
  min-height: 140px;
  padding: 22px;
}
.grille-sponsors-unifiee .logo-sponsor-gold img { max-height: 105px; }
.grille-sponsors-unifiee .logo-sponsor-gold.texte a,
.grille-sponsors-unifiee .logo-sponsor-gold.texte span { font-size: 1.05rem; }

.grille-sponsors-unifiee .logo-sponsor-silver {
  flex: 0 0 170px;
  min-height: 105px;
  padding: 16px;
}
.grille-sponsors-unifiee .logo-sponsor-silver img { max-height: 68px; }
.grille-sponsors-unifiee .logo-sponsor-silver.texte a,
.grille-sponsors-unifiee .logo-sponsor-silver.texte span { font-size: 0.88rem; }

.grille-sponsors-unifiee .logo-sponsor-bronze {
  flex: 0 0 125px;
  min-height: 78px;
  padding: 10px;
}
.grille-sponsors-unifiee .logo-sponsor-bronze img { max-height: 46px; }
.grille-sponsors-unifiee .logo-sponsor-bronze.texte a,
.grille-sponsors-unifiee .logo-sponsor-bronze.texte span { font-size: 0.72rem; }

@media (max-width: 600px) {
  .grille-sponsors-unifiee .logo-sponsor-gold { flex-basis: 45%; }
  .grille-sponsors-unifiee .logo-sponsor-silver { flex-basis: 32%; }
  .grille-sponsors-unifiee .logo-sponsor-bronze { flex-basis: 26%; }
}

/* ---------- Liste de documents (bilans financiers) ---------- */

.liste-documents {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.liste-documents li {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.liste-documents .nom-doc {
  font-weight: 600;
  color: var(--couleur-principale);
}

/* ---------- Pied de page ---------- */

footer.site-footer {
  background: var(--couleur-principale-foncee);
  color: #d7e3ee;
  padding: 36px 0 20px;
  font-size: 0.9rem;
}

.footer-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

footer.site-footer h4 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 1rem;
}

footer.site-footer a { color: #bcd7ee; }

.reseaux-sociaux {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.reseaux-sociaux a {
  background: rgba(255,255,255,0.08);
  padding: 8px 14px;
  border-radius: var(--rayon);
}

.copyright {
  text-align: center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #7fa3c4;
}

/* ---------- Bande photo équipe (page d'accueil) ---------- */

.bande-ekipp {
  display: block;
  position: relative;
  min-height: 260px;
  margin-top: 44px;
  background-size: cover;
  background-position: center 20%;
  color: #fff;
  text-decoration: none;
}
.bande-ekipp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,59,110,0.88) 0%, rgba(0,59,110,0.55) 45%, rgba(0,59,110,0.25) 100%);
}
.bande-ekipp .bande-contenu {
  position: relative;
  z-index: 1;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 20px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bande-ekipp h3 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 1.6rem;
}
.bande-ekipp span.lien-bande {
  font-weight: 700;
  color: var(--couleur-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: var(--police-titres);
  font-size: 0.9rem;
}
.bande-ekipp:hover { text-decoration: none; }
.bande-ekipp:hover span.lien-bande { text-decoration: underline; }

/* ---------- Comité ---------- */

.comite-groupe + .comite-groupe { margin-top: 32px; }
.comite-groupe h3 {
  color: var(--couleur-principale);
  font-family: var(--police-titres);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.comite-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.comite-carte {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-left: 4px solid var(--couleur-principale);
  border-radius: var(--rayon);
  padding: 10px 14px;
}
.comite-carte.bureau { border-left-color: var(--couleur-accent); }
.comite-carte .nom { font-weight: 700; color: var(--couleur-principale-foncee); display: block; }
.comite-carte .role { font-size: 0.85rem; color: #4a6178; }

/* ---------- Coupe annuelle ---------- */

.coupe-vedette {
  background: linear-gradient(100deg, var(--couleur-accent) 0%, var(--couleur-accent) 48%, #F5A800 52%, #F5A800 100%);
  color: var(--couleur-principale-foncee);
  border-radius: var(--rayon);
  padding: 28px 26px;
  margin-top: 18px;
}
.coupe-vedette h3 { margin-top: 0; font-size: 1.5rem; }
.coupe-vedette .matchs-vedette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.coupe-vedette .match-carte {
  background: rgba(255,255,255,0.55);
  border-radius: var(--rayon);
  padding: 12px 14px;
  font-size: 0.92rem;
}
.coupe-vedette .match-carte strong { display: block; margin-bottom: 4px; }
.coupe-vedette-inhalt {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.coupe-vedette-text { flex: 1 1 380px; min-width: 280px; }
.coupe-vedette .bouton {
  background: var(--couleur-principale-foncee);
  color: #ffffff;
}
.coupe-vedette-cover {
  flex: 0 0 200px;
  display: block;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transform: rotate(-2deg);
  transition: transform 0.2s ease;
}
.coupe-vedette-cover:hover { transform: rotate(0deg) scale(1.03); }
.coupe-vedette-cover img { display: block; width: 100%; height: auto; }

.lien-editioun {
  color: var(--couleur-principale);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lien-editioun:hover { color: var(--couleur-accent); }

/* ---------- Galerie rétro ---------- */

.retro-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px;
  margin-top: 24px;
}
.carte-retro {
  background: #fdfaf3;
  padding: 12px 12px 16px;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transform: rotate(var(--rot, -1deg));
  transition: transform 0.2s ease;
}
.carte-retro:nth-child(even) { --rot: 1.3deg; }
.carte-retro:nth-child(3n) { --rot: -0.6deg; }
.carte-retro:hover { transform: rotate(0deg) scale(1.03); }
.carte-retro img {
  width: 100%;
  filter: sepia(0.45) contrast(1.05);
  transition: filter 0.2s ease;
}
.carte-retro:hover img { filter: sepia(0.1) contrast(1.05); }
.carte-retro .legende-retro {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: var(--police-titres);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--couleur-principale-foncee);
}

/* ---------- Photos infrastructure ---------- */

.grille-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.grille-photos img { border-radius: var(--rayon); box-shadow: var(--ombre); }

/* ---------- Statistiken ---------- */

.note-methodo {
  background: #eaf3fb;
  border: 1px solid #bcd9ef;
  border-left: 4px solid var(--couleur-principale-claire);
  border-radius: var(--rayon);
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 0.94rem;
}
.note-methodo strong { color: var(--couleur-principale-foncee); }
.note-methodo ul { margin: 8px 0 0; padding-left: 20px; }
.note-methodo li + li { margin-top: 6px; }

.stat-vedette {
  background: linear-gradient(100deg, var(--couleur-principale-claire) 0%, var(--couleur-principale-claire) 48%, var(--couleur-principale-foncee) 52%, var(--couleur-principale-foncee) 100%);
  color: #fff;
  border-radius: var(--rayon);
  padding: 26px 26px;
  margin-top: 18px;
}
.stat-vedette h3 { margin-top: 0; font-size: 1.4rem; color: var(--couleur-accent); }
.stat-vedette p { margin-bottom: 0; }

.stats-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.stat-chiffre {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 16px;
  text-align: center;
}
.stat-chiffre .valeur {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--couleur-principale);
}
.stat-chiffre .label {
  display: block;
  font-size: 0.82rem;
  color: #56636e;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .entete-barre { flex-direction: column; align-items: flex-start; }
  nav.navigation-principale ul { justify-content: flex-start; }
  .hero h1 { font-size: 1.7rem; }
  .bande-ekipp .bande-contenu { height: auto; padding: 30px 20px; }
}

/* ---------- Menu : sous-menu « Ekippen » ---------- */

nav.navigation-principale li { position: relative; }

.nav-deroulant > a::after {
  content: " ▾";
  font-size: 0.75em;
}

nav.navigation-principale a.actif { border-bottom: 3px solid var(--couleur-accent); }

nav.navigation-principale ul.sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 190px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  box-shadow: 0 10px 24px rgba(0, 40, 80, 0.14);
}

.nav-deroulant:hover > ul.sous-menu,
.nav-deroulant:focus-within > ul.sous-menu { display: flex; }

nav.navigation-principale ul.sous-menu a {
  display: block;
  border-bottom: none;
  white-space: nowrap;
}

nav.navigation-principale ul.sous-menu a:hover,
nav.navigation-principale ul.sous-menu a[aria-current="page"] {
  background: var(--couleur-fond-alt);
  border-bottom: none;
}

/* ---------- Matcher pro Ekipp ---------- */

.ekipp-bloc { margin-top: 28px; }
.ekipp-bloc:first-child { margin-top: 10px; }

.ekipp-bloc-titel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.ekipp-bloc-titel h3 {
  margin: 0;
  color: var(--couleur-principale);
  font-size: 1.1rem;
}

.ekipp-bloc-titel a { font-size: 0.85rem; font-weight: 600; }

.fil-ariane { margin-top: 32px; font-size: 0.85rem; color: #56636e; }
.ekipp-liga { color: #56636e; font-weight: 600; margin-top: 0; }

.note-saison {
  background: #fff8e6;
  border-left: 4px solid var(--couleur-accent);
  padding: 12px 16px;
  border-radius: var(--rayon);
}

.matchs-vide { color: #56636e; font-style: italic; }

.matchs-liste {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-top: 16px;
  background: #ffffff;
}

.ml {
  display: grid;
  grid-template-columns: 210px 1fr 64px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--couleur-bordure);
  color: inherit;
  text-decoration: none;
}

.ml:first-child { border-top: none; }
.ml:hover { background: var(--couleur-fond-alt); text-decoration: none; }

.ml-datum {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--couleur-principale-foncee);
}

.ml-datum small { font-weight: 400; font-size: 0.72rem; color: #56636e; }

.ml-dom, .ml-ext {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  min-width: 0;
}

.ml-dom { justify-content: flex-end; text-align: right; }

.ml-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.ml-score, .ml-auer {
  text-align: center;
  font-family: var(--police-titres);
  font-weight: 800;
  border-radius: 6px;
  padding: 5px 0;
}

.ml-score { color: #ffffff; }
.ml-s { background: #2e8b57; }
.ml-n { background: #c0392b; }
.ml-u { background: #7f8c8d; }
.ml-auer { color: var(--couleur-principale-foncee); background: var(--couleur-fond-alt); font-size: 0.85rem; }

.grille-ekippen .carte-ekipp {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.grille-ekippen .carte-ekipp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.12);
  text-decoration: none;
}

.lien-carte { font-weight: 600; color: var(--couleur-principale-claire); }

@media (max-width: 600px) {
  .ml { grid-template-columns: 1fr 52px 1fr; gap: 8px; }
  .ml-datum { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .ml-dom, .ml-ext { font-size: 0.8rem; }
}

.ekipp-matchs h2 { margin-top: 44px; }

@media (max-width: 720px) {
  .grille-affiches { grid-template-columns: 1fr; }
}

/* ---------- Horaire modifié ---------- */

.badge-nei {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #c0392b;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.affiche-infos .affiche-auer-nei { color: #c0392b; font-size: 0.9rem; }
.affiche-infos .auer-al { font-size: 0.7rem; color: #56636e; }

.ml-auer-nei {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  color: #ffffff;
  background: #c0392b;
}

.ml-auer-nei small { font-size: 0.65rem; font-weight: 600; opacity: 0.85; }

/* ---------- JuMM : Dëse Weekend ---------- */

.weekend-periode { margin-top: -6px; color: #56636e; font-weight: 600; }

.weekend-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.weekend-cat {
  background: #ffffff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 16px 18px;
  min-width: 0;
}

.weekend-cat h3 {
  margin: 0 0 10px;
  color: var(--couleur-principale);
  font-size: 1rem;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--couleur-accent);
}

.weekend-liste { list-style: none; margin: 0; padding: 0; }

.weekend-liste li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 2px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--couleur-bordure);
  font-size: 0.86rem;
}

.weekend-liste li:first-child { border-top: none; }
.weekend-ekipp { font-weight: 700; color: var(--couleur-principale-foncee); white-space: nowrap; }
.weekend-wann { font-weight: 700; color: var(--couleur-principale); white-space: nowrap; font-variant-numeric: tabular-nums; }
.weekend-geint { min-width: 0; }
.weekend-wou { grid-column: 2 / -1; font-size: 0.76rem; color: #56636e; }
.weekend-score { color: var(--couleur-principale-foncee); }