/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!! TYPOGRAPHIE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*
 *Police fluide
 */

html {
  width: 100%;
  height: calc(100vh - var(--h-diff, 0) * 1px);
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  --min-font: 1.1; /* rem */
  --max-font: 1.2; /* rem */
  --min-screen: 60; /* 960px si 1rem = 16px */
  --max-screen: 80; /* 1280px si 1rem = 320px */
  font-size: calc(1rem * var(--min-font));
  --mod: 1.130;
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

@media screen and (min-width: 60rem) {
  html {
    font-size: calc(1rem * var(--min-font) + (var(--max-font) - var(--min-font)) * ((100vw - 1rem * var(--min-screen)) / (var(--max-screen) - var(--min-screen))));
    --mod: 1.333;
  }
}

@media screen and (min-width: 80rem) {
  html {
    font-size: calc(1rem * var(--max-font));
    --mod: 1.333;
  }
}

@media screen and (min-width: 125rem) {
  html {
    font-size: calc(0.2rem + 1.8vh);
  }
}



/*
 * Headings
 */

h1, h2, h3, h4, h5, h6 {
  display: inline;
  margin: 0;
  font-weight: 400;
}

h1, .h1 {
  font-size: calc(var(--mod) * var(--mod) * var(--mod) * var(--mod) * 1rem);
}

h2, .h2 {
  font-size: calc(var(--mod) * var(--mod) * var(--mod) * 1rem);
}

h3, .h3 {
  font-size: calc(var(--mod) * var(--mod) * 1rem);
}

h4, .h4 {
  font-size: calc(var(--mod) * 1rem);
}

h5, .h5 {
  font-size: 1rem;
}

h6, .h6 {
  font-size: calc(1rem / var(--mod));
}

.h5 {
  line-height: 1.6em;
}





/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!! LAYOUT GLOBAL !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

body {
  width: 100vw;
  min-height: 100vh;
  --max-width: 117rem;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: var(--article-color, var(--default-color));
  display: flex;
  flex-direction: column;
  /*margin: 0;*/
  padding: 0;
  font-weight: 400;
  color: white;
  transition: transform .1s ease-out;

  --hauteur-header-text: calc(1.2 * var(--mod) * var(--mod) * (var(--mod) * var(--mod) * 1rem + 1rem));
  --hauteur-header-socials: calc(1.7rem + 2 * .25rem + .5rem);
  --hauteur-header: calc(var(--hauteur-header-text) + var(--hauteur-header-socials) + 2 * 2.4rem + 1.2rem); /* + #intro padding-block + #intro gap */

  --hauteur-footer: 2.4rem;
}

@media screen and (max-width: 620px) {
  body {
    min-height: 100%;
    background-color: var(--projet-color, var(--article-color, var(--default-color)));
  }
}

/* Bref écran de chargement */

#loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: grid;
  background: var(--load-color);
  grid-template-columns: 1fr 12vmin 1fr;
  pointer-events: none;
  opacity: calc(0 - var(--h-diff, -1));
  transition: opacity .1s var(--easing-decelerate);
}

/* Transition colorée animée entre articles */

#couleur {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: top left;
}



/*
 * Contenu principal
 */

main {
  background-color: transparent;
  position: relative;
  z-index: 3;
  padding: 2.4rem 1.2rem var(--hauteur-footer) 1.2rem;
  box-sizing: border-box;
  display: none;
  --hauteur: var(--hauteur-header);
  margin-top: var(--hauteur);
  pointer-events: none;
  width: 100vw;
  max-width: var(--max-width);
}

@media screen and (max-width: 620px) {
  main {
    --hauteur: calc(var(--intro-height) + 3rem + var(--navlinks-height));
    margin-top: var(--hauteur);
    padding: 1.2rem;
    padding-bottom: calc(.6rem + var(--hauteur-footer));
  }
}

body:not([data-section-actuelle=""]) main {
  display: block;
  pointer-events: all;
}



/*
 * Articles & leurs sections
 */

main > article {
  display: none;
}

