.hca-home{
  --hc-blue:#4e82b3;
  --hc-blue-dark:#356f9f;
  --hc-blue-cta:#3b6aaa;
  --hc-blue-title:#3f70b8;
  --hc-blue-soft:rgba(78,130,179,.12);
  --hc-ink:#17191d;
  --hc-text:#555d68;
  --hc-muted:#727985;
  --hc-surface:#fff;
  --hc-border:rgba(24,31,40,.10);
  --hc-success:#2f9e67;
  --hc-radius:14px;
  --hc-shadow:0 18px 46px rgba(30,42,56,.08),0 2px 8px rgba(30,42,56,.035);
}
.hca-home,.hca-home *,.hca-home *::before,.hca-home *::after{box-sizing:border-box}
.hca-home{color:var(--hc-ink);font-family:Arial,Helvetica,sans-serif}
.hca-home button,.hca-home a{font:inherit}
.hc-demo{width:min(calc(100% - 32px),1580px);margin:auto;padding:32px 0 64px}
.hc-assistant{position:relative;overflow:hidden;background:#fbfcfd;border:1px solid var(--hc-border);border-radius:var(--hc-radius);box-shadow:var(--hc-shadow)}
.hc-head{position:relative;padding:28px 30px 8px}
.hc-kicker{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--hc-blue-dark);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hc-head h1{margin:0;font-size:clamp(30px,3.2vw,50px);line-height:1;letter-spacing:-.03em}
.hc-head h1 span{color:var(--hc-blue-title)}
.hc-head>p:last-child{margin:12px 0 0;color:var(--hc-text);font-size:15px;line-height:1.55}
.hc-layout{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:22px;padding:20px 30px 30px}
.hc-main{min-width:0}
.hc-universes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hc-card{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:14px;min-height:92px;padding:16px 18px;text-align:left;background:#fff;border:1px solid var(--hc-border);border-radius:11px;cursor:pointer;transition:.18s}
.hc-card:hover{transform:translateY(-2px);border-color:rgba(78,130,179,.32);box-shadow:0 10px 24px rgba(30,42,56,.07)}
.hc-card:focus-visible{outline:3px solid rgba(78,130,179,.24);outline-offset:3px}
.hc-card.is-selected{border-color:var(--hc-blue);background:linear-gradient(180deg,#fff,rgba(78,130,179,.035))}
.hc-logo{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:transparent;font-size:30px;font-weight:900;color:var(--hc-blue-dark)}
.hc-card-title{display:block;margin-bottom:5px;font-size:15px;font-weight:800}
.hc-card-meta{display:block;color:var(--hc-text);font-size:12.5px;line-height:1.4}
.hc-check{position:absolute;top:8px;right:8px;display:none;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;background:var(--hc-blue-cta);font-size:13px}
.hc-card.is-selected .hc-check{display:grid}
.hc-help-strip{display:none!important;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border:1px solid rgba(78,130,179,.10);border-radius:10px;background:linear-gradient(90deg,rgba(78,130,179,.09),rgba(78,130,179,.035))}
.hc-help-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.78);color:var(--hc-blue-dark)}
.hc-help-strip strong{display:block;margin-bottom:3px;font-size:14px}
.hc-help-strip span{display:block;color:var(--hc-text);font-size:12.5px;line-height:1.45}
.hc-progress-wrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--hc-border);animation:reveal .24s ease both}
.hc-progress-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;color:var(--hc-text);font-size:12px;font-weight:700}
.hc-progress-top button{padding:0;border:0;background:none;color:var(--hc-blue-dark);font-size:12px;font-weight:700;cursor:pointer}
.hc-progress{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:12px 0 0!important;padding:0;list-style:none}
.hc-progress:before{content:"";position:absolute;top:15px;left:12.5%;right:12.5%;height:2px;background:#dbe2e8}
.hc-progress:after{content:"";position:absolute;top:15px;left:12.5%;width:var(--progress,0%);height:2px;background:var(--hc-blue-cta);transition:width .22s}
.hc-progress li{position:relative;z-index:1;display:grid;justify-items:center;gap:7px;color:var(--hc-muted);font-size:12px}
.hc-progress li span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #cfd7df;border-radius:50%;background:#fff;font-weight:800}
.hc-progress li.is-active span{color:#fff;background:var(--hc-blue-cta);border-color:var(--hc-blue-cta)}
.hc-progress li.is-complete span{color:#fff;background:var(--hc-success);border-color:var(--hc-success)}
.hc-progress li.is-active,.hc-progress li.is-complete{color:var(--hc-blue-dark)}
.hc-stage{margin-top:10px!important;animation:reveal .24s ease both}
.hc-stage-box{padding:16px;border:1px solid rgba(78,130,179,.12);border-radius:10px;background:linear-gradient(180deg,rgba(78,130,179,.065),rgba(78,130,179,.025))}
.hc-stage-box h3{margin:0 0 12px;font-size:18px}
.hc-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hc-option{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:13px 14px;text-align:left;background:#fff;border:1px solid var(--hc-border);border-radius:9px;cursor:pointer;transition:.18s}
.hc-option:hover{transform:translateY(-1px);border-color:rgba(78,130,179,.32);box-shadow:0 8px 18px rgba(30,42,56,.06)}
.hc-option strong{display:block;font-size:14px}
.hc-option small{display:block;margin-top:3px;color:var(--hc-text);font-size:11.5px}
.hc-side{align-self:start;padding:20px;border:1px solid rgba(78,130,179,.10);border-radius:12px;background:linear-gradient(180deg,rgba(78,130,179,.055),rgba(78,130,179,.018))}
.hc-side h3{margin:0 0 16px;color:var(--hc-blue-dark);font-size:14px;text-transform:uppercase}
.hc-side ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.hc-side li{display:grid;grid-template-columns:28px 1fr;gap:10px}
.hc-side li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--hc-blue-dark);background:rgba(78,130,179,.09);font-size:12px;font-weight:800}
.hc-side strong{display:block;margin-bottom:3px;font-size:13px}
.hc-side p{margin:0;color:var(--hc-text);font-size:12px;line-height:1.45}
.hc-summary{display:grid;gap:10px}
.hc-summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hc-border)}
.hc-summary-row span{color:var(--hc-text);font-size:12px}
.hc-summary-row b{font-size:13px;text-align:right}
.hc-result{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid rgba(47,158,103,.2);border-radius:10px;background:rgba(47,158,103,.06)}
.hc-result h3{margin:0 0 4px;font-size:20px}
.hc-result p{margin:0;color:var(--hc-text);font-size:13px}
.hc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;color:#fff;background:var(--hc-blue-cta);border:1px solid var(--hc-blue-cta);border-radius:7px;text-decoration:none;font-weight:800}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:1199px){.hc-layout{grid-template-columns:minmax(0,1fr) 290px}.hc-universes,.hc-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.hc-demo{width:min(calc(100% - 24px),1580px);padding-top:20px}.hc-layout{grid-template-columns:1fr}.hc-side{order:2}}
@media (max-width:639px){.hc-demo{width:100%;margin-top:20px;padding:0}.hc-assistant{border:1px solid var(--hc-border);border-radius:14px}.hc-head{padding:22px 18px 4px}.hc-layout{padding:16px 18px 22px}.hc-universes,.hc-options{grid-template-columns:1fr}.hc-card{min-height:78px;padding:13px 14px;grid-template-columns:46px 1fr}.hc-logo{width:46px;height:46px;font-size:26px}.hc-progress li b{font-size:11px}.hc-result{align-items:flex-start;flex-direction:column}.hc-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.hca-home *,.hca-home *:before,.hca-home *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Intégration WordPress/Divi : le premier module historique est remplacé. */
.hca-homepage-active #main-content .et_pb_section_0{display:none!important}
.hca-homepage-active #main-content,
.hca-homepage-active #main-content .entry-content{padding:0!important}
.hca-homepage-active .hca-home{width:100%;margin:0;padding:0;background:#fff}
.hca-homepage-active .hca-home a{text-decoration:none}
.hca-homepage-active .hca-home .hc-demo{max-width:none}
.hca-homepage-active .hca-home .hc-category-group--apps .hc-category-group__header{
  border-color:rgba(116,76,170,.22);
  background:linear-gradient(180deg,rgba(116,76,170,.075),rgba(116,76,170,.025));
}
.hca-homepage-active .hca-home .hc-category-group--apps .hc-category-group__title,
.hca-homepage-active .hca-home .hc-category-group--apps .hc-category-group__count{color:#744caa}

/*
 * Isolation WordPress/Divi.
 * Le thème du blog force Rubik, des marges de listes, des espacements de
 * titres et un cadre sur toutes les images de .entry-content. Ces règles
 * restaurent uniquement, dans le composant, les valeurs calculées de Test2.
 */
.hca-home{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.25!important;
}
.hca-home p,
.hca-home li,
.hca-home span,
.hca-home input,
.hca-home textarea{
  font-family:inherit;
  font-weight:inherit;
}
.hca-home .hc-hero-v3,
.hca-home .hc-assistant{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.25!important;
}
.hca-home .hc-hero-v3 img,
.hca-home .hc-assistant img{
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hca-home ul,
.hca-home ol{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.hca-home li{
  margin:0!important;
}
.hca-home .hc3-title{
  margin:0!important;
  padding:0!important;
  color:#17191d!important;
}
.hca-home .hc3-kicker{
  margin:0 0 16px!important;
  padding:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:17.5px!important;
}
.hca-home .hc3m-kicker{
  padding:0!important;
}
.hca-home .hc3-intro{
  margin:0!important;
  padding:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:17.5px!important;
}
.hca-home .hc3-manifesto-title{
  margin:0!important;
  padding:0 32px 0 0!important;
}
.hca-home .hc3-manifesto-copy{
  margin:0!important;
  padding:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:17.5px!important;
}
.hca-home .hc3-benefit-title{
  margin:0 0 7px!important;
  padding:0!important;
  color:#242a31!important;
  font-family:"Barlow Condensed",sans-serif!important;
  font-size:18px!important;
  line-height:19.8px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}
.hca-home .hc3-benefit-text{
  margin:0!important;
  padding:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.hca-home .hc3-character{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
}
@media (min-width:1100px){
  .hca-home .hc3-platform img{
    width:132px!important;
    max-width:none!important;
    height:26px!important;
  }
}
@media (min-width:1300px) and (max-width:1499px){
  .hca-home .hc3-platform img{width:120px!important;height:24px!important}
}
@media (min-width:1200px) and (max-width:1299px){
  .hca-home .hc3-platform img{width:118px!important;height:24px!important}
}
@media (min-width:1100px) and (max-width:1109px){
  .hca-home .hc3-platform img{width:112px!important;height:22px!important}
}
.hca-home #hcTitle{
  margin:0!important;
  padding:0!important;
  color:#000!important;
}
.hca-home #hcTitle span{
  color:inherit!important;
  font-family:inherit!important;
  font-weight:inherit!important;
}
.hca-home #hcIntro{
  margin:12px 0 16px!important;
  padding:0!important;
  color:#605f5f!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.hca-home .hc-kicker{
  margin:0 0 8px!important;
  padding:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.hca-home .hc-card{
  color:#17191d!important;
}
.hca-home .hc-card-title,
.hca-home .hc-card-meta{
  font-family:Arial,Helvetica,sans-serif!important;
}
.hca-home .hc-card-title{
  font-weight:800!important;
}
.hca-home .hc-logo img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
}
.hca-home .hc3m-benefits,
.hca-home .hc3m-benefit{
  line-height:17.5px!important;
}
.hca-home .hc-how-timeline h3.hc-how-timeline__title{
  margin:0 0 30px!important;
  padding:0!important;
  color:#1f2937!important;
  text-transform:none!important;
}
.hca-home .hc-how-timeline__description{
  margin:9px auto 0!important;
  padding:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

@media (min-width:1100px) and (max-width:1299px){
  .hca-home .hc3-benefit-title{margin:0 0 15px!important}
  .hca-home .hc3-benefit-text{margin:0 auto!important}
  .hca-home .hc3-character{height:490.5px!important}
}
@media (min-width:1200px) and (max-width:1299px){
  .hca-home .hc3-character{height:485px!important}
}
@media (min-width:1300px) and (max-width:1499px){
  .hca-home .hc3-character{height:510px!important}
}
@media (min-width:1500px){
  .hca-home .hc3-character{height:545px!important}
}
@media (max-width:599px){
  .hca-home .hc3m-benefits{
    margin:clamp(-16px,-3vw,-10px) auto 10px!important;
  }
}
@media (max-width:1099px){
  .hca-home .hc-hero-v3{
    font-family:"Roboto",Arial,sans-serif!important;
  }
}

/* =========================================================
   HC CATEGORY ASSISTANT — UNIVERS SVG
   ========================================================= */

.hc-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.hc-logo-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}

/* =========================================================
   HC CATEGORY ASSISTANT — LOGO INFORMATIQUE
   ========================================================= */

.hc-logo-informatique{
  display:block;
  width:100%;
  height:100%;
  --icon-color:#1f5fae;
  color:var(--icon-color);
}

/* =========================================================
   HC CATEGORY ASSISTANT — KICKER LIGHTNING
   ========================================================= */

.hc-kicker-lightning{
  display:block;
  flex:0 0 14px;
  width:14px;
  height:22px;
}

.hc-kicker-text{
  display:block;
}

#hcTitle{
  max-width:none !important;
  margin:0 !important;
  font-family:"Barlow Condensed",sans-serif !important;
  font-size:clamp(42px,4vw,48px) !important;
  line-height:.96 !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

#hcIntro{
  margin-top:12px !important;
  font-size:16px !important;
  line-height:1.45 !important;
}

/* Le titre reste sur une ligne sous 460 px tout en conservant
   une marge de sécurité avec le bord droit du composant. */
@media (max-width:460px){
  #hcAssistant #hcTitle{
    font-size:
      clamp(
        28px,
        calc(10.76vw - 6.45px),
        40px
      )
      !important;
  }
}

.hc-arrow-cue{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  justify-content:center;
  width:100%;
  height:30px;
  margin:-30px 0 0;
  overflow:visible;
  pointer-events:none;
}

.hc-arrow-cue__svg{
  display:block;
  grid-column:3 / 4;
  justify-self:start;
  align-self:start;
  width:78px;
  height:auto;
  margin-top:-28px;
  margin-left:200px;
  opacity:.25;
  transform:
    rotate(1deg)
    scale(1.2);
  transform-origin:center center;
}

.hc-arrow-cue__svg path,
.hc-arrow-cue__svg rect{
  fill:#1a1a1a;
}

/* =========================================================
   COMMENT ÇA MARCHE — TIMELINE
   ========================================================= */

.hc-how-timeline{
  margin-top:22px;
  padding:22px 20px 24px;
  border:1px solid #e1e7ed;
  border-radius:12px;
  background:#fbfcfc;
}

.hc-how-timeline__title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 24px;
  color:#1f2937;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
}

