.flora .node .answer-group{
	position: relative;
}


.flora .node .answer-group .answer-title {
	box-shadow: var(--control);
	line-height: var(--unit);
	display: inline-block;
	margin-right: calc(var(--unit)*1);
	position: relative;
	/* color: var(--color-text); */
}

.flora .node .answer-group .answer-title > span {
	background-color: white;
	padding-right: 1ch;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.flora .node .answer-group .answer .details {
	font-size: var(--font-small);
	min-height: var(--unit);
	line-height: calc(var(--unit)*0.75);
	padding-top: calc(var(--unit)*0.25);
	font-style: italic;
	box-shadow: var(--control);
	width: 100%;
	position: relative;
	top: calc(var(--unit)*-0.25);
	color: var(--color-medium);
	/* color: var(--color-text-light); */
}




.flora  .arrow-next-question{
	color: var(--color-next);
	border: var(--border-w) solid var(--color-next-light);
	width: calc(var(--unit)*1.1);
	height: calc(var(--unit)*1.1);
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	
	position: absolute;
	right: 0;
	padding-bottom: 2px;

	transform: rotate(135deg);


}

.back-cover .num-page{
	display: none !important;
}

.back-cover .page-container{
	--qr-code: 80px;
	display: grid;
	grid-template-columns: 4fr 3fr;
	grid-template-rows: auto auto auto var(--qr-code) 0.1cm; /* 5th line is to ensure QR code is sligtly up so as to print correctly */
	column-gap: var(--unit);
	row-gap: calc(var(--unit)*1.5);
	position: relative;
}

.back-cover #lieu{
	grid-column: 1;
	grid-row: 1;
	text-align: justify;
}

.back-cover #lieu-fig{
	grid-column: 2;
	grid-row: 1;
}

.back-cover #projet{
	grid-column: 1;
	grid-row: 2;
	text-align: justify;
}

.back-cover #credits{
	grid-column: 2;
	grid-row: 2/4;
}

.back-cover footer{
	grid-column: 1/3;
	grid-row: 4;
	position: relative;
}

.back-cover p + p{
	margin-top: 0.5em;
}


.back-cover h2{


	background-color: var(--color-found);
	color: white;

	height: calc(var(--unit)*1.25);
	font-size: 14px;

  padding: 0 1ch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: var(--radius-small);
  margin-bottom: calc(var(--unit)*0.5);

  
}

.back-cover h3{
	color: var(--color-found);
	font-size: var(--font-size);
	margin-top: 0.75em;
	margin-bottom: 0.25em;
	display: inline-block;

	background-color: var(--color-found-light);
 	padding-right: 1ch;
 	padding-left: 1ch;
 	box-decoration-break: clone;
 	-webkit-box-decoration-break: clone;
 	border-radius: var(--radius-small);
}

.back-cover .name:not(:last-of-type)::after{
	content: ', '

}

.back-cover .logo{
	max-width: 100px;
	margin-bottom: calc(var(--unit)*1);
}

.back-cover .logo img{
	width: 100%;
}


.back-cover #lieu{
	/* display: grid;
	grid-template-columns: 3fr 2fr;
	column-gap: var(--unit); */
}

.back-cover #lieu h2{
	margin-top: 0;
}

.back-cover #lieu-fig{
	width: 100%;

}

.back-cover #lieu-fig img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius);
	overflow: hidden;
}

.back-cover #lieu-fig figcaption{
	color: var(--color-text-light);
	font-size: var(--font-small);
}



.back-cover #qr-code{
	height: var(--qr-code);
	width: var(--qr-code);
	background-color: var(--color-text);
	display: flex;
	flex-shrink: 0;
	position: absolute; 
	right: 0;

}

.back-cover #qr-code img{
	width: 100%;
}


.back-cover footer{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding-bottom: 10px;
}

.back-cover footer p{
	margin: 0px;
}
.back-cover footer a{
	color: currentColor;
	text-decoration: underline dotted #cfcfcf;
}
.flora, .fiche {
    font-family: var(--font);
    font-weight: var(--weight);
    font-size: var(--font-size);
    line-height: var(--unit);
    color: var(--color-text);
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
}


.flora *, .fiche *{
    margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-weight: var(--weight);
}
@media print {
    body:has(.flora) {
	margin: 0;
	padding: 0;
	background-color: transparent!important;
    }
}
.fiche .calendar-svg{
    --svg-color: green;
    transform: rotate(-90deg);
}

.fiche .calendar-svg .mois{
    --svg-color: var(--color-light);
}

.fiche .calendar-svg .saison{
    --svg-color: white;
}

.fiche .calendar-svg .background{
    --svg-color: var(--color-x-light);

}

.fiche .calendar-svg .both{
    --svg-color: var(--color-found);
    display: none;
}



.fiche .calendar-svg .fleurs{
    --svg-color: var(--color-found);
    display: none;
}

.fiche .calendar-svg .fruits{
    --svg-color: var(--color-3);
    display: none;
}

.fiche .calendar-svg .none{
    --svg-color: var(--color-x-light);
}

.fiche .calendar-svg[data-fleurs*=jan] .jan .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=feb] .fev .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=mar] .mar .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=apr] .avr .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=may] .mai .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=jun] .jun .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=jul] .jul .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=aug] .aou .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=sep] .sep .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=oct] .oct .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=nov] .nov .fleurs{ display: block; }
.fiche .calendar-svg[data-fleurs*=dec] .dec .fleurs{ display: block; }

.fiche .calendar-svg[data-fruits*=jan] .jan .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=feb] .fev .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=mar] .mar .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=apr] .avr .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=may] .mai .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=jun] .jun .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=jul] .jul .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=aug] .aou .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=sep] .sep .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=oct] .oct .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=nov] .nov .fruits{ display: block; }
.fiche .calendar-svg[data-fruits*=dec] .dec .fruits{ display: block; }


