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 -- */

/* ----- TOP BAR ----- */
/* Barre supérieure du header : infos, réseaux sociaux, etc. */
.header-top-bar {
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1);
  position: relative;    /* Par défaut, reste dans le flux */
  z-index: 5;
  width: 100%;
}

/* Quand la top-bar doit disparaître au scroll : 
   - on la déplace hors écran (transform)
   - on la rend invisible (opacity)
   - on la sort du flux (position:absolute) pour que le header-main se colle en haut */
.header-top-bar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  pointer-events: none;
}

/* ----- HEADER PRINCIPAL (NAVIGATION) ----- */
/* Style par défaut du header principal : transparent */
.header-main {
  background: transparent;
  transition: background 0.5s cubic-bezier(.4,0,.2,1);
}

/* Quand la top-bar est cachée (header collé en haut) :
   - applique un fond dégradé pastel horizontal */
.header-main.has-gradient {
  /*background: linear-gradient(90deg, #d5ff40 0%, #293a5e 100%);*/
  /* Pour vertical : background: linear-gradient(180deg, #fc9092 0%, #293a5e 100%); */
}


/* Style général des liens du menu Bricks */
.brxe-nav-nested .brxe-text-link {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  transition:
    background 0.2s cubic-bezier(.4,0,.2,1),
    color 0.2s cubic-bezier(.4,0,.2,1),
    box-shadow 0.2s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 1;
  text-decoration: none;
}

/* Effet "bouton" au hover/focus */
.brxe-nav-nested .brxe-text-link:hover,
.brxe-nav-nested .brxe-text-link:focus {
  background: #2a3a5f;
  color: #fff;
  box-shadow: 0 2px 14px 0 rgba(252,144,146,0.13);
}

/* Lien actif (page courante) : via aria-current="page" */
.brxe-nav-nested .brxe-text-link[aria-current="page"] {
  background: #2a3a5f;
  color: #fff;
  box-shadow: 0 4px 18px 0 rgba(41,58,94,0.18);
  font-weight: 600;
}




.hero-section {
  position: relative;
  /*background: linear-gradient(120deg, #fc9091 0%, #293a5e 100%) !important;*/
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/wp-content/uploads/2025/08/image-de-fond-1.webp');
  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 */
}



.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; }





.logo-bar-title {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #fff;
  letter-spacing: 0.05em;
}

.logo-swiper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 0;
}
.logo-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.logo-swiper .swiper-slide:hover {
  opacity: 1;
}
.logo-swiper img {
  max-width: 150px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.05);
  transition: filter 0.2s;
}
.logo-swiper .swiper-slide:hover img {
  filter: grayscale(0) brightness(1.18);
}




.central-cards-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  min-height: 700px;
  position: relative;
  flex-wrap: wrap;
  padding: 36px 0;
}

/* Colonne gauche */
.side-cards-left {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-end;
}
/* Colonne droite */
.side-cards-right {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
}

/* Cercle central */
.circle-center {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin: 0 48px;
  opacity: 1;
  transform: scale(0.82);
  transition: opacity 0.7s, transform 0.7s cubic-bezier(.6,.2,.1,1);
}
.circle-center.visible {
  opacity: 1;
  transform: scale(1);
}
.circle-content {
  text-align: center;
  color: #fff;
}

/* Cards */
.side-card {
  min-width: 500px;
  max-width: 500px;
  padding: 22px 24px;
  /*background: linear-gradient(120deg, #fc9092 10%, #6ac3e6 90%);*/
  color: #fff;
  border-radius: 13px;
  box-shadow: 0 1px 2px 3px rgba(41,58,94,0.15);
  font-size: 1.12rem;
  opacity:1;
  z-index: 1;
 /* filter: blur(6px) brightness(0.85);*/
  transition:
    opacity 0.47s cubic-bezier(.54,.12,.16,1.16),
    transform 0.92s cubic-bezier(.62,-0.13,.32,1.15),
    box-shadow 0.55s,
    filter 0.69s;
}


/* Cards de gauche : partent de -280px, effet rotate */
.side-cards-left .side-card {
  transform: translateX(-100px) scale(0.90);
}

/* Cards de droite : partent de +280px, effet rotate */
.side-cards-right .side-card {
  transform: translateX(100px) scale(0.90);
}

/* Apparition */
.side-card.visible {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0deg);
  filter: blur(0) brightness(1);
  box-shadow: 0 1px 2px 3px #66d9ed, 0 1.5px 9px #66d9ed;
}

/* Responsive mobile : apparition depuis le bas, effet rebond */
@media (max-width: 1024px) {
  .side-card {
    min-width: 350px;
    max-width: 400px;
    font-size: .98rem;
    padding: 14px 10px;
    /*transform: translateY(72px) scale(0.98) !important;*/
    filter: blur(5px) brightness(0.85);
    opacity: 0;
    transition:
    opacity 0.55s cubic-bezier(.44,.12,.46,1.28),
    transform 0.82s cubic-bezier(.42,0,.32,1.34),
	box-shadow 0.55s,
    filter 0.59s;
  }
  .side-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg) !important;
    filter: blur(0) brightness(1);
    box-shadow: 0 9px 32px #fc909266, 0 0.5px 4px #6ac3e666;
  }
	/* Cards de gauche : partent de -280px, effet rotate */
.side-cards-left .side-card {
  transform: translateX(-100px) scale(0.90);
  }

/* Cards de droite : partent de +280px, effet rotate */
.side-cards-right .side-card {
  transform: translateX(100px) scale(0.90);
  }
}


/* Responsive mobile : apparition depuis le bas, effet rebond */
@media (max-width: 900px) {
  .side-card {
    min-width: 300px;
    max-width: 350px;
    font-size: .98rem;
    padding: 14px 10px;
    /*transform: translateY(72px) scale(0.98) !important;*/
    filter: blur(5px) brightness(0.85);
    opacity: 1;
    transition:
    opacity 0.55s cubic-bezier(.44,.12,.46,1.28),
    transform 0.82s cubic-bezier(.42,0,.32,1.34),
	box-shadow 0.55s,
    filter 0.59s;
  }
  .side-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg) !important;
    filter: blur(0) brightness(1);
    box-shadow: 0 9px 32px #fc909266, 0 0.5px 4px #6ac3e666;
  }
	/* Cards de gauche : partent de -280px, effet rotate */
.side-cards-left .side-card {
  transform: translateX(-100px) scale(0.90);
  }

/* Cards de droite : partent de +280px, effet rotate */
.side-cards-right .side-card {
  transform: translateX(100px) scale(0.90);
  }
}


.card-img-wrapper {
  width: 100%;
  aspect-ratio: 16/9; /* ou 1/1, adapte à ton style */
  overflow: hidden;
  /*border-radius: 12px;
  background: #232a36;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin-bottom: 18px;*/
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.44s cubic-bezier(.42,0,.32,1.26);
  will-change: transform;
  display: block;
}
.side-card:hover .card-img {
  transform: scale(1.11);
}

.side-card i {
  transition:
    transform 0.32s cubic-bezier(.62,0,.36,1.18),
    color 0.28s cubic-bezier(.55,.17,.41,1.1);
  cursor: pointer;
  transform-origin: 50% 50%; /* centre absolu */
  display: inline-block;     /* important pour l'effet ! */
  vertical-align: middle;
}
.side-card i:hover {
  transform: rotateZ(-50deg);
  color: #fc9092;
}

.content-inner i:hover {
  transform: rotateZ(-50deg);
  color: #fc9092;
}

.content-inner i {
  cursor: pointer;
}