.page-normal.species-analysis {
    max-width: 80vw;
    .proba-analysis {
	padding: 0.2em;
	margin: 0.2em;
	border-radius: 0.2cm;
	background-color: color-mix(in hsl, var(--color) 3%, white);
	color: var(--color);
	font-size: 0.7em;
    }

    .high { --color: var(--color-green); }
    .medium { --color: var(--color-warning); }
    .low { --color: var(--color-err); }

    h3 {
	margin-top: 1em;
	margin-bottom: 1em;
    }
    .tree-found {
	border-radius: 0.2cm;
	background-color: var(--color-green-light);
	color: var(--color-green);
	padding: 0.2em;
	margin: 0.2em;
    }
    .tree-found::before {
	content: "✔";
    }

    .tree-confusion {
	border-radius: 0.2cm;
	background-color: color-mix(in hsl, var(--color-err) 40%, white);
	color: color-mix(in hsl, var(--color-err) 80%, black);
	padding: 0.2em;
	margin: 0.2em;
    }
    .tree-confusion::before {
	content: "×";
    }

    .tree-question {
	margin-left: 0.4em;
	border-left: 2px solid gray;
    }

    .tree-answer::before {
	content:"—";
	padding-right: 1em;
    }
    .tree-answer-txt {
	border-radius: 0.2cm;
	background-color: color-mix(in hsl, var(--color-blue) 40%, white);
	color: color-mix(in hsl, var(--color-blue) 80%, black);
	padding: 0.2em;
	margin: 0.2em;
	font-family: Mono;
	font-size: 0.8rem;!important
    }

    .tree-question-txt {
	padding-left: 0.4em;
	font-size: 1.2em;
    }


    summary {
	font-size: 1.4em;
	font-weight: normal;
	border-bottom: none;
    }

    details[open] summary {
	border-bottom: none;
    }

    .node {
	line-height: 2em;
    }

    details.tree-answer {
	margin: 0;
	padding: 0;

	border: none;
    }

    details[open] summary::marker {
	display: none;
    }

    details.tree-answer summary {
	display: inline list-item;
	border-bottom: none!important;
    }

    .node.tree-question {
	margin-top:-1em;
	padding-top: 1em;
    }
    summary .tree-confusion {
	font-size: 0.7em;
    }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--fs-normal);
  line-height: 1.2;
  color: var(--color-text);
  /* -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important; */
}

#body {
    position: relative;
}
button {
  background: none;
  border: none;
}


.link-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

/*# sourceMappingURL=base.css.map */
/* button, input[type="submit"] { */
/*     padding: 0.3ch; */
/*     color: var(--data-color); */
/*     border: 1px solid currentColor; */
/*     background-color: var(--data-color-light); */
/*     border-radius: 0.5ch; */
/* } */

/* button:hover, input[type="submit"]:hover { */
/*     background-color: var(--data-color-medium); */
/*     cursor: pointer; */
/* } */

button:hover{
    cursor: pointer;
}
.standalone {
    --page-w: 21cm;
    --page-h: 29.7cm;
}
.standalone.page .page-container {
	transform: scale(1.414);
	transform-origin:top left;
}	
.liste-livret {
    margin-top: 1em;
    margin-bottom: 1em;
    border-top: 1px solid var(--color-violet-light);
    .livret {
	display: flex;
	flex-direction: row;
	padding-top:calc(var(--padding-inner) * 0.5);
	padding-bottom:calc(var(--padding-inner) * 0.5);
	height: 4em;
	border-bottom: 1px solid var(--color-violet-light);
	border-top: 1px solid var(--color-violet-light);
	figure {
	    width: 60px;
	    aspect-ratio: 1;
	    border-radius: var(--radius-img);
	}
	.name {
	    flex-grow: 1;
	    display: flex;
	    margin-inline: 1ch;
	    flex-direction: column;
	    gap: 0.3em;
	    .title {
		font-weight: bold;
		font-size: var(--fs-medium);
		color: var(--color-violet);
		background-color: transparent;
	    }
	    .description {
		font-style: italic;
	    }
	}
	&:hover {
	    border-color: 1px solid var(--color-violet);
	    background-color: var(--color-violet-light);
	}
    }
}
.collection-subtitle {
    display: flex;
    flex-direction: row;
    gap: 3em;

    figure img {
	width: 6em;
	height: 6em;
    }
    p {
	font-style: italic;
    }
}
.owners li div {
    display: flex;
    flex-direction: row;
}
[data-page="collections"] {
    .livrets {
	padding-left: 64px;
    }

    .livrets:has(.livret:only-child) {
	padding-left: 0px;
    }
    .livrets:has(.livret:only-child) ~ .collection-header {
	display: none;
    }
    .collection {
	margin-top: calc(2*var(--padding-inner));
	margin-bottom: calc(2*var(--padding-inner));
    }

    .species-number {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--data-color);
	.number {
	    font-size: 30px;
	}
	.label {
	    font-size: var(--fs-small);
	}
    }
	
}

svg.completion {
    display: inline-block;
    height: 2em;
    width: 2em;
    fill: none;
    padding: 0.1em;
    path, circle {
	stroke-width: 3px;
    }	
    .filled {
	fill: var(--color-orange-medium);
	/* stroke: var(--color-orange-medium); */
	/* stroke-width: 3px; */
    }
    .verified {
	fill: var(--color-green);
	/* stroke: var(--color-green); */
	/* stroke-width: 3px; */
    }
    circle {
	fill: var(--color-x-light);
	stroke: var(--color-txt);
    }
}
.completion-main {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    width: 100%;
    .completion-input {
	width: 100%;
	.input {
	    display: inline-flex;
	    width: 100%;
	}
    }
    input {
	width: 100%;
	margin-right: 0;
    }
}
.candidates {
    max-height: 15em;
    overflow: auto;
    position:absolute;
    background-color: white;
    z-index: 2;
    margin-inline: 2ch;
    
}
.candidate {
    padding-right: 1em;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border: 1px solid hsl(200, 90%, 30%);
    font-size: 0.8em;
    min-width: 100%;
    text-align: left;
    figure {
	aspect-ratio: 1;
	height: 100%;
	flex-grow: 0;
	img {
	    object-fit: cover;
	    width: 100%;
	    height: 100%;
	}
    }
    &:hover{
	background-color: hsl(200, 90%, 90%);
	cursor:pointer;
    }
    .name {
	display: flex;
	margin-left: 1ch;
	flex-grow: 1;
	flex-direction: column;

	.title {
	    font-weight: bold;
	}
	.subtitle {
	    font-size: 0.9em;
	}
    }

    .right {
	/* flex-grow: 0; */
    }

}

.candidate:has(figure) {
    height: 3em;
}

.completion-main:not(:has(input:focus, .candidate:hover)) .candidates {
  display: none;
}
.described-list {
    .described-list-item {
	border-bottom: 1px solid var(--data-color-medium);
	border-top: 1px solid var(--data-color-medium);
	&:hover {
	    border-color: var(--data-color);
	    background-color: var(--data-color-light);
	}	
	.main {
	    --item-height: 64px;
	    height: var(--item-height);
	    display: flex;
	    flex-direction: row;
	    border-bottom: 1px solid var(--data-color-light);
	    figure {
		height: var(--item-height);
		width: var(--item-height);
	    }
	    .name {
		flex-grow: 1;
		display: flex;
		margin-inline: 1ch;
		flex-direction: column;
		justify-content: space-around;
		gap: 0.3em;
		.title {
		    font-weight: bold;
		    font-size: 30px;
		    color: var(--data-color);
		    background-color: transparent;		
		}
		.subtitle {
		    font-style: italic;
		}
	    }
	}
	.description {
	    margin-left: 3ch;
	    font-size: 0.8em;
	    p {
		font-style: italic;
	    }
	}
    }
}
dialog {

    max-width: var(--max-width-container);
    margin: auto;
    padding : 0;
    position: fixed;
    overflow : visible;
    .title {
	text-align: center;
	margin-top : 1em;
    }
    
    .dialog__content {
	padding: 4ch;
	padding-top: 0;
    }
    .btn-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 2em;
	height:2em;
	.icon{
	    width: 2em;
	    vertical-align: bottom;
	}
    }

    #dialog__notifications {
	display: flex;
    }

    #dialog__notifications div {
	flex-grow: 1;
	width: 0;
    }
}
dialog::backdrop {
    backdrop-filter: blur(5px);
    min-height: 50vh;
    min-width: 50vw;
    margin: auto;
}
div.errors {
    a { color: blue; text-decoration: underline;& }
    .message {
	font-family: Monospace;
	white-space: pre;
	border-left: 2px solid hsl(0, 80%, 30%);
	background-color: hsl(0, 80%, 90%);
	color: 2px solid hsl(0, 80%, 30%);
	padding-left: 1em;
	margin-left: 1em;
    }

    .correct {
	background-color: hsl(90, 80%, 90%);
	color: 2px solid hsl(90, 80%, 30%);
    }
}

.view-branch {
    .correct {
	background-color: hsl(90, 80%, 90%);
	color: 2px solid hsl(90, 80%, 30%);
    }
    a { color: blue; text-decoration: underline; }
    h2.failure {
	background-color: hsl(0, 80%, 90%);
	color: 2px solid hsl(0, 80%, 30%);
    }	
    .message {
	font-family: Monospace;
	white-space: pre;
	border-left: 2px solid hsl(0, 80%, 30%);
	background-color: hsl(0, 80%, 90%);
	color: 2px solid hsl(0, 80%, 30%);
	padding-left: 1em;
	margin-left: 1em;
	text-wrap: balance;
    }
}

.content:has(div.errors) {
    margin-inline: 4em;
    max-width: 100vw;
}
.errors {
    display: grid;
    grid-template-columns: 20% 30% 25% 25%;
    .title {
	font-weight: bold;
    }

    pre {
	text-wrap: wrap;
	font-size: 0.8em;
	margin-left: 1ch;
    }
    div {
	border: 1px solid black;
    }
    div.success {
	background-color: lightgreen;
    }
    div.error {
	background-color: #ffaaaa;
    }
    tr:nth-child(even) {
	background-color: beige;
    }
}
input[type=file]::file-selector-button {
    display: none;
}

