/**
 * Espace bénévole — page personnelle accessible par lien, sans compte WP.
 *
 * Dépend de tokens.css (charte Nirmata, dark-only comme le reste du frontend).
 * Aucun bloc prefers-color-scheme : le site est sombre par défaut et suit le
 * thème via les variables.
 */

.nirmata-space {
	max-width: var(--wp--style--global--content-size, 720px);
	margin: 0 auto;
	color: var(--nirmata-text);
}

.nirmata-space__title {
	margin: 0 0 24px;
	color: var(--nirmata-secondary);
}

/* En-tête (0.84.0) : « Bonjour … » et, pour un compte, « Se déconnecter » sur
   la même ligne, le bouton calé à droite. Le titre garde la place : il se
   replie sur lui-même plutôt que de pousser le bouton dessous. */
.nirmata-space__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 24px;
}

.nirmata-space__head .nirmata-space__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* Même bouton fantôme que les autres actions, en plus petit : il ne dispute
   pas la vedette au titre. Sélecteur doublé pour l'emporter sur
   `.nirmata-space__button`, écrit plus bas. */
.nirmata-space__button.nirmata-space__head-logout {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 0.35rem 0.8rem;
	font-size: 0.7rem;
	white-space: nowrap;
}

.nirmata-space__head-logout svg {
	flex: 0 0 auto;
}

.nirmata-space__heading {
	margin: 0 0 6px;
	font-size: 1.15rem;
	color: var(--nirmata-secondary);
	border-bottom: 1px solid var(--nirmata-border);
	padding-bottom: 6px;
}

.nirmata-space__section {
	margin: 0 0 36px;
}

/* Onglets (0.26.0) : le composant partagé vit dans tabs.css, on ne règle ici
 * que son insertion dans la page. */
.nirmata-space__tabs {
	margin: 0 0 8px;
}

/* Avec JS, l'onglet actif porte déjà le libellé de la section (les panneaux
 * sont labellisés par `aria-labelledby`) : le titre ferait doublon juste
 * en dessous. Sans JS, il redevient le seul repère entre les trois sections
 * empilées — d'où le conditionnement à `is-enhanced` plutôt qu'un retrait
 * pur et simple du markup. */
.nirmata-space__tabs.is-enhanced .nirmata-space__heading {
	display: none;
}

.nirmata-space__hint {
	margin: 6px 0 14px;
	color: var(--nirmata-text-muted);
	font-size: 0.92rem;
}

/* Page refusée (0.56.0) : le lien de connexion y est une issue, pas un
 * détail — il ne s'atténue pas comme ailleurs. */
.nirmata-space__login .nirmata-login-link {
	opacity: 1;
	color: var(--nirmata-primary);
}

.nirmata-space__empty {
	margin: 10px 0;
	color: var(--nirmata-text-muted);
	font-style: italic;
}

/* ---------- Notices ---------- */

.nirmata-space__notice {
	margin: 0 0 22px;
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 4px solid var(--nirmata-primary);
	background: var(--nirmata-surface);
}

.nirmata-space__notice--error {
	border-left-color: var(--nirmata-danger);
}

/* Signalement en attente d'arbitrage (déclaration alimentaire divergente) :
   ni une erreur du visiteur, ni une confirmation — une question qu'on lui
   pose. D'où l'or, réservé aux états « en attente » dans toute la charte. */
.nirmata-space__notice--warn {
	border-left-color: var(--nirmata-secondary);
}

/* ---------- Soirées et créneaux ---------- */

/* La carte d'une soirée. Le rembourrage a quitté la carte pour vivre dans ses
   deux parties (0.45.6) : la barre de titre porte une image de fond qui doit
   toucher les bords, `overflow: hidden` la découpant à l'arrondi. */
.nirmata-space__event {
	margin: 16px 0;
	overflow: hidden;
	border: 1px solid var(--nirmata-border);
	border-radius: 10px;
	background: var(--nirmata-surface);
}

/* État de la personne sur une soirée ouverte (0.52.0) : « tu participes »,
   « tu as décliné ». Une pastille en aplat, dans la barre de titre — c'est la
   première chose à lire sur une carte qui, sinon, ressemble à toutes les
   autres. Les couleurs reprennent celles des statuts du planning. */
.nirmata-space__event-state {
	display: inline-block;
	margin: 6px 0 0;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.nirmata-space__event-state--in {
	background: var(--nirmata-ok);
	color: var(--nirmata-bg);
}

.nirmata-space__event-state--out {
	background: var(--nirmata-bad);
	color: var(--nirmata-bg);
}

/* Le second formulaire de la carte (décliner, ou revenir dessus) : séparé du
   premier par un filet, pour qu'on ne prenne pas son bouton pour la suite du
   précédent. */
.nirmata-space__event-answer {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--nirmata-border);
}

