Theme Name: Bricks Child Portfolio
Theme URI: http://wp-solution.local
Description: Thème enfant Bricks pour portfolio WordPress - base clean by WP-Solution.
Author: WP-Solution
Template: bricks
Version: 1.0
*/

/* -- Ajoute ici tes styles custom -- */

/*dom{
  overflow-x: hidden;
}*/

body{
  overflow-x: hidden;
}



.hero-section {
  position: relative;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/wp-content/uploads/2025/09/image-de-fond.avif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none; /* Pour que ça n’interfère pas avec les clics */
  opacity: 1; /* ou ajuste si tu veux plus discret */
}


/* Rond pastel animé */
.animated-shape {
  width: 70px;
  height: 70px;
  border: 15px solid #8fd7fa;
  border-radius: 100%;
  position: absolute;
  right: 0px;
  top: -88px;
  opacity: 0.5;
  animation: float-shape 8s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes float-shape {
  0% { transform: translateY(0) scale(1);}
  50% { transform: translateY(20px) scale(1.05);}
  100% { transform: translateY(-18px) scale(0.97);}
}

/* Carré pastel animé */
.motif-square {
  width: 38px;
  height: 38px;
  border: 7px solid #8ee4cc;
  position: absolute;
  left: 60px;
  top: 500px;
  opacity: 0.6;
  background: transparent;
  box-sizing: border-box;
  z-index: 1;
  /* Animation directe (par exemple flottement horizontal) */
  animation: float-horiz 9s infinite ease-in-out;
}

@keyframes float-horiz {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-40px); }
  100% { transform: translateX(0); }
}

/* Triangle pastel animé */
.animated-shape.triangle {
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 42px solid #6ef8d3;
  position: absolute;
  left: 170px;
  top: 80px;
  opacity: 0.55;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(41,58,94,0.09));
}
.animated-shape.triangle.float-diag { animation: float-diag 13s infinite ease-in-out; }
.animated-shape.triangle.slow-rotate { animation: slow-rotate 22s infinite linear; }