// Rubrique généalogie
// Palette : fond #121212, texte #dac5a8, accent #C40

// Pleine largeur : la page de généalogie ne passe pas par le container 1200px.
body.layout-full {
	.container { max-width: none; }

	// Marge sous le bandeau fixe : le titre et les liens (Administration,
	// Déconnexion…) ne doivent pas coller au header.
	.container__content {
		padding-top: 132px;
		padding-left: 0;
		padding-right: 0;
	}

	@media all and (max-width: @screen-s) {
		.container__content { padding-top: 116px; }
	}
}

.genealogy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 60vh;

	&__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
		padding: 0 28px;

		h1 {
			margin: 0;
			font-family: @sans-serif;
			font-weight: normal;
			font-size: 26px;
			color: @color-text;
		}
	}

	&__user {
		display: flex;
		align-items: center;
		gap: 18px;
		flex-wrap: wrap;
		color: @color-text;
		font-size: 13px;

		.link { color: @color-text; text-decoration: underline; }
	}

	&__role {
		opacity: .55;
	}

	&__panel {
		background: rgba(218, 197, 168, .06);
		border: 1px solid rgba(218, 197, 168, .25);
		border-radius: 10px;
		padding: 28px;
		max-width: 560px;

		h1 { margin: 0 0 12px 0; font-size: 22px; font-weight: normal; color: @color-text; }
	}

	&__steps {
		padding-left: 20px;
		margin: 16px 0;
		li { margin-bottom: 8px; }
	}

	&__error {
		color: #c44a2b;
	}

	&__muted {
		opacity: .6;
		font-size: 13px;
	}

	&__form {
		display: flex;
		flex-direction: column;
		gap: 14px;

		label {
			display: flex;
			flex-direction: column;
			gap: 6px;
			font-size: 13px;
			color: @color-text;
		}

		input[type="text"],
		input[type="password"],
		input[type="file"],
		select,
		textarea {
			background: #1d1d1d;
			border: 1px solid rgba(218, 197, 168, .3);
			color: @color-text;
			padding: 8px 10px;
			border-radius: 6px;
			font-family: @default;
			font-size: 14px;
			max-width: 100%;

			&:focus {
				outline: none;
				border-color: @color-text;
			}
		}

		textarea { min-height: 90px; resize: vertical; }

		&--row {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-end;
		}
	}

	&__section {
		background: rgba(218, 197, 168, .04);
		border: 1px solid rgba(218, 197, 168, .18);
		border-radius: 10px;
		padding: 20px 24px;

		h2 {
			margin: 0 0 14px 0;
			font-size: 18px;
			font-weight: normal;
			color: @color-text;
		}
	}

	&__stats {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 34px;
		list-style: none;
		margin: 0;
		padding: 0;

		li strong { display: block; font-size: 26px; color: @color-text; }
	}

	&__table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 16px;
		font-size: 13px;

		th, td {
			border-bottom: 1px solid rgba(218, 197, 168, .15);
			padding: 8px 10px;
			text-align: left;
		}
		th { font-weight: normal; opacity: .6; }
		td form { display: inline-flex; gap: 6px; align-items: center; }
		td input[type="password"] { max-width: 150px; }
	}

	&__msg {
		border-radius: 8px;
		padding: 14px 18px;
		border: 1px solid;

		&--ok { border-color: rgba(127, 176, 105, .5); background: rgba(127, 176, 105, .12); }
		&--error { border-color: rgba(196, 74, 43, .5); background: rgba(196, 74, 43, .12); }
	}

	&__log {
		font-size: 11px;
		white-space: pre-wrap;
		max-height: 180px;
		overflow: auto;
		opacity: .7;
	}

	&__btn {
		background: transparent;
		border: 1px solid rgba(218, 197, 168, .35);
		color: @color-text;
		border-radius: 6px;
		padding: 6px 12px;
		font-size: 15px;
		line-height: 1;
		cursor: pointer;

		&:hover { background: rgba(218, 197, 168, .15); }

		// Icône maison du bouton « home » (alignée sur les glyphes texte).
		svg {
			width: 14px;
			height: 14px;
			display: block;
			fill: currentColor;
		}

		&--home { padding: 6px 10px; }

		&--danger { color: #c44a2b; border-color: rgba(196, 74, 43, .5); }
	}

	// Compteur « XXXX personnes » à droite des boutons de zoom.
	// Habillage porté par `.genealogy__bar h1 .genealogy__count` (cf. bloc
	// « règles réintégrées ») pour ne pas dépendre du niveau d'imbrication.
	&__count { white-space: nowrap; }

	&__search {
		background: #1d1d1d;
		border: 1px solid rgba(218, 197, 168, .3);
		color: @color-text;
		border-radius: 6px;
		padding: 7px 12px;
		font-size: 14px;
		min-width: 180px;
	}

	&__canvas {
		position: relative;
		height: calc(100vh - 240px);
		min-height: 480px;
		border: 1px solid rgba(218, 197, 168, .18);
		overflow: hidden;
		background: #dadada;
		cursor: grab;

		&.is-dragging { cursor: grabbing; }

		svg { width: 100%; height: 100%; display: block; }
	}

	&__hint {
		position: absolute;
		bottom: 8px;
		left: 12px;
		font-size: 11px;
		opacity: .45;
		pointer-events: none;
	}

	&__detail {
		position: fixed;
		top: 106px;
		right: 0;
		width: 360px;
		bottom: 0;
		background: #171613;
		border-left: 1px solid rgba(218, 197, 168, .3);
		z-index: 50;
		overflow: visible;
		box-shadow: -12px 0 30px rgba(0, 0, 0, .5);

		// Bouton de fermeture : en retrait du volet, sur son bord gauche.
		&-close {
			position: absolute;
			top: 10px;
			right: calc(100% + 1px);
			background: #171613;
			border: 1px solid rgba(218, 197, 168, .35);
			border-right: none;
			color: @color-text;
			font-size: 22px;
			line-height: 1;
			cursor: pointer;
			padding: 8px 13px;
			border-radius: 8px 0 0 8px;
			z-index: 2;

			&:hover { background: #211f1b; }
		}
	}

	@media (max-width: @screen-s) {
		&__detail { top: 96px; width: 100%; }
		&__canvas { height: calc(100vh - 190px); min-height: 360px; }
	}

	// ------------------------------------------------------------------
	// Pop-in « Ajouter une personne apparentée »
	// ------------------------------------------------------------------
	&__modal {
		position: fixed;
		inset: 0;
		z-index: 70;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;

		&[hidden] { display: none; }

		&-backdrop {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, .55);
		}

		&-panel {
			position: relative;
			background: #171613;
			border: 1px solid rgba(218, 197, 168, .35);
			border-radius: 12px;
			box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
			width: 100%;
			max-width: 420px;
			max-height: calc(100vh - 40px);
			overflow-y: auto;
			padding: 22px 24px 24px 24px;

			h3 {
				margin: 0 0 4px 0;
				font-family: @sans-serif;
				font-weight: normal;
				font-size: 19px;
				color: @color-text;
			}
		}

		&-close {
			position: absolute;
			top: 12px;
			right: 12px;
			background: rgba(218, 197, 168, .12);
			border: 1px solid rgba(218, 197, 168, .35);
			color: @color-text;
			font-size: 20px;
			line-height: 1;
			cursor: pointer;
			padding: 6px 11px;
			border-radius: 8px;

			&:hover { background: rgba(218, 197, 168, .25); }
		}
	}

	&__modal-subject {
		margin: 0 0 14px 0;
		font-size: 13px;
		color: @color-text;

		span { opacity: .6; }
	}
}

