/*
 * La page Nos partenaires (page-autour-du-club.php).
 * UNE RÈGLE pour toute la page : un partenaire est une carte blanche au filet
 * d'eau (partenaires publics et privés, Clan des Nageurs, liens utiles),
 * toutes au même rayon, au même titre et sur la même grille de trois
 * colonnes. Le fond d'eau claire
 * est réservé aux informations pratiques (la piscine) : un nom de partenaire
 * n'y figure jamais. La piscine vient en dernier, et prévient qu'elle n'est
 * pas le club : un téléphone s'y compose d'un doigt, un lien s'y lit sans
 * bouton jaune (le jaune est réservé à l'inscription).
 * ========================================================================= */
/* La dernière carte est à la même distance du pied de page que sur les
   autres pages (Enfants, Tarifs, Contact) : pas de marge de plus. */
.page-autour { padding-bottom: 0; }
.page-autour .tranche:last-child { padding-bottom: 0; }

/* LE TITRE D'UNE CARTE, le même partout sur la page : partenaire, groupe de
   liens ou bloc de la piscine. */
.prive__nom,
.asso__nom,
.partenaires__groupe h3,
.piscines__bloc h3 {
  margin: 0;
  font-family: var(--soleil-titre);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--soleil-marine);
  text-wrap: balance;
}

/* « Ce ne sont pas les horaires du club » : dit avant le numéro et les
   horaires, sur toute la largeur des deux blocs qu'il concerne. Un filet
   jaune, une mise en garde ; les astuces des tarifs ont le leur en bleu. */
.piscine-pas-le-club {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--soleil-jaune);
  border-radius: 0 12px 12px 0;
  background: #fffaf0;
  color: var(--soleil-encre);
  font-size: 16px;
}

.piscines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.piscines__bloc {
  padding: 20px 22px 8px;
  border-radius: 18px;
  background: var(--soleil-eau);
}
.piscines__bloc h3 { margin-bottom: 4px; }
.piscines__bloc ul { list-style: none; margin: 0; padding: 0; }
/* Une information par ligne : ce que c'est à gauche, le numéro ou le lien à
   droite ; au téléphone, l'un sous l'autre. */
.piscines__bloc li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 0;
}
.piscines__bloc li + li { border-top: 1px solid #ffffff; }
.piscines__detail { color: var(--soleil-gris); }
.piscines__lien {
  font-weight: 700;
  color: var(--soleil-marine);
  text-decoration: underline;
  text-decoration-color: var(--soleil-ciel);
  text-underline-offset: 4px;
}
.piscines__lien--numero {
  font-family: var(--soleil-titre);
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
a.piscines__lien:hover,
a.piscines__lien:focus-visible { color: var(--soleil-fond); text-decoration: underline; text-decoration-color: currentColor; }

/* Une association partenaire (le Clan des Nageurs, la Croix Blanche), l'une
   sous l'autre : la carte d'un partenaire, comme celles des
   partenaires privés — l'identité d'un côté, ce qu'il apporte de l'autre. Son
   nom tient la place d'un logo (la première colonne de la grille, séparée par
   un filet comme la tuile du logo) et le texte les deux autres : les bords
   tombent sur ceux des cartes du dessous. */
.assos { display: grid; gap: 20px; }
.asso {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  border: 1px solid var(--soleil-eau-2);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
}
.asso__identite {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--soleil-eau-2);
}
/* Le logo, centré sur une tuile d'eau claire, comme celui d'un partenaire
   privé ; rond, pour que le blanc d'un JPEG carré ne dessine pas de coins. */
.asso__tuile {
  display: grid;
  place-items: center;
  height: 128px;
  background: var(--soleil-eau);
  border-bottom: 1px solid var(--soleil-eau-2);
}
.asso__logo { display: block; width: 88px; height: 88px; border-radius: 50%; background: #ffffff; object-fit: cover; }
.asso__texte { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 20px; }
.asso__corps { grid-column: span 2; padding: 20px 22px 20px 2px; max-width: 68ch; }
.asso__corps p { margin: 0; font-size: 17px; }
/* Une association sans texte : son nom seul, sans filet qui séparerait un
   corps absent. */
.asso--sans-texte .asso__identite { border-right: 0; border-bottom: 0; }
.asso__corps p + p { margin-top: 10px; }
.asso__site { margin: 0; font-size: 14px; font-weight: 600; color: var(--soleil-gris); }
a.asso__site { align-self: flex-start; color: var(--soleil-marine); text-decoration: underline; text-decoration-color: var(--soleil-ciel); text-underline-offset: 3px; }
@media (max-width: 860px) {
  .asso { grid-template-columns: minmax(0, 1fr); }
  .asso__identite { border-right: 0; border-bottom: 1px solid var(--soleil-eau-2); }
  .asso__tuile { height: 116px; }
  .asso__corps { grid-column: auto; padding: 18px 22px 20px; }
}

/* Un partenaire, public ou privé : le logo en tête, puis le nom, l'offre aux
   adhérents quand il y en a une (c'est ce qu'un adhérent vient chercher), la
   condition, puis le site. Toute la carte est le lien. */
.prives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.prive {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--soleil-eau-2);
  border-radius: 18px;
  background: #ffffff;
  color: var(--soleil-encre);
  text-decoration: none;
  transition: border-color .15s ease;
}
a.prive:hover,
a.prive:focus-visible { border-color: var(--soleil-marine); }
.prive__logo {
  display: grid;
  place-items: center;
  height: 110px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--soleil-eau-2);
}
.prive__logo--sombre { background: var(--soleil-marine); border-bottom-color: var(--soleil-marine); }
.prive__logo img { max-height: 70px; width: auto; max-width: 100%; object-fit: contain; }
/* Un logo clair est souvent un petit fichier carré à larges marges (celui de
   Nomadistan : 100 px, texte blanc sur fond transparent) : il prend toute la
   hauteur de la tuile, sans dépasser sa taille réelle. */