.hc-how-timeline__info{
  display:inline-grid;
  place-items:center;
  flex:0 0 15px;
  width:15px;
  height:15px;
  border:1.5px solid #2868b2;
  border-radius:50%;
  color:#2868b2;
  font-family:Arial,sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:700;
}

.hc-how-timeline__steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

/* Ligne grise : centre du numéro 1 au centre du numéro 4 */

.hc-how-timeline__steps::before{
  content:"";
  position:absolute;
  z-index:0;
  top:16px;
  left:12.5%;
  right:12.5%;
  width:auto;
  height:1px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      #cfd9e6 0 4px,
      #f8fafc 4px 10px
    )
    50% 0 / 14% 1px no-repeat,
    repeating-linear-gradient(
      90deg,
      #cfd9e6 0 4px,
      #f8fafc 4px 10px
    )
    88.75% 0 / 14% 1px no-repeat,
    linear-gradient(
      90deg,
      #cfd9e6,
      #cfd9e6
    )
    0 0 / 100% 1px no-repeat;
}

/* Portion bleue : centre du numéro 1 au centre du numéro 2 */

.hc-how-timeline__steps::after{
  content:"";
  position:absolute;
  z-index:0;
  top:16px;
  left:12.5%;
  width:25%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    #2168d5 0%,
    #2168d5 32%,
    #7fa7d8 64%,
    #cfd9e6 100%
  );
}

