/* =========================================================================
   Vaud Boxe · styles propres aux pages Calendrier, Clubs, Devenir
   partenaire, Devenir bénévole, Contact, pages légales et 404.

   Chargée après style.css, qui porte les jetons et les composants communs
   (.section, .carte, .grille, .badge, .tableau, .liste-definitions,
   .formulaire, .bouton). Rien de commun n'est redéfini ici : ce fichier ne
   contient que ce qui n'existe qu'une fois, préfixé par sa page.

   Préfixes : .cal- calendrier · .clubs- liste des clubs · .fiche- fiche d'un
   club · .part- partenaires · .benev- bénévoles · .contact- contact ·
   .legal- pages légales.

   Mobile d'abord, aucun débordement horizontal : les tableaux larges
   deviennent des blocs sous 700 px plutôt que de pousser la page.
   ========================================================================= */

[hidden] { display: none !important; }

/* ---------- Filtres, communs au calendrier et aux clubs ---------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-bottom: 28px;
}

.filtres__groupe { min-width: 0; }

.filtres__legende {
  margin: 0 0 10px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.filtres__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtres__groupe[role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtres__bouton {
  padding: 7px 14px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: transparent;
  color: var(--encre-2);
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duree, 240ms) var(--courbe),
              border-color var(--duree, 240ms) var(--courbe),
              color var(--duree, 240ms) var(--courbe);
}

.filtres__bouton:hover { border-color: var(--vert); color: var(--vert-fonce); }

.filtres__bouton[aria-pressed="true"] {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--fond);
}

/* Sans JavaScript, un filtre ne filtre rien : les boutons disparaissent
   plutôt que de mentir. La classe « js » est posée par base.njk. */
html:not(.js) .filtres { display: none; }

/* ---------- Calendrier ---------- */

/* La ligne de source colle au chapô : elle appartient à la tête de page,
   pas à la première section du calendrier. */
.cal-bandeau { padding-bottom: 0; }
.cal-source { margin: 0; }

.cal-tableau { width: 100%; margin-bottom: 40px; }

.cal-mois {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  border-bottom: 2px solid var(--vert-fonce);
  margin-bottom: 6px;
}

.cal-ligne > td {
  vertical-align: top;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--filet);
}

.cal-date { width: 22%; white-space: nowrap; }

.cal-date__valeur {
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-date__note {
  display: block;
  margin-top: 4px;
  font-family: var(--etiquette);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.cal-objet__titre {
  display: block;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
}

.cal-objet__organisateur {
  display: block;
  margin-top: 4px;
  color: var(--encre-3);
  font-size: 15px;
}

.cal-lieu { width: 22%; }
.cal-lieu__nom { display: block; margin-bottom: 6px; }
/* Salle et adresse, quand la fiche de l'organisateur les donne. */
.cal-lieu__salle {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--encre-3);
}
.cal-type { width: 14%; }
.cal-lien { width: 18%; }
.cal-lien__vide { margin: 0; }

.cal-type-carte .carte__titre { font-size: 22px; }

.cal-notes { align-items: start; }

.cal-agenda {
  border: 1px solid var(--filet);
  border-radius: var(--rayon, 4px);
  background: var(--fond-alt);
  padding: 28px;
}
.cal-agenda .boutons { margin-top: 0; }

.cal-archives { margin-top: 8px; }

.cal-archives__bouton {
  display: inline-block;
  margin-bottom: 24px;
  padding: 10px 18px;
  border: 1.5px solid var(--vert-fonce);
  border-radius: var(--rayon, 4px);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  cursor: pointer;
  list-style: none;
}
.cal-archives__bouton::-webkit-details-marker { display: none; }
.cal-archives[open] .cal-archives__bouton {
  background: var(--vert-fonce);
  color: var(--fond);
}

@media (max-width: 700px) {
  .cal-tableau, .cal-tableau tbody, .cal-ligne { display: block; width: 100%; }
  .cal-mois { display: block; }
  .cal-ligne {
    padding: 18px 0;
    border-bottom: 1px solid var(--filet);
  }
  .cal-ligne > td {
    display: block;
    width: auto;
    padding: 0 0 8px;
    border: 0;
    white-space: normal;
  }
  .cal-ligne > td:last-child { padding-bottom: 0; }
}

/* ---------- Liste des clubs ---------- */

.clubs-compte {
  margin: 0 0 20px;
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
}

.clubs-grille { margin-bottom: 24px; }

.clubs-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  transition: border-color var(--duree, 240ms) var(--courbe),
              transform var(--duree, 240ms) var(--courbe);
}

.clubs-carte:hover {
  border-color: var(--vert);
  transform: translateY(-2px);
}

.clubs-carte__tete {
  display: flex;
  align-items: center;
  gap: 14px;
}

.clubs-carte__logo,
.clubs-carte__initiales {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
  background: var(--fond);
  border: 1px solid var(--filet);
}

