/* ============ Variables ============ */
:root{
  color-scheme: light;   /* 🔒 force le mode clair */
  --hero-top: #DDE7F8; /* couleur exacte du haut du dégradé */
  --c-title: #203257;
  --c-cta: #162D58;
  --c-body: #202633;
  --header-h: 72px;
  --container-w: 1160px;
  --radius-card: 22px;
}

/* Reset simple */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c-body);
  line-height: 1.45;
}

/* Liens & boutons: jamais soulignés */
a{text-decoration:none;color:inherit}
a:hover{text-decoration:none}

/* ============ Header fixé, même fond que le haut du dégradé ============ */
.hl-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--hero-top);
  z-index: 50;
}
.hl-header__container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.hl-logo{
  font-weight: 700; letter-spacing: .2px;
  color: #111; /* texte noir comme demandé */
}
.hl-header__right{
  display: inline-flex; align-items: center;
  gap: 32px; /* espacement doublé */
}

/* Lang switch (sans encadré) */
.hl-langBtn{
  display:inline-flex; align-items:center; gap:8px;
  background: transparent; border:0; cursor:pointer; padding:6px 2px;
  font-weight:600;
}
.hl-flag{font-size:16px}
.hl-langcode{font-size:14px}

/* Burger minimal, barres un peu plus courtes */
.hl-burger{
  --w: 18px; --h:2px; --g:4px;
  display:inline-flex; flex-direction:column; justify-content:center; gap:var(--g);
  width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer;
}
.hl-burger span{
  display:block; width:var(--w); height:var(--h); background:#0f203a; border-radius:2px;
}

/* CTA header discret */
.hl-btn{display:inline-flex; align-items:center; justify-content:center; border-radius:99px}
.hl-btn--header{
  background: var(--c-cta); color:#fff; padding:8px 14px; font-weight:600; font-size:13px;
  box-shadow: none;
}

/* ============ HERO pleine largeur/hauteur ============ */
.hl-hero{
  /* Dégradé EXACT, pleine largeur */
	background: linear-gradient(180deg,
	  #DDE7F8 0%,
	  #DEE8F9 8%,
	  #E4E9F8 20%,
	  #ECEDF5 38%,
	  #F1EEF4 56%,
	  #F6F0F2 72%,
	  #FBF2F1 88%,
	  #FDF3F2 94%,
	  #FEF7F6 97%,
	  #FFFFFF 100%
	);

  width:100%;
  min-height: 820px; /* descend plus bas pour loger ton visuel */
  padding-top: calc(var(--header-h) + 32px); /* démarre haut mais laisse respirer sous le header */
  padding-bottom: 80px; /* limite bas = même rendu que ta capture */
  display: grid; place-items: start center;
}

/* Contenu centré en largeur, pas pleine largeur */
.hl-hero__inner{
  width:100%;
  max-width: var(--container-w);
  padding: 32px 24px 0;
  text-align:center;
}

/* Titre & sous-texte */
.hl-hero__title{
  margin:0 0 12px 0;
  color: var(--c-title);
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 500;
}
.hl-hero__subtitle{
  max-width: 860px;
  margin: 0 auto 28px;
  opacity:.88;
}

/* Cadre de l'illustration (sans ombre) */
.hl-hero__artframe{
  width: min(920px, 90vw);
  height: clamp(220px, 32vw, 320px);
  margin: 14px auto 26px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
}

/* CTA principal + note manuscrite */
.hl-hero__cta{display:flex; flex-direction:column; align-items:center; gap:6px}
.hl-btn--primary{
  background: var(--c-cta); color:#fff;
  padding: 14px 22px; font-weight:700; font-size:14px; border-radius: 40px;
  box-shadow: none;
}
.hl-note{
  font-family: "Caveat", cursive;
  font-size: 22px; line-height: 1;
  color: #4b5563;
  transform: translateY(2px);
}

.hl-hero{
  /* remonte la section sans casser la grille */
  padding-top: 72px;          /* header + un peu d’air */
  padding-bottom: 80px;       /* laisse la place au CTA */
  min-height: calc(100vh - 90px); /* occupe l’écran sans forcer le scroll */
}

/* décale légèrement le contenu vers le haut (équivalent à ton scroll manuel) */
.hl-hero .hl-hero-inner{
  transform: translateY(-28px);
}

/* Typo compacte & premium, sans toucher au texte */
.hl-hero .hl-hero-title{
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hl-hero .hl-hero-sub{
  line-height: 1.5;
}

/* sécurité : pas de scroll latéral (surtout en mobile) */
html, body{ overflow-x: hidden; }

/* léger ajustement desktop large */
@media (min-width: 680px){
  .hl-hero{ padding-top: 64px; }
  .hl-hero .hl-hero-inner{ transform: translateY(-32px); }
}

/* No horizontal scroll */
html, body{ overflow-x: hidden; }
img, svg{ max-width:100%; height:auto; }
.hl-hero{ overflow:hidden; } /* évite tout débordement du décor de la hero */

.hl-hero-image {
  margin: 30px auto 20px;  /* top=30px, left/right auto, bottom=20px */
  text-align: center;
  position: relative;
  z-index: 2;
}

.hl-hero-image img {
  max-width: 1000px;          /* ← augmente la taille max (520 → 680) */
  width: 95%;                /* ← élargit légèrement dans le container */
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.hl-hero-image img:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.12));
}

background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);

/* ==================== VERSION FINALE OPTIMISÉE - HERO COMPOSITION ET VIGNETTES ==================== */

/* Augmentation de la taille de Lisa de 30% */
.hl-hero-image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px; /* Augmenté de 480px à 620px (environ +30%) */
  margin: 0 auto 80px; /* Marge basse augmentée pour s'assurer que le bouton reste visible */
  text-align: center;
}

.hl-hero-image img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
}

/* Desktop only: Lisa moins imposante */
@media (min-width: 992px){
  .hl-hero-image{
    max-width: 720px; /* <- mets 520 / 480 / 500 selon ton goût */
    margin-bottom: 70px; /* optionnel: garde le CTA visible */
  }
}

/* ===== Footer ===== */
.hl-footer{
  background:#0B1227; /* bleu nuit élégant */
  color:#E8EEFF;
  padding:64px 0 28px;
}
.hl-footer__inner{
  max-width: var(--container-w, 1160px);
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:48px;
  align-items:center;
}

