body {
    margin: 0;
    padding: 0;
    height: 100vh;
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: white;
    background-image: 
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0.1vw, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 0.1) 0.1vw, transparent 1px);
    background-size: 2.1vw 2.1vw; /* Taille du quadrillage */
    font-family: 'IBMP';
    cursor: none;
}

@font-face{
    font-family: 'Nes';
    src: url(Font/Nes.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'Aufeu';
    src: url(Font/FFauFEU.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'Arte';
    src: url(Font/Arte.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'IBMP';
    src: url(Font/IBMPlexMono-Light.woff) format('woff'),
         url(Font/IBMPlexMono-Light.woff2) format('woff2'),
         url(Font/IBMPlexMono-Light.ttf) format('truetype'),
         url(Font/IBMPlexMono-Light.eot) format('eot');
    font-weight: normal;
    font-style: normal;
}

.icon, .iconarchive, .iconmenu, .icondate, .iconhorloge, .iconreset, .cursor-line-horizontal, .cursor-line-vertical {
    z-index: 9; /* S'assure que ces éléments sont au-dessus */
}

#container3D canvas{
    z-index: 1; /* Le fond 3D est derrière les autres éléments */
    position: absolute; /* Positionner l'élément en arrière-plan */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
    top: 0;
    left: 0;
}

.line {
    position: absolute;
    background-color: rgba(0, 12, 255, 1);
    height: 0.1vw; /* Épaisseur du trait */
    transform-origin: left; /* L'origine de la transformation est le côté gauche */
    pointer-events: none; /* Les lignes ne bloquent pas les interactions */
}

.container {
    display: grid;
    grid-template-columns: repeat(6, 3vw);
    gap: 0px;
}

.square {
    width: 3vw;
    height: 5vw;
    cursor: pointer;
    transition: transform 0.2s;
}

.marquee {
    margin-top: 1.2vw;
    font-size: 1.2vw;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 80s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.arte {
    font-family: 'Arte';
    font-size: 3.5vw;
}
        

.aufeu{
          font-family: 'Aufeu';
                    font-size: 3.5vw;
                    line-height: 1.2em;
        }

        .black{
  background-color: black;
}

.bouli{
    width: 100%;
    height: 100%;
}


.brush{
    font-size: 0.8vw;
    margin-left: 7.5vw;
}

.brushsize{
font-size: 0.8vw;
}

button {
    font-size: 1.2vw;
    border: none; /* Supprime la bordure */
    outline: none; /* Supprime le contour lors du focus */
    cursor: pointer;
    border-radius: 5px; /* Ajoute un léger arrondi aux coins */
    background-color: none;
}

button:hover {
    color: white;
    background-color: rgba(0, 12, 255, 1);  /* Change la couleur au survol */
}

button:focus {
    outline: none; /* Supprime le contour lors du focus */
}

.buttonleft{
        font-size: 0.8vw;
    color: black;
    background-color: none;
    font-family: 'IBMP';
margin-left: 11vw;
}

.buttonright{
    font-size: 0.8vw;
    color: black;
        background-color: none;
        font-family: 'IBMP';
margin-left: 1vw;
}

#canvas {
    width: 55.55vw;
    margin: 0vw;
    border-bottom: 0.1vw solid black;
    cursor: crosshair;
}

#choix201 {
  margin-top: 1vw;
    margin-left: 1vw;
      padding-bottom: 0.7vw;
  padding-right: 1vw;
  text-align: right;
  font-size: 1.4vw;
    width: 30%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#choix202 {
  margin-top: 1vw;
        padding-bottom: 0.7vw;
  text-align: left;
  font-size: 1.5vw;
    width: 70%; /* ou 'width: 40%;' */
}

#choix203 {
  border-right: 0.1vw solid black;
  margin-top: 0vw;
      margin-left: 0.7vw;
          padding-top: 0.5vw;
      padding-bottom: 0.5vw;
  margin-right: 0vw;
  text-align: left;
  font-size: 0.8vw;
    width: 35%; /* ou 'width: 40%;' */
}

#choix204 {
  margin-top: 0vw;
    margin-left: 0.7vw;
        padding-top: 0.5vw;
      padding-bottom: 0.5vw;
  padding-right: 1vw;
  text-align: left;
  font-size: 0.8vw;
    width: 65%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#choix205 {
  margin-top: 0vw;
      margin-left: 0.7vw;
          padding-top: 0.5vw;
      padding-bottom: 0.5vw;
  margin-right: 0vw;
  text-align: left;
  font-size: 1vw;
    width: 25%; /* ou 'width: 40%;' */
}

#choix206 {
  margin-top: 0vw;
    margin-left: 1.5vw;
        padding-top: 0.5vw;
      padding-bottom: 0.5vw;
  padding-right: 1vw;
  text-align: left;
  font-size: 1vw;
    width: 81%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

.choiximage{
    width: 100%;
}

.choixmenu20 {  
  margin-top: 1vw;
    display: flex;
}

.choixmenu21 {  
  margin-top: 01.4vw;
  margin-right: 1vw;
    display: flex;
    border-radius: 4vw;
    border: 0.1vw solid black;
}

.choixmenu22 {  
  margin-top: 01.1vw;
  margin-right: 1vw;
    margin-left: 1vw;
    display: flex;
}