.fiche .calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .both{ display: block; }
.fiche .calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .both{ display: block; }
.fiche .calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .both{ display: block; }
.fiche .calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .both{ display: block; }
.fiche .calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .both{ display: block; }
.fiche .calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .both{ display: block; }
.fiche .calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .both{ display: block; }
.fiche .calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .both{ display: block; }
.fiche .calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .both{ display: block; }
.fiche .calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .both{ display: block; }
.fiche .calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .both{ display: block; }
.fiche .calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .fleurs{ display: none; }
.fiche .calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .both{ display: block; }


/* Don’t display ".none" when fruits or fleurs */

.fiche .calendar-svg[data-fleurs*=jan] .jan .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=feb] .fev .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=mar] .mar .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=avr] .avr .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=may] .mai .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=jun] .jun .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=jul] .jul .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=aug] .aou .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=sep] .sep .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=oct] .oct .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=nov] .nov .none{ display: none; }
.fiche .calendar-svg[data-fleurs*=dec] .dec .none{ display: none; }

.fiche .calendar-svg[data-fruits*=jan] .jan .none{ display: none; }
.fiche .calendar-svg[data-fruits*=feb] .fev .none{ display: none; }
.fiche .calendar-svg[data-fruits*=mar] .mar .none{ display: none; }
.fiche .calendar-svg[data-fruits*=apr] .avr .none{ display: none; }
.fiche .calendar-svg[data-fruits*=may] .mai .none{ display: none; }
.fiche .calendar-svg[data-fruits*=jun] .jun .none{ display: none; }
.fiche .calendar-svg[data-fruits*=jul] .jul .none{ display: none; }
.fiche .calendar-svg[data-fruits*=aug] .aou .none{ display: none; }
.fiche .calendar-svg[data-fruits*=sep] .sep .none{ display: none; }
.fiche .calendar-svg[data-fruits*=oct] .oct .none{ display: none; }
.fiche .calendar-svg[data-fruits*=nov] .nov .none{ display: none; }
.fiche .calendar-svg[data-fruits*=dec] .dec .none{ display: none; }


/* Display mounth when something */


.fiche .calendar-svg[data-fleurs*=jan] .jan .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=feb] .fev .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=mar] .mar .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=apr] .avr .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=may] .mai .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=jun] .jun .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=jul] .jul .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=aug] .aou .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=sep] .sep .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=oct] .oct .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=nov] .nov .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fleurs*=dec] .dec .mois{  --svg-color: var(--color-text); }

.fiche .calendar-svg[data-fruits*=jan] .jan .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=feb] .fev .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=mar] .mar .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=apr] .avr .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=may] .mai .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=jun] .jun .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=jul] .jul .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=aug] .aou .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=sep] .sep .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=oct] .oct .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=nov] .nov .mois{  --svg-color: var(--color-text); }
.fiche .calendar-svg[data-fruits*=dec] .dec .mois{  --svg-color: var(--color-text); }



/* SAISONS */

.fiche .calendar-svg[data-fleurs*=mar] .printemps .saison,
.fiche .calendar-svg[data-fruits*=mar] .printemps .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=mar] .printemps .background,
.fiche .calendar-svg[data-fruits*=mar] .printemps .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=apr] .printemps .saison,
.fiche .calendar-svg[data-fruits*=apr] .printemps .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=apr] .printemps .background,
.fiche .calendar-svg[data-fruits*=apr] .printemps .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=may] .printemps .saison,
.fiche .calendar-svg[data-fruits*=may] .printemps .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=may] .printemps .background,
.fiche .calendar-svg[data-fruits*=may] .printemps .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=jun] .ete .saison,
.fiche .calendar-svg[data-fruits*=jun] .ete .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=jun] .ete .background,
.fiche .calendar-svg[data-fruits*=jun] .ete .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=jul] .ete .saison,
.fiche .calendar-svg[data-fruits*=jul] .ete .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=jul] .ete .background,
.fiche .calendar-svg[data-fruits*=jul] .ete .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=aug] .ete .saison,
.fiche .calendar-svg[data-fruits*=aug] .ete .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=aug] .ete .background,
.fiche .calendar-svg[data-fruits*=aug] .ete .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=sep] .automne .saison,
.fiche .calendar-svg[data-fruits*=sep] .automne .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=sep] .automne .background,
.fiche .calendar-svg[data-fruits*=sep] .automne .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=oct] .automne .saison,
.fiche .calendar-svg[data-fruits*=oct] .automne .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=oct] .automne .background,
.fiche .calendar-svg[data-fruits*=oct] .automne .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=nov] .automne .saison,
.fiche .calendar-svg[data-fruits*=nov] .automne .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=nov] .automne .background,
.fiche .calendar-svg[data-fruits*=nov] .automne .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=dec] .hiver .saison,
.fiche .calendar-svg[data-fruits*=dec] .hiver .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=dec] .hiver .background,
.fiche .calendar-svg[data-fruits*=dec] .hiver .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=jan] .hiver .saison,
.fiche .calendar-svg[data-fruits*=jan] .hiver .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=jan] .hiver .background,
.fiche .calendar-svg[data-fruits*=jan] .hiver .background{
    --svg-color: var(--color-text);
}
.fiche .calendar-svg[data-fleurs*=fev] .hiver .saison,
.fiche .calendar-svg[data-fruits*=fev] .hiver .saison{
    --svg-color: white;
}
.fiche .calendar-svg[data-fleurs*=fev] .hiver .background,
.fiche .calendar-svg[data-fruits*=fev] .hiver .background{
    --svg-color: var(--color-text);
}
.flora #page-1 .page-container {
    --qr-code: 90px;
    --color-description: var(--color-text);
    position: relative;
    padding: calc(var(--margin-top)*1.25) calc(var(--margin-inside)*1.5) calc(var(--margin-bottom)*2) calc(var(--margin-inside)*1.5);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.flora #botascopia-title {
    background-color: var(--color-found);
    height: calc(var(--unit)*1.5);
    font-size: 14px;
    color: white;
    padding: 0 1ch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: var(--radius-small);

}

.flora #title {
    font-size: 36px;
    line-height: calc(var(--unit)*2.25);
    margin-top: calc(var(--unit)*1);
    margin-bottom: calc(var(--unit)*1);
}

