@font-face { font-family: Toinou; src: url('Toinou1-Regular.ttf'); } 

:root {

  --coul-accueil3:#8d55e1;
  --coul-accueil2:#d05de1;
  --coul-accueil1:#ffc4ff;
  
  --coul-portfolio2:#b25508;
  --coul-portfolio1:#e1d355;
  
  --coul-anim2:#5563e1;
  --coul-anim1:#93c4de;
}

body {
	font-family: Toinou;
}
/*DÉBUT RESET*/
html,
body,
div,
ul,
li,
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

a:link { 
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}
/*FIN RESET*/

* {
	box-sizing: border-box;
}
body
{
    background-color: black; /* fond de page par défaut */    
	color: var(--coul-accueil3);/* couleur texte par defaut*/
	font-family: Toinou;
	font-size:30px;
	margin-top: 0px;	
}

.pleine-largeur {
	 display: flex;
	 margin-top: 10px;
}
/*---placement de l'élement 1 du menu horizontal */
.tab {
	margin-left:20px;
	margin-right:5em;
	
	}

.texte3-accueil {
	color: var(--coul-accueil3);
	font-size:60px;
}

.texte2-accueil {
	color: var(--coul-accueil2);
	font-size:25px;
	margin-top: 0px;
	margin-right: 0px;
}

.texte1-accueil {
	color: var(--coul-accueil1);
	font-size:25px;
}

pre {
	font-family: Toinou;
	color: var(--coul-accueil1);
	font-size:25px;
	white-space: pre-wrap;       /* Permet au texte de s'enrouler */
    word-wrap: break-word;        /* Force le texte à passer à la ligne */
}

.texte2-portfolio {
	color: var(--coul-portfolio2);
	font-size:20px;
	margin-top: 0px;
}
.texte1-portfolio {
	color: var(--coul-portfolio1);
	font-size:25px;
}

.texte1-anim {
	color: var(--coul-anim1);
	font-size:25px;
}

.texte2-anim {
	color: var(--coul-anim2);
	font-size:55px;
	margin-top: 0px;
}



/* ------------ BLOC contenu principal ------------  */
.espace-colonne {
	display: flex;
	flex-direction: column;
	width:100%;
	border
}
.espace-gauche {
	display: flex;		 
	width:15%;
	flex-direction: column;
}
.partie-centrale {
	display: flex;		 
	width:70%;
	flex-direction: column;
}
.espace-droite {
	 display: flex;		 
	width:15%;
	 flex-direction: column;
}

