/* G4G — COUCHE COMMUNAUTE (app-communaute.css)
 *
 * Extrait de base.css lors de la preparation a la parallelisation
 * (chore/prep-parallelisation, cf. docs/dev-parallele.md). AUCUNE regle n'a ete
 * modifiee : ce fichier ne contient que des blocs DEPLACES verbatim depuis
 * base.css. Charge par templates/base.html JUSTE APRES base.css et AVANT
 * app-repertoire.css / sections.css — l'ordre de cascade d'origine est preserve.
 *
 * PROPRIETAIRE : chantier COMMUNAUTE (feed / messaging / notifications /
 * sectors / profiles / events / interactions). Domaines couverts ci-dessous :
 * notifications (centre + cloche), fil communautaire (publications, reactions,
 * commentaires, composeur, sondage, completion de profil), profil membre,
 * espaces thematiques, messagerie, assistant d'accueil (onboarding).
 */


/* ═══════════════════════════════════════════════════════════════════════════
 * NOTIFICATIONS — maquette « G4G Notifications ».
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-notif-bucket { margin-bottom: var(--g4g-space-6); }
.g4g-notif-bucket__title {
  margin: 0 0 var(--g4g-space-2);
  font-size: var(--g4g-text-xs);
  /* Eyebrow de seau temporel : la maquette le pose en gras (700). */
  font-weight: var(--g4g-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--g4g-tracking-caps);
  color: var(--g4g-text-subtle);
}
.g4g-notifs { list-style: none; margin: 0; padding: 0; }
/* Carte de seau : la maquette Notifications arrondit à 12px (radius-md), au-delà
 * du rayon de carte système (10px). Scopé aux notifs, sans toucher .g4g-card. */
.g4g-notifs.g4g-card { border-radius: var(--g4g-radius-md); }

.g4g-notif { border-radius: var(--g4g-radius-sm); }
.g4g-notif + .g4g-notif { border-top: 1px solid var(--g4g-border); }
.g4g-notif--unread { background: var(--g4g-primary-tint); }
/* Toute la ligne est cliquable (deep-link + marquage-lu par item) : le LIEN porte
 * la mise en page (flex + padding) ; le <li> garde la teinte non-lu et le filet. */
.g4g-notif__link {
  display: flex;
  align-items: flex-start;
  gap: var(--g4g-space-3);
  padding: var(--g4g-space-3);
  border-radius: var(--g4g-radius-sm);
  text-decoration: none;
  color: inherit;
}
.g4g-notif__link:hover { background: var(--g4g-surface-sunken); }
.g4g-notif__link:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: -2px; }

/* Pastille colorée. La correspondance type→couleur est décidée par
 * `notifications/presentation.py` ; ici on ne fait que la peindre, via une
 * CLASSE par type. Un style inline aurait obligé la CSP à tolérer
 * `style-src 'unsafe-inline'` — donc à accepter TOUT style injecté. */
.g4g-notif__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--g4g-radius-pill);
  /* Halo teinté par TYPE : color-mix du token `--notif-color` ; repli gris si le
   * navigateur ne connaît pas color-mix (2 déclarations, la 2e écrase quand elle
   * est comprise). Aucune valeur en dur — que des tokens. */
  background: var(--g4g-surface-sunken);
  background: color-mix(in srgb, var(--notif-color, var(--g4g-text-muted)) 15%, transparent);
  color: var(--notif-color, var(--g4g-text-muted));
}
/* Glyphe de type (rangée sans acteur) : la maquette le rend à 19px alors que le
 * gabarit pose l'attribut size=16 ; on force le rendu CSS à la taille maquette. */
.g4g-notif__badge svg { width: 19px; height: 19px; }
/* Initiales du déclencheur (quand acteur) — même teinte que l'icône. */
.g4g-notif__initials { font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); }
/* Pastille rouge « non-lus » dans le H1 des notifications. */
.g4g-notif-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 var(--g4g-space-2); border-radius: var(--g4g-radius-pill); background: var(--g4g-danger); color: var(--g4g-primary-contrast); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); vertical-align: middle; }
/* Une classe par `NotificationType` — miroir de PRESENTATION dans
 * `notifications/presentation.py`. Un type sans règle ici retombe sur
 * `--g4g-text-muted` (le repli du `var()` ci-dessus) : jamais de pastille nue. */
.g4g-notif--reaction { --notif-color: var(--g4g-danger); }
.g4g-notif--comment { --notif-color: var(--g4g-prosperity); }
.g4g-notif--mention { --notif-color: var(--g4g-accent); }
.g4g-notif--connection_request,
.g4g-notif--connection_accepted,
.g4g-notif--new_follower { --notif-color: var(--g4g-primary); }
.g4g-notif--message,
.g4g-notif--sector_announcement,
.g4g-notif--digest { --notif-color: var(--g4g-accent); }
.g4g-notif--review_received,
.g4g-notif--membership_granted { --notif-color: var(--g4g-purpose); }
.g4g-notif--claim_approved,
.g4g-notif--listing_published,
.g4g-notif--content_approved { --notif-color: var(--g4g-success); }
.g4g-notif--claim_rejected,
.g4g-notif--content_removed { --notif-color: var(--g4g-danger); }
/* Mode révision (maquette « G4G Mode revision - etats-et-notification ») : pastilles PLEINES de la
 * maquette — proposée / réponse = bleu doux, acceptée = vert pâle, rejetée = rouge pâle. */
.g4g-notif--revision_suggested,
.g4g-notif--revision_reply,
.g4g-notif--revision_decided { --notif-color: var(--g4g-primary); }
.g4g-notif__badge.g4g-notif--revision_suggested,
.g4g-notif__badge.g4g-notif--revision_reply,
.g4g-notif__badge.g4g-notif--revision_decided { background: var(--g4g-primary-soft); color: var(--g4g-primary); }
.g4g-notif__badge.g4g-notif--revision-accepted { background: var(--g4g-success-tint); color: var(--g4g-success-text); }
.g4g-notif__badge.g4g-notif--revision-rejected { background: var(--g4g-danger-tint); color: var(--g4g-danger); }
.g4g-notif__target { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Interligne resserré (maquette line-height 1.4–1.45 sur texte 12,5–13,5px) :
 * le token snug rapproche les deux viewports de la maquette dans la tolérance. */
.g4g-notif__text { font-size: var(--g4g-text-sm); line-height: var(--g4g-leading-snug); color: var(--g4g-text); }
.g4g-notif__actor { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-notif__time { font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-notif__dot {
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 13px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-accent);
}

/* Panneau de la cloche */
.g4g-bell { position: relative; }
.g4g-bell-panel {
  width: min(360px, calc(100vw - var(--g4g-space-8)));
  padding: var(--g4g-space-2);
  animation: g4g-panel-in 0.22s ease both;
}
.g4g-bell-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--g4g-space-2) var(--g4g-space-3) var(--g4g-space-1);
}
.g4g-bell-panel__title {
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--g4g-tracking-caps);
  color: var(--g4g-text-subtle);
}
.g4g-bell-panel__count { font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-bold); color: var(--g4g-accent); }
.g4g-bell-panel__all {
  display: block;
  padding: var(--g4g-space-3);
  border-top: 1px solid var(--g4g-border);
  color: var(--g4g-primary);
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-semibold);
  text-align: center;
  text-decoration: none;
}
.g4g-bell-panel__all:hover { background: var(--g4g-surface-sunken); }

/* ═══════════════════════════════════════════════════════════════════════════
 * FIL COMMUNAUTAIRE — DIRECTION A (décision imposée n°3).
 *
 * Le FIL est premier dans le DOM (contenu principal → premier lu par un lecteur
 * d'écran et premier affiché sur mobile) mais s'affiche à DROITE du rail sur
 * grand écran. `order` décorrèle l'ordre visuel de l'ordre de lecture : c'est
 * exactement l'usage légitime de la propriété.
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-feed-layout { display: grid; gap: var(--g4g-space-5); }
.g4g-feed-layout__main { min-width: 0; }
/* [QA 2026-09-10] Les rails vivent dans des pistes de grille FIXES (244 / 304 px). Sans
   `min-width:0`, un élément de grille garde `min-width:auto` = la taille min-content de son
   contenu → un nom long débordait à droite et passait PAR-DESSUS le fil central (demande
   Alexandre : chaque colonne garde son espace, sans se marcher dessus). On rend donc le rail
   ET ses cartes rétractables, et on autorise la coupure des mots trop longs. */
.g4g-feed-layout__rail { display: grid; gap: var(--g4g-space-4); align-content: start; min-width: 0; overflow-wrap: anywhere; }
.g4g-feed-layout__rail > * { min-width: 0; }
/* Enfants sans garde d'ellipsis (inline-flex / boutons pleine largeur) : les laisser rétrécir. */
.g4g-my-spaces__item,
.g4g-poll__option { min-width: 0; }
/* Lignes de liste imbriquées (événements à venir, espaces suggérés) : ce sont des éléments de
   grille/flex dont le min-width vaut auto → un nom long (name en white-space:nowrap) débordait
   la piste du rail et provoquait un défilement horizontal de page. min-width:0 → l'ellipsis
   des enfants (déjà présente) peut opérer. */
.g4g-feed-layout__rail .g4g-rail-event,
.g4g-feed-layout__rail .g4g-suggest__item { min-width: 0; }
/* Les listes imbriquées sont des grilles à colonne implicite `auto` (= max-content) : un nom en
   white-space:nowrap la faisait grandir au-delà de la piste du rail. Colonne explicite
   minmax(0,1fr) → la piste ne peut plus dépasser, l'ellipsis des noms opère. */
