html {
margin:0;
padding:0;
background: url(image3.png) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}
/*.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: -0px -0px;
font-size: 30px;
}*/
.BlocFond{
height: 50px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.BlocFond7{
height: 250px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.BlocFond4{
height: 200px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(10,30,30,1), rgba(70,50,50,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: -12px;
margin-top: 0px;
}
.BlocFond5{
height: 1px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(10,30,30,1), red ,white, red, rgba(70,50,50,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.BlocFond6{
height: 1px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(10,30,30,1), rgb(132, 0, 194) ,rgb(250, 105, 255), rgb(132, 0, 194), rgba(70,50,50,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.pictogramme2:hover {
opacity: 0.5;
-webkit-filter: blur(1px);
filter: blur(1px);
-webkit-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.pictogramme2B:hover {
opacity: 100%;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
.Titre01{
color: white;
font-size: 100px;
text-align: center;
font-family: 'Rubik', sans-serif;
font-weight: bold;
font-style: italic;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.5));
margin-right: -8px;
margin-left: -8px;
margin-top: -8px;
margin-bottom: -0px;
background-position-y: start;
height: 200px;
}
.Titre02{
border:0px solid rgb(22, 22, 22);
text-align: justify;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
color: white;
font-size: 30px;
text-align: center;
font-family: 'Rubik', sans-serif;
font-weight: bold;
font-style: italic;
float: inherit;
}
.center{
margin-right: auto;
margin-left: auto;
width: 130px;
}
.center2{
margin-right: auto;
margin-left: auto;
width: 310px;
}
@media(min-width:1201px){
.grid-container {
display: grid;
height: auto;
align-content: center;
margin-left: -580px;
grid-template-columns: 230px 230px 230px 230px 230px;
grid-gap: 2px;
padding: 0px;
}
.centergrid{
align-items: center;
margin-right: auto;
margin-left: 50%;
width: 100%;
}
.pictogramme{
height: 230px;
align-items: baseline;
background-size: cover;
}
.pictogramme2{
position: absolute; /* positionnement hors flux */
z-index: 1;
background-size: cover;
height: 230px;
width: 230px;
}
.pictogramme2BText{
z-index: 6;
position: relative;
font-size: 20px;
text-align: center;
color: white;
align-content: center;
font-family: 'Rubik', sans-serif;
font-weight: bold;
font-style: normal;
align-items: center;
}
.pictogramme2Prix{
z-index: 1;
position: relative;
font-size: 14px;
text-align: end;
color: rgb(0, 0, 0);
font-family: 'Rubik', sans-serif;
font-weight: normal;
font-style: normal;
background-color: white;
padding-left: 5px;
padding-right: 5px;
}
.pictogramme2BPrix{
z-index: 6;
position: relative;
font-size: 14px;
text-align: end;
color: rgb(255, 255, 255);
font-family: 'Rubik', sans-serif;
font-weight: normal;
font-style: normal;
padding-left: 5px;
padding-right: 5px;
}
.pictogramme2BStatut{
z-index: 8;
position: absolute;
font-size: 15px;
text-align: justify;
color: rgb(229, 255, 0);
border: 1px yellow solid;
align-content: justify;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.pictogramme2Statut{
z-index: 1;
position: absolute;
font-size: 15px;
text-align: justify;
color: black;
align-content: justify;
background-color: yellow;
border: 1px yellow solid;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.pictogramme2BStatut2{
z-index: 8;
position: absolute;
font-size: 15px;
text-align: justify;
color: rgb(0, 174, 255);
border: 1px rgb(0, 174, 255) solid;
align-content: justify;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.pictogramme2Statut2{
z-index: 1;
position: absolute;
font-size: 15px;
text-align: justify;
color: black;
align-content: justify;
background-color: rgb(0, 174, 255);
border: 1px rgb(0, 174, 255) solid;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.sceau{
z-index: 6;
position: relative;
text-align: center;
color: white;
align-content: center;
font-family: 'Rubik', sans-serif;
font-weight: bold;
font-style: normal;
align-items: center;
height: 20px;
width: 20px;
}
.pictogramme2B{
z-index: 3;
position: absolute; /* positionnement hors flux */
width: 230px;
height: 230px;
background-size: cover;
opacity: 0;
}
.pictogramme2Black{
position: absolute; /* positionnement hors flux */
z-index: 2;
width: 230px;
height: 230px;
background-color: black;
opacity: 0.4;
text-align: center;
}
.pictogramme2Bcenter{
position: absolute; /* positionnement hors flux */
text-align: center;
margin-top: 100px;
width: 230px;
height: 130px;
z-index: 5;
opacity: 1;
}
.pictogramme2BLink{
position: absolute; /* positionnement hors flux */
text-align: center;
width: 230px;
height: 230px;
z-index: 8;
opacity: 0;
}
.pictogramme2BFlou{
position: absolute; /* positionnement hors flux */
z-index: 1;
width: 230px;
height: 230px;
-webkit-filter: contrast(200%);
filter: contrast(200%);
filter: brightness(0.4);
}
.pictogramme2Basdroite{
position: absolute; /* positionnement hors flux */
text-align: right;
vertical-align: text-bottom;
margin-top: 212px;
width: 230px;
height: 18px;
opacity: 1;
}
.center{
margin-right: auto;
margin-left: auto;
width: 700px;
}
.center2{
margin-right: auto;
margin-left: auto;
align-items: baseline;
width: 932px;
}
.BlocFond2{
height: 280px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.BlocFond3{
height: 240px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.titre_de_sections3{
font-size: 25px;
font-family: 'Faster One', cursive;
color: rgb(255, 255, 255);
font-weight: lighter;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.titre_de_sections1{
font-size: 30px;
font-family: 'Fugaz One', cursive;
color: rgb(255, 255, 255);
font-weight: lighter;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.titre_de_sections2{
font-size: 30px;
font-family: 'Bangers', cursive;
color: rgb(255, 255, 255);
font-weight: lighter;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.ghost{
display: none;
}
}
@media(max-width:1200px){
.grid-container{
position: absolute;
display: grid;
height: 100px;
align-content: center;
margin-left: -88px;
margin-right: 0px;
grid-row-gap: 10px;
grid-template-columns: 97px 97px 97px;
grid-gap: 5px;
padding: 0px;
}
.pictogramme{
height: 120px;
align-items: baseline;
background-size: cover;
}
.pictogramme2{
position:absolute;
height: 100px;
align-items: baseline;
background-size: cover;
}
.BlocFond2{
height: 450px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.BlocFond3{
height: 110px;
border:0px solid rgb(22, 22, 22);
text-align: justify;
padding:0px;
padding-block-start:0px;
border-radius:0px;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin:0;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 0px;
margin-top: 0px;
}
.titre_de_sections{
font-size: 20px;
font-family: 'Rubik', sans-serif;
color: rgb(255, 178, 11);
font-variant: small-caps;
font-weight: 500;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.pictogramme2BText{
z-index: 6;
position: relative;
font-size: 10px;
text-align: center;
color: white;
align-content: center;
font-family: 'Rubik', sans-serif;
font-weight: bold;
font-style: normal;
align-items: center;
}
.pictogramme2Prix{
z-index: 1;
position: relative;
font-size: 12px;
text-align: end;
color: rgb(0, 0, 0);
font-family: 'Rubik', sans-serif;
font-weight: normal;
font-style: normal;
background-color: white;
padding-left: 28px;
padding-right: 5px;
}
.pictogramme2BPrix{
z-index: 6;
position: relative;
font-size: 12px;
text-align: end;
color: rgb(255, 255, 255);
font-family: 'Rubik', sans-serif;
font-weight: normal;
font-style: normal;
padding-left: 28px;
padding-right: 5px;
}
.pictogramme2BStatut{
z-index: 8;
position: absolute;
font-size: 8px;
text-align: justify;
color: rgb(229, 255, 0);
border: 1px yellow solid;
align-content: justify;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.pictogramme2Statut{
z-index: 1;
position: absolute;
font-size: 8px;
text-align: justify;
color: black;
align-content: justify;
background-color: yellow;
border: 1px yellow solid;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.pictogramme2BStatut2{
z-index: 8;
position: absolute;
font-size: 15px;
text-align: justify;
color: rgb(0, 174, 255);
border: 1px rgb(0, 174, 255) solid;
align-content: justify;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.pictogramme2Statut2{
z-index: 1;
position: absolute;
font-size: 15px;
text-align: justify;
color: black;
align-content: justify;
background-color: rgb(0, 174, 255);
border: 1px rgb(0, 174, 255) solid;
padding: 4px;
font-family: 'Rubik', sans-serif;
font-style: normal;
opacity: 1;
}
.sceau{
z-index: 6;
position: relative;
text-align: center;
color: white;
align-content: center;
font-family: 'Rubik', sans-serif;
font-weight: bold;
font-style: normal;
align-items: center;
height: 10px;
width: 10px;
}
.pictogramme2B{
z-index: 3;
position: absolute; /* positionnement hors flux */
width: 100px;
height: 100px;
background-size: cover;
opacity: 0;
}
.pictogramme2Black{
position: absolute; /* positionnement hors flux */
z-index: 2;
width: 100px;
height: 100px;
background-color: black;
opacity: 0.4;
text-align: center;
}
.pictogramme2Bcenter{
position: absolute; /* positionnement hors flux */
text-align: center;
margin-top: 35px;
width: 100px;
height: 0px;
z-index: 5;
opacity: 1;
}
.pictogramme2BLink{
position: absolute; /* positionnement hors flux */
text-align: center;
width: 100px;
height: 100px;
z-index: 8;
opacity: 0;
}
.pictogramme2BFlou{
position: absolute; /* positionnement hors flux */
z-index: 1;
width: 100px;
height: 100px;
-webkit-filter: contrast(200%);
filter: contrast(200%);
filter: brightness(0.4);
}
.pictogramme2Basdroite{
position: absolute; /* positionnement hors flux */
text-align: right;
vertical-align: text-bottom;
margin-top: 82px;
width: 100px;
height: 80px;
opacity: 1;
}
.centergrid{
align-items: center;
margin-right: auto;
margin-left: auto;
width: 130px;
}
.center{
align-items: center;
}
.center2{
margin-right: auto;
margin-left: auto;
align-items: baseline;
width: 932px;
}
.titre_de_sections3{
font-size: 25px;
font-family: 'Faster One', cursive;
color: rgb(255, 255, 255);
font-weight: lighter;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.titre_de_sections1{
font-size: 30px;
font-family: 'Fugaz One', cursive;
color: rgb(255, 255, 255);
font-weight: lighter;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.titre_de_sections2{
font-size: 30px;
font-family: 'Bangers', cursive;
color: rgb(255, 255, 255);
font-weight: lighter;
background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(40,40,40,1));
margin-bottom: 0px;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
.ghost{
margin-top: 97px;
}
.backlist{
margin-top: 97px;
}
}