/* Mise en page « Rôlistes » (lot L16) : d'après la maquette de Thierry du 14/10/2026.
   Couleurs et police : variables du thème (/theme/<slug>.css, réglées dans l'admin). */

body.mise-en-page-rolistes {
  border-top: 6px solid var(--theme-accent);
  background: var(--theme-fond);
}

/* Bandeau */
.mise-en-page-rolistes .bandeau {
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-bordure);
}
.mise-en-page-rolistes .logo {
  color: var(--theme-principale);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.mise-en-page-rolistes .logo img { height: 3.6rem; }
.mise-en-page-rolistes .nav-principale a {
  color: var(--theme-texte);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid transparent;
}
.mise-en-page-rolistes .nav-principale a:hover { color: var(--theme-principale); }
.mise-en-page-rolistes .nav-principale a[aria-current="page"] {
  color: var(--theme-principale);
  font-weight: 700;
  border-bottom-color: var(--theme-principale);
}
.mise-en-page-rolistes .bandeau-actions .publier {
  color: var(--theme-accent);
  border-color: var(--theme-accent);
  font-weight: 600;
  background: transparent;
}
.mise-en-page-rolistes .bandeau-actions .publier:hover {
  color: #fff;
  background: var(--theme-accent);
}

/* Titres */
.mise-en-page-rolistes main h1,
.mise-en-page-rolistes main h2 {
  color: var(--theme-principale);
  letter-spacing: -0.01em;
}

/* Cartes génériques : fond du thème, filet discret */
.mise-en-page-rolistes main article {
  box-shadow: none;
  border: 1px solid var(--theme-bordure);
}

/* Accueil : recherche, carte et résultats */
.accueil-recherche { margin-top: 1.5rem; }
.mise-en-page-rolistes .recherche > aside {
  padding-right: 1.5rem;
  border-right: 1px solid var(--theme-bordure);
}
.mise-en-page-rolistes #carte {
  border: 1px solid var(--theme-bordure);
  border-radius: 4px;
}
.legende-carte { color: var(--theme-texte-doux); }

/* Remarques n° 93 et 94 : les cartes sont des encarts (bandeau en haut), avec un filet d'accent au-dessus du bandeau */
.mise-en-page-rolistes .cartes-membres article.carte-membre,
.mise-en-page-rolistes .grille-suggestions article.carte-membre {
  border: 1px solid var(--theme-bordure);
  border-top: 2px solid var(--theme-accent);
  border-radius: 4px;
  background: var(--pico-card-background-color);
  padding: 0;
}
.mise-en-page-rolistes .grille-suggestions article:not(.carte-membre) {
  border: 0;
  border-top: 2px solid var(--theme-accent);
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 0 0;
}
.mise-en-page-rolistes .carte-membre h3 a { color: var(--theme-principale); }

/* Regroupements de points de la carte : couleur du thème au lieu du vert et jaune de Leaflet */
.mise-en-page-rolistes .marker-cluster-small,
.mise-en-page-rolistes .marker-cluster-medium,
.mise-en-page-rolistes .marker-cluster-large {
  background-color: color-mix(in srgb, var(--theme-principale) 25%, transparent);
}
.mise-en-page-rolistes .marker-cluster-small div,
.mise-en-page-rolistes .marker-cluster-medium div,
.mise-en-page-rolistes .marker-cluster-large div {
  background-color: var(--theme-principale);
  color: #fff;
  font-weight: 700;
}

/* Pied de page */
.mise-en-page-rolistes footer.pied {
  border-top: 1px solid var(--theme-bordure);
  background: var(--theme-surface);
}
.mise-en-page-rolistes .pied-contenu strong { color: var(--theme-principale); }
.mise-en-page-rolistes .pied-contenu a { color: var(--theme-texte-doux); text-decoration: none; }
.mise-en-page-rolistes .pied-contenu a:hover { color: var(--theme-principale); }

@media (max-width: 768px) {
  .mise-en-page-rolistes .recherche > aside { padding-right: 0; border-right: 0; }
}