.flora #subtitle {
    font-size: var(--font-medium);
    margin-top: calc(var(--unit)*-0.5);
    margin-bottom: calc(var(--unit)*1);
    line-height: 1.2em;
}


.flora #page-1 .num-page {
    display: none;
}


.flora #cover-grid {
    display: grid;
    grid-template-columns: repeat(5, calc(var(--unit)*5));
    grid-gap: var(--unit);

}

.flora #cover-grid figure {
    width: calc(var(--unit)*5);
    height: calc(var(--unit)*5);
    display: flex;
    background-color: var(--color-found);
    border-radius: var(--radius);
    overflow: hidden;
}


.flora #cover-grid .big {
    grid-column: 1/3;
    grid-row: 1/3;
    width: calc(var(--unit)*11);
    height: calc(var(--unit)*11);

}

.flora #cover-grid .big:nth-of-type(2) {
    grid-column: 3/5;
    grid-row: 2/4;
}

.flora #cover-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.flora #node-1-0 .go {
    font-size: var(--font-medium);
    margin-left: 1ch;
    /* border-bottom: var(--border-w) solid currentColor;
    width: 100%;
    padding-bottom: calc(var(--unit)*0.25); */
}

.flora #node-1-0 .num {
    flex-shrink: 0;
}

.flora #node-1-0 .question-title{
    border: var(--border-w) solid currentColor;
}

.debug.modify-question {
    margin-inline: 1em;
    color: black;
    background-color: lightgray;

    padding: 0.5em;
    .button {
	font-size: 1em;
    }
}
button.debug {
    background-color: inherit;
    color: inherit;
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.8em;
    /*display: none!important;*/
}

.state-debug-modal {
    
    .answer-details li {
	margin-left: 1em;
    }

    .species-list-still-on {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2ch;
	font-style: italic;
	max-width: 50vw;
	span {
	    text-wrap: nowrap;
	}
    }
    .purple {
	color: blue;
	border: 1px solid currentColor;
	background: white;
    }
    button:active {
	background: lightblue;
    }
    .answer-details {
	margin-bottom: 0.5em;
    }
    .question-metrics {
	margin-left: 4ch;
	font-size: 0.7em;
	.metric {
	    padding-inline: 2ch;
	}
    }
    .question-title {
	font-size: 1.2em;
	display: flex;
	flex-direction: row;
	gap: 1ch;
    }

    .answer-details summary::marker {
	content:""
    }
    .answer-details b {
	font-weight: bold;
	text-decoration: underline;
    }
    .answer-details .species-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
    }
    .debug-sign {
	overflow: scroll;
	display: flex;
	flex-wrap: wrap;
	max-width: 50vw;
	gap: 0.5em;
	.debug-sign-item {
	    display: flex;
	    width: 8em;
	    flex-direction: column;
	    img {
		max-width:  4em;
		height: 4em;
		object-fit: contain;
	    }
	}
    }
    .btn-close{
	background : none;
	border : none;
    }
    h2{
	margin : 0 !important;
    }
}
.defined-word {
    /* text-decoration: underline dashed; */
}

.definition-point .definition {
    font-size: 0.8em;
    display: none;
}
.definition-point .defined-word {
    text-decoration: underline;
    /* margin-inline: 0.3em; */
}

.question-definitions {
    display: flex;

    flex-direction: column;
    align-items: flex-end;
    gap: 0.2cm;
    display: none;
    .definition {
	font-size: 0.9em;
	.word {
	    border: 1px solid currentColor;
	    background-color: var(--color-light);
	    color: var(--color);
	    border-radius: 3%;
	    padding: 0.05cm;
	    text-decoration: underline;
	    font-weight: bold;
	    margin-right: 1ch;
	}
    }
}

.page-glossary:not(:has(.word)) {
    display: none;
}
.page-glossary {
    display: grid;
    border-top: 2px solid var(--color-1-medium);
    padding-top: 1em;
    grid-template-columns: auto 1fr;
    column-gap: 0.4cm;
    position: absolute;
    bottom: var(--margin-bottom);
    right: var(--margin-inside);
    .glossary-icon {
	aspect-ratio: 1;
	height: 2.5em;
	margin-bottom: auto;
	background-image: url("/images/icons/glossary.png");
	background-position: center;
	background-size: cover;
    }
    
    .glossary {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.3cm;
	font-size: 0.9em;
	align-items: first baseline;
	line-height: 0.8em;
	.word {
	    color: var(--color);
	    border-radius: 3%;
	    padding: 0.05cm;
	    text-align: right;
	    text-decoration: underline;
	    font-weight: bold;
	    margin-right: 1ch;
	}
	.word-definition {
	    border-left: 2px solid var(--color-1-medium);
	    padding-left: 1ch;
	    border-bottom: 2px solid var(--color-1-medium);
	    padding-top: 0.5ch;
	    padding-bottom: 0.5ch;
	    text-wrap: wrap;
	}
    }
}
.page:nth-child(odd) {
    .page-glossary {
	right:unset;
	left: var(--margin-inside);
	align-items: first-baseline;
	/* Prevent the glossary to overflow on the page number */
	max-width: calc(var(--page-w) - 2 * var(--margin-inside) - calc(var(--unit)*2));
    }
}
.explanation-page .num-page {
	display: none !important;
  }
  

.explanation-page #explanation-title {
	background-color: var(--color-found);
	color: white;
	height: calc(var(--unit) * 1.25);
	font-size: 14px;
	padding: 0 1ch;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-radius: var(--radius-small);
	margin-bottom: calc(var(--unit) * 0.5);
  }

.explanation-page #explanation-paragraph {
	margin-top: 10px;
}

.explanation-page #explanation-flower {
	color: var(--color-text-light);
	font-size: var(--font-small);
	text-align:center;
	margin-top: 10px;
}
  
.explanation-page img{
	display: block;
	margin: auto;
	margin-top: 15px;
	width: 70%;
  }
  .fiche{
    display: grid;
    grid-template-columns: calc(var(--unit)*12) 1fr;
    grid-template-rows: calc(var(--unit)*3) calc(var(--unit)*16) auto calc(var(--unit)*2);
    column-gap: calc(var(--unit)*1);
    row-gap: calc(var(--unit)*0.5);
    position: relative;
}