.g4g-feed-layout__rail .g4g-rail-events__list,
.g4g-feed-layout__rail .g4g-my-spaces__list,
.g4g-feed-layout__rail .g4g-suggest__list { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
  .g4g-feed-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .g4g-feed-layout__rail { order: -1; } /* visuellement à gauche, lu en second */
  .g4g-feed-layout__rail { position: sticky; top: calc(var(--g4g-space-16) + var(--g4g-space-6)); }
  /* 3 colonnes (Lot 6) : rail gauche (carte profil) / fil / rail droit (espaces
   * suggérés + commandite). Le FIL reste 1er dans le DOM (SEO/lecteurs) ; l'ordre
   * CSS le replace au centre. Plus spécifique que les règles 2-col ci-dessus. */
  .g4g-feed-layout--3col { grid-template-columns: 244px minmax(0, 1fr) 304px; }
  .g4g-feed-layout--3col .g4g-feed-layout__main { order: 2; }
  .g4g-feed-layout--3col .g4g-feed-layout__rail--left { order: 1; }
  .g4g-feed-layout--3col .g4g-feed-layout__rail--right { order: 3; }
}
.g4g-profile-card { display: flex; align-items: center; gap: var(--g4g-space-3); }
/* Parité maquette contenu-communaute : avatar 54px sur ACCENT, liseré 3px surface. */
.g4g-profile-card .g4g-avatar { width: 54px; height: 54px; font-size: var(--g4g-text-lg); background: var(--g4g-accent); border: 3px solid var(--g4g-surface); }
.g4g-profile-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g4g-profile-card__name { color: var(--g4g-text); font-weight: var(--g4g-weight-semibold); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-profile-card__name:hover { text-decoration: underline; }
.g4g-profile-card__meta { display: inline-flex; align-items: center; gap: var(--g4g-space-1); font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-profile-card__link { font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); text-decoration: none; }
.g4g-profile-card__link:hover { text-decoration: underline; }
/* Barre de tri du fil (Récents/Populaires). Parité maquette : le segmenté du
 * fil est BLANC bordé (pas la pilule enfoncée ombrée du composant partagé). */
.g4g-feed-sort { margin-bottom: var(--g4g-space-4); background: var(--g4g-surface); border: 1px solid var(--g4g-border); box-shadow: none; }
.g4g-feed-sort .g4g-segmented__item { font-size: var(--g4g-text-xs); }
.g4g-suggest__title { margin: 0 0 var(--g4g-space-3); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
/* Espaces suggérés : icône + compteur + bouton Rejoindre. */
.g4g-suggest__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-3); }
.g4g-suggest__item { display: flex; align-items: center; gap: var(--g4g-space-2); }
.g4g-suggest__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--g4g-space-2); min-height: 44px; color: inherit; text-decoration: none; }
/* Parité maquette : tuile 42px au rayon de carte (pas une pastille pilule). */
.g4g-suggest__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--g4g-radius-card); background: var(--g4g-primary-soft); color: var(--g4g-primary); overflow: hidden; }
/* Couverture d'espace en vignette (remplit la pastille 42×42, coins hérités). */
.g4g-suggest__cover { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.g4g-suggest__body { min-width: 0; }
.g4g-suggest__name { display: block; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-suggest__link:hover .g4g-suggest__name { color: var(--g4g-primary); }
.g4g-suggest__count { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
/* « Rejoindre » = bouton CONTOUR primaire (maquette), pas la pilule neutre --sm. */
.g4g-suggest__join { flex: none; border-color: var(--g4g-primary); color: var(--g4g-primary); font-size: var(--g4g-text-xs); }
/* « Mes espaces » (rail gauche, parité) — titre = kicker uppercase (maquette). */
.g4g-my-spaces__title { margin: 0 0 var(--g4g-space-3); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); text-transform: uppercase; letter-spacing: var(--g4g-tracking-caps); color: var(--g4g-text-subtle); }
.g4g-my-spaces__list { list-style: none; margin: 0 0 var(--g4g-space-2); padding: 0; display: grid; gap: var(--g4g-space-1); }
.g4g-my-spaces__item { display: inline-flex; align-items: center; gap: var(--g4g-space-2); min-height: 40px; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-medium); color: var(--g4g-text); text-decoration: none; }
.g4g-my-spaces__item:hover { color: var(--g4g-primary); }
.g4g-my-spaces__all,
.g4g-rail-events__all { font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); text-decoration: none; }
.g4g-my-spaces__all:hover,
.g4g-rail-events__all:hover { text-decoration: underline; }
/* « Événements à venir » (rail droit, parité) — pastille date + titre + lieu.
 * Maquette : tuile-calendrier BORDÉE (bandeau mois sur primaire, jour dessous),
 * pas un carré teinté. Rayon 8px littéral = valeur maquette (hors échelle tokens). */
.g4g-rail-events__title { margin: 0 0 var(--g4g-space-3); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-rail-events__list { list-style: none; margin: 0 0 var(--g4g-space-2); padding: 0; display: grid; gap: var(--g4g-space-2); }
.g4g-rail-event { display: flex; align-items: flex-start; gap: var(--g4g-space-3); text-decoration: none; color: inherit; }
.g4g-rail-event__date { flex: none; display: flex; flex-direction: column; align-items: stretch; width: 46px; border: 1px solid var(--g4g-border); border-radius: 8px; overflow: hidden; background: transparent; color: var(--g4g-text); text-align: center; line-height: 1; }
.g4g-rail-event__mon { font-size: 10px; font-weight: var(--g4g-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; background: var(--g4g-primary); color: var(--g4g-primary-contrast); padding: 2px 0; }
.g4g-rail-event__day { font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-bold); padding: 2px 0 4px; }
.g4g-rail-event__body { min-width: 0; }
.g4g-rail-event__name { display: block; font-size: var(--g4g-text-xs); line-height: var(--g4g-leading-snug); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-rail-event__meta { display: flex; align-items: center; gap: 3px; font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); }
/* Compteur d'intéressés (maquette : accent) sous le lieu de l'événement. */
.g4g-rail-event__going { display: block; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); }

/* Publications */
.g4g-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-4); }
.g4g-post__head { display: flex; align-items: center; gap: var(--g4g-space-3); margin-bottom: var(--g4g-space-3); }
.g4g-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-semibold);
}
/* Avatar en IMAGE (photo téléversée) : remplit le disque sans déformation. */
.g4g-avatar--img { object-fit: cover; }
/* Parité maquette : l'avatar d'une PUBLICATION est 44px sur ACCENT (scopé à
 * l'en-tête de post — les autres avatars gardent le défaut 38px primaire). */
.g4g-post__head .g4g-avatar { width: 44px; height: 44px; background: var(--g4g-accent); }
/* Menu ⋯ d'une publication (COMM-04) : bouton discret en bout d'en-tête, panneau natif. */
.g4g-post__menu { margin-left: auto; flex: none; }
.g4g-post__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--g4g-radius-pill);
  color: var(--g4g-text-muted);
  cursor: pointer;
}
.g4g-post__menu-btn:hover,
.g4g-post__menu[open] .g4g-post__menu-btn { background: var(--g4g-surface-alt); color: var(--g4g-text); }
.g4g-post__menu-panel { min-width: 190px; }
/* Items rendus en <button> (dans un <form>) : reset pour coller aux items <a> de base. */
.g4g-post__menu-panel .g4g-menu__item { width: 100%; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.g4g-menu__item--danger { color: var(--g4g-danger); }
/* Page d'édition d'une publication (COMM-04). */
.g4g-post-edit { max-width: 640px; margin: 0 auto; }
.g4g-post-edit__title { font-size: var(--g4g-text-xl); margin: 0 0 var(--g4g-space-4); }
.g4g-post-edit__textarea { width: 100%; min-height: 140px; padding: var(--g4g-space-3); border: 1px solid var(--g4g-border-strong); border-radius: var(--g4g-radius-md); font: inherit; color: var(--g4g-text); background: var(--g4g-surface); resize: vertical; }
.g4g-post-edit__textarea:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }
.g4g-post-edit__note { font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); margin: var(--g4g-space-2) 0 0; }
.g4g-post-edit__actions { display: flex; gap: var(--g4g-space-3); margin-top: var(--g4g-space-4); }
.g4g-post__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g4g-post__author { font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-post__meta { font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-post__sector { color: var(--g4g-accent); text-decoration: none; }
/* L'horodatage-permalien reste discret (hérite du gris de la méta), souligné au survol. */
.g4g-post__permalink { color: inherit; text-decoration: none; }
.g4g-post__permalink:hover { text-decoration: underline; }
/* Lien « retour » d'une page de détail (permalien publication, etc.). */
.g4g-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--g4g-space-1);
  color: var(--g4g-primary);
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
}
.g4g-back-link:hover { text-decoration: underline; }
/* Écran evenements-liste : la maquette veut un retour discret (muted 12,5px)
   là où la publication garde le retour primaire. Scopé à l'en-tête d'action de
   la liste d'événements pour ne pas régresser .g4g-back-link ailleurs. */
.g4g-page-head--action .g4g-back-link {
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-xs);
}
.g4g-post__content { margin: 0; font-size: var(--g4g-text-sm); color: var(--g4g-text); }

/* Médias : dimensions réservées (zéro CLS). Une photo = pleine largeur 210px ;
 * plusieurs = grille 2 colonnes. */
.g4g-post__media { margin-top: var(--g4g-space-3); border-radius: var(--g4g-radius-sm); overflow: hidden; }
.g4g-post__media--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.g4g-post__photo { display: block; width: 100%; height: 210px; object-fit: cover; background: var(--g4g-surface-alt); }
.g4g-post__media--grid .g4g-post__photo { height: 150px; }

/* ODD facultatifs et SECONDAIRES : rangée discrète de pastilles sm, sous le
 * contenu. Purement décoratif — n'entre pas en concurrence avec le contenu. */
.g4g-post__sdgs {
  list-style: none;
  margin: var(--g4g-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--g4g-space-2);
}

.g4g-post__actions {
  display: flex;
  align-items: center;
  gap: var(--g4g-space-4);
  margin-top: var(--g4g-space-3);
  padding-top: var(--g4g-space-3);
  border-top: 1px solid var(--g4g-border);
}
.g4g-post__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--g4g-space-1);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted);
  text-decoration: none;
}
.g4g-post__stat--share { margin-left: auto; }

/* Bouton de réaction (cœur) — maquette : cœur vide muted, cœur rempli danger
 * quand l'acteur a réagi. La couleur SEULE ne porte pas l'état : le remplissage
 * (fill) le double, et `aria-pressed` l'annonce. Cible tactile ≥ 44px. */
.g4g-react {
  display: inline-flex;
  align-items: center;
  gap: var(--g4g-space-1);
  min-height: 44px;
  padding: 0 var(--g4g-space-2);
  border: none;
  background: transparent;
  color: var(--g4g-text-muted);
  font-family: inherit;
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  cursor: pointer;
  border-radius: var(--g4g-radius-pill);
}
.g4g-react:hover { color: var(--g4g-danger); background: var(--g4g-surface-sunken); }
.g4g-react:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }
.g4g-react--on { color: var(--react, var(--g4g-danger)); }
.g4g-react--on .g4g-react__icon { fill: var(--react, var(--g4g-danger)); }

/* ── Sélecteur de 5 réactions (D-8) ──────────────────────────────────────────
 * Couleur par CLASSE → token existant (jamais de hex ; CSP). Panneau flottant
 * via <details> natif (ouvre au clic, sans JS) ; l'îlot reaction-picker.js
 * n'ajoute que le survol prolongé (desktop) / Échap / clic extérieur.
 * reduced-motion : couvert par le garde-fou global (rien à ajouter ici). */
.g4g-react--like { --react: var(--g4g-danger); }
.g4g-react--inspirant { --react: var(--g4g-warning); }
.g4g-react--bravo { --react: var(--g4g-success); }
.g4g-react--soutien { --react: var(--g4g-accent); }
.g4g-react--triste { --react: var(--g4g-text-muted); }

.g4g-react-picker { position: relative; display: inline-flex; }
.g4g-react-picker > summary { list-style: none; }
.g4g-react-picker > summary::-webkit-details-marker { display: none; }
.g4g-react-picker > summary:hover { color: var(--react, var(--g4g-danger)); }

/* Pilule flottante AU-DESSUS du bouton (surface + ombre du menu, ouverte vers le haut). */
.g4g-react-picker__pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--g4g-space-1));
  z-index: var(--g4g-z-dropdown);
  display: flex;
  gap: var(--g4g-space-1);
  padding: var(--g4g-space-1);
  background: var(--g4g-surface);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-pill);
  box-shadow: var(--g4g-shadow-md);
  animation: g4g-panel-in 0.22s ease both;
}
/* Les 5 options : cible tactile ≥ 44px (WCAG), icône teintée par sa réaction. */
.g4g-react-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--g4g-space-2);
  border: none;
  border-radius: var(--g4g-radius-pill);
  background: transparent;
  color: var(--react, var(--g4g-text-muted));
  cursor: pointer;
}
.g4g-react-opt:hover,
.g4g-react-opt[aria-pressed="true"] { background: var(--g4g-surface-sunken); }
.g4g-react-opt:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }

/* Décompte : mini-pastilles rondes superposées (icône blanche sur fond couleur,
 * chevauchement -6px + liseré de surface pour les détacher). */