@keyframes article-appears {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

body[data-section-actuelle=""] #accueil,
body[data-section-actuelle="bio"] #bio,
body[data-section-actuelle="portfolio"] #portfolio {
  display: grid;
  animation: article-appears 150ms var(--easing-decelerate);
  animation-fill-mode: backwards;
  animation-delay: 400ms;
}

body.start main > article {
  animation: none !important;
}

section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

main section {
  padding: 0;
}

#accueil {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}



/*
 * Paragraphes, titres, liens et icônes
 */

p {
  margin: 0;
}

p + p {
  margin-top: 1rem;
}

h4.sous-section {
  --teinte: rgba(255, 255, 255, .12);
  background-color: var(--teinte);
  box-shadow: -5rem 0 0 0 var(--teinte);
  font-weight: 400;
  margin: 0 0 1.2rem 0;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 0;
  padding-right: 0.7em;
  align-self: flex-start;
}

a:link,
a:hover,
a:focus,
a:active,
a:visited {
  color: white;
  text-decoration: none;
}

i.svg {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  z-index: 1;
}





/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!! HEADER !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

header {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: var(--max-width);
  height: 100vh;
  display: grid;
  grid-template-columns: [bg-start intro-start] 1fr [intro-end bg-end navlinks-start] 1fr [navlinks-end];
  grid-template-rows: [bg-start] var(--intro-margin, 1fr) [intro-start navlinks-start] var(--hauteur-header) [navlinks-end intro-end] var(--intro-margin, 1fr) [bg-end] var(--article-margin, 0fr);
  backface-visibility: hidden;
  transition-property: grid-template-rows;
  transition-duration: .3s;
  transition-timing-function: var(--easing-standard);
}

body:not([data-section-actuelle=""]) header {
  --intro-margin: 0fr;
  --article-margin: 1fr;
}

header > .background {
  grid-area: bg;
  background: rgba(0, 0, 0, .5);
  backface-visibility: hidden;
  transform-origin: top center;
  position: relative;
}



/*
 * Informations personnelles
 */

#intro {
  grid-area: intro;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  gap: 1.2rem;
  padding-block: calc(2.4rem - 1.2rem); /* <main> padding-top - #intro gap */
  grid-template-columns: 100%;
}

.moi {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: 1rem 1fr 1rem;
  grid-template-rows: 1fr;
  position: relative;
}

.vraiment-moi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.nom, .job {
  font-family: 'Raleway', sans-serif;
}



/*
 * Liens de contact
 */

#liens_contact {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: -.5rem; /* - #liens_contact>a margin-bottom */
}

#liens_contact>h3 {
  display: none;
  visibility: hidden;
  margin: 0 1vmin;
}

#liens_contact>a {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.25rem;
  margin: 0.5rem;
  --social-color: black;
  --article-color: var(--social-color);
  background-color: var(--social-color);
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  transition: box-shadow .1s linear, background-color .1s ease-in;
  backface-visibility: hidden;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#liens_contact>a.selected, #liens_contact>a.selected:hover, #liens_contact>a.selected:active {
  box-shadow: none;
  transition: none;
  background-color: transparent;
  cursor: auto;
  --image: url('/mon-portfolio/images/social/email_selected.svg') !important;
}

#liens_contact>a.selected::before {
  background-color: transparent;
}


/*
 * Mobile
 */

 @media screen and (max-width: 620px) {
  body {
    --intro-height: calc(3.4rem + 1.6rem + 3rem);
    --navlinks-height: var(--intro-height);
  }

  body:not([data-section-actuelle=""]) {
    --intro-height: calc(2.4rem + 3.4rem + 1.6rem + 3rem);
    --navlinks-height: 3rem;
  }

  header {
    height: 100svh;
    grid-template-columns: [bg-start intro-start navlinks-start] 1fr [navlinks-end intro-end bg-end];
    grid-template-rows: [bg-start] var(--intro-margin, 1.5rem) var(--intro-margin, 1fr) [intro-start] var(--intro-height) [intro-end] var(--intro-margin, 1fr) 3rem [bg-end] var(--intro-margin, 1fr) [navlinks-start] var(--navlinks-height) [navlinks-end] var(--intro-margin, 1fr) var(--article-margin, 0fr) var(--intro-margin, 1.5rem);
  }

  header > .background {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 calc(100% - .5rem));
  }

  /* Informations personnelles */

  #intro {
    justify-content: flex-end;
    grid-template-rows: 1fr 3.4rem 1.6rem 3rem;
    gap: 0;
    padding-block: 0;
    align-self: end;
  }

  body:not([data-section-actuelle=""]) #intro {
    bottom: 0;
  }

  /* Liens de contact */

  #liens_contact {
    grid-row: 4 / 5;
    margin-bottom: 0;
  }
}