.hc-how-timeline__step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  text-align:center;
}

/* Étapes 2, 3 et 4 */

.hc-how-timeline__number{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  margin:0 auto;
  border:1px solid #cfd9e6;
  border-radius:50%;
  background:#eef2f6;
  color:#111827;
  font-size:13px;
  line-height:1;
  font-weight:600;
  box-sizing:border-box;
box-shadow:
  0 0 0 5px #f8fafc,
  0 0 0 6px #fff,
  0 0 0 7px #dfe5ec;
}

/* Étape 1 active : même structure, contour extérieur bleu */

.hc-how-timeline__step.is-active .hc-how-timeline__number{
  border-color:#2168d5;
  background:#2168d5;
  color:#fff;
  box-shadow:
    0 0 0 5px #f8fafc,
    0 0 0 6px #fff,
    0 0 0 7px #2168d5;
}

/* Décalage optique des numéros 2 et 4 uniquement */

.hc-how-timeline__step:nth-child(2) .hc-how-timeline__number,
.hc-how-timeline__step:nth-child(4) .hc-how-timeline__number{
  transform:translateX(-9px);
}

.hc-how-timeline__icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  margin:25px auto 10px;
  padding:0;
  box-sizing:border-box;
}

.hc-how-timeline__icon-svg{
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:34px;
  height:34px;
  max-width:none;
  margin:0;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%);
  transform-origin:center;
}

.hc-how-timeline__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-width:0;
  text-align:center;
}

.hc-how-timeline__label{
  display:block;
  width:100%;
  max-width:220px;
  margin:0 auto;
  color:#111827;
  font-family:"Barlow Condensed",sans-serif;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  text-transform:uppercase;
}

.hc-how-timeline__description{
  display:block;
  width:100%;
  max-width:220px;
  margin:9px auto 0;
  color:#647184;
  font-size:12.5px;
  line-height:1.45;
  font-weight:400;
  text-align:center;
}

/* =========================================================
   ÉLÉMENTS ANNEXES
   ========================================================= */

.hc-assistant::before{
  content:"";
  position:absolute;
  z-index:0;
  top:42px;
  right:28px;
  width:320px;
  height:130px;
  pointer-events:none;
  opacity:.36;
  background-image:
    radial-gradient(
      circle,
      rgba(31,95,174,.22) 1px,
      transparent 1.2px
    );
  background-size:10px 10px;
  -webkit-mask-image:linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.35) 24%,
    #000 72%
  );
  mask-image:linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.35) 24%,
    #000 72%
  );
}

.hc-assistant::after{
  content:none;
}

.hc-assistant > *{
  position:relative;
  z-index:1;
}