.g4g-react-breakdown { display: inline-flex; align-items: center; }
.g4g-react-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: var(--g4g-radius-pill);
  background: var(--react, var(--g4g-border-strong));
  color: var(--g4g-primary-contrast);
  border: 2px solid var(--g4g-surface);
}
.g4g-react-badge .g4g-icon { width: 1em; height: 1em; }
.g4g-react-badge:not(:first-child) { margin-left: -6px; }
/* Contraste « inspirant » : le jaune (#eba900) échoue le 3:1 (WCAG 1.4.11) —
 *  · en GLYPHE sur surface claire (option du panneau, bouton actif) : ~1,9:1 ;
 *  · en glyphe BLANC sur le fond jaune de la pastille breakdown : ~2:1.
 * Partout on force un glyphe FONCÉ (même parti que .g4g-badge--featured). */
.g4g-react-breakdown .g4g-react--inspirant,
.g4g-react-opt.g4g-react--inspirant,
.g4g-react--on.g4g-react--inspirant { color: var(--g4g-text); }
.g4g-react--on.g4g-react--inspirant .g4g-react__icon { fill: var(--g4g-text); }

/* Commentaires — bulle sur surface enfoncée (maquette). */
.g4g-comments { margin-top: var(--g4g-space-3); }
.g4g-comments__more {
  border: none;
  background: transparent;
  padding: var(--g4g-space-1) 0;
  color: var(--g4g-primary);
  font-family: inherit;
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  cursor: pointer;
  text-decoration: none;
}
.g4g-comments__more:hover { color: var(--g4g-primary); text-decoration: underline; }
.g4g-comments__list { list-style: none; margin: var(--g4g-space-2) 0 0; padding: 0; display: grid; gap: var(--g4g-space-2); }
.g4g-comment { display: flex; gap: var(--g4g-space-2); align-items: flex-start; }
/* Détail publication : colonne du commentaire (bulle + actions + réponses). */
.g4g-comment__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--g4g-space-1); }
.g4g-comment__actions { display: flex; align-items: center; gap: var(--g4g-space-2); flex-wrap: wrap; }
.g4g-react--sm { min-height: 32px; font-size: var(--g4g-text-xs); }
/* « Répondre » : résumé d'un <details> révélant le formulaire NATIVEMENT (zéro JS). */
.g4g-comment__reply { width: 100%; }
.g4g-comment__reply-btn { display: inline-flex; align-items: center; gap: var(--g4g-space-1); min-height: 30px; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); cursor: pointer; list-style: none; }
.g4g-comment__reply-btn::-webkit-details-marker { display: none; }
.g4g-comment__reply-btn:hover { color: var(--g4g-primary); }
.g4g-comment-form--reply { width: 100%; margin-top: var(--g4g-space-2); }
.g4g-comment-form--reply .g4g-comment-form__input { flex: 1; }
/* Réponses imbriquées : filet de fil + retrait. */
.g4g-comment__replies { list-style: none; width: 100%; margin: var(--g4g-space-2) 0 0; padding: 0 0 0 var(--g4g-space-4); border-left: 2px solid var(--g4g-border); display: grid; gap: var(--g4g-space-3); }
.g4g-avatar--sm { width: 30px; height: 30px; font-size: var(--g4g-text-xs); }
/* Parité maquette : bulle BLANCHE bordée (le fond enfoncé est porté par la zone
 * commentaires de la carte, pas par la bulle elle-même). */
.g4g-comment__bubble {
  flex: 1;
  min-width: 0;
  padding: var(--g4g-space-2) var(--g4g-space-3);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
}
.g4g-comment__author { display: block; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-comment__text { display: block; font-size: var(--g4g-text-sm); line-height: var(--g4g-leading-snug); color: var(--g4g-text); overflow-wrap: anywhere; }
.g4g-comment__time { display: block; margin-top: 2px; font-size: 10px; color: var(--g4g-text-subtle); }

.g4g-comment-form { display: flex; gap: var(--g4g-space-2); align-items: center; margin-top: var(--g4g-space-3); }
.g4g-comment-form__input { min-height: 40px; }

/* Détail publication : commentaires dans leur PROPRE carte (H2 « N commentaires »). */
.g4g-comments-card { margin-top: var(--g4g-space-4); }
.g4g-comments-card__title { margin: 0 0 var(--g4g-space-4); font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
/* Composeur de commentaire en BLOC : <textarea> pleine largeur au-dessus de la
 * liste (le modificateur suit la base → il gagne la cascade à spécificité égale). */
.g4g-comment-form--block { display: block; margin: 0 0 var(--g4g-space-4); }
.g4g-comment-form__area { width: 100%; }
.g4g-comment-form__submit { display: flex; justify-content: flex-end; margin-top: var(--g4g-space-2); }

/* Composeur de publication — maquette : avatar 42px sur fond ACCENT (distinct
 * de l'avatar de post, 38px sur primaire), outils Photo (planet) / Sondage
 * (accent). Les outils restent des `.g4g-btn--ghost` (cible ≥ 44px assurée). */
.g4g-composer { margin-bottom: var(--g4g-space-4); }
.g4g-composer__top { display: flex; gap: var(--g4g-space-3); align-items: flex-start; }
.g4g-composer .g4g-avatar { width: 42px; height: 42px; background: var(--g4g-accent); }
/* Champ en PILULE (décision transverse boutons/champs pilule + maquette). */
.g4g-composer__input { flex: 1; min-height: 44px; resize: vertical; border-radius: var(--g4g-radius-pill); }
.g4g-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g4g-space-3);
  margin-top: var(--g4g-space-3);
  flex-wrap: wrap;
}
.g4g-composer__tools { display: flex; gap: var(--g4g-space-2); flex-wrap: wrap; }
/* Parité maquette : les outils sont des boutons FANTÔMES (fond transparent,
 * libellé muted) — `.g4g-btn--sm`, déclaré APRÈS `--ghost` dans base.css, les
 * repeignait en pilules blanches bordées. Scopé au composeur, couche communauté. */
.g4g-composer__tool { background: transparent; border-color: transparent; color: var(--g4g-text-muted); }
.g4g-composer__tool:hover { background: var(--g4g-surface-sunken); border-color: transparent; color: var(--g4g-text); }
/* « Publier » : PLEIN primaire (maquette) — même correctif de cascade que les
 * outils (`--sm` écrasait `--primary`). */
.g4g-composer__actions .g4g-btn--primary { background: var(--g4g-primary); border-color: transparent; color: var(--g4g-primary-contrast); }
.g4g-composer__actions .g4g-btn--primary:hover { background: var(--g4g-primary-hover); color: var(--g4g-primary-contrast); }
/* Les icônes d'outils gardent leur couleur identitaire même désactivées : c'est
 * ce qui signale la nature de chaque action (maquette). */
.g4g-composer__tool-icon--photo { color: var(--g4g-planet); }
.g4g-composer__tool-icon--poll { color: var(--g4g-accent); }
.g4g-composer__tool[aria-disabled="true"] { opacity: 0.55; cursor: default; }
/* ODD facultatifs : section repliée par défaut, discrète. Le résumé emprunte le
 * style d'outil fantôme (.g4g-composer__tool) — on retire seulement le triangle
 * natif de <summary> et on aère la grille une fois dépliée. */
.g4g-composer__odd { margin-top: var(--g4g-space-2); }
.g4g-composer__odd summary { width: fit-content; cursor: pointer; list-style: none; }
.g4g-composer__odd summary::-webkit-details-marker { display: none; }
.g4g-composer__odd .g4g-sdg-grid { margin-top: var(--g4g-space-3); }

/* Widget « sondage citoyen » */
.g4g-poll__kicker {
  display: flex;
  align-items: center;
  gap: var(--g4g-space-1);
  margin: 0 0 var(--g4g-space-2);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--g4g-tracking-caps);
  color: var(--g4g-accent);
}
.g4g-poll__question { margin: 0 0 var(--g4g-space-4); font-size: var(--g4g-text-base); line-height: var(--g4g-leading-snug); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-poll__options { display: grid; gap: var(--g4g-space-2); }
/* Parité maquette : option = pilule BLANCHE au contour neutre fort, libellé
 * texte (pas le bouton secondaire au contour primaire). */
.g4g-poll__option { width: 100%; justify-content: flex-start; text-align: left; background: var(--g4g-surface); border-color: var(--g4g-border-strong); color: var(--g4g-text); font-size: var(--g4g-text-xs); }
.g4g-poll__hint { margin: var(--g4g-space-3) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
/* Aperçu anonyme : les choix sont montrés (ça donne envie de participer) mais
 * ne sont pas cliquables — le vote est nominatif. */
.g4g-poll__preview {
  list-style: none;
  margin: 0 0 var(--g4g-space-4);
  padding: 0;
  display: grid;
  gap: var(--g4g-space-2);
}
.g4g-poll__preview li {
  padding: var(--g4g-space-2) var(--g4g-space-3);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface-sunken);
  font-size: var(--g4g-text-sm);
  color: var(--g4g-text-muted);
}
.g4g-poll__cta { width: 100%; }
.g4g-poll__results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-3); }
.g4g-poll__result-head { display: flex; justify-content: space-between; gap: var(--g4g-space-3); margin-bottom: var(--g4g-space-1); }
.g4g-poll__result-label { font-size: var(--g4g-text-sm); color: var(--g4g-text); }
.g4g-poll__result-pct { font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-bold); color: var(--g4g-accent); font-variant-numeric: tabular-nums; }
.g4g-poll__total { margin: var(--g4g-space-4) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }

/* Widget « complétion du profil » */
.g4g-completion__title { margin: 0 0 var(--g4g-space-3); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-completion__row { display: flex; align-items: center; gap: var(--g4g-space-3); margin-bottom: var(--g4g-space-4); }
.g4g-completion__pct { font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-bold); color: var(--g4g-accent); font-variant-numeric: tabular-nums; }
.g4g-completion__cta { width: 100%; }

/* Barres de progression (`<meter>` natif : porte la valeur pour les
 * technologies d'assistance ; on ne réhabille que l'apparence). Les sélecteurs
 * ::-webkit-* et ::-moz-* sont nécessaires — aucun navigateur ne partage la
 * même anatomie interne pour <meter>. */
.g4g-poll__bar,
.g4g-completion__bar {
  width: 100%;
  height: 8px;
  flex: 1;
  border: none;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface-sunken);
  appearance: none;
}
.g4g-poll__bar::-webkit-meter-bar,
.g4g-completion__bar::-webkit-meter-bar {
  border: none;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface-sunken);
  height: 8px;
}
.g4g-poll__bar::-webkit-meter-optimum-value,
.g4g-completion__bar::-webkit-meter-optimum-value {
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-accent);
}
.g4g-poll__bar::-moz-meter-bar,
.g4g-completion__bar::-moz-meter-bar {
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PROFIL MEMBRE — maquette « G4G Profil membre ».
 * ═══════════════════════════════════════════════════════════════════════════ */
/* Profil = bande d'en-tête BLANCHE (couverture + identité) puis contenu GRIS,
 * fidèle à la maquette « contenu-profil » (wrapper surface + zone contenu
 * surface-alt). gap:0 → l'en-tête blanc rejoint le contenu gris sans strie. */
.g4g-profile { display: grid; gap: 0; background: var(--g4g-surface); }
.g4g-profile__section-title { margin: 0 0 var(--g4g-space-4); font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* Couverture + avatar accent chevauchant (position absolue, hors du flux — la
 * couverture porte overflow:hidden, l'avatar déborde donc via le HERO parent). */
.g4g-profile__hero { position: relative; }
.g4g-profile__cover { position: relative; height: 172px; border-radius: var(--g4g-radius-md); overflow: hidden; margin: var(--g4g-space-4) var(--g4g-space-6) 0; }
.g4g-profile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-profile__cover--empty { background: linear-gradient(120deg, var(--g4g-primary), var(--g4g-accent)); }
.g4g-profile__cover-edit {
  position: absolute; top: var(--g4g-space-3); right: var(--g4g-space-4);
  display: inline-flex; align-items: center; gap: var(--g4g-space-2);
  min-height: 36px; padding: var(--g4g-space-2) var(--g4g-space-3);
  border: none; border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface); color: var(--g4g-text);
  font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold);
  text-decoration: none; box-shadow: var(--g4g-shadow-sm);
}
.g4g-profile__cover-edit:hover { color: var(--g4g-primary); }
.g4g-profile__avatar {
  position: absolute; left: calc(var(--g4g-space-6) + var(--g4g-space-4)); bottom: calc(-1 * var(--g4g-space-10)); z-index: 2;
  width: 104px; height: 104px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-accent); color: var(--g4g-primary-contrast);
  font-size: var(--g4g-text-3xl); font-weight: var(--g4g-weight-semibold);
  border: 4px solid var(--g4g-surface); box-shadow: var(--g4g-shadow-md);
}
.g4g-profile__avatar--img { object-fit: cover; }

