*, ::before, ::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* #region FONTFACE */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/statics/fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/statics/fonts/Lato-Italic.ttf') format('truetype');
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/statics/fonts/Lato-Bold.ttf') format('truetype');
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/statics/fonts/Lato-BoldItalic.ttf') format('truetype');
}

/* #endregion FONTFACE */
/* ---------- */
/* #region VARIABLES */
:root {
  /* RESPE colors */
  --respe-blue: #022C3C;
  --respe-green: #16663B;
  --respe-orange: #F99767;
  --respe-dark-orange: #A13200;
  --respe-alert-low: #fdc540;/* ok avec du noir taille mini 18px pour une font-weight 400/normal */
  --respe-alert-medium: #eb601d;/* ok avec du blanc taille mini 21.75px pour une font-weight 400/normal */
  --respe-alert-high: #cd1719;/* ok avec du blanc taille mini 17.25px pour une font-weight 400/normal */
  --respe-alert-not-validated: #4f14a2;/* ok avec du blanc taille mini 17.25px pour une font-weight 400/normal */

  /* colors */
  --color-white: #fafafa;
  --color-black: #0f0f0f;
  --color-primary: #7b8381;
  --color-primary-dark: #34373a;
  --color-primary-light: #d6d6d6;
  --color-highlight: #079274;

  /* font-family */
  --fontfamily-sans: "Lato", Helvetica, sans-serif;
  --fontfamily-serif: Palatino, 'Times New Roman', Times, serif;

  /* font-sizes */
  --fontsize-xsm: calc(var(--fontsize-reg) * 0.708); /* 11.3px si 1rem  => 12.74*/
  --fontsize-sm: calc(var(--fontsize-reg) * 0.8125); /* 13px si 1rem  => 14.625*/
  --fontsize-reg: 1.125rem; /* 16px si 1rem  => 18*/
  --fontsize-md: calc(var(--fontsize-reg) * 1.125); /* 18px si 1rem  => 20.25*/
  --fontsize-lg: calc(var(--fontsize-reg) * 1.27); /* 20.3px si 1rem  => 22.86*/
  --fontsize-xl: calc(var(--fontsize-reg) * 1.6); /* 25.6px si 1rem  => 28.8*/
  --fontsize-xxl: calc(var(--fontsize-reg) * 2.25); /* 36px si 1rem  => 40.5*/
  --fontsize-giant: calc(var(--fontsize-reg) * 4); /* 64px si 1rem  => 72*/

  /* font-weight */
  --fontweight-bold: 700;

  /* border-radius */
  --round-corner-light: 5px;
  --round-corner-medium: 8px;

  /* box shadows */
  --box-shadow-1: 0px 0px 6px 0px rgb(0, 0, 0, 0.2);
  --box-shadow-2: 0px 0px 6px 0px rgba(0, 0, 0, 0.6);

  /* transform */
  --scale-hover: scale(1.04);

  /* transform */
  --scale-hover: scale(1.04);

  /* Layout variables */
  --body-padding-inline:15px;
  --body-padding-block:10px;
  --header-height: 72px;
  --aside-height: 70px;
}

/* #endregion VARIABLES */
/* ---------- */
/* #region UTILITIES */
.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.hidden {
  display: none;
}

.hidden-mobile {
  display: none;
}

@media (min-width: 992px) {
  .hidden-desktop {
    display: none;
  }

  .hidden-mobile {
    display: revert;
  }
}

.no-scroll {
  overflow: hidden;
}

.container {
  width: min(100%, 960px);
  margin-inline: auto;
  padding-left: calc(var(--body-padding-inline) * 2);
  padding-right: calc(var(--body-padding-inline) * 2);
}

.container-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.full-screen {
  position: fixed;
  inset: 0;
}

.highlight-block {
  --block-spacing: 1.4rem;

  max-width: 960px;
  margin-block: var(--block-spacing);
  margin-inline: auto;
  padding-block: var(--block-spacing);
  background-color: var(--respe-green);
  color: var(--color-white);
}

/*  #endregion UTILITIES */
/* ---------- */
/* #region GLOBAL STYLES */
body {
  --body-bg-color: var(--color-white);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--body-bg-color);
  color: var(--color-black);
  font-family: var(--fontfamily-sans);
  font-size: var(--fontsize-reg);
  line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5 {
  margin: revert;
  color: var(--respe-blue);
  text-wrap: balance;
}

