.elementor-6 .elementor-element.elementor-element-61ef888{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-6 .elementor-element.elementor-element-5e0f954 .elementor-wrapper{--video-aspect-ratio:1.77777;filter:brightness( 124% ) contrast( 116% ) saturate( 200% ) blur( 0px ) hue-rotate( 0deg );}.elementor-6 .elementor-element.elementor-element-53903af{margin:-520px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 30px;}.elementor-6 .elementor-element.elementor-element-e6837e3{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-7c53972{width:100%;max-width:100%;top:0px;}body:not(.rtl) .elementor-6 .elementor-element.elementor-element-7c53972{left:0px;}body.rtl .elementor-6 .elementor-element.elementor-element-7c53972{right:0px;}.elementor-6 .elementor-element.elementor-element-bddad86{--display:flex;--min-height:480px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-bddad86:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-bddad86 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0B1B25 0%, #07131C 100%);}.elementor-6 .elementor-element.elementor-element-3eec873{--display:flex;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-a9496ea{margin:0px 00px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 100px 0px 0px;}.elementor-6 .elementor-element.elementor-element-98a0180{--display:flex;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-486d32a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-486d32a:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-486d32a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #07131C 0%, #0B1B25 100%);}@media(min-width:768px){.elementor-6 .elementor-element.elementor-element-61ef888{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-53903af */.hl-hero{
  --gold:#C1A243;
  --white: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);

  max-width: min(720px, 92vw);
  padding: 0;
}

/* TITRE */
.hl-h1{
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 18px);

  font-weight: 750;
  font-size: clamp(40px, 6vw, 84px);
  letter-spacing: -0.03em;
  line-height: .95;
  color: var(--white);
  text-transform: uppercase;

  /* lisibilité premium */
  text-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.25);
}

/* séparateur : micro accent or, pas un “effet” */
.hl-h1__sep{
  width: clamp(22px, 3vw, 44px);
  height: 1.05em;
  position: relative;
  transform: translateY(.02em);
}
.hl-h1__sep::before{
  content:"";
  position:absolute;
  left:50%;
  top:14%;
  transform:translateX(-50%);
  width: 2px;
  height: 72%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(193,162,67,.12), rgba(193,162,67,.95), rgba(193,162,67,.10));
  box-shadow:
    0 0 0 1px rgba(193,162,67,.14),
    0 12px 34px rgba(193,162,67,.16);
}

/* sous-titre */
.hl-p{
  margin: 12px 0 0;
  max-width: 56ch;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.5;
  color: var(--muted);
  text-shadow: 0 14px 50px rgba(0,0,0,.55);
}
.hl-p__muted{ color: rgba(255,255,255,.58); }