/* ------------ BLOC VITRINE ------------  */
.vitrine {
	background: linear-gradient(#F2DED7, #E6C3C7);
	font-family: Toinou;
	/*border: 3px solid black;*/
	position:relative;
}
.vitrine img {
	width: 100%;
	height: auto;
	vertical-align:top;
}
.vitrine p {
	text-align: center;
	/*font: small-caps bold 24px/1 sans-serif;*/
}


.video-accueil {
	position:relative;
	width: 70%;
}
.video-accueil::after{
	/*permet de rendre responsive la video */
  content:"";
  display: block;
  width: 100%;
  padding-bottom: calc(472/900*100%);
}

.video-accueil iframe{
/* on sort la video du flux pour qu'elle prenne 100% de son parent*/
  position: absolute;
  width: 100%;
  height: 100%;
  top:0px;
  left: 0px;
}


div.transbox {
  width: 100%;
  height: auto;
  position : absolute;
  bottom : 0px;
  margin: 0px;
  background-color: var(--coul-accueil3);
  opacity: 0.8;
}

div.transbox p {
  margin: 5px;
  color: var(--coul-accueil1);
  size : 20px;
}

/* ------------ BLOC contact + social media ------------  */
.reseaux {
	display: flex;	
	background: var(--coul-accueil3);
	opacity : 80%;
    justify-content: space-between;
	margin: 0px auto 0px;

}
.reseaux-image img {
  width: 100%;
  height: auto;
  vertical-align:top;
}
/* ------------ Portfolio  ------------  */
.menu-ancre-portfolio {
	text-align: center;
}
.menu-ancre-portfolio h1{
	text-align: center;
	color:var(--coul-portfolio2); /* couleur texte par defaut*/
	font-size:55px;
}
.menu-ancre-portfolio a{
	text-align: center;
	color:var(--coul-portfolio1); 
	font-size:25px;
}
.portfolio {
	text-align: center;
	position:relative;
}
.portfolio img{
  width: 100%;
  height: auto;
  vertical-align:top;
  /*position:relative;*/
}
.portfolio h1{
	text-align: center;
	color:var(--coul-portfolio2); /* couleur texte par defaut*/
	font-size:55px;
}
.portfolio a{
	text-align: center;
	color:var(--coul-portfolio1); 
	font-size:1em;
}
div.transbox-portfolio {
  width: 100%;
  height: auto;
  position : absolute;
  bottom : 1em;
  margin: 0px;
  background-color: var(--coul-portfolio2);
  opacity: 0.6;
}

div.transbox-portfolio p {
  margin: 5px;
  color: var(--coul-portfolio1);
  size : 1.5em;
}

div.boite-RS {
  position: fixed;  
  bottom: 30px;
  right: 30px;
  background-color: var(--coul-portfolio2);
  opacity: 0.6;  
  display: flex;
  justify-content: space-arround;
  margin: 0px;
  width : 350px;
}
.reseaux-image-pf img {
  width: 70px;
  height: auto;
  vertical-align:top;
  margin : 0px;
}

/* ------------ Anim  ------------  */
.menu-ancre-anim {
	text-align: center;
}
.menu-ancre-anim h1{
	text-align: center;
	color:var(--coul-anim2); /* couleur texte par defaut*/
	font-size:55px;
}
.menu-ancre-anim a{
	text-align: center;
	color:var(--coul-anim1); 
	font-size:25px;
}
.anim {
	text-align: center;
	position:relative;
	z-index: -1;
}
.anim-centre {
	position:relative;
	width: 70%;
}
.anim-centre::after{
	/*permet de rendre responsive la video */
  content:"";
  display: block;
  width: 100%;
  padding-bottom: calc(472/900*100%);
}

.anim-centre iframe{
/* on sort la video du flux pour qu'elle prenne 100% de son parent*/
  position: absolute;
  width: 100%;
  height: 100%;
  top:0px;
  left: 0px;
}
.anim-cote {
	position:relative;
	width: 15%;
}
.anim-cote img {
    width: 100%;
    height: auto;
    vertical-align: top;
	opacity : 0.6;
}

.anim img{
  width: 100%;
  height: auto;
  vertical-align:top; 
}
.anim h1{
	text-align: center;
	color:var(--coul-anim2);
	font-size:55px;
}
.anim a{
	text-align: center;
	color:var(--coul-anim1); 
	font-size:25px
}
.pos-relative {position:relative;}
.embed-youtube {
	width: 100%;
	height:auto;
    background-color: #000;
    margin-bottom: 30px;
    position: absolute;
    padding-top: 45%;
    overflow: hidden;
    cursor: pointer;
	text-align :center;
}
.embed-youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
    width: 68px;
    height: 48px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
    cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.embed-youtube .embed-youtube-play:hover {
    background-color: #f00;
}
/*boite transparente pour legende video*/
div.transbox-anim {
  width: 100%;
  height: auto;
  position : absolute;
  bottom : 20px;
  margin: 0px;
  background-color: var(--coul-anim2);
  opacity: 0.6;
}

div.transbox-anim p {
	text-align: center;
    margin: 0px;
    color: var(--coul-anim1);
    size : 20px;
}

/*boite fixe avec lien réseaux sociaux*/
div.boite-RS-anim {
  position: fixed;  
  bottom: 30px;
  right: 30px;
  background-color: var(--coul-anim2);
  opacity: 0.6;  
  display: flex;
  justify-content: space-around;
  margin: 0px;
  width : 350px;
}
.reseaux-image-anim img {
  width: 70px;
  height: auto;
  vertical-align:top;
  margin : 0px;
}




/* ------------ BLOC images ------------  */
.videoYT {
	 display: flex;		 
	 align-items: center;
	 flex-wrap: nowrap;
	 justify-content: space-around;
	 width : 100%;
	/* position:relative;*/
}


.zone-petite-image {

  align-self: center;
  justify-self: center;

}
.zone-petite-image img {
  width: 100%;
  height: auto;

}
/*----- Grille images random -------*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /*padding: 10px;
  border: 1px solid black;  
  grid-column-gap: 10px;
  grid-row-gap: 10px;*/
  background-color: black;
}

.grid-item {
  padding: 3px;
  font-size: 10px;
  text-align: center;
}

.petite-video {
	width : 30%;
	vertical-align:top;
}