.clubs-carte__initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--fond);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
}

.clubs-carte__ident { min-width: 0; }
.clubs-carte .carte__titre { font-size: 21px; }

.clubs-carte__lien {
  text-decoration: none;
  color: inherit;
}

/* Toute la carte est cliquable, mais le lien reste un lien : c'est lui qui
   porte le nom du club dans la liste des liens d'un lecteur d'écran. */
.clubs-carte__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.clubs-carte__publics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  margin-top: auto;
}

.clubs-note { margin-top: 18px; }

/* ---------- Fiche d'un club ---------- */

.fiche-tete {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(24px, 3vw, 40px);
  background: var(--fond-alt);
  border-bottom: 1px solid var(--filet);
}

.fiche-tete__retour { margin: 0 0 22px; }

.fiche-tete__ident {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
}

.fiche-tete__logo,
.fiche-tete__initiales {
  width: 160px;
  height: 160px;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
  background: var(--fond);
  border: 1px solid var(--filet);
}

.fiche-tete__initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--fond);
  font-family: var(--etiquette);
  font-weight: 700;
  font-size: 54px;
  letter-spacing: .04em;
}

.fiche-corps {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.fiche-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fiche-chiffre {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fiche-sous-titre {
  margin-top: 40px;
  font-size: clamp(20px, 2vw, 24px);
}

.fiche-horaires { width: 100%; margin-top: 16px; }
.fiche-horaires td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}

.fiche-liste { margin-top: 16px; }
.fiche-liste li {
  padding: 10px 0;
  border-bottom: 1px solid var(--filet);
}
.fiche-liste__annee {
  display: inline-block;
  min-width: 4em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fiche-corps__cote .boutons { margin-top: 20px; }

@media (max-width: 900px) {
  .fiche-corps { grid-template-columns: minmax(0, 1fr); }
  .fiche-corps__cote { order: -1; }
}

@media (max-width: 700px) {
  .fiche-tete__ident { flex-direction: column; align-items: flex-start; }
  .fiche-tete__logo,
  .fiche-tete__initiales { width: 96px; height: 96px; }
  .fiche-tete__initiales { font-size: 32px; }
}

/* ---------- Devenir partenaire ---------- */

.part-accroche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.part-accroche .texte + .texte { margin-top: 18px; }

.part-raisons {
  display: grid;
  gap: 22px;
  max-width: 900px;
}

.part-raison {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--filet);
}
.part-raison:last-child { border-bottom: 0; padding-bottom: 0; }

.part-raison__coche {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 4px;
  color: var(--vert);
}

.part-raison__titre {
  font-size: clamp(19px, 1.8vw, 22px);
  margin-bottom: 6px;
}

.part-raison__texte {
  margin: 0;
  color: var(--encre-2);
}

.part-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.part-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 20px;
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon, 4px);
  text-align: center;
}

.part-logo img { max-height: 64px; width: auto; object-fit: contain; }

.part-logo__nom {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
}

.part-logo__categorie {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.part-soutiens { margin-top: 8px; }

.part-dossier {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--filet);
}

@media (max-width: 860px) {
  .part-accroche { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Devenir bénévole ---------- */

.benev-mission .carte__corps { display: flex; flex-direction: column; height: 100%; }
.benev-mission__lignes { margin-top: 16px; }
.benev-mission__action { margin-top: auto; padding-top: 20px; }

/* ---------- Contact ---------- */

.contact-coordonnees { margin-top: 8px; }
.contact-intro { margin-bottom: 36px; }
.contact-intro .texte { margin-top: 16px; }
.contact-intro .boutons { margin-top: 20px; }

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

.formulaire-bloc__texte { margin-top: 14px; }
.formulaire-bloc .formulaire { margin-top: 28px; }
.formulaire__envoi { margin: 8px 0 0; }

/* ---------- Pages légales ---------- */

.legal__avertissement { margin-bottom: 40px; }

.legal__bloc { margin-bottom: 44px; }
.legal__bloc h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; }

.legal__items, .legal__credits { margin-top: 20px; }

.legal__maj {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
}

/* ---------- Page 404 ---------- */

.quatre-cent-quatre { margin: 8px 0 28px; }

.quatre-cent-quatre li { border-bottom: 1px solid var(--filet); }

.quatre-cent-quatre__lien {
  display: block;
  padding: 18px 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  text-decoration: none;
  transition: color var(--duree, 240ms) var(--courbe),
              padding-left var(--duree, 240ms) var(--courbe);
}

.quatre-cent-quatre__lien:hover {
  color: var(--vert-fonce);
  padding-left: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .clubs-carte,
  .filtres__bouton,
  .quatre-cent-quatre__lien { transition: none; }
  .clubs-carte:hover { transform: none; }
  .quatre-cent-quatre__lien:hover { padding-left: 0; }
}