/*CSS tikaré*/
/*Habillage de la page d'accueil*/*
@media (max-width: 640px) {
  * {
    box-sizing: border-box;
  }
  
  /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

  body {
    width: auto;
    margin: 0;
    padding: 0;
  }
  
  /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

  img,
  table,
  td,
  blockquote,
  code,
  pre,
  textarea,
  input,
  iframe,
  object,
  embed,
  video {
    max-width: 100%;
  }
  
  /* conserver le ratio des images */

  img {
    height: auto;
  }
  
  /* gestion des mots longs */

  textarea,
  table,
  td,
  th,
  code,
  pre,
  samp {
    -webkit-hyphens: auto; /* césure propre */
    -moz-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* passage à la ligne forcé */
  }
  
  code,
  pre,
  samp {
    white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
  }
  
  /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

  .element1,
  .element2 {
    float: none;
    width: auto;
  }
  
  /* masquer les éléments superflus */

  .hide_mobile {
    display: none !important;
  }
  
  /* Un message personnalisé */

  body:before {
    content: "Version mobile du site";
    display: block;
    text-align: center;
    font-style: italic;
    color: #777;
  }
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}


/* Style de la page d'accueil */
/* Background de chaque page */
body{
  background-color: black;
}

body.concert{
  background-color: rgba(70, 208, 24, 255); /*46d018ff*/
  color: white;
}

body.image{
  background-color: rgba(70, 208, 223, 255); /*46d0dfff*/
  color: white;
}

body.groupe{
  background-color: rgba(236, 82, 62, 255); /*ec523eff*/
  color: white;
}

body.album{
  background-color: rgba(236, 192, 62, 255); /*ecc03eff*/
  color: white;
}

a:link{color: white;}
a:visited{color:  white;}

/*Fin body color*/


.box {
  display: grid;
  grid-template-columns: 1, 1fr;
  justify-content: center;
  align-items: center;
  padding-top: 10em;
}

.box img{
  height: 100%;
  width: 100%;

}

h1.construc{
  text-align: center;
  color: white;
}

p.groupe{
  font-size: 2em;
}


/*------------------------*/
/*Fin Style de la page Accuel*/


/* Style de la page Menu */

/*.navi{
  display: flex;
  background-color: darkred;
  
}*/


nav{
  font-size: 0.7em;
}

.wrapper {
  display: grid;
  padding-top: 2em;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5em;
  margin: auto;
  width: 40%;

}

.item2 img{
  grid-column-start: 1;
  grid-row-start: 1;
  height: 100%;
  width: 100%;

}

.item3 img{
  grid-column-start: 2;
  grid-row-start: 1;
  height: 100%;
  width: 100%;
}

.item4 img{
  grid-column-start:1;
  grid-row-start: 2;
  height: 100%;
  width: 100%;
}

.item5 img{
  grid-column-start: 2;
  grid-row-start: 2;
   height: 100%;
  width: 100%;

}

a:hover{
  
}

.titre{
  text-align: center;
}

/*------------------------*/
/*Fin Style de la page Menu*/


/* Style des pages annexes */

.txt{/*gestion des textes*/
  font-size: 100%;
  padding: 1em;

}


.pochette{
  text-align: center;
  margin-top: 100px;
  size: 200px;

}

figure{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: auto;
  width: auto;
  grid-gap: 2px;
  grid-auto-rows: auto;
  color: black;
  text-align: left;
}

ul{
 
  margin: 1em;
  font-size: 2em;
}

ul.album{
  list-style: none;
  font-size: 20px;
  /*padding: 10%;
  size: 200px;*/
}

audio{
color: grey;

}
.listeB{
  grid-column-start: 3;
  grid-column-end: 5;
}


/*------------------------*/
/*Fin style pages annexes*/


/*Gestion du bouton de commande en ligne*/
/*Code html : <button class="favorite styled" type="button">Commander</button>*/

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/*------------------------*/
/*fin bouton commande*/

footer{
  text-align: center;
  color: white;
}

footer img{
  height: auto;
  width: 5%;
}

p.index{
  color: white;
}

.pied{
  size: 50%;
}


/*Boutons de navigation carrés*/
.petinav{
  text-align: center;
}

.petinav img {
  max-width: 4%;
  height: auto;
}

/*Gestion des photos page Groupe*/

.boite{
  display: grid;
  /*height: 200px;
  width: 1257px;*/
  grid-template-columns: repeat(4, 2fr);
  grid-gap: 5px;
  margin: 3em;
  text-align: center;
}

.ident{ /* texte des photos identité */
  font-size: 100%;
}

.ident a {
  color: rgba(255,255,255);
}

.ident img { /*ombre sur photo identite*/
  float:center; 
  box-shadow:7px 7px 7px #555555;
  text-align: center;

}

.foto1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  /*grid-row-end: 3;*/
}

.foto2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  /*grid-row-end: 3;*/
}
.foto3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  /*grid-row-end: 3;*/
}
.foto4 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  /*grid-row-end: 3;*/
}
.foto5 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
 /* grid-row-end: 3;*/
}
.foto6 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  /*grid-row-end: 3;*/
}
.foto7 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  /*grid-row-end: 3;*/
}
.foto8 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  /*grid-row-end: 3;*/
}


/*Mise en forme des présentations individuelles*/
.cv{/*gestion de l'image et du texte entourant l'image*/
  float: left;
  font-size: 2em;
}

/************************************************************************/
/* Texte défilant */

.defileParent {
  display: block;
  margin: 3em auto;
  overflow: hidden;
  position: relative;
  table-layout: fixed;
  width: 700px;
}
.defile {
  display:block;
  -webkit-animation:linear marqueelike 20s infinite;
  -moz-animation:linear marqueelike 20s infinite;
  -o-animation:linear marqueelike 20s infinite;
  -ms-animation:linear marqueelike 20s infinite;
  animation:linear marqueelike 20s infinite;
  margin-left:100%;
  padding:0 5px;
  text-align:left;
  height:25px;
}


.defile:after {
  content:attr(data-text);
  position:absolute;
  white-space:nowrap;
  padding-left:10px;
}

@-webkit-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:100%;}
 }
@-moz-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:100%;}
 }
@-o-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:100%;}
 }
@-ms-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:100%;}
 }
@keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:100%;}
 }

@media only screen and (max-width: 860px) {
.defileParent {
  display: block;
  margin: 3em auto;
  overflow: hidden;
  position: relative;
  table-layout: fixed;
  width: 100%;
}

.defile {
  display:block;
  -webkit-animation:linear marqueelike 15s infinite ;
  -moz-animation:linear marqueelike 15s infinite ;
  -o-animation:linear marqueelike 15s infinite ;
  -ms-animation:linear marqueelike 15s infinite ;
  animation:linear marqueelike 15s infinite ;
  margin-left:100%;
  padding:0 5px;
  text-align:left;
  height:25px;
}
}