/* screen - index */

.index { /* <---- controle du bloc Baleine + Nageoir */
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  display: flex;
  width: 100%;
  height: fit-content;
}

.index .overlap-group1 {
  align-items: flex-end;
  background-image: url(../img/baleine-1.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  height: 664px;
  justify-content: flex-end;
  margin-top: 12px;
  min-width: 1182px;
  padding: 137px 384px;
}

.index .baleine-nageoire-1 {
  cursor: pointer;
  height: 184px;
  opacity: 0;
  transition: all 0.25s ease-in-out;
  width: 272px;
  scale: 100%;
}

.index .baleine-nageoire-1:hover {
  opacity: 1;
  scale: 100%;
}

.index .compagnie-52-hertz-b { /* on sait pas mais on laisse au cas où ça fiche la merde sur les autres pages */
  align-items: flex-start;
  display: flex;
  height: 65px;
  margin-right: 2.0px;
  margin-top: 243px;
  min-width: 244px;
}

@media screen and (max-width: 720px) {

.index { /* <--- Le cadre global */
  display: flex;
  align-items: center;
  justify-content: center; 
  }

.index .overlap-group1 { /* <--- La Baleine */
  display: flex;
  background-image: url(../img/baleine-1.png);
  background-position: 50% 50%;
  background-size: cover;
  justify-content: flex-end;
}

.index .baleine-nageoire-1 { /* <--- La nageoire état 1*/
  cursor: pointer;
  height: 184px;
  opacity: 20%;
  transition: all 0.25s ease-in-out;
  width: 272px;
  scale: 100%;
}
.index .baleine-nageoire-1:hover { /* <--- La nageoire état 1*/
  opacity: 1;
  scale: 100%;
}

.index .compagnie-52-hertz-b { /* on sait pas mais on laisse au cas où ça fiche la merde sur les autres pages */
  align-items: flex-start;
  display: flex;
  height: 65px;
  margin-right: 2.0px;
  margin-top: 243px;
  min-width: 244px;
}

}