.hc-how-timeline h3.hc-how-timeline__title{
  margin-bottom:30px;
  font-family:"Barlow Condensed",sans-serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

.wrapper:has(.hc-demo){
  background:fff !important;
}

/* =========================================================
   COMMENT ÇA MARCHE — TIMELINE SOUS 850 PX

   La structure HTML et les SVG existants sont conservés.
   Seule la composition passe d'une frise horizontale à un
   parcours vertical afin de préserver la lisibilité.
   ========================================================= */

@media (max-width:849px){
  .hc-how-timeline__steps{
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,minmax(86px,1fr));
    gap:0;
  }

  .hc-how-timeline__steps::before{
    top:12.5%;
    bottom:12.5%;
    left:16px;
    right:auto;
    width:1px;
    height:auto;
    background:#cfd9e6;
  }

  .hc-how-timeline__steps::after{
    top:12.5%;
    left:16px;
    width:1px;
    height:25%;
    background:linear-gradient(
      180deg,
      #2168d5 0%,
      #2168d5 32%,
      #7fa7d8 64%,
      #cfd9e6 100%
    );
  }

  .hc-how-timeline__step{
    display:grid;
    grid-template-columns:44px 34px minmax(0,1fr);
    align-items:center;
    column-gap:14px;
    min-height:86px;
    text-align:left;
  }

  .hc-how-timeline__number{
    margin:0;
  }

  .hc-how-timeline__step:nth-child(2) .hc-how-timeline__number,
  .hc-how-timeline__step:nth-child(4) .hc-how-timeline__number{
    transform:none;
  }

  .hc-how-timeline__icon{
    margin:0;
  }

  .hc-how-timeline__content{
    align-items:flex-start;
    text-align:left;
  }

  .hc-how-timeline__label,
  .hc-how-timeline__description{
    max-width:none;
    margin-right:0;
    margin-left:0;
    text-align:left;
  }

  .hc-how-timeline__description{
    margin-top:5px;
  }
}

/* =========================================================
   HC CATEGORY ASSISTANT — ÉTAPE 2
   DESIGN DESKTOP
   ========================================================= */

@media (min-width:1200px){

  /* ---------------------------------------------------------
     GRILLE DES MODÈLES
     --------------------------------------------------------- */

  .hc-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 16px;
  }

  /* ---------------------------------------------------------
     PANNEAU DE L’ÉTAPE
     --------------------------------------------------------- */

  .hc-stage-box.is-active{
    background:transparent;
    border-color:transparent;
  }

  /* ---------------------------------------------------------
     EN-TÊTE DE L’UNIVERS
     --------------------------------------------------------- */

  .hc-universe-heading{
    display:grid;
    grid-template-columns:1fr;
    align-items:center;
    column-gap:0;

    margin-bottom:14px;
    padding-left:0;
  }

  .hc-stage-heading__content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;
    margin-left:0;
    padding-left:0;
  }

  .hc-stage-box .hc-stage-heading__title{
    margin:0 0 5px;

    color:#111;
    font-size:22px;
    font-weight:700;
    line-height:1.1;
  }

  .hc-stage-heading__intro{
    margin:0;

    font-size:13px;
    line-height:1.45;
  }

  /* ---------------------------------------------------------
     CARTE MODÈLE
     Groupe image + titre centré
     --------------------------------------------------------- */

  .hc-option.hc-console-option{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;

    width:100%;
    min-width:0;
    height:76px !important;
    min-height:76px !important;
    padding:4px 12px !important;

    color:#111827;
    text-align:left;
    text-decoration:none;

    background:#fff;
    border:1px solid #dfe5ea;
    border-radius:10px;
    box-shadow:0 3px 8px rgba(31,41,55,.03);

    overflow:hidden;
    cursor:pointer;

    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }

  .hc-option.hc-console-option:hover,
  .hc-option.hc-console-option:focus{
    color:#111827;
    text-decoration:none;

    transform:translateY(-1px);
    border-color:rgba(53,111,159,.32);
    box-shadow:0 7px 16px rgba(31,41,55,.06);
  }

  .hc-option.hc-console-option:focus-visible{
    outline:3px solid rgba(53,111,159,.20);
    outline-offset:3px;
  }

  /* ---------------------------------------------------------
     IMAGE DU MODÈLE
     --------------------------------------------------------- */

  .hc-console-option__media{
    display:flex;
    flex:0 0 60px !important;
    align-items:center;
    justify-content:center;

    width:60px !important;
    height:60px !important;
    margin:0 !important;

    background:
      radial-gradient(
        circle at center,
        #f4f6f7 0,
        #f4f6f7 59%,
        transparent 60%
      );
  }

  .hc-console-option__image{
    display:block;

    width:56px !important;
    height:56px !important;
    max-width:56px !important;
    max-height:56px !important;

    object-fit:contain;
    object-position:center;
  }

  /* ---------------------------------------------------------
     TITRE DU MODÈLE
     --------------------------------------------------------- */

  .hc-console-option__content{
    display:flex;
    flex:0 1 auto !important;
    align-items:center;
    justify-content:flex-start;

    width:auto !important;
    min-width:0;
    margin:0;
    padding:0 !important;
  }

  .hc-option.hc-console-option .hc-console-option__title{
    display:block;
    margin:0;

    color:#2f3742;
    font-size:17px;
    font-weight:600;
    line-height:1.25;

    overflow-wrap:anywhere;
  }

  /* ---------------------------------------------------------
     CARTES UNIVERS
     Groupe logo + textes centré
     --------------------------------------------------------- */

  .hc-card{
    position:relative;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
  }

  .hc-card > span:nth-child(2){
    flex:0 1 auto !important;
    min-width:0;
    text-align:left !important;
  }

  .hc-logo{
    flex:0 0 auto !important;
    margin:0 !important;
  }

  .hc-check{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    margin:0 !important;
  }

  /* ---------------------------------------------------------
     GRILLE 4 COLONNES
     --------------------------------------------------------- */

  .hc-options{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
  }

  /* ---------------------------------------------------------
     CARTE MODÈLE
     --------------------------------------------------------- */

  .hc-option.hc-console-option{
    background:#fbfcfd;
    border-color:#dce5ed;
    box-shadow:none;
  }

  .hc-option.hc-console-option:hover,
  .hc-option.hc-console-option:focus{
    background:#fbfcfd;
    border-color:rgba(53,111,159,.30);
    box-shadow:0 5px 14px rgba(31,41,55,.04);
  }

  .hc-option.hc-console-option .hc-console-option__title{
    font-size:15px;
    line-height:1.25;
  }
}

  #hcReset{
    position:absolute;
    top:52px;
    right:30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0px;

    min-height:43px;
    padding:0 15px;

    color:#42546a;
    font-size:14px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;

    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:11px;
    box-shadow:0 1px 3px rgba(31,41,55,.04);

    cursor:pointer;

    transition:
      color .18s ease,
      background-color .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
  }

  #hcReset:hover{
    color:#1764ae;
    background:#f3f7fc;
    border-color:#6a9bd4;
    box-shadow:0 3px 8px rgba(31,41,55,.06);
    transform:translateY(-1px);
  }

  #hcReset:focus{
    outline:none;
  }

  #hcReset:focus-visible{
    outline:3px solid rgba(53,111,159,.22);
    outline-offset:3px;
  }

  #hcReset:active{
    transform:translateY(0);
    box-shadow:0 1px 3px rgba(31,41,55,.04);
  }

  #hcReset[hidden]{
    display:none !important;
  }


  .hc-reset__label{
    display:inline-block;
    line-height:1;
  }

  /* =========================================================
   ÉTAPE 3 DESKTOP
   PANNEAUX BOUTIQUE + GUIDES
   VERSION LIGHT COMPACTE
   ========================================================= */