h1 {
  font-size: 1.8em;
}

p {
  margin-block: 0.6em;
}

a, a:visited {
  color: inherit;
  text-decoration: none;
}

p a,
p a:visited {
  color: var(--respe-dark-orange);
  text-decoration: underline;
}

a:not(.btn):hover {
  color:var(--respe-orange);
}

li {
  margin-left: 20px;
}

nav li {
  list-style: none;
  margin-left: 0;
}

li.bold-ol::marker {
  font-weight: var(--fontweight-bold);
}

fieldset {
  border: none;
  margin-block: 1rem;
}

input:focus-visible + label {
  outline: 2px auto Highlight;
}

label:hover {
  cursor: pointer;
}

button {
  border: none;
  font-size: var(--fontsize-reg);
}

button,
.btn {
  --background-color: var(--color-primary-dark);
  --text-color: var(--color-white);

  display: inline-block;
  border-radius: var(--round-corner-medium);
  padding-block: 0.6em;
  padding-inline: 2em;
  background-color: var(--background-color);
  color: var(--text-color);
  text-align: center;
  box-shadow: var(--box-shadow-1);
}

button:hover,
.btn:hover {
  box-shadow: var(--box-shadow-2);
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  background-color: var(--color-primary);
  color: var(--color-primary-dark);
  box-shadow: none;
}

button.light,
.btn.light {
  --background-color: var(--color-white);
  --text-color: var(--respe-blue);
}

hr {
  width: calc(100% - (var(--body-padding-inline) * 2));
  max-width: 960px;
  height: 2px;
  margin-inline: auto;
  border: none;
  background-color: var(--respe-dark-orange);
}

dialog {
  position: relative;
  margin: revert;
  padding: revert;
  border: none;
}

dialog::backdrop {
  background-color: rgba(15, 15, 15, 0.5);
}

dialog button {
  position: absolute;
  top: 10px;
  left: 10px;
}

dialog button,
dialog + button {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

dialog + button {
  color: var(--respe-blue);
  font-size: var(--fontsize-sm);
  font-style: italic;
  text-decoration: underline;
}

dialog button:hover,
dialog + button:hover {
  box-shadow: none;
}

/* Main content access btn */
#access-main-content {
  position: absolute;
  z-index: 10;
  top:-10000px;
  left:0;
}

#access-main-content:focus {
  top:0;
}

/* SVG styling */
svg.upload-file {
  --main-color: var(--color-black);
  --bg-color: var(--color-white);

  stroke: var(--main-color);
  background-color: var(--bg-color);
}

svg.upload-file .leafs,
svg.upload-file .arrow {
  fill: var(--main-color);
}

svg.camera-icon {
  --main-color: var(--color-black);
  --bg-color: var(--color-white);

  fill: var(--main-color);
  background-color: var(--bg-color);
}

/* Spinner */
.spinner {
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
}

.spinner-icon {
  fill: var(--respe-green);
}

.spinner-icon path {
  animation-name: blink;
  animation-duration: 1500ms;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spinner-icon .big-leaf {
  animation-delay: 0ms;
}

.spinner-icon .medium-leaf {
  animation-delay: 500ms;
}

.spinner-icon .small-leaf {
  animation-delay: 1000ms;
}

@keyframes blink {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

.respe-logo {
  text-align: center;
}

.respe-logo p {
  margin: 0;
  font-size: var(--fontsize-xsm);
  font-style: italic;
}

.respe-logo img {
  display: block;
}

/* #endregion GLOBAL STYLES */
/* ---------- */
/* #region HEADER */
header {
  position: fixed;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: calc(var(--body-padding-block) * 2 + var(--header-height));
  padding-inline: var(--body-padding-inline);
  padding-block: var(--body-padding-block);
  background-color: var(--body-bg-color);
  border-bottom: 4px solid var(--respe-blue);
}

header .logo:hover{
  text-decoration: none;
}

header .logo-text {
  /* margin-left: 15px; */
  margin-top: 5px;
}

/* Burger menu */
label#open-nav {
  position: absolute;
  z-index: 1;
  right: var(--body-padding-inline);
  top: var(--body-padding-block);
  height: var(--header-height);
  padding: 0.5em;
}

label#open-nav::before {
  content: 'menu\00a0';
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-100%, -55%);
}