input[type='file'] {
    display: none;
}
fieldset {
    --color: black;
  background-color: var(--color-beige);
  
  color: var(--color);
  border-color: var(--color);
  /* border-radius: 0px; */
  box-shadow: 1px 1px 1px hsl(var(--color), 50%, 10%);
  display: flex;
  flex-direction: column;
  justify-items: centered;
  padding: 2ch;
  margin-top: 1em;
  margin-bottom: 1em;
  .fieldset-descr {
      margin-bottom: 1em;
      color:#333333;
      font-size: 0.9em;
  }
}
legend {
  font-weight: bold;
  font-size: 1.5em;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  color: hsl(var(--button-hue), 100%, 20%);
  border-inline: 2px solid currentColor;
  padding-inline: 0.2em;
	
}
label:has(input[type="submit"]) {
    margin: auto;
    border: 1px solid currentColor;
    border-radius: var(--radius-btn);
    font-size: 0.9em;
    font-weight: bold;
    padding-inline: 4px;
    display: inline;
    input[type="submit"] {
	display: none;
    }
    &:hover {
	background-color:var(--color-x-light);
	cursor: pointer;
    }
}
input[type="text"] {
    height: 2.3em;
    padding-inline: 1ch;
}
input[type="checkbox"] {
    margin-inline: 1ch;
}
label input[type="text"] {
    margin-inline: 2ch;
}

form label {
    margin-top:0.3em;
    margin-bottom: 0.3em;
    display: block;
}

fieldset {
    .form-description {
	font-weight: bold;
    }
    label textarea {
	display: block;
	margin-left: 2ch;
	margin-top:1em;
	margin-bottom:1em;
    }
}

fieldset {
    background-color: var(--data-color-light);
    legend {
	color: var(--data-color);
    }
}
    
select {
    color: var(--color-text);
    border-color: currentColor;
    background-color: var(--color-xx-light);
    padding-inline: 1ch;
}
.page-normal {
    max-width: calc(var(--max-width-content) * 1.3);
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;

    h2 {
	font-size: 2em;
    }
}

.btn-text {
    color: var(--color-violet);
    &:hover {
	text-decoration: underline;
    }
}

.page-header, .page-normal, dialog {
    details {
	margin-left: 2em;
	border: 1px solid black;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	background-color: var(--data-color-light);
	summary {
	    font-size: var(--fs-subtitle);
	    font-weight: bold;
	    color: var(--data-color);
	    padding-bottom: var(--padding-inner);
	    padding-top: var(--padding-inner);
	    border:none;
	}
    }
    details[open] > summary {
	border-bottom: 1px solid var(--data-color);
	border-bottom: 1px solid gray;
	margin-bottom: 0.5em;
    }
}


figure img {
    max-width: 100%;
    max-height:100%;
}

.edit-button-icon {
    width: 20px;
    height: 20px;
    padding: 0.3em;
    border-radius: 100%;
    color: var(--color-text);
    border: 1px solid currentColor;
    margin-inline: 1ch;
    vertical-align: middle;
    &:hover {
	background-color: var(--color-light);
    }
    img {
	width: 100%;
	height: 100%;
    }
	    
}
figure:has(img[src=""]) {
    display: none;
}
figure {
    position: relativecd
    img {
	max-width: 100%;
	max-height: 100%;
    }
    > button.remove-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 5%;
	aspect-ratio: 1;
    }
}
a {
    color: inherit;
    text-decoration: none;
}



abbr .icon{
    cursor: help;
    text-decoration: none;
}

.latin { font-style: italic; }

.editable-empty {
    color: darkgray;
    font-style: italic;
}
    
a.link {
    color: var(--data-color);
    &:hover {
	text-decoration: underline;
    }
    &.large {
	font-size: 1.2em;
    }
}

a.button {
    margin: 5px;
    border: 1px solid var(--color-txt);
    display: inline-block;
    padding: 5px;
    &:hover {
	background-color: var(--color-txt-light);
    }
}

.popup {
    display: inline-block;
    position: relative;
}

.popup-content {
    display: none;
    position: absolute;
    --color: var(--color-text);
    background-color:var(--color-beige);
    border: 1px var(--color) solid;
    font-size: 1rem;
    z-index: 2;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 15em;
    font-weight: normal;
    
}

.popup-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popup-content li {
    margin: 0;
    text-wrap: nowrap;
    padding: 0.2em;
    border: 1px var(--color) solid;
}

.popup:hover .popup-content {
    display: block;
}

.popup-content ul li:hover {
    background-color:color-mix(in hsl, var(--color-beige) 80%, black);
}

ul {
    margin-left: 3ch;
}

aside#toolbar {
    position: fixed;
    top:calc(var(--header-h)+30px);
    right: 1ch;
    z-index: 2;
    margin-bottom:0;
    margin-top: 0;
    padding-top:var(--padding-inner);
    padding-bottom:var(--padding-inner);
    color:var(--color-violet);
    height: auto;
    display: flex;
    flex-direction: column;
}

table {
    tr:nth-child(even) {
	background-color: beige;
    }
}
.illustrated-list {
    .illustrated-list-item {
	display: flex;
	--item-height: 64px;
	height: var(--item-height);
	flex-direction: row;
	/* padding-top:calc(var(--padding-inner) * 0.5); */
	/* padding-bottom:calc(var(--padding-inner) * 0.5); */
	border-bottom: 1px solid var(--data-color-light);
	border-top: 1px solid var(--data-color-light);
	figure {
	    height: 100%;
	    width: var(--item-height);
	    aspect-ratio: 1;
	    border-radius: var(--radius-img);
	    flex-grow: 0;
	    img {
		aspect-ratio: 1;
		height: 100%;
		object-fit:contain;
	    }
	    &:not(:has(img)) {
		/* background-color: var(--data-color-light); */
	    }
			      
	}
	.name {
	    flex-grow: 1;
	    display: flex;
	    margin-inline: 1ch;
	    flex-direction: column;
	    gap: 0.3em;
	    .title {
		font-weight: bold;
		font-size: var(--fs-medium);
		color: var(--data-color);
		background-color: transparent;		
	    }
	    .subtitle {
		font-style: italic;
		overflow: hidden;
	    }
	}
	&:hover {
	    border-color: var(--data-color);
	    background-color: var(--data-color-light);
	}	
    }
}
	
dialog.photo  {
    figure:has(img[src=""]) {
	display: none;
    }
}
	
.image-picker {
    margin-left: 1em;
    display: flex;
    flex-direction: column;
    margin-top: 1.5em;
    gap: 0.5em;
    max-width: 7em;
    img {
	max-width:100%;
	height: auto;
    }
    .buttons {
	display: flex;
	flex-direction: row;
	gap: 1ch;
    }
    margin-bottom: 0.3em;
}

.image_div {
    height: var(--max-height);
    width: var(--max-width);
    position: relative;
    margin: auto;
    border: 3px solid black;
    box-sizing: content-box;
    img, canvas {
	width: 100%;
	height: 100%;
	max-height: 100% ;
	position: absolute;
	top: 0;
	left: 0;
    }
}
/* Loading and notification */

.loading {
    --color: var(--color-yellow);
}
.success {
    --color: var(--color-green);
}
.error {
    --color: var(--color-err);
}
.warning {
    --color: var(--color-warning);
}
#loading-screen img, img.rotate {
    animation: rotation 2s infinite linear;
    margin-right: 1em;
}

.confirmation-box{
    border-color : var(--color-err);
    min-width : auto;
    min-height : auto;
}

@keyframes rotation {
    from {
	transform: rotate(0deg);
    }
    to {
	transform: rotate(359deg);
    }
}
.loader-icon {
    width: 1em;
    height: 1em;
    border: calc(1em/10) solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    margin-inline: 1ch;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader-icon-disabled {
    width: 1em;
    height: 1em;
    margin-inline: 1ch;
    box-sizing: border-box;
    display:inline-block;
}

#notifications {
    z-index: 99;
    position: fixed;
    top: 6em;
    left: 0em;
    padding-inline: 15vw;
    width: 100vw;
    box-sizing: border-box;
    .notification {
	font-size: 1.5em;
	padding: 0.5em;
	margin: 1em;
	background-color: color-mix(in hsl, var(--color) 50%, white);
	color: var(--color);
	border: 3px solid var(--color);
    }
    .notification img {
	max-height: 2em;
	vertical-align: middle;
	margin: 0.3em;
    }
}

body:has(dialog[open]) #notifications{
    display : none;
}

#dialog__notifications{
    height: 4ch;
    
    .notification {
	padding: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
	background-color: color-mix(in hsl, var(--color) 50%, white);
	color: var(--color);
	border: 1px solid var(--color);
	line-height: 2;
	font-size: small;
    }
    .notification img {
	max-height: 1em;
	vertical-align: middle;
	margin: 0.3em;
    }
}
.page-content {
  font-size: var(--fs-medium);
  line-height: 1.4;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--padding-body);
  margin-bottom: 30vh;
}
.page-content.large {
      max-width: calc(1.3*var(--max-width-content));
}
.page-content p {
  margin: var(--spacing) 0;
}
.page-content ol, .page-content ul {
  margin-left: calc(var(--spacing) * 2);
}
.page-content li {
  margin: calc(var(--spacing) * 0.5) 0;
}
.page-content > h3 {
  font-size: 1.8em;
  line-height: 1.1;
  font-weight: bold;
  color: var(--data-color);
  padding-top: var(--top-target);
  margin-bottom: calc(var(--spacing) * 1.5);
}
.page-content h4 {
  font-size: 1.2em;
  color: var(--data-color);
  font-weight: bold;
  margin-top: calc(var(--spacing) * 3.5);
  margin-bottom: calc(var(--spacing) * 1.5);
}
.page-content p a {
  color: var(--color-txt);
  text-decoration: 2px underline dotted var(--color-green-medium);
}
.page-content a .icon {
  display: inline-block;
  width: 18px;
  height: 18px;
}
.page-content a .icon * {
  width: 100%;
  height: 100%;
}
.page-content p a .icon {
  position: relative;
  top: 2px;
}
.page-content p a .icon svg {
  fill: var(--color-green);
}
.page-content p a:hover {
  color: var(--color-green);
  text-decoration: 2px underline solid var(--color-green-medium);
}

.page-nav + .page-content > :first-child {
  padding-top: 0px;
}
.page-nav + .page-content > :first-child:target {
  padding-top: var(--top-target);
}

/*# sourceMappingURL=page-content.css.map */
.page-grid {
  max-width: calc(var(--max-width-content) * 1.3 + var(--padding-inner) * 2 + var(--padding-body) * 2);
  display: grid;
  grid-template-columns: 1fr var(--max-width-content);
  margin-inline: auto;
  margin-top: calc(var(--spacing) * 5);
  padding-inline: var(--padding-body);
}
.page-grid .page-nav {
  align-self: start;
  position: sticky;
  top: var(--top-target);
}

/*# sourceMappingURL=page-grid.css.map */
.page-header {
  color: var(--data-color);
  background-color: var(--data-color-light);
  padding: calc(var(--spacing) * 3) var(--padding-body);
}

