::selection { background-color: transparent; color:inherit; }
::-moz-selection { background-color: transparent; color:inherit; }
#saisie_xy input::selection { color:white; background-color: var(--couleur-principale); }
#saisie_xy input::-moz-selection { color:white; background-color: var(--couleur-principale); }

/* Variables globales */
:root {
	--couleur-principale: #993165;
	--fond: #cdc2af;
	--fond-clair: #e4dbcd;
}

@font-face {
	font-family: 'Tusj';
	src: url('font/FFF_Tusj.ttf') format('truetype');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('font/opensans-300.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('font/opensans-400.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('font/opensans-400-italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src: url('font/opensans-600.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('font/opensans-700.ttf') format('truetype');
}

body, html {
	background-color: var(--fond);
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #2a2018;
}

a {
	text-decoration: none;
	color: var(--couleur-principale);
	font-weight: 600;
}

a:hover {
	color: #6e7ca8;
	transition: all 0.2s ease-out 0s;
}

header {
	background-color: var(--couleur-principale);
	margin: 0;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 8px rgba(60,40,30,0.18);
	color: rgba(255,255,255,0.75);
	font-size: 13px;
}

header a {
	text-decoration: none;
	color: rgba(255,255,255,0.9);
	font-weight: 400;
}

header a:hover {
	color: #fff;
}

.header-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.header-brand a {
	color: rgba(255,255,255,0.55);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-brand a:hover {
	color: rgba(255,255,255,0.9);
}

.header-brand img {
	height: 36px;
	opacity: 0.85;
}

section {
	clear: both;
	padding-left: 20px;
}

.controls-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0 16px;
}

#layout-shapes {
	display: none;
}

.hidden {
	display: none;
}

.inline {
	display: inline-block;
}

.cell {
	vertical-align: top;
	display: inline-block;
}

#info, #audio {
	width: 40px;
}

#audio {
	cursor: pointer;
}

.close {
	position: absolute;
	top: 0.5px;
	right: 0.5px;
}

#close img,
#close_filtre img {
	width: 12px;
}

#lang {
	display: inline;
	margin-right: 10px;
}

#lang img {
	margin-left: 5px;
	width: 25px;
}

.flag {
	filter: grayscale(100%) opacity(70%);
}

/*
Titre
*/

#titre {
	margin-left: auto;
	padding-right: 60px;
	padding-top: 10px;
	text-align: right;
	align-self: flex-start;
}

@media screen and (max-width: 1350px) {
	#titre {
		order: -1;
		width: 100%;
		margin-left: 0;
		padding-right: 0;
		padding-top: 6px;
		padding-bottom: 10px;
		text-align: left;
		margin-bottom: 8px;
		display: flex;
		align-items: flex-end;
		position: relative;
	}
	#titre::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: -10px;
		right: 10px;
		height: 1px;
		background: rgba(0,0,0,0.1);
	}
	[data-theme="sombre"] #titre::after {
		background: rgba(255,255,255,0.1);
	}
	#titre h2 {
		margin: 0;
		line-height: 1;
	}
	#titre #lang {
		order: 1;
		margin-left: auto;
	}
}

#titre h2 {
	display: inline-block;
	font-family: 'Tusj', 'Open Sans', sans-serif;
	font-size: 50px;
	margin-right: 10px;
	color: var(--couleur-principale);
}

#titre > span {
	font-size: 12px;
	color: #8a7e72;
	font-weight: 600;
	vertical-align: middle;
}

#titre > span a {
	color: #8a7e72;
	text-decoration: none;
}


/*
Selecteur
*/

#param {
	float: right;
}

#param img {
	width: 25px;
}

#param img:hover {
	cursor: pointer;
	filter: invert(45%);
}

#param span {
	display: none;
	position: absolute;
	z-index: 9999;
	color: black;
	text-align: left;
	font-weight: 300;
	font-size: 13px;
	background: var(--fond-clair);
	border: 1px solid white;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	padding: 4px;
	margin-left: 30px;
}

#param:hover span,
#param:focus-within span {
	display: block;
}