/*
 * Boutons de changement de langue
 */

@keyframes appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

footer {
  display: grid;
  align-items: center;
  --logo-width: 4.8rem;
  grid-template-columns: var(--logo-width) 1fr auto 1fr var(--logo-width);
  gap: .6rem;
  justify-content: end;
  position: absolute;
  z-index: 4;
  bottom: 0;
  width: 100%;
  height: var(--hauteur-footer);
  box-sizing: border-box;
  padding-inline: 2.4rem;
  animation: appear .2s var(--easing-decelerate);
  --easing-enthusiastic: cubic-bezier(.4, 0, .1, 1.6);
}

.groupe-langages {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  align-items: center;
}

body:not([data-section-actuelle=""]) .groupe-langages {
  gap: 1.2rem;
}

.bouton-langage {
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: white;
  font-family: inherit;
  text-wrap: nowrap;
  cursor: pointer;
  padding: .4rem 0;
  opacity: .5;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  position: relative;
  justify-self: start;
}

.bouton-langage:first-child {
  justify-self: end;
}
.bouton-langage:last-child {
  justify-self: start;
}

html[lang="fr"] .bouton-langage[data-lang="fr"],
html[lang="en"] .bouton-langage[data-lang="en"],
.bouton-langage:disabled {
  background-color: transparent;
  text-decoration: none;
}

html[lang="fr"] .bouton-langage[data-lang="fr"]::before,
html[lang="en"] .bouton-langage[data-lang="en"]::before,
.bouton-langage:disabled::before {
  content: '✓';
  display: inline-block;
  margin-right: .5ch;
  margin-block: -.5ch;
}

.bouton-langage:is(:link, :hover, :focus, :active, :visited) {
  text-decoration: underline;
  cursor: pointer;
}

footer.off {
  display: none;
}

@keyframes blinking-twice {
  0% { scale: 1 1; }
  20% { scale: 1 0; }
  40% { scale: 1 1; }
  60% { scale: 1 1; }
  80% { scale: 1 0; }
  100% { scale: 1 1; }
}

@keyframes blinking-once {
  0% { scale: 1 1; }
  2% { scale: 1 0; }
  4% { scale: 1 1; }
  100% { scale: 1 1; }
}

.logo-container {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--left-col, 1fr) [logo] var(--logo-width) var(--right-col, 0fr);
  transition: grid-template-columns .1s var(--easing-standard);
}

footer svg {
  grid-column: logo;
  justify-self: end;
  width: var(--logo-width);
  margin-inline: calc(-0.033 * var(--logo-width));
  transform: translateY(calc(var(--hauteur-footer) + 2px));
  transition: transform .2s var(--easing-accelerate);
}

footer svg .text {
  fill: rgb(255, 255, 255, .3);
}

body[data-section-actuelle="bio"] .logo-container {
  --left-col: 0fr;
  --right-col: 1fr;
}

body[data-section-actuelle="bio"] footer svg {
  justify-self: start;
}

body[data-section-actuelle="bio"] footer {
  justify-content: start;
}

body[data-section-actuelle=""] footer svg {
  display: none;
}

footer.visible svg {
  transform: translateY(0);
  transition-timing-function: var(--easing-enthusiastic);
  transition-duration: 300ms;
}

footer.visible svg #eye {
  animation: blinking-twice 700ms linear;
  animation-delay: 900ms;
}

