html {
  scroll-behavior : smooth;
  overflow-x: hidden;
  box-sizing: content-box;
}

/* Barre de scroll custom (moche, à voir si on garde ou pas) */
/*::-webkit-scrollbar {
  width : 1rem;
}

::-webkit-scrollbar-track{
  border-radius: 100vw;
  margin-block : .5rem;
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(to bottom, #fa9532, #5aa3ed);
  border-radius: 100vw;
} */
  
/* Transitions fade-in / out pour le footer */
.hideme {
  opacity : 0;
  transition : opacity 1000ms;
}
  
.showme {
  opacity : 1;
  transition : opacity 1000ms;
}
  
body {
  margin : 0;
  padding : 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size : 20px;
  overflow-x: hidden;
  width : 100%;
}
  
header>nav>ul>li>a:hover {
  cursor : pointer;
}

header>nav>ul>li>a {
  text-decoration: none;
  color : white;
}

footer>#info_bot>li {
  list-style: none;
}

footer>#info_bot>li>a {
  color : black;
  text-decoration: none;
}
  
a:hover {
opacity : .7;
}
  
#affichage>li>img:hover,
#fr>li>img:hover,
#en>li>img:hover {
  opacity : .7;
  cursor: pointer;
}

header {
  background-image : url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
}
  
header>nav {
  display : flex;
  flex-direction: row-reverse;
  color : white;
  height : 3rem;
}

/* RESPONSIVE SELON ECRAN */
@media only screen and (min-width: 350px) and (max-width: 740px) {

header>nav {
  display : flex;
  flex-direction: row-reverse;
  color : white;
  height : 3rem;
  font-size : 10px;
}

header>nav>ul>li>a {
  text-decoration: none;
  color : white;
}

#logoH {
  padding-top : 1rem;
}

#info {
  display : flex;
  flex-direction: row;
  list-style: none;
  margin : auto;
}
  
#info>li:nth-of-type(1),
#info>li:nth-of-type(2){
display : none;
}

#info>li:nth-of-type(3){
  border-right : 2px solid white;
}


#logoH{
  display : flex;
  flex-direction : row;
  list-style : none;
}
  
#logoH>li>a>img {
  position: relative;
  height : 2rem;
  width : 2rem;
  bottom : .6rem;
}
}
  
#info {
  display : flex;
  flex-direction: row;
  list-style: none;
  margin : auto;
}
  
#info>li:nth-of-type(1),
#info>li:nth-of-type(2),
#info>li:nth-of-type(3){
  padding-right : 2rem;
  padding-left : 2rem;
  border-right : 2px solid white;
}
  
#info>li:nth-of-type(4) {
  padding-right : 2rem;
  padding-left : 2rem;
}
  
#logoH{
  display : flex;
  flex-direction : row;
  list-style : none;
}
  
#logoH>li>a>img {
  position: relative;
  height : 2rem;
  width : 2rem;
  bottom : .6rem;
}
  
/* #fr {
  display : flex;
  flex-direction: row;
  list-style: none;
}
  
#fr>li>img {
  position : relative;
  bottom : .3rem;
  right : 4rem;
  height : 1rem;
  width : 1rem;
}
  
#en {
  display : flex;
  flex-direction: row;
  list-style: none;
}
  
#en>li>img {
  position : relative;
  bottom: .3rem;
  right : 1.5rem;
  height : 1rem;
  width : 1rem;
} */
  
.caché {
  display : none;
}

#vidéo>video {
  height : 100%;
  width : 100%;
}

main {
  background-color : white;
}
  
main>h1 {
  font-size : 25px;
  color : black;
  text-align: center;
  padding-top : 5rem;
  padding-bottom : 5rem;
  text-decoration : underline;
  text-decoration-color : #fa9532;
  text-underline-offset : 3px;
  text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC;
}

#présentation {
  display : flex;
  height: 20rem;
  background-color: black;
}

#présentation>img {
  align-self : center;
  width : 100%;
  height : 10rem;
  margin-left : 5rem;
}

#présentation>p {
  align-self: center;
  margin-left : 5rem;
  margin-right : 5rem;
  color : white;
  font-size : 18px;
}

/* Affichage pour grand écran */
@media only screen and (min-width : 1800px) {
  #présentation>img {
    align-self : center;
    width : 100%;
    height : 16rem;
    margin-left : 5rem;
  }

  #présentation>p {
    align-self: center;
    margin-left : 5rem;
    margin-right : 5rem;
    color : white;
    font-size : 20px;
  }
}

@media only screen and (min-width : 1400px) {
  #présentation>img {
    align-self : center;
    width : 100%;
    height : 15rem;
    margin-left : 5rem;
  }

  #présentation>p {
    align-self: center;
    margin-left : 5rem;
    margin-right : 5rem;
    color : white;
    font-size : 20px;
  }
}