.hl-footer__title{
  margin:0 0 8px;
  font-size: clamp(28px, 5vw, 52px);
  line-height:1.05;
  color:#FFFFFF;
}
.hl-footer__text{
  margin:0;
  opacity:.88;
  max-width: 560px;
}

/* Formulaire */
.hl-footer__formwrap{ text-align:left; }
.hl-footer__label{
  color:#C9D4FF;
  font-weight:700;
  margin-bottom:10px;
}
.hl-footer__form{
  display:flex; gap:12px;
  align-items:center;
}
.hl-footer__input{
  flex:1;
  height:54px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}
.hl-footer__input::placeholder{ color:#C6CEE8; }
.hl-footer__btn{
  height:54px;
  padding:0 22px;
  border-radius:999px;
  border:none;
  background: #5B50E8; /* bouton violet (Neatik/HeyLisa) */
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.hl-footer__btn:hover{ filter:brightness(1.06); }
.hl-footer__microcopy{
  margin:10px 0 0; font-size:13px; opacity:.8;
}

/* Barre basse */
.hl-footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:42px;
  padding-top:18px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px;
  align-items:center;
  max-width: var(--container-w, 1160px);
  padding-left:20px; padding-right:20px;
  margin-left:auto; margin-right:auto;
}
.hl-footer__bottom-left{ font-size:14px; opacity:.85; }
.hl-footer__bottom-center{
  text-align:center;
}
.hl-footer__link{
  color:#E8EEFF; text-decoration:none; font-weight:600;
}
.hl-footer__bottom-right{
  justify-self:end;
}
.hl-footer__btn--ghost{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  color:#0B1227;
  background:#FFFFFF;
  font-weight:700;
  text-decoration:none;
}

/* Responsive */
@media (max-width: 980px){
  .hl-footer__inner{ grid-template-columns: 1fr; gap:28px; }
  .hl-footer__title{ font-size: clamp(26px, 6vw, 40px); }
  .hl-footer__bottom{
    grid-template-columns: 1fr; text-align:center;
    row-gap:10px;
  }
  .hl-footer__bottom-right{ justify-self:center; }
}

/* Rappel anti-doublons (si anciens blocs traînent) */
.hl-pill{
  color: var(--c-cta) !important;
  background: rgba(22,45,88,.08) !important;
  border: 1px solid rgba(22,45,88,.12) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}

/* =========================
   HERO BADGES (STATS + AWARD) — CLEAN
========================= */

/* 1) Ajustements mobile demandés */
@media (max-width: 768px){
  /* moins d'espace entre l'image et le CTA */
  .hl-hero-image{ margin-bottom: 18px !important; }

  /* CTA un poil plus proche de l'image */
  .hl-hero__cta{ margin-top: 4px; }

  /* plus d'espace entre "Essai Gratuit." et les badges */
  .hl-note{ margin-bottom: 26px; }

  .hl-hero-badges{ margin-top: 18px; }
}

/* 2) Bloc badges – base */
.hl-hero-badges{
  width: min(85vw, 520px);     /* ✅ ~15% moins large sur mobile */
  max-width: 520px;
  margin: 18px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

/* 3) Stats (3 items) */
.hl-stats{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;                   /* ✅ resserré (22px -> 16px) */
  text-align: center;
}

.hl-stat__value{
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #0F1E3A;
  letter-spacing: -0.02em;
}

.hl-stat__label{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(32, 38, 51, 0.72);
}

/* 4) Badge récompense – version premium (halo + bordure dégradée) */
.hl-award{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 16px;

  background: rgba(15, 30, 58, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 14px 32px rgba(10, 18, 36, 0.18);
  overflow: hidden;
}

/* halo + bordure dégradée fine */
.hl-award::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.35),
    rgba(91,80,232,0.40),
    rgba(255,255,255,0.15)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.hl-award::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle at 30% 40%,
    rgba(91,80,232,0.35),
    rgba(91,80,232,0) 65%
  );
  pointer-events:none;
}

.hl-award__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.hl-award__icon img{
  width: 26px;
  height: 26px;
  display:block;
}

.hl-award__title{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.hl-award__desc{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,0.74);
}

/* 5) DESKTOP : positionner le bloc badges à gauche, dans le cadre */
@media (min-width: 992px){
  /* on ancre dans la compo pour pouvoir placer précisément */
  .hl-hero-composition{
    position: relative;
    max-width: 980px;
    margin: 0 auto;
  }

  .hl-hero-badges{
    position: absolute;
    left: 0;
    top: 50%;                   /* ✅ un poil plus bas, proche main */
    transform: translate(0, -50%); /* ✅ plus de décalage vers la gauche */
    align-items: flex-start;
    text-align: left;
    width: 520px;
    margin: 0;
  }

  .hl-stats{
    text-align: left;
    gap: 18px;                  /* ✅ resserré aussi desktop */
  }

  .hl-stat__label{ font-size: 12.5px; }

  .hl-award{
    max-width: 420px;           /* garde compact */
  }
}

/* 6) Très grands écrans : léger micro-ajustement (sans sortir du cadre) */
@media (min-width: 1280px){
  .hl-hero-badges{
    transform: translate(400px, -50%);
  }
}

/* =========================
   BLOCK 2 — MARQUEE PROFILS (CLEAN)
   ========================= */

.hl-profiles{
  background:#fff;
  padding: 18px 0 14px;   /* un peu plus compact */
  overflow:hidden;
}

/* Texte intro (style Ramp-like) */
.hl-profiles__intro{
  margin: 0 0 10px;
  text-align: center;
  color: #6D6C6B;
  font-size: 14px;        /* ↓ un cran */
  font-weight: 500;
  line-height: 1.3;
}

