body {
    box-sizing: border-box;
    margin: 0;
    background-color: #333;

  }

  /* header--------------------------------------------------------- */


  header {
    position: fixed; /* Fixe la navbar en haut de la page */
    top: 0; /* Positionne le haut de la navbar à 0px */
    left: 0; /* S'assure qu'elle commence à gauche */
    width: 100%; /* Prend toute la largeur de la page */
    z-index: 10; /* Place la navbar au-dessus des autres éléments */
}


/* open controls */
.close-button {
  display: none;
}

.seo-h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* navabar */


header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

header.hidden {
  transform: translateY(-100%);
}
nav {
  display: flex; /* Aligne les éléments horizontalement */
  justify-content: space-around; /* Aligne les éléments à gauche */
  /* border:solid rgba(249, 235, 235, 0.207) 2px ; */
  /* Couleur de fond */
  padding: 15px 40px; /* Espacement interne */
  }
  
  nav a{
  position: relative;
  color: #999;
  text-decoration: none;
  font-size: 1.0em;
  z-index: 2;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
  transition: 0.5s;
  }
  
  nav a :active{
  color: #222327;
  }
  
  #indicator
  {
  position: absolute;
  height: 75px;
  width: 150px;
  background: #29fd53;
  z-index: 1;
  transition: 0.5s;
  display: none;
  }
  
  @keyframes slideIn {
  from {
  transform: translateX(-100%);
  opacity: 0;
  }
  to {
  transform: translateX(0);
  opacity: 1;
  }
  }
  /* nav a pour cyber -------------------------------------- */
  .box {
  /* width: 150px; 
  height: 50px;  */
  
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 2s infinite linear;
  border: 2px solid transparent;
  
  }
  
  .box.a {
  background: transparent; /* Fond transparent */
  border-image: conic-gradient(
  from var(--border-angle),
  oklch(100% 100% 0deg),
  oklch(100% 100% 45deg),
  oklch(100% 100% 90deg),
  oklch(100% 100% 135deg),
  oklch(100% 100% 180deg),
  oklch(100% 100% 225deg),
  oklch(100% 100% 270deg),
  oklch(100% 100% 315deg),
  oklch(100% 100% 360deg)
  ) 1;
  border-image-slice: 1;
  }
  
  @keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
  }
  
  /** boilerplate **/
  
  @property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
  }
  
  /* nav a hover -------------------------------------------------------*/
  
  
  
  a:hover{
  
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 2s infinite linear;
  border: 2px solid transparent;
  background: transparent; /* Fond transparent */
  border-image: conic-gradient(
  from var(--border-angle),
  oklch(100% 100% 0deg),
  oklch(100% 100% 45deg),
  oklch(100% 100% 90deg),
  oklch(100% 100% 135deg),
  oklch(100% 100% 180deg),
  oklch(100% 100% 225deg),
  oklch(100% 100% 270deg),
  oklch(100% 100% 315deg),
  oklch(100% 100% 360deg)
  ) 1;
  border-image-slice: 1;
  padding-right: 20px;
  }
  
  @keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
  }
  
  /** boilerplate **/
  
  @property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
  
  }

.h1-web {
  text-align: center;
  position: absolute;
  padding-top: 100px;
  padding-left: 80px;
  color: #ff7eb3;
  opacity: 0; /* Initialement invisible */
}

.h1-web.is-visible {
  opacity: 1;
}

