@media only screen and (min-width: 700px) {
  .asso-1{
    padding-left:10%;
    padding-right:10%;
    display: grid;
    grid-template-columns: 15% 85%;
    grid-template-rows: 100%;
    width:80%;
    }
    .corail-anime{
    background-color: #fff;
    color: #00C2FA;
    display: inline-grid;
    font-family: 'riffic-bold', Arial, sans-serif;
    font-size: 100%;
    margin: 0px;
    width:100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    grid-column: 1/2;
    grid-row: 1/2;
    }

    .corail-anim *{
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.45s ease;
      transition: all 0.45s ease;
  }

  .corail-anim:after{
    background-color: #359ad8;
    height: 150%;
    bottom: -145%;
    content: '';
    left: 0;
    right: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }

  .img-r
  {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 1/2;

  }
  .img-r>figure>img
  {
    width:150px;
    vertical-align: top;
    backface-visibility: hidden;
    margin:auto;
  }


  .text-l{
    display: grid;
    text-align: justify;
    grid-column: 2 / 3;
    grid-row: 1/2;
  }

  .asso-titre{
    text-align : center;
    font-size: 130%;
    color:#FFB300;
    font-family: 'riffic-bold', Arial, sans-serif;
      margin-bottom: 50px;
  }

  .asso-texte-r{
    text-align: right;
    font-size: 100%;
  }

  .asso-texte-l{
    text-align: justify;
    font-size: 100%;
  }
  main{
    font-family: "Helvetica";
    color: black;
  }

  .corail-anime figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1em;
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .corail-anime:hover > img,
  .corail-anime.hover > img {
    opacity: 0.1;
  }

  .corail-anime:hover:after,
  .corail-anime.hover:after {
    bottom: 95%;
  }

  .corail-anime:hover figcaption,
  .corail-anime.hover figcaption {
    opacity: 1;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .header{
    z-index: 2;
  }

  .axes-titre{
    text-align:center;
    grid-row: 1/2;
    grid-column: 1/4;
    padding:2%;
    border-bottom : 4px solid white;
    font-family: 'riffic-bold', Arial, sans-serif;
    font-size: 130%;
  }

  .axes-colonnes{
    display:grid;
    grid-template-columns: 33% 33% 33%;
    margin-left:10%;
    margin-right: 10%;
    font-size: 100%;


  }
  .axes-image-1{
    text-align:center;
    grid-row:2/3;
    grid-column:1/2;
    display:inline-block;
    margin:auto;
    width:50%;
    border-radius: 50%;
    transition: all 0.3s ease-in-out 0s;}

  .axes-image-1:hover {
    transform: rotate(360deg);
  }

  .axes-image-2{
    text-align:center;
    grid-row:2/3;
    grid-column:2/3;
    display:inline-block;
    margin:auto;
    width:50%;
    border-radius: 50%;
    transition: all 0.3s ease-in-out 0s;}

  .axes-image-2:hover {
    transform: rotate(360deg);
  }


  .axes-image-3{
    text-align:center;
    grid-row: 2/3;
    grid-column:3/4;
    display:inline-block;
    margin:auto;
    width:50%;
    border-radius: 50%;
    transition: all 0.3s ease-in-out 0s;}

  .axes-image-3:hover {
    transform: rotate(360deg);}


  .axes-colonnes-1{
    grid-column: 1/2;
    grid-row: 3/4;
      font-size: 90%;
      text-align: justify;
      margin:2%;
      column-width: 350px;
      font-weight: bold;

  }

  .axes-colonnes-2{
    grid-column: 2/3;
    grid-row: 3/4;
      font-size: 90%;
      text-align: justify;
      margin:2%;
      column-width: 350px;
      font-weight: bold;

  }

  .axes-colonnes-3{
    grid-column: 3/4;
    grid-row: 3/4;
      font-size: 90%;
      text-align: justify;
      margin:2%;
      column-width: 350px;
      font-weight: bold;

  }

  .asso-axes{
    display:grid;
    /*grid-column-gap: 2%;*/
    background-color: #FFB300;
    color:white;
    margin-left: 10%;
    margin-right:10%;
    padding-left:2%;
    padding-right:2%;
    margin-top: 2%;
    max-width: 80%;

  }

  .asso-2{
    margin-top: 2%;
    padding-left:10%;
    padding-right:10%;
    display: grid;
    grid-template-columns: 85% 15%;
    grid-template-rows: 100%;
    }
    .koural-anime{
    background-color: #fff;
    color: #00C2FA;
    display: inline-grid;
    font-family: 'riffic-bold', Arial, sans-serif;
    font-size: 100%;
    margin: 0px;
    width:100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    grid-column: 2/3;
    grid-row: 1/2;
    }

    .koural-anim *{
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.45s ease;
      transition: all 0.45s ease;
  }

  .koural-anim:after{
    background-color: #359ad8;
    height: 150%;
    bottom: -145%;
    content: '';
    left: 0;
    right: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }

  .img2-r
  {
    display: grid;
    grid-column: 2 / 3;
    grid-row: 1/2;

  }
  .img2-r>figure>img
  {
    width:100%;
    vertical-align: top;
    backface-visibility: hidden;
  }


  .text-2{
    display: grid;
    text-align: justify;
    grid-column: 1 / 2;
    grid-row: 1/2;
  }

  .asso2-titre{
    text-align : center;
  }

  .asso2-texte-r{
    text-align: right;
    font-size: 100%;
  }

  .asso2-texte-l{
    text-align: justify;
    font-size: 100%;
  }

  .koural-anime figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1em;
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }



  .koural-anime:hover > img,
  .koural-anime.hover > img {
    opacity: 0.1;
  }

  .koural-anime:hover:after,
  .koural-anime.hover:after {
    bottom: 95%;
  }

  .koural-anime:hover figcaption,
  .koural-anime.hover figcaption {
    opacity: 1;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

}

/*----------Mur image équipe------------*/
.descriptionmembre{
  font-size: 90%;
  margin-left: 2%;
  min-height: 200px;
  display:block;
}


.descriptionmembre img {
  max-height: 200px;
  max-width: 200px;
  border-radius: 0% 50% 0% 50%;
  float:left;
  margin-right: 20px;
}

.membre_nom{
  color:#00C2FA;
  margin:0;
  display:inline;

}
.membre_description{
  color:black;
  margin:0;
  padding-left: 10px;
  padding-top : 10px;
  text-align: justify;

}

.asso-team{
  border-style: dotted none none none;
  border-color: #FFB300;
  border-width: 10px;
  margin-left:10%;
  margin-right:10%;
  margin-top:2%;
  margin-bottom:2%;
  padding-top:2%;
}

.asso-project{
  border-style: dotted none none none;
  border-color: #FFB300;
  border-width: 10px;
  margin-left:10%;
  margin-right:10%;
  margin-top:2%;
  margin-bottom:2%;
  padding-top:2%;
}




/* Utilities */
.auto-grid {
  display: grid;
  padding :2%;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--auto-grid-min-size, 12rem), 1fr)
  );
  grid-gap: var(--auto-grid-gap, 2rem);


}

