@font-face {
    font-family: 'c4';
    src: url(../font/c4/C4-type/fonts/webfonts/C4v4-Regular.woff)  format("woff");
}

*, *::before, *::after{  

box-sizing: inherit;
    
}
    
html{
    
box-sizing: border-box;
        
}
    
body,html{
    
margin: 0px;
padding: 0px;
cursor: none;
    
}

body {

background-color: #202020;
cursor: none;
width: 100%;
height: 100%;

}

#backgron{

position: fixed;
width: 90%;
height: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: url(../image/1.png)no-repeat center/cover;
opacity: 10%;
z-index: -1;

}

.clearfix{

clear: both;
    
}

.curseur{

position: fixed;
pointer-events: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
transform: translateX(-50%) translateY(-50%);
border: #F1F2E2 1px solid;
border-radius: 120px;
mix-blend-mode: difference;
z-index: 99;

}

.interieur-curseur{

position: fixed;
pointer-events: none;
top: 0px;
left: 0px;
transform: translateX(-50%) translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50px;
background: #2f00ff;
z-index: 99;

}

header{

position: absolute;
top: 0px;
margin-top: 0px;
left: 50%;
transform: translateX(-50%);
width: 95%;
height: 60px;
z-index: 9;

}

#logo{

display: block;
margin-top: 26px;
font-family: "Poppins", sans-serif;
font-weight: 400;
text-transform: uppercase;
color: #F1F2E2;
float: left;
font-size: 12pt;

}

#logo2{

display: block;
margin-top: 26px;
font-family: "Poppins", sans-serif;
font-weight: 400;
text-transform: uppercase;
color: #F1F2E2;
float: left;
font-size: 12pt;

}

#logo2:hover{

display: block;
margin-top: 26px;
font-family: "Poppins", sans-serif;
font-weight: 400;
text-transform: uppercase;
color: #2f00ff;
float: left;
font-size: 12pt;

}

#galtete{
  font-family: "Poppins", sans-serif;
font-weight: 400;
text-transform: uppercase;
float: right;
text-decoration: none;
color: #F1F2E2;
font-size: 12pt;
cursor: none;
margin-top: 25px;
margin-right: 10px;
}

li{

font-family: "Poppins", sans-serif;
font-weight: 400;
text-transform: uppercase;

}

header nav{

float: right;
margin-bottom: 0px;
margin-top: 12px;
    
}
    

header nav ul li {

display: inline-block;
margin-left: 0px;
text-transform: uppercase;
border-radius: 50px;
margin-left: 15px;        
}

header nav ul li a {

text-decoration: none;
color: #F1F2E2;
font-size: 12pt;
cursor: none;

    
}

header nav ul li a:hover {

text-decoration: none;
color: #2f00ff;
font-size: 12pt;
cursor: none;

    
}

.cont{

width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
display: block;
line-height: 180px;
padding-left: 5px;

}

#accueil{

overflow: hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);

}

#text-accueil{

width: 95%;
height: 25%;
margin-top: 430px;
left: 0px;

}

h1 {

font-family: 'c4';
font-size: 160px;
color:#F1F2E2;
margin:0px;

}

#non{

color: transparent; 
pointer-events: none;
-webkit-text-stroke-color:white;
-webkit-text-stroke-width:1px;
font-weight: 400;
opacity: 50%;
}

#acceuil h1{

float:left;

}

p{

font-family: "Poppins", sans-serif;
font-weight: 300;
text-transform: uppercase;

}

#accueil p{

position: absolute;
top: 470px;
left: 50%;
transform: translateX(-50%) translateY(-60%);
color: #F1F2E2;
text-align: center;
width: 570px;
font-size: 20pt;
line-height: 31pt;

}

#rond{

position: absolute;
top: 0px;
left: 50%;
transform:translateX(-50%) translateY(-50%);
width: 370px;
height: 370px;

}

.titrePage{

transform: translateY(42px);

}

.titrePage:hover{

color: #434343;

}

#forma2{
color: #F1F2E2;
display: none

}
#forma2:hover{
color: #434343;

}

#formation{
    overflow: hidden;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-bottom: #F1F2E2 1px solid;
}

#formationTxt{
    height:230px;
    width: 95%;
    overflow: hidden;
}

#contAdobe{

display: block;
float: left;
margin-top: 0px;
width: 100%;

}

.carresAdobe{
    display: block;
    float: left;
    border: #F1F2E2 1px solid;
    border-radius: 150px;
    margin-right: 5px;
    display: flex;
    justify-content: center; 
    align-items: center; 
    opacity: 75%;
    transition: 0.5s;
    margin-top: 20px;
}

.carresAdobe:hover{
    opacity: 100%;
    transition: 0.5s;
}