.fiche header{
    grid-column: 1/3;
    grid-row: 1;

    display: flex;
    gap: calc(var(--unit)*0.5);
    align-items: flex-end;

    h1{
        flex-shrink: 0;
        order: 1;
    }

    .latin{
        order: 2;
    }

    h1, .latin{
        margin-bottom: calc(var(--unit)*0.5);
    }

}

.fiche .section-main-photo{
    grid-column: 1;
    grid-row: 2;
}

.fiche .section-photos{
    grid-column: 2;
    grid-row: 2;
}

.group-section-left{
    grid-column: 1;
    grid-row: 3;
}

.group-section-right{
    grid-column: 2;
    grid-row: 3;
}

/* Texte  ----------------------------------------------------- */

.fiche{
    line-height: 14px;
}
.fiche figcaption,
.fiche .caption{
    font-size: var(--font-small);
    line-height: calc(var(--unit)*0.75);

}

.fiche h2{
    font-size: var(--font-size);
    background-color: var(--color-found);
    color: white;
    height: calc(var(--unit)*1.25);
    padding-left: 1ch;
    padding-right: 1ch;
    margin-bottom: calc(var(--unit)*0.25); 
    padding-top: 2px;
    text-align: left;
    border-radius: var(--radius-small);
    border: var(--border-w) solid currentColor;
}

.fiche .section-calendrier h2{
    width: 100%;
    background-color: var(--color-found-light);
    color: var(--color-found);

    /* background-color: var(--color-3); */
}

.fiche .section-repartition h2{
    width: 100%;
    background-color: var(--color-2-light);
    color: var(--color-2);
    /* background-color: var(--color-2); */
}


.fiche .section-description h2{
    background-color: var(--color-4-light);
    color: var(--color-4);
   /* background-color: var(--color-4); */
}


.fiche .section-ecologie h2{
    background-color: var(--color-1-light);
    color: var(--color-1);
    /* background-color: var(--color-1); */
}
.section-repartition, .section-ecologie{
    margin-top: calc(var(--unit)*1); 
}


/* HEADER  ----------------------------------------------------- */

.fiche header .latin{
    padding-bottom: calc(var(--unit)*0.25);
}
.fiche header h1{
    font-size: var(--font-title);
    color: var(--color-found);
   
    display: inline-block;

     /* border: 2px solid currentColor; */
    /* padding: 10px 1ch; */
    /* border-radius: var(--radius); */

    /* padding-bottom: 10px;
    border-bottom: var(--border-w) solid currentColor; */

    background-color: var(--color-found);
    color: white;
    padding: 10px 1ch;
    border-radius: var(--radius);
    
}


/* PHOTOS  ----------------------------------------------------- */


.fiche .section-main-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.fiche .section-main-photo{
    width: 100%;
    height: calc(var(--unit)*14.5);
}

.fiche .section-photos{
    display: flex;
    flex-wrap: wrap;
}

.fiche .section-photos figure{
    width: calc(var(--unit)*6.5);
    height: calc(var(--unit)*8);
    margin-right: calc(var(--unit)*1); 
    /* margin-bottom: calc(var(--unit)*0.5); */
    display: flex;  
    flex-direction: column;
}
.fiche .section-photos img{
    width: calc(var(--unit)*6.5);
    height: calc(var(--unit)*6.5);
    object-fit: cover;
    display: flex;
    border-radius: var(--radius);
}

.fiche figure figcaption{
    padding-top: 3px;
    height: calc(var(--unit)*1);
}