.auto-grid>li{
  list-style-type: none;


}

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

.flow>p{
  text-align: center;
}

/* Composition */
.team {
  --flow-space: 2em;

  max-width: 100%;
}

/* Blocks */
.profile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1/1;
  position: relative;
  padding: 1.8rem;
  color: #ffffff;
  backface-visibility: hidden;
  text-decoration: none;
  overflow: hidden;
  border-radius: 50%;

}

.profile::before,
.profile::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  /*inset: 0;*/
  top: 0;
  left: 0;
}

.profile::before {
  background: linear-gradient(
    to top,
    hsl(0 0% 0% / 0.5) 0%,
    /*hsl(0 0% 0% / 0.787) 7.8%,
    hsl(0 0% 0% / 0.779) 14.4%,
    hsl(0 0% 0% / 0.765) 20.2%,
    hsl(0 0% 0% / 0.744) 25.3%,
    hsl(0 0% 0% / 0.717) 29.9%,
    hsl(0 0% 0% / 0.683) 34.3%,
    hsl(0 0% 0% / 0.641) 38.7%,
    hsl(0 0% 0% / 0.592) 43.3%,
    hsl(0 0% 0% / 0.534) 48.4%,
    hsl(0 0% 0% / 0.468) 54.1%,
    hsl(0 0% 0% / 0.393) 60.6%,
    hsl(0 0% 0% / 0.31) 68.3%,
    hsl(0 0% 0% / 0.216) 77.3%,
    hsl(0 0% 0% / 0.113) 87.7%,*/
    hsl(0 0% 0% / 0) 100%
  );
  transition: 300ms opacity linear;
}

.profile::after {
  background: linear-gradient(
    45deg,
    hsl(193 100% 49% / 0.7) 0,
    hsl(193 100% 49% / 0) 100%
  );
  opacity: 0;
  transition: 300ms opacity linear;
}