.page-header .page-header__inner {
  max-width: var(--max-width-container);
  margin-inline: auto;
}
.page-header .page-title {
  font-size: var(--fs-title-page);
  font-family: var(--font-title);
  margin-bottom: calc(var(--spacing) * 1);
}
.page-header .description {
  font-size: var(--fs-medium);
  line-height: 1.2;
  margin: calc(var(--spacing) * 1) 0;
}
.page-header .details {
  display: flex;
  gap: calc(var(--padding-inner) * 5);
  margin-top: calc(var(--spacing) * 3);
}
.page-header .details__item .nbr {
  font-size: var(--fs-title-page);
  font-family: var(--font-title);
}
.page-header .details__item .text {
  font-size: var(--fs-medium);
  font-weight: bold;
}
.page-header .details__item button {
  margin-top: calc(var(--spacing) * 1);
}
.page-header .details__item button a {
  color: var(--data-color);
}
.page-header .btn-action {
  border-color: var(--data-color-medium);
  color: var(--data-color);
}
.page-header .btn-action a {
  color: var(--data-color);
}
.page-header .btn-action svg {
  fill: var(--data-color);
}
.page-header .btn-action:hover {
  border-color: var(--data-color);
}


/*# sourceMappingURL=page-header.css.map */
.page-nav .toc {
  list-style: none;
  max-height: calc(100vh - var(--top-target) - 10px);
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.page-nav .toc::-webkit-scrollbar {
  display: none;
}
.page-nav .toc {
  padding-bottom: 10vh;
}
.page-nav .toc li {
  font-size: var(--fs-normal);
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: calc(var(--spacing) * 1);
}
.page-nav .toc li a {
  color: currentColor;
  text-decoration: none;
}
.page-nav .toc li a:hover {
  text-decoration: 1px underline;
  text-underline-offset: 2px;
}

/*# sourceMappingURL=page-nav.css.map */
.pedagogical-support {
    margin-left: 1cm;
    margin-top: 1cm;
    .page {
	display: flex;
	flex-direction: row;
	--margin: 0.5cm;
	padding: var(--margin);
	--page-w: 21cm;
	--page-h: 29.7cm;
	flex-wrap: wrap;
    }

    &.quarter .carte {
	flex-shrink: 0;
	border: 1px dashed lightgray;
	width: calc(var(--page-w) / 2 - var(--margin));
	height: calc(var(--page-h) / 2 - var(--margin));
	padding: 0.3cm;
	position: relative;
    }
}
@media print {
    .pedagogical-support {
	margin: 0;
    }
}
.scheme-text-editor {
    display: grid;
    grid-template:
	"header header"
	"code code-annotated"
	/ 50% 50%;

    .result {
	grid-area: header;
	border: 2px solid var(--color);
	background-color: color-mix (in hsl, white 30%, var(--color));
	color: var(--color);
	padding: 1em;
	margin: 0.5em;
    }
    .error {
	--color: red;
    }
    .success {
	--color: green;
    }

    .code-error {
	text-decoration: underline red;
	background-color: #ffaaaa;
	color: darkred;
    }
    .text-editor {
	grid-area: code;
    }

    .analysis-result {
	grid-area: code-annotated;
    }

    
}

.page-normal.scheme-arborescent-view {
    max-width: 80vw;
}
.scheme-arborescent-view {
    summary {
	font-weight: inherit!important;
	font-size: inherit!important;
    }
    details {
	margin-left: 1em!important;
    }
    details[open] {
	padding-bottom: 0.5em;
    }
    .singleton, summary {
	color: var(--data-color);
    }

    summary:hover {
	cursor: pointer;
    }
    .singleton {
	margin-left: 1em;
	padding-left: 1em;
	border: 1px solid black;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
    }

    .anchor {
	margin-right: 1ch;
	font-size: 0.8em;
    }

    .git {
	float: right;
	margin-right:2ch;
    }
    .alias {
	float: right;
	margin-inline: 2ch;
	font-size: 0.6em;
	padding-top: 0.4ch;
    }

    a:hover {
	color: darkorange;
    }

    .name {
	margin-inline: 2ch;
    }
    .name .tt {
	font-size: 0.9em;
    }
    .tt {
	font-family: Mono;
	font-size: 0.7em;
	background-color: lightgray;
	margin-inline: 0.2ch;
	padding: 0.2ch;
    }

    .trait > summary, .trait.singleton {
	background-color: color-mix(in srgb, var(--color-orange-light) 99%, white);
	color: var(--color-orange);
    }	
    .state > summary, .state.singleton {
	background-color: color-mix(in srgb, var(--color-green-light) 99%, white);
	color: var(--color-green);
    }
    .box > summary, .box.singleton {
	/* background-color: color-mix(in srgb, var(--color-violet-light) 80%, white); */
    }
    .category {
	color: purple;
	background-color: color-mix(in srgb, 20% currentColor, white);
	margin-inline: 1ch;
	font-size: 0.7em;
    }
    .long-description {
	font-size: 0.7em;
	color: #333333;
	font-style: italic;
    }
    .inside {
	margin-left: 4ch;
	font-size: 0.8em;
	color: darkgray;
	font-style: italic;
	margin-top: 0.5em;
    }
}
#site-footer {
  background-color: var(--color-x-light);
  min-height: 200px;
  padding-inline: var(--padding-body);
  padding-top: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 3);
  display: grid;
  grid-template-columns: 300px 300px 1fr;
  grid-gap: calc(var(--spacing) * 1);
}
#site-footer .logo-botascopia {
  width: 140px;
  display: block;
  align-self: start;
  position: relative;
  top: -5px;
}
#site-footer .logo-botascopia svg {
  width: 100%;
}
#site-footer .link-with-arrow {
  font-size: var(--fs-normal);
  font-weight: 500;
}
#site-footer ul {
  list-style: none;
}
#site-footer ul li {
  font-size: var(--fs-normal);
  font-weight: 600;
  margin-bottom: calc(var(--spacing) * 0.5);
}
#site-footer ul li a {
  color: var(--color-txt);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5ch;
  font-weight: 600;
}
#site-footer ul li a:hover {
  text-decoration: underline 1px;
}
#site-footer ul li a .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}
#site-footer ul li a .icon svg {
  width: 100%;
  height: 100%;
}
#site-footer ul li a .icon {
  opacity: 0.8;
}
@media print {
    #site-footer {
	display: none;
    }
}
/*# sourceMappingURL=site-footer.css.map */
#site-header {
    height: var(--header-h);
    width: 100vw;
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding-body);
    gap: calc(var(--unit) * 2);
    position: sticky;
    top : 0;
    z-index: var(--header-z);
}
#site-header a {
    text-decoration: none;
}
#site-header #logo-botascopia svg {
    width: 180px;
    fill: var(--color-green);
}
#site-header h1 {
    position: absolute;
    opacity: 0;
}

#site-header ul {
    list-style: none;
}
#site-header ul li a {
    display : inline-block;
    width : 100%;
}
#site-header ul li a .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
}
#site-header ul li a .icon svg {
    width: 100%;
    height: 100%;
}
#site-header ul li a .icon {
    opacity: 0.8;
}

#btn__connexion {
    font-weight: 500;
    font-size: 1rem;
    background-color: var(--color-txt);
    color: white;
    display: inline-flex;
    align-items: center;
    height: calc(var(--unit) * 1.25);
    padding: 0px 1ch;
    border-radius: var(--radius-btn);
    cursor: pointer;
}

#site-header .candidates {
    width : 100%;
    margin-left : 0;
}
@media print {
    #site-header {
	display: none;
    }
}
/*# sourceMappingURL=site-header.css.map */
#site-nav {
  z-index: var(--header-z);
}

#site-nav a {
  text-decoration: none;
  color: currentColor;
}

#site-nav li {
  font-weight: 500;
  color: var(--color-txt);
}

.arrow {
  --size: 12px;
  height: var(--size);
  width: var(--size);
  position: relative;
  top: 2px;
  display: inline-block;
}
.arrow svg {
  height: var(--size);
  width: var(--size);
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease-in-out;
  fill: var(--color-txt);
}

#site-nav .nav-level-1_ul {
  display: flex;
  gap: calc(var(--padding-inner) * 2);
}

#site-nav .nav-level-1_li {
  display: block;
  /* float: left; */
  padding: var(--padding-inner);
  position: relative;
  text-decoration: none;
}
#site-nav .nav-level-1_li:hover {
  color: var(--color-green);
}
#site-nav .nav-level-1_li:hover .arrow svg {
  transform: rotate(90deg);
  fill: var(--color-green);
}

#site-nav li:hover {
  cursor: pointer;
}

.nav-level-2_ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  display: none;
  border-top: 1px solid var(--color-green);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin-top: var(--padding-inner);
  min-width: 24ch;
  z-index: var(--header-z);
  background-color: white;
}
li.li-dropdown:last-child .nav-level-2_ul {
    left: unset;
    right: 0;
}

.nav-level-1_ul li:hover > .nav-level-2_ul,
.nav-level-2_ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  z-index: var(--header-z);
}

.nav-level-2_li {
  width: 100%;
  padding: calc(var(--padding-inner) * 0.75) var(--padding-inner);
}

.nav-level-2_li:hover {
  background-color: var(--color-x-light);
}

/*# sourceMappingURL=site-nav.css.map */
.species-list-menu {
  display: flex;
  gap: 1ch;
  justify-content: space-around;
  align-items: baseline;
  margin-bottom: 1em;
}

.species-list-menu-add {
    flex-grow: 1;
}
.species-list-import-collection {
    width: 80ch;
    margin: 1em;
    margin-left: 5ch;
}

.right:has(svg.completion) {
    width: auto;
    height: 100%;
}

details.bad {
    background-color: #ffcccc;
}

details.good {
    background-color: lightgreen;
}

.grouping-toolbar {
    display: flex;
    justify-content: space-between;
    margin-top: var(--padding-inner);
    margin-bottom: var(--padding-inner);
    flex-wrap: wrap;
    grid-column: span 2;
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid var(--color-x-light);
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 0.5);
    margin-bottom: calc(var(--spacing) * 1.5);
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: inherit;

    select {
	color: var(--color-text);
	border-color: currentColor;
	background-color: var(--color-xx-light);
	padding-inline: 1ch;
    }
    label[data-group = "false"] {
	visibility: hidden;
    }
}

.tags-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1ch;
    .tag {
	border: 1px solid currentColor;
	border-radius: var(--radius-small);
	padding: 0.5ch;
	text-wrap: nowrap;
	margin-inline: 2ch;
	.remove-button {
	    margin-inline: 1ch;
	}
    }
    margin-bottom: 1em;
    margin-top: 1em;
}
.tooltip {
    .info {
	border: 1px solid black;
	border-radius: 100%;
	margin-inline: 1ch;
	display: inline-block;
	width: 1em;
	text-align:center;
	height: 1em;
    }
    .details {
	display: none;
    }
    position: relative;
}
.tooltip:hover {
    .details {
	display: block;
	position: absolute;
	right: 0;
	border: 1px solid black;
	background-color: white;
	transform: translateX(100%);
	top: 0;
	padding: 5px;
	min-width:20ch;
    }
}