/* boutons */
.hl-actions{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.hl-btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  font-weight: 650;
  text-decoration:none;
  letter-spacing: .01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hl-btn--gold{
  color: rgba(10,12,16,.92);
  background: linear-gradient(180deg, rgba(193,162,67,1), rgba(193,162,67,.78));
  border: 1px solid rgba(193,162,67,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.38), 0 16px 50px rgba(193,162,67,.18);
}
.hl-btn--ghost{
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hl-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.hl-btn--gold:hover{
  box-shadow: 0 22px 80px rgba(0,0,0,.45), 0 20px 70px rgba(193,162,67,.22);
}

/* mobile */
@media (max-width: 520px){
  .hl-actions{ gap: 8px; }
  .hl-btn{ height: 42px; padding: 0 14px; }
}
/* ===== TYPEWRITER (CSS ONLY) =====
   Usage:
   - Ajoute la classe "hl-type" sur ton H1 (Elementor > Avancé > Classes CSS)
   - Ajuste --chars pour correspondre au nombre de caractères (espaces inclus)
*/

.hl-type{
  --chars: 70;               /* <== mets ici le nombre de caractères */
  --dur: 2.05s;
  --delay: .25s;
  --caret: rgba(193,162,67,.95);

  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;

  /* Le "typing" */
  width: 0;
  animation:
    hlTyping var(--dur) steps(var(--chars), end) var(--delay) forwards,
    hlCaret .7s step-end infinite var(--delay);

  /* Curseur */
  border-right: 2px solid var(--caret);
  padding-right: .12em;

  /* Lisibilité sur vidéo */
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Variante sans curseur (si tu veux plus premium) */
.hl-type--no-caret{
  border-right: 0;
  padding-right: 0;
  animation:
    hlTyping var(--dur) steps(var(--chars), end) var(--delay) forwards;
}

@keyframes hlTyping{
  to { width: calc(var(--chars) * 1ch); }
}

@keyframes hlCaret{
  50% { border-color: transparent; }
}

/* Respect des préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){
  .hl-type, .hl-type--no-caret{
    width: auto;
    border-right: 0;
    animation: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7c53972 */.elementor-6 .elementor-element.elementor-element-7c53972{
  --topRGB: 7 23 33;
  --botRGB: 6 16 24;
  --midRGB: 8 26 34;

  --gold: 224 179 90;
  --cyan: 90 210 255;
  --violet: 168 120 255;

  --h: clamp(90px, 7.5vw, 150px);

  height: var(--h);
  margin-top: calc(var(--h) / -2);
  margin-bottom: calc(var(--h) / -2);

  position: relative;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;

  background: transparent;

  /* kill les paddings Elementor qui te créent une bande */
  padding: 0 !important;
}

.elementor-6 .elementor-element.elementor-element-7c53972 .e-con-inner{ padding:0 !important; }

.elementor-6 .elementor-element.elementor-element-7c53972{
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.70) 18%,
    #000 50%,
    rgba(0,0,0,.70) 82%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.70) 18%,
    #000 50%,
    rgba(0,0,0,.70) 82%,
    transparent 100%);
}

/* base blend doux */
.elementor-6 .elementor-element.elementor-element-7c53972::before{
  content:"";
  position:absolute; inset:0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(var(--topRGB), .00) 0%,
      rgba(var(--midRGB), .25) 35%,
      rgba(var(--midRGB), .38) 50%,
      rgba(var(--midRGB), .25) 65%,
      rgba(var(--botRGB), .00) 100%),
    radial-gradient(700px 140px at 50% 56%,
      rgba(0,0,0,.55),
      transparent 72%);
  filter: blur(6px);
}

/* étoiles */
.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-stars{
  position:absolute; inset:-30%;
  z-index: 2;
  opacity: .65;
  mix-blend-mode: screen;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.60) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.25) 0 .8px, transparent 2px),
    radial-gradient(circle, rgba(var(--gold), .55) 0 1px, transparent 2px);

  background-size: 210px 180px, 320px 290px, 520px 460px, 680px 610px;
  background-position: 10px 20px, 140px 80px, 60px 180px, 220px 40px;

  filter: blur(.15px);
  animation: jdStarsDrift 30s linear infinite, jdTwinkle 5.2s ease-in-out infinite;
}

.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-stars.s2{
  opacity: .35;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 3px),
    radial-gradient(circle, rgba(var(--cyan), .22) 0 1px, transparent 3px);
  background-size: 420px 380px, 760px 680px, 980px 880px;
  animation-duration: 46s, 6.8s;
  filter: blur(.35px);
}

/* nébuleuse */
.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-nebula{
  position:absolute; inset:-45%;
  z-index: 3;
  opacity: .75;
  mix-blend-mode: screen;

  background:
    radial-gradient(480px 260px at 22% 52%, rgba(var(--cyan), .18), transparent 74%),
    radial-gradient(540px 300px at 76% 48%, rgba(var(--violet), .14), transparent 76%),
    radial-gradient(320px 160px at 50% 58%, rgba(var(--gold), .22), transparent 72%),
    conic-gradient(from 220deg at 50% 55%,
      rgba(var(--cyan), .12),
      rgba(var(--gold), .18),
      rgba(var(--violet), .10),
      rgba(var(--cyan), .10));

  filter: blur(18px) saturate(128%) contrast(112%);
  transform: rotate(-7deg) scale(1.12);
  animation: jdNebulaFloat 14s ease-in-out infinite;
}

