@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html {
  scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0; }

img {
  width: 100%; }

.rose {
  position: relative;
  background-color: #E06196;
  height: 100vh;
  display: grid;
  grid-template-areas: "." "titre" "fleche";
  justify-content: center;
  align-items: center;
  z-index: 1; }

#soleil {
  position: absolute;
  top: 0;
  right: 0; }

.titre {
  grid-area: titre; }

h1 {
  margin: 0;
  font-family: 'Staatliches', cursive;
  font-size: 96px;
  color: #efefef;
  font-weight: 700;
  text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 4px 1px #919191, 1px 5px 1px #919191, 1px 6px 1px #919191, 1px 7px 1px #919191, 1px 8px 1px #919191, 1px 9px 1px #919191, 1px 10px 1px #919191, 1px 18px 6px rgba(16, 16, 16, 0.4), 1px 22px 10px rgba(16, 16, 16, 0.2), 1px 25px 35px rgba(16, 16, 16, 0.2), 1px 30px 60px rgba(16, 16, 16, 0.4); }

.sousTitre {
  font-family: 'Staatliches', cursive;
  font-size: 72px;
  color: #efefef;
  font-weight: 700;
  text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 4px 1px #919191, 1px 5px 1px #919191, 1px 6px 1px #919191, 1px 7px 1px #919191, 1px 8px 1px #919191, 1px 9px 1px #919191, 1px 10px 1px #919191, 1px 18px 6px rgba(16, 16, 16, 0.4), 1px 22px 10px rgba(16, 16, 16, 0.2), 1px 25px 35px rgba(16, 16, 16, 0.2), 1px 30px 60px rgba(16, 16, 16, 0.4);
  display: flex;
  justify-content: center; }

#fleche {
  grid-area: fleche;
  justify-self: center; }

#rainbow {
  position: absolute;
  bottom: 0;
  z-index: -1; }

.donnee {
  background-color: #01243A;
  position: relative; }

#lune {
  position: absolute;
  top: -102px;
  left: -102px; }

h2 {
  padding: 0;
  margin: 0;
  font-family: 'Staatliches', cursive; }

.texteFin {
  padding: 0;
  margin: 0;
  font-family: 'Staatliches', cursive;
  letter-spacing: .1em !important; }

#app {
  margin: 0;
  padding: 0;
  display: grid;
  justify-content: center;
  align-items: center; }

#wrapper {
  text-align: center;
  margin-top: 10%; }

.sub {
  color: #64dcdc;
  letter-spacing: 1em; }

/* Our mixin positions a copy of our text
directly on our existing text, while
also setting content to the appropriate
text set in the data-text attribute. */
.glitch {
  position: relative;
  color: white;
  font-size: 4em;
  letter-spacing: .5em;
  /* Animation provies a slight random skew. Check bottom of doc
  for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse; }
  .glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    /* Creates an initial clip for our glitch. This works in
    a typical top,right,bottom,left fashion and creates a mask
    to only show a certain part of the glitch at a time. */
    clip: rect(44px, 450px, 56px, 0);
    /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
    with an alternating animation to keep things fresh. */
    animation: glitch-anim 5s infinite linear alternate-reverse; }
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse; }

