/*@media screen and (max-width: 760px) {
    :root {
      --tiny-text-height: 8px;
      --normal-text-height: 14px;
      --big-text-height: 20px;
      --huge-text-height: 24px;
      --shadow: 4px;
      --input-width: 20vw;
    }
}

@media screen and (min-width: 760px) and (max-width: 1280px) {
    :root {
      --tiny-text-height: 12px;
      --normal-text-height: 20px;
      --big-text-height: 26px;
      --huge-text-height: 31px;
      --shadow: 5px;
      --input-width: 152px;
    }
}

@media screen and (min-width: 1280px) {
    :root {
      --tiny-text-height: 16px;
      --normal-text-height: 24px;
      --big-text-height: 30px;
      --huge-text-height: 36px;
      --shadow: 6px;
      --input-width: 152px;
    }
}*/

@media screen and (max-width: 760px) {
    :root {
      --tiny-text-height: 7px;
      --small-text-height: 10px;
      --normal-text-height: 13px;
      --big-text-height: 18px;
      --huge-text-height: 22px;
      --shadow: 4px;
      --input-width: 20vw;
      --flex-menu-min-width: 250px; 
    }
}

@media screen and (min-width: 760px) and (max-width: 1280px) {
    :root {
      --tiny-text-height: 9px;
      --small-text-height: 13px;
      --normal-text-height: 17px;
      --big-text-height: 21px;
      --huge-text-height: 26px;
      --shadow: 5px;
      --input-width: 152px;
      --flex-menu-min-width: 300px; 
    }
}

@media screen and (min-width: 1280px) {
    :root {
      --tiny-text-height: 11px;
      --small-text-height: 15px;
      --normal-text-height: 18px;
      --big-text-height: 24px;
      --huge-text-height: 29px;
      --shadow: 5px;
      --input-width: 152px;
      --flex-menu-min-width: 300px; 
    }
}

body {
    background-color: #002c5b;
    background-image: url("background.jpg");
    background-repeat: repeat;
    background-position: center top;
    margin: 0;
}

header {
    display: flex;
    flex-direction: column;
}

#content {
  flex: 1;
}

input, select, button, textarea, .details_container {
    background-color: rgba(0, 23, 55, 0.5);
    border-color: #01002b; /* #5983b0;*/
    border-width: 3px;
    border-radius: calc(var(--shadow)/2);
}

#year_selector {
    max-width: 4.5em;
}

#month_selector, #day_selector, #hour_selector, #minute_selector, #second_selector {
    max-width: 3em;
}

#manual_tz_zone {
    max-width: 4em;
}

.details_container {
    border: solid #01002b;
    border-width: 3px;
    border-radius: calc(var(--shadow)/2);
    padding-left: calc(var(--big-text-height)/2);
    padding-right: calc(var(--big-text-height)/2);
}

.details_container hr {
    border: solid black 1px;
}

.details_container ul {
    padding-left: var(--big-text-height);
}

.details_container li + li {
    margin-top: calc(var(--tiny-text-height)/2);
}

option {
    background-color: rgb(0, 22, 54);
}

h1, h2, h3, p, p a, li, table, tr, th, label, input, textarea, select, button, details, fieldset, legend {
    color: #fff7cc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: var(--normal-text-height);
    text-shadow: var(--shadow) var(--shadow) var(--shadow) #001;
}

button, details {
    padding: 4px;
}

header p {
    text-align: right;
    font-size: var(--tiny-text-height);
}

footer {
    margin-top: 2vw;
    text-align: center;
}

header a, footer a {
    text-decoration: none;
}

header, section, footer {
    width: 80vw;
    margin-right: auto;
    margin-left: auto;
}

h1 {
    font-size: var(--huge-text-height);
}

h2 {
    font-size: var(--big-text-height);
}

p a:hover {
    color: #ffaa44;
}

section {
    clear: both;
}

section p {
    text-align: justify;
    font-size: var(--normal-text-height);
}

#location {
    margin-top: 3vw;
    margin-bottom: 3vw;
    margin-left : auto;
    margin-right: auto;
}

input, select {
    text-align: right;
}

input {
    width: var(--input-width);
}

.radio {
    max-width: calc(var(--shadow)*3);
}

.headtitle {
    float: left;
    width: 65vw;
}

#hour_display_1 {
    margin-top: 0vw;
    margin-bottom: 0vw;
    text-align: center;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 16vw;
    will-change: contents;
}

#hour_display_2 {
    margin-top: 0vw;
    margin-bottom: 0vw;
    text-align: center;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 13vw;
    will-change: contents;
}

.gray {
    color: #BBB;
}

#second_display, #menu_second_display, #menu_fixed_date {
    /*display: none;*/
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
}

#second_display {
    transition: max-height 0.8s ease, opacity 0.8s ease;
}

#menu_second_display, #menu_fixed_date {
    transition: max-height 0.1s ease, opacity 0.1s ease;
}

#second_display.active {
    opacity: 1;
    max-height: 30vw;
    visibility: visible;
}

#menu_second_display.active {
    opacity: 1;
    max-height: 12vw;
    visibility: visible;
}

#menu_fixed_date.active {
    opacity: 1;
    max-height: 50vw;
    visibility: visible;
}

.tip {
    font-size: var(--normal-text-height);
}

.inline {
    display: inline-block;
}

#map {
    width:80vw;
    height:45vw;
}

#mapcontainer {
    width:80vw;
    height:45vw;
    margin-left : auto;
    margin-right: auto;
}

.textcentered {
    text-align: center;
}