/* brume */
.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-fog{
  position:absolute; inset:-35%;
  z-index: 4;
  opacity: .55;
  mix-blend-mode: screen;

  background:
    radial-gradient(760px 160px at 50% 56%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(640px 140px at 46% 60%, rgba(255,255,255,.06), transparent 72%),
    radial-gradient(600px 130px at 54% 60%, rgba(255,255,255,.05), transparent 74%),
    repeating-radial-gradient(circle at 50% 58%,
      rgba(255,255,255,.025) 0 6px,
      transparent 6px 16px);

  filter: blur(10px);
  animation: jdFogPulse 6.5s ease-in-out infinite;
}

/* météores */
.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-meteor{
  position:absolute;
  left:-40%;
  z-index: 5;

  height: 2px;
  width: 260px;
  border-radius: 999px;

  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.18) 18%,
    rgba(255,255,255,.85) 48%,
    rgba(var(--gold), .55) 62%,
    transparent 100%);

  filter: drop-shadow(0 0 14px rgba(255,255,255,.20));
  opacity: 0;
  transform: rotate(-18deg);
  animation: jdMeteor 8.5s linear infinite;
}

.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-meteor.m1{ top: 30%; animation-delay: 1.8s; transform: rotate(-18deg); width: 240px; }
.elementor-6 .elementor-element.elementor-element-7c53972 .jd-seam-meteor.m2{ top: 62%; animation-delay: 5.2s; transform: rotate(-14deg); width: 300px; }

@keyframes jdStarsDrift{
  from { background-position: 10px 20px, 140px 80px, 60px 180px, 220px 40px; }
  to   { background-position: -860px 320px, -520px 220px, -740px 420px, -680px 260px; }
}
@keyframes jdTwinkle{ 0%,100% { opacity: .55; } 50% { opacity: .80; } }
@keyframes jdNebulaFloat{
  0%   { transform: rotate(-8deg) scale(1.12) translateX(-1.2%); opacity: .70; }
  50%  { transform: rotate(-4deg) scale(1.16) translateX( 1.2%); opacity: .82; }
  100% { transform: rotate(-8deg) scale(1.12) translateX(-1.2%); opacity: .70; }
}
@keyframes jdFogPulse{
  0%,100% { opacity: .45; transform: translateY(-1%); }
  50%     { opacity: .62; transform: translateY( 1%); }
}
@keyframes jdMeteor{
  0%   { transform: translateX(-10%) translateY(0) rotate(-18deg); opacity: 0; }
  8%   { opacity: .85; }
  32%  { opacity: .65; }
  50%  { opacity: 0; }
  100% { transform: translateX(180vw) translateY(44px) rotate(-18deg); opacity: 0; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a9496ea *//* =========================================
   HL PIPELINE 2 — compact / no frame
   - pas de "bloc" qui délimite tout
   - mini cartes petites
   - doré: points + corners + sheen discret
   - animations: ultra subtiles (pas de déplacement)
========================================= */

.hl-pipeline2{
  --gold: rgba(231,199,104,1);
  --goldSoft: rgba(231,199,104,.18);
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(170,210,235,.10);

  position: relative;
  padding: 6px 0 6px 22px;   /* pas de background = pas de démarcation */
  display: flex;
  flex-direction: column;
  gap: 12px;
  isolation: isolate;
}

/* ligne verticale TRÈS discrète (pas une "séparation") */
.hl-pipeline2::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(170,210,235,0) 0%,
    var(--line) 22%,
    rgba(170,210,235,.08) 78%,
    rgba(170,210,235,0) 100%
  );
  opacity: .55;
}