.choixmenu23 {  
  margin-top: 01.1vw;
  padding-bottom: 1.5vw;
  padding-right: 1vw;
    padding-left: 1vw;
    display: flex;
    border-bottom: 0.1vw solid black;
}

.choixmenu24 {  
  margin-top: 01.1vw;
  padding-bottom: 1.5vw;
  padding-right: 1vw;
    padding-left: 1vw;
    display: flex;
}

.choixpre{
    font-size: 1.8vw;
    margin-top: 0vw;
    margin-bottom: 1.3vw;
}

.click{
  color: white;
  background-color: rgba(0, 12, 255, 1);
  border: 0.1vw solid rgba(0, 12, 255, 1);
  border-radius: 50%;
  padding-top: 0.3vw;
  padding-bottom: 0.5vw;
  padding-right: 1vw;
  padding-left: 1vw;
  transform: rotate(20deg);
  position: absolute;
  font-size: 1vw;
  bottom: 1.4vw;
  right: 1vw;
  text-align: center;
}

.close {
    cursor: pointer;
    font-size: 3vw;
    position: absolute;
    top: 1.2vw; /* Position de la croix en haut */
    right: 1.2vw; /* Position de la croix à droite */
}

.close-btn {
    position: absolute;
    right: 1.5vw;
    top: 1.5vw;
    width: 20px;
    height: 20px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2vw;
    font-weight: bold;
}

#close-btn{
    top: 1vw;
    font-size: 2vw;
}

#column120 {
right: 0vw;
    position: absolute;
  font-size: 6vw;
      width: 55%;
}

#columnfixed {
  position: fixed;
    margin-top: 0vw;
    margin-bottom: 0vw;
  margin-left: 0vw;
  margin-right: 0vw;
    width: 32%;
}

.containerfin {
  margin-top: 0vw;
  display: flex;
      position: relative;
}

.controls {
    width: 55.55vw;
    display: flex;
    gap: 0.5vw;
    align-items: center;
    margin-top: 0.4vw;
    margin-bottom: 0.4vw;
}

.cursor-line-horizontal,
.cursor-line-vertical {
  position: fixed;
  background-color: black;
  pointer-events: none; /* Les lignes ne bloquent pas les interactions */
  z-index: 1000; /* Toujours au-dessus du contenu */
}

.cursor-line-horizontal {
    z-index: 9999;
  height: 0.1vw;
  width: 100vw;
  top: 50%;
}

.cursor-line-vertical {
    z-index: 9999;
  width: 0.1vw;
  height: 100vh;
  left: 50%;
}

#date {
    font-size: 1.5vw;
}

.desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.detail {  
    padding-top: 0.3vw;
  margin-top: 0vw;
    display: flex;
    margin-bottom: 0vw;
}

#detail1 {
  padding-top: 0.7vw;
      padding-bottom: 0.7vw;
  text-align: center;
  font-size: 0.7vw;
    width: 33.3%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#detail2 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 0.7vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

#detail3 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 0.7vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

.detaildeux {  
  margin-top: 0vw;
    display: flex;
    border-bottom: 0.1vw solid black;
    padding-bottom: 0.5vw;
}

#detaildeux1 {
  padding-top: 0.7vw;
      padding-bottom: 0.7vw;
  text-align: center;
  font-size: 0.7vw;
    width: 33.3%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#detaildeux2 {
    padding-top: 0.7vw;
        padding-bottom: 0.7svw;
  text-align: center;
  font-size: 0.7vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

#detaildeux3 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 0.7vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

.detailtrois {  
  margin-top: 0vw;
    display: flex;
    margin-bottom: 0vw;
}

.dounsaweb{
    font-family: 'Nes';
    margin-top: 0.5vw;
        margin-left: 0.5vw;
    font-size:1.5vw;
}

.exp{
    z-index: 8;
    font-family: 'IBMP';
    font-size: 0.9vw;
     text-align: center;
     position: absolute;
    top: 23.1vw;
    left: 42.8vw;
    color: rgba(0, 12, 255, 1);
}

.fonderietexte{
    margin-top: 0.8vw;
    margin-bottom: 0vw;
        margin-left: 1.2vw;
            margin-right: 1.5vw;
    font-size: 1.9vw;
}

#horloge {
    font-size: 1.5vw;
}

.icon {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: move;
        justify-content: center; /* Centre verticalement */
    align-items: center;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
    margin: 0vw;
}

.icon #icon1 {
    width: 8.2vw;
    height: 2vw;
}

.icon #icon2 {
    width: 8.2vw;
    height: 2vw;
}

.icon #icon3 {
    width: 10.3vw;
    height: 2vw;
}

.icon #icon4 {
    width: 10.3vw;
    height: 2vw;
}

.icon #icon5 {
    width: 14.5vw;
    height: 2vw;
}

.icon #icon6 {
    width: 10.3vw;
    height: 2vw;
}

.icondate {
    width: 10.4vw;
    height: 2vw;
        background-color: white;
        color: black;
        border: 0.12vw solid black;
border-radius: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}