/* ── Titres de blocs ── */
.panel-title {
	font-variant: small-caps;
	font-size: 15px;
	font-weight: 700;
	color: var(--couleur-principale);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.panel-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(0,0,0,0.1);
	margin-left: 8px;
}

/* ── Pilules mode simple / mode avancé ── */
.mode-group {
	display: inline-flex;
	background: rgba(0,0,0,0.1);
	border-radius: 8px;
	padding: 3px;
	margin-bottom: 16px;
	gap: 3px;
}

.mode-group .bouton,
.mode-group .bouton_enfonce {
	width: auto;
	height: 28px;
	padding: 0 14px;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
	cursor: pointer;
	background: transparent;
	color: rgba(0,0,0,0.45);
	box-shadow: none;
	text-shadow: none;
	transition: all 0.15s;
	vertical-align: baseline;
}

.mode-group .bouton_enfonce {
	background: var(--fond-clair);
	color: #2a2018;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.mode-group .bouton:hover {
	background: transparent;
	color: rgba(0,0,0,0.7);
}

/* Styles génériques (hors mode-group) – conservés pour usage éventuel ailleurs */
.bouton {
	width: 110px;
	height: 26px;
	vertical-align: baseline;
	background: linear-gradient(#e4e0dd, #afa191);
	box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.4);
	border: none;
	border-radius: 8px;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
	font-weight: 600;
	cursor: pointer;
}

.bouton:hover {
	color: #222;
	background: linear-gradient(#e4e0dd, #afa191);
}

.bouton:focus-visible {
	outline: 2px solid var(--couleur-principale);
	outline-offset: 2px;
}

.bouton_enfonce {
	width: 110px;
	height: 28px;
	vertical-align: baseline;
	color: #000;
	background: var(--fond);
	border: none;
	border-radius: 8px;
	box-shadow: 1px 1px 5px black inset, 0 1px 0 rgba(255,255,255,0.2);
	font-weight: normal;
}

#selecteur {
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 20px;
	margin-top: 25px;
	box-shadow: 0 4px 16px rgba(60,40,30,0.18), 0 -1px 0 rgba(255,255,255,0.5);
	background-color: #c8bcaa;
	max-width: 320px;
	width: 100%;
}

#connexion {
	border-radius: 7px;
	padding: 20px;
	margin-bottom: 20px;
	margin-top: 25px;
	box-shadow: 0 0 10px black, 0 -1px 0 rgba(255,255,255,0.4);
	background-color: #bb879a;
	width: 390px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 1375px) {
	#selecteur {
		margin-bottom: 5px;
	}
	#tool1, #tool2 {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 768px) {
	/*#selecteur {
		max-width: 100%;
	}
	#categorie, #type {
		width: 100%;
	}*/
	#tool1, #tool2 {
		display: block;
		margin-left: 0;
		width: 100%;
		box-sizing: border-box;
	}
}

#selecteur label {
	font-variant: small-caps;
	font-size: 13px;
	font-weight: 700;
	display: inline-block;
	width: 120px;
	vertical-align: middle;
	color: #5a4e42;
}

#categorie, #type {
	width: 160px;
	height: 32px;
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 7px;
	padding: 0 10px;
	outline: none;
	transition: background 0.2s, border-color 0.2s;
}

#categorie:focus, #type:focus {
	background: rgba(255,255,255,0.8);
	border-color: var(--couleur-principale);
}

#saisie_xy {
	width: 180px;
}

#saisie_xy label {
	font-variant: small-caps;
	font-size: 14px;
	display: inline-block;
	width: 110px;
}

.bouton_valid {
	display: block;
	width: 200px;
	height: 36px;
	border: 2px solid var(--couleur-principale);
	border-radius: 9px;
	background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.04) 100%);
	box-shadow: 0 2px 6px rgba(153,49,101,0.15), 0 -1px 0 rgba(255,255,255,0.4);
	margin: 0 auto;
	margin-top: 40px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	transition: background 0.15s, box-shadow 0.15s;
}

.bouton_valid:hover {
	background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.02) 100%);
	box-shadow: 0 3px 12px rgba(153,49,101,0.3), 0 -1px 0 rgba(255,255,255,0.4);
}