/* Le corps déplié récupère le rembourrage que la carte n'a plus. */
.nirmata-space__event > *:not( .nirmata-space__event-head ) {
	margin-left: 18px;
	margin-right: 18px;
}

.nirmata-space__event > *:last-child {
	margin-bottom: 16px;
}

/* Barre de titre d'une soirée (0.45.6) : la **bannière** de la soirée en
   tête, le nom posé dessus. On reconnaît une soirée à son visuel avant
   d'avoir lu son nom, et c'est le seul endroit de l'espace où une image a la
   place de servir à quelque chose.

   Disposition de la 0.116.0 : le nom seul sur l'image, **centré** en bas, à
   18 % de chaque bord — c'est là qu'un visuel 4:1 met son décor (les visages
   de Pulse of Nova), et un texte calé à gauche le recouvrait. Date et
   pastilles passent dans une bande sous l'image, sur le fond de la carte :
   lisibles quelle que soit l'image, à toute largeur. La marge de 18 % est
   annoncée par la convention de l'emplacement
   (`EventDecor::convention( KIND_SPACE )`).

   C'est un `<summary>` : le marqueur natif devient un item de la flexbox et
   casse l'alignement — on le retire pour dessiner le nôtre (même correctif
   que les postes du planning, 0.40.0). */
.nirmata-space__event-head {
	position: relative;
	display: block;
	padding: 0;
	cursor: pointer;
	list-style: none;
	color: var(--nirmata-text);
}

/* Sans image, la barre se détache du corps par un fond un cran plus clair. */
.nirmata-space__event-head.is-plain {
	background: var(--nirmata-surface-2);
}

.nirmata-space__event-head::-webkit-details-marker {
	display: none;
}

/* L'image et ce qui s'y superpose (voile, nom). Le texte y est **blanc en
   dur**, non tokenisé : il est posé sur une image inconnue, pas sur le fond
   du thème. */
.nirmata-space__event-visual {
	position: relative;
	/* Garde-fou : une image très allongée descend sous la hauteur d'un nom sur
	   deux lignes une fois mise à la largeur de la colonne. Le fond de repli
	   remplit alors ce qui reste, comme les bandes d'une image au ratio
	   inhabituel. */
	min-height: 72px;
	color: #fff;
	background: linear-gradient( 135deg, #14323a, #2a1620 );
	/* Le nom se mesure à l'image (0.116.1) : `cqi` = 1 % de sa largeur. */
	container-type: inline-size;
}

/* Bannière **entière**, jamais recadrée — et dans une tuile plus basse depuis
   la 0.45.8 : à sa largeur naturelle, une bannière 3:1 faisait 240 px de haut
   dans la colonne, soit une liste de soirées qui ne tenait plus à l'écran.
   Le plafond est donc descendu à 180 px.

   L'arbitrage est assumé : au-delà de ce plafond, `contain` réduit l'image et
   laisse deux bandes latérales sur le dégradé de fond. C'est le prix d'une
   tuile courte **et** d'une affiche visible en entier — la seule autre façon
   de raccourcir aurait été de recadrer, ce qu'on vient précisément d'écarter. */
.nirmata-space__event-cover {
	display: block;
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: contain;
	object-position: center;
}

/* Voile en ellipse sous le nom, au centre du bas (0.116.0) : il n'assombrit
   que là où le texte se pose et laisse les bords de l'image intacts. Sans lui,
   un titre blanc sur une bannière claire disparaît. */
.nirmata-space__event-scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 40%;
	background: radial-gradient(
		ellipse 55% 100% at 50% 100%,
		rgba( 0, 0, 0, 0.8 ) 0%,
		rgba( 0, 0, 0, 0.4 ) 60%,
		rgba( 0, 0, 0, 0 ) 100%
	);
}

/* Le nom se superpose au bas de l'image, en absolu : l'image étant en flux,
   un texte en flux se serait posé *sous* elle. */
.nirmata-space__event-visual .nirmata-space__event-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 10px 18% 12px;
	text-align: center;
	/* Taille liée à la largeur de l'image (0.116.1), donc à sa hauteur
	   (4:1) : les 1,05 rem de la barre d'avant, une fois le nom seul sur
	   une image de 180 px, se perdaient. ~28 px sur une colonne de 720 px,
	   16 px au plus étroit, où l'image ne fait plus que 85 px de haut. */
	font-size: clamp( 1rem, 4cqi, 1.75rem );
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.75 );
}

/* Bande sous l'image : date à gauche, pastilles à droite, la place du
   chevron réservée au bout. Sans image, le nom l'ouvre et tout s'empile. */
.nirmata-space__event-text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 10px 40px 12px 18px;
}

.nirmata-space__event-head.is-plain .nirmata-space__event-text {
	display: block;
	padding: 16px 40px 16px 18px;
}

/* Chevron porté par la barre elle-même (0.45.7). Avec une image, il descend
   dans la bande (0.116.0) : dans le coin haut de l'image, il tombait sur le
   décor. `currentColor` : la couleur du thème. */