/*# sourceMappingURL=mixins.css.map */
:root {
  --font-title: 'Borna', Arial, sans-serif;
  --font: 'Nunito', Arial, sans-serif;
  --fs-small: 14px;
  --fs-normal: 16px;
  --fs-medium: 22px;
  --fs-subtitle: 30px;
  --fs-title-page: 42px;
  --spacing: 20px;
  font-size: 14px;
  --unit: 24px;
  --padding-body: 32px;
  --padding-inner: 16px;
  --radius-small: 3px;
  --radius-btn: 6px;
  --radius-img: 6px;
  --header-h: 80px;
  --header-z: 9000;
  --white: white;
  --color-bg: white;
  --w-border: 2px;
  --color-violet: #6e62a4;
  --color-violet-medium: #9b92c4;
  --color-violet-light: #e1dfec;
  --color-yellow: #d4a938;
  --color-yellow-medium: #e0c46a;
  --color-yellow-light: #f5f0d5;
  --color-map: #ad8422;
  --color-blue: #0f70c0;
  --color-blue-medium: #5aa0da;
  --color-blue-light: #d1e5f7;
  --color-orange: #f17f2d;
  --color-orange-medium: #f3a066;
  --color-orange-light: #f3e7e0;
  --color-green: #007953;
  --color-green-medium: #42af8c;
  --color-green-light: #d5ebe4;
  --color-green-x-light: #eef7f4;
  --color-green-black: #016042;
  --color-beige: #f7f3ec;
  --color-txt: rgb(41, 41, 41);
  --color-txt: #0D2846;
  --color-txt-light: #a5a9a9;
  --color-light: #DCDDDD;
  --color-x-light: #eaebeb;
  --color-xx-light: #f4f4f4;
  --data-color: var(--color-txt);
  --data-color-medium: var(--color-x-light);
  --data-color-light: var(--color-xx-light);
  --max-width-content: 740px;
  --max-width-container: 860px;
  --top-target: calc(var(--spacing)*5);
  --color-err: hsl(0, 80%, 50%);
}

[data-type=livrets] {
    --data-color: var(--color-violet);
    --data-color-medium: var(--color-violet-medium);
    --data-color-light: var(--color-violet-light);
}
[data-type=livrets] {
  --data-color: var(--color-violet);
  --data-color-medium: var(--color-violet-medium);
  --data-color-light: var(--color-violet-light);
}

[data-type=base-connaissance] {
    --data-color: var(--color-green);
    --data-color-medium: var(--color-green-medium);
    --data-color-light: var(--color-green-light);
}

[data-type=animations] {
    --data-color: var(--color-orange);
    --data-color-medium: var(--color-orange-medium);
    --data-color-light: var(--color-orange-light);
}

[data-type=methodologie] {
    --data-color: var(--color-yellow);
    --data-color-medium: var(--color-yellow-medium);
    --data-color-light: var(--color-yellow-light);
}

/*# sourceMappingURL=var.css.map */
@charset "UTF-8";
.btn--solid {
  font-weight: 600;
  font-size: 1.2rem;
  background-color: var(--color-txt);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--unit) * 1.5);
  min-width: calc(var(--unit) * 1.5);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.btn--solid a {
  color: white;
  text-decoration: none;
  padding: 0px 1ch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.btn-action {
  border: 1px solid var(--color-txt-light);
  height: calc(var(--unit) * 1.25);
  background-color: var(--white);
  border-radius: var(--radius-btn);
  padding-inline: 1ch;
  margin-inline: 1ch;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  text-decoration: none;
  color: var(--color-txt);
  font-size: var(--fs-small);
  font-weight: 500;
  text-wrap: nowrap;
}
.btn-action.wrap {
    text-wrap: wrap;
}
.btn-action .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.btn-action .icon svg {
  width: 100%;
  height: 100%;
}
.btn-action:hover {
  border-color: var(--color-txt);
}

.btn-download .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.btn-download .icon svg {
  width: 100%;
  height: 100%;
}

label.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  text-decoration: none;
  color: var(--color-txt);
  padding: 0 1ch;
}
label.btn-action .text {
  font-weight: 700;
}

a.link-with-arrow {
  text-decoration: none;
  color: var(--color-txt);
  font-size: var(--fs-small);
}
.link-with-arrow::after {
  color: var(--color-txt);
  content: "→";
  font-family: var(--font-title);
  font-size: 0.9em;
  position: relative;
  left: 1.5ch;
  transition: left 0.4s ease-in-out;
  text-decoration: 1px underline transparent;
}
a.link-with-arrow:hover {
  opacity: 0.8;
}
.link-with-arrow:hover::after {
  left: 2.5ch;
}

.link-back a {
  text-decoration: none;
  color: var(--color-txt);
  font-size: var(--fs-small);
}
.link-back a::before {
  content: "←";
  font-family: var(--font-title);
  font-size: 0.9em;
  position: relative;
  left: -1.5ch;
  transition: left 0.4s ease-in-out;
  text-decoration: 1px underline transparent;
}
.link-back:hover {
  opacity: 0.8;
}
.link-back:hover a::before {
  left: -2.5ch;
}

p:has(.btn-action.large) {
    margin: 1em;
}
.btn-action.large {
    font-size: 1.3em;
    text-align: center;
    padding: 1em;
}

.btn-group {
    display: flex;
    gap: 2ch;
}

.btn-action.red {
    color: red;
    border-color: red;
    &:hover {
	border-color: #ffaaaa;
    }
}

.remove-button {
    width: 20px;
    height: 20px;
    margin: 0.5em;
    img {
	width: 100%;
	height: 100%;
    }
}

.single.link-with-arrow {
    color: var(--color-txt);
    display: block;
    border: 2px solid currentColor;
    border-radius: var(--radius-btn);
    padding: 0.5em 3ch;
    font-size: 1rem;
    margin: 0.5em 1ch;
    &:hover {
	background-color: var(--color-txt-x-light);
    }
}
/*# sourceMappingURL=buttons.css.map */


@charset "UTF-8";
[data-page="species-single"] {
    .calendar-svg {
	--svg-color: var(--color-green);
	transform: rotate(-90deg);
    }
    .calendar-svg .mois {
	--svg-color: var(--color-light);
    }
    .calendar-svg .saison {
	--svg-color: var(--white);
    }
    .calendar-svg .background {
	--svg-color: var(--color-x-light);
    }
    .calendar-svg .both {
	--svg-color: var(--color-green);
	display: none;
    }
    .calendar-svg .fleurs {
	--svg-color: var(--color-green);
	display: none;
    }
    .calendar-svg .fruits {
	--svg-color: var(--color-orange);
	display: none;
    }
    .calendar-svg .none {
	--svg-color: var(--color-x-light);
    }

    .calendrier + .group-caption .caption {
	font-size: var(--fs-small);
	margin: 0;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 1ch;
	padding-bottom: calc(var(--spacing) * 0.25);
    }
    .calendrier + .group-caption .caption::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--color-green);
	border-radius: var(--radius-small);
    }
    .calendrier + .group-caption .caption.caption-fructification::before {
	background-color: var(--color-orange);
    }

    .calendar-svg[data-fleurs*=jan] .jan .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=feb] .fev .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=mar] .mar .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=apr] .avr .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=may] .mai .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=jun] .jun .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=jul] .jul .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=aug] .aou .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=sep] .sep .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=oct] .oct .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=nov] .nov .fleurs {
	display: block;
    }

    .calendar-svg[data-fleurs*=dec] .dec .fleurs {
	display: block;
    }

    .calendar-svg[data-fruits*=jan] .jan .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=feb] .fev .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=mar] .mar .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=apr] .avr .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=may] .mai .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=jun] .jun .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=jul] .jul .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=aug] .aou .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=sep] .sep .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=oct] .oct .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=nov] .nov .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=dec] .dec .fruits {
	display: block;
    }

    .calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .both {
	display: block;
    }

    .calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .both {
	display: block;
    }

    .calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .both {
	display: block;
    }

    .calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .both {
	display: block;
    }

    .calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .both {
	display: block;
    }

    .calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .both {
	display: block;
    }

    .calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .both {
	display: block;
    }

    .calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .both {
	display: block;
    }

    .calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .both {
	display: block;
    }

    .calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .both {
	display: block;
    }

    .calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .both {
	display: block;
    }

    .calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .fleurs {
	display: none;
    }

    .calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .both {
	display: block;
    }

    /* Don’t display ".none" when fruits or fleurs */
    .calendar-svg[data-fleurs*=jan] .jan .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=feb] .fev .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=mar] .mar .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=avr] .avr .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=may] .mai .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=jun] .jun .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=jul] .jul .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=aug] .aou .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=sep] .sep .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=oct] .oct .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=nov] .nov .none {
	display: none;
    }

    .calendar-svg[data-fleurs*=dec] .dec .none {
	display: none;
    }

    .calendar-svg[data-fruits*=jan] .jan .none {
	display: none;
    }

    .calendar-svg[data-fruits*=feb] .fev .none {
	display: none;
    }

    .calendar-svg[data-fruits*=mar] .mar .none {
	display: none;
    }

    .calendar-svg[data-fruits*=apr] .avr .none {
	display: none;
    }

    .calendar-svg[data-fruits*=may] .mai .none {
	display: none;
    }

    .calendar-svg[data-fruits*=jun] .jun .none {
	display: none;
    }

    .calendar-svg[data-fruits*=jul] .jul .none {
	display: none;
    }

    .calendar-svg[data-fruits*=aug] .aou .none {
	display: none;
    }

    .calendar-svg[data-fruits*=sep] .sep .none {
	display: none;
    }

    .calendar-svg[data-fruits*=oct] .oct .none {
	display: none;
    }

    .calendar-svg[data-fruits*=nov] .nov .none {
	display: none;
    }

    .calendar-svg[data-fruits*=dec] .dec .none {
	display: none;
    }

    /* Display mounth when something */
    .calendar-svg[data-fleurs*=jan] .jan .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=feb] .fev .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=mar] .mar .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=apr] .avr .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=may] .mai .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=jun] .jun .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=jul] .jul .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=aug] .aou .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=sep] .sep .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=oct] .oct .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=nov] .nov .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=dec] .dec .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=jan] .jan .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=feb] .fev .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=mar] .mar .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=apr] .avr .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=may] .mai .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=jun] .jun .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=jul] .jul .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=aug] .aou .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=sep] .sep .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=oct] .oct .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=nov] .nov .mois {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fruits*=dec] .dec .mois {
	--svg-color: var(--color-txt);
    }

    /* SAISONS */
    .calendar-svg[data-fleurs*=mar] .printemps .saison,
    .calendar-svg[data-fruits*=mar] .printemps .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=mar] .printemps .background,
    .calendar-svg[data-fruits*=mar] .printemps .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=apr] .printemps .saison,
    .calendar-svg[data-fruits*=apr] .printemps .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=apr] .printemps .background,
    .calendar-svg[data-fruits*=apr] .printemps .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=may] .printemps .saison,
    .calendar-svg[data-fruits*=may] .printemps .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=may] .printemps .background,
    .calendar-svg[data-fruits*=may] .printemps .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=jun] .ete .saison,
    .calendar-svg[data-fruits*=jun] .ete .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=jun] .ete .background,
    .calendar-svg[data-fruits*=jun] .ete .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=jul] .ete .saison,
    .calendar-svg[data-fruits*=jul] .ete .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=jul] .ete .background,
    .calendar-svg[data-fruits*=jul] .ete .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=aug] .ete .saison,
    .calendar-svg[data-fruits*=aug] .ete .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=aug] .ete .background,
    .calendar-svg[data-fruits*=aug] .ete .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=sep] .automne .saison,
    .calendar-svg[data-fruits*=sep] .automne .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=sep] .automne .background,
    .calendar-svg[data-fruits*=sep] .automne .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=oct] .automne .saison,
    .calendar-svg[data-fruits*=oct] .automne .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=oct] .automne .background,
    .calendar-svg[data-fruits*=oct] .automne .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=nov] .automne .saison,
    .calendar-svg[data-fruits*=nov] .automne .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=nov] .automne .background,
    .calendar-svg[data-fruits*=nov] .automne .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=dec] .hiver .saison,
    .calendar-svg[data-fruits*=dec] .hiver .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=dec] .hiver .background,
    .calendar-svg[data-fruits*=dec] .hiver .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=jan] .hiver .saison,
    .calendar-svg[data-fruits*=jan] .hiver .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=jan] .hiver .background,
    .calendar-svg[data-fruits*=jan] .hiver .background {
	--svg-color: var(--color-txt);
    }

    .calendar-svg[data-fleurs*=fev] .hiver .saison,
    .calendar-svg[data-fruits*=fev] .hiver .saison {
	--svg-color: var(--white);
    }

    .calendar-svg[data-fleurs*=fev] .hiver .background,
    .calendar-svg[data-fruits*=fev] .hiver .background {
	--svg-color: var(--color-txt);
    }
}
/*# sourceMappingURL=calendar.css.map */
.container-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 60px;
}