/* ---------------------------------------------------------
   DISPOSITION DES DEUX PANNEAUX
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:12px;

  width:100%;
}


/* ---------------------------------------------------------
   PANNEAUX
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group{
  display:flex;
  flex-direction:column;

  min-width:0;
  overflow:hidden;

  background:#f8fafc;
  border:1px solid #dfe6ed;
  border-radius:10px;
  box-shadow:0 2px 7px rgba(31,41,55,.035);
}


/* ---------------------------------------------------------
   EN-TÊTES COMPACTS
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__header{
  display:flex;
  align-items:center;
  gap:12px;

  min-height:70px;
  padding:10px 14px;

  border-bottom:1px solid #e4e9ef;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--shop
.hc-category-group__header{
  background:#f8f9fd;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__header{
  background:#f7f9fa;
}


/* ---------------------------------------------------------
   ICÔNES COMPACTES
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__icon{
  display:block;
  flex:0 0 42px;

  width:42px;
  height:42px;

  background-position:center;
  background-repeat:no-repeat;
  background-size:25px 25px;

  border:0;
  border-radius:10px;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--shop
.hc-category-group__icon{
  background-color:#edf0fa;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.5 151.82'%3E%3Cpath fill='%232253e1' d='M61.26 0c16.83 0 29.27 12.53 30.36 29.11.02.21.19.38.41.38h18.12q.33 0 .63.12c1.9.73 2.92 1.83 3.05 3.3 1.81 19.88 4.54 50.25 8.21 91.12q.855 9.525.12 12.21c-2.67 9.65-12.34 15.58-22.16 15.58-13.16 0-26.08-.01-38.75 0H22.49c-9.82 0-19.49-5.93-22.16-15.58-.48-1.79-.44-5.86.13-12.21C4.13 83.15 6.87 52.78 8.68 32.9c.13-1.47 1.15-2.57 3.05-3.3q.3-.12.63-.12h18.12c.22 0 .39-.17.41-.38C31.98 12.53 44.43 0 61.26 0m-.02 29.49c11.75 0 18.88 0 21.39-.02.31 0 .56-.26.55-.57v-.06C81.84 17.23 73.49 8.33 61.25 8.33s-20.6 8.89-21.94 20.5c-.04.31.18.59.49.63h.06c2.51.01 9.64.02 21.38.03m0 114c21.7 0 33.67 0 35.9-.03 3.69-.03 6.25-.26 7.66-.69 4.63-1.4 9.88-6.08 9.42-11.13-4.2-46.54-6.99-77.66-8.36-93.35a.493.493 0 0 0-.5-.45H92.21c-.34 0-.62.28-.62.63v12.25c0 2.21-1.76 4.01-3.97 4.05h-.29a4.107 4.107 0 0 1-4.21-4.02v-12.3c0-.32-.25-.57-.57-.58-.77-.01-7.87-.02-21.31-.02-13.43 0-20.54 0-21.31.02-.32 0-.57.26-.57.58v12.21c0 2.28-1.84 4.12-4.12 4.12h-.38a4.06 4.06 0 0 1-3.97-4.06V38.47c0-.35-.28-.63-.62-.63H17.12c-.26 0-.48.19-.5.45-1.37 15.69-4.16 46.81-8.35 93.35-.46 5.05 4.79 9.73 9.42 11.13 1.41.43 3.97.66 7.66.69 2.23.02 14.2.03 35.89.03'/%3E%3C/svg%3E");
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__icon{
  background-color:#edf7f0;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%233f8b4d' d='M 7 2 L 7 48 L 43 48 L 43 14.59375 L 42.71875 14.28125 L 30.71875 2.28125 L 30.40625 2 Z M 9 4 L 29 4 L 29 16 L 41 16 L 41 46 L 9 46 Z M 31 5.4375 L 39.5625 14 L 31 14 Z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   CONTENEUR DES TEXTES
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__heading{
  min-width:0;
  gap:1px;
}


/* ---------------------------------------------------------
   TITRES DES PANNEAUX
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__title{
  margin:0 0 4px;

  font-size:14px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--shop
.hc-category-group__title{
  color:#1d67c8;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__title{
  color:#3b8345;
}


/* ---------------------------------------------------------
   SOUS-TITRES DES PANNEAUX
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__intro{
  margin:0;

  color:#65758b;
  font-size:12px;
  font-weight:400;
  line-height:1.3;
}


/* ---------------------------------------------------------
   GRILLES INTERNES
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:10px;

  flex:1 1 auto;
  padding:16px;
}


/* ---------------------------------------------------------
   CARTES INTERNES
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;

  width:100%;
  min-width:0;
  min-height:40px;
  height:40px;
  padding:5px 10px;

  color:#3b485a;
  text-align:center;
  text-decoration:none;

  background:#fff;
  border:1px solid #dde5ec;
  border-radius:9px;
  box-shadow:0 1px 4px rgba(31,41,55,.025);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option:hover,
.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option:focus{
  color:#3b485a;
  text-decoration:none;

  background:#fbfcfe;
  border-color:rgba(53,111,159,.28);
  box-shadow:0 4px 10px rgba(31,41,55,.045);

  transform:translateY(-1px);
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__options
.hc-option:hover,
.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__options
.hc-option:focus{
  border-color:rgba(35,148,90,.30);
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option:focus-visible{
  outline:3px solid rgba(53,111,159,.18);
  outline-offset:2px;
}


/* ---------------------------------------------------------
   GROUPE TITRE + COMPTEUR
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option > span:first-child{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  width:100%;
  max-width:none;
  min-width:0;
}


/* ---------------------------------------------------------
   TITRES DES CARTES
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option strong{
  display:block;
  flex:1 1 auto;

  min-width:0;
  margin:0;

  color:#424f61;
  font-size:13.5px;
  font-weight:600;
  line-height:1.25;

  transform:scaleX(.95);
  transform-origin:center;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-wrap:normal;
  word-break:normal;
}


/* ---------------------------------------------------------
   COMPTEURS
   --------------------------------------------------------- */

