/* Style global */
.nunito-sans {
    font-family: "Nunito Sans", serif;
    font-optical-sizing: auto;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
  }

@font-face {
    font-family:"AldoPC";
    src: url(Aldo\ PC.ttf);
}

body {
    margin: 0;
    font-family: "AldoPC";
    color: #333;
}

/* Header */
header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    background-color: #c35e45;
    width: 100%;
    z-index: 10;
    top: 0;
  }
  
  header .header-left h1 {
    margin: 0;
    font-size: 22px;
    color: white;
  }
  
  header .header-left a {
    text-decoration: none;
  }
  
  header .header-left h1:hover {
    color: #f4cdac;
  }
  
  header .header-right ul {
    list-style: none;
    margin: 0;
    padding-right: 0;
    display: flex;
    margin-right: 40px;
  }
  
  header .header-right li {
    margin-right: 15px;
  }
  
  header .header-right a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: color 0.3s ease;
  }
  
  header .header-right a:hover {
    color: #f4cdac;
  }
  
  header .header-right li:not(:first-child) {
    border-left: 2px solid white; /* Trait blanc entre les éléments */
    padding-left: 15px; /* Espace après le trait */
  }


.main-container {
    display: flex; /* Structure en colonnes */
    flex-direction: row; /* Aligne horizontalement les enfants */
    width: 100%;
    height: 91.9vh; /* Occupe toute la hauteur de l'écran */
    overflow: hidden;
    margin-top: 60px;
}

.main-content {
    flex: 0 0 60%; /* Colonne gauche occupe 60% */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #fff; /* Couleur de fond pour tests */
}

/* Image */
main .image-section img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Texte superposé */
main .text-section {
    position: absolute;
    top: 29%; /* Ajustez en fonction de la position souhaitée */
    left: 31%;
    transform: translate(-50%, -50%);
    width: 100%; /* Largeur du texte relative à l'image */
    transform: rotate(-30deg) skewX(-30deg);
}

main .text-section h2 {
    margin: 0;
    font-size: 8.2vw; /* Taille responsive en fonction de la largeur de l'écran */
    color: #e68c3a;
}

main .text-section h2 span {
    margin-left: 10px;
    color: #e68c3a;
}

main .text-section p {
    font-size: 3.5vw; /* Taille responsive en fonction de la largeur de l'écran */
    margin-top: 2%;
    text-decoration: overline;
    color: #e68c3a;
    
}




.right-frame {
    flex: 0 0 40%; /* Colonne droite occupe 40% */
    background-color: #f4cdac;
    display: flex; /* Active flex pour aligner la forme */
    justify-content: center; /* Centre horizontalement la forme */
    position: relative;
    clip-path: polygon(0 10.4%, 0 0, 100% 0, 100% 100%, 55% 100%);
}