body {

    padding: 0;
    background: url('dossier-images/fond-mer.GIF');
    background-size: cover;
    margin: 0 auto;
    position: relative;
    background-size: 1500px;
    height: 1300px;
    
  
  }
  
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }
  
  p2  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 14px
  }
  
  p3  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 17px;
    font-weight: 700;
  }
  
  
  a {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #31a499;
  }
  
  h1 {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 17px;
    margin: 0;
    padding: 0;
  }
  
  
  h2 {
    font-family: Arial, sans-serif;
    color: #31a499;
  }
  
  h3 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    color: #ffffff;
  }
  
  h4 {
    font-family: Arial, sans-serif;
    color: #7678c4;
    font-size: 17px; 
    margin: 0;
    padding: 0;
  }
  
  h5 {
    font-family: Arial, sans-serif;
    color: #ff8ea3;
  }
  
  h6 {
    font-family: Arial, sans-serif;
    color: #be0000;
    font-size: 12px;
    margin: 0;
    padding: 0;
    font-weight: normal; /* facultatif, pour un rendu plus léger */
  }
  
  h7 {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 100;
  }
  
  .before {
  position: relative;
  top: 0px;
  width: 1500px;
  height: 1200px;
  margin: 0px auto;
  background-color: transparent;
  overflow: hidden;
  }
  
  .main {
    position: relative;
    width: 1000px;
    height: 1200px;
    margin: 10px auto;
    border-radius: 10px;
    background: url('dossier-images/papierbleubleu.png');
    background-size: 1500px;
    overflow: hidden;
    z-index: 0;
    border: solid rgb(180, 137, 137);
  }
  
  .main img {
    position: absolute;
  }
  
  
  
  
    .zone-libre {
      position: relative;
      top: 0px;
      width: 3000px;
      height: 2000px;
      margin: 0px auto;
      background-color: transparent;
      overflow: hidden;
    }
  
    /* Chaque image a sa position libre */
    .zone-libre img {
      position: absolute;
    }
  
  
    .zone-libre-petite {
      position: relative;
      top: 0px;
      width: 3000px;
      height: 2000px;
      margin: 0px auto;
      background-color: transparent;
      overflow: hidden;
    }
  
    /* Chaque image a sa position libre */
    .zone-libre-petite img {
      position: absolute;
    }
  
  
  
  
    .slider {
      position: absolute;
      top: 800px;
      left: 50px;
      width: 800px;
      height: 120px; /* hauteur ajustée pour contenir les images */
      background: transparent;
      overflow: hidden;
      border: dotted brown;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    .slider-track {
      display: flex; /* important pour aligner horizontalement */
      gap: 0;
      animation: scroll 20s linear infinite;
    }
    
    .slide {
      flex: 0 0 auto; /* largeur fixe */
      width: 300px;
      height: 120px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .slide img {
      width: 300px;
      height: 120px;
      object-fit: contain;
      background: transparent;
    }
    
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
  
  
  .gallery-container {
    position: absolute;
    top: 30px;
    left: 420px;
    width: 300px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    background-color: transparent;
    z-index: 50;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  
  
  .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
  
  .gallery-image.active {
    display: block;
  }
  
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* ou selon la taille de ton image */
    height: 40px;
    cursor: pointer;
    z-index: 10;
    user-select: none;
  }
  
  .arrow.left {
    left: 10px;
  }
  
  .arrow.right {
    right: 10px;
  }
  
  .gallery-container:hover  {
    z-index: 70;
    transform: scale(1.02);
  }
  
  
  
  
  
  
  .img-home {
      position: absolute;
      top: 50px;
      left: 190px;
      width: 70px; /* ou selon la taille de ton image */
      height: 80px;
      z-index: 10;
    }
  
  .img-home:hover {
      transform: scale(1.07) rotate(2deg);
      box-shadow: 0px 3px 6px rgb(218, 144, 255);
    }
  
  
  
    .blog {
      position: relative;
      top: 300px;
      left: 50px;
      width: 900px; /* obligatoire */
      height: 500px; /* obligatoire */
      overflow-y: hidden;
      border: dotted rgb(113, 41, 0);
      overflow-y: auto;
    }
    
    
    .intro-dear-blog {
      position: relative;
      top: 300px;
      left: 50px;
      width: 900px; /* obligatoire */
      height: 200px; /* obligatoire */
      background-color: rgb(150, 187, 187);
    
    }
  
  .img-dear-blog {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 500px; /* obligatoire */
    height: 150px; /* obligatoire */
  }
  
  .img-dear-blog:hover {
    transform: scale(1.03);
  }
  
  .img-archive {
    position: absolute;
    top: 70px;
    left: 610px;
    width: 150px; /* obligatoire */
    height: 70px; /* obligatoire */
  }
  
  
  
    
  
  .quatorze-juillet {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    top: 0px;
    left: 0px;
    width: 900px; /* obligatoire */
    height: 450px; /* obligatoire */
    z-index: 15;
    background: url('dossier-images/stbrevin2.png');
    background-size: cover;
  }
  
  
  .quatorze-juillet-texte {
    position: absolute;
    top: 200px;
    left: 520px;
    width: 320px; /* obligatoire */
    height: 250px; /* obligatoire */
    padding: 20px;
    margin: 0px;
    z-index: 15;
    border: dotted white;
  }
  
  .img-mer  {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 180px; /* obligatoire */
    height: 120px; /* obligatoire */
    z-index: 150;
  }
  
  .img-mer:hover  {
    transform: scale(1.05);
    z-index: 150;
  }
  
  
  .img-stbrevin2 {
    position: absolute;
    top: 50px;
    left: 710px;
    width: 180px; /* obligatoire */
    height: 80px; /* obligatoire */
    z-index: 15;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  .img-stbrevin2:hover {
    transform: scale(1.02);
  }
  
  .img-stbrevin4 {
    position: absolute;
    top: 30px;
    left: 480px;
    width: 220px; /* obligatoire */
    height: 160px; /* obligatoire */
    z-index: 15;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  .img-stbrevin4:hover {
    transform: scale(1.02);
  }
  
  
  
  .texte-juno {
    position: absolute;
    top: 120px;
    left: 240px;
    width: 220px; /* obligatoire */
    height: 260px; /* obligatoire */
    z-index: 15;
    overflow-y: auto;
  }
  
  .img-papierviolet1 {
    position: absolute;
    top: 100px;
    left: 170px;
    width: 350px; /* obligatoire */
    height: 320px; /* obligatoire */
    z-index: 10;
    transform: rotate(-2deg);
  }
  
  
  
  
  
  .diaryy {
    position: absolute;
    padding: 10px;
    top: 110px;
    left: 1000px;
    width: 270px; /* obligatoire */
    height: 200px; /* obligatoire */
    transform: rotate(1.4deg);
    background-image: url('dossier-images/papiercarnetjaune.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 20;
    overflow-y: auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  .diaryy:hover {
    transform: scale(1.03) rotate(1.2deg);
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.8);
  }
  
  .img-pizza {
    position: absolute;
    top: 280px;
    left: 520px;
    width: 100px; /* obligatoire */
    height: 50px; /* obligatoire */
    z-index: 19;
  }
  
  .img-londrespaysage {
    position: absolute;
    top: 400px;
    left: 0px;
    width: 850px; /* obligatoire */
    height: 500px; /* obligatoire */
    z-index: 10;
  }
  
  
  
  
  
  
  
  /* Le container de la carte */
  .flip-card {
    position: absolute;
    top: 150px;
    left: 580px;
    width: 300px;
    height: 200px;
    perspective: 1000px; /* Perspective 3D */
    margin: 0 auto;
    z-index: 200;
  }
  
  /* La partie qui effectue l'animation de retournement */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* Active la 3D */
    transition: transform 0.6s ease-in-out; /* Transition fluide */
  }
  
  /* Applique la rotation de la carte au survol */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); /* Rotation horizontale */
  }
  
  /* Les faces de la carte */
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Cache la face arrière quand elle est retournée */
  }
  
  /* Face avant (RECTO) */
  .flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Face arrière (VERSO) */
  .flip-card-back {
    transform: rotateY(180deg); /* Place la face arrière à l’envers */
  }
  
  .flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  
  
  
  .img-papierviolet {
    position: absolute;
    top: 50px;
    left: 290px;
    width: 300px; /* obligatoire */
    height: 300px; /* obligatoire */
    z-index: 15;
  }
  
  .img-blogger {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px; /* obligatoire */
    height: 300px; /* obligatoire */
    z-index: 15;
  }
  
  .img-blogger1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px; /* obligatoire */
    height: 200px; /* obligatoire */
    z-index: 15;
  }
  
  .img-waves {
    position: absolute;
    top: 0px;
    left: 200px;
    width: 200px; /* obligatoire */
    height: 160px; /* obligatoire */
    z-index: 15;
  }
  
  .img-waves:hover {
    transform: scale(1.1);
    box-shadow: 5px 5px 10px rgba(183, 0, 255, 0.3);
    z-index: 300;
  }
  
  
  .img-link3 {
    position: absolute;
    top: 0px;
    left: 800px;
    width: 230px; /* obligatoire */
    height: 130px; /* obligatoire */
    z-index: 15;
  }
  
  .img-papierviolett {
    position: absolute;
    top: 0px;
    left: 400px;
    width: 400px; /* obligatoire */
    height: 130px; /* obligatoire */
    z-index: 15;
  }
  
  
  
  
  
  
  
  
  .img-choco {
    position: absolute;
    top: 1100px;
    left: 50px;
    width: 200px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  .img-surfergirl {
    position: absolute;
    top: 1100px;
    left: 270px;
    width: 200px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  .img-lie {
    position: absolute;
    top: 1100px;
    left: 500px;
    width: 200px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  .img-perfect {
    position: absolute;
    top: 1100px;
    left: 750px;
    width: 200px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  
  .partie-plan-pour-londres {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    top: 0px;
    left: 0px;
    width: 900px; /* obligatoire */
    height: 500px; /* obligatoire */
    padding: 0px;
    margin: 0px;
    z-index: 15;
    background: url('dossier-images/stripespurple.jpg');
    background-size: cover;
  }
  
  .img-moodboard-londres {
      position: absolute;
      top: 20px;
      left: 0px;
      width: 900px; /* obligatoire */
      height: 400px; /* obligatoire */
    }
  
    .moodboard-tout  {
      position: absolute;
      top: 20px;
      left: 0px;
      width: 900px; /* obligatoire */
      height: 400px; /* obligatoire */
    }
  
  
    .hover-parc {
      position: absolute;
      top: 300px;
      left: 460px;
      width: 80px; /* obligatoire */
      height: 80px; /* obligatoire */
      background-image: url('dossier-images/hover-etoile.png');
      background-size: cover;
      z-index: 17;
    }
  
    .hover-parc:hover {
      position: absolute;
      width: 150px; /* obligatoire */
      height: 60px; /* obligatoire */
      background-image: url('dossier-images/hover-parc.png');
      background-size: cover;
      z-index: 17;
    }
  
  
    .hover-tea {
      position: absolute;
      top: 40px;
      left: 300px;
      width: 80px; /* obligatoire */
      height: 80px; /* obligatoire */
      background-image: url('dossier-images/hover-etoile.png');
      background-size: cover;
      z-index: 17;
    }
  
    .hover-tea:hover {
      position: absolute;
      width: 120px; /* obligatoire */
      height: 50px; /* obligatoire */
      background-image: url('dossier-images/hover-tea.png');
      background-size: cover;
      z-index: 17;
    }
  
  
  
  
    .hover-harrypotter {
      position: absolute;
      top: 320px;
      left: 100px;
      width: 80px; /* obligatoire */
      height: 80px; /* obligatoire */
      background-image: url('dossier-images/hover-etoile.png');
      background-size: cover;
      z-index: 17;
    }
  
    .hover-harrypotter:hover {
      position: absolute;
      width: 100px; /* obligatoire */
      height: 40px; /* obligatoire */
      background-image: url('dossier-images/hover-harrypotter.png');
      background-size: cover;
      z-index: 17;
    }
  
  
  
    .hover-visiter {
      position: absolute;
      top: 210px;
      left: 230px;
      width: 80px; /* obligatoire */
      height: 80px; /* obligatoire */
      background-image: url('dossier-images/hover-etoile.png');
      background-size: cover;
      z-index: 17;
    }
  
    .hover-visiter:hover {
      position: absolute;
      width: 120px; /* obligatoire */
      height: 60px; /* obligatoire */
      background-image: url('dossier-images/hover-visiter.png');
      background-size: cover;
      z-index: 17;
    }
  
  
  
    .hover-fashion {
      position: absolute;
      top: 150px;
      left: 550px;
      width: 80px; /* obligatoire */
      height: 80px; /* obligatoire */
      background-image: url('dossier-images/hover-etoile.png');
      background-size: cover;
      z-index: 17;
    }
  
    .hover-fashion:hover {
      position: absolute;
      width: 130px; /* obligatoire */
      height: 60px; /* obligatoire */
      background-image: url('dossier-images/hover-fashion.png');
      background-size: cover;
      z-index: 17;
    }
  
  
  
    .partie-rentree  {
      position: relative;
      font-family: Arial, Helvetica, sans-serif;
      top: 0px;
      left: 0px;
      width: 900px; /* obligatoire */
      height: 500px; /* obligatoire */
      padding: 0px;
      margin: 0px;
      z-index: 15;
      background: url('dossier-images/kingston-fond.png');
      background-size: cover;
  }
  
  
  
  
  .img-ukflag {
    position: absolute;
    top: 220px;
    left: 10px;
    width: 80px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  .img-ukflag2 {
    position: absolute;
    top: 220px;
    left: 100px;
    width: 80px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  .img-ukflag3 {
    position: absolute;
    top: 220px;
    left: 190px;
    width: 80px; /* obligatoire */
    height: 30px; /* obligatoire */
    z-index: 15;
  }
  
  .cake {
    position: absolute;
    top: 20px;
    left: 720px;
    width: 150px; /* obligatoire */
    height: 180px; /* obligatoire */
    background: url('dossier-images/kingston-cake.png');
    background-size: cover;
    z-index: 15;
  }
  
  .cake:hover {
    background: url('dossier-images/kingston-sticker-spongecake.png');
    background-size: cover;
    z-index: 15;
  }
  
  .texte-kingston  {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 670px; /* obligatoire */
    height: 180px; /* obligatoire */
    z-index: 15;
  }
  
  
  .septlondres {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    top: 0px;
    left: 0px;
    width: 900px; /* obligatoire */
    height: 1040px; /* obligatoire */
    padding: 0px;
    margin: 0px;
    z-index: 15;
    background: url('dossier-images/london-13sept-full.png');
    background-size: cover;
  }
  
  .img-cat {
    position: absolute;
    top: 100px;
    left: 400px;
    width: 100px; /* obligatoire */
    height: 60px; /* obligatoire */
    z-index: 15;
  }
  
  .img-teapot {
    position: absolute;
    top: 460px;
    left: 0px;
    width: 130px; /* obligatoire */
    height: 80px; /* obligatoire */
    z-index: 15;
  }
  
  
  .img-leaves{
    position: absolute;
    top: 900px;
    left: 720px;
    width: 130px; /* obligatoire */
    height: 80px; /* obligatoire */
    z-index: 15;
  }
  
  
  
  
  .separation-mer {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    top: 0px;
    left: 0px;
    width: 900px; /* obligatoire */
    height: 500px; /* obligatoire */
    padding: 0px;
    margin: 0px;
    z-index: 15;
    background: url('dossier-images/fond-mer.GIF');
    background-size: cover;
  }
  
  
  
  
  .sept-quartier-kingston {
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    top: 0px;
    left: 0px;
    width: 900px; /* obligatoire */
    height: 550px; /* obligatoire */
    padding: 0px;
    margin: 0px;
    z-index: 15;
    background: url('dossier-images/kingston-arbres-quartier-full.png');
    background-size: cover;
  }
  
  .sept-quartier-kingston-text {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    top: 180px;
    left: 270px;
    width: 360px; /* obligatoire */
    height: 80px; /* obligatoire */
    padding: 20px 20px;
    z-index: 15;
  }



  .bouton-change-theme {
    position: absolute;
    background-image: url('dossier-images/waves.gif');
    background-size: 125%;
    top: 0px;
    left: 200px;
    width: 200px; /* obligatoire */
    height: 160px; /* obligatoire */
    z-index: 15;
  }
  
  .bouton-change-theme:hover  {
    transform: scale(1.05);
    box-shadow: 5px 5px 10px rgba(52, 249, 245, 0.3);
    z-index: 300;
    background-image: url('dossier-images/arbre-fall-fond.webp');
    background-size: contain;
  }





  .moodboard-ete-partie {
    position: relative;
    top: 0px;
    left: 0px;
    width: 900px; /* obligatoire */
    height: 1200px; /* obligatoire */
    padding: 0px;
    margin: 0px;
    z-index: 15;
    background: url('dossier-images/summer-moodboard.png');
    background-size: cover;
  }