.txtAdobe{

color: #F1F2E2;
font-size: 14pt;
margin: auto;
line-height: normal;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 200;
padding: 15px;

}

.suite{

display: block;

}

#formation p {

display: block;
    color: #F1F2E2;
width: 90%;
font-size: 20pt;
float: left;
margin-top: 200px;
margin-bottom: 0px;
line-height: normal;

}

#editionTxt{

overflow: hidden;
height:230px;
width: 95%;

}

#edi2{
color: #F1F2E2;
display: none

}
#edi2:hover{
color: #434343;

}

#edition{
    overflow: hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
border-bottom: #F1F2E2 1px solid;
}

.borderBas{

display: block;
border-bottom: #FF8045 1px solid;
border-top: #FF8045 1px solid;
overflow: hidden;
height:182px;

}


.soustitrePage{

color: #FF8045;
margin-left: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-family: 'c4';
font-size: 11vw;
transform: translateY(40px);
line-height: 180px;

}

.soustitrePage:hover{

color: #434343;


}


#post2{
color: #F1F2E2;
display: none

}
#post2:hover{
color: #434343;

}

#poster{
    overflow: hidden;
    z-index: 2;
}

#posterText{

overflow: hidden;
height: 230px;

}



.contPoster{

width: 100%;
height: 94px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: block;
border-bottom: #F1F2E2 1px solid;


}

.PostImg{

height: 100%;
width: 200px;
float: left;
margin-right: 30px;
object-fit: cover;
object-position: top;
transition: 0.2s;

}

.PostImg:hover{

object-position: bottom;
transition: 0.2s;

}

.contPostTxt{

float: left;

}

.titrePoster{
display: block;
line-height: normal;
font-family: "Poppins", sans-serif;
font-weight: 300;
text-transform: uppercase;
color: #F1F2E2;
font-size: 53px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

}

#limage{

height: 100vh;              
  width: auto;                
  object-fit: contain;       
  display: block;          
  margin-top: 0px;
  margin-right: 0px;

}

#contGrandImTxt{
    float: right;
}

#cont2{
color: #F1F2E2;
display: none

}
#cont2:hover{
color: #434343;

}

#contact{
        overflow: hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
border-bottom: #F1F2E2 1px solid;
}

#contText{

overflow: hidden;
height:230px;
width: 95%;

}


#contTtxCaontact{

line-height: normal;

}

.ConTexte{

display: inline-block;
line-height: normal;
color: #F1F2E2;
font-family: "Poppins", sans-serif;
font-weight: 400;
padding: 15px;
border: #F1F2E2 1px solid;
border-radius: 150px;
font-size: 12pt;
margin-top: 40px;


}

#num{

margin-top: 20px;

}

/*.noscroll {
    overflow: hidden;
    height: 100vh;
}*/

.GalClic{

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #F1F2E2; 
z-index: 8; 
color: #434343; 
display: flex;
pointer-events: none;
overflow: hidden; 
align-items: center;
opacity: 1;
transform: translateX(100%);


}

#contGalclic{

display: flex;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
align-items: center;

}

.clicGrand{

display: inline-block;
height: 100%;
width: auto;


}

.InfoClic{

height: auto;
margin-bottom: 40px;
margin-top: auto;
margin-left: 50px;
  flex-direction: column;
  float: left;
  width: 60%;

}

.GalClic h2{

font-family: 'c4';
font-size: 95px;
display: block;
line-height: auto;
margin: 0px;
line-height: 60pt;


}

.GalClic p{

line-height: auto;
display: block;

}

.petitClic{

display: inline-block;
height: 105px;
width: auto;
margin-right: 15px;
margin-top: 20px;
border-radius: 50%;
opacity: 0.5;
transition: 0.3s;

}

.petitClic:hover{

opacity: 1;
transition: 0.3s;

}

.fermClic{
position: relative;
width: 85px;
height: 85px;
border: #FF8045 1px solid;
border-radius: 400px;
margin-top: 35px;
display: flex;
align-items: center;    /* centre verticalement */
  justify-content: center; /* centre horizontalement */

}

#AnimFerm{

width: 0%;
height: 0%;
background: #FF8045;
border-radius: 100px;
pointer-events: none;
display: flex;
align-items: center;    /* centre verticalement */
  justify-content: center; /* centre horizontalement */

}

#AnimFerm2{

width: 0%;
height: 0%;
background: #F1F2E2;
border-radius: 100px;
pointer-events: none;

}

#flèche{

position: absolute;
top: 50%;
left: 50%;
transform: translateX(10%) translateY(-50%);
font-family: 'c4';
color: #434343;
font-size: 120px;
pointer-events: none;
z-index: 2;
line-height: auto;
margin: 0px;

}

