/* ==========================================================================
   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);
}

.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;
}

/* ---------- 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;
}

@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; }
}