.iconhorloge {
    width: 10.4vw;
    height: 2vw;
        background-color: white;
        color: black;
        border: 0.12vw solid black;
border-radius: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconmenu {
    margin:0vw;
    width: 86vw;
    height: 2vw;
        background-color: white;
        color: black;
        border: 0.12vw solid black;
border-radius: 1vw;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconreset {
    width: 10.4vw;
    height: 2vw;
        background-color: white;
        border: 0.12vw solid black;
border-radius: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconarchive {
    width: 10.2vw;
    height: 2vw;
        background-color: white;
        border: 0.12vw solid black;
border-radius: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconresetext{
    color: black;
    text-decoration: none;
    font-size: 1.5vw;
}

.iconmenu:hover{
        background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.iconhorloge:hover{
            background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.icondate:hover{
            background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.iconreset:hover{
            background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.iconarchive:hover{
    background: rgba(0, 12, 255, 1);
color: white; 
border: 0.12vw solid rgba(0, 12, 255, 1);
}

.iconarchive a:hover{
    color: white; 
}

.iconreset a:hover{
    color: white; 
}

.icon:hover .icon-label1 {
    background: rgba(0, 12, 255, 1);
    color: white;
        border: 0.12vw solid rgba(0, 12, 255, 1); 
}

.icon:hover .icon-label2 {
    background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.icon:hover .icon-label3 {
    background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.icon:hover .icon-label4 {
    background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

.icon:hover .icon-label5 {
    background: rgba(0, 12, 255, 1);
    color: white;
    border: 0.12vw solid rgba(0, 12, 255, 1);
}

.icon:hover .icon-label6 {
    background: rgba(0, 12, 255, 1);
    color: white; 
        border: 0.12vw solid rgba(0, 12, 255, 1);
}

/* 
.icon:hover {
    background-color: black;
          transform: scale(1.05); 
}
*/
/* 
#icon1:hover {

            cursor: url('Images/livre.png'), auto;
}

#icon2:hover {

            cursor: url('Images/letters.png'), auto;
}

#icon3:hover {

            cursor: url('Images/about.png'), auto;
}

#icon4:hover {

            cursor: url('Images/draw.png'), auto;
}

#icon5:hover {

            cursor: url('Images/fichier.png'), auto;
}

#icon6:hover {

            cursor: url('Images/couleur.png'), auto;
}
*/

#icon .icon{
    margin:0vw;
}

.icon img {
    margin: 0; 
    margin-top: 0.05vw;
    width: 10.8vw; /* Garde la largeur actuelle */
}

.icon-label {
    align-content: center;
    align-items: center;
}

.icon-label1 {
    text-align: center;
    width: 8.2vw;
    height: 2vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 4vw;
    margin-top: 0vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label2 {
    text-align: center;
    width: 8.2vw;
    height: 2vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 4vw;
    margin-top: 0vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label3 {
    text-align: center;
    width: 8.2vw;
    height: 2vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 4vw;
    margin-top: 0vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label4 {
    text-align: center;
    width: 10.3vw;
    height: 2vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 4vw;
    margin-top: 0vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label5 {
    text-align: center;
    width: 14.5vw;
    height: 2vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 4vw;
    margin-top: 0vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label6 {
    text-align: center;
    width: 10.3vw;
    height: 2vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 4vw;
    margin-top: 0vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.illu{
    display: none;
    left: 3.8vw;
        top: 0.8vw;
    position: fixed;
}

.illuimg{
    width: 94.8%;
}

.imgpro{
  width: 100%;
}

.imgprolast{
  width: 100%;
  margin-bottom: 1.6vw;
      background-color: black;
}

                input,
label {
     line-height: 1.5;
     text-indent: 10px;
          color: black;
          border: none;
          margin-left: 1vw;
          outline: none; 
        outline-style: none;
        resize: none;
        overflow: none;
}

.lo{
    margin-top: 0.1vw;
    color: #A9A9A9;
    font-size: 0.8vw;
    float: rigth;
}

.menu1 a{
    color: black;
    text-decoration: none;
}

.menu1 a:hover {
    color: rgba(0, 12, 255, 1);
  cursor:crosshair;
}

#movingDiv {
  z-index: 10;
    width: 4vw;
    height: 4vw;
    background-color: rgba(0, 12, 255, 1);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0%;
    left: 0%;
    border-radius: 4vw;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
}

.nes{
          font-family: 'Nes';
                    font-size: 3vw;
        }

        .plus1{
            display: none;
        }

                .plus2{
            display: none;
        }

        .popup {
    display: none !important;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.popup-content {
    display: none;
    background-color: white;
    border: 0.1vw solid black;
    text-align: center;
    width: 29vw;
    height: 17vw;
    position: relative; /* Ajouté pour positionner la croix */
}

.popupinfo{
    display: none;
    text-align: left;
    padding-left: 1vw;
    margin-top: 1vw;
        padding-bottom: 1vw;
        margin-bottom: 0vw;
    font-size: 2vw;
    border-bottom: 0.1vw solid black;
}

.popuptxt{
    display: none;
    font-size: 1.6vw;
    margin: 0vw;
        text-align: left;
    padding: 1vw;
}

.projetpresentation{
    margin-top: 1vw;
  margin-left: 1.2vw;
    margin-right: 3vw;
  font-size: 0.85vw;
  line-height: 1.5;
  margin-bottom: 0vw;
}   

.projetpresentation2{
    margin-top: 0.8vw;
  margin-left: 1.2vw;
    margin-right: 3vw;
  font-size: 0.75vw;
  line-height: 1.5;
  margin-bottom: 0vw;
}       

.propri {  
      border-bottom: 0.1vw solid black;
      margin-left: 0vw;
  margin-top: 0vw;
    display: flex;
}

#propri1 {
  padding-top: 1vw;
  padding-left: 1.2vw;
      padding-bottom: 1vw;
  border-right: 0.1vw solid black;
  text-align: left;
  font-size: 1vw;
    width: 50%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#propri2 {
    padding-top: 1vw;
        padding-left: 1.5vw;
        padding-bottom: 0.8vw;
  text-align: left;
  font-size: 1vw;
    width: 50%; /* ou 'width: 40%;' */
}  

.subcategory {
      display: flex;
  justify-content: space-between;
    font-size: 1.1vw;
    padding-left: 1vw;
        padding-right: 1vw;
    padding-top: 0.7vw;
    padding-bottom: 0.7vw;
    cursor: pointer;
}

.subcategory:hover {
    background: rgba(0, 12, 255, 1); 
    color: white;
    border-top: 0.1vw solid rgba(0, 12, 255, 1); 
    border-bottom: 0.1vw solid rgba(0, 12, 255, 1); 
}

.textexp1{
    height: 2vw;
        margin-left: 0vw;
        border-bottom: 0.1vw solid black;
        padding-bottom: 1.8vw;
}

.textscho1{
    margin-top: 1.8vw;
        height: 2vw;
    margin-left: 0vw;
    border-bottom: 0.1vw solid black;
    padding-bottom: 1.8vw;
}

.textexp{
    padding-top: 0.2vw;
    padding-left: 1.5vw;
    margin-top: 0vw;
    margin-left: 0vw;
    font-size: 1.2vw;
}

.textpresent{
    margin-top: 1vw;
    padding-left: 1vw;
    font-size: 1.5vw;
        padding-right: 1vw;
        padding-bottom: 1.5vw;
        padding-top: 1.5vw;
                border-top: 0.1vw solid black;
        border-bottom: 0.1vw solid black;
}

.textscho{
    padding-top: 0.2vw;
    padding-left: 1.5vw;
    margin-top: 0vw;
    margin-left: 0vw;
    font-size: 1.2vw;
}

.textetypo1{
            margin-top: 1.3vw;
            margin-bottom: 1.3vw;
            margin-left: 0vw;
        }

.textetypo2{
            margin-top: 2vw;
            margin-bottom: 1.3vw;
            margin-left: 0vw;
        }

        .textetypo3{
            margin-top: 2vw;
            margin-bottom: 1.3vw;
            margin-left: 0vw;
        }

.titrefont2{
    margin-top: 1vw;
    margin-left: 1vw;
    font-size: 5vw;
    margin-bottom: 1vw;
  }

  .window, .windowfont, .windowdraw, .windowfffonderie, .windowwork, .windowabout, .windowsignature, .windowfonderie, 
.windowlogo, .windownes, .windownothing, .windowtrain, .window36, .windowfixie, .windowgive, 
.windowagenda, .windowbeautiful {
    position: absolute;
    z-index: 1; /* Valeur de base */
}

.window {
    position: absolute;
    width: 300px;
    height: 200px;
    background: white;
    border: 0.12vw solid black;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.window36 {
    top: 1vw;
    left:2vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowabout {
    top: 2.2vw;
    left: 2.2vw;
    position: absolute;
    width: 35vw;
    height: 50vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowagenda {
    top: 8vw;
    left:5vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowbeautiful {
    top: 1vw;
    right:2vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowdraw {
    top: 2.1vw;
    left:27.3vw;
    position: absolute;
    width: 55.55vw;
    height: 43vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfixie{
    top: 5vw;
    left:10vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfonderie {
    top: 8vw;
    right:2vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfffonderie {
    top: 10.5vw;
    left:64.4vw;
    position: absolute;
    width: 30vw;
    height: 31vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfont {
    top: 2.38vw;
    left:42.3vw;
    position: absolute;
    width: 40vw;
    height: 45.8vw;
    background: white;
    border: 0.12vw solid black;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none;
}

.windowgive{
    top: 1vw;
    left:15vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowlogo {
    top: 8vw;
    left:12vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windownes {
    top: 8vw;
    left:1vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windownothing {
    top: 2.1vw;
    right:1.3vw;
    position: absolute;
    width: 18vw;
    height: 34.68vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowsignature {
    top: 1vw;
    right:1vw;
    position: absolute;
    width: 70vw;
    height: 48vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowtrain {
    top: 8vw;
    right:8vw;
    position: absolute;
    width: 70vw;
    height: 45vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowwork {
    top: 6.3vw;
    left:18.9vw;
    position: absolute;
    width: 39.8vw;
    height: 33vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.window-header {
    font-size: 2vw;
    padding: 1vw;
        padding-left: 1.2vw;
    cursor: move;
        border-bottom: 0.1vw solid black;
    user-select: none;
    position: relative;
}

.window-content {
    height: calc(100% - 4.6vw); /* Ajuster pour éviter le dépassement */
    overflow-y: auto;
}

.window-content2 {
    height: calc(100% - 4.6vw); /* Ajuster pour éviter le dépassement */
    overflow-y: auto;
}





/* Boite */
/* Boite */
/* Boite */
/* Boite */
/* Boite */





:root {
  --box-size: 12vw;
}

.perspective {
  position: absolute;
  perspective: 500px;
  perspective-origin: 50% -200px;
  bottom: 17vw;
  right: 20.5vw;
}

.box {
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  width: var(--box-size);
  height: var(--box-size);
}

.back {
    border: 0.15vw solid black;
     background: white;
  transform: translateZ(calc(var(--box-size) * -1.02)) rotateY(180deg);
}

.back::after {
    content: "Designed by Adrian Sadoun";
        font-size: 0.75vw;
      color: black;
      bottom: 0.4vw;
  left: 4.4vw;
  position: absolute;
  transform: translateX(-50%);
}

.front {
    border: 0.15vw solid black;
     background: white;
}

.front::before {
  content: "FF au feu";
  color: black;
    font-size: 1vw;
  position: absolute;
  bottom: 0.3vw;
  right: 0.5vw;
}

.front::after {
  content: "__ __ __";
    color: black;
  font-size: 0.8vw;
  position: absolute;
  height: 4px;
  top: 1.5vw;
  left: 1.5vw;
    right: 0.5vw;
}

.left {
    border: 0.15vw solid black;
     background: white;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.left::after {
    content: "*";
      color: black;
    font-size: 2vw;
      top: 5vw;
  left: 6vw;
  position: absolute;
  transform: translateX(-50%);
}

.right {
    border: 0.15vw solid black;
     background: white;
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.right::after {
  content: "*";
    color: black;
  font-size: 2vw;
  position: absolute;
  top: 5vw;
  left: 6vw;
  transform: translateX(-50%);
}

.top {
    border: 0.15vw solid black;
     background: white;
  transform: rotateX(70deg) translateZ(var(--box-size));
  transform-origin: bottom left;
}

.top::after {
  content: "FFFonderie";
    color: black;
  font-size: 1.5vw;
  position: absolute;
  bottom: -0.5vw;
  transform: translateY(-50%);
  left: 1.2vw;
  height: 15%;
}

.bottom {
    border: 0.15vw solid black;
     background: white;
  transform: rotateX(90deg);
  transform-origin: bottom left;
}

.box {
  animation: rotate 5s linear infinite;
  transform-origin: 6vw center -6vw;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotateY(360deg);
  }
}


/* Texte défilant */
.content {
    display: block;
    padding: 0;
    overflow: hidden;
    position: relative;
    /*  table-layout: fixed;*/
    width: 100%;
}
.message {
    display: block;
    margin-left: -100%;
    padding: 0 5px;
    font-size: 2rem;
    text-align: left;
    animation: defilement 20s infinite linear;
}
.message:after {
    content: attr(data-text);
    position: absolute;
    white-space: nowrap;
    padding-left: 10px;
}

.message:after {
    content: attr(data-text); ... }


 @keyframes defilement {
 0%, 100% {
margin-left:0;
}
 99.99% {
margin-left:-100%;
}
}


/* Responsive */
/* Responsive */
/* Responsive */
/* Responsive */
/* Responsive */





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

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #ffffff;
    background-image: 
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 7.1vw 7.1vw; /* Taille du quadrillage */
    font-family: 'IBMP';
}

.aufeu{
          font-family: 'Aufeu';
                    font-size: 9vw;
                    line-height: 1.2em;
        }

        .arte {
    font-family: 'Arte';
    font-size: 9vw;
}

        .bouli{
            padding-bottom: 0vw;
            margin-top: 0vw;
    width: 100%;
    height: 100%;
}


        .nes{
             font-size: 7.5vw;
                    line-height: 1.2em;
        }

.container {
    display: grid;
    grid-template-columns: repeat(6, 10vw);
    gap: 0vw;
}

.square {
    width: 10vw;
    height:17.35vw;
    cursor: pointer;
    transition: transform 0.2s;
}

#choix201 {
  margin-top: 1vw;
    margin-left: 1vw;
      padding-bottom: 0.7vw;
  padding-right: 1vw;
  text-align: right;
  font-size: 1.4vw;
    width: 30%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#choix202 {
  margin-top: 1vw;
        padding-bottom: 0.7vw;
  text-align: left;
  font-size: 1.5vw;
    width: 70%; /* ou 'width: 40%;' */
}

#choix203 {
  border-right: 0.1vw solid black;
  margin-top: 0vw;
      padding-left: 2vw;
          padding-top: 1.2vw;
      padding-bottom: 1.2vw;
  margin-right: 0vw;
  text-align: left;
  font-size: 2.3vw;
    width: 35%; /* ou 'width: 40%;' */
}

#choix204 {
  margin-top: 0vw;
      padding-left: 1.5vw;
          padding-top: 1.2vw;
      padding-bottom: 1.2vw;
  padding-right: 1vw;
  text-align: left;
  font-size: 2.3vw;
    width: 65%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#choix205 {
  margin-top: 4.5vw;
      margin-left: 3vw;
          padding-top: 0.5vw;
      padding-bottom: 0.5vw;
  margin-right: 0vw;
  text-align: left;
  font-size: 2.5vw;
    width: 25%; /* ou 'width: 40%;' */
}

#choix206 {
  margin-top: 4.5vw;
    margin-left: 3vw;
        padding-top: 0.5vw;
      padding-bottom: 0.5vw;
  padding-right: 1vw;
  text-align: left;
  font-size: 2.5vw;
    width: 81%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

.choiximage{
    width: 100%;
    margin-left: 1vw;
}

.choixmenu20 {  
  margin-top: 2vw;
    margin-bottom: 0vw;
    display: flex;
}

.choixmenu21 {  
  margin-top: 04.5vw;
  margin-right: 3vw;
    margin-left: 3vw;
    display: flex;
    border-radius: 4vw;
    border: 0.1vw solid black;
}

.choixmenu22 {  
  margin-top: 01.1vw;
  margin-right: 1vw;
    margin-left: 1vw;
    display: flex;
}

.choixmenu23 {  
  margin-top: 01.1vw;
  padding-bottom: 5vw;
  padding-right: 1vw;
    padding-left: 1vw;
    display: flex;
    border-bottom: 0.1vw solid black;
}

.choixmenu24 {  
  margin-top: 01.1vw;
  margin-bottom: 5vw;
  padding-bottom: 7vw;
  padding-right: 1vw;
    padding-left: 1vw;
    display: flex;
}

.choixpre{
    margin-left: 3vw;
    font-size: 5vw;
    margin-top: 0vw;
    margin-bottom: 1.3vw;
}

.close {
    cursor: pointer;
    font-size: 6.5vw;
    position: absolute;
    top: 1.2vw; /* Position de la croix en haut */
    right: 1.2vw; /* Position de la croix à droite */
}

.close-btn {
    position: absolute;
    right: 5vw;
    top: 5.4vw;
    width: 20px;
    height: 20px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 6.5vw;
    font-weight: bold;
}

#column120 {
right: 0vw;
    position: absolute;
  font-size: 6vw;
      width: 100%;
}

#columnfixed {
    margin-top: 0vw;
    margin-bottom: 5vw;
  margin-left: 0vw;
  margin-right: 0vw;
    width: 100%;
     position: relative; 
}

  #columnfixed, #column120 {
    width: 100%; /* Chaque colonne prend toute la largeur */
    position: relative; /* Les deux colonnes se suivent naturellement */
  }

.containerfin {
  margin-top: 0vw;
  display: block;
}

#date{
    font-size: 4.3vw;
}

.desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.detail {  
        width: 100%;
  padding-top: 3vw;
    display: flex;
    margin-bottom: 0vw;s
}

#detail1 {
  padding-top: 0.7vw;
      padding-bottom: 0.7vw;
  text-align: center;
  font-size: 2vw;
    width: 33.3%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#detail2 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 2vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

#detail3 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 2vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

.detaildeux {  
    width: 100%;
  margin-top: 0vw;
    display: flex;
    border-bottom: 0.1vw solid black;
    margin-bottom: 0vw;
    padding-bottom: 3vw;
}

#detaildeux1 {
  padding-top: 0.7vw;
      padding-bottom: 0.7vw;
  text-align: center;
  font-size: 2vw;
    width: 33.3%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#detaildeux2 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 2vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

#detaildeux3 {
    padding-top: 0.7vw;
        padding-bottom: 0.7vw;
  text-align: center;
  font-size: 2vw;
    width: 33.3%; /* ou 'width: 40%;' */
}

.detailtrois {
    width: 100%;  
  margin-top: 0vw;
    display: flex;
    margin-bottom: 3vw;
}

.disparait{
    display: none;
}

.exp{
    display: none;
    z-index: 100;
    font-family: 'IBMP';
    font-size: 0.6vw;
     text-align: center;
     position: absolute;
    top: 39.6vw;
    left: 44.8vw;
    color: rgba(0, 12, 255, 1);
}

#horloge{
    font-size: 4.3vw;
}

.popup{
    display: none;
}

#popup{
    display: none;
}

.popup-content{
    display: none;
}

.icon {
    position: relative;
    width: 30.3vw;
    height: .5vw;
    display: flex;
    flex-direction: column;
    cursor: pointer;
        justify-content: center; /* Centre verticalement */
    align-items: center;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
    margin: 0vw;
}

.icondate {
    width: 35.3vw;
    height: 7vw;
    background: white;
    border: 0.1vw solid black;
border-radius: 8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconhorloge {
    width: 35.3vw;
    height: 7vw;
    background: white;
    border: 0.1vw solid black;
border-radius: 8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconmenu {
    width: 85.1vw;
    height: 7vw;
    background: white;
    border: 0.1vw solid black;
border-radius: 8vw;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconreset {
    width: 35.3vw;
    height: 7vw;
        background-color: white;
        border: 0.12vw solid black;
border-radius: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: background 0.3s;
    text-align: center;
}

.iconresetext{
    color: black;
    text-decoration: none;
    font-size: 4.3vw;
}

#icon1{
    margin-top: 19.5vw;
    margin-left: 3.5vw;
}

#icon2{
        margin-top: 11.1vw;
    margin-left: 53.2vw;
}

#icon3{
            margin-top: 31.3vw;
    margin-left: 3.5vw;
}

#icon5{
            margin-top: 47.9vw;
    margin-right: 2.7vw;
}

.icon img{
    width: 36.5vw;
}

#icon4{
display: none;
}

#icon6{
            margin-top: 76.3vw;
    margin-right: 33.5vw;
}

#icon9{
display: none;
}

#icon7{
    margin-top: 102.8vw;
        margin-right: 0vw;
}

#icon8{
    margin-top: 102.8vw;
        margin-left: 0.9vw;
}

#icon10{
    margin-top: 32vw;
    margin-left: 12.8vw;
}

.icon-label {
    align-content: center;
    align-items: center;
    margin-top: 2vw;
}

.icon-label1 {
    text-align: center;
    width: 35.3vw;
    height: 7vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 8vw;
    margin-top: 0vw;
    font-size: 4.3vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label2 {
    text-align: center;
    width: 35.3vw;
    height: 7vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 8vw;
    margin-top: 0vw;
    font-size: 4.3vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label3 {
    text-align: center;
    width: 35.3vw;
    height: 7vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 8vw;
    margin-top: 0vw;
    font-size: 4.3vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label4 {
    text-align: center;
    width: 35.3vw;
    height: 7vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 8vw;
    margin-top: 0vw;
    font-size: 4.3vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label5 {
    text-align: center;
    width: 35.3vw;
    height: 7vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 8vw;
    margin-top: 0vw;
    font-size: 4.3vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.icon-label6 {
    text-align: center;
    width: 35.3vw;
    height: 7vw;
    align-content: center;
    align-items: center;
        background-color: white;
        color: black;
        border: 0.12vw solid BLACK;
        border-radius: 8vw;
    margin-top: 0vw;
    font-size: 4.3vw;
    letter-spacing: 0.05vw;
    margin-bottom:0vw;
}

.illu{
    margin-left: 1vw;
    margin-top: 102.5vw;
    width: 95%;
    position: absolute;
}

                input,
label {
    margin-top: 2.8vw;
    margin-bottom: 2vw;
     line-height: 1.5;
     text-indent: 10px;
          color: black;
          border: none;
          margin-left: 1vw;
          outline: none; 
        outline-style: none;
        resize: none;
        overflow: none;
        font-size: 40vw;
}

.line {
    position: absolute;
    background-color: rgba(0, 12, 255, 1);
    height: 0.5vw; /* Épaisseur du trait */
    transform-origin: left; /* L'origine de la transformation est le côté gauche */
    pointer-events: none; /* Les lignes ne bloquent pas les interactions */
}

.lo{
    margin-top: 0.8vw;
    padding-right: 0.5vw;
    color: #A9A9A9;
    font-size: 2vw;
    float: rigth;
}

.marquee {
    border-radius: 5vw;
    margin-top: 4.5vw;
    font-size: 5vw;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

#movingDiv {
  z-index: 10;
    width: 7vw;
    height: 7vw;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
}

  .popup {
    display: none !important;
    background-color: transparent !important;
  }

.projetpresentation{
    margin-top: 3vw;
  margin-left: 3vw;
    margin-right: 3vw;
  font-size: 3.2vw;
  line-height: 1.25;
  margin-bottom: 0vw;
}   

.projetpresentation2{
    margin-top: 3vw;
  margin-left: 3vw;
    margin-right: 3vw;
  font-size: 3.2vw;
  line-height: 1.25;
  margin-bottom: 0vw;
}       

.propri {  
      border-bottom: 0.1vw solid black;
      margin-left: 0vw;
  margin-top: 0vw;
    display: flex;
}

#propri1 {
  padding-top: 2vw;
  padding-left: 3vw;
      padding-bottom: 2vw;
  border-right: 0.1vw solid black;
  text-align: left;
  font-size: 3.5vw;
    width: 50%; /* ou utilisez une valeur en pourcentage comme 'width: 30%;' */
}

#propri2 {
    padding-top: 2vw;
        padding-left: 3vw;
        padding-bottom: 2vw;
  text-align: left;
  font-size: 3vw;
    width: 50%; /* ou 'width: 40%;' */
}

        .plus1{
            display: none;
        }

                .plus2{
            display: none;
        }

.subcategory {
      display: flex;
  justify-content: space-between;
    font-size: 3.5vw;
    padding-left: 2vw;
        padding-right: 1vw;
    padding-top: 4vw;
    padding-bottom: 3vw;
    cursor: pointer;
}

#subcategory10{
padding-bottom: 6.7vw;
}

.textexp1{
    margin-top: 5vw;
    height: 6vw;
                margin-bottom: 0vw;
                border-bottom: 0.1vw solid black;
                padding-bottom: 4.8vw;
}

.textscho1{
    margin-top: 5vw;
    height: 6vw;
                margin-bottom: 0vw;
                border-bottom: 0.1vw solid black;
                padding-bottom: 4.8vw;
}

.textexp{
    margin-top: 0vw;
            margin-bottom: 0vw;
    margin-left: 0vw;
    padding-left: 3.7vw;
        padding-top: 0.6vw;
            padding-bottom: 0vw;
    font-size: 3.5vw;
}

.textpresent{
    margin-top: 4vw;
    padding-left: 3vw;
    font-size: 4.2vw;
        padding-right: 5vw;
        padding-bottom: 4vw;
        padding-top: 3vw;
                border-top: 0.1vw solid black;
        border-bottom: 0.1vw solid black;
}

.textscho{
    margin-top: 0vw;
        margin-bottom: 0vw;
    margin-left: 0vw;
    padding-left: 3.7vw;
        padding-top: 0.6vw;
            padding-bottom: 0vw;
    font-size: 3.5vw;
}

.textetypo1{
            margin-top: 2vw;
            margin-bottom: 2vw;
            margin-left: 0vw;
            width: 100%;
        }

        .textetypo3{
            margin-top: 2vw;
            margin-bottom: 2vw;
            margin-left: 0vw;
            width: 100%;
        }

.textetypo2{
            margin-top: 2.7vw;
            margin-bottom: 2vw;
            margin-left: 0vw;
            width: 100%;
        }

.window {
    position: absolute;
    width: 300px;
    height: 200px;
    background: white;
    border: 0.12vw solid black;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.window36 {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowabout {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 175vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowagenda {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowbeautiful {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowdraw {
    top: 2.1vw;
    left:27.3vw;
    position: absolute;
    width: 55vw;
    height: 42vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfixie{
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfonderie {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfffonderie {
    top: 10vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 105vw;
    background: black;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowfont {
    top: 18vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 123vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowgive{
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowlogo {
      top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windownes {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windownothing {
    top: 10vw;
    right:4vw;
    position: absolute;
    width: 60vw;
    height: 120vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowsignature {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowtrain {
    top: 2vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 170vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.windowwork {
    top: 18vw;
    left:2vw;
    position: absolute;
    width: 95vw;
    height: 139.3vw;
    background: white;
    border: 0.12vw solid black;
    display: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.window-header {
    font-size: 7.5vw;
    padding: 3vw;
        padding-left: 3vw;
    cursor: move;
    background-color: white;
        border-bottom: 0.1vw solid black;
    user-select: none;
    position: relative;
}

.window-content {
    height: calc(100% - 25.8vw); /* Ajuster pour éviter le dépassement */
    overflow-y: auto;
}

.window-content2 {
    height: calc(100% - 15.9vw); /* Ajuster pour éviter le dépassement */
    overflow-y: auto;
}

#overlay, .overlay {
    background: rgba(255,255,255,0.8); /* blanc transparent, ajuste l'opacité si besoin */
}

/* Boite */
/* Boite */
/* Boite */
/* Boite */
/* Boite */





.fonderietexte{
    display: none;
        margin-top: 3vw;
    margin-left: 3.5vw;
        margin-right: 3.5vw;
    font-size: 6.5vw;
}


.click{
  color: white;
  background-color: rgba(0, 12, 255, 1);
  border: 0.1vw solid rgba(0, 12, 255, 1);
  border-radius: 50%;
  padding-top: 2vw;
  padding-bottom: 2vw;
  padding-right: 2vw;
  padding-left: 2vw;
  transform: rotate(20deg);
  position: absolute;
  font-size: 4vw;
  bottom: 6vw;
  right: 5vw;
  text-align: center;
}

:root {
  --box-size: 42vw;
}

.perspective {
  position: absolute;
  perspective: 5s00px;
  perspective-origin: 50% -200px;
  bottom: 60vw;
  right: 66vw;
}

.box {
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  width: var(--box-size);
  height: var(--box-size);
}

.back {
    border: 0.4vw solid black;
     background: white;
  transform: translateZ(calc(var(--box-size) * -1.02)) rotateY(180deg);
}

.back::after {
    content: " FF is a collective project in which I am part of, established at ESA Saint-Luc in Liège. All its members aim to initiate, deepen, perfect, criticize, and share their approach(es) of letters.";
        font-size: 1.5vw;
      color: black;
      bottom: 1.54vw;
  left: 15vw;
  position: absolute;
  transform: translateX(-50%);
}

.front {
    border: 0.4vw solid black;
     background: white;
}

.front::before {
  content: "FF au feu";
  color: black;
    font-size: 2.5vw;
  position: absolute;
  bottom: 2vw;
  right: 3vw;
}

.front::after {
  content: "__ __ __";
    color: black;
  font-size: 3vw;
  position: absolute;
  height: 4px;
  top: 1.5vw;
  left: 5vw;
    right: 0.5vw;
}

.left {
    border: 0.4vw solid black;
     background: white;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.left::after {
    content: "*";
      color: black;
    font-size: 7vw;
      top: 15vw;
  left: 20vw;
  position: absolute;
  transform: translateX(-50%);
}

.right {
    border: 0.4vw solid black;
     background: white;
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.right::after {
  content: "*";
    color: black;
  font-size: 7vw;
  position: absolute;
  top: 15vw;
  left: 20vw;
  transform: translateX(-50%);
}

.top {
    border: 0.4vw solid black;
     background: white;
  transform: rotateX(70deg) translateZ(var(--box-size));
  transform-origin: bottom left;
}

.top::after {
  content: "FFFonderie";
    color: black;
  font-size: 4vw;
  position: absolute;
  bottom: -2.5vw;
  transform: translateY(-50%);
  left: 2vw;
  height: 15%;
}

.bottom {
    border: 0.4vw solid black;
     background: white;
  transform: rotateX(90deg);
  transform-origin: bottom left;
}

.box {
  animation: rotate 5s linear infinite;
  transform-origin: 20vw center -20vw;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

}