/* Styles communs de l'espace clubs. Couleurs et polices : CHARTE.md du site (dossier
   ..\Mapetanque). Polices chargées depuis https://mapetanque.be/polices.css. */

:root {
  --vert: #74C15A;          /* vert Mapetanque : boutons principaux */
  --vert-survol: #56A03D;
  --vert-feuillage: #3D7A2A; /* liens, réussite, écriture manuscrite */
  --vert-nuit: #1D2619;      /* texte, fonds foncés */
  --vert-tendre: #E7F4E1;    /* pastilles, encadrés */
  --terre-battue: #B5502E;   /* accent seulement */
  --blanc: #FFFFFF;
  --brume: #F7F9F6;
  --ligne: #E2E6DE;
  --gris-mousse: #56604F;
  --rouge: #C62828;
  --attention-fond: #FBEFEA;

  --titres: 'Manrope', Arial, sans-serif;
  --texte: 'Figtree', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--brume);
  color: var(--vert-nuit);
  font: 400 16px/1.5 var(--texte);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--vert-feuillage); }

h1, h2, h3 { font-family: var(--titres); line-height: 1.2; margin: 0 0 12px; }
h1 { font-weight: 800; font-size: 32px; }
h2 { font-weight: 700; font-size: 22px; }
h3 { font-weight: 700; font-size: 18px; margin-top: 24px; }

/* ---------- En-tête et pied ---------- */

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Logo « Mapetanque clubs » (maquettes/logo-club/) : logo du site, fichier SVG d'origine, suivi de
   « clubs » en Caveat 700 terre battue, penché de 10°. font-size = hauteur du logo.
   « clubs » fait partie du logo : il ne compte pas dans la règle de la charte « Caveat une fois
   par écran au plus » (décision de Rémy, 20/10/2026). */
.logo-club {
  font-size: 28px;
  display: inline-flex;
  align-items: flex-end;
  text-decoration: none;
  line-height: 1;
}
.logo-club img { height: 1em; display: block; }
.logo-club span {
  font: 700 1.15em/1 'Caveat', cursive;
  color: var(--terre-battue);
  margin-left: 0.16em;
  margin-bottom: -0.06em;
  transform: rotate(-10deg);
  transform-origin: left bottom;
  white-space: nowrap;
}

main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.pied {
  background: var(--vert-nuit);
  color: #C9D1C4;
  font-size: 13px;
  padding: 16px;
  text-align: center;
}
.pied a { color: var(--blanc); }

/* ---------- Blocs ---------- */