.nirmata-space__event-head::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 1;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.9;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.15s ease;
}

.nirmata-space__event-head:not( .is-plain )::after {
	top: auto;
	bottom: 19px;
}

.nirmata-space__event[open] > .nirmata-space__event-head::after {
	transform: rotate(-135deg);
}

/* Variante **fixe** de la barre (0.53.1), pour les cartes de « Prochaines
   soirées » qui ne se replient pas : ni chevron, ni curseur — la barre garde
   tout le reste (fond, rembourrage du bloc de texte, typographie). */
.nirmata-space__event-head--static {
	cursor: default;
}

.nirmata-space__event-head--static::after {
	content: none;
}

/* Le corps qui suit la barre fixe reprend son souffle : le premier bloc (un
   formulaire de souhaits, un texte) arrivait collé sous le titre. */
.nirmata-space__event-head--static + * {
	margin-top: 14px;
}

/* Focus : jamais de boîte, quel que soit le navigateur ou le mode de focus —
   la bague par défaut reste dessinée après un clic à la souris et ne s'efface
   qu'en cliquant ailleurs. L'indicateur clavier devient le soulignage du nom
   de la soirée. Troisième fois le même piège (0.9.8, 0.41.0). */
.nirmata-space__event > summary:focus,
.nirmata-space__event > summary:focus-visible {
	outline: none;
	box-shadow: none;
}

.nirmata-space__event-head:focus-visible .nirmata-space__event-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pastilles d'état (0.45.5) : ce que la barre repliée doit dire sans être
   ouverte — combien de créneaux, combien restent à confirmer. */
.nirmata-space__event-pills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 8px 0 0;
	padding: 0;
}

/* Aplat coloré plein (0.45.8), sur le modèle du badge « Recrutement ouvert »
   des pages publiques : posée sur une bannière quelconque, une pastille
   au contour fin et au fond translucide se lisait mal, et les trois états ne
   se distinguaient que par une nuance de bordure. Un fond plein tranche sur
   n'importe quelle image, et la couleur devient l'information.
   Chaque fond va avec son encre sombre — jamais du blanc sur du teal ou de
   l'or, qui passe sous le seuil de contraste. */
.nirmata-space__pill {
	padding: 3px 11px;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1a1c24;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Ce qui attend une action se signale : l'or, réservé aux états « en attente »
   dans toute la charte. */
.nirmata-space__pill.is-todo {
	background: var(--nirmata-warn);
	color: var(--nirmata-secondary-ink);
}

.nirmata-space__pill.is-ok {
	background: var(--nirmata-ok);
	color: var(--nirmata-primary-ink);
}

/* Désistement : la place est rendue, la pastille s'éteint. */
.nirmata-space__pill.is-off {
	background: rgba( 255, 255, 255, 0.42 );
	color: #1a1c24;
	text-decoration: line-through;
}

/* Police d'affichage (0.45.9) : c'est un <h4>, choisi pour la structure du
   document, pas pour son apparence — le thème ne réserve Nulshock qu'aux h1
   et h2. Le jeton la pose là où elle a un sens : sur un nom de soirée. */
.nirmata-space__event-name {
	margin: 0;
	font-family: var( --nirmata-font-display );
	font-size: 1.05rem;
	line-height: 1.25;
	overflow-wrap: break-word;
	color: inherit;
}

.nirmata-space__event-date {
	margin: 3px 0 0;
	color: var(--nirmata-text-muted);
	font-size: 0.9rem;
}

/* Dans la bande, date et pastilles sont côte à côte : plus de marges
   d'empilement. */
.nirmata-space__event-head:not( .is-plain ) .nirmata-space__event-date,
.nirmata-space__event-head:not( .is-plain ) .nirmata-space__event-pills {
	margin: 0;
}

/* Infos pratiques d'une soirée (0.29.0) : lieu + page publique. Elles ouvrent
   le corps déplié, juste sous la bannière : sans respiration au-dessus et en
   dessous, la bande se collait au bord de l'image d'un côté et à la première
   ligne de créneau de l'autre (0.45.8). */
.nirmata-space__event-infos {
	list-style: none;
	margin: 14px 0 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--nirmata-border);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	font-size: 0.9rem;
}