/* RESPONSIVE WIDTH POUR S7 */
@media only screen and (min-width : 360px) and (max-width: 414px) {

main>h1 {
  font-size : 25px;
  color : black;
  text-align: center;
  padding-top : 5rem;
  padding-bottom : 5rem;
  text-decoration : underline;
  text-decoration-color : #fa9532;
  text-underline-offset : 3px;
  text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC;
}

#présentation {
  display : flex;
  flex-direction: column;
  height: 25rem;
  background-color: black;
  padding-bottom : 5rem;
}

#présentation>img {
  margin : auto;
  width : 100%;
  height : 7rem;
}

#présentation>p {
  margin : auto; 
  color : white;
  width : 90%;
  font-size : 16px;
  text-align : center;
}
}

/* RESPONSIVE WIDTH POUR IPHONE 11 / GALAXY S10+ */
@media only screen and (min-width : 414px) and (max-width: 1070px) {

#main>h1 {
font-size : 30px;
  color : black;
  text-align: center;
  padding-top : 4rem;
  padding-bottom : 4rem;
  text-decoration : underline;
  text-decoration-color : #fa9532;
  text-underline-offset : 3px;
  text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC;
}

#présentation {
  display : flex;
  flex-direction: column;
  height: 32rem;
  background-color: black;
  padding-bottom : 5rem;
}

#présentation>img {
  margin : auto;
  width : 100%;
  height : 20rem;
}

#présentation>p {
  margin : auto; 
  color : white;
  width : 90%;
  font-size : 22px;
  text-align : center;
}
}

/* RESPONSIVE SELON ECRAN MODE PAYSAGE */
@media only screen and (min-width : 896px) and (max-width: 1070px) {
#présentation {
  display : flex;
  flex-direction: column;
  height: 30rem;
  background-color: black;
  padding-bottom : 5rem;
}

#présentation>img {
  margin : auto;
  width : 100%;
  height : 22rem;
}

#présentation>p {
  margin : auto; 
  color : white;
  width : 90%;
  font-size : 24px;
}
}

#services>h2 {
  text-align : center;
  font-size : 25px;
  text-decoration: underline;
  text-decoration-color: #fa9532;
  text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC;
}

#services>ul {
  list-style : none;
  display : flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#services>ul>li {
  border-left : 2px solid #fa9532;
  border-right : 2px solid #fa9532;
  border-radius : 75px;
  padding-right : 1rem;
  padding-left : 1rem;
}

.service>img {
  height : 4rem;
  width : 4rem;
}

.zoom:hover {
  transform : scale(1.2);
  transition : .5s;
  cursor : pointer;
}

.zoom {
  transform : scale(1);
  transition : .3s;
}

#desc {
  display : flex;
  flex-direction: column;
  padding-top : 3rem;
  padding-bottom : 5rem;
  align-items : center;
  background-color: black;
  color : white;
}

#desc>h2 {
  padding-bottom : 3rem;
  text-decoration: underline;
  text-decoration-color: #5aa3ed;
  text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
  text-underline-offset: 4px;
}

#explications_graphique,
#explications_site,
#explications_réseau {
  display : flex;
  flex-direction: row;
}

#explications_graphique>img,
#explications_site>img,
#explications_réseau>img {
  height : 200px;
  width : 400px;
  margin-left : 10rem;
}

#explications_graphique>p,
#explications_site>p,
#explications_réseau>p {
  align-self : center;
  margin-left : 10rem;
  margin-right : 10rem;
}


/* CACHE CETTE SECTION POUR L'AFFICHAGE TEL / TABLETTE */
@media only screen and (min-width: 350px) and (max-width: 1070px) {
#services>h2 {
  display : none;
  text-align : center;
  font-size : 25px;
  text-decoration: underline;
  text-decoration-color: #fa9532;
  text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC;
}

#services>ul {
  display : none;
}

#services>ul>li {
  display : none;
  border-left : 2px solid #fa9532;
  border-right : 2px solid #fa9532;
  border-radius : 75px;
  padding-right : 1rem;
  padding-left : 1rem;
}

.service>img {
  display : none;
  height : 4rem;
  width : 4rem;
}

#desc {
  display : none;
  padding-top : 5rem;
  padding-bottom : 5rem;
  align-items : center;
  background-color: black;
  color : white;
}

#desc>img {
  display : none;
  height : 200px;
  width : 400px;
  margin-left : 10rem;
}

#desc>p{
  display : none;
  align-self : center;
  margin-left : 10rem;
  margin-right : 10rem;
}
}

#services_phone {
  display : none;
}