.bouton_valid:focus-visible,
.bouton_afficher:focus-visible {
	outline: 2px solid var(--couleur-principale);
	outline-offset: 2px;
}

.bouton_afficher {
	display: block;
	width: 120px;
	height: 30px;
	background: rgba(255,255,255,0.4);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 7px;
	margin: 0 auto;
	margin-top: 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 12px;
	color: #5a4e42;
	font-family: 'Open Sans', sans-serif;
	transition: background 0.15s;
}

.bouton_afficher:hover {
	background: rgba(255,255,255,0.65);
	color: #3a2e22;
}

.btn-tool {
	display: block;
	width: 100%;
	height: 30px;
	background: rgba(255,255,255,0.4);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 7px;
	margin-top: 8px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: #5a4e42;
	font-family: 'Open Sans', sans-serif;
	transition: background 0.15s;
	text-align: center;
}

.btn-tool:hover {
	background: rgba(255,255,255,0.65);
	color: #3a2e22;
}

.tool-desc {
	font-size: 12px;
	color: #7a7060;
	margin: 0 0 6px;
}

.ajouter {
	text-align: center;
}

.ajouter img {
	width: 26px;
	vertical-align: bottom;
	margin-left: 10px;
	cursor: pointer;
}

#ajouter {
	display: inline-block;
}

#ajout_data_row,
#ajout_csv_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#ajout_data_row .btn-tool {
	margin-top: 0;
}

#mypoint_delete {
	width: 16px;
	cursor: pointer;
	padding-right: 4px;
}

#mypoint_delete:hover {
	filter: invert(30%);
}

/*
Outils
*/
#filtre_sp {
	margin-left: -8px;
	display: inline-block;
}

#filtre_sp img.actif {
	filter: invert(85%) sepia(30%) saturate(450%) hue-rotate(70deg) brightness(0.65);
}

#filtre_sp_info span {
	display: none;
	position: absolute;
	z-index: 9999;
	color: black;
	text-align: left;
	font-weight: 300;
	font-size: 13px;
	background: var(--fond-clair);
	border: 1px solid white;
	padding: 4px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	margin-left: 160px;
	margin-top: 10px;
}

#filtre_sp_info:hover span,
#filtre_sp_info:focus-within span {
	display: block;
}

#filtre_sp_info img {
	height: 15px;
	vertical-align: middle;
}

#liste_sp input[type=checkbox] {
	display: none;
}

#liste_sp input[type=checkbox]:checked + label {
	background-color: rgb(143,33,158,0.3);
	text-decoration: line-through;
}


#tool1, #tool2 {
	width: auto;
	display: inline-block;
	border-radius: 10px;
	padding: 18px 20px;
	margin-top: 25px;
	box-shadow: 0 1px 8px rgba(60,40,30,0.35), 0 -1px 0 rgba(255,255,255,0.5);
	background-color: #bfb4a0;
	font-size: 14px;
}

#tool1 .tool, #tool2 .tool {
	padding: 7px 0;
	border-bottom: 1px solid rgba(0,0,0,0.07);
	margin: 0;
}

#tool1 > div:nth-child(2),
#tool2 > div:nth-child(2) {
	padding-top: 0;
}

#tool1 .tool:last-child, #tool2 .tool:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.retrait {
	margin-top: 5px;
	display: inline-block;
}

.tool {
	margin-bottom: 5px;
	margin-top: 5px;
	vertical-align: top;
	width: auto;
}

.survol_txt:hover {
	cursor: pointer;
	color: var(--couleur-principale);
}

.tool #liste_sp, #saisie_xy {
	display: none;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	color: black;
	text-align: left;
	background: var(--fond-clair);
	border: 1px solid white;
	padding: 10px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	margin-left: 40px;
	margin-top: 5px;
}

.tool img {
	width: 17px;
	margin-left: 4px;
	margin-right: 5px;
	vertical-align: bottom;
}

.survol_photo img:hover, #moins:hover, #plus:hover {
	cursor: pointer;
	filter: invert(55%);
}

.tool li {
	list-style: none;
	font-variant: none;
	font-size: 14px;
}

