@charset "UTF-8";

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

a {
  background: transparent;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: flex;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
  outline: none;
}

* {
  box-sizing: border-box;
}

*::before,
*::after {
  margin: 0;
}

ul {
  list-style: none;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
    url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
    url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'),
    url('../fonts/open-sans-v40-latin-600.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v40-latin-600italic.woff2') format('woff2'),
    url('../fonts/open-sans-v40-latin-600italic.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
    url('../fonts/open-sans-v40-latin-700.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2'),
    url('../fonts/open-sans-v40-latin-700italic.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/work-sans-v19-latin-regular.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/work-sans-v19-latin-italic.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-italic.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/work-sans-v19-latin-500.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-500.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/work-sans-v19-latin-500italic.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-500italic.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/work-sans-v19-latin-600.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-600.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/work-sans-v19-latin-600italic.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-600italic.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/work-sans-v19-latin-700.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-700.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/work-sans-v19-latin-700italic.woff2') format('woff2'),
    url('../fonts/work-sans-v19-latin-700italic.woff') format('woff');
  font-display: swap;
}

/* root */
:root {
  --hue: 220;
  --sat: 42%;

  /* -- footer buttons-- */
  --color20: hsl(var(--hue), var(--sat), 20%);
  --color25: hsl(var(--hue), var(--sat), 25%);
  /* -- end of footer buttons-- */

  --color30: hsl(var(--hue), var(--sat), 30%);
  --color35: hsl(var(--hue), var(--sat), 35%);
  --color40: hsl(var(--hue), var(--sat), 40%);
  --color45: hsl(var(--hue), var(--sat), 45%);
  --color50: hsl(var(--hue), var(--sat), 50%);
  --color55: hsl(var(--hue), var(--sat), 55%);
  --color60: hsl(var(--hue), var(--sat), 60%);
  --color85: hsl(var(--hue), var(--sat), 85%);

  --boxDate: hsl(var(--hue), 36%, 48%);

  --focus: #64FFDA;

  --fushia: hsl(340, 70%, 50%);
  /* #current */
  --blue: hsl(210, 60%, 45%);
  /* #sky */
  --green: hsl(160, 70%, 30%);
  /* #culture */
  --orange: hsl(10, 70%, 48%);
  /* #science */
  --purple: hsl(290, 35%, 50%);
  /* #astro */

  --blueLink: hsl(210, 85%, 40%);
  --blueFooterTxt: hsl(220, 90%, 82%);
  --blueBorder: hsl(var(--hue), 36%, 55%);

  --border-radius: 12px;

  --greyBorder: hsl(0, 0%, 75%);

  --easing: cubic-bezier(.65, 0, .35, 1);
  /* --shadow: 0 2px 5px 0 hsla(0,0%,0%,.16),0 2px 10px 0 hsla(0,0%,0%,.12); */

  --menu-scrollbar-track: hsl(var(--hue), var(--sat), 18%);
  --menu-scrollbar-thumb: hsl(var(--hue), var(--sat), 48%);

  --lightbox-scrollbar-track: hsl(0, 0%, 18%);
  --lightbox-scrollbar-thumb: hsl(0, 0%, 48%);

}

/* shadow */
/* header, .menu-container {
  box-shadow: var(--shadow);
} */

/* for load and resize */
header.no-transition,
.menu-container.no-transition,
.section-title.no-transition,
.section-title.no-transition::after,
#cache.no-transition {
  transition: none;
}

html {
  font-size: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

body.hide-scrollbar {
  overflow: hidden;
  width: auto;
}

#burger svg:last-child,
#burger .summary,
.top-btn-container,
.issue,
#sky .chapeau br {
  display: none;
}

#cache {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120%;
  background-color: hsla(var(--hue), var(--sat), 15%, .5);
  z-index: 1;
  transition: opacity .4s var(--easing), visibility .4s var(--easing);
}

#cache.show {
  visibility: visible;
  opacity: 1;
}

/* ---------- formatage texte et image ---------- */
.link,
.text a:not(.lightbox):not(.lightbox-hidden),
.edito a {
  color: var(--blueLink);
  position: relative;
  text-decoration: underline;
}

.text :not(.chapeau) a:not(.lightbox):not(.lightbox-hidden) {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.bold,
.text .scaps.bold {
  font-weight: 700;
}

.inner-section .topZero {
  margin-top: 0;
}

sup,
sub {
  font-size: 70%;
  line-height: 0;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

.nowrap {
  white-space: nowrap;
}

small {
  font-size: inherit;
}

span.scaps,
small {
  display: inline;
  font-variant-caps: all-small-caps;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

  .scaps,
  small {
    font-size: 1.125em;
  }
}

@-moz-document url-prefix() {

  .scaps,
  small {
    font-size: .9375em;
  }
}

.text .scaps {
  font-weight: 500;
}

.chapeau .scaps,
h4 .scaps,
.encadre .scaps,
.figcaption-title .scaps,
small {
  font-weight: 700;
}

.underlined {
  text-decoration: underline;
}

.no-color {
  color: hsl(0, 0%, 10%) !important;
}

.cancel-float {
  clear: both;
}

img,
video {
  display: block;
  width: 100%;
}

.border {
  border: 1px solid var(--greyBorder);
}

figure {
  display: inline-flex;
  flex-direction: column;
}

figure:not(.img-planet):not(.lightbox-container figure) img {
  max-height: var(--pageHeight);
  width: auto;
  margin: 0 auto;
  max-width: 100%;
}

.flex {
  display: flex;
  gap: 1rem;
}

.increaseSize {
  font-size: 1.125em;
}

.ital {
  font-style: italic;
}

.afterLined {
  position: relative;
  padding-bottom: .75em;
  margin-bottom: .75em;
}

.afterLined::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 2.5em;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
  border-radius: var(--border-radius);
}


/* ---------- header ---------- */
header {
  display: flex;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: hsl(var(--hue), var(--sat), 32%);
}

.progression-bar-container {
  display: none;
}

.heading {
  display: flex;
  width: 100%;
  height: 2.5rem;
  justify-content: space-between;
  align-items: center;
  padding-left: 1rem;
  user-select: none;
}

.heading-logo {
  height: 1.625rem;
  width: auto;
}

.heading-shortcuts {
  display: none;
}

#burger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  margin: 0;
  border: none;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

#burger svg {
  width: 1.25rem;
  height: 1.25rem;
}

#burger svg.small-burger {
  display: none;
}

#burger .span2,
#burger .span2b {
  transform-origin: center;
}

#burger .span1,
#burger .span2,
#burger .span2b,
#burger .span3 {
  transition: transform .2s ease;
}

#burger .span2.active {
  transform: rotate(45deg);
}

#burger .span2b.active {
  transform: rotate(-45deg);
}

#burger .span1.active {
  transform: translate3d(0, 1rem, 0);
}

#burger .span3.active {
  transform: translate3d(0, -1rem, 0);
}