/* Bloc identité : padding-top pour dégager l'avatar débordant (40 px). */
.g4g-profile__identity { padding: calc(var(--g4g-space-10) + var(--g4g-space-3)) var(--g4g-space-6) var(--g4g-space-5); }
.g4g-profile__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--g4g-space-2); margin-bottom: var(--g4g-space-2); }
.g4g-profile__name { margin: 0; font-size: var(--g4g-text-2xl); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); letter-spacing: -0.01em; }
/* Accroche : phrase perso discrète sous le nom (parité tonale avec les métas). */
.g4g-profile__tagline { margin: var(--g4g-space-1) 0 0; font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }
/* Métas en xs (12,5) + text-subtle (WCAG) — parité maquette contenu-profil. */
.g4g-profile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g4g-space-4); margin: var(--g4g-space-2) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-profile__meta > span { display: inline-flex; align-items: center; gap: var(--g4g-space-1); }
.g4g-profile__counts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g4g-space-5); margin: var(--g4g-space-4) 0 0; padding: 0; font-size: var(--g4g-text-sm); color: var(--g4g-text-subtle); }
/* Libellé de compteur en xs (12,5) — parité maquette ; le nombre reste en md. */
.g4g-profile__counts li { display: inline-flex; align-items: baseline; gap: var(--g4g-space-1); font-size: var(--g4g-text-xs); }
.g4g-profile__counts strong { color: var(--g4g-primary); font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-bold); }

/* Corps : bande GRISE (surface-alt) pleine largeur sous l'en-tête blanc, avec
 * cartes blanches — parité maquette. Contenu + rail droit 320px (≥900px). */
.g4g-profile__body { background: var(--g4g-surface-alt); padding: var(--g4g-space-5) var(--g4g-space-6) var(--g4g-space-6); }
.g4g-profile__body--rail { display: grid; gap: var(--g4g-space-5); }
.g4g-profile__main { min-width: 0; }
.g4g-profile__rail { display: grid; gap: var(--g4g-space-4); align-content: start; }
@media (min-width: 900px) {
  .g4g-profile__body--rail { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/* Onglet Espaces : grille de cartes cliquables (icône + nom + compteur). */
.g4g-profile__spaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--g4g-space-3); }
.g4g-profile__space { display: flex; align-items: center; gap: var(--g4g-space-3); min-height: 44px; padding: var(--g4g-space-3); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); color: inherit; text-decoration: none; }
.g4g-profile__space:hover { border-color: var(--g4g-primary); }
.g4g-profile__space-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); }
.g4g-profile__space-body { flex: 1; min-width: 0; }
.g4g-profile__space-name { display: block; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-profile__space-count { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }

/* Complétion — liste de contrôle (rail) ; teinte cochée/à-faire par CLASSE. */
.g4g-completion__checklist { list-style: none; margin: 0 0 var(--g4g-space-4); padding: 0; display: grid; gap: var(--g4g-space-2); }
.g4g-completion__check { display: flex; align-items: center; gap: var(--g4g-space-2); font-size: var(--g4g-text-sm); }
.g4g-completion__check .g4g-icon { flex: none; }
.g4g-completion__check--done { color: var(--g4g-text-subtle); }
.g4g-completion__check--done .g4g-icon { color: var(--g4g-success); }
.g4g-completion__check--todo { color: var(--g4g-text); font-weight: var(--g4g-weight-semibold); }
.g4g-completion__check--todo .g4g-icon { color: var(--g4g-border-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ESPACES THÉMATIQUES — maquette « G4G Page d'espace ».
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-space { display: grid; gap: var(--g4g-space-4); }
/* Fil d'Ariane — miette active de la page d'espace : la maquette la rend en gris
 * texte atténué, plus petite et semi-grasse (le noyau base.css la laisse en
 * --g4g-text/14px/400). Scopé à l'espace via `main:has(.g4g-space)` pour ne pas
 * toucher les autres écrans qui partagent .g4g-breadcrumb. */
main:has(.g4g-space) .g4g-breadcrumb__item[aria-current="page"] {
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
}
/* Couverture d'espace (Lot 6) : Sector.cover + dégradé de repli, en-tête chevauchant. */
.g4g-space__cover { height: 172px; border-radius: var(--g4g-radius-md); overflow: hidden; }
.g4g-space__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-space__cover--empty { background: linear-gradient(120deg, var(--g4g-accent), var(--g4g-primary)); }
.g4g-space__head { margin-top: calc(-1 * var(--g4g-space-6)); position: relative; }
.g4g-space__section-title { margin: 0 0 var(--g4g-space-4); font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* Corps : contenu (onglets) + rail droit 320px (≥900px), mono-colonne sinon. */
.g4g-space__body--rail { display: grid; gap: var(--g4g-space-5); }
.g4g-space__main { min-width: 0; }
.g4g-space__rail { display: grid; gap: var(--g4g-space-4); align-content: start; }
/* Titre de section du rail : maquette en gris texte (pas primaire) — cf. parité espace. */
.g4g-space__rail-title { margin: 0 0 var(--g4g-space-3); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
@media (min-width: 900px) {
  .g4g-space__body--rail { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/* Onglet Membres : cartes (avatar + nom + rôle + bouton Profil). */
.g4g-space__members { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g4g-space__member { display: flex; align-items: center; gap: var(--g4g-space-3); padding: var(--g4g-space-3); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); min-width: 0; }
.g4g-space__member-body { flex: 1; min-width: 0; }
.g4g-space__member-name { display: block; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-space__member-role { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-space__member-cta { flex: none; }

/* Onglet Ressources : cartes cliquables (icône + titre + type). */
.g4g-space__resources { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g4g-space__resource { display: flex; align-items: center; gap: var(--g4g-space-3); min-height: 44px; padding: var(--g4g-space-3); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); color: inherit; text-decoration: none; }
.g4g-space__resource:hover { border-color: var(--g4g-primary); }
.g4g-space__resource-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); }
.g4g-space__resource-body { flex: 1; min-width: 0; }
.g4g-space__resource-title { display: block; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-space__resource-kind { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }

/* Rail de l'espace : animateurs + espaces similaires. */
.g4g-space__animators { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-2); }
.g4g-space__animator { display: flex; align-items: center; gap: var(--g4g-space-2); min-width: 0; }
.g4g-space__animator-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); }
.g4g-space__similar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g4g-space-2); }
.g4g-space__similar-item { display: flex; align-items: center; gap: var(--g4g-space-3); min-height: 44px; color: inherit; text-decoration: none; }
.g4g-space__similar-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); }
.g4g-space__similar-body { min-width: 0; }
.g4g-space__similar-name { display: block; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-space__similar-count { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
/* Onglet « Événements » de la page d'espace : action de création + lien « voir tout ». */
.g4g-space__events-actions { margin: 0 0 var(--g4g-space-4); }
.g4g-space__events-more { margin: var(--g4g-space-4) 0 0; }
/* Bandeau « espace archivé » (lecture seule) — ton informatif, jamais alarmant. */
.g4g-space__archived {
  display: flex;
  align-items: center;
  gap: var(--g4g-space-2);
  margin: var(--g4g-space-3) 0 0;
  padding: var(--g4g-space-3) var(--g4g-space-4);
  border-radius: var(--g4g-radius-md);
  border-left: 3px solid var(--g4g-border-strong);
  background: var(--g4g-surface-sunken);
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-sm);
}
.g4g-space__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g4g-space-4); flex-wrap: wrap; }
.g4g-space__id { flex: 1; min-width: 0; }
.g4g-space__name { margin: 0; font-size: var(--g4g-text-xl); font-weight: var(--g4g-weight-bold); color: var(--g4g-primary); }
.g4g-space__desc { margin: var(--g4g-space-2) 0 0; font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }

/* En-tête du catalogue + bouton staff « Créer un espace ». */
.g4g-spaces-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--g4g-space-4); flex-wrap: wrap; margin-bottom: var(--g4g-space-4); }
.g4g-spaces-head__intro { margin: var(--g4g-space-1) 0 0; max-width: 560px; font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }
.g4g-staff-chip { display: inline-flex; align-items: center; margin-left: var(--g4g-space-1); padding: 2px 7px; border-radius: var(--g4g-radius-pill); background: color-mix(in srgb, var(--g4g-primary-contrast) 20%, transparent); font-size: 10px; font-weight: var(--g4g-weight-bold); letter-spacing: 0.04em; }

.g4g-spaces-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--g4g-space-4); }
/* Carte de découverte : couverture pleine largeur teintée par la couleur d'accent
 * (palette curée → `.g4g-space-card--<slug>` pose --card-accent = jeton ; teinte
 * via color-mix, jamais de hex/inline). Chrome sur la carte, padding sur le corps. */
