@import url("https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700");
body {
    	font-family : "Playfair Display SC ", Teko, Permanent Marker;

  margin: 0;
	padding : 0;
	height : 100%;
}


img {
  max-height: 150px;
  margin: auto;
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: 400;
}

h6 {
  font-size: 5em;
  font-weight: 700;
  text-align: center;
  letter-spacing : 2px;
  margin: 0;
  font-family : "Playfair Display SC ", Teko, Permanent Marker;
}

.cards {
	margin-left: auto;
    margin-right: auto;
	text-align : center;
}

.card {
  display: inline-block;
  font-family: "Open Sans", Helvetica, sans-serif;
  width: 300px; /* largeur de la carte */
  padding: 1em;
  border-radius: 15px; /* coin des cartes */
  margin: 10px; /* écart entre les cartes */
  background: #ddd;
  text-align: left;
  box-shadow: 0px 5px 20px -10px #111111;
  position: relative;
  transition: 0.4s;
}
.card__caption {  /* background des informations */
  background-color: rgba(255, 255, 255, 0.65);
  padding: 1em;
  position: relative;
  border-radius: 0 0 3px 3px;
}
.card__image-container { /* background de l'image ou du gif */
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 1em 1em 0;
  border-radius: 3px 3px 0 0;
}
.card__type { /* Type pokémon 1 */
  position: absolute;
  top: 0;
  left: 1em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #ffffff;
  text-transform: uppercase;
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  letter-spacing: 0.1em;
  padding: 0.25em;
  line-height: 1;
  border-radius: 2px;
  background: #bbbbbb;
  font-size : 17px;
}

.card__type2 { /* Type pokémon 2 */
  position: absolute;
  top: 0;
  right: 1em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #ffffff;
  text-transform: uppercase;
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  letter-spacing: 0.1em;
  padding: 0.25em;
  line-height: 1;
  border-radius: 2px;
  background: #bbbbbb;
  font-size : 17px;
}


.card__label {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  display: block;
  margin-bottom: 3px;
}