.nirmata-space__event-info {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

/* L'adresse complète passe sous le nom du lieu : sur une seule ligne elle
   pousserait le lien Maps hors de l'écran sur mobile. */
.nirmata-space__event-address {
	display: block;
	color: var(--nirmata-text-muted);
	font-size: 0.85rem;
}

.nirmata-space__shifts,
.nirmata-space__day-shifts {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Feuille de route (0.103.0) ---------------------------------------
   Les créneaux d'une soirée rangés par journée, dans l'ordre chronologique.
   La vignette date de la 0.45.3 se répétait à chaque ligne — trois créneaux
   du même soir, trois fois « samedi 14 » — et ne disait rien de l'enchaînement
   veille → soir → lendemain. La date s'écrit désormais une fois, en tête de
   sa journée ; chaque ligne garde ce qu'elle a en propre : ses heures, son
   état (un point sur la frise), son poste, sa réponse.

   Quatre colonnes : heures (52 px), frise (18 px), poste, réponse. Sur
   téléphone, la réponse passe sous le poste (voir plus bas). */
.nirmata-space__shifts {
	margin-top: 14px;
}

.nirmata-space__day + .nirmata-space__day {
	margin-top: 10px;
}

/* En-tête de journée, aligné sur la colonne du poste : 52 + 12 + 18 + 12. */
.nirmata-space__day-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 0 0 2px 94px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nirmata-text-muted);
}

.nirmata-space__day-relation {
	color: var(--nirmata-rose);
}

.nirmata-space__shift {
	display: grid;
	grid-template-columns: 52px 18px minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: start;
	padding: 10px 0;
}

/* La modale des référents, dernier enfant, s'étend sur toute la ligne quand
   elle est rendue en place (sans JS). */
.nirmata-space__shift > .nirmata-space__referents {
	grid-column: 1 / -1;
}

/* Heures empilées, début au-dessus de la fin, calées à droite contre la
   frise : les chiffres tabulaires s'alignent d'une ligne à l'autre. */
.nirmata-space__shift-time {
	padding-top: 1px;
	text-align: right;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.nirmata-space__shift-from {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
}

.nirmata-space__shift-to {
	display: block;
	font-size: 0.84rem;
	color: var(--nirmata-text-muted);
}

/* Créneau à période (0.46.0) : son libellé (« Matin ») tient la place des deux heures. */
.nirmata-space__shift-period {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	hyphens: manual;
}

/* Frise : un trait qui relie les créneaux d'une même journée, et un point
   par créneau. Le trait part du premier point et s'arrête au dernier. */
.nirmata-space__shift-rail {
	position: relative;
	align-self: stretch;
	display: flex;
	justify-content: center;
}

.nirmata-space__shift-rail::before {
	content: "";
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--nirmata-border);
}

.nirmata-space__day-shifts > .nirmata-space__shift:first-child .nirmata-space__shift-rail::before {
	top: 12px;
}

.nirmata-space__day-shifts > .nirmata-space__shift:last-child .nirmata-space__shift-rail::before {
	bottom: calc(100% - 12px);
}

/* L'état du créneau tient dans le point : cerclé d'or à confirmer, plein et
   coché une fois confirmé. Un seul signal par ligne, là où trois vignettes
   ocre pleines disaient trois fois « à confirmer ». */
.nirmata-space__shift-dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 2px solid var(--nirmata-warn);
	border-radius: 50%;
	background: var(--nirmata-surface);
}

.nirmata-space__shift.is-ok .nirmata-space__shift-dot {
	border-color: var(--nirmata-ok);
	background: var(--nirmata-ok);
	color: var(--nirmata-primary-ink);
}

.nirmata-space__shift.is-off .nirmata-space__shift-dot {
	border-color: var(--nirmata-bad);
}

.nirmata-space__shift-main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Icône, pastille du poste et libellé du créneau sur une ligne. */
.nirmata-space__shift-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.nirmata-space__shift-position {
	font-weight: 600;
}

/* Icône du poste (0.81.0), la même qu'au planning, dans la teinte de sa
   pastille (couleur posée en ligne par le gabarit). */
.nirmata-space__shift-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.nirmata-space__shift-icon-svg {
	width: 18px;
	height: 18px;
}

/* Pastille du poste (0.46.3) : dans le titre, elle garde la taille de la
   ligne — c'est la première chose qu'on y lit. */
.nirmata-space__shift-position .nirmata-chip {
	font-size: 1em;
}

.nirmata-space__shift-label {
	color: var(--nirmata-text-muted);
	font-size: 0.9rem;
}

/* La phrase entière (date · heures · état) n'est pas dessinée : heures et
   frise la portent à l'écran, en morceaux qu'un lecteur d'écran lirait
   hachés — d'où leur `aria-hidden`, et cette phrase-ci. */
.nirmata-space__shift-when,
.nirmata-space__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Référents (par leur prénom) puis équipe, sur une ligne (0.103.0). */
.nirmata-space__shift-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	font-size: 0.84rem;
	color: var(--nirmata-text-muted);
}

/* Les prénoms des référents en lien : un clic ouvre la modale et ses
   adresses. Focus clavier par le soulignage, jamais par une boîte. */
.nirmata-space__referents-open {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nirmata-primary);
	font: inherit;
	text-decoration: underline;
	text-decoration-color: rgba( 77, 171, 162, 0.4 );
	text-underline-offset: 3px;
	cursor: pointer;
}

.nirmata-space__referents-open:hover,
.nirmata-space__referents-open:focus-visible {
	text-decoration-color: currentColor;
}

