@charset "UTF-8";
/*
Theme Name: Anne Thème enfant
Theme URI: https://annelamy.fr/anne/
Description: Autodidacte, passionnée, je joue avec la couleur, les formes et le code, je suis designer graphique et designer d’interfaces, spécialiste WordPress et voici mon thème enfant.
Author: Anne Lamy
Author URI: https://annelamy.fr/
Template: astra
Version: 1.0.0
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Elements
	- body
	- header
	- footer
# Layouts
	- index
# Templates
	- content_block
	- portfolio
	- single
	- presentation
	- promo
--------------------------------------------------------------*/
/* variables and mixins.
--------------------------------------------------------------*/
/* Mes polices desktop */
/* Elements
--------------------------------------------- */
/* Mes Google fonts locales */
@font-face {
  font-family: "UbuntuSans_Condensed-ExtraBold";
  src: url("../assets/fonts/UbuntuSans_Condensed-ExtraBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuSans-Italic";
  src: url("../assets/fonts/UbuntuSans-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Rowdies-Bold";
  src: url("../assets/fonts/Rowdies-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuSans-Regular";
  src: url("../assets/fonts/UbuntuSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuSans-Mince";
  src: url("../assets/fonts/UbuntuSans-Mince.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "CedarvilleCursive-Regular";
  src: url("../assets/fonts/CedarvilleCursive-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Body*/
html,
body {
  scroll-behavior: smooth;
  background-color: rgba(235, 148, 1, 0.5);
  height: 100%;
  margin: 0;
  padding: 0;
  top: -65px;
}

#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#content {
  flex: 1;
}

/* Contenu de Body */
.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 1148px;
  width: 100%;
}

#primary {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Flèche de scroll en bas de page*/
#ast-scroll-top .ast-icon.icon-arrow svg {
  width: 1em;
  z-index: 3000;
}

/* BOUTON */
.wp-block-buttons > .wp-block-button {
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.wp-block-buttons > .wp-block-button:hover {
  transform: scale(1.05);
}

.wp-block-button .wp-block-button__link,
.wp-block-search .wp-block-search__button,
body .wp-block-file .wp-block-file__button {
  font-weight: 600;
  line-height: 1em;
  font-size: 1.1em;
  font-size: 1rem;
}

/* Typographie */
h1 {
  font-family: "UbuntuSans_Condensed-ExtraBold";
  font-size: 8em;
  font-weight: 200;
  letter-spacing: 0em;
  color: rgb(254, 180, 107);
}

h2 {
  font-family: "UbuntuSans-Regular";
  font-size: 6em;
  font-weight: 400;
  letter-spacing: 0em;
  color: rgb(254, 180, 107);
}

h3 {
  font-family: "Rowdies-Bold";
  font-size: 3em;
  font-weight: 700;
  letter-spacing: 0em;
  color: #fec790;
}

h4 {
  font-family: "UbuntuSans-Mince";
  font-size: 1.5em;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: white;
}

h5 {
  font-family: "UbuntuSans-Regular";
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: white;
}

h6 {
  font-family: "UbuntuSans-Regular";
  font-size: 1em;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: #ffdab5;
}

.block-title {
  display: flex;
  align-items: start;
  justify-content: end;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.block-title h2 {
  text-align: end;
  font-size: 6em !important;
  font-weight: 900 !important;
  opacity: 30%;
}

a {
  text-decoration: none;
}

p {
  font-family: "UbuntuSans-Regular";
  font-size: 0.87em;
  font-weight: 300;
  letter-spacing: 0em;
  color: white;
}

.anne-menu h3 {
  font-family: "Rowdies-Bold";
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: white;
}

ul {
  padding: 0;
  margin: 0;
}

.anne-menu li {
  list-style: none;
}

.anne-menu li a {
  text-decoration: none;
  color: #FFDAB5;
}

.anne-menu li a:hover {
  color: #EB9401;
}

@media all and (max-width: var(--breakpoint__tablet)) {
  html,
  body {
    top: -70px;
    width: 100vh;
  }
  .content {
    max-width: 100vh;
  }
  .block-title h2 {
    font-size: 5em !important;
  }
}
header#anneHeader {
  width: 60px;
  height: 100%;
  top: 0;
  left: 0;
  transition: left 0.5s ease-in-out 0.2s;
  position: fixed;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}
header#anneHeader nav {
  height: 100%;
  width: 60px;
}
header#anneHeader nav .top-header {
  position: relative;
}
header#anneHeader nav:after {
  content: " ";
  width: 60px;
  height: 100%;
  position: absolute;
  left: 0px;
}
header#anneHeader nav:before {
  content: " ";
  height: 100%;
  width: 0px;
  background-color: rgba(235, 148, 1, 0.8);
  position: absolute;
  left: 60px;
  top: 0;
  transition: width 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
header#anneHeader nav .navBurger {
  cursor: pointer;
  width: 100%;
  height: 45px;
}
header#anneHeader nav .navBurger .burger {
  margin-left: 18px;
  margin-top: 30px;
  cursor: pointer;
}
header#anneHeader nav .navBurger .burger, header#anneHeader nav .navBurger .burger::before, header#anneHeader nav .navBurger .burger::after {
  border-radius: 0;
  position: absolute;
  z-index: 100;
  width: 24px;
  height: 2px;
  background: #ffdab5;
  transition: all 0.3s;
}
header#anneHeader nav .navBurger .burger::before, header#anneHeader nav .navBurger .burger::after {
  content: "";
  display: block;
}
header#anneHeader nav .navBurger .burger::before {
  margin-top: -8px;
}
header#anneHeader nav .navBurger .burger::after {
  margin-top: 8px;
}
header#anneHeader nav .nav-menu {
  width: 240px;
}
header#anneHeader nav ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 300px;
  margin-top: calc(50vh - 160px);
}
header#anneHeader nav ul li {
  font-size: 14px;
  width: 300px;
  height: 40px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Icones des liens */
}
header#anneHeader nav ul li a {
  width: 300px;
  color: white;
  position: relative;
  z-index: 0;
  opacity: 0;
  left: -80px;
  text-transform: uppercase;
  transition: left 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.15s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  color: #fff;
  text-decoration: none;
}
header#anneHeader nav ul li::before {
  content: "";
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 18px;
  top: 8px;
  transition: transform 0.2s ease-in-out;
}
header#anneHeader nav ul li.menu-item-accueil::before {
  background-image: url("../assets/images/anne.jpg"); /*Accueil */
}
header#anneHeader nav ul li.menu-item-prestations::before {
  background-image: url("../assets/icones/prestations.svg"); /*prestations */
}
header#anneHeader nav ul li.menu-item-competences::before {
  background-image: url("../assets/icones/star.svg"); /* Competences */
}
header#anneHeader nav ul li.menu-item-portfolio::before {
  background-image: url("../assets/icones/visibility.svg"); /* Portfolio */
}
header#anneHeader nav ul li.menu-item-about::before {
  background-image: url("../assets/icones/about.svg"); /* A propos */
}
header#anneHeader nav ul li.menu-item-tarifs::before {
  background-image: url("../assets/icones/euro.svg"); /* Tarifs */
}
header#anneHeader nav ul li.menu-item-contacts::before {
  background-image: url("../assets/icones/contacts.svg"); /* Contacts */
}
header#anneHeader nav ul li:hover::before {
  transform: scale(1.2);
}
header#anneHeader nav ul li.active::before, header#anneHeader nav ul li:hover::before {
  transform: scale(1.5);
}
header#anneHeader nav:hover:before {
  width: 300px;
  height: 100vh;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header#anneHeader nav:hover .burger {
  transform: rotate(45deg) translate3d(0, 0, 0);
}
header#anneHeader nav:hover .burger::before {
  margin-top: 0px;
  transform: rotate(-90deg) translate3d(0, 0, 0);
}
header#anneHeader nav:hover .burger::after {
  margin-top: 0px;
  transform: rotate(0deg) translate3d(0, 0, 0);
}
header#anneHeader nav:hover li a {
  left: 70px;
  opacity: 1;
  transition-duration: 0.4s;
  transition-property: left, opacity;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header#anneHeader nav:hover li a:hover {
  font-size: 2em;
}
header#anneHeader nav:hover li:nth-child(1) a {
  transition-delay: 0.3s;
}
header#anneHeader nav:hover li:nth-child(2) a {
  transition-delay: 0.34s;
}
header#anneHeader nav:hover li:nth-child(3) a {
  transition-delay: 0.38s;
}
header#anneHeader nav:hover li:nth-child(4) a {
  transition-delay: 0.42s;
}
header#anneHeader nav:hover li:nth-child(5) a {
  transition-delay: 0.46s;
}
header#anneHeader nav:hover li:nth-child(6) a {
  transition-delay: 0.5s;
}
header#anneHeader nav:hover li:nth-child(7) a {
  transition-delay: 0.54s;
}

.anne-logo-accueil {
  display: none;
}

header#anneHeader.collapsed {
  left: -240px;
  /* ou toute autre valeur pour le repli */
}

