/* ==========================================================================
   BTW – Global styles (thème partagé, tous sites de la stack)
   --------------------------------------------------------------------------
   Variables attendues, déclarées par Elementor (Kit du site) :
     --color-accent, --color-accent-1, --color-accent-4, --color-accent-5,
     --color-primary, --color-secondary, --color-tertiary, --font-color-text

   Variables PROPRES À CHAQUE SITE (à déclarer dans Elementor > CSS
   personnalisé de CHAQUE site — voir doc) :
     --gradient-color-1, --gradient-color-2, --gradient-color-3,
     --gradient-color-4, --font-color-underline
   Un fallback par défaut est prévu ci-dessous si un site oublie de les
   déclarer (le site ne casse pas visuellement).
   ========================================================================== */

/*GLOBAL*/
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    scroll-behavior: smooth;
    --color-bg-link:var(--color-accent-5);
}
@media (prefers-reduced-motion: reduce) {
    body { scroll-behavior: auto; }
}
.elementor-widget-text-editor, .e-paragraph-base {
  text-underline-offset: 3px;
}
.elementor-widget-text-editor p:last-of-type {
    margin-block-end: 0;
}
/*--------------------*/


/*LINKS*/
.elementor-widget-text-editor a,
.e-paragraph-base a {
  text-decoration: underline !important;
  text-decoration-color: var(--color-accent) !important;
  text-decoration-thickness: 2px !important;
  border-radius: 2px;
  box-decoration-break: clone; /* essentiel si le lien wrap sur 2 lignes */
  background-image: linear-gradient(var(--color-bg-link), var(--color-bg-link));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size .3s ease, color .3s ease, text-decoration-color .3s ease, padding .1s ease;
  transition-delay:padding 0.3s;
}

.elementor-widget-text-editor a:hover, .elementor-widget-text-editor a:focus-visible, .e-paragraph-base a:hover, .e-paragraph-base a:focus-visible {
  background-size: 100% 100% !important;
  text-decoration-color: var(--color-bg-link) !important;
}
header .elementor-widget-text-editor a,
footer .elementor-widget-text-editor a,
header .e-paragraph-base a,
footer .e-paragraph-base a {
  text-decoration: initial !important;
  background-image: none !important;
}

/*--------------------*/

/*CUSTOM BTN*/
.btn-block > div {
    width:fit-content;
}

.btn {width:fit-content;}

/* --- btn-primary --- */
.btn.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.2s ease 0.42s;
  color:var(--font-color-text)!important;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-accent-1);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
}
.btn-primary::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 80%;
  height: 2px;
  background-color: #fff;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.6s ease;
}
.btn-primary:hover {
  color: #fff !important;
  transition: color 0.8s ease;
}
.btn-primary:hover::before {
  transform: translate(-50%, -50%) scale(20);
  transition: transform 1s ease;
}
.btn-primary:hover::after {
  transform: translateX(-50%) scaleX(0.5);
}

/* --- btn-secondary --- */
.btn-secondary {
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: color 0.3s ease;
  color:var(--font-color-text)!important;
}
.btn-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 3em;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent-4);
  transition: width 0.35s ease, background-color 0.35s ease;
}
.btn-secondary::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: 10px;
  width: 80%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}
.btn-secondary:hover::before {
  width: 100%;
}
.btn-secondary:hover::after {
  transform: scaleX(0.5);
}

/* --- btn-tertiary --- */
.btn-tertiary {
  --icon-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2011'%20width='15'%20height='11'%3E%3Cpath%20fill='%23000'%20d='M10.6,10.5c-0.2,0-0.5-0.1-0.6-0.2c-0.4-0.4-0.5-1-0.1-1.4L12,6.3C10.7,6.2,8.8,6,7.5,6C5.1,6,1.2,6.5,1.1,6.5C0.6,6.6,0.1,6.2,0,5.6c-0.1-0.5,0.3-1,0.9-1.1C1,4.5,5,4,7.5,4c1.2,0,2.8,0.1,4.1,0.2L9.9,2.1c-0.4-0.4-0.4-1,0.1-1.4c0.4-0.4,1.1-0.3,1.4,0.1l3.4,4C14.9,4.9,14.9,4.9,15,5c0,0,0,0.1,0.1,0.2c0,0.1,0,0.2,0,0.3c0,0.1,0,0.3-0.1,0.4l0,0l0,0l0,0c0,0.1-0.1,0.2-0.1,0.2l-3.4,4C11.2,10.4,10.9,10.5,10.6,10.5z'%3E%3C/path%3E%3C/svg%3E");

  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 30px; /* réserve la place pour l'icône */
  color: inherit;
  text-decoration: none;
  color:var(--font-color-text)!important;
}
.btn-tertiary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}
.btn-tertiary::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px; /* position finale = position par défaut, visible */
  width: 15px;
  height: 11px;
  opacity: 1;
  background-color: currentColor;
  transform: translateY(-50%);

  -webkit-mask-image: var(--icon-arrow);
  mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn-tertiary:hover::after {
  transform: scaleX(1);
}
.btn-tertiary:hover::before {
  animation: btn-tertiary-arrow 0.4s ease-in-out;
}

@keyframes btn-tertiary-arrow {
  0% {
    right: 0;
    opacity: 0;
  }
  100% {
    right: -20px;
    opacity: 1;
  }
}
/*--------------------*/