.nirmata-space__referents-open:focus,
.nirmata-space__referents-open:focus-visible {
	outline: none;
	box-shadow: none;
}

.nirmata-space__referents-icon {
	flex: 0 0 auto;
}

/* --- Référents du poste en modale (0.53.0) ---------------------------
   Le contact du soir J (0.29.0) a quitté la colonne de texte pour un bouton
   du bloc d'actions, doublé d'un <dialog> rendu en dernier enfant de la carte.
   Non amélioré (sans JS), le dialog s'affiche en place, en pleine largeur
   sous la ligne, et le bouton — qui n'ouvrirait rien — reste masqué. */
/* Sélecteur assez lourd pour l'emporter sur `.nirmata-space__button`, dont
   le `display` est écrit plus bas dans la feuille. */
.nirmata-space__shifts:not(.is-enhanced) .nirmata-space__referents-open {
	display: none;
}

.nirmata-space__shifts:not(.is-enhanced) .nirmata-space__referents {
	display: block;
	position: static;
	width: auto;
	flex: 1 1 100%;
	max-width: none;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--nirmata-border);
	border-radius: 8px;
	background: var(--nirmata-surface);
	color: inherit;
}

.nirmata-space__shifts:not(.is-enhanced) .nirmata-space__referents-close {
	display: none;
}

.nirmata-space__referents {
	width: min(420px, calc(100vw - 32px));
	padding: 16px 18px 18px;
	border: 1px solid var(--nirmata-border);
	border-radius: 10px;
	background: var(--nirmata-surface);
	color: var(--nirmata-text);
}

.nirmata-space__referents::backdrop {
	background: rgba(0, 0, 0, 0.62);
}

.nirmata-space__referents-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 4px;
}

.nirmata-space__referents-title {
	margin: 0;
	font-size: 1rem;
	color: var(--nirmata-secondary);
}

.nirmata-space__referents-close {
	margin-left: auto;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--nirmata-text-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.nirmata-space__referents-close:hover { color: var(--nirmata-text); }

.nirmata-space__referents-close:focus { outline: none; }

.nirmata-space__referents-close:focus-visible {
	outline: 2px solid var(--nirmata-primary);
	outline-offset: 2px;
}

.nirmata-space__referents-hint {
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: var(--nirmata-text-muted);
}

.nirmata-space__referents-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- « Un souci ? Contactez-nous » en modale (0.76.0) ----------------
   Même dessin que la modale des référents : un bouton du bloc d'actions,
   doublé d'un <dialog> rendu en dernier enfant de la carte. Le dialog porte
   le formulaire de message à l'équipe. Non amélioré, il s'affiche en place et
   le bouton reste masqué. La classe est distincte (`is-issue-enhanced`) :
   les deux modales n'ont pas la même condition de rendu. */
.nirmata-space__shifts:not(.is-issue-enhanced) .nirmata-space__issue-open {
	display: none;
}

.nirmata-space__shifts:not(.is-issue-enhanced) .nirmata-space__issue {
	display: block;
	position: static;
	box-sizing: border-box;
	width: auto;
	flex: 1 1 100%;
	max-width: none;
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--nirmata-border);
	border-radius: 8px;
	background: var(--nirmata-surface);
	color: inherit;
}

.nirmata-space__shifts:not(.is-issue-enhanced) .nirmata-space__issue .nirmata-space__referents-close {
	display: none;
}

.nirmata-space__issue {
	width: min(480px, calc(100vw - 32px));
	padding: 16px 18px 18px;
	border: 1px solid var(--nirmata-border);
	border-radius: 10px;
	background: var(--nirmata-surface);
	color: var(--nirmata-text);
}

.nirmata-space__issue::backdrop {
	background: rgba(0, 0, 0, 0.62);
}

.nirmata-space__issue-label {
	display: block;
	margin: 0 0 4px;
	font-size: 0.85rem;
	font-weight: 600;
}

.nirmata-space__issue-message {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--nirmata-border);
	border-radius: 8px;
	background: var(--nirmata-bg);
	color: var(--nirmata-text);
	font: inherit;
	resize: vertical;
}

.nirmata-space__issue-message:focus {
	outline: none;
	border-color: var(--nirmata-primary);
}

.nirmata-space__issue-actions {
	margin: 12px 0 0;
	text-align: right;
}

/* Une ligne par référent : le nom à gauche, l'adresse à droite — un lien
   `mailto:` (0.53.2, l'e-mail a remplacé le téléphone). Une adresse longue
   passe à la ligne sous le nom plutôt que de déborder du cadre. */
.nirmata-space__referent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 8px 0;
	border-top: 1px solid var(--nirmata-border);
}

.nirmata-space__referent:first-child {
	border-top: 0;
}

.nirmata-space__referent-name {
	font-weight: 600;
}

.nirmata-space__referent-mail {
	color: var(--nirmata-primary);
	overflow-wrap: anywhere;
}

