:root {
  --primary-color: 271, 87%, 53%;
  --secundary-color: 271, 76%, 42%;
  --ternary-color: 271, 39%, 32%;
  --color-dark: 271, 33%, 10%;
  --color-dark-opacity: 271, 33%, 10%;
  --color-light: 271, 84%, 96%;
  --color-white: 271, 84%, 98%;
  --bg-color-light: 271, 84%, 68%;
  --bg-color-dark: 271, 75%, 25%;
  --color-lightgray: 0, 0%, 87%;
  --color-gray: 0, 0%, 64%;
  --color-darkgray: 0, 0%, 36%;
}

/* RESET */

*,
*::before,
*::after {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  word-wrap:break-word;
  /* word-break:break-all; */
}

body {
  background-color: hsl(var(--bg-color-dark));
  color: hsl(var(--color-light));
}

.transparent-background {
  background-color: transparent !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  letter-spacing: 0.025rem;
}

h1 {
  font-size: 1.75rem;
}
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.35rem;
}

*::selection{
  background-color:hsl(var(--color-dark));
  color:hsl(var(--color-white));
}

form {
  width:400px;
  margin: 1rem auto;
  background: hsl(var(--color-light));
  border-radius: 2px;
  padding: 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

form h1,
form h2,
form h3,
form h4,
form h5,
form h6 {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0px 0px 20px 0px;
  color: hsl(var(--color-darkgray));
  font-size: x-large;
}

form ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li {
  display: block;
  padding: 9px;
  border: 1px solid hsl(var(--color-lightgray));
  background-color: hsl(var(--color-white));
  margin-bottom: 30px;
  border-radius: 3px;
  position: relative;
}

form li:last-child {
  border: none;
  margin-bottom: 0px;
  text-align: center;
  background-color: transparent;
}

form li > label,
form label {
  display: block;
  float: left;
  margin-top: -18px;
  background: hsl(var(--color-white));
  padding: 0.15rem 0.25rem;
  color: hsl(var(--color-gray));
  font-size: 12px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px hsl(var(--color-lightgray));
}

form li:focus-within > label {
  color: hsl(var(--color-darkgray));
}

form input[type="text"],
form input[type="date"],
form input[type="datetime"],
form input[type="email"],
form input[type="number"],
form input[type="search"],
form input[type="time"],
form input[type="url"],
form input[type="password"],
form input[type="file"],
form textarea,
form select {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  display: block;
  outline: none;
  border: none;
  height: 2rem;
  line-height: 1.5;
  font-size: 1rem;
  font-weight: 400;
  margin-block: 0.25rem;
  padding: 0.15rem;
  background-color: hsl(var(--color-white));
  color: hsl(var(--color-darkgray));
}

form li > span,
form span {
  background: hsl(var(--color-white));
  display: block;
  padding: 0.25rem;
  margin: 0 -9px -9px -9px;
  text-align: center;
  color: hsl(var(--color-gray));
  font-size: 0.65rem;
}

form textarea {
  height: 5rem;
  resize: none;
  margin-block: 0.5rem;
}

form input[type="submit"],
form input[type="button"],
form button[type="submit"] {
  background: hsl(var(--ternary-color));
  border: none;
  margin-inline: auto;
  padding: 10px 20px 10px 20px;
  border-bottom: 3px solid hsla(var(--primary-color), 0.75);
  border-radius: 3px;
  color: hsl(var(--light-color));
  cursor: pointer;
  transition: color 0.125s ease-out, background-color 0.125s ease-out,
    border-bottom 0.125s ease-out;
}

form input[type="submit"]:hover,
form input[type="button"]:hover,
form button[type="submit"]:hover {
  background: hsl(var(--secundary-color));
  color: hsl(var(--light-color));
}

form input[type="submit"]:active,
form input[type="button"]:active,
form button[type="submit"]:active {
  border-bottom: 3px solid transparent;
}

ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:.5rem;
  padding:.5rem .25rem;
}

li{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  gap:.25rem .5rem;
}

details{
  width:100%;
  margin-block:.75rem;
}