.fiche .num-fig{
    color: var(--color-text-light);
    border: 1px solid var(--color-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25ch;
    height: 2.25ch;
    border-radius: 2px;
    margin-right: 0.25ch;
}

.fiche .credits{
    width: calc(var(--unit)*10 + 1ch);
    padding-left:  calc(var(--unit)*0.25);
    margin-right: calc(var(--unit)*-2);
    padding-bottom: calc(var(--unit)*1.25);

    align-self: flex-end;
    /* padding-bottom: calc(var(--unit)*0.25); */

}

.fiche .credits p{
    color: var(--color-text-light);
    font-size: 8px;
    line-height: 10px;
    margin-bottom: 4px;
}

.fiche .section-ecologie img {
    margin-top: calc(var(--unit)*0.5);
    width: calc(var(--unit)*10);
    height: calc(var(--unit)*10);
    object-fit: contain;
    display: flex;
}

.fiche .section-bioindication {
    position: relative;
}

.fiche .section-bioindication img {
    margin-top: calc(var(--unit)*0.5);
    margin-bottom: calc(var(--unit)*0.5);
    margin-left: calc(var(--unit)*1);
    max-width: 100%;
}

.fiche .section-bioindication svg{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.fiche .section-bioindication p{
    color: var(--color-text-light);
    font-size: var(--font-small);
}

/* CALENDRIER  ----------------------------------------------------- */



.fiche .section-calendrier .calendrier{
    width:  calc(var(--unit)*10);
    margin: 0 auto;
    
}
.fiche .section-calendrier img{
    width: 100%;
}

.fiche .section-calendrier .group-caption{
    margin-top: calc(var(--unit)*-1);
}

.fiche .section-calendrier .caption-floraison{
    color: var(--color-found);
}

.fiche .section-calendrier .caption-fructification{
    color: var(--color-3);
}


.fiche .caption-floraison::before,
.fiche .caption-fructification::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 1ch;
}

.fiche .caption-fructification::before{
    width: 7px;
    height: 7px; 
    margin-right: calc(1ch + 1px);
    margin-left: 1px;
}


/* RÉPARTITION  ----------------------------------------------------- */

.fiche .section-repartition{
    position: relative;
    top: -5px;
}


.fiche .section-repartition figure{
    width:  calc(var(--unit)*7.5);
    display: flex;
    background-color: var(--color-map);
    margin: auto;
    margin-top: calc(var(--unit)*0.5);
}


.fiche .section-repartition img{
    /* mix-blend-mode: screen; */
    /* filter: grayscale(1); */
    width:  calc(var(--unit)*7.5);
    height:  calc(var(--unit)*7.5);
}

.fiche .section-repartition .statut-group{
    /* margin-top: calc(var(--unit)*0.5); */
    color: var(--color-2);
}

.fiche .section-repartition .caption{
    margin-bottom: -1px;
    color: var(--color-2-medium);
    /* margin-top: calc(var(--unit)*0.25); */
}

.fiche .section-repartition .statut-signe{
    color:  var(--color-2-medium);
    display: inline-flex;
    border: var(--border-w) solid var(--color-2-light);
    width: calc(var(--unit)*1.5);
    height: calc(var(--unit)*1.5);
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    background-color: white;
    position: absolute;
    left: -4px;
    top:  calc(var(--unit)*7.25);

}


/* Description et écologie  ----------------------------------------------------- */

.fiche .section-description dl,
.fiche .section-ecologie dl{
    display: inline;
}


.fiche .section-description dl dt{ 
    color: var(--color-4);  
    /* background-color: var(--color-4-light); */
}


.fiche .section-ecologie dl dt{  
    color: var(--color-1); 
    /* background-color: var(--color-1-light); */
}



.fiche .section-description dl,
.fiche .section-ecologie dl{
    margin-top: calc(var(--unit)*0.25);
}
.fiche .section-description dl dt, 
.fiche .section-description dl dd,
.fiche .section-ecologie dl dt, 
.fiche .section-ecologie dl dd{
    display: inline;

}

.fiche .section-description dl dt,
.fiche .section-ecologie dl dt{
    text-transform: uppercase;
    font-size: var(--font-small);
    /* padding: 0px 0.5ch; */
    margin-right: 0.5ch;
    /* border-radius: var(--radius-small); */
    white-space: nowrap;
 
}

.fiche .section-description dl dt::after,
.fiche .section-ecologie dl dt::after{
    content: " → ";
    position: relative;
    top: -1px;

}


/* Le saviez-vous  ----------------------------------------------------- */

.fiche .section-saviez-vous{
    display: inline-block;
    transform: rotate(-3deg);
    width: 96%;
    margin-left: 4%;
    margin-top: calc(var(--unit)*0.5);
   
}
.fiche .section-saviez-vous h2{
    display: inline-block;
    background-color: var(--color-found);
    position: relative;
    top: 9px;
    left: -10px;
    margin-bottom: 0px;
    border: none;
}

.fiche .section-saviez-vous p{
    color: var(--color-found);
    border: 2px solid currentColor;
    padding-left: 2ch;
    padding-right: 0.5ch;
    padding-top: 2.5ch;
    padding-bottom: 1.5ch;
    border-radius: var(--radius);
    background-color: var(--color-found-light);
}


/* Item list ------------------------------------------- */
.item-list.comma-separated {
    --separator: ", ";
}
.item-list > span::after {
    content: var(--separator);
}
.item-list > span:last-of-type::after {
    content: "";
}
.item-list.and-terminated {
    --final: " et ";
}
.item-list > span:not(:first-of-type):last-child::before {
    content: var(--final);
}
.item-list:has(span)::before {
    content: attr(data-prefix);
}
.item-list.final-dot > span:not(.prefix):last-child::after {
    content: ".";
}
.item-list.final-dot.always:has(.prefix:only-child)::after {
    content: ".";
}

.item-list > .prefix:only-child {
    display: none;
}
.plural .item-list .item-value::after {
    content: attr(data-plural);
}
.feminine .item-list .item-value::after {
    content: attr(data-feminine);
}

.feminine.plural .item-list .item-value::after {
    content: attr(data-feminine) attr(data-plural);
}


.flora .node figure {
	box-shadow: var(--control);
	height: calc(var(--unit)*2.5);
	width: calc(var(--unit)*2.5);
	margin-bottom: calc(var(--unit)*-0.5);
	position: relative;
	top: calc(var(--unit)*-0.5);
	position: relative;
	border: none;
}

.flora .node figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.flora .answer-group figure:last-child::after {
	content: '';
	display: inline-block;
	width: var(--w-found);
	height: calc(var(--unit)*1);
	top: calc(var(--unit)*0.5);
	background-color: white;
	position: absolute;
}

.flora .node .choice-options {
	--img-size: calc(var(--unit) * 7);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--unit));
	margin-left: calc(var(--left) + var(--unit));
	margin-right: calc(var(--unit));
}

.flora .option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(0.5*var(--unit));
	flex-grow: 0;
}

.flora .option img {
	width: 100%;
	height: var(--img-size);
	object-fit: contain;
}

.flora .option .found {
	margin-bottom: calc(var(--unit)*-1);
	position: relative;
	z-index: 10;
	width: 100%;
}

.flora .option .descr {
	font-size: 0.8em;
	font-style: italic;
	line-height: 1em;
	margin-bottom: calc(0.5*var(--unit));
}


.flora .node .choice-options.by3 {
	grid-template-columns: 1fr 1fr 1fr;
}.flora .found {
	box-shadow: var(--control);
	/* margin-left: calc(var(--unit)*0.25); */
	display: flex;
	flex-direction: column;

	min-height: calc(var(--unit)*2);
	margin-bottom: calc(var(--unit)*-0.5);
	position: relative;
	z-index: 10;
	width: var(--w-found);

	a {
		color: inherit;
		cursor: pointer;
		text-decoration: none;
	}
}

.flora .found::before {
	content: '';
	background-color: white;
	width: 6px;
	height: var(--unit);
	position: absolute;
	left: -6px;
}


.flora .found .latin {
	order: 2;
	box-shadow: var(--control);
}


.flora .found .name {
	order: 1;
}

.flora .found .link_fiche {
	order: 3;
}


.flora .found .percent {
	display: none;

}



.flora .found .name {
	background-color: var(--color-found);
	color: white;
	min-height: calc(var(--unit)*1);
	padding: 3px 1ch;
	border-radius: var(--radius);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;


}

.flora .found[data-percent="minus-80"] .name {
	background-color: var(--color-found-light);
	color: var(--color-found-black);
}