.hc-stage-box[data-hc-console-panel]
.hc-category-group__options
.hc-option small{
  display:block;
  flex:0 0 auto;

  margin:0 0 0 3px;

  color:#1764ae;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__options
.hc-option small{
  color:#23945a;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group__count{
  margin-right:1px;
  font-weight:600;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--shop
.hc-category-group__count{
  color:#1d67c8;
}

.hc-stage-box[data-hc-console-panel]
.hc-category-group--blog
.hc-category-group__count{
  color:#3b8345;
}

/* =========================================================
   HC CATEGORY ASSISTANT — ÉTAPE 4
   BARRE DE SYNTHÈSE FINALE

   Objectif :
   - remplacer l’ancienne carte verte par une barre minimaliste ;
   - afficher uniquement le nombre de produits ou d’articles ;
   - conserver le compteur et le CTA sur une seule ligne ;
   - rapprocher les éléments pour former un ensemble compact ;
   - utiliser un bouton outline plus léger et plus premium.
   ========================================================= */


/* =========================================================
   1. CONTENEUR EXTÉRIEUR DE L’ÉTAPE 4

   Le panneau ne ressemble plus à une carte :
   - largeur maximale contrôlée ;
   - centrage automatique ;
   - aucun fond coloré ;
   - aucune ombre ;
   - aucune bordure latérale ;
   - seulement une ligne fine en haut et en bas.
   ========================================================= */

#hcAssistant .hc-stage-box.hc-final-panel.is-active{
  width:min(100%,760px);
  margin-left:auto;
  margin-right:auto;
  padding:0;

  overflow:visible;

  background:transparent;
  border:0;
  border-top:1px solid #eceff3;
  border-bottom:1px solid #eceff3;
  border-radius:0;
  box-shadow:none;
}


/* =========================================================
   2. BARRE DE SYNTHÈSE

   La barre occupe la largeur du panneau, mais son contenu
   reste regroupé et centré.

   Important :
   - aucun justify-content:space-between ;
   - le compteur, le séparateur et le CTA forment un seul
     ensemble visuel compact au centre ;
   - hauteur cible proche de 72px.
   ========================================================= */

#hcAssistant .hc-final-result{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:0;

  width:100%;
  min-height:72px;
  padding:14px 20px;

  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}


/* =========================================================
   3. GROUPE GAUCHE — VALIDATION + COMPTEUR

   Ce groupe contient :
   - le cercle de validation ;
   - le texte court : « 6 produits » ou « 3 articles ».

   Le texte reste obligatoirement sur une seule ligne.
   ========================================================= */

#hcAssistant .hc-final-result__summary{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  gap:12px;

  min-width:0;
  margin:0;

  white-space:nowrap;
}


/* =========================================================
   4. ICÔNE DE VALIDATION

   Cercle vert très clair avec un check vert.
   Aucun dégradé, aucune ombre et aucun contour.
   ========================================================= */

#hcAssistant .hc-final-result__check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;

  width:34px;
  height:34px;

  color:#16a34a;
  font-size:19px;
  line-height:1;
  font-weight:700;

  background:#eaf8f1;
  border:0;
  border-radius:50%;
  box-shadow:none;
}


/* =========================================================
   5. COMPTEUR DE RÉSULTATS

   Le nom de la catégorie n’est plus affiché ici.

   Exemples :
   - 1 produit
   - 6 produits
   - 1 article
   - 3 articles

   Le texte est volontairement neutre afin que le bleu du
   bouton reste la couleur principale d’action.
   ========================================================= */

#hcAssistant .hc-final-result__count{
  display:block;

  margin:0;

  color:#1f2937;
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:.01em;

  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}


/* =========================================================
   6. SÉPARATEUR VERTICAL

   Ce trait sert uniquement de séparation mentale entre :
   - le résultat obtenu ;
   - l’action permettant de poursuivre.

   Il reste fin et volontairement discret.
   ========================================================= */

#hcAssistant .hc-final-result__divider{
  display:block;
  flex:0 0 1px;

  width:1px;
  height:28px;
  margin:0 36px;

  background:#e5e7eb;
}


/* =========================================================
   7. BOUTON OUTLINE

   Le bouton devient moins massif :
   - fond blanc ;
   - contour gris léger ;
   - texte bleu ;
   - aucune ombre ;
   - dimensions réduites ;
   - largeur déterminée uniquement par son contenu.
   ========================================================= */

#hcAssistant .hc-final-result__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:10px;

  width:auto;
  min-width:0;
  min-height:42px;
  height:42px;
  padding:0 22px;

  color:#244f73;
  font-size:14px;
  line-height:1;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;

  background:rgba(255,255,255,.92);
  border:1px solid rgba(53,111,159,.55);
  border-radius:10px;
  box-shadow:none;

  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


/* =========================================================
   8. LIBELLÉ ET FLÈCHE DU CTA

   Les deux éléments restent alignés sur une seule ligne.
   La flèche est légèrement séparée du texte pour faciliter
   la lecture sans alourdir le bouton.
   ========================================================= */

#hcAssistant .hc-final-result__button-label{
  display:block;
  line-height:1;
  white-space:nowrap;
}

#hcAssistant .hc-final-result__button-arrow{
  display:block;

  color:#2563eb;
  font-size:20px;
  line-height:.8;
  font-weight:400;

  transform:translateY(-1px);
}


/* =========================================================
   9. ÉTATS INTERACTIFS DU BOUTON

   Le hover reste très léger :
   - fond gris clair ;
   - bordure légèrement renforcée ;
   - aucun effet de bouton flottant ;
   - aucune ombre.
   ========================================================= */

#hcAssistant .hc-final-result__button:hover,
#hcAssistant .hc-final-result__button:focus{
  color:#2563eb;
  text-decoration:none;

  background:#f8fafc;
  border-color:#d7dee8;
  box-shadow:none;
  transform:none;
}

#hcAssistant .hc-final-result__button:hover
.hc-final-result__button-arrow,
#hcAssistant .hc-final-result__button:focus
.hc-final-result__button-arrow{
  color:#2563eb;
}

#hcAssistant .hc-final-result__button:focus-visible{
  outline:3px solid rgba(37,99,235,.16);
  outline-offset:3px;
}

#hcAssistant .hc-final-result__button:active{
  background:#f1f5f9;
  border-color:#cfd7e2;
  transform:none;
}