.nirmata-space__referent-mail.is-none {
	color: var(--nirmata-text-muted);
	font-style: italic;
}

/* Co-équipiers : un élément de décor — la ligne est déjà bornée en
   caractères côté serveur (0.84.0, `teammates_line()`). */
.nirmata-space__shift-team {
	overflow-wrap: anywhere;
}

/* Réponse au créneau (0.103.0), dans la colonne de droite : « Je confirme »
   en bouton, ou l'état « Confirmé » une fois répondu, et « Empêchement » en
   lien dessous. Le désistement existe toujours ; il ne pèse plus autant que la
   confirmation, que la ligne invite à donner. */
.nirmata-space__shift-answer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.nirmata-space__shift-answer form,
.nirmata-space__todo-form {
	display: flex;
	margin: 0;
}

.nirmata-space__answer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0.4rem 0.95rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: transparent;
	font-family: var( --nirmata-font-display );
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nirmata-space__answer svg {
	flex: 0 0 auto;
}

.nirmata-space__answer--confirm {
	color: var(--nirmata-ok);
	background: var(--nirmata-primary-soft);
}

/* Survol et focus clavier : l'aplat dans la couleur du bouton. Pas de bague
   de focus en boîte (invariant 0.9.8 / 0.41.0). */
.nirmata-space__answer--confirm:hover,
.nirmata-space__answer--confirm:focus-visible {
	background: var(--nirmata-ok);
	border-color: var(--nirmata-ok);
	color: var(--nirmata-bg);
}

.nirmata-space__answer:focus,
.nirmata-space__answer:focus-visible {
	outline: none;
	box-shadow: none;
}

/* « Confirmé » : l'état, à la place du bouton qui n'a plus lieu d'être. */
.nirmata-space__shift-state {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 40px;
	color: var(--nirmata-ok);
	font-family: var( --nirmata-font-display );
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* « Empêchement » en lien discret : gris, rouge au survol et au focus. */
.nirmata-space__answer--stop {
	min-height: 32px;
	padding: 0 2px;
	border: 0;
	background: none;
	color: var(--nirmata-text-muted);
	font: inherit;
	font-size: 0.82rem;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.2 );
	text-underline-offset: 3px;
	cursor: pointer;
}

.nirmata-space__answer--stop:hover,
.nirmata-space__answer--stop:focus-visible {
	color: var(--nirmata-bad);
	text-decoration-color: currentColor;
}

.nirmata-space__answer--stop:focus,
.nirmata-space__answer--stop:focus-visible {
	outline: none;
	box-shadow: none;
}

/* « Tout confirmer » (0.103.0) : un bandeau en tête de la feuille de route,
   à partir de deux créneaux à confirmer. */
.nirmata-space__todo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	margin: 14px 0 4px;
	padding: 10px 12px 10px 14px;
	border: 1px solid rgba( 201, 153, 70, 0.45 );
	border-radius: 10px;
	background: var(--nirmata-secondary-soft);
}

.nirmata-space__todo-text {
	margin: 0;
	font-size: 0.92rem;
}

.nirmata-space__todo-text strong {
	color: var(--nirmata-secondary);
}

/* « Un souci ? Contactez-nous », une fois par soirée en fin de liste
   (0.82.0) : une phrase, puis le lien (0.103.0) — qui garde le libellé que
   citent les e-mails. */
.nirmata-space__shifts-issue {
	margin-top: 16px;
	padding: 12px 0 0;
	border-top: 1px solid var(--nirmata-border);
	color: var(--nirmata-text-muted);
	font-size: 0.85rem;
}

.nirmata-space__shifts-issue-hint {
	display: inline;
	margin: 0;
}

.nirmata-space__issue-open {
	margin-left: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nirmata-primary);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba( 77, 171, 162, 0.4 );
	text-underline-offset: 3px;
	cursor: pointer;
}

.nirmata-space__issue-open:hover,
.nirmata-space__issue-open:focus-visible {
	text-decoration-color: currentColor;
}

.nirmata-space__issue-open:focus,
.nirmata-space__issue-open:focus-visible {
	outline: none;
	box-shadow: none;
}

.nirmata-space__issue-shift {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 8px 10px;
	border: 1px solid var(--nirmata-border);
	border-radius: 8px;
	background: var(--nirmata-bg);
	color: var(--nirmata-text);
	font: inherit;
}

.nirmata-space__issue-shift:focus {
	outline: none;
	border-color: var(--nirmata-primary);
}

/* Le bouton de déconnexion est un lien : il perd le soulignage du thème. */
a.nirmata-space__button {
	text-decoration: none;
}

/* ---------- Préférences et formulaire ---------- */

.nirmata-space__prefs {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--nirmata-border);
	border-radius: 8px;
}

.nirmata-space__prefs legend {
	padding: 0 6px;
	color: var(--nirmata-text-muted);
	font-size: 0.88rem;
}

.nirmata-space__check {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 3px 0;
}