.flora .found .latin {
	font-size: var(--font-x-small);
	line-height: calc(var(--unit)*0.75);
	font-style: italic;
	color: var(--color-found);
	/* background-color: white; */
	width: 100%;
	text-align: center;
	padding-top: 3px;

}

.flora .found[data-percent="minus-80"] .latin {
	color: var(--color-found);
	opacity: 0.7;
}


.flora .found .link_fiche {
	color: var(--color-found);
	background-color: white;
	font-size: var(--font-x-small);
	line-height: calc(var(--unit)*1);
	width: 8ch;
	/* padding: 0px 3px; */

	text-align: center;
	border-radius: 5px;
	white-space: nowrap;
	position: absolute;
	right: -10px;
	top: calc(var(--unit)*-1);
	transform: rotate(-5deg);
	border: 1px solid currentColor;

}



.flora .found .link_fiche a {
	color: currentColor;
	text-decoration: none;
}.grid {
        background-image:  linear-gradient(var(--grid-page) 1px, transparent 1px), linear-gradient(to right, var(--grid-page) 1px, #ffffff 1px);
	background-size: var(--unit) var(--unit);
}
 .flora .index h2 {
 	background-color: var(--color-found);
 	color: white;
 	height: calc(var(--unit)*1.25);
 	font-size: 14px;
 	padding: 0 1ch;
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;
 	border-radius: var(--radius-small);
 	margin-bottom: calc(var(--unit)*2);
 }


 .flora .index .num-page {
 	display: none !important;
 }

 .flora .index #list-taxons {
 	list-style: none;
 	columns: 2;
 	column-gap: calc(var(--unit)*2);
 }

 .flora .index #list-taxons li .line {
 	display: grid;
 	grid-template-columns: auto max-content;
 	grid-template-areas: "taxon page";
 	align-items: end;
 	gap: 0 .25rem;
 	margin-bottom: calc(var(--unit)*0.5)
 }

 .flora .index #list-taxons li .line .taxon {
 	grid-area: taxon;
 	position: relative;
 	overflow: hidden;
 }

 .flora .index #list-taxons li .line .taxon .vernacular {
 	padding-right: 1ch;
 	display: inline-block;
 	width: max-content;
 	color: var(--color-found);
 	background-color: var(--color-found-light);
 	padding-right: 1ch;
 	padding-left: 1ch;
 	box-decoration-break: clone;
 	-webkit-box-decoration-break: clone;
 	border-radius: var(--radius-small);
 	/* border: var(--color-found) solid currentColor; */
 }



 .flora .index #list-taxons li .dotted-line .taxon::after {
 	content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
 	/* content: "----------------------------------------------------------------------------------------"; */
 	color: #cfcfcf;
 	position: absolute;
 	padding-left: 1px;
 	word-spacing: nowrap;
 }

 .flora .index .page_ref::before {
 	content: "page "
 }


 .flora .index .page_ref {
 	font-size: var(--font-x-small);
 	line-height: calc(var(--unit)*1);
 	white-space: nowrap;
 	padding-left: 1ch;
 }
#body {
    position: relative;
}
#interface{
    a {
	text-decoration: none;
	color: inherit;
    }
    button {
	font-family: inherit;
	font-size: inherit;
	background-color: inherit;
    }

    select {
	border: 1px solid var(--color-text);
	background-color: inherit;
    }
	
    position: sticky;
    top: var(--unit);
    left: var(--unit);
    z-index: 101;
    font-size: 1rem;
    display: flex;
    align-items: baseline;
    flex-direction: row;
    gap: 2ch;
    --color-text: rgb(41, 41, 41);
    --color-xx-light: #f4f4f4;
    --color-x-light: #eaebeb;

    .icon {
	width: 2em;
	height: 2em;
    }

    .item {
	display: flex;
	background: var(--color-xx-light);
	border: 1px solid currentColor;
	border-radius: 1ch;
	flex-direction: row;
	padding-inline: 2ch;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	align-items: baseline;
	gap: 1ch;
	&:hover {
	    background-color: var(--color-x-light);
	}
    }
    .dropdown {
	display: block;
	position: relative;
	.subitems {
	    display: none;
	    .subitem {
		color: var(--color-text);
		border-color: currentColor;
		background-color: var(--color-xx-light);
		padding-inline: 1ch;
		text-wrap: nowrap;
		display: flex;
		background-color: var(--color-x-light);
		border: 1px solid currentColor;
		padding-inline: 1ch;
		&button {
		    cursor: pointer;
		    &:hover {
			background-color: var(--color-light);
		    }
		}
		
	    }

	}
	&:hover {
	    .menu {
		background-color: var(--color-x-light);
	    }

	    .subitems {
		padding-top: 0.4em;
		left: 0;
		display: flex;
		flex-direction: column;
		position: absolute;
	    }
	}
    }
    button:hover {
	background-color: var(--color-light);
	cursor: pointer;
    }
    label {
	display: flex;
	flex-direction: row;
	align-items: baseline;
    }
}



@media print{
    #interface{ display: none; }
}



/* GRID ---------------------------- */




#toggle-grid .hide{
    display: none;
}

.show-grid #toggle-grid .see{
    display: none;
}

.show-grid #toggle-grid .hide{
    display: block;
}



/* COLOR ---------------------------- */


.black-version{
    --color-1: black;
    --color-2: black;
    --color-3: black;
    --color-4: black;
    --color-found: black;
    --color-found-light: #cfcfcf;
    --color-found-black: black;
    --color-text: black;
    --color-chapter: black;
    --color-light: #999;

}

.black-version .latin{
    color: #666!important
}

#toggle-color .color{
    display: none;
}

.black-version #toggle-color .color{
    display: block;
}

.black-version #toggle-color .black{
    display: none;
}



.flora .link {
	box-shadow: var(--control);
	height: var(--unit);
	display: flex;
	align-items: center;
	justify-content: flex-end;

	position: relative;
}


.flora .link_page {
	position: relative;
}

.flora .link_page::before {
	content: '';
	background-color: white;
	width: 6px;
	height: var(--unit);
	position: absolute;
	left: -6px;
}