.tool li:hover {
	cursor: pointer;
}

.tool li label {
	font-variant: none;
}

.tool label {
	font-weight: normal;
	color: #5a4e42;
	font-size: 13px;
}

.tool input[type=number] {
	width: 50px;
}




/* ── Mode expert : layout 1D/2D/3D + axes ── */
.axes-layout {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 6px 0 4px;
	padding-top: 10px;
	padding-left: 30px;
}

.axes-selects {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.axes-selects > div {
	display: flex;
	align-items: center;
	gap: 2px;
}

.axes-selects > div.hidden {
	display: none;
}

#selecteur .axes-selects label {
	font-weight: 700;
	font-size: 12px;
	color: #5a4e42;
	font-variant: small-caps;
	width: auto;
	margin-right: 10px;
	display: block;
	vertical-align: unset;
}

#x_dimension,
#selecteur .axes-selects select {
	background: rgba(61,45,45,0.30);
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 7px;
	height: 25px;
	padding: 0 8px;
	outline: none;
	transition: background 0.2s, border-color 0.2s;
}

#x_dimension:focus,
#selecteur .axes-selects select:focus {
	background: rgba(255,255,255,0.55);
	border-color: var(--couleur-principale);
}

#selecteur .axes-selects select {
	width: 160px;
}

/* Slider Convex hull */
.switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 14px;
	bottom: -4px;
	margin-left: 10px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliders {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
}

.sliders:before {
	position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	left: 2px;
	bottom: 1px;
	background-color: white;
	transition: .4s;
}

input:checked + .sliders {
	background-color: var(--couleur-principale);
}

input:focus + .sliders {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliders:before {
	transform: translateX(14px);
}

.sliders.round {
	border-radius: 14px;
}

.sliders.round:before {
	border-radius: 50%;
}

/* Slider opacité/points */
.slider {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 3px;
	-webkit-appearance: none;
	width: 100px;
	height: 5px;
	border-radius: 5px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	transition: opacity .2s;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--couleur-principale);
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--couleur-principale);
	cursor: pointer;
}

.chull {
	margin-left: 31px;
	margin-top: 3px;
	padding-left: 5px;
}

.chull p {
	margin-top: 2px;
	margin-bottom: 2px;
}



/*
Module Ajouts points
*/

#module_csv .inline {
	display: inline;
}

#csv_file {
	width: 230px;
}

#tool2 hr {
	width: 140px;
	margin-bottom: 18px;
}

#module_csv input[type=file] {
	margin-top: 10px;
}

.csv img {
	width: 28px;
	vertical-align: bottom;
	margin-bottom: -4px;
	margin-left: 10px;
}


/*
Precautions
*/

article {
	margin-top: 15px;
	margin-right: 20px;
	display: inline-block;
}

article h3 {
	margin: 0;
	margin-right: 10px;
	display: inline-block;
	font-size: 17px;
	color: var(--couleur-principale);
	font-variant: small-caps;
}

article img {
	width: 20px;
	vertical-align: -4px;
}

article img:hover {
	cursor: pointer;
}

article p {
	margin: 0;
	margin-top: 15px;
	padding: 0;
	font-size: 13px;
}

article p em {
	text-decoration: underline;
}


/*
Aside
*/

.clear {
	clear: both;
}

#reglage {
	font-size: 14px;
	font-weight: 300;
}

#reglage h3 {
	text-decoration: underline;
	font-style: italic;
	font-size: 14px;
	margin-top: 0;
	margin-bottom: 5px;
}

#reglage p {
	margin-top: 2px;
	margin-bottom: 0;
}

#reglage p strong {
	font-weight: 600;
}

#info_graphs {
	display: none;
	float: left;
	margin-top: 20px;
	font-size: 14px;
	padding-right: 20px;
	max-width: 350px;
}

#info_graphs a span {
	display: none;
	position: absolute;
	z-index: 9999;
	color: black;
	text-align: left;
	background: var(--fond-clair);
	border: 1px solid white;
	padding: 5px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
}

#info_graphs a:hover span,
#info_graphs a:focus-within span {
	display: block;
}