@media all and (max-width: 1024px) {
  header#anneHeader {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60px;
    transition: left 0.5s ease-in-out 0.2s;
    position: fixed;
    display: inline-block;
  }
  header#anneHeader .content-banner {
    display: flex;
    flex-direction: row;
  }
  header#anneHeader .content-banner nav {
    width: 80%;
    height: 60px;
    box-shadow: none;
  }
  header#anneHeader .content-banner nav .top-header {
    position: relative;
  }
  header#anneHeader .content-banner nav:after {
    content: " ";
    width: 60px;
    height: 100%;
    position: absolute;
    left: 0px;
  }
  header#anneHeader .content-banner nav:before {
    content: " ";
    height: 0;
    width: 0;
    background-color: rgba(235, 148, 1, 0);
    position: absolute;
    left: 0;
    top: 60px;
    transition: width 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  header#anneHeader .content-banner nav .navBurger {
    cursor: pointer;
    width: 100%;
    height: 45px;
  }
  header#anneHeader .content-banner nav .navBurger .burger {
    margin-left: 18px;
    margin-top: 30px;
    cursor: pointer;
  }
  header#anneHeader .content-banner nav .navBurger .burger, header#anneHeader .content-banner nav .navBurger .burger::before, header#anneHeader .content-banner nav .navBurger .burger::after {
    border-radius: 0;
    position: absolute;
    z-index: 100;
    width: 30px;
    height: 2px;
    background: #ffdab5;
    transition: all 0.3s;
  }
  header#anneHeader .content-banner nav .navBurger .burger::before, header#anneHeader .content-banner nav .navBurger .burger::after {
    content: "";
    display: block;
  }
  header#anneHeader .content-banner nav .navBurger .burger::before {
    margin-top: -8px;
  }
  header#anneHeader .content-banner nav .navBurger .burger::after {
    margin-top: 8px;
  }
  header#anneHeader .content-banner nav .nav-menu {
    margin-top: 40px;
    width: 100%;
  }
  header#anneHeader .content-banner nav ul {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-top: 0;
  }
  header#anneHeader .content-banner nav ul li {
    font-size: 20px;
    width: 100%;
    height: 40px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header#anneHeader .content-banner nav ul li a {
    width: 100%;
    color: white;
    position: relative;
    z-index: 0;
    opacity: 0;
    left: -80px;
    text-transform: uppercase;
    transition: left 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.15s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    text-decoration: none;
  }
  header#anneHeader .content-banner nav ul li::before {
    /* Annulation des icones des liens */
    display: none;
  }
  header#anneHeader .content-banner nav:hover:before {
    width: 100%;
    height: 100vh;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  header#anneHeader .content-banner nav:hover .burger {
    transform: rotate(45deg) translate3d(0, 0, 0);
  }
  header#anneHeader .content-banner nav:hover .burger::before {
    margin-top: 0px;
    transform: rotate(-90deg) translate3d(0, 0, 0);
  }
  header#anneHeader .content-banner nav:hover .burger::after {
    margin-top: 0px;
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  header#anneHeader .content-banner nav:hover ul {
    top: 20px;
    padding-top: 50px;
    height: 100vh;
    background-color: rgba(235, 148, 1, 0.7);
  }
  header#anneHeader .content-banner nav:hover ul li {
    margin-bottom: 10px;
  }
  header#anneHeader .content-banner nav:hover ul li a {
    font-size: 1.5em;
    left: 40px;
    opacity: 1;
    transition-duration: 0.4s;
    transition-property: left, opacity;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  header#anneHeader .content-banner nav:hover ul li a:hover {
    font-size: 1.7em;
    font-weight: 900;
    left: 20px;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(1) a {
    transition-delay: 0.3s;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(2) a {
    transition-delay: 0.34s;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(3) a {
    transition-delay: 0.38s;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(4) a {
    transition-delay: 0.42s;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(5) a {
    transition-delay: 0.46s;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(6) a {
    transition-delay: 0.5s;
  }
  header#anneHeader .content-banner nav:hover ul li:nth-child(6) a {
    transition-delay: 0.54s;
  }
  header#anneHeader .content-banner .anne-logo-accueil {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 10px;
    width: 20%;
  }
  header#anneHeader .content-banner .anne-logo-accueil img {
    width: 40px;
    cursor: pointer;
  }
  header#anneHeader.collapsed {
    left: 0;
    height: 60px;
  }
  header#anneHeader.collapsed .content-banner nav ul {
    display: none;
    /* modification pour le repli */
  }
  .anne-menu {
    display: none;
  }
  .anne-menu.menu-open {
    display: block;
  }
  header#anneHeader .content-banner nav:active:before {
    display: none;
  }
}
.anne-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  width: 100%;
  height: auto;
  min-height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
}
.anne-footer .anne-menu li a {
  text-align: center;
  text-decoration: none;
  color: white;
  font-size: 14px;
}
.anne-footer .anne-menu li a:hover {
  color: #ffdab5;
}

.content-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 100%;
  width: 100%;
  margin: auto;
}

.footer-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  height: auto;
}
.footer-menu h6 {
  color: white;
  opacity: 0.5;
  font-size: 12px;
  margin-right: 200px;
}

.footer-menu li {
  display: inline-block;
  margin-right: 20px;
  padding: 10px;
}

/* Icône pour Contacts */
.anne-footer .menu-item-contacts a {
  background-image: url("../assets/icones/contact.svg");
}

/* Icône pour LinkedIn */
.anne-footer .menu-item-linkedin a {
  background-image: url("../assets/icones/linkedin.svg");
}

/* Icône pour Facebook */
.anne-footer .menu-item-facebook a {
  background-image: url("../assets/icones/facebook.svg");
}

/* Masquer le texte des liens et afficher uniquement les icônes */
.anne-footer .menu-item-contacts a,
.anne-footer .menu-item-linkedin a,
.anne-footer .menu-item-facebook a {
  text-indent: -9999px;
  white-space: nowrap;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}

@media all and (max-width: 1024px) {
  .anne-menu h3 {
    font-size: 1em;
    padding-top: 10px;
  }
  .footer-menu h6 {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 0;
  }
}
/* Layouts
--------------------------------------------- */
/* Images principales */
/* Classe commune pour les propriétés partagées */
.Block-banner {
  background-position: 50% 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Classes spécifiques pour les images de fond */
.Block-banner-top {
  position: relative;
  height: 100vh;
  background-image: linear-gradient(to bottom, rgb(235, 148, 1), rgba(235, 148, 1, 0)), url("../assets/images/wimereux-top-1.webp");
  background-size: cover;
  background-position: center;
}

/* Animation des mongolfières */
.block-mongol-right,
.block-mongol-left,
.block-mongol-middle,
.block-mongol-end {
  position: absolute;
  top: 0;
  left: 0;
}

/* PHP */
.block-mongol-right {
  animation: flyUpPhp 20s ease-in-out forwards;
}

.mongol-php {
  animation: flyWave 1.5s ease-in-out infinite;
}

/* MOI */
.block-mongol-moi {
  animation: flyUpMoi 30s ease-in-out forwards;
}

.mongol-moi {
  animation: flyWave 4s ease-in-out infinite;
}

/* SASS */
.block-mongol-left {
  animation: flyUpSass 25s ease-in-out forwards;
}

.mongol-sass {
  animation: flyWave 0.8s ease-in-out infinite;
  animation-delay: 1s;
}

/* JS */
.block-mongol-middle {
  animation: flyUpJs 35s ease-in-out forwards;
}

.mongol-js {
  animation: flyWave 1.2s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* WP */
.block-mongol-end {
  animation: flyUpWp 25s ease-in-out forwards;
}

.mongol-wp {
  animation: flyWave 0.8s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes flyUpPhp {
  0% {
    transform: translateY(-100%) translateX(0);
    opacity: 0;
    scale: 1;
  }
  100% {
    transform: translateY(-300%) translateX(400px);
    opacity: 1;
    scale: 3;
  }
}
@keyframes flyUpMoi {
  0% {
    transform: translateY(-50%) translateX(0);
    opacity: 0;
    scale: 2;
  }
  50% {
    transform: translateY(-100%) translateX(80px);
    opacity: 0.5;
    scale: 5;
  }
  100% {
    transform: translateY(-150%) translateX(-60px);
    opacity: 1;
    scale: 10;
  }
}
@keyframes flyUpSass {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
    scale: 0.6;
  }
  100% {
    transform: translateY(-400%) translateX(-400px);
    opacity: 1;
    scale: 2;
  }
}
@keyframes flyUpJs {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
    scale: 1;
  }
  100% {
    transform: translateY(-400%) translateX(-800px);
    opacity: 1;
    scale: 3;
  }
}
@keyframes flyUpWp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
    scale: 0.6;
  }
  100% {
    transform: translateY(-500%) translateX(-400px);
    opacity: 1;
    scale: 4;
  }
}
@keyframes flyWave {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/*___________________*/
.Block-banner-middle {
  background-image: linear-gradient(to bottom, rgb(235, 148, 1), rgba(235, 148, 1, 0)), url("../assets/images/wimereux-1.webp");
}

.Block-banner-down {
  background-image: url("../assets/images/wimereux-down-1.webp");
}

.wp-block-uagb-container.uagb-block-76d92a5d {
  position: relative;
  z-index: 0;
}

.wp-block-uagb-container.uagb-block-76d92a5d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../assets/images/responsive.png");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.1s ease-out;
  /* Ajoutez une transition pour un effet de lissage */
  transform: rotate(var(--rotation));
}

/* Texte Anne Lamy */
.anne-title {
  animation: fadeDown 3s ease-in-out forwards;
}
.anne-title .anne-50 {
  text-align: center;
}
.anne-title .anne-50::before {
  content: "Anne";
  opacity: 0.8;
  margin-right: 5px;
  font-size: 30px;
  font-weight: 400;
}
.anne-title .anne-50::after {
  content: "LAMY";
  opacity: 1;
  margin-right: 5px;
  font-size: 40px;
  font-weight: 900;
}

@keyframes fadeDown {
  0% {
    opacity: 0.5;
    transform: translateY(-200px);
    /* Déplace l'élément vers le haut */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    /* Ramène l'élément à sa position initiale */
  }
}
/* Texte animé */
.static-text {
  font-size: 3em;
  font-weight: 100 !important;
  opacity: 0.5;
}

.typed-container {
  font-size: 3em;
  font-weight: 900;
}

#svg-container {
  display: flex;
  align-items: center;
  justify-content: end;
}

/* Icone double flèche "voir plus" */
.annePlus-move {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arrowUP 2s infinite;
}

.icone-up {
  padding: 0 20px 20px 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.icone-up:hover {
  transform: scale(1.5);
}

@keyframes arrowUP {
  0% {
    transform: scale(1.5) translateY(50%);
  }
  50% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.5) translateY(50%);
  }
}
.block-end-left h4 {
  font-size: 0.7em;
}

.block-end-right h4 {
  font-size: 0.5em;
  font-weight: 900;
}