/* step */
.hl-pipeline2 .hl-step{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* bullets dorés (reviennent) */
.hl-pipeline2 .hl-dot{
  width: 10px;
  height: 10px;
  margin-top: 12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--gold) 0%,
    rgba(231,199,104,.28) 55%,
    rgba(231,199,104,0) 74%
  );
  box-shadow: 0 0 14px var(--goldSoft);
  opacity: .95;

  /* animation ultra discrète (pas de move) */
  animation: hlDotTwinkle 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 180ms);
}

@keyframes hlDotTwinkle{
  0%,100%{ filter: brightness(1); opacity:.85; }
  50%    { filter: brightness(1.15); opacity:1; }
}

/* mini cartes — PLUS PETITES */
.hl-pipeline2 .hl-card{
  width: min(360px, 100%);
  padding: 12px 14px;
  border-radius: 16px;

  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 46px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  overflow: hidden;
}

/* texte (fini les titres énormes) */
.hl-pipeline2 .hl-h{
  color: var(--ink);
  font-weight: 760;
  font-size: 16px;
  letter-spacing: .2px;
  margin: 0 0 6px 0;
}
.hl-pipeline2 .hl-p{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

/* détails dorés premium: coins futuristes (très fins) */
.hl-pipeline2 .hl-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .65;

  background:
    /* top-left corner */
    linear-gradient(to right, rgba(231,199,104,.35), rgba(231,199,104,0)) 14px 10px / 44px 1px no-repeat,
    linear-gradient(to bottom, rgba(231,199,104,.30), rgba(231,199,104,0)) 14px 10px / 1px 44px no-repeat,

    /* bottom-right corner */
    linear-gradient(to left, rgba(231,199,104,.28), rgba(231,199,104,0)) calc(100% - 14px) calc(100% - 10px) / 44px 1px no-repeat,
    linear-gradient(to top, rgba(231,199,104,.22), rgba(231,199,104,0)) calc(100% - 14px) calc(100% - 10px) / 1px 44px no-repeat;
}

/* sheen (brillance) dorée — animation CLEAN (pas de déplacement du layout) */
.hl-pipeline2 .hl-card::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  pointer-events:none;

  background: linear-gradient(115deg,
    rgba(231,199,104,0) 35%,
    rgba(231,199,104,.10) 48%,
    rgba(231,199,104,0) 60%
  );

  opacity: .35;
  transform: translateX(-22%) translateY(-10%);
  animation: hlSheen 5.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 260ms);
}

@keyframes hlSheen{
  0%   { transform: translateX(-28%) translateY(-12%); opacity:.14; }
  45%  { opacity:.22; }
  60%  { transform: translateX(18%) translateY(10%); opacity:.18; }
  100% { transform: translateX(18%) translateY(10%); opacity:.14; }
}

/* hover: plus gold mais sans "gros changement" */
.hl-pipeline2 .hl-card:hover{
  border-color: rgba(231,199,104,.14);
  box-shadow: 0 18px 58px rgba(0,0,0,.32);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* mobile */
@media (max-width: 768px){
  .hl-pipeline2{ padding-left: 18px; }
  .hl-pipeline2::before{ left: 5px; }
  .hl-pipeline2 .hl-card{ width: 100%; }
}

/* option: si tu veux enlever toute animation d'un coup */
.hl-pipeline2.no-anim .hl-dot,
.hl-pipeline2.no-anim .hl-card::after{
  animation: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5c5fda6 *//* ====== Futuristic glass card (solo) ====== */
.hl-card{
  position: relative;
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 34px);
  border-radius: 22px;
  text-decoration: none;

  background: rgba(11, 27, 37, .62);
  border: 1px solid rgba(231, 199, 104, .14);
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow: hidden;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Wireframe discret (pas de "séparation") */
.hl-card::before{
  content:"";
  position:absolute;
  inset:-25% -15%;
  pointer-events:none;
  opacity: .20;

  background-image:
    radial-gradient(1100px 800px at 110% 55%,
      transparent 72%,
      rgba(170,210,235,.14) 72.3%,
      transparent 72.8%),
    radial-gradient(1100px 800px at 110% 55%,
      transparent 80%,
      rgba(170,210,235,.10) 80.3%,
      transparent 80.8%),
    linear-gradient(140deg, rgba(170,210,235,.10) 0%, rgba(170,210,235,0) 45%);
  filter: blur(.25px);
  animation: hlWireDrift 14s ease-in-out infinite;
}

@keyframes hlWireDrift{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(-18px,10px,0); }
  100%{ transform: translate3d(0,0,0); }
}

/* Glow doré doux (futuriste mais pro) */
.hl-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 18% 10%, rgba(231,199,104,.14), rgba(231,199,104,0) 65%),
    radial-gradient(520px 260px at 68% 40%, rgba(231,199,104,.10), rgba(231,199,104,0) 70%);
  opacity: .9;
}