.g4g-space-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--g4g-border); border-radius: 14px; background: var(--g4g-surface); box-shadow: var(--g4g-shadow-sm); }
.g4g-space-card--ocean { --card-accent: var(--g4g-accent); }
.g4g-space-card--deep { --card-accent: var(--g4g-primary); }
.g4g-space-card--forest { --card-accent: var(--g4g-prosperity); }
.g4g-space-card--amber { --card-accent: var(--g4g-purpose); }
.g4g-space-card--crimson { --card-accent: var(--g4g-people); }
.g4g-space-card__cover { position: relative; height: 120px; overflow: hidden; border-bottom: 4px solid var(--card-accent, var(--g4g-accent)); background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--g4g-accent)) 34%, var(--g4g-surface)), color-mix(in srgb, var(--card-accent, var(--g4g-accent)) 13%, var(--g4g-surface))); }
.g4g-space-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-space-card__cover-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--g4g-space-1); color: var(--g4g-text-muted); }
.g4g-space-card__cover-ph span { font-size: 10px; font-weight: var(--g4g-weight-semibold); letter-spacing: 0.02em; }
.g4g-space-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--g4g-space-4); }
.g4g-space-card__theme { font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.g4g-space-card__name { margin: var(--g4g-space-1) 0 0; font-size: var(--g4g-text-lg); font-weight: var(--g4g-weight-semibold); line-height: 1.25; }
.g4g-space-card__name a { color: var(--g4g-primary); text-decoration: none; }
.g4g-space-card__name a:hover { text-decoration: underline; }
.g4g-space-card__desc { margin: var(--g4g-space-2) 0 0; font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); flex: 1; }
.g4g-space-card__meta { display: flex; align-items: center; gap: var(--g4g-space-2); margin: var(--g4g-space-3) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-space-card__actions { display: flex; align-items: center; gap: var(--g4g-space-3); margin-top: var(--g4g-space-3); padding-top: var(--g4g-space-3); border-top: 1px solid var(--g4g-border); }
.g4g-space-card__actions .g4g-btn--primary { min-height: 36px; padding: 7px 14px; font-size: var(--g4g-text-sm); }
.g4g-space-card__open { margin-left: auto; display: inline-flex; align-items: center; gap: var(--g4g-space-1); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); text-decoration: none; }
.g4g-space-card__open:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
 * CRÉATION D'ESPACE (staff) — maquette « G4G Création d'espace ».
 * Formulaire (gauche) + aperçu (droite). Rôles de parité : espace-create-appbar,
 * espace-form, espace-preview (paddings alignés au pixel de la maquette).
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-espace-create { max-width: 1024px; margin: 0 auto; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); overflow: hidden; background: var(--g4g-surface); box-shadow: var(--g4g-shadow-sm); }
.g4g-espace-create__appbar { display: flex; align-items: center; gap: var(--g4g-space-3); padding: 12px 24px; border-bottom: 1px solid var(--g4g-border); }
.g4g-espace-create__title { font-size: var(--g4g-text-base); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-espace-create__close { margin-left: auto; width: 36px; height: 36px; border-radius: var(--g4g-radius-pill); background: var(--g4g-surface-sunken); color: var(--g4g-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; text-decoration: none; }
.g4g-espace-create__errors { margin: var(--g4g-space-4) var(--g4g-space-6) 0; color: var(--g4g-danger); }
.g4g-espace-create__grid { display: grid; align-items: start; }
@media (min-width: 900px) { .g4g-espace-create__grid { grid-template-columns: minmax(0, 1fr) 372px; } }
/* Volet formulaire : fond transparent, padding maquette exact (24 28 28). */
.g4g-espace-create__form { display: flex; flex-direction: column; gap: 22px; padding: 24px 28px 28px; }
@media (min-width: 900px) { .g4g-espace-create__form { border-right: 1px solid var(--g4g-border); } }
/* Volet aperçu : fond enfoncé + padding maquette exact (24 24 28). */
.g4g-espace-create__preview { padding: 24px 24px 28px; background: var(--g4g-surface-alt); align-self: stretch; }
.g4g-espace-create__preview-head { display: flex; align-items: center; gap: var(--g4g-space-2); margin-bottom: var(--g4g-space-3); font-size: 11.5px; font-weight: var(--g4g-weight-bold); color: var(--g4g-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.g4g-espace-create__preview-note { margin: var(--g4g-space-4) 0 0; padding: 13px 15px; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); background: var(--g4g-surface); font-size: var(--g4g-text-xs); line-height: 1.5; color: var(--g4g-text-muted); }
.g4g-espace-create__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--g4g-space-3); padding: 14px 24px; border-top: 1px solid var(--g4g-border); background: var(--g4g-surface-sunken); }
/* Champs. */
.g4g-espace-field__label { display: block; margin-bottom: var(--g4g-space-2); font-size: 11.5px; font-weight: var(--g4g-weight-bold); color: var(--g4g-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.g4g-espace-field__opt { font-weight: var(--g4g-weight-semibold); text-transform: none; letter-spacing: 0; }
.g4g-espace-field__hint { margin: var(--g4g-space-2) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-espace-field__error { margin: var(--g4g-space-2) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-danger); }
.g4g-espace-create input[type="text"], .g4g-espace-create textarea, .g4g-espace-create select { width: 100%; border: 1px solid var(--g4g-border-strong); border-radius: 8px; font-family: inherit; font-size: var(--g4g-text-base); color: var(--g4g-text); background: var(--g4g-surface); padding: 0 14px; }
.g4g-espace-create input[type="text"] { height: 46px; }
.g4g-espace-create select { height: 44px; }
.g4g-espace-create textarea { min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.g4g-espace-create input[type="text"]:focus, .g4g-espace-create textarea:focus, .g4g-espace-create select:focus { outline: none; border-color: var(--g4g-primary); box-shadow: var(--g4g-focus-ring); }
/* Zone de dépôt de la couverture. */
.g4g-dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--g4g-space-2); text-align: center; padding: var(--g4g-space-5); border: 2px dashed var(--g4g-border-strong); border-radius: var(--g4g-radius-md); background: var(--g4g-surface-sunken); }
.g4g-dropzone__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--g4g-radius-pill); background: var(--g4g-surface); border: 1px solid var(--g4g-border); color: var(--g4g-accent); }
.g4g-dropzone__hint { margin: 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-dropzone input[type="file"] { font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); }
/* Palette d'accent : chaque radio devient une pastille de couleur (réutilise les
 * classes d'accent .g4g-space-card--<slug> → --card-accent, jamais de hex). */
.g4g-swatches { display: flex; flex-wrap: wrap; gap: var(--g4g-space-3); }
.g4g-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--g4g-radius-pill); background: var(--card-accent, var(--g4g-accent)); box-shadow: inset 0 0 0 1px var(--g4g-border); cursor: pointer; }
.g4g-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.g4g-swatch__check { display: none; color: var(--g4g-primary-contrast); }
.g4g-swatch input:checked ~ .g4g-swatch__check { display: inline-flex; }
.g4g-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--card-accent, var(--g4g-accent)); }
.g4g-swatch input:focus-visible ~ .g4g-swatch__check { display: inline-flex; }
.g4g-swatch:focus-within { box-shadow: var(--g4g-focus-ring); }
/* Bloc animation (créateur = animateur principal). */
.g4g-espace-anim { display: flex; align-items: center; gap: var(--g4g-space-3); padding: 11px 14px; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); background: var(--g4g-surface-sunken); }
.g4g-espace-anim__id { flex: 1; min-width: 0; }
.g4g-espace-anim__name { display: block; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-espace-anim__role { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-espace-create__preview .g4g-space-card__actions .g4g-btn--secondary { min-height: 36px; padding: 7px 14px; font-size: var(--g4g-text-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
 * MESSAGERIE — maquette « G4G Messagerie ».
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-msg { display: grid; gap: var(--g4g-space-4); }
@media (min-width: 900px) {
  .g4g-msg { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  /* Sur grand écran, la liste EST la navigation : le bouton retour du fil fait
   * doublon et n'a plus de sens (on ne quitte pas une vue qu'on voit déjà). */
  .g4g-msg__back { display: none; }
  /* En-tête (titre + recherche) FIXE au-dessus de la liste défilante. */
  .g4g-msg__list { display: flex; flex-direction: column; overflow: hidden; }
}
@media (max-width: 899px) {
  /* Mobile : une seule vue à la fois — la liste est une PAGE, le fil une autre.
   * Empiler les deux forcerait à défiler la liste entière pour lire. */
  .g4g-msg__list { display: none; }
}
.g4g-msg__list { max-height: 78vh; }
/* La liste seule défile ; l'en-tête reste (scope `.g4g-msg__list` → n'affecte
 * pas la boîte, où `.g4g-convs` est une carte pleine). */
.g4g-msg__list .g4g-convs { flex: 1; min-height: 0; overflow-y: auto; }
.g4g-msg__list-head { flex: none; padding-bottom: var(--g4g-space-3); display: grid; gap: var(--g4g-space-3); }
.g4g-msg__list-title { display: flex; align-items: center; justify-content: space-between; gap: var(--g4g-space-2); }
.g4g-msg__list-heading { margin: 0; font-size: var(--g4g-text-lg); font-weight: var(--g4g-weight-bold); color: var(--g4g-primary); }
/* Parité : bouton « Nouveau message » = primaire plein (maquette), pas l'icône
 * transparente du défaut `.g4g-icon-btn` (base.css). Scopé au titre du rail. */
.g4g-msg__list-title .g4g-icon-btn { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
/* Recherche de conversations — pilule icône + champ (réutilisée boîte + rail). */
.g4g-msg__search { display: flex; align-items: center; gap: var(--g4g-space-2); padding: 0 var(--g4g-space-3); border: 1px solid var(--g4g-border-strong); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface); }
.g4g-msg__search .g4g-icon { flex: none; color: var(--g4g-text-subtle); }
.g4g-msg__search:focus-within { border-color: var(--g4g-primary); box-shadow: var(--g4g-focus-ring); }
.g4g-msg__search-input { flex: 1; min-width: 0; height: 40px; border: none; background: transparent; font-family: inherit; font-size: var(--g4g-text-sm); color: var(--g4g-text); }
.g4g-msg__search-input:focus-visible { outline: none; }
.g4g-msg__inbox-search { margin-bottom: var(--g4g-space-4); max-width: 420px; }
.g4g-msg__thread { display: flex; flex-direction: column; min-height: 60vh; }
.g4g-msg__head { display: flex; align-items: center; gap: var(--g4g-space-2); padding-bottom: var(--g4g-space-3); border-bottom: 1px solid var(--g4g-border); }
.g4g-msg__peer { min-width: 0; }
/* Parité : nom de l'interlocuteur = 15px poids 600 sur --g4g-text (maquette),
 * pas un titre bleu. */
.g4g-msg__title { margin: 0; font-size: var(--g4g-text-base); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-msg__peer-tag { font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
/* Parité : avatars de la messagerie (lignes + en-tête de fil) = 42px (maquette),
 * pas le défaut 38px. Scopé à `.g4g-msg`. */
.g4g-msg .g4g-avatar { width: 42px; height: 42px; }

.g4g-convs { list-style: none; margin: 0; padding: 0; }
.g4g-conv__link {
  display: flex;
  align-items: center;
  gap: var(--g4g-space-3);
  padding: var(--g4g-space-3);
  border-radius: var(--g4g-radius-sm);
  color: inherit;
  text-decoration: none;
}
.g4g-conv__link:hover { background: var(--g4g-surface-sunken); }
.g4g-conv__link[aria-current="page"] { background: var(--g4g-primary-tint); }
.g4g-conv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* Titre + horodatage du dernier message sur une même ligne. */
.g4g-conv__row1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g4g-space-2); width: 100%; min-width: 0; }
.g4g-conv__time { flex: none; font-size: 11px; color: var(--g4g-text-subtle); white-space: nowrap; }
.g4g-conv__title { min-width: 0; font-size: var(--g4g-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Aperçu du dernier message (Lot 7b). */
.g4g-conv__preview { max-width: 100%; font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-conv--unread .g4g-conv__preview { color: var(--g4g-text); font-weight: var(--g4g-weight-semibold); }
/* Liste des destinataires (composition). */
.g4g-compose-item { display: flex; align-items: center; gap: var(--g4g-space-3); padding: var(--g4g-space-2) 0; }
.g4g-compose-item + .g4g-compose-item { border-top: 1px solid var(--g4g-border); }
.g4g-compose-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-compose-item__form { margin: 0; }
.g4g-conv--unread .g4g-conv__title { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-conv__tag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-pill);
  font-size: 10px;
  color: var(--g4g-text-subtle);
}
.g4g-conv__badge {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-accent);
  color: var(--g4g-primary-contrast);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-bold);
  text-align: center;
}

.g4g-msg__bubbles {
  list-style: none;
  flex: 1;
  margin: 0;
  padding: var(--g4g-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--g4g-space-3);
  overflow-y: auto;
}
/* Séparateur de jour — pastille centrée entre deux groupes de bulles. */
.g4g-msg__day { align-self: center; margin: var(--g4g-space-1) 0; }
.g4g-msg__day span { display: inline-block; padding: 2px var(--g4g-space-3); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface-sunken); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-subtle); text-align: center; }
/* Bulle REÇUE : blanche, bordée, ombrée, coin bas-gauche rentré (asymétrie). */
.g4g-bubble {
  max-width: 78%;
  padding: var(--g4g-space-3) var(--g4g-space-4);
  /* Parité maquette : rayon de bulle 14px, coin rentré 4px (hors échelle). */
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--g4g-surface);
  border: 1px solid var(--g4g-border);
  box-shadow: var(--g4g-shadow-sm);
  align-self: flex-start;
}
/* Mes messages : primaire + alignés à droite (asymétrie inversée). La couleur
 * SEULE ne porte pas l'info — l'alignement la double (WCAG 1.4.1). */
.g4g-bubble--mine {
  align-self: flex-end;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  /* Bulle émise sans bordure (maquette `border:none`), coins inversés 14/4. */
  border-width: 0;
  border-color: transparent;
  box-shadow: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.g4g-bubble__author { display: block; margin-bottom: 2px; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); }
.g4g-bubble__body { margin: 0; font-size: var(--g4g-text-sm); overflow-wrap: anywhere; }
.g4g-bubble__time { display: block; margin-top: var(--g4g-space-1); font-size: 10px; opacity: 0.7; }
/* Reçu « Vu » : dans la bulle mienne (hérite le blanc sur primaire), coin bas droit. */
.g4g-bubble__receipt { display: flex; align-items: center; justify-content: flex-end; gap: var(--g4g-space-1); margin-top: 2px; font-size: 10px; font-weight: var(--g4g-weight-semibold); opacity: 0.85; }

.g4g-msg__composer { display: flex; gap: var(--g4g-space-2); align-items: flex-end; padding-top: var(--g4g-space-3); border-top: 1px solid var(--g4g-border); }
/* Champ en pilule (coins arrondis) ; le bouton envoyer garde la pilule de base. */
/* Parité : champ de saisie en pilule (maquette 999px), pas radius-lg. */
.g4g-msg__input { flex: 1; border-radius: var(--g4g-radius-pill); }

/* ═══════════════════════════════════════════════════════════════════════════
 * DEMANDES DE MESSAGE — antichambre, maquette « G4G Demandes de message ».
 * Deux volets (liste + détail). Rôles de parité : dm-requests-list / -pane.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* Bandeau d'accès depuis la boîte de réception. */
.g4g-req-banner {
  display: flex;
  align-items: center;
  gap: var(--g4g-space-3);
  margin-bottom: var(--g4g-space-4);
  padding: var(--g4g-space-3) var(--g4g-space-4);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
  color: var(--g4g-text);
  text-decoration: none;
}
.g4g-req-banner:hover { border-color: var(--g4g-primary); background: var(--g4g-surface-sunken); }
.g4g-req-banner__label { font-weight: var(--g4g-weight-semibold); }
.g4g-req-banner__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-danger);
  color: var(--g4g-primary-contrast);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-bold);
  text-align: center;
}
.g4g-req-banner .g4g-icon:last-child { margin-left: auto; color: var(--g4g-text-subtle); }

