:root {
      --texte: #1a1c2e;
      --texte-doux: #4a506b;
      --border: #e2eaf7;
	  
    }

    body { background: #fff; color: var(--texte);}

    .hero-tag {
      background: var(--bleu-clair);
      font-size: .72rem;
      padding: 5px 14px; border-radius: 100px;
    }
    .hero h1 {
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      margin-bottom: 1.25rem;
    }
    .hero-sub {
      font-size: 1rem; line-height: 1.75;
      max-width: 480px;
    }
    .btn-primary {
      white-space: nowrap;
    }
    /* Visuel hero : bloc éditorial stylisé */
    .hero-visual {
      align-self: end;
    }
    .hero-mockup {
      background: #fff;
      border-radius: 12px 12px 0 0;
      padding: 2rem;
      box-shadow: 0 -20px 60px rgba(0,0,0,.3);
      max-width: 440px;
    }
    .mockup-tag {
      display: inline-block; background: var(--vert-clair); color: #2a6b29;
      font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      padding: 3px 10px; border-radius: 100px; margin-bottom: 1rem;
    }
    .mockup-title {
      font-size: 1.05rem; font-weight: 800; color: var(--bleu-sombre);
      margin-bottom: .5rem; line-height: 1.3;
    }
    .mockup-bar {
      height: 6px; border-radius: 3px; background: var(--border);
      margin-bottom: .4rem; overflow: hidden;
    }
    .mockup-bar span { display: block; height: 100%; border-radius: 3px; }
    .mockup-bar:nth-child(3) span { width: 90%; background: var(--bleu); }
    .mockup-bar:nth-child(4) span { width: 70%; background: var(--vert); }
    .mockup-bar:nth-child(5) span { width: 55%; background: var(--jaune); }
    .mockup-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 1.5rem; padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-size: .78rem; color: var(--texte-doux);
    }
    .mockup-dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--vert); display: inline-block; margin-right: .4rem;
    }
/* RESPONSIVE */
    @media (max-width: 960px) {
      .hero { grid-template-columns: 1fr; padding-bottom: 60px; }
      .hero-visual { display: none; }
      .probleme-grid { grid-template-columns: 1fr 1fr; }
      .offre-item, .offre-item.reverse { grid-template-columns: 1fr; gap: 2.5rem; }
      .offre-item.reverse .offre-content { order: 1; }
      .offre-item.reverse .offre-visual { order: 2; }
      .processus-steps { grid-template-columns: repeat(2, 1fr); }
      .processus-steps::before { display: none; }
      .cas-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .probleme-grid { grid-template-columns: 1fr; }
      .processus-steps { grid-template-columns: 1fr; }
      .section-cta-band { flex-direction: column; }
    }