/* Fenêtre visible du bandeau (c'est ICI que tu règles la largeur) */
.hl-profiles__track{
  width: 100%;
  max-width: 760px;       /* ✅ ajuste ici (ex: 680 / 720 / 820) */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* Fades sur les côtés */
.hl-profiles__track::before,
.hl-profiles__track::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  z-index: 2;
  pointer-events:none;
}
.hl-profiles__track::before{
  left:0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.hl-profiles__track::after{
  right:0;
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

/* Ligne qui défile */
.hl-profiles__row{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  will-change: transform;
  animation: hl-marquee 76s linear infinite; /* vitesse */
  padding: 8px 0;
}

/* Défilement */
@keyframes hl-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Profil = icône + texte */
.hl-prof{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  font-size: 15px;
  color: #9D9D9C;          /* ✅ couleur demandée */
  letter-spacing: -0.01em;
}

/* Conteneur icône */
.hl-prof__ico{
  width: 18px;             /* ✅ assure l'affichage */
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

/* Icône image */
.hl-prof__ico img{
  width: 18px;             /* ✅ taille explicite */
  height: 18px;
  display:block;
  object-fit: contain;
  opacity: .95;            /* harmonise avec le gris */
  filter: grayscale(1);    /* rendu homogène (à enlever si tu veux couleurs) */
}

/* Texte profil */
.hl-prof__txt{
  opacity: 1;
}

/* Séparateur */
.hl-sep{
  display:inline-flex;
  align-items:center;
  gap:10px;
  opacity: .6;
}
.hl-sep__spark{
  font-size: 14px;
  color: rgba(91,80,232,0.55);
}
.hl-sep__line{
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(15,30,58,0) 0%,
    rgba(15,30,58,0.12) 35%,
    rgba(91,80,232,0.18) 65%,
    rgba(15,30,58,0) 100%
  );
}

/* Pause au hover (desktop) */
@media (hover:hover){
  .hl-profiles__row:hover{ animation-play-state: paused; }
}

/* Accessibilité: réduire animations */
@media (prefers-reduced-motion: reduce){
  .hl-profiles__row{
    animation: none;
    transform: none;
  }
}

/* Mobile: fenêtre un peu plus large */
@media (max-width: 768px){
  .hl-profiles{
    padding: 14px 0 12px;
  }
  .hl-profiles__track{
    max-width: 92vw;
  }
}

/* =========================
   BLOCK 3 — RAMP-LIKE GRID (desktop premium + mobile Ramp)
   ========================= */

.hl-block3{
  background:#fff;
  padding: 92px 0 86px;
}

.hl-block3__inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.hl-block3__kicker{
  margin: 0 0 14px;
  font-size: 14px;
  color: #9D9D9C;
  letter-spacing: .02em;
}

.hl-block3__title{
  margin: 0 0 16px;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #111827;
  font-weight: 500;
}

.hl-block3__intro{
  margin: 0 0 46px;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.6;
  color: #6D6C6B;
}

/* Desktop grid */
.hl-block3__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Card base (desktop look) */
.hl-b3card{
  background: #F4F2F0;
  border-radius: 18px;
  padding: 22px 22px 18px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.hl-b3card__head{
  display:flex;
  flex-direction: column;
  margin: 0 0 10px; /* ✅ + d’air entre titre et desc */
  gap: 8px;
}

/* (eyebrow non utilisé maintenant) */
.hl-b3card__eyebrow{
  font-size: 14px;
  color: #9D9D9C;
}

/* Desktop title */
.hl-b3card__h{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #111827;
  font-weight: 500;
  max-width: 95%;
}

/* Desktop desc */
.hl-b3card__p{
  margin: 0 0 14px; /* ✅ + d’air entre desc et CTA */
  font-size: 14px;
  line-height: 1.55;
  color: #6D6C6B;
  max-width: 95%;
}

/* Desktop CTA */
.hl-b3card__cta{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #6D6C6B;
  font-size: 14px;
  text-decoration: none;
  opacity: .95;
}

.hl-b3card__cta:hover{
  opacity: 1;
  color: #111827;
}

/* Arrow (desktop + mobile right arrow uses same asset) */
.hl-b3card__arrow,
.hl-b3card__marrow{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%236D6C6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hl-b3card__cta:hover .hl-b3card__arrow{
  opacity: .95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Mobile-only elements hidden on desktop */
.hl-b3card__micon,
.hl-b3card__marrow{
  display: none;
}

/* Responsives */
@media (max-width: 1024px){
  .hl-block3{ padding: 72px 0 66px; }
  .hl-block3__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* desktop: on cache la version mobile */
.hl-b3card__p--mob { display: none; }

/* =========================
   DESK/MOB descriptions toggle
   ========================= */

/* Desktop default */
.hl-b3card__p--mob { display: none; }
.hl-b3card__p--desk { display: block; }

/* =========================
   MOBILE — match Ramp layout (clean)
   ========================= */
@media (max-width: 680px){

  /* Switch descriptions on mobile */
  .hl-b3card__p--desk { display: none; }
  .hl-b3card__p--mob  { display: block; }

  .hl-block3{ padding: 56px 0 52px; }

  .hl-block3__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Row layout: icon | text | arrow */
  .hl-b3card{
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 0;

    display: grid;
    grid-template-columns: 92px 1fr 18px;
    column-gap: 16px;
    align-items: center;
  }

  /* No desktop CTA line on mobile */
  .hl-b3card__cta{ display: none; }

  /* Icon square (left) */
  .hl-b3card__micon{
    display: flex;
    width: 92px;
    height: 92px;
    border-radius: 22px;
    background: #F4F2F0;
    outline: 1px solid rgba(17,24,39,0.06);
    align-items: center;
    justify-content: center;

    grid-column: 1;
    grid-row: 1;
  }

  .hl-b3card__micon img{
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
  }

  /* Text block RIGHT of icon */
  .hl-b3card__body{
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    min-width: 0; /* important for text wrapping */
  }

  /* Tight title/desc spacing */
  .hl-b3card__head{ margin: 0 0 2px; padding: 0; }

  .hl-b3card__h{
    margin: 0;
    font-size: 13.5px;
    line-height: 1.15;
    font-weight: 500;
    color: #9D9D9C;
    text-align: left;
  }

  .hl-b3card__p{
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 500;
    color: #111827;
    text-align: left;
  }

  /* Right arrow */
  .hl-b3card__marrow{
    display: inline-block !important; /* ✅ override the global display:none */
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;

    width: 18px;
    height: 18px;
    opacity: .55;
  }
}

/* Outside mobile: never show the right arrow */
@media (min-width: 681px){
  .hl-b3card__marrow{ display: none; }
}


/* =========================
   BLOCK 4 — Persistent memory CTA (Ramp-like / WHITE)
   ========================= */

.hl-block4{
  background:#fff;
  padding: 110px 0 120px;
  color:#111827;
  position: relative;
  overflow: hidden;
}

.hl-block4__inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Title */
.hl-block4__title{
  margin: 0 auto 16px;
  max-width: 980px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.03em;
  font-weight: 500;         /* ✅ aligné avec tes autres titres */
  color: #111827;
}

/* Brain inline visual slot */
.hl-block4__brain{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 92px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 12px;
  transform: translateY(6px);
  flex: 0 0 auto;

  /* fallback pendant chargement image */
  background: rgba(17,24,39,0.06);
  box-shadow: 0 10px 30px rgba(17,24,39,0.10);
}

.hl-block4__brain img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subline */
.hl-block4__subline{
  margin: 0 auto 34px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: #6D6C6B;           /* ✅ gris Ramp / section précédente */
}

.hl-block4__subline-strong{
  color: #111827;
  font-weight: 500;
}

/* Actions */
.hl-block4__actions{
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================
   Buttons (HeyLisa navy)
   ========================= */

.hl-btn{
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  user-select: none;
}

.hl-btn:active{ transform: translateY(1px); }

/* ✅ PRIMARY = bleu nuit HeyLisa (NO gradient) */
.hl-btn--primary{
  background: #0F172A;
  color: #ffffff;
  box-shadow: none;
}

.hl-btn--primary:hover{
  background: #020617;
}

/* ✅ SECONDARY = outline bleu nuit */
.hl-btn--ghost{
  background: transparent;
  color: #0F172A;
  border: 1px solid rgba(15,23,42,0.22);
}

.hl-btn--ghost:hover{
  border-color: rgba(15,23,42,0.32);
  background: rgba(15,23,42,0.04);
}

/* icon inside button */
.hl-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .95;
}

/* =========================
   Modal (YouTube) — keep premium dark
   ========================= */

html.hl-modal-open{ overflow: hidden; }

.hl-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.hl-modal.is-open{ display: block; }

.hl-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,0.55);
  backdrop-filter: blur(6px);
}

.hl-modal__panel{
  position: relative;
  width: min(960px, calc(100% - 32px));
  margin: 8vh auto 0;
  background: rgba(15,15,18,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}

.hl-modal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.hl-modal__close:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.26);
}

/* 16:9 responsive frame */
.hl-modal__frame{
  position: relative;
  padding-top: 56.25%;
}

.hl-modal__frame iframe{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================
   Responsive tweaks
   ========================= */

@media (max-width: 680px){
  .hl-block4{ padding: 86px 0 92px; }

  .hl-block4__title{
    font-size: 34px;
    line-height: 1.1;
  }

  .hl-block4__brain{
    width: 82px;
    height: 40px;
    margin: 0 10px;
    transform: translateY(5px);
  }

  .hl-block4__subline{
    font-size: 15px;
    margin-bottom: 26px;
  }
}

/* =========================
   BLOCK 5 — Referral (Ramp-like light card)
   HTML expected:
   .hl-block5 > .hl-block5__inner > .hl-block5__card
   ========================= */

.hl-block5{
  background: #FFFFFF;            /* section reste blanche */
  padding: 86px 0 96px;
}

.hl-block5__inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ✅ Le bloc détaché (la card) prend le beige */
.hl-block5__card{
  background: #F4F2F0;            /* beige du block 3 */
  border: 1px solid rgba(17,24,39,0.06);
  border-radius: 22px;
  box-shadow:
    0 18px 55px rgba(17,24,39,0.08),
    0 2px 10px rgba(17,24,39,0.04);

  padding: 34px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
  overflow: hidden;
}

.hl-block5__content{ min-width: 0; }

.hl-block5__title{
  margin: 0 0 14px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #111827;
  font-weight: 500;
}

/* Texte */
.hl-block5__desc{
  margin: 0 0 22px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: #6D6C6B;
}

.hl-block5__desc strong{
  color: #111827;
  font-weight: 600;
}

.hl-block5__desc-end{
  display: inline;
  color: #111827;
  font-weight: 500;
}

.hl-block5__actions{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ✅ CTA bleu nuit HeyLisa (override du .hl-btn--primary si besoin) */
.hl-block5__cta{
  background: #0F172A !important;
  color: #fff !important;
  box-shadow: none !important;
}
.hl-block5__cta:hover{
  background: #020617 !important;
}

/* =========================
   VISUEL — FLAT + -15%
   ========================= */

.hl-block5__visual{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 260px;
}

/* ✅ Image à plat : zéro radius, zéro shadow, zéro fond */
.hl-block5__img{
  display: block;
  height: auto;

  /* -15% environ */
  width: 85%;
  max-width: 440px;

  /* flat */
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1024px){
  .hl-block5__card{
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .hl-block5__visual{
    justify-content: center;
    min-height: unset;
  }

  .hl-block5__img{
    width: 100%;
    max-width: 520px; /* sur tablette on redonne un peu d'air */
  }
}

@media (max-width: 680px){
  .hl-block5{
    padding: 64px 0 70px;
  }

  .hl-block5__card{
    padding: 22px;
    gap: 18px;
    border-radius: 18px;
  }

  .hl-block5__title{
    font-size: 28px;
    line-height: 1.12;
  }

  .hl-block5__desc{
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 18px;
  }

  /* Toujours flat */
  .hl-block5__img{
    width: 100%;
    max-width: 480px;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .hl-block5__actions{
    justify-content: flex-start;
  }
}


/* =========================
   BLOCK 6 — Ramp-like timeline + cards + tabs (CLEAN FINAL)
   ========================= */

.hl-block6{
  background:#fff;
  padding: 110px 0 120px;
}

/* ====== TUNING VARS (si tu veux ajuster vite) ======
   --b6-timelineW : largeur zone timeline desktop
   --b6-gridW     : largeur zone cards desktop
   --b6-dotTop    : hauteur des dots sur la ligne (desktop)
   --b6-lineTop   : hauteur de la ligne (desktop)
*/
.hl-block6{
  --b6-timelineW: 860px;
  --b6-gridW: 980px;
  --b6-lineTop: 52px;
  --b6-dotTop: 44px;
  --b6-dark: rgba(17,24,39,0.26);
  --b6-line: rgba(17,24,39,0.14);
  --b6-greyFill: rgba(17,24,39,0.06);
}

.hl-block6__inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.hl-block6__kicker{
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.2;
  color: #6D6C6B;
}

.hl-block6__title{
  margin: 0 0 22px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #111827;
  font-weight: 500;
}

/* ===== Tabs (pills switch) ===== */
.hl-block6__tabs{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(17,24,39,0.03);
  margin: 0 auto 26px;
}

.hl-block6__tab{
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #111827;
  background: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.hl-block6__tab.is-active{
  background: #0F172A;
  color: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,0.18);
}

/* ===== Desktop timeline ===== */
.hl-block6__timeline{
  position: relative;
  width: min(var(--b6-timelineW), 100%);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 16px;
  align-items: center;
}

/* 1) Pills Today/Jour1 = fond blanc + bord (Ramp-like) */
.hl-block6__pill{
  justify-self: center;
  font-size: 12px;
  line-height: 1;
  color: #111827;
  background: #fff; /* <- IMPORTANT */
  border: 1px solid var(--b6-dark);
  padding: 8px 10px;
  border-radius: 999px;
  transform: translateX(0px); /* ⬅️ valeur par défaut */
}

/* Pill Jour 30 = rempli léger (Ramp) */
.hl-block6__pill:nth-of-type(3){
  background: var(--b6-greyFill);
  border-color: transparent;
}

/* ligne */
.hl-block6__line{
  grid-column: 1 / -1;
  height: 1px;
  background: var(--b6-line);
  position: relative;
  margin-top: -2px;
}

/* 2) Dots : 1 & 2 = contour only (hollow). 3 = plein */
.hl-block6__dot{
  position: absolute;
  top: var(--b6-dotTop);          /* <- VARIABLE à toucher si besoin */
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;              /* hollow center */
  border: 1px solid var(--b6-dark);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

/* positions sur la ligne */
.hl-block6__dot--1{ left: 0%; }
.hl-block6__dot--2{ left: 50%; }
.hl-block6__dot--3{ left: 100%; }

/* dot 3 plein (Ramp-like) */
.hl-block6__dot--3{
  background: rgba(17,24,39,0.32);
  border-color: rgba(17,24,39,0.32);
}

/* ===== Cards grid ===== */
.hl-block6__grid{
  width: min(var(--b6-gridW), 100%);
  margin: 0 auto;
  text-align: left;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* 4) Ombre uniquement sur la 3e card (les 2 premières à plat) */
.hl-b6card{
  background: #fff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: none; /* <- plat par défaut */
}

.hl-b6card:nth-child(3){
  box-shadow:
    0 10px 28px rgba(17,24,39,0.06),
    0 2px 10px rgba(17,24,39,0.04);
}

.hl-b6card__title{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: #111827;
}

.hl-b6card__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.hl-b6card__list li{
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6D6C6B;
}

.hl-b6card__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(17,24,39,0.55);
  font-weight: 700;
}

.hl-b6card__link{
  color: #0F172A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mode switching (show/hide lists) */
.hl-b6card__list--pro{ display: none; }
.hl-block6[data-hl-b6-mode="pro"] .hl-b6card__list--perso{ display: none; }
.hl-block6[data-hl-b6-mode="pro"] .hl-b6card__list--pro{ display: grid; }

/* ===== Tablet ===== */
@media (max-width: 1024px){
  .hl-block6__grid{
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .hl-block6__timeline{
    max-width: 620px;
  }

  /* Sur tablette, la 3e card garde l’ombre, les autres restent à plat */
  .hl-b6card{ box-shadow: none; }
  .hl-b6card:nth-child(3){
    box-shadow:
      0 10px 28px rgba(17,24,39,0.06),
      0 2px 10px rgba(17,24,39,0.04);
  }
}

/* =========================
   BLOCK 6 — Desktop pills fine horizontal offset
   ========================= */

/* Aujourd’hui → décale légèrement à gauche */
.hl-block6__pill:nth-of-type(1){
  transform: translateX(-140px); /* ajuste ±2px si besoin */
}

/* Jour 30 → décale légèrement à droite */
.hl-block6__pill:nth-of-type(3){
  transform: translateX(140px); /* ajuste ±2px si besoin */
}

/* =========================
   BLOCK 6 — MOBILE (Ramp-like VERTICAL TIMELINE) — PIXEL TUNABLE
   ✅ Remplace entièrement ton @media (max-width: 680px) par ce bloc
   ✅ N’altère pas le desktop
   ✅ Ajoute des variables pour bouger AU PIXEL :
      - la ligne (rail)
      - les dots (X/Y) PAR DOT (dot1/dot2/dot3)
      - les pills (X/Y) PAR PILL (pill1/pill2/pill3)
      - les cards (Y) PAR CARD (card1/card2/card3)
   ========================= */
@media (max-width: 680px){

  /* ========== BASE ========== */
  .hl-block6{ padding: 76px 0 84px; }

  .hl-block6__title{
    font-size: 30px;
    line-height: 1.14;
  }

  /* 1) On cache la timeline horizontale desktop */
  .hl-block6__timeline{ display:none; }


  /* ========== TUNING VARS (MOBILE) ==========
     👉 Tu ajustes uniquement ces variables (au pixel près)

     LAYOUT
     --b6-m-gap        : espace vertical entre cards (85–120 souvent)
     --b6-m-rail-left  : position X de la ligne verticale (rail)
     --b6-m-rail-top   : marge haut rail (si tu veux raccourcir le rail en haut)
     --b6-m-rail-bot   : marge bas rail (si tu veux raccourcir le rail en bas)

     DOTS (par dot)
     --b6-dot1-x / --b6-dot1-y
     --b6-dot2-x / --b6-dot2-y
     --b6-dot3-x / --b6-dot3-y

     PILLS (par pill)
     --b6-pill1-x / --b6-pill1-y
     --b6-pill2-x / --b6-pill2-y
     --b6-pill3-x / --b6-pill3-y

     CARDS (déplacement vertical par card)
     --b6-card1-y
     --b6-card2-y
     --b6-card3-y
  */
  .hl-block6{
    /* spacing / rail */
    --b6-m-gap: 84px;
    --b6-m-rail-left: 10px;
    --b6-m-rail-top: 0px;
    --b6-m-rail-bot: 140px;

    /* dots base position (tu touches rarement ça ; plutôt les dotX/Y) */
    --b6-m-dot-top: -18px;

    /* pills base position (idem ; plutôt les pillX/Y) */
    --b6-m-pill-top: -62px;
    --b6-m-pill-left: 10px;

    /* DOTS per-step (X/Y) */
    --b6-dot1-x: -34px;  --b6-dot1-y: -40px;
    --b6-dot2-x: -34px;  --b6-dot2-y: -40px;
    --b6-dot3-x: -34px;  --b6-dot3-y: -30px;

    /* PILLS per-step (X/Y) */
    --b6-pill1-x: 0px;  --b6-pill1-y: 0px;
    --b6-pill2-x: 0px;  --b6-pill2-y: -10px;
    --b6-pill3-x: 0px;  --b6-pill3-y: 0px;

    /* CARDS per-step (Y) */
    --b6-card1-y: 0px;
    --b6-card2-y: 20px;
    --b6-card3-y: 40px;
  }


  /* ========== GRID ========== */
  .hl-block6__grid{
    width: min(560px, 100%);
    grid-template-columns: 1fr;
    gap: var(--b6-m-gap);
    position: relative;
    padding-left: 28px;     /* espace à gauche pour rail + dots */
    margin-top: 14px;
  }

  /* Rail vertical */
  .hl-block6__grid::before{
    content:"";
    position:absolute;
    left: var(--b6-m-rail-left);
    top: var(--b6-m-rail-top);
    bottom: var(--b6-m-rail-bot);
    width: 2px;
    background: rgba(17,24,39,0.18);
    border-radius: 2px;
  }


  /* ========== CARD BASE ========== */
  .hl-b6card{
    padding: 18px 16px 16px;
    border-radius: 18px;
    box-shadow: none;
    position: relative;
    background: #fff;
    transform: translateY(var(--b6-card-y, 0px)); /* <-- Y par card via vars */
  }

  /* Assigne le Y par card */
  .hl-b6card:nth-child(1){ --b6-card-y: var(--b6-card1-y); }
  .hl-b6card:nth-child(2){ --b6-card-y: var(--b6-card2-y); }
  .hl-b6card:nth-child(3){ --b6-card-y: var(--b6-card3-y); }


  /* ========== DOT (per-card X/Y) ========== */
  .hl-b6card::before{
    content:"";
    position:absolute;

    /* X: rail + delta X (par dot) */
    left: calc(var(--b6-m-rail-left) + var(--b6-dot-x, -5px));

    /* Y: position base + delta Y (par dot) */
    top: calc(var(--b6-m-dot-top) + var(--b6-dot-y, 0px));

    width: 12px;
    height: 12px;
    border-radius: 999px;
    background:#fff;
    border: 1px solid var(--b6-dark);
    box-sizing: border-box;
    transform: none;
  }

  /* Branche les vars X/Y par dot */
  .hl-b6card:nth-child(1)::before{ --b6-dot-x: var(--b6-dot1-x); --b6-dot-y: var(--b6-dot1-y); }
  .hl-b6card:nth-child(2)::before{ --b6-dot-x: var(--b6-dot2-x); --b6-dot-y: var(--b6-dot2-y); }
  .hl-b6card:nth-child(3)::before{ --b6-dot-x: var(--b6-dot3-x); --b6-dot-y: var(--b6-dot3-y); }

  /* Dernier dot plein (Jour 30) */
  .hl-b6card:nth-child(3)::before{
    background: rgba(17,24,39,0.32);
    border-color: rgba(17,24,39,0.32);
  }


  /* ========== PILL (per-card X/Y) ========== */
  .hl-b6card::after{
    content:"";
    position:absolute;

    /* X: base left + delta X (par pill) */
    left: calc(var(--b6-m-pill-left) + var(--b6-pill-x, 0px));

    /* Y: base top + delta Y (par pill) */
    top: calc(var(--b6-m-pill-top) + var(--b6-pill-y, 0px));

    height: 34px;
    display:inline-flex;
    align-items:center;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color:#111827;
    background:#fff;
    border: 1px solid var(--b6-dark);
    width: max-content;
    z-index: 2;
  }

  /* Branche les vars X/Y par pill + texte */
  .hl-b6card:nth-child(1)::after{
    content:"Aujourd’hui";
    --b6-pill-x: var(--b6-pill1-x);
    --b6-pill-y: var(--b6-pill1-y);
  }

  .hl-b6card:nth-child(2)::after{
    content:"Jour 1";
    --b6-pill-x: var(--b6-pill2-x);
    --b6-pill-y: var(--b6-pill2-y);
  }

  .hl-b6card:nth-child(3)::after{
    content:"Jour 30";
    background: var(--b6-greyFill);
    border-color: transparent;
    --b6-pill-x: var(--b6-pill3-x);
    --b6-pill-y: var(--b6-pill3-y);
  }


  /* ========== SAFETY SPACE (évite que la pill 1 soit coupée) ========== */
  .hl-b6card:first-child{
    margin-top: 52px;
  }
}

/* =========================
   BLOCK 7 — Immersion (Ramp-like dark, alternating)
   ========================= */

.hl-block7{
  background: #111A2A;
  padding: 110px 0 120px;
  color: #fff;

  /* ===== TUNING VARS ===== */
  --b7-innerW: 1160px;
  --b7-rowGap: 86px;     /* espace entre les lignes (desktop) */
  --b7-colGap: 72px;     /* espace texte <-> image (desktop) */
  --b7-imgW: 750px;      /* ✅ largeur visuel demandée */
  --b7-radius: 28px;
  --b7-textW: 420px;
  --b7-muted: rgba(255,255,255,0.72);
  --b7-line: rgba(255,255,255,0.12);
}


.hl-block7__inner{
  max-width: var(--b7-innerW);
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.hl-block7__title{
  margin: 0 0 14px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.10;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.hl-block7__sub{
  margin: 0 auto 72px;
  max-width: 820px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--b7-muted);
}

/* Stack */
.hl-block7__stack{
  display: grid;
  gap: var(--b7-rowGap);
  text-align: left;
}

/* Row layout */
.hl-b7row{
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, var(--b7-imgW));
  gap: var(--b7-colGap);
  align-items: center;
}

/* Alternance (stair layout) */
.hl-b7row--reverse{
  grid-template-columns: minmax(0, var(--b7-imgW)) minmax(280px, 1fr);
}

.hl-b7row__text{
  max-width: var(--b7-textW);
}

.hl-b7row--reverse .hl-b7row__text{
  justify-self: end;
}

/* Text */
.hl-b7row__h{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hl-b7row__p{
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--b7-muted);
}

/* CTA */
.hl-b7row__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  transition: opacity .15s ease, border-color .15s ease;
}

.hl-b7row__cta:hover{
  opacity: 0.9;
  border-color: rgba(255,255,255,0.35);
}

.hl-b7row__soon{
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.55);
  font-size: 14.5px;
  line-height: 1;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: default;
}

/* Media (NO card / NO aplat) */
.hl-b7row__media{
  width: 100%;
}

.hl-b7row__img{
  width: min(var(--b7-imgW), 100%);
  height: auto;
  display: block;
  border-radius: var(--b7-radius);
  /* Ramp-like: image clean, pas d'aplat. Légère profondeur optionnelle: */
  box-shadow: 0 22px 70px rgba(0,0,0,0.28);
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hl-block7{
    --b7-colGap: 44px;
    --b7-rowGap: 64px;
    --b7-textW: 520px;
  }
}

@media (max-width: 820px){
  .hl-block7{
    padding: 84px 0 92px;
    --b7-rowGap: 56px;
  }

  .hl-block7__sub{
    margin-bottom: 54px;
  }

  /* Sur mobile : stack (comme Ramp) */
  .hl-b7row,
  .hl-b7row--reverse{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hl-b7row__text,
  .hl-b7row--reverse .hl-b7row__text{
    max-width: 560px;
    justify-self: start;
    order: 2;
  }

  .hl-b7row__media{
    order: 1;
  }

  .hl-b7row__img{
    width: 100%;
    border-radius: 22px;
  }
}

/* =========================
   BLOCK 7 — FIX LAYOUT (Ramp-like, alternating, 750px visuals)
   ========================= */

.hl-block7{
  background: #111A2A;
  color: #fff;
}

/* 🔧 TUNING VARS (desktop) */
.hl-block7{
  --b7-maxW: 1160px;
  --b7-gapY: 120px;      /* espace entre les lignes (ramp = grand) */
  --b7-gapX: 90px;       /* espace texte <-> visuel */
  --b7-imgW: 750px;      /* ✅ largeur visuel demandée */
  --b7-imgH: 500px;      /* hauteur visuel desktop (ajuste si tu veux) */
  --b7-radius: 26px;
}

.hl-block7__inner{
  max-width: var(--b7-maxW);
  margin: 0 auto;
  padding: 120px 20px;
}

.hl-block7__stack{
  display: grid;
  gap: var(--b7-gapY);
  margin-top: 70px;
}

/* ✅ 2 colonnes, ramp-like */
.hl-b7row{
  display: grid;
  grid-template-columns: 1fr var(--b7-imgW);
  grid-template-areas: "text media";
  align-items: center;
  column-gap: var(--b7-gapX);
}

/* ✅ Alternance réelle : visuel à gauche / texte à droite */
.hl-b7row--reverse{
  grid-template-columns: var(--b7-imgW) 1fr;
  grid-template-areas: "media text";
}

/* map des zones */
.hl-b7row__text{ grid-area: text; max-width: 420px; }
.hl-b7row__media{ grid-area: media; }

/* ✅ Le visuel occupe TOUJOURS son slot (plus de ratatinage) */
.hl-b7row__media{
  width: var(--b7-imgW);
  justify-self: end; /* normal: visuel collé côté droit */
}

.hl-b7row--reverse .hl-b7row__media{
  justify-self: start; /* reverse: visuel collé côté gauche */
}

/* ✅ l'image remplit le cadre */
.hl-b7row__img{
  width: 100%;
  height: var(--b7-imgH);
  display: block;
  border-radius: var(--b7-radius);
  object-fit: cover;
  object-position: center;
  box-shadow: 0 22px 70px rgba(0,0,0,0.28);
}

/* =========================
   RESPONSIVE (Ramp-like)
   ========================= */
@media (max-width: 980px){
  .hl-block7{
    --b7-gapY: 70px;
    --b7-gapX: 28px;
    --b7-imgW: 100%;
    --b7-imgH: 260px;
  }

  .hl-b7row,
  .hl-b7row--reverse{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
    row-gap: 18px;
  }

  .hl-b7row__media{
    width: 100%;
    justify-self: stretch;
  }

  .hl-b7row__text{
    max-width: 520px;
  }
}


/* =========================
   BLOCK 8 — "Pourquoi utiliser Lisa" (FAQ Masonry Clickup-like)
   ✅ Ne casse pas l'effet escalier (masonry columns)
   ✅ Colonnes plus étroites = ne déborde plus
   ✅ Ajoute une vraie marge avec la section précédente
   ========================= */

.section-faq{
  /* spacing avec la section précédente */
  padding: 110px 0 110px;
}

/* Container FAQ (on arrête le padding hardcodé à 200px) */
.section-faq .container{
  /* ✅ centre + largeur max contrôlée */
  max-width: 1180px;     /* ajuste si ton container global est plus petit */
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Titre + subline (style propre + marge) */
/* =========================
   FAQ — Titre section (aligné avec H2 HeyLisa)
   ========================= */

.section-faq h2 {
    font-size: clamp(2rem, 3.2vw, 2.6rem); /* ≈ autres H2 */
	  text-align: center;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.section-faq p.subtitle{
  text-align: center;
  font-size: 16px;
  color: rgba(17,24,39,0.72);
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1.6;
  max-width: 760px;
  margin: 14px auto 0;
}

.section-faq p.subtitle a{
  color: #5b5bf0;
  text-decoration: none;
}

/* Espace sous le header FAQ */
.section-faq .row{
  margin-top: 44px !important;
}

/* Row devient un container Masonry */
.section-faq .row{
  display: block !important;
  columns: 3 !important;          /* ✅ 3 colonnes desktop */
  column-gap: 22px !important;    /* ✅ plus serré = tient mieux */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Items Masonry */
.section-faq .col-md-4,
.section-faq .col-6{
  display: inline-block !important;
  width: 100% !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* Cards */
.section-faq .faq-card{
  border: 1px solid rgba(232,235,240,0.95);
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  transition: all 0.2s ease;
  height: auto !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-faq .faq-card:hover{
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-color: #D1D6E0;
}

/* Question */
.section-faq .faq-card h3{
  font-size: 18px !important;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #111827;
  line-height: 1.35;
}

/* Réponse */
.section-faq .faq-card p{
  font-size: 15px !important;
  color: rgba(17,24,39,0.72);
  line-height: 1.65;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .section-faq .container{
    max-width: 980px;
  }
  .section-faq .row{
    columns: 2 !important;        /* ✅ 2 colonnes tablette */
    column-gap: 20px !important;
  }
}

@media (max-width: 680px){
  .section-faq{
    padding: 84px 0 84px;
  }

  .section-faq h2{
    font-size: 30px;
    line-height: 1.14;
  }

  .section-faq p.subtitle{
    font-size: 15px;
    margin-top: 12px;
  }

  .section-faq .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-faq .row{
    columns: 1 !important;        /* ✅ 1 colonne mobile */
    column-gap: 0 !important;
    margin-top: 28px !important;
  }

  .section-faq .col-md-4,
  .section-faq .col-6{
    margin: 0 0 18px 0 !important;
  }

  .section-faq .faq-card{
    padding: 18px;
  }

  .section-faq .faq-card h3{
    font-size: 17px !important;
  }

  .section-faq .faq-card p{
    font-size: 14.5px !important;
  }
}

/* =========================
   HL — BLOG HIGHLIGHTS (Ramp-like)
   ========================= */

.hl-block8{
  padding: 80px 0 60px;
}

.hl-block8__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.hl-block8__title{
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
}

.hl-block8__sub{
  margin: 0 auto 18px;
  max-width: 780px;
  color: rgba(0,0,0,.60);
  font-size: 15px;
  line-height: 1.6;
}

.hl-block8__all{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(0,0,0,.65);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 28px;
}

.hl-block8__all:hover{
  color: rgba(0,0,0,.85);
  text-decoration: none;
}

/* ===== Desktop row (5 cards same size) ===== */
.hl-block8__row{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  flex-wrap: nowrap;
}

/* Card base (exact Ramp-like size) */
.hl-blogcard{
  width: 336px;
  height: 421px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: block;
  text-decoration: none;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transform: translateZ(0);
}

/* Dark overlay (default) */
.hl-blogcard__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  transition: background .18s ease;
}

/* Content positioning */
.hl-blogcard__content{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: #fff;
}

/* Title shown by default */
.hl-blogcard__title{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 650;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
  display: block;
}

/* Description hidden by default, shown on hover */
.hl-blogcard__desc{
  display: none;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Hover behaviour */
.hl-blogcard:hover .hl-blogcard__overlay{
  background: rgba(0,0,0,.48);
}
.hl-blogcard:hover .hl-blogcard__title{
  display: none;
}
.hl-blogcard:hover .hl-blogcard__desc{
  display: block;
}

/* ===== Mobile slider ===== */
.hl-block8__slider{
  display: none; /* enabled under 900px */
}

/* Track uses scroll-snap + peek */
.hl-block8__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* peek: padding left/right so you see next/prev edges */
  padding: 0 18px 10px;
  margin: 0 -18px; /* extend to screen edges */
}

.hl-block8__track::-webkit-scrollbar{
  display: none;
}

.hl-block8__slide{
  scroll-snap-align: center;
  flex: 0 0 auto;

  /* card width on mobile: 90vw -> leaves ~5% peek each side */
  width: 90vw;
  max-width: 360px;
}

/* make cards adapt inside slide while keeping ratio-ish */
.hl-block8__slide .hl-blogcard{
  width: 100%;
  height: min(72vh, 470px);
}

/* Optional dots container (if you later wire JS) */
.hl-block8__dots{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Responsive switch */
@media (max-width: 1100px){
  .hl-block8__row{
    gap: 14px;
  }
  .hl-blogcard{
    width: 300px;
    height: 376px;
  }
}

@media (max-width: 900px){
  .hl-block8__row{ display: none; }
  .hl-block8__slider{ display: block; }
}

/* =================================================
   DESKTOP ONLY — Full width cards (Ramp-like)
   ================================================= */

@media (min-width: 901px) {

  /* on autorise le débordement horizontal */
  .hl-block8 {
    overflow: hidden;
  }

  /* le texte reste centré */
  .hl-block8__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* la rangée de cards sort du container */
  .hl-block8__row {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 0 48px; /* respiration bord écran */
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    gap: 18px;
  }

  /* on fige strictement la taille Ramp */
  .hl-blogcard {
    flex: 0 0 336px;
    width: 336px;
    height: 421px;
  }
}

/* =========================
   HL BLOG — MOBILE FIXES
   ========================= */
@media (max-width: 900px){

  /* --- 1. Plus de "peek" sur les cards adjacentes --- */

  .hl-block8__track{
    padding-left: 8vw;
    padding-right: 8vw;
    margin-left: -8vw;
    margin-right: -8vw;
  }

  .hl-block8__slide{
    width: 82vw;              /* ↓ carte plus étroite */
    max-width: 330px;
  }

  /* --- 2. Dots de navigation propres (style Ramp) --- */

  .hl-block8__dots{
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .hl-block8__dots button{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.18);
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }

  .hl-block8__dots button.is-active{
    background: rgba(0,0,0,.65);
    transform: scale(1.1);
  }

  /* neutralise les anciens rectangles si présents */
  .hl-block8__dots div,
  .hl-block8__dots span{
    display: none !important;
  }
}

/* Espace respirant avant le footer */
.hl-block8{
  margin-bottom: 140px;
}

@media (max-width: 900px){
  .hl-block8{
    margin-bottom: 120px;
  }
}