#burger .span1.hide,
#burger .span3.hide {
  opacity: 0;
}

.menu-container {
  visibility: hidden;
  position: fixed;
  top: 2.5rem;
  right: 0;
  width: 18rem;
  height: calc(100vh - 2.5rem);
  background-color: hsl(var(--hue), var(--sat), 28%);
  overflow-y: auto;
  transform: translate3d(100%, 0, 0);
  transition: transform .4s var(--easing);
  z-index: 1;
  scrollbar-color: var(--menu-scrollbar-thumb) var(--menu-scrollbar-track);
}

.menu-container.visible {
  visibility: visible;
}

.menu-container.translate {
  transform: translate3d(0, 0, 0);
}

.month {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.1;
  padding: 1rem 1.5rem;
  background-color: hsl(var(--hue), var(--sat), 38%);
  color: #fff;
}

.month span {
  display: block;
  font-weight: 400;
  font-size: 1.125rem;
  color: hsl(220, 85%, 85%);
}

.menu {
  display: flex;
  flex-direction: column;
  font-size: .875rem;
}

.section-title {
  display: flex;
  height: 2.5rem;
  align-items: center;
  font-size: .875rem;
  color: hsl(220, 90%, 84%);
  font-weight: 600;
  padding: 0 .8375rem;
  background-color: hsl(var(--hue), var(--sat), 34%);
  text-transform: uppercase;
}

.section-title.active {
  color: #fff;
  background: linear-gradient(to right, var(--focus) .1875rem, hsl(var(--hue), var(--sat), 44%) .1875rem);
}

.section-title svg {
  width: 1.5rem;
  margin-right: .4375rem;
  fill: hsl(220, 90%, 84%);
  transition: fill .2s linear;
}

.section-title[href="#current"] {
  padding-left: .8375rem;
}

.section-title[href="#current"] svg {
  padding-bottom: .125rem;
}

.section-title[href="#culture"] {
  padding-left: .75rem;
}

.section-title[href="#culture"] svg {
  margin-right: .5rem;
}

.section-title[href="#science"] svg {
  margin-right: .3125rem;
}

.section-title[href="#sky"] svg {
  margin-right: .375rem;
}

.section-title.active svg {
  fill: var(--focus);
}


.section-items-container {
  display: grid;
  grid-gap: .875rem;
  grid-auto-flow: row;
  padding: 1rem 1.25rem 2rem 1.5rem;
}

.section-items-container a {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1.25rem;
}

.section-items-container a::before {
  position: absolute;
  left: 0;
  top: .4375rem;
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: hsl(220, 50%, 65%);
  transition: background-color .2s linear;
}

.section-items-container p {
  color: #fff;
  line-height: 1.35;
}

.section-title {
  transition: color .2s linear;
}

.section-items-container a.active::before {
  background-color: var(--focus);
}

.section-items-container br.big {
  display: none;
}

/* ---------- content ---------- */

main {
  padding-bottom: 2.5rem;
}

.inner-section {
  padding: 0 1rem;
  border-bottom: 1px solid var(--greyBorder);
}

.inner-section:last-of-type {
  border: none;
}

.edito,
.text,
.text-content,
.wrap,
.text-box {
  display: grid;
}

.edito,
.text,
.text-content,
.wrap {
  grid-gap: 1rem;
}

.text+.text {
  margin-top: 3rem;
}

/* ---------- edito ---------- */
.inner-section.edito-container {
  border: none;
  padding: 2rem 1rem;
}

.edito-container h2 {
  display: flex;
  width: min-content;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  color: var(--color45);
  font-weight: 500;
  margin: 0 1rem 1rem;
}

.edito {
  border: 1px solid var(--greyBorder);
  padding: .75rem 1rem .875rem;
  border-radius: var(--border-radius);
}

/* ---------- section ---------- */
.inner-section p,
.inner-section ul,
.inner-section ol {
  line-height: 1.5;
}

section:not(.edito-container) h2 {
  position: absolute;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.125rem;
  padding-bottom: 1.5rem;
  margin-top: 1.5rem;
  left: 1rem;
}

section:not(.edito-container) h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4.5rem;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-radius: var(--border-radius);
}

article {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem 0 2rem;
  margin: 0 auto;
  max-width: 64rem;
}

section article:first-of-type {
  padding-top: 6rem;
}

article.intersect {
  background-color: rgba(255, 0, 255, .5);
}

article:last-of-type {
  padding-bottom: 3.5rem;
}

h3,
h4 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  line-height: 1.1;
}

h3 {
  font-size: 1.75rem;
}

h4,
h5 {
  font-size: 1.5rem;
}

h5 {
  font-style: italic;
}

.text h4,
.text h5 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.text h4,
.text h5,
figure+h4,
figure+h5 {
  margin-top: 1rem;
}

.text h4+h5,
.text figure+h4 {
  margin-top: 0;
}

#current h2::after {
  border-color: var(--fushia);
}

#current h3,
#current .chapeau,
#current h4:not(.plus-container h4),
#current h5,
.fush {
  color: var(--fushia);
}

#sky h2::after {
  border-color: var(--blue);
}

#sky h3,
#sky article h4,
.time,
.bleu {
  color: var(--blue);
}

#culture h2::after {
  border-color: var(--green);
}

#culture h3,
#culture .chapeau,
#culture h4:not(.plus-container h4),
#culture h5,
.vert {
  color: var(--green);
}

#science h2::after {
  border-color: var(--orange);
}

#science h3,
#science .chapeau,
#science h4:not(.plus-container h4),
#science h5,
h4.seminary-label,
.seminary-author,
.seminary-title,
.orange {
  color: var(--orange);
}

#astro h2::after {
  border-color: var(--purple);
}

#astro h3,
#astro .chapeau,
#astro h4:not(.plus-container h4),
#astro h5,
.purple {
  color: var(--purple);
}

article>figure {
  max-width: 52rem;
  justify-self: center;
}

article img,
article video {
  border-radius: var(--border-radius);
}

.text figure.large {
  max-width: 52rem;
}

.text figure.medium {
  max-width: 44rem;
}

.text figure.small {
  max-width: 32rem;
}

caption {
  font-family: 'Work Sans', sans-serif;
  caption-side: bottom;
  font-weight: 400;
}

figcaption,
caption {
  padding-top: .5rem;
  font-size: .875rem;
  line-height: 1.35;
  color: hsl(0, 0%, 40%);
  text-align: left;
}

figcaption .figcaption-title,
caption .caption-title {
  font-weight: 600;
}

figcaption span.scaps {
  font-weight: 700;
}

p.chapeau {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .5rem;
}

.text p.chapeau {
  position: relative;
  padding-bottom: 1.25rem;
}

.text p.chapeau::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 8rem;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
  border-radius: var(--border-radius);
}

#sky p.chapeau,
#science .closed {
  padding-bottom: 0;
}