/* -------------------------------------------------------*/

.FondNouv{

position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #202020;

}

.NcontLog{

position: relative;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
margin-bottom: 40px;
width: 95%;
display: flex;
justify-content: space-between; 
z-index: 2;

}

.textContGal{

position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
margin-top: 100px;
padding-right: 48%;
width: 95%;
height: 415px;
display: flex;
align-items: center;
font-size: 20pt;
font-family: "Poppins", sans-serif;
color: #F1F2E2;
font-weight: 300;

}

.slog{

display: inline-block;

}

.g1{

width: 35%;
aspect-ratio: 1/1;
background: url(../image/LogoLog1.jpg);
background-size: cover;

}

.g2{

width: 35%;
aspect-ratio: 1/1;
background: url(../image/LogoLog2.jpg);
background-size: cover;
}



.d{

width: 27%;
aspect-ratio: 1/0.1;
position: relative;

}

.d1{

width: 100%;
aspect-ratio: 1/0.62;
background: url(../image/cvAvant.jpg);
background-size: cover;
 background-position: center center;
 transition: 0.3s;
}


.d2{

position: absolute;
bottom: 0px;
width: 100%;
aspect-ratio: 1/0.62;
background: url(../image/cvArriere.jpg);
background-size: cover;
 background-position: center center;
 transition: 0.3s;
}


/* -------------------------------------------------------*/


.gt1{

width: 36%;
aspect-ratio: 1/1;
background: url(../image/A3Poster_Mockup01_MicroVolume.jpg);
background-size: cover;

}

.gt2{

width: 36%;
aspect-ratio: 1/1;
background: url(../image/Mockup.jpg);
background-size: cover;

}

.gt3{

width: 26%;
aspect-ratio: 0.707/1;
background: url(../image/couvTouc.jpg);
background-size: cover;

}



/* -------------------------------------------------------*/


.gwo1{

width: 100%;
aspect-ratio: 1/0.35;
background: url(../image);
background-size: cover;

}

.gw2{

width: 35%;
aspect-ratio: 1/1;
background: url(../image);
background-size: cover;

}

.gw3{

width: 26%;
aspect-ratio: 0.707/1;
background: url(../image);
background-size: cover;

}


.WcontLog {
  position: relative;
  top:0px;
    width: 95%;
    margin: auto;
    padding-bottom: 40px;
}

/* -------------------------------------------------------*/

.VcontLog {
  position: relative;
  top:0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
    gap: 20px; /* Espace entre les éléments */
    width: 95%;
    margin: auto;
    padding-bottom: 40px;
}


.gv{

width: 100%;
aspect-ratio: 1/0.85;
position: relative;
border: 1px  solid #434343;

}

.gw1{

width: 100%;
aspect-ratio: 1/0.7;
position: relative;
margin-top: 7px;


}

.gw2{

width: 100%;
aspect-ratio: 1/0.7;
position: relative;
margin-top: 7px;
margin-bottom: 7px;

}


/* -------------------------------------------------------*/

.gp{

width: 100%;
aspect-ratio: 1/1.414;
position: relative;
border: 1px  solid #434343;

}

/* -------------------------------------------------------*/


/* -------------------------------------------------------*/

@media screen and (max-width : 430px ) {

h1 {

font-family: 'c4';
font-size: 50px;
color:#F1F2E2;
margin:0px;

}

#accueil{

height: 601px;

}

#rond{

position: absolute;
top: 350px;
left: 50%;
transform:translateX(-50%) translateY(-50%);
width: 370px;
height: 370px;

}

#accueil p{

position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%) translateY(-135%);
color: #F1F2E2;
text-align: left;
width: 100%;
font-size: 14pt;
line-height: normal;

}

.titrePage:hover{

color: #F1F2E2;

}

#edi2:hover{
color: #F1F2E2;

}
#forma2:hover{
color: #F1F2E2;

}

#cont2:hover{
color: #F1F2E2;

}
#formationTxt{

height: 110px;

}

#editionTxt{

height: 110px;

}

#contText{

height: 110px;

}

.cont{

width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
display: block;
line-height: 106px;

}

#non{

margin-top: 490px;

}

#logo{

font-size: 28px;
margin-top: 25px;

}



#formation p {

width: 90%;
font-size: 12pt;
float: left;
margin-top: 200px;
margin-bottom: 0px;
line-height: normal;

}

header nav{

float: left;
margin-left: 0px;
width: 100%;
margin-bottom: 0px;
margin-top: 0px;
    
}

header nav ul {

padding: 0px;

}

header nav ul li {

display: inline-block;
margin-left: 0px;
text-transform: uppercase;
border-radius: 50px;
margin-right: 15px;        
}