.container-logos .logo {
  width: 200px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container-logos .logo > * {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.container-logos .logo img,
.container-logos .logo svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#logo-inria {
  width: 150px;
}

#logo-cnrs {
  width: 90px;
  height: 80px;
}

#logo-sorbonne {
  height: 65px;
  width: 160px;
}

#logo-saclay {
  width: 160px;
  transform: translateY(-10px);
}

#logo-rennes {
  width: 81px;
  height: 90px;
}

#logo-plantagroeco {
  width: 220px;
}

#logo-SBF {
  width: 146px;
  height: 120px;
}

#logo-upec {
  width: 161px;
  height: 70px;
}

#logo-paris {
  width: 80px;
  height: 70px;
}

/*# sourceMappingURL=logos-container.css.map */
.search {
  display: flex;
  height: calc(var(--unit) * 1.5);
  flex-grow: 2;
  flex-direction: row-reverse;
  align-items: center;
  gap: calc(var(--padding-inner) * 0.5);
}
.search svg:not(.completion) {
  display: inline-block;
  width: 18px;
  height: 18px;
}
.search svg:not(.completion) svg:not(.completion) {
  width: 100%;
  height: 100%;
}
.search svg:not(.completion) {
  stroke-width: 1px;
  stroke: var(--color-txt);
}
.search .search__input-group {
  display: grid;
  grid-template-columns: var(--unit) 1fr;
  width: 100%;
  height: calc(var(--unit) * 1.5);
}
.search .search__input-group #search-container {
  grid-column: 1/end;
  grid-row: 1;
  font-family: sans-serif;
  font-family: var(--font);
  font-size: var(--fs-normal);
  font-weight: 500;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-txt-light);
  outline: none;
  display : flex;
  label {
      align-items : center;
  }
}
.search .search__input-group input::placeholder {
  font-family: var(--font);
  font-size: var(--fs-normal);
}
.search .search__input-group  #search-container:has(input:focus) {
    outline: 1px solid var(--color-violet);
}
.search .search__input-group input {
    padding-left: calc(var(--padding-inner) * 2.5);
    outline: none;
    border : none;
    margin : 0;
}
.search .search__input-group .search__button {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  align-self: center;
  position: relative;
  left: 10px;
  top: 2px;
}
.search .search__icon {
  width: calc(var(--unit) * 1.25);
  height: calc(var(--unit) * 1.25);
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-txt);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search .search__icon:hover {
  background-color: var(--color-x-light);
}

#search-toggle {
  display: none;
}

#search-toggle ~ [for=search-toggle] .search__icon--open {
  display: flex;
}

#search-toggle ~ [for=search-toggle] .search__icon--close {
  display: none;
}

#search-toggle ~ .search__input-group {
  display: none;
}

#search-toggle:checked ~ [for=search-toggle] .search__icon--open {
  display: none;
}

#search-toggle:checked ~ [for=search-toggle] .search__icon--close {
  display: flex;
}

#search-toggle:checked ~ .search__input-group {
  display: grid;
}

/*# sourceMappingURL=search.css.map */
@charset "UTF-8";
.slideshow {
  height: 100%;
  width: 100%;
  margin-left: 0;
  overflow: visible;
  --arrow-space: 40px;
}
.slideshow * {
  position: relative;
}

.slideshow-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.slideshow-inner {
  width: calc(100% * var(--items));
  height: 100%;
}

.slideshow-item {
  width: calc(100% / var(--items));
  height: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slideshow-item figure {
  width: calc(100% - var(--arrow-space) * 2);
  height: calc(100% - var(--unit));
}
.slideshow-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slideshow-item .schema-collectifs {
  background-color: white;
}
.slideshow-item .schema-collectifs img {
  object-fit: contain;
}
.slideshow-item figcaption {
  width: calc(100% - var(--arrow-space) * 2);
  font-size: var(--fs-normal);
  font-weight: 500;
  padding-top: calc(var(--padding-inner) * 0.5);
  text-align: left;
  width: 100%;
  margin-top: calc(var(--spacing) * 0.5);
}
.slideshow-item figcaption::before {
  content: "→";
  font-family: var(--font-title);
  padding-right: 2ch;
}

/* Display slides (input checked) 
--------------------------------------------------------
-------------------------------------------------------- */
.slideshow-inner {
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.slideshow-item {
  transition: all 0.5s ease-out;
}

/* Controls (arrows) 
--------------------------------------------------------
-------------------------------------------------------- */
.slideshow-controls {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.slide_controls {
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
  will-change: z-index;
}

.slide_controls-previous {
  left: 0;
}

.slide_controls-next {
  right: 0;
}

span.controls {
  height: 100%;
  position: absolute;
  width: 100%;
}

span.controls::before,
span.controls::after {
  padding: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  font-size: 20px;
  z-index: 9;
}

.slide_controls-previous:hover ~ span.controls:before,
.slide_controls-next:hover ~ span.controls:after {
  opacity: 0.7;
}

span.controls::before {
  content: "❬";
  left: -1px;
}

span.controls::after {
  content: "❭";
  right: -1px;
}

/* Position slide + Control arrows display -------------------------------------------- */
#slide-input-1:checked ~ .slideshow-inner {
  left: 0%;
}

#slide-input-2:checked ~ .slideshow-inner {
  left: -100%;
}

#slide-input-3:checked ~ .slideshow-inner {
  left: -200%;
}

#slide-input-1:checked ~ .slideshow-controls label {
  z-index: -1;
}

#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(2) {
  z-index: 11;
}

#slide-input-2:checked ~ .slideshow-controls label {
  z-index: -1;
}

#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(3),
#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(4) {
  z-index: 11;
}

#slide-input-3:checked ~ .slideshow-controls label {
  z-index: -1;
}

#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(5),
#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(6) {
  z-index: 11;
}

/*# sourceMappingURL=slideshow.css.map */
.sort {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--padding-inner) * 0.5);
}
.sort p {
  font-weight: 500;
  padding-right: 1ch;
}
.sort .is-selected {
  background-color: var(--color-txt);
  border-color: var(--color-txt);
  color: var(--white);
  cursor: auto;
}
.sort .is-selected a {
  color: var(--white);
}
.sort .is-selected svg {
  fill: var(--white);
}

/*# sourceMappingURL=sort.css.map */
[data-editable="true"] .species-list {
    display: block;
}
[data-editable="true"] .species-list .taxon {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: transparent;
  padding-inline: 0;
  gap: calc(var(--padding-inner) * 1);
  outline: none;
  border-bottom: 1px solid var(--color-green-light);
  padding-top: calc(var(--padding-inner) * 0.5);
  padding-bottom: calc(var(--padding-inner) * 0.5);
}
[data-editable="true"] .species-list .taxon::before {
  content: "";
  width: 100%;
  border-top: 1px solid transparent;
  position: absolute;
  top: -1px;
}
[data-editable="true"] .taxon:first-of-type::before {
  border-color: var(--color-green-light);
}
[data-editable="true"] .species-list .taxon figure {
  order: 1;
}
[data-editable="true"] .species-list .taxon .name {
  order: 2;
}
[data-editable="true"] .species-list .taxon .tags {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    button {
	font-size: var(--fs-small);
	--tag-color: var(--color-green);
	border: 1px solid currentColor;
	color: var(--tag-color);
    }
    .tag-absent {
	--tag-color:darkgray;
    }
}

[data-editable="true"] .species-list .taxon .chart-edit {
  order: 4;
}
[data-editable="true"] .species-list .taxon .btn-edit {
  order: 5;
}
[data-editable="true"] .species-list .taxon figure {
  width: 60px;
}
[data-editable="true"] .species-list .taxon .name {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  h3 {
      font-weight: bold;
  }
}
[data-editable="true"] .species-list .taxon .name .latin, [data-editable="true"] .species-list .taxon .name h3 {
  padding: 0;
  margin: 0;
  text-align: left;
}
[data-editable="true"] .species-list .taxon .name h3 {
  background-color: transparent;
  color: var(--color-green);
  font-size: var(--fs-medium);
}
[data-editable="true"] .species-list .taxon .name h3 a {
  color: var(--color-green);
}
[data-editable="true"] .species-list .taxon .name .vernacular {
  text-align: left;
  padding-bottom: calc(var(--spacing) * 0.25);
  font-size: 1.2em;
  font-weight: lighter;
}
[data-editable="true"] .species-list .taxon:hover {
  outline: none;
  background-color: var(--color-green-x-light);
  border-color: var(--color-green);
}
[data-editable="true"] .species-list .taxon:hover::before {
  border-color: var(--color-green);
}