/* contenu au-dessus des FX */
.hl-card > *{
  position: relative;
  z-index: 2;
}

/* top row */
.hl-card-top{
  display:flex;
  gap:10px;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 10px;
}

.hl-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(231, 199, 104, .85);
}

.hl-tag{
  font-size: 12px;
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 999px;
}

/* title + text */
.hl-title{
  margin: 0 0 10px 0;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.05;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
}

.hl-desc{
  margin: 0;
  max-width: 72ch;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}

/* pills */
.hl-pills{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  margin-top: 16px;
}

.hl-pill{
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(8, 24, 33, .55);
  border: 1px solid rgba(231, 199, 104, .12);
  padding: 8px 12px;
  border-radius: 999px;
}

/* cta */
.hl-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 999px;

  color: rgba(231, 199, 104, .92);
  border: 1px solid rgba(231, 199, 104, .22);
  background: rgba(231, 199, 104, .06);
}

.hl-arrow{
  transition: transform .2s ease;
}

/* hover */
.hl-card:hover{
  transform: translateY(-4px);
  border-color: rgba(231, 199, 104, .28);
  box-shadow: 0 34px 90px rgba(0,0,0,.55);
}
.hl-card:hover .hl-arrow{
  transform: translateX(4px);
}
.hl-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(231,199,104,.28), 0 34px 90px rgba(0,0,0,.55);
}
/* ===========================
   CTA FUTURISTE (hl-cta)
=========================== */
.hl-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;

  /* bordure gradient sans bricolage */
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(8,24,33,.55), rgba(8,24,33,.35)) padding-box,
    linear-gradient(120deg,
      rgba(231,199,104,.10),
      rgba(231,199,104,.55),
      rgba(170,210,235,.18),
      rgba(231,199,104,.25)
    ) border-box;

  color: rgba(231,199,104,.95);
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(231,199,104,.10) inset;

  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}

/* Shine sweep (se déclenche au hover) */
.hl-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index: 0;

  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(231,199,104,.22) 50%,
    rgba(255,255,255,.08) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  opacity: .85;
}

/* Pulse ring (une seule pulsation au hover) */
.hl-cta::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events:none;
  z-index: 0;
  box-shadow: 0 0 0 0 rgba(231,199,104,.0);
  opacity: 0;
}

/* Contenu au-dessus des FX */
.hl-cta > *{
  position: relative;
  z-index: 1;
}

.hl-arrow{
  display:inline-block;
  transition: transform .18s ease;
}

/* Hover déclenché quand tu hover la carte (plus naturel) */
.hl-card:hover .hl-cta{
  transform: translateY(-2px);
  filter: saturate(112%);
  box-shadow:
    0 18px 44px rgba(0,0,0,.45),
    0 0 18px rgba(231,199,104,.18),
    0 0 0 1px rgba(231,199,104,.16) inset;
}

.hl-card:hover .hl-cta::before{
  animation: hlShine 1.05s ease forwards;
}

.hl-card:hover .hl-cta::after{
  animation: hlPulse 1.0s ease forwards;
}

.hl-card:hover .hl-arrow{
  transform: translateX(6px);
}