/* RESPONSIVE WIDTH S7 */
@media only screen and (min-width : 350px) and (max-width : 414px) {
  
  #services_phone {
    display : flex;
    flex-direction : column;
    align-items : center;
    background-color : black;
    color : white;
    border-top : 2px solid #fa9532;
  }

  #services_phone>h2 {
    text-decoration : underline;
    text-decoration-color: #fa9532;
    text-underline-offset: 5px; 
    padding-bottom : 1rem;
  }

  #services_phone>img:first-of-type,
  #services_phone>img:nth-of-type(3),
  #services_phone>img:nth-of-type(5) {
    justify-self: center;
    height : 5rem;
    width : 5rem;
    margin-bottom : 3rem;
  }

  #services_phone>img:nth-of-type(2),
  #services_phone>img:nth-of-type(4),
  #services_phone>img:nth-of-type(6) {
    justify-self : center;
    height : 10rem;
    width : 18rem;
    border : 2px solid white;
    margin-bottom : 3rem;
  }

  #services_phone>p {
    font-size : 18px;
    width : 90%;
    margin-bottom : 5rem;
  }
}

/* RESPONSIVE WIDTH IPHONE 11 / GALAXY 10+ */
@media only screen and (min-width : 414px) and (max-width : 1070px) {
  #services_phone {
    display : flex;
    flex-direction : column;
    align-items : center;
    background-color : black;
    color : white;
    border-top : 2px solid #fa9532;
  }

  #services_phone>h2 {
    text-decoration : underline;
    text-decoration-color: #fa9532;
    text-underline-offset: 5px; 
    padding-bottom : 1rem;
  }

  #services_phone>img:first-of-type,
  #services_phone>img:nth-of-type(3),
  #services_phone>img:nth-of-type(5) {
    justify-self: center;
    height : 8rem;
    width : 8rem;
    margin-bottom : 3rem;
  }

  #services_phone>img:nth-of-type(2),
  #services_phone>img:nth-of-type(4),
  #services_phone>img:nth-of-type(6) {
    justify-self : center;
    height : 15rem;
    width : 25rem;
    border : 2px solid white;
    margin-bottom : 3rem;
  }

  #services_phone>p {
    font-size : 22px;
    width : 90%;
    margin-bottom : 3rem;
  }
}

#membres {
  display : flex;
  flex-direction : column;
  background-image : url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
}

#membres h2, h3 {
  text-align : center;
  color : white;
  text-decoration: underline;
  text-decoration-color: #fa9532;
  text-underline-offset: 4px;
  text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
}

.row {
  display : flex;
  flex-direction : row;
  justify-content : space-around;
  align-items : center;
}

.row li {
  text-align : center;
  color : white;
}

#FH,
#FG,
#LB,
#DD {
  padding : 0;
  margin : 0;
  align-self: center;
  margin : 2rem 0 2rem 0;
}

@media only screen and (min-width : 360px) and (max-width: 500px) {
  #membres {
    display : flex;
    flex-direction : column;
    background-image : url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
  }
  
  #membres h2 {
    text-align : center;
    color : white;
    text-decoration: underline;
    text-decoration-color: #fa9532;
    text-underline-offset: 4px;
    text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
  }

  #membres h3 {
    font-size : 16px;
  }
  
  .row {
    display : flex;
    flex-direction : row;
    justify-content : space-around;
    align-items : center;
  }
  
  .row li {
    text-align : center;
    color : white;
    font-size : 12px;
  }

  .row img {
    width : 6rem;
    height : 6rem;
  }
  
  #FH,
  #FG,
  #LB,
  #DD {
    padding : 0;
    margin : 0;
    align-self: center;
    margin : 2rem 0 2rem 0;
  }
}

@media only screen and (min-width : 500px) and (max-width : 630px) {
  #membres {
    display : flex;
    flex-direction : column;
    background-image : url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
  }
  
  #membres h2 {
    text-align : center;
    color : white;
    text-decoration: underline;
    text-decoration-color: #fa9532;
    text-underline-offset: 4px;
    text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
  }

  #membres h3 {
    font-size : 18px;
  }
  
  .row {
    display : flex;
    flex-direction : row;
    justify-content : space-around;
    align-items : center;
  }
  
  .row li {
    text-align : center;
    color : white;
    font-size : 14px;
  }

  .row img {
    width : 7rem;
    height : 7rem;
  }
  
  #FH,
  #FG,
  #LB,
  #DD {
    padding : 0;
    margin : 0;
    align-self: center;
    margin : 2rem 0 2rem 0;
  }
}

@media only screen and (min-width : 630px) and (max-width : 800px) {
  #membres {
    display : flex;
    flex-direction : column;
    background-image : url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
  }
  
  #membres h2 {
    text-align : center;
    color : white;
    text-decoration: underline;
    text-decoration-color: #fa9532;
    text-underline-offset: 4px;
    text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
  }

  #membres h3 {
    font-size : 20px;
  }
  
  .row {
    display : flex;
    flex-direction : row;
    justify-content : space-around;
    align-items : center;
  }
  
  .row li {
    text-align : center;
    color : white;
    font-size : 16px;
  }

  .row img {
    width : 8rem;
    height : 8rem;
  }
  
  #FH,
  #FG,
  #LB,
  #DD {
    padding : 0;
    margin : 0;
    align-self: center;
    margin : 2rem 0 2rem 0;
  }
}