/* Poste pourvu par l'équipe (0.60.0) : proposé aux comptes seulement. */
.nirmata-space__check-note {
	padding: 1px 7px;
	border: 1px solid var(--nirmata-border);
	border-radius: 999px;
	color: var(--nirmata-text-muted);
	font-size: 0.75rem;
	line-height: 1.5;
	white-space: nowrap;
}

.nirmata-space__form {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin-top: 14px;
}

.nirmata-space__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 10px;
}

.nirmata-space__label {
	font-size: 0.88rem;
	color: var(--nirmata-text-muted);
}

.nirmata-space__readonly {
	padding: 6px 0;
	font-weight: 600;
}

.nirmata-space__field input,
.nirmata-space__field textarea,
.nirmata-space__field select {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nirmata-border);
	border-radius: 6px;
	background: var(--nirmata-bg);
	color: var(--nirmata-text);
	font: inherit;
}

/* Listes déroulantes : sans `appearance: none`, le navigateur impose son propre
 * fond clair et sa flèche système — un rectangle blanc au milieu de champs
 * sombres. On reprend donc la main sur le contrôle et on redessine le chevron
 * (SVG inline, `currentColor` impossible en background : la couleur est écrite
 * dans le data-URI, alignée sur --nirmata-text-muted). */
.nirmata-space__field select {
	appearance: none;
	padding-right: 38px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239aa0ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* Le menu déroulé est dessiné par l'OS : seules ces deux propriétés y portent
 * (Firefox, Chromium sous Windows/Linux). Sans elles, on retombe sur du texte
 * sombre sur fond sombre chez les visiteurs dont le système est en thème clair. */
.nirmata-space__field select option {
	background: var(--nirmata-surface);
	color: var(--nirmata-text);
}

.nirmata-space__field input:focus,
.nirmata-space__field textarea:focus,
.nirmata-space__field select:focus {
	outline: none;
	border-color: var(--nirmata-primary);
}

/* ---------- Boutons ---------- */

.nirmata-space__button {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: none;
	border-radius: 6px;
	background: var(--nirmata-secondary);
	color: var(--nirmata-bg);
	font-family: var( --nirmata-font-display );
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.82rem;
	cursor: pointer;
}

.nirmata-space__button:hover,
.nirmata-space__button:focus {
	background: var(--nirmata-text);
	color: var(--nirmata-bg);
}

.nirmata-space__button--ghost {
	background: transparent;
	color: var(--nirmata-text-muted);
	border: 1px solid var(--nirmata-border);
}

.nirmata-space__button--ghost:hover,
.nirmata-space__button--ghost:focus {
	background: transparent;
	color: var(--nirmata-danger);
	border-color: var(--nirmata-danger);
}

/* Boutons de navigation d'une soirée (0.151.0) : sa page, son planning. Un
   contour, pas un aplat — ce ne sont pas des réponses. */
.nirmata-space__event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.nirmata-space__button--link {
	background: transparent;
	color: var(--nirmata-secondary);
	border: 1px solid var(--nirmata-secondary);
}

.nirmata-space__button--link:hover,
.nirmata-space__button--link:focus,
.nirmata-space__button--link:focus-visible {
	background: var(--nirmata-secondary);
	color: var(--nirmata-bg);
	outline: none;
	box-shadow: none;
}

.nirmata-space__logout {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--nirmata-border);
}


/* Rester dans la liste (0.50.0).
 *
 * Le bandeau de question est **au-dessus** des onglets, encadré : c'est une
 * question posée, pas une information de plus dans la page — sans encadrement
 * elle se lirait comme un paragraphe d'introduction et personne n'y répondrait.
 * Il disparaît dès qu'une réponse est donnée, le réglage restant accessible
 * dans « Mes informations ». */
.nirmata-space__roster-ask,
.nirmata-space__complete {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--nirmata-border);
	border-left: 3px solid var(--nirmata-secondary);
	border-radius: 8px;
	background: var(--nirmata-surface);
}

.nirmata-space__roster-title {
	margin: 0 0 6px;
	font-family: var(--nirmata-font-display);
	font-size: 1em;
}

/* Deux formulaires côte à côte, un bouton chacun (jamais deux boutons dans un
   même formulaire). `flex-wrap` : sur mobile ils s'empilent plutôt que de
   rétrécir jusqu'à devenir illisibles. */
.nirmata-space__roster-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

/* Réglage permanent, dans « Mes informations » : séparé du formulaire de
   coordonnées par un filet, comme la fermeture des sessions — deux opérations
   distinctes, deux enregistrements distincts. */
.nirmata-space__roster-form {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--nirmata-border);
}

.nirmata-space__subheading {
	margin: 0 0 10px;
	font-family: var(--nirmata-font-display);
	font-size: 1em;
}

/* Le libellé porte une phrase entière : l'aligner en haut du bouton radio, et
   non au centre, pour que la seconde ligne ne se décale pas sous la puce. */