#icone .icon {
	width: 50px;
}

#icone .myotis img {
	vertical-align: bottom;
}

#icone .myotis1 > img {
	opacity: 0.5;
	width: 40px;
	vertical-align: center;
}

#icone .myotis1 span {
	margin-left: 30px;
}

#icone span {
	margin-top: 8px;
	margin-left: 30px;
}

#icone #myotis_transit1 {
	width: 870px;
}

#icone #myotis_transit2 {
	width: 750px;
}

#reglage:hover, .myotis:hover {
	cursor: zoom-in;
}

#player {
	display: none;
}

#player audio {
	width: 100%;
}

#player img {
	width: 25px;
	vertical-align: bottom;
	margin-right: 5px;
}

#player #wav_lieu {
	font-style: italic;
}

audio {
	display: block;
}

#legende strong {
	color: red;
	font-variant: small-caps;
}

#legende em {
	font-weight: 600;
	font-style: italic;
}

.ombre {
	padding: 18px 20px;
	background-color: #bfb4a0;
	box-shadow: 0 1px 8px rgba(60,40,30,0.35), 0 -1px 0 rgba(255,255,255,0.5);
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: 13px;
}

#wav > img {
	width: 40px;
}

#wavlist {
	padding-left: 0;
	margin-top: 10px;
}

#wavlist .audio {
	width: 18px;
	vertical-align: bottom;
	margin-right: 3px;
	margin-top: -5px;
}

#wavlist li {
	list-style: none;
	margin-bottom: 4px;
	margin-left: 0;
	cursor: pointer;
}

#wavlist li em {
	text-decoration: underline;
}

#wav_detail {
	max-width: 500px;
	font-weight: normal;
	margin-top: 8px;
	margin-left: 26px;
}


/*
Zone graphiques
*/

#graph {
	margin: 20px;
}

.graph {
	position: relative;
	overflow: hidden;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: rgb(181,173,158,0.6);
	vertical-align: top;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.45);
}

#graph_type {
	margin: 0;
	padding: 0;
}

#graph1 span {
	display: none;
	position: absolute;
	max-width: 320px;
	margin-top: -38px;
	margin-left: 50px;
	color: black;
	background: var(--fond-clair);
	border: 1px solid white;
	padding: 4px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
}

#graph1 a:hover span {
	display: block;
}


/* ════════════════════════════════════════════════════════════
   THÈME SOMBRE  –  [data-theme="sombre"]
   Overrides appliqués uniquement quand le thème sombre est actif.
   Le thème naturel (original) reste inchangé.
   ════════════════════════════════════════════════════════════ */

/* ── Fond global ── */
html[data-theme="sombre"],
[data-theme="sombre"] body {
	background-color: #1c1e2a;
	color: #e0ddd8;
}

/* ── Liens ── */
[data-theme="sombre"] a {
	color: #c0587e;
}
[data-theme="sombre"] a:hover {
	color: #d88aab;
}

/* ── Header ── */
[data-theme="sombre"] header {
	background: linear-gradient(90deg, #12141e 0%, #2a1a24 45%, #9b4a6a 72%, #12141e 100%);
	border-bottom: 1px solid rgba(192,88,126,0.25);
}
[data-theme="sombre"] header a {
	color: rgba(255,255,255,0.8);
}
[data-theme="sombre"] .header-brand {
	color: rgba(255,255,255,0.38);
}
[data-theme="sombre"] .header-brand a {
	color: rgba(255,255,255,0.45);
}
[data-theme="sombre"] .header-brand a:hover {
	color: rgba(255,255,255,0.8);
}

/* ── Titre GraphB ── */
[data-theme="sombre"] #titre h2 {
	color: #c0587e;
	text-shadow: 0 0 40px rgba(192,88,126,0.35);
}
[data-theme="sombre"] #titre span a {
	color: #7a7880;
}

/* ── Sélecteur principal ── */
[data-theme="sombre"] #selecteur {
	background-color: #252836;
	box-shadow: 0 0 12px rgba(0,0,0,0.65), 0 -1px 0 rgba(255,255,255,0.04);
}
[data-theme="sombre"] #selecteur label {
	color: #a09ea0;
}
[data-theme="sombre"] #selecteur p {
	color: #c0bdba;
}