@keyframes hlShine{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes hlPulse{
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(231,199,104,.0); }
  35%  { opacity: 1; box-shadow: 0 0 0 10px rgba(231,199,104,.14); }
  100% { opacity: 0; box-shadow: 0 0 0 22px rgba(231,199,104,0); }
}


/* ===========================
   TEXTE FUTURISTE (title + desc)
   (sheen + underline animé)
=========================== */
.hl-title{
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 26px rgba(0,0,0,.35);
}

/* Underline tech */
.hl-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom: -10px;
  width: 86px;
  height: 2px;
  border-radius: 2px;

  background: linear-gradient(90deg,
    rgba(231,199,104,0) 0%,
    rgba(231,199,104,.65) 40%,
    rgba(170,210,235,.22) 70%,
    rgba(231,199,104,0) 100%
  );
  opacity: .75;
  transform: translateZ(0);
}

/* Sheen sur le titre au hover (subtil, pas flashy) */
.hl-card:hover .hl-title{
  background: linear-gradient(90deg,
    rgba(255,255,255,.92) 0%,
    rgba(231,199,104,.95) 45%,
    rgba(255,255,255,.92) 90%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: hlTitleSheen 1.2s ease;
}

.hl-card:hover .hl-title::after{
  animation: hlUnderline 1.2s ease;
}

@keyframes hlTitleSheen{
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

@keyframes hlUnderline{
  0%   { width: 86px; opacity: .55; }
  45%  { width: 130px; opacity: .95; }
  100% { width: 86px; opacity: .75; }
}

/* Description: micro lift + lisibilité */
.hl-desc{
  transition: transform .22s ease, color .22s ease;
}

.hl-card:hover .hl-desc{
  transform: translateY(-1px);
  color: rgba(255,255,255,.78);
}

/* Kicker: léger glow au hover */
.hl-kicker{
  transition: filter .22s ease, opacity .22s ease;
}
.hl-card:hover .hl-kicker{
  filter: drop-shadow(0 0 10px rgba(231,199,104,.18));
  opacity: .95;
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  .hl-card:hover .hl-cta,
  .hl-card:hover .hl-cta::before,
  .hl-card:hover .hl-cta::after,
  .hl-card:hover .hl-title,
  .hl-card:hover .hl-title::after{
    animation: none !important;
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-98a0180 *//* ===============================
   HL ENTER (entrée pro, futuriste, clean)
   Classe: hl-enter
================================ */

/* reset : on annule les vieilles animations qui te cassent tout */
.hl-enter, .hl-enter *{
  animation: none !important;
}

/* entrée de la carte (effet “lift” + profondeur) */
.hl-enter{
  animation: hlCardReveal .85s cubic-bezier(.2,.9,.2,1) both !important;
  transform-origin: 50% 65%;
  will-change: transform, opacity;
}

/* apparition des éléments internes (stagger propre, sans blur) */
.hl-enter .hl-kicker,
.hl-enter .hl-tag,
.hl-enter .hl-title,
.hl-enter .hl-desc,
.hl-enter .hl-pill,
.hl-enter .hl-cta{
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
  animation: hlItemReveal .70s cubic-bezier(.2,.9,.2,1) both !important;
}

/* timings (ordre d’apparition) */
.hl-enter .hl-kicker{ animation-delay: .18s !important; }
.hl-enter .hl-tag{   animation-delay: .24s !important; }
.hl-enter .hl-title{ animation-delay: .30s !important; }
.hl-enter .hl-desc{  animation-delay: .38s !important; }
.hl-enter .hl-pill:nth-child(1){ animation-delay: .46s !important; }
.hl-enter .hl-pill:nth-child(2){ animation-delay: .52s !important; }
.hl-enter .hl-pill:nth-child(3){ animation-delay: .58s !important; }
.hl-enter .hl-cta{   animation-delay: .66s !important; }

/* petit scan “premium” sur le titre (pas glitch) */
.hl-enter .hl-title{
  position: relative;
}
.hl-enter .hl-title::before{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top: 55%;
  height: 2px;
  pointer-events:none;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(231,199,104,0) 0%,
    rgba(231,199,104,.55) 45%,
    rgba(170,210,235,.22) 55%,
    rgba(231,199,104,0) 100%
  );
  transform: translateX(-120%);
  animation: hlScanLine 1.0s ease both !important;
  animation-delay: .38s !important;
}

@keyframes hlCardReveal{
  0%{
    opacity: 0;
    transform: perspective(900px) translateY(18px) rotateX(7deg) scale(.985);
  }
  65%{
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(0deg) scale(1);
  }
  100%{
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(0deg) scale(1);
  }
}

@keyframes hlItemReveal{
  from{ opacity: 0; transform: translateY(14px); }
  to  { opacity: 1; transform: translateY(0); }
}

@keyframes hlScanLine{
  0%   { opacity: 0; transform: translateX(-120%); }
  20%  { opacity: .8; }
  100% { opacity: 0; transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .hl-enter, .hl-enter *{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bddad86 *//* ===============================
   HL GALAXY (vrai fond, brume + étoiles, sans pixels)
   Classe: hl-galaxy
================================ */
.hl-galaxy{
  position: relative !important;
  overflow: hidden !important;
  background: #07131C !important;
}

/* Brume / nebula (smooth, pas de pattern) */
.hl-galaxy::before{
  content:"";
  position:absolute;
  inset:-30% -30%;
  pointer-events:none;
  z-index: 0;
  opacity: .75;

  background:
    radial-gradient(900px 520px at 18% 28%, rgba(60,110,160,.18), transparent 62%),
    radial-gradient(760px 460px at 72% 32%, rgba(231,199,104,.12), transparent 66%),
    radial-gradient(880px 520px at 55% 78%, rgba(110,85,170,.14), transparent 62%),
    radial-gradient(1200px 760px at 45% 55%, rgba(6,18,26,.85), transparent 70%);

  filter: blur(22px) saturate(110%);
  transform: translate3d(0,0,0);
  animation: hlFogPulse 10s ease-in-out infinite;
}

/* Étoiles (réelles, mais statiques) + twinkle léger (opacity only) */
.hl-galaxy::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  opacity: .55;

  /* points irréguliers = pas de grille, pas de “pixels qui bougent” */
  background-image:
    radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 16% 62%, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 34%, rgba(170,210,235,.40) 50%, transparent 52%),
    radial-gradient(1px 1px at 28% 78%, rgba(255,255,255,.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 34% 26%, rgba(231,199,104,.28) 50%, transparent 52%),
    radial-gradient(1px 1px at 41% 58%, rgba(255,255,255,.42) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 14%, rgba(170,210,235,.32) 50%, transparent 52%),
    radial-gradient(1px 1px at 53% 82%, rgba(255,255,255,.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 61% 42%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 20%, rgba(231,199,104,.22) 50%, transparent 52%),
    radial-gradient(1px 1px at 74% 70%, rgba(255,255,255,.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 82% 38%, rgba(170,210,235,.30) 50%, transparent 52%),
    radial-gradient(1px 1px at 90% 62%, rgba(255,255,255,.45) 50%, transparent 52%);

  filter: blur(.15px);
  animation: hlTwinkle 6s ease-in-out infinite;
}

/* Contenu au-dessus */
.hl-galaxy > *{
  position: relative !important;
  z-index: 2 !important;
}

@keyframes hlFogPulse{
  0%   { opacity: .65; transform: scale(1) translate3d(0,0,0); }
  50%  { opacity: .78; transform: scale(1.02) translate3d(-10px,8px,0); }
  100% { opacity: .65; transform: scale(1) translate3d(0,0,0); }
}

/* Twinkle = juste variation d’opacité (pas de mouvement) */
@keyframes hlTwinkle{
  0%,100% { opacity: .45; }
  50%     { opacity: .62; }
}

@media (prefers-reduced-motion: reduce){
  .hl-galaxy::before,
  .hl-galaxy::after{ animation: none !important; }
}/* End custom CSS */