[data-editable="true"] .species-list .taxon .btn-edit {
  display: block !important;
  z-index: 30;
}
[data-editable="true"] .species-list .taxon .chart-edit {
  display: block;
  margin-right: var(--padding-inner);
}

/*# sourceMappingURL=taxon-card-inline.css.map */
[data-editable=false] .species-list {
  display: grid;
  grid-gap: calc(var(--spacing) * 1);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
[data-editable="false"] .species-list .taxon {
  align-self: start;
}
.species-list .taxon .chart-edit {
  width: 40px;
  height: 40px;
}

.species-list .taxon .chart-edit svg {
  width: 100%;
  height: 100%;
}
.species-list .taxon .chart-edit svg circle {
  fill: #efefef;
}
.species-list .taxon .chart-edit svg .filled {
  fill: var(--color-orange-medium);
}
.species-list .taxon .chart-edit svg .verified {
  fill: var(--color-green);
}
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit, .species-list .tags {
  display: none;
}
.species-list .taxon {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--color-green-light);
  padding: calc(var(--padding-inner) * 0.75);
}
.species-list .taxon .name {
  order: 1;
}
.species-list .taxon figure {
  order: 2;
}
.species-list .taxon figure {
  width: 100%;
  min-height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  overflow: hidden;
}
.species-list .taxon figure img {
  width: 100%;
  border-radius: var(--radius-img);
}
.species-list .taxon figure {
  border-radius: var(--radius-img);
  overflow: hidden;
}
.species-list .taxon h3 {
  background-color: var(--color-green);
  color: white;
  border-radius: var(--radius-small);
  padding: 4px 1ch;
  margin-bottom: calc(var(--spacing) * 0.25);
  font-size: var(--fs-normal);
  line-height: 1.1;
}
.species-list .taxon h3 a {
  color: white;
  text-decoration: none;
}
.species-list .taxon .vernacular {
  font-weight: normal;
  font-weight: 500;
  margin-bottom: calc(var(--spacing) * 0.75);
  color: var(--color-txt);
  font-size: var(--fs-small);
}
.species-list .taxon .vernacular, .species-list .taxon .latin {
  text-align: center;
}
.species-list .taxon:hover {
    outline: 2px solid var(--color-green);
}

/*# sourceMappingURL=taxon-card.css.map */
.team {
  display: flex;
  flex-wrap: wrap;
  gap: 2ch;
}
.team .member {
  display: flex;
  align-items: center;
  gap: 2ch;
  width: calc(50% - 2ch);
}
.team .member .name {
  font-weight: bold;
}
.team .member .details {
  font-size: var(--fs-normal);
  margin-top: calc(var(--spacing) * 0.25);
}
.team .member img {
  width: 100px;
  aspect-ratio: 1/1;
  background-color: #cfcfcf;
  border-radius: var(--radius-img);
  float: left;
}

/*# sourceMappingURL=team.css.map */
input#view-edit,
input#view-grid,
input#view-list {
  display: none;
}

.view-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--padding-inner) * 0.5);
}
.view-toggle p {
  font-weight: 500;
  padding-right: 1.5ch;
}
.view-toggle label .txt {
  font-weight: 700 !important;
}

input#view-edit:checked ~ .group-sort-view .view-toggle label[for=view-edit],
input#view-list:checked ~ .group-sort-view .view-toggle label[for=view-list],
input#view-grid:checked ~ .group-sort-view .view-toggle label[for=view-grid],
input#view-edit:checked ~ .view-toggle label[for=view-edit],
input#view-list:checked ~ .view-toggle label[for=view-list],
input#view-grid:checked ~ .view-toggle label[for=view-grid] {
  background-color: var(--color-txt);
  color: var(--white);
  border-color: var(--color-txt);
}
input#view-edit:checked ~ .group-sort-view .view-toggle label[for=view-edit] svg,
input#view-list:checked ~ .group-sort-view .view-toggle label[for=view-list] svg,
input#view-grid:checked ~ .group-sort-view .view-toggle label[for=view-grid] svg,
input#view-edit:checked ~ .view-toggle label[for=view-edit] svg,
input#view-list:checked ~ .view-toggle label[for=view-list] svg,
input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
  fill: var(--white);
}

/*# sourceMappingURL=view-toggle.css.map */
[data-page=edit] {

    font-size: 1rem;
    
    /* General */
    .icon{
	width: 1em;
	vertical-align: bottom;
    }

    /* Header */
    .page-header{
	position : sticky;
	top : var(--header-h);
	padding-inline: calc((100vw - var(--max-width-container))/2);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	z-index : 90;
	display: grid;
	grid-template-areas:
	    "title completion"
	    "subtitle completion"
	    "navitation navigation";
	grid-template-columns: 1fr auto;
	h1 {
	    grid-area: title;
	    font-weight: normal;
	    margin-bottom: 5px;
	    font-size: 1.5rem;
	    .botanist, .family {
		font-size: 0.8em;
		padding-inline: 0.5ch;
	    }
	}
	h2 {
	    font-weight: lighter;
	    margin-bottom: 10px;
	    grid-area: subtitle;
	}

	    
	.completion-status {
	    padding-inline: 0.4em;
	    grid-area: completion;
	    svg {
		height: 4em;
		width: 4em;
	    }
	}
	button.save {
	    font-size: 1.2rem;
	}	
	.botanist {
	    font-size: 0.8em;
	}
	.save-icon {
	    width : 2.5em !important;
	}
	/* Navigation bar */
	#navigator {
	    border-bottom: 1px solid var(--color-violet);
	    min-height: 2em;
	    background-color: var(--data-color-light);
	    width: var(--content-width);
	    display: hidden;
	    z-index: 99;
	    a:hover {
		cursor: pointer;
		text-decoration: 1px underline dashed;
	    }
	    & a {
		color: var(--color-violet);
	    }

	    & li {
		list-style-type: " » ";
	    }
	    & li: first-child {
		list-style-type: "  ";
	    }
	}
	#navigator:has(a) {
	    display: block;
	}
    }

    .view-bar {
	text-align: center;
    }
    .toolbar {
	position: fixed;
	left: 1ch;
	top: calc(2em + var(--header-h));
	display: flex;
	flex-direction: column;
	z-index: 99;
	align-items: flex-start;
	gap: 1ch;
	.save-button {
	    background-color: var(--color-violet);
	    color: var(--color-violet-light);
	}
	.biblio-picker {
	    --color:var(--color-yellow-x-light);
	    border-radius: var(--radius-btn);
	    color: var(--color);
	    &:not(has(.btn-action):only-child) {
		background-color: var(--color-yellow);
		padding: 0.3em;
		border: 1px solid currentColor;
	    }
	    .btn-action {
		background-color: var(--color-yellow);
	    }
	    input {
		margin-right: 1ch;
		padding-right: 0;
	    }
	    display: flex;
	    align-items: baseline;
	}
    }
    /* Settings */
    .editor-settings {
	display: flex;
	flex-direction: column;
	align-items: end;
    }
    /* Body page */
    .page-editor{
	margin-inline : 5vw;

	.status-fiche {
	    margin: 1em;
	    display: flex;
	    flex-direction: row;
	    gap: 1ch;
	    justify-content: center;
	    align-items: center;
	}
	
	details{	
	    background-color: var(--color-xx-light);
	    --hue: 20;
	    color: black;
	    font-family: "Muli", sans-serif;
	    margin-top:1em;
	    margin-bottom:1em;
	    margin-left: 1em;
	    border-style: solid;
	    border-width: 1px;
	    padding-inline: 0em;
	    overflow: hidden;
	}
	
	summary {
	    display: block;
	    font-weight: bold;
	    font-size: 1.2em;
	    max-width: 100%;
	    margin-left: -0.3em;
	    left:0;
	    color:var(--color-purple);
	    padding-left: 0.3em;
	    padding-inline: 2ch;
	}
	details[open] {
	    padding-bottom: 0.5em;
	}

	details[open] > summary {
	    border-bottom: 1px solid black;
	    margin-bottom: 0.3em;
	    background-color: var(--color-light);
	}
	details:not([open]) > summary {
	    background:var(--color-x-light);
	}
	details:not([open]) > summary:before {
	    content: ">"; /* the new icon */
	    color: #696f7c;
	    margin-right: 5px;
	}
	details[open] > summary:before {
	    content: "v"; /* the new icon */
	    color: #696f7c;
	    margin-right: 5px;	
	}
    }
    
}







/* Traits */

