:root {
    /* Body text */
    --fs: 14pt;
    --lh: 17pt;

    /* Bigger interface elements using Alfphabet */
    --fs-buttons: 19pt;
    --lh-buttons: 22pt;

    /* Bigger size for titles */
    --fs-subtitle: 30pt;
    --lh-subtitle: 35pt;

    /* Biggest size for page title */
    --fs-title: 55pt;
    --lh-title: 50pt;

    /* --lh: 15pt; */
    --smalllh: 10pt;


    --c-lila: #e3c4e5;
    --c-orange: #ff754e;
    --c-yellow1: #ffff96;
    --c-yellow2: #feed55;
    --c-grey1: #d7d4d4;
    --c-grey2: #ebebeb;
    --c-violet: #6d81c4;
    --c-dark-violet:#01084f;
    --c-violette : #b07eb1;
    --c-black: #000000;
    --c-rose:#ffaaaa;
    --c-blue:#96d0e3;
    --marker-width: 60px;
    --marker-height: 60px;

    --view-mode: desktop;
}

body, html {
    padding: 0;
    font-family: "Schola", serif;
    /* color: var(--c-blue); */
    font-size: var(--fs);
    line-height: var(--lh);
}

body {
    display: flex;
    flex-direction: row;
    position: fixed;
    inset: 0;
}

a {
    color:black;
    text-decoration: underline;
    /* font-weight: bold; */
    /* font-family: 'Routed Gothic'; */
}

a:hover{
    color: var(--c-orange);
}

#map {
    flex: 1 1;
}

#main {
    position: relative;
    flex: 0 0 min(33%, 70ch);
    border-right: 2px solid black;
}


p {
    margin: 0 0 var(--smalllh) 0;
}

h1 {
    font-family: "Banana";
    font-weight: normal;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    margin: 0 0 var(--lh) 0;
    font-style: oblique;
}

h2, h3, h4, h5, h6 {
  font-family: "Banana";
  font-weight: normal;
  margin: var(--lh) 0 calc(var(--lh) * 0.25) 0;
  font-style: oblique;
}
h2 {
    font-size: 21pt;
    line-height: 24pt;
}

h3{
    font-size: var(--fs-buttons);
    line-height: var(--lh-buttons);
}

blockquote {
font-family: "Alfphabet";
font-size: 20pt;
line-height: 24pt;
margin: 0 0 calc(var(--lh) * 2) 0;
}


#panels{
    overflow-y: auto;
    direction: rtl;
    height: 100%;
    max-width: 100%;
}

.panel{
    direction: ltr;
    min-height: 100%;
}

/* #main > *:not(.active) {
    display: none;
} */

/* ----------------------------------- nav */
nav#tabs{
    height: 50px;
    width: 100vh;
    position: absolute;
    z-index: 1;
    top:100%;
    left: 100%;
    transform: rotate(-90deg);
    transform-origin: top left;
    align-content: end;
}

nav#tabs ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    display: flex;
    flex-direction: row-reverse;
}

nav#tabs ul li {
	position: relative;
	text-align: center;
	padding: 15px;
	border-radius: 0px 0px 15px 15px;
	border-bottom: 2px solid black;
	border-left: 2px solid black;
    border-top: 2px solid black;
}

nav#tabs ul li a{
    font-family: "Alfphabet";
    font-size: var(--fs-buttons);
    color: var(--c-black);
    text-decoration: none;
}




.tab-about{
    background-color: var(--c-lila);
}
nav#tabs ul li.tab-about[data-active]{
    border-top-color: var(--c-lila);
}
.tab-report {
    background-color: var(--c-orange);
}
nav#tabs ul li.tab-report[data-active] {
    border-top-color: var(--c-orange);
}
.tab-stories{
    background-color: var(--c-yellow1);
}
nav#tabs ul li.tab-stories[data-active]{
    border-top-color: var(--c-yellow1);
}
.tab-infos{
    background-color: var(--c-blue);
}
nav#tabs ul li.tab-infos[data-active]{
    border-top-color: var(--c-blue);
}