.profile > * {
  z-index: 1;
}

.profile img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: -1;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 200ms ease, transform 250ms linear;
}

.profile p,
.profile span {
  transform: translateY(2ex);

}

.profile_nom{
  font-family: 'riffic-bold', Arial, sans-serif;
}

.profile p {
  /*font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.03ch;*/
  transition: 300ms transform ease;
  font-size: 90%;
  padding-left: 5%;
  padding-right: 5%;
  margin:0;
  text-align: center;

}

.profile span {
  font-size: 1.2rem;
  font-weight: 500;
  padding-left: 10%;
  padding-right:10%;
  font-size: 55%;
  padding-left: 5%;
  padding-right: 5%;
  margin:0;
  color:white;
  text-align: center;
}

.profile span {
  opacity: 0;
  transition: 300ms opacity linear, 300ms transform ease-in-out;
}

.profile:focus {
  outline: 0.5rem solid white;
  outline-offset: -0.5rem;
}

.profile:hover :is(p, span),
.profile:focus :is(p, span) {
  transform: none;
  opacity: 1;
}

.profile:hover::after,
.profile:focus::after,
.profile:hover::before,
.profile:focus::before {
  opacity: 0.7;
}

.profile:hover p span,
.profile:focus p span {
  opacity: 1;
  transition-delay: 200ms;
}

.profile:hover img,
.profile:focus img {
  filter: grayscale(0);
  transform: scale(1.05) rotate(1deg);
}


@media only screen and (max-width: 700px) {
  .asso-1{
    padding-left:5%;
    padding-right:5%;
    }
    .corail-anime{
    background-color: #fff;
    color: #00C2FA;
    font-family: 'riffic-bold', Arial, sans-serif;
    font-size: 100%;
    margin: 0px;
    overflow: hidden;
    position: relative;
    text-align: center;
    }


  .img-r
  {


  }
  .img-r>figure>img
  {
    max-width:20%;
    max-height:20%;
  }


  .text-l{

  }

  .asso-titre{
    text-align : center;
    font-size: 130%;
    color:#FFB300;
    font-family: 'riffic-bold', Arial, sans-serif;
    margin-bottom: 50px;
  }

  .asso-texte-r{
    text-align: right;
    font-size: 100%;
  }

  .asso-texte-l{
    text-align: justify;
    font-size: 100%;
  }
  main{
    font-family: "Helvetica";
    color: black;
  }

  .header{
    z-index: 2;
  }

  .axes-titre{
    text-align:center;
    padding:2%;
    border-bottom : 4px solid white;
    font-family: 'riffic-bold', Arial, sans-serif;
    font-size:130%;
  }

  .axes-colonnes{
    font-size: 100%;

  }
  .axes-image-1{
    display:block;
    margin-left:auto;
    margin-right:auto;
    border-radius: 50%;
    width:80%;
    }

  .axes-image-2{
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border-radius: 50%;
    width:80%;
    }

  .axes-image-3{
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border-radius: 50%;
    width:80%;
    }

  .axes-colonnes-1{
    font-weight: bold;
      text-align: justify;
      margin:2%;

  }

  .axes-colonnes-2{
      text-align: justify;
      margin:2%;
      font-weight: bold;


  }

  .axes-colonnes-3{
    font-weight: bold;
      text-align: justify;
      margin:2%;

  }

  .asso-axes{
    background-color: #FFB300;
    color:white;
    padding-left:10%;
    padding-right:10%;
    padding-top:2%;
    padding-bottom: 2%;
  }

  .asso-2{
    margin-top: 2%;
    padding-left:5%;
    padding-right:5%;

    }
    .koural-anime{
    background-color: #fff;
    color: #00C2FA;
    font-family: 'riffic-bold', Arial, sans-serif;
    font-size: 100%;
    margin: 0px;
    text-align: center;
    }


  .img2-r>figure>img
  {
    max-width:20%;
  }


  .text-2{
    font-size: 100%;
    text-align: center;

  }

  .asso2-titre{
font-size : 100%;
  }


  .asso2-texte-l{
    text-align: justify;

  }

  .descriptionmembre{
    font-size: 100%;
    margin-left: 2%;
    min-height: 200px;
    display:block;
  }


  .descriptionmembre img {
    max-height: 200px;
    max-width: 200px;
    border-radius: 0% 50% 0% 50%;
    margin-right: 20px;
    display:block;
  }


  .asso-project{
    margin-left: 5%;
    margin-right: 5%;
  }

}