.flora .link_page a {
	display: inline-flex;
	align-items: center;
	color: currentColor;
	text-decoration: none;
	font-size: var(--font-small);
	font-style: italic;
	border: var(--border-w) solid var(--color-light);
	background-color: white;
	padding-left: 1ch;
	padding-right: 1.5ch;
	height: var(--unit);
	border-radius: calc(var(--unit)/2);
	position: relative;
}

.flora .link_page a::before {
	content: "→\00a0";

}	.flora .node {
		color: var(--color);
		position: relative;
		--left: calc(var(--unit)*0.5);
		--space: calc(var(--unit)*1.5);
		margin-top: calc(var(--unit)*1);

	}

	.flora .answer-group+.node {
		margin-top: calc(var(--unit)*2);
	}

	.flora .node[data-level="2"],
	.flora .node[data-level="3"],
	.flora .node[data-level="4"],
	.flora .node[data-level="5"] {
		margin-left: calc(var(--unit)*1.5);
	}


	/* VERTICAL LINE */
	.flora .node::before {
		content: '';
		display: block;
		height: 100%;
		width: var(--unit);
		position: absolute;
		top: 0px;
		left: var(--left);
		border-left: var(--border-w) solid var(--color);
	}




	/* DOT  */

	.flora .node .answer-group .answer::before {
		--size: 11px;
		content: "";
		display: block;
		width: var(--size);
		height: var(--size);
		border-radius: 50%;

		background-color: var(--color);
		position: absolute;
		left: calc(var(--unit)*-1 + var(--size)*-0.5 - 1px);
		margin-top: 2px;
		border: 2px solid white;
	}




	/* DOTED LINE  */
	.flora .node .answer-group::after {
		content: '';
		width: calc(100% - var(--unit)*2);
		position: absolute;
		top: calc(var(--unit)*0.5);
		border-top: 2px dotted var(--color-light);

	}





	.flora .node .answer-group {
		position: relative;
		margin-top: var(--unit);
		margin-bottom: var(--unit);
		margin-left: calc(var(--left) + var(--unit));
		display: grid;
		grid-template-columns: 1fr 0px var(--w-found);
		grid-template-rows: 1fr;
	}

	.flora .node .answer-group[data-image="true"] {
		grid-template-columns: 1fr calc(var(--unit)* 3.5 + 6px) var(--w-found);

	}


	.flora .node .answer-group .answer {
		grid-column: 1;
		grid-row: 1;
		z-index: 10;
	}

	.flora .node .answer-group .link {
		grid-column: 3;
		grid-row: 1;
		z-index: 10;
	}

	.flora .node figure {
		grid-column: 2;
		grid-row: 1/3;
		z-index: 10;
	}

	.flora .node .found {
		grid-column: 3;

	}


	/* hack to hide end of the horizontal line */

	.flora .answer-group:last-child::before {
		content: "";
		width: calc(var(--unit)*1);
		height: 100%;
		position: absolute;
		left: calc(var(--unit)*-1.5);
		background-color: white;
	}
.page:nth-child(even) .num-page {
  left: var(--margin-outside);
}
.page:nth-child(odd) .num-page {
  right: var(--margin-outside);
}

.flora .num-page{
		position: absolute;
		bottom: var(--margin-bottom);
		height: calc(var(--unit)*1.75);
		width: calc(var(--unit)*1.75);
		background-color: var(--color-text);
		border: var(--border-w) solid var(--color-text);
		border-radius: 50%;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 4px;
		font-size: 1rem;
		z-index: 100;
    }
body:has(.flora){
    background-color: #cfcfcf;

}
/* 
@media print{
    @page {
        size:  A5;
    }
}

    
@media screen{ */


#pages{
    --scale-factor: 1;
    background-color: #cfcfcf;
    padding-top: 50px;
    margin: 0 auto;
    width: calc(var(--page-w)*2);
    display: flex;
    flex-wrap: wrap;    
}
/* } */

.page{
    display: block;
    width: var(--page-w);
    height: var(--page-h);
    background-color: white;
 
    overflow: hidden; 
    padding: 0;
    margin-bottom: 30px;
}

.page:nth-child(even) .page-container, .page.standalone{
    padding: var(--margin-top) var(--margin-inside) var(--margin-bottom) var(--margin-outside);
}

.page:nth-child(odd) .page-container{
    padding: var(--margin-top) var(--margin-outside) var(--margin-bottom) var(--margin-inside);
}

#pages:not(.booklet) .page:first-child {
    margin-left: var(--page-w);
}

#pages.key-no-links .link_fiche {
    display: none;
}
.page-container {
    margin: 0;
    padding: 0;
    width: var(--page-w);
    height: var(--page-h);
    position: relative;
}


@media screen{
    .page{
        box-shadow: 0px 0px 0px 1px #999;
    }
}

@media print{
    #pages{
	background: none;
        margin: 0px; 
        padding: 0px;
	--scale-factor: 1.414;
    }
    #pages.single {
	flex-direction: column;
	width: 21cm;
	
	.page {
	    width: 21cm;
	    height: 29.7cm;
	}
	.page .page-container {
	    transform:scale(var(--scale-factor));
	    transform-origin:top left;
	}
    }

    .page{
        box-shadow: none;
        background-color: white;
	border: none;
        margin-bottom: 0px;
    }
    .debug {
	display: none!important;
    }

    #pages .page:first-child {
	margin-left: 0 !important;
    }
}


 .flora .white-page .num-page {
 	display: none !important;
 }
.flora .node .question {
	box-shadow: var(--control);
	line-height: var(--unit);
	margin-bottom: calc(var(--unit)*0.5);
	position: relative;

}


.flora .reminder+.node[data-level="1"] .question::before,
.flora .node[data-level="2"] .question::before,
.flora .node[data-level="3"] .question::before,
.flora .node[data-level="4"] .question::before,
.flora .node[data-level="5"] .question::before {
	/* content: '◣';
	font-size: 12px;
	display: block;
	transform: rotate(135deg);
	position: absolute;
	top: -13px;
	left: 5px;
	color: var(--color); */

}