/*-------------------- boxes --------------------*/
div.encadre,
p.encadre,
div.text-box,
p.text-box,
.plus-container h4,
.seminary-box {
  padding: .75rem 1rem;
}

.seminary-box2 {
  position: relative;
  padding-left: 1rem;
  margin: 1rem 0 1rem .125rem;
}

.seminary-box2::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--orange);
}

.plus-container-text {
  padding: .75rem 1rem .875rem;
}

div.encadre,
p.encadre {
  background-color: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 25%);
  font-weight: 600;
  border: 1px solid var(--greyBorder);
  border-radius: var(--border-radius);
  position: relative;
  padding-left: 1.125rem;
}

div.text-box,
p.text-box {
  border-radius: var(--border-radius);
  border: 1px solid var(--greyBorder);
  font-size: 1rem;
}

div.text-box+div.text-box,
p.text-box+p.text-box {
  margin-top: .75rem;
}

div.encadre,
p.encadre,
div.text-box,
p.text-box,
.text figure,
.responsive-table {
  margin: .5rem 0 .375rem;
}

.plus-container h4 {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: .875rem;
  margin-bottom: -1px;
  background-color: hsl(0, 0%, 25%);
  color: #fff;
  letter-spacing: .0625rem;
  text-transform: uppercase;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.plus-container-text {
  border: 1px solid var(--greyBorder);
  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
}

.plus-container-text ul,
.text .plus-container-text ul {
  max-width: 100%;
  padding-left: 0;
}

.plus-container-text p+ul,
.text .plus-container-text p+ul,
.encadre p+ul {
  margin-top: .5rem;
}

.plus-container-text li {
  position: relative;
  padding-left: 1.5rem;
}

.plus-container-text li::before {
  position: absolute;
  left: 0;
}

/* ---------- list ---------- */
.text ul,
.edito ul,
.text ol,
.edito ol,
.list {
  display: grid;
  grid-gap: .5rem;
}

.text li ul,
.edito li ul,
.text li ol,
.edito li ol {
  margin-top: .5rem;
}

.text ul,
.edito ul {
  padding-left: 1rem;
}

.text ol,
.edito ol {
  padding-left: 1.875rem;
}

.text li,
.edito li {
  position: relative;
  padding-left: 1.5rem;
}

.text ul li,
.edito ul li {
  padding-left: 1.5rem;
}

.text ol li,
.edito ol li {
  padding-left: .625rem;
}

.text li::before,
.edito li::before {
  position: absolute;
  left: 0;
  top: .625rem;
  content: '';
}

.text ul li::before,
.edito ul li::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: hsl(0, 0%, 10%);
}

.text li ul li::before,
.edito li ul li::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid hsl(0, 0%, 10%);
  background-color: transparent;
}

.text li ul,
.edito li ul {
  padding-left: 0;
}

.text li ol,
.edito li ol {
  padding-left: .875rem;
}

/* ---------- ephemerides ---------- */
.ephem-box {
  width: 100%;
  border-radius: var(--border-radius);
  border: 1px solid var(--greyBorder);
  margin-bottom: .75rem;
  padding: .75rem 1rem;
}

.ephem-box:last-of-type {
  margin-bottom: 0;
}

.ephem-box h4,
.text .ephem-box h4 {
  margin: 0 0 .75rem;
}

#sky article .ephem-box h4 {
  color: #000;
}

.inner-section .ephem-box p {
  margin-top: .75rem;
  line-height: 1.35;
  padding-left: .0625rem;
}

.ephem-content+.ephem-content {
  padding-top: 0;
}

.time {
  display: block;
  font-weight: 600;
}

/* ---------- planets visibility ---------- */

.planets,
.skymaps,
.seminaries {
  display: grid;
  grid-gap: 1.5rem;
}

.planets li,
.skymaps li,
.seminaries li {
  display: grid;
  grid-gap: 1rem;
  padding-top: 1rem;
}

.skymaps h4 span {
  display: block;
}

.planets li:first-of-type,
.skymaps li:first-of-type {
  padding-top: 0;
}

.skymaps li figure+figure {
  margin-top: 1rem;
}

/* boîte visibilités */
.data-planet-container {
  display: grid;
  gap: 1rem;
}

.planet-title {
  display: flex;
  align-items: center;
}

.stars {
  display: flex;
  margin-left: .75rem;
  gap: .25rem;
}

.stars svg {
  width: 1.1875rem;
  height: 1.1875rem;
  fill: var(--blue);
}