#curseur{

opacity: 0;
}

#interieur-curseur{

opacity: 0;

}

#text-accueil{

width: 95%;
height: 25%;
margin-top: 405px;
left: 0px;

}

.txtAdobe{

color: #F1F2E2;
font-size: 11pt;
margin: auto;
line-height: normal;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 200;
padding: 15px;

}

.NcontLog{

position: relative;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
margin-bottom: 7px;
width: 95%;
display: inline-block;
z-index: 2;

}

.g1{

width: 100%;
aspect-ratio: 1/1;
background: url(../image/LogoLog1.jpg);
background-size: cover;

}

.g2{

margin-top: 7px;
width: 100%;
aspect-ratio: 1/1;
background: url(../image/LogoLog2.jpg);
background-size: cover;
}

.d{

margin-top: 7px;
width: 100%;
aspect-ratio: 1/1.275;
position: relative;

}

.d1{

width: 100%;
aspect-ratio: 1/0.62;
background: url(../image/cvAvant.jpg);
background-size: cover;
 background-position: center center;
}


.d2{

bottom: 0px;
width: 100%;
aspect-ratio: 1/0.62;
background: url(../image/cvArriere.jpg);
background-size: cover;
 background-position: center center;
 transition: 0.3s;
}

.textContGal{

position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
margin-top: 100px;
padding-right: 25%;
width: 95%;
height: 300px;
display: flex;
align-items: flex-end;
font-size: 12pt;
font-family: "Poppins", sans-serif;
color: #F1F2E2;

}

.VcontLog {
  position: relative;
  top:0px;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 2 colonnes égales */
    gap: 0px; /* Espace entre les éléments */
    width: 95%;
    margin: auto;
    padding-bottom: 0px;
}

.gp{

width: 100%;
aspect-ratio: 1/1.414;
position: relative;
border: 1px  solid #434343;
margin-bottom: 8px;

}

.gv{

width: 100%;
aspect-ratio: 1/0.85;
position: relative;
border: 1px  solid #434343;
margin-bottom: 8px;

}

.gt1{

width: 100%;
aspect-ratio: 1/1;
background: url(../image/A3Poster_Mockup01_MicroVolume.jpg);
background-size: cover;
margin-top: 7px;

}

.gt2{

width: 100%;
aspect-ratio: 1/1;
background: url(../image/Mockup.jpg);
background-size: cover;
margin-top: 7px;

}

.gt3{

width: 100%;
aspect-ratio: 0.707/1;
background: url(../image/couvTouc.jpg);
background-size: cover;
margin-top: 7px;

}

.titrePoster{

font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14pt;
float: left;
margin-top: 46px;
text-transform: uppercase;

}

.contPostTxt{

width: 66%;

}

.PostImg{

margin-right: 2.5%;

}

.PostImg{

width: 31%;

}

.contPoster{

margin-top: 15px;

}

#virus{

margin-top: 40px;

}

#pform{

margin-top: 40px;

}

#backgron{

width: 100%;
display: none;

}

header{

position: absolute;

}

.ConTexte{

font-size: 13pt;

}

#contGalclic {
    flex-direction: column;
    align-items: flex-start;
  }

  .clicGrand {
    width: 100%;
    height: auto;
  }

  .InfoClic {
    width: 100%;
    margin-left: 0;
    margin-top: 0px;
    margin-bottom: auto;
    padding: 20px;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .ContpetitClic {
    display: flex;
    justify-content: space-between; /* Égal espacement */
    align-items: center;
    width: 90%;
    margin-top: 0px;
  }

  .GalClic h2{

line-height: 37pt;
font-size: 53px;

  }

  .petitClic,
  .fermClic {
    height: 80px;
    width: 80px;
    border-radius: 50%;
  }

  .petitClic{

margin-top: 0px;

  }

  .fermClic {
    border: #FF8045 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; /* Supprimer le margin-top */
  }

  #flèche {
    font-size: 40px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
    
}

@media screen and (max-width : 400px ) {

#accueil p{

position: absolute;
top: 105%;
left: 50%;
transform: translateX(-50%) translateY(-120%);
color: #F1F2E2;
text-align: left;
width: 90%;
font-size: 12pt;
line-height: normal;

}

header nav ul li a {

text-decoration: none;
color: #F1F2E2;
font-size: 10pt;
cursor: none;

    
}

header nav ul li a:hover {

text-decoration: none;
color: #F1F2E2;
font-size: 10pt;
cursor: none;

    
}

h1{

font-size: 47px;

}


}

@media (max-width: 735px) {
  .curseur,
  .interieur-curseur {
    display: none !important;
  }
}