.nirmata-space__choice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 0.95em;
	cursor: pointer;
}

.nirmata-space__choice input {
	margin-top: 0.25em;
	flex: 0 0 auto;
}

/* Choix à deux boutons (0.53.1) : deux radios habillées en boutons côte à
   côte, celui qui est coché passe en aplat. La puce est retirée de l'écran
   mais pas du document — elle garde le focus clavier et le `required` —, et
   c'est `input:checked + span` qui peint l'état, sans `:has()` ni script. */
.nirmata-space__toggle-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

.nirmata-space__toggle {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.nirmata-space__toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.nirmata-space__toggle-face {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--nirmata-border);
	border-radius: 6px;
	background: transparent;
	color: var(--nirmata-text-muted);
	font-family: var(--nirmata-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.82rem;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.nirmata-space__toggle:hover .nirmata-space__toggle-face {
	color: var(--nirmata-text);
	border-color: var(--nirmata-text-muted);
}

.nirmata-space__toggle input:checked + .nirmata-space__toggle-face {
	background: var(--nirmata-secondary);
	border-color: var(--nirmata-secondary);
	color: var(--nirmata-bg);
}

/* Focus clavier : jamais une boîte sur le frontend, mais ici le bouton *est*
   une boîte — on souligne le libellé, comme sur les onglets. */
.nirmata-space__toggle input:focus-visible + .nirmata-space__toggle-face {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Second bloc d'un même panneau (0.28.0) : la fermeture des autres sessions,
 * sous le changement de mot de passe. Séparé par un filet, comme le bloc de
 * déconnexion — ce sont deux opérations distinctes, pas deux champs d'un
 * même formulaire. */
.nirmata-space__subsection {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--nirmata-border);
}

@media (max-width: 600px) {
	/* Feuille de route sur téléphone (0.103.0) : la réponse passe sous le
	   poste, à gauche le bouton, à droite « Empêchement » — heures et frise
	   s'étirent sur les deux rangées. En-tête de journée : 44 + 9 + 16 + 9. */
	.nirmata-space__day-head {
		margin-left: 78px;
	}

	.nirmata-space__shift {
		grid-template-columns: 44px 16px minmax(0, 1fr);
		column-gap: 9px;
	}

	.nirmata-space__shift-time,
	.nirmata-space__shift-rail {
		grid-row: 1 / span 2;
	}

	.nirmata-space__shift-from {
		font-size: 0.98rem;
	}

	/* « Matin », « Après-midi » : plus petits plutôt que coupés au milieu
	   d'un mot dans une colonne de 44 px. */
	.nirmata-space__shift-period {
		font-size: 0.74rem;
	}

	.nirmata-space__shift-dot {
		width: 16px;
		height: 16px;
	}

	.nirmata-space__shift-answer {
		grid-column: 3;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 4px 8px;
		margin-top: 8px;
	}

	.nirmata-space__answer {
		min-height: 38px;
		padding: 0.35rem 0.6rem;
	}

	.nirmata-space__answer--stop {
		font-size: 0.78rem;
	}

	/* Si la rangée ne tient pas (police d'affichage plus large), le lien passe
	   à la ligne en restant à droite — jamais sous le bouton, où il se lirait
	   comme sa légende. */
	.nirmata-space__shift-answer > form:last-child:not(:first-child) {
		margin-left: auto;
	}

	.nirmata-space__todo {
		flex-direction: column;
		align-items: stretch;
	}

	.nirmata-space__todo .nirmata-space__answer {
		width: 100%;
	}

	/* Écran étroit : le texte se resserre, mais l'image garde son ratio — la
	   rogner reviendrait à ce qu'on vient de corriger. Le nom posé dessus
	   garde ses 18 % de chaque bord : c'est la marge que la convention
	   promet. */
	.nirmata-space__event-text {
		padding: 10px 36px 12px 14px;
	}

	.nirmata-space__event-visual .nirmata-space__event-name {
		padding: 8px 18% 10px;
	}

	.nirmata-space__event-head.is-plain .nirmata-space__event-text {
		padding: 14px 36px 14px 14px;
	}
}

/* Téléphone (0.84.0) : « Se déconnecter » reste à côté du titre, réduit à son
   icône — le libellé reste lu par un lecteur d'écran et porté par `title`. */
@media (max-width: 480px) {
	.nirmata-space__button.nirmata-space__head-logout {
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
	}

	.nirmata-space__head-logout svg {
		width: 16px;
		height: 16px;
	}

	.nirmata-space__head-logout-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* Carte « À compléter pour la soirée » (0.136.0) : même encadré que la
   question de liste, liseré bordeaux — ce qui manque conditionne la venue. */
.nirmata-space__complete {
	border-left-color: var(--nirmata-primary);
}

.nirmata-space__complete .nirmata-space__consent {
	margin: 0 0 14px;
	font-size: 0.92em;
}