.visibility-container {
  background-color: hsl(210, 90%, 90%);
  padding: .75rem;
  border-radius: var(--border-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-evenly;
}

.visibility-item {
  display: flex;
  align-items: center;
  width: min-content;
  flex-direction: column;
  gap: .5rem;
}

.visibility-moon-container .visibility-item svg {
  height: 2rem;
  width: 2rem;
  overflow: visible;
}

.visibility-planet-container .visibility-item {
  width: 5.5rem;
}

.data-moon .icono,
.visibility-planet-container .icono {
  background-color: #fff;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}

.eye,
.binoculars,
.telescope {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.25rem;
}

.eye.on {
  background-image: url(../img/svg/visibility/eye.svg);
}

.eye.off {
  background-image: url(../img/svg/visibility/no-eye.svg);
}

.binoculars.on {
  background-image: url(../img/svg/visibility/binoculars.svg);
}

.binoculars.off {
  background-image: url(../img/svg/visibility/no-binoculars.svg);
}

.telescope.on {
  background-image: url(../img/svg/visibility/telescope.svg);
}

.telescope.off {
  background-image: url(../img/svg/visibility/no-telescope.svg);
}

.data-box-ssp-btn {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.data-moon {
  display: flex;
  padding: .75rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: hsl(210, 60%, 40%);
  font-size: 1rem;
  background-color: hsl(210, 90%, 90%);
  border-radius: var(--border-radius);
  flex-grow: 1;
}

.data-planet {
  display: flex;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 0 1rem;
  color: hsl(210, 60%, 40%);
  font-size: 1rem;
  background-color: hsl(210, 90%, 90%);
  border-radius: var(--border-radius);
}

.visibility-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  color: hsl(210, 60%, 40%);
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-align: left;
  font-size: .875rem;
  text-align: center;
  white-space: nowrap;
}

.visibility-label .phase,
.visibility-label .tool {
  font-weight: 800;
  font-size: .9375rem;
  text-transform: uppercase;
}

.data-moon .visibility-label {
  align-items: flex-start;
}

.data-planet p {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: .875rem;
}

.data-planet>p:first-child {
  border-right: 1px solid hsla(210, 60%, 40%, .65);
  padding-right: .75rem;
}

.data-planet-text {
  display: flex;
  flex-direction: column;
  width: fit-content;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.inner-section p.data-planet-text {
  line-height: 1.3;
}

.data-planet-text-value {
  font-weight: 800;
}

.ssp-visibility-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  padding: 0 1.25rem;
  border-radius: 48px;
  background-color: hsl(175, 60%, 32%);
  transition: background-color .4s ease;
  color: #fff;
  line-height: 1.2;
  font-family: "Open sans", sans-serif;
  font-size: .875rem;
  font-weight: 600;
  gap: .625rem;
  flex-grow: 1;
}

.ssp-visibility-btn span {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0);
  padding-bottom: .125rem;
  transition: border-bottom .2s linear;
}

.ssp-visibility-btn:hover span {
  border-bottom: 1px solid hsla(0, 0%, 100%, 1);
}

.ssp-visibility-btn img {
  width: auto;
  height: 1.5rem;
  margin-bottom: .1875rem;
  border-radius: 0;
}

.img-planet-container {
  display: grid;
  grid-gap: 2rem;
}

.img-planet {
  max-width: 100%;
  text-align: center;
  border-radius: var(--border-radius);
}













/* ---------- seminaries ---------- */
.seminaries {
  width: 100%;
  max-width: 52rem;
  justify-self: center;
}

.seminary-box {
  border: 1px solid var(--greyBorder);
  border-radius: var(--border-radius)
}

.inner-section .seminary-box p {
  margin-top: .75rem;
  line-height: 1.35;
}

.seminary-box p.seminary-date,
.seminary-box p.seminary-author {
  margin-top: 0;
}

.seminary-date,
.seminary-title {
  font-weight: 600;
}

.seminary-title {
  font-style: italic;
}


/* ---------- footer ---------- */
footer {
  background-color: hsl(var(--hue), var(--sat), 36%);
  width: 100%;
  color: hsl(0, 0%, 94%);
}

.footer-container {
  padding: 1rem;
}

.about-box-container {
  display: grid;
  grid-gap: 2rem;
}

.about-box-one {
  display: grid;
  grid-gap: 2rem;
}

.shortcuts,
.subscription-form,
.footer-container p+h4 {
  margin-top: 2rem;
}

.footer-container h4 {
  margin: 0 0 .625rem;
  color: var(--blueFooterTxt);
  text-transform: uppercase;
  letter-spacing: .025rem;
  line-height: 1;
  font-size: .875rem;
  font-family: 'Work Sans'
}

.about-box-container p {
  line-height: 1.175;
}

.about-box-container p+p,
.logo-container p+p {
  margin-top: .25rem;
}

.about-box-container p span,
h4 span {
  display: block;
}

.mail {
  display: inline-block;
  padding-bottom: .25rem;
  color: var(--blueFooterTxt);
  border-bottom: solid 1px hsla(var(--hue), 35%, 65%, 0);
  transition: border .4s ease;
}

.mail:hover {
  border-bottom: solid 1px hsla(var(--hue), 35%, 65%, .8);
}

.mail+p {
  margin-top: 1.25rem;
}

/* ---------- logo ---------- */
.logo-container {
  margin-top: 3rem;
}

.logo-container img {
  display: inline-block;
  max-width: 20rem;
}

.logo-container p {
  margin-top: 1rem;
}

/* ---------- shortcuts && form ---------- */
.shortcut-btn img,
#formNewsletter img {
  width: auto;
}

.shortcut-btn,
.ui-form input,
.ui-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--border-radius);
  height: 3rem;
  padding: 0;
  transition: background-color .4s ease;
  font-size: .875rem;
  font-weight: 500;
}

.shortcut-btn {
  padding: 0 1rem;
}

.shortcut-btn span,
#formNewsletter span {
  margin-left: .5rem;
}

.newsletter-btn img {
  margin-bottom: .25rem;
}

.shortcut-btn,
.ui-form button {
  background-color: hsl(var(--hue), var(--sat), 26%);
  color: hsl(0, 0%, 94%);
}

.shortcut-btn:hover,
.ui-form button:hover {
  background-color: hsl(var(--hue), var(--sat), 20%);
}

.ui-form button {
  cursor: pointer;
}

#alert {
  margin-bottom: .625rem;
}

.ui-form,
.shortcut-btn-container {
  display: grid;
  grid-gap: .5rem;
}

.ui-form input,
.ui-form button {
  font-family: "Work Sans", sans-serif;
  border: none;
}

.ui-form input {
  padding: 0 1rem;
  background-color: #fff;
  color: var(--color45);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--border-radius);
}

.ui-form input::placeholder {
  color: var(--color45);
  transition: color .2s ease;
  opacity: 1;
}

.ui-form input:focus {
  box-shadow: 0 0 6px var(--color85);
  ;
}

.ui-form input:focus::placeholder {
  color: transparent;
}

/* ---------- table ---------- */
.responsive-table {
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  cursor: default;
}

.responsive-table thead {
  display: none;
}

.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
  display: block;
  text-align: center;
}

.responsive-table th,
.responsive-table td {
  vertical-align: middle;
  padding: .875rem;
}

.responsive-table tbody tr {
  border: 1px solid var(--greyBorder);
  border-radius: var(--border-radius);
}

.responsive-table tbody tr+tr {
  margin-top: 1rem;
}

.responsive-table tbody th[scope="row"] {
  color: #fff;
  font-weight: 700;
  margin: -1px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#current .responsive-table tbody th[scope="row"] {
  background-color: var(--fushia);
  border: 1px solid var(--fushia);
}

#sky .responsive-table tbody th[scope="row"] {
  background-color: var(--blue);
  border: 1px solid var(--blue);
}

#culture .responsive-table tbody th[scope="row"] {
  background-color: var(--green);
  border: 1px solid var(--green);
}

#science .responsive-table tbody th[scope="row"] {
  background-color: var(--orange);
  border: 1px solid var(--orange);
}

#astro .responsive-table tbody th[scope="row"] {
  background-color: var(--purple);
  border: 1px solid var(--purple);
}

.responsive-table tbody td {
  padding: .6875rem 0 .75rem;
  position: relative;
}

.responsive-table tbody td::after {
  position: absolute;
  content: "";
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background-color: var(--greyBorder);
}

.responsive-table tbody td:last-of-type::after {
  content: none;
}

.responsive-table tbody td[data-title]::before {
  display: block;
  content: attr(data-title);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
}

#current .responsive-table tbody td[data-title]::before {
  color: var(--fushia);
}

#sky .responsive-table tbody td[data-title]::before {
  color: var(--blue);
}

#culture .responsive-table tbody td[data-title]::before {
  color: var(--green);
}

#science .responsive-table tbody td[data-title]::before {
  color: var(--orange);
}

#astro .responsive-table tbody td[data-title]::before {
  color: var(--purple);
}








/* ---------- lightbox ---------- */
figure.hidden-gallery-container {
  position: relative;
}

.lightbox-hidden {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
}

a.lightbox {
  display: inline-flex;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

a.lightbox.video::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  height: 5rem;
  width: 5rem;
  content: "";
  background: url(../img/svg/lightbox/play-ic.svg) no-repeat center;
  background-size: 5rem;
  border-radius: 50%;
  transition: opacity .35s;
  pointer-events: none;
}