/* Creates an animation with 20 steaps. For each step, it calculates
a percentage for the specific step. It then generates a random clip
box to be used for the random glitch effect. Also adds a very subtle
skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
  0% {
    clip: rect(74px, 9999px, 8px, 0);
    transform: skew(0.62deg); }
  5% {
    clip: rect(22px, 9999px, 28px, 0);
    transform: skew(0.37deg); }
  10% {
    clip: rect(80px, 9999px, 71px, 0);
    transform: skew(0.39deg); }
  15% {
    clip: rect(29px, 9999px, 98px, 0);
    transform: skew(0.46deg); }
  20% {
    clip: rect(30px, 9999px, 27px, 0);
    transform: skew(0.05deg); }
  25% {
    clip: rect(74px, 9999px, 94px, 0);
    transform: skew(0.89deg); }
  30% {
    clip: rect(2px, 9999px, 59px, 0);
    transform: skew(1deg); }
  35% {
    clip: rect(97px, 9999px, 67px, 0);
    transform: skew(0.33deg); }
  40% {
    clip: rect(93px, 9999px, 21px, 0);
    transform: skew(0.33deg); }
  45% {
    clip: rect(18px, 9999px, 91px, 0);
    transform: skew(0.52deg); }
  50% {
    clip: rect(11px, 9999px, 7px, 0);
    transform: skew(0.83deg); }
  55% {
    clip: rect(33px, 9999px, 15px, 0);
    transform: skew(0.66deg); }
  60% {
    clip: rect(93px, 9999px, 79px, 0);
    transform: skew(0.78deg); }
  65% {
    clip: rect(44px, 9999px, 58px, 0);
    transform: skew(0.78deg); }
  70% {
    clip: rect(36px, 9999px, 34px, 0);
    transform: skew(0.73deg); }
  75% {
    clip: rect(57px, 9999px, 70px, 0);
    transform: skew(0.45deg); }
  80% {
    clip: rect(28px, 9999px, 63px, 0);
    transform: skew(0.81deg); }
  85% {
    clip: rect(100px, 9999px, 1px, 0);
    transform: skew(0.61deg); }
  90% {
    clip: rect(4px, 9999px, 18px, 0);
    transform: skew(0.68deg); }
  95% {
    clip: rect(41px, 9999px, 55px, 0);
    transform: skew(0.45deg); }
  100% {
    clip: rect(100px, 9999px, 1px, 0);
    transform: skew(0.29deg); } }
@keyframes glitch-anim2 {
  0% {
    clip: rect(27px, 9999px, 54px, 0);
    transform: skew(0.68deg); }
  5% {
    clip: rect(95px, 9999px, 35px, 0);
    transform: skew(0.19deg); }
  10% {
    clip: rect(35px, 9999px, 14px, 0);
    transform: skew(0.48deg); }
  15% {
    clip: rect(50px, 9999px, 88px, 0);
    transform: skew(0.22deg); }
  20% {
    clip: rect(93px, 9999px, 98px, 0);
    transform: skew(0.16deg); }
  25% {
    clip: rect(43px, 9999px, 22px, 0);
    transform: skew(0.47deg); }
  30% {
    clip: rect(34px, 9999px, 81px, 0);
    transform: skew(0.55deg); }
  35% {
    clip: rect(65px, 9999px, 87px, 0);
    transform: skew(0.58deg); }
  40% {
    clip: rect(84px, 9999px, 79px, 0);
    transform: skew(0.04deg); }
  45% {
    clip: rect(56px, 9999px, 100px, 0);
    transform: skew(0.07deg); }
  50% {
    clip: rect(32px, 9999px, 88px, 0);
    transform: skew(0.99deg); }
  55% {
    clip: rect(82px, 9999px, 82px, 0);
    transform: skew(0.56deg); }
  60% {
    clip: rect(89px, 9999px, 38px, 0);
    transform: skew(0.76deg); }
  65% {
    clip: rect(46px, 9999px, 62px, 0);
    transform: skew(0.39deg); }
  70% {
    clip: rect(21px, 9999px, 100px, 0);
    transform: skew(0.97deg); }
  75% {
    clip: rect(28px, 9999px, 67px, 0);
    transform: skew(0.03deg); }
  80% {
    clip: rect(67px, 9999px, 53px, 0);
    transform: skew(0.6deg); }
  85% {
    clip: rect(69px, 9999px, 66px, 0);
    transform: skew(0.18deg); }
  90% {
    clip: rect(81px, 9999px, 75px, 0);
    transform: skew(0.28deg); }
  95% {
    clip: rect(59px, 9999px, 36px, 0);
    transform: skew(0.57deg); }
  100% {
    clip: rect(74px, 9999px, 34px, 0);
    transform: skew(0.04deg); } }
@keyframes glitch-skew {
  0% {
    transform: skew(-3deg); }
  10% {
    transform: skew(-4deg); }
  20% {
    transform: skew(-1deg); }
  30% {
    transform: skew(-3deg); }
  40% {
    transform: skew(5deg); }
  50% {
    transform: skew(4deg); }
  60% {
    transform: skew(-3deg); }
  70% {
    transform: skew(-3deg); }
  80% {
    transform: skew(-2deg); }
  90% {
    transform: skew(-2deg); }
  100% {
    transform: skew(3deg); } }
h3 {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 48px;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 10vh;
  margin-left: 0dvw;
  margin-bottom: 0; }

.titreEchelle {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 24px;
  display: flex;
  justify-content: center;
  text-align: center; }

.consommateurs {
  margin-bottom: 40px; }

.sousTitreH3 {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 24px;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 5%; }

.seringues {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  column-gap: 10dvw;
  row-gap: 5dvh;
  margin-left: 0;
  margin-right: 0; }

.chaqueSeringue {
  display: flex;
  flex-direction: column;
  text-align: center; }

.seringueSVG {
  position: relative; }

.tooltip {
  position: absolute;
  bottom: 32%;
  left: 100%;
  display: none;
  background-color: rgba(108, 108, 108, 0.64);
  padding: 8%;
  border: 4px solid #282828;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  color: white; }

.flexLigne {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px; }

.chaqueSeringue:hover .tooltip, .chaqueSeringue:active .tooltip {
  display: block; }

.titreSeringue {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 28px;
  font-weight: bold; }

.legendeSeringues {
  display: flex;
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 24px;
  gap: 15px;
  justify-content: center;
  align-items: center;
  margin-top: 4%; }

.legendeUne {
  background-color: #B300A1;
  width: 80px;
  height: 40px; }

.legendeUnePetite {
  background-color: #B300A1;
  width: 20px;
  height: 20px; }

.legendeDeux {
  background-color: #DA4E00;
  width: 80px;
  height: 40px; }

.legendeDeuxPetite {
  background-color: #DA4E00;
  width: 20px;
  height: 20px; }

.bonhommes {
  margin-left: 0;
  margin-right: 0; }

.hommes {
  display: flex;
  gap: 2%; }

.femmes {
  display: flex;
  position: relative;
  bottom: 20vh;
  gap: 6%; }

.texteBohnommes {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 48px;
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 15px;
  margin-bottom: 20vh; }

.texteBohnommes b {
  font-weight: bold; }

.finLine {
  display: flex;
  align-items: center; }

.finLine p {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 48px;
  margin-right: 10px;
  margin-left: 8px; }

.finCentre {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center; }

.finCentre p {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 48px;
  margin: 0; }

div.finLine:nth-child(1) {
  margin-bottom: 25vh; }

div.finLine:nth-child(3) {
  justify-content: flex-end;
  margin-top: 25vh; }

footer {
  display: flex;
  justify-content: space-between;
  background-color: #01243A;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  padding: 10px; }

@media screen and (min-width: 1081px) and (max-width: 1200px) {
  .bonhommes {
    margin-left: 5%;
    margin-right: 5%; }

  .seringues {
    margin-left: 5%;
    margin-right: 5%; } }
@media screen and (max-width: 1080px) {
  .rose {
    height: 100dvh; }

  .seringues {
    grid-template-columns: repeat(2, auto);
    column-gap: 20dvw;
    margin-right: 5dvw; }

  footer {
    font-size: 20pt; }

  .femmes {
    bottom: 5dvh; }

  .texteBohnommes {
    margin-bottom: 5dvh; }

  .finLine {
    margin-left: 5%;
    margin-right: 5%; }

  .bonhommes {
    margin-left: 5%;
    margin-right: 5%; }

  .glitch {
    animation: none; }
    .glitch::before {
      animation: none; }
    .glitch::after {
      left: 0;
      animation: none; } }
@media screen and (max-width: 600px) {
  .rose {
    height: 100dvh; }

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

  footer {
    font-size: 20pt; }

  .femmes {
    bottom: 5dvh; }

  .texteBohnommes {
    margin-bottom: 5dvh; }

  .finLine {
    margin-left: 5%;
    margin-right: 5%; }

  .bonhommes {
    margin-left: 5%;
    margin-right: 5%; }

  .glitch {
    animation: none; }
    .glitch::before {
      animation: none; }
    .glitch::after {
      left: 0;
      animation: none; } }

/*# sourceMappingURL=style.css.map */