@media all and (max-width: 1366px) {
  #intro {
    display: none;
  }
}
@media all and (max-width: 1024px) {
  .element-style {
    min-height: 700px;
  }
  .content {
    padding-left: 10px;
    padding-right: 10px;
  }
  .anne-title .anne-50 {
    text-align: center;
  }
  .anne-title .anne-50::before {
    font-size: 25px;
  }
  .anne-title .anne-50::after {
    font-size: 30px;
  }
  .static-text {
    font-size: 1.5em;
    font-weight: 100 !important;
    opacity: 0.5;
  }
  .typed-container {
    font-size: 1.3em;
    font-weight: 900;
  }
  .wp-block-uagb-container.uagb-block-76d92a5d::before {
    transform: none;
    /* Désactivez la rotation en mode mobile */
    transition: none;
    /* Désactivez la transition en mode mobile */
  }
  .wp-block-uagb-container.uagb-block-17ac08e3 {
    padding-top: 100px;
  }
  .wp-block-uagb-container.uagb-block-3d025063 {
    padding-left: 0;
    padding-right: 0;
  }
  /* Animation des mongolfières */
  .mongol-php {
    animation: flyWave 1.5s infinite;
  }
  .mongol-moi {
    animation: flyWave 2s ease-in-out infinite;
  }
  .mongol-sass {
    animation: flyWave 1.3s infinite;
    animation-delay: 1s;
  }
  .mongol-js {
    animation: flyWave 1.2s infinite;
    animation-delay: 0.5s;
  }
  .mongol-wp {
    animation: flyWave 1s infinite;
    animation-delay: 1s;
  }
  @keyframes flyUpPhp {
    0% {
      transform: translateY(-50px) translateX(0);
      opacity: 0;
      scale: 0.6;
    }
    100% {
      transform: translateY(-400%) translateX(100px);
      opacity: 1;
      scale: 3;
    }
  }
  @keyframes flyUpMoi {
    0% {
      transform: translateY(-50%) translateX(0);
      opacity: 0;
      scale: 2;
    }
    50% {
      transform: translateY(-100%) translateX(20px);
      opacity: 0.5;
      scale: 5;
    }
    100% {
      transform: translateY(-150%) translateX(-30px);
      opacity: 1;
      scale: 10;
    }
  }
  @keyframes flyUpSass {
    0% {
      transform: translateY(-50px) translateX(100px);
      opacity: 0;
      scale: 0.6;
    }
    100% {
      transform: translateY(-300%) translateX(-150px);
      opacity: 1;
      scale: 3;
    }
  }
  @keyframes flyUpJs {
    0% {
      transform: translateY(30px) translateX(50px);
      opacity: 0;
      scale: 0.6;
    }
    100% {
      transform: translateY(-200%) translateX(-300px);
      opacity: 1;
      scale: 4;
    }
  }
  @keyframes flyUpWp {
    0% {
      transform: translateY(-50px) translateX(50px);
      opacity: 0;
      scale: 0.6;
    }
    100% {
      transform: translateY(-200%) translateX(-250px);
      opacity: 1;
      scale: 3;
    }
  }
  .block-invisible {
    display: none;
  }
  /* Taille du texte dans les banner */
  .expertise {
    font-size: 0.8em !important;
  }
}
/* Templates
--------------------------------------------- */
/* Animation fade-in */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.block-portfolio {
  position: relative;
  flex-basis: calc(33.33% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
  width: 200px;
  aspect-ratio: 1/1;
  background-image: linear-gradient(to bottom, rgb(235, 148, 1), rgb(235, 148, 1));
  border-radius: 25px;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 2em rgba(0, 0, 0, 0.2);
}

.block-portfolio:hover {
  box-shadow: 0 2em 2.5em rgba(255, 255, 255, 0.8);
}

.img-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-in-out 1s;
}

.link-portfolio {
  position: relative;
  z-index: 20;
  padding: 10px;
  text-align: center;
  transition: transform 1s ease-in-out;
}

.img-principale-portfolio {
  position: absolute;
  top: 100%; /* Initialement placé en dehors de la vue */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 25px;
  width: 100%;
  height: 100%;
  transition: top 1s ease-in-out, opacity 0.2s ease-in-out 1s;
}

.block-portfolio:hover .img-plus {
  opacity: 1;
}

.block-portfolio:hover .link-portfolio {
  transform: translateY(70px); /* Déplace le titre vers le bas */
  transition: transform 1s ease-in-out;
}
.block-portfolio:hover .link-portfolio h4 {
  display: none;
}

.block-portfolio:hover .img-principale-portfolio {
  top: 0;
  /* Déplace l'image vers le haut */
  opacity: 0.2;
}

.img-principale-portfolio img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 25px;
}

h2 {
  text-align: center;
  padding: 0;
  margin: 0;
}

h4 {
  margin-left: 10px;
}

.afficher-plus a {
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 2em rgba(0, 0, 0, 0.2);
}
.afficher-plus a:hover {
  box-shadow: 0 2em 2em rgba(255, 255, 255, 0.2);
}

@media all and (max-width: 1366px) {
  .block-portfolio:hover .link-portfolio {
    transform: translateY(50px); /* Déplace le titre vers le bas */
  }
}
@media all and (max-width: 700px) {
  .block-title h2 {
    font-size: 5em !important;
  }
  .block-portfolio {
    flex: 100%;
    width: 100%;
    height: 200px;
  }
  .block-portfolio h2 {
    font-size: 3em;
  }
  .entry-content > .wp-block-group,
  .entry-content > .wp-block-cover,
  .entry-content > .wp-block-columns {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 66% !important;
    margin-bottom: 0;
  }
  /* pour la version mobile */
  .block-portfolio.appears .img-principale-portfolio {
    top: 0;
    opacity: 0.2;
  }
  .block-portfolio.appears .link-portfolio {
    transform: translateY(70px);
  }
  .block-portfolio.appears .img-plus {
    opacity: 1 !important;
  }
}
/* Page single de mon portfolio */
.single-portfolio {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 75%;
  height: 100%;
}
.single-portfolio .single-thumbnail {
  display: flex;
  align-items: start;
  width: 100%;
  height: 60vh;
  display: block;
  background-color: rgba(180, 179, 67, 0.5);
  transition: background-color 0.5s ease-in-out;
  overflow: hidden;
}
.single-portfolio .single-thumbnail img {
  top: 0;
  width: 100%;
  height: 60vh;
  opacity: 0;
  transition: opacity 2s ease;
  -o-object-fit: cover;
     object-fit: cover;
}
.single-portfolio .single-thumbnail.show-image {
  background-color: transparent;
}
.single-portfolio .single-thumbnail img.show-image {
  opacity: 1;
}
.single-portfolio .single-infos-1 {
  background-color: rgba(180, 179, 67, 0.5);
  padding: 20px 20px 20px 300px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.single-portfolio .single-infos-1 h2 {
  color: white;
}
.single-portfolio .wp-block-uagb-container.uagb-block-539ffcbf {
  background-color: rgba(0, 0, 0, 0);
  padding: 0 20px 0 0;
}
.single-portfolio .single-infos-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  border-radius: 25px;
}
.single-portfolio .content-resum {
  width: 50%;
  margin-bottom: 0;
  padding-bottom: 0;
}
.single-portfolio .content-resum h4 {
  color: rgb(64, 63, 24);
  font-weight: 600;
}
.single-portfolio .content-resum .bouton-anne a {
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 2em rgba(0, 0, 0, 0.2);
}
.single-portfolio .content-resum .bouton-anne a:hover {
  box-shadow: 0 2em 2em rgba(255, 255, 255, 0.2);
  background-color: transparent;
  border-color: #403f18;
  color: #403f18;
}
.single-portfolio .content-img {
  cursor: pointer;
  width: 50%;
  position: relative;
}
.single-portfolio .content-img::before {
  content: "";
  display: block;
  padding-top: 100%;
  /* Maintient un carré basé sur la largeur */
}
.single-portfolio .content-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 25px;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.single-portfolio .content-img img:hover {
  opacity: 0.5;
  transform: scale(1.04);
}
.single-portfolio .icon-svg {
  width: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* Permet de cliquer à travers le SVG */
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.single-portfolio .content-img:hover .icon-svg {
  opacity: 1;
  transform: translate(-50%, -50%) scale(2);
}
.single-portfolio .single-arrows {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(180, 179, 67, 0.5);
  padding: 20px 20px 20px 300px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.single-portfolio .single-arrows .nav-link {
  display: flex;
  align-items: center;
}
.single-portfolio .single-arrows .nav-link:hover {
  transform: scale(1.2);
}
.single-portfolio .single-arrows .nav-link p {
  margin: 0;
  color: rgb(64, 63, 24);
}
.single-portfolio #left-arrow,
.single-portfolio #right-arrow {
  transition: 1s ease;
  width: 30px;
  height: auto;
}
.single-portfolio .single-infos-2 {
  background-color: rgba(180, 179, 67, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 20px 20px 300px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.single-portfolio .single-infos-2 .single-infos-2-left {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 60%;
  margin-right: 10px;
}
.single-portfolio .single-infos-2 .single-infos-2-left h3 {
  color: rgb(64, 63, 24);
}
.single-portfolio .single-infos-2 .single-infos-2-left h4 {
  margin-left: 0;
  font-weight: 900;
  color: #403f18;
}
.single-portfolio .single-infos-2 .single-infos-2-left h5 {
  padding-bottom: 5px;
  padding-top: 5px;
  color: rgb(64, 63, 24);
}
.single-portfolio .single-infos-2 .single-infos-2-left h6 {
  color: rgb(64, 63, 24);
}
.single-portfolio .single-infos-2 .single-infos-2-right {
  background-color: rgb(180, 179, 67);
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 40%;
  margin-left: 10px;
  border-radius: 25px;
}
.single-portfolio .single-infos-2 .single-infos-2-right h3 {
  color: white;
}
.single-portfolio .single-infos-2 .single-infos-2-right h5 {
  padding-bottom: 5px;
  padding-top: 5px;
}
.single-portfolio .single-infos-2 .single-infos-2-right h6 {
  color: rgb(64, 63, 24);
}

/* Section CONTENU d'un article du PORTFOLIO*/
.wp-block-uagb-container.uagb-block-539ffcbf {
  height: auto;
  box-shadow: 0;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 20px;
  overflow: visible;
  border-color: inherit;
  row-gap: 20px;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap > *:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-info-box),
body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap,
body .wp-block-uagb-container > *:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-container-link-overlay):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-lottie):not(.uagb-faq__outer-wrap) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
  100% {
    transform: scaleY(1);
  }
}
/* Section INFOS PROJET*/
.block-langages {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  background-color: rgba(180, 179, 67, 0.1);
  border-radius: 25px;
  padding: 30px 30px;
}