a.lightbox.desktop::after {
  opacity: 0;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  height: 3rem;
  width: 3rem;
  content: "";
  background: hsla(0, 0%, 50%, .85) url(../img/svg/lightbox/open-in-full-ic.svg) no-repeat center;
  background-size: 2rem;
  border-radius: 50%;
  transition: opacity .35s;
}

a.lightbox.desktop:hover::after {
  opacity: 1;
  pointer-events: none;
}

.lightbox-container {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: #333;
  animation: fade-in .25s var(--easing);
  scrollbar-color: var(--lightbox-scrollbar-thumb) var(--lightbox-scrollbar-track);
  overflow: hidden;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.lightbox-container figure {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 1.5rem 3rem;
  position: relative;
  transition: padding-bottom .4s var(--easing);
}

.lightbox-container figure.gallery {
  padding: 5rem 3rem 3rem;
}

.lightbox-container figure.space-for-wrapper {
  padding-bottom: 7rem;
}

.lightbox-container figure .figure-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lightbox-container .current-container {
  min-height: 0;
  border-radius: calc(var(--border-radius) / 2);
  z-index: 3;
  background-color: transparent;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-basis: fit-content;
}

.lightbox-container figure img,
.lightbox-container figure video {
  height: 100%;
  width: auto;
  max-width: 100%;
  border-radius: calc(var(--border-radius) / 2);
  z-index: 2;
  background-color: #000;
  user-select: none;
}

.lightbox-container figcaption {
  margin-top: .5rem;
  color: #eee;
  text-align: center;
  z-index: 2;
  transition: opacity .2s linear;
}

.lightbox-container figcaption h6 {
  font-size: 1rem;
  font-weight: 600;
}

.lightbox-container figcaption p {
  margin-top: .25rem;
  font-size: .875rem;
  opacity: .8;
}

.lightbox-container figcaption br {
  display: none;
}

@media (min-width: 1600px) {
  .lightbox-container figcaption br {
    display: inline;
  }
}

.lightbox-container .lightbox-toolbar,
.lightbox-counter {
  display: flex;
  position: absolute;
  top: 0;
  height: 2.5rem;
}

.lightbox-container .lightbox-toolbar {
  right: 0;
  width: 100%;
  justify-content: center;
  background-color: hsla(0, 0%, 0%, .35);
  backdrop-filter: blur(4px);
  z-index: 4;
  gap: .5rem;
  padding-right: .25rem;
}

.lightbox-container .lightbox-toolbar.gallery {
  justify-content: flex-end;
}

/* counter */
.lightbox-counter {
  left: .75rem;
  align-items: center;
  justify-content: center;
  color: #eee;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  font-size: .875rem;
  z-index: 5;
}

.counter-current-index {
  justify-self: end;
}

.counter-divider {
  justify-self: center;
}

.counter-total-index {
  justify-self: start;
}

.lightbox-container button,
.lightbox-container a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 2.375rem;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 2rem;
}

/*********** Baseline, reset styles ***********/
.delay-container {
  display: flex;
  position: relative;
}

.delay-progress-bar {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  bottom: 0;
  background-color: #666;
}

.delay-progress-bar.hidden-progress-bar {
  visibility: hidden;
}

.lightbox-container .thumbs-wrapper {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  transition: opacity .2s linear, transform .4s var(--easing);
  z-index: 2;
  animation: fade-in .4s var(--easing);
}

.lightbox-container .thumbs-wrapper.hide {
  transform: translate3d(0, 100%, 0);
}

.lightbox-container .thumbs-container {
  display: flex;
  width: 100%;
  padding: 1rem;
  gap: .5rem;
  overflow-y: hidden;
  justify-content: flex-start;
}

.lightbox-container .thumbs-container.centered {
  justify-content: center;
  overflow-x: hidden;
}

.lightbox-container .thumbs-container img {
  height: 4rem;
  cursor: pointer;
}

.lightbox-container .thumbs-container img.focused {
  border: 2px solid hsl(0, 0%, 65%);
}

.lightbox-container svg {
  pointer-events: none;
}

.lightbox-container button.lightbox-zoom-in-btn {
  background-image: url('../img/svg/lightbox/zoom-in-btn.svg');
}

.lightbox-container button.lightbox-zoom-out-btn {
  background-image: url('../img/svg/lightbox/zoom-out-btn.svg');
}

.lightbox-container button.lightbox-play-btn {
  background-image: url('../img/svg/lightbox/play-btn.svg');
}

.lightbox-container button.lightbox-play-btn.pause {
  background-image: url('../img/svg/lightbox/pause-btn.svg');
}

.lightbox-container button.lightbox-close-btn {
  background-image: url('../img/svg/lightbox/close-btn.svg');
}

.lightbox-container a.lightbox-download-btn {
  background-image: url('../img/svg/lightbox/download-btn.svg');
}

.lightbox-container button.lightbox-fullscreen-btn.extend {
  background-image: url('../img/svg/lightbox/fullscreen-extend-btn.svg');
}

.lightbox-container button.lightbox-fullscreen-btn.exit {
  background-image: url('../img/svg/lightbox/fullscreen-exit-btn.svg');
}

.lightbox-container button.lightbox-show-thumbs-btn {
  background-image: url('../img/svg/lightbox/show-thumbs-btn.svg');
}

.lightbox-container button.inactive {
  opacity: .5;
}

.lightbox-container button.disable {
  pointer-events: none;
}

.lightbox-nav-btn {
  opacity: .9;
}

.lightbox-nav-btn.unfocused {
  opacity: .5;
}

.lightbox-container button.chevron-left-btn,
.lightbox-container button.chevron-right-btn {
  position: absolute;
  top: 0;
  height: 100%;
  background-size: 2rem;
  width: 2rem;
}

.lightbox-container button.chevron-left-btn {
  background-image: url('../img/svg/lightbox/chevron-left-btn.svg');
  left: 0;
}

.lightbox-container button.chevron-right-btn {
  background-image: url('../img/svg/lightbox/chevron-right-btn.svg');
  right: 0;
}

@media (min-width: 1024px) {
  .lightbox-container figure {
    padding: 6rem 3rem 3rem;
  }

  .lightbox-container figure.gallery {
    padding: 6rem 6rem 3rem;
  }

  .lightbox-container figure.space-for-wrapper {
    padding-bottom: 10rem;
  }

  .lightbox-container figcaption h6 {
    font-size: 1.25rem;
  }

  .lightbox-container figcaption p {
    font-size: 1rem;
  }

  .lightbox-container .lightbox-toolbar,
  .lightbox-counter {
    height: 2.75rem;
  }

  .lightbox-container .lightbox-toolbar {
    width: auto;
    border-radius: 0 0 0 4px;
    padding: 0 .5rem;
    gap: 0;
  }

  .lightbox-counter {
    font-size: 1rem;
  }

  .lightbox-container button,
  .lightbox-container a {
    width: 2.75rem;
    transition: background-size .1s linear, opacity .1s linear;
  }

  .lightbox-container button.chevron-left-btn,
  .lightbox-container button.chevron-right-btn {
    position: absolute;
    top: 0;
    height: 100%;
    background-size: 4rem;
    width: 4rem;
  }

  .lightbox-container .thumbs-container img {
    height: 6rem;
  }
}