// Contenu de la pop-in (étape 1 : liens — étape 2 : formulaire).
.gadd__choices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;

	.gadd__choice {
		padding: 10px 8px;
		font-size: 14px;

		&[disabled] {
			opacity: .35;
			cursor: not-allowed;

			&:hover { background: transparent; }
		}
	}
}

.gadd__backrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;

	span { font-size: 14px; color: @color-text; }
}

.gadd__back { font-size: 16px; padding: 4px 10px; }

.gadd__form {
	display: flex;
	flex-direction: column;
	gap: 10px;

	label {
		display: flex;
		flex-direction: column;
		gap: 4px;
		font-size: 12px;
		color: @color-text;
	}

	input[type="text"],
	select {
		background: #1d1d1d;
		border: 1px solid rgba(218, 197, 168, .3);
		color: @color-text;
		border-radius: 6px;
		padding: 8px;
		font-size: 13px;

		&:focus { outline: none; border-color: @color-text; }
	}

	.gadd__dead {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		font-size: 13px;
		cursor: pointer;

		input { cursor: pointer; }
	}

	.gadd__death {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-left: 10px;
		border-left: 2px solid rgba(218, 197, 168, .25);
	}

	.gdetail__form--actions { display: flex; gap: 8px; margin-top: 4px; }
}

// ------------------------------------------------------------------
// Cartes SVG
// ------------------------------------------------------------------
.gcard {
	cursor: pointer;

	&:hover .gcard__bg { stroke-width: 2; }

	&.is-focus .gcard__bg {
		stroke-width: 3.5;

		&.sex-F {
			stroke: #c15f74;
			filter: drop-shadow(0 0 7px rgba(193, 95, 116, .85)) drop-shadow(0 0 2px rgba(193, 95, 116, .9));
		}
		&.sex-M {
			stroke: #3d74b6;
			filter: drop-shadow(0 0 7px rgba(61, 116, 182, .85)) drop-shadow(0 0 2px rgba(61, 116, 182, .9));
		}
		&.sex-U {
			stroke: #8a8f98;
			filter: drop-shadow(0 0 7px rgba(138, 143, 152, .85)) drop-shadow(0 0 2px rgba(138, 143, 152, .9));
		}
	}
}