/* Carte à deux volets. Bordure + rayon + `overflow` sur le CONTENEUR ; les volets
 * n'ont NI padding NI fond propres (padding sur les enfants, fond blanc porté par
 * la carte) — dm-requests-list reste « transparent + padding 0 » et
 * dm-requests-pane « sunken + padding 0 » (contrats de parité). */
.g4g-req {
  display: grid;
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  overflow: hidden;
  background: var(--g4g-surface);
}
@media (min-width: 900px) {
  .g4g-req { grid-template-columns: 344px minmax(0, 1fr); align-items: stretch; }
}
.g4g-req__list { display: flex; flex-direction: column; min-width: 0; }
.g4g-req__pane { display: flex; flex-direction: column; min-width: 0; background: var(--g4g-surface-sunken); }
@media (min-width: 900px) {
  .g4g-req__list { border-right: 1px solid var(--g4g-border); }
}
@media (max-width: 899px) {
  .g4g-req__list { border-bottom: 1px solid var(--g4g-border); }
}
/* En-tête de la liste. */
.g4g-req__list-head { padding: var(--g4g-space-4); border-bottom: 1px solid var(--g4g-border); }
.g4g-req__list-title { display: flex; align-items: center; gap: var(--g4g-space-2); }
.g4g-req__list-heading { margin: 0; font-size: var(--g4g-text-lg); font-weight: var(--g4g-weight-bold); color: var(--g4g-primary); }
.g4g-req__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-danger);
  color: var(--g4g-primary-contrast);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-bold);
  text-align: center;
}
.g4g-req__list-sub { margin: var(--g4g-space-2) 0 0; font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); }
/* Lignes de demandes (chacune un lien `?demande=<pk>`). */
.g4g-req__items { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.g4g-req__item {
  display: flex;
  align-items: center;
  gap: var(--g4g-space-3);
  padding: var(--g4g-space-3) var(--g4g-space-4);
  border-bottom: 1px solid var(--g4g-border);
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}
.g4g-req__item:hover { background: var(--g4g-surface-sunken); }
.g4g-req__item--active { border-left-color: var(--g4g-primary); background: var(--g4g-primary-tint); }
.g4g-req__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g4g-req__item-name { font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-req__item-preview { font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Volet détail. */
.g4g-req__peer { display: flex; align-items: center; gap: var(--g4g-space-3); padding: var(--g4g-space-3) var(--g4g-space-4); background: var(--g4g-surface); border-bottom: 1px solid var(--g4g-border); }
.g4g-req__peer-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g4g-req__peer-name { font-size: var(--g4g-text-base); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-req__peer-rel { font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-req__body { flex: 1; overflow-y: auto; padding: var(--g4g-space-4); display: flex; flex-direction: column; gap: var(--g4g-space-3); }
.g4g-req__explainer { display: flex; gap: var(--g4g-space-3); padding: var(--g4g-space-3) var(--g4g-space-4); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); background: var(--g4g-surface); }
.g4g-req__explainer .g4g-icon { flex: none; color: var(--g4g-accent); }
.g4g-req__explainer p { margin: 0; font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }
.g4g-req__msg { align-self: flex-start; max-width: 78%; padding: var(--g4g-space-3) var(--g4g-space-4); border: 1px solid var(--g4g-border); border-radius: 14px; border-bottom-left-radius: 4px; background: var(--g4g-surface); box-shadow: var(--g4g-shadow-sm); }
.g4g-req__msg p { margin: 0; font-size: var(--g4g-text-sm); overflow-wrap: anywhere; }
/* Barre d'actions : Bloquer à gauche, Refuser / Accepter à droite. */
.g4g-req__actions { display: flex; align-items: center; gap: var(--g4g-space-2); padding: var(--g4g-space-3) var(--g4g-space-4); background: var(--g4g-surface); border-top: 1px solid var(--g4g-border); }
.g4g-req__block-form { margin: 0; }
.g4g-req__actions-main { margin-left: auto; display: flex; gap: var(--g4g-space-2); }
.g4g-req__actions-main form { margin: 0; }
.g4g-req__block { color: var(--g4g-text-subtle); }
/* Refuser = danger « ligne » (pas le danger plein de base.css). */
.g4g-req__refuse { border: 1px solid var(--g4g-danger); background: var(--g4g-surface); color: var(--g4g-danger); }
.g4g-req__refuse:hover { background: var(--g4g-danger); color: var(--g4g-primary-contrast); }

/* ═══════════════════════════════════════════════════════════════════════════
 * MON RÉSEAU — connexions & invitations, maquette « G4G Connexions ».
 * Deux colonnes (liste + rail suggestions). Rôles de parité :
 * connexions-main / -tabs / -rows / -suggestions.
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-network { display: grid; gap: var(--g4g-space-5); align-items: start; }
@media (min-width: 900px) { .g4g-network { grid-template-columns: minmax(0, 1fr) 320px; } }
.g4g-network__main { min-width: 0; }
.g4g-network__title { margin: 0 0 var(--g4g-space-1); font-size: var(--g4g-text-xl); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-network__intro { margin: 0 0 var(--g4g-space-4); font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }
/* Onglets = pilule (fond blanc, padding 4px) ; chaque onglet est un lien ?onglet=. */
.g4g-network__tabs { display: inline-flex; flex-wrap: wrap; gap: var(--g4g-space-1); margin-bottom: var(--g4g-space-4); padding: var(--g4g-space-1); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface); }
.g4g-network__tab { display: inline-flex; align-items: center; gap: var(--g4g-space-2); padding: 8px 16px; border-radius: var(--g4g-radius-pill); color: var(--g4g-text-muted); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); text-decoration: none; white-space: nowrap; }
.g4g-network__tab:hover { color: var(--g4g-text); text-decoration: none; }
.g4g-network__tab--active, .g4g-network__tab--active:hover { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-network__tab-count { min-width: 20px; padding: 0 6px; border-radius: var(--g4g-radius-pill); background: var(--g4g-border-strong); color: var(--g4g-primary-contrast); font-size: 10.5px; font-weight: var(--g4g-weight-bold); text-align: center; }
.g4g-network__tab-count--alert { background: var(--g4g-danger); }
.g4g-network__tab--active .g4g-network__tab-count { background: color-mix(in srgb, var(--g4g-primary-contrast) 24%, transparent); }
/* Lignes. */
.g4g-network__rows { display: flex; flex-direction: column; gap: var(--g4g-space-3); }
.g4g-network__row { display: flex; align-items: center; gap: var(--g4g-space-3); flex-wrap: wrap; padding: var(--g4g-space-4); border: 1px solid var(--g4g-border); border-radius: 14px; background: var(--g4g-surface); box-shadow: var(--g4g-shadow-sm); }
.g4g-network__row-id { flex: 1; min-width: 160px; }
.g4g-network__row-name { font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); text-decoration: none; }
.g4g-network__row-name:hover { text-decoration: underline; }
.g4g-network__row-actions { display: flex; align-items: center; gap: var(--g4g-space-2); flex: 0 0 auto; }
.g4g-network__pending { display: inline-flex; align-items: center; gap: var(--g4g-space-1); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); color: var(--g4g-warning); }
/* Boutons de ligne/suggestion ramenés à la taille « sm » sans perdre leur couleur. */
.g4g-network__row-actions .g4g-btn--primary,
.g4g-network__suggest .g4g-btn--secondary { min-height: 36px; padding: 7px 14px; font-size: var(--g4g-text-sm); }
/* Rail suggestions. */
.g4g-network__suggest { padding: var(--g4g-space-4); border: 1px solid var(--g4g-border); border-radius: 14px; background: var(--g4g-surface); box-shadow: var(--g4g-shadow-sm); }
@media (min-width: 900px) { .g4g-network__suggest { position: sticky; top: var(--g4g-space-4); } }
.g4g-network__suggest-head { display: flex; align-items: center; gap: var(--g4g-space-2); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-network__suggest-head .g4g-icon { color: var(--g4g-accent); }
.g4g-network__suggest-sub { margin: var(--g4g-space-1) 0 var(--g4g-space-4); font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-network__suggest-list { display: flex; flex-direction: column; gap: var(--g4g-space-4); }
.g4g-network__suggest-item { display: flex; align-items: center; gap: var(--g4g-space-3); }
.g4g-network__suggest-name { flex: 1; min-width: 0; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g4g-network__suggest-name:hover { text-decoration: underline; }
.g4g-network__suggest-empty { margin: 0; font-size: var(--g4g-text-sm); color: var(--g4g-text-subtle); }

/* ── Assistant d'accueil (onboarding) ──────────────────────────────────── */
.g4g-onboarding { display: flex; justify-content: center; padding: var(--g4g-space-8) 0; }
.g4g-onboarding__card { width: 100%; max-width: 32rem; }
.g4g-onboarding__progress { margin: 0 0 var(--g4g-space-2); font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }
.g4g-onboarding__bar {
  height: 6px; margin-bottom: var(--g4g-space-5);
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface-sunken);
  overflow: hidden;
}
.g4g-onboarding__bar-fill {
  display: block; height: 100%;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-primary);
  transition: width 0.3s ease;
}
.g4g-onboarding__title { margin: 0 0 var(--g4g-space-5); font-size: var(--g4g-text-xl); }
.g4g-onboarding__actions { display: flex; flex-wrap: wrap; gap: var(--g4g-space-3); margin-top: var(--g4g-space-6); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ANNONCES ÉPINGLÉES (D-10) — annonce d'animateur en tête du fil d'un espace.
 * Liseré gauche + sur-ligne. L'identité amber « purpose » est portée par le
 * BORD et l'ICÔNE ; le TEXTE de la sur-ligne reste foncé car l'amber en texte
 * échoue le contraste WCAG AA (cf. tokens.css §Variantes accessibles, 2,06:1).
 * ═══════════════════════════════════════════════════════════════════════════ */
.g4g-post--pinned { border-left: 3px solid var(--g4g-purpose); }
.g4g-post__pin {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g4g-space-2);
  padding: var(--g4g-space-3) var(--g4g-space-4) 0;
}
.g4g-post__pin-label {
  display: inline-flex; align-items: center; gap: var(--g4g-space-1);
  font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-bold);
  color: var(--g4g-text);
  text-transform: uppercase; letter-spacing: var(--g4g-tracking-caps);
}
.g4g-post__pin-label .g4g-icon { color: var(--g4g-purpose); }
.g4g-post__role { color: var(--g4g-accent); font-weight: var(--g4g-weight-semibold); }
.g4g-post__unpin {
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted); text-decoration: underline;
}
.g4g-post__unpin:hover { color: var(--g4g-primary); }