/* ---------- media queries ---------- */

@media (min-width: 400px) {
  .data-planet-text {
    flex-direction: row;
    gap: .375rem;
  }

  .data-planet-text-label {
    display: inline-flex;
    position: relative;
    padding-right: .625rem;
  }

  .data-planet-text-label::after {
    position: absolute;
    right: 0;
    content: " :";
  }
}


@media (min-width: 530px) {
  .ephem-box-container {
    column-count: 2;
    column-gap: .75rem;
  }

  .ephem-box {
    display: inline-block;
  }
}

@media (min-width: 560px) {
  .about-box-container {
    grid-template-columns: 1fr 1fr;
  }

  .visibility-moon-container .visibility-item {
    flex-direction: row;
  }

  .visibility-moon-container .visibility-label {
    width: auto;
    align-items: flex-start;
  }

}

@media (min-width: 650px) {

  .data-box-ssp-btn {
    flex-direction: row;
  }

  .data-moon,
  .data-planet {
    height: 3.5rem;
    padding: .75rem 1rem;
  }

  .data-moon .icono {
    height: 2.5rem;
    width: 2.5rem;
  }

  .data-moon .eye {
    background-size: 2rem;
  }

  .visibility-planet-container .visibility-item {
    flex-direction: row;
    width: 8.5rem;
  }

  .visibility-planet-container .visibility-label {
    align-items: flex-start;
  }

  .data-planet {
    flex-grow: 1;
  }

  .data-planet-text {
    flex-direction: column;
    gap: 0;
  }

  .data-planet-text-label {
    position: static;
    padding-right: 0;
  }

  .data-planet-text-label::after {
    display: none;
  }

  .ui-form input {
    grid-column: 1 / 3;
  }

  .ui-form {
    grid-template-columns: repeat(4, 1fr);
  }

  .shortcut-btn-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 829px) {
  .ephem-box-container {
    column-count: 3;
  }
}