.gcard__bg {
	fill: #e8e8e8;
	stroke: #8a8f98;
	stroke-width: 1.4;

	&.sex-F { stroke: #c15f74; }
	&.sex-M { stroke: #3d74b6; }
	&.sex-U { stroke: #8a8f98; }

	&.is-masked {
		fill: #f3f3f3;
		stroke-dasharray: 4 3;
	}
}

.gcard__band {
	fill: @color-black;
}

.gcard__expand {
	cursor: pointer;

	rect {
		fill: @color-line;
		stroke: none;
		stroke-width: 1.2;
		transition: fill 120ms ease;
	}
	path {
		fill: none;
		stroke: @color-line;
		stroke-width: 1.7;
		stroke-linecap: round;
	}
	text {
		fill: @color-background;
		font-size: 10px;
		font-weight: 600;
	}
	&:hover rect { fill: #c44a2b; }
}

// Icône « … » de fratrie : ouvre les frères et sœurs d'un ancêtre de la
// chaîne, sur place. Légèrement à gauche du centre de la carte pour ne pas
// gêner le trait qui monte vers ses parents. Ouverture seule (la fratrie du
// pivot est toujours visible, les ancêtres ne peuvent pas la refermer à la
// main).
.gcard__sibexp {
	cursor: pointer;

	rect {
		fill: @color-line;
		stroke: none;
		stroke-width: 1.2;
		transition: fill 120ms ease;
	}
	path {
		fill: none;
		stroke: @color-line;
		stroke-width: 1.7;
		stroke-linecap: round;
	}
	text {
		fill: @color-background;
		font-size: 10px;
		font-weight: 600;
	}
	&:hover rect { fill: #c44a2b; }
}

.gcard__name {
	fill: @color-black;
	font-family: @sans-serif;
	font-size: 11px;
	font-weight: 600;
}

.gcard__years {
	fill: #4a4a4a;
	font-family: @default;
	font-size: 9.5px;
}

.gcard__status {
	fill: #777777;
	font-family: @default;
	font-size: 9.5px;
	font-style: italic;
}

.gcard__avatar {
	stroke: rgba(0, 0, 0, .18);
	stroke-width: 1;

	&.sex-M { fill: #3d74b6; }
	&.sex-F { fill: #c15f74; }
	&.sex-U { fill: #8a8f98; }
}

.gcard__avatar-text {
	fill: @color-white;
	font-family: @sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.gcard__badge {
	& rect { rx: 4px; }
	& text {
		font-family: @default;
		font-size: 9px;
		font-weight: 700;
	}
	&.on rect { fill: #43a047; }
	&.on text { fill: @color-white; }
	&.off rect { fill: rgba(0, 0, 0, .08); }
	&.off text { fill: rgba(0, 0, 0, .35); }
}

.gcard__photo.is-grayscale {
	filter: grayscale(.85);
}

// Icône « ajouter une personne apparentée » : en bas à droite de la carte,
// glyphe buste + « + » seul, plus foncé que les pastilles N/D/M (non
// cliquables) pour signaler l'action ; éclaircissement au survol.
.gcard__addrel {
	cursor: pointer;

	.glyph {
		fill: #4a4a4a;
		stroke: none;
		transition: fill 120ms ease;
	}
	&:hover .glyph { fill: #9b9b9b; }
}

// Pastille « x2 » : signale une carte en double (personne présente dans deux
// contextes familiaux). Clic navigue vers l'autre carte.
.gcard__dupe {
	cursor: pointer;

	circle {
		stroke: rgba(0, 0, 0, .18);
		stroke-width: 1;
		transition: opacity 120ms ease;
	}
	text {
		fill: white;
		font-family: "Open Sans", sans-serif;
		font-size: 8px;
		font-weight: 700;
	}
	&.sex-M circle { fill: #3d74b6; }
	&.sex-F circle { fill: #c15f74; }
	&:hover circle { opacity: .8; }
}

.gline {
	fill: none;
	stroke: @color-line;
	stroke-width: 1.4;
}

.gline--secondary {
	stroke-dasharray: 5 4;
}

// ------------------------------------------------------------------
// Détail personne
// ------------------------------------------------------------------
.gdetail {
	padding: 0 20px 30px 20px;

	// En-tête collant : le titre de la fiche reste visible pendant le
	// défilement de la biographie et des événements.
	&__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		gap: 14px;
		align-items: flex-start;
		padding: 14px 0 16px 0;
		margin-bottom: 0;
		background: #171613;
		border-bottom: 1px solid rgba(218, 197, 168, .12);
	}

	&__photo {
		width: 84px;
		height: 84px;
		object-fit: cover;
		border-radius: 10px;
		border: 1px solid rgba(218, 197, 168, .4);
		flex-shrink: 0;

		&--placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(218, 197, 168, .12);
			color: @color-text;
			font-family: @sans-serif;
			font-weight: 600;
			font-size: 26px;
		}
	}

	&__name {
		font-family: @sans-serif;
		font-size: 20px;
		color: @color-text;
		margin: 0 0 4px 0;
		line-height: 1.2;
	}

	&__dates {
		font-size: 13px;
		opacity: .75;
		margin: 0 0 2px 0;
	}

	&__places { font-size: 12px; opacity: .55; margin: 0; }

	&__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 12px 0 0 0;
		padding: 0;
		list-style: none;

		li {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			font-size: 11px;
			padding: 3px 8px;
			border-radius: 10px;
			border: 1px solid rgba(218, 197, 168, .2);

			&.on { border-color: rgba(218, 197, 168, .55); }
			&.off { opacity: .4; }
		}
	}

	&__private {
		border: 1px dashed rgba(218, 197, 168, .4);
		border-radius: 8px;
		padding: 14px;
		font-style: italic;
		opacity: .75;
	}

	&__section {
		margin-top: 22px;

		h3 {
			font-size: 13px;
			letter-spacing: .08em;
			text-transform: uppercase;
			opacity: .55;
			font-weight: normal;
			margin: 0 0 8px 0;
			border-bottom: 1px solid rgba(218, 197, 168, .15);
			padding-bottom: 6px;
		}
	}

	// Bouton « Ajouter un événement » : respir avant le premier événement.
	&__section--actions {
		display: flex;
		margin: 0 0 12px 0;
	}

	&__bio {
		white-space: pre-wrap;
		font-size: 13px;
		line-height: 1.6;
		margin: 0;
	}

	&__event {
		background: #2a2723;
		border: 1px solid rgba(218, 197, 168, .12);
		border-radius: 8px;
		padding: 10px 12px;
		margin-bottom: 10px;
		font-size: 13px;

		&:last-child { margin-bottom: 0; }


		&--label {
			color: @color-text;
			font-weight: 600;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
		}
		&--actions {
			margin-left: auto;
			display: inline-flex;
			gap: 6px;
		}
		&--meta { opacity: .65; font-size: 12px; margin-top: 2px; }
		&--desc { opacity: .55; font-size: 12px; margin-top: 2px; }
		&--source {
			margin-top: 4px;
			font-size: 12px;
			opacity: .7;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 6px;

			// Lien « Source » : sans règle, le navigateur applique sa couleur
			// « visité » (violet), illisible sur fond sombre.
			.link {
				color: @color-text;
				text-decoration: underline;

				// Icône maillon devant le libellé.
				svg {
					vertical-align: -2px;
					margin-right: 3px;
				}

				&:hover { opacity: .75; }
			}
		}
		&--source-tag {
			border: 1px solid rgba(218, 197, 168, .25);
			border-radius: 10px;
			padding: 1px 8px;
			font-size: 11px;
		}
		&--source-desc {
			opacity: .6;
			flex: 1 1 100%;
			white-space: pre-line;
		}
		&--media {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-top: 6px;
		}
		&--media-item {
			position: relative;
			display: inline-block;
		}
		&--media-item img {
			width: 64px;
			height: 64px;
			object-fit: cover;
			border-radius: 6px;
			border: 1px solid rgba(218, 197, 168, .25);
			display: block;
		}
		&--media-del {
			position: absolute;
			top: -6px;
			right: -6px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			border: 1px solid rgba(196, 74, 43, .6);
			background: #1d1d1d;
			color: #c44a2b;
			font-size: 13px;
			line-height: 1;
			cursor: pointer;
			padding: 0;
		}
	}

	&__muted { opacity: .55; font-size: 12px; }

	&__doc-upload {
		display: inline-flex;
		margin-top: 4px;
		margin-left: 10px;
		vertical-align: middle;
	}

	&__form {
		display: flex;
		flex-direction: column;
		gap: 10px;
		border: 1px solid rgba(218, 197, 168, .2);
		border-radius: 8px;
		padding: 14px;
		margin-top: 12px;
		background: rgba(218, 197, 168, .03);

		h4 { margin: 0 0 4px 0; font-size: 13px; color: @color-text; font-weight: normal; }
		label { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
		input, textarea, select {
			background: #1d1d1d;
			border: 1px solid rgba(218, 197, 168, .3);
			color: @color-text;
			border-radius: 6px;
			padding: 8px;
			font-size: 13px;
		}
		&--actions { display: flex; gap: 8px; }
	}

	&__doc-toggle {
		margin-top: 4px;
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		cursor: pointer;

		input { cursor: pointer; }
	}

	&__media {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;

		img {
			width: 100%;
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 6px;
			border: 1px solid rgba(218, 197, 168, .25);
		}
	}

	// Item de la galerie photo (admin) : boutons ★ / × en coin, étiquette
	// « Principale » sur la photo affichée sur la carte.
	&__media-item {
		position: relative;
		display: block;

		&.is-portrait img {
			border-color: #43a047;
			box-shadow: 0 0 0 1px #43a047;
		}
	}

	&__media-item.is-portrait &__media-item--tag { display: inline-block; }

	&__media-item--tag {
		display: none;
		position: absolute;
		left: 4px;
		bottom: 4px;
		background: rgba(67, 160, 71, .92);
		color: @color-white;
		font-size: 9px;
		font-weight: 700;
		padding: 1px 6px;
		border-radius: 8px;
	}

	&__media-btn {
		position: absolute;
		top: -6px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid rgba(218, 197, 168, .5);
		background: #1d1d1d;
		color: @color-text;
		font-size: 11px;
		line-height: 1;
		cursor: pointer;
		padding: 0;

		&--star { left: -6px; }
		&--del {
			right: -6px;
			border-color: rgba(196, 74, 43, .6);
			color: #c44a2b;
		}
	}

	&__edit {
		display: flex;
		flex-direction: column;
		gap: 10px;

		label { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
		input, textarea {
			background: #1d1d1d;
			border: 1px solid rgba(218, 197, 168, .3);
			color: @color-text;
			border-radius: 6px;
			padding: 8px;
			font-size: 13px;
		}
	}

	&__delete { margin-top: 4px; }

	&__toast {
		position: fixed;
		bottom: 18px;
		left: 50%;
		transform: translateX(-50%);
		background: #2c291f;
		border: 1px solid rgba(218, 197, 168, .5);
		color: @color-text;
		padding: 8px 18px;
		border-radius: 20px;
		font-size: 13px;
		z-index: 60;
	}
}

// ---------------------------------------------------------------------------
// Règles réintégrées dans la source
//
// Ces sélecteurs étaient présents dans assets/css/styles.css sans jamais avoir
// été portés dans ce fichier : toute recompilation complète de la feuille
// (lessc assets/css/src/styles.less assets/css/styles.css) les effaçait —
// zoom/pan, panneau de détail en thème clair, bloc « ajout », pièces jointes.
// Portés ici à l'identique pour que le LESS redevienne la source de vérité.
// ---------------------------------------------------------------------------


.genealogy__bar h1 .genealogy__count {
	margin-left: 10px;
	font-size: 13px;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	opacity: .7;
}

.genealogy__bar-right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.genealogy__zoom,
.genealogy__pan {
	position: absolute;
	z-index: 5;
	display: flex;
	gap: 6px;
}

.genealogy__zoom {
	top: 12px;
	left: 12px;
	flex-direction: row;
	align-items: center;
}

.genealogy__pan {
	right: 12px;
	bottom: 12px;
	flex-direction: column;
}

.genealogy__zoom .genealogy__btn,
.genealogy__pan .genealogy__btn {
	background: #ffffff;
	border: none;
	border-radius: 5px;
	color: #3a3a3a;
	padding: 5px 9px;
	font-size: 13px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.genealogy__zoom .genealogy__btn:hover,
.genealogy__pan .genealogy__btn:hover {
	background: #f0f0f0;
	color: #1f1f1f;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.genealogy__zoom .genealogy__btn--home {
	padding: 5px 8px;
}

.genealogy__zoom .genealogy__btn svg,
.genealogy__pan .genealogy__btn svg {
	width: 13px;
	height: 13px;
	display: block;
	fill: currentColor;
}

#genealogy-detail-content {
	height: 100%;
	overflow-y: auto;
}

.gadd__mode {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 2px;
}

.gadd__mode .gadd__mode--choice {
	flex-direction: row;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid rgba(218, 197, 168, 0.25);
	border-radius: 6px;
	padding: 6px 10px;
}

.gadd__mode .gadd__mode--choice input {
	cursor: pointer;
}

.gadd__attachlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid rgba(218, 197, 168, 0.25);
	border-radius: 6px;
}

.gadd__attach-title {
	font-size: 12px;
	color: #dac5a8;
}

.gadd__attachlist .gadd__attach {
	flex-direction: row !important;
	align-items: center;
	gap: 6px !important;
	font-size: 13px;
	cursor: pointer;
}

.gadd__attachlist .gadd__attach input {
	cursor: pointer;
}

.gadd__attach-hint {
	font-size: 11px;
	opacity: .65;
	color: #dac5a8;
}

.gdetail__media-btn--star.is-active {
	background: #43a047;
	border-color: #43a047;
	color: #ffffff;
}

// Variante claire du volet de détail : fond blanc, textes sombres.
.genealogy__detail--light {
	background: #ffffff;
	color: #1a1a1a;
	border-left: 1px solid rgba(0, 0, 0, 0.14);
}

.genealogy__detail--light .genealogy__detail-close {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-right: none;
	color: #333333;
}

.genealogy__detail--light .genealogy__detail-close:hover {
	background: #f2f2f2;
}

.genealogy__detail--light .gdetail__head {
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.genealogy__detail--light .genealogy__btn:not(.genealogy__btn--icon):not(.genealogy__btn--danger) {
	color: #9a7a3c;
	border-color: rgba(154, 122, 60, 0.7);
}

.genealogy__detail--light .genealogy__btn:not(.genealogy__btn--icon):not(.genealogy__btn--danger):hover {
	background: rgba(154, 122, 60, 0.18);
	color: #7f6531;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.genealogy__detail--light .gdetail__photo {
	border-color: rgba(0, 0, 0, 0.14);
}

.genealogy__detail--light .gdetail__photo--placeholder {
	background: #f0efe9;
	color: #555555;
}

.genealogy__detail--light .gdetail__name {
	color: #1a1a1a;
}

.genealogy__detail--light .gdetail__private {
	border-color: rgba(0, 0, 0, 0.35);
}

.genealogy__detail--light .gdetail__badges li {
	border-color: rgba(0, 0, 0, 0.18);
}

.genealogy__detail--light .gdetail__badges li.on {
	border-color: rgba(0, 0, 0, 0.45);
}

.genealogy__detail--light .gdetail__section h3 {
	border-bottom-color: rgba(0, 0, 0, 0.12);
}

.genealogy__detail--light .gdetail__event {
	background: #f7f6f3;
	border-color: rgba(0, 0, 0, 0.1);
}

.genealogy__detail--light .gdetail__event--label {
	color: #1a1a1a;
}

.genealogy__detail--light .gdetail__event--source .link {
	color: #7a5c10;
}

.genealogy__detail--light .gdetail__event--source-tag,
.genealogy__detail--light .gdetail__event--media-item img,
.genealogy__detail--light .gdetail__media img {
	border-color: rgba(0, 0, 0, 0.16);
}

.genealogy__detail--light .gdetail__event--media-del,
.genealogy__detail--light .gdetail__media-btn {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.25);
	color: #333333;
}

.genealogy__detail--light .gdetail__event--media-del {
	color: #c44a2b;
	border-color: rgba(196, 74, 43, 0.6);
}

.genealogy__detail--light .gdetail__form,
.genealogy__detail--light .gdetail__edit {
	background: #fafaf8;
	border-color: rgba(0, 0, 0, 0.12);
}

.genealogy__detail--light .gdetail__form h4 {
	color: #1a1a1a;
}

.genealogy__detail--light .gdetail__form input,
.genealogy__detail--light .gdetail__form textarea,
.genealogy__detail--light .gdetail__form select,
.genealogy__detail--light .gdetail__edit input,
.genealogy__detail--light .gdetail__edit textarea {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.22);
	color: #1a1a1a;
}

.genealogy__detail--light .gdetail__media-btn--star.is-active {
	background: #43a047;
	border-color: #43a047;
	color: #ffffff;
}

.genealogy__detail--light .gdetail__media-btn--del {
	color: #c44a2b;
	border-color: rgba(196, 74, 43, 0.6);
}

.genealogy__detail--light .gdetail__event .genealogy__btn--icon:not(.genealogy__btn--danger) {
	background: #ffffff;
	border: none;
	border-radius: 5px;
	color: #3a3a3a;
	padding: 5px 7px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.genealogy__detail--light .gdetail__event .genealogy__btn--icon:not(.genealogy__btn--danger):hover {
	background: #f0f0f0;
	color: #1f1f1f;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.genealogy__detail--light .gdetail__event .genealogy__btn--icon svg {
	fill: none;
}

.genealogy__detail--light .gdetail__event .genealogy__btn--icon.genealogy__btn--danger {
	background: #ffffff;
	border: none;
	border-radius: 5px;
	color: #c44a2b;
	padding: 5px 7px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.genealogy__detail--light .gdetail__event .genealogy__btn--icon.genealogy__btn--danger:hover {
	background: #fbf1ee;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.genealogy__detail--light .gdetail__event .gdetail__event--addbtn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #ffffff;
	border: none;
	border-radius: 5px;
	color: #3a3a3a;
	padding: 5px 9px;
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.genealogy__detail--light .gdetail__event .gdetail__event--addbtn:hover {
	background: #f0f0f0;
	color: #1f1f1f;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.genealogy__detail--light .gdetail__event .gdetail__event--adds {
	display: inline-flex;
	gap: 6px;
	margin-left: 10px;
	vertical-align: middle;
}

.genealogy__detail--light .gdetail__event .gdetail__event--adds .gdetail__doc-upload {
	margin-left: 0;
}

// Ajustements écrans étroits : la barre passe sur deux lignes, la recherche
// occupe toute la largeur et les boutons de zoom/pan s'agrandissent un peu
// pour rester utilisables au doigt.
@media (max-width: @screen-s) {
	.genealogy__bar { padding: 0 16px; }
	.genealogy__bar-right { width: 100%; justify-content: space-between; }
	.genealogy__search { width: 100%; min-width: 0; }
	.genealogy__zoom .genealogy__btn,
	.genealogy__pan .genealogy__btn { padding: 6px 11px; font-size: 14px; }
}

// ---------------------------------------------------------------------------
// Statistiques
//
// Classements en barres CSS pures : aucun graphique JS, aucune dépendance.
// La largeur de chaque barre est posée en style inline par la vue
// (width: … %), l'échelle étant relative au plus grand élément du classement.
// ---------------------------------------------------------------------------

// Marge sous le bandeau fixe, identique à celle de l'arbre : le titre et les
// liens ne doivent pas coller au header. La largeur, elle, reste celle du
// container (contrairement à `body.layout-full`).
body.layout-stats {
	.container__content { padding-top: 132px; }

	@media all and (max-width: @screen-s) {
		.container__content { padding-top: 116px; }
	}
}

// Les cinq classements sont affichés en entier : la page ne défile pas, c'est
// le panneau de l'onglet choisi qui défile. `min-height: 0` sur chaque étage
// flex est indispensable — sans lui un enfant refuse de rétrécir sous la
// hauteur imposée et le conteneur déborde au lieu de scrolling.
.genealogy--stats {
	height: calc(~"100vh - 156px");
	min-height: 0;

	.gstat-tabs {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.gstat-tabs__bar { flex: none; }

	.gstat-panels {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		// Réserve la gouttière : les barres ne sautent pas d'un onglet à l'autre.
		scrollbar-gutter: stable;
	}

	@media all and (max-width: @screen-s) {
		height: calc(~"100vh - 140px");
	}
}

// Seul panneau de la page (hors erreur) : le bandeau d'échec de connexion à la
// base occupe ici toute la largeur, pas les 560px du formulaire de connexion.
// Les deux blocs sont frères, pas parent-enfant : d'où le sélecteur composed
// plutôt que `&__panel`, qui viserait un inexistant
// `.genealogy--stats__panel`.
.genealogy--stats .genealogy__panel {
	max-width: none;
}

// ---------------------------------------------------------------------------
// Onglets
//
// Cinq cases à cocher masquées (mais focusables) precede la barre d'onglets et
// les blocs : `#gstat-tab-3:checked ~ … .gstat-panel:nth-child(3)` affiche le
// seul classement choisi. Aucune quantity de JavaScript, et le clavier suit le
// groupe de boutons radio natif (les flèches changent d'onglet).
// ---------------------------------------------------------------------------
// Conteneur neutre : il ne porte que l'ordre du DOM, indispensable au `~`.
.gstat-tabs {
	// Case à cocher : invisible, mais elle reste dans le flux du clavier.
	&__radio {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	&__legend {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	&__bar {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin: 0 0 16px 0;
		padding: 0;
		border: 0;
		border-bottom: 1px solid rgba(218, 197, 168, .18);
	}
}

.gstat-tab {
	margin-bottom: -1px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 8px 8px 0 0;
	color: @color-text;
	font-family: @sans-serif;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	opacity: .6;
	transition: opacity 120ms ease, background-color 120ms ease;

	&:hover { opacity: .9; }
}

// Onglet actif : la case à cocher correspondante est `:checked`. Les cinq
// sélecteurs sont explicites plutôt que cascade sur l'ordre, pour rester
// lisibles : ajouter un classement oblige à les étendre.
#gstat-tab-1:checked ~ .gstat-tabs__bar label[for="gstat-tab-1"],
#gstat-tab-2:checked ~ .gstat-tabs__bar label[for="gstat-tab-2"],
#gstat-tab-3:checked ~ .gstat-tabs__bar label[for="gstat-tab-3"],
#gstat-tab-4:checked ~ .gstat-tabs__bar label[for="gstat-tab-4"],
#gstat-tab-5:checked ~ .gstat-tabs__bar label[for="gstat-tab-5"] {
	background: rgba(218, 197, 168, .1);
	border-color: rgba(218, 197, 168, .18);
	opacity: 1;
}

// Anneau de focus sur l'onglet quand on navigue au clavier (le `input` reste
// invisible, c'est le label qui porte le focus à l'écran).
#gstat-tab-1:focus-visible ~ .gstat-tabs__bar label[for="gstat-tab-1"],
#gstat-tab-2:focus-visible ~ .gstat-tabs__bar label[for="gstat-tab-2"],
#gstat-tab-3:focus-visible ~ .gstat-tabs__bar label[for="gstat-tab-3"],
#gstat-tab-4:focus-visible ~ .gstat-tabs__bar label[for="gstat-tab-4"],
#gstat-tab-5:focus-visible ~ .gstat-tabs__bar label[for="gstat-tab-5"] {
	outline: 2px solid rgba(218, 197, 168, .7);
	outline-offset: 2px;
}

.gstat-panel { display: none; }

#gstat-tab-1:checked ~ .gstat-panels .gstat-panel:nth-child(1),
#gstat-tab-2:checked ~ .gstat-panels .gstat-panel:nth-child(2),
#gstat-tab-3:checked ~ .gstat-panels .gstat-panel:nth-child(3),
#gstat-tab-4:checked ~ .gstat-panels .gstat-panel:nth-child(4),
#gstat-tab-5:checked ~ .gstat-panels .gstat-panel:nth-child(5) {
	display: block;
}

.gstat-block {
	background: rgba(218, 197, 168, .04);
	border: 1px solid rgba(218, 197, 168, .18);
	border-radius: 10px;
	padding: 20px 24px;

	&__title {
		margin: 0 0 4px 0;
		font-family: @sans-serif;
		font-size: 18px;
		font-weight: normal;
		color: @color-text;
	}

	&__meta {
		margin: 0 0 14px 0;
		font-size: 12px;
		line-height: 1.5;
		opacity: .55;
	}
}

// Sélecteur de périmètre d'un graphique. Absent tant qu'aucune branche
// n'existe : le classement GLOBAL s'affiche alors sans rien choisir.
.gstat-scope {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px 0;

	&__label {
		font-size: 12px;
		letter-spacing: .04em;
		text-transform: uppercase;
		opacity: .55;
	}

	&__select {
		font-family: @sans-serif;
		font-size: 13px;
		color: @color-text;
		background: rgba(218, 197, 168, .06);
		border: 1px solid rgba(218, 197, 168, .22);
		border-radius: 6px;
		padding: 4px 8px;
		max-width: 320px;
		cursor: pointer;

		&:focus-visible {
			outline: 2px solid rgba(218, 197, 168, .6);
			outline-offset: 1px;
		}

		&:disabled {
			opacity: .5;
			cursor: progress;
		}
	}

	// Message d'attente ou d'erreur, sous le sélecteur. Réservé à une ligne
	// pour éviter que le graphique ne saute quand le texte apparaît.
	&__note {
		flex: 1 1 100%;
		min-height: 1em;
		font-size: 12px;
		font-style: italic;
		opacity: .55;

		&--error {
			font-style: normal;
			color: #c44a2b;
			opacity: .9;
		}
	}
}

// Le chargement est signalé par l'opacité plutôt que par un spinner : les
// barres gardent leur place, donc rien ne bouge à l'arrivée des données.
.gstat-scope__bars--loading {
	opacity: .4;
	transition: opacity .12s ease-out;
}

// Rubrique « Branches » de l'administration : le select racine est long (tout
// l'arbre), il est donc filtré par une saisie au-dessus plutôt qu traduit.
.branch__root {
	flex: 1 1 320px;
}

.branch__filter {
	width: 100%;
	font-family: @sans-serif;
	font-size: 13px;
	color: @color-text;
	background: rgba(218, 197, 168, .06);
	border: 1px solid rgba(218, 197, 168, .22);
	border-radius: 6px;
	padding: 6px 8px;
}

.branch__rename {
	display: flex;
	gap: 6px;
	align-items: center;
}

.gstat {
	list-style: none;
	margin: 0;
	padding: 0;

	&__row {
		display: grid;
		// rang · libellé · barre · effectif
		grid-template-columns: 26px minmax(0, 1fr) 34% 86px;
		align-items: center;
		gap: 10px;
		padding: 4px 0;
		border-bottom: 1px solid rgba(218, 197, 168, .08);

		&:last-child { border-bottom: none; }

		// Sous le seuil medium, la barre cède la place à l'effectif : le
		// libellé garde la place, la proportion est lisible, et les chiffres
		// alignés évitent le saut de ligne.
		@media all and (max-width: @screen-m) {
			grid-template-columns: 22px minmax(0, 1fr) 74px;
			gap: 8px;

			.gstat__bar { display: none; }
		}
	}

	&__rank {
		font-size: 12px;
		text-align: right;
		opacity: .45;
		font-variant-numeric: tabular-nums;

		&--none { opacity: .25; }
	}

	&__name {
		font-size: 13px;
		color: @color-text;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__note {
		display: block;
		font-size: 11px;
		opacity: .5;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__bar {
		display: block;
		height: 8px;
		border-radius: 4px;
		background: rgba(218, 197, 168, .12);
		overflow: hidden;
	}

	&__fill {
		display: block;
		height: 100%;
		min-width: 2px;
		border-radius: 4px;
		background: linear-gradient(90deg, #7d2a00, #C40 70%, #d4551b);
	}

	&__value {
		font-size: 13px;
		text-align: right;
		color: @color-text;
		font-variant-numeric: tabular-nums;
	}

	&__pct {
		display: block;
		font-size: 11px;
		opacity: .5;
	}

	// « Non renseigné » : hors échelle, et volontairement en tête de liste.
	// griser plutôt que le colorer rappelle qu'il ne mesure pas la même chose
	// que les barres classées.
	&__row--missing {
		.gstat__name { opacity: .65; font-style: italic; }
		.gstat__fill { background: rgba(218, 197, 168, .22); }
	}

	// « Autres » : la queue de la distribution, sans barre (une barre à 0 %
	// se lirait comme une absence de données).
	&__row--others {
		.gstat__name { opacity: .6; }
		.gstat__bar {
			background: transparent;
			border: 1px dashed rgba(218, 197, 168, .28);
		}
	}
}

// Le classement des départements compte une trentaine de lignes : sur grand
// écran il se lit sur deux colonnes (ordre de lecture conservé : la 1re
// colonne contient les rangs 1 à n, la suivante la suite).
.gstat-block--wide .gstat {
	@media all and (min-width: (@screen-m + 1)) {
		column-count: 2;
		column-gap: 28px;
		column-rule: 1px solid rgba(218, 197, 168, .1);

		// Une coupure de colonne ne doit pas laisser de filet flottant ni
		// d'une barre tronquée visuellement.
		.gstat__row { break-inside: avoid; }
	}
}