.traits{
    .summary-title {
	cursor: pointer;
	flex-grow: 1;
	display : flex;
	align-items : center;
	> span {
	    margin-right: 0.4ch;
	}
	img {
	    height : 1.5em;
	    width : 1.5em;
	}
    }
    details[data-depth="1"] > summary > .summary-title:not(:has(img)) {
	/* Include a matching padding for icon less toplevel heading */
	padding-left: 1.5em;
    }

    /*Records */
    details.record {
	border-radius: 1em;
    }
    details.record summary {
	font-size: 1.2em;
	min-height: 2em;
	line-height: 2em;
	color: inherit;
	font-weight: inherit;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	
    }

    
    
    .record[open] summary {
	border-bottom: none;
    }
    .record .record {
	border-right: none;
    }
    .record > .descr {
	color: #111111;
	font-size: 0.9em;
	margin-inline: 1em;
    }
    /* Button to verify all in a record */
    .verify-all {
	font-size: 0.5em;
	margin: 1em;
    }
    summary[data-completion="100"] .verify-all {
	/* This rule is not used because data-completion is not encoded */
	display: none;
    }

    /* Choice between different values (for sum types) */
    .choice.inline-sum {
	display: inline-flex;
	flex-direction: row;
    }
    .choice.table {
	display:flex;
	flex-wrap: wrap;
	/* margin-top:1em;	 */
    }
    .choice.table.by-2 {
	display: grid;
	grid-template-columns: max-content max-content;
    }
    .choice.table.by-3 {
	display: grid;
	grid-template-columns: max-content max-content max-content;
    }
    .choice.table.by-4 .choice-value {
	display: grid;
	grid-template-columns: max-content max-content max-content max-content;
    }
    .choice-value:has(input:enabled) {
	cursor: pointer;
    }
    .choice-value {
	--color: var(--color-green);
	/* color: var(--color); */
	display: inline-flex;
	align-items: center;
	margin-left: 0.1em;
	margin-right: 0.1em;
	padding-left: 0.1em;
	padding-right: 0.1em;
    }
    .choice-value div:first-child {
	display: flex;
	align-items: center;
	> span { flex-shrink: 0;}
    }
    .by-1 .choice-value {
	width: 100%;
    }
    .choice-value.image {
	padding: 0.5em;
    }
    .choice-value.image img {
	height: 4em;
    }

    .choice-value input {
	margin-inline: 1ch;
    }
    .choice-value:has(input:checked) {
	text-decoration: var(--color) underline solid ;
	font-weight: bold;
    }    
    .choice-value:has(input:enabled):hover {
	text-shadow: var(--color) 1px 0 10px;
	background-color: color-mix(in hsl, var(--color) 10%, white);
    }
    .choice-value.image:has(input:checked) {
	border: 2px solid var(--color);
	border-radius: 0.5em;
    }


    /* Trait with value (sum of freeform) */
    .field {
	margin-left: 1em;
    }
    .field-edit {
	margin-top: 0.5em;
	margin-left: 1em;
    }
    .field-edit:has(textarea) {
	margin-bottom: 0.3em;
    }
    .field-title {
	margin-left: 0;
	display: flex;
	align-items: baseline;
    }
    .field > .children {
	margin-left: 1em;
    }
    /* Handle the case of a field depending on a field, add a black line */
    .child:has(> .field:only-child) {
	border-left: 3px solid var(--color-violet);
    }
	
    
    summary .field-title { cursor: pointer; font-size: inherit; flex-grow: 1; margin-left: 0.3em; }
    .field-descr {
	color: gray;
    }
    .field-block span.field-edit {
	display: block;
	/* border-left: 2px solid hsl(var(--hue), 50%, 20%); */
	margin-top: 0.5em;
	padding-left: 1em;
	flex-grow: 1.;
    }
    .mandatory {
	font-weight: bold;
	color: red;
	font-size: 1.2em;
    }
    .field-edit.text {
	display:inline-block;
	width: 70%;
    }
    
    
    /* Image picker */
    .drag-zone {
	font-weight: lighter;
	font-size: 1.2em;
    }
    .text-input {
	background-color: inherit;
	font-size: 1.3em;
	width:100%;
    }
    
    /* Verified traits */
    .verified-checkbox {
	display: inline;
    }
    .verified-checkbox input {
	transform: scale(1.5);
	margin-inline: 0.4em;
    }
    label.friendly:has(.verified-checkbox input:checked){
	background-color: var(--color-green-light);
    }

    /* Exclusive traits */
    .exclusive input[type="checkbox"]{
	width: 1.3em;
	height: 1.3em;
	background-color: white;
	border-radius: 50%;
	border: 1px solid var(--color);
	/* appearance: none; */
	cursor: pointer;
    }
    .exclusive div {
	display : flex;
	align-items : center;
    }
    
    /* Probability sliders */
    .noprob .slider-container {
	display: none;
    }
    .slider-container {
	font-size: 0.7em;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
    }
    .slider {
	display: inline-block;
	height: 1em;
	width: 4em;
	border: 1px solid black;
	border-radius:5px;
	--slider-color:black;
	background: linear-gradient(to right, var(--slider-color) var(--current-value), white var(--current-value));
	margin: 0.3em;
    }
    .score .slider-container {
	display: inline;
    }
    .slider-container input {
	width: 8em;
    }
    .slider-container .slider-text {
	min-width:5ch;
    }
    .score .slider {
	margin-block: 0;
	background: linear-gradient(to right, hwb(var(--current-value) 5 42) var(--current-value), white var(--current-value));
    }
    
    /* Biblio of trait */
    .biblio input {
	width: 20em;
    }
    button.biblio {
	--color: var(--color-green);

	border: 1px solid var(--color);
	background-color: color-mix(in srgb, var(--color) 10%, white);
	padding: 5px;
	margin: 5px;
	border-radius: 5px;

	&:hover {
	    border-color: color-mix(in srgb, var(--color) 80%, black);
	    background-color: color-mix(in srgb, var(--color) 20%, white);
	}
	    
    }
    button.biblio[data-num="0"] {
	--color: var(--color-orange);
    }
    .biblio-list{
	list-style-type: none;
    }
    
    /* Multiple */
    button.multiple-remove {
	background-color: darkred;
	margin: 0;
	padding: 0;
	line-height: inherit;
	padding-inline:0.2em;
	margin-left: 0.5em;
	font-size: 1em;
    }
    button.multiple-add {
	margin: 0.4em;
    }

    /* Dragging multiples */
    .drop-zone {
	margin-top : -10px;
	margin-bottom : -10px;
	padding-top : 10px;
	padding-bottom : 10px;
	position : relative;
	z-index : 100;
    }
    .drop-zone.dragover {
	background-color : black;
    }
    summary[draggable]:not([open]) .summary-title {
	cursor: grab;	
    }
    summary[draggable]:not([open]) .anchor {
	cursor: grab;

	img {
	    max-height: 50%;
	    width : auto;
	}
    }
    details[draggable][open] .anchor {
	display: none;
    }

    /* Illustrations traits */
    .image-picker {
	max-width: 15em;
    }
    .photo {
	display: flex;
	align-items: center;
	gap: 10px;
    }
    .photoCredits {
	display : flex;
	flex-direction : column;
	gap : 10px;
    }

    /* Completion */
    .trait-completion {
	display: flex;
	flex-direction: row; 
	max-height: 100%;
	color: white;
    }
    .trait-completion abbr {
	padding-inline: 0.4em;
	width: 50%;
	text-align: center;
    }
    abbr.completion-status-full { text-align: center; width: 100%; }

    abbr {
	vertical-align: middle;
	img {
	    width: 1em;
	    margin-left: 0.5ch;
	}
    }

    li .taxon::after {
	content: ': '
    }
    .taxon-list li {
	list-style: none;
    }
    .hint {
	font-size: 0.7em;
	margin-left: 0.3em;
    }
    .hint::before { content: "("; }
    .hint::after { content: ")"; }


    /* Other */
    .button-descr {
	display: inline-flex;
	flex-direction: column;
	justify-self: start;
	padding-inline: 0.2em;
    }
    .block .button-descr {
	align-items: flex-start;
    }
    .button-descr:has(span > .slider-container) {
	/* Minimum size shold include the
	   probability sliders */
	min-width: 5em;
	min-height: 2.7em;
    }
    .distribution-widget input[type="number"] {
	min-width: 6em;
    }
    .field-edit .input-wrap {
	width: 80%;
    }
    .input-wrap {
	width: 100%;
	display: inline-block;
    }
    .input-wrap-right,.input-wrap-left {
	padding-top:0.3em;
	background-color: lightgray;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding-left:0.2em;
	padding-right: 0.2em;
    }
    .input-wrap-right {
	padding-right:0.2em;
	border-right: 1px solid black;
	border-top-right-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
    }
    .input-wrap-left {
	border-left: 1px solid black;
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
    }
    .input-wrap input {
	width: 100%;
    }

    .textarea-good {
	background-color:var(--color-green-x-light);
	color:var(--color-green);
    }
    .textarea-bad {
	background-color:var(--color-orange-medium);
    }
    .descr, .field-descr {
	p {
	    margin : 0 0;
	}
	ol {
	    padding : revert;
	}
    }
}


table.species-local-param {
    border-collapse: collapse;
    --color: var(--color-txt);
    .flower {
	--color: var(--color-yellow);
    }
    .leaves {
	--color: var(--color-green);
    }
    .fruit {
	--color: var(--color-orange);
    }
    .species-local-param-set-line td {
	border-bottom: 1px solid black;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	background-color: inherit;
    }

    td {
	padding-bottom: 0.2em;
	padding-top: 0.2em;
	color: var(--color);
	select {
	    color: var(--color);
	}
    }
    th {
	color:var(--color);
    }

}
.item-nav {
  border: 1.5px solid var(--color-txt);
  border-radius: var(--radius-btn);
  background-color: var(--white);
  color: var(--color-txt);
  padding: var(--padding-inner);
  padding-bottom: calc(var(--padding-inner) * 0.5);
  min-height: calc(var(--unit) * 5);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
}
.item-nav .title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  line-height: 1.1;
  padding-right: 1ch;
  font-weight: normal;
}
.item-nav .btn--go-to {
  width: var(--unit);
  height: var(--unit);
  align-self: end;
  font-family: var(--font-title);
  position: relative;
  font-size: 14px;
  left: calc(var(--unit) * -0.25);
  transition: left 0.4s ease-in-out;
}
.item-nav .description {
  margin-top: 0.5em;
  flex-grow: 2;
  padding-right: 2ch;
}
.item-nav:hover {
  background-color: var(--data-color-light);
}
.item-nav:hover .btn--go-to {
  left: calc(var(--unit) * 0.25);
}

/*# sourceMappingURL=home-item-nav.css.map */
.home--section-tool {
  background-color: var(--data-color);
  color: var(--data-color-light);
}
.home--section-tool[data-type=base-connaissance], .home--section-tool[data-type=livrets] {
  color: var(--data-color-light);
}

#main_home {
  --max-w-home: 1100px;
}
#main_home section {
  padding: calc(var(--unit) * 3) var(--padding-body);
  position: relative;
}
#main_home section .section--inner {
  max-width: var(--max-w-home);
  margin: 0 auto;
}
#main_home .item-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}
#main_home .section--header {
  margin-bottom: calc(var(--spacing) * 4);
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: calc(var(--spacing) * 1);
}
#main_home .section--title {
  font-size: 2.8rem;
  font-family: var(--font-title);
  grid-column: span 2;
  text-align: center;
  margin-bottom: calc(var(--spacing) * 2);
}
#main_home .baseline {
  font-size: var(--fs-medium);
  max-width: 42ch;
  margin-top: calc(var(--spacing) * 0.5);
}
#main_home .species-list {
  margin-bottom: calc(var(--spacing) * 3);
}
#main_home .species-list .taxon:hover {
  outline: 3px solid var(--color-txt);
}
#main_home .species-list .title {
  grid-column: 1/end;
  font-size: var(--fs-medium);
  color: var(--data-color-light);
}

.slideshow {
  width: 100%;
  height: calc(var(--unit) * 13);
}
.slideshow figure {
  height: calc(var(--unit) * 11);
}

#home__hero {
  margin-bottom: 0;
  padding-bottom: calc(var(--unit) * 1.5) !important;
}
#home__hero .section--inner {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
#home__hero .section--title {
  margin-bottom: calc(var(--unit) * 1.5);
}
#home__hero {
  /* button{ display: none;} */
}
#home__hero .description {
  font-size: var(--fs-medium);
  max-width: 48ch;
  margin: 0 auto;
  margin-bottom: calc(var(--unit) * 1.5);
}
#home__hero .search--container {
  display: none;
}
#home__hero .nav-hero {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--unit);
  margin-top: calc(var(--unit) * 1);
  margin-bottom: calc(var(--unit) * 3);
}
#home__hero .nav-hero li {
  font-weight: 500;
  font-size: 1rem;
  min-width: 12ch;
  text-align: center;
  border: 1.5px solid var(--data-color);
  color: var(--data-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--unit) * 1.5);
  padding: 0px 1.5ch;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#home__hero .nav-hero li:hover {
  background-color: var(--data-color-light);
}
#home__hero .nav-hero a {
  text-decoration: none;
  color: var(--data-color);
  font-weight: bold;
}