@media screen and (max-width: 400px) {
  label#open-nav::before {
    top: 0;
    left: 50%;
    transform: translate(-47%, -15%);
  }
}

label#open-nav svg {
  height: 100%;
  aspect-ratio: 1/1;
}

label#open-nav svg.lucide-menu {
  stroke: var(--respe-blue);
}

label#open-nav svg.lucide-x {
  display: none;
  padding: 2px;
  stroke: var(--respe-blue);
  background-color: var(--color-white);
  border-radius: 50%;
}

label#open-nav:hover svg.lucide-menu {
  stroke: var(--respe-green);
}

label#open-nav:hover svg.lucide-x {
  background-color: var(--respe-orange);
}

#main-nav {
  background-color: var(--respe-blue);
  display: none;
}

#main-nav ul.hidden-desktop {
  padding-top: calc(var(--body-padding-block) + var(--header-height));
  padding-left: calc(var(--body-padding-inline) + 0.8em);
  font-weight: var(--fontweight-bold);
  font-size: var(--fontsize-md);
  line-height: 1.6;
}

#main-nav li.active {
  font-style: italic;
}

#main-nav li a:hover {
  color: var(--respe-orange);
}

@media (min-width: 992px) {
  header {
    align-items: flex-end;
    padding-right: calc(var(--body-padding-inline) + 10px);
    padding-bottom: calc(var(--body-padding-block) + 10px);
  }

  #main-nav {
    display: block;
    position: revert;
    inset: revert;
    background-color: revert;
  }

  #main-nav ul.hidden-mobile {
    display: flex;
    gap: 25px;
  }

  #main-nav li a:hover {
    color: var(--respe-dark-orange);
  }
}

input#toggle-main-nav:checked + label#open-nav::before {
  content: 'fermer\00a0';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  color: var(--color-white);
  transform: translate(-100%, -50%);
}

input#toggle-main-nav:checked + label#open-nav > .lucide-x {
  display: revert;
}

input#toggle-main-nav:checked + label#open-nav > .lucide-menu {
  display: none;
}

input#toggle-main-nav:checked ~ #main-nav {
  display: block;
  color: var(--color-white);
}

header .respe-logo {
  color: var(--respe-blue);
}

/* #endregion HEADER */
/* ---------- */
/* #region MAIN */
main {
  --padding-addition: 15px;
  --padding-top: calc(var(--body-padding-block) + var(--header-height) + var(--padding-addition));
  --padding-bottom: calc(var(--aside-height) + 15px);

  flex: 1;
  min-height: calc(100vh - var(--padding-top));
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
}

@media (min-width: 992px) {
  main {
    padding-left: calc(var(--aside-height) + 15px);
    padding-bottom: var(--body-padding-block);
  }
}

main section:first-of-type {
  padding-top: 0;
}

main h1 {
  margin-top: 0;
  text-align: center;
}

main .hero-image {
  max-width: 100%;
  margin-top: calc(var(--padding-addition) * -1);
  margin-bottom: 10px;
}

/* #endregion MAIN */
/* ---------- */
/* #region STATIC PAGE */
.static-page .highlight-block h3 {
  color: inherit;
}

.static-page .highlight-block h3:first-of-type {
  margin-top: 0;
}

/* #endregion STATIC PAGE */
/* ---------- */
/* #region HOME */
.home p {
  text-align: center;
}

.photo-action {
  display: grid;
  grid-template-areas:
    "title title"
    "add-file take-picture"
    "photos-infos photos-infos";
  grid-template-columns: repeat(2, max-content);
  row-gap: 20px;
  column-gap: 14%;
  justify-content: center;
}

@media (min-width: 992px) {
  .photo-action {
    margin-bottom: 5rem;
  }
}

.photo-action h2 {
  grid-area: title;
  justify-self: center;
  margin-block: 0 0.2em;
  font-size: var(--fontsize-md);
}

.photo-action label {
  display: block;
  width: min-content;
  margin-inline: auto;
  text-align: center;
}

.photo-action label:hover svg {
  transform: var(--scale-hover);
  box-shadow: var(--box-shadow-2);
}

.photos-action label.add-file {
  grid-area: add-file;
}