@media only screen and (min-width : 800px) and (max-width : 1070px) {
  #membres {
    display : flex;
    flex-direction : column;
    background-image : url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
  }
  
  #membres h2 {
    text-align : center;
    color : white;
    text-decoration: underline;
    text-decoration-color: #fa9532;
    text-underline-offset: 4px;
    text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
  }

  #membres h3 {
    font-size : 22px;
  }
  
  .row {
    display : flex;
    flex-direction : row;
    justify-content : space-around;
    align-items : center;
  }
  
  .row li {
    text-align : center;
    color : white;
    font-size : 16px;
  }

  .row img {
    width : 9rem;
    height : 9rem;
  }
  
  #FH,
  #FG,
  #LB,
  #DD {
    padding : 0;
    margin : 0;
    align-self: center;
    margin : 2rem 0 2rem 0;
  }
}

#bas {
  background-image: url(https://webmmi.iut-tlse3.fr/~hmf4070a/Site%20ReArt/ressources/bg.png);
  margin : 0;
  padding : 0;
}

#infosupp {
  display : flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  color : white;
  border-top : 2px solid #fa9532
}

#infosupp>h2 {
  text-decoration: underline;
  text-decoration-color: #5aa3ed;
  text-shadow: 1px 0px 1px #333333, 0px 1px 1px #111111, 2px 1px 1px #333333, 1px 2px 1px #111111, 3px 2px 1px #333333;
  text-underline-offset: 4px;
}

#srs {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  border-bottom : 2px solid #fa9532;
  border-radius : 75%;
  padding-top : 1rem;
  margin : 0;
}

#srs>li {
  padding-bottom : 1rem;
}

#srs>li img:hover {
  transform : scale(1.2);
  transition : .5s;
  cursor : pointer;
}

#srs>li img {
  height : 2rem;
  width : 2rem;
  transform : scale(1);
  transition : .3s;
}

@media only screen and (min-width : 350px) and (max-width: 1070px) {
#infosupp {
  display : flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  color : white;
  border-top : 2px solid #fa9532;
}

#srs {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  margin-right : 3rem;
}

#srs>li {
  padding-bottom : 1rem;
}

#srs>li img {
  height : 2rem;
  width : 2rem;
}
}

footer {
  display : flex;
  flex-direction: row-reverse;
  justify-content : space-around;
  align-items : center;
  color : black;
}

ul {
  list-style: none;
}

#coordonnées {
  display : flex;
  flex-direction: column;
  list-style: none;
  font-size : 14px;
  font-weight : bold;
}

#coordonnées>li {
  text-decoration : underline;
  text-decoration-color: #fa9532;
  padding-top : 1rem;
}

#coordonnées>li:nth-of-type(2),
#coordonnées>li:nth-of-type(3),
#coordonnées>li:nth-of-type(4) {
  text-underline-offset : 3px;
}

logo {
  list-style: none;
}
  
#logo>li>a>img {
  padding-top : .5rem;
  height : 8rem;
  width : 7rem;
  margin-right : 2rem;
}

footer>input:hover {
  transform : scale(1.2);
  transition : .3s;
  cursor : pointer;
}

footer>input {
  background-color : transparent;
  color : #fa9532;
  font-size : 16px;
  height : 2rem;
  width : 2rem;
  border-radius : 50%;
  border : 2px solid black;
  transform : scale(1);
  transition : .3s;
}

#button:hover {
  opacity : .5;
  cursor : pointer;
}
  
#button {
  background-color: #5aa3ed;
  border: 2px solid #5aa3ed;
  border-radius : 75px;
  width : 10rem;
  height : 2rem;
  transition : opacity .3s;
  font-weight : bold;
}

@media only screen and (min-width : 350px) and (max-width: 1070px) {
  footer {
  display : flex;
  flex-direction: row;
  justify-content : space-around;
  align-items : center;
  color : black;
}

ul {
  list-style: none;
}

#coordonnées {
  display : none;
}
  
#logo>li>img {
  padding-top : .5rem;
  height : 8rem;
  width : 7rem;
  padding-right : 2rem;
}


#button:hover {
  opacity : .5;
  cursor : pointer;
}
  
#button {
  background-color: #5aa3ed;
  border: 2px solid #5aa3ed;
  border-radius : 75px;
  width : 10rem;
  height : 2rem;
  transition : opacity .3s;
  font-weight : bold;
}
}