@media (hover: none) {
  footer:active svg {
    transform: translateY(0);
    transition-delay: 300ms;
    transition-timing-function: var(--easing-enthusiastic);
    transition-duration: 300ms;
  }

  footer:active svg #eye {
    animation: blinking-once 7000ms linear;
    animation-delay: 900ms;
    animation-iteration-count: infinite;
  }

  footer.touched-left {
    justify-content: end !important;
  }

  footer.touched-right {
    justify-content: start !important;
  }

  footer.touched-left .logo-container {
    --left-col: 1fr !important;
    --right-col: 0fr !important;
  }

  footer.touched-left svg {
    justify-self: end !important;
  }

  footer.touched-right .logo-container {
    --left-col: 0fr !important;
    --right-col: 1fr !important;
  }

  footer.touched-right svg {
    justify-self: start !important;
  }
}

@media (hover: hover) {
  footer:hover svg {
    transition-delay: 100ms;
    transform: translateY(0);
    transition-timing-function: var(--easing-enthusiastic);
    transition-duration: 300ms;
  }

  footer:hover svg #eye {
    animation: blinking-once 7000ms linear;
    animation-delay: 1000ms;
    animation-iteration-count: infinite;
  }

  footer:active svg #eye {
    animation: blinking-twice 700ms linear;
    animation-delay: 0ms;
    animation-iteration-count: initial;
  }
}



/*
 * Mobile
 */

@media screen and (max-width: 620px) {
  footer {
    padding-inline: 1.2rem;
  }

  body:not([data-section-actuelle=""]) footer {
    padding-top: 0;
    padding-bottom: 0;
  }

  body[data-section-actuelle=""] footer {
    justify-content: center;
  }

  .groupe-langages {
    grid-template-columns: repeat(2, auto);
  }

  body:not([data-section-actuelle=""]) .groupe-langages,
  body[data-section-actuelle=""] .groupe-langages {
    gap: 1.2rem;
  }

  .bouton-langage {
    width: auto;
  }
}





/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!! NAVIGATION !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  grid-area: navlinks;
  width: 100%;
}

@supports not (clip-path: circle(1%)) {
  nav {
    justify-content: space-around;
  }
}

nav>a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--article-color);
  padding: 0.2rem 1rem;
  transition: box-shadow .1s linear, opacity .05s linear;
  backface-visibility: hidden;
  position: relative;
  opacity: .85;
  cursor: pointer;
  flex-shrink: 0;
}

nav>a>h3 {
  z-index: 1;
}

.underline {
  display: inline-block;
  content: "";
  width: calc(100% - 2rem);
  height: 2px;
  background: white;
  transform: scaleX(var(--underline-scale, 0));
  transition: transform .15s ease-out;
  position: absolute;
  left: 1rem;
  bottom: 0;
  z-index: 0;
  backface-visibility: hidden;
}

body[data-section-actuelle=""] #nav_accueil,
body[data-section-actuelle="bio"] #nav_bio,
body[data-section-actuelle="portfolio"] #nav_portfolio {
  opacity: 1;
  cursor: auto;
  --underline-scale: 1;
}

body[data-section-actuelle=""] nav > a {
  opacity: 1;
}

nav > a:hover, nav > a:active {
  opacity: 1 !important;
  z-index: 5;
}

.nav > i,
#nav_accueil > i {
  pointer-events: none;
}



/*
 * Boutons expansibles
 */

.expandable {
  position: relative;
  --couleur: var(--article-color);
}

.expandable::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--couleur);
  transform-origin: center center;
  transform: scale(1);
  transition: transform .12s ease-out;
}

.expandable:hover::before {
  transform: scale(1.2, 1.2);
}

.expandable:not(.nav):active::before {
  transform: scale(1.1, 1.1);
}

nav .expandable:hover::before {
  transform: scale(1.1, 1.2);
}

nav .expandable:not(.nav):active::before {
  transform: scale(1.05, 1.1);
}



/*
 * Boutons de retour à l'accueil
 */