.photo-action label.take-picture {
  grid-area: take-picture;
}

.photo-action label svg {
  padding: 15px;
  stroke-width: 1;
  background-color: var(--respe-blue);
  color: var(--color-white);
  border-radius: var(--round-corner-medium);
  box-shadow: var(--box-shadow-1);
}

.photo-action label svg.upload-file {
  --main-color: var(--respe-green);
  --bg-color: var(--color-white);

  border: 4px solid var(--main-color);
}

.photo-action label svg.camera-icon {
  --main-color: var(--color-white);
  --bg-color: var(--respe-green);
}

.photo-action .photos-infos {
  grid-area: photos-infos;
  justify-self: center;
  font-size: var(--fontsize-sm);
  font-style: italic;
}

/* #endregion HOME */
/* ---------- */
/* #region ASIDE */
/* global aside style */
aside {
  position: fixed;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: var(--aside-height);
  padding-top: 5px;
  background-color: var(--respe-blue);
  color: var(--color-white);
  text-align: center;
  font-size: var(--fontsize-sm);
}

aside nav ul {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-areas: "howto identify respe-logo";
  align-items: center;
}

aside label span,
aside a span {
  display: block;
}

aside .mode-emploi-link {
  grid-area: howto;
  max-width: 80px;
  margin-inline: auto;
}

aside .mode-emploi-link a {
  display: block;
  width: 100%;
  height: min-content;
}

aside .respe-logo {
  grid-area: respe-logo;
  justify-self: end;
  margin-right: calc(var(--body-padding-inline) + 5px);
}

aside .identify-icon,
aside .lucide-circle-help {
  width: 100%;
  margin-bottom: -2px;
}

aside .lucide-circle-help circle {
  stroke-width: 0;
}

aside .identify-nav {
  grid-area: identify;
  position: relative;
  padding-inline: 10px;
  padding-block: 5px;
  background-color: var(--respe-green);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  outline: 13px solid var(--respe-green);
}

aside .identify-nav label:hover {
  color:var(--respe-blue);
}

aside .identify-nav label#close-photo-nav {
  display: none;
  position: relative;
  z-index: 2;
}

aside .identify-nav label#close-photo-nav:hover svg {
  background-color: var(--respe-orange);
}

label#close-photo-nav svg {
  padding: 3px;
  background-color: var(--color-white);
  stroke: var(--respe-blue);
  border-radius: 50%;
}

#toggle-photo-nav:focus-visible ~ label#close-photo-nav {
  outline: 2px auto Highlight;
}

aside .lucide-search {
  margin-bottom: 0.4em;
}

aside ul.photo-upload {
  display: none;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 100%;
  grid-template-areas:
    "savedIdentification"
    "loadImage"
    "takePicture"
  ;
  justify-items: center;
  align-items: center;
  padding-block: calc(var(--body-padding-block) + var(--header-height));
  background-color: var(--respe-blue);
  font-size: var(--fontsize-sm);
  z-index: 1;
}

aside ul.photo-upload .saved-ident {
  grid-area: savedIdentification;
}

aside ul.photo-upload .load-image {
  grid-area: loadImage;
}

aside ul.photo-upload .take-picture {
  grid-area: takePicture;
}

aside ul.photo-upload label svg.upload-file,
aside ul.photo-upload label svg.camera-icon {
  --main-color: currentColor;
  --bg-color: transparent;
}

aside #toggle-photo-nav:checked ~ label#open-photo-nav {
  display: none;
}

aside #toggle-photo-nav:checked ~ label#close-photo-nav {
  display: block;
}

aside #toggle-photo-nav:checked ~ ul.photo-upload {
  display: grid;
}

aside #toggle-photo-nav:checked ~ ul.photo-upload label:hover,
aside #toggle-photo-nav:checked ~ ul.photo-upload .saved-ident a:hover {
  color: var(--respe-orange);
}

aside ul.photo-upload .saved-ident img {
  width: 90px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 2px solid transparent;
}

aside ul.photo-upload .saved-ident a:hover img {
  border-color: var(--respe-orange);
}

#toggle-photo-nav:focus-visible ~ label#close-photo-nav {
  outline: 2px auto Highlight;
}