.prive__logo--sombre { padding: 5px 18px; }
.prive__logo--sombre img { max-height: 100px; }
.prive__corps { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; }
.prive__offre { font-size: 17px; font-weight: 600; }
.prive__conditions { font-size: 15px; color: var(--soleil-gris); }
.prive__site {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--soleil-marine);
  text-decoration: underline;
  text-decoration-color: var(--soleil-ciel);
  text-underline-offset: 3px;
}
/* L'invitation à devenir partenaire : une place libre, en dernière carte de
   la grille — même taille qu'une carte de partenaire, mais au filet
   pointillé et sans logo, pour se lire comme un emplacement à prendre. Le
   bouton est jaune : écrire au secrétariat, c'est agir. */
.devenir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  border: 2px dashed var(--soleil-eau-2);
  border-radius: 18px;
  background: #ffffff;
}
.devenir__titre {
  margin: 0;
  font-family: var(--soleil-titre);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--soleil-marine);
  text-wrap: balance;
}
.devenir p { margin: 0 0 8px; font-size: 16px; color: var(--soleil-gris); }
.devenir__bouton { margin-top: auto; }
@media (max-width: 1080px) {
  .prives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .prives { grid-template-columns: minmax(0, 1fr); }
}

.partenaires {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Les titres des groupes partagent une rangée de la grille (subgrid) : un
   titre sur deux lignes ne décale pas la liste de la carte voisine. */
.partenaires__groupe {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 6px;
  align-content: start;
  padding: 20px 22px 8px;
  border: 1px solid var(--soleil-eau-2);
  border-radius: 18px;
  background: #ffffff;
}
.partenaires__groupe ul { list-style: none; margin: 0; padding: 0; }
.partenaires__groupe li { display: flex; flex-direction: column; padding: 12px 0; }
.partenaires__groupe li + li { border-top: 1px solid var(--soleil-eau-2); }
.partenaires__groupe a {
  font-weight: 600;
  font-size: 17px;
  color: var(--soleil-marine);
  text-decoration: none;
}
.partenaires__groupe a:hover,
.partenaires__groupe a:focus-visible { text-decoration: underline; text-decoration-color: var(--soleil-ciel); text-underline-offset: 3px; }
.partenaires__site { font-size: 14px; color: var(--soleil-gris); }

@media (max-width: 1080px) {
  .partenaires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-autour .tranche__tete { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .piscines, .partenaires { grid-template-columns: minmax(0, 1fr); }
  .piscines__bloc { padding: 20px 20px 8px; }
  .piscines__bloc li { flex-direction: column; }
  .partenaires__groupe { padding: 20px 20px 8px; }
}