.h1-web.animate {
  animation: slideIn 2s ease-out forwards; /* 'forwards' pour garder l'animation après sa fin */
}









  /* menue ------------------------------------------------------*/

  main{
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    width: 100%;
    height: 100%;
  }

  section {
    display: flex;
    justify-content: space-between; /* Aligne la card et les détails */
    align-items: center; /* Centre verticalement */
    padding: 20px; /* Ajoute un espacement interne */
    width: 100%;
    height: 80vh;
    background-color: #333;
  }
  
  .service-details {
    flex: 1; /* Occupe tout l'espace disponible à droite */
    margin-left: 40px;
    margin-top: 40px; /* Décale le texte vers le bas */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 10px; /* Réduit encore la taille globale de la police */
    line-height: 1.2; /* Réduit davantage l'espacement entre les lignes */
  }
  
  .service-details h3, .service-details h4 {
    margin-bottom: 8px; /* Réduit l'espace sous les titres */
    color: #ff7eb3;
    font-size: 14px; /* Réduction légère de la taille des titres */
  }
  
  .service-details p {
    margin-bottom: 8px; /* Réduction de l'espace entre les paragraphes */
  }
  
  .service-details ul {
    list-style-type: disc;
    padding-left: 15px; /* Réduction de l'indentation de la liste */
    margin-bottom: 8px; /* Réduction de l'espace sous la liste */
  }
  
  .service-details ul li {
    margin-bottom: 4px; /* Réduction de l'espace entre les éléments de la liste */
  }
  
  .service-details strong {
    color: #ff758c;
    font-size: 12px; /* Taille cohérente avec le texte principal */
  }
  
  
  

  #card-container
  {
    padding-top: 80px;
    padding-left: 40px;
  }


  .card {

    width: 300px; /* Largeur réduite */
    height: 300px; /* Hauteur réduite */
    position: relative;
    transform-style: preserve-3d;
    background: linear-gradient(135deg, orange, lightblue);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-out;
    overflow: hidden;
    animation: colorWaves 5s infinite alternate ease-in-out;
    
   }

   
  .card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
    color: #333;
    }

   .card-content h2 {
    font-size: 18px; /* Taille réduite pour correspondre à la nouvelle dimension */
    margin: 0 0 10px;
    }

    .card-content p {
     font-size: 12px; /* Taille réduite pour correspondre à la nouvelle dimension */
     margin: 5px 0;
    }


    /* card 2  */




    .card-prestashop {
        background: linear-gradient(135deg, #ff758c, #ff7eb3);
        animation: prestashopAnimation 3s infinite alternate ease-in-out;
      }
      
      @keyframes prestashopAnimation {
        0% {
          transform: rotateY(0deg) rotateX(0deg);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        50% {
          transform: rotateY(10deg) rotateX(10deg) scale(1.05);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }
        100% {
          transform: rotateY(-10deg) rotateX(-10deg);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
      }
      


    /* icon wordpresse */



    .icon-3d {
        font-size: 30px; /* Taille de l'icône */
        margin-right: 200px;
        color: #0073aa; /* Couleur WordPress */
        text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 -5px 10px rgba(255, 255, 255, 0.2); /* Effet de profondeur */
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg); /* Perspective 3D */
        transition: transform 0.5s ease, text-shadow 0.5s ease; /* Animation fluide */
      }
      
      .icon-3d:hover {
        transform: perspective(1000px) rotateX(15deg) rotateY(15deg) scale(1.1); /* Rotation au survol */
        text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 -10px 20px rgba(255, 255, 255, 0.4); /* Ombres renforcées */
      }
      
      @keyframes pulse {
        0%, 100% {
          transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
        }
        50% {
          transform: perspective(1000px) rotateX(10deg) rotateY(10deg) scale(1.05);
        }
      }
      
      .icon-3d.animate {
        animation: pulse 2s infinite; /* Animation continue */
      }
      

      /* icon prestashop */

      .icon-prestashop-3d {
        width: 50px; /* Taille de l'image */
        transform-style: preserve-3d; /* Active l'effet 3D */
        perspective: 1000px; /* Ajoute de la profondeur */
        transition: transform 0.5s ease, box-shadow 0.5s ease; /* Transition fluide */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Effet d'ombre pour le relief */
      }
      
      .icon-prestashop-3d:hover {
        transform: rotateY(360deg) scale(1.2); /* Rotation complète et léger agrandissement */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Renforce l'ombre au survol */
      }

      /* keyframe prestashop ----------------------------------- */

      @keyframes spin {
        0% {
          transform: rotateY(0deg);
        }
        50% {
          transform: rotateY(180deg);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
      
      .icon-prestashop-3d.animate {
        animation: spin 3s infinite; /* Animation de rotation infinie */
      }
      



 @keyframes colorWaves {
  0% {
   background: linear-gradient(135deg, orange, lightblue);
  }
  25% {
   background: linear-gradient(135deg, #ff9966, #99ccff);
  }
  50% {
   background: linear-gradient(135deg, #ffcc99, #66ccff);
  }
  75% {
   background: linear-gradient(135deg, orange, lightblue);
  }
  100% {
   background: linear-gradient(135deg, #ff9966, #99ccff);
  }
 }

.cms-autre {
  
  padding-top: 50px;
  font-size: 20px;
  color: #ff7eb3;
 }


 /* /* card cran --------------------------------------------------------------*/


#world {
    background: none !important; /* Assure un fond transparent */
  }
  
  
  #world canvas {
    width: 500px !important; /* Taille réduite */
    height: auto !important; /* Garde les proportions */
    background: transparent !important; /* Retire tout fond noir */
    max-height: 500px !important; /* Limite la hauteur */
    border-radius: none!important;
    outline: none !important; /* Supprime la bordure de focus */
  
  }
  #world, #world canvas {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    background: none !important; /* Assure aucun fond par défaut */
    
  }
  


  /* animation es style sur <= => */


  .arrow {
    display: inline-block;
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out;
    color: #FF5733; /* Couleur de départ */
}

/* Animation de couleur */
@keyframes glow {
    0% { color: #FF5733; } /* Orange */
    50% { color: #FFC300; } /* Jaune */
    100% { color: #FF5733; } /* Retour à l'orange */
}

/* Appliquer l'animation de couleur */
.arrow.glowing {
    animation: glow 1.5s infinite;
}
 

  /* monstre  */

  #model-container {
    width: 600px; /* Largeur maximale */
    height: 300px; /* Hauteur maximale */
    overflow: hidden; /* Cache tout ce qui dépasse */
    position: relative; /* Position relative pour garder le contenu bien aligné */
  }

  #model-container canvas {
    background: transparent !important; /* Retire tout fond noir */
    width: 2000px;
    height: 100%;
    display: block; /* Supprime les marges blanches par défaut */
    border: none !important;
  }