/* #region VARIABLES GLOBALES */
:root {
  /* #region inutile */
  /* inutile : ces custom properties sont déjà déclarées dans main.css,
  et copiées collées ici pour activer l'autocompletion dans les IDE. */

  /* couleurs */
  --orange: #E95420;
  --light-aubergine: #77216F;
  --mid-aubergine: #5E2750;
  --dark-aubergine: #2C001E;
  --warm-grey: #AEA79F;
  --cool-grey: #333333;
  --text-grey: #111111;

  --hot-grey:#4b4443;

  /* marges */
  --internal-margin: 1.6rem;
  --external-margin: 2rem;

  /* liens */
  --a-color: var(--orange);
  --a-hover-color: white;
  --a-hover-background-color: var(--orange);
  /* #endregion */

  /* #region couleurs light */
  --sidebar-background: linear-gradient(150deg, var(--mid-aubergine), var(--orange) 200%);
  --download-hover-color: var(--mid-aubergine);
  --footer-background-color: var(--warm-grey);
  /* #endregion */
}
/* #region couleurs dark */
@media screen {
  :root.dark {
    --sidebar-background: linear-gradient(150deg, var(--mid-aubergine), var(--dark-aubergine) 200%);
    --download-hover-color: white;
    --footer-background-color: var(--hot-grey);
    --footer-color:var(--warm-grey);
  }
}
/* #endregion */
/* #endregion */

/* #region GABARIT */
main {
  padding: 0;
}
#page__index main {
  display: grid;
  grid-template-areas: 'content sidebar';
  grid-template-columns: 7fr 4fr;
}
#page__index #content {
  grid-area: content;
  padding: var(--internal-margin);
}
#single {
  padding: var(--internal-margin);
  max-width: 42rem;
  margin: 0 auto;
  text-align: justify;
}
/* #endregion */

/* #region COLONNE */
#sidebar {
  grid-area: sidebar;
  background: var(--sidebar-background);
  padding: var(--internal-margin);
  position: sticky;
  top: calc(4.5rem + 3rem);
  height: calc(100vh - 4.5rem - 3rem);
  overflow-y: auto;
  font-size: .8rem;
}
#sidebar, #sidebar h3, #sidebar li {
  color: rgba(255,255,255,.7);
}
#sidebar a {
  color: white;
}
#sidebar article {
  margin-top: 2rem;
}
#sidebar h2 {
  color: rgba(255,255,255,.85);
  font-size: 1.3rem;
}
#sidebar h3 {
  font-size: 1rem;
}
#sidebar p {
  font-size: .8rem;
}
/* #endregion */

/* #region VARIANTES */
#secvariantes ul {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: calc(var(--internal-margin) / -2);
}
#secvariantes li {
  flex: 1 1 0;
  min-width: 13rem;
  margin: calc(var(--internal-margin) / 2);
}
#secvariantes li:before {
  display: none;
}
/* #endregion */

/* #region CONTENU */
#secubuntu img {
  margin: 1.7rem 0;
}
/* #endregion */

/* #region TELECHARGER */
.call-to-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  gap: 1rem;
}
.call-to-action > div {
  flex-grow: 1;
}
#page__index .call-to-action {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
#page__index .call-to-action:last-child {
  margin-top: 3rem;
  margin-bottom: 4rem;
}
p + .call-to-action {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.call-to-action:hover {
  background-color: transparent;
  color: var(--download-hover-color);
}
.call-to-action:before {
  font-family: font-awesome;
  font-size: 2.5rem;
  line-height: 3rem;
  height: 3rem;
  display: block;
  background-image: linear-gradient(150deg, var(--mid-aubergine), var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.call-to-action:hover:before {
  color: var(--orange);
  -webkit-text-fill-color: unset;
  text-fill-color: unset;
}
.call-to-action.download:before {
  content: '\f019';
}
.call-to-action.resellers:before {
  font-size: 2.2rem;
  content: '\f109';
}
#page_download div.download {
  margin-bottom: 2rem;
}
.download h3 {
  margin-bottom: 0;
}
.download p {
  margin-bottom: 1rem;
}
.download .button {
  padding: .8rem 1.2rem;
  color: white;
  margin-bottom: 0rem;
  display: inline-block;
}
.download .button:before {
  font-family: font-awesome;
  content: '\f019';
  font-size: 1.3rem;
  margin-right: .5rem;
}
.call-to-action:hover:before {
  color: var(--orange);
}
/* #endregion */

/* #region FOOTER */
main > footer {
  background-color: var(--footer-background-color);
  padding: var(--internal-margin);
  margin-top: 2rem;
  text-align: right;
  color: var(--footer-color)
}
main > footer a {
  color: white;
}
main > footer p {
  font-size: .7rem;
}
main > footer p:first-child {
  margin-top: 0;
}
main > footer p:last-child {
  margin-bottom: 0;
}
/* #endregion */

/* #region PHOTOSWIPE */
.pswp .pswp__button {
  background: url(https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
  box-shadow: none;
}
.pswp .pswp__button--close {
  background-position: 0 -44px;
}
.pswp .pswp__button--arrow--left,
.pswp .pswp__button--arrow--right {
  background: none;
}
.pswp .pswp__button--arrow--left:before {
  background-position: -138px -44px;
}
.pswp .pswp__button--arrow--right:before {
  background-position: -94px -44px;
}
html .pswp__bg {
  background-color: #1e1e1e;
}
/* #endregion */

/* #region BREAKPOINTS */
@media (max-width: 600px) {
  #single {
    text-align: left;
  }
  #page__index main {
    grid-template-areas:
      'content'
      'sidebar';
    grid-template-columns: 1fr;
  }
  #sidebar {
    position: relative;
    height: auto;
    top: 0;
  }
  main > footer {
    margin-top: 0;
  }
}
@media (min-width: 601px) and (max-height: 800px) {
  /** smartphone paysage **/
  #sidebar {
    position: sticky;
    top: 3rem;
    height: calc(100vh - 3rem);
  }
}
/* #endregion */