#mentions {
    font-size: var(--tiny-text-height);
}

span.miror {
    unicode-bidi: bidi-override;
    direction: rtl
}

table {
    margin-left: auto;
    margin-right: auto;
}

table th, table td {
    text-align: center;
}

table, th, td {
  padding: 5px;
  border: 1px solid #b9b393;
  border-collapse: collapse;
}

.ephem_day {
    background-color: rgba(0, 23, 55, 0.5);
}

.noborders, .noborders th, .noborders td {
  padding: 0px 5px;
  border: 0px;
  border-collapse: collapse;
}

fieldset {
    border: 1px solid #b9b393;
}

.form-container {
  display: flex;           /* Active Flexbox */
  gap: 16px;              /* Espace entre les fieldset */
  flex-wrap: wrap;        /* Passe à la ligne si manque d'espace */
}

.form-fieldset {
  flex: 1;                /* Partage l'espace équitablement */
  min-width: var(--flex-menu-min-width);       /* Largeur minimale avant retour à la ligne */
}

/*--------------------------------------------------------*/
/*                                                        */
/*                  Charts                                */
/*                                                        */
/*--------------------------------------------------------*/

.graph_title, .legend_title {
    display: block;
    font-weight: bold;
    text-align: center;
    font-size: 0.75em;
    margin:  auto;
    color: #fff7cc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.note {
    font-size: 1em;
}
.chart_container {
    background-color: rgb(216, 216, 216);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}

/*--------------------------------------------------------*/
/*                                                        */
/*                  Form                                  */
/*                                                        */
/*--------------------------------------------------------*/

#contact {
    margin: 0 auto;
    width: 80vw;
    padding: 1.5vw;
    border: 1px solid #5983b0;
    border-radius: 1.5vw;
}

#contact div {
    margin-left: 4.5vw;
}

#contact div + div {
    margin-top: 1em;
}

#contact input, #contact textarea {
    text-align: left;
}

textarea {
    width: 70vw;
    height: 10vw;
}

#captcha {
    width: 70vw;
}

.error {
    background-color: #C55;
    width: 70vw;
}

/*--------------------------------------------------------*/
/*                                                        */
/*                  Frame                                 */
/*                                                        */
/*--------------------------------------------------------*/

.frame {
    position: fixed;
    z-index : 10000;
    border-radius: var(--shadow);
    top: 5vh;
    left: 5vw;
    height: 84vh;
    width: 84vw;
    padding: 3vh 3vw;
    background-color: #dde;
    color: #111;
    opacity: 0.97;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: var(--normal-text-height);
    overflow: auto;
}

.frame h1, .frame h2, .frame h3, .frame p, .frame p a, .frame li, .frame input, .frame textarea, .frame button, .frame label {
    text-shadow: calc(var(--shadow)/4) calc(var(--shadow)/4) calc(var(--shadow)/2) #779;
    color: #111;
}
.frame h1, .frame h2, .frame h3 {
    font-weight: bold;
}

.frame input, .frame select, .frame button, .frame textarea {
    background-color: #bbc;
    border-color: #5983b0;
    border-radius: calc(var(--shadow)/2);
}

.frame input {
    width: 70vw;
}

.frame p a:hover {
    color: #25c;
}

#desc-label ~ form button {
    text-shadow: 0 0 0 black;
}

.centering_container {
    width: auto;
    display: flex;
    justify-content: center;
}

.centered_content {
    width: 300px;
}

#about, #contact_, #support, #icon {
    display: none;
}

.close {
  position: fixed;
  right: 6.5vw;/*32px;*/
  top: 8vh;/*32px;*/
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #222;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

/*--------------------------------------------------------*/
/*                                                        */
/*                  Toogle switch                         */
/*                                                        */
/*--------------------------------------------------------*/

/* Conteneur principal */
.toggle-switch {
    display: inline-block;
    align-items: center;
    gap: calc(var(--big-text-height)/4); /* Espace entre le texte et le toggle */
    cursor: pointer;
  }
  
  /* Input checkbox caché */
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Slider (toggle switch) */
  .toggle-switch .slider {
    position: relative;
    display: inline-block;
    width: calc(var(--big-text-height)*2);
    height: var(--big-text-height);
    background-color: #aaa;
    border-radius: var(--big-text-height);
    transition: 0.4s;
  }
  
  /* Bouton rond */
  .toggle-switch .slider:before {
    content: "";
    position: absolute;
    height: calc(var(--big-text-height)*3/4);
    width: calc(var(--big-text-height)*3/4);
    left: calc(var(--big-text-height)/8);
    bottom: calc(var(--big-text-height)/8);
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
  }
  
  /* Quand l'input est coché */
  .toggle-switch input:checked + .slider {
    background-color: #4caf50;
  }
  
  /* Déplacement du bouton rond */
  .toggle-switch input:checked + .slider:before {
    transform: translateX(var(--big-text-height));
  }

/*--------------------------------------------------------*/
/*                                                        */
/*                  Summary animation                     */
/*                                                        */
/*--------------------------------------------------------*/
/*
TODO : tweak this thing
https://css-tricks.com/how-to-animate-the-details-element/
*/

/* Contenu des détails avec animation */
details .content {
    max-height: 0px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

/* Lorsque <details> est ouvert */
details[open] .content {
    visibility: visible;
    opacity: 1;
    max-height: 1700px; /* Une valeur grande mais raisonnable */
}


/*--------------------------------------------------------*/
/*                                                        */
/*                  Paypal buttons                        */
/*                                                        */
/*--------------------------------------------------------*/