.g4g-composer__announce {
  display: inline-flex; align-items: center; gap: var(--g4g-space-2);
  margin: 0 0 var(--g4g-space-2);
  font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-medium);
  color: var(--g4g-text-muted); cursor: pointer;
}
.g4g-composer__announce span { display: inline-flex; align-items: center; gap: var(--g4g-space-1); }
.g4g-composer__announce .g4g-icon { color: var(--g4g-purpose); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ÉVÉNEMENTS (B-6) — agenda (liste), carte, détail, formulaire de création.
 * Jauge de capacité : <meter> natif ; couleur de remplissage par CLASSE selon
 * le seuil (vert < 85 % · ambre ≥ 85 % · rouge complet). Tints via color-mix
 * (déjà utilisé dans base.css) — aucune couleur en dur, tout par token.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* Filtres de l'agenda : onglets À venir/Passés + filtre par espace. */
.g4g-event-filters {
  display: flex; align-items: center; gap: var(--g4g-space-3);
  flex-wrap: wrap; margin-bottom: var(--g4g-space-4);
}
.g4g-event-filters__space { display: flex; align-items: center; gap: var(--g4g-space-2); margin-left: auto; }
.g4g-event-filters__space .g4g-select { width: auto; min-width: 12rem; }

/* Liste + carte d'événement. */
.g4g-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--g4g-space-3); }
.g4g-event { display: flex; gap: var(--g4g-space-4); align-items: flex-start; flex-wrap: wrap; }
.g4g-event--past { opacity: 0.62; }

.g4g-event__date {
  flex: 0 0 auto; width: 58px; text-align: center;
  border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md);
  overflow: hidden; color: var(--g4g-primary);
}
.g4g-event__date-mon {
  display: block; padding: 3px 0; background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: 10.5px; font-weight: var(--g4g-weight-bold);
  letter-spacing: var(--g4g-tracking-caps); text-transform: uppercase;
}
.g4g-event--past .g4g-event__date-mon { background: var(--g4g-text-subtle); }
.g4g-event__date-day { display: block; padding: 4px 0 6px; font-size: var(--g4g-text-xl); font-weight: var(--g4g-weight-bold); line-height: 1; }

.g4g-event__body { flex: 1 1 260px; min-width: 0; }
.g4g-event__head { display: flex; align-items: center; gap: var(--g4g-space-2); flex-wrap: wrap; }
.g4g-event__title { font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); text-decoration: none; }
.g4g-event__title:hover { text-decoration: underline; }
.g4g-event__badge-full { background: color-mix(in srgb, var(--g4g-danger) 12%, transparent); color: var(--g4g-danger); border-color: transparent; }

.g4g-event__meta {
  list-style: none; margin: var(--g4g-space-1) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--g4g-space-1) var(--g4g-space-4);
  font-size: var(--g4g-text-xs); color: var(--g4g-text-muted);
}
.g4g-event__meta-item { display: inline-flex; align-items: center; gap: var(--g4g-space-1); }
.g4g-event__meta-item a { color: inherit; }

.g4g-event__stats { display: flex; align-items: center; gap: var(--g4g-space-3); flex-wrap: wrap; margin-top: var(--g4g-space-2); }
.g4g-event__price {
  display: inline-flex; align-items: center; padding: 4px 11px;
  border-radius: var(--g4g-radius-pill); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold);
}
.g4g-event__price--free { background: var(--g4g-success-tint); color: var(--g4g-success-text); }
.g4g-event__price--paid { background: color-mix(in srgb, var(--g4g-warning) 16%, transparent); color: var(--g4g-text); }

.g4g-event__gauge-wrap { flex: 1 1 120px; min-width: 120px; max-width: 230px; }
.g4g-event__gauge-labels { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-event__gauge { width: 100%; height: 5px; border: none; border-radius: var(--g4g-radius-pill); background: var(--g4g-border); appearance: none; }
.g4g-event__gauge::-webkit-meter-bar { border: none; border-radius: var(--g4g-radius-pill); background: var(--g4g-border); height: 5px; }
.g4g-event__gauge--ok::-webkit-meter-optimum-value { background: var(--g4g-success); border-radius: var(--g4g-radius-pill); }
.g4g-event__gauge--warn::-webkit-meter-optimum-value { background: var(--g4g-warning); border-radius: var(--g4g-radius-pill); }
.g4g-event__gauge--full::-webkit-meter-optimum-value { background: var(--g4g-danger); border-radius: var(--g4g-radius-pill); }
.g4g-event__gauge--ok::-moz-meter-bar { background: var(--g4g-success); border-radius: var(--g4g-radius-pill); }
.g4g-event__gauge--warn::-moz-meter-bar { background: var(--g4g-warning); border-radius: var(--g4g-radius-pill); }
.g4g-event__gauge--full::-moz-meter-bar { background: var(--g4g-danger); border-radius: var(--g4g-radius-pill); }

.g4g-event__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--g4g-space-2); margin-left: auto; }
.g4g-event__note { margin: 0; max-width: 15rem; text-align: right; font-size: 11.5px; color: var(--g4g-text-subtle); }
.g4g-event__done { display: inline-flex; align-items: center; gap: var(--g4g-space-1); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-subtle); }

/* Boutons RSVP — état par CLASSE (couleur composée sur .g4g-btn de base). */
.g4g-event__rsvp--go { background: var(--g4g-surface); border: 1.5px solid var(--g4g-primary); color: var(--g4g-primary); }
.g4g-event__rsvp--going { background: var(--g4g-success); border: 1.5px solid transparent; color: var(--g4g-primary-contrast); }
.g4g-event__rsvp--waitlist { background: var(--g4g-surface); border: 1.5px solid var(--g4g-border-strong); color: var(--g4g-text-muted); }
.g4g-event__rsvp--waiting { background: color-mix(in srgb, var(--g4g-warning) 14%, transparent); border: 1.5px solid var(--g4g-warning); color: var(--g4g-text); }

/* ── Détail d'un événement ── */
.g4g-event-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--g4g-space-5); align-items: start; }
.g4g-event-detail__main { min-width: 0; }
.g4g-event-detail__card {
  background: var(--g4g-surface); border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-card); box-shadow: var(--g4g-shadow-sm); overflow: hidden;
}
.g4g-event-detail__banner {
  position: relative; height: 280px;
  background: linear-gradient(130deg, var(--g4g-primary), var(--g4g-accent));
}
/* Pastille catégorie flottante : pilule blanche translucide, texte primaire gras,
   sans bordure (maquette) — surcharge le .g4g-badge standard, scopée à l'écran. */
