body{font-family: "Alata"}



*{
    margin: 0px;
    padding: 0px;
}

/*menu de navigation*/
nav{
    width: 100%;
    margin: 0px 0px 0px 0px;
    background-color: white;
    position: sticky;
    top: 0px;
    z-index: 2; /*pour que le menu reste fixé et que les images et titres ne passent pas dessus, le passer au premier plan*/
}

nav ul{
    list-style-type: none;}

nav li{
    float: left;
    width: 20%;/*100% divisé par le nombre d'éléments de menu*/
    text-align: center;/*Centre le texte dans les éléments de menu*/}

/*Evite que le menu n'ait une hauteur nulle*/
nav ul::after{
    content: "";
    display: table;
    clear: both;}

nav a{
    display: block; /*Toute la surface sera cliquable*/
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;/*Evite le décalage des éléments sous le menu à cause de la bordure en :hover*/
    padding: 20px 0px;/*Agrandit le menu et espace la bordure du texte*/}

nav a:hover{
    color: red;
    border-bottom: 2px solid gold;}

nav{background-color: #E5E5E5;}


nav{
    font:bold normal 125% normal;
    font-family: "Alata";}

@media screen and (max-width:650px) {
    nav{font:bold normal 70% normal}
}
/*permet de diminuer la taille du text sur plus petit écran pour pas que ça se marche dessus*/







/*Accueil*/
	
/*petit fond d'écran qui bouge*/

/*attention le site semble beuguer quand on a le curseur sur des éléments avec des animations (défilement ici + freque)*/

.d1{background-color: #EDEDED;
	background-size: cover;
    animation: slide 15s ease-in-out infinite;
    
}



@keyframes slide{
    0%{background-image: url("Photos/photo8.png");
    background-size: cover;
	background-repeat: no-repeat;}
    33.33%{background-image: url("Photos/photo2.png");
    background-size: cover;
	background-repeat: no-repeat;}
    66.67%{background-image: url("Photos/photo9.png");
    background-size: cover;
	background-repeat: no-repeat;}
    100%{background-image: url("Photos/photo8.png");
    background-size: cover;
	background-repeat: no-repeat;}
}




/*générale*/

h1{text-align: center;
    color: #C70039;
	font-size: 50px;}
	
h2{text-align: center;
    color: #C70039;
	font-size: 40px;	
}
  


/*partie engagements*/
.image{float: left;
        margin-right: 60px;
        width: 70px}

.cadre{margin: 50px auto;
        max-width: 750px;
        padding: 23px 23px 23px 30px;}

.box{margin: 15px 15px 15px 15px;
    padding: 5px 5px 5px 5px;}

.text{font: normal normal 25px normal;
        text-align: inherit}




/*partie objectifs*/

.police {font: normal normal 120% normal}


.cadre2, .cadre3, .cadre4 {height:auto;text-align:center;
        margin: 20px 50px 10px 50px;
        padding: 10px 10px 30px 10px;
        border: 1px solid red;
        border-radius: 10px;} 

.hal {width: 100%}

.container{margin: 5px 5px 5px 5px} 


/*j'ai dabord codé le format téléphone, ça a permis de régler un léger problème de décentrage*/

@media screen and (min-width:880px) {
    
.container after {content:""; display:table; clear:both;}
    /*c'est quoi ?*/       
.container {margin: 0 auto;
            width: 85%} /*permet de centrer le cette zone de la page, un peut approximatif*/

.hal {float:left; width:100%;}

.cadre2{float:left;
        margin: 0% 2% 0% 0%;
        width: 27.5%;
        border: 1px solid red;
        border-radius: 10px;}
    
.cadre3{float:left;
        margin: 0% 2% 0% 2%;
        width: 27.5%;
        border: 1px solid red;
        border-radius: 10px;}
    
.cadre4{float:left;
        margin: 0% 0% 0% 2%;
        width: 27.5%;
        border: 1px solid red;
        border-radius: 10px;}
}

@media screen and (min-width:1600px){
    .cadre2, .cadre3, .cadre4{width: 29%}
}/*Pas la meilleur des solutions mais permet pour le moment de gérer à peut près le centrage, un peut approximatif*/





.clear{clear: both}

/*j'ai mis cette petite div pour eviter d'avoir a remette le clear dans chaque nouvelle chose que je met en dessous*/







/*petite fresque avec changement de couleurs*/

/*attentinon le site semble ramer quand on a le curseur sur un élément css de la fresque en affichant le site en aperçu en direct*/
.fresque{
        height: 400px;
        max-width: 1000px;
        margin: 100px auto;
        position: relative;
        overflow: hidden; /*ne pas voir la totalité de la fresque, seulement les 1000px prédéfinit*/
        transform: translate3d(0, 0, 0);/*permet d'obtenir un meilleur résultat et d'éviter un manque de fluidité avec certain browser*/
}

.fresque > div {
                height: 400px;
                width: 3890px;/*légèrement approximatif, j'ai dis à ma CSS que ma photo faisait 3890 au lieu de 4000 pour décider du moment où mon image allait boucler */
                background: url(Photos/Freque_V5.jpg);
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                transform: translate3d(0, 0, 0);
}

.fresque .mov_a {
                animation: moveSlideshow 15s linear infinite;
}

.fresque .mov_b {
                opacity: 0;
                transition: opacity 0.5s ease-out;
                background-position: 0 -400px;
                animation: moveSlideshow 15s linear infinite;
}
.fresque:hover .mov_b {
                        opacity: 1;
}/*c'est une grande photo, le haut sans couleur, le bas avec en passant mon curseur sur le cadre je visualise l'autre partie de l'image*/

@keyframes moveSlideshow {
                        100% { 
                        transform: translateX(-66.6666%);}
}/*transforme permet de créer des mouvements, et translate permet de translater, ce qui créer l'effet défilement*/




/*pied de page avec les contacts, commun à tt les pages*/
footer{clear: both;
	text-align : center;
	list-style-type : none;
	color : white; 
	background-color: #777777;
}

footer a{color: #C70039 }


/*Footer pour la première page*/

.footer2{clear: both;
	text-align : center;
	list-style-type : none;
	color : #5D2727;
}
.footer2 {position: relative; overflow: hidden;}

.footer2:before{
	width: 100%;
	font-size: 1.5em;
}

.footer2:before
{
	content: "";
	position: absolute;
	width: 660%;
	height: 660%;
	top: -270%;
	left: -281%;
	z-index: -1;
	background: url(Photos/BLANK.png) 0 0 repeat, url(Photos/BLANKver.png) 437.5px 0px repeat;
	background-color: #FFE8E8;
}

.footer2:before 
{ transform: rotate(-45deg);
}

.footer2{color: black;
        font-weight: bold;}

.footer2 a{color: #04277a;
            font-weight: bold;}

.footer2 h2{color:#a60835}







/*CSS pour le tableau de la page #ByTWICERS COMMUNITY*/


.tableau{
  padding: 64px;
}

.ligne:after {
  content: "";
  display: table;
  clear: both
}

.colone-50 {
  float: left;
  width: 55%;
  padding: 20px;
}

.colone-40 {
  float: left;
  width: 35%;
  padding: 20px;
}

.large-font {
  font-size: 48px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

@media screen and (max-width: 1050px) {
  .colone-50, .colone-40 {
    width: 100%;
    text-align: center;
  }
    
  img {
    margin: auto;
  }
}


/*Centrer le titre*/
h1{
	text-align:center;
	font-size: 50px;
}

/*Titres sur la page*/
h2{
	color: #C70039;
	font-size: 40px;
	text-align: center;
}

/*Laisser un espace entre les lignes du texte*/
p{
	line-height: 20px;
}

/*Itallique avec Span*/
span{
	font-style:italic;
}

/*PARTIE DÉDIÉE AU FEEDBACK*/
form{
	text-align:center;
}

h3{
	font-weight: bold;
	color: #C70039;
	font-size: 20px;
	text-align: center;
}
input{
	cursor:pointer;/*la souris devient une main sur le options cliquables*/
}




/*page de presentation*/


.histoire{
  padding: 64px;
}

.linea:after {
  content: "";
  display: table;
  clear: both
}

.columna50 {
  float: left;
  width: 55%;
  padding: 20px;
}

.columna50 p{
	line-height: 25px;
}

.columna40 {
  float: left;
  width: 35%;
  padding: 20px;
}

/*Effet de zoom au passage de la souris*/

/* ARTICLE KEN BURNS*/
.columna40 img{
  overflow:hidden;/*empeche l'image de dépasser du bloc*/
  display:block;
  width:300px; /*Notre bloc fera 300px de large*/
  margin:auto; /* on centre le bloc*/
}
.debutphoto{transition:0.5s;} /* durée de l'animation en secondes*/
.debutphoto:hover{transform : scale(1.2);} /* Zoom de l'image. La taille normale est 1 */

.identitephoto{transition:0.5s;} /* durée de l'animation en secondes*/
.identitephoto:hover{transform : scale(1.2);} /* Zoom de l'image. La taille normale est 1 */

.compromisphoto{transition:0.5s;} /* durée de l'animation en secondes*/
.compromisphoto:hover{transform : scale(1.2);} /* Zoom de l'image. La taille normale est 1 */



@media screen and (max-width: 1000px) {
  .columna50,
  .columna40 {
    width: 100%;
    text-align: center;
	}
	.compromisphoto,
	.debutphoto,
	.identitephoto,
	.deuxiemefonpres,
	.photofondpres{
	margin: auto;
  }
}






/*Photos de fond des pages*/

/*fond de la page présentation, c'est une image et dessus un fond blanc*/
.photofondpres{
	background-image: url("Photos/telas.jpg");
	background-repeat: repeat;
	background-size: cover;
}

.deuxiemefondpres{
	background-color: white;
	background-size:50%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}

/*fond pour bytwicer*/
.photofondbytwicer{
	background-image: url("Photos/barcelona.jpg");
	background-repeat: repeat;
	background-size: cover;
}

.deuxiemefondbytwicer{
	background-color: white;
	background-size:50%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}



/*fond pour feedback*/
.photofondfeedback{
	background-image: url("Photos/yarn.jpg");
	background-repeat: repeat;
	background-size: cover;
}

.deuxiemefondfeedback{
	background-color: white;
	background-size:50%;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 15%;
}

@media screen and (max-width:650px) {
.deuxiemefondfeedback{
	background-size:50%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}
}

/*fond Shopping*/
.photofondshopping{
	background-image: url(Photos/hilofinal.jpg);
	background-repeat: repeat;
	background-size: cover;
}

.deuxiemefondshopping{
	background-color: white;
	background-size:50%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}






/*Shopping*/

.bigbox{margin: 5% 7.5% 7.5% 5%
}

.shoplist{display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-gap: 2rem;
}


.shoplist, .shopbox, .imgshop{
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        list-style-type: none;
}

.shop{text-align: center}

p > a{color: #C70039}


/*effet de flou + affichage des prix*/

.box42{position: relative;
        display: table;
}


.flou{text-align: center;
        font-size: 2vw; /*unité en fct de la taille de l'écran, permet de gérer un peut mieux les changement de taille*/
        font-weight: bold;
        text-decoration: none;
        color: black;
        display: block;
        width: 100%;
}
.flou a{color: black;
        text-decoration: none}/*gestion du lien, j'ai du mettre un lien text et pas image car mon floutage empéchait celui-ci de fonctionner, dommage*/

.box42 > div {position: absolute;
            top: 0;
            left: 0;
            height: 100%;
}



.box42 .flou {opacity: 0;}

.box42:hover .flou {opacity: 1}

.box42:hover .imgshop {opacity: 0.42}
/*gère les passages de la souris sur le cadre, faire apparaitre ou disparaitre les éléments;*/

@media screen and (min-width: 1500px){
.bigbox{margin: 5% 10% 5% 10%}
.shoplist{grid-gap: 4rem;}
.flou{font-size: 200% }
    .test{float: left}
}/*adapter pour les plus grand format d'écran*/

@media screen and (max-width: 1500px){
.flou{font-size: 200% }   
}/*addapter pour les petits formats*/