/* Style pour l'éditeur de texte enrichi */

/*
   IMPORTANT: Les tailles de plusieurs éléments sont données en unité 'em' (ou 'rem')
              car ils sont placés relativement aux lignes du texte en cours d'écriture.
              Leur position dépend donc de la police utilisée par le navigateur et
              de sa taille.
*/

article.text-editor [contenteditable=true] {
	cursor: text;
}

form.edit fieldset label.text-editor {
	padding-bottom: 0;
}

form.edit fieldset textarea.text-editor,
form.edit article.text-editor {
	width: 100%;
	background-color: var(--editor-bg);
	font-weight: normal;	
}

form.edit fieldset textarea.text-editor {
	height: 30em;
	margin: 15px 0;
	padding: 0 1em;
}

form.edit article.text-editor {
	margin: 0 0 1em 0;
	padding: 0 4em;
}

/* On masque la recherche dans les menus contextuels.
   Ça prend de la place et ça ne sert pas vraiment. */
.ce-popover .cdx-search-field {
	display: none;
}

.cdx-block {
	margin: 0.5em; /* Sans ça, certains boutons des tableaux débordent sur les autres éléments. */
}

form.edit article.text-editor .tc-table {
	margin: 0.2em 0;
	background-color: whitesmoke; /* pour avoir le même fond que les tables. */
}

form.edit article.text-editor .tc-row,
form.edit article.text-editor .tc-add-column {
	border: none;
}

form.edit article.text-editor .tc-row:nth-child(odd) {
	background-color: var(--table-row-bg-odd);
}

form.edit article.text-editor .tc-row:nth-child(even) {
	background-color: var(--table-row-bg-even);
}

form.edit article.text-editor .tc-row:hover {
	background-color: var(--table-row-bg-hov);
}

form.edit article.text-editor .tc-cell {
	text-align: center;
	padding: 0.25em;
	border: 1px solid var(--editor-bg);
}

form.edit article.text-editor .tc-cell[ heading='Heading' ] {
	/* On change le fond (par rapport aux tables du site),
	   d'abord parce que sinon on ne ferait pas la différence
	   avec celui de l'éditeur, ensuite parce que ce ne sont pas
	   des colonnes triables par les lecteurs. */
	color: white;
	background-color: black;
}

div#win-image-selection {
	top: 75px;
	width: 50vw;
	transform: translate(50%, 75px);
}

form#frm-image-selection > fieldset {
	border: solid 1px darkgray;
	margin-top: 1rem;
}

form#frm-image-selection > fieldset > input[type="radio"] + label {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

form#frm-image-selection > fieldset > input[type="radio"] + label:hover {
	background-color: darkgray;
}

form#frm-image-selection > fieldset > input[type="radio"]:not(:checked) + label + div#img-upload,
form#frm-image-selection > fieldset > input[type="radio"]:not(:checked) + label + div#img-gallery {
	display: none;
}

form#frm-image-selection div#img-upload > label,
form#frm-image-selection div#img-upload > div {
	float: left;
	margin-top: 1rem;
	min-width: 146px; /* pour changer les positions a partir du mode bobby. */
}

form#frm-image-selection div#img-upload > div {
	width: 100%;
}

form#frm-image-selection div#img-upload > label > textarea,
form#frm-image-selection div#img-upload > label > input {
	display: block;
	width: 90%;
}

form#frm-image-selection div#img-upload > label > input[type=checkbox] {
	width: auto;
	display: inline;
}

form#frm-image-selection div#img-upload > label {
	width: 70%;
}

form#frm-image-selection div#img-upload > label + label {
	width: 30%;
}

form#frm-image-selection div#img-drop-zone {
	width: 80%;
	margin: auto;
	padding: 1rem;
	text-align: center;
	color: darkgray;
	background-color: whitesmoke;
}

form#frm-image-selection div#img-drop-zone.drop-enabled {
	background-color: aliceblue;
}

form#frm-image-selection div#img-drop-zone > p {
	display: block;
	text-align: center;
	font-weight: bold;
}

form#frm-image-selection div#img-drop-zone > span {
	font-size: 120px;
	font-weight: bold;
}

form#frm-image-selection div#img-drop-zone img#img-upload-preview {
	max-width: 50%;
	max-height: 200px;
}

form#frm-image-selection div#img-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, auto));
	margin: 1em auto;
	padding: 0.5rem;
	max-height: 425px;
	overflow-y: auto;
	background-color: whitesmoke;
}

form#frm-image-selection div#img-gallery > input[type="radio"] {
	display: none;
}

form#frm-image-selection div#img-gallery > label {
	margin: 0.5rem;
	padding: 0.5rem;
	/* Evite le décalage vertical avec le label adjacent lorsque ce dernier
	   est sélectionné. */
	border: solid 2px transparent;
}

form#frm-image-selection div#img-gallery > label:hover {
	border: solid 2px rgba(114, 159, 207, 0.5); /* couleur du golfe */
}

form#frm-image-selection div#img-gallery > input:checked + label {
	border: solid 2px rgba(114, 159, 207, 1); /* couleur du golfe */
}

form#frm-image-selection div#img-gallery > label > i {
	font-weight: normal;
	font-size: small;
}

form#frm-image-selection div.action-set {
	margin-bottom: 0;
}

form.edit article.text-editor div.map div.ol-grab {
	cursor: grab;
}

form.edit article.text-editor div.map div.ol-grabbing {
	cursor: grabbing;
}


@media (max-width: 1100px) and (min-width: 700px) {

	div#win-image-selection {
		width: 80%;
		right: 50%;
	}
}


@media (pointer:coarse), (max-width:700px) {

	form.edit article.text-editor {
		padding: 0;
	}

	div#win-image-selection {
		top: 40px;
		max-height: calc(100vh - 40px);
		width: 96%;
		right: 50%;
		padding-top: 0;
		transform: translate(50%, 40px);
	}

	form#frm-image-selection div#img-upload > label {
		width: 100%;
	}

	form#frm-image-selection div#img-drop-zone {
		display: none;
	}

	form#frm-image-selection div#img-gallery {
		max-height: 50vh;
	}
	
	form#frm-image-selection div.action-set {
		margin-top: 0;
		margin-bottom: 0;
	}
}