.contour-infos {
  background-color: rgba(180, 179, 67, 0.1);
  border-radius: 25px;
  padding: 30px 30px;
}

.langage {
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 15px;
}
.langage h6 {
  font-weight: 600;
  color: rgb(64, 63, 24);
}
.langage:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Section DEVELOPPEMENT COMPLET */
.developpement-list {
  display: none;
  /* Cache la liste par défaut */
}

.toggle-arrow,
.toggle-header {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.toggle-arrow {
  font-size: 0.8em;
  margin-left: 5px;
}

.toggle-header:hover,
.toggle-arrow:hover {
  transform: scale(1.2);
  margin-left: 20px;
}

.toggle-arrow.up {
  transform: rotate(180deg);
  /* Retourne la flèche vers le haut */
}

@media all and (max-width: 1024px) {
  .wp-block-uagb-container.uagb-is-root-container .uagb-block-251e236b {
    height: auto;
  }
  .single-portfolio {
    width: 100%;
  }
  .single-portfolio .single-thumbnail {
    height: 480px;
  }
  .single-portfolio .single-thumbnail img {
    height: 480px;
  }
  .single-portfolio .single-infos-1 {
    padding: 20px 0 20px 0;
    text-align: center;
  }
  .single-portfolio .single-infos-1 h2 {
    font-size: 3em;
  }
  .single-portfolio .wp-block-uagb-container.uagb-block-539ffcbf {
    padding: 0;
  }
  .single-portfolio .single-infos-content {
    flex-direction: column;
  }
  .single-portfolio .content-resum {
    width: 100%;
    padding-bottom: 20px;
  }
  .single-portfolio .content-img {
    width: 100%;
    padding: 20px;
  }
  .single-portfolio .single-arrows {
    padding: 20px;
  }
  .single-portfolio .single-infos-2 {
    flex-direction: column;
    padding: 20px;
  }
  .single-portfolio .single-infos-2 .single-infos-2-left {
    width: 100%;
    padding: 30px 20px 30px 20px;
    margin-right: 0;
  }
  .single-portfolio .single-infos-2 .single-infos-2-left h3 {
    font-size: 2em;
  }
  .single-portfolio .single-infos-2 .single-infos-2-right {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 0;
  }
  .wp-block-heading {
    margin-left: 0 !important;
  }
  /* Section INFOS PROJET*/
  .block-langages {
    padding: 30px 10px;
    justify-content: center;
  }
  .space-anne {
    display: none;
  }
}
/* Block de anne-presentation du modèle de page Présentation */
.anne-presentation {
  display: flex;
  align-items: start;
  justify-content: center;
  background-color: rgba(46, 29, 0, 0.5019607843);
  width: 75%;
  height: 100%;
  padding: 20px 20px 20px 300px;
}
.anne-presentation main.site-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.anne-background-none {
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 25%;
  height: 100%;
}

.anne-background {
  z-index: 980;
  top: 0;
  right: 0;
  position: fixed;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 25%;
  height: 100%;
  background-image: linear-gradient(to right, rgb(180, 179, 67), rgba(235, 148, 1, 0)), url("../assets/images/wimereux-down.webp");
  background-position: bottom;
  background-color: rgba(180, 179, 67, 0.1);
}

.wp-block-uagb-container.uagb-block-03f0abee {
  padding-left: 0;
  padding-right: 0;
}

@media all and (max-width: 1024px) {
  .anne-presentation {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px;
  }
  .anne-presentation main.site-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .anne-row {
    flex-direction: column;
  }
  .anne-background-none {
    display: none;
  }
  .anne-background {
    position: static;
    width: 100%;
    height: auto;
    background-color: rgb(180, 179, 67);
    box-shadow: none;
    margin-top: 0;
  }
  .wp-block-uagb-container.uagb-block-03f0abee {
    padding-left: 0;
    padding-right: 0;
  }
  .anne-presentation main.site-main {
    margin-bottom: 20px;
  }
}
/* Espace entre les blocks principaux */
.block-title {
  padding-top: 150px !important;
}

#prestations, #competences {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 60px;
  /* Styles initials pour les blocks services */
  /* Styles au survol des block-services */
  /* Appliquer l'animation aux éléments h2 avec délai */
  /* Styles au survol pour révéler les paragraphes */
  /* Graphique compétence */
  /* Listing de mes compétences */
}
#prestations h4, #competences h4 {
  display: block;
  font-size: 2.5em;
  margin-left: 0;
  padding-bottom: 20px;
}
#prestations h2, #competences h2 {
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
  font-size: 1em;
  font-weight: 600;
}
#prestations .align-services, #competences .align-services {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#prestations .service-left, #competences .service-left {
  display: flex;
  align-items: start;
  justify-content: right;
  text-align: start;
}
#prestations .service-right, #competences .service-right {
  display: flex;
  align-items: start;
  justify-content: left;
}
#prestations .service-center, #competences .service-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
#prestations .mobile,
#prestations .mobile-2, #competences .mobile,
#competences .mobile-2 {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 1s ease, transform 1s ease;
  margin-top: 250px;
}
#prestations .mobile-2, #competences .mobile-2 {
  opacity: 0;
  transform: translate(0, 0);
  rotate: -5deg;
  /* Assure que la position initiale est la même que mobile */
}
#prestations .services-left, #competences .services-left {
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: right;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 25px;
  padding: 25px;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 3em rgba(0, 0, 0, 0.5);
}
#prestations .services-left:hover, #competences .services-left:hover {
  background-color: rgb(0, 0, 0);
  box-shadow: 0 2em 2.5em rgba(255, 255, 255, 0.8);
}
#prestations .services-right, #competences .services-right {
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 25px;
  padding: 25px;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 3em rgba(0, 0, 0, 0.5);
}
#prestations .services-right:hover, #competences .services-right:hover {
  background-color: rgb(0, 0, 0);
  box-shadow: 0 2em 2.5em rgba(255, 255, 255, 0.8);
}
#prestations .block-icone-left, #competences .block-icone-left {
  display: flex;
  align-items: start;
  justify-content: left;
}
#prestations .block-icone-right, #competences .block-icone-right {
  display: flex;
  align-items: start;
  justify-content: right;
}
#prestations .circle-icone, #competences .circle-icone {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border: solid 1px #eb9401;
  border-radius: 100%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  transition: transform 0.2s ease-in-out;
}
#prestations .circle-icone .icon, #competences .circle-icone .icon {
  width: 100%;
  height: 100%;
  fill: #eb9401;
  transition: fill 0.2s ease-in-out;
}
#prestations .block-services h2, #competences .block-services h2 {
  transition: 0.2s ease-in-out;
}
#prestations .block-services:hover .circle-icone, #competences .block-services:hover .circle-icone {
  width: 60px;
  height: 60px;
  background-color: #eb9401;
  border: solid 1px rgba(0, 0, 0, 0.8);
  border-radius: 100%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  transform: scale(1.1);
}
#prestations .block-services:hover .circle-icone .icon, #competences .block-services:hover .circle-icone .icon {
  fill: rgba(0, 0, 0, 0.8);
}
#prestations .block-services:hover h2, #competences .block-services:hover h2 {
  color: #eb9401;
  transform: scale(1.05);
}
#prestations .space-prestations, #competences .space-prestations {
  height: 300px;
}
#prestations .competence-left, #competences .competence-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
}
#prestations .competence-right, #competences .competence-right {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: row;
  width: 100%;
}
#prestations .blocs-competences, #competences .blocs-competences {
  display: flex;
  align-items: start;
  flex-direction: column;
}
#prestations .espace-20, #competences .espace-20 {
  padding: 0;
}
#prestations .wp-block-uagb-container.uagb-block-7df70e10, #competences .wp-block-uagb-container.uagb-block-7df70e10 {
  padding-bottom: 0;
}
#prestations .block-check, #competences .block-check {
  margin: 0;
  padding: 0;
}
#prestations .domaine, #competences .domaine {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#prestations .domaine h2, #competences .domaine h2 {
  cursor: pointer;
  color: white;
  text-align: start;
  font-weight: 200 !important;
  font-size: 25px;
  opacity: 0;
  animation: none;
  transition: opacity 0.5s ease-in-out;
}
#prestations .domaine p, #competences .domaine p {
  display: none;
  margin: 0;
  font-size: 18px;
  color: #fec790;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#prestations .domaine.design h2, #competences .domaine.design h2 {
  color: #c7c672;
}
#prestations .domaine.design p, #competences .domaine.design p {
  color: #b4b343;
}
#prestations .domaine.visible, #competences .domaine.visible {
  opacity: 1;
}
#prestations .domaine.visible h2, #competences .domaine.visible h2 {
  animation: fadeInCompetence ease-in-out 1s forwards;
  animation-delay: 0.5s;
  /* Délai d'animation pour chaque h2 */
}
#prestations .domaine h2:hover + p, #competences .domaine h2:hover + p {
  display: block;
  opacity: 1;
}
#prestations b,
#prestations strong, #competences b,
#competences strong {
  font-weight: 200;
}
@keyframes fadeInCompetence {
  from {
    opacity: 0;
    transform: translateY(10px);
    /* Décalage léger vers le bas au départ */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    /* Réinitialiser la position */
  }
}
#prestations .domaine.visible:nth-child(1) h2, #competences .domaine.visible:nth-child(1) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 0s;
}
#prestations .domaine.visible:nth-child(2) h2, #competences .domaine.visible:nth-child(2) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 0.5s;
}
#prestations .domaine.visible:nth-child(3) h2, #competences .domaine.visible:nth-child(3) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 1s;
}
#prestations .domaine.visible:nth-child(4) h2, #competences .domaine.visible:nth-child(4) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 1.5s;
}
#prestations .domaine.visible:nth-child(5) h2, #competences .domaine.visible:nth-child(5) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 2s;
}
#prestations .domaine.visible:nth-child(6) h2, #competences .domaine.visible:nth-child(6) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 2.5s;
}
#prestations .domaine.visible:nth-child(7) h2, #competences .domaine.visible:nth-child(7) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 3s;
}
#prestations .domaine.visible:nth-child(8) h2, #competences .domaine.visible:nth-child(8) h2 {
  animation: fadeInCompetence 0.5s ease-in-out forwards;
  animation-delay: 3.5s;
}
#prestations .domaine h2:hover + p, #competences .domaine h2:hover + p {
  display: block;
  opacity: 1;
}
#prestations .domaine:hover .icon, #competences .domaine:hover .icon {
  fill: #fec790;
}
#prestations .domaine:hover h2, #competences .domaine:hover h2 {
  color: #fec790;
}
#prestations .domaine.design:hover .icon, #competences .domaine.design:hover .icon {
  fill: #b4b343;
}
#prestations .domaine.design:hover h2, #competences .domaine.design:hover h2 {
  color: #b4b343;
}
#prestations .chart-container, #competences .chart-container {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}
#prestations .chart-container-1, #competences .chart-container-1 {
  width: 450px;
  height: 450px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 25px;
  padding: 30px 15px 30px 15px;
}
#prestations .chart-container-1:hover, #competences .chart-container-1:hover {
  background-color: rgb(0, 0, 0);
}
#prestations .chart-container-2, #competences .chart-container-2 {
  width: 450px;
  height: 450px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 25px;
  padding: 30px 15px 30px 15px;
}
#prestations .chart-container-2:hover, #competences .chart-container-2:hover {
  background-color: rgb(0, 0, 0);
}
#prestations .chart-container-3, #competences .chart-container-3 {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  background-color: rgba(235, 148, 1, 0.8);
  border-radius: 25px;
  padding: 30px;
}
#prestations .chart-container-3:hover, #competences .chart-container-3:hover {
  background-color: rgb(235, 148, 1);
}
#prestations canvas, #competences canvas {
  width: 100% !important;
  height: auto !important;
}