/*TITLES UNDERLINE*/
/* Trait décoratif sous les h1/h2 encadrés par <u>.
   Couleur pilotée par --font-color-underline (déclarée dans Elementor,
   par site) via la technique du masque : le SVG ne sert qu'à définir
   la FORME du trait, sa couleur d'origine dans le data-URI n'a aucune
   importance (un masque ne lit que la silhouette/alpha, pas la couleur). */
.h1 u,h1 u, .h2 u, h2 u{
  position:relative;
  font-style:normal;
  isolation: isolate;
  text-decoration: none;
  display:inline-block;
  line-height:100%;
}
.h1 u:after,h1 u:after{
  display:block;
  content:"";
  position:absolute;
  bottom:-27px;
  height:35px;
  width:100%;
  max-width:230px;
  min-width:200px;
  right:0;
  z-index:-1;
  background-color: var(--font-color-underline, #FFC971);
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='255' height='29' fill='none' preserveAspectRatio='auto' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 25C53.5 2.5 156.5-5.5 251.5 17' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='255' height='29' fill='none' preserveAspectRatio='auto' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 25C53.5 2.5 156.5-5.5 251.5 17' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.h2 u:after,h2 u:after{
  display:block;
  content:"";
  position:absolute;
  bottom:-24px;
  height:27px;
  width:100%;
  max-width:150px;
  min-width:100px;
  right:0;
  z-index:-1;
  background-color: var(--font-color-underline, #FFC971);
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='129' preserveAspectRatio='none' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M125.106 5.928C93.382 1.194 36.393 3.733 4.331 18.596' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='129' preserveAspectRatio='none' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M125.106 5.928C93.382 1.194 36.393 3.733 4.331 18.596' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media (max-width:920px){
  .h1 u:after,h1 u:after{
    bottom:-16px;
    height:18px;
  }
  .h2 u:after,h2 u:after{
    height:13px;
    bottom:-10px;
  }
}
/*--------------------*/

/*GRADIENT ANIMATED - BACKGROUND SECTION*/
/* USAGE (côté Elementor) : ajouter la classe CSS "bg-gradient" uniquement
   sur des sections de type HEADER de page. Techniquement réutilisable
   ailleurs, mais déconseillé sur d'autres types de sections (lisibilité
   du contenu, cohérence visuelle). À rappeler dans la mini-doc marketing. */
/* Les 4 couleurs (--gradient-color-1 à 4) sont désormais déclarées
   dans Elementor > CSS personnalisé, PAR SITE (voir doc de projet).
   Un fallback est fourni ici pour que le fond reste fonctionnel même
   si un nouveau site n'a pas encore configuré ces variables. */
.bg-gradient {
  position: relative;
  overflow: hidden;
  background-color: var(--gradient-color-2, #fffcf5);
  isolation: isolate;
}

.bg-gradient::before {
  content: "";
  position: absolute;
  inset: -30%;

  background-image:
    radial-gradient(circle, var(--gradient-color-1, #FFF0EF) 0%, transparent 70%),
    radial-gradient(circle, var(--gradient-color-3, #D9F7F7) 0%, transparent 70%),
    radial-gradient(circle, var(--gradient-color-4, #FFF3D1) 0%, transparent 70%),
    radial-gradient(circle, var(--gradient-color-1, #FFF0EF) 0%, transparent 60%),
    radial-gradient(circle, var(--gradient-color-3, #D9F7F7) 0%, transparent 80%),
    radial-gradient(circle, var(--gradient-color-1, #FFF0EF) 0%, transparent 90%);

  background-repeat: no-repeat;

  background-size:
    60% 60%,
    55% 55%,
    65% 65%,
    50% 50%,
    70% 70%,
    80% 80%;

  background-position:
    20% 30%,
    80% 20%,
    30% 80%,
    90% 90%,
    50% 50%,
    50% 90%;

  filter: blur(50px);

  z-index: -1;

  animation: meshMove 30s ease-in-out infinite;
  will-change: background-position, background-size, transform;
}


@keyframes meshMove {

  0% {
    background-position:
      20% 30%,
      80% 20%,
      30% 80%,
      90% 90%,
      50% 50%,
      50% 90%;
  }

  15% {
    background-position:
      5% 55%,
      105% 5%,
      55% 95%,
      65% 65%,
      25% 35%,
      80% 55%;
  }

  30% {
    background-position:
      40% 85%,
      95% 40%,
      10% 55%,
      95% 25%,
      65% 75%,
      30% 15%;
  }

  45% {
    background-position:
      85% 45%,
      110% 85%,
      75% 20%,
      40% 95%,
      90% 55%,
      15% 65%;
  }

  60% {
    background-position:
      60% 10%,
      100% 45%,
      90% 75%,
      20% 20%,
      45% 90%,
      75% 30%;
  }

  75% {
    background-position:
      15% 70%,
      95% 65%,
      45% 10%,
      75% 85%,
      20% 50%,
      95% 25%;
  }

  90% {
    background-position:
      70% 35%,
      110% 15%,
      20% 65%,
      55% 40%,
      80% 20%,
      35% 80%;
  }

  100% {
    background-position:
      20% 30%,
      80% 20%,
      30% 80%,
      90% 90%,
      50% 50%,
      50% 90%;
  }
}
/*--------------------*/

/* MAIN MENU */
.blur-bg {
    backdrop-filter: blur(6px);
  	-webkit-backdrop-filter: blur(6px); /* nécessaire pour Safari */
}

/* FOOTER */
.copyright {
    font-size:0.95rem;
}
.elementor .cs-footer-menu .menu-item{
    padding:0!important;
    background-color:transparent!important;
    border-radius:0!important;
}
/*--------------------*/