.bloc {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.bloc-action { text-align: center; }
.bloc-action p { margin: 0 0 12px; }
.bloc .bloc-action { margin-top: 20px; }

.sous-titre { margin: -4px 0 4px; color: var(--gris-mousse); }
.etat-tournoi { font: 700 16px var(--titres); color: var(--vert-feuillage); margin: 0 0 20px; }
.retour { margin: 0 0 8px; font-size: 14px; }
.discret { color: var(--gris-mousse); }
.attention { color: var(--terre-battue); font-weight: 600; }

/* ---------- Messages ---------- */

.message { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; }
.message-info { background: var(--vert-tendre); }
.message-reussite { background: var(--vert-tendre); color: var(--vert-feuillage); }
.message-erreur { background: #FDECEC; color: var(--rouge); }
.code { font: 800 18px var(--titres); letter-spacing: 2px; color: var(--vert-nuit); }

/* ---------- Boutons ---------- */

.bouton {
  font: 700 16px var(--titres);
  background: var(--vert);
  color: var(--blanc);
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
.bouton:hover:not(:disabled) { background: var(--vert-survol); }
.bouton:disabled { opacity: .45; cursor: default; }
.bouton-secondaire { background: var(--blanc); color: var(--vert-feuillage); border: 2px solid var(--vert); padding: 10px 20px; }
.bouton-secondaire:hover:not(:disabled) { background: var(--vert-tendre); }
.bouton-petit { padding: 8px 16px; font-size: 15px; }

.lien-discret {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--gris-mousse);
  font: 400 14px var(--texte);
  text-decoration: underline;
  cursor: pointer;
}
.lien-discret:hover { color: var(--rouge); }
.bas-de-page { margin-top: 32px; text-align: center; }

/* ---------- Formulaires ---------- */

.formulaire { display: grid; gap: 14px; max-width: 520px; }
.formulaire .bouton { justify-self: start; }
.formulaire.en-ligne { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
.champ { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; }
.champ-libelle, .champ legend { font-weight: 600; padding: 0; }
.champ-aide { font-size: 13px; color: var(--gris-mousse); }

/* Petit « i » à côté d'un libellé, et son explication (dépliée au toucher) */
.champ-libelle { display: flex; align-items: center; gap: 4px; }
.info {
  background: none;
  border: 0;
  padding: 2px;
  color: var(--vert-feuillage);
  cursor: pointer;
  display: inline-flex;
  border-radius: 50%;
}
.info svg { width: 20px; height: 20px; }
.info:hover, .info[aria-expanded="true"] { background: var(--vert-tendre); }
.info-texte {
  margin: 0;
  font-size: 14px;
  background: var(--vert-tendre);
  border-radius: 8px;
  padding: 8px 12px;
}
.formulaire.en-ligne .champ-aide { grid-column: 1 / -1; }
input, select {
  font: 400 16px var(--texte);
  color: var(--vert-nuit);
  padding: 10px 12px;
  border: 1px solid #C9D1C4;
  border-radius: 8px;
  background: var(--blanc);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--vert); outline-offset: 1px; border-color: var(--vert); }
.choix { display: flex; gap: 20px; flex-wrap: wrap; }
.choix label { display: flex; align-items: center; gap: 6px; }
.choix input { width: auto; }
.choix-colonne { flex-direction: column; gap: 8px; }
.choix-colonne label { align-items: flex-start; }
.choix-colonne input { margin-top: 4px; }
.a-venir { color: var(--gris-mousse); }
.a-venir .pastille { white-space: nowrap; }
.champ-code { font: 800 22px var(--titres); letter-spacing: 4px; text-transform: uppercase; max-width: 200px; }

/* ---------- Tournois et équipes ---------- */

.cartes-tournois { display: grid; gap: 10px; }
.carte-tournoi {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.carte-tournoi:hover { border-color: var(--vert); background: var(--brume); }
.carte-tournoi-nom { font: 700 18px var(--titres); }
.carte-tournoi-infos { font-size: 14px; color: var(--gris-mousse); }

.cartes-equipes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.carte-equipe {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.carte-equipe .lien-discret { margin-left: auto; }

.equipe-nom { font: 700 15px var(--titres); display: block; }
.equipe-membres { font-size: 14px; color: var(--gris-mousse); display: block; }
.carte-equipe .equipe-membres { flex-basis: 100%; order: 3; }

.pastille {
  font-size: 12px;
  background: var(--vert-tendre);
  color: var(--vert-feuillage);
  border-radius: 999px;
  padding: 1px 8px;
}
.pastille-attention { background: var(--attention-fond); color: var(--terre-battue); }

/* ---------- Parties ---------- */

.parties { display: grid; gap: 10px; }
.partie {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 10px 14px;
}
.partie-terrain { font: 700 13px var(--titres); color: var(--vert-feuillage); text-transform: uppercase; letter-spacing: .5px; }
.partie-ligne {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}
.partie-equipe-b { text-align: right; }
.partie-score { display: flex; align-items: center; gap: 6px; }
.partie-score input { width: 64px; text-align: center; font: 800 22px var(--titres); padding: 6px 4px; }
.partie-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.partie-boutons { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.partie-exempte { background: var(--brume); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.partie-exempte-texte { margin: 0; color: var(--gris-mousse); }

.statut { font-size: 14px; }
.statut-neutre { color: var(--gris-mousse); }
.statut-ok { color: var(--vert-feuillage); }
.statut-ok::before { content: '✓ '; }
.statut-tel { color: var(--vert-feuillage); display: inline-flex; align-items: center; gap: 4px; }

/* Téléphone : équipe inscrite en ligne, score validé par les joueurs */
.icone-tel { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.inscrite-en-ligne { color: var(--vert-feuillage); }
.legende { font-size: 13px; color: var(--gris-mousse); margin: 10px 0 0; }
.legende .icone-tel { color: var(--vert-feuillage); }
.statut-attention { color: var(--terre-battue); font-weight: 600; }
.statut-attention::before { content: '⚠ '; }

.manche-passee summary { cursor: pointer; list-style-position: inside; }
.manche-passee summary h2 { display: inline; }
.manche-passee[open] summary { margin-bottom: 12px; }

/* ---------- Classement ---------- */

.tableau-defilant { overflow-x: auto; }
.classement { width: 100%; border-collapse: collapse; }
.classement th, .classement td { padding: 8px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.classement th { font: 700 13px var(--titres); color: var(--gris-mousse); }
.classement .nombre { text-align: right; font-family: var(--titres); font-weight: 700; white-space: nowrap; }
.classement .secondaire { color: var(--gris-mousse); font-weight: 600; }
.classement .podium td { background: var(--vert-tendre); }

/* ---------- Vainqueurs ---------- */

.bloc-vainqueurs { text-align: center; border-color: var(--vert); }
.vainqueurs-annonce { font: 700 34px 'Caveat', cursive; color: var(--vert-feuillage); margin: 0; }
.vainqueurs-noms { font: 700 19px var(--titres); margin: 4px 0; }

/* ---------- Téléphone ---------- */

@media (max-width: 640px) {
  h1 { font-size: 22px; }
  h2 { font-size: 20px; }
  .bloc { padding: 16px; }
  .partie-ligne { grid-template-columns: 1fr; gap: 6px; }
  .partie-equipe-b { text-align: left; }
  .formulaire.en-ligne { grid-template-columns: 1fr; }
  .classement .secondaire { display: none; }
}