/* ============================================================
   MyDigitalScore — landing simulateur de visibilité
   Converti depuis home/simulateur.css.
   ============================================================ */

   .mds-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .mds-hero-media { position: absolute; inset: 0; }
  .mds-hero-img { width: 100%; height: 100%; object-fit: cover; }
  .mds-hero-shade {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 40%, rgba(26, 58, 43, 0.34) 0%, rgba(26, 58, 43, 0.62) 70%, rgba(26, 58, 43, 0.78) 100%),
      linear-gradient(180deg, rgba(26, 58, 43, 0.55) 0%, rgba(26, 58, 43, 0.35) 45%, rgba(26, 58, 43, 0.6) 100%);
  }
  .mds-hero-inner {
    position: relative;
    z-index: 2;
    color: var(--blanc-casse);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 170px;
    padding-bottom: 64px;
  }
  .mds-brand {
    font-family: var(--font-text);
    font-weight: var(--w-strong);
    font-size: 20px;
    color: var(--jaune-mousse);
    margin: 0 0 30px;
  }
  .mds-brand em { font-family: var(--font-display); font-style: italic; font-size: 1.12em; }
  .mds-hero-title {
    font-family: var(--font-text);
    font-weight: var(--w-thin);
    font-size: clamp(42px, 5.2vw, 82px);
    line-height: 1.06;
    margin: 0 auto 26px;
    max-width: 15em;
  }
  .mds-hero-title em { font-family: var(--font-display); font-style: italic; font-size: 1.05em; }
  .mds-hero-sub {
    font-family: var(--font-text);
    font-weight: var(--w-thin);
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.55;
    color: rgba(245, 245, 245, 0.9);
    max-width: 34em;
    margin: 0 auto 44px;
  }
  
  .mds-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--jaune-mousse);
    color: var(--vert-olive);
    border-radius: var(--radius-pill);
    padding: 22px 44px;
    font-family: var(--font-text);
    font-weight: var(--w-strong);
    font-size: clamp(19px, 1.6vw, 23px);
    transition: background 200ms ease, color 200ms ease, gap 200ms ease, transform 200ms ease;
  }
  .mds-cta-main svg { transition: transform 200ms ease; }
  .mds-cta-main:hover { background: var(--rose-sorbet); color: var(--blanc-casse); gap: 20px; transform: translateY(-2px); }
  
  .mds-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
  .mds-badge {
    display: inline-flex;
    align-items: center;
    background: var(--jaune-mousse);
    color: var(--vert-olive);
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-family: var(--font-text);
    font-weight: var(--w-strong);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
  }
  
  /* ——— Comment ça marche ——— */
  .mds-how .section-title em { font-family: var(--font-display); font-style: italic; color: var(--vert-pesto); }
  .mds-how-lead {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--vert-pesto);
    margin: 16px 0 0;
  }
  .mds-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .mds-step {
    border-radius: 28px;
    padding: clamp(32px, 3vw, 52px);
    min-height: 360px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: var(--blanc-casse);
  }
  .mds-step-num { font-family: var(--font-display); font-style: italic; font-size: clamp(80px, 8vw, 132px); line-height: 0.9; color: rgba(245, 245, 245, 0.85); }
  .mds-step-body { margin-top: clamp(28px, 4vw, 48px); }
  .mds-step h3 { font-family: var(--font-text); font-weight: var(--w-strong); font-size: clamp(24px, 2vw, 30px); margin: 0 0 14px; }
  .mds-step p { font-family: var(--font-text); font-weight: var(--w-thin); font-size: 17px; line-height: 1.55; margin: 0; opacity: 0.92; }
  .mds-how-cta { margin-top: 56px; text-align: center; }
  
  /* ——— Exemple de rapport ——— */
  .mds-report { padding: 0 var(--gutter); }
  .mds-report .section-title em { font-family: var(--font-display); font-style: italic; color: var(--orange-patate); }
  .mds-report-card {
    background: var(--jaune-mousse);
    color: var(--vert-olive);
    border-radius: 28px;
    padding: clamp(44px, 6vw, 92px);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 90px);
    align-items: center;
  }
  .mds-report-over { font-family: var(--font-text); font-size: 12.5px; font-weight: var(--w-strong); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0 0 22px; }
  .mds-report-card .section-title { color: var(--vert-olive); }
  .mds-report-lead { font-family: var(--font-text); font-weight: var(--w-thin); font-size: 17.5px; line-height: 1.6; max-width: 30em; margin: 22px 0 0; }
  .mds-bars { display: grid; gap: 18px; }
  .mds-bar-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 44px; align-items: center; gap: 16px; }
  .mds-bar-name { font-family: var(--font-text); font-size: 15px; font-weight: var(--w-strong); }
  .mds-bar { height: 10px; border-radius: var(--radius-pill); background: rgba(26, 58, 43, 0.16); overflow: hidden; }
  .mds-bar i {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--vert-olive);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .rv.rv-in .mds-bar i { transform: scaleX(1); }
  .mds-bar-val { font-family: var(--font-display); font-size: 22px; text-align: right; }
  @media (prefers-reduced-motion: reduce) {
    .mds-bar i { transition: none; transform: scaleX(1); }
  }
  
  /* ——— Double CTA ——— */
  .mds-page .cta-head .section-title em { font-family: var(--font-display); font-style: italic; color: var(--vert-pesto); }
  
  /* ——— Note bêta ——— */
  .mds-beta { text-align: center; padding: 0 var(--gutter) 106px; }
  .mds-beta p { font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; max-width: 30em; margin: 0 auto; color: var(--vert-olive); }
  .mds-beta a { text-decoration: underline; text-underline-offset: 4px; }
  .mds-beta a:hover { color: var(--vert-pesto); }
  
  /* ——— Responsive ——— */
  @media (max-width: 980px) {
    .mds-hero-inner { padding-top: 130px; padding-bottom: 56px; }
    .mds-cta-main { padding: 18px 34px; }
    .mds-steps { grid-template-columns: 1fr; }
    .mds-step { min-height: 0; }
    .mds-step-num { font-size: 84px; }
    .mds-report-card { grid-template-columns: 1fr; padding: 40px 28px; }
    .mds-bar-row { grid-template-columns: 108px minmax(0, 1fr) 38px; }
    .mds-bar-name { font-size: 13.5px; }
  }