/* SPDX-FileCopyrightText: 2026 FTW.group Sàrl */
/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* ==========================================================================
   SYSTEMIC.CLUB — module « Rencontres » : agenda public et vue calendrier,
   fiche, réservation, « Votre réservation », bloc du fil, « Mes inscriptions »,
   administration (liste, formulaire, participants, annulation).
   Reprend les composants de systemic.css (boutons, champs, options, puces,
   segments, pastilles, encadrés, tableaux, état vide) et ses jetons : aucune
   couleur écrite en dur, le thème sombre suit de lui-même. Classes propres au
   module seulement (préfixes rencontre, reserver, reservation, inscription,
   participants, agenda, formulaire-rencontre, annulation-rencontre).
   Paliers : ≤ 640 px, 641–1023 px, ≥ 1024 px.
   ========================================================================== */

@layer pages {
  /* ------------------------------------------------------------------ Éléments communs */
  /* Textes saisis : un mot plus long que la colonne se coupe au lieu de faire déborder la page. */
  .carte-rencontre__titre, .carte-rencontre__lieu, .rencontre__titre, .rencontre__faits dd, .rencontre__description,
  .reserver__titre, .reserver__identite, .reservation-gestion h1, .reservation-faits dd, .inscription__titre, .inscription__meta,
  .carte-admin-rencontre__titre, .carte-admin-rencontre__meta, .participants__personne, .participants__invites, .agenda__evenement { overflow-wrap: anywhere; }

  /* Visuel : image de la rencontre, ou cercle vivant du club sur un fond de panneau */
  .visuel-rencontre { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-surface); background: var(--panneau); }
  .visuel-rencontre--club { display: grid; place-items: center; border: 1px solid var(--filet); background: radial-gradient(120% 90% at 18% 12%, var(--selection), var(--panneau) 72%); color: var(--filet-appuye); }
  .visuel-rencontre--club .marque { width: 26%; max-width: 104px; height: auto; }

  /* Faits d’une rencontre ou d’une réservation : libellé en petites capitales, valeur à côté */
  .rencontre__faits, .reservation-faits { display: grid; border-top: 1px solid var(--filet-appuye); }
  .rencontre__faits > div, .reservation-faits > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--filet); }
  /* « Remboursement » et « Inscription » demandent un libellé plus large ; sur téléphone, il passe au-dessus de la valeur */
  .reservation-faits > div { grid-template-columns: 8.75rem minmax(0, 1fr); }
  @media (width <= 640px) { .reservation-faits > div { grid-template-columns: minmax(0, 1fr); gap: var(--e1); } }
  .rencontre__faits dt, .reservation-faits dt { padding-top: 3px; color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: var(--approche-libelle); text-transform: uppercase; }
  .rencontre__faits dd, .reservation-faits dd { min-width: 0; color: var(--encre); }
  .rencontre__faits dd .discret, .reservation-faits dd .discret { display: block; margin-top: 2px; font-size: var(--taille-xs); }

  /* Recherche (agenda public et administration) : le libellé reste lu, sans être affiché */
  .rencontres__recherche { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-end; max-width: 560px; }
  .rencontres__recherche .champ { flex: 1 1 10rem; min-width: 0; }
  .rencontres__champ-recherche > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rencontres__compte { margin: var(--e4) 0 0; color: var(--discret); font-size: var(--taille-petite); }

  /* ------------------------------------------------------------------ Agenda public */
  .rencontres, .rencontre, .reserver { width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); margin-inline: auto; padding: var(--e7) var(--gouttiere) var(--e8); }
  .rencontre, .reserver { padding-top: var(--e5); }
  .rencontres__entete { margin-bottom: var(--e6); }
  .rencontres__outils { display: grid; gap: var(--e4); padding-top: var(--e5); border-top: 1px solid var(--filet); }
  .rencontres__barre { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: center; justify-content: space-between; }
  .rencontres__mois { margin-top: var(--e6); }
  .rencontres__titre-mois { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); align-items: baseline; margin-bottom: var(--e4); }
  .rencontres__titre-mois span, .inscriptions__titre span, .participants__section h2 span { color: var(--discret); font-family: var(--police); font-size: var(--taille-petite); letter-spacing: 0; -webkit-text-stroke: 0; }
  .rencontres__passees { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--filet-appuye); color: var(--discret); }
  .rencontres__passees .icone { width: 16px; height: 16px; }
  .rencontres__mois--passe .visuel-rencontre { filter: saturate(.55); }
  .rencontres__membres { display: flex; gap: var(--e2); align-items: flex-start; margin-top: var(--e7); color: var(--discret); font-size: var(--taille-petite); }
  .rencontres__membres .icone { width: 16px; height: 16px; margin-top: 2px; }
  .rencontres__membres a { color: var(--encre); font-weight: 500; }
  .vide--rencontres { margin-top: var(--e5); }
  .vide--rencontres > .icone { width: 28px; height: 28px; }
  .vide__titre-rencontres { color: var(--encre); font-family: var(--police-titre); font-size: var(--titre-section); line-height: 1.2; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .vide--rencontres .bouton { margin-top: var(--e2); }

  /* Vignettes */
  .cartes-rencontres { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6) var(--e5); }
  @media (width >= 641px) { .cartes-rencontres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width >= 1024px) { .cartes-rencontres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .carte-rencontre { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--filet-appuye); }
  .carte-rencontre__visuel { overflow: hidden; border-radius: var(--rayon-surface); }
  .carte-rencontre__visuel .visuel-rencontre { transition: scale var(--duree-lente) var(--courbe); }
  .carte-rencontre__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); align-content: start; min-width: 0; }
  .carte-rencontre__acces { display: flex; gap: 6px; align-items: center; color: var(--texte); font-size: var(--taille-xs); font-weight: 500; letter-spacing: .02em; }
  .carte-rencontre__acces .icone { width: 14px; height: 14px; }
  .carte-rencontre__titre { font-size: 1.375rem; line-height: 1.2; }
  .carte-rencontre__titre a { color: var(--encre); text-decoration: none; }
  /* Toute la carte mène à la fiche, par le seul lien du titre ; le bouton d’action reste au-dessus. */
  .carte-rencontre__titre a::after { content: ""; position: absolute; z-index: 1; inset: 0; }
  .carte-rencontre__titre a:focus-visible { outline: none; }
  .carte-rencontre:has(.carte-rencontre__titre a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--rayon-surface); }
  .carte-rencontre:hover .carte-rencontre__titre a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
  .carte-rencontre:hover .carte-rencontre__visuel .visuel-rencontre { scale: 1.025; }
  .carte-rencontre__quand, .carte-rencontre__lieu { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texte); font-size: var(--taille-petite); }
  .carte-rencontre__quand .icone, .carte-rencontre__lieu .icone { width: 16px; height: 16px; margin-top: 2px; color: var(--discret); }
  .carte-rencontre__pied { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; padding-top: var(--e4); border-top: 1px solid var(--filet); }
  .carte-rencontre__places { color: var(--texte); font-size: var(--taille-petite); }
  .carte-rencontre__places--attention { color: var(--attention); font-weight: 500; }
  .carte-rencontre__places--inscrit { color: var(--succes); font-weight: 500; }
  .carte-rencontre__action { position: relative; z-index: 2; }
  .carte-rencontre__action .icone { width: 16px; height: 16px; }

  /* Bloc du fil de l’espace : les vignettes, en plus serré */
  .fil-rencontres .cartes-rencontres { gap: var(--e5); }
  .fil-rencontres__vide { padding: var(--e5) 0; border-block: 1px solid var(--filet); color: var(--discret); }
  @media (width >= 1024px) and (width < 1280px) { .cartes-rencontres--fil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ------------------------------------------------------------------ Vue calendrier (agenda.js) */
  .agenda { margin-top: var(--e5); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--fond); }
  .agenda__entete { display: grid; gap: var(--e4); padding: var(--e5); border-bottom: 1px solid var(--filet); }
  .agenda__intitule { display: flex; gap: var(--e2); align-items: center; color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: var(--approche-libelle); text-transform: uppercase; }
  .agenda__intitule .icone { width: 16px; height: 16px; }
  .agenda__titre { font-size: var(--titre-page); }
  .agenda__sous-titre { color: var(--discret); font-size: var(--taille-petite); }
  .agenda__commandes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; }
  .agenda__navigation { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .agenda__navigation .bouton { min-width: var(--hauteur-controle); }
  .agenda__navigation .bouton .icone { width: 18px; height: 18px; }
  .agenda__corps { padding: 0; }
  .agenda__grille { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--taille-petite); }
  .agenda__grille abbr { text-decoration: none; }
  .agenda__grille th { padding: var(--e2); border-bottom: 1px solid var(--filet); color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
  .agenda__grille td { height: 7.5rem; padding: var(--e1) var(--e1) var(--e2); border: 1px solid var(--filet); vertical-align: top; }
  .agenda__grille tr td:first-child { border-left: 0; }
  .agenda__grille tr td:last-child { border-right: 0; }
  .agenda__grille tbody tr:last-child td { border-bottom: 0; }
  .agenda__numero { display: flex; justify-content: flex-end; margin-bottom: var(--e1); }
  .agenda__numero span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; color: var(--texte); font-size: var(--taille-petite); font-weight: 600; font-variant-numeric: tabular-nums; }
  .agenda__jour--hors .agenda__numero span { color: var(--discret); font-weight: 400; }
  .agenda__jour--hors { background: var(--panneau); }
  .agenda__jour--aujourdhui .agenda__numero span { background: var(--encre); color: var(--sur-encre); }
  .agenda__evenements { display: grid; gap: var(--e1); margin: 0; padding: 0; list-style: none; }
  .agenda__evenement { display: grid; gap: 1px; padding: 4px 6px; border-radius: var(--rayon-xs); background: var(--selection); color: var(--encre); font-size: var(--taille-xs); line-height: 1.3; text-decoration: none; }
  .agenda__evenement:hover { background: var(--survol); box-shadow: inset 0 0 0 1px var(--filet-appuye); }
  .agenda__evenement time { color: var(--discret); font-variant-numeric: tabular-nums; }
  .agenda__evenement--complet { box-shadow: inset 3px 0 0 var(--attention); }
  .agenda__evenement--membres { box-shadow: inset 3px 0 0 var(--info); }
  /* Semaine et agenda : une ligne par jour */
  .agenda__jours { display: grid; margin: 0; padding: 0; list-style: none; }
  .agenda__ligne { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e3); padding: var(--e3) var(--e5); border-bottom: 1px solid var(--filet); }
  .agenda__ligne:last-child { border-bottom: 0; }
  .agenda__ligne--aujourdhui { background: var(--panneau); }
  .agenda__date { display: grid; align-content: start; color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .agenda__date strong { color: var(--encre); font-family: var(--police-titre); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; line-height: 1.1; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .agenda__ligne .agenda__evenement { font-size: var(--taille-petite); padding: var(--e2) var(--e3); }
  .agenda__aucun { align-self: center; color: var(--discret); font-size: var(--taille-petite); }
  .agenda__vide { padding: var(--e6) var(--e5); color: var(--discret); }
  @media (width <= 640px) {
    .agenda__entete { padding: var(--e4); }
    .agenda__grille td { height: 4.5rem; padding: 2px; }
    .agenda__grille th { padding: var(--e1); text-align: center; }
    .agenda__numero { justify-content: center; }
    .agenda__numero span { min-width: 24px; height: 24px; font-size: var(--taille-xs); }
    /* Sur un téléphone, le mois montre un repère par rencontre ; le détail est dans la vue « Agenda ». */
    .agenda__grille .agenda__evenement { overflow: hidden; height: 10px; padding: 0; color: transparent; font-size: 0; background: var(--encre); }
    .agenda__ligne { grid-template-columns: 4.5rem minmax(0, 1fr); padding: var(--e3) var(--e4); }
  }

  /* ------------------------------------------------------------------ Fiche d’une rencontre */
  .rencontre__grille { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "entete" "pratique" "visuel" "description"; gap: var(--e6); margin-top: var(--e2); }
  .rencontre__entete { grid-area: entete; display: grid; gap: var(--e3); }
  .rencontre__etiquettes { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; }
  .rencontre__gerer { min-height: 24px; }
  .rencontre__titre { margin-top: var(--e1); overflow-wrap: break-word; }
  .rencontre__date { color: var(--texte); }
  .rencontre__pratique { grid-area: pratique; display: grid; gap: var(--e4); align-content: start; }
  .rencontre__action { display: grid; gap: var(--e3); justify-items: stretch; }
  .rencontre__action > .lien-fleche { justify-self: start; min-height: var(--hauteur-controle); }
  .rencontre__note { color: var(--discret); font-size: var(--taille-petite); }
  .rencontre__agenda .lien-fleche { min-height: var(--hauteur-controle); }
  .rencontre__visuel { grid-area: visuel; margin: 0; }
  .rencontre__image { aspect-ratio: 3 / 2; max-height: 620px; }
  .rencontre__description { grid-area: description; font-size: var(--taille-chapeau); line-height: 1.7; }
  @media (width >= 1024px) {
    .rencontre__grille { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-areas: "entete pratique" "visuel pratique" "description pratique"; column-gap: var(--e8); row-gap: var(--e6); align-items: start; }
    .rencontre__pratique { grid-row: 1 / span 3; position: sticky; top: calc(72px + var(--e5)); }
  }
  @media (pointer: coarse) { .rencontre__gerer { min-height: var(--hauteur-controle); } }

  /* ------------------------------------------------------------------ Réserver */
  .reserver__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); margin-top: var(--e2); }
  .reserver__rencontre { display: grid; gap: var(--e3); align-content: start; }
  .reserver__titre { margin-bottom: var(--e2); overflow-wrap: break-word; }
  .reserver__quand { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texte); }
  .reserver__quand .icone { width: 18px; height: 18px; margin-top: 3px; color: var(--discret); }
  .reserver__visuel { margin-top: var(--e3); }
  .reserver__image { aspect-ratio: 3 / 2; }
  @media (width <= 640px) { .reserver__image { aspect-ratio: 16 / 7; } }
  .reserver__carte { display: grid; gap: var(--e4); align-content: start; padding: var(--e5); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--panneau); }
  .reserver__intitule { font-size: 1.625rem; }
  .reserver__chapeau { color: var(--discret); }
  .reserver__tarif { padding: var(--e3) 0; border-block: 1px solid var(--filet); color: var(--texte); font-size: var(--taille-petite); }
  .reserver__tarif strong { font-size: var(--taille); }
  .reserver__formulaire { gap: var(--e4); }
  .reserver__identite { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond); color: var(--texte); font-size: var(--taille-petite); }
  .reserver__identite .icone { width: 18px; height: 18px; margin-top: 1px; color: var(--succes); }
  .reserver__options { display: grid; gap: var(--e2); }
  .reserver__option:not(:has(input:checked)) { background: var(--fond); }
  .reserver__option--indisponible { opacity: .55; cursor: not-allowed; }
  .reserver__invites { display: grid; gap: var(--e4); }
  /* Les noms d’invités suivent le nombre de places choisi (sans JavaScript ; sans :has, tous restent visibles). */
  .reserver__formulaire:has(input[name="places"][value="1"]:checked) .reserver__invite--1,
  .reserver__formulaire:has(input[name="places"][value="1"]:checked) .reserver__invite--2,
  .reserver__formulaire:has(input[name="places"][value="2"]:checked) .reserver__invite--2 { display: none; }
  .reserver__formulaire:has(input[name="places"][value="3"]:checked) .reserver__invite .champ-aide,
  .reserver__formulaire:has(input[name="places"][value="2"]:checked) .reserver__invite--1 .champ-aide { display: none; }
  .reserver__envoyer { margin-top: var(--e1); min-height: 48px; }
  .reserver__mention { display: flex; gap: var(--e2); align-items: flex-start; color: var(--discret); font-size: var(--taille-petite); }
  .reserver__mention .icone { width: 16px; height: 16px; margin-top: 2px; }
  /* Champ piège : jamais affiché, jamais lu ; seul un robot le remplit. */
  .rencontre-piege { display: none !important; }
  @media (width >= 641px) { .reserver__carte { padding: var(--e6); } }
  @media (width >= 1024px) {
    .reserver__grille { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: var(--e8); align-items: start; }
    .reserver__carte { position: sticky; top: calc(72px + var(--e5)); }
  }

  /* ------------------------------------------------------------------ Votre réservation (lien personnel) */
  .reservation-gestion { width: min(100%, calc(var(--largeur-etroite) + 2 * var(--gouttiere))); margin-inline: auto; padding: var(--e5) var(--gouttiere) var(--e8); }
  .reservation-gestion__entete { margin-top: var(--e3); }
  .reservation-gestion__entete h1 { overflow-wrap: break-word; }
  .reservation-gestion__appel { display: grid; gap: var(--e3); margin-bottom: var(--e6); }
  .reservation-gestion > .encadre { margin-bottom: var(--e6); }
  .reservation-gestion__liens { margin-top: var(--e5); }
  .reservation-gestion__annuler { display: grid; gap: var(--e3); justify-items: start; margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--filet); }
  .reservation-gestion__annuler h2 { font-size: var(--titre-petit); }
  .reservation-gestion__annuler p { color: var(--texte); font-size: var(--taille-petite); }
  .reservation-gestion__secret { display: flex; gap: var(--e2); align-items: flex-start; margin-top: var(--e7); color: var(--discret); font-size: var(--taille-xs); }
  .reservation-gestion__secret .icone { width: 14px; height: 14px; margin-top: 2px; }
  .rencontre-introuvable { padding-block: var(--e8); }

  /* ------------------------------------------------------------------ Mes inscriptions */
  .inscriptions__entete { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); align-items: end; justify-content: space-between; margin-bottom: var(--e6); }
  .inscriptions__entete > .entete-page { margin-bottom: 0; }
  .inscriptions { margin-top: var(--e6); }
  .inscriptions__titre { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); align-items: baseline; padding-bottom: var(--e3); border-bottom: 1px solid var(--filet-appuye); }
  .inscriptions > .vide { border-top: 0; }
  .inscription { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e3) var(--e4); padding: var(--e5) 0; border-bottom: 1px solid var(--filet); scroll-margin-top: calc(var(--hauteur-barre) + var(--e4)); }
  .inscription:target { background: linear-gradient(90deg, var(--panneau), transparent 70%); }
  .inscription__date { display: grid; align-self: start; align-content: start; justify-items: center; gap: 2px; padding: var(--e2) var(--e1); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--panneau); color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
  .inscription__jour { color: var(--encre); font-family: var(--police-titre); font-size: 1.875rem; font-weight: 400; letter-spacing: 0; line-height: 1; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .inscription__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); align-content: start; min-width: 0; }
  .inscription__etats { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .inscription__titre { font-size: var(--titre-petit); line-height: 1.25; }
  .inscription__titre a { color: var(--encre); text-decoration: none; }
  .inscription__titre a:hover { text-decoration: underline; }
  .inscription__meta, .inscription__note { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texte); font-size: var(--taille-petite); }
  .inscription__meta .icone, .inscription__note .icone { width: 16px; height: 16px; margin-top: 2px; color: var(--discret); }
  .inscription__note { margin-top: var(--e1); color: var(--discret); }
  .inscription__note--attention, .inscription__note--attention .icone { color: var(--attention); }
  .inscription__note--succes, .inscription__note--succes .icone { color: var(--succes); }
  .inscription__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .inscription__actions form { display: contents; }
  @media (width >= 641px) { .inscription__actions { grid-column: 2; } }
  @media (width >= 1024px) {
    .inscription { grid-template-columns: 5rem minmax(0, 1fr) auto; }
    .inscription__actions { grid-column: 3; flex-direction: column; align-items: stretch; min-width: 13.5rem; }
    .inscription__actions .bouton { justify-content: flex-start; }
  }
  .inscription--passee { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--e3) 0; }
  @media (width >= 1024px) { .inscription--passee { grid-template-columns: minmax(0, 1fr) auto; } }
  .inscription--passee .inscription__titre { font-size: var(--taille); font-family: var(--police); font-weight: 500; -webkit-text-stroke: 0; }

  /* ------------------------------------------------------------------ Administration : liste */
  .rencontres-admin__entete { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); align-items: end; justify-content: space-between; margin-bottom: var(--e5); }
  .rencontres-admin__entete > .entete-page { margin-bottom: 0; }
  .rencontres-admin__outils { display: grid; gap: var(--e4); margin-bottom: var(--e2); }
  .rencontres-admin__nombre { min-width: 1.75em; margin-left: var(--e2); padding: 0 6px; border-radius: 999px; background: var(--panneau); color: var(--discret); font-size: var(--taille-xs); font-variant-numeric: tabular-nums; line-height: 20px; text-align: center; }
  .puces a[aria-current] .rencontres-admin__nombre { background: var(--sur-encre); color: var(--encre); }
  .cartes-rencontres-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--e7) var(--e5); margin-top: var(--e5); }
  .carte-admin-rencontre { position: relative; display: grid; grid-template-rows: auto auto auto auto auto 1fr auto auto; gap: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--encre); }
  .carte-admin-rencontre__tete { display: flex; gap: var(--e3); align-items: center; justify-content: space-between; }
  .carte-admin-rencontre__date time { display: flex; gap: var(--e2); align-items: baseline; color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .carte-admin-rencontre__jour { color: var(--encre); font-family: var(--police-titre); font-size: 2.5rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .carte-admin-rencontre__visuel { overflow: hidden; border-radius: var(--rayon-surface); }
  .carte-admin-rencontre__titre { font-size: 1.25rem; line-height: 1.25; }
  .carte-admin-rencontre__titre a { color: var(--encre); text-decoration: none; }
  .carte-admin-rencontre__titre a:hover { text-decoration: underline; }
  .carte-admin-rencontre__meta { color: var(--texte); font-size: var(--taille-petite); }
  .carte-admin-rencontre__chiffres { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--filet); }
  .carte-admin-rencontre__chiffres dt { color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .carte-admin-rencontre__chiffres dd { color: var(--encre); font-variant-numeric: tabular-nums; }
  .carte-admin-rencontre__etat { display: flex; gap: var(--e2); align-items: flex-start; color: var(--discret); font-size: var(--taille-petite); }
  .carte-admin-rencontre__etat .icone { width: 16px; height: 16px; margin-top: 2px; }
  .carte-admin-rencontre__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .carte-admin-rencontre--annulee .visuel-rencontre { filter: grayscale(1); opacity: .7; }
  .carte-admin-rencontre--annulee .carte-admin-rencontre__titre a { text-decoration: line-through; text-decoration-color: var(--filet-appuye); }
  .rencontres-admin__introuvable { max-width: var(--largeur-etroite); padding-block: var(--e6); }

  /* ------------------------------------------------------------------ Administration : formulaire */
  .formulaire-rencontre { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); margin-top: var(--e5); }
  .formulaire-rencontre__principal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); align-content: start; min-width: 0; }
  .formulaire-rencontre__titre input { min-height: 56px; font-family: var(--police-titre); font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); letter-spacing: var(--approche-section); }
  .formulaire-rencontre__moments { padding: var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon-surface); }
  .formulaire-rencontre__moments > legend { padding: 0 var(--e2); margin-left: calc(-1 * var(--e2)); }
  .formulaire-rencontre__grille-moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e3); align-items: start; margin-top: var(--e2); }
  /* Jour et heure côte à côte : libellés, aides, champs et erreurs s’alignent d’une colonne à l’autre. */
  @supports (grid-template-rows: subgrid) {
    .formulaire-rencontre__grille-moments { row-gap: 0; }
    .formulaire-rencontre__grille-moments > .champ { grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; }
    .formulaire-rencontre__grille-moments > .champ:nth-child(n + 3) { margin-top: var(--e4); }
    .formulaire-rencontre__grille-moments > .champ > label { grid-row: 1; }
    .formulaire-rencontre__grille-moments > .champ > .champ-aide { grid-row: 2; }
    .formulaire-rencontre__grille-moments > .champ > input { grid-row: 3; }
    .formulaire-rencontre__grille-moments > .champ > .champ-erreur { grid-row: 4; }
  }
  .formulaire-rencontre__fuseau { margin-left: var(--e2); color: var(--discret); font-size: var(--taille-xs); font-weight: 400; }
  .formulaire-rencontre__moments .champ { align-content: start; }
  .formulaire-rencontre__section { display: grid; gap: var(--e4); padding-top: var(--e5); border-top: 1px solid var(--filet-appuye); }
  .formulaire-rencontre__section > h2, .formulaire-rencontre__cote > h2 { font-size: var(--titre-section); }
  .formulaire-rencontre__image { display: grid; gap: var(--e4); }
  .formulaire-rencontre__apercu .visuel-rencontre { aspect-ratio: 3 / 2; }
  .formulaire-rencontre__champs-image { display: grid; gap: var(--e4); align-content: start; min-width: 0; }
  .formulaire-rencontre__etat-image { display: flex; gap: var(--e2); align-items: flex-start; color: var(--discret); font-size: var(--taille-petite); }
  .formulaire-rencontre__etat-image .icone { width: 16px; height: 16px; margin-top: 2px; }
  @media (width >= 641px) { .formulaire-rencontre__image { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; } }
  .formulaire-rencontre__cote { display: grid; gap: var(--e4); align-content: start; min-width: 0; padding: var(--e5); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--panneau); }
  .formulaire-rencontre__options { display: grid; gap: var(--e2); }
  .formulaire-rencontre__options .option:not(:has(input:checked)) { background: var(--fond); }
  .formulaire-rencontre__paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; }
  .formulaire-rencontre__adresse { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; font-size: var(--taille-petite); }
  .formulaire-rencontre__adresse .icone { width: 12px; height: 12px; }
  .formulaire-rencontre__actions { display: grid; gap: var(--e2); padding-top: var(--e1); }
  .formulaire-rencontre__autres { display: grid; gap: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--filet); }
  .formulaire-rencontre__autres .lien-fleche { justify-self: center; min-height: var(--hauteur-controle); }
  @media (width >= 1024px) {
    .formulaire-rencontre { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--e7); align-items: start; }
    .formulaire-rencontre__cote { position: sticky; top: calc(var(--hauteur-barre) + var(--e4)); max-height: calc(100dvh - var(--hauteur-barre) - 2 * var(--e4)); overflow-y: auto; overscroll-behavior: contain; }
  }

  /* ------------------------------------------------------------------ Administration : participants */
  .participants__resume { display: grid; gap: var(--e4); margin-bottom: var(--e6); padding: var(--e5); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--panneau); }
  .participants__jauge { display: grid; gap: var(--e2); }
  .participants__chiffre { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); align-items: baseline; font-size: var(--titre-page); }
  .participants__chiffre span { color: var(--texte); font-family: var(--police); font-size: var(--taille); letter-spacing: 0; -webkit-text-stroke: 0; }
  .participants__jauge meter { width: 100%; max-width: 480px; height: 10px; border: 0; border-radius: 999px; background: var(--selection); }
  .participants__jauge meter::-webkit-meter-bar { height: 10px; border: 0; border-radius: 999px; background: var(--selection); }
  .participants__jauge meter::-webkit-meter-optimum-value, .participants__jauge meter::-webkit-meter-suboptimum-value, .participants__jauge meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--encre); }
  .participants__jauge meter::-moz-meter-bar { border-radius: 999px; background: var(--encre); }
  .participants__actions { padding-top: var(--e2); border-top: 1px solid var(--filet); }
  @media (width >= 1024px) { .participants__resume { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .participants__actions { grid-column: 1 / -1; } }
  .participants__section { margin-top: var(--e6); }
  .participants__section > h2, .participants__autres > summary h2 { display: inline-flex; flex-wrap: wrap; gap: var(--e1) var(--e3); align-items: baseline; margin-bottom: var(--e3); }
  .participants__section > .discret { margin-bottom: var(--e3); }
  .participants__section > .vide { padding: var(--e4) 0; }
  .participants__autres > summary { display: flex; align-items: center; gap: var(--e2); min-height: var(--hauteur-controle); list-style: none; cursor: pointer; }
  .participants__autres > summary::-webkit-details-marker { display: none; }
  .participants__autres > summary::before { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--discret); border-bottom: 1.5px solid var(--discret); rotate: -45deg; transition: rotate var(--duree) var(--courbe); }
  .participants__autres[open] > summary::before { rotate: 45deg; }
  .participants__autres > summary h2 { margin-bottom: 0; }
  .participants__tableau tbody th { padding: var(--e3); border-bottom: 1px solid var(--filet); color: var(--texte); font-size: var(--taille-petite); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: top; }
  .participants__personne { display: grid; gap: 2px; min-width: 12rem; text-align: left; }
  .participants__nom { color: var(--encre); font-size: var(--taille); font-weight: 500; letter-spacing: 0; text-transform: none; }
  .participants__email { color: var(--texte); font-size: var(--taille-petite); font-weight: 400; letter-spacing: 0; text-transform: none; }
  .participants__compte { color: var(--discret); font-size: var(--taille-xs); font-weight: 500; letter-spacing: .04em; }
  .participants__tableau td { min-width: 7rem; }
  .participants__invites, .participants__detail { display: block; margin-top: 2px; color: var(--discret); font-size: var(--taille-xs); }
  .participants__tableau .pastille { margin-top: 2px; }

  /* ------------------------------------------------------------------ Administration : annulation */
  .annulation-rencontre { display: grid; gap: var(--e5); max-width: var(--largeur-etroite); padding: var(--e5); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--filet)); border-radius: var(--rayon-surface); background: var(--panneau); }
  .annulation-rencontre__avertissement { display: flex; gap: var(--e4); align-items: flex-start; }
  .annulation-rencontre__avertissement h2 { font-size: var(--titre-section); }
  .annulation-rencontre__avertissement p { margin-top: var(--e1); color: var(--texte); }
  .annulation-rencontre__icone { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--danger-doux); color: var(--danger); }
  .annulation-rencontre__icone .icone { width: 22px; height: 22px; }
  .annulation-rencontre__chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e2); margin: 0; padding: 0; list-style: none; }
  .annulation-rencontre__chiffres li { display: grid; gap: var(--e1); padding: var(--e3) var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond); color: var(--texte); font-size: var(--taille-petite); }
  .annulation-rencontre__nombre { color: var(--encre); font-family: var(--police-titre); font-size: 1.875rem; line-height: 1; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .annulation-rencontre__formulaire { gap: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--filet); }
}