@media (min-width: 768px) {

  /* ---------- formatage texte ---------- */
  .center {
    text-align: center;
  }

  /* ---------- header ---------- */

  .heading .first-line {
    width: 100%;
  }

  h1 {
    display: flex;
    justify-content: center;
    color: #fff;
  }

  .heading-logo {
    height: 1.8125rem;
  }

  /* ---------- sections ---------- */
  .inner-section {
    padding: 0 2rem;
  }

  .inner-section.edito-container {
    padding-top: 2.5rem;
  }

  /* ---------- edito ---------- */
  .edito {
    margin: 0 auto;
    max-width: 52rem;
    text-align: left;
    border-radius: var(--border-radius);
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .edito-container h2 {
    font-size: 1.75rem;
    background-color: #fff;
    margin: 0 auto;
    transform: translateY(.5rem);
    padding: 0 1rem;
  }


  article {
    padding: 2rem 0 3rem;
    grid-gap: 1.5rem;
  }

  section article:first-of-type {
    padding-top: 10rem;
  }

  article:last-of-type {
    padding-bottom: 5rem;
  }

  section:not(.edito-container) h2 {
    margin-top: 4rem;
    left: 0;
    right: 0;
  }

  section:not(.edito-container) h2::after {
    left: 50%;
    transform: translateX(-50%);
  }

  h2,
  h3,
  figcaption,
  caption {
    text-align: center;
  }

  h3 {
    font-size: 2rem;
  }

  h3 span {
    display: block;
  }

  /* ---------- content ---------- */
  /* ---------- figures ---------- */
  figure {
    text-align: center;
  }

  figcaption,
  caption {
    font-size: 1rem;
    text-align: center;
  }

  figcaption .figcaption-title,
  caption .caption-title {
    display: block;
  }

  .text figure {
    margin: 1.5rem auto 1.375rem;
  }

  .text figure.large.img-text,
  .text figure.medium.img-text,
  .text figure.small.img-text,
  .img-text {
    max-width: 20rem;
  }

  .img-text figcaption {
    text-align: left;
    font-size: .875rem;
    padding-top: .5rem;
  }

  .text h4 {
    font-size: 1.25rem;
  }

  /* ---------- list ---------- */
  .text ul,
  .edito ul {
    padding-left: 1rem;
  }

  .text ul li,
  .plus-container-text ul li,
  .edito ul li {
    padding-left: 1.75rem;
  }

  .text ol,
  .edito ol {
    padding-left: 1.8125rem;
  }

  .text ol li,
  .edito ol li {
    padding-left: 1rem;
  }

  .text li ol,
  .edito li ol {
    padding-left: .6875rem;
  }

  .text li::before,
  .plus-container-text li::before,
  .edito li::before {
    line-height: 1.1;
  }

  .text .plus-container h4 {
    font-size: 1rem;
    padding: .875rem 1.375rem .75rem;
  }

  .plus-container-text,
  .seminary-box {
    padding: 1rem 1.375rem 1.125rem;
  }

  .seminary-box2 {
    padding-left: 1.5rem;
    margin: 1.5rem 0 1.5rem .75rem;
  }

  .seminary-box2::before {
    border-left-width: 3px;
  }

  p.chapeau {
    font-size: 1.375rem;
    padding-bottom: 1.5rem;
  }

  .text-content,
  .wrap p,
  .planets,
  .skymaps {
    max-width: 44rem;
  }

  .wrap {
    display: block;
  }

  .text-content,
  .planets,
  .skymaps {
    justify-self: center;
  }

  .wrap p {
    margin: 0 auto;
  }

  .text .chapeau::after {
    width: 12rem;
  }

  .img-text.left {
    float: left;
    margin: .375rem 2rem 1.375rem 0;
  }

  .img-text.right {
    float: right;
    margin: .375rem 0 1.375rem 2rem;
  }

  div.encadre,
  p.encadre,
  div.text-box,
  p.text-box {
    padding: .75rem 1.25rem .875rem;
  }

  /* ---------- responsive table ---------- */
  .responsive-table {
    width: 100%;
    max-width: 44rem;


    /* ---------- add 05.12.2024 ---------- */
    border-collapse: separate;
    /* border-spacing: 0; */
  }

  .responsive-table span {
    display: block;
  }

  .responsive-table thead {
    display: table-row-group;
  }

  .responsive-table thead th {
    font-weight: 600;
    text-align: center;
    color: #fff;
    letter-spacing: .025rem;
    padding: 1rem;
    line-height: 1.25;
  }

  #current .responsive-table thead th {
    background-color: var(--fushia);
    border: 1px solid var(--fushia);
  }

  #sky .responsive-table thead th {
    background-color: var(--blue);
    border: 1px solid var(--blue);
  }

  #culture .responsive-table thead th {
    background-color: var(--green);
    border: 1px solid var(--green);
  }

  #science .responsive-table thead th {
    background-color: var(--orange);
    border: 1px solid var(--orange);
  }

  #astro .responsive-table thead th {
    background-color: var(--purple);
    border: 1px solid var(--purple);
  }

  .responsive-table thead th:first-of-type {
    text-align: left;
  }

  .responsive-table tbody {
    display: table-row-group;
  }

  .responsive-table tbody tr {
    border: none;
    border-radius: unset;
    position: relative;
  }

  .responsive-table tbody tr:not(:last-child)::after {
    position: absolute;
    content: "";
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background-color: var(--greyBorder);
    transition: all .1s linear;
  }

  .responsive-table tbody:hover tr:not(:last-child)::after {
    left: 0;
    right: 0;
  }

  .responsive-table tr {
    display: table-row;
    border-radius: unset;
  }

  .responsive-table th {
    display: table-cell;
    border-radius: unset;
  }

  .responsive-table tbody th[scope="row"] {
    text-align: left;
    line-height: 1.25;
    padding: .875rem 1rem;
    border-radius: unset;
  }

  .responsive-table tbody th:first-child,
  .responsive-table tbody td:first-child {
    border-left: 1px solid var(--greyBorder);
  }

  .responsive-table tbody th:last-child,
  .responsive-table tbody td:last-child {
    border-right: 1px solid var(--greyBorder);
  }

  .responsive-table thead tr:first-child th:first-child {
    border-top-left-radius: var(--border-radius);
  }

  .responsive-table thead tr:first-child th:last-child {
    border-top-right-radius: var(--border-radius);
  }

  .responsive-table tbody tr:last-child th:first-child {
    border-bottom-left-radius: var(--border-radius);
  }

  .responsive-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius);
  }

  /* ---------- end of add 05.12 ---------- */

  .responsive-table tbody tr:last-child th,
  .responsive-table tbody tr:last-child th[scope="row"],
  #current .responsive-table tbody tr:last-child th[scope="row"],
  #sky .responsive-table tbody tr:last-child th[scope="row"],
  #culture .responsive-table tbody tr:last-child th[scope="row"],
  #science .responsive-table tbody tr:last-child th[scope="row"],
  #astro .responsive-table tbody tr:last-child th[scope="row"],
  .responsive-table tbody tr:last-child td {
    border-bottom: 1px solid var(--greyBorder);
  }





  #current .responsive-table tbody th[scope="row"],
  #sky .responsive-table tbody th[scope="row"],
  #culture .responsive-table tbody th[scope="row"],
  #science .responsive-table tbody th[scope="row"],
  #astro .responsive-table tbody th[scope="row"] {
    background-color: transparent;
    border-top: none;
    border-right: none;
    border-left: 1px solid var(--greyBorder);
    /* border-bottom: 1px solid var(--greyBorder); */
    border-bottom: none;
  }

  #current .responsive-table tbody th[scope="row"] {
    color: var(--fushia);
  }

  #sky .responsive-table tbody th[scope="row"] {
    color: var(--blue);
  }

  #culture .responsive-table tbody th[scope="row"] {
    color: var(--green);
  }

  #science .responsive-table tbody th[scope="row"] {
    color: var(--orange);
  }

  #astro .responsive-table tbody th[scope="row"] {
    color: var(--purple);
  }

  .responsive-table tbody td {
    position: initial;
    display: table-cell;
    text-align: center;
  }

  .responsive-table tbody td[data-title]::before,
  .responsive-table tbody td::after {
    content: none;
  }

  #current .responsive-table tbody tr:hover th,
  #current .responsive-table tbody tr:hover td,
  #sky .responsive-table tbody tr:hover th,
  #sky .responsive-table tbody tr:hover td,
  #culture .responsive-table tbody tr:hover th,
  #culture .responsive-table tbody tr:hover td,
  #science .responsive-table tbody tr:hover th,
  #science .responsive-table tbody tr:hover td,
  #astro .responsive-table tbody tr:hover th,
  #astro .responsive-table tbody tr:hover td {
    transition: background-color .1s linear;
    background-color: hsl(0, 0%, 92%);
  }

  .responsive-table.alt tbody tr td:nth-of-type(2n+1) {
    background-color: hsl(0, 0%, 94%);
  }

  /* ---------- seminaries ---------- */
  .seminary-box p:not(.seminary-place) {
    font-size: 1.125rem;
  }

  /* ---------- footer ---------- */
  .footer-container {
    padding: 2rem;
  }

  .about-box-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-box-one {
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / 3;
  }

  .about-box-one div:last-child {
    justify-self: center;
  }

  .about-box-container .about-box-two {
    justify-self: end;
  }

  .shortcuts {
    margin-top: 3.5rem;
  }

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

}

@media (min-width: 832px) {

  .data-planet-container {
    width: 100%;
  }

}

@media (min-width: 896px) {
  p.chapeau {
    width: 52rem;
    justify-self: center;
  }

  p.chapeau span:not(.scaps) {
    display: block;
  }
}

@media (min-width: 960px) {
  header {
    justify-content: center;
  }

  /* ---------- footer ---------- */
  .footer-container {
    max-width: 56rem;
    margin: 0 auto;
  }

}

@media (min-width: 1088px) {
  .ephem-box-container {
    column-count: 4;
  }
}

@media (min-width: 1110px) {

  /* top-btn */
  .top-btn-container {
    display: flex;
    width: max-content;
    margin-left: auto;
    visibility: hidden;
    opacity: 0;
    position: sticky;
    bottom: 2rem;
    right: 2rem;
    transition: opacity .4s ease, visibility .4s ease;
  }

  #top-btn {
    display: flex;
    margin: 0;
    padding: 0;
    height: 2.75rem;
    width: 2.75rem;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    border: none;
    transition: transform .2s ease;
  }

  .top-btn-container.hide {
    display: none;
  }

  .top-btn-container.show {
    visibility: visible;
    opacity: 1;
  }

  #top-btn svg {
    height: 100%;
    width: 100%;
  }

  #top-btn:hover,
  #top-btn.topBtnHover {
    transform: translateY(-.25rem);
  }
}