/* ----------------------------------- panels */

/*
    Hide panels who are not selected through target.
    Unless the #panels container does not have any child as target,
    in that case also check the panel is not the first-child,
    because we want to show the first child if no panel is selected.    

*/
.panel:not([data-active]):not(#panels:not(:has(.panel[data-active])) :first-child) {
    display: none;
}
/* 
#panels:not(:has(.panel:target)) .panel:first-child {
    display: block;
} */

#about {
    background-color: var(--c-lila);
    padding: var(--lh) calc(2 * var(--lh)) var(--lh) var(--lh);
}

#about .medor-logo {
    display: inline-block ;
    height: 30px ;
}

#reports {
    background: var(--c-orange);
}

#reports img{
    width: 95%;
}

#reports details {
  border-bottom: 3px dotted black;
}

#reports summary {
	font-family: "Alfphabet";
	font-size: 19pt;
	line-height: 22pt;
	list-style: none;
}

#reports summary::-webkit-details-marker {
    display: none
  }
  
#reports summary::after {
    content: ' \E00A';
    font-family: "Medor";
  }

#reports details[open] summary:after {
    content: ' \E00C';
    font-family: "Medor";
  }  

#reports summary:marker{
  font-display: none;
  }

#reports details p,
#reports details img {
    padding-left: var(--lh);
}


#reports details button {
    margin-top: calc(var(--lh)*0.5);
    margin-left: var(--lh);
} 


#report-form {
    margin: var(--lh) 0 0 0;
    padding: 0 var(--lh) calc(2 * var(--lh));
    box-sizing: border-box;
    min-height: 100vh;
    background-color: var(--c-orange);
}
#reports h2 {
    font-size: var(--fs-subtitle);
    line-height: var(--lh-subtitle);
    margin-bottom: var(--lh);
}
#report-form p {
    margin-right: var(--lh);
}

#map-infos{
    background-color: var(--c-blue);
    padding: var(--lh) calc(2 * var(--lh)) var(--lh) var(--lh);
}

#colophon{
    font-family: 'Alfphabet';
    font-size: var(--fs);
    line-height: var(--lh);
}

#stories{
    background-color: var(--c-yellow1);
    padding: var(--lh) calc(2 * var(--lh)) var(--lh) var(--lh);
}

/* Whitespace between form fields */
#report-form div{
    margin: var(--lh) 0 0 0;
}

#report-form div .helptext{
    margin: 0 0 var(--smalllh) 0 ;
}



label {
    font-family: "Alfphabet";
    font-size: var(--fs-buttons);
    line-height: var(--lh-buttons);
}

.helptext {
    margin: 0px;
}

textarea {
    border: 2px solid #E0D9D2;
    border-radius: 2px;
    position: relative;
    z-index: 1;
    padding: .5rem .5rem .4rem;
    width: 95%;
    box-sizing: border-box;
}

select {
    border: 2px solid #E0D9D2;
    border-radius: 2px;
    position: relative;
    z-index: 1;
    padding: .3rem .3rem .3rem;
    display: block;
    width: 95%;
    box-sizing: border-box;

}


input {
	color: #171216;
	border-radius: 2px;
	position: relative;
	font-family: "Alfphabet";
	font-size: var(--fs-buttons);
	border: none;
	text-decoration: none;
	padding: .4rem 0.2rem .3rem;
	cursor: pointer;
	max-width: 100%;
	display: block;
	width: 95%;
	box-sizing: border-box;
}

input[type="checkbox"] {
	width: initial;
	display: inline-block;
	vertical-align: middle;
}

button, .button {
    /* border: 2px solid #E0D9D2; */
    color: #171216;
    background-color: var(--c-yellow1);
    border-radius: 2px;
    box-shadow: 2px 2px 0 #171216;
    position: relative;
    font-family: "Alfphabet";
    font-size: var(--fs-buttons);
    border: none;
    text-decoration: none;
    padding: .5rem 1rem .4rem;
    cursor: pointer;
    text-align: center;
    max-width: 100%;
}