.estompe {
	opacity: 0.5;
}

footer {	
}

footer p {	margin-inline: 3px;
	text-align: right;
}


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 70%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid var(--coul-accueil3); /* border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: var(--coul-accueil3);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: Toinou;
  font-size : 50px;
 
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: var(--coul-accueil2);
}


.menuContainer { /*zone de menu*/
  display: flex;
  justify-content: space-between;
  width : 100%;
  font-size: 100%;
  margin: auto;
  align-items: center;
}

.menuContainer>ul {
  display: flex;
  flex-grow : 1;
  justify-content: space-between;  
  align-items: center;
}

.menuContainer>ul>li { /*element de niveau1*/
  position: relative;
  cursor: default;
  justify-content: space-between;
  margin-right : 0em;
   vertical-align:center;
  /*margin-top: 0px;*/
}

.menuContainer>ul>li>ul { /*cache niveau 2 */
  position: absolute;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  margin-top:2px;
  margin-left:-35px;
  /*
  Transition appliquée à la sortie du survol :
	visibility est animée en 0 seconde après un délai de 200ms correspondant à la durée de la transition appliquée à opacity.
	Autrement dit, lorsque le survol prend fin, on passe l'opacity à 0 en 200ms puis on passe la visibility à hidden.
  */
  transition: opacity .2s ease-in-out, visibility 0s ease-in-out .2s;
}

.menuContainer>ul>li>ul>li {
  margin-top: -3px;
}

.menuContainer>ul>li:hover>ul { /*affiche niveau 2 au passage de souris */
  visibility: visible;
  opacity: 1;
  /*
  Transition appliquée à l'entrée du survol :
	On anime l'opacity de 0 à 1 en 500ms.
  */
  transition: opacity .5s ease-in-out;
}

.menuContainer>ul>li>ul>li>ul { /*cache niveau 3 */
  position: relative;
  white-space: nowrap;
  font-size: 80%;
  visibility: visible;
  opacity: 0.3;
  transition: opacity .2s ease-in-out, visibility 0s ease-in-out .2s;
}

.menuContainer>ul>li:hover>ul>li:hover>ul { /*affiche les sous menu niv3 au passage de souris */
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

/* pour les animations au passage de souris*/

.menuContainer>ul li>a {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.menuContainer>ul li>a::before {
  content: attr(name);
  color: red;
  position: absolute;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}

.menuContainer>ul li>a:hover::before {
  width: 100%;
}

.menuContainer>ul li>a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 1px;
  height: 1px;
  background: red;
  box-shadow: 0px 0px 8px 3px red;
  transition: left 0.3s ease-in-out;
}

.menuContainer>ul li>a:hover::after {
  left: calc(100% + 10px);
}



#menuHamburger {
  display: none;

}

.menuContainer>label {
	/*fond du hamburger*/
  display: none;
  cursor: pointer;
  vertical-align: top;
  background: var(--coul-accueil2);
  width: 39px;
  height: 39px;
  border-radius: 8px;
  
}

.menuContainer>label::before {
	/*image du hamburger*/
  /*content:  url('images/img/accueil/hamburger.png');*/
  margin: auto;
  background-color:black ;
}


.menuContainer>label::after {
	/*croix du menu hamburger*/
  display: none;
  /*content: url('images/img/accueil/hamburgerOFF.png');*/
  position: fixed;    
  z-index: 30;
  top: 0px;
  left: 10px;
  font-size:80px;
  content: "X";
  margin: auto;
  color : red;
}


#menuHamburger:checked + ul {
  margin-left: 0px;

}

#menuHamburger:checked ~ label::after {
  display: block;

}

#menuHamburger:checked ~ label::before {
  display: none;
}