.g4g-event-detail__cat {
  position: absolute; top: var(--g4g-space-4); left: var(--g4g-space-4);
  border: 0; color: var(--g4g-primary); font-weight: var(--g4g-weight-bold);
  background: var(--g4g-surface); /* repli plein */
  background: color-mix(in srgb, var(--g4g-surface) 92%, transparent);
}
.g4g-event-detail__datetile {
  position: absolute; left: var(--g4g-space-5); bottom: var(--g4g-space-5);
  width: 78px; padding: var(--g4g-space-2) 0; text-align: center;
  background: var(--g4g-surface); border-radius: var(--g4g-radius-md); box-shadow: var(--g4g-shadow-md);
}
.g4g-event-detail__dow { display: block; font-size: 11px; font-weight: var(--g4g-weight-bold); text-transform: uppercase; letter-spacing: var(--g4g-tracking-caps); color: var(--g4g-danger); }
.g4g-event-detail__day { display: block; font-size: var(--g4g-text-2xl); font-weight: var(--g4g-weight-bold); line-height: 1; color: var(--g4g-primary); }
.g4g-event-detail__mon { display: block; font-size: 11px; text-transform: uppercase; color: var(--g4g-text-subtle); }
.g4g-event-detail__body { padding: var(--g4g-space-5) var(--g4g-space-6) var(--g4g-space-6); }
.g4g-event-detail__eyebrow { margin: 0 0 var(--g4g-space-1); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); }
.g4g-event-detail__eyebrow a { color: var(--g4g-accent); }
.g4g-event-detail__title { margin: 0 0 var(--g4g-space-4); font-size: var(--g4g-text-2xl); font-weight: var(--g4g-weight-bold); color: var(--g4g-primary); line-height: 1.15; }
.g4g-event-detail__facts {
  list-style: none; margin: 0 0 var(--g4g-space-5); padding: var(--g4g-space-4) 0;
  border-top: 1px solid var(--g4g-border); border-bottom: 1px solid var(--g4g-border);
  display: flex; flex-wrap: wrap; gap: var(--g4g-space-5);
}
.g4g-event-detail__facts li { display: flex; align-items: center; gap: var(--g4g-space-2); }
.g4g-event-detail__facts .g4g-icon { color: var(--g4g-accent); flex: 0 0 auto; }
.g4g-event-detail__facts strong { display: block; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-event-detail__facts span { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-event-detail__sub { margin: 0 0 var(--g4g-space-2); font-size: var(--g4g-text-base); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-event-detail__desc { font-size: var(--g4g-text-sm); color: var(--g4g-text); line-height: 1.6; }

.g4g-event-detail__rail { display: flex; flex-direction: column; gap: var(--g4g-space-4); position: sticky; top: var(--g4g-space-4); }
.g4g-event-detail__count { margin: 0; display: flex; align-items: baseline; gap: var(--g4g-space-1); }
.g4g-event-detail__count strong { font-size: var(--g4g-text-xl); font-weight: var(--g4g-weight-bold); color: var(--g4g-primary); }
.g4g-event-detail__count span { font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }
.g4g-event-detail__objective { margin: var(--g4g-space-1) 0 var(--g4g-space-3); font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
.g4g-event-detail__rsvp { margin-top: var(--g4g-space-3); }
.g4g-event-detail__rsvp .g4g-event__rsvp { width: 100%; }
.g4g-event-detail__org-label { margin: 0 0 var(--g4g-space-3); font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); text-transform: uppercase; letter-spacing: var(--g4g-tracking-caps); color: var(--g4g-text-subtle); }
.g4g-event-detail__org-row { display: flex; align-items: center; gap: var(--g4g-space-3); }
.g4g-event-detail__org-id strong { display: block; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-event-detail__org-id span { display: block; font-size: var(--g4g-text-xs); color: var(--g4g-text-subtle); }
/* Avatar organisateur : squircle 44 px rayon 11 px (maquette), pas le disque de base. */
.g4g-event-detail__org-row .g4g-avatar { width: 44px; height: 44px; border-radius: 11px; }

/* Pile d'avatars (participants) — réutilisable. */
.g4g-avatar-stack { display: flex; margin: var(--g4g-space-3) 0; }
.g4g-avatar-stack .g4g-avatar { border: 2px solid var(--g4g-surface); }
.g4g-avatar-stack .g4g-avatar + .g4g-avatar { margin-left: -10px; }
.g4g-avatar-stack__more { background: var(--g4g-surface-sunken); color: var(--g4g-text-muted); }
/* Pile participants du détail événement : diamètre 34 px (maquette), scopé à l'écran. */
.g4g-event-detail__rail .g4g-avatar-stack .g4g-avatar { width: 34px; height: 34px; }

/* ── Formulaire de création ── */
.g4g-event-form { display: flex; flex-direction: column; gap: var(--g4g-space-4); }
.g4g-event-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--g4g-space-3); }
.g4g-event-form__check { display: inline-flex; align-items: center; gap: var(--g4g-space-2); font-size: var(--g4g-text-sm); color: var(--g4g-text); cursor: pointer; }
.g4g-event-form__pricing { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--g4g-space-3); }
.g4g-event-form__radios { display: flex; gap: var(--g4g-space-4); }
.g4g-event-form__radios label { display: inline-flex; align-items: center; gap: var(--g4g-space-2); font-size: var(--g4g-text-sm); color: var(--g4g-text); cursor: pointer; }
.g4g-event-form__actions { display: flex; justify-content: flex-end; gap: var(--g4g-space-3); }

/* ── Création d'événement — Lot 2 (layout 2 colonnes, segment, aperçu, ODD) ── */
.g4g-event-create { display: grid; grid-template-columns: 1fr; gap: var(--g4g-space-4); align-items: start; }
@media (min-width: 60rem) { .g4g-event-create { grid-template-columns: minmax(0, 1fr) 20rem; } }

/* Contrôle segmenté Gratuit/Payant (parité : event-price-segment = surface + padding). */
.g4g-seg { display: inline-flex; background: var(--g4g-surface-sunken); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-pill); padding: 3px; }
.g4g-seg__opt { display: inline-flex; align-items: center; justify-content: center; padding: var(--g4g-space-2) var(--g4g-space-5); border-radius: var(--g4g-radius-pill); font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); cursor: pointer; }
.g4g-seg__opt:has(input:checked) { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-seg__opt:has(input:focus-visible) { outline: none; box-shadow: var(--g4g-focus-ring); }

/* Le prix n'est demandé que pour « Payant » : visible par défaut (repli sans :has),
 * masqué quand « Gratuit » est sélectionné. Le serveur ignore le prix si gratuit. */
.g4g-event-form:has(input[name="pricing"][value="free"]:checked) .g4g-event-form__price { display: none; }

/* Aperçu (parité : event-preview = fond + ombre). Rendu serveur + enrichi par JS. */
.g4g-event-preview-rail { position: sticky; top: var(--g4g-space-4); display: flex; flex-direction: column; gap: var(--g4g-space-3); }
.g4g-event-preview-rail__label { font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-semibold); text-transform: uppercase; letter-spacing: .07em; color: var(--g4g-text-subtle); }
.g4g-event-preview { background: var(--g4g-surface); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); box-shadow: var(--g4g-shadow-sm); overflow: hidden; }
.g4g-event-preview__cover { height: 120px; background: linear-gradient(130deg, var(--g4g-primary), var(--g4g-accent)); }
.g4g-event-preview__body { padding: var(--g4g-space-3) var(--g4g-space-4) var(--g4g-space-4); display: flex; flex-direction: column; gap: var(--g4g-space-2); }
.g4g-event-preview__title { margin: 0; font-size: var(--g4g-text-lg); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); line-height: 1.25; }
.g4g-event-preview__meta { margin: 0; display: flex; align-items: center; gap: var(--g4g-space-2); font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); }
.g4g-event-preview__price { margin: var(--g4g-space-1) 0 0; font-size: var(--g4g-text-xs); font-weight: var(--g4g-weight-bold); color: var(--g4g-success); }
.g4g-event-preview-rail__note { display: flex; align-items: flex-start; gap: var(--g4g-space-2); margin: 0; padding: var(--g4g-space-3); background: var(--g4g-accent-tint); border-radius: var(--g4g-radius-md); font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); }

/* Responsive : le détail passe en une colonne sous la bande 400–560 px. */
@media (max-width: 860px) {
  .g4g-event-detail { grid-template-columns: 1fr; }
  .g4g-event-detail__rail { position: static; }
}
@media (max-width: 560px) {
  .g4g-event-detail__banner { height: 180px; } /* maquette mobile (non mappée) */
  .g4g-event__actions { width: 100%; align-items: stretch; }
  .g4g-event__note { text-align: left; max-width: none; }
  .g4g-event-filters__space { margin-left: 0; width: 100%; }
  .g4g-event-filters__space .g4g-select { flex: 1; min-width: 0; }
}

/* Carte de navigation du fil (feed-nav — maquette « App - Communauté »).
   Réutilise .g4g-card (surface + bordure 1px + rayon 10 + ombre-sm) ; padding
   resserré à 8px, items de navigation empilés. L'item actif porte aria-current. */
.g4g-feed__nav { padding: 8px; }
.g4g-feed__nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--g4g-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.g4g-feed__nav-item:hover { background: var(--g4g-surface-sunken); color: var(--g4g-text); }
.g4g-feed__nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--g4g-primary) 8%, transparent);
  color: var(--g4g-primary);
  font-weight: 600;
}
.g4g-feed__nav-item[aria-current="page"]:hover { background: color-mix(in srgb, var(--g4g-primary) 8%, transparent); }

/* Catalogue d'espaces — barre de filtres par thème (maquette « Catalogue des
   espaces »). Conteneur PLAT (sans fond ni padding ; l'espacement vit dans le
   gap) ; pilules opaques (actif = primary opaque, pas de color-mix transparent). */
.g4g-spaces-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.g4g-spaces-filter {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  background: var(--g4g-surface);
  color: var(--g4g-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.g4g-spaces-filter:hover { border-color: var(--g4g-primary); color: var(--g4g-primary); }
.g4g-spaces-filter.is-active { background: var(--g4g-primary); border-color: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-spaces-filters__count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--g4g-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
 * COMMUNAUTÉ — habillage bespoke (maquette « G4G Site - Communauté » 2026-08-21).
 * Héro (S1) + « Règles du fil » (rail droit) + CTA final (S3) audience-aware.
 * 100 % tokens, CSP-safe. La barre de filtres réutilise .g4g-segmented existant.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* Coquille VITRINE pleine largeur (COMM-02) : remplace la boîte g4g-container. Bandes
   bichromes (héro blanc / fil sunken / CTA blanc), contenu recentré 1220px, comme
   Accueil/Méthode 4P. Recentrage par inner max-width + margin auto (aucun 100vw ni marge
   négative → pas de débordement horizontal, sticky des rails préservé). */
.g4g-comm-page {
  --comm-width: 1220px;
  --comm-gutter: clamp(20px, 4vw, 28px);
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--g4g-surface);
}
.g4g-comm-page .g4g-messages { max-width: var(--comm-width); margin-inline: auto; padding-inline: var(--comm-gutter); }
.g4g-comm-hero { background: var(--g4g-surface); padding: clamp(44px, 5.5vw, 72px) var(--comm-gutter) clamp(30px, 3.5vw, 44px); }
.g4g-comm-hero__inner { max-width: var(--comm-width); margin-inline: auto; }
/* Bande du fil : fond sunken pleine largeur + filet supérieur ; contenu recentré 1220px. */
.g4g-comm-feedband { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); padding: clamp(30px, 3.5vw, 44px) var(--comm-gutter) clamp(56px, 7vw, 90px); }
.g4g-comm-feedband > .g4g-feed-layout,
.g4g-comm-feedband > .g4g-message { max-width: var(--comm-width); margin-inline: auto; }
.g4g-comm-hero__eyebrow {
  display: block;
  font-size: var(--g4g-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-comm-hero__title {
  margin: var(--g4g-space-3) 0 0;
  max-width: 24ch;
  /* Échelle des héros du site (maquette l.84 : clamp(40,5.4vw,72) ; --lp-h1 plafonne à 72). */
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-text);
}
.g4g-comm-hero__title-strong { font-weight: var(--g4g-weight-semibold); }
.g4g-comm-hero__subtitle {
  margin: var(--g4g-space-4) 0 0;
  max-width: 58ch;
  font-size: var(--g4g-text-md);
  line-height: 1.6;
  color: var(--g4g-text-muted);
  text-wrap: pretty;
}

/* Règles du fil (rail droit) — .g4g-card donne cadre/rayon/padding ; fond alt. */
.g4g-rules { background: var(--g4g-surface-alt); }
.g4g-rules__title {
  margin: 0 0 var(--g4g-space-3);
  font-size: var(--g4g-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-bold);
  /* text-muted (pas text-subtle) : 4,5:1 sur le fond surface-alt de la carte (WCAG AA). */
  color: var(--g4g-text-muted);
}
.g4g-rules__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--g4g-space-3); }
.g4g-rules__item {
  position: relative;
  padding-left: var(--g4g-space-4);
  font-size: var(--g4g-text-sm);
  line-height: 1.5;
  color: var(--g4g-text-muted);
}
.g4g-rules__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-accent);
}

/* CTA final (S3) — audience-aware, centré (mêmes patrons que l'accueil apphome). */
/* CTA final : bande blanche (la marche sunken→blanc sert de séparateur, pas de border-top). */
.g4g-comm-cta { background: var(--g4g-surface); padding: clamp(56px, 7vw, 90px) var(--comm-gutter); text-align: center; }
.g4g-comm-cta__inner { max-width: 640px; margin: 0 auto; }
.g4g-comm-cta__title {
  margin: 0 auto;
  /* 26ch : accueille le titre entreprise (« … plus qu'une publicité. ») sans casse précoce. */
  max-width: 26ch;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.024em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-text);
}
.g4g-comm-cta__title-strong { font-weight: var(--g4g-weight-semibold); }
.g4g-comm-cta__subtitle {
  margin: var(--g4g-space-4) auto 0;
  max-width: 52ch;
  font-size: var(--g4g-text-md);
  line-height: 1.6;
  color: var(--g4g-text-muted);
  text-wrap: pretty;
}
.g4g-comm-cta__actions { margin-top: var(--g4g-space-6); display: flex; gap: var(--g4g-space-3); justify-content: center; flex-wrap: wrap; }