/* =========================================================
   10. NETTOYAGE DES ANCIENNES RÈGLES

   Ces sélecteurs neutralisent les dimensions héritées de
   l’ancien bouton bleu massif et de l’ancienne carte résultat.
   ========================================================= */

#hcAssistant .hc-final-result.hc-result{
  box-shadow:none;
}

#hcAssistant .hc-final-result__button.hc-btn{
  width:auto;
  min-width:0;
  min-height:42px;
  padding:0 22px;

  color:#244f73;
  background:rgba(255,255,255,.92);
  border-color:rgba(53,111,159,.55);
  box-shadow:none;
}


/* =========================================================
   11. TABLETTE

   On conserve exactement la même structure horizontale.

   Seuls les espacements sont légèrement réduits afin que
   l’ensemble reste compact sans modifier la hiérarchie.
   ========================================================= */

@media (max-width:767px){

  #hcAssistant .hc-stage-box.hc-final-panel.is-active{
    width:100%;
  }

  #hcAssistant .hc-final-result{
    min-height:68px;
    padding:12px 14px;
  }

  #hcAssistant .hc-final-result__divider{
    margin-left:22px;
    margin-right:22px;
  }

  #hcAssistant .hc-final-result__button,
  #hcAssistant .hc-final-result__button.hc-btn{
    height:40px;
    min-height:40px;
    padding-left:18px;
    padding-right:18px;
  }
}


/* =========================================================
   12. MOBILE

   Le compteur reste obligatoirement sur une seule ligne.

   Pour éviter une rupture du composant :
   - cercle légèrement réduit ;
   - texte légèrement réduit ;
   - marges du séparateur réduites ;
   - bouton plus compact ;
   - maintien de la disposition horizontale tant que l'espace
     reste suffisant.
   ========================================================= */

@media (max-width:479px){

  #hcAssistant .hc-final-result{
    min-height:62px;
    padding:10px 8px;
  }

  #hcAssistant .hc-final-result__summary{
    gap:8px;
  }

  #hcAssistant .hc-final-result__check{
    flex-basis:30px;
    width:30px;
    height:30px;

    font-size:17px;
  }

  #hcAssistant .hc-final-result__divider{
    height:24px;
    margin-left:12px;
    margin-right:12px;
  }

  #hcAssistant .hc-final-result__button,
  #hcAssistant .hc-final-result__button.hc-btn{
    gap:7px;

    height:38px;
    min-height:38px;
    padding-left:13px;
    padding-right:13px;

    font-size:13px;
    border-radius:9px;
  }

  #hcAssistant .hc-final-result__button-arrow{
    font-size:18px;
  }
}


/* =========================================================
   13. TRÈS PETITS ÉCRANS

   Dernier niveau de condensation avant la disposition
   verticale, sans couper le compteur.
   ========================================================= */

@media (max-width:359px){

  #hcAssistant .hc-final-result{
    padding-left:5px;
    padding-right:5px;
  }

  #hcAssistant .hc-final-result__check{
    flex-basis:28px;
    width:28px;
    height:28px;
  }

  #hcAssistant .hc-final-result__divider{
    margin-left:8px;
    margin-right:8px;
  }

  #hcAssistant .hc-final-result__button,
  #hcAssistant .hc-final-result__button.hc-btn{
    gap:5px;
    padding-left:10px;
    padding-right:10px;

    font-size:12.5px;
  }
}


/* =========================================================
   14. MOBILE XS

   Jusqu'à 375px, la largeur disponible devient trop juste
   pour les compteurs longs. Les deux groupes passent sur
   deux lignes centrées et le séparateur devient horizontal.
   ========================================================= */

@media (max-width:375px){

  #hcAssistant .hc-final-result{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:0;
    padding:13px 8px 14px;
  }

  #hcAssistant .hc-final-result__summary{
    justify-content:center;
  }

  #hcAssistant .hc-final-result__divider{
    flex-basis:1px;
    width:48px;
    height:1px;
    margin:0;
  }
}

/* =========================================================
   ÉTAPE 4 — ESPACEMENT SOUS LA TIMELINE

   Objectif :
   - descendre légèrement la barre de synthèse ;
   - éviter qu’elle paraisse collée à la progression ;
   - ne modifier aucun autre panneau des étapes 2 et 3.
   ========================================================= */

#hcAssistant .hc-stage:has(.hc-final-panel.is-active){
  margin-top:24px !important;
}

/* =========================================================
   ÉTAPE 4 — HOVER DU BOUTON

   Objectif :
   - rendre le survol visible ;
   - conserver un effet discret et premium ;
   - ne modifier ni la flèche ni la position du bouton.
   ========================================================= */

#hcAssistant .hc-final-result__button:hover{
  color:#1d4ed8;
  background:#f8fafc;
  border-color:#cbd5e1;
  text-decoration:none;
  cursor:pointer;
}

/* =========================================================
   ÉTAPES DYNAMIQUES — COMPACTAGE SOUS 1200 PX
   ========================================================= */

@media (max-width:1199.98px){
  #hcAssistant .hc-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  #hcAssistant .hc-option.hc-console-option{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    width:100%;
    min-width:0;
    height:84px !important;
    min-height:84px !important;
    padding:8px 12px !important;
    overflow:hidden;
  }

  #hcAssistant .hc-console-option__media{
    display:flex;
    flex:0 0 64px !important;
    align-items:center;
    justify-content:center;
    width:64px !important;
    height:64px !important;
    margin:0 !important;
  }

  #hcAssistant .hc-console-option__image{
    width:60px !important;
    height:60px !important;
    max-width:60px !important;
    max-height:60px !important;
    object-fit:contain;
  }

  #hcAssistant
  .hc-stage-box[data-hc-console-panel]
  .hc-category-groups{
    grid-template-columns:1fr;
  }

  #hcAssistant
  .hc-stage-box[data-hc-console-panel]
  .hc-category-group__options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:575.98px){
  #hcAssistant .hc-options{
    grid-template-columns:1fr;
  }

  #hcAssistant .hc-option.hc-console-option{
    height:78px !important;
    min-height:78px !important;
  }

  #hcAssistant .hc-console-option__media{
    flex-basis:58px !important;
    width:58px !important;
    height:58px !important;
  }

  #hcAssistant .hc-console-option__image{
    width:54px !important;
    height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
  }

  #hcAssistant
  .hc-stage-box[data-hc-console-panel]
  .hc-category-group__options{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px;
  }

  #hcAssistant
  .hc-stage-box[data-hc-console-panel]
  .hc-category-group__options
  .hc-option{
    height:auto;
    min-height:56px;
    padding:8px;
  }

  #hcAssistant
  .hc-stage-box[data-hc-console-panel]
  .hc-category-group__options
  .hc-option
  > span:first-child{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
  }
}

