/* Feuille commune à tous les thèmes, en complément de Pico.css. L'habillage d'un thème
   (lot L16) est dans static/apparence/<mise en page>.css et ses couleurs dans /theme/<slug>.css. */

/* Bandeau : logo, navigation principale, publier, menu du membre */
.bandeau-contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
}
.logo img { height: 3rem; width: auto; }
.logo { flex-shrink: 0; }
.nav-principale ul { margin: 0; padding: 0; flex-wrap: wrap; }
.nav-principale li { list-style: none; }
.bandeau-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.bandeau-actions [role="button"] { margin: 0; padding: 0.45rem 1rem; }
.menu-membre { position: relative; margin: 0; }
.menu-membre summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
}
.menu-membre summary::-webkit-details-marker { display: none; }
.menu-membre summary::after { display: none; }
.menu-membre .avatar-initiale {
  background: var(--theme-principale, var(--pico-primary));
  color: #fff;
}
.menu-membre ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 1100;
  min-width: 14rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
}
.menu-membre li { list-style: none; margin: 0; }
/* Un pseudo très long (50 caractères) ne pousse pas l'en-tête hors de l'écran (remarque n° 58) */
.menu-membre .pseudo { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-membre li a { display: block; padding: 0.35rem 1rem; text-decoration: none; }
.bandeau-apercu {
  margin: 0;
  padding: 0.4rem 1rem;
  text-align: center;
  background: var(--theme-accent, #8a7339);
  color: #fff;
}
.bandeau-apercu a { color: #fff; }
/* Site de test (SITE_DE_TEST, 16/10/2026) : rayé, pour ne jamais le confondre avec le vrai site */
.bandeau-site-de-test {
  margin: 0;
  padding: 0.35rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: #1f1a00;
  background: repeating-linear-gradient(-45deg, #ffd84d, #ffd84d 14px, #ffe680 14px, #ffe680 28px);
}
.logo, .nav-principale a, .bandeau-actions a { white-space: nowrap; }
/* Remarque n° 70 : baseline discrète sous le bandeau */
.baseline { margin: -0.5rem auto 0.6rem; font-size: 0.8rem; line-height: 1.3; color: var(--pico-muted-color); }
@media (min-width: 1280px) {
  .bandeau-contenu { flex-wrap: nowrap; }
  /* Remarque n° 70 : menu principal aligné à droite, contre les actions */
  .nav-principale { flex: none; margin-left: auto; }
  .bandeau-actions { margin-left: 0; }
  .nav-principale ul { flex-wrap: nowrap; }
  .menu-burger { display: none; }
}
/* Remarque n° 58 : en dessous de 1 280 px (où le conteneur de Pico passe à 950 px), une seule ligne : logo, ☰, avatar */
@media (max-width: 1279.98px) {
  .bandeau-contenu { flex-wrap: nowrap; }
  .nav-principale, .bandeau-actions .publier, .bandeau-actions .connexion { display: none; }
}
@media (max-width: 768px) {
  .menu-membre .pseudo { display: none; }
}
.menu-burger { position: relative; margin: 0; }
.menu-burger summary {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  list-style: none;
  cursor: pointer;
  color: var(--theme-principale, var(--pico-primary));
}
.menu-burger summary::-webkit-details-marker { display: none; }
.menu-burger summary::after { display: none; }
.menu-burger nav { display: block; }
.menu-burger ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 1100;
  display: block;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
}
.menu-burger li { display: block; list-style: none; margin: 0; padding: 0; }
.menu-burger li a { display: block; margin: 0; padding: 0.5rem 1rem; text-decoration: none; }
.menu-burger li a[aria-current="page"] { font-weight: 700; }
.menu-burger li.separe { border-top: 1px solid var(--pico-muted-border-color); margin-top: 0.4rem; padding-top: 0.4rem; }

/* Texte lu par les lecteurs d'écran seulement */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Légende de la carte (lot L16) : pastilles aux couleurs du thème */
.legende-carte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.9rem;
}
.legende-carte li { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; }
/* Icônes des points (remarque n° 26) : formes dans profils/_legende_carte.html, couleurs du thème */
.icones-carte { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone-carte { width: 1.1rem; height: 1.1rem; flex: none; }
.icone-tables { color: var(--carte-tables, #2e8b57); }
.icone-associations { color: var(--carte-associations, #c0392b); }
.icone-annonces, .icone-evenements { color: var(--carte-annonces, #d4880f); }
.icone-gn { color: var(--carte-gn, #8b3a2b); } /* remarque n° 151 */
.icone-membres-joueur { color: var(--carte-membres, #8e6cc0); }
.icone-membres-mj { color: var(--carte-mj, #14895a); }
.icone-membres-joueur-mj { color: var(--carte-joueur-mj, #2f6fd6); }
/* Point sur la carte : contour blanc fin (remarque n° 169, après la n° 167 qui l'avait retiré). Plus de filtre d'ombre CSS
   (remarque n° 28) : un filtre par point fait redessiner la carte à chaque défilement de la page. */
/* Leaflet donne role="button" aux points cliquables, et Pico met en forme tout [role="button"] : on l'annule */
.leaflet-marker-icon.point-carte,
.leaflet-marker-icon.grappe-carte {
  padding: 0;
  margin-bottom: 0;
  line-height: 1;
  outline-offset: 2px;
}
.leaflet-marker-icon.point-carte { background: none; border: 0; box-shadow: none; }
.point-carte svg { width: 100%; height: 100%; }
/* Point à la ville (remarques n° 48 et 50) : l'icône dans un disque en pointillés, position approximative */
.point-ville .disque-ville {
  display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box;
  border: 2px dashed currentColor; border-radius: 50%;
  background: color-mix(in srgb, currentColor 18%, rgb(255 255 255 / 75%));
}
.point-ville .disque-ville svg { width: 16px; height: 16px; } /* remarque n° 167 */
/* Remarque n° 28 : les tuiles se chevauchent d'un demi-pixel (carte.js, chevaucher) ; le mélange
   « plus-lighter » de Leaflet éclaircirait ce chevauchement en une ligne claire : mélange normal. */
.leaflet-container .leaflet-tile-container img.leaflet-tile { mix-blend-mode: normal; }
/* Grappes : couleur de leur calque (Leaflet fixe la taille de l'élément lui-même) */
.leaflet-marker-icon.grappe-carte {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #fff; /* remarque n° 169 : contour blanc fin (3 px avant la n° 167) */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
.leaflet-marker-icon.grappe-membres { background: var(--carte-membres, #8e6cc0); }
.leaflet-marker-icon.grappe-tables { background: var(--carte-tables, #2e8b57); border-radius: 30%; }
.leaflet-marker-icon.grappe-associations { background: var(--carte-associations, #c0392b); }
.leaflet-marker-icon.grappe-annonces { background: var(--carte-annonces, #d4880f); border-radius: 30%; }
/* Remarques n° 51 et 52 : calques Joueurs, MJ (joueurs-MJ compris) et Événements (couleur des annonces) */
.leaflet-marker-icon.grappe-joueurs { background: var(--carte-membres, #8e6cc0); }
.leaflet-marker-icon.grappe-mj { background: var(--carte-mj, #14895a); }
.leaflet-marker-icon.grappe-evenements { background: var(--carte-annonces, #d4880f); border-radius: 30%; }
.leaflet-marker-icon.grappe-gn { background: var(--carte-gn, #8b3a2b); }
.accueil-recherche, .accueil-suggestions, .accueil-nouveautes, .accueil-site { margin-top: 2.5rem; }
.entrees-accueil { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.entrees-accueil [role="button"] { flex: 1 1 10rem; margin: 0; }

/* Accueil : dernières annonces (bandeau de trois) */
.accueil-annonces > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  background: transparent;
  padding: 0;
  border: 0;
}
.accueil-annonces > header h2 { margin: 0; }
/* Remarque n° 76 : cartes étroites, en nombre sur la largeur (auto-fill : elles ne s'étirent pas) */
.grille-annonces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.25rem 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--theme-bordure, var(--pico-muted-border-color));
}
.annonce-courte { display: flex; flex-direction: column; gap: 0.35rem; }
/* Remarque n° 140 : chaque annonce dans une carte bien délimitée (téléphone surtout), filet de la couleur du type */
.annonce-courte {
  padding: 0.9rem 1rem 0.6rem;
  background: var(--theme-surface, var(--pico-card-background-color, #fff));
  border: 1px solid var(--theme-bordure, var(--pico-muted-border-color));
  border-top: 4px solid var(--couleur-type, var(--theme-principale, var(--pico-primary)));
  border-radius: 0.6rem;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.06);
}
.annonce-courte .auteur { display: flex; align-items: center; gap: 0.75rem; color: var(--theme-texte-doux, var(--pico-muted-color)); }
.initiale-ronde {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 14%, white);
  color: var(--theme-principale, var(--pico-primary));
  font-weight: 700;
  font-size: 0.9rem;
}
.annonce-courte h3 { margin: 0.25rem 0 0; font-size: 1.15rem; }
.annonce-courte h3 a { color: var(--theme-principale, var(--pico-primary)); text-decoration: none; }
.annonce-courte p { margin: 0; }
.annonce-courte footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.5rem;
  background: transparent;
  border: 0;
}
.annonce-courte footer { justify-content: flex-end; } /* remarque n° 136 : le type est passé en tête */
.annonce-courte .type-en-tete { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 600; }
.annonce-courte .type-en-tete mark { padding: 0.1rem 0.5rem; }

/* Remarques n° 150 et 151 : filtre par type sur la page des événements ; le GN a sa couleur */
.type-gn { --couleur-type: var(--carte-gn, #8b3a2b); }
.filtre-genres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.filtre-genres li { margin: 0; padding: 0; list-style: none; }
.filtre-genres a {
  display: inline-block; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.88rem; text-decoration: none;
  border: 1px solid var(--pico-muted-border-color); color: var(--pico-color);
}
.filtre-genres a[aria-current="true"] { background: var(--carte-annonces, #d4880f); border-color: transparent; color: #fff; }

/* Remarque n° 146 : quand et où, en évidence, avec des icônes (encarts des événements, accueil) */
.quand-ou { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.quand-ou li { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.quand-ou .picto { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: 0.15em; color: var(--couleur-type, var(--carte-evenements, #d4880f)); }
.quand-ou .quand { font-size: 1rem; }
.quand-ou .quand strong { color: var(--pico-color); }

/* Remarque n° 148 : « Table : … · 3 places disponibles » sous la description d'une annonce */
.table-liee-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; margin: 0.35rem 0 0; font-size: 0.9rem; }
.table-liee-ligne .picto { width: 1.1em; height: 1.1em; color: var(--couleur-type, var(--theme-principale, var(--pico-primary))); }
.table-liee-ligne a { font-weight: 600; }

/* Remarque n° 153 : encadré de la table liée sur la page d'une annonce */
.table-liee {
  margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--pico-muted-border-color);
  border-left: 4px solid var(--couleur-type, var(--theme-principale, var(--pico-primary))); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.table-liee .etiquette { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-size: 0.85rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--theme-texte-doux, var(--pico-muted-color)); }
.table-liee .etiquette .picto { width: 1.2em; height: 1.2em; }
.table-liee h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.table-liee p { margin: 0 0 0.35rem; }
.table-liee .actions-encart { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
/* Remarque n° 137 : couleur du type comme le calque de la carte (joueurs violet, MJ vert, événements doré) */
.type-cherche_joueurs { --couleur-type: var(--carte-membres, #8e6cc0); }
.type-cherche_mj { --couleur-type: var(--carte-mj, #14895a); }
.type-cherche_table { --couleur-type: var(--carte-joueur-mj, #2f6fd6); }
.type-evenement { --couleur-type: var(--carte-annonces, #d4880f); }
mark.type-annonce[class*="type-"] {
  background: color-mix(in srgb, var(--couleur-type) 18%, white);
  color: color-mix(in srgb, var(--couleur-type) 75%, black);
}
.annonce-courte .lien-fleche,
.accueil-annonces .lien-fleche { color: var(--theme-principale, var(--pico-primary)); text-decoration: none; }

/* Pied de page */
footer.pied { margin-top: 3rem; }
.pied-contenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pied-contenu ul { margin: 0; padding: 0; }

/* Formulaires de compte (allauth) : largeur de lecture confortable */
main form {
  max-width: 34rem;
}

main form .helptext,
main form p > span {
  display: block;
  font-size: 0.875em;
  color: var(--pico-muted-color);
}

.actions-page { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.actions-page > [role="button"] { margin: 0; }
.resume-erreurs {
  margin-bottom: 1.5rem; padding: 0.8rem 1rem; border-radius: 8px;
  border: 1px solid var(--pico-del-color); background: color-mix(in srgb, var(--pico-del-color) 8%, transparent);
}
.resume-erreurs p { margin-bottom: 0.4rem; color: var(--pico-del-color); }
.resume-erreurs ul { margin: 0; }
.resume-erreurs li { list-style: disc; margin-left: 1.2rem; }
main form ul.errorlist {
  color: var(--pico-del-color);
  padding-left: 0;
  list-style: none;
}

article.message.error {
  border-left: 4px solid var(--pico-del-color);
}

article.message.success {
  border-left: 4px solid var(--pico-ins-color);
}

article.message.warning,
article.bandeau-profil {
  border-left: 4px solid var(--pico-primary);
}

/* Édition du profil */
main form.formulaire-profil {
  max-width: 48rem;
}

form.formulaire-profil legend h2 {
  margin-bottom: 0.5rem;
}

.champ-checkboxselectmultiple div[id] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.25rem 1rem;
  margin-bottom: 1rem;
}

.grille-visibilite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 1rem;
}

.ville-info {
  color: var(--pico-muted-color);
}

/* Fiche membre */
.fiche-membre header img.avatar,
section.avatar img {
  border-radius: 50%;
}

ul.etiquettes {
  padding-left: 0;
}

ul.etiquettes li {
  display: inline-block;
  list-style: none;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 1rem;
}

/* Annuaire et carte (lot L4) */
.recherche {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .recherche {
    grid-template-columns: 1fr;
  }
}

main form.filtres {
  max-width: none;
}

form.filtres fieldset label {
  display: block;
}

form.filtres details.choix-multiples {
  max-height: 18rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}
/* Champ qui filtre une longue liste (remarque n° 27, filtres.js) : reste visible en haut pendant le défilement */
form.filtres details.choix-multiples .filtre-liste {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: 0.4rem;
}

form.filtres .aide,
p.aide {
  display: block;
  color: var(--pico-muted-color);
  font-size: 0.875em;
}

.erreur {
  color: var(--pico-del-color);
}

#resultats.htmx-request {
  opacity: 0.5;
  transition: opacity 200ms;
}

.nombre-resultats a {
  margin-left: 1rem;
}

.cartes-membres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

article.carte-membre {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
}

article.carte-membre h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

article.carte-membre p {
  margin-bottom: 0.25rem;
}

article.carte-membre .lieu,
article.carte-membre .association {
  color: var(--pico-muted-color);
  font-size: 0.9em;
}

article.carte-membre .vignette {
  flex: 0 0 64px;
  text-decoration: none;
}

article.carte-membre .vignette img,
.avatar-vide {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}

article.carte-membre .actif {
  margin-left: 0.5rem;
  color: var(--pico-ins-color);
}

article.carte-membre ul.etiquettes {
  margin: 0.25rem 0 0;
  font-size: 0.85em;
}

article.carte-membre .voir-sur-carte {
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.85em;
}

nav.pagination {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

#carte {
  height: 60vh;
  min-height: 22rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 0.5rem;
}

/* Pico stylise tous les liens et boutons : on rend les contrôles de Leaflet à Leaflet */
#carte a {
  text-decoration: none;
}

#carte .leaflet-control-zoom a {
  line-height: 30px;
  padding: 0;
  font-size: 22px;
}

.fenetre-carte {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.fenetre-carte img {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.fenetre-carte > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fenetre-carte > a { flex: none; line-height: 0; }
/* Remarque n° 49 : lien explicite vers la fiche */
.fenetre-carte .voir-fiche { display: inline-block; margin-top: 0.3rem; font-size: 0.85em; font-weight: 600; }
/* Remarque n° 67 : liens de la bulle en violet du thème (Leaflet les met en bleu), nom un peu plus grand */
.leaflet-container .fenetre-carte a { color: var(--theme-principale, var(--pico-primary)); }
.fenetre-carte strong { font-size: 1.15em; }

/* Accueil */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: center;
}

.chiffres strong {
  display: block;
  font-size: 1.8rem;
}

.liens-accueil {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Tables (lot L5) */
form.en-ligne {
  display: inline;
}

form.en-ligne button,
button.petit {
  width: auto;
  margin: 0 0 0 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.85em;
}

.places.libres {
  color: var(--pico-ins-color);
}

.entree-journal {
  margin-bottom: 1rem;
}

.contenu-journal table {
  width: auto;
}

/* Messagerie (lot L6) */
mark.non-lus {
  padding: 0 0.4em;
  border-radius: 1em;
  font-size: 0.8em;
}
ul.boite {
  padding: 0;
}
ul.boite li.conversation {
  list-style: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
ul.boite li.conversation small {
  display: block;
  color: var(--pico-muted-color);
}
ul.boite li.non-lue strong {
  font-weight: 800;
}
ul.boite p.apercu {
  margin: 0.25rem 0 0;
  color: var(--pico-muted-color);
  overflow-wrap: anywhere;
}
article.message-prive {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
}
article.message-prive header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.75rem -1rem 0.5rem;
  padding: 0.5rem 1rem;
}
article.message-prive.de-moi {
  margin-left: 2rem;
}
article.message-prive.nouveau {
  border-left: 4px solid var(--pico-primary);
}
.contenu-message p {
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}
.separateur-nouveaux {
  text-align: center;
  color: var(--pico-primary);
  font-size: 0.9em;
}
.membre-parti {
  color: var(--pico-muted-color);
}
details.actions-conversation form {
  margin-bottom: 0.5rem;
}

/* Annonces et archive de l'ancien fil (lot L7) */
article.ligne-annonce {
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
article.ligne-annonce p {
  margin-bottom: 0.25rem;
}
article.archive-activite {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
article.archive-activite header {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
article.archive-activite.masquee {
  opacity: 0.6;
}
ul.commentaires-archive {
  list-style: none;
  margin: 0.5rem 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--pico-muted-border-color);
}
ul.commentaires-archive li {
  margin-bottom: 0.5rem;
}

/* Notifications (lot L8) */
ul.notifications {
  list-style: none;
  padding-left: 0;
}
ul.notifications li.notification {
  list-style: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
ul.notifications li.non-lue > a {
  font-weight: bold;
}

/* Matching (lot L9) */
.grille-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
article.suggestion p.raisons {
  font-size: 0.9em;
  color: var(--pico-muted-color);
  margin-bottom: 0.5rem;
}
small.compatibilite {
  font-weight: normal;
  color: var(--pico-muted-color);
}
div.interet p {
  margin-bottom: 0.25rem;
}
div.interet p.erreur {
  color: var(--pico-del-color);
}
form.filtres-suggestions fieldset {
  max-width: 30rem;
}
article.message-prive.message-site {
  font-style: italic;
  border-left: 3px solid var(--pico-primary);
}

/* Contenus (lot L10) : pied de page, pages, articles, contact, publicité */
footer.pied nav ul { flex-wrap: wrap; }
footer.pied nav li { padding-top: 0; padding-bottom: 0; }
.bandeau-modele { border-left: 4px solid var(--pico-del-color); }
.contenu-editorial img { height: auto; max-width: 100%; }
.contenu-editorial figure { margin: 1rem 0; }
.liste-articles article img { max-height: 12rem; object-fit: cover; width: 100%; }
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.emplacement-pub { margin: 1rem 0; padding: .5rem 1rem; border: 1px dashed var(--pico-muted-border-color); }

/* htmx : indicateurs (htmx n'injecte plus sa propre feuille de style : CSP sans unsafe-inline, lot L11) */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* Signaler un contenu (lot L11) */
.signaler { margin: .25rem 0; }
.lien-signaler { font-size: .8rem; color: var(--pico-muted-color); }
.signaler.ouvert fieldset { margin-bottom: .5rem; }
.contenu-message.masque { color: var(--pico-muted-color); }

/* Remarques des testeurs (lot L13, accès de test) : bouton discret en bas à droite */
details.remarque-flottante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; margin: 0;
  max-width: min(28rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); padding: .25rem .75rem; font-size: .85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
details.remarque-flottante summary { color: var(--pico-muted-color); margin: 0; }
details.remarque-flottante[open] { padding-bottom: .75rem; }
details.remarque-flottante textarea { font-size: .9rem; }
article.remarque header { margin-bottom: .5rem; }

/* Tables et annonces (remarque n° 11) : seuls les champs du format coché, sans script.
   IRL : pas de plateforme ; en ligne : pas de lieu de jeu ; mixte : les deux. */
form:has(input[name="format"][value="irl"]:checked) .champ-nom-plateforme,
form:has(input[name="format"][value="en_ligne"]:checked) #lieu {
  display: none;
}

/* Profil (lot L17) : « Mes créations » seulement si « auteur de jeux » est coché, le nom et le site
   de l'association seulement si « membre d'une association » l'est (CSS seulement, sans script) */
form.formulaire-profil:not(:has(input[name="est_createur"]:checked)) .champ-nom-creations,
form.formulaire-profil:not(:has(input[name="membre_association"]:checked)) .champ-nom-association_libre,
form.formulaire-profil:not(:has(input[name="membre_association"]:checked)) .champ-nom-association_site {
  display: none;
}

/* Profil (lot L18) : la recherche de la ville seule n'apparaît que si « ma rue n'est pas proposée » est coché */
form.formulaire-profil:not(:has(input[name="rue_introuvable"]:checked)) .recherche-ville-seule {
  display: none;
}

/* Avatar à côté d'un pseudo (remarque n° 20) : vignette ronde, ou initiale */
.avatar-mini {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  font-weight: 700;
  line-height: 1;
}
.avatar-initiale {
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 14%, white);
  color: var(--theme-principale, var(--pico-primary));
}
.avatar-24 { width: 24px; height: 24px; font-size: 0.75rem; }
.avatar-28 { width: 28px; height: 28px; font-size: 0.8rem; }
.avatar-36 { width: 36px; height: 36px; font-size: 0.95rem; }
.avec-avatar { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
p.avec-avatar { display: flex; }

/* Mini-carte de la fiche d'un membre (remarque n° 24) : la ville seulement */
.mini-carte { margin: 0.5rem 0 1rem; max-width: 26rem; }
.mini-carte #mini-carte { height: 11rem; border-radius: var(--pico-border-radius, 0.25rem); border: 1px solid var(--pico-muted-border-color); }
.mini-carte figcaption { margin-top: 0.25rem; }
/* Boutons de zoom de Leaflet : ils portent role="button", que Pico met en forme ; on leur rend leur aspect */
.leaflet-control-zoom a[role="button"] {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
  color: #000;
  box-shadow: none;
  font: bold 18px/30px "Lucida Console", Monaco, monospace;
  text-align: center;
  text-decoration: none;
}
.leaflet-control-zoom a[role="button"]:last-child { border-bottom: 0; }
.leaflet-control-zoom a[role="button"]:hover { background: #f4f4f4; }

/* Badges et jetons (lot L24) */
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; padding: 0; }
/* Remarque n° 64 : plus de fond ni de bordure, le dessin suffit (le niveau est dans le dessin) */
.badges .badge { list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem 0.15rem 0; font-size: 0.85rem; }
.badges-a-gagner .badge { opacity: 0.75; }
.badge-dessin { width: 1.5em; height: 1.5em; }
/* Légende des badges (remarque n° 64), en petit en bas de « Badges et jetons » */
.legende-badges { font-size: 0.85rem; color: var(--pico-muted-color); }
.legende-badges h2 { font-size: 1rem; }
.legende-badges ul { padding: 0; }
.legende-badges li { list-style: none; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
/* Complétude du profil (remarque n° 64) */
.completude { max-width: 32rem; margin-bottom: 1.5rem; }
.completude label { font-weight: 600; }
.completude progress { margin-bottom: 0.25rem; }
.jetons-solde .solde { font-size: 1.6rem; margin-bottom: 0.3rem; }
.bouton-une { margin: 0.5rem 0; }
.bouton-une form { margin: 0; }
mark.a-la-une { font-size: 0.75rem; vertical-align: middle; }
/* Remarque n° 62 : auteur et date de l'annonce en petit ; type de l'annonce sur fond violet clair */
p.auteur-annonce { font-size: 0.875em; align-items: center; }
mark.type-annonce {
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 14%, transparent);
  color: inherit;
  border-radius: 0.25rem;
}

/* Amis et favoris (lot L25) : actions de la fiche d'un membre, icônes rapides, cœur */
.actions-principales { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.4rem; }
.actions-principales > a[role="button"],
.actions-principales .bouton-ami form.en-ligne button:not(.secondary) { margin: 0; padding: 0.4rem 0.9rem; font-size: 0.95em; }
.bouton-ami { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.bouton-ami p.erreur { margin: 0; color: var(--pico-del-color); }
.etat-ami { font-weight: 600; color: var(--pico-ins-color); }
.actions-jeu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.actions-jeu > small { color: var(--pico-muted-color); }
.actions-jeu div.interet p { margin: 0; }
details.autres-actions { margin: 0.2rem 0 0; font-size: 0.85em; }
details.autres-actions summary { color: var(--pico-muted-color); }
details.autres-actions .signaler { display: inline-block; margin-left: 0.5rem; }
.icones-rapides { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.3rem; }
.icones-rapides form.en-ligne { display: inline-flex; }
a.icone,
button.icone,
summary.icone,
form.en-ligne button.icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--theme-texte-doux, var(--pico-muted-color));
}
a.icone:hover, button.icone:hover, summary.icone:hover, a.icone:focus-visible, button.icone:focus-visible, summary.icone:focus-visible {
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 12%, transparent);
  color: var(--theme-principale, var(--pico-primary));
}
.icone svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.icone.actif,
form.en-ligne button.icone.actif { color: #d6336c; }
button.icone.actif svg { fill: currentColor; }
.coeur { display: inline-flex; align-items: center; gap: 0.3rem; }
.coeur small.erreur { color: var(--pico-del-color); }
.partage-copie { color: var(--pico-ins-color); }
/* Menu « Partager » (remarque n° 37) : sans la fenêtre de partage du système */
details.menu-partage { position: relative; margin: 0; border: 0; padding: 0; }
details.menu-partage > summary { list-style: none; cursor: pointer; line-height: 1; }
details.menu-partage > summary.icone,
details.menu-partage[open] > summary.icone { display: flex; margin: 0; }
details.menu-partage > summary svg { display: block; }
details.menu-partage > summary::-webkit-details-marker { display: none; }
details.menu-partage > summary::after { display: none; }
details.menu-partage > ul {
  position: absolute; z-index: 30; top: 100%; left: 0; min-width: 11rem;
  margin: 0.2rem 0 0; padding: 0.3rem 0; list-style: none; font-size: 0.9rem;
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}
details.menu-partage li { list-style: none; margin: 0; padding: 0; }
details.menu-partage li a,
details.menu-partage li button {
  display: block; width: 100%; margin: 0; padding: 0.4rem 0.9rem; text-align: left;
  border: 0; border-radius: 0; background: none; color: var(--theme-principale, var(--pico-primary));
  font-size: inherit; line-height: 1.4; text-decoration: none; box-shadow: none;
}
details.menu-partage li a:hover, details.menu-partage li button:hover,
details.menu-partage li a:focus-visible, details.menu-partage li button:focus-visible {
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 12%, transparent);
}
.liste-amis { padding: 0; }
.liste-amis li { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
/* Envoi htmx raté (remarque n° 59, erreurs-htmx.js) */
.erreur-envoi { margin: 0.4rem 0; font-size: 0.85rem; color: var(--pico-del-color); }
/* Remarque n° 55 : marge à droite, le texte de la carte ne passe jamais sous le cœur */
.favori { position: relative; padding-right: 2.4rem; }
.favori > .coeur { position: absolute; top: 0.4rem; right: 0.4rem; }
a.icone.avec-nombre { width: auto; min-width: 2.2rem; padding: 0 0.4rem; gap: 0.2rem; border-radius: 1.1rem; font-size: 0.85em; text-decoration: none; }

/* Commentaires publics sous les annonces (lot L26) */
.liste-commentaires { padding: 0; margin: 0 0 1rem; }
.liste-commentaires .commentaire { list-style: none; padding: 0.6rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.liste-commentaires .commentaire p.avec-avatar { margin-bottom: 0.3rem; }
.liste-commentaires .commentaire .contenu-message { margin-left: 2.3rem; }
.liste-commentaires .commentaire footer { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0 2.3rem; padding: 0; background: none; border: 0; font-size: 0.85em; }
.liste-commentaires .commentaire.de-l-auteur { background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 5%, transparent); }
/* Remarque n° 68 : réponses en retrait sous leur commentaire, avec un filet à gauche */
.liste-commentaires .reponses-commentaire {
  margin: 0.4rem 0 0 2.3rem;
  padding: 0 0 0 0.8rem;
  border-left: 2px solid color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 25%, transparent);
}
.liste-commentaires .reponses-commentaire .commentaire:last-child { border-bottom: 0; }
.liste-commentaires .form-reponse { margin: 0.5rem 0 0 2.3rem; }
.form-commentaire textarea { margin-bottom: 0.4rem; }
.form-commentaire button { width: auto; }
/* Remarque n° 38 : boutons de la même taille (0.85em) sous une annonce et ses commentaires */
a[role="button"].petit { display: inline-block; width: auto; margin: 0; padding: 0.2rem 0.6rem; font-size: 0.85em; }
.boutons-commentaire { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.boutons-commentaire .petit { margin: 0; }
.liste-commentaires .commentaire footer .petit,
.liste-commentaires .commentaire footer form.en-ligne button { margin: 0; font-size: 1em; }
.actions-auteur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.actions-auteur .bouton-une { flex-basis: 100%; }
.actions-auteur .bouton-une p, .actions-auteur .bouton-une form { margin: 0; }
.actions-auteur > a[role="button"],
.actions-auteur button,
.actions-auteur form.en-ligne button { width: auto; margin: 0; padding: 0.2rem 0.6rem; font-size: 0.85em; }
.form-commentaire p.erreur { color: var(--pico-del-color); }

/* Polices libres hébergées par le site (remarque n° 29, lot L27 ; licences SIL OFL dans static/fonts).
   Polices variables : un seul fichier par jeu de caractères pour toutes les graisses ; téléchargées
   seulement si le thème les choisit. */
@font-face {
  font-family: "Roboto"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/roboto-latin.9a01b69183a9.woff2") format("woff2-variations"), url("../fonts/roboto-latin.9a01b69183a9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/roboto-latin-ext.0f1d3218bace.woff2") format("woff2-variations"), url("../fonts/roboto-latin-ext.0f1d3218bace.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("../fonts/source-serif-4-latin.c1c9c07dd7b6.woff2") format("woff2-variations"), url("../fonts/source-serif-4-latin.c1c9c07dd7b6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("../fonts/source-serif-4-latin-ext.6e8fa9a55c20.woff2") format("woff2-variations"), url("../fonts/source-serif-4-latin-ext.6e8fa9a55c20.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Événements (lot L28, remarque n° 25) : formulaire, fiche, calendrier, carte */
.formulaire-annonce fieldset.champs-evenement { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.8rem 1rem 0.2rem; }
.visuel-apercu { max-width: 240px; height: auto; border-radius: var(--pico-border-radius); }
.details-evenement { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0.6rem 0; }
.details-evenement dt { font-weight: 600; }
.details-evenement dd { margin: 0; }
.visuel-evenement { display: block; max-width: 100%; max-height: 32rem; width: auto; height: auto; margin: 0.6rem 0; border-radius: var(--pico-border-radius); }
.entete-evenements { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.entete-evenements h1 { margin: 0; }
.calendrier > header { display: flex; align-items: center; gap: 1rem; }
.calendrier > header h2 { margin: 0; min-width: 12rem; text-align: center; }
.calendrier > header a { font-size: 1.6rem; text-decoration: none; padding: 0 0.5rem; }
.calendrier table { table-layout: fixed; width: 100%; }
.calendrier th { text-align: center; font-size: 0.85em; }
.calendrier td { vertical-align: top; height: 5.2rem; padding: 0.25rem; font-size: 0.8em; overflow: hidden; }
.calendrier td.hors-mois { background: var(--pico-muted-border-color); opacity: 0.4; }
.calendrier td.aujourd-hui .numero { background: var(--theme-principale, var(--pico-primary)); color: #fff; border-radius: 50%; padding: 0 0.35rem; }
.calendrier td .numero { display: inline-block; font-weight: 600; margin-bottom: 0.15rem; }
.calendrier .evenement-du-jour { display: block; margin-bottom: 0.15rem; padding: 0.05rem 0.25rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--carte-annonces, #d4880f) 20%, white); color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendrier .evenement-du-jour:hover { background: color-mix(in srgb, var(--carte-annonces, #d4880f) 35%, white); }
#carte-evenements { height: 22rem; border-radius: var(--pico-border-radius); margin-bottom: 0.4rem; }
@media (max-width: 640px) {
  .calendrier td { height: 3.2rem; font-size: 0.7em; }
  .calendrier .evenement-du-jour { font-size: 0; height: 0.45rem; padding: 0; }
  /* « lun. » coupé en « lu / n. » sur téléphone (vu le 16/10/2026) : jamais de coupure dans un nom de jour */
  .calendrier th { font-size: 0.72em; padding: 0.3rem 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
}

/* Sondages de dates (lot L29, remarque n° 5) */
.sondage { margin-bottom: 1.2rem; }
.sondage > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.sondage > header h3 { margin: 0; }
.sondage-clos { opacity: 0.85; }
.defilement-horizontal { overflow-x: auto; }
.grille-sondage { width: auto; min-width: 100%; font-size: 0.9em; }
.grille-sondage th, .grille-sondage td { text-align: center; white-space: nowrap; padding: 0.3rem 0.5rem; }
.grille-sondage th[scope="row"] { text-align: left; }
/* Sur téléphone, la grille défile en largeur : la colonne des noms reste en place (16/10/2026) */
.grille-sondage th[scope="row"], .grille-sondage thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--pico-card-background-color, var(--pico-background-color));
}
.grille-sondage thead th { font-size: 0.85em; white-space: normal; min-width: 7rem; }
.grille-sondage .meilleure { background: color-mix(in srgb, var(--pico-ins-color) 15%, transparent); font-weight: 600; }
.grille-sondage td.choix-oui { color: var(--pico-ins-color); }
.grille-sondage td.choix-non { color: var(--pico-del-color); }
.grille-sondage tr.ma-ligne { background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 6%, transparent); }
.grille-sondage select { margin: 0; padding: 0.2rem 1.6rem 0.2rem 0.4rem; font-size: 0.9em; width: auto; }
.sondage .enregistre { color: var(--pico-ins-color); margin: 0.3rem 0; }
.sondage .erreur { color: var(--pico-del-color); }
.clore-sondage { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; margin: 0.6rem 0 0.3rem; }
.clore-sondage label { margin: 0; }
.clore-sondage select { margin: 0; width: auto; }
.formulaire-sondage .ligne-date { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.formulaire-sondage .ligne-date label { flex: 1 1 12rem; }

/* Recadrage d'une image avant l'envoi (lot L31, remarque n° 23b) */
.recadreur { margin: 0.4rem 0 1rem; }
.recadreur-cadre {
  position: relative; width: 240px; height: 240px; overflow: hidden;
  border-radius: var(--pico-border-radius); background: #222; cursor: grab; touch-action: none;
  outline: 2px solid var(--theme-principale, var(--pico-primary)); outline-offset: 2px;
}
.recadreur-cadre:active { cursor: grabbing; }
.recadreur-cadre img { position: absolute; top: 0; left: 0; max-width: none; height: auto; user-select: none; pointer-events: none; transform-origin: 0 0; }
.recadreur-zoom { display: flex; align-items: center; gap: 0.5rem; max-width: 240px; margin: 0.4rem 0 0.2rem; }
.recadreur-zoom input[type="range"] { margin: 0; }
/* Meilleur badge à côté du pseudo (remarques n° 60 et 61) : petit, sans fond (n° 66) */
.badge-pseudo {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.2em;
  /* Remarque n° 66 : ni arrondi ni fond, le dessin tel quel */
  border-radius: 0;
  background: none;
}
h1 .badge-pseudo, h3 .badge-pseudo { width: 0.9em; height: 0.9em; vertical-align: -0.05em; }
/* Pictos de l'espace membre (remarque n° 69, templates/_pictos.html) : violet du thème */
.pictos { position: absolute; width: 0; height: 0; overflow: hidden; }
.picto { width: 1.15em; height: 1.15em; flex: none; color: var(--theme-principale, var(--pico-primary)); }
.menu-membre li a { display: flex; align-items: center; gap: 0.55rem; }
/* « Mon compte » : onglets côte à côte, un picto devant chaque libellé (Pico met nav en flex) */
.onglets-compte { display: block; }
.onglets-compte ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: stretch; gap: 0.6rem; margin: 0 0 1.5rem; padding: 0; }
.onglets-compte li { list-style: none; display: flex; margin: 0; padding: 0; }
.onglets-compte li a { flex: 1; }
.onglets-compte a {
  display: flex; align-items: center; gap: 0.7rem; height: 100%; margin: 0;
  padding: 0.75rem 1rem; text-decoration: none; color: var(--pico-color);
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.onglets-compte a:hover, .onglets-compte a:focus-visible {
  border-color: var(--theme-principale, var(--pico-primary));
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 6%, var(--pico-card-background-color));
}
.onglets-compte .picto { width: 1.5rem; height: 1.5rem; }
.onglets-compte small { color: var(--pico-muted-color); }
/* Remarque n° 71 : titre de section cliquable, sans changer son allure */
a.titre-lien { color: inherit; text-decoration: none; }
a.titre-lien:hover, a.titre-lien:focus-visible { text-decoration: underline; }
/* Parties d'une table (lot L32, remarque n° 40) */
.liste-parties { padding: 0; }
.liste-parties li { list-style: none; padding: 0.5rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.liste-parties li small { display: block; color: var(--pico-muted-color); }
.liste-parties .partie-jouee strong, .liste-parties .partie-annulee strong { opacity: 0.7; }
.liste-documents { padding: 0; }
.liste-documents li { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0; }
.liste-documents img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--pico-border-radius); }
.form-document { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.form-document input[type="file"] { width: auto; margin: 0; }
.form-document label { width: 100%; margin: 0; }
/* Journal en accordéon (lot L32) */
details.entree-journal { border-bottom: 1px solid var(--pico-muted-border-color); padding: 0.4rem 0; margin: 0; }
details.entree-journal > summary small { display: block; color: var(--pico-muted-color); font-weight: normal; }
/* Remarques n° 75 et 76 : date d'un événement, aperçu court, icône « lire la suite » */
.annonce-courte .date-evenement small { color: var(--theme-accent, var(--pico-secondary)); font-weight: 600; }
.annonce-courte .apercu { font-size: 0.92rem; overflow-wrap: anywhere; }
/* Remarque n° 152 : bouton « En savoir + » à la couleur du type de l'annonce, rempli au survol */
.annonce-courte footer { justify-content: center; }
.annonce-courte .lire-suite {
  display: inline-flex; align-items: center; padding: 0.3rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--couleur-type, var(--theme-principale, var(--pico-primary)));
  color: var(--couleur-type, var(--theme-principale, var(--pico-primary)));
  font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s, color 0.15s;
}
.annonce-courte .lire-suite:hover, .annonce-courte .lire-suite:focus-visible {
  background: var(--couleur-type, var(--theme-principale, var(--pico-primary))); color: #fff;
}
/* Remarques n° 77 et 80 : « Je suis » / « Je cherche » sur deux lignes, sans étiquettes grises */
article.carte-membre p.roles { margin: 0; line-height: 1.45; }
article.carte-membre p.roles strong { font-weight: 600; color: var(--pico-color); }
article.carte-membre p.actif { margin: 0.1rem 0 0.2rem; }
/* Remarque n° 79 : la croix d'une ville récente, à droite */
label.ville-raccourci { display: flex; align-items: center; gap: 0.4rem; }
label.ville-raccourci .oublier-ville {
  margin: 0 0 0 auto; padding: 0 0.45rem; width: auto; line-height: 1.4; font-size: 1rem;
  background: none; border: 0; color: var(--pico-muted-color); cursor: pointer;
}
label.ville-raccourci .oublier-ville:hover, label.ville-raccourci .oublier-ville:focus-visible { color: var(--pico-del-color); }
/* Remarque n° 81 : les parties en encarts côte à côte */
.liste-parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.liste-parties li { border: 0; padding: 0; }
.liste-parties .encart-partie {
  display: flex; flex-direction: column; gap: 0.2rem; height: 100%; padding: 0.8rem 1rem; text-decoration: none; color: var(--pico-color);
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
}
.liste-parties .encart-partie:hover, .liste-parties .encart-partie:focus-visible { border-color: var(--theme-principale, var(--pico-primary)); }
.liste-parties .encart-partie strong { color: var(--theme-principale, var(--pico-primary)); }
.liste-parties .statut-partie { align-self: flex-start; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 0.25rem;
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 12%, transparent); }
.liste-parties .partie-planifiee .statut-partie { background: color-mix(in srgb, var(--pico-ins-color) 18%, transparent); }
.liste-parties .partie-jouee .encart-partie, .liste-parties .partie-annulee .encart-partie { opacity: 0.75; }
/* Remarque n° 78 : couverture d'une table derrière l'en-tête, voile clair à gauche pour garder le texte lisible */
.fiche-table header.avec-couverture { position: relative; isolation: isolate; overflow: hidden; padding: 1.25rem 1.25rem 1rem; border-radius: var(--pico-border-radius); }
.fiche-table header.avec-couverture .couverture-table { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fiche-table header.avec-couverture::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--pico-background-color) 0%, color-mix(in srgb, var(--pico-background-color) 88%, transparent) 40%, color-mix(in srgb, var(--pico-background-color) 25%, transparent) 75%, transparent 100%);
}
.apercu-couverture { max-width: 24rem; width: 100%; height: auto; border-radius: var(--pico-border-radius); }
@media (max-width: 768px) {
  /* Sur téléphone : la couverture en bandeau au-dessus du texte, plus de voile */
  .fiche-table header.avec-couverture { padding: 0; }
  .fiche-table header.avec-couverture .couverture-table { position: static; display: block; height: auto; aspect-ratio: 3 / 1; margin-bottom: 0.75rem; }
  .fiche-table header.avec-couverture::before { display: none; }
}
/* Remarque n° 90 : les non-lus se voient tout de suite : pastille rouge, chiffre blanc */
mark.non-lus {
  background: #d93838;
  color: #fff;
  font-weight: 700;
  min-width: 1.5em;
  text-align: center;
  line-height: 1.5;
}
/* Sur l'avatar de l'en-tête : posée sur son coin, comme une notification d'application */
.menu-membre summary { position: relative; }
.menu-membre summary > mark.non-lus {
  position: absolute; top: -0.3rem; left: 1.55rem;
  font-size: 0.72rem; box-shadow: 0 0 0 2px var(--pico-background-color);
}
/* Remarque n° 87 (testeuse) : pendant le défilement, le titre de la liste reste en haut et le champ « Filtrer la
   liste » juste dessous, tous deux sur un fond opaque : plus rien ne passe en transparence ni ne se chevauche */
form.filtres details.choix-multiples[open] > summary {
  position: sticky; top: 0; z-index: 2; margin: 0; padding-bottom: 0.3rem; background: var(--pico-background-color);
}
form.filtres details.choix-multiples .filtre-liste {
  top: 1.9rem; z-index: 1; background-color: var(--pico-background-color);
  /* fond plein autour du champ (ses coins arrondis et l'interstice sous le titre ne laissent rien voir) */
  box-shadow: 0 0 0 0.4rem var(--pico-background-color), 0 -0.9rem 0 0.4rem var(--pico-background-color), 0 0.45rem 0 0.4rem var(--pico-background-color);
}
/* Remarque n° 88 (testeuse) : filtre des associations par département ou province */
.filtre-zone-asso { max-width: 32rem; margin-bottom: 1rem; }
.filtre-zone-asso .ligne-filtre { display: flex; gap: 0.5rem; align-items: center; }
.filtre-zone-asso select { margin: 0; }
.filtre-zone-asso button { width: auto; margin: 0; }
/* Remarque n° 91 : « Mes tables » en encarts, avec le visuel (couverture, image ou initiale) */
.liste-encarts-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.liste-encarts-tables .encart-table {
  display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
}
.liste-encarts-tables .encart-table:hover, .liste-encarts-tables .encart-table:focus-within { border-color: var(--theme-principale, var(--pico-primary)); }
.liste-encarts-tables .visuel-table { display: block; aspect-ratio: 16 / 7; background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 14%, transparent); }
.liste-encarts-tables .visuel-table img { display: block; width: 100%; height: 100%; object-fit: cover; }
.liste-encarts-tables .visuel-table span {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 2.5rem; font-weight: 700; color: var(--theme-principale, var(--pico-primary));
}
.liste-encarts-tables .contenu-encart { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; padding: 0.75rem 1rem 0.9rem; }
.liste-encarts-tables .contenu-encart p { margin: 0; }
.liste-encarts-tables h3 { margin: 0.2rem 0; font-size: 1.1rem; }
.liste-encarts-tables h3 a { text-decoration: none; }
.liste-encarts-tables .etiquettes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.liste-encarts-tables .statut-table { font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 0.25rem;
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 12%, transparent); }
.liste-encarts-tables .table-ouverte .statut-table:first-child { background: color-mix(in srgb, var(--pico-ins-color) 18%, transparent); }
.liste-encarts-tables .table-a_confirmer .statut-table:first-child, .liste-encarts-tables .statut-table.demandes { background: color-mix(in srgb, #e8a33d 25%, transparent); }
.liste-encarts-tables .table-archivee { opacity: 0.75; }
.liste-encarts-tables .actions-encart { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; }
.liste-encarts-tables .actions-encart [role="button"] { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.85rem; }
/* Remarques n° 93 et 94 : un seul modèle d'encart partout (celui de « Mes tables », n° 91) : visuel en bandeau
   en haut, texte dessous, boutons en bas alignés d'un encart à l'autre. Tables et annonces : image en couverture ;
   joueurs et amis : avatar rond centré ; associations : logo entier. */
article.carte-membre {
  flex-direction: column; gap: 0; padding: 0; overflow: hidden; height: 100%;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); box-shadow: none;
}
article.carte-membre:hover, article.carte-membre:focus-within { border-color: var(--theme-principale, var(--pico-primary)); }
article.carte-membre > .vignette {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 6;
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 14%, transparent);
}
article.carte-membre > .vignette img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
article.carte-membre > .vignette .avatar-vide {
  width: auto; height: auto; border-radius: 0; background: none; font-size: 2.5rem; font-weight: 700;
  color: var(--theme-principale, var(--pico-primary));
}
article.carte-membre > .vignette .picto { width: 2.6rem; height: 2.6rem; color: var(--theme-principale, var(--pico-primary)); }
/* Joueurs, amis : bandeau plus bas (l'annuaire est à côté de la carte), avatar rond au milieu */
article.carte-membre.carte-joueur > .vignette { aspect-ratio: auto; height: 6rem; }
article.carte-membre.carte-joueur > .vignette img, article.carte-membre.carte-joueur > .vignette .avatar-vide {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--pico-card-background-color); background: var(--pico-card-background-color);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
/* Associations : le logo n'est jamais rogné */
article.carte-membre.carte-association > .vignette img { object-fit: contain; padding: 0.6rem; }
/* Remarque n° 154 : encart d'une association aux couleurs de son calque sur la carte, comme celui d'une table */
article.carte-membre.carte-association { border-top: 4px solid var(--carte-associations, #c0392b); }
/* Remarque n° 166 : en-tête comme celui des joueurs (n° 97) : bandeau fin, logo ou initiale dans un rond à cheval sur le haut */
.cartes-membres:has(> article.carte-association), .cartes-membres:has(> .favori > article.carte-association) { row-gap: 2.75rem; padding-top: 2.4rem; }
article.carte-membre.carte-association { overflow: visible; }
article.carte-membre.carte-association > .vignette { position: relative; height: 2.6rem; aspect-ratio: auto; background: none; }
article.carte-membre.carte-association > .vignette img, article.carte-membre.carte-association > .vignette .avatar-vide {
  position: absolute; top: -2.4rem; left: 50%; transform: translateX(-50%); width: 4.8rem; height: 4.8rem; border-radius: 50%;
  border: 3px solid var(--pico-card-background-color, #fff); box-shadow: 0 0 0 1px var(--pico-muted-border-color);
}
article.carte-membre.carte-association > .vignette img { object-fit: contain; padding: 0.35rem; background: #fff; }
article.carte-membre.carte-association > .vignette .avatar-vide {
  display: flex; align-items: center; justify-content: center; background: var(--carte-associations, #c0392b); color: #fff; font-size: 1.8rem;
}
article.carte-membre.carte-association > div { padding-top: 0.35rem; }
article.carte-membre .type-encart {
  margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--carte-associations, #c0392b);
}
article.carte-membre > div { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; padding: 0.75rem 1rem 0.9rem; min-width: 0; }
article.carte-membre > div > :last-child { margin-bottom: 0; }
article.carte-membre .actions-encart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; }
article.carte-membre .actions-encart > * { margin: 0; }
article.carte-membre .voir-sur-carte { align-self: flex-start; }
.favori > article.carte-membre { height: 100%; }
/* Favoris : le cœur se pose sur le bandeau de l'encart */
.favori { padding-right: 0; }
.favori > .coeur { z-index: 1; top: 0.5rem; right: 0.5rem; border-radius: 50%; background: var(--pico-card-background-color); }
article.carte-membre > div > h3 { margin-top: 0.15rem; }
/* Annonce sans visuel : bandeau plus bas, juste le picto du type */
article.carte-annonce > .vignette:not(:has(img)) { aspect-ratio: auto; height: 4.5rem; }
/* Remarque n° 95 : fiche d'un joueur : en-tête avec bandeau et grand avatar, deux colonnes, rubriques encadrées */
.fiche-membre { padding: 0; overflow: hidden; }
.fiche-membre > header.entete-membre { margin: 0 0 1rem; padding: 0 1.25rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color); background: none; }
.bandeau-membre { height: 6rem; margin: 0 -1.25rem; background: linear-gradient(120deg, color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 30%, transparent), color-mix(in srgb, var(--theme-accent, var(--pico-primary)) 25%, transparent)); }
.identite-membre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.25rem; }
.identite-membre img.avatar { margin-top: -3.5rem; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--pico-card-background-color, #fff); background: var(--pico-card-background-color, #fff); }
.identite-membre > div { flex: 1 1 18rem; min-width: 0; padding-top: 0.6rem; }
/* Rien à montrer à gauche (visiteur, sections masquées) : la colonne de droite prend la place */
.fiche-colonnes:has(> .fiche-principale:not(:has(*))) { grid-template-columns: minmax(0, 1fr); }
.fiche-principale:not(:has(*)) { display: none; }
.identite-membre h1 { margin: 0 0 0.15rem; }
.identite-membre p { margin: 0 0 0.3rem; }
.pastilles-membre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.pastilles-membre mark.pastille-role { padding: 0.1rem 0.55rem; border-radius: 1rem; font-weight: 600;
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 15%, transparent); color: var(--theme-principale, var(--pico-primary)); }
.pastilles-membre .cherche { margin-left: 0.4rem; color: var(--pico-muted-color); font-size: 0.9em; }
.entete-membre .badges { margin-top: 0.6rem; }
.fiche-colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; padding: 0 1.25rem; }
@media (max-width: 900px) { .fiche-colonnes { grid-template-columns: minmax(0, 1fr); } }
.fiche-membre .rubrique { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.fiche-membre .rubrique h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.fiche-membre .rubrique > :last-child { margin-bottom: 0; }
.fiche-laterale .mini-carte { margin: 0 0 1rem; }
.fiche-membre > section, .fiche-membre > footer, .fiche-membre > article.bandeau-profil { margin-left: 1.25rem; margin-right: 1.25rem; }
.fiche-membre > footer { margin-bottom: 1rem; }
/* « Ami » : icône des amis à la place du ✓ */
.etat-ami { display: inline-flex; align-items: center; gap: 0.3rem; }
.etat-ami .picto { width: 1.2rem; height: 1.2rem; }
/* Remarque n° 96 : solde d'XP près de l'avatar (reste visible sur téléphone, où le pseudo est masqué) */
/* Remarque n° 104 (après la n° 102) : simplement le nombre et « XP », en or (couleur d'accent), sans cercle ni fond */
.menu-membre .xp-membre { flex: none; display: inline-flex; align-items: baseline; gap: 0.15rem; white-space: nowrap; color: var(--theme-accent, #8a7339); font-weight: 700; }
.menu-membre .xp-membre .nombre { font-size: 0.95rem; }
.menu-membre .xp-membre .unite { font-size: 0.75rem; }
/* Remarque n° 97 (maquette de Nicolas) : encart compact d'un rôliste : l'avatar rond posé à cheval sur le haut de
   l'encart, plus de bandeau ; une place est gardée au-dessus de l'encart pour la moitié de l'avatar */
.cartes-membres:has(> article.carte-joueur), .cartes-membres:has(> .favori > article.carte-joueur), .grille-suggestions:has(> article.carte-joueur) { row-gap: 2.75rem; padding-top: 2.4rem; }
article.carte-membre.carte-joueur { overflow: visible; }
article.carte-membre.carte-joueur > .vignette { position: relative; height: 2.6rem; aspect-ratio: auto; background: none; }
article.carte-membre.carte-joueur > .vignette img, article.carte-membre.carte-joueur > .vignette .avatar-vide {
  position: absolute; top: -2.4rem; left: 50%; transform: translateX(-50%); width: 4.8rem; height: 4.8rem;
}
article.carte-membre.carte-joueur > div { padding-top: 0.35rem; }
article.carte-membre .pastilles-jeux { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0; }
article.carte-membre .pastilles-jeux li { margin: 0; padding: 0.05rem 0.6rem; border: 1px solid var(--pico-muted-border-color); border-radius: 1rem; background: none; }
article.carte-membre .actions-encart [role="button"], article.carte-membre .actions-encart button { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
article.carte-membre .actions-encart .bouton-ami { display: contents; }
/* Remarques n° 97 à 101 : les icônes rapides en bas de l'encart, centrées */
article.carte-membre .icones-rapides { justify-content: center; margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--pico-muted-border-color); }
article.carte-membre .actions-encart + .icones-rapides { margin-top: 0.5rem; }
article.carte-membre > div > .icones-rapides:first-of-type { margin-top: auto; }
.favori article.carte-membre .icones-rapides .coeur { display: none; }
article.carte-membre .apercu-asso { font-size: 0.9em; color: var(--pico-muted-color); }
/* Remarque n° 97 : dans un encart, « Ami » suffit (« Retirer de mes amis » reste sur la fiche) ; « Ajouter comme ami » en contour */
article.carte-membre .bouton-ami .etat-ami ~ form { display: none; }
article.carte-membre .bouton-ami button:not(.secondary) {
  background: transparent; color: var(--theme-principale, var(--pico-primary)); border-color: var(--theme-principale, var(--pico-primary));
}
article.carte-membre.carte-joueur > .vignette img { box-shadow: 0 0 0 1px var(--pico-muted-border-color); }
/* Remarque n° 105 : le cœur aussi dans « Mes tables », centré en bas comme dans les autres encarts */
.liste-encarts-tables .icones-rapides { justify-content: center; margin: 0.5rem 0 0; padding-top: 0.4rem; border-top: 1px solid var(--pico-muted-border-color); }
/* Remarque n° 107 : aperçu de la description dans l'encart d'une table */
article.carte-membre .apercu-table { font-size: 0.9em; color: var(--pico-muted-color); }
/* Remarque n° 108 : image d'une annonce plus basse dans l'encart ; aperçu des derniers commentaires */
article.carte-annonce > .vignette { aspect-ratio: auto; height: 7.5rem; }
article.carte-membre .apercu-commentaires { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; list-style: none; font-size: 0.85em;
  border-left: 2px solid var(--pico-muted-border-color); color: var(--pico-muted-color); }
article.carte-membre .apercu-commentaires li { list-style: none; margin: 0 0 0.15rem; }
article.carte-membre .apercu-commentaires strong { color: var(--pico-color); font-weight: 600; }
/* Remarque n° 109 : page d'une table comme la fiche d'un rôliste : couverture dans le bandeau, image carrée aux coins arrondis */
.bandeau-membre.avec-image { height: 10rem; background: none; overflow: hidden; }
.bandeau-membre.avec-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fiche-table .identite-membre .avatar { width: 8rem; height: 8rem; margin-top: -3.5rem; border-radius: var(--pico-border-radius); object-fit: cover;
  border: 4px solid var(--pico-card-background-color, #fff); background: var(--pico-card-background-color, #fff); }
.fiche-table .identite-membre span.avatar { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700;
  color: var(--theme-principale, var(--pico-primary)); background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 14%, var(--pico-card-background-color, #fff)); }
.fiche-table .actions-principales .icones-rapides { margin: 0 0 0 auto; }
.fiche-table .fiche-principale > section.parties { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.fiche-table .fiche-principale > section.parties h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.liste-joueurs-table { margin: 0; padding: 0; }
.liste-joueurs-table li { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0 0 0.35rem; }
.fiche-laterale .demande { margin: 0 0 0.6rem; padding: 0.5rem 0.7rem; }
.fiche-laterale #rejoindre h2 { font-size: 1.05rem; margin: 0.5rem 0; }
/* Remarque n° 112 : inviter un rôliste par son pseudo */
.inviter-pseudo { margin: 0.6rem 0 0.3rem; }
.inviter-pseudo .ligne-filtre { display: flex; gap: 0.4rem; align-items: center; }
.inviter-pseudo input { margin: 0; }
.inviter-pseudo button { width: auto; margin: 0; }
/* Remarques n° 113 et 114 : les joueurs en pastilles en haut d'une table et d'une partie */
.joueurs-en-tete { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0; padding: 0; }
.joueurs-en-tete li { list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0.1rem 0.55rem 0.1rem 0.15rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 1.2rem; font-size: 0.9em; }
.joueurs-en-tete li img, .joueurs-en-tete li .avatar-initiale { width: 1.5rem; height: 1.5rem; }
/* Remarque n° 114 : les actions du MJ sur une partie, regroupées */
.fiche-partie .rubrique { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.fiche-partie .rubrique h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.actions-partie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.statuts-partie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.statuts-partie button, .actions-partie [role="button"] { width: auto; margin: 0; }
.supprimer-partie { margin: 0.8rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--pico-muted-border-color); }
.supprimer-partie button { width: auto; margin: 0; color: var(--pico-del-color); border-color: var(--pico-del-color); }
/* Remarque n° 117 : « Publiée le … » sous le pseudo et la ville, en petit (maquette de Nicolas) */
.auteur small.publiee { display: block; font-size: 0.8em; color: var(--pico-muted-color); line-height: 1.3; }
/* Remarque n° 118 : « Cherche des joueurs et un MJ » en simple phrase, discrète */
.pastilles-membre .cherche { margin-left: 0.3rem; font-size: 0.85em; font-style: italic; }
/* Remarque n° 122 : icônes devant les titres des rubriques (table, partie) */
h2 .picto-titre { width: 1.15em; height: 1.15em; margin-right: 0.4rem; vertical-align: -0.18em; }
/* Remarque n° 120 : « Joueurs : » devant les pastilles */
.ligne-joueurs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.35rem 0 0; }
.ligne-joueurs .joueurs-en-tete { margin: 0; }
/* Remarque n° 121 : « Faites connaître votre table », encadré avec deux boutons */
.faire-connaitre { margin: 0.9rem 0 0.3rem; padding: 0.8rem 1rem; border-radius: var(--pico-border-radius);
  border: 1px dashed color-mix(in srgb, var(--theme-accent, #8a7339) 60%, transparent);
  background: color-mix(in srgb, var(--theme-accent, #8a7339) 7%, transparent); }
.faire-connaitre h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.actions-faire-connaitre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.8rem; }
.actions-faire-connaitre > [role="button"], .actions-faire-connaitre .bouton-une button { width: auto; margin: 0; }
.actions-faire-connaitre .bouton-une { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.actions-faire-connaitre .bouton-une p, .actions-faire-connaitre .bouton-une form { margin: 0; }
.faire-connaitre > p.aide { margin: 0.5rem 0 0; }
/* Remarques n° 123 et 124 : barre de filtres rapides, sur téléphone seulement ; les résultats d'abord */
.barre-filtres-mobile { display: none; }
/* Remarque n° 162 : les titres visés par les raccourcis de l'accueil ne passent pas sous la barre collée */
@media (max-width: 768px) {
  #titre-une, #titre-annonces, #titre-recherche, #titre-nouvelles-tables { scroll-margin-top: 3.5rem; }
}
@media (max-width: 768px) {
  .barre-filtres-mobile {
    display: flex; align-items: center; gap: 0.4rem; position: sticky; top: 0; z-index: 30;
    margin: 0 -1rem 0.8rem; padding: 0.5rem 1rem; overflow-x: auto; scrollbar-width: none;
    background: var(--pico-background-color); border-bottom: 1px solid var(--pico-muted-border-color);
  }
  .barre-filtres-mobile ul { display: flex; gap: 0.4rem; margin: 0; padding: 0; }
  .barre-filtres-mobile li { list-style: none; margin: 0; flex: none; }
  .filtre-rapide {
    display: inline-flex; align-items: center; gap: 0.3rem; width: auto; margin: 0; padding: 0.3rem 0.7rem; white-space: nowrap;
    font-size: 0.85rem; text-decoration: none; color: var(--pico-color); background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color); border-radius: 1.2rem;
  }
  .filtre-rapide .picto-titre { margin: 0; width: 1rem; height: 1rem; }
  .filtre-rapide.actif { color: #fff; background: var(--theme-principale, var(--pico-primary)); border-color: var(--theme-principale, var(--pico-primary)); }
  .filtre-rapide.actif .picto-titre { color: #fff; }
  .plus-de-filtres { flex: none; font-weight: 600; }
  .recherche.repliable > aside { display: none; }
  .recherche.repliable.ouvert > aside { display: block; }
}
@media (max-width: 768px) {
  button.filtre-rapide { color: var(--theme-principale, #4b2a63); background: var(--pico-card-background-color); border-color: var(--pico-muted-border-color); box-shadow: none; }
  button.filtre-rapide[aria-expanded="true"] { color: #fff; background: var(--theme-principale, var(--pico-primary)); }
  button.filtre-rapide[aria-expanded="true"] .picto-titre { color: #fff; }
}
/* Remarque n° 128 (maquette de Nicolas) : « Publiée le … » sous le type, « En savoir + » centré au-dessus des icônes */
article.carte-annonce .entete-annonce { margin: 0; }
article.carte-annonce .publiee-le { margin: 0.1rem 0 0.15rem; font-size: 0.8em; color: var(--pico-muted-color); }
article.carte-annonce .en-savoir { margin: auto 0 0; padding-top: 0.6rem; text-align: center; }
article.carte-annonce .en-savoir a { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; font-weight: 500; color: var(--pico-color); }
article.carte-annonce .en-savoir .picto { width: 1.1rem; height: 1.1rem; }
article.carte-annonce .en-savoir + .icones-rapides { margin-top: 0.4rem; }
/* Remarque n° 126 : joueurs habituels et amis à cocher */
.inviter-plusieurs fieldset { margin: 0 0 0.5rem; padding: 0; border: 0; max-height: 14rem; overflow-y: auto; }
.inviter-plusieurs legend { font-size: 0.9em; color: var(--pico-muted-color); margin-bottom: 0.3rem; }
.inviter-plusieurs label { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; }
.inviter-plusieurs label input { margin: 0; }
.inviter-plusieurs button { width: auto; margin: 0 0 0.6rem; }
/* Remarque n° 125 : notifications par catégorie, une icône chacune, non-lues mises en valeur */
.onglets-notifications ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0; }
.onglets-notifications li { list-style: none; margin: 0; }
.onglets-notifications a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; font-size: 0.9rem;
  text-decoration: none; border: 1px solid var(--pico-muted-border-color); border-radius: 1.2rem; color: var(--pico-color); }
.onglets-notifications a[aria-current="page"] { color: #fff; background: var(--theme-principale, var(--pico-primary)); border-color: var(--theme-principale, var(--pico-primary)); }
.onglets-notifications a[aria-current="page"] .picto-titre { color: #fff; }
.onglets-notifications .picto-titre { margin: 0; width: 1rem; height: 1rem; }
.onglets-notifications mark.non-lus { margin-left: 0.15rem; }
form.tout-lu { margin: 0 0 0.5rem; }
ul.notifications li.notification { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0.5rem; border-radius: var(--pico-border-radius); }
ul.notifications li.notification .icone-notification { flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 10%, transparent); }
ul.notifications li.notification .icone-notification .picto-titre { margin: 0; }
ul.notifications li.notification .corps-notification { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
ul.notifications li.notification .corps-notification > a { text-decoration: none; color: var(--pico-color); }
ul.notifications li.non-lue { background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 6%, transparent); }
ul.notifications li.non-lue .corps-notification > a { color: var(--theme-principale, var(--pico-primary)); }
ul.notifications li.non-lue .icone-notification { background: var(--theme-principale, var(--pico-primary)); }
ul.notifications li.non-lue .icone-notification .picto-titre { color: #fff; }
ul.notifications .marquer-lue { flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent; border: 1px solid var(--pico-muted-border-color); color: var(--theme-principale, var(--pico-primary)); }
/* Remarques n° 131 et 132 : « Faites connaître » et « Journal » en accordéons fermés, le titre dans le résumé */
details.faire-connaitre, details.journal { margin-bottom: 1rem; }
details.faire-connaitre > summary, details.journal > summary { cursor: pointer; list-style-position: outside; }
details.faire-connaitre > summary h2, details.journal > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
details.faire-connaitre[open] > summary, details.journal[open] > summary { margin-bottom: 0.6rem; }
details.journal > summary h2 small { font-weight: 400; color: var(--pico-muted-color); }
/* Remarque n° 130 : un bloc par campagne, les one-shots à part */
details.groupe-parties { margin: 0 0 0.8rem; padding: 0.5rem 0.8rem; border-radius: var(--pico-border-radius);
  border-left: 3px solid var(--theme-principale, var(--pico-primary)); background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 5%, transparent); }
details.groupe-parties.one-shots { border-left-color: var(--theme-accent, #8a7339); background: color-mix(in srgb, var(--theme-accent, #8a7339) 6%, transparent); }
details.groupe-parties > summary { cursor: pointer; }
details.groupe-parties[open] > summary { margin-bottom: 0.6rem; }
details.groupe-parties .liste-parties { margin-bottom: 0.2rem; }
/* Remarque n° 133 : « À faire » en tête de « Mes tables » */
/* Remarque n° 159 : onglets, recherche et origine des conversations */
nav.onglets-boite ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; padding: 0; }
nav.onglets-boite ul li { list-style: none; margin: 0; padding: 0; }
nav.onglets-boite ul li a {
  display: inline-block; margin: 0; padding: 0.25rem 0.85rem; border-radius: 999px; font-size: 0.9rem; text-decoration: none;
  border: 1px solid var(--pico-muted-border-color); color: var(--pico-color);
}
nav.onglets-boite ul li a[aria-current="page"] { background: var(--theme-principale, var(--pico-primary)); border-color: transparent; color: #fff; }
.recherche-boite { display: flex; gap: 0.5rem; margin: 0 0 1rem; max-width: 30rem; }
.recherche-boite input[type="search"] { margin: 0; }
.recherche-boite button { margin: 0; }
.origine-conversation {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
  background: var(--pico-muted-border-color); color: var(--pico-muted-color); vertical-align: middle;
}
.origine-annonce { background: color-mix(in srgb, var(--carte-annonces, #d4880f) 18%, transparent); color: var(--pico-color); }
.origine-table, .origine-invitation { background: color-mix(in srgb, var(--carte-tables, #2e8b57) 18%, transparent); color: var(--pico-color); }
.origine-ligne { margin: 0 0 0.5rem; }
.origine-ligne .origine-conversation { margin-left: 0; font-size: 0.85rem; }
.actions-fil { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.actions-fil form, .actions-fil button { margin: 0; }

/* Remarque n° 159 (étape 2) : boîte en deux colonnes sur grand écran, lignes denses, sélection multiple */
.barre-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.5rem; }
.barre-selection button, .barre-selection label { margin: 0; }
.barre-selection .tout-cocher { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
.barre-selection .tout-cocher[hidden] { display: none; }
ul.boite li.conversation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.6rem; padding: 0.6rem 0.4rem; }
ul.boite li.conversation > input[type="checkbox"] { margin: 0.2rem 0 0; }
ul.boite li.conversation > a { display: grid; gap: 0.1rem; min-width: 0; text-decoration: none; color: inherit; }
ul.boite li.conversation .ligne-titre { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
ul.boite li.conversation .ligne-titre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--theme-principale, var(--pico-primary)); }
ul.boite li.conversation .ligne-titre mark { flex: none; padding: 0 0.45em; border-radius: 1em; font-size: 0.72rem; }
ul.boite li.conversation .ligne-infos { font-size: 0.82rem; color: var(--pico-muted-color); }
ul.boite li.conversation .apercu { font-size: 0.88rem; color: var(--pico-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.boite li.conversation small.date { display: block; white-space: nowrap; font-size: 0.8rem; color: var(--pico-muted-color); }
ul.boite li.conversation.ouverte { background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 8%, transparent); border-radius: 0.4rem; }
.colonne-fil { display: none; }
@media (min-width: 1024px) {
  .boite-2-colonnes { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .colonne-fil {
    display: block; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1rem 1.25rem;
    border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  }
  .colonne-fil .vide { margin: 2rem 0; text-align: center; }
  .colonne-fil article.fil { margin: 0; padding: 0; box-shadow: none; background: none; }
  .colonne-fil h2 { font-size: 1.3rem; }
}

/* Remarque n° 159 (étape 3) : dossiers personnels */
nav.dossiers-boite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.75rem; }
nav.dossiers-boite ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
nav.dossiers-boite ul li { list-style: none; margin: 0; padding: 0; }
nav.dossiers-boite ul li a {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0.2rem 0.75rem; border-radius: 0.4rem;
  font-size: 0.88rem; text-decoration: none; color: var(--pico-color); background: var(--pico-muted-border-color);
}
nav.dossiers-boite ul li a .picto-titre { margin: 0; width: 1rem; height: 1rem; }
nav.dossiers-boite ul li a[aria-current="page"] { background: var(--theme-principale, var(--pico-primary)); color: #fff; }
nav.dossiers-boite details.nouveau-dossier { margin: 0; border: 0; padding: 0; }
nav.dossiers-boite details.nouveau-dossier > summary { font-size: 0.88rem; color: var(--theme-principale, var(--pico-primary)); }
nav.dossiers-boite details.nouveau-dossier form { display: flex; gap: 0.4rem; margin: 0.4rem 0 0; }
nav.dossiers-boite details.nouveau-dossier input, nav.dossiers-boite details.nouveau-dossier button { margin: 0; }
.entete-dossier { margin: 0 0 0.3rem; }
.supprimer-dossier { margin: 0 0 0.75rem; }
.supprimer-dossier button { margin: 0; }
.barre-selection .ranger { display: inline-flex; gap: 0.4rem; align-items: center; }
.barre-selection select { margin: 0; width: auto; padding-block: 0.2rem; font-size: 0.88rem; }

/* Remarque n° 160 : historique des XP par mois */
details.historique-mois { margin: 0 0 0.5rem; border-bottom: 1px solid var(--pico-muted-border-color); }
details.historique-mois > summary { font-weight: 600; padding: 0.4rem 0; }
details.historique-mois .total-mois { font-weight: 400; color: var(--pico-muted-color); }
details.historique-mois table { margin: 0 0 0.75rem; }
details.historique-mois td.montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Remarque n° 168 : encadré « … vous invite à rejoindre cette table » */
.invitation-recue {
  margin: 0.75rem 0; padding: 0.8rem 1rem; border-radius: var(--pico-border-radius);
  border: 1px solid var(--carte-tables, #2e8b57); background: color-mix(in srgb, var(--carte-tables, #2e8b57) 8%, transparent);
}
.invitation-recue p { margin: 0 0 0.5rem; }
.invitation-recue form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.invitation-recue button { margin: 0; width: auto; }

/* Remarque n° 149, étape 2 : Mes joueurs, Mes parties (agenda) */
ul.liste-mes-joueurs, ul.agenda { margin: 0; padding: 0; display: grid; gap: 0.5rem; }
ul.liste-mes-joueurs li, ul.agenda li { list-style: none; margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
ul.liste-mes-joueurs li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 1rem; }
ul.liste-mes-joueurs li [role="button"] { margin: 0; }
@media (max-width: 600px) { ul.liste-mes-joueurs li { grid-template-columns: minmax(0, 1fr) auto; } ul.liste-mes-joueurs li small { grid-column: 1 / -1; } }
ul.agenda li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.agenda-date { text-align: center; padding: 0.3rem; border-radius: 0.4rem; background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 10%, transparent); }
.agenda-quoi { display: grid; gap: 0.1rem; }
.agenda-mois h2 { font-size: 1.15rem; margin: 1.25rem 0 0.4rem; }

/* Point 9 (20/10/2026) : choix des jeux du profil, en groupes, avec une recherche */
.champ-choix-jeux .filtre-jeux { margin: 0.3rem 0 0.6rem; }
.champ-choix-jeux details.groupe-jeux { margin: 0 0 0.4rem; padding: 0.3rem 0.6rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.champ-choix-jeux details.groupe-jeux > summary { font-weight: 600; }
.champ-choix-jeux .cases-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.15rem 1rem; padding: 0.4rem 0; }
.champ-choix-jeux .cases-jeux label { margin: 0; }

/* Remarque n° 158 : « Proposer une table », mini centre de notifications et outils sur une ligne */
.barre-mes-tables { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 0 0 1.5rem; }
.barre-mes-tables > [role="button"] { margin: 0; }
.barre-mes-tables .libelle-a-traiter { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pico-muted-color); }
nav.alertes-tables ul, nav.outils-tables ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.barre-mes-tables nav { display: block; }
nav.alertes-tables ul li, nav.outils-tables ul li { list-style: none; margin: 0; padding: 0; }
/* Remarque n° 163 : icône qui déplie la liste des tables concernées */
nav.alertes-tables details.alerte-menu { position: relative; margin: 0; padding: 0; border: 0; }
nav.alertes-tables details.alerte-menu > summary { list-style: none; cursor: pointer; }
nav.alertes-tables details.alerte-menu > summary::-webkit-details-marker { display: none; }
nav.alertes-tables details.alerte-menu > summary::after { display: none; }
nav.alertes-tables .menu-alerte {
  position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0; min-width: 15rem; max-width: 80vw; padding: 0.6rem 0.8rem;
  background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}
nav.alertes-tables .menu-alerte p { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 600; }
nav.alertes-tables .menu-alerte ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; }
nav.alertes-tables .menu-alerte ul li a { display: block; margin: 0; padding: 0.2rem 0; font-size: 0.9rem; }
nav.alertes-tables ul li a.alerte, nav.alertes-tables details.alerte-menu > summary.alerte {
  margin: 0; padding: 0; position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--theme-principale, var(--pico-primary)); color: var(--theme-principale, var(--pico-primary));
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 8%, transparent); text-decoration: none;
}
nav.alertes-tables ul li a.alerte:hover, nav.alertes-tables ul li a.alerte:focus-visible { background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 18%, transparent); }
.alertes-tables .alerte .picto-titre { width: 1.2rem; height: 1.2rem; margin: 0; }
.alertes-tables .nombre {
  position: absolute; top: -0.35rem; right: -0.4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 99px;
  background: #b5523b; color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.2rem; text-align: center;
}
.alertes-tables .rien { margin: 0; font-size: 0.88rem; color: var(--pico-muted-color); }
.outils-tables { margin-left: auto; }
nav.outils-tables ul li a { margin: 0; padding: 0; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--pico-muted-color); }
nav.outils-tables ul li a:hover, nav.outils-tables ul li a:focus-visible { color: var(--theme-principale, var(--pico-primary)); background: var(--pico-muted-border-color); }
.outils-tables .picto { width: 1.15rem; height: 1.15rem; color: inherit; } /* gris, violet au survol (couleur du lien) */
@media (max-width: 600px) { .outils-tables { margin-left: 0; } }

.a-faire { margin: 0 0 1.2rem; padding: 0.8rem 1rem; border-radius: var(--pico-border-radius);
  border: 1px solid color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 35%, transparent);
  background: color-mix(in srgb, var(--theme-principale, var(--pico-primary)) 6%, transparent); }
.a-faire h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.a-faire ul { margin: 0; padding: 0; }
.a-faire li { list-style: none; margin: 0 0 0.3rem; }
.a-faire li a { display: inline-flex; align-items: center; gap: 0.4rem; }
.a-faire li .picto-titre { margin: 0; }

/* Remarque n° 135 : « Table ouverte », « Table complète · privée »… */
.mention-table { font-weight: 600; }
/* Remarque n° 138 : ouverte en vert (comme les places restantes), complète en terracotta */
.mention-ouverte { color: var(--pico-ins-color); }
.mention-complete { color: #b5523b; }
.liste-encarts-tables .statut-table.mention-ouverte { background: color-mix(in srgb, var(--pico-ins-color) 18%, transparent); }
.liste-encarts-tables .statut-table.mention-complete { background: color-mix(in srgb, #b5523b 16%, transparent); }

/* Remarque n° 143 : fiche d'un rôliste aux couleurs de la carte (joueurs violet, MJ vert, table bleu) */
.pastilles-membre mark.role-joueur { background: color-mix(in srgb, var(--carte-membres, #8e6cc0) 18%, white); color: color-mix(in srgb, var(--carte-membres, #8e6cc0) 75%, black); }
.pastilles-membre mark.role-mj { background: color-mix(in srgb, var(--carte-mj, #14895a) 18%, white); color: color-mix(in srgb, var(--carte-mj, #14895a) 75%, black); }
.pastilles-membre .cherche-joueurs { color: color-mix(in srgb, var(--carte-membres, #8e6cc0) 80%, black); font-weight: 600; }
.pastilles-membre .cherche-mj { color: color-mix(in srgb, var(--carte-mj, #14895a) 85%, black); font-weight: 600; }
.pastilles-membre .cherche-table { color: color-mix(in srgb, var(--carte-joueur-mj, #2f6fd6) 85%, black); font-weight: 600; }

/* Remarque n° 144 : « Table ouverte · 1 place disponible » sur une seule ligne */
.ligne-places, .liste-encarts-tables .statut-table { white-space: nowrap; }

/* Remarque n° 145 : « Jeu proposé : … » en texte simple */
.jeu-propose { font-size: 0.95em; }
.liste-encarts-tables .jeu-propose { margin: 0.2rem 0; }