/* styles.css : la feuille de l'accueil (famille hp), celle de la base (Website, HEAD 35437e4, apps/web/src/hugo/styles.css),
   règle pour règle, passée aux jetons de /assets/charte.css (spec site-astro, REQ-3, Q-5) : aucune couleur ni famille de
   police n'est écrite ici, et les boutons prennent leur forme et leurs couleurs dans les jetons --bouton-*. Émise sous
   /_astro/ (src/components/Tete.astro). */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* [project]/src/components/marketing/narrative/narrative.module.css [app-client] (css) */
.hp-root {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

.hp-root a {
  text-decoration: none;
}

.hp-topBar {
  z-index: 400;
  height: 80px;
  transition: transform .8s var(--ease),
    opacity .8s var(--ease);
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem 0;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.hp-topLogo {
  flex-shrink: 0;
  align-items: center;
  display: inline-flex;
}

.hp-topLogo img {
  width: auto;
  height: 38px;
  display: block;
}

.hp-topNav {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.hp-topBarHidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.hp-topLink {
  color: var(--ink-70);
  padding: .55rem 1rem;
  font-size: .88rem;
  transition: color .2s;
}

.hp-topLink:hover {
  color: var(--ink);
}

.hp-topCta {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.6rem;
  font-size: .88rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 4px 16px var(--teal-20);
}

.hp-topCta:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--teal-30);
}

.hp-topGhost {
  color: var(--bouton-contour-texte);
  border: 1.5px solid var(--bouton-contour-bordure);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.6rem;
  font-size: .88rem;
  font-weight: 500;
  display: inline-flex;
}

.hp-topGhost:hover {
  color: var(--bouton-contour-accent);
  border-color: var(--bouton-contour-accent);
  transform: translateY(-2px);
}

.hp-progress {
  z-index: 399;
  height: 2px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.hp-progressFill {
  background: var(--teal);
  width: 0%;
  height: 100%;
}

.hp-floatCta {
  z-index: 300;
  opacity: 0;
  transition: opacity .4s var(--ease),
    transform .4s var(--ease);
  pointer-events: none;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  display: flex;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  transform: translateY(20px);
}

.hp-floatCtaShow {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.hp-floatBtn {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.8rem;
  font-size: .88rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 8px 32px var(--teal-40);
}

.hp-floatBtn:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px var(--teal-50);
}

.hp-floatBtnSm {
  background: var(--ink-10);
  color: var(--ink-70);
  transition: all .25s var(--ease);
  border: 1px solid var(--ink-10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.2rem;
  font-size: .78rem;
  font-weight: 500;
  display: inline-flex;
}

.hp-floatBtnSm:hover {
  color: var(--ink);
  border-color: var(--ink-20);
  transform: translateY(-1px);
}

.hp-hero {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  padding: 11rem 2rem 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hp-hero:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(var(--teal-10) 0%, var(--transparent) 65%);
  width: min(1000px, 140vw);
  height: 600px;
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
}

.hp-heroInner {
  z-index: 1;
  max-width: 700px;
  position: relative;
}

.hp-heroMarquee {
  z-index: 1;
  width: 100%;
  margin: 2.5rem 0 0;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, var(--transparent), var(--black) 8% 92%, var(--transparent));
  mask-image: linear-gradient(to right, var(--transparent), var(--black) 8% 92%, var(--transparent));
}

.hp-marqueeTrack {
  gap: 1rem;
  width: max-content;
  padding: 10px 0;
  animation: 40s linear infinite hp-marqueeScroll;
  display: flex;
}

.hp-marqueeTrack:hover {
  animation-play-state: paused;
}

@keyframes hp-marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.hp-heCard {
  background: var(--white);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  width: 280px;
  transition: all .25s var(--ease);
  border-radius: 14px;
  flex-shrink: 0;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.2rem;
  display: flex;
}

.hp-heCard:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.hp-heAv {
  border: 2px solid var(--white);
  width: 46px;
  height: 46px;
  box-shadow: 0 0 0 1px var(--ink-10);
  color: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.hp-heName {
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
}

.hp-heRole {
  color: var(--ink-40);
  margin-bottom: .25rem;
  font-size: .65rem;
}

.hp-heProof {
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  display: flex;
}

.hp-heBadge {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-radius: 50px;
  align-items: center;
  gap: .15rem;
  padding: .12rem .4rem;
  font-size: .5rem;
  font-weight: 600;
  display: inline-flex;
}

.hp-heDomain {
  background: var(--ink);
  color: var(--white);
  letter-spacing: .02em;
  border-radius: 50px;
  align-items: center;
  gap: .25rem;
  padding: .18rem .55rem;
  font-size: .55rem;
  font-weight: 600;
  display: inline-flex;
}

.hp-heDomain .hp-hdIcon {
  font-size: .7rem;
  line-height: 1;
}

.hp-bentoSection {
  padding: 0 0 1rem;
}

.hp-bigStats {
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 1rem;
  padding: 0 3rem;
  display: grid;
}

.hp-bigStat {
  text-align: center;
  padding: 2rem 1rem;
}

.hp-bsVal {
  font-family: var(--font-serif);
  color: var(--teal);
  margin-bottom: .7rem;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
}

.hp-bsLabel {
  color: var(--ink-70);
  max-width: 240px;
  margin: 0 auto;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.55;
}

.hp-bsSource {
  font-family: var(--font-mono);
  color: var(--ink-40);
  letter-spacing: .02em;
  max-width: 240px;
  margin: .7rem auto 0;
  font-size: .6rem;
}

.hp-scrollLayout {
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
}

.hp-scrollText {
  padding: 4rem 0;
}

.hp-scrollVisual {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.hp-svPanel {
  opacity: 0;
  width: 100%;
  transition: opacity .5s var(--ease),
    transform .5s var(--ease);
  pointer-events: none;
  position: absolute;
  transform: translateY(15px);
}

.hp-svPanelActive {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.hp-stBlock {
  flex-direction: column;
  justify-content: center;
  min-height: 80vh;
  padding: 4rem 0;
  display: flex;
}

.hp-stBlock:first-child {
  padding-top: 3rem;
}

.hp-stBlock:last-child {
  padding-bottom: 12rem;
}

.hp-sectionFull {
  text-align: center;
  align-items: center;
  min-height: auto;
  padding: 4rem 0;
  display: flex;
}

.hp-sectionInner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 3rem;
}

.hp-q {
  font-family: var(--font-serif);
  letter-spacing: -.035em;
  opacity: 0;
  transition: opacity .6s var(--ease),
    transform .6s var(--ease);
  margin-bottom: 2rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  transform: translateY(15px);
}

.hp-qShow {
  opacity: 1;
  transform: none;
}

.hp-q em {
  color: var(--teal);
  font-style: italic;
}

.hp-w {
  color: var(--transparent);
  transition: color .1s;
}

.hp-wOn {
  color: inherit;
}

.hp-a {
  color: var(--ink-70);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.85;
}

.hp-aHl {
  background: none;
  border-bottom: 2px solid var(--transparent);
  border-radius: 2px;
  padding: 0 3px;
  transition: background .3s, border-color .3s;
}

.hp-aHlOn {
  border-bottom-color: var(--teal);
  background: var(--teal-10);
}

.hp-aHl .hp-wOn {
  color: var(--teal-dark);
}

.hp-vis {
  opacity: 0;
  transition: opacity .7s var(--ease),
    transform .7s var(--ease);
  transform: translateX(30px);
}

.hp-visIn {
  opacity: 1;
  transform: none;
}

.hp-sCta {
  opacity: 0;
  transition: opacity .5s var(--ease),
    transform .5s var(--ease);
  margin-top: 2rem;
  transform: translateY(12px);
}

.hp-sCtaIn {
  opacity: 1;
  transform: none;
}

.hp-heroSCta {
  margin-bottom: 2rem;
}

.hp-btnBig {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .6rem;
  padding: 1rem 2.4rem;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 6px 24px var(--teal-30);
}

.hp-btnBig:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px var(--teal-40);
}

.hp-btnGhost {
  color: var(--bouton-contour-texte);
  border: 1.5px solid var(--bouton-contour-bordure);
  transition: all .25s var(--ease);
  background: none;
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .5rem;
  margin-left: .8rem;
  padding: 1rem 2rem;
  font-size: .92rem;
  font-weight: 500;
  display: inline-flex;
}

.hp-btnGhost:hover {
  border-color: var(--bouton-contour-accent);
  color: var(--bouton-contour-accent);
  transform: translateY(-2px);
}

.hp-sep {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--ink-08);
  letter-spacing: .2em;
  -webkit-user-select: none;
  user-select: none;
  padding: .3rem 0;
  font-size: .48rem;
}

.hp-avMd {
  color: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.hp-heAv img, .hp-avMd img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.hp-avXs {
  color: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: .55rem;
  font-weight: 700;
  display: flex;
}

.hp-vsStack {
  justify-content: center;
  align-items: center;
  height: 340px;
  display: flex;
  position: relative;
}

.hp-vsArticleCard {
  background: var(--cream);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  text-align: left;
  border-radius: 16px;
  width: 300px;
  padding: 1.4rem 1.5rem;
}

.hp-vsArticleTag {
  font-family: var(--font-mono);
  letter-spacing: .12em;
  color: var(--ink-40);
  background: var(--ink-10);
  border-radius: 100px;
  margin-bottom: .7rem;
  padding: .18rem .5rem;
  font-size: .52rem;
  display: inline-block;
}

.hp-vsArticleTitle {
  font-family: var(--font-serif);
  color: var(--ink);
  margin-bottom: .8rem;
  font-size: 1.05rem;
  line-height: 1.25;
}

.hp-vsArticleBody {
  background: var(--ink-10);
  border-radius: 4px;
  height: 7px;
  margin-bottom: .5rem;
}

.hp-vsArticleBodyShort {
  width: 65%;
}

.hp-vsArticleAuthor {
  border-top: 1px solid var(--ink-10);
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  padding-top: .8rem;
  display: flex;
}

.hp-vsAnonDot {
  background: var(--ink-10);
  border-radius: 50%;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.hp-vsAnonLabel {
  color: var(--ink-40);
  font-size: .62rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.hp-vsExpertOverlay {
  background: var(--white);
  border: 1.5px solid var(--teal-light);
  box-shadow: var(--shadow-lg);
  text-align: left;
  border-radius: 14px;
  align-items: center;
  gap: .7rem;
  max-width: 270px;
  padding: .9rem 1rem;
  display: flex;
  position: absolute;
  top: 14%;
  left: 4%;
  transform: rotate(-1.5deg);
}

.hp-vsExpertOverlay > div {
  min-width: 0;
}

.hp-vsExpertName {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
}

.hp-vsExpertRole {
  color: var(--ink-70);
  margin-bottom: .3rem;
  font-size: .65rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.hp-vsExpertBadge {
  font-family: var(--font-mono);
  color: var(--teal-dark);
  background: var(--teal-light);
  border-radius: 100px;
  padding: .15rem .45rem;
  font-size: .52rem;
  font-weight: 500;
  display: inline-block;
}

.hp-vsCertBadge {
  background: var(--teal);
  color: var(--white);
  border-radius: 12px;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  position: absolute;
  bottom: 10%;
  right: 4%;
  box-shadow: 0 8px 24px var(--teal-30);
}

.hp-vsCertId {
  font-family: var(--font-mono);
  opacity: .8;
  font-size: .55rem;
  font-weight: 400;
}

.hp-coDemo {
  background: var(--white);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  text-align: left;
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
}

.hp-coArticleTitle {
  font-family: var(--font-serif);
  color: var(--ink);
  margin-bottom: .7rem;
  font-size: 1rem;
}

.hp-coParagraph {
  color: var(--ink-70);
  margin-bottom: 1.2rem;
  font-size: .85rem;
  line-height: 1.7;
}

.hp-coHighlight {
  border-bottom: 2px solid var(--amber);
  background: var(--amber-12);
  border-radius: 2px;
  padding: 0 2px;
}

.hp-coBubble {
  background: var(--amber-pale);
  border: 1.5px solid var(--amber-25);
  border-radius: 12px;
  padding: .9rem 1rem;
  position: relative;
}

.hp-coBubble:before {
  content: "";
  background: var(--amber-pale);
  border-top: 1.5px solid var(--amber-25);
  border-left: 1.5px solid var(--amber-25);
  width: 12px;
  height: 12px;
  position: absolute;
  top: -7px;
  left: 28px;
  transform: rotate(45deg);
}

.hp-coAuthorLine {
  align-items: center;
  gap: .45rem;
  margin-bottom: .5rem;
  display: flex;
}

.hp-coAuthorName {
  color: var(--amber);
  font-size: .75rem;
  font-weight: 600;
}

.hp-coTypePill {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--amber);
  background: var(--amber-10);
  border-radius: 100px;
  margin-left: auto;
  padding: .12rem .45rem;
  font-size: .5rem;
  font-weight: 600;
}

.hp-coText {
  color: var(--ink-70);
  margin-bottom: .8rem;
  font-size: .78rem;
  line-height: 1.6;
}

.hp-coActions {
  gap: .5rem;
  display: flex;
}

.hp-coBtnAccept {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all .2s var(--ease);
  border: none;
  border-radius: var(--bouton-rayon);
  padding: .4rem .9rem;
  font-size: .72rem;
  font-weight: 600;
}

.hp-coBtnAccept:hover {
  background: var(--teal-mid);
  transform: translateY(-1px);
}

.hp-coBtnDecline {
  color: var(--ink-40);
  border: 1px solid var(--ink-10);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all .2s var(--ease);
  background: none;
  border-radius: var(--bouton-rayon);
  padding: .4rem .9rem;
  font-size: .72rem;
  font-weight: 500;
}

.hp-coBtnDecline:hover {
  color: var(--ink);
  border-color: var(--ink-20);
}

.hp-dmCol {
  flex-direction: column;
  gap: .7rem;
  display: flex;
}

.hp-dmCard {
  background: var(--white);
  border: 1px solid var(--ink-10);
  text-align: left;
  transition: all .25s var(--ease);
  border-radius: 12px;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  display: flex;
}

.hp-dmCard:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.hp-dmIcon {
  font-size: 1.1rem;
  line-height: 1;
}

.hp-dmInfo {
  flex: 1;
  min-width: 0;
}

.hp-dmExpertName {
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
}

.hp-dmCred {
  color: var(--ink-40);
  font-size: .62rem;
}

.hp-dmBadge {
  font-family: var(--font-mono);
  color: var(--teal-dark);
  background: var(--teal-light);
  border-radius: 100px;
  flex-shrink: 0;
  padding: .18rem .5rem;
  font-size: .55rem;
  font-weight: 500;
}

.hp-dmResultLink {
  background: var(--white);
  border: 1.5px solid var(--teal-light);
  color: var(--ink);
  border-radius: 12px;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  padding: .8rem 1rem;
  font-size: .78rem;
  font-weight: 500;
  display: flex;
}

.hp-dmResultStar {
  color: var(--teal);
  font-size: .9rem;
}

.hp-dmResultVerify {
  font-family: var(--font-mono);
  color: var(--ink-40);
  margin-left: auto;
  font-size: .62rem;
}

.hp-howSection {
  padding: 5rem 0 4rem;
}

.hp-howHeader {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
}

.hp-howTimeline {
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  position: relative;
}

.hp-howTimeline:before {
  content: "";
  background: linear-gradient(90deg,
    var(--teal-light),
    var(--teal),
    var(--teal-light));
  z-index: 0;
  height: 2px;
  position: absolute;
  top: 28px;
  left: calc(50% / var(--cols, 5));
  right: calc(50% / var(--cols, 5));
}

.hp-howTlStep {
  text-align: center;
  z-index: 1;
  padding: 0 1rem;
  position: relative;
}

.hp-howTlNum {
  background: var(--white);
  border: 2px solid var(--teal);
  width: 56px;
  height: 56px;
  box-shadow: var(--shadow-sm);
  transition: all .3s var(--ease);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.2rem;
  display: flex;
  position: relative;
}

.hp-howTlStep:hover .hp-howTlNum {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--teal-15);
}

.hp-howTlInner {
  background: var(--teal);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.hp-howTlInner svg {
  stroke: var(--white);
  fill: none;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 12px;
  height: 12px;
}

.hp-howTlN {
  background: var(--ink);
  color: var(--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  font-size: .5rem;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: -3px;
  right: -3px;
}

.hp-howTlTitle {
  font-family: var(--font-serif);
  color: var(--ink);
  margin-bottom: .4rem;
  font-size: 1.1rem;
}

.hp-howTlDesc {
  color: var(--ink-70);
  max-width: 260px;
  margin: 0 auto;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
}

.hp-casesGrid {
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 2rem auto 0;
  display: grid;
}

.hp-caseCard {
  background: var(--white);
  border: 1px solid var(--ink-10);
  transition: all .3s var(--ease);
  border-radius: 14px;
  padding: 1.5rem;
}

.hp-caseCard:hover {
  background: var(--ink-08);
  transform: translateY(-2px);
}

.hp-caseIcon {
  background: var(--teal-light);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 1rem;
  display: flex;
}

.hp-caseIcon svg {
  width: 20px;
  height: 20px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hp-caseName {
  color: var(--ink);
  margin-bottom: .4rem;
  font-size: .88rem;
  font-weight: 600;
}

.hp-caseDesc {
  color: var(--ink-40);
  margin-bottom: .6rem;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.6;
}

.hp-caseTag {
  color: var(--ink-20);
  background: var(--ink-05);
  border-radius: 100px;
  padding: .2rem .5rem;
  font-size: .5rem;
  font-weight: 600;
  display: inline-block;
}

.hp-pricingRow {
  text-align: center;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1rem;
  max-width: 820px;
  margin: 2rem auto 0;
  display: grid;
}

.hp-prCard {
  background: var(--white);
  border: 1px solid var(--ink-10);
  transition: all .3s var(--ease);
  border-radius: 14px;
  padding: 1.5rem;
}

.hp-prCard:hover {
  background: var(--ink-05);
  transform: translateY(-3px);
}

.hp-prCardFeatured {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal-15), 0 8px 32px var(--teal-12);
}

.hp-prBadge {
  color: var(--teal-vif-80);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--teal-15);
  border-radius: 100px;
  margin-bottom: .7rem;
  padding: .12rem .45rem;
  font-size: .5rem;
  font-weight: 700;
  display: inline-block;
}

.hp-prName {
  font-family: var(--font-serif);
  color: var(--ink);
  margin-bottom: .3rem;
  font-size: 1.15rem;
}

.hp-prPrice {
  font-family: var(--font-serif);
  color: var(--ink);
  margin-bottom: .3rem;
  font-size: 2rem;
}

.hp-prPrice span {
  color: var(--ink-40);
  font-size: .8rem;
  font-family: var(--font-sans);
  font-weight: 300;
}

.hp-prPrice span.hp-prFrom {
  display: block;
  font-size: .72rem;
  margin-bottom: .1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hp-prDesc {
  color: var(--ink-70);
  margin-bottom: 1rem;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.65;
}

.hp-prFeatures {
  text-align: left;
  margin-bottom: 1.2rem;
  padding: 0;
  list-style: none;
}

.hp-prFeatures li {
  color: var(--ink-70);
  border-bottom: 1px solid var(--ink-10);
  align-items: center;
  gap: .4rem;
  padding: .35rem 0;
  font-size: .8rem;
  display: flex;
}

.hp-prFeatures li:last-child {
  border-bottom: none;
}

.hp-prCheck {
  color: var(--teal);
  flex-shrink: 0;
  font-size: .75rem;
}

.hp-prBtn {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  transition: all .2s var(--ease);
  border-radius: var(--bouton-offre-rayon);
  justify-content: center;
  align-items: center;
  gap: .3rem;
  width: 100%;
  padding: .7rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  display: inline-flex;
}

.hp-prBtn:hover {
  background: var(--teal-mid);
  transform: translateY(-1px);
}

.hp-footer {
  background: var(--cream);
  border-top: 1px solid var(--ink-10);
  text-align: center;
  padding: 3rem 2rem 2rem;
}

.hp-fLogo {
  display: inline-block;
}

.hp-fLogo img {
  width: auto;
  height: 30px;
  margin: 0 auto;
  display: block;
}

.hp-fDesc {
  color: var(--ink-40);
  margin: .4rem 0 1.5rem;
  font-size: .82rem;
  font-weight: 300;
}

.hp-fLinks {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.hp-fLinks a {
  color: var(--ink-40);
  font-size: .82rem;
  transition: color .15s;
}

.hp-fLinks a:hover {
  color: var(--ink);
}

.hp-fCopy {
  color: var(--ink-20);
  font-size: .7rem;
}

/* L'étiquette de version des mentions (D-20) : le style des mentions, dont elle hérite (la charte n'a pas de ton plus discret
   que --ink-20) ; insécable, pour qu'un passage à la ligne en mobile la garde entière. */
.hp-fVersion {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hp-scrollLayout {
    grid-template-columns: 1fr;
    padding: 0 2rem;
  }

  .hp-scrollVisual {
    height: auto;
    min-height: 0;
    margin-bottom: 2rem;
    position: relative;
  }

  .hp-svPanel {
    opacity: 1;
    display: none;
    position: relative;
    transform: none;
  }

  .hp-svPanelActive {
    display: block;
  }

  .hp-sectionInner {
    padding: 0 2rem;
  }

  .hp-vis {
    transform: translateY(20px);
  }

  /* 2026-07-04 (ux-designer) — bloc 3 (experts) : restaurer la cascade desktop en mobile.
     Le stack repassait en flex column (empilement plat) qui ne representait pas l'effet
     "cartes superposees en eventail" du desktop. On garde le positionnement absolu mais
     avec des offsets/max-width adoucis pour ne pas couvrir le titre de l'article sur la
     largeur reduite (~350px) et ne pas deborder l'ecran (pas de scroll-x).
     A REPORTER dans la source React amont narrative.module.css, sinon perdu au prochain export. */
  .hp-vsStack {
    height: 360px;
  }

  .hp-vsExpertOverlay {
    max-width: 210px;
    top: 6%;
    left: 0;
    transform: rotate(-1.5deg);
  }

  .hp-vsCertBadge {
    bottom: 8%;
    right: 0;
  }

  .hp-hero {
    padding: 3rem 1.5rem 0;
  }

  .hp-topBar {
    padding: 0 1rem;
  }

  .hp-topLink {
    display: none;
  }

  .hp-floatCta {
    bottom: 1rem;
    right: 1rem;
  }
}

@media (max-width: 768px) {
  .hp-bigStats {
    grid-template-columns: 1fr;
    padding: 0 2rem;
  }

  .hp-pricingRow, .hp-casesGrid {
    grid-template-columns: 1fr;
  }

  .hp-howTimeline {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 2rem;
  }

  .hp-howTimeline:before {
    display: none;
  }

  .hp-btnGhost {
    margin-top: .6rem;
    margin-left: 0;
  }

  .hp-sCta {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }

  .hp-hero .hp-sCta, .hp-sectionFull .hp-sCta {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-w {
    transition: none;
    color: inherit !important;
  }

  .hp-vis, .hp-sCta, .hp-q {
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
  }

  .hp-marqueeTrack {
    animation: none;
  }
}

/* ============================================================================
   MOBILE OVERRIDES — ajout manuel PeerdBy (hors export amont)
   ----------------------------------------------------------------------------
   La source React de cette page (src/components/marketing/narrative/
   narrative.module.css) n'est PAS dans ce repo : website/static/ est
   l'artefact deploye. Ces regles corrigent le rendu mobile directement sur
   l'artefact. Elles vivent TOUTES dans des @media (max-width:...) : desktop
   strictement inchange. A reporter dans la source React amont si/quand elle
   est reintegree, sinon perdu au prochain re-export.
   Valide UX Designer (top bar mobile) + Tech Lead (approche) — 2026-07-01.
   ============================================================================ */

/* D-89 (11/10/2026, choix de Fabien) : les liens de la barre de l'accueil ne paraissent qu'à partir de 1 100 px, où trois
   liens de 60 caractères en tout tiennent sur une ligne (mesuré : 67 à 74) ; en deçà, le logo et le bouton d'appel seuls. */
@media (max-width: 1099px) {
  .hp-topLink,
  .hp-topGhost {
    display: none;
  }
}

/* --- Top bar : logo + 1 seul CTA compact "Certifier ->" (UX 2026-07-01) --- */
.pb-cta-full { display: inline; }

@media (max-width: 900px) {
  /* Barre plus basse facon nav app (charte h-14 ~ 56px) */
  .hp-topBar {
    height: 56px;
    padding: .5rem 1rem 0;
  }

  /* On ne garde que le logo + le CTA primaire. "Se connecter" et
     "Vous etes expert ?" restent accessibles via le hero et le floatCta
     (qui les reaffiche au scroll). */
  .hp-topLink,
  .hp-topGhost {
    display: none;
  }

  /* Libelle compact : "Certifier ->" au lieu de "Certifier un contenu ->" */
  .pb-cta-full { display: none; }

  /* CTA compact mais cible tactile >= 44px (WCAG 2.5.5) */
  .hp-topCta {
    min-height: 44px;
    padding: .6rem 1.2rem;
    font-size: .85rem;
  }

  /* Le hero ne doit plus etre recouvert par la barre (56px + respiration) */
  .hp-hero {
    padding-top: 5.5rem;
  }
}

/* --- Smartphone portrait : CTA hero pleine largeur + touch targets --- */
@media (max-width: 480px) {
  /* Empilage vertical des CTA hero + section finale, largeur egale */
  .hp-sCta {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
    width: 100%;
  }

  .hp-hero .hp-sCta {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .hp-btnBig,
  .hp-btnGhost {
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-left: 0;
  }

  /* Cible tactile du floatCta secondaire (>= 44px) */
  .hp-floatBtnSm {
    min-height: 44px;
  }

  /* Respiration laterale homogene sur les sections a 3rem -> 1.25rem */
  .hp-scrollLayout,
  .hp-sectionInner,
  .hp-bigStats {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hp-hero {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Titre hero : plancher legerement remonte pour l'impact sur petit ecran */
  .hp-q {
    font-size: clamp(2.1rem, 7vw, 3.2rem);
  }
}

/* ----------------------------------------------------------------------------
   Scrolly-telling MOBILE : image de chaque bloc SOUS son texte (UX 2026-07-03)
   ----------------------------------------------------------------------------
   Demande Hugo : sur mobile, chaque visuel colle sous le texte de son bloc,
   dans l'ordre texte1->img1->texte2->img2->texte3->img3. Desktop inchange.

   Contrainte structurelle : le DOM garde .scrollText (3 .stBlock[data-visual])
   et .scrollVisual (3 .svPanel[data-panel]) comme deux conteneurs SEPARES ->
   en desktop la colonne visuelle est sticky et JS (main.js updateVisuals) swap
   le panneau actif au scroll. Impossible d'entrelacer par simple `order` tant
   que texte et visuels vivent dans deux boites distinctes.

   Solution CSS-only : `display:contents` sur .scrollText et .scrollVisual les
   fait disparaitre en tant que boites -> leurs 6 enfants deviennent enfants
   directs du flex .scrollLayout, ou un `order` peut les entrelacer par domaine
   (problem/crypto/experts). Aucun markup touche, JS intact : main.js continue a
   toggler .svPanelActive mais ce toggle ne pilote plus l'affichage en mobile
   (tous les panneaux sont visibles), donc c'est un no-op visuel ici.

   A reporter dans la source React amont (narrative.module.css) sinon perdu au
   prochain re-export de website/static/. Valide UX Designer — 2026-07-03.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* .scrollLayout redevient un flex vertical qui accueille directement les
     6 enfants (3 textes + 3 panneaux) une fois les wrappers "aplatis". */
  .hp-scrollLayout {
    flex-direction: column;
    display: flex;
  }

  /* Aplatit les deux conteneurs : leurs enfants remontent dans le flex parent. */
  .hp-scrollText,
  .hp-scrollVisual {
    display: contents;
  }

  /* Tous les panneaux visibles (on annule le display:none / svPanelActive du
     bloc mobile plus haut) : le swap JS ne doit plus masquer d'image. */
  .hp-svPanel,
  .hp-svPanelActive {
    opacity: 1;
    width: 100%;
    display: block;
    position: relative;
    transform: none;
  }

  /* Bloc texte : plus de min-height 80vh (evite un gouffre entre texte et son
     image) ; on garde une respiration verticale mesuree. */
  .hp-stBlock,
  .hp-stBlock:first-child,
  .hp-stBlock:last-child {
    min-height: 0;
    padding: 1.5rem 0 .75rem;
  }

  /* Respiration sous chaque visuel avant le texte suivant. */
  .hp-svPanel {
    margin: 0 0 2.5rem;
  }

  /* Entrelacement par domaine : texteN -> imageN.
     order 1..6 sur les enfants desormais freres dans .scrollLayout. */
  .hp-stBlock[data-visual="problem"] { order: 1; }
  .hp-svPanel[data-panel="problem"]  { order: 2; }
  .hp-stBlock[data-visual="crypto"]  { order: 3; }
  .hp-svPanel[data-panel="crypto"]   { order: 4; }
  .hp-stBlock[data-visual="experts"] { order: 5; }
  .hp-svPanel[data-panel="experts"]  { order: 6; }
  .hp-stBlock[data-visual="v4"]      { order: 7; }
  .hp-svPanel[data-panel="v4"]       { order: 8; }
  .hp-stBlock[data-visual="v5"]      { order: 9; }
  .hp-svPanel[data-panel="v5"]       { order: 10; }
  .hp-stBlock[data-visual="v6"]      { order: 11; }
  .hp-svPanel[data-panel="v6"]       { order: 12; }
}

/* Titres des blocs hp en <h1> et <h2> (spec referencement, REQ-1 ; design §3) : la marge haute et la graisse que le
   navigateur donne à un titre, neutralisées pour garder le rendu de la <div> d'avant (mesuré par la tâche 3.0 : 0 écart
   sur 498 propriétés) ; sur une <div>, ces deux valeurs ne changent rien. En fin de fichier : aucune ligne d'Hugo ne bouge. */
.hp-q {
  margin-top: 0;
  font-weight: inherit;
}

/*# sourceMappingURL=src_components_marketing_narrative_narrative_module_0tzerxj.css.map*/
/* Le bouton FR/EN de la barre (src/components/chrome/BoutonDeLangue.astro ; spec site-astro, REQ-6 ; D-17 du 23/10) : le lien
   texte de la barre (.hp-topLink : même police, couleur et survol), en petit, dernier contrôle après l'appel ; cible de 44 px
   (WCAG 2.5.5). Ses deux classes (0,2,0) l'emportent sur le `display: none` que .hp-topLink (0,1,0) reçoit sous 1 100 px et
   sous 900 px (D-89), à toute largeur : il reste visible où les autres liens s'effacent. */
.hp-topLink.hp-topLangue { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 .75rem; font-size: .82rem; display: inline-flex; }

/* La barre en mobile avec le bouton FR/EN (tâche 2.1 ; correctif du 22/10/2026) : le libellé du bouton plein ne se replie
   plus sur deux lignes (comme .pb-link des autres pages). Sous 360 px, logo, EN et « Certifier → » dépassaient la boîte de
   contenu (mesuré à 320 px : 17 px) : le logo y prend sa hauteur des autres pages (.pb-logo img, pages.css). */
.hp-topCta { white-space: nowrap; }
@media (max-width: 359px) { .hp-topLogo img { height: 30px; } }