@media (min-width: 601px) {
  aside ul.photo-upload {
    grid-template-rows: 100%;
    grid-template-columns: repeat(3, 120px);
    grid-template-areas: "takePicture loadImage savedIdentification";
    justify-content: center;
    gap: 10%;
  }
}

@media (min-width: 992px) {
  aside:not(.action-btn) {
    left:0;
    width: calc(var(--aside-height) + 15px);
    height: 100%;
    padding-top: calc(var(--body-padding-block) + var(--header-height) + 36px);
  }

  aside nav ul {
    grid-template-columns: auto;
    grid-template-areas:
    "identify"
     "howto"
     ".";
    gap: 25px;
  }

  aside .identify-nav {
    padding-block: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  label#close-photo-nav {
    width: 45px;
    aspect-ratio: 1/1;
    transform: translate(12%, 10%);
  }
}

/* specific action-btn aside style */
aside.action-btn {
  height: auto;
}

.action-btn {
  z-index: 0;
  display: flex;
  align-items: stretch;
  flex-direction: row-reverse;
  padding-top: 0;
  background: none;
}

.action-btn > * {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
  width: 34%;
  background-color: var(--respe-blue);
  font-size: var(--fontsize-reg);
}

.action-btn > *:not(.identify-nav),
.action-btn #open-photo-nav {
  padding: 1em 0;
}

.action-btn > *:not(:first-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 80%;
  background-color: var(--color-white);
  transform: translateY(-50%);
}

.action-btn button {
  padding-inline: 0;
  background-color: var(--respe-green);
  font-weight: var(--fontweight-bold);
  border-radius: 0;
}

.action-btn button:hover {
  /* background-color: #aa5229; */
  background-color: #1f9355;
  text-decoration: underline;
  box-shadow: none;
}

.action-btn button:disabled {
  background-color: var(--color-primary);
}

.action-btn button:disabled:hover {
  text-decoration: none;
}

.action-btn .identify-nav {
  align-items: stretch;
  padding: 0;
  background-color: var(--respe-blue);
  outline: none;
}

.action-btn .identify-nav:hover {
  background-color: #183e4d;
  cursor: pointer;
}

.action-btn .identify-nav:hover > label {
  color: var(--respe-orange);
}

.action-btn .identify-nav li {
  margin-left: 0;
  list-style: none;
}

.action-btn #open-photo-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
  width: 100%;
  height: 100%;
  padding-inline: 0.3em;
}

.action-btn #toggle-photo-nav:disabled ~ #open-photo-nav,
.action-btn #toggle-photo-nav:disabled ~ #open-photo-nav:hover {
  color: var(--color-primary-dark)
}

.action-btn #toggle-photo-nav:disabled ~ #open-photo-nav {
  background-color: var(--color-primary);
  cursor: not-allowed;
}

.action-btn > a:hover {
  background-color: #183e4d;
  color: var(--respe-orange);
}

@media (min-width: 601px) {
  .action-btn ul.photo-upload {
    grid-template-columns: repeat(2, 120px);
    grid-template-areas: "takePicture loadImage";
  }
}

@media (min-width: 625px) {
  .action-btn > *,
  .action-btn #open-photo-nav {
    justify-content: center;
    flex-direction: row;
  }
}

@media (min-width: 992px) {
  .action-btn {
    justify-content: center;
    border: none;
  }

  .action-btn > * {
    width: 250px;
  }

  .action-btn > *:first-child {
    border-top-right-radius: var(--round-corner-medium);
  }

  .action-btn > *:last-child {
    border-top-left-radius: var(--round-corner-medium);
  }
}

/* #endregion ASIDE */
/* ---------- */
/* #region SUBMIT */
.submit-photo-form {
  position: relative; /* pour éviter l'overflow du sr-only */
}
.submit-photo-form h2 {
  margin-block: 0.3em;
}

.submit-photo-form #pictures-thumbnail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-inline: auto;
  margin-top: 1rem;
}

.submit-photo-form .picture-thumbnail-block {
  padding: 0;
  margin: 0;
}

.submit-photo-form .picture-thumbnail-block .thumbnail-detail {
  position: relative;
}

