<style id="elementor-post-11711">.elementor-11711 .elementor-element.elementor-element-3ac0aec{--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-11711 .elementor-element.elementor-element-ba73242{--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;--margin-top:-16px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11711 .elementor-element.elementor-element-4bde54f{--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;--margin-top:-69px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-24px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-11711 .elementor-element.elementor-element-3ac0aec{--margin-top:-11px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11711 .elementor-element.elementor-element-4bde54f{--margin-top:-43px;--margin-bottom:-37px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-64dd825 *//* =========================================================
   iNrCy — HERO FINAL XL
   4 ÉTAPES + TITRE + DOUBLE CARD + BANDEAU TARIF
   Version desktop agrandie / plus lisible
   Elementor / WordPress ready
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

#inrcyHeroSteps,
#inrcyHeroSteps *{
  box-sizing:border-box !important;
}

#inrcyHeroSteps{
  --navy:#07142B;
  --panel:#0B1933;
  --panel2:#0E1D3A;

  --white:#FFFFFF;
  --muted:#94A3BE;

  --orange:#FF7437;
  --pink:#FF2F91;
  --purple:#A62FFF;
  --blue:#178CFF;
  --green:#35E28F;

  --gradient:linear-gradient(
    105deg,
    var(--orange) 0%,
    var(--pink) 34%,
    var(--purple) 67%,
    var(--blue) 100%
  );

  position:relative !important;

  width:100% !important;
  margin:0 !important;

  overflow:hidden !important;

  padding:
    44px
    24px
    68px !important;

  background:#07142B !important;

  color:#fff !important;

  font-family:
    Poppins,
    Inter,
    Arial,
    sans-serif !important;
}


/* =========================================================
   FOND GRILLE
   ========================================================= */

#inrcyHeroSteps::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:

    linear-gradient(
      rgba(255,255,255,.033) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.033) 1px,
      transparent 1px
    );

  background-size:
    38px 48px;
}


/* HALO BAS */

#inrcyHeroSteps::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-155px;

  width:1000px;
  height:250px;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    linear-gradient(
      90deg,
      rgba(255,116,55,.09),
      rgba(255,47,145,.13),
      rgba(166,47,255,.18),
      rgba(23,140,255,.15)
    );

  filter:blur(105px);

  pointer-events:none;
}


/* =========================================================
   WRAPPER
   ========================================================= */

#inrcyHeroSteps .hs-inner{
  position:relative !important;

  z-index:2 !important;

  width:100% !important;

  max-width:1700px !important;

  margin:0 auto !important;
}


/* =========================================================
   TITRE GLOBAL
   ========================================================= */

#inrcyHeroSteps .hs-hero-heading{
  position:relative !important;

  z-index:6 !important;

  width:100% !important;

  max-width:1450px !important;

  margin:
    0 auto
    50px !important;

  text-align:center !important;
}


#inrcyHeroSteps .hs-hero-heading h1{
  margin:0 !important;

  font-size:
    clamp(44px,3.5vw,66px) !important;

  line-height:1.03 !important;

  letter-spacing:-.045em !important;

  font-weight:820 !important;
}


#inrcyHeroSteps .hs-title-line{
  position:relative !important;

  display:block !important;

  width:max-content !important;

  max-width:100% !important;

  margin-left:auto !important;
  margin-right:auto !important;

  padding:
    0 18px !important;

  white-space:nowrap !important;
}


#inrcyHeroSteps .hs-title-line--white{
  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


#inrcyHeroSteps .hs-title-line--shine{
  position:relative !important;

  display:block !important;

  margin-top:8px !important;

  padding-left:18px !important;
  padding-right:32px !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      90deg,
      #FF7437 0%,
      #FF3F96 28%,
      #B43CFF 58%,
      #4F7DFF 82%,
      #6BCFFF 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;

  filter:
    drop-shadow(
      0 0 18px
      rgba(166,47,255,.16)
    ) !important;
}


/* REFLET DU TITRE */

#inrcyHeroSteps .hs-title-line--shine::after{
  content:"";

  position:absolute;

  top:-15%;
  left:-28%;

  width:18%;
  height:135%;

  transform:skewX(-22deg);

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 20%,
      rgba(255,255,255,.80) 50%,
      rgba(255,255,255,.12) 80%,
      rgba(255,255,255,0) 100%
    );

  mix-blend-mode:screen;

  filter:blur(1px);

  animation:
    hsTitleShine
    3.4s
    ease-in-out
    infinite;
}


@keyframes hsTitleShine{

  0%{
    left:-28%;
    opacity:0;
  }

  10%{
    opacity:1;
  }

  46%{
    left:112%;
    opacity:1;
  }

  60%{
    left:112%;
    opacity:0;
  }

  100%{
    left:112%;
    opacity:0;
  }

}


/* =========================================================
   FLOW DES 4 ÉTAPES
   ========================================================= */

#inrcyHeroSteps .hs-flow{
  position:relative !important;

  display:grid !important;

  grid-template-columns:
    210px
    325px
    370px
    390px !important;

  gap:42px !important;

  justify-content:center !important;

  align-items:center !important;

  min-height:850px !important;
}


/* =========================================================
   CONNEXIONS
   ========================================================= */

#inrcyHeroSteps .hs-connections{
  position:absolute !important;

  inset:0 !important;

  z-index:1 !important;

  width:100% !important;
  height:100% !important;

  overflow:visible !important;

  pointer-events:none !important;
}


#inrcyHeroSteps .hs-line{
  fill:none !important;

  stroke-width:2.2 !important;

  stroke-linecap:round !important;

  stroke-dasharray:9 8 !important;

  filter:
    drop-shadow(
      0 0 5px
      rgba(166,47,255,.75)
    );

  animation:
    hsDash
    1.25s
    linear
    infinite;
}


@keyframes hsDash{

  to{
    stroke-dashoffset:-34;
  }

}


/* =========================================================
   TITRES DES 4 ÉTAPES
   ========================================================= */

#inrcyHeroSteps .hs-step{
  position:relative !important;

  z-index:4 !important;
}


#inrcyHeroSteps .hs-step-head{
  display:flex !important;

  align-items:flex-start !important;

  gap:10px !important;

  margin:
    0 0 18px !important;
}


#inrcyHeroSteps .hs-step-num{
  flex:none !important;

  margin-top:-2px !important;

  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;

  font-size:23px !important;

  line-height:1.2 !important;

  font-weight:900 !important;
}


#inrcyHeroSteps .hs-step-title{
  min-width:0 !important;
}


#inrcyHeroSteps .hs-step-title > strong{
  display:block !important;

  color:#fff !important;

  font-size:16px !important;

  line-height:1.35 !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-step-sub{
  display:block !important;

  margin-top:6px !important;

  color:var(--muted) !important;

  font-size:10.5px !important;

  line-height:1.5 !important;

  font-weight:500 !important;
}


/* =========================================================
   ÉTAPE 1 — SOURCE
   ========================================================= */

#inrcyHeroSteps .hs-source-wrap{
  width:210px !important;
}


#inrcyHeroSteps .hs-source{
  width:210px !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(189,56,255,.52) !important;

  border-radius:22px !important;

  background:#09162E !important;

  box-shadow:

    0 22px 46px
    rgba(0,0,0,.28),

    0 0 32px
    rgba(183,49,255,.09) !important;
}


#inrcyHeroSteps .hs-source-media{
  width:100% !important;

  overflow:hidden !important;
}


#inrcyHeroSteps .hs-source-media img{
  display:block !important;

  width:100% !important;

  height:195px !important;

  max-width:none !important;

  object-fit:cover !important;
}


#inrcyHeroSteps .hs-source-copy{
  padding:17px !important;
}


#inrcyHeroSteps .hs-source-copy strong{
  display:block !important;

  color:#fff !important;

  font-size:13.5px !important;

  line-height:1.4 !important;

  font-weight:750 !important;
}


#inrcyHeroSteps .hs-source-copy span{
  display:block !important;

  margin-top:9px !important;

  color:#8897B2 !important;

  font-size:9.7px !important;

  line-height:1.55 !important;
}


/* =========================================================
   ÉTAPE 2 — TÉLÉPHONE
   ========================================================= */

#inrcyHeroSteps .hs-phone-wrap{
  width:325px !important;
}


#inrcyHeroSteps .hs-phone{
  position:relative !important;

  width:300px !important;

  height:615px !important;

  margin:0 auto !important;

  padding:10px !important;

  border-radius:49px !important;

  background:
    linear-gradient(
      145deg,
      #747D8F,
      #111725 18%,
      #515B6D 48%,
      #111725 76%
    ) !important;

  box-shadow:

    0 38px 75px
    rgba(0,0,0,.50),

    0 0 48px
    rgba(80,72,255,.09) !important;

  transform:
    perspective(1100px)
    rotateY(-4deg)
    rotateZ(-1.5deg) !important;

  transition:
    transform .2s ease !important;
}


#inrcyHeroSteps .hs-screen{
  position:relative !important;

  width:100% !important;
  height:100% !important;

  overflow:hidden !important;

  padding:
    29px
    16px
    16px !important;

  border-radius:40px !important;

  background:
    linear-gradient(
      180deg,
      #071228,
      #08142B
    ) !important;
}


/* DYNAMIC ISLAND */

#inrcyHeroSteps .hs-island{
  position:absolute !important;

  top:10px !important;
  left:50% !important;

  width:86px !important;
  height:23px !important;

  transform:translateX(-50%) !important;

  border-radius:999px !important;

  background:#02040A !important;
}


/* HEADER PHONE */

#inrcyHeroSteps .hs-phone-head{
  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  margin-top:10px !important;

  color:#fff !important;

  font-size:12.5px !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-brand{
  display:flex !important;

  align-items:center !important;

  gap:9px !important;
}


#inrcyHeroSteps .hs-brand-mark{
  width:31px !important;

  height:31px !important;

  flex:
    0 0 31px !important;

  display:grid !important;

  place-items:center !important;

  border-radius:9px !important;

  overflow:hidden !important;
}


#inrcyHeroSteps .hs-brand-mark img{
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:contain !important;
}


#inrcyHeroSteps .hs-brand-name{
  color:#fff !important;

  font-size:12.5px !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-phone-menu{
  color:#7787A5 !important;

  letter-spacing:1px !important;
}


/* PHOTO TEL */

#inrcyHeroSteps .hs-phone-photo{
  display:block !important;

  width:100% !important;
  height:180px !important;

  max-width:none !important;

  margin-top:22px !important;

  object-fit:cover !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;

  border-radius:15px !important;
}


/* CHAMPS */

#inrcyHeroSteps .hs-field{
  margin-top:11px !important;

  padding:11px !important;

  border:
    1px solid
    rgba(255,255,255,.055) !important;

  border-radius:11px !important;

  background:
    rgba(255,255,255,.045) !important;
}


#inrcyHeroSteps .hs-field small{
  display:block !important;

  margin-bottom:4px !important;

  color:#6E7D98 !important;

  font-size:7.3px !important;

  font-weight:750 !important;
}


#inrcyHeroSteps .hs-field strong{
  display:block !important;

  color:#fff !important;

  font-size:10.4px !important;

  line-height:1.4 !important;

  font-weight:650 !important;
}


/* FORMATS */

#inrcyHeroSteps .hs-format-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4,1fr) !important;

  gap:7px !important;

  margin-top:11px !important;
}


#inrcyHeroSteps .hs-format{
  min-height:45px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  border-radius:9px !important;

  background:
    rgba(255,255,255,.045) !important;

  color:#8997B1 !important;

  font-size:7.5px !important;
}


#inrcyHeroSteps .hs-format b{
  display:block !important;

  margin-bottom:2px !important;

  color:#D4DCEC !important;

  font-size:11px !important;
}


/* BOUTON TÉLÉPHONE */

#inrcyHeroSteps .hs-publish{
  position:absolute !important;

  left:16px !important;
  right:16px !important;

  bottom:16px !important;

  height:54px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:7px !important;

  border-radius:14px !important;

  background:var(--gradient) !important;

  color:#fff !important;

  font-size:12px !important;

  font-weight:800 !important;

  box-shadow:
    0 14px 30px
    rgba(108,45,255,.25) !important;
}


/* HALO TEL */

#inrcyHeroSteps .hs-floor{
  position:absolute !important;

  left:50% !important;

  bottom:-6px !important;

  width:355px !important;
  height:80px !important;

  transform:translateX(-50%) !important;

  border:
    1px solid
    rgba(157,57,255,.55) !important;

  border-radius:50% !important;

  box-shadow:

    0 0 27px
    rgba(158,45,255,.34),

    inset 0 0 28px
    rgba(34,108,255,.19) !important;

  z-index:-1 !important;
}


/* PILL 12 CONTENUS */

#inrcyHeroSteps .hs-ai-pill{
  width:max-content !important;

  max-width:320px !important;

  margin:
    20px auto 0 !important;

  padding:
    10px 15px !important;

  border:
    1px solid
    rgba(166,47,255,.42) !important;

  border-radius:999px !important;

  background:
    rgba(11,25,51,.94) !important;

  color:#fff !important;

  font-size:9.5px !important;

  line-height:1.4 !important;

  font-weight:700 !important;

  text-align:center !important;

  box-shadow:
    0 0 26px
    rgba(166,47,255,.14) !important;
}


/* =========================================================
   ÉTAPE 3 — CANAUX
   ========================================================= */

#inrcyHeroSteps .hs-channels-wrap{
  width:370px !important;
}


#inrcyHeroSteps .hs-channel-list{
  display:flex !important;

  flex-direction:column !important;

  gap:7px !important;
}


#inrcyHeroSteps .hs-channel{
  width:370px !important;

  min-height:51px !important;

  display:grid !important;

  grid-template-columns:
    63px
    minmax(0,1fr)
    38px
    22px !important;

  align-items:center !important;

  gap:9px !important;

  padding:
    6px 9px !important;

  border:
    1px solid
    rgba(102,88,255,.31) !important;

  border-radius:13px !important;

  background:
    linear-gradient(
      90deg,
      #0B1933,
      #0A1730
    ) !important;

  opacity:.4 !important;

  transform:
    translateX(7px) !important;

  transition:
    opacity .38s ease,
    transform .38s ease,
    border-color .38s ease,
    box-shadow .38s ease !important;
}


#inrcyHeroSteps .hs-channel.active{
  opacity:1 !important;

  transform:
    translateX(0) !important;

  border-color:
    rgba(110,93,255,.56) !important;

  box-shadow:
    0 9px 22px
    rgba(0,0,0,.14) !important;
}


/* PHOTO CANAUX */

#inrcyHeroSteps .hs-thumb{
  width:63px !important;

  height:40px !important;

  overflow:hidden !important;

  border-radius:8px !important;

  border:
    1px solid
    rgba(255,255,255,.06) !important;
}


#inrcyHeroSteps .hs-thumb img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;

  object-fit:cover !important;
}


/* TEXTES CANAUX */

#inrcyHeroSteps .hs-channel-copy{
  min-width:0 !important;
}


#inrcyHeroSteps .hs-channel-copy strong{
  display:block !important;

  overflow:hidden !important;

  white-space:nowrap !important;

  text-overflow:ellipsis !important;

  color:#fff !important;

  font-size:10.2px !important;

  line-height:1.2 !important;

  font-weight:750 !important;
}


#inrcyHeroSteps .hs-channel-copy span{
  display:block !important;

  margin-top:3px !important;

  color:#8290AA !important;

  font-size:7.7px !important;

  line-height:1.2 !important;
}


/* =========================================================
   LOGOS CANAUX
   ========================================================= */

#inrcyHeroSteps .hs-logo{
  width:38px !important;
  height:38px !important;

  min-width:38px !important;
  max-width:38px !important;

  min-height:38px !important;
  max-height:38px !important;

  display:grid !important;

  place-items:center !important;

  overflow:hidden !important;

  border-radius:10px !important;

  background:#fff !important;
}


#inrcyHeroSteps .hs-logo svg{
  display:block !important;

  width:27px !important;
  height:27px !important;
}


#inrcyHeroSteps .hs-logo img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
}


#inrcyHeroSteps .hs-inrcy{
  padding:0 !important;

  background:transparent !important;
}


/* =========================================================
   STATUS
   ========================================================= */

#inrcyHeroSteps .hs-status{
  width:22px !important;

  height:22px !important;

  display:grid !important;

  place-items:center !important;

  border-radius:50% !important;

  background:
    rgba(53,226,143,.10) !important;

  color:var(--green) !important;

  font-size:10px !important;

  opacity:.15 !important;

  transform:scale(.6) !important;

  transition:.3s ease !important;
}


#inrcyHeroSteps .hs-channel.active .hs-status{
  opacity:1 !important;

  transform:scale(1) !important;
}


/* =========================================================
   PROGRESSION
   ========================================================= */

#inrcyHeroSteps .hs-progress{
  margin-top:16px !important;

  padding:
    13px 14px !important;

  border:
    1px solid
    rgba(166,47,255,.34) !important;

  border-radius:13px !important;

  background:
    rgba(11,25,51,.76) !important;
}


#inrcyHeroSteps .hs-progress-row{
  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:12px !important;
}


#inrcyHeroSteps .hs-progress-row strong{
  color:#fff !important;

  font-size:10.5px !important;

  font-weight:750 !important;
}


#inrcyHeroSteps .hs-percent{
  font-size:14px !important;

  font-weight:850 !important;

  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


#inrcyHeroSteps .hs-progress-track{
  width:100% !important;

  height:6px !important;

  margin-top:9px !important;

  overflow:hidden !important;

  border-radius:999px !important;

  background:
    rgba(255,255,255,.08) !important;
}


#inrcyHeroSteps .hs-progress-fill{
  width:0;

  height:100%;

  border-radius:999px;

  background:var(--gradient);

  transition:
    width .35s ease;
}


/* =========================================================
   ÉTAPE 4
   ========================================================= */

#inrcyHeroSteps .hs-performance-wrap{
  width:390px !important;
}


/* CARTES */

#inrcyHeroSteps .hs-manage-card,
#inrcyHeroSteps .hs-analytics-card{
  position:relative !important;

  width:100% !important;

  overflow:hidden !important;

  padding:17px !important;

  border:
    1px solid
    rgba(110,93,255,.38) !important;

  border-radius:22px !important;

  background:
    linear-gradient(
      160deg,
      #0E1D3A,
      #09162E
    ) !important;

  box-shadow:

    0 24px 50px
    rgba(0,0,0,.23),

    0 0 34px
    rgba(23,140,255,.055) !important;
}


#inrcyHeroSteps .hs-analytics-card{
  margin-top:15px !important;
}


/* =========================================================
   MES PUBLICATIONS
   ========================================================= */

#inrcyHeroSteps .hs-panel-head{
  display:flex !important;

  align-items:flex-start !important;

  justify-content:space-between !important;

  gap:12px !important;

  margin-bottom:14px !important;
}


#inrcyHeroSteps .hs-panel-title strong{
  display:block !important;

  color:#fff !important;

  font-size:13.5px !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-panel-title span{
  display:block !important;

  margin-top:5px !important;

  color:#94A3BE !important;

  font-size:8.5px !important;

  line-height:1.45 !important;
}


/* LIGNES PUBLICATIONS */

#inrcyHeroSteps .hs-post-list{
  display:flex !important;

  flex-direction:column !important;

  gap:8px !important;
}


#inrcyHeroSteps .hs-post-row{
  display:grid !important;

  grid-template-columns:
    54px
    minmax(0,1fr)
    75px !important;

  align-items:center !important;

  gap:9px !important;

  padding:8px !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;

  border-radius:13px !important;

  background:
    rgba(255,255,255,.04) !important;
}


#inrcyHeroSteps .hs-post-thumb{
  width:54px !important;

  height:43px !important;

  overflow:hidden !important;

  border-radius:9px !important;
}


#inrcyHeroSteps .hs-post-thumb img{
  display:block !important;

  width:100% !important;

  height:100% !important;

  object-fit:cover !important;
}


#inrcyHeroSteps .hs-post-copy{
  min-width:0 !important;
}


#inrcyHeroSteps .hs-post-copy strong{
  display:block !important;

  color:#fff !important;

  font-size:9px !important;

  line-height:1.3 !important;

  font-weight:750 !important;
}


#inrcyHeroSteps .hs-post-copy span{
  display:block !important;

  margin-top:4px !important;

  color:#8492AC !important;

  font-size:7px !important;

  line-height:1.3 !important;
}


/* BOUTONS */

#inrcyHeroSteps .hs-post-actions{
  display:flex !important;

  flex-direction:column !important;

  gap:5px !important;
}


#inrcyHeroSteps .hs-post-btn{
  width:75px !important;

  height:25px !important;

  padding:
    0 7px !important;

  border:
    1px solid
    rgba(255,255,255,.09) !important;

  border-radius:8px !important;

  background:
    rgba(255,255,255,.06) !important;

  color:#fff !important;

  font-family:inherit !important;

  font-size:6.8px !important;

  font-weight:700 !important;

  cursor:pointer !important;

  transition:.22s ease !important;
}


#inrcyHeroSteps .hs-post-btn--edit:hover{
  border-color:
    rgba(23,140,255,.5) !important;

  background:
    rgba(23,140,255,.15) !important;
}


#inrcyHeroSteps .hs-post-btn--delete{
  color:#B5C0D3 !important;
}


#inrcyHeroSteps .hs-post-btn--delete:hover{
  color:#FF83B7 !important;

  border-color:
    rgba(255,47,145,.45) !important;

  background:
    rgba(255,47,145,.12) !important;
}


/* =========================================================
   PERFORMANCE GLOBALE
   ========================================================= */

#inrcyHeroSteps .hs-dash-head{
  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:12px !important;
}


#inrcyHeroSteps .hs-dash-title{
  min-width:0 !important;
}


#inrcyHeroSteps .hs-dash-title strong{
  display:block !important;

  color:#fff !important;

  font-size:13.5px !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-dash-title span{
  display:block !important;

  margin-top:4px !important;

  color:#94A3BE !important;

  font-size:8px !important;

  line-height:1.4 !important;
}


#inrcyHeroSteps .hs-live{
  flex:none !important;

  padding:
    6px 9px !important;

  border-radius:999px !important;

  background:
    rgba(53,226,143,.10) !important;

  color:#73E6B2 !important;

  font-size:7px !important;

  font-weight:800 !important;

  white-space:nowrap !important;
}


/* KPI */

#inrcyHeroSteps .hs-kpis{
  display:grid !important;

  grid-template-columns:
    repeat(3,1fr) !important;

  gap:8px !important;

  margin-top:15px !important;
}


#inrcyHeroSteps .hs-kpi{
  min-height:74px !important;

  padding:10px !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;

  border-radius:12px !important;

  background:
    rgba(255,255,255,.04) !important;
}


#inrcyHeroSteps .hs-kpi span{
  display:block !important;

  color:#8492AC !important;

  font-size:6.8px !important;
}


#inrcyHeroSteps .hs-kpi strong{
  display:block !important;

  margin-top:6px !important;

  color:#fff !important;

  font-size:17px !important;

  line-height:1 !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-kpi em{
  display:block !important;

  margin-top:6px !important;

  color:#35E28F !important;

  font-size:6.8px !important;

  font-style:normal !important;
}


/* GRAPH */

#inrcyHeroSteps .hs-chart{
  position:relative !important;

  height:145px !important;

  margin-top:13px !important;

  padding:12px !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;

  border-radius:14px !important;

  background:
    rgba(255,255,255,.028) !important;
}


#inrcyHeroSteps .hs-chart-grid{
  position:absolute !important;

  inset:12px !important;

  opacity:.13 !important;

  background-image:

    linear-gradient(
      rgba(255,255,255,.2) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.2) 1px,
      transparent 1px
    ) !important;

  background-size:
    100% 28px,
    48px 100% !important;
}


#inrcyHeroSteps .hs-chart svg{
  position:relative !important;

  z-index:2 !important;

  display:block !important;

  width:100% !important;
  height:100% !important;
}


/* NOTE */

#inrcyHeroSteps .hs-bottom-note{
  margin-top:12px !important;

  padding:
    11px 12px !important;

  border:
    1px solid
    rgba(23,140,255,.24) !important;

  border-radius:12px !important;

  background:
    rgba(23,140,255,.06) !important;

  color:#B6C4DE !important;

  font-size:8px !important;

  line-height:1.5 !important;
}


#inrcyHeroSteps .hs-bottom-note strong{
  color:#fff !important;
}


/* =========================================================
   BANDEAU TARIFAIRE — VERSION XL
   ========================================================= */

#inrcyHeroSteps .hs-offer-bar{
  position:relative !important;

  z-index:6 !important;

  width:
    min(1280px,92%) !important;

  min-height:120px !important;

  margin:
    38px auto 0 !important;

  padding:
    22px 26px !important;

  display:grid !important;

  grid-template-columns:
    auto
    1fr
    auto !important;

  align-items:center !important;

  gap:36px !important;

  border:
    1px solid
    transparent !important;

  border-radius:24px !important;

  background:

    linear-gradient(
      #0A1831,
      #0A1831
    ) padding-box,

    var(--gradient)
    border-box !important;

  box-shadow:

    0 26px 60px
    rgba(0,0,0,.25),

    0 0 38px
    rgba(166,47,255,.11) !important;
}


/* =========================================================
   PRIX
   ========================================================= */

#inrcyHeroSteps .hs-offer-main{
  display:flex !important;

  align-items:center !important;

  gap:26px !important;
}


#inrcyHeroSteps .hs-offer-price{
  display:flex !important;

  align-items:flex-end !important;

  gap:10px !important;

  white-space:nowrap !important;
}


#inrcyHeroSteps .hs-offer-price strong{
  color:#fff !important;

  font-size:52px !important;

  line-height:.95 !important;

  font-weight:850 !important;

  letter-spacing:-.05em !important;
}


#inrcyHeroSteps .hs-offer-price > span{
  padding-bottom:6px !important;

  color:#B0BCD0 !important;

  font-size:13px !important;

  line-height:1 !important;

  font-weight:700 !important;
}


#inrcyHeroSteps .hs-offer-separator{
  width:1px !important;

  height:56px !important;

  background:
    rgba(255,255,255,.11) !important;
}


/* =========================================================
   21 JOURS
   ========================================================= */

#inrcyHeroSteps .hs-offer-info strong{
  display:block !important;

  color:#FF559D !important;

  font-size:16px !important;

  line-height:1.25 !important;

  font-weight:800 !important;
}


#inrcyHeroSteps .hs-offer-info span{
  display:block !important;

  margin-top:6px !important;

  color:#929FB7 !important;

  font-size:10px !important;

  line-height:1.4 !important;

  font-weight:500 !important;
}


/* =========================================================
   AVANTAGES
   ========================================================= */

#inrcyHeroSteps .hs-offer-benefits{
  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  flex-wrap:wrap !important;

  gap:
    13px 24px !important;

  margin:0 !important;

  padding:0 !important;

  border:0 !important;
}


#inrcyHeroSteps .hs-offer-benefit{
  display:flex !important;

  align-items:center !important;

  gap:8px !important;

  color:#D0D7E5 !important;

  font-size:11.5px !important;

  font-weight:650 !important;

  white-space:nowrap !important;
}


#inrcyHeroSteps .hs-offer-benefit > span{
  width:24px !important;

  height:24px !important;

  display:grid !important;

  place-items:center !important;

  border-radius:50% !important;

  background:
    rgba(53,226,143,.11) !important;

  color:#35E28F !important;

  font-size:11px !important;

  font-weight:900 !important;
}


/* =========================================================
   CTA
   ========================================================= */

#inrcyHeroSteps .hs-offer-cta{
  min-width:250px !important;

  min-height:62px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:11px !important;

  padding:
    0 26px !important;

  border-radius:16px !important;

  background:var(--gradient) !important;

  color:#fff !important;

  text-decoration:none !important;

  font-size:13px !important;

  font-weight:800 !important;

  white-space:nowrap !important;

  box-shadow:
    0 16px 34px
    rgba(126,46,255,.27) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}


#inrcyHeroSteps .hs-offer-cta:hover{
  transform:
    translateY(-2px) !important;

  box-shadow:
    0 20px 42px
    rgba(126,46,255,.34) !important;
}


/* =========================================================
   DESKTOP INTERMÉDIAIRE
   ========================================================= */

@media
(min-width:1161px)
and
(max-width:1530px){

  #inrcyHeroSteps .hs-inner{
    max-width:1450px !important;
  }


  #inrcyHeroSteps .hs-flow{

    grid-template-columns:
      195px
      305px
      350px
      365px !important;

    gap:30px !important;
  }


  #inrcyHeroSteps .hs-source-wrap,
  #inrcyHeroSteps .hs-source{
    width:195px !important;
  }


  #inrcyHeroSteps .hs-phone-wrap{
    width:305px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:285px !important;
    height:595px !important;
  }


  #inrcyHeroSteps .hs-channels-wrap,
  #inrcyHeroSteps .hs-channel{
    width:350px !important;
  }


  #inrcyHeroSteps .hs-performance-wrap{
    width:365px !important;
  }


  #inrcyHeroSteps .hs-step-title > strong{
    font-size:15px !important;
  }


  #inrcyHeroSteps .hs-step-sub{
    font-size:9.8px !important;
  }


  #inrcyHeroSteps .hs-channel-copy strong{
    font-size:9.6px !important;
  }


  #inrcyHeroSteps .hs-channel-copy span{
    font-size:7.2px !important;
  }


  #inrcyHeroSteps .hs-offer-bar{
    width:min(1180px,94%) !important;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1160px){

  #inrcyHeroSteps{
    padding:
      45px
      24px
      55px !important;
  }


  #inrcyHeroSteps .hs-hero-heading{
    margin-bottom:38px !important;
  }


  #inrcyHeroSteps .hs-flow{

    max-width:850px !important;

    margin:0 auto !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    gap:
      55px
      40px !important;

    min-height:0 !important;

    align-items:start !important;
  }


  #inrcyHeroSteps .hs-connections{
    display:none !important;
  }


  #inrcyHeroSteps .hs-source-wrap,
  #inrcyHeroSteps .hs-phone-wrap,
  #inrcyHeroSteps .hs-channels-wrap,
  #inrcyHeroSteps .hs-performance-wrap{
    width:100% !important;
  }


  #inrcyHeroSteps .hs-source{
    width:240px !important;

    margin:
      0 auto !important;
  }


  #inrcyHeroSteps .hs-source-media img{
    height:200px !important;
  }


  #inrcyHeroSteps .hs-phone{
    margin:
      0 auto !important;
  }


  #inrcyHeroSteps .hs-channel{
    width:100% !important;
  }


  #inrcyHeroSteps .hs-manage-card,
  #inrcyHeroSteps .hs-analytics-card{
    width:100% !important;
  }


  #inrcyHeroSteps .hs-offer-bar{
    width:100% !important;

    grid-template-columns:
      1fr
      auto !important;
  }


  #inrcyHeroSteps .hs-offer-benefits{
    grid-column:
      1 / -1 !important;

    justify-content:
      flex-start !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps{
    padding:
      35px
      16px
      48px !important;
  }


  /* TITRE */

  #inrcyHeroSteps .hs-hero-heading{
    margin-bottom:
      34px !important;
  }


  #inrcyHeroSteps .hs-hero-heading h1{
    font-size:
      35px !important;
  }


  #inrcyHeroSteps .hs-title-line{
    width:auto !important;

    white-space:normal !important;

    padding:
      0 4px !important;
  }


  /* FLOW */

  #inrcyHeroSteps .hs-flow{
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    gap:48px !important;

    max-width:500px !important;
  }


  #inrcyHeroSteps .hs-step{
    width:100% !important;
  }


  #inrcyHeroSteps .hs-step-head{
    max-width:430px !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }


  #inrcyHeroSteps .hs-step-title > strong{
    font-size:16px !important;
  }


  #inrcyHeroSteps .hs-step-sub{
    font-size:10.5px !important;
  }


  /* SOURCE */

  #inrcyHeroSteps .hs-source{
    width:240px !important;
  }


  /* TÉLÉPHONE */

  #inrcyHeroSteps .hs-phone{
    width:265px !important;

    height:555px !important;

    transform:none !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:150px !important;
  }


  #inrcyHeroSteps .hs-ai-pill{
    max-width:270px !important;
  }


  /* CANAUX */

  #inrcyHeroSteps .hs-channel{
    width:100% !important;

    grid-template-columns:
      58px
      minmax(0,1fr)
      36px
      21px !important;
  }


  /* ÉTAPE 4 */

  #inrcyHeroSteps .hs-performance-wrap{
    width:100% !important;
  }


  #inrcyHeroSteps .hs-manage-card,
  #inrcyHeroSteps .hs-analytics-card{
    width:100% !important;
  }


  /* TARIF */

  #inrcyHeroSteps .hs-offer-bar{
    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;

    gap:20px !important;

    width:100% !important;

    margin-top:35px !important;

    padding:22px !important;
  }


  #inrcyHeroSteps .hs-offer-main{
    justify-content:center !important;
  }


  #inrcyHeroSteps .hs-offer-benefits{
    justify-content:center !important;
  }


  #inrcyHeroSteps .hs-offer-cta{
    width:100% !important;

    font-size:13px !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps{
    padding-left:12px !important;
    padding-right:12px !important;
  }


  #inrcyHeroSteps .hs-hero-heading h1{
    font-size:31px !important;
  }


  #inrcyHeroSteps .hs-channel{
    grid-template-columns:
      50px
      minmax(0,1fr)
      32px
      18px !important;

    gap:7px !important;

    padding:
      6px 7px !important;
  }


  #inrcyHeroSteps .hs-thumb{
    width:50px !important;

    height:34px !important;
  }


  #inrcyHeroSteps .hs-logo{
    width:32px !important;

    height:32px !important;

    min-width:32px !important;
    max-width:32px !important;

    min-height:32px !important;
    max-height:32px !important;
  }


  #inrcyHeroSteps .hs-post-row{
    grid-template-columns:
      46px
      minmax(0,1fr) !important;
  }


  #inrcyHeroSteps .hs-post-thumb{
    width:46px !important;

    height:37px !important;
  }


  #inrcyHeroSteps .hs-post-actions{
    grid-column:
      1 / -1 !important;

    flex-direction:row !important;

    justify-content:flex-end !important;
  }


  #inrcyHeroSteps .hs-post-btn{
    width:auto !important;

    min-width:82px !important;
  }


  #inrcyHeroSteps .hs-kpis{
    gap:5px !important;
  }


  #inrcyHeroSteps .hs-kpi{
    padding:
      8px 6px !important;
  }


  #inrcyHeroSteps .hs-kpi strong{
    font-size:15px !important;
  }


  /* TARIF MOBILE */

  #inrcyHeroSteps .hs-offer-main{
    flex-direction:column !important;

    gap:14px !important;
  }


  #inrcyHeroSteps .hs-offer-separator{
    display:none !important;
  }


  #inrcyHeroSteps .hs-offer-price{
    justify-content:center !important;
  }


  #inrcyHeroSteps .hs-offer-price strong{
    font-size:48px !important;
  }


  #inrcyHeroSteps .hs-offer-price > span{
    font-size:12px !important;
  }


  #inrcyHeroSteps .hs-offer-info{
    text-align:center !important;
  }


  #inrcyHeroSteps .hs-offer-info strong{
    font-size:15px !important;
  }


  #inrcyHeroSteps .hs-offer-benefit{
    font-size:10.5px !important;
  }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #inrcyHeroSteps *,
  #inrcyHeroSteps *::before,
  #inrcyHeroSteps *::after{

    animation:none !important;

    transition:none !important;

  }

}
#inrcyHeroSteps .hs-ai-pill--combined{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  max-width:340px;
  margin:12px auto 0;

  padding:10px 14px;

  border-radius:999px;

  border:1px solid rgba(166,47,255,.28);

  background:
    linear-gradient(
      135deg,
      rgba(255,47,145,.06),
      rgba(166,47,255,.08),
      rgba(23,140,255,.07)
    );

  box-shadow:
    0 0 18px rgba(166,47,255,.08);

  font-size:10px;
  line-height:1.25;

  text-align:center;
  color:#DCE6F7;
}

#inrcyHeroSteps .hs-ai-pill--combined strong{
  color:#FFFFFF;
  font-weight:800;
}

#inrcyHeroSteps .hs-ai-separator{
  opacity:.4;
}

@media(max-width:760px){

  #inrcyHeroSteps .hs-ai-pill--combined{
    max-width:300px;
    padding:9px 12px;
    font-size:9px;
    flex-wrap:wrap;
  }

}
/* =========================================================
   INR CY — FIX TÉLÉPHONE MOBILE
   À AJOUTER TOUT EN BAS DU CSS
   ========================================================= */

@media(max-width:760px){

  /* Conteneur étape téléphone */
  #inrcyHeroSteps .hs-phone-wrap{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding-bottom:28px !important;
  }


  /* Téléphone : un peu plus large + surtout plus haut */
  #inrcyHeroSteps .hs-phone{
    width:285px !important;
    height:610px !important;

    margin:0 auto !important;

    padding:9px !important;

    border-radius:44px !important;

    transform:none !important;
  }


  /* Écran interne */
  #inrcyHeroSteps .hs-screen{
    padding:
      28px
      14px
      14px !important;

    border-radius:36px !important;
  }


  /* Photo légèrement moins haute
     pour libérer de l'espace en bas */
  #inrcyHeroSteps .hs-phone-photo{
    height:145px !important;
    margin-top:18px !important;
  }


  /* Champs légèrement compactés */
  #inrcyHeroSteps .hs-field{
    margin-top:9px !important;
    padding:9px 10px !important;
  }


  /* Grille des formats */
  #inrcyHeroSteps .hs-format-grid{
    gap:6px !important;
    margin-top:9px !important;
  }


  /* 4 cartes formats */
  #inrcyHeroSteps .hs-format{
    min-height:42px !important;

    padding:5px 2px !important;

    border-radius:8px !important;

    font-size:6.8px !important;
  }


  #inrcyHeroSteps .hs-format b{
    margin-bottom:1px !important;
    font-size:10px !important;
  }


  /* GROS CORRECTIF :
     bouton "12 contenus prêts" moins massif */
  #inrcyHeroSteps .hs-publish{
    left:24px !important;
    right:24px !important;

    bottom:20px !important;

    height:64px !important;

    border-radius:18px !important;

    font-size:13px !important;

    padding:
      0 14px !important;

    box-shadow:
      0 12px 28px
      rgba(108,45,255,.22) !important;
  }


  /* Halo sous le téléphone :
     plus bas, moins envahissant */
  #inrcyHeroSteps .hs-floor{
    width:315px !important;
    height:66px !important;

    bottom:-18px !important;

    opacity:.78 !important;
  }


  /* Petite pill sous le téléphone */
  #inrcyHeroSteps .hs-ai-pill,
  #inrcyHeroSteps .hs-ai-pill--combined{
    max-width:275px !important;

    margin-top:24px !important;

    padding:
      9px 12px !important;

    font-size:8.5px !important;

    line-height:1.3 !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:320px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:278px !important;
    height:600px !important;
  }


  #inrcyHeroSteps .hs-publish{
    left:22px !important;
    right:22px !important;

    height:62px !important;

    font-size:12.5px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:300px !important;
    height:62px !important;

    bottom:-17px !important;
  }

}
/* =========================================================
   INR CY — CARTE "CHOIX IA" — ALIGNEMENT FINAL
   ========================================================= */

#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2){
  position:relative !important;

  display:block !important;

  /* masque le texte "Carrousel" existant */
  font-size:0 !important;
}


/* =========================================================
   ANCIEN B → ON LE GARDE UNIQUEMENT COMME SUPPORT
   ========================================================= */

#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2) b{
  position:absolute !important;

  top:11px !important;
  left:50% !important;

  width:auto !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  transform:translateX(-50%) !important;

  font-size:0 !important;
  line-height:1 !important;
}


/* =========================================================
   ÉTOILE
   ========================================================= */

#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2) b::before{
  content:"🤖" !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  color:#D4DCEC !important;

  font-size:11px !important;
  line-height:11px !important;

  font-weight:700 !important;

  text-align:center !important;
}


/* =========================================================
   TEXTE "CHOIX IA"
   ========================================================= */

#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::after{
  content:"Choix IA" !important;

  position:absolute !important;

  left:50% !important;
  bottom:9px !important;

  transform:translateX(-50%) !important;

  width:max-content !important;

  margin:0 !important;
  padding:0 !important;

  color:#8997B1 !important;

  font-size:7.5px !important;
  line-height:1 !important;

  font-weight:500 !important;

  text-align:center !important;
  white-space:nowrap !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2) b{
    top:11px !important;
  }

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2) b::before{
    font-size:10px !important;
    line-height:10px !important;
  }

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::after{
    bottom:13px !important;

    font-size:6.8px !important;
    line-height:1 !important;
  }

}
/* =========================================================
   INR CY — HERO BACKGROUND PLUS PREMIUM
   Supprime la grille et remplace par des halos doux
   ========================================================= */

/* On supprime la grille actuelle */
#inrcyHeroSteps::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;

  background:
    radial-gradient(circle at 18% 22%, rgba(255,47,145,.10) 0%, transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(23,140,255,.12) 0%, transparent 30%),
    radial-gradient(circle at 50% 75%, rgba(166,47,255,.10) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)) !important;

  opacity:1 !important;
}

/* Halo bas plus doux */
#inrcyHeroSteps::after{
  left:50% !important;
  bottom:-170px !important;

  width:900px !important;
  height:240px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(166,47,255,.16) 0%,
      rgba(23,140,255,.10) 35%,
      rgba(255,47,145,.08) 58%,
      rgba(255,255,255,0) 75%
    ) !important;

  filter:blur(80px) !important;
  opacity:.9 !important;
}

/* Un fond général un peu plus profond */
#inrcyHeroSteps{
  background:
    linear-gradient(
      180deg,
      #07142B 0%,
      #061127 45%,
      #08142B 100%
    ) !important;
}

/* Mobile : halos un peu plus discrets */
@media(max-width:760px){

  #inrcyHeroSteps::before{
    background:
      radial-gradient(circle at 20% 16%, rgba(255,47,145,.08) 0%, transparent 26%),
      radial-gradient(circle at 85% 20%, rgba(23,140,255,.10) 0%, transparent 28%),
      radial-gradient(circle at 50% 70%, rgba(166,47,255,.08) 0%, transparent 30%) !important;
  }

  #inrcyHeroSteps::after{
    width:620px !important;
    height:180px !important;
    bottom:-130px !important;
    filter:blur(65px) !important;
  }

}
/* =========================================================
   INR CY — TITRE MOBILE PLUS PREMIUM
   À AJOUTER TOUT EN BAS DU CSS
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps .hs-hero-heading h1{
    font-size:38px !important;
    line-height:1.02 !important;
    letter-spacing:-0.045em !important;
  }

}


/* Très petits écrans */
@media(max-width:480px){

  #inrcyHeroSteps .hs-hero-heading h1{
    font-size:34px !important;
    line-height:1.03 !important;
  }

}
/* =========================================================
   iNrCy — FIX BANDEAU PRIX TOUJOURS VISIBLE
   Desktop + tablette + mobile
   ========================================================= */

#inrcyHeroSteps .hs-offer-bar,
#inrcyHeroSteps.hs-js-ready .hs-offer-bar,
#inrcyHeroSteps.hs-visible .hs-offer-bar,
#inrcyHeroSteps .hs-offer-bar.hs-offer-show{
  opacity:1 !important;

  visibility:visible !important;

  transform:
    translateY(0)
    scale(1) !important;

  filter:none !important;

  pointer-events:auto !important;

  transition:
    box-shadow .65s ease !important;
}


/* On garde sa jolie lueur en permanence */

#inrcyHeroSteps .hs-offer-bar{
  box-shadow:
    0 26px 60px rgba(0,0,0,.25),
    0 0 38px rgba(166,47,255,.11) !important;
}


/* =========================================================
   TABLETTE / RESPONSIVE
   ========================================================= */

@media(max-width:1160px){

  #inrcyHeroSteps .hs-offer-bar,
  #inrcyHeroSteps.hs-js-ready .hs-offer-bar{
    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  #inrcyHeroSteps .hs-offer-bar,
  #inrcyHeroSteps.hs-js-ready .hs-offer-bar,
  #inrcyHeroSteps.hs-visible .hs-offer-bar{
    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    filter:none !important;
  }

}
/* =========================================================
   iNrCy — HERO ACCUEIL
   FIX LISIBILITÉ DES PETITS TEXTES
   À AJOUTER TOUT À LA FIN DU CSS
   ========================================================= */


/* =========================================================
   SOUS-TITRES DES 4 ÉTAPES
   ========================================================= */

#inrcyHeroSteps .hs-step-sub{
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  color:#A8B4C8 !important;
}


/* =========================================================
   ÉTAPE 1 — CARTE SOURCE
   ========================================================= */

#inrcyHeroSteps .hs-source-copy strong{
  font-size:15px !important;
  line-height:1.4 !important;
}

#inrcyHeroSteps .hs-source-copy span{
  font-size:12px !important;
  line-height:1.6 !important;
  color:#A2AEC3 !important;
}


/* =========================================================
   ÉTAPE 2 — TÉLÉPHONE
   ========================================================= */

#inrcyHeroSteps .hs-phone-head{
  font-size:14px !important;
}

#inrcyHeroSteps .hs-brand-name{
  font-size:14px !important;
}


/* petits labels */
#inrcyHeroSteps .hs-field small{
  font-size:9.5px !important;
  line-height:1.3 !important;
  color:#8392AB !important;
}


/* contenu principal des champs */
#inrcyHeroSteps .hs-field strong{
  font-size:12.5px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}


/* formats image / vidéo / texte etc. */
#inrcyHeroSteps .hs-format{
  font-size:9.5px !important;
  line-height:1.25 !important;
}

#inrcyHeroSteps .hs-format b{
  font-size:12px !important;
}


/* bouton publier */
#inrcyHeroSteps .hs-publish{
  font-size:13px !important;
}


/* petite pill sous le téléphone */
#inrcyHeroSteps .hs-ai-pill,
#inrcyHeroSteps .hs-ai-pill--combined{
  font-size:11.5px !important;
  line-height:1.45 !important;
}


/* =========================================================
   ÉTAPE 3 — CANAUX
   ========================================================= */

#inrcyHeroSteps .hs-channel-copy strong{
  font-size:12.5px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

#inrcyHeroSteps .hs-channel-copy span{
  margin-top:4px !important;
  font-size:10px !important;
  line-height:1.3 !important;
  color:#98A5BB !important;
}


/* =========================================================
   PROGRESSION
   ========================================================= */

#inrcyHeroSteps .hs-progress-row strong{
  font-size:12px !important;
}

#inrcyHeroSteps .hs-percent{
  font-size:16px !important;
}


/* =========================================================
   ÉTAPE 4 — MES PUBLICATIONS
   ========================================================= */

#inrcyHeroSteps .hs-panel-title strong{
  font-size:15px !important;
  line-height:1.35 !important;
}

#inrcyHeroSteps .hs-panel-title span{
  font-size:10.5px !important;
  line-height:1.5 !important;
  color:#A1AEC3 !important;
}


/* titres des publications */
#inrcyHeroSteps .hs-post-copy strong{
  font-size:11.5px !important;
  line-height:1.35 !important;
}


/* sous-texte des publications */
#inrcyHeroSteps .hs-post-copy span{
  font-size:9.5px !important;
  line-height:1.4 !important;
  color:#98A5BB !important;
}


/* boutons modifier / supprimer */
#inrcyHeroSteps .hs-post-btn{
  font-size:9.5px !important;
  font-weight:750 !important;
}


/* =========================================================
   PERFORMANCE GLOBALE
   ========================================================= */

#inrcyHeroSteps .hs-kpi span,
#inrcyHeroSteps .hs-kpi small{
  font-size:9.5px !important;
  line-height:1.35 !important;
  color:#9EABC0 !important;
}

#inrcyHeroSteps .hs-kpi strong{
  font-size:18px !important;
  line-height:1 !important;
}


/* petit statut "EN DIRECT" */
#inrcyHeroSteps .hs-live{
  font-size:9px !important;
  font-weight:800 !important;
}


/* =========================================================
   DESKTOP INTERMÉDIAIRE
   ========================================================= */

@media(min-width:1161px) and (max-width:1530px){

  #inrcyHeroSteps .hs-step-sub{
    font-size:12px !important;
  }

  #inrcyHeroSteps .hs-channel-copy strong{
    font-size:11.5px !important;
  }

  #inrcyHeroSteps .hs-channel-copy span{
    font-size:9.3px !important;
  }

  #inrcyHeroSteps .hs-source-copy span{
    font-size:11.2px !important;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1160px){

  #inrcyHeroSteps .hs-step-sub{
    font-size:13px !important;
  }

  #inrcyHeroSteps .hs-source-copy span{
    font-size:12px !important;
  }

  #inrcyHeroSteps .hs-field small{
    font-size:9.5px !important;
  }

  #inrcyHeroSteps .hs-field strong{
    font-size:12px !important;
  }

  #inrcyHeroSteps .hs-channel-copy strong{
    font-size:12px !important;
  }

  #inrcyHeroSteps .hs-channel-copy span{
    font-size:9.8px !important;
  }

  #inrcyHeroSteps .hs-post-copy strong{
    font-size:11.5px !important;
  }

  #inrcyHeroSteps .hs-post-copy span{
    font-size:9.5px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  #inrcyHeroSteps .hs-step-sub{
    font-size:12.5px !important;
    line-height:1.55 !important;
  }

  #inrcyHeroSteps .hs-source-copy strong{
    font-size:14px !important;
  }

  #inrcyHeroSteps .hs-source-copy span{
    font-size:11.5px !important;
  }

  #inrcyHeroSteps .hs-phone-head,
  #inrcyHeroSteps .hs-brand-name{
    font-size:13px !important;
  }

  #inrcyHeroSteps .hs-field small{
    font-size:9px !important;
  }

  #inrcyHeroSteps .hs-field strong{
    font-size:11.5px !important;
  }

  #inrcyHeroSteps .hs-format{
    font-size:9px !important;
  }

  #inrcyHeroSteps .hs-format b{
    font-size:11px !important;
  }

  #inrcyHeroSteps .hs-ai-pill,
  #inrcyHeroSteps .hs-ai-pill--combined{
    font-size:10.5px !important;
  }

  #inrcyHeroSteps .hs-channel-copy strong{
    font-size:11.5px !important;
  }

  #inrcyHeroSteps .hs-channel-copy span{
    font-size:9.5px !important;
  }

  #inrcyHeroSteps .hs-panel-title strong{
    font-size:14px !important;
  }

  #inrcyHeroSteps .hs-panel-title span{
    font-size:10px !important;
  }

  #inrcyHeroSteps .hs-post-copy strong{
    font-size:11px !important;
  }

  #inrcyHeroSteps .hs-post-copy span{
    font-size:9.2px !important;
  }

  #inrcyHeroSteps .hs-post-btn{
    font-size:9px !important;
  }

  #inrcyHeroSteps .hs-kpi span,
  #inrcyHeroSteps .hs-kpi small{
    font-size:9px !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hs-step-sub{
    font-size:12px !important;
  }

  #inrcyHeroSteps .hs-channel-copy strong{
    font-size:11px !important;
  }

  #inrcyHeroSteps .hs-channel-copy span{
    font-size:9px !important;
  }

  #inrcyHeroSteps .hs-post-copy strong{
    font-size:10.5px !important;
  }

  #inrcyHeroSteps .hs-post-copy span{
    font-size:8.8px !important;
  }

}

/* =========================================================
   iNrCy — RÉORGANISATION MOBILE DU HERO
   IMPORTANT :
   - desktop et tablette > 760px inchangés
   - uniquement mobile <= 760px
   - ordre : titre > intro > offre > démonstration
   ========================================================= */

/* Caché partout par défaut : aucun impact desktop */
#inrcyHeroSteps .hs-mobile-intro{
  display:none !important;
}

@media(max-width:760px){

  /* Le parent devient ordonnable uniquement sur mobile */
  #inrcyHeroSteps .hs-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  /* 1 — TITRE */
  #inrcyHeroSteps .hs-hero-heading{
    order:1 !important;
    margin-bottom:14px !important;
  }

  /* 2 — INTRO COURTE */
  #inrcyHeroSteps .hs-mobile-intro{
    order:2 !important;

    display:block !important;

    width:min(100%,520px) !important;

    margin:
      0 auto
      20px !important;

    padding:
      0 6px !important;

    color:#A8B4C8 !important;

    font-size:15px !important;
    line-height:1.65 !important;
    font-weight:500 !important;

    text-align:center !important;
  }

  /* 3 — OFFRE / PRIX JUSTE APRÈS L'INTRO */
  #inrcyHeroSteps .hs-offer-bar{
    order:3 !important;

    width:min(100%,500px) !important;
    min-height:0 !important;

    margin:
      0 auto
      38px !important;

    padding:
      17px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:15px !important;

    border-radius:20px !important;

    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;

    box-shadow:
      0 20px 46px rgba(0,0,0,.23),
      0 0 30px rgba(166,47,255,.10) !important;
  }

  #inrcyHeroSteps .hs-offer-main{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      1px
      minmax(0,1.15fr) !important;

    align-items:center !important;

    gap:15px !important;
  }

  #inrcyHeroSteps .hs-offer-price-wrap{
    min-width:0 !important;
  }

  #inrcyHeroSteps .hs-offer-only{
    font-size:11px !important;
  }

  #inrcyHeroSteps .hs-offer-price{
    justify-content:flex-start !important;
    gap:7px !important;
  }

  #inrcyHeroSteps .hs-offer-price strong{
    font-size:39px !important;
    line-height:.95 !important;
  }

  #inrcyHeroSteps .hs-offer-price span{
    font-size:11px !important;
  }

  #inrcyHeroSteps .hs-offer-separator{
    display:block !important;

    width:1px !important;
    height:48px !important;

    margin:0 !important;

    background:
      rgba(255,255,255,.12) !important;
  }

  #inrcyHeroSteps .hs-offer-info{
    min-width:0 !important;
  }

  #inrcyHeroSteps .hs-offer-info strong{
    font-size:14px !important;
    line-height:1.25 !important;
  }

  #inrcyHeroSteps .hs-offer-info span{
    margin-top:4px !important;

    font-size:11px !important;
    line-height:1.4 !important;
  }

  #inrcyHeroSteps .hs-offer-benefits{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      9px
      12px !important;

    justify-content:stretch !important;
  }

  #inrcyHeroSteps .hs-offer-benefit{
    min-width:0 !important;

    gap:7px !important;

    font-size:11px !important;
    line-height:1.35 !important;

    white-space:normal !important;
  }

  #inrcyHeroSteps .hs-offer-benefit > span{
    width:20px !important;
    height:20px !important;

    flex:
      0 0 20px !important;

    font-size:9px !important;
  }

  /* Le cadeau prend toute la largeur pour rester lisible */
  #inrcyHeroSteps .hs-offer-benefit--gift{
    grid-column:
      1 / -1 !important;
  }

  /* 4 — LES 4 ÉTAPES APRÈS L'OFFRE */
  #inrcyHeroSteps .hs-flow{
    order:4 !important;

    margin:
      0 auto !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hs-mobile-intro{
    margin-bottom:17px !important;

    font-size:14px !important;
    line-height:1.6 !important;
  }

  #inrcyHeroSteps .hs-offer-bar{
    width:100% !important;

    margin-bottom:34px !important;

    padding:
      15px
      14px !important;

    gap:14px !important;

    border-radius:18px !important;
  }

  #inrcyHeroSteps .hs-offer-main{
    grid-template-columns:
      minmax(0,1fr)
      1px
      minmax(0,1.05fr) !important;

    gap:11px !important;
  }

  #inrcyHeroSteps .hs-offer-price strong{
    font-size:34px !important;
  }

  #inrcyHeroSteps .hs-offer-price span{
    font-size:10px !important;
  }

  #inrcyHeroSteps .hs-offer-info strong{
    font-size:13px !important;
  }

  #inrcyHeroSteps .hs-offer-info span{
    font-size:10px !important;
  }

  #inrcyHeroSteps .hs-offer-benefits{
    gap:
      8px
      10px !important;
  }

  #inrcyHeroSteps .hs-offer-benefit{
    font-size:10.5px !important;
  }

}
/* =========================================================
   iNrCy — OFFRE MOBILE PREMIUM V2
   UNIQUEMENT RESPONSIVE
   Desktop inchangé
   ========================================================= */

@media(max-width:760px){

  /* =======================================================
     CARTE GLOBALE
     ======================================================= */

  #inrcyHeroSteps .hs-offer-bar{
    position:relative !important;

    width:min(100%,500px) !important;
    min-height:0 !important;

    margin:
      0 auto
      38px !important;

    padding:
      16px
      17px
      15px !important;

    gap:14px !important;

    border-radius:22px !important;

    border:
      1px solid
      rgba(255,255,255,.09) !important;

    background:
      radial-gradient(
        circle at 5% 0%,
        rgba(255,47,145,.10),
        transparent 32%
      ),
      radial-gradient(
        circle at 95% 100%,
        rgba(23,140,255,.10),
        transparent 34%
      ),
      rgba(8,22,46,.88) !important;

    backdrop-filter:
      blur(18px)
      saturate(125%) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(125%) !important;

    box-shadow:
      0 18px 42px rgba(0,0,0,.22),
      0 0 26px rgba(166,47,255,.08),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }


  /* contour gradient plus fin */
  #inrcyHeroSteps .hs-offer-bar::before{
    content:"" !important;

    position:absolute !important;

    inset:-1px !important;

    z-index:-1 !important;

    border-radius:23px !important;

    padding:1px !important;

    background:
      linear-gradient(
        110deg,
        #FF7437 0%,
        #FF2F91 34%,
        #A62FFF 67%,
        #178CFF 100%
      ) !important;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0) !important;

    -webkit-mask-composite:
      xor !important;

    mask-composite:
      exclude !important;

    opacity:.85 !important;

    pointer-events:none !important;
  }


  /* =======================================================
     PARTIE HAUTE : PRIX + ESSAI
     ======================================================= */

  #inrcyHeroSteps .hs-offer-main{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,.92fr)
      1px
      minmax(0,1.08fr) !important;

    align-items:center !important;

    gap:15px !important;
  }


  /* =======================================================
     PRIX
     ======================================================= */

  #inrcyHeroSteps .hs-offer-price-wrap{
    min-width:0 !important;
  }


  #inrcyHeroSteps .hs-offer-only{
    display:block !important;

    margin-bottom:5px !important;

    color:#A8B4C8 !important;

    font-size:11px !important;

    line-height:1 !important;

    font-weight:500 !important;
  }


  #inrcyHeroSteps .hs-offer-price{
    display:flex !important;

    align-items:flex-end !important;

    justify-content:flex-start !important;

    gap:7px !important;
  }


  #inrcyHeroSteps .hs-offer-price strong{
    font-size:38px !important;

    line-height:.92 !important;

    letter-spacing:-.045em !important;

    font-weight:850 !important;

    color:#FFFFFF !important;
  }


  #inrcyHeroSteps .hs-offer-price span{
    padding-bottom:3px !important;

    color:#AEB9CD !important;

    font-size:11px !important;

    line-height:1.2 !important;

    font-weight:650 !important;
  }


  /* =======================================================
     SÉPARATEUR
     ======================================================= */

  #inrcyHeroSteps .hs-offer-separator{
    display:block !important;

    width:1px !important;
    height:47px !important;

    margin:0 !important;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(255,255,255,.16),
        transparent
      ) !important;
  }


  /* =======================================================
     21 JOURS GRATUITS
     ======================================================= */

  #inrcyHeroSteps .hs-offer-info{
    min-width:0 !important;
  }


  #inrcyHeroSteps .hs-offer-info strong{
    display:block !important;

    margin:0 !important;

    font-size:14px !important;

    line-height:1.2 !important;

    font-weight:800 !important;

    background:
      linear-gradient(
        100deg,
        #FF6B74,
        #FF3C9D,
        #B543FF,
        #4A91FF
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;
  }


  #inrcyHeroSteps .hs-offer-info span{
    display:block !important;

    margin-top:5px !important;

    color:#9EABC1 !important;

    font-size:11px !important;

    line-height:1.4 !important;

    font-weight:500 !important;
  }


  /* =======================================================
     AVANTAGES
     ======================================================= */

  #inrcyHeroSteps .hs-offer-benefits{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      8px
      12px !important;

    margin-top:1px !important;

    padding-top:13px !important;

    border-top:
      1px solid
      rgba(255,255,255,.065) !important;
  }


  #inrcyHeroSteps .hs-offer-benefit{
    min-width:0 !important;

    display:flex !important;

    align-items:center !important;

    gap:7px !important;

    color:#D6DDEA !important;

    font-size:11px !important;

    line-height:1.35 !important;

    font-weight:600 !important;

    white-space:normal !important;
  }


  /* petite coche */
  #inrcyHeroSteps .hs-offer-benefit > span{
    width:20px !important;
    height:20px !important;

    flex:
      0 0 20px !important;

    display:grid !important;

    place-items:center !important;

    border-radius:50% !important;

    background:
      rgba(53,226,143,.10) !important;

    color:#35E28F !important;

    font-size:9px !important;

    box-shadow:
      0 0 12px
      rgba(53,226,143,.06) !important;
  }


  /* avantage cadeau sur toute la largeur */
  #inrcyHeroSteps .hs-offer-benefit--gift{
    grid-column:
      1 / -1 !important;

    padding-top:1px !important;

    color:#E6EBF4 !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hs-offer-bar{
    padding:
      15px
      14px
      14px !important;

    gap:13px !important;

    border-radius:20px !important;
  }


  #inrcyHeroSteps .hs-offer-main{
    grid-template-columns:
      minmax(0,.9fr)
      1px
      minmax(0,1.1fr) !important;

    gap:11px !important;
  }


  #inrcyHeroSteps .hs-offer-price strong{
    font-size:35px !important;
  }


  #inrcyHeroSteps .hs-offer-only{
    font-size:10px !important;
  }


  #inrcyHeroSteps .hs-offer-price span{
    font-size:10px !important;
  }


  #inrcyHeroSteps .hs-offer-info strong{
    font-size:13px !important;
  }


  #inrcyHeroSteps .hs-offer-info span{
    font-size:10px !important;
  }


  #inrcyHeroSteps .hs-offer-benefits{
    gap:
      8px
      9px !important;

    padding-top:12px !important;
  }


  #inrcyHeroSteps .hs-offer-benefit{
    font-size:10.5px !important;
  }

}


/* =========================================================
   iNrCy — HERO MOBILE CONVERSION "3 SECONDES"
   Inspiré du mockup validé
   UNIQUEMENT <= 760px
   Desktop totalement inchangé
   ========================================================= */

#inrcyHeroSteps .hs-mobile-conversion{
  display:none !important;
}

@media(max-width:760px){

  /* =======================================================
     BASE / ORDRE
     ======================================================= */

  #inrcyHeroSteps{
    padding:
      24px
      14px
      50px !important;

    background:
      radial-gradient(
        circle at 50% 28%,
        rgba(34,56,122,.24),
        transparent 34%
      ),
      radial-gradient(
        circle at 12% 82%,
        rgba(166,47,255,.18),
        transparent 34%
      ),
      radial-gradient(
        circle at 88% 88%,
        rgba(23,140,255,.14),
        transparent 34%
      ),
      #07142B !important;
  }

  #inrcyHeroSteps::before{
    opacity:.14 !important;
  }

  #inrcyHeroSteps .hs-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  /* L'ancien haut du hero est remplacé uniquement sur mobile */
  #inrcyHeroSteps .hs-hero-heading,
  #inrcyHeroSteps .hs-mobile-intro,
  #inrcyHeroSteps .hs-offer-bar{
    display:none !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion{
    order:1 !important;

    position:relative !important;

    display:block !important;

    width:min(100%,520px) !important;

    margin:
      0 auto
      44px !important;

    padding:
      24px
      5px
      0 !important;

    isolation:isolate !important;

    text-align:center !important;
  }

  #inrcyHeroSteps .hs-flow{
    order:2 !important;

    margin:
      0 auto !important;
  }


  /* =======================================================
     HALOS
     ======================================================= */

  #inrcyHeroSteps .hmc-glow{
    position:absolute !important;
    z-index:-1 !important;

    border-radius:50% !important;

    pointer-events:none !important;

    filter:
      blur(56px) !important;
  }

  #inrcyHeroSteps .hmc-glow--pink{
    width:190px !important;
    height:190px !important;

    left:-92px !important;
    top:320px !important;

    background:
      rgba(255,47,145,.13) !important;
  }

  #inrcyHeroSteps .hmc-glow--blue{
    width:220px !important;
    height:220px !important;

    right:-110px !important;
    top:235px !important;

    background:
      rgba(23,140,255,.14) !important;
  }


  /* =======================================================
     ENTRÉE JS
     ======================================================= */

  #inrcyHeroSteps .hs-mobile-conversion
  :is(
    .hmc-title,
    .hmc-proof,
    .hmc-subtitle,
    .hmc-offer,
    .hmc-benefit,
    .hmc-cta,
    .hmc-microcopy,
    .hmc-phone-stage
  ){
    opacity:0 !important;

    transform:
      translateY(15px)
      scale(.985) !important;

    transition:
      opacity .62s ease var(--hmc-delay,0ms),
      transform .72s cubic-bezier(.2,.8,.2,1) var(--hmc-delay,0ms) !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.is-ready
  :is(
    .hmc-title,
    .hmc-proof,
    .hmc-subtitle,
    .hmc-offer,
    .hmc-benefit,
    .hmc-cta,
    .hmc-microcopy,
    .hmc-phone-stage
  ){
    opacity:1 !important;

    transform:
      translateY(0)
      scale(1) !important;
  }


  /* =======================================================
     TITRE
     ======================================================= */

  #inrcyHeroSteps .hmc-copy{
    position:relative !important;

    z-index:3 !important;
  }

  #inrcyHeroSteps .hmc-title{
    margin:0 !important;

    color:#fff !important;

    font-size:
      clamp(42px,11.6vw,59px) !important;

    line-height:.99 !important;

    letter-spacing:-.055em !important;

    font-weight:850 !important;

    text-wrap:balance !important;
  }

  #inrcyHeroSteps .hmc-title > span{
    display:block !important;
  }

  #inrcyHeroSteps .hmc-title-white{
    color:#fff !important;

    text-shadow:
      0 3px 22px
      rgba(255,255,255,.055) !important;
  }

  #inrcyHeroSteps .hmc-title-line{
    margin-top:4px !important;

    color:#fff !important;
  }

  #inrcyHeroSteps .hmc-title-line strong{
    position:relative !important;

    display:inline-block !important;

    background:
      linear-gradient(
        105deg,
        #FF3E87 0%,
        #FF2F91 20%,
        #BD35FF 54%,
        #5B66FF 80%,
        #4A87FF 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    filter:
      drop-shadow(
        0 0 18px
        rgba(166,47,255,.16)
      ) !important;
  }

  #inrcyHeroSteps .hmc-title-line strong::after{
    content:"" !important;

    position:absolute !important;

    top:-12% !important;
    left:-32% !important;

    width:24% !important;
    height:130% !important;

    transform:
      skewX(-22deg) !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.68),
        transparent
      ) !important;

    opacity:0 !important;

    mix-blend-mode:screen !important;

    animation:
      hmcTitleShine
      4.8s
      ease-in-out
      infinite !important;
  }

  @keyframes hmcTitleShine{
    0%,68%{
      left:-32%;
      opacity:0;
    }
    73%{
      opacity:.9;
    }
    88%{
      left:114%;
      opacity:.65;
    }
    93%,100%{
      left:114%;
      opacity:0;
    }
  }


  /* =======================================================
     PREUVE RAPIDE
     ======================================================= */

  #inrcyHeroSteps .hmc-proof{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex-wrap:wrap !important;

    gap:
      7px
      9px !important;

    margin:
      20px auto
      0 !important;

    padding:
      0 4px !important;

    font-size:
      clamp(13px,3.65vw,17px) !important;

    line-height:1.3 !important;

    font-weight:800 !important;

    letter-spacing:-.02em !important;
  }

  #inrcyHeroSteps .hmc-proof span{
    background:
      linear-gradient(
        105deg,
        #FF684C,
        #FF369A,
        #B03AFF,
        #4E79FF
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;
  }

  #inrcyHeroSteps .hmc-proof i{
    width:5px !important;
    height:5px !important;

    flex:0 0 5px !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        135deg,
        #FF2F91,
        #A62FFF
      ) !important;

    box-shadow:
      0 0 11px
      rgba(166,47,255,.55) !important;
  }


  /* =======================================================
     SOUS-TITRE
     ======================================================= */

  #inrcyHeroSteps .hmc-subtitle{
    max-width:440px !important;

    margin:
      20px auto
      0 !important;

    color:#C1CAD9 !important;

    font-size:
      clamp(15px,4vw,18px) !important;

    line-height:1.55 !important;

    font-weight:500 !important;

    letter-spacing:-.015em !important;
  }

  #inrcyHeroSteps .hmc-subtitle strong{
    color:#E9EDF5 !important;

    font-weight:600 !important;
  }


  /* =======================================================
     OFFRE
     ======================================================= */

  #inrcyHeroSteps .hmc-offer{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,.92fr)
      1px
      minmax(0,1.18fr) !important;

    align-items:center !important;

    gap:16px !important;

    width:100% !important;

    margin:
      26px auto
      0 !important;

    padding:
      20px
      18px !important;

    overflow:hidden !important;

    border:
      1px solid
      transparent !important;

    border-radius:22px !important;

    background:
      linear-gradient(
        #08172F,
        #08172F
      ) padding-box,

      linear-gradient(
        110deg,
        #FF5A61,
        #FF2F91,
        #A62FFF,
        #178CFF
      ) border-box !important;

    box-shadow:
      0 22px 46px
      rgba(0,0,0,.24),

      0 0 34px
      rgba(166,47,255,.10),

      inset 0 1px 0
      rgba(255,255,255,.035) !important;
  }

  #inrcyHeroSteps .hmc-offer::before{
    content:"" !important;

    position:absolute !important;

    inset:-45% -15% !important;

    background:
      radial-gradient(
        circle at 8% 50%,
        rgba(255,47,145,.12),
        transparent 28%
      ),

      radial-gradient(
        circle at 92% 48%,
        rgba(23,140,255,.13),
        transparent 28%
      ) !important;

    pointer-events:none !important;
  }

  #inrcyHeroSteps .hmc-price,
  #inrcyHeroSteps .hmc-trial{
    position:relative !important;

    z-index:2 !important;
  }

  #inrcyHeroSteps .hmc-price{
    text-align:left !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    display:inline-block !important;

    color:#fff !important;

    font-size:
      clamp(48px,13vw,62px) !important;

    line-height:.9 !important;

    font-weight:850 !important;

    letter-spacing:-.055em !important;
  }

  #inrcyHeroSteps .hmc-price span{
    display:inline-block !important;

    margin-left:5px !important;

    color:#D8DEEA !important;

    font-size:
      clamp(11px,2.9vw,14px) !important;

    line-height:1.25 !important;

    font-weight:700 !important;

    white-space:nowrap !important;
  }

  #inrcyHeroSteps .hmc-offer-divider{
    position:relative !important;

    z-index:2 !important;

    width:1px !important;
    height:60px !important;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(255,255,255,.16),
        transparent
      ) !important;
  }

  #inrcyHeroSteps .hmc-trial{
    display:grid !important;

    grid-template-columns:
      38px
      minmax(0,1fr) !important;

    align-items:center !important;

    gap:10px !important;

    text-align:left !important;
  }

  #inrcyHeroSteps .hmc-calendar{
    width:38px !important;
    height:38px !important;

    display:grid !important;

    place-items:center !important;

    color:#EA39E6 !important;
  }

  #inrcyHeroSteps .hmc-calendar svg{
    width:36px !important;
    height:36px !important;

    fill:none !important;

    stroke:currentColor !important;

    stroke-width:1.7 !important;

    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #inrcyHeroSteps .hmc-trial strong{
    display:block !important;

    background:
      linear-gradient(
        90deg,
        #FF3F96,
        #B43CFF
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    font-size:
      clamp(15px,4vw,19px) !important;

    line-height:1.2 !important;

    font-weight:850 !important;
  }

  #inrcyHeroSteps .hmc-trial span:not(.hmc-calendar){
    display:block !important;

    margin-top:5px !important;

    color:#C2CBDA !important;

    font-size:
      clamp(12px,3.2vw,15px) !important;

    line-height:1.25 !important;
  }


  /* =======================================================
     BÉNÉFICES
     ======================================================= */

  #inrcyHeroSteps .hmc-benefits{
    display:grid !important;

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:8px !important;

    margin-top:15px !important;
  }

  #inrcyHeroSteps .hmc-benefit{
    min-width:0 !important;

    min-height:68px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
      9px
      6px !important;

    border:
      1px solid
      rgba(255,255,255,.10) !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        180deg,
        rgba(16,30,60,.84),
        rgba(10,23,48,.90)
      ) !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.025) !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon{
    width:27px !important;
    height:27px !important;

    display:grid !important;

    place-items:center !important;

    border-radius:50% !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon svg{
    width:16px !important;
    height:16px !important;

    fill:none !important;

    stroke:currentColor !important;

    stroke-width:1.7 !important;

    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon--pink{
    color:#FFA7D5 !important;

    background:
      rgba(255,47,145,.16) !important;

    box-shadow:
      0 0 18px
      rgba(255,47,145,.12) !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon--purple{
    color:#CDA6FF !important;

    background:
      rgba(166,47,255,.17) !important;

    box-shadow:
      0 0 18px
      rgba(166,47,255,.13) !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon--blue{
    color:#A7C7FF !important;

    background:
      rgba(23,140,255,.17) !important;

    box-shadow:
      0 0 18px
      rgba(23,140,255,.13) !important;
  }

  #inrcyHeroSteps .hmc-benefit strong{
    color:#F6F8FC !important;

    font-size:
      clamp(9.7px,2.75vw,12.5px) !important;

    line-height:1.22 !important;

    font-weight:750 !important;

    letter-spacing:-.015em !important;

    text-align:center !important;
  }


  /* =======================================================
     CTA
     ======================================================= */

  #inrcyHeroSteps .hmc-cta{
    position:relative !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:14px !important;

    width:
      min(88%,420px) !important;

    min-height:66px !important;

    margin:
      22px auto
      0 !important;

    padding:
      0 20px !important;

    overflow:hidden !important;

    border-radius:18px !important;

    background:
      linear-gradient(
        105deg,
        #FF3B76 0%,
        #FF2F91 23%,
        #B52FFF 58%,
        #4975FF 100%
      ) !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:
      clamp(17px,4.7vw,22px) !important;

    line-height:1 !important;

    font-weight:850 !important;

    letter-spacing:-.025em !important;

    box-shadow:
      0 17px 34px
      rgba(72,54,255,.24),

      0 0 34px
      rgba(255,47,145,.10) !important;

    transition:
      transform .25s ease,
      box-shadow .25s ease !important;
  }

  #inrcyHeroSteps .hmc-cta::before{
    content:"" !important;

    position:absolute !important;

    top:-40% !important;
    left:-36% !important;

    width:23% !important;
    height:180% !important;

    transform:
      skewX(-20deg) !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.72),
        transparent
      ) !important;

    opacity:0 !important;

    animation:
      hmcCtaShine
      4.2s
      ease-in-out
      infinite !important;
  }

  @keyframes hmcCtaShine{
    0%,66%{
      left:-36%;
      opacity:0;
    }
    72%{
      opacity:.72;
    }
    87%{
      left:116%;
      opacity:.22;
    }
    92%,100%{
      left:116%;
      opacity:0;
    }
  }

  #inrcyHeroSteps .hmc-cta:active{
    transform:
      scale(.985) !important;
  }

  #inrcyHeroSteps .hmc-cta b{
    display:inline-block !important;

    font-size:29px !important;

    line-height:1 !important;

    font-weight:400 !important;

    transition:
      transform .25s ease !important;
  }

  #inrcyHeroSteps .hmc-cta:active b{
    transform:
      translateX(3px) !important;
  }

  #inrcyHeroSteps .hmc-cta.hmc-cta-pulse{
    animation:
      hmcCtaPulse
      1.05s
      ease-out !important;
  }

  @keyframes hmcCtaPulse{
    0%{
      box-shadow:
        0 17px 34px rgba(72,54,255,.24),
        0 0 0 0 rgba(166,47,255,.20);
    }
    55%{
      box-shadow:
        0 20px 38px rgba(72,54,255,.28),
        0 0 0 12px rgba(166,47,255,0);
    }
    100%{
      box-shadow:
        0 17px 34px rgba(72,54,255,.24),
        0 0 0 0 rgba(166,47,255,0);
    }
  }

  #inrcyHeroSteps .hmc-microcopy{
    margin:
      11px auto
      0 !important;

    color:#929EB2 !important;

    font-size:
      clamp(11px,3vw,13px) !important;

    line-height:1.3 !important;

    font-weight:500 !important;
  }


  /* =======================================================
     MINI APERÇU APP / TÉLÉPHONE
     ======================================================= */

  #inrcyHeroSteps .hmc-phone-stage{
    --hmc-parallax:0px;

    position:relative !important;

    width:
      min(82%,360px) !important;

    height:420px !important;

    margin:
      26px auto
      -240px !important;

    transform:
      translateY(
        var(--hmc-parallax)
      ) !important;

    transition:
      transform .12s linear !important;

    perspective:
      1100px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.is-ready
  .hmc-phone-stage{
    transform:
      translateY(
        var(--hmc-parallax)
      ) !important;
  }

  #inrcyHeroSteps .hmc-phone-aura{
    position:absolute !important;

    left:50% !important;
    bottom:90px !important;

    width:430px !important;
    height:145px !important;

    transform:
      translateX(-50%) !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,47,145,.14),
        rgba(166,47,255,.26),
        rgba(23,140,255,.17)
      ) !important;

    filter:
      blur(48px) !important;

    opacity:.9 !important;
  }

  #inrcyHeroSteps .hmc-phone{
    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    height:100% !important;

    margin:0 auto !important;

    padding:
      25px
      20px !important;

    overflow:hidden !important;

    border:
      6px solid
      #0E111A !important;

    border-radius:
      44px
      44px
      0
      0 !important;

    background:
      linear-gradient(
        180deg,
        #06142D 0%,
        #07152D 100%
      ) !important;

    box-shadow:
      0 28px 65px
      rgba(0,0,0,.50),

      0 0 0 1px
      rgba(255,255,255,.10),

      inset 0 1px 0
      rgba(255,255,255,.04) !important;

    transform:
      rotateX(1deg) !important;
  }

  #inrcyHeroSteps .hmc-phone-top{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    margin-bottom:25px !important;
  }

  #inrcyHeroSteps .hmc-phone-brand{
    background:
      linear-gradient(
        105deg,
        #FF684C,
        #FF2F91,
        #A62FFF,
        #178CFF
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    font-size:23px !important;

    line-height:1 !important;

    font-weight:850 !important;

    letter-spacing:-.04em !important;
  }

  #inrcyHeroSteps .hmc-phone-menu{
    color:#fff !important;

    font-size:22px !important;

    line-height:1 !important;

    opacity:.9 !important;
  }

  #inrcyHeroSteps .hmc-phone-section{
    text-align:left !important;
  }

  #inrcyHeroSteps .hmc-phone-label{
    display:flex !important;

    align-items:center !important;

    gap:7px !important;

    color:#FF4F91 !important;

    font-size:15px !important;

    line-height:1.2 !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:16px !important;

    font-weight:800 !important;
  }

  #inrcyHeroSteps .hmc-phone-label--purple{
    color:#B868FF !important;
  }

  #inrcyHeroSteps .hmc-phone-label--blue{
    color:#5B8BFF !important;
  }

  #inrcyHeroSteps .hmc-phone-section p{
    margin:
      8px 0
      0 27px !important;

    color:#B7C1D1 !important;

    font-size:12.5px !important;

    line-height:1.45 !important;
  }

  #inrcyHeroSteps .hmc-phone-separator{
    width:100% !important;
    height:1px !important;

    margin:
      17px 0 !important;

    background:
      rgba(255,255,255,.07) !important;
  }

  #inrcyHeroSteps .hmc-mini-grid{
    display:grid !important;

    gap:7px !important;

    margin-top:12px !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--content{
    grid-template-columns:
      repeat(6,minmax(0,1fr)) !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--channels{
    grid-template-columns:
      repeat(7,minmax(0,1fr)) !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--content > span{
    min-width:0 !important;

    min-height:46px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:3px !important;

    border:
      1px solid
      rgba(255,255,255,.08) !important;

    border-radius:9px !important;

    background:
      rgba(255,255,255,.035) !important;

    color:#C8D1DF !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--content b{
    color:#fff !important;

    font-size:12px !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--content small{
    color:#9CA8BA !important;

    font-size:6.7px !important;
  }

  #inrcyHeroSteps .hmc-more{
    color:#fff !important;

    background:
      rgba(255,255,255,.055) !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--channels > span{
    min-width:0 !important;

    height:31px !important;

    display:grid !important;

    place-items:center !important;

    border-radius:8px !important;

    color:#fff !important;

    font-size:10px !important;

    font-weight:850 !important;
  }

  #inrcyHeroSteps .hmc-social--ig{
    background:
      linear-gradient(
        135deg,
        #FF8A39,
        #EF2B91,
        #7B42FF
      ) !important;
  }

  #inrcyHeroSteps .hmc-social--fb{
    background:#1877F2 !important;
  }

  #inrcyHeroSteps .hmc-social--in{
    background:#0A66C2 !important;

    font-size:8px !important;
  }

  #inrcyHeroSteps .hmc-social--tk{
    background:#050505 !important;
  }

  #inrcyHeroSteps .hmc-social--yt{
    background:#FF0000 !important;
  }

  #inrcyHeroSteps .hmc-social--pin{
    background:#E60023 !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--channels .hmc-more{
    border:
      1px solid
      rgba(255,255,255,.08) !important;

    background:
      rgba(255,255,255,.045) !important;
  }


  /* =======================================================
     FLOW EXISTANT SOUS LE NOUVEAU HERO
     ======================================================= */

  #inrcyHeroSteps .hs-flow{
    position:relative !important;

    z-index:3 !important;

    padding-top:
      10px !important;
  }


  /* =======================================================
     ACCESSIBILITÉ
     ======================================================= */

  @media(prefers-reduced-motion:reduce){

    #inrcyHeroSteps .hs-mobile-conversion *,
    #inrcyHeroSteps .hs-mobile-conversion *::before,
    #inrcyHeroSteps .hs-mobile-conversion *::after{
      animation:none !important;
      transition:none !important;
    }

    #inrcyHeroSteps .hs-mobile-conversion
    :is(
      .hmc-title,
      .hmc-proof,
      .hmc-subtitle,
      .hmc-offer,
      .hmc-benefit,
      .hmc-cta,
      .hmc-microcopy,
      .hmc-phone-stage
    ){
      opacity:1 !important;
      transform:none !important;
    }

  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps{
    padding:
      20px
      12px
      46px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion{
    padding-top:
      18px !important;

    margin-bottom:
      38px !important;
  }

  #inrcyHeroSteps .hmc-title{
    font-size:
      clamp(39px,11.2vw,50px) !important;
  }

  #inrcyHeroSteps .hmc-proof{
    gap:
      6px
      7px !important;

    font-size:
      clamp(12px,3.4vw,15px) !important;
  }

  #inrcyHeroSteps .hmc-subtitle{
    margin-top:
      17px !important;

    font-size:
      14.5px !important;
  }

  #inrcyHeroSteps .hmc-offer{
    grid-template-columns:
      minmax(0,.90fr)
      1px
      minmax(0,1.10fr) !important;

    gap:11px !important;

    padding:
      18px
      14px !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    font-size:
      47px !important;
  }

  #inrcyHeroSteps .hmc-price span{
    margin-left:3px !important;

    font-size:
      10.5px !important;
  }

  #inrcyHeroSteps .hmc-trial{
    grid-template-columns:
      31px
      minmax(0,1fr) !important;

    gap:7px !important;
  }

  #inrcyHeroSteps .hmc-calendar,
  #inrcyHeroSteps .hmc-calendar svg{
    width:30px !important;
    height:30px !important;
  }

  #inrcyHeroSteps .hmc-trial strong{
    font-size:
      14px !important;
  }

  #inrcyHeroSteps .hmc-trial span:not(.hmc-calendar){
    font-size:
      11.5px !important;
  }

  #inrcyHeroSteps .hmc-benefit{
    min-height:
      64px !important;

    padding:
      8px
      4px !important;
  }

  #inrcyHeroSteps .hmc-benefit strong{
    font-size:
      9.5px !important;
  }

  #inrcyHeroSteps .hmc-cta{
    width:
      90% !important;

    min-height:
      61px !important;

    font-size:
      17px !important;
  }

  #inrcyHeroSteps .hmc-phone-stage{
    width:
      min(84%,320px) !important;

    height:
      390px !important;

    margin-bottom:
      -225px !important;
  }

  #inrcyHeroSteps .hmc-phone{
    padding:
      22px
      17px !important;

    border-radius:
      39px
      39px
      0
      0 !important;
  }

  #inrcyHeroSteps .hmc-phone-brand{
    font-size:
      21px !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:
      14.5px !important;
  }

  #inrcyHeroSteps .hmc-phone-section p{
    font-size:
      11.5px !important;
  }

}


/* =========================================================
   TRÈS PETITS MOBILES
   ========================================================= */

@media(max-width:370px){

  #inrcyHeroSteps .hmc-title{
    font-size:
      38px !important;
  }

  #inrcyHeroSteps .hmc-proof{
    font-size:
      11.5px !important;
  }

  #inrcyHeroSteps .hmc-offer{
    gap:
      8px !important;

    padding:
      16px
      11px !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    font-size:
      43px !important;
  }

  #inrcyHeroSteps .hmc-price span{
    font-size:
      9.5px !important;
  }

  #inrcyHeroSteps .hmc-trial strong{
    font-size:
      13px !important;
  }

  #inrcyHeroSteps .hmc-trial span:not(.hmc-calendar){
    font-size:
      10.5px !important;
  }

  #inrcyHeroSteps .hmc-benefit strong{
    font-size:
      8.8px !important;
  }

}

/* =========================================================
   iNrCy — CORRECTIF MOBILE V2
   Objectifs :
   1) voir le téléphone dès le 1er écran
   2) titre plus compact
   3) zéro chevauchement avec l'étape 1
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps{
    padding:
      12px
      14px
      42px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion{
    margin:
      0 auto
      22px !important;

    padding:
      10px
      5px
      0 !important;
  }

  /* Titre plus proche du mockup validé et moins haut */
  #inrcyHeroSteps .hmc-title{
    font-size:
      clamp(36px,9.9vw,49px) !important;

    line-height:.96 !important;

    letter-spacing:-.052em !important;
  }

  #inrcyHeroSteps .hmc-title-line{
    margin-top:2px !important;
  }

  /* On resserre toute la zone de compréhension immédiate */
  #inrcyHeroSteps .hmc-proof{
    margin-top:13px !important;

    gap:
      5px
      7px !important;

    font-size:
      clamp(11.5px,3.15vw,14.5px) !important;
  }

  #inrcyHeroSteps .hmc-subtitle{
    max-width:410px !important;

    margin-top:13px !important;

    font-size:
      clamp(13px,3.5vw,16px) !important;

    line-height:1.42 !important;
  }

  /* Offre plus compacte */
  #inrcyHeroSteps .hmc-offer{
    margin-top:18px !important;

    padding:
      15px
      15px !important;

    gap:11px !important;

    border-radius:20px !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    font-size:
      clamp(43px,11.7vw,54px) !important;
  }

  #inrcyHeroSteps .hmc-price span{
    font-size:
      clamp(10px,2.55vw,12.5px) !important;
  }

  #inrcyHeroSteps .hmc-offer-divider{
    height:50px !important;
  }

  #inrcyHeroSteps .hmc-trial{
    grid-template-columns:
      31px
      minmax(0,1fr) !important;

    gap:8px !important;
  }

  #inrcyHeroSteps .hmc-calendar,
  #inrcyHeroSteps .hmc-calendar svg{
    width:30px !important;
    height:30px !important;
  }

  #inrcyHeroSteps .hmc-trial strong{
    font-size:
      clamp(13px,3.6vw,16px) !important;
  }

  #inrcyHeroSteps .hmc-trial span:not(.hmc-calendar){
    margin-top:3px !important;

    font-size:
      clamp(10.5px,2.9vw,13px) !important;
  }

  /* Bénéfices moins hauts */
  #inrcyHeroSteps .hmc-benefits{
    margin-top:10px !important;

    gap:7px !important;
  }

  #inrcyHeroSteps .hmc-benefit{
    min-height:54px !important;

    gap:5px !important;

    padding:
      7px
      4px !important;

    border-radius:13px !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon{
    width:23px !important;
    height:23px !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon svg{
    width:13px !important;
    height:13px !important;
  }

  #inrcyHeroSteps .hmc-benefit strong{
    font-size:
      clamp(8.8px,2.45vw,11px) !important;
  }

  /* CTA plus compact, comme sur le mockup */
  #inrcyHeroSteps .hmc-cta{
    width:min(88%,400px) !important;

    min-height:56px !important;

    margin-top:14px !important;

    border-radius:16px !important;

    font-size:
      clamp(15px,4.1vw,19px) !important;
  }

  #inrcyHeroSteps .hmc-cta b{
    font-size:25px !important;
  }

  #inrcyHeroSteps .hmc-microcopy{
    margin-top:7px !important;

    font-size:
      clamp(10px,2.7vw,12px) !important;
  }

  /*
   * IMPORTANT : suppression du margin-bottom négatif.
   * C'était lui qui faisait entrer le téléphone dans l'étape 1.
   */
  #inrcyHeroSteps .hmc-phone-stage{
    width:min(76%,330px) !important;

    height:355px !important;

    margin:
      14px auto
      26px !important;

    position:relative !important;

    z-index:4 !important;
  }

  #inrcyHeroSteps .hmc-phone{
    padding:
      20px
      17px !important;

    border-width:5px !important;

    border-radius:
      38px
      38px
      0
      0 !important;
  }

  #inrcyHeroSteps .hmc-phone-top{
    margin-bottom:18px !important;
  }

  #inrcyHeroSteps .hmc-phone-brand{
    font-size:20px !important;
  }

  #inrcyHeroSteps .hmc-phone-menu{
    font-size:19px !important;
  }

  #inrcyHeroSteps .hmc-phone-separator{
    margin:
      13px 0 !important;
  }

  #inrcyHeroSteps .hmc-phone-label{
    font-size:13px !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:14px !important;
  }

  #inrcyHeroSteps .hmc-phone-section p{
    margin:
      6px 0
      0 24px !important;

    font-size:10.8px !important;
  }

  #inrcyHeroSteps .hmc-mini-grid{
    gap:5px !important;

    margin-top:9px !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--content > span{
    min-height:39px !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--content small{
    font-size:6px !important;
  }

  #inrcyHeroSteps .hmc-mini-grid--channels > span{
    height:27px !important;
  }

  /* Étapes : toujours APRES le téléphone, sans superposition */
  #inrcyHeroSteps .hs-flow{
    position:relative !important;

    z-index:3 !important;

    clear:both !important;

    margin-top:0 !important;

    padding-top:0 !important;
  }

  #inrcyHeroSteps #hsStep1{
    position:relative !important;

    z-index:5 !important;

    margin-top:0 !important;
  }
}

/* Compactage supplémentaire pour les hauteurs de viewport iPhone/Safari */
@media(max-width:760px){
  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-title{
    font-size:
      clamp(34px,9.4vw,45px) !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-proof{
    margin-top:10px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-subtitle{
    margin-top:10px !important;

    line-height:1.36 !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-offer{
    margin-top:14px !important;

    padding:
      13px
      14px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-benefits{
    margin-top:8px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-benefit{
    min-height:50px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-cta{
    min-height:53px !important;

    margin-top:11px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-microcopy{
    margin-top:6px !important;
  }

  #inrcyHeroSteps .hs-mobile-conversion.hmc-short-viewport .hmc-phone-stage{
    margin-top:10px !important;
  }
}

@media(max-width:480px){
  #inrcyHeroSteps .hmc-title{
    font-size:
      clamp(34px,9.6vw,43px) !important;
  }

  #inrcyHeroSteps .hmc-phone-stage{
    width:min(78%,305px) !important;

    height:338px !important;

    margin-bottom:24px !important;
  }
}


/* =========================================================
   iNrCy — HERO MOBILE V3
   Ajustements validés 20/08/2026
   - bénéfices plus petits et horizontaux
   - titres / intro davantage centrés
   - 3 actions dans "12 contenus"
   - vrais logos dans "12 canaux"
   ========================================================= */

@media(max-width:760px){

  /* Zone titre : davantage centrée au milieu comme la maquette */
  #inrcyHeroSteps .hmc-copy{
    width:min(94%,430px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-title{
    width:100% !important;
    max-width:420px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-proof{
    width:max-content !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-subtitle{
    width:min(94%,390px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    text-wrap:balance !important;
  }


  /* =======================================================
     3 PETITS ENCADRÉS : version compacte horizontale
     ======================================================= */

  #inrcyHeroSteps .hmc-benefits{
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:10px !important;
  }

  #inrcyHeroSteps .hmc-benefit{
    min-height:38px !important;
    height:38px !important;

    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    padding:5px 6px !important;

    border-radius:10px !important;

    background:
      linear-gradient(
        180deg,
        rgba(16,30,60,.77),
        rgba(10,23,48,.84)
      ) !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon{
    width:20px !important;
    height:20px !important;

    flex:0 0 20px !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon svg{
    width:11px !important;
    height:11px !important;
  }

  #inrcyHeroSteps .hmc-benefit strong{
    flex:0 1 auto !important;

    font-size:8.1px !important;
    line-height:1.08 !important;

    font-weight:720 !important;

    white-space:nowrap !important;

    text-align:left !important;
  }


  /* =======================================================
     TÉLÉPHONE : 3 ACTIONS CONTENU
     ======================================================= */

  #inrcyHeroSteps .hmc-content-actions{
    display:grid !important;
    grid-template-columns:.86fr .72fr 1.42fr !important;

    gap:6px !important;

    margin-top:10px !important;
  }

  #inrcyHeroSteps .hmc-content-action{
    min-width:0 !important;
    min-height:43px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    padding:7px 6px !important;

    border:
      1px solid
      rgba(255,255,255,.09) !important;

    border-radius:10px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.028)
      ) !important;

    color:#fff !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.025) !important;
  }

  #inrcyHeroSteps .hmc-content-action b{
    width:18px !important;
    height:18px !important;

    flex:0 0 18px !important;

    display:grid !important;
    place-items:center !important;

    color:#C987FF !important;
  }

  #inrcyHeroSteps .hmc-content-action b svg{
    width:17px !important;
    height:17px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.55 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #inrcyHeroSteps .hmc-content-action .hmc-emoji{
    width:auto !important;
    height:auto !important;
    flex:0 0 auto !important;
    font-size:15px !important;
  }

  #inrcyHeroSteps .hmc-content-action small{
    min-width:0 !important;

    color:#DDE5F1 !important;

    font-size:7.2px !important;
    line-height:1.12 !important;

    font-weight:700 !important;

    white-space:nowrap !important;
  }


  /* =======================================================
     TÉLÉPHONE : VRAIS LOGOS CANAUX
     ======================================================= */

  #inrcyHeroSteps .hmc-channel-logos{
    display:grid !important;

    grid-template-columns:
      repeat(7,minmax(0,1fr)) !important;

    gap:6px !important;

    margin-top:10px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    min-width:0 !important;

    height:30px !important;

    display:grid !important;
    place-items:center !important;

    overflow:hidden !important;

    border-radius:8px !important;

    background:
      rgba(255,255,255,.035) !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    display:block !important;

    width:27px !important;
    height:27px !important;
  }

  #inrcyHeroSteps .hmc-channel-more{
    border:
      1px solid
      rgba(255,255,255,.09) !important;

    color:#fff !important;

    font-size:15px !important;

    font-weight:800 !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:430px){

  #inrcyHeroSteps .hmc-benefits{
    gap:5px !important;
  }

  #inrcyHeroSteps .hmc-benefit{
    height:35px !important;
    min-height:35px !important;

    gap:4px !important;

    padding:4px 4px !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon{
    width:18px !important;
    height:18px !important;

    flex-basis:18px !important;
  }

  #inrcyHeroSteps .hmc-benefit-icon svg{
    width:10px !important;
    height:10px !important;
  }

  #inrcyHeroSteps .hmc-benefit strong{
    font-size:7.4px !important;
  }

  #inrcyHeroSteps .hmc-content-actions{
    gap:5px !important;
  }

  #inrcyHeroSteps .hmc-content-action{
    min-height:40px !important;

    padding:6px 4px !important;
  }

  #inrcyHeroSteps .hmc-content-action small{
    font-size:6.5px !important;
  }

  #inrcyHeroSteps .hmc-content-action b{
    width:16px !important;
    height:16px !important;

    flex-basis:16px !important;
  }

  #inrcyHeroSteps .hmc-content-action b svg{
    width:15px !important;
    height:15px !important;
  }

  #inrcyHeroSteps .hmc-channel-logos{
    gap:4px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    height:27px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    width:24px !important;
    height:24px !important;
  }

}

/* =========================================================
   iNrCy — HERO MOBILE
   AJUSTEMENT DU MINI TÉLÉPHONE
   - étape choix photo
   - icône publication
   - validation verte avant les canaux
   ========================================================= */

@media(max-width:760px){

  /* Un peu plus de hauteur pour accueillir la nouvelle étape
     sans couper le contenu du téléphone */
  #inrcyHeroSteps .hmc-phone-stage{
    height:385px !important;
  }

  /* On resserre légèrement l'intérieur pour garder un rendu compact */
  #inrcyHeroSteps .hmc-phone-top{
    margin-bottom:15px !important;
  }

  #inrcyHeroSteps .hmc-phone-separator{
    margin:
      11px
      0 !important;
  }

  #inrcyHeroSteps .hmc-phone-separator--compact{
    margin:
      9px
      0 !important;
  }

  /* Nouvelle ligne "choix des photos" */
  #inrcyHeroSteps .hmc-phone-section--photo{
    padding:
      1px
      0 !important;
  }

  #inrcyHeroSteps .hmc-phone-label--photo{
    color:#D6DFEC !important;

    align-items:flex-start !important;

    gap:7px !important;
  }

  #inrcyHeroSteps .hmc-phone-label--photo > span{
    flex:0 0 auto !important;

    margin-top:1px !important;

    font-size:14px !important;

    line-height:1 !important;
  }

  #inrcyHeroSteps .hmc-phone-label--photo strong{
    color:#D6DFEC !important;

    font-size:11.2px !important;

    line-height:1.32 !important;

    font-weight:650 !important;

    letter-spacing:-.01em !important;
  }

  /* Emoji publication à gauche de "iNrCy génère le contenu" */
  #inrcyHeroSteps .hmc-phone-label--purple > span{
    flex:0 0 auto !important;

    font-size:14px !important;

    line-height:1 !important;
  }

  /* Validation verte avant la diffusion */
  #inrcyHeroSteps .hmc-green-check{
    flex:0 0 auto !important;

    font-size:14px !important;

    line-height:1 !important;

    filter:
      drop-shadow(
        0 0 8px
        rgba(53,226,143,.28)
      ) !important;
  }

  #inrcyHeroSteps .hmc-phone-label--blue{
    align-items:flex-start !important;
  }

  #inrcyHeroSteps .hmc-phone-label--blue strong{
    line-height:1.28 !important;
  }

}


/* PETITS MOBILES */
@media(max-width:480px){

  #inrcyHeroSteps .hmc-phone-stage{
    height:370px !important;
  }

  #inrcyHeroSteps .hmc-phone-label--photo strong{
    font-size:10.4px !important;
  }

  #inrcyHeroSteps .hmc-phone-label--photo > span,
  #inrcyHeroSteps .hmc-phone-label--purple > span,
  #inrcyHeroSteps .hmc-green-check{
    font-size:13px !important;
  }

}


/* =========================================================
   iNrCy — HERO MOBILE V5
   Actions contenu : ajout Photos + Vidéo dans les encadrés
   ========================================================= */

@media(max-width:760px){

  /* La ligne dédiée aux photos n'existe plus :
     les médias sont intégrés aux petits boutons */
  #inrcyHeroSteps .hmc-phone-section--photo,
  #inrcyHeroSteps .hmc-phone-label--photo{
    display:none !important;
  }

  /* 5 boutons : Choix IA / Emojis / Photos / Vidéo / Générer avec l'IA */
  #inrcyHeroSteps .hmc-content-actions{
    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:5px !important;

    margin-top:10px !important;
  }

  #inrcyHeroSteps .hmc-content-action--wide{
    grid-column:
      span 2 !important;
  }

  #inrcyHeroSteps .hmc-content-action{
    min-height:40px !important;

    gap:4px !important;

    padding:
      6px
      5px !important;
  }

  #inrcyHeroSteps .hmc-content-action small{
    font-size:6.8px !important;
  }

  #inrcyHeroSteps .hmc-media-emoji{
    width:auto !important;
    height:auto !important;

    flex:0 0 auto !important;

    font-size:14px !important;

    line-height:1 !important;
  }

}


/* PETITS MOBILES */
@media(max-width:430px){

  #inrcyHeroSteps .hmc-content-actions{
    gap:4px !important;
  }

  #inrcyHeroSteps .hmc-content-action{
    min-height:38px !important;

    padding:
      5px
      4px !important;
  }

  #inrcyHeroSteps .hmc-content-action small{
    font-size:6.2px !important;
  }

  #inrcyHeroSteps .hmc-media-emoji{
    font-size:13px !important;
  }

}


/* =========================================================
   iNrCy — HERO MOBILE V6
   SÉPARATEUR PREMIUM ENTRE LE TÉLÉPHONE ET L'ÉTAPE 1
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps .hmc-transition-divider{
    position:relative !important;

    z-index:5 !important;

    width:min(94%,430px) !important;

    min-height:38px !important;

    margin:
      16px auto
      24px !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      34px
      minmax(0,1fr) !important;

    align-items:center !important;

    gap:9px !important;
  }

  /* Petit halo/brume pour rendre la coupure du téléphone volontaire */
  #inrcyHeroSteps .hmc-transition-divider::before{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:92% !important;
    height:46px !important;

    transform:
      translate(-50%,-50%) !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,47,145,.06),
        rgba(166,47,255,.13),
        rgba(23,140,255,.08)
      ) !important;

    filter:
      blur(18px) !important;

    opacity:.95 !important;

    pointer-events:none !important;
  }

  #inrcyHeroSteps .hmc-transition-line{
    position:relative !important;

    z-index:2 !important;

    display:block !important;

    width:100% !important;
    height:1px !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,47,145,.30) 26%,
        rgba(166,47,255,.52) 58%,
        rgba(23,140,255,.30) 100%
      ) !important;

    box-shadow:
      0 0 12px
      rgba(166,47,255,.18) !important;
  }

  #inrcyHeroSteps .hmc-transition-line:last-child{
    transform:
      scaleX(-1) !important;
  }

  #inrcyHeroSteps .hmc-transition-dot{
    position:relative !important;

    z-index:3 !important;

    width:34px !important;
    height:34px !important;

    display:grid !important;

    place-items:center !important;

    border:
      1px solid
      rgba(166,47,255,.28) !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        180deg,
        rgba(18,31,61,.90),
        rgba(8,21,45,.96)
      ) !important;

    color:#C9B2FF !important;

    font-size:18px !important;

    line-height:1 !important;

    font-weight:700 !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.18),
      0 0 18px rgba(166,47,255,.15),
      inset 0 1px 0 rgba(255,255,255,.035) !important;

    animation:
      hmcDividerFloat
      3.2s
      ease-in-out
      infinite !important;
  }

  @keyframes hmcDividerFloat{
    0%,100%{
      transform:
        translateY(0) !important;
    }

    50%{
      transform:
        translateY(3px) !important;
    }
  }

  /* L'étape 1 respire un peu plus après la séparation */
  #inrcyHeroSteps .hs-flow{
    padding-top:
      4px !important;
  }

}


/* PETITS MOBILES */
@media(max-width:430px){

  #inrcyHeroSteps .hmc-transition-divider{
    width:92% !important;

    margin:
      12px auto
      20px !important;

    grid-template-columns:
      minmax(0,1fr)
      30px
      minmax(0,1fr) !important;

    gap:7px !important;
  }

  #inrcyHeroSteps .hmc-transition-dot{
    width:30px !important;
    height:30px !important;

    font-size:16px !important;
  }

}


/* ACCESSIBILITÉ */
@media(prefers-reduced-motion:reduce){

  #inrcyHeroSteps .hmc-transition-dot{
    animation:none !important;
  }

}


/* =========================================================
   iNrCy — HERO MOBILE V8 — FINITIONS FINALES
   20/08/2026
   - H1 légèrement réduit et un peu plus bas
   - TTC / mois rapproché du prix
   - téléphone raccourci sous les logos
   - séparateur remonté
   ========================================================= */

@media(max-width:760px){

  /* -------------------------------------------------------
     H1 : -6/7% environ + un peu plus d'air sous le header
     ------------------------------------------------------- */

  #inrcyHeroSteps .hs-mobile-conversion{
    padding-top:
      30px !important;
  }

  #inrcyHeroSteps .hmc-title{
    max-width:
      405px !important;

    font-size:
      clamp(39px,10.8vw,54px) !important;

    line-height:
      1.01 !important;
  }

  #inrcyHeroSteps .hmc-proof{
    margin-top:
      17px !important;
  }

  #inrcyHeroSteps .hmc-subtitle{
    margin-top:
      17px !important;
  }


  /* -------------------------------------------------------
     PRIX : rapprocher "TTC / mois" du 69 €
     ------------------------------------------------------- */

  #inrcyHeroSteps .hmc-price{
    display:flex !important;

    align-items:flex-end !important;

    gap:5px !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    margin:0 !important;
  }

  #inrcyHeroSteps .hmc-price span{
    margin:
      0 0 5px 0 !important;

    line-height:
      1 !important;
  }


  /* -------------------------------------------------------
     TÉLÉPHONE : supprimer encore 25–35 px de vide
     ------------------------------------------------------- */

  #inrcyHeroSteps .hmc-phone-stage{
    height:
      282px !important;

    margin:
      12px auto
      2px !important;
  }

  #inrcyHeroSteps .hmc-phone{
    height:
      282px !important;

    padding-bottom:
      10px !important;
  }

  /* Les logos doivent rester visibles et le téléphone
     se terminer presque immédiatement dessous */
  #inrcyHeroSteps .hmc-channel-logos{
    margin-bottom:
      0 !important;
  }


  /* -------------------------------------------------------
     SÉPARATEUR : presque collé sous le téléphone
     ------------------------------------------------------- */

  #inrcyHeroSteps .hmc-transition-divider{
    margin:
      0 auto
      16px !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hs-mobile-conversion{
    padding-top:
      25px !important;
  }

  #inrcyHeroSteps .hmc-title{
    font-size:
      clamp(37px,10.5vw,47px) !important;
  }

  #inrcyHeroSteps .hmc-price span{
    margin-bottom:
      4px !important;
  }

  #inrcyHeroSteps .hmc-phone-stage{
    height:
      274px !important;

    margin-bottom:
      0 !important;
  }

  #inrcyHeroSteps .hmc-phone{
    height:
      274px !important;
  }

  #inrcyHeroSteps .hmc-transition-divider{
    margin:
      0 auto
      14px !important;
  }

}


/* =========================================================
   TRÈS PETITS MOBILES
   ========================================================= */

@media(max-width:370px){

  #inrcyHeroSteps .hmc-title{
    font-size:
      36px !important;
  }

  #inrcyHeroSteps .hmc-phone-stage,
  #inrcyHeroSteps .hmc-phone{
    height:
      268px !important;
  }

}


/* =========================================================
   iNrCy — HERO MOBILE V9
   TÉLÉPHONE XL + INTERFACE ÉPURÉE
   Inspiré de la maquette validée
   ========================================================= */

@media(max-width:760px){

  /* =======================================================
     TÉLÉPHONE PLUS GRAND / PLUS PRÉSENT
     ======================================================= */

  #inrcyHeroSteps .hmc-phone-stage{
    position:relative !important;
    isolation:isolate !important;

    width:min(88%,390px) !important;
    height:405px !important;

    margin:
      24px auto
      4px !important;

    perspective:1200px !important;
  }

  #inrcyHeroSteps .hmc-phone{
    position:relative !important;
    z-index:4 !important;

    width:100% !important;
    height:405px !important;

    padding:
      24px
      19px
      18px !important;

    overflow:hidden !important;

    border:
      5px solid
      #0C111B !important;

    border-radius:
      42px
      42px
      0
      0 !important;

    background:
      linear-gradient(
        180deg,
        #06142D 0%,
        #07152D 100%
      ) !important;

    box-shadow:
      0 30px 70px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,255,255,.08),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  #inrcyHeroSteps .hmc-phone-top{
    margin-bottom:
      20px !important;
  }

  #inrcyHeroSteps .hmc-phone-brand{
    font-size:
      24px !important;
  }

  #inrcyHeroSteps .hmc-phone-menu{
    font-size:
      21px !important;
  }


  /* =======================================================
     HALO + ARCS
     ======================================================= */

  #inrcyHeroSteps .hmc-phone-aura{
    position:absolute !important;

    left:50% !important;
    bottom:-18px !important;

    width:155% !important;
    height:210px !important;

    transform:
      translateX(-50%) !important;

    border-radius:50% !important;

    background:
      radial-gradient(
        circle at 18% 70%,
        rgba(255,47,145,.24),
        transparent 34%
      ),
      radial-gradient(
        circle at 50% 74%,
        rgba(166,47,255,.28),
        transparent 38%
      ),
      radial-gradient(
        circle at 82% 70%,
        rgba(23,140,255,.22),
        transparent 34%
      ) !important;

    filter:
      blur(38px) !important;

    opacity:.92 !important;

    pointer-events:none !important;
  }

  #inrcyHeroSteps .hmc-phone-rings{
    position:absolute !important;

    left:50% !important;
    bottom:-90px !important;

    width:170% !important;
    height:315px !important;

    transform:
      translateX(-50%) !important;

    z-index:1 !important;

    border-radius:50% !important;

    background:
      radial-gradient(
        ellipse at center,
        transparent 58%,
        rgba(166,47,255,.24) 59%,
        rgba(166,47,255,.24) 60%,
        transparent 61%
      ),
      radial-gradient(
        ellipse at center,
        transparent 67%,
        rgba(255,47,145,.20) 68%,
        rgba(255,47,145,.20) 69%,
        transparent 70%
      ),
      radial-gradient(
        ellipse at center,
        transparent 76%,
        rgba(23,140,255,.18) 77%,
        rgba(23,140,255,.18) 78%,
        transparent 79%
      ) !important;

    filter:
      drop-shadow(
        0 0 12px
        rgba(166,47,255,.28)
      ) !important;

    opacity:.95 !important;

    pointer-events:none !important;

    animation:
      hmcPhoneRingsFloat
      6s
      ease-in-out
      infinite !important;
  }

  @keyframes hmcPhoneRingsFloat{
    0%,100%{
      transform:
        translateX(-50%)
        scale(1);
    }

    50%{
      transform:
        translateX(-50%)
        scale(1.035);
    }
  }


  /* =======================================================
     BLOCS INTERIEURS PLUS ÉPURÉS
     ======================================================= */

  #inrcyHeroSteps .hmc-phone-block{
    text-align:left !important;
  }

  #inrcyHeroSteps .hmc-phone-label{
    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    margin:0 !important;

    font-size:
      15px !important;
  }

  #inrcyHeroSteps .hmc-phone-label > span{
    flex:0 0 auto !important;

    font-size:
      15px !important;

    line-height:1 !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:
      16px !important;

    line-height:
      1.18 !important;

    font-weight:
      800 !important;
  }

  #inrcyHeroSteps .hmc-phone-label--idea{
    color:#FF4C92 !important;
  }

  #inrcyHeroSteps .hmc-phone-label--purple{
    color:#BE67FF !important;
  }

  #inrcyHeroSteps .hmc-phone-label--blue{
    color:#5C8DFF !important;
  }

  #inrcyHeroSteps .hmc-phone-example{
    margin:
      8px 0
      0 29px !important;

    color:#B7C1D1 !important;

    font-size:
      12.5px !important;

    line-height:
      1.45 !important;
  }

  #inrcyHeroSteps .hmc-phone-separator{
    width:100% !important;
    height:1px !important;

    margin:
      15px 0 !important;

    background:
      rgba(255,255,255,.07) !important;
  }


  /* =======================================================
     ACTIONS : 4 TUILES SIMPLES
     ======================================================= */

  #inrcyHeroSteps .hmc-clean-actions{
    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:
      8px !important;

    margin-top:
      12px !important;
  }

  #inrcyHeroSteps .hmc-clean-action{
    min-width:0 !important;
    min-height:62px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    padding:
      8px
      5px !important;

    border:
      1px solid
      rgba(255,255,255,.085) !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.025)
      ) !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.025) !important;
  }

  #inrcyHeroSteps .hmc-clean-action b{
    font-size:
      18px !important;

    line-height:
      1 !important;
  }

  #inrcyHeroSteps .hmc-clean-action small{
    color:#E6ECF5 !important;

    font-size:
      8.5px !important;

    line-height:
      1 !important;

    font-weight:
      700 !important;

    white-space:nowrap !important;
  }


  /* =======================================================
     CANAUX
     ======================================================= */

  #inrcyHeroSteps .hmc-channel-logos{
    display:grid !important;

    grid-template-columns:
      repeat(7,minmax(0,1fr)) !important;

    gap:
      7px !important;

    margin-top:
      11px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    min-width:0 !important;

    height:
      34px !important;

    display:grid !important;

    place-items:center !important;

    overflow:hidden !important;

    border-radius:
      9px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    width:
      30px !important;
    height:
      30px !important;
  }

  #inrcyHeroSteps .hmc-channel-more{
    border:
      1px solid
      rgba(255,255,255,.08) !important;

    background:
      rgba(255,255,255,.04) !important;

    color:#fff !important;

    font-size:
      13px !important;

    font-weight:
      800 !important;
  }


  /* =======================================================
     TRANSITION VERS ÉTAPE 1
     ======================================================= */

  #inrcyHeroSteps .hmc-transition-divider{
    position:relative !important;

    z-index:6 !important;

    margin:
      0 auto
      20px !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hmc-phone-stage{
    width:min(90%,350px) !important;
    height:380px !important;
  }

  #inrcyHeroSteps .hmc-phone{
    height:380px !important;

    padding:
      22px
      16px
      16px !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:
      14.5px !important;
  }

  #inrcyHeroSteps .hmc-phone-example{
    font-size:
      11.5px !important;
  }

  #inrcyHeroSteps .hmc-clean-actions{
    gap:
      6px !important;
  }

  #inrcyHeroSteps .hmc-clean-action{
    min-height:
      56px !important;
  }

  #inrcyHeroSteps .hmc-clean-action b{
    font-size:
      16px !important;
  }

  #inrcyHeroSteps .hmc-clean-action small{
    font-size:
      7.7px !important;
  }

  #inrcyHeroSteps .hmc-channel-logos{
    gap:
      5px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    height:
      31px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    width:
      27px !important;
    height:
      27px !important;
  }

  #inrcyHeroSteps .hmc-phone-rings{
    width:
      180% !important;
  }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #inrcyHeroSteps .hmc-phone-rings{
    animation:none !important;
  }

}
/* =========================================================
   iNrCy — CARROUSEL MOBILE DES ÉTAPES 1 → 4
   À CONSERVER TOUT EN BAS DU CSS
   Desktop / tablette > 760px : rendu existant inchangé
   Mobile <= 760px : une étape à la fois + swipe + autoplay
   ========================================================= */

/* Les deux wrappers ajoutés par le JS sont neutres hors mobile.
   Les étapes continuent donc de participer à la grille desktop existante. */
#inrcyHeroSteps .hs-carousel-viewport,
#inrcyHeroSteps .hs-carousel-track{
  display:contents !important;
}

#inrcyHeroSteps .hs-carousel-nav{
  display:none !important;
}


@media(max-width:760px){

  /* -------------------------------------------------------
     FLOW : on remplace l'empilement vertical par un viewport
     ------------------------------------------------------- */
  #inrcyHeroSteps .hs-flow{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:500px !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding-top:10px !important;
    overflow:visible !important;
  }

  #inrcyHeroSteps .hs-connections{
    display:none !important;
  }

  #inrcyHeroSteps .hs-carousel-viewport{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto;
    overflow:hidden !important;
    border-radius:0 !important;
    touch-action:pan-y pinch-zoom !important;
    overscroll-behavior-x:contain;
    transition:height .38s cubic-bezier(.2,.8,.2,1);
    outline:none !important;
  }

  #inrcyHeroSteps .hs-carousel-track{
    position:relative !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    gap:0 !important;
    transform:translate3d(0,0,0);
    transition:transform .48s cubic-bezier(.22,.78,.2,1);
    will-change:transform;
  }

  /* -------------------------------------------------------
     UNE ÉTAPE = UNE SLIDE
     ------------------------------------------------------- */
  #inrcyHeroSteps .hs-carousel-track > .hs-step,
  #inrcyHeroSteps.hs-js-ready .hs-carousel-track > .hs-step,
  #inrcyHeroSteps .hs-carousel-track > .hs-step.hs-stage-active,
  #inrcyHeroSteps .hs-carousel-track > .hs-step.hs-stage-past{
    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 clamp(2px,2vw,10px) 12px !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

  #inrcyHeroSteps .hs-carousel-track > .hs-step::after{
    display:none !important;
  }

  /* Le titre de chaque étape garde sa largeur de lecture,
     tout en restant fluide sur 320 / 360 / 390 / 430 / 480px. */
  #inrcyHeroSteps .hs-carousel-track .hs-step-head{
    width:100% !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #inrcyHeroSteps .hs-carousel-track .hs-source-wrap,
  #inrcyHeroSteps .hs-carousel-track .hs-phone-wrap,
  #inrcyHeroSteps .hs-carousel-track .hs-channels-wrap,
  #inrcyHeroSteps .hs-carousel-track .hs-performance-wrap{
    width:100% !important;
    max-width:100% !important;
  }

  /* -------------------------------------------------------
     INDICATEURS DU CARROUSEL
     ------------------------------------------------------- */
  #inrcyHeroSteps .hs-carousel-nav{
    position:relative !important;
    z-index:8 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    width:max-content !important;
    max-width:100% !important;
    min-height:34px !important;
    margin:8px auto 0 !important;
    padding:0 5px !important;
  }

  #inrcyHeroSteps .hs-carousel-dot{
    appearance:none !important;
    -webkit-appearance:none !important;
    position:relative !important;
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #inrcyHeroSteps .hs-carousel-dot::before{
    content:"" !important;
    display:block !important;
    width:7px !important;
    height:7px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.30) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.04) !important;
    transition:
      width .28s ease,
      background .28s ease,
      box-shadow .28s ease,
      transform .28s ease !important;
  }

  #inrcyHeroSteps .hs-carousel-dot.is-active::before{
    width:22px !important;
    background:var(--gradient) !important;
    box-shadow:0 0 14px rgba(166,47,255,.30) !important;
  }

  #inrcyHeroSteps .hs-carousel-dot:focus-visible{
    outline:2px solid rgba(94,139,255,.85) !important;
    outline-offset:1px !important;
  }

  /* Le bandeau tarif reste juste sous le carrousel,
     sans récupérer les anciens grands espaces verticaux. */
  #inrcyHeroSteps .hs-offer-bar{
    margin-top:22px !important;
  }

}


/* =========================================================
   PETITS MOBILES — 430px ET MOINS
   ========================================================= */
@media(max-width:430px){

  #inrcyHeroSteps .hs-flow{
    max-width:100% !important;
  }

  #inrcyHeroSteps .hs-carousel-track > .hs-step,
  #inrcyHeroSteps.hs-js-ready .hs-carousel-track > .hs-step{
    padding-left:2px !important;
    padding-right:2px !important;
  }

  #inrcyHeroSteps .hs-carousel-nav{
    margin-top:5px !important;
  }

}


/* =========================================================
   TRÈS PETITS MOBILES — 370px ET MOINS
   ========================================================= */
@media(max-width:370px){

  #inrcyHeroSteps .hs-carousel-track > .hs-step,
  #inrcyHeroSteps.hs-js-ready .hs-carousel-track > .hs-step{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #inrcyHeroSteps .hs-carousel-dot{
    width:28px !important;
    height:28px !important;
  }

}


/* =========================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
   ========================================================= */
@media(max-width:760px) and (prefers-reduced-motion:reduce){

  #inrcyHeroSteps .hs-carousel-track,
  #inrcyHeroSteps .hs-carousel-viewport,
  #inrcyHeroSteps .hs-carousel-dot::before{
    transition:none !important;
  }

}

/* =========================================================
   iNrCy — FLÈCHES DU CARROUSEL MOBILE
   ========================================================= */

#inrcyHeroSteps .hs-carousel-arrow{
  display:none !important;
}

@media(max-width:760px){

  #inrcyHeroSteps .hs-flow{
    position:relative !important;
  }

  #inrcyHeroSteps .hs-carousel-viewport{
    position:relative !important;
    width:calc(100% - 48px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    touch-action:pan-y !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow{
    position:absolute !important;
    z-index:40 !important;
    top:50% !important;

    width:44px !important;
    height:44px !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;
    padding:0 !important;

    border:1px solid rgba(255,255,255,.24) !important;
    border-radius:999px !important;

    background:
      linear-gradient(
        135deg,
        #FF7437 0%,
        #FF2F91 34%,
        #A62FFF 67%,
        #178CFF 100%
      ) !important;

    color:#fff !important;

    box-shadow:
      0 10px 26px rgba(0,0,0,.30),
      0 0 24px rgba(166,47,255,.24) !important;

    transform:translateY(-50%) !important;
    opacity:.96 !important;

    -webkit-tap-highlight-color:transparent !important;
    cursor:pointer !important;

    transition:
      transform .16s ease,
      opacity .16s ease !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow--prev{
    left:0 !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow--next{
    right:0 !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow span{
    display:block !important;
    margin-top:-3px !important;

    color:#fff !important;

    font-family:Arial,sans-serif !important;
    font-size:38px !important;
    line-height:1 !important;
    font-weight:300 !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow:active{
    transform:
      translateY(-50%)
      scale(.90) !important;

    opacity:.80 !important;
  }

}

@media(max-width:430px){

  #inrcyHeroSteps .hs-carousel-viewport{
    width:calc(100% - 42px) !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow{
    width:40px !important;
    height:40px !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow span{
    font-size:34px !important;
  }

}

@media(max-width:360px){

  #inrcyHeroSteps .hs-carousel-viewport{
    width:calc(100% - 36px) !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow{
    width:36px !important;
    height:36px !important;
  }

  #inrcyHeroSteps .hs-carousel-arrow span{
    font-size:31px !important;
  }

}

/* =========================================================
   iNrCy — HERO MOBILE
   TÉLÉPHONE PREMIUM + 12 CANAUX VISIBLES
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps .hmc-phone-stage{
    width:min(84%,356px) !important;
    height:452px !important;
    margin:26px auto 6px !important;
    perspective:1500px !important;
  }

  #inrcyHeroSteps .hmc-phone-stage::before{
    content:"" !important;
    position:absolute !important;
    inset:10px 18px 24px !important;
    z-index:5 !important;
    pointer-events:none !important;
    border-radius:48px !important;
    background:
      linear-gradient(
        112deg,
        rgba(255,255,255,.16) 0%,
        rgba(255,255,255,0) 24%,
        rgba(255,255,255,0) 72%,
        rgba(255,255,255,.05) 100%
      ) !important;
    mix-blend-mode:screen !important;
    opacity:.26 !important;
  }

  #inrcyHeroSteps .hmc-phone{
    width:100% !important;
    height:452px !important;
    max-width:336px !important;
    margin:0 auto !important;

    padding:30px 16px 18px !important;
    overflow:visible !important;

    border:6px solid #0A0F18 !important;
    border-radius:48px !important;

    background:
      linear-gradient(
        180deg,
        #031120 0%,
        #07152A 44%,
        #08182F 100%
      ) !important;

    box-shadow:
      0 42px 84px rgba(0,0,0,.50),
      0 0 0 1px rgba(255,255,255,.08),
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -8px 20px rgba(0,0,0,.15) !important;

    transform:translateZ(0) !important;
  }

  #inrcyHeroSteps .hmc-phone::before{
    content:"" !important;
    position:absolute !important;
    left:-9px !important;
    top:82px !important;
    width:4px !important;
    height:42px !important;
    border-radius:999px !important;
    background:
      linear-gradient(
        180deg,
        #8590A3 0%,
        #515D71 35%,
        #808B9D 100%
      ) !important;
    box-shadow:
      0 54px 0 0 #6E7A8E,
      0 108px 0 0 #6E7A8E !important;
  }

  #inrcyHeroSteps .hmc-phone::after{
    content:"" !important;
    position:absolute !important;
    right:-9px !important;
    top:116px !important;
    width:4px !important;
    height:68px !important;
    border-radius:999px !important;
    background:
      linear-gradient(
        180deg,
        #8590A3 0%,
        #515D71 35%,
        #808B9D 100%
      ) !important;
  }

  #inrcyHeroSteps .hmc-phone-top{
    position:relative !important;
    padding-top:14px !important;
    margin-bottom:22px !important;
  }

  #inrcyHeroSteps .hmc-phone-top::before{
    content:"" !important;
    position:absolute !important;
    top:-2px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:96px !important;
    height:18px !important;
    border-radius:999px !important;
    background:
      linear-gradient(
        180deg,
        #01040A 0%,
        #111824 100%
      ) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.05),
      0 1px 0 rgba(255,255,255,.03) !important;
  }

  #inrcyHeroSteps .hmc-phone-top::after{
    content:"" !important;
    position:absolute !important;
    top:4px !important;
    left:calc(50% + 24px) !important;
    width:6px !important;
    height:6px !important;
    border-radius:50% !important;
    background:
      radial-gradient(circle at 45% 40%, #2D4A74 0%, #121822 70%) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04),
      0 0 8px rgba(23,140,255,.18) !important;
  }

  #inrcyHeroSteps .hmc-phone-brand{
    font-size:23px !important;
    letter-spacing:-.03em !important;
  }

  #inrcyHeroSteps .hmc-phone-menu{
    font-size:18px !important;
    color:#E8EEF8 !important;
  }

  #inrcyHeroSteps .hmc-phone-block{
    padding:0 2px !important;
  }

  #inrcyHeroSteps .hmc-phone-label{
    gap:9px !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:15.8px !important;
  }

  #inrcyHeroSteps .hmc-phone-example{
    margin:8px 0 0 29px !important;
    font-size:12.1px !important;
    line-height:1.42 !important;
  }

  #inrcyHeroSteps .hmc-phone-separator{
    margin:14px 0 !important;
  }

  #inrcyHeroSteps .hmc-clean-actions{
    gap:7px !important;
    margin-top:12px !important;
  }

  #inrcyHeroSteps .hmc-clean-action{
    min-height:59px !important;
    border-radius:14px !important;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.025)
      ) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 6px 14px rgba(0,0,0,.12) !important;
  }

  #inrcyHeroSteps .hmc-clean-action b{
    font-size:17px !important;
  }

  #inrcyHeroSteps .hmc-clean-action small{
    font-size:8px !important;
  }

  #inrcyHeroSteps .hmc-channel-logos{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:12px !important;
    padding:6px !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.025) !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    height:35px !important;
    border-radius:10px !important;
    border:1px solid rgba(255,255,255,.06) !important;
    background:rgba(255,255,255,.03) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    width:24px !important;
    height:24px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo img{
    display:block !important;
    width:28px !important;
    height:28px !important;
    object-fit:contain !important;
  }

  #inrcyHeroSteps .hmc-channel-logo--inrcy{
    background:rgba(5,13,26,.9) !important;
  }

  #inrcyHeroSteps .hmc-channel-logo--inrcy img{
    width:26px !important;
    height:26px !important;
  }

  #inrcyHeroSteps .hmc-phone-aura{
    bottom:-10px !important;
    width:150% !important;
    height:206px !important;
  }

  #inrcyHeroSteps .hmc-phone-rings{
    bottom:-92px !important;
    width:172% !important;
    height:312px !important;
  }

}

@media(max-width:480px){

  #inrcyHeroSteps .hmc-phone-stage{
    width:min(88%,336px) !important;
    height:428px !important;
  }

  #inrcyHeroSteps .hmc-phone{
    height:428px !important;
    max-width:322px !important;
    padding:28px 14px 16px !important;
    border-radius:44px !important;
  }

  #inrcyHeroSteps .hmc-phone::before{
    top:78px !important;
    height:38px !important;
    box-shadow:
      0 48px 0 0 #6E7A8E,
      0 96px 0 0 #6E7A8E !important;
  }

  #inrcyHeroSteps .hmc-phone::after{
    top:108px !important;
    height:60px !important;
  }

  #inrcyHeroSteps .hmc-phone-top{
    padding-top:13px !important;
    margin-bottom:18px !important;
  }

  #inrcyHeroSteps .hmc-phone-top::before{
    width:88px !important;
    height:16px !important;
  }

  #inrcyHeroSteps .hmc-phone-brand{
    font-size:21px !important;
  }

  #inrcyHeroSteps .hmc-phone-menu{
    font-size:17px !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:14.5px !important;
  }

  #inrcyHeroSteps .hmc-phone-example{
    font-size:11.2px !important;
    margin-left:27px !important;
  }

  #inrcyHeroSteps .hmc-clean-action{
    min-height:54px !important;
  }

  #inrcyHeroSteps .hmc-clean-action b{
    font-size:15px !important;
  }

  #inrcyHeroSteps .hmc-clean-action small{
    font-size:7.4px !important;
  }

  #inrcyHeroSteps .hmc-channel-logos{
    gap:5px !important;
    padding:5px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    height:31px !important;
    border-radius:9px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    width:21px !important;
    height:21px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo img{
    width:24px !important;
    height:24px !important;
  }

}

@media(max-width:360px){

  #inrcyHeroSteps .hmc-phone-stage{
    width:min(90%,320px) !important;
    height:410px !important;
  }

  #inrcyHeroSteps .hmc-phone{
    height:410px !important;
    max-width:306px !important;
    padding:26px 13px 15px !important;
  }

  #inrcyHeroSteps .hmc-phone-label strong{
    font-size:13.8px !important;
  }

  #inrcyHeroSteps .hmc-phone-example{
    font-size:10.8px !important;
  }

  #inrcyHeroSteps .hmc-clean-action{
    min-height:51px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo,
  #inrcyHeroSteps .hmc-channel-more{
    height:29px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo svg{
    width:20px !important;
    height:20px !important;
  }

  #inrcyHeroSteps .hmc-channel-logo img{
    width:22px !important;
    height:22px !important;
  }

}

/* =========================================================
   iNrCy — TÉLÉPHONE PREMIUM RÉALISTE
   CORRECTION DESKTOP + TABLETTE + MOBILE
   Objectif :
   - téléphone plus étroit
   - châssis métallique crédible
   - boutons latéraux visibles
   - Dynamic Island plus intégrée
   - écran OLED plus réaliste
   - reflet glass discret
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

#inrcyHeroSteps .hs-phone-wrap{
  perspective:1400px !important;
}


#inrcyHeroSteps .hs-phone{
  position:relative !important;

  width:276px !important;
  height:610px !important;

  padding:7px !important;

  border-radius:46px !important;

  background:
    linear-gradient(
      110deg,
      #1A2230 0%,
      #8B94A4 7%,
      #303A49 15%,
      #111823 28%,
      #596474 49%,
      #171E2A 72%,
      #6D7788 91%,
      #252D3A 100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  box-shadow:
    0 34px 72px rgba(0,0,0,.48),
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(0,0,0,.35),
    0 0 34px rgba(111,72,255,.08) !important;

  transform:
    perspective(1200px)
    rotateY(-2.2deg)
    rotateZ(-.6deg) !important;

  transform-style:preserve-3d !important;
}


/* Boutons latéraux gauche :
   action + volume haut + volume bas */
#inrcyHeroSteps .hs-phone::before{
  content:"" !important;

  position:absolute !important;

  z-index:8 !important;

  left:-4px !important;
  top:88px !important;

  width:3px !important;
  height:24px !important;

  border-radius:
    3px 0 0 3px !important;

  background:
    linear-gradient(
      180deg,
      #7E8797 0%,
      #313A48 50%,
      #6D7687 100%
    ) !important;

  box-shadow:
    0 43px 0 #596373,
    0 79px 0 #596373,
    -1px 0 1px rgba(255,255,255,.16) !important;
}


/* Bouton power à droite */
#inrcyHeroSteps .hs-phone::after{
  content:"" !important;

  position:absolute !important;

  z-index:8 !important;

  right:-4px !important;
  top:142px !important;

  width:3px !important;
  height:58px !important;

  border-radius:
    0 3px 3px 0 !important;

  background:
    linear-gradient(
      180deg,
      #7E8797 0%,
      #313A48 50%,
      #697385 100%
    ) !important;

  box-shadow:
    1px 0 1px rgba(255,255,255,.12) !important;
}


/* Écran OLED */
#inrcyHeroSteps .hs-screen{
  position:relative !important;

  padding:
    28px
    14px
    15px !important;

  border-radius:40px !important;

  background:
    radial-gradient(
      circle at 48% 0%,
      rgba(25,56,100,.16),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #020A17 0%,
      #061126 34%,
      #07142B 100%
    ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -18px 34px rgba(0,0,0,.12) !important;
}


/* Reflet glass sur la dalle */
#inrcyHeroSteps .hs-screen::before{
  content:"" !important;

  position:absolute !important;

  z-index:1 !important;

  inset:0 !important;

  border-radius:inherit !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,.035) 10%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 74%,
      rgba(255,255,255,.025) 100%
    ) !important;

  opacity:.32 !important;
}


/* Petit reflet bord écran */
#inrcyHeroSteps .hs-screen::after{
  content:"" !important;

  position:absolute !important;

  z-index:1 !important;

  inset:1px !important;

  border:
    1px solid
    rgba(255,255,255,.035) !important;

  border-radius:39px !important;

  pointer-events:none !important;
}


/* Tout le contenu reste au-dessus du reflet */
#inrcyHeroSteps .hs-screen > *{
  position:relative !important;
  z-index:2 !important;
}


/* Dynamic Island plus petite et plus réaliste */
#inrcyHeroSteps .hs-island{
  z-index:5 !important;

  top:9px !important;

  width:76px !important;
  height:20px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      180deg,
      #000 0%,
      #06080D 100%
    ) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.025),
    0 1px 3px rgba(0,0,0,.55) !important;
}


/* Petit capteur presque invisible */
#inrcyHeroSteps .hs-island::after{
  content:"" !important;

  position:absolute !important;

  right:10px !important;
  top:7px !important;

  width:5px !important;
  height:5px !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle at 40% 35%,
      #213957 0%,
      #080B10 70%
    ) !important;

  opacity:.72 !important;
}


/* Header légèrement plus crédible */
#inrcyHeroSteps .hs-phone-head{
  margin-top:8px !important;
}


/* Photo plus proche d'une vraie UI */
#inrcyHeroSteps .hs-phone-photo{
  border-radius:17px !important;

  border:
    1px solid
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.20) !important;
}


/* Halo sous téléphone plus subtil */
#inrcyHeroSteps .hs-floor{
  width:315px !important;
  height:66px !important;

  bottom:-12px !important;

  opacity:.68 !important;

  filter:
    drop-shadow(
      0 0 10px
      rgba(166,47,255,.16)
    ) !important;
}


/* =========================================================
   DESKTOP INTERMÉDIAIRE
   ========================================================= */

@media(min-width:1161px) and (max-width:1530px){

  #inrcyHeroSteps .hs-phone-wrap{
    width:292px !important;
  }

  #inrcyHeroSteps .hs-phone{
    width:264px !important;
    height:594px !important;
  }

  #inrcyHeroSteps .hs-floor{
    width:300px !important;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:1160px){

  #inrcyHeroSteps .hs-phone{
    width:268px !important;
    height:602px !important;

    transform:none !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps .hs-phone-wrap{
    width:100% !important;
    max-width:320px !important;

    margin:
      0 auto !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:258px !important;
    height:592px !important;

    padding:6px !important;

    border-radius:43px !important;

    transform:none !important;
  }


  #inrcyHeroSteps .hs-screen{
    padding:
      27px
      13px
      14px !important;

    border-radius:37px !important;
  }


  #inrcyHeroSteps .hs-screen::after{
    border-radius:36px !important;
  }


  #inrcyHeroSteps .hs-island{
    width:72px !important;
    height:19px !important;

    top:8px !important;
  }


  #inrcyHeroSteps .hs-phone::before{
    left:-4px !important;
    top:82px !important;

    height:22px !important;

    box-shadow:
      0 40px 0 #596373,
      0 74px 0 #596373,
      -1px 0 1px rgba(255,255,255,.14) !important;
  }


  #inrcyHeroSteps .hs-phone::after{
    right:-4px !important;
    top:132px !important;

    height:55px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:142px !important;
    margin-top:17px !important;

    border-radius:15px !important;
  }


  #inrcyHeroSteps .hs-field{
    padding:
      9px
      9px !important;
  }


  #inrcyHeroSteps .hs-publish{
    left:18px !important;
    right:18px !important;

    height:60px !important;

    bottom:18px !important;

    border-radius:16px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:286px !important;
    height:58px !important;

    bottom:-14px !important;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media(max-width:480px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:300px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:250px !important;
    height:580px !important;

    border-radius:41px !important;
  }


  #inrcyHeroSteps .hs-screen{
    border-radius:35px !important;
  }


  #inrcyHeroSteps .hs-screen::after{
    border-radius:34px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:138px !important;
  }


  #inrcyHeroSteps .hs-publish{
    left:17px !important;
    right:17px !important;

    height:58px !important;

    font-size:12px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:276px !important;
  }

}


/* =========================================================
   TRÈS PETITS MOBILES
   320px / 340px
   ========================================================= */

@media(max-width:360px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:282px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:238px !important;
    height:566px !important;

    border-radius:39px !important;
  }


  #inrcyHeroSteps .hs-screen{
    padding:
      26px
      11px
      13px !important;

    border-radius:33px !important;
  }


  #inrcyHeroSteps .hs-screen::after{
    border-radius:32px !important;
  }


  #inrcyHeroSteps .hs-island{
    width:66px !important;
    height:18px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:132px !important;
  }


  #inrcyHeroSteps .hs-field strong{
    font-size:9.7px !important;
  }


  #inrcyHeroSteps .hs-publish{
    left:15px !important;
    right:15px !important;

    height:56px !important;

    font-size:11.5px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:258px !important;
    height:54px !important;
  }

}

/* =========================================================
   iNrCy — FIX PROPORTIONS TÉLÉPHONE + BOUTON
   V2 — PLUS LARGE / MOINS LONG / AUCUN CHEVAUCHEMENT
   DESKTOP + TABLETTE + MOBILE
   ========================================================= */


/* ---------------------------------------------------------
   BASE / DESKTOP
   --------------------------------------------------------- */

#inrcyHeroSteps .hs-phone-wrap{
  width:340px !important;
}


#inrcyHeroSteps .hs-phone{
  width:306px !important;
  height:570px !important;

  border-radius:45px !important;
}


/* L'écran devient une vraie colonne :
   le bouton reste naturellement en bas,
   sans recouvrir les formats. */
#inrcyHeroSteps .hs-screen{
  display:flex !important;
  flex-direction:column !important;

  height:100% !important;

  padding:
    28px
    15px
    15px !important;
}


/* Le bouton n'est plus positionné en absolute :
   c'était la cause du chevauchement visible. */
#inrcyHeroSteps .hs-publish{
  position:relative !important;

  left:auto !important;
  right:auto !important;
  bottom:auto !important;

  width:100% !important;

  min-height:54px !important;
  height:54px !important;

  margin:
    auto
    0
    0 !important;

  flex:0 0 54px !important;
}


/* On resserre un peu l'UI interne pour garder
   une proportion de smartphone plus naturelle. */
#inrcyHeroSteps .hs-phone-photo{
  height:165px !important;

  margin-top:18px !important;
}


#inrcyHeroSteps .hs-field{
  margin-top:9px !important;

  padding:
    9px
    10px !important;
}


#inrcyHeroSteps .hs-format-grid{
  margin-top:9px !important;

  gap:6px !important;
}


#inrcyHeroSteps .hs-format{
  min-height:42px !important;
}


#inrcyHeroSteps .hs-floor{
  width:338px !important;

  bottom:-13px !important;
}


/* ---------------------------------------------------------
   DESKTOP INTERMÉDIAIRE / TABLETTE
   --------------------------------------------------------- */

@media(min-width:761px) and (max-width:1530px){

  #inrcyHeroSteps .hs-phone-wrap{
    width:326px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:294px !important;
    height:558px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:158px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:324px !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  #inrcyHeroSteps .hs-phone-wrap{
    width:100% !important;

    max-width:340px !important;

    margin:
      0 auto !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:286px !important;
    height:530px !important;

    padding:6px !important;

    border-radius:42px !important;
  }


  #inrcyHeroSteps .hs-screen{
    padding:
      26px
      13px
      13px !important;

    border-radius:36px !important;
  }


  #inrcyHeroSteps .hs-screen::after{
    border-radius:35px !important;
  }


  #inrcyHeroSteps .hs-island{
    width:72px !important;
    height:18px !important;

    top:8px !important;
  }


  #inrcyHeroSteps .hs-phone-head{
    margin-top:5px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:145px !important;

    margin-top:14px !important;
  }


  #inrcyHeroSteps .hs-field{
    margin-top:8px !important;

    padding:
      8px
      9px !important;
  }


  #inrcyHeroSteps .hs-field small{
    margin-bottom:3px !important;
  }


  #inrcyHeroSteps .hs-field strong{
    font-size:10px !important;

    line-height:1.32 !important;
  }


  #inrcyHeroSteps .hs-format-grid{
    margin-top:8px !important;

    gap:6px !important;
  }


  #inrcyHeroSteps .hs-format{
    min-height:39px !important;
  }


  #inrcyHeroSteps .hs-publish{
    width:100% !important;

    min-height:54px !important;
    height:54px !important;

    flex-basis:54px !important;

    margin:
      auto
      0
      0 !important;

    border-radius:15px !important;

    font-size:12px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:312px !important;
    height:55px !important;

    bottom:-14px !important;
  }

}


/* ---------------------------------------------------------
   PETITS MOBILES
   --------------------------------------------------------- */

@media(max-width:480px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:326px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:278px !important;
    height:518px !important;

    border-radius:40px !important;
  }


  #inrcyHeroSteps .hs-screen{
    padding:
      25px
      12px
      12px !important;

    border-radius:34px !important;
  }


  #inrcyHeroSteps .hs-screen::after{
    border-radius:33px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:140px !important;
  }


  #inrcyHeroSteps .hs-field strong{
    font-size:9.8px !important;
  }


  #inrcyHeroSteps .hs-format{
    min-height:38px !important;
  }


  #inrcyHeroSteps .hs-publish{
    height:52px !important;
    min-height:52px !important;
    flex-basis:52px !important;

    font-size:11.8px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:302px !important;
  }

}


/* ---------------------------------------------------------
   TRÈS PETITS MOBILES — 320 / 340 / 360
   --------------------------------------------------------- */

@media(max-width:360px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:300px !important;
  }


  #inrcyHeroSteps .hs-phone{
    width:264px !important;
    height:500px !important;

    border-radius:38px !important;
  }


  #inrcyHeroSteps .hs-screen{
    padding:
      24px
      11px
      11px !important;

    border-radius:32px !important;
  }


  #inrcyHeroSteps .hs-screen::after{
    border-radius:31px !important;
  }


  #inrcyHeroSteps .hs-island{
    width:64px !important;
    height:17px !important;
  }


  #inrcyHeroSteps .hs-phone-photo{
    height:132px !important;

    margin-top:12px !important;
  }


  #inrcyHeroSteps .hs-field{
    margin-top:7px !important;

    padding:
      7px
      8px !important;
  }


  #inrcyHeroSteps .hs-field strong{
    font-size:9.4px !important;
  }


  #inrcyHeroSteps .hs-format-grid{
    margin-top:7px !important;

    gap:5px !important;
  }


  #inrcyHeroSteps .hs-format{
    min-height:36px !important;
  }


  #inrcyHeroSteps .hs-publish{
    height:50px !important;
    min-height:50px !important;
    flex-basis:50px !important;

    font-size:11.2px !important;
  }


  #inrcyHeroSteps .hs-floor{
    width:286px !important;
    height:50px !important;
  }

}

/* =========================================================
   FIX FINAL — CARTE "CHOIX IA"
   Corrige le léger chevauchement icône / texte
   DESKTOP + MOBILE
   ========================================================= */

#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2){
  position:relative !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:4px !important;

  overflow:hidden !important;
}


/* On masque totalement le contenu d'origine pour éviter
   tout micro-chevauchement résiduel */
#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2) b,
#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2) span{
  display:none !important;
}


#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::before{
  content:"🤖" !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  color:#D4DCEC !important;

  font-size:11px !important;
  line-height:1 !important;

  text-align:center !important;
}


#inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::after{
  content:"Choix IA" !important;

  position:static !important;

  display:block !important;

  transform:none !important;

  width:auto !important;

  margin:0 !important;
  padding:0 !important;

  color:#8997B1 !important;

  font-size:7px !important;
  line-height:1.05 !important;

  font-weight:500 !important;

  text-align:center !important;
  white-space:nowrap !important;
}


@media(max-width:760px){

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2){
    gap:3px !important;
  }

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::before{
    font-size:10px !important;
  }

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::after{
    font-size:6.6px !important;
  }

}


@media(max-width:360px){

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::before{
    font-size:9px !important;
  }

  #inrcyHeroSteps .hs-format-grid .hs-format:nth-child(2)::after{
    font-size:6.2px !important;
  }

}

/* =========================================================
   iNrCy — TÉLÉPHONE ÉTAPE 2
   V4 — PLUS CRÉDIBLE, PLUS LARGE, MOINS LONG
   + BOUTONS LATÉRAUX VISIBLES
   DESKTOP + TABLETTE + MOBILE
   ========================================================= */

/* Le conteneur doit laisser voir les boutons latéraux */
#inrcyHeroSteps .hs-phone-wrap{
  overflow:visible !important;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

#inrcyHeroSteps .hs-phone-wrap{
  width:352px !important;
}

#inrcyHeroSteps .hs-phone{
  width:318px !important;
  height:548px !important;

  padding:6px !important;

  border-radius:44px !important;

  background:
    linear-gradient(
      112deg,
      #202938 0%,
      #9AA3B2 7%,
      #394353 15%,
      #171F2A 30%,
      #667183 50%,
      #1D2531 70%,
      #7B8597 92%,
      #303847 100%
    ) !important;

  border:1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 30px 66px rgba(0,0,0,.46),
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(0,0,0,.30) !important;
}

#inrcyHeroSteps .hs-screen{
  height:100% !important;

  padding:
    27px
    14px
    14px !important;

  border-radius:38px !important;
}

#inrcyHeroSteps .hs-screen::after{
  border-radius:37px !important;
}

#inrcyHeroSteps .hs-island{
  width:74px !important;
  height:19px !important;
  top:9px !important;
}

/* Bouton action + 2 volumes à gauche */
#inrcyHeroSteps .hs-phone::before{
  content:"" !important;

  position:absolute !important;
  z-index:12 !important;

  left:-8px !important;
  top:83px !important;

  display:block !important;

  width:4px !important;
  height:28px !important;

  border-radius:4px 0 0 4px !important;

  background:
    linear-gradient(
      180deg,
      #A2ACBB 0%,
      #566173 48%,
      #808B9C 100%
    ) !important;

  box-shadow:
    0 44px 0 0 #6F7A8C,
    0 84px 0 0 #6F7A8C,
    -1px 0 1px rgba(255,255,255,.14) !important;
}

/* Bouton power à droite */
#inrcyHeroSteps .hs-phone::after{
  content:"" !important;

  position:absolute !important;
  z-index:12 !important;

  right:-8px !important;
  top:134px !important;

  display:block !important;

  width:4px !important;
  height:62px !important;

  border-radius:0 4px 4px 0 !important;

  background:
    linear-gradient(
      180deg,
      #A2ACBB 0%,
      #566173 48%,
      #808B9C 100%
    ) !important;

  box-shadow:
    1px 0 1px rgba(255,255,255,.12) !important;
}

#inrcyHeroSteps .hs-phone-photo{
  height:156px !important;

  margin-top:14px !important;

  border-radius:16px !important;
}

#inrcyHeroSteps .hs-field{
  margin-top:8px !important;

  padding:
    8px
    10px !important;
}

#inrcyHeroSteps .hs-field strong{
  line-height:1.28 !important;
}

#inrcyHeroSteps .hs-format-grid{
  margin-top:8px !important;
  gap:6px !important;
}

#inrcyHeroSteps .hs-format{
  min-height:40px !important;
}

#inrcyHeroSteps .hs-publish{
  min-height:52px !important;
  height:52px !important;

  flex:0 0 52px !important;

  margin:
    auto
    0
    0 !important;

  border-radius:16px !important;
}

#inrcyHeroSteps .hs-floor{
  width:344px !important;
  height:58px !important;
  bottom:-13px !important;
}


/* ---------------------------------------------------------
   TABLETTE / DESKTOP INTERMÉDIAIRE
   --------------------------------------------------------- */

@media(min-width:761px) and (max-width:1530px){

  #inrcyHeroSteps .hs-phone-wrap{
    width:340px !important;
  }

  #inrcyHeroSteps .hs-phone{
    width:306px !important;
    height:536px !important;
  }

  #inrcyHeroSteps .hs-phone-photo{
    height:150px !important;
  }

  #inrcyHeroSteps .hs-floor{
    width:332px !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:348px !important;
    overflow:visible !important;
  }

  #inrcyHeroSteps .hs-phone{
    width:296px !important;
    height:510px !important;

    padding:6px !important;

    border-radius:41px !important;
  }

  #inrcyHeroSteps .hs-screen{
    padding:
      25px
      13px
      13px !important;

    border-radius:35px !important;
  }

  #inrcyHeroSteps .hs-screen::after{
    border-radius:34px !important;
  }

  #inrcyHeroSteps .hs-island{
    width:70px !important;
    height:18px !important;
    top:8px !important;
  }

  #inrcyHeroSteps .hs-phone::before{
    left:-8px !important;
    top:78px !important;

    width:4px !important;
    height:26px !important;

    box-shadow:
      0 41px 0 0 #6F7A8C,
      0 78px 0 0 #6F7A8C,
      -1px 0 1px rgba(255,255,255,.14) !important;
  }

  #inrcyHeroSteps .hs-phone::after{
    right:-8px !important;
    top:124px !important;

    width:4px !important;
    height:58px !important;
  }

  #inrcyHeroSteps .hs-phone-photo{
    height:144px !important;
    margin-top:13px !important;
  }

  #inrcyHeroSteps .hs-field{
    margin-top:8px !important;
    padding:
      8px
      9px !important;
  }

  #inrcyHeroSteps .hs-field strong{
    font-size:10px !important;
  }

  #inrcyHeroSteps .hs-format{
    min-height:38px !important;
  }

  #inrcyHeroSteps .hs-publish{
    min-height:50px !important;
    height:50px !important;

    flex-basis:50px !important;

    font-size:11.8px !important;
  }

  #inrcyHeroSteps .hs-floor{
    width:322px !important;
    height:54px !important;
  }

}


/* ---------------------------------------------------------
   PETITS MOBILES
   --------------------------------------------------------- */

@media(max-width:480px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:334px !important;
  }

  #inrcyHeroSteps .hs-phone{
    width:286px !important;
    height:498px !important;

    border-radius:39px !important;
  }

  #inrcyHeroSteps .hs-screen{
    padding:
      24px
      12px
      12px !important;

    border-radius:33px !important;
  }

  #inrcyHeroSteps .hs-screen::after{
    border-radius:32px !important;
  }

  #inrcyHeroSteps .hs-phone::before{
    left:-7px !important;
    top:74px !important;

    height:24px !important;

    box-shadow:
      0 38px 0 0 #6F7A8C,
      0 73px 0 0 #6F7A8C !important;
  }

  #inrcyHeroSteps .hs-phone::after{
    right:-7px !important;
    top:118px !important;

    height:54px !important;
  }

  #inrcyHeroSteps .hs-phone-photo{
    height:138px !important;
  }

  #inrcyHeroSteps .hs-format{
    min-height:37px !important;
  }

  #inrcyHeroSteps .hs-publish{
    min-height:48px !important;
    height:48px !important;

    flex-basis:48px !important;

    font-size:11.4px !important;
  }

  #inrcyHeroSteps .hs-floor{
    width:312px !important;
  }

}


/* ---------------------------------------------------------
   TRÈS PETITS MOBILES — 320 / 340 / 360
   --------------------------------------------------------- */

@media(max-width:360px){

  #inrcyHeroSteps .hs-phone-wrap{
    max-width:316px !important;
  }

  #inrcyHeroSteps .hs-phone{
    width:272px !important;
    height:482px !important;

    border-radius:37px !important;
  }

  #inrcyHeroSteps .hs-screen{
    padding:
      23px
      11px
      11px !important;

    border-radius:31px !important;
  }

  #inrcyHeroSteps .hs-screen::after{
    border-radius:30px !important;
  }

  #inrcyHeroSteps .hs-island{
    width:64px !important;
    height:17px !important;
  }

  #inrcyHeroSteps .hs-phone::before{
    left:-6px !important;
    top:70px !important;

    width:3px !important;
    height:22px !important;

    box-shadow:
      0 35px 0 0 #6F7A8C,
      0 67px 0 0 #6F7A8C !important;
  }

  #inrcyHeroSteps .hs-phone::after{
    right:-6px !important;
    top:110px !important;

    width:3px !important;
    height:50px !important;
  }

  #inrcyHeroSteps .hs-phone-photo{
    height:132px !important;
    margin-top:12px !important;
  }

  #inrcyHeroSteps .hs-field{
    padding:
      7px
      8px !important;
  }

  #inrcyHeroSteps .hs-field strong{
    font-size:9.4px !important;
  }

  #inrcyHeroSteps .hs-format-grid{
    gap:5px !important;
  }

  #inrcyHeroSteps .hs-format{
    min-height:35px !important;
  }

  #inrcyHeroSteps .hs-publish{
    min-height:46px !important;
    height:46px !important;

    flex-basis:46px !important;

    font-size:10.8px !important;
  }

  #inrcyHeroSteps .hs-floor{
    width:294px !important;
    height:50px !important;
  }

}

/* =========================================================
   iNrCy — OFFRE MOBILE VERTICALE / CENTRÉE
   24/08/2026
   Reprend le rendu de la maquette :
   - prix centré en haut
   - séparateur horizontal
   - essai gratuit centré en dessous
   - calendrier conservé sans décaler le texte
   ========================================================= */

@media(max-width:760px){

  #inrcyHeroSteps .hmc-offer{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;

    gap:0 !important;

    width:100% !important;
    max-width:520px !important;

    margin:
      20px auto
      0 !important;

    padding:
      19px
      20px
      17px !important;

    border-radius:22px !important;
  }

  /* PRIX : groupe parfaitement centré */
  #inrcyHeroSteps .hmc-price{
    width:100% !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
      0 0
      15px !important;

    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    position:relative !important;

    margin:0 !important;

    color:#FFFFFF !important;

    font-size:
      clamp(50px,13.8vw,66px) !important;

    line-height:.9 !important;
    letter-spacing:-.055em !important;
    font-weight:850 !important;

    text-decoration:none !important;
  }

  #inrcyHeroSteps .hmc-price span{
    margin:
      0 0 5px 0 !important;

    padding:0 !important;

    color:#E3E8F1 !important;

    font-size:
      clamp(11px,3vw,14px) !important;

    line-height:1 !important;
    font-weight:750 !important;

    white-space:nowrap !important;
    text-align:center !important;
  }

  /* SÉPARATEUR : horizontal comme sur la maquette */
  #inrcyHeroSteps .hmc-offer-divider{
    position:relative !important;
    z-index:2 !important;

    width:100% !important;
    height:1px !important;

    margin:
      0 auto
      14px !important;

    flex:none !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.08) 10%,
        rgba(255,255,255,.18) 50%,
        rgba(255,255,255,.08) 90%,
        transparent 100%
      ) !important;
  }

  /* ESSAI : les textes restent exactement au centre.
     La 3e colonne invisible équilibre l'icône calendrier. */
  #inrcyHeroSteps .hmc-trial{
    width:100% !important;

    display:grid !important;
    grid-template-columns:
      40px
      minmax(0,max-content)
      40px !important;

    align-items:center !important;
    justify-content:center !important;

    column-gap:10px !important;
    row-gap:0 !important;

    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-trial::after{
    content:"" !important;

    display:block !important;

    width:40px !important;
    height:1px !important;

    grid-column:3 !important;
  }

  #inrcyHeroSteps .hmc-calendar{
    grid-column:1 !important;

    width:38px !important;
    height:38px !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;

    color:#F132D7 !important;
  }

  #inrcyHeroSteps .hmc-calendar svg{
    width:36px !important;
    height:36px !important;
  }

  #inrcyHeroSteps .hmc-trial-copy{
    grid-column:2 !important;

    min-width:0 !important;

    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-trial-copy strong{
    display:block !important;

    margin:0 !important;

    font-size:
      clamp(16px,4.3vw,20px) !important;

    line-height:1.12 !important;
    font-weight:850 !important;

    text-align:center !important;
  }

  #inrcyHeroSteps .hmc-trial-copy span{
    display:block !important;

    margin-top:4px !important;

    color:#D1D8E5 !important;

    font-size:
      clamp(12px,3.25vw,15px) !important;

    line-height:1.25 !important;
    font-weight:500 !important;

    text-align:center !important;
  }

}

/* Petits écrans : on conserve les proportions sans casser le centrage */
@media(max-width:390px){

  #inrcyHeroSteps .hmc-offer{
    padding:
      17px
      14px
      15px !important;
  }

  #inrcyHeroSteps .hmc-price{
    gap:5px !important;

    padding-bottom:
      13px !important;
  }

  #inrcyHeroSteps .hmc-price strong{
    font-size:
      clamp(46px,13.4vw,54px) !important;
  }

  #inrcyHeroSteps .hmc-price span{
    margin-bottom:
      4px !important;

    font-size:
      clamp(10px,2.8vw,12px) !important;
  }

  #inrcyHeroSteps .hmc-offer-divider{
    margin-bottom:
      12px !important;
  }

  #inrcyHeroSteps .hmc-trial{
    grid-template-columns:
      34px
      minmax(0,max-content)
      34px !important;

    column-gap:8px !important;
  }

  #inrcyHeroSteps .hmc-trial::after{
    width:34px !important;
  }

  #inrcyHeroSteps .hmc-calendar,
  #inrcyHeroSteps .hmc-calendar svg{
    width:32px !important;
    height:32px !important;
  }

  #inrcyHeroSteps .hmc-trial-copy strong{
    font-size:
      clamp(15px,4vw,17px) !important;
  }

  #inrcyHeroSteps .hmc-trial-copy span{
    font-size:
      clamp(11px,3vw,13px) !important;
  }

}
/* =========================================================
   INR CY — TÉLÉPHONE MOBILE COUPÉ EN BAS
   On conserve absolument tout le téléphone.
   Seuls les 2 arrondis du bas sont supprimés.
   ========================================================= */

@media(max-width:760px){

  /* TÉLÉPHONE */
  #inrcyHeroSteps .hmc-phone{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }

  /* REFLET / EFFET GLASS DU TÉLÉPHONE */
  #inrcyHeroSteps .hmc-phone-stage::before{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-030cbc4 *//* =========================================================
   INR CY — AUTONOMIE / DIAGRAMME / CITATION
   ========================================================= */

#inrcyAutonomy,
#inrcyAutonomy *{
  box-sizing:border-box;
}

#inrcyAutonomy{
  --navy:#07142b;
  --navy2:#0c1935;
  --panel:#0f1e3d;
  --panel2:#12264a;
  --white:#ffffff;
  --muted:#99a8c4;

  --orange:#ff8a18;
  --orange2:#ff7437;
  --pink:#ff2f92;
  --purple:#a62cff;
  --blue:#168cff;
  --green:#35e28f;

  --gradient:linear-gradient(
    110deg,
    var(--orange2) 0%,
    var(--pink) 35%,
    var(--purple) 68%,
    var(--blue) 100%
  );

  position:relative;
  width:100%;
  padding:36px 20px 70px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(166,44,255,.14), transparent 32%),
    linear-gradient(180deg, #051128 0%, #07142b 50%, #061126 100%);
  font-family:Poppins, Inter, Arial, sans-serif;
  color:var(--white);
}

#inrcyAutonomy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.55;
}

#inrcyAutonomy .ia-wrap{
  position:relative;
  z-index:2;
  max-width:1320px;
  margin:0 auto;
}

#inrcyAutonomy .ia-block{
  position:relative;
  background:linear-gradient(180deg, rgba(15,30,61,.88), rgba(10,22,46,.82));
  border:1px solid rgba(96,116,173,.18);
  border-radius:28px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* =========================================================
   BLOC 1 HERO
   ========================================================= */

#inrcyAutonomy .ia-hero{
  padding:42px 42px 38px;
  text-align:center;
  overflow:hidden;
}

#inrcyAutonomy .ia-hero::after{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  left:50%;
  top:-220px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(166,44,255,.20) 0%, rgba(22,140,255,.08) 45%, transparent 72%);
  filter:blur(8px);
  pointer-events:none;
}

#inrcyAutonomy .ia-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#e9eef9;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#inrcyAutonomy .ia-badge::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gradient);
  box-shadow:0 0 12px rgba(255,47,145,.5);
}

#inrcyAutonomy .ia-hero h2{
  margin:22px auto 16px;
  max-width:980px;
  font-size:clamp(34px,4vw,64px);
  line-height:1.03;
  letter-spacing:-.04em;
  font-weight:800;
}

#inrcyAutonomy .ia-hero h2 span{
  display:block;
  margin-top:6px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#inrcyAutonomy .ia-hero p{
  max-width:900px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

#inrcyAutonomy .ia-hero-points{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:26px;
}

#inrcyAutonomy .ia-hero-points span{
  padding:11px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#f5f8ff;
  font-size:14px;
  font-weight:600;
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

#inrcyAutonomy .ia-process-block{
  margin-top:26px;
  padding:34px;
}

#inrcyAutonomy .ia-section-head{
  margin-bottom:26px;
}

#inrcyAutonomy .ia-mini-title{
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#c0ccdf;
}

#inrcyAutonomy .ia-section-head h3{
  margin:0;
  font-size:clamp(28px,3vw,48px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
}

#inrcyAutonomy .ia-section-head h3 span{
  display:block;
  margin-top:6px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================================================
   PROCESS GRID
   ========================================================= */

#inrcyAutonomy .ia-process-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:34px;
  align-items:center;
}

/* =========================================================
   DIAGRAMME
   ========================================================= */

#inrcyAutonomy .ia-diagram-col{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

#inrcyAutonomy .ia-diagram{
  position:relative;
  width:540px;
  height:540px;
  max-width:100%;
  border-radius:50%;
}

#inrcyAutonomy .ia-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
}

#inrcyAutonomy .ia-ring.ring-1{
  border:1.5px solid rgba(255,255,255,.08);
}

#inrcyAutonomy .ia-ring.ring-2{
  inset:38px;
  border:1px dashed rgba(166,44,255,.35);
  animation:iaRotate 24s linear infinite;
}

#inrcyAutonomy .ia-center{
  position:absolute;
  top:50%;
  left:50%;
  width:220px;
  height:220px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(17,34,67,.95), rgba(10,22,46,.94));
  box-shadow:
    0 0 0 10px rgba(255,255,255,.02),
    0 0 35px rgba(166,44,255,.12);
}

#inrcyAutonomy .ia-center img{
  width:94px;
  height:auto;
  display:block;
  margin-bottom:10px;
}

#inrcyAutonomy .ia-center strong{
  display:block;
  font-size:28px;
  font-weight:800;
  line-height:1;
  margin-bottom:10px;
}

#inrcyAutonomy .ia-center span{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

#inrcyAutonomy .ia-node{
  position:absolute;
  width:150px;
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:14px 14px 14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(18,38,74,.94), rgba(9,22,46,.94));
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(166,44,255,.08);
}

#inrcyAutonomy .ia-node b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--gradient);
  color:#fff;
  font-size:14px;
  font-weight:800;
}

#inrcyAutonomy .ia-node span{
  color:#fff;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}

#inrcyAutonomy .ia-node-1{
  top:22px;
  left:50%;
  transform:translateX(-50%);
}

#inrcyAutonomy .ia-node-2{
  top:110px;
  right:18px;
}

#inrcyAutonomy .ia-node-3{
  bottom:110px;
  right:18px;
}

#inrcyAutonomy .ia-node-4{
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  width:190px;
}

#inrcyAutonomy .ia-node-5{
  top:50%;
  left:14px;
  transform:translateY(-50%);
  width:190px;
}

/* =========================================================
   ETAPES DROITE
   ========================================================= */

#inrcyAutonomy .ia-steps-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#inrcyAutonomy .ia-step-card{
  position:relative;
  display:grid;
  grid-template-columns:44px 42px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:18px 18px 18px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(16,32,62,.96), rgba(10,21,45,.95));
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

#inrcyAutonomy .ia-step-card:hover{
  transform:translateY(-2px);
  border-color:rgba(166,44,255,.34);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

#inrcyAutonomy .ia-step-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--gradient);
  opacity:.95;
}

#inrcyAutonomy .ia-step-arrow{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:22px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#inrcyAutonomy .ia-step-num{
  padding-top:8px;
  font-size:20px;
  font-weight:800;
  line-height:1;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#inrcyAutonomy .ia-step-copy strong{
  display:block;
  margin-bottom:8px;
  font-size:18px;
  line-height:1.25;
  font-weight:800;
  color:#fff;
}

#inrcyAutonomy .ia-step-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

#inrcyAutonomy .ia-step-card--highlight{
  border-color:rgba(255,47,145,.22);
  background:
    linear-gradient(180deg, rgba(26,30,63,.96), rgba(11,20,42,.95));
  box-shadow:0 0 26px rgba(255,47,145,.08);
}

#inrcyAutonomy .ia-step-card--final{
  border-color:rgba(23,140,255,.22);
  box-shadow:0 0 30px rgba(23,140,255,.09);
}

#inrcyAutonomy .ia-step-card--final .ia-step-arrow{
  background:var(--gradient);
  color:#fff;
}

/* =========================================================
   BLOC QUOTE
   ========================================================= */

#inrcyAutonomy .ia-quote-block{
  margin-top:26px;
  padding:52px 34px;
  text-align:center;
  overflow:hidden;
}

#inrcyAutonomy .ia-quote-block::before{
  content:"";
  position:absolute;
  inset:auto 50% -120px auto;
  width:520px;
  height:260px;
  transform:translateX(50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,145,.12), rgba(22,140,255,.08), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}

#inrcyAutonomy .ia-quote-mark{
  font-size:88px;
  line-height:1;
  font-weight:700;
  margin-bottom:6px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#inrcyAutonomy .ia-quote-block h3{
  margin:0 auto 16px;
  max-width:900px;
  font-size:clamp(34px,4vw,64px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:800;
}

#inrcyAutonomy .ia-quote-block h3 span{
  display:block;
  margin-top:5px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#inrcyAutonomy .ia-quote-sub{
  max-width:860px;
  margin:0 auto;
  color:var(--muted);
  font-size:20px;
  line-height:1.7;
}

#inrcyAutonomy .ia-quote-sub strong{
  color:#fff;
  font-weight:700;
}

/* =========================================================
   ANIM
   ========================================================= */

@keyframes iaRotate{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px){

  #inrcyAutonomy .ia-process-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  #inrcyAutonomy .ia-diagram{
    width:500px;
    height:500px;
  }

  #inrcyAutonomy .ia-steps-col{
    max-width:820px;
    width:100%;
    margin:0 auto;
  }
}

@media (max-width: 900px){

  #inrcyAutonomy{
    padding:28px 16px 52px;
  }

  #inrcyAutonomy .ia-hero{
    padding:30px 22px;
  }

  #inrcyAutonomy .ia-process-block,
  #inrcyAutonomy .ia-quote-block{
    padding:24px 20px;
  }

  #inrcyAutonomy .ia-diagram{
    width:420px;
    height:420px;
  }

  #inrcyAutonomy .ia-center{
    width:180px;
    height:180px;
    padding:18px;
  }

  #inrcyAutonomy .ia-center img{
    width:78px;
  }

  #inrcyAutonomy .ia-center strong{
    font-size:23px;
  }

  #inrcyAutonomy .ia-center span{
    font-size:12px;
  }

  #inrcyAutonomy .ia-node{
    width:128px;
    min-height:70px;
    padding:12px;
  }

  #inrcyAutonomy .ia-node-4,
  #inrcyAutonomy .ia-node-5{
    width:160px;
  }

  #inrcyAutonomy .ia-node span{
    font-size:11px;
  }

  #inrcyAutonomy .ia-step-card{
    grid-template-columns:40px 34px 1fr;
    gap:12px;
  }

  #inrcyAutonomy .ia-step-copy strong{
    font-size:16px;
  }
}

@media (max-width: 640px){

  #inrcyAutonomy .ia-hero h2{
    font-size:34px;
  }

  #inrcyAutonomy .ia-hero p{
    font-size:15px;
  }

  #inrcyAutonomy .ia-section-head h3,
  #inrcyAutonomy .ia-quote-block h3{
    font-size:30px;
  }

  #inrcyAutonomy .ia-diagram{
    width:100%;
    max-width:360px;
    height:360px;
  }

  #inrcyAutonomy .ia-ring.ring-2{
    inset:24px;
  }

  #inrcyAutonomy .ia-center{
    width:150px;
    height:150px;
  }

  #inrcyAutonomy .ia-center img{
    width:66px;
  }

  #inrcyAutonomy .ia-center strong{
    font-size:20px;
  }

  #inrcyAutonomy .ia-center span{
    font-size:10.5px;
    line-height:1.4;
  }

  #inrcyAutonomy .ia-node{
    width:104px;
    min-height:62px;
    padding:10px;
    border-radius:14px;
  }

  #inrcyAutonomy .ia-node-4,
  #inrcyAutonomy .ia-node-5{
    width:132px;
  }

  #inrcyAutonomy .ia-node b{
    width:24px;
    height:24px;
    font-size:12px;
  }

  #inrcyAutonomy .ia-node span{
    font-size:9.5px;
    line-height:1.25;
  }

  #inrcyAutonomy .ia-step-card{
    grid-template-columns:1fr;
    gap:10px;
    padding:16px;
  }

  #inrcyAutonomy .ia-step-arrow{
    width:40px;
    height:40px;
  }

  #inrcyAutonomy .ia-step-num{
    padding-top:0;
  }

  #inrcyAutonomy .ia-quote-sub{
    font-size:16px;
  }
}

@media (prefers-reduced-motion: reduce){
  #inrcyAutonomy *{
    animation:none !important;
    transition:none !important;
  }
}
/* =========================================================
   NOUVEL ÉQUILIBRE DES 3 BLOCS
   CLAIR → SOMBRE → CLAIR
   ========================================================= */


/* =========================================================
   BLOC 1 — FOND BLANC
   ========================================================= */

#inrcyAutonomy .ia-hero{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(166,44,255,.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    ) !important;

  border:1px solid #E7EBF2 !important;

  box-shadow:
    0 20px 55px rgba(18,36,72,.07) !important;
}


/* Badge */

#inrcyAutonomy .ia-hero .ia-badge{
  border:1px solid #E2E7EF !important;

  background:#F7F9FC !important;

  color:#475467 !important;

  box-shadow:none !important;
}


/* PREMIÈRE LIGNE DU TITRE */

#inrcyAutonomy .ia-hero h2{
  color:#07142B !important;
}


/* LIGNE EN DÉGRADÉ */

#inrcyAutonomy .ia-hero h2 span{
  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


/* PARAGRAPHE */

#inrcyAutonomy .ia-hero p{
  color:#667085 !important;
}


/* PILLS */

#inrcyAutonomy .ia-hero-points span{
  background:#F7F9FC !important;

  border:1px solid #E2E7EF !important;

  color:#344054 !important;

  box-shadow:
    0 5px 16px rgba(18,36,72,.035) !important;
}


/* =========================================================
   BLOC 2 — FOND BLEU MARINE
   ========================================================= */

#inrcyAutonomy .ia-process-block{
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(166,44,255,.10),
      transparent 28%
    ),
    linear-gradient(
      160deg,
      #0E1D3A,
      #07142B
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;
}


/* PETIT LABEL */

#inrcyAutonomy .ia-process-block .ia-mini-title{
  color:#B6C2D8 !important;
}


/* PREMIÈRE LIGNE DU TITRE */

#inrcyAutonomy .ia-process-block .ia-section-head h3{
  color:#FFFFFF !important;
}


/* LIGNE EN DÉGRADÉ */

#inrcyAutonomy .ia-process-block .ia-section-head h3 span{
  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


/* =========================================================
   BLOC 3 — FOND BLANC
   ========================================================= */

#inrcyAutonomy .ia-quote-block{
  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(166,44,255,.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #FFFFFF,
      #FBFCFF
    ) !important;

  border:
    1px solid
    #E7EBF2 !important;

  box-shadow:
    0 20px 55px rgba(18,36,72,.07) !important;
}


/* GUILLEMETS */

#inrcyAutonomy .ia-quote-mark{
  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


/* PREMIÈRE LIGNE */

#inrcyAutonomy .ia-quote-block h3{
  color:#07142B !important;
}


/* DEUXIÈME LIGNE */

#inrcyAutonomy .ia-quote-block h3 span{
  background:var(--gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


/* SOUS-TITRE */

#inrcyAutonomy .ia-quote-sub{
  color:#667085 !important;
}


/* PARTIE FORTE DU SOUS-TITRE */

#inrcyAutonomy .ia-quote-sub strong{
  color:#07142B !important;
}


/* =========================================================
   FOND GLOBAL DE LA SECTION
   ========================================================= */

#inrcyAutonomy{
  background:
    linear-gradient(
      180deg,
      #F8FAFD 0%,
      #FFFFFF 21%,
      #07142B 42%,
      #07142B 73%,
      #FFFFFF 100%
    ) !important;
}
/* Correction du point 5 dans le diagramme */
#inrcyAutonomy .ia-node-5{
  top:50% !important;
  left:-10px !important;
  transform:translateY(-50%) !important;
  width:185px !important;
}

/* Optionnel : on ajuste aussi un peu le 4 pour mieux équilibrer */
#inrcyAutonomy .ia-node-4{
  bottom:18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:190px !important;
}
/* Repositionnement plus fort du point 5 */
#inrcyAutonomy .ia-node-5{
  top:50% !important;
  left:-62px !important;
  transform:translateY(-50%) !important;
  width:235px !important;
}

/* Petit rééquilibrage global du cercle */
#inrcyAutonomy .ia-node-1{
  top:18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}

#inrcyAutonomy .ia-node-2{
  top:110px !important;
  right:10px !important;
}

#inrcyAutonomy .ia-node-3{
  bottom:118px !important;
  right:10px !important;
}

#inrcyAutonomy .ia-node-4{
  bottom:20px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:205px !important;
}
/* Réduire la marge à droite des blocs 2 et 3 */
#inrcyAutonomy .ia-node-2{
  right:-8px !important;
}

#inrcyAutonomy .ia-node-3{
  right:-8px !important;
}
/* Correction UNIQUEMENT du bloc 5 */
#inrcyAutonomy .ia-node-5{
  top:50% !important;
  left:-110px !important;
  transform:translateY(-50%) !important;
  width:205px !important;
}
/* Bloc 5 — repositionnement fin */
#inrcyAutonomy .ia-node-5{
  top:50% !important;

  left:-60px !important;

  transform:translateY(-50%) !important;

  width:185px !important;

  padding:
    13px
    10px
    13px
    18px !important;
}
/* =========================================================
   FOND GLOBAL PLUS PROPRE
   ========================================================= */

#inrcyAutonomy{
  background:#F7F9FC !important;
}


/* =========================================================
   BLOC 1 — BLANC PROPRE
   ========================================================= */

#inrcyAutonomy .ia-hero{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(166,44,255,.055),
      transparent 32%
    ),
    #FFFFFF !important;

  border:1px solid #E4E9F1 !important;

  box-shadow:
    0 16px 42px rgba(20,35,70,.07) !important;
}


/* =========================================================
   BLOC 2 — BLEU MARINE PROPRE
   ========================================================= */

#inrcyAutonomy .ia-process-block{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(166,44,255,.10),
      transparent 32%
    ),
    #07142B !important;

  border:1px solid rgba(255,255,255,.07) !important;

  box-shadow:
    0 18px 45px rgba(7,20,43,.18) !important;
}


/* =========================================================
   BLOC 3 — BLANC PROPRE
   ========================================================= */

#inrcyAutonomy .ia-quote-block{
  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(166,44,255,.055),
      transparent 34%
    ),
    #FFFFFF !important;

  border:1px solid #E4E9F1 !important;

  box-shadow:
    0 16px 42px rgba(20,35,70,.07) !important;
}


/* =========================================================
   ESPACEMENT ENTRE LES BLOCS
   ========================================================= */

#inrcyAutonomy .ia-process-block{
  margin-top:22px !important;
}

#inrcyAutonomy .ia-quote-block{
  margin-top:25px !important;
}
/* =========================================================
   BLOCS PLUS LARGES + MARGES RÉDUITES
   ========================================================= */

#inrcyAutonomy{
  padding-left:10px !important;
  padding-right:10px !important;
}

#inrcyAutonomy .ia-wrap{
  max-width:1600px !important;
  width:98% !important;
}


/* BLOC 1 */
#inrcyAutonomy .ia-hero{
  width:100% !important;
  max-width:none !important;

  padding-left:28px !important;
  padding-right:28px !important;
}


/* BLOC 2 */
#inrcyAutonomy .ia-process-block{
  width:100% !important;
  max-width:none !important;

  padding-left:28px !important;
  padding-right:28px !important;
}


/* BLOC 3 */
#inrcyAutonomy .ia-quote-block{
  width:100% !important;
  max-width:none !important;

  padding-left:28px !important;
  padding-right:28px !important;
}


/* Réduit aussi l'espace entre les blocs */
#inrcyAutonomy .ia-process-block,
#inrcyAutonomy .ia-quote-block{
  margin-top:18px !important;
}
/* =========================================================
   DIAGRAMME — RESPONSIVE MOBILE CORRIGÉ
   ========================================================= */

@media(max-width:760px){

  #inrcyAutonomy .ia-diagram-col{
    width:100% !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #inrcyAutonomy .ia-diagram{
    width:320px !important;
    height:320px !important;

    max-width:100% !important;

    margin:20px auto 10px !important;
  }

  /* Anneaux */
  #inrcyAutonomy .ia-ring.ring-1{
    inset:8px !important;
  }

  #inrcyAutonomy .ia-ring.ring-2{
    inset:34px !important;
  }

  /* Centre */
  #inrcyAutonomy .ia-center{
    width:145px !important;
    height:145px !important;

    padding:13px !important;
  }

  #inrcyAutonomy .ia-center img{
    width:66px !important;
    margin-bottom:5px !important;
  }

  #inrcyAutonomy .ia-center strong{
    font-size:20px !important;
    margin-bottom:5px !important;
  }

  #inrcyAutonomy .ia-center span{
    font-size:9.5px !important;
    line-height:1.35 !important;
  }

  /* Tous les blocs */
  #inrcyAutonomy .ia-node{
    width:105px !important;
    min-height:58px !important;

    padding:9px 9px !important;

    border-radius:14px !important;
  }

  #inrcyAutonomy .ia-node b{
    width:24px !important;
    height:24px !important;

    font-size:11px !important;
  }

  #inrcyAutonomy .ia-node span{
    font-size:9px !important;
    line-height:1.2 !important;
  }


  /* 1 — haut */
  #inrcyAutonomy .ia-node-1{
    top:4px !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

    width:112px !important;
  }


  /* 2 — haut droite */
  #inrcyAutonomy .ia-node-2{
    top:72px !important;

    right:0 !important;

    left:auto !important;

    width:80px !important;
  }


  /* 3 — bas droite */
  #inrcyAutonomy .ia-node-3{
    top:auto !important;

    bottom:72px !important;

    right:0 !important;

    left:auto !important;

    width:80px !important;
  }


  /* 4 — bas */
  #inrcyAutonomy .ia-node-4{
    bottom:0 !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

    width:145px !important;
  }


 /* 5 — gauche */
#inrcyAutonomy .ia-node-5{
  top:50% !important;

  left:-10px !important; /* le bloc part vers la gauche */

  right:auto !important;

  transform:
    translateY(-50%) !important;

  width:90px !important; /* plus large */

  min-height:0 !important;

  padding:
    8px
    6px
    8px
    9px !important;
}

}
@media(max-width:390px){

  #inrcyAutonomy .ia-diagram{
    width:290px !important;
    height:290px !important;
  }

  #inrcyAutonomy .ia-center{
    width:132px !important;
    height:132px !important;
  }

  #inrcyAutonomy .ia-node{
    width:95px !important;
  }

  #inrcyAutonomy .ia-node-4{
    width:132px !important;
  }

  #inrcyAutonomy .ia-node-5{
    width:95px !important;
  }

}
/* =========================================================
   UNIFORMISATION DES TITRES
   ========================================================= */

/* Desktop */
#inrcyAutonomy .ia-hero h2,
#inrcyAutonomy .ia-section-head h3,
#inrcyAutonomy .ia-quote-block h3,
.inrcy-story-simple h2{
  font-size:clamp(44px,4vw,62px) !important;
  line-height:1.04 !important;
  letter-spacing:-.04em !important;
  font-weight:850 !important;
}


/* Tablette */
@media(max-width:900px){

  #inrcyAutonomy .ia-hero h2,
  #inrcyAutonomy .ia-section-head h3,
  #inrcyAutonomy .ia-quote-block h3,
  .inrcy-story-simple h2{
    font-size:42px !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
  }

}


/* Mobile */
@media(max-width:760px){

  #inrcyAutonomy .ia-hero h2,
  #inrcyAutonomy .ia-section-head h3,
  #inrcyAutonomy .ia-quote-block h3,
  .inrcy-story-simple h2{
    font-size:38px !important;
    line-height:1.06 !important;
    letter-spacing:-.03em !important;
  }

}


/* Petit mobile */
@media(max-width:390px){

  #inrcyAutonomy .ia-hero h2,
  #inrcyAutonomy .ia-section-head h3,
  #inrcyAutonomy .ia-quote-block h3,
  .inrcy-story-simple h2{
    font-size:32px !important;
    line-height:1.06 !important;
  }

}
@media(max-width:760px){

  #inrcyAutonomy .ia-hero{
    text-align:left !important;
  }

  #inrcyAutonomy .ia-hero h2{
    margin-left:0 !important;
    margin-right:0 !important;

    text-align:left !important;

    max-width:100% !important;
  }

  #inrcyAutonomy .ia-hero h2 span{
    text-align:left !important;
  }

  #inrcyAutonomy .ia-hero > p{
    margin-left:0 !important;
    margin-right:0 !important;

    text-align:left !important;

    max-width:100% !important;
  }

}
/* =========================================================
   SYNCHRONISATION DES CARTES À DROITE
   ========================================================= */

#inrcyAutonomy .ia-step-card{
  opacity:.55;

  transform:
    translateX(0)
    scale(.985);

  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease !important;
}


/* Carte correspondant à l'étape active */

#inrcyAutonomy .ia-step-card.ia-side-active{
  opacity:1;

  transform:
    translateX(7px)
    scale(1.018);

  border-color:
    rgba(174,70,255,.58) !important;

  background:
    linear-gradient(
      135deg,
      rgba(24,43,80,.98),
      rgba(12,25,52,.98)
    ) !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,.20),
    0 0 26px rgba(166,47,255,.16),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}


/* Petit halo derrière la carte */

#inrcyAutonomy .ia-step-card::after{
  content:"";

  position:absolute;

  inset:-1px;

  z-index:-1;

  border-radius:inherit;

  opacity:0;

  pointer-events:none;

  background:
    linear-gradient(
      110deg,
      rgba(255,116,55,.22),
      rgba(255,47,145,.20),
      rgba(166,47,255,.22),
      rgba(23,140,255,.18)
    );

  filter:blur(15px);

  transition:
    opacity .4s ease;
}


#inrcyAutonomy .ia-step-card.ia-side-active::after{
  opacity:1;
}


/* ---------------------------------------------------------
   NUMÉRO
   --------------------------------------------------------- */

#inrcyAutonomy
.ia-step-card.ia-side-active
.ia-step-num{

  filter:
    drop-shadow(
      0 0 9px
      rgba(255,47,145,.45)
    );

  transform:
    scale(1.08);
}


/* ---------------------------------------------------------
   FLÈCHE
   --------------------------------------------------------- */

#inrcyAutonomy .ia-step-arrow{
  transition:
    background .4s ease,
    transform .4s ease,
    box-shadow .4s ease !important;
}


#inrcyAutonomy
.ia-step-card.ia-side-active
.ia-step-arrow{

  background:
    linear-gradient(
      135deg,
      #FF7437,
      #FF2F91,
      #A62FFF,
      #178CFF
    ) !important;

  transform:
    translateX(3px)
    scale(1.06);

  box-shadow:
    0 0 18px
    rgba(166,47,255,.35);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

#inrcyAutonomy .ia-step-copy strong{
  transition:
    color .4s ease,
    transform .4s ease,
    text-shadow .4s ease !important;
}


#inrcyAutonomy
.ia-step-card.ia-side-active
.ia-step-copy strong{

  color:#FFFFFF !important;

  transform:
    translateX(2px);

  text-shadow:
    0 0 15px
    rgba(255,255,255,.10);
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

#inrcyAutonomy .ia-step-copy p{
  transition:
    color .4s ease,
    opacity .4s ease !important;
}


#inrcyAutonomy
.ia-step-card.ia-side-active
.ia-step-copy p{

  color:#B7C5DD !important;
  opacity:1;
}


/* Mobile : pas de déplacement latéral */

@media(max-width:640px){

  #inrcyAutonomy .ia-step-card.ia-side-active{
    transform:
      scale(1.015);
  }

}

</style>


<script>
(function(){

  const autonomy =
    document.getElementById(
      'inrcyAutonomy'
    );

  if(!autonomy) return;


  const diagramNodes =
    Array.from(
      autonomy.querySelectorAll(
        '.ia-diagram .ia-node'
      )
    );


  const sideCards =
    Array.from(
      autonomy.querySelectorAll(
        '.ia-steps-col .ia-step-card'
      )
    );


  if(
    !diagramNodes.length ||
    !sideCards.length
  ){
    return;
  }



  /* =========================================================
     SYNCHRONISATION
     ========================================================= */

  function syncCards(){

    diagramNodes.forEach(
      (node,index)=>{

        const card =
          sideCards[index];

        if(!card) return;


        const active =
          node.classList.contains(
            'ia-js-active'
          );


        card.classList.toggle(
          'ia-side-active',
          active
        );

      }
    );

  }



  /* =========================================================
     SURVEILLE L'ANIMATION DU DIAGRAMME
     ========================================================= */

  diagramNodes.forEach(
    node =>{

      const observer =
        new MutationObserver(
          syncCards
        );


      observer.observe(
        node,
        {
          attributes:true,
          attributeFilter:[
            'class'
          ]
        }
      );

    }
  );



  /* État initial */

  syncCards();

})();
</script>

<!-- =========================================================
     iNrCy — ANIMATION DES 5 ENCADRÉS DU BLOC INTRO
     Ils ressortent chacun leur tour
     ========================================================= -->
<style>

#inrcyAutonomy .ia-hero-points > span{
  position:relative !important;

  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    border-color .42s ease,
    background .42s ease,
    box-shadow .42s ease,
    color .42s ease !important;

  will-change:
    transform,
    box-shadow;
}


/* Encadré actif */

#inrcyAutonomy .ia-hero-points > span.ia-hero-point-active{

  transform:
    translateY(-5px)
    scale(1.045) !important;

  color:
    #17233B !important;

  border-color:
    rgba(166,47,255,.34) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,1),
      rgba(246,248,255,.98)
    ) !important;

  box-shadow:
    0 15px 32px rgba(7,20,43,.10),
    0 0 0 1px rgba(166,47,255,.06),
    0 0 25px rgba(166,47,255,.11) !important;
}


/* Petit reflet premium */

#inrcyAutonomy .ia-hero-points > span::after{

  content:"";

  position:absolute;

  top:-25%;
  left:-55%;

  width:28%;
  height:150%;

  transform:
    skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.82),
      transparent
    );

  opacity:0;

  pointer-events:none;
}


#inrcyAutonomy
.ia-hero-points
> span.ia-hero-point-active::after{

  animation:
    iaHeroPointShine
    .75s ease forwards;
}


@keyframes iaHeroPointShine{

  0%{
    left:-55%;
    opacity:0;
  }

  20%{
    opacity:.9;
  }

  100%{
    left:135%;
    opacity:0;
  }

}


/* Mobile : effet un peu plus discret */

@media(max-width:640px){

  #inrcyAutonomy
  .ia-hero-points
  > span.ia-hero-point-active{

    transform:
      translateY(-3px)
      scale(1.025) !important;
  }

}


/* Accessibilité */

@media(prefers-reduced-motion:reduce){

  #inrcyAutonomy .ia-hero-points > span{
    transition:none !important;
  }

  #inrcyAutonomy
  .ia-hero-points
  > span.ia-hero-point-active::after{
    animation:none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c6fe09f *//* =========================================================
   iNrCy — BLOC SOCIÉTÉ + 3 PHOTOS
   VERSION FINALE
   ========================================================= */

.inrcy-story-simple,
.inrcy-story-simple *{
  box-sizing:border-box;
}


.inrcy-story-simple{
  --navy:#07142B;
  --panel:#0D1C39;

  --orange:#FF8A18;
  --pink:#FF2F92;
  --purple:#A62CFF;
  --blue:#168CFF;

  --gradient:linear-gradient(
    110deg,
    var(--orange) 0%,
    var(--pink) 34%,
    var(--purple) 64%,
    var(--blue) 100%
  );

  position:relative;

  width:100%;

  overflow:hidden;

  padding:
    85px
    20px;

  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(166,44,255,.15),
      transparent 28%
    ),
    radial-gradient(
      circle at 5% 90%,
      rgba(22,140,255,.10),
      transparent 30%
    ),
    var(--navy);

  color:#fff;

  font-family:
    Inter,
    Poppins,
    Arial,
    sans-serif;
}


/* =========================================================
   GRILLE DE FOND
   ========================================================= */

.inrcy-story-simple::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.75;

  background-image:

    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;
}


/* =========================================================
   CONTENEUR
   ========================================================= */

.inrcy-story-simple-inner{
  position:relative;

  z-index:2;

  width:min(1500px,94%);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(520px,1.08fr);

  gap:
    clamp(55px,6vw,95px);

  align-items:center;
}


/* =========================================================
   TEXTE GAUCHE
   ========================================================= */

.inrcy-story-simple-copy{
  max-width:650px;
}


.inrcy-story-simple-label{
  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:21px;

  color:#fff;

  font-size:11px;

  font-weight:850;

  text-transform:uppercase;

  letter-spacing:.11em;
}


.inrcy-story-simple-label > span{
  width:8px;
  height:8px;

  flex:none;

  border-radius:50%;

  background:var(--gradient);

  box-shadow:
    0 0 0 5px
    rgba(255,47,146,.07);
}


/* =========================================================
   TITRE
   ========================================================= */

.inrcy-story-simple h2{
  max-width:680px;

  margin:0;

  color:#fff;

  font-size:
    clamp 39px;

  font-weight:850;

  line-height:1.01;

  letter-spacing:
    clamp(-3.4px,-.25vw,-2px);
}


.inrcy-story-simple h2 > span{
  display:block;

  background:var(--gradient);

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


/* =========================================================
   PARAGRAPHE
   ========================================================= */

.inrcy-story-simple-copy > p{
  max-width:650px;

  margin:
    27px 0 0;

  color:#B7C2D5;

  font-size:16px;

  line-height:1.82;
}


.inrcy-story-simple-copy > p strong{
  color:#fff;

  font-weight:750;
}


/* =========================================================
   OBJECTIF
   ========================================================= */

.inrcy-story-simple-goal{
  display:flex;

  align-items:flex-start;

  gap:13px;

  max-width:610px;

  margin-top:34px;

  padding:
    18px
    20px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:17px;

  background:
    rgba(255,255,255,.055);

  box-shadow:
    0 16px 35px
    rgba(0,0,0,.10);
}


.inrcy-story-simple-goal-icon{
  width:34px;
  height:34px;

  flex:none;

  display:grid;

  place-items:center;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      rgba(255,138,24,.24),
      rgba(255,47,146,.23),
      rgba(22,140,255,.25)
    );

  color:#fff;

  font-size:15px;
}


.inrcy-story-simple-goal strong{
  display:block;

  margin-bottom:4px;

  color:#fff;

  font-size:13px;
}


.inrcy-story-simple-goal span{
  display:block;

  color:#AAB6CB;

  font-size:12px;

  line-height:1.55;
}


/* =========================================================
   GALERIE DROITE
   ========================================================= */

.inrcy-story-simple-gallery{
  width:100%;

  display:flex;

  flex-direction:column;

  gap:17px;
}


/* =========================================================
   PHOTOS
   ========================================================= */

.inrcy-story-simple-photo{
  position:relative;

  width:100%;

  height:235px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:24px;

  background:
    rgba(255,255,255,.05);

  box-shadow:
    0 24px 55px
    rgba(0,0,0,.22);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


.inrcy-story-simple-photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  transition:
    transform .55s ease;
}


/* voile très léger */

.inrcy-story-simple-photo::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(7,20,43,.08),
      transparent 35%,
      rgba(166,44,255,.025)
    );
}


/* hover */

.inrcy-story-simple-photo:hover{
  z-index:4;

  transform:
    translateY(-4px);

  border-color:
    rgba(255,255,255,.24);

  box-shadow:
    0 31px 68px
    rgba(0,0,0,.27);
}


.inrcy-story-simple-photo:hover img{
  transform:
    scale(1.018);
}


/* =========================================================
   PETIT EFFET DÉCALÉ DES PHOTOS
   ========================================================= */

@media(min-width:1101px){

  .inrcy-story-simple-photo:nth-child(1){
    width:94%;

    align-self:flex-start;
  }


  .inrcy-story-simple-photo:nth-child(2){
    width:94%;

    align-self:flex-end;
  }


  .inrcy-story-simple-photo:nth-child(3){
    width:94%;

    align-self:flex-start;
  }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media
(min-width:901px)
and
(max-width:1250px){

  .inrcy-story-simple{
    padding:
      75px
      18px;
  }


  .inrcy-story-simple-inner{
    width:95%;

    grid-template-columns:
      minmax(0,.9fr)
      minmax(430px,1.1fr);

    gap:45px;
  }


  .inrcy-story-simple h2{
    font-size:
      clamp(43px,5vw,60px);
  }


  .inrcy-story-simple-copy > p{
    font-size:14px;
  }


  .inrcy-story-simple-photo{
    height:205px;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .inrcy-story-simple{
    padding:
      68px
      20px;
  }


  .inrcy-story-simple-inner{
    width:min(820px,100%);

    grid-template-columns:1fr;

    gap:45px;
  }


  .inrcy-story-simple-copy{
    max-width:720px;
  }


  .inrcy-story-simple h2{
    max-width:720px;
  }


  .inrcy-story-simple-copy > p{
    max-width:720px;
  }


  .inrcy-story-simple-gallery{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:15px;
  }


  .inrcy-story-simple-photo{
    height:220px;
  }


  .inrcy-story-simple-photo:nth-child(3){
    grid-column:1 / -1;

    width:65%;

    justify-self:center;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .inrcy-story-simple{
    padding:
      55px
      15px;
  }


  .inrcy-story-simple-inner{
    gap:34px;
  }


  .inrcy-story-simple-label{
    margin-bottom:16px;

    font-size:9px;
  }


  .inrcy-story-simple h2{
    font-size:
      clamp(36px,10vw,46px);

    letter-spacing:-1.8px;
  }


  .inrcy-story-simple-copy > p{
    margin-top:20px;

    font-size:13px;

    line-height:1.7;
  }


  .inrcy-story-simple-goal{
    margin-top:25px;

    padding:15px;
  }


  .inrcy-story-simple-gallery{
    display:flex;

    flex-direction:column;

    gap:13px;
  }


  .inrcy-story-simple-photo,
  .inrcy-story-simple-photo:nth-child(3){
    width:100%;

    height:auto;

    min-height:0;

    align-self:stretch;
  }


  .inrcy-story-simple-photo img{
    width:100%;

    height:auto;

    object-fit:contain;
  }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .inrcy-story-simple *,
  .inrcy-story-simple *::before,
  .inrcy-story-simple *::after{
    animation:none !important;
    transition:none !important;
  }

}
/* =========================================================
   GALERIE DROITE — 2 PHOTOS EN HAUT + 1 EN DESSOUS
   ========================================================= */

.inrcy-story-simple-gallery{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:18px !important;

  align-items:start !important;
}


/* PHOTOS */

.inrcy-story-simple-photo{
  position:relative !important;

  width:100% !important;

  height:auto !important;

  min-height:0 !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(255,255,255,.13) !important;

  border-radius:24px !important;

  background:
    rgba(255,255,255,.05) !important;

  box-shadow:
    0 24px 55px
    rgba(0,0,0,.22) !important;

  line-height:0 !important;
}


.inrcy-story-simple-photo img{
  display:block !important;

  width:100% !important;

  height:auto !important;

  max-height:none !important;

  object-fit:contain !important;

  border-radius:23px !important;
}


/* 3e PHOTO — EN DESSOUS */

.inrcy-story-simple-photo:nth-child(3){
  grid-column:1 / -1 !important;

  width:72% !important;

  justify-self:center !important;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .inrcy-story-simple-gallery{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:15px !important;
  }

  .inrcy-story-simple-photo:nth-child(3){
    width:75% !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .inrcy-story-simple-gallery{
    grid-template-columns:1fr !important;

    gap:13px !important;
  }

  .inrcy-story-simple-photo:nth-child(3){
    grid-column:auto !important;

    width:100% !important;
  }

}
/* =========================================================
   ENCADRÉ GLOBAL — BLOC SOCIÉTÉ
   ========================================================= */

.inrcy-story-simple{
  padding:
    28px
    20px !important;

  background:#F6F8FC !important;
}


/* Le vrai grand encadré */

.inrcy-story-simple-inner{
  width:min(1550px,96%) !important;

  margin:0 auto !important;

  padding:
    52px
    48px !important;

  border:
    1px solid
    rgba(255,255,255,.08) !important;

  border-radius:
    30px !important;

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(166,44,255,.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(22,140,255,.09),
      transparent 28%
    ),
    #07142B !important;

  box-shadow:
    0 24px 65px
    rgba(7,20,43,.17) !important;

  overflow:hidden !important;
}


/* Le fond externe ne doit plus être bleu */

.inrcy-story-simple::before{
  display:none !important;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .inrcy-story-simple{
    padding:
      20px
      15px !important;
  }

  .inrcy-story-simple-inner{
    width:100% !important;

    padding:
      38px
      28px !important;

    border-radius:
      24px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .inrcy-story-simple{
    padding:
      14px
      10px !important;
  }

  .inrcy-story-simple-inner{
    padding:
      30px
      18px !important;

    border-radius:
      21px !important;
  }

}
/* =========================================================
   CORRECTION LARGEUR + DÉMARCATION BLANCHE
   ========================================================= */

/* Section externe */
.inrcy-story-simple{
  padding:
    12px
    10px
    20px !important;

  background:#F6F8FC !important;
}


/* Grand bloc bleu */
.inrcy-story-simple-inner{
  width:98% !important;

  max-width:1640px !important;

  margin:
    0 auto !important;

  padding:
    52px
    48px !important;

  border-radius:
    30px !important;
}


/* Supprime tout espace parasite au-dessus */
.inrcy-story-simple{
  margin-top:0 !important;
}

.inrcy-story-simple-inner{
  margin-top:0 !important;
}


/* =========================================================
   DESKTOP LARGE
   ========================================================= */

@media(min-width:1400px){

  .inrcy-story-simple-inner{
    width:98% !important;
    max-width:1600px !important;
  }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .inrcy-story-simple{
    padding:
      10px
      10px
      16px !important;
  }

  .inrcy-story-simple-inner{
    width:100% !important;

    padding:
      38px
      28px !important;

    border-radius:
      24px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .inrcy-story-simple{
    padding:
      8px
      8px
      14px !important;
  }

  .inrcy-story-simple-inner{
    width:100% !important;

    padding:
      30px
      18px !important;

    border-radius:
      21px !important;
  }

}
.inrcy-story-simple{
  background:#F7F9FC !important;
}
.inrcy-story-simple{
  padding-top:18px !important;
}
/* Plus d'espace avant le footer */
.inrcy-story-simple{
  padding-bottom:70px !important;
}
/* =========================================================
   PHOTOS ÉQUIPE — EFFET PREMIUM
   ========================================================= */

.inrcy-story-simple-photo{
  position:relative !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(255,255,255,.16) !important;

  border-radius:24px !important;

  background:
    linear-gradient(
      #0D1C39,
      #0D1C39
    ) padding-box,

    linear-gradient(
      110deg,
      rgba(255,116,55,.45),
      rgba(255,47,145,.35),
      rgba(166,47,255,.40),
      rgba(23,140,255,.38)
    ) border-box !important;

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.22),

    0 0 0 1px
    rgba(255,255,255,.02),

    0 0 22px
    rgba(166,47,255,.08) !important;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease !important;
}


/* léger halo derrière */
.inrcy-story-simple-photo::before{
  content:"";

  position:absolute;

  inset:-16px;

  z-index:-1;

  border-radius:30px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(166,47,255,.17),
      transparent 68%
    );

  filter:blur(20px);

  opacity:.35;

  transition:
    opacity .35s ease;

  pointer-events:none;
}


/* image */
.inrcy-story-simple-photo img{
  display:block !important;

  width:100% !important;

  height:auto !important;

  transition:
    transform .5s ease,
    filter .5s ease !important;
}


/* survol */
.inrcy-story-simple-photo:hover{
  z-index:5;

  transform:
    translateY(-6px)
    scale(1.018) !important;

  box-shadow:
    0 28px 58px
    rgba(0,0,0,.28),

    0 0 28px
    rgba(255,47,145,.12),

    0 0 42px
    rgba(166,47,255,.13) !important;
}


.inrcy-story-simple-photo:hover::before{
  opacity:.7;
}


.inrcy-story-simple-photo:hover img{
  transform:
    scale(1.025);

  filter:
    brightness(1.04)
    contrast(1.02);
}


/* =========================================================
   PETIT EFFET DE LUMIÈRE SUR LE CONTOUR
   ========================================================= */

.inrcy-story-simple-photo::after{
  content:"";

  position:absolute;

  top:-25%;
  left:-35%;

  width:22%;
  height:150%;

  transform:
    skewX(-20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      transparent
    );

  opacity:0;

  pointer-events:none;
}


.inrcy-story-simple-photo:hover::after{
  animation:
    inrcyPhotoShine
    .9s ease;
}


@keyframes inrcyPhotoShine{

  0%{
    left:-35%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  100%{
    left:120%;
    opacity:0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .inrcy-story-simple-photo:hover{
    transform:none !important;
  }

}
/* =========================================================
   STORY INR CY — RESPONSIVE PREMIUM
   ========================================================= */

.inrcy-story-simple-copy,
.inrcy-story-simple-photo{
  will-change:transform, opacity;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .inrcy-story-simple-inner{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .inrcy-story-simple-copy{
    max-width:100% !important;
    text-align:left !important;
  }

  .inrcy-story-simple-gallery{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
  }

  .inrcy-story-simple-photo{
    width:100% !important;
    border-radius:20px !important;
  }

  .inrcy-story-simple-photo:nth-child(3){
    grid-column:1 / -1 !important;
    width:72% !important;
    justify-self:center !important;
  }

  .inrcy-story-simple-photo img{
    width:100% !important;
    height:auto !important;
    object-fit:cover !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .inrcy-story-simple{
    overflow:hidden !important;
  }

  .inrcy-story-simple-inner{
    padding:
      30px
      18px
      34px !important;
  }


  /* -----------------------------------------
     TEXTE
     ----------------------------------------- */

  .inrcy-story-simple-label{
    font-size:9px !important;
    margin-bottom:14px !important;
  }

  .inrcy-story-simple h2{
    font-size:
      clamp(36px,10vw,46px) !important;

    line-height:1.02 !important;

    letter-spacing:-.04em !important;

    margin-bottom:18px !important;
  }

  .inrcy-story-simple-copy > p{
    font-size:13px !important;
    line-height:1.68 !important;
  }

  .inrcy-story-simple-goal{
    margin-top:24px !important;

    padding:
      14px
      14px !important;

    border-radius:16px !important;
  }

  .inrcy-story-simple-goal strong{
    font-size:12px !important;
  }

  .inrcy-story-simple-goal span{
    font-size:11px !important;
  }


  /* -----------------------------------------
     GALERIE
     ----------------------------------------- */

  .inrcy-story-simple-gallery{
    display:flex !important;

    flex-direction:column !important;

    gap:14px !important;

    width:100% !important;

    margin-top:4px !important;
  }


  .inrcy-story-simple-photo,
  .inrcy-story-simple-photo:nth-child(3){
    width:100% !important;

    grid-column:auto !important;

    align-self:stretch !important;

    border-radius:20px !important;

    overflow:hidden !important;

    box-shadow:
      0 16px 32px rgba(0,0,0,.22),
      0 0 22px rgba(166,47,255,.08) !important;

    transform:
      translateY(12px)
      scale(.985);

    opacity:.35;

    transition:
      opacity .55s ease,
      transform .55s cubic-bezier(.2,.8,.2,1),
      box-shadow .55s ease !important;
  }


  .inrcy-story-simple-photo img{
    width:100% !important;

    height:auto !important;

    object-fit:cover !important;

    transition:
      transform .6s ease,
      filter .6s ease !important;
  }


  /* Effet de décalage visuel */
  .inrcy-story-simple-photo:nth-child(1){
    transform:
      translateX(-8px)
      translateY(12px)
      scale(.985);
  }

  .inrcy-story-simple-photo:nth-child(2){
    transform:
      translateX(8px)
      translateY(12px)
      scale(.985);
  }

  .inrcy-story-simple-photo:nth-child(3){
    transform:
      translateX(0)
      translateY(12px)
      scale(.985);
  }


  /* Actif */
  .inrcy-story-simple-photo.story-photo-visible{
    opacity:1;

    transform:
      translateX(0)
      translateY(0)
      scale(1);
  }


  /* Halo léger */
  .inrcy-story-simple-photo.story-photo-visible{
    box-shadow:
      0 20px 38px rgba(0,0,0,.24),
      0 0 26px rgba(255,47,145,.08),
      0 0 36px rgba(166,47,255,.09) !important;
  }


  /* Petit zoom de l'image */
  .inrcy-story-simple-photo.story-photo-visible img{
    transform:scale(1.018);

    filter:
      brightness(1.025)
      contrast(1.01);
  }

}
/* =========================================================
   INR CY — SURBRILLANCE AUTO DES PHOTOS
   Passage automatique toutes les ~5 secondes
   ========================================================= */

/* L'effet reste prêt en permanence */
.inrcy-story-simple-photo::after{
  animation:
    inrcyPhotoShineAuto
    5s
    ease-in-out
    infinite !important;
}


/* On évite de relancer une deuxième animation au hover */
.inrcy-story-simple-photo:hover::after{
  animation:
    inrcyPhotoShineAuto
    5s
    ease-in-out
    infinite !important;
}


/* Animation automatique */
@keyframes inrcyPhotoShineAuto{

  /* temps de repos */
  0%,
  72%{
    left:-35%;
    opacity:0;
  }

  /* apparition du reflet */
  76%{
    left:-35%;
    opacity:1;
  }

  /* passage sur la photo */
  90%{
    left:120%;
    opacity:1;
  }

  /* disparition */
  94%,
  100%{
    left:120%;
    opacity:0;
  }

}


/* =========================================================
   DÉCALAGE ENTRE LES 3 PHOTOS
   pour éviter qu'elles brillent toutes en même temps
   ========================================================= */

.inrcy-story-simple-photo:nth-child(1)::after{
  animation-delay:0s !important;
}

.inrcy-story-simple-photo:nth-child(2)::after{
  animation-delay:1.6s !important;
}

.inrcy-story-simple-photo:nth-child(3)::after{
  animation-delay:3.2s !important;
}/* End custom CSS */</style>{"id":11711,"date":"2026-08-11T18:48:36","date_gmt":"2026-08-11T16:48:36","guid":{"rendered":"https:\/\/inrcy.com\/?page_id=11711"},"modified":"2026-09-14T23:30:56","modified_gmt":"2026-09-14T21:30:56","slug":"inicio","status":"publish","type":"page","link":"https:\/\/inrcy.com\/pt\/","title":{"rendered":"In\u00edcio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11711\" class=\"elementor elementor-11711\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ac0aec e-flex e-con-boxed e-con e-parent\" data-id=\"3ac0aec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64dd825 elementor-widget elementor-widget-html\" data-id=\"64dd825\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"inrcyHeroSteps\">\r\n\r\n  <div class=\"hs-inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         TITRE GLOBAL\r\n         ===================================================== -->\r\n\r\n    <div class=\"hs-hero-heading\">\r\n\r\n      <h1>\r\n\r\n        <span class=\"hs-title-line hs-title-line--white\">\r\n          1 id\u00e9e. 12 contenus.\r\n        <\/span>\r\n\r\n        <span class=\"hs-title-line hs-title-line--shine\">\r\n          Diffus\u00e9s partout en quelques minutes.\r\n        <\/span>\r\n\r\n      <\/h1>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         INTRO MOBILE UNIQUEMENT\r\n         ===================================================== -->\r\n\r\n    <p class=\"hs-mobile-intro\">\r\n      G\u00e9n\u00e9rez, adaptez et diffusez vos contenus sur tous vos canaux depuis un seul espace.\r\n    <\/p>\r\n\r\n    <!-- =====================================================\r\n         LES 4 \u00c9TAPES\r\n         ===================================================== -->\r\n\r\n    <div class=\"hs-flow\" id=\"hsFlow\">\r\n\r\n      <svg\r\n        class=\"hs-connections\"\r\n        id=\"hsConnections\"\r\n        aria-hidden=\"true\">\r\n      <\/svg>\r\n\r\n\r\n\r\n      <!-- =====================================================\r\n           1. GUIDE\r\n           ===================================================== -->\r\n\r\n      <div\r\n        class=\"hs-step hs-source-wrap\"\r\n        id=\"hsStep1\"\r\n      >\r\n\r\n        <div class=\"hs-step-head\">\r\n\r\n          <span class=\"hs-step-num\">\r\n            1.\r\n          <\/span>\r\n\r\n          <div class=\"hs-step-title\">\r\n\r\n            <strong>\r\n              Guidez iNrCy\r\n            <\/strong>\r\n\r\n            <span class=\"hs-step-sub\">\r\n              Une photo, une vid\u00e9o ou quelques mots suffisent pour commencer.\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"hs-source\">\r\n\r\n          <div class=\"hs-source-media\">\r\n\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n              alt=\"Exemple de contenu cr\u00e9\u00e9 dans iNrCy\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"hs-source-copy\">\r\n\r\n            <strong>\r\n              Une nouvelle r\u00e9alisation \u00e0 partager \u2728\r\n            <\/strong>\r\n\r\n            <span>\r\n              Ajoutez votre id\u00e9e, votre texte et votre visuel.\r\n              iNrCy s'occupe de la suite.\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =====================================================\r\n           2. INR CY ADAPTE\r\n           ===================================================== -->\r\n\r\n      <div\r\n        class=\"hs-step hs-phone-wrap\"\r\n        id=\"hsStep2\"\r\n      >\r\n\r\n        <div class=\"hs-step-head\">\r\n\r\n          <span class=\"hs-step-num\">\r\n            2.\r\n          <\/span>\r\n\r\n          <div class=\"hs-step-title\">\r\n\r\n            <strong>\r\n              iNrCy adapte les contenus \u00e0 chaque canal\r\n            <\/strong>\r\n\r\n            <span class=\"hs-step-sub\">\r\n              12 contenus uniques et intelligents, pens\u00e9s pour chaque support.\r\n             \r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <div\r\n          class=\"hs-phone\"\r\n          id=\"hsPhone\"\r\n        >\r\n\r\n          <div class=\"hs-screen\">\r\n\r\n\r\n            <div class=\"hs-island\"><\/div>\r\n\r\n\r\n\r\n            <!-- HEADER T\u00c9L\u00c9PHONE -->\r\n\r\n            <div class=\"hs-phone-head\">\r\n\r\n              <div class=\"hs-brand\">\r\n\r\n                <span\r\n                  class=\"hs-brand-mark\"\r\n                  style=\"\r\n                    background:transparent!important;\r\n                    overflow:hidden!important;\r\n                    padding:0!important;\r\n                  \"\r\n                >\r\n\r\n                  <img decoding=\"async\"\r\n                    src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2025\/09\/cropped-cropped-Design-sans-titre-26-178x59.png\"\r\n                    alt=\"Logo iNrCy\"\r\n                    style=\"\r\n                      display:block;\r\n                      width:100%;\r\n                      height:100%;\r\n                      object-fit:contain;\r\n                    \"\r\n                  >\r\n\r\n                <\/span>\r\n\r\n\r\n                <span class=\"hs-brand-name\">\r\n                  iNrCy\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n              <span class=\"hs-phone-menu\">\r\n                \u2022\u2022\u2022\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- PHOTO -->\r\n\r\n            <div class=\"hs-phone-media\">\r\n\r\n              <img decoding=\"async\"\r\n                class=\"hs-phone-photo\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"Contenu adapt\u00e9 par iNrCy\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- TITRE -->\r\n\r\n            <div class=\"hs-field\">\r\n\r\n              <small>\r\n                TITRE ADAPT\u00c9\r\n              <\/small>\r\n\r\n              <strong>\r\n                D\u00e9couvrez notre derni\u00e8re r\u00e9alisation \u2728\r\n              <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- CONTENU -->\r\n\r\n            <div class=\"hs-field\">\r\n\r\n              <small>\r\n                CONTENU PERSONNALIS\u00c9\r\n              <\/small>\r\n\r\n              <strong>\r\n                Le ton, le format et le message sont automatiquement\r\n                ajust\u00e9s selon chaque canal.\r\n              <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- FORMATS -->\r\n\r\n            <div class=\"hs-format-grid\">\r\n\r\n              <div class=\"hs-format\">\r\n                <b>\u25a7<\/b>\r\n                <span>Image<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"hs-format\">\r\n                <b>\u25a4<\/b>\r\n                <span>Carrousel<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"hs-format\">\r\n                <b>\u25b6<\/b>\r\n                <span>Vid\u00e9o<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"hs-format\">\r\n                <b>Aa<\/b>\r\n                <span>Texte<\/span>\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"hs-publish\">\r\n              12 contenus pr\u00eats\r\n              <span>\u26a1<\/span>\r\n            <\/div>\r\n\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"hs-floor\"><\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n    <div class=\"hs-ai-pill hs-ai-pill--combined\">\r\n\r\n  <span>\u2726<\/span>\r\n\r\n  <strong>12 contenus uniques g\u00e9n\u00e9r\u00e9s<\/strong>\r\n\r\n  <span class=\"hs-ai-separator\">\u2022<\/span>\r\n\r\n  Programmation automatique avec iNr\u2019Agent IA\r\n\r\n<\/div>\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =====================================================\r\n           3. DIFFUSION SUR 12 CANAUX\r\n           ===================================================== -->\r\n\r\n      <div\r\n        class=\"hs-step hs-channels-wrap\"\r\n        id=\"hsStep3\"\r\n      >\r\n\r\n        <div class=\"hs-step-head\">\r\n\r\n          <span class=\"hs-step-num\">\r\n            3.\r\n          <\/span>\r\n\r\n          <div class=\"hs-step-title\">\r\n\r\n            <strong>\r\n              Diffus\u00e9 partout sur 12 canaux\r\n            <\/strong>\r\n\r\n            <span class=\"hs-step-sub\">\r\n              Publiez vos contenus sur tous les supports s\u00e9lectionn\u00e9s.\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <div class=\"hs-channel-list\">\r\n\r\n\r\n          <!-- FACEBOOK -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Facebook<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-facebook\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"#1877F2\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M13.4 20v-6.1h2.1l.4-2.5h-2.5V9.8c0-.7.2-1.2 1.2-1.2H16V6.4c-.2 0-1-.1-2-.1-2 0-3.3 1.2-3.3 3.5v1.6H8.6v2.5h2.1V20h2.7z\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- INSTAGRAM -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Instagram<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-instagram\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <defs>\r\n\r\n                  <linearGradient\r\n                    id=\"hsIgGrad\"\r\n                    x1=\"0\"\r\n                    y1=\"1\"\r\n                    x2=\"1\"\r\n                    y2=\"0\"\r\n                  >\r\n\r\n                    <stop\r\n                      offset=\"0%\"\r\n                      stop-color=\"#FF8A39\"\r\n                    \/>\r\n\r\n                    <stop\r\n                      offset=\"50%\"\r\n                      stop-color=\"#EF2B91\"\r\n                    \/>\r\n\r\n                    <stop\r\n                      offset=\"100%\"\r\n                      stop-color=\"#7B42FF\"\r\n                    \/>\r\n\r\n                  <\/linearGradient>\r\n\r\n                <\/defs>\r\n\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"url(#hsIgGrad)\"\r\n                \/>\r\n\r\n                <rect\r\n                  x=\"6\"\r\n                  y=\"6\"\r\n                  width=\"12\"\r\n                  height=\"12\"\r\n                  rx=\"4\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.6\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"12\"\r\n                  cy=\"12\"\r\n                  r=\"3.2\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.6\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"16.5\"\r\n                  cy=\"7.8\"\r\n                  r=\"1\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- LINKEDIN -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>LinkedIn<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-linkedin\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"#0A66C2\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"7.2\"\r\n                  cy=\"8\"\r\n                  r=\"1.4\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n                <rect\r\n                  x=\"5.9\"\r\n                  y=\"10\"\r\n                  width=\"2.6\"\r\n                  height=\"8\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M11 10h2.5v1.1c.5-.8 1.4-1.5 3-1.5 2.4 0 3.5 1.5 3.5 4.1V18h-2.7v-3.8c0-1.2-.4-2-1.5-2-1 0-1.7.7-1.7 2V18H11z\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- TIKTOK -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>TikTok<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-tiktok\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"#050505\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M14.8 6.2c.6 1.3 1.5 2.1 2.9 2.3v2.1c-1.1 0-2.1-.3-2.9-.9v4c0 2.2-1.7 4-4 4-1.8 0-3.3-1.5-3.3-3.3 0-1.9 1.5-3.3 3.4-3.3.3 0 .5 0 .8.1v2.2c-.2-.1-.4-.1-.6-.1-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4c1 0 1.4-.8 1.4-1.7V6.2z\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- YOUTUBE -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>YouTube<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-youtube\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  x=\"2.5\"\r\n                  y=\"5.5\"\r\n                  width=\"19\"\r\n                  height=\"13\"\r\n                  rx=\"4.5\"\r\n                  fill=\"#FF0000\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M10 9.2l5 2.8-5 2.8z\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- GOOGLE BUSINESS -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Google Business<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-google\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M17.8 12.2c0-.5 0-.8-.1-1.2H12v2.2h3.3c-.1.7-.6 1.7-1.5 2.3l2 1.5c1.2-1.1 2-2.8 2-4.8z\"\r\n                  fill=\"#4285F4\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M12 18c1.6 0 2.9-.5 3.9-1.4l-2-1.5c-.5.4-1.2.7-1.9.7-1.5 0-2.8-1-3.2-2.3H6.7V15c1 1.9 3 3 5.3 3z\"\r\n                  fill=\"#34A853\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M8.8 13.5c-.1-.4-.2-.8-.2-1.3s.1-.9.2-1.3V9.4H6.7C6.3 10.2 6 11.1 6 12.2s.3 2 .7 2.8z\"\r\n                  fill=\"#FBBC05\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M12 8.5c.9 0 1.8.3 2.4.9l1.8-1.8C14.9 6.4 13.6 6 12 6 9.7 6 7.7 7.3 6.7 9.4l2.1 1.6c.4-1.4 1.7-2.5 3.2-2.5z\"\r\n                  fill=\"#EA4335\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- SITE INTERNET -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Site internet<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-web\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <circle\r\n                  cx=\"12\"\r\n                  cy=\"12\"\r\n                  r=\"10\"\r\n                  fill=\"#287BFF\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M4.5 12h15M12 4.2c2 2.2 3.1 4.9 3.1 7.8S14 17.6 12 19.8M12 4.2C10 6.4 8.9 9.1 8.9 12S10 17.6 12 19.8\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.4\"\r\n                  stroke-linecap=\"round\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- MAIL -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Mail<\/strong>\r\n              <span>Envoi en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-mail\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"#258BFF\"\r\n                \/>\r\n\r\n                <rect\r\n                  x=\"5\"\r\n                  y=\"7\"\r\n                  width=\"14\"\r\n                  height=\"10\"\r\n                  rx=\"2\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.5\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M6 8l6 4.8L18 8\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- PINTEREST -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Pinterest<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-pinterest\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <circle\r\n                  cx=\"12\"\r\n                  cy=\"12\"\r\n                  r=\"11\"\r\n                  fill=\"#E60023\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M12.5 6.5c-3 0-4.6 2.2-4.6 4.5 0 1.1.4 2.1 1.3 2.4.1 0 .2 0 .2-.1l.4-1.4v-.2c-.3-.4-.5-1-.5-1.7 0-1.6 1.2-3.1 3.2-3.1 1.7 0 2.7 1 2.7 2.4 0 1.8-.8 3.3-2 3.3-.7 0-1.2-.6-1-1.3.2-.8.6-1.7.6-2.3 0-.5-.3-.9-.8-.9-.7 0-1.2.7-1.2 1.6 0 .6.2 1 .2 1l-.9 3.8c-.3 1.2 0 2.6.1 2.8 0 .1.1.1.2 0 .1-.1 1-1.3 1.3-2.5l.3-1.2c.2.4.9.8 1.7.8 2.3 0 3.8-2.1 3.8-4.9 0-2.1-1.8-4.1-4.6-4.1z\"\r\n                  fill=\"#fff\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- CARTE DE VISITE -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Carte de visite<\/strong>\r\n              <span>Mise \u00e0 jour en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-card\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <rect\r\n                  x=\"3\"\r\n                  y=\"5.5\"\r\n                  width=\"18\"\r\n                  height=\"13\"\r\n                  rx=\"3\"\r\n                  fill=\"#EEF2F8\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"8\"\r\n                  cy=\"10.2\"\r\n                  r=\"2\"\r\n                  fill=\"#07142B\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M5.8 15c.7-1.7 3.7-1.7 4.4 0\"\r\n                  fill=\"none\"\r\n                  stroke=\"#07142B\"\r\n                  stroke-width=\"1.2\"\r\n                  stroke-linecap=\"round\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M13 9.3h4.6M13 12h4.6M13 14.7h3.2\"\r\n                  fill=\"none\"\r\n                  stroke=\"#07142B\"\r\n                  stroke-width=\"1.2\"\r\n                  stroke-linecap=\"round\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- SITE INR CY -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>Site iNrCy<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div\r\n              class=\"hs-logo hs-inrcy\"\r\n              style=\"\r\n                background:transparent!important;\r\n                padding:0!important;\r\n                overflow:hidden!important;\r\n              \"\r\n            >\r\n\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2025\/09\/cropped-cropped-Design-sans-titre-26-178x59.png\"\r\n                alt=\"Logo iNrCy\"\r\n                style=\"\r\n                  display:block;\r\n                  width:100%;\r\n                  height:100%;\r\n                  object-fit:contain;\r\n                \"\r\n              >\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- INR SEARCH -->\r\n\r\n          <div class=\"hs-channel\">\r\n\r\n            <div class=\"hs-thumb\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                alt=\"\"\r\n              >\r\n            <\/div>\r\n\r\n            <div class=\"hs-channel-copy\">\r\n              <strong>iNr'Search<\/strong>\r\n              <span>Publication en cours<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hs-logo hs-search\">\r\n\r\n              <svg\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <defs>\r\n\r\n                  <linearGradient\r\n                    id=\"hsSearchGrad\"\r\n                    x1=\"0\"\r\n                    y1=\"1\"\r\n                    x2=\"1\"\r\n                    y2=\"0\"\r\n                  >\r\n\r\n                    <stop\r\n                      offset=\"0%\"\r\n                      stop-color=\"#FF7437\"\r\n                    \/>\r\n\r\n                    <stop\r\n                      offset=\"35%\"\r\n                      stop-color=\"#FF2F91\"\r\n                    \/>\r\n\r\n                    <stop\r\n                      offset=\"68%\"\r\n                      stop-color=\"#A62FFF\"\r\n                    \/>\r\n\r\n                    <stop\r\n                      offset=\"100%\"\r\n                      stop-color=\"#178CFF\"\r\n                    \/>\r\n\r\n                  <\/linearGradient>\r\n\r\n                <\/defs>\r\n\r\n\r\n                <rect\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  rx=\"7\"\r\n                  fill=\"url(#hsSearchGrad)\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"10.3\"\r\n                  cy=\"10.3\"\r\n                  r=\"4.2\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.7\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M13.5 13.5l4 4\"\r\n                  fill=\"none\"\r\n                  stroke=\"#fff\"\r\n                  stroke-width=\"1.7\"\r\n                  stroke-linecap=\"round\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"hs-status\">\r\n              \u2713\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- PROGRESSION -->\r\n\r\n        <div class=\"hs-progress\">\r\n\r\n          <div class=\"hs-progress-row\">\r\n\r\n            <strong>\r\n              Diffusion multicanale\r\n            <\/strong>\r\n\r\n            <span\r\n              class=\"hs-percent\"\r\n              id=\"hsPercent\"\r\n            >\r\n              0%\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"hs-progress-track\">\r\n\r\n            <div\r\n              class=\"hs-progress-fill\"\r\n              id=\"hsProgressFill\"\r\n            ><\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =====================================================\r\n           4. GESTION + PERFORMANCES\r\n           ===================================================== -->\r\n\r\n      <div\r\n        class=\"hs-step hs-performance-wrap\"\r\n        id=\"hsStep4\"\r\n      >\r\n\r\n        <div class=\"hs-step-head\">\r\n\r\n          <span class=\"hs-step-num\">\r\n            4.\r\n          <\/span>\r\n\r\n          <div class=\"hs-step-title\">\r\n\r\n            <strong>\r\n              Suivez les performances et modifiez vos contenus \u00e0 tout moment\r\n            <\/strong>\r\n\r\n            <span class=\"hs-step-sub\">\r\n              Analysez vos r\u00e9sultats et g\u00e9rez vos publications directement depuis iNrCy.\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             CARD 1 \u2014 MES PUBLICATIONS\r\n             ================================================= -->\r\n\r\n        <div class=\"hs-manage-card\">\r\n\r\n          <div class=\"hs-panel-head\">\r\n\r\n            <div class=\"hs-panel-title\">\r\n\r\n              <strong>\r\n                Mes publications\r\n              <\/strong>\r\n\r\n              <span>\r\n                Modifiez ou supprimez vos contenus en quelques clics\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <div class=\"hs-post-list\">\r\n\r\n\r\n            <!-- PUBLICATION 1 -->\r\n\r\n            <div class=\"hs-post-row\">\r\n\r\n              <div class=\"hs-post-thumb\">\r\n\r\n                <img decoding=\"async\"\r\n                  src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/luxury-holiday-home-scaled.jpg\"\r\n                  alt=\"Publication iNrCy\"\r\n                >\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"hs-post-copy\">\r\n\r\n                <strong>\r\n                  Une nouvelle r\u00e9alisation \u00e0 partager \u2728\r\n                <\/strong>\r\n\r\n                <span>\r\n                  Facebook \u00b7 Instagram \u00b7 LinkedIn \/ Le 10\/08\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"hs-post-actions\">\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"hs-post-btn hs-post-btn--edit\"\r\n                >\r\n                  Modifier\r\n                <\/button>\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"hs-post-btn hs-post-btn--delete\"\r\n                >\r\n                  Supprimer\r\n                <\/button>\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- PUBLICATION 2 -->\r\n\r\n            <div class=\"hs-post-row\">\r\n\r\n              <div class=\"hs-post-thumb\">\r\n\r\n                <img decoding=\"async\"\r\n                  src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/use-recycled-materials-like-bottles-cans-plastic-material-create-unique-ecofriendly-decorations-scaled.jpg\"\r\n                  alt=\"Publication iNrCy\"\r\n                >\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"hs-post-copy\">\r\n\r\n                <strong>\r\n                  Maison d'h\u00f4tes avec vue\r\n                <\/strong>\r\n\r\n                <span>\r\n                  Site internet \u00b7 Google Business \/ Le 17\/07\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"hs-post-actions\">\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"hs-post-btn hs-post-btn--edit\"\r\n                >\r\n                  Modifier\r\n                <\/button>\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"hs-post-btn hs-post-btn--delete\"\r\n                >\r\n                  Supprimer\r\n                <\/button>\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n\r\n\r\n            <!-- PUBLICATION 3 -->\r\n\r\n            <div class=\"hs-post-row\">\r\n\r\n              <div class=\"hs-post-thumb\">\r\n\r\n                <img decoding=\"async\"\r\n                  src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/08\/backyard-villa-with-dining-room-with-matching-table-chairs-scaled.jpg\"\r\n                  alt=\"Publication iNrCy\"\r\n                >\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"hs-post-copy\">\r\n\r\n                <strong>\r\n                  Notre maison d'h\u00f4tes en vid\u00e9o\r\n                <\/strong>\r\n\r\n                <span>\r\n                  YouTube \u00b7 TikTok \u00b7 Facebook \/ Le 08\/07\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"hs-post-actions\">\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"hs-post-btn hs-post-btn--edit\"\r\n                >\r\n                  Modifier\r\n                <\/button>\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"hs-post-btn hs-post-btn--delete\"\r\n                >\r\n                  Supprimer\r\n                <\/button>\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             CARD 2 \u2014 PERFORMANCES\r\n             ================================================= -->\r\n\r\n        <div class=\"hs-analytics-card\">\r\n\r\n          <div class=\"hs-dash-head\">\r\n\r\n            <div class=\"hs-dash-title\">\r\n\r\n              <strong>\r\n                Performance globale\r\n              <\/strong>\r\n\r\n              <span>\r\n                Tous vos canaux r\u00e9unis dans un seul tableau de bord\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"hs-live\">\r\n              \u25cf EN DIRECT\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <div class=\"hs-kpis\">\r\n\r\n\r\n            <div class=\"hs-kpi\">\r\n\r\n              <span>\r\n                VUES\r\n              <\/span>\r\n\r\n              <strong>\r\n                24,8k\r\n              <\/strong>\r\n\r\n              <em>\r\n                \u2197 +18%\r\n              <\/em>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"hs-kpi\">\r\n\r\n              <span>\r\n                INTERACTIONS\r\n              <\/span>\r\n\r\n              <strong>\r\n                1 842\r\n              <\/strong>\r\n\r\n              <em>\r\n                \u2197 +12%\r\n              <\/em>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"hs-kpi\">\r\n\r\n              <span>\r\n                CLICS\r\n              <\/span>\r\n\r\n              <strong>\r\n                768\r\n              <\/strong>\r\n\r\n              <em>\r\n                \u2197 +9%\r\n              <\/em>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- GRAPHIQUE -->\r\n\r\n          <div class=\"hs-chart\">\r\n\r\n            <div class=\"hs-chart-grid\"><\/div>\r\n\r\n\r\n            <svg\r\n              viewBox=\"0 0 260 110\"\r\n              preserveAspectRatio=\"none\"\r\n              aria-hidden=\"true\"\r\n            >\r\n\r\n              <defs>\r\n\r\n                <linearGradient\r\n                  id=\"hsChartGrad\"\r\n                  x1=\"0\"\r\n                  y1=\"0\"\r\n                  x2=\"1\"\r\n                  y2=\"0\"\r\n                >\r\n\r\n                  <stop\r\n                    offset=\"0%\"\r\n                    stop-color=\"#FF7437\"\r\n                  \/>\r\n\r\n                  <stop\r\n                    offset=\"34%\"\r\n                    stop-color=\"#FF2F91\"\r\n                  \/>\r\n\r\n                  <stop\r\n                    offset=\"67%\"\r\n                    stop-color=\"#A62FFF\"\r\n                  \/>\r\n\r\n                  <stop\r\n                    offset=\"100%\"\r\n                    stop-color=\"#178CFF\"\r\n                  \/>\r\n\r\n                <\/linearGradient>\r\n\r\n              <\/defs>\r\n\r\n\r\n              <path\r\n                d=\"\r\n                  M4,92\r\n                  C26,84 34,70 51,73\r\n                  C70,76 75,54 93,56\r\n                  C111,58 116,40 132,45\r\n                  C151,51 161,27 180,32\r\n                  C200,37 208,18 229,20\r\n                  C242,21 248,15 256,9\r\n                \"\r\n                fill=\"none\"\r\n                stroke=\"url(#hsChartGrad)\"\r\n                stroke-width=\"4\"\r\n                stroke-linecap=\"round\"\r\n              \/>\r\n\r\n\r\n              <circle\r\n                cx=\"256\"\r\n                cy=\"9\"\r\n                r=\"5\"\r\n                fill=\"#178CFF\"\r\n              \/>\r\n\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <div class=\"hs-bottom-note\">\r\n\r\n            Un seul espace pour\r\n            <strong>\r\n              cr\u00e9er, diffuser, analyser et faire \u00e9voluer\r\n            <\/strong>\r\n            votre communication.\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n    <!-- FIN .hs-flow -->\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         OFFRE \/ PRIX\r\n         UNIQUE \u2014 SOUS LES 4 \u00c9TAPES\r\n         ===================================================== -->\r\n\r\n   <div class=\"hs-offer-bar\">\r\n\r\n  <div class=\"hs-offer-main\">\r\n\r\n    <div class=\"hs-offer-price-wrap\">\r\n\r\n      <span class=\"hs-offer-only\">\r\n        Seulement\r\n      <\/span>\r\n\r\n      <div class=\"hs-offer-price\">\r\n\r\n        <strong>\r\n         58\u20ac\r\n        <\/strong>\r\n\r\n        <span>\r\n          HT \/ mois\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"hs-offer-separator\"><\/div>\r\n\r\n\r\n    <div class=\"hs-offer-info\">\r\n\r\n      <strong>\r\n        21 jours gratuits\r\n      <\/strong>\r\n\r\n      <span>\r\n        Testez iNrCy sans engagement\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"hs-offer-benefits\">\r\n\r\n    <div class=\"hs-offer-benefit\">\r\n      <span>\u2713<\/span>\r\n      Sans engagement\r\n    <\/div>\r\n\r\n    <div class=\"hs-offer-benefit\">\r\n      <span>\u2713<\/span>\r\n      Jusqu'\u00e0 12 canaux\r\n    <\/div>\r\n\r\n    <div class=\"hs-offer-benefit\">\r\n      <span>\u2713<\/span>\r\n      21 jours d'essai\r\n    <\/div>\r\n\r\n    <div class=\"hs-offer-benefit hs-offer-benefit--gift\">\r\n      <span>\u2713<\/span>\r\n      Cr\u00e9ation des canaux manquants offerte\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  \/* =========================================================\r\n     INR CY \u2014 HERO PREMIUM V2\r\n     ========================================================= *\/\r\n\r\n  const hero =\r\n    document.getElementById('inrcyHeroSteps');\r\n\r\n  if(!hero) return;\r\n\r\n  if(hero.dataset.heroPremium === 'true'){\r\n    return;\r\n  }\r\n\r\n  hero.dataset.heroPremium = 'true';\r\n\r\n\r\n  \/* =========================================================\r\n     \u00c9L\u00c9MENTS\r\n     ========================================================= *\/\r\n\r\n  const flow =\r\n    hero.querySelector('#hsFlow');\r\n\r\n  const svg =\r\n    hero.querySelector('#hsConnections');\r\n\r\n  const phone =\r\n    hero.querySelector('#hsPhone');\r\n\r\n  const percent =\r\n    hero.querySelector('#hsPercent');\r\n\r\n  const progressFill =\r\n    hero.querySelector('#hsProgressFill');\r\n\r\n  const title =\r\n    hero.querySelector('.hs-hero-heading');\r\n\r\n  const titleLines =\r\n    Array.from(\r\n      hero.querySelectorAll('.hs-title-line')\r\n    );\r\n\r\n  const steps = [\r\n    hero.querySelector('#hsStep1'),\r\n    hero.querySelector('#hsStep2'),\r\n    hero.querySelector('#hsStep3'),\r\n    hero.querySelector('#hsStep4')\r\n  ].filter(Boolean);\r\n\r\n  const channels =\r\n    Array.from(\r\n      hero.querySelectorAll('.hs-channel')\r\n    );\r\n\r\n  const phoneFields =\r\n    Array.from(\r\n      hero.querySelectorAll(\r\n        '.hs-phone .hs-field, .hs-phone .hs-format, .hs-phone .hs-publish'\r\n      )\r\n    );\r\n\r\n  const postRows =\r\n    Array.from(\r\n      hero.querySelectorAll('.hs-post-row')\r\n    );\r\n\r\n  const kpis =\r\n    Array.from(\r\n      hero.querySelectorAll('.hs-kpi')\r\n    );\r\n\r\n  const chart =\r\n    hero.querySelector('.hs-chart');\r\n\r\n  const chartPath =\r\n    chart?.querySelector('svg path');\r\n\r\n  const chartDot =\r\n    chart?.querySelector('svg circle');\r\n\r\n  const offer =\r\n    hero.querySelector('.hs-offer-bar');\r\n\r\n  const offerCTA =\r\n    hero.querySelector('.hs-offer-cta');\r\n\r\n\r\n  \/* =========================================================\r\n     CONFIG\r\n     ========================================================= *\/\r\n\r\n  const reduceMotion =\r\n    window.matchMedia(\r\n      '(prefers-reduced-motion: reduce)'\r\n    );\r\n\r\n  const desktop =\r\n    window.matchMedia(\r\n      '(min-width: 1161px)'\r\n    );\r\n\r\n  const tablet =\r\n    window.matchMedia(\r\n      '(min-width: 761px) and (max-width: 1160px)'\r\n    );\r\n\r\n  const mobile =\r\n    window.matchMedia(\r\n      '(max-width: 760px)'\r\n    );\r\n\r\n\r\n  let heroVisible = false;\r\n\r\n  let masterTimer = null;\r\n\r\n  let channelTimer = null;\r\n\r\n  let restartTimer = null;\r\n\r\n  let resizeTimer = null;\r\n\r\n  let activeStep = -1;\r\n\r\n  let animationStarted = false;\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     CSS PREMIUM INJECT\u00c9 PAR LE JS\r\n     ========================================================= *\/\r\n\r\n  const style =\r\n    document.createElement('style');\r\n\r\n  style.textContent = `\r\n\r\n    \/* =======================================================\r\n       HERO PREMIUM \u2014 STATES\r\n       ======================================================= *\/\r\n\r\n    #inrcyHeroSteps{\r\n      isolation:isolate;\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       ENTR\u00c9E G\u00c9N\u00c9RALE\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps .hs-hero-heading,\r\n    #inrcyHeroSteps .hs-step,\r\n    #inrcyHeroSteps .hs-offer-bar{\r\n\r\n      will-change:\r\n        transform,\r\n        opacity;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps.hs-js-ready\r\n    .hs-hero-heading{\r\n\r\n      opacity:0;\r\n\r\n      transform:\r\n        translateY(20px);\r\n\r\n      transition:\r\n        opacity .75s ease,\r\n        transform .75s cubic-bezier(.2,.8,.2,1);\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps.hs-js-ready\r\n    .hs-step{\r\n\r\n      opacity:.30;\r\n\r\n      transform:\r\n        translateY(16px)\r\n        scale(.985);\r\n\r\n      transition:\r\n        opacity .55s ease,\r\n        transform .55s cubic-bezier(.2,.8,.2,1),\r\n        filter .55s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps.hs-js-ready\r\n    .hs-offer-bar{\r\n\r\n      opacity:0;\r\n\r\n      transform:\r\n        translateY(18px)\r\n        scale(.985);\r\n\r\n      transition:\r\n        opacity .65s ease,\r\n        transform .65s cubic-bezier(.2,.8,.2,1),\r\n        box-shadow .65s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps.hs-visible\r\n    .hs-hero-heading{\r\n\r\n      opacity:1;\r\n\r\n      transform:\r\n        translateY(0);\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       \u00c9TAPE ACTIVE\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps .hs-step.hs-stage-active{\r\n\r\n      opacity:1 !important;\r\n\r\n      transform:\r\n        translateY(-4px)\r\n        scale(1.015) !important;\r\n\r\n      filter:\r\n        brightness(1.06);\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps .hs-step.hs-stage-past{\r\n\r\n      opacity:.88 !important;\r\n\r\n      transform:\r\n        translateY(0)\r\n        scale(1) !important;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps .hs-step-head{\r\n\r\n      transition:\r\n        transform .45s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-stage-active\r\n    .hs-step-head{\r\n\r\n      transform:\r\n        translateY(-2px);\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps .hs-step-num{\r\n\r\n      transition:\r\n        transform .4s ease,\r\n        filter .4s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-stage-active\r\n    .hs-step-num{\r\n\r\n      transform:\r\n        scale(1.14);\r\n\r\n      filter:\r\n        drop-shadow(\r\n          0 0 9px\r\n          rgba(255,47,145,.5)\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       HALO \u00c9TAPE ACTIVE\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps .hs-step::after{\r\n\r\n      content:\"\";\r\n\r\n      position:absolute;\r\n\r\n      inset:-15px;\r\n\r\n      z-index:-1;\r\n\r\n      border-radius:30px;\r\n\r\n      opacity:0;\r\n\r\n      pointer-events:none;\r\n\r\n      background:\r\n        radial-gradient(\r\n          circle at 50% 50%,\r\n          rgba(166,47,255,.12),\r\n          transparent 68%\r\n        );\r\n\r\n      filter:\r\n        blur(18px);\r\n\r\n      transition:\r\n        opacity .5s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-stage-active::after{\r\n\r\n      opacity:1;\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       TITRE \u2014 IMPULSION\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps\r\n    .hs-title-line{\r\n\r\n      transition:\r\n        filter .6s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps.hs-title-boost\r\n    .hs-title-line--shine{\r\n\r\n      filter:\r\n        drop-shadow(\r\n          0 0 16px\r\n          rgba(166,47,255,.28)\r\n        )\r\n        drop-shadow(\r\n          0 0 30px\r\n          rgba(23,140,255,.12)\r\n        ) !important;\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       T\u00c9L\u00c9PHONE\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps .hs-phone{\r\n\r\n      will-change:transform;\r\n\r\n      transition:\r\n        transform .20s ease-out,\r\n        box-shadow .45s ease !important;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-stage-active\r\n    .hs-phone{\r\n\r\n      box-shadow:\r\n        0 38px 75px rgba(0,0,0,.52),\r\n        0 0 42px rgba(166,47,255,.16),\r\n        0 0 72px rgba(23,140,255,.08) !important;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-phone\r\n    .hs-field,\r\n\r\n    #inrcyHeroSteps\r\n    .hs-phone\r\n    .hs-format{\r\n\r\n      transition:\r\n        opacity .45s ease,\r\n        transform .45s ease,\r\n        background .45s ease,\r\n        border-color .45s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-phone\r\n    .hs-phone-animate{\r\n\r\n      animation:\r\n        hsPhoneContentPulse\r\n        .6s ease both;\r\n\r\n    }\r\n\r\n\r\n    @keyframes hsPhoneContentPulse{\r\n\r\n      0%{\r\n        opacity:.4;\r\n        transform:translateY(5px);\r\n      }\r\n\r\n      100%{\r\n        opacity:1;\r\n        transform:translateY(0);\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       CANAUX\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps .hs-channel{\r\n\r\n      will-change:\r\n        transform,\r\n        opacity;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps .hs-channel.active{\r\n\r\n      animation:\r\n        hsChannelArrival\r\n        .42s cubic-bezier(.2,.8,.2,1) both;\r\n\r\n    }\r\n\r\n\r\n    @keyframes hsChannelArrival{\r\n\r\n      0%{\r\n        opacity:.22;\r\n        transform:\r\n          translateX(13px)\r\n          scale(.975);\r\n      }\r\n\r\n      60%{\r\n        transform:\r\n          translateX(-2px)\r\n          scale(1.01);\r\n      }\r\n\r\n      100%{\r\n        opacity:1;\r\n        transform:\r\n          translateX(0)\r\n          scale(1);\r\n      }\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-channel.active\r\n    .hs-logo{\r\n\r\n      animation:\r\n        hsLogoPulse\r\n        .5s ease;\r\n\r\n    }\r\n\r\n\r\n    @keyframes hsLogoPulse{\r\n\r\n      0%{\r\n        transform:scale(.78);\r\n      }\r\n\r\n      65%{\r\n        transform:scale(1.12);\r\n      }\r\n\r\n      100%{\r\n        transform:scale(1);\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       PROGRESSION\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps\r\n    .hs-progress-fill{\r\n\r\n      box-shadow:\r\n        0 0 10px\r\n        rgba(166,47,255,.38);\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-percent{\r\n\r\n      transition:\r\n        transform .25s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-percent.hs-percent-pop{\r\n\r\n      transform:scale(1.15);\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       \u00c9TAPE 4 \u2014 POSTS\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps\r\n    .hs-post-row{\r\n\r\n      transition:\r\n        opacity .45s ease,\r\n        transform .45s ease,\r\n        border-color .45s ease,\r\n        background .45s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-post-row.hs-post-reveal{\r\n\r\n      animation:\r\n        hsPostReveal\r\n        .5s cubic-bezier(.2,.8,.2,1) both;\r\n\r\n    }\r\n\r\n\r\n    @keyframes hsPostReveal{\r\n\r\n      0%{\r\n        opacity:.25;\r\n        transform:\r\n          translateX(8px)\r\n          scale(.985);\r\n      }\r\n\r\n      100%{\r\n        opacity:1;\r\n        transform:\r\n          translateX(0)\r\n          scale(1);\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       KPI\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps\r\n    .hs-kpi{\r\n\r\n      transition:\r\n        transform .4s ease,\r\n        border-color .4s ease,\r\n        box-shadow .4s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-kpi.hs-kpi-active{\r\n\r\n      transform:\r\n        translateY(-3px);\r\n\r\n      border-color:\r\n        rgba(166,47,255,.26) !important;\r\n\r\n      box-shadow:\r\n        0 10px 22px\r\n        rgba(0,0,0,.12);\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       GRAPH\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps\r\n    .hs-chart\r\n    svg path{\r\n\r\n      transition:\r\n        filter .5s ease;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-chart.hs-chart-active\r\n    svg path{\r\n\r\n      filter:\r\n        drop-shadow(\r\n          0 0 6px\r\n          rgba(166,47,255,.42)\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* -------------------------------------------------------\r\n       OFFRE\r\n       ------------------------------------------------------- *\/\r\n\r\n    #inrcyHeroSteps\r\n    .hs-offer-bar.hs-offer-show{\r\n\r\n      opacity:1;\r\n\r\n      transform:\r\n        translateY(0)\r\n        scale(1);\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-offer-bar.hs-offer-glow{\r\n\r\n      box-shadow:\r\n        0 25px 60px rgba(0,0,0,.24),\r\n        0 0 32px rgba(166,47,255,.14),\r\n        0 0 52px rgba(23,140,255,.07) !important;\r\n\r\n    }\r\n\r\n\r\n    #inrcyHeroSteps\r\n    .hs-offer-cta.hs-cta-pulse{\r\n\r\n      animation:\r\n        hsCtaPulse\r\n        1.7s ease-in-out\r\n        infinite;\r\n\r\n    }\r\n\r\n\r\n    @keyframes hsCtaPulse{\r\n\r\n      0%,\r\n      100%{\r\n\r\n        box-shadow:\r\n          0 16px 34px\r\n          rgba(126,46,255,.26);\r\n\r\n      }\r\n\r\n      50%{\r\n\r\n        box-shadow:\r\n          0 18px 38px\r\n          rgba(255,47,145,.25),\r\n          0 0 24px\r\n          rgba(166,47,255,.16);\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =======================================================\r\n       MOBILE\r\n       ======================================================= *\/\r\n\r\n    @media(max-width:760px){\r\n\r\n      #inrcyHeroSteps.hs-js-ready\r\n      .hs-step{\r\n\r\n        opacity:.32;\r\n\r\n        transform:\r\n          translateY(18px)\r\n          scale(.99);\r\n\r\n      }\r\n\r\n\r\n      #inrcyHeroSteps\r\n      .hs-step.hs-stage-active{\r\n\r\n        transform:\r\n          translateY(0)\r\n          scale(1) !important;\r\n\r\n      }\r\n\r\n\r\n      #inrcyHeroSteps\r\n      .hs-step::after{\r\n\r\n        inset:-8px;\r\n\r\n        filter:blur(12px);\r\n\r\n      }\r\n\r\n\r\n      #inrcyHeroSteps\r\n      .hs-phone{\r\n\r\n        transform:none !important;\r\n\r\n      }\r\n\r\n\r\n      #inrcyHeroSteps\r\n      .hs-channel.active{\r\n\r\n        animation:\r\n          hsChannelMobile\r\n          .38s ease both;\r\n\r\n      }\r\n\r\n\r\n      @keyframes hsChannelMobile{\r\n\r\n        from{\r\n          opacity:.3;\r\n          transform:translateY(7px);\r\n        }\r\n\r\n        to{\r\n          opacity:1;\r\n          transform:translateY(0);\r\n        }\r\n\r\n      }\r\n\r\n\r\n      #inrcyHeroSteps\r\n      .hs-offer-cta.hs-cta-pulse{\r\n\r\n        animation:\r\n          hsCtaPulseMobile\r\n          2s ease-in-out\r\n          infinite;\r\n\r\n      }\r\n\r\n\r\n      @keyframes hsCtaPulseMobile{\r\n\r\n        0%,\r\n        100%{\r\n          transform:scale(1);\r\n        }\r\n\r\n        50%{\r\n          transform:scale(1.018);\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =======================================================\r\n       REDUCED MOTION\r\n       ======================================================= *\/\r\n\r\n    @media(prefers-reduced-motion:reduce){\r\n\r\n      #inrcyHeroSteps *,\r\n      #inrcyHeroSteps *::before,\r\n      #inrcyHeroSteps *::after{\r\n\r\n        animation:none !important;\r\n\r\n        transition:none !important;\r\n\r\n      }\r\n\r\n    }\r\n\r\n  `;\r\n\r\n\r\n  document.head.appendChild(style);\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     RESPONSIVE CLASS\r\n     ========================================================= *\/\r\n\r\n  function updateDeviceClass(){\r\n\r\n    hero.classList.remove(\r\n      'hs-device-desktop',\r\n      'hs-device-tablet',\r\n      'hs-device-mobile'\r\n    );\r\n\r\n\r\n    if(desktop.matches){\r\n\r\n      hero.classList.add(\r\n        'hs-device-desktop'\r\n      );\r\n\r\n    }\r\n\r\n    else if(tablet.matches){\r\n\r\n      hero.classList.add(\r\n        'hs-device-tablet'\r\n      );\r\n\r\n    }\r\n\r\n    else{\r\n\r\n      hero.classList.add(\r\n        'hs-device-mobile'\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  updateDeviceClass();\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     SVG \u2014 CONNEXIONS ENTRE LES 4 \u00c9TAPES\r\n     ========================================================= *\/\r\n\r\n  function drawConnections(){\r\n\r\n    if(!flow || !svg){\r\n      return;\r\n    }\r\n\r\n\r\n    \/*\r\n     * Sur mobile :\r\n     * on supprime volontairement les lignes\r\n     * pour \u00e9viter le bazar visuel.\r\n     *\/\r\n\r\n    if(!desktop.matches){\r\n\r\n      svg.innerHTML = '';\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const flowRect =\r\n      flow.getBoundingClientRect();\r\n\r\n\r\n    svg.innerHTML = `\r\n\r\n      <defs>\r\n\r\n        <linearGradient\r\n          id=\"hsGradientPremium\"\r\n          x1=\"0\"\r\n          y1=\"0\"\r\n          x2=\"1\"\r\n          y2=\"0\"\r\n        >\r\n\r\n          <stop\r\n            offset=\"0%\"\r\n            stop-color=\"#FF7437\"\r\n          \/>\r\n\r\n          <stop\r\n            offset=\"32%\"\r\n            stop-color=\"#FF2F91\"\r\n          \/>\r\n\r\n          <stop\r\n            offset=\"67%\"\r\n            stop-color=\"#A62FFF\"\r\n          \/>\r\n\r\n          <stop\r\n            offset=\"100%\"\r\n            stop-color=\"#178CFF\"\r\n          \/>\r\n\r\n        <\/linearGradient>\r\n\r\n      <\/defs>\r\n\r\n    `;\r\n\r\n\r\n    svg.setAttribute(\r\n      'viewBox',\r\n      `0 0 ${flowRect.width} ${flowRect.height}`\r\n    );\r\n\r\n\r\n    for(\r\n      let i = 0;\r\n      i < steps.length - 1;\r\n      i++\r\n    ){\r\n\r\n      const a =\r\n        steps[i].getBoundingClientRect();\r\n\r\n      const b =\r\n        steps[i + 1].getBoundingClientRect();\r\n\r\n\r\n      const x1 =\r\n        a.right -\r\n        flowRect.left +\r\n        5;\r\n\r\n\r\n      const y1 =\r\n        a.top -\r\n        flowRect.top +\r\n        a.height \/ 2;\r\n\r\n\r\n      const x2 =\r\n        b.left -\r\n        flowRect.left -\r\n        5;\r\n\r\n\r\n      const y2 =\r\n        b.top -\r\n        flowRect.top +\r\n        b.height \/ 2;\r\n\r\n\r\n      const distance =\r\n        Math.max(\r\n          50,\r\n          x2 - x1\r\n        );\r\n\r\n\r\n      const curve =\r\n        distance * .46;\r\n\r\n\r\n\r\n      \/* BACKGROUND LINE *\/\r\n\r\n      const bg =\r\n        document.createElementNS(\r\n          'http:\/\/www.w3.org\/2000\/svg',\r\n          'path'\r\n        );\r\n\r\n\r\n      bg.setAttribute(\r\n        'd',\r\n        `\r\n          M ${x1} ${y1}\r\n\r\n          C\r\n          ${x1 + curve} ${y1},\r\n          ${x2 - curve} ${y2},\r\n          ${x2} ${y2}\r\n        `\r\n      );\r\n\r\n\r\n      bg.setAttribute(\r\n        'fill',\r\n        'none'\r\n      );\r\n\r\n\r\n      bg.setAttribute(\r\n        'stroke',\r\n        'rgba(255,255,255,.045)'\r\n      );\r\n\r\n\r\n      bg.setAttribute(\r\n        'stroke-width',\r\n        '1.4'\r\n      );\r\n\r\n\r\n      svg.appendChild(bg);\r\n\r\n\r\n\r\n      \/* ACTIVE LINE *\/\r\n\r\n      const line =\r\n        document.createElementNS(\r\n          'http:\/\/www.w3.org\/2000\/svg',\r\n          'path'\r\n        );\r\n\r\n\r\n      line.setAttribute(\r\n        'class',\r\n        'hs-line hs-premium-line'\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        'data-line-index',\r\n        i\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        'd',\r\n        `\r\n          M ${x1} ${y1}\r\n\r\n          C\r\n          ${x1 + curve} ${y1},\r\n          ${x2 - curve} ${y2},\r\n          ${x2} ${y2}\r\n        `\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        'fill',\r\n        'none'\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        'stroke',\r\n        'url(#hsGradientPremium)'\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        'stroke-width',\r\n        '2'\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        'stroke-linecap',\r\n        'round'\r\n      );\r\n\r\n\r\n      line.style.opacity =\r\n        '.2';\r\n\r\n\r\n      svg.appendChild(line);\r\n\r\n\r\n\r\n      \/* DOT *\/\r\n\r\n      const dot =\r\n        document.createElementNS(\r\n          'http:\/\/www.w3.org\/2000\/svg',\r\n          'circle'\r\n        );\r\n\r\n\r\n      dot.setAttribute(\r\n        'cx',\r\n        x2\r\n      );\r\n\r\n\r\n      dot.setAttribute(\r\n        'cy',\r\n        y2\r\n      );\r\n\r\n\r\n      dot.setAttribute(\r\n        'r',\r\n        '3.2'\r\n      );\r\n\r\n\r\n      dot.setAttribute(\r\n        'fill',\r\n        i < 2\r\n          ? '#EF42FF'\r\n          : '#258CFF'\r\n      );\r\n\r\n\r\n      dot.style.filter =\r\n        'drop-shadow(0 0 6px rgba(166,47,255,.75))';\r\n\r\n\r\n      svg.appendChild(dot);\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     ACTIVE UNE \u00c9TAPE\r\n     ========================================================= *\/\r\n\r\n  function setActiveStep(index){\r\n\r\n    activeStep =\r\n      index;\r\n\r\n\r\n    steps.forEach(\r\n      (step,i)=>{\r\n\r\n        step.classList.remove(\r\n          'hs-stage-active',\r\n          'hs-stage-past'\r\n        );\r\n\r\n\r\n        if(i < index){\r\n\r\n          step.classList.add(\r\n            'hs-stage-past'\r\n          );\r\n\r\n        }\r\n\r\n\r\n        if(i === index){\r\n\r\n          step.classList.add(\r\n            'hs-stage-active'\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n    if(desktop.matches){\r\n\r\n      hero\r\n        .querySelectorAll(\r\n          '.hs-premium-line'\r\n        )\r\n        .forEach(\r\n          (line,i)=>{\r\n\r\n            line.style.opacity =\r\n              i < index\r\n                ? '.85'\r\n                : i === index - 1\r\n                  ? '1'\r\n                  : '.18';\r\n\r\n          }\r\n        );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     ANIMATION T\u00c9L\u00c9PHONE\r\n     ========================================================= *\/\r\n\r\n  function animatePhoneContent(){\r\n\r\n    phoneFields.forEach(\r\n      field =>{\r\n\r\n        field.classList.remove(\r\n          'hs-phone-animate'\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    phoneFields.forEach(\r\n      (field,index)=>{\r\n\r\n        setTimeout(\r\n          ()=>{\r\n\r\n            field.classList.add(\r\n              'hs-phone-animate'\r\n            );\r\n\r\n          },\r\n          index * 90\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     RESET CANAUX\r\n     ========================================================= *\/\r\n\r\n  function resetChannels(){\r\n\r\n    clearInterval(\r\n      channelTimer\r\n    );\r\n\r\n\r\n    channels.forEach(\r\n      channel =>{\r\n\r\n        channel.classList.remove(\r\n          'active'\r\n        );\r\n\r\n\r\n        const name =\r\n          channel\r\n            .querySelector(\r\n              '.hs-channel-copy strong'\r\n            )\r\n            ?.textContent\r\n            .trim() || '';\r\n\r\n\r\n        const state =\r\n          channel.querySelector(\r\n            '.hs-channel-copy span'\r\n          );\r\n\r\n\r\n        if(!state) return;\r\n\r\n\r\n        if(name === 'Mail'){\r\n\r\n          state.textContent =\r\n            'Envoi en cours';\r\n\r\n        }\r\n\r\n        else if(\r\n          name ===\r\n          'Carte de visite'\r\n        ){\r\n\r\n          state.textContent =\r\n            'Mise \u00e0 jour en cours';\r\n\r\n        }\r\n\r\n        else{\r\n\r\n          state.textContent =\r\n            'Publication en cours';\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n\r\n    if(percent){\r\n\r\n      percent.textContent =\r\n        '0%';\r\n\r\n    }\r\n\r\n\r\n    if(progressFill){\r\n\r\n      progressFill.style.width =\r\n        '0%';\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     DIFFUSION 12 CANAUX\r\n     ========================================================= *\/\r\n\r\n  function publishChannels(\r\n    onDone\r\n  ){\r\n\r\n    resetChannels();\r\n\r\n\r\n    let index =\r\n      0;\r\n\r\n\r\n    const speed =\r\n      mobile.matches\r\n        ? 220\r\n        : 290;\r\n\r\n\r\n    channelTimer =\r\n      setInterval(\r\n        ()=>{\r\n\r\n\r\n          if(index >= channels.length){\r\n\r\n            clearInterval(\r\n              channelTimer\r\n            );\r\n\r\n\r\n            if(percent){\r\n\r\n              percent.textContent =\r\n                '100%';\r\n\r\n            }\r\n\r\n\r\n            if(progressFill){\r\n\r\n              progressFill.style.width =\r\n                '100%';\r\n\r\n            }\r\n\r\n\r\n            if(typeof onDone === 'function'){\r\n\r\n              setTimeout(\r\n                onDone,\r\n                500\r\n              );\r\n\r\n            }\r\n\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          const channel =\r\n            channels[index];\r\n\r\n\r\n          channel.classList.add(\r\n            'active'\r\n          );\r\n\r\n\r\n          const name =\r\n            channel\r\n              .querySelector(\r\n                '.hs-channel-copy strong'\r\n              )\r\n              ?.textContent\r\n              .trim() || '';\r\n\r\n\r\n          const state =\r\n            channel.querySelector(\r\n              '.hs-channel-copy span'\r\n            );\r\n\r\n\r\n          if(state){\r\n\r\n            if(name === 'Mail'){\r\n\r\n              state.textContent =\r\n                'Envoy\u00e9';\r\n\r\n            }\r\n\r\n            else if(\r\n              name ===\r\n              'Carte de visite'\r\n            ){\r\n\r\n              state.textContent =\r\n                'Mis \u00e0 jour';\r\n\r\n            }\r\n\r\n            else{\r\n\r\n              state.textContent =\r\n                'Publi\u00e9';\r\n\r\n            }\r\n\r\n          }\r\n\r\n\r\n          const value =\r\n            Math.round(\r\n              (\r\n                (index + 1)\r\n                \/\r\n                channels.length\r\n              )\r\n              *\r\n              100\r\n            );\r\n\r\n\r\n          if(percent){\r\n\r\n            percent.textContent =\r\n              value + '%';\r\n\r\n\r\n            percent.classList.add(\r\n              'hs-percent-pop'\r\n            );\r\n\r\n\r\n            setTimeout(\r\n              ()=>{\r\n\r\n                percent.classList.remove(\r\n                  'hs-percent-pop'\r\n                );\r\n\r\n              },\r\n              160\r\n            );\r\n\r\n          }\r\n\r\n\r\n          if(progressFill){\r\n\r\n            progressFill.style.width =\r\n              value + '%';\r\n\r\n          }\r\n\r\n\r\n          index++;\r\n\r\n        },\r\n        speed\r\n      );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     ANIMATION PUBLICATIONS\r\n     ========================================================= *\/\r\n\r\n  function animatePosts(){\r\n\r\n    postRows.forEach(\r\n      row =>{\r\n\r\n        row.classList.remove(\r\n          'hs-post-reveal'\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    postRows.forEach(\r\n      (row,index)=>{\r\n\r\n        setTimeout(\r\n          ()=>{\r\n\r\n            row.classList.add(\r\n              'hs-post-reveal'\r\n            );\r\n\r\n          },\r\n          index * 180\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     COUNTER KPI\r\n     ========================================================= *\/\r\n\r\n  function animateNumber(\r\n    element,\r\n    start,\r\n    end,\r\n    duration,\r\n    formatter\r\n  ){\r\n\r\n    if(\r\n      !element ||\r\n      reduceMotion.matches\r\n    ){\r\n\r\n      if(element){\r\n\r\n        element.textContent =\r\n          formatter(end);\r\n\r\n      }\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const startTime =\r\n      performance.now();\r\n\r\n\r\n    function frame(now){\r\n\r\n      const progress =\r\n        Math.min(\r\n          1,\r\n          (\r\n            now - startTime\r\n          )\r\n          \/\r\n          duration\r\n        );\r\n\r\n\r\n      const eased =\r\n        1 -\r\n        Math.pow(\r\n          1 - progress,\r\n          3\r\n        );\r\n\r\n\r\n      const value =\r\n        start +\r\n        (\r\n          end - start\r\n        )\r\n        *\r\n        eased;\r\n\r\n\r\n      element.textContent =\r\n        formatter(value);\r\n\r\n\r\n      if(progress < 1){\r\n\r\n        requestAnimationFrame(\r\n          frame\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    requestAnimationFrame(\r\n      frame\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     KPI + GRAPH\r\n     ========================================================= *\/\r\n\r\n  function animateAnalytics(){\r\n\r\n    const values = [\r\n\r\n      {\r\n        value:24.8,\r\n        format:value =>\r\n          value\r\n            .toFixed(1)\r\n            .replace('.',',')\r\n          +\r\n          'k'\r\n      },\r\n\r\n      {\r\n        value:1842,\r\n        format:value =>\r\n          Math.round(value)\r\n            .toLocaleString(\r\n              'fr-FR'\r\n            )\r\n      },\r\n\r\n      {\r\n        value:768,\r\n        format:value =>\r\n          Math.round(value)\r\n            .toLocaleString(\r\n              'fr-FR'\r\n            )\r\n      }\r\n\r\n    ];\r\n\r\n\r\n    kpis.forEach(\r\n      (kpi,index)=>{\r\n\r\n        const number =\r\n          kpi.querySelector(\r\n            'strong'\r\n          );\r\n\r\n\r\n        kpi.classList.remove(\r\n          'hs-kpi-active'\r\n        );\r\n\r\n\r\n        setTimeout(\r\n          ()=>{\r\n\r\n            kpi.classList.add(\r\n              'hs-kpi-active'\r\n            );\r\n\r\n\r\n            animateNumber(\r\n              number,\r\n              0,\r\n              values[index].value,\r\n              950,\r\n              values[index].format\r\n            );\r\n\r\n          },\r\n          index * 170\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n    if(chartPath){\r\n\r\n      const length =\r\n        chartPath\r\n          .getTotalLength();\r\n\r\n\r\n      chartPath.style.strokeDasharray =\r\n        length;\r\n\r\n\r\n      chartPath.style.strokeDashoffset =\r\n        length;\r\n\r\n\r\n      chart?.classList.add(\r\n        'hs-chart-active'\r\n      );\r\n\r\n\r\n      requestAnimationFrame(\r\n        ()=>{\r\n\r\n          chartPath.style.transition =\r\n            'stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)';\r\n\r\n\r\n          chartPath.style.strokeDashoffset =\r\n            '0';\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if(chartDot){\r\n\r\n      chartDot.style.opacity =\r\n        '0';\r\n\r\n\r\n      setTimeout(\r\n        ()=>{\r\n\r\n          chartDot.style.transition =\r\n            'opacity .35s ease, transform .35s ease';\r\n\r\n\r\n          chartDot.style.opacity =\r\n            '1';\r\n\r\n\r\n          chartDot.style.transform =\r\n            'scale(1.08)';\r\n\r\n        },\r\n        1100\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     BANDEAU PRIX\r\n     ========================================================= *\/\r\n\r\n  function revealOffer(){\r\n\r\n    if(!offer) return;\r\n\r\n\r\n    offer.classList.add(\r\n      'hs-offer-show'\r\n    );\r\n\r\n\r\n    setTimeout(\r\n      ()=>{\r\n\r\n        offer.classList.add(\r\n          'hs-offer-glow'\r\n        );\r\n\r\n      },\r\n      250\r\n    );\r\n\r\n\r\n    setTimeout(\r\n      ()=>{\r\n\r\n        offerCTA?.classList.add(\r\n          'hs-cta-pulse'\r\n        );\r\n\r\n      },\r\n      700\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     MASTER SEQUENCE\r\n     ========================================================= *\/\r\n\r\n  function runSequence(){\r\n\r\n    if(\r\n      !heroVisible ||\r\n      reduceMotion.matches\r\n    ){\r\n      return;\r\n    }\r\n\r\n\r\n    clearTimeout(\r\n      masterTimer\r\n    );\r\n\r\n\r\n    \/* TITRE *\/\r\n\r\n    hero.classList.add(\r\n      'hs-title-boost'\r\n    );\r\n\r\n\r\n    setTimeout(\r\n      ()=>{\r\n\r\n        hero.classList.remove(\r\n          'hs-title-boost'\r\n        );\r\n\r\n      },\r\n      1200\r\n    );\r\n\r\n\r\n\r\n    \/* \u00c9TAPE 1 *\/\r\n\r\n    setActiveStep(0);\r\n\r\n\r\n\r\n    masterTimer =\r\n      setTimeout(\r\n        ()=>{\r\n\r\n\r\n          \/* \u00c9TAPE 2 *\/\r\n\r\n          setActiveStep(1);\r\n\r\n          animatePhoneContent();\r\n\r\n\r\n\r\n          masterTimer =\r\n            setTimeout(\r\n              ()=>{\r\n\r\n\r\n                \/* \u00c9TAPE 3 *\/\r\n\r\n                setActiveStep(2);\r\n\r\n\r\n                publishChannels(\r\n                  ()=>{\r\n\r\n\r\n                    \/* \u00c9TAPE 4 *\/\r\n\r\n                    setActiveStep(3);\r\n\r\n                    animatePosts();\r\n\r\n                    animateAnalytics();\r\n\r\n\r\n                    masterTimer =\r\n                      setTimeout(\r\n                        ()=>{\r\n\r\n                          revealOffer();\r\n\r\n                        },\r\n                        1300\r\n                      );\r\n\r\n                  }\r\n                );\r\n\r\n              },\r\n              1450\r\n            );\r\n\r\n        },\r\n        1300\r\n      );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     PHONE PARALLAX \u2014 UNIQUEMENT DESKTOP\r\n     ========================================================= *\/\r\n\r\n  function movePhone(event){\r\n\r\n    if(\r\n      !desktop.matches ||\r\n      !flow ||\r\n      !phone ||\r\n      reduceMotion.matches\r\n    ){\r\n      return;\r\n    }\r\n\r\n\r\n    const rect =\r\n      flow.getBoundingClientRect();\r\n\r\n\r\n    const x =\r\n      (\r\n        event.clientX -\r\n        rect.left\r\n      )\r\n      \/\r\n      rect.width\r\n      -\r\n      .5;\r\n\r\n\r\n    const y =\r\n      (\r\n        event.clientY -\r\n        rect.top\r\n      )\r\n      \/\r\n      rect.height\r\n      -\r\n      .5;\r\n\r\n\r\n    phone.style.transform = `\r\n\r\n      perspective(1150px)\r\n\r\n      rotateY(${x * 5 - 4}deg)\r\n\r\n      rotateX(${-y * 3}deg)\r\n\r\n      rotateZ(-1.5deg)\r\n\r\n      translate3d(\r\n        ${x * 2}px,\r\n        ${y * 3}px,\r\n        0\r\n      )\r\n\r\n    `;\r\n\r\n  }\r\n\r\n\r\n\r\n  function resetPhone(){\r\n\r\n    if(!phone) return;\r\n\r\n\r\n    if(!desktop.matches){\r\n\r\n      phone.style.transform =\r\n        'none';\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    phone.style.transform = `\r\n\r\n      perspective(1150px)\r\n\r\n      rotateY(-4deg)\r\n\r\n      rotateZ(-1.5deg)\r\n\r\n    `;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     HOVER CANAUX \u2014 DESKTOP\r\n     ========================================================= *\/\r\n\r\n  channels.forEach(\r\n    channel =>{\r\n\r\n      channel.addEventListener(\r\n        'mouseenter',\r\n        ()=>{\r\n\r\n          if(!desktop.matches){\r\n            return;\r\n          }\r\n\r\n\r\n          channel.style.transform =\r\n            'translateX(-3px) scale(1.018)';\r\n\r\n        }\r\n      );\r\n\r\n\r\n      channel.addEventListener(\r\n        'mouseleave',\r\n        ()=>{\r\n\r\n          channel.style.transform =\r\n            '';\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     BOUTONS MODIFIER\/SUPPRIMER\r\n     ========================================================= *\/\r\n\r\n  hero\r\n    .querySelectorAll(\r\n      '.hs-post-btn'\r\n    )\r\n    .forEach(\r\n      button =>{\r\n\r\n        button.addEventListener(\r\n          'click',\r\n          event =>{\r\n\r\n            event.preventDefault();\r\n\r\n            button.blur();\r\n\r\n          }\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     MODE REDUCED MOTION\r\n     ========================================================= *\/\r\n\r\n  function showEverything(){\r\n\r\n    hero.classList.add(\r\n      'hs-visible'\r\n    );\r\n\r\n\r\n    steps.forEach(\r\n      step =>{\r\n\r\n        step.classList.add(\r\n          'hs-stage-past'\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    channels.forEach(\r\n      channel =>{\r\n\r\n        channel.classList.add(\r\n          'active'\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    if(percent){\r\n\r\n      percent.textContent =\r\n        '100%';\r\n\r\n    }\r\n\r\n\r\n    if(progressFill){\r\n\r\n      progressFill.style.width =\r\n        '100%';\r\n\r\n    }\r\n\r\n\r\n    offer?.classList.add(\r\n      'hs-offer-show'\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     INTERSECTION OBSERVER\r\n     ========================================================= *\/\r\n\r\n  const visibilityObserver =\r\n    new IntersectionObserver(\r\n\r\n      entries =>{\r\n\r\n        const entry =\r\n          entries[0];\r\n\r\n\r\n        heroVisible =\r\n          entry.isIntersecting;\r\n\r\n\r\n        if(\r\n          heroVisible &&\r\n          !animationStarted\r\n        ){\r\n\r\n          animationStarted =\r\n            true;\r\n\r\n\r\n          hero.classList.add(\r\n            'hs-visible'\r\n          );\r\n\r\n\r\n          drawConnections();\r\n\r\n\r\n          if(reduceMotion.matches){\r\n\r\n            showEverything();\r\n\r\n          }\r\n\r\n          else{\r\n\r\n            setTimeout(\r\n              runSequence,\r\n              500\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n\r\n      },\r\n\r\n      {\r\n        threshold:.10\r\n      }\r\n\r\n    );\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALISATION\r\n     ========================================================= *\/\r\n\r\n  hero.classList.add(\r\n    'hs-js-ready'\r\n  );\r\n\r\n\r\n  resetChannels();\r\n\r\n  updateDeviceClass();\r\n\r\n  drawConnections();\r\n\r\n\r\n  visibilityObserver.observe(\r\n    hero\r\n  );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     SOURIS\r\n     ========================================================= *\/\r\n\r\n  if(flow){\r\n\r\n    flow.addEventListener(\r\n      'mousemove',\r\n      movePhone\r\n    );\r\n\r\n\r\n    flow.addEventListener(\r\n      'mouseleave',\r\n      resetPhone\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     RESIZE\r\n     ========================================================= *\/\r\n\r\n  function handleResize(){\r\n\r\n    updateDeviceClass();\r\n\r\n    resetPhone();\r\n\r\n\r\n    clearTimeout(\r\n      resizeTimer\r\n    );\r\n\r\n\r\n    resizeTimer =\r\n      setTimeout(\r\n        ()=>{\r\n\r\n          drawConnections();\r\n\r\n        },\r\n        160\r\n      );\r\n\r\n  }\r\n\r\n\r\n  window.addEventListener(\r\n    'resize',\r\n    handleResize,\r\n    {\r\n      passive:true\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     RESIZE OBSERVER\r\n     Elementor peut modifier les dimensions apr\u00e8s chargement\r\n     ========================================================= *\/\r\n\r\n  if(\r\n    'ResizeObserver'\r\n    in window\r\n  ){\r\n\r\n    const resizeObserver =\r\n      new ResizeObserver(\r\n        ()=>{\r\n\r\n          clearTimeout(\r\n            resizeTimer\r\n          );\r\n\r\n\r\n          resizeTimer =\r\n            setTimeout(\r\n              drawConnections,\r\n              120\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    resizeObserver.observe(\r\n      flow || hero\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     LOAD\r\n     ========================================================= *\/\r\n\r\n  window.addEventListener(\r\n    'load',\r\n    ()=>{\r\n\r\n      setTimeout(\r\n        drawConnections,\r\n        250\r\n      );\r\n\r\n\r\n      setTimeout(\r\n        drawConnections,\r\n        700\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- =========================================================\r\n     iNrCy \u2014 HERO MOBILE CONVERSION 3 SECONDES\r\n     Inject\u00e9 uniquement en responsive <= 760px\r\n     Desktop \/ tablette large inchang\u00e9s\r\n     ========================================================= -->\r\n<script>\r\n(function(){\r\n\r\n  'use strict';\r\n\r\n  const hero = document.getElementById('inrcyHeroSteps');\r\n  if(!hero) return;\r\n\r\n  if(hero.dataset.mobileConversionReady === 'true'){\r\n    return;\r\n  }\r\n\r\n  hero.dataset.mobileConversionReady = 'true';\r\n\r\n  const inner = hero.querySelector('.hs-inner');\r\n  if(!inner) return;\r\n\r\n  const mq = window.matchMedia('(max-width: 760px)');\r\n\r\n  \/* =========================================================\r\n     CR\u00c9ATION DU HERO MOBILE\r\n     ========================================================= *\/\r\n\r\n  const mobileHero = document.createElement('div');\r\n  mobileHero.className = 'hs-mobile-conversion';\r\n  mobileHero.setAttribute('aria-label', 'Pr\u00e9sentation iNrCy');\r\n\r\n  mobileHero.innerHTML = `\r\n    <div class=\"hmc-glow hmc-glow--pink\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"hmc-glow hmc-glow--blue\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"hmc-copy\">\r\n\r\n      <h1 class=\"hmc-title\">\r\n        <span class=\"hmc-title-white\">Publiez partout<\/span>\r\n        <span class=\"hmc-title-line\">\r\n          depuis <strong>une seule app.<\/strong>\r\n        <\/span>\r\n      <\/h1>\r\n\r\n      <div class=\"hmc-proof\" aria-label=\"R\u00e9sum\u00e9 iNrCy\">\r\n        <span>1 id\u00e9e<\/span>\r\n        <i><\/i>\r\n        <span>jusqu'\u00e0 12 contenus<\/span>\r\n        <i><\/i>\r\n        <span>jusqu'\u00e0 12 canaux<\/span>\r\n      <\/div>\r\n\r\n      <p class=\"hmc-subtitle\">\r\n        G\u00e9n\u00e9rez, adaptez et diffusez vos contenus\r\n        <strong>sans perdre de temps.<\/strong>\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"hmc-offer\">\r\n\r\n      <div class=\"hmc-price\">\r\n        <strong>58\u20ac<\/strong>\r\n        <span>HT \/ mois<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"hmc-offer-divider\" aria-hidden=\"true\"><\/div>\r\n\r\n      <div class=\"hmc-trial\">\r\n        <span class=\"hmc-calendar\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v3M17 2v3M4 9h16M5.5 4.5h13A1.5 1.5 0 0 1 20 6v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19V6a1.5 1.5 0 0 1 1.5-1.5Z\"\/>\r\n            <path d=\"M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <div class=\"hmc-trial-copy\">\r\n          <strong>21 jours gratuits<\/strong>\r\n          <span>Sans engagement<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"hmc-benefits\">\r\n\r\n      <div class=\"hmc-benefit\">\r\n        <span class=\"hmc-benefit-icon hmc-benefit-icon--pink\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"8\"\/>\r\n            <path d=\"M4 12h16M12 4c2.5 2.4 3.7 5.1 3.7 8S14.5 17.6 12 20M12 4c-2.5 2.4-3.7 5.1-3.7 8S9.5 17.6 12 20\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <strong>Publiez partout<\/strong>\r\n      <\/div>\r\n\r\n      <div class=\"hmc-benefit\">\r\n        <span class=\"hmc-benefit-icon hmc-benefit-icon--purple\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"8\"\/>\r\n            <path d=\"M12 7v5l3 2\"\/>\r\n            <path d=\"M13.5 2.8 10 8h3l-2 4.5\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <strong>Gagnez du temps<\/strong>\r\n      <\/div>\r\n\r\n      <div class=\"hmc-benefit\">\r\n        <span class=\"hmc-benefit-icon hmc-benefit-icon--blue\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 3 19 6v5c0 4.8-2.7 8-7 10-4.3-2-7-5.2-7-10V6l7-3Z\"\/>\r\n            <path d=\"m9 12 2 2 4-4\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <strong>Sans engagement<\/strong>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <a\r\n      class=\"hmc-cta\"\r\n      href=\"https:\/\/inrcy.com\/s-inscrire\/\"\r\n      aria-label=\"Tester gratuitement iNrCy\"\r\n    >\r\n      <span>Tester gratuitement<\/span>\r\n      <b aria-hidden=\"true\">\u2192<\/b>\r\n    <\/a>\r\n\r\n    <p class=\"hmc-microcopy\">\r\n      Aucune carte bancaire requise\r\n    <\/p>\r\n\r\n    <div class=\"hmc-phone-stage\" aria-hidden=\"true\">\r\n\r\n      <div class=\"hmc-phone-aura\"><\/div>\r\n      <div class=\"hmc-phone-rings\"><\/div>\r\n\r\n      <div class=\"hmc-phone\">\r\n\r\n        <div class=\"hmc-phone-top\">\r\n          <span class=\"hmc-phone-brand\">iNrCy<\/span>\r\n          <span class=\"hmc-phone-menu\">\u2630<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"hmc-phone-block\">\r\n          <div class=\"hmc-phone-label hmc-phone-label--idea\">\r\n            <span>\ud83d\udca1<\/span>\r\n            <strong>Votre id\u00e9e<\/strong>\r\n          <\/div>\r\n\r\n          <p class=\"hmc-phone-example\">\r\n            \u201cCr\u00e9ation d\u2019une terrasse en bois \u00e0 Arras\u201d\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"hmc-phone-separator\"><\/div>\r\n\r\n        <div class=\"hmc-phone-block\">\r\n          <div class=\"hmc-phone-label hmc-phone-label--purple\">\r\n            <span>\ud83e\udd16<\/span>\r\n            <strong>iNrCy g\u00e9n\u00e8re le contenu<\/strong>\r\n          <\/div>\r\n\r\n          <div class=\"hmc-clean-actions\">\r\n\r\n            <span class=\"hmc-clean-action\">\r\n              <b aria-hidden=\"true\">\u2728<\/b>\r\n              <small>Texte<\/small>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-clean-action\">\r\n              <b aria-hidden=\"true\">\ud83d\uddbc\ufe0f<\/b>\r\n              <small>Images<\/small>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-clean-action\">\r\n              <b aria-hidden=\"true\">\ud83c\udfa5<\/b>\r\n              <small>Vid\u00e9o<\/small>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-clean-action\">\r\n              <b aria-hidden=\"true\">\ud83d\ude0a<\/b>\r\n              <small>Emojis<\/small>\r\n            <\/span>\r\n\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hmc-phone-separator\"><\/div>\r\n\r\n        <div class=\"hmc-phone-block\">\r\n          <div class=\"hmc-phone-label hmc-phone-label--blue\">\r\n            <span class=\"hmc-green-check\">\u2705<\/span>\r\n            <strong>Publie sur vos canaux<\/strong>\r\n          <\/div>\r\n\r\n          \r\n          <div class=\"hmc-channel-logos\">\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Instagram\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <defs>\r\n                  <linearGradient id=\"hmcIgGradClean\" x1=\"0\" y1=\"1\" x2=\"1\" y2=\"0\">\r\n                    <stop offset=\"0%\" stop-color=\"#FF8A39\"\/>\r\n                    <stop offset=\"50%\" stop-color=\"#EF2B91\"\/>\r\n                    <stop offset=\"100%\" stop-color=\"#7B42FF\"\/>\r\n                  <\/linearGradient>\r\n                <\/defs>\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"url(#hmcIgGradClean)\"\/>\r\n                <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"4\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/>\r\n                <circle cx=\"12\" cy=\"12\" r=\"3.2\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/>\r\n                <circle cx=\"16.5\" cy=\"7.8\" r=\"1\" fill=\"#fff\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Facebook\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"#1877F2\"\/>\r\n                <path d=\"M13.4 20v-6.1h2.1l.4-2.5h-2.5V9.8c0-.7.2-1.2 1.2-1.2H16V6.4c-.2 0-1-.1-2-.1-2 0-3.3 1.2-3.3 3.5v1.6H8.6v2.5h2.1V20h2.7z\" fill=\"#fff\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"LinkedIn\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"#0A66C2\"\/>\r\n                <circle cx=\"7.2\" cy=\"8\" r=\"1.4\" fill=\"#fff\"\/>\r\n                <rect x=\"5.9\" y=\"10\" width=\"2.6\" height=\"8\" fill=\"#fff\"\/>\r\n                <path d=\"M11 10h2.5v1.1c.5-.8 1.4-1.5 3-1.5 2.4 0 3.5 1.5 3.5 4.1V18h-2.7v-3.8c0-1.2-.4-2-1.5-2-1 0-1.7.7-1.7 2V18H11z\" fill=\"#fff\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"TikTok\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"#050505\"\/>\r\n                <path d=\"M14.8 6.2c.6 1.3 1.5 2.1 2.9 2.3v2.1c-1.1 0-2.1-.3-2.9-.9v4c0 2.2-1.7 4-4 4-1.8 0-3.3-1.5-3.3-3.3 0-1.9 1.5-3.3 3.4-3.3.3 0 .5 0 .8.1v2.2c-.2-.1-.4-.1-.6-.1-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4c1 0 1.4-.8 1.4-1.7V6.2z\" fill=\"#fff\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"YouTube\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect x=\"2.5\" y=\"5.5\" width=\"19\" height=\"13\" rx=\"4.5\" fill=\"#FF0000\"\/>\r\n                <path d=\"M10 9.2l5 2.8-5 2.8z\" fill=\"#fff\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Google Business\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"#fff\"\/>\r\n                <path d=\"M17.8 12.2c0-.5 0-.8-.1-1.2H12v2.2h3.3c-.1.7-.6 1.7-1.5 2.3l2 1.5c1.2-1.1 2-2.8 2-4.8z\" fill=\"#4285F4\"\/>\r\n                <path d=\"M12 18c1.6 0 2.9-.5 3.9-1.4l-2-1.5c-.5.4-1.2.7-1.9.7-1.5 0-2.8-1-3.2-2.3H6.7V15c1 1.9 3 3 5.3 3z\" fill=\"#34A853\"\/>\r\n                <path d=\"M8.8 13.5c-.1-.4-.2-.8-.2-1.3s.1-.9.2-1.3V9.4H6.7C6.3 10.2 6 11.1 6 12.2s.3 2 .7 2.8z\" fill=\"#FBBC05\"\/>\r\n                <path d=\"M12 8.5c.9 0 1.8.3 2.4.9l1.8-1.8C14.9 6.4 13.6 6 12 6 9.7 6 7.7 7.3 6.7 9.4l2.1 1.6c.4-1.4 1.7-2.5 3.2-2.5z\" fill=\"#EA4335\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Site internet\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#287BFF\"\/>\r\n                <path d=\"M4.5 12h15M12 4.2c2 2.2 3.1 4.9 3.1 7.8S14 17.6 12 19.8M12 4.2C10 6.4 8.9 9.1 8.9 12S10 17.6 12 19.8\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Mail\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"#258BFF\"\/>\r\n                <rect x=\"5\" y=\"7\" width=\"14\" height=\"10\" rx=\"2\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\"\/>\r\n                <path d=\"M6 8l6 4.8L18 8\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Pinterest\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#E60023\"\/>\r\n                <path d=\"M12.5 6.5c-3 0-4.6 2.2-4.6 4.5 0 1.1.4 2.1 1.3 2.4.1 0 .2 0 .2-.1l.4-1.4v-.2c-.3-.4-.5-1-.5-1.7 0-1.6 1.2-3.1 3.2-3.1 1.7 0 2.7 1 2.7 2.4 0 1.8-.8 3.3-2 3.3-.7 0-1.2-.6-1-1.3.2-.8.6-1.7.6-2.3 0-.5-.3-.9-.8-.9-.7 0-1.2.7-1.2 1.6 0 .6.2 1 .2 1l-.9 3.8c-.3 1.2 0 2.6.1 2.8 0 .1.1.1.2 0 .1-.1 1-1.3 1.3-2.5l.3-1.2c.2.4.9.8 1.7.8 2.3 0 3.8-2.1 3.8-4.9 0-2.1-1.8-4.1-4.6-4.1z\" fill=\"#fff\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo\" aria-label=\"Carte de visite\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect x=\"3\" y=\"5.5\" width=\"18\" height=\"13\" rx=\"3\" fill=\"#EEF2F8\"\/>\r\n                <circle cx=\"8\" cy=\"10.2\" r=\"2\" fill=\"#07142B\"\/>\r\n                <path d=\"M5.8 15c.7-1.7 3.7-1.7 4.4 0\" fill=\"none\" stroke=\"#07142B\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/>\r\n                <path d=\"M13 9.3h4.6M13 12h4.6M13 14.7h3.2\" fill=\"none\" stroke=\"#07142B\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo hmc-channel-logo--inrcy\" aria-label=\"Site iNrCy\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2025\/09\/cropped-cropped-Design-sans-titre-26-178x59.png\"\r\n                alt=\"Logo iNrCy\"\r\n              >\r\n            <\/span>\r\n\r\n            <span class=\"hmc-channel-logo hmc-channel-logo--search\" aria-label=\"iNr'Search\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <defs>\r\n                  <linearGradient id=\"hmcSearchGrad\" x1=\"0\" y1=\"1\" x2=\"1\" y2=\"0\">\r\n                    <stop offset=\"0%\" stop-color=\"#FF7437\"\/>\r\n                    <stop offset=\"35%\" stop-color=\"#FF2F91\"\/>\r\n                    <stop offset=\"68%\" stop-color=\"#A62FFF\"\/>\r\n                    <stop offset=\"100%\" stop-color=\"#178CFF\"\/>\r\n                  <\/linearGradient>\r\n                <\/defs>\r\n                <rect width=\"24\" height=\"24\" rx=\"7\" fill=\"url(#hmcSearchGrad)\"\/>\r\n                <circle cx=\"10.3\" cy=\"10.3\" r=\"4.2\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.7\"\/>\r\n                <path d=\"M13.5 13.5l4 4\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"hmc-transition-divider\" aria-hidden=\"true\">\r\n      <span class=\"hmc-transition-line\"><\/span>\r\n      <span class=\"hmc-transition-dot\">\u2304<\/span>\r\n      <span class=\"hmc-transition-line\"><\/span>\r\n    <\/div>\r\n\r\n  `;\r\n\r\n  inner.insertBefore(mobileHero, inner.firstChild);\r\n\r\n  \/* =========================================================\r\n     ANIMATION D'ENTR\u00c9E\r\n     ========================================================= *\/\r\n\r\n  const animatedItems = Array.from(\r\n    mobileHero.querySelectorAll(\r\n      '.hmc-title, .hmc-proof, .hmc-subtitle, .hmc-offer, .hmc-benefit, .hmc-cta, .hmc-microcopy, .hmc-phone-stage'\r\n    )\r\n  );\r\n\r\n  animatedItems.forEach((el, index)=>{\r\n    el.style.setProperty('--hmc-delay', `${Math.min(index * 75, 650)}ms`);\r\n  });\r\n\r\n  function revealMobileHero(){\r\n    if(!mq.matches) return;\r\n\r\n    window.requestAnimationFrame(()=>{\r\n      mobileHero.classList.add('is-ready');\r\n    });\r\n  }\r\n\r\n  if(document.readyState === 'complete'){\r\n    setTimeout(revealMobileHero, 80);\r\n  } else {\r\n    window.addEventListener('load', ()=>{\r\n      setTimeout(revealMobileHero, 80);\r\n    }, {once:true});\r\n  }\r\n\r\n  \/* =========================================================\r\n     ANIMATION DU PRIX\r\n     ========================================================= *\/\r\n\r\n  const priceNode = mobileHero.querySelector('.hmc-price > strong');\r\n  let priceAnimated = false;\r\n\r\n  function animatePrice(){\r\n\r\n    if(!mq.matches || !priceNode || priceAnimated) return;\r\n\r\n    priceAnimated = true;\r\n\r\n    const duration = 650;\r\n    const start = performance.now();\r\n\r\n    function frame(now){\r\n      const p = Math.min((now - start) \/ duration, 1);\r\n      const eased = 1 - Math.pow(1 - p, 3);\r\n      const value = Math.round(58 * eased);\r\n\r\n      priceNode.textContent = value + '\u20ac';\r\n\r\n      if(p < 1){\r\n        requestAnimationFrame(frame);\r\n      } else {\r\n        priceNode.textContent = '58\u20ac';\r\n      }\r\n    }\r\n\r\n    requestAnimationFrame(frame);\r\n  }\r\n\r\n  \/* =========================================================\r\n     OBSERVATION DU HERO MOBILE\r\n     ========================================================= *\/\r\n\r\n  const mobileObserver = new IntersectionObserver(\r\n    entries =>{\r\n      const entry = entries[0];\r\n\r\n      if(entry.isIntersecting && mq.matches){\r\n        mobileHero.classList.add('is-in-view');\r\n        animatePrice();\r\n      } else {\r\n        mobileHero.classList.remove('is-in-view');\r\n      }\r\n    },\r\n    {\r\n      threshold:.12\r\n    }\r\n  );\r\n\r\n  mobileObserver.observe(mobileHero);\r\n\r\n  \/* =========================================================\r\n     GLOW CYCLIQUE DU CTA\r\n     ========================================================= *\/\r\n\r\n  const cta = mobileHero.querySelector('.hmc-cta');\r\n  let ctaTimer = null;\r\n\r\n  function startCTAGlow(){\r\n    if(!mq.matches || !cta) return;\r\n\r\n    clearInterval(ctaTimer);\r\n\r\n    ctaTimer = setInterval(()=>{\r\n      if(!mobileHero.classList.contains('is-in-view')) return;\r\n\r\n      cta.classList.remove('hmc-cta-pulse');\r\n      void cta.offsetWidth;\r\n      cta.classList.add('hmc-cta-pulse');\r\n\r\n      setTimeout(()=>{\r\n        cta.classList.remove('hmc-cta-pulse');\r\n      }, 1100);\r\n\r\n    }, 4200);\r\n  }\r\n\r\n  \/* =========================================================\r\n     PETIT EFFET DE PROFONDEUR AU SCROLL\r\n     ========================================================= *\/\r\n\r\n  const phoneStage = mobileHero.querySelector('.hmc-phone-stage');\r\n  let scrollTicking = false;\r\n\r\n  function mobileParallax(){\r\n\r\n    if(!mq.matches || !phoneStage){\r\n      return;\r\n    }\r\n\r\n    if(scrollTicking) return;\r\n    scrollTicking = true;\r\n\r\n    requestAnimationFrame(()=>{\r\n\r\n      const rect = mobileHero.getBoundingClientRect();\r\n      const viewport = window.innerHeight || 1;\r\n      const progress = Math.max(\r\n        -1,\r\n        Math.min(\r\n          1,\r\n          (viewport * .62 - rect.top) \/ viewport\r\n        )\r\n      );\r\n\r\n      phoneStage.style.setProperty(\r\n        '--hmc-parallax',\r\n        `${progress * 8}px`\r\n      );\r\n\r\n      scrollTicking = false;\r\n\r\n    });\r\n  }\r\n\r\n  window.addEventListener(\r\n    'scroll',\r\n    mobileParallax,\r\n    {passive:true}\r\n  );\r\n\r\n  \/* =========================================================\r\n     RESPONSIVE CHANGE\r\n     ========================================================= *\/\r\n\r\n  function syncMobileMode(){\r\n\r\n    if(mq.matches){\r\n      revealMobileHero();\r\n      startCTAGlow();\r\n      mobileParallax();\r\n    } else {\r\n      clearInterval(ctaTimer);\r\n      mobileHero.classList.remove('is-in-view');\r\n      mobileHero.style.removeProperty('--hmc-parallax');\r\n    }\r\n\r\n  }\r\n\r\n  if(typeof mq.addEventListener === 'function'){\r\n    mq.addEventListener('change', syncMobileMode);\r\n  } else if(typeof mq.addListener === 'function'){\r\n    mq.addListener(syncMobileMode);\r\n  }\r\n\r\n  syncMobileMode();\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- =========================================================\r\n     iNrCy \u2014 AJUSTEMENT MOBILE V2\r\n     Compactage automatique selon la hauteur r\u00e9ellement visible\r\n     ========================================================= -->\r\n<script>\r\n(function(){\r\n\r\n  'use strict';\r\n\r\n  const hero = document.getElementById('inrcyHeroSteps');\r\n  if(!hero) return;\r\n\r\n  const mobileHero = hero.querySelector('.hs-mobile-conversion');\r\n  if(!mobileHero) return;\r\n\r\n  const mq = window.matchMedia('(max-width: 760px)');\r\n\r\n  function getVisibleHeight(){\r\n    if(window.visualViewport && window.visualViewport.height){\r\n      return window.visualViewport.height;\r\n    }\r\n\r\n    return window.innerHeight || document.documentElement.clientHeight || 900;\r\n  }\r\n\r\n  function syncHeroDensity(){\r\n\r\n    if(!mq.matches){\r\n      mobileHero.classList.remove('hmc-short-viewport');\r\n      return;\r\n    }\r\n\r\n    const visibleHeight = getVisibleHeight();\r\n\r\n    \/*\r\n     * Safari mobile r\u00e9duit fortement la zone r\u00e9ellement visible\r\n     * avec la barre d'adresse. On compacte alors le hero pour que\r\n     * le haut du t\u00e9l\u00e9phone reste visible d\u00e8s le premier \u00e9cran.\r\n     *\/\r\n    mobileHero.classList.toggle(\r\n      'hmc-short-viewport',\r\n      visibleHeight < 820\r\n    );\r\n  }\r\n\r\n  syncHeroDensity();\r\n\r\n  window.addEventListener('resize', syncHeroDensity, {passive:true});\r\n  window.addEventListener('orientationchange', syncHeroDensity, {passive:true});\r\n\r\n  if(window.visualViewport){\r\n    window.visualViewport.addEventListener(\r\n      'resize',\r\n      syncHeroDensity,\r\n      {passive:true}\r\n    );\r\n  }\r\n\r\n  if(typeof mq.addEventListener === 'function'){\r\n    mq.addEventListener('change', syncHeroDensity);\r\n  }\r\n\r\n})();\r\n<\/script>\r\n<!-- =========================================================\r\n     iNrCy \u2014 CARROUSEL MOBILE PREMIUM DES \u00c9TAPES\r\n     \u00c9tapes 1 \u00e0 4 uniquement \u2014 <= 760px\r\n     ========================================================= -->\r\n<script>\r\n\/* =========================================================\r\n   iNrCy \u2014 CARROUSEL MOBILE PREMIUM\r\n   \u00c9tapes 1 \u00e0 4 \u2014 <= 760px\r\n\r\n   - Drag r\u00e9el : la slide suit le doigt\r\n   - Swipe gauche \/ droite avec inertie\r\n   - R\u00e9sistance douce aux extr\u00e9mit\u00e9s\r\n   - Snap fluide au rel\u00e2chement\r\n   - Autoplay intelligent\r\n   - Pause apr\u00e8s interaction\r\n   - Dots cliquables\r\n   - Fl\u00e8ches clavier\r\n   - Hauteur adapt\u00e9e \u00e0 chaque slide\r\n   - Scroll vertical mobile conserv\u00e9\r\n   - Rotation \/ resize \/ VisualViewport\r\n   - Respect de prefers-reduced-motion\r\n   ========================================================= *\/\r\n\r\n(function () {\r\n  'use strict';\r\n\r\n  const hero = document.getElementById('inrcyHeroSteps');\r\n  if (!hero) return;\r\n\r\n  \/* \u00c9vite une double initialisation si Elementor r\u00e9injecte le script. *\/\r\n  if (hero.dataset.mobileStepsCarousel === 'premium') return;\r\n  hero.dataset.mobileStepsCarousel = 'premium';\r\n\r\n  const flow = hero.querySelector('#hsFlow');\r\n  if (!flow) return;\r\n\r\n  const steps = [\r\n    hero.querySelector('#hsStep1'),\r\n    hero.querySelector('#hsStep2'),\r\n    hero.querySelector('#hsStep3'),\r\n    hero.querySelector('#hsStep4')\r\n  ].filter(Boolean);\r\n\r\n  if (steps.length < 2) return;\r\n\r\n  const mq = window.matchMedia('(max-width: 760px)');\r\n  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n\r\n  \/* =========================================================\r\n     CR\u00c9ATION DE LA STRUCTURE\r\n     ========================================================= *\/\r\n\r\n  const viewport = document.createElement('div');\r\n  viewport.className = 'hs-carousel-viewport';\r\n  viewport.id = 'hsStepsCarouselViewport';\r\n  viewport.setAttribute('role', 'region');\r\n  viewport.setAttribute('aria-roledescription', 'carrousel');\r\n  viewport.setAttribute('aria-label', 'Les \u00e9tapes iNrCy');\r\n  viewport.setAttribute('tabindex', '0');\r\n\r\n  const track = document.createElement('div');\r\n  track.className = 'hs-carousel-track';\r\n  track.id = 'hsStepsCarouselTrack';\r\n\r\n  const connections = flow.querySelector('#hsConnections');\r\n\r\n  if (connections && connections.nextSibling) {\r\n    flow.insertBefore(viewport, connections.nextSibling);\r\n  } else {\r\n    flow.appendChild(viewport);\r\n  }\r\n\r\n  viewport.appendChild(track);\r\n  steps.forEach(step => track.appendChild(step));\r\n\r\n  \/* Fl\u00e8ches lat\u00e9rales \u2014 navigation tactile\/clic *\/\r\n  const prevButton = document.createElement('button');\r\n  prevButton.type = 'button';\r\n  prevButton.className = 'hs-carousel-arrow hs-carousel-arrow--prev';\r\n  prevButton.setAttribute('aria-label', '\u00c9tape pr\u00e9c\u00e9dente');\r\n  prevButton.innerHTML = '<span aria-hidden=\"true\">\u2039<\/span>';\r\n\r\n  const nextButton = document.createElement('button');\r\n  nextButton.type = 'button';\r\n  nextButton.className = 'hs-carousel-arrow hs-carousel-arrow--next';\r\n  nextButton.setAttribute('aria-label', '\u00c9tape suivante');\r\n  nextButton.innerHTML = '<span aria-hidden=\"true\">\u203a<\/span>';\r\n\r\n  flow.appendChild(prevButton);\r\n  flow.appendChild(nextButton);\r\n\r\n  const nav = document.createElement('div');\r\n  nav.className = 'hs-carousel-nav';\r\n  nav.setAttribute('aria-label', 'Navigation des \u00e9tapes');\r\n\r\n  const dots = steps.map((step, index) => {\r\n    const dot = document.createElement('button');\r\n    dot.type = 'button';\r\n    dot.className = 'hs-carousel-dot';\r\n    dot.setAttribute('aria-label', `Afficher l\u2019\u00e9tape ${index + 1}`);\r\n    dot.setAttribute('aria-controls', step.id);\r\n    nav.appendChild(dot);\r\n    return dot;\r\n  });\r\n\r\n  flow.appendChild(nav);\r\n\r\n  \/* =========================================================\r\n     R\u00c9GLAGES\r\n     ========================================================= *\/\r\n\r\n  const AUTOPLAY_DELAY = 6500;\r\n  const MANUAL_PAUSE = 10000;\r\n\r\n  \/* Distance minimale avant de changer de slide. *\/\r\n  const DISTANCE_RATIO = 0.06;\r\n\r\n  \/* Un swipe court mais rapide doit \u00e9galement changer de slide. *\/\r\n  const VELOCITY_THRESHOLD = 0.20; \/\/ px\/ms\r\n\r\n  \/* R\u00e9sistance quand on tire au-del\u00e0 de la premi\u00e8re\/derni\u00e8re slide. *\/\r\n  const EDGE_RESISTANCE = 0.28;\r\n\r\n  \/* Dur\u00e9es de snap. *\/\r\n  const SNAP_DURATION = 280;\r\n  const FAST_SNAP_DURATION = 190;\r\n\r\n  \/* =========================================================\r\n     \u00c9TAT\r\n     ========================================================= *\/\r\n\r\n  let current = 0;\r\n  let autoDirection = 1;\r\n\r\n  let autoTimer = null;\r\n  let resumeTimer = null;\r\n  let heightFrame = 0;\r\n\r\n  let isInView = false;\r\n  let isDragging = false;\r\n  let axisLocked = null;\r\n\r\n  let pointerId = null;\r\n  let startX = 0;\r\n  let startY = 0;\r\n  let lastX = 0;\r\n  let lastTime = 0;\r\n  let velocityX = 0;\r\n  let dragX = 0;\r\n\r\n  \/* =========================================================\r\n     OUTILS\r\n     ========================================================= *\/\r\n\r\n  function clamp(value, min, max) {\r\n    return Math.min(Math.max(value, min), max);\r\n  }\r\n\r\n  function viewportWidth() {\r\n    return Math.max(viewport.getBoundingClientRect().width, 1);\r\n  }\r\n\r\n  function baseTranslatePx(index = current) {\r\n    return -(index * viewportWidth());\r\n  }\r\n\r\n  function setTrackTransition(enabled, duration = SNAP_DURATION) {\r\n    if (!mq.matches) {\r\n      track.style.transition = '';\r\n      return;\r\n    }\r\n\r\n    if (!enabled || reduceMotion.matches) {\r\n      track.style.transition = 'none';\r\n      return;\r\n    }\r\n\r\n    track.style.transition =\r\n      `transform ${duration}ms cubic-bezier(.22,.78,.24,1)`;\r\n  }\r\n\r\n  function setTrackX(px) {\r\n    track.style.transform = `translate3d(${px}px,0,0)`;\r\n  }\r\n\r\n  function snapToCurrent(immediate = false, duration = SNAP_DURATION) {\r\n    setTrackTransition(!immediate, duration);\r\n    setTrackX(baseTranslatePx());\r\n\r\n    if (immediate || reduceMotion.matches) {\r\n      requestAnimationFrame(() => {\r\n        if (mq.matches) {\r\n          setTrackTransition(true, SNAP_DURATION);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  function updateA11yAndDots() {\r\n    steps.forEach((step, index) => {\r\n      const active = index === current;\r\n\r\n      step.classList.toggle('hs-carousel-current', active);\r\n\r\n      if (mq.matches) {\r\n        step.setAttribute('aria-hidden', active ? 'false' : 'true');\r\n      } else {\r\n        step.removeAttribute('aria-hidden');\r\n      }\r\n    });\r\n\r\n    dots.forEach((dot, index) => {\r\n      const active = index === current;\r\n      dot.classList.toggle('active', active);\r\n      dot.setAttribute('aria-current', active ? 'true' : 'false');\r\n      dot.tabIndex = active ? 0 : -1;\r\n    });\r\n  }\r\n\r\n  \/* =========================================================\r\n     HAUTEUR DE LA SLIDE ACTIVE\r\n     ========================================================= *\/\r\n\r\n  function updateViewportHeight(immediate = false, targetIndex = current) {\r\n    if (!mq.matches) return;\r\n\r\n    cancelAnimationFrame(heightFrame);\r\n\r\n    heightFrame = requestAnimationFrame(() => {\r\n      const target = steps[targetIndex];\r\n      if (!target) return;\r\n\r\n      const height = Math.ceil(target.getBoundingClientRect().height);\r\n      if (!height) return;\r\n\r\n      if (immediate || reduceMotion.matches) {\r\n        viewport.style.transition = 'none';\r\n      } else {\r\n        viewport.style.transition =\r\n          'height 420ms cubic-bezier(.22,.78,.24,1)';\r\n      }\r\n\r\n      viewport.style.height = `${height}px`;\r\n\r\n      if (immediate || reduceMotion.matches) {\r\n        requestAnimationFrame(() => {\r\n          if (mq.matches) {\r\n            viewport.style.transition =\r\n              'height 420ms cubic-bezier(.22,.78,.24,1)';\r\n          }\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  \/* =========================================================\r\n     NAVIGATION\r\n     ========================================================= *\/\r\n\r\n  function goTo(index, options = {}) {\r\n    if (!steps.length) return;\r\n\r\n    const {\r\n      immediate = false,\r\n      manual = false,\r\n      duration = SNAP_DURATION\r\n    } = options;\r\n\r\n    const next = clamp(index, 0, steps.length - 1);\r\n\r\n    current = next;\r\n    dragX = 0;\r\n\r\n    updateA11yAndDots();\r\n    updateViewportHeight(immediate, current);\r\n    snapToCurrent(immediate, duration);\r\n\r\n    if (manual) {\r\n      pauseAfterManualAction();\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     AUTOPLAY\r\n     ========================================================= *\/\r\n\r\n  function stopAutoplay() {\r\n    if (autoTimer) {\r\n      clearInterval(autoTimer);\r\n      autoTimer = null;\r\n    }\r\n  }\r\n\r\n  function canAutoplay() {\r\n    return (\r\n      mq.matches &&\r\n      !reduceMotion.matches &&\r\n      isInView &&\r\n      !document.hidden &&\r\n      !isDragging\r\n    );\r\n  }\r\n\r\n  function startAutoplay() {\r\n    stopAutoplay();\r\n\r\n    if (!canAutoplay()) return;\r\n\r\n    autoTimer = setInterval(() => {\r\n      const next = (current + 1) % steps.length;\r\n\r\n      \/* Boucle continue : 1 \u2192 2 \u2192 3 \u2192 4 \u2192 1 *\/\r\n      goTo(next, {\r\n        duration: SNAP_DURATION\r\n      });\r\n    }, AUTOPLAY_DELAY);\r\n  }\r\n\r\n  function pauseAfterManualAction() {\r\n    stopAutoplay();\r\n    clearTimeout(resumeTimer);\r\n\r\n    resumeTimer = setTimeout(() => {\r\n      startAutoplay();\r\n    }, MANUAL_PAUSE);\r\n  }\r\n\r\n  \/* =========================================================\r\n     DRAG \/ SWIPE PREMIUM\r\n     ========================================================= *\/\r\n\r\n  \/*\r\n   * pan-y laisse le navigateur g\u00e9rer naturellement le scroll vertical.\r\n   * Le mouvement horizontal est r\u00e9serv\u00e9 au carrousel.\r\n   *\/\r\n  viewport.style.touchAction = 'pan-y';\r\n  viewport.style.webkitUserSelect = 'none';\r\n  viewport.style.userSelect = 'none';\r\n\r\n  function resetDragState() {\r\n    isDragging = false;\r\n    axisLocked = null;\r\n    pointerId = null;\r\n    dragX = 0;\r\n    velocityX = 0;\r\n    hero.classList.remove('hs-carousel-dragging');\r\n  }\r\n\r\n  function onPointerDown(event) {\r\n    if (!mq.matches) return;\r\n    if (event.pointerType === 'mouse' && event.button !== 0) return;\r\n\r\n    isDragging = true;\r\n    axisLocked = null;\r\n    pointerId = event.pointerId;\r\n\r\n    startX = event.clientX;\r\n    startY = event.clientY;\r\n    lastX = event.clientX;\r\n    lastTime = performance.now();\r\n\r\n    velocityX = 0;\r\n    dragX = 0;\r\n\r\n    stopAutoplay();\r\n    clearTimeout(resumeTimer);\r\n\r\n    setTrackTransition(false);\r\n\r\n    hero.classList.add('hs-carousel-dragging');\r\n\r\n    try {\r\n      viewport.setPointerCapture(pointerId);\r\n    } catch (_) {}\r\n  }\r\n\r\n  function onPointerMove(event) {\r\n    if (!mq.matches || !isDragging || event.pointerId !== pointerId) return;\r\n\r\n    const dx = event.clientX - startX;\r\n    const dy = event.clientY - startY;\r\n\r\n    \/*\r\n     * On attend quelques pixels avant de d\u00e9cider si le geste\r\n     * est horizontal ou vertical.\r\n     *\/\r\n    if (!axisLocked) {\r\n      if (Math.abs(dx) < 7 && Math.abs(dy) < 7) return;\r\n\r\n      axisLocked =\r\n        Math.abs(dx) > Math.abs(dy) * 1.08\r\n          ? 'x'\r\n          : 'y';\r\n\r\n      if (axisLocked === 'y') {\r\n        \/*\r\n         * On abandonne le drag : le navigateur garde\r\n         * le scroll vertical enti\u00e8rement naturel.\r\n         *\/\r\n        snapToCurrent(false, FAST_SNAP_DURATION);\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (axisLocked !== 'x') return;\r\n\r\n    const now = performance.now();\r\n    const dt = Math.max(now - lastTime, 1);\r\n    const instantVelocity = (event.clientX - lastX) \/ dt;\r\n\r\n    \/* Lissage de la v\u00e9locit\u00e9 pour \u00e9viter les faux d\u00e9parts. *\/\r\n    velocityX = velocityX * 0.72 + instantVelocity * 0.28;\r\n\r\n    lastX = event.clientX;\r\n    lastTime = now;\r\n\r\n    dragX = dx;\r\n\r\n    \/*\r\n     * Pas de r\u00e9sistance aux extr\u00e9mit\u00e9s :\r\n     * le carrousel boucle, donc le geste reste naturel.\r\n     *\/\r\n    setTrackX(baseTranslatePx() + dragX);\r\n  }\r\n\r\n  function finishPointer(event, cancelled = false) {\r\n    if (!isDragging) return;\r\n    if (\r\n      pointerId !== null &&\r\n      event.pointerId !== undefined &&\r\n      event.pointerId !== pointerId\r\n    ) return;\r\n\r\n    const horizontal = axisLocked === 'x';\r\n    const width = viewportWidth();\r\n\r\n    let next = current;\r\n\r\n    if (!cancelled && horizontal) {\r\n      const enoughDistance =\r\n        Math.abs(dragX) >= width * DISTANCE_RATIO;\r\n\r\n      const enoughVelocity =\r\n        Math.abs(velocityX) >= VELOCITY_THRESHOLD;\r\n\r\n      if (enoughDistance || enoughVelocity) {\r\n        if (dragX < 0 || velocityX < -VELOCITY_THRESHOLD) {\r\n          next = current + 1;\r\n          autoDirection = 1;\r\n        } else if (dragX > 0 || velocityX > VELOCITY_THRESHOLD) {\r\n          next = current - 1;\r\n          autoDirection = -1;\r\n        }\r\n      }\r\n    }\r\n\r\n    \/* Boucle manuelle :\r\n       4 + swipe gauche = 1\r\n       1 + swipe droite = 4 *\/\r\n    if (next >= steps.length) next = 0;\r\n    if (next < 0) next = steps.length - 1;\r\n\r\n    const changed = next !== current;\r\n\r\n    resetDragState();\r\n\r\n    goTo(next, {\r\n      duration: changed ? SNAP_DURATION : FAST_SNAP_DURATION\r\n    });\r\n\r\n    pauseAfterManualAction();\r\n\r\n    try {\r\n      if (\r\n        event.pointerId !== undefined &&\r\n        viewport.hasPointerCapture(event.pointerId)\r\n      ) {\r\n        viewport.releasePointerCapture(event.pointerId);\r\n      }\r\n    } catch (_) {}\r\n  }\r\n\r\n  viewport.addEventListener('pointerdown', onPointerDown);\r\n\r\n  viewport.addEventListener('pointermove', onPointerMove, {\r\n    passive: true\r\n  });\r\n\r\n  viewport.addEventListener('pointerup', event => {\r\n    finishPointer(event, false);\r\n  });\r\n\r\n  viewport.addEventListener('pointercancel', event => {\r\n    finishPointer(event, true);\r\n  });\r\n\r\n  viewport.addEventListener('lostpointercapture', event => {\r\n    if (isDragging) {\r\n      finishPointer(event, true);\r\n    }\r\n  });\r\n\r\n  \/* Emp\u00eache le drag fant\u00f4me d\u2019images dans certains navigateurs. *\/\r\n  viewport.addEventListener('dragstart', event => {\r\n    event.preventDefault();\r\n  });\r\n\r\n  \/* =========================================================\r\n     FL\u00c8CHES \u2014 BOUCLE INFINIE\r\n     ========================================================= *\/\r\n\r\n  function goNext(manual = true) {\r\n    goTo((current + 1) % steps.length, {\r\n      manual,\r\n      duration: SNAP_DURATION\r\n    });\r\n  }\r\n\r\n  function goPrev(manual = true) {\r\n    goTo((current - 1 + steps.length) % steps.length, {\r\n      manual,\r\n      duration: SNAP_DURATION\r\n    });\r\n  }\r\n\r\n  prevButton.addEventListener('click', () => {\r\n    if (!mq.matches) return;\r\n    goPrev(true);\r\n  });\r\n\r\n  nextButton.addEventListener('click', () => {\r\n    if (!mq.matches) return;\r\n    goNext(true);\r\n  });\r\n\r\n  \/* =========================================================\r\n     DOTS\r\n     ========================================================= *\/\r\n\r\n  dots.forEach((dot, index) => {\r\n    dot.addEventListener('click', () => {\r\n      if (!mq.matches) return;\r\n\r\n      autoDirection = index >= current ? 1 : -1;\r\n\r\n      goTo(index, {\r\n        manual: true,\r\n        duration: SNAP_DURATION\r\n      });\r\n    });\r\n  });\r\n\r\n  \/* =========================================================\r\n     CLAVIER\r\n     ========================================================= *\/\r\n\r\n  viewport.addEventListener('keydown', event => {\r\n    if (!mq.matches) return;\r\n\r\n    if (event.key === 'ArrowRight') {\r\n      event.preventDefault();\r\n      goNext(true);\r\n    }\r\n\r\n    if (event.key === 'ArrowLeft') {\r\n      event.preventDefault();\r\n      goPrev(true);\r\n    }\r\n  });\r\n\r\n  \/* =========================================================\r\n     VISIBILIT\u00c9\r\n     ========================================================= *\/\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    const observer = new IntersectionObserver(entries => {\r\n      const entry = entries[0];\r\n      isInView = Boolean(entry && entry.isIntersecting);\r\n\r\n      if (isInView) {\r\n        updateViewportHeight(true);\r\n        startAutoplay();\r\n      } else {\r\n        stopAutoplay();\r\n      }\r\n    }, {\r\n      threshold: 0.18,\r\n      rootMargin: '80px 0px 80px 0px'\r\n    });\r\n\r\n    observer.observe(viewport);\r\n  } else {\r\n    isInView = true;\r\n  }\r\n\r\n  \/* =========================================================\r\n     RESPONSIVE \/ ROTATION\r\n     ========================================================= *\/\r\n\r\n  function syncMode() {\r\n    clearTimeout(resumeTimer);\r\n    resetDragState();\r\n\r\n    if (mq.matches) {\r\n      hero.classList.add('hs-mobile-carousel-ready');\r\n\r\n      \/*\r\n       * Important apr\u00e8s une rotation :\r\n       * la translation d\u00e9pend de la largeur r\u00e9elle du viewport.\r\n       *\/\r\n      goTo(current, {\r\n        immediate: true\r\n      });\r\n\r\n      startAutoplay();\r\n    } else {\r\n      stopAutoplay();\r\n\r\n      hero.classList.remove('hs-mobile-carousel-ready');\r\n      hero.classList.remove('hs-carousel-dragging');\r\n\r\n      viewport.style.height = '';\r\n      viewport.style.transition = '';\r\n      track.style.transform = '';\r\n      track.style.transition = '';\r\n\r\n      steps.forEach(step => {\r\n        step.classList.remove('hs-carousel-current');\r\n        step.removeAttribute('aria-hidden');\r\n      });\r\n\r\n      dots.forEach(dot => {\r\n        dot.removeAttribute('aria-current');\r\n        dot.tabIndex = 0;\r\n      });\r\n    }\r\n  }\r\n\r\n  function onResize() {\r\n    if (!mq.matches || isDragging) return;\r\n\r\n    \/*\r\n     * On recalcule la largeur de translation.\r\n     * requestAnimationFrame \u00e9vite les saccades pendant le resize.\r\n     *\/\r\n    requestAnimationFrame(() => {\r\n      updateViewportHeight(true);\r\n      snapToCurrent(true);\r\n    });\r\n  }\r\n\r\n  window.addEventListener('resize', onResize, {\r\n    passive: true\r\n  });\r\n\r\n  window.addEventListener('orientationchange', () => {\r\n    setTimeout(() => {\r\n      if (!mq.matches) return;\r\n      updateViewportHeight(true);\r\n      snapToCurrent(true);\r\n    }, 220);\r\n  }, {\r\n    passive: true\r\n  });\r\n\r\n  if (window.visualViewport) {\r\n    window.visualViewport.addEventListener('resize', onResize, {\r\n      passive: true\r\n    });\r\n  }\r\n\r\n  if (typeof mq.addEventListener === 'function') {\r\n    mq.addEventListener('change', syncMode);\r\n  } else if (typeof mq.addListener === 'function') {\r\n    mq.addListener(syncMode);\r\n  }\r\n\r\n  document.addEventListener('visibilitychange', () => {\r\n    if (document.hidden) {\r\n      stopAutoplay();\r\n    } else {\r\n      startAutoplay();\r\n    }\r\n  });\r\n\r\n  \/* =========================================================\r\n     IMAGES \/ CONTENU DYNAMIQUE\r\n     ========================================================= *\/\r\n\r\n  viewport.querySelectorAll('img').forEach(img => {\r\n    img.setAttribute('draggable', 'false');\r\n\r\n    if (!img.complete) {\r\n      img.addEventListener('load', () => {\r\n        updateViewportHeight(true);\r\n      }, {\r\n        once: true\r\n      });\r\n    }\r\n  });\r\n\r\n  if ('ResizeObserver' in window) {\r\n    const resizeObserver = new ResizeObserver(() => {\r\n      if (!isDragging) {\r\n        updateViewportHeight(true);\r\n      }\r\n    });\r\n\r\n    steps.forEach(step => resizeObserver.observe(step));\r\n  }\r\n\r\n  \/* =========================================================\r\n     INITIALISATION\r\n     ========================================================= *\/\r\n\r\n  updateA11yAndDots();\r\n  goTo(0, {\r\n    immediate: true\r\n  });\r\n  syncMode();\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba73242 e-flex e-con-boxed e-con e-parent\" data-id=\"ba73242\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-030cbc4 elementor-widget elementor-widget-html\" data-id=\"030cbc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"inrcyAutonomy\">\n\n  <div class=\"ia-wrap\">\n\n    <!-- ===================================================== -->\n    <!-- BLOC 1 \u2014 INTRO                                        -->\n    <!-- ===================================================== -->\n    <div class=\"ia-block ia-hero\">\n      <div class=\"ia-badge\">Fonctionnement 100% autonome<\/div>\n\n      <h2>\n        Votre communication avance,\n        <span>m\u00eame quand vous \u00eates sur le terrain.<\/span>\n      <\/h2>\n\n      <p>\n        iNrCy vous permet de centraliser votre communication, connecter vos canaux,\n        cr\u00e9er gratuitement ceux qui manquent et publier partout en quelques minutes,\n        sans complexit\u00e9 technique.\n      <\/p>\n\n      <div class=\"ia-hero-points\">\n        <span>Inscription rapide<\/span>\n        <span>Cr\u00e9ation du compte<\/span>\n        <span>Connexion des canaux<\/span>\n        <span>Canaux manquants offerts<\/span>\n        <span>Publication multicanale<\/span>\n      <\/div>\n    <\/div>\n\n\n    <!-- ===================================================== -->\n    <!-- BLOC 2 \u2014 DIAGRAMME + ETAPES                           -->\n    <!-- ===================================================== -->\n    <div class=\"ia-block ia-process-block\">\n\n      <div class=\"ia-section-head\">\n        <div class=\"ia-mini-title\">Comment \u00e7a fonctionne ?<\/div>\n\n        <h3>\n          Une mise en place simple,\n          <span>pens\u00e9e pour \u00eatre autonome de A \u00e0 Z.<\/span>\n        <\/h3>\n      <\/div>\n\n      <div class=\"ia-process-grid\">\n\n        <!-- DIAGRAMME CIRCULAIRE -->\n        <div class=\"ia-diagram-col\">\n\n          <div class=\"ia-diagram\">\n            <div class=\"ia-ring ring-1\"><\/div>\n            <div class=\"ia-ring ring-2\"><\/div>\n\n            <div class=\"ia-center\">\n              <img decoding=\"async\"\n                src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2025\/09\/cropped-cropped-Design-sans-titre-26-178x59.png\"\n                alt=\"Logo iNrCy\"\n              >\n              <strong>iNrCy<\/strong>\n              <span>\n                Tout est centralis\u00e9\n                dans une seule plateforme\n              <\/span>\n            <\/div>\n\n            <div class=\"ia-node ia-node-1\">\n              <b>1<\/b>\n              <span>Inscription<\/span>\n            <\/div>\n\n            <div class=\"ia-node ia-node-2\">\n              <b>2<\/b>\n              <span>Compte cr\u00e9\u00e9<\/span>\n            <\/div>\n\n            <div class=\"ia-node ia-node-3\">\n              <b>3<\/b>\n              <span>Canaux connect\u00e9s<\/span>\n            <\/div>\n\n            <div class=\"ia-node ia-node-4\">\n              <b>4<\/b>\n              <span>Canaux manquants offerts<\/span>\n            <\/div>\n\n            <div class=\"ia-node ia-node-5\">\n              <b>5<\/b>\n              <span>Publication en quelques minutes<\/span>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n\n        <!-- ETAPES A DROITE -->\n        <div class=\"ia-steps-col\">\n\n          <div class=\"ia-step-card\">\n            <div class=\"ia-step-arrow\">\u2192<\/div>\n            <div class=\"ia-step-num\">1.<\/div>\n            <div class=\"ia-step-copy\">\n              <strong>Inscrivez-vous<\/strong>\n              <p>\n                Vous d\u00e9marrez simplement depuis la plateforme,\n                sans mise en place compliqu\u00e9e.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ia-step-card\">\n            <div class=\"ia-step-arrow\">\u2192<\/div>\n            <div class=\"ia-step-num\">2.<\/div>\n            <div class=\"ia-step-copy\">\n              <strong>Cr\u00e9ez votre compte<\/strong>\n              <p>\n                Votre espace est pr\u00eat \u00e0 accueillir vos contenus,\n                vos canaux et votre communication.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ia-step-card\">\n            <div class=\"ia-step-arrow\">\u2192<\/div>\n            <div class=\"ia-step-num\">3.<\/div>\n            <div class=\"ia-step-copy\">\n              <strong>Connectez tous vos canaux<\/strong>\n              <p>\n                Facebook, Instagram, LinkedIn, Google Business,\n                TikTok, YouTube, Mail, Site internet et plus encore.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ia-step-card ia-step-card--highlight\">\n            <div class=\"ia-step-arrow\">\u2192<\/div>\n            <div class=\"ia-step-num\">4.<\/div>\n            <div class=\"ia-step-copy\">\n              <strong>Cr\u00e9ation des canaux manquants offerte<\/strong>\n              <p>\n                Si certains canaux ne sont pas encore pr\u00eats,\n                iNrCy vous accompagne avec leur cr\u00e9ation offerte.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ia-step-card ia-step-card--final\">\n            <div class=\"ia-step-arrow\">\u2192<\/div>\n            <div class=\"ia-step-num\">5.<\/div>\n            <div class=\"ia-step-copy\">\n              <strong>Publiez partout en quelques minutes<\/strong>\n              <p>\n                Une seule action, plusieurs canaux diffus\u00e9s :\n                votre communication devient fluide, rapide et coh\u00e9rente.\n              <\/p>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n\n    <!-- ===================================================== -->\n    <!-- BLOC 3 \u2014 CITATION                                     -->\n    <!-- ===================================================== -->\n    <div class=\"ia-block ia-quote-block\">\n\n      <div class=\"ia-quote-mark\">\u201c<\/div>\n\n      <h3>\n        Une plateforme con\u00e7ue\n        <span>pour tous les professionnels.<\/span>\n      <\/h3>\n\n      <p class=\"ia-quote-sub\">\n        Votre m\u00e9tier, ce n\u2019est pas la com.\n        <strong>Le n\u00f4tre, c\u2019est de la rendre simple, rapide et efficace.<\/strong>\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n<script>\n(function(){\n\n  const diagram = document.querySelector(\n    '#inrcyAutonomy .ia-diagram'\n  );\n\n  if(!diagram) return;\n\n  \/* Evite de lancer le script 2 fois *\/\n  if(diagram.dataset.premiumDiagram === 'true') return;\n  diagram.dataset.premiumDiagram = 'true';\n\n\n  \/* =========================================================\n     AJOUT DU CSS AUTOMATIQUEMENT\n     ========================================================= *\/\n\n  const style = document.createElement('style');\n\n  style.textContent = `\n\n    \/* =======================================================\n       DIAGRAMME PREMIUM INR CY\n       ======================================================= *\/\n\n    #inrcyAutonomy .ia-diagram{\n      isolation:isolate;\n    }\n\n\n    \/* -------------------------------------------------------\n       SVG CONNECTEURS\n       ------------------------------------------------------- *\/\n\n    #inrcyAutonomy .ia-js-connections{\n      position:absolute;\n\n      inset:0;\n\n      width:100%;\n      height:100%;\n\n      z-index:1;\n\n      pointer-events:none;\n\n      overflow:visible;\n    }\n\n\n    #inrcyAutonomy .ia-js-path-bg{\n      fill:none;\n\n      stroke:rgba(255,255,255,.055);\n\n      stroke-width:1.4;\n\n      stroke-linecap:round;\n    }\n\n\n    #inrcyAutonomy .ia-js-path{\n      fill:none;\n\n      stroke:url(#iaPremiumGradient);\n\n      stroke-width:2.2;\n\n      stroke-linecap:round;\n\n      filter:\n        drop-shadow(\n          0 0 7px\n          rgba(174,50,255,.75)\n        );\n\n      opacity:.12;\n\n      transition:\n        opacity .35s ease;\n    }\n\n\n    #inrcyAutonomy .ia-js-path.active{\n      opacity:1;\n    }\n\n\n    \/* -------------------------------------------------------\n       POINT MOBILE SUR LA LIGNE\n       ------------------------------------------------------- *\/\n\n    #inrcyAutonomy .ia-js-moving-dot{\n      fill:#ffffff;\n\n      filter:\n        drop-shadow(0 0 5px #FF2F92)\n        drop-shadow(0 0 10px #A62FFF);\n\n      opacity:0;\n    }\n\n\n    #inrcyAutonomy .ia-js-moving-dot.active{\n      opacity:1;\n    }\n\n\n    \/* -------------------------------------------------------\n       CARTES \u00c9TAPES\n       ------------------------------------------------------- *\/\n\n    #inrcyAutonomy .ia-node{\n      z-index:5;\n\n      transition:\n        transform .42s cubic-bezier(.2,.8,.2,1),\n        border-color .42s ease,\n        box-shadow .42s ease,\n        background .42s ease,\n        opacity .42s ease !important;\n    }\n\n\n    #inrcyAutonomy .ia-node::after{\n      content:\"\";\n\n      position:absolute;\n\n      inset:-1px;\n\n      z-index:-1;\n\n      border-radius:inherit;\n\n      opacity:0;\n\n      background:\n        linear-gradient(\n          110deg,\n          rgba(255,116,55,.32),\n          rgba(255,47,145,.26),\n          rgba(166,47,255,.25),\n          rgba(23,140,255,.28)\n        );\n\n      filter:blur(13px);\n\n      transition:\n        opacity .35s ease;\n    }\n\n\n    #inrcyAutonomy .ia-node.ia-js-active{\n      border-color:\n        rgba(184,83,255,.72) !important;\n\n      background:\n        linear-gradient(\n          145deg,\n          #152B52,\n          #0C1A36\n        ) !important;\n\n      box-shadow:\n        0 18px 40px rgba(0,0,0,.28),\n        0 0 22px rgba(166,47,255,.22),\n        inset 0 1px 0 rgba(255,255,255,.07) !important;\n    }\n\n\n    #inrcyAutonomy .ia-node.ia-js-active::after{\n      opacity:1;\n    }\n\n\n    \/* Les transformations particuli\u00e8res sont pr\u00e9serv\u00e9es *\/\n\n    #inrcyAutonomy .ia-node-1.ia-js-active{\n      transform:\n        translateX(-50%)\n        translateY(-5px)\n        scale(1.045) !important;\n    }\n\n\n    #inrcyAutonomy .ia-node-2.ia-js-active,\n    #inrcyAutonomy .ia-node-3.ia-js-active{\n      transform:\n        translateY(-5px)\n        scale(1.045) !important;\n    }\n\n\n    #inrcyAutonomy .ia-node-4.ia-js-active{\n      transform:\n        translateX(-50%)\n        translateY(-5px)\n        scale(1.045) !important;\n    }\n\n\n    #inrcyAutonomy .ia-node-5.ia-js-active{\n      transform:\n        translateY(-50%)\n        translateX(-5px)\n        scale(1.045) !important;\n    }\n\n\n    \/* Num\u00e9ro de l'\u00e9tape *\/\n\n    #inrcyAutonomy .ia-node b{\n      position:relative;\n\n      overflow:hidden;\n\n      transition:\n        transform .35s ease,\n        box-shadow .35s ease;\n    }\n\n\n    #inrcyAutonomy .ia-node.ia-js-active b{\n      transform:scale(1.13);\n\n      box-shadow:\n        0 0 0 6px rgba(255,47,145,.07),\n        0 0 18px rgba(166,47,255,.55);\n    }\n\n\n    #inrcyAutonomy .ia-node b::after{\n      content:\"\";\n\n      position:absolute;\n\n      top:-30%;\n      left:-80%;\n\n      width:45%;\n      height:160%;\n\n      transform:skewX(-24deg);\n\n      background:\n        linear-gradient(\n          90deg,\n          transparent,\n          rgba(255,255,255,.75),\n          transparent\n        );\n\n      opacity:0;\n    }\n\n\n    #inrcyAutonomy .ia-node.ia-js-active b::after{\n      animation:\n        iaNumberShine\n        .8s ease forwards;\n    }\n\n\n    @keyframes iaNumberShine{\n\n      0%{\n        left:-80%;\n        opacity:0;\n      }\n\n      20%{\n        opacity:1;\n      }\n\n      100%{\n        left:150%;\n        opacity:0;\n      }\n\n    }\n\n\n    \/* -------------------------------------------------------\n       CENTRE INR CY\n       ------------------------------------------------------- *\/\n\n    #inrcyAutonomy .ia-center{\n      z-index:6;\n\n      transition:\n        box-shadow .5s ease,\n        transform .5s ease,\n        border-color .5s ease !important;\n    }\n\n\n    #inrcyAutonomy .ia-center.ia-js-center-active{\n      border-color:\n        rgba(161,83,255,.40) !important;\n\n      box-shadow:\n        0 0 0 10px rgba(255,255,255,.018),\n        0 0 32px rgba(166,47,255,.22),\n        0 0 65px rgba(23,140,255,.09) !important;\n    }\n\n\n    \/* Anneau autour du centre *\/\n\n    #inrcyAutonomy .ia-js-center-ring{\n      position:absolute;\n\n      top:50%;\n      left:50%;\n\n      z-index:2;\n\n      width:270px;\n      height:270px;\n\n      transform:\n        translate(-50%,-50%);\n\n      border-radius:50%;\n\n      border:\n        1px solid\n        rgba(166,47,255,.20);\n\n      pointer-events:none;\n\n      animation:\n        iaCenterPulse\n        3s ease-in-out\n        infinite;\n    }\n\n\n    @keyframes iaCenterPulse{\n\n      0%,\n      100%{\n        transform:\n          translate(-50%,-50%)\n          scale(.93);\n\n        opacity:.15;\n      }\n\n      50%{\n        transform:\n          translate(-50%,-50%)\n          scale(1.08);\n\n        opacity:.58;\n      }\n\n    }\n\n\n    \/* -------------------------------------------------------\n       ORBITES LUMINEUSES\n       ------------------------------------------------------- *\/\n\n    #inrcyAutonomy .ia-js-orbit{\n      position:absolute;\n\n      inset:0;\n\n      z-index:3;\n\n      border-radius:50%;\n\n      pointer-events:none;\n\n      animation:\n        iaOrbitRotate\n        12s linear infinite;\n    }\n\n\n    #inrcyAutonomy .ia-js-orbit--2{\n      animation-duration:18s;\n\n      animation-direction:reverse;\n    }\n\n\n    #inrcyAutonomy .ia-js-orbit-dot{\n      position:absolute;\n\n      top:47px;\n      left:50%;\n\n      width:7px;\n      height:7px;\n\n      transform:\n        translateX(-50%);\n\n      border-radius:50%;\n\n      background:#FF43AA;\n\n      box-shadow:\n        0 0 5px #FF43AA,\n        0 0 13px rgba(255,67,170,.9),\n        0 0 25px rgba(166,47,255,.55);\n    }\n\n\n    #inrcyAutonomy\n    .ia-js-orbit--2\n    .ia-js-orbit-dot{\n\n      top:9px;\n\n      width:5px;\n      height:5px;\n\n      background:#258CFF;\n\n      box-shadow:\n        0 0 5px #258CFF,\n        0 0 14px rgba(37,140,255,.8);\n    }\n\n\n    @keyframes iaOrbitRotate{\n\n      to{\n        transform:rotate(360deg);\n      }\n\n    }\n\n\n    \/* -------------------------------------------------------\n       ANNEAUX EXISTANTS\n       ------------------------------------------------------- *\/\n\n    #inrcyAutonomy .ia-ring.ring-1{\n      box-shadow:\n        inset 0 0 30px rgba(23,140,255,.018);\n\n      transition:\n        border-color .4s ease;\n    }\n\n\n    #inrcyAutonomy .ia-ring.ring-2{\n      border-color:\n        rgba(166,44,255,.28) !important;\n\n      filter:\n        drop-shadow(\n          0 0 5px\n          rgba(166,44,255,.15)\n        );\n    }\n\n\n    \/* -------------------------------------------------------\n       MOBILE\n       ------------------------------------------------------- *\/\n\n    @media(max-width:640px){\n\n      #inrcyAutonomy .ia-js-center-ring{\n        width:178px;\n        height:178px;\n      }\n\n      #inrcyAutonomy .ia-js-orbit-dot{\n        top:27px;\n      }\n\n      #inrcyAutonomy\n      .ia-js-orbit--2\n      .ia-js-orbit-dot{\n        top:4px;\n      }\n\n    }\n\n\n    @media(prefers-reduced-motion:reduce){\n\n      #inrcyAutonomy .ia-js-orbit,\n      #inrcyAutonomy .ia-js-center-ring{\n        animation:none !important;\n      }\n\n    }\n\n  `;\n\n  document.head.appendChild(style);\n\n\n\n  \/* =========================================================\n     CR\u00c9ATION DU SVG\n     ========================================================= *\/\n\n  const svgNS =\n    'http:\/\/www.w3.org\/2000\/svg';\n\n\n  const svg =\n    document.createElementNS(\n      svgNS,\n      'svg'\n    );\n\n\n  svg.setAttribute(\n    'class',\n    'ia-js-connections'\n  );\n\n\n  svg.innerHTML = `\n\n    <defs>\n\n      <linearGradient\n        id=\"iaPremiumGradient\"\n        x1=\"0\"\n        y1=\"0\"\n        x2=\"1\"\n        y2=\"1\"\n      >\n\n        <stop\n          offset=\"0%\"\n          stop-color=\"#FF7437\"\n        \/>\n\n        <stop\n          offset=\"30%\"\n          stop-color=\"#FF2F91\"\n        \/>\n\n        <stop\n          offset=\"67%\"\n          stop-color=\"#A62FFF\"\n        \/>\n\n        <stop\n          offset=\"100%\"\n          stop-color=\"#178CFF\"\n        \/>\n\n      <\/linearGradient>\n\n    <\/defs>\n\n  `;\n\n\n  diagram.prepend(svg);\n\n\n\n  \/* =========================================================\n     ORBITES\n     ========================================================= *\/\n\n  const orbit1 =\n    document.createElement('div');\n\n  orbit1.className =\n    'ia-js-orbit';\n\n\n  orbit1.innerHTML =\n    '<span class=\"ia-js-orbit-dot\"><\/span>';\n\n\n  diagram.appendChild(\n    orbit1\n  );\n\n\n\n  const orbit2 =\n    document.createElement('div');\n\n  orbit2.className =\n    'ia-js-orbit ia-js-orbit--2';\n\n\n  orbit2.innerHTML =\n    '<span class=\"ia-js-orbit-dot\"><\/span>';\n\n\n  diagram.appendChild(\n    orbit2\n  );\n\n\n\n  \/* =========================================================\n     HALO CENTRE\n     ========================================================= *\/\n\n  const centerRing =\n    document.createElement('div');\n\n\n  centerRing.className =\n    'ia-js-center-ring';\n\n\n  diagram.appendChild(\n    centerRing\n  );\n\n\n\n  \/* =========================================================\n     \u00c9L\u00c9MENTS\n     ========================================================= *\/\n\n  const center =\n    diagram.querySelector(\n      '.ia-center'\n    );\n\n\n  const nodes = [\n\n    diagram.querySelector(\n      '.ia-node-1'\n    ),\n\n    diagram.querySelector(\n      '.ia-node-2'\n    ),\n\n    diagram.querySelector(\n      '.ia-node-3'\n    ),\n\n    diagram.querySelector(\n      '.ia-node-4'\n    ),\n\n    diagram.querySelector(\n      '.ia-node-5'\n    )\n\n  ].filter(Boolean);\n\n\n\n  const paths = [];\n\n  const dots = [];\n\n\n\n  \/* =========================================================\n     DESSIN DES CONNEXIONS\n     ========================================================= *\/\n\n  function drawConnections(){\n\n    paths.forEach(\n      item => item.remove()\n    );\n\n\n    dots.forEach(\n      item => item.remove()\n    );\n\n\n    paths.length = 0;\n\n    dots.length = 0;\n\n\n    if(!center) return;\n\n\n    const diagramRect =\n      diagram.getBoundingClientRect();\n\n\n    const centerRect =\n      center.getBoundingClientRect();\n\n\n    const cx =\n      centerRect.left\n      -\n      diagramRect.left\n      +\n      centerRect.width \/ 2;\n\n\n    const cy =\n      centerRect.top\n      -\n      diagramRect.top\n      +\n      centerRect.height \/ 2;\n\n\n    svg.setAttribute(\n      'viewBox',\n      `0 0 ${diagramRect.width} ${diagramRect.height}`\n    );\n\n\n\n    nodes.forEach(\n      (node,index)=>{\n\n\n        const rect =\n          node.getBoundingClientRect();\n\n\n        const nx =\n          rect.left\n          -\n          diagramRect.left\n          +\n          rect.width \/ 2;\n\n\n        const ny =\n          rect.top\n          -\n          diagramRect.top\n          +\n          rect.height \/ 2;\n\n\n\n        \/* Direction *\/\n\n        const dx =\n          nx - cx;\n\n        const dy =\n          ny - cy;\n\n\n        const distance =\n          Math.sqrt(\n            dx * dx\n            +\n            dy * dy\n          );\n\n\n        const ux =\n          dx \/ distance;\n\n        const uy =\n          dy \/ distance;\n\n\n\n        \/*\n         * On ne d\u00e9marre pas au milieu\n         * exact de la bulle centrale.\n         *\/\n\n        const centerRadius =\n          centerRect.width \/ 2 - 5;\n\n\n        const startX =\n          cx\n          +\n          ux * centerRadius;\n\n\n        const startY =\n          cy\n          +\n          uy * centerRadius;\n\n\n\n        \/*\n         * On termine juste avant\n         * la carte de l'\u00e9tape.\n         *\/\n\n        const endX =\n          nx\n          -\n          ux * Math.min(\n            rect.width,\n            rect.height\n          ) * .46;\n\n\n        const endY =\n          ny\n          -\n          uy * Math.min(\n            rect.width,\n            rect.height\n          ) * .46;\n\n\n\n        \/*\n         * Petit contr\u00f4le courbe.\n         *\/\n\n        const perpX =\n          -uy;\n\n        const perpY =\n          ux;\n\n\n        const curveDirection =\n          index % 2 === 0\n          ? 1\n          : -1;\n\n\n        const curveAmount =\n          18 * curveDirection;\n\n\n        const controlX =\n          (\n            startX\n            +\n            endX\n          )\n          \/ 2\n          +\n          perpX\n          *\n          curveAmount;\n\n\n        const controlY =\n          (\n            startY\n            +\n            endY\n          )\n          \/ 2\n          +\n          perpY\n          *\n          curveAmount;\n\n\n\n        const d = `\n\n          M\n          ${startX}\n          ${startY}\n\n          Q\n          ${controlX}\n          ${controlY}\n\n          ${endX}\n          ${endY}\n\n        `;\n\n\n\n        \/* Ligne discr\u00e8te *\/\n\n        const bg =\n          document.createElementNS(\n            svgNS,\n            'path'\n          );\n\n\n        bg.setAttribute(\n          'class',\n          'ia-js-path-bg'\n        );\n\n\n        bg.setAttribute(\n          'd',\n          d\n        );\n\n\n        svg.appendChild(\n          bg\n        );\n\n\n\n        \/* Ligne active *\/\n\n        const path =\n          document.createElementNS(\n            svgNS,\n            'path'\n          );\n\n\n        path.setAttribute(\n          'class',\n          'ia-js-path'\n        );\n\n\n        path.setAttribute(\n          'd',\n          d\n        );\n\n\n        svg.appendChild(\n          path\n        );\n\n\n        paths.push(\n          path\n        );\n\n\n\n        \/* Point anim\u00e9 *\/\n\n        const dot =\n          document.createElementNS(\n            svgNS,\n            'circle'\n          );\n\n\n        dot.setAttribute(\n          'class',\n          'ia-js-moving-dot'\n        );\n\n\n        dot.setAttribute(\n          'r',\n          '4'\n        );\n\n\n        svg.appendChild(\n          dot\n        );\n\n\n        dots.push(\n          dot\n        );\n\n      }\n    );\n\n  }\n\n\n\n  \/* =========================================================\n     ANIMATION D'UN POINT SUR UNE LIGNE\n     ========================================================= *\/\n\n  function animateDot(\n    path,\n    dot,\n    duration\n  ){\n\n    const length =\n      path.getTotalLength();\n\n\n    const start =\n      performance.now();\n\n\n    dot.classList.add(\n      'active'\n    );\n\n\n    function frame(now){\n\n      const progress =\n        Math.min(\n          1,\n          (\n            now - start\n          )\n          \/\n          duration\n        );\n\n\n      const point =\n        path.getPointAtLength(\n          length * progress\n        );\n\n\n      dot.setAttribute(\n        'cx',\n        point.x\n      );\n\n\n      dot.setAttribute(\n        'cy',\n        point.y\n      );\n\n\n      if(progress < 1){\n\n        requestAnimationFrame(\n          frame\n        );\n\n      }\n\n      else{\n\n        setTimeout(\n          ()=>{\n            dot.classList.remove(\n              'active'\n            );\n          },\n          250\n        );\n\n      }\n\n    }\n\n\n    requestAnimationFrame(\n      frame\n    );\n\n  }\n\n\n\n  \/* =========================================================\n     S\u00c9QUENCE DES \u00c9TAPES\n     ========================================================= *\/\n\n  let current =\n    -1;\n\n\n  function activateStep(){\n\n    nodes.forEach(\n      node => {\n        node.classList.remove(\n          'ia-js-active'\n        );\n      }\n    );\n\n\n    paths.forEach(\n      path => {\n        path.classList.remove(\n          'active'\n        );\n      }\n    );\n\n\n    current++;\n\n\n    if(\n      current >= nodes.length\n    ){\n\n      current = 0;\n\n    }\n\n\n    const node =\n      nodes[current];\n\n\n    const path =\n      paths[current];\n\n\n    const dot =\n      dots[current];\n\n\n    if(node){\n\n      node.classList.add(\n        'ia-js-active'\n      );\n\n    }\n\n\n    if(path){\n\n      path.classList.add(\n        'active'\n      );\n\n    }\n\n\n    if(\n      path\n      &&\n      dot\n    ){\n\n      animateDot(\n        path,\n        dot,\n        720\n      );\n\n    }\n\n\n    if(center){\n\n      center.classList.add(\n        'ia-js-center-active'\n      );\n\n\n      setTimeout(\n        ()=>{\n          center.classList.remove(\n            'ia-js-center-active'\n          );\n        },\n        650\n      );\n\n    }\n\n  }\n\n\n\n  \/* =========================================================\n     LANCEMENT\n     ========================================================= *\/\n\n  drawConnections();\n\n\n  \/*\n   * Premier passage rapide,\n   * puis une \u00e9tape toutes les 1,35 sec.\n   *\/\n\n  setTimeout(\n    activateStep,\n    500\n  );\n\n\n  const sequence =\n    setInterval(\n      activateStep,\n      1350\n    );\n\n\n\n  \/* =========================================================\n     REDIMENSIONNEMENT\n     ========================================================= *\/\n\n  let resizeTimer;\n\n\n  window.addEventListener(\n    'resize',\n    ()=>{\n\n      clearTimeout(\n        resizeTimer\n      );\n\n\n      resizeTimer =\n        setTimeout(\n          drawConnections,\n          180\n        );\n\n    }\n  );\n\n\n\n  if(\n    'ResizeObserver'\n    in window\n  ){\n\n    const resizeObserver =\n      new ResizeObserver(\n        ()=>{\n\n          clearTimeout(\n            resizeTimer\n          );\n\n\n          resizeTimer =\n            setTimeout(\n              drawConnections,\n              120\n            );\n\n        }\n      );\n\n\n    resizeObserver.observe(\n      diagram\n    );\n\n  }\n\n\n\n  \/* =========================================================\n     PAUSE SI LE DIAGRAMME N'EST PAS VISIBLE\n     ========================================================= *\/\n\n  if(\n    'IntersectionObserver'\n    in window\n  ){\n\n    let visible =\n      true;\n\n\n    const observer =\n      new IntersectionObserver(\n        entries => {\n\n          visible =\n            entries[0]\n            ?.isIntersecting;\n\n        },\n        {\n          threshold:.1\n        }\n      );\n\n\n    observer.observe(\n      diagram\n    );\n\n  }\n\n})();\n<\/script>\n<style>\n\n\/* =========================================================\n   SYNCHRONISATION DES CARTES \u00c0 DROITE\n   ========================================================= *\/\n\n#inrcyAutonomy .ia-step-card{\n  opacity:.55;\n\n  transform:\n    translateX(0)\n    scale(.985);\n\n  transition:\n    opacity .45s ease,\n    transform .45s cubic-bezier(.2,.8,.2,1),\n    border-color .45s ease,\n    background .45s ease,\n    box-shadow .45s ease !important;\n}\n\n\n\/* Carte correspondant \u00e0 l'\u00e9tape active *\/\n\n#inrcyAutonomy .ia-step-card.ia-side-active{\n  opacity:1;\n\n  transform:\n    translateX(7px)\n    scale(1.018);\n\n  border-color:\n    rgba(174,70,255,.58) !important;\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(24,43,80,.98),\n      rgba(12,25,52,.98)\n    ) !important;\n\n  box-shadow:\n    0 18px 38px rgba(0,0,0,.20),\n    0 0 26px rgba(166,47,255,.16),\n    inset 0 1px 0 rgba(255,255,255,.055) !important;\n}\n\n\n\/* Petit halo derri\u00e8re la carte *\/\n\n#inrcyAutonomy .ia-step-card::after{\n  content:\"\";\n\n  position:absolute;\n\n  inset:-1px;\n\n  z-index:-1;\n\n  border-radius:inherit;\n\n  opacity:0;\n\n  pointer-events:none;\n\n  background:\n    linear-gradient(\n      110deg,\n      rgba(255,116,55,.22),\n      rgba(255,47,145,.20),\n      rgba(166,47,255,.22),\n      rgba(23,140,255,.18)\n    );\n\n  filter:blur(15px);\n\n  transition:\n    opacity .4s ease;\n}\n\n\n#inrcyAutonomy .ia-step-card.ia-side-active::after{\n  opacity:1;\n}\n\n\n\/* ---------------------------------------------------------\n   NUM\u00c9RO\n   --------------------------------------------------------- *\/\n\n#inrcyAutonomy\n.ia-step-card.ia-side-active\n.ia-step-num{\n\n  filter:\n    drop-shadow(\n      0 0 9px\n      rgba(255,47,145,.45)\n    );\n\n  transform:\n    scale(1.08);\n}\n\n\n\/* ---------------------------------------------------------\n   FL\u00c8CHE\n   --------------------------------------------------------- *\/\n\n#inrcyAutonomy .ia-step-arrow{\n  transition:\n    background .4s ease,\n    transform .4s ease,\n    box-shadow .4s ease !important;\n}\n\n\n#inrcyAutonomy\n.ia-step-card.ia-side-active\n.ia-step-arrow{\n\n  background:\n    linear-gradient(\n      135deg,\n      #FF7437,\n      #FF2F91,\n      #A62FFF,\n      #178CFF\n    ) !important;\n\n  transform:\n    translateX(3px)\n    scale(1.06);\n\n  box-shadow:\n    0 0 18px\n    rgba(166,47,255,.35);\n}\n\n\n\/* ---------------------------------------------------------\n   TITRE\n   --------------------------------------------------------- *\/\n\n#inrcyAutonomy .ia-step-copy strong{\n  transition:\n    color .4s ease,\n    transform .4s ease,\n    text-shadow .4s ease !important;\n}\n\n\n#inrcyAutonomy\n.ia-step-card.ia-side-active\n.ia-step-copy strong{\n\n  color:#FFFFFF !important;\n\n  transform:\n    translateX(2px);\n\n  text-shadow:\n    0 0 15px\n    rgba(255,255,255,.10);\n}\n\n\n\/* ---------------------------------------------------------\n   TEXTE\n   --------------------------------------------------------- *\/\n\n#inrcyAutonomy .ia-step-copy p{\n  transition:\n    color .4s ease,\n    opacity .4s ease !important;\n}\n\n\n#inrcyAutonomy\n.ia-step-card.ia-side-active\n.ia-step-copy p{\n\n  color:#B7C5DD !important;\n  opacity:1;\n}\n\n\n\/* Mobile : pas de d\u00e9placement lat\u00e9ral *\/\n\n@media(max-width:640px){\n\n  #inrcyAutonomy .ia-step-card.ia-side-active{\n    transform:\n      scale(1.015);\n  }\n\n}\n\n<\/style>\n\n\n<script>\n(function(){\n\n  const autonomy =\n    document.getElementById(\n      'inrcyAutonomy'\n    );\n\n  if(!autonomy) return;\n\n\n  const diagramNodes =\n    Array.from(\n      autonomy.querySelectorAll(\n        '.ia-diagram .ia-node'\n      )\n    );\n\n\n  const sideCards =\n    Array.from(\n      autonomy.querySelectorAll(\n        '.ia-steps-col .ia-step-card'\n      )\n    );\n\n\n  if(\n    !diagramNodes.length ||\n    !sideCards.length\n  ){\n    return;\n  }\n\n\n\n  \/* =========================================================\n     SYNCHRONISATION\n     ========================================================= *\/\n\n  function syncCards(){\n\n    diagramNodes.forEach(\n      (node,index)=>{\n\n        const card =\n          sideCards[index];\n\n        if(!card) return;\n\n\n        const active =\n          node.classList.contains(\n            'ia-js-active'\n          );\n\n\n        card.classList.toggle(\n          'ia-side-active',\n          active\n        );\n\n      }\n    );\n\n  }\n\n\n\n  \/* =========================================================\n     SURVEILLE L'ANIMATION DU DIAGRAMME\n     ========================================================= *\/\n\n  diagramNodes.forEach(\n    node =>{\n\n      const observer =\n        new MutationObserver(\n          syncCards\n        );\n\n\n      observer.observe(\n        node,\n        {\n          attributes:true,\n          attributeFilter:[\n            'class'\n          ]\n        }\n      );\n\n    }\n  );\n\n\n\n  \/* \u00c9tat initial *\/\n\n  syncCards();\n\n})();\n<\/script>\n\n<!-- =========================================================\n     iNrCy \u2014 ANIMATION DES 5 ENCADR\u00c9S DU BLOC INTRO\n     Ils ressortent chacun leur tour\n     ========================================================= -->\n<style>\n\n#inrcyAutonomy .ia-hero-points > span{\n  position:relative !important;\n\n  transition:\n    transform .42s cubic-bezier(.2,.8,.2,1),\n    border-color .42s ease,\n    background .42s ease,\n    box-shadow .42s ease,\n    color .42s ease !important;\n\n  will-change:\n    transform,\n    box-shadow;\n}\n\n\n\/* Encadr\u00e9 actif *\/\n\n#inrcyAutonomy .ia-hero-points > span.ia-hero-point-active{\n\n  transform:\n    translateY(-5px)\n    scale(1.045) !important;\n\n  color:\n    #17233B !important;\n\n  border-color:\n    rgba(166,47,255,.34) !important;\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(255,255,255,1),\n      rgba(246,248,255,.98)\n    ) !important;\n\n  box-shadow:\n    0 15px 32px rgba(7,20,43,.10),\n    0 0 0 1px rgba(166,47,255,.06),\n    0 0 25px rgba(166,47,255,.11) !important;\n}\n\n\n\/* Petit reflet premium *\/\n\n#inrcyAutonomy .ia-hero-points > span::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:-25%;\n  left:-55%;\n\n  width:28%;\n  height:150%;\n\n  transform:\n    skewX(-22deg);\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.82),\n      transparent\n    );\n\n  opacity:0;\n\n  pointer-events:none;\n}\n\n\n#inrcyAutonomy\n.ia-hero-points\n> span.ia-hero-point-active::after{\n\n  animation:\n    iaHeroPointShine\n    .75s ease forwards;\n}\n\n\n@keyframes iaHeroPointShine{\n\n  0%{\n    left:-55%;\n    opacity:0;\n  }\n\n  20%{\n    opacity:.9;\n  }\n\n  100%{\n    left:135%;\n    opacity:0;\n  }\n\n}\n\n\n\/* Mobile : effet un peu plus discret *\/\n\n@media(max-width:640px){\n\n  #inrcyAutonomy\n  .ia-hero-points\n  > span.ia-hero-point-active{\n\n    transform:\n      translateY(-3px)\n      scale(1.025) !important;\n  }\n\n}\n\n\n\/* Accessibilit\u00e9 *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  #inrcyAutonomy .ia-hero-points > span{\n    transition:none !important;\n  }\n\n  #inrcyAutonomy\n  .ia-hero-points\n  > span.ia-hero-point-active::after{\n    animation:none !important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n(function(){\n\n  const autonomy =\n    document.getElementById(\n      'inrcyAutonomy'\n    );\n\n  if(!autonomy) return;\n\n\n  const pointsWrap =\n    autonomy.querySelector(\n      '.ia-hero-points'\n    );\n\n  if(!pointsWrap) return;\n\n\n  const points =\n    Array.from(\n      pointsWrap.querySelectorAll(\n        ':scope > span'\n      )\n    );\n\n\n  if(!points.length) return;\n\n\n  \/* \u00c9vite un double lancement Elementor *\/\n\n  if(\n    pointsWrap.dataset.heroPointsAnimated ===\n    'true'\n  ){\n    return;\n  }\n\n  pointsWrap.dataset.heroPointsAnimated =\n    'true';\n\n\n  let current = -1;\n\n  let interval = null;\n\n  let started = false;\n\n\n\n  \/* =========================================================\n     ACTIVE UN ENCADR\u00c9\n     ========================================================= *\/\n\n  function activateNextPoint(){\n\n    points.forEach(\n      point => {\n        point.classList.remove(\n          'ia-hero-point-active'\n        );\n      }\n    );\n\n\n    current++;\n\n\n    if(\n      current >= points.length\n    ){\n      current = 0;\n    }\n\n\n    points[current]\n      ?.classList.add(\n        'ia-hero-point-active'\n      );\n\n  }\n\n\n\n  \/* =========================================================\n     LANCEMENT\n     ========================================================= *\/\n\n  function startSequence(){\n\n    if(started) return;\n\n    started = true;\n\n\n    activateNextPoint();\n\n\n    interval =\n      window.setInterval(\n        activateNextPoint,\n        1150\n      );\n\n  }\n\n\n\n  \/* =========================================================\n     PAUSE\n     ========================================================= *\/\n\n  function stopSequence(){\n\n    if(interval){\n\n      window.clearInterval(\n        interval\n      );\n\n      interval = null;\n    }\n\n\n    started = false;\n\n  }\n\n\n\n  \/* =========================================================\n     LANCE UNIQUEMENT QUAND LE PREMIER BLOC EST VISIBLE\n     ========================================================= *\/\n\n  if(\n    'IntersectionObserver'\n    in window\n  ){\n\n    const observer =\n      new IntersectionObserver(\n        entries => {\n\n          const visible =\n            entries[0]\n            ?.isIntersecting;\n\n\n          if(visible){\n\n            \/*\n             * Petit d\u00e9lai pour laisser\n             * le titre et le texte se poser.\n             *\/\n            window.setTimeout(\n              startSequence,\n              350\n            );\n\n          }\n          else{\n\n            stopSequence();\n\n            points.forEach(\n              point => {\n                point.classList.remove(\n                  'ia-hero-point-active'\n                );\n              }\n            );\n\n          }\n\n        },\n        {\n          threshold:.25\n        }\n      );\n\n\n    observer.observe(\n      pointsWrap\n    );\n\n  }\n  else{\n\n    startSequence();\n\n  }\n\n})();\n<\/script>\n<script>\n(function(){\n\n  const quoteMark =\n    document.querySelector(\n      '#inrcyAutonomy .ia-quote-mark'\n    );\n\n  if(!quoteMark) return;\n\n\n  if(\n    quoteMark.dataset.glowAnimated === 'true'\n  ){\n    return;\n  }\n\n  quoteMark.dataset.glowAnimated = 'true';\n\n\n  \/* =========================================================\n     STYLE DU GLOW INJECT\u00c9 PAR JS\n     ========================================================= *\/\n\n  const style =\n    document.createElement('style');\n\n\n  style.textContent = `\n\n    #inrcyAutonomy .ia-quote-mark{\n\n      transition:\n        transform .45s ease,\n        filter .45s ease,\n        text-shadow .45s ease !important;\n\n    }\n\n\n    #inrcyAutonomy .ia-quote-mark.ia-quote-glow{\n\n      transform:\n        scale(1.12) !important;\n\n      filter:\n        drop-shadow(\n          0 0 7px rgba(255,47,145,.65)\n        )\n        drop-shadow(\n          0 0 15px rgba(166,47,255,.45)\n        )\n        drop-shadow(\n          0 0 24px rgba(23,140,255,.22)\n        ) !important;\n\n      text-shadow:\n        0 0 8px rgba(255,47,145,.40),\n        0 0 18px rgba(166,47,255,.30) !important;\n\n    }\n\n  `;\n\n\n  document.head.appendChild(style);\n\n\n\n  \/* =========================================================\n     ANIMATION\n     ========================================================= *\/\n\n  function glow(){\n\n    quoteMark.classList.add(\n      'ia-quote-glow'\n    );\n\n\n    setTimeout(\n      ()=>{\n        quoteMark.classList.remove(\n          'ia-quote-glow'\n        );\n      },\n      850\n    );\n\n  }\n\n\n  \/* premier glow *\/\n\n  setTimeout(\n    glow,\n    500\n  );\n\n\n  \/* puis r\u00e9guli\u00e8rement *\/\n\n  setInterval(\n    glow,\n    2600\n  );\n\n})();\n<\/script>\n\n<!-- iNrCy \u2014 correctif adaptatif petits mobiles -->\n<style id=\"inrcy-autonomy-small-mobile-fix\">\n\/* iNrCy \u2014 sch\u00e9ma adaptatif petits mobiles *\/\n@media (max-width: 390px) {\n  #inrcyAutonomy {\n    padding-left: 4px !important;\n    padding-right: 4px !important;\n    overflow: visible !important;\n  }\n\n  #inrcyAutonomy .ia-wrap {\n    width: 100% !important;\n    overflow: visible !important;\n  }\n\n  #inrcyAutonomy .ia-process-block {\n    padding-left: clamp(8px, 3vw, 12px) !important;\n    padding-right: clamp(8px, 3vw, 12px) !important;\n  }\n\n  #inrcyAutonomy .ia-process-grid {\n    grid-template-columns: minmax(0, 1fr) !important;\n  }\n\n  #inrcyAutonomy .ia-diagram-col {\n    width: min(320px, calc(100vw - 20px)) !important;\n    max-width: none !important;\n    justify-self: center !important;\n    position: relative !important;\n    left: auto !important;\n    transform: none !important;\n    overflow: visible !important;\n  }\n\n  #inrcyAutonomy .ia-diagram {\n    width: 100% !important;\n    max-width: 290px !important;\n    height: auto !important;\n    aspect-ratio: 1 \/ 1;\n  }\n\n  #inrcyAutonomy .ia-ring.ring-1 {\n    inset: 2.759% !important;\n  }\n\n  #inrcyAutonomy .ia-ring.ring-2 {\n    inset: 11.724% !important;\n  }\n\n  #inrcyAutonomy .ia-center {\n    width: 45.517% !important;\n    height: 45.517% !important;\n    padding: clamp(8px, 3vw, 13px) !important;\n  }\n\n  #inrcyAutonomy .ia-center img {\n    width: 50% !important;\n    margin-bottom: clamp(3px, 1.28vw, 5px) !important;\n  }\n\n  #inrcyAutonomy .ia-center strong {\n    font-size: clamp(15px, 5.13vw, 20px) !important;\n    margin-bottom: clamp(3px, 1.28vw, 5px) !important;\n  }\n\n  #inrcyAutonomy .ia-center span {\n    font-size: clamp(8px, 2.44vw, 9.5px) !important;\n    line-height: 1.35 !important;\n  }\n\n  #inrcyAutonomy .ia-node {\n    width: 32.759% !important;\n    min-height: 20% !important;\n    padding: clamp(7px, 2.31vw, 9px) !important;\n    border-radius: clamp(11px, 3.59vw, 14px) !important;\n    gap: clamp(4px, 1.54vw, 6px) !important;\n  }\n\n  #inrcyAutonomy .ia-node b {\n    width: clamp(19px, 6.15vw, 24px) !important;\n    height: clamp(19px, 6.15vw, 24px) !important;\n    font-size: clamp(9px, 2.82vw, 11px) !important;\n  }\n\n  #inrcyAutonomy .ia-node span {\n    font-size: clamp(8px, 2.31vw, 9px) !important;\n    line-height: 1.2 !important;\n    overflow-wrap: anywhere;\n  }\n\n  #inrcyAutonomy .ia-node-1 {\n    top: 1.379% !important;\n    left: 50% !important;\n    width: 32.759% !important;\n    transform: translateX(-50%) !important;\n  }\n\n  #inrcyAutonomy .ia-node-2 {\n    top: 24.828% !important;\n    right: 0 !important;\n    left: auto !important;\n    width: 32.759% !important;\n  }\n\n  #inrcyAutonomy .ia-node-3 {\n    inset: auto 0 0 auto !important;\n    width: 32.759% !important;\n  }\n\n  #inrcyAutonomy .ia-node-4 {\n    bottom: 0 !important;\n    left: 0 !important;\n    right: auto !important;\n    width: 45.517% !important;\n    transform: none !important;\n  }\n\n  #inrcyAutonomy .ia-node-5 {\n    top: 50% !important;\n    left: 0 !important;\n    right: auto !important;\n    width: 32.759% !important;\n    min-height: 0 !important;\n    padding-left: clamp(8px, 2.56vw, 10px) !important;\n    padding-right: clamp(5px, 1.54vw, 6px) !important;\n    transform: translateY(-50%) !important;\n  }\n\n  #inrcyAutonomy .ia-js-center-ring {\n    width: 61.379% !important;\n    height: 61.379% !important;\n  }\n\n  #inrcyAutonomy .ia-js-orbit-dot {\n    top: 9.31% !important;\n    width: clamp(5px, 1.79vw, 7px) !important;\n    height: clamp(5px, 1.79vw, 7px) !important;\n  }\n\n  #inrcyAutonomy .ia-js-orbit--2 .ia-js-orbit-dot {\n    top: 1.379% !important;\n    width: clamp(4px, 1.28vw, 5px) !important;\n    height: clamp(4px, 1.28vw, 5px) !important;\n  }\n\n  #inrcyAutonomy .ia-node-1.ia-js-active {\n    transform: translateX(-50%) translateY(-2px) scale(1.025) !important;\n  }\n\n  #inrcyAutonomy .ia-node-2.ia-js-active,\n  #inrcyAutonomy .ia-node-3.ia-js-active {\n    transform: translateY(-2px) scale(1.025) !important;\n  }\n\n  #inrcyAutonomy .ia-node-4.ia-js-active {\n    transform: translateY(-2px) scale(1.025) !important;\n  }\n\n  #inrcyAutonomy .ia-node-5.ia-js-active {\n    transform: translateY(-50%) scale(1.025) !important;\n  }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4bde54f e-flex e-con-boxed e-con e-parent\" data-id=\"4bde54f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6fe09f elementor-widget elementor-widget-html\" data-id=\"c6fe09f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"inrcy-story-simple\">\r\n\r\n  <div class=\"inrcy-story-simple-inner\">\r\n\r\n    <!-- =====================================================\r\n         GAUCHE \u2014 TEXTE\r\n         ===================================================== -->\r\n\r\n    <div class=\"inrcy-story-simple-copy\">\r\n\r\n      <div class=\"inrcy-story-simple-label\">\r\n\r\n        <span><\/span>\r\n\r\n        La soci\u00e9t\u00e9 derri\u00e8re iNrCy\r\n\r\n      <\/div>\r\n\r\n\r\n      <h2>\r\n\r\n        Une technologie n\u00e9e\r\n\r\n        <span>\r\n          de plus de 10 ans de terrain.\r\n        <\/span>\r\n\r\n      <\/h2>\r\n\r\n\r\n      <p>\r\n\r\n        iNrCy est n\u00e9 d'une r\u00e9alit\u00e9 tr\u00e8s simple :\r\n\r\n        <strong>\r\n          les professionnels ont besoin de communiquer,\r\n          mais pas d'y consacrer leurs journ\u00e9es.\r\n        <\/strong>\r\n\r\n        Notre exp\u00e9rience du web et de l'accompagnement\r\n        des professionnels nous a permis d'observer\r\n        les m\u00eames probl\u00e9matiques dans de nombreux secteurs :\r\n        multiplication des plateformes, manque de temps,\r\n        contenus \u00e0 adapter encore et encore\r\n        et besoin de rester autonome.\r\n\r\n      <\/p>\r\n\r\n\r\n      <!-- PETIT BLOC OBJECTIF -->\r\n\r\n      <div class=\"inrcy-story-simple-goal\">\r\n\r\n        <div class=\"inrcy-story-simple-goal-icon\">\r\n          \u2726\r\n        <\/div>\r\n\r\n        <div>\r\n\r\n          <strong>\r\n            Notre objectif\r\n          <\/strong>\r\n\r\n          <span>\r\n            Rendre la communication multicanale plus simple,\r\n            plus rapide et plus accessible \u00e0 tous les professionnels.\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         DROITE \u2014 3 PHOTOS VERTICALES\r\n         ===================================================== -->\r\n\r\n    <div class=\"inrcy-story-simple-gallery\">\r\n\r\n\r\n      <!-- PHOTO 1 -->\r\n\r\n      <div class=\"inrcy-story-simple-photo\">\r\n\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2025\/10\/Capture-decran-2025-10-13-153054.png\"\r\n          alt=\"\u00c9quipe iNrCy\"\r\n          loading=\"lazy\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- PHOTO 2 -->\r\n\r\n      <div class=\"inrcy-story-simple-photo\">\r\n\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2025\/10\/Capture-decran-2025-10-13-143650-e1786544761336.png\"\r\n          loading=\"lazy\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- PHOTO 3 -->\r\n\r\n      <div class=\"inrcy-story-simple-photo\">\r\n\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/inrcy.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-08-at-19.48.49.jpeg\"\r\n          alt=\"\u00c9quipe iNrCy\"\r\n          alt=\"\u00c9quipe iNrCy\"\r\n          loading=\"lazy\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n <script>\r\n(function(){\r\n\r\n  function initStoryReveal(){\r\n\r\n    const section =\r\n      document.querySelector('.inrcy-story-simple');\r\n\r\n    if(!section) return;\r\n\r\n    if(section.dataset.storyRevealInit === 'true'){\r\n      return;\r\n    }\r\n\r\n    section.dataset.storyRevealInit = 'true';\r\n\r\n\r\n    const photos =\r\n      Array.from(\r\n        section.querySelectorAll(\r\n          '.inrcy-story-simple-photo'\r\n        )\r\n      );\r\n\r\n    const copy =\r\n      section.querySelector(\r\n        '.inrcy-story-simple-copy'\r\n      );\r\n\r\n    if(!photos.length) return;\r\n\r\n\r\n    \/* =====================================================\r\n       CSS inject\u00e9 automatiquement\r\n       ===================================================== *\/\r\n\r\n    const style =\r\n      document.createElement('style');\r\n\r\n    style.textContent = `\r\n\r\n      .inrcy-story-simple-copy{\r\n        opacity:0;\r\n        transform:translateX(-18px);\r\n        transition:\r\n          opacity .7s ease,\r\n          transform .7s cubic-bezier(.2,.8,.2,1);\r\n      }\r\n\r\n      .inrcy-story-simple-copy.story-copy-visible{\r\n        opacity:1;\r\n        transform:translateX(0);\r\n      }\r\n\r\n\r\n      .inrcy-story-simple-photo{\r\n        opacity:0;\r\n        transform:\r\n          translateY(18px)\r\n          scale(.975);\r\n\r\n        transition:\r\n          opacity .65s ease,\r\n          transform .65s cubic-bezier(.2,.8,.2,1),\r\n          box-shadow .65s ease;\r\n      }\r\n\r\n\r\n      .inrcy-story-simple-photo:nth-child(1){\r\n        transform:\r\n          translateX(-18px)\r\n          translateY(14px)\r\n          scale(.975);\r\n      }\r\n\r\n      .inrcy-story-simple-photo:nth-child(2){\r\n        transform:\r\n          translateX(18px)\r\n          translateY(14px)\r\n          scale(.975);\r\n      }\r\n\r\n      .inrcy-story-simple-photo:nth-child(3){\r\n        transform:\r\n          translateY(18px)\r\n          scale(.975);\r\n      }\r\n\r\n\r\n      .inrcy-story-simple-photo.story-photo-visible{\r\n        opacity:1;\r\n        transform:\r\n          translateX(0)\r\n          translateY(0)\r\n          scale(1);\r\n      }\r\n\r\n\r\n      .inrcy-story-simple-photo.story-photo-visible{\r\n        box-shadow:\r\n          0 22px 44px rgba(0,0,0,.24),\r\n          0 0 24px rgba(255,47,145,.08),\r\n          0 0 38px rgba(166,47,255,.10) !important;\r\n      }\r\n\r\n\r\n      .inrcy-story-simple-photo img{\r\n        transition:\r\n          transform .7s ease,\r\n          filter .7s ease;\r\n      }\r\n\r\n      .inrcy-story-simple-photo.story-photo-visible img{\r\n        transform:scale(1.018);\r\n        filter:\r\n          brightness(1.025)\r\n          contrast(1.015);\r\n      }\r\n\r\n\r\n      @media(max-width:650px){\r\n\r\n        .inrcy-story-simple-copy{\r\n          transform:translateY(14px);\r\n        }\r\n\r\n        .inrcy-story-simple-copy.story-copy-visible{\r\n          transform:translateY(0);\r\n        }\r\n\r\n        .inrcy-story-simple-photo:nth-child(1),\r\n        .inrcy-story-simple-photo:nth-child(2),\r\n        .inrcy-story-simple-photo:nth-child(3){\r\n          transform:\r\n            translateY(18px)\r\n            scale(.985);\r\n        }\r\n\r\n        .inrcy-story-simple-photo.story-photo-visible{\r\n          transform:\r\n            translateY(0)\r\n            scale(1);\r\n        }\r\n\r\n      }\r\n\r\n      @media(prefers-reduced-motion:reduce){\r\n\r\n        .inrcy-story-simple-copy,\r\n        .inrcy-story-simple-photo{\r\n          opacity:1 !important;\r\n          transform:none !important;\r\n          transition:none !important;\r\n        }\r\n\r\n      }\r\n\r\n    `;\r\n\r\n    document.head.appendChild(style);\r\n\r\n\r\n    \/* =====================================================\r\n       Animation\r\n       ===================================================== *\/\r\n\r\n    function reveal(){\r\n\r\n      if(copy){\r\n\r\n        setTimeout(\r\n          ()=>{\r\n            copy.classList.add(\r\n              'story-copy-visible'\r\n            );\r\n          },\r\n          80\r\n        );\r\n\r\n      }\r\n\r\n\r\n      photos.forEach(\r\n        (photo,index)=>{\r\n\r\n          setTimeout(\r\n            ()=>{\r\n              photo.classList.add(\r\n                'story-photo-visible'\r\n              );\r\n            },\r\n            280 + index * 220\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       Intersection observer\r\n       ===================================================== *\/\r\n\r\n    if('IntersectionObserver' in window){\r\n\r\n      const observer =\r\n        new IntersectionObserver(\r\n          entries =>{\r\n\r\n            const entry =\r\n              entries[0];\r\n\r\n            if(\r\n              entry &&\r\n              entry.isIntersecting\r\n            ){\r\n\r\n              reveal();\r\n\r\n              observer.disconnect();\r\n\r\n            }\r\n\r\n          },\r\n          {\r\n            threshold:.10\r\n          }\r\n        );\r\n\r\n      observer.observe(section);\r\n\r\n    }\r\n\r\n    else{\r\n\r\n      reveal();\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* Elementor \/ WordPress peut injecter le widget apr\u00e8s le DOM *\/\r\n  if(document.readyState === 'loading'){\r\n\r\n    document.addEventListener(\r\n      'DOMContentLoaded',\r\n      initStoryReveal\r\n    );\r\n\r\n  }\r\n\r\n  else{\r\n\r\n    initStoryReveal();\r\n\r\n  }\r\n\r\n\r\n  window.addEventListener(\r\n    'load',\r\n    ()=>{\r\n      setTimeout(\r\n        initStoryReveal,\r\n        300\r\n      );\r\n    }\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1 id\u00e9e. 12 contenus. Diffus\u00e9s partout en quelques minutes. G\u00e9n\u00e9rez, adaptez et diffusez vos contenus sur tous vos canaux depuis un seul espace. 1. Guidez iNrCy Une photo, une vid\u00e9o ou quelques mots suffisent pour commencer. Une nouvelle r\u00e9alisation \u00e0 partager \u2728 Ajoutez votre id\u00e9e, votre texte et votre visuel. iNrCy s&rsquo;occupe de la suite. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-11711","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/pages\/11711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/comments?post=11711"}],"version-history":[{"count":507,"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/pages\/11711\/revisions"}],"predecessor-version":[{"id":12691,"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/pages\/11711\/revisions\/12691"}],"wp:attachment":[{"href":"https:\/\/inrcy.com\/pt\/wp-json\/wp\/v2\/media?parent=11711"}],"curies":[{"name":"bom jogo","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}