@media all and (max-width: 1024px) {
  .space-competences-3 {
    display: none;
  }
  /* Espace entre les blocks principaux */
  .block-title {
    padding-top: 50px !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 66% !important;
  }
  .wp-block-uagb-container.uagb-is-root-container .uagb-block-76d92a5d {
    background-image: none;
  }
  body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap > *:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-info-box),
  body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap,
  body .wp-block-uagb-container > *:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-container-link-overlay):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-lottie):not(.uagb-faq__outer-wrap) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    flex-direction: column;
  }
  #prestations,
  #competences {
    min-height: auto;
    padding: 0;
    /* Styles initials pour les blocks services */
    /* Styles au survol des block-services */
  }
  #prestations h4,
  #competences h4 {
    display: block;
    margin: 0;
  }
  #prestations h2,
  #competences h2 {
    font-size: 1em;
  }
  #prestations h3,
  #competences h3 {
    text-align: center;
  }
  #prestations .wp-block-heading.has-text-align-right.has-x-large-font-size,
  #competences .wp-block-heading.has-text-align-right.has-x-large-font-size {
    line-height: 1.3 !important;
  }
  #prestations h4,
  #competences h4 {
    font-size: 2em;
    padding-left: 5px;
    padding-right: 5px;
  }
  #prestations h2,
  #competences h2 {
    line-height: 1.2;
    margin-bottom: 3px;
  }
  #prestations .service-left,
  #competences .service-left {
    display: flex;
    align-items: start;
    justify-content: right;
    flex-direction: row;
  }
  #prestations .service-right,
  #competences .service-right {
    display: flex;
    align-items: end;
    justify-content: left;
    flex-direction: row;
  }
  #prestations .service-center,
  #competences .service-center {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  #prestations .mobile,
  #prestations .mobile-2,
  #competences .mobile,
  #competences .mobile-2 {
    position: absolute;
    top: 20px;
    left: 50px;
    width: 75%;
    height: 75%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: opacity 1s ease, transform 1s ease;
    margin-top: 0;
  }
  #prestations .mobile-2,
  #competences .mobile-2 {
    opacity: 0;
    transform: translate(0, 0);
    rotate: -5deg;
    /* Assure que la position initiale est la même que mobile */
  }
  #prestations .services-left,
  #competences .services-left {
    aspect-ratio: 0;
    display: flex;
    align-items: start;
    justify-content: right;
  }
  #prestations .services-right,
  #competences .services-right {
    aspect-ratio: 0;
    display: flex;
    align-items: end;
    justify-content: left;
    padding-top: 400px;
  }
  #prestations .wp-block-uagb-container.uagb-is-root-container,
  #competences .wp-block-uagb-container.uagb-is-root-container {
    max-width: 70%;
  }
  #prestations .block-icone-left,
  #competences .block-icone-left {
    flex-basis: auto !important;
    display: flex;
    align-items: start;
    justify-content: left;
    width: 30px;
  }
  #prestations .block-icone-right,
  #competences .block-icone-right {
    flex-basis: auto !important;
    display: flex;
    align-items: start;
    justify-content: right;
    width: 30px;
  }
  #prestations .circle-icone,
  #competences .circle-icone {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border: solid 1px #eb9401;
    border-radius: 100%;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    transition: transform 0.2s ease-in-out;
  }
  #prestations .circle-icone .icon,
  #competences .circle-icone .icon {
    width: 100%;
    height: 100%;
    fill: #eb9401;
    transition: fill 0.2s ease-in-out;
  }
  #prestations .block-services h2,
  #competences .block-services h2 {
    transition: 0.2s ease-in-out;
  }
  #prestations .block-services:hover .circle-icone,
  #competences .block-services:hover .circle-icone {
    width: 60px;
    height: 60px;
    background-color: #eb9401;
    border: solid 1px rgba(0, 0, 0, 0.8);
    border-radius: 100%;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    transform: scale(1.1);
  }
  #prestations .block-services:hover .circle-icone .icon,
  #competences .block-services:hover .circle-icone .icon {
    fill: rgba(0, 0, 0, 0.8);
  }
  #prestations .block-services:hover h2,
  #competences .block-services:hover h2 {
    color: #eb9401;
    transform: scale(1.05);
  }
  #prestations .space-prestations,
  #competences .space-prestations {
    height: 50px;
  }
  #prestations .competence-left,
  #competences .competence-left {
    padding: 0;
  }
  #prestations .espace-20,
  #competences .espace-20 {
    padding-top: 20px;
  }
  #prestations .wp-block-uagb-container.uagb-block-7df70e10,
  #competences .wp-block-uagb-container.uagb-block-7df70e10 {
    padding-bottom: 0;
  }
  #prestations .block-check,
  #competences .block-check {
    width: 10%;
  }
  #prestations .domaine h2,
  #competences .domaine h2 {
    color: #fec790;
  }
  #prestations .domaine .icon,
  #competences .domaine .icon {
    fill: #fec790;
  }
  #prestations .domaine .design .icon,
  #competences .domaine .design .icon {
    fill: #b4b343;
  }
  #prestations .competence-right,
  #competences .competence-right {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
  }
  #prestations .chart-container-1,
  #competences .chart-container-1 {
    max-width: 350px;
    max-height: 200px;
    margin: 0 auto;
  }
  #prestations .chart-container-1 h3,
  #competences .chart-container-1 h3 {
    padding-top: 50px;
  }
  #prestations .chart-container-2,
  #competences .chart-container-2 {
    max-width: 350px;
    margin: 0 auto;
  }
  #prestations canvas,
  #competences canvas {
    width: 100% !important;
    height: auto !important;
  }
}
/* Block de gauche */
/* Div qui se déroule vers la gauche */
#anneBlockLeft {
  width: 25%;
  height: 100%;
  top: 0;
  right: 0;
  transition: right 0.5s ease-in-out 0.2s;
  position: fixed;
  display: flex;
  align-items: end;
  background-image: url("../assets/icones/signe-nb.png");
  background-size: 15%;
  background-position: bottom 75px right 80%;
  background-repeat: no-repeat;
  background-color: rgba(180, 179, 67, 0.5);
  z-index: 999;
  /*Div qui reste fixe à droite */
}
#anneBlockLeft .content-banner {
  width: 100%;
}
#anneBlockLeft .anneEtapes {
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  border: solid 1px white;
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.3);
}
#anneBlockLeft .anneEtapes h4 {
  margin-bottom: 20px;
}
#anneBlockLeft .anneEtapes p {
  color: white;
  font-size: 1.2em;
  font-weight: 400;
}
#anneBlockLeft .anneEtapes .plus {
  font-size: 1.8em;
  font-weight: 100;
}
#anneBlockLeft .anneEtapes:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#anneBlockLeft .anneContacts {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  /* Voiture qui roule */
  /* div qui se déroule vers la gauche au survol */
}
#anneBlockLeft .anneContacts .wave-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  animation: hideAndShow 10s ease-in-out forwards;
}
#anneBlockLeft .anneContacts .wave-container img {
  width: 30%;
  animation: wave 1s infinite;
  transform-origin: 50% 50%;
}
@keyframes hideAndShow {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}
#anneBlockLeft .anneContacts .top-anneBlockLeft {
  position: relative;
}
#anneBlockLeft .anneContacts:after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0px;
}
#anneBlockLeft .anneContacts:before {
  content: " ";
  background-size: cover;
  height: 100%;
  width: 0px;
  background-image: linear-gradient(to left, rgb(180, 179, 67), rgba(235, 148, 1, 0));
  background-color: rgba(180, 179, 67, 0.8);
  position: absolute;
  right: 100%;
  top: 0;
  transition: width 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