.submit-photo-form .picture-thumbnail-block .picture-thumbnail {
  height: 100px;
  margin: 0;
  padding: 0;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.submit-photo-form .picture-thumbnail-block .picture-organ {
  position: absolute;
  bottom: 3%;
  left: 3%;
}

.submit-photo-form .picture-thumbnail-block .picture-organ svg {
  fill: black;
  stroke: white;
}

.submit-photo-form .picture-container {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-inline: auto;
}

.submit-photo-form .picture-container img {
  border-radius: var(--round-corner-medium);
}

.submit-photo-form .picture-preview {
  display: block;
  max-width: 80%;
  max-height: 350px;
  margin-inline: auto;
  padding-block: 0;
  object-fit: contain;
  border: 1px solid var(--color-primary-dark);
}

@media (min-width: 992px) {
  .submit-photo-form .picture-preview-block:nth-of-type(5) {
    margin-bottom: 80px;
  }
}

.submit-photo-form .delete-picture-btn {
  --padding-top: 0.15em;
  --padding-bottom: calc(var(--padding-top) * 0.417);
  --padding-inline: calc(var(--padding-top) * 1.067);

  position: absolute;
  right: 0;
  top: 5px;
  padding: var(--padding-top) var(--padding-inline) var(--padding-bottom);
  border-radius: 50%;
  font-size: var(--fontsize-sm);
  background-color: #7e0303;
}

.submit-photo-form .delete-picture-btn svg {
  transform: translateY(5%);
}

.submit-photo-form .plant-organ legend {
  font-size: var(--fontsize-sm);
  text-align: center;
}

.submit-photo-form .plant-organ .input-grid {
  display: grid;
  grid-template-areas:
  "flower fruit"
  "leaf dont-know";
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

.submit-photo-form .plant-organ .input-block label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-block: 0.6em;
  background-color: var(--color-white);
  border: 2px solid var(--respe-blue);
  border-radius: var(--round-corner-light);
}

.submit-photo-form .plant-organ .input-block:hover label {
  cursor: pointer;
  background-color: var(--respe-blue);
  color: var(--color-white);
}

.submit-photo-form .plant-organ .input-block.leaf {
  grid-area: leaf;
}

.submit-photo-form .plant-organ .input-block.flower {
  grid-area: flower;
}

.submit-photo-form .plant-organ .input-block.fruit {
  grid-area: fruit;
}

.submit-photo-form .plant-organ .input-block.auto {
  grid-area: dont-know;
}

.submit-photo-form .plant-organ input[type="radio"]:checked + label {
  background-color: var(--respe-blue);
  color: var(--color-white);
}

.submit-info {
  margin-block: 0 0.3em;
  padding: 0.4em 0.5em 0.6em;
  background-color: var(--respe-dark-orange);
  color: var(--color-white);
  font-size: var(--fontsize-reg);
  font-style: italic;
  text-align: center;
  z-index: 1;
}

@media screen and (max-width: 400px) {
  .submit-photo-form .plant-organ .input-grid {
    grid-template-areas:
    "flower"
    "fruit"
    "leaf"
    "dont-know";
    grid-template-columns: 1fr;
  }
}

/* #endregion SUBMIT */
/* #region RESULTS */
h1.result-title {
  font-size: var(--fontsize-lg);
}

.results > section {
  margin-block: 1.5em;
}

.results li {
  margin-left: 0.8em;
  margin-bottom: 0.4em;
}

.results h2:not(.common-name) {
  margin-bottom: 0.5em;
  font-size: var(--fontsize-md);
  text-align: center;
}

.results h3 {
  margin-block: 0.5em 0.2em;
  font-size: var(--fontsize-reg);
  font-weight: normal;
}

.results .plant-id {
  margin-top: 0;
  border-top: none;
  text-align: center;
}

.results .common-name {
  margin-block: 0;
  font-size: var(--fontsize-xl);
}

.results .scientific-name {
  margin-top: 0.2em;
  margin-bottom: 0.4em;
  font-style: italic;
  font-weight:normal;
}

.results .score-block {
  display: flex;
  justify-content: center;
  gap: 0.6em;
}

.results .score {
  font-size: var(--fontsize-sm);
  font-style: italic;
}

.toxicity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.toxicity-info {
  --block-spacing: 1.4rem;

  max-width: 960px;
  margin-block: var(--block-spacing) 0;
  margin-inline: auto;
  padding-block: var(--block-spacing);
  padding-inline: var(--block-spacing);
  color: var(--color-white);
}

.toxicity-info.by-level.low {
  background-color: var(--respe-alert-low);
}

.toxicity-info.by-level.medium {
  background-color: var(--respe-alert-medium);
}

.toxicity-info.by-level.high {
  background-color: var(--respe-alert-high);
}

.toxicity-info.not-validated {
  background-color: var(--respe-alert-not-validated);
}

.toxicity-info.unknown h2.toxicity-title,
.toxicity-info.not-validated h2.toxicity-title,
.toxicity-info.by-level h2.toxicity-title {
  margin-block: 0;
  font-size: var(--fontsize-lg);
  color: var(--color-white);
}

.toxicity-info h2.toxicity-title span {
  font-weight: normal;
}

.toxicity-info.by-level.low h2.toxicity-title {
  color: var(--color-black);
}

.toxicity-detail {
  margin-block: var(--block-spacing) 0;
  padding: 0.6em;
  background-color: rgba(255,255,255,0.8);
  color: var(--color-black);
}

.toxicity-info.unknown {
  margin-bottom: var(--block-spacing);
  background-color: var(--color-primary);
}

.toxicity-dialog {
  padding-top: 1.5em;
  background-color: var(--respe-blue);
  color: var(--color-white);
}

.toxicity-dialog ul {
  text-align: left;
}

.toxicity-dialog li span {
  font-weight: var(--fontweight-bold);
  text-decoration: underline;
}

.results .health-info {
  border-top: none;
}

.results .highlight-block {
  --block-spacing: 1.4rem;
  background-color: var(--color-primary-dark);
}

.results .highlight-block h2 {
  margin-top: 0;
  color: inherit;
}

.results .photos {
  text-align: center;
}

.results .photos-blocks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.8rem;
  text-align: center;
}