#nav_accueil {
  display: flex;
  fill: white;
  grid-row: 1 / -1;
  grid-column: 1;
  margin: 1rem;
  align-self: center;
  justify-self: start;
  cursor: pointer;
  position: relative;
  z-index: 5;
  animation: appear .15s linear;
  animation-fill-mode: backwards;
  animation-delay: .3s;
}

body[data-section-actuelle=""] #nav_accueil {
  display: none;
  opacity: 0;
}

#nav_accueil>i {
  opacity: .3;
}



/*
 * Bouton de contact
 */

#nav_contact {
  position: relative;
}

#nav_contact>.underline {
  width: calc(100% - 0.4rem);
  left: 0.2rem;
}

#nav_contact.selected:hover::before, #nav_contact.selected:active::before {
  transform: scale(1);
}



/*
 * Mobile
 */

@media (hover: none) {
  /* Boutons expansibles */

  .expandable:hover::before {
    transform: scale(1);
  }

  .expandable:not(.nav):active::before {
    transform: scale(1);
  }

  nav > a::before {
    transition: none;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

@media screen and (max-width: 620px) {
  :root {
    --easing-navlinks: var(--easing-standard);
    --duration-navlinks: .3s;
  }

  :root:has(body[data-section-actuelle=""]) {
    --easing-navlinks: var(--easing-standard);
    --duration-navlinks: .2s;
  }

  nav {
    align-items: center;
    height: 3rem;
    margin: unset;
    position: relative;
    align-self: center;
  }

  body[data-section-actuelle=""] nav {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: 1fr;
    gap: 1.8rem;
    width: fit-content;
    height: auto;
    margin: 0 auto;
  }

  #nav_bio {
    view-transition-name: nav_bio;
  }

  #nav_portfolio {
    view-transition-name: nav_portfolio;
  }

  @keyframes view-transition-new-visible {
    from { opacity: 1; }
  }

  ::view-transition-group(nav_bio),
  ::view-transition-group(nav_portfolio) {
    animation-duration: var(--duration-navlinks);
    animation-timing-function: var(--easing-navlinks);
  }

  ::view-transition-new(nav_bio),
  ::view-transition-new(nav_portfolio) {
    animation-name: view-transition-new-visible;
  }

  nav > a {
    padding: .4rem 1rem;
  }

  @keyframes rotate {
    from { transform: rotate(0deg) }
    to { transform: rotate(90deg) }
  }

  .underline {
    bottom: .2rem;
  }

  #nav_contact>.underline {
    bottom: 0;
  }

  /* Boutons de navigation */

  #nav_accueil {
    align-self: center;
    justify-self: center;
    grid-row: 1;
    grid-column: 1 / -1;
    margin: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
  }

  body:not([data-section-actuelle=""]) #nav_bio,
  body:not([data-section-actuelle=""]) #nav_portfolio {
    transform: translate3D(0, 0, 0);
  }

  body:not([data-section-actuelle=""]) #nav_portfolio::before {
    transform: scale(1);
  }

  body:not([data-section-actuelle=""]) #liens_contact > a {
    opacity: .85;
  }

  body:not([data-section-actuelle=""]) #liens_contact > a.selected {
    opacity: 1;
  }

  #liens_contact > a:hover,
  #liens_contact > a:active {
    opacity: 1 !important;
  }
}





/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!! LAZY LOADING !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@keyframes background_loading {
  0% { background-color: rgba(0, 0, 0, .3); }
  50% { background-color: rgba(0, 0, 0, .3); }
  75% { background-color: rgba(0, 0, 0, .2); }
  100% { background-color: rgba(0, 0, 0, .3); }
}

.loading {
  animation: background_loading 2s ease-out calc(0.5s + (var(--n, 0) - var(--nmax, 0)) * 0.1s) infinite;
}

.loaded {
  animation: none;
}

.loaded .actual-image {
  background-image: var(--image);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1);
}





/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!! ACCESSIBILITÉ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::-moz-selection {
  color: black;
  background: white;
}
::selection {
  color: black;
  background: white;
}
input::selection,
textarea::selection {
  color: white;
  background: black;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  ::view-transition-group(*) {
    animation: none !important;
    transition: none !important;
  }
}