#anneBlockLeft .anneContacts .content-top-right {
  display: none;
}
#anneBlockLeft .anneContacts ul {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  position: relative;
  bottom: 20px;
}
#anneBlockLeft .anneContacts ul li {
  font-size: 14px;
  width: 100%;
  height: 30px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Icones réseaux sociaux */
}
#anneBlockLeft .anneContacts ul li a {
  width: 100%;
  color: white;
  position: relative;
  z-index: 0;
  opacity: 0;
  right: -80px;
  text-transform: uppercase;
  transition: right 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.15s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  color: white;
  text-decoration: none;
}
#anneBlockLeft .anneContacts ul li::before {
  content: "";
  width: 30px;
  height: 30px;
  opacity: 0;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 200px;
  top: 0;
  transition: transform 0.2s ease-in-out;
}
#anneBlockLeft .anneContacts ul li.menu-item-linkedin::before {
  background-image: url("../assets/icones/linkedin.svg");
  /*Linkedin */
}
#anneBlockLeft .anneContacts ul li.menu-item-facebook::before {
  background-image: url("../assets/icones/facebook.svg");
  /*Facebook */
}
#anneBlockLeft .anneContacts ul li.menu-item-contacts::before {
  background-image: url("../assets/icones/contact.svg");
  /* Contact */
}
#anneBlockLeft .anneContacts ul li:hover::before {
  transform: scale(1.2);
}
#anneBlockLeft .anneContacts ul li.active::before, #anneBlockLeft .anneContacts ul li:hover::before {
  transform: scale(1.5);
}
#anneBlockLeft .anneContacts:hover:before {
  width: 75%;
  height: 100vh;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#anneBlockLeft .anneContacts:hover li {
  /* Icones réseaux sociaux */
}
#anneBlockLeft .anneContacts:hover li a {
  right: 200px;
  opacity: 1;
  transition-duration: 0.4s;
  transition-property: right, opacity;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#anneBlockLeft .anneContacts:hover li a:hover {
  font-size: 2em;
}
#anneBlockLeft .anneContacts:hover li:nth-child(1) a {
  transition-delay: 0.3s;
}
#anneBlockLeft .anneContacts:hover li:nth-child(2) a {
  transition-delay: 0.34s;
}
#anneBlockLeft .anneContacts:hover li:nth-child(3) a {
  transition-delay: 0.38s;
}
#anneBlockLeft .anneContacts:hover li::before {
  left: -250px;
  opacity: 1;
}
#anneBlockLeft .annePlus {
  cursor: pointer;
  background-color: rgb(180, 179, 67);
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
#anneBlockLeft .annePlus .annePlus-move {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleAnimation 2s infinite;
}
#anneBlockLeft .annePlus .annePlus-move h5 {
  font-weight: 600;
  color: white;
  display: inline-block;
  margin-left: 10px;
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@media all and (max-width: 1366px) {
  .anneContacts ul li a {
    width: 50% !important;
  }
  .anneContacts:hover li:before {
    left: -230px !important;
  }
  .anneContacts:hover li a {
    right: 250px !important;
  }
  /*Div qui reste fixe à droite */
  .anneEtapes h4 {
    margin-bottom: 10px !important;
  }
  .anneEtapes h5 {
    font-size: 1.1em !important;
  }
  .anneEtapes p {
    color: white;
    font-size: 1em !important;
    font-weight: 400;
    margin: 0 !important;
  }
  .anneEtapes .plus {
    font-size: 1.5em !important;
    font-weight: 100;
  }
}
@media all and (max-width: 1024px) {
  #anneBlockLeft {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: 15%;
    background-position: bottom 100px right 70%;
  }
  #anneBlockLeft .content-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  #anneBlockLeft .anneEtapes,
  #anneBlockLeft .anneContacts {
    width: 100%;
    max-width: 90%;
    margin: 20px;
  }
  #anneBlockLeft .anneEtapes {
    order: 1;
    /* Ordre de la disposition en premier */
  }
  #anneBlockLeft .anneContacts {
    order: 2;
    background-color: transparent;
    /* Ordre de la disposition en second */
  }
  #anneBlockLeft .anneContacts:after {
    display: none;
  }
  #anneBlockLeft .anneContacts .content-top-right {
    background-color: rgba(0, 0, 0, 0);
  }
  #anneBlockLeft .anneContacts .wave-container {
    animation: none;
  }
  #anneBlockLeft .wave-container a {
    display: flex;
    align-items: center;
  }
  #anneBlockLeft .wave-container img {
    padding-top: 20px;
    display: block;
    /* Pour s'assurer que l'image est traitée comme un bloc */
  }
  #anneBlockLeft .annePlus {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}
/* Block de gauche */
/* Div qui se déroule vers la gauche */
#anneBlockLeft-moi {
  width: 25%;
  height: 100%;
  top: 0;
  right: 0;
  transition: right 0.5s ease-in-out 0.2s;
  position: fixed;
  display: flex;
  align-items: end;
  background-image: url("../assets/icones/signe.png");
  background-size: 15%;
  background-position: bottom 75px right 80%;
  background-repeat: no-repeat;
  background-color: rgb(77, 50, 0);
  z-index: 999;
  /*Div qui reste fixe à droite */
}
#anneBlockLeft-moi .content-banner {
  width: 100%;
}
#anneBlockLeft-moi .annePhoto {
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
#anneBlockLeft-moi .annePhoto img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0.8;
}
#anneBlockLeft-moi .anneContacts {
  height: 100%;
  width: 100%;
  background-color: rgb(77, 50, 0);
  /* Voiture qui roule */
  /* div qui se déroule vers la gauche au survol */
}
#anneBlockLeft-moi .anneContacts .wave-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  animation: hideAndShow 10s ease-in-out forwards;
}
#anneBlockLeft-moi .anneContacts .wave-container img {
  width: 30%;
  animation: wave 1s infinite;
  transform-origin: 50% 50%;
}
@keyframes hideAndShow {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}
#anneBlockLeft-moi .anneContacts .top-anneBlockLeft {
  position: relative;
}
#anneBlockLeft-moi .anneContacts:after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0px;
}
#anneBlockLeft-moi .anneContacts:before {
  content: " ";
  background-size: cover;
  height: 100%;
  width: 0px;
  background-image: linear-gradient(to left, rgb(77, 50, 0), rgba(235, 148, 1, 0));
  background-color: rgba(77, 50, 0, 0.8);
  position: absolute;
  right: 100%;
  top: 0;
  transition: width 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
#anneBlockLeft-moi .anneContacts .content-top-right {
  display: none;
}
#anneBlockLeft-moi .anneContacts ul {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  position: relative;
  bottom: 20px;
}
#anneBlockLeft-moi .anneContacts ul li {
  font-size: 14px;
  width: 100%;
  height: 30px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Icones réseaux sociaux */
}
#anneBlockLeft-moi .anneContacts ul li a {
  width: 100%;
  color: white;
  position: relative;
  z-index: 0;
  opacity: 0;
  right: -80px;
  text-transform: uppercase;
  transition: right 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.15s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  color: white;
  text-decoration: none;
}
#anneBlockLeft-moi .anneContacts ul li::before {
  content: "";
  width: 30px;
  height: 30px;
  opacity: 0;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 200px;
  top: 0;
  transition: transform 0.2s ease-in-out;
}
#anneBlockLeft-moi .anneContacts ul li.menu-item-linkedin::before {
  background-image: url("../assets/icones/linkedin.svg");
  /*Linkedin */
}
#anneBlockLeft-moi .anneContacts ul li.menu-item-facebook::before {
  background-image: url("../assets/icones/facebook.svg");
  /*Facebook */
}
#anneBlockLeft-moi .anneContacts ul li.menu-item-contacts::before {
  background-image: url("../assets/icones/contact.svg");
  /* Contact */
}
#anneBlockLeft-moi .anneContacts ul li:hover::before {
  transform: scale(1.2);
}
#anneBlockLeft-moi .anneContacts ul li.active::before, #anneBlockLeft-moi .anneContacts ul li:hover::before {
  transform: scale(1.5);
}
#anneBlockLeft-moi .anneContacts:hover:before {
  width: 75%;
  height: 100vh;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#anneBlockLeft-moi .anneContacts:hover li {
  /* Icones réseaux sociaux */
}
#anneBlockLeft-moi .anneContacts:hover li a {
  right: 200px;
  opacity: 1;
  transition-duration: 0.4s;
  transition-property: right, opacity;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#anneBlockLeft-moi .anneContacts:hover li a:hover {
  font-size: 2em;
}
#anneBlockLeft-moi .anneContacts:hover li:nth-child(1) a {
  transition-delay: 0.3s;
}
#anneBlockLeft-moi .anneContacts:hover li:nth-child(2) a {
  transition-delay: 0.34s;
}
#anneBlockLeft-moi .anneContacts:hover li:nth-child(3) a {
  transition-delay: 0.38s;
}
#anneBlockLeft-moi .anneContacts:hover li::before {
  left: -250px;
  opacity: 1;
}
#anneBlockLeft-moi .annePlus {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
#anneBlockLeft-moi .annePlus .annePlus-move {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleAnimation 2s infinite;
}
#anneBlockLeft-moi .annePlus .annePlus-move h5 {
  font-weight: 600;
  color: white;
  display: inline-block;
  margin-left: 10px;
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@media all and (max-width: 1366px) {
  .anneContacts ul li a {
    width: 50% !important;
  }
  .anneContacts:hover li:before {
    left: -230px !important;
  }
  .anneContacts:hover li a {
    right: 250px !important;
  }
  /*Div qui reste fixe à droite */
  .anneEtapes h4 {
    margin-bottom: 10px !important;
  }
  .anneEtapes h5 {
    font-size: 1.1em !important;
  }
  .anneEtapes p {
    color: white;
    font-size: 1em !important;
    font-weight: 400;
    margin: 0 !important;
  }
  .anneEtapes .plus {
    font-size: 1.5em !important;
    font-weight: 100;
  }
}
@media all and (max-width: 1024px) {
  #anneBlockLeft-moi {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: 15%;
    background-position: bottom 80px right 70%;
    padding-bottom: 10px;
  }
  #anneBlockLeft-moi .content-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  #anneBlockLeft-moi .annePhoto,
  #anneBlockLeft-moi .anneContacts {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #anneBlockLeft-moi .annePhoto .content-top-right,
  #anneBlockLeft-moi .anneContacts .content-top-right {
    background-color: rgba(0, 0, 0, 0);
  }
  #anneBlockLeft-moi .annePhoto {
    order: 1; /* Ordre de la disposition en premier */
  }
  #anneBlockLeft-moi .annePhoto img {
    position: relative;
    height: 100%;
  }
  #anneBlockLeft-moi .anneContacts {
    order: 2;
    background-color: transparent;
    /* Ordre de la disposition en second */
  }
  #anneBlockLeft-moi .anneContacts:after {
    display: none;
  }
  #anneBlockLeft-moi .anneContacts .wave-container {
    animation: none;
  }
  #anneBlockLeft-moi .wave-container a {
    display: flex;
    align-items: center;
  }
  #anneBlockLeft-moi .wave-container img {
    padding-top: 20px;
    display: block;
    /* Pour s'assurer que l'image est traitée comme un bloc */
  }
  #anneBlockLeft-moi .annePlus {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}