input #id_emailaddress{
    background-color: #6d81c4;
}

button,
.button,
input[type="submit"] {
    border: 1px solid black;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    box-shadow: none;
    translate: 2px 2px;
}

a.button:hover {
    color: black;
}

button:active,
.button:active,
input[type="submit"]:active {
    box-shadow: 2px 2px 0px #171216 inset;
    translate: 2px 2px;
}

#stories {
    background-color: var(--c-yellow1);
}


.marker {
    width: var(--marker-width);
    height: var(--marker-height);
    /* background-color: var(--c-orange); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/** To add styles for obstable based markers
    .marker[data-obstacle="obstacle-slug"]

    For example:
    .marker[data-obstacle="chaine"]
    .marker[data-obstacle="chaine"]
*/

.marker[data-obstacle="chaine"]{
    background-image: url("../markers/path01.svg");
}

.marker[data-obstacle="barriere"]{
    background-image: url("../markers/path02.svg");
}

.marker[data-obstacle="panneau-dissuasif"]{
    background-image: url("../markers/path03.svg");
}

.marker[data-obstacle="obstacle-naturel"]{
    background-image: url("../markers/path04.svg");
}
.marker[data-obstacle="mauvais-entretien"]{
    background-image: url("../markers/path05.svg");
}

.marker[data-obstacle="chasse"]{
    background-image: url("../markers/path06.svg");
}

.marker[data-obstacle="vehicule"]{
    background-image: url("../markers/path07.svg");
}

.marker[data-obstacle="autre"]{
    background-image: url("../markers/path08.svg");
}



/*
    Styles for report and / or markers which are hovered
    or selected.

*/



.report[data-target],
.report:hover{
    background-color: var(--c-rose);
}

.marker[data-highlight], 
.marker[data-target], 
.marker:hover {
    border-radius: 30px;
    outline: 3px solid var(--c-orange);
    outline-offset: 15px;
}

#report-details-container .report h2 {
    font-family: "Alfphabet";
    font-style: normal;
    /* padding: 0 0; */
}

#titre-list-report{
    font-size: var(--fs-subtitle);
    line-height: var(--lh-subtitle);
    margin: 0;
    padding: var(--lh) 0 0 var(--lh);
}

.marker.user-report-marker{
    /* background-color: var(--c-orange); */
    background-image: url("../markers/start-marker.svg");
}


/** Help message for the user marker */
.marker.user-report-marker[data-dragged="false"]::before {
	display: inline-block;
	z-index: 1;
	border: 1px solid black;
	border-radius: 4px;
	translate: calc(.5 * (var(--marker-width) - 100%)) calc(3 * var(--lh));
    box-sizing: border-box;
	padding: var(--lh) calc(2 * var(--lh));
	background: var(--c-yellow1);
	content: "Déplacez le marker sur la position de l’obstacle.";
    font-family: "Schola", serif;
    font-size: var(--fs);
    line-height: var(--lh);
	text-align: center;
	white-space: nowrap;
    color: black;
}

.marker.geocoder-result-marker {
    border-radius: 10px;
    width: 20px;
    height: 20px;
    background-color: var(--c-orange);
    outline: 3px solid var(--c-orange);
    outline-offset: 15px;
}

.report summary {
	padding: calc(var(--lh)*0.5) calc(var(--lh)*0.5) calc(var(--lh)*0.5) var(--lh);
}

.report[open] {
	padding-bottom: var(--lh);
	padding-right: var(--lh);
}

/* Dialog after form submission */
dialog {
	z-index: 2;
	background: var(--c-yellow1);
	border-radius: 8px;
	box-shadow: 5px 5px 0 #171216;
	position: fixed;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	padding: calc(1.5 * var(--lh)) calc(2 * var(--lh)) var(--lh) calc(2 * var(--lh));
	font-size: 18pt;
	border: 2px solid black;
	text-align: center;
}