.flora .node .question>.question-title {
	background-color: var(--color-light);
	color: var(--color);
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 1ch;
	padding-left: 1ch;
	position: relative;
	top: 1px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	border-radius: var(--radius-small);
	border: var(--border-w) solid currentColor;
}


.flora .node .question-description {
	margin-top: calc(var(--unit)*0.5);
	padding-left: calc(var(--unit)*1.5);
	font-style: italic;
	color: var(--color-medium);

	font-size: var(--font-small);
	line-height: calc(var(--unit)*0.75);
	padding-top: calc(var(--unit)*0.25);
	box-shadow: var(--control);
	width: 100%;
	position: relative;
	top: calc(var(--unit)*-0.25);
}
 .flora .reminder {
 	color: var(--color-text) !important;
 	box-shadow: var(--control);
 	display: flex;
 	align-items: center;
 	position: relative;
 	left: -2px;
	/* background-color: red; */
	margin-bottom: calc(var(--unit)*1.5);
 }

 .flora section+.reminder {
 	margin-top: calc(var(--unit)*2);
 }



 .flora .reminder .num {
 	font-size: var(--font-size);
 	width: calc(var(--unit)*1.5);
 	height: calc(var(--unit)*1.5);
 	border-radius: 50%;
 	border: var(--border-w) solid currentColor;
 	display: flex;
 	justify-content: center;
 	align-items: center;

 }


 .flora .reminder .num::after {
	content: '◣';
	font-size: 12px;
	display: block;
	transform: rotate(-45deg);
	position: absolute;
	top: 19px;
	left: 5px;
	color: var(--color-light);
	/* color: var(--color-text); */
}

 .flora .reminder .alphabet {
 	font-size: var(--font-small);
 	width: calc(var(--unit)*1.25);
 	height: calc(var(--unit)*1.25);
 	border-radius: 50%;
 	border: var(--border-w) solid currentColor;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	margin-left: 3px;

 }



 .flora .reminder .icon {
 	display: none;
 }

 .flora .reminder .breadcrumb {
 	margin-left: 2ch;
 	width: calc(100% - var(--unit)*2.75 - 5px);
 	border-bottom: var(--border-w) solid currentColor;

 }

 .flora .reminder .breadcrumb::first-letter {
 	text-transform: uppercase;
 }

 .flora .reminder .back-node {
 	float: right;
 	color: var(--color-text-light);
 	text-decoration: none;
 }

 /* 2 reminder on the page */
 .flora .content+.content {
 	margin-top: calc(var(--unit)*2);
 }#interface, .fiche, .flora {

    --page-w: 148mm;
    --page-h: 210mm;

    --margin-outside: calc(var(--unit)*2);
    --margin-inside: calc(var(--unit)*2);
    --margin-top: calc(var(--unit)*2);
    --margin-bottom: calc(var(--unit)*1.5);

    --font: 'Borna', Arial, sans-serif;
    --weight: 600;
    --font-title: 24px;
    --font-medium: 18px;
    --font-size: 11px;
    --font-small: 9px;
    --font-x-small: 9px;



    --border-w: 1.5px;
    --radius: 6px;
    --radius-small: 2px;
    
    --unit: 16px;
    --w-found: calc(var(--unit)*10);


    --color-1:          #6e62a4;
    --color-1-medium:   #9b92c4;
    --color-1-light:    #e1dfec;

    --color-2:          #cdaa38;
    --color-2-medium:   #e0c46a;
    --color-2-light:    #f5f0d5;
    --color-map:        #ad8422;

    --color-3:          #0f70c0;
    --color-3-medium:   #5aa0da;
    --color-3-light:    #d1e5f7;

    --color-4:          #f17f2d;
    --color-4-medium:   #f3a066;
    --color-4-light:    #f3e7e0;

    --color-found:          #007953;
    --color-found-medium:   #a1ccbe;;
    --color-found-light:    #d5ebe4;
    --color-found-black:    #016042;

    --color-text:       #0D2846;
    --color-text-light: #a5a9a9;
    --color-light:      #DCDDDD;
    --color-x-light:    #eaebeb;
 

    --control: 0px 0px 0px 1px red;
    
    --control: 0px 0px 0px 1px transparent;
    --grid-page: #cfcfcf;
    
    .node{ --color: var(--color-1); }
    [data-node-color="cover"]{ --color: var(--color-found); }

    [data-node-color="0"]{ 
        --color: var(--color-1); 
        --color-medium: var(--color-1-medium);
        --color-light: var(--color-1-light);
        --color-next: var(--color-4); 
        --color-next-medium: var(--color-4-medium);
        --color-next-light: var(--color-4-light);
        /* --color-next: var(--color-2); 
        --color-next-medium: var(--color-2-medium);
        --color-next-light: var(--color-2-light); */
    }
    [data-node-color="1"]{ 
        --color: var(--color-4); 
        --color-medium: var(--color-4-medium);
        --color-light: var(--color-4-light);
        /* --color: var(--color-2); 
        --color-medium: var(--color-2-medium);
        --color-light: var(--color-2-light); */
        --color-next: var(--color-3); 
        --color-next-medium: var(--color-3-medium);
        --color-next-light: var(--color-3-light);
    }
    [data-node-color="2"]{ 
        --color: var(--color-3);
        --color-medium: var(--color-3-medium);
        --color-light: var(--color-3-light);
        --color-next: var(--color-4); 
        --color-next-medium: var(--color-4-medium);
        --color-next-light: var(--color-4-light);
    }
    [data-node-color="3"]{ 
        --color: var(--color-2); 
        --color-medium: var(--color-2-medium);
        --color-light: var(--color-2-light);
        /* --color: var(--color-4); 
        --color-medium: var(--color-4-medium);
        --color-light: var(--color-4-light); */
        --color-next: var(--color-5); 
        --color-next-medium: var(--color-5-medium);
        --color-next-light: var(--color-5-light);
    }

    [data-node-color="found"]{ 
        --color: var(--color-found); 
        --color-medium: var(--color-found-medium);
        --color-light: var(--color-found-light);

    }

    
}
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;
}
/* 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;
    }
}
: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 */