/* Le fond de la modale */
.modal {
  display: none;
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centrer le modal exactement au milieu */
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Activer le défilement si nécessaire */
  background-color: rgb(0, 0, 0);
  /* Couleur de repli */
  background-color: rgba(0, 0, 0, 0.4);
}

/* Contenu de la modale CONTACT*/
.modal-content {
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  background-color: white;
  margin: auto;
  padding: 0;
  border: 1px solid #b4b343;
  border-radius: 25px;
  top: 20px;
  right: 20px;
  /* Ajouté pour décaler de 20px de la droite */
  width: 500px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards 1s;
}

/* Contenu de la modale DEVIS*/
.devis-content {
  width: 1000px;
  /* Style de base pour le formulaire */
  /* Style spécifique pour les groupes de boutons radio */
  /* Styles additionnels pour l'apparence générale */
}
.devis-content .wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.devis-content .wpcf7-form p {
  flex: 1 1 48%;
  padding-left: 10px;
  padding-right: 10px;
}
.devis-content .wpcf7-form p.full-width {
  flex: 1 1 100%;
  /* Utilisé pour les champs qui doivent occuper toute la largeur */
}
.devis-content .wpcf7-form input[type=text],
.devis-content .wpcf7-form input[type=email],
.devis-content .wpcf7-form input[type=tel],
.devis-content .wpcf7-form input[type=url],
.devis-content .wpcf7-form textarea,
.devis-content .wpcf7-form select,
.devis-content .wpcf7-form input[type=file],
.devis-content .wpcf7-form input[type=radio] {
  border-radius: 8px;
  border: 1px solid #dad9a1;
  padding: 8px;
  margin: 0;
  margin-top: 7px;
  box-sizing: border-box;
  width: 100%;
  color: #b4b343;
}
.devis-content .wpcf7-form .wpcf7-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.devis-content .wpcf7-form label {
  display: block;
}
.devis-content .wpcf7-form input[type=checkbox] {
  width: auto;
}
.devis-content .wpcf7-form .wpcf7-response-output {
  margin-top: 20px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 60px;
  width: 100%;
}

.modal-header-left {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 75%;
  padding-top: 10px;
}
.modal-header-left h5 {
  color: #b4b343;
}

.modal-header-right {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 25%;
  /* Le bouton de fermeture */
}
.modal-header-right .close {
  color: #b4b343;
  float: right;
  font-size: 60px;
  font-weight: 100;
  padding-right: 30px;
  line-height: 1em;
}
.modal-header-right .close:hover,
.modal-header-right .close:focus {
  color: #b4b343;
  text-decoration: none;
  cursor: pointer;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards;
}

.modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  width: 100%;
}

/* Le formulaire */
.contact-anne {
  width: 100%;
  /* bouton "Envoyer" */
  /* Messages approprié */
}
.contact-anne form {
  width: 17em;
  font-family: "UbuntuSans-Regular";
  font-size: 14px;
  width: 100%;
}
.contact-anne input,
.contact-anne textarea {
  border-radius: 8px;
  border: 1px solid #dad9a1;
  padding: 8px;
  margin: 0;
  margin-top: 7px;
  box-sizing: border-box;
  width: 100%;
}
.contact-anne textarea {
  margin-bottom: 5px;
  height: 150px;
}
.contact-anne input[type=submit] {
  border: 1px solid #b4b343;
  border-radius: 25px;
  background-color: #b4b343;
  color: white;
  width: 100%;
  padding: 15px 20px 15px 20px;
  margin: 0;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.contact-anne input[type=submit]:hover {
  background-color: transparent;
  color: #b4b343;
  transform: scale(1.05);
}
.contact-anne .wpcf7 form > p {
  margin-bottom: 10px;
}
.contact-anne .wpcf7-spinner {
  display: none;
}
.contact-anne .wpcf7-list-item {
  display: inline-block;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #373a41;
}
.contact-anne .wpcf7 .wpcf7-not-valid-tip {
  color: #eb9401;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-top: 8px;
}
.contact-anne .wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #b4b343;
  border-radius: 25px;
  color: #b4b343;
  font-size: 20px;
  line-height: 1em;
  padding: 15px;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
}
.contact-anne .wpcf7 form.invalid .wpcf7-response-output {
  border: 1px solid #eb9401;
  border-radius: 25px;
  color: #eb9401;
  font-size: 20px;
  line-height: 1em;
  padding: 15px;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
}
.contact-anne .wpcf7 form.failed .wpcf7-response-output {
  border: 1px solid red;
  border-radius: 25px;
  color: red;
  font-size: 20px;
  line-height: 1em;
  padding: 15px;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 2px 12px;
  color: #b4b343;
}

/* Animations */
@keyframes fadeInModal {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Responsive */
@media all and (max-width: 1024px) {
  .modal-content {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    right: 0;
  }
  .modal-header-left {
    flex-direction: column;
    padding-left: 50px;
  }
  .icon-text {
    margin: 10px;
  }
  .modal-header {
    background-position-y: 1rem;
    background-position-x: -2rem;
    height: 120px;
  }
  .modal-header h5 {
    font-size: 1.3em;
    font-weight: 900;
    margin-bottom: 15px;
  }
  .modal-header.devis-header {
    height: 200px;
  }
  .modal-body {
    padding: 0;
    padding-left: 3em;
    padding-right: 3em;
  }
  .modal-footer {
    height: 30px;
  }
  input,
  textarea {
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 5px;
  }
  .wpcf7-form textarea {
    height: 110px;
  }
  input[type=submit] {
    padding: 0px 0px;
    font-weight: 900;
  }
  .icon-text {
    margin-right: 20px;
    margin-left: 20px;
  }
  .wpcf7-form {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
  }
  .wpcf7-form p {
    flex: 1 1 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .contact-anne {
    /* Messages approprié */
  }
  .contact-anne .wpcf7 form.sent .wpcf7-response-output {
    margin-left: 0;
    margin-right: 0;
  }
  .contact-anne .wpcf7 form.invalid .wpcf7-response-output {
    margin-left: 0;
    margin-right: 0;
  }
  .contact-anne .wpcf7 form.failed .wpcf7-response-output {
    margin-left: 0;
    margin-right: 0;
  }
}
.block-a-propos h6 {
  font-weight: 100;
}

.lotties-p h4 {
  margin-left: 0;
  margin-right: 0;
}

.lottie-container {
  display: flex;
}

@media all and (max-width: 1024px) {
  .lottie-container {
    width: 50%;
  }
  .lottie-container svg {
    width: 100%;
    height: auto;
  }
}
/* Le fond de la modale */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrer le modal exactement au milieu */
  width: 100%;
  height: 100%;
  overflow: auto; /* Activer le défilement si nécessaire */
  background-color: rgb(0, 0, 0); /* Couleur de repli */
  background-color: rgba(0, 0, 0, 0.4);
}

/* Contenu de la modale */
.lightbox-content {
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  background-color: #b4b343;
  margin: auto;
  padding: 0;
  border: 1px solid #b4b343;
  border-radius: 25px;
  top: 50px;
  left: 20%;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards 1s;
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 60px;
  width: 100%;
}

.lightbox-header-left {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 60%;
  padding-top: 10px;
}
.lightbox-header-left svg {
  padding-right: 10px;
}
.lightbox-header-left h5 {
  color: #403f18;
}

.icon-text {
  margin-right: 10px;
}

.lightbox-header-right {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 40%;
}

.lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 563px;
  padding: 0;
}

.swiper-wrapper {
  display: flex !important;
  align-items: center !important;
}

.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.swiper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 900px;
  height: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transform: rotate(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

/*___________*/
.lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 50px;
  padding: 2px 12px;
  color: #b4b343;
}

/* Le bouton de fermeture */
.lightbox-close {
  color: #403f18;
  float: right;
  font-size: 60px;
  font-weight: 100;
  padding-right: 30px;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #403f18;
  text-decoration: none;
  cursor: pointer;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards;
}

/* Animations */
@keyframes fadeInModal {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Responsive */
@media all and (max-width: 1366px) {
  .slide {
    max-width: 85%;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  .lightbox-body {
    height: 450px;
  }
}
@media all and (max-width: 1024px) {
  .lightbox-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    right: 0;
  }
  .lightbox-header {
    background-position-y: 1rem;
    background-position-x: -2rem;
    height: 80px;
  }
  .lightbox-header-left {
    width: 75%;
  }
  .lightbox-header-right {
    width: 25%;
  }
  .lightbox-body {
    height: 100%;
    width: 375px;
  }
  .slide {
    height: 100%;
    width: 375px;
  }
  .swiper {
    height: 100%;
  }
  .swiper-slide {
    width: 350px;
    height: 100%;
  }
  .swiper-slide img {
    transform: rotate(0);
    transform-origin: center;
    width: auto;
    height: 100%;
  }
  .swiper-backface-hidden .swiper-slide {
    display: flex;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 0;
    left: 0;
  }
}
/* SECTION TARIFS */
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns {
  padding: 0;
}

.prestation-start {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
}

/* Section d'un seul block de tarifs */
.block-prestation {
  position: relative;
  flex-basis: calc(33.33% - 20px);
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 2em rgba(0, 0, 0, 0.2);
  /* Bouton devis */
}
.block-prestation:hover {
  box-shadow: 0 2em 2.5em rgba(255, 255, 255, 0.8);
}
.block-prestation .demande-devis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  padding: 30px;
  width: 100%;
}
.block-prestation .demande-devis .wp-block-group {
  box-sizing: border-box;
  width: 100%;
}
.block-prestation .devis .wp-block-button__link {
  color: white;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  box-shadow: 2em 2em 2em rgba(0, 0, 0, 0.2);
}
.block-prestation .devis .wp-block-button__link:hover {
  box-shadow: 0 2em 2em rgba(255, 255, 255, 0.2);
}
.block-prestation .devis .wp-block-button__link:hover,
.block-prestation .devis .wp-block-button__link:visited,
.block-prestation .devis .wp-block-button__link:focus,
.block-prestation .devis .wp-block-button__link:active {
  border-color: white;
  background-color: transparent;
  color: white;
}