summary{
  width:max-content;
  font-weight:500;
  cursor:pointer;
}

summary::selection{
  background-color:inherit;
  color:inherit;
}

details > form{
  margin-inline:0;
}

b{
  font-weight:500;
  letter-spacing:.035rem;
}

a,
a:visited{
  color:hsl(var(--color-white));
}

p{
  margin-block:0.35rem;
}

.btn-link,
.btn-link:visited{
  text-decoration:none;
  width:max-content;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:.75rem 1rem;
  margin-block:.5rem;
  background-color:hsl(var(--color-white));
  color:hsl(var(--bg-color-dark));
  font-weight:500;
  font-size:0.7rem;
  text-transform:uppercase;
  box-shadow:0 0 0 1px hsla(var(--primary-color),.15);
  transition:box-shadow .075s linear, background-color .075s linear, color .075s linear;
}

.btn-link:hover{
  background-color:hsl(var(--bg-color-dark));
  color:hsl(var(--color-white));
  box-shadow:0 0 0 1px hsla(var(--color-white),1);
}

.token-container{
  width:calc(100% - 1.5rem);
  max-width:calc(100% - 2rem);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  text-align:center;
  font-family:monospace;
  font-weight:900;
  font-size:1rem;
  letter-spacing:.05rem;
  padding:1rem .75rem;
  margin-inline:auto;
  margin-block:.75rem;
  background-color:hsl(var(--color-lightgray));
  color:hsl(var(--ternary-color));
  border-radius:3px;
  border:3px solid hsl(var(--ternary-color),.8);
  cursor:pointer;
  word-break:break-all;
}
.token-container::selection{
  background-color:hsl(var(--primary-color));
  color:hsl(var(--color-white));
}

/* END RESET */

.logo {
  width: 36px;
  height: 36px;
}

.main-nav {
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap:1rem;
  margin: 0;
  padding: 0 0.5rem;
  background-color: hsla(var(--color-light), 0.96);
  box-shadow: 0 4px 4px -2px hsla(var(--color-dark), 0.5);
  /* position: sticky;
  top: 0; */
}

.main-nav-logo {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: hsl(var(--ternary-color));
  cursor: pointer;
}

.main-menu {
  width: max-content;
  display: inline-flex;
  flex-direction:row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;
  list-style: none;
  margin-inline: auto 0;
  padding: 0.25rem 0.5rem;
}

.main-menu-items {
  width: max-content;
  display: inline-flex;
}

.main-menu-links,
.main-menu-links:visited {
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  background-color: inherit;
  color: hsl(var(--ternary-color));
  cursor: pointer;
  transition: color 0.125s ease-out, background-color 0.125s ease-out;
  padding: 0.75rem 0.5rem;
}

.main-menu-links:hover,
.main-menu-links:focus {
  color: hsl(var(--color-light));
  background-color: hsl(var(--bg-color-dark));
}

.main-content {
  width: 100%;
  display: block;
}

.main-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background-color: hsla(var(--color-dark), 0.35);
  color: hsl(var(--color-light));
  padding: 1.5rem 0.5rem;
  box-shadow: 0 2px 2px -1px hsla(var(--color-dark), 0.5);
}

.main-head-title {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25rem 0.5rem;
}

.main-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0.25rem 0.5rem;
}

.main-sections-title {
  margin-block: 1.25rem;
}

.main-articles {
  width: 40rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0.25rem 0.5rem;
  margin-inline:auto;
  margin-block:1.5rem;
}

.main-articles-title {
  width:max-content;
  padding:.75rem 1rem;
  margin-block: 0.25rem 0.75rem;
  border-bottom:1px solid hsla(var(--color-lightgray));
}

.preview-img-container{
  width:400px;
  height:0px;
  -webkit-aspect-ratio:1920/903;
  -moz-aspect-ratio:1920/903;
  -o-aspect-ratio:1920/903;
  aspect-ratio:1920/903;
  display:flex;
  justify-content:stretch;
  align-items:stretch;
  margin-inline:auto;
  padding:0;
}

.preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.grid-articles{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:auto;
  grid-auto-flow:row dense;
  gap:1.5rem;
  margin-block:1.5rem;
  padding:1rem;
}

.grid-articles-title{
  grid-column:1/-1;
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:.25rem;
  text-align:center;
}

.formules-container,
.produit-container,
.formations-container{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:.5rem;
  padding:1.5rem 1rem;
  background-color:hsla(var(--color-dark),.5);
}

.formules-banner-img,
.produit-banner-img,
.formations-banner-img{
  width:100%;
  height:auto;
  -webkit-aspect-ratio:1920/903;
  -moz-aspect-ratio:1920/903;
  -o-aspect-ratio:1920/903;
  aspect-ratio:1920/903;
  object-fit:cover;
  object-position:center;
  background-color:hsl(var(--color-light));
  box-shadow:0 0 1px 1px hsl(var(--color-dark)), 0 0 0 3px hsl(var(--color-light));
  margin:0 auto 32px auto;
}

.formules-title,
.produit-title,
.formations-title{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:.75rem;
}

.grid-articles-btns{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:stretch;
  flex-wrap:wrap;
  gap:1rem;
  margin:auto 0 0 auto;
}

.formules-links,
.formules-links:visited,
.produits-links,
.produits-links:visited,
.formations-links,
.formations-links:visited{
  text-decoration:none;
  min-width:250px;
  width:max-content;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:.5rem;
  margin:0;
  padding:.75rem 1rem;
  border:2px solid hsl(var(--bg-color-dark));
  background-color:hsla(var(--bg-color-dark),.5);
  color:hsl(var(--bg-color-light));
  text-shadow:0 1px 1px hsl(var(--color-dark));
  line-height:1.75;
  font-weight:400;
  font-size:.8rem;
  letter-spacing:.045rem;
  text-transform:uppercase;
  transition:color .125s linear , background-color .125s linear , text-shadow .125s linear , border .125s linear;
}

.produits-links:hover,
.formules-links:hover,
.formations-links:hover{
  border:2px solid hsl(var(--bg-color-dark));
  background-color:hsla(var(--bg-color-dark),1);
  color:hsl(var(--color-white));
}

.price{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.15rem;
  font-size:1rem;
  font-weight:900;
  word-wrap:break-word;
  word-break: break-all;
}

.price-total,
.price-devise{
  font-size:1.25rem;
  font-weight:500;
}

.price-separator{
  font-size:1rem;
  font-weight:400;
}

.price-type{
  font-size:1rem;
  font-weight:500;
  text-transform:none;
}

.pagination-articles{
  grid-column:1/-1;
  width:max-content;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:center;
  flex-wrap:wrap;
  gap:0.15rem;
  margin-inline:auto;
}

.pagination-articles button{
  width:48px;
  height:48px;
  border:none;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.03rem;
  font-family:monospace;
  background-color:hsl(var(--color-white));
  color:hsl(var(--ternary-color));
  box-shadow:none;
  cursor:pointer;
  transition:box-shadow .075s ease-in-out;
}

.pagination-articles button:disabled{
  background-color:hsl(var(--color-lightgray));
  color:hsla(var(--ternary-color),.75);
  box-shadow:inset 0 0 0 2px hsl(var(--bg-color-dark));
}

.pagination-articles button:not(:disabled):hover{
  box-shadow:inset 0 0 0 1px hsl(var(--bg-color-dark));
}

.main-footer {
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  background-color:hsl(var(--color-light));
  color:hsl(var(--bg-color-dark));
  padding: 0.25rem 0.5rem;
}

.main-footer .hidden-links{
  width:max-content;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  margin-inline:auto 0;
  padding:.25rem .5rem;
  color:hsl(var(--bg-color-dark));
  font-size:.75rem;
  font-weight:500;
  cursor:default;
}

@media all and (max-width:860px){
  .grid-articles{
    grid-template-columns:1fr;
  }
}

@media all and (max-width:400px){
  .main-menu{
    margin-inline: auto;
  }
}