@media (min-width: 1700px) {

  header {
    flex-direction: column;
    align-items: center;
    transition: transform .2s linear;
  }

  .heading {
    width: 64rem;
    flex-direction: column;
    height: auto;
    padding: 0;
  }

  .first-line {
    height: 3.5rem;
    align-content: center;
  }

  header.small {
    transform: translate3d(0, calc(-3.5rem + .25rem), 0);
  }

  .heading-logo {
    height: 2rem;
  }

  .second-line {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    align-content: center;
    background-color: hsl(var(--hue), var(--sat), 40%);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    align-items: center;
    font-size: .875rem;
  }

  .heading-shortcuts {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: space-between;
    padding: 0 .4375rem 0 .375rem;
  }

  .heading-shortcuts::before,
  .heading-shortcuts::after {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    width: 1px;
    background: linear-gradient(to bottom, transparent .625rem, rgba(255, 255, 255, .35) .625rem, rgba(255, 255, 255, .35) 1.875rem, transparent 1.875rem);
  }

  .heading-shortcuts::before {
    left: 0;
  }

  .heading-shortcuts::after {
    right: 0;
  }

  .month {
    display: none;
  }

  #burger {
    padding: 0 .5rem 0 .25rem;
    margin: 0 .375rem 0 .5rem;
    right: auto;
    font-size: .875rem;
    font-family: 'Work Sans';
    height: 2.5rem;
  }

  #burger svg.mobile {
    display: none;
  }

  #burger svg.small-burger {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
  }

  #burger svg.small-burger path {
    transform-origin: 480px -480px;
    transition: transform .25s linear, opacity .25s linear;
  }

  #burger svg.small-burger path.ic-close {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }

  #burger.active svg.small-burger path.ic-open {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }

  #burger.active svg.small-burger path.ic-close {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }

  #burger .summary {
    display: block;
    margin-left: .375rem;
    font-weight: 500;
    color: #fff;
  }

  #cache {
    display: none;
  }

  .section-shortcut {
    display: flex;
    font-weight: 500;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    color: hsl(220, 96%, 88%);
    padding: 0 .5rem 0 .375rem;
    transition: color .2s linear;
  }

  .section-shortcut:hover,
  .section-shortcut.active {
    color: #fff;
  }


  .section-shortcut svg {
    width: 1.5rem;
    height: 100%;
    fill: hsl(220, 90%, 84%);
    transition: fill .2s linear;
  }

  .section-shortcut[href="#current"] svg {
    margin-right: .3125rem;
    padding-bottom: .125rem;
  }

  .section-shortcut[href="#culture"] svg {
    margin-right: .375rem;
  }

  .section-shortcut[href="#science"] svg {
    margin-right: .125rem;
  }

  .section-shortcut[href="#astro"] svg {
    margin-right: .25rem;
  }

  .section-shortcut[href="#sky"] svg {
    margin-right: .1875rem;
  }

  .section-shortcut:hover svg,
  .section-shortcut.active svg {
    fill: var(--focus);
  }


  .issue {
    color: #fff;
    text-transform: capitalize;
    font-size: .875rem;
    font-weight: 500;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 .875rem 0 .75rem;
    height: 1.25rem;
    white-space: nowrap;
  }

  .progression-bar-container {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: .25rem;
    width: 100%;
    transition: top .2s linear;
  }

  header.small .progression-bar-container {
    top: calc(3.5rem - .25rem);
  }

  .progression-bar {
    width: 0;
    height: 100%;
    background-color: #1DE9B6;
    transition: width 0.1s linear;
  }

  .menu-container {
    top: 6rem;
    left: 0;
    height: calc(100vh - 6rem);
    transform: translate3d(-100%, 0, 0);
    z-index: 2;
    transition: transform .4s var(--easing), top .2s linear, height .2s linear;
  }

  .menu-container.for-small-header {
    top: calc(2.5rem + 4px);
    height: calc(100vh - calc(2.5rem + 4px));
  }

  .section-title:hover {
    color: #fff;
  }

  .section-title:hover svg {
    fill: var(--focus);
  }

  /* ---------- content ---------- */
  /* ---------- edito ---------- */
  .inner-section.edito-container {
    padding-top: 3.5rem;
  }

  .edito-container h2 {
    font-size: 2rem;
  }

  .edito {
    padding: 2rem 1.75rem 1.75rem;
  }

  /* ---------- sections ---------- */

  section:not(.edito-container) h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 2.5rem;
  }

  article {
    padding: 3rem 0 4rem;
  }

  article:last-of-type {
    padding-bottom: 6.5rem;
  }

  article>figure {
    max-width: 64rem;
    justify-self: center;
  }

  figcaption,
  caption {
    padding-top: .75rem;
  }

  .inner-section p,
  .inner-section ul,
  .inner-section ol {
    line-height: 1.625;
  }

  p.chapeau {
    margin-bottom: 1rem;
  }

  p.chapeau,
  .text h4,
  .text h5 {
    line-height: 1.4;
  }

  article {
    grid-gap: 2rem;
  }

  .edito,
  .text,
  .text-content,
  .wrap {
    grid-gap: 1.25rem;
  }

  .text h4,
  .text h5,
  figure+h4,
  figure+h5 {
    margin-top: 2rem;
  }

  .text+.text {
    margin-top: 4rem;
  }

  /* ---------- planets visibility ---------- */
  #sky p.chapeau {
    width: 100%;
    text-align: center;
    margin-bottom: .5rem;
  }

  #sky p.chapeau br {
    display: block;
  }

  .planets,
  .skymaps {
    max-width: initial;
  }

  .skymaps h4 span {
    display: inline;
  }

  .data-planet-container {
    display: flex;
    gap: 1rem;
  }

  .visibility-moon-container {
    padding: 0;
    height: 3.5rem;
  }

  .visibility-planet-container {
    padding: .5rem;
  }

  .visibility-container,
  .data-moon,
  .data-planet {
    border-radius: var(--border-radius);
    align-items: center;
  }

  .visibility-container {
    flex-grow: 1;
  }

  .data-moon,
  .data-planet {
    width: fit-content;
  }

  .data-planet {
    padding: 0 .625rem;
    gap: .5rem;
  }

  .data-planet>p:first-child {
    padding-right: .625rem;
  }

  .visibility-planet-container .icono {
    height: 2.5rem;
    width: 2.5rem;
  }

  .visibility-planet-container .visibility-item {
    width: auto;
  }

  .visibility-item,
  .data-moon {
    gap: .4375rem;
  }

  .eye,
  .binoculars,
  .telescope {
    background-size: 2rem;
  }

  .img-planet-container {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 22rem auto;
  }

  .img-planet {
    display: grid;
    grid-template-rows: 22rem auto;
  }

  a.lightbox {
    overflow: hidden;
    align-items: center;
    border-radius: var(--border-radius);
  }

  .img-planet img {
    display: flex;
    height: min-content;
  }

  .visibility-label .tool,
  .visibility-status,
  .data-planet-text-label {
    letter-spacing: -0.1px;
  }

  /* ---------- footer ---------- */
  footer .footer-container {
    padding-top: 3rem;
  }

  .footer-container .logo-container a {
    transition: color .2s linear;
  }

  .footer-container .logo-container a:hover {
    color: var(--blueFooterTxt);
  }

  /* top-btn */
  .top-btn-container {
    bottom: 2.75rem;
    right: 2.75rem;
  }

  #top-btn {
    height: 3rem;
    width: 3rem;
  }

  figcaption span,
  caption span {
    display: block;
  }
}