/* ── Connexion ── */
[data-theme="sombre"] #connexion {
	background-color: #252836;
	box-shadow: 0 0 12px rgba(0,0,0,0.65), 0 -1px 0 rgba(255,255,255,0.04);
	color: #c0bdba;
}

/* ── Select / options ── */
[data-theme="sombre"] select {
	background-color: #1a1c26;
	color: #e0ddd8;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 4px;
}
[data-theme="sombre"] select option {
	background-color: #1a1c26;
}

/* ── Titres de blocs (thème sombre) ── */
[data-theme="sombre"] .panel-title {
	color: #c0587e;
}
[data-theme="sombre"] .panel-title::after {
	background: rgba(255,255,255,0.1);
}

/* ── Pilules mode-group (thème sombre) ── */
[data-theme="sombre"] .mode-group {
	background: rgba(255,255,255,0.06);
}
[data-theme="sombre"] .mode-group .bouton,
[data-theme="sombre"] .mode-group .bouton_enfonce {
	background: transparent;
	color: rgba(255,255,255,0.3);
	box-shadow: none;
	border: none;
}
[data-theme="sombre"] .mode-group .bouton_enfonce {
	background: rgba(255,255,255,0.1);
	color: #e0ddd8;
	box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
[data-theme="sombre"] .mode-group .bouton:hover {
	background: transparent;
	color: rgba(255,255,255,0.6);
}

/* ── Boutons ── */
[data-theme="sombre"] .bouton {
	background: linear-gradient(#353848, #252836);
	color: #a09ea0;
	box-shadow: 0 0 5px rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="sombre"] .bouton:hover {
	color: #e0ddd8;
	background: linear-gradient(#3e4158, #2e3048);
}
[data-theme="sombre"] .bouton_enfonce {
	background: #1c1e2a;
	color: #e0ddd8;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.7) inset, 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="sombre"] .bouton_valid {
	border-color: #c0587e;
	color: #e0ddd8;
	background: linear-gradient(#353848, #252836);
	box-shadow: 0 0 4px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.04);
}
[data-theme="sombre"] .bouton_afficher {
	border-color: #c0587e;
	color: #e0ddd8;
	background: linear-gradient(#353848, #252836);
	box-shadow: 0 0 4px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.04);
}
[data-theme="sombre"] .bouton:focus-visible,
[data-theme="sombre"] .bouton_valid:focus-visible,
[data-theme="sombre"] .bouton_afficher:focus-visible {
	outline-color: #c0587e;
}

/* ── Panneaux outils ── */
[data-theme="sombre"] #tool1,
[data-theme="sombre"] #tool2,
[data-theme="sombre"] .ombre {
	background-color: #252836;
	box-shadow: 0 0 10px rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.04);
	color: #c0bdba;
}
[data-theme="sombre"] .tool label {
	color: #a09ea0;
}
[data-theme="sombre"] .tool li label {
	color: #a09ea0;
}
[data-theme="sombre"] .survol_txt:hover {
	color: #c0587e;
}

/* ── Toggle switch (convex hull, lier) ── */
[data-theme="sombre"] .sliders {
	background-color: #3a3d52;
}
[data-theme="sombre"] input:checked + .sliders {
	background-color: #c0587e;
}

/* ── Sliders range ── */
[data-theme="sombre"] .slider {
	background: rgba(255,255,255,0.1);
}
[data-theme="sombre"] .slider::-webkit-slider-thumb {
	background: #c0587e;
}
[data-theme="sombre"] .slider::-moz-range-thumb {
	background: #c0587e;
}

/* ── Poignée de redimensionnement ── */
[data-theme="sombre"] .rsz {
	background: #c0587e !important;
}

/* ── Zone graphiques ── */
[data-theme="sombre"] .graph {
	background-color: rgba(30,32,48,0.85);
	border-color: rgba(255,255,255,0.1);
}

.graph-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	padding: 9px 16px;
	background: rgba(255,255,255,0.18);
	border-bottom: 1px solid rgba(255,255,255,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	font-variant: small-caps;
	color: #5a4e42;
	line-height: 1.3;
	box-sizing: border-box;
	z-index: 1;
	cursor: grab;
}

.graph-header:active {
	cursor: grabbing;
}

.graph .modebar-container {
	top: 36px !important;
}

.graph-drag-ghost {
	opacity: 0.4;
}

.graph-header::before {
	display: none;
}


[data-theme="sombre"] .graph-header {
	background: rgba(255,255,255,0.06);
	border-bottom-color: rgba(255,255,255,0.08);
	color: #b0aeb8;
}

/* ── Tooltips / popovers ── */
[data-theme="sombre"] #param span,
[data-theme="sombre"] #filtre_sp_info span,
[data-theme="sombre"] .tool #liste_sp,
[data-theme="sombre"] #saisie_xy,
[data-theme="sombre"] #info_graphs a span,
[data-theme="sombre"] #graph1 span {
	background: #2e3245;
	border-color: rgba(255,255,255,0.12);
	color: #c0bdba;
}

/* ── Liste espèces ── */
[data-theme="sombre"] #liste_sp input[type=checkbox]:checked + label {
	background-color: rgba(192,88,126,0.25);
	color: #c0bdba;
}