@media screen and (max-device-width:480px),(max-width:600px) {
/*annule le centrage du container*/
  .menuContainer {
    width: auto;
    margin: 0;
  }
  #img_hamburger {
	/*pour cacher l'image du hamburger dans le menu en mode menu hamburger*/
  display: none;
  }
  #menu_home {
	/*pour cacher l'image du hamburger dans le menu en mode menu hamburger*/
  display: none;
  }
  #menu_anim {
	/*pour cacher l'image du hamburger dans le menu en mode menu hamburger*/
  display: none;
  }
  #menu_pf {
	/*pour cacher l'image du hamburger dans le menu en mode menu hamburger*/
  display: none;
  }
  #menu_titre {
	/*pour cacher l'image du hamburger dans le menu en mode menu hamburger*/
  display: none;
  }
  #menu_resume {
	/*pour cacher l'image du hamburger dans le menu en mode menu hamburger*/
  display: none;
  }
   .menuContainer>ul {
	
	position: fixed;  
	
	top: 40px;
    left: 10px;
  
	z-index: 10;
	flex-grow : 0;
    display: inline-block; /*Pour assurer l'alignement avec le label*/
    box-sizing: border-box;
    width: 260px;
    margin: 0 0 0 -520px;/*On le positionne en passant son margin-left à moins sa largeur*/
    padding: 10px;
    background: black;
    border-radius: 30px;
	border : solid 2px;
    transition: margin-left 0.5s ease-in-out;/*On pose une animation sur son margin-left lequel est passé à zéro lorsqu'on clique sur le label*/
  } 
 
  /*Sous-menus*/
  .menuContainer>ul>li>ul {
    position: static;
    visibility: visible;
    opacity: 1;
    margin-left: 10px;/*On décale pour faire joli*/
    transition: none !important;/*On bloque toutes les transitions*/
  }

  .menuContainer>label {
	/*zone de l'icone du menu hamburger */
  position: fixed;    
  z-index: 20;
  top: 10px;
  left: 10px;
  background-color: black;
  display: flex;
  margin: 0px;
  width : 35px;
  }
}

/*pour la popup de visualisation des images random */

.cf:before, .cf:after { /*pseudo-éléments !!IMPORTANT NE PAS MODIFIER!!*/
	content:"";
	display:table;
}
.cf:after { /*pseudo-élément !!IMPORTANT NE PAS MODIFIER!!*/
	clear:both;
}
.droite {
	float:right;
}
.oModal {
	position: fixed; /*fixed pour fixer la fenêtre ou éventuellement absolute pour lui permettre de défiler à la souris*/
	z-index: 99999; /*index de surperposition élevé: important*/
	top: 0; /*positions*/
	right: 0;
	bottom: 0;
	left: 0;
	background-color: black; /* fond de page par défaut */    
	
	opacity:0; /*opacité = 0 donc invisible*/
	-webkit-transition: opacity 0s ease-in;
	-moz-transition: opacity 0s ease-in;
	transition: opacity 0s ease-in; /*transition opacité temps nature*/
	pointer-events: none;
}
.oModal:target {
	opacity:1; /*opacité = 1 donc visible*/
	pointer-events: auto;
}
.oModal:target > div {
	margin: 2% auto; /*marges extérieures*/
	transition: all 0.4s ease-in-out; /*transition tout temps nature*/
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
.oModal > div {
	width: 90%; /*largeur fenêtre modale*/
	height:90%; /*hauteur fenêtre modale*/
	overflow:auto; /*mise en place ascenseur vertical si débordement*/
	position: relative;
	padding: 8px; /*marges intérieures*/
	border: 2px solid var(--coul-accueil3); /*bordure : épaisseur nature couleur*/
	border-radius: 8px; /*arrondis*/
	background: black; /*fond fenêtre modale*/
}
.oModal > div header { /*fenêtre modale partie haute*/
	border-bottom: 1px var(--coul-accueil3); /*bordure basse : épaisseur nature couleur*/
	color: var(--coul-accueil1); /*couleur texte*/
}
.oModal > div header a:after, .oModal > div footer a:after { /*fenêtre modale liens haut et bas*/
	font-size:24px;
	content: 'X';
}
.oModal > div footer { /*fenêtre modale partie basse*/
	border-top: 1px var(--coul-accueil3); /*bordure haute : épaisseur nature couleur*/
	color:  var(--coul-accueil1); /*couleur texte*/
}
.oModal > div section { /*fenêtre modale contenu*/
	color:  var(--coul-accueil1); /*couleur texte*/
}
.oModal a { /*fenêtre modale lien*/
	color: var(--coul-accueil1); /*couleur texte*/
}
.oModal a:hover { /*fenêtre modale lien survolé*/
	color: var(--coul-accueil2); /*couleur texte*/
}
.oModal > div h2 { /*fenêtre modale titre*/
	margin:0; /*marges extérieures*/
	color:  var(--coul-accueil1); /*couleur texte*/
}
.oModal > div section, .oModal > div header, .oModal > div footer { /*fenêtre modale différentes parties*/
	padding:5px 15px; /*marges intérieures*/
}