/* =========================================================
   FLÈCHE D'ORIENTATION — MASQUAGE SOUS 992 PX
   ========================================================= */

@media (max-width:991.98px){
  #hcAssistant .hc-arrow-cue{
    display:none;
  }

  #hcAssistant{
    scroll-margin-top:102px;
  }
}

/* =========================================================
   FLÈCHE D'ORIENTATION — PALIER 1200 À 1299 PX

   La flèche occupe la troisième colonne d'une grille de huit
   colonnes. La marge fixe correspond à la valeur validée pour
   l'ensemble de ce palier.
   ========================================================= */

@media (min-width:1200px) and (max-width:1299px){
  #hcAssistant .hc-arrow-cue__svg{
    margin-left:255px;
  }
}

/* =========================================================
   FLÈCHE D'ORIENTATION — PALIER 992 À 1199 PX

   Sur ce palier, le titre grandit avec le viewport alors que
   l'ancienne position de la flèche restait fixe dans sa grille.
   La marge fluide accompagne cette croissance sans rupture.

   La flèche est également réduite et légèrement inclinée vers
   les cartes afin d'alléger sa présence visuelle.
   ========================================================= */

@media (min-width:992px) and (max-width:1199px){
  #hcAssistant .hc-arrow-cue__svg{
    margin-left:calc(37.2vw - 182px);
    transform:
      rotate(6deg)
      scale(.9);
  }
}

/* =========================================================
   FLÈCHE D'ORIENTATION — ÉCART CONSTANT DE 992 À 1040 PX

   Le titre et le conteneur de la flèche se déplacent ensemble
   avec le viewport. La marge mesurée à 1040 px reste donc fixe
   afin de conserver le même espace visuel après le titre.
   ========================================================= */

@media (min-width:992px) and (max-width:1040px){
  #hcAssistant .hc-arrow-cue__svg{
    position:relative;
    top:-10px;
    margin-left:214.88px;
  }
}

/* =========================================================
   PARCOURS UNIVERS — PANNEAU SOUS LA CARTE ACTIVE

   À 640 px et moins, chaque univers occupe une ligne complète.
   Le contrôleur insère la progression et l'étape courante juste
   après la carte sélectionnée dans ce conteneur pleine largeur.
   ========================================================= */

@media (max-width:640px){
  #hcAssistant .hc-universes{
    grid-template-columns:1fr;
  }

  #hcAssistant .hc-mobile-universe-flow{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
  }

  #hcAssistant .hc-mobile-universe-flow > #hcReset{
    position:static;
    width:100%;
    min-height:44px;
    margin:4px 0 0;

    color:#244f73;
    background:#f6f9fc;
    border-color:rgba(53,111,159,.48);
  }

  #hcAssistant .hc-mobile-universe-flow > #hcProgressWrap{
    margin-top:14px;
  }
}

/* =========================================================
   TIMELINE — MOBILE ÉTROIT SOUS 390 PX

   Les pictogrammes d'étape sont retirés afin de rendre leur
   colonne au contenu. La hiérarchie reste portée par les
   numéros et la typographie gagne légèrement en lisibilité.
   ========================================================= */

@media (max-width:389px){
  #hcAssistant .hc-how-timeline__step{
    grid-template-columns:44px minmax(0,1fr);
    column-gap:14px;
  }

  #hcAssistant .hc-how-timeline__icon{
    display:none;
  }

  #hcAssistant .hc-how-timeline h3.hc-how-timeline__title{
    font-size:17px !important;
  }

  #hcAssistant .hc-how-timeline__number{
    font-size:14px;
  }

  #hcAssistant .hc-how-timeline__label{
    font-size:16px;
  }

  #hcAssistant .hc-how-timeline__description{
    font-size:13.5px;
    line-height:1.4;
  }
}

/* =========================================================
   MOBILE — ALIGNEMENT SUR LE PANNEAU DE RÉASSURANCE DU HERO
   ========================================================= */

@media (min-width:600px) and (max-width:639px){
  .hc-demo{
    width:calc(100% - 30px);
  }
}

@media (max-width:599px){
  .hc-demo{
    width:calc(100% - clamp(26px,7vw,32px));
  }
}

/* =========================================================
   LARGEUR GLOBALE — ALIGNEMENT SUR LA RÉASSURANCE DU HERO
   ========================================================= */

@media (min-width:640px) and (max-width:899px){
  .hc-demo{
    width:calc(100% - 56px);
  }
}

@media (min-width:900px) and (max-width:990px){
  .hc-demo{
    width:calc(100% - clamp(65px,6vw,85px));
    max-width:940px;
  }
}

@media (min-width:991px) and (max-width:1099px){
  .hc-demo{
    width:898px;
    max-width:calc(100% - 93px);
  }
}

@media (min-width:1100px) and (max-width:1299px){
  .hc-demo{
    width:calc(100% - 220px);
    max-width:1224px;
  }
}

@media (min-width:1300px) and (max-width:1365px){
  .hc-demo{
    width:min(calc(100% - 220px),1120px);
  }

  #hcAssistant .hc-arrow-cue__svg{
    margin-left:225px;
  }
}

@media (min-width:1366px) and (max-width:1499px){
  .hc-demo{
    width:min(calc(100% - 220px),1120px);
  }

  #hcAssistant .hc-arrow-cue__svg{
    margin-left:220px;
  }
}

@media (min-width:1500px){
  .hc-demo{
    width:min(calc(100% - 220px),1224px);
  }
}

/* =========================================================
   FULL HD — ALIGNEMENT SUR LE BLOC PRODUITS

   À partir de 1920 px, l'assistant reprend la largeur de
   référence de 1256 px du carrousel produit. La compensation
   de 8 px sur la flèche conserve sa position relative au titre
   malgré l'élargissement de la grille de huit colonnes.
   ========================================================= */

@media (min-width:1920px){
  .hc-demo{
    width:min(calc(100% - 220px),1256px);
  }

  #hcAssistant .hc-arrow-cue__svg{
    margin-left:192px;
  }
}

/* =========================================================
   ANCRE DEPUIS LE HERO — COMPENSATION DU HEADER STICKY
   ========================================================= */

#hcAssistant{
  scroll-margin-top:108px;
}

@media (max-width:767.98px){
  #hcAssistant{
    scroll-margin-top:86px;
  }
}

@media (prefers-reduced-motion:no-preference){
  html:has(#hcAssistant){
    scroll-behavior:smooth;
  }
}