.card__name { /* Nom du poke */
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.card__stats {
  margin: 1em 0;
  width: 100%;
}
.card__stats th {
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  text-align: right;
  font-weight: 300;
}
.card__stats th,
.card__stats td {
  width: 50%;
  padding: 0.25em 0.5em 0;
}
.card__details {
  display: flex;
  justify-content: space-between;
}
.card__tier {
  margin-top: 1em;
  flex: 1 0;
  font-size : 14px;
}



.card--water {
  background: linear-gradient(120deg, #3b70ee 0%, #72b4f8 46%, #0c64bf 100%);
  box-shadow: 0px 5px 20px -10px #000851;
}
.card--water .card__type {
  background-color: #3b70ee;
}

.card--rock {
  background: linear-gradient(110deg, #927d24 0%, #665a26 46%, #ada273 100%);
  box-shadow: 0px 5px 20px -10px #000851;
}
.card--rock .card__type {
  background-color: #927d24;
}

.card--electric {
  background: linear-gradient(90deg, #ffde00 34%, #e8ff99 83%);
}
.card--electric .card__type {
  background-color: #ffde00;
}
.card--fire {
  background: linear-gradient(0deg, #c71800 10%, #fcc245 100%);
}
.card--fire .card__type {
  background-color: #c71800;
}
.card--psychic {
  background: linear-gradient(140deg, #ffa7f9 0%, #ff2cc3 39%, #ffe3a7 100%);
}
.card--psychic .card__type {
  background: #ff2cc3;
}

.card--dark {
  background: linear-gradient(20deg, #1e1e1e 0%, #120c36 53%, #000000 100%);
}
.card--dark .card__type {
  background: #000000;
}

.card--bug {
  background: linear-gradient(140deg, #c4da3d 0%, #6e7f0e 69%, #275009 100%);
}
.card--bug .card__type {
  background: #6e7f0e;
}
.card--ice {
  background: linear-gradient(230deg, #caeaf6 0%, #a0eaf1 46%, #6fb8eb 100%);
}
.card--ice .card__type {
  background: #93e1e8;
}
.card--fairy {
  background: linear-gradient(45deg, #ffe6f0 0%, #ffc5e0 34%, #ffa6b9 71%, #ff8a95 100%);
}
.card--fairy .card__type {
  background: #ff8a95;
}

.card--steel {
  background: linear-gradient(70deg, #9d9da2 0%, #e4e4e7 41%, #a5a5b1 100%); /*A MODIF*/
}
.card--steel .card__type {
  background: #a5a5b1;
}

.card--poison {
  background: linear-gradient(20deg, #5c0249 10%, #100b32 43%, #a040a0 100%);
}
.card--poison .card__type {
  background: #5c0249;
}

.card--fight {
  background: linear-gradient(140deg, #f28c87 0%, #c03028 69%, #7c130e 100%);
}
.card--fight .card__type {
  background: #c03028;
}

.card--dragon {
  background: linear-gradient(215deg, #c9b6f8 0%, #7038f8 49%, #3a09b1 90%);
}
.card--dragon .card__type {
  background: #7038f8;
}

.card--grass {
  background: linear-gradient(140deg, #30780d 0%, #78c850 39%, #ffe3a7 100%);
}
.card--grass .card__type {
  background: #78c850;
}

.card--ghost {
  background: linear-gradient(230deg, #b69ae5 0%, #705898 46%, #42286d 100%);
}
.card--ghost .card__type {
  background: #705898;
}

.card--ground {
  background: linear-gradient(190deg, #f6d373 0%, #d6b046 46%, #b78b0f 100%);
}
.card--ground .card__type {
  background: #d6b046;
}

.card--fly {
  background: linear-gradient(140deg, #f0caed 0%, #ad9ae9 32%, #a890f0 69%, #ffe3a7 100%);
}
.card--fly .card__type {
  background: #a890f0;
}

.card--normal {
  background: linear-gradient(110deg, #cbcbc1 0%, #a8a878 100%);
  box-shadow: 0px 5px 20px -10px #a8a878;
}
.card--normal .card__type {
  background-color: #a8a878;
}

.card--icesteel {
  background: linear-gradient(45deg, #caeaf6 0%, #93e1e8 38%, #e4e4e7 62%, #a5a5b1 100%);
}
.card--icesteel .card__type {
  background: #93e1e8;
}
.card--icesteel .card__type2 {
  background: #a5a5b1;
}

.card--fairyice {
  background: linear-gradient(45deg, #caeaf6 0%, #93e1e8 38%, #ffc5e0 62%, #ff8a95 100%);
}
.card--fairyice .card__type {
  background: #93e1e8;
}
.card--fairyice .card__type2 {
  background: #ff8a95;
}

.card--grassrock {
background: linear-gradient(-60deg, #927d24 8%, #665a26 26%, #ada273 42%, #c4da3d 50%, #78c850 63%, #388513 97%);
}
.card--grassrock .card__type {
  background: #78c850;
}
.card--grassrock .card__type2 {
  background: #927d24;
}

.card--iceghost {
  background: linear-gradient(50deg, #6fb8eb 0%, #caeaf6 28%, #93e1e8 43%, #987cc7 62%, #705898 100%);
}
.card--iceghost .card__type {
  background: #93e1e8;
}
.card--iceghost .card__type2 {
  background: #705898;
}

.card--rockice {
  background: linear-gradient(50deg, #665a26 0%, #927d24 39%, #93e1e8 57%, #caeaf6 72%, #6fb8eb 100%);
}
.card--rockice .card__type {
  background: #927d24;
}
.card--rockice .card__type2 {
  background: #93e1e8;
}

.card--fireghost {
background: linear-gradient(-60deg, #bc87f2 0%, #987cc7 12%, #42286d 43%, #c71800 79%, #d89545 99%);
}
.card--fireghost .card__type {
  background: #c71800;
}
.card--fireghost .card__type2 {
  background: #705898;
}

.card--firedark {
background: linear-gradient(-60deg, #000000 0%, #120c36 12%, #1e1e1e 43%, #d89545 56%, #c71800 86%);
}
.card--firedark .card__type {
  background: #c71800;
}
.card--firedark .card__type2 {
  background: #000000;
}

.card--flydark {
  background: linear-gradient(125deg, #ad9ae9 14%, #a890f0 37%, #191919 57%);
}
.card--flydark .card__type {
  background: #a890f0;
}
.card--flydark .card__type2 {
  background: #191919;
}

.card--grounddark {
  background: linear-gradient(45deg, #d6b046 40%, #191919 55%);
}
.card--grounddark .card__type {
  background: #d6b046;
}
.card--grounddark .card__type2 {
  background: #191919;
}

.card--normalground {
background: linear-gradient(-60deg, #a67d0a 0%, #d6b046 39%, #cbcbc1 59%, #a8a878 97%);
}
.card--normalground .card__type {
  background: #a8a878;
}
.card--normalground .card__type2 {
  background: #d6b046;
}

.card--groundpsychic {
background: linear-gradient(-60deg, #ffa7f9 0%, #ff2cc3 33%, #d6b046 58%, #b78b0f 100%);
}
.card--groundpsychic .card__type {
  background: #d6b046;
}
.card--groundpsychic .card__type2 {
  background: #ff2cc3;
}

.card--dragonpsychic {
  background: linear-gradient(45deg, #c9b6f8 0%, #7038f8 28%, #ff2cc3 72%, #ffa7f9 100%);
}
.card--dragonpsychic .card__type {
  background: #7038f8;
}
.card--dragonpsychic .card__type2 {
  background: #ff2cc3;
}

.card--flyfight {
  background: linear-gradient(125deg, #ad9ae9 14%, #a890f0 40%, #ffe3a7 50%, #f28c87 60%, #c03028 70%);
}
.card--flyfight .card__type {
  background: #a890f0;
}
.card--flyfight .card__type2 {
  background: #c03028;
}

.card--dragonfight {
  background: linear-gradient(45deg, #c9b6f8 0%, #7038f8 38%, #c03028 62%, #f28c87 100%);
}
.card--dragonfight .card__type {
  background: #7038f8;
}
.card--dragonfight .card__type2 {
  background: #c03028;
}

.card--firefight {
background: linear-gradient(-60deg, #c03028 34%, #f28c87 43%, #c71800 69%, #fcc245 89%);
}
.card--firefight .card__type {
  background: #c71800;
}
.card--firefight .card__type2 {
  background: #c03028;
}

.card--grassghost {
background: linear-gradient(-58deg, #705898 39%, #876faf 49%, #78c850 59%);
}
.card--grassghost .card__type {
  background: #78c850;
}
.card--grassghost .card__type2 {
  background: #705898;
}


.card--waterelectric {
background: linear-gradient(-60deg, #ffde00 39%, #e8ff99 46%, #72b4f8 59%, #3b70ee 97%);
}
.card--waterelectric .card__type {
  background: #3b70ee;
}
.card--waterelectric .card__type2 {
  background: #ffde00;
}


.card--electricpsychic {
background: linear-gradient(-60deg, #ff2cc3 33%, #ffe3a7 47%, #ffde00 58%, #e8ff99 74%);
}
.card--electricpsychic .card__type {
  background: #ffde00;
}
.card--electricpsychic .card__type2 {
  background: #ff2cc3;
}


.card--steelfight {
background: linear-gradient(-60deg, #c03028 28%, #e05f58 44%, #a5a5b1 58%, #9b9b9c 74%);
}
.card--steelfight .card__type {
  background: #a5a5b1;
}
.card--steelfight .card__type2 {
  background: #c03028;
}


.card--fightbug {
background: linear-gradient(-60deg, #6e7f0e 31%, #bad520 44%, #d97670 55%, #c03028 61%);
}
.card--fightbug .card__type {
  background: #c03028;
}
.card--fightbug .card__type2 {
  background: #6e7f0e;
}


.card--steelfly {
background: linear-gradient(-60deg, #a890f0 39%, #d3ccea 51%, #a5a5b1 64%);
}
.card--steelfly .card__type {
  background: #a5a5b1;
}
.card--steelfly .card__type2 {
  background: #a890f0;
}

.card--electricwater {
background: linear-gradient(55deg, #ffde00 33%, #f1e48c 46%, #72b4f8 57%, #3b70ee 68%);
}
.card--electricwater .card__type {
  background-color: #ffde00;
}
.card--electricwater .card__type2 {
   background: #3b70ee;
}

.card--groundfly {
background: linear-gradient(-70deg, #a890f0 39%, #d6b046 71%, #b78b0f 100%);
}
.card--groundfly .card__type {
background-color: #d6b046;
}
.card--groundfly .card__type2 {
  background: #a890f0; 
}

.card--waterground {
background: linear-gradient(-60deg, #d6b046 39%, #e6c874 46%, #72b4f8 59%, #3b70ee 97%);
}
.card--waterground .card__type {
  background: #3b70ee;
}
.card--waterground .card__type2 {
  background: #d6b046;
}

.card--grassbug {
background: linear-gradient(-60deg, #6e7f0e 36%, #c4da3d 50%, #78c850 63%, #30780d 97%);
}
.card--grassbug .card__type {
  background: #78c850;
}
.card--grassbug .card__type2 {
  background: #6e7f0e;
}

.card--grassground {
background: linear-gradient(-60deg, #d6b046 44%, #78c850 59%);
}
.card--grassground .card__type {
  background: #78c850;
}
.card--grassground .card__type2 {
  background: #d6b046;
}


.card--grassfight {
background: linear-gradient(-60deg, #c03028 40%, #78c850 59%);
}
.card--grassfight .card__type {
  background: #78c850;
}
.card--grassfight .card__type2 {
  background: #c03028;
}

.card--flyfairy {
background: linear-gradient(55deg, #a890f0 33%, #d3ccea 51%, #ff8a95 77%);
}
.card--flyfairy .card__type {
  background: #a890f0; 
}
.card--flyfairy .card__type2 {
  background: #ff8a95; 
}


.card--electricfire {
background: linear-gradient(55deg, #ffde00 33%, #fca445 49%, #c71800 58%);
}
.card--electricfire .card__type {
  background-color: #ffde00;
}
.card--electricfire .card__type2 {
   background: #c71800;
}

.card--flypoison {
background: linear-gradient(50deg, #a890f0 33%, #d3ccea 51%, #5c0249 80%);
}
.card--flypoison .card__type {
  background: #a890f0; 
}
.card--flypoison .card__type2 {
  background: #5c0249; 
}

.card--electricfairy {
background: linear-gradient(45deg, #ffde00 39%, #ffa6b9 59%,  #ff8a95 68%);
}
.card--electricfairy .card__type {
  background-color: #ffde00;
}
.card--electricfairy .card__type2 {
  background: #ff8a95;
}

.card--rockfight {
background: linear-gradient(-60deg, #c03028 44%, #927d24 59%);
}
.card--rockfight .card__type {
  background: #927d24;
}
.card--rockfight .card__type2 {
  background: #c03028;
}

.card--ghostdark {
background: linear-gradient(55deg, #705898 33%, #b69ae5 49%, #191919 58%);
}
.card--ghostdark .card__type {
  background-color: #705898;
}
.card--ghostdark .card__type2 {
   background: #191919;
}


.card--bugfairy {
background: linear-gradient(48deg, #a8b820 36%, #e8ff99 51%, #ff8a95 69%);
}
.card--bugfairy .card__type {
  background:  #a8b820; 
}
.card--bugfairy .card__type2 {
  background:  #ff8a95; 
}

.card--waterdark {
  background: linear-gradient(50deg, #3b70ee 35%,  #191919 55%);
}
.card--waterdark .card__type {
  background: #3b70ee;
}
.card--waterdark .card__type2 {
  background: #191919;
}

.card--waterfairy {
background: linear-gradient(55deg, #3b70ee 33%, #ffc5e0 49%, #ff8a95 58%);
}
.card--waterfairy .card__type {
  background-color: #3b70ee;
}
.card--waterfairy .card__type2 {
   background: #ff8a95;
}

.card--dragonice {
  background: linear-gradient(45deg, #7038f8 40%, #93e1e8 60%);
}
.card--dragonice .card__type {
  background: #7038f8;
}
.card--dragonice .card__type2 {
  background: #93e1e8;
}

.card--rocksteel {
background: linear-gradient(45deg, #927d24 33%, #d3ccea 51%, #a5a5b1 100%);
}
.card--rocksteel .card__type {
  background: #927d24;
}
.card--rocksteel .card__type2 {
  background: #a5a5b1;
}

.card--steelpsychic {
background: linear-gradient(-60deg, #ffa7f9 0%, #ff2cc3 40%, #a5a5b1 60%, #bebec8 100%);
}
.card--steelpsychic .card__type {
  background: #a5a5b1;
}
.card--steelpsychic .card__type2 {
  background: #ff2cc3;
}

.card--grasspoison {
  background: linear-gradient(120deg, #30780d 0%, #78c850 47%,  #a040a0 57%, #5c0249 80%);
}
.card--grasspoison .card__type {
  background: #78c850;
}
.card--grasspoison .card__type2 {
  background: #5c0249;
}

.card--dragondark {
  background: linear-gradient(50deg, #7038f8 45%, #191919 55%);
}
.card--dragondark .card__type {
  background: #7038f8;
}
.card--dragondark .card__type2 {
  background: #191919;
}

.card--poisondark {
  background: linear-gradient(50deg, #5c0249 35%,  #191919 55%);
}
.card--poisondark .card__type {
  background: #5c0249;
}
.card--poisondark .card__type2 {
  background: #191919;
}

.card--firesteel {
  background: linear-gradient(125deg, #c71800 24%, #fcc245 40%, #cacad1 60%, #a5a5b1 75%, #848489 94%);
}
.card--firesteel .card__type {
  background: #c71800;
}
.card--firesteel .card__type2 {
  background: #a5a5b1;
}

.card--groundice {
  background: linear-gradient(45deg, #d6b046 40%, #93e1e8 60%);
}
.card--groundice .card__type {
  background: #d6b046;
}
.card--groundice .card__type2 {
  background: #93e1e8;
}

.card--groundghost {
  background: linear-gradient(45deg, #d6b046 40%, #b69ae5 50%, #705898 60%);
}
.card--groundghost .card__type {
  background: #d6b046;
}
.card--groundghost .card__type2 {
  background: #705898;
}

.card--grasspsychic {
background: linear-gradient(-60deg, #e386c8 4%, #ff2cc3 33%, #ffe3a7 47%, #78c850 58%, #e8ff99 74%);
}
.card--grasspsychic .card__type {
  background: #78c850;
}
.card--grasspsychic .card__type2 {
  background: #ff2cc3;
}

.card--steelghost {
  background: linear-gradient(55deg, #8c8c90 7%, #a5a5b1 36%, #b8b8c7 44%, #b69ae5 50%, #705898 75%, #42286d 94%);
}
.card--steelghost .card__type {
  background: #a5a5b1;
}
.card--steelghost .card__type2 {
  background: #705898;
}

.card--fairysteel {
background: linear-gradient(-60deg, #a5a5b1 39%, #ffa6b9 71%, #ff8a95 100%);
}
.card--fairysteel .card__type {
  background: #ff8a95;
}
.card--fairysteel .card__type2 {
  background: #a5a5b1; 
}

.card--electricfly {
background: linear-gradient(-70deg, #a890f0 39%, #f8d030 71%, #ffde00 100%);
}
.card--electricfly .card__type {
background-color: #ffde00;
}
.card--electricfly .card__type2 {
  background: #a890f0; 
}

.card--waterpsychic {
background: linear-gradient(-60deg, #ffa7f9 0%, #ff2cc3 40%, #3b70ee 60%, #bebec8 100%);
}
.card--waterpsychic .card__type {
  background: #3b70ee;
}
.card--waterpsychic .card__type2 {
  background: #ff2cc3;
}

.card--flynormal {
background: linear-gradient(45deg, #a890f0 33%, #d3ccea 51%, #a8a878 100%);
}
.card--flynormal .card__type {
  background: #a890f0; 
}
.card--flynormal .card__type2 {
  background: #a8a878; 
}

.card--waterpoison {
background: linear-gradient(55deg, #3b70ee 34%, #5c0249 59%);
}
.card--waterpoison .card__type {
  background-color: #3b70ee;
}
.card--waterpoison .card__type2 {
  background: #5c0249;
}

.card--waterghost {
background: linear-gradient(-70deg, #705898 39%, #b69ae5 55%, #3b70ee 64%);
}
.card--waterghost .card__type {
  background-color: #3b70ee;
}
.card--waterghost .card__type2 {
  background: #705898;
}

.card--bugfight {
background: linear-gradient(45deg, #a8b820 33%, #d3ccea 51%,  #c03028 68%);
}
.card--bugfight .card__type {
  background: #a8b820; 
}
.card--bugfight .card__type2 {
  background:  #c03028; 
}

.card--dragonground {
background: linear-gradient(-70deg, #d6b046 39%, #b69ae5 55%, #7038f8 64%);
}
.card--dragonground .card__type {
  background-color: #7038f8;
}
.card--dragonground .card__type2 {
  background: #d6b046;
}

.card--bugfly {
background: linear-gradient(48deg, #a8b820 36%, #d3ccea 51%,  #a890f0 69%);
}
.card--bugfly .card__type {
  background: #a8b820; 
}
.card--bugfly .card__type2 {
  background:  #a890f0; 
}

.card--electricbug {
background: linear-gradient(48deg, #a8b820 36%, #e8ff99 51%,  #ffde00 69%);
}
.card--electricbug .card__type {
  background:  #a8b820; 
}
.card--electricbug .card__type2 {
  background:  #ffde00; 
}

.card--bugsteel {
background: linear-gradient(48deg, #a8b820 36%, #d3ccea 51%,  #a5a5b1 69%);
}
.card--bugsteel .card__type {
  background: #a8b820; 
}
.card--bugsteel .card__type2 {
  background:  #a5a5b1; 
}





/*
.card:nth-child(1) {
  -webkit-transform: translateY(0px) rotate(3deg);
          transform: translateY(0px) rotate(3deg);
}
.card:nth-child(2) {
  -webkit-transform: translateY(0px) rotate(-1deg);
          transform: translateY(0px) rotate(-1deg);
}
.card:nth-child(3) {
  -webkit-transform: translateY(0px) rotate(-2deg);
          transform: translateY(0px) rotate(-2deg);
}
.card:nth-child(4) {
  -webkit-transform: translateY(0px) rotate(4deg);
          transform: translateY(0px) rotate(4deg);
}
.card:nth-child(5) {
  -webkit-transform: translateY(0px) rotate(4deg);
          transform: translateY(0px) rotate(4deg);
}
.card:nth-child(6) {
  -webkit-transform: translateY(0px) rotate(0deg);
          transform: translateY(0px) rotate(0deg);
}
.card:nth-child(7) {
  -webkit-transform: translateY(0px) rotate(1deg);
          transform: translateY(0px) rotate(1deg);
}
.card:nth-child(8) {
  -webkit-transform: translateY(0px) rotate(-5deg);
          transform: translateY(0px) rotate(-5deg);
}
.card:nth-child(9) {
  -webkit-transform: translateY(0px) rotate(-1deg);
          transform: translateY(0px) rotate(-1deg);
}
*/

.card:hover {
  z-index: 5;
  box-shadow: 0px 13px 30px -15px #000000;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}



/* SHINY CARD */

.card.shine:before,
.card.shine:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    rgb(0, 231, 255) 30%,
    rgb(255, 0, 231) 70%,
    transparent 100%
  );
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  border-radius: 15px; /* coin des cartes */
  mix-blend-mode: color-dodge;
  opacity: 0;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  animation: holoGradient 15s ease infinite;
}
.card.shine:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
  background-position: center;
  background-size: 100%;
  mix-blend-mode: color-dodge;
  border-radius: 15px; /* coin des cartes */
  opacity: 0;
  z-index: 2;
  animation: holoSparkle 20s ease infinite;
}

.card.shine.active:before {
  opacity: 0.5;
  animation: none;
  transition: none;
  border-radius: 15px; /* coin des cartes */
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    transparent 25%,
    rgb(0, 231, 255) 45%,
    rgb(255, 0, 231) 55%,
    transparent 70%,
    transparent 100%
  );
}

@keyframes holoSparkle {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 0.5;
  }
  95% {
    opacity: 0.2;
  }
}

@keyframes holoGradient {
  3% {
    opacity: 0;
  }
  5% {
    background-position: 0% 0%;
  }
  7% {
    opacity: 0.5;
  }
  9% {
    background-position: 100% 100%;
  }
  11% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    background-position: 100% 100%;
  }
  55% {
    opacity: 0.3;
  }
  70% {
    opacity: 0;
    background-position: 0% 0%;
  }
}


/* AJUSTEMENT DE LA TAILLE DES CARTES */
@media only screen and (max-width: 1000px) {

.card {
  display: inline-block;
  font-family: "Open Sans", Helvetica, sans-serif;
  width: 230px; /* largeur de la carte */
  padding: 1em;
  border-radius: 11px; /* coin des cartes */
  margin: 10px; /* écart entre les cartes */
  background: #ddd;
  text-align: left;
  box-shadow: 0px 5px 20px -10px #111111;
  position: relative;
  transition: 0.4s;
}
.card__caption {  /* background des informations */
  background-color: rgba(255, 255, 255, 0.65);
  padding: 1em;
  position: relative;
  border-radius: 0 0 3px 3px;
}
.card__image-container { /* background de l'image ou du gif */
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 1em 1em 0;
  border-radius: 3px 3px 0 0;
}
.card__type { /* Type pokémon 1 */
  position: absolute;
  top: 0;
  left: 0.72em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #ffffff;
  text-transform: uppercase;
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  letter-spacing: 0.08em;
  padding: 0.18em;
  line-height: 0.73;
  border-radius: 2px;
  background: #bbbbbb;
  font-size : 12.4px;
}

.card__type2 { /* Type pokémon 2 */
  position: absolute;
  top: 0;
  right: 0.72em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #ffffff;
  text-transform: uppercase;
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  letter-spacing: 0.08em;
  padding: 0.18em;
  line-height: 0.73;
  border-radius: 2px;
  background: #bbbbbb;
  font-size : 12.4px;
}


.card__label { /* Tier ADL et generation */
  font-size: 8.7px;
  text-transform: uppercase;
  font-weight: 400;
  display: block;
  margin-bottom: 2.2px;
}


.card__name { /* Nom du poke */
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  text-align: center;
  font-size: 15.3px;
  font-weight: 700;
  letter-spacing: 0.015em;
}
.card__stats {
  margin: 0.73em 0;
  width: 100%;
}
.card__stats th {
  font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
  text-align: right;
  font-weight: 300;
  font-size: 10px;
}
.card__stats th,
.card__stats td {
  width: 50%;
  padding: 0.18em 0.36em 0;
  font-size: 11.5px;
}
.card__details {
  display: flex;
  justify-content: space-between;
}
.card__tier {
  margin-top: 0.73em;
  flex: 0.73 0;
  font-size : 10.2px;
}



/*img {
  max-height: 100px;
  margin: auto;
  display: inline-block;
} */

img {
max-width :48px;
font-family : "Playfair Display SC ", Teko, Permanent Marker;
padding : 0px 0px 0px 0px;
}

.troppetit{
max-width : 88px;
padding-top: 0px;
}

.troppetit9{
max-width : 80px;
padding-top: 0px;
}

.troppetit2{
max-width : 72px;
padding-top: 0px;
}

.troppetit3{
max-width : 64px;
padding-top: 0px;
}

.troppetit4{
max-width : 56px;
padding-top: 0px;
}

.troppetit5{
max-width : 96px;
padding-top: 0px;
}

.troppetit6{
max-width : 104px;
padding-top: 0px;
}

.troppetit7{
max-width : 112px;
padding-top: 0px;
}

.tropgrand{
max-width : 40px;
padding-top: 0px;
}

.tropgrand2{
max-width : 36px;
padding-top: 0px;
}


/* On garde les couleurs des cartes mêmes en adaptant la taille de celle-ci à l'écran */


.card--water {
  background: linear-gradient(120deg, #3b70ee 0%, #72b4f8 46%, #0c64bf 100%);
  box-shadow: 0px 5px 20px -10px #000851;
}
.card--water .card__type {
  background-color: #3b70ee;
}

.card--rock {
  background: linear-gradient(110deg, #927d24 0%, #665a26 46%, #ada273 100%);
  box-shadow: 0px 5px 20px -10px #000851;
}
.card--rock .card__type {
  background-color: #927d24;
}

.card--electric {
  background: linear-gradient(90deg, #ffde00 34%, #e8ff99 83%);
}
.card--electric .card__type {
  background-color: #ffde00;
}
.card--fire {
  background: linear-gradient(0deg, #c71800 10%, #fcc245 100%);
}
.card--fire .card__type {
  background-color: #c71800;
}
.card--psychic {
  background: linear-gradient(140deg, #ffa7f9 0%, #ff2cc3 39%, #ffe3a7 100%);
}
.card--psychic .card__type {
  background: #ff2cc3;
}

.card--dark {
  background: linear-gradient(20deg, #1e1e1e 0%, #120c36 53%, #000000 100%);
}
.card--dark .card__type {
  background: #000000;
}

.card--bug {
  background: linear-gradient(140deg, #c4da3d 0%, #6e7f0e 69%, #275009 100%);
}
.card--bug .card__type {
  background: #6e7f0e;
}
.card--ice {
  background: linear-gradient(230deg, #caeaf6 0%, #a0eaf1 46%, #6fb8eb 100%);
}
.card--ice .card__type {
  background: #93e1e8;
}
.card--fairy {
  background: linear-gradient(45deg, #ffe6f0 0%, #ffc5e0 34%, #ffa6b9 71%, #ff8a95 100%);
}
.card--fairy .card__type {
  background: #ff8a95;
}

.card--steel {
  background: linear-gradient(70deg, #9d9da2 0%, #e4e4e7 41%, #a5a5b1 100%); /*A MODIF*/
}
.card--steel .card__type {
  background: #a5a5b1;
}

.card--poison {
  background: linear-gradient(20deg, #5c0249 10%, #100b32 43%, #a040a0 100%);
}
.card--poison .card__type {
  background: #5c0249;
}

.card--fight {
  background: linear-gradient(140deg, #f28c87 0%, #c03028 69%, #7c130e 100%);
}
.card--fight .card__type {
  background: #c03028;
}

.card--dragon {
  background: linear-gradient(215deg, #c9b6f8 0%, #7038f8 49%, #3a09b1 90%);
}
.card--dragon .card__type {
  background: #7038f8;
}

.card--grass {
  background: linear-gradient(140deg, #30780d 0%, #78c850 39%, #ffe3a7 100%);
}
.card--grass .card__type {
  background: #78c850;
}

.card--ghost {
  background: linear-gradient(230deg, #b69ae5 0%, #705898 46%, #42286d 100%);
}
.card--ghost .card__type {
  background: #705898;
}

.card--ground {
  background: linear-gradient(190deg, #f6d373 0%, #d6b046 46%, #b78b0f 100%);
}
.card--ground .card__type {
  background: #d6b046;
}

.card--fly {
  background: linear-gradient(140deg, #f0caed 0%, #ad9ae9 32%, #a890f0 69%, #ffe3a7 100%);
}
.card--fly .card__type {
  background: #a890f0;
}

.card--normal {
  background: linear-gradient(110deg, #cbcbc1 0%, #a8a878 100%);
  box-shadow: 0px 5px 20px -10px #a8a878;
}
.card--normal .card__type {
  background-color: #a8a878;
}

.card--icesteel {
  background: linear-gradient(45deg, #caeaf6 0%, #93e1e8 38%, #e4e4e7 62%, #a5a5b1 100%);
}
.card--icesteel .card__type {
  background: #93e1e8;
}
.card--icesteel .card__type2 {
  background: #a5a5b1;
}

.card--flydark {
  background: linear-gradient(125deg, #ad9ae9 14%, #a890f0 37%, #191919 57%);
}
.card--flydark .card__type {
  background: #a890f0;
}
.card--flydark .card__type2 {
  background: #191919;
}

.card--grounddark {
  background: linear-gradient(45deg, #d6b046 40%, #191919 55%);
}
.card--grounddark .card__type {
  background: #d6b046;
}
.card--grounddark .card__type2 {
  background: #191919;
}

.card--normalground {
background: linear-gradient(-60deg, #a67d0a 0%, #d6b046 39%, #cbcbc1 59%, #a8a878 97%);
}
.card--normalground .card__type {
  background: #a8a878;
}
.card--normalground .card__type2 {
  background: #d6b046;
}

.card--groundpsychic {
background: linear-gradient(-60deg, #ffa7f9 0%, #ff2cc3 33%, #d6b046 58%, #b78b0f 100%);
}
.card--groundpsychic .card__type {
  background: #d6b046;
}
.card--groundpsychic .card__type2 {
  background: #ff2cc3;
}

.card--flyfight {
  background: linear-gradient(125deg, #ad9ae9 14%, #a890f0 40%, #ffe3a7 50%, #f28c87 60%, #c03028 70%);
}
.card--flyfight .card__type {
  background: #a890f0;
}
.card--flyfight .card__type2 {
  background: #c03028;
}

.card--dragonfight {
  background: linear-gradient(45deg, #c9b6f8 0%, #7038f8 38%, #c03028 62%, #f28c87 100%);
}
.card--dragonfight .card__type {
  background: #7038f8;
}
.card--dragonfight .card__type2 {
  background: #c03028;
}

.card--firefight {
background: linear-gradient(-60deg, #c03028 34%, #f28c87 43%, #c71800 69%, #fcc245 89%);
}
.card--firefight .card__type {
  background: #c71800;
}
.card--firefight .card__type2 {
  background: #c03028;
}

.card--grassghost {
background: linear-gradient(-58deg, #705898 39%, #876faf 49%, #78c850 59%);
}
.card--grassghost .card__type {
  background: #78c850;
}
.card--grassghost .card__type2 {
  background: #705898;
}


.card--waterelectric {
background: linear-gradient(-60deg, #ffde00 39%, #e8ff99 46%, #72b4f8 59%, #3b70ee 97%);
}
.card--waterelectric .card__type {
  background: #3b70ee;
}
.card--waterelectric .card__type2 {
  background: #ffde00;
}


.card--electricpsychic {
background: linear-gradient(-60deg, #ff2cc3 33%, #ffe3a7 47%, #ffde00 58%, #e8ff99 74%);
}
.card--electricpsychic .card__type {
  background: #ffde00;
}
.card--electricpsychic .card__type2 {
  background: #ff2cc3;
}


.card--steelfight {
background: linear-gradient(-60deg, #c03028 28%, #e05f58 44%, #a5a5b1 58%, #9b9b9c 74%);
}
.card--steelfight .card__type {
  background: #a5a5b1;
}
.card--steelfight .card__type2 {
  background: #c03028;
}


.card--fightbug {
background: linear-gradient(-60deg, #6e7f0e 31%, #bad520 44%, #d97670 55%, #c03028 61%);
}
.card--fightbug .card__type {
  background: #c03028;
}
.card--fightbug .card__type2 {
  background: #6e7f0e;
}


.card--steelfly {
background: linear-gradient(-60deg, #a890f0 39%, #d3ccea 51%, #a5a5b1 64%);
}
.card--steelfly .card__type {
  background: #a5a5b1;
}
.card--steelfly .card__type2 {
  background: #a890f0;
}

.card--electricwater {
background: linear-gradient(55deg, #ffde00 33%, #f1e48c 46%, #72b4f8 57%, #3b70ee 68%);
}
.card--electricwater .card__type {
  background-color: #ffde00;
}
.card--electricwater .card__type2 {
   background: #3b70ee;
}

.card--groundfly {
background: linear-gradient(-70deg, #a890f0 39%, #d6b046 71%, #b78b0f 100%);
}
.card--groundfly .card__type {
background-color: #d6b046;
}
.card--groundfly .card__type2 {
  background: #a890f0; 
}

.card--waterground {
background: linear-gradient(-60deg, #d6b046 39%, #e6c874 46%, #72b4f8 59%, #3b70ee 97%);
}
.card--waterground .card__type {
  background: #3b70ee;
}
.card--waterground .card__type2 {
  background: #d6b046;
}

.card--grassbug {
background: linear-gradient(-60deg, #6e7f0e 36%, #c4da3d 50%, #78c850 63%, #30780d 97%);
}
.card--grassbug .card__type {
  background: #78c850;
}
.card--grassbug .card__type2 {
  background: #6e7f0e;
}

.card--grassground {
background: linear-gradient(-60deg, #d6b046 44%, #78c850 59%);
}
.card--grassground .card__type {
  background: #78c850;
}
.card--grassground .card__type2 {
  background: #d6b046;
}


.card--grassfight {
background: linear-gradient(-60deg, #c03028 40%, #78c850 59%);
}
.card--grassfight .card__type {
  background: #78c850;
}
.card--grassfight .card__type2 {
  background: #c03028;
}

.card--flyfairy {
background: linear-gradient(55deg, #a890f0 33%, #d3ccea 51%, #ff8a95 77%);
}
.card--flyfairy .card__type {
  background: #a890f0; 
}
.card--flyfairy .card__type2 {
  background: #ff8a95; 
}


.card--electricfire {
background: linear-gradient(55deg, #ffde00 33%, #fca445 49%, #c71800 58%);
}
.card--electricfire .card__type {
  background-color: #ffde00;
}
.card--electricfire .card__type2 {
   background: #c71800;
}

.card--flypoison {
background: linear-gradient(50deg, #a890f0 33%, #d3ccea 51%, #5c0249 80%);
}
.card--flypoison .card__type {
  background: #a890f0; 
}
.card--flypoison .card__type2 {
  background: #5c0249; 
}

.card--electricfairy {
background: linear-gradient(45deg, #ffde00 39%, #ffa6b9 59%,  #ff8a95 68%);
}
.card--electricfairy .card__type {
  background-color: #ffde00;
}
.card--electricfairy .card__type2 {
  background: #ff8a95;
}

.card--rockfight {
background: linear-gradient(-60deg, #c03028 44%, #927d24 59%);
}
.card--rockfight .card__type {
  background: #927d24;
}
.card--rockfight .card__type2 {
  background: #c03028;
}

.card--ghostdark {
background: linear-gradient(55deg, #705898 33%, #b69ae5 49%, #191919 58%);
}
.card--ghostdark .card__type {
  background-color: #705898;
}
.card--ghostdark .card__type2 {
   background: #191919;
}


.card--bugfairy {
background: linear-gradient(48deg, #a8b820 36%, #e8ff99 51%, #ff8a95 69%);
}
.card--bugfairy .card__type {
  background:  #a8b820; 
}
.card--bugfairy .card__type2 {
  background:  #ff8a95; 
}

.card--waterdark {
  background: linear-gradient(50deg, #3b70ee 35%,  #191919 55%);
}
.card--waterdark .card__type {
  background: #3b70ee;
}
.card--waterdark .card__type2 {
  background: #191919;
}

.card--waterfairy {
background: linear-gradient(55deg, #3b70ee 33%, #ffc5e0 49%, #ff8a95 58%);
}
.card--waterfairy .card__type {
  background-color: #3b70ee;
}
.card--waterfairy .card__type2 {
   background: #ff8a95;
}

.card--waterpsychic {
background: linear-gradient(-60deg, #ffa7f9 0%, #ff2cc3 40%, #3b70ee 60%, #bebec8 100%);
}
.card--waterpsychic .card__type {
  background: #3b70ee;
}
.card--waterpsychic .card__type2 {
  background: #ff2cc3;
}

.card--dragonice {
  background: linear-gradient(45deg, #7038f8 40%, #93e1e8 60%);
}
.card--dragonice .card__type {
  background: #7038f8;
}
.card--dragonice .card__type2 {
  background: #93e1e8;
}

.card--rocksteel {
background: linear-gradient(45deg, #927d24 33%, #d3ccea 51%, #a5a5b1 100%);
}
.card--rocksteel .card__type {
  background: #927d24;
}
.card--rocksteel .card__type2 {
  background: #a5a5b1;
}

.card--steelpsychic {
background: linear-gradient(-60deg, #ffa7f9 0%, #ff2cc3 40%, #a5a5b1 60%, #bebec8 100%);
}
.card--steelpsychic .card__type {
  background: #a5a5b1;
}
.card--steelpsychic .card__type2 {
  background: #ff2cc3;
}

.card--grasspoison {
  background: linear-gradient(120deg, #30780d 0%, #78c850 47%,  #a040a0 57%, #5c0249 80%);
}
.card--grasspoison .card__type {
  background: #78c850;
}
.card--grasspoison .card__type2 {
  background: #5c0249;
}

.card--dragondark {
  background: linear-gradient(50deg, #7038f8 45%, #191919 55%);
}
.card--dragondark .card__type {
  background: #7038f8;
}
.card--dragondark .card__type2 {
  background: #191919;
}

.card--poisondark {
  background: linear-gradient(50deg, #5c0249 35%,  #191919 55%);
}
.card--poisondark .card__type {
  background: #5c0249;
}
.card--poisondark .card__type2 {
  background: #191919;
}

.card--firesteel {
  background: linear-gradient(125deg, #c71800 24%, #fcc245 40%, #cacad1 60%, #a5a5b1 75%, #848489 94%);
}
.card--firesteel .card__type {
  background: #c71800;
}
.card--firesteel .card__type2 {
  background: #a5a5b1;
}

.card--groundice {
  background: linear-gradient(45deg, #d6b046 40%, #93e1e8 60%);
}
.card--groundice .card__type {
  background: #d6b046;
}
.card--groundice .card__type2 {
  background: #93e1e8;
}

.card--groundghost {
  background: linear-gradient(45deg, #d6b046 40%, #b69ae5 50%, #705898 60%);
}
.card--groundghost .card__type {
  background: #d6b046;
}
.card--groundghost .card__type2 {
  background: #705898;
}

.card--grasspsychic {
background: linear-gradient(-60deg, #e386c8 4%, #ff2cc3 33%, #ffe3a7 47%, #78c850 58%, #e8ff99 74%);
}
.card--grasspsychic .card__type {
  background: #78c850;
}
.card--grasspsychic .card__type2 {
  background: #ff2cc3;
}

.card--steelghost {
  background: linear-gradient(55deg, #8c8c90 7%, #a5a5b1 36%, #b8b8c7 44%, #b69ae5 50%, #705898 75%, #42286d 94%);
}
.card--steelghost .card__type {
  background: #a5a5b1;
}
.card--steelghost .card__type2 {
  background: #705898;
}

.card--fairysteel {
background: linear-gradient(-60deg, #a5a5b1 39%, #ffa6b9 71%, #ff8a95 100%);
}
.card--fairysteel .card__type {
  background: #ff8a95;
}
.card--fairysteel .card__type2 {
  background: #a5a5b1; 
}

.card--electricfly {
background: linear-gradient(-70deg, #a890f0 39%, #f8d030 71%, #ffde00 100%);
}
.card--electricfly .card__type {
background-color: #ffde00;
}
.card--electricfly .card__type2 {
  background: #a890f0; 
}


.card--flynormal {
background: linear-gradient(45deg, #a890f0 33%, #d3ccea 51%, #a8a878 100%);
}
.card--flynormal .card__type {
  background: #a890f0; 
}
.card--flynormal .card__type2 {
  background: #a8a878; 
}

.card--waterpoison {
background: linear-gradient(55deg, #3b70ee 34%, #5c0249 59%);
}
.card--waterpoison .card__type {
  background-color: #3b70ee;
}
.card--waterpoison .card__type2 {
  background: #5c0249;
}

.card--waterghost {
background: linear-gradient(-70deg, #705898 39%, #b69ae5 55%, #3b70ee 64%);
}
.card--waterghost .card__type {
  background-color: #3b70ee;
}
.card--waterghost .card__type2 {
  background: #705898;
}

.card--bugfight {
background: linear-gradient(45deg, #a8b820 33%, #d3ccea 51%,  #c03028 68%);
}
.card--bugfight .card__type {
  background: #a8b820; 
}
.card--bugfight .card__type2 {
  background:  #c03028; 
}

.card--dragonground {
background: linear-gradient(-70deg, #d6b046 39%, #b69ae5 55%, #7038f8 64%);
}
.card--dragonground .card__type {
  background-color: #7038f8;
}
.card--dragonground .card__type2 {
  background: #d6b046;
}

.card--bugfly {
background: linear-gradient(48deg, #a8b820 36%, #d3ccea 51%,  #a890f0 69%);
}
.card--bugfly .card__type {
  background: #a8b820; 
}
.card--bugfly .card__type2 {
  background:  #a890f0; 
}

.card--electricbug {
background: linear-gradient(48deg, #a8b820 36%, #e8ff99 51%,  #ffde00 69%);
}
.card--electricbug .card__type {
  background:  #a8b820; 
}
.card--electricbug .card__type2 {
  background:  #ffde00; 
}

.card--bugsteel {
background: linear-gradient(48deg, #a8b820 36%, #d3ccea 51%,  #a5a5b1 69%);
}
.card--bugsteel .card__type {
  background: #a8b820; 
}
.card--bugsteel .card__type2 {
  background:  #a5a5b1; 
}







}	






































/* MISE EN FORME ET ANIMATION DU MENU PRINCIPAL */
nav{
  display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
  justify-content:space-between; /* Permet de mettre les enfants sur chaque bout du parent */
  position : relative;
  z-index: 11;
  /*position : fixed;  permet de commencer l'image tout en haut de la page c'est à dire derrière le menu */
  top : 0; /* permet de faire descendre mon menu, de ne pas el coller tout en haut de la page */
  left : 0;
  width : 100%;
  height: 50px; /* modifie la hauteur de la div à 50px */
  line-height:40px; /* Permet de centre horizontalement */
  font-size:23px; /* Taille de la police d'écriture */
    margin-top : -50px;
}

.navtest {
  display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
  justify-content:space-between; /* Permet de mettre les enfants sur chaque bout du parent */
  position : relative;
  z-index: 10;
  /*position : fixed;  permet de commencer l'image tout en haut de la page c'est à dire derrière le menu */
  top : 0; /* permet de faire descendre mon menu, de ne pas el coller tout en haut de la page */
  left : 0;
  width : 100%;
  line-height:32px; /* Permet de centre horizontalement */
  background : linear-gradient(to right, #1e1c59, #2783c1);
  font-size:23px; /* Taille de la police d'écriture */
}

.niv .niv0 .icon { /* Fait disparaitre l'icone menu pour ne l'utiliser qu'en format phone */
  display: none; 
} 

ul {
	list-style: none
}

a {
  color: #231d76;
  text-decoration: none;
}
.texteinscription a {
  color: white;
  text-decoration: none;
}
.texteinscription2 a {
	color : #2090ca;
	text-decoration: none;
}

.nav-button {
  /*display: none;  pas de bouton tant qu'on a pas la bonen taille d'écran */
  position: absolute;
  top: 8px;
  right: 1rem;
  z-index: 1;
  height : 30px;
  width: 30px;
  background-color: transparent;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 5px;
  padding: 0;
  outline: 0;
  border: 0;
  color: white;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-button::before,
.nav-button::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  display: block;
  height: 5px;
  background: currentColor;
  transition: .25s;
  transition-property: transform, top;
  will-change: transform, top;
}
.nav-button::before {
  top: 0;
}
.nav-button::after {
  top: calc(100% - 4px);
}






/* MISE EN FORME ET ANIMATION DU MENU PRINCIPAL */

.menuphone .menuphone0 #myLinks {
  display: none;
}

a.icon {
  background: none;
  display: block;
  position: absolute;
  color : white;
  right: 0;
  top: 0;
  display:none;
}

.menuphone {
  /*position: relative;*/
  display: none;
  width : 100%;
}
.menuphone a {
  color: white;
  text-decoration: none;
  font-size: 20px;
}


.menuphone .taillebars a{
  font-size: 40px;
   margin-top : 2px;
   float:right;
}
 /* Mise en forme du menu apparaissant  */
.menuphone {
  display:block; /*Permet de modifier l'alignage par defaut des balises enfants des types block */
  justify-content:center; /* Avec le flex permet de coller et centre les balises enfants */
  padding:0 0% 0 0%;
  /* Permet de decaler le menu du bord droit */
 }
 
 .menuphone .menuphone0 a{
	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
	height:40px; /* Modifie la hauteur */
	padding:3px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
}
 
.menuphone .menuphone0 a .fa{
	position : relative;
	transition : 0.5s;
}

.menuphone .menuphone0 a:hover .fa{
	/*transform : scale(1.1);*/
	transform : rotateY(360deg); 
}

.menuphone .menuphone0 a .far{
	position : relative;
	transition : 0.5s;
}

.menuphone .menuphone0 a:hover .far{
	transform : rotateY(360deg);
}

.menuphone .menuphone0 a .fas{
	position : relative;
	transition : 0.5s;
}

.menuphone .menuphone0 a:hover .fas{
	transform : rotateY(360deg);
}

.menuphone .menuphone0 a .fab{
	position : relative;
	transition : 0.5s;
}

.menuphone .menuphone0 a:hover .fab{
	transform : rotateY(360deg);
}

.niv{
  display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
  justify-content:center; /* Avec le flex permet de coller et centre les balises enfants */
    margin-right : auto;
  margin-left : auto;

   /* padding:0 9% 0 6%;
 Permet de decaler le menu du bord droit */
 }

.texte{ /* Cible uniquement le premier ".niv0" */
	color:white; /* change la couleur de la police en blanc */
	padding:10px 0px 4px 30px;  /*ajoute une marge interieur à droite et à gauche de 30px */
    cursor:default; /* Permet de modifier le pointer de la sourie */
    font-size:30px;
}

.texte span{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
	/*color:rgba(234,189,92, 1);*/
	color:rgba(255,203,82, 1); 
}

.niv .niv0 a{
	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
	height:40px; 
	padding:3px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
}

.niv .niv0 a .fa{
	position : relative;
	transition : 0.5s;
}

.niv .niv0 a:hover .fa{
	/*transform : scale(1.1);*/
	transform : rotateY(360deg); 
}

.niv .niv0 a .far{
	position : relative;
	transition : 0.5s;
}

.niv .niv0 a:hover .far{
	transform : rotateY(360deg);
}

.niv .niv0 a .fas{
	position : relative;
	transition : 0.5s;
}

.niv .niv0 a:hover .fas{
	transform : rotateY(360deg);
}

.niv .niv0 a .fab{
	position : relative;
	transition : 0.5s;
}

.niv .niv0 a:hover .fab{
	transform : rotateY(360deg);
}

.niv .niv0>a{
	color:white; /* change la couleur de la police en blanc */
	text-align:center; /* Centre le texte horizontalement */
}
.niv .niv0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}
.niv .niv0{
	border-top:4px solid rgba(0,0,0, 0); /* Permet de garder le centrage verticalement entre avec et sans le hover sur le texte */
}
.niv .niv0:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
}
.niv .niv0:nth-child(1):hover{
	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
	background:rgba(51,157,255, 0.15); /* Couleur du font de la div */
}
.niv .niv0:nth-child(2):hover{
	border-color:rgba(46,204,113,1.0);
	background:rgba(46,204,113, 0.15);
}
.niv .niv0:nth-child(3):hover{
	border-color:rgba(234,97,83,1.0);
	background:rgba(234,97,83, 0.15);
}
.niv .niv0:nth-child(4):hover{
	border-color:rgba(244,208,63,1.0);
	background: rgba(244, 208, 63, 0.15);
}

.niv .niv0:nth-child(5):hover{
	border-color:rgba( 92, 223, 234 ,1.0);
	background:rgba( 92, 223, 234 , 0.15);
}

.niv .niv0:nth-child(6):hover{
	border-color:rgba(189,195,199,1.0);
	background:rgba(189,195,199, 0.15);
}

.niv .niv1{
	display:none; /* Cache le sous menu sans le :hover */
	color:#1e1c59; /* Met le texte en noir */
}

.niv .niv1 .niv1sous{
	display:none; /* Cache le sous menu sans le :hover */
	color:#1e1c59; /* Met le texte en noir */
}

.niv .niv1bis{
	display:none; /* Cache le sous menu sans le :hover */
	color:#1e1c59; /* Met le texte en noir */
}

.niv .niv1bis2{
	display:none; /* Cache le sous menu sans le :hover */
	color:#1e1c59; /* Met le texte en noir */
}

.niv .niv1bis3{
	display:none; /* Cache le sous menu sans le :hover */
	color:#1e1c59; /* Met le texte en noir */
}

.niv .niv0:hover .niv1{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}

.niv .niv0:hover .niv1 .niv1sous{
	display:none; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}

.niv .niv0:hover .niv1bis{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}
.niv .niv0:hover .niv1bis2{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}

.niv .niv0:hover .niv1bis3{
	display:block; /* Permet d'afficher le sous menu pendant le :hover */
	position:absolute; /* Permet de passer par dessus le reste de ton site */
}

.niv .niv1 a{
	background:rgba(46,204,113, 0.70);	/* Couleur du font de la div */
}

.niv .niv1 .niv1sous a{
	background:rgba(46,204,113, 0.70);	/* Couleur du font de la div */
}

.niv .niv1bis a{
	background:rgba(244,208,63,0.70); /* Couleur du font de la div */
}

.niv .niv1bis2 a{
	background:rgba(234,97,83, 0.70); /* Couleur du font de la div */
	/*width : 120px; */
}

.niv .niv1bis3 a{
	background:rgba( 92, 223, 234 , 0.70); /* Couleur du font de la div */
}

.niv .niv0 .niv1 a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba(46,204,113, 0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

.niv .niv0 .niv1 a:hover .niv1sous {
	color:white; /* change la couleur de la police en blanc */
	background:rgba(46,204,113, 0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

.niv .niv1bis a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba(244,208,63,0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

.niv .niv1bis2 a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba(234,97,83, 0.9); /* Couleur du font de la div */
	transition : 0.3s;
}

.niv .niv1bis3 a:hover{
	color:white; /* change la couleur de la police en blanc */
	background:rgba( 92, 223, 234 , 0.90); /* Couleur du font de la div */
	transition : 0.3s;
}




/* MISE EN FORME DU SCROLL */

.scroll {
	position : fixed; /* permet de faire suivre le bouton avec la souris et de l'avoir all time sur l'écran*/
	top: 0;
	right : 0;
	width : 110px;
	height : 40px;
	display : block;
	background : #424558;
	text-align: center;
	line-height : 40px; /*emplacement du text*/
	color:white;
	font-size : 18px;
	text-decoration : none;
	z-index:10000;
}

.scroll.top {
	top : calc(10% - 37px);
	background : rgba(55,165,220, 0.65); 
}

.scroll.bottom {
	top : calc(10% - -3px);
	background : rgba(255,203,82, 0.65); 
}

.menu-toggle {
		color : #fff;
		float : right;
		line-height : 40px;
		font-size : 23px;
		cursor : pointer;
		display : none;
}







/* MISE EN FORME DU BANDEAU */

.bandeau {
	z-index:1;
	height: 150px;
	margin : 10px 0px;
	background-image : url("/bandeauimage.png");
	/*linear-gradient(125deg, #1e1c59, #2783c1, #fff); 
	/*background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);  effet arc en ciel pour background, comme par ex logo interview */
	background-size : 100%;
	width : 100%;
	animation : bganimation 7s infinite;
}


.container {
	text-align : center;
	position : absolute;
	top : 135px;
	left :50%;
	transform : translate(-50%,-50%);
	width:100%;
}

.container span {
	text-transform : uppercase; /* permet de mettre toutes les lettres en majuscules*/
	display : block;
}
	


@keyframes text {
	0% {
		color : white;
		margin-bottom : -30px;
}
}

/* Animation bandeau */
	
.texte1 {
	font-size:35px;
	color : white;
	font-weight:bold;
	font-weight : 700px;
	letter-spacing : 3px;
	margin-bottom : 0px; /* définit la marge basse appliquée à un élément, permet de coller ou non avec ke texte en dessous */
	position : relative;
	animation : text 1.5s 1;
}

.texte2 {
	font-size:25px;
	color : white; /* mettre blanc quand arrière plan corrigé */
	font-weight:bold;
}

@keyframes bganimation {
	0% {
		background-position : 0% 50%;
	}
	50% {
		background-position : 100% 50%;
	}
	100% {
		background-position : 0% 50%;
	}
}

/* MISE EN FORME DU BANDEAU2 */

.bandeau2 {
	z-index:1;
	height: 25px;
	margin : 5px 0px;
	/*background-image : linear-gradient(125deg, #1e1c59, #2783c1, #fff); */
	background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);  /*effet arc en ciel pour background, comme par ex logo interview */
	/*background-image : url("/bandeauimage3.png");*/
	background-size : 100%;
	width : 100%;
}


.bandeau2 .texteinscription {
	font-size:20px;
	color : white;
	padding : 0px 30px 0px 30px;
}

.texteinscription a {
	margin-right : 30px;
}

.texteinscription2 {
	font-size:20px;
	color : #2679b7;
	padding : 0px 30px 0px 30px;
}
















 /* ------------------------------ MEDIA QUERIES ----------------------------- */
 
 /* ------------------------------ MEDIA QUERIES entre 1280 et 1160----------------------------- */
@media screen and (min-width: 1160px) and (max-width: 1280px) {

.scroll.top {
	display : none; /* Disparition du scroll sur téléphone, enfin, jusque 480... */
}

.scroll.bottom {
	display : none; /* Disparition du scroll sur téléphone */
}
}


/* ------------------------------ MEDIA QUERIES entre 1300 et 1000----------------------------- */	
/* ------------------------------------------- MENU ------------------------------------------- */	
@media screen and (min-width: 1000px) and (max-width: 1300px) {

.bandeau {
	height: 140px;
	margin : 10px 0px;
}
.logoadl1 img{
	height: 140px;
} 

/* Animation bandeau */	
.container .texte1 {
	display: none;
}
.container .texte2 {
	display: none;
}

.menuphone .menuphone0 #myLinks {
  display: none;
}

a.icon {
  background: none;
  display: block;
  position: absolute;
  color : white;
  right: 0;
  top: 0;
}

.niv {
  display:none;
}  

.menuphone .menuphone0 a. {
  background: none;
  display: block;
  position: absolute;
  color : white;	
}

.taillebars a{
   font-size: 37px;
   margin-top : 6px;
   float:right;
   color :white;
   padding-left: 50px;
}

.menuphone {
	position: relative;
	width :100%;
}	
.menuphone a {
  color: white;
  text-decoration: none;
  font-size: 23px;
  text-align :center;
  width :100%;
}
.menuphone .menuphone0>a{
	color:white; /* change la couleur de la police en blanc */
	text-align:center;
}
.menuphone .menuphone0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}
.menuphone .menuphone0 a{
	border-top:4px solid rgba(0,0,0, 0);
}
.menuphone .menuphone0 a:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
}
 
 .menuphone .menuphone0 a:nth-child(1){
	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
	background:rgba(51,157,255, 0.75); /* Couleur du font de la div */
}
.menuphone .menuphone0 a:nth-child(2){
	border-color:rgba(46,204,113,1.0);
	background:rgba(46,204,113, 0.75);
}
.menuphone .menuphone0 a:nth-child(3){
	border-color:rgba(234,97,83,1.0);
	background:rgba(234,97,83, 0.75);
}
.menuphone .menuphone0 a:nth-child(4){
	border-color:rgba(244,208,63,1.0);
	background: rgba( 244, 208, 63, 0.75);
}

.menuphone .menuphone0 a:nth-child(5){
	border-color:rgba( 92, 223, 234 ,1.0);
	background:rgba( 92, 223, 234 , 0.75);
}

.menuphone .menuphone0 a:nth-child(6){
	border-color:rgba(189,195,199,1.0);
	background:rgba(189,195,199, 0.75);
}

}

/* ------------------------------ MEDIA QUERIES entre 1159 et 1000----------------------------- */	
@media screen and (min-width: 1000px) and (max-width: 1159px) {
.scroll.top {
	display : none; 
}

.scroll.bottom {
	display : none; /* Disparition du scroll sur téléphone */
}
}


/* ------------------------------ MEDIA QUERIES entre 999 et 768----------------------------- */	
@media screen and (min-width: 768px) and (max-width: 999px) {	
.niv {
  display:none;
}  

.menuphone .menuphone0 #myLinks {
  display: none;
}

a.icon {
  background: none;
  display: block;
  position: absolute;
  color : white;
  right: 0;
  top: 0;
}

.menuphone .menuphone0 a. {
  background: none;
  display: block;
  position: absolute;
  color : white;	
}

.taillebars a{
   font-size: 35px;
   margin-top : 9px;
   float:right;
   color :white;
   padding-left: 50px;
}

.menuphone {
	position: relative;
	width :100%;
}	
.menuphone a {
  color: white;
  text-decoration: none;
  font-size: 22px;
  text-align :center;
}
.menuphone .menuphone0>a{
	color:white; /* change la couleur de la police en blanc */
	text-align:center;
}
.menuphone .menuphone0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}
.menuphone .menuphone0 a{
	border-top:4px solid rgba(0,0,0, 0);
}
.menuphone .menuphone0 a:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
}
 
 .menuphone .menuphone0 a:nth-child(1){
	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
	background:rgba(51,157,255, 0.75);/* Couleur du font de la div */
	height : 35px;
}
.menuphone .menuphone0 a:nth-child(2){
	border-color:rgba(46,204,113,1.0);
	background:rgba(46,204,113, 0.75);
	height : 35px;
}
.menuphone .menuphone0 a:nth-child(3){
	border-color:rgba(234,97,83,1.0);
	background:rgba(234,97,83, 0.75);
	height : 35px;
}
.menuphone .menuphone0 a:nth-child(4){
	border-color:rgba(244,208,63,1.0);
	background: rgba( 244, 208, 63, 0.75);
	height : 35px;
}

.menuphone .menuphone0 a:nth-child(5){
	border-color:rgba( 92, 223, 234 ,1.0);
	background:rgba( 92, 223, 234 , 0.75);
	height : 35px;
}

.menuphone .menuphone0 a:nth-child(6){
	border-color:rgba(189,195,199,1.0);
	background:rgba(189,195,199, 0.75);
	height : 35px;
}

}


/* ------------------------------ MEDIA QUERIES entre 767 et 480----------------------------- */	
@media screen and (min-width: 480px) and (max-width: 767px) { 
.bandeau2 {
	z-index:1;
	height: 25px;
	margin : 5px 0px;
	/*background-image : linear-gradient(125deg, #1e1c59, #2783c1, #fff); */
	background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);  /*effet arc en ciel pour background, comme par ex logo interview */
	background-size : 100%;
	width : 100%;
}
.bandeau2 .texteinscription {
	font-size:19px;
	color : white;
	padding : 0px 0px 0px 30px;
}

.texteinscription a {
	margin-right : 30px;
}
	
.niv {
  display:none;
}  

.menuphone .menuphone0 #myLinks {
  display: none;
}

a.icon {
  background: none;
  display: block;
  position: absolute;
  color : white;
  right: 0;
  top: 0;
}

.menuphone .menuphone0 a. {
  background: none;
  display: block;
  position: absolute;
  color : white;	
}

.taillebars a{
   font-size: 34px;
   margin-top : 9px;
   float:right;
   color :white;
   padding-left: 50px;
}

.menuphone {
	position: relative;
	width :100%;
	margin-bottom : -12px;
	margin-top : 10px;
}
	
.menuphone a {
  color: white;
  text-decoration: none;
  font-size: 21px;
  text-align :center;
}
.menuphone .menuphone0>a{
	color:white; /* change la couleur de la police en blanc */
	text-align:center;
}
.menuphone .menuphone0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}
.menuphone .menuphone0 a{
	border-top:4px solid rgba(0,0,0, 0);
}
.menuphone .menuphone0 a:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
}
 
 .menuphone .menuphone0 a:nth-child(1){
	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
	background:rgba(51,157,255, 0.75);/* Couleur du font de la div */
	height : 33px;
}
.menuphone .menuphone0 a:nth-child(2){
	border-color:rgba(46,204,113,1.0);
	background:rgba(46,204,113, 0.75);
	height : 33px;
}
.menuphone .menuphone0 a:nth-child(3){
	border-color:rgba(234,97,83,1.0);
	background:rgba(234,97,83, 0.75);
	height : 33px;
}
.menuphone .menuphone0 a:nth-child(4){
	border-color:rgba(244,208,63,1.0);
	background: rgba( 244, 208, 63, 0.75);
	height : 33px;
}

.menuphone .menuphone0 a:nth-child(5){
	border-color:rgba( 92, 223, 234 ,1.0);
	background:rgba( 92, 223, 234 , 0.75);
	height : 33px;
}

.menuphone .menuphone0 a:nth-child(6){
	border-color:rgba(189,195,199,1.0);
	background:rgba(189,195,199, 0.75);
	height : 33px;
}
}



@media screen and (min-width: 480px) and (max-width: 999px) { 

/*Ajustement du nouveau menu avec apparition du bandeau tout en haut */

nav{
  height:45px; 
  line-height:40px; 
  font-size:20px; 
}
.texte{ 
	padding:4px 15px; 
    font-size:28px;
}
.texte span{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.37em; /* Modifie la taille de la police de façon relative */
}

/* MISE EN FORME DU BANDEAU */

.bandeau {
	height: 112px;
	margin : 0px 0px 0px 0px;	
}

.container {
	display : none;
}

/* Animation bandeau */
	
.texte1 {
	display : none;
}
.texte2 {
	display : none;
}

.logoadl1 img{
	height: 112px;
	width: auto;
	padding-left : 15px;
} 

.logoadl1 img{
display : none;
}

/* Fin ajustement du nouveau menu avec apparition du bandeau sans animation */

.bandeau2 {
	z-index:1;
	height: 25px;
	margin : 6px 0px;
	/*background-image : linear-gradient(125deg, #1e1c59, #2783c1, #fff); */
	background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);  /*effet arc en ciel pour background, comme par ex logo interview */
	background-size : 100%;
	width : 100%;
}
.bandeau2 .texteinscription {
	font-size:19px;
	padding : 0px 0px 0px 15px;
}

.texteinscription a {
	margin-right : 20px;
}
/* Taille du bandeau qui bouge pour la promo des articles */
.texteinscription2 {
	font-size:19px;
	color : #2679b7;
	padding : 0px 20px 0px 20px;
}

.scroll.top {
	display : none; 
}

.scroll.bottom {
	display : none; /* Disparition du scroll sur téléphone */
}
}	
	
	
@media screen and (min-width: 1px) and (max-width: 479px) { 

/*Ajustement du nouveau menu avec apparition du bandeau tout en haut */

nav{
  height:40px; 
  line-height:40px; 
  font-size:20px; 
}
.texte{ /* Cible uniquement le premier ".niv0" */
	padding:2px 15px; /* ajoute une marge interieur à droite et à gauche de 30px */
    font-size:26px;
}
.texte span{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.25em; /* Modifie la taille de la police de façon relative */
}

/* MISE EN FORME DU BANDEAU */

.bandeau {
	z-index:1;
	height: 100px;
	margin : 0px 0px 0px 0px;	
	background-image : url("/bandeauimage.png");
	background-size : 100%;
	width : 100%;
}

.container {
	display : none;
}

/* Animation bandeau */
	
.texte1 {
	display : none;
}
.texte2 {
	display : none;
}

/*.logoadl1 img{
	height: 100px;
	width: auto;
	padding-left : 15px;
	padding-top : 20px;
} */

.logoadl1 img{
display : none;
}

/* Fin ajustement du nouveau menu avec apparition du bandeau sans animation */	

.bandeau2 {
	z-index:1;
	height: 25px;
	margin : 6px 0px;
	/*background-image : linear-gradient(125deg, #1e1c59, #2783c1, #fff); */
	background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);  /*effet arc en ciel pour background, comme par ex logo interview */
	background-size : 100%;
	width : 100%;
}
.bandeau2 .texteinscription {
	font-size:18px;
	color : white;
	padding : 0px 0px 0px 15px;
}

.texteinscription a {
	margin-right : 20px;
}
/* Taille du bandeau qui bouge pour la promo des articles */
.texteinscription2 {
	font-size:18px;
	color : #2679b7;
	padding : 0px 10px 0px 10px;
}

.niv {
  display:none;
}  
.scroll.top {
	display : none; /* Disparition du scroll sur téléphone, enfin, jusque 480... */
}

.scroll.bottom {
	display : none; /* Disparition du scroll sur téléphone */
}
.menuphone .menuphone0 #myLinks {
  display: none;
}

a.icon {
  background: none;
  display: block;
  position: absolute;
  color : white;
  right: 0;
  top: 0;
}

.taillebars a{
   font-size: 31px;
   margin-top : 15px;
   float:right;
   color :white;
   padding-left: 150px;
}

.menuphone .menuphone0 a. {
  background: none;
  display: inline;
  position: absolute;
}

.menuphone {
	position: relative;
	width :100%;
	margin-bottom : -12px;
	margin-top : 10px;
}

.menuphone a {
  color: white;
  font-size: 19px;
  text-align :center;
}
.menuphone .menuphone0>a{
	color:white; /* change la couleur de la police en blanc */
	text-align:center;
}
.menuphone .menuphone0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
	font-size:1.5em; /* Modifie la taille de la police de façon relative */
}
.menuphone .menuphone0 a{
	border-top:4px solid rgba(0,0,0, 0);
}
.menuphone .menuphone0 a:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
}
 
 .menuphone .menuphone0 a:nth-child(1){
	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
	background:rgba(51,157,255, 0.75);/* Couleur du font de la div */
	height : 31px;
}
.menuphone .menuphone0 a:nth-child(2){
	border-color:rgba(46,204,113,1.0);
	background:rgba(46,204,113, 0.75);
	height : 31px;
}
.menuphone .menuphone0 a:nth-child(3){
	border-color:rgba(234,97,83,1.0);
	background:rgba(234,97,83, 0.75);
	height : 31px;
}
.menuphone .menuphone0 a:nth-child(4){
	border-color:rgba(244,208,63,1.0);
	background: rgba( 244, 208, 63, 0.75);
	height : 31px;
}

.menuphone .menuphone0 a:nth-child(5){
	border-color:rgba( 92, 223, 234 ,1.0);
	background:rgba( 92, 223, 234 , 0.75);
	height : 31px;
}

.menuphone .menuphone0 a:nth-child(6){
	border-color:rgba(189,195,199,1.0);
	background:rgba(189,195,199, 0.75);
	height : 31px;
}
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

/* ---------------------- FOOTER ---------------------- */

.flex-rw {
  display: flex;
  flex-flow: row wrap;
}

footer {
  background-image : url("/bandeauimage12opacityfaibletransition.png");
  /*background: #2676b4;*/
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.footer-list-top {
  width: 31.22%;
}
.footer-list-top > li {
  text-align: center;
  padding-bottom: 0px /* Avant c'était 10px, permet de réduite l'écart entre mes lignes pour les listes, notamment liens rapides */
}
.footer-list-top > p {
  text-align: center;
  padding: 0 3px 0 3px;
  color: #fff;
}
.footer-list-header {
  padding: -10px 0 -10px 0;
  color: #fff;
  font: 33px "Playfair Display SC ", Teko, Permanent Marker;
}
.footer-list-anchor {
  font: 23px "Playfair Display SC ", Teko, Permanent Marker;
  color: #fff;
}
.footer-social-section {
  width: 100%;
  align-items: center;
  justify-content: space-around;
  position: relative;
  margin-top: -20px; /* Tentative de valeur négative pour rapprocher la liste des liens utiles */
}
.footer-social-section::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  border-top: 1px solid white;
  width: calc(100% - 20px)
}
.footer-social-overlap {
  position: relative;
  z-index: 2;
  /*background : #2676b4; */
  padding: 0 20px
}
.footer-social-connect {
  display: flex;
  align-items: center;
  font: 32px "Playfair Display SC ", Teko, Permanent Marker;
  color: #fff;
}
.footer-social-small { /* pour le with en plus petit */
  font-size: 19px;
  padding: 0px 20px /* écart entre le with et les mots qui l'entourent */
}
.footer-social-overlap > a {
  font-size: 30px;
  color : white;
}
.footer-social-overlap > a:not(:first-child) {
  margin-left: 0.38em
}
.footer-bottom-section { /* ligne avant le copyright */
  width: 100%;
  padding: 10px;
  border-top: 1px solid white;
  margin-top: 5px
}
.footer-bottom-section > div:first-child {
  margin-right: auto
}
.footer-bottom-wrapper {
  font-size: 20px;
  color: #fff
}

.texttest {
	padding-left : 130px;
	padding-right : 130px;
}
.texttestannotation {
		padding : 0 13.5%;
}	
	
	
	
	
	
	
	
	
	
	
	



.texttest {
	padding-left : 130px;
	padding-right : 130px;
}

p {
	color : black;
	font-family : "Teko", Lobster, Lato;
	font-size : 20px;
	text-align : justify;
	line-height : 25px;
}

@media screen and (min-width: 1160px) and (max-width: 1280px) {
.texttest {
	padding-left : 60px;
	padding-right : 60px;
}	
}

@media screen and (min-width: 1000px) and (max-width: 1159px) {
.texttest {
	padding-left : 60px;
	padding-right : 60px;
}	
}

@media screen and (min-width: 768px) and (max-width: 999px) {
.texttest {
	padding-left : 40px;
	padding-right : 40px;
}	
p {
	color : black;
	font-family : "Teko", Lobster, Lato;
	font-size : 19px;
	text-align : justify;
	line-height : 25px;
}
}

@media screen and (min-width: 480px) and (max-width: 767px) { /* Vraie rupture à 703?! */
.texttest {
	padding-left : 25px;
	padding-right : 25px;
}	
p {
	color : black;
	font-family : "Teko", Lobster, Lato;
	font-size : 19px;
	text-align : justify;
	line-height : 25px;
}
}



@media screen and (min-width: 1px) and (max-width: 479px) { 
.texttest {
	padding-left : 15px;
	padding-right : 15px;
}	
p {
	color : black;
	font-family : "Teko", Lobster, Lato;
	font-size : 17px;
	text-align : justify;
	line-height : 25px;
}
}