dialog button {
    background: white;
    margin-top: var(--lh);
}


#colophon dt {
    float: left;
    margin-right: .5ch;
}
  
#colophon dt::after {
    content: ":"
}
  
#colophon dd {
    display: block;
    margin: calc(.5 * var(--line-height)) 0;
}


#map-controls {
    position: fixed;
    top: 10px;
    right: 60px;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--lh);
}



#map-controls summary::marker{
    content:'\E00A\0045';
    font-family: "Medor";
}

#map-controls details[open] summary::marker {
    content: '\E00C\0045';
    font-family: "Medor";
  }  

#control--visible-obstacle-types {
    width: 20ch;
    background: white;
    box-shadow: 2px 2px 0 #171216;
    border: 1px solid #171216;
    padding: .5rem 1rem .4rem;
    font-family: "Alfphabet";
    font-size: var(--fs-buttons);
}

#control--visible-obstacle-types label {
    display: block;
}

#control--visible-obstacle-types[open] summary {
    margin-bottom: var(--lh);
}

/** Hide button to close report ont desktop */
[data-role="close-report"] {
    display: none;
}

@media screen and (max-width: 600px) {
    :root {
        /* Body text */
        --fs: 13pt;
        --lh: 16pt;
        
        /* Bigger interface elements using Alfphabet */
        --fs-buttons: 15pt;
        --lh-buttons: 19pt;
        
        /* Bigger size for titles */
        --fs-subtitle: 20pt;
        --lh-subtitle: 24pt;
        
        /* Biggest size for page title */
        --fs-title: 40pt;
        --lh-title: 40pt;

        --view-mode: mobile;
    }

    body {
        display: grid;
        grid-template-rows: 60vh auto;
        position: relative
    }

    #main {
        border-right: none;
    }

    #map {
        order: -1;
        min-height: 60vh;
        z-index: 0;
    }

    nav#tabs {
        height: initial;
        width: 100%;
        position: absolute;
        top: initial;
        bottom: 100%;
        left: 0;
        transform: initial;
        transform-origin: top left;
        align-content: end;
        border-bottom: 1px solid black;
    }

    nav#tabs ul {
        flex-direction: row;
        position: relative;
    top: 1px;
    }

    nav#tabs ul li {
        padding: 11px;
        border-radius: 15px 15px 0 0;
        border-style: solid;
        border-color: black;
        border-width: 1px 2px 1px 1px;
        margin-left: -2px
    }

    nav#tabs ul li a {
        font-size: 15pt;
    }

    nav#tabs ul li.tab-about[data-active]{
        border-top-color: black;
        border-bottom-color: var(--c-lila);
    }

    nav#tabs ul li.tab-report[data-active] {
        border-top-color: black;
        border-bottom-color: var(--c-orange);
    }

    nav#tabs ul li.tab-stories[data-active]{
        border-top-color: black;
        border-bottom-color: var(--c-yellow1);
    }

    nav#tabs ul li.tab-infos[data-active]{
        border-top-color: black;
        border-bottom-color: var(--c-blue);
    }


    #panels {
        overflow-y: initial;
        direction: ltr;
        height: initial;
        max-width: 100%;
    }

    
    .panel * {
        scroll-margin: 0;
    }
    
    .panel,
    .panel .report {
        scroll-margin: 60vh;
    }
    
    blockquote {
        font-size: 18pt;
        line-height: 23pt;
    }
    
    #map-controls {
        right: initial;
        left: 10px;
        position: absolute;
        max-width: calc(100% - 70px);
        flex-wrap: wrap;
        gap: calc(.5 * var(--lh));
    }

    /** Help message for the user marker */
    .marker.user-report-marker[data-dragged="false"]::before {
        width: 80vw;
        text-wrap: initial;
    }

    /** If one report is open, hide the others. */
    #report-details-container:has(.report:open) .report:not(:open) {
        display: none;
    }

    [data-role="close-report"] {
        display: initial;
    }
}