/* ── Inputs numériques (saisie manuelle) ── */
[data-theme="sombre"] #saisie_xy input[type=number] {
	background-color: #1a1c26;
	color: #e0ddd8;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 4px;
}
[data-theme="sombre"] #saisie_xy label {
	color: #a09ea0;
}

/* ── Article précautions ── */
[data-theme="sombre"] article h3 {
	color: #c0587e;
}
[data-theme="sombre"] article p {
	color: #a09ea0;
}

/* ── Icônes PNG traits noirs (info_graphs + sons) ── */
[data-theme="sombre"] #icone .icon,
[data-theme="sombre"] #icone #sonogram img,
[data-theme="sombre"] #wav > img,
[data-theme="sombre"] #player a > img,
[data-theme="sombre"] img.audio {
	filter: invert(1) opacity(0.7);
}

/* ── Section info_graphs / légende ── */
[data-theme="sombre"] #info_graphs {
	color: #a09ea0;
}
[data-theme="sombre"] #reglage h3 {
	color: #c0bdba;
}
[data-theme="sombre"] #reglage p {
	color: #a09ea0;
}
[data-theme="sombre"] #legende strong {
	color: #ff6b8a;
}
[data-theme="sombre"] #legende em {
	color: #c0bdba;
}
[data-theme="sombre"] #wavlist li {
	color: #a09ea0;
}
[data-theme="sombre"] #wavlist li em {
	color: #c0587e;
}


/* ── Lecteur audio ── */
[data-theme="sombre"] #player {
	color: #a09ea0;
}
[data-theme="sombre"] #wav_lieu {
	color: #7a7880;
}

/* ── img filtres (hover invert adapté au fond sombre) ── */
[data-theme="sombre"] .survol_photo img:hover,
[data-theme="sombre"] #moins:hover,
[data-theme="sombre"] #plus:hover {
	filter: invert(35%) sepia(0.5) hue-rotate(280deg) saturate(2);
}

/* ── Sélecteur de thème (fixe bas-droite) ── */
#theme-switcher {
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 5px;
	background: rgba(20,18,16,0.82);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 22px;
	padding: 5px 7px 5px 11px;
	box-shadow: 0 3px 14px rgba(0,0,0,0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
#theme-switcher-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.38);
	text-transform: uppercase;
	letter-spacing: .07em;
	white-space: nowrap;
	margin-right: 2px;
}
.tsw-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 16px;
	background: transparent;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.38);
	cursor: pointer;
	transition: all .2s;
	white-space: nowrap;
}
.tsw-btn:hover {
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.75);
}
.tsw-btn.active {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.25);
	color: #fff;
}
.tsw-swatch {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.2);
	flex-shrink: 0;
}
.tsw-swatch-naturel { background: #cdc2af; }
.tsw-swatch-sombre  { background: #252836; border-color: rgba(255,255,255,0.3); }