#db-pictures figure,
.results .photos-blocks img {
  flex-grow: 1;
  min-width: calc(25% - var(--gap));
  height: 194px;
  border-radius: var(--round-corner-medium);
  /* aspect-ratio: 1/1; */
  object-fit: cover;
}

#db-pictures figure,
#user-pictures,
#db-pictures {
  --gap: 1rem;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap);
}

#db-pictures figure {
  position: relative;
  /* display: flex; */
}

#db-pictures figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: var(--fontsize-sm);
}

/* #user-pictures img {
  flex-grow: 1;
  min-width: calc(25% - var(--gap));
  height: 200px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.results .results-images img {
  display: block;
  max-width: 80%;
  margin-inline: auto;
} */

#user-pictures img {
  border: 3px solid var(--respe-dark-orange);
}

.results-images span {
  text-decoration: underline;
}

.results .results-images img {
  border: 3px solid var(--respe-green);
}

@media (min-width: 992px) {
  .results .photos-blocks {
    flex-direction: row;
  }

  .results .photos-blocks > div {
    width: 45%;
  }
}

/*  #endregion RESULTS */
/*  */
/* #region OFFLINE-SUBMIT */
.aside-menu-indicator {
  --aside-offset: 10px;

  position: absolute;
  bottom: calc(var(--aside-height) + 10px);
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translateX(-50%);
}

.aside-menu-indicator svg {
  --bounce-height: var(--aside-offset);

  position: relative;
  stroke: var(--respe-dark-orange);
  animation-name: bounceDown;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
  animation-direction: normal;
}

@keyframes bounceDown {
  0% {
    top: 0px;
  }
  10% {
    top: var(--bounce-height);
  }
  20% {
    top: 0px;
  }
  30% {
    top: var(--bounce-height);
  }
  40% {
    top: 0px;
  }
  50% {
    top: var(--bounce-height);
  }
  60% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}
/*  #endregion OFFLINE-SUBMIT */
/*  */
/* #region FOOTER */
footer {
  margin-inline: auto;
  margin-block: 0.8em;
  font-size: var(--fontsize-sm);
  font-style: italic;
  text-align: center;
}

.photo-submit-page ~ footer {
  display: none;
}

footer span {
  text-decoration: underline;
}

footer ul {
  display: flex;
  justify-content: center;
  gap: 0.8em;
}

footer li:not(:first-of-type) {
  padding-left: 0.4em;
  border-left: 1px solid var(--respe-blue);
}

@media (min-width: 992px) {
  footer {
    padding-left: calc(var(--aside-height) + 15px);
  }
}

/* #endregion FOOTER */