#home__a-propos p,
#home__a-propos li {
  font-size: 1.6rem;
  margin-bottom: 1em;
  position: relative;
}
#home__a-propos p strong,
#home__a-propos li strong {
  color: var(--color-green);
}
#home__a-propos ol li::marker {
  display: none;
  content: "";
}
#home__a-propos ol {
  padding-left: 5ch;
  counter-reset: ol;
}
#home__a-propos ol li {
  counter-increment: ol 1;
  position: relative;
}
#home__a-propos ol li::before {
  font-size: 1.2rem;
  font-weight: bold;
  content: counter(ol);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2ch;
  height: 2ch;
  border-radius: 50%;
  border: 2px solid var(--color-green);
  color: var(--color-green);
  background-color: var(--color-green-light);
  position: absolute;
  left: -4ch;
  top: 4px;
}
#home__a-propos .btn--solid {
  margin-top: calc(var(--unit) * 2);
}

.slideshow-scroll {
  width: 100%;
  position: relative;
  /* left: calc((100vw - var(--max-w-home)) * -0.5); */
  margin:auto;
  padding-bottom: 20px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slideshow-scroll::-webkit-scrollbar {
  display: none;
}
.slideshow-scroll {
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
}
.slideshow-scroll .slideshow-scroll__warpper {
  padding-left: var(--padding-body);
  display: flex;
  gap: var(--padding-inner);
}
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item {
  flex-shrink: 0;
}
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure {
  height: 420px;
  width: 100%;
}
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure img {
  width: 100%;
  aspect-ratio: 5/3;
}
.slideshow-scroll .slideshow-scroll__warpper::after {
  content: "........................................";
  display: block;
  width: calc((100vw - var(--max-w-home)) * 1);
  color: transparent;
}

.screenshot-booklet {
  display: flex;
  --size-page: 340px;
  --gap: var(--padding-inner);
  gap: var(--gap);
  width: calc(var(--size-page) * 5 + var(--gap) * 2);
}
.screenshot-booklet .cover, .screenshot-booklet .page {
  width: 300px;
}
.screenshot-booklet .cover img, .screenshot-booklet .page img {
  border: 0.5px solid var(--color-txt-light);
  width: 100%;
}
.screenshot-booklet .double {
  display: flex;
}
.screenshot-booklet .page + .page img {
  border-left-color: transparent !important;
}

#home__methodologie {
    .section--header {
	display: block;
	.baseline {
	    max-width: 100%;
	}
    }

    figure {
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	img {
	    width: 100%;
	}
	figcaption {
	    font-size: 1.5em;
	    font-style: italic;
	}
    }
}
/*# sourceMappingURL=home.css.map */
.taxa-list .group-sort-view,
[data-page=species-list] .group-sort-view {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  grid-column: span 2;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid var(--color-x-light);
  padding-top: calc(var(--spacing) * 1);
  padding-bottom: calc(var(--spacing) * 0.5);
  margin-bottom: calc(var(--spacing) * 1.5);
  position: sticky;
  top: 0;
  background-color: var(--white);
  z-index: 50;
}
.taxa-list .page-species-list,
.taxa-list .page-species-list {
  max-height: 30em;
  overflow: scroll;
}

[data-editable="false"] .taxa-list .species-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  margin-bottom: calc(var(--spacing) * 3);
}
[data-editable="false"].taxa-list .species-list .taxon {
  width: calc(33.3333333333% - var(--spacing) * 2 / 3);
}
.taxa-list .family {
    margin-bottom: calc(var(--spacing) * 4);
    border: none;
    summary::before {
	content: "[+]";
	margin-right: 1ch;
    }
    &:open summary::before {
	content: "[-]";
	margin-right: 1ch;
    }
}
.taxa-list .family:target {
  padding-top: var(--top-target);
}
.taxa-list .family .family__header {
  border-radius: var(--radius-small);
  background-color: var(--color-violet-light);
  color: var(--color-violet);
  border: var(--w-border) solid var(--color-violet);
  padding: 5px 1.5ch;
  font-size: var(--fs-medium);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--spacing) * 1.5);
}
.taxa-list .family .family__header .title {
  font-size: var(--fs-medium);
  font-weight: 700;
}
.taxa-list .family .family__header .nbr-species {
  font-size: var(--fs-normal);
  font-weight: 500;
  font-family: var(--font);
}

[data-page=species-list] .page-species-list {
  grid-column: span 2;
  width: 100%;
  max-width: 100%;
}

/*# sourceMappingURL=species-list.css.map */
[data-page=species-single] .page-header {
  --w-fig: 320px;
  padding-bottom: calc(var(--spacing) * 0.5);
}
[data-page=species-single] .page-header .page-header__inner {
  display: grid;
  grid-template-columns: var(--w-fig) 1fr;
  grid-column-gap: var(--padding-body);
}
[data-page=species-single] .page-header .link-back {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  position: relative;
  top: calc(var(--spacing) * -1);
}
[data-page=species-single] .page-header .link-back a {
  color: var(--color-green) !important;
}
[data-page=species-single] .page-header .link-back {
  padding-left: 1.5ch;
}
[data-page=species-single] .page-header figure, [data-page=species-single] .page-header picture {
  border-radius: var(--radius-img);
  grid-column: 1;
  grid-row: 2/4;
  width: 100%;
  overflow: hidden;
}
[data-page=species-single] .page-header figure img, [data-page=species-single] .page-header picture img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-img);
}
[data-page=species-single] .page-header .group-title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding-top: calc(var(--spacing) * 0.5);
  padding-bottom: calc(var(--spacing) * 1);
}
[data-page=species-single] .page-header .saviez-vous {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}
[data-page=species-single] .page-header .page-title {
  margin: 0;
}
[data-page=species-single] .page-header .latin {
  font-size: var(--fs-medium);
}
[data-page=species-single] .page-header .saviez-vous__title {
  font-size: var(--fs-normal);
  font-weight: 700;
  margin-bottom: calc(var(--spacing) * 0.5);
}
[data-page=species-single] .page-header .saviez-vous__description {
  font-size: var(--fs-medium);
}
[data-page=species-single] .page-header .btn--group {
  grid-column: span 2;
  display: flex;
  justify-content: right;
  gap: var(--padding-inner);
  position: relative;
  top: calc(var(--spacing) * -1);
}
[data-page=species-single] .page-content .group-section {
  display: grid;
  grid-gap: var(--padding-body);
  grid-template-columns: 1fr 1fr;
}

[data-page=species-single] .page-content section:not(#photos) {
  padding-top: var(--top-target);
}
[data-page=species-single] .page-content .section-title {
  border-radius: var(--radius-small);
  background-color: var(--color-violet-light);
  color: var(--color-violet);
  border: var(--w-border) solid var(--color-violet);
  padding: 5px 1.5ch;
  font-size: var(--fs-medium);
  font-weight: 700;
}
[data-page=species-single] .page-content #description .section-title {
  border-radius: var(--radius-small);
  background-color: var(--color-orange-light);
  color: var(--color-orange);
  border: var(--w-border) solid var(--color-orange);
  padding: 5px 1.5ch;
  font-size: var(--fs-medium);
  font-weight: 700;
}
[data-page=species-single] .page-content #ecologie .section-title {
  border-radius: var(--radius-small);
  background-color: var(--color-violet-light);
  color: var(--color-violet);
  border: var(--w-border) solid var(--color-violet);
  padding: 5px 1.5ch;
  font-size: var(--fs-medium);
  font-weight: 700;
}
[data-page=species-single] .page-content #floraison-et-fructuation .section-title {
  border-radius: var(--radius-small);
  background-color: var(--color-green-light);
  color: var(--color-green);
  border: var(--w-border) solid var(--color-green);
  padding: 5px 1.5ch;
  font-size: var(--fs-medium);
  font-weight: 700;
}
[data-page=species-single] .page-content #repartition .section-title {
  border-radius: var(--radius-small);
  background-color: var(--color-yellow-light);
  color: var(--color-yellow);
  border: var(--w-border) solid var(--color-yellow);
  padding: 5px 1.5ch;
  font-size: var(--fs-medium);
  font-weight: 700;
}
[data-page=species-single] .page-content dl {
  display: grid;
  grid-template-columns: 14ch 1fr;
  border-bottom: 1px solid var(--color-orange-light);
}
[data-page=species-single] .page-content dl:first-of-type {
  border-top: 1px solid var(--color-orange-light);
}
[data-page=species-single] .page-content dl {
  padding: calc(var(--spacing) * 0.75);
}
[data-page=species-single] .page-content dl dt {
  color: var(--color-orange);
  text-transform: uppercase;
  font-size: var(--fs-normal);
  font-weight: 700;
  letter-spacing: 0.01rem;
  margin-bottom: calc(var(--spacing) * 0.5);
  padding-right: var(--padding-inner);
}
[data-page=species-single] .page-content #ecologie dl {
  border-color: var(--color-violet-light);
}
[data-page=species-single] .page-content #ecologie dl dt {
  color: var(--color-violet);
}
[data-page=species-single] .page-content #repartition picture, [data-page=species-single] .page-content #repartition figure {
  background-color: var(--color-yellow);
}
[data-page=species-single] .page-content #repartition picture img, [data-page=species-single] .page-content #repartition figure img {
  display: flex;
  /* mix-blend-mode: screen; */
  /* filter: grayscale(1); */
}
[data-page=species-single] .page-content .statut-group .caption {
  font-size: var(--fs-small);
  margin: 0;
  font-weight: 600;
  margin-bottom: calc(var(--spacing) * 0.5);
}
[data-page=species-single] .page-content .statut-group .statut {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin: 0;
}
[data-page=species-single] .page-content .statut-group .statut-signe {
  color: var(--color-yellow);
  border: 2px solid var(--color-yellow-medium);
  background-color: var(--color-yellow-light);
  display: inline;
  margin: 0;
  border-radius: var(--radius-btn);
  padding: 2px 0.5ch;
  font-weight: 800;
  font-size: var(--fs-small);
}
[data-page=species-single] .page-content #credits {
  font-size: var(--fs-normal);
}
[data-page=species-single] .page-content #credits .title {
  font-weight: 700;
}
[data-page=species-single] .section-photos {
  display: flex;
  gap: var(--padding-inner);
  width: 100%;
}
[data-page=species-single] .section-photos figure {
  min-width: 180px;
  max-width: 280px;
  width: 100%;
  overflow: hidden;
}
[data-page=species-single] .section-photos figure img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-img);
}
[data-page=species-single] .section-photos figcaption {
  font-size: var(--fs-normal);
  font-weight: 700;
  text-align: center;
  margin-top: calc(var(--spacing) * 0.25);
}
[data-page=species-single] .section-photos .credits {
  display: none;
}


/*# sourceMappingURL=species-single.css.map */