/* Class pour les prestations Package */
.prestation-container.package {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 30px;
  width: 100%;
  height: 100%;
}

.prestation-container.package .block-prestation {
  flex: 1 1 calc(33.33% - 30px);
  box-sizing: border-box;
  background-color: rgba(82, 52, 0, 0.3);
  /* Séparareur */
}
.prestation-container.package .block-prestation .devis .wp-block-button__link {
  border-color: #eb9401;
  background-color: #eb9401;
}
.prestation-container.package .block-prestation .devis .wp-block-button__link:hover {
  border-color: white;
  background-color: transparent;
  color: white;
}
.prestation-container.package .block-prestation:hover {
  background-color: rgba(235, 148, 1, 0.65);
}
.prestation-container.package .block-prestation hr.styled {
  border: none;
  border-top: 1px solid white;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  /* Assure que la taille est calculée avec les bordures et les marges */
}

.content-type-prestation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 25px 25px 0 0;
  background-color: rgba(235, 148, 1, 0.8);
  width: 100%;
  text-align: center;
}

.content-tarif-prestation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  background-color: rgba(235, 148, 1, 0.8);
  width: 100%;
  text-align: center;
  /* Pour ajuster le prix de base au prix promo */
  /* Styles de transformation pour tarifs lorsqu'ils sont masqués */
  /* Styles de base pour cacher .promo_20 et préparer l'animation */
  /* Classe active qui sera ajoutée pour afficher la promo avec l'animation */
  /* Animation de bounce-up */
  /* Appliquer l'animation bounce-up à .promo_20 quand elle apparaît */
}
.content-tarif-prestation h3 {
  font-size: 4em;
  margin: 0;
}
.content-tarif-prestation h4 {
  margin: 0;
}
.content-tarif-prestation h5 {
  margin-top: 20px;
}
.content-tarif-prestation .tarifs, .content-tarif-prestation .promo_20 {
  transition: opacity 0.5s ease;
}
.content-tarif-prestation .tarifs {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.content-tarif-prestation .tarifs.hide {
  transform: scale(0.5);
  opacity: 0.5;
}
.content-tarif-prestation .tarifs h3,
.content-tarif-prestation .tarifs h4 {
  margin: 0;
}
.content-tarif-prestation .promo_20 {
  display: none;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.content-tarif-prestation .promo_20.show {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 1;
  transform: translateY(0);
}
.content-tarif-prestation .promo_20 h3,
.content-tarif-prestation .promo_20 h4 {
  margin: 0;
}
@keyframes bounceUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
  70% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
.content-tarif-prestation .promo_20.show {
  animation: bounceUp 0.5s ease-out;
}

.content-details-prestation {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: left;
  padding: 20px 0 20px 0;
}
.content-details-prestation h6 {
  text-align: left;
  font-size: 1em;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 20px;
  margin: 0;
  width: 100%;
  transition: transform 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), background-color 0.5s ease-in-out, color 0.3s ease-in-out;
}
.content-details-prestation h6:hover {
  background-color: rgb(235, 148, 1);
  color: rgb(255, 255, 255);
}

/* Class pour les prestations Add-on */
.prestation-container.add-on {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
  height: 100%;
}

.prestation-container.add-on .block-prestation {
  flex: 1 1 calc(50% - 30px);
  box-sizing: border-box;
  background-color: rgba(87, 85, 34, 0.3);
  /* Séparareur */
}
.prestation-container.add-on .block-prestation:hover {
  background-color: rgba(180, 179, 67, 0.65);
}
.prestation-container.add-on .block-prestation hr.styled {
  border: none;
  border-top: 1px solid white;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  /* Assure que la taille est calculée avec les bordures et les marges */
}

.prestation-container.add-on .block-prestation .content-type-prestation {
  background-color: rgba(180, 179, 67, 0.8);
}

.prestation-container.add-on .block-prestation .content-tarif-prestation {
  background-color: rgba(180, 179, 67, 0.8);
}

.prestation-container.add-on .block-prestation .content-details-prestation h6:hover {
  background-color: rgb(180, 179, 67);
}

/* Bouton de fermeture du formulaire */
.close-devis {
  color: #b4b343;
  float: right;
  font-size: 60px;
  font-weight: 100;
  padding-right: 30px;
  line-height: 1em;
}

.close-devis:hover,
.close-devis:focus {
  color: #b4b343;
  text-decoration: none;
  cursor: pointer;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards;
}

@media all and (max-width: 1024px) {
  .prestation-start {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* Ajoutez de l'espace entre les éléments */
  }
  .block-prestation {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Ajuste la hauteur pour s'adapter au contenu */
  }
  .block-prestation h2 {
    font-size: 3em;
  }
  /* Désactiver l'effet hover */
  .prestation-container.package .block-prestation:hover,
  .prestation-container.add-on .block-prestation:hover {
    background-color: inherit; /* Désactive l'effet hover */
  }
  /* Styles pour les blocs prestation lorsqu'ils deviennent visibles */
  .prestation-container.package .block-prestation.visible-prestation {
    background-color: rgba(235, 148, 1, 0.5);
  }
  .prestation-container.add-on .block-prestation.visible-prestation {
    background-color: rgba(180, 179, 67, 0.5);
  }
}
/* Le fond de la modale */
.promo {
  display: none;
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrer le modal exactement au milieu */
  width: 100%;
  height: 100%;
  overflow: auto; /* Activer le défilement si nécessaire */
  background-color: rgb(0, 0, 0); /* Couleur de repli */
  background-color: rgba(0, 0, 0, 0.4);
}

/* Contenu de la modale */
.promo-content {
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  background-color: #eb9401;
  background-image: url("https://annelamy.fr/wp-content/themes/anne/assets/images/fond-carte.png");
  background-size: cover; /* Pour ajuster l'image à la taille du conteneur */
  background-position: left;
  margin: auto;
  padding: 30px;
  border: 1px solid #eb9401;
  border-radius: 25px;
  top: 50px;
  left: 20%;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards 1s;
  /* bouton PROMO */
}
.promo-content .wp-block-button .wp-block-button__link, .promo-content .wp-block-search .wp-block-search__button, .promo-content body .wp-block-file .wp-block-file__button {
  border-color: white;
  background-color: white;
  color: #eb9401;
  line-height: 1.5em;
}
.promo-content .wp-block-button .wp-block-button__link:hover, .promo-content .wp-block-search .wp-block-search__button:hover, .promo-content body .wp-block-file .wp-block-file__button:hover {
  border-color: white;
  background-color: white;
  color: #eb9401;
  line-height: 1.5em;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards;
}

#lottie-animation {
  width: 50%; /* Largeur de 100% du parent */
  height: 300px; /* Ajuste la hauteur selon tes besoins */
}

.offre {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 50%;
}
.offre h2, .offre h3, .offre p {
  text-align: center;
  color: white;
  font-size: 3em;
}
.offre p {
  font-size: 1em;
  padding-top: 20px;
}

.promo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 60px;
  width: 100%;
}

.promo-header-left {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 60%;
  padding-top: 10px;
}
.promo-header-left h5 {
  color: #373a41;
}

.icon-text {
  margin-right: 10px;
}

.promo-header-right {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 40%;
}

.promo-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 563px;
  padding: 0;
}

.promo-footer {
  display: flex;
  align-items: center;
  justify-content: end;
  height: auto;
  padding: 2px 12px;
  color: #b4b343;
}

/* Le bouton de fermeture */
.promo-close {
  color: white;
  float: right;
  font-size: 60px;
  font-weight: 100;
  padding-right: 30px;
}

.promo-close:hover,
.promo-close:focus {
  text-decoration: none;
  cursor: pointer;
  transform: scale(0.8);
  animation: fadeInModal 0.5s ease forwards;
}

/* Animations */
@keyframes fadeInModal {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Responsive */
@media all and (max-width: 1366px) {
  .slide {
    max-width: 85%;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  .promo-body {
    height: 450px;
  }
  .offre {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }
  .offre h2 {
    font-size: 3em;
  }
  .offre h3 {
    font-size: 2em;
  }
}
@media all and (max-width: 1024px) {
  .promo-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    right: 0;
  }
  #lottie-animation {
    width: 100%;
  }
  .offre {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }
  .offre h2 {
    font-size: 2em;
  }
  .offre h3 {
    font-size: 1.5em;
  }
  .offre p {
    display: none;
  }
  .offre h5 {
    padding-top: 10px;
  }
  .promo-header {
    background-position-y: 1rem;
    background-position-x: -2rem;
    height: 1px;
  }
  .promo-header-left {
    width: 75%;
  }
  .promo-header-right {
    width: 25%;
  }
  .promo-body {
    flex-direction: column;
    height: 100%;
    width: 375px;
  }
  .slide {
    height: 100%;
    width: 375px;
  }
  .swiper {
    height: 100%;
  }
  .swiper-slide {
    width: 350px;
    height: 100%;
  }
  .swiper-slide img {
    transform: rotate(0);
    transform-origin: center;
    width: auto;
    height: 100%;
  }
  .swiper-backface-hidden .swiper-slide {
    display: flex;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 0;
    left: 0;
  }
  /* Le bouton de fermeture */
  .promo-close {